/* くらた自動車整備工場 ── 実績・証拠型（工業/メカニカル）
   ガンメタ×白＋警告色アンバーの硬派な工業トーン。
   証拠（数字・比較表・番号付き手順・作業ギャラリー）で押す骨格。 */

:root {
  --steel-950: #14171c;
  --steel-900: #1b2027;
  --steel-850: #232a33;
  --steel-800: #2b323c;
  --steel-700: #3a424d;
  --steel-600: #4d5661;

  --ink:     #1a1e24;
  --ink-sub: #555d67;

  --paper:   #e8eaed;
  --paper-2: #dde0e4;
  --white:   #ffffff;
  --line:    #ccd1d7;
  --line-2:  #b3b9c1;

  --amber:     #f5a623;
  --amber-lt:  #ffbb3d;
  --amber-ink: #955200;

  --on-dark:      #e7e9ec;
  --on-dark-sub:  #a3aab3;
  --on-dark-line: rgba(231,233,236,.14);

  --sans: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --mono: "Roboto Mono", "SFMono-Regular", monospace;
  --cond: "Barlow Condensed", sans-serif;

  --pad: clamp(20px, 5vw, 44px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 720px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 工業サインの警告ストライプ。署名的に要所だけ使う */
.hz { height: 8px; background: repeating-linear-gradient(-45deg,
        var(--amber) 0 16px, var(--steel-900) 16px 32px); }

/* ---------- ヘッダー ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--pad);
  color: var(--on-dark); background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s, color .35s, border-color .35s;
}
.bar .logo { font-weight: 900; font-size: 15px; letter-spacing: .06em; line-height: 1.3; }
.bar .logo small { display: block; font-family: var(--mono); font-weight: 500;
                   font-size: 9.5px; letter-spacing: .24em; margin-top: 2px; color: var(--amber-lt); }
.bar nav { display: none; gap: 22px; font-size: 12.5px; letter-spacing: .04em; }
.bar nav a { text-decoration: none; color: var(--on-dark); transition: color .25s; }
.bar nav a:hover { color: var(--amber-lt); }
.bar-tel { display: none; }
@media (min-width: 960px) {
  .bar nav { display: flex; }
  .bar-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
             font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .04em;
             padding: 8px 16px; border: 1px solid var(--amber); color: var(--amber-lt); }
  .bar-tel::before { content: ""; width: 7px; height: 7px; background: var(--amber); }
}

.bar.on { color: var(--ink); background: rgba(232,234,237,.95);
          backdrop-filter: blur(10px); border-bottom-color: var(--line-2); }
.bar.on .logo small { color: var(--amber-ink); }
.bar.on nav a { color: var(--ink-sub); }
.bar.on nav a:hover { color: var(--ink); }
.bar.on .bar-tel { color: var(--amber-ink); border-color: var(--amber-ink); }

/* ---------- ヒーロー（暗幕定型をやめ、証拠で構成）---------- */
/* 左：見出し＋2CTA／右：作業写真（暗幕なし）／下：実績数字の帯 */
.fv { background: var(--steel-900); color: var(--on-dark); }
.fv-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fv-grid { grid-template-columns: 1.08fr .92fr; align-items: stretch; } }

.fv-main { padding: clamp(96px, 12vw, 130px) var(--pad) clamp(44px, 6vw, 66px);
           display: flex; flex-direction: column; justify-content: center; }
.fv-copy { max-width: 600px; }

.fv-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em;
        padding: 6px 12px; border: 1px solid var(--on-dark-line); color: var(--on-dark-sub); }
.chip.hot { background: var(--amber); color: var(--steel-900); border-color: var(--amber); font-weight: 700; }

.fv h1 { font-weight: 900; font-size: clamp(29px, 5.2vw, 50px); line-height: 1.42;
         letter-spacing: .01em; color: #fff; text-wrap: balance; }
.fv h1 mark { background: none; color: #fff; border-bottom: 5px solid var(--amber); padding-bottom: 1px; }
.fv-lede { margin-top: 22px; font-size: 14.5px; line-height: 2; color: var(--on-dark-sub); max-width: 32em; }

.fv-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.fv-note { margin-top: 26px; font-size: 11.5px; line-height: 1.85; color: var(--on-dark-sub);
           border-left: 2px solid var(--steel-700); padding-left: 14px; max-width: 34em; }

.fv-photo { position: relative; min-height: 300px; background: var(--steel-950); }
.fv-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: 46% 32%; }
@media (min-width: 900px) { .fv-photo img { position: absolute; inset: 0; min-height: 0; } }
.fv-photo .fv-tag { position: absolute; left: 0; bottom: 0; z-index: 2;
                    background: var(--steel-900); color: var(--on-dark);
                    font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
                    padding: 11px 18px; border-top: 3px solid var(--amber); }
.fv-photo .fv-tag b { color: var(--amber-lt); font-weight: 500; }

/* 実績数字の帯 */
.fv-stats { background: var(--steel-950); border-top: 1px solid var(--on-dark-line); }
.fv-stats-in { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .fv-stats-in { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 28px var(--pad) 30px; border-bottom: 1px solid var(--on-dark-line);
        border-right: 1px solid var(--on-dark-line); }
.stat-num { font-family: var(--cond); font-weight: 800; font-size: clamp(38px, 5.4vw, 56px);
            line-height: .92; color: #fff; letter-spacing: .01em; }
.stat-num small { font-family: var(--sans); font-size: 15px; font-weight: 700;
                  color: var(--amber-lt); margin-left: 5px; letter-spacing: .02em; }
.stat-en { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
           color: var(--amber-lt); margin-top: 14px; text-transform: uppercase; }
.stat-jp { display: block; font-size: 12px; color: var(--on-dark-sub); margin-top: 3px; }

/* ---------- セクション共通 ---------- */
section { padding: clamp(62px, 9vw, 112px) 0; }
.sec-steel { background: var(--steel-900); color: var(--on-dark); }
.sec-dark  { background: var(--steel-950); color: var(--on-dark); }
.sec-paper2 { background: var(--paper-2); }
.flush-bottom { padding-bottom: 0; }

.shead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.sidx { font-family: var(--cond); font-weight: 800; font-size: clamp(32px, 5vw, 48px);
        line-height: .8; color: var(--amber-ink); letter-spacing: .01em; }
.sk { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--ink-sub);
      text-transform: uppercase; line-height: 1.4; }
.sk b { display: block; font-family: var(--sans); font-weight: 700; font-size: 13px;
        letter-spacing: .06em; color: var(--ink); text-transform: none; margin-top: 3px; }
.sec-steel .sidx, .sec-dark .sidx { color: var(--amber); }
.sec-steel .sk, .sec-dark .sk { color: var(--on-dark-sub); }
.sec-steel .sk b, .sec-dark .sk b { color: #fff; }

h2 { font-weight: 900; font-size: clamp(22px, 3.6vw, 33px); line-height: 1.5;
     letter-spacing: .02em; margin-bottom: 24px; text-wrap: balance; }
p + p { margin-top: 1.3em; }
.lede-block { max-width: 680px; }
.lede-block p { font-size: 14px; color: var(--ink-sub); }

.sec-steel h2, .sec-dark h2 { color: #fff; }
.sec-steel p,  .sec-dark p  { color: var(--on-dark); }
.sec-steel .lede-block p, .sec-dark .lede-block p { color: var(--on-dark-sub); }
.sec-steel strong, .sec-dark strong { color: #fff; }

/* ---------- 費用の構造（A / B）---------- */
.split-cost { display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 760px) { .split-cost { grid-template-columns: 1fr 1fr; gap: 16px; } }
.cost-card { background: var(--white); border: 1px solid var(--line-2);
             border-left: 4px solid var(--steel-900); padding: 26px 24px 28px; }
.cost-card:nth-child(2) { border-left-color: var(--amber); }
.cost-tag { display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 30px; font-family: var(--cond); font-weight: 800;
            font-size: 18px; margin-bottom: 14px; }
.tag-fixed { background: var(--steel-900); color: #fff; }
.tag-shop  { background: var(--amber); color: var(--steel-900); }
.cost-card h3 { font-size: 19px; font-weight: 900; letter-spacing: .04em; }
.cost-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-sub); margin-top: 4px; letter-spacing: .04em; }
.tick { list-style: none; margin: 18px 0 16px; border-top: 1px solid var(--line); }
.tick li { font-size: 13.5px; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--line); position: relative; }
.tick li::before { content: ""; position: absolute; left: 0; top: 17px;
                   width: 8px; height: 2px; background: var(--amber-ink); }
.cost-note { font-size: 13px; line-height: 1.9; color: var(--ink-sub); }
.cost-note strong { color: var(--ink); }
.rule-note { margin-top: 32px; padding: 20px 22px; background: var(--steel-900); color: var(--on-dark);
             border-left: 4px solid var(--amber); font-size: 13.5px; line-height: 1.9; }
.rule-note strong { color: #fff; }

/* ---------- 表：横スクロールの器 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.scroll-hint { margin-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-sub); }
.sec-steel .scroll-hint, .sec-dark .scroll-hint { color: var(--on-dark-sub); }
@media (min-width: 900px) { .scroll-hint { display: none; } }

table { border-collapse: collapse; font-size: 13.5px; }
.cmp-table   { min-width: 680px; width: 100%; }
.price-table { min-width: 780px; width: 100%; }
.opt-table   { min-width: 560px; width: 100%; }
.car-table   { min-width: 560px; width: 100%; }
th, td { padding: 13px 14px; text-align: left; vertical-align: middle; }
.num { font-family: var(--mono); font-weight: 400; text-align: right; white-space: nowrap;
       font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------- 自社 vs 一般 比較表 ---------- */
.cmp-wrap { margin-top: 30px; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top;
                               font-size: 13px; line-height: 1.8; padding: 15px 18px; }
.cmp-table thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
                      font-weight: 500; color: var(--ink-sub); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.cmp-table .col-item { width: 148px; font-weight: 700; color: var(--ink); font-size: 12.5px; }
.cmp-table tbody th { font-weight: 700; color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.cmp-table tbody td { border-bottom: 1px solid var(--line-2); }
.cmp-table tbody th { border-bottom: 1px solid var(--line-2); }
.cmp-table .col-us { background: var(--steel-900); color: var(--on-dark); position: relative; }
.cmp-table thead .col-us { background: var(--steel-900); color: #fff; border-bottom: 2px solid var(--amber);
                           font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.cmp-table thead .col-us small { display: block; font-family: var(--mono); font-weight: 400;
                                 font-size: 10px; letter-spacing: .1em; color: var(--amber-lt); margin-top: 3px; }
.cmp-table tbody .col-us { border-bottom: 1px solid var(--on-dark-line); padding-left: 34px; }
.cmp-table tbody .col-us::before { content: ""; position: absolute; left: 16px; top: 20px;
                                   width: 9px; height: 9px; background: var(--amber); }
.cmp-table .col-us b { color: var(--amber-lt); font-weight: 700; }
.cmp-table .col-them { color: var(--ink-sub); }

/* ---------- 料金表 ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 4px; }
.badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px;
         background: var(--steel-900); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.badge::before { content: ""; width: 9px; height: 9px; background: var(--amber); }

.price-table thead th { font-size: 11.5px; font-weight: 500; letter-spacing: .04em; line-height: 1.5;
                        white-space: nowrap; vertical-align: bottom; color: var(--ink-sub);
                        border-bottom: 2px solid var(--ink); }
.price-table thead th span { display: block; font-family: var(--mono); font-weight: 400;
                             font-size: 10px; letter-spacing: .1em; margin-top: 3px; }
.price-table tbody th { font-weight: 700; font-size: 13.5px; white-space: nowrap; color: var(--ink);
                        border-bottom: 1px solid var(--line-2); }
.price-table tbody th .ex { display: block; font-size: 11px; font-weight: 400; margin-top: 2px; color: var(--ink-sub); }
.price-table td { border-bottom: 1px solid var(--line-2); }
.price-table td.num { font-size: 14px; }
.price-table .grp-a { background: rgba(27,32,39,.05); }
.price-table .num.sub { background: rgba(27,32,39,.10); color: var(--ink); font-weight: 500; }
.price-table .grp-b { background: rgba(245,166,35,.16); }
.price-table thead th.col-total, .price-table .num.total { background: var(--steel-900); }
.price-table .num.total { color: var(--amber-lt); font-weight: 700; font-size: 15.5px; }
.price-table thead th.col-total { color: #fff; }
.price-table thead th.col-total span { color: var(--amber-lt); }

.notes { list-style: none; margin-top: 24px; max-width: 780px; }
.notes li { font-size: 12px; line-height: 1.85; padding-left: 16px; position: relative; color: var(--ink-sub); }
.notes li + li { margin-top: 7px; }
.notes li::before { content: "※"; position: absolute; left: 0; top: 0; color: var(--amber-ink); }
.asof { margin-top: 18px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-sub); }

.cta-inline { margin-top: clamp(38px, 6vw, 56px); padding: 26px; background: var(--paper-2);
              border-left: 4px solid var(--amber); display: flex; flex-wrap: wrap;
              align-items: center; justify-content: space-between; gap: 16px; }
.cta-inline p { font-size: 13.5px; max-width: 40em; }

/* ---------- 追加整備の目安 ---------- */
.opt-table thead th, .car-table thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
                                           color: var(--ink-sub); border-bottom: 2px solid var(--ink); font-weight: 500; }
.opt-table thead th span { display: block; font-size: 9.5px; letter-spacing: .08em; margin-top: 2px; }
.opt-table tbody th, .opt-table td,
.car-table tbody th, .car-table td { border-bottom: 1px solid var(--line-2); }
.opt-table tbody th, .car-table tbody th { font-weight: 700; color: var(--ink); }
.opt-table tbody tr:hover, .car-table tbody tr:hover { background: rgba(27,32,39,.03); }
.opt-table .num { font-size: 14px; color: var(--ink); }
.opt-table .freq { font-family: var(--mono); font-size: 11.5px; color: var(--ink-sub); }

.promise { margin-top: 44px; border: 1px solid var(--line-2); border-top: 4px solid var(--steel-900);
           padding: 28px 26px 30px; background: var(--white); }
.promise h3 { font-size: 16px; font-weight: 900; letter-spacing: .04em; margin-bottom: 18px; }
.promise-list { list-style: none; counter-reset: p; }
.promise-list li { counter-increment: p; position: relative; padding: 16px 0 16px 48px;
                   border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.9; color: var(--ink-sub); }
.promise-list li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 14px;
                           font-family: var(--cond); font-weight: 800; font-size: 17px;
                           color: var(--steel-900); }
.promise-list li::after { content: ""; position: absolute; left: 0; top: 40px; width: 30px; height: 2px; background: var(--amber); }
.promise-list strong { color: var(--ink); }

/* ---------- 番号付き手順（当日の流れ）---------- */
.days-grid { display: grid; gap: 1px; margin-top: 34px;
             background: var(--on-dark-line); border: 1px solid var(--on-dark-line); }
@media (min-width: 760px) { .days-grid { grid-template-columns: repeat(3, 1fr); } }
.day-card { background: var(--steel-900); padding: 26px 24px 28px; }
.day-num { display: block; font-family: var(--cond); font-weight: 800; font-size: 40px;
           color: var(--amber-lt); line-height: 1; }
.day-num small { font-family: var(--sans); font-size: 15px; font-weight: 700; margin-left: 4px; }
.day-card h3 { font-size: 14.5px; font-weight: 900; letter-spacing: .04em; margin: 12px 0 8px; color: #fff; }
.day-card p { font-size: 13px; line-height: 1.9; color: var(--on-dark-sub); }

.spec { margin-top: 38px; border-top: 1px solid var(--on-dark-line); }
.spec div { display: grid; grid-template-columns: 1fr; gap: 2px;
            padding: 15px 2px; border-bottom: 1px solid var(--on-dark-line); }
@media (min-width: 640px) { .spec div { grid-template-columns: 180px 1fr; gap: 20px; align-items: baseline; } }
.spec dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--amber-lt); }
.spec dd { font-size: 14.5px; color: var(--on-dark); }

.sub-h { margin-top: 54px; font-size: 17px; font-weight: 900; letter-spacing: .05em; color: #fff; }

.steps { list-style: none; counter-reset: st; margin-top: 24px;
         border-top: 1px solid var(--on-dark-line); }
.steps li { counter-increment: st; display: grid; grid-template-columns: 52px 66px 1fr; gap: 16px;
            align-items: start; padding: 20px 0; border-bottom: 1px solid var(--on-dark-line); }
.step-n { font-family: var(--cond); font-weight: 800; font-size: 26px; color: var(--amber);
          line-height: 1; padding-top: 2px; }
.step-time { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--on-dark);
             padding-top: 6px; letter-spacing: -.01em; }
.steps h4 { font-size: 14.5px; font-weight: 900; letter-spacing: .04em; margin-bottom: 5px; color: #fff; }
.steps p { font-size: 13px; line-height: 1.9; color: var(--on-dark-sub); }
@media (max-width: 560px) {
  .steps li { grid-template-columns: 44px 1fr; }
  .step-time { grid-column: 2; grid-row: 1; padding-top: 2px; color: var(--amber-lt); }
  .steps li > div { grid-column: 1 / -1; }
}

/* ---------- 作業ギャラリー（証拠）---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 36px; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gitem { position: relative; overflow: hidden; background: var(--steel-950); }
.gitem img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover;
             transition: transform .5s ease; }
.gitem:hover img { transform: scale(1.05); }
.gitem figcaption { position: absolute; left: 0; bottom: 0; z-index: 2;
                    background: var(--steel-900); color: var(--on-dark);
                    font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
                    padding: 7px 12px; border-top: 2px solid var(--amber); }
.gitem figcaption b { color: var(--amber-lt); font-weight: 500; margin-right: 8px; }

/* ---------- 中間CTA（写真＋濃色パネルの2分割・暗幕なし）---------- */
.cta-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) { .cta-split { grid-template-columns: 1fr 1fr; } }
.cta-split .cs-photo { position: relative; min-height: 280px; background: var(--steel-950); }
.cta-split .cs-photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: 50% 42%; }
@media (min-width: 860px) { .cta-split .cs-photo img { position: absolute; inset: 0; min-height: 0; } }
.cta-split .cs-body { background: var(--steel-900); color: var(--on-dark);
                      padding: clamp(48px, 7vw, 84px) var(--pad);
                      display: flex; flex-direction: column; justify-content: center; }
.cta-split .cs-body h2 { color: #fff; margin-bottom: 14px; }
.cta-split .cs-body p { color: var(--on-dark-sub); font-size: 13.5px; line-height: 2; max-width: 34em; }
.cta-split .cs-body .btn { margin-top: 28px; align-self: flex-start; }

/* ---------- 対応車種 ---------- */
.car-table td { font-size: 12.5px; color: var(--ink-sub); line-height: 1.75; }
.car-table .col-mark, .car-table .mk { text-align: center; width: 66px; }
.mark { display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; font-size: 15px; font-weight: 700; }
.mark.ok    { background: var(--steel-900); color: #fff; }
.mark.maybe { background: var(--amber); color: var(--steel-900); }
.mark.no    { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); }

/* ---------- 車検以外の業務 ---------- */
.serv-grid { display: grid; gap: 12px; margin-top: 36px; }
@media (min-width: 640px) { .serv-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 940px) { .serv-grid { grid-template-columns: repeat(4, 1fr); } }
.serv { background: var(--white); border: 1px solid var(--line-2); border-top: 3px solid var(--steel-900);
        padding: 24px 22px 26px; }
.serv h3 { font-size: 15px; font-weight: 900; letter-spacing: .04em; }
.serv-price { font-family: var(--cond); font-weight: 800; font-size: 22px;
              color: var(--amber-ink); margin-top: 6px; }
.serv p:last-child { margin-top: 12px; font-size: 12.5px; line-height: 1.85; color: var(--ink-sub);
                     border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- 声 ---------- */
.voices { display: grid; gap: 12px; margin-top: 36px; }
@media (min-width: 800px) { .voices { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.voice { background: var(--white); border: 1px solid var(--line-2); padding: 26px 24px; position: relative; }
.voice::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 4px; background: var(--amber); }
.voice p { font-size: 13.5px; line-height: 2; }
.voice .who { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-sub); }

/* ---------- FAQ ---------- */
.faq { margin-top: 30px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { cursor: pointer; list-style: none; padding: 19px 40px 19px 30px;
               font-size: 14.5px; font-weight: 700; position: relative; letter-spacing: .03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: 2px; top: 18px;
                       font-family: var(--cond); font-weight: 800; font-size: 17px; color: var(--amber-ink); }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 16px;
                      font-family: var(--cond); font-size: 22px; color: var(--ink-sub); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 40px 22px 30px; font-size: 13.5px; color: var(--ink-sub); line-height: 2; }

/* ---------- 工場情報（写真＋濃色ベタの2分割）---------- */
.sec-split { padding: 0; }
.split { display: grid; }
.split-photo img { width: 100%; height: clamp(300px, 66vw, 480px); object-fit: cover; object-position: 50% 26%; }
.split-body { background: var(--steel-900); color: var(--on-dark); padding: clamp(56px, 10vw, 92px) var(--pad); }
.split-body .inner { max-width: 480px; margin: 0 auto; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-body { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center;
                padding: clamp(76px, 8vw, 112px) clamp(40px, 5vw, 68px); }
  .split-body .inner { max-width: 440px; margin: 0 0 0 auto; }
  .split-photo { grid-area: 1 / 2; position: relative; }
  .split-photo img { position: absolute; inset: 0; height: 100%; }
}
.split-body h2 { color: #fff; }
.split-body dl div { display: grid; grid-template-columns: 118px 1fr; gap: 16px;
                     padding: 12px 0; border-bottom: 1px solid var(--on-dark-line); }
.split-body dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--amber-lt); }
.split-body dd { font-size: 14px; color: var(--on-dark); }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; gap: 11px; padding: 16px 30px;
       background: var(--amber); color: var(--steel-900); text-decoration: none;
       font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .05em;
       border: 2px solid var(--amber); transition: background .25s, transform .25s, border-color .25s; }
.btn::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.btn:hover { background: var(--amber-lt); border-color: var(--amber-lt); transform: translateY(-2px); }
.btn.line { background: transparent; color: var(--on-dark); border-color: var(--on-dark-sub); }
.btn.line:hover { background: #fff; color: var(--steel-900); border-color: #fff; }
.btn.line-dark { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.line-dark:hover { background: var(--steel-900); color: #fff; border-color: var(--steel-900); }

/* ---------- 最終CTA ---------- */
.cta-band { background: var(--steel-900); color: var(--on-dark); text-align: center;
            padding: clamp(56px, 9vw, 92px) var(--pad); }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: var(--on-dark-sub); font-size: 13.5px; line-height: 2; max-width: 46em; margin: 0 auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* ---------- スマホ追従バー ---------- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
          display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
          background: rgba(20,23,28,.97); backdrop-filter: blur(8px);
          border-top: 2px solid var(--amber);
          transform: translateY(120%); transition: transform .35s; }
.sticky.on { transform: none; }
.sticky a { flex: 1; text-align: center; padding: 13px 6px; text-decoration: none;
            font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.sticky .s1 { background: var(--amber); color: var(--steel-900); }
.sticky .s2 { background: transparent; color: var(--on-dark); border: 1px solid var(--steel-600); }
@media (min-width: 900px) { .sticky { display: none; } }

/* ---------- フッター ---------- */
footer { background: var(--steel-950); color: var(--on-dark-sub); padding: 50px var(--pad) 100px; text-align: center; }
footer .logo { color: #fff; font-size: 15px; font-weight: 900; letter-spacing: .06em; margin-bottom: 14px; }
footer .logo small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px;
                     letter-spacing: .2em; color: var(--amber-lt); margin-top: 4px; }
footer p { font-size: 12px; line-height: 2; }
footer .credit { margin-top: 24px; font-size: 11px; }
footer .credit strong { color: var(--on-dark); }
footer a { color: var(--amber-lt); }
@media (min-width: 900px) { footer { padding-bottom: 50px; } }

/* ---------- スクロールで浮かび上がる ---------- */
.rise { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}