/* ============================================================
   公開側（決済ページ・サンクスページ・プラン選択ページ・受付終了案内）用スタイル
   mock/assets/mock.css のデザイントークンを踏襲する（ホワイト×インディゴ基調、
   Lato＋ゴシック。値は mock.css と同一のものを使用する。docs/05 §1 参照）。
   管理画面用の public/assets/admin.css とは別ファイルで完全に独立させている。
   ============================================================ */
:root{
  --ink:#1F262E;        /* 基本文字色（ほぼ黒） */
  --ink-soft:#5B6470;   /* 補助文字色 */
  --paper:#FFFFFF;      /* 背景（現行サイトは白） */
  --paper-2:#F5F6F8;    /* 淡いグレー背景 */
  --white:#FFFFFF;
  --rule:#E3E6EA;       /* 罫線 */
  --rule-2:#C6CBD3;     /* 濃い罫線 */
  --navy:#3D3C9E;       /* 主アクセント（Thinkific スタイル設定の Primary color に合わせたインディゴ） */
  --navy-bg:#EEEEF8;
  --signal:#B23B2E;     /* 強調・警告 */
  --signal-bg:#FBEDEA;
  --ok:#0E5751;         /* 成功 */
  --ok-bg:#E9F1EF;
  --hold:#2F2B75;       /* 保留・情報 */
  --hold-bg:#EDECF7;
  --err:#8C1D18;        /* エラー */
  --err-bg:#F9E7E5;
  --link:#1A56DB;       /* リンク */
  --mincho:"Lato","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --gothic:"Lato","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Roboto Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--gothic);font-size:21px;line-height:1.8;
  font-feature-settings:"palt" 1;
}
h1,h2,h3{line-height:1.4;letter-spacing:.02em}
a{color:var(--link)}
code{font-family:var(--mono);font-size:17.5px;background:var(--paper-2);padding:2px 6px;border-radius:2px}

/* レイアウト */
.container{max-width:860px;margin:0 auto;padding:0 24px 80px}

/* ボタン */
.btn{
  display:inline-block;padding:13px 30px;border:1px solid var(--navy);
  background:var(--navy);color:#fff;font-size:19.5px;font-family:var(--gothic);
  letter-spacing:.06em;cursor:pointer;text-decoration:none;border-radius:2px;
}
.btn:hover{opacity:.85}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}

/* バッジ */
.badge{
  display:inline-block;font-family:var(--mono);font-size:15px;letter-spacing:.08em;
  padding:3px 11px;border-radius:2px;border:1px solid currentColor;white-space:nowrap;
}
.badge-ok{color:var(--ok);background:var(--ok-bg)}
.badge-warn{color:#9A6700;background:#FFF4DC}
.badge-err{color:var(--err);background:var(--err-bg)}
.badge-hold{color:var(--hold);background:var(--hold-bg)}
.badge-muted{color:var(--ink-soft);background:var(--paper-2)}

/* カード・注意書き */
.card{background:var(--white);border:1px solid var(--rule);padding:26px 30px;border-radius:2px}
.callout{background:var(--signal-bg);border-left:3px solid var(--signal);padding:16px 20px;margin:20px 0;font-size:19px}
.callout b{display:block;margin-bottom:4px}
.note{font-size:17.5px;color:var(--ink-soft);border-left:2px solid var(--rule-2);padding:2px 0 2px 14px}

/* --- 共通ヘッダー（決済ページ・プラン選択ページ） --- */
.site-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:26px}
.site-header .course-name{font-family:var(--mincho);font-size:22.5px;letter-spacing:.02em}
.page-slug{font-family:var(--mono);font-size:15.5px;color:var(--ink-soft)}
.badges{margin-bottom:14px}

/* --- 決済ページ /p/{slug} --- */
.container{padding-top:44px}
h1{font-family:var(--mincho);font-size:30px;margin:0 0 8px}
.lead{color:var(--ink-soft);font-size:19px;margin:0 0 30px}
.price-panel{background:var(--white);border:1px solid var(--rule);padding:28px 30px;text-align:center;border-radius:2px}
.price-label{font-size:17.5px;color:var(--ink-soft);letter-spacing:.08em;margin-bottom:6px}
.price-amount{font-family:var(--mincho);font-size:56px;font-weight:700;letter-spacing:.02em}
.price-amount .yen{font-size:25px;font-weight:400;margin-left:4px}
.price-note{font-size:17.5px;color:var(--ink-soft);margin-top:8px}
.price-breakdown{margin-top:16px;padding-top:16px;border-top:1px dashed var(--rule-2);font-size:17.5px;color:var(--ink-soft);text-align:left}
.price-breakdown .row{display:flex;justify-content:space-between;padding:2px 0}
.price-breakdown .row.total{font-weight:700;color:var(--ink);border-top:1px solid var(--rule);margin-top:5px;padding-top:7px}
.widget-box{border:1px dashed var(--rule-2);background:var(--paper-2);padding:20px 22px;margin:20px 0 0;border-radius:2px}
.widget-box .widget-label{font-family:var(--mono);font-size:15px;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:10px}
.widget-row{background:var(--white);border:1px solid var(--rule);padding:12px 15px;font-size:18px;color:var(--ink-soft);margin-bottom:6px;border-radius:2px;display:flex;justify-content:space-between;gap:10px}
.widget-row:last-child{margin-bottom:0}
.widget-row .fake-select{font-family:var(--mono);font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--rule-2);padding:3px 9px;border-radius:2px}
.cta{text-align:center;margin:24px 0}
.cta .btn{width:100%;max-width:320px;padding:16px 22px;font-size:21px}
/* 決済ウィジェット（外部CDNのcheckout.js）の描画が終わるまで重ねておくプレースホルダ。
   ウィジェット自体は隠さずオーバーレイで覆う。display:none にすると checkout.js の
   描画対象から外れる可能性があるため。覆っている間はクリックも通らない。 */
.cta-slot{position:relative;min-height:64px}
.cta-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.cta-loading[hidden]{display:none}
.cta-loading .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--rule);border-color:var(--rule-2);color:var(--ink-soft);cursor:not-allowed;
}
.cta-loading .btn:hover{opacity:1}
.cta-loading.is-failed .btn{background:var(--signal-bg);border-color:var(--signal);color:var(--signal);font-size:17.5px}
.cta-loading.is-failed .cta-spinner{display:none}
.cta-spinner{
  width:19px;height:19px;flex:none;border:2px solid var(--rule-2);
  border-top-color:var(--navy);border-radius:50%;animation:cta-spin .8s linear infinite;
}
@keyframes cta-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cta-spinner{animation-duration:2.4s}}
.explain-box{border:1px dashed var(--rule-2);background:var(--paper-2);padding:16px 20px;font-size:17.5px;color:var(--ink-soft);margin:0 0 26px;border-radius:2px}
.explain-box p{margin:0 0 8px}
.explain-box p:last-child{margin-bottom:0}

/* --- サンクスページ /thanks/{slug} --- */
.result-panel{background:var(--ok-bg);border:1px solid var(--ok);border-radius:2px;padding:32px 32px 28px;text-align:center;margin-bottom:30px}
.result-panel .mark{font-size:39px;color:var(--ok);margin-bottom:6px}
.result-panel h1{font-family:var(--mincho);font-size:31px;color:var(--ok);margin:0 0 8px}
.result-panel p{margin:0;font-size:19px;color:var(--ink-soft)}
.section{margin-bottom:28px}
.section h2{font-size:19.5px;margin:0 0 10px;letter-spacing:.03em}
.section p{font-size:19px;margin:0 0 10px}
.todo-list{background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:20px 22px;font-size:18px}
.todo-list li{margin-bottom:8px}
.todo-list li:last-child{margin-bottom:0}
.contact{font-family:var(--mono);font-size:18px}

/* --- 受付終了案内（非公開ページ・プラン選択ページの非公開時） --- */
.closed-container{padding-top:84px;max-width:620px;text-align:center;margin:0 auto}
.closed-container .result-panel{background:var(--paper-2);border:1px solid var(--rule-2)}
.closed-container .result-panel .mark{color:var(--ink-soft)}
.closed-container .result-panel h1{font-family:var(--mincho);font-size:28px;color:var(--ink);margin:0 0 12px}
.closed-container .result-panel p{text-align:left;margin:0 0 8px}
.closed-container .result-panel p:last-child{margin-bottom:0}
.closed-container footer.note{text-align:left;margin-top:34px}

/* --- 不正アクセス向けエラー画面 (/thanks/{slug} 異常系) --- */
.error-container{padding-top:84px;max-width:620px;text-align:center;margin:0 auto}
.error-container .result-panel{background:var(--err-bg);border:1px solid var(--err)}
.error-container .result-panel .mark{color:var(--err)}
.error-container .result-panel h1{font-family:var(--mincho);font-size:28px;color:var(--err);margin:0 0 12px}
.error-container .result-panel p{text-align:left;margin:0 0 8px}
.error-container .result-panel p:last-child{margin-bottom:0}

/* --- プラン選択ページ /g/{slug} --- */
.container-wide{max-width:900px;margin:0 auto;padding:44px 24px 80px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan-card{background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:24px 22px;display:flex;flex-direction:column}
.plan-name{font-family:var(--mincho);font-size:22.5px;margin-bottom:12px}
.plan-price-main{font-family:var(--mincho);font-size:36.5px;font-weight:700}
.plan-price-main .yen{font-size:18px;font-weight:400;margin-left:2px}
.plan-price-sub{font-size:16px;color:var(--ink-soft);margin:8px 0 20px}
/* margin-top:auto にすると、フレックスの余った高さをすべてここが吸ってボタンがカード下端へ
   落ちる。注記の無いプランだけ価格とボタンが大きく離れて見えるため、固定の余白にして上詰めにする。 */
.plan-card .btn{margin-top:20px;text-align:center}
.plan-note{font-size:15.5px;color:var(--ink-soft);margin-top:8px;text-align:center}
@media (max-width:680px){.plan-grid{grid-template-columns:1fr}}

/* --- 仮申込の照合フォーム（プラン選択ページの入口） --- */
.entry-panel{max-width:520px;margin:0 auto;background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:30px 32px}
.price-panel + .entry-panel{margin-top:24px}
.entry-panel .field{margin-bottom:20px}
.entry-panel label{display:block;font-size:17.5px;margin-bottom:8px}
.entry-panel input[type=email],
.entry-panel input[type=text]{
  width:100%;box-sizing:border-box;padding:13px 14px;font-size:19px;font-family:inherit;
  color:var(--ink);background:var(--white);border:1px solid var(--rule-2);border-radius:2px
}
.entry-panel input[type=email]:focus,
.entry-panel input[type=text]:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:var(--navy)}
.entry-panel input[readonly]{background:var(--paper-2);color:var(--ink-soft)}
.entry-panel .field-hint{margin:8px 0 0;font-size:15.5px;color:var(--ink-soft)}
.entry-panel .btn{width:100%;padding:15px 22px;font-size:20px;text-align:center}
.entry-error{background:var(--err-bg);border-left:3px solid var(--err);color:var(--err);padding:14px 18px;margin:0 0 22px;font-size:17.5px}
.entry-verified{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:16px;color:var(--ink-soft);margin:0 0 26px}
.entry-verified .addr{font-family:var(--mono)}
.entry-verified form{margin:0}
.link-button{
  padding:0;border:0;background:none;font:inherit;color:var(--navy);
  text-decoration:underline;cursor:pointer
}
.link-button:hover{opacity:.75}