/* FV v2 — 参考レイアウト（左：タイル見出し＋丸バッジ / 右：傾けた写真カード / 下：CTA2つ）。配色・素材は現行トークンのまま */
.hero--v2 { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-10); background: var(--c-cream); }
.hv2-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.hv2-deco--l { width: 9rem; height: 9rem; left: -5.5rem; top: 38%; background: var(--c-green); }
.hv2-deco--r { width: 10rem; height: 10rem; right: -6rem; top: 30%; background: var(--c-yellow); }
.hv2-deco--ring1 { width: 34rem; height: 34rem; left: -20rem; top: -16rem; border: 5px dotted var(--c-border); }
.hv2-deco--ring2 { width: 40rem; height: 40rem; right: -18rem; bottom: -26rem; border: 5px dotted var(--c-border); }
.hv2-layout { position: relative; display: grid; gap: var(--space-10); align-items: center; }
.hv2-copy { min-width: 0; }
.hv2-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-6); border-bottom: 2px solid var(--c-ink); font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 800; color: var(--c-ink); line-height: 1.4; }
.hv2-eyebrow em { font-style: normal; color: var(--c-deep); font-weight: 900; padding: .15em .6em; border: 2px solid var(--c-deep); border-radius: var(--radius-sm); background: var(--c-white); }
.hv2-title { display: grid; gap: .22em; font-size: clamp(2.25rem, 10vw, 4rem); line-height: 1; font-weight: 900; letter-spacing: 0; text-wrap: nowrap; }
.hv2-row { display: flex; align-items: flex-end; gap: .1em; }
.hv2-row b { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: .12em; background: var(--c-deep); color: var(--c-white); font-weight: 900; box-shadow: 0 4px 0 rgb(0 80 55 / .18); }
.hv2-row--b b { background: var(--c-yellow); color: var(--c-ink); box-shadow: 0 4px 0 rgb(200 170 40 / .3); }
.hv2-row > :not(b) { padding-left: .04em; }
.hv2-lead { margin-top: var(--space-6); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 800; line-height: 1.7; letter-spacing: .04em; color: var(--c-ink); }
.hv2-lead__main { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: baseline; column-gap: .4em; row-gap: .35em; margin-bottom: var(--space-2); font-size: clamp(1.125rem, 2.6vw, 2rem); font-weight: 900; line-height: 1.3; letter-spacing: .02em; }
.hv2-lead__mark { background: linear-gradient(transparent 62%, var(--c-yellow) 62%); padding-inline: .05em; }
.hv2-lead__price { white-space: nowrap; color: var(--c-ink); }
.hv2-lead__price .hero__price { font-size: 1.6em; font-weight: 900; color: var(--c-deep); margin-inline: .06em; line-height: 1; }
.hv2-lead__price small { font-size: .5em; font-weight: 700; }
.hv2-badges { display: flex; flex-wrap: nowrap; gap: var(--space-4); margin-top: var(--space-6); list-style: none; padding: 0; }
.hv2-badges { gap: clamp(.625rem, 2vw, 1rem); }
.hv2-badge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: min(6.75rem, 28vw); height: min(6.75rem, 28vw); border-radius: 50%; background: var(--c-white); border: 2px solid var(--c-deep); box-shadow: 5px 6px 0 var(--c-yellow); text-align: center; font-size: .8125rem; font-weight: 700; line-height: 1.45; color: var(--c-ink); }
.hv2-badge strong { color: var(--c-deep); font-weight: 900; }
.hv2-badge__ico { width: 1.75rem; height: 1.75rem; margin-bottom: .25rem; color: var(--c-deep); }
.hv2-badge__ico--line { width: 1.6rem; height: 1.6rem; }
.hv2-photo { position: relative; margin: 0 auto; width: min(100%, 34rem); }
.hv2-card { --r: 5deg; position: absolute; inset: -4% -6% 6% 12%; background: var(--c-yellow); border-radius: var(--radius-md); transform: rotate(var(--r)); transform-origin: 50% -20%; animation: hv2-swing 4.8s ease-in-out infinite; animation-delay: -.35s; }
.hv2-img { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 27% center; border-radius: var(--radius-md); border: 6px solid var(--c-white); box-shadow: var(--shadow-float); --r: -3deg; transform: rotate(var(--r)); transform-origin: 50% -20%; animation: hv2-swing 4.8s ease-in-out infinite; }
.hv2-mascot { position: absolute; z-index: 2; left: -1rem; bottom: -2.5rem; display: flex; align-items: flex-end; gap: var(--space-1); }
.hv2-mascot img { width: 8.5rem; height: auto; filter: drop-shadow(0 8px 6px rgb(32 81 51 / .14)); animation: hello 1.1s ease-out 1; }
.hv2-mascot p { margin-bottom: 6rem; padding: var(--space-2) var(--space-3); background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--space-1); box-shadow: var(--shadow-clay); font-size: var(--fs-small); font-weight: 700; line-height: 1.5; color: var(--c-ink); }
.hv2-actions { position: relative; display: grid; gap: var(--space-4); margin-top: var(--space-12); justify-content: center; grid-template-columns: minmax(0, 26rem); }
.hv2-actions .button { position: relative; width: 100%; min-height: 4.5rem; padding: var(--space-3) 4.25rem var(--space-3) var(--space-6); border-radius: var(--radius-pill); font-size: clamp(1rem, 1.8vw, 1.1875rem); font-weight: 800; justify-content: center; }
.hv2-actions .button--secondary { background: var(--c-yellow); color: var(--c-ink); border: 0; box-shadow: inset 0 2px 1px rgb(255 255 255 / .5), 0 4px 0 #d9bd3c, 0 8px 16px rgb(150 120 20 / .14); }
.hv2-actions .button__arrow { position: absolute; right: var(--space-3); top: 50%; margin: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-white); color: var(--c-line); font-size: 1.125rem; font-weight: 900; transform: translateY(-50%); }
.hv2-actions .button--secondary .button__arrow { color: var(--c-ink); }
.hv2-actions .button__icon { width: 1.75rem; height: 1.75rem; }
@media (min-width: 48rem) {
  .hero--v2 { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 5vw, 4.5rem); }
  .hv2-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); }
  .hv2-photo { width: 100%; }
  .hv2-badge { width: 7.25rem; height: 7.25rem; font-size: .875rem; }
  .hv2-actions { grid-template-columns: repeat(2, minmax(0, 24rem)); gap: var(--space-8); }
  .hv2-mascot img { width: 12rem; }
  .hv2-mascot { left: -3rem; bottom: -3.5rem; }
  .hv2-mascot p { margin-bottom: 9rem; font-size: var(--fs-body); padding: var(--space-3) var(--space-4); }
  .hv2-deco--l { width: 14rem; height: 14rem; left: -8rem; top: 30%; }
  .hv2-deco--r { width: 14rem; height: 14rem; right: -8rem; top: 30%; }
}
@media (min-width: 64rem) {
  .hv2-title { font-size: clamp(3.5rem, 5.4vw, 4.75rem); }
  .hv2-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .hv2-badge { width: 8.25rem; height: 8.25rem; font-size: .9375rem; }
}
@keyframes hv2-swing { 0%, 100% { transform: rotate(calc(var(--r) - 2.5deg)); } 50% { transform: rotate(calc(var(--r) + 2.5deg)); } }
@media (prefers-reduced-motion: reduce) { .hv2-card, .hv2-img { animation: none; } }
/* FV下 4カラム：1つずつ緑の背景 */
.numbers { background: transparent; border-block: 0; }
.numbers__grid { gap: var(--space-3); padding-block: var(--space-6); }
.numbers .numbers__item, .numbers .numbers__item + .numbers__item, .numbers .numbers__item:nth-child(even) { display: flex; flex-direction: column; justify-content: center; padding: var(--space-4) var(--space-3); background: var(--c-deep); border: 0; border-radius: var(--radius-md); box-shadow: 0 6px 14px rgb(0 80 55 / .18); }
.numbers .numbers__label { margin: 0 0 var(--space-1); color: var(--c-white); font-weight: 800; font-size: clamp(1rem, 2vw, 1.25rem); }
.numbers .numbers__value, .numbers .numbers__item:nth-child(2) .numbers__value { display: flex; align-items: center; justify-content: center; gap: .08em; color: var(--c-yellow); background: none; font-weight: 900; }
.numbers .numbers__value small { color: var(--c-white); font-weight: 800; font-size: clamp(1.125rem, 2.2vw, 1.5rem); position: relative; top: .18em; }
@media (min-width: 48rem) { .numbers__grid { gap: var(--space-5); padding-block: var(--space-8); } }
/* お悩み：グレーの大パネル＋中央見出し＋白カード3枚（タイトル上・イラスト下） */
.worries > .page-shell { padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3.5rem); background: var(--c-soft); border-radius: var(--radius-lg); }
.worries .narrator--intro { justify-content: center; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.worries .narrator--intro .narrator__bubble { flex: 0 1 auto; background: none; border: 0; box-shadow: none; padding: 0; text-align: center; }
.worries .narrator--intro .narrator__bubble::before { display: none; }
.worries .narrator--intro .section__eyebrow { justify-content: center; }
.worries .narrator--intro .section__eyebrow::after { content: ""; width: 1.5rem; height: 2px; background: currentColor; }
.worries__grid { gap: clamp(1rem, 2.5vw, 2rem); }
.worries .worry, .worries .worry:nth-child(n) { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: clamp(1.5rem, 3vw, 2.25rem) var(--space-5); text-align: center; background: var(--c-white); border: 0; border-radius: var(--radius-md); box-shadow: 0 2px 8px rgb(39 65 44 / .08); transform: none; }
.worries .worry > div { order: 1; }
.worries .worry__image { order: 2; width: 7rem; height: 7rem; margin: auto 0 0; }
.worries .worry__title { margin-bottom: var(--space-2); }
@media (min-width: 48rem) { .worries .worry__image { width: 9rem; height: 9rem; } }
.worries > .page-shell { position: relative; }
.worries .narrator--intro { position: relative; }
.worries .narrator--intro .narrator__character { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5.5rem; height: 6rem; }
.worries .narrator--intro .narrator__bubble { padding-inline: 5.5rem 0; }
.worries .narrator--intro .section__eyebrow { font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 800; }
@media (min-width: 48rem) {
  .worries .narrator--intro .narrator__character { left: clamp(0rem, 3vw, 2.5rem); width: 9rem; height: 10rem; }
  .worries .narrator--intro .narrator__bubble { padding-inline: calc(clamp(0rem, 3vw, 2.5rem) + 10rem); }
}

/* お悩み背景：FVと同じ丸を左右交互に */
.worries { overflow: hidden; isolation: isolate; }
.worries > .page-shell { z-index: 1; }
.wv2-deco { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.wv2-deco--1 { width: 11rem; height: 11rem; left: -5rem; top: 6%; background: var(--c-yellow); }
.wv2-deco--2 { width: 26rem; height: 26rem; right: -15rem; top: -6rem; border: 5px dotted var(--c-border); }
.wv2-deco--3 { width: 9rem; height: 9rem; right: -3.5rem; top: 34%; background: var(--c-green); }
.wv2-deco--4 { width: 4rem; height: 4rem; left: 3%; top: 52%; background: var(--c-mint); }
.wv2-deco--5 { width: 28rem; height: 28rem; left: -17rem; bottom: -12rem; border: 5px dotted var(--c-border); }
.wv2-deco--6 { width: 13rem; height: 13rem; right: -6rem; bottom: 4%; background: var(--c-yellow); }
@media (min-width: 48rem) {
  .wv2-deco--1 { width: 15rem; height: 15rem; left: -7rem; }
  .wv2-deco--3 { width: 12rem; height: 12rem; right: -5rem; }
  .wv2-deco--4 { width: 5rem; height: 5rem; }
  .wv2-deco--6 { width: 17rem; height: 17rem; right: -8rem; }
}
/* つよみ6ポイント：キャラクターがカード上端から大きく飛び出すレイアウト */
.strength .benefits { row-gap: 6rem; column-gap: clamp(1rem, 2.5vw, 2rem); margin-top: 6.5rem; }
.strength .benefit, .strength .benefit:nth-child(n) { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3.5rem var(--space-5) var(--space-6); text-align: center; background: var(--c-white); border: 0; border-radius: var(--radius-md); box-shadow: 0 6px 16px rgb(39 65 44 / .08); }
.strength .benefit__mascot { position: absolute; left: 50%; top: 0; width: 7rem; height: 7.5rem; translate: -50% -62%; transform: none; object-fit: contain; filter: drop-shadow(0 8px 6px rgb(37 79 48 / .14)); }
.benefit__point { font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 900; line-height: 1; letter-spacing: .04em; color: var(--c-deep); margin-bottom: var(--space-4); }
.strength .benefit__title { display: inline; padding: 0 .15em; margin-bottom: 0; background: linear-gradient(transparent 58%, var(--c-yellow) 58%); color: var(--c-ink); font-weight: 900; }
.strength .benefit__title::after { display: none; }
.strength .benefit > div { display: flex; flex-direction: column; align-items: center; }
.strength .benefit__text { margin-top: var(--space-4); font-size: var(--fs-small); line-height: 1.8; }
@media (hover:hover) {
  .strength .benefit:hover .benefit__mascot { translate: -50% -66%; transform: rotate(-6deg); }
}
@media (min-width: 48rem) {
  .strength .benefit__mascot { width: 8rem; height: 8.5rem; }
  .strength .benefit, .strength .benefit:nth-child(n) { padding-top: 4rem; }
}
.strength .hv2-actions.strength__cta { display: grid; flex-direction: initial; align-items: initial; margin-top: var(--space-12); }
/* はじめかた3ステップ：STEP見出し＋大きなキャラクター中央 */
#start .steps { gap: var(--space-6); margin-top: var(--space-8); }
#start .step, #start .step:nth-child(n) { display: flex; flex-direction: column; align-items: stretch; padding: var(--space-6) var(--space-6) var(--space-8); background: var(--c-white); border: 0; border-radius: var(--radius-md); box-shadow: 0 6px 16px rgb(39 65 44 / .08); }
#start .step__visual { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); }
#start .step__number, #start .step:nth-child(n) .step__number { width: auto; height: auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 900; line-height: 1; letter-spacing: .04em; color: var(--c-deep); }
#start .step__mascot { width: 9rem; height: 9.5rem; margin: 0; object-fit: contain; }
#start .step__title { text-align: center; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 900; margin-bottom: var(--space-4); }
#start .step__text { text-align: left; font-size: var(--fs-small); line-height: 1.8; color: var(--c-ink); }
@media (min-width: 48rem) {
  #start .steps { gap: var(--space-8); }
  #start .step__mascot { width: 10rem; height: 10.5rem; }
  #start .step + .step::before { left: calc(var(--space-8) / -2 - 1.25rem); top: 50%; transform: translateY(-50%); }
}
/* つかいかた：色パネル＋吹き出しラベル＋横長カードを点線でつなぐ */
.daily > .page-shell { position: relative; padding: var(--space-10) var(--space-4) var(--space-8); background: #7fdcb9; z-index: 1; border-radius: var(--radius-lg); }
.daily .narrator--intro { display: block; position: static; text-align: center; margin-bottom: var(--space-8); }
.daily .narrator--intro .narrator__bubble { position: static; padding: 0; background: none; border: 0; box-shadow: none; }
.daily .narrator--intro .narrator__bubble::before, .daily .narrator--intro .narrator__bubble::after { display: none; }
.daily .narrator--intro .narrator__character { position: absolute; left: var(--space-4); top: 0; width: 5rem; height: 5.5rem; translate: 0 -55%; }
.daily .section__eyebrow { position: absolute; left: 50%; top: 0; translate: -50% -50%; margin: 0; padding: .5em 1.4em; background: var(--c-yellow); color: var(--c-ink); border-radius: var(--radius-pill); font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 800; white-space: nowrap; }
.daily .section__eyebrow::before { display: none; }
.daily .section__eyebrow::after { content: ""; position: absolute; left: 50%; bottom: -.45em; translate: -50% 0; border: .5em solid transparent; border-top-color: var(--c-yellow); border-bottom: 0; }
.daily .section__title { display: grid; justify-items: center; gap: var(--space-2); color: var(--c-ink); }
.daily .section__chunk:last-child { padding: .05em .35em; background: var(--c-deep); color: var(--c-white); border-radius: var(--radius-sm); }
.daily .daily__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: 0; background: none; border: 0; box-shadow: none; max-width: 46rem; margin-inline: auto; }
.daily .scene, .daily .scene:nth-child(n) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--c-white); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgb(0 80 55 / .12); }
.daily .scene + .scene::before { content: ""; position: absolute; left: 50%; top: calc(var(--space-8) * -1); height: var(--space-8); border-left: 3px dotted var(--c-deep); translate: -50% 0; }
.daily .scene__image, .daily .scene:nth-child(n) .scene__image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; border: 0; border-radius: var(--radius-sm); box-shadow: none; transform: none; }
.daily .scene__caption { padding-right: 0; color: var(--c-deep); font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 900; line-height: 1.5; }
.daily .scene__caption span { margin-top: var(--space-2); color: var(--c-ink); font-size: var(--fs-small); font-weight: 500; line-height: 1.8; }
.daily .scene__mascot { display: none; }
@media (hover:hover) { .daily .scene:hover .scene__image { transform: none; } }
@media (min-width: 48rem) {
  .daily > .page-shell { padding: var(--space-12) var(--space-10) var(--space-10); }
  .daily .narrator--intro .narrator__character { left: var(--space-8); width: 7rem; height: 7.5rem; }
  .daily .scene, .daily .scene:nth-child(n) { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); }
}
/* つかいかた：パネル背後のカラフル装飾 */
.daily { position: relative; overflow: hidden; isolation: isolate; padding-top: 6rem; }
@media (min-width: 48rem) { .daily { padding-top: 7.5rem; } }
.dv2-deco { position: absolute; z-index: 0; pointer-events: none; }
.dv2-deco--1 { width: 9rem; height: 9rem; left: 2%; top: 4%; background: var(--c-yellow); border-radius: 50%; }
.dv2-deco--2 { width: 7rem; height: 7rem; right: 4%; top: 10%; background: var(--c-green); border-radius: var(--radius-md); rotate: 18deg; }
.dv2-deco--3 { width: 22rem; height: 22rem; right: -9rem; top: 38%; border: 5px dotted var(--c-border); border-radius: 50%; }
.dv2-deco--4 { left: 1%; top: 48%; width: 0; height: 0; border-left: 3.5rem solid transparent; border-right: 3.5rem solid transparent; border-bottom: 6rem solid var(--c-deep); rotate: -14deg; opacity: .85; }
.dv2-deco--5 { width: 3.5rem; height: 3.5rem; left: 8%; bottom: 8%; background: var(--c-yellow); clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%); rotate: 12deg; }
.dv2-deco--6 { width: 12rem; height: 12rem; right: 3%; bottom: 3%; background: var(--c-mint); border-radius: 50%; }
@media (min-width: 48rem) {
  .dv2-deco--1 { width: 13rem; height: 13rem; left: 3%; }
  .dv2-deco--2 { width: 9rem; height: 9rem; }
  .dv2-deco--5 { width: 4.5rem; height: 4.5rem; }
  .dv2-deco--6 { width: 16rem; height: 16rem; }
}
/* つかいかた：白カード幅をお悩みの3カードと同じ幅に */
.daily > .page-shell, .daily > .page-shell:nth-child(n) { padding-inline: clamp(1rem, 4vw, 3.5rem); }
.daily .daily__grid { max-width: none; margin-inline: 0; }
/* つかいかた：案内キャラクターを右へ・大きく・ラベルの方へ傾ける */
.daily .narrator--intro .narrator__character { left: auto; right: var(--space-4); width: 6.5rem; height: 7rem; translate: 0 -60%; rotate: -10deg; transform-origin: 50% 100%; z-index: 2; }
@media (min-width: 48rem) {
  .daily .narrator--intro .narrator__character { left: auto; right: clamp(2rem, 8vw, 7rem); width: 10rem; height: 10.5rem; translate: 0 -62%; }
}
/* 最終CTA：濃い緑の帯パネル＋白見出し＋白ピルボタン＋右下に大きなキャラクター */
.final-cta { padding-top: var(--space-12); }
.final-cta .final-cta__panel { position: relative; padding: var(--space-10) var(--space-5) var(--space-8); text-align: center; background: var(--c-deep); border: 0; border-radius: var(--radius-md); box-shadow: 0 10px 24px rgb(0 80 55 / .18); color: var(--c-white); }
.final-cta .final-cta__panel::before, .final-cta .final-cta__panel::after { opacity: .18; }
.final-cta .section__eyebrow { justify-content: center; margin-bottom: var(--space-2); color: var(--c-yellow); font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 800; }
.final-cta .section__eyebrow::before { display: none; }
.final-cta .final-cta__title { color: var(--c-white); font-size: clamp(1.625rem, 3.6vw, 2.5rem); font-weight: 900; }
.final-cta .final-cta__price { display: flex; justify-content: center; align-items: center; gap: var(--space-3); margin: var(--space-5) auto var(--space-6); padding: 0; background: none; box-shadow: none; color: var(--c-white); font-weight: 800; }
.final-cta .final-cta__normal { color: var(--c-white); }
.final-cta .final-cta__free { color: var(--c-yellow); transform: none; }
.final-cta .final-cta__free small { color: var(--c-white); }
.fcv2-actions { margin-top: 0; grid-template-columns: minmax(0, 30rem); }
.fcv2-group { display: grid; gap: var(--space-3); }
.fcv2-caption { display: flex; justify-content: center; align-items: center; gap: .6em; color: var(--c-white); font-size: var(--fs-small); font-weight: 700; line-height: 1.5; }
.fcv2-caption::before, .fcv2-caption::after { content: ""; width: 2px; height: 1.6em; background: currentColor; }
.fcv2-caption::before { rotate: -30deg; }
.fcv2-caption::after { rotate: 30deg; }
.final-cta .fcv2-actions .button.final-cta__button { width: 100%; margin: 0; background: var(--c-white); color: var(--c-ink); box-shadow: 0 4px 0 rgb(0 0 0 / .18); }
.final-cta .fcv2-actions .button.final-cta__button .button__arrow { background: var(--c-deep); color: var(--c-white); }
.final-cta .final-cta__note { margin-top: var(--space-4); color: var(--c-white); font-size: var(--fs-small); }
.final-cta .final-cta__mascot { display: block; width: 7rem; height: 7rem; margin: 0 auto var(--space-3); }
@media (min-width: 48rem) {
  .final-cta .final-cta__panel { padding: var(--space-12) clamp(12rem, 20vw, 16rem) var(--space-10); }
  .final-cta .final-cta__mascot, .final-cta .final-cta__mascot:nth-child(n) { position: absolute; left: auto; right: clamp(1rem, 3vw, 3rem); bottom: -1.5rem; width: clamp(10rem, 16vw, 13rem); height: clamp(10rem, 16vw, 13rem); margin: 0; }
}
/* 最終CTA：縦幅を詰める・料金を1行コピーに */
.final-cta .final-cta__panel { padding-block: var(--space-6) var(--space-5); }
.final-cta .final-cta__title { line-height: 1.35; }
.final-cta .final-cta__price { display: block; margin: var(--space-2) auto var(--space-4); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 900; }
.final-cta .final-cta__free { display: inline; font-size: 1.35em; line-height: 1; margin-inline: .1em; }
.final-cta .fcv2-group { gap: var(--space-2); }
.final-cta .final-cta__note { margin-top: var(--space-3); }
.final-cta .final-cta__mascot { width: 5.5rem; height: 5.5rem; margin-bottom: var(--space-2); }
@media (min-width: 48rem) {
  .final-cta .final-cta__panel { padding-block: var(--space-8) var(--space-6); }
  .final-cta .final-cta__mascot, .final-cta .final-cta__mascot:nth-child(n) { width: clamp(9rem, 14vw, 11.5rem); height: clamp(9rem, 14vw, 11.5rem); }
}
/* ヘッダーナビ：アイコン付きリンク＋オレンジのFV型CTA */
.site-header__desktop .hnav__link { display: inline-flex; align-items: center; gap: .4em; }
.hnav__icon { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--c-deep); }
.site-header__desktop .hnav__cta { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 3rem; padding: var(--space-2) 3.25rem var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-pill); background: #f2851f; color: var(--c-white); font-size: var(--fs-small); font-weight: 800; white-space: nowrap; box-shadow: inset 0 2px 1px rgb(255 255 255 / .35), 0 4px 0 #c4650c, 0 8px 14px rgb(196 101 12 / .2); transition: transform var(--motion), box-shadow var(--motion); }
.site-header__desktop .hnav__cta:hover { transform: translateY(2px); box-shadow: inset 0 2px 1px rgb(255 255 255 / .35), 0 2px 0 #c4650c, 0 4px 8px rgb(196 101 12 / .2); }
.hnav__cta .button__icon { width: 1.5rem; height: 1.5rem; }
.hnav__cta .button__arrow { position: absolute; right: var(--space-2); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2rem; height: 2rem; margin: 0; border-radius: 50%; background: var(--c-white); color: #f2851f; font-size: 1rem; font-weight: 900; }
/* ヘッダーの内側幅を広げる */
.site-header .site-header__inner { width: min(calc(100% - 2rem), 80rem); }
/* FV背景写真：薄く半透明 */
.hero--v2 { isolation: isolate; }
.hv2-bgphoto { position: absolute; inset: 0; z-index: 0; opacity: .18; }
.hv2-bgphoto image-slot { display: block; width: 100%; height: 100%; }
.hero--v2 .hv2-deco, .hero--v2 .hv2-layout, .hero--v2 .hv2-actions { z-index: 1; }
.hero--v2 .hv2-layout, .hero--v2 .hv2-actions, .hero--v2 .hv2-copy { pointer-events: none; }
.hero--v2 .hv2-layout a, .hero--v2 .hv2-layout button, .hero--v2 .hv2-actions a, .hero--v2 .hv2-actions button, .hero--v2 .hv2-photo { pointer-events: auto; }
.hv2-bgphoto:not(:has(img)) { opacity: .5; }
.hv2-badge.hv2-badge--wide { width: min(9.5rem, 40vw); height: min(9.5rem, 40vw); font-size: .9375rem; }
@media (min-width: 64rem) { .hv2-badge.hv2-badge--wide { width: 10.5rem; height: 10.5rem; font-size: 1rem; } }
/* 丸バッジ→リード行と同じ幅の長方形 */
.hv2-offer { display: inline-grid; max-width: 100%; }
.hv2-offer .hv2-badges { display: grid; }
.hv2-badge.hv2-badge--rect, .hv2-badge.hv2-badge--rect:nth-child(n) { flex-direction: row; gap: var(--space-3); width: 100%; height: auto; min-height: 4rem; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 800; white-space: nowrap; }
.hv2-badge--rect .hv2-badge__ico { width: 2rem; height: 2rem; margin: 0; }
@media (min-width: 64rem) { .hv2-badge.hv2-badge--rect { min-height: 4.5rem; } }
/* 長方形→背景なし・大きな文字＋下線 */
.hv2-badge.hv2-badge--rect, .hv2-badge.hv2-badge--rect:nth-child(n) { justify-content: flex-start; min-height: 0; padding: 0 0 var(--space-2); background: none; border: 0; border-bottom: 3px solid var(--c-deep); border-radius: 0; box-shadow: none; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 900; }
.hv2-badge--rect .hv2-badge__ico { width: 2.25rem; height: 2.25rem; }
@media (min-width: 64rem) { .hv2-badge.hv2-badge--rect { min-height: 0; } }
.hv2-lead__sub { display: block; margin-top: var(--space-2); font-size: clamp(1.25rem, 2.6vw, 1.875rem); font-weight: 900; line-height: 1.5; color: var(--c-ink); }
.hv2-lead__sub { font-size: clamp(1rem, 2vw, 1.5rem); white-space: nowrap; }
/* FVのCTA2つ：リード下に縦積み */
.hv2-actions.hv2-actions--stack, .hv2-actions.hv2-actions--stack:nth-child(n) { justify-content: start; grid-template-columns: minmax(0, 26rem); gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 48rem) { .hv2-actions.hv2-actions--stack { grid-template-columns: minmax(0, 26rem); gap: var(--space-4); } }
.hero--v2 .hv2-mascot { bottom: 0; }
@media (min-width: 48rem) { .hero--v2 .hv2-mascot { bottom: 1.25rem; } }
/* お悩み見出しを1行で */
.worries #worries-title { display: block; white-space: nowrap; font-size: clamp(1.125rem, 4.2vw, 2.5rem); }
.worries #worries-title .section__chunk { display: inline; }
@media (min-width: 48rem) { .worries #worries-title { font-size: clamp(1.5rem, 3vw, 2.5rem); } }
/* お悩みカード：1枚ずつ傾ける */
.worries .worries__grid .worry:nth-child(1) { transform: rotate(-3deg); }
.worries .worries__grid .worry:nth-child(2) { transform: rotate(2deg); }
.worries .worries__grid .worry:nth-child(3) { transform: rotate(-2deg); }
/* 4カラムとお悩みの間を詰める */
.section.worries { padding-top: var(--space-6); }
.numbers .numbers__grid { padding-bottom: var(--space-4); }
@media (min-width: 48rem) { .section.worries { padding-top: var(--space-8); } .numbers .numbers__grid { padding-bottom: var(--space-4); } }
/* お悩み下の案内：大きなキャラクター＋右上のピル吹き出し */
.worries .guide, .worries .guide:nth-child(n) { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; width: fit-content; margin: var(--space-10) auto 0; padding: 0; background: none; border: 0; box-shadow: none; text-decoration: none; }
.worries .guide__mascot { width: 8rem; height: 8.5rem; object-fit: contain; filter: drop-shadow(0 8px 6px rgb(37 79 48 / .14)); }
.worries .guide__speech, .worries .guide__speech:nth-child(n) { position: relative; align-self: flex-start; margin: 0 0 0 -.5rem; padding: .7em 1.4em; background: var(--c-deep); color: var(--c-white); border: 0; border-radius: var(--radius-pill); box-shadow: none; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 900; line-height: 1.4; white-space: nowrap; }
.worries .guide__speech span { display: inline; color: inherit; }
.worries .guide__speech::before { display: none; }
.worries .guide__speech::after { content: ""; position: absolute; left: 1.5rem; bottom: -.7rem; width: 1.1rem; height: .9rem; background: var(--c-deep); clip-path: polygon(0 0, 100% 0, 15% 100%); border: 0; transform: none; }
.worries .guide:hover .guide__speech { background: #005f42; }
.worries .guide:hover .guide__speech::after { background: #005f42; }
@media (min-width: 48rem) { .worries .guide__mascot { width: 10rem; height: 10.5rem; } }
/* 案内キャラを小さく・パネル下へはみ出し・下余白を詰める */
.worries > .page-shell { padding-bottom: 0; }
.section.worries { padding-bottom: 3.5rem; }
.worries .guide, .worries .guide:nth-child(n) { margin: var(--space-6) auto -3rem; }
.worries .guide__mascot { width: 6.5rem; height: 7rem; }
.worries .guide__speech, .worries .guide__speech:nth-child(n) { font-size: clamp(.875rem, 1.6vw, 1.0625rem); padding: .55em 1.2em; }
@media (min-width: 48rem) { .worries .guide__mascot { width: 7.5rem; height: 8rem; } .section.worries { padding-bottom: 4rem; } .worries .guide, .worries .guide:nth-child(n) { margin-bottom: -3.5rem; } }
/* はみ出し修正：マージン相殺をやめ translate で押し下げ */
.worries .guide, .worries .guide:nth-child(n) { margin-bottom: 0; translate: 0 3rem; }
@media (min-width: 48rem) { .worries .guide, .worries .guide:nth-child(n) { margin-bottom: 0; translate: 0 3.5rem; } }
/* お悩みパネル下中央に、つよみ上部と同じ下向き矢印 */
.worries > .page-shell::after { content: ""; position: absolute; left: calc(50% - 1rem); bottom: -1rem; width: 2rem; height: 2rem; background: var(--c-soft); border-radius: 0 0 var(--radius-sm) 0; transform: rotate(45deg); z-index: -1; }
.worries .guide { z-index: 1; }
.strength::before { display: none; }
.strength .strength__copy .section__eyebrow { background: #f2851f; color: var(--c-white); }
/* つよみ背景：薄黄・薄オレンジ・薄緑のポップ装飾 */
.section.strength { overflow: hidden; isolation: isolate; }
.section.strength > .page-shell { position: relative; z-index: 1; }
.sv2-deco { position: absolute; z-index: 0; pointer-events: none; }
.sv2-deco--1 { width: 12rem; height: 12rem; left: -5rem; top: 4%; background: #fff3b8; border-radius: 50%; }
.sv2-deco--2 { width: 8rem; height: 8rem; right: 4%; top: 6%; background: #ffe0c2; border-radius: var(--radius-md); rotate: 16deg; }
.sv2-deco--3 { width: 26rem; height: 26rem; right: -14rem; top: 28%; border: 5px dotted #fff3b8; border-radius: 50%; }
.sv2-deco--4 { left: 3%; top: 42%; width: 0; height: 0; border-left: 3rem solid transparent; border-right: 3rem solid transparent; border-bottom: 5.25rem solid #ffe0c2; rotate: -12deg; }
.sv2-deco--5 { width: 4rem; height: 4rem; right: 8%; top: 58%; background: #fff3b8; clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%); rotate: 14deg; }
.sv2-deco--6 { width: 15rem; height: 15rem; left: -6rem; bottom: 6%; background: #c9efd8; border-radius: 50%; }
.sv2-deco--7 { width: 10rem; height: 10rem; right: -3rem; bottom: 2%; background: #ffe0c2; border-radius: 50%; }
@media (min-width: 48rem) {
  .sv2-deco--1 { width: 16rem; height: 16rem; }
  .sv2-deco--2 { width: 10rem; height: 10rem; }
  .sv2-deco--5 { width: 5rem; height: 5rem; }
  .sv2-deco--6 { width: 20rem; height: 20rem; }
  .sv2-deco--7 { width: 13rem; height: 13rem; }
}
.section.strength { border-radius: var(--radius-lg); }
.section.strength { border-top: 0; }
/* はじめかた見出し：お悩みと同じ中央見出し・キャラクターは右 */
#start .narrator--intro { position: relative; display: flex; justify-content: center; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
#start .narrator--intro .narrator__bubble { flex: 0 1 auto; background: none; border: 0; box-shadow: none; padding: 0 5.5rem 0 0; text-align: center; }
#start .narrator--intro .narrator__bubble::before, #start .narrator--intro .narrator__bubble::after { display: none; }
#start .narrator--intro .section__eyebrow { justify-content: center; font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 800; }
#start .narrator--intro .section__eyebrow::after { content: ""; width: 1.5rem; height: 2px; background: currentColor; }
#start .narrator--intro .narrator__character { position: absolute; left: auto; right: 0; top: 50%; transform: translateY(-50%); width: 5.5rem; height: 6rem; margin: 0; }
#start #start-title { display: block; white-space: nowrap; font-size: clamp(1.125rem, 4.2vw, 2.5rem); }
#start #start-title .section__chunk { display: inline; }
@media (min-width: 48rem) {
  #start .narrator--intro .narrator__character { right: clamp(0rem, 3vw, 2.5rem); width: 9rem; height: 10rem; }
  #start .narrator--intro .narrator__bubble { padding-inline: calc(clamp(0rem, 3vw, 2.5rem) + 10rem); }
  #start #start-title { font-size: clamp(1.5rem, 3vw, 2.5rem); }
}
/* STEP間の矢印：大きく・濃い緑の丸に白矢印 */
@media (min-width: 48rem) {
  #start .step { position: relative; }
  #start .step + .step::before { display: grid; place-items: center; left: calc(var(--space-8) / -2 - 1.75rem); top: 50%; width: 3.5rem; height: 3.5rem; line-height: 1; transform: translateY(-50%); background: var(--c-deep); color: var(--c-white); font-size: 1.5rem; font-weight: 900; box-shadow: 0 4px 10px rgb(0 80 55 / .2); z-index: 2; }
}
@media (min-width: 48rem) { #start .step + .step::before { border: 0; outline: 0; } }
/* つかいかた上部の余白を詰める */
.section#start { padding-bottom: var(--space-6); }
.section.daily { padding-top: 5rem; }
@media (min-width: 48rem) { .section#start { padding-bottom: var(--space-8); } .section.daily { padding-top: 7.25rem; } }
/* つかいかた：キャラクターを見出しの右へ */
.daily .narrator--intro { position: relative; }
.daily .section__eyebrow { top: calc(var(--space-10) * -1); }
.daily .narrator--intro .narrator__bubble { padding-inline: 5rem; }
.daily .narrator--intro .narrator__character, .daily .narrator--intro .narrator__character:nth-child(n) { left: auto; right: 0; top: 50%; width: 4.5rem; height: 5rem; translate: 0 -50%; rotate: 0deg; }
.section.daily { padding-top: 3.5rem; }
@media (min-width: 48rem) {
  .daily .section__eyebrow { top: calc(var(--space-12) * -1); }
  .daily .narrator--intro .narrator__bubble { padding-inline: calc(clamp(0rem, 3vw, 2.5rem) + 10rem); }
  .daily .narrator--intro .narrator__character, .daily .narrator--intro .narrator__character:nth-child(n) { right: clamp(0rem, 3vw, 2.5rem); width: 9rem; height: 10rem; translate: 0 -50%; }
  .section.daily { padding-top: 4rem; }
}
/* つかいかた：緑パネル100%幅・3枚を全幅の自動スライダーに */
.section.daily > .page-shell { width: 100%; max-width: none; border-radius: 0; padding-inline: 0; }
.daily .narrator--intro { width: min(calc(100% - 2rem), var(--width-page)); margin-inline: auto; }
.daily__slider { overflow: hidden; width: 100%; }
.daily .daily__grid.daily__track { display: flex; flex-wrap: nowrap; --slide-gap: var(--space-5); gap: var(--slide-gap); width: max-content; max-width: none; margin: 0; padding: 0; animation: dailySlide 40s linear infinite; }
.daily__slider:hover .daily__track { animation-play-state: paused; }
.daily .daily__track .scene, .daily .daily__track .scene:nth-child(n) { display: flex; flex-direction: column; align-items: stretch; gap: 0; flex: 0 0 auto; width: min(78vw, 26rem); padding: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--c-white); }
.daily .daily__track .scene + .scene::before { display: none; }
.daily .daily__track .scene__image { aspect-ratio: 4 / 3; border-radius: 0; }
.daily .daily__track .scene__caption { padding: var(--space-4) var(--space-5) var(--space-5); }
@keyframes dailySlide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--slide-gap) / 2)); } }
@media (min-width: 48rem) {
  .daily .daily__track .scene, .daily .daily__track .scene:nth-child(n) { width: 36vw; max-width: 34rem; padding: 0; }
  .daily .daily__grid.daily__track { --slide-gap: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { .daily .daily__track { animation: none; } .daily__slider { overflow-x: auto; } }
/* スライダーを横長に */
.daily .daily__track .scene__image { aspect-ratio: 16 / 9; }
.daily .daily__track .scene__caption { padding: var(--space-3) var(--space-5) var(--space-4); }
/* つかいかた背景：濃い緑 */
.section.daily > .page-shell { background: var(--c-deep); }
.daily .section__title { color: var(--c-white); }
.daily .section__chunk:last-child { background: var(--c-yellow); color: var(--c-ink); }
.daily .daily__track .scene:nth-child(n) .scene__image { aspect-ratio: 16 / 9; border-radius: 0; }
.daily .daily__track .scene:nth-child(n) .scene__image { aspect-ratio: 2 / 1; }
.section.daily { padding-bottom: 0; }
/* 英単語帳：タグを大きく・オレンジ・見出しの前に */
.words .words__tag { display: inline-flex; align-items: center; margin: 0 0 var(--space-4); padding: .45em 1.2em; background: #f2851f; color: var(--c-white); border: 0; border-radius: var(--radius-pill); font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 900; line-height: 1.4; }
.words .words__tag + .section__eyebrow { display: block; margin-bottom: var(--space-2); }
/* 英単語帳リスト：内容に合わせたアイコン */
.words .words__list li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.words .words__list li::before { content: ""; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-deep) var(--ico-mask, none) center / 1.25rem no-repeat; -webkit-mask: none; }
.words .words__list li::before { background: var(--c-deep); -webkit-mask: none; }
.words .words__list li { position: relative; }
.words .words__list li::after { content: ""; position: absolute; left: .5rem; top: 50%; translate: 0 -50%; width: 1.25rem; height: 1.25rem; background: var(--c-white); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.words .words__list li:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16%203h5v5'%2F%3E%3Cpath%20d%3D'M4%2020L21%203'%2F%3E%3Cpath%20d%3D'M21%2016v5h-5'%2F%3E%3Cpath%20d%3D'M15%2015l6%206'%2F%3E%3Cpath%20d%3D'M4%204l5%205'%2F%3E%3C%2Fsvg%3E"); }
.words .words__list li:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%205a2%202%200%200%201%202-2h13v15H6a2%202%200%200%200-2%202z'%2F%3E%3Cpath%20d%3D'M4%2020a2%202%200%200%200%202%202h13v-4'%2F%3E%3Cpath%20d%3D'M12%207l1.2%202.4%202.6.4-1.9%201.8.5%202.6-2.4-1.3-2.4%201.3.5-2.6-1.9-1.8%202.6-.4z'%2F%3E%3C%2Fsvg%3E"); }
.words .words__list li:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'7'%20y%3D'3'%20width%3D'13'%20height%3D'16'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M4%207v12a2%202%200%200%200%202%202h9'%2F%3E%3Cpath%20d%3D'M11%209h5M11%2013h3'%2F%3E%3C%2Fsvg%3E"); }
.words .words__note { margin-top: var(--space-10); text-align: center; font-size: .75rem; }
#teacher .teacher__card { background: none; border: 0; box-shadow: none; }
/* 講師紹介：写真30%・テキスト60% */
@media (min-width: 48rem) {
  #teacher .teacher__card { grid-template-columns: 30fr 60fr; gap: 10%; padding-inline: 0; }
  #teacher .teacher__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 22rem; }
  #teacher .teacher__portrait { width: 100%; }
}
/* 講師紹介：参考レイアウト（角丸写真＋星形装飾、右は縦線付きの見出しと本文） */
#teacher .teacher__portrait { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); text-align: left; }
#teacher .teacher__photo { position: relative; z-index: 1; width: 100%; max-width: 22rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 0; border-radius: var(--radius-lg); box-shadow: 8px 8px 0 var(--c-yellow); }
#teacher .teacher__portrait::before { content: ""; position: absolute; z-index: 2; left: -1.25rem; top: -1.25rem; width: 3.5rem; height: 3.5rem; background: var(--c-green); border-radius: 50%; }
#teacher .teacher__portrait::after { content: ""; position: absolute; z-index: 2; right: max(-1.5rem, calc(100% - 23.5rem)); top: min(calc(100% * .62), 24rem); width: 4.5rem; height: 4.5rem; background: #f2851f; clip-path: polygon(50% 0, 61% 31%, 95% 25%, 72% 50%, 95% 75%, 61% 69%, 50% 100%, 39% 69%, 5% 75%, 28% 50%, 5% 25%, 39% 31%); rotate: 12deg; }
#teacher .teacher__name { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 900; color: var(--c-ink); }
#teacher .teacher__subjects { margin-top: var(--space-1); color: var(--c-deep); font-weight: 700; }
#teacher .teacher__card > div:last-child { position: relative; padding-left: var(--space-6); border-left: 3px solid var(--c-deep); }
#teacher .teacher__quote { padding: 0; border: 0; margin-bottom: var(--space-5); color: var(--c-deep); font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 900; line-height: 1.5; }
#teacher .teacher__quote::before { display: none; }
#teacher .teacher__message { color: var(--c-ink); line-height: 1.9; }
@media (min-width: 48rem) {
  #teacher .teacher__card { align-items: center; }
  #teacher .teacher__portrait::after { width: 5.5rem; height: 5.5rem; }
}
#teacher .teacher__photo { border-radius: 0; box-shadow: none; z-index: 1; }
#teacher .teacher__portrait { isolation: isolate; }
#teacher .teacher__portrait::before, #teacher .teacher__portrait::after { z-index: 0; }
#teacher .teacher__portrait::before { left: -1.75rem; top: -1.75rem; width: 5rem; height: 5rem; }
#teacher .teacher__portrait::after { right: auto; left: min(calc(100% - 3rem), 19.5rem); top: min(calc(100% * .58), 22rem); width: 6rem; height: 6rem; }
#teacher .teacher__portrait > div { width: 100%; max-width: 22rem; text-align: center; }
/* 講師紹介 案：見出しを右カラムの引用の上へ */
.teacher--alt .teacher__card { margin-top: 0; }
.teacher--alt .teacher__card .narrator--intro { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; }
.teacher--alt .teacher__card .narrator__character { position: static; flex: 0 0 auto; width: 4.5rem; height: 5rem; margin: 0; transform: none; translate: none; }
.teacher--alt .teacher__card .narrator__bubble { flex: 1 1 auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; }
.teacher--alt .teacher__card .narrator__bubble::before, .teacher--alt .teacher__card .narrator__bubble::after { display: none; }
.teacher--alt .teacher__card .section__eyebrow { justify-content: flex-start; margin-bottom: var(--space-1); }
.teacher--alt .teacher__card .section__title { font-size: clamp(1.125rem, 2vw, 1.5rem); text-align: left; }
/* 講師名・担当を中央に */
#teacher .teacher__portrait > div { align-self: stretch; text-align: center; max-width: 22rem; }
/* 案B：講師紹介の吹き出しを右カラム上部に（縦線グループの外） */
.teacher--b .teacher__card { align-items: start; }
#teacher.teacher--b .teacher__card > div:last-child { padding-left: 0; border-left: 0; }
.teacher--b .teacher__card > div:last-child .narrator--intro { margin: 0 0 var(--space-6); }
.teacher--b .teacher__body { padding-left: var(--space-6); border-left: 3px solid var(--c-deep); }
#teacher .narrator--intro .section__eyebrow::before { display: none; }
/* 案B：講師紹介の吹き出し — キャラ拡大・上下余白を詰める */
#teacher.teacher--b .narrator--intro .narrator__character { width: 6.5rem; height: 7rem; }
#teacher.teacher--b .narrator--intro .narrator__bubble { padding-block: var(--space-3); }
#teacher.teacher--b .narrator--intro .section__eyebrow { margin-bottom: var(--space-1); }
#teacher.teacher--b .teacher__card > div:last-child .narrator--intro { margin-bottom: var(--space-4); }
@media (min-width: 48rem) { #teacher.teacher--b .narrator--intro .narrator__character { width: 8rem; height: 8.5rem; } }
/* タブレット・スマホ（〜1023px）：FVは写真が上・コピーが下 */
@media (max-width: 63.999rem) {
  .hv2-layout { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-10); }
  .hv2-photo { order: -1; width: min(100%, 34rem); margin-inline: auto; }
  .hv2-copy { text-align: center; }
  .hv2-row, .hv2-lead__main { justify-content: center; }
  .hv2-offer { margin-inline: auto; }
  .hv2-actions.hv2-actions--stack, .hv2-actions.hv2-actions--stack:nth-child(n) { justify-content: center; }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .hv2-photo { width: min(80%, 32rem); }
  .hv2-title { font-size: 4.25rem; }
}
@media (max-width: 63.999rem) { .hv2-img { aspect-ratio: 4 / 3; } }
/* タブレット・スマホ：FVキャラクターを写真の右下・少し小さく */
@media (max-width: 63.999rem) {
  .hero--v2 .hv2-mascot { left: auto; right: -.5rem; bottom: -1rem; flex-direction: row-reverse; }
  .hero--v2 .hv2-mascot img { width: 4.5rem; }
  .hero--v2 .hv2-mascot p { margin-bottom: 2.75rem; border-radius: var(--radius-md) var(--radius-md) var(--space-1) var(--radius-md); }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .hero--v2 .hv2-mascot { right: -1rem; bottom: -1rem; }
  .hero--v2 .hv2-mascot img { width: 5.75rem; }
  .hero--v2 .hv2-mascot p { margin-bottom: 3.25rem; }
}
/* つよみ：シール貼りアニメーション（assets/js/sticker.js） */
.strength .benefits.sticker-ready .benefit { opacity: 0; transform-origin: 50% 0; }
.strength .benefits.sticker-ready .benefit.is-stuck, .strength .benefits.sticker-ready .benefit.is-stuck.motion-arrive { animation: sticker-peel 760ms cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i, 0) * 160ms); }
@keyframes sticker-peel {
  0% { opacity: 0; transform: perspective(900px) translateY(-18px) rotateX(-70deg) rotate(-4deg) scale(1.04); box-shadow: 0 24px 30px rgb(39 65 44 / .22); }
  45% { opacity: 1; transform: perspective(900px) translateY(0) rotateX(12deg) rotate(1deg) scale(1.01); }
  70% { transform: perspective(900px) rotateX(-4deg) rotate(-.5deg); }
  100% { opacity: 1; transform: none; box-shadow: 0 6px 16px rgb(39 65 44 / .08); }
}
/* FV写真：表示時に右の画面外から、左上を支点に落ちてくる */
.hero--v2 .hv2-photo { transform-origin: 100% 0; animation: hv2-drop 1.9s cubic-bezier(.33,.0,.2,1) .15s both; }
.hero--v2 .hv2-mascot { animation: hv2-mascot-in .5s ease-out 1.9s both; }
@keyframes hv2-drop {
  0% { translate: -12vw -110vh; rotate: -200deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes hv2-mascot-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hero--v2 .hv2-photo, .hero--v2 .hv2-mascot { animation: none; } }
/* FV下4カラム：FV終了後、画面に入ったら左から順にフェードアップ（assets/js/numbers-reveal.js） */
.numbers.reveal-ready .numbers__item { opacity: 0; translate: 0 24px; }
.numbers.reveal-ready.is-in .numbers__item { animation: num-pop .7s cubic-bezier(.25,.8,.3,1) both; }
.numbers.is-in .numbers__item:nth-child(1) { animation-delay: 0s; }
.numbers.is-in .numbers__item:nth-child(2) { animation-delay: .15s; }
.numbers.is-in .numbers__item:nth-child(3) { animation-delay: .3s; }
.numbers.is-in .numbers__item:nth-child(4) { animation-delay: .45s; }
@keyframes num-pop { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
/* お悩み3カード：風にあおられた紙のように左右から舞い込む（assets/js/wind.js） */
.worries .worry.wind-ready { opacity: 0; }
.worries .worry.wind-ready { will-change: translate, rotate, opacity; }
.worries .worry.wind-ready.is-landed { animation: wind-left 1.6s cubic-bezier(.22,.61,.36,1) var(--wd, 0s) both; }
.worries .worries__grid .worry.wind-ready.is-landed:nth-child(even) { animation-name: wind-right; }
.worries .worries__grid .worry.wind-ready.is-landed:nth-child(3) { animation-name: wind-right; }
@keyframes wind-left {
  0% { opacity: 0; translate: -45vw -30px; rotate: -18deg; }
  20% { opacity: 1; }
  55% { translate: 2vw -6px; rotate: 5deg; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  80% { translate: -.4vw 2px; rotate: -1.5deg; scale: 1.02; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes wind-right {
  0% { opacity: 0; translate: 45vw -30px; rotate: 18deg; }
  20% { opacity: 1; }
  55% { translate: -2vw -6px; rotate: -5deg; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  80% { translate: .4vw 2px; rotate: 1.5deg; scale: 1.02; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
.worries { overflow-x: clip; }
.worries .worries__grid .worry:nth-child(1) { --tilt: -3deg; }
.worries .worries__grid .worry:nth-child(2) { --tilt: 2deg; }
.worries .worries__grid .worry:nth-child(3) { --tilt: -2deg; }
/* つよみ6ポイント：お悩みと同じ風の舞い込み（assets/js/sticker.js） */
.strength .benefits.wind-grid .benefit.wind-ready { opacity: 0; will-change: translate, rotate, opacity; }
.strength .benefits.wind-grid .benefit.wind-ready.is-landed, .strength .benefits.wind-grid .benefit.wind-ready.is-landed.motion-arrive { animation: wind-left 1.6s cubic-bezier(.22,.61,.36,1) var(--wd, 0s) both; }
.strength .benefits.wind-grid .benefit.wind-ready.is-landed:nth-child(even) { animation-name: wind-right; }
@media (max-width: 47.999rem) {
  .strength .benefits.wind-grid .benefit.wind-ready.is-landed:nth-child(odd) { animation-name: wind-left; }
}
.section.strength { overflow-x: clip; }
/* はじめかた3ステップ：左から順に薄い黄色へ切り替わるループ */
#start .step, #start .step:nth-child(n) { animation: step-glow 7.5s ease-in-out infinite; }
#start .step:nth-child(1) { animation-delay: 0s; }
#start .step:nth-child(2) { animation-delay: 2.5s; }
#start .step:nth-child(3) { animation-delay: 5s; }
@keyframes step-glow {
  0%, 33.33%, 100% { background-color: var(--c-white); }
  6%, 27% { background-color: #fff6c7; }
}
@media (prefers-reduced-motion: reduce) { #start .step, #start .step:nth-child(n) { animation: none; } }
#teacher.teacher--b .teacher__card > div:last-child .narrator--intro { margin-bottom: var(--space-8); }
/* 最終CTA：ホバーで緑パネルが画面幅100%に広がる */
.section.final-cta { overflow: clip; }

@media (prefers-reduced-motion: reduce) { .final-cta .final-cta__panel { transition: none; } }
/* 最終CTA：緑の枠そのものが上下左右に伸び、外すと縮む（中身・装飾は固定） */
.final-cta .final-cta__panel { isolation: isolate; background: transparent; box-shadow: none; }
.fcv2-bg { position: absolute; z-index: -1; inset: 0; background: var(--c-deep); border-radius: var(--radius-md); box-shadow: 0 10px 24px rgb(0 80 55 / .18); pointer-events: none;
  transition: inset .45s cubic-bezier(.55,0,.35,1), border-radius .45s cubic-bezier(.55,0,.35,1); }
@media (hover: hover) {
  .final-cta .final-cta__panel:hover .fcv2-bg { inset: -60px calc((100% - 100vw) / 2); border-radius: 0;
    transition: inset .6s cubic-bezier(.22,.61,.36,1), border-radius .6s cubic-bezier(.22,.61,.36,1); }
}
@media (prefers-reduced-motion: reduce) { .fcv2-bg, .final-cta .final-cta__panel:hover .fcv2-bg { transition: none; } }
/* タイトル横・FVのキャラクター：ウィンドウ幅に合わせて縮む */
.worries .narrator--intro, #start .narrator--intro, .daily .narrator--intro { --chw: clamp(3.25rem, 12vw, 9rem); --cho: clamp(0rem, 3vw, 2.5rem); }
.worries .narrator--intro .narrator__character,
#start .narrator--intro .narrator__character,
.daily .narrator--intro .narrator__character, .daily .narrator--intro .narrator__character:nth-child(n) { width: var(--chw); height: auto; aspect-ratio: 9 / 10; object-fit: contain; }
.worries .narrator--intro .narrator__character { left: var(--cho); }
#start .narrator--intro .narrator__character, .daily .narrator--intro .narrator__character, .daily .narrator--intro .narrator__character:nth-child(n) { right: var(--cho); }
.worries .narrator--intro .narrator__bubble { padding-inline: calc(var(--cho) + var(--chw) + .5rem) 0; }
#start .narrator--intro .narrator__bubble, .daily .narrator--intro .narrator__bubble { padding-inline: 0 calc(var(--cho) + var(--chw) + .5rem); }
@media (min-width: 48rem) {
  .worries .narrator--intro .narrator__bubble, #start .narrator--intro .narrator__bubble, .daily .narrator--intro .narrator__bubble { padding-inline: calc(var(--cho) + var(--chw) + 1rem); }
}
#teacher.teacher--b .narrator--intro .narrator__character { width: clamp(4rem, 10vw, 8rem); height: auto; aspect-ratio: 16 / 17; }
.hero--v2 .hv2-mascot img, .hero--v2 .hv2-mascot img:nth-child(n) { width: clamp(4rem, 12vw, 12rem); }
.hero--v2 .hv2-mascot p { margin-bottom: clamp(2.5rem, 8.5vw, 9rem); }
/* FV背景写真：クリーム色を重ねて半透明になじませる */
.hero.hero--v2 { background:
  linear-gradient(90deg, rgb(250 248 239 / .88) 0%, rgb(250 248 239 / .72) 40%, rgb(250 248 239 / .5) 100%),
  linear-gradient(180deg, rgb(250 248 239 / 0) 70%, rgb(250 248 239 / 1) 100%),
  url("../img/fv_bg_img.webp?v=3") 75% center / cover no-repeat,
  var(--c-cream); }
.hv2-bgphoto { display: none; }
@media (max-width: 63.999rem) {
  .hero.hero--v2 { background:
    linear-gradient(180deg, rgb(250 248 239 / .62) 0%, rgb(250 248 239 / .78) 55%, rgb(250 248 239 / 1) 100%),
    url("../img/fv_bg_img.webp?v=3") 72% top / cover no-repeat,
    var(--c-cream); }
}
/* よくある質問 */
.faq__head { position: relative; display: grid; justify-items: center; gap: var(--space-1); margin-bottom: var(--space-8); text-align: center; }
.faq__eyebrow { color: var(--c-deep); font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 900; letter-spacing: .08em; }
.faq__title { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 900; }
.faq__character { position: absolute; right: clamp(0rem, 3vw, 2.5rem); top: 50%; translate: 0 -50%; width: clamp(3.5rem, 12vw, 9rem); height: auto; }
.faq__list { display: grid; gap: var(--space-4); }
.faq__item { background: var(--c-white); border-radius: var(--radius-md); box-shadow: 0 6px 16px rgb(39 65 44 / .08); overflow: hidden; }
.faq__q { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-size: clamp(1rem, 1.8vw, 1.125rem); font-weight: 800; color: var(--c-ink); }
.faq__q::-webkit-details-marker { display: none; }
.faq__qtext { flex: 1 1 auto; min-width: 0; }
.faq__mark { flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-deep); color: var(--c-white); font-size: 1.125rem; font-weight: 900; line-height: 1; }
.faq__mark--a { background: #f2851f; }
.faq__toggle { position: relative; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }
.faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: var(--c-deep); transition: rotate var(--motion); }
.faq__toggle::after { rotate: 90deg; }
.faq__item[open] .faq__toggle::after { rotate: 0deg; }
.faq__a { display: flex; align-items: flex-start; gap: var(--space-4); margin: 0 var(--space-5); padding: var(--space-4) 0 var(--space-5); border-top: 1.5px dashed var(--c-border); }
.faq__a p { padding-top: .45rem; font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink); }
.faq__q:hover .faq__qtext { color: var(--c-deep); }
@media (max-width: 47.999rem) { .faq__head { padding-right: calc(clamp(3.5rem, 12vw, 9rem) + .5rem); justify-items: start; text-align: left; } }
.section.faq { background: #e6f6ee; }