@charset "UTF-8";
/* ==========================================================================
   readability.css 第2稿 — 版12への「読みやすさ・情報密度」改修（最後に読み込む）
   - 文字サイズは各要素・各画面幅で元より小さくしない（DOM継承で受けていた値も含む）
   - font-family の一括変更なし。見出しの明朝は維持し、太さと色だけ濃くする
   - 本文・DOM・画像は変更しない。余白とタイポグラフィのみ
   - 最後に読むため、全幅共通の指定は「全幅の元値以上」に限定し、
     幅で変える値は PC(min-width:761px) / スマホ(max-width:760px) に分けて書く
   - enhancements・conversion 系のCSS/JS、動き低減の挙動には触れない
   ========================================================================== */

/* ---------- 1. 色トークン（文字を濃く） ---------- */
:root {
  --ink: #352b28;   /* 元 #3f3431 */
  --muted: #574a44; /* 元 #6b5d57。paper(#fffcf5)上で約8.5:1 */
}

/* ---------- 2. 本文の行間（元 2.0。スマホは 8. で 1.75） ---------- */
body { line-height: 1.8; }

/* ---------- 3. 見出し：明朝のまま 600 と濃い焦茶（サイズは変えない） ---------- */
h1, h2 { font-weight: 600; color: #352b28; }
.hero h1, .hero h1 .h1-sub, .h1-sub { color: #352b28; }
.plan-panel h3, .lesson-copy h3, .join-campaign h3, .circle-actions h3,
.xp-note h3, .xp-head h3, .xp-steps h4, .benefit-copy h3, .mind-benefit-copy h3,
.mind-learning h4, .teacher-video-slot h3, .scene-title, .voice-name,
.positive-bridge strong { font-weight: 600; }

/* ---------- 4. 文字サイズ（全幅共通。すべて元の各幅の値以上） ---------- */
/* 共通の補助テキスト */
.eyebrow { font-size: 14px; }
.note, .small { font-size: 14px; line-height: 1.8; }
.review { font-size: 14px; }
.review-note, .review-tag { font-size: 14px; }
.motion-toggle, .replay { font-size: 14px; }
.section-lead { font-size: 16px; line-height: 1.85; }
.site-footer { font-size: 14px; }
.closing-note, .choice-plan { font-size: 14px; }

/* ヒーロー（構図・余白は触らない） */
.hero-lead { font-size: 16px; line-height: 1.85; }
.hero-scene { font-size: 14px; }
.hero-photo figcaption, .exp-photo figcaption { font-size: 14px; }

/* Facts / 旧共感・体験ブロック */
.facts-list dt, .facts-link { font-size: 14px; }
.need-num, .exp-num { font-size: 14px; }
.needs-note { font-size: 16px; line-height: 1.85; }
.exp-text>p:not(.exp-num):not(.small):not(.exp-scene) { font-size: 16px; }
.gallery-head h3 span, .gallery-controls button { font-size: 14px; }
.community p { font-size: 16px; }

/* About（rev5） */
.easy-points p { font-size: 15px; line-height: 1.8; }
.about-note { font-size: 14px; }
.about-lead { line-height: 1.85; }

/* 共感ギャラリー */
.empathy-gallery .slides figcaption { font-size: 16px; }
.empathy-gallery figcaption a { font-size: 14px; }
.scene-sub { font-size: 15px; }
.bridge-note { font-size: 14px; }

/* レッスン */
.lesson-kicker { font-size: 14px; }
.lesson-copy>p:not(.lesson-kicker):not(.lesson-scope) { font-size: 16px; line-height: 1.8; }
.mini-steps li { font-size: 16px; }
.lesson-scope { font-size: 14px; line-height: 1.8; }
.mode-guide .mode-text p { font-size: 16px; }
.mode-text>p:not(.exp-scene):not(.small) { font-size: 16px; }
.mode-guide .scope { font-size: 14px; }

/* 受け手のメリット・心のコース（.benefit-swipe はPCで16pxを継承するためスマホのみで指定） */
.benefit-plan { font-size: 14px; }
.benefit-copy>p:not(.benefit-plan) { font-size: 16px; line-height: 1.8; }
.benefit-copy .benefit-scope { font-size: 14px !important; line-height: 1.8 !important; }
.recording-option { font-size: 14px; }
.experience-benefits .video-note { font-size: 14px; }
.mind-benefit-copy>p { font-size: 16px; line-height: 1.8; }
.mind-benefit-copy .eyebrow, .mind-benefit-copy .mind-course-names { font-size: 14px; }
.mind-benefit-copy .mind-future { font-size: 16px; }
.mind-learning p { font-size: 16px; line-height: 1.8; }

/* サークル */
.circle-actions p, .circle-v6 .circle-actions p { font-size: 15px; line-height: 1.8; }
.xp-note>p:not(.eyebrow) { font-size: 16px; line-height: 1.8; }
.xp-note>p.small, .xp-explainer>.small { font-size: 14px; }
.xp-head p { font-size: 16px; line-height: 1.8; }
.xp-steps p { font-size: 15px; line-height: 1.8; }

/* 講師 */
.way-label { font-size: 14px; }
.way dd { font-size: 16px; line-height: 1.8; }
.teacher-video-slot p, .slot-label { font-size: 14px; }

/* 受け方タブ（#plans） */
.tabs [role=tab] span { font-size: 14px; }
.plan-panel p { line-height: 1.8; }
.plan-panel .small { font-size: 14px; }

/* 声 */
.voice-carousel .voice-index, .voice-person .voice-index { font-size: 14px; }
.voice-carousel .avatar-note, .avatar-note { font-size: 14px; }
.voice-slides figcaption { font-size: 14px; }
.voice-controls .voice-autoplay, .voice-auto-status, .voice-swipe, .voice-carousel .note { font-size: 14px; }
.private-voices .note, .pending-image small { font-size: 14px; }

/* 10コース */
.courses .wrap>p:not(.eyebrow) { font-size: 16px; }
summary span { font-size: 14px; }
details>p { font-size: 16px; }
.course-list details>p { font-size: 15px; }
.course-card>p { font-size: 15px !important; line-height: 1.8 !important; }
.course-card .course-period { font-size: 14px; }
.course-card .course-short { font-size: 15px; line-height: 1.8; }
.course-list summary .course-goal, .course-card summary .course-goal { font-size: 15px; line-height: 1.8; color: #4a3a33; }
.course-card .course-open { font-size: 14px; }
.badge, .course-card summary .badge { font-size: 14px; }
.course-check { font-size: 14px; }
.timeline-cap, .tl-note, .tl-cond { font-size: 14px; }

/* 料金表・申込（#application。申込3ボタンとそのgapには触れない） */
.plans-lead { font-size: 16px; }
.cmp small, .cmp-price .unit, .cmp-price .yen { font-size: 14px; }
.cmp-terms { font-size: 14px; }
#application .conversion-actions + .cmp-terms,
#application .conversion-actions + .cmp-terms p,
#application .conversion-actions + .cmp-terms a { font-size: 14px; }
.plans-notes { font-size: 14px; }
.personal-head p:not(.eyebrow), .personal-list div { font-size: 16px; }
.join-campaign p:not(.campaign-price), .campaign-price s span { font-size: 14px; }

/* はじめ方 */
.route-title span, .tools-title, .tools-list li, .tools-note, .flow-svc { font-size: 14px; }
.steps p { font-size: 15px; line-height: 1.8; }

/* ---------- 5. 例外（14px未満を残すもの。理由は notes） ---------- */
.brand span { font-size: 12px; }                 /* 元10px。ヘッダー高さ固定 */

/* ---------- 6. PC・タブレット（761px〜） ---------- */
@media (min-width: 761px) {
  #nav { font-size: 14px; }                      /* 元13px（スマホ側15pxは触らない） */
  .hero-eyebrow { font-size: 14px; }             /* 元13px */
  .cmp { font-size: 16px; }                      /* 元15px */

  h2 { margin: 12px 0 20px; }                    /* 元 16px 0 32px */

  /* セクション上下：約55〜70px */
  .empathy .wrap { padding-top: 64px; padding-bottom: 56px; }
  .experience .wrap { padding-top: 64px; }
  .exp { padding: 48px 0; }
  .gallery { margin-top: 48px; }
  .community { margin-top: 40px; }
  .voices-slot .wrap { padding-bottom: 56px; }
  .start .wrap { padding-bottom: 56px; }
  .closing-inner { padding-top: 64px; padding-bottom: 64px; }
  .about .wrap { padding-top: 64px; padding-bottom: 56px; }
  .empathy-visual .wrap { padding-top: 64px; padding-bottom: 56px; }
  .experience-v5>.wrap { padding-top: 64px; }
  .plan-intro .wrap, .circle-section .wrap, .experience-benefits .wrap { padding-block: 64px; }

  /* 見出し下・ブロック間 */
  .about h2 { margin-bottom: 18px; }
  .empathy-visual h2 { margin-bottom: 24px; }
  .experience-v5 h2 { margin-bottom: 28px; }
  .experience-benefits h2 { margin-bottom: 24px; }
  .teacher h2 { margin-bottom: 20px; }
  .closing h2 { margin: 12px 0 24px; }
  .needs-note { margin-top: 24px; }
  .easy-points { margin: 32px 0 24px; }
  .positive-bridge { margin-top: 36px; }
  .lesson-row { margin-bottom: 56px; }
  .circle-v6 .circle-actions { margin: 28px 0 36px; }
  .recording-option { margin: 20px 0 40px; }
  .mind-course { padding-top: 36px; }
  .experience-benefits .video-note { margin-top: 28px; }
  .voice-gallery { margin-top: 24px; }
  .join-campaign { margin: 24px 0 32px; }
  .section-cta { margin-top: 28px; }
  .plan-intro .modes { margin-top: 24px; }
  .plan-intro .plan-panel { padding: 30px; }
  .courses .wrap>p:not(.eyebrow) { margin-bottom: 24px; }
  .course-list { gap: 20px; }
  .course-map .course-group { margin-top: 24px; }
  .teacher-grid { row-gap: 40px; }
  .teacher-note { margin-top: -16px; }          /* 元 row-gap64 − 40 = 24px の間隔を維持 */
  .personal { margin-top: 56px; padding-top: 32px; }
  .cmp { margin-top: 32px; }
  .cmp th, .cmp td { padding-top: 16px; padding-bottom: 16px; }
  .cmp-head { padding-top: 22px; padding-bottom: 18px; }
  .cmp-price-row th, .cmp-price-row td { padding-top: 22px; padding-bottom: 22px; }
  .plans-notes { margin-top: 32px; }
  .tools { margin-top: 32px; }
}
@media (min-width: 1001px) {
  .wrap { padding: 64px 48px; }                  /* 元 120px 48px */
  .tl-axis, .course-map[data-active] .tl-axis { font-size: 14px; } /* 元12/13px。軸は overflow:hidden のため1001px以上のみ */
}
@media (min-width: 761px) and (max-width: 1000px) {
  .wrap { padding: 56px 36px; }                  /* 元 96px 36px */
  .tl-axis, .course-map[data-active] .tl-axis { font-size: 13px; } /* 元12/13px */
}

/* ---------- 7. 空白の原因だった固定 min-height を内容に合わせる（全幅） ---------- */
.mode-panel { min-height: 0; }
.plan-intro .plan-panel { min-height: 0; }       /* 元 PC260 / スマホ330→300px */
.voice-slides>figure { min-height: 0; }          /* 元 PC285→400 / スマホ345→440→510→450px */
/* 声カードは横並びflexのため、全カードが最も長いカードの高さに揃う＝自動送り中も高さは変わらない */

/* ---------- 8. スマホ（〜760px） ----------
   第2稿：初稿は320/390pxで縦に伸びた（3特長とコースの1列化が主因）。
   レイアウトは元の2列カード・3列特長に戻し、文字を14px以上に保ったまま
   余白・カード内余白・画像の高さ・行間(1.75)・固定空白で高さを取り戻す。 */
@media (max-width: 760px) {
  body { line-height: 1.75; }                    /* 元2.0。指定範囲1.75〜1.85の下限 */
  .wrap { padding: 32px 20px; }                  /* 元 72px 20px */
  h2 { margin: 8px 0 16px; }                     /* 元 12px 0 26px（サイズは不変） */

  /* --- 文字（元のスマホ値以上） --- */
  html:not(.js) #nav, #menu { font-size: 14px; } /* 元13px */
  .hero-eyebrow { font-size: 12px; }             /* 元10px。写真上の重ねコピー幅45%のため例外 */
  .hero-lead { font-size: 16px; line-height: 1.75; } /* 元14px */
  .brand span { font-size: 11px; }               /* 元9px。例外 */
  .about-lead { font-size: 16px; }               /* 元15px */
  .positive-bridge { font-size: 16px; }          /* 元14px */
  .swipe-hint, .benefit-swipe { font-size: 14px; } /* 元11px */
  .scene-sub { font-size: 14px; }                /* 元13px */
  .slides figcaption { font-size: 16px; }        /* 元15px */
  .plan-panel p { font-size: 16px; }             /* 元15px */
  .cmp { font-size: 14px; }                      /* 元14px（PCの16pxを持ち込まない） */
  .cmp tbody td { font-size: 14px; }             /* 元12px */
  .cmp tbody th, .cmp-for { font-size: 14px; }   /* 元13/11px */
  /* 補助は14px（初稿15px）。いずれも元のスマホ値以上 */
  .circle-actions p, .circle-v6 .circle-actions p { font-size: 14px; } /* 元11/12px */
  .xp-steps p { font-size: 14px; }               /* 元12px */
  .steps p { font-size: 14px; }                  /* 元14px */
  .personal-list div { font-size: 14px; }        /* 元14px */
  .course-card .course-short { font-size: 14px; } /* 元11px */
  .course-card summary .course-goal, .course-list summary .course-goal { font-size: 14px; } /* 元11px */
  .course-list details>p { font-size: 14px; }    /* 元14px */
  .course-card>p { font-size: 14px !important; } /* 元11px */

  /* --- 行間：スマホは本文・補助とも1.75にそろえる --- */
  .hero-lead, .about-lead, .section-lead, .needs-note, .note, .small,
  .easy-points p, .lesson-copy>p:not(.lesson-kicker):not(.lesson-scope), .lesson-scope,
  .benefit-copy>p:not(.benefit-plan), .mind-benefit-copy>p, .mind-learning p,
  .circle-actions p, .circle-v6 .circle-actions p, .xp-note>p:not(.eyebrow), .xp-head p, .xp-steps p,
  .way dd, .plan-panel p, .steps p, .cmp tbody td,
  .course-card .course-short, .course-card summary .course-goal, .course-list summary .course-goal { line-height: 1.75; }
  .course-card>p, .benefit-copy .benefit-scope { line-height: 1.75 !important; }

  /* --- タブ：14pxでも横にはみ出さないよう折返しを許可 --- */
  .tabs [role=tab] { font-size: 14px; }          /* 元14px（320pxは13px） */
  .plan-intro .tabs button { font-size: 14px; padding: 12px 4px; white-space: normal; line-height: 1.4; } /* 元12px nowrap */
  .mode-guide .tabs button { font-size: 14px; padding: 10px 8px; white-space: normal; flex: 1 1 0; line-height: 1.4; } /* 元12px nowrap */
  .flow .tabs button span { font-size: 14px; }   /* 元10px */

  /* --- セクション上下：32〜36px（元 48〜80px） --- */
  .empathy .wrap { padding-top: 32px; padding-bottom: 32px; }
  .experience .wrap { padding-top: 32px; }
  .about .wrap { padding: 32px 22px; }
  .empathy-visual .wrap { padding: 32px 22px; }
  .experience-v5>.wrap { padding: 32px 22px; }
  .plan-intro .wrap, .circle-section .wrap { padding: 32px 22px; }
  .experience-benefits .wrap { padding: 32px 22px; }
  .voices-slot .wrap { padding: 0 20px 32px; }
  .start .wrap { padding-bottom: 32px; }
  .closing-inner { padding: 36px 20px; }
  .site-footer { padding: 32px 20px; }

  /* --- 見出し下・ブロック間 --- */
  .closing h2 { margin: 8px 0 16px; }
  .about h2, .teacher h2, .empathy-visual h2, .experience-v5 h2, .experience-benefits h2 { margin-bottom: 16px; }
  .needs-note { margin-top: 20px; }
  .need { padding: 18px 0; }
  .exp { padding: 28px 0; }
  .gallery { margin-top: 28px; }
  .community { margin-top: 28px; padding: 18px 0; }
  .facts { padding: 18px 20px; }
  .positive-bridge { margin-top: 20px; }
  .section-cta { margin-top: 20px; }
  .courses .wrap>p:not(.eyebrow) { margin-bottom: 16px; }
  .course-map .course-group { margin-top: 20px; }

  /* --- About の3特長：元の3列のまま、絵を小さく・固定の見出し高さを外す ---
     元：絵 約92px（列幅いっぱいの正方形）、見出し min-height 44px、説明11px。
     第2稿：絵 64px 中央、見出し14px（元値）min-height 0、説明14px（1列約92px・1行6字前後で折返し） */
  .easy-points { gap: 8px; margin: 20px -8px 16px; }
  .easy-points li { padding: 0 2px; }
  .easy-points .feature-art { width: 64px; height: 64px; margin: 0 auto 8px; }
  .easy-points h3 { min-height: 0; margin-bottom: 4px; }
  .easy-points p { font-size: 14px; }            /* 元11px */

  /* --- レッスン --- */
  .lesson-row { gap: 16px; margin-bottom: 32px; }
  .lesson-kicker { margin-bottom: 8px; }
  .lesson-copy h3 { margin-bottom: 10px; }
  .mini-steps { gap: 6px; margin: 14px 0 12px; }
  .lesson-scope { padding-top: 12px; }
  .mode-guide { padding: 20px 16px; }

  /* --- 共感ギャラリー --- */
  .empathy-gallery .slides figcaption { margin-top: 14px; }
  .scene-title { margin-bottom: 10px; }
  .scene-sub { margin: -4px 0 14px; }
  .empathy-gallery figcaption a { padding-top: 12px; }
  .empathy-gallery .gallery-controls { margin-top: 10px; }
  .swipe-hint { margin-top: 10px; }

  /* --- 特典カード（横スクロール。高さ＝最も長いカード） --- */
  .benefit-copy { padding: 18px 16px 18px; }
  .benefit-plan { margin-bottom: 10px; }
  .benefit-copy h3 { margin-bottom: 12px; }
  .benefit-copy .benefit-scope { padding-top: 12px; margin-top: 14px; }
  .recording-option { margin: 12px 0 20px; }
  .experience-benefits .video-note { margin-top: 20px; }
  .mind-course { padding-top: 24px; }
  .mind-benefit-copy { margin-top: 18px; }
  .mind-benefit-copy h3 { margin: 10px 0 14px; }
  .mind-learning { margin: 16px 0; }
  .mind-learning li { padding: 12px 0; }

  /* --- サークル：行組み（元のまま）の絵 110→88px で文の幅を広げ行数を減らす --- */
  .circle-v6 .circle-actions { margin: 16px 0 20px; }
  .circle-v6 .circle-actions li { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; }
  .circle-v6 .circle-actions img { width: 88px; }
  .circle-v6 .circle-actions h3 { margin-bottom: 6px; }
  .xp-explainer { padding-top: 20px; }
  .xp-head img { width: 150px; margin: 4px auto 12px; } /* 元180px */
  .xp-head h3 { margin: 10px 0 12px; }
  .xp-steps { margin-top: 16px; }
  .xp-steps li { padding: 12px 0 12px 44px; }
  .xp-steps b { top: 15px; }
  .xp-note { padding: 18px 0; }

  /* --- 講師・声の予定枠 --- */
  .teacher-grid { row-gap: 24px; }
  .teacher-note { margin-top: 0; }
  .way, .way+.way { padding: 20px 0; }
  .slot-frame { padding: 18px 16px; }
  .teacher-video-slot { padding: 18px; margin-top: 20px; }

  /* --- 受け方タブのパネル（min-height 0 は 7. で維持） --- */
  .plan-intro .modes { margin-top: 16px; }
  .plan-intro .plan-panel { padding: 18px 16px; gap: 6px; }
  .plan-panel h3 { margin-bottom: 10px; }
  .plan-panel .small { margin-top: 12px; }

  /* --- 声（min-height 0 は 7. で維持） --- */
  .voice-gallery { margin-top: 16px; }
  .voice-slides>figure { padding: 18px 18px; }
  .voice-person { margin-bottom: 14px; }
  .voice-carousel blockquote { padding: 16px 16px; }
  .voice-slides figcaption { margin-top: 14px; }
  .voice-controls { margin: 12px 0 16px; }
  .voice-auto-status { margin-bottom: 16px; }

  /* --- 10コース：元の2列のまま。画像を正方形→4:3、カード内余白を詰める ---
     バッジは2列の狭い幅で14pxが横にはみ出して切れないよう折返し可に */
  .course-list { gap: 10px; }
  .course-card summary { padding: 0 10px 14px; }
  .course-card summary .course-art { width: calc(100% + 20px); margin: 0 -10px 10px; aspect-ratio: 4 / 3; }
  .course-card .course-period { padding: 2px 8px; margin-bottom: 8px; }
  .course-card summary b { margin-bottom: 6px; }
  .course-card .course-short { margin-bottom: 8px; }
  .course-card summary .badge { padding: 2px 8px; white-space: normal; }
  .course-card summary .course-goal { margin: 8px 0 10px; padding-top: 8px; }
  .course-card .course-open { padding-top: 8px; }
  .course-card[open] summary { padding-bottom: 12px; }
  .course-card>p { padding: 0 10px 14px !important; }

  /* --- 料金・パーソナル・はじめ方 --- */
  .cmp { margin-top: 20px; }
  .join-campaign { padding: 18px 16px; margin: 20px 0 24px; }
  .personal { margin-top: 32px; padding-top: 24px; }
  .personal-list { margin-top: 16px; }
  .personal-list div { padding: 10px 0; }
  .route, .route+.route { padding: 20px 0 24px; }
  .steps li { padding-top: 14px; padding-bottom: 14px; }
  .steps li:before { top: 14px; }
  .tools { margin-top: 20px; }
}