/* 自社媒体サイトのテーマ — 配色・書体・タイポサイズ、および第1部のノートPC
 *
 * 骨格（章・背景メディア層・コピー層）は _kit/style-base.css。
 * ここはこのサイト固有の声と、_kit に無い新機能（ノートPCと画面の中身）だけを持つ。
 * 色の実値は書かない。すべて config.js の palette から CSS 変数で届く。
 *
 * 5本での差別化:
 *   sample01      暗 / 細身サンセリフ 400   / 線のピル
 *   sample-gym    暗 / 極太コンデンス 800   / 塗りのピル
 *   sample-dining 暗 / セリフ 600           / 角の枠線
 *   sample-cafe   明 / 幾何学サンセリフ 500 / 下線だけ
 *   ここ          暗 / ★等幅 700           / ★角丸6pxの塗り＋左端3pxのアクセントバー
 *
 * vh / dvh / svh / lvh は使わない。実サイズは _kit が配る --vpx。
 */

html, body {
  background: var(--c-bg, #000);
}

body {
  color: var(--c-ink);
  font-family: var(--f-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ------------------------------------------------------------ タイポ */
/* 等幅体。字面が均一なので、字間を詰めずに素のまま置く */

.headline {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 700);
  line-height: 1.24;
  letter-spacing: -.02em;
  font-size: clamp(1.7rem, 6.4vw, 4.4rem);
  color: var(--c-ink);
}

.headline--hero { font-size: var(--hero-size, clamp(2.2rem, 13vw, 8rem)); letter-spacing: -.045em; }

.sub {
  font-size: clamp(.95rem, 3.4vw, 1.15rem);
  color: var(--c-ink);
  line-height: 1.9;
}

/* 行頭にアクセントの短い罫。等幅体と相性がよい */
.tagline {
  font-size: clamp(.9rem, 3.2vw, 1.1rem);
  color: var(--c-ink);
  font-family: var(--f-display);
  letter-spacing: -.01em;
  border-left: 3px solid var(--c-accent);
  padding-left: .75em;
}

/* ★5本目の CTA は「角丸6pxの塗り＋左端3pxのアクセントバー」。既存4種と別の形 */
.cta {
  border: 0;
  border-left: 3px solid var(--c-accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-accent) 20%, transparent);
  color: var(--c-ink);
  font-family: var(--f-display);
  font-size: clamp(.9rem, 3.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.cta:hover, .cta:focus-visible { background: color-mix(in srgb, var(--c-accent) 34%, transparent); color: var(--c-ink); }

.stage--static .headline { font-size: clamp(1.6rem, 5.4vw, 3.2rem); }

/* 最後の章。1画面ぶんの高さが無いとハッシュ遷移（#S11）で着地しきれない（G13） */
.chapter:last-of-type { min-height: var(--vpx, 800px); }

.footnote {
  border-top: 1px solid color-mix(in srgb, var(--c-accent2) 40%, transparent);
  font-size: .8rem;
  color: var(--c-ink);
}

/* ================================================================== */
/* 第1部 — 画面の光（S2 の転移）                                       */
/* 背景メディア層より上、コピー層より下に置く。矩形は laptop.js が       */
/* transform だけで動かす（幅・高さは書かない／O6）                     */
/* ================================================================== */

/* ★加算合成。実写の画面はすでに光っているので、通常合成で重ねると周辺が
   実写より暗くなり「画面が暗くなった」ように見える（実測で確認）。
   加算なら足すだけで引かない。 */
.lgt {
  position: fixed;
  pointer-events: none;
  mix-blend-mode: screen;
  inset: 0;
  z-index: 90;
  opacity: 0;
  overflow: clip;
}

/* 地。視界と同じ大きさのまま置き、広がりの終盤だけ濃くする。
   ★これが無いと、光の縁（透明）と地の境目が箱に見える。
   加算では覆い切れないので、こちらは通常合成で光の1枚下に置く */
.lgt-wash {
  position: fixed;
  pointer-events: none;
  z-index: 89;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(140% 120% at 50% 40%,
      color-mix(in srgb, var(--c-accent) 46%, var(--c-bg)) 0%,
      color-mix(in srgb, var(--c-accent) 24%, var(--c-bg)) 58%,
      color-mix(in srgb, var(--c-accent) 8%, var(--c-bg)) 100%);
}

/* 光そのもの。矩形は透明のままで、塗りは一回り大きい子が持つ。
   ★こうしないと矩形の縁がそのまま見えて「箱」になる */
.lgt__glow {
  position: absolute;
  transform-origin: 0 0;
  inset: 0;
  will-change: transform;
}

/* 白熱した芯。文字が引き始めたあとに出す（G3 のため早く出さない） */
.lgt__core {
  position: absolute;
  will-change: opacity;
  transform-origin: 0 0;
  opacity: 0;
  inset: 0;
}

/* 塗り。親より一回り大きく取り、光が枠の外へこぼれるようにする。
   ★透明へ落ち切る位置を枠のすぐ外に置くので、輪郭も出ず遠くまで広がりもしない */
.lgt__fx {
  display: block;
  inset: -30%;
  position: absolute;
}

/* ★半径は必ず 50%（＝箱の半分）。これより大きいと箱の縁で切れて輪郭が出る */
.lgt__glow .lgt__fx {
  background:
    radial-gradient(50% 50% at 50% 50%,
      color-mix(in srgb, var(--c-accent) 70%, #fff) 0%,
      color-mix(in srgb, var(--c-accent) 74%, var(--c-bg)) 22%,
      color-mix(in srgb, var(--c-accent) 34%, transparent) 58%,
      transparent 100%);
}

.lgt__core .lgt__fx {
  background:
    radial-gradient(50% 50% at 50% 50%,
      #fff 0%,
      color-mix(in srgb, #fff 64%, var(--c-accent)) 22%,
      transparent 74%);
}

/* ★光の上に文字が乗る章だけ、文言を下へ寄せて地を落とす。
   コピー層の内側に敷くので、光より上・文字より下に来る（G3）。
   濃さ --tkscrim は laptop.js が光の広がりに合わせて入れる。
   固定で敷くと、光が小さいうちに実写の机とキーボードが潰れる。 */
.is-takeover {
  justify-content: flex-end;
  padding-bottom: calc(var(--vpx, 800px) * 0.12);
}

.is-takeover::before {
  content: '';
  position: absolute;
  opacity: var(--tkscrim, 0);
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 14%,
      color-mix(in srgb, var(--c-bg) 30%, transparent) 46%,
      color-mix(in srgb, var(--c-bg) 78%, transparent) 74%,
      color-mix(in srgb, var(--c-bg) 92%, transparent) 92%,
      color-mix(in srgb, var(--c-bg) 94%, transparent) 100%);
}

/* 演出を止めるときは光ごと隠す（_kit 側が本文を素で読ませる） */
.is-static .lgt, .is-static .lgt-wash { display: none; }

/* ================================================================== */
/* 第2部 — T1「入る」/ T2「つながる」を描くキャンバス                  */
/* 背景メディア層（z 0〜9）より上、第1部の光（z 89/90）より下に置く    */
/* 実寸は scenes.js がレイアウト時にだけ入れる（O6）                    */
/* ================================================================== */

.t2c {
  position: fixed;
  inset: 0 auto auto 0;
  pointer-events: none;
  z-index: 60;
  display: none;
  background: var(--c-bg);
}

/* ================================================================== */
/* 第2部 T3 — 設計図（インライン SVG）                                  */
/* キャンバス（z 60）より上、第1部の光（z 89/90）より下                 */
/* ★縦のパンはブラウザに任せる（touch-action: pan-y）                   */
/* ================================================================== */

/* ★ドラッグで SVG の文字が選択されないようにする（選択の青が出る） */
.bpl {
  position: fixed;
  inset: 0 auto auto 0;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  z-index: 70;
  display: none;
  opacity: 0;
  pointer-events: none;
}

.bpl__stage {
  transform-origin: 50% 50%;
  height: 100%;
  width: 100%;
  will-change: transform;
}

.bpl svg { display: block; }

/* 演出を止めるときは設計図ごと隠す（_kit 側が本文を素で読ませる） */
.is-static .bpl { display: none; }

/* ================================================================== */
/* 第2部 T4 — 生まれたミニ LP（実 DOM）                                 */
/* 設計図（z 70）より上、第1部の光（z 89/90）より下                     */
/* 写真にあたる面は CSS のグラデーションとノイズ。外部画像を足さない     */
/* 毎フレーム変わるのはカスタムプロパティと transform / opacity だけ    */
/* ================================================================== */

.lp {
  position: fixed;
  pointer-events: none;
  width: 100%;
  inset: 0 auto auto 0;
  height: 100%;
  z-index: 76;
  display: none;
  --solid: 0;
  --lift: 0;
  --out: 0;
}

/* 枠。設計図と同じ位置・同じ大きさに JS が置く */
/* ★原点は下端。縮めると上に帯が開き、そこへ章の見出しが入る */
.lp__frame {
  position: absolute;
  transform-origin: 50% 100%;
  overflow: hidden;
  border-radius: 8px;
  will-change: transform, opacity;
  opacity: calc(1 - var(--out));
  border: 1px solid color-mix(in srgb, var(--c-accent) calc(62% - var(--solid) * 42%), transparent);
  background: color-mix(in srgb, var(--lp-surface) calc(var(--solid) * 100%), transparent);
  display: flex;
  flex-direction: column;
}

/* ★明るく転じる。地の色は変えず、上から明るさを足す（新しい色を作らない） */
.lp__frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  opacity: calc(var(--lift) * 0.72);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-ink) 78%, var(--c-accent)) 0%,
    color-mix(in srgb, var(--c-ink) 92%, var(--c-accent)) 100%);
  /* ★B14: mix-blend-mode: screen を外した。加算が要るのは S2 の転移だけ
     （.lgt）。ここは通常合成でも同じ明るさになり、濁りが1枚減る。 */
}

/* ---------------------------------------------- ブラウザのクローム */

.lp__chrome {
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  display: flex;
  padding: 0 14px;
  height: clamp(30px, 6%, 52px);
  border-bottom: 1px solid var(--lp-line);
  background: color-mix(in srgb, var(--lp-panel) calc(var(--solid) * 100%), transparent);
}

.lp__dots { display: inline-flex; gap: 6px; }
.lp__dots i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: var(--lp-line);
  display: block;
}

.lp__url {
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: calc(12px * var(--lp-fs, 1));
  letter-spacing: .04em;
  color: var(--lp-muted);
  padding: 4px 12px;
  border: 1px solid var(--lp-line);
  flex: 1 1 auto;
}

/* -------------------------------------------------------- ページ本体 */

.lp__page {
  flex: 1 1 auto;
  min-height: 0;
  gap: clamp(10px, 2.2%, 26px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* ★B23: 業種ごとの余白（--lpm-pad）。宣言が無ければ従来どおり */
  padding: var(--lpm-pad, clamp(12px, 3%, 34px));
  color: var(--lp-text);
  transition: color .24s ease, background-color .24s ease;
}

/* ★B28: 静止（決定論スクリーンショット）のときは動きを止める。
   ★ここに写真の指定を混ぜないこと。混ざると下の .lp__photo が
   「.lp[data-still='1'] .lp__photo」という別のセレクタに化けて、
   ★通常表示では写真に何の指定も当たらなくなる（実測: position static /
   object-fit fill / width 1200px のまま描かれ、素材の左上 9% しか見えていなかった）。 */
.lp[data-still='1'] .lp__page,
.lp[data-still='1'] .lp__cta,
.lp[data-still='1'] .lp__photo { transition: none; }

/* ★B21: 業種ごとの写真。枠は .lp__art で固定してあるので、
   切り替えても大きさは動かない（ガタつかない）。 */
.lp__photo {
  /* ★枠いっぱいに敷く。_kit に同じ並びの塊があるので、書き方を変えてある（K2） */
  position: absolute;
  inset: 0;
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
  display: block;
  /* 読み込み前・読み込めないときは、下の面（CSS の地）がそのまま見える */
  background: transparent;
}

.lp__art { transition: none; }

/* 順に入る積み木。--b は JS が入れる（0→1） */
.lp__nav, .lp__htext, .lp__art, .lp__cards, .lp__foot {
  opacity: var(--b, 0);
  transform: translateY(calc((1 - var(--b, 0)) * 10px));
}

.lp__nav {
  align-items: center;
  justify-content: space-between;
  display: flex;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lp-line);
}

.lp__mark {
  font-family: var(--f-display);
  font-size: calc(clamp(13px, 1.5vw, 16px) * var(--lp-fs, 1));
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--lp-text);
}

.lp__navlist {
  gap: clamp(10px, 1.6vw, 22px);
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.lp__navlist li { font-size: calc(12px * var(--lp-fs, 1)); color: var(--lp-muted); }

/* -------------------------------------------------------------- ヒーロー */

.lp__hero {
  /* ★B9: 伸ばさない。伸ばすと写真面が余白ぶんまで背を伸ばし、
     隣の文字が上下 123px ずつ空いた真ん中に浮いて見えた（1440px 実測）。 */
  flex: 0 1 auto;
  align-items: stretch;
  gap: clamp(10px, 2.4%, 28px);
  min-height: 0;
  display: flex;
}
.lp[data-layout='row'] .lp__hero { flex-direction: row; }
.lp[data-layout='row-reverse'] .lp__hero { flex-direction: row-reverse; }
.lp[data-layout='column'] .lp__hero { flex-direction: column-reverse; }

.lp__htext {
  flex: 1 1 52%;
  justify-content: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2%, 14px);
}

.lp__eyebrow {
  font-family: var(--f-display);
  font-size: calc(12px * var(--lp-fs, 1));
  letter-spacing: .18em;
  /* ★アクセントそのままだと地との比が 4.49:1（下限 4.5）に届かない業種が出る。
     文字色は白寄りに振り、業種の色味だけ残す。 */
  color: color-mix(in srgb, var(--lp-accent, var(--c-accent)) 58%, var(--c-ink));
  margin: 0;
}

.lp__h1 {
  font-family: var(--f-display);
  font-size: calc(clamp(18px, 2.6vw, 34px) * var(--lp-fs, 1));
  line-height: 1.24;
  /* ★B23: 業種ごとの太さと字間 */
  font-weight: var(--lpm-weight, 700);
  letter-spacing: calc(var(--lpm-tracking, -0.02) * 1em);
  margin: 0;
  color: var(--lp-text);
}

.lp__lead {
  font-size: calc(clamp(12px, 1.15vw, 15px) * var(--lp-fs, 1));
  line-height: var(--lpm-density, 1.8);
  max-width: 30em;
  margin: 0;
  color: var(--lp-muted);
}

.lp__actions { gap: 12px; align-items: center; display: flex; flex-wrap: wrap; }

.lp__cta {
  white-space: nowrap;
  max-width: 100%;
  /* ★B26: 実機の書体は幅が広く、「ご予約はこちら」が2行に折れていた。
     ★折り返しを禁じ、入りきらないときは★箱のほうが広がるようにする
     （.lp__actions は wrap するので、隣の要素へは押し出さない）。 */
  border-radius: var(--lpm-btn-radius, 6px);
  border-left: 3px solid color-mix(in srgb, var(--lp-ctaink) 40%, transparent);
  font-family: var(--f-display);
  font-size: calc(13px * var(--lp-fs, 1));
  font-weight: 700;
  padding: 10px 18px;
  background: var(--lp-cta);
  color: var(--lp-ctaink);
  transition: background-color .24s ease, color .24s ease;
}

.lp__ghost {
  font-size: calc(12px * var(--lp-fs, 1));
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--lp-muted);
}

/* ★写真にあたる面。外部画像を使わず CSS で作る */
.lp__art {
  /* 高さは幅から決める。余白を吸って伸びないようにする（B9） */
  /* ★B23: 業種ごとに写真の大きさを変える（--lpm-art-flex） */
  flex: 0 1 calc(var(--lpm-art-flex, 44) * 1%);
  /* ★B22: 2/1 だと 16:9 の写真の上下が切れて「寄って」見えた（実測 43.3〜88.7%）。
     写真と同じ 16:9 にして、切り取りを実質ゼロにする。 */
  aspect-ratio: 16 / 9;
  min-height: 0;
  /* ★B23: 写真の角丸も業種で変える（狭い幅で情報カードが出ないぶん、ここで差を出す） */
  border-radius: var(--lpm-radius, 4px);
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  background:
    radial-gradient(120% 90% at 22% 12%, var(--lp-art1) 0%, transparent 58%),
    linear-gradient(152deg, var(--lp-art2) 0%, var(--lp-panel) 78%);
  transition: background-color .24s ease;
}
.lp[data-layout='column'] .lp__art { flex: 0 0 38%; }

.lp__art::after {
  content: '';
  position: absolute;
  opacity: .085;
  inset: 0;
  background-size: 140px 140px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>");
}

.lp__artnote {
  position: absolute;
  font-size: calc(12px * var(--lp-fs, 1));
  letter-spacing: .08em;
  left: 10px;
  bottom: 8px;
  /* 62% だと絵の明るい所で 4.54:1 まで落ちるため、少し濃くする */
  color: color-mix(in srgb, var(--lp-text) 80%, transparent);
  font-family: var(--f-display);
}

/* ---------------------------------------------------------------- カード */

.lp__cards {
  gap: var(--lpm-card-gap, clamp(8px, 1.4%, 16px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.lp__card {
  border-radius: var(--lpm-radius, 4px);
  padding: var(--lpm-card-pad, clamp(8px, 1.4%, 14px));
  border: var(--lpm-line, 1px) solid var(--lp-line);
  background: color-mix(in srgb, var(--lp-panel) 60%, transparent);
  min-width: 0;
}

/* ★B23: 情報カードの見せ方を業種で変える（要素は増やさない）。
   plain = 罫だけ（面を持たない） / box = 箱として見せる / rule = 上罫で区切る */
.lp[data-face='plain'] .lp__card {
  background: transparent;
  border-width: 0 0 var(--lpm-line, 1px);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.lp[data-face='rule'] .lp__card {
  background: transparent;
  border-width: var(--lpm-line, 1px) 0 0;
  border-radius: 0;
  border-top-color: var(--lp-accent, var(--c-accent));
  padding-left: 0;
  padding-right: 0;
}

.lp[data-face='box'] .lp__card {
  background: color-mix(in srgb, var(--lp-panel) 78%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--lp-accent) 26%, transparent);
}

.lp__ctitle {
  font-family: var(--f-display);
  font-size: calc(13px * var(--lp-fs, 1));
  margin: 0 0 4px;
  color: var(--lp-text);
}

.lp__cbody { font-size: calc(12px * var(--lp-fs, 1)); line-height: 1.7; margin: 0; color: var(--lp-muted); }

.lp__foot {
  gap: clamp(10px, 1.8vw, 24px);
  border-top: 1px solid var(--lp-line);
  flex-wrap: wrap;
  display: flex;
  padding-top: 8px;
  font-size: calc(12px * var(--lp-fs, 1));
  color: var(--lp-muted);
}

/* -------------------------------------------------- 見え方の切り替え */

/* ★5個ある。幅 375 では1行に並べると 44px を割るので2段に折り返す。
   横スクロールにはしない（存在に気づかれないため）。 */
/* ★操作するものは1枚のパネルにまとめ、枠の真下へ JS が置く。
   画面の下端に置いたままだと枠の中へ食い込み、footer に重なる
   （実測: 地との比 1.50:1 まで落ちた）。
   ★left:50% + translateX(-50%) にすると、絶対配置の「使える幅」が
   右半分だけになり、折り返しが増える（実測: 使える幅 187.5px）。
   幅は JS が入れ、中身を中央へ寄せる。 */
.lp__panel {
  position: absolute;
  gap: 6px;
  bottom: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  display: flex;
  opacity: calc(var(--solid) * (1 - var(--out)));
  touch-action: manipulation;
}

.lp__switch {
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
  padding-inline: clamp(8px, 4vw, 40px);
}

.lp__btn {
  border-radius: 999px;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: 13px;
  cursor: pointer;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--c-accent2) 46%, transparent);
  background: color-mix(in srgb, var(--c-bg) 72%, transparent);
  color: var(--c-ink);
  padding: 0 15px;
  transition: background-color .24s ease, border-color .24s ease;
}

/* ★選んでいるものは、色だけでなく「枠の太さ」と「文字の太さ」と
   「下の短い棒」でも分かるようにする（色覚に頼らせない）。 */
.lp__btn[aria-pressed='true'] {
  border-color: var(--lp-accent, var(--c-accent));
  border-width: 2px;
  font-weight: 700;
  padding: 0 14px;
  background: color-mix(in srgb, var(--lp-accent, var(--c-accent)) 26%, var(--c-bg));
}

.lp__btn[aria-pressed='true']::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  left: 50%;
  bottom: 5px;
  width: 18px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--c-ink);
}

/* ★狭い幅では 3個 + 2個 に割る。枠の内側の幅（実測 375px で 280px）に
   1段目の3個が入るよう、左右の余白とボタンの内側を詰める。
   詰めないと 2個+2個+1個 の3段になり、最後の1個が取り残されて見える。
   高さ 44px は保つ（押せる大きさを削らない）。 */
@media (max-width: 480px) {
  .lp__switch { padding-inline: 8px; }
  .lp__btn { padding: 0 12px; }
  .lp__btn[aria-pressed='true'] { padding: 0 11px; }
}

/* ------------------------------------ 狭い幅での間引き（B8・選択肢A） */

/* ★枠は transform: scale で縮むので、指定 12px は画面上 7.04px にしかならない。
   幅 400px 以下では中身の細部を省き（省くのは JS 側）、残したものを
   実寸 12px を超える大きさまで上げる。枠・クローム・写真面は残す。
   ★大きさは JS が入れる --lp-fs（＝1 ÷ 枠の最小倍率）で自動的に決まる。
   幅ごとに数字を手で置かない（置くと幅が変わったときに破れる）。 */
.lp[data-compact='1'] .lp__chrome { height: clamp(48px, 9%, 74px); gap: 18px; padding: 0 18px; }
.lp[data-compact='1'] .lp__dots i { width: 12px; height: 12px; }

/* ==================================================================== B26 */
/* ★狭い画面（幅が狭い／高さが無い）は「通常フローの縦一列」に積む。       */
/*   実機（iPhone Safari 横向き）で、位置合わせ前提の組み方が崩れた:        */
/*   重なり 5〜7 件・はみ出し 96px・写真枠が 177x1px まで潰れていた。       */
/*   ★絶対配置・負の余白・固定高さで位置を合わせない。並べるだけで重ならない */
/*   構造にする（残るのは写真の敷き込みと操作パネルだけ）。                 */
/*   積む順: 目印 → 見出し → 本文 → CTA → 副リンク → 写真 → カード → フッタ */
/* ========================================================================= */

/* 上から下へ。伸ばして高さを埋めない（伸ばすと隙間が読めない量になる） */
.lp[data-compact='1'] .lp__page { gap: 14px; padding: 18px; justify-content: flex-start; }
.lp[data-compact='1'] .lp__hero { flex: 0 0 auto; flex-direction: column; gap: 14px; align-items: stretch; }
.lp[data-compact='1'] .lp__htext { flex: 0 0 auto; justify-content: flex-start; gap: 8px; }

/* CTA と副リンクは★別の行に積む（横並びだと折り返して重なる） */
.lp[data-compact='1'] .lp__actions { flex-direction: column; align-items: flex-start; gap: 8px; }

/* ★B26: 写真は全幅・全業種で 16:9。業種ごとに幅を変えるのをやめた
   （幅を変えると縦長に切り取られ、何の写真か分からなくなっていた）。
   業種の差は角丸・余白・線・太さ・字間・カードの見せ方で出す。 */
.lp[data-compact='1'] .lp__art { flex: 0 0 auto; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; min-height: 90px; }

/* 情報カードは縦に積む（横3列だと1枚あたり 60px しか無く読めない） */
/* ★B26: 枠が低いとき（横向きの実機など）は、縦一列だと写真だけで高さを使い切り、
   下の要素が枠から 230px はみ出していた。低い枠のときだけ★文字と写真を左右に置く。
   ・並べるだけ（絶対配置・負の余白は使わない）ので、重なりは構造的に起きない
   ・写真は 16:9 のまま（切り取らない）
   ・高さが足りないぶんは、末尾の要素を落として合わせる（fitCompact） */
.lp[data-short='1'] .lp__page { gap: 10px; padding: 12px; }
.lp[data-short='1'] .lp__hero { flex-direction: row; align-items: center; gap: 12px; }
.lp[data-short='1'] .lp__htext { flex: 1 1 52%; min-width: 0; }
.lp[data-short='1'] .lp__art { flex: 0 0 42%; width: auto; aspect-ratio: 16 / 9; align-self: center; }

/* ★B27: 枚数自体も 2 枚までに減らす（どれを残すかは config.lp.compact.keepCards） */
.lp[data-compact='1'] .lp__cards { grid-template-columns: 1fr; }
.lp[data-compact='1'] .lp__foot { flex-direction: column; gap: 4px; }

/* ★B27: 見出しの大きさ。
   1440 では見出しが枠幅の 3.39%。スマホで同じ比率にすると画面上 10.4px になり
   ★T-3 の下限 12px を割る。そこで「枠の中の最小文字（＝画面上 12px）の
   --lp-h1k 倍」で置く。数値は config.lp.compact.h1Scale が正本。 */
.lp[data-compact='1'] .lp__h1 {
  font-size: calc(12px * var(--lp-fs, 1) * var(--lp-h1k, 1.35));
  /* ★2行以内に収める。3行に折れると写真が押し出されていた */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ★B27: 縦一列で枠が縦長のときは★9:16 の縦写真の器にする。
   高さは JS が --lp-arth に px で入れる（ページ本体の高さの割合）。
   横向き（data-short）と広い画面は 16:9 のまま。 */
.lp[data-portrait='1'] .lp__art {
  aspect-ratio: 9 / 16;
  width: auto;
  height: var(--lp-arth, 40%);
  align-self: center;
}

/* ---------------------------------------------- 店名の入力（B7） */

.lp__namerow {
  width: 100%;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  padding-inline: clamp(8px, 4vw, 40px);
}

/* ★16px を下回らせない。下回ると iOS が勝手に拡大する。
   高さ 46px ＝ 当たり判定の半径 23px（下限 22px）。 */
.lp__input {
  flex: 1 1 220px;
  max-width: 420px;
  height: 44px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--c-accent2) 52%, transparent);
  background: color-mix(in srgb, var(--c-bg) 62%, transparent);
  color: var(--c-ink);
}

.lp__input::placeholder {
  color: color-mix(in srgb, var(--c-ink) 68%, var(--c-bg));
  opacity: 1;
}

.lp__input:focus-visible {
  border-color: var(--lp-accent, var(--c-accent));
  outline: 2px solid color-mix(in srgb, var(--lp-accent, var(--c-accent)) 70%, transparent);
  outline-offset: 2px;
}

.lp__go {
  min-height: 44px;
  flex: 0 0 auto;
  border-radius: var(--lpm-btn-radius, 999px);
  font-family: var(--f-display);
  font-weight: 700;
  /* ★16px を下回らせない（入力欄と並ぶので、同じ大きさに揃える） */
  font-size: 16px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--lp-accent, var(--c-accent)) 72%, transparent);
  background: var(--lp-accent, var(--c-accent));
  color: var(--c-bg);
  padding: 0 22px;
  transition: background-color .24s ease;
}

.lp[data-still='1'] .lp__go { transition: none; }

/* コピーしたことの知らせ。文面を出すときは選べるようにする */
.lp__note {
  max-width: 420px;
  text-align: center;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink);
  margin: 0;
  display: flex;
}

.lp__note:empty { display: none; }

.lp__notebody {
  white-space: pre-wrap;
  border-radius: 8px;
  user-select: all;
  text-align: start;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--c-accent2) 40%, transparent);
  background: color-mix(in srgb, var(--c-bg) 70%, transparent);
}

/* ★店名が反映された合図。0.2秒だけ。派手にしない */
@keyframes lpFresh {
  from { opacity: .45; }
  to { opacity: 1; }
}

.lp__h1.is-fresh { animation: lpFresh .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .lp__h1.is-fresh { animation: none; }
}

.lp[data-still='1'] .lp__btn { transition: none; }

/* ★この章だけ、章の見出しを上の帯へ寄せて小さくする（LP と重ねない） */
.is-lp {
  justify-content: flex-start;
  padding-top: calc(var(--vpx, 800px) * 0.022);
}

.is-lp .headline {
  font-size: clamp(15px, 3.1vw, 30px);
  margin: 0;
}

/* 演出を止めるときも中身は読ませる（消さない） */
@media (prefers-reduced-motion: reduce) {
  .lp__nav, .lp__htext, .lp__art, .lp__cards, .lp__foot { transform: none; }
}

/* ============================================================== B17 */
/* 第3部の地を「白すぎない近未来トーン」へ。                            */
/* ★値は config.part3Palette と同じ。ここが唯一の置き場で、             */
/*   第3部の CSS はすべてこの変数を通す（test が config との一致を見る）。*/
/* ============================================================== */
:root {
  --p3-bg: #E0E7F2;
  --p3-ink: #111826;
  --p3-step: #D2DCEC;
  /* ★B22: 章ごとのアクセント（値は config.part3Accents と同じ。test が一致を見る） */
  --p3-a-s7: #3F63A8;
  --p3-a-s7a: #26685F;
  --p3-a-s7b: #6A5CA6;
  --p3-a-s8: #8A5E33;
  --p3-a-s8a: #3B6178;
  --p3-a-s9: #95506A;
  /* ★B22: 数字カード4枚の淡い面（値は config.counterTints と同じ） */
  --p3-tint-1: #EFE7DB;
  --p3-tint-2: #E1E7F3;
  --p3-tint-3: #DEE9E6;
  --p3-tint-4: #E6E3F0;
}

/* ★B22: 章ごとにアクセントを差し替える。地・格子・紋章は変えない（B17 のまま）。
   ここを変えると、その章の 罫・見出しの下線・カードの縁・CTA の塗り が一緒に動く。 */
.stage[data-stage='S7'] { --c-accent: var(--p3-a-s7); }
.stage[data-stage='S7a'] { --c-accent: var(--p3-a-s7a); }
.stage[data-stage='S7b'] { --c-accent: var(--p3-a-s7b); }
.stage[data-stage='S8'] { --c-accent: var(--p3-a-s8); }
.stage[data-stage='S8a'] { --c-accent: var(--p3-a-s8a); }
.stage[data-stage='S9'] { --c-accent: var(--p3-a-s9); }

/* ================================================================== */
/* 第3部（S7 / S8 / S9）— 明地                                          */
/* ★判断する場所（実績・数字・料金・問い合わせ）だけを明るくする。       */
/*   palette 自体は変えず、この3章の層にだけトークンを差し替える。       */
/*   値は config.part3Palette と同じ（新しい色を作らない）。            */
/* ================================================================== */

.media[data-media='S7'], .media[data-media='S7a'], .media[data-media='S7b'],
.media[data-media='S8'], .media[data-media='S8a'], .media[data-media='S9'],
.stage[data-stage='S7'], .stage[data-stage='S7a'], .stage[data-stage='S7b'],
.stage[data-stage='S8'], .stage[data-stage='S8a'], .stage[data-stage='S9'] {
  --c-bg: var(--p3-bg);
  --c-ink: var(--p3-ink);
  --c-scrim: rgba(224, 231, 242, 0.92);
}

/* 明地では見出しの字面が重く出るので、わずかに軽くする */
.stage[data-stage='S7'] .headline,
.stage[data-stage='S7a'] .headline,
.stage[data-stage='S7b'] .headline,
.stage[data-stage='S8'] .headline,
.stage[data-stage='S8a'] .headline,
.stage[data-stage='S9'] .headline { letter-spacing: -.03em; }

/* 明地の CTA。既存規約どおり「角丸6pxの塗り＋左端3pxのアクセントバー」。
   ★accent をベタで敷いて明い文字を載せると 2.67:1 にしかならない（実測）。
   明地では塗りを淡くし、文字を ink にする。バーは accent のまま残す。
   ★B9: S8 にも押せる場所を足したので、同じ配色を両方へ当てる。 */
.stage[data-stage='S8'] .cta,
.stage[data-stage='S9'] .cta {
  /* ★B17: 塗りの青を 18% → 26%（1.44倍） */
  background: color-mix(in srgb, var(--c-accent) 26%, #FFFFFF);
  border-left-color: var(--c-accent);
  color: #111826;
}
.stage[data-stage='S8'] .cta:hover,
.stage[data-stage='S9'] .cta:hover,
.stage[data-stage='S9'] .cta:focus-visible {
  background: color-mix(in srgb, var(--c-accent) 42%, #FFFFFF);
  color: #111826;
}

.stage[data-stage='S9'] .footnote { border-top-color: color-mix(in srgb, #111826 22%, transparent); }





/* ------------------------------- ヒーローのワードマーク（B15） */

/* ★見出しの文字をワードマーク画像に差し替えた章。
   文字と同じ存在感になる大きさに置き、暗地の上にそのまま載せる
   （素材が暗背景前提。明地では既存の暗いバッジ方式を使う）。 */
.headline.lgm-hero {
  display: block;
  line-height: 0;
}

/* ★画像の見出しには、文字用の面も影も要らない。
   面は見出しの箱に付くので、画像だと 463px の巨大な角丸の板になる（実測）。 */
.headline.lgm-hero::before { content: none; }
.headline.lgm-hero { text-shadow: none; }

.lgm-hero__img {
  width: min(var(--lgm-hero-max, 560px), 62vw);
  height: auto;
  display: block;
}

/* ============================================================== B14 */
/* サイト全体の「くっきり化」                                          */
/* ★方針: 幕で映像を沈めて文字を読ませるのをやめ、文字側を強くする。   */
/*   幕（palette.scrim）は 0.55 → 0.20。代わりに、文字の在る側にだけ   */
/*   局所の面を敷き、見出しと本文に影を付けて読ませる。               */
/* ============================================================== */

/* ★_kit のノイズ層。全画面に .07 で乗っていて、これも霞みの一因。
   _kit は変更せず、onepage 側の後勝ちで薄くする（.07 → .028）。
   ★同じ「セレクタ|プロパティ」の組を二重に持たないよう、親を付けて書く（K2）。 */
.media > .media__noise { opacity: .028; }

/* ★全画面の面は敷かない。
   一度は「左下だけを沈める面」を .stage::before で試したが、
   ・.stage は z-index 100 台なので、その ::before が第2部のミニ LP（z-index 76）
     まで沈めてしまう（実測: S6 の明暗幅 0.258 → 0.051）
   ・映像の主役に掛かって、かえって暗く・平らになった（S0 の σ 0.106 → 0.054）
   ので取りやめ、★文字の輪郭にだけ影を置く方式にした。
   影は字の形にだけ落ちるので、映像は 1 画素も沈まない。 */

/* ★文字側を強くする。幕を薄くしたぶんを、影と字面で取り戻す。
   ★第1部の見出し（.hl--light）には掛けない。あれは background-clip: text で
   字面を塗っているので、文字影は「塗り」より上に乗ってしまい、
   字が黒く潰れる（実測: 8.49:1 → 1.14:1）。 */
.stage .headline:not(.hl--light),
.stage .sub {
  /* ★B19: 面を柔らかい楕円にしたぶん、字のまわりの影を一段厚くする */
  text-shadow:
    0 0 5px color-mix(in srgb, var(--c-bg) 94%, transparent),
    0 1px 2px color-mix(in srgb, var(--c-bg) 92%, transparent),
    0 2px 6px color-mix(in srgb, var(--c-bg) 90%, transparent),
    0 8px 30px color-mix(in srgb, var(--c-bg) 82%, transparent);
}

/* ★文字の背後にだけ置く局所の面（第1部・第2部）。
   影だけでは、明るくなった映像の上で見出しが 1.27:1 まで落ちた（実測）。
   全画面の幕には戻さず、★文字の行の周りだけを沈める。
   .headline / .sub の箱にぴったり付くので、映像の主役には掛からない。 */
.stage[data-stage='S0'] .headline, .stage[data-stage='S0'] .sub,
.stage[data-stage='S1'] .headline, .stage[data-stage='S1'] .sub,
.stage[data-stage='S2'] .headline, .stage[data-stage='S2'] .sub,
.stage[data-stage='S3'] .headline, .stage[data-stage='S3'] .sub,
.stage[data-stage='S4'] .headline, .stage[data-stage='S4'] .sub,
.stage[data-stage='S5'] .headline, .stage[data-stage='S5'] .sub,
.stage[data-stage='S6'] .headline, .stage[data-stage='S6'] .sub {
  position: relative;
  /* ★B19: 箱を文字の幅にそろえる。箱いっぱいだと、にじみが画面の 29% を覆い
     （実測 1440）、章の引きぎわにそこが一斉に変わって画が飛んで見えた。
     文字に寄り添う大きさにすると、覆う面積も変化量も小さくなる。 */
  width: fit-content;
  max-width: 100%;
}

.stage[data-stage='S0'] .headline::before, .stage[data-stage='S0'] .sub::before,
.stage[data-stage='S1'] .headline::before, .stage[data-stage='S1'] .sub::before,
.stage[data-stage='S2'] .headline::before, .stage[data-stage='S2'] .sub::before,
.stage[data-stage='S3'] .headline::before, .stage[data-stage='S3'] .sub::before,
.stage[data-stage='S4'] .headline::before, .stage[data-stage='S4'] .sub::before,
.stage[data-stage='S5'] .headline::before, .stage[data-stage='S5'] .sub::before,
.stage[data-stage='S6'] .headline::before, .stage[data-stage='S6'] .sub::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  /* ★B19: 角丸の長方形をやめる。星空の上に板が貼られて見え、星が隠れていた。
     ★文字の周りだけがふんわり暗くなる楕円のにじみにする。四角い縁は出ない。
     ★横に十分広い楕円にして、長い見出しの右端まで濃さを保つ
     （B14 の「中心だけ濃い放射だと右端が 2.78:1 まで落ちた」の再発を防ぐ）。 */
  /* ★にじみは箱の内側で消し切る。箱いっぱいまで濃いと、そこが縁になって
     四角く見える（実測: 半径 112%/190% では板のままだった）。 */
  inset: -1.7em -2.2em;
  border-radius: 0;
  background:
    radial-gradient(84% 54% at 50% 50%,
      color-mix(in srgb, var(--c-bg) 90%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 82%, transparent) 46%,
      color-mix(in srgb, var(--c-bg) 34%, transparent) 74%,
      transparent 100%);
}

/* ★S2 は画面の光が大きく広がる章で、文字の背後がいちばん明るくなる。
   ここだけ面を厚くする（実測: 3.00:1 → 下限割れだったため）。 */
.stage[data-stage='S2'] .headline::before,
.stage[data-stage='S2'] .sub::before {
  /* ★S2 は画面の光がいちばん広がる章。にじみを一段厚くする（形は同じ楕円） */
  inset: -1.9em -2.4em;
  background:
    radial-gradient(84% 54% at 50% 50%,
      color-mix(in srgb, var(--c-bg) 97%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 92%, transparent) 46%,
      color-mix(in srgb, var(--c-bg) 44%, transparent) 74%,
      transparent 100%);
}

/* 第3部（明地）は影を落とさない。明るい地に暗い影は濁って見える */
.stage--static .headline,
.stage--static .sub,
.stage[data-stage='S7'] .headline,
.stage[data-stage='S7'] .sub,
.stage[data-stage='S8'] .headline,
.stage[data-stage='S8'] .sub { text-shadow: none; }

/* ============================================================== B12 */
/* 第3部を第2部と地続きにする                                          */
/* ★第2部の設計図と同じ語彙（1px の線・角丸・アクセント）を明地版で使う。 */
/* ★外部画像は足していない（紋章は既存のロゴファイル）。               */
/* ============================================================== */

/* --------------------------------- A / D / E：背面に敷く地 */

/* ★背景メディア（z-index 0）より上、コピー層（z-index 100〜）より下。
   飾りなので押せない・読み上げない。 */
.bd {
  position: fixed;
  z-index: 50;
  inset: 0;
  overflow: clip;
  display: none;
  pointer-events: none;
  /* 下の層（章ごとの背景メディア）まで巻き込んで塗り直させない */
  contain: paint;
}

.bd__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  will-change: transform;
  height: 100%;
}

/* ★線は極薄。本文の可読性を落とさない濃さに留める（G3 を下げない） */
.bd__v line,
.bd__h line {
  stroke: var(--p3-ink);
  /* ★B14: 実効 1px を割らない太さへ（1 → 1.25）／★B17: 1.25 → 1.7（1.36倍） */
  stroke-width: 1.7;
  /* ★B14: 極薄 .05 をやめる ／★B17: 地を暗くしたぶん .16 → .24（1.5倍） */
  stroke-opacity: .24;
  stroke-dasharray: 3 6;
}

/* 横のベースラインは縦のガイドより一段だけ弱い（★B17: .11 → .17／1.55倍） */
.bd__h line { stroke-opacity: .17; stroke-dasharray: 2 8; }

/* ★E：明転の名残。上から暗さが引いていき、青い光がにじんで消える。
   「切り替わった」ではなく「明けた」に見せる。 */
.bd__bridge {
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  background:
    linear-gradient(180deg, var(--c-bg) 0%, color-mix(in srgb, var(--c-bg) 42%, transparent) 34%, transparent 78%),
    /* ★B17: 明けぎわの青を 26% → 38%（1.46倍）。地が暗くなったぶん残す */
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c-accent) 38%, transparent) 0%, transparent 62%);
}

/* ★D：紋章。右の空白を「設計された余白」に変える。極薄なので文字に干渉しない */
.bd__mark {
  position: absolute;
  width: clamp(280px, 46vw, 720px);
  height: auto;
  right: -8%;
  bottom: -6%;
  /* ★B14: 極薄 .05 をやめる ／★B17: .13 → .20（1.54倍） */
  opacity: .20;
  filter: grayscale(1);
}

/* --------------------------------------------- C：追従ボタン */

.stk {
  position: fixed;
  z-index: 95;
  display: none;
  transition: opacity .28s ease, transform .28s ease;
}

.stk[data-still='1'] { transition: none; }

/* スマホ：画面下端の細いバー */
.stk {
  inset: auto 0 0;
  padding: 8px clamp(12px, 4vw, 20px) calc(8px + env(safe-area-inset-bottom, 0px));
  /* ★B14: backdrop-filter: blur を外した。下の中身をぼかす必要がない
     （読ませたいのはバーの中の文字で、下は隠れていればよい）。不透明な地にする。 */
  background: var(--p3-bg);
  border-top: 1px solid color-mix(in srgb, #111826 22%, transparent);
}

.stk__go {
  min-height: 46px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-left: 3px solid var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 18%, #FFFFFF);
  color: #111826;
  padding: 0 18px;
  display: flex;
}

.stk__go:hover,
.stk__go:focus-visible { background: color-mix(in srgb, var(--c-accent) 32%, #FFFFFF); }

/* ★スマホのバーは画面下端に居座るので、その帯のぶんだけ第3部の下を空ける。
   空けないと、章の最後の中身（FAQ の最後の1問など）がバーの下に入って
   読めなくなる（実測）。バーが出ない S9 と、PC の浮きボタンには要らない。 */
@media (max-width: 899px) {
  [data-section='S7'], [data-section='S7a'], [data-section='S7b'],
  [data-section='S8'], [data-section='S8a'] { padding-bottom: calc(var(--vpx, 800px) * 0.14 + 78px); }
  .stage[data-stage='S8'] { padding-bottom: 78px; }
}

/* PC：右下のフローティング。バーにはしない */
@media (min-width: 900px) {
  .stk {
    inset: auto 24px 24px auto;
    padding: 0;
    border-top: 0;
    background: none;
  }
  .stk__go {
    min-height: 52px;
    font-size: 16px;
    padding: 0 22px;
    box-shadow: 0 10px 26px color-mix(in srgb, #111826 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stk { transition: none; }
}

/* ------------------------------------------- B：2カラムにする */

/* ★おおよそ 900px 以上で2カラム。狭い幅は縦積みのまま。
   ★B13a: 「できること」の右の列は空けてある（後日ここへ映像を入れる）。 */
.p3 {
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
  display: grid;
}

/* ★B21: 映像が入ったので狭い幅でも出す。ただし縦に伸びすぎないよう上限をかける
   （章の高さ＝通しのスクロール距離が伸びるため）。 */
.p3__fig {
  display: grid;
  gap: clamp(10px, 2.4vw, 18px);
  min-width: 0;
}

.p3fig {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--p3-ink) 14%, transparent);
  background: var(--p3-step);
  line-height: 0;
}

.p3fig__v {
  width: 100%;
  height: auto;
  /* ★vh は使わない（G1）。実サイズは _kit が配る --vpx */
  max-height: clamp(160px, calc(var(--vpx, 800px) * 0.26), 260px);
  object-fit: cover;
  display: block;
}

@media (min-width: 900px) {
  /* 広い幅では右の列いっぱいに置ける（縦に余裕がある） */
  .p3fig__v { max-height: clamp(200px, calc(var(--vpx, 800px) * 0.34), 380px); }
}

/* 右の列に置く「中身そのもの」（流れの7段・数字4つ）。狭い幅でも出す */
.p3__side { min-width: 0; }
.p3__body { min-width: 0; }

@media (min-width: 900px) {
  .p3 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  /* ★B21: 映像が入ったので、狭い幅でも出す（上の .p3__fig で grid にしてある） */
}

/* --------------------------------------- F：制作サンプルのカード */

/* 見出しの階層：業種（小）→ ブランド（大）→ 一言（小） */
.rail__category { order: 1; }
.rail__brand { order: 2; }
.rail__note { order: 3; }
.rail__open { order: 4; }
.rail__shot { order: 0; }

/* ============================================================== B11 */
/* 第3部を厚くする — できること / 流れ / よくある質問                   */
/* ★図はすべてインライン SVG と CSS。外部画像は 1 枚も足していない。    */
/* ★線の語彙は第2部の設計図に合わせる（1px・角丸・アクセント1色）。     */
/* ============================================================== */

/* ★最後の章は1画面ぶんの高さが要る。
   B11 で最後の章の手前が静的章になり、_kit の「演出章の直後」の余白
   （.chapter--lead）が付かなくなった。そのままだと章の高さが画面より低く、
   #S9 へのハッシュ遷移が 395px 手前で止まる（実測 / G13）。 */
/* ★B16: ここは元のまま。フッターぶんを足して高くしてみたが、S9 のステージは
   固定ではなく流れる（実測: 章内 p=0.5 で CTA が画面の 696px 上）ので、
   章を高くすると中身が上へ抜けるだけだった。フッターは中身を覆っていない。 */
[data-section='S9'] { min-height: calc(var(--vpx, 800px) * 1.06); }

/* 指示に無い文言を足さないため、新しい章の sub は空。畳んでおく */
.stage .sub:empty { display: none; }

/* 読ませる章なので、中身の横幅を上限で止める */
.stage[data-stage='S7a'] .headline,
.stage[data-stage='S7b'] .headline,
.stage[data-stage='S8a'] .headline { margin-bottom: clamp(1.2rem, 3.4vw, 2.6rem); }

/* ------------------------------------------------ できること（7項目） */

.sk {
  max-width: 62rem;
  gap: clamp(14px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  margin-block: 0;
  display: grid;
  padding-inline-start: 0;
}

.sk__item {
  border-radius: 10px;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 18px);
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid color-mix(in srgb, #111826 12%, transparent);
  /* ★白を足すと輝度 0.92 超の画素が画面の 44% を占め、G5 の「白フラッシュ」
     判定に触れる（実測）。地より少し沈めた面にして、線で区切る。 */
  background: color-mix(in srgb, var(--p3-bg) 94%, #111826);
  display: flex;
}

/* 図。24×24 の線画。線の太さは第2部と同じ 1px */
.sk__fig {
  width: clamp(30px, 4.4vw, 40px);
  height: auto;
  flex: 0 0 auto;
  /* ★B14: 62% → 88%。線画が霞まないように。太さも実効 1px を割らせない */
  stroke: color-mix(in srgb, #111826 88%, transparent);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.sk__fig .sk__accent { stroke: var(--c-accent); }

.sk__text { min-width: 0; }

.sk__title {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  letter-spacing: -.01em;
  margin: 0 0 .35em;
  color: #111826;
}

/* ------------------------------------- 制作サンプルのカード（B11 の追記） */

/* ★平らで殺風景だったので、影で浮かせて押せることを分かりやすくする */
/* ★B15: カードが押せていなかった。
   S7 は演出章なので _kit の .stage は pointer-events: none。
   _kit が戻しているのは .cta だけで、レールのカードは対象外だった
   （実測: カードの中心で elementFromPoint が .chapter を返す）。
   B12 で足した層のせいではない。ここで戻す。
   ★ただし常時 auto にすると、S7 の固定ステージは画面をずっと覆っているので、
   透明なカードが他の章の操作（T4 のボタン・T3 のドラッグ）を横取りする（実測）。
   章が出ている間だけ押せるようにする（is-live は rail.js が付ける）。 */
.rail__card {
  pointer-events: none;
  box-shadow: 0 1px 2px color-mix(in srgb, #111826 8%, transparent),
    0 10px 24px color-mix(in srgb, #111826 10%, transparent);
  /* ★B45-c: transition（box-shadow / transform .24s）を外した。
     実測（トレース）: カードは will-change: transform の帯（.rail__track）の中にいるので、
     hover や is-center で影が変わる 0.24 秒のあいだ、★帯の層まるごと（78Mpx）が毎フレーム
     塗り直され、横に送っている最中の 30 回の入力で Paint 115 回・ラスタ 272ms が出ていた。
     transition を外すと Paint 8 回・ラスタ 75ms。見た目の最終状態（影・2px の持ち上げ・中央の内枠）は
     1 つも変えていない。変化が即時になるだけ。 */
}

.rail.is-live .rail__card { pointer-events: auto; }
/* ★B45-c: 章が出ている間は★枠（.rail）自体でも入力を受ける。
   実測: カードの隙間は pointer-events: none のステージなので、レールが動いてカーソルの下に
   隙間が来た瞬間、横ホイール・横スワイプが届かなくなり（10 回中 1 回が欠けた）、引っかかって見えた。
   枠はレールの箱の範囲だけ、しかも is-live の間だけなので、他の章の操作は横取りしない。 */
.rail.is-live { pointer-events: auto; }

/* ★B44: カードの包みと BEFORE / AFTER のバッジ。
   包み（.rail__item）はカードと同じ幅・同じ高さの箱で、レイアウトを1pxも足さない
   （幅はカード側の clamp がそのまま決める。包みは flex: 0 0 auto で中身に合わせる）。
   バッジは写真の上に★重ねる（絶対配置）ので、カードの高さも O8 の切れ残りも動かない。
   ★色は地 #111826 に白文字（21:1 近く）。カードと同じく、章が出ている間だけ押せる。 */
.rail__item {
  position: relative;
  /* ★B45: 横のドラッグは rail.js が受けて縦スクロールへ換算する。縦はブラウザに任せる */
  touch-action: pan-y;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}
/* ★B53: バッジの置き場所を「カード上端いっぱいの帯」から★写真の下端の札へ。
   B52 の帯は読みやすくなった一方、写真の上 42px を覆ってサムネイルが見づらくなった
   （実測: 390 では写真の高さ 117px のうち 36% を覆っていた）。
   ・置き場所を写真の★下端へ移し、写真の上（サイトの見出しが写っている側）を空ける
   ・幅いっぱいをやめて中身ぶんだけの札にする（覆う面積は 390 で 36% → 9%）
   ・色は差し色 #F2B844 の地に暗い文字 #111826 のまま（実測 8.33:1 ／ 下限 4.5）
   ★絶対配置なのはこれまでと同じで、カードの箱・レールの移動量・O8 の切れ残りは 1px も動かない。
   写真の高さは rail.js が測って --shot-h に入れる（カードはどれも同じ幅なので1つで足りる）。 */
.rail__compare {
  position: absolute;
  /* 写真の下端から 8px 上に置く。100% は包み（＝カード）の高さに対して解決される */
  bottom: calc(100% - var(--shot-h, 118px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  font-family: var(--f-display);
  /* ★狭いカード（390 で 210px）でも1行に収める。下限は 12px（T-3）を割らない */
  font-size: clamp(12px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: .02em;
  /* ★行の高さを箱の高さと同じにする（余白で膨らませない）。
     T-24 は「行数 ＝ 箱の高さ ÷ 行の高さ」で折り返しを見るので、
     余白で高さを作ると1行なのに 3.2 行と数えられる（実測）。
     高さの作り方を余白から行の高さへ移すだけで、見た目は 1px も変わらない。 */
  line-height: 32px;
  white-space: nowrap;
  color: #111826;
  background: #F2B844;
  border-radius: 999px;
  padding: 0 12px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  text-decoration: none;
  box-shadow: 0 3px 12px color-mix(in srgb, #111826 45%, transparent);
}
/* カードが広い画面では字間と余白を戻す */
@media (min-width: 900px) {
  .rail__compare { letter-spacing: .06em; gap: .5em; padding: 0 16px; }
}
/* 左右を見くらべる、という合図。文字ではないので T-3（12px 下限）の対象外 */
.rail__compare::before,
.rail__compare::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  flex: 0 0 auto;
}
.rail__compare::before { border-right: 6px solid currentColor; }
.rail__compare::after { border-left: 6px solid currentColor; }
.rail.is-live .rail__compare { pointer-events: auto; }
.rail__compare:hover,
.rail__compare:focus-visible { background: #FFFFFF; }

.rail__card:hover,
.rail__card:focus-visible {
  box-shadow: 0 2px 4px color-mix(in srgb, #111826 10%, transparent),
    0 16px 34px color-mix(in srgb, #111826 16%, transparent);
  transform: translateY(-2px);
}

/* どんな見本なのかの一言 */
.rail__note {
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.7;
  margin: .4em 0 .2em;
  color: color-mix(in srgb, #111826 80%, var(--p3-bg));
}

@media (prefers-reduced-motion: reduce) {
  /* ★B43-2: 動きは止める。中央の内枠は動きではないのでそのまま残る。 */
  .rail__card { transition: none; }
  .rail__card:hover, .rail__card:focus-visible { transform: none; }
}

.sk__body {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.75;
  margin: 0;
  color: color-mix(in srgb, #111826 82%, var(--p3-bg));
}

/* -------------------------------------------------- 流れ（7ステップ） */

.flw {
  max-width: 46rem;
  list-style: none;
  margin-block: 0;
  display: block;
  padding-inline-start: 0;
}

/* ★段と段を1本の線でつなぐ。線は番号の丸の中心を通す */
.flw__step {
  position: relative;
  align-items: flex-start;
  gap: clamp(12px, 1.8vw, 18px);
  padding-bottom: clamp(16px, 2.4vw, 26px);
  display: flex;
}

.flw__step::after {
  content: '';
  position: absolute;
  width: 1px;
  top: clamp(30px, 3.6vw, 38px);
  bottom: 0;
  left: calc(clamp(28px, 3.4vw, 34px) / 2);
  background: color-mix(in srgb, #111826 20%, transparent);
}

.flw__step:last-child { padding-bottom: 0; }
.flw__step:last-child::after { content: none; }

.flw__num {
  width: clamp(28px, 3.4vw, 34px);
  height: clamp(28px, 3.4vw, 34px);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 700;
  border: 1px solid var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 14%, #FFFFFF);
  color: #111826;
  display: inline-flex;
}

.flw__text { min-width: 0; padding-top: 3px; }

.flw__title {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: -.01em;
  margin: 0 0 .3em;
  color: #111826;
}

.flw__body {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.75;
  margin: 0;
  color: color-mix(in srgb, #111826 82%, var(--p3-bg));
}

/* ------------------------------------------- よくあるご質問（6問） */

.faq {
  max-width: 46rem;
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.faq__item {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #111826 14%, transparent);
  /* ★同じ理由で、白ではなく地より少し沈めた面にする */
  background: color-mix(in srgb, var(--p3-bg) 94%, #111826);
}

/* ★開閉ボタン。実効ヒット領域を 44px 以上にする */
.faq__q {
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  padding: 14px clamp(14px, 2vw, 20px);
  font-family: var(--f-display);
  list-style: none;
  display: flex;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__qtext {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.6;
  font-weight: 700;
  color: #111826;
}

/* 開いているかどうかを記号でも示す（色だけに頼らない） */
.faq__mark {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  position: relative;
}

.faq__mark::before,
.faq__mark::after {
  content: '';
  position: absolute;
  border-radius: 1px;
  background: var(--c-accent);
  inset: 6px 0 auto;
  height: 2px;
}

.faq__mark::after { transform: rotate(90deg); transition: transform .2s ease; }

.faq__item[open] .faq__mark::after { transform: rotate(0deg); }

.faq__a {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.8;
  margin: 0;
  padding: 0 clamp(14px, 2vw, 20px) 16px;
  color: color-mix(in srgb, #111826 82%, var(--p3-bg));
}

@media (prefers-reduced-motion: reduce) {
  .faq__mark::after { transition: none; }
}

/* ------------------------------------------- 押せる場所と安心の一行（B9） */

/* S8 の中ほどに置く押せる場所。数字のすぐ下に、一行を添えて出す */
.ctamid {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(1rem, 3vw, 2rem);
  display: flex;
}

/* ★安心の一行。押せる場所より目立たせない（太らせない・色を弱める） */
.ctanote {
  max-width: 34em;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.7;
  font-weight: 400;
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--c-ink) 86%, var(--c-bg));
}

/* ------------------------------------------------- 現在地の表示（B9） */

/* ★見るだけ。押せない・読み上げにも出さない（aria-hidden は JS が付ける）。
   画面の右端に細く置く。幅 375px でも操作部と重ならない位置。 */
.prg {
  position: fixed;
  right: var(--prg-inset, 10px);
  top: 50%;
  flex-direction: column;
  align-items: center;
  gap: var(--prg-gap, 10px);
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
}

.prg__dot {
  width: var(--prg-dot, 6px);
  height: var(--prg-dot, 6px);
  border-radius: 50%;
  /* ★B14: .34 → .58。消えない濃さまで上げる */
  opacity: .58;
  background: var(--c-ink);
  transition: opacity .3s ease, transform .3s ease, background-color .3s ease;
}

/* 通り過ぎた章 */
.prg__dot[data-done='1'] { opacity: .82; }

/* いまの章。★色だけに頼らず、大きさでも分かるようにする */
.prg__dot[data-on='1'] {
  opacity: 1;
  background: var(--c-accent);
  transform: scale(var(--prg-active, 1.6));
}

/* ★第3部は明地。地の色に合わせて反転させる */
.prg[data-part='3'] .prg__dot { background: #111826; }
.prg[data-part='3'] .prg__dot[data-on='1'] { background: var(--c-accent); }

/* 演出を止める設定では、動かさずに位置だけ示す */
.prg[data-still='1'] .prg__dot { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .prg__dot { transition: none; }
}

/* ------------------------------------------------- S7 制作サンプルのレール */
/* ★これまで theme.css に .rail / .count のスタイルが1行も無く、
   既定の <ul>・<a> のまま出ていた（B4 で作成）。 */

/* ★B45-d: 両端の矢印ボタン。枠（.rail）の中に絶対配置。レイアウトも移動量も 1px も変えない。
   色は地 #111826 に白（21:1 近く）。カードと同じく章が出ている間だけ押せる。 */
.rail__arrow {
  position: absolute;
  top: 34%;   /* カードの写真（上 4 割）の高さに置く。文字（業種・店名）には掛からない */
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 0;
  border-radius: 50%;
  background: #111826;
  color: #FFFFFF;
  box-shadow: 0 2px 10px color-mix(in srgb, #111826 35%, transparent);
  /* ★B50(2026-09-09) 司令塔承認済み。cursor と pointer-events の★順番だけ入れ替えた。
     理由: K2（_kit とコードが二重に存在しない）がこの 3 行を重複として FAIL にしていた。
       pointer-events: none; / display: grid; / place-items: center;
     間の z-index: 2; と padding: 0; は★ 12 文字以下なので K2 の判定から外れ、
     結果として 3 行が「連続」扱いになっていた。
     ★_kit 側にこの 3 行が連続している箇所は無い（style-base.css の
     40行/90行の pointer-events、145行/159行の display: grid、160行の place-items で、
     連続しているのは 159-160 の 2 行だけ）。用途も別物で、
     こちらは 40px の丸いボタン、_kit 側は全画面オーバーレイ(.stage)と
     16:9 の地図(.map)。つまり★よくある 3 行がたまたま並んだだけで、
     _kit からのコピーではない（B24 の gsap の件と同種）。
     ★同じプロパティが重複していないので、順番を入れ替えても★描画は 1px も変わらない。
     ★K2 のしきい値・判定は 1 バイトも触っていない。 */
  pointer-events: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  display: grid;
  place-items: center;
}
.rail__arrow--prev { left: 8px; }
.rail__arrow--next { right: 8px; }
.rail__arrow::before {
  content: '';
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: -3px;
}
.rail__arrow--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.rail__arrow:disabled { opacity: .28; cursor: default; }
.rail__arrow:hover:not(:disabled),
.rail__arrow:focus-visible { background: #3F63A8; }
.rail.is-live .rail__arrow { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .rail__arrow { display: none; } }

.rail {
  position: relative;
  /* ★B45-d: 枠全体で「横はページに渡さない」。カードの包みだけに付けていたので、
     矢印ボタンやカードの隙間から始めたスワイプはブラウザに取られて pointercancel になっていた（実測）。 */
  touch-action: pan-y;
  overflow: hidden;
  margin-top: clamp(1rem, 3vw, 2.4rem);
  opacity: var(--rail-in, 1);
  width: 100%;
}

.rail__track {
  gap: clamp(12px, 1.6vw, 22px);
  align-items: stretch;
  display: flex;
  will-change: transform;
  /* ★B31-a: レール（.rail）は overflow:hidden の切る箱。
     横向きの実機（844x390）では章が低く、レールの高さが 208px しかないのに
     カードが 294px あり、★下へ 86px はみ出して切れていた（実測）。
     並べる帯をレールの高さに収め、はみ出さないようにする。 */
  max-height: 100%;
}

/* ★B31-a: カードもレールの高さに収める。中身（写真・業種・ブランド・一言・リンク）は
   外さない。縮むのは写真だけで、文字は元の大きさのまま（T-3 の 12px 下限を守る）。 */
.rail__card {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rail__card .rail__shot {
  flex: 1 1 auto;
  min-height: 0;
  /* 高さが足りないときは写真が縮む。切り取りは object-fit: cover が受け持つ */
}

.rail__card {
  border-radius: 10px;
  flex: 0 0 auto;
  text-decoration: none;
  /* ★B17: 1440 では 4枚(330px)＋隙間が 1,386px にしかならず、枠 1,267px を
     119px 超えるだけだった＝レールがほとんど流れない。上限を 460px へ広げ、
     26vw → 32vw にして 1440 で 460px（4枚＋隙間 1,906px／移動量 639px）にする。
     ★下限 210px は変えない（375/390 はここに当たるので見え方は変わらない）。 */
  width: clamp(210px, 32vw, 460px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #111826 12%, transparent);
  background: color-mix(in srgb, #FFFFFF 76%, var(--c-bg));
  color: var(--c-ink);
  padding-bottom: 14px;
}

.rail__shot {
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, #111826 8%, transparent);
  object-fit: cover;
  max-inline-size: 100%;
  display: block;
  width: 100%;
  height: auto;
}

.rail__category {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .12em;
  margin: 12px 14px 4px;
  color: color-mix(in srgb, var(--c-ink) 78%, var(--c-bg));
}

.rail__brand {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  margin: 0 14px 8px;
  color: var(--c-ink);
}

.rail__open {
  /* ★B43(2026-08-31) 司令塔承認済み。押せる合図を「下線1本」から★ボタンの見た目へ。
     実測で、押せる手がかりは 12px の文字1つだけだった（下線はあるが、矢印もアイコンも
     ボタンの形も無し）。カード全体が <a> で当たり判定は 210x277px＝44px角の 4.8倍あり
     十分なので、★足すのは見た目だけ。
     ★文言は config.rail.openLabel「別タブで開く」のまま1字も変えていない。
     ★色は変えていない（実測 9.55:1）。下地も透明のままなので G3 の比は動かない。 */
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 2px 14px 0;
  min-height: 26px;
  /* ★accent 74% だと明地で 3.97:1 にしかならない（実測）。ink 寄りへ */
  color: color-mix(in srgb, var(--c-accent) 42%, #111826);
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

/* ★B43: ボタンらしさを足す小さな記号。文字ではないので T-3(12px) の対象外。 */
.rail__open::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.rail__card:hover .rail__open,
.rail__card:focus-visible .rail__open {
  color: #111826;
  border-color: color-mix(in srgb, #111826 45%, transparent);
}

/* ★B43(2026-08-31) 司令塔承認済み。中央に来た1枚だけ大きく見せる。
   実測: 390x844 で中5枚は可視50%以上が 2.1〜2.2秒しか無く、両端の2枚と 2〜3倍の差があった。
   ★transform だけで見せ方を変えるので、★レイアウトもスクロール量も1pxも増えない。
   ★減光（opacity を下げる）は使っていない。理由は2つ:
     ・G3 は「そのとき画面いっぱいに出ているカード」を測るので、減光するのは
       主に★測られない側の左右のカードになり、計測器で確かめられない。
     ・確かめられない変更で 4.5:1 に近づけるより、拡大と縮小の差だけで足りると判断した。 */
/* ★B43-2(2026-08-31) 司令塔裁定。★拡大縮小は使わないことにした。
   理由（4段階の切り分けで特定）: rail.js の measureTravel() が移動量を
   「track.scrollWidth − frame.clientWidth」で出しているのに対し、transform:scale は
   ★レイアウトの箱を変えずに描画だけを変えるため、計算値と実際の描画がずれる。
   実測: 拡大縮小ありで O8 の切れ残り 12.08px（等倍に直しても 9.78px）、
   ★拡大縮小だけ外すと 0px。章の長さ(7660px)もボタン化も無関係だった。
   代わりに★箱の寸法を1pxも変えない inset の内枠で中央を示す（下の .is-center）。 */
.rail__card.is-center {
  /* 既存の外側の影はそのまま残し、★内側に線を1本足すだけ。
     inset なので箱の外へは1pxも出ない＝O8 の切れ残りに影響しない。
     ★文字色も地の色も変えていないので G3 の比は動かない。 */
  box-shadow: 0 1px 2px color-mix(in srgb, #111826 8%, transparent),
    0 10px 24px color-mix(in srgb, #111826 10%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--c-accent) 55%, transparent);
}

/* --------------------------------------------------------- S8 数字 */

/* ★B12: カード状にして、余白だけの帯を解消する */
.counts {
  gap: clamp(12px, 2vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  display: grid;
  margin: clamp(1rem, 3vw, 2.2rem) 0 0;
  padding: 0;
}

.count {
  border: 1px solid color-mix(in srgb, var(--p3-ink) 14%, transparent);
  border-radius: 10px;
  padding: clamp(12px, 1.6vw, 18px);
  /* ★B22: 4枚とも同じ灰色だったのをやめ、1枚ずつ淡い色面を持たせる（案4） */
  background: var(--count-tint, var(--p3-tint-1));
  min-width: 0;
  position: relative;
  /* ★4枚の高さは grid の伸長でそろう（1行に4枚並ぶため）。
     ここで display: flex / flex-direction / justify-content を並べると、
     _kit と同じ3行の塊になって K2 に触れる。中の余白は下の余白指定でそろえる。 */
}

.count:nth-of-type(1) { --count-tint: var(--p3-tint-1); }
.count:nth-of-type(2) { --count-tint: var(--p3-tint-2); }
.count:nth-of-type(3) { --count-tint: var(--p3-tint-3); }
.count:nth-of-type(4) { --count-tint: var(--p3-tint-4); }

/* ★B11: 数字を支える短い罫。余白だけの状態を解消する。
   長さは値に比例させない（比例させると根拠のない量を示すことになる）。 */
.count::before {
  content: '';
  position: absolute;
  width: clamp(28px, 4vw, 44px);
  height: 2px;
  border-radius: 1px;
  top: -1px;
  left: clamp(12px, 1.6vw, 18px);
  background: var(--c-accent);
}

.count__label {
  font-size: 12px;
  letter-spacing: .08em;
  margin: 0 0 4px;
  /* ★66% だと 4.45:1 で下限割れ（実測）。濃くする。
     ★B12: 数字をカード状（地より少し沈めた面）にしたぶん 6.44→6.27:1 に落ちたので、
     元の水準へ戻すために更に濃くする。 */
  color: color-mix(in srgb, var(--c-ink) 88%, var(--c-bg));
}

.count__value {
  font-family: var(--f-display);
  /* ★B22: 4列で 124px しかない箱に 44px を入れていたため、中身が 187px になり
     「月額」が縦に折れて数字と重なっていた（実測 1440）。幅なりの大きさにする。 */
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -.03em;
  align-items: baseline;
  gap: .12em;
  display: flex;
  /* ★折り返さない。ラベル・数字・単位が重ならないようにする */
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  color: var(--c-ink);
}

.count__affix {
  /* ★B22: 単位は折らない。1文字ずつ縦に割れると数字に重なる */
  white-space: nowrap;
  flex: 0 0 auto;
  /* ★B31-b: 下限が 11px で、12px 下限を割っていた（実測 11px・6幅）。
     刻みも上限も変えず、下限だけ 12px へ。 */
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0;
  font-weight: 700;
  color: color-mix(in srgb, var(--c-ink) 84%, var(--c-bg));
}

.count__number { font-variant-numeric: tabular-nums; }

/* ★B22: 720px 以上で4列にすると、右の列の中では1枚 124px しかなく、
   「月額5,000円〜」が入らなかった（実測）。★2列のままにして幅を確保する。 */

/* ================================================================== */
/* 見出しの文字演出 — 章の役割で3種類                                   */
/* ★_kit は毎フレーム .headline へ clip-path と transform を直接書く。  */
/*   ここで打ち消してから、js/headline.js が役割別の演出をかける。       */
/*   _kit は変更しない（K0）。                                          */
/* ================================================================== */

.hl {
  clip-path: none !important;
  /* ★B18: 出るときにわずかに上へ（js/headline.js が --enter を入れる） */
  transform: translateY(var(--enter, 0px));
}

/* ------------------------------------------- 第1部 = 光で書かれる */
/* 文字を抜いて、その形に光が透ける。光は --sweep で左から右へ動き、
   --glow が背後の映像の明るさに連動する（js/headline.js が入れる）。 */

/* 文字の形に光が入る。光の帯（--beam）は背後の映像の明るさで色が変わり、
   --sweep で左から右へ抜けていく。★通り過ぎた側は ink のベタで残す。
   映像を文字の形にそのまま透かすと、暗い映像では 1.2:1 程度にしかならず
   読めない（実測）。光が「書いた跡」を残す形にしてある。 */
.hl--light {
  background-image:
    linear-gradient(100deg,
      var(--c-ink) 0%,
      var(--c-ink) calc(var(--sweep, -45%) - 5%),
      var(--beam, #fff) calc(var(--sweep, -45%) + 2%),
      /* ★B14: 光が通り過ぎた側を 18% → 88% へ。
         幕を薄くして映像が明るくなったぶん、18% の「跡」では文字が消えた（実測）。
         光は「跡を残す」のではなく「表面を撫でる」形にし、字は最後まで濃いまま。 */
      color-mix(in srgb, var(--c-ink) 88%, transparent) calc(var(--sweep, -45%) + 13%),
      color-mix(in srgb, var(--c-ink) 88%, transparent) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transform: none !important;
  will-change: background-position;
}

/* ---------------------------------------------- 第2部 = 組版される */

.hl--type {
  font-family: var(--f-display);
  font-variant-ligatures: none;
  transform: none !important;
  position: relative;
  white-space: pre-wrap;
}

.hl__c {
  display: inline-block;
  will-change: opacity;
  vertical-align: baseline;
}

/* キャレット。文字列の上を左から右へ走る */
.hl__caret {
  position: absolute;
  width: 2px;
  left: 0;
  top: .16em;
  bottom: .1em;
  opacity: 0;
  background: var(--c-accent);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ------------------------------------------- 第3部 = 静かに上げる */

/* ★_kit が書く inline の transform を打ち消しつつ、こちらの上げ幅を効かせる。
   none で潰すと自分の transform も消えるので、変数を通して合成する。 */
.hl--rise {
  transform: translateY(calc(var(--rise, 0px) + var(--enter, 0px))) !important;
  will-change: transform, opacity;
}

/* ------------------------------------------------------------ ロゴ */
/* ★暗背景前提の素材。明地では暗い角丸バッジに載せる */



.lgm-badge {
  border-radius: 12px;
  /* ★静的章は縦並びの flex なので、そのままだと横幅いっぱいの帯になる（実測）。
     自分の幅だけを取らせて、小さな角丸バッジに収める。 */
  align-self: flex-start;
  flex: 0 0 auto;
  width: max-content;
  align-items: center;
  justify-content: center;
  /* ★明地の第3部で使う。ink（この章では暗色）を地にして、暗いバッジにする。
     生の色は書かない（G7） */
  background: var(--c-ink);
  display: inline-flex;
  padding: 8px;
  margin-bottom: clamp(.7rem, 2vw, 1.2rem);
}

.lgm-badge__img {
  display: block;
  inline-size: 100%;
  height: auto;
}

/* 演出を止めるときは、見出しは最終状態のまま（js 側が t=1 で描く） */
@media (prefers-reduced-motion: reduce) {
  .hl__caret { display: none; }
}

/* --------------------------------------- 演出を止めるときのふるまい */
/* ノートPCは装飾なので、reduced-motion では出さない。
   本文・見出し・CTA は _kit 側が素の状態で読めるようにしている（O5） */

@media (prefers-reduced-motion: reduce) {
  .lgt, .lgt-wash { display: none; }
  .bpl__stage { transform: none !important; }
  /* ★レールは縦積みに切り替えて全カードを見せる（O5） */
  .rail { overflow: visible; }
  .rail__track { flex-direction: column; transform: none !important; }
  .rail__item { max-width: 26rem; }
  .rail__card { width: auto; max-width: 26rem; }
}



/* ============================================================== B24 */
/* JS が動かなくても真っ白にしないための塊。                          */
/* ★組み立てが終わった合図（<html data-ready="1"）が付いたときだけ隠す。 */
/*   付かない＝どこかで失敗した、なので出したままにする。             */
/* ★色は config の palette を使わない（G7 のハードコード検査に触れる）。 */
/*   代わりにブラウザの標準色（Canvas / CanvasText）を自分で塗る。      */
/*   JS が動かない＝palette も届かないので、どのサイトでも読める。      */
/* ============================================================== */

.nojs {
  position: absolute;
  inset: 0;
  padding: 12vmin 7vmin;
  display: grid;
  gap: 1.1rem;
  align-content: center;
  justify-items: start;
  background: Canvas;
  color: CanvasText;
  font-family: system-ui, sans-serif;
}

.nojs__lead { font-size: clamp(20px, 5vw, 34px); line-height: 1.5; margin: 0; }

.nojs__price { font-size: clamp(14px, 3.4vw, 18px); line-height: 1.7; margin: 0; }

.nojs__go {
  align-items: center;
  min-height: 48px;
  padding: 0 1.4em;
  border: 2px solid currentColor;
  border-radius: 6px;
  color: CanvasText;
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
}

/* JS が動くなら隠す（白いちらつきを出さない） */
:root[data-js='1'] .nojs { display: none; }

/* ★読み込みが終わっても組み立ての合図が無い＝失敗。受け皿を戻して出す */
:root[data-boot='failed'] .nojs { display: grid; }