@charset "utf-8";

/* ==========================================================
   映画『超かぐや姫！』公式サイト
   style.css

   目次
     1. カスタムプロパティ
     2. ベース
     3. レイアウト部品
     4. 見出し
     5. ヘッダー
     6. フッター
     7. index.html
     8. セカンドページ共通
     9. story.html
    10. character.html
    11. music.html
    12. about.html
    13. メディアクエリ
   ========================================================== */


/* ==========================================================
   1. カスタムプロパティ
   ========================================================== */

:root {
    /* ---- 配色 ----
       白い紙の上に和の意匠を置き、配信画面とイントロだけ深い藍に落とす。
       強調は朱と青緑の2色だけ。金と桃はネオン装飾にしか使わない。 */
    --c-bg: #ffffff;          /* 基本の地色 */
    --c-panel: #f5f9fb;       /* パネル・カード地（わずかに冷たい白） */
    --c-line: #dfe9ef;        /* 罫線 */
    --c-grid: #edf3f6;        /* 三角格子 */

    --c-navy: #0b2b47;        /* 深藍のブロック（配信画面・帯セクション） */
    --c-bg-deep: #061a2d;     /* フッター・最暗部 */

    --c-accent: #ef4a57;      /* 朱：見出し・項目名・強調 */
    --c-accent-2: #35c2c2;    /* 青緑：サブラベル */
    /* 金は白地では読めないので、藍ブロックの中だけで使う */
    --c-gold: #ffce55;
    --c-pink: #ff9ec9;        /* 桃：弾幕・ネオン */

    --c-text: #1b1b22;        /* 本文 */
    /* 補足・キャプション。白地とのコントラストが 4.5:1 を下回らない濃さにする
       （#6d7986 は 4.44:1 で、13px のキャプションには足りなかった） */
    --c-text-mute: #67727e;   /* 白地に対して 4.96:1 */

    /* 藍ブロックの中で使う文字色 */
    --c-on-navy: #f2f7fa;
    --c-on-navy-mute: #a8bccb;

    /* ---- 書体 ---- */
    --font-ja: "Yu Gothic UI", "游ゴシック体", YuGothic, "Hiragino Sans",
               "Noto Sans JP", Meiryo, sans-serif;
    --font-en: Bahnschrift, "DIN Alternate", "Segoe UI", Arial, sans-serif;

    /* ---- 寸法 ---- */
    --w-container: 1200px;
    --pad-x: clamp(1rem, 4vw, 2.5rem);
    --gap: clamp(1.25rem, 2.5vw, 2rem);
    --section-gap: clamp(3.5rem, 8vw, 6.5rem);
    --radius: 6px;

    /* ---- その他 ---- */
    --ease: 0.3s ease;

    /* 「ゲーミング電柱」の七色。かぐやが現れた場所の意匠として、
       見出しの標識とページ最上部の帯だけに使う。使いすぎると画面が壊れる。 */
    --gradient-gaming: linear-gradient(90deg,
        #ff4d6a, #ffd76a, #6bff9e, #4de5ff, #7b6bff, #ff4dd8);
}


/* ==========================================================
   2. ベース
   ========================================================== */

/* 地は白。そこに麻の葉を思わせる三角格子を薄く敷く。
   和の意匠を、模様を貼るのではなく紙そのものとして持たせる。
   ただし格子は本文の下には敷かない（下の main を参照）。 */
body {
    background-color: var(--c-bg);
    background-image:
        repeating-linear-gradient(60deg, var(--c-grid) 0 1px, transparent 1px 68px),
        repeating-linear-gradient(-60deg, var(--c-grid) 0 1px, transparent 1px 68px),
        repeating-linear-gradient(0deg, var(--c-grid) 0 1px, transparent 1px 59px);
    background-attachment: fixed;
    color: var(--c-text);
    font-family: var(--font-ja);
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

/* 三角格子は紙の縁（記事の外側の余白）にだけ残し、本文の下からは外す。
   1px の斜線が文字の画数と重なると、字面がざらついて読みにくくなるため。
   記事と同じ幅の白い帯を中央に敷いて格子を隠すので、余白が残る広い画面でだけ
   格子が見える。ネオンや線画の装飾を「本文の外側の余白にだけ置き、
   余白が無い画面幅では出さない」としているのと同じ考え方。 */
.breadcrumb,
main {
    background-image: linear-gradient(var(--c-bg), var(--c-bg));
    background-size: var(--w-container) 100%;
    background-position: top center;
    background-repeat: no-repeat;
}

p {
    text-align: justify;
}

a {
    color: var(--c-accent);
    transition: color var(--ease), opacity var(--ease);
}

a:hover,
a:focus-visible {
    color: var(--c-accent-2);
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

/* 読み上げ・キーボード操作用（画面には出さない） */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--pad-x);
    z-index: 200;
    padding: 0.6em 1.4em;
    background-color: var(--c-accent);
    color: var(--c-bg);
    font-weight: bold;
    transition: top var(--ease);
}

.skip-link:focus {
    top: 12px;
    color: var(--c-bg);
}


/* ==========================================================
   3. レイアウト部品
   ========================================================== */

.container {
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.section {
    margin-block: var(--section-gap);
}

/* 背景を敷いた帯セクション（淡い方） */
.section--panel {
    padding-block: var(--section-gap);
    margin-block: var(--section-gap);
    background-color: var(--c-panel);
    border-block: 1px solid var(--c-line);
}

/* ---- 深い藍の帯セクション ----
   公式サイトも白一色ではなく、NEWS やイントロダクションを藍に落として
   明暗の緩急をつけている。白ばかりが続くと単調になるため、
   各ページに1つは藍のブロックを置く。 */
.section--navy {
    position: relative;
    overflow: hidden;
    padding-block: var(--section-gap);
    margin-block: var(--section-gap);
    background-color: var(--c-navy);
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 7px 7px;
    color: var(--c-on-navy);
}

/* 四隅の梅と霞（公式の同名素材） */
.section--navy::before,
.section--navy::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: clamp(110px, 13vw, 250px);
    aspect-ratio: 514 / 498;
    background-image: url(../images/deco-corner.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
}

/* 素材は右下の隅に置く向きで描かれている（余白が左上に寄っている）。
   左上に置く側だけ180度回して、梅が内側を向くようにする。 */
.section--navy::before {
    top: 0;
    left: 0;
    transform: rotate(180deg);
}

.section--navy::after {
    right: 0;
    bottom: 0;
}

/* 中身は装飾より前に出す */
.section--navy > * {
    position: relative;
    z-index: 1;
}

/* ---- 藍ブロックの中の文字色をまとめて反転 ---- */
.section--navy .section-title__en {
    color: var(--c-on-navy);
}

.section--navy .section-title__en::before,
.section--navy .section-title__en::after,
.section--navy .section-title__ja {
    color: var(--c-accent-2);
}

/* 放射線は濃い線画なので、白抜きにする */
.section--navy .section-title::before {
    filter: brightness(0) invert(1);
}

.section--navy .lead {
    color: var(--c-on-navy);
}

.section--navy .note,
.section--navy figcaption {
    color: var(--c-on-navy-mute);
}

.section--navy .sub-title {
    border-left-color: var(--c-accent-2);
}

.section--navy .data-list,
.section--navy .data-list > div {
    border-color: rgba(255, 255, 255, 0.18);
}

.section--navy .data-list dt {
    color: var(--c-accent-2);
}

/* 藍地：強調は金、サブラベルは青緑（.data-list dt と揃える） */
.section--navy .record-stats__label {
    color: var(--c-accent-2);
}

.section--navy .record-stats__value {
    color: var(--c-gold);
}

.section--navy .record-stats__arrow,
.section--navy .record-stats__note {
    color: var(--c-on-navy-mute);
}

.section--navy .timeline {
    border-left-color: rgba(255, 255, 255, 0.22);
}

.section--navy .timeline > li::before {
    box-shadow: 0 0 0 4px var(--c-navy);
}

.section--navy .timeline time {
    color: var(--c-accent-2);
}

.section--navy .term-list dt {
    color: var(--c-accent-2);
}

.section--navy .term-list dd {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.section--navy .world__figure img,
.section--navy .live-grid figure img {
    border-color: rgba(255, 255, 255, 0.22);
}

.section--navy .char-sub__img {
    border-color: rgba(255, 255, 255, 0.25);
}

.section--navy .char-sub__cast {
    color: var(--c-on-navy-mute);
}

/* 藍の上の表 */
.section--navy .compare-table th,
.section--navy .compare-table td {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.section--navy .compare-table tbody th {
    color: var(--c-on-navy);
}

.section--navy .compare-table tbody tr:hover td,
.section--navy .compare-table tbody tr:hover th {
    background-color: rgba(255, 255, 255, 0.07);
}

/* 導入文は段組みが無く、そのままだとコンテナ幅いっぱい（1行66字）になる。
   日本語の本文は1行40字前後を超えると、行末から次の行頭へ目を戻すときに
   行を見失いやすい。34em ＝ 約40字で折り返し、見出しに合わせて中央に置く。 */
.lead {
    max-width: 34em;
    margin-inline: auto;
    /* リード文と本体の間隔。reset で p の margin を 0 にしているため明示する */
    margin-bottom: 1.25rem;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 2.1;
    color: var(--c-text);
}

.note {
    color: var(--c-text-mute);
    font-size: 0.875rem;
    line-height: 1.8;
}

/* 本文中の段落まとまり */
.prose > p + p {
    margin-top: 1.5em;
}


/* ---- 和の意匠（公式サイトの装飾素材） ----
   ネオンの霞・金魚・ウミウシは藍のブロックの中に、梅は白地の隅に置く。
   公式サイトと同じ振り分け。いずれも装飾なので読み上げ対象外。 */

/* 白地の隅に敷く梅。線画なので薄く。 */
.side-deco {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.side-deco img {
    position: absolute;
    height: auto;
}

.side-deco__plum {
    right: 0.8vw;
    bottom: -3vh;
    width: clamp(105px, 10.5vw, 215px);
    opacity: 0.14;
}

/* 提灯。左側の余白に、梅と釣り合う高さで。
   藍のブロックの下に隠れないよう、下寄せにしてある。 */
.side-deco__lantern {
    left: 1.4vw;
    bottom: 26vh;
    width: clamp(48px, 4.6vw, 90px);
    opacity: 0.12;
}

/* ト音記号。MUSIC ページだけに置く */
.side-deco__clef {
    left: 2.2vw;
    bottom: 14vh;
    width: clamp(24px, 2.3vw, 42px);
    opacity: 0.15;
}

/* ---- ミラーボール ----
   公式素材が10コマを横に並べたスプライトなので、
   帯を steps() で1コマずつ送って回転させる。
   background-position の % はコマ数と割り切れず狂いやすいので、
   帯そのものを transform でずらす方式にしてある。
   mix-blend-mode: screen で、素材の暗い地を下の藍に溶かしている。 */
.mirrorball {
    position: absolute;
    z-index: 2;
    top: 14%;
    right: 9%;
    width: clamp(64px, 6.5vw, 124px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    pointer-events: none;
    /* 素材の四角い地が screen でも残るので、円形にぼかして消す */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
    mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
}

.mirrorball__strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    height: 100%;
    background-image: url(../images/deco-mirrorball.jpg);
    background-size: 100% 100%;
    mix-blend-mode: screen;
    animation: mirrorball-spin 1.4s steps(10) infinite;
}

@keyframes mirrorball-spin {
    to {
        transform: translateX(-100%);
    }
}

/* 藍のブロックの四隅に置くネオン装飾 */
.neon-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.neon-deco img {
    position: absolute;
    height: auto;
    /* 浮遊とネオンのゆらぎを重ねる。速度と位相は要素ごとに変える */
    animation:
        neon-float 8s ease-in-out infinite,
        neon-glow 5s ease-in-out infinite;
}

/* ゆっくり上下する */
@keyframes neon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-13px); }
}

/* ネオン管のわずかな明滅 */
@keyframes neon-glow {
    0%, 100% { opacity: 1; }
    42% { opacity: 0.84; }
    48% { opacity: 0.97; }
    56% { opacity: 0.8; }
}

/* 金魚は泳ぐように、傾きも入れる */
@keyframes neon-swim {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-11px) rotate(-5deg); }
    65% { transform: translateY(7px) rotate(4deg); }
}

.neon-deco__cloud-1 {
    top: 1%;
    left: -1.5%;
    width: clamp(110px, 11vw, 215px);
    animation-duration: 11s, 6.5s;
    animation-delay: 0s, -1s;
}

.neon-deco__cloud-2 {
    bottom: 0;
    right: -1.5%;
    width: clamp(110px, 11vw, 215px);
    animation-duration: 13s, 7.5s;
    animation-delay: -4s, -3s;
}

.neon-deco__fish {
    top: 9%;
    right: 0.4%;
    width: clamp(40px, 3.8vw, 74px);
    animation-name: neon-swim, neon-glow;
    animation-duration: 7s, 4.5s;
    animation-delay: -2s, -0.5s;
}

.neon-deco__fushi {
    bottom: 7%;
    left: 0.4%;
    width: clamp(46px, 4.4vw, 88px);
    animation-duration: 6.5s, 5.5s;
    animation-delay: -3.5s, -2s;
}

/* 本文の外に余白が無い幅では装飾が内容に重なるので出さない */
@media screen and (max-width: 1440px) {

    .side-deco,
    .neon-deco {
        display: none;
    }

    .page-head::before {
        display: none;
    }
}


/* ==========================================================
   4. 見出し
   ========================================================== */

/* 公式サイトに倣った【 】括弧の見出し。
   英字を大きく中央に置き、その下に日本語を続ける。
   上の放射線は公式サイトの見出し装飾をそのまま使っている。 */
.section-title {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    text-align: center;
}

.section-title::before {
    content: "";
    display: block;
    width: clamp(78px, 8vw, 116px);
    aspect-ratio: 270 / 122;
    margin: 0 auto 0.45em;
    background-image: url(../images/deco-rays.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.section-title__en {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35em;
    font-family: var(--font-en);
    font-size: clamp(1.5rem, 3.6vw, 2.375rem);
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: var(--c-text);
}

.section-title__en::before {
    content: "【";
}

.section-title__en::after {
    content: "】";
}

.section-title__en::before,
.section-title__en::after {
    font-weight: normal;
    font-size: 0.9em;
    color: var(--c-accent);
}

.section-title__ja {
    display: block;
    margin-top: 0.7em;
    font-size: clamp(0.9375rem, 1.9vw, 1.1875rem);
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: var(--c-accent);
}

/* 小見出し */
.sub-title {
    margin-bottom: 1.25em;
    padding-left: 0.7em;
    border-left: 3px solid var(--c-accent);
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    font-weight: bold;
    line-height: 1.5;
}


/* ==========================================================
   5. ヘッダー
   ========================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding: 0.75rem var(--pad-x);
}

.site-logo {
    flex-shrink: 0;
    width: clamp(140px, 18vw, 200px);
    line-height: 0;
}

.site-logo a {
    display: block;
}

.site-logo img {
    width: 100%;
    height: auto;
    transition: opacity var(--ease);
}

.site-logo a:hover img {
    opacity: 0.75;
}

.global-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.25rem);
}

.global-nav a {
    position: relative;
    display: block;
    padding-block: 0.5em;
    font-family: var(--font-en);
    font-size: 0.9375rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    color: var(--c-text);
}

/* ホバー時に下線が伸びる */
.global-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--c-accent);
    transition: width var(--ease);
}

.global-nav a:hover,
.global-nav a:focus-visible {
    color: var(--c-accent);
}

.global-nav a:hover::after,
.global-nav a:focus-visible::after {
    width: 100%;
}

/* 現在地 */
.global-nav a[aria-current="page"] {
    color: var(--c-accent);
}

.global-nav a[aria-current="page"]::after {
    width: 100%;
}

.header-cta {
    flex-shrink: 0;
}

.header-cta a {
    display: block;
    padding: 0.6em 1.4em;
    border: 1px solid var(--c-accent);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: var(--c-accent);
    white-space: nowrap;
    transition: background-color var(--ease), color var(--ease);
}

.header-cta a:hover,
.header-cta a:focus-visible {
    background-color: var(--c-accent);
    color: var(--c-bg);
}


/* ==========================================================
   6. フッター
   ========================================================== */

.site-footer {
    position: relative;
    margin-top: var(--section-gap);
    padding-top: clamp(3rem, 6vw, 4.5rem);
    background-color: var(--c-bg-deep);
    color: var(--c-on-navy);
}

/* フッターの上端に和風の欄干を載せる。
   SVG の色はフッターと同じにしてあるので、床が立ち上がって見える。 */
.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: clamp(34px, 3.6vw, 54px);
    background-image: url(../images/deco-fence.svg);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto 100%;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--gap);
    align-items: start;
}

.footer-brand__logo {
    width: 180px;
    margin-bottom: 1.25rem;
}

.footer-brand p {
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--c-on-navy-mute);
}

.footer-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.footer-nav a {
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--c-on-navy);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--c-accent-2);
}

.footer-info {
    font-size: 0.875rem;
}

.footer-info dt {
    margin-bottom: 0.2em;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: var(--c-accent-2);
}

.footer-info dd {
    margin-bottom: 1.1em;
    color: var(--c-on-navy-mute);
    line-height: 1.8;
}

.footer-info dd:last-child {
    margin-bottom: 0;
}

.copyright {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-block: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
}

.copyright small {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--c-on-navy-mute);
}

/* フッターは暗いので、白抜きのロゴに差し替える */
.footer-brand__logo {
    filter: brightness(0) invert(1);
}


/* ==========================================================
   7. index.html
   ========================================================== */

/* ---- 配信の視聴画面 ----
   作品の舞台が＜ツクヨミ＞のライブ配信なので、
   トップページ自体を「配信を見ている画面」として構成する。
   プレイヤー＋番組情報＋コメント欄（＝NEWS）の2カラム。
   数値は配信の視聴回数の位置に、実際の興行成績を置いた。 */

/* 配信エリアだけは全幅の帯にして、記事エリア（1120px）より広く取る。
   プレイヤーは大きいほど配信画面らしくなるため。
   左端が本文とずれるが、背景を落として独立した「画面」に見せることで
   ずれを意図的なものとして成立させている。 */
.broadcast-area {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
    /* 公式トップに倣い、この帯だけ深い藍にハーフトーンを重ねる */
    background-color: var(--c-navy);
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 7px 7px;
    color: var(--c-on-navy);
}

/* コメント欄をプレイヤーと同じ高さに収めるため、
   チャンネルバー・プレイヤー・番組情報を個別のグリッド項目として配置する。 */
.broadcast {
    /* ネオン装飾より前に出す */
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 380px);
    grid-template-areas:
        "bar    ."
        "player chat"
        "info   .";
    column-gap: clamp(1.25rem, 2.4vw, 2.25rem);
    row-gap: 0;
    align-items: start;
    width: 100%;
    max-width: 1560px;
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

/* ---- チャンネルバー ---- */
.channel-bar {
    grid-area: bar;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6em 0.9em;
    margin-bottom: 0.9rem;
}

.channel-bar__name {
    font-size: 0.875rem;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.channel-bar__sub {
    font-size: 0.8125rem;
    color: var(--c-on-navy-mute);
}

/* ---- プレイヤー ---- */
.player {
    grid-area: player;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background-color: #000;
}

.player__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* プレイヤー中央の再生ボタン。押すと配信先へ飛ぶ */
.player__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: clamp(58px, 5.5vw, 84px);
    transform: translate(-50%, -50%);
    transition: transform var(--ease), filter var(--ease);
}

.player__play:hover,
.player__play:focus-visible {
    transform: translate(-50%, -50%) scale(1.08);
    filter: drop-shadow(0 0 14px rgba(255, 99, 93, 0.6));
}

.player__play img {
    width: 100%;
    height: auto;
}

/* プレイヤー下部のシークバー。進捗部分に七色を使う */
.player__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.25);
}

.player__bar::before {
    content: "";
    display: block;
    width: 62%;
    height: 100%;
    background-image: var(--gradient-gaming);
}

.on-air {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.4em 1em;
    background-color: var(--c-accent);
    border-radius: 999px;
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    text-align: left;
    color: #fff;
}

.on-air__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    animation: on-air-pulse 2.4s ease-in-out infinite;
}

@keyframes on-air-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }
    50% {
        opacity: 0.5;
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
    }
}

/* ---- 配信の意匠：コメント（弾幕） ----
   ＜ツクヨミ＞のライブ配信画面を再現する装飾。
   情報は持たせないので aria-hidden="true" を付け、
   動きを嫌うユーザーには非表示にする（下部のメディアクエリ）。 */
.danmaku {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    /* 下部は絵を見せるために空ける */
    height: 68%;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.danmaku span {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    font-size: clamp(0.75rem, 1.5vw, 0.9375rem);
    font-weight: bold;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.65);
    animation-name: danmaku-flow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* 負の delay で、読み込んだ瞬間から画面に流れている状態にする */
.danmaku span:nth-child(1)  { top: 3%;  animation-duration: 15s; animation-delay: -2s; }
.danmaku span:nth-child(2)  { top: 12%; animation-duration: 21s; animation-delay: -9s; }
.danmaku span:nth-child(3)  { top: 20%; animation-duration: 17s; animation-delay: -14s; color: var(--c-pink); }
.danmaku span:nth-child(4)  { top: 29%; animation-duration: 24s; animation-delay: -4s; }
.danmaku span:nth-child(5)  { top: 38%; animation-duration: 18s; animation-delay: -11s; }
.danmaku span:nth-child(6)  { top: 47%; animation-duration: 26s; animation-delay: -19s; color: var(--c-accent-2); }
.danmaku span:nth-child(7)  { top: 56%; animation-duration: 16s; animation-delay: -6s; }
.danmaku span:nth-child(8)  { top: 8%;  animation-duration: 28s; animation-delay: -22s; }
.danmaku span:nth-child(9)  { top: 25%; animation-duration: 20s; animation-delay: -16s; }
.danmaku span:nth-child(10) { top: 43%; animation-duration: 23s; animation-delay: -1s; color: var(--c-pink); }
.danmaku span:nth-child(11) { top: 34%; animation-duration: 19s; animation-delay: -13s; }
.danmaku span:nth-child(12) { top: 52%; animation-duration: 25s; animation-delay: -8s; color: var(--c-accent-2); }

@keyframes danmaku-flow {
    to {
        transform: translateX(calc(-100vw - 100%));
    }
}

/* ---- 番組情報（プレイヤー直下） ---- */
.program {
    grid-area: info;
    margin-top: 1.25rem;
}

.program__title {
    font-size: clamp(1.625rem, 3.6vw, 2.375rem);
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.program__catch {
    margin-top: 0.6em;
    font-size: clamp(0.9375rem, 1.8vw, 1.1875rem);
    font-weight: bold;
    line-height: 1.65;
    letter-spacing: 0.04em;
    text-align: left;
    color: var(--c-accent-2);
    word-break: keep-all;
}

.program__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* 配信画面のチャンネル登録ボタンにあたる位置 */
.btn-watch {
    display: inline-flex;
    align-items: center;
    padding: 0.85em 2em;
    border-radius: 999px;
    background-color: var(--c-accent);
    font-size: 0.9375rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: #fff;
    white-space: nowrap;
    transition: opacity var(--ease), transform var(--ease);
}

.btn-watch:hover,
.btn-watch:focus-visible {
    opacity: 0.88;
    transform: translateY(-2px);
    color: #fff;
}

.program__spec {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.5rem;
    font-size: 0.8125rem;
}

.program__spec > div {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
}

.program__spec dt {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    color: var(--c-accent-2);
}

.program__spec dd {
    color: var(--c-on-navy-mute);
}

/* ---- 数値：視聴回数・高評価の位置に、実際の興行成績を置く ---- */
.counter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    margin-top: 1.5rem;
}

.counter__value {
    display: block;
    font-family: var(--font-en);
    font-size: clamp(1.3125rem, 2.8vw, 1.875rem);
    font-weight: bold;
    line-height: 1.15;
    color: var(--c-gold);
}

.counter__unit {
    margin-left: 0.1em;
    font-size: 0.55em;
}

.counter__label {
    display: block;
    margin-top: 0.5em;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--c-on-navy-mute);
}

/* ---- イントロダクション ---- */
/* 見出しは他セクションと左端を揃え、本文だけ行長を抑える */
/* 1行が長すぎると読みにくいので 800px で折り返すが、
   見出しはコンテナ中央に揃っているので本文も中央に寄せる */
.intro__body {
    max-width: 800px;
    margin-inline: auto;
}

.intro__body p + p {
    margin-top: 1.5em;
}

/* ---- コンテンツカード ---- */
/* 4枚固定。auto-fit だと 3+1 の半端な並びになるため列数を明示する */
.nav-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.nav-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--c-text);
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.nav-card:hover,
.nav-card:focus-visible {
    transform: translateY(-6px);
    border-color: var(--c-accent);
    box-shadow: 0 12px 28px rgba(11, 43, 71, 0.13);
    color: var(--c-text);
}

.nav-card__thumb {
    overflow: hidden;
}

.nav-card__thumb img {
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.nav-card:hover .nav-card__thumb img {
    transform: scale(1.06);
}

.nav-card__body {
    flex-grow: 1;
    padding: 1.5rem 1.375rem 1.75rem;
}

.nav-card__en {
    font-family: var(--font-en);
    font-size: 1.375rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-align: left;
    color: var(--c-accent);
}

.nav-card__ja {
    margin-top: 0.25em;
    font-size: 0.875rem;
    text-align: left;
    color: var(--c-text-mute);
}

.nav-card__desc {
    margin-top: 1em;
    font-size: 0.875rem;
    line-height: 1.85;
}

/* ---- コメント欄：配信画面のチャット欄の位置に NEWS を置く ---- */
/* 枠は公式の NEWS パネル素材を border-image で伸ばしている。
   四隅の鉤形は伸びず、辺だけが伸びるので、高さが変わっても崩れない。
   border-image を使うと border-radius は効かなくなるが、
   元の素材が角を落とした直角なので、むしろそちらに合う。 */
.comment-panel {
    grid-area: chat;
    /* プレイヤーと同じ高さに収め、あふれた分はチャット欄らしくスクロールさせる */
    align-self: stretch;
    overflow-y: auto;
    background-color: rgba(9, 41, 66, 0.55);
    border-style: solid;
    border-width: clamp(13px, 1.5vw, 20px);
    border-image-source: url(../images/deco-panel-frame.png);
    border-image-slice: 44;
    border-image-repeat: stretch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.comment-panel::-webkit-scrollbar {
    width: 6px;
}

.comment-panel::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.3);
}

.comment-panel__head {
    /* スクロールしても見出しは残す。背景は不透明でないと下の文字が透ける */
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9em;
    /* 枠が太いので内側は詰める */
    padding: 0.75rem 0.7rem;
    background-color: #0d3252;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: var(--c-accent-2);
}

.comment-panel__count {
    font-family: var(--font-ja);
    font-size: 0.6875rem;
    font-weight: normal;
    letter-spacing: 0.04em;
    color: var(--c-on-navy-mute);
}

.comment-list {
    padding: 0.25rem 0.7rem 0.7rem;
}

.comment-item {
    padding-block: 0.95rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
}

.comment-item:last-child {
    padding-bottom: 0.25rem;
    border-bottom: none;
}

.comment-item__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em 0.7em;
    margin-bottom: 0.4em;
}

.comment-item__head time {
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--c-on-navy-mute);
}

.comment-item__tag {
    padding: 0.1em 0.7em;
    border: 1px solid var(--c-accent-2);
    border-radius: 999px;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--c-accent-2);
    white-space: nowrap;
}

.comment-item__body {
    font-size: 0.8125rem;
    line-height: 1.8;
    text-align: left;
}


/* ==========================================================
   8. セカンドページ共通
   ========================================================== */

.page-head {
    position: relative;
    overflow: hidden;
}

/* セカンドページの藍帯にもネオンの霞を置く（見出しと重ならない右側） */
.page-head::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 12%;
    right: -1.5%;
    width: clamp(100px, 9vw, 180px);
    aspect-ratio: 547 / 380;
    background-image: url(../images/deco-neon-cloud-02.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.page-head__img {
    width: 100%;
    height: clamp(180px, 30vw, 300px);
    object-fit: cover;
    object-position: center;
}

.page-head::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to bottom,
        rgba(11, 43, 71, 0.62) 0%,
        rgba(11, 43, 71, 0.82) 100%
    );
}

.page-head__body {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.page-head__en {
    display: block;
    font-family: var(--font-en);
    font-size: clamp(1.75rem, 5.5vw, 3.25rem);
    font-weight: bold;
    letter-spacing: 0.16em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 0 26px rgba(255, 255, 255, 0.45);
}

.page-head__ja {
    display: block;
    margin-top: 0.6em;
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    font-weight: normal;
    letter-spacing: 0.24em;
    color: var(--c-accent-2);
}

/* パンくず */
.breadcrumb {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--c-line);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 0.9em;
    font-size: 0.8125rem;
    color: var(--c-text-mute);
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 0.9em;
    color: var(--c-line);
}

/* 次のページへの導線（セカンドページ下部） */
.page-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap);
}

.page-link {
    display: block;
    padding: 1.5rem 1.5rem;
    background-color: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    color: var(--c-text);
    transition: border-color var(--ease), transform var(--ease);
}

.page-link:hover,
.page-link:focus-visible {
    transform: translateY(-4px);
    border-color: var(--c-accent);
    color: var(--c-text);
}

.page-link__en {
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-align: left;
    color: var(--c-accent);
}

.page-link__ja {
    margin-top: 0.3em;
    font-size: 0.8125rem;
    text-align: left;
    color: var(--c-text-mute);
}


/* ==========================================================
   9. story.html
   ========================================================== */

.story-blocks {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.story-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.story-block:last-child {
    margin-bottom: 0;
}

/* 偶数番目は画像と文章を入れ替える */
.story-block:nth-child(even) .story-block__figure {
    order: 2;
}

.story-block__figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--c-line);
}

.story-block__figure figcaption {
    margin-top: 0.9em;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--c-text-mute);
}

/* 章番号：漢数字＋英字＋舞台タグ。
   原典（竹取物語）と現代（配信）が同居する作品なので、和洋を並べて置く。 */
.story-block__num {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em 0.9em;
    margin-bottom: 0.75em;
}

.story-block__kanji {
    font-size: 1.1875rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    color: var(--c-accent);
}

.story-block__en {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: bold;
    letter-spacing: 0.28em;
    color: var(--c-accent-2);
}

/* 現実／境界／ツクヨミ のどこで起きる話かを示す */
.story-block__place {
    padding: 0.2em 0.9em;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
}

.story-block__title {
    margin-bottom: 0.8em;
    font-size: clamp(1.1875rem, 2.4vw, 1.5rem);
    font-weight: bold;
    line-height: 1.55;
}

/* ---- 世界観 ---- */
.world {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.world__figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--c-line);
}

.term-list dt {
    margin-bottom: 0.35em;
    font-size: 1.0625rem;
    font-weight: bold;
    color: var(--c-accent);
}

.term-list dd {
    margin-bottom: 1.6em;
    padding-bottom: 1.6em;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.9375rem;
    line-height: 1.9;
}

.term-list dd:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ---- 竹取物語との対応表 ---- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.compare-table {
    min-width: 560px;
}

.compare-table th,
.compare-table td {
    padding: 1.1em 1.25em;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.9375rem;
    line-height: 1.8;
    vertical-align: top;
}

.compare-table thead th {
    border-bottom: 2px solid var(--c-accent);
    font-family: var(--font-en);
    font-weight: bold;
    letter-spacing: 0.1em;
    color: var(--c-accent);
    white-space: nowrap;
}

.compare-table tbody th {
    width: 34%;
    font-weight: bold;
    color: var(--c-text-mute);
}

.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th {
    background-color: rgba(53, 194, 194, 0.09);
}


/* ==========================================================
   10. character.html
   ========================================================== */

/* 主要キャラクター6人 → 3列×2段 */
.char-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.char-card {
    display: flex;
    flex-direction: column;
    background-color: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--ease), transform var(--ease);
}

.char-card:hover {
    transform: translateY(-5px);
    border-color: var(--c-accent);
}

/* 立ち絵は全身が入らないと意味がないので cover ではなく contain。
   素材が 1920x1800 とほぼ正方形なので、枠も正方形にして余白を抑える。 */
.char-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--c-panel);
}

.char-card__body {
    flex-grow: 1;
    padding: 1.5rem 1.375rem 1.75rem;
}

.char-card__name {
    font-size: 1.3125rem;
    font-weight: bold;
    line-height: 1.5;
}

/* ふりがな */
.char-card__name rt {
    font-size: 0.42em;
    font-weight: normal;
    letter-spacing: 0.04em;
    color: var(--c-text-mute);
}

/* 配信者のプロフィール欄を模したデータ表示 */
.char-card__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3em 0.9em;
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--c-line);
    font-size: 0.8125rem;
}

.char-card__meta dt {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: bold;
    letter-spacing: 0.16em;
    line-height: 2.1;
    color: var(--c-accent);
}

.char-card__meta dd {
    line-height: 2.1;
}

.char-card__meta .is-cast {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-weight: bold;
    color: var(--c-text);
}

/* 声優の顔写真。縦長の宣材写真なので上寄せで切り出す */
.char-card__cv {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 18%;
}

.char-card__desc {
    margin-top: 1em;
    font-size: 0.875rem;
    line-height: 1.9;
}

/* ---- サブキャラクター ---- */
/* サブキャラクター6人 → 6列1段 */
.char-sub-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gap);
}

.char-sub {
    text-align: center;
}

.char-sub__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--c-line);
    transition: border-color var(--ease);
}

.char-sub:hover .char-sub__img {
    border-color: var(--c-accent-2);
}

.char-sub__name {
    margin-top: 1em;
    font-size: 0.9375rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
}

.char-sub__cast {
    margin-top: 0.3em;
    font-size: 0.75rem;
    text-align: center;
    color: var(--c-text-mute);
}

/* サブキャラクターの一覧表 */
.char-sub-table {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}


/* ==========================================================
   11. music.html
   ========================================================== */

.music-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.music-hero__figure {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}

.music-hero__figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ライブ配信そのものなので、こちらの弾幕は画面全体に流す */
.music-hero__figure .danmaku {
    height: 100%;
}

/* ---- 楽曲一覧 ----
   曲順という順序を持つ情報なので <ol>。各曲は <details>/<summary> で
   MV を開閉する。JavaScript は使っていないので、JS を切っても開閉できる。 */
.song-list__guide {
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--c-text-mute);
}

.song-list {
    counter-reset: song;
    list-style: none;
    border-top: 2px solid var(--c-accent);
}

.song {
    counter-increment: song;
    border-bottom: 1px solid var(--c-line);
}

.song__head {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 6.5rem minmax(0, 1.3fr) 3rem;
    grid-template-areas: "num title role credit mv";
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 1.05em 0.75em;
    /* summary の既定の三角を消す。開閉の目印は右端の MV バッジが担う */
    list-style: none;
}

.song__head::-webkit-details-marker {
    display: none;
}

.song__item .song__head {
    cursor: pointer;
    transition: background-color var(--ease);
}

.song__item .song__head:hover,
.song__item[open] .song__head {
    background-color: rgba(53, 194, 194, 0.09);
}

/* 曲番号は <ol> が持つ情報なので、HTML には書かず counter で出す */
.song__head::before {
    content: counter(song, decimal-leading-zero);
    grid-area: num;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: var(--c-text-mute);
}

.song__title {
    grid-area: title;
    font-size: 0.9375rem;
    font-weight: bold;
    line-height: 1.6;
}

.song__role {
    grid-area: role;
    justify-self: start;
    padding: 0.1em 0.8em;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--c-text-mute);
}

.song__credit {
    grid-area: credit;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--c-text-mute);
}

.song__mv {
    grid-area: mv;
    justify-self: end;
    padding: 0.15em 0.65em;
    border: 1px solid var(--c-accent);
    border-radius: 999px;
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    white-space: nowrap;
    color: var(--c-accent);
}

.song__item[open] .song__mv {
    background-color: var(--c-accent);
    color: var(--c-bg);
}

/* 主題歌とエンディングは朱で立てる */
.song--theme .song__title {
    color: var(--c-accent);
}

.song--theme .song__role {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.song__movie {
    padding: 0 0.75em 1.5rem;
}

/* サムネイル＋再生ボタン。YouTube は埋め込み再生に HTTP Referer を要求するようになり、
   ローカルで開いたページ（file://）は Referer を送らないため再生できない。
   そのため埋め込みではなく、YouTube へ送り出す形にしている。
   再生ボタンはトップの配信プレイヤーと同じ icon-play.svg を使う。 */
.song__thumb {
    display: block;
    position: relative;
    max-width: 640px;
    margin-inline: auto;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--c-bg-deep);
}

/* height 属性を打ち消さないと aspect-ratio が効かない */
.song__cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.5s ease, opacity var(--ease);
}

.song__thumb:hover .song__cover,
.song__thumb:focus-visible .song__cover {
    transform: scale(1.04);
    opacity: 0.85;
}

.song__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(52px, 8vw, 72px);
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.song__watch {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    padding: 0.3em 0.9em;
    border-radius: 999px;
    background-color: rgba(6, 26, 45, 0.82);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    color: var(--c-on-navy);
}

/* ---- 開閉のアニメーション（JavaScript なし） ----
   2段構えにしてある。
   1段目：中身のフェードイン。animation は要素が表示された時点で走るので、
          details を開いた瞬間に必ず効く。どのブラウザでも動く。
   2段目：引き出しそのものの高さ。details の高さを CSS だけで動かすには
          ::details-content が要る（未対応のブラウザでは高さは瞬時に開き、
          1段目のフェードインだけが残る＝動作は破綻しない）。 */
.song__item[open] .song__movie {
    animation: song-open 0.32s ease;
}

@keyframes song-open {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@supports selector(details::details-content) {
    /* auto へアニメーションするための許可。継承させるので親に置く */
    .song-list {
        interpolate-size: allow-keywords;
    }

    .song__item::details-content {
        block-size: 0;
        overflow: hidden;
        transition:
            block-size 0.32s ease,
            content-visibility 0.32s ease allow-discrete;
    }

    .song__item[open]::details-content {
        block-size: auto;
    }
}

.song-list__note {
    margin-top: 1.5rem;
}

/* ---- 参加クリエイター ---- */
/* 参加クリエイター6組 → 6列1段 */
.creator-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gap);
}

.creator {
    overflow: hidden;
    padding-bottom: 1.25rem;
    background-color: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    text-align: center;
    transition: border-color var(--ease);
}

.creator:hover {
    border-color: var(--c-accent);
}

/* 本人写真。素材の縦横比がバラバラなので、
   正方形に切り出して並びを揃える。顔が入るよう上寄せ。 */
.creator__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 25%;
    margin-bottom: 1rem;
}

.creator__name {
    font-family: var(--font-en);
    font-size: 1.0625rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--c-accent);
}

.creator__work {
    margin-top: 0.6em;
    font-size: 0.8125rem;
    line-height: 1.7;
    text-align: center;
    color: var(--c-text-mute);
}

/* ---- ライブ演出 ---- */
.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap);
}

.live-grid figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--c-line);
}

.live-grid figcaption {
    margin-top: 0.9em;
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--c-text-mute);
}


/* ==========================================================
   12. about.html
   ========================================================== */

/* ---- 作品データ・スタッフ（定義リスト） ---- */
.data-list {
    border-top: 1px solid var(--c-line);
}

.data-list > div {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 0.4rem 1.5rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--c-line);
}

/* 項目名は朱（--c-accent は括弧・項目名・数値・ボタンに使う）。
   藍地の STAFF 一覧だけは、朱より青緑のほうが沈まないので切り替える */
.data-list dt {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--c-accent);
}

.data-list dd {
    font-size: 0.9375rem;
    line-height: 1.8;
}

/* ---- 興行記録 ---- */
/* 4つを同じカードで並べると、どれが一番の記録なのかが伝わらない。
   CHARACTER ページの主要／サブと同じ考え方で、最終興行収入を上段にぶち抜きで置き、
   残り 3 つを下段に等分で並べる。罫線は引かず、余白と文字の大きさだけで区切る。
   index の .counter は「配信中の数字」、こちらは「確定した記録」 */
.record-stats {
    /* 上段の註記も同じ値を使うので、列間の間隔は 1 か所で持つ */
    --record-col-gap: clamp(1.5rem, 4vw, 3rem);

    display: grid;
    /* 個数が固定なので auto-fit は使わず列数を明示する */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--record-col-gap);
    row-gap: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* 主役は横一段ぶち抜き */
.record-stats__main {
    grid-column: 1 / -1;
}

.record-stats__label {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
}

.record-stats__data {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    margin-top: 0.5em;
}

/* 主役だけは数値と註記を同じベースラインに乗せる。
   外側と同じ列定義を使うので、註記の左端が真下の「最大上映館数」と揃う。
   罫線が無い分、列が揃っていることでグリッドを見せる */
.record-stats__main .record-stats__data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--record-col-gap);
    align-items: baseline;
}

.record-stats__main .record-stats__note {
    grid-column: 2 / -1;
}

.record-stats__value {
    font-family: var(--font-en);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 0.02em;
    /* 桁幅を揃えると数字が縦に揃う */
    font-variant-numeric: tabular-nums;
    color: var(--c-accent);
}

.record-stats__main .record-stats__value {
    font-size: clamp(2.75rem, 7vw, 5.5rem);
}

.record-stats__unit {
    margin-left: 0.1em;
    font-size: 0.5em;
}

/* 矢印は「拡大した」という内容そのもの。数字よりは弱めに置く */
.record-stats__arrow {
    margin-inline: 0.25em;
    font-size: 0.7em;
    color: var(--c-text-mute);
}

.record-stats__note {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--c-text-mute);
}

/* ---- 年表 ---- */
.record-timeline__title {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.timeline {
    border-left: 2px solid var(--c-line);
    padding-left: clamp(1.25rem, 3vw, 2rem);
}

.timeline > li {
    position: relative;
    padding-bottom: 2rem;
}

.timeline > li:last-child {
    padding-bottom: 0;
}

.timeline > li::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(1.25rem, 3vw, 2rem) - 7px);
    top: 0.65em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-bg);
}

.timeline time {
    display: block;
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--c-accent);
}

.timeline p {
    margin-top: 0.35em;
    font-size: 0.9375rem;
    line-height: 1.85;
}

/* ---- 制作背景 ---- */
.production {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.production__figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--c-line);
}


/* ==========================================================
   13. メディアクエリ
   ========================================================== */

/* ---- 動きを減らす設定のユーザー：装飾アニメーションを止める ----
   reset.css で全アニメーションを 0.01ms にしているため、
   無限ループする弾幕は非表示にしないと激しく明滅してしまう。 */
@media (prefers-reduced-motion: reduce) {

    .danmaku {
        display: none;
    }

    .on-air__dot,
    .neon-deco img,
    .mirrorball__strip {
        animation: none;
    }

    /* reset.css の一括指定は `*` と `::before` / `::after` しか当たらないので、
       ::details-content だけはここで個別に止める */
    .song__item::details-content {
        transition-duration: 0.01ms;
    }
}


/* ---- タブレット以下 ---- */
@media screen and (max-width: 1024px) {

    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    /* 配信画面：コメント欄をプレイヤーの下へ回し、高さの制限も外す */
    .broadcast {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "bar"
            "player"
            "info"
            "chat";
    }

    .comment-panel {
        align-self: auto;
        max-height: none;
        overflow-y: visible;
        margin-top: 2.5rem;
    }

    /* 4列 → 2列 */
    .nav-cards,
    .char-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 6列 → 3列 */
    .char-sub-grid,
    .creator-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .compare-table {
        min-width: 640px;
    }

    /* 楽曲一覧は1行5項目だと詰まるので、役割とクレジットを曲名の下に送る */
    .song__head {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        grid-template-areas:
            "num title  mv"
            "num role   ."
            "num credit .";
        align-items: start;
        gap: 0.4rem 0.9rem;
    }

    .song__title {
        align-self: center;
    }

    .song__mv {
        align-self: center;
    }
}


/* ---- スマートフォン ---- */
@media screen and (max-width: 768px) {

    body {
        font-size: 15px;
        line-height: 1.85;
    }

    /* ヘッダーは2段に折り返す */
    .site-header__inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
        padding-block: 0.875rem;
    }

    .site-logo {
        width: 150px;
    }

    .global-nav {
        order: 3;
        width: 100%;
        border-top: 1px solid var(--c-line);
        padding-top: 0.5rem;
    }

    .global-nav ul {
        justify-content: space-between;
        gap: 0.5rem;
    }

    .global-nav a {
        font-size: 0.8125rem;
        letter-spacing: 0.06em;
    }

    /* 1カラムに落とすもの */
    .story-block,
    .world,
    .music-hero,
    .production {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 交互配置をやめ、常に画像が先 */
    .story-block:nth-child(even) .story-block__figure {
        order: 0;
    }

    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .footer-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75em 1.5em;
    }

    /* 定義リストを縦積みに */
    .data-list > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }

    /* 興行記録：主役の抜きを解いて縦 1 列にする。
       罫線は各 item の border-bottom のままで区切りとして成立する */
    .record-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .record-stats__main .record-stats__data {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7em;
    }

    .record-stats__main .record-stats__note {
        grid-column: auto;
    }

    /* 数値は2列に折り返す */
    .counter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}


/* ---- 小型スマートフォン ---- */
@media screen and (max-width: 480px) {

    .global-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 1.1rem;
    }

    .header-cta a {
        padding: 0.5em 1.1em;
        font-size: 0.75rem;
    }

    .nav-cards,
    .char-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .char-sub-grid,
    .creator-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================
   印刷用（最低限）
   ========================================================== */

@media print {

    body {
        background: #fff;
        color: #000;
    }

    .site-header,
    .site-footer,
    .page-links,
    .breadcrumb {
        display: none;
    }
}