@charset "UTF-8";
/* =====================================================================
   知っておきたいお金の「守り方」と「増やし方」講座｜名古屋市 LP（v5）
   style.css
   ---------------------------------------------------------------------
   ■ブランドの核（v5で明確化）
     これは「FPがお金を教える講座」ではなく
     「“親の安心”を取り戻す講座」。
     ストーリー：広告＝お金 → LP＝親の安心 → 講座＝親の心の余裕。
   ■ゴール：Meta広告 → LP → LINE登録（CV）
     ただしユーザーの目的は“登録”ではなく「診断を受ける・安心する」。
     よってCTAは診断ベースの言葉にする。
   ■読ませる順：共感 → 安心 → 数字 → 講座
   ■デザイン指定：
     背景90%＝白／アクセント＝赤（重要な見出しだけ）／CTA＝緑／見出し＝黒
     「安心して読める空気感」を最優先。広告感を出さない。
   ■命名：BEM
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. デザイントークン
   --------------------------------------------------------------------- */
:root {
  /* --- 背景は白が主役（90%）。淡色は“区切り”として最小限だけ --- */
  --bg:        #ffffff;   /* ベース＝白 */
  --soft:      #faf9f7;   /* ごく淡い温かみのあるグレー（区切り用） */
  --soft2:     #f7f4ef;   /* ベージュ寄り（さらに稀に使用） */

  /* --- 文字：見出しは黒、本文はやわらかい黒 --- */
  --ink-strong:#1f1e1d;   /* 見出し＝黒 */
  --ink:       #3a3733;   /* 本文 */
  --ink-sub:   #6f6a63;   /* 補足 */
  --ink-mute:  #a5a099;   /* 注釈 */

  /* --- アクセント：赤は「重要な見出し」だけ --- */
  --red:       #d93a30;
  --red-soft:  #fdf0ef;   /* 赤のごく淡い面（枠・タグ用） */
  --red-line:  #f2d6d3;

  /* --- CTA：LINEグリーン（ボタン専用） --- */
  --line:      #06c755;
  --line-dark: #05a648;
  --line-soft: #f0faf3;

  --hair:      #eceae6;
  --shadow:    0 8px 26px rgba(40, 34, 28, .06);
  --shadow-cta:0 10px 24px rgba(6, 199, 85, .24);

  --w-max:   520px;
  --pad-x:   24px;
  --radius:  18px;
  --radius-sm: 13px;
}

/* ---------------------------------------------------------------------
   2. リセット & ベース
   --------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic", YuGothic, Meiryo, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.95;             /* ゆったり＝安心して読める空気感 */
  font-size: 16px;
  letter-spacing: .02em;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

.page { max-width: var(--w-max); margin: 0 auto; background: var(--bg); overflow: hidden; }

/* セクション：既定は白。区切りたい時だけ --soft を付ける */
.section        { padding: 58px var(--pad-x); background: var(--bg); }
.section--soft  { background: var(--soft); }
.section--soft2 { background: var(--soft2); }

/* 見出し：黒が基本。赤は「重要な見出し」だけに限定して使う */
.title {
  text-align: center; font-size: 23px; font-weight: 800; line-height: 1.6;
  color: var(--ink-strong); margin-bottom: 26px;
}
.title--accent { color: var(--red); }      /* ★重要な見出しのみ */
.eyebrow {
  display: block; text-align: center; font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; color: var(--ink-sub); margin-bottom: 12px;
}
.accent { color: var(--red); }
.u-vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* =====================================================================
   3. 上帯（無料・日時。白ベースで静かに）
   ===================================================================== */
.topbar {
  background: var(--bg); border-bottom: 1px solid var(--hair);
  color: var(--ink-sub); text-align: center;
  padding: 11px 16px; font-size: 13px; font-weight: 700;
}
.topbar__free { color: var(--red); font-weight: 800; margin-right: 6px; }
.topbar__sep  { color: var(--hair); margin: 0 6px; }

/* =====================================================================
   ① ファーストビュー
   広告コピー「子どもに、我慢させたくない。」をそのまま主役に置く
   ===================================================================== */
.fv { text-align: center; padding: 42px var(--pad-x) 44px; background: var(--bg); }
.fv__target { font-size: 13.5px; font-weight: 700; color: var(--ink-sub); margin-bottom: 20px; }

/* 主コピー＝広告と一字一句そろえる（重要な見出しなので赤を使う） */
.fv__headline {
  font-size: 37px; line-height: 1.35; font-weight: 900;
  color: var(--red); letter-spacing: .01em; margin-bottom: 22px;
}
/* 共感の入口（説明でなく、気持ち） */
.fv__emotion {
  font-size: 16.5px; font-weight: 600; line-height: 2.05; color: var(--ink);
  max-width: 400px; margin: 0 auto 28px;
}
.fv__emotion b { font-weight: 800; color: var(--ink-strong); }
.fv__media { margin: 0 0 26px; }

.assure { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 420px; margin: 0 auto; }
.assure__item {
  list-style: none; flex: 1 1 0; min-width: 92px;
  background: var(--bg); border: 1px solid var(--hair); border-radius: 999px;
  padding: 9px 6px; font-size: 12.5px; font-weight: 800; color: var(--ink-strong);
}
.assure__item span { color: var(--red); }

/* =====================================================================
   CTA ── ユーザーの目的は“登録”でなく「診断を受ける・安心する」
   ボタンの主語は診断。LINEで届くことはサブテキストで明示する。
   ===================================================================== */
.cta { text-align: center; padding: 30px var(--pad-x); background: inherit; }
.cta__micro { font-size: 13px; font-weight: 700; color: var(--ink-sub); margin-bottom: 14px; line-height: 1.7; }
.cta__micro b { color: var(--red); }

.btn-line {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 430px; margin: 0 auto; min-height: 64px;
  background: var(--line); color: #fff; font-size: 18px; font-weight: 800;
  text-decoration: none; padding: 13px 18px; border-radius: 16px;
  box-shadow: var(--shadow-cta); transition: transform .14s ease, box-shadow .14s ease;
}
.btn-line__main { display: flex; align-items: center; gap: 9px; }
.btn-line__ico {
  width: 24px; height: 24px; background: #fff; color: var(--line);
  border-radius: 7px 7px 7px 2px; font-size: 13px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.btn-line__sub { font-size: 11.5px; font-weight: 500; line-height: 1.55; margin-top: 5px; opacity: .96; }
.btn-line:hover  { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(6,199,85,.3); }
.btn-line:active { transform: translateY(1px); }
.btn-line:focus-visible { outline: 3px solid #0a67c2; outline-offset: 3px; }

.cta__reassure {
  max-width: 430px; margin: 14px auto 0; background: var(--line-soft);
  border: 1px solid #cbe9d6; border-radius: 12px; padding: 11px 16px;
  color: #1b7a48; font-size: 12.5px; font-weight: 700; line-height: 1.75;
}
.cta__reassure b { color: #12633a; }

/* =====================================================================
   ② 共感 ── ここが主役。ママの気持ちを、ていねいに書く
   ===================================================================== */
.feel__block {
  max-width: 430px; margin: 0 auto; text-align: center;
  font-size: 17px; font-weight: 600; line-height: 2.15; color: var(--ink);
}
.feel__block .strong { font-weight: 800; color: var(--ink-strong); }
.feel__ask { display: block; margin-top: 18px; font-size: 18px; font-weight: 800; color: var(--ink-strong); }

/* =====================================================================
   ③ 安心 ── 「あなたのせいではない」。ブランドの核を最初に伝える
   ===================================================================== */
.relief__lead {
  max-width: 430px; margin: 0 auto; text-align: center;
  font-size: 20px; font-weight: 800; line-height: 1.95; color: var(--ink-strong);
}
.relief__lead .accent { color: var(--red); }
.relief__body {
  max-width: 430px; margin: 20px auto 0; text-align: center;
  font-size: 15px; font-weight: 600; line-height: 2.05; color: var(--ink-sub);
}

/* =====================================================================
   ④ 数字 ── 共感と安心のあとに、はじめて“やさしく”出す
   ===================================================================== */
.figures__grid { display: flex; gap: 10px; max-width: 430px; margin: 0 auto; }
.figures__cell {
  flex: 1; background: var(--bg); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); padding: 16px 8px; text-align: center;
}
.figures__k { font-size: 11.5px; font-weight: 700; color: var(--ink-sub); line-height: 1.5; }
.figures__v { font-size: 21px; font-weight: 900; color: var(--ink-strong); margin-top: 6px; white-space: nowrap; }
.figures__v small { font-size: 12px; }
.figures__note {
  max-width: 430px; margin: 20px auto 0; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--ink-strong); line-height: 1.95;
}
.figures__src { font-size: 10.5px; color: var(--ink-mute); text-align: center; margin-top: 14px; line-height: 1.7; }

/* =====================================================================
   ⑤ 講座について ── 「これはFP講座ではありません」を明言
   ===================================================================== */
.about__name { text-align: center; font-size: 21px; font-weight: 800; line-height: 1.55; color: var(--ink-strong); margin: 4px auto 22px; }
.about__media { margin-bottom: 22px; }
.about__notfp {
  max-width: 430px; margin: 0 auto; background: var(--red-soft);
  border: 1px solid var(--red-line); border-radius: var(--radius);
  padding: 20px 20px; text-align: center;
  font-size: 15.5px; font-weight: 700; color: var(--ink-strong); line-height: 1.95;
}
.about__notfp b { color: var(--red); }
.about__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 430px; margin: 22px auto 0; }
.about__fact { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-strong); }
.about__fact b { display: block; color: var(--ink-sub); font-size: 10.5px; font-weight: 700; margin-bottom: 2px; }

/* =====================================================================
   ⑥ 学べること（3つ）
   ===================================================================== */
/* 講座の“正体”を一行で示すリード（知識でなく心の余裕を売る） */
.learn__lead {
  text-align: center; font-size: 17px; font-weight: 700; line-height: 1.8;
  color: var(--ink-strong); max-width: 420px; margin: 0 auto 10px;
}
.learn__lead b { display: inline-block; font-size: 21px; font-weight: 900; margin-top: 2px; }
.learn__note {
  text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-sub);
  line-height: 1.85; max-width: 420px; margin: 0 auto 28px;
}

.learn__list { max-width: 400px; margin: 0 auto; }
.learn__item { list-style: none; display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.learn__item:last-child { border-bottom: none; }
/* 「導入」「Part1」「まとめ」が収まる横長ラベル（丸だと文字が入らないため） */
.learn__label {
  flex: 0 0 auto; min-width: 58px; padding: 4px 8px;
  border-radius: 999px; background: var(--red-soft); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 900; letter-spacing: .02em; margin-top: 3px;
}
.learn__txt { font-size: 15.5px; font-weight: 700; line-height: 1.65; color: var(--ink-strong); }
.learn__txt span { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-sub); margin-top: 3px; }

/* =====================================================================
   ⑦ 講師・ブランド宣言 ── 「投資を教えたいのではない」
   ===================================================================== */
.brand__statement {
  max-width: 430px; margin: 0 auto; text-align: center;
  font-size: 16.5px; font-weight: 700; line-height: 2.1; color: var(--ink-strong);
}
.brand__statement .accent { color: var(--red); }
.brand__divider { width: 36px; height: 2px; background: var(--red-line); border: none; margin: 22px auto; }
.brand__who { max-width: 430px; margin: 0 auto; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-sub); line-height: 1.95; }
.brand__who b { color: var(--ink-strong); }
.brand__creds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px auto 0; max-width: 360px; }
.brand__cred { list-style: none; background: var(--bg); border: 1px solid var(--hair); color: var(--ink-sub); font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.brand__src { font-size: 10.5px; color: var(--ink-mute); text-align: center; margin-top: 14px; line-height: 1.7; }

/* =====================================================================
   ⑧ どう変わるか（before→after／“安心”軸）
   ===================================================================== */
.change__list { max-width: 430px; margin: 0 auto; }
.change__item { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 12px; }
.change__before { font-size: 13.5px; font-weight: 600; color: var(--ink-mute); }
.change__before::before { content: "いま　"; font-weight: 800; }
.change__arrow { color: var(--red); font-weight: 900; font-size: 13px; margin: 4px 0; }
.change__after { font-size: 16px; font-weight: 800; color: var(--ink-strong); line-height: 1.6; }
.change__after::before { content: "これから　"; font-weight: 900; color: var(--red); font-size: 12.5px; }

/* =====================================================================
   ⑨ LINE登録特典（診断）── 欲しくなる見せ方
   ===================================================================== */
.gift {
  max-width: 430px; margin: 0 auto; text-align: center;
  background: var(--bg); border: 1.5px dashed var(--red); border-radius: var(--radius); padding: 24px 20px;
}
.gift__tag { display: inline-block; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: 999px; margin-bottom: 12px; }
.gift__name { font-size: 22px; font-weight: 900; color: var(--ink-strong); line-height: 1.5; }
.gift__desc { font-size: 13.5px; font-weight: 500; color: var(--ink-sub); margin-top: 10px; line-height: 1.9; }

/* =====================================================================
   ⑩ 登録後の流れ ①診断 ②講座案内 ③ステップ配信
   ===================================================================== */
.flow__diagram { max-width: 400px; margin: 0 auto; }
.flow__step { position: relative; background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 15px 16px 15px 54px; box-shadow: var(--shadow); margin-bottom: 10px; }
.flow__num { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--line); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; }
.flow__t { font-size: 15px; font-weight: 800; color: var(--ink-strong); }
.flow__d { font-size: 12.5px; font-weight: 500; color: var(--ink-sub); line-height: 1.7; margin-top: 2px; }
.flow__arrow { text-align: center; color: var(--red); font-size: 14px; margin: 2px 0; }
.flow__dates { max-width: 400px; margin: 18px auto 0; background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 16px 18px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-strong); line-height: 1.85; }
.flow__dates b { color: var(--red); }

/* =====================================================================
   ⑪ FAQ
   ===================================================================== */
.faq__list { max-width: 430px; margin: 0 auto; }
.faq__item { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; }
.faq__q { font-size: 14.5px; font-weight: 800; color: var(--ink-strong); padding: 15px 44px 15px 18px; position: relative; cursor: pointer; list-style: none; line-height: 1.6; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "＋"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--red); font-weight: 900; font-size: 17px; }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { font-size: 13px; font-weight: 500; color: var(--ink-sub); line-height: 1.9; padding: 0 18px 16px; }

/* =====================================================================
   ⑫ 最後のCTA（“ここなら安心できそう”で締める）
   ===================================================================== */
.last { text-align: center; }
.last__title { font-size: 23px; font-weight: 900; line-height: 1.6; color: var(--ink-strong); margin-bottom: 14px; }
.last__title .accent { color: var(--red); }
.last__body { font-size: 14.5px; font-weight: 600; color: var(--ink-sub); line-height: 1.95; max-width: 400px; margin: 0 auto 24px; }
.last__event { font-size: 12px; color: var(--ink-mute); margin-top: 18px; line-height: 1.85; }

.footer { background: var(--soft); text-align: center; padding: 26px 20px 40px; font-size: 12px; color: var(--ink-sub); border-top: 1px solid var(--hair); }
/* 主催名：運営元を明示して安心感を出す（少しだけ強調） */
.footer__host { font-size: 12.5px; font-weight: 800; color: var(--ink-strong); margin-bottom: 10px; line-height: 1.7; }
.footer__caution { margin-top: 8px; font-size: 11px; color: var(--ink-mute); }

/* =====================================================================
   スティッキーCTA
   ===================================================================== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 36%);
  transform: translateY(120%); transition: transform .3s ease; pointer-events: none;
}
.sticky-cta.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-cta__btn {
  width: 100%; max-width: var(--w-max); min-height: 56px;
  background: var(--line); color: #fff; text-decoration: none; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(6,199,85,.32);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
}
.sticky-cta__btn small { font-size: 10.5px; font-weight: 500; opacity: .95; margin-top: 2px; }
.sticky-cta__btn:active { transform: translateY(1px); }

/* =====================================================================
   画像プレースホルダー
   ===================================================================== */
.ph {
  width: 100%; aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #f6f4f1 0 14px, #efece7 14px 28px);
  border: 1px solid var(--hair); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-sub); font-size: 12.5px; font-weight: 700; line-height: 1.7; padding: 16px;
}
.ph--wide { aspect-ratio: 3 / 2; }

/* =====================================================================
   アニメーション（フェードイン＋CTAの軽い拡大のみ）
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@keyframes cta-breathe { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.02);} }
.btn-line--pulse { animation: cta-breathe 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn-line--pulse { animation: none; }
  .sticky-cta { transition: none; }
}

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width: 360px) {
  :root { --pad-x: 18px; }
  .fv__headline { font-size: 32px; }
  .section { padding: 48px 18px; }
  .figures__v { font-size: 18px; }
}
@media (min-width: 620px) {
  .fv__headline { font-size: 43px; }
  .title { font-size: 25px; }
}
@media (prefers-color-scheme: dark) { body { background: #e8e6e2; } }