/* ============================================================
   推し秘書®アカデミーPRO LP  デザインシステム(2026-09-15 再設計版)
   ・スマホ基準で設計し、768px以上・1024px以上で広げる
   ・書体は2系統(見出し：Zen Kaku Gothic New／本文：Noto Sans JP)
   ・文字は6つの役割(FV／KEY／TITLE／SUB／BODY／NOTE)で、サイズ・太さ・行間をセットで決める
     ＋価格専用の表示(PRICE)。役割にない組み合わせは作らない
   ・色は6色(ボルドー／深いボルドー／生成り／チャコール／コーラル／グレージュ)
   ・写真は3つの役割(HERO／BREAK／STORY)。高画質版は images/ の同じ名前で上書きすれば差し替わる
   ============================================================ */

:root {
  /* 色(6色)。ボルドーはロゴ(#941E57)と並べて違和感のない#8E1F52 */
  --bordeaux: #8E1F52;
  --bordeaux-deep: #6B1740;
  --base: #F7F3EE;
  --charcoal: #2B2627;
  --coral: #E07A5F;
  --greige: #E6DDD5;
  /* 上の6色から作る文字色(新しい色味は足さない) */
  --charcoal-soft: #5E5657;
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, 0.82);

  /* 書体(2系統) */
  --font-head: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* ---- タイポグラフィ(役割ごとにサイズ・太さ・行間をセットで管理) ----
     スマホの値。768px以上で上書き */
  --fv-size: 32px;     --fv-weight: 700;     --fv-lh: 1.35;     /* FV：FVメイン */
  --key-size: 26px;    --key-weight: 700;    --key-lh: 1.45;    /* KEY：キーメッセージ */
  --title-size: 22px;  --title-weight: 700;  --title-lh: 1.5;   /* TITLE：セクション見出し */
  --sub-size: 18px;    --sub-weight: 500;    --sub-lh: 1.55;    /* SUB：小見出し・名前・短い強調 */
  --body-size: 14px;   --body-weight: 400;   --body-lh: 2;    /* BODY：読ませる文章すべて */
  --note-size: 12px;   --note-weight: 400;   --note-lh: 1.7;    /* NOTE：ラベル・注記 */
  --ui-weight: 500;                                             /* ラベル・ボタン・名前などUI要素の太さ */
  /* PRICE：価格専用(役割の例外として明示的に管理) */
  --price-size: 24px;  --price-weight: 500;  --price-lh: 1.5;   /* 9/23 金額を主役にしないサイズに */

  /* 余白 */
  --gutter: 24px;
  --pad-read: 76px;   /* 読ませるセクション(9/23 余白を広げた) */
  --pad-show: 112px;  /* 魅せるセクション */
  --measure: 640px;   /* 本文の最大幅 */
  --container: 1080px;
  --header-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --fv-size: 56px;
    --key-size: 40px;
    --title-size: 30px;
    --sub-size: 20px;
    --body-size: 16px;
    --note-size: 14px;
    --price-size: 30px;
    --gutter: 40px;
    --pad-read: 116px;
    --pad-show: 168px;
    --header-h: 72px;
  }
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* スマホで左右にブレないよう、横方向のはみ出しを切り取る(clipはスクロール領域を作らないので、固定ヘッダーに影響しない) */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--base);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  letter-spacing: 0.03em;
  line-break: strict;      /* 「ー」や小さい「ッ」などを行頭に置かない */
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--bordeaux); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: var(--title-weight); }
th { font-weight: inherit; }

.container { max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.center { text-align: center; }
.center .measure { margin-inline: auto; }

/* ---------- 文字の役割(ここに書いたセット以外は使わない) ---------- */
/* FV */
.fv__title {
  font-family: var(--font-head);
  font-size: var(--fv-size);
  font-weight: var(--fv-weight);
  line-height: var(--fv-lh);
}
/* KEY */
.t-key {
  font-family: var(--font-head);
  font-size: var(--key-size);
  font-weight: var(--key-weight);
  line-height: var(--key-lh);
}
/* TITLE */
.t-title, .s5-closing, .profile__name {
  font-family: var(--font-head);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-lh);
}
/* SUB */
.t-strong, .list-b li, .s6__message, .s8-emph,
.lectures__title, .common__title, .plan__name,
.closing__brand, .course-notes__title {
  font-family: var(--font-head);
  font-size: var(--sub-size);
  font-weight: var(--sub-weight);
  line-height: var(--sub-lh);
}
/* FAQの質問は、答えと大きさ・書体をそろえる(9/23)。太さだけ少し強くする */
.faq__q {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--ui-weight);
  line-height: var(--body-lh);
}
/* BODY(書体が本文用でないものは、書体だけ個別の指定を残す) */
.t-sub, .list-a li, .list-a--small li, .compare__item, .compare__item--ng,
.fv__body, .lectures li, .voice__body, .plan__detail,
.course-fit, .course-notes p:not(.course-notes__title),
.profile__role, .profile__bio, .faq__a, .closing__lead {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
}
/* NOTE */
.t-note, .t-label, .site-nav a, .voice__career, .voice__illust,
.plan__tax, .course-sub-note, .profile__en, .story__placeholder,
.site-footer {
  font-size: var(--note-size);
  font-weight: var(--note-weight);
  line-height: var(--note-lh);
}
/* PRICE */
.plan__price {
  font-family: var(--font-head);
  font-size: var(--price-size);
  font-weight: var(--price-weight);
  line-height: var(--price-lh);
}
/* ラベル・名前・ボタンなどUI要素は、役割のサイズのまま太さだけ500 */
.t-label, .site-nav a, .profile__en,
.voice__name, .compare__mark, .lectures li::before, .faq__a::before { font-weight: var(--ui-weight); }

/* 見出し系の字間 */
.fv__title, .t-key, .t-title, .s5-closing { letter-spacing: 0.04em; }
/* 見出しの句読点まわりのアキを詰める(9/23)
   Google Fontsの日本語書体には文字づめ(palt)のデータがないため、
   対応ブラウザではtext-spacing-trimで、それ以外は下の .kt で個別に詰める */
.fv__title, .t-key, .t-title, .s5-closing, .s6__message, .t-strong {
  font-feature-settings: "palt" 1;
  text-spacing-trim: trim-both;
}
/* 文中の「、」を詰めるための印(見出しで使う) */
.kt { margin-inline: -0.18em -0.42em; }

/* グリッド(横並びレイアウト)の中身が、画面の幅より広がってしまうのを防ぐ */
.acc__head > *, .list-a > *, .list-b > *, .compare > *, .compare__item > *,
.s6 > *, .lectures ol > *, .lectures li > *, .lectures__foot > *,
.voices-compact > *, .voice-main > *, .plans > *, .course-notes > *,
.inline-notes > *, .profile > *, .story__row > *, .faq__q > *, .faq__a > *,
.fv__grid > * { min-width: 0; }

/* ---------- 改行 ----------
   折り返しはブラウザにまかせる(日本語は文字単位、英単語は単語単位)。
   単語の途中で切れてもよい、という方針(2026-09-16 松尾さん判断) */
/* 本文：自然に折り返し、最後の1〜2文字だけが次の行に落ちるのを防ぐ(対応ブラウザのみ) */
/* PC用の改行：スマホでは無効にする(1行目だけ短くなるのを防ぐ) */
@media (max-width: 767px) { br.br-pc { display: none; } }

/* 折り返しはブラウザ標準のまま。行の長さを揃える指定(balance/pretty)は、
   見出しと本文で右端がそろわなくなるため使わない(2026-09-16) */

/* ---------- 文字の役割ごとの色・余白 ---------- */
.t-title { margin-bottom: 24px; }
@media (min-width: 768px) { .t-title { margin-bottom: 32px; } }
.t-title--brand { color: var(--bordeaux); }
.t-key--brand { color: var(--bordeaux); }

/* 見出しの上の小さなラベル(9/23 丸いふちのピル型に) */
.t-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border: 1px solid var(--greige);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  font-family: var(--font-head);
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin-bottom: 16px;
}
.t-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }

.t-sub { color: var(--charcoal-soft); }
.t-note { color: var(--charcoal-soft); }

/* キーメッセージの下のコーラルの短い線 */
.underline::after { content: ""; display: block; width: 40px; height: 3px; background: var(--coral); margin-top: 20px; }
.center .underline::after, .underline.center::after { margin-inline: auto; }

/* ---------- セクション ---------- */
section { scroll-margin-top: var(--header-h); }
.sec { padding-block: var(--pad-read); }
.sec--show { padding-block: var(--pad-show); }
/* グレージュと生成りを半分ずつ混ぜた、うすい面(9/17 グレージュそのままでは濃いため) */
.sec--greige { background: #EEE8E1; }
.sec--bordeaux { background: var(--bordeaux); color: var(--on-dark); }
.sec--charcoal { background: var(--charcoal); color: var(--on-dark-soft); }
.sec--bordeaux .t-title, .sec--bordeaux .t-key,
.sec--charcoal .t-title, .sec--charcoal .t-key { color: var(--on-dark); }
.sec + .sec:not([class*="sec--"]) { border-top: 1px solid var(--greige); }
/* 背景色の面の直後は、線を引かない(面の切り替わりで区切る) */
.sec--greige + .sec:not([class*="sec--"]) { border-top: 0; }

/* ---------- ボタン ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  min-height: 60px;
  padding: 16px 28px;
  background: var(--bordeaux);
  color: var(--on-dark);
  font-family: var(--font-head);
  font-size: var(--body-size);
  font-weight: var(--ui-weight);
  line-height: var(--body-lh);
  letter-spacing: 0.08em;
  text-decoration: none;
  gap: 14px;
  border-radius: 999px;
  box-shadow: 0 22px 50px -30px rgba(107, 23, 64, 0.9);
  transition: background 0.4s cubic-bezier(0.32, 0.72, 0, 1), transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.btn:hover { background: var(--bordeaux-deep); }
.btn:active { transform: scale(0.98); }
/* ボタンの中の矢印は、小さな丸の中に入れる(9/23) */
.btn__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 13px;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.btn:hover .btn__arrow { transform: translate(2px, -2px) scale(1.06); }
.btn--light .btn__arrow { background: rgba(142, 31, 82, 0.1); }
.btn--sub .btn__arrow { width: 24px; height: 24px; background: rgba(142, 31, 82, 0.1); font-size: 11px; }
.btn--sub:hover .btn__arrow { background: rgba(255, 255, 255, 0.18); }
.btn--light { background: var(--on-dark); color: var(--bordeaux); }
.btn--light:hover { background: var(--base); }
.btn--sub {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  padding: 8px 10px 8px 20px;
  border-radius: 999px;
  background: transparent;
  color: var(--bordeaux);
  border: 1px solid var(--bordeaux);
  font-size: var(--note-size);
  line-height: var(--note-lh);
}
.btn--sub:hover { background: var(--bordeaux); color: var(--on-dark); }
.btn-row { margin-top: 40px; }
.center .btn { margin-inline: auto; }

/* ---------- アコーディオン(FAQ・全9講義・受講概要で共通) ----------
   罫線＋文字＋「＋／−」だけ。白カードにしない */
:root { interpolate-size: allow-keywords; }
.acc { border-top: 1px solid var(--greige); border-bottom: 1px solid var(--greige); }
.acc + .acc { border-top: 0; }
.acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.acc__head { display: grid; gap: 2px; }
.acc__label { font-family: var(--font-head); font-size: var(--sub-size); font-weight: var(--sub-weight); line-height: var(--sub-lh); }
.acc__hint {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: var(--note-size);
  font-weight: var(--ui-weight);
  line-height: var(--note-lh);
  color: var(--bordeaux);
  white-space: nowrap;
}
/* ＋／− のアイコン(線2本。開いたら縦線を消して−にする) */
.acc__icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--bordeaux);
  transform: translate(-50%, -50%);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open]:not(.is-closing) .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.acc__body { overflow: hidden; }
.acc__inner { padding-bottom: 24px; }
/* CSSだけで滑らかに開閉できるブラウザ用 */
.acc::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.28s ease, content-visibility 0.28s ease allow-discrete;
}
.acc[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .acc::details-content, .acc__icon::before, .acc__icon::after { transition: none; }
}

/* ---------- 箇条書き(3パターン) ---------- */
/* A：読みやすいリスト */
.list-a { display: grid; gap: 12px; }
.list-a li { position: relative; padding-left: 20px; }
.list-a li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; background: var(--bordeaux); }

/* B：短いキーワードを大きく見せる一覧 */
.list-b { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--greige); }
.list-b li {
  padding: 14px 0;
  border-bottom: 1px solid var(--greige);
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  .list-b--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .list-b--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .list-b--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
}

/* C：比較 */
.compare { display: grid; gap: 12px; margin-block: 32px; }
.compare__item { display: grid; grid-template-columns: 28px 1fr; padding: 20px 20px 20px 16px; }
.compare__item--ng { color: var(--charcoal-soft); background: transparent; border: 1px solid var(--greige); }
.compare__item--ok { background: var(--greige); font-family: var(--font-head); }
.compare__mark { font-family: var(--font-head); }
.compare__item--ok .compare__mark { color: var(--bordeaux); }
@media (min-width: 768px) {
  .compare { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
}

/* ---------- 写真 ---------- */
/* STORY：後ろに色の板を1枚だけ重ねる */
.story-photo { position: relative; z-index: 0; margin-right: 12px; }
.story-photo::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; background: var(--greige); z-index: -1; }
.story-photo img { width: 100%; object-fit: cover; }
/* グレージュの面の上では、板が背景に溶けないよう一段濃いベージュにする(9/23 白は浮きすぎたため変更) */
.sec--greige .story-photo::before { background: #DACDC0; }
@media (min-width: 768px) {
  .story-photo { margin-right: 20px; }
  .story-photo::before { inset: 20px -20px -20px 20px; }
}
/* BREAK：画面幅いっぱい。文字は重ねない */
.break { width: 100%; overflow: hidden; background: var(--greige); }
.break img { width: 100%; height: 100%; object-fit: cover; }

/* 写真ごとの枠と切り抜き位置(高画質版に差し替えたら、ここで位置だけ調整) */
.photo-session { height: 320px; }
.photo-session img { object-position: 50% 35%; }
.photo-laptop img { aspect-ratio: 4 / 3; object-position: 60% 30%; }
.photo-sitting img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
/* S7の小さな写真：2人が写っているので、PCでも横長のまま */
.photo-session-sm img { aspect-ratio: 4 / 3; object-position: 50% 35%; }
@media (min-width: 768px) {
  .photo-session { height: 480px; }
  .photo-laptop img { aspect-ratio: 4 / 5; object-position: 60% 25%; }
}

/* ---------- ヘッダー ---------- */
/* 浮かぶカプセル型のメニュー(9/23)。スマホはハンバーガーのまま */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 8px 10px 8px 18px;
  border: 1px solid var(--greige);
  border-radius: 999px;
  background: rgba(247, 243, 238, 0.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px -28px rgba(43, 38, 39, 0.75);
}
@media (min-width: 768px) {
  .site-header { padding-top: 18px; }
  .site-header__inner { padding: 8px 10px 8px 24px; }
}
.brand { display: flex; align-items: center; gap: 22px; text-decoration: none; }  /* ロゴの保護エリア(1/3A)の外に「PRO」を置く */
.brand img { height: 34px; width: auto; }  /* ロゴガイドラインの最小サイズ(横組 幅119px以上)を満たす高さ */
/* 「PRO」：13/14pxでは弱すぎるため、文字の役割の例外として15/17px・700(2026-09-15 松尾さん了承) */
.brand__pro {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bordeaux);
}
.brand__pro::before { content: ""; width: 1px; height: 20px; background: var(--bordeaux); opacity: 0.5; }
@media (min-width: 768px) { .brand img { height: 38px; } .brand__pro { font-size: 17px; } }

.site-nav ul { display: flex; align-items: center; gap: 28px; }
.site-nav a { color: var(--charcoal); text-decoration: none; letter-spacing: 0.06em; white-space: nowrap; }
.site-nav a:hover { color: var(--bordeaux); }
.site-nav .site-nav__cta { display: inline-block; padding: 11px 22px; background: var(--bordeaux); color: var(--on-dark); border-radius: 999px; font-family: var(--font-head); }
.site-nav .site-nav__cta:hover { background: var(--bordeaux-deep); color: var(--on-dark); }

.nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 11px; width: 22px; height: 2px; background: var(--charcoal); transition: transform 0.2s, top 0.2s;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after { left: 0; top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: var(--gutter);
    right: var(--gutter);
    border: 1px solid var(--greige);
    border-radius: 20px;
    background: rgba(247, 243, 238, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 50px -30px rgba(43, 38, 39, 0.8);
  }
  .nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 22px 22px; }
  /* 展開したメニューの項目はBODY */
  .site-nav li a { display: block; padding: 14px 0; font-size: var(--body-size); line-height: var(--body-lh); border-bottom: 1px solid var(--greige); }
  .site-nav li:last-child a { border-bottom: 0; }
  .site-nav .site-nav__cta { margin-top: 16px; text-align: center; padding: 16px; }
}

/* ---------- S1 FV(エンブレムが主役・写真なし) ---------- */
/* ---------- FV：大きな見出し＋紋章の透かし ---------- */
.fv { position: relative; overflow: hidden; padding-block: 44px 64px; text-align: left; }
/* 背景の線のあしらい(細い線2色＋コーラルの点。2026-09-17 紋章の透かしから差し替え) */
.fv__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fv__line { stroke-width: 1.2px; }
.fv__line--main { stroke: var(--bordeaux); opacity: 0.75; }
.fv__line--faint { stroke: var(--bordeaux); opacity: 0.18; }
.fv__line--pink { stroke: var(--coral); opacity: 0.45; }
.fv__dot { fill: var(--coral); opacity: 0.5; }
.fv .container { position: relative; }
.fv__emblem { width: 96px; margin: 0 0 30px; }
/* 上段は左ぞろえ、下段(見出し)は右ぞろえの非対称 */
.fv__kicker {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: 19px;
  letter-spacing: 0.1em;
  color: var(--charcoal-soft);
}
.fv__title {
  margin: 0 0 32px;
  text-align: left;
  font-size: 58px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--bordeaux);
}
.fv__body { letter-spacing: 0; color: var(--charcoal-soft); max-width: 300px; }
/* 6か月後の変化を表す中心メッセージ(2026-09-17 説明2段落から差し替え) */
.fv__message {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--charcoal);
}
@media (min-width: 768px) { .fv__message { font-size: 26px; } }
.fv .btn-row { margin-top: 34px; }
.fv .btn { margin-inline: 0; }
@media (max-width: 359px) {
  .fv__title { font-size: 46px; }
  .fv__kicker { font-size: 17px; }
}
@media (min-width: 768px) {
  .fv { padding-block: 80px 104px; }
  .fv__emblem { width: 120px; margin-bottom: 36px; }
  .fv__kicker { font-size: 24px; }
  .fv__title { font-size: 96px; margin-bottom: 44px; }
  .fv__body { max-width: var(--measure); font-size: var(--body-size); }
  /* PC：線は右側だけに置く(PCの見た目は後日確認) */
  .fv__lines { left: auto; width: 55%; }
}
@media (min-width: 1200px) {
  .fv__title { font-size: 120px; }
}

/* ---------- S2 締め(BREAK写真＋キーメッセージ) ---------- */
.s2-key { padding-block: 56px 72px; }
/* 人物以外の写真は区切りの帯にせず、背景にうっすら写す(写真の上に生成りを重ねる。濃さは opacity で調整) */
.s2-key--photo { position: relative; overflow: hidden; isolation: isolate; }
.s2-key__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.s2-key--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--base); opacity: 0.86; }
@media (min-width: 768px) { .s2-key { padding-block: 88px 120px; } }

/* ---------- S3 ---------- */
.questions-label { margin-top: 40px; }
.s3-closing { margin-top: 28px; }

/* ---------- S4 ---------- */
.s4-words { margin-bottom: 32px; }

/* S3・S6の項目：手描き風の円(線は2重・うすい塗り)
   置ける幅に合わせて自動で折り返す。円の大きさは全部そろう */
.circles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  justify-items: center;
  gap: 12px;
  margin-block: 28px;
}
.circles li {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-content: center;
  padding: 14%;
  text-align: center;
  background: rgba(142, 31, 82, 0.055);
  box-shadow: inset 0 0 0 1px rgba(142, 31, 82, 0.3);
  color: var(--bordeaux-deep);
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: var(--body-size);
  line-height: 1.7;
  letter-spacing: 0.04em;
  /* 正円にせず、1つずつ違う形にゆがませる(手で描いたような質感) */
  border-radius: 46% 54% 57% 43% / 54% 46% 54% 46%;
}
.circles li:nth-child(2) { border-radius: 56% 44% 45% 55% / 43% 57% 43% 57%; }
.circles li:nth-child(3) { border-radius: 43% 57% 54% 46% / 57% 44% 56% 43%; }
.circles li:nth-child(4) { border-radius: 55% 45% 43% 57% / 45% 55% 45% 55%; }
.circles li:nth-child(2)::after { border-radius: 44% 56% 55% 45% / 56% 43% 57% 44%; }
.circles li:nth-child(3)::after { border-radius: 55% 45% 46% 54% / 44% 56% 44% 56%; }
.circles li:nth-child(4)::after { border-radius: 47% 53% 56% 44% / 55% 45% 55% 45%; }
/* 2本目の線(内側)。1本目とはゆがみ方を変える */
.circles li::after {
  content: "";
  position: absolute;
  inset: 8%;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(142, 31, 82, 0.3);
  border-radius: 52% 48% 45% 55% / 47% 55% 45% 53%;
}
@media (min-width: 768px) {
  .circles { gap: 20px; margin-block: 40px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* S6の項目：チェック印つきのリスト(1つおきにうすい帯) */
.check-list { margin-block: 28px; }
.check-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: var(--body-size);
  letter-spacing: 0.03em;
}
.check-list li:nth-child(odd) { background: rgba(142, 31, 82, 0.045); }
.check-list li::before {
  content: "✓";
  color: var(--bordeaux);
  font-size: 13px;
  text-align: center;
}
@media (min-width: 768px) {
  .check-list { margin-block: 36px; }
  .check-list li { padding: 14px 18px; }
}

/* S4の条件：タグ(ピル型)で並べる。文字数が違っても崩れない */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags li {
  border: 1px solid var(--bordeaux);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--bordeaux);
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: var(--body-size);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tags li:nth-child(2n) { background: rgba(142, 31, 82, 0.06); }
@media (min-width: 768px) {
  .tags { gap: 12px; }
  .tags li { padding: 12px 24px; }
}

/* S4の締め：働き方の変化の図解(バーガンディ面・白のみ)。スマホは縦、PCは横 */
.change { display: flex; flex-direction: column; align-items: center; }
.change__from {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--sub-size);
  font-weight: var(--sub-weight);
  line-height: var(--sub-lh);
  letter-spacing: 0.04em;
  color: var(--on-dark-soft);
}
.change__to {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--key-size);
  font-weight: var(--key-weight);
  line-height: var(--key-lh);
  letter-spacing: 0.04em;
  color: var(--on-dark);
}
.change__from, .change__to { word-break: keep-all; white-space: nowrap; }
/* 矢印：片羽の細い矢印(白の1px線＋先端に片側だけの短い羽)。スマホは下向き */
.change__arrow { position: relative; display: block; width: 1px; height: 72px; margin-block: 20px; background: var(--on-dark); }
.change__arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 14px;
  background: var(--on-dark);
  transform-origin: 50% 100%;
  transform: rotate(35deg);
}
@media (min-width: 768px) {
  .change { flex-direction: row; justify-content: center; gap: 32px; }
  /* 矢印：片羽の細い矢印・右向き(羽は左上へ) */
  .change__arrow { width: 80px; height: 1px; margin-block: 0; }
  .change__arrow::after { left: auto; right: 0; bottom: auto; top: 0; width: 14px; height: 1px; transform-origin: 100% 50%; transform: rotate(35deg); }
}

/* ---------- S5 ---------- */
.s5-closing { margin-top: 36px; color: var(--bordeaux); }
/* タブレット・PCでは本文の幅(640px)に縛らず、1行ずつ折り返さずに見せる(右の余白が十分あるため。9/23) */
@media (min-width: 768px) { .s5-closing { width: max-content; white-space: nowrap; } }

/* ---------- S6 ---------- */
.s6 { display: grid; gap: 48px; }
.s6 .list-b { margin-block: 28px; }
.s6__message { color: var(--bordeaux); }
@media (min-width: 1024px) {
  /* PCは写真を小さめ(9/23 半分ほどに)。文字の左に、上ぞろえで寄り添わせる */
  .s6 { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
  .s6 .story-photo { margin-top: 8px; }
}

/* ---------- S7 ---------- */
/* マーカー：文字の下側にうすい帯を敷く(蛍光ペンのような下線) */
.marker {
  background: linear-gradient(transparent 62%, rgba(224, 122, 95, 0.4) 62%);
  padding-inline: 2px;
}

.s7-key {
  margin-block: 40px;
  padding-left: 20px;
  border-left: 3px solid var(--bordeaux);
  /* マーカーを引いた一文を1行に保つため、細い画面では自動で少し小さくする
     (KEYの26pxを上限に、画面幅に収まるサイズまで下げる) */
  font-size: min(var(--key-size), calc((100vw - 71px) / 12.4));
}
@media (min-width: 768px) { .s7-key { margin-block: 56px; padding-left: 32px; } }

/* 相談の例：少し字下げして左に細い線。会話の例だと分かるように(9/23) */
.s7-example { margin-left: 0.5em; padding-left: 1em; border-left: 2px solid rgba(142, 31, 82, 0.3); }
/* まとまりの中は段落の空きをなくし、まとまりの間だけ空ける(9/23) */
.s7-group { margin-bottom: 1.2em; }
.s7-group:last-child { margin-bottom: 0; }
.s7-group p { margin-bottom: 0; }
/* 相談の例2つは、線がつながって1つに見えないよう少しだけ離す */
.s7-group .s7-example + .s7-example { margin-top: 8px; }

/* ---------- S8 AI ---------- */
.s8-emph { margin-top: 40px; color: var(--on-dark); }
.s8-emph::before { content: ""; display: block; width: 40px; height: 3px; background: var(--coral); margin-bottom: 20px; }

/* ---------- S9 ---------- */
.lectures { margin-top: 56px; }
.lectures__title, .lectures__note { display: block; }
.lectures ol { counter-reset: lec; display: grid; gap: 12px; padding-top: 4px; }
.lectures li { counter-increment: lec; display: grid; grid-template-columns: 28px 1fr; }
.lectures li::before { content: counter(lec); font-family: var(--font-head); color: var(--bordeaux); }
.lectures__foot { margin-top: 32px; display: grid; gap: 16px; justify-items: start; }
@media (min-width: 768px) {
  .lectures ol { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; }
}

/* ---------- S10 卒業生の声 ---------- */
.voices { margin-top: 40px; }
.voice-main { position: relative; }
.voice-main + .voice-main { margin-top: 56px; }
/* 卒業生の声：誌面レイアウト
   イラスト(縦長)＋抜粋の引用を横組み、左上に手書き風の名前。下に全文 */
.voice__head {
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  margin-bottom: 20px;
}
.voice__illust { grid-column: 1; grid-row: 1 / span 2; }
.voice__illust {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  background: #fff;
}
.voice__illust img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
/* 抜粋の引用(囲みなし)と名前は、同じ書体・大きさ・色 */
.voice__quote, .voice__name {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--bordeaux-deep);
}
.voice__quote { grid-row: 1; }
/* 名前：引用と同じ見た目で、右寄せ */
.voice__name { grid-row: 2; text-align: right; }
/* 全文は1字下げ(誌面の組み方) */
.voice__body p { margin-bottom: 0.9em; text-indent: 1em; }
.voice__body p:last-child { margin-bottom: 0; }
/* 1人分ずつ、白い紙に貼ったカード(上端にマスキングテープ) */
.voices article {
  position: relative;
  background: #fff;
  padding: 28px 16px 22px;
  box-shadow: 0 1px 0 rgba(43, 38, 39, 0.06), 0 6px 18px rgba(43, 38, 39, 0.05);
}
.voices article:nth-child(odd) { transform: rotate(-0.6deg); }
.voices article:nth-child(even) { transform: rotate(0.5deg); }
.voices article::before, .voices article::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 62px;
  height: 20px;
  background: rgba(142, 31, 82, 0.10);
  border-left: 1px dashed rgba(142, 31, 82, 0.18);
  border-right: 1px dashed rgba(142, 31, 82, 0.18);
}
.voices article::before { left: 14px; transform: rotate(-4deg); }
.voices article::after { right: 14px; transform: rotate(3deg); }
.voice-main + .voice-main { margin-top: 40px; }

/* サブ2人：写真なし・カードの小ささで「サブ」に見せる。紙とテープの色は上3人と同じ(9/23) */
.voices-compact { display: grid; gap: 28px; margin-top: 40px; }
.voices-compact article {
  box-shadow: 0 1px 0 rgba(43, 38, 39, 0.05), 0 6px 16px rgba(43, 38, 39, 0.05);
}
/* サブは写真を使わず、引用と名前だけ(9/23) */
.voices-compact .voice__illust { display: none; }
.voices-compact .voice__head { grid-template-columns: 1fr; margin-bottom: 16px; }
.voices-compact .voice__quote, .voices-compact .voice__name { grid-column: 1; }
.voices-compact .voice__quote, .voices-compact .voice__name { font-size: 15px; }

@media (min-width: 768px) {
  /* PCも同じカードの形のまま、上段3人・下段2人に並べる */
  .voices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }
  .voice-main + .voice-main { margin-top: 0; }
  .voices article { padding: 30px 22px 26px; }
  /* カードが細いので、本文は少し小さく行間も詰める(9/23) */
  .voices .voice__body p { font-size: 14px; line-height: 1.95; }
  .voice-main .voice__quote, .voice-main .voice__name { font-size: 18px; }
  /* 下段2人は、上段と同じ幅で中央に */
  .voices-compact {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    max-width: calc((100% - 64px) / 3 * 2 + 32px);
    margin: 0 auto;
    padding: 0;
  }
  /* 下段2人は「サブ」として、ひとまわり小さく・静かに(9/23) */
  .voices-compact { margin-top: 4px; }
  .voices-compact article { padding: 24px 18px 20px; }
  .voices-compact .voice__head { grid-template-columns: 1fr; margin-bottom: 16px; }
  .voices-compact .voice__quote, .voices-compact .voice__name { font-size: 15px; }
  .voices-compact .voice__body p { font-size: 13px; line-height: 1.9; }
  .voice-main .voice__body { max-width: none; }
}

/* タブレット幅(768〜1023px)は、カードが細いので写真を引用の上に置く */
@media (min-width: 768px) and (max-width: 1023px) {
  .voice__head, .voices-compact .voice__head { grid-template-columns: 1fr; row-gap: 10px; }
  .voice__illust { width: 92px; grid-row: auto; }
  .voice__quote, .voice__name { grid-column: 1; }
}

/* 細い画面(〜359px)は、写真の下に引用を置いて読みやすさを優先 */
@media (max-width: 359px) {
  .voice__head, .voices-compact .voice__head { grid-template-columns: 1fr; row-gap: 12px; }
  .voice__illust { width: 92px; grid-row: auto; }
  .voice__quote, .voice__name { grid-column: 1; }
}

/* ---------- S11 料金(主役) ---------- */
.common { margin-bottom: 48px; }
.common__title { margin-bottom: 12px; }
.common__title--second { margin-top: 24px; }

.plans-band { background: var(--bordeaux-deep); color: var(--on-dark); padding-block: 48px; }
@media (min-width: 768px) { .plans-band { padding-block: 80px; } }
/* 2コース：うすい面のカードで区切る(線は使わない)。PCは横並び */
.plans { max-width: 880px; margin: 0 auto; display: grid; gap: 16px; font-variant-numeric: tabular-nums; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  padding: 34px 28px 32px;
}
/* 二重のふち(外の枠の内側に、もう1本細い枠。9/23) */
.plan::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  pointer-events: none;
}
/* 内容はピル型のタグで */
.plan__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.plan__tag {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 5px 13px;
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: var(--note-size);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--on-dark);
}
.plan__name { color: var(--on-dark); letter-spacing: 0.04em; margin-bottom: 6px; }
/* コースの段階を示す1行と、対象者の1行(9/23) */
.plan__target { margin: 0 0 18px; color: var(--on-dark-soft); font-size: var(--note-size); line-height: 1.8; }
/* 誰向けのコースかを示す1行 */
.plan__for {
  margin: 0 0 6px;
  color: var(--on-dark-soft);
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: var(--body-size);
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.plan__price { margin-top: auto; padding-top: 20px; margin-bottom: 0; color: var(--on-dark); letter-spacing: 0.04em; white-space: nowrap; }
/* 動画コースの説明文(9/23)。6ヶ月伴走コースの対象者の1行と同じ大きさ・色 */
.plan__desc { margin: 0 0 18px; color: var(--on-dark-soft); font-size: var(--note-size); line-height: 1.8; }
.plan__desc p { margin: 0; }
/* 対象者の1文と講義の説明の間を半行ほど空ける */
.plan__desc p + p { margin-top: 10px; }
/* 動画講義の内容へのリンク：タブと区別するため、下線だけのシンプルな文字リンク。
   金額はカードの一番下に置くので、リンクは金額の上(2コースで金額の高さがそろう) */
.plan__link { margin: -8px 0 0; font-size: var(--note-size); line-height: var(--note-lh); }
.plan__link a { color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 0.3em; letter-spacing: 0.04em; }
.plan__link a:hover { text-decoration-color: var(--on-dark); }
.plan__tax { margin-left: 6px; font-family: var(--font-body); font-size: var(--note-size); font-weight: var(--note-weight); color: var(--on-dark-soft); letter-spacing: 0; }
.nowrap { white-space: nowrap; }
/* 料金の2列表示は、価格(大きい数字)が収まる幅になってから */
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .plan { padding: 42px 36px 38px; }
}

.course-after { padding-top: 48px; }
/* 受け方の流れ(9/23 A案)：細い線の上に番号の丸を並べる。カードや矢印は使わない */
.flow { counter-reset: flow; position: relative; display: grid; gap: 24px; margin-bottom: 18px; }
.flow li { counter-increment: flow; position: relative; padding-left: 44px; }
.flow li::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--bordeaux);
  border-radius: 50%;
  background: var(--base);
  color: var(--bordeaux);
  font-family: var(--font-head);
  font-weight: var(--ui-weight);
  font-size: 12px;
  line-height: 24px;
  text-align: center;
}
/* 丸と丸をつなぐ細い線(スマホは縦) */
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: -24px;
  width: 1px;
  background: var(--greige);
}
@media (min-width: 768px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 42px; }
  /* PCは横一本の線 */
  .flow::before { content: ""; position: absolute; left: 13px; right: 13px; top: 13px; height: 1px; background: var(--greige); }
  .flow li { padding-left: 0; }
  .flow li::before { top: -42px; left: 0; }
  .flow li:not(:last-child)::after { display: none; }
}
.flow__note { margin: 0 0 32px; color: var(--charcoal-soft); }
.course-fit { margin-bottom: 40px; }
.course-notes { display: grid; gap: 32px; }
.course-notes__title { margin-bottom: 8px; }
.inline-notes { display: grid; gap: 4px; margin-top: 16px; }
.inline-notes li::before { content: "※"; margin-right: 2px; }
@media (min-width: 768px) { .course-after { padding-top: 72px; } }

/* ---------- 動画教材のみ(料金セクション下部の補足1文) ---------- */
.course-sub-note { margin: 0 0 40px; color: var(--charcoal-soft); }

/* ---------- S13・S14 ---------- */
/* (S14見出しの太さの例外は、役割の統一により廃止) */

/* ---------- S15 ともまつについて ---------- */
.profile { display: grid; gap: 48px; }
.profile__en { margin: 4px 0 0; font-family: var(--font-head); letter-spacing: 0.12em; color: var(--charcoal-soft); }
.profile__name { margin: 4px 0 4px; letter-spacing: 0.08em; }
/* 資格の行を削除したため(9/17)、肩書きと経歴の間は資格の行があったときと同じ20pxに */
.profile__role { margin-bottom: 20px; }

/* 講師の写真(9/17)：丸く切り抜き、右上に弧を描く英字、右下に肩書きと名前を重ねる */
.profile-photo { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; margin: 0 auto; }
.profile-photo__circle { position: absolute; inset: 10%; border-radius: 50%; overflow: hidden; background: var(--greige); }
.profile-photo__circle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.profile-photo__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.profile-photo__arc text { font-family: var(--font-head); font-size: 3.4px; letter-spacing: 0.3px; fill: var(--charcoal-soft); opacity: 0.7; }
.profile-photo__caption { position: absolute; right: 3%; bottom: 9%; display: grid; justify-items: start; gap: 4px; }
.profile-photo__role { font-family: var(--font-head); font-size: 13px; font-weight: var(--ui-weight); letter-spacing: 0.06em; color: var(--charcoal); }
.profile-photo__name { padding: 2px 12px; background: #fff; font-family: var(--font-head); font-size: 20px; font-weight: var(--ui-weight); letter-spacing: 0.12em; color: var(--charcoal); }
@media (min-width: 768px) {
  .profile-photo__role { font-size: 14px; }
  .profile-photo__name { font-size: 24px; }
}
@media (min-width: 1024px) {
  .profile { grid-template-columns: 420px minmax(0, 1fr); gap: 80px; align-items: center; }
}

/* ノート風の背景(9/17 A案 罫線ノート)：生成りの背景に、本文の行に合わせたうすい横線と、左に細いコーラルの縦線 */
.story {
  --note-line: calc(var(--body-size) * 2);  /* 本文1行の高さ(文字サイズ×行間2) */
  position: relative;
  margin: 48px -8px 0;
  padding: 28px 16px 32px 32px;
  background-color: var(--base);
  background-image: linear-gradient(to bottom, transparent calc(var(--note-line) - 1px), var(--greige) calc(var(--note-line) - 1px));
  background-size: 100% var(--note-line);
}
.story::before { content: ""; position: absolute; top: 0; bottom: 0; left: 18px; width: 1px; background: var(--coral); opacity: 0.45; }
/* 本文のまとまりは、自分の上端から線を引き直して、文字の行と線をそろえる */
.story__text, .story-key {
  position: relative;
  background-color: var(--base);
  background-image: linear-gradient(to bottom, transparent calc(var(--note-line) - 1px), var(--greige) calc(var(--note-line) - 1px));
  background-size: 100% var(--note-line);
}
@media (min-width: 768px) { .story { margin-top: 72px; padding: 40px 32px 48px 56px; } .story::before { left: 32px; } }
.story__title { margin-bottom: 36px; }
/* ストーリーの本文(前半・後半)は段落の間を空けない(9/17) */
.story__text p { margin-bottom: 0; }
/* 1行分あける段落(行の高さ＝文字の2倍) */
.story__text p.story__gap { margin-top: 2em; }
/* スマホ：前半 → 写真 → 後半 → 締め の順に1列(9/17 写真は「子育てをしながら〜」の前) */
.story__col--right { margin-top: 48px; }
.story-key { margin-top: 0; }

/* 娘との写真2枚組(9/17)：白いふちのプリント写真風。左は縦長で少し左に傾け、右は横長で少し右に傾けて左の写真に重ねる */
.photo-pair { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 300; margin-bottom: 40px; }
.photo-pair__card {
  position: absolute;
  padding: 6px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(43, 38, 39, 0.14);
}
.photo-pair__card--left { left: 2%; top: 30%; width: 38%; transform: rotate(-7deg); z-index: 1; }
.photo-pair__card--right { right: 2%; top: 4%; width: 62%; transform: rotate(4deg); z-index: 2; }
/* 写真が届くまでは、グレージュの面だけを表示 */
.photo-pair__img { width: 100%; background-color: var(--greige); background-size: cover; background-position: center; }
.photo-pair__card--left .photo-pair__img { aspect-ratio: 5 / 6; }
.photo-pair__card--right .photo-pair__img { aspect-ratio: 4 / 3; }

/* PC：2段組(左：見出し＋前半／右：写真＋後半＋締め)。現行Canva LPと同じ形 */
@media (min-width: 1024px) {
  .story { margin-top: 120px; margin-inline: 0; padding: 56px 56px 64px 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: start; }
  .story__col--right { margin-top: 0; }
  .story__col--right .photo-pair { margin: 0 0 56px auto; }
}
/* スマホだけで効く改行 */
@media (min-width: 768px) { br.br-sp { display: none; } }

/* ---------- FAQ ---------- */
/* コースごとの小見出し(9/23) */
.faq__group {
  margin-top: 40px;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: var(--sub-size);
  font-weight: var(--sub-weight);
  line-height: var(--sub-lh);
  letter-spacing: 0.04em;
  color: var(--bordeaux);
}
.faq__group:first-child { margin-top: 0; }
.faq__q { display: grid; grid-template-columns: 28px 1fr; }
.faq__q::before { content: "Q"; color: var(--bordeaux); }
.faq__a { display: grid; grid-template-columns: 28px 1fr; }
.faq__a::before { content: "A"; font-family: var(--font-body); font-weight: var(--ui-weight); color: var(--charcoal-soft); }

/* ---------- S16 最終CTA ---------- */
/* ---------- S16 最後のご案内(9/23 線をやめ、面の濃淡と粒子で奥行きを出す) ---------- */
.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 上から光があたったように、ボルドーを濃淡で流す */
  background-image: radial-gradient(120% 86% at 50% -6%, #A62C63 0%, var(--bordeaux) 46%, var(--bordeaux-deep) 100%);
}
/* ごく細かい粒子(紙の質感)。線は使わない */
.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 中身は、白い細枠で囲った一枚の面として見せる(二重のふちの考え方) */
.closing__inner { position: relative; }
/* 白い細枠。内側にうすい光、外側にやわらかい影を入れて、少し立体的に */
.closing__inner::before {
  content: "";
  position: absolute;
  inset: -44px 4px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 30px 60px -44px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
/* 枠の上を1回だけ走る光。枠の線の部分にだけ見えるように切り抜いている */
.closing__shine {
  position: absolute;
  inset: -44px 4px;
  border-radius: 8px;
  padding: 1px;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 300% 100%;
  background-position: 130% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.is-shine .closing__shine { animation: closing-shine 3.2s cubic-bezier(0.45, 0.05, 0.3, 1) 0.6s 1 forwards; }
@keyframes closing-shine {
  0% { opacity: 0; background-position: 140% 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: -45% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-shine .closing__shine { animation: none; }
}
/* 白抜きロゴをそのまま置く(丸い地は使わない。9/23)
   ロゴの周囲は、ガイドラインのアイソレーション(1/3A)以上あけている */
.closing__emblem-wrap { margin: 0 auto 40px; display: flex; justify-content: center; }
.closing__emblem-wrap img { width: 230px; height: auto; }
/* ブランド名は、白い細枠のピル型ラベルに */
.closing__brand {
  display: inline-block;
  margin: 0 auto 22px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: var(--note-size);
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--on-dark-soft);
}
.closing .t-key { margin-bottom: 36px; }
.closing .underline::after { background: var(--coral); }
.closing__lead { color: var(--on-dark); }
@media (min-width: 768px) {
  .closing__inner::before, .closing__shine { inset: -72px -20px; border-radius: 10px; }
  .closing__emblem-wrap { margin-bottom: 52px; }
  .closing__emblem-wrap img { width: 320px; }
}

/* ---------- フッター ---------- */
/* ---------- 下層ページ(利用規約・特定商取引法に関する表記・講義内容) 9/24 ----------
   本文は受け取った文章をそのまま載せるため、空白も含めて表示を崩さない(pre-wrap) */
.legal { padding-block: 32px var(--pad-read); }
.legal__title {
  margin: 0 0 32px;
  font-family: var(--font-head);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-lh);
  letter-spacing: 0.04em;
}
.legal__body p { margin: 0 0 0.9em; font-size: var(--body-size); line-height: 1.9; white-space: pre-wrap; }
.legal__article {
  margin: 2.4em 0 1em;
  padding-top: 1.6em;
  border-top: 1px solid var(--greige);
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--bordeaux);
}
@media (min-width: 768px) { .legal__article { font-size: 19px; } }
/* 「1　」「(1) 」の後ろの本文を、番号の下にそろえる */
.legal__body .legal__para { padding-left: 1em; text-indent: -1em; }
.legal__body .legal__item { padding-left: 2.6em; text-indent: -2.2em; }
/* 講義内容：講義ごとに見出し(番号はボルドー)＋項目の箇条書き */
.lecture { padding-block: 22px; border-top: 1px solid var(--greige); }
.lecture:last-child { border-bottom: 1px solid var(--greige); }
.lecture__title { margin: 0 0 12px; font-family: var(--font-head); font-size: 17px; line-height: 1.6; letter-spacing: 0.04em; }
.lecture__no { color: var(--bordeaux); }
.lecture__list { margin: 0; padding: 0; list-style: none; }
.lecture__list li { position: relative; padding-left: 1.1em; font-size: var(--body-size); line-height: 1.9; }
.lecture__list li::before { content: ""; position: absolute; left: 0.2em; top: 0.85em; width: 5px; height: 5px; border-radius: 50%; background: var(--bordeaux); opacity: 0.6; }
@media (min-width: 768px) { .lecture__title { font-size: 19px; } }
/* 特定商取引法に関する表記：項目名と内容の表。スマホは縦に積み、PCは左に項目名 */
.legal-table { margin: 0; border-bottom: 1px solid var(--greige); }
.legal-table__row { padding-block: 18px; border-top: 1px solid var(--greige); }
.legal-table dt { margin-bottom: 6px; font-family: var(--font-head); font-weight: 700; font-size: var(--body-size); letter-spacing: 0.04em; color: var(--bordeaux); }
.legal-table dd { margin: 0; }
.legal-table dd p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .legal-table__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding-block: 22px; }
  .legal-table dt { margin-bottom: 0; line-height: 1.9; }
}

.site-footer { background: var(--charcoal); color: var(--on-dark-soft); padding-block: 40px; }
.site-footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.site-footer a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }

/* 受講概要の最後に置く講義内容ページへのボタン(2026-09-17) */

/* ---------- スクロールで、ふわっと現れる(9/23) ----------
   JavaScriptが動かない環境でも、最初から見えるようにしている */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.32, 0.72, 0, 1), transform 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}