/* ==================================================================
   下層ページ（ギャラリー・会社概要・お問い合わせ）
   参考元の下層ページ（about / brand / contact / shopinfo）を 1440幅と iPhone 390幅で実測した値。
   見出し書体を Six Caps に置き換えるときは、文字サイズを 0.836倍にする（トップと同じ比率）。
   参考元が角丸（3px・6px・35px）の所は、このサイトの規範（角丸なし）に合わせて角にしている。
================================================================== */

[hidden]{display:none!important}

/* ---------- 大見出し（参考元 19.7vw → 16.47vw、上に172px） ---------- */
.under-mv{position:relative;text-align:center}
.under-mv__title{display:flex;justify-content:center;padding-top:172px;font-family:var(--huge);font-weight:400;
  font-size:16.47vw;line-height:1.016;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}

/* ページ内のメニュー（区切りは2pxの縦線、21px） */
.under-nav{position:relative;z-index:1;margin-left:7px}
.under-nav ul{display:flex;justify-content:center;margin-top:45px}
.under-nav li{position:relative;padding:0 1.95em;font-family:var(--cond);font-weight:500;font-size:21px;line-height:25px;
  letter-spacing:.05em;text-transform:uppercase}
.under-nav li::before,.under-nav li:last-child::after{content:"";position:absolute;top:43%;width:2px;height:51%;
  background:var(--black);transform:translateY(-50%)}
.under-nav li::before{left:0}
.under-nav li:last-child::after{right:0}
.under-nav a,.under-nav button{position:relative;display:inline-block;padding-left:2px;z-index:0;
  letter-spacing:inherit;text-transform:inherit}
.under-nav a::after,.under-nav button::after{content:"";position:absolute;left:0;right:-3%;bottom:-2px;height:4px;
  background:var(--accent);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e-line)}
.under-nav a:hover::after,.under-nav button:hover::after,.under-nav [aria-pressed="true"]::after{transform:scaleX(1)}
/* 押せる範囲を上下44pxまで広げる（見た目は変えない） */
.under-nav a::before,.under-nav button::before{content:"";position:absolute;left:50%;top:50%;width:max(calc(100% + 16px),44px);height:44px;transform:translate(-50%,-50%)}

/* 見出しの下の写真（幅75%・高さ59vw） */
.under-visual{width:75%;height:34vw;margin:72px auto 70px}
.under-visual img{width:100%;height:100%;object-fit:cover}

/* ==================================================================
   会社概要
================================================================== */
.about--page{height:auto;margin-bottom:0}
.about--page .inner{height:auto;align-items:stretch}
.about--page .about__desc{margin-bottom:4px}

/* 写真2枚を互い違いに。縦に積むと1枚で1画面を使ってしまうので、横に並べて少しずらす
   （参考元は縦積みだが、読む人がスクロールし続けることになるため詰めた） */
.image-rand{margin-top:50px}
.image-rand .inner{display:flex;align-items:flex-start;column-gap:4%}
.image-rand__img{width:46%;height:26vw}
.image-rand__img--b{width:40%;height:22vw;margin-left:auto;margin-top:6vw}
.image-rand__img img{width:100%;height:100%;object-fit:cover}

/* 2つの入口（カード幅45%、2枚目は7vw下げる。背面に灰色の帯） */
.select{margin-top:0;padding-top:150px;margin-bottom:17vw}
.select__inner{position:relative;margin-left:4%}
.select__inner::before{content:"";position:absolute;left:0;top:185px;bottom:-17vw;width:98.3%;background:var(--band)}
.select__list{position:relative;display:flex;align-items:flex-start;width:86%;margin:0 auto;z-index:1}
.select__item{width:45%}
.select__item + .select__item{margin-left:9.1%;margin-top:7vw}
.select__image{display:block;height:36.7vw}
.select__image img{width:100%;height:100%;object-fit:cover;transition:filter .35s ease}
.select__item:hover .select__image img{filter:none}
.select__cont{margin-top:59px}
/* 1440幅で78px。狭い画面ではカード幅に合わせて縮める（MAINTENANCE がはみ出さない） */
.select__title{font-family:var(--cond);font-weight:700;font-size:min(78px,5.42vw);line-height:1.22;text-transform:uppercase}
.select__sub{margin:-1px 0 0 2px;font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.15em}
.select__desc{width:86%;margin-top:34px;font-size:14px;line-height:2.1;letter-spacing:.28px}
.select__cont .more{margin-top:33.8px}

/* ---------- 中央ぞろえの情報ブロック（参考元 Shop Info） ---------- */
.info{position:relative;padding-top:94px;text-align:center}
.info + .info{margin-top:55px;padding-top:70px}
.info__inner{width:73%;margin:0 auto}
.info__title{margin-bottom:25px;font-family:var(--cond);font-weight:500;font-size:49px;line-height:59px;letter-spacing:.01em;text-transform:uppercase}
.info__title span{position:relative;display:inline-block;z-index:0}
/* 英字の見出しに添える日本語（トップの sect__jp と同じ考え方。英語が読めなくても分かるように） */
.info__jp{margin:-16px 0 30px;font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.12em}
.about__jp{margin-top:18px;font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.12em}
.info__title span::after{content:"";position:absolute;left:-1%;right:-2%;bottom:3px;height:5px;background:var(--accent);z-index:-1}

/* 会社データ・用事の表（.data）は、トップでも使うので style.css に移した */

/* ---------- アクセス ---------- */
.info address{margin-top:-8px;font-family:var(--jp);font-weight:700;font-size:19px;line-height:1.7}
.info__tel{margin-top:10px;font-family:var(--din);font-weight:700;font-size:21.5px;letter-spacing:-.02em}
.info__tel::before{content:"tel";margin-right:5px;font-size:16px;letter-spacing:.01em;text-transform:uppercase}
.gmap{display:flex;align-items:center;justify-content:center;width:205px;height:48px;margin:30px auto 0;border:1px solid var(--cat);
  font-family:var(--din);font-weight:700;font-size:15px;letter-spacing:-.01em;transition:background .3s ease,color .3s ease}
.gmap:hover{background:var(--black);color:var(--white)}
/* 地図の背面に、右端まで届く帯（参考元: 地図の120px下から、高さ640px、画面幅の95%） */
/* 下に250px空けて、帯（地図の160px下まで伸びる）とフッターの間に白を90px残す */
.map{position:relative;margin:80px 0 250px}
/* 参考元と同じく、画面に入ったら右から1秒で伸びる（0.5秒遅れ） */
.map::before{content:"";position:absolute;top:120px;right:-18.5%;width:0;height:640px;background:var(--black);transition:width 1s var(--e-slide) .5s}
.map.is-in::before{width:130.1%}
.map iframe{position:relative;display:block;width:950px;max-width:100%;height:600px;margin:0 auto;border:2px solid var(--black);
  background:var(--white)}

/* ==================================================================
   お問い合わせ
================================================================== */
/* 電話の案内（幅760px、上に2pxの黒線・下に1pxの灰線） */
.contact-desc{width:min(760px,83.5%);margin:71px auto 0;border-top:2px solid var(--black);border-bottom:1px solid var(--ph)}
.contact-desc--after{margin-top:118px}
.contact-desc__inner{width:95%;margin:56px auto 75px}
.contact-desc__text{max-width:44em;font-size:14px;line-height:2.3}
.contact-list{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:23px;font-family:var(--din);font-weight:700;font-size:24px}
.contact-list li{position:relative}
.contact-list li + li{margin-left:33px}
.contact-list li + li::after{content:"";position:absolute;left:-16px;top:54%;width:1px;height:15px;background:var(--black);transform:translateY(-50%) rotate(25deg)}
.contact-list__label{margin-right:5px;font-size:14px}
.contact-list__hours{font-size:18px}
.contact-list__hours span{font-family:var(--jp);font-size:13px}

/* フォーム（幅760px。入力欄は上下33px・左右26pxの余白） */
.form{width:min(760px,83.5%);margin:60px auto 150px}
.form__inner{width:98%;margin:0 auto}
.form__row + .form__row{margin-top:31px}
.form__label{display:block;margin:0 0 19px 3px;font-family:var(--din);font-weight:700;font-size:16px;line-height:21px;letter-spacing:.02em}
.form__label span{margin-left:10px;font-family:var(--jp);font-size:13px;letter-spacing:0}
.form__label.is-req::after{content:"※";margin-left:5px;font-family:var(--jp);font-size:11px;color:var(--accent)}
.form input[type="text"],.form input[type="tel"],.form input[type="email"],.form select,.form textarea{
  display:block;width:100%;padding:33px 26px;border:1px solid var(--cat);border-radius:0;background:var(--white);
  color:var(--black);font:inherit;font-size:15px;line-height:1.5;-webkit-appearance:none;appearance:none}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--black);background:var(--band)}
.form ::placeholder{color:var(--cat);opacity:1}
.form textarea{height:405px;padding:26px;line-height:1.9;resize:vertical}
.form__select{position:relative}
.form__select::after{content:"";position:absolute;right:30px;top:50%;width:9px;height:9px;border-right:2px solid var(--black);border-bottom:2px solid var(--black);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.form select{padding-right:60px;cursor:pointer}

.privacy{height:400px;padding:10px;border:1px solid var(--cat)}
.privacy__frame{height:100%;overflow:auto;padding:42px 46px 70px}
.privacy__lead{font-family:var(--din),var(--jp);font-weight:700;font-size:14.5px;line-height:21px}
/* 両端揃えにすると、<wbr> でしか折り返さない行で字間が大きく開く（「有 限 会 社」）ので左揃え */
.privacy__desc{max-width:44em;margin-top:11px;font-size:14px;line-height:2.1;text-align:left}
.privacy__desc:nth-child(2){padding-bottom:32px;margin-bottom:35px;border-bottom:1px dotted var(--ph)}
.privacy__desc + .privacy__lead{margin-top:29px}

/* 同意は、四角22px・ラベル全体で高さ44px押せる */
.accept{position:relative;display:flex;align-items:center;gap:12px;margin-top:9px;padding:11px 0;font-family:var(--jp);font-weight:700;font-size:13.5px;cursor:pointer}
.accept input{position:absolute;left:0;top:50%;width:22px;height:22px;margin:0;opacity:0;transform:translateY(-50%)}
.accept__box{position:relative;flex:0 0 22px;height:22px;border:1px solid var(--cat);background:var(--white)}
.accept__box::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;background:var(--black);transform:translate(-50%,-50%);opacity:0}
.accept input:checked + .accept__box::before{opacity:1}
.accept input:focus-visible + .accept__box{outline:2px solid var(--accent);outline-offset:3px}

.form__submit{display:block;width:100%;height:81px;margin-top:31px;background:var(--black);color:var(--white);
  font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.1em;transition:background .25s ease}
.form__note{margin-top:24px;padding:23px 30px;border:1px solid var(--cat);font-family:var(--jp);font-weight:700;font-size:14px;line-height:1.9;word-break:keep-all;overflow-wrap:anywhere}
.form__note--top{margin:0 0 40px}

/* ==================================================================
   ギャラリー（参考元 Brand の一覧：灰色の面の上に4列）
================================================================== */
.archive{position:relative;width:88%;margin:118px auto 0;background:var(--band)}
.archive__list{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:2.32vw;
  width:87%;margin:0 auto;padding:5.9vw 0 1.8vw;z-index:1}
.archive__item{margin-bottom:3.2vw}
.archive__btn{display:block;width:100%;padding-bottom:1vw;text-align:center;transform:translateY(.5vw);transition:transform .2s ease}
.archive__btn:hover{transform:none}
.archive__image{display:block;height:17vw;border:3px solid var(--tile);background:var(--white);transition:border-color .25s ease}
.archive__btn:hover .archive__image{border-color:var(--accent)}
.archive__image img{width:100%;height:100%;object-fit:cover}
.archive__cont{display:block;margin-top:32px}
.archive__eng{display:block;font-family:var(--cond);font-weight:500;font-size:min(37px,2.57vw);line-height:1.1;text-transform:uppercase}
.archive__jpn{display:block;margin-top:2px;font-family:var(--jp);font-weight:700;font-size:12px}

/* 作例を大きく見る（画面いっぱいの黒） */
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--black);color:var(--white)}
.viewer::backdrop{background:var(--black)}
.viewer__close{position:fixed;top:0;right:0;width:97px;height:97px;background:var(--black);z-index:2}
.viewer__close span{position:absolute;left:50%;top:50%;width:3px;height:36px;background:var(--white)}
.viewer__close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.viewer__close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.viewer__body{display:flex;align-items:center;gap:6vw;height:100%;padding:97px 9%}
.viewer__image{flex:0 0 48%;height:100%}
.viewer__image img{width:100%;height:100%;object-fit:contain}
.viewer__text{flex:1 1 auto;min-width:0}
.viewer__eng{font-family:var(--cond);font-weight:700;font-size:min(78px,5.42vw);line-height:1;text-transform:uppercase}
.viewer__jpn{margin-top:8px;font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.15em}
/* 題は差し替わるので <wbr> を置けない。2行になるときは行の長さをそろえて、1字だけ次の行に落ちるのを防ぐ */
.viewer__title{margin-top:34px;font-family:var(--jp);font-weight:700;font-size:20px;line-height:1.5;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.viewer__desc{margin-top:14px;font-size:14px;line-height:2.1}
.viewer__tel{margin-top:34px;font-family:var(--jp);font-weight:700;font-size:13px}
.viewer__tel a{margin-left:8px;font-family:var(--din);font-size:24px}

/* ---------- 769〜1080px（会社データの見出し列を細くする） ---------- */
@media (min-width:769px) and (max-width:1080px){
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  .archive__btn{transform:none;transition:none}
  .map::before{transition:none}
}

/* ==================================================================
   スマホ（768px以下）
================================================================== */
@media (max-width:768px){
  .info__jp{margin:-10px 0 22px;font-size:13px}
  .about__jp{font-size:13px}
  .under-mv .mv__info{display:none}
  .under-mv__title{padding-top:36.3vw;font-size:31.5vw}
  .under-nav ul{margin-top:28px}
  .under-nav li{padding:0 1.25em;font-size:15px;line-height:18px;letter-spacing:.03em}
  .under-nav li::before,.under-nav li:last-child::after{width:1px;height:47%;top:44%}
  .under-nav a::after,.under-nav button::after{bottom:-3px;height:3px}
  .under-visual{width:85%;height:57vw;margin:40px auto 10px}

  /* 会社概要（参考元は写真2枚の段をスマホで出さない） */
  .image-rand{display:none}
  .select{margin-top:65px;padding-top:65px;margin-bottom:20vw}
  .select__inner{margin-left:6px}
  .select__inner::before{top:40vw;bottom:-20vw;width:100%}
  .select__list{flex-direction:column;width:89%}
  .select__item{width:100%}
  .select__item + .select__item{margin:21vw 0 0}
  .select__image{height:85vw}
  .select__cont{width:83%;margin:45px auto 0}
  .select__title{font-size:48px}
  .select__sub{margin-top:-3px;font-size:13px;letter-spacing:.01em}
  .select__desc{width:100%;margin-top:20px;font-size:15px;line-height:2;letter-spacing:.3px}
  .select__cont .more{margin-top:19.8px}

  .info{padding-top:48px}
  .info + .info{margin-top:15px;padding-top:55px}
  .info__inner{width:84%}
  .info__title{margin-bottom:18px;font-size:33px;line-height:40px}
  .info__title span::after{bottom:1px;height:4px}

  .info address{margin-top:-2px;font-size:15px}
  .info__tel{margin-top:6px;font-size:18px}
  .info__tel::before{font-size:13px}
  .gmap{width:230px;height:54px;margin-top:29px}
  .map{margin:54px 0 200px}
  .map::before{top:50px;right:-9.5%;height:100vw}
  .map.is-in::before{width:117.9%}
  .map iframe{height:77vw}

  /* お問い合わせ（入力欄の文字は16px。これより小さいと iPhone が画面を拡大する） */
  .contact-desc{margin-top:43px;border-top:1px solid var(--ph)}
  .contact-desc--after{margin-top:58px}
  .contact-desc__inner{width:94%;margin:40px auto 53px}
  .contact-desc__text{font-size:15px;line-height:2.1}
  .contact-list{flex-direction:column;align-items:flex-start;margin-top:18px;font-size:22px}
  .contact-list li + li{margin:10px 0 0}
  .contact-list li + li::after{display:none}
  .contact-list__hours{font-size:16px}
  .form{width:84.5%;margin:40px auto 50px}
  .form__row + .form__row{margin-top:22px}
  .form__label{margin-bottom:16px;font-size:13px}
  .form__label span{font-size:13px}
  .form input[type="text"],.form input[type="tel"],.form input[type="email"],.form select,.form textarea{padding:22px 18px;font-size:16px}
  .form textarea{height:15em;padding:19px 20px}
  .form__select::after{right:22px}
  .privacy{height:255px}
  .privacy__frame{padding:22px 22px 30px}
  .privacy__lead{font-size:14px}
  .form__submit{height:68px;margin-top:23px;font-size:13px}
  .form__note{padding:18px 20px;font-size:14px}

  /* ギャラリー（2列） */
  .archive{width:91%;margin:58px auto 0}
  .archive__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.5vw;width:88%;padding:5.5vw 0 0}
  .archive__item{margin-bottom:37px}
  .archive__image{height:38.4vw;border-width:2px}
  .archive__cont{margin-top:22px}
  .archive__eng{font-size:25px;line-height:1}
  .archive__jpn{margin-top:4px;font-size:12px}

  .viewer__close{width:77px;height:77px}
  .viewer__close span{height:28px}
  .viewer__body{flex-direction:column;align-items:stretch;gap:32px;height:auto;min-height:100%;padding:77px 8% 48px;overflow:auto}
  .viewer__image{flex:none;height:92vw}
  .viewer__eng{font-size:48px}
  .viewer__title{margin-top:24px;font-size:17px}
  .viewer__desc{font-size:15px;line-height:2}
  .viewer__tel{margin-top:24px}
}

/* ==================================================================
   ペルソナ確認（2026-09-15）からの修正
================================================================== */
.under-mv__jp{margin-top:10px;font-family:var(--jp);font-weight:700;font-size:16px;letter-spacing:.2em}
/* ページ内のメニューは日本語に（「IN STORE」が在庫の意味か分からない、など） */
.under-nav--jp li{font-family:var(--jp);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:none}
/* 会社概要のマチカブの写真はカラー（色で選ぶ車なので） */
.select__image img{filter:none}
.info__hours{margin-top:6px;font-family:var(--jp);font-weight:700;font-size:16px}
.contact-list__hours span{font-size:inherit}
/* フォームは送信先をつなぐまで出さない（準備中なのに書けてしまうと戸惑う） */
.form--paused .form__row,.form--paused .form__submit{display:none}
.form--paused .form__note--top{margin-bottom:0}
/* 拡大表示の中で前後の車へ */
.viewer__nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.viewer__step{min-height:44px;padding:0 20px;border:1px solid var(--white);color:var(--white);font-family:var(--jp);font-weight:700;font-size:14px;transition:background .25s ease,color .25s ease}
.viewer__step:hover{background:var(--white);color:var(--black)}

@media (max-width:768px){
  .under-mv__title{padding-top:30vw;font-size:24vw}
  .under-mv__jp{margin-top:6px;font-size:14px}
  .under-nav--jp li{padding:0 .7em;font-size:13px;letter-spacing:.02em}
  .info__hours{font-size:15px}
  .archive__jpn{font-size:13px}
}

/* ---------- 改稿で足した小さな調整（既存の部品の組みを流用） ---------- */
/* 見出しの下の一文（Shop Info の組みに合わせて中央ぞろえ）。omoi.css から移した */
.info__lead{width:min(720px,100%);margin:0 auto;font-family:var(--jp);font-size:15px;line-height:2.1;letter-spacing:.03em}
.info__lead + .data,.info__lead + address{margin-top:40px}
.info__lead--title{margin-top:0;font-weight:900;font-size:20px;line-height:1.6}
.info__lead--title + .info__lead{margin-top:4px}
.info__lead--title + .info__lead + address{margin-top:28px}
.info__lead--after{margin-top:30px}
/* ページ見出し直下の導入文 */
.under-mv .info__jp{margin:36px 0 10px;font-size:18px}
.under-mv .info__lead{margin-top:28px;padding:0 6%}
.under-mv .info__jp + .info__lead{margin-top:0}
.under-mv .info__lead + .more{margin-top:24px}
/* 電話の番号に「tel」の前置きは付けない（文言に「電話する：」を入れたため） */
.info__tel::before{content:none}
.info__tel{margin-top:30px}
.gmap{width:fit-content;min-width:205px;padding:0 28px}
.info .more{margin-top:44px}
/* お問い合わせ・下の案内の小見出し、ご相談いただけること */
.contact-desc__title{margin-bottom:14px;font-family:var(--jp);font-weight:900;font-size:20px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.contact-desc__list li{position:relative;padding-left:1.4em;font-size:14px;line-height:2.3}
.contact-desc__list li::before{content:"";position:absolute;left:0;top:1.15em;width:.7em;height:2px;background:var(--black)}
.form--paused .contact-desc__title{margin-bottom:18px}
/* 作例を大きく見る：分類の行、電話は行を変える */
.viewer__cat{margin-top:2px;font-size:13px;letter-spacing:.08em}
.viewer__tel a{display:block;margin:8px 0 0}

@media screen and (max-width:768px){
  .under-mv .info__jp{margin:24px 0 8px;font-size:16px}
  .under-mv .info__lead{margin-top:20px;padding:0 7%;font-size:14px;line-height:2}
  .info__lead--title{font-size:17px}
  .contact-desc__title{font-size:17px}
  .info__tel{margin-top:22px}
  .info .more{margin-top:32px}
}

/* 写真なしの組み：スタッフ紹介の文字だけの行、店構え写真（お問い合わせ） */
.photoshot{width:75%;margin:0 auto 70px;padding-top:0}
.photoshot__text{font-family:var(--jp);font-weight:700;font-size:15px;line-height:1.9;letter-spacing:.03em}
.info__inner>.photoshot__img{width:min(720px,100%);margin:30px auto 0;aspect-ratio:3/2}
.info__inner>.photoshot__img img{display:block;width:100%;height:100%;object-fit:cover}
@media screen and (max-width:768px){
  .photoshot{width:85%;margin-bottom:40px}
  .photoshot__text{font-size:14px}
}