@charset "UTF-8";
/* =============================================================
   広告予算配分の無償分析LP — デザインシステム（v5）

   2026-09-25（3回目の指示）で確定：
   - ヒーローは支給原画 hero-wide.png を切り出さずそのまま背景に敷く
     （contain で全体を見せ、右寄せでダッシュボードを右半分に置く。
      余白は同じ画像の cover レイヤーで埋める。モバイルは本文下にカード表示）
   - 面は不透明の地色で刻む：白 → 薄青 → 画像 → 中間 → 薄青 → グラデ帯 → 薄グラデ → フッター
   - ページ背景 bg-2 は白ベール74%で淡く沈める（面が不透明なので実質ヒーロー周りだけ）
   - 「なぜ無料なのか」は why-mmm.png を背景に。スクリムは青み（--scrim-rgb）で左側のみ
   - お渡しするもの3カードは支給図版（card-media / card-optimize / card-scenario）
   - いただくもの2カードは本文のみ（明細行は廃止）
   - クロージングは青→紫のグラデーション帯
   - フォームは中央1カラム（見出し・約束チップ・フォームカードを縦に積む）

   厳守：
   - ライト基調固定。prefers-color-scheme / [data-theme] の分岐は書かない
   - 外部CDN・外部フォント不使用（system-ui スタック）
   - 色はすべて :root のトークンに置く（直書きしない）
   - 背景・スクリムの濃さを変えたら node tools/contrast-check.js を必ず流す
   ============================================================= */

:root {
  color-scheme: light;

  /* ---- 面（濃淡のリズム：白 → 薄青 → 画像/グラデ を交互に置く） ---- */
  --paper: #ffffff;
  --card: #ffffff;
  /* 面の色は「暗くする」のではなく「彩度のある淡い色にする」ことで分ける。
     グレーに寄せると沈んで見えるので、青と紫の淡色を交互に置く。
     🔴 隣り合う面の輝度差は 25以上あけること。これを下回ると背景の波に埋もれる。 */
  --band: #cfe1fb;            /* 薄青の帯セクション（いただくもの・輝度223） */
  --band-2: #f2f7ff;          /* ほぼ白に近い青（進め方・輝度247） */
  /* 上の色を rgb 成分でも持つ。下に敷いた波を透かすために半透明で使う */
  --paper-rgb: 255, 255, 255;
  --band-rgb: 207, 225, 251;
  --band-2-rgb: 242, 247, 255;
  --form-top-rgb: 243, 248, 255;
  --form-bottom-rgb: 207, 222, 250;

  /* FAQ 用。帯と同じ明るさで色相だけ紫寄りにし、青い面が2回続かないようにする（輝度217） */
  --band-3: #d4d8f7;
  --band-3-rgb: 212, 216, 247;

  /* 面ごとの「ガラスの濃さ」。背景のベールはここ1枚だけなので、
     画面に出る波の振れ幅 ＝ bg-2 の実効振れ幅 43.9階調 ×（1 − この値）。
     同時に、境界の段差 ＝ 隣り合う面の輝度差 × この値 でもある。
     **波（ノイズ）より段差（信号）を大きく保つ**必要があるため 0.74〜0.78 に置く。
     ここを下げると波は強まるが、セクションの区別が付かなくなる（2026-09-26 の実測）。 */
  --veil-plain: .78;
  --veil-band: .74;
  --veil-sub: .78;
  --veil-alt: .74;
  /* 画像の上に重ねるスクリムの色（青み）。rgba() で不透明度を変えて使うため成分で持つ */
  --scrim-rgb: 227, 236, 251;
  --hero-bg: #eef3fd;         /* ヒーロー画像の下地（画像が読み込まれる前の色） */
  --hero-grad-sp: linear-gradient(160deg, #f4f8ff 0%, #eaf0fd 52%, #ece9fb 100%);  /* モバイルのヒーロー地 */
  --form-grad: linear-gradient(180deg, #f6f9ff 0%, #e7eefb 100%);  /* フォームセクション */
  --tile: #eaf1fd;            /* アイコンタイル */
  --tile-grad: linear-gradient(135deg, #e8f1fe 0%, #efeafe 100%);
  --sunk: #f8fafd;            /* 表ヘッダ等 */
  --input-bg: #fafcff;        /* 入力欄の地 */

  /* ヘッダー・フッター（わずかに青みを持たせて背景と馴染ませる） */
  --hd-grad: linear-gradient(180deg, rgba(243, 248, 255, .95) 0%, rgba(255, 255, 255, .86) 100%);
  --footer-grad: linear-gradient(180deg, #e9effc 0%, #dbe6f8 100%);

  /* ---- 文字 ---- */
  --ink: #13283f;
  --ink-2: #52647a;
  --ink-3: #78869a;
  --ink-inv: #ffffff;

  /* ---- 線 ---- */
  --line: #e7edf6;
  --line-strong: #d6e0ed;
  --input-line: #d9e3f0;

  /* ---- 主色 ---- */
  --blue: #1a6ff5;
  --blue-dark: #1559d6;
  --blue-soft: #6ea6fb;
  --blue-pale: #d7e6fe;
  /* 支給図版（+120% 等のバッジ）の紫。白文字で 4.5:1 を確保できる濃さ */
  --violet: #6c56e6;
  --violet-dark: #5946c9;

  /* ---- ブランド（ロゴの2色）----
     Orceno のデザインシステム（docs/06_BRAND.md）で定義された固定色。
     🔴 マークの比率・色の組み合わせ・指揮棒の角度は変えない取り決め。
     いまはロゴにだけ使っている。LP全体の配色（下の青→紫）とは別物で、
     そちらへ展開するかは未判断。 */
  --brand-navy: #14212B;
  --brand-copper: #B87552;

  /* ---- アクセントのグラデーション（青→紫） ---- */
  --grad: linear-gradient(118deg, var(--blue) 0%, var(--violet) 100%);
  --grad-hover: linear-gradient(118deg, var(--blue-dark) 0%, var(--violet-dark) 100%);
  /* 白文字を大きな面に載せる用（CTA帯）。--grad の青端は白文字で 4.53:1 しかなく、
     幅によって 4.4 台に落ちる。帯だけ一段沈めて 5.4:1 以上を確保する */
  --blue-band: #1562e2;
  --violet-band: #6350dd;
  --grad-band: linear-gradient(118deg, var(--blue-band) 0%, var(--violet-band) 100%);

  /* ---- 図表の系列色 ---- */
  --s1: #2f7cf6;
  --s2: #7b6cf0;
  --s3: #35c1d8;
  --s4: #9bb6e8;
  --s5: #b9a4f2;
  --s-muted: #c3d3e8;
  --pos: #12a07a;
  --neg: #d4543f;
  --warn: #b07d18;

  /* ---- 寸法 ---- */
  --w-page: 1120px;
  --w-wide: 1360px;
  --w-text: 760px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-pill: 999px;

  /* ---- 影（レイヤーを重ねて柔らかく） ---- */
  --sh-1: 0 1px 2px rgba(19, 40, 63, .04);
  --sh-2: 0 1px 2px rgba(19, 40, 63, .04), 0 10px 28px rgba(26, 111, 245, .08);
  --sh-3: 0 4px 12px rgba(19, 40, 63, .05), 0 22px 48px rgba(26, 111, 245, .13);

  /* ---- 文字の太さ（2段に絞る） ---- */
  --fw-head: 600;
  --fw-em: 600;

  /* ---- 書体 ---- */
  --font-sans:
    system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ラテン表記（ロゴ・番号）用の幾何学サンセリフ。
     Gotham は商用フォントのため、ライセンス取得後に @font-face を有効化して差し替える */
  --font-display:
    "Gotham", "Gotham SSm", "Gotham Narrow",
    "Montserrat", "Avenir Next", "Avenir", "Futura",
    system-ui, -apple-system, "Segoe UI", sans-serif;

  /* select の矢印（色 #5a6b80 をSVGに埋め込む。色トークンは :root 集約の原則どおりここに置く） */
  --caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%235a6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Gotham のウェブフォントを購入したら、woff2 を assets/fonts/ に置いて
   このブロックのコメントを外す。--font-display の指定はそのままでよい。
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Medium.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

/* ============================ reset ============================ */

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

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  letter-spacing: .012em;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.55; font-weight: var(--fw-head); color: var(--ink); letter-spacing: 0; }
strong, b { font-weight: var(--fw-em); color: var(--ink); }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.05em; padding-inline-start: 1.35em; }
li { margin-bottom: .5em; }
li:last-child { margin-bottom: 0; }
a { color: var(--blue); text-underline-offset: .22em; }
a:hover { color: var(--blue-dark); }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.num, td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ページ全体の背景。支給シートの bg-2（谷型の波）を**1枚だけ**ビューポートに固定し、
   セクションはその上に半透明の地色を重ねる。こうするとスクロールしても
   背景はセクションごとに切り替わらず、同じ波が通して見える。

   🔴 ここに白のベールを掛けないこと。
   セクション側にも地色のベールが掛かるため二重になり、画像の振れ幅が
   （1-body側）×（1-セクション側）まで落ちて波が見えなくなる。
   実測：白50% × セクション76% のときに振れ幅 43.9 → 5.3 階調で視認不能だった。
   濃さの調整は **セクション側の --veil-* だけ** で行う。
   （変更したら node tools/contrast-check.js を必ず流す） */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--paper);
  background-image: url("img/bg-2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================ layout ============================ */

.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: 22px; }
.wrap--wide { max-width: var(--w-wide); }
.wrap--text { max-width: var(--w-text); }

/* セクションは不透明の地色を持ち、隣り合う面が必ず1段ずれるように並べる。
   白（.sec） → 薄青（.sec--band） → 画像（.sec--why） → 中間（.sec--sub）
   → 薄青 → グラデ帯（.cta-band） → 薄グラデ（.sec--form） → 濃いフッター。
   半透明にすると固定背景（body::before）を拾って白面の色が場所ごとに変わるため、
   面の色は必ず不透明で指定する。 */
/* 面の色（--sec-tint）を 91% のベールとして重ね、その下に背景の波を敷く。
   色は指定どおりのまま、波だけがうっすら透ける。 */
/* セクションは「色つきの半透明ガラス」。下の固定された波が全セクションを
   通して見えるので、背景はスクロールしても切り替わらない。
   面ごとに色と透け具合を変えることでメリハリを作る。 */
.sec {
  position: relative;
  padding-block: clamp(2.8rem, 5.5vw, 4.4rem);
  --sec-veil: var(--veil-plain);
  --sec-tint: var(--paper-rgb);
  background-color: rgba(var(--sec-tint), var(--sec-veil));
  /* 地色の差だけだと、白い面どうし（ヒーロー→お渡しするもの、なぜ無料→進め方）が
     背景の波に紛れて境目を見失う。中立色の細い罫線を1本だけ添えて確実に切る。
     ブランド色のグラデ線は「青い帯」に見えるため使わない（D63） */
  border-top: 1px solid var(--line-strong);
}
.sec--band {
  --sec-veil: var(--veil-band);
  --sec-tint: var(--band-rgb);
}
/* 白と薄青の中間。白い面が続くところに挟んで単調さを切る */
.sec--sub {
  --sec-veil: var(--veil-sub);
  --sec-tint: var(--band-2-rgb);
}
/* 帯と同じ明るさで色相だけ紫寄り。青い帯が2回続くのを避ける */
.sec--alt {
  --sec-veil: var(--veil-alt);
  --sec-tint: var(--band-3-rgb);
}
/* フォームのセクションは、締めとして淡いグラデの地にする */
.sec--form {
  background-color: transparent;
  background-image: linear-gradient(180deg,
    rgba(var(--form-top-rgb), .76) 0%,
    rgba(var(--form-bottom-rgb), .82) 100%);
}

/* 面の切り替わりは、罫線ではなく地色の差だけで示す
   （グラデーションの細線は「青い帯」に見えたため 2026-09-25 に廃止）。
   境界の色差は実測 ΔRGB 17〜21 を保つこと。 */

/* 🔴 面の上端に白のハイライトを掛けないこと。
   境界のすぐ下が白く飛んで、せっかくの地色の段差が消える。
   実測で「いただくもの」の境界の段差が 16.8 → 8.2 階調まで落ちていた。
   板の立体感は、面そのものの色の差で出す。 */
.sec--band > .wrap, .sec--sub > .wrap { position: relative; z-index: 1; }
.sec--tight { padding-block: clamp(2rem, 4.5vw, 3.2rem); }

/* セクションの見出し。中央寄せのものは字面・幅・下線をすべてこれで揃える */
.sec-title {
  text-align: center;
  font-size: clamp(1.3rem, 2.9vw, 1.72rem);
  font-weight: var(--fw-head);
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: .005em;
  /* 主要な見出しが1行に収まる幅。狭い画面では balance で自然な位置に折り返す */
  max-width: 38em;
  margin: 0 auto clamp(1.8rem, 3.6vw, 2.6rem);
  text-wrap: balance;
  word-break: keep-all;
}
/* 見出しであることを示すアクセント。全セクションで同じ形に揃える */
.sec-title::after {
  content: ""; display: block; width: 52px; height: 3px; border-radius: 3px;
  background: var(--grad); margin: .9rem auto 0;
}
.sec-title strong { font-weight: var(--fw-head); color: var(--blue-dark); }
/* 「数値はサンプル」等の注記は法務上も読める必要があるため --ink-2（D24） */
.sec-note {
  text-align: center; font-size: .8rem; color: var(--ink-2);
  margin: 1.2rem auto 0; max-width: 52em; line-height: 1.9;
}

/* ============================ header ============================ */

.hd {
  position: sticky; top: 0; z-index: 40;
  background: var(--hd-grad);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(214, 224, 237, .7);
  box-shadow: 0 1px 12px rgba(19, 40, 63, .04);
}
/* 上端のアクセント（グラデーションの細線） */
.hd::before { content: ""; display: block; height: 3px; background: var(--grad); }
.hd__in { display: flex; flex-wrap: nowrap; align-items: center; gap: 1.2rem; min-height: 64px; }

.hd__logo {
  display: inline-flex; align-items: center;
  color: var(--ink); text-decoration: none;
  /* 中身は画像1枚なので、文字まわりの指定は持たない。下限はマークの幅 */
  min-width: 28px;
  /* マークだけになる狭い幅でも 44px 以上押せるようにする（余白なので見た目は変わらない） */
  padding-block: .35rem;
  min-height: 44px;
}
/* 名前込みの横組みロゴ（支給の透過PNGから生成。比率 4.19:1）。
   🔴 max-width:none を入れる。img,svg{max-width:100%} を受けると、
      親が縮んだときにロゴまで一緒に潰れる。 */
.hd__logoimg { height: 32px; width: auto; display: block; flex: none; max-width: none; }
/* マーク単体。名前込みのロゴが入らない極小幅でだけ出す */
.hd__mark { display: none; width: 28px; height: 28px; max-width: none; flex: none; }

.hd__nav { display: flex; gap: .35rem; margin-left: auto; }
.hd__nav a {
  color: var(--ink); text-decoration: none;
  font-size: .9rem; font-weight: 500; white-space: nowrap;
  padding: .42em .85em; border-radius: var(--r-pill);
  transition: background-color .15s ease, color .15s ease;
}
.hd__nav a:hover { color: var(--blue-dark); background: var(--tile); }

/* 🔴 ヘッダーのCTAは絶対に折り返させない。
   折り返すとボタンの高さが 40px → 60px になり、ヘッダーが2段に割れて見える
   （実測：矢印つき・.9rem では 375px 以下で発生。iPhone SE / mini・Android の 360px が該当）。
   nowrap にしただけでは今度ははみ出すので、下の狭い幅用ブロックで実寸を詰めている。 */
.hd__cta { flex: none; }
.hd__cta .btn { padding: .62em 1.4em; font-size: .9rem; white-space: nowrap; }
.hd__back { margin-left: auto; font-size: .9rem; color: var(--ink-2); text-decoration: none; }
.hd__back:hover { color: var(--blue); }
@media (max-width: 980px) { .hd__nav { display: none; } .hd__cta { margin-left: auto; } }

/* 狭い画面：ロゴ・間隔・CTA を段階的に詰める。必要幅は実測（矢印なし・文字16px時）で
     既定サイズ … 余白22×2 ＋ ロゴ134 ＋ 間隔19 ＋ CTA170 ＝ 367px ＝ 22.9em
     詰めた版   … 余白22×2 ＋ ロゴ119 ＋ 間隔11 ＋ CTA156 ＝ 331px ＝ 20.7em
     マークだけ … 余白22×2 ＋ マーク27 ＋ 間隔11 ＋ CTA156 ＝ 238px ＝ 14.9em

   🔴 切り替えは px ではなく em で書く。
      em のメディアクエリはブラウザの文字サイズ設定に連動するので、
      「画面が狭い」と「文字が大きい」を同じ物差しで扱える。px で書くと、
      文字サイズを 125% にした人のヘッダーだけが破綻する（実測で確認済み）。
      括弧内は文字サイズ既定（16px）のときの画面幅。 */
@media (max-width: 23.44em) {     /* = 375px */
  .hd__in { gap: .7rem; }
  .hd__logoimg { height: 28px; }
  /* 横だけ詰めて縦は保つ。高さが 40px を割るとタップしづらくなる */
  .hd__cta .btn { padding: .72em 1.15em; font-size: .86rem; }
}
@media (max-width: 20.94em) {     /* = 335px */
  /* 名前込みのロゴ（高さ28px＝幅117px）が入らない幅。マークだけに切り替える。
     リンクの読み上げ名は <a> の aria-label が担うので消えない。 */
  .hd__logoimg { display: none; }
  .hd__mark { display: block; }
}
@media (max-width: 14.9em) {      /* = 238px。実機の幅ではなく、文字を大きくした人がここへ来る */
  /* マークとCTAだけでも入らない。ここまで来たら2段に落とす。
     横スクロールが出るより、ヘッダーが2段になるほうがまだ読める。 */
  .hd__in { flex-wrap: wrap; row-gap: .45rem; padding-block: .55rem; }
  .hd__cta { margin-left: 0; width: 100%; }
  .hd__cta .btn { width: 100%; }
}

/* ============================ ボタン ============================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .92em 2em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: .96rem; font-weight: var(--fw-em); line-height: 1.4;
  text-decoration: none; cursor: pointer;
  transition: box-shadow .18s ease, color .18s ease, transform .18s ease, background-color .18s ease;
}
.btn--lg { padding: 1.05em 2.4em; font-size: 1rem; }
.btn--primary { background: var(--blue); background-image: var(--grad); color: var(--ink-inv); box-shadow: var(--sh-2); }
.btn--primary:hover { background-image: var(--grad-hover); color: var(--ink-inv); box-shadow: var(--sh-3); transform: translateY(-1px); }
.btn--ghost { background: var(--card); color: var(--blue); border-color: var(--blue-pale); }
.btn--ghost:hover { background: var(--tile); color: var(--blue-dark); }
/* グラデーション帯の上に置く白ボタン */
.btn--onband { background: var(--card); color: var(--blue-dark); box-shadow: 0 8px 24px rgba(19, 40, 63, .18); }
.btn--onband:hover { color: var(--violet-dark); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(19, 40, 63, .22); }
.btn--wide { width: 100%; }
.btn__arrow { font-size: 1.05em; line-height: 1; }

/* ============================ ヒーロー ============================
   支給画像 hero-wide.png（2137×736・右側にダッシュボードが焼き込まれている）を
   切り出さずそのまま背景に敷き、右端に寄せてダッシュボードを見せる。
   スクリムは文字が載る左側だけに掛け、右側は画像の色をそのまま出す。 */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.6rem, 5vw, 4rem);
  background-color: var(--hero-bg);
  /* 下端の罫線は次のセクション（.sec）の border-top が担うので、ここには引かない */
}

/* contain で画像を切り取らずに全体を出す。
   レターボックスの余白が出ると、元画像の四隅（右上は #edbcfb のマゼンタ）と
   地色の間に継ぎ目が走るため、余白が出ない幅（1220px以上）でだけ横並びにし、
   それ未満では縦積みに切り替えて背景画像そのものを使わない。 */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: url("img/hero-wide.webp");
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
}
/* 文字側のコントラストを確保する白のスクリム。右のダッシュボードには掛けない */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(92deg,
    rgba(255, 255, 255, .84) 0%,
    rgba(255, 255, 255, .66) 40%,
    rgba(255, 255, 255, .12) 62%,
    rgba(255, 255, 255, 0) 76%);
  pointer-events: none;
}

.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center;
}

/* 横並び。ヒーローの高さを画像の比率（2137:736 ≒ 2.9:1）に合わせるので、
   contain のレターボックスが出ない＝継ぎ目も出ない。
   1220px はコピー3段落ぶんの高さ（約415px）が画像比の高さに収まる下限。 */
@media (min-width: 1220px) {
  .hero {
    aspect-ratio: 2137 / 736;
    min-height: 0;
    padding-block: 0;
    display: grid; align-content: center;
  }
  /* 右カラムは背景のダッシュボードの居場所。前面には何も置かない */
  .hero__fig { display: none; }
  /* 背景のダッシュボード（画面の右およそ半分）に文字がかからない幅に収める */
  .hero__copy { max-width: min(540px, 42vw); }
}

/* 1219px 以下：横長画像を背景にすると帯状に縮んで本文の邪魔になり、
   余白を埋めようとすると画像が二重像になる。背景は淡いグラデだけにして、
   画像そのものは本文の下にカードとして全体を見せる。 */
@media (max-width: 1219px) {
  .hero { padding-bottom: clamp(1.6rem, 5vw, 2.2rem); }
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero::before { background-image: var(--hero-grad-sp); }
  .hero::after { background: none; }
  .hero__copy { max-width: none; }
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8rem; font-weight: var(--fw-em); color: var(--violet-dark);
  letter-spacing: .05em; margin-bottom: .9rem;
  padding: .34em 1em;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--blue-pale);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}
.hero__h1 {
  font-size: clamp(1.56rem, 3.6vw, 2.2rem);
  line-height: 1.42; letter-spacing: -.016em; margin-bottom: .95rem;
}
.hero__h1 em {
  font-style: normal; color: var(--blue);
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 説明文は段落をいくつか重ねる。段落間は行間より広く、文の塊が見えるようにする。
   行間と段落間は、コピー全体の高さが背景画像の比率（34.4vw）に収まる範囲に抑える */
.hero__body { font-size: .95rem; line-height: 1.9; color: var(--ink-2); max-width: 32em; }
.hero__body p { margin-bottom: .8em; }
.hero__body p:last-child { margin-bottom: 0; }

.hero__cta {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
  /* 直前の段落は p:last-child で下マージンが消えるため、こちら側で間隔を作る */
  margin-top: 1.5rem;
}

/* モバイルで本文下に置く画像（PCでは非表示） */
.hero__fig { position: relative; margin: 1.6rem 0 0; }
.hero__fig img {
  display: block; width: 100%;
  border-radius: var(--r-m);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--sh-3);
}
/* 画像に数値が焼き込まれているので、サンプルである旨を常時出す */
.hero__imgnote {
  position: absolute; right: 24px; bottom: 12px; z-index: 1;
  margin: 0;
  font-size: .74rem; color: var(--ink-2); letter-spacing: .02em;
}
@media (max-width: 1219px) {
  /* static にすると positioned な .hero::before の下に潜って見えなくなるため relative。
     🔴 relative に変えるときは right / bottom を必ず auto に戻す。残したままだと
        相対配置のオフセットとして効き、左へ24px・上へ12pxずれて画面外まではみ出す。
     色は --ink-2 のまま（この幅の地はヒーローの淡いグラデなので実測 4.9:1）。 */
  .hero__imgnote {
    position: relative; right: auto; bottom: auto;
    text-align: right; padding: .5rem 22px 0;
    /* 🔴 注記は .wrap の外（.hero 直下）に置かれている。padding だけだと
       ビューポート基準になり、.wrap が中央寄せになる 1121px 以上で
       説明対象の画像より最大49.5px 右に取り残される。.wrap と同じ箱にする。 */
    max-width: var(--w-page); margin-inline: auto;
  }
}

/* 旧テンプレの見出しブロック（サブページで使用）。LP本体では使わない */
.sh { margin-bottom: 1.6rem; }
.sh__t { font-size: clamp(1.22rem, 2.7vw, 1.5rem); }
.sh__lead { margin-top: .8rem; color: var(--ink-2); max-width: var(--w-text); }

/* ============================ カード ============================ */

.grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* いただくものの2カードは、狭めの画面で早めに1カラムへ */
@media (max-width: 880px) { .grid--need { grid-template-columns: minmax(0, 1fr); } }

.card {
  --card-pad: clamp(1.3rem, 2.6vw, 1.8rem);
  --card-r: 18px;
  background: var(--card);
  border: 1px solid rgba(214, 224, 237, .55);
  border-radius: var(--card-r);
  padding: var(--card-pad);
  box-shadow: var(--sh-2);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); border-color: var(--blue-pale); }
.card--flat { box-shadow: var(--sh-1); }
.card--flat:hover { transform: none; box-shadow: var(--sh-1); }

/* アイコンの右にタイトルを置き、1行で上下センターに揃える */
.card__hd { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.card__t { font-weight: var(--fw-head); color: var(--ink); line-height: 1.6; font-size: clamp(1rem, 1.6vw, 1.12rem); }
.card__hd .card__t { font-size: clamp(1rem, 1.6vw, 1.08rem); }
.card__body { font-size: .9rem; line-height: 1.95; color: var(--ink-2); margin-top: .9rem; }
.card__note { font-size: .85rem; line-height: 1.9; color: var(--ink-2); margin-top: .8rem; }
.card__desc { font-size: .88rem; line-height: 1.9; color: var(--ink-2); margin: .7rem 0 1rem; }

/* カード内の図版（切り出したチャート。白地なのでカードに溶ける） */
.card__fig { margin: 0; }
.card__fig img { display: block; width: 100%; border-radius: var(--r-s); }

/* カード下部に置く図版。左右のカードで同じ大きさに見えるよう、
   画像は prep-assets.py が同一寸法（900×506）に揃えて書き出している。
   カード全幅に広げると主張が強すぎるので、幅を抑えて中央に置く */
.card__fig--wide {
  margin: 1.5rem auto 0;
  width: min(100%, 400px);
}
.card__fig--wide img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-m);
}
/* 本文の長さが違っても図版の位置が揃うように、カードを縦フレックスにして下端に寄せる */
.grid--need .card { display: flex; flex-direction: column; }
.grid--need .card__fig--wide { margin-top: auto; }
/* いただくものカードの見出しは、アイコンごと中央に揃える */
.grid--need .card__hd { justify-content: center; text-align: center; }

/* アイコンタイル */
.tile {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--tile);
  background-image: var(--tile-grad);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 13px;
  box-shadow: var(--sh-1);
}
.tile img { width: 30px; height: 30px; display: block; }
.tile--lg { width: 56px; height: 56px; border-radius: 15px; }
.tile--lg img { width: 38px; height: 38px; }

/* ============================ 箇条書き ============================ */

.list { list-style: none; padding: 0; margin: 0; }
.list > li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; line-height: 1.85; }
.list > li:last-child { margin-bottom: 0; }
.list > li::before {
  content: ""; position: absolute; left: .1rem; top: .72em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--grad);
}
.list--check > li::before {
  background: none; left: .05rem; top: .58em;
  width: .72rem; height: .4rem;
  border-left: 2.5px solid var(--pos); border-bottom: 2.5px solid var(--pos);
  border-radius: 0; transform: rotate(-45deg);
}
.list--x > li::before {
  background: none; left: .1rem; top: .78em;
  width: .6rem; height: 0; border-top: 2.5px solid var(--neg); border-radius: 0;
}

/* ============================ バッジ・帯 ============================ */

.badge {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--tile); border: 1px solid var(--blue-pale);
  border-radius: var(--r-m); padding: .85rem 1.15rem;
  font-weight: var(--fw-em); color: var(--ink); line-height: 1.7;
}
.badge img { width: 26px; height: 26px; flex: none; }

.callout {
  background: rgba(243, 247, 255, .85); border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: .95rem 1.2rem; font-size: .95rem; color: var(--ink-2);
}

/* ============================ なぜ無料なのか ============================
   支給図版 why-mmm.png をセクションの背景に敷き、左側に白のスクリムを
   重ねて文字を読ませる。カードは置かない。 */

.sec--why {
  position: relative; overflow: hidden;
  background-color: var(--band);
  padding-block: clamp(3.2rem, 7vw, 5.4rem);
  /* 上端はグラデーションの線（共通ルール）。下端は次のセクションの上端の線が担う */
}
.sec--why::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("img/why-mmm.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
/* スクリムは文字が載る左側だけに絞り、色は純白ではなく青み（--scrim）にする。
   純白だと左半分が下の白セクションと同じ色になり、画像が「帯」に見えなくなる。
   ヒーローと同じ考え方で、左端はほぼ不透明にして本文が波と重ならないようにし、
   右へ向かって透明に抜く。本文の右端（約42%）までは濃さを保つこと。 */
.sec--why::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(92deg,
    rgba(var(--scrim-rgb), .98) 0%,
    rgba(var(--scrim-rgb), .96) 32%,
    rgba(var(--scrim-rgb), .86) 44%,
    rgba(var(--scrim-rgb), .40) 60%,
    rgba(var(--scrim-rgb), 0) 78%);
  pointer-events: none;
}
.sec--why > .wrap { position: relative; z-index: 1; }
/* 狭い画面では文字が全幅に載るので均一に敷く。
   🔴 縦方向に薄くしていく敷き方はここでは使えない。この幅では本文がセクションの
      6%→94% を占め、「画像だけが見える余白」が存在しない。薄くなる下端に最後の
      数行が載り、その真下が図版の濃い青（実測 rgb(16,142,246) 相当）だと
      4.05:1 まで落ちる。濃さを一定にして、画像は地紋として残す（振れ幅 約17階調）。 */
/* 〜680px：本文がセクション幅いっぱい（6%→94%）に載り、図版だけが見える余白が無い。
   濃さを一定にして全面を覆う。あわせて図版の見せ方を右寄せから中央に変える。
   右端には図版の濃い青が来ていて、そこに本文が載ると veil .82 でも 4.47:1 しか
   出ない。中央なら同じ濃さで 4.91:1 になり、ベールを薄いまま（＝画像をよく見せた
   まま）にできる（実測・320/360/390px）。 */
@media (max-width: 680px) {
  .sec--why::before { background-position: center center; }
  .sec--why::after { background: rgba(var(--scrim-rgb), .84); }
}
/* 681〜880px：本文は .why__copy の max-width: 37em（実測約592px）で頭打ちになり、
   右側に本文が一行も載らない帯ができる。そこまで一律に覆うと図版が無地の淡い青に
   見えてしまう（実測：右帯の輝度の振れが 175→30 階調）。縦に薄くしていく敷き方に戻す。 */
@media (min-width: 681px) and (max-width: 880px) {
  .sec--why::after {
    background: linear-gradient(180deg,
      rgba(var(--scrim-rgb), .82) 0%,
      rgba(var(--scrim-rgb), .66) 66%,
      rgba(var(--scrim-rgb), .38) 100%);
  }
}
/* スマホでは 1400px 幅の原寸（63KB）は要らない。760px 版に差し替えて 40KB 削る。
   ブラウザはマッチしたメディアクエリ側の画像しか取りに行かないので、二重取得にはならない。 */
@media (max-width: 760px) {
  .sec--why::before { background-image: url("img/why-mmm-760.webp"); }
}

.why__copy { max-width: 37em; }
.why__q {
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.55;
  margin-bottom: 1.2rem;
}
.why__q::after {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 3px;
  background: var(--grad); margin-top: .8rem;
}
.why__copy > p { font-size: .95rem; line-height: 2.05; }
/* 「社名・生データ・実額を外部に公開しません。」はカードにせず、本文下の注釈として置く。
   字面は本文（.why__copy > p）と完全に揃える */
.why__note {
  margin-top: 1.4rem;
  font-size: .95rem; line-height: 2.05; color: var(--ink-2);
}

/* ============================ 進め方（5ステップ） ============================ */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: stretch; }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 980px) { .steps, .steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps, .steps--5 { grid-template-columns: minmax(0, 1fr); } }

.step {
  position: relative; background: var(--card);
  border: 1px solid rgba(214, 224, 237, .55);
  border-radius: var(--r-m); padding: 1.25rem 1rem 1.15rem; text-align: center;
  box-shadow: var(--sh-1);
}
/* 番号は囲まず、グラデーションを文字に流し込むだけにする */
.step__n {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .08em;
  line-height: 1;
  color: var(--blue);
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* アイコンは従来の約2倍。ステップの主役にする */
.step .tile { width: 84px; height: 84px; border-radius: 22px; margin: .9rem auto .75rem; }
.step .tile img { width: 56px; height: 56px; }
.step__t { font-weight: var(--fw-head); color: var(--ink); font-size: .93rem; }
.step__d { font-size: .8rem; color: var(--ink-2); margin-top: .35rem; line-height: 1.7; }
/* カード間の矢印（横並びのときだけ） */
.step + .step::before {
  content: ""; position: absolute; left: -.62rem; top: 50%;
  width: .42rem; height: .42rem; margin-top: -.21rem;
  border-top: 2px solid var(--blue-soft); border-right: 2px solid var(--blue-soft);
  transform: rotate(45deg);
}
@media (max-width: 980px) { .step + .step::before { display: none; } }
/* 1カラムになる幅では、縦積みの大きなカードではなく左寄せのタイムライン型に圧縮する */
@media (max-width: 520px) {
  .steps, .steps--5 { gap: .55rem; }
  .step {
    display: grid; grid-template-columns: 52px minmax(0, 1fr);
    column-gap: .95rem; align-items: center;
    text-align: left; padding: .95rem 1.1rem;
  }
  .step__n { grid-column: 2; text-align: left; margin-bottom: .15rem; }
  .step .tile { grid-row: 1 / span 3; width: 52px; height: 52px; border-radius: 15px; margin: 0; }
  .step .tile img { width: 34px; height: 34px; }
  .step__t { font-size: .95rem; }
  .step__d { margin-top: .1rem; }
}

/* ============================ FAQ ============================ */

.faq { display: grid; gap: .7rem; }
.faq__i {
  background: var(--card);
  border: 1px solid rgba(214, 224, 237, .55);
  border-radius: var(--r-m);
  box-shadow: var(--sh-1);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.faq__i:hover { border-color: var(--blue-pale); box-shadow: var(--sh-2); }
.faq__q {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.1rem 1.35rem; cursor: pointer; font-weight: var(--fw-head); color: var(--ink);
  line-height: 1.7; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
/* ＋マークは淡いタイルの円に載せる */
.faq__q::after {
  content: ""; flex: none; margin-left: auto; margin-top: .18em;
  width: 1.55rem; height: 1.55rem; border-radius: var(--r-pill);
  background:
    linear-gradient(var(--blue), var(--blue)) center/44% 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center/2px 44% no-repeat,
    var(--tile);
  transition: transform .18s ease;
}
.faq__i[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 1.35rem 1.25rem; color: var(--ink-2); }

/* ============================ クロージング（グラデーション帯） ============================ */

.cta-band {
  position: relative; overflow: hidden;
  background: var(--blue-band);
  background-image: var(--grad-band);
  padding-block: clamp(3rem, 6.5vw, 4.6rem);
}
/* 🔴 帯の中に白い光彩（radial-gradient）を置かない。
   光の位置は帯の幅と高さで動くので、どこかの幅で必ず見出しの真後ろに来る。
   実測：濃さ .22 で 390px が 4.49:1、.14 に落としても 1440px で 4.43:1。
   帯は無地のグラデだけにして、明るさを設計値どおりに固定する。 */
.cta-band .wrap { position: relative; z-index: 1; }
.close { text-align: center; }
.cta-band__t {
  color: var(--ink-inv);
  font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.7;
  margin-bottom: 1.6rem;
  text-wrap: balance;
  /* 語中で折り返さない。折り返し位置はHTML側の <wbr> で指定する */
  word-break: keep-all;
}

/* ============================ お問い合わせ ============================ */

/* 見出し・リード・箇条書きを中央に置き、その下にフォームを1枚だけ置く */
.contact { max-width: 900px; margin-inline: auto; }
.contact__intro { text-align: center; margin-bottom: clamp(1.6rem, 3.4vw, 2.2rem); }
.contact__card {
  background: var(--card);
  border: 1px solid rgba(214, 224, 237, .55);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2.3rem);
  box-shadow: var(--sh-3);
}
.contact__lead { color: var(--ink-2); max-width: 46em; margin-inline: auto; }

/* 3つの約束を横並びのチップにして、中央寄せのリズムを保つ */
.contact__points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem;
  list-style: none; padding: 0; margin: 1.2rem 0 0;
}
.contact__points li {
  margin: 0;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .4em 1em;
  font-size: .86rem; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--blue-pale);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}
.contact__points li::before {
  content: ""; flex: none;
  width: .68rem; height: .38rem;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg) translateY(-.1em);
}

/* ============================ フォーム ============================ */

.form { display: grid; gap: 1.05rem; }
/* 2カラム（会社名/担当者名、メール/電話）。全幅の項目は .field--full */
.form--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem 1.1rem; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form--grid { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: .45rem; align-content: start; }
.field__l { font-size: .84rem; font-weight: var(--fw-head); color: var(--ink); display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.req { font-size: .66rem; font-weight: var(--fw-em); padding: .14em .6em; border-radius: var(--r-pill); background: var(--grad); color: var(--ink-inv); }
.opt { font-size: .66rem; font-weight: var(--fw-em); padding: .14em .6em; border-radius: var(--r-pill); background: var(--sunk); color: var(--ink-3); border: 1px solid var(--line); }
.field__h { font-size: .78rem; color: var(--ink-2); line-height: 1.7; }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"], select, textarea {
  width: 100%; padding: .68em .9em; font: inherit; font-size: .9rem; line-height: 1.6;
  color: var(--ink); background: var(--input-bg);
  border: 1px solid var(--input-line); border-radius: var(--r-s);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* 🔴 iOS は font-size が 16px 未満の入力欄にフォーカスすると自動でズームする。
   ズーム後は自分で戻さないと元に戻らないので、タッチ端末では必ず 16px 以上にする。
   （maximum-scale で抑える手もあるが、拡大を封じるのはアクセシビリティ上よくない） */
@media (max-width: 1024px), (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="url"], input[type="tel"], select, textarea {
    font-size: 16px;
  }
}

/* 入力エラー。送信前に気づけるよう、欄の直下に理由を出す */
.field__err {
  margin: 0; font-size: .82rem; line-height: 1.6; color: var(--neg);
  display: flex; align-items: flex-start; gap: .35em;
}
.field__err::before { content: "！"; font-weight: var(--fw-em); flex: none; }
[aria-invalid="true"] { border-color: var(--neg); background: var(--card); }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(212, 84, 63, .18); }
.choice--err { border-color: var(--neg); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--blue-soft); }
input:focus, select:focus, textarea:focus {
  border-color: var(--blue); background: var(--card);
  box-shadow: 0 0 0 3px var(--blue-pale); outline: none;
}
select {
  appearance: none; -webkit-appearance: none;
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-position: right .95em center;
  background-size: 13px 8px;
  padding-right: 2.6em;
}
textarea { min-height: 5.6rem; resize: vertical; }

.form__legal { font-size: .82rem; line-height: 1.9; color: var(--ink-2); margin: 0; }
/* リンク名（ページ名）が行中で泣き別れしないようにする */
.form__legal a { white-space: nowrap; }

.choices { display: grid; gap: .5rem; }
.choice {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .75rem 1rem; border: 1px solid var(--input-line); border-radius: var(--r-s);
  background: var(--input-bg); cursor: pointer; line-height: 1.7; font-size: .9rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--blue-soft); background: var(--card); }
.choice input { margin-top: .4em; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--blue); }

.purpose {
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 1rem 1.15rem;
  font-size: .88rem; line-height: 1.85; color: var(--ink-2);
}
.hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.btn[disabled] { cursor: not-allowed; transform: none; }
/* 無効状態はグラデを半透明にせず、読める中立色に落とす（壊れた見た目にしない） */
.btn--primary[disabled] {
  opacity: 1;
  background: var(--line);
  background-image: none;
  border-color: var(--line-strong);
  color: var(--ink-2);
  box-shadow: none;
}

/* ============================ フッター ============================ */

.ft {
  background: var(--footer-grad);
  padding-block: 2.2rem 2.4rem;
  font-size: .88rem;
  color: var(--ink-2);
  position: relative;
}
/* ヘッダーと対になるグラデーションの細線 */
.ft::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: .85; }

.ft__in {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  /* 🔴 center ではなく baseline。リンクの文字のベースラインが
     ロゴの下辺にそろう（center だと5pxほど浮いて落ち着かない）。
     画像のベースラインは下端なので、これでロゴの下側のラインに一致する。 */
  align-items: baseline;
}
.ft__logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.ft__logoimg { height: 28px; width: auto; display: block; flex: none; max-width: none; }
.ft__mark { display: none; }

.ft__nav { display: flex; flex-wrap: wrap; gap: .4rem .5rem; list-style: none; padding: 0; margin: 0; }
.ft__nav a {
  color: var(--ink-2); text-decoration: none; font-size: .86rem;
  padding: .3em .8em; border-radius: var(--r-pill);
  transition: background-color .15s ease, color .15s ease;
}
.ft__nav a:hover { color: var(--blue-dark); background: rgba(255, 255, 255, .75); }

.ft__copy {
  margin-left: auto; font-family: var(--font-display);
  font-size: .78rem; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap;
}
@media (max-width: 760px) { .ft__copy { margin-left: 0; } }
/* 🔴 ブランド名は仮称。確定名が長いと「© 2026 <名前>」が nowrap のまま
   画面からはみ出して、ページ全体に横スクロールが出る（実測：240px幅で 302px）。
   狭い画面では折り返しを許す。 */
@media (max-width: 420px) { .ft__copy { white-space: normal; overflow-wrap: anywhere; } }

.ft__legal {
  margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(19, 40, 63, .12);
  font-size: .78rem; line-height: 1.9; color: var(--ink-2);
}
.ft__legal p { margin-bottom: .4em; }
.ft__legal p:last-child { margin-bottom: 0; }

/* ============================ 追従CTA（モバイル） ============================ */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(16, 35, 61, .08); display: none;
}
@media (max-width: 760px) { .sticky-cta { display: block; } body { padding-bottom: 4.8rem; } }

/* ============================ 出現アニメーション ============================
   lp.js が .reveal を持つ要素を IntersectionObserver で監視し、
   入ったら .is-in を付ける。reduced-motion では即時表示。 */

/* スマホでは出現アニメーションを使わない。
   指で弾くスクロールが速く、白紙のまま通り過ぎるリスクのほうが大きい。
   （JS側にも取り残し防止を入れてあるが、そもそも隠さないのが確実） */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ============================ スマホ（X広告の主戦場） ============================
   流入の大半がスマホなので、ここは「PCの縮小版」ではなく独立した見せ方として詰める。
   9.2画面ぶんあったスクロール量を削り、読めない図版を出さないのが方針。
   ========================================================================= */

@media (max-width: 760px) {
  /* --- 余白を詰める。PCと同じ余白だとスクロールだけが増える --- */
  .sec { padding-block: 2.2rem; }
  .sec--why { padding-block: 2.4rem; }
  .sec-title { margin-bottom: 1.4rem; font-size: 1.24rem; }
  .sec-title::after { margin-top: .7rem; }
  .sec-note { margin-top: .9rem; }

  /* --- お渡しするもの：3枚のチャートはこの幅では軸も凡例も読めない。
         読めない図を並べて1,400px使うより、見出しと説明だけを残す --- */
  #deliver .card__fig { display: none; }
  #deliver .card { padding: 1.1rem 1.2rem; }
  #deliver .card__desc { margin-bottom: 0; }
  .grid { gap: .7rem; }

  /* --- いただくもの：こちらは図が概念イラストなので小さくても伝わる。残す --- */
  .grid--need .card { padding: 1.2rem; }
  .card__fig--wide { margin-top: 1.1rem; width: min(100%, 320px); }

  /* --- 進め方：5枚のカードを1本の線でつないだ縦タイムラインに --- */
  .steps, .steps--5 { gap: 0; }
  .step {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    padding: .55rem 0 .55rem 3.4rem;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
  }
  .step + .step::before { display: none; }
  /* 番号を丸チップにして、縦線でつなぐ。
     🔴 grid-column は必ず auto に戻す。520px 版の `grid-column: 2` が残ると、
        1カラムになった .step に「暗黙の2列目」（幅0・右端）が生まれ、絶対配置の
        基準がそこになって番号が画面外（右へ+30px）へ飛ぶ。 */
  .step__n {
    position: absolute; grid-column: auto; left: 0; top: .5rem;
    width: 30px; height: 30px; display: grid; place-items: center;
    font-size: .8rem; color: var(--ink-inv);
    background: var(--grad); border-radius: var(--r-pill);
    -webkit-text-fill-color: var(--ink-inv);
  }
  .step:not(:last-child)::after {
    content: ""; position: absolute; left: 14px; top: 2.5rem; bottom: -.2rem;
    width: 2px; background: var(--blue-pale);
  }
  .step .tile { display: none; }
  /* 段落の既定マージン（約16px）が残ると、説明文が自分の見出しより次の番号に
     近く見えて、どのステップの説明か読み取れなくなる */
  .step__t { font-size: .95rem; margin-bottom: 0; }
  .step__d { margin-top: .1rem; font-size: .8rem; }

  /* --- FAQ・フォーム：詰める --- */
  .faq__q { padding: .9rem 1.1rem; font-size: .93rem; }
  .faq__a { padding: 0 1.1rem 1rem; }
  .contact__card { padding: 1.2rem 1.1rem; }
  .form--grid { gap: .85rem; }
  .contact__intro { margin-bottom: 1.3rem; }

  /* --- ヒーロー：ダッシュボードを大きく見せ、下の追従CTAに隠れないようにする --- */
  .hero__fig { margin-top: 1.2rem; }
  .hero__body { font-size: .92rem; line-height: 1.85; }
  .hero__body p { margin-bottom: .7em; }
}

@media print { .sticky-cta, .hd { display: none !important; } }