/* ============================================================
   course.html 専用レイヤー
   2026-08-01 新設 → 同日、案内ページとして書き直し（v2）。

   共通の作法（丸ゴシック・角ゼロ・墨罫・硬い影・ボタン・ロゴ・ナビ修正）は
   renewal-framework.css が持つ。ここはこのページ固有のブロックだけ。
   新しい色は作らない。--c1 と --rf-* だけを借りる。

   赤の使い分け（session.html / trust-pages.css で確定した線）
   ── 罫・下線・面塗り        → var(--c1)  #E63329
   ── 紙の上の小さい赤文字    → #A81C14    ← --c1 だと 4.24 でAA未満
   ── 紙文字を乗せる赤い面    → var(--rf-body-fill) #D92B1F

   このページの立ち位置（触るとき必ず読む）
   ── ここは思想を書く場所ではない。セッションの案内ページ。
      考え方は process.html / four-domains.html / ai.html / healy.html /
      skincare.html に家がある。書き下すとデジャブになる（初版で実際になった）。
      置くのは「このページにしか無いもの」＝流れ・レポート・毎月すること・
      商品名が出たときの扱い・期間の根拠・料金。
   ── .co-monthly-list の並び順を入れ替えない。無料のものが上。
      ヒーリー・メナードを上に出すと物販ページになる。
   ── .co-recommend の面を赤ベタにしない。ここを強く見せると
      .co-resonance（買わせる圧が理屈の側にない）と絵づらが逆を向く。
   ── 硬い影（4px 4px 0 / 6px 6px 0）を持つ要素の直後に margin:0 の要素を
      置かない。影は要素の高さに含まれないので数値検証では出ず、実機でだけ
      重なる（2026-07-30 skincare.html で実際に出た事故）。
   ============================================================ */

/* ------------------------------------------------------------
   共通パーツ
   ------------------------------------------------------------ */
.page-course .co-lead {
  max-width: 760px;
  color: var(--rf-muted);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2;
  margin: 0 0 clamp(30px, 4vw, 46px);
}
.page-course .co-lead strong { color: var(--rf-ink); font-weight: 700; }

.page-course .co-note {
  max-width: 760px;
  margin-top: 22px;
  color: var(--rf-muted);
  font-size: 13px;
  line-height: 1.95;
}
.page-course .co-note strong { color: var(--rf-ink); font-weight: 700; }

.page-course figure { margin: 0; }
.page-course .img-slot { width: 100%; }

/* ------------------------------------------------------------
   01 ヒーロー
   ------------------------------------------------------------ */
.page-course .co-hero {
  padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 7vw, 80px);
  /* 上余白はヘッダーの高さ＋24pxを下回らない（2026-10-04：スマホでヘッダーが英字ラベルにかぶっていた） */
  padding-top: max(clamp(64px, 10vw, 120px), calc(var(--site-header-height, 88px) + 24px));
  border-bottom: 3px solid var(--rf-ink);
}
.page-course .co-hero-inner { max-width: 900px; }
.page-course .co-hero h1 {
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.35;
  margin: 0 0 26px;
  color: var(--rf-ink);
}

/* 何のページかを名指しする帯。h1 だけだと初見で正体が分からない
   （2026-08-01 の指摘）。kicker「波動調整コース」とこの帯で h1 を挟む。
   プラン名は墨地に紙文字のチップ。開いたナビの連番チップと同じ語彙で、
   このページだけの新しい見えを作っていない。 */
.page-course .co-hero-plans {
  max-width: 720px;
  margin: 0 0 30px;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 26px);
  border: 3px solid var(--rf-ink);
  background: var(--rf-paper-2);
}
.page-course .co-hero-plan-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.page-course .co-hero-plan-list li {
  padding: 8px 16px;
  background: var(--rf-ink);
  color: var(--rf-paper);
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: 0.04em;
}
.page-course .co-hero-plans-sub {
  margin: 0;
  color: var(--rf-muted);
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.9;
}
.page-course .co-hero-plans-sub strong { color: var(--rf-ink); font-weight: 700; }

.page-course .co-hero-lead {
  max-width: 720px;
  color: var(--rf-muted);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2;
}
.page-course .co-hero-lead strong { color: var(--rf-ink); font-weight: 700; }
.page-course .co-hero-figure { margin-top: clamp(34px, 5vw, 56px); }

/* ------------------------------------------------------------
   02 立ち位置（断り書き）
   薄い注意書きにしない。ここが読まれないと物販ページに見えるため、
   本文と同じ大きさで、罫で囲って置く。skincare.html の .sk-stance と同じ役割。
   ------------------------------------------------------------ */
.page-course .co-stance {
  padding: clamp(44px, 6vw, 72px) 0;
  background: var(--rf-paper-2);
  border-bottom: 3px solid var(--rf-ink);
}
.page-course .co-stance-box {
  margin-top: 18px;
  padding: clamp(24px, 4vw, 40px);
  border: 3px solid var(--rf-ink);
  background: var(--rf-paper);
}
.page-course .co-stance-box h2 {
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.5;
  margin: 0 0 24px;
}
.page-course .co-stance-list { list-style: none; margin: 0; padding: 0; }
.page-course .co-stance-list li {
  position: relative;
  padding-left: 26px;
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
}
.page-course .co-stance-list li + li {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rf-hair);
}
.page-course .co-stance-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1em + 4px);
  width: 14px;
  height: 3px;
  background: var(--c1);
}
.page-course .co-stance-list li + li::before { top: calc(1em + 20px); }
.page-course .co-stance-list strong { color: var(--rf-ink); font-weight: 700; }

/* ------------------------------------------------------------
   03 3ヶ月の流れ  ← このページの主役
   左に時期、右に中身。時期の列を固定幅にして、縦に線が通るようにする。
   ------------------------------------------------------------ */
.page-course .co-flow { padding: clamp(56px, 8vw, 100px) 0; }
.page-course .co-flow-figure { margin: 0 0 clamp(34px, 5vw, 54px); }

.page-course .co-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 3px solid var(--rf-ink);
}
.page-course .co-flow-item {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(20px, 2.8vw, 30px);
  background: var(--rf-paper);
}
.page-course .co-flow-item + .co-flow-item { border-top: 3px solid var(--rf-ink); }
.page-course .co-flow-when {
  margin: 0;
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.5;
  color: var(--c1);
}
.page-course .co-flow-body h3 {
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.45;
  margin: 0 0 12px;
}
.page-course .co-flow-body p {
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  margin: 0 0 12px;
}
.page-course .co-flow-body p:last-child { margin-bottom: 0; }
.page-course .co-flow-body strong { color: var(--rf-ink); font-weight: 700; }
.page-course .co-flow-note {
  padding-top: 12px;
  border-top: 1px solid var(--rf-hair);
  font-size: 13px !important;
}
/* 終わったあと。期間の外にあるので地の色で外す
   （2026-08-01：申込み手続きの2ステップを削ったので --before は廃止） */
.page-course .co-flow-item--end { background: var(--rf-paper-2); }
/* 「ここだけは一緒に行く」節。3ヶ月で唯一こちらが並走する場所なので面で示す */
.page-course .co-flow-item--mark { border-left: 8px solid var(--c1); }

/* ------------------------------------------------------------
   04 毎月届くレポートのこと
   「書いてあること」「書いていないこと」を対等に2列で置く。
   片方を強く見せない（期待をずらさないための節なので）。
   ------------------------------------------------------------ */
.page-course .co-report {
  padding: clamp(56px, 8vw, 100px) 0;
  background: var(--rf-paper-2);
  border-top: 3px solid var(--rf-ink);
  border-bottom: 3px solid var(--rf-ink);
}
.page-course .co-report-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 3px solid var(--rf-ink);
  background: var(--rf-paper);
}
.page-course .co-report-card { padding: clamp(22px, 3vw, 32px); }
.page-course .co-report-card:first-child { border-right: 3px solid var(--rf-ink); }
.page-course .co-report-card h3 {
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.4;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--rf-line);
}
.page-course .co-report-list { list-style: none; margin: 0; padding: 0; }
.page-course .co-report-list li {
  position: relative;
  padding-left: 20px;
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.95;
}
.page-course .co-report-list li + li { margin-top: 12px; }
.page-course .co-report-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.92em;
  width: 11px;
  height: 2px;
  background: var(--c1);
}
.page-course .co-report-list strong { color: var(--rf-ink); font-weight: 700; }

/* ------------------------------------------------------------
   05 毎月していただくこと
   ⚠ 並び順を入れ替えない。無料のものが上。
   ------------------------------------------------------------ */
.page-course .co-monthly { padding: clamp(56px, 8vw, 100px) 0; }

.page-course .co-monthly-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 3px solid var(--rf-ink);
}
.page-course .co-monthly-item {
  padding: clamp(22px, 3vw, 34px);
  border-right: 3px solid var(--rf-ink);
  border-bottom: 3px solid var(--rf-ink);
}
.page-course .co-monthly-item:nth-child(2n) { border-right: 0; }
.page-course .co-monthly-item:nth-last-child(-n+2) { border-bottom: 0; }
/* 面を敷くのは無料の実践。ここがいちばん効く、を絵づらでも言う */
.page-course .co-monthly-item--core { background: var(--rf-paper-2); }

.page-course .co-monthly-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.page-course .co-monthly-head h3 {
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.4;
  margin: 0;
}
.page-course .co-tag {
  padding: 3px 11px;
  border: 2px solid var(--rf-ink);
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rf-ink);
  white-space: nowrap;
}
.page-course .co-tag--core {
  background: var(--rf-body-fill);
  border-color: var(--rf-body-fill);
  color: var(--rf-paper);
}
.page-course .co-monthly-who {
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: 13px;
  color: #A81C14;
  margin: 0 0 14px;
}
.page-course .co-monthly-item p:not(.co-monthly-who) {
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  margin: 0 0 12px;
}
.page-course .co-monthly-item strong { color: var(--rf-ink); font-weight: 700; }
.page-course .co-monthly-note {
  padding-top: 12px;
  border-top: 1px solid var(--rf-hair);
  font-size: 13px !important;
}

/* 勧める箱
   「必須ではありません」だけだと冷たい案内になるので、本人の立場を書く場所。
   ⚠ 面を赤ベタにしない。地は紙のまま、左の赤い罫1本だけで温度を出す。 */
.page-course .co-recommend {
  margin-top: clamp(28px, 4vw, 42px);
  padding: clamp(24px, 3.4vw, 38px);
  background: var(--rf-paper-2);
  border: 3px solid var(--rf-ink);
  border-left-width: 10px;
  border-left-color: var(--c1);
}
.page-course .co-recommend h3 {
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.5;
  margin: 0 0 20px;
}
.page-course .co-recommend p {
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  margin: 0 0 14px;
}
.page-course .co-recommend strong { color: var(--rf-ink); font-weight: 700; }
.page-course .co-recommend-list {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  background: var(--rf-paper);
  border: 2px solid var(--rf-line);
}
.page-course .co-recommend-list li {
  padding: 14px clamp(16px, 2.2vw, 22px);
  color: var(--rf-muted);
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.95;
}
.page-course .co-recommend-list li + li { border-top: 2px solid var(--rf-line); }
.page-course .co-recommend-list strong { color: var(--rf-ink); font-weight: 700; }
.page-course .co-recommend-last {
  margin-bottom: 0 !important;
  padding-top: 16px;
  border-top: 2px solid var(--rf-line);
}

/* ------------------------------------------------------------
   06 レポートに商品名が出てきたら
   ------------------------------------------------------------ */
.page-course .co-layers {
  padding: clamp(56px, 8vw, 100px) 0;
  background: var(--rf-paper-2);
  border-top: 3px solid var(--rf-ink);
  border-bottom: 3px solid var(--rf-ink);
}
.page-course .co-resonance {
  padding: clamp(24px, 4vw, 40px);
  background: var(--rf-paper);
  border: 3px solid var(--rf-ink);
}
.page-course .co-resonance h3 {
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.5;
  margin: 0 0 20px;
}
.page-course .co-resonance p {
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  margin: 0 0 14px;
}
.page-course .co-resonance strong { color: var(--rf-ink); font-weight: 700; }

/* 「買ってほしいのは自分の都合」を書く場所。
   ここを外すと、上の共鳴の説明だけでは
   「買わなくていいけど買った方が効く」＝アップセルと同じ形になる。 */
.page-course .co-honest {
  margin: 26px 0 18px;
  padding: clamp(18px, 2.6vw, 26px);
  background: var(--rf-paper-2);
  border-left: 6px solid var(--c1);
}
.page-course .co-honest p { margin: 0; }

/* ------------------------------------------------------------
   07 なぜ3ヶ月なのか
   ⚠「3ヶ月で細胞が入れ替わる」と書かない。書けるのは
     「速いところが一巡する長さ」まで。初版の10行の表は、案内ページとしては
     理科の授業になるので3行に落とした（2026-08-01 書き直し）。
     数値は推定なので、棒グラフや目盛りにしない（無い精度の主張になる）。
   ------------------------------------------------------------ */
.page-course .co-why { padding: clamp(56px, 8vw, 100px) 0; }
.page-course .co-why-line {
  max-width: 760px;
  margin: 0;
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
}
.page-course .co-why-src { font-size: 12px; }

.page-course .co-pull {
  margin: clamp(30px, 4.4vw, 48px) 0;
  padding: clamp(24px, 3.4vw, 36px);
  background: var(--rf-paper-2);
  border-top: 3px solid var(--rf-ink);
  border-bottom: 3px solid var(--rf-ink);
  font-family: var(--rf-display);
  font-weight: 500;
  font-size: clamp(17px, 2.4vw, 24px);
  line-height: 1.9;
  color: var(--rf-ink);
}
.page-course .co-pull strong { font-weight: 800; }

.page-course .co-why-note { max-width: 760px; }
.page-course .co-why-note p {
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  margin: 0 0 16px;
}
.page-course .co-why-last {
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  padding-top: 20px;
  border-top: 2px solid var(--rf-line);
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: clamp(16px, 2.1vw, 21px) !important;
  color: var(--rf-ink) !important;
  line-height: 1.9 !important;
}

.page-course .co-sixmonth {
  margin-top: clamp(34px, 5vw, 52px);
  padding: clamp(24px, 3.4vw, 36px);
  border: 3px solid var(--rf-ink);
}
.page-course .co-sixmonth h3 {
  font-size: clamp(19px, 2.5vw, 26px);
  line-height: 1.5;
  margin: 0 0 16px;
}
.page-course .co-sixmonth p {
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  margin: 0 0 12px;
}
.page-course .co-sixmonth p:last-child { margin-bottom: 0; }
.page-course .co-sixmonth strong { color: var(--rf-ink); font-weight: 700; }

/* ------------------------------------------------------------
   08 料金
   ⚠ 金額の出どころは session.html。ここは写し。
     変えるときは session.html を先に直すこと。
   ------------------------------------------------------------ */
.page-course .co-price {
  padding: clamp(56px, 8vw, 100px) 0;
  background: var(--rf-paper-2);
  border-top: 3px solid var(--rf-ink);
  border-bottom: 3px solid var(--rf-ink);
}
.page-course .co-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 28px);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.page-course .co-price-card {
  padding: clamp(22px, 3vw, 32px);
  border: 3px solid var(--rf-ink);
  background: var(--rf-paper);
}
.page-course .co-price-name {
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(18px, 2.3vw, 23px);
  line-height: 1.45;
  color: var(--rf-ink);
  margin: 0;
}
/* 名前を2つ持たせない。session.html 側の呼び名を必ず併記する
   （申し込むときに別のメニューだと思われると事故る） */
.page-course .co-price-alias {
  margin: 10px 0 0;
  color: var(--rf-muted);
  font-size: 12px;
  line-height: 1.75;
}
.page-course .co-price-divider {
  height: 3px;
  background: var(--rf-ink);
  margin: 16px 0 18px;
}
.page-course .co-price-meta { list-style: none; margin: 0 0 20px; padding: 0; }
.page-course .co-price-meta li {
  position: relative;
  padding-left: 18px;
  color: var(--rf-muted);
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.95;
}
.page-course .co-price-meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.92em;
  width: 10px;
  height: 2px;
  background: var(--c1);
}
.page-course .co-price-terms { margin: 0; border-top: 2px solid var(--rf-line); }
.page-course .co-price-terms > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 2px solid var(--rf-line);
}
.page-course .co-price-terms dt {
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 17px);
  color: var(--rf-ink);
}
.page-course .co-price-terms dd {
  margin: 0;
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 26px);
  color: var(--rf-ink);
}

.page-course .co-price-note {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: clamp(18px, 2.6vw, 26px);
  background: var(--rf-paper);
  border: 3px solid var(--rf-ink);
}
.page-course .co-price-note li {
  position: relative;
  padding-left: 22px;
  color: var(--rf-muted);
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.95;
}
.page-course .co-price-note li + li { margin-top: 10px; }
.page-course .co-price-note li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 12px;
  height: 2px;
  background: var(--c1);
}
.page-course .co-price-note strong { color: var(--rf-ink); font-weight: 700; }

.page-course .co-price-actions { display: flex; flex-wrap: wrap; gap: 16px; }
/* ⚠ ボタンの硬い影（6px 6px 0）は要素の高さに入らない。
   直後に margin:0 の要素を置くと実機で文字に影が乗る。
   影の6pxを含めて余白を取り、区切りの細罫を置いている。 */
.page-course .co-price-after {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rf-line);
  color: var(--rf-muted);
  font-size: 13px;
  line-height: 1.9;
}

/* ------------------------------------------------------------
   09 向いていない方
   ------------------------------------------------------------ */
.page-course .co-notfor { padding: clamp(56px, 8vw, 100px) 0; }
.page-course .co-notfor-inner { max-width: 820px; }
.page-course .co-notfor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 3px solid var(--rf-ink);
  background: var(--rf-paper);
}
.page-course .co-notfor-list li {
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
  color: var(--rf-muted);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
}
.page-course .co-notfor-list li + li { border-top: 2px solid var(--rf-line); }
.page-course .co-notfor-list strong { color: var(--rf-ink); font-weight: 700; }
.page-course .co-notfor-after {
  margin-top: 22px;
  color: var(--rf-muted);
  font-size: 13px;
  line-height: 1.9;
}

/* ------------------------------------------------------------
   10 導線
   ------------------------------------------------------------ */
.page-course .co-next {
  padding: clamp(56px, 8vw, 100px) 0;
  border-top: 3px solid var(--rf-ink);
}
.page-course .co-next-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 20px);
  margin-bottom: clamp(30px, 4vw, 44px);
}

/* ------------------------------------------------------------
   スマホ
   1列に落とすときは、nth-child で消していた罫も戻す。
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .page-course .co-report-split { grid-template-columns: 1fr; }
  .page-course .co-report-card:first-child {
    border-right: 0;
    border-bottom: 3px solid var(--rf-ink);
  }
  .page-course .co-monthly-list { grid-template-columns: 1fr; }
  .page-course .co-monthly-item {
    border-right: 0;
    border-bottom: 3px solid var(--rf-ink);
  }
  .page-course .co-monthly-item:nth-child(2n) { border-right: 0; }
  .page-course .co-monthly-item:nth-last-child(-n+2) { border-bottom: 3px solid var(--rf-ink); }
  .page-course .co-monthly-item:last-child { border-bottom: 0; }
  .page-course .co-price-grid { grid-template-columns: 1fr; }
  .page-course .co-next-links { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-course .co-flow-item { grid-template-columns: 1fr; gap: 8px; }
  .page-course .co-flow-when { font-size: 14px; }
  .page-course .co-price-actions { flex-direction: column; align-items: stretch; }
  .page-course .co-price-actions .btn-primary,
  .page-course .co-price-actions .btn-secondary { text-align: center; }
}