@charset "UTF-8";

/* ==========================================================
    第1回 白浜ロックフェス 2026 共通スタイル
    - デザインカンプ: design_pc.jpg（1920px幅 1:1）
    - 背景は「固定写真 + 花火Canvas」を全ページで表示し、
      各セクションは背景を持たせず、その上に文字だけを載せる
    - 文字サイズはPC（1025px以上）で固定。タブレット以下のみ縮小し、
      本文は最小14pxを下回らないようにする
========================================================== */

:root {
    /* カラーパレット */
    --colorBg: #140607;
    --colorRed: #c8102a;
    --colorPink: #ef4a6b;
    --colorSilver: #e8e4e1;
    --colorSilverDim: #b7b1ad;
    --colorGold: #c9a86a;
    --colorGoldBright: #f5c518;

    /* 罫線（カンプに合わせて明るめ） */
    --lineMain: rgba(255, 255, 255, 0.72);
    --lineSub: rgba(255, 255, 255, 0.4);

    /* シルバーの金属質グラデーション（縦方向なので文字間で途切れない） */
    --gradSilver: linear-gradient(180deg, #ffffff 0%, #e2ded9 38%, #a5a09b 55%, #ddd8d3 72%, #ffffff 100%);
    /* ゴールドの金属質グラデーション */
    --gradGold: linear-gradient(180deg, #fdf3cf 0%, #e8c976 42%, #a97f2c 58%, #f0da9c 78%, #fff8e0 100%);
    /* 「花火1800発」のピンク（カンプ実測: 上下が明るく中央が沈む） */
    --gradPink: linear-gradient(180deg, #FF516E 24%, #B3273E 50%, #FF516E 76%);

    /* フォント */
    --fontSerifJa: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --fontSerifEn: 'Playfair Display', 'Times New Roman', serif;
    /* 情報量が多く読ませたい箇所（NEWS・注意書き・ACCESS の説明・GUIDELINES）に使う */
    --fontSansJa: 'Noto Sans JP', sans-serif;

    /* フッターの下地。ページトップの三角、追従ボタン、ヘッダーの下地も共有する */
    --footerBg: rgba(12, 0, 0, 0.85);

    /* レイアウト */
    --containerW: 1320px;
    --gutter: 40px;
    --headerH: 140px;
    /* セクションの上下余白。アンカー位置の計算にも使う */
    --secPad: 134px;
    /* ページ内リンクの着地位置。
       着地先ではヘッダーが縮む。--headerHScrolled は min-height の下限で、
       実際の高さは中身で決まり 102px 前後。それ＋余白40px */
    --anchorOffset: 142px;
    --headerHScrolled: 74px;

    /* 文字サイズ（PC固定値。ブレークポイントで上書きする） */
    --fsBody: 19px;
    --fsSmall: 18px;
    --fsSecTitle: 72px;
}

/* ---------- リセット ---------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* hidden だとスクロール枠が作られて position:sticky が効かなくなるため clip を使う */
    overflow-x: clip;
    /* メニュー展開でスクロールバーが消えても幅が変わらないよう領域を確保する */
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    /* 固定ヘッダーの分だけアンカー位置を下げる */
    scroll-padding-top: var(--anchorOffset);
}

img,
svg,
iframe {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* ---------- ベース ---------- */

body {
    position: relative;
    font-family: var(--fontSerifJa);
    font-weight: 500;
    font-size: var(--fsBody);
    line-height: 1.9;
    color: var(--colorSilver);
    background-color: var(--colorBg);
    overflow-x: clip;
    /* 欧文フォントの数字は高さの揃うライニング数字に統一する（カンプの表記に合わせる） */
    font-variant-numeric: lining-nums;
    font-feature-settings: 'lnum' 1;
}

/* ---------- ユーティリティ ---------- */

/* スクリーンリーダー専用テキスト（視覚的には非表示） */
.srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.container {
    width: min(100% - var(--gutter) * 2, var(--containerW));
    margin-inline: auto;
}

/* カンプ上、アーティスト・about・MESSAGE・TIME TABLE列は 1720px 幅で組まれている */
.artist,
.about,
.message,
.info {
    --containerW: 1720px;
}

/* セクションは背景を持たせず、固定された花火の背景を透かす */
.section {
    position: relative;
    z-index: 2;
    padding-block: var(--secPad);
    /* アンカーで飛んだとき、見出しがヘッダー直下に来るよう
       セクションの上余白を打ち消す */
    scroll-margin-top: calc(var(--secPad) * -1);
}

/* 文字を載せる枠の中だけ暗幕を敷いて可読性を確保する
   （ページ全体には掛けず、背景の花火を活かす） */
.news,
.movie,
.aboutOutline,
.accessBox,
.artistCard,
.freeBody {
    background-color: rgba(6, 2, 4, 0.6);
}

/* 背景写真の上でも本文が読めるよう、共通の落ち影を用意する */
/* 語句の途中で改行させたくない範囲に付ける */
.nowrap {
    white-space: nowrap;
}

/* スマートフォンでだけ効かせる改行 */
.brSp {
    display: none;
}

/* 読点など語中で切れる位置の改行。カンプどおりの幅では活かし、
   幅が足りなくなったら消す（「。」「…」の後は通常の <br> のまま常に残す） */
.brPc {
    display: inline;
}

@media (max-width: 1150px) {
    .brPc {
        display: none;
    }
}

/* 見出しの改行。1行に収まる幅では消し、収まらなくなったら意図した位置で折る
   （自然改行に任せると単語の途中で切れて見栄えが悪い） */
.brTitle {
    display: none;
}

@media (max-width: 767px) {
    .brTitle {
        display: inline;
    }
}

.textShadow {
    text-shadow:
        0 1px 6px rgba(5, 2, 3, 0.95),
        0 2px 20px rgba(5, 2, 3, 0.85);
}

/* ---------- 見出し ---------- */

/* ARTIST LINEUP / TIME TABLE などの英字セクション見出し */
.secTitle {
    font-family: var(--fontSerifEn);
    font-size: var(--fsSecTitle);
    /* Playfair Display は同じウェイトでも太く出るため、カンプの線の細さに合わせて落とす */
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    text-shadow:
        0 0 18px rgba(255, 244, 240, 0.55),
        0 0 60px rgba(226, 150, 160, 0.35),
        0 2px 20px rgba(5, 2, 3, 0.9);
}

.secTitleLeft {
    text-align: left;
}

/* ---------- ボタン ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9em;
    min-height: 66px;
    padding: 0.6em 2.4em;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    line-height: 1.4;
    border-radius: 999px;
    transition: transform 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}

/* ボタン内の矢印（mask非対応環境でも消えないよう、罫線で山形を描く） */
.btnArrow {
    flex: none;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.4s ease;
}

/* 赤塗りのメインボタン（左から右へのグラデーション） */
.btnPrimary {
    position: relative;
    isolation: isolate;
    color: #fff;
    background-image: linear-gradient(90deg, #8a0000 0%, #c30216 100%);
}

/* background-image はトランジションできないため、
   ホバー時の白はこの下地の不透明度で滑らかに切り替える */
.btnPrimary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: linear-gradient(90deg, #b8001a 0%, #e8203a 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 白線のサブボタン */
.btnOutline {
    color: #fff;
    /* 背景写真の上でも読めるよう、枠内（.freeBody など）と同じ暗幕を敷く */
    background-color: rgba(6, 2, 4, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.btnOnRed {
    background-color: rgba(0, 0, 0, 0.06);
}

/* ホバーは色が変わるだけにする（位置は動かさない） */
@media (hover: hover) and (pointer: fine) {
    .btnPrimary:hover::before {
        opacity: 1;
    }

    .btnOutline:hover {
        background-color: rgba(255, 255, 255, 0.18);
        border-color: #fff;
    }
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid #f2a6b4;
    outline-offset: 3px;
}

/* ---------- 固定背景レイヤー ----------
   viewport に固定し、全セクションがこの上を通過する。
   セクションは背景を持たないため、打ち上がる花火が最後まで透ける。
   background-attachment: fixed は iOS Safari で破綻するため使用しない。 */

.heroBg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    /* アドレスバーの伸縮で高さが変わらないよう、最大側の viewport 高さに固定する
       （lvh 非対応環境では vh が同じ役割を果たす） */
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
}

/* フェス会場の背景写真（花火が写っていない素材。花火はCanvasが描く） */
.heroBgPhoto {
    position: absolute;
    inset: 0;
    background: var(--siteBg) center bottom / cover no-repeat;
}

/* 花火Canvas */
.fireworks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------- ヘッダー ---------- */

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
}

/* スクロール後は半透明の黒を敷いて可読性を確保する。
   backdrop-filter を .header 自身に掛けると position:fixed の包含ブロックになり、
   子である SP のオーバーレイメニュー（.gnav）がヘッダーの高さに閉じ込められてしまう。
   擬似要素は .gnav の祖先にならないため、下地だけをここへ逃がしている */
.header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background-color: var(--footerBg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.4s ease;
}

.header.isScrolled::before {
    opacity: 1;
}

/* 中央にナビ、右端にSNS。1fr の余白列が縮むことで両者が重ならない */
.headerInner {
    position: relative;
    display: grid;
    /* 両端の列は min-content（＝SNSの実寸）を下限にして潰れないようにする */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    min-height: var(--headerH);
    padding-inline: 30px;
    transition: min-height 0.4s ease;
}

/* スクロールし始めたら高さを詰める */
.header.isScrolled .headerInner {
    min-height: var(--headerHScrolled);
}

.gnav {
    grid-column: 2;
    min-width: 0;
}

/* カンプのヘッダーにロゴは無いため、PCでは非表示（SPのみ表示） */
.headerLogo {
    display: none;
    grid-column: 1;
    justify-self: start;
}

.gnavList {
    display: flex;
    align-items: center;
    /* カンプ実測の項目間 */
    gap: 42px;
}

.gnavLink {
    position: relative;
    display: block;
    padding-block: 6px;
    font-family: var(--fontSerifEn);
    /* カンプ実測（ARTIST LINEUP の描画幅155px）に合わせる */
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 1px 8px rgba(5, 2, 3, 0.95);
    transition: opacity 0.35s ease;
}

/* ホバー時に下線を伸ばす */
.gnavLink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .gnavLink:hover::after {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

.headerSns,
.gnavSns {
    display: flex;
    align-items: center;
    gap: 6px;
    /* 幅が詰まってもアイコンを縮ませない */
    flex: none;
    min-width: max-content;
}

/* カンプではアイコンの右端が画面右端から約61px内側に置かれている */
.headerSns {
    grid-column: 3;
    justify-self: end;
    margin-right: 23px;
}

.gnavSns {
    display: none;
}

/* padding でタップ領域を確保する（アイコンの見た目の大きさは変えない） */
.snsLink {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 8px;
    color: #fff;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.snsIcon {
    /* リセットの max-width:100% で親に合わせて縮むのを防ぐ */
    flex: none;
    max-width: none;
    width: 34px;
    height: auto;
    fill: currentColor;
    filter: drop-shadow(0 1px 6px rgba(5, 2, 3, 0.9));
}

@media (hover: hover) and (pointer: fine) {
    .snsLink:hover {
        opacity: 0.7;
        transform: translateY(-2px);
    }
}

/* ハンバーガー（PCでは非表示） */
.navToggle {
    display: none;
    position: relative;
    transition: opacity 0.3s ease;
    grid-column: 3;
    justify-self: end;
    width: 44px;
    height: 44px;
    flex: none;
}

.navToggleBar,
.navToggleBar::before,
.navToggleBar::after {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 1.5px;
    background-color: #fff;
    transition: transform 0.35s ease, background-color 0.3s ease, width 0.3s ease;
}

/* ホバーで上下のバーが少し縮み、色がほんのり色づく */
@media (hover: hover) and (pointer: fine) {
    .navToggle:hover {
        opacity: 0.7;
    }

    .navToggle:hover[aria-expanded="false"] .navToggleBar::before,
    .navToggle:hover[aria-expanded="false"] .navToggleBar::after {
        width: 16px;
    }
}

.navToggleBar {
    top: 21px;
}

.navToggleBar::before,
.navToggleBar::after {
    content: '';
    left: 0;
    top: 0;
}

.navToggleBar::before {
    transform: translateY(-7px);
}

.navToggleBar::after {
    transform: translateY(7px);
}

/* 開いている時は×に変形 */
.navToggle[aria-expanded="true"] .navToggleBar {
    background-color: transparent;
}

.navToggle[aria-expanded="true"] .navToggleBar::before {
    transform: rotate(45deg);
}

.navToggle[aria-expanded="true"] .navToggleBar::after {
    transform: rotate(-45deg);
}

/* ---------- FV（ヒーロー） ---------- */

.hero {
    position: relative;
    /* 追従ボタンが後続セクションの背面に潜らないよう、FV ごと前面に置く
       （FV自体は 100dvh でスクロールすれば画面外へ出るため見た目に影響しない） */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    /* dvh はアドレスバーの伸縮で高さが変わり、スクロールのたびに
       後続セクションがずれて見える。最小側の svh に固定する */
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--headerH) + 24px) var(--gutter) 60px;
    text-align: center;
}

.heroInner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ヒーローは読み込み直後に上から順に立ち上げる。
   日時の3行とボタン2本は一括ではなく個別にずらし、
   ロゴを主役に据えて全体で約3.7秒かけて出し切る */
.js .hero .heroEdition,
.js .hero .heroDate,
.js .hero .heroTime,
.js .hero .heroPlace,
.js .hero .heroFree,
.js .hero .heroFireworks,
.js .hero .heroButtons .btn {
    opacity: 0;
    transform: translateY(26px);
    animation: heroRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.js .hero .heroEdition { animation-delay: 0.2s; }
.js .hero .heroDate { animation-delay: 1.35s; }
.js .hero .heroTime { animation-delay: 1.55s; }
.js .hero .heroPlace { animation-delay: 1.72s; }
.js .hero .heroFree { animation-delay: 1.98s; }
.js .hero .heroButtons .btn:first-child { animation-delay: 2.52s; }
.js .hero .heroButtons .btn:last-child { animation-delay: 2.64s; }

/* 「花火1800発」だけは少し大きめから収めて、締めの一撃として見せる */
.js .hero .heroFireworks {
    transform: translateY(26px) scale(1.06);
    animation-name: heroRiseZoom;
    animation-delay: 2.25s;
}

/* 飾り線は文字側を起点に左右へ伸ばす。
   幅はブレークポイントごとに変わるため、width ではなく scaleX で動かして追従させる */
.js .hero .heroEdition::before,
.js .hero .heroEdition::after,
.js .hero .heroFree::before,
.js .hero .heroFree::after {
    transform: scaleX(0);
    animation: heroLineIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.js .hero .heroEdition::before,
.js .hero .heroFree::before {
    transform-origin: right center;
}

.js .hero .heroEdition::after,
.js .hero .heroFree::after {
    transform-origin: left center;
}

.js .hero .heroEdition::before,
.js .hero .heroEdition::after {
    animation-delay: 0.42s;
}

.js .hero .heroFree::before,
.js .hero .heroFree::after {
    animation-delay: 2.15s;
}

/* ロゴは花火の閃光に合わせ、白く飛んだ光からじわりと像が結ぶ動きにする */
.js .hero .heroLogo {
    opacity: 0;
    transform: scale(1.05);
    animation: heroLogoIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes heroRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroRiseZoom {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroLineIn {
    to {
        transform: scaleX(1);
    }
}

@keyframes heroLogoIn {
    0% {
        opacity: 0;
        transform: scale(1.05);
        filter: blur(18px) brightness(2.4);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
}

/* 「─ 第1回 ─」 */
.heroEdition {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: #fff;
    text-shadow: 0 1px 12px rgba(5, 2, 3, 0.85);
}

.heroEdition::before,
.heroEdition::after {
    content: '';
    width: 84px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #7d2434);
}

.heroEdition::after {
    background: linear-gradient(90deg, #7d2434, transparent);
}

/* ロゴ（銀グラデーションのPNG。周囲の余白込みで750px＝図案576px幅） */
.heroLogo {
    margin-top: 4px;
    line-height: 0;
}

.heroLogo img {
    width: 750px;
    height: auto;
    filter:
        drop-shadow(0 2px 10px rgba(5, 2, 3, 0.95))
        drop-shadow(0 0 40px rgba(5, 2, 3, 0.9));
}

.heroSchedule {
    margin-top: 8px;
}

/* 「2026.10.10(土)」 */
.heroDate {
    font-family: var(--fontSerifEn);
    font-size: 66px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    background: var(--gradSilver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 12px rgba(5, 2, 3, 0.9));
}

.heroDay {
    font-family: var(--fontSerifJa);
    font-size: 0.42em;
}

.heroTime {
    margin-top: 0.2em;
    /* カンプ実測：文字の高さ25px、行の描画幅261px。
       サイズは25pxのままで、はみ出すぶんは字間で詰める */
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0;
    color: #f7f4f1;
    text-shadow: 0 1px 5px rgba(5, 2, 3, 0.95), 0 2px 18px rgba(5, 2, 3, 0.9);
}

.heroTimeSep {
    margin-inline: 0.25em;
    color: #f2a6b4;
}

.heroPlace {
    margin-top: 0.35em;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 1px 5px rgba(5, 2, 3, 0.95), 0 2px 18px rgba(5, 2, 3, 0.9);
}

/* 「観覧無料」はゴールド（カンプ実測 rgb(255,201,174) 前後） */
.heroFree {
    font-weight: 700;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    line-height: 1.3;
    background: var(--gradGold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(0 2px 8px rgba(5, 2, 3, 0.95))
        drop-shadow(0 0 16px rgba(232, 201, 118, 0.35));
}

/* 「花火1800発」はカンプ実測 rgb(254,230,243) のほぼ白。ピンクのグローが乗る */
.heroFireworks {
    font-weight: 500;
    line-height: 1.3;
    color: #fee6f3;
    text-shadow:
        0 0 15px #ff66b3,
        0 0 40px rgba(255, 102, 179, 0.6);
    filter: drop-shadow(0 2px 8px rgba(5, 2, 3, 0.95));
}

/* 「観覧無料」の左右にだけ金の飾り線が入る */
.heroFree {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin-top: 18px;
    font-size: 64px;
}

.heroFree::before,
.heroFree::after {
    content: '';
    width: 66px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d8b969);
}

.heroFree::after {
    background: linear-gradient(90deg, #d8b969, transparent);
}

.heroFireworks {
    margin-top: 0.1em;
    font-size: 43px;
    letter-spacing: 0;
    text-indent: 0;
}

.heroFireworksNum {
    font-family: var(--fontSerifEn);
    font-weight: 400;
    font-size: 1.49em;
}

.heroButtons {
    /* カンプでは2つのボタンが同じ幅で並ぶ。
       1fr の等分と fit-content の組み合わせで、長い方の幅に揃う */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: fit-content;
    margin: 46px auto 0;
}

.heroButtons .btn {
    white-space: nowrap;
}

/* 固定に切り替えたとき、本来の位置が詰まらないよう高さを肩代わりする */
.heroButtonsSpacer {
    height: 0;
}

/* ハンバーガーが出ない幅（1025px以上）だけ、画面下から一定の位置で追従に切り替える。
   それより狭いとボタン2つが横に並びきらないため、SPと同じ下端固定にする */
@media (min-width: 1025px) {
    .heroButtons.isStuck {
        position: fixed;
        /* transform で中央寄せすると fixed の基準がこの要素になり、
           下の幕が画面下端に届かなくなるため margin で中央に置く */
        left: 0;
        right: 0;
        bottom: 25px;
        z-index: 90;
        width: fit-content;
        /* 本文コンテナと同じだけ画面端から離す。
           2つ並べて入りきらない幅では、ここで頭打ちにして余白を守る */
        max-width: calc(100% - var(--gutter) * 2);
        margin-inline: auto;
    }

    /* ボタンの下側だけを暗くする幕。操作の邪魔をしないよう当たり判定を持たせず、
       ボタンより後ろに敷く。トランジションを効かせるため常に存在させておく */
    .heroButtons::before {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        height: 210px;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(180deg,
            rgba(6, 2, 4, 0) 0%,
            rgba(6, 2, 4, 0.45) 45%,
            rgba(6, 2, 4, 0.82) 78%,
            rgba(6, 2, 4, 0.92) 100%);
        transition: opacity 0.45s ease;
    }

    .heroButtons.isStuck::before {
        opacity: 1;
    }

    /* フッターに差し掛かったら幕は消す（フッターの文字が読みにくくなるため） */
    .heroButtons.isStuck.isNearFooter::before {
        opacity: 0;
    }
}

/* ---------- ARTIST LINEUP ---------- */

.artistList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 47px;
    margin-top: 72px;
}

/* カンプ同様、きらめきは左上と右下の2箇所だけに置く */
.artistItem {
    position: relative;
}

.artistItem::before,
.host::before {
    content: '';
    position: absolute;
    inset: -35px;
    z-index: 2;
    pointer-events: none;
    background-image:
        var(--siteShine),
        var(--siteShine);
    background-repeat: no-repeat;
    background-size: 70px 70px;
    background-position: left top, right bottom;
}

/* カードはモーダルを開くボタン */
.artistCard {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: left;
    border: 1px solid var(--lineMain);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.artistThumb {
    display: block;
    position: relative;
    overflow: hidden;
}

.artistThumb img {
    transition: transform 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
    /* ホバーで初めて transform が付くと、その瞬間に合成レイヤーが作られて
       画像が一瞬つぶれて見える。あらかじめ恒等変換を持たせてレイヤーを固定しておく
       （カードの親 .artistItem も reveal 後に transform を保持している） */
    .artistThumb img {
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .artistCard:hover {
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 22px rgba(255, 255, 255, 0.28);
    }

    .artistCard:hover .artistThumb img {
        transform: translateZ(0) scale(1.05);
    }
}

.artistCard:focus-visible {
    outline: 2px solid #f2a6b4;
    outline-offset: 3px;
}

.artistThumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 350;
    object-fit: cover;
}

.artistName {
    display: block;
    margin-top: 20px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    /* カンプ同様、白文字をほのかに滲ませる */
    text-shadow: 0 0 20px #fff, 0 2px 10px rgba(5, 2, 3, 0.9);
}

/* ---------- 総合司会 ---------- */

.host {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    /* 中身の幅ちょうどに収める（max-width を決め打ちすると足りずにはみ出す） */
    width: max-content;
    max-width: 100%;
    margin: 88px auto 0;
    padding: 40px 56px 44px;
    /* カンプ実測 #564E4C。背景がうっすら透ける 70% で敷く */
    background-color: rgba(86, 78, 76, 0.7);
}

.hostTitle {
    flex: none;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #fff;
    text-shadow: 0 0 20px #fff;
}

.hostList {
    flex: none;
    display: flex;
    gap: 26px;
}

/* 総合司会もアーティストと同じモーダルを開くが、
   カンプでは枠のないカードなので .artistCard の装飾は打ち消す */
.hostCard {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    text-align: center;
    background-color: transparent;
    border: 0;
}

.hostThumb {
    display: block;
    /* 比率はカンプの 134:175 を保ったまま、PCでは見やすい大きさにする */
    width: 200px;
}

.hostThumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 150 / 165;
    object-fit: cover;
    transition: transform 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
    /* アーティストカードの枠線・影は総合司会には出さず、写真の寄りだけで示す */
    .hostCard {
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .hostCard:hover {
        border-color: transparent;
        box-shadow: none;
    }

    .hostCard:hover .hostThumb img {
        transform: translateZ(0) scale(1.05);
    }

    .hostCard:hover .hostName {
        opacity: 0.85;
    }
}

.hostName {
    margin-top: 0.7em;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 20px #fff, 0 2px 10px rgba(5, 2, 3, 0.9);
}

/* ---------- 花火 / 概要（about） ---------- */

/* 「──✦ 花火1800発 ✦──」 */
.aboutFireworks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    font-size: 53px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    /* カンプ実測 rgb(255,230,243)。ピンクのグラデーションからほぼ白へ変更 */
    color: #ffe6f3;
    text-shadow:
        0 0 22px rgba(255, 150, 190, 0.55),
        0 0 60px rgba(255, 110, 160, 0.35);
}

/* 左右に伸びる線と、その先端のきらめき */
.aboutFireworks::before,
.aboutFireworks::after {
    content: '';
    flex: 1;
    height: 70px;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85)), var(--siteShine);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 1px, 70px 70px;
    background-position: center, left center;
}

.aboutFireworks::after {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.85), transparent), var(--siteShine);
    background-position: center, right center;
}

.aboutFireworksNum {
    font-family: var(--fontSerifEn);
    font-weight: 400;
    font-size: 1.9em;
    letter-spacing: 0;
}

.aboutMain {
    margin-top: 56px;
}

.aboutMain img,
.aboutPhotos img,
.areamapFigure img,
.accessBoxFigure img {
    width: 100%;
    height: auto;
}

.aboutPhotos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.aboutPhotos img {
    aspect-ratio: 560 / 360;
    object-fit: cover;
}

.aboutBody {
    margin-top: 106px;
    text-align: center;
}

/* 「白浜ロックフェス 2026」 */
.aboutTitle {
    font-size: 70px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    line-height: 1.3;
    background: var(--gradSilver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 12px rgba(5, 2, 3, 0.9));
}

.aboutLead {
    margin-top: 26px;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.85;
    color: #fff;
    text-shadow: 0 1px 6px rgba(5, 2, 3, 0.95), 0 2px 20px rgba(5, 2, 3, 0.85);
    /* 「音楽と花火」の光を、この段落の文字より下に敷くための重なりの基準。
       ここで層を区切らないと z-index:-1 の光がセクション背景の下に潜って消える */
    position: relative;
    z-index: 0;
}

/* 「音楽と花火」は白文字のまま、背後に赤紫の光をぼかして敷く */
.aboutGlow {
    position: relative;
    /* 語の途中で改行させない */
    display: inline-block;
    vertical-align: baseline;
    /* 親の落ち影（20pxの黒ぼかし）が背後の光を打ち消してしまうため、ここだけ弱める */
    text-shadow: 0 1px 4px rgba(5, 2, 3, 0.55);
}

/* カンプでは「音楽」の後ろに赤、「花火」の後ろにマゼンタの光がぼんやり乗る。
   1つの箱に2つ並べると文字と光の中心がずれるため、語ごとに敷く。
   光は語より広いので、要素の背景に置くと隣の「と」や「が」の上に乗ってしまう。
   疑似要素に逃がして文字より下の層に置く */
.aboutGlow::before {
    content: '';
    position: absolute;
    inset: -0.95em -0.85em;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    pointer-events: none;
}

.aboutGlowRed::before {
    background-image: radial-gradient(closest-side ellipse,
        rgba(196, 0, 22, 1) 0%,
        rgba(186, 0, 20, 0.82) 34%,
        rgba(168, 0, 18, 0.34) 66%,
        rgba(148, 0, 16, 0) 100%);
}

.aboutGlowPink::before {
    background-image: radial-gradient(closest-side ellipse,
        rgba(206, 3, 104, 1) 0%,
        rgba(194, 3, 96, 0.82) 34%,
        rgba(176, 2, 86, 0.34) 66%,
        rgba(163, 2, 79, 0) 100%);
}


/* 「観覧無料」は金の金属光沢（色は参考スクリーンショットの指定どおり）
   細い字のままだとアンチエイリアスで色が沈むため、少しだけ太らせて発色させる */
.aboutFree {
    font-weight: 700;
    background: linear-gradient(180deg, #efd795 14%, #b3883a 63%, #d3b36d 89%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 8px rgba(5, 2, 3, 0.9));
    text-shadow: none;
}

/* 開催概要のボックス */
.aboutOutline {
    max-width: 1120px;
    margin: 62px auto 0;
    padding: 39px 58px 55px;
    text-align: left;
    font-size: 25px;
    border: 1px solid var(--lineMain);
}

.aboutOutlineRow {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.4;
}

.aboutOutlineRow dt {
    flex: none;
    font-weight: 600;
}

/* 「開催日時：」のコロンを擬似要素で出し、dt/dd の余白を一定に保つ */
.aboutOutlineRow dt::after {
    content: '：';
}

.aboutNote {
    margin-top: 0.55em;
    font-size: 19px;
    line-height: 1.4;
    color: #eae5e1;
}

/* ---------- MESSAGE ---------- */

/* 唯一、黒の下地を敷くセクション */
.message {
    /* 画像の食い込み量。黒背景の上端をこの位置に合わせる */
    --figTop: min(141px, 7.34vw);
    /* 前セクションの下端から見出しまでの距離（カンプ実測） */
    --msgSpace: 293px;
    overflow: hidden;
    /* 黒背景の外側で余白を稼ぎ、黒地の上端は画像の上端と揃える */
    margin-top: calc(var(--msgSpace) - var(--figTop));
    padding-top: var(--figTop);
    background-color: #0a0304;
}

/* 人物画像を見出しより上から重ねるための基準 */
.message .container {
    position: relative;
}

/* 背後に沈む大きなアウトライン風の英字見出し */
.messageTitle {
    font-family: var(--fontSerifEn);
    /* 他のセクション見出し（.secTitle）と同じ大きさに揃える。
       カンプPCでは1行なので、収まらない幅は字を落として1行を保つ */
    font-size: min(var(--fsSecTitle), 4.3vw);
    /* 改行は .brTitle の位置だけで起こす */
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    /* カンプでは上が沈み下が明るくなる縦のグラデーションが掛かっている */
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.44) 35%,
        rgba(255, 255, 255, 0.5) 65%,
        rgba(255, 255, 255, 0.15) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 画像（positioned）より前面に置いて、人物と重なっても読めるようにする */
    position: relative;
    z-index: 1;
}

.messageInner {
    margin-top: 58px;
}

/* カンプ実測: 右端は画面右端に接し、顔は見出しより下・キャッチの右に来る。
   稲妻の先端は黒地の上端から始まる。.container は padding-top のぶん
   下がっているので、その分だけ戻して黒地の上端に合わせる */
.messageFigure {
    position: absolute;
    top: calc(var(--figTop) * -1);
    right: calc((100% - 100vw) / 2);
    z-index: 0;
    /* カンプ実測: 1920px で 1330px（元画像の等倍）。
       狭い幅では同じ比率で縮め、1920px を超えたら等倍で止める */
    width: min(69.27vw, 1330px);
    pointer-events: none;
}

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

.messageBody {
    position: relative;
    z-index: 1;
    max-width: 62%;
    /* カンプでは本文の左端が 1920px 時に x=290 付近から始まる */
    padding-left: min(190px, 10vw);
}

.messageCatch {
    /* カンプPCでは1行。折り返させず、狭い幅では字を落として1行を保つ */
    white-space: nowrap;
    /* 1920px で53px（カンプ）。中間幅は人物が vw に比例して大きくなるので、
       キャッチが顔に届かないよう文字も幅に連動させる。
       段階的に切り替えると境目で必ず被るため、連続値にしている */
    font-size: min(53px, calc(1.234vw + 30px));
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.55;
    color: #fff;
    text-shadow: 0 2px 18px rgba(5, 2, 3, 0.95);
}

/* 「魂」だけ一回り大きい赤字 */
.messageKanji {
    font-size: 1.4em;
    color: #c8102a;
    text-shadow: 0 0 22px rgba(200, 16, 42, 0.75);
}

.messageText {
    margin-top: 58px;
    line-height: 2;
    color: #f1eeeb;
    text-shadow: 0 1px 8px rgba(5, 2, 3, 0.95), 0 2px 20px rgba(5, 2, 3, 0.85);
}

.messageText p + p {
    margin-top: 1.6em;
}

.messageSign {
    margin-top: 50px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 2px 14px rgba(5, 2, 3, 0.9);
}

/* ---------- TIME TABLE / NEWS ---------- */

.infoLayout {
    /* 横並びでは列間、縦並びでは行間になる間隔 */
    --infoGap: 50px;
    /* 縦並びのときに列どうしをさらに離す分 */
    --infoColSpacing: 64px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--infoGap);
    /* 左右の列を同じ高さに伸ばす */
    align-items: stretch;
}

.infoCol {
    display: flex;
    flex-direction: column;
}

.infoCol .secTitle {
    margin-bottom: 42px;
}

/* --- TIME TABLE --- */

.timetable {
    /* 余った高さを吸収して NEWS 側と下端を揃える */
    flex: 1 1 auto;
    position: relative;
    /* 最終行の時刻欄の幅。区切り線・赤の範囲・写真の位置がこの値に連動する */
    --finaleTimeW: 200px;
    padding: 79px 28px 51px;
    /* カンプ実測。上端は沈み、上から3割あたりが最も明るく、下へ向かって黒へ落ちる */
    background: linear-gradient(180deg,
        #010729 0%,
        #014670 28%,
        #012353 54%,
        #000f24 81%,
        #010005 100%);
    border: 1px solid rgba(255, 255, 255, 0.52);
}

/* カンプでは上の2隅にだけきらめきが置かれている */
.timetable::before {
    content: '';
    position: absolute;
    inset: -35px -35px auto;
    height: 70px;
    z-index: 2;
    pointer-events: none;
    background-image:
        var(--siteShine),
        var(--siteShine);
    background-repeat: no-repeat;
    background-size: 70px 70px;
    background-position: left top, right top;
}

.timetableNote {
    font-size: var(--fsSmall);
    line-height: 1.45;
    text-align: center;
    color: #f0edea;
}

/* 開場行は時刻側まで白地が伸び、内側に区切り線が入る */
.timetableOpen {
    display: flex;
    align-items: stretch;
    min-height: 60px;
    margin-top: 39px;
    color: #150607;
    background: linear-gradient(180deg, #ffffff 0%, #efefef 100%);
}

.timetableOpenTime {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    font-size: 22px;
    font-weight: 600;
    border-right: 1px solid #b9b3b0;
}

.timetableOpenName {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fontSerifEn);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
}

/* 閉演は開場と同じ白地。開場の下（.timetableList の border-top）と同じ罫線を上に引く。
   罫線までの距離は「開場→罫線」と、罫線から白地までは「罫線→表の1行目」と揃える。
   1024px以下の .timetableOpen より詳細度を上げないと余白を奪われる */
.timetableOpen.timetableClose {
    position: relative;
    margin-top: 54px;
}

.timetableClose::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.25);
}

/* 「閉演」は日本語なので、OPEN のような英字向けの字間は詰める */
/* 「閉演」は日本語なので、英字向けのフォントと字間だけ差し替える。
   文字サイズは OPEN と同じにしたいので、ここでは指定しない */
.timetableClose .timetableOpenName {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
}

.timetableList {
    /* 行間に隙間を作るため分離モデルにする */
    border-collapse: separate;
    border-spacing: 0 12px;
    /* 開場行の下に引かれる全幅の罫線 */
    margin-top: 29px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* 語のまとまりの途中では折り返させない。
   幅が足りないときだけ、語と語の間で改行する */
.ttUnit {
    white-space: nowrap;
}

.timetableList th,
.timetableList td {
    padding: 0.62em 0.6em;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
}

/* 時刻列（背景も罫線も持たない） */
.timetableList th {
    width: 200px;
    /* 開場・花火・閉演の時刻欄と縦を揃えるため、内容に押されて縮ませない */
    min-width: 200px;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 0 20px #fff, 0 2px 10px rgba(5, 2, 3, 0.9);
}

/* アーティスト名のセル（カンプ実測で高さ58px）。
   半透明の白なので下地の青グラデーションが透け、
   さらに1行おきに濃さを変えることで縞になる */
.timetableList td {
    padding-block: 0.57em;
    text-align: center;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    text-shadow: 0 2px 8px rgba(5, 2, 3, 0.8);
}

.timetableList tr:nth-child(odd) td {
    background-color: rgba(255, 255, 255, 0.26);
}

.timetableList tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.11);
}

/* 最終行: 花火写真の上に、左から効く赤いグラデーションを重ねる */
.timetableFinale {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 150px;
    margin-top: 41px;
    /* カンプでは上下だけに罫線が入る（左右は罫線なし） */
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    /* カンプ実測: 区切り線までは完全に不透明で、そこから写真が透け始める。
       写真は区切り線の少し右から、帯の高さの117%で配置される */
    background:
        linear-gradient(90deg,
            #bf0663 0,
            #a80456 calc(var(--finaleTimeW) * 0.45),
            #8f0148 calc(var(--finaleTimeW) * 0.9),
            #870043 var(--finaleTimeW),
            rgba(135, 0, 67, 0.72) calc(var(--finaleTimeW) + 45px),
            rgba(120, 0, 58, 0.32) calc(var(--finaleTimeW) + 105px),
            rgba(105, 0, 50, 0) calc(var(--finaleTimeW) + 175px)),
        var(--siteSchedule) right center / auto 100% no-repeat;
}

.timetableFinaleTime {
    flex: none;
    display: flex;
    align-items: center;
    /* 表の時刻列と縦を揃えるため、配置も th と同じ中央寄せにする */
    justify-content: center;
    width: var(--finaleTimeW);
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.timetableFinaleName {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 0.4em 0.6em 0.4em 114px;
    font-size: 45px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #fff;
    text-shadow:
        0 0 15px #ff66b3,
        0 2px 14px rgba(0, 0, 0, 0.95);
}

/* 時刻とタイトルの間の縦の区切り線（上下に余白を残す） */
.timetableFinaleName::before {
    content: '';
    position: absolute;
    left: 0;
    top: 17%;
    bottom: 17%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.55);
}

/* --- NEWS --- */

/* 最低限の高さを保ちつつ、余った高さを吸収して左列と下端を揃える */
.news {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 320px;
    padding-block: 12px;
    border: 1px solid var(--lineMain);
}

.newsList {
    flex: 1 1 auto;
    /* flex 内でスクロールさせるために必要 */
    min-height: 0;
    overflow-y: auto;
    /* スクロールバーの見た目（Firefox） */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.08);
}

.newsList::-webkit-scrollbar {
    width: 10px;
}

.newsList::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.06);
}

.newsList::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.45);
}

.newsItem {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 60px;
    padding: 28px 35px 28px 50px;
}

/* 罫線は左右の余白より内側で止める */
.newsItem::after {
    content: '';
    position: absolute;
    left: 50px;
    right: 35px;
    bottom: 0;
    height: 1px;
    background-color: var(--lineSub);
}


.newsDate {
    flex: none;
    font-family: var(--fontSerifEn);
    font-size: var(--fsBody);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(5, 2, 3, 0.9);
}

.newsText {
    flex: 1 1 300px;
    font-family: var(--fontSansJa);
    font-size: var(--fsSmall);
    line-height: 1.7;
    color: #f0edea;
    text-shadow: 0 2px 10px rgba(5, 2, 3, 0.9);
}

/* 管理画面から登録された本文中の画像。
   リッチ本文の img は width / height 属性を持つため、リセットの max-width:100% で
   枠に合わせて幅だけ縮むと、高さが属性値のまま残って縦横比が崩れる。
   height:auto で元の比率のまま縮ませる。
   画像を含む段落は <div>（RichText::toCanonicalHtmlWithBlockImages）で出るので、
   段落の行間に影響されない余白をここで与える。 */
.newsText img {
    height: auto;
    margin-block: 0.7em;
}

/* 画像だけの行が本文の先頭・末尾に来たときに、上下の余白が二重にならないようにする */
.newsText > :first-child img {
    margin-block-start: 0;
}

.newsText > :last-child img {
    margin-block-end: 0;
}

/* --- 動画 --- */

.movie {
    flex: none;
    padding: 28px 24px;
    border: 1px solid var(--lineMain);
}

/* NEWS と同じセクション見出しを枠の外に置く。
   上のNEWS枠との間隔は、もとは .movie が持っていた 42px を引き継ぐ
   （見出しの下は .infoCol .secTitle の margin-bottom が受け持つ） */
.movieTitle {
    flex: none;
    margin-top: 42px;
}

/* 公開までの準備中表示。AREA MAP と同じシルバー文字だが、
   枠が半分の幅しかないため文字は一回り小さくする。
   のちに直下へ video タグが入るため、枠の高さは 16:9 で確保しておく */
.movieSoon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
}

.movieSoon .comingSoon {
    font-size: clamp(1.8rem, 4vw, 3rem);
}

/* 公開後に .movieSoon 直下へ入れる video を枠いっぱいに広げる
   （動画素材も 16:9 想定。比率が違う素材の場合ははみ出た分が切れる） */
.movieSoon video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 観覧無料 ---------- */

.freeBox {
    position: relative;
    max-width: 1120px;
    margin-inline: auto;
    border: 1px solid var(--lineMain);
}

/* 上部の赤ブロック。カンプにボタンの枠は無く、帯全体が申し込みへの導線 */
.freeHead {
    position: relative;
    isolation: isolate;
    display: block;
    padding: 48px 40px 37px;
    text-align: center;
    color: inherit;
    background: linear-gradient(90deg, #8c0001 0%, #c00214 100%);
    /* カンプ実測 rgb(224,178,181)。赤地の上に白を重ねた線 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

/* ホバーで明るい赤へ。FVの「予約優先エリアのお申し込みはこちら」と同じ見せ方 */
.freeHead::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(90deg, #b8001a 0%, #e8203a 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    .freeHead:hover::before {
        opacity: 1;
    }
}

.freeTitle {
    display: block;
    font-size: 70px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    line-height: 1.15;
    color: #fff;
    text-shadow:
        0 0 24px rgba(255, 255, 255, 0.55),
        0 2px 16px rgba(0, 0, 0, 0.4);
}

/* 原稿では枠を持たず、金色の文字と矢印だけの導線 */
.freeApply {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 0.8em;
    margin-top: 24px;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    line-height: 1.5;
    /* 原稿実測 平均 #E7C75F / 最も明るい部分 #FAF173 */
    color: #efd881;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    transition: opacity 0.4s ease;
}

/* 「ライブ観覧エリア」と「優先予約はこちらから」は語の途中で折り返させない */
.freeApplyArea,
.freeApplyText {
    white-space: nowrap;
}

/* 「優先予約はこちらから」と矢印はひとかたまりで扱い、
   矢印だけが次の行に落ちるのを防ぐ */
.freeApplyLine {
    display: inline-flex;
    align-items: baseline;
    gap: 0 0.8em;
    white-space: nowrap;
}



.freeBody {
    padding: 58px 50px 62px;
}

.freeNotes {
    font-family: var(--fontSansJa);
    line-height: 1.85;
    color: #f0edea;
    text-shadow: 0 1px 6px rgba(5, 2, 3, 0.95), 0 2px 20px rgba(5, 2, 3, 0.85);
}

.freeNotes li {
    padding-left: 1.1em;
    text-indent: -1.1em;
}

/* 「・」が続くと行の切れ目が分かりにくいため、項目どうしを離す */
.freeNotes li + li {
    margin-top: 0.7em;
}

.freeNotes li::before {
    content: '・';
}

/* 「ご来場のお客様へ」のボックス（カンプは深いオリーブ地に金の枠） */
.freeTerms {
    margin-top: 54px;
    padding: 46px 40px;
    text-align: center;
    /* 原稿実測 #490102 */
    background-color: #490102;
}

.freeTermsTitle {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.06em;
    /* 原稿実測 平均 #D2B45B / 最も明るい部分 #F5DA70 */
    color: #e6c96f;
}

/* GUIDELINES の各タブへのテキストリンク。3列×2行に並べる */
.freeTermsLinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 28px;
    margin-top: 1.5em;
}

.freeTermsLink {
    display: inline-block;
    font-size: calc(var(--fsSmall) + 2px);
    line-height: 1.6;
    /* 原稿実測 平均 #D3C095 の淡い金 */
    color: #e4d6b4;
    text-decoration: underline;
    text-decoration-color: rgba(228, 214, 180, 0.5);
    text-underline-offset: 0.25em;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .freeTermsLink:hover {
        color: #fbf58f;
        text-decoration-color: currentColor;
    }
}

/* 最後の1行だけ原稿では金色で、下の「注意事項」へ視線をつなぐ。
   項目どうしの間隔（0.7em）より広く取って区切りを作る */
.freeNotes .freeNotesLead {
    margin-top: 1.4em;
    /* 原稿実測 平均 #C3BE6E / 最も明るい部分 #FBF58F */
    color: #e2dc86;
}

/* ==================== TIMETABLE:TEST START ====================
   テスト期間中だけの見せ方（出演者告知）。
   本番公開時は _devtools/scripts/release_timetable.py で
   このブロックごと削除される。ここに本番用の指定を書かないこと
   ============================================================ */

/* 時刻の列が無くなるぶん、名前が横いっぱいに使えるようにする */
.timetableTest .timetableList td {
    width: auto;
    text-align: center;
}

/* 開場行は「14:00/15:00」が入るので、時刻側を少し広げる */
.timetableTest .timetableOpenTime {
    width: auto;
    padding-inline: 1.1em;
    white-space: nowrap;
}

/* 出演時間が未定の間の告知。
   Coming Soon は AREA MAP / MOVIE と同じ .comingSoon を使って書体を揃え、
   2カラムの列幅（1720px時で約779px）に収まるようサイズだけ落とす */
.timetableSoon {
    text-align: center;
}

.timetableSoon .comingSoon {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

/* 添える一文は基準の .timetableNote のまま。間隔だけ与える */
.timetableSoon .timetableNote {
    margin-top: 12px;
}

/* 表と花火の帯の間に添える「出演順ではない」断り。
   見た目（サイズ・色・中央寄せ）は基準の .timetableNote のまま、間隔だけ与える。
   表を受ける一文なので、花火の帯との間（.timetableFinale の margin-top 41px）より
   表寄りに置いて、どちらに掛かる注記かを分かるようにする */
.timetableTest .timetableOrderNote {
    margin-top: 14px;
}

/* 終演は時刻を伏せるので、区切り線を消して名前を全幅に置く */
.timetableTest .timetableClose .timetableOpenName {
    width: 100%;
    border-left: 0;
}

/* ==================== TIMETABLE:TEST END ==================== */

/* ---------- AREA MAP ---------- */

.areamapFigure {
    margin-top: 62px;
}

/* マップ確定までの準備中表示。ComingSoonページと同じシルバー文字にする
   （あちらの3D演出や揺らぎは付けない）。
   他コンテンツと揃えて白い枠で囲う */
.areamapSoon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(200px, 20vw, 340px);
    margin-top: 62px;
    padding: 28px 24px;
    border: 1px solid var(--lineMain);
}

.comingSoon {
    font-family: var(--fontSerifEn);
    font-size: clamp(2.2rem, 8.5vw, 4.2rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.25;
    white-space: nowrap;
    background: var(--gradSilver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 背景写真の上でも締まって見えるよう、文字の輪郭に影を落とす */
    filter: drop-shadow(0 2px 12px rgba(5, 2, 3, 0.9));
}

/* ---------- ACCESS ---------- */

.accessMap {
    margin-top: 62px;
    aspect-ratio: 1320 / 500;
}

.accessMap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.accessBox {
    /* 見出しから本文・凡例まで、この箱の中はまとめてゴシックにする */
    font-family: var(--fontSansJa);
    margin-top: 88px;
    padding: 58px 50px 64px;
    text-align: center;
    border: 1px solid var(--lineMain);
}

.accessBoxTitle {
    font-size: 29px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    color: #fff;
    text-shadow: 0 2px 14px rgba(5, 2, 3, 0.9);
}

.accessBoxText {
    margin-top: 1em;
    font-size: var(--fsSmall);
    font-weight: 600;
    line-height: 1.8;
    color: #e8e3df;
    text-shadow: 0 1px 6px rgba(5, 2, 3, 0.95), 0 2px 20px rgba(5, 2, 3, 0.85);
}

.accessBoxFigure {
    margin-top: 42px;
}

/* 駐車・駐輪についての注意書き。表記は観覧無料ブロックの箇条書きに揃える */
.accessBoxNotes {
    /* 内容幅の箱として中央に置く。親幅を超えて折り返すときだけ左寄せになる */
    display: table;
    margin-top: 1em;
    margin-inline: auto;
    text-align: left;
    font-size: var(--fsSmall);
    font-weight: 600;
    line-height: 1.8;
    color: #e8e3df;
    text-shadow: 0 1px 6px rgba(5, 2, 3, 0.95), 0 2px 20px rgba(5, 2, 3, 0.85);
}

.accessBoxNotes li {
    padding-left: 1.1em;
    text-indent: -1.1em;
}

.accessBoxNotes li::before {
    content: '・';
}

/* 推奨帰路 */
.accessBoxLead {
    margin-top: 1.4em;
    font-size: var(--fsSmall);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #F2D200;
    text-shadow: 0 2px 12px rgba(5, 2, 3, 0.9);
}

.routeLegend {
    /* 2行に折り返したときの字下げと共有する */
    --routeBarW: 88px;
    display: inline-flex;
    flex-direction: column;
    gap: 0.45em;
    margin-top: 34px;
    text-align: left;
}

.routeLegend li {
    display: flex;
    align-items: center;
    gap: 0.9em;
    font-size: var(--fsSmall);
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(5, 2, 3, 0.9);
}

.routeBar {
    flex: none;
    width: var(--routeBarW);
    height: 6px;
}

.routeBarBlue {
    background-color: #1c39d8;
}

.routeBarGreen {
    background-color: #12b118;
}

.routeBarOrange {
    background-color: #e07a10;
}

.routeName {
    min-width: 8.5em;
}

.routeNameBlue {
    color: #6f8dff;
}

.routeNameGreen {
    color: #5ed964;
}

.routeNameOrange {
    color: #f0a24e;
}

.routeRank {
    color: #e8e3df;
}

.routeMap {
    margin-top: 38px;
}

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

/* ---------- GUIDELINES ---------- */

.guidelinesLayout {
    /* タブの見出しからパネル本文まで、この段組みの中はまとめてゴシックにする */
    font-family: var(--fontSansJa);
    display: grid;
    /* 見出しのうち最も長い「優先入場予約について」が1行に収まる幅 */
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 37px;
    margin-top: 74px;
}

/* 左の見出し列。カンプでは選択中だけ白い縦バーが立ち、右に区切り線が伸びる */
.guidelinesTabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1em;
    padding-right: 14px;
    border-right: 1px solid var(--lineSub);
}

/* 2カラムの幅では、パネルを読み進める間も見出しの一覧が見えるよう追従させる。
   grid の子は既定で高さいっぱいに伸びて sticky が効かないため start に寄せる */
@media (min-width: 1025px) {
    .guidelinesTabs {
        position: sticky;
        top: var(--anchorOffset);
        align-self: start;
    }
}

.guidelinesTab {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.2em 0 0.2em 1.15em;
    /* button は font-family を継承しないため、段組みの指定を明示的に引き継ぐ */
    font-family: inherit;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-align: left;
    /* 語の途中で折り返させない */
    white-space: nowrap;
    /* 非選択はカンプどおり控えめなグレー */
    color: rgba(255, 255, 255, 0.45);
    text-shadow: 0 2px 10px rgba(5, 2, 3, 0.9);
    transition: color 0.3s ease;
}

.guidelinesTab.isActive {
    color: #fff;
}

/* 選択中の目印。文字の1行目に合わせて置く */
.guidelinesTab::before {
    content: '';
    position: absolute;
    top: 0.35em;
    left: 0;
    width: 3px;
    height: 1.1em;
    background-color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.guidelinesTab.isActive::before {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .guidelinesTab:hover {
        color: rgba(255, 255, 255, 0.8);
    }
}

.guidelinesPanel {
    padding: 50px 46px;
    /* カンプのシルバーグラデーションのパネル */
    background: linear-gradient(100deg, #e6e6e6 0%, #c6c6c6 48%, #9e9e9e 100%);
    color: #201a18;
}

/* パネル内のメールリンク。地色が明るいので下線で示す */
.guidelinesMail {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(32, 26, 24, 0.45);
    text-underline-offset: 0.2em;
    transition: text-decoration-color 0.3s ease;
    /* 初回ホバーでのレイヤー生成による描画のずれを避ける */
    backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .guidelinesMail:hover {
        text-decoration-color: currentColor;
    }
}

/* パネル冒頭の導入文（「注意事項」タブのみ） */
.guidelinesLead {
    margin-bottom: 1.6em;
    font-size: var(--fsSmall);
    font-weight: 600;
    line-height: 1.8;
}

.guidelinesList {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: var(--fsSmall);
    line-height: 1.8;
}

.guidelinesList li {
    padding-left: 1.9em;
    text-indent: -1.9em;
}

.guidelinesList li::before {
    content: '□';
    margin-right: 0.9em;
}

/* 拡大できることを示す注記（拡大が有効な幅でのみ出す） */
.zoomHint {
    display: none;
}

@media (max-width: 1024px) {
    [data-zoom] {
        cursor: zoom-in;
    }

    .zoomHint {
        display: block;
        margin-top: 8px;
        font-size: 14px;
        text-align: right;
        color: rgba(255, 255, 255, 0.92);
        text-shadow: 0 2px 8px rgba(5, 2, 3, 0.95);
    }
}

/* ---------- 地図の拡大表示（ライトボックス） ---------- */

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    /* inset:0 だと 100vw 相当になり、スクロールバーぶん右へずれて
       右だけ余白があるように見える。実際の表示領域に合わせる */
    width: 100%;
    height: 100%;
    /* 四方に余白を取る（閉じるボタンを避けるぶん上だけ広め） */
    padding: clamp(62px, 9vw, 96px) clamp(20px, 4vw, 56px) clamp(20px, 4vw, 56px);
    background-color: rgba(4, 1, 2, 0.72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.isOpen {
    opacity: 1;
}

/* display:flex が hidden 属性を打ち消してしまうため、明示的に消す
   （これが無いと閉じている間も全面を覆い、下の要素が押せなくなる） */
.lightbox[hidden] {
    display: none;
}

/* 画像の外側はクリックで閉じられるよう、当たり判定を全面に広げる */
.lightboxBody {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* まず画像全体が見えるように収める（そこから先の拡大は端末のピンチ操作に任せる） */
.lightboxImage {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100svh - 100px);
    max-height: calc(100dvh - 100px);
    object-fit: contain;
}

/* ハンバーガーの「閉じる」と同じ見た目・同じ反応にする */
.lightboxClose {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 44px;
    height: 44px;
    transition: opacity 0.3s ease;
}

.lightboxClose::before,
.lightboxClose::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 10px;
    width: 24px;
    height: 1.5px;
    background-color: #fff;
    transition: transform 0.35s ease, background-color 0.3s ease, width 0.3s ease;
}

.lightboxClose::before {
    transform: rotate(45deg);
}

.lightboxClose::after {
    transform: rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .lightboxClose:hover {
        opacity: 0.7;
    }
}

/* 開いた直後にフォーカスが当たるため、共通の四角い枠は出さず、
   ハンバーガーと同じく明度で示す */
.lightboxClose:focus-visible {
    outline: none;
    opacity: 0.7;
}

/* ---------- フッター ---------- */

.footer {
    position: relative;
    z-index: 2;
    padding-bottom: 88px;
    /* 背景の花火がうっすら透ける濃さ */
    background-color: var(--footerBg);
    border-top: 1px solid var(--lineMain);
}

/* PCでは申し込みボタンが画面下部に追従するため、フッターの文字に掛からない逃げ場を作る。
   ボタンの上端は画面下から91px（高さ66px＋隙間25px）なので、それに少しゆとりを足す。
   .footer のベース定義より後ろに置かないと 88px に上書きされてしまう */
@media (min-width: 768px) {
    .footer {
        padding-bottom: 135px;
    }
}

/* 三角のページトップ。フッターの上端にまたがって置く */
.pagetop {
    position: absolute;
    /* カンプではフッターの上端に接して、全体が上に出る。
       素材は 100:65 なので、幅を変えても高さぶん持ち上がるよう連動させる */
    --pagetopW: 100px;
    top: calc(var(--pagetopW) * -0.65);
    right: max(40px, 11%);
    z-index: 3;
    display: block;
    width: var(--pagetopW);
    transition: opacity 0.35s ease;
}

.pagetopSvg {
    display: block;
    width: 100%;
    height: auto;
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover {
        opacity: 0.7;
    }
}

/* ロゴ・開催概要・サイトマップの3カラムを中央に寄せる */
.footerInner {
    display: flex;
    /* 幅が足りない中間サイズでは折り返して溢れさせない */
    flex-wrap: wrap;
    justify-content: center;
    /* カンプではロゴ・概要・サイトマップの下端が揃う */
    align-items: stretch;
    gap: 48px;
    padding-top: 78px;
}

/* カンプではロゴとコピーライトが同じ列に入り、コピーライトは列の下端に来る */
.footerBrand {
    flex: none;
    display: flex;
    flex-direction: column;
}

.copyright {
    margin-top: auto;
    padding-top: 34px;
    color: rgba(255, 255, 255, 0.8);
}

.footerLogo img {
    /* カンプ実測 352px */
    width: 352px;
    height: auto;
}

.footerInfo {
    flex: none;
    font-size: var(--fsSmall);
    line-height: 1.75;
    text-shadow: 0 1px 6px rgba(5, 2, 3, 0.95), 0 2px 20px rgba(5, 2, 3, 0.85);
}

.footerInfoRow {
    display: flex;
    gap: 0 26px;
}

.footerInfoRow dt {
    flex: none;
    width: 6.5em;
    font-weight: 600;
    color: #fff;
}

.footerInfoRow dd {
    color: #f0edea;
}

.footerInfoRow a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .footerInfoRow a:hover {
        opacity: 0.7;
    }
}

/* カンプに合わせ、サイトマップは全幅で置かない。
   ロゴ＋コピーライトと開催概要の2カラム構成にする */
@media (min-width: 768px) {
    .footerInner {
        justify-content: space-between;
        max-width: 1360px;
        margin-inline: auto;
    }
}

.copyright {
    margin-top: 34px;
    font-family: var(--fontSerifEn);
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--colorSilverDim);
}

/* ---------- アーティスト詳細モーダル ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(56px, 8vw, 90px) clamp(16px, 4vw, 60px) clamp(24px, 4vw, 60px);
    /* iOS はアドレスバー・ツールバーが出ている間、fixed 要素の高さが実際に
       見えている領域より大きくなる。ここを可視領域に合わせておくと、
       中の .modalPanel（max-height:100%）も自動で収まる。
       未対応ブラウザは両方とも無視され inset:0 のまま（.lightboxImage と同じ二重宣言） */
    height: 100svh;
    height: 100dvh;
}

.modal[hidden] {
    display: none;
}

.modalOverlay {
    position: absolute;
    inset: 0;
    background-color: rgba(6, 2, 4, 0.86);
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* 閉じるボタンはパネルの外、右上に置く */
.modalClose {
    position: absolute;
    top: clamp(12px, 2vw, 24px);
    right: clamp(12px, 2vw, 28px);
    z-index: 2;
    width: 46px;
    height: 46px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.modalClose::before,
.modalClose::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 1.5px;
    background-color: #fff;
}

.modalClose::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modalClose::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 縦は flex で組み、中身（.modalScroll）の高さをパネル側で決める。
   overflow:hidden は保険＝何が入っても枠線の外へは出さない。
   ※以前は .modalScroll に vh 基準の max-height を別途持たせていたため、
     パネルの高さ（fixed 要素＝可視領域基準）と食い違い、iOS でツールバーが
     出ている間だけ中身が枠線の下へはみ出していた（2026-09-01 修正）。 */
.modalPanel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 1000px);
    max-height: 100%;
    overflow: hidden;
    background-color: #0a0304;
    border: 1px solid rgba(255, 255, 255, 0.7);
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 中身が長いので、パネルの内側でスクロールさせる。
   高さの上限はパネル（max-height:100%）が決める＝ここで vh を使わない。
   min-height:0 が無いと flex アイテムは中身より縮まず、スクロールにならない。 */
.modalScroll {
    min-height: 0;
    max-height: 720px;
    padding: clamp(20px, 3vw, 34px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.08);
}

.modalScroll::-webkit-scrollbar {
    width: 8px;
}

.modalScroll::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.08);
}

.modalScroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.45);
}

/* JS が付与する表示用クラス */
.modal.isOpen .modalOverlay,
.modal.isOpen .modalClose {
    opacity: 1;
}

.modal.isOpen .modalPanel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 並び順を幅ごとに変えるためグリッドで組む。
   狭い幅は 名前 → 画像 → リンク の縦積み */
.modalHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "title"
        "thumb"
        "text";
    /* 名前 → 画像 → リンク の間隔 */
    row-gap: 22px;
}

.modalTitle {
    grid-area: title;
}

.modalThumb {
    grid-area: thumb;
}

.modalHeadText {
    grid-area: text;
    min-width: 0;
}

@media (min-width: 768px) {
    /* 広い幅は左に名前とリンク、右に画像の2カラム */
    .modalHead {
        grid-template-columns: minmax(0, 1fr) 52%;
        grid-template-areas:
            "title thumb"
            "text  thumb";
        /* 画像が2行にまたがるぶん行は引き伸ばされる。
           余りを2行目（リンクと動画の側）に寄せて、
           名前とリンクの間が開かないようにする */
        grid-template-rows: min-content 1fr;
        align-items: start;
        align-content: start;
        column-gap: 40px;
    }

    /* 紹介文が無い（総合司会など）ときは、横に空きが出るので
       広い幅でも 名前 → 画像 → リンク の縦積みにする */
    .modalHead.isCompact {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "thumb"
            "text";
        justify-items: center;
        row-gap: 22px;
    }
}

/* 紹介文が無いモーダルは画像が主役になるので、
   どの幅でも大きくなりすぎないよう幅を抑えて中央に置く */
.modalHead.isCompact .modalThumb {
    width: min(100%, 300px);
    margin-inline: auto;
}

.modalHead.isCompact .modalTitle,
.modalHead.isCompact .modalHeadText {
    width: 100%;
    text-align: center;
}

.modalHead.isCompact .modalLinks {
    justify-content: center;
}

.modalThumb img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    /* 縦長の素材が縦に伸びすぎないよう高さで頭打ちにする。
       横長の素材はこの高さに達しないので、見え方は変わらない */
    max-height: 520px;
    margin-inline: auto;
}

.modalTitle {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

/* 公式サイト・SNSを1行に並べる */
.modalLinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.modalLinkItem {
    display: flex;
    align-items: center;
}

.modalLinkItem[hidden] {
    display: none;
}

.modalSite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.3em 1.5em;
    font-family: var(--fontSerifEn);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.modalSns {
    display: flex;
    align-items: center;
    color: #fff;
    transition: opacity 0.3s ease;
}

/* BASE は縦組みのロゴ（マーク＋ロゴタイプ）なので、
   正方形のアイコンと並べたときに同じ大きさに見えるよう高さで揃える */
.modalShopIcon {
    display: block;
    width: auto;
    height: 34px;
}

.modalSns .snsIcon {
    flex: none;
    width: 26px;
    height: 26px;
    fill: currentColor;
    max-width: none;
}

@media (hover: hover) and (pointer: fine) {
    .modalSite:hover,
    .artistMemberText:hover {
        color: #150607;
        background-color: #fff;
    }

    .modalSns:hover {
        opacity: 0.7;
    }
}

/* 人ごとのSNS。アイコンの見え方はリンク一覧と揃え、左に持ち主の名前を添える。
   該当のいないアーティストでは中身が空のまま hidden になり、表示に影響しない */
.modalMembers[hidden] {
    display: none;
}

/* 名前とリンクの2列。列幅を親で持つことで、名前の長さが違っても
   リンクの開始位置が自動で揃う（幅を数値で決め打ちしない） */
.artistMembers {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    /* 人と人の間は、同じ人の中の行間（8px）よりはっきり広げて、
       どこまでが同じ人のものか分かるようにする */
    gap: 24px 14px;
    /* リンクが2行になる人がいるため、名前は上端に置く */
    align-items: start;
    margin-top: 16px;
}

/* display を指定すると hidden 属性が効かなくなる。
   カード側に置いた元データが一覧に出てしまうため必ず打ち消す */
.artistMembers[hidden] {
    display: none;
}

/* 行そのものは枠を持たず、名前とリンクを親の列に直接並べる */
.artistMember {
    display: contents;
}

.artistMemberName {
    font-size: 15px;
    /* アイコンと同じ高さにして、上揃えでも1行目と中心が合うようにする */
    line-height: 26px;
    letter-spacing: 0.04em;
    color: #e8e3df;
}

/* 1人分のリンク。行を分けたいときは artistMemberRow を複数置く */
.artistMemberLinks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 同じ人の中の行間。人と人の間（24px）よりはっきり狭くする */
    gap: 8px;
}

.artistMemberRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

/* アイコンのない配信先やブログは、公式サイトのボタンを小さくした形で出す */
.artistMemberText {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0.15em 0.9em;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    /* ホバーの見え方は公式サイトのボタンに合わせる */
    transition: color 0.3s ease, background-color 0.3s ease;
}

.modalMovie {
    position: relative;
    width: min(100%, 320px);
    margin-top: 1.3em;
    aspect-ratio: 16 / 9;
    background-color: #000;
}

.modalMovie[hidden] {
    display: none;
}

.modalMovie video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* サムネイルも動画と同じ収まりにする */
    object-position: center;
    /* 比率が合わない動画でも切れないよう、枠内に収める */
    object-fit: contain;
    background-color: #000;
}

.modalProfileTitle {
    margin-top: 1.5em;
    padding-top: 1.4em;
    font-family: var(--fontSerifEn);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 0 20px #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.modalBody {
    margin-top: 0.9em;
    font-size: 18px;
    line-height: 1.9;
    color: #f0edea;
}

@media (max-width: 767px) {
    .modalTitle {
        font-size: 18px;
    }

    .modalSite {
        min-height: 34px;
        padding: 0.3em 1.2em;
        font-size: 13px;
    }

    .modalSns .snsIcon {
        width: 22px;
        height: 22px;
    }

    .modalShopIcon {
        width: auto;
        height: 29px;
    }

    /* 縦積みになるスマホでは、幅を抑えた動画が左に寄って見えるので中央に置く */
    .modalMovie {
        margin-inline: auto;
    }

    .modalProfileTitle {
        font-size: 18px;
    }

    .modalBody {
        font-size: 14px;
        line-height: 1.85;
    }
}

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

/* プロフィール中で強調したい箇所。色は変えず、太さと白さだけで差を付ける */
.modalBody strong {
    font-weight: 700;
    color: #fff;
}

/* 展開中は背面を完全に固定する（overflow だけでは iOS で止まらない） */
body.isModalOpen {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
}

/* ---------- 登場アニメーション ---------- */

/* JS有効時のみ初期状態を隠す（JS無効でも内容は見える） */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.95s ease,
        transform 1s cubic-bezier(0.19, 1, 0.22, 1),
        filter 0.95s ease;
}

.js .reveal.isVisible {
    opacity: 1;
    /* none に戻すと合成レイヤーが外れて文字がわずかに動くため、恒等変換を残す */
    transform: translateZ(0) scale(1);
    filter: none;
}

/* 要素に合わせた登場の型 */
.js .revealUp {
    transform: translateY(46px);
}

.js .revealLeft {
    transform: translateX(-54px);
}

.js .revealRight {
    transform: translateX(54px);
}

.js .revealZoom {
    transform: scale(0.93);
}

.js .revealBlur {
    transform: translateY(18px);
    filter: blur(14px);
}

/* アーティストのカードは左上から順に現れる */
.js .artistItem:nth-child(2) { transition-delay: 0.09s; }
.js .artistItem:nth-child(3) { transition-delay: 0.18s; }
.js .artistItem:nth-child(4) { transition-delay: 0.06s; }
.js .artistItem:nth-child(5) { transition-delay: 0.15s; }
.js .artistItem:nth-child(6) { transition-delay: 0.24s; }
.js .artistItem:nth-child(7) { transition-delay: 0.12s; }
.js .artistItem:nth-child(8) { transition-delay: 0.21s; }
.js .artistItem:nth-child(9) { transition-delay: 0.30s; }

/* ==========================================================
    レスポンシブ
    PC（1025px以上）は上記の固定サイズ。以下で段階的に縮小する。
========================================================== */

/* カンプ幅より狭くなるとキャッチが人物に食い込むため、人物側を少しずつ絞る
   （顔〜襟にテキストが掛からない範囲で、小さくしすぎない） */
/* ---------- ノートPC〜小型デスクトップ ----------
   文字サイズは変えず、はみ出しやすい要素だけ抑える */

@media (max-width: 1600px) {
    .heroLogo img {
        width: min(750px, 46vw);
    }

    .section {
        --secPad: 110px;
    }

    /* 一括指定に上書きされるため、MESSAGE の余白は都度指定する */
    .message {
        --msgSpace: 240px;
        margin-top: calc(var(--msgSpace) - var(--figTop));
        padding-top: var(--figTop);
    }
}

/* 2カラムのTIME TABLE / NEWS が窮屈になり始める幅から、
   見出しと表組みを段階的に縮めて意図しない折り返しを防ぐ */
@media (max-width: 1500px) {
    /* ナビ8項目とSNSが接近し始める幅。ここから下は間隔を優先して確保する */
    .headerInner {
        gap: 16px;
        padding-inline: 14px;
    }

    /* 項目間が語間（Playfair Display のスペースは約0.25em）程度まで詰まると、
       メニュー全体が一続きの英文に見えてしまう。間隔は 1500px:42px →
       1025px:14px の直線補間で確保し、足りない幅は文字サイズ側で吸収する */
    .gnavList {
        gap: clamp(14px, 5.9vw - 46.4px, 42px);
    }

    /* 間隔を優先するぶん、文字は 19px → 15px までなだらかに落とす
       （1500px:19px → 1025px:15px の直線補間） */
    .gnavLink {
        font-size: clamp(15px, 0.842vw + 6.37px, 19px);
    }

    .snsLink {
        padding: 6px;
    }

    .snsIcon {
        width: 32px;
    }

    .headerSns {
        margin-right: 14px;
    }

    .timetable {
        --finaleTimeW: 128px;
    }

    /* 時刻列は表・開場・花火・閉演で幅を揃える */
    .timetableList th {
        width: 128px;
        min-width: 128px;
    }

    .timetableOpenTime {
        width: 140px;
    }

    .timetableFinale {
        min-height: 125px;
    }

    .timetableFinaleName {
        padding-left: 70px;
        font-size: 36px;
    }
}

/* 1450px 以下はコンテナがまだ最大幅に達しておらず、左右の余白も vw に比例する。
   人物との距離が base とは別の傾きになるため、ここだけ式を分ける */
@media (max-width: 1450px) {
    .messageCatch {
        font-size: 3.2vw;
    }
}

@media (max-width: 1300px) {
    :root {
        --fsSecTitle: 54px;
    }

    .timetableList th,
    .timetableList td {
        font-size: 19px;
    }

    /* 時刻の文字サイズも揃えないと、中央寄せの位置がずれる */
    .timetableOpenTime,
    .timetableFinaleTime {
        font-size: 19px;
    }

    .timetable {
        --finaleTimeW: 128px;
    }

    .timetableList th,
    .timetableOpenTime {
        width: 128px;
    }

    /* 帯が細くなるぶん高さも下げて、写真の拡大率を保つ */
    .timetableFinale {
        min-height: 110px;
    }

    .timetableFinaleName {
        padding-left: 56px;
        font-size: 32px;
    }


}

@media (max-width: 1150px) {
    :root {
        --fsSecTitle: 44px;
    }

    .artistName {
        font-size: 19px;
    }

    .timetableList th,
    .timetableList td {
        font-size: 17px;
    }

    /* 時刻の文字サイズも揃えないと、中央寄せの位置がずれる */
    .timetableOpenTime,
    .timetableFinaleTime {
        font-size: 17px;
    }

    .timetable {
        --finaleTimeW: 120px;
    }

    /* 時刻列は表・開場・花火・閉演で幅を揃える */
    .timetableList th {
        width: 120px;
        min-width: 120px;
    }

    .timetableList th,
    .timetableOpenTime {
        width: 120px;
    }

    .timetableOpenName {
        font-size: 22px;
    }

    .timetableFinale {
        min-height: 90px;
    }

    .timetableFinaleName {
        padding-left: 40px;
        font-size: 26px;
    }


    .aboutOutline {
        font-size: 21px;
    }

    .aboutTitle {
        font-size: 56px;
    }
}

/* ナビとSNSが接近し始める幅。ナビの項目間を削る前に、
   ヘッダー自身の余白とSNS側から先に幅を譲る */
@media (max-width: 1250px) {
    .headerInner {
        gap: 10px;
        padding-inline: 14px;
    }

    .snsLink {
        padding: 5px;
    }

    /* Instagram のブランドガイドラインの最小サイズを下回らせない */
    .snsIcon {
        width: 30px;
    }

    .headerSns {
        margin-right: 6px;
    }
}

/* 小型ノートPCの帯。ナビの間隔を保つため、ヘッダー左右の余白をもう一段詰める */
@media (max-width: 1180px) {
    .headerInner {
        gap: 8px;
        padding-inline: 12px;
    }

    .headerSns {
        margin-right: 4px;
    }
}

/* ---------- タブレット以下: ナビをハンバーガーへ ---------- */

@media (max-width: 1024px) {
    :root {
        --gutter: 24px;
        --headerH: 62px;
        --anchorOffset: 100px;
        --fsBody: 17px;
        --fsSmall: 15px;
        --fsSecTitle: 45px;
    }

    .section {
        --secPad: 84px;
    }

    .headerInner {
        justify-content: space-between;
        gap: 16px;
        padding-inline: 16px;
    }

    .headerLogo {
        display: block;
        width: 120px;
        /* FV上ではヒーローのロゴと重複するため、スクロール後に出す */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .header.isScrolled .headerLogo,
    body.isNavOpen .headerLogo {
        opacity: 1;
        visibility: visible;
    }

    /* オーバーレイ（z-index:1）より前に出さないとロゴが隠れる */
    body.isNavOpen .headerLogo {
        position: relative;
        z-index: 2;
    }

    /* 展開中はヘッダーの下地を必ず消す（開いた瞬間にちらつくのを防ぐ） */
    body.isNavOpen .header::before {
        opacity: 0;
        transition: none;
    }

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

    .headerSns {
        display: none;
    }

    .navToggle {
        display: block;
        z-index: 2;
    }

    /* フルスクリーンのオーバーレイメニュー */
    .gnav {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 26px;
        padding: calc(var(--headerH) + 16px) 24px 28px;
        overflow-y: auto;
        /* 背後のFVがうっすら透ける濃さ（参考デザイン準拠） */
        background-color: rgba(10, 3, 4, 0.85);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .gnav.isOpen {
        opacity: 1;
        visibility: visible;
    }

    /* 参考デザインどおり、項目ごとに区切り線を引いて縦に並べる */
    .gnavList {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(100%, 320px);
    }

    .gnavList li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    }

    .gnavLink {
        display: block;
        padding-block: 15px;
        font-size: 22px;
        text-align: center;
    }

    /* 開いている間は下線のアニメーションを出さない（区切り線と重なるため） */
    .gnavLink::after {
        display: none;
    }

    /* 下線が無いぶん、ホバーは明度で示す */
    @media (hover: hover) and (pointer: fine) {
        .gnavLink:hover {
            opacity: 0.65;
        }

        .gnavList li:hover {
            border-bottom-color: rgba(255, 255, 255, 0.7);
        }
    }

    .gnavList li {
        transition: border-color 0.35s ease;
    }

    .gnavSns {
        display: flex;
        gap: 26px;
    }

    .gnavSns .snsIcon {
        width: 32px;
    }

    /* メニュー展開中は背面を完全に固定する
       （html に overflow-x:hidden があるため body の overflow だけでは止まらない） */
    body.isNavOpen {
        position: fixed;
        left: 0;
        width: 100%;
        overflow: hidden;
    }

    /* 背面固定中も固定背景がずれないようにする */
    body.isNavOpen .heroBg {
        position: fixed;
    }

    /* FV */
    .heroEdition {
        font-size: 16px;
    }

    .heroLogo img {
        width: min(560px, 74vw);
    }

    .heroDate {
        font-size: 48px;
    }

    .heroTime {
        font-size: 20px;
    }

    .heroPlace {
        font-size: 21px;
    }

    .heroFree {
        font-size: 48px;
    }

    .heroFree::before,
    .heroFree::after {
        width: 44px;
    }

    .heroFireworks {
        font-size: 38px;
    }

    .btn {
        min-height: 56px;
        font-size: 17px;
    }

    /* ハンバーガーが出る幅では、カンプのSP版と同じく画面下端に2つ並べて貼り付ける */
    .heroButtons {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 90;
        gap: 0;
        align-items: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .heroButtons .btnOutline {
        background-color: var(--footerBg);
        border: 1px solid rgba(255, 255, 255, 0.9);
    }

    .heroButtons .btnOutline:hover {
        background-color: #2a1417;
        border-color: #fff;
    }

    .heroButtons .btn {
        min-width: 0;
        white-space: normal;
        min-height: 56px;
        gap: 0.5em;
        padding: 0.5em 0.7em;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0.02em;
        text-indent: 0;
        line-height: 1.35;
        border-radius: 0;
    }

    /* ARTIST */
    .artistList {
        gap: 30px;
        margin-top: 48px;
    }

    .artistCard {
        padding: 14px;
    }

    .artistName {
        margin-top: 14px;
        font-size: 17px;
    }

    .artistItem::before,
    .host::before {
        inset: -24px;
        background-size: 48px 48px;
    }

    .timetable::before {
        inset: -24px -24px auto;
        height: 48px;
        background-size: 48px 48px;
    }

    .host {
        margin-top: 56px;
        padding: 34px 24px 38px;
    }

    .hostTitle {
        gap: 20px;
        font-size: 24px;
    }

    .hostTitle::before,
    .hostTitle::after {
        width: 46px;
    }

    .hostThumb {
        width: 160px;
    }

    .hostName {
        font-size: 16px;
    }

    /* about */
    .aboutFireworks {
        gap: 22px;
        font-size: 34px;
    }

    .aboutFireworks::before,
    .aboutFireworks::after {
        height: 48px;
        background-size: 100% 1px, 48px 48px;
    }

    .aboutMain {
        margin-top: 34px;
    }

    .aboutPhotos {
        gap: 12px;
        margin-top: 12px;
    }

    .aboutBody {
        margin-top: 64px;
    }

    .aboutTitle {
        font-size: 38px;
    }

    .aboutLead {
        margin-top: 18px;
        font-size: 19px;
    }

    .aboutOutline {
        margin-top: 38px;
        padding: 26px 28px 30px;
        font-size: 18px;
    }

    .aboutNote {
        font-size: 15px;
    }

    /* MESSAGE: 人物は見出し〜キャッチの右上に置く。
       幅に対する割合のままだと中間幅で顔が本文に重なるため、上限を決め打ちする */
    .messageFigure {
        position: absolute;
        top: -6px;
        right: 0;
        z-index: 0;
        /* 小さくなりすぎないよう下限を50%に、広い幅では出過ぎないよう上限を置く */
        width: clamp(50%, 82%, 420px);
        /* 全身を入れると顔が下がって本文に掛かるため、上半身だけを切り出す */
        aspect-ratio: 4 / 5;
        margin-top: 0;
        overflow: hidden;
    }

    .messageFigure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    /* カンプどおり本文は人物の手前に置く */
    .messageBody {
        position: relative;
        z-index: 1;
    }

    /* MESSAGE: 人物を背景に回し、本文を全幅で読ませる */
    .message {
        margin-top: 0;
        padding-top: 184px;
    }

    .messageInner {
        margin-top: 34px;
    }

    .messageBody {
        max-width: 100%;
        padding-left: 0;
    }

    /* 本文の裏に薄く敷くと人物が判別できないため、独立した図版として置く */
    .messageInner {
        display: flex;
        flex-direction: column;
    }

    .messageCatch {
        font-size: 32px;
    }

    .messageText {
        margin-top: 34px;
    }

    .messageSign {
        margin-top: 30px;
        font-size: 20px;
    }

    /* TIME TABLE と NEWS を縦積みに */
    .infoLayout {
        grid-template-columns: 1fr;
    }

    .infoCol .secTitle {
        margin-bottom: 26px;
    }

    .infoCol + .infoCol {
        margin-top: var(--infoColSpacing);
    }

    /* 1カラムでは高さを揃える必要がないため、内容なりに戻す */
    .news {
        display: block;
        min-height: 0;
    }

    .newsList {
        max-height: 500px;
    }

    .timetable {
        padding: 24px 16px 28px;
    }

    .timetableList {
        margin-top: 18px;
    }

    .timetableList th,
    .timetableList td {
        font-size: 17px;
    }

    .timetableList th {
        width: 120px;
        min-width: 120px;
    }

    .timetableOpen {
        min-height: 48px;
        margin-top: 18px;
    }

    /* 上（開場→罫線 18px）と揃える */
    .timetableOpen.timetableClose {
        margin-top: 43px;
    }

    .timetableOpenTime {
        width: 120px;
        font-size: 17px;
    }

    .timetableOpenName {
        font-size: 20px;
    }

    .timetableFinale {
        min-height: 104px;
        margin-top: 16px;
        /* 帯が横長になるため、写真は cover で全面に敷く */
        background-position: 0 0, center;
        background-size: auto, cover;
    }

    .timetable {
        --finaleTimeW: 120px;
    }

    .timetableFinaleTime {
        font-size: 17px;
    }

    .timetableFinaleName {
        padding-left: 46px;
        font-size: 30px;
    }

    .news {
        padding-block: 8px;
    }

    .movie {
        padding: 18px 16px;
    }

    .newsItem {
        gap: 0.4em 24px;
        padding: 18px 20px;
    }

    .newsItem::after {
        left: 20px;
        right: 20px;
    }

    /* 縦並びのときは NEWS 見出しの上と同じ余白にする。
       NEWS 見出しの上は grid の行間（--infoGap）と
       列どうしの間隔（--infoColSpacing）の合計になっている */
    .movieTitle {
        margin-top: calc(var(--infoGap) + var(--infoColSpacing));
    }

    /* 観覧無料 */
    .freeHead {
        padding: 26px 24px 28px;
    }

    .freeTitle {
        font-size: 44px;
        letter-spacing: 0.24em;
        text-indent: 0.24em;
    }

    .freeSub {
        font-size: 19px;
    }

    .freeApply {
        margin-top: 16px;
        font-size: 16px;
    }

    .freeBody {
        padding: 34px 26px 38px;
    }

    .freeTerms {
        margin-top: 34px;
        padding: 28px 20px;
    }

    .freeTermsTitle {
        font-size: 20px;
        line-height: 1.5;
    }

    .freeTermsLinks {
        gap: 14px 20px;
    }

    /* AREA MAP / ACCESS */
    .areamapFigure,
    .areamapSoon,
    .accessMap {
        margin-top: 34px;
    }

    .areamapSoon {
        min-height: clamp(140px, 34vw, 220px);
        padding: 20px 16px;
    }

    /* 横長のままだと低すぎて周辺が読めないため、縦を確保する */
    .accessMap {
        aspect-ratio: 4 / 3;
    }

    .accessBox {
        margin-top: 56px;
        padding: 34px 24px 38px;
    }

    .accessBoxTitle {
        font-size: 21px;
    }

    .accessBoxFigure,
    .routeMap {
        margin-top: 24px;
    }

    /* GUIDELINES: タブを横並びに */
    .guidelinesLayout {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-top: 34px;
    }

    /* 1カラムになるので、見出しは横に並べて折り返す */
    .guidelinesTabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5em 1.4em;
        padding-right: 0;
        padding-bottom: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--lineSub);
    }

    .guidelinesTab {
        width: auto;
        font-size: 17px;
    }

    .guidelinesPanel {
        padding: 28px 22px;
    }

    .guidelinesList {
        gap: 20px;
    }

    /* フッター: 横に並べる幅が無いので縦積みにして中央へ揃える
       （中途半端に折り返すと開催概要だけ左に寄って見えるため） */
    .footerInner {
        flex-direction: column;
        align-items: center;
        gap: 34px;
        padding-top: 56px;
    }

    /* 並び順を制御するためブランド枠を透過させる（カンプSPでは最後がコピーライト） */
    .footerBrand {
        display: contents;
    }

    .footerLogo {
        order: 1;
    }

    /* 開催概要はブロックごと中央に置く */
    .footerInfo {
        order: 2;
        margin-inline: auto;
    }

    .copyright {
        order: 4;
        margin-top: 0;
        padding-top: 0;
        text-align: center;
    }

    .copyright {
        margin-top: 40px;
    }

    .footerLogo img {
        width: 180px;
    }

    .footerInfo {
        margin-top: 26px;
    }

    /* 1カラム時は各要素の左右余白が同じに見えるよう中央に寄せる */
    /* SPでは3カラムをやめて縦に積む */
    .footerInner {
        flex-direction: column;
        align-items: stretch;
        gap: 26px;
        padding-top: 54px;
    }

    /* カンプではロゴ→概要→サイトマップ→コピーライトの順に並ぶため、
       ブランド枠を透過させて各要素を直接並べ替える */
    .footerBrand {
        display: contents;
    }

    .footerLogo {
        order: 1;
        text-align: center;
    }

    .footerInfo {
        order: 2;
    }


    .copyright {
        order: 4;
        margin-top: 0;
    }

    /* カンプでは「開催場所：〜」のように1行で並ぶ */
    .footerInfoRow {
        display: block;
    }

    .footerInfoRow dt,
    .footerInfoRow dd {
        display: inline;
    }

    .footerInfoRow dt::after {
        content: '：';
    }

    .footerInfoRow + .footerInfoRow {
        margin-top: 0.35em;
    }

    .footerLogo img {
        margin-inline: auto;
    }

    /* 情報リストは中身を左揃えのまま、ブロックごと中央に置く */
    .footerInfo {
        display: inline-block;
        text-align: left;
    }


    .copyright {
        text-align: center;
    }


    .pagetop {
        --pagetopW: 92px;
        right: 24px;
    }
}

/* 768〜1024px はキャッチが1行に収まって本文が上がるため、
   人物も上げて顔が本文に掛からないようにする */
@media (min-width: 768px) and (max-width: 1024px) {
    .messageFigure {
        top: -20px;
        /* コンテナ基準の % だと画面幅の50%を割るため、vw で下限を押さえる */
        width: max(52vw, 400px);
        aspect-ratio: 1 / 1;
    }

    /* 人物が大きくなるぶん、本文の始まりを下げて顔に掛からないようにする */
    .messageText {
        margin-top: calc(22vw - 55px);
    }
}

/* ---------- スマートフォン ---------- */

@media (max-width: 767px) {
    :root {
        --gutter: 18px;
        --fsBody: 15px;
        --fsSmall: 14px;
        --fsSecTitle: 24px;
    }

    body {
        line-height: 1.8;
    }

    /* 狭い画面では1行が伸びすぎないよう、開催概要の幅を抑える */
    .footerInfo {
        width: min(100%, 320px);
    }

    .section {
        --secPad: 64px;
    }

    /* 縦長のcoverでは右のステージが切れるため、背景をステージ寄りに寄せる */
    .heroBgPhoto {
        background-position: 76% bottom;
    }

    /* カンプでは中央寄せではなく上寄せで、ヘッダー下に53pxの余白を取る */
    .hero {
        align-items: flex-start;
        padding-top: calc(var(--headerH) + 53px);
    }

    .heroEdition {
        font-size: 14px;
    }

    .heroEdition::before,
    .heroEdition::after {
        width: 34px;
    }

    .heroLogo img {
        /* 素材の周囲に余白があるため、図案がカンプ幅になるよう画像幅は広めに取る */
        width: min(430px, 110vw);
        max-width: none;
    }

    .heroSchedule {
        margin-top: 2px;
    }

    .heroDate {
        font-size: 30px;
    }

    .heroTime {
        font-size: 17px;
    }

    .heroPlace {
        font-size: 16px;
        letter-spacing: 0;
    }

    .heroFree {
        gap: 0.5em;
        margin-top: 10px;
        font-size: 30px;
    }

    .heroFree::before,
    .heroFree::after {
        width: 30px;
    }

    .heroFireworks {
        margin-top: 0.05em;
        font-size: 22px;
    }

    .brSp {
        display: inline;
    }

    /* 追従ボタンに隠れないぶんはフッターの内側で確保する */
    .footer {
        padding-bottom: 108px;
    }

    /* 折り返す本文は中央揃えだと行頭がばらつき、末尾に1文字だけ残るなど読みにくい。
       左揃えにしたうえで、ブロックは中身の幅ちょうどにして中央へ置き、
       左右の余白に差が出ないようにする */
    .accessBoxText,
    .accessBoxLead,
    .aboutLead {
        text-align: left;
        max-width: max-content;
        margin-inline: auto;
    }

    /* 出演時間の注記は短く、カンプでも中央のまま */
    .timetableNote {
        max-width: max-content;
        margin-inline: auto;
    }

    /* 総合司会：カンプ実測 259x214（写真109px×2＋間隔10px＋左右15px） */
    .host {
        gap: 14px;
        padding: 20px 15px 22px;
    }

    .hostTitle {
        font-size: 19px;
        letter-spacing: 0.16em;
        text-indent: 0.16em;
    }

    .hostList {
        gap: 10px;
    }

    .hostThumb {
        width: 109px;
    }

    .hostThumb img {
        aspect-ratio: 150 / 165;
    }

    .hostName {
        font-size: 13px;
    }



    .btn {
        min-height: 52px;
        padding-inline: 1.4em;
        font-size: 15px;
    }

    /* アーティストは2列 */
    .artistList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 16px;
        margin-top: 34px;
    }

    .artistItem::before,
    .host::before {
        inset: -18px;
        background-size: 36px 36px;
    }

    .timetable::before {
        inset: -18px -18px auto;
        height: 36px;
        background-size: 36px 36px;
    }

    .artistCard {
        padding: 10px;
    }

    .artistName {
        margin-top: 10px;
        font-size: 15px;
    }

    .hostTitle {
        gap: 14px;
        font-size: 19px;
    }

    .hostTitle::before,
    .hostTitle::after {
        width: 30px;
    }

    .hostThumb {
        width: 130px;
    }

    .hostName {
        font-size: 14px;
    }

    /* about */
    .aboutFireworks {
        gap: 12px;
        font-size: 24px;
    }

    .aboutFireworks::before,
    .aboutFireworks::after {
        height: 36px;
        background-size: 100% 1px, 36px 36px;
    }

    /* 縦に伸びすぎるため、風景3枚は横並びのまま詰める */
    .aboutPhotos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 6px;
    }

    /* カンプ実測 約32px。375pxで1行に収めるため字間を詰める */
    .aboutTitle {
        font-size: 28px;
        letter-spacing: 0.02em;
        text-indent: 0.02em;
    }

    .aboutLead {
        font-size: 16px;
    }

    /* 幅が足りず任意改行と自然改行が二重に効くため、自然な折り返しに任せる */
    .aboutLead br {
        display: none;
    }

    .aboutOutline {
        padding: 20px 20px 24px;
        font-size: 15px;
    }

    .aboutNote {
        font-size: 14px;
    }

    .aboutOutlineRow {
        flex-direction: column;
    }

    /* 縦並びでは行が続けて並ぶため、項目の切れ目に余白を入れる */
    .aboutOutlineRow + .aboutOutlineRow {
        margin-top: 0.7em;
    }

    /* 縦並びではコロンが無くなり項目名と内容の見分けが付きにくいため、
       dt をさらに太くして区別を付ける */
    .aboutOutlineRow dt {
        font-weight: 700;
    }

    .aboutOutlineRow dt::after {
        content: '';
    }

    /* MESSAGE 見出しは折り返しを許可して収める */
    .message {
        padding-top: 85px;
    }

    /* カンプSPでは2行。<br> の位置で折る */
    .messageTitle {
        font-size: 28px;
        line-height: 1.25;
    }

    /* 人物は画面幅の50%を下回らせない。画面の右端いっぱいまで寄せて、
       見出し・キャッチの右端が顔に届かないようにする */
    .messageFigure {
        right: calc((100% - 100vw) / 2);
        width: min(62vw, 420px);
    }

    .messageCatch {
        font-size: 23px;
        line-height: 1.45;
        white-space: normal;
    }

    /* 人物の顔に本文が掛からないよう、キャッチとの間を空ける。
       画面が広いほど人物も大きくなるので、間隔も幅に連動させる */
    .messageText {
        margin-top: max(1.6em, calc(21vw - 12px));
    }

    .messageCatch {
        font-size: 23px;
        line-height: 1.45;
    }

    /* 本文の任意改行はカンプでも活きている（足りない分は自然に折り返す）。
       カンプは13pxだが、可読性のため下限の14pxに揃える */
    .messageText {
        font-size: 14px;
        line-height: 1.7;
    }



    .messageSign {
        font-size: 17px;
        text-align: right;
    }

    /* TIME TABLE */
    .timetableList th,
    .timetableList td {
        font-size: 14px;
        padding-inline: 0.35em;
    }

    .timetableList th {
        width: 78px;
        min-width: 78px;
    }

    .timetableOpen {
        min-height: 40px;
    }

    .timetableOpenTime {
        width: 78px;
        font-size: 14px;
    }

    .timetableOpenName {
        font-size: 16px;
    }

    .timetable {
        --finaleTimeW: 78px;
    }

    .timetableFinaleTime {
        font-size: 14px;
    }

    .timetableFinale {
        min-height: 76px;
    }

    .timetableFinaleName {
        padding-left: 20px;
        font-size: 21px;
    }

    .newsItem {
        flex-direction: column;
        gap: 0.3em;
    }

    /* 縦並びでは flex-basis が高さとして効いてしまうため解除する */
    .newsText {
        flex: 0 1 auto;
    }

    .newsList {
        max-height: 320px;
    }

    /* 横方向の登場は画面外へ出る量を抑える（狭い幅でのはみ出し防止） */
    .js .revealLeft {
        transform: translateX(-24px);
    }

    .js .revealRight {
        transform: translateX(24px);
    }


/* 地図は元の比率のまま見せる（拡大はライトボックスに任せる） */

    /* 観覧無料 */
    .freeTitle {
        font-size: 40px;
        letter-spacing: 0.2em;
        text-indent: 0.2em;
    }

    .freeSub {
        font-size: 15px;
    }

    /* スマホでは横幅が足りず折り返し位置が端末ごとにばらつくため、
       「ライブ観覧エリア」と「優先予約はこちらから >」で必ず2行に分ける */
    .freeApply {
        flex-direction: column;
        align-items: center;
        gap: 2px 0;
    }

    .freeTermsTitle {
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 0.02em;
    }

    /* 2列だと「優先入場予約について」が折り返し、項目ごとに行数が
       ばらついて読みにくい。狭い幅では1列に落とす */
    .freeTermsLinks {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* ACCESS */
    .accessBoxTitle {
        font-size: 18px;
    }

    .routeLegend li {
        flex-wrap: wrap;
        gap: 0.2em 0.7em;
        white-space: normal;
    }

    .routeName {
        min-width: 0;
    }

    /* 項目ごとに改行位置がばらつかないよう、常に2行で揃え、
       2行目はバーの幅ぶん字下げして名称の頭に合わせる */
    .routeRank {
        flex: 0 0 100%;
        padding-left: calc(var(--routeBarW) + 0.7em);
    }

    .guidelinesTabs {
        gap: 0.5em 1.1em;
    }

    .guidelinesTab {
        font-size: 15px;
    }

    .guidelinesList li {
        padding-left: 1.5em;
        text-indent: -1.5em;
    }

    .guidelinesList li::before {
        margin-right: 0.5em;
    }

    /* フッター（1行表記は 767px 以下の指定に任せる） */
    .footerInfoRow dt {
        width: auto;
    }

    .pagetop {
        --pagetopW: 74px;
        right: 18px;
    }
}

/* ---------- 小型スマートフォン ---------- */

@media (max-width: 480px) {
    /* アーティストは1列 */
    .artistList {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .heroEdition {
        letter-spacing: 0.22em;
        text-indent: 0.22em;
    }

    /* 375px で1文字だけあふれるため、1行に収まるサイズに落とす */
    .heroPlace {
        font-size: 15px;
    }

}

/* ---------- アクセシビリティ: 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .reveal,
    .js .revealUp,
    .js .revealLeft,
    .js .revealRight,
    .js .revealZoom,
    .js .revealBlur {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
        transition-delay: 0s;
    }

    .btn,
    .btnArrow,
    .gnavLink::after,
    .pagetop {
        transition: none;
    }

    .heroButtons::before {
        transition: none;
    }

    .js .hero .heroEdition,
    .js .hero .heroLogo,
    .js .hero .heroDate,
    .js .hero .heroTime,
    .js .hero .heroPlace,
    .js .hero .heroFree,
    .js .hero .heroFireworks,
    .js .hero .heroButtons .btn {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .js .hero .heroEdition::before,
    .js .hero .heroEdition::after,
    .js .hero .heroFree::before,
    .js .hero .heroFree::after {
        animation: none;
        transform: none;
    }
}