/* ============================================
   Roots Vocal Studio — Design System
   S8-g統合版（白ベース・限定アクセント）
   ============================================ */

/* ★2026-09-21監査対応（B-15）：一部ページ（index.html／about.html／teachers.html等）が
   このCSSとは別に、同じGoogleフォントを取得する<link>を<head>内にも重複して持っていた
   （同じフォントを2回リクエストしてしまい表示が遅くなる問題）。そのページ側の重複<link>を
   削除する代わりに、それらのページが実際に使っていた太さ（Noto Sans JPの700・900）を
   ここに追加し、フォントの読み込みをこの1か所に統一した（見た目の変化はありません）。 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+JP:wght@300;400;500;600&family=Jost:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

/* ── Variables ──
   S8-g正式値（Chief Architect裁定）：
   背景#FFFFFF／カード#FAFAF8／本文#1A1A1A／罫線#E5E3DE
   アクセント：青#2652A9（主）／赤#C32D2A（危険・エラー）／黄#E7AE46（バッジ等の装飾限定）
   --gold系の変数名は既存の全CSS・全PHPから広く参照されているため、
   変数「値」だけをS8-g正式アクセント（青）へ置き換え、変数名自体は維持する
   （画面側コードを書き換えずに済むようにするための意図的な選択）。
*/
:root {
  --bg:          #FFFFFF;
  --bg-card:     #FAFAF8;
  --bg-alt:      #F5F4F0;
  --bg-deep:     #FAFAF8;

  /* 注意：--gold という名前ですが実際の値はブランドの青です。新規CSSは --brand を使ってください（--brand は --gold の別名）。 */
  --brand:       var(--gold);
  --gold-dark:   #013e8a;  /* ボタンhover用の濃い青 */
  --gold:        #0154B9;  /* 正式アクセント＝青。変数名は既存コード互換のため維持。値はロゴ実データから抽出した正確な色（2026-09更新） */
  --gold-dim:    #1B3B7A;
  --gold-light:  rgba(38,82,169,0.06);
  --gold-border: rgba(38,82,169,0.28);

  --text:        #1A1A1A;
  --text-mid:    rgba(26,26,26,0.74);  /* 白背景でコントラスト比 約7:1 */
  --text-dim:    rgba(26,26,26,0.62);  /* 白背景でコントラスト比 約4.9:1（補助文字でも4.5以上を確保） */

  --line:        #E5E3DE;
  --line-gold:   rgba(38,82,169,0.35);

  /* S8-g追加：赤・黄アクセント（限定用途のみ。大面積塗りは禁止） */
  --accent-red:    #DA0312;  /* ロゴ実データから抽出した正確な色（2026-09更新） */
  --accent-red-light: rgba(195,45,42,0.07);
  --accent-red-border: rgba(195,45,42,0.32);
  --accent-yellow: #F6AA12;  /* ロゴ実データから抽出した正確な色（2026-09更新） */
  --accent-yellow-light: rgba(231,174,70,0.14);
  --accent-yellow-border: rgba(231,174,70,0.5);

  --font-display: 'Playfair Display', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  --font-label:   'Jost', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-ui:      'Jost', sans-serif;
  --font-body:    'Noto Sans JP', sans-serif;

  --max-w:        560px;
  --max-w-wide:   960px;
  --ease:         0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slow:    1.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* 後方互換（既存クラスが参照している旧変数名。値は新配色に統一） */
  --primary:       #2652A9;
  --primary-dark:  #1B3B7A;
  --primary-light: rgba(38,82,169,0.06);
  --accent:        #2652A9;
  --accent-light:  rgba(38,82,169,0.06);
  --white:         #FFFFFF;
  --surface:       #FAFAF8;
  --border:        rgba(38,82,169,0.22);
  --border-subtle: #E5E3DE;
  --shadow-sm:     0 2px 12px rgba(26,26,26,0.06);
  --shadow-gold:   0 8px 32px rgba(38,82,169,0.08);
  --bg-elevated:   #FAFAF8;

  /* S8-g裁定6：角丸は0〜4px程度。大きな丸角の乱用はしない */
  --radius:        3px;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     4px;
  --radius-xl:     6px;
  --radius-pill:   999px;

  /* 講師の得意分野などのチップ用：ブランド3色のごく薄い色 */
  --chip-blue-bg:   #EAF1FB;  --chip-blue-fg:   #0B3F85;  --chip-blue-bd:   #CFDDF3;
  --chip-red-bg:    #FDEDEE;  --chip-red-fg:    #9E1320;  --chip-red-bd:    #F6D0D3;
  --chip-yellow-bg: #FEF5DF;  --chip-yellow-fg: #7A5300;  --chip-yellow-bd: #F6E2B0;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-body); }

/* ── Layout ── */
.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.container  { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 0 32px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-header__logo {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.06em;  /* uppercase 解除に合わせて調整 */
}
.site-header__logo span {
  display: none; /* サブテキストは非表示 */
}
.site-header__logo-img {
  height: 44px;
  width: auto;
  min-width: 72px;
  object-fit: contain;
  display: block;
}
/* 統合版12：サブページ共通の3列ヘッダー（左＝戻る、中央＝ロゴ、右＝ナビ）。
   ロゴはどのページでも画面の中央に来る。トップページだけは従来どおり（ロゴ左・ナビ右）。 */
.site-header--grid { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: normal; column-gap: 8px; }
.site-header--grid > :first-child { justify-self: start; }
.site-header--grid > :last-child { justify-self: end; }
.site-header--grid .site-header__logo { justify-self: center; display: flex; }
/* ★2026-09-19監査対応（P-8）：ヘッダーの「← BACK」等が9.3px・タップ領域17pxと
   小さすぎたため、文字サイズと縦のパディングを広げてタップしやすくする。 */
.site-header__back {
  font-family: var(--font-ui);
  font-size: 0.8125rem; /* 統合版13：13px以上 */
  font-weight: 400;
  color: var(--text-mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--ease);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-header__back:hover { color: var(--gold); }

/* ── Hero ── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--text); /* 写真未読込時のフォールバックは本文色（濃色）にする */
  color: #FFFFFF; /* ★写真オーバーレイの上に乗る文字のため、常に白固定（他は全て var(--text) 準拠） */
  padding: 0 32px;
}
.hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  max-width: 420px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 56px;
}
.hero__title em { font-style: italic; color: var(--gold); }
.hero__sub { display: none; } /* ヒーロー説明文は非表示 */

/* ★デザイン提案対応：ロゴを主役にした新ヒーロー。
   「Find Your Voice.」という英語の見出しがスクール名と誤認されていたため、
   ロゴ画像そのものを大きく中央に配置する構成に変更する。
   既存の.hero（写真オーバーレイ・白文字前提）とは配色が逆（白背景・濃色文字）のため、
   衝突しないよう新しい修飾クラス.hero--logoとして追加する（既存.hero--photoは未使用化するが削除しない）。 */
.hero--logo {
  /* 2026-10-05：クライアント依頼。ロゴの背後にスタジオの写真をうっすら表示する。
     【スマホ】写真は拡大せず「引き」のまま、横幅いっぱいで画面の上部に置く。
     歌っている人の顔はロゴより上に収まり、ロゴに近づくほど白のフェードが濃くなって
     写真が消えていく。数字の見方：rgba の最後＝白の濃さ（1が真っ白）、px＝上からの位置。 */
  background-color: var(--bg);
  background-image:
    linear-gradient(to bottom,
      rgba(255,255,255,0.15) 0,
      rgba(255,255,255,0.18) 105px,
      rgba(255,255,255,0.72) 150px,
      rgba(255,255,255,0.93) 205px,
      rgba(255,255,255,1) 265px),
    url('../images/hero-bg.jpg');
  background-size: 100% 100%, 100% auto;
  background-position: 0 0, center top;
  background-repeat: no-repeat;
  color: var(--text);
  min-height: auto;
  padding: 118px 32px 72px; /* 実際の値は下の .hero.hero--logo で指定 */
  flex-direction: column;
}
/* 後ろの方にある .hero の余白指定に負けないよう、クラスを2つ重ねて確実に効かせる */
.hero.hero--logo {
  padding: 118px 32px 72px;
  min-height: 0;
  justify-content: flex-start;
}
.hero--logo::before { display: none; } /* 写真オーバーレイの暗幕は不要 */
.hero__tricolor {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 22px;
}
.hero__tricolor i {
  width: 7px; height: 7px; border-radius: 50%; display: block;
}
.hero__tricolor i:nth-child(1) { background: var(--gold); }        /* 青 */
.hero__tricolor i:nth-child(2) { background: var(--accent-red); }  /* 赤 */
.hero__tricolor i:nth-child(3) { background: var(--accent-yellow); } /* 黄 */
.hero__logo {
  width: 240px;
  max-width: 78vw;
  height: auto;
  display: block;
  margin: 0 auto 22px;
}
.hero__tagline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-mid);
  letter-spacing: 0.02em;
  line-height: 1.9;
  margin-bottom: 30px;
}
@media (min-width: 640px) {
  /* タブレット・PC：スマホと同じ考え方（写真は拡大せず引きのまま、顔はロゴより上、
     ロゴに向かって白が濃くなる）。写真の大きさは画面の横幅に比例するので、
     位置の数字も横幅(--u＝画面幅の1%。1920px以上の大画面では上限)に合わせている。 */
  .hero--logo {
    --u: min(1vw, 19.2px);
    background-image:
      linear-gradient(to bottom,
        rgba(255,255,255,0.15) 0,
        rgba(255,255,255,0.18) calc(var(--u) * 15),
        rgba(255,255,255,0.40) calc(var(--u) * 18),
        rgba(255,255,255,0.68) calc(var(--u) * 21),
        rgba(255,255,255,0.88) calc(var(--u) * 25),
        rgba(255,255,255,0.97) calc(var(--u) * 30),
        rgba(255,255,255,1) calc(var(--u) * 36)),
      url('../images/hero-bg-pc.jpg');
    background-size: 100% 100%, min(100%, 1920px) auto;
    background-position: 0 0, center calc(var(--u) * -8);
  }
  .hero.hero--logo { padding: calc(var(--u) * 19 - 29px) 32px 96px; justify-content: flex-start; }
  .hero__logo { width: 340px; }
  .hero__tagline { font-size: 1.05rem; }
}
/* ヒーロー内の最優先ボタンだけは塗りつぶしで強調する（白背景上での視覚的な優先順位のため） */
.hero--logo .btn--hero-solid {
  background: var(--gold);
  color: #FFFFFF;
  border: 1px solid var(--gold);
  /* 2026-10：主ボタンの文字が10.9pxで小さすぎたため0.92remへ。文字が大きくなった分、
     字間と左右余白を詰めて、PC・タブレットでのボタンの横幅はこれまでとほぼ同じに保つ。 */
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 14px 30px;
}
.hero--logo .btn--hero-solid:hover { background: var(--gold-dark); }
.hero--logo .entry-buttons .btn--outline { min-width: 0; }
/* 2026-10-05：背景写真の上でも文字が読めるよう、枠ボタンの中を白っぽくする */
.hero--logo .entry-buttons .btn--outline { background: rgba(255,255,255,0.88); }
.hero__tagline { text-shadow: 0 0 8px rgba(255,255,255,0.9); }
/* 統合版10：承認済みのヒーロー表示を変えないため、タグラインは従来の細さ・色を維持 */
.hero__tagline { font-weight: 300; color: rgba(26,26,26,0.62); }

/* ── Sections ── */
.section { padding: 140px 0; }
.section--alt { background: var(--bg-card); }
.section__head { text-align: center; margin-bottom: 80px; padding: 0 32px; }
.section__eyebrow {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
  opacity: 1;
}
.section__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.03em;
}
.section__lead {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 2.1;
  margin-top: 16px;
  letter-spacing: 0.02em;
}
.gold-rule {
  width: 32px; height: 1px;
  background: var(--gold);
  margin: 24px auto 0;
  opacity: 0.45;
}

/* ── Buttons ── */
/* ★2026-09-19監査対応（P-8）：主要ボタンの文字が10.6〜10.9pxしかなく読みにくく、
   高さも39pxとプロジェクト方針「ボタンは大きめ・文字は読みやすく」を満たしていなかった。
   文字サイズを14px相当・高さ48px以上に引き上げる。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 13px 32px;
  font-family: var(--font-ui), 'Noto Sans JP', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  cursor: pointer;
  border-radius: var(--radius-sm); /* S8-g裁定6：角丸0〜4px程度 */
  line-height: 1.3;
  white-space: nowrap;
}
.btn:active { opacity: 0.7; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ボタンの役割（2026-10 統一）
   .btn--primary / .btn--solid … 主ボタン：ブランドの青で塗りつぶし
   .btn--outline              … 副ボタン：枠のみ
   .btn--ghost                … さらに控えめな補助リンク風 */
.btn--primary,
.btn--solid {
  background: var(--gold);
  color: #FFFFFF;
  border: 1px solid var(--gold);
}
.btn--primary:hover,
.btn--solid:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #FFFFFF; }

.btn--outline {
  /* 統合版12：承認済み（統合版10）の見た目に戻す。細めの文字・薄い枠線 */
  background: transparent;
  color: var(--text-mid);
  border: 1px solid var(--line);
  font-weight: 500;
  min-height: 44px;
}
.btn--outline:hover { border-color: var(--gold-border); color: var(--text); }

.btn--ghost {
  background: transparent;
  /* ★監査対応 3-2：文字色が薄すぎて読みにくかったため、判読しやすい濃さに変更 */
  color: var(--text-mid);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--line-gold); color: var(--text-mid); }

.btn--hero {
  /* ★監査で修正：最優先CTAだが、旧設定（透明背景＋青文字＋青枠）は暗い写真の上で
     コントラスト比1.1〜1.4しかなく事実上見えなかった。写真オーバーレイの上に乗る
     最重要ボタンとして、白の塗りつぶし＋濃い文字（最高コントラスト）に固定する。
     2番手の.btn--hero-outline（白枠のみ）と明確に区別できる。 */
  background: rgba(255,255,255,0.96);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.96);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  font-weight: 500;
  min-width: 180px;
}
.btn--hero:hover { background: #FFFFFF; color: var(--gold); }

.btn--hero-outline {
  /* ★写真オーバーレイの上に乗るボタンのため、.heroと同様に白系で固定する
     （var(--text-mid)は白テーマ化に伴い暗色になったため、そのままでは写真の上で読めなくなる） */
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  min-width: 180px;
}
.btn--hero-outline:hover { border-color: #FFFFFF; color: #FFFFFF; }

.btn--accent {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-border);
}
.btn--accent:hover { background: var(--gold); color: var(--bg); }

.btn--sm { padding: 10px 24px; font-size: 0.9rem; }
.btn--icon { width: auto; }

/* ── Entry Buttons ── */
.entry-buttons {
  display: flex; flex-direction: column; gap: 14px; width: 100%;
}
@media (min-width: 480px) {
  /* ★2026-09-22対応（1回目）：3つのボタン（体験・診断・講師一覧）の合計幅が
     コンテナ幅（460px）に収まりきらない画面幅で、min-width:0のボタンが
     極端に押しつぶされ、文字だけがはみ出して重なって見える不具合があった。
     flex-wrap: wrap を追加し、収まりきらない場合は自動で次の行へ折り返す
     ようにした……つもりだったが、実際には直っていなかった。
     ★2026-09-22対応（2回目・実際の修正）：上のflex-wrap:wrapだけでは
     不十分だった。理由は、.hero--logo .entry-buttons .btn--outline に
     min-width: 0 が指定されたままで、ボタンの文字は white-space: nowrap
     （折り返さない）ため、ブラウザは「次の行へ折り返す」より先に
     「ボタン自体を文字の幅より小さく押しつぶす」ことを選んでしまい、
     結果として文字がボタンの外へあふれて隣のボタンと重なっていた。
     flex-shrink: 0 を指定し、ボタンが自分の文字の幅より縮まないようにする
     ことで、幅が足りない場合は本当に次の行へ折り返すようにした。 */
  .entry-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .entry-buttons .btn { width: auto; flex-shrink: 0; }
}

/* ── Teacher Cards ── */
.teacher-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.teacher-card:hover {
  border-color: var(--line-gold);
  transform: translateY(-6px);
}

.teacher-card__photo-wrap {
  position: relative;
  padding-top: 130%;
  background: var(--bg-alt);
  overflow: hidden;
}
.teacher-card__photo-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--ease-slow);
}
.teacher-card:hover .teacher-card__photo-wrap img {
  transform: scale(1.05);
}
.teacher-card__photo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 4rem; font-weight: 400;
  color: var(--gold-dim);
}
.teacher-card__body { padding: 28px 24px 32px; }
.teacher-card__name {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 400;
  letter-spacing: 0.04em; color: var(--text);
  margin-bottom: 10px;
}
.teacher-card__copy {
  font-size: 0.78rem; font-weight: 400;
  color: var(--text-mid); line-height: 2;
  margin-bottom: 28px;
}
.teacher-card__actions { display: flex; flex-direction: column; gap: 10px; }

.teacher-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 0 32px; }
@media (min-width: 520px) { .teacher-grid { grid-template-columns: 1fr 1fr; } }

/* ── Avatar ── */
.avatar {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 400;
  color: var(--gold); flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--line-gold);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.avatar--sm  { width: 48px;  height: 48px;  font-size: 1.1rem; }
.avatar--md  { width: 80px;  height: 80px;  font-size: 1.8rem; }
.avatar--lg  { width: 110px; height: 110px; font-size: 2.4rem; }
.avatar--xl  { width: 140px; height: 140px; font-size: 3rem; }

/* ── Tags (data only, hidden) ── */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: none; }

/* ── 講師の得意分野・対応ジャンルのチップ（2026-10）
   青・赤・黄のごく薄い色を順番に使う。文字は0.78rem以上。 */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.chip-list--center { justify-content: center; }
.chip {
  display: inline-flex; align-items: center;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 500; line-height: 1.5;
  letter-spacing: 0.02em; max-width: 100%; word-break: keep-all; overflow-wrap: anywhere;
  border: 1px solid var(--chip-blue-bd); background: var(--chip-blue-bg); color: var(--chip-blue-fg);
}
.chip--c1 { background: var(--chip-blue-bg);   color: var(--chip-blue-fg);   border-color: var(--chip-blue-bd); }
.chip--c2 { background: var(--chip-red-bg);    color: var(--chip-red-fg);    border-color: var(--chip-red-bd); }
.chip--c3 { background: var(--chip-yellow-bg); color: var(--chip-yellow-fg); border-color: var(--chip-yellow-bd); }
.chip--sm { padding: 1px 9px; }
.chip-label { font-size: 0.78rem; font-weight: 700; color: var(--text-mid); letter-spacing: 0.04em; margin: 12px 0 6px; }
.chip-label:first-child { margin-top: 0; }

/* ── Step Bar ── */
.step-bar { display: flex; align-items: center; width: 100%; padding: 40px 32px 0; max-width: var(--max-w); margin: 0 auto; }
.step-bar__item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; position: relative; }
.step-bar__item:not(:last-child)::after {
  content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 1px; background: var(--line);
  transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.step-bar__item.done::after   { background: var(--gold-border); }
.step-bar__item.active::after { background: linear-gradient(to right, var(--gold-border), var(--line)); }
.step-bar__dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 0.6rem; font-weight: 400;
  color: var(--text-dim); position: relative; z-index: 1;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.step-bar__item.active .step-bar__dot { transform: scale(1.12); background: var(--gold); border-color: var(--gold); color: var(--bg); }
.step-bar__item.done .step-bar__dot   { border-color: var(--gold-border); color: var(--gold); }
/* ★2026-09-19監査対応（P-11）：3つのステップラベル（お悩み／目的／結果を見る）が
   横一列に隙間なく並び、特に「結果を見る」が長いため隣のラベルとくっついて
   ひと続きの単語のように読めてしまっていた。折り返しを許可し、各ラベルを
   自分の列の中に収めることで、はっきり3つに分かれて見えるようにする。 */
.step-bar__label { font-family: var(--font-ui); font-size: 0.6rem; color: var(--text-dim); letter-spacing: 0.06em; white-space: normal; text-align: center; max-width: 88%; line-height: 1.4; text-transform: uppercase; }
.step-bar__item.active .step-bar__label { color: var(--gold); }

/* ── Diagnosis ── */
.diag-section { padding: 56px 32px; max-width: var(--max-w); margin: 0 auto; }
.diag-section__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; margin-bottom: 8px; letter-spacing: 0.03em; }
.diag-section__sub { font-size: 0.78rem; font-weight: 400; color: var(--text-mid); margin-bottom: 28px; line-height: 1.9; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkbox-item { position: relative; }
.checkbox-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-item label {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line); background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.78rem; font-weight: 400;
  color: var(--text-mid); transition: var(--ease);
  line-height: 1.6; min-height: 52px;
}
.checkbox-item label::before {
  content: ''; width: 14px; height: 14px;
  border: 1px solid var(--line); flex-shrink: 0;
  border-radius: 2px;
  background: transparent; transition: var(--ease);
}
.checkbox-item input:checked + label { border-color: var(--gold-border); background: var(--gold-light); color: var(--text); transform: scale(0.98); }
/* ★監査対応 3-3：キーボード操作（Tabキー）で選んでいる項目が見た目上わからなかったため、
   フォーカス時に枠を強調表示する（チェックボックス自体は非表示のため、隣のlabelに付ける） */
.checkbox-item input:focus-visible + label {
  outline: 2px solid var(--gold, #2652A9);
  outline-offset: 2px;
}
.checkbox-item input:checked + label::before {
  background: var(--gold); border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px 8px; background-repeat: no-repeat; background-position: center;
}

/* ── Forms ── */
.form-group { margin-bottom: 28px; }
.form-label {
  display: block; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px;
}
.form-label .required { color: var(--accent-red); font-size: 0.72rem; margin-left: 4px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 15px 18px;
  border: 1px solid var(--line); background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 400;
  color: var(--text); transition: border-color var(--ease); outline: none;
  -webkit-appearance: none; appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-dim); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold-border); }
.form-input[readonly] { color: var(--text-mid); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232652A9' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px;
}
.form-select option { background: var(--bg-alt); color: var(--text); }
.form-textarea { resize: vertical; min-height: 110px; }
.form-hint { font-size: 0.72rem; font-weight: 400; color: var(--text-dim); margin-top: 8px; letter-spacing: 0.04em; }

/* Radio */
.radio-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.radio-item { position: relative; }
.radio-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-item label {
  display: flex; flex-direction: column; align-items: center; padding: 20px 10px;
  border: 1px solid var(--line); background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer; text-align: center; transition: var(--ease);
}
.radio-item label .min { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--text-mid); line-height: 1; }
.radio-item label .price { font-family: var(--font-ui); font-size: 0.72rem; color: var(--text-dim); margin-top: 6px; letter-spacing: 0.08em; }
.radio-item input:checked + label { border-color: var(--gold-border); background: var(--gold-light); }
.radio-item input:checked + label .min  { color: var(--gold); }
.radio-item input:checked + label .price { color: var(--text-mid); }

/* ── Price Box ── */
.price-box { background: var(--gold-light); border: 1px solid var(--gold-border); border-radius: var(--radius-md); padding: 32px; text-align: center; }
.price-box__label { font-family: var(--font-label); font-size: 0.72rem; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; }
.price-box__amount { font-family: var(--font-display); font-size: 3rem; font-weight: 400; color: var(--gold); line-height: 1.15; margin-top: 10px; }
.price-box__amount span { font-size: 1.1rem; }

/* ── Confirm Table ── */
.confirm-table { width: 100%; border-collapse: collapse; }
.confirm-table th, .confirm-table td { padding: 16px 0; font-size: 0.82rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.confirm-table th { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 400; width: 36%; }
.confirm-table td { color: var(--text); font-weight: 400; padding-left: 16px; }
.confirm-table tr:last-child th, .confirm-table tr:last-child td { border-bottom: none; }

/* ── Calendar ── */
.calendar-placeholder { padding: 64px 32px; text-align: center; color: var(--text-dim); }
.calendar-placeholder__icon { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 20px; text-transform: uppercase; }
.calendar-placeholder__text { font-size: 0.82rem; font-weight: 400; line-height: 2; }

/* ── Teacher Detail ── */
.teacher-profile-header { background: var(--bg-card); padding: 64px 32px 56px; text-align: center; border-bottom: 1px solid var(--line); }
.teacher-profile-header__name { font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; margin: 24px 0 12px; letter-spacing: 0.04em; }
.teacher-profile-header__copy { font-size: 0.82rem; font-weight: 400; color: var(--text-mid); line-height: 2; }
.info-block { padding: 40px 32px; border-bottom: 1px solid var(--line); max-width: var(--max-w-wide); margin-left: auto; margin-right: auto; }
.info-block__title { font-family: var(--font-label); font-size: 0.72rem; font-weight: 400; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.info-block__text { font-size: 0.875rem; font-weight: 400; color: var(--text-mid); line-height: 2.1; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 14px 0; font-size: 0.82rem; border-bottom: 1px solid var(--line); text-align: left; }
.price-table th { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 400; }
.price-table td { color: var(--text); font-weight: 400; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: none; }

/* ── Result Card ── */
.result-card { background: var(--bg-card); border: 1px solid var(--line-gold); border-radius: var(--radius-md); overflow: hidden; }
.result-card__badge {
  background: var(--gold); color: var(--bg);
  text-align: center; padding: 11px;
  font-family: var(--font-label); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.result-card__inner { padding: 36px 28px; }
.result-card__reason { font-size: 0.82rem; font-weight: 400; color: var(--text-mid); line-height: 2.1; margin-bottom: 28px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-card__profile { display: flex; align-items: center; gap: 20px; margin-bottom: 6px; }
.result-card__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: 0.04em; color: var(--text); }
.result-card__kana { font-family: var(--font-ui); font-size: 0.72rem; color: var(--text-dim); margin-bottom: 4px; letter-spacing: 0.1em; }
.result-card__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

/* ── Complete ── */
.complete-hero { text-align: center; padding: 120px 32px 64px; }
.complete-hero__icon { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 40px; text-transform: uppercase; }
.complete-hero__title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; margin-bottom: 20px; letter-spacing: 0.03em; }
.complete-hero__text { font-size: 0.82rem; font-weight: 400; color: var(--text-mid); line-height: 2.2; }

/* ── Misc ── */
.divider { height: 1px; background: var(--line); margin: 32px 0; }
.alert { padding: 18px 22px; font-size: 0.82rem; font-weight: 400; margin-bottom: 24px; line-height: 1.9; letter-spacing: 0.02em; }
.alert--info  { background: var(--gold-light); color: var(--text-mid); border-left: 1px solid var(--gold-border); }
.alert--error { background: rgba(138,112,96,0.05); color: var(--text-mid); border-left: 1px solid rgba(138,112,96,0.3); }

/* ── Footer ── */
.site-footer {
  margin-top: auto;
  background: var(--bg-deep);
  color: var(--text-dim);
  padding: 72px 32px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.78rem; font-weight: 400;
  line-height: 2.2; letter-spacing: 0.06em;
  border-top: 1px solid var(--line);
}
/* フッターの規約リンク行・コピーライト（文字色は背景に対して4.5:1以上） */
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 14px; }
.site-footer__links a { color: var(--text-mid); font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.02em; text-decoration: underline; text-underline-offset: 3px; min-height: 40px; display: inline-flex; align-items: center; }
.site-footer__links a:hover { color: var(--gold); }
.site-footer__copy { margin-top: 14px; font-size: 0.75rem; color: var(--text-dim); }
.site-footer__name { font-family: var(--font-label); font-size: 0.78rem; font-weight: 500; color: var(--gold); margin-bottom: 12px; letter-spacing: 0.08em; opacity: 0.9; }

/* ── Sticky CTA ── */
.sticky-cta { position: sticky; bottom: 0; z-index: 50; padding: 18px 32px; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); border-top: 1px solid var(--line); }
/* 2026-10：固定バーの中身は本文の幅に収める（PCで横いっぱいに伸びないように） */
.sticky-cta__inner { max-width: var(--max-w); margin: 0 auto; }
.sticky-cta__inner--wide { max-width: var(--max-w-wide); }
@media (min-width: 900px) {
  .sticky-cta__inner .btn { max-width: 360px; margin: 0 auto; display: flex; }
}

/* ── Loading ── */
.loading { text-align: center; padding: 100px 32px; color: var(--text-dim); }
.loading__spinner { width: 28px; height: 28px; border: 1px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 1.2s linear infinite; margin: 0 auto 24px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Animations ── */
.fade-in { animation: fadeIn 0.8s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Select Count ── */
.select-count { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 400; color: var(--text-dim); margin-top: 12px; letter-spacing: 0.06em; }
.select-count strong { color: var(--gold); font-weight: 400; }

/* ── Utilities ── */
.text-center { text-align: center; } .text-primary { color: var(--gold); } .text-mid { color: var(--text-mid); }
.text-sm { font-size: 0.82rem; } .text-xs { font-size: 0.72rem; } .fw-bold { font-weight: 400; }
.mt-4{margin-top:4px} .mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mt-32{margin-top:32px}
.mb-8{margin-bottom:8px} .mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px}
.flex{display:flex} .flex-col{flex-direction:column} .items-center{align-items:center} .justify-between{justify-content:space-between}
.w-full{width:100%} .gap-8{gap:8px} .gap-12{gap:12px}

/* ── Responsive ── */
@media (min-width: 600px) {
  .hero__title { font-size: 5rem; }
  .container { padding: 0 40px; }
  .teacher-grid { gap: 32px; }
}

/* ============================================
   Mobile Responsive (≤768px)
   PC の高級感を維持しながらモバイルで見やすく
   ============================================ */

/* JS テンプレート用 写真クラス（インライン上書き防止） */
.js-photo-portrait {
  position: relative;
  padding-top: 130%;
  overflow: hidden;
  background: var(--bg-alt);
}
.js-photo-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.js-photo-result {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.js-photo-result img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
.js-photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 5rem; font-weight: 400;
  color: var(--gold-dim);
}

@media (max-width: 768px) {
  /* ── Layout ── */
  .container { padding: 0 20px; }

  /* ── Header ── */
  .site-header { padding: 0 20px; height: 64px; }
  .site-header__logo { font-size: 0.72rem; letter-spacing: 0.06em; }

  /* ── Hero ── */
  .hero { min-height: 78vh; padding: 0 20px; }
  .hero__title { font-size: 2.6rem; margin-bottom: 36px; }
  .hero__inner { max-width: 100%; }

  /* ── Sections ── */
  .section { padding: 80px 0; }
  .section--alt { padding: 80px 0; }
  .section__head { margin-bottom: 48px; padding: 0 20px; }
  .section__title { font-size: 1.7rem; }
  .section__lead { font-size: 0.78rem; margin-top: 12px; }
  .gold-rule { margin: 18px auto 0; }

  /* ── Teacher Cards ── */
  .teacher-card__photo-wrap { padding-top: 112%; }
  .teacher-card__body { padding: 20px 16px 22px; }
  .teacher-card__name { font-size: 1.2rem; }
  .teacher-card__copy { font-size: 0.76rem; margin-bottom: 18px; }
  .teacher-card__actions { gap: 8px; }
  .teacher-grid { padding: 0 20px; gap: 16px; }

  /* ── JS Photo Classes ── */
  .js-photo-portrait { padding-top: 110%; }
  .js-photo-result { height: 220px; }

  /* ── Buttons ── */
  /* ★2026-09-19監査対応（P-8）：スマホ幅ではさらに文字が0.66rem（10.6px）まで
     縮んでいた。スマホでも読みやすい文字サイズ・タップ領域を維持する。 */
  .btn { padding: 13px 22px; font-size: 0.95rem; min-height: 48px; }
  .btn--sm { padding: 10px 18px; font-size: 0.9rem; min-height: 44px; }

  /* ── Entry Buttons: 480px以下のみ縦並び（min-width:480pxと競合しないよう除外） ── */

  /* ── Step Bar ── */
  .step-bar { padding: 28px 20px 0; }
  .step-bar__dot { width: 24px; height: 24px; font-size: 0.72rem; }
  .step-bar__label { font-size: 0.72rem; letter-spacing: 0.03em; }

  /* ── Diagnosis ── */
  .diag-section { padding: 32px 20px; }
  .diag-section__title { font-size: 1.15rem; }
  .diag-section__sub { font-size: 0.76rem; margin-bottom: 20px; }
  .checkbox-grid { gap: 8px; }
  .checkbox-item label {
    padding: 13px 12px;
    font-size: 0.76rem;
    min-height: 50px;
    gap: 10px;
    line-height: 1.5;
  }
  .checkbox-item label::before { width: 14px; height: 14px; }

  /* ── Diag Nav ── */
  .diag-nav { padding: 20px; gap: 10px; }

  /* ── Avatar ── */
  .avatar--lg { width: 80px; height: 80px; font-size: 1.6rem; }

  /* ── Info Blocks ── */
  .info-block { padding: 28px 20px; }
  .info-block__text { font-size: 0.82rem; }

  /* ── Teacher Profile ── */
  .teacher-profile-header { padding: 40px 20px 32px; }
  .teacher-profile-header__name { font-size: 1.7rem; }
  .teacher-profile-header__copy { font-size: 0.78rem; }

  /* ── Price Table ── */
  .price-table th, .price-table td { padding: 12px 0; font-size: 0.8rem; }

  /* ── Forms ── */
  .form-group { margin-bottom: 20px; }
  .form-label { font-size: 0.72rem; margin-bottom: 10px; }
  .form-input, .form-select, .form-textarea {
    padding: 13px 14px;
    font-size: 0.875rem;
  }

  /* ── Radio (Duration) ── */
  .radio-group { gap: 8px; }
  .radio-item label { padding: 16px 8px; }
  .radio-item label .min { font-size: 1.3rem; }
  .radio-item label .price { font-size: 0.6rem; }

  /* ── Price Box ── */
  .price-box { padding: 24px 18px; }
  .price-box__amount { font-size: 2.2rem; }

  /* ── Confirm Table ── */
  .confirm-table th, .confirm-table td { padding: 12px 0; font-size: 0.78rem; }
  .confirm-table th { width: 36%; }
  .confirm-table td { padding-left: 10px; }

  /* ── Result Card ── */
  .result-card__inner { padding: 24px 20px; }
  .result-card__name { font-size: 1.3rem; }
  .result-card__kana { font-size: 0.72rem; }
  .result-card__reason { font-size: 0.78rem; padding: 18px 0; }
  .result-card__actions { gap: 10px; margin-top: 22px; }

  /* ── Complete ── */
  .complete-hero { padding: 72px 20px 40px; }
  .complete-hero__title { font-size: 1.6rem; }
  .complete-hero__text { font-size: 0.78rem; }

  /* ── Alerts ── */
  .alert { padding: 14px 16px; font-size: 0.78rem; }

  /* ── Footer ── */
  .site-footer { padding: 48px 20px; }
  .site-footer__name { font-size: 0.72rem; }

  /* ── Sticky CTA ── */
  .sticky-cta { padding: 14px 20px; }

  /* ── Calendar ── */
  .calendar-placeholder { padding: 40px 20px; }
}

/* ── 超小型端末 (≤390px) ── */
@media (max-width: 390px) {
  .hero__title { font-size: 2.2rem; }
  .checkbox-item label { font-size: 0.72rem; padding: 11px 10px; }
  .radio-item label .min { font-size: 1.1rem; }
}


/* ── About Nav Link ── */
/* ★2026-09-19監査対応（P-8）：「ABOUT」が9.3pxで小さすぎたため拡大 */
.site-header__nav {
  font-family: var(--font-label);
  font-size: 0.8125rem; /* 統合版13：13px以上 */
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color var(--ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-header__nav:hover { color: var(--gold); }

/* ── AI Voice Diagnosis Component ── */
/* voice-profile の色上書きはページ側の<style>で行う。
   ここではコンポーネントの外枠レイアウトだけ定義する。 */
voice-profile {
  display: block;
  width: 100%;
}

/* ============================================
   モーション演出（リデザイン第1段階）
   既存の --ease / --ease-slow をそのまま踏襲する。
   跳ねる・光る演出はしない（「静かな高級感」の方針を維持）。
   ============================================ */

/* ① 現れる：JSが正常に動いた場合のみ「隠す→現れる」演出を適用する。
   JSが動かない（無効化・読み込み失敗等）環境では、最初から全部表示された状態を保つ
   （<html class="js">がJSにより即座に付与される設計。付与されなければ常に表示のまま）。 */
.rv-reveal {
  opacity: 1;
  transform: none;
}
/* ★2026-09-19監査対応（P-14）：0.9秒かけて現れる演出のため、画面を開いた直後や
   素早くスクロールした直後に講師カード等が一瞬空白に見えることがあった。
   演出時間を短くする（0.35秒）。 */
.js .rv-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js .rv-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ② 応える：ボタン・カードへの反応（押す／触れる） */
.rv-press {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.rv-press:active {
  transform: scale(0.97);
}
.rv-card-hover {
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.rv-card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.18);
}

/* 講師写真：触れると僅かに拡大し、紹介文がふわっと現れる */
.rv-photo-zoom { overflow: hidden; }
.rv-photo-zoom img {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-photo-zoom:hover img {
  transform: scale(1.06);
}
.rv-reveal-caption {
  opacity: 1;
  /* ★監査#16対応：単語の途中（例：「可能／性」）で改行されてしまう問題を防ぐ */
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* ★2026-09-19監査対応（P-9）：紹介文がマウスを乗せた時だけ表示される作りだったため、
   マウスの無いスマホ・iPadでは常に空白のままだった。常時表示にする。 */

/* ④ 呼吸する：ヒーロー画像の奥行き変化用フック（動きの実体はJS側で付与） */
.rv-parallax {
  transition: background-position 0.2s linear;
}

/* ロゴの3点：ごく僅かな脈動（1点ずつ時間差） */
@keyframes rv-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.site-header__logo-img.rv-logo-live {
  animation: none; /* 画像そのものは動かさない。将来SVG化した際の拡張フック */
}

/* 動きを減らす設定のユーザーには一切のtransition/animationを与えない */
@media (prefers-reduced-motion: reduce) {
  .rv-reveal, .rv-press, .rv-card-hover, .rv-photo-zoom img,
  .rv-reveal-caption, .rv-parallax {
    transition: none !important;
    animation: none !important;
  }
}

/* ★デザイン提案対応：ロゴの3色（青・赤・黄）を全ページ最上部に共通のラインとして
   さりげなく展開する。多用しないという方針のとおり、装飾はこの1本の細いラインと、
   見出し横の小さなドット（.rv-tricolor-dots）に限定する。 */
.rv-top-line {
  height: 3px;
  background: linear-gradient(90deg,
    var(--gold) 0 33.33%,
    var(--accent-red) 33.33% 66.66%,
    var(--accent-yellow) 66.66% 100%);
}


/* ★統合版9：hidden属性のボタン／カードを確実に非表示にする（LINE URL未設定時） */
[hidden] { display: none !important; }


/* ── 空の状態（データが無い・読み込めない時の共通パーツ） ──
   使い方：<div class="empty-state"><p class="empty-state__text">メッセージ</p>
          <a class="btn btn--outline" href="...">ボタン（任意）</a></div> */
.empty-state {
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 40px 24px;
  text-align: center;
  color: var(--text-mid);
}
.empty-state__text { font-size: 0.875rem; line-height: 1.9; margin: 0; }
.empty-state .btn { width: auto; margin-top: 20px; display: inline-flex; padding: 12px 28px; }


/* ============================================
   2026-10 追加：ヒーローの入口ボタン／講師ミニカード／講師詳細（PC2カラム）
   ============================================ */

/* ヒーロー入口（統合版13）：1段目＝主ボタン＋枠ボタン（同じ高さ・PCは1行／スマホは縦に同じ幅）。
   公式LINEはボタンにせず、「在籍の講師を見る ↓」と同じ小さな文字リンクの行に並べる。 */
.hero--logo .hero__inner { max-width: 480px; }  /* 主ボタン＋枠ボタンが1行に収まる幅 */
@media (max-width: 768px) { .hero--logo .hero__inner { max-width: 100%; } }
.hero--logo .entry-buttons { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 16px; width: min(460px, 100%); max-width: 460px; margin: 0 auto; }
.hero--logo .entry-buttons .btn { width: auto; min-width: 0; flex: 0 1 auto; letter-spacing: 0.08em; font-size: 0.9rem; padding: 14px 30px; min-height: 48px; }
.hero--logo .entry-buttons .btn--hero-solid { font-size: 0.92rem; font-weight: 600; }
.hero--logo .entry-buttons .btn--outline { font-weight: 400; }
@media (max-width: 560px) and (min-width: 480px) { .hero--logo .entry-buttons .btn { padding-left: 20px; padding-right: 20px; letter-spacing: 0.05em; } }
.hero__sublinks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 28px; width: 100%; margin-top: 14px; }
.hero__sub-link { display: inline-flex; align-items: center; justify-content: center; position: relative; min-height: 44px; text-align: center; font-size: 0.82rem; letter-spacing: 0.06em; color: rgba(26,26,26,0.7); text-decoration: none; }
.hero__sub-link:hover { color: var(--gold); }
/* 2つの文字リンクの間の細い区切り（LINEが表示されている時だけ） */
.hero__sub-link:not([hidden]) + .hero__sub-link::before { content: ""; position: absolute; left: -14px; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: rgba(26,26,26,0.25); }
@media (max-width: 374px) {
  .hero__sublinks { flex-direction: column; gap: 0; }
  .hero__sub-link:not([hidden]) + .hero__sub-link::before { display: none; }
}
#teachers { scroll-margin-top: 80px; }
@media (max-width: 479px) {
  .hero--logo .entry-buttons { flex-direction: column; align-items: stretch; }
  .hero--logo .entry-buttons .btn { width: 100%; flex: none; }
}

/* 講師ミニカード（トップ）：スマホ2列／PC3列。人数が奇数でも最後の1枚は中央に置く（flex＋中央寄せ） */
.teacher-mini-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 0 20px;
  margin: 0 auto;
  max-width: var(--max-w-wide);
}
.top-teacher-card { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); overflow: hidden; background: var(--bg-card); }
@media (min-width: 640px) { .top-teacher-card { flex: 0 0 calc((100% - 32px) / 3); max-width: 296px; } }
.teacher-mini-card__body { padding: 14px 14px 18px; }
.mini-card-chips { margin-top: 10px; }

/* 講師一覧・診断結果カードのチップ位置 */
.card-chips { margin: 0 0 18px; }

/* 講師詳細（統合版12）：PCもスマホと同じ1カラム。中央に幅640pxの縦長レイアウト。
   顔写真は縦長の長方形（4:5）。PCでは幅280px。 */
.detail-layout { max-width: 640px; margin: 0 auto; }
.detail-main { max-width: 640px; margin: 0 auto; }
.detail-photo-wrap {
  width: min(72vw, 280px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 auto 20px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.detail-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.detail-photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 4rem; font-weight: 400; color: var(--gold);
}
@media (min-width: 900px) {
  .detail-layout .teacher-profile-header { padding: 40px 32px 28px; text-align: center; }
  .detail-layout .detail-photo-wrap { width: 280px; margin: 0 auto 20px; }
}
.sticky-cta__inner--detail { max-width: 640px; }
@media (min-width: 900px) { .sticky-cta__inner--detail .btn { max-width: none; } }

/* ── 法的ページ（特定商取引法・プライバシー・キャンセル） ── */
.legal-main { width: 100%; max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; flex: 1; }
.legal-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: 0.03em; margin-bottom: 16px; }
.legal-lead { font-size: 0.92rem; color: var(--text-mid); line-height: 1.95; margin-bottom: 24px; }
.legal-section { margin-bottom: 28px; }
.legal-section h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--gold); line-height: 1.5; }
.legal-section p, .legal-section li { font-size: 0.92rem; line-height: 1.95; color: var(--text); }
.legal-section ul { padding-left: 1.3em; margin-bottom: 8px; }
.legal-muted { color: var(--text-dim); }
.legal-note { margin-top: 8px; font-size: 0.85rem; }
.legal-note a, .legal-section a, .legal-table a, .legal-links a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-contact { overflow-wrap: anywhere; font-weight: 500; }
.legal-links { margin-top: 36px; font-size: 0.88rem; text-align: center; }
.legal-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.legal-table th, .legal-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; font-size: 0.9rem; line-height: 1.85; overflow-wrap: anywhere; }
.legal-table th { width: 32%; font-weight: 700; color: var(--text); background: var(--bg-card); }
@media (max-width: 600px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: 100%; }
  .legal-table th { border-bottom: none; padding: 12px 12px 4px; }
  .legal-table td { padding: 4px 12px 16px; }
}


/* ── 統合版12：ボタンの大きさをそろえる ──
   主ボタン（青の塗りつぶし）＝高さ48px以上／副ボタン（枠のみ・補助）＝高さ44px。 */
.btn--primary, .btn--solid { min-height: 48px; }
.btn--outline, .btn--ghost { min-height: 44px; font-weight: 500; }

/* 診断結果：カードの高さをそろえ、ボタンを下にそろえる */
.result-card { display: flex; flex-direction: column; }
.result-card__inner { flex: 1; display: flex; flex-direction: column; }
.result-card__actions { margin-top: auto; padding-top: 28px; }


/* ============================================
   統合版13：お客様側の見た目の整理（既存の指定を上書きする追加分）
   ============================================ */

/* ── 文字の大きさ：本文は15px以上、診断の選択肢は14px以上 ── */
body { font-size: 0.9375rem; }
.section__lead,
.diag-section__sub,
.info-block__text,
.result-card__reason,
.complete-hero__text { font-size: 0.9375rem; }
.checkbox-item label { font-size: 0.875rem; }
.step-bar__label { font-size: 0.75rem; }
.step-bar__dot { font-size: 0.75rem; }
.site-footer__copy { font-size: 0.78rem; }
.legal-section p, .legal-section li { font-size: 0.9375rem; }

/* ── 診断のチェック：20pxの青いチェック枠（体験予約の選択ボタンと同じ見た目） ── */
.checkbox-item label::before { width: 20px; height: 20px; border-radius: 4px; border-color: rgba(26,26,26,0.35); }
.checkbox-item input:checked + label::before { background-size: 12px 10px; }
@media (max-width: 768px) { .checkbox-item label::before { width: 20px; height: 20px; } }
@media (max-width: 390px) { .checkbox-item label { font-size: 0.875rem; } }

/* ── ヘッダー右側のリンクを2つ並べる（トップページ） ── */
.site-header__navs { display: flex; gap: 28px; align-items: center; }
@media (max-width: 479px) { .site-header__navs { gap: 16px; } }

/* ── フッター：「ご予約の確認はこちら」を、規約リンクの上に静かな文字リンクで ── */
.site-footer__confirm { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-family: var(--font-body); font-size: 0.875rem; letter-spacing: 0.02em; color: var(--text-mid); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__confirm:hover { color: var(--gold); }
.site-footer__links { margin-top: 4px; }

/* ── 講師の写真が無い時：薄いブランド色の背景に、ほどよい大きさの頭文字（丸） ── */
.photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #EEF3FA; }
.photo-fallback__initial { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(1,84,185,0.10); color: var(--gold); font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; line-height: 1; }
.detail-photo-placeholder { background: #EEF3FA; }
.detail-photo-placeholder .photo-fallback__initial { width: 104px; height: 104px; font-size: 2.6rem; }

/* ── トップ：講師紹介・Aboutの文字（以前はHTMLに直接書いていた指定をここへ移動） ── */
.top-teacher-card__photo { position: relative; overflow: hidden; background: var(--bg-alt, #F3F2EE); }
.top-teacher-card__body { padding: 20px 14px 22px; }
.top-teacher-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.04em; margin-bottom: 6px; color: var(--text); }
.top-teacher-card__copy { font-size: 0.875rem; font-weight: 400; color: var(--text-mid); line-height: 1.9; }
.top-teachers__empty { grid-column: 1 / -1; text-align: center; color: var(--text-mid); padding: 40px 0; width: 100%; }
.top-teachers__more { text-align: center; padding: 28px 0 0; }
.top-teachers__more .btn { display: inline-flex; width: auto; padding: 12px 28px; }
.about-teaser { padding: 100px 0; text-align: center; border-top: 1px solid var(--line); }
.about-teaser__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.about-teaser__eyebrow { font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 20px; }
.about-teaser__title { font-family: var(--font-display); font-size: clamp(1.3rem, 5.6vw, 1.8rem); font-weight: 400; letter-spacing: 0.03em; margin-bottom: 12px; }
.about-teaser__text { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; color: var(--text-mid); line-height: 2; margin-bottom: 40px; }
.about-teaser .btn { width: auto; display: inline-flex; padding: 13px 44px; margin: 0 auto; }

/* ── 講師詳細 ── */
.detail-main .info-block__title { font-size: 0.78rem; font-weight: 700; color: var(--primary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.info-block__title .en { font-weight: 400; opacity: 0.75; font-size: 0.72rem; margin-left: 4px; letter-spacing: 0.08em; }
.detail-kana { font-size: 0.8125rem; letter-spacing: 0.05em; color: var(--text-mid); }
.detail-missing { text-align: center; padding: 60px 24px; }
.detail-missing__mark { font-family: var(--font-display); font-size: 1.4rem; font-weight: 300; color: var(--text-dim); margin-bottom: 16px; }
.detail-missing__text { margin-top: 16px; color: var(--text-mid); }
.detail-missing__text a { color: var(--primary); font-weight: 700; }
.detail-note { font-size: 0.9375rem; color: var(--text-mid); line-height: 1.8; }
.detail-note + .detail-note { margin-top: 10px; }
.detail-note--small { font-size: 0.75rem; margin-top: 8px; }
.detail-note--fee { font-size: 0.8125rem; margin-top: 12px; }
.detail-main .btn--line { margin-top: 8px; }
/* PC：ページ全体を白で統一する（以前は幅640pxの灰色の箱が宙に浮いて見えた）。固定バーの分だけの余白にする */
.detail-layout .teacher-profile-header { background: var(--bg); }
.detail-content { padding-bottom: 24px; }
/* 直近の体験レッスンの空き */
.avail-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding: 0; }
.avail-slot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--text); font-size: 0.9375rem; transition: border-color var(--ease); }
.avail-slot:hover { border-color: var(--gold-border); }
.avail-slot__date { font-weight: 600; letter-spacing: 0.02em; }
.avail-slot__mode { font-size: 0.8125rem; color: var(--text-mid); }
.avail-more, .avail-actions a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.avail-empty { font-size: 0.9375rem; color: var(--text-mid); line-height: 1.8; }
.avail-actions { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
/* 講師一覧のカード：次の空きの1行 */
.teacher-next-slot { font-size: 0.875rem; color: var(--text-mid); line-height: 1.6; margin: 0 0 12px; }
.teacher-next-slot strong { font-weight: 600; color: var(--text); }

/* ── 講師一覧：人数が奇数でも最後の1枚を中央に置く（flex＋中央寄せ）。スマホ1列／タブレット2列／PC3列 ── */
.teacher-list { --cols: 1; --gap: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.teacher-list-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (min-width: 640px) { .teacher-list { --cols: 2; --gap: 28px; } }
@media (min-width: 900px) { .teacher-list { --cols: 3; --gap: 32px; } }

/* ── フッター下の白い帯をなくす：短いページでもフッターを画面の一番下に ── */
.page-wrap > main { flex: 1 0 auto; width: 100%; }
.site-footer { margin-top: auto; }

/* ── 診断：警告は選択すると消える（JS側でhidden属性を使う） ── */
.select-count--warn { color: var(--accent-red, #DA0312); }


/* ★統合版14：日本語の改行を「言葉の区切り」にそろえる（js/wrap.js が <wbr> を入れた時だけ有効）
   keep-all＝言葉の途中では折り返さない / overflow-wrap:anywhere＝長いURL・メールアドレスは枠からはみ出さず折り返す */
html.rv-wrap body { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
html.rv-wrap :is(h1, h2, h3, .section__lead, .hero__catch, .page-title, .hero__tagline) { text-wrap: balance; }
html.rv-wrap :is(p, li, dd, td, label, small, .note) { text-wrap: pretty; }
/* ★統合版14：スマホ（430px以下）では診断の選択肢を1列にして、文字が不自然に折り返さないようにする */
@media (max-width: 430px) {
  .checkbox-grid { grid-template-columns: 1fr; }
}
/* ★統合版14：英語の名前（例：Roots Vocal Studio）は途中で改行しない */
.rv-nb { white-space: nowrap; }
html.rv-wrap .rv-bal { text-wrap: balance; }
/* メールアドレスは途中で改行しない（本文中のリンク） */
a[href^="mailto:"] { white-space: nowrap; }
/* <br>で区切られた文章は、1文ずつを行ブロックに（見た目は同じで、行の長さが整う） */
html.rv-wrap .rv-line { display: block; text-wrap: balance; }

/* 統合版14-v15: 診断の選択肢・メール本文の改行調整 */
html.rv-wrap .checkbox-item label{text-wrap:balance}
/* v15: 診断の選択肢は、2行になる時に「したい」だけが残らないよう、長さをそろえる */
html.rv-wrap .checkbox-item label .rv-wrap-span{text-wrap:balance}


/* =====================================================================
   ★統合版15：デザイン刷新「案1（白ベース・スタジオ）」 2026-10-15
   白ベース・整ったカード・色で状況が分かる（青＝確定／黄＝確認待ち／赤＝キャンセル）。
   既存のCSSは消さず、このブロックを一番下に足して見た目を上書きしています。
   元に戻したい時は、このブロック（ここから「案1 ここまで」まで）を削除すれば以前の見た目に戻ります。
   ===================================================================== */
/* 共通：読みやすさの底上げ（3案共通） */
html{-webkit-font-smoothing:antialiased}
body,.admin-body,.t-body{font-size:16px;line-height:1.85;font-weight:400;color:#14161a}
.site-header__nav a,.site-header__back{font-size:.82rem}
.btn,.admin-btn,.t-btn{min-height:52px;font-size:1rem;letter-spacing:.04em}
.section__eyebrow,.t-section-label,.chip-label{font-size:.78rem}
.form-label,.admin-label,.t-label{font-size:.92rem;font-weight:600;color:#14161a}
.form-input,.form-select,.form-textarea,.admin-input,.t-input{font-size:1rem;min-height:50px}
.checkbox-item label{font-size:.95rem;min-height:56px}
.section__lead,.hero__sub,.teacher-card__copy{font-size:1rem;color:rgba(20,22,26,.78)}

/* 案1：スタジオ（端正・信頼／色で状況が分かる） */
:root{--font-display:'Noto Sans JP','Noto Sans CJK JP',sans-serif;--font-body:'Noto Sans JP','Noto Sans CJK JP',sans-serif;
--ink:#10223f;--gold:#0154B9;--bg-card:#f6f8fb;--bg-alt:#f2f5fa;--line:#dde3ec}
h1,h2,h3,.section__title,.admin-title,.t-title,.teacher-card__name,.top-teacher-card__name,.teacher-profile-header__name,.hero__tagline,.result-card__name{font-family:var(--font-display)!important;font-weight:700!important;letter-spacing:.02em;color:var(--ink)}
.section__title,.admin-title,.t-title{font-size:1.6rem;line-height:1.45}
.section__eyebrow,.t-section-label{color:#0154B9;font-weight:700;letter-spacing:.16em;font-family:'Jost','Noto Sans CJK JP',sans-serif}
.site-header,.admin-header,.t-header{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(16,34,63,.06)}
.rv-top-line{height:5px;background:linear-gradient(90deg,#0154B9 0 33.3%,#DA0312 33.3% 66.6%,#F6AA12 66.6%)}
.btn,.admin-btn,.t-btn{border-radius:12px;font-weight:700;letter-spacing:.03em}
.btn--primary,.btn--solid,.btn--hero,.admin-btn:not(.admin-btn--outline):not(.admin-btn--danger),.t-btn:not(.t-btn--ghost):not(.t-btn--danger){background:#0154B9;color:#fff;border:0;box-shadow:0 6px 16px rgba(1,84,185,.28)}
.btn--outline,.btn--hero-outline,.btn--ghost,.admin-btn--outline,.t-btn--ghost{background:#fff;color:#0154B9;border:1.5px solid #0154B9}
.teacher-card,.top-teacher-card,.result-card,.admin-card,.t-card,.admin-rcard,.admin-menucard,.price-box{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(16,34,63,.07);overflow:hidden}
.teacher-card__photo-wrap,.top-teacher-card__photo,.detail-photo-wrap{border-radius:12px}
.section--alt{background:#f2f5fa}
.price-table th{background:#eaf0fa;color:var(--ink);font-weight:700}
.site-footer{background:#10223f}.site-footer *{color:#dfe6f2}
.admin-badge,.t-badge{border-radius:999px;font-weight:700;padding:4px 12px}
.admin-badge--pending,.t-badge--pending{background:#fff3d6;color:#8a5a00;border:1px solid #f6aa12}
.admin-badge--booked,.t-badge--booked,.admin-badge--open,.t-badge--open{background:#e3eefc;color:#0154B9;border:1px solid #0154B9}
.admin-badge--cancelled,.t-badge--cancelled,.admin-badge--failed{background:#fde8ea;color:#b0020e;border:1px solid #da0312}
.admin-table th{background:#eaf0fa;color:var(--ink)}
.admin-stat-grid>*,.t-stat-grid>*{border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:0 6px 16px rgba(16,34,63,.06)}
.admin-nav-tier1 a,.t-nav-tabs a{border-radius:999px}
/* 案1: 同じ大きさのカードを整然と、背景に薄い青 */
.top-teachers{background:#f2f5fa}
.top-teacher-card{border-radius:18px!important;border:1px solid var(--line)!important;background:#fff!important;box-shadow:0 10px 26px rgba(16,34,63,.09)!important}
.top-teacher-card__photo{aspect-ratio:1/1.15}
.top-teacher-card__photo img{width:100%;height:100%;object-fit:cover}
.top-teacher-card__body{padding:16px 16px 20px!important}
.top-teacher-card__name{font-size:1.3rem!important;font-weight:700!important}

/* ── 料金欄（講師詳細）：入会金・キャンペーン・コース別の月謝・注意書き ── */
.fee-enroll { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 14px 16px; background: #f2f5fa; border: 1px solid var(--line); border-radius: 14px; }
.fee-enroll__label { font-weight: 700; color: var(--ink); }
.fee-enroll__price { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.fee-enroll__price s { color: #6b7686; font-weight: 500; font-size: 1.05rem; }
.fee-enroll__tax { font-size: .8125rem; color: var(--text-mid); }
.fee-enroll__badge { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #fde8ea; color: #b0020e; border: 1px solid #da0312; font-weight: 700; font-size: .9rem; }
.fee-campaign-note { margin: 8px 2px 0; font-size: .875rem; color: #b0020e; }
.fee-monthly-title { margin: 20px 0 8px; font-weight: 700; color: var(--ink); }
.fee-monthly-title { display: block; }
.fee-monthly-title span { display: block; font-weight: 400; font-size: .75rem; color: var(--text-mid); margin: 2px 0 0; }
.fee-course { margin: 0 0 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.fee-course__name { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.fee-course__desc { margin: 4px 0 6px; font-size: .875rem; color: var(--text-mid); line-height: 1.8; white-space: pre-line; }
.fee-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.fee-table th, .fee-table td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: .9375rem; }
.fee-table th { font-weight: 500; color: var(--text-mid); width: 40%; }
.fee-table td { font-weight: 700; color: var(--ink); text-align: right; }
.fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom: none; }
.fee-notes { list-style: none; margin: 4px 0 0; padding: 0; }
.fee-notes li { position: relative; padding-left: 1.1em; font-size: .8125rem; color: var(--text-mid); line-height: 1.8; }
.fee-notes li::before { content: "※"; position: absolute; left: 0; }

/* ★統合版15 案1 ここまで */