@charset "UTF-8";
/* ============================================================
   Read&Talk 無料体験会 LP
   設計メモ
   - 390px を基準に設計し、--k（スケール単位）で PC まで拡大
   - セクションごとの背景色は持たせない。#lp の一枚のグラデーションだけで
     上から下までつなぐことで「切り貼り」に見せない
   - 装飾は position:absolute でセクションの境目をまたいで配置する
============================================================ */

/* ---------- 基本設定 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:root {
  /* 設計単位。390px を 1px として、画面が広がるほど少しだけ大きくする */
  --k: 1px;

  /* 色 */
  --ink:      #4B3A2C;
  --ink-soft: #6E5A48;
  --ink-thin: #8A7462;
  --red:      #EE5A3C;
  --red-d:    #DE4526;
  --orange:   #F5A02A;
  --yellow:   #FFC44D;
  --green:    #7DB35F;
  --teal:     #63AFC9;
  --pink:     #EE8A7A;
  --brown:    #C08A54;
  --card:     #FFFCF5;
  --card-2:   #FFF9EE;

  /* 影 */
  --sh-s: 0 2px 6px rgba(151,112,66,.10);
  --sh-m: 0 6px 18px rgba(151,112,66,.13);
  --sh-l: 0 12px 34px rgba(151,112,66,.16);

  /* イージング */
  --ez: cubic-bezier(.22,.68,.24,1);
}

@media (min-width: 430px) { :root { --k: 1.07px; } }
@media (min-width: 560px) { :root { --k: 1.18px; } }
@media (min-width: 760px) { :root { --k: 1.32px; } }
@media (min-width: 900px) { :root { --k: 1.42px; } }

body {
  margin: 0;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
               "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: #FFF7E8;
  line-height: 1.78;
  letter-spacing: .01em;
  line-break: strict;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dt, dd, figure { margin: 0; }
em { font-style: normal; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 8px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 紙の質感（全ページ共通） ---------- */
.paper {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .49 0 0 0 0 .32 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- ページ全体を流れる葉っぱ ---------- */
.drift { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.drift svg {
  position: absolute; width: calc(var(--w) * var(--k)); height: auto;
  opacity: var(--o); will-change: transform;
  animation: driftMove var(--dur) linear var(--dl) infinite;
}
/* 上から下へ、ゆっくり降ってくる */
@keyframes driftMove {
  0%   { transform: translate3d(0, -14vh, 0) rotate(0deg); }
  100% { transform: translate3d(var(--mx), 110vh, 0) rotate(var(--rot)); }
}

/* ---------- PC時の左右背景 ---------- */
.side { display: none; }
@media (min-width: 1080px) {
  .side {
    display: block; position: fixed; top: 0; bottom: 0; width: calc((100vw - 860px) / 2);
    z-index: 0; pointer-events: none; overflow: hidden;
  }
  .side--l { left: 0; }
  .side--r { right: 0; }
  .side__glow {
    position: absolute; inset: -10%;
    background:
      radial-gradient(38% 26% at 30% 18%, rgba(255,196,77,.30), transparent 70%),
      radial-gradient(34% 24% at 70% 52%, rgba(125,179,95,.22), transparent 70%),
      radial-gradient(36% 26% at 34% 84%, rgba(238,90,60,.16), transparent 70%);
    filter: blur(26px);
  }
  .side__il { position: absolute; opacity: .55; }
  .side__il--1 { width: 66px;  top: 9%;  left: 18%; }
  .side__il--2 { width: 52px;  top: 27%; left: 58%; opacity: .42; }
  .side__il--3 { width: 78px;  top: 45%; left: 14%; opacity: .5; }
  .side__il--4 { width: 46px;  top: 65%; left: 62%; opacity: .4; }
  .side__il--5 { width: 104px; top: 81%; left: 20%; opacity: .5; }
  .side--r .side__il--1 { left: auto; right: 20%; }
  .side--r .side__il--2 { left: auto; right: 58%; }
  .side--r .side__il--3 { left: auto; right: 16%; }
  .side--r .side__il--4 { left: auto; right: 60%; }
  .side--r .side__il--5 { left: auto; right: 24%; }
}

/* ============================================================
   ページ本体：背景は「一枚のグラデーション」だけ
============================================================ */
.lp {
  position: relative; z-index: 2;
  width: 100%; max-width: 860px; margin-inline: auto;
  overflow: hidden;
  background: linear-gradient(180deg,
    #FFFAF0   0%,
    #FFF3DF   7%,
    #FFF9EC  15%,
    #FFF1DA  24%,
    #FFFBF2  33%,
    #FEF4E4  43%,
    #FFFAEF  52%,
    #FDEFDB  62%,
    #FFF9EC  71%,
    #FEF3E1  81%,
    #FFFAF0  90%,
    #FFF2DE 100%);
  box-shadow: 0 0 60px rgba(180,140,90,.14);
}

/* 色だまり：境目をまたいで背景をにじませる */
.glows { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(56px); }
.glow--1 { top:  2%; left: -22%; width: 78%; aspect-ratio: 1/.8; background: radial-gradient(closest-side, rgba(255,196,77,.42), transparent); }
.glow--2 { top: 14%; right:-26%; width: 82%; aspect-ratio: 1/.8; background: radial-gradient(closest-side, rgba(238,90,60,.20), transparent); }
.glow--3 { top: 33%; left: -24%; width: 76%; aspect-ratio: 1/.9; background: radial-gradient(closest-side, rgba(125,179,95,.26), transparent); }
.glow--4 { top: 52%; right:-24%; width: 80%; aspect-ratio: 1/.8; background: radial-gradient(closest-side, rgba(99,175,201,.22), transparent); }
.glow--5 { top: 71%; left: -22%; width: 78%; aspect-ratio: 1/.9; background: radial-gradient(closest-side, rgba(245,160,42,.28), transparent); }
.glow--6 { top: 89%; right:-22%; width: 80%; aspect-ratio: 1/.8; background: radial-gradient(closest-side, rgba(238,138,122,.24), transparent); }

/* ---------- セクション共通 ---------- */
.sec {
  position: relative; z-index: 1;
  padding-block: calc(58 * var(--k));
}
.inner {
  position: relative; z-index: 2;
  width: min(100% - 20px, 640px); margin-inline: auto;
}
@media (min-width: 760px) { .inner { width: min(100% - 64px, 660px); } }

/* セクションをまたぐ装飾（境目に線を引かず、絵で溶かす） */
.seam { position: absolute; z-index: 1; pointer-events: none; }

/* 点線 */
.dotline {
  display: block; height: 4px; margin: calc(14 * var(--k)) auto 0;
  background-image: radial-gradient(circle, var(--brown) 40%, transparent 42%);
  background-size: 11px 4px; background-repeat: repeat-x;
  opacity: .5;
}
.dotline--c { width: 74%; }

.slash { font-style: normal; color: var(--orange); font-weight: 700; padding-inline: .28em; }

/* 「\\ ○○ //」の締めコピー。
   斜線が改行で上下に泣き別れないよう、文章のかたまりを左右から挟む形にする */
.closing {
  display: flex; align-items: center; justify-content: center;
  gap: calc(2 * var(--k));
}
.closing .slash { flex: none; padding-inline: 0; }
.closing__txt { display: block; }

/* ============================================================
   セクション見出し
============================================================ */
.sec-head { text-align: center; margin-bottom: calc(30 * var(--k)); }
.sec-head__en {
  position: relative; display: inline-block;
  font-family: "Baloo 2", "Zen Maru Gothic", sans-serif;
  font-weight: 700; font-size: calc(15 * var(--k)); letter-spacing: .1em;
  color: var(--orange); line-height: 1.2; margin-bottom: calc(9 * var(--k));
}
.sec-head__ul {
  position: absolute; left: -12%; bottom: calc(-7 * var(--k)); width: 124%;
  height: calc(9 * var(--k)); color: var(--orange); opacity: .9;
}
.sec-head__ttl {
  font-size: calc(28 * var(--k)); font-weight: 900; line-height: 1.44;
  letter-spacing: .012em; color: var(--ink);
}
.sec-head__ttl--big { font-size: calc(34 * var(--k)); }
.sec-head__ttl em { color: var(--red); }
.sec-head__sub { margin-top: calc(12 * var(--k)); font-size: calc(16 * var(--k)); font-weight: 700; }
.sec-head__sub b { font-size: calc(23 * var(--k)); color: var(--red); padding-inline: .1em; }

/* リボン見出し */
.ribbon {
  position: relative; display: block; width: fit-content; margin-inline: auto;
  background: var(--red); color: #fff; font-weight: 900;
  font-size: calc(21 * var(--k)); line-height: 1;
  padding: calc(15 * var(--k)) calc(26 * var(--k));
  border-radius: calc(7 * var(--k));
  box-shadow: 0 5px 0 rgba(179,55,32,.34);
}
.ribbon--wide { font-size: calc(24 * var(--k)); padding-inline: calc(34 * var(--k)); }
.ribbon span { position: relative; z-index: 2; display: block; }
.ribbon::before, .ribbon::after {
  content: ""; position: absolute; top: 50%; width: calc(22 * var(--k)); height: calc(30 * var(--k));
  background: var(--red-d); z-index: 1;
}
.ribbon::before { left: calc(-16 * var(--k)); transform: translateY(-50%); clip-path: polygon(0 0, 100% 22%, 100% 78%, 0 100%, 26% 50%); }
.ribbon::after  { right: calc(-16 * var(--k)); transform: translateY(-50%); clip-path: polygon(100% 0, 0 22%, 0 78%, 100% 100%, 74% 50%); }
.sec-head--ribbon { text-align: center; margin-bottom: calc(32 * var(--k)); }

/* ============================================================
   申し込みボタン（公式LINEへの誘導）
   完成デザインの画像（cta-line.png）をそのままボタンとして使う。
   文字を含む複雑なデザインはCSSで再現するより画像1枚のほうが安定する
============================================================ */
.linecta-img {
  display: block; width: 100%; max-width: calc(400 * var(--k));
  margin-inline: auto;
  animation: btnBreathe 2.8s ease-in-out infinite;
  transition: transform .16s var(--ez);
}
.linecta-img img { display: block; width: 100%; height: auto; }
.linecta-img:hover  { transform: translateY(2px); }
.linecta-img:active { transform: translateY(4px); }

@keyframes btnBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}  50%      { transform: scale(1.022); }
}

/* ============================================================
   FV：780 × 1200 の完成デザイン画像を土台にする
   （文字・トコさん・バッジ・日程カード・丘はすべて画像側）

   .fv__canvas は画像とまったく同じ縦横比（780:1200）の箱。
   画面幅が変わっても、箱ごと比例して縮小・拡大されるので
   画像の中の位置関係は絶対に崩れない。
============================================================ */
.fv { position: relative; z-index: 1; overflow: hidden; }
.fv::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(64% 40% at 50% 4%,  rgba(255,255,255,.85), transparent 72%),
    radial-gradient(52% 32% at 10% 26%, rgba(255,196,77,.30), transparent 72%),
    radial-gradient(52% 32% at 92% 20%, rgba(238,90,60,.14), transparent 72%);
}

.fv__canvas {
  position: relative; z-index: 1;
  width: 100%; max-width: 860px; margin-inline: auto;
  aspect-ratio: 780 / 1200;
}
.fv__art {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
}
body.is-loaded .fv__art { animation: fvIn .9s var(--ez) both; }

/* 舞い落ちる葉・りんご（main.js が中に <svg> を生成する） */
.fv__fall { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.fv__fall svg {
  position: absolute; top: -14%; left: var(--x);
  width: calc(var(--w) * 1% * 2.2); height: auto; opacity: 0;
  animation: fvFall var(--dur) linear var(--dl) infinite;
}
/* top は「コンテナ（キャンバス）の高さ」基準で動くので、
   葉の大きさに関わらず必ず上から下まで移動しきる。
   transformは横ゆれと回転だけを担当する */
@keyframes fvFall {
  0%   { top: -14%; transform: translate3d(0,0,0) rotate(0deg);          opacity: 0; }
  10%  { opacity: .68; }
  88%  { opacity: .68; }
  100% { top: 128%;  transform: translate3d(var(--mx), 0, 0) rotate(var(--rot)); opacity: 0; }
}

/* りす：「料」の右横に小さく添える。文字側（左）を向かせて視線を誘導する */
.fv__squirrel {
  position: absolute; z-index: 5; pointer-events: none;
  left: 81%; top: 24%; width: 11%; height: auto;
  filter: drop-shadow(0 4px 8px rgba(151,112,66,.16));
}

/* 余白の飾り（画像の外・上下の空きスペースに数点だけ） */
.fv__deco { position: absolute; z-index: 2; pointer-events: none; }
.fv__deco--m1 { width: 7%; top: 3%; right: 4%; color: #F5A02A; }
.fv__deco--l1 { width: 6%; top: 5%; left: 3%; color: #7DB35F; opacity: .9; }

/* 申し込みボタン：丘の上に乗せる */
.fv__cta {
  position: absolute; z-index: 6;
  left: 10%; right: 10%; top: 87%;
}

@media (prefers-reduced-motion: reduce) {
  .fv__fall { display: none; }
}

/* ============================================================
   S1 お悩み
============================================================ */
.seam--w1 { width: calc(52 * var(--k)); top: calc(-16 * var(--k)); left: 2%; opacity: .9; }
.seam--w2 { width: calc(40 * var(--k)); top: calc(58 * var(--k)); right: 3%; opacity: .85; }
.seam--w3 { width: calc(86 * var(--k)); bottom: calc(-34 * var(--k)); left: 3%; z-index: 3; }

.wlist { display: grid; gap: calc(11 * var(--k)); }
.wcard {
  position: relative; display: flex; align-items: center; gap: calc(11 * var(--k));
  padding: calc(15 * var(--k)) calc(16 * var(--k));
  background: var(--card); border-radius: calc(16 * var(--k));
  box-shadow: var(--sh-s), inset 0 0 0 2px #fff;
}
/* チェックマーク（✓）は「できた・OK」の記号なので、悩みごとの一覧には合わない。
   マークだけ「？」に変えている。色は視認性を優先し、元の赤系のまま */
.wcard__box {
  flex: none; display: grid; place-items: center;
  width: calc(30 * var(--k)); height: calc(30 * var(--k));
  border: calc(2.4 * var(--k)) dashed var(--red); border-radius: calc(7 * var(--k));
  color: var(--red); background: #FFF6F3;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900; font-size: calc(15 * var(--k)); line-height: 1;
}
.wcard__txt { font-size: calc(17.5 * var(--k)); font-weight: 700; line-height: 1.62; }
.wcard__txt em { color: var(--red); }

.wfoot { position: relative; margin-top: calc(26 * var(--k)); }
.photo {
  position: relative; border-radius: calc(18 * var(--k)); overflow: hidden;
  box-shadow: var(--sh-m), inset 0 0 0 3px #fff;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--reading { width: 100%; aspect-ratio: 4/2.9; }

.bubble {
  position: relative; display: block; width: fit-content;
  padding: calc(15 * var(--k)) calc(19 * var(--k));
  background: #FFF3E4; border: calc(2.4 * var(--k)) dashed #F0A87A;
  border-radius: calc(18 * var(--k));
  font-size: calc(15.5 * var(--k)); font-weight: 700; line-height: 1.66;
}
.bubble em { color: var(--red); }

/* お悩みの締め：文章 → 写真 → 「ひとつでも当てはまる方は」の順に縦に流す */
.wfoot__photo {
  border-radius: calc(20 * var(--k)); overflow: hidden;
  box-shadow: var(--sh-m), inset 0 0 0 calc(3 * var(--k)) #fff;
}
.wfoot__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

/* 点線の枠の中に、トコさんともこもこ吹き出しをまとめて入れる。
   枠で切り取ることで、写真の下半身が切れているのが気にならなくなる */
.wfoot__lead {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center; gap: calc(2 * var(--k));
  margin-top: calc(22 * var(--k));
  padding: calc(10 * var(--k)) calc(8 * var(--k)) 0;
  background: #fff;
  border: calc(2.4 * var(--k)) dashed #E0705A;
  border-radius: calc(20 * var(--k));
}

/* 枠の中が真っ白だと寂しいので、秋の飾りとやわらかい光を添える */
.wfoot__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 62% at 68% 46%, rgba(255,235,205,.62), transparent 72%),
    radial-gradient(42% 48% at 22% 84%, rgba(255,222,222,.42), transparent 72%);
}
.wfoot__deco { position: absolute; pointer-events: none; z-index: 1; }
/* 飾りは文字の帯にかからない位置だけに置く。
   枠の縁からのぞかせることで、狭い余白でも窮屈にならない */
.wfoot__deco--mp  { width: calc(34 * var(--k)); top: calc(-17 * var(--k)); right: calc(6 * var(--k)); }
.wfoot__deco--sp  { width: calc(14 * var(--k)); top: calc(1 * var(--k));   right: calc(64 * var(--k)); }
.wfoot__deco--lf  { width: calc(23 * var(--k)); top: calc(-9 * var(--k));  left: calc(108 * var(--k)); opacity: .85; }
.wfoot__deco--sp2 { width: calc(11 * var(--k)); top: calc(5 * var(--k));   left: calc(150 * var(--k)); }
.wfoot__deco--ac  { width: calc(19 * var(--k)); left: calc(72 * var(--k)); bottom: calc(-4 * var(--k)); z-index: 3; }

.wfoot__toko { flex: none; width: 29%; max-width: calc(150 * var(--k)); }
/* 写真の背景が白なので、掛け合わせで枠の白地になじませる */
.wfoot__toko { position: relative; z-index: 2; }
.wfoot__toko img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* セリフは吹き出しを使わず、大きな文字で読ませる */
.wfoot__say {
  flex: 0 1 auto; align-self: center; position: relative; z-index: 2;
  padding: calc(10 * var(--k)) 0 calc(26 * var(--k));
  text-align: center;
  font-weight: 900; line-height: 1.62; color: var(--ink);
}
/* 1行ずつ独立させて、行末で1文字だけこぼれないようにする */
.wfoot__say .l {
  display: block; white-space: nowrap;
  font-size: calc(19 * var(--k));
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s var(--ez) var(--ld, 0ms), transform .55s var(--ez) var(--ld, 0ms);
}
.wfoot__say .l:nth-child(1) { --ld: 160ms; }
.wfoot__say .l:nth-child(2) { --ld: 320ms; }
.wfoot__say .l:nth-child(3) { --ld: 480ms; }
.wfoot__lead.is-in .wfoot__say .l { opacity: 1; transform: none; }

/* 最後の一行は大きく。マーカーが左から右へ引かれて目を止める */
.l--mark { font-size: calc(22 * var(--k)) !important; }
/* マーカーは行全体ではなく、文字の幅にだけ引く */
.l--mark .mark-wrap { position: relative; display: inline-block; }
.l--mark .mark {
  position: absolute; left: -.14em; right: -.14em; bottom: .04em; height: .46em;
  background: #FFDC7A; border-radius: .24em;
  transform: scaleX(0); transform-origin: left center;
}
.wfoot__lead.is-in .l--mark .mark { animation: markSweep .72s var(--ez) .82s forwards; }
@keyframes markSweep { to { transform: scaleX(1); } }
.l--mark em { position: relative; color: var(--red); }

/* ============================================================
   S2 参加すると（写真×文章の繰り返し）
   ゴンチャのFEATUREセクションを参考に、英字リング・お花の飾りは外している。
   項目ごとに写真の位置を左右入れ替え、番号→写真→文章の順でフェードインする
============================================================ */
.sec--benefit { padding-top: calc(84 * var(--k)); }
.sunburst {
  position: absolute; top: calc(-40 * var(--k)); left: 50%; width: 150%; aspect-ratio: 1/1;
  transform: translateX(-50%); z-index: 0; pointer-events: none; opacity: .3;
  background: repeating-conic-gradient(from 0deg at 50% 22%,
    rgba(255,196,77,.55) 0deg 5deg, transparent 5deg 13deg);
  -webkit-mask-image: radial-gradient(46% 34% at 50% 22%, #000 12%, transparent 74%);
          mask-image: radial-gradient(46% 34% at 50% 22%, #000 12%, transparent 74%);
  animation: sunSpin 68s linear infinite;
}
@keyframes sunSpin { to { transform: translateX(-50%) rotate(360deg); } }
.seam--b1 { width: calc(44 * var(--k)); top: calc(28 * var(--k)); right: 4%; }

.flist { display: grid; gap: calc(52 * var(--k)); margin-top: calc(6 * var(--k)); }
.fitem { position: relative; }

/* シンプルな角丸長方形。写真を歪ませず、影も控えめな1枚だけにする。
   幅をほぼ最大まで広げ、奇数＝左端／偶数＝右端に寄せて交互に配置する */
.fitem__photo {
  position: relative; width: 94%; aspect-ratio: 784 / 464;
  border-radius: calc(28 * var(--k));
  overflow: hidden;
}
.fitem__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fitem--r .fitem__photo { margin-left: 0; margin-right: auto; }
.fitem--l .fitem__photo { margin-left: auto; margin-right: 0; }

.fitem__body { position: relative; margin-top: calc(-22 * var(--k)); padding: 0 calc(10 * var(--k)); }
.fitem--r .fitem__body { text-align: left; padding-right: calc(30 * var(--k)); }
.fitem--l .fitem__body { text-align: right; padding-left: calc(30 * var(--k)); }

.fitem__no {
  display: inline-grid; place-items: center;
  width: calc(46 * var(--k)); height: calc(46 * var(--k)); border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: calc(18 * var(--k)); line-height: 1;
  box-shadow: 0 4px 0 rgba(179,55,32,.28), var(--sh-m);
  margin-bottom: calc(10 * var(--k));
}
.fitem__txt { font-size: calc(17.5 * var(--k)); font-weight: 700; line-height: 1.66; }
.fitem__txt em { color: var(--red); }

/* ============================================================
   S3 おすすめ
============================================================ */
.seam--r1 { width: calc(42 * var(--k)); top: calc(30 * var(--k)); left: 2%; opacity: .85; }
.seam--r2 { width: calc(50 * var(--k)); bottom: calc(-26 * var(--k)); right: 6%; z-index: 3; }

.rlist { display: grid; gap: calc(9 * var(--k)); }
.ritem {
  display: flex; align-items: flex-start; gap: calc(11 * var(--k));
  padding: calc(14 * var(--k)) calc(16 * var(--k));
  background: rgba(255,253,246,.86); border-radius: calc(14 * var(--k));
  box-shadow: var(--sh-s);
  font-size: calc(15 * var(--k)); font-weight: 700; line-height: 1.62;
}
.ritem__txt { flex: 1 1 auto; min-width: 0; }
.ritem em { color: var(--green); }
.ritem__ck {
  flex: none; display: grid; place-items: center; margin-top: calc(2 * var(--k));
  width: calc(24 * var(--k)); height: calc(24 * var(--k)); border-radius: 50%;
  background: var(--green); color: #fff;
}
.ritem__ck svg { width: 64%; height: 64%; }

.note-lead {
  margin-top: calc(20 * var(--k)); text-align: center;
  font-size: calc(16 * var(--k)); font-weight: 700; line-height: 1.7;
}
.note-lead em { color: var(--red); font-size: calc(18 * var(--k)); }

/* ============================================================
   S4 大切にしていること（FEATURE構成）
============================================================ */
.seam--p1 { width: calc(48 * var(--k)); top: calc(16 * var(--k)); right: 3%; }
.seam--p2 { width: calc(40 * var(--k)); bottom: calc(-18 * var(--k)); left: 4%; }

.policy__head { text-align: center; margin-bottom: calc(34 * var(--k)); }
.policy__en {
  font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: calc(50 * var(--k)); line-height: 1; letter-spacing: .04em;
  color: #F0A24E; opacity: .55;
  -webkit-text-stroke: calc(2 * var(--k)) rgba(255,255,255,.9); paint-order: stroke fill;
}
.policy__lead {
  margin-top: calc(-10 * var(--k));
  font-size: calc(25 * var(--k)); font-weight: 900; line-height: 1.44;
}
.policy__lead em { color: var(--red); font-size: calc(29 * var(--k)); }

.policy__list { display: grid; gap: calc(38 * var(--k)); }
.pitem { position: relative; }

/* イラストの舞台 */
.pitem__stage {
  position: relative; width: calc(190 * var(--k)); aspect-ratio: 1/1; margin-inline: auto;
  display: grid; place-items: center;
}
.pitem--1 .pitem__stage, .pitem--3 .pitem__stage { margin-right: calc(14 * var(--k)); margin-left: auto; }
.pitem--2 .pitem__stage { margin-left: calc(14 * var(--k)); margin-right: auto; }
.pitem__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,248,235,.55) 62%, transparent);
  box-shadow: inset 0 0 0 calc(3 * var(--k)) rgba(255,255,255,.9);
}
.pitem--1 .pitem__disc { background: radial-gradient(closest-side, #FFF4E6, rgba(255,236,214,.6) 64%, transparent); }
.pitem--2 .pitem__disc { background: radial-gradient(closest-side, #EAF4F8, rgba(226,241,246,.6) 64%, transparent); }
.pitem--3 .pitem__disc { background: radial-gradient(closest-side, #EFF6E7, rgba(232,243,223,.6) 64%, transparent); }
.pitem__main { position: relative; width: 56%; filter: drop-shadow(0 8px 14px rgba(151,112,66,.18)); }
.pitem--3 .pitem__main { width: 52%; }
.pitem__sub { position: absolute; filter: drop-shadow(0 4px 8px rgba(151,112,66,.16)); }
.pitem__sub--a { width: calc(62 * var(--k)); right: calc(-8 * var(--k)); bottom: calc(28 * var(--k)); }
.pitem__sub--b { width: calc(38 * var(--k)); left: calc(2 * var(--k)); top: calc(14 * var(--k)); }

.pitem__wrap { position: relative; margin-top: calc(-18 * var(--k)); }
.pitem__num {
  position: absolute; top: calc(-14 * var(--k)); z-index: 3;
  display: grid; place-items: center;
  width: calc(52 * var(--k)); height: calc(52 * var(--k)); border-radius: 50%;
  color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: calc(20 * var(--k)); line-height: 1;
  box-shadow: 0 4px 0 rgba(0,0,0,.14), var(--sh-m);
}
.pitem__num--1 { left: calc(6 * var(--k));  background: var(--red); }
.pitem__num--2 { right: calc(6 * var(--k)); background: var(--orange); }
.pitem__num--3 { left: calc(6 * var(--k));  background: var(--green); }

.pitem__desc {
  padding: calc(30 * var(--k)) calc(20 * var(--k)) calc(22 * var(--k));
  background: var(--card); border-radius: calc(20 * var(--k));
  box-shadow: var(--sh-m), inset 0 0 0 2px #fff;
}
.pitem--1 .pitem__desc { padding-left: calc(56 * var(--k)); }
.pitem--3 .pitem__desc { padding-left: calc(56 * var(--k)); }
.pitem--2 .pitem__desc { padding-right: calc(56 * var(--k)); }
.pitem__ttl {
  font-size: calc(19 * var(--k)); font-weight: 900; line-height: 1.46;
  margin-bottom: calc(9 * var(--k));
}
/* 見出しは「小さめのリード」＋「大きなキーワード」の2行組みにする */
.pitem__ttl em { display: block; font-size: calc(23 * var(--k)); line-height: 1.34; }
.pitem--1 .pitem__ttl em { color: var(--red); }
.pitem--2 .pitem__ttl em { color: var(--orange); }
.pitem--3 .pitem__ttl em { color: var(--green); }
.pitem__txt { font-size: calc(14.5 * var(--k)); font-weight: 500; line-height: 1.86; color: var(--ink-soft); }

.policy__close {
  margin-top: calc(34 * var(--k)); text-align: center;
  font-size: calc(19 * var(--k)); font-weight: 900; line-height: 1.6;
}
.policy__close em { color: var(--red); }

/* ============================================================
   S5 トコの想い
============================================================ */
.seam--t1 { width: calc(46 * var(--k)); top: calc(24 * var(--k)); left: 3%; }
.seam--t2 { width: calc(84 * var(--k)); bottom: calc(-30 * var(--k)); right: 4%; z-index: 3; }

.profile {
  display: flex; align-items: center; gap: calc(16 * var(--k));
  padding: calc(18 * var(--k)); background: var(--card);
  border-radius: calc(22 * var(--k)); box-shadow: var(--sh-m), inset 0 0 0 2px #fff;
}
.profile__photo {
  position: relative; flex: none;
  width: calc(124 * var(--k)); height: calc(124 * var(--k));
  border-radius: 50%; overflow: visible;
}
.profile__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 42% 26%;
  border-radius: 50%; box-shadow: 0 0 0 calc(4 * var(--k)) #fff, var(--sh-m);
}
.profile__leaf { position: absolute; filter: drop-shadow(0 3px 6px rgba(151,112,66,.18)); }
.profile__leaf--1 { width: calc(30 * var(--k)); top: calc(-16 * var(--k)); left: calc(-14 * var(--k)); }
.profile__leaf--2 { width: calc(24 * var(--k)); bottom: calc(-8 * var(--k)); right: calc(-10 * var(--k)); }
.profile__body { min-width: 0; }
.profile__role { font-size: calc(12.5 * var(--k)); font-weight: 700; color: var(--teal); letter-spacing: .04em; }
.profile__name { font-size: calc(30 * var(--k)); font-weight: 900; line-height: 1.2; color: var(--red); }
.profile__job {
  display: inline-block; margin: calc(5 * var(--k)) 0 calc(7 * var(--k));
  padding: calc(3 * var(--k)) calc(9 * var(--k)); border-radius: 999px;
  background: #FEF0D5; color: #B97D12; font-size: calc(11.5 * var(--k)); font-weight: 700; line-height: 1.4;
}
.profile__txt { font-size: calc(13.5 * var(--k)); font-weight: 500; line-height: 1.76; color: var(--ink-soft); }

.quote {
  position: relative; margin: calc(24 * var(--k)) auto calc(22 * var(--k)); width: fit-content;
  padding: calc(16 * var(--k)) calc(22 * var(--k));
  background: #FFF3E0; border: calc(2.4 * var(--k)) solid #F6B96B;
  border-radius: calc(999 * var(--k));
  text-align: center; font-size: calc(16 * var(--k)); font-weight: 900; line-height: 1.62;
}
.quote em { color: var(--red); font-size: calc(18 * var(--k)); }
.quote__heart { position: absolute; left: calc(-8 * var(--k)); top: calc(-12 * var(--k)); width: calc(26 * var(--k)); }

.tlist { display: grid; gap: calc(10 * var(--k)); }
.titem {
  display: flex; align-items: flex-start; gap: calc(13 * var(--k));
  padding: calc(15 * var(--k)) calc(16 * var(--k));
  background: var(--card); border-radius: calc(16 * var(--k));
  box-shadow: var(--sh-s), inset 0 0 0 2px #fff;
  font-size: calc(15 * var(--k)); font-weight: 700; line-height: 1.66;
}
.titem em { color: var(--red); }
.titem__ic {
  flex: none; display: grid; place-items: center; margin-top: calc(1 * var(--k));
  width: calc(44 * var(--k)); height: calc(44 * var(--k)); border-radius: 50%; color: #fff;
}
.titem__ic svg { width: 66%; height: 66%; }
.titem__ic--y { background: var(--yellow); }
.titem__ic--g { background: var(--green); }
.titem__ic--b { background: var(--teal); }

.tclose {
  margin-top: calc(24 * var(--k)); text-align: center;
  font-size: calc(17 * var(--k)); font-weight: 900; line-height: 1.62;
}

/* ============================================================
   S6 ママ・パパの声
============================================================ */
.sec--voice { padding-block: calc(56 * var(--k)); }
.voice {
  position: relative;
  padding: calc(34 * var(--k)) calc(22 * var(--k)) calc(32 * var(--k));
  background: linear-gradient(180deg, rgba(255,252,245,.94), rgba(255,246,232,.9));
  border-radius: calc(28 * var(--k));
  box-shadow: var(--sh-m), inset 0 0 0 calc(3 * var(--k)) #fff;
  text-align: center;
}
.voice__lead { font-size: calc(15.5 * var(--k)); font-weight: 700; line-height: 1.66; color: var(--ink-soft); }
.voice__big { margin-top: calc(4 * var(--k)); font-size: calc(30 * var(--k)); font-weight: 900; line-height: 1.36; }
.voice__big em { color: var(--red); font-size: calc(38 * var(--k)); }
.voice__list { display: grid; gap: calc(12 * var(--k)); margin-top: calc(22 * var(--k)); text-align: left; }
.voice__list li {
  position: relative; padding-left: calc(24 * var(--k));
  font-size: calc(14.5 * var(--k)); font-weight: 500; line-height: 1.86; color: var(--ink-soft);
}
.voice__list li::before {
  content: ""; position: absolute; left: calc(6 * var(--k)); top: calc(11 * var(--k));
  width: calc(9 * var(--k)); height: calc(9 * var(--k)); border-radius: 50%; background: var(--orange);
}
.voice__list em { color: var(--red); font-weight: 700; }
.voice__il { position: absolute; }
.voice__il--1 { width: calc(40 * var(--k)); top: calc(-18 * var(--k)); left: calc(14 * var(--k)); }
.voice__il--2 { width: calc(74 * var(--k)); bottom: calc(-26 * var(--k)); right: calc(10 * var(--k)); }
.voice__il--3 { width: calc(34 * var(--k)); top: calc(-16 * var(--k)); right: calc(22 * var(--k)); }

/* ============================================================
   S7 体験会詳細
============================================================ */
.sec--detail { padding-top: calc(88 * var(--k)); }
.seam--d1 { width: calc(46 * var(--k)); top: calc(44 * var(--k)); left: 3%; }

.dlist { display: grid; gap: calc(16 * var(--k)); }
.dcard {
  position: relative; overflow: hidden;
  padding: calc(18 * var(--k)) calc(17 * var(--k)) calc(20 * var(--k));
  background: var(--card); border-radius: calc(24 * var(--k));
  box-shadow: var(--sh-l), inset 0 0 0 calc(3 * var(--k)) #fff;
}
.dcard--a { background: linear-gradient(180deg, #FFF9F2, #FFFCF7); }
.dcard--b { background: linear-gradient(180deg, #FFFAF0, #FFFDF8); }
.dcard__top { display: flex; align-items: center; gap: calc(13 * var(--k)); }
.dcard__head { min-width: 0; }
.dcard__ttl { font-size: calc(20 * var(--k)); font-weight: 900; line-height: 1.4; }
.dcard__ttl .en { font-family: "Baloo 2", "Zen Maru Gothic", sans-serif; letter-spacing: .01em; }
.dcard--a .dcard__ttl .en { color: var(--red); }
.dcard--b .dcard__ttl .en { color: var(--orange); }
.dcard .dotline { margin-block: calc(14 * var(--k)); }
.dcard__txt { font-size: calc(14.5 * var(--k)); font-weight: 500; line-height: 1.84; color: var(--ink-soft); }
.dcard__prep {
  margin-top: calc(14 * var(--k)); padding: calc(13 * var(--k)) calc(15 * var(--k));
  background: rgba(255,243,224,.82); border-radius: calc(13 * var(--k));
  display: grid; gap: calc(6 * var(--k));
}
.dcard__prep::before {
  content: "ご準備いただくもの"; display: block;
  font-size: calc(12.5 * var(--k)); font-weight: 900; color: var(--brown); letter-spacing: .05em;
}
.dcard__prep li {
  position: relative; padding-left: calc(17 * var(--k));
  font-size: calc(13.5 * var(--k)); font-weight: 500; line-height: 1.7; color: var(--ink-soft);
}
.dcard__prep li::before {
  content: ""; position: absolute; left: calc(3 * var(--k)); top: calc(9 * var(--k));
  width: calc(7 * var(--k)); height: calc(7 * var(--k)); border-radius: 50%; background: var(--orange);
}
.dcard__il { position: absolute; pointer-events: none; }
.dcard__il--book { width: calc(46 * var(--k)); right: calc(14 * var(--k)); top: calc(96 * var(--k)); opacity: .9; }
.dcard__il--sq   { width: calc(72 * var(--k)); right: calc(10 * var(--k)); bottom: calc(8 * var(--k)); }
.dcard__il--mp   { width: calc(30 * var(--k)); right: calc(14 * var(--k)); top: calc(14 * var(--k)); opacity: .8; }
.dcard__il--rabbit { width: calc(52 * var(--k)); right: calc(12 * var(--k)); bottom: calc(8 * var(--k)); }
.dcard__il--bs   { width: calc(42 * var(--k)); right: calc(16 * var(--k)); top: calc(98 * var(--k)); opacity: .9; }
.dcard__il--mp2  { width: calc(28 * var(--k)); right: calc(15 * var(--k)); top: calc(12 * var(--k)); opacity: .8; }

.dsafe {
  position: relative; display: flex; align-items: center; gap: calc(12 * var(--k));
  margin-top: calc(26 * var(--k));
}
.dsafe__photo { flex: none; width: calc(88 * var(--k)); height: calc(88 * var(--k)); }
.dsafe__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  border-radius: 50%; box-shadow: 0 0 0 calc(4 * var(--k)) #fff, var(--sh-m);
}
.dsafe__bubble {
  position: relative; flex: 1 1 auto;
  padding: calc(14 * var(--k)) calc(16 * var(--k));
  background: #EAF4F8; border-radius: calc(18 * var(--k));
  font-size: calc(15.5 * var(--k)); font-weight: 900; line-height: 1.6;
  box-shadow: var(--sh-s);
}
.dsafe__bubble em { color: var(--teal); }
.dsafe__bubble::before {
  content: ""; position: absolute; left: calc(-11 * var(--k)); top: calc(30 * var(--k));
  border: calc(8 * var(--k)) solid transparent; border-right-color: #EAF4F8;
}
.dsafe__note {
  display: block; margin-top: calc(7 * var(--k)); padding-top: calc(7 * var(--k));
  border-top: 2px dotted rgba(99,175,201,.5);
  font-size: calc(12.5 * var(--k)); font-weight: 500; line-height: 1.62; color: var(--ink-soft);
}
.dsafe__note b { color: var(--teal); font-weight: 900; }

.detail__cta { margin-top: calc(30 * var(--k)); }

/* ============================================================
   S8 ご参加にあたって
============================================================ */
.seam--j1 { width: calc(40 * var(--k)); top: calc(34 * var(--k)); right: 4%; opacity: .8; }

.jlist { display: grid; gap: calc(9 * var(--k)); }
.jlist li {
  position: relative; padding: calc(13 * var(--k)) calc(15 * var(--k)) calc(13 * var(--k)) calc(34 * var(--k));
  background: rgba(255,253,246,.86); border-radius: calc(13 * var(--k));
  box-shadow: var(--sh-s);
  font-size: calc(14 * var(--k)); font-weight: 500; line-height: 1.76; color: var(--ink-soft);
}
.jlist li::before {
  content: ""; position: absolute; left: calc(14 * var(--k)); top: calc(20 * var(--k));
  width: calc(9 * var(--k)); height: calc(9 * var(--k)); border-radius: 50%;
  background: var(--teal);
}

.faq { margin-top: calc(20 * var(--k)); }
.acc {
  background: var(--card); border-radius: calc(18 * var(--k));
  box-shadow: var(--sh-s), inset 0 0 0 2px #fff; overflow: hidden;
}
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--k));
  width: 100%; padding: calc(17 * var(--k)) calc(18 * var(--k));
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: calc(16 * var(--k)); font-weight: 900; color: var(--ink);
}
.acc__mark {
  position: relative; flex: none; width: calc(26 * var(--k)); height: calc(26 * var(--k));
  border-radius: 50%; background: var(--orange);
}
.acc__mark::before, .acc__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px;
  transform: translate(-50%,-50%); transition: transform .3s var(--ez);
}
.acc__mark::before { width: calc(12 * var(--k)); height: calc(2.6 * var(--k)); }
.acc__mark::after  { width: calc(2.6 * var(--k)); height: calc(12 * var(--k)); }
.acc.is-open .acc__mark::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.acc__body { overflow: hidden; }
.acc.is-open .acc__body { animation: accOpen .34s var(--ez) forwards; }
.acc.is-close .acc__body { animation: accClose .3s var(--ez) forwards; }
@keyframes accOpen  { 0% { height: 0; } 99% { height: var(--acc-h); } 100% { height: auto; } }
@keyframes accClose { 0% { height: var(--acc-h); } 100% { height: 0; } }
.acc__inner { padding: 0 calc(18 * var(--k)) calc(20 * var(--k)); }
.acc__inner dt {
  margin-top: calc(14 * var(--k)); padding-top: calc(14 * var(--k));
  border-top: 2px dotted rgba(192,138,84,.34);
  font-size: calc(14.5 * var(--k)); font-weight: 900; color: var(--ink);
}
.acc__inner dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.acc__inner dd {
  margin-top: calc(5 * var(--k));
  font-size: calc(13.5 * var(--k)); font-weight: 500; line-height: 1.8; color: var(--ink-soft);
}

/* ============================================================
   S9 最後のCTA
============================================================ */
.sec--last { padding-block: calc(70 * var(--k)) calc(104 * var(--k)); }
.lastglow {
  position: absolute; inset: calc(20 * var(--k)) -20% auto; height: 80%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 50% 30%, rgba(255,255,255,.9), transparent 72%),
    radial-gradient(46% 32% at 18% 60%, rgba(255,196,77,.4), transparent 72%),
    radial-gradient(46% 32% at 84% 46%, rgba(238,90,60,.2), transparent 72%);
  filter: blur(8px);
}
.seam--l1 { width: calc(50 * var(--k)); top: calc(18 * var(--k)); left: 4%; }
.seam--l2 { width: calc(42 * var(--k)); top: calc(64 * var(--k)); right: 5%; }

.last {
  position: relative;
  padding: calc(40 * var(--k)) calc(20 * var(--k)) calc(32 * var(--k));
  background: rgba(255,253,247,.9);
  border-radius: calc(30 * var(--k));
  box-shadow: var(--sh-l), inset 0 0 0 calc(3 * var(--k)) #fff;
  text-align: center;
}
.last__book { position: absolute; top: calc(-26 * var(--k)); left: 50%; width: calc(56 * var(--k)); transform: translateX(-50%); }
.last__lead { font-size: calc(14.5 * var(--k)); font-weight: 500; line-height: 1.86; color: var(--ink-soft); }
.last__lead em { color: var(--red); font-weight: 900; }
.last__big { margin-top: calc(12 * var(--k)); font-size: calc(27 * var(--k)); font-weight: 900; line-height: 1.44; }
.last__big em { color: var(--red); }
.last__sub { margin-top: calc(10 * var(--k)); font-size: calc(13.5 * var(--k)); font-weight: 500; line-height: 1.8; color: var(--ink-soft); }

.last__dates { display: flex; justify-content: center; gap: calc(10 * var(--k)); margin: calc(20 * var(--k)) 0 calc(22 * var(--k)); }
.last__dates li {
  display: grid; place-items: center; gap: 0;
  padding: calc(11 * var(--k)) calc(14 * var(--k));
  background: #FFF3E4; border-radius: calc(15 * var(--k)); line-height: 1;
  box-shadow: var(--sh-s);
}
.last__dates b { font-size: calc(23 * var(--k)); font-weight: 900; color: var(--red); }
.last__dates i { font-style: normal; font-size: calc(10.5 * var(--k)); font-weight: 700; color: var(--brown); letter-spacing: .08em; margin-top: calc(3 * var(--k)); }
.last__dates span { font-family: "Baloo 2", sans-serif; font-size: calc(12.5 * var(--k)); font-weight: 700; color: var(--ink-soft); margin-top: calc(6 * var(--k)); }
.last__note { margin-top: calc(13 * var(--k)); font-size: calc(12.5 * var(--k)); font-weight: 700; color: var(--ink-thin); }

/* ============================================================
   フッター
============================================================ */
.foot {
  position: relative; z-index: 2; text-align: center;
  padding: calc(34 * var(--k)) 20px calc(92 * var(--k));
  background: linear-gradient(180deg, transparent, rgba(247,225,192,.55));
}
.foot__brand {
  font-family: "Baloo 2", "Zen Maru Gothic", sans-serif; font-weight: 800;
  font-size: calc(26 * var(--k)); line-height: 1.2; color: var(--red);
}
.foot__txt { margin-top: calc(6 * var(--k)); font-size: calc(13 * var(--k)); font-weight: 700; color: var(--ink-soft); }
.foot__copy { margin-top: calc(14 * var(--k)); font-size: calc(11.5 * var(--k)); color: var(--ink-thin); }

/* ============================================================
   下部固定CTA
============================================================ */
.fixcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: calc(10 * var(--k)) 14px calc(12 * var(--k));
  padding-bottom: max(calc(12 * var(--k)), env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,247,232,0), rgba(255,247,232,.94) 46%);
  transform: translateY(115%); opacity: 0; visibility: hidden;
  transition: transform .42s var(--ez), opacity .32s var(--ez), visibility .32s;
}
.fixcta.is-show { transform: translateY(0); opacity: 1; visibility: visible; }
.linecta-img--mini { max-width: calc(280 * var(--k)); }

/* ============================================================
   スクロール連動アニメーション（ゴンチャの js-fade 系にあたる部分）
============================================================ */
[data-anim] {
  opacity: 0;
  transition:
    opacity .72s var(--ez) var(--d, 0ms),
    transform .82s var(--ez) var(--d, 0ms),
    filter .72s var(--ez) var(--d, 0ms);
  will-change: opacity, transform;
}
[data-anim="up"]    { transform: translateY(28px); }
[data-anim="left"]  { transform: translate(-26px, 12px); }
[data-anim="right"] { transform: translate(26px, 12px); }
[data-anim="zoom"]  { transform: scale(.9); }
[data-anim="pop"]   { transform: scale(.82) translateY(14px); }
[data-anim="blur"]  { transform: scale(1.06); filter: blur(9px); }

[data-anim].is-in {
  opacity: 1; transform: none; filter: none;
}
[data-anim="pop"].is-in { animation: popIn .74s var(--ez) var(--d, 0ms) both; }
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.82) translateY(14px); }
  62%  { opacity: 1; transform: scale(1.035) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* FVの登場（body.is-loaded を起点にする） */
[data-fv] { opacity: 0; transform: translateY(20px); }
body.is-loaded [data-fv] {
  animation: fvIn .9s var(--ez) both;
  animation-delay: calc(var(--fvd, 0) * 1ms);
}
[data-fv="1"] { --fvd: 120; } [data-fv="2"] { --fvd: 240; }
[data-fv="5"] { --fvd: 780; } [data-fv="6"] { --fvd: 900; }
[data-fv="7"] { --fvd: 1010; } [data-fv="8"] { --fvd: 1140; }
@keyframes fvIn {
  0%   { opacity: 0; transform: translateY(20px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 文字の動き ----
   読ませたい本文は動かさず、見せ場の文字だけに動きをつけている */

/* FVタイトル「無料体験会」を1文字ずつ、スタンプを押すように着地させる */
.fv__ttl .ch { opacity: 0; }
body.is-loaded .fv__ttl .ch {
  animation: chStamp .6s var(--ez) both;
  animation-delay: calc(var(--i) * 90ms + 360ms);
}
@keyframes chStamp {
  0%   { opacity: 0; transform: translateY(-16px) scale(1.34) rotate(-5deg); }
  58%  { opacity: 1; transform: translateY(0) scale(.94) rotate(1.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* 「選べる2つの体験会！」の 2 だけ、少し遅れて弾ませる */
.fv__pick b { display: inline-block; }
body.is-loaded .fv__pick b { animation: numPop .66s var(--ez) 1040ms both; }
@keyframes numPop {
  0%   { opacity: 0; transform: scale(.4) rotate(-14deg); }
  62%  { opacity: 1; transform: scale(1.2) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* セクション見出しの手描き下線を、左から右へ引く
   （stroke-dasharray は継承されるので <use> の中身にも効く） */
.sec-head__ul { stroke-dasharray: 215; stroke-dashoffset: 215; }
.sec-head.is-in .sec-head__ul { animation: drawUl .8s var(--ez) .34s forwards; }
@keyframes drawUl { to { stroke-dashoffset: 0; } }

/* 最後の大きなコピーは、行ごとに続けて出す */
.last__big .ln { display: block; }

/* ============================================================
   イラスト用のゆるやかな常時アニメーション
============================================================ */
.sway        { animation: sway 4.4s ease-in-out infinite; transform-origin: 50% 8%; }
.sway-slow   { animation: sway 6.6s ease-in-out infinite -1.6s; transform-origin: 50% 8%; }
@keyframes sway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.bob         { animation: bob 3.4s ease-in-out infinite; }
.bob-2       { animation: bob 4.2s ease-in-out infinite -1.1s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.float-slow  { animation: floaty 7.2s ease-in-out infinite; }
@keyframes floaty {
  0%,100% { transform: translate(0,0) rotate(-3deg); }
  33%     { transform: translate(4px,-9px) rotate(3deg); }
  66%     { transform: translate(-4px,-4px) rotate(-1deg); }
}

.breathe     { animation: breathe 2.9s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes breathe {
  0%,100% { transform: scale(1) translateY(0); }
  42%     { transform: scale(1.045, .965) translateY(2px); }
  70%     { transform: scale(.99, 1.02) translateY(-3px); }
}

.twinkle     { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(.76); opacity: .55; }
}

.twinkle-rot { animation: twinkleRot 5.2s ease-in-out infinite; }
@keyframes twinkleRot {
  0%,100% { transform: rotate(-8deg) translateY(0); }
  50%     { transform: rotate(8deg) translateY(-5px); }
}

/* ============================================================
   PC（横に広がったとき）の微調整
============================================================ */
/* 画面のせまい端末（iPhone SEなど）では、
   バッジと絵を少し小さくして、見出しが変な位置で折り返さないようにする */
@media (max-width: 359px) {
  /* 狭い画面では、写真とタイトルが取り合いにならないよう両方少し詰める */
  .fv__toko { width: 36%; }
  .datecard { padding: calc(10 * var(--k)); gap: calc(8 * var(--k)); }
  .datecard__ttl { font-size: calc(14 * var(--k)); }
  .datecard .dbadge { width: calc(52 * var(--k)); }
  .datecard__il, .datecard__il[src$="il-rabbit-white.png"] { display: none; }
  .fv__arc text { font-size: 27px; }
  .fv__lead2 { font-size: calc(19 * var(--k)); }
  .fv__brand { font-size: calc(36 * var(--k)); }
  .fv__ttl-line--1 { font-size: calc(76 * var(--k)); }
  .fv__ttl-line--2 { font-size: calc(64 * var(--k)); }

  .datecard { gap: calc(10 * var(--k)); padding: calc(13 * var(--k)) calc(12 * var(--k)); }
  .dbadge { width: calc(64 * var(--k)); padding-bottom: calc(12 * var(--k)); }
  .dbadge__disc b { font-size: calc(21 * var(--k)); }
  .dbadge__time { font-size: calc(12 * var(--k)); padding-inline: calc(7 * var(--k)); }
  .datecard__ttl { font-size: calc(17 * var(--k)); }
  .datecard__il { width: calc(36 * var(--k)); }
  .datecard__il[src$="il-rabbit-white.png"] { width: calc(32 * var(--k)); }

  .wfoot__toko { width: 27%; }
  .wfoot__say .l { font-size: calc(16 * var(--k)); }
  .l--mark { font-size: calc(18 * var(--k)) !important; }
}

/* 画面が広くても、日程カードは横に並べず1列のまま。
   2列にすると見出しが「親子で楽し／む／絵本」のように不自然に折り返すため */
@media (min-width: 700px) {
  .fv__inner { width: min(100% - 24px, 540px); }
  }

/* 白うさぎはクリーム色の背景に埋もれやすいので、
   やわらかい影をつけて少しだけ浮かせる */
img[src$="il-rabbit-white.png"] {
  filter: drop-shadow(0 3px 7px rgba(151,112,66,.28));
}

/* ============================================================
   動きを減らす設定への対応
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  [data-anim], [data-fv], .fv__ttl .ch, .wfoot__say .l, .fv__toko { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sec-head__ul { stroke-dashoffset: 0 !important; }
  .l--mark .mark { transform: scaleX(1) !important; }
  .drift, .fv__fall, .sunburst { display: none !important; }
  .acc__body { height: auto !important; }
}