/* =========================================================
   配信画面（ステージ）
     ・画面の中央に「16:9の映像＋下のバー」を置く。まわりは黒
     ・横100% か 縦100% の先に当たったほうで止める（＝はみ出さない）
     ・ページはスクロールしても動かない。
       スクロール量＝シークバーの進み具合で、内容が上下に入れ替わる
     ・高さを稼ぐのは #scrollTrack（空のブロック）だけ
   ========================================================= */
:root {
    --seek-h: clamp(58px, 6.2vw, 82px);   /* 下のバーの高さ（opening.css の --op-bar-h と揃える） */
    --chat-w: min(320px, 31vw);           /* コメント欄の幅（live.css と共用） */
    /* 画面の端からの余白。広い画面では、内容を1240px幅のまとまりに寄せる
       （左右に広がりすぎて真ん中が空くのを防ぐ） */
    --edge: max(clamp(22px, 2.4vw, 34px), calc((100% - 1240px) / 2));
    /* 立ち絵の幅（live.css と共用）。
       この値から「顔の下の位置」を計算して、文字がかぶらないようにしている */
    --chara-w: min(58%, 760px, 70svh);
    /* お問い合わせボタンの大きさと位置（▼の位置合わせにも使う） */
    --fab: clamp(112px, 11.4vw, 162px);
    --fab-bottom: clamp(16px, 2.4vw, 32px);
    --fab-right: var(--edge);
}

body.is-stage {
    overflow-x: hidden;
    background: var(--bd-base, #F7FBFB);
}

/* スクロールバーは出さない。
   ・進み具合は下の赤いバーで見せているので不要
   ・スクロールバーの上だけはCSSでカーソルを変えられない（標準の矢印になる）ため、
     右端だけカーソルが変わって見えるのを防ぐ
   ホイール・キー・タッチでのスクロールはそのまま効く */
html.is-stage-page {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 旧Edge */
}
html.is-stage-page::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- スクロール量をつくるだけの空要素 ---------- */
.scroll-track {
    position: relative;
    z-index: -2;
    width: 100%;
    pointer-events: none;
}

/* =========================================================
   配信画面の箱
   どの横幅でも画面いっぱい。赤いバーは画面のいちばん下。
   ========================================================= */
.screen {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bd-base, #F7FBFB);
}

/* 背景と本文が入るところ（バーの上ぜんぶ） */
.screen-view {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 配信オーバーレイらしい飾り枠（角丸・ピンク＋白＋水色の三重線） */
.screen-view::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2.5px solid rgba(255,159,198,.85);
    border-radius: 20px;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.6),
                inset 0 0 0 6.5px rgba(169,212,255,.8);
    pointer-events: none;
    z-index: 105;
}
@media (max-width: 760px) {
    .screen-view::after { inset: 6px; border-radius: 14px; }
}

/* 背景・本文はこの中いっぱいに置く */
.backdrop,
.stage { position: absolute; inset: 0; }
.stage { z-index: 1; overflow: hidden; }

/* =========================================================
   1画面ぶんの内容
   ========================================================= */
.chapter {
    position: absolute;
    inset: 0;
    /* はみ出しても内側にスクロールバーを出さない（見た目を崩さないため） */
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 58px clamp(16px, 3vw, 34px) 150px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}
.chapter::-webkit-scrollbar { width: 0; height: 0; }
.chapter.is-live { visibility: visible; }

.chapter-inner {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

/* コメント欄（左）のぶん、本文を右に寄せる（重ならないように） */
@media (min-width: 761px) {
    .chapter {
        padding-left: calc(var(--edge) + var(--chat-w) + 28px);
        padding-right: var(--edge);
    }
}

/* ---------- トップ ---------- */
.chapter--top { justify-content: flex-end; }

/* 袋文字のテロップ（白フチ＋影） */
.telop {
    margin: 0 0 4vh;
    text-align: center;
    line-height: 1.3;
    transform: rotate(-2deg);
}
.telop-sub,
.telop-main,
.work-cap {
    display: block;
    font-weight: 900;
    letter-spacing: .02em;
    /* 白いフチ（古いブラウザ用。8方向に影を重ねる） */
    text-shadow:
        -3px -3px 0 #fff,  3px -3px 0 #fff,
        -3px  3px 0 #fff,  3px  3px 0 #fff,
        -4px  0   0 #fff,  4px  0   0 #fff,
         0   -4px 0 #fff,  0    4px 0 #fff,
         0    10px 22px rgba(236,72,153,.25);
}

/* いまのブラウザは、文字の輪郭をそのまま太らせる（角がつるんとする） */
/* 白フチの太さは文字サイズに比例させる（em指定）。
   px固定だと、小さい画面で文字よりフチのほうが目立ってしまう */
@supports (paint-order: stroke) {
    .telop-sub,
    .telop-main,
    .work-cap {
        text-shadow: none;
        paint-order: stroke fill;
        -webkit-text-stroke: .24em #fff;
        filter: drop-shadow(0 8px 18px rgba(236,72,153,.26));
    }
    .telop-main { -webkit-text-stroke-width: .22em; }
    .work-cap   { -webkit-text-stroke-width: .24em; }
}
.telop-sub {
    font-size: clamp(16px, 2.3vw, 30px);
    color: #4E7BB8;
}
.telop-main {
    margin-top: .1em;
    font-size: clamp(30px, 5.4vw, 68px);
    color: #EC4899;
}

/* ---------- スクロール案内（棒が下へシュッと動く） ---------- */
.scroll-hint {
    margin-top: 1.6vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.scroll-hint-track {
    position: relative;
    width: 5px;
    height: clamp(54px, 5.4vw, 72px);
    border-radius: 5px;
    background: rgba(255,255,255,.8);
    box-shadow: 0 2px 8px rgba(23,49,58,.12);
    overflow: hidden;
}
.scroll-hint-bar {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 38%;
    border-radius: 5px;
    background: #8d9aab;
    animation: scroll-bar 2.1s cubic-bezier(.45,0,.2,1) infinite;
}
.scroll-hint-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;
    color: #6f7f92;
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
@keyframes scroll-bar {
    0%        { transform: translateY(-100%); }
    20%       { transform: translateY(-100%); }
    70%       { transform: translateY(165%); }
    100%      { transform: translateY(165%); }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-hint-bar { animation: none; transform: translateY(30%); }
}

/* ---------- キャラのひとこと（トップと同じ袋文字） ---------- */
/* キャラの顔の下から始める。
   顔の下 ≒ 立ち絵の上端(15svh) + 立ち絵の高さ(--chara-w × 1.6) の約25% */
.chapter--talk {
    justify-content: flex-start;
    padding-top: calc(15svh + var(--chara-w) * .4 + 18px);
    padding-bottom: 40px;
}

/* 画面に出す質問（コメント欄のスパチャと同じ文）。
   左にしっぽ＝左から言葉が出てくる感じ */
.q-bubble {
    position: relative;
    max-width: min(480px, 100%);
    margin: 0 auto 1.4em;
    padding: .8em 1.2em;
    border: 2px solid var(--mint-d, #7FB6F2);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(23,49,58,.16);
    color: #34527A;
    font-size: clamp(13px, 1.6vw, 18px);
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
}
/* 折り返すときは、文節の切れ目で折り返す（単語の途中で切らない） */
.q-bubble > span { display: inline-block; }

.q-bubble::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 16px; height: 16px;
    background: #fff;
    border-left: 2px solid var(--mint-d, #7FB6F2);
    border-bottom: 2px solid var(--mint-d, #7FB6F2);
    transform: translateY(-50%) rotate(45deg);
}

/* 狭いときだけ折り返す（単語の途中で切らない） */
.telop-main > span { display: inline-block; }

/* 注釈（小さく添える） */
.telop-sub--2 { margin-top: .25em; }

.telop-note {
    display: block;
    margin-top: .5em;
    font-size: clamp(10px, 1.05vw, 13px);
    font-weight: 700;
    color: #6f7f92;
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
@supports (paint-order: stroke) {
    .telop-note { -webkit-text-stroke: .28em #fff; paint-order: stroke fill; text-shadow: none; }
}
/* 2行に折り返すので、少しだけ小さく */
.telop--talk .telop-main { font-size: clamp(21px, 3.6vw, 44px); }

/* ---------- 実績（1件ずつ） ---------- */
.chapter--work { justify-content: center; }

.work {
    /* キャラの顔より下に出したいので、少し下げる */
    margin: 10vh 0 0;
    text-align: center;
}
.work-shot {
    position: relative;
    /* 52svh の上限は、背の低い画面で紹介文まで収めるため */
    width: min(520px, 100%, 52svh);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #e9eef8;
    border: 3px solid #fff;
    box-shadow: 0 18px 44px rgba(23,49,58,.22);
}
.work-link {
    display: block;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.work-link:hover { transform: translateY(-4px); }
.work-link:hover .work-shot { box-shadow: 0 24px 54px rgba(23,49,58,.3); }

.work-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 公開前はぼかす（暗くしすぎず、少し明るめのグレーに） */
.work--soon .work-shot {
    background: #8f9bc0;
}
.work--soon .work-shot img {
    filter: grayscale(1) blur(14px) brightness(1.02) contrast(.55);
    opacity: .6;
    transform: scale(1.06);
}
.work-soon-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: .4em 1.2em;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    background: rgba(40,48,78,.62);
    color: #fff;
    font-size: clamp(12px, 1.2vw, 15px);
    font-weight: 700;
    letter-spacing: .12em;
    white-space: nowrap;
}

.work-cap {
    margin-top: .7em;
    font-size: clamp(15px, 2vw, 26px);
    font-weight: 900;
    color: #4E7BB8;
}
/* 名前を伏せるバー */
.work-hidden {
    display: inline-block;
    width: 6.5em;
    height: .85em;
    margin: 0 .1em -.05em;
    border-radius: 4px;
    background: rgba(78,123,184,.35);
    -webkit-text-stroke: 0;
}
.work-desc {
    max-width: min(520px, 100%);
    margin: .7em auto 0;
    padding: .75em 1.1em;
    border: 2px solid var(--mint-d, #7FB6F2);
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    color: #3E5F8A;
    font-size: clamp(12px, 1.25vw, 15px);
    font-weight: 500;
    line-height: 1.75;
    text-align: left;
}

.work-note {
    margin: .35em 0 0;
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 700;
    letter-spacing: .08em;
    color: #7C93B5;
}

/* 着地したあとにポンッと出す */
.telop.is-in,
.work.is-in {
    animation: telop-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes telop-pop {
    from { opacity: 0; transform: rotate(-2deg) translateY(18px) scale(.9); }
    to   { opacity: 1; transform: rotate(-2deg) translateY(0) scale(1); }
}
.work.is-in { animation-name: work-pop; }
@keyframes work-pop {
    from { opacity: 0; transform: translateY(20px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .telop.is-in, .work.is-in { animation: none; }
}
/* フォームは背が高いので、1画面に収まるまで詰める */
.chapter--form .chapter-inner { max-width: 560px; }
.chapter--form .section-title { font-size: clamp(18px, 2vw, 24px); }
.stage .contact-form { padding: 1.1em 1.3em; }
.stage .cf-group { margin-bottom: .55em; }
.stage .cf-group label { margin-bottom: .25em; font-size: 13px; }
.stage .cf-group input,
.stage .cf-group select,
.stage .cf-group textarea { padding: .45em .8em; font-size: 14px; }
.stage .cf-actions .btn { padding: .6em 1.7em; }
.stage .section-lead { margin-bottom: .9em; font-size: 14px; }

/* ステージ内はセクションの上下余白を殺す（1画面に収める） */
.stage .section { padding: 0; }
.stage .cards { margin-top: 1.4em; }
.stage .flow { margin-top: 1.4em; }
.stage .section-title { margin-bottom: .4em; }

/* ---------- 最後の章：実績を横に流し続ける ---------- */
.marquee {
    position: absolute;
    left: 0; right: 0;
    bottom: 6%;
    overflow: hidden;
    pointer-events: none;       /* 帯そのものは素通し（お問い合わせボタン優先） */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: marquee 40s linear infinite;
}
.marquee-item {
    display: block;
    pointer-events: auto;       /* 画像はリンクとして押せる */
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    width: clamp(180px, 20vw, 280px);
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #fff;
    background: #e9eef8;
    box-shadow: 0 8px 22px rgba(23,49,58,.18);
}
a.marquee-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23,49,58,.26); }

.marquee-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 公開前のものは、実績ページと同じようにぼかす */
.marquee-item--soon img {
    filter: grayscale(1) blur(10px) brightness(1.02) contrast(.55);
    opacity: .6;
    transform: scale(1.06);
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 8px)); }   /* 8px は gap の半分 */
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ボタンの上で跳ねる▼（最後の章だけ出す）。ボタンより手前に出す */
.fab-hint {
    position: absolute;
    z-index: 131;
    right: calc(var(--fab-right) + var(--fab) / 2 - .5em);
    bottom: calc(var(--fab-bottom) + var(--fab) + 4px);
    transition: opacity .35s ease, bottom .4s cubic-bezier(.22,1,.36,1);
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1;
    color: #EC4899;
    text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    animation: fab-bounce .9s ease-in-out infinite;
}
body[data-chapter="cta"] .fab-hint { opacity: 1; }
@keyframes fab-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
    .fab-hint { animation: none; }
}

/* =========================================================
   お問い合わせのモーダル
   ========================================================= */
.modal {
    position: absolute;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 44px);
}
.modal[hidden] { display: none; }

.modal-back {
    position: absolute;
    inset: 0;
    background: rgba(23,49,58,.34);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: modal-fade .25s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: clamp(20px, 2.4vw, 32px);
    border: 2px solid var(--mint-d, #7FB6F2);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(23,49,58,.22);
    animation: modal-in .3s cubic-bezier(.22,1,.36,1);
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.modal-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(23,49,58,.06);
    color: var(--ink, #4E7BB8);
    font-size: 20px;
    line-height: 1;
}
.modal-close:hover { background: rgba(23,49,58,.12); }

.modal-title {
    margin: .1em 0 .3em;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 900;
    text-align: center;
}
.modal-lead {
    margin: 0 0 1.3em;
    text-align: center;
    font-size: 14px;
    color: var(--text-light, #6B7280);
}

/* モーダルの中ではフォームの白い箱は要らない */
.modal .contact-form {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.modal .cf-group { margin-bottom: .9em; }
.modal .cf-group input,
.modal .cf-group select,
.modal .cf-group textarea { border-color: rgba(23,49,58,.25); }
.modal .cf-group input:focus,
.modal .cf-group select:focus,
.modal .cf-group textarea:focus { border-color: var(--mint-d, #7FB6F2); }

/* =========================================================
   お問い合わせボタン（右下・再生バーの上に浮かせる）
   大きめの丸＋中央にメールのマーク。
   内側の白い輪が外へ波打ち、丸の内側に沿って文字が回る
   ========================================================= */
.mail-fab {
    position: absolute;
    z-index: 130;
    right: var(--fab-right);
    bottom: var(--fab-bottom);
    width: var(--fab);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #22A65E;                     /* 単色の緑 */
    box-shadow: 0 16px 34px rgba(16,88,52,.42),
                0 4px 10px rgba(16,88,52,.30);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, bottom .4s cubic-bezier(.22,1,.36,1);
}
.mail-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 22px 44px rgba(16,88,52,.5),
                0 6px 14px rgba(16,88,52,.34);
}
.mail-fab:active { transform: scale(.97); }

.mail-fab-icon {
    position: relative;
    z-index: 1;
    width: 26%;
    fill: #fff;
}

/* 縁を回る黄色い線（切れ目が3か所） */
.fab-ring {
    position: absolute;
    inset: 0;                    /* 緑の円の上に重ねる */
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    animation: fab-spin 7s linear infinite;
}
@keyframes fab-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .fab-ring { animation: none; }
}

/* 丸の内側に沿った文字 */
.mail-fab-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.fab-arc { fill: #fff; font-weight: 700; }
.fab-arc--top { font-size: 17px; letter-spacing: .01em; }
.fab-arc--bottom { font-size: 13.5px; letter-spacing: .3em; }

@media (max-width: 760px) {
    /* スマホも右下。コメント枠には重なってよい */
    :root { --fab-right: 12px; --fab-bottom: 12px; --fab: 84px; }
    .mail-fab { top: auto; }
    /* 最後の章では、流れている実績の高さまでボタンを上げる */
    body[data-chapter="cta"] { --fab-bottom: calc(40svh + 14px); }
    .fab-arc--top { font-size: 18px; }
    .fab-arc--bottom { font-size: 14px; }
}
/* =========================================================
   シークバー（オープニングの赤いバーと同じ見た目）
   映像の下にくっついていて、「いまページのどこか」を表す
   ========================================================= */
.seek {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    height: var(--seek-h);
    padding: 0 clamp(10px, 1.6vw, 22px) env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, .9vw, 11px);
    background: #000;
    color: #fff;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .5s ease .2s, transform .6s cubic-bezier(.22,1,.36,1) .2s;
}
body:not(.is-opening) .seek,
body.is-opened .seek { opacity: 1; transform: translateY(0); }

/* バー全体のどこでも掴めるようにしてある（js/stage.js の setupSeek） */
.seek { touch-action: none; }

.seek-bar {
    position: relative;
    height: clamp(4px, .42vw, 6px);
    background: rgba(255,255,255,.28);
}
.seek-bar::before {          /* 当たり判定を広げる */
    content: "";
    position: absolute;
    inset: -9px 0;
}
.seek-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--op-red, #FF0000);
}
.seek-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px; height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--op-red, #FF0000);
    transform: translateY(-50%) scale(0);
    transition: transform .18s ease;
}
.seek:hover .seek-knob,
.seek.is-grab .seek-knob { transform: translateY(-50%) scale(1); }

/* 章の切れ目（チャプターマーカー） */
.seek-tick {
    position: absolute;
    top: 50%;
    width: 2px; height: 13px;
    margin-left: -1px;
    background: rgba(255,255,255,.55);
    transform: translateY(-50%);
    pointer-events: none;
}

.seek-row {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.7vw, 26px);
    font-size: clamp(12px, 1.3vw, 16px);
}
.seek-icon {
    flex: 0 0 auto;
    display: block;
    width: clamp(20px, 2.2vw, 30px);
    aspect-ratio: 1;
    fill: #fff;
    opacity: .9;
}
.seek-time { letter-spacing: .04em; opacity: .85; font-variant-numeric: tabular-nums; }
.seek-chapter {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
    opacity: .85;
}

/* =========================================================
   スマホ：16:9だと小さすぎるので、画面いっぱいに広げる
   （トップ画像はオープニングと同じく上に16:9で置く）
   ========================================================= */
@media (max-width: 760px) {
    /* スマホの立ち絵の幅（顔の下の位置の計算にも使う） */
    :root { --chara-w: min(96vw, 62svh); }

    .seek-row .seek-icon:nth-child(n+3) { display: none; }

    /* 本文の置き場所は全チャプター共通：
       上＝キャラの顔の下（立ち絵の大きさから計算）、下＝コメント欄の上 */
    .chapter {
        justify-content: flex-end;
        padding: calc(2svh + var(--chara-w) * .4 + 14px) 14px calc(40svh + 16px);
    }
    /* テロップはコメント枠のすぐ上（＝下のほう）に置く */
    .chapter--top { justify-content: flex-end; }
    .telop { margin-bottom: 0; }
    /* スクロール案内は小さめにして、テロップを下げすぎない */
    .scroll-hint { margin-top: .6vh; gap: 5px; }
    .scroll-hint-track { height: 42px; width: 4px; }
    .scroll-hint-text { font-size: 10px; }

    .work { margin-top: 0; }
    .work-shot { width: min(300px, 90%, 30svh); }
    .work-cap { font-size: clamp(13px, 3.8vw, 17px); }
    .work-note { font-size: 11px; }
    .work-desc { margin-top: .5em; padding: .6em .8em; font-size: 12px; line-height: 1.65; }

    .telop--talk .telop-main { font-size: clamp(17px, 5.4vw, 26px); }

    /* 最後の章は、文字を顔の下まで上げて、その下に実績を流す */
    .chapter.chapter--cta {
        justify-content: flex-start;
        padding-top: calc(2svh + var(--chara-w) * .4 + 10px);
    }
    .marquee { bottom: calc(40svh + 14px); }
    .marquee-item { width: clamp(150px, 42vw, 210px); }
    .marquee-track { gap: 12px; }
    /* しっぽが画面の外に出ないよう左に余白をとり、三角も小さくする */
    .q-bubble { margin: 0 0 1.1em 12px; padding: .6em .8em; font-size: 13px; border-radius: 14px; }
    .q-bubble::after {
        left: -7px;
        width: 11px; height: 11px;
        border-width: 1.6px;
    }
    /* フォームは背が高いので、コメント欄を小さくして場所をあける
       （body[data-chapter] は stage.js が入れる） */
    .chapter.chapter--form { padding: 54px 14px calc(13svh + 116px); }
    .chapter--form .section-lead { display: none; }
    .chapter--form .section-title { font-size: 17px; }
    .chapter--form .cf-group textarea { min-height: 58px; }
    .stage .section-title { font-size: 19px; }
    .stage .cards { gap: 12px; margin-top: 1.1em; }
    .stage .card { padding: 1em 1.1em; border-radius: 14px; }
    .stage .card h3 { font-size: 15px; margin: .1em 0 .35em; }
    .stage .card p { font-size: 13px; line-height: 1.6; }
    .stage .card-icon { font-size: 22px; }
    .stage .flow li { padding-bottom: 1em; }
    .stage .flow strong { font-size: 15px; }
    .stage .flow span { font-size: 13px; }
    .stage .note { margin-top: 1em; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .chapter { transition: none !important; }
    .seek { transition: none; }
}