/* ============================================================
   base.css — リセット＋タイポ＋カード＋CTA＋グリッド
   前提: tokens.css を先に読み込むこと
   出典: ART-DIRECTION.md v3 §2〜§4 ／ 08_足す技法_subaru基準.md §0-5・§0-6・§3・§6

   🚨 このファイルの絶対ルール
   - 🔑 --on-anchor を使ってよいのは「面も文字も一緒に反転する場所」だけ
     （--anchor / --anchor-deep / .section--anchor の上）。
     .scrim や .hero のように【面が反転しない】場所では --on-scrim を使う。
     面が反転するか／しないかで決める。「濃い面だから」で選ばない（E案の診断）
   - カードに box-shadow を書かない（唯一の許可先は .cta-fixed と .modal）
   - 無彩色を書かない。すべて tokens.css の変数を経由する
   - 外部参照ゼロ（@import / url() を書かない）
   ============================================================ */

/* ── 1. リセット ───────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  /* 🔑 日本語の字詰め。必ず入れる */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  /* 🚨 `overflow-x: hidden` を書かない（rev.3で削除）。
     はみ出しを隠すだけの対症療法で、原因が見えなくなるうえ
     「5幅で横スクロール0px」の検査そのものを無効化してしまう
     （scrollWidth が伸びなくなるため）。
     はみ出したら原因側を直すこと。どうしても切りたい箇所には .u-clip を使う。 */
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  /* 🚨 iOS Safari は 16px 未満の入力欄でフォーカス時に自動ズームする */
  font-size: max(16px, 1em);
}
button { background: none; border: none; cursor: pointer; }

a { color: var(--anchor); }

table { border-collapse: collapse; }

/* フォーカスリングを消さない（実測サイトで影を使ってよい唯一の例外もここ） */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--s4);
}

/* ── 2. タイポグラフィ ─────────────────────────── */

h1, h2, h3, h4 {
  font-weight: var(--fw-bold);   /* 🚨 400と700の2段のみ。300/500/600は使わない */
  line-height: var(--lh-head);
  color: var(--anchor);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p, li, dd, dt { max-width: var(--w-text); }   /* 1行 = 全角24〜30字 */

.lead      { font-size: var(--fs-lead); line-height: 1.7; }
.small     { font-size: var(--fs-small); line-height: 1.7; }
.muted     { color: var(--ink-soft); }
.strong    { font-weight: var(--fw-bold); }

/* 英字の小ラベルだけ字間を広める（subaru実測：letter-spacing は188KB中2件のみ） */
.label-en {
  font-size: var(--fs-small);
  letter-spacing: .14em;
  color: var(--ink-soft);
}

/* 🔑 写真が無いときの主役。すでにある事実の数字を巨大タイポにする
   ページ全体で1箇所だけ使う */
.numeral {
  font-size: clamp(40px, 8vw, 96px);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  color: var(--anchor);
  letter-spacing: -.01em;
  max-width: none;
}

/* リンクは色だけで区別させない（--ink-soft と --anchor-2 は明度がほぼ同じ） */
.link-sub {
  color: var(--anchor);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.link-sub:hover { text-decoration-thickness: 2px; }

/* 読み上げ専用 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 3. レイアウト（セクションは「面」で仕切る） ──── */

.wrap {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section        { padding-block: var(--block); background: var(--paper); }
.section--alt   { background: var(--paper-2); }
.section--soft  { background: var(--accent-soft); }
.section--face  { background: var(--surface); }
/* 濃い面で締める。文字は必ず --on-anchor */
.section--anchor {
  background: var(--anchor);
  color: var(--on-anchor);
}
/* 🔑 詳細度の設計（rev.3）
   「ブロックのクラス」は素のまま、「中の要素」は :where() で包む。
   こうすると全部が (0,1,0) に揃い、各案が単一クラス1つで必ず上書きできる。
   :where() を使わないと (0,1,1) になり、単一クラスでは勝てない
   （B案が .pricelist dd の nowrap で踏んだ罠）。 */
.section--anchor :where(h1, h2, h3, a) { color: var(--on-anchor); }

.stack > * + * { margin-top: var(--s16); }
.stack-lg > * + * { margin-top: var(--s32); }

/* 🔑 一番大きい余白は、一番強いものの隣に置く */
.section--spacious { padding-block: calc(var(--block) + var(--s40)); }

/* ── 4. カード（🚨 影を使わない） ───────────────── */

/* 型A：枠線カード（既定） */
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s24);
  background: var(--card-bg);
  /* box-shadow は書かない。ここが「安っぽさ」の発生源 */
  transition: border-color var(--dur) var(--ease);
}
.card--roomy { padding: var(--s40); }

/* 型B：面カード（枠線なし・背景色だけで塊を作る）
   🚨 枠線と面を併用しない（subaru の .grey-box / .bd-grey-box の使い分け） */
.card--fill {
  background: var(--surface);
  border: none;
  padding: var(--s32);
}

/* ホバーは影を足さず、枠線を濃くする */
.card:hover { border-color: var(--anchor); }
.card--fill:hover { border-color: transparent; }

.card__title { font-size: var(--fs-h3); margin-bottom: var(--s8); }
.card__price {
  font-size: 34px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--anchor);
  max-width: none;
}

/* アイコン＋テキストの縦積みカード（subaru .icn-bd-btn 実測） */
.icon-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s24);
  row-gap: var(--s16);
  background: var(--card-bg);
  transition: border-color var(--dur) var(--ease);
}
.icon-card:hover { border-color: var(--anchor); }

/* ── 5. グリッド（縦gapは横gapの2倍・subaru実測） ── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: var(--grid-col-gap);
  row-gap: var(--grid-row-gap);
}
/* 🚨 375px幅で3列は1枠117px＝金額が折り返す。SPは2列までにする */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (max-width: 560px) {
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* 料金は <table> を使わない。<dl> + Grid で組む
   （375px幅の3列表は右端の金額列が必ず見切れる） */
.pricelist {
  display: grid;
  /* 🚨 `1fr auto` にしない。
     金額欄に長い注記が入ると auto の列が際限なく広がり、
     左の品名が1〜2文字ずつ折れる（320pxで実測）。
     fit-content() で右列に上限を持たせる。 */
  grid-template-columns: minmax(0, 1fr) fit-content(45%);
  column-gap: var(--s16);
  row-gap: var(--s12);
  align-items: baseline;
}
.pricelist :where(dt) { max-width: none; }
.pricelist :where(dd) {
  max-width: none;
  text-align: right;
  font-weight: var(--fw-bold);
  color: var(--anchor);
  /* 🚨 金額は折り返させない。ただし詳細度は (0,1,0) に抑えてあるので、
     長い注記を入れる欄には .u-wrap を付ければ解除できる（下の §15）。
     ここを (0,1,1) にすると単一クラスで解除できず、320pxで横スクロールが出る */
  white-space: nowrap;
}
/* 長い注記は金額列に入れず、行いっぱいに敷く（推奨） */
.pricelist__note {
  grid-column: 1 / -1;
  max-width: none;
  text-align: left;
  white-space: normal;
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  color: var(--ink-soft);
}

/* ── 6. CTA（白地＋1px枠＋アンカー文字のピル型が既定） ── */

.btn {
  display: inline-flex;
  justify-content: center; align-items: center;
  gap: var(--s8);
  min-height: 56px;              /* タップ領域の実務値。大きすぎではない */
  width: var(--w-btn);
  max-width: 100%;
  padding: 6px var(--s24);
  font-size: 18px;
  font-weight: var(--fw-bold);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--anchor);
  border-radius: var(--r-pill);
  color: var(--anchor);
  background: var(--card-bg);
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--anchor); color: var(--on-anchor); }

/* 🔑 塗りは1ページに1個だけ */
.btn--primary {
  background: var(--anchor);
  color: var(--on-anchor);
  border-color: var(--anchor);
}
.btn--primary:hover { background: var(--anchor-deep); border-color: var(--anchor-deep); }

/* ヘッダーの小CTAなど、幅を伸ばしてはいけないボタン。
   🚨 SPの `width:100%` はこの2つを除外している（下の @media を参照）。
      除外しないと、768px以下でヘッダーの小CTAが画面幅いっぱいになり横スクロールが出る */
.btn--small { min-height: 48px; width: auto; padding: 10px 18px; font-size: 16px; }
.btn--inline { width: auto; }

.btn[aria-disabled="true"], .btn:disabled {
  color: var(--ink-soft);
  border-color: var(--line);
  background: var(--surface);
  cursor: not-allowed;
}

/* SPは幅100%。
   🚨 `.btn--small` `.btn--inline` を除外する。
      除外しないと `.btn`(0,1,0) と `.btn--small`(0,1,0) が同詳細度で、
      後ろに書かれたこの規則が勝ち、ヘッダーの小CTAが画面幅いっぱいになって
      横スクロールが出る（B案が320〜768pxで実測）。
      `:not()` を2つ重ねて (0,3,0) にし、順序に依存しない形にしてある。 */
@media (max-width: 768px) {
  .btn:not(.btn--small):not(.btn--inline) { width: 100%; }
}

.btn :where(.icon) { width: 20px; height: 20px; }

/* ── 7. 固定CTA（影を使ってよい唯一の場所） ───────── */

.cta-fixed {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card-bg);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-float);   /* ← 浮くUIなので可 */
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.cta-fixed.is-visible { transform: translateY(0); }
.cta-fixed__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4);
  min-height: 68px;
  font-size: clamp(12px, 3.4vw, 13px);
  line-height: 1.3; text-align: center; text-decoration: none;
  color: var(--anchor);
}
/* 3つとも塗ると375pxでは視線の逃げ場がなくなる。中央だけ塗る */
.cta-fixed__item--primary { background: var(--anchor); color: var(--on-anchor); }

/* PCでは固定しない */
@media (min-width: 769px) {
  .cta-fixed { display: none; }
}
@media (max-width: 768px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* モーダルも「浮くUI」なので影可 */
.modal { box-shadow: var(--shadow-float); border-radius: var(--r-card); background: var(--card-bg); }

/* ── 8. ヒーロー（🚨 100vh を使わない） ───────────── */

.hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 15 / 7;                     /* subaru実測 */
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-via) 55%, var(--hero-to) 100%);
  /* 🚨 --on-anchor ではなく --on-scrim。ヒーローの色面は両テーマとも暗いため、
     反転する --on-anchor を使うとダークで文字が読めなくなる（1.22:1） */
  color: var(--on-scrim);
  display: grid; place-items: center;
}
.hero :where(h1, p) { color: var(--on-scrim); }
/* 画面外へはみ出す巨大な淡色の円 */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: 0;
  border-radius: var(--r-circle); background: var(--veil);
  aspect-ratio: 1;
}
.hero::before { width: 62vw; right: -18vw; top: -22vw; }
.hero::after  { width: 28vw; left: -8vw; bottom: -14vw; }
.hero > * { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .hero { aspect-ratio: 4 / 5; }
}

/* 写真の上に敷く単色帯。🚨 グラデーションにしない（上端で4.5:1を割る） */
.scrim {
  position: absolute; inset-inline: 0; bottom: 0;
  background: var(--scrim);
  color: var(--on-scrim);          /* 🚨 反転しない明色。--on-anchor を使わない */
  padding: var(--s24) var(--gutter);
}
.scrim :where(h1, h2, h3, p, a) { color: var(--on-scrim); }

/* ご利用の流れ①〜④に転用するセグメントバー（subaru実測 62×6px） */
.segments { display: flex; column-gap: var(--s16); }
.segment {
  flex: 1 1 0; max-width: 62px; height: 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.segment.is-done { background: var(--anchor); border-color: var(--anchor); }

/* ── 9. アイコン ───────────────────────────────── */

.icon {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;            /* subaru実測。CSSで指定して <use> の中へ継承させる */
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--anchor);
  flex: none;
}
.icon--sm { width: 16px; height: 16px; }
/* 大きく使うときは線を細くする */
.icon--lg { width: 64px; height: 64px; stroke-width: .75; }
.icon--xl { width: 96px; height: 96px; stroke-width: .75; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 10. フォーム ─────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--s8); }
.field :where(label) { font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--ink); }
.input {
  min-height: 48px;
  padding: var(--s12) var(--s16);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card-bg);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}
.input:hover { border-color: var(--anchor-2); }
:where(textarea).input { min-height: 112px; line-height: 1.7; }
.field :where(.field__error), .field__error { color: var(--anchor); font-weight: var(--fw-bold); font-size: var(--fs-small); }

/* ── 11. FAQ（JSなしで動く） ───────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq :where(details) { border-bottom: 1px solid var(--line); }
.faq :where(summary) {
  display: flex; align-items: center; gap: var(--s12);
  min-height: 48px; padding: var(--s12) 0;
  font-weight: var(--fw-bold); color: var(--anchor);
  cursor: pointer; list-style: none;
}
.faq :where(summary)::-webkit-details-marker { display: none; }
.faq :where(summary)::after {
  content: ""; margin-left: auto;
  width: 10px; height: 10px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.faq :where(details[open] summary)::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq :where(details > *:not(summary)) { padding-bottom: var(--s16); }

/* ── 12. タブ（色だけで状態を伝えない） ─────────── */

.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tab {
  min-height: 48px; padding: 0 var(--s16);
  color: var(--ink-soft);
  border-bottom: 3px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab[aria-selected="true"] {
  color: var(--anchor);
  font-weight: var(--fw-bold);      /* 色＋太字＋下線の3つで示す */
  border-bottom-color: var(--anchor);
}

/* ── 13. モーション（既定は「見えている」側） ────────
   🚨 opacity:0 から始めない。JS が .js-reveal-armed を付けたときだけ隠す。
      motion.js が1.5秒以内に発火しなければ全表示に戻す安全弁つき */

[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-hero) var(--ease-hero),
              transform var(--dur-hero) var(--ease-hero);
}
html.js-reveal-armed [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(var(--move));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* 動きを止めるだけでなく、必ず見えている状態にする */
  html.js-reveal-armed [data-reveal],
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .cta-fixed { transition: none; }
}

/* ── 15. ユーティリティ（最後に置く＝同詳細度なら後勝ち） ──
   base.css の要素セレクタは全部 :where() で (0,1,0) に抑えてあるので、
   ここのクラス1つで確実に上書きできる。 */

.u-wrap    { white-space: normal; overflow-wrap: anywhere; }  /* nowrap の解除 */
.u-nowrap  { white-space: nowrap; }
.u-w-auto  { width: auto; }
.u-w-full  { width: 100%; }

/* 🚨 横スクロールの原因を作らないための保険。
   長い英数字・URL・登録番号はここで折る（日本語は既定で折れる） */
.u-break   { overflow-wrap: anywhere; word-break: normal; }

/* 意図してはみ出しを切る箇所だけに使う（body には絶対に付けない） */
.u-clip    { overflow-x: hidden; }

/* ── 14. 印刷 ─────────────────────────────────── */

@media print {
  .cta-fixed { display: none; }
  body { background: var(--paper); padding-bottom: 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}