/* IMUA A2案 — A案(CARONE風)を土台に、編集誌調の余白・行リスト・等幅ラベルで磨いた版
   読み込み順: style.css → a-extra.css → a2.css（上書き）
   ルール: 角丸2px / ドット付きピル禁止 / 囲いの入れ子禁止（罫線と余白で区切る） / 差し色はティール1色 */
:root{
  --gold:#336977;--teal:#111;
  --paper:#fff;--stone:#f5f3ef;--rule:#dcd8d0;--sub:#5a5a56;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --expo:cubic-bezier(.16,1,.3,1);
}
body{background:var(--paper);color:#111}
:focus-visible{outline:3px solid var(--teal)}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.14em;text-transform:uppercase}

/* ---------- 見出し（巨大英字＋小さな等幅ラベル） ---------- */
.headline__title{font-size:64px;line-height:1}
@media(max-width:767px){.headline__title{font-size:42px}}
.headline__label{margin-top:18px;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.24em;color:var(--sub)}
.headline--light .headline__label{color:rgb(255 255 255/80%)}

/* ---------- ヒーロー ---------- */
@keyframes a2-fade{to{opacity:1}}
.site-footer .hbtn,.endcta .hbtn{min-width:176px;padding:17px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:none}
.site-footer .hbtn--white:hover{background:var(--teal);color:#fff;opacity:1}

/* ---------- 連絡ストリップ ---------- */
.strip{max-width:none}
.strip a{min-height:92px}
.strip small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em}
.strip b{font-size:21px;letter-spacing:.06em}
.strip__tel{background:#111}
.strip__tel b{font-size:30px}
.strip__line{background:#06c755}
.strip__form{border:0;background:var(--stone)}

/* ---------- 選ばれる理由（番号＋縦罫線） ---------- */

/* ---------- サービス（行リスト） ---------- */
.svc2{padding-block:120px 110px;background:var(--stone)}
.svc2__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:end;gap:40px 80px}
.svc2__lead{font-size:15px;line-height:2.1;color:var(--sub)}
.svc2__list{margin-top:72px;border-top:8px solid #111}
.svc2__row{position:relative;display:grid;grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.2fr) 180px 28px;align-items:center;gap:0 32px;padding-block:34px;border-bottom:1px solid var(--rule);transition:opacity .45s var(--expo),padding .45s var(--expo)}
.svc2__row:hover{opacity:1}
.svc2__list:hover .svc2__row:not(:hover){opacity:.38}
.svc2__no{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--teal)}
.svc2__name{font-size:clamp(22px,2.5vw,32px);font-weight:700;line-height:1.35;letter-spacing:.03em}
.svc2__desc{font-size:14px;line-height:1.9;color:var(--sub)}
.svc2__thumb{aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:#ddd}
.svc2__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.04);transition:filter .6s var(--expo),transform .9s var(--expo)}
.svc2__row:hover .svc2__thumb img{filter:none;transform:scale(1)}
.svc2__arrow{justify-self:end;width:11px;height:11px;border-top:2px solid #111;border-right:2px solid #111;transform:rotate(45deg);transition:transform .45s var(--expo),border-color .3s}
.svc2__row:hover .svc2__arrow{transform:translate(6px,0) rotate(45deg);border-color:var(--teal)}

/* ---------- コーティング・来店予約バナー ---------- */
.carebanner{padding:96px 0;background:#fff}
.carebanner__list li{border-bottom-color:var(--rule)}
.carebanner__lead{font-size:19px}
@media(max-width:1079px){.carebanner{padding:56px 0}}

/* ---------- ニュース（左見出し＋右に行リスト） ---------- */
.news2{padding-block:120px 40px}
.news2__grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 80px;align-items:start}
.news2__side{position:sticky;top:130px}
.news2__more{display:inline-flex;align-items:center;gap:12px;margin-top:40px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;border-bottom:1px solid #111;padding-bottom:6px}
.news2__more i{font-style:normal;transition:transform .4s var(--expo)}
.news2__more:hover{opacity:1;color:var(--teal);border-color:var(--teal)}
.news2__more:hover i{transform:translateX(6px)}
.news2__list{border-top:8px solid #111}
.news2__row{display:grid;grid-template-columns:116px minmax(0,1fr) 132px;align-items:center;gap:0 28px;padding-block:26px;border-bottom:1px solid var(--rule);transition:opacity .45s var(--expo)}
.news2__row:hover{opacity:1}
.news2__list:hover .news2__row:not(:hover){opacity:.4}
.news2__meta{display:grid;gap:8px}
.news2__date{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em}
.news2__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--teal)}
.news2__title{font-size:17px;font-weight:700;line-height:1.7;letter-spacing:.03em}
.news2__thumb{aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:#ddd}
.news2__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s var(--expo),transform .9s var(--expo)}
.news2__row:hover .news2__thumb img{filter:none;transform:scale(1.06)}

/* ---------- 納車報告（写真が先・罫線で区切る） ---------- */
.section{padding-block:120px}
#delivery .cards{gap:0 36px;margin-top:64px}
#delivery .card{display:flex;flex-direction:column;margin-bottom:56px}
#delivery .card:hover{opacity:1}
#delivery .card__img{order:1;height:auto;aspect-ratio:16/9;object-fit:contain;background:#e6e6e6;margin-top:0;border-radius:2px;transition:transform .9s var(--expo)}
#delivery .card:hover .card__img{transform:scale(1.02)}
.site-footer__map{line-height:0}
.site-footer__map iframe{display:block;width:100%;height:220px;border:0}
@media (max-width:767px){.site-footer__map iframe{height:180px}}
#delivery .card__meta{order:0;margin:0 0 16px;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
#delivery .card__title{order:2;min-height:0;margin-top:18px;font-size:18px;line-height:1.6}
#delivery .tag{padding:0;border:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--teal)}
.section__more{margin-top:8px}
.note{font-size:13px}
.button{width:auto;min-width:300px;padding:18px 56px 18px 32px;font-family:var(--mono);font-size:12.5px;letter-spacing:.18em}
.button:hover{background:var(--teal)}
.button-outline{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;border-width:1px;box-shadow:none}
.button-outline:hover{opacity:1;background:#111;color:#fff}

/* ---------- 代表挨拶（右端まで突き抜ける写真） ---------- */
.information{padding-block:88px 64px;background:var(--black);color:var(--white)}
.information__image{height:470px;border-radius:0}
.information__image img{filter:grayscale(.15)}
.motion .information__image.curtain>img{transition-duration:.8s,1s}
.information__body{margin-top:52px}
.information__lead{width:50%;font-size:clamp(21px,2.1vw,29px);font-weight:500;line-height:1.6;letter-spacing:.04em;text-wrap:balance}
.information__text{width:46%;font-size:14px;line-height:2;color:rgb(255 255 255/78%)}
.information__name{margin-top:30px;font-size:22px;font-weight:700;letter-spacing:.1em;color:var(--white)}
.information__name small{display:block;margin-bottom:4px;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.24em;color:rgb(255 255 255/65%)}
.information__links{margin-top:28px}

/* ---------- 動画 ---------- */
.movie{padding-block:120px 0}
.movie .headline{margin-bottom:56px}

/* ---------- 流れ（番号＋上罫線。囲いなし） ---------- */
#flow .flow{position:relative;grid-template-columns:repeat(4,1fr);gap:0 36px;margin-top:56px;padding-top:0}
#flow .flow__item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-height:0;padding:40px 22px 40px;border-radius:2px;background:#f3f3f3;text-align:center}
#flow .flow__item::before,#flow .flow__item::after,#flow .flow__item:not(:last-child)::after{display:none}
.flow__icon{display:block;width:56px;height:56px;margin-bottom:18px}
#flow .flow__item h3{margin-top:0;font-size:19px;font-weight:700;line-height:1.5}
#flow .flow__item p{margin-top:10px;font-size:14px;line-height:1.9;color:var(--sub)}
.flow__svg{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
.flow__track,.flow__line{fill:none;stroke-width:2}
.flow__track{stroke:var(--rule)}
.flow__line{stroke:var(--teal)}
.flow__arrow{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- FAQ（+が×に回転） ---------- */
.section--gray{background:var(--stone)}
.faq{display:grid;row-gap:8px;margin-top:56px}
.faq details{padding:0;background:#fff;border:0;border-radius:2px}
.faq summary{position:relative;display:grid;grid-template-columns:36px 1fr;column-gap:16px;align-items:center;padding:20px 64px 20px 20px;font-size:17px;font-weight:700;line-height:1.6;cursor:pointer;list-style:none;transition:color .3s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq details p::before{display:grid;place-content:center;width:36px;height:36px;border-radius:2px;font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:0}
.faq summary::before{content:"Q";background:var(--teal);color:#fff}
.faq details p::before{content:"A";background:rgb(0 0 0/8%);color:var(--teal)}
.faq summary:hover{color:var(--teal)}
.faq summary span{position:absolute;top:50%;right:22px;width:16px;height:16px;translate:0 -50%}
.faq summary span::before,.faq summary span::after{content:"";position:absolute;top:50%;left:0;width:16px;height:2px;margin-top:-1px;background:var(--teal);transition:rotate .3s ease}
.faq summary span::after{rotate:90deg}
.faq details[open] summary span::after{rotate:180deg}
.faq details p{box-sizing:border-box;display:grid;grid-template-columns:36px 1fr;column-gap:16px;align-items:start;overflow:hidden;padding:0 64px 24px 20px;font-size:14.5px;line-height:2;color:var(--sub)}
.faq details p{margin-top:0}
.faq details p::before{margin-top:-2px}

/* ---------- 最後の呼びかけ ---------- */
.endcta{background:#111;text-align:left}
.endcta__title{font-size:clamp(24px,3vw,38px);font-weight:500;line-height:1.55}
.endcta__text{color:#bdbdb8}
.endcta__btns{justify-content:flex-start}
.endcta__btns a{border-radius:2px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;box-shadow:none}
.endcta__tel:hover{background:var(--teal);color:#fff;opacity:1}

/* ---------- フッター（A案のまま。ボタンだけ整える） ---------- */
.footer-form__form .hbtn{background:#111;color:#fff;font-family:var(--mono)}
.footer-form__form .hbtn:hover{background:var(--teal)}

/* ---------- スクロールで現れる ---------- */
.js-r [data-r]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--expo),transform 1s var(--expo);transition-delay:var(--d,0ms)}
.js-r [data-r].is-in{opacity:1;transform:none}

/* ---------- タブレット ---------- */
@media(max-width:1079px){
  .svc2{padding-block:90px}
  .svc2__head{grid-template-columns:1fr;gap:28px}
  .svc2__row{grid-template-columns:44px minmax(0,1fr) 130px 20px;gap:0 20px}
  .svc2__desc{grid-column:2/3;grid-row:2;margin-top:10px}
  .svc2__name{grid-column:2/3}
  .svc2__thumb{grid-column:3;grid-row:1/3}
  .svc2__arrow{grid-column:4;grid-row:1/3}
  .news2{padding-block:90px 30px}
  .news2__grid{grid-template-columns:1fr;gap:44px}
  .news2__side{position:static}
  .section{padding-block:90px}
  .information{padding-block:90px 60px}
  .information__image{height:auto}
  .information__lead,.information__text{width:100%}
  .information__body{margin-top:30px}
  .movie{padding-top:90px}
  #flow .flow{grid-template-columns:1fr;gap:28px}
}

/* ---------- スマホ ---------- */
@media(max-width:767px){
  .hbtn{min-width:0;flex:1;justify-content:center;gap:14px;padding-inline:14px}
  .svc2__list{margin-top:48px}
  .svc2__row{grid-template-columns:34px minmax(0,1fr) 92px;padding-block:24px;gap:0 14px}
  .svc2__arrow{display:none}
  .svc2__thumb{grid-column:3}
  .svc2__name{font-size:19px}
  .svc2__desc{font-size:13px}
  .svc2__list:hover .svc2__row:not(:hover){opacity:1}
  .news2__row{grid-template-columns:minmax(0,1fr) 92px;gap:0 14px;padding-block:20px}
  .news2__meta{grid-column:1;grid-row:1;display:flex;gap:14px}
  .news2__title{grid-column:1;grid-row:2;margin-top:8px;font-size:15px}
  .news2__thumb{grid-column:2;grid-row:1/3}
  .news2__list:hover .news2__row:not(:hover){opacity:1}
  #delivery .cards{margin-top:44px}
  .faq{margin-top:40px}
  .faq summary{grid-template-columns:30px 1fr;column-gap:12px;padding:16px 48px 16px 16px;font-size:15px}
  .faq summary::before,.faq details p::before{width:30px;height:30px;font-size:13px}
  .faq summary span{right:16px}
  .faq details p{grid-template-columns:30px 1fr;column-gap:12px;padding:0 16px 20px 16px;font-size:14px}
  .endcta{display:none}
  .bottom-nav .f{background:var(--teal);color:#fff}
  .button{min-width:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .js-r [data-r]{opacity:1;transform:none;transition:none}
}

/* 暗い写真の上ではティールを使わない */
.site-footer__garage{color:#e6eef0}

/* ---------- ヘッダーロゴ: 透過。上部は白抜き、スクロール後は白帯にカラー ---------- */
.site-header__logo,.site-header.is-scrolled .site-header__logo{background:none;box-shadow:none;height:112px;padding:12px 28px}
.site-header__logo img{height:100%;width:auto;mix-blend-mode:normal}
.site-header__logo .logo-c,.site-header.is-scrolled .site-header__logo .logo-w{display:none}
.site-header.is-scrolled .site-header__logo .logo-c{display:block}
.site-header.is-scrolled .site-header__logo{height:84px;padding:6px 22px}
@media(max-width:1079px){.site-header__logo,.site-header.is-scrolled .site-header__logo{height:84px;padding:8px 20px}.site-header.is-scrolled .site-header__logo{height:64px;padding:5px 16px}}

/* FV = ヒーロー + 3つのCTA帯で1画面 */
@media(min-width:768px){.hero:not(.page-hero){min-height:calc(100vh - 92px);min-height:calc(100svh - 92px)}}

/* ---------- FAQ: 背景に写真（暗幕つき） ---------- */
#faq{background:linear-gradient(rgb(0 0 0/62%),rgb(0 0 0/62%)),url("../images/hero/slide-3.jpg") center/cover no-repeat}
#faq .headline{color:#fff}
#faq .headline__label{color:rgb(255 255 255/80%)}
#faq .faq details{background:rgb(255 255 255/96%)}

/* ---------- ローディング（モノクロ・初回のみ） ---------- */
.no-intro .intro{display:none}
.intro__word img{display:block;width:clamp(120px,16vw,200px);height:auto;margin:0 auto}