/* =========================================================
   無料マネー勉強会 LP / 吉川 高弘
   トンマナ：白×青（信頼） 7 ： ポップ 3
   ファイル：style.css
   ========================================================= */

/* ---------- デザイントークン ---------- */
:root{
  /* 信頼の青 */
  --blue:        #2563EB;
  --blue-600:    #1D4ED8;
  --blue-700:    #1E40AF;
  --ink:         #0E2A66;   /* 見出しの濃紺 */
  --ink-soft:    #2A3F6B;
  /* 淡い面 */
  --sky:         #EAF2FF;
  --sky-2:       #F4F8FF;
  --sky-line:    #DBE7FF;
  /* ポップの差し色（限定投入） */
  --warm:        #FF8A4C;   /* 暖色バッジ */
  --pop:         #FFCD4A;   /* やわらかいイエロー（ハイライト） */
  --mint:        #43C7A6;   /* ミント */
  /* 文字・背景 */
  --text:        #243049;
  --text-mute:   #5A6781;
  --white:       #FFFFFF;
  --paper:       #FBFCFF;
  /* 影・角丸 */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --sh-sm: 0 4px 14px rgba(37,99,235,.08);
  --sh:    0 14px 38px rgba(30,64,175,.12);
  --sh-lg: 0 26px 60px rgba(30,64,175,.18);
  --sh-pop:0 12px 26px rgba(255,138,76,.28);
  /* レイアウト */
  --wrap: 1040px;
  --col:  680px;   /* 読みやすい1カラム幅 */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--paper);
  line-height:1.85;
  font-size:16px;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.pop-font{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; }

/* ---------- 共通レイアウト ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }
.col{ width:100%; max-width:var(--col); margin:0 auto; }
section{ position:relative; }
.sec{ padding:78px 0; }
.sec-sky{ background:linear-gradient(180deg,var(--sky-2),var(--sky)); }
.center{ text-align:center; }

/* 区切りの波 */
.wave{ display:block; width:100%; height:auto; }

/* 小ラベル（章タイトルの上） */
.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; letter-spacing:.14em;
  color:var(--blue); background:var(--white);
  border:1px solid var(--sky-line); border-radius:999px;
  padding:7px 16px; box-shadow:var(--sh-sm);
  margin-bottom:20px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); }

/* 見出し */
.h2{
  font-size:clamp(25px,6.4vw,38px);
  font-weight:900; line-height:1.4; color:var(--ink);
  letter-spacing:.01em;
}
.h2 .mark{
  background:linear-gradient(transparent 62%, rgba(255,205,74,.65) 62%);
  padding:0 .06em;
}
.lead{ margin-top:18px; color:var(--text-mute); font-size:clamp(15px,3.8vw,17px); }

/* ---------- ボタン ---------- */
.btn{
  position:relative; display:inline-flex; flex-direction:column; align-items:center;
  gap:3px; font-weight:800; text-align:center;
  padding:18px 34px; border-radius:999px; line-height:1.3;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
  will-change:transform;
}
.btn .btn__main{ font-size:clamp(16px,4.3vw,19px); letter-spacing:.02em; }
.btn .btn__sub{
  font-size:11px; font-weight:700; letter-spacing:.08em; opacity:.92;
  display:inline-flex; align-items:center; gap:5px;
}
.btn .btn__sub::before{ content:"●"; font-size:7px; }
.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,#3B82F6,#2563EB 55%,#1E40AF);
  box-shadow:0 16px 30px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 22px 40px rgba(37,99,235,.42); }
.btn--primary:active{ transform:translateY(0); }
/* 光沢スイープ */
.btn--primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%);
  background-size:240% 100%; background-position:120% 0;
  transition:background-position .8s var(--ease); pointer-events:none;
}
.btn--primary:hover::after{ background-position:-40% 0; }
.btn--lg{ padding:22px 46px; }
.btn-note{ margin-top:13px; font-size:12.5px; color:var(--text-mute); font-weight:600; }
.btn-wrap{ display:flex; flex-direction:column; align-items:center; }

/* 鼓動アニメ（小さく上品に） */
@keyframes beat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.pulse{ animation:beat 2.6s ease-in-out infinite; }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:all .35s var(--ease);
  background:rgba(255,255,255,0);
}
.site-head.solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 4px 20px rgba(30,64,175,.08);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; flex-direction:column; line-height:1.05; }
.brand b{ font-size:18px; font-weight:900; color:var(--ink); letter-spacing:.04em; }
.brand small{ font-size:10.5px; font-weight:700; color:var(--blue); letter-spacing:.18em; margin-top:2px; }
.head-cta{
  font-size:13.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#3B82F6,#2563EB);
  padding:11px 20px; border-radius:999px;
  box-shadow:0 8px 18px rgba(37,99,235,.3);
  transition:transform .25s var(--ease);
}
.head-cta:hover{ transform:translateY(-2px); }
@media(max-width:560px){ .head-cta{ display:none; } }

/* =========================================================
   ① ヒーロー
   ========================================================= */
.hero{
  position:relative; padding:104px 0 70px; overflow:hidden;
  background:
    radial-gradient(120% 80% at 80% -10%, #DCEAFF 0%, transparent 55%),
    radial-gradient(110% 70% at 0% 0%, #EAF2FF 0%, transparent 50%),
    linear-gradient(180deg,#F7FAFF 0%,#FFFFFF 100%);
}
/* 浮遊する装飾 */
.hero__blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; z-index:0; }
.b1{ width:160px; height:160px; top:8%; right:-30px; background:radial-gradient(circle at 30% 30%,#BFE0FF,#8FC2FF); }
.b2{ width:90px; height:90px; bottom:16%; left:-20px; background:radial-gradient(circle at 30% 30%,#FFE39A,#FFCD4A); opacity:.5;}
.coin{ position:absolute; z-index:1; opacity:.9; animation:float 6s ease-in-out infinite; }
.coin.c1{ top:14%; left:7%; width:46px; animation-delay:.2s; }
.coin.c2{ top:62%; right:8%; width:38px; animation-delay:1.1s; }
.coin.c3{ bottom:8%; left:18%; width:30px; animation-delay:.6s; }
@keyframes float{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-16px) rotate(4deg)} }

.hero__inner{ position:relative; z-index:3; }
.hero__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:24px; }
.chip{
  font-size:12px; font-weight:700; color:var(--blue-700);
  background:var(--white); border:1px solid var(--sky-line);
  border-radius:999px; padding:6px 13px; box-shadow:var(--sh-sm);
}
.chip.warm{ color:#B0490F; background:#FFF4EC; border-color:#FFD9C2; }
.hero__eyebrow{
  text-align:center; font-weight:800; color:var(--blue);
  font-size:clamp(11px,3vw,13px); letter-spacing:.32em; margin-bottom:8px; opacity:.85;
}
.hero__brandname{
  text-align:center; font-weight:900;
  font-size:clamp(34px,9vw,62px); line-height:1.18; letter-spacing:.04em;
  background:linear-gradient(135deg,#2563EB,#1E40AF 60%,#3B82F6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:24px;
}
.hero__catch{
  text-align:center; font-weight:900; color:var(--ink);
  font-size:clamp(22px,6.6vw,40px); line-height:1.5; letter-spacing:.01em;
  margin-bottom:22px;
}
.hero__catch .mark{ background:linear-gradient(transparent 60%, rgba(255,205,74,.7) 60%); }
.hero__catch .bl{ color:var(--blue); }
.hero__sub{
  text-align:center; max-width:560px; margin:0 auto 32px;
  color:var(--ink-soft); font-size:clamp(14.5px,3.8vw,16.5px); line-height:1.95;
}
.hero__sub .kw{ color:var(--blue); font-weight:700; }
.hero__badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin-top:34px;
}
.tbadge{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:13.5px; color:var(--ink); }
.tbadge .ic{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--sky); color:var(--blue); box-shadow:var(--sh-sm);
}
.tbadge .ic svg{ width:20px; height:20px; }

/* 講師写真をヒーローにそっと添える */
.hero__photo{
  margin:38px auto 0; width:min(280px,72%); position:relative;
}
.hero__photo img{
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  border:5px solid #fff;
}
.hero__photo .tag{
  position:absolute; left:-6px; bottom:14px;
  background:#fff; color:var(--ink); font-weight:800; font-size:12.5px;
  padding:8px 14px; border-radius:999px; box-shadow:var(--sh);
  border:1px solid var(--sky-line);
}
.hero__photo .tag b{ color:var(--blue); }

/* スクロール誘導 */
.scrolldown{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:44px; color:var(--text-mute); font-size:11px; font-weight:700; letter-spacing:.2em; }
.scrolldown span{ width:1px; height:34px; background:linear-gradient(var(--blue),transparent); animation:sd 1.8s ease-in-out infinite; }
@keyframes sd{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* =========================================================
   ② 共感
   ========================================================= */
.empathy .col{ max-width:620px; }
.empathy .h2{ text-align:center; }
.empathy__body{
  margin-top:30px; background:var(--white); border-radius:var(--r-lg);
  padding:36px 30px; box-shadow:var(--sh); border:1px solid var(--sky-line);
  position:relative;
}
.empathy__body p{ margin-bottom:1.1em; font-size:15.5px; }
.empathy__body p:last-child{ margin-bottom:0; }
.empathy__body .strong{ color:var(--ink); font-weight:800; }
.empathy__body::before{
  content:"”"; position:absolute; top:6px; left:20px;
  font-family:Georgia,serif; font-size:80px; color:var(--sky); line-height:1; z-index:0;
}
.empathy__list{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.pain{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--sky-2); border:1px solid var(--sky-line);
  border-radius:var(--r); padding:15px 18px; font-weight:600; color:var(--ink-soft);
}
.pain .ic{ flex:0 0 auto; width:26px; height:26px; color:var(--warm); margin-top:1px; }

/* =========================================================
   ③ お化け（わからないから怖い）
   ========================================================= */
.ghost{ background:linear-gradient(180deg,#0E2A66 0%,#173B82 100%); color:#EAF1FF; overflow:hidden; }
.ghost .h2{ color:#fff; text-align:center; }
.ghost .h2 .mark{ background:linear-gradient(transparent 60%, rgba(255,205,74,.35) 60%); }
.ghost__art{ width:min(220px,60%); margin:6px auto 30px; }
.ghost__svg{ width:100%; overflow:visible; }
.ghost-body{ animation:ghostFloat 5s ease-in-out infinite; transform-origin:center; }
@keyframes ghostFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.ghost__body p{ color:#D6E2FF; margin-bottom:1.15em; font-size:15.5px; text-align:center; max-width:560px; margin-left:auto; margin-right:auto; }
.ghost__body p .hl{ color:#FFD66B; font-weight:800; }
.ghost__body p .wt{ color:#fff; font-weight:800; }
.ghost__turn{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:30px auto; max-width:520px;
}
.face{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); padding:18px 22px; min-width:128px; backdrop-filter:blur(4px);
}
.face .emo{ line-height:1; display:grid; place-items:center; height:48px; }
.emo svg{ display:block; }
.face span{ font-size:12.5px; font-weight:700; color:#C7D6FF; }
.face.good{ background:rgba(255,205,74,.14); border-color:rgba(255,205,74,.4); }
.face.good span{ color:#FFE39A; }
.turn-arrow{ color:#7FA8FF; font-size:26px; animation:nudge 1.4s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
.ghost__cta{ margin-top:34px; }

/* =========================================================
   ④ 学ぶ3つのこと
   ========================================================= */
.learn .h2{ text-align:center; }
.learn__grid{ display:grid; gap:20px; margin-top:42px; }
.lcard{
  position:relative; background:var(--white); border-radius:var(--r-lg);
  padding:30px 26px 28px; box-shadow:var(--sh); border:1px solid var(--sky-line);
  overflow:hidden;
}
.lcard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(var(--blue),var(--blue-700));
}
.lcard__no{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.lcard__no .num{
  display:grid; place-items:center; width:48px; height:48px; border-radius:14px;
  background:var(--sky); color:var(--blue); font-weight:900; font-size:22px;
  box-shadow:var(--sh-sm);
}
.lcard__no .ttl{ font-size:21px; font-weight:900; color:var(--ink); }
.lcard__no .ic{ margin-left:auto; width:34px; height:34px; color:var(--blue); opacity:.85; }
.lcard p{ font-size:14.8px; color:var(--text-mute); }
.lcard p .em{ color:var(--ink); font-weight:700; }

/* 数字ハイライト（増やす） */
.figure{
  display:flex; align-items:stretch; gap:10px; margin:18px 0 4px;
  background:var(--sky-2); border:1px solid var(--sky-line); border-radius:var(--r); padding:16px;
}
.figure__col{ flex:1; text-align:center; }
.figure__col .lbl{ font-size:11.5px; font-weight:700; color:var(--text-mute); }
.figure__col .yen{ font-size:clamp(20px,5.5vw,26px); font-weight:900; color:var(--ink); line-height:1.2; letter-spacing:-.02em; white-space:nowrap; }
.figure__col .yen small{ font-size:13px; font-weight:800; }
.figure__col.up .yen{ color:var(--blue); }
.figure__plus{ display:grid; place-items:center; color:var(--mint); font-weight:900; font-size:22px; }
.figure__note{ text-align:center; font-size:11.5px; color:var(--text-mute); margin-top:8px; }

.learn__sum{
  margin-top:34px; text-align:center; font-weight:800; color:var(--ink);
  font-size:clamp(16px,4.3vw,19px); line-height:1.7;
  background:var(--white); border:2px dashed var(--sky-line); border-radius:var(--r-lg);
  padding:24px 26px; box-shadow:var(--sh-sm);
}
.learn__sum .ar{ color:var(--blue); }
.learn__cta{ margin-top:34px; }

/* =========================================================
   ⑤ 講師紹介
   ========================================================= */
.teacher{ overflow:hidden; }
.teacher .h2{ text-align:center; }
.teacher__card{
  margin-top:40px; background:var(--white); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); border:1px solid var(--sky-line); overflow:hidden;
}
.teacher__top{ display:grid; grid-template-columns:1fr; }
.teacher__photo{ position:relative; background:linear-gradient(160deg,#EAF2FF,#DCEAFF); padding:30px 30px 0; text-align:center; }
.teacher__photo img{ width:min(300px,82%); margin:0 auto; border-radius:20px 20px 0 0; filter:drop-shadow(0 20px 30px rgba(14,42,102,.25)); }
.teacher__photo .float-badge{
  position:absolute; top:24px; right:18px;
  background:#fff; border-radius:14px; padding:10px 14px; box-shadow:var(--sh);
  font-size:11px; font-weight:800; color:var(--blue); text-align:left; line-height:1.5;
}
.teacher__photo .float-badge b{ display:block; font-size:17px; color:var(--ink); }
.teacher__intro{ padding:28px 28px 8px; }
.teacher__name{ font-size:clamp(23px,6vw,30px); font-weight:900; color:var(--ink); }
.teacher__name small{ font-size:14px; font-weight:700; color:var(--text-mute); margin-left:8px; }
.teacher__role{
  display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--blue-700);
  background:var(--sky); border-radius:999px; padding:6px 14px;
}
.teacher__prof{ margin-top:18px; color:var(--text-mute); font-size:14.8px; }
.teacher__prof .em{ color:var(--ink); font-weight:700; }

.theme-box{ padding:6px 28px 4px; }
.theme-box h3, .pcard h3{ font-size:15px; font-weight:900; color:var(--ink); display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.theme-box h3 .ic, .pcard h3 .ic{ width:22px; height:22px; color:var(--blue); }
.theme-list{ display:flex; flex-direction:column; gap:10px; }
.theme-list li{
  list-style:none; display:flex; gap:11px; align-items:flex-start;
  background:var(--sky-2); border:1px solid var(--sky-line); border-radius:14px;
  padding:13px 16px; font-size:14px; font-weight:600; color:var(--ink-soft);
}
.theme-list li .ck{ flex:0 0 auto; width:20px; height:20px; color:var(--mint); margin-top:2px; }

.note-insurance{
  margin:18px 28px 0; font-size:12.5px; color:var(--text-mute); line-height:1.8;
  background:#FFF8EE; border:1px solid #FFE6C2; border-radius:14px; padding:14px 16px;
}
.note-insurance::before{ content:"※ "; color:var(--warm); font-weight:800; }

/* 人柄カード（ポップ） */
.persona{ margin:24px 28px 6px; }
.persona h3{ font-size:15px; font-weight:900; color:var(--ink); margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.persona h3 .dot{ width:10px; height:10px; border-radius:50%; background:var(--pop); box-shadow:0 0 0 4px rgba(255,205,74,.25); }
.persona__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.pcell{
  display:flex; gap:12px; align-items:center; background:var(--white);
  border:1.5px solid var(--sky-line); border-radius:16px; padding:14px;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.pcell:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
.pcell .emo{ line-height:1; flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--sky-2); }
.pcell b{ display:block; font-size:11px; color:var(--blue); font-weight:800; letter-spacing:.04em; }
.pcell span{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.5; }

/* メッセージ吹き出し */
.msg{
  margin:26px 22px 30px; position:relative;
  background:linear-gradient(135deg,#2563EB,#1E40AF); color:#fff;
  border-radius:var(--r-lg); padding:30px 26px; text-align:center;
  box-shadow:var(--sh);
}
.msg::before{
  content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  border:13px solid transparent; border-bottom-color:#2563EB; border-top:0;
}
.msg .q{ font-size:13px; font-weight:700; opacity:.8; letter-spacing:.15em; margin-bottom:10px; }
.msg p{ font-size:clamp(16px,4.4vw,20px); font-weight:800; line-height:1.7; }
.msg .em{ color:#FFD66B; }

/* =========================================================
   ⑥ 月10名限定
   ========================================================= */
.scarce{ text-align:center; }
.scarce .h2{ text-align:center; }
.scarce__num{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:clamp(56px,18vw,120px); line-height:1; color:var(--blue);
  letter-spacing:-.02em; margin:6px 0 4px;
}
.scarce__num small{ font-size:.34em; color:var(--ink); font-weight:700; margin-left:6px; }
.scarce__body{ max-width:560px; margin:20px auto 0; color:var(--text-mute); font-size:15px; }
.scarce__body .em{ color:var(--ink); font-weight:700; }
.slots{
  display:inline-flex; align-items:center; gap:10px; margin:30px auto 0;
  background:#FFF4EC; border:1.5px solid #FFD9C2; color:#B0490F;
  border-radius:999px; padding:12px 22px; font-weight:800; font-size:15px; box-shadow:var(--sh-sm);
}
.slots .pip{ width:10px; height:10px; border-radius:50%; background:var(--warm); animation:blink 1.4s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.3} }
.slots b{ font-size:20px; }
.scarce__cta{ margin-top:34px; }

/* =========================================================
   ⑦ 当日の流れ
   ========================================================= */
.flow .h2{ text-align:center; }
.flow__steps{ margin-top:42px; position:relative; }
.flow__steps::before{
  content:""; position:absolute; left:31px; top:20px; bottom:20px; width:3px;
  background:linear-gradient(var(--blue),var(--sky-line)); border-radius:3px;
}
.step{ position:relative; display:flex; gap:18px; padding-left:0; margin-bottom:22px; }
.step:last-child{ margin-bottom:0; }
.step__no{
  flex:0 0 auto; width:64px; height:64px; border-radius:20px; z-index:1;
  background:linear-gradient(135deg,#3B82F6,#1E40AF); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 10px 22px rgba(37,99,235,.32); line-height:1;
}
.step__no small{ font-size:9px; font-weight:700; letter-spacing:.12em; opacity:.85; }
.step__no b{ font-size:26px; font-weight:900; }
.step__body{
  flex:1; background:var(--white); border:1px solid var(--sky-line);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh-sm);
}
.step__body h3{ font-size:17px; font-weight:900; color:var(--ink); margin-bottom:6px; }
.step__body p{ font-size:14px; color:var(--text-mute); }
.flow__note{
  margin-top:26px; text-align:center; font-weight:700; color:var(--ink-soft); font-size:14px;
  background:var(--sky); border-radius:999px; padding:14px 20px; display:inline-flex; gap:8px;
}
.flow__note-wrap{ text-align:center; }
.flow__note .ic{ width:20px; height:20px; color:var(--blue); }

/* =========================================================
   ⑧ FAQ
   ========================================================= */
.faq .h2{ text-align:center; }
.faq__list{ max-width:640px; margin:38px auto 0; display:flex; flex-direction:column; gap:13px; }
.qa{
  background:var(--white); border:1px solid var(--sky-line); border-radius:var(--r);
  box-shadow:var(--sh-sm); overflow:hidden; transition:box-shadow .3s;
}
.qa.open{ box-shadow:var(--sh); }
.qa__q{
  width:100%; display:flex; align-items:center; gap:13px; text-align:left;
  padding:18px 20px; font-weight:800; color:var(--ink); font-size:15px;
}
.qa__q .qmark{
  flex:0 0 auto; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--sky); color:var(--blue); font-weight:900; font-size:15px;
}
.qa__q .plus{ margin-left:auto; flex:0 0 auto; position:relative; width:18px; height:18px; transition:transform .3s var(--ease); }
.qa__q .plus::before,.qa__q .plus::after{ content:""; position:absolute; background:var(--blue); border-radius:2px; }
.qa__q .plus::before{ top:8px; left:0; width:18px; height:2.5px; }
.qa__q .plus::after{ left:8px; top:0; width:2.5px; height:18px; transition:transform .3s var(--ease); }
.qa.open .qa__q .plus{ transform:rotate(180deg); }
.qa.open .qa__q .plus::after{ transform:scaleY(0); }
.qa__a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.qa__a .inner{ padding:0 20px 20px 61px; color:var(--text-mute); font-size:14px; line-height:1.9; }

/* =========================================================
   ⑨ 最終CTA / フッター
   ========================================================= */
.final{
  background:
    radial-gradient(120% 90% at 50% 0%, #1E40AF 0%, transparent 60%),
    linear-gradient(160deg,#0E2A66,#1D4ED8);
  color:#fff; text-align:center; overflow:hidden; position:relative;
}
.final .coin{ opacity:.5; }
.final .h2{ color:#fff; text-align:center; }
.final .h2 .mark{ background:linear-gradient(transparent 60%, rgba(255,205,74,.45) 60%); }
.final__body{ max-width:540px; margin:22px auto 0; color:#D6E2FF; font-size:15.5px; line-height:1.95; }
.final__sub{ margin-top:18px; font-weight:800; color:#FFD66B; font-size:14px; letter-spacing:.06em; }
.final__cta{ margin-top:36px; }
.final .btn-note{ color:#AFC4FF; }

/* 予約フォーム空枠 */
#reserve{ scroll-margin-top:80px; }
.reserve-ph{
  max-width:560px; margin:44px auto 0; background:rgba(255,255,255,.06);
  border:1.5px dashed rgba(255,255,255,.32); border-radius:var(--r-lg);
  padding:30px 24px; color:#C7D6FF; font-size:13.5px; line-height:1.9;
}
.reserve-ph b{ color:#fff; display:block; margin-bottom:6px; font-size:15px; }

.footer{ background:#0B1F4D; color:#9FB4E6; padding:40px 0 90px; text-align:center; }
.footer .fbrand{ font-size:20px; font-weight:900; color:#fff; letter-spacing:.04em; }
.footer .fbrand small{ display:block; font-size:11px; font-weight:700; color:#7FA0E0; letter-spacing:.2em; margin-top:4px; }
.footer ul{ list-style:none; padding:0; margin:20px 0 0; font-size:13px; line-height:2; }
.footer .copy{ margin-top:22px; font-size:11.5px; color:#6E86C0; }

/* =========================================================
   スマホ追従CTA
   ========================================================= */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-top:1px solid var(--sky-line); padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(30,64,175,.12);
  transform:translateY(120%); transition:transform .4s var(--ease);
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta a{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#3B82F6,#2563EB); color:#fff;
  font-weight:800; font-size:16px; border-radius:999px; padding:15px;
  box-shadow:0 10px 22px rgba(37,99,235,.32);
}
.sticky-cta a small{ font-size:10.5px; font-weight:700; opacity:.9; }
.sticky-cta .line2{ display:flex; flex-direction:column; align-items:center; line-height:1.25; }

/* =========================================================
   スクロール出現アニメ
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .coin,.ghost-body,.pulse,.scrolldown span,.slots .pip,.turn-arrow{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   レスポンシブ（PC拡張）
   ========================================================= */
@media(min-width:760px){
  .sec{ padding:96px 0; }
  .learn__grid{ grid-template-columns:repeat(3,1fr); }
  .teacher__top{ grid-template-columns:0.9fr 1.1fr; align-items:stretch; }
  .teacher__photo{ padding:30px; display:flex; align-items:flex-end; }
  .teacher__photo img{ border-radius:20px; width:100%; }
  .teacher__intro{ padding:34px 34px 10px; }
  .sticky-cta{ display:none; }   /* PCではヘッダーCTAで足りる */
  .hero__photo{ width:300px; }
}
@media(min-width:760px) and (max-width:1040px){
  .learn__grid{ gap:16px; }
  /* カードが細くなり数字が座布団から見切れるのを防ぐ（中間幅だけ縮小） */
  .lcard{ padding:28px 18px 26px; }
  .figure{ padding:13px 9px; gap:4px; }
  .figure__col .lbl{ font-size:10.5px; }
  .figure__col .yen{ font-size:18px; }
  .figure__col .yen small{ font-size:10.5px; margin-left:1px; }
  .figure__plus{ font-size:15px; }
}
/* 3カラムで横に最も詰まる帯（数字の桁が箱とほぼ同幅になる範囲）はさらに小さく */
@media(min-width:760px) and (max-width:910px){
  .figure__col .yen{ font-size:16px; }
  .figure__col .yen small{ font-size:10px; }
  .figure{ gap:2px; }
}