/* ══════════════════════════════════════════════════════════════
   STRATEXS ランディングページ専用のスタイル

   **読み込み順が命。** landing.html では

       <link rel="stylesheet" href="style.css">      ← 先
       <link rel="stylesheet" href="landing.css">    ← 後（このファイル）

   の順で読む。**この順を入れ替えないこと。** 同じ詳細度の規則が
   両方にあり、ここが後に来ることで勝っている。

   もともと landing.html の <style> に直書きしていたものを、
   2026-08-27 に外へ出した（利用者の指示「lpトップのソースが
   CSS直書きでよくないのでファイルにわけて」）。
   Jinja の式もコメントも1つも含まれていなかったので、
   中身は1文字も変えずに移してある。

   末尾の「LP 組版」層は**この上のどの規則よりも後**に置くこと。
   前へ動かすと、同じ詳細度の規則に後勝ちで負けて静かに無効になる。
   ══════════════════════════════════════════════════════════════ */

.lp { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
/* 上下だけを指定する。`padding: 64px 0` と書くと、同じ要素が持つ .lp の
   `padding: 0 20px` をショートハンドが丸ごと上書きし、左右の余白が 0 になる
   （同じ詳細度で後勝ち）。狭い画面では文字が画面の端に貼り付く */
.lp-section { padding-top: 64px; padding-bottom: 64px; }
.lp-eyebrow { color: var(--text-muted); font-family: var(--font-display); font-size: 12px;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.lp-h2 { font-size: 34px; font-weight: 800; text-align: center; margin: 10px 0 10px;
  letter-spacing: -0.01em; color: var(--black); }
.lp-lead { text-align: center; color: var(--text-sub); font-size: 15px; line-height: 1.8; margin-bottom: 40px; }

/* Hero（ダーク × ゴールド） */
.hero2 { background: #0E0E0C; color: #fff; position: relative; overflow: hidden; }
.hero2::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(212,170,24,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px; pointer-events: none; }
.hero2::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 40%, transparent 40%, rgba(0,0,0,0.55) 100%); pointer-events: none; }
.hero2-inner { max-width: 1080px; margin: 0 auto; padding: 76px 20px 68px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
  position: relative; z-index: 1; }
.hero2-eyebrow { color: #8C8C8C; font-size: 12px; font-weight: 600; letter-spacing: 2.5px; margin-bottom: 16px; }
.hero2-title { color: #fff; font-family: var(--font-display); font-size: 58px; font-weight: 650; letter-spacing: -1.5px; line-height: 1.12; margin: 0 0 22px; }
.hero2-title .accent { color: var(--gold-light); }   /* 唯一の強調 */
/* h1 の中に置く説明行。**別要素に出さないのは、検索結果のタイトルと
   着地したページの最初の見出しを同じ言葉で繋ぐため**。コピー
   「競合を、丸裸に。」は大きいまま残し、視覚の主役は変えない */
.hero2-title .hero2-lede { display: block; font-family: var(--font-sans);
  font-size: 19px; font-weight: 600; letter-spacing: 0; line-height: 1.6;
  color: #D8D8D2; margin-top: 18px; }
.hero2-desc { color: #A6A6A6; font-size: 15.5px; line-height: 2.05; margin: 0 0 30px; }
.hero2-desc strong { color: #E8E8E2; font-weight: 700; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* トライアルの条件はボタンの真下に置く。料金セクションまで
   スクロールしないと回数と解約条件が分からない状態だった */
.hero-trial { color: #8C8C8C; font-size: 12.5px; line-height: 1.75; margin: 14px 0 0; }
.hero-trial strong { color: #C9C9C2; font-weight: 600; }
.cta-btn { padding: 15px 32px; border-radius: 10px; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; border: none; transition: .15s; }
.cta-btn.primary { background: var(--black); color: #fff; }   /* ゴールド地は白黒どちらも読みにくい */
.cta-btn.primary:hover { background: var(--black-mid); color: #fff; }
.cta-btn.ghost { background: #fff; color: var(--text); border: 1px solid #ddd; }
.cta-btn.ghost:hover { border-color: var(--black); color: var(--black); }
.hero2 .cta-btn.primary { background: #fff; color: var(--black); }
.hero2 .cta-btn.primary:hover { background: #E8E8E8; color: var(--black); }
.hero2 .cta-btn.ghost { background: transparent; color: #fff; border-color: #3A3A3A; }
.hero2 .cta-btn.ghost:hover { border-color: #fff; color: #fff; }
.hero2-stats { display: flex; gap: 32px; margin-top: 36px; padding-top: 24px; border-top: 1px solid #2A2A2A; }
.hero2-stat-num { color: #fff; font-family: var(--font-display); font-size: 24px; font-weight: 650; letter-spacing: -0.5px; }
.hero2-stat-label { color: #8C8C8C; font-size: 12px; margin-top: 2px; }
.hero2-visual { position: relative; }
.hero2-visual svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 48px rgba(0,0,0,0.5)); }

/* Steps（専用クラス名で style.css の .step と衝突回避） */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-step { position: relative; background: var(--bg-card); border: 1px solid #ececec; border-radius: 16px; padding: 34px 26px 28px; overflow: hidden; transition: .18s; }
.lp-step:hover { border-color: var(--border-mid); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
.lp-step-n { position: absolute; top: 10px; right: 20px; font-size: 64px; font-weight: 650; line-height: 1; color: #E4E4E4; letter-spacing: -3px; user-select: none; }
.lp-step-title { font-size: 20px; font-weight: 650; margin: 0 0 10px; position: relative; }
.lp-step-title::before { content: ""; display: block; width: 34px; height: 3px; background: var(--black); border-radius: 2px; margin-bottom: 16px; }
.lp-step-desc { color: var(--text-sub); font-size: 14px; line-height: 1.85; margin: 0; }

/* Features */
.feat-band { background: var(--bg-card); border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat { border: 1px solid #eee; border-radius: 12px; padding: 20px; }
/* h3 に昇格したので margin-top も潰す。ブラウザ既定の 1em が残ると
   カード内に余白が入り、9枚の高さが揃わなくなる */
.feat-name { font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.feat-name .dot { color: var(--black); margin-right: 6px; }
.feat-desc { color: var(--text-sub); font-size: 13px; line-height: 1.7; }

/* 出したあとの持ち出し方（PPTX / PDF / .md / 画面9タブ）。
   3つとも実装済み（templates/index.html の pdfBtn / mdBtn / exportBtn）
   なのに、LPは PPTX しか書いていなかった */
.outs { margin: 26px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.out { border: 1px solid #eee; border-radius: 12px; padding: 16px 18px; background: #fff; }
.out-name { font-weight: 600; font-size: 14px; margin: 0 0 5px; }
.out-name .tag { display: inline-block; background: var(--black); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 5px; margin-right: 8px; vertical-align: 1px; }
.out-desc { color: var(--text-sub); font-size: 13px; line-height: 1.7; margin: 0; }
/* 本文中のリンク。付けないとブラウザ既定の青のままで、
   作り込んだ面の中で1か所だけ浮く。

   **`--gold` は使わない。** 白地で 3.5:1 しかなく、13pxの本文では
   AA(4.5:1) に届かない（実測）。この配色にはそのための変数
   `--gold-on-glass`（#866C15）が既にある。特商法・プライバシー・
   利用規約への導線なので、読めないままにしない。 */
.out-desc a { color: var(--gold-on-glass); text-underline-offset: 2px; }

/* 「向いている人」＝並列。順番が無いので 01/02/03 は出さず、
   立場の札をカードの主役にする。地の色も帯で変える。

   **`.tag-role` は `.out-name .tag`（98行）より後ろに置くこと。**
   詳細度が同じ (0,2,0) なので、前に置くと font-size:10.5px に負けて
   札が大きくならない。

   `--gold-pale` は style.css で3回定義されているが、暗い方の2つは
   `header`（今日の暗いヘッダー）と `body.admin-dark` に閉じている。
   LPは `<body>` 素で prefers-color-scheme の定義も無いので常に #F8F4E8。

   **この淡い金の面はLP全体でこの1節だけ。** 2回使うと目印として
   機能しなくなる。 */
/* ══ この節の面：金から黒へ落とす ═══════════════════════════════
   利用者の指示（2026-08-27）＝「ブラックとゴールドのグラデーション」。
   淡い金の平板をやめ、**上端の金がそのまま黒へ落ちる暗い面**にした。
   上の「3ステップ」が --bg(#F5F5F5)、下の feat-band が白なので、
   ページは 明 → 暗 → 明 の並びになる。

   ★ 明暗の境を「高さの%」で置かないこと。
     帯の高さは実測で 1440/1280px:508 / 861px:533 / 820px:756 /
     390px:959 / 360px:984。幅で倍近く変わる。
     「見出しは明るい側・カードは暗い側」と振り分けると、どこに境を
     置いても別の幅で文字の行の真ん中を割る。だから採らない。
     代わりに明暗の振れを**全部あわせて暗い側**へ収めた:
       上端 #6D591D（相対輝度 .1049） → 下端 #111111（.0056）
     ＝ 輝度でおよそ19倍。面としてははっきり金→黒に見えるのに、
     どの高さに文字が来ても明るい文字で読める（最小 5.59）。

   ★ 金の光（radial）は **px** で置く。%にすると390pxでは光が帯の
     1/5まで伸び、見出しの後ろまで明るくなる。

   ★ 光は34%まで。**暗い地では、光を強めるほど地が明るくなり、その上の
     明るい文字の比が下がる**（淡い地のときと向きは同じで理由が逆）。
     34%のとき .lp-eyebrow は 1440/1280px 6.66 / 861px 6.49 /
     390px 5.59 / 360px 5.56。**ここが帯の最弱点**なので、
     上げるなら必ず測り直すこと。
     （淡い金だった頃は光8%が上限で、ラベルは4.56しか無かった）

   ★ .hero2 との見分け。ヒーローは平らな #0E0E0C＋44pxの格子＋暗角で、
     **金は見出しの文字**（「丸裸に。」）にある。この帯は逆で、**金は面の
     側**にあり、格子も暗角も無く、見出しは白。帯の最も明るい点は
     ヒーローの地の約24倍の輝度で、色みも茶に振れている。

   ★ 生の16進は書かない。全部トークンからの color-mix にした。
     .hero2(#0E0E0C) / .cta-band(#111) の直書きに倣わなかったのは、
     あの2つが**金を面に持たない**のに対し、この帯は金そのものが面だから。
     ここだけ金を16進で固定すると、--gold を触った日に**この面だけが
     取り残される**。 */
.gold-band {
  background:
    /* ① 上から差す金の光。縦半径は px 固定（%にしない） */
    radial-gradient(1200px 190px at 50% -34px,
      color-mix(in srgb, var(--gold-light) 34%, transparent) 0%,
      color-mix(in srgb, var(--gold) 13%, transparent) 55%,
      transparent 100%),
    /* ② 面の芯。上＝金を含んだ暗色 → 下＝黒 */
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold) 42%, var(--black)) 0%,
      color-mix(in srgb, var(--gold) 18%, var(--black)) 38%,
      var(--black) 84%);
  /* 色指定を持たない要素が --text(#2B2B2B) のまま沈まないための床 */
  color: var(--border-mid);
  /* ── 境目：**線を引かない。面の端そのものを境目にする。**
     上: #F5F5F5 → #6D591D で 6.15:1。
     下: #111111 → feat-band の既存 border-top(#EEE 1px) → 白 = 16.28 / 18.88。
     ここに --gold-border(#DED2AC) の1pxを足しても、上の #F5F5F5 とも
     下の白ともにじんで消えるだけ。 */
  border-top: 0;
  border-bottom: 0; }
/* ★ `.gold-band` が請け負う範囲（3節目に付ける前に読むこと）
   面・ラベル・見出し・リード・塗りボタン・フォーカスリングまで。
   **カード（.out / .out-desc）・札（.tag-role）・.seam は
   `.who-band` 固有で、`.gold-band` は面倒を見ない。**
   3節目で `.out-desc` や `.seam-note` を使うと、暗い面に
   `--text-sub`(#555) の文字が残って沈む（2026-08-27 の外部レビュー）。
   使うなら、その要素の反転を `.gold-band` 側へ移すこと。 */
/* `.feats` を ul として使うのはこの節だけ。既定のマーカーと字下げを消す */
.who-band .feats { margin: 0; padding: 0; list-style: none; }
/* 文字は全部反転させる。--text-sub(#555) / --text-muted(#6E6E6E) を
   暗い地に置いたままにしない。カッコ内は4幅での最小値 */
.gold-band .lp-eyebrow { color: var(--gold-border); }   /* 5.59 */
.gold-band .lp-h2      { color: var(--white); }         /* 9.74 */
.gold-band .lp-lead    { color: var(--border-mid); }    /* 8.62 */
/* `.lp-lead strong` / `.out-desc strong` に色指定は無く親の色を継ぐ。
   太さだけの強調のまま動かさない（配色以外を変えないため） */

/* カードは白のままにしない。**暗い面に白い箱を3つ置くと箱が主役になり、
   すぐ下の .feat-band（白地）と2節続けて同じ見え方になる。**
   地は金を薄く重ねた「持ち上げた面」にする。**黒を重ねてはいけない**——
   帯の下半分は既に #111 なので、--black の半透明はそこで**何も塗らない**
   ことになり（同じ色を同じ色に重ねる）、3枚目のカードだけ地と一体化する
   （実測の段差 1.03:1）。金なら帯のどの高さでも必ず持ち上がる（1.12〜1.13:1）。 */
.who-band .out { padding: 22px 20px;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border-color: color-mix(in srgb, var(--gold-border) 42%, transparent); }
.who-band .out-name { margin: 0 0 12px; }
/* 自分ごと化させる節なので、本文は `.out` の13pxではなく
   隣の `.lp-step-desc` と同じ14pxにして押しを保つ */
.who-band .out-desc { font-size: 14px; line-height: 1.8; color: var(--border-mid); }  /* 9.28 */
/* --gold-on-glass(#866C15) は**明るい地のための金**で、このカードの上では沈む。
   いまリンクは無いが、足した日に沈まないよう床を敷いておく */
.who-band .out-desc a { color: var(--gold-light); }
/* 黒い札は暗いカードの上で消える。**塗り札のまま**地と文字を入れ替えた。
   枠線チップにしないこと——「持ち出し方」の .tk-fmt が枠線チップで、
   who-band と見た目を分けるためにそうしてある。
   --gold-pale(象牙) ではなく --gold-light(金) にしたのは、象牙だと
   帯の下半分でいちばん明るい面になり、白い見出しより前に出るから。
   実測 7.54:1（13px/600）。詳細度 (0,3,0) で .out-name .tag(0,2,0) に勝つ */
.who-band .out-name .tag-role { background: var(--gold-light); color: var(--black); }
.out-name .tag-role { font-size: 13px; letter-spacing: .02em; padding: 5px 11px;
  border-radius: 6px; margin-right: 0; vertical-align: 0; white-space: nowrap; }
/* グローバルのフォーカスリングは `2px solid var(--black)`（static/style.css 188行）で、
   この面では見えない。色だけ差し替える（実測 7.54:1・要求は3:1）。
   この帯の中の操作は「よくある質問」リンクと問い合わせボタンの2つ */
/* 塗りボタン（`.cta-btn.primary` は --black 地）は暗い面で消える。
   `.hero2` と `.cta-band` が既に同じ扱いをしているので、それに揃える
   （#111 on #fff ＝ 18.1:1）。新しい色は足していない */
.gold-band .cta-btn.primary { background: #fff; color: var(--black); }
.gold-band .cta-btn.primary:hover { background: #E8E8E8; color: var(--black); }
.gold-band :focus-visible { outline-color: var(--gold-light); }

/* 持ち出し方は「形式」ではなく**動作**で3つ。
   形式カードを4枚並べると、ブラウザの印刷機能でしかない PDF が
   当サービスが出す PPTX と同格に見える。段で分けてそれを避ける。

   **`.out` を使わない。** 直前の who-band が `.out`＋黒い札なので、
   ここで同じ部品を使うと2節続けて同じ見た目になる。カードをやめて
   行にし、札も塗りから枠線チップに変えてある。 */
.takeout { margin: 26px 0 0; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-card); overflow: hidden; }
.tk-row { display: grid; grid-template-columns: 218px 1fr; gap: 24px;
  padding: 20px 22px; border-top: 1px solid var(--border); }
.tk-row:first-child { border-top: none; }
/* 3段目だけは出どころが違う。区切りを破線にし、地は `--bg-subtle`(#FAFAFA)
   ではなく `--bg`(#F5F5F5)。白い帯との輝度比が 1.0437 → 1.0902 になる（実測）。
   ページ地と同じ色を白い面の中に敷くことで「ここは当サービスの面の外」
   という意味にもなる */
.tk-row-browser { background: var(--bg);
  border-top-style: dashed; border-top-color: var(--border-mid); }

.tk-act-name { font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--black);
  margin: 0 0 4px; padding-left: 12px; position: relative; }
/* 動作の目印。`.lp-step-title::before`（34pxの横棒）とは向きも太さも別物にする */
.tk-act-name::before { content: ""; position: absolute; left: 0; top: .42em;
  width: 3px; height: 1.06em; border-radius: 2px; background: var(--black); }
/* 当サービスが出す2段は黒、ブラウザ任せの1段はグレー。文言と二重に言う */
.tk-row-browser .tk-act-name::before { background: var(--border-strong); }
/* 12px / --text-muted(#6E6E6E)。白地 5.10:1、#F5F5F5 地 4.68:1 でAAを満たす（実測） */
.tk-act-note { color: var(--text-muted); font-size: 12px; line-height: 1.65;
  margin: 0; padding-left: 12px; }

/* **2列固定にする。** auto-fit にすると1件しかない段が全幅に伸び、
   形式チップの左端が段ごとにズレて「表」に見えなくなる。
   2列なら3段ともチップが同じ x で揃う（実測 337.5px） */
.tk-items { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; align-content: start; }
.tk-item { min-width: 0; }
/* h3。ブラウザ既定の margin-top(1em) を潰さないと段の高さが揃わない */
.tk-name { font-weight: 600; font-size: 14px; line-height: 1.55; margin: 0 0 5px; }
/* **黒い塗り札にしない。** who-band の `.tag` と同じ見え方になる */
.tk-fmt { display: inline-block; font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; letter-spacing: .06em; color: var(--text);
  background: var(--white); border: 1px solid var(--border-mid); border-radius: 4px;
  padding: 1px 7px; margin-right: 8px; vertical-align: 1.5px; }
.tk-desc { color: var(--text-sub); font-size: 13px; line-height: 1.7; margin: 0; }

/* Pricing (shared with old pricing page) */
/* minmax(0,1fr) にすること。1fr は minmax(auto,1fr) と同義で、auto は
   min-content に解決される。ところが .pr-card.featured は overflow:hidden を
   持つため最小サイズが 0 になり、両隣が min-content を確保したあとの
   残りだけを受け取って潰れていた（幅821〜1005pxで ¥100,000 が「¥100,」に
   切れていた。overflow:hidden が原因であると同時に、症状も隠していた） */
.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; align-items: stretch; }
.pr-card { position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 38px 30px 32px; display: flex; flex-direction: column;
  transition: border-color .16s; }
.pr-card:hover { border-color: var(--border-strong); }

/* 注目プランは黒地に立てて主役にする。ゴールドはここでだけ面として効かせる */
/* 注目プランは単色の黒面で立てる。グラデーション・光・影は使わない */
/* overflow:hidden を持たせないこと。
   切り抜くものが何も無い（カードからはみ出す子要素0件・角丸は背景が
   自前で従う）のに、これがあると**はみ出しを黙って切り落とす**。
   実際 c22d320 まで、幅821〜1005pxで「¥100,000」が「¥100,」に
   切れているのを隠していた。しかもグリッド項目の自動最小サイズを
   0にするので、潰れの原因そのものでもあった。
   はみ出したら見えるままにしておくこと。見えれば直せる */
.pr-card.featured { padding-right: 30px; background: var(--black); border-color: var(--black);
  color: #E4E4E4; }
.pr-card.featured:hover { border-color: var(--black); }
.pr-badge { position: absolute; top: 20px; right: 24px;
  background: var(--gold-light); color: #14120A;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 3px; letter-spacing: 0.12em; text-transform: uppercase;
  z-index: 2; }

.pr-plan { font-family: var(--font-display); font-size: 27px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--black); position: relative; padding-right: 76px; }
.pr-plan-sub { color: var(--text-sub); font-size: 14.5px; line-height: 1.75;
  margin: 8px 0 24px; min-height: 50px; }
.pr-price { display: block; position: relative; }
.pr-amount { font-family: var(--font-display); font-size: 52px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.05; display: block; color: var(--black); }
.pr-unit { display: block; color: var(--text-sub); font-size: 15px; font-weight: 700; margin-top: 8px; }
/* 3列を保ったまま幅が縮む帯では、価格が箱に入りきらない。段階的に落とす。
   820px以下は1列になるので、対象は 821〜1068px の帯だけ。

   ★ 切り抜きの境界は `.pr-price` ではなく `.pr-card`（overflow:hidden を
   持つ要素）。字は padding の上まで伸びられる。ここを取り違えると、
   切れていないものを切れていると読む（実際に一度読み違えた）。

   代替書体でも切れないことを確認済み。font-display: swap なので、
   読み込み中は代替書体が実際に画面に出る。カード端までの余裕（実測・
   tabular-nums 込み・和文代替のうち最も広い Hiragino Sans）:
     821px/32px → +44.9   901px/40px → +30.4
     1069px/52px → +24.6  1440px/52px → +33.3

   32px は切れ対策ではなく組版側の理由（Appleの32pxの段に一致）。
   34pxでも切れない（カード端まで +26.8px）。

   年払い（¥80,000・「年額 ¥960,000（20%オフ）」）は月払いより狭いので
   月払いが最悪値。両方の状態で幅821/960/1440pxのはみ出し0を確認済み */
@media (max-width: 1068px) { .pr-amount { font-size: 40px; } }
@media (max-width: 900px)  { .pr-amount { font-size: 32px; } }
.pr-annual { color: var(--text-sub); font-size: 14px; font-weight: 700; min-height: 22px; margin-top: 8px; }

.pr-feats { list-style: none; padding: 0; margin: 26px 0; flex: 1; }
.pr-feats li { display: flex; gap: 11px; padding: 12px 0; font-size: 15.5px; line-height: 1.7;
  color: var(--text); border-bottom: 1px solid var(--border); }
.pr-feats li:last-child { border-bottom: none; }
.pr-feats li strong { font-weight: 700; color: var(--black); }
.pr-feats li .ck { flex: none; color: var(--black); font-weight: 700; }

.pr-btn { display: block; text-align: center; padding: 17px; border-radius: 10px;
  font-weight: 700; font-size: 16px; cursor: pointer; border: none;
  text-decoration: none; transition: .15s; }
.pr-btn.primary { background: var(--black); color: #fff; }
.pr-btn.primary:hover { background: var(--black-mid); color: #fff; }
.pr-btn.outline { background: #fff; color: var(--black); border: 1.5px solid var(--border-mid); }
.pr-btn.outline:hover { border-color: var(--black); }

/* 黒地カードの中身を反転させる */
.pr-card.featured .pr-plan,
.pr-card.featured .pr-amount { color: #fff; }
.pr-card.featured .pr-plan-sub { color: #A6A6A6; }
.pr-card.featured .pr-unit,
.pr-card.featured .pr-annual { color: #C4C4C4; }
.pr-card.featured .pr-feats li { color: #DCDCDC; border-bottom-color: rgba(255,255,255,.10); }
.pr-card.featured .pr-feats li strong { color: #fff; }
.pr-card.featured .pr-feats li .ck { color: var(--gold-light); }
.pr-card.featured .pr-btn.primary { background: #fff; color: #111; }
.pr-card.featured .pr-btn.primary:hover { background: #E6E6E6; color: #111; }


.pr-note { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 28px; line-height: 1.9; }
.pr-note a { color: var(--gold); }

/* Final CTA */
.cta-band { background: #111; color: #fff; text-align: center; border-radius: 20px; padding: 56px 24px; margin: 24px 0 64px; }
.cta-band h2 { color: #fff; font-size: 30px; font-weight: 700; line-height: 1.5;
  margin-bottom: 14px; letter-spacing: 0.01em; }
.cta-band h2 .accent { color: var(--gold-light); }
.cta-band p { color: #C4C4C4; font-size: 15px; line-height: 1.95; margin: 0 auto 30px; max-width: 800px; }
.cta-band .hero-cta { justify-content: center; }
.cta-band .cta-btn.primary { background: #fff; color: var(--black); }
.cta-band .cta-btn.primary:hover { background: #E8E8E8; color: var(--black); }
.hero-login { margin-top: 16px; font-size: 13px; color: #8A8A82; }
.hero-login a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

/* トライアル訴求バッジ */
/* 料金セクションのヘッダー：カード・影・グラデーションを使わず、罫線と文字組みで構成 */
.ph { border-top: 1px solid var(--black); padding: 22px 0 0; margin: 0 0 44px; }
.ph-row { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.ph-label { font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-sub); }
.ph-title { font-size: 46px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.2; margin: 0 0 12px; color: var(--black); }
.ph-lead { color: var(--text-sub); font-size: 15.5px; line-height: 1.9;
  margin: 0 0 30px; max-width: 620px; }

/* トライアル条件は定義リストにして、ラベルと本文を罫線で挟む */
.ph-trial { display: grid; grid-template-columns: 132px 1fr; gap: 0 24px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 18px 0; margin: 0; align-items: start; }
.ph-trial dt { font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.ph-trial dd { margin: 0; color: var(--text); font-size: 15px; line-height: 1.9; }
.ph-trial dd strong { font-weight: 700; color: var(--black); }

/* 支払いサイクル：塗りのトラックをやめ、細い枠と塗り分けだけで示す */
.cycle-seg { display: inline-flex; border: 1px solid var(--border-mid); border-radius: 6px; overflow: hidden; }
.cycle-opt { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  background: transparent; color: var(--text-sub); font-family: inherit; font-size: 14px;
  font-weight: 700; padding: 10px 20px; transition: .14s; }
.cycle-opt + .cycle-opt { border-left: 1px solid var(--border-mid); }
.cycle-opt:hover { background: rgba(0,0,0,.04); color: var(--black); }
.cycle-opt.active, .cycle-opt.active:hover { background: var(--black); color: #fff; }
.cycle-save { font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: .72; }

@media (max-width: 720px) {
  .ph-title { font-size: 34px; }
  .ph-trial { grid-template-columns: 1fr; gap: 6px; }
}

/* サンプルモーダル */
.lp-modal { position: fixed; inset: 0; background: rgba(10,10,8,0.74); display: none;
  align-items: flex-start; justify-content: center; z-index: 1000; padding: 28px 14px; overflow-y: auto; }
.lp-modal.open { display: flex; }
.lp-modal-card { background: var(--bg); width: 100%; max-width: 920px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5); animation: modalIn .18s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lp-modal-head { position: sticky; top: 0; background: #111; color: #fff; display: flex; align-items: center;
  justify-content: space-between; padding: 15px 22px; z-index: 2; }
/* div から h2 にしたので、ブラウザ既定の margin を潰す
   （残すと見出し帯の高さが変わる）。

   ★ `color` も打ち直すこと。親の `.lp-modal-head` が `color: #fff` を
   持っていても、**継承より要素自身への指定が強い**ので、
   style.css:154 の `h1,h2,h3,h4,h5 { color: var(--black) }` が勝つ。
   div から h2 に変えた時点で、**#111 の帯に #111 の文字**になり、
   本番でタイトルが完全に見えなくなっていた（コントラスト比 1.00）。
   見た目が消えるだけでエラーは出ないので、誰も気づかなかった。 */
.lp-modal-head .t { font-weight: 600; font-size: 15px; margin: 0; color: #fff; }
.lp-modal-head .t small { color: #9a9a90; font-weight: 600; margin-left: 8px; font-size: 12px; }
.lp-modal-close { background: rgba(255,255,255,0.12); color: #fff; border: none; width: 32px; height: 32px;
  border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; }
.lp-modal-close:hover { background: var(--gold); }

/* **指で押す環境では44pxを確保する。**
   実測（390px・iPhone相当）で、支払いサイクルの切替は41px、
   モーダルの閉じるは27x32pxしか無かった。切替は隣り合った2択が
   罫線1本で接しており押し間違えやすく、閉じるは**覆いから抜ける
   唯一の出口**（本文が縦に長く背景も見えない）。
   この2つは landing.html の中で定義しているので、直しもここに置く
   （style.css 側に書いても、この style ブロックが後に来るので
   同じ詳細度では勝てない）。 */
@media (pointer: coarse) {
  .cycle-opt { min-height: 44px; }
  .lp-modal-close {
    width: 44px; height: 44px;
    /* **縮ませない。** `.lp-modal-head` は flex で、見出しが長いと
       この閉じるボタンが押し潰される（44px 指定でも実測36pxだった） */
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
  }
}
.lp-modal-body { padding: 22px; }
.smp-badge { display: inline-block; background: var(--gold-pale); color: var(--gold); border: 1px solid var(--gold-border);
  font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 20px; }
.smp-target { color: var(--text-muted); font-size: 13px; margin: 10px 0 0; }
.smp-concl { background: #111; color: #fff; border-radius: 12px; padding: 18px 22px; margin: 14px 0 18px; }
.smp-concl .lbl { color: var(--gold-light); font-size: 11px; font-weight: 600; letter-spacing: 2px; }
.smp-concl p { font-size: 16px; font-weight: 600; line-height: 1.65; margin: 8px 0 0; }
.smp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.smp-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
/* h2 → h4 と1段飛ばしていたので h3 に直した（見出しの階層を詰める） */
.smp-card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: .03em; }
.smp-li { font-size: 13px; color: var(--text-sub); line-height: 1.65; padding: 6px 0; border-bottom: 1px solid #f2f2f0; }
.smp-li:last-child { border-bottom: none; }
.smp-li strong { color: var(--text); }
.smp-bar-wrap { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.smp-bar-name { width: 74px; font-size: 12px; color: var(--text-sub); flex-shrink: 0; }
.smp-bar-track { flex: 1; height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.smp-bar-fill { height: 100%; background: var(--gold); border-radius: 4px; }
.smp-bar-val { width: 32px; text-align: right; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.smp-swot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.smp-swot div { border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.55; }
.smp-s { background: var(--green-pale); color: #0a5e36; } .smp-w { background: #FEF2F2; color: #a51d1d; }
.smp-o { background: var(--blue-pale); color: #1746b0; } .smp-t { background: #FFF7E6; color: #8a5a08; }
.smp-persona { display: flex; gap: 14px; align-items: flex-start; }
.smp-ava { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-light));
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.smp-tactic { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #f2f2f0; font-size: 13px; }
.smp-tactic:last-child { border-bottom: none; }
.smp-rank { background: var(--black); color: #fff; font-weight: 600; width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.smp-fit { display: inline-block; background: var(--green-pale); color: #0a5e36; font-size: 12px; font-weight: 600;
  padding: 2px 10px; border-radius: 20px; margin-left: 6px; }
.smp-note { text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 18px; }
.smp-cta { text-align: center; margin-top: 14px; }
@media (max-width: 640px) { .smp-grid { grid-template-columns: 1fr; } }

@media (max-width: 820px) {
  .hero2-inner { grid-template-columns: 1fr; padding: 52px 20px 48px; gap: 32px; }
  .hero2-title { font-size: 46px; letter-spacing: -1px; }
  .hero2-title .hero2-lede { font-size: 17px; margin-top: 14px; }
  .hero2-desc { font-size: 14.5px; }
  .hero2-stats { gap: 20px; flex-wrap: wrap; }
  .lp-steps, .feats, .pr-grid, .outs { grid-template-columns: 1fr; }
  /* 動作ラベルを上、形式をその下へ。`.tk-items` を書き忘れると2列のまま潰れる */
  .tk-row, .tk-items { grid-template-columns: 1fr; }
  .tk-row { gap: 12px; padding: 18px; }
  .lp-section { padding-top: 44px; padding-bottom: 44px; }
}
@media (max-width: 480px) {
  .logo-sub { display: none; }
}
/* ══ 導線① 追従ヘッダの中身（861px以上＝PCのみ） ═════════════════
   `position: sticky` のヘッダが全画面に付いて回るのに、中身がロゴだけ
   だった。**LPだけが nav を持っていない**（/contact も /faq も /signup も
   `.header-nav` を持っている）。実測でPC(1280px)の最大の空白は 3.23画面。
   他ページと同じ部品を載せると、**新しい部品も新しい面積もゼロで** 0画面になる。

   **既定は非表示。** 利用者の指示によりモバイルのヘッダは変えないので
   861px以上だけ。style.css の `@media (max-width:860px)` にある
   `.header-nav { display: contents }`（詳細度 0,1,0）には
   `header .lp-nav`（0,1,1）が勝つので、子が引き上がる事故は起きない。 */
header .lp-nav { display: none; }

@media (min-width: 861px) {
  header .lp-nav { display: flex; align-items: center; gap: 18px; }

  /* 主たる行動（申込み）。861px以上のヘッダは暗い面なので --black の塗りは
     沈む。ヒーローの `.hero2 .cta-btn.primary` と同じ白地・黒文字に揃える
     （#111 on #fff ＝ 18.1:1）。**新しい色は1つも足していない。**
     `.header-nav .hbtn`（0,2,0）が padding/border/太さを当てているので、
     詳細度を1つ上げて塗りを戻す。 */
  header .lp-nav .hbtn.lp-nav-cta {
    padding: 9px 18px;
    border: 1px solid #fff;
    border-radius: var(--radius-pill);
    background: #fff;
    color: #111;
    font-weight: 600;
  }
  header .lp-nav .hbtn.lp-nav-cta:hover { background: #E8E8E8; color: #111; }
  /* 塗りのボタンに下線は要らない（`.header-nav .hbtn::after` を止める） */
  header .lp-nav .hbtn.lp-nav-cta::after { display: none; }
}

/* ── 「無料で始める」を途中に置くのは、ヘッダが無い幅だけ ──────────
   利用者の指摘（2026-08-27）:「無料で始めるボタンが多すぎる。
   ヘッダーにあるので途中にはこんなにいらない」。実測すると5か所あった
   （0% ヘッダ / 8% ヒーロー / 38% seam / 59% seam / 95% 最終CTA）。

   **消すのではなく、861px以上でだけ隠す。** モバイルはヘッダの nav を
   出さない約束（利用者の指示「モバイル版はそのままでいい」「PC版のみ」）
   なので、両方消すとモバイルだけ空白が戻る（実測 2.25→5.6画面）。
   ヘッダのCTAと途中のCTAは、**どの幅でもどちらか一方だけ**が出る。

   残る2本（サンプルを見る・ご相談）は別の行動なので隠さない。
   隠れる側の文言は他所にもある——「3日間の無料トライアル…」は
   ヒーロー(691行)に、「この9項目が…」は節の見出しに同じ内容がある。 */
@media (min-width: 861px) {
  /* `.seam.seam-start` と2つ重ねること。`.seam { display: flex }` は
     この規則より**後ろ**で定義されており、同じ詳細度(0,1,0)だと
     後勝ちで負ける（実測: 861pxでも flex のままだった）。
     セレクタを短くすると静かに効かなくなる */
  .seam.seam-start { display: none; }
  /* `.seam-mid + .takeout { margin-top: 0 }` は seam があることへの
     打ち消し。隠したら .takeout の元の上余白(26px)を返すこと。
     隣接セレクタは display:none でも当たるので、明示的に戻す */
  .seam-start.seam-mid + .takeout { margin-top: 26px; }
}

/* ══ 導線② 節の切れ目に置く1行（.seam） ═══════════════════════
   ヘッダに触れない860px以下は、390pxで空白が 6.07画面ある。
   **追従物は使わない**——下端に帯を出す案を実装して測ったところ、390pxで
   74px＝画面の10.2%を占め、`.lp-h2`・`.feat`・`.out`・`.tk-item`・
   `.lp-lead` の上に 2.0〜8.5画面のあいだ重なり続けた。

   代わりに、読み終えた節の末尾へ1行＋ボタンだけを置く。4か所とも別の行動
   （見る／聞く／始める／始める）。**節は1つも作らない**——`.seam` は節の
   内側の最後の子として置き、負マージンで既存の下余白を食わせる
   （1か所あたり約+180px。節を新設すると1つで600px超）。 */
.seam { display: flex; align-items: center; justify-content: space-between;
  gap: 16px 28px; flex-wrap: wrap;
  margin: 34px 0 -28px; padding-top: 22px;
  border-top: 1px solid var(--border-mid); }
.seam-copy { flex: 1 1 320px; min-width: 0; }
.seam-q { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.7; color: var(--black); }
.seam-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--text-sub); }
.seam-note strong { color: var(--text); font-weight: 700; }
.seam-note a { color: var(--gold-on-glass); text-underline-offset: 2px; }
.seam-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* 本文中の導線なので、ヒーロー・最終CTA・料金ボタンより一段小さくする。
   ページで最も強いボタンは #pricing のままにしておく */
.seam .cta-btn { padding: 13px 24px; font-size: 15px; line-height: 1.4; white-space: nowrap; }

/* 節の途中に置くもの（9枚と持ち出し方の間）。下は節が続くので余白を食わず、
   代わりに `.takeout` の上マージンを譲ってもらう */
.seam-mid { margin-bottom: 0; }
.seam-mid + .takeout { margin-top: 0; }

/* 暗い帯（金→黒）の中だけ、区切り線と枠を帯の色に寄せる。
   **カードも黒い札も増やさない**ので、この節の目印は変わらない */
/* 暗い帯の中だけ、罫とボタンを面に合わせて反転する。
   ここは帯のいちばん下＝ほぼ純黒（実測 #111111）なので、
   いちばん強い反転をかけられる場所になる */
.who-band .seam { border-top-color: color-mix(in srgb, var(--gold-border) 40%, transparent); }
.who-band .seam-q      { color: var(--white); }         /* 実測 18.74 */
.who-band .seam-note   { color: var(--border-mid); }    /* 12.99 */
.who-band .seam-note strong { color: var(--white); }    /* .seam-note strong の --text を打ち消す */
.who-band .seam-note a { color: var(--gold-light); }    /* 12.5px・7.54 */
/* 白地のボタンをそのまま置くと、暗い面に白い板が1枚浮く。枠線だけにする。
   **.hero2 .cta-btn.ghost（枠 #3A3A3A の無彩色）とは別物にする**ため、
   枠は金にした。操作部品なので枠にも 3:1 が要る＝実測 3.68:1 */
.who-band .seam .cta-btn.ghost { background: transparent;
  border-color: color-mix(in srgb, var(--gold) 78%, transparent);
  color: var(--gold-pale); }                            /* 文字 17.17 */
.who-band .seam .cta-btn.ghost:hover { border-color: var(--gold-light);
  color: var(--white); background: color-mix(in srgb, var(--gold) 14%, transparent); }

@media (max-width: 820px) {
  /* コピーが上、ボタンが下。`.seam-mid` をここでも打ち直すこと——
     打たないと後勝ちで -18px が効き、節の途中で「持ち出し方」に食い込む */
  .seam { margin: 26px 0 -18px; padding-top: 18px; gap: 14px; }
  .seam-mid { margin-bottom: 0; }
  .seam-actions { width: 100%; }
  .seam .cta-btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 480px) {
  .seam-q { font-size: 15px; }
  /* 390pxでは `.lp` の左右20pxを引いた350pxに収める。
     nowrap のままだと「ご相談・お問い合わせ」で横に出る */
  .seam .cta-btn { flex: 1 1 100%; padding: 14px 16px; white-space: normal; }
}
@media (pointer: coarse) {
  .seam .cta-btn { min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
}



/* ══════════════════════════════════════════════════════════════
   サンプルレポート — 実レポートと同じ9タブに畳む

   モーダルの中身は実レポート（templates/index.html）と同じ部品で
   組んである（.usp-card / .table-wrap / .swot-grid / .persona-card /
   .strategy-card / .copy-card / .roadmap / .lagf-* / .pos-map …）。
   これらは static/style.css の定義がそのまま効くので、ここに足すのは
   **9枚のパネルをタブに畳むための指定と余白だけ**。
   `.pos-*` `.map-*` には一切触らない
   （tests/test_lp_sample_report.py::test_図の部品はサンプル専用に作らない）。

   **素のHTMLでは9枚が縦に全部並ぶ。**タブの帯は `.is-tabbed` が
   付くまで隠れている。landing.js が動いたときだけ畳む。逆向き
   （素で hidden、JSで開く）にすると、CSPやJSの失敗で8タブ分が
   黙って消える。
   ══════════════════════════════════════════════════════════════ */
.smp-tabs .smp-tabnav { display: none; }
.smp-tabs.is-tabbed .smp-tabnav { display: flex; }
/* 狭い画面では `.tab-nav` の overflow-x で横に流す。flex の既定のままだと
   縮んで文字のほうが切れるので、縮ませない */
.smp-tabs .smp-tab { flex: 0 0 auto; }
/* 指で押す高さ（44px）は style.css の
   `@media (pointer: coarse) { .tab-btn { min-height: 44px } }` が
   実画面と共通で効く。ここで足し直さない（実測: 390px で 44px） */

/* 素のとき（タブなし）は1本の資料として上から読ませる */
.smp-panel + .smp-panel {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border);
}
.smp-panel-title { font-size: 15px; font-weight: 700; color: var(--black); margin: 0 0 14px; }

/* タブに畳んだとき */
.smp-tabs.is-tabbed .smp-panel { display: none; }
.smp-tabs.is-tabbed .smp-panel.is-active { display: block; }
.smp-tabs.is-tabbed .smp-panel + .smp-panel { margin-top: 0; padding-top: 0; border-top: none; }
/* 見出しはタブ名と重複するので視覚的には消す。**要素は残す**——
   パネルの名前であり、見出しの階層（h2 → h3）もここで繋がっている */
.smp-tabs.is-tabbed .smp-panel-title {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 横スクロールの断りは、**実際に溢れているときだけ**出す。
   幅の区切りで決め打ちすると、書体やタブ名が変わっただけでずれる
   （landing.js の syncSampleTabHint が測って付ける） */
.smp-tabhint { display: none; }
.smp-tabs.is-tabbed.is-scrollable .smp-tabhint {
  display: block; margin: -8px 0 14px; text-align: right;
  font-size: 11.5px; color: var(--text-muted);
}

/* 読む前に知らせておきたい一言（表の横スクロール、提案診断の出どころ） */
.smp-hint { font-size: 11.5px; line-height: 1.8; color: var(--text-muted); margin: 0 0 8px; }
.smp-hint b { color: var(--text-sub); font-weight: 700; }

/* 末尾の導線。閉じるボタンを並べるので、中央寄せは flex で取る */
.smp-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 640px) {
  /* 中身が実物と同じ密度になったぶん、狭い画面では左右の余白を詰める
     （22px×2 は 390px で本文を 318px まで削っていた） */
  .lp-modal-body { padding: 16px 14px; }
  .smp-cta .cta-btn { flex: 1 1 100%; text-align: center; }
}

/* **見出しの色を戻す。**タイトルを div から h2 にしたとき
   （29回目レビュー P2）に、style.css の
   `h1,h2,h3,h4,h5 { color: var(--black) }` が `.lp-modal-head` から
   継承していた白を上書きし、**#111 の帯の上の #111 の文字**になって
   いた。計測して気づいた（現行の本番でも「戦略レポート サンプル」は
   見えていない）。 */
.lp-modal-head .t { color: #fff; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LP 組版 ── 本文の値が大きな文字へ漏れるのを止める層
   **このファイルの末尾に置くこと。font-size は1つも書いていない。**
   配色・文言・部品構成・グリッド・区切り幅はどれも触っていない。

   ■ ここに置く理由（style.css の末尾ではない）
   設計時は static/style.css の末尾に足す前提で、`.lp-h2`(0,1,0) に
   勝つため全部に祖先クラスを付けて (0,2,0) にしてあった。
   だが `.who-band .out-desc` は**このファイル側も既に (0,2,0)** で、
   style.css は先に読まれるぶん後勝ちで負ける。
   その1本だけが静かに無効になる（エラーは出ない）。
   このファイルの末尾なら、詳細度でも順序でも必ず勝つ。
   **層の終わりには「LP 組版ここまで」の印を置いてある。**
   その後ろに1本でも足すと、その1本が層に後勝ちする。

   ■ セレクタを短くしないこと
   祖先クラス付きのまま残してある。`.lp .lp-h2` を `.lp-h2` に
   「整理」しても、ここに置く限りは効く。ただし将来この層を
   style.css へ移すなら、その冗長さが効き目そのものになる。
   ※ 39組すべてについて、祖先クラス付きが素のセレクタと
      同じ要素集合に一致することを実測で確認済み。

   ■ 行間の作り方（Appleの規則そのものを使う）
   Apple の overview.built.css の13行は、全部ひとつの式に乗る:

       line-height = font-size + 4px

   （80→1.05 / 64→1.0625 / 56→1.0714 / 48→1.0835 / 40→1.1 /
     32→1.125 / 28→1.1429 / 24→1.1667 / 21→1.1905 / 19→1.2105 /
     17→1.2354 / 14→1.2858 / 12→1.3334 ── 13行とも一致）
   つまりAppleは比率で決めていない。**行送りは常に「文字サイズ+4px」。**

   和文はこの +4px では足りない。ラテンの字面は概ね 0.73em
   （キャップハイト＋ディセンダ）に収まるのに対し、和文は仮想ボディを
   ほぼ埋める（漢字の墨は約 0.88em）。同じ「行間の見た目」を保つには、
   その差 0.88 − 0.73 = 0.15em を足せばよい:

       和文  line-height = 1.15 + 4px / font-size   （下限 1.25）
       欧文・数字だけの行  line-height = 1 + 4px / font-size  （Appleのまま）

   58px→1.22→下限1.25 / 46px→1.24→1.25 / 34px→1.27 / 30px→1.28 /
   24px→1.32 / 20px→1.35。下限1.25 は「和文見出しの実用下限」。

   ■ 字間の作り方
   19px までは Apple の実測値をそのまま使う（34px の +0.004em は
   Apple 32px と同値、24px の +0.009em も同値）。和文は詰めに強い。
   Apple が 17px で -0.022em へ落ちるのは SF Pro Display → Text の
   **書体切り替え**が理由。**書体が1つしかない我々はこの不連続を真似せず**、
   頂点 +0.012em(19px) から下は正のまま緩やかに登らせて戻す
   （16px:+0.018 / 15px:+0.020 / 14px:+0.024 / 13px:+0.028）。
   どれも現状の +0.045〜0.060em より狭い＝折り返しは増えない方向にしか動かない。

   ■ 太さ
   Apple の宣言実数は 700=24回 / 600=135回 / 400=62回、800も900も0回。
   800（.lp-h2 / .ph-title）と、体系に無い 650 をやめた。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── A. 和文の見出し（19px以上）──────────────────────────────
   body の line-height:1.9 / letter-spacing:0.045em を継承しては
   いけない帯。全部に明示的に与えて漏れを塞ぐ。 */

/* 58px ページ最大。Apple 56px 行(-0.005em)。-0.0259em は同帯の5倍で、
   body の font-feature-settings:"palt" と二重に詰めていた */
.hero2 .hero2-title { font-weight: 700; line-height: 1.25; letter-spacing: -0.006em; }

/* 19px Apple の字間の頂点(+0.012em)。**行間は見出し曲線に載せない。**
   h1 の中にあるが中身は「文」なので本文側の 1.6 を保つ
   （Apple も 17px に見出し用 1.2354 と本文用 1.4706 の2値を持つ
     ＝サイズではなく役割で分けている） */
.hero2 .hero2-title .hero2-lede { font-weight: 600; line-height: 1.6; letter-spacing: 0.013em; }

/* 46px Apple 48px 行(-0.003em)。800 をやめる */
.lp .ph-title { font-weight: 700; line-height: 1.25; letter-spacing: -0.002em; }

/* 34px Apple 32px 行(+0.004em)と同値。800 をやめ、
   行間 1.45（本文の値）を見出しの値へ */
.lp .lp-h2 { font-weight: 700; line-height: 1.27; letter-spacing: 0.004em; }

/* 30px Apple 28/32 の間。行間 1.50 は本文の値だった */
.lp .cta-band h2 { font-weight: 700; line-height: 1.28; letter-spacing: 0.006em; }

/* 24px Apple 24px 行(+0.009em)と同値。中身は「約3分 / 9視点 / 5〜10社」で
   和文を含むので和文の行間。行間 1.90 は body からの継承そのものだった */
.hero2 .hero2-stat-num { font-weight: 600; line-height: 1.32; letter-spacing: 0.009em; }

/* 20px Apple 21px 行(+0.011em) */
.lp .lp-step-title { font-weight: 600; line-height: 1.35; letter-spacing: 0.012em; }

/* ── B. 欧文・数字だけの行 ────────────────────────────────
   **ここに和文の +0.15em を足さない。** 中身にラテンのアセンダ／
   ディセンダしか無いので、Apple の 1 + 4px/size がそのまま効く。 */

/* 52px「¥50,000 / ¥100,000」。1 + 4/52 = 1.077。
   元の 1.05 は既にほぼ正しく、ここを和文の下限(1.25)まで上げると
   1行の数字の下に理由のない余白が10px出る */
.pr-card .pr-amount { font-weight: 700; line-height: 1.08; letter-spacing: -0.004em; }

/* 27px「LIGHT / STANDARD / ENTERPRISE」。欧文の大文字1行。
   1 + 4/27 = 1.148。行間 1.90 は body からの継承で、
   1行の札に 51px の箱を作っていた（カード1枚あたり 21px 縮む）。
   字間は大文字なので 0 にはせず、27px 相当の控えめな量に置く */
.pr-card .pr-plan { font-weight: 700; line-height: 1.15; letter-spacing: 0.020em; }

/* 64px の飾り数字（欧文・絶対配置）。
   **line-height:1 は位置決めの指定なので触らない。**
   字間だけ Apple 64px 行(-0.009em)へ。-0.047em は5倍詰めすぎだった */
.lp .lp-step-n { font-weight: 600; letter-spacing: -0.009em; }

/* ── C. ボタン ────────────────────────────────────────────
   1行しかないのに行間 1.9 を継承していた。

   **`<a>` と `<button>` で組版が違っていたのを揃える。**
   `<a class="cta-btn">無料で始める` は body から lh1.9 / +0.045em を
   継承する一方、隣に並ぶ `<button class="cta-btn ghost">サンプルを見る`
   はフォーム要素なので継承せず lh:normal / ls:normal だった（実測）。
   同じ行の2つのボタンで字間が違う状態。.pr-btn も5個中3個が <button>。

   高さ（実測）: .cta-btn 60→54px / .pr-btn 61→59・58→56px。
   いずれも指で押す 44px を大きく上回る。 */
.hero2 .cta-btn,
.lp .cta-btn,
.smp-cta .cta-btn,
.pr-card .pr-btn { font-weight: 600; line-height: 1.36; letter-spacing: 0.018em; }

/* 支払いサイクルの切替は**太さだけ**直す。
   `line-height` を当てると高さが 41→39px に落ちる。
   @media(pointer:coarse) の min-height:44px は粗いポインタにしか
   効かないので、マウスの環境では 41px がそのまま出る */
.lp .cycle-opt { font-weight: 600; }

/* ── D. 欧文の大文字ラベル（Poppins・uppercase）─────────────
   中身は HOW IT WORKS / PRICING / FREE TRIAL / 20%OFF ── 全部ラテン。
   Apple の同帯のラベルは +0.011em だが、それは**大文字化していない**値。
   text-transform:uppercase の列には別の補正が要る（大文字だけの並びは
   字面が詰まって見える。書体に依らない話）。曲線の 12px 値 +0.032em に
   大文字補正 +0.05em を足して一律 +0.08em。
   .lp-eyebrow の +0.16em はその倍、.ph-label の +0.22em は3倍近くあった。

   行間は .lp-eyebrow だけ Apple の 12px 値(1.3334)へ。
   .ph-label は h1 の上の余白をこの高さで作っているので触らない。 */
.lp .lp-eyebrow { font-weight: 600; line-height: 1.33; letter-spacing: 0.08em; }
.lp .ph-label,
.lp .ph-trial dt,
.lp .cycle-save { font-weight: 600; letter-spacing: 0.08em; }

/* ── E. 和文のラベル ──────────────────────────────────────
   .hero2-eyebrow は `letter-spacing:2.5px`（=+0.208em）で、LPで最も
   字間が開いていた。中身は「AI競合分析ツール STRATEXS（ストラテクス）」
   という**和文の文**であって欧文大文字のラベルではない。
   .pr-badge も同じ（中身は「チーム向け」。uppercase は和文に効かない）。
   欧文大文字の +0.08em より控えめな +0.06em に置く。
   ※ どちらも行間 1.9 はわざと残す（絶対配置の札の高さと、
      h1 上の余白がそれで決まっているため）。字間だけ直す */
.hero2 .hero2-eyebrow,
.pr-card .pr-badge { letter-spacing: 0.06em; }

/* ── F. 本文帯（12〜16px）─────────────────────────────────
   **行間は触らない。** 和文本文の 1.7〜1.9 は日本語として正しい値で、
   ここを下げると読めなくなる。直すのは字間だけ。
   19px の頂点(+0.012em)から下は、Apple のように負へ折り返さず
   （書体が1つしかないため）緩やかに正を増やして戻す。

   **`.feat-name` / `.out-name` / `.tk-name` は入れていない。**
   これらは h3 で、body ではなく `h1,h2,h3{letter-spacing:.01em}` を
   継承しており既に +0.010em。曲線値を当てると**広がって行が増える**。
   19px未満の見出し役ラベルは1〜2語しかなく小サイズの可読性補正が
   要らないので、+0.010em のまま残す。
   **19px未満では今より広げない、を規則にしてある。** */

/* 15〜16px */
.hero2 .hero2-desc,
.lp .lp-lead,
.lp .cta-band p,
.lp .ph-lead,
.lp .ph-trial dd,
.pr-card .pr-feats li,
.pr-card .pr-unit,
.lp .tk-act-name { letter-spacing: 0.020em; }

/* 13.5〜14.5px */
.lp .lp-step-desc,
.lp .pr-note,
.hero2 .hero-login,
.pr-card .pr-plan-sub,
.pr-card .pr-annual,
.who-band .out-desc { letter-spacing: 0.024em; }

/* 12〜13px */
.lp .feat-desc,
.lp .out-desc,
.lp .tk-desc,
.lp .tk-act-note,
.hero2 .hero-trial,
.hero2 .hero2-stat-label { letter-spacing: 0.028em; }

/* 行間を下げるのはこの2つだけ。2.05 と 1.95 を、和文本文の帯
   （1.7〜1.9）の上端へ収める。帯の中なので可読性は落ちない */
.hero2 .hero2-desc { line-height: 1.9; }
.lp .cta-band p { line-height: 1.9; }

/* ── G. 段が落ちたときの再調整 ────────────────────────────
   Apple は clamp() を使わず、幅でサイズを落とすたびに行間と字間も
   その段の値へ揃え直している（64→48→40 を 1068px / 734px で）。
   同じことをする。**区切りは landing.html 側と同じ値しか使わない**
   （新しい区切りは1つも足していない）。
   1068 / 900 は .pr-amount（landing.html:226-227）、
   820 はヒーロー、720 は .ph-title。 */

/* 52 → 40px。Apple 40px 行(1.1 / 0em)＝字間の零交差点 */
@media (max-width: 1068px) {
  .pr-card .pr-amount { line-height: 1.10; letter-spacing: 0em; }
}

/* 40 → 32px。Apple 32px 行(1.125 / +0.004em)にちょうど乗る */
@media (max-width: 900px) {
  .pr-card .pr-amount { line-height: 1.125; letter-spacing: 0.004em; }
}

@media (max-width: 820px) {
  /* 58 → 46px。**landing.html:377 の letter-spacing:-1px（=-0.0217em）を
     上書きするために必要。** 行間は素の 1.25 のままでよい（46pxでも下限） */
  .hero2 .hero2-title { letter-spacing: -0.002em; }
  /* 19 → 17px */
  .hero2 .hero2-title .hero2-lede { letter-spacing: 0.014em; }
  /* 15.5 → 14.5px */
  .hero2 .hero2-desc { letter-spacing: 0.024em; }
}

/* 46 → 34px。Apple 32px 行 */
@media (max-width: 720px) {
  .lp .ph-title { line-height: 1.27; letter-spacing: 0.004em; }
}

/* ══════════════════════════════════════════════════════════════
   LP 組版ここまで ── この下に規則を足さないこと
   ここから上の「LP 組版」層は、同じ詳細度の規則に後勝ちするために
   **ファイルの最後**に置いてある。下に1本でも足すと、その1本が
   静かに勝ってしまう（エラーは出ない）。
   新しい規則は組版層より**上**に書くこと。
   ══════════════════════════════════════════════════════════════ */