/* =========================================================================
   Nexwave 買取査定LP — スタイル
   デザイン元：Claude Design「Nexwave買取査定LP v3.dc.html」
   デザインのインラインstyleをそのままの値でクラスに整理したもの。
   ========================================================================= */

/* ---- デザイントークン ---------------------------------------------------
   デザイン内で使われていた色・寸法をここに集約。
   色を変えたいときは基本このブロックだけを触れば済むようにしている。 */
:root {
  --ink: #1a1a1a;          /* 基調の黒 */
  --yellow: #ffdd00;       /* ブランドイエロー */
  --white: #ffffff;
  --text: #444444;         /* 本文 */
  --muted: #6b6b6b;        /* 補足 */
  --muted-2: #5f5f5f;      /* 注釈 */
  --beige: #f2f0eb;        /* 淡い背景（比較図の左カラムなど） */
  --beige-2: #f7f5f0;      /* さらに淡い背景（囲みブロック） */
  --line: #d8d5cc;         /* 淡い枠線 */
  --line-2: #b8b4a9;       /* 比較図ノードの枠線 */
  --fill-dim: #e9e6de;     /* 破線ノードの塗り */
  --dark-card: #252525;    /* 黒帯の中のカード */
  --dark-line: #3a3a3a;
  --on-dark: #bbbbbb;      /* 黒背景上の本文 */
  --on-dark-note: #9a9a9a; /* 黒背景上の注釈 */
  --on-dark-note-2: #888888;

  --container: 1240px;
  --gutter: 24px;

  --font-jp: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-en: "Montserrat", sans-serif;

  /* ネオブルータリズム風の影（デザインの box-shadow をトークン化） */
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-md: 4px 4px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--yellow);
}

/* ---- ベース ------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-jp);
  -webkit-font-smoothing: antialiased;

  /* 和文の改行位置の調整。
     auto-phrase … 文節（意味のまとまり）で折り返す。「目減りし／ます」のような
                   語中での分割を防ぐ。未対応ブラウザでは normal に落ちるだけ。
     line-break: strict … 禁則処理を厳格に（小さい"っ"や長音符が行頭に来ない） */
  word-break: auto-phrase;
  line-break: strict;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: #000000; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

input, button, textarea, select { font-family: inherit; }
::selection { background: var(--yellow); }

/* hidden 属性を確実に効かせる。
   ブラウザ既定の [hidden]{display:none} は詳細度が低く、
   クラス側で display を指定していると負けてしまうため。 */
[hidden] { display: none !important; }
img { max-width: 100%; }
summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- レイアウト共通 ---------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 全幅の帯（黒背景セクション）。中身だけコンテナ幅に収める */
.band { background: var(--ink); color: var(--white); }
.band__inner { max-width: var(--container); margin: 0 auto; padding: 56px var(--gutter); }

/* 数字・英字は Montserrat */
.num { font-family: var(--font-en); font-weight: 800; }
/* 本文中の数字だけ欧文フォントに差し替える（太さは元のまま） */
.font-en { font-family: var(--font-en); }

/* 見出しの黄色マーカー（下60%だけ塗る） */
.mark { background: linear-gradient(transparent 60%, var(--yellow) 60%); }
.mark--tight { background: linear-gradient(transparent 62%, var(--yellow) 62%); }

/* セクション上部のラベル（■ + 英字キャプション） */
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eyebrow__square { width: 14px; height: 14px; background: var(--yellow); border: 2px solid var(--ink); }
.eyebrow__label {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
}
/* 黒帯の中では枠線なし・文字は黄色 */
.band .eyebrow__square { border: none; }
.band .eyebrow__label { color: var(--yellow); }

.section { padding: 58px 0; }
.section__title { font-size: 34px; font-weight: 900; margin: 0 0 12px; }
/* リード文が続かない見出しは、下に余白を持たせる */
.section__title--gap-lg { margin-bottom: 40px; }
.section__title--gap-md { margin-bottom: 32px; }
.section__lead { color: var(--text); font-size: 16px; margin: 0 0 40px; max-width: 680px; line-height: 1.9; }
.section__lead--narrow { max-width: 640px; }

.note { font-size: 11.5px; color: var(--muted-2); margin: 20px 0 0; line-height: 1.8; }
.band .note { color: var(--on-dark-note); }

/* ---- ボタン ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-weight: 900;
  border-radius: 10px;
  border: 2px solid var(--ink);
  cursor: pointer;
  text-align: center;
}
.btn--primary {
  background: var(--yellow);
  color: var(--ink);
  font-size: 16px;
  padding: 16px 32px;
  box-shadow: var(--shadow-md);
}
.btn--ghost {
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  padding: 16px 26px;
}
.btn--dark {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  font-size: 15px;
  padding: 14px 26px;
}

/* テキストリンク（黄色の下線） */
.link-u { font-weight: 700; border-bottom: 2px solid var(--yellow); }

/* ---- フォーム部品 ------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 700; }
.field--tight { gap: 6px; }
.field--wide { grid-column: 1 / -1; }

.field input,
.field select {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 12px;
  color: var(--ink);
  font-size: 14px;
}

.field input:disabled,
.field select:disabled { background: var(--beige); color: var(--muted); }

/* ラベル文字＋必須バッジをひとつの行にまとめる。
   .field は flex column なので、囲まずに置くとバッジが単独行に伸びてしまう */
.field__label { display: block; }

/* 必須ラベル */
.req {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  background: var(--ink);
  color: var(--white);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* プライバシーポリシー同意 */
.consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
}
.consent input[type="checkbox"]:checked {
  background-color: var(--yellow);
  /* チェックはインラインSVG（data URI）で描く。外部リクエストは増えない。
     ＊data URI 内では CSS 変数が使えないので stroke の色は直値。--ink を
       変えたときはここも合わせて変更する */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.4 3.4L13 4.8' fill='none' stroke='%231a1a1a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 76% 76%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ボットよけ。display:none だと埋めないボットもいるので画面外へ逃がす */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { font-size: 12px; color: var(--muted-2); font-weight: 500; }

/* 送信結果のメッセージ。色は app.js が data-state を切り替える */
[role="status"][data-state="ok"] { color: #146c43; font-weight: 700; }
[role="status"][data-state="error"] { color: #b02a1f; font-weight: 700; }

/* 送信中・送信済みのボタン */
.quick__submit:disabled,
.assess__submit:disabled {
  cursor: not-allowed;
  background: var(--beige);
  color: var(--muted);
  box-shadow: none;
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
  margin: 0 calc(var(--gutter) * -1); /* コンテナのpaddingを打ち消して全幅に */
}
.nav__logo { display: flex; align-items: center; gap: 12px; }
/* width:auto は必須。img の width/height 属性（CLS対策で入れている）が
   presentational hint として CSS width になり、指定しないと潰れる */
.nav__logo img { height: 44px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a { font-size: 14px; font-weight: 700; }
.nav__cta {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 48px;
  align-items: center;
  padding: 60px 0 52px;
}
.hero__badge {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  background: var(--ink);
  color: var(--white);
  padding: 7px 14px;
  border-radius: 6px;
  margin-bottom: 22px;
}
/* 各節を inline-block にして、節の途中では折り返させない */
.hero__badge span { display: inline-block; }
.hero__title {
  font-size: 46px;
  line-height: 1.32;
  font-weight: 900;
  margin: 0 0 22px;
  letter-spacing: .01em;
}
.hero__lead {
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--text);
  margin: 0 0 30px;
  max-width: 520px;
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.hero__checks {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* 簡易査定カード */
.quick {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.quick__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.quick__title { font-size: 22px; font-weight: 900; margin: 0; }
.quick__free {
  font-weight: 700;
  font-size: 12px;
  background: var(--yellow);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.quick__desc { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 20px; }
.quick__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quick__submit {
  grid-column: 1 / -1;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
  font-size: 16px;
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  margin-top: 4px;
}
.quick__note {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--muted-2);
  font-weight: 500;
}

/* =========================================================================
   STATS（黒帯）
   ========================================================================= */
.stats {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat__num { font-family: var(--font-en); font-weight: 800; font-size: 40px; }
.stat__num--yellow { color: var(--yellow); }
.stat__num--white { color: var(--white); }
/* 数字に添える単位（件・年〜）は和文フォントに戻す */
.stat__unit {
  font-family: var(--font-jp);
  color: var(--white);
  font-weight: 700;
  margin-left: 2px;
  font-size: 18px;
}
.stat__unit--lg { font-size: 20px; }
.stat__pct { font-size: 22px; }
.stat__num--stack {
  font-size: 26px;
  color: var(--white);
  line-height: 1.35;
  padding-top: 8px;
}
.stat__label { font-size: 13px; color: var(--on-dark); margin-top: 4px; }
.stat__label--stack { margin-top: 6px; }
.stats__note {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 20px;
  font-size: 11px;
  color: var(--on-dark-note-2);
}

/* =========================================================================
   DIRECT PURCHASE（流通経路の比較図）
   ========================================================================= */
.direct { padding: 80px 0 58px; }
.direct__title { font-size: 34px; font-weight: 900; margin: 0 0 12px; line-height: 1.4; }
.direct__lead { color: var(--text); font-size: 16px; margin: 0 0 36px; max-width: 680px; line-height: 1.9; }
.direct__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }

.route {
  border-radius: 16px;
  padding: 28px;
}
.route--generic { background: var(--beige); border: 2px solid var(--line); }
.route--nexwave { background: var(--white); border: 2px solid var(--ink); box-shadow: var(--shadow-lg); }

.route__title { font-weight: 900; font-size: 15px; margin-bottom: 6px; }
.route--generic .route__title { color: var(--muted); }
.route__sub { font-size: 13px; margin-bottom: 24px; }
.route--generic .route__sub { color: var(--muted-2); }
.route--nexwave .route__sub { color: var(--muted); }

.chain { display: flex; flex-direction: column; gap: 12px; }

/* 経路の各ノード。widthはデザイン通り段々狭くする（=目減りの表現） */
.node {
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 700;
  font-size: 14px;
}
.node--dim { background: var(--white); border: 2px solid var(--line-2); color: var(--muted); width: 100%; }
.node--w88 { width: 88%; }
.node--w74 { width: 74%; }
.node--w60 { width: 60%; }
.node--end {
  width: 60%;
  background: var(--fill-dim);
  border: 2px dashed var(--line-2);
  color: var(--muted-2);
}
.node--seller { width: 100%; background: var(--yellow); border: 2px solid var(--ink); font-weight: 900; }
.node--us { width: 100%; background: var(--ink); color: var(--white); border: 2px solid var(--ink); font-weight: 900; }
.node--net { width: 100%; background: var(--white); border: 2px solid var(--ink); }

/* ノード間の矢印と手数料ラベル */
.hop { display: flex; align-items: center; gap: 10px; padding-left: 14px; }
.hop__arrow { font-size: 18px; }
.hop__label { font-size: 12px; font-weight: 700; }
.route--generic .hop__arrow,
.route--generic .hop__label { color: var(--muted-2); }
.route--nexwave .hop__label { color: var(--ink); }

.callout {
  margin-top: 14px;
  padding: 18px;
  background: var(--beige-2);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.callout__title { font-weight: 900; font-size: 15px; margin-bottom: 6px; }
.callout p { font-size: 13.5px; line-height: 1.85; color: var(--text); margin: 0; }

/* =========================================================================
   WHAT WE BUY
   ========================================================================= */
.buy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.buy-card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 24px;
}
.buy-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.buy-card__title { font-size: 18px; font-weight: 900; margin: 0; }
/* 実績件数バッジ（黄色）と、件数以外の補足ラベル（グレー） */
.buy-card__tag {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  background: var(--yellow);
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.buy-card__meta { font-weight: 700; font-size: 12px; color: var(--muted); white-space: nowrap; }
.buy-card p { color: var(--text); font-size: 14px; line-height: 1.85; margin: 0; }

.buy-card--cta {
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.buy-card--cta .buy-card__title { margin: 0 0 8px; }
.buy-card--cta p { color: var(--ink); margin: 0 0 14px; }
.buy-card--cta a {
  font-weight: 900;
  font-size: 14px;
  border-bottom: 2px solid var(--ink);
  align-self: flex-start;
}

/* =========================================================================
   WHY NEXWAVE
   ========================================================================= */
.reasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reason { border-top: 4px solid var(--yellow); padding-top: 22px; }
/* イラストは3:2。枠を高さ固定にすると横幅が余ってしまうので、
   縦横比を画像に合わせて幅いっぱいまで使う（fit:contain でも余白ゼロになる） */
.reason__figure { aspect-ratio: 3 / 2; margin-bottom: 18px; }
.reason__title { font-size: 20px; font-weight: 900; margin: 0 0 12px; }
.reason p { color: var(--text); font-size: 14.5px; line-height: 1.9; margin: 0; }

/* =========================================================================
   PRICE（黒帯）
   ========================================================================= */
.price { margin: 58px 0; }
.price__title { font-size: 32px; font-weight: 900; margin: 0 0 14px; line-height: 1.4; }
.price__title em { color: var(--yellow); font-style: normal; }
.price__lead { color: var(--on-dark); font-size: 16px; line-height: 1.95; margin: 0 0 40px; max-width: 680px; }
/* カードは2枚（「薄利で回す」「査定の約束」）。
   構造の話はDIRECTセクションの図に任せているのでここには置かない */
.price__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }

.price-card { background: var(--dark-card); border-radius: 14px; padding: 28px; }
.price-card__kicker {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 12px;
  color: var(--yellow);
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.price-card__title { font-size: 20px; font-weight: 900; margin: 0 0 12px; line-height: 1.5; }
.price-card p { color: var(--on-dark); font-size: 14.5px; line-height: 1.9; margin: 0; }
.price-card p.has-figures { margin: 0 0 18px; }

/* 利益率の実数。app.js の SHOW_MARGIN_NUMBERS で表示を切り替える
   （デザイン側 prop "showMarginNumbers" のデフォルトは false = 非公開） */
.figures {
  border-top: 1px solid var(--dark-line);
  padding-top: 16px;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.figure__num { font-family: var(--font-en); font-weight: 800; font-size: 26px; color: var(--white); }
.figure__num--yellow { color: var(--yellow); }
.figure__unit { font-size: 15px; }
.figure__label { font-size: 12px; color: var(--on-dark); margin-top: 2px; }

.price-card--promise {
  background: var(--yellow);
  color: var(--ink);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.price-card--promise .price-card__kicker { color: var(--ink); }
.price-card--promise p { color: var(--ink); margin: 0 0 22px; }
.price-card--promise .btn--dark { margin-top: auto; align-self: flex-start; }

/* =========================================================================
   PROCESS
   ========================================================================= */
.flow__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step {
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 22px;
  background: var(--white);
}
.step__num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 14px;
  border: 2px solid var(--ink);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.step__num--filled { background: var(--yellow); }
.step__title { font-size: 17px; font-weight: 900; margin: 0 0 10px; }
.step p { color: var(--text); font-size: 14px; line-height: 1.85; margin: 0; }
.step p .todo { color: var(--muted-2); }

/* =========================================================================
   TRACK RECORD
   ========================================================================= */
.proof__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 44px; align-items: center; }
.proof__lead { color: var(--ink); font-size: 17px; line-height: 1.95; margin: 0 0 18px; font-weight: 700; }
.proof__body { color: var(--text); font-size: 15px; line-height: 1.95; margin: 0 0 18px; }
.proof__hint { color: var(--muted); font-size: 13.5px; line-height: 1.9; margin: 0; }

.map-card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
}
.map-card__frame {
  position: relative;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--ink);
}
.map-card__legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 6px 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.map-card__legend span { display: flex; align-items: center; gap: 7px; }
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--ink);
  flex: none;
}

/* Leaflet のブランド寄せ（地図をモノトーンにして黄色のドットを立てる） */
.leaflet-tile-pane { filter: grayscale(1) contrast(.88) brightness(1.04); }
.leaflet-container { background: var(--beige); }
.leaflet-control-attribution {
  background: rgba(255, 255, 255, .85) !important;
  color: var(--muted-2) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-bar a {
  background: var(--white) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.leaflet-bar a:hover { background: var(--yellow) !important; }
.leaflet-tooltip {
  background: var(--white) !important;
  border: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 8px !important;
  padding: 8px 11px !important;
}
.leaflet-tooltip-top:before { border-top-color: var(--ink) !important; }

/* =========================================================================
   FREE ASSESSMENT（本フォーム）
   ========================================================================= */
.assess { padding: 64px 0; }
.assess__card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 44px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 44px;
  box-shadow: var(--shadow-lg);
}
.assess__title { font-size: 30px; font-weight: 900; margin: 0 0 16px; line-height: 1.4; }
.assess__lead { color: var(--text); font-size: 15px; line-height: 1.95; margin: 0 0 26px; }
.assess__points { display: flex; flex-direction: column; gap: 12px; font-size: 14px; font-weight: 700; }
.assess__points span { display: flex; gap: 10px; align-items: center; }
.check {
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: none;
}
.assess__figure { aspect-ratio: 3 / 2; margin-top: 26px; }

.assess__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.assess__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.assess__submit {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
  font-size: 16px;
  padding: 16px 36px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq__title { font-size: 34px; font-weight: 900; margin: 0 0 32px; }
.faq__title small { font-size: 16px; font-weight: 700; color: var(--muted); margin-left: 14px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 840px; }

.faq-item {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 18px 22px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
/* ＋ を開いたとき × に見えるよう45度回す（デザインでは静止していた箇所） */
.faq-item__mark {
  font-family: var(--font-en);
  font-weight: 800;
  flex: none;
  transition: transform .18s ease;
}
.faq-item[open] .faq-item__mark { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-item__mark { transition: none; }
}
.faq-item p { color: var(--text); font-size: 14.5px; line-height: 1.9; margin: 14px 0 0; }

/* 未確定箇所の注記（本番公開までに埋める） */
.todo { color: var(--muted-2); font-weight: 700; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { border-top: 2px solid var(--ink); margin-top: 36px; background: var(--white); }
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 44px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px;
}
.footer__logo { height: 52px; width: auto; display: block; margin-bottom: 16px; }
.footer__tagline { color: var(--muted); font-size: 13px; line-height: 1.85; margin: 0; max-width: 360px; }
.footer__cols { display: flex; gap: 52px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; font-weight: 700; }
.footer__head {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted-2);
  margin-bottom: 2px;
}
.footer__col--company { gap: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.7; font-weight: 400; }
.footer__col--company .footer__head { margin-bottom: 4px; }
.footer__company-name { font-weight: 700; color: var(--ink); }
.footer__col--company a { font-weight: 700; margin-top: 2px; }
.footer__bar { background: var(--ink); }
.footer__bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--gutter);
  font-size: 12px;
  color: var(--on-dark);
}

/* =========================================================================
   レスポンシブ
   940px：デザイン側の @media(max-width:940px) をそのまま再現
   640px：スマホ向けに余白と見出しを詰める（実装側で追加）
   ========================================================================= */
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .flow__grid,
  .stats { grid-template-columns: 1fr 1fr; }
  .buy__grid,
  .reasons__grid,
  .price__grid { grid-template-columns: 1fr; }
  .direct__grid,
  .proof__grid,
  .assess__card,
  .quick__form,
  .assess__form { grid-template-columns: 1fr; }
  .hero__title { font-size: 36px; }
  .chain { flex-wrap: wrap; }

  /* リンク群は畳むが、主要CTAは残す（デザインでは両方消えていた） */
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__links { gap: 0; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }

  .nav__logo img { height: 34px; width: auto; }
  .nav__cta { font-size: 13px; padding: 10px 14px; }

  .hero { padding: 40px 0 36px; }
  .hero__title { font-size: 29px; }
  .hero__lead { font-size: 15.5px; }
  .hero__actions .btn { width: 100%; }
  .hero__checks { gap: 10px 18px; }

  .quick,
  .route,
  .price-card,
  .price-card--promise { padding: 22px; }
  .assess__card { padding: 24px; gap: 28px; }

  .section { padding: 44px 0; }
  .direct { padding: 52px 0 44px; }
  .assess { padding: 44px 0; }
  .band__inner { padding: 40px var(--gutter); }

  .section__title,
  .direct__title,
  .faq__title { font-size: 26px; }
  .price__title { font-size: 25px; }
  .assess__title { font-size: 24px; }
  .faq__title small { display: block; margin: 8px 0 0; }

  .stats { grid-template-columns: 1fr; gap: 18px; }
  .stat__num { font-size: 34px; }

  .map-card__frame { height: 300px; }
  .faq-item { padding: 16px 18px; }
  .faq-item summary { font-size: 15px; }

  .footer__cols { gap: 28px; }
}