@charset "utf-8";
/* =========================================================
   株式会社リアルネット  中古車・建築リフォーム
   Design tokens are taken verbatim from Figma "D00_デザインシステム".
   Do not introduce font sizes or colours outside this file.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  /* 青 */
  --navy:#0d366a;          /* 主。見出し・リード・線 */
  --navy-deep:#082747;     /* 全面帯・フッター */
  /* 赤は3つに分かれる。混ぜないこと */
  --red:#f23a3c;           /* 面・罫・帯・カード上端・18.66px以上のBold */
  --red-btn:#de2a2c;       /* 白文字を載せる塗り */
  --red-text:#c4171c;      /* 白・淡色地の小さい赤文字 */
  /* 無彩 */
  --ink:#1a1a1a;
  --body:#333;
  --muted:#5c6675;
  --line:#dce0e6;
  --ghost:#e0e5ec;
  --tint:#edf1f6;          /* 淡青の地 */
  --white:#fff;
  /* 濃紺地の上 */
  --on-navy:#d1dbeb;
  --dim:#9eb2d1;

  --container:1200px;
  --hdr-h:76px;
  --gutter:120px;

  --ff-jp:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ff-en:"Lato","Noto Sans JP",sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-jp);
  font-size:13px;
  line-height:1.92;
  color:var(--body);
  background:var(--white);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- layout ---------- */
.l-wrap{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:100px}
.sec--lead{padding-block:124px 116px}   /* 主役セクション */
.sec--sub{padding-block:88px 96px}      /* 従属セクション */
.sec--tint{background:var(--tint)}
.sec--navy{background:var(--navy-deep);color:var(--on-navy)}
.sec--navy.sec--mid{background:var(--navy)}  /* 中間の紺。descendant の指定はすべて引き継ぐ */
.sec--navy h2,.sec--navy h3,.sec--navy .num{color:var(--white)}

/* 赤の細帯（セクション境） */
.rule-red{height:5px;background:var(--red)}

/* ---------- typography ---------- */
.t-52{font-size:52px;line-height:1.5;letter-spacing:-.04em;font-weight:700;color:var(--ink)}
.t-38{font-size:38px;line-height:1.45;letter-spacing:-.03em;font-weight:700;color:var(--ink)}
.t-30{font-size:30px;line-height:1.4;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
.t-26{font-size:26px;line-height:1.46;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
.t-22{font-size:22px;line-height:1.45;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
.t-lead{font-size:17px;line-height:1.7;letter-spacing:-.01em;font-weight:700;color:var(--navy)}
.t-lead-s{font-size:15px;line-height:1.73;letter-spacing:-.01em;font-weight:700;color:var(--navy)}
.t-body{font-size:13px;line-height:1.92;color:var(--body)}
.t-body-s{font-size:11.5px;line-height:1.83;color:var(--body)}
.t-note{font-size:10px;line-height:1.5;color:var(--muted)}
.t-muted{color:var(--muted)}

/* 数字は直立ライニング */
.num,.en{font-family:var(--ff-en);font-weight:900;font-variant-numeric:lining-nums tabular-nums}

/* 見出しの改行位置。
   <br> で固定せず、文節を .ln で包む。inline-block なので文節の途中では折れず、
   画面幅に入るだけ並ぶ。1440では設計どおりの位置で、狭い画面でも意味の切れ目で折り返す。 */
.ln{display:inline-block;max-width:100%}
/* 単語の途中で切らない・行頭に句読点を残さない */
h1,h2,h3,.fv__title,.page-hero__title,.band__title,.cta__title,.t-52,.t-38,.t-30,.t-26,.t-22{
  word-break:normal;overflow-wrap:anywhere;line-break:strict}

/* ---------- eyebrow（赤い短い罫＋小さいラベル） ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;line-height:1.3;
  letter-spacing:.16em;color:var(--red-text);font-weight:700;margin-bottom:26px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--red);flex:none}
.eyebrow--jp{letter-spacing:.06em;font-family:var(--ff-jp);font-weight:500}
.eyebrow--jp::before{width:22px}
.sec--navy .eyebrow{color:var(--dim)}

/* ---------- セクション見出し（英字大＋日本語小＋右に1px罫） ---------- */
.sec-head{display:flex;align-items:center;gap:0;margin-bottom:56px}
.sec-head__inner{display:flex;align-items:baseline;gap:16px;flex:none}
.sec-head__en{font-family:var(--ff-en);font-weight:900;font-size:42px;line-height:1.1;
  letter-spacing:-.01em;color:var(--ink)}
.sec-head__jp{font-size:13px;font-weight:500;color:var(--muted);line-height:1.4}
.sec-head::after{content:"";flex:1;height:1px;background:var(--line);margin-left:24px}
.sec--navy .sec-head__en,.sec-head--onnavy .sec-head__en{color:var(--white)}
.sec--navy .sec-head__jp,.sec-head--onnavy .sec-head__jp{color:var(--dim)}
.sec--navy .sec-head::after,.sec-head--onnavy::after{background:rgba(255,255,255,.22)}
.visually-hidden{position:absolute!important;font-size:13px;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:15px;line-height:1;letter-spacing:0;border-radius:0;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn__arrow{font-size:13px;font-weight:400}
.btn--primary{background:var(--red-btn);color:var(--white);min-height:58px;padding:0 28px}
.btn--primary:hover{background:#c31f21}
.btn--sm{min-height:46px;font-size:15px;padding:0 24px}
.btn--lg{min-height:62px;min-width:min(280px,100%);max-width:100%}
.btn--outline{border:1.5px solid var(--white);color:var(--white);min-height:62px;padding:12px 28px;
  flex-direction:column;gap:2px}
.btn--outline:hover{background:rgba(255,255,255,.1)}
/* 文字だけのリンク（紺＋矢印） */
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--navy)}
.link-arrow .btn__arrow{font-size:13px;font-weight:400}
.link-arrow:hover{color:var(--red-text)}
.link-arrow--sm{font-size:13px}
.link-arrow--sm .btn__arrow{font-size:11.5px}
/* 上に1px罫を持つ「詳しく見る」 */
.link-top{display:block;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.sec--navy .link-arrow{color:var(--white)}
.sec--navy .link-arrow:hover{color:var(--dim)}
.sec--navy .link-top{border-top-color:rgba(255,255,255,.24)}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);height:var(--hdr-h);
  display:flex;align-items:center;border-bottom:1px solid var(--line)}
.site-header__in{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;
  padding-inline:var(--gutter);display:flex;align-items:center;gap:0}
.site-header__logo img{width:120px;height:32px;object-fit:contain}
.hdr-rule{flex:1;height:1px;background:var(--line);margin-inline:8px;min-width:20px}
.gnav ul{display:flex;gap:26px}
.gnav a{font-size:13px;font-weight:500;color:var(--ink);line-height:1.25;white-space:nowrap;
  padding-block:4px;border-bottom:2px solid transparent}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--red)}
.hdr-tel{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none}
.hdr-tel__label{font-size:10px;color:var(--muted);line-height:1.4}
.hdr-tel__num{font-family:var(--ff-en);font-weight:900;font-size:22px;line-height:1.14;
  letter-spacing:-.02em;color:var(--navy);font-variant-numeric:lining-nums tabular-nums}
.hdr-cta{flex:none;margin-left:20px}
.hdr-toggle{display:none}

/* ---------- FV（TOP） ----------
   写真は右の画面端まで抜く。左のコピーは1200コンテナの左端に揃える。 */
.fv{display:grid;grid-template-columns:minmax(0,588px) minmax(0,852px);column-gap:24px;
  align-items:start;padding-block:150px 55px;
  padding-left:max(var(--gutter),calc((100% - var(--container))/2));padding-right:0;
  max-width:1920px;margin-inline:auto}   /* 超ワイドで写真が伸び続けないよう上限 */
.fv__title{font-size:52px;font-weight:700;line-height:1.5;letter-spacing:-.04em;color:var(--ink);margin-bottom:26px}
.fv__text{font-size:13px;line-height:2.08;color:var(--body);max-width:486px;margin-bottom:32px}
.fv__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fv__media{margin-top:-54px}
.fv__media img{width:100%;aspect-ratio:708/560;object-fit:cover}
.fv__caption{font-size:10px;color:var(--muted);margin-top:14px}

/* ---------- 事実バー ---------- */
.factbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.factlist dt{font-size:10px;font-weight:500;color:var(--muted);line-height:1.9}
.factlist dd{font-size:13px;font-weight:500;color:var(--ink);line-height:1.46}
.factlist .row{display:grid;grid-template-columns:170px 1fr;gap:20px;
  padding-block:16px;border-bottom:1px solid var(--line)}
.factlist .row:first-child{border-top:1px solid var(--line)}

/* ---------- サービス（大1＋小3） ---------- */
.svc-main{display:grid;grid-template-columns:minmax(0,792fr) minmax(0,384fr);gap:24px;align-items:end;margin-bottom:56px}
.svc-main__media img{width:100%;aspect-ratio:792/446;object-fit:cover}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-item__media img{width:100%;aspect-ratio:6/5;object-fit:cover}
.svc-item__head{display:flex;align-items:baseline;gap:14px;margin-top:22px}
.svc-item__no{font-family:var(--ff-en);font-weight:900;font-size:11.5px;letter-spacing:.06em;color:var(--red-text)}
.svc-item__title{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.45;color:var(--ink)}
.svc-item__lead{font-size:15px;font-weight:700;line-height:1.73;letter-spacing:-.01em;color:var(--navy);margin-top:12px}
.svc-item__text{font-size:11.5px;line-height:1.83;color:var(--body);margin-top:10px}
/* 大きい方 */
.svc-main__no{font-size:15px;letter-spacing:.06em}
.svc-main__title{font-size:30px;line-height:1.4}
.svc-main__lead{font-size:17px;line-height:1.7;margin-top:16px}
.svc-main__text{font-size:13px;line-height:1.92;margin-top:12px}

/* ---------- 在庫カード（赤3pxの上端） ---------- */
.stock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stock-grid--3{grid-template-columns:repeat(3,1fr)}
.stock-card{background:var(--white);border-top:3px solid var(--red);
  display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
a.stock-card:hover{box-shadow:0 10px 28px rgba(8,39,71,.12);transform:translateY(-2px)}
.stock-card__media img{width:100%;aspect-ratio:6/5;object-fit:cover}
.stock-card__body{padding:18px;display:flex;flex-direction:column;gap:7px;flex:1}
.stock-card__name{font-size:13px;font-weight:700;line-height:1.55;color:var(--ink)}
.stock-card__grade{font-size:11.5px;color:var(--muted);line-height:1.55}
.stock-card__meta{font-size:10px;color:var(--muted);line-height:1.6}
.stock-card__price{display:flex;align-items:baseline;gap:5px;margin-block:3px}
.stock-card__price .label{font-size:10px;font-weight:500;color:var(--muted)}
.stock-card__price .value{font-family:var(--ff-en);font-weight:900;font-size:38px;line-height:1.05;
  color:var(--red);letter-spacing:-.03em}
.stock-card__price .unit{font-size:11.5px;font-weight:700;color:var(--red-text)}
.stock-card__spec{display:flex;gap:0;font-size:10px;color:var(--body);line-height:1.5}
.stock-card__spec span{flex:1}
.stock-card__tags{margin-top:auto;padding-top:6px}
/* 一覧ページの大きいカード（384x320の写真） */
.stock-card--lg .stock-card__body{padding:20px;gap:8px}
.stock-card--lg .stock-card__name{font-size:15px}
.stock-card--lg .stock-card__price .unit{font-size:13px}
.stock-card--lg .stock-card__spec{display:block;font-size:11.5px;line-height:1.65}

/* ---------- 絞り込み ---------- */
.filter{display:grid;grid-template-columns:repeat(5,1fr) 180px;gap:24px;align-items:end}
.filter__field label{display:block;font-size:10px;font-weight:500;color:var(--muted);margin-bottom:8px}
.filter select{height:52px;padding-block:0}
.filter .btn{height:52px;min-height:0;width:100%}

/* ---------- 一覧のツールバー ---------- */
.listbar{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.listbar__count{display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:500;color:var(--body)}
.listbar__count b{font-family:var(--ff-en);font-weight:900;font-size:26px;color:var(--ink);letter-spacing:-.02em}
.listbar__sort{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--muted)}
.listbar__sort dt{font-size:10px;font-weight:500;color:var(--muted)}
.listbar__sort a[aria-current]{font-weight:700;color:var(--navy)}
.listbar__sort a:hover{color:var(--navy)}

/* ---------- ページャ ---------- */
.pager{display:flex;justify-content:center;gap:8px;margin-top:48px}
.pager a,.pager span{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  font-size:13px;color:var(--navy);border:1px solid var(--line)}
.pager [aria-current]{background:var(--navy);color:var(--white);border-color:var(--navy);font-weight:700}
.pager a:hover{background:var(--tint)}

/* ---------- 空状態 ---------- */
.empty{background:var(--white);padding:56px 56px 60px;text-align:center}
.empty__text{font-size:13px;line-height:2;color:var(--body);max-width:760px;margin:20px auto 30px}
.empty__actions{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.stock-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:10px;line-height:1;padding:5px 8px;background:var(--tint);color:var(--muted)}
.tag--navy{background:var(--navy);color:var(--white)}

/* ---------- 買取実績（箱なし） ---------- */
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}
.result-item__media img{width:100%;aspect-ratio:6/5;object-fit:cover}
.result-item__name{font-size:15px;font-weight:700;line-height:1.5;color:var(--ink);margin-top:16px}
.result-item__meta{font-size:10px;color:var(--muted);line-height:1.7;margin-top:6px}
.result-item__price{display:flex;align-items:baseline;gap:6px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.result-item__price .label{font-size:10px;color:var(--muted)}
.result-item__price .value{font-family:var(--ff-en);font-weight:900;font-size:30px;line-height:1;
  color:var(--red-text);letter-spacing:-.02em}
.result-item__price .unit{font-size:13px;font-weight:700;color:var(--red-text)}
/* 濃紺地の上に置くとき */
.sec--navy .result-item__name{color:var(--white)}
.sec--navy .result-item__meta{color:var(--dim)}
.sec--navy .result-item__price{border-top-color:rgba(255,255,255,.24)}
.sec--navy .result-item__price .label{color:var(--dim)}
.sec--navy .result-item__price .value,
.sec--navy .result-item__price .unit{color:var(--white)}

/* ---------- 定義リスト（上下1px罫） ---------- */
.deflist{border-top:1px solid var(--line)}
.deflist .row{display:grid;grid-template-columns:240px 1fr;gap:24px;
  padding-block:20px;border-bottom:1px solid var(--line)}
.deflist dt{font-size:13px;font-weight:700;color:var(--ink);line-height:1.85}
.deflist dd{font-size:13px;line-height:1.92;color:var(--body)}
.sec--navy .deflist{border-top-color:rgba(255,255,255,.24)}
.sec--navy .deflist .row{border-bottom-color:rgba(255,255,255,.24)}
.sec--navy .deflist dt{color:var(--white)}
.sec--navy .deflist dd{color:var(--on-navy)}

/* ---------- STEP（番号は26px Lato Black の赤） ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.flow--5{grid-template-columns:repeat(5,1fr)}
.flow--3{grid-template-columns:repeat(3,1fr)}
.flow__item{border-top:1px solid var(--line);padding-top:16px;position:relative}
.flow__no{font-family:var(--ff-en);font-weight:900;font-size:26px;line-height:1;
  color:var(--red);letter-spacing:-.02em;display:block;margin-bottom:12px}
.flow__title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.6}
.flow__text{font-size:11.5px;line-height:1.83;color:var(--body);margin-top:8px}
.flow__item::after{content:"→";position:absolute;top:-9px;right:-16px;font-size:11.5px;color:var(--ghost)}
.flow__item:last-child::after{display:none}

/* ---------- 罫線の行リスト（カードにしない） ---------- */
.rowlist{border-top:1px solid var(--line)}
.rowlist > li{border-bottom:1px solid var(--line);padding-block:18px;
  display:flex;gap:16px;align-items:flex-start}
.rowlist > li::before{content:"";width:6px;height:6px;background:var(--red);flex:none;margin-top:9px}
.rowlist--2{columns:2;column-gap:64px}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding-block:14px;
  border-bottom:1px solid var(--line);font-size:13px;line-height:1.8}
.checklist li::before{content:"";width:3px;align-self:stretch;background:var(--red);flex:none}

/* ---------- 仕入れルート（矢印でつなぐ4段） ---------- */
.route{display:flex;align-items:center;gap:24px}
.route__item{flex:1;border-top:1px solid var(--line);padding-top:14px}
.route__no{font-size:10px;font-weight:500;color:var(--muted)}
.route__name{font-size:17px;font-weight:700;color:var(--ink);line-height:1.5;margin-top:4px}
.route__arrow{font-size:15px;color:var(--muted);flex:none}

/* 小さい版（6段の工程チェーン） */
.route--sm{gap:16px}
.route--sm .route__item{border-top:0;padding-top:0}
.route--sm .route__no{font-family:var(--ff-en);font-weight:700;font-size:11.5px;color:var(--muted)}
.route--sm .route__name{font-size:15px;margin-top:2px}
.route--sm .route__arrow{font-size:13px}

/* ---------- 拠点（写真＋地図） ---------- */
.loc__name{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:16px}
.loc__media{display:grid;grid-template-columns:390fr 196fr;gap:2px}
.loc__media img{width:100%;height:232px;object-fit:cover}
/* 地図。正式な埋め込みコードが来たら iframe に置き換える（company.js のコメント参照） */
.loc__map{display:flex;flex-direction:column;justify-content:center;gap:6px;
  background:var(--ghost);min-height:232px;padding:20px;transition:background-color .15s ease}
.loc__map:hover{background:#d5dce6}
.loc__map-label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:500;color:var(--navy)}
.loc__map-label::before{content:"";width:16px;height:2px;background:var(--navy)}
.loc__map-name{font-size:11.5px;line-height:1.6;color:var(--navy)}
.loc__map-name span{margin-left:4px}
.loc__addr{font-size:13px;color:var(--body);line-height:1.85;margin-top:18px}
.loc__tel{font-size:17px;font-weight:700;color:var(--navy);line-height:1.5;margin-top:8px;display:block}
.loc__tel .n{font-family:var(--ff-en);font-weight:900;letter-spacing:-.02em}
.loc__role{font-size:11.5px;color:var(--muted);margin-top:8px}
.loc__meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:10px;color:var(--muted);margin-top:14px}

/* ---------- 白い囲み（加盟ネットワーク等） ---------- */
.panel{background:var(--white);padding:28px 28px 30px}
.panel__label{font-size:10px;font-weight:500;color:var(--muted)}
.panel__title{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:6px}
.panel__text{font-size:11.5px;line-height:1.75;color:var(--body);margin-top:10px}

/* ---------- 規定の条文ブロック（キャンセル等） ---------- */
.terms > li{padding-block:0 28px}
.terms h3{font-size:13px;font-weight:700;color:var(--ink);line-height:1.7;margin-bottom:6px}
.terms p{font-size:11.5px;line-height:1.83;color:var(--body)}
.terms ul{margin-top:10px}
.terms ul li{display:flex;gap:10px;align-items:flex-start;font-size:11.5px;line-height:1.65;
  color:var(--body);padding-block:3px}
.terms ul li::before{content:"";width:4px;height:4px;background:var(--navy);flex:none;margin-top:7px}

/* ---------- 買取 / 下取り の対比 ---------- */
.compare__head{display:flex;align-items:baseline;gap:12px}
.compare__jp{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.compare__en{font-family:var(--ff-en);font-weight:700;font-size:11.5px;color:var(--muted);letter-spacing:.04em}

/* ---------- 点付きリスト（紺の小さい四角） ---------- */
.dotlist > li{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.62;
  color:var(--body);padding-block:12px;border-bottom:1px solid var(--line)}
.dotlist > li::before{content:"";width:6px;height:6px;background:var(--navy);flex:none;margin-top:8px}
.dotlist > li:first-child{border-top:1px solid var(--line)}

/* ---------- 小見出し＋一行の説明（よくお問い合わせいただくこと） ---------- */
.qalist > li{padding-block:0 26px}
.qalist h3{font-size:13px;font-weight:700;color:var(--ink);line-height:1.7}
.qalist p{font-size:11.5px;line-height:1.83;color:var(--body);margin-top:2px}

/* ---------- 番号つきの横並び解説（01/02/03） ---------- */
.support > li{display:grid;grid-template-columns:60px 300px 1fr;gap:32px;align-items:start;
  padding-block:24px;border-bottom:1px solid var(--line)}
.support > li:first-child{border-top:1px solid var(--line)}
.support__no{font-family:var(--ff-en);font-weight:900;font-size:26px;line-height:1.15;
  color:var(--red);letter-spacing:-.02em}
.support__title{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.45}
.support__text{font-size:13px;line-height:1.92;color:var(--body)}

/* ---------- 支払例（濃紺） ---------- */
.example{display:grid;grid-template-columns:minmax(0,744fr) minmax(0,432fr);gap:24px;align-items:start}
.example__rows .row{display:grid;grid-template-columns:150px 1fr;gap:24px;padding-block:20px;
  border-bottom:1px solid rgba(255,255,255,.2)}
.example__rows .row:first-child{border-top:1px solid rgba(255,255,255,.2)}
.example__rows dt{font-size:11.5px;font-weight:500;color:var(--dim)}
.example__rows .v{font-size:17px;font-weight:700;color:var(--white);line-height:1.5}
.example__rows .s{font-size:11.5px;color:var(--dim);line-height:1.65;margin-top:2px}
.example__total{border-left:1px solid rgba(255,255,255,.2);padding-left:32px}
.example__total .label{font-size:11.5px;font-weight:500;color:var(--dim)}
.example__total .n{display:flex;align-items:baseline;gap:6px;margin-top:8px}
.example__total .n b{font-family:var(--ff-en);font-weight:900;font-size:42px;line-height:1.1;
  color:var(--white);letter-spacing:-.02em}
.example__total .n span{font-size:17px;font-weight:700;color:var(--white)}

/* ---------- パンくず ---------- */
.crumb{border-bottom:1px solid var(--line);background:var(--white)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-block:14px;
  font-size:10px;color:var(--muted)}
.crumb a:hover{color:var(--navy)}
.crumb li[aria-current]{color:var(--ink)}

/* ---------- 下層ページのFV ---------- */
.page-hero{padding-block:72px 76px}
.page-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.page-hero__title{font-size:38px;font-weight:700;line-height:1.45;letter-spacing:-.03em;
  color:var(--ink);margin-bottom:22px}
.page-hero__text{font-size:13px;line-height:2.08;color:var(--body);max-width:520px;margin-bottom:30px}
.page-hero__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.page-hero__media img{width:100%;aspect-ratio:588/420;object-fit:cover}
.page-hero__note{font-size:10px;color:var(--muted);margin-top:14px}
/* 電話の横並び */
.tel-inline{display:flex;flex-direction:column;gap:2px}
.tel-inline__num{font-family:var(--ff-en);font-weight:900;font-size:26px;line-height:1.15;
  letter-spacing:-.02em;color:var(--navy);font-variant-numeric:lining-nums tabular-nums}
.tel-inline__sub{font-size:10px;color:var(--muted)}

/* ---------- 全面写真の帯 ---------- */
.band{position:relative;isolation:isolate;color:var(--white);display:flex;align-items:center;
  min-height:520px;padding-block:80px}
.band__bg{position:absolute;inset:0;z-index:-2}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,39,71,.92) 0%,rgba(8,39,71,.82) 46%,rgba(8,39,71,.42) 100%)}
.band__title{font-size:38px;font-weight:700;line-height:1.45;letter-spacing:-.03em;color:var(--white);margin-bottom:20px}
.band__text{font-size:13px;line-height:2.08;color:var(--on-navy);max-width:520px;margin-bottom:30px}
.band__inner{max-width:620px}

/* ---------- CTA帯 ---------- */
.cta{background:var(--navy);color:var(--white);text-align:center;padding-block:104px}
.cta__label{font-family:var(--ff-en);font-size:10px;font-weight:700;letter-spacing:.16em;
  color:var(--dim);margin-bottom:20px}
.cta__title{font-size:30px;font-weight:700;line-height:1.5;letter-spacing:-.02em;color:var(--white)}
.cta__text{font-size:13px;line-height:1.7;color:var(--on-navy);margin-top:14px}
.cta__actions{display:flex;justify-content:center;align-items:stretch;gap:20px;margin-top:34px;flex-wrap:wrap}
.cta__tel{font-family:var(--ff-en);font-weight:900;font-size:26px;line-height:1.15;letter-spacing:-.02em;
  color:var(--white);font-variant-numeric:lining-nums tabular-nums}
.cta__tel-sub{font-size:10px;color:var(--dim);font-family:var(--ff-jp);font-weight:400;letter-spacing:0}

/* ---------- フッター ---------- */
.site-footer{background:var(--navy-deep);color:var(--on-navy);padding:64px var(--gutter) 40px}
.site-footer__in{max-width:var(--container);margin-inline:auto}
.footer-top{display:grid;
  grid-template-columns:minmax(0,520fr) minmax(40px,80fr) repeat(3,minmax(0,200fr));
  gap:0;align-items:start}
.footer-rule{height:1px;background:rgba(255,255,255,.2);margin-top:8px;margin-inline:0 40px}
.footer-brand img{width:112px;height:30px;object-fit:contain;margin-bottom:18px}
.footer-brand p{font-size:11.5px;line-height:1.83;color:var(--on-navy)}
.footer-nav h3{font-family:var(--ff-en);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--dim);margin-bottom:14px}
.footer-nav h3.jp{font-family:var(--ff-jp);font-weight:500;letter-spacing:.06em}
.footer-nav li + li{margin-top:10px}
.footer-nav a{font-size:11.5px;line-height:1.57;color:var(--on-navy)}
.footer-nav a:hover{color:var(--white);text-decoration:underline}
.footer-group img{width:55px;height:16px;object-fit:contain;margin-bottom:10px}
.footer-group p{font-size:11.5px;color:var(--on-navy)}
.footer-group a{font-family:var(--ff-en);font-size:10px;color:var(--dim)}
.footer-group a:hover{color:var(--white)}
.footer-bottom{display:flex;align-items:center;gap:24px;margin-top:40px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.2);font-size:10px;color:var(--dim)}
.footer-bottom__spacer{flex:1;height:1px;background:rgba(255,255,255,.2)}
.footer-bottom a:hover{color:var(--white)}

/* ---------- SP固定CTA ---------- */
.sp-cta{display:none}

/* ---------- フォーム ---------- */
.form-row{display:grid;grid-template-columns:240px 1fr;gap:24px;padding-block:22px;
  border-bottom:1px solid var(--line);align-items:start}
.form-row:first-of-type{border-top:1px solid var(--line)}
.form-row > .label{font-size:13px;font-weight:700;color:var(--ink);padding-top:12px;
  display:flex;align-items:center;gap:10px}
.req{font-size:10px;font-weight:700;color:var(--white);background:var(--red-btn);padding:3px 7px;line-height:1}
.opt{font-size:10px;font-weight:500;color:var(--muted);border:1px solid var(--line);padding:3px 7px;line-height:1}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;font-family:var(--ff-jp);font-size:13px;line-height:1.7;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:0;padding:13px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 1px var(--navy)}
textarea{min-height:160px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.field-note{font-size:10px;color:var(--muted);margin-top:8px}
.choice{display:flex;flex-wrap:wrap;gap:10px 24px}
.choice label{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.form-submit{text-align:center;margin-top:44px}
.consent{text-align:center;font-size:11.5px;color:var(--body);margin-bottom:22px}
.consent a{color:var(--navy);text-decoration:underline}

/* ---------- お問い合わせフォーム（ラベル上・入力下） ---------- */
.contact{display:grid;grid-template-columns:minmax(0,282fr) minmax(0,894fr);gap:24px;align-items:start}
.guide{background:var(--tint);padding:26px 24px 28px}
.guide h2{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:16px}
.guide dt{font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.65}
.guide dd{font-size:11.5px;line-height:1.75;color:var(--body);margin-top:2px}
.guide dd + dt{margin-top:16px}
.field{margin-bottom:22px}
.field__label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;
  color:var(--ink);margin-bottom:10px}
.field input,.field select,.field textarea{padding:15px 16px}
.field textarea{min-height:120px}
.consent-row{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink);margin-block:32px 24px}
.consent-row input{width:18px;height:18px;accent-color:var(--navy);flex:none}
.consent-row a{color:var(--navy);text-decoration:underline}

/* ご用件の選択（ラジオのカード） */
.purpose{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.purpose label{display:block;background:var(--white);padding:22px 20px 24px;cursor:pointer;
  border:1px solid transparent;transition:border-color .15s ease}
.purpose label:hover{border-color:var(--line)}
.purpose input{position:absolute;opacity:0;width:0;height:0}
.purpose .t{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink)}
.purpose .t::before{content:"";width:12px;height:12px;background:var(--ghost);flex:none}
.purpose input:checked + .t::before{background:var(--navy)}
.purpose input:focus-visible + .t{outline:2px solid var(--red);outline-offset:4px}
.purpose .s{font-size:11.5px;color:var(--muted);margin-top:6px;display:block}

/* フォーム以外の連絡先 */
.telbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.telbar__big{font-family:var(--ff-en);font-weight:900;font-size:38px;line-height:1.1;
  letter-spacing:-.03em;color:var(--navy);font-variant-numeric:lining-nums tabular-nums;display:block}

/* ---------- FAQ カテゴリ ---------- */
.faq-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.faq-tabs a{display:inline-flex;align-items:center;height:46px;padding:0 22px;
  font-size:13px;color:var(--body);border:1px solid var(--line);background:var(--white)}
.faq-tabs a[aria-current]{background:var(--navy);color:var(--white);border-color:var(--navy);font-weight:700}
.faq-tabs a:hover{border-color:var(--navy)}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item__q{display:flex;gap:16px;align-items:flex-start;width:100%;text-align:left;
  padding-block:22px;font-size:15px;font-weight:700;color:var(--ink);line-height:1.7}
.faq-item__q::before{content:"Q";font-family:var(--ff-en);font-weight:900;font-size:17px;
  color:var(--red-text);line-height:1.5;flex:none}
.faq-item__q .mark{margin-left:auto;flex:none;width:14px;height:14px;position:relative;margin-top:7px}
.faq-item__q .mark::before,.faq-item__q .mark::after{content:"";position:absolute;background:var(--navy);
  transition:transform .2s ease}
.faq-item__q .mark::before{inset:6px 0 auto;height:2px}
.faq-item__q .mark::after{inset:0 6px auto;width:2px;height:14px}
.faq-item__q[aria-expanded="true"] .mark::after{transform:scaleY(0)}
.faq-item__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-item__a > div{overflow:hidden}
.faq-item__a[data-open="true"]{grid-template-rows:1fr}
.faq-item__a p{display:flex;gap:16px;font-size:13px;line-height:1.92;color:var(--body);padding-bottom:24px}
.faq-item__a p::before{content:"A";font-family:var(--ff-en);font-weight:900;font-size:17px;
  color:var(--navy);line-height:1.5;flex:none}

/* ---------- 条文（プライバシーポリシー） ---------- */
.legal{max-width:900px}
.legal > section{padding-top:44px;margin-top:44px;border-top:1px solid var(--line)}
.legal > section:first-of-type{padding-top:0;margin-top:0;border-top:0}
.legal__no{font-size:10px;font-weight:500;color:var(--muted);letter-spacing:.06em;display:block}
.legal h2{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  line-height:1.45;margin:6px 0 18px}
.legal p{font-size:13px;line-height:2;color:var(--body);margin-bottom:16px}
.legal p:last-child{margin-bottom:0}
.legal ol{counter-reset:li;margin:0 0 16px}
.legal ol > li{counter-increment:li;font-size:13px;line-height:1.92;color:var(--body);
  padding:0 0 10px 42px;position:relative}
.legal ol > li::before{content:"(" counter(li) ")";position:absolute;left:0;top:0;color:var(--muted);
  font-family:var(--ff-en);font-weight:700;font-size:11.5px;line-height:2.1}
.legal ul{margin:0 0 16px}
.legal ul > li{font-size:13px;line-height:1.92;color:var(--body);padding:0 0 10px 22px;position:relative}
.legal ul > li::before{content:"・";position:absolute;left:0;color:var(--muted);font-size:11.5px}
.legal dl.sub{margin:0 0 16px}
.legal dl.sub dt{font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.7;margin-top:14px}
.legal dl.sub dt:first-child{margin-top:0}
.legal dl.sub dd{font-size:13px;line-height:1.92;color:var(--body)}
.legal__date{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.legal__date p{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.legal__sign{font-size:13px;font-weight:700;color:var(--ink);margin-top:14px}

/* 目次 */
.toc{background:var(--tint);padding:28px 32px 30px;margin-bottom:56px;max-width:900px}
.toc h2{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:16px}
.toc ol{counter-reset:t;columns:2;column-gap:40px}
.toc li{counter-increment:t;display:flex;gap:12px;align-items:baseline;padding-block:5px;
  break-inside:avoid;font-size:11.5px;line-height:1.6}
.toc li::before{content:counter(t);font-family:var(--ff-en);font-weight:700;font-size:10px;
  color:var(--red-text);flex:none;min-width:14px}
.toc a:hover{color:var(--navy);text-decoration:underline}

/* ---------- あわせてご覧ください ---------- */
.linkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.linkgrid a{display:block;border-top:1px solid var(--line);padding-top:16px}
.linkgrid .t{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:17px;font-weight:700;color:var(--ink);line-height:1.5}
.linkgrid .t span{font-size:13px;font-weight:400;color:var(--muted)}
.linkgrid .u{font-family:var(--ff-en);font-size:10px;color:var(--muted);margin-top:4px;display:block}
.linkgrid a:hover .t{color:var(--navy)}

/* ---------- ギャラリー（在庫車詳細） ---------- */
.gallery__main img{width:100%;aspect-ratio:6/5;object-fit:cover;background:#f2f4f7}
.gallery__thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:9px}
.gallery__thumbs button{border:1px solid var(--line);padding:0;display:block;line-height:0}
.gallery__thumbs button[aria-current="true"]{border-color:var(--red);border-width:2px}
.gallery__thumbs img{width:100%;aspect-ratio:119/79;object-fit:cover}
.spec-table th,.spec-table td{border-bottom:1px solid var(--line);padding:14px 0;
  font-size:13px;line-height:1.7;text-align:left;vertical-align:top}
.spec-table th{font-weight:700;color:var(--ink);width:38%}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:1px solid var(--line)}
/* 在庫車詳細の価格カラム */
.detail{display:grid;grid-template-columns:minmax(0,744fr) minmax(0,432fr);gap:24px;align-items:start}
.detail__no{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:500;color:var(--muted)}
.detail__no::before{content:"";width:22px;height:2px;background:var(--red)}
.detail__name{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.42;color:var(--ink);margin-top:14px}
.detail__grade{font-size:17px;color:var(--muted);margin-top:4px}
.price-col__label{font-size:10px;font-weight:500;color:var(--muted)}
.price-col__total{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.price-col__total .value{font-family:var(--ff-en);font-weight:900;font-size:52px;line-height:1.04;
  color:var(--red);letter-spacing:-.04em}
.price-col__total .unit{font-size:17px;font-weight:700;color:var(--red-text)}
.price-col__note{font-size:11.5px;line-height:1.65;color:var(--body);margin-top:12px}
.price-col__rows{margin-top:18px;border-top:1px solid var(--line)}
.price-col__rows .row{display:flex;justify-content:space-between;align-items:baseline;
  padding-block:13px;border-bottom:1px solid var(--line)}
.price-col__rows .row dt{font-size:11.5px;color:var(--muted)}
.price-col__rows .row dd{font-size:13px;font-weight:500;color:var(--ink)}
.price-col .btn{width:100%;margin-top:24px}
.price-col .btn--ghostline{border:1px solid var(--line);color:var(--navy);min-height:52px;margin-top:12px}
.price-col .btn--ghostline:hover{background:var(--tint)}
.price-col__caution{font-size:10px;line-height:1.7;color:var(--muted);margin-top:14px}
.price-col__tel{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

/* 店舗コメント（左に赤い縦罫） */
.comment{display:flex;gap:22px}
.comment::before{content:"";width:3px;background:var(--red);flex:none}
.comment p{font-size:15px;line-height:2.13;color:var(--body)}
.comment p + p{margin-top:20px}
.equip{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.equip li{font-size:11.5px;color:var(--body);padding-block:12px;border-bottom:1px solid var(--line)}
.equip li:nth-child(-n+2){border-top:1px solid var(--line)}

.price-box{background:var(--tint);padding:28px 30px}
.price-box .row{display:flex;justify-content:space-between;align-items:baseline;
  padding-block:12px;border-bottom:1px solid var(--line)}
.price-box .row:last-of-type{border-bottom:0}
.price-box .total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:2px solid var(--navy);margin-top:6px;padding-top:16px}
.price-box .total .value{font-family:var(--ff-en);font-weight:900;font-size:38px;line-height:1;
  color:var(--red-text);letter-spacing:-.03em}

/* ---------- 買取実績（TOPの行型：サムネ＋4カラム） ---------- */
.result-rows{width:100%}
.result-rows__head,.result-row{display:grid;
  grid-template-columns:clamp(104px,12vw,150px) minmax(0,486fr) minmax(0,120fr) minmax(0,138fr) minmax(0,186fr);
  gap:clamp(12px,1.7vw,24px);align-items:center}
.result-rows__head{padding-bottom:13px;font-size:10px;font-weight:500;color:var(--on-navy)}
.result-row{padding-block:18px;border-top:1px solid rgba(255,255,255,.2)}
.result-row:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.result-row img{width:100%;aspect-ratio:150/125;object-fit:cover}
.result-row__name{font-size:13px;font-weight:700;color:var(--white);line-height:1.5}
.result-row__val{font-size:13px;color:var(--on-navy)}
.result-row__price{display:flex;align-items:baseline;gap:4px}
.result-row__price .value{font-family:var(--ff-en);font-weight:900;font-size:26px;line-height:1;
  color:var(--red);letter-spacing:-.02em}
.result-row__price .unit{font-size:11.5px;font-weight:700;color:var(--white)}

/* ---------- 「こんな状態でも」の淡赤パネル ---------- */
.panel-red{background:#fcf1f1;padding:40px 34px}
.panel-red__label{font-size:11.5px;font-weight:500;color:var(--red-text);margin-bottom:24px}
.hitlist > li{display:flex;gap:16px;align-items:flex-start;padding-block:0 30px}
.hitlist > li:last-child{padding-bottom:0}
.hitlist > li::before{content:"";width:8px;height:8px;background:var(--red);flex:none;margin-top:8px}
.hitlist__t{font-size:15px;font-weight:700;color:var(--ink);line-height:1.55}
.hitlist__s{font-size:11.5px;color:var(--muted);line-height:1.65;margin-top:6px}
.btn--navy{background:var(--navy);color:var(--white);min-height:58px;padding:0 28px}
.btn--navy:hover{background:#0a2a55}
/* 二次導線。赤のCTAとは競合させず、淡青の地から浮く程度に出す */
.btn--outline-navy{border:1.5px solid var(--navy);color:var(--navy);background:var(--white);
  min-height:58px;padding:0 36px}
.btn--outline-navy:hover{background:var(--navy);color:var(--white)}

/* ---------- 事業案内タイル ---------- */
.biz-item__media img{width:100%;aspect-ratio:6/5;object-fit:cover}
.biz-item__en{font-family:var(--ff-en);font-weight:900;font-size:22px;line-height:1.2;
  color:var(--ink);margin-top:20px;letter-spacing:-.01em}
/* 外部サイトへ出るタイルだけ、リンクの頭にロゴを置いて行き先を示す */
.biz-item__ext img{width:51px;height:15px;object-fit:contain;flex:none}
.biz-item__jp{font-size:15px;font-weight:700;color:var(--ink);line-height:1.6;margin-top:4px}
.biz-item__text{font-size:11.5px;line-height:1.83;color:var(--body);margin-top:10px}

/* ---------- 拠点 ---------- */
.office{display:grid;grid-template-columns:minmax(0,744fr) minmax(0,432fr);gap:24px;align-items:center}
.office__media img{width:100%;aspect-ratio:744/330;object-fit:cover}
.office__name{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.office__name::before{content:"";width:3px;height:20px;background:var(--red);flex:none}
.office__addr{font-size:13px;color:var(--body);margin-top:14px;line-height:1.7}
.office__tel{font-family:var(--ff-en);font-weight:900;font-size:22px;line-height:1.2;
  letter-spacing:-.02em;color:var(--navy);margin-top:10px;display:block;
  font-variant-numeric:lining-nums tabular-nums}
.office__role{font-size:11.5px;color:var(--muted);margin-top:8px}
.office__meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:10px;color:var(--muted);margin-top:14px}
.office-sub{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:24px;align-items:center;margin-top:36px;
  padding-top:29px;border-top:1px solid var(--line)}
.office-sub__media img{width:240px;height:150px;object-fit:cover}
.office-sub__badge{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:500;
  color:var(--red-text);margin-bottom:8px}
.office-sub__badge::before{content:"";width:22px;height:2px;background:var(--red)}
.office-sub__name{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.office-sub__text{font-size:13px;line-height:1.92;color:var(--body);margin-top:10px}

/* ---------- 汎用 ---------- */
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-40{margin-bottom:40px}
.center{text-align:center}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-2-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* 左カラムを固定幅にする割り。インラインstyleで書くとSPで上書きできないので必ずこれを使う */
.g-180,.deflist .row.g-180{grid-template-columns:180px 1fr;gap:32px}
.g-282{grid-template-columns:minmax(0,282fr) minmax(0,894fr)}
.g-486{grid-template-columns:minmax(0,486fr) minmax(0,690fr)}
.g-588{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g-744{grid-template-columns:minmax(0,744fr) minmax(0,432fr)}
.items-start{align-items:start}
.media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.media-split--rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.media-split img{width:100%;aspect-ratio:588/420;object-fit:cover}
.note-box{background:var(--tint);padding:24px 28px;font-size:11.5px;line-height:1.9;color:var(--body)}
.sec--navy .note-box{background:rgba(255,255,255,.07);color:var(--on-navy)}
.disclaimer{font-size:10px;line-height:1.8;color:var(--muted);margin-top:24px}
.sec--navy .disclaimer{color:var(--dim)}

/* =========================================================
   タブレット
   ========================================================= */
/* =========================================================
   ノートPC（1281〜1440は設計どおり。〜1280で余白と見出しを1段落とす）
   ※ 列の比率は fr で組んであるので、ここでは幅の指定を足さない
   ========================================================= */
@media (max-width:1280px){
  :root{--gutter:72px}
  .sec{padding-block:80px}
  .sec--lead{padding-block:96px 88px}
  .sec--sub{padding-block:72px 76px}
  .fv{padding-block:112px 48px}
  .fv__title,.t-52{font-size:42px;line-height:1.5}
  .t-38,.page-hero__title,.band__title{font-size:30px}
  .cta__title,.t-30{font-size:26px}
  .sec-head{margin-bottom:44px}
  .support > li{grid-template-columns:48px 240px 1fr;gap:24px}
  .deflist .row,.form-row{grid-template-columns:200px 1fr;gap:20px}
  .contact{gap:20px}
  .band{min-height:0;padding-block:72px}
}

/* =========================================================
   ヘッダーの折りたたみ（横並びのメニューが入らなくなる幅から）
   ※ ここを 1024px にすると 1025〜1140 でメニューが消えたまま出てこないので 1120px。
   ========================================================= */
@media (max-width:1120px){
  .hdr-rule{display:none}
  .hdr-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:44px;height:44px;align-items:center}
  .hdr-toggle span{display:block;width:22px;height:2px;background:var(--ink);
    transition:transform .2s ease,opacity .2s ease}
  .hdr-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hdr-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hdr-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hdr-cta{margin-left:20px}
  .gnav{display:block;position:fixed;inset:var(--hdr-h) 0 auto;background:var(--white);
    border-bottom:1px solid var(--line);padding:8px var(--gutter) 24px;transform:translateY(-8px);
    opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;
    max-height:calc(100dvh - var(--hdr-h));overflow:auto}
  .gnav[data-open="true"]{opacity:1;visibility:visible;transform:none}
  .gnav ul{flex-direction:column;gap:0}
  .gnav a{display:block;padding-block:16px;border-bottom:1px solid var(--line);font-size:15px}
  .gnav a[aria-current="page"]{border-bottom-color:var(--line);color:var(--navy)}
}

/* =========================================================
   タブレット（〜1024で2カラムを等分に落とす）
   ========================================================= */
@media (max-width:1024px){
  :root{--gutter:48px}
  .fv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-block:88px 40px}
  .fv__title{font-size:38px}
  .fv__media{margin-top:0}
  .factbar,.grid-2-wide,.media-split,.media-split--rev,.page-hero__in{grid-template-columns:1fr 1fr}
  .g-282,.g-486,.g-588,.g-744{grid-template-columns:1fr 1fr}
  .g-180{grid-template-columns:140px 1fr;gap:24px}
  .svc-main{grid-template-columns:1fr 1fr}
  .stock-grid{grid-template-columns:repeat(2,1fr)}
  .office{grid-template-columns:1fr 1fr}
  .deflist .row,.form-row{grid-template-columns:180px 1fr}
  .result-rows__head{display:none}
  .result-row{grid-template-columns:120px 1fr 120px;gap:8px 20px}
  .result-row img{width:120px;height:100px;grid-row:span 2}
  .result-row__name{grid-column:2/4}
  .footer-top{grid-template-columns:1fr 1fr 1fr;gap:40px 24px}
  .footer-rule{display:none}
  .gnav{display:block}
  .flow{grid-template-columns:repeat(2,1fr);gap:32px 24px}
  .flow--5{grid-template-columns:repeat(3,1fr)}
  .flow__item::after{display:none}
  .filter{grid-template-columns:repeat(3,1fr);gap:20px}
  .filter .btn{grid-column:span 3}
  .detail,.example{grid-template-columns:1fr 1fr}
  .example__total{padding-left:24px}
  .comment{margin-bottom:32px}
}

/* =========================================================
   スマートフォン（390px基準）
   ========================================================= */
@media (max-width:767px){
  :root{--gutter:20px;--hdr-h:60px}
  body{font-size:13px}

  /* 文字は7段階（30以下）に落とす */
  .t-52,.fv__title{font-size:30px;line-height:1.5;letter-spacing:-.03em}
  .t-38,.page-hero__title,.band__title,.cta__title{font-size:26px;line-height:1.5}
  .t-30,.svc-main__title{font-size:22px}
  .t-26{font-size:22px}
  .t-22,.svc-item__title{font-size:22px}
  .sec-head__en{font-size:26px}
  .sec-head__jp{font-size:11.5px}
  .sec-head{margin-bottom:32px;flex-direction:column;align-items:flex-start;gap:14px;
    position:relative;padding-top:18px}
  .sec-head::after{width:100%;margin-left:0}
  .sec-head::before{content:"";position:absolute;top:0;left:0;width:40px;height:2px;background:var(--red)}

  .sec{padding-block:64px}
  .sec--lead{padding-block:72px 68px}
  .sec--sub{padding-block:56px 60px}

  /* ヘッダー（開閉のしくみは1120px以下の指定を引き継ぐ） */
  .site-header__in{gap:0}
  .site-header__logo img{width:104px;height:28px}
  .hdr-tel,.hdr-cta{display:none}

  /* FV */
  .fv{grid-template-columns:1fr;gap:0;padding:40px var(--gutter) 0}
  .fv__media{order:-1;margin-inline:calc(var(--gutter)*-1)}
  .fv__media img{aspect-ratio:390/260}
  .fv__caption{padding-inline:0;margin-bottom:28px}
  .fv__copy{padding-bottom:0}
  .fv__text{margin-bottom:26px}
  .fv__actions{flex-direction:column;align-items:stretch;gap:16px}
  .fv__actions .btn{width:100%}
  .fv__actions .link-arrow{justify-content:center}

  /* グリッドは1カラムへ */
  .factbar,.grid-2,.grid-2-wide,.grid-3,.svc-main,.svc-grid,.media-split,
  .media-split--rev,.page-hero__in,.checklist,
  .g-180,.g-282,.g-486,.g-588,.g-744{grid-template-columns:1fr;gap:32px}
  .g-180{gap:6px}
  .checklist{gap:0}
  .factlist .row{grid-template-columns:110px 1fr;gap:12px;padding-block:14px}
  .stock-grid,.stock-grid--3{grid-template-columns:1fr 1fr;gap:16px}
  .result-grid{grid-template-columns:1fr 1fr;gap:28px 16px}
  .result-item__price .value{font-size:26px}
  .stock-card__price .value,.stock-card--lg .stock-card__price .value{font-size:22px}
  .office,.office-sub{grid-template-columns:1fr;gap:20px}
  .office__media{margin-inline:calc(var(--gutter)*-1)}
  .office-sub{margin-top:28px;padding-top:24px}
  .office-sub__media img{width:100%;height:auto;aspect-ratio:8/5}
  .panel-red{padding:28px 22px}
  .result-rows__head{display:none}
  .result-row{grid-template-columns:104px 1fr;gap:6px 16px;padding-block:16px}
  .result-row img{width:104px;height:87px;grid-row:span 4}
  .result-row__price{margin-top:2px}
  .result-row__price .value{font-size:22px}
  .flow,.flow--5,.flow--3{grid-template-columns:1fr;gap:0}
  .flow__item{border-top:1px solid var(--line);padding-block:18px}
  .flow__no{font-size:22px;margin-bottom:8px}
  .deflist .row,.form-row{grid-template-columns:1fr;gap:6px;padding-block:16px}
  .form-row > .label{padding-top:0}
  .rowlist--2{columns:1}

  /* 下層FV */
  .page-hero{padding-block:32px 40px}
  .page-hero__media{order:-1;margin-inline:calc(var(--gutter)*-1);margin-bottom:26px}
  .page-hero__media img{aspect-ratio:390/244}
  .page-hero__actions{flex-direction:column;align-items:stretch;gap:18px}
  .page-hero__actions .btn{width:100%}
  .tel-inline{align-items:center}

  /* 帯 */
  .band{min-height:0;padding-block:56px}
  .band::before{background:linear-gradient(180deg,rgba(8,39,71,.9) 0%,rgba(8,39,71,.86) 100%)}
  .band .btn{width:100%}

  /* CTA */
  .cta{padding-block:64px}
  .cta__actions{flex-direction:column;align-items:stretch;gap:14px}
  .cta__actions .btn{width:100%}

  /* フッター */
  .site-footer{padding:48px var(--gutter) 24px;padding-bottom:104px}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;margin-top:32px}
  .footer-bottom__spacer{display:none}

  /* SP固定CTA */
  .sp-cta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:60;height:72px;background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(8,39,71,.1)}
  .sp-cta a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-size:13px;font-weight:700}
  .sp-cta__tel{color:var(--navy)}
  .sp-cta__tel .n{font-family:var(--ff-en);font-weight:900;font-size:17px;letter-spacing:-.02em}
  .sp-cta__tel .s{font-size:10px;font-weight:400;color:var(--muted)}
  .sp-cta__form{background:var(--red-btn);color:var(--white)}
  .sp-cta__form .s{font-size:10px;font-weight:400;color:rgba(255,255,255,.82)}

  /* ギャラリー */
  .filter{grid-template-columns:1fr 1fr;gap:16px}
  .filter .btn{grid-column:span 2}
  .listbar{gap:12px}
  .listbar__sort{gap:14px;font-size:11.5px;flex-wrap:wrap}
  .pager{margin-top:32px}
  .contact{grid-template-columns:1fr;gap:28px}
  .purpose{grid-template-columns:repeat(2,1fr);gap:16px}
  .support > li{grid-template-columns:1fr;gap:8px;padding-block:20px}
  .support__title{font-size:22px}
  .example{grid-template-columns:1fr;gap:28px}
  .example__total{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-left:0;padding-top:20px}
  .example__total .n b{font-size:30px}
  .contact{grid-template-columns:1fr;gap:24px}
  .purpose{grid-template-columns:1fr;gap:10px}
  .purpose label{padding:16px 18px 18px}
  .telbar{flex-direction:column;align-items:flex-start;gap:16px}
  .telbar__big{font-size:30px}
  .faq-tabs a{height:42px;padding:0 16px;font-size:11.5px}
  .route{flex-direction:column;align-items:stretch;gap:0}
  .route__item{width:100%;padding-block:14px}
  .route__arrow{display:none}
  .route--sm .route__item{border-top:1px solid var(--line)}
  .loc__media{grid-template-columns:1fr}
  .loc__media img{height:200px}
  .loc__map{min-height:0;padding:18px 20px}
  .panel{padding:22px 20px 24px}
  .panel__title{font-size:22px}
  .compare__jp{font-size:22px}
  .empty{padding:36px 22px 40px}
  .empty__actions{flex-direction:column;align-items:stretch}
  .empty__actions .btn{width:100%}
  .detail{grid-template-columns:1fr;gap:28px}
  .detail__name{font-size:22px;margin-top:10px}
  .detail__grade{font-size:15px}
  .price-col__total .value{font-size:30px}
  .price-col__total .unit{font-size:15px}
  .comment{margin-bottom:28px}
  .comment p{font-size:13px;line-height:2}
  .equip{grid-template-columns:1fr}
  .equip li:nth-child(-n+2){border-top:0}
  .equip li:first-child{border-top:1px solid var(--line)}
  .gallery__thumbs{grid-template-columns:repeat(3,1fr);gap:8px}
  .price-box{padding:22px 20px}
  .price-box .total .value{font-size:30px}
  .spec-table th{width:42%}
  .legal > section{padding-top:28px;margin-top:28px}
  .legal h2{font-size:22px}
  .toc{padding:22px 20px 24px;margin-bottom:36px}
  .toc ol{columns:1}
  .linkgrid{grid-template-columns:1fr;gap:0}
  .linkgrid a{padding-block:16px}
}

/* 小さいAndroid（〜389）。1文節が1行に収まらなくなる手前でもう1段落とす */
@media (max-width:389px){
  .stock-grid,.stock-grid--3,.result-grid{grid-template-columns:1fr}
  .fv__title,.t-52{font-size:26px}
  .t-38,.page-hero__title,.band__title,.cta__title{font-size:22px}
  .t-30,.t-26,.t-22,.svc-item__title,.svc-main__title{font-size:22px}
  .sec-head__en{font-size:22px}
  .sec{padding-block:56px}
  .sec--lead{padding-block:60px 56px}
  .sec--sub{padding-block:48px 52px}
}

/* ---------- 動きを減らす設定の環境 ----------
   アコーディオンとメニューは transition で開くので、動きを止める環境では
   即座に開き切るようにする（transition が進まないと開かないのを防ぐ）。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- 印刷 ---------- */
@media print{
  .site-header,.sp-cta,.cta,.hdr-toggle{display:none!important}
  body{font-size:11pt}
}