/* =========================================================================
   タクメニュー — トップページ（LP）
   -------------------------------------------------------------------------
   ■ 設計の芯
     武器は価格構造なので、第一スクリーンを「価格の提示」に全振りする。
     装飾でごまかさず、罫線・数字・余白だけで作る。参照する精神は価格比較
     サイトの表組みだが、品位を落とさないために「数字は明朝」という
     一貫ルールを敷いた。明朝の数字は決算資料や経済面の顔をしているので、
     「安い」を「安っぽい」に落とさずに提示できる。

   ■ 経緯
     5つの設計思想でモックを並列制作し（A 国内SaaS王道／B エディトリアル／
     C プロダクト実物主義／D 飲食の現場／E 数字主導）、3視点で採点した上で
     E を採用。C の端末モックだけを移植して統合してある。
     検証用のモックは public/mock/ に残してある（noindex）。

   ■ 判断の記録
     1. 色は白地のオレンジ1系統だけ。墨地のセクションでは色を使わず、
        明朝の級数・罫・余白だけで数字を立たせる。
     2. 第一スクリーンは「価格 → 0円が3行 → CTA」。比較表より前にボタンを置く。
     3. 12px未満の文字を使わない。読めない注記は信用を作らない。
     4. 棒グラフのアニメーションは描かない。1.19ページで離脱する読者は
        動きを見ないし、scaleXの伸長は前庭系に影響しうる。
     5. Webフォントを使わない。明朝・ゴシックとも各OSに標準で入っている。

   ■ 意図的に避けたもの（依頼者が名指しで嫌った「AIが作ったサイト」の記号）
     クリーム地＋オレンジ／中央揃えの多用／16px超の角丸・ピル型／
     斜めグラデーション／絵文字／幅のバラつくチップ列／同寸カードの羅列
     — いずれも不使用。角丸は最大3px、グラデーションは0箇所。
   ========================================================================= */

/* -------------------------------------------------------------------------
   カラートークン
   コントラスト比は相対輝度から自分で計算した実測値をコメントに記載する。
   L = 0.2126R + 0.7152G + 0.0722B（sRGB線形化後）、比 = (L1+.05)/(L2+.05)
   ------------------------------------------------------------------------- */
:root{
  /* 本ページ固有のトークン。共通トークン（common.css）と重なるものは
     var() で共通側を参照し、二重管理にしない。 */
  --ink:      #101720; /* 墨。純黒を避け青みを入れて印刷物の黒に寄せる L=.0078 */
  --paper:    #FFFFFF;
  --wash:     #F1F3F5; /* 薄グレー面 L=.8940 */
  --wash-2:   #E7EAEE;
  --rule:     #D6DBE0; /* 罫線（細） */
  --rule-2:   #B6BEC7; /* 罫線（強） */

  --text:     #101720; /* 白地 17.86:1 ／ 淡色地 17.0:1 ── AAA */
  --muted:    #4A545F; /* 白地  7.69:1 ／ 薄グレー地 6.91:1 ── AAA */
  --steel:    #5A6472; /* 白地  6.00:1 ／ 薄グレー地 5.39:1 ── AA
                          他社側の数字はこの鋼色。赤や警告色は使わない（煽らない） */
  /* ブランド色は common.css の定義をそのまま使う（色を2箇所で持たない）。
     変数名の green は配色を緑にしていた時期の名残。参照箇所が多いため
     名前は据え置き、指す値だけをブランド色に向けている。 */
  --green:    var(--brand);      /* #c94b1c 白抜き 4.66:1 ── AA */
  --green-d:  var(--brand-dark); /* #9d3a16 白地 6.88:1 ── AA */
  --green-w:  var(--brand-light);/* #fdf0e9 台帳の自社列の地色。墨文字で 17.0:1 */

  --on-ink:   #F4F6F8; /* 墨地 16.78:1 ── AAA。0円もこの紙白で組む */
  --on-ink-m: #A8B2BE; /* 墨地  8.46:1 ── AAA */
  --on-ink-r: rgba(255,255,255,.20); /* 墨地の罫線 */
  --on-ink-r2:rgba(255,255,255,.13);

  /* 本文書体は common.css の --font（OS標準・Webフォントなし）を使う */
  --sans: var(--font);
  /* 数字と見出しは明朝。これがこのページの「顔」なので徹底する。
     明朝はWindows/macOS/iOS/Androidのいずれにも標準で入っており、
     Webフォントを追加せずに出せる。 */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
           "Noto Serif CJK JP", "Source Han Serif JP", serif;

  --pad: 16px;      /* スマホ縦の左右余白。375pxで本文幅343pxを確保 */
  --maxw: 660px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.85;
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
  padding-bottom:calc(80px + env(safe-area-inset-bottom)); /* 固定CTAバーの実測高＋逃げ */
}
svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,figcaption{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* 数字の組版ルール ─────────────────────────────────────────────
   ・tabular-nums で桁を縦に揃える（表では必須）
   ・明朝体。単位は .u で --sans に逃がし、数字を主役にする
   ・"palt" は数字に効くと桁揃えが崩れるので必ず 0 に戻す            */
.n{
  font-family:var(--serif);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"palt" 0;
  letter-spacing:.005em;
  font-weight:700;
}
.u{font-family:var(--sans);font-size:.62em;font-weight:500;margin-left:.16em;letter-spacing:0}

/* =========================== ヘッダ =========================== */
.hdr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:54px;border-bottom:1px solid var(--rule);
  max-width:var(--maxw);margin:0 auto;padding:6px var(--pad);
}
/* ロゴは記号＋明朝の社名。記号は全ページ共通のものを使い、
   ページごとに違う顔にしない（同じ会社に見えなくなる）。 */
.logo{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.05em;line-height:1.1;
  min-height:44px;
}
.logo img{width:30px;height:30px;flex:none;border-radius:6px}
.logo small{display:block;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.12em;color:var(--steel);line-height:1.2;margin-top:2px}
.hdr-note{font-size:12px;line-height:1.5;color:var(--muted);text-align:right;letter-spacing:0}
/* ヘッダのリンク。申込ボタンは置かない（第一スクリーンのCTAと競合するため） */
.hnav{display:flex;gap:2px;flex:none}
.hnav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 9px;
  font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;letter-spacing:.01em;
}
.hnav a:hover{color:var(--green-d);text-decoration:underline}
@media(max-width:359px){ .hnav a{padding:0 6px;font-size:12.5px} }

/* =========================== ヒーロー =========================== */
.hero{padding-top:12px}
.eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--green);line-height:1.4;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--green);flex:none}

h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(23px,6.4vw,34px);
  line-height:1.5;letter-spacing:.005em;
  margin:8px 0 0;
}
h1 .hl{
  /* 価格だけ下線で視線を落とす。蛍光マーカー風の塗りは安っぽいので使わない */
  box-shadow:inset 0 -2px 0 var(--green);
  padding-bottom:1px;
}

/* --- 仕組みの図。IT習熟度が低い読者には図1枚が本文3行より速い --- */
.hero-fig{margin-top:10px}
.hero-fig svg{display:block;width:100%;max-width:360px;height:auto}

/* --------------------- 墨地の価格ブロック ---------------------
   第一スクリーンの核。スマホでは左右いっぱいまで裁ち落として重量感を出す。
   0円の三行は、直下の台帳とまったく同じ罫組の文法で組む。 */
.pricebox{
  background:var(--ink);color:var(--on-ink);
  margin:16px calc(var(--pad) * -1) 0;
  padding:15px var(--pad) 16px;
}
@media(min-width:620px){ .pricebox{margin-inline:0;padding-inline:22px;border-radius:3px} }

.pb-lab{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--on-ink-m);line-height:1.5}
.pb-num{
  display:flex;align-items:baseline;flex-wrap:wrap;margin-top:2px;
  font-family:var(--serif);font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"palt" 0;
  font-size:clamp(52px,15.6vw,84px);line-height:1.05;letter-spacing:-.005em;
}
/* 単位と税表記は em 指定をやめて実寸で固定する。
   総額表示にかかる「税込」が9px台に落ちるのは可読性・表示義務の両面で不可 */
.pb-num .yen{font-family:var(--sans);font-size:clamp(20px,5.4vw,30px);font-weight:700;margin-left:.1em;letter-spacing:.02em}
.pb-num .tax{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--on-ink-m);margin-left:8px;letter-spacing:.06em}

.zeros{margin-top:13px;border-top:1px solid var(--on-ink-r)}
.zeros li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px solid var(--on-ink-r2);
}
.zeros li:last-child{border-bottom:0}
.z-lab{font-size:12.5px;color:var(--on-ink-m);letter-spacing:.04em;line-height:1.5}
.z-num{
  font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.3;
  color:var(--on-ink);font-variant-numeric:tabular-nums;font-feature-settings:"palt" 0;
}
.z-num .u{font-size:12.5px;color:var(--on-ink-m);font-weight:500}

/* =========================== CTA =========================== */
.cta-a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:56px;padding:12px 14px;      /* タップ領域56px＝44px基準超 */
  background:var(--green);color:#fff;text-decoration:none;
  font-family:inherit;font-size:16.5px;font-weight:700;letter-spacing:.03em;
  border:0;border-radius:3px;cursor:pointer;
  transition:background .15s linear;
}
.cta-a:hover{background:var(--green-d)}
.cta-a:active{background:var(--green-d)}
.cta-a svg{flex:none}
.cta-block{margin-top:14px}
/* 「怪しくないか」への回答は、ボタンの直下＝押す直前に置く */
.cta-sub{
  margin-top:10px;display:flex;gap:9px;align-items:flex-start;
  font-size:12.5px;line-height:1.75;color:var(--muted);text-align:left;
}
.cta-sub svg{flex:none;margin-top:4px;color:var(--green)}
.cta-sub b{color:var(--text);font-weight:700}
/* 速さの2つ（申し込み30秒／使えるまで最短当日）を横に並べる帯。
   桁の違う2つの数字なので、矢印を挟んで「順番」として読ませる。
   狭い画面では縦に落として、矢印は消す（縦並びで右向き矢印は読みにくい）。 */
.cta-speed{
  margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-size:13px;line-height:1.7;color:var(--muted);text-align:left;
}
.cta-speed b{color:var(--text);font-weight:800}
@media (max-width:520px){
  .cta-speed{flex-direction:column;align-items:flex-start;gap:2px}
  .cta-speed span[aria-hidden]{display:none}
}

/* =========================== 比較表（主役） ===========================
   <table>で正しく組む（読み上げ・拡大に強い）。table-layout:fixed で
   列幅を固定し、数字は右揃え＋等幅数字で桁を縦に通す。               */
.ledger-wrap{border:1px solid var(--rule-2);margin-top:26px}
.ledger{width:100%;table-layout:fixed}
.ledger caption{
  caption-side:top;text-align:left;
  padding:10px 12px;background:var(--wash);border-bottom:1px solid var(--rule-2);
  font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.05em;line-height:1.55;
}
.ledger col.c1{width:32%}
.ledger col.c2{width:34%}
.ledger col.c3{width:34%}
.ledger th,.ledger td{border-bottom:1px solid var(--rule);padding:9px 7px;vertical-align:middle}
.ledger thead th{
  font-size:12px;font-weight:700;line-height:1.45;text-align:right;
  color:var(--steel);background:var(--wash-2);padding-block:8px;
}
/* 自社列。地色を敷いて「読む列」を明示する。塗りはベタ、角丸なし */
.ledger .us{background:var(--green-w)}
.ledger thead th.us{background:var(--green);color:#fff} /* 白抜き 6.53:1 */
.ledger tbody th{
  text-align:left;font-size:12px;font-weight:500;color:var(--muted);
  line-height:1.7;background:var(--paper);
}
.ledger td{text-align:right}
.ledger .fig{font-size:16px}
.ledger .other .fig{color:var(--steel)}
.ledger .us .fig{color:var(--text)}
.ledger .zero .fig{color:var(--green)}
.ledger .txt{font-size:12px;color:var(--steel);font-weight:500;line-height:1.6}
/* 合計行だけ罫線を太らせ、数字を一段大きくする。表の中に山を作る */
.ledger tfoot th,.ledger tfoot td{border-top:2px solid var(--ink);border-bottom:0;padding-block:12px}
.ledger tfoot th{font-size:12.5px;font-weight:700;color:var(--text);background:var(--paper);line-height:1.5}
.ledger tfoot .fig{font-size:clamp(17px,5.4vw,26px)} /* 320px幅でも7桁が桁溢れしない下限 */
.ledger tfoot .other .fig{color:var(--steel)}
.ledger tfoot .us .fig{color:var(--green)}

/* --------------------- 差額バー ---------------------
   920,000 に対して 29,800 は 3.24%。棒の長さの差そのものが結論なので、
   実寸比のまま描く。誇張しないことが信用になる。動かす理由も無いので静止。 */
.delta{border-top:1px solid var(--rule-2);background:var(--wash);padding:14px 12px 16px}
.delta-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.delta-lab{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.delta-num{font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums;
  font-feature-settings:"palt" 0;
  font-size:clamp(26px,8vw,38px);line-height:1.2;color:var(--green);letter-spacing:0}
.delta-num .u{color:var(--green)}
.bars{margin-top:12px;display:grid;gap:8px}
.bar-row{display:grid;grid-template-columns:5.8em 1fr auto;align-items:center;gap:8px}
.bar-name{font-size:12px;color:var(--muted);line-height:1.35;letter-spacing:0}
.bar{display:block;height:13px;background:#fff;border:1px solid var(--rule)}
.bar i{display:block;height:100%}
.bar i.o{background:var(--steel)}
.bar i.us{background:var(--green);min-width:3px} /* 3.24%でも消えないよう下限を確保 */
.bar-val{font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums;
  font-feature-settings:"palt" 0;font-size:13px}
.bar-row.o .bar-val{color:var(--steel)}
.bar-row.u .bar-val{color:var(--green)}

.note{font-size:12px;line-height:1.75;color:var(--steel);margin-top:10px;letter-spacing:0}
.note li{margin-top:4px}

/* =========================== セクション共通 =========================== */
section{padding-top:46px}
.kicker{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--green);line-height:1.4;
}
.kicker::before{content:"";width:14px;height:2px;background:var(--green);flex:none}
h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(20px,5.8vw,27px);line-height:1.5;margin-top:8px;letter-spacing:.01em;
}
.lede{margin-top:10px;font-size:13.5px;line-height:1.85;color:var(--muted)}
.lede b{color:var(--text);font-weight:700}

/* --------------------- 「なぜ安いのか」 ---------------------
   均質カードの羅列を避け、番号を明朝の大きな数字にして左に置く非対称レイアウト */
.reasons{margin-top:18px;border-top:1px solid var(--rule)}
.reasons li{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule)}
.r-no{font-family:var(--serif);font-weight:700;font-size:26px;line-height:1.1;color:var(--green);border-top:2px solid var(--green);padding-top:6px}
.r-t{font-size:15.5px;font-weight:700;line-height:1.6}
.r-d{font-size:13px;line-height:1.85;color:var(--muted);margin-top:5px}

/* --------------------- 墨地セクション（グラフ） ---------------------
   ミントを捨てたので、ここは墨・鋼・紙白の三値だけ。線の太さで序列をつける */
.dark{background:var(--ink);color:var(--on-ink);margin-top:46px;padding:38px 0 40px}
.dark h2{color:var(--on-ink)}
.dark .kicker{color:var(--on-ink)}
.dark .kicker::before{background:var(--on-ink)}
.dark .lede{color:var(--on-ink-m)}
.dark .lede b{color:var(--on-ink)}

.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:12px;line-height:1.5;color:var(--on-ink-m)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:18px;height:3px;display:block;flex:none}
.legend i.o{background:#8B96A4}
.legend i.m{background:#F4F6F8}

.chart{display:block;width:100%;max-width:480px;height:auto;margin-top:8px}
.chart text{font-family:var(--sans);letter-spacing:0}

/* 墨地の中の小表。円記号はキャプションに逃がしてセル内は数字だけにする */
.mini{width:100%;table-layout:fixed;margin-top:22px}
.mini caption{caption-side:top;text-align:left;font-size:12px;color:var(--on-ink-m);padding-bottom:8px;letter-spacing:.05em;line-height:1.5}
.mini col.k{width:28%}
.mini th,.mini td{padding:9px 4px;border-bottom:1px solid var(--on-ink-r2);font-size:12px}
.mini thead th{color:var(--on-ink-m);font-weight:700;text-align:right;font-size:12px}
.mini thead th:first-child{text-align:left}
.mini tbody th{text-align:left;font-weight:500;color:var(--on-ink-m);font-size:12px;line-height:1.5}
.mini td{text-align:right;font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums;font-feature-settings:"palt" 0;font-size:13.5px}
.mini tr.o td{color:#C3CBD4}       /* 墨地 11.0:1 */
.mini tr.u td{color:var(--on-ink)}
.mini tr.d th,.mini tr.d td{border-bottom:0;border-top:1px solid rgba(255,255,255,.45)}
.mini tr.d th{color:var(--on-ink);font-weight:700}
.mini tr.d td{color:var(--on-ink);font-size:15px}

/* --------------------- 含まれるもの表 --------------------- */
.incl{width:100%;table-layout:fixed;margin-top:18px;border:1px solid var(--rule-2)}
.incl col.a{width:44%}.incl col.b{width:28%}.incl col.c{width:28%}
.incl thead th{font-size:12px;font-weight:700;padding:9px 6px;background:var(--wash-2);color:var(--steel);text-align:right;line-height:1.45;border-bottom:1px solid var(--rule-2)}
.incl thead th:first-child{text-align:left}
.incl thead th.us{background:var(--green);color:#fff}
.incl tbody th{text-align:left;font-weight:500;font-size:12.5px;padding:10px 6px;border-bottom:1px solid var(--rule);line-height:1.65}
.incl tbody td{text-align:right;font-size:12px;padding:10px 6px;border-bottom:1px solid var(--rule);color:var(--steel);line-height:1.6}
.incl tbody td.us{background:var(--green-w);color:var(--green);font-weight:700;white-space:nowrap}
.incl td svg{vertical-align:-2px;margin-right:3px}

/* --------------------- 仕組み3ステップ --------------------- */
.flow{margin-top:18px}
.flow li{display:grid;grid-template-columns:44px 1fr;gap:13px;padding:15px 0;border-bottom:1px solid var(--rule)}
.flow li:first-child{border-top:1px solid var(--rule)}
.f-ic{width:44px;height:44px;border:1px solid var(--rule-2);display:flex;align-items:center;justify-content:center;color:var(--green);background:var(--paper)}
.f-k{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--steel);line-height:1.4}
.f-t{font-size:14.5px;font-weight:700;line-height:1.55;margin-top:2px}
.f-d{font-size:12.5px;line-height:1.8;color:var(--muted);margin-top:4px}

/* --------------------- 実画面の構成図 --------------------- */
.shot{margin-top:22px;border:1px solid var(--rule-2);padding:14px 12px 12px;background:var(--wash)}
.shot svg{display:block;width:100%;max-width:400px;height:auto;margin-inline:auto}
.shot figcaption{font-size:12px;line-height:1.75;color:var(--muted);margin-top:10px}

/* --------------------- 支払いまでの流れ --------------------- */
.steps{margin-top:20px;position:relative;padding-left:22px}
.steps::before{content:"";position:absolute;left:5px;top:7px;bottom:34px;width:1px;background:var(--rule-2)}
.steps li{position:relative;padding-bottom:20px}
.steps li::before{content:"";position:absolute;left:-22px;top:7px;width:11px;height:11px;background:var(--paper);border:2px solid var(--green);border-radius:50%}
.s-t{font-size:14.5px;font-weight:700;line-height:1.55}
.s-t .free{font-family:var(--serif);color:var(--green);margin-left:.4em}
.s-d{font-size:12.5px;line-height:1.8;color:var(--muted);margin-top:3px}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.fork div{border:1px solid var(--rule-2);padding:11px 10px}
.fork .yes{border-color:var(--green);background:var(--green-w)}
.fork dt{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.03em;line-height:1.4}
.fork .yes dt{color:var(--green)}
.fork dd{margin:3px 0 0;font-family:var(--serif);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;font-feature-settings:"palt" 0;line-height:1.3}
.fork .yes dd{color:var(--green)}
.fork .no dd{color:var(--steel)}

/* --------------------- FAQ（JSなしのdetails） --------------------- */
.faq{margin-top:16px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr 16px;gap:12px;align-items:start;
  padding:15px 0;min-height:44px;                    /* タップ領域44px以上 */
  font-size:14px;font-weight:700;line-height:1.65;
}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:14px;height:14px;margin-top:6px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;background:var(--green)}
.pm::before{left:0;top:6px;width:14px;height:2px}
.pm::after{left:6px;top:0;width:2px;height:14px;transition:transform .18s linear}
details[open] .pm::after{transform:scaleY(0)}
.faq p{padding:0 0 16px;font-size:13px;line-height:1.9;color:var(--muted)}

/* --------------------- 運営者（非・数字の証明） --------------------- */
.who{margin-top:18px;border:1px solid var(--rule-2)}
.who dl{display:grid;grid-template-columns:6.4em 1fr;margin:0}
.who dt{padding:11px 12px;font-size:12px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--rule);background:var(--wash-2);line-height:1.55}
.who dd{margin:0;padding:11px 12px;font-size:12.5px;line-height:1.75;border-bottom:1px solid var(--rule);background:var(--paper)}
.who dl>:nth-last-child(-n+2){border-bottom:0}
.who-say{margin-top:12px;border-left:2px solid var(--green);padding:2px 0 2px 12px;font-size:13px;line-height:1.9;color:var(--muted)}

/* --------------------- 申込 ---------------------
   申込の本体は /contract（メニュー写真の添付・規約同意まで揃っている）。
   LPに簡易フォームを二重に置くと、添付できない方の入口ができてしまい、
   「写真を送るだけ」という約束と食い違う。だからここはボタン1本にする。 */
.cta-a--xl{margin-top:20px;min-height:62px;font-size:17.5px}
.apply-pt{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.apply-pt li{
  position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--rule);
  font-size:13.5px;line-height:1.8;color:var(--muted);
}
.apply-pt li::before{
  content:"";position:absolute;left:4px;top:20px;
  width:7px;height:7px;border-radius:1px;background:var(--green);
}
.apply-pt b{color:var(--text);font-weight:700}

/* 質問だけしたい人の窓口 */
.ask{margin-top:30px;border:1px solid var(--rule-2);background:var(--wash);padding:16px 14px 18px}
.ask h3{font-size:15.5px;font-weight:700;line-height:1.5;margin:0}
.ask-d{font-size:13px;line-height:1.85;color:var(--muted);margin-top:5px}
.qc{margin-top:13px}
.qc-row{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:520px){ .qc-row{grid-template-columns:1fr 1fr} }
.fl{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;line-height:1.5}
.fl span{font-weight:500;color:var(--steel);font-size:12px;margin-left:.5em}
.fg{display:block}
.qc input,.qc textarea{
  width:100%;padding:11px 12px;
  font-family:inherit;font-size:16px;            /* iOSの自動ズーム防止のため16px以上 */
  line-height:1.7;color:var(--text);background:var(--paper);
  border:1px solid var(--rule-2);border-radius:3px;
}
.qc input{height:48px}
.qc textarea{resize:vertical;min-height:84px}
.qc input:focus,.qc textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.qc input:disabled,.qc textarea:disabled{background:var(--wash-2);color:var(--steel)}
/* 質問の送信は副次の導線なので、緑のベタではなく枠線のボタンにする */
.cta-b{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;margin-top:14px;padding:12px 14px;
  background:var(--paper);color:var(--green-d);
  border:1.5px solid var(--green);border-radius:3px;
  font-family:inherit;font-size:15.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;
}
.cta-b:hover{background:var(--green-w)}
.cta-b:disabled{opacity:.5;cursor:default}
.form-note{font-size:12px;line-height:1.8;color:var(--muted);margin-top:12px}
.form-note a{color:var(--green-d);font-weight:700}

/* --------------------- 固定CTAバー ---------------------
   1訪問1.19ページ＝回遊しない読者。どこまで読んでも申込導線を切らさない。
   墨地に緑ボタンは面の境界が弱いので、白の毛抜き合わせを1px入れる。 */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  max-width:var(--maxw);margin:0 auto;
  padding:9px var(--pad) calc(9px + env(safe-area-inset-bottom));
  background:rgba(16,23,32,.97);border-top:1px solid var(--on-ink-r);
  transform:translateY(115%);transition:transform .22s ease-out;
}
.sticky.on{transform:none}
.st-p{line-height:1.2}
.st-p b{display:block;font-family:var(--serif);font-weight:700;font-size:20px;color:var(--on-ink);font-variant-numeric:tabular-nums;font-feature-settings:"palt" 0}
.st-p b .u{color:var(--on-ink-m);font-size:12px}
.st-p small{display:block;font-size:12px;letter-spacing:.04em;color:var(--on-ink-m);line-height:1.35}
.sticky .cta-a{min-height:48px;font-size:14.5px;padding-inline:10px;border:1px solid rgba(255,255,255,.32)}

/* --------------------- フッタ --------------------- */
footer{margin-top:46px;border-top:1px solid var(--rule);padding:14px 0 26px;font-size:12px;line-height:1.9;color:var(--steel)}
footer .fnav{display:flex;gap:4px 18px;flex-wrap:wrap;margin-bottom:6px}
footer a{text-decoration:none;color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
footer a:hover{color:var(--green-d);text-decoration:underline}
.fnav-sub{margin:0 0 10px;font-size:12px}
.fnav-sub a{font-weight:700}
/* 免責は小さくてよいが、読める大きさは保つ（12px下限） */
.fnote{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font-size:12px;line-height:1.85;color:var(--steel)}
.fnote a{display:inline;min-height:0;text-decoration:underline}

/* --------------------- 広い画面（付け足し） ---------------------
   閲覧の約100%がスマホなので、PCは「破綻しない」ことだけを保証する。
   カラム分割などの再設計はしない。 */
@media(min-width:700px){
  body{font-size:16px}
  .hero{padding-top:24px}
  section{padding-top:58px}
}

/* --------------------- モーション配慮 ---------------------
   棒グラフのアニメーションは撤去済み。残る動きはCTAバーの出現と
   details の開閉のみで、それも reduce では止める。 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .sticky{transition:none}
}
/* なめらかスクロールは「ページ内のリンクを押したとき」だけにする。
   html に直接かけると、他ページから /#apply のようなURLで来たときの
   初回移動もなめらかスクロールになり、途中で遅延読み込みの要素が入ると
   スクロールが中断されて手前で止まる。
   実測: /#apply で来ると 9427px の目標に対して 4269px で停止していた
   （5158px 手前。申込フォームは影も形も見えない）。
   読み込みが落ち着いてから home.js が html.smooth を付ける。 */
@media(prefers-reduced-motion:no-preference){ html.smooth{scroll-behavior:smooth} }

/* --------------------- フォーカス可視化 ---------------------
   緑(#c94b1c)を墨地に置くと 1.90:1 で不可視になるため、
   墨地では紙白(#F4F6F8 / 16.78:1)に必ず差し替える。 */
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.dark :focus-visible,.pricebox :focus-visible,.sticky :focus-visible{outline-color:var(--on-ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 実際の注文画面の埋め込み ──────────────────────────
   ここは絵ではなく、/demo/ をiframeで読み込んだ本物の画面。
   以前は手描きのHTMLで画面を再現していたが、依頼者の言うとおり
   「質の悪いスクショ」でしかなく、実物と少しずつ違っていた。
   実物を出せば、ズレようがない。

   ・iframeは実寸(390px)で読み込み、transformで縮小する。
     枠に合わせて狭い幅で読み込むと、実機と違うレイアウトになってしまう。
   ・iframe自身は操作を受けない（pointer-events:none）。
     ページのスクロールが枠の中に吸い込まれる事故を防ぐため。
     触りたい人は上に重ねたリンクから /demo/ へ行く。 */
.demo-live{
  --scale:.77;            /* 390 × .77 = 300.3px */
  position:relative;margin-top:22px;
  width:calc(390px * var(--scale) + 16px);   /* 画面幅＋枠の厚み */
  margin-inline:auto;
}
@media(min-width:620px){ .demo-live{--scale:.92} }
.demo-live__frame{
  background:#2A3441;border:1px solid #3C4855;border-radius:34px;padding:7px;
}
.demo-live__screen{
  position:relative;overflow:hidden;background:#fff;border-radius:27px;
  width:calc(390px * var(--scale));
  height:calc(806px * var(--scale));
}
.demo-live__screen iframe{
  width:390px;height:806px;border:0;display:block;
  transform:scale(var(--scale));transform-origin:0 0;
  pointer-events:none;
  /* 読み込み前の白飛びを避ける。読み込めたらJSが is-ready を付ける */
  opacity:0;transition:opacity .4s ease;
}
.demo-live.is-ready .demo-live__screen iframe{opacity:1}
/* 読み込めなかったときは枠ごと畳んで、ボタンだけ残す。壊れた黒枠は見せない */
.demo-live.is-failed .demo-live__frame{display:none}
.demo-live.is-failed .demo-live__tap{position:static;height:auto;padding:0}

/* 画面の上に重ねる「触ってみる」。枠のどこを押しても /demo/ へ行く */
.demo-live__tap{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:22px;text-decoration:none;
  border-radius:34px;
}
.demo-live__tapb{
  display:inline-flex;align-items:center;gap:7px;
  min-height:48px;padding:0 18px;
  background:var(--ink);color:var(--on-ink);
  border:1px solid rgba(255,255,255,.28);border-radius:3px;
  font-size:14.5px;font-weight:700;letter-spacing:.03em;
  box-shadow:0 6px 20px rgba(16,23,32,.28);
}
.demo-live__tap:hover .demo-live__tapb{background:var(--green-d)}
.demo-live__tap:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.demo-live.is-failed .demo-live__tapb{width:100%;justify-content:center;background:var(--green)}

.scr-fig{margin:24px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.scr-fig figcaption{font-size:12.5px;line-height:1.8;color:var(--muted);text-align:left}

/* ── 導入の手間（3ステップ）────────────────────────
   カードで囲わず、番号と罫線だけで手順を示す。
   数字は墨のベタ面に紙白（16.78:1）。丸ではなく角丸の四角にして、
   ページ全体の「几帳面な直線」の語彙と揃える。 */
.setup{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--rule)}
.setup li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--rule)}
.setup__n{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:5px;background:var(--ink);color:var(--on-ink);
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.setup li>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.setup b{font-size:16px;font-weight:700;line-height:1.5}
.setup span{font-size:14px;line-height:1.85;color:var(--muted)}
.setup strong{color:var(--text);font-weight:700}

/* --------------------- 動画 ---------------------
   構造化データ(VideoObject)に対応する実体。ポスター画像だけ先に出し、
   本体は再生されるまで落とさない（preload="none"）。 */
.vids{margin-top:20px;display:grid;gap:22px}
@media(min-width:620px){ .vids{grid-template-columns:1fr 1fr;gap:18px} }
.vids figure{margin:0}
.vids video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--ink);border:1px solid var(--rule-2);border-radius:3px;
}
.vids figcaption{margin-top:8px;font-size:12.5px;line-height:1.8;color:var(--muted)}
.vids figcaption b{color:var(--text);font-weight:700}

/* --------------------- FAQの分類見出し --------------------- */
.faq-g{
  margin-top:26px;font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--green);line-height:1.4;
}
.faq-g:first-of-type{margin-top:20px}
.faq-g + .faq{margin-top:6px}

/* 副CTA（運営に代行を頼む道）。主CTA（自分で無料で始める）と役割が違うので、
   同じ大きさで色だけ落とす。小さくすると「こちらは選ばせたくない」に見える。
   代行は実際に価値のある選択肢なので、押しにくくしてはいけない。 */
.cta-a--sub{
  margin-top:10px;background:transparent;color:var(--green);
  border:1.5px solid var(--green);font-size:15px;font-weight:700;
}
.cta-a--sub:hover,.cta-a--sub:active{background:rgba(0,0,0,.04)}
/* 主CTAの直下。無料であることを、押す直前の位置に1行で置く。
   説明文(.cta-sub)は副CTAより下にあり、ファーストビューに入らない端末がある。 */
.cta-free{margin:9px 0 0;font-size:13.5px;line-height:1.7;color:var(--muted);text-align:center}
.cta-free b{color:var(--text);font-weight:800}