/* ソクヨヤ 共通の見た目 ─────────────────────────────────────────
 *
 * ■ なぜ1枚にまとめたか
 *
 *   直す前は、14枚のHTMLそれぞれに同じCSSが写してあった。
 *   1枚を直しても他が直らないので、色を変えるたびに取りこぼしが出る。
 *   実際、緑から青へ戻したとき rgba で書かれた分が別ファイルに残った。
 *   **同じことを14回書かない。1か所に置いて、全ページから読む。**
 *
 * ■ 読み込む順番
 *
 *   このファイルは各ページの <style> より **先** に読む。
 *   ページ固有の指定は後から来るので、必要なところだけ上書きできる。
 *
 * ■ 色
 *
 *   青 #1a56db は、白地に置いても 6.18:1、白文字を乗せても 6.18:1 で
 *   どちらの向きでも読める。緑はこれができず、面と文字で2色に割っていた。
 *   LINEの緑 #06C755 は LINE のものなので、こちらの都合で変えない。
 *   白文字を乗せると 2.26:1 で読めないため、文字は濃くする（7.86:1）。
 */

:root{
  --bg:#ffffff; --bg2:#f7f8fa;
  --ink:#12100E; --ink2:#59524C; --muted:#736A62;
  --line:#e9ebef; --line2:#dfe3ea;
  --brand:#2C54D0; --brand-fg:#ffffff;
  --blue:#2C54D0; --blue-ink:#1f3fa8; --blue-soft:#eef1fb; --blue-vsoft:#f6f8fd;
  --line-green:#06C755;
  --r:16px; --maxw:1120px;
  /* 面の外の地。純白にすると白い板との境が消えて、面が積まれて見えない */
  /* LPの地は黒。面（角丸のパネル）を黒の上に積み、8pxの継ぎ目で連結する。
     白い1枚ページにしないための土台。ここを薄いグレーにすると、
     面の境目が消えて「よくある中央寄せのLP」に戻る */
  /*
    地は白（2026-08-23 Tomの指示）。

    ⚠️ ここが効くのは body と header の2箇所だけ。
       footer は --lp-navy を使っているので、この変更では動かない。
       ヘッダーの中の白いカード（.navbar）は --nav-bg なので残る。
       地が白になっても、影（box-shadow）で面が分かれる。
  */
  --lp-bg:#ffffff;

  /*
    footer の地。**--lp-bg とは別に持つ。**

    ⚠️ 分けている理由

       前は footer も --lp-bg を使っていた。地の色を変えた日に
       footer まで一緒に動き、白地×白文字で消えかけた。
       「ページの地」と「footer の地」は別の判断なので、変数も別にする。

    ⚠️ この青（#2C54D0）は白文字で 6.26:1。暗い面でも読める青として決めてある。
       紺（--lp-navy）は使わない。
  */
  --footer-bg:#2C54D0;
  --lp-navy:#12100E;      /* 暗い面 */
  --lp-ivory:#F2F2F2;     /* 場面転換の地 */
  --lp-paper:#FAFAFA;
  --lp-muted:#E8E8E8;     /* 割った面の、製品側 */
  --lp-seam:8px;          /* 面と面の継ぎ目 */
  --lp-inset:clamp(28px,4vw,72px);
  --stage-gutter:clamp(10px,1.15vw,16px);
  --stage-radius:clamp(18px,1.7vw,24px);
  --tone-ink:#2C54D0;   /* 暗い面もブランドの青。紺は使わない（白文字で 6.26:1）*/
  /* ヘッダーだけ濃いほうの青。ヒーローと同じ色だと境目が消えて、
     ナビが面の一部に見える。色を変えるのではなく、同じ青の濃さを変える */
  /* バーは白。青い面・黒い地のどちらの上でも、明るい帯として浮いて見える。
     ⚠️ ここを変えたら、中の文字とボタンの色も全部ひっくり返すこと。
        白い帯に白い文字が残ると、その部分だけ消える（0件のように見えて、実際は読めていない） */
  --nav-bg:#fff;
  /* ヘッダーのバーの高さ。ヒーローの面はこのぶんだけ引き上げて、
     面の上端が gutter と同じ位置（実測 1440で16px・390で10px）に来るようにする */
  --nav-bar:64px;
  --sh-hover:0 12px 32px -14px rgba(8,9,10,.14);
  --ease:cubic-bezier(.4,0,.2,1); --dur:.16s;
  --f:ui-sans-serif,system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* 字の詰め方を sokuoyakata に合わせる。
   palt は日本語の字幅を字ごとに詰める指定。これが無いと、同じ書体・同じ太さでも
   「、」「。」「ー」の前後だけが空いて、見出しが締まらない。
   字間は足さない（palt と両方かけると、詰めた分をまた広げることになる）*/
/* 本文の基準。**ここが全部の親**。
   向こうは 15px / 1.6。こちらは 16px / 1.7 で、em で書いた小さい文字が
   軒並み1〜3px大きく、行間も広く、面が縦に膨らんでいた。
   1か所直すと、注記・タグ・表のセル・ボタンの文字がまとめて揃う */
body{line-break:strict;font-family:var(--f);color:var(--ink);background:var(--lp-bg);
  font-feature-settings:"palt";font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  letter-spacing:normal;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.num{font-family:var(--f);font-feature-settings:"tnum";letter-spacing:-.02em}

/* 焦点が見える。キーボードだけで操作する人が、いまどこに居るか分かるように */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

/* ── ヘッダー：濃紺のカプセル ─────────────────────────────── */
/* ⚠️ ヘッダーは今回の変更対象外（利用者が現状を了承済み）。
   面の外周 --stage-gutter を可変（clamp(10px,1.15vw,16px)）にしたとき、
   1280px でヘッダーが 2.56px 動いた。ヘッダーだけは元の固定値を持つ。
   ここを --stage-gutter に戻すと、面の幅を触るたびにヘッダーが動く */
:root{--hdr-gutter:16px}
@media(max-width:768px){:root{--hdr-gutter:10px}}
/* バーの上の余白は 19.8px（実測。1440・390 とも同じ）。
   面の上端（gutter）より少し下げて、バーが面に少し重なる位置に置く。

   ⚠️ この上余白（19.8px）を透明のままにしない。
      ヘッダーは sticky なので、**白い面がこの隙間を通り抜けて見える**。
      画面のいちばん上に、面の幅ぴったりの白い帯が出る（実測 y=0〜19・x=16〜1496）。
      スクロールして白い面が来たときだけ出るので、静止画では気づけない。
      地をLPの地（黒）で塞ぐ */
/* 向こうの実コード: px-[var(--lp-stage-gutter)] pt-[clamp(14px,2.2vh,28px)]
   上の余白は画面の高さに追従する（vh）。固定pxだと、背の低い画面で余白だけが大きく残る */
/*
  ⚠️ ヘッダーは浮かせる。地を塗らない（2026-08-23 Tomの指示）。

     直す前は sticky ＋ 地の色（--lp-bg）だった。sticky は場所を取るので、
     ヒーローの上に**その色の帯が1本残る**。地が黒だった頃は黒帯、
     白にした日は白帯になり、ヒーローの青が上まで届かなかった。

     sokuoyakata の LP は fixed ＋ 透明で、面がナビバーの下まで伸びている
     （実測: position:fixed / background:rgba(0,0,0,0) / z-index:50）。同じにする。

     ⚠️ fixed にすると、ヘッダーは場所を取らなくなる。
        下に続くものが上へ詰まるので、ヒーロー側で場所を空ける。
*/
header{position:fixed;inset-inline:0;top:0;z-index:100;
  padding:clamp(14px,2.2vh,28px) var(--hdr-gutter) 0;
  background:transparent}
/* 法務・申込のヘッダーは sticky ではないので、塞ぐ必要はない（塞ぐと帯が出る）*/
.legal-head,.apply-header{background:transparent}
/* 向こうのバーは「角丸24pxの帯」であって、完全なピルではない。
   ピルにすると両端が丸すぎて、面（角丸24px）と形が揃わない */
/* 向こうの実コード:
     mx-auto flex max-w-[1560px] items-center gap-3 sm:gap-8
     rounded-[24px] pl-4 pr-2 sm:pl-6 sm:pr-3
     h-[64px] transition-[height] duration-300 ease-out
   ⚠️ 高さは固定ではない。スクロールすると 64px → 52px に縮む（実測）。
      止めたままだと、動きの無い板が最後まで居座って重く見える */
.navbar{display:flex;align-items:center;gap:12px;max-width:1560px;margin-inline:auto;
  background:var(--nav-bg);color:var(--ink);
  border-radius:24px;padding:0 8px 0 16px;height:64px;
  transition:height .3s ease-out,box-shadow .3s ease-out;
  box-shadow:0 10px 30px -18px rgba(8,9,10,.34)}
@media(min-width:640px){.navbar{gap:32px;padding:0 12px 0 24px}}
/* 縮んだ状態。中のボタンは44pxのままなので、52pxでも収まる */
.is-scrolled .navbar{height:52px;box-shadow:0 8px 24px -16px rgba(8,9,10,.42)}
@media(prefers-reduced-motion:reduce){.navbar{transition:none}}
.navbar .brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.02rem;
  letter-spacing:-.01em;color:var(--ink);margin-right:auto;padding-left:6px;flex-shrink:0}
/* マークはブランドの青。白い帯の上なら 6.26:1 で読める */
.navbar .brand .mk{width:15px;height:22px;color:var(--brand);flex:none}
/*
  ⚠️ 文字は黒。soku と yoya で色を分けない（2026-08-23 Tomの指示）。

     直す前は yoya だけ #6b7280（灰）にして差を付けていた。
     ⚠️ マーク（.mk）は青のまま。ここを一緒に黒にすると、
        ブランドの印が消える。文字だけを黒にする。
*/
.navbar .brand b{color:var(--ink);font-weight:800}
.navbar nav{display:flex;gap:2px}
.navbar nav a{display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;line-height:1.6;font-weight:700;color:#4b5563;padding:0 14px;
  border-radius:9999px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.navbar nav a:hover,.navbar nav a[aria-current="page"]{background:#eef2fb;color:var(--brand)}
.navbar .nav-login{display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;line-height:1.6;font-weight:700;color:#4b5563;
  padding:0 14px;border-radius:9999px}
.navbar .nav-login:hover{background:#eef2fb;color:var(--brand)}
.navbar .btn{min-height:44px;padding:0 20px;font-size:13.5px;border-radius:9999px}
/* デモの押しどころ。向こうはここが主役（申し込みより前に置いている）。
   白い帯の上なので、ブランドの青で塗る（白文字で 6.26:1） */
.btn-demo{background:var(--brand);color:#fff}
.btn-demo:hover{filter:brightness(1.08)}
.navbar .btn-outline{background:transparent;color:var(--ink);border:1px solid #d5dae4}
.navbar .btn-outline:hover{border-color:var(--brand);color:var(--brand);background:#f5f8ff}
@media(max-width:980px){.navbar nav,.navbar .nav-login{display:none}}
/* ⚠️ 狭い画面でボタンを3つ並べると、緑の「LINEで無料相談」が帯からはみ出す。
   優先順は 相談 ＞ デモ ＞ 申し込み（相談がいちばん成約に近い） */
@media(max-width:900px){.navbar .btn-demo{display:none}}
@media(max-width:620px){.navbar .btn-outline{display:none}}
@media(max-width:520px){.navbar{padding:6px 8px 6px 16px;border-radius:18px;min-height:64px}.navbar .brand{font-size:.94rem}
  .navbar .btn{padding:.55rem 1rem;font-size:.82rem}}

/* ── ボタン ───────────────────────────────────────────── */
/* 高さは padding ではなく min-height で決める。
   sokuoyakata の実測: ナビ 高44/字13.5、通常 高44/字14、大きいCTA 高48〜52/字15。
   直す前は 大きいCTA が 高61/字16.8 で、面の中でボタンだけが浮いていた。
   min-height を使うと、字の大きさを変えても押しどころ 44px を割らない */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;
  border:none;cursor:pointer;border-radius:10px;font-family:var(--f);
  min-height:44px;padding:0 20px;font-size:14px;line-height:1.6;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
/* LINEの緑に白文字は 2.26:1 で読めない（実測）。色はLINEのまま、文字を濃くする（7.86:1） */
.btn-line{background:var(--line-green);color:#111827;box-shadow:0 2px 8px rgba(6,199,85,.26)}
.btn-line:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(6,199,85,.34)}
.btn-blue{background:var(--brand);color:var(--brand-fg);padding:.62rem 1.35rem;font-size:.92rem;
  box-shadow:0 2px 10px rgba(26,86,219,.26)}
/* --brand と --blue は同じ色。ホバーで --blue を指すと何も変わらない */
.btn-blue:hover{background:var(--blue-ink);color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(26,86,219,.32)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);font-weight:700}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
/* 大きいCTA。向こうは 高48〜52 / 字15 / 左右28 */
.btn-lg{min-height:52px;padding:0 28px;font-size:15px;line-height:1.6;border-radius:10px}

/* ── セクションを板にする ─────────────────────────────────
   面の外に地が細く見えることで、1枚ずつ切り替わって見える。
   地の色は白・薄青・紙・紺を交互に。同じ地を2枚続けない */
section{padding:0}
/* 面の内側の余白は sokuoyakata の実測に合わせる（1440px で 上86.4 / 左57.6）。
   直す前は 上77.8 / 左63.4 で、縦に詰まって横が狭かった */
/* 面のあいだは 8px（向こうの実測）。外の左右は --stage-gutter のまま。
   16px にすると、面と面が離れて「続きもの」に見えなくなる */
section > .wrap{max-width:none;margin:0 var(--stage-gutter) 8px;
  background:#fff;border-radius:var(--stage-radius);
  padding:clamp(48px,6vw,104px) clamp(28px,4vw,64px)}
section.t-soft > .wrap{background:var(--blue-vsoft)}
section.t-paper > .wrap{background:var(--lp-ivory)}
section.t-ivory > .wrap{background:var(--lp-ivory)}
/* 暗い面・青い面の文字は白。
   ⚠️ ただし面の中に置いた白いカードの中までは白にしない。
      section.t-brand p のように面全体へ当てると、
      白いカードの上の文字まで白になり、丸ごと消える（実測 1.0:1）。
      カードは自分の地を持っているので、そこは触らない */
section.t-navy > .wrap{background:var(--lp-navy);color:#fff}
section.t-brand > .wrap{background:var(--brand);color:#fff}
:is(section.t-navy,section.t-brand) > .wrap > :is(h1,h2,h3,p),
:is(section.t-navy,section.t-brand) > .wrap > * > :is(h1,h2,h3,p),
:is(section.t-navy,section.t-brand) .shead :is(h1,h2,h3,p){color:#fff}
:is(section.t-navy,section.t-brand) > .wrap > p,
:is(section.t-navy,section.t-brand) > .wrap > * > p,
:is(section.t-navy,section.t-brand) .shead p{color:rgba(255,255,255,.88)}
:is(section.t-navy,section.t-brand) .shead .tag{color:rgba(255,255,255,.78)}
/* カードは自分の地と文字色を持つ。面の色に引きずられないよう戻す */
:is(section.t-navy,section.t-brand) :is(.seccard,.card,.fcard,.step,.vcard,.plan){color:var(--ink)}
/* 青い面の上のリンク。ブランド色のままだと地と同色で消える（実測 1.0:1） */
:is(section.t-navy,section.t-brand) .seclink,
:is(section.t-navy,section.t-brand) .seclink a{color:#fff}
:is(section.t-navy,section.t-brand) .seclink a{text-decoration-color:rgba(255,255,255,.55)}
section.t-ink > .wrap{background:var(--tone-ink);color:#fff}
section.t-ink h1,section.t-ink h2,section.t-ink h3{color:#fff}
section.t-ink p{color:rgba(255,255,255,.78)}
/* 中身が自前で面を持っているところは、板を二重にしない */
section.bare > .wrap{background:transparent;padding:0;margin-bottom:8px}
@media(max-width:768px){
  section > .wrap{padding:clamp(40px,8vw,58px) clamp(24px,5vw,28px)}
}

/* ── 見出しは左に置く ──
   中央揃えは、行が短いと整って見えるが、日本語の長い見出しだと
   行ごとに行頭がずれ、読む起点が毎行変わる */
/* 見出しの塊は 880px で止める（実測）。面いっぱい（1293px）に伸ばすと、
   72px の見出しが1行に収まってしまい、意図した改行位置で切れない。
   説明は 660px。40em（760px）だと1行が長く、5行並んだとき目が行頭へ戻れない */
.shead{text-align:left;max-width:880px;margin:0 0 clamp(36px,3.9vw,56px)}
.shead .tag{font-size:.78rem;font-weight:800;color:var(--blue);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:14px}
.shead .tag .snum{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:100px;
  background:var(--brand);color:var(--brand-fg);font-size:.72rem;font-weight:800;
  letter-spacing:.04em;vertical-align:1px}
.shead h2{font-size:clamp(1.9rem,4.9vw,3.8rem);line-height:1.08;font-weight:800;
  letter-spacing:-.028em;text-wrap:balance;word-break:keep-all;overflow-wrap:normal;line-break:strict}
.shead p{color:var(--ink2);font-size:clamp(.98rem,1.5vw,1.12rem);margin-top:18px;
  font-weight:500;max-width:40em}

/* ── ページの頭（サブページ用の小さいヒーロー）───────────── */
.page-head{margin:0 var(--stage-gutter) 8px;background:var(--brand);color:#fff;
  border-radius:var(--stage-radius);overflow:hidden;position:relative;
  padding:clamp(96px,11vw,170px) clamp(28px,4vw,64px) clamp(56px,6vw,104px)}
.page-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 82% at 88% 12%,rgba(255,255,255,.20),rgba(255,255,255,0) 62%)}
.page-head > *{position:relative;z-index:1}
.page-head .eyebrow-line{font-size:.76rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:16px}
.page-head h1{font-size:clamp(1.9rem,4.6vw,3.7rem);line-height:1.04;font-weight:800;
  letter-spacing:-.03em;color:#fff;word-break:keep-all;overflow-wrap:normal;line-break:strict}
.page-head p{margin-top:18px;font-size:clamp(.98rem,1.5vw,1.14rem);line-height:1.9;
  color:rgba(255,255,255,.88);max-width:38em;font-weight:500;
  word-break:keep-all;overflow-wrap:normal;line-break:strict}
.page-head .btn-blue{background:#fff;color:var(--blue-ink)}
.page-head .btn-blue:hover{background:#fff;color:var(--blue-ink)}
.page-head .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.page-head .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.page-head .head-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}

/* ── フッター ───────────────────────────────────────────
   sokuoyakata と同じ作り: 左に名乗り・右に3列・下に大きく名前。
   実測値（1440px）:
     列の見出し 11px / w600 / 字間 .16em / 白50%
     リンク    13.5px / 白70% / 押しどころ 44px
     名乗りの文 13px / 白60%
     大きい名前 12.4vw / 行間 .76 / 字間 -.05em

   ■ なぜリンクを 44px にするか
     文字の高さは 16px しかない。指で押す場所として小さすぎる。
     文字を大きくするのではなく、**押せる面だけ**を広げる */
/* フッターは暗い面。全面を青にすると、直前の最終CTA（青）と続いて
   ページの締めが2枚重なる。地は #12100E、巨大な名前だけを青にする */
footer{margin:0 var(--stage-gutter) var(--stage-gutter);background:var(--footer-bg);color:#fff;
  border-radius:var(--stage-radius);overflow:hidden;position:relative;
  padding:clamp(48px,6vw,88px) clamp(24px,4vw,72px) clamp(20px,2.4vw,36px)}
footer .wrap{max-width:none;margin:0;padding:0;background:none}
.foot-grid{display:grid;gap:48px;grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.foot-brand .logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;
  font-size:1.28rem;letter-spacing:-.02em;color:#fff;margin-bottom:16px}
/*
  ⚠️ footer のマークは、地の色を直書きしない。

     直す前は color:#2C54D0（ブランドの青）を2重に書いていた。
     footer の地が紺だったうちは青いマークとして見えていたが、
     地を同じ青にした日（2026-08-23）に**まるごと消えた**（実測で
     マークも地も rgb(44,84,208) だった。輪郭も影も無いので、
     欠けたことに気づけない）。

     地の上の白にする。地の色が変わっても、差は残る。
*/
.foot-brand .logo .mk{width:18px;height:26px;color:#fff;flex:none}
.foot-brand .logo b{color:rgba(255,255,255,.62)}
.foot-brand p{font-size:13px;line-height:1.625;color:rgba(255,255,255,.62);max-width:300px}
.foot-brand a:not(.logo){display:inline-flex;align-items:center;min-height:44px;font-size:13px;
  color:rgba(255,255,255,.74);text-decoration:underline;text-underline-offset:4px}
.foot-brand a:not(.logo):hover{color:#fff}
.foot-cols{display:grid;gap:clamp(20px,2.4vw,34px);grid-template-columns:repeat(3,1fr)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-col h4{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:6px;line-height:1.6}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;
  line-height:1.6;color:rgba(255,255,255,.72);transition:color var(--dur) var(--ease)}
.foot-col a:hover{color:#fff}
.foot-legal{margin-top:clamp(26px,3vw,40px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:8px;font-size:12px;color:rgba(255,255,255,.5)}
/* 締めに、名前を大きく置く。読ませるものではないので支援技術からは隠し、
   押せないようにする（選択もさせない。文字として拾われると邪魔になる）*/
.foot-mark{pointer-events:none;user-select:none;-webkit-user-select:none;
  margin-top:clamp(30px,3.6vw,64px);margin-bottom:-.16em;overflow:hidden}
/* 行間 .76 だと、文字の箱が字より低くなる。O・U・Y のように
   ベースラインの下へ少し出る字（オーバーシュート）が、箱の外に出て切られる。
   締まって見せたいのは「上下の余白」であって、字そのものではない。
   箱は字が収まる高さ（1）にして、余白は下の padding を削って詰める */
.foot-mark span{display:block;white-space:nowrap;font-weight:800;
  font-size:12.4vw;line-height:1;letter-spacing:-.05em;
  padding-bottom:.02em;
  /*
    ⚠️ 地と同じ色を使わない。

       直す前は rgba(44,84,208,.85)＝ブランドの青そのままだった。
       地が紺のうちは青い文字として見えていたが、
       footer を同じ青にした日（2026-08-23）に**まるごと消える**。
       色が「何色か」ではなく「地との差」で決まることを、
       数値で直書きすると見落とす。

       白（2026-08-23 Tomの指示）。薄めず、そのまま白。
  */
  color:#ffffff}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr}}
@media(max-width:560px){.foot-cols{grid-template-columns:1fr}
  .foot-legal{flex-direction:column;gap:6px}}

/* ── ページの中身も板に置く ──
   青い頭のすぐ下に、白い板を続ける。地の上に文字を直に置くと、
   頭だけが面で、そこから先はただの余白に見えて、ページが途中で終わったように読める */
.page-body{max-width:none;margin:0 var(--stage-gutter) 8px;
  background:#fff;border-radius:var(--stage-radius);
  padding:clamp(48px,6vw,104px) clamp(28px,4vw,64px)}
.page-body > :last-child{margin-bottom:0}
@media(max-width:768px){.page-body{padding:clamp(40px,8vw,58px) clamp(24px,5vw,28px)}}

/* ── 字の階段（sokuoyakata の実測値をそのまま移した）────────────
 *
 *   1440px のとき、向こうの数値はこうなっている:
 *     目印     11px / w600 / 字間 +0.16em / 大文字
 *     ヒーロー  88px / w800 / 字間 -0.03em / 行間 1.04
 *     見出し    72px / w800 / 字間 -0.03em / 行間 1.04
 *     説明      19px / w500 / 行間 1.7
 *     小見出し  28px / w800 / 字間 -0.03em / 行間 1.04
 *     本文      15px / w400 / 行間 1.85
 *
 *   ■ なぜ太さを 800 で止めるか
 *     日本語のゴシックを 900 まで上げると、画数の多い字（整・骨・鍼）が
 *     潰れて黒い塊になる。差は大きさで付け、太さは動かさない。
 *
 *   ■ なぜ字間を詰めるか
 *     大きい字ほど、字と字の間が空いて見える。詰めないと
 *     ひとつの言葉に見えず、行が字の列に見える。
 *
 *   ⚠️ このかたまりはファイルの最後に置くこと。
 *      2026-08-19 に、フッターを差し替えたとき index() で切った位置より
 *      後ろにあったため、まるごと消えて見出しが元の大きさに戻った。
 *      消えても何も落ちないので、実際の画面を見るまで気づけない。
 */
:root{
  --t-eyebrow:.6875rem;                       /* 11px */
  --t-h1:clamp(2.1rem,6.1vw,5.5rem);          /* 88px */
  --t-h2:clamp(2.125rem,5vw,4.5rem);          /* 34px〜72px */
  --t-lead:clamp(1.0625rem,1.6vw,1.1875rem);  /* 17px〜19px */
  --t-h3:clamp(1.24rem,1.95vw,1.75rem);       /* 28px */
  --t-body:.9375rem;                          /* 15px 横に長い行 */
  --t-card:.8125rem;                          /* 13px 狭いカードの中 */
  --ls-tight:-.03em;
  --lh-tight:1.04;
}
.shead .tag,.lead-head .eyebrow-line,.page-head .eyebrow-line,.page-head .tag,.eyebrow-line,.stage-eyebrow{
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.6;margin-bottom:16px}
/* 目印の中にアイコンを置くページ（karte-intro）がある。span.ico は display:inline のままだと
   中の SVG に高さを与えられず、実測で 418x418px の箱になって h1 を 719px まで押し下げていた
   （他ページの h1 は上から262px）。箱の大きさを字に合わせて決める */
.eyebrow-line .ico{display:inline-flex;align-items:center;width:1em;height:1em;vertical-align:-.15em}
.eyebrow-line .ico svg{width:100%;height:100%}
.shead .tag{color:var(--blue)}
.shead .tag .snum{font-size:var(--t-eyebrow);letter-spacing:.08em}

.shead h2,.lead-head h2,.stage-title,.sec-head h2{
  font-size:var(--t-h2);font-weight:800;
  letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.page-head h1{font-size:var(--t-h1);font-weight:800;
  letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.shead p,.lead-head p,.page-head p,.stage-lead,.sec-head p{
  font-size:var(--t-lead);font-weight:500;line-height:1.7;letter-spacing:normal;
  margin-top:24px;max-width:660px}

/* カードでも手順でも、同じ階段を使う */
.step h3,.fcard h3,.seccard .sect,.flowlist b,.card h3,.t-scale h3{
  font-size:var(--t-h3);font-weight:800;letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
/* カードの中身は 13px / 1.625（向こうの実測）。
   幅の狭い箱に 16px を入れると1行の字数が足りず、
   3〜4字で折り返して「文の壁」に見える。
   横に長い行（導入の流れ）は 15px / 1.85 のままにする */
.step p,.fcard p,.seccard p,.card p,.t-scale p{
  font-size:var(--t-card);font-weight:400;line-height:1.625}
.flowlist p{font-size:var(--t-body);font-weight:400;line-height:1.85}

/* ページ側に .btn{width:100%} のような指定があると、ナビのボタンまで
   画面幅いっぱいに伸びる（shindan の診断ボタン用の指定が当たっていた）。
   ナビの中だけは、ここで押さえる */
.navbar .btn{width:auto;margin:0;flex:none}

/* ── 板の外に文字を置かない ──────────────────────────────
   LPの地を黒にしたので、板に入っていない文字は黒地に黒で消える。
   直前まで地が薄いグレーだったため、板の外に出ていても読めてしまい、
   気づけなかった（実測 1.1:1〜4.0:1 が6ページで出た）。
   body の直下に置かれた入れ物は、すべて板として扱う */
body > .wrap,
body > .foot,
body > main > .wrap{
  max-width:none;margin:0 var(--stage-gutter) 8px;
  background:#fff;border-radius:var(--stage-radius);color:var(--ink);
  padding:clamp(40px,6vw,104px) clamp(24px,4vw,64px)}
body > .wrap:last-of-type{margin-bottom:var(--stage-gutter)}
/* 中身が自前で面を持つ節は、板を二重にしない */
body > .wrap:has(> .monitor),body > .wrap:has(> .demo),body > .wrap:has(> .impact){
  background:transparent;padding:0}

/* ── 法務・規程のページ ────────────────────────────────
   実測（sokuoyakata /terms・1440px）:
     ヘッダー  ロゴ＋4本のリンクだけ（13px w700・押しどころ44px）
     面        白 / 角24 / pad 86.4・57.6
     見出し    56px・器760px・中央寄せ（左340）
     本文      13px / 行間1.63 / 幅726
   長い規程は「読ませる」ものなので、行を760pxで止める。
   面いっぱい(1293px)だと1行が長すぎて、目が行頭へ戻れない */
.legal-head{position:static;padding:19.8px var(--hdr-gutter) 0;background:transparent}
.legal-nav{display:flex;align-items:center;gap:clamp(10px,2vw,28px);
  background:var(--nav-bg);border-radius:24px;padding:6px 20px;min-height:64px}
/* ⚠️ ここは --nav-bg（＝LPのバーと同じ色）を使っている。
   バーの色を変えたら、この文字色も一緒に変えること。
   白地に白文字になっても**何も落ちない**。リンクが消えるだけなので、
   規程ページを開かない限り誰も気づけない（2026-08-19に実際に起きた） */
.legal-nav .brand{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  margin-right:auto;font-weight:800;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink)}
.legal-nav .brand .mk{width:15px;height:22px;color:var(--brand);flex:none}
/*
  ⚠️ ナビバーと同じ黒（2026-08-23）。

     .navbar .brand b を黒にしたとき、こちらは灰色（#6b7280）のままだった。
     同じロゴが、ページによって違う色で出ていた。
     ロゴの色は「どのヘッダーに載っているか」で変えない。
*/
.legal-nav .brand b{color:var(--ink)}
.legal-nav a:not(.brand){display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-size:13px;font-weight:700;color:#4b5563}
.legal-nav a:not(.brand):hover,
.legal-nav a[aria-current="page"]{color:var(--brand)}
@media(max-width:640px){.legal-nav{flex-wrap:wrap;gap:2px 14px;padding:8px 16px}
  .legal-nav .brand{width:100%;margin-right:0}}

.legal-body{max-width:none;margin:0 var(--stage-gutter) var(--stage-gutter);
  background:#fff;border-radius:var(--stage-radius);color:var(--ink);
  padding:clamp(40px,6vw,86.4px) clamp(24px,4vw,57.6px)}
.legal-inner{max-width:760px;margin-inline:auto}
.legal-inner h1{font-size:clamp(2rem,3.9vw,3.5rem);font-weight:800;
  letter-spacing:var(--ls-tight);line-height:var(--lh-tight);color:var(--ink);margin-bottom:8px}
.legal-inner h2{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.4;
  margin:36px 0 10px}
.legal-inner h3{font-size:16px;font-weight:800;margin:24px 0 8px}
.legal-inner p,.legal-inner li,.legal-inner td,.legal-inner th{font-size:13px;line-height:1.63}
.legal-inner p{margin-bottom:12px}
.legal-inner ol,.legal-inner ul{margin:0 0 12px 1.2em}
.legal-inner li{margin-bottom:6px}
.legal-inner table{width:100%;border-collapse:collapse;margin:12px 0;table-layout:auto}
.legal-inner th,.legal-inner td{padding:12px 14px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;word-break:normal;overflow-wrap:normal}
.legal-inner th{font-weight:700;color:var(--ink2)}
/*
  ⚠️ 見出し列に width を決め打ちしない。
     2列の表（項目｜内容）を想定して th{width:34%} と書いたが、
     この規程には4列の表もある。34%を1列目に取られた残りを3列で分け合い、
     最終列が 1文字ずつ縦に折れた（本番で発生）。
     列の幅はブラウザに決めさせ、折り返しだけ止める
*/
.legal-inner table:has(tr > *:nth-child(2):last-child) th{width:34%}
/* 横に長い表は、面の中で横に送る（1文字ずつ折るより読める）*/
/* ⚠️ 表そのものを display:block にしてはいけない。
   thead と tbody がそれぞれ別の表になり、列幅を各自で決めてしまう。
   見出しの帯と、その下の列が横にズレる（2026-08-19に seido の比較表で発生）。
   落ちないし、2列の表では起きないので、列の多い表を足した日に静かに壊れる。
   横に送るのは、表ではなく包んでいる箱の仕事。 */
.legal-inner .tbl-scroll{overflow-x:auto;max-width:100%;margin:12px 0}
.legal-inner .tbl-scroll > table{margin:0;min-width:min(100%,620px)}

/* ===== 規程ページの読みやすさ =====
   条文は「読む」より「探して戻る」もの。目次・条の切れ目・番号を見えるようにする。
   ⚠️ 文言は一切変えていない。見え方だけ。                                   */

/* 目次。11条あるので、頭で全体像が掴めないと読み手が迷子になる */
.legal-inner .toc{border:1px solid #e7e9ee;border-radius:12px;
  padding:20px 24px;margin:28px 0 40px;background:#fbfbfd}
.legal-inner .toc-ttl{font-size:11px;font-weight:600;letter-spacing:.16em;
  color:#6b7280;margin:0 0 12px}
/* ⚠️ flex で並べると、器が狭いときに条名が番号の下へ落ちて
   「第1条 / 適用」と2行に割れる。11本ぶん割れると、番号の列も条名の列も
   まっすぐ読めない（2026-08-19に読みにくいと指摘された形）。
   grid で「番号の列」と「条名の列」を固定すると、条名が折り返しても
   番号の下に潜り込まない。器も広めに取って、そもそも折り返させない */
.legal-inner .toc ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 32px}
.legal-inner .toc li{margin:0;border-top:1px solid #eceef3}
.legal-inner .toc li:first-child{border-top:0}
@media(min-width:640px){.legal-inner .toc li:nth-child(2){border-top:0}}
.legal-inner .toc a{display:grid;grid-template-columns:4.2em 1fr;gap:12px;
  align-items:baseline;padding:9px 0;font-size:13.5px;
  line-height:1.6;color:var(--ink);text-decoration:none}
.legal-inner .toc a:hover .toc-t{text-decoration:underline}
.legal-inner .toc a:hover{color:var(--brand)}
.legal-inner .toc .toc-n{color:var(--brand);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* 条の切れ目。同じ間隔で11本続くと、どこまでが1条か目が拾えない */
.legal-inner h2{display:block;margin:0;padding:34px 0 12px;
  border-top:1px solid #e7e9ee;font-size:20px;font-weight:800;line-height:1.4}
.legal-inner h2:first-of-type{border-top:0}
.legal-inner .jo-n{display:block;font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--brand);margin-bottom:5px;
  font-variant-numeric:tabular-nums}
.legal-inner .jo-t{display:block}
/* 見出しへ飛んだとき、追従ヘッダーの下に隠れないように */
.legal-inner h2[id]{scroll-margin-top:calc(var(--nav-bar) + 40px)}

/* 番号つきの条項。数字を外に出して本文の頭を揃える */
/* ⚠️ :not(.toc ol) を外すと、目次にも番号が付いて「1. 第1条 適用」と二重になる。
   条文の中の箇条書きだけに当てる */
.legal-inner ol:not(.toc ol){list-style:none;counter-reset:jk;padding:0;margin:12px 0}
.legal-inner ol:not(.toc ol) > li{counter-increment:jk;position:relative;
  padding-left:2em;margin:0 0 8px}
.legal-inner ol:not(.toc ol) > li::before{content:counter(jk)".";position:absolute;left:0;
  color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}
.legal-inner ul{padding-left:1.15em;margin:12px 0}
.legal-inner ul > li{margin:0 0 8px}

/* 注記。terms と keiyaku に直書きされていたものを型にした */
.legal-inner .notice{background:#fef2f2;border:1px solid #f3c9c9;
  border-radius:10px;padding:14px 18px;margin:18px 0;
  font-size:13px;line-height:1.75}