@charset "utf-8";
/**
 * youji-pre 教材例（生まれ月まで考慮した 成長にぴったりな学び／ペンの持ち方から）
 *
 * .egc 以下は、モック（smilezemi-site/modules/youji/egc/egc.css）をそのまま移したもの。
 * モックは スマホ幅 375px で作っているので、数値はそのまま使い、.l-sect-eg の zoom で
 * ページ（750px 基準。.c-zoom-wrapper が画面幅に合わせて縮める）と同じ大きさにそろえる。
 * そのため、モックの vw は 375px のときの値（1vw = 3.75px）に置き換えている。
 * 階段は 3D（three.js）をやめて画像にし、縦に6つに切って1段ずつせり上がる動きを CSS でつけている（末尾）。
 */

/* ========================================
 * セクション
 * ======================================== */
.l-sect-eg {
  zoom: 2;
  position: relative;
  padding: 32px 20px 44px;
  background: linear-gradient(#fdf8f1 0, #fdf8f1 60%, #fff 100%);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: normal;
  color: #333;
}
.l-sect-eg .egc__title,
.l-sect-eg .egc__ana-ch {
  font-family: var(--font-family-maru-bold);
}

/* 奥の小さなバブル：ぼかした淡い丸。ゆっくり上下に漂う */
.l-sect-eg .bgb {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: calc(var(--bs) * 1px);
  height: calc(var(--bs) * 1px);
  border-radius: 50%;
  background: rgba(var(--bc), .42);
  filter: blur(var(--bl, 2.5px));
  opacity: .75;
  animation: bgb-float var(--bd, 8s) ease-in-out infinite alternate;
}
@keyframes bgb-float {
  from { translate: 0 0; }
  to { translate: 4px -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-sect-eg .bgb { animation: none; }
}

/* ========================================
 * 教材例（モックの egc.css）
 * ======================================== */
/* ===== 教材例 B：カード＋人物（生まれ月まで考慮した 成長にぴったりな学び） =====
   背景＝教材画面のカードの束（前のカードが抜けて次の教材が出てくるカルーセル）
   まわり＝教材のアイコン（丸）。カードが変わると、その教科のアイコンがぽんと跳ねる
   手前＝人物の切り抜き（今はダミーの枠。あとで画像に差し替え） */
.egc { position: relative; padding: 28px 0 0; text-align: center; color: #4a3a34; }
.egc__title { display: inline-block; position: relative; margin: 0; padding-left: 50px; text-align: left; font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: .04em; color: #4a3a34; }
.egc__new { position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #E8412F; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; font-family: "Helvetica Neue", Arial, sans-serif; }
.egc__sub { margin: 14px 0 0; font-size: 14px; line-height: 1.85; color: #6a5a52; }

/* ステージ：カードの束・アイコン・人物を重ねる */
.egc__stage { position: relative; height: 470px; margin: 22px -20px 0; overflow: hidden; }

/* カードの束 */
.egc__deck { position: absolute; left: 50%; top: 18px; width: 84%; aspect-ratio: 1.66; transform: translateX(-50%); }
.egc__card {
  position: absolute; inset: 0; padding: 4.5%; border-radius: 18px; background: #fff;
  box-shadow: 0 6px 18px rgba(90, 60, 40, .14);
  transition: transform .7s cubic-bezier(.3, .9, .3, 1), opacity .5s ease;
  will-change: transform, opacity;
}
.egc__card > img, .egc__card > video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: #f4f0ea; }
.egc__card[data-pos="0"] { z-index: 5; transform: none; opacity: 1; }
.egc__card[data-pos="1"] { z-index: 4; transform: translate(4%, -5%) rotate(4deg) scale(.95); opacity: 1; }
.egc__card[data-pos="2"] { z-index: 3; transform: translate(-4%, -7%) rotate(-4deg) scale(.92); opacity: 1; }
.egc__card[data-pos="3"], .egc__card[data-pos="4"], .egc__card[data-pos="5"] { z-index: 1; transform: translate(0, -8%) scale(.9); opacity: 0; }
.egc__card.is-out { z-index: 6; transform: translate(-115%, 6%) rotate(-12deg); opacity: 0; }   /* 前のカードが左へ抜ける */

/* 教材のアイコン（丸）。外側＝出てくる・ふわふわ、内側<b>＝カードが変わったときに跳ねる */
.egc__icon { position: absolute; z-index: 7; display: block; width: var(--egc-s, var(--s, 56px)); height: var(--egc-s, var(--s, 56px)); opacity: 0; transform: scale(.2); }
.egc__icon b {
  position: absolute; inset: 0; border-radius: 50%; background: var(--c, #4097F7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.egc__icon b::after { /* 光沢 */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .15) 10%, rgba(255, 255, 255, 0) 22%);
}
.egc__icon img { position: absolute; inset: 19%; width: 62%; height: 62%; }
.egc.is-in .egc__icon { animation: egcIn .6s cubic-bezier(.3, 1.5, .5, 1) both, egcFloat 4.5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .12s + .2s), calc(var(--d, 0) * .4s + .8s); }
.egc__icon.is-hit b { animation: egcHit .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes egcIn { from { opacity: 0; transform: scale(.2); } to { opacity: var(--o, 1); transform: scale(1); } }
@keyframes egcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes egcHit { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* 人物（ダミーの枠。差し替えは .egc__kid を <img class="egc__kid" src="…" alt="…"> にするだけ） */
.egc__kid { position: absolute; z-index: 8; left: 50%; bottom: 40px; width: 62%; height: 300px; transform: translateX(-56%); }
div.egc__kid {
  display: grid; place-items: center; box-sizing: border-box; border: 2px dashed #c9b8a8; border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, .55); color: #a08876; font-size: 13px; font-weight: 700; line-height: 1.6;
}
img.egc__kid { height: auto; max-height: 360px; object-fit: contain; object-position: 50% 100%; }

.egc__note { margin: 16px 0 0; padding: 0 4px; text-align: left; font-size: 12px; font-weight: 700; line-height: 1.7; color: #333; }

@media (prefers-reduced-motion: reduce) {
  .egc__card { transition: none; }
  .egc.is-in .egc__icon { animation: none; opacity: var(--o, 1); transform: none; }
}

/* 階段（three.js の 3D）：人物の足もと。アイコンより後ろ、人物より後ろ。下端は背景色へなじませる */
.egc__stairs { position: absolute; z-index: 6; left: 0; bottom: 0; display: block; width: 100%; height: 210px; pointer-events: none; }
.egc__stage::after {
  content: ""; position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: 46px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(253, 248, 241, 0), #fdf8f1);
}
.egc__stairs { height: 250px; }
.egc__kid { bottom: 70px; height: 290px; }

/* ===== ひらがなの練習も ペンの持ち方から丁寧に（教材例 B の続き） =====
   右＝正方形のカードの束（ペンの使い方 → うんぴつ → ひらがなの読み がカルーセル）。下の見出しも切り替わる
   左下＝女の子の写真（今はダミーの枠。あとで差し替え） */
.egc--pen { padding-top: 56px; }
.egc--pen .egc__title { padding-left: 0; text-align: center; font-size: 25px; color: #222; }
.egc--pen .egc__stage { height: 430px; }
.egc--pen .egc__deck { left: auto; right: 6%; top: 26px; width: 56%; aspect-ratio: 1; transform: none; }
.egc--pen .egc__card { padding: 4%; border-radius: 22px; }
.egc--pen .egc__card > img { border-radius: 14px; }
.egc--pen .egc__card[data-pos="1"] { transform: translate(8%, 2%) rotate(7deg) scale(.94); }
.egc--pen .egc__card[data-pos="2"] { transform: translate(-9%, 3%) rotate(-7deg) scale(.92); }
.egc--pen .egc__cap { position: absolute; z-index: 7; left: 0; right: 0; top: calc(100% + 16px); margin: 0; font-size: 16px; font-weight: 800; color: #222; letter-spacing: .04em; text-align: center; }
.egc__cap.is-swap { animation: egcCap .5s ease both; }
@keyframes egcCap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.egc--pen .egc__kid { left: 0; bottom: 0; width: 52%; height: 260px; transform: none; border-radius: 0 16px 0 0; }

/* ===== カルーセルをTOPの学年カードと同じ「アーチ」に（2026/10/20）：遠く下に回転軸を置き、右から中央・中央から左へ弧を描いて流れる ===== */
.egc .egc__card { transform-origin: 50% 400%; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.egc .egc__card[data-d="0"]  { z-index: 5; transform: none; opacity: 1; }
.egc .egc__card[data-d="1"]  { z-index: 4; transform: rotate(13deg) scale(.92); opacity: 1; }
.egc .egc__card[data-d="-1"] { z-index: 4; transform: rotate(-13deg) scale(.92); opacity: 1; }
.egc .egc__card[data-d="2"]  { z-index: 1; transform: rotate(26deg) scale(.85); opacity: 0; }
.egc .egc__card[data-d="-2"] { z-index: 1; transform: rotate(-26deg) scale(.85); opacity: 0; }
.egc .egc__card.is-jump { transition: none !important; }
/* 前の「束」の重ね方（data-pos）は使わない */
.egc .egc__card[data-pos] { }
.egc--pen .egc__card[data-d="1"]  { transform: rotate(14deg) scale(.9); }
.egc--pen .egc__card[data-d="-1"] { transform: rotate(-14deg) scale(.9); }

/* 男の子（切り抜き）：階段の上で、片足を次の段にかける位置に */
img.egc__kid--boy { left: 30%; bottom: 58px; width: 46%; height: auto; max-height: none; transform: translateX(-50%); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .12)); }

/* 階段：横から見た柱の段。下は白へフェード（キャンバス自体をマスク＋ステージの下端も白へ） */
.egc__stairs { height: 270px; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.egc__stage::after { height: 70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); }
.egc:not(.egc--pen) .egc__note { margin-top: 0; padding-top: 10px; background: #fff; }
img.egc__kid--boy { left: 30%; bottom: 105px; width: 44%; }

/* アーチを弱く（回転軸をもっと遠くに・傾きを小さく） */
.egc .egc__card { transform-origin: 50% 700%; }
.egc .egc__card[data-d="1"]  { transform: rotate(6deg) scale(.94); }
.egc .egc__card[data-d="-1"] { transform: rotate(-6deg) scale(.94); }
.egc .egc__card[data-d="2"]  { transform: rotate(12deg) scale(.88); }
.egc .egc__card[data-d="-2"] { transform: rotate(-12deg) scale(.88); }
.egc--pen .egc__card[data-d="1"]  { transform: rotate(7deg) scale(.92); }
.egc--pen .egc__card[data-d="-1"] { transform: rotate(-7deg) scale(.92); }
/* カルーセルの左右はフェードで切る（カードの帯だけにマスク。アイコン・人物・階段は切らない） */
.egc__track { position: absolute; inset: 0; z-index: 5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
/* 教材画面の白い縁を狭く */
.egc .egc__card { padding: 2%; border-radius: 14px; }
.egc .egc__card > img, .egc .egc__card > video { border-radius: 9px; }
.egc--pen .egc__card { padding: 2.2%; border-radius: 16px; }
.egc--pen .egc__card > img { border-radius: 11px; }
/* ペンのカードは右寄せなので、右側は端だけフェード */
.egc--pen .egc__track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 96%, transparent 100%); }
/* アイコンの位置は指示画像どおり（カードの右下〜階段のまわり）。手前の赤・黄は階段より前 */
.egc__icon { z-index: 7; }
/* 階段が半透明に見えないように：キャンバスのマスク（透過）をやめ、白いグラデーションを上に重ねてフェードさせる。
   フェードはアイコンより後ろ（アイコンは消えない） */
.egc__stairs { -webkit-mask-image: none; mask-image: none; }
.egc__stage::after { z-index: 6; height: 120px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .85) 60%, #fff 100%); }

/* アーチをさらに弱く：回転軸の工夫をやめ、左右へ横に並べて、ほんの少しだけ下げて傾ける */
.egc .egc__card { transform-origin: 50% 50%; }
.egc .egc__card[data-d="1"]  { transform: translate(96%, 7%) rotate(3deg) scale(.88); }
.egc .egc__card[data-d="-1"] { transform: translate(-96%, 7%) rotate(-3deg) scale(.88); }
.egc .egc__card[data-d="2"]  { transform: translate(190%, 16%) rotate(6deg) scale(.8); }
.egc .egc__card[data-d="-2"] { transform: translate(-190%, 16%) rotate(-6deg) scale(.8); }
.egc--pen .egc__card[data-d="1"]  { transform: translate(98%, 6%) rotate(3deg) scale(.88); }
.egc--pen .egc__card[data-d="-1"] { transform: translate(-98%, 6%) rotate(-3deg) scale(.88); }

/* 階段より下（注釈・ペンの持ち方）は白い背景に。セクションの左右・下の余白まで白でおおう */
.egc:not(.egc--pen) .egc__note { margin: 0 -20px; padding: 10px 24px 0; background: #fff; }
.egc--pen { margin: 0 -20px -44px; padding: 56px 20px 44px; background: #fff; }

/* カルーセルをTOPの学年カードに寄せる：中央のカードを少し細く（76%）、左右のカードはすぐ後ろから端がのぞく程度。
   左右は白っぽく薄く（TOPと同じ）、傾きはごくわずか */
.egc:not(.egc--pen) .egc__deck { width: 76%; }
.egc .egc__card { transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .5s ease, filter .5s ease; }
.egc .egc__card[data-d="1"]  { transform: translate(100%, 4%) rotate(3deg) scale(.95); opacity: .5; }
.egc .egc__card[data-d="-1"] { transform: translate(-100%, 4%) rotate(-3deg) scale(.95); opacity: .5; }
.egc .egc__card[data-d="2"]  { transform: translate(200%, 10%) rotate(6deg) scale(.9); opacity: 0; }
.egc .egc__card[data-d="-2"] { transform: translate(-200%, 10%) rotate(-6deg) scale(.9); opacity: 0; }
.egc--pen .egc__card[data-d="1"]  { transform: translate(102%, 4%) rotate(3deg) scale(.95); opacity: .5; }
.egc--pen .egc__card[data-d="-1"] { transform: translate(-102%, 4%) rotate(-3deg) scale(.95); opacity: .5; }
.egc .egc__card[data-d="0"] { box-shadow: 0 4px 16px rgba(90, 60, 40, .16); }

/* 左右のカードはTOPの学年カードのように、中央のカードの後ろに重なってのぞく（白っぽく薄く） */
.egc .egc__card[data-d="1"]  { transform: translate(58%, 5%) rotate(4deg) scale(.86); opacity: 1; filter: saturate(.5) brightness(1.12); }
.egc .egc__card[data-d="-1"] { transform: translate(-58%, 5%) rotate(-4deg) scale(.86); opacity: 1; filter: saturate(.5) brightness(1.12); }
.egc .egc__card[data-d="2"]  { transform: translate(110%, 12%) rotate(8deg) scale(.78); opacity: 0; }
.egc .egc__card[data-d="-2"] { transform: translate(-110%, 12%) rotate(-8deg) scale(.78); opacity: 0; }
.egc--pen .egc__card[data-d="1"]  { transform: translate(40%, 5%) rotate(5deg) scale(.86); opacity: 1; filter: saturate(.5) brightness(1.12); }
.egc--pen .egc__card[data-d="-1"] { transform: translate(-40%, 5%) rotate(-5deg) scale(.86); opacity: 1; filter: saturate(.5) brightness(1.12); }

/* ペンの持ち方：女の子の写真は左に大きく敷く（右側は写真自体が白へフェードしている）。カードはその上に重なる */
.egc--pen .egc__stage { height: 470px; margin-left: -20px; margin-right: -20px; }
img.egc__kid--girl { z-index: 1; left: 0; bottom: 0; width: 78%; height: auto; max-height: none; transform: none; border: 0; border-radius: 0; object-fit: cover; }
.egc--pen .egc__track { z-index: 5; }
.egc--pen .egc__deck { top: 10px; right: 5%; width: 54%; }
.egc--pen img.egc__kid--girl { width: 72% !important; height: auto !important; bottom: 0; }
/* ペンの持ち方：左右のカードは見本どおり、中央のカードのすぐ後ろで少し傾いてのぞく程度（女の子の顔にかからない） */
.egc--pen .egc__card[data-d="1"]  { transform: translate(9%, 4%) rotate(6deg) scale(.94); filter: none; }
.egc--pen .egc__card[data-d="-1"] { transform: translate(-9%, 4%) rotate(-6deg) scale(.94); filter: none; }
.egc--pen .egc__card[data-d="2"]  { transform: translate(20%, 8%) rotate(12deg) scale(.9); }
.egc--pen .egc__card[data-d="-2"] { transform: translate(-20%, 8%) rotate(-12deg) scale(.9); }
.egc--pen .egc__track { -webkit-mask-image: none; mask-image: none; }

/* ペンの持ち方：見本レイアウト（女の子の写真を左に大きく、カードは右寄り。左のカードは写真の上に重なってのぞき、右のカードは画面の端で切れる） */
.egc--pen .egc__stage { height: 540px; }
.egc--pen img.egc__kid--girl { width: 82% !important; left: 0; bottom: 0; }
.egc--pen .egc__deck { top: 30px; right: 5%; width: 55%; }
.egc--pen .egc__card { transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.egc--pen .egc__card[data-d="1"]  { transform: translate(52%, 9%) rotate(3deg) scale(.92); opacity: 1; filter: none; }
.egc--pen .egc__card[data-d="-1"] { transform: translate(-38%, 9%) rotate(-3deg) scale(.92); opacity: 1; filter: none; }
.egc--pen .egc__card[data-d="2"]  { transform: translate(100%, 14%) rotate(6deg) scale(.86); opacity: 0; }
.egc--pen .egc__card[data-d="-2"] { transform: translate(-80%, 14%) rotate(-6deg) scale(.86); opacity: 0; }
.egc--pen .egc__cap { top: calc(100% + 22px); }
.egc--pen .egc__deck { top: 0; }
.egc--pen .egc__stage { height: 560px; }

/* カードと階段の配置（見本どおり）：カードは上、階段はカードの下に（重ねない）。階段は右へ高く、下は白へフェード */
.egc:not(.egc--pen) .egc__stage { height: 560px; }
.egc:not(.egc--pen) .egc__deck { top: 12px; width: 84%; }
.egc:not(.egc--pen) .egc__stairs { top: 270px; bottom: auto; height: 290px; }
.egc:not(.egc--pen) .egc__stage::after { height: 110px; }
.egc:not(.egc--pen) img.egc__kid--boy { bottom: 150px; }
.egc:not(.egc--pen) img.egc__kid--boy { bottom: 128px; left: 33%; }

/* 教材のアイコンを小さく（7割） */
.egc .egc__icon { width: calc(var(--egc-s, 56px) * .7); height: calc(var(--egc-s, 56px) * .7); }
/* 階段はドラッグで回せる：人物の切り抜きの透明部分はクリックを通す */
.egc:not(.egc--pen) img.egc__kid--boy { pointer-events: none; }
.egc__stairs { pointer-events: auto; }

/* ペンの持ち方：左右のカードは中央のカードのすぐ後ろで少しだけのぞく（女の子の顔にかからない）。女の子の写真は少し下げる */
.egc--pen .egc__card[data-d="1"]  { transform: translate(7%, 3%) rotate(4deg) scale(.95); opacity: 1; filter: none; }
.egc--pen .egc__card[data-d="-1"] { transform: translate(-7%, 3%) rotate(-4deg) scale(.95); opacity: 1; filter: none; }
.egc--pen .egc__card[data-d="2"]  { transform: translate(14%, 6%) rotate(8deg) scale(.9); opacity: 0; }
.egc--pen .egc__card[data-d="-2"] { transform: translate(-14%, 6%) rotate(-8deg) scale(.9); opacity: 0; }
.egc--pen .egc__deck { right: 6%; width: 52%; }
.egc--pen img.egc__kid--girl { bottom: -20px; }
.egc:not(.egc--pen) img.egc__kid--boy { left: 34%; bottom: 122px; }

/* 教材のアイコンは、いったん非表示（戻すときはこの行を消す） */
/* （非表示は解除） */
/* 段の高さを変えたので、男の子の後ろ足を2段目に乗せ、前の足は3段目へ踏み出す位置に */
.egc:not(.egc--pen) img.egc__kid--boy { left: 27%; bottom: 104px; }

/* ペンの持ち方：見本（右）のコンパクトなレイアウト。女の子の写真は左に小さめ、カードは右上で写真の頭の上に少し重なる */
.egc--pen .egc__stage { height: 420px; }
.egc--pen img.egc__kid--girl { width: 56% !important; left: 0; bottom: 0; }
.egc--pen .egc__deck { top: 0; right: 10%; width: 48%; }
.egc--pen .egc__cap { top: calc(100% + 16px); font-size: 15px; }

/* 見出し「生まれ月まで考慮した 成長にぴったりな学び」を大きく：26px → 29px（NEWの丸も少し大きく） */
.egc:not(.egc--pen) .egc__title { font-size: 29px; padding-left: 54px; letter-spacing: .02em; }
.egc:not(.egc--pen) .egc__new { width: 44px; height: 44px; font-size: 13.5px; top: 4px; }
/* 狭い画面でも1行10文字が折り返さないよう、画面幅に合わせて縮める（最大29px） */
.egc:not(.egc--pen) .egc__title { font-size: min(29px, calc((375px - 100px) / 10.4)); white-space: nowrap; }
/* NEWがあっても見出しの文字が右に寄って見えないように：左のNEWと同じだけ右にも余白をとり、文字そのものを中央に */
.egc:not(.egc--pen) .egc__title { padding-right: 54px; font-size: min(29px, calc((375px - 150px) / 10.4)); }
/* 上の矢印（心配の声から続く）と見出しの間に余白 */
.egc:not(.egc--pen) { padding-top: 56px; }

/* 階段の後ろだけ背景をほんの少し濃く（白い階段が際立つように）。上下はなじませる */
.egc:not(.egc--pen) .egc__stage::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 230px; bottom: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 62% 55%, #ece3d6 0, rgba(236, 227, 214, .75) 45%, rgba(236, 227, 214, 0) 80%);
}
/* 階段の後ろの濃さを半分くらいに */
.egc:not(.egc--pen) .egc__stage::before { opacity: .5; }
/* 注釈は太字にしない */
.egc .egc__note { font-weight: 400; }
/* 男の子（新しい切り抜き：左右反転済み）。後ろ足を下の段に、前の足を上の段へ */
.egc:not(.egc--pen) img.egc__kid--boy { width: 52%; left: 32%; bottom: 96px; }
/* 新しい切り抜き（靴の下に影入り。画像の下に影の分の余白が少しある） */
.egc:not(.egc--pen) img.egc__kid--boy { bottom: 88px; }
/* 見出し下の説明文を大きく：14px → 16px（狭い画面では1行に収まるよう縮める） */
.egc:not(.egc--pen) .egc__sub { font-size: min(16px, calc((375px - 40px) / 23.6)); letter-spacing: 0; white-space: nowrap; }

/* 教科アイコン：男の子のまわりに小さく、ふわっと浮かぶ（男の子より奥） */
.egc:not(.egc--pen) .egc__icon { z-index: 7; }
.egc:not(.egc--pen) img.egc__kid--boy { z-index: 8; }
.egc.is-in .egc__icon { animation: egcIn .8s cubic-bezier(.3, 1.4, .5, 1) both, egcFloat 5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .18s + .6s), calc(var(--d, 0) * .5s + 1.4s); }
@keyframes egcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* 教科アイコンの見た目をTOPのバブルと同じに（同じ色・影なし・同じ光沢・少し透ける） */
.egc .egc__icon b { box-shadow: none; opacity: .88; }
.egc .egc__icon b::after { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .22) 6%, rgba(255, 255, 255, 0) 13%); }
/* 教科アイコンを大きく（7割 → 1.15倍） */
.egc .egc__icon { width: calc(var(--egc-s, 56px) * 1.15); height: calc(var(--egc-s, 56px) * 1.15); }
.egc:not(.egc--pen) img.egc__kid--boy { width: 44%; left: 30%; bottom: 92px; }   /* 男の子を少し小さく */
/* 下の見出し（ひらがなの練習も…）を上の見出しと同じ大きさ・色・太さに */
.egc--pen .egc__title { font-size: min(29px, calc((375px - 150px) / 10.4)); color: #4a3a34; font-weight: 700; letter-spacing: .02em; line-height: 1.45; }
/* 教科アイコンの入れ替え：しぼんで消える → 別の教科でぽんと出る */
.egc .egc__icon b { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .35s ease; }
.egc .egc__icon.is-swap-out b { transform: scale(0); opacity: 0; transition: transform .4s ease-in, opacity .35s ease-in; }

/* アイコンが1つだけ拡大・縮小（ズーム）する動きはしない：
   カード切り替え時の「ぽん」と跳ねる動きをやめ、入れ替えと登場はフェードだけに */
.egc .egc__icon.is-hit b { animation: none !important; }
.egc .egc__icon b { transition: opacity .45s ease; transform: none !important; }
.egc .egc__icon.is-swap-out b { opacity: 0; transition: opacity .4s ease; }
@keyframes egcIn { from { opacity: 0; transform: none; } to { opacity: var(--o, 1); transform: none; } }
.egc .egc__icon { transform: none; }
/* バブルの中のアイコン（白い絵柄）を大きく：62% → 76% */
.egc .egc__icon img { inset: 12%; width: 76%; height: 76%; }

/* アイコンは上下にふわふわではなく、少しずつ左斜め下へ流れる（入れ替わるたびに元の位置から流れ直す） */
.egc.is-in .egc__icon { animation: egcIn .8s ease both, egcDrift 9s linear both; animation-delay: calc(var(--d, 0) * .18s + .6s), 0s; }
@keyframes egcDrift { from { translate: 0 0; } to { translate: var(--dx, -34px) 34px; } }
@media (prefers-reduced-motion: reduce) { .egc.is-in .egc__icon { animation: none; opacity: var(--o, 1); } }
/* 入れ替えはゆっくり（5秒ごと＝1つのアイコンは約15秒ごと）。左斜め下へはさらにゆっくり、内側では上下にふわふわ */
.egc.is-in .egc__icon { animation: egcIn .8s ease both, egcDrift 15s linear both; animation-delay: calc(var(--d, 0) * .18s + .6s), 0s; }
@keyframes egcDrift { from { translate: 0 0; } to { translate: var(--dx, -30px) 30px; } }
/* 左はしの教科アイコン（style に --dx: 0px）は、画面の外へ出ないよう真下へだけ流れる */
.egc.is-in .egc__icon b { animation: egcBob 4.5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1.5s); }
@keyframes egcBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (prefers-reduced-motion: reduce) { .egc.is-in .egc__icon b { animation: none; } }
/* アイコンは男の子より手前に */
.egc:not(.egc--pen) .egc__icon { z-index: 9; }
.egc:not(.egc--pen) img.egc__kid--boy { z-index: 8; }
/* 階段の後ろの小さなバブル：背景のベージュより手前、階段・男の子・カードより奥 */
.egc .egc__bgb { z-index: 2; }
.egc--pen img.egc__kid--girl { left: 14px !important; }   /* 左の腕が画面の端で切れないように */
/* 教科アイコンが出るとき（最初・入れ替わり）は、下からふわっと上がってくる */
@keyframes egcIn { from { opacity: 0; transform: translateY(26px); } to { opacity: var(--o, 1); transform: none; } }
.egc.is-in .egc__icon { animation: egcIn .9s cubic-bezier(.22, 1, .36, 1) both, egcDrift 15s linear both; animation-delay: calc(var(--d, 0) * .18s + .6s), 0s; }
.egc.is-in .egc__icon.is-swapped { animation-delay: 0s, 0s; }
/* 入れ替え：左で消える → 残りは1つ左の場所へゆっくり移る（大きさも） → 新しい教科は右の場所に浮かぶ */
@property --egc-s { syntax: '<length>'; inherits: true; initial-value: 56px; }   /* --s そのものを登録すると、TOPのメッセージエリアのバブル(--s は単位なし)が消えるため別名に */
.egc .egc__icon { --egc-s: var(--s, 56px); }
.egc .egc__icon { transition: left 1.6s cubic-bezier(.45, 0, .25, 1), top 1.6s cubic-bezier(.45, 0, .25, 1), --egc-s 1.6s cubic-bezier(.45, 0, .25, 1); }
.egc .egc__icon.no-move { transition: none; }
/* ほかのアイコンは場所を移動しない（移動量が多すぎたため） */
.egc .egc__icon { transition: none; }
/* 後ろのぼかしバブルは小さく（6割） */
.egc .egc__bgb { width: calc(var(--bs) * .6px); height: calc(var(--bs) * .6px); }
/* ペンの持ち方：カードを小さく、左の女の子を大きく */
.egc--pen .egc__deck { width: 40%; right: 5%; top: 6px; }
.egc--pen img.egc__kid--girl { width: 74% !important; }
.egc--pen .egc__stage { height: 500px; }

/* 後ろのぼかしバブルも、ゆっくり消えたりついたりする（それぞれタイミングをずらす） */
.egc .egc__bgb { animation: bgb-float var(--bd, 8s) ease-in-out infinite alternate, egcBlink 7s ease-in-out infinite; }
.egc .egc__bgb:nth-of-type(5n+1) { animation-delay: 0s, 0s; animation-duration: var(--bd, 8s), 7s; }
.egc .egc__bgb:nth-of-type(5n+2) { animation-delay: 0s, -2.2s; animation-duration: var(--bd, 8s), 8.5s; }
.egc .egc__bgb:nth-of-type(5n+3) { animation-delay: 0s, -4.6s; animation-duration: var(--bd, 8s), 6.5s; }
.egc .egc__bgb:nth-of-type(5n+4) { animation-delay: 0s, -1.3s; animation-duration: var(--bd, 8s), 9s; }
.egc .egc__bgb:nth-of-type(5n)   { animation-delay: 0s, -5.8s; animation-duration: var(--bd, 8s), 7.5s; }
@keyframes egcBlink { 0%, 100% { opacity: 0; } 25%, 65% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .egc .egc__bgb { animation: none; opacity: .75; } }
/* 女の子の写真：左端・上端がまっすぐ切れて見えないよう、ふちを白へぼかす（右と下は写真自体がフェード済み） */
.egc--pen img.egc__kid--girl { left: 0 !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 12%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 12%);
  mask-composite: intersect; }
/* 女の子の写真：左のグラデーションはなし（左端は画面の端までそのまま）。上のふちだけぼかす */
.egc--pen img.egc__kid--girl {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
.egc--pen .egc__deck { top: 60px; }   /* カルーセルを少し下へ */
/* ペンの持ち方：見本のレイアウト（カードは右寄りで大きめ・上に、女の子は左下に小さめ。カードは女の子の頭の右上に重なる） */
.egc--pen .egc__stage { height: 400px; }
.egc--pen .egc__deck { top: 10px; right: 9%; width: 47%; }
.egc--pen img.egc__kid--girl { width: 50% !important; bottom: 20px; }
.egc--pen .egc__stage { height: 380px; } .egc--pen img.egc__kid--girl { bottom: 0; }
/* ペンの持ち方の説明文：上の「生まれ月まで考慮した」の説明文と同じ見た目 */
.egc--pen .egc__sub { font-size: min(16px, calc((375px - 40px) / 23.6)); letter-spacing: 0; }
/* 教材カードはスワイプで切り替えられる：カードの上に重なるアイコン・人物・バブルはタッチを通す */
.egc .egc__icon, .egc .egc__bgb, .egc img.egc__kid, .egc .egc__stairs { pointer-events: none; }
.egc .egc__deck { cursor: grab; user-select: none; -webkit-user-select: none; }
.egc .egc__deck img, .egc .egc__deck video { pointer-events: none; }
/* カードの下の見出し（ペンの持ち方・うんぴつ など）を大きく：15px → 18px */
.egc--pen .egc__cap { font-size: 18px; }
/* 注釈を上へ：階段のフェード部分に重ねる（ステージの下の空きを詰める） */
.egc:not(.egc--pen) .egc__note { position: relative; z-index: 10; margin-top: -60px; background: none; }
.egc:not(.egc--pen) .egc__note { margin-top: -30px; }   /* 少し下へ */
/* 注釈のまわりも白でつなげる（階段のフェードの白 → 注釈 → 下のペンの持ち方の白。クリーム色の帯を出さない） */
.egc:not(.egc--pen) .egc__note { margin-left: -20px; margin-right: -20px; padding: 30px 24px 0; margin-top: -60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 30px); }
.egc:not(.egc--pen) { padding-bottom: 0; }
.egc:not(.egc--pen) + .egc--pen { margin-top: 0; }

/* 男の子：画面に入ったら、下からふわっとフェードインして出てくる（translateX(-50%)と別に translate で動かす） */
.egc:not(.egc--pen) img.egc__kid--boy { opacity: 0; translate: 0 40px; transition: opacity .9s ease .15s, translate 1s cubic-bezier(.22, 1, .36, 1) .15s; }
.egc.is-in:not(.egc--pen) img.egc__kid--boy { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .egc:not(.egc--pen) img.egc__kid--boy { opacity: 1; translate: none; transition: none; } }
/* ペンの持ち方の下の空きを詰める（中締めへつなげる） */
.egc--pen { padding-bottom: 8px; }
/* ペンの持ち方の下の空きを詰める */
.egc--pen .egc__stage { height: 340px; }
/* カード下の見出し（うんぴつ など）は最前面に：下の中締めのグラデより手前に出す */
.egc--pen { position: relative; z-index: 11; background: transparent; }
.egc--pen .egc__cap { z-index: 20; }
/* 「うんぴつ」などが薄く見えていた原因：ステージ下端の白いフェード（階段用）がペンの持ち方にもかかっていた。ペンの持ち方では使わない */
.egc--pen .egc__stage::after, .egc--pen .egc__stage::before { content: none; }
.egc--pen { background: #fff; }   /* 白でつなげる（透明にしたためクリーム色が出ていた） */

/* キャプションをnormalに、カード切替をゆっくり */
.egc--pen .egc__cap { font-weight: 400; }
.egc--pen .egc__card { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity .8s ease; }
/* ペンの持ち方：女の子を少し大きく 50% → 56% */
.egc--pen img.egc__kid--girl { width: 56% !important; }

/* ペンの持ち方：見本レイアウト（説明文なし・女の子を大きく見出しのすぐ下から・カードは右上で女の子に重ねる） */
.egc--pen .egc__sub { display: none; }
.egc--pen .egc__stage { height: auto; aspect-ratio: 1 / .95; margin-top: 6px; }
.egc--pen img.egc__kid--girl { width: 58% !important; left: 0 !important; bottom: auto !important; top: 0; }
.egc--pen .egc__deck { top: 8%; right: 8%; width: 49%; }
.egc--pen .egc__stage { margin-top: -22px; aspect-ratio: 1 / .92; }   /* 写真を見出しのすぐ下から */
.egc--pen .egc__stage { margin-top: -6px; }   /* 見出しの下に少し余白 */
.egc--pen .egc__card > video { border-radius: 11px; }

/* 後ろのぼかしバブルは不要 */
.egc .egc__bgb { display: none !important; }

/* AIの分析 → 教材：最初に見えたとき、落ち着いたレーダーチャートで「分析中」を見せてから教材カードを出す */
.egc__ana { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 2%;
  padding: 4% 4% 3%; border-radius: 14px; background: linear-gradient(180deg, #fff 0, #f3f7fd 100%); box-shadow: 0 6px 18px rgba(60, 90, 140, .12);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease, transform .5s ease; pointer-events: none; }
.egc.is-ana .egc__ana { opacity: 1; visibility: visible; }
.egc.is-ana-done .egc__ana { transform: scale(.96); }
.egc.is-ana .egc__card { opacity: 0 !important; }
.egc__ana-cap { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: #3a4a66; letter-spacing: .02em; }
.egc__ana-cap i { font-style: normal; font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 4px; background: #4a8ce6; color: #fff; letter-spacing: .06em; }
.egc__ana-dots { display: inline-flex; gap: 3px; margin-left: 1px; }
.egc__ana-dots b { width: 3px; height: 3px; border-radius: 50%; background: #4a8ce6; opacity: .25; animation: egcAnaDot 1.2s ease-in-out infinite; }
.egc__ana-dots b:nth-child(2) { animation-delay: .2s; } .egc__ana-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes egcAnaDot { 40% { opacity: 1; } }
.egc__ana-svg { width: auto; height: 100%; max-width: 100%; overflow: visible; }
.egc__ana-data { transform-origin: 100px 100px; transform: scale(0); opacity: 0; transition: transform 1.5s cubic-bezier(.2, .8, .2, 1) .5s, opacity .4s ease .5s; }
.egc.is-ana .egc__ana-data { transform: scale(1); opacity: 1; }
.egc__ana-sweep { transform-origin: 100px 100px; opacity: 0; }
.egc.is-ana .egc__ana-sweep { opacity: .9; animation: egcAnaSweep 2.2s linear .2s 1 both; }
@keyframes egcAnaSweep { from { transform: rotate(0); } to { transform: rotate(360deg); opacity: 0; } }
.egc__ana-lbl text { opacity: 0; transition: opacity .4s ease; }
.egc.is-ana .egc__ana-lbl text { opacity: 1; }
.egc.is-ana .egc__ana-lbl text:nth-child(2) { transition-delay: .1s; } .egc.is-ana .egc__ana-lbl text:nth-child(3) { transition-delay: .2s; }
.egc.is-ana .egc__ana-lbl text:nth-child(4) { transition-delay: .3s; } .egc.is-ana .egc__ana-lbl text:nth-child(5) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .egc__ana { display: none; } }
.egc__ana { padding: 3.5% 3% 2%; } .egc__ana-svg { transform: scale(1.08); }

/* 分析カード：色を控えめに */
.egc__ana { background: linear-gradient(180deg, #fff 0, #f8fafd 100%); box-shadow: 0 4px 14px rgba(60, 90, 140, .08); }
.egc__ana-cap { color: #5a6578; font-weight: 600; }
.egc__ana-cap i { background: #9bb8e2; }
.egc__ana-dots b { background: #9bb8e2; }
/* 分析：TOPの分析アイコンと同じく、白いふちの丸で囲む（ガラス玉のような淡い水色） */
.egc__ana { background: none; box-shadow: none; padding: 0 0 1%; gap: 3%; grid-template-rows: auto minmax(0, 1fr); }
.egc__ana-svg { transform: none; height: 100%; width: auto; aspect-ratio: 1; padding: 11% 9% 9%; box-sizing: border-box; border-radius: 50%;
  border: 6px solid #fff; overflow: visible;
  background:
    radial-gradient(ellipse 58% 26% at 50% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(to bottom, rgba(255,255,255,0) 72%, rgba(255,255,255,.55) 72.5%, rgba(255,255,255,.25) 100%),
    radial-gradient(circle at 50% 42%, #f5fbff 0, #e3f1fc 60%, #d6eafa 100%);
  box-shadow: 0 6px 16px rgba(70, 110, 160, .14), inset 0 0 10px rgba(255,255,255,.7); }
.egc__ana-cap { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: 0 2px 6px rgba(70,110,160,.1); font-size: 12px; }
.egc__ana-svg { padding: 7% 5% 6%; }
.egc__ana-data polygon { filter: none; }
/* 分析（見本どおり）：白いカードに見出し、淡い水色の丸の中にレーダー、頂点に5分野のアイコン */
.egc__ana { background: #fff; box-shadow: 0 6px 18px rgba(60, 90, 140, .10); border-radius: 14px; padding: 5% 4% 4%; gap: 4%; }
.egc__ana-cap { padding: 0; background: none; box-shadow: none; font-size: 15px; font-weight: 700; color: #222; letter-spacing: .02em; }
.egc__ana-dots b { background: #8fb3e6; }
.egc__ana-ring { position: relative; height: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid #9aa7b5;
  background:
    radial-gradient(ellipse 60% 22% at 50% 14%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 45%, #e6f6fd 0, #cdeefa 70%, #c2e9f8 100%); }
.egc__ana-ring .egc__ana-svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; aspect-ratio: auto; }
.egc__ana-ic { position: absolute; width: 21%; aspect-ratio: 1; border-radius: 50%; background: var(--c); transform: translate(-50%, -50%) scale(.4); opacity: 0;
  display: grid; place-items: center; box-shadow: 0 2px 5px rgba(40, 60, 90, .2), inset 0 -2px 4px rgba(0,0,0,.08);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .4s ease; transition-delay: calc(.25s + var(--i) * .12s); }
.egc__ana-ic img { width: 66%; height: 66%; }
.egc.is-ana .egc__ana-ic { transform: translate(-50%, -50%) scale(1); opacity: 1; }
/* 分析が終わるまで、まわりの教科アイコンは出さない（終わったら下からふわっと出る） */
.egc.ana-wait .egc__icon { opacity: 0 !important; animation: none !important; }
/* 分析：TOPと同じ分析アイコン（吹き出しの丸＋棒グラフ）を使う */
.egc__ana-img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; opacity: 0; transform: scale(.9); transition: opacity .4s ease .15s, transform .5s cubic-bezier(.3, 1.4, .5, 1) .15s; }
.egc.is-ana .egc__ana-img { opacity: 1; transform: none; }
.egc.is-ana .egc__ana-img { transform: scale(1.3); } .egc__ana-img { transform: scale(1.1); }
.egc.is-ana .egc__ana-img { transform: scale(1.12); } .egc__ana-img { transform: scale(.95); }
.egc.is-ana .egc__ana-img { transform: scale(.92); } .egc__ana-img { transform: scale(.8); }
/* 分析が終わるまでは、ページを開いた瞬間から教材カードを隠して分析カードを出しておく（教材がちらっと見えないように） */
@media (prefers-reduced-motion: no-preference) {
  .egc:has(.egc__ana):not(.is-ana-done) .egc__card { opacity: 0 !important; transition: none !important; }
  .egc:has(.egc__ana):not(.is-ana-done) .egc__ana { opacity: 1; visibility: visible; }
  .egc:has(.egc__ana):not(.is-ana-done) .egc__icon { opacity: 0 !important; animation: none !important; }
}
/* 分析グラフ：設定で 棒グラフ／レーダーチャート を切り替え（丸いフレームは共通） */
.egc__ana-g { height: 100%; display: flex; justify-content: center; min-height: 0; }
.egc__ana-g > [hidden] { display: none !important; }
/* 「お子さまに合わせた学習を分析中」：少し下げて、グレーに */
.egc__ana-cap { margin-top: 3%; color: #6b6f78; }
/* 「お子さまに合わせた学習を分析中」：1文字ずつ透明度が波のように変わる（AIが処理しているような明滅） */
.egc__ana-cap { gap: 0; }
.egc__ana-ch { display: inline-block; opacity: .35; }
.egc.is-ana .egc__ana-ch, .egc:has(.egc__ana):not(.is-ana-done) .egc__ana-ch { animation: egcAnaCh 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
@keyframes egcAnaCh { 0%, 100% { opacity: .3; } 35% { opacity: 1; } 60% { opacity: .55; } }
.egc__ana-dots { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .egc__ana-ch { opacity: 1; animation: none; } }
/* 明滅をもっと控えめに（透明度の差を小さく） */
.egc__ana-ch { opacity: .8; }
@keyframes egcAnaCh { 0%, 100% { opacity: .72; } 35% { opacity: 1; } 60% { opacity: .85; } }
/* 明滅は速く・1回だけ */
.egc.is-ana .egc__ana-ch, .egc:has(.egc__ana):not(.is-ana-done) .egc__ana-ch { animation: egcAnaCh .6s ease-in-out 1 both; animation-delay: calc(.2s + var(--i) * .035s); }
.egc__ana-ch { opacity: 1; }
@keyframes egcAnaCh { 0%, 100% { opacity: 1; } 0% { opacity: .72; } 45% { opacity: 1; } 70% { opacity: .85; } }
/* 画面に入って分析が始まったときに1回だけ流す（ページを開いた時点では流さない） */
.egc:has(.egc__ana):not(.is-ana-done):not(.is-ana) .egc__ana-ch { animation: none; }
/* 分析が終わったら：グラフがふわっとズームしながらフェードアウト → 見出しも消える → 教材カードへ */
.egc.is-ana.is-ana-out .egc__ana-img { transform: scale(1.45); opacity: 0; transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .55s ease .1s; }
.egc.is-ana.is-ana-out .egc__ana-cap { opacity: 0; transition: opacity .4s ease; }
/* 分析中は「立って指さす」男の子（歩いていない）。分析が終わったら、歩く男の子に切り替わる */
.egc:not(.egc--pen) img.egc__kid--stand { position: absolute; z-index: 8; width: 25%; height: auto; left: 15%; bottom: 150px; pointer-events: none;
  opacity: 0; transition: opacity .5s ease; }
.egc:has(.egc__ana):not(.is-ana-done) img.egc__kid--stand { opacity: 1; }
.egc:has(.egc__ana):not(.is-ana-done) img.egc__kid--boy { opacity: 0 !important; transition: none; }
.egc.is-ana-done img.egc__kid--boy { opacity: 1; transition: opacity .6s ease .1s; }
@media (prefers-reduced-motion: reduce) { .egc:not(.egc--pen) img.egc__kid--stand { display: none; } }
.egc:not(.egc--pen) img.egc__kid--stand { left: 5%; bottom: 92px; width: 24%; }
.egc:not(.egc--pen) img.egc__kid--stand { width: 19%; left: 9%; bottom: 96px; }
.egc:not(.egc--pen) img.egc__kid--stand { bottom: 108px; left: 7%; }
.egc:not(.egc--pen) img.egc__kid--stand { bottom: calc(127px - 34.125px); }   /* 階段の一段目の上に立つ（画面幅で階段の高さが変わるのに合わせる） */
.egc:not(.egc--pen) img.egc__kid--stand { left: 0; width: 17%; bottom: calc(150px - 13.3 * min(3.75px, 4.8px)); }   /* ページ幅は最大480px。その幅に合わせて一段目の上に */
.egc:not(.egc--pen) img.egc__kid--stand { transform: none; translate: none; left: 0; }
.egc:not(.egc--pen) img.egc__kid--stand { bottom: calc(193px - 24.8 * min(3.75px, 4.8px)); }
.egc:not(.egc--pen) img.egc__kid--stand { width: 20%; left: 3%; }   /* 少し右・少し大きく */
.egc:not(.egc--pen) img.egc__kid--stand { width: 23%; left: 6%; }
.egc:not(.egc--pen) img.egc__kid--stand { left: 10%; }
/* 立っている男の子：もう少し上、足の下に影 */
.egc:not(.egc--pen) img.egc__kid--stand { bottom: calc(203px - 24.8 * min(3.75px, 4.8px)); }
.egc:not(.egc--pen) .egc__kid-shadow { position: absolute; z-index: 7; pointer-events: none;
  left: calc(10% + 23% * .14); width: calc(23% * .72); height: 16px; bottom: calc(195px - 24.8 * min(3.75px, 4.8px));
  background: radial-gradient(50% 50% at 50% 50%, rgba(70, 60, 50, .32) 0, rgba(70, 60, 50, .14) 45%, rgba(70, 60, 50, 0) 100%);
  opacity: 0; transition: opacity .5s ease; }
.egc:has(.egc__ana):not(.is-ana-done) .egc__kid-shadow { opacity: 1; }
.egc:not(.egc--pen) img.egc__kid--stand { bottom: calc(211px - 24.8 * min(3.75px, 4.8px)); }
.egc:not(.egc--pen) .egc__kid-shadow { bottom: calc(204px - 24.8 * min(3.75px, 4.8px)); height: 14px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(60, 50, 40, .45) 0, rgba(60, 50, 40, .2) 50%, rgba(60, 50, 40, 0) 100%); }
.egc:not(.egc--pen) .egc__kid-shadow { height: 16px; background: radial-gradient(50% 50% at 50% 50%, rgba(50, 40, 32, .6) 0, rgba(50, 40, 32, .3) 50%, rgba(50, 40, 32, 0) 100%); }
/* 階段が伸びきってから（約1.2秒後）、立っている子 → 歩く子に切り替え */
.egc.is-ana-done img.egc__kid--boy { transition: opacity .6s ease 1.1s; }
.egc:not(.egc--pen) img.egc__kid--stand, .egc:not(.egc--pen) .egc__kid-shadow { transition: opacity .5s ease 1.1s; }
/* 分析中の直立の男の子と影は使わない（非表示） */
.egc:not(.egc--pen) img.egc__kid--stand, .egc:not(.egc--pen) .egc__kid-shadow { display: none !important; }
/* 分析中のカード：縦に長く、グラフも大きく */
.egc__ana { inset: 0 0 -24% 0; padding-bottom: 5%; }
.egc__ana-img, .egc__ana-g { max-height: none; }
.egc .egc__ana-img { transform: scale(.95); }
.egc.is-ana .egc__ana-img { transform: scale(1.12); }
/* 分析中のカード：正方形に近い形 */
.egc__ana { inset: 0 auto auto 50%; width: 80%; aspect-ratio: 1 / 1.02; translate: -50% 0; padding: 7% 5% 7%; }
.egc__ana { width: 86%; aspect-ratio: 1 / 1; padding: 7% 4% 6%; justify-items: stretch; }
.egc__ana-cap { justify-content: center; font-size: 13.5px; white-space: nowrap; }
.egc__ana-g { width: 100%; justify-content: center; }
.egc__ana-g .egc__ana-img { margin: 0 auto; }
/* 分析中のカード：見出しを大きく、角丸を大きく */
.egc__ana { border-radius: 28px; }
.egc__ana-cap { font-size: 15.5px; }
.egc__ana { padding-left: 3%; padding-right: 3%; } .egc__ana-dots { margin-left: 4px; }
.egc.is-ana .egc__ana-img { transform: scale(.98); } .egc .egc__ana-img { transform: scale(.85); }
/* 分析のあと最初に出るとき：まん中の教材がズームで出て、そのあと左右のカードが現れる */
.egc.is-intro .egc__card[data-d="0"] { animation: egcIntroZoom .75s cubic-bezier(.2, .9, .3, 1.15) both; }
.egc.is-intro .egc__card[data-d="1"] { animation: egcIntroSideR .6s cubic-bezier(.2, .8, .2, 1) .65s both; }
.egc.is-intro .egc__card[data-d="-1"] { animation: egcIntroSideL .6s cubic-bezier(.2, .8, .2, 1) .65s both; }
.egc.is-intro .egc__card[data-d="2"], .egc.is-intro .egc__card[data-d="-2"] { animation: egcIntroFade .4s ease .9s both; }
@keyframes egcIntroZoom { from { scale: .55; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes egcIntroSideR { from { translate: -40% 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes egcIntroSideL { from { translate: 40% 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes egcIntroFade { from { opacity: 0; } }
.egc__ana-cap { font-size: 17.5px; }
.egc__ana-cap { font-size: 19.5px; }
.egc__ana { width: 90%; } .egc__ana-cap { font-size: min(19.5px, 19.125px); }
/* 分析中のカード：縁を内側から淡く光らせて AI らしく（青〜紫〜水色のグラデーション、ゆっくり明滅） */
.egc__ana { box-shadow: 0 6px 18px rgba(60, 90, 140, .10), inset 0 0 0 1px rgba(150, 185, 255, .55); }
.egc__ana::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  padding: 10px;
  background: conic-gradient(from 200deg, rgba(120, 140, 255, .85), rgba(170, 120, 255, .7), rgba(90, 200, 255, .85), rgba(140, 170, 255, .7), rgba(120, 140, 255, .85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(9px); opacity: .55; animation: egcAnaGlow 2.4s ease-in-out infinite; }
.egc__ana > * { position: relative; z-index: 1; }
@keyframes egcAnaGlow { 0%, 100% { opacity: .4; } 50% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .egc__ana::after { animation: none; } }
/* 縁の光り方を inner shadow に（帯にならず、内側へふわっとにじむ） */
.egc__ana::after { padding: 0; background: none; -webkit-mask: none; mask: none; filter: none;
  box-shadow:
    inset 0 0 0 1px rgba(150, 175, 255, .55),
    inset 10px 0 22px -8px rgba(165, 120, 255, .55),
    inset -10px 0 22px -8px rgba(80, 195, 255, .55),
    inset 0 10px 22px -10px rgba(120, 150, 255, .45),
    inset 0 -10px 22px -10px rgba(110, 170, 255, .45); }
.egc__ana-cap { background: none; box-shadow: none; } .egc__ana-g, .egc__ana-img { background: none; }
.egc.is-ana .egc__ana-img { transform: scale(1.1); } .egc .egc__ana-img { transform: scale(.96); }   /* 影の分だけ余白が増えたので、見た目の大きさを保つ */
.egc__ana-cap { color: #7b5bd6; } .egc__ana-dots b { background: #a58ff0; }   /* 分析中の文字を紫に */
/* inner shadow を弱めに */
.egc__ana::after { box-shadow:
    inset 0 0 0 1px rgba(150, 175, 255, .4),
    inset 6px 0 16px -8px rgba(165, 120, 255, .35),
    inset -6px 0 16px -8px rgba(80, 195, 255, .35),
    inset 0 6px 16px -10px rgba(120, 150, 255, .28),
    inset 0 -6px 16px -10px rgba(110, 170, 255, .28); }
@keyframes egcAnaGlow { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }
/* 分析中の文字：紫→青→水色→紫へ、文字ごとに少しずつずらして色が流れる（AI らしい配色の変化） */
.egc__ana-ch { color: #7b5bd6; }
.egc.is-ana .egc__ana-ch, .egc:has(.egc__ana):not(.is-ana-done) .egc__ana-ch {
  animation: egcAnaCh .6s ease-in-out 1 both, egcAnaHue 2.8s ease-in-out infinite;
  animation-delay: calc(.2s + var(--i) * .035s), calc((var(--i) - 30) * .12s); }
.egc:has(.egc__ana):not(.is-ana-done):not(.is-ana) .egc__ana-ch { animation: none; }
@keyframes egcAnaHue { 0%, 100% { color: #7b5bd6; } 33% { color: #4a7fe8; } 66% { color: #2fb4dc; } }
.egc__ana-dots b { animation: egcAnaDot 1.2s ease-in-out infinite, egcAnaHueBg 2.8s ease-in-out infinite; }
@keyframes egcAnaHueBg { 0%, 100% { background: #a58ff0; } 33% { background: #86a8f2; } 66% { background: #7fd0ea; } }
@media (prefers-reduced-motion: reduce) { .egc__ana-ch, .egc__ana-dots b { animation: none !important; } }
/* レーダー：はじめは小さい状態からズームインして表示 → 終わりはさらにズームインしながらフェードアウト */
.egc .egc__ana-img { transform: scale(.6); opacity: 0; transition: opacity .5s ease .1s, transform .8s cubic-bezier(.22, 1, .36, 1) .1s; }
.egc.is-ana .egc__ana-img { transform: scale(1.1); opacity: 1; }
.egc.is-ana.is-ana-out .egc__ana-img { transform: scale(1.5); opacity: 0; transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .55s ease .1s; }
/* 注釈は、分析が終わって階段が伸びきってから表示 */
.egc:has(.egc__ana) .egc__note { color: transparent; transition: color .5s ease; }   /* 白い背景は残し、文字だけ消す */
.egc:has(.egc__ana).is-ana-done .egc__note { color: #333; transition-delay: 1.2s; }
/* 教材アイコンは、男の子が出たあと（分析終了から約1.8秒後）に順に表示 */
.egc.is-in.is-ana-done:has(.egc__ana) .egc__icon:not(.is-swapped) { animation-delay: calc(var(--d, 0) * .18s + 1.8s), 0s; }
/* 分析ありの教材例：教材アイコンはバウンドするズームで表示（入れ替え時も同じ） */
.egc.is-in:has(.egc__ana) .egc__icon { animation: egcInBounce .9s linear both, egcDrift 15s linear both; animation-delay: calc(var(--d, 0) * .18s + .6s), 0s; }
.egc.is-in.is-ana-done:has(.egc__ana) .egc__icon:not(.is-swapped) { animation-delay: calc(var(--d, 0) * .18s + 1.8s), 0s; }
.egc.is-in:has(.egc__ana) .egc__icon.is-swapped { animation-delay: 0s, 0s; }
@keyframes egcInBounce {
  0% { opacity: 0; scale: 0; animation-timing-function: cubic-bezier(.33, 0, .67, 1); }
  15% { opacity: var(--o, 1); }
  45% { scale: 1.18; animation-timing-function: ease-in-out; }
  65% { scale: .9; animation-timing-function: ease-in-out; }
  82% { scale: 1.05; animation-timing-function: ease-in-out; }
  100% { opacity: var(--o, 1); scale: 1; } }
/* ペンの持ち方：スクロールして見えたら、右のカード（とラベル）がふわっと出る */
.egc--pen .egc__deck { opacity: 0; translate: 0 28px; scale: .94; transition: opacity .8s ease .15s, translate 1s cubic-bezier(.22, 1, .36, 1) .15s, scale 1s cubic-bezier(.22, 1, .36, 1) .15s; }
.egc--pen.is-in .egc__deck { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) { .egc--pen .egc__deck { opacity: 1; translate: none; scale: none; transition: none; } }

/* NEW バッジがない見出しは中央そろえ（年中・年長など） */
.egc:not(.egc--pen) .egc__title:not(:has(.egc__new)) { padding-left: 0; padding-right: 0; text-align: center; }
/* 見出し（NEWつき）はTOPに合わせてセンタリング：NEWの分を左右同じ余白にして中央へ */
.egc:not(.egc--pen) .egc__title { display: block; text-align: center !important; padding-left: 54px !important; padding-right: 54px !important; }
.egc:not(.egc--pen) .egc__title .egc__new { left: 18px; }

/* ========================================
 * 階段（画像）：6段を縦に切り分け、分析が終わったら左の段から順に下からせり上がる
 * ======================================== */
.egc__stairs {
  overflow: hidden;
}
.egc__stairs span {
  position: absolute;
  inset: 0;
  background: url("../images/sect-eg_stairs.png?20261028") 0 0 / 100% 100% no-repeat;
  /* 1段ぶんだけ見せる。右どなりと少し重ねて、つなぎ目の線が出ないようにする */
  clip-path: inset(0 max(0px, calc(100% / 6 * (5 - var(--i)) - 2px)) 0 calc(100% / 6 * var(--i)));
}
/* 分析中は、どの段も枠（.egc__stairs の overflow: hidden）の下にかくしておき、
   分析が終わったら左の段から順に、下からせり上げる。途中の段が欠けて見えないよう、段は1本ずつ丸ごと動かす
   （ana-wait・is-ana は JS が付ける。JS が動かないときや「動きを減らす」設定のときは、はじめから階段を出す） */
.egc.ana-wait .egc__stairs span,
.egc.is-ana .egc__stairs span {
  translate: 0 100%;
}
.egc.is-ana-done .egc__stairs span {
  animation: egcStairRise .7s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 110ms) both;
}
@keyframes egcStairRise {
  from { translate: 0 100%; }
  to { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .egc .egc__stairs span {
    translate: none;
    animation: none;
  }
}

/* 階段をのぼる子ども：学年ごとの位置と大きさ（モックの学年ごとの設定） */
.egc img.egc__kid--boy { width: 18% !important; left: 41% !important; }

/* 2026/10/30 階段の子どもを男の子の写真に差し替え（横幅のある写真なので、同じ身長に見えるよう幅を広げる） */
.egc img.egc__kid--boy.egc__kid--step-boy { width: 24% !important; left: 40% !important; }

/* 2026/11/04 プレ年少・年少TOP用：階段なし（.egc--nostairs）。階段の分の高さを詰める */
.egc.egc--nostairs .egc__stage { height: 252px; }
.egc.egc--nostairs .egc__stage::after { height: 60px; }
/* 教科のバブルは階段の上に浮かぶ演出なので、階段なしでは出さない */
.egc.egc--nostairs .egc__icon, .egc.egc--nostairs .bgb { display: none; }
/* 2026/11/04 はなせるえほん（ペンの持ち方の下に、同じつくりでもう1ブロック） */
.egc.egc--pen:not(:last-child) { margin-bottom: 0; }
.egc.egc--ehon { padding-top: 40px; }
/* はなせるえほん：左右逆（左にカルーセル、右に女の子） */
.egc.egc--ehon .egc__deck { right: auto !important; left: 8%; }
.egc.egc--ehon img.egc__kid--girl { left: auto !important; right: 0 !important; }
/* はなせるえほん：カルーセルは絵本の表紙のみ（横長 4:3） */
.egc.egc--ehon .egc__deck { aspect-ratio: 4 / 3; top: 40px; }
/* はなせるえほん：詳しくはこちら（はなせるえほんLPへ） */
.egc .egc__more { position: relative; z-index: 10; margin: 18px 0 0; text-align: center; }
.egc .egc__more-btn { position: relative; display: inline-block; min-width: 250px; padding: 13px 44px 13px 28px; border-radius: 999px; background: #f08a24; box-shadow: 0 4px 0 #c86a12; color: #fff; font-family: var(--font-family-maru-bold); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.egc .egc__more-btn::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
.egc .egc__more-btn:active { translate: 0 3px; box-shadow: 0 1px 0 #c86a12; }
/* はなせるえほん：絵本の題名は出さない／見出しの下に特徴を1行／ボタンは控えめ */
.egc.egc--ehon .egc__cap { display: none; }
.egc.egc--ehon .egc__sub { display: block; margin-top: 10px; text-align: center; font-size: 13px; white-space: nowrap; color: #6a5a52; }
.egc .egc__more { margin-top: 14px; }
.egc .egc__more-btn { min-width: 0; padding: 7px 30px 7px 18px; border: 1px solid #d9c9b8; border-radius: 999px; background: #fff; box-shadow: none; color: #6a5a52; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.egc .egc__more-btn::after { right: 13px; width: 6px; height: 6px; margin-top: -4px; border-top: 1.5px solid #b49a82; border-right: 1.5px solid #b49a82; }
.egc .egc__more-btn:active { translate: none; box-shadow: none; opacity: .7; }
/* はなせるえほん：表紙を少し小さく */
.egc.egc--ehon .egc__deck { width: 40% !important; left: 9%; top: 60px; }
/* はなせるえほん：女の子を少し小さく（下にそろえて、上の余白を詰める） */
.egc.egc--ehon img.egc__kid--girl { width: 48% !important; top: auto !important; bottom: 0 !important; }
.egc.egc--ehon .egc__stage { height: 286px; margin-top: 10px; }
.egc.egc--ehon .egc__deck { top: 40px; }
/* はなせるえほん：男の子（切り抜き）／「全レッスン読み聞かせ音声つき！」 */
.egc.egc--ehon img.egc__kid--ehonboy { width: 64% !important; right: 0 !important; bottom: 0 !important; -webkit-mask-image: none; mask-image: none; }
.egc.egc--ehon .egc__badge { margin: 14px auto 0; width: fit-content; padding: 5px 16px; border-radius: 999px; background: #fff3e0; color: #e0702a; font-family: var(--font-family-maru-bold); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
/* はなせるえほん：表紙カルーセルの下に固定で「全レッスン読み聞かせ音声つき！」 */
.egc.egc--ehon .egc__cap.egc__cap--fixed { display: block; top: calc(100% + 14px); left: -10%; right: -10%; width: fit-content; margin: 0 auto; padding: 5px 14px; border-radius: 999px; background: #fff3e0; color: #e0702a; font-family: var(--font-family-maru-bold); font-size: 12px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.egc.egc--ehon .egc__stage { overflow: visible; }
.egc.egc--ehon img.egc__kid--ehonboy { right: -64px !important; }
/* はなせるえほん：机ありの切り抜きに。男の子を大きく */
.egc.egc--ehon img.egc__kid--ehonboy { width: 84% !important; right: -64px !important; bottom: 0 !important; }
.egc.egc--ehon .egc__stage { height: 310px; }
/* はなせるえほん：表紙を大きく／左右の表紙のチラ見せを大きく */
.egc.egc--ehon .egc__deck { width: 52% !important; left: 6%; top: 30px; }
.egc.egc--ehon .egc__card[data-d="1"]  { transform: translate(18%, 5%) rotate(7deg) scale(.92); }
.egc.egc--ehon .egc__card[data-d="-1"] { transform: translate(-18%, 5%) rotate(-7deg) scale(.92); }
.egc.egc--ehon .egc__card[data-d="2"]  { transform: translate(30%, 9%) rotate(12deg) scale(.86); }
.egc.egc--ehon .egc__card[data-d="-2"] { transform: translate(-30%, 9%) rotate(-12deg) scale(.86); }
/* ペンの持ち方 と はなせるえほん の間を詰める */
.egc.egc--ehon { margin-top: 0; padding-top: 24px !important; }
/* はなせるえほん：詳しく見るは見出しの下に小さく */
.egc .egc__morelink { margin: 8px 0 0; text-align: center; font-size: 12px; line-height: 1.5; }
.egc .egc__morelink a { color: #8a7563; text-decoration: underline; text-underline-offset: 3px; }
.egc .egc__morelink a::after { content: " ›"; }
/* はなせるえほん：男の子の右端を画面の右端まで（体が途中で切れて見えないように） */
.egc.egc--ehon img.egc__kid--ehonboy { right: -38px !important; }  /* 下の「これならできそう！」の帯と右端をそろえる */
.egc .egc__morelink a { text-decoration: none; }
/* 横スクロールが出ないように、はみ出した分は切る */
.l-sect-eg { overflow-x: clip; }
.egc .egc__morelink a { text-decoration: underline; text-underline-offset: 3px; }
/* はなせるえほん：表紙と男の子を少し上へ（「詳しく見る」との間を詰める） */
.egc.egc--ehon .egc__stage { margin-top: -14px; }
/* はなせるえほん：表紙カルーセルだけ少し下へ */
.egc.egc--ehon .egc__deck { top: 56px !important; }
/* はなせるえほん：「読み聞かせ音声つき！」を表紙の上に吹き出しで */
.egc.egc--ehon .egc__cap.egc__cap--fixed { top: auto !important; bottom: calc(100% + 12px); left: 0; right: 0; z-index: 20; padding: 6px 16px; background: #fff; border: 1.5px solid #f0a868; box-shadow: 0 3px 8px rgba(120, 80, 40, .1); }
.egc.egc--ehon .egc__cap.egc__cap--fixed::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: #fff; border-right: 1.5px solid #f0a868; border-bottom: 1.5px solid #f0a868; transform: rotate(45deg); }
.egc.egc--ehon .egc__deck { top: 76px !important; }
/* はなせるえほん：吹き出しをやめて、薄い塗り＋文字（表紙の上） */
.egc.egc--ehon .egc__cap.egc__cap--fixed { background: #fff3e0; border: 0; box-shadow: none; padding: 5px 16px; }
.egc.egc--ehon .egc__cap.egc__cap--fixed::after { content: none; display: none; }
/* 「読み聞かせ音声つき！」の左に音声アイコン */
.egc.egc--ehon .egc__cap.egc__cap--fixed { display: flex; align-items: center; gap: 5px; }
.egc .egc__cap-icon { flex: none; width: 1.25em; height: 1.25em; }
/* ペンの持ち方：女の子の写真の下端で線が見えないよう、下をふわっと消す */
.egc--pen img.egc__kid--girl:not(.egc__kid--ehonboy) { -webkit-mask-image: linear-gradient(#000 78%, transparent 97%); mask-image: linear-gradient(#000 78%, transparent 97%); }

/* 2026-11-04 「詳しく見る」がカバーの列（.egc__track）の下に隠れて押せない → 前面に出す */
.egc--ehon .egc__morelink { position: relative; z-index: 8; }

/* 2026-11-04 「読み聞かせ音声つき！」を強めに：オレンジ塗り＋白文字の吹き出し（下の表紙を指すしっぽ付き） */
.egc.egc--ehon .egc__cap.egc__cap--fixed {
  padding: 7px 18px 8px !important;
  background: #ee7a2f !important;
  color: #fff !important;
  font-size: 14px !important;
  letter-spacing: .06em;
  box-shadow: 0 4px 10px rgba(200, 90, 20, .25) !important;
  animation: egcCapPop 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.egc.egc--ehon .egc__cap.egc__cap--fixed::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0;
  height: 0;
  margin-left: -8px;
  border: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ee7a2f;
  background: none;
  transform: none;
}
.egc.egc--ehon .egc__cap.egc__cap--fixed .egc__cap-icon { color: #fff; }
@keyframes egcCapPop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.08); } 90% { transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .egc.egc--ehon .egc__cap.egc__cap--fixed { animation: none; } }


/* 2026-11-04 吹き出しを少し下げて、表紙（えほん）の中心にそろえる */
.egc.egc--ehon .egc__cap.egc__cap--fixed { left: 50% !important; right: auto !important; margin: 0 !important; translate: -50% 0; bottom: calc(100% - 2px) !important; white-space: nowrap; }

/* 2026-11-04 吹き出し：ボタンと紛れないよう 薄い緑＋濃い緑の文字／もう少し上へ／音声アイコンの波が動く */
.egc.egc--ehon .egc__cap.egc__cap--fixed {
  bottom: calc(100% + 6px) !important;
  background: #e5f3d6 !important;
  color: #3d7f22 !important;
  box-shadow: 0 3px 8px rgba(60, 120, 30, .15) !important;
}
.egc.egc--ehon .egc__cap.egc__cap--fixed::after { border-top-color: #e5f3d6 !important; }
.egc.egc--ehon .egc__cap.egc__cap--fixed .egc__cap-icon { color: #3d7f22 !important; overflow: visible; }
.egc.egc--ehon .egc__cap-icon path:nth-of-type(2) { animation: egcWave 1.4s ease-in-out infinite; }
.egc.egc--ehon .egc__cap-icon path:nth-of-type(3) { animation: egcWave 1.4s ease-in-out .25s infinite; }
@keyframes egcWave { 0%, 100% { opacity: .15; } 40%, 60% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .egc.egc--ehon .egc__cap-icon path { animation: none !important; } }

/* 2026-11-04 吹き出し：白地＋緑の縁（しっぽも縁付き） */
.egc.egc--ehon .egc__cap.egc__cap--fixed {
  background: #fff !important;
  border: 2px solid #5fa33a !important;
  color: #3d7f22 !important;
  box-shadow: 0 3px 8px rgba(60, 120, 30, .12) !important;
}
.egc.egc--ehon .egc__cap.egc__cap--fixed::after {
  bottom: -7px !important;
  width: 11px !important;
  height: 11px !important;
  margin-left: -6px !important;
  border: 0 !important;
  border-right: 2px solid #5fa33a !important;
  border-bottom: 2px solid #5fa33a !important;
  background: #fff !important;
  transform: rotate(45deg) !important;
}

/* 2026-11-04 見出しの下側が下の画像の列（.egc__track）に隠れて欠ける → 見出しを前面に */
.egc .egc__title { z-index: 8; }

/* 2026-11-04 はなせるえほんの男の子を少し大きく（右端・下端はそのまま） */
.egc.egc--ehon img.egc__kid--ehonboy { width: 96% !important; }

/* 2026-11-04 カルーセルと男の子の上に少し余白（「詳しく見る」との間） */
.egc.egc--ehon .egc__stage { margin-top: 14px !important; }

/* 2026-11-04 男の子をさらに大きく */
.egc.egc--ehon img.egc__kid--ehonboy { width: 108% !important; }

/* 2026-11-04 男の子をもう少し下へ */
.egc.egc--ehon img.egc__kid--ehonboy { bottom: -28px !important; }

/* 2026-11-05 見出しの太さを「保護者さまに選ばれています」（u-font-maru-debold：DeBold／600）に合わせる。
   DeBold書体に700以上を指定すると、環境によってブラウザが疑似的に太くして太りすぎるため 600 にそろえ、疑似太字も止める */
.l-sect-worry__text, .l-sect-worry__text *,
.l-sect-relief__text, .l-sect-relief__text *,
.egc__title, .egc__title *, .egc__cap--fixed, .egc__cap--fixed *, .egc__new {
  font-family: 'MFW-PMaruAntipProN-DeBold', 'Zen Maru Gothic', sans-serif !important;
  font-weight: 600 !important;
  font-synthesis: none;
}