@charset "utf-8";
:root {
    --base: #18181b; /* 背景メイン（黒寄りティール） */
    --base-mid: #212124; /* セクション交互（やや明） */
    --base-light: #0f0d16; /* セクション交互（さらに明） */
    --paper: #F8FFF9; /* 白背景（ミントホワイト） */
    --text-on-paper: #0B1F1F; /* 本文用（やわらかい黒） */
    --card: #212124; /* カード地 */
    --text-main: #e7e7eb; /* 柔らかい白文字 */
    --text-dark: #aeaeb2; /* カード上の文字 */
    --muted: #ccc; /* サブテキスト */
    --line: #243131; /* 区切り線・ボーダー */
    --accent: #3EA7FF; /* ネオンシアン（控えめ） */
    --accent-2: #FF4EB8; /* ソフトネオンピンク（控えめ） */
    --cta: #C6FF00; /* CTA（黄緑）—使用は限定的に */
    --yellow: #FFE358; /* ライトライン用の淡黄 */
}
/* --- メインカラー --- */
/* Base */
* {
    box-sizing: border-box
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px
}
body {
    margin: 0;
    font-family: 'Outfit', 'BIZ UDPGothic', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
    line-height: 1.8;
    color: var(--text-main);
    background: var(--base);
    position: relative;
    overflow-x: hidden;
}
a {
    color: var(--accent);
    text-decoration: none
}
a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent)
}
img {
    max-width: 100%;
    display: block
}
.container {
    width: min(1000px, 90vw);
    margin-inline: auto
}
.section-title, .event-title, .cat-pill, .copy {
    font-family: "Raleway", sans-serif;
}
.num, time, .price {
    font-family: 'Outfit', sans-serif;
    font-variant-numeric: tabular-nums; /* 桁揃え（チケットや時刻に◎） */
    letter-spacing: 0.03em;
}
.cat-pill span, .ja-sub, .main-title {
    font-family: 'Outfit', 'BIZ UDPGothic', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
}
/* ===============================
   Header / Nav（完成版）
   =============================== */
/* ---- Header / Nav ---- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: 68px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: transparent;
}
.site-header .brand {
    position: relative;
    padding: 1rem .8rem .8rem .8rem;
}
.site-header .brand img {
    height: 36px
}
/* ヘッダー内の重ね方 */
.site-header .brand .brand-logo {
    display: block;
}
.site-header .brand .header-loader {
    display: none;
}
/* Hamburger */
.nav-toggle {
    appearance: none;
    border: 3px solid #000;
    border-radius: 999px;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #000;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    cursor: pointer;
    z-index: 1000;
}
.nav-toggle .bars {
    position: relative;
    width: 30px;
    height: 30px
}
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bar {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: #0C0F14;
    border-radius: 8px;
    transition: .25s ease;
}
.nav-toggle .bars::before {
    top: 8px
}
.nav-toggle .bar {
    top: 50%;
    transform: translateY(-50%)
}
.nav-toggle .bars::after {
    bottom: 8px
}
body.nav-open .nav-toggle .bars::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg)
}
body.nav-open .nav-toggle .bar {
    opacity: 0
}
body.nav-open .nav-toggle .bars::after {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg)
}
/* Mobile Nav */
.nav-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 999
}
body.nav-open #mobile-nav {
    display: block
}
.nav-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto; /* ← 3行にする（末尾にSNSの場所を作る） */
    background: var(--ink-surface);
    color: #fff;
    padding: 40px 24px 32px;
    z-index: 2; /* nav-dim より上 */
}
.nav-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55)
}
.nav-grid {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 18px
}
.nav-item {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 800;
    color: #fff
}
.nav-item:hover {
    color: var(--accent)
}
/* PCのみの出し分け */
@media (min-width:1024px) {
    /* ▼ トップ以外：header-loader だけ常時表示（brand-logo は完全に非表示） */
    body:not(.is-home) .site-header .brand .header-loader {
        display: block !important;
    }
    body:not(.is-home) .site-header .brand .brand-logo {
        display: none !important;
    }
    /* ▼ トップ（HEROあり）：
        - HERO内：どちらも出さない（= header-loader を非表示 / brand-logo も非表示）
        - HERO通過後（.post-hero）：header-loader だけ表示 */
    body.is-home .site-header .brand .brand-logo {
        display: none !important;
    }
    body.is-home .site-header .brand .header-loader {
        display: none !important;
    } /* HERO内 */
    body.is-home.post-hero .site-header .brand .header-loader {
        display: block !important;
    } /* HERO以降 */
}
/* === モバイルで brand を消してもハンバーガーを右に === */
@media (max-width: 1023px) {
    /* PC専用ロゴはスマホで非表示 */
    .site-header .brand.pc {
        display: none !important;
    }
    /* 中身は右寄せ（brandが無くても右端へ） */
    .header-inner {
        justify-content: flex-end; /* ← ここがポイント */
    }
    /* 念のため右寄せの保険（単体でも右端へ押し出す） */
    .nav-toggle {
        margin-left: auto;
    }
    /* （任意）スマホではボタンを少し小さくする */
    .nav-toggle {
        width: 56px;
        height: 56px;
    }
    .nav-toggle .bars {
        width: 24px;
        height: 20px;
    }
    .nav-toggle .bars::before {
        top: 3px;
    }
    .nav-toggle .bar {
        top: 50%;
        transform: translateY(-50%);
    }
    .nav-toggle .bars::after {
        bottom: 3px;
    }
}
/* SNS */
.nav-sns {
    display: flex;
    justify-content: center;
    gap: 22px; /* アイコン間の余白 */
    padding: 20px 0; /* 上下余白 */
}
.nav-sns img {
    width: 28px; /* アイコンサイズ */
    height: auto;
    display: block;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}
.nav-sns img:hover {
    opacity: 1;
}
.nav-sns a img {
    width: 28px;
    height: auto;
    opacity: .9;
    transition:
        transform .25s ease, filter .25s ease, opacity .25s ease;
}
/* hover */
.nav-sns a:hover img {
    opacity: 1;
    transform: scale(1.18);
    filter:
        brightness(0) invert(1) /* 白にする */
        drop-shadow(0 0 8px rgba(80, 150, 255, 0.9)) /* 青系の強めグロー */
        drop-shadow(0 0 14px rgba(80, 150, 255, 0.65)); /* 外側にもじわっと拡散 */
}
/* スマホでは少し小さく */
@media (max-width: 480px) {
    .nav-sns img {
        width: 24px;
        gap: 12px;
    }
} /*end*/
/* Hero */
.hero {
    margin-top: -65px; /*ナビ分*/
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #1A2424 0%, #1E2A2A 100%);
    color: #fff;
}
@media (max-width: 768px) {
    .hero {
        margin-top: 0;
        height: 100vh;
    }
} /**/
.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    animation: heroSlide 24s infinite
}
.hero-slide:nth-child(1) {
    animation-delay: 0s
}
.hero-slide:nth-child(2) {
    animation-delay: 7s
}
.hero-slide:nth-child(3) {
    animation-delay: 14s
}
@keyframes heroSlide {
    0% {
        opacity: 0;
        transform: scale(1.02)
    }
    4% {
        opacity: 1
    }
    28% {
        opacity: 1;
        transform: scale(1.12) translate(-2%, -2%)
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(900px 500px at 60% 12%, rgba(57, 231, 255, .16), transparent 60%), radial-gradient(700px 600px at 12% 85%, rgba(255, 122, 239, .12), transparent 65%);
    mix-blend-mode: screen;
}
.logo-wrap {
    position: absolute;
    z-index: 2;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
    animation: logoBounce 1.6s cubic-bezier(.34, 1.56, .64, 1) 0.3s both;
    /* both = 最初と最後のtransformを保持 */
}
.hero-logo {
    display: block;
    width: min(45vw, 500px);
    max-height: 50vh;
    height: auto;
    animation: logoBounce 10s ease-in-out 1s infinite;
}
/* ボヨヨン */
@keyframes logoBounce {
    0%, 70% {
        transform: translateY(0) scale(1);
    }
    78% {
        transform: translateY(6px) scale(1.08, 0.92); /* 下に沈み、少し潰れる */
    }
    86% {
        transform: translateY(-8px) scale(0.95, 1.07); /* 上に跳ねて伸びる */
    }
    94% {
        transform: translateY(0) scale(1.02, 0.98); /* 戻るとき少しバウンド */
    }
    100% {
        transform: translateY(0) scale(1);
    }
}
.hero-copy1, .hero-copy2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.hero-copy1 {
    top: 10%
}
.hero-copy2 {
    bottom: 8%
}
.hero-copy1 img {
    width: clamp(240px, 60vh, 580px);
}
.hero-copy2 img {
    width: clamp(200px, 40vh, 360px);
}
.bubble {
    position: absolute;
    z-index: 3
}
.bubble-img {
    width: 100%;
    animation: metronome 7s ease-in-out infinite
}
/*縦幅基準　スマホ縦基準で確実に揃えたい*/
.bubble--miru {
    top: 14%;
    left: 18%;
    width: clamp(84px, 14vh, 170px)
}
.bubble--kiku {
    top: 14%;
    right: 16%;
    width: clamp(90px, 14vh, 168px)
}
.bubble--asobu {
    bottom: 12%;
    left: 16%;
    width: clamp(88px, 14vh, 160px)
}
.bubble--taiken {
    bottom: 10%;
    right: 18%;
    width: clamp(76px, 10vh, 128px)
}
@media (max-width: 768px) {
    .hero-copy1 {
        top: 9%;
        width: clamp(240px, 88vw, 580px);
    }
    .hero-copy2 {
        bottom: 8%;
        width: clamp(200px, 70vw, 360px);
    }
    .bubble--miru {
        top: 16%;
        left: 6%;
    }
    .bubble--kiku {
        top: 16%;
        right: 6%;
    }
    .bubble--asobu {
        bottom: 16%;
        left: 6%;
    }
    .bubble--taiken {
        bottom: 16%;
        right: 6%;
    }
} /**/
@keyframes metronome {
    0% {
        transform: rotate(-6deg)
    }
    50% {
        transform: rotate(6deg)
    }
    100% {
        transform: rotate(-6deg)
    }
}
/* Belt */
.belt {
    position: relative;
    overflow: hidden;
    color: #EAF2FF;
    border-block: 1px solid var(--line);
}
.belt .inner {
    width: min(1200px, 92vw);
    margin: auto;
    padding: 28px 0
}
.belt .row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between
}
.belt h2 {
    margin: 0;
    font-weight: 900;
    letter-spacing: .02em;
    font-size: clamp(18px, 3.4vw, 28px);
    line-height: 1.15
}
.belt .sub {
    opacity: .95;
    font-size: 16px
}
@media (max-width: 768px) {
    .belt .row {
        justify-content: center; /* 横方向の配置を中央に */
        text-align: center; /* テキストも中央揃え */
    }
    .event-title {
        width: 100%;
    }
} /**/
.lightline {
    position: relative;
    height: 12px;
    -webkit-mask: linear-gradient(90deg, transparent, black 15% 85%, transparent);
    mask: linear-gradient(90deg, transparent, black 15% 85%, transparent)
}
.lightline::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .14;
    background: radial-gradient(circle, #F5F8FA, transparent 55%), linear-gradient(90deg, var(--accent-2), var(--accent));
    mix-blend-mode: screen;
}
#home-page .news-grid, .page-room .news-grid {
    display: grid;
    gap: 1rem;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* PC以上: 左大きめ、右aside小さめ */
@media (min-width: 992px) {
    .page-room .news-grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }
}
/* モバイル */
@media (max-width: 991px) {
    #home-page .news-grid, .page-room .news-grid {
        gap: 1rem;
        margin: 1rem auto; /* ←ここ修正（左右auto） */
        padding: 0 0.5rem; /* ←余白を少しだけに */
        grid-template-columns: 1fr;
    }
}
.text-center {
    margin: auto;
    text-align: center;
    width: 80%;
}
.card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 2rem;
    text-align: left;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}
.news-card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1rem;
    text-align: left;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
.news-date {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}
.news-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}
.news-desc {
    font-size: 1rem;
    opacity: 0.85;
    line-height: 1.8;
}
.news-gallery {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.news-gallery__item {
    margin: 0;
}
.news-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .25s ease, opacity .25s ease;
}
.news-gallery__item img:hover {
    transform: scale(1.02);
    opacity: .92;
}
.news-gallery__item figcaption {
    margin-top: .45rem;
    font-size: .82rem;
    line-height: 1.55;
    opacity: .82;
}
@media (max-width: 991px) {
    .news-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}
@media (max-width: 640px) {
    .news-gallery {
        grid-template-columns: 1fr;
    }
}
/* lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 9999;
}
.lightbox.is-open {
    display: flex;
}
.lightbox__inner {
    position: relative;
    max-width: min(1100px, 92vw);
    max-height: 92vh;
    text-align: center;
}
.lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: 8px;
}
.lightbox__caption {
    margin: .9rem 0 0;
    font-size: .95rem;
    line-height: 1.7;
    color: #fff;
}
.lightbox__caption small {
    display: inline-block;
    margin-top: .35rem;
    font-size: .8rem;
    opacity: .68;
    letter-spacing: .04em;
}
.lightbox__close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
body.lightbox-open {
    overflow: hidden;
}
.lightbox {
    touch-action: pan-y;
}
.lightbox__prev, .lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer; 
 /* 黒ふちどり */
    text-shadow:
        -2px -2px 0 #000,
        -1px -2px 0 #000,
         0px -2px 0 #000,
         1px -2px 0 #000,
         2px -2px 0 #000,

        -2px -1px 0 #000,
         2px -1px 0 #000,

        -2px  0px 0 #000,
         2px  0px 0 #000,

        -2px  1px 0 #000,
         2px  1px 0 #000,

        -2px  2px 0 #000,
        -1px  2px 0 #000,
         0px  2px 0 #000,
         1px  2px 0 #000,
         2px  2px 0 #000;
}
.lightbox__prev {
    left: 1rem;
}
.lightbox__next {
    right: 1rem;
}
@media (max-width: 640px) {
    .lightbox {
        padding: 16px;
    }
    .lightbox__img {
        max-height: 70vh;
    }
    .lightbox__close {
        top: -42px;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    .lightbox__caption {
        font-size: .88rem;
    }
} /**/
.btn--circle {
    position: absolute;
    bottom: 1.2rem;
    right: 1.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--accent);
    border-radius: 50%;
    color: var(--base);
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s ease;
}
.btn--circle:hover {
    background: var(--accent-2);
    color: var(--base);
}
/* 共通フェードアップ効果 */
.fadeup {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.fadeup.inview {
    opacity: 1;
    transform: translateY(0);
}
.event-title {
    display: inline-block;
    font-weight: 900;
    letter-spacing: .02em;
    font-size: clamp(22px, 3vw, 30px);
    background: linear-gradient(90deg, #E1AFFF, #A6D3FF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.event-title-sub {
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 15px);
}
.hd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 28px;
    flex-direction: column;
    text-align: center
}
.sub {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.2;
}
.section-underline {
    width: 10%;
    height: 1px;
    background: var(--accent-2);
    opacity: .6
}
#home-page .hd .sub {
    color: var(--accent-2);
}
/* 日英併記（下に控えめ） */
.ja-sub, .en-sub {
    display: block;
    font-size: .8rem;
    opacity: .72;
    letter-spacing: .04em;
}
/* ベース：本文セクションの見出し */
.section-title {
    display: block;
    margin: 0 auto .6rem;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .01em;
    color: #EAF1FF;
    text-align: center;
}
.section-title.is-accent {}
.section-category h1.main-title {
    display: inline-block;
    margin: 0 auto .6rem;
    font-size: clamp(20px, 3vw, 30px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: center;
    position: relative;
    z-index: 2;
    color: #fff; /* 白文字メイン */
}
.section-category h1.main-title span {
    font-size: clamp(16px, 2vw, 25px);
}
/* やわらかな発光オーラ */
.section-category h1.main-title::before {
    content: "";
    position: absolute;
    inset: -2px; /* 少しだけ外へ */
    border-radius: 999px;
    background: linear-gradient(90deg, #E1AFFF, #A6D3FF);
    filter: blur(3px); /* 光の広がりを控えめに */
    opacity: 0.1; /* 明るさを落とす */
    z-index: -1;
}
h2.category-copy {
    display: block;
    margin: 0 auto .6rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .01em;
    font-size: clamp(20px, 3vw, 30px);
    background: linear-gradient(90deg, #E1AFFF, #A6D3FF);
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    position: relative;
    z-index: 2;
    border-radius: 999px;
}
.category-text {
    padding: 2rem;
}
/* コメントボックス */
.comment-box {
    position: relative;
    margin-top: 2.5em;
    padding: 1.8em 2em;
    border: 2px solid var(--accent);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 18px rgba(255, 180, 255, 0.1);
    font-size: 1rem;
    line-height: 1.7;
    color: #EAEFFF;
    backdrop-filter: blur(4px);
}
/* タイトルバッジ（丸囲み） */
.comment-title {
    position: absolute;
    top: -0.9em;
    left: 1.4em;
    background: var(--accent);
    color: #f9f9f9;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: .05em;
    padding: 0.3em 1.1em;
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    text-shadow: none;
}
/* コメント文 */
.comment-box p {
    margin: 0;
    font-size: 0.95rem;
    color: #EAF4FF;
}
/* 強調行 */
.comment-box strong {
    display: inline-block;
    margin-top: .6em;
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
}
.comment-author {
    text-align: right;
    margin-top: 0.8em;
    font-weight: 600;
    color: #E1AFFF; /* 名前だけ少し淡いピンクブルー */
    font-style: italic;
    letter-spacing: 0.03em;
}
@media (max-width: 768px) {
    .comment-box {
        padding: 1.8em 1em;
    }
    .category-text {
        padding: 1rem;
    }
} /**/
/* 見出し（共通） */
.section-title.sound {
    display: block;
    margin: 0 auto 1.2rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: .04em;
    font-size: clamp(1.8rem, 2.8vw, 2.3rem);
    color: #EAF1FF;
    /* スクロールイン前は静か */
    opacity: 0;
    transform: scale(.96);
    transform-origin: center;
    transition: opacity .6s ease, transform .6s ease;
    position: relative; /* 粒子の定位先 */
    overflow: visible;
}
/* ビューポートに入った瞬間だけ鼓動する */
.section-title.sound.inview {
    opacity: 1;
    transform: scale(1);
    animation: beatIntro 1.6s ease-out both;
}
/* 読み込まれた時に一度だけドクン → 静止 */
@keyframes beatIntro {
    0% {
        transform: scale(1);
        text-shadow: none;
        opacity: 0;
    }
    30% {
        transform: scale(1.12);
        text-shadow: 0 0 18px #00c8ff, 0 0 36px #6cf;
        opacity: 1;
    }
    55% {
        transform: scale(.97);
        text-shadow: 0 0 10px #ff66cc, 0 0 20px #ff99e0;
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px #ff66cc, 0 0 20px #ff99e0;
        opacity: 1;
    }
}
.particle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .25));
}
@keyframes popNoteSoft {
    0% {
        transform: translate(-50%, 0) scale(.7) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    70% {
        transform: translate(calc(-50% + var(--dx)), calc(-1 * var(--dy))) scale(1.08) rotate(var(--rot));
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--dx)), calc(-0.85 * var(--dy))) scale(1) rotate(var(--rot));
        opacity: 0;
    }
}
/* デフォルト: PC=3列 / SP=1列。列数は変数で上書き可能 */
.grid {
    display: grid;
    gap: 18px;
    justify-content: center; /* 2列時も中央に寄せる */
    grid-template-columns: repeat(var(--cols-desktop, 2), minmax(320px, 420px));
    gap: 36px;
}
.grid > .card {
    max-width: 400px;
    margin-inline: auto;
}
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    } /* 1列 */
    .grid > .card {
        max-width: 90%;
    }
} /**/
/* 色トークン（必要なら調整） */ :root {
    --neon-blue: rgba(80, 180, 255, 1);
    --neon-blue-w: rgba(80, 180, 255, .28);
    --neon-pink: rgba(255, 100, 250, 1);
    --neon-pink-w: rgba(255, 100, 250, .26);
}
.card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block; /* キーボードフォーカス可 */
}
/* クリック時の体験向上：hover/focusでカードを少し持ち上げる */
.card__overlay:focus-visible {
    outline: none;
    transform: translateY(-3px);
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
/* （任意）フォーカスリングを見やすく */
.card__overlay:focus-visible {
    /*box-shadow: 0 0 0 3px rgba(57,231,255,.5), 0 10px 24px rgba(0,0,0,.28);*/
    border-radius: 8px; /* カードの角丸に合わせる */
}
.card:hover {
    overflow: hidden;
    box-shadow:
        0 6px 12px var(--neon-blue-w), 0 6px 12px var(--neon-pink-w), inset 0 0 6px 12px rgba(0, 180, 255, .08);
    transition: transform .4s ease, box-shadow .4s ease, filter .4s ease;
}
.thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden
}
.thumb img:hover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform .8s ease
}
/* 写真キャプション */
.photo-credit {
    position: absolute;
    bottom: 5px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 8px;
    border-radius: 8px;
}
/* 右下配置（デフォルト） */
.photo-credit.right {
    right: 12px;
    text-align: right;
}
/* 左下配置 */
.photo-credit.left {
    left: 12px;
    text-align: left;
}
.badges {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    gap: 6px;
    z-index: 2
}
.badge {
    font-size: 12px;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(25, 25, 25, .8);
    border: 1px solid rgba(225, 175, 255, .25);
}
.badge.free {
    background: var(--accent);
    color: var(--base);
    box-shadow: 0 0 10px rgba(51, 255, 255, .22)
}
.badge.set {
    background: rgba(255, 78, 184, 0.8);
    color: var(--text-main);
    box-shadow: 0 0 10px rgba(255, 120, 200, .8)
}
.meta {
    padding: 12px 14px 0;
    font-size: 13px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}
.detail {
    padding: 0 14px 14px;
    font-size: 14px;
    color: #445
}
.price {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}
.price .tag {
    background: #333;
    color: #f9f9f9;
    border-radius: 999px;
    padding: .3rem .6rem;
    font-size: .8em
}
.price .u30 {
    background: #666;
    color: #f9f9f9;
    border-radius: 999px;
    padding: .3rem .6rem;
    font-size: .8em
}
.cardtitle {
    font-size: 18px;
    margin: 0 .5rem .5rem .9rem; /* タイトル下の余白を極小に */
    line-height: 1.4; /* 詰める */
    font-weight: 700;
}
.cardtitle .en-sub {
    display: block; /* 行を分けて“同一ヘッダ”扱い */
    font-size: .73rem; /* 小さめ */
    margin: .05rem 0 1rem; /* ほぼ密着 */
    opacity: .72; /* 主従をつける */
    letter-spacing: .02em;
    font-weight: 500;
}
/* もしカード全体の見た目でさらに寄せたい場合（任意） */
.card .meta {
    margin-bottom: .35rem;
} /* メタ下の余白を減らす */
/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    font-size: .92rem;
    background: var(--paper);
    color: var(--text-on-paper);
}
.table th, .table td {
    padding: 12px;
    border-top: 1px solid #eef2f2;
    vertical-align: top
}
.table thead th {
    background: #f7fbfb;
    text-align: left;
    border-top: none;
    color: #0B3C46
}
.table .table-link {
    display: inline-block;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #0f1115;
    color: #e7e7eb;
    border: 1px solid rgba(255, 255, 255, .14);
    text-decoration: none;
    transition: transform .15s ease, background .15s ease;
}
.table .table-link:hover {
    background: #171a20;
    transform: translateY(-1px);
    text-decoration: none;
}
@media (max-width: 768px) {
    .table {
        font-size: .8rem;
    }
    .table .table-link span {
        display: none;
    } /* 文字非表示 */
    .table .table-link::after {
        content: '▶︎';
    } /* アイコンに切替 */
}
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: 30px;
    padding: 12px 18px;
    border: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn--sm {
    padding: 9px 14px;
    font-size: .92rem;
    border-radius: 30px
}
.btn--xl {
    padding: 16px 26px;
    font-size: 1.05rem;
    border-radius: 30px
}
.btn--primary {
    background: linear-gradient(30deg, #FF4EB8 0%, #8F6BFF 45%, #3EA7FF 100%);
    color: #f5f5f5;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* 発光は基本オフ */
}
.btn--primary:hover {
    box-shadow: 0 0 18px rgba(100, 200, 255, .25); /* ホバー時だけ淡く */
}
.btn--accent {
    background: var(--accent);
    color: #061014
}
.btn--secondary {
    background: #F5F8FA;
    color: #0B1F1F;
    border: 1px solid rgba(0, 0, 0, .08)
}
.btn--outline {
    background: transparent;
    color: #EAF2FF;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6)
}
.cta.btn-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.cta .btn {
    width: 100%;
}
/* =============================
   Footer Layout
============================= */
footer.access-split {
    position: relative;
    background:
        linear-gradient(180deg, rgba(12, 16, 20, .5), rgba(10, 10, 12, .3) 60%, rgba(0, 0, 0, .4)), url('../img/bgcenter-moto.jpg') center bottom / cover no-repeat;
    color: rgba(255, 255, 255, .85);
    overflow: hidden;
}
footer .access-wrap {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: flex-start;
    gap: 2rem;
    padding: 60px clamp(16px, 4vw, 80px) 40px;
    min-height: 340px;
}
footer .col {
    position: relative;
}
footer .credit table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(12px, 1.6vw, 15px);
    line-height: 1.6;
}
footer .credit th {
    vertical-align: top;
    text-align: left;
    white-space: nowrap;
    opacity: .7;
    padding-right: 0.8em;
}
footer .credit td {
    vertical-align: top;
    text-align: left;
}
footer .credit th span, footer .credit td span {
    background-color: rgba(0, 0, 0, 0.9)
}
footer .copy {
    font-size: 0.8rem;
    opacity: .6;
    margin-top: 1.6em;
}
.footer-sns {
    display: flex;
    justify-content: center;
    gap: 22px;
    padding: 60px 0 0;
}
.footer-sns a img {
    width: 28px;
    opacity: .9;
    transition:
        transform .25s ease, filter .25s ease, opacity .25s ease;
}
/* hover：青い発光（ナビと同じ質感） */
.footer-sns a:hover img {
    opacity: 1;
    transform: scale(1.18);
    filter:
        brightness(0) invert(1) drop-shadow(0 0 8px rgba(80, 150, 255, .9)) drop-shadow(0 0 14px rgba(80, 150, 255, .65));
}
/* スマホでは縦並びに */
@media (max-width: 992px) {
    footer .access-wrap {
        min-height: 240px;
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 20px;
    }
    .footer-action {
        width: 100%;
        margin: 2rem auto;
        text-align: center;
    }
}
/* まず共通化：箱の幅ルールを1本化 */
.banner0, .banner {
    margin: 30px auto 30px;
    text-align: center;
    width: min(320px, 60vw); /* PCは340px、狭いときは縮む */
}
/* banner0だけ上マージン0なら差分だけ書く */
.footer-action .banner53 {
    margin: 30px auto 30px;
    text-align: center;
    width: min(320px, 60vw); /* PCは340px、狭いときは縮む */
}
.banner53 {
    margin: 30px auto 30px;
    text-align: center;
    width: min(320px, 60vw); /* PCは340px、狭いときは縮む */
}
/* 中の画像を箱に必ず合わせる */
.banner0 img, .banner img, .banner53 img {
    display: block;
    width: 100%;
    height: auto;
}
/* 768px以下で別指定したいなら“同じ指定”をここに書く（片方だけ変えない） */
@media (max-width: 768px) {
    .banner0, .banner {
        width: min(60vw, 320px); /* 上と同等なので省略でもOK */
    }
    .footer-action .banner53 {
        width: min(60vw, 320px);
    }
    .banner53 {
        width: min(60vw, 320px);
    }
}
/* =============================
     detail-page 専用 FOOTER
   ============================= */
/* detail-page フッターを3カラムレイアウトに変更 */
.detail-page #access .access-wrap {
    display: flex;
    justify-content: center; /* 中央寄せのベース */
    align-items: center;
}
/* 左右は幅を詰める（中身が無いので最小幅） */
.detail-page #access .col-left, .detail-page #access .col-right {
    flex: 0 0 auto;
}
/* ★ 中央が広く取られるようにする */
.detail-page #access .col-center {
    flex: 1 1 auto; /* 中央が自動で広がる */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
/* コピーライト中央 */
.detail-page .copy {
    background-color: #000;
    text-align: center;
    font-size: 14px;
}
/* 右下固定＆表示制御はそのまま */
.pagetop {
    position: fixed;
    right: clamp(8px, 3vw, 12px);
    bottom: clamp(8px, 3vw, 14px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
    background: transparent;
    border: 0;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
}
.pagetop.is-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
/* ふわふわは通常時のみ（launch中は止める） */
.pagetop-icon {
    width: 80px;
    height: auto;
    display: block;
    animation: floatY 3.5s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, .40)) drop-shadow(0 0 24px rgba(57, 231, 255, .25));
    transition: transform .4s ease, opacity .4s ease, filter .4s ease;
}
@keyframes floatY {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-12px)
    }
}
.pagetop:hover .pagetop-icon {
    transform: scale(1.08);
    opacity: .95;
    filter: drop-shadow(0 0 18px rgba(255, 180, 255, .5)) drop-shadow(0 0 36px rgba(57, 231, 255, .4));
}
/* === HERO同期：発光パルスを追加合成 === */
.pagetop.syncing .pagetop-icon {
    animation:
        floatY 3.5s ease-in-out infinite, glowPulse 3s ease-in-out infinite; /* 発光の鼓動 */
}
@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(225, 175, 255, .35)) drop-shadow(0 0 24px rgba(57, 231, 255, .22));
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(225, 175, 255, .65)) drop-shadow(0 0 40px rgba(57, 231, 255, .45));
    }
}
/* 初回だけ“ポンッ”と同期 cue */
.pagetop.sync-cue .pagetop-icon {
    animation: cuePop .9s cubic-bezier(.2, .7, .1, 1) both, floatY 3.5s ease-in-out infinite;
}
@keyframes cuePop {
    0% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-8px) scale(1.08);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}
/* クリック時の発進（既存） */
.pagetop.launch .pagetop-icon {
    animation: launchUp .55s cubic-bezier(.2, .7, .1, 1) forwards !important; /* 他アニメより優先 */
    will-change: transform, opacity, filter;
}
@keyframes launchUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0) drop-shadow(0 0 12px rgba(255, 255, 255, .4));
    }
    100% {
        transform: translateY(-150px) scale(.96);
        opacity: 0;
        filter: blur(1.2px);
    }
}
/* 発進の残光ストリーク */
.pagetop::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(120, 200, 255, .0));
    border-radius: 999px;
    transform: translate(-50%, -50%) scaleY(.2);
    opacity: 0;
    pointer-events: none;
    filter: blur(1px);
}
.pagetop.launch::before {
    animation: streakUp .55s ease-out forwards;
}
@keyframes streakUp {
    0% {
        opacity: .0;
        transform: translate(-50%, -40%) scaleY(.2);
        height: 10px;
    }
    20% {
        opacity: .45;
    }
    60% {
        opacity: .25;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -160px) scaleY(1.2);
        height: 140px;
    }
}
/* Sections */
.section {
    padding: 64px 0;
    position: relative;
    z-index: 1;
}
.section:nth-of-type(even) {
    --grad-left: rgba(255, 122, 239, .16); /* 左端：ピンク（ネオンマゼンタ寄り） */
    --grad-right: rgba(57, 231, 255, .16); /* 右端：シアン（ネオンアクアブルー） */
    --center-a: .96; /* 中央の暗さ（1に近いほど真っ黒） */
    --center-w: 10; /* 中央の暗部幅（%） */
    background: linear-gradient(90deg, var(--grad-left) 0%, rgba(19, 9, 18, var(--center-a)) calc(50% - var(--center-w)*1%/2), rgba(19, 9, 18, var(--center-a)) calc(50% + var(--center-w)*1%/2), var(--grad-right) 100%);
} /* 交互でリズムだけ残す */
.section:nth-of-type(even)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../svg/wave.svg") center/cover no-repeat;
    opacity: .5;
    mix-blend-mode: screen;
    pointer-events: none;
}
/* レイヤー：::before=模様 / ::after=左右グラデ */
.section::before, .section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none
}
.section::before {
    z-index: -1;
    mix-blend-mode: screen
}
.section::after {
    z-index: -2;
    mix-blend-mode: screen
}
/* 左右グラデ（変数で制御） */
.section-gradient::after {
    --grad-left: rgba(255, 122, 239, .16); /* 左端：ピンク（ネオンマゼンタ寄り） */
    --grad-right: rgba(57, 231, 255, .16); /* 右端：シアン（ネオンアクアブルー） */
    --center-a: .96; /* 中央の暗さ（1に近いほど真っ黒） */
    --center-w: 10; /* 中央の暗部幅（%） */
    background: linear-gradient(90deg, var(--grad-left) 0%, rgba(19, 9, 18, var(--center-a)) calc(50% - var(--center-w)*1%/2), rgba(19, 9, 18, var(--center-a)) calc(50% + var(--center-w)*1%/2), var(--grad-right) 100%);
}
/* アクセス背景（注：適宜パスを更新） */
#tickets, #news {
    background:
        radial-gradient(120% 200% at 50% -20%, rgba(255, 180, 200, .04), transparent 70%), linear-gradient(180deg, rgba(10, 15, 20, .96), rgba(20, 28, 36, .98));
}
.detail-page #tickets {
    background: none;
}
/* ===== LOADER (BON! → HERO) ===== */
#loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: var(--base); /* 既存のベース色に合わせる */
    transition: opacity .55s ease, visibility .55s ease;
}
.loader-inner {
    position: relative;
    display: grid;
    place-items: center
}
.loader-logo {
    width: clamp(140px, 26vw, 300px);
    will-change: transform, opacity;
    animation: bonPop .9s cubic-bezier(.16, .84, .24, 1) both;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .45));
}
/* ほのかな発光(コスト低) */
.loader-glow {
    position: absolute;
    inset: auto;
    width: clamp(200px, 40vw, 520px);
    height: clamp(200px, 40vw, 520px);
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(100, 200, 255, .42), transparent 60%), radial-gradient(closest-side, rgba(255, 120, 200, .40), transparent 70%);
    mix-blend-mode: screen;
    filter: blur(2px);
    animation: glowBeat 1.4s ease-in-out .1s both;
}
/* BON! のポップ */
@keyframes bonPop {
    0% {
        opacity: 0;
        transform: scale(.62)
    }
    60% {
        opacity: 1;
        transform: scale(1.08)
    }
    100% {
        transform: scale(1)
    }
}
/* うっすら鼓動 */
@keyframes glowBeat {
    0% {
        transform: scale(.8);
        opacity: .0
    }
    40% {
        transform: scale(1.06);
        opacity: .9
    }
    100% {
        transform: scale(1);
        opacity: .5
    }
}
/* ロード完了後にフェードアウトして非表示に */
body.is-loaded #loader {
    opacity: 0;
    visibility: hidden
}
/* HEROをほんの少しだけ見せ出し(負担小) */
body.is-loaded .hero {
    animation: heroReveal .6s ease .05s both;
}
@keyframes heroReveal {
    from {
        opacity: .0;
        transform: translateY(6px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}
body.is-loaded #loader {
    transition-delay: .15s;
}
/* ------------------------------------------------------------------- 
 * e.t.c
/*-------------------------------------------------------------------*/
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
/* ------------------------------------------------------------------- 
 * responsive:
 *  e.t.c
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
} /*end*/
/* ------------------------------------------------------------------- 
 * etc
 * ------------------------------------------------------------------- */
.notes-toggle {
    margin-top: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.03);
}
.notes-toggle[open] {
    background: rgba(255, 255, 255, 0.05);
}
.notes-title {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-main);
    outline: none;
}
.notes-toggle .kome {
    margin: 1rem 0 0 1.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.notes-toggle .kome li {
    line-height: 1.55;
}
ul.kome {
    font-size: 0.9rem;
    opacity: 0.75;
    list-style-type: none;
    padding-left: 1em;
    margin-left: 0.1em;
}
ul.kome li {
    text-indent: -1.5em;
    line-height: 1.65;
}
ul.kome li:before {
    content: "※";
    margin-right: 0.5em;
}
/*HOME チケット一覧の箇所*/
.home-page-ticket-kome ul.kome {
    font-size: 0.8rem;
    padding: 1rem;
}
ul.ten {
    opacity: 0.75;
    list-style-type: none;
    padding-left: 1em;
    margin-left: 0.1em;
}
ul.ten li {
    text-indent: -0.85em;
    line-height: 1.65;
}
ul.ten li:before {
    content: "·";
    margin-right: 0.5em;
}
/* ------------------------------------------------------------------- 
 * responsive:
 * etc
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
    ul {
        font-size: 0.8rem;
    }
} /**/
/* ---- 2カラムを“ゆったり中央寄せ＋丸い間”に ---- */
@media (min-width:769px) {
    .grid {
        grid-template-columns: repeat(var(--cols-desktop, 2), minmax(320px, 450px));
        gap: 36px;
        justify-content: center;
    }
    .grid > .card {
        max-width: 420px;
        margin-inline: auto;
        border-radius: 8px;
    }
}
/* 中央の丸い抜き：2列のときだけ“呼吸”を作る */
.grid.round-gap {
    position: relative;
    isolation: isolate;
}
.grid.round-gap::before {
    content: "";
    position: absolute;
    inset: 0 50% 0 auto;
    width: 96px;
    margin-right: -48px;
    background: radial-gradient(48px at left center, transparent 44px, rgba(0, 0, 0, .10) 45px);
    opacity: .9;
    z-index: -1;
}
@media (max-width:768px) {
    .grid.round-gap::before {
        display: none;
    } /* SPは1列なので非表示 */
}
/* ===== Tickets Table: Dark Theme (section限定上書き) ===== */
#tickets .table {
    background: rgba(255, 255, 255, .04); /* ほんのり透けるダーク */
    color: var(--text-main);
    border-color: #2a3333;
}
#tickets .table th, #tickets .table td {
    border-top: 1px solid #2a3333;
}
#tickets .table thead th {
    background: rgba(255, 255, 255, .06); /* ヘッダを少しだけ明るく */
    color: var(--text-main);
    text-align: left; /* 長い表でもヘッダが見える */
    top: 68px; /* 固定ヘッダ高に合わせる */
    backdrop-filter: blur(6px);
}
#tickets .table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .03); /* うっすらゼブラ */
}
#tickets .table .kbd {
    color: var(--text-main);
}
#tickets .table .table-link {
    background: transparent;
    color: var(--accent);
    border-color: rgba(255, 255, 255, .18);
}
#tickets .table .table-link:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
    text-decoration: none;
}
/* ===== 円レイヤー ===== */
.bgwrap {
    position: relative;
    overflow: clip
}
.orb-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none
}
/* 円の見た目（濃さ・発光・ブラーは深度で制御） */
.orb {
    position: absolute;
    --x: 0px;
    --y: 0px;
    --px: 0px;
    --py: 0px;
    --sx: 0px;
    --sy: 0px;
    --s: 1;
    --d: .5;
    transform: translate3d(calc(var(--x) + var(--px) + var(--sx)), calc(var(--y) + var(--py) + var(--sy)), 0) scale(var(--s));
    will-change: transform;
    opacity: calc(.65 + var(--d) * .35); /* 0.65〜1.0 と濃く */
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, .25)) drop-shadow(0 0 24px rgba(255, 255, 255, .16)) blur(calc((1 - var(--d)) * 0.6px)); /* 背景側だけごく薄くぼかす */
}
.orb img {
    display: block;
    width: 100%;
    height: auto;
    animation: spin 40s linear infinite
}
@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}
/* PCは全体スケール底上げ（大きさの不満を解消） */
@media (min-width:1024px) {
    .orb {
        transform: translate3d(calc(var(--x) + var(--px) + var(--sx)), calc(var(--y) + var(--py) + var(--sy)), 0) scale(calc(var(--s, 1) * 1.25));
    } /* +25% */
}
/* リサイズ中のチラつき対策：一時的に回転停止・少し薄く */
.resizing .orb img {
    animation-play-state: paused;
}
.resizing .orb {
    opacity: calc(.55 + var(--d) * .25);
} /* 少しだけ薄く */
/* ===== End: style.css ===== */
/* =========================================================
  個別ページ（.page-room）
========================================================= */
/* ---- 共通トークン参照（フォールバック付） ---- */
.page-room {
    --theme-a: var(--accent, #E1AFFF);
    --theme-b: var(--accent-2, #A6D3FF);
    --ink: var(--text-main, rgba(255, 255, 255, .88));
    --ink-dim: var(--text-dim, rgba(255, 255, 255, .66));
    --panel: var(--panel, #12171E);
    --line: var(--line, rgba(255, 255, 255, .08));
}
/* ---- コンテナ＆セクション余白 ---- */
.page-room .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 28px);
}
.page-room .section {
    padding: clamp(14px, 4vw, 48px) 0;
    background: none;
}
.page-room .hd {
    margin-bottom: clamp(14px, 2.6vw, 22px);
}
/* =========================================================
   見出しヘッダー（ピル＋下線） ★ここは原文そのまま★
========================================================= */
.page-room .section-menu {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.page-room .section-category {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 400px;
    padding-top: 100px;
    background:
        linear-gradient(180deg, rgba(12, 16, 20, .1), rgba(10, 10, 12, .4) 60%, rgba(0, 0, 0, 0.8)), url('../img/bgcenter-moto.jpg') center top / cover no-repeat;
    color: rgba(255, 255, 255, .85);
    overflow: visible;
}
.page-room .section-pill {
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .65em 1.1em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 255, 255, .18);
    color: #eee;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
@media (max-width: 992px) {
    .page-room .section-pill {
        font-size: 1rem;
    }
} /**/
/* =========================================================
   2カラムレイアウト（イントロ）
========================================================= */
.page-room .intro-grid {
    margin: auto;
    background: #333;
    padding-top: 3rem;
}
.page-room .intro-grid .card, .page-room .intro-grid h2 {
    border-radius: 0;
}
.page-room .intro-grid .card {
    margin: auto;
    box-shadow: none;
    background: #333;
}
.intro-thumb {
    max-width: 900px;
}
@media (max-width: 992px) {
    .page-room .section-category {
        min-height: 240px;
        padding-top: 50px;
    }
    .page-room .intro-grid {
        padding-top: 0;
    }
    .page-room .intro-grid .card {
        padding: 0;
    }
}
/* =========================================================
   カード（ノーグロー：面＋枠＋黒影）
========================================================= */
/* 本文パネル（細縁＋黒影） */
.page-room .panel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(200, 220, 255, .15);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    padding: clamp(16px, 2.4vw, 24px);
}
.page-room .panel .lead {
    color: var(--ink);
    line-height: 1.85;
}
/* =========================================================
   OVERVIEW（定義リスト）
========================================================= */
.page-room .spec {
    display: grid;
    gap: .9rem 1.2rem;
}
.page-room .spec .row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: .8rem 1rem;
    align-items: start;
    padding: .6rem .75rem; /* 可読性UP */
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: background .25s ease;
}
.page-room .spec .row:hover {
    background: rgba(255, 255, 255, .08);
}
.page-room .spec dt {
    font-weight: 800;
    color: #EAF1FF;
    letter-spacing: .01em;
    opacity: .95;
}
.page-room .spec dd {
    margin: 0;
    color: var(--ink);
    line-height: 1.85;
    max-width: 70ch;
    letter-spacing: 0.052em;
}
.page-room .spec .artists .en-sub {
    display: block;
    opacity: .72;
}
.page-room .program-outline .desc {
    margin: .6rem 0 0;
    color: var(--ink);
    max-width: 70ch;
}
.page-room .program-outline .signature {
    display: inline-block;
    margin-left: .4em;
    opacity: .82;
}
@media (max-width: 720px) {
    .page-room .spec .row {
        grid-template-columns: 1fr;
    }
    .page-room .spec dt {
        opacity: .9;
    }
}
/* =========================================================
   PROGRAM LIST – Elegant / Blue Accent (FINAL)
========================================================= */
.page-room .program-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.8rem;
}
/* 各プログラム枠 */
.page-room .program-item {
    padding: 1.2rem 1.4rem;
    border-left: 2px solid rgba(100, 170, 255, .45);
    background: rgba(255, 255, 255, .02);
    transition: background .25s ease;
}
.page-room .program-item:hover {
    background: rgba(255, 255, 255, .05);
}
/* 時間 */
.page-room .program-item .time {
    margin: 0 0 .35rem;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .12em;
    color: #64aaff;
}
/* 演奏者 */
.page-room .program-item .performer {
    margin: 0 0 .35rem;
    font-weight: 600;
    color: #eef2ff;
    line-height: 1.6;
}
/* 曲目ブロック（← 行間制御の中枢） */
.page-room .program-item .works {
    margin: 0;
    padding-left: .6rem;
    border-left: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    gap: .3rem; /* ← 曲と曲の間隔 */
    line-height: 1.35; /* ← 行そのものの詰まり */
}
/* 1曲単位 */
.page-room .program-item .work {
    display: block;
}
/* 英文 */
.page-room .program-item .work .en-sub {
    display: block;
    font-size: .85em;
    opacity: .68;
    letter-spacing: .04em;
    margin-top: -.1em; /* 曲名に寄せる */
}
/* スマホ */
@media (max-width: 720px) {
    .page-room .program-item {
        padding: 1rem 1.1rem;
    }
    .page-room .program-item .time {
        font-size: .9rem;
    }
    .page-room .program-item .works {
        gap: .25rem;
        line-height: 1.3;
    }
}
/* =========================================================
   プロフィール（2→1カラム）
========================================================= */
.page-room .profiles {
    display: grid;
    gap: clamp(15px, 2vw, 30px);
    align-items: stretch; /* ← 高さを揃える！ */
    justify-content: center;
}
/* PCデフォルト：2列固定 */
@media (min-width: 1024px) {
    .page-room .profiles {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 1件しかない場合のみ中央1列 */
@media (min-width: 1024px) {
    .page-room .profiles:has(> .profile-card: only-child) {
        grid-template-columns: minmax(320px, 450px);
        justify-content: center;
    }
}
/* カード全体を高さ均等化（flexboxで中身を下まで広げる） */
.page-room .profile-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 中身が短いときも底まで伸びる */
    height: 100%; /* grid内で高さを揃える */
    max-width: 450px;
    margin-inline: auto;
}
/* 氏名・肩書：日英併記 */
.page-room .name {
    margin: .4em 0 .2em;
    color: #fff;
    font-weight: 800;
    font-size: clamp(18px, 2.1vw, 20px);
    line-height: 1.25;
}
.page-room .name .en {
    display: inline-block;
    margin-left: .5em;
    font-weight: 400;
    font-size: .85em;
    opacity: .72;
    letter-spacing: .02em;
}
.page-room .role {
    color: rgba(255, 255, 255, .78);
    font-size: clamp(13px, 1.6vw, 14px);
    margin-bottom: .4em;
}
.page-room .role .en {
    display: inline-block;
    margin-left: .5em;
    opacity: .72;
    font-size: .95em;
}
@media (max-width: 560px) {
    .page-room .name .en, .page-room .role .en {
        display: block;
        margin: .15em 0 0;
    }
}
.page-room .bio, .page-room .meta {
    color: var(--ink-dim);
    line-height: 1.75;
}
/* 仕切り（静か） */
.page-room .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
    margin: clamp(14px, 2vw, 18px) 0;
}
/* バッジ／チップ */
.page-room .badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    height: 28px;
    padding: 0 .8em;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    backdrop-filter: blur(2px);
}
/* カード全体は余白ナシ（サムネを端まで） */
.card.profile-card, .card.profile-card .thumb {
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
}
/* テキスト部分にだけパディングを付与 */
.card.profile-card .name, .card.profile-card .role, .card.profile-card .bio {
    padding-inline: 1.2rem; /* 左右にゆとり */
}
.card.profile-card .name {
    margin-top: 0.8rem;
    margin-bottom: 0.2rem;
    font-weight: 800;
    font-size: clamp(1.1rem, 2.2vw, 1.25rem);
}
.card.profile-card .role {
    color: rgba(255, 255, 255, .75);
    margin-bottom: 0.6rem;
}
.card.profile-card .bio {
    line-height: 1.75;
    margin-bottom: 1rem;
}
/* スマホでは少しコンパクトに */
@media (max-width: 600px) {
    .card.profile-card .name, .card.profile-card .role, .card.profile-card .bio {
        padding-inline: 1rem;
    }
}
/* =========================================================
   テーブル（読みやすく）
========================================================= */
.page-room table {
    width: 100%;
    border-collapse: collapse;
}
.page-room th, .page-room td {
    padding: .6em .8em;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: var(--ink);
}
.page-room th {
    text-align: left;
    white-space: nowrap;
    opacity: .85;
}
/* =========================================================
   チケット（視線誘導／カード化）
========================================================= */
.page-room .tickets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2vw, 18px);
}
@media (max-width: 820px) {
    .page-room .tickets-grid {
        grid-template-columns: 1fr;
    }
}
.page-room .tickets-grid .t-block {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: background .25s ease, transform .2s ease;
}
.page-room .tickets-grid .t-block:hover {
    background: rgba(28, 32, 40, .92);
    transform: translateY(-2px);
}
.page-room .tickets-grid .t-block h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    line-height: 1.45;
}
.page-room .tickets-grid .prices {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
}
.page-room .tickets-grid .prices li {
    display: flex;
    align-items: baseline;
    gap: .5em;
    padding: .35rem .5rem;
    border-radius: 8px;
}
.page-room .tickets-grid .prices li:nth-child(odd) {
    background: rgba(255, 255, 255, .05);
}
.page-room .tickets-grid .prices li::before {
    content: "・";
    color: rgba(255, 255, 255, .45);
}
.page-room .tickets-grid .prices li strong, .page-room .tickets-grid .prices li b {
    font-size: 1.08em;
    letter-spacing: .02em;
}
.page-room .notes {
    margin-top: .9rem;
    font-size: .9rem;
    line-height: 1.75;
    opacity: .7;
}
.ticket-outlet-simple {
    margin-bottom: 1.5rem;
}
.outlet-heading {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--text-main);
}
.outlet-list {
    margin: 0;
    padding: 0;
}
.outlet-item {
    display: flex;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.outlet-item:last-child {
    border-bottom: none;
}
.outlet-item dt {
    min-width: 3.5rem;
    font-weight: 600;
    color: var(--text-main);
}
.outlet-item dd {
    margin: 0;
    line-height: 1.55;
}
.outlet-item dd .sub {
    font-size: 0.85em;
    opacity: 0.75;
}
/* ========= patch: thumbnail top-only rounding ========= */
/* サムネ容器と画像は “上だけ角丸 / 下は直線” にする */
.card .thumb {
    border-radius: 8px 8px 0 0; /* 上左右だけ丸い */
    overflow: hidden; /* 画像の角をクリップ */
}
.card .thumb img {
    border-radius: inherit; /* 上だけ角丸を継承 */
}
/* 既存の「img { border-radius: inherit; }」より強い指定で確実に適用 */
.card > picture > img, .card .media img {
    border-radius: 8px 8px 0 0;
}
/* ===== Card thumbnail spacing tweak ===== */
.card, .page-room .card {
    /* カード本体：余白を詰め気味に */
    padding: 0;
    overflow: hidden;
}
/* サムネの下余白を消す */
.card .thumb, .page-room .card .thumb {
    margin-bottom: 0;
    display: block;
}
/* thumb画像をカード上辺にピタッと */
.card .thumb img, .page-room .card .thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}
/* ===== .subnav ===== */
.subnav {
    text-align: center;
    margin: 1.6rem auto;
    position: relative;
    z-index: 5;
}
.subnav ul {
    display: inline-flex;
    gap: 1.4rem; /* ← 自然な間隔 */
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}
.subnav a {
    position: relative;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    background: linear-gradient(90deg, #E1AFFF, #A6D3FF);
    -webkit-background-clip: text;
    color: transparent;
    padding-bottom: 0.18em;
    transition: all .3s ease;
}
/* 下線：最初は淡く、中央寄せ */
.subnav a::after {
    content: "";
    position: absolute;
    left: 15%;
    bottom: 0;
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg, #E1AFFF, #A6D3FF);
    opacity: 0.4;
    border-radius: 8px;
    transition: opacity .3s ease, background .3s ease;
}
/* === ホバー時 === */
.subnav a:hover {
    color: #999;
    -webkit-background-clip: border-box;
    background: none;
    text-shadow: 0 0 10px rgba(255, 255, 255, .55);
}
.subnav a:hover::after {
    background: rgba(255, 255, 255, .1);
    opacity: 1;
}
/* モバイル調整 */
@media (max-width: 600px) {
    .subnav ul {
        gap: 1rem;
    }
    .subnav a {
        font-size: 0.9rem;
    }
}
/* ===== Ticket Card (based on OVERVIEW style) ===== */
.ticket-card {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 2rem;
    max-width: 1000px;
    margin-inline: auto;
    margin-top: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ticket-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}
.ticket-card__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* テキストとバッジ */
.ticket-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}
.ticket-meta .badge {
    background: var(--accent);
    color: var(--base);
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}
.ticket-meta .when .num {
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* 購入ボタン（80%幅） */
.ticket-card .buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.ticket-card .buy a.btn {
    width: 80%;
    max-width: 480px;
    padding: 1rem 1.2rem;
    font-size: 1.1rem;
    border-radius: 999px;
    text-align: center;
    font-weight: 800;
}
.ticket-card .btn--outline {
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #f5f5f5;
    background: transparent;
}
.ticket-card .btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
}
/* カウントダウン・注記 */
.ticket-card .chip {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}
.ticket-card .note {}
/* スマホ調整 */
@media (max-width: 600px) {
    .ticket-card {
        padding: 1.5rem;
    }
    .ticket-card .buy a.btn {
        width: 100%;
        font-size: 1rem;
    }
}
/* ===== Ticket prices block ===== */
.ticket-prices {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}
.ticket-prices__title {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .8rem;
}
.ticket-prices__subtitle {
    color: var(--accent-2);
    font-size: 0.95rem;
    margin-top: 1.4rem;
    margin-bottom: .5rem;
    opacity: .9;
}
.ticket-prices__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}
.ticket-prices__list li {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    padding: .3rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.ticket-prices__list .label {
    opacity: 0.9;
}
.ticket-prices__list .price {
    font-weight: 700;
}
/* ===== Mobile Nav enhancement ===== */
/* ===== Fullscreen Neon Nav ===== */ :root {
    --bg: #0a0a0f;
    --fg: #e9f5ff;
    --muted: #a8b3c2;
    --neon-cyan: #00e5ff;
    --neon-magenta: #ff1bf1;
    --neon-lime: #adff2f;
    --line: rgba(255, 255, 255, 0.08);
}
.nav-overlay {
    position: fixed;
    inset: 0;
    display: none;
}
.nav-overlay.is-open {
    display: block;
}
.nav-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.nav-panel.nav-panel--full {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 800px at 80% 20%, rgba(0, 229, 255, 0.15), transparent 60%), radial-gradient(1000px 700px at 20% 80%, rgba(255, 27, 241, 0.12), transparent 60%), var(--bg);
    color: var(--fg);
    display: flex;
    flex-direction: column;
}
/* header */
.nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}
.nav-title img {
    height: 28px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, .25));
}
.nav-close {
    appearance: none;
    background: none;
    color: var(--fg);
    border: none;
    font-size: 28px;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
}
/* main list */
.nav-list {
    flex: 1;
    overflow: auto;
    padding: 8px 0 32px;
}
/* row base: no rounded corners */
.nav-row {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    padding: 18px 24px;
    text-decoration: none;
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    font-size: clamp(18px, 4vw, 28px);
    letter-spacing: .02em;
    transition: color .2s ease, background .2s ease;
}
.nav-row:hover, .nav-row:focus {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), transparent 60%);
    outline: none;
    color: #fff;
}
.nav-label {
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 229, 255, .35);
}
.nav-meta {
    color: var(--muted);
    font-weight: 500;
    margin-left: auto;
    margin-right: 12px;
}
/* arrow motion */
.nav-arrow {
    display: inline-block;
    transform: translateX(0);
    transition: transform .18s ease;
    text-shadow:
        0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan);
}
.nav-row:hover .nav-arrow {
    transform: translateX(6px);
}
/* groups (details/summary) */
.nav-group {
    border-bottom: 1px solid var(--line);
}
.nav-group > summary {
    list-style: none;
    cursor: pointer;
}
.nav-group > summary::-webkit-details-marker {
    display: none;
}
.nav-group[open] > summary {
    background: linear-gradient(90deg, rgba(255, 27, 241, 0.08), transparent 60%);
}
.nav-sublist {
    display: grid;
    grid-template-columns: 1fr; /* モバイル1列 */
    gap: 0;
    border-top: 1px dashed var(--line);
}
.nav-subrow {
    display: block;
    padding: 14px 24px 14px 40px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dashed var(--line);
    font-size: clamp(14px, 3.2vw, 18px);
    transition: color .2s ease, background .2s ease, text-shadow .2s;
}
.nav-subrow:hover, .nav-subrow:focus {
    color: #fff;
    background: linear-gradient(90deg, rgba(173, 255, 47, 0.08), transparent 60%);
    text-shadow: 0 0 6px rgba(173, 255, 47, .6);
    outline: none;
}
/* large screens：左右2カラム感（任意） */
@media (min-width: 960px) {
    .nav-list {
        padding: 24px 0 48px;
    }
    .nav-group[open] .nav-sublist {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* focus visible */
.nav-row:focus-visible, .nav-subrow:focus-visible, summary:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: -2px;
}
/* =========================================================
   ABOUT 専用レイヤー
   ページ：<main id="about" class="page-room about-page">
========================================================= */
#about .container {
    width: 90%;
    text-align: center;
    margin: auto;
}
.about-page {
    /* テーマカラー（夜の統一感） */
    --about-pink: #E1AFFF;
    --about-cyan: #68F3FF;
    --about-ink: #0B1016;
    --panel-bg: rgba(12, 18, 24, .58);
    --panel-bd: rgba(255, 255, 255, .08);
    --panel-glow: 0 10px 40px rgba(80, 180, 255, .12);
}
/* ---------------- HERO（チラシビジュアル＋グラデ被せ） ---------------- */
.about-page .hero-about {
    position: relative;
    isolation: isolate;
    padding: clamp(96px, 16vw, 260px) 0 clamp(64px, 12vw, 140px);
    text-align: center;
    overflow: clip;
    background:
        linear-gradient(90deg, rgba(10, 12, 16, 0), rgba(10, 16, 22, 0.5)), url("../img/about-img.jpg") center / cover no-repeat;
    background-attachment: scroll;
}
/* PCだけゆったり版 */
@media (min-width: 900px) {
    .about-page .hero-about {
        padding-top: clamp(200px, 20vw, 300px);
        padding-bottom: clamp(80px, 14vw, 100px);
    }
}
@media (min-width:1024px) {
    .about-page .hero-about {
        background-attachment: fixed;
    }
}
/* IPADYOKO */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
  .about-page .hero-about {
    background-size: 92% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* タイトル：日本語×英語（グラデ文字） */
.about-page .hero-about .main-title {
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .01em;
    font-size: clamp(28px, 6vw, 40px);
    margin: 9rem auto .8em;
    background: linear-gradient(90deg, var(--about-pink), var(--about-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 12px 12px rgba(255, 255, 255, .1);
}
/* 英文サブ（下のspan） */
.about-page .hero-about .main-title span {
    display: inline-block;
    font-weight: 700;
    font-size: clamp(14px, 2.6vw, 18px);
    letter-spacing: .06em;
    opacity: .9;
}
/* セクションピル（右下に小さく） */
.about-page .hero-about .section-menu {
    margin-top: clamp(12px, 1.8vw, 16px);
}
.about-page .hero-about .section-pill {
    display: inline-block;
    padding: .45em 1.1em;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #0C0F14;
    background: linear-gradient(135deg, var(--about-pink), var(--about-cyan));
    box-shadow: 0 6px 24px rgba(90, 200, 255, .25);
}
/* ---------------- 本文パネル（落ち着いた透過カード） ---------------- */
.about-page .panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-bd);
    border-radius: 8px;
    padding: clamp(18px, 3vw, 32px) clamp(18px, 3vw, 36px);
    box-shadow: var(--panel-glow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* サイドの薄い光の縁取り（Sカーブ風の陰影） */
    position: relative;
    overflow: clip;
}
.about-page .panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        radial-gradient(120% 40% at 0% 50%, rgba(225, 175, 255, .10), transparent 70%), radial-gradient(120% 40% at 100% 50%, rgba(104, 243, 255, .10), transparent 70%);
    mask: linear-gradient(180deg, rgba(0, 0, 0, .0), #000 20% 80%, rgba(0, 0, 0, .0));
    pointer-events: none;
}
/* 日本語本文 */
.about-page .about-body {
    width: min(920px, 100%);
    margin-inline: auto;
    color: #EAF2FF;
}
.about-page .about-body .lead {
    font-size: clamp(16px, 2.2vw, 18px);
    color: #F7FBFF;
    margin-bottom: .8em;
}
.about-page .about-body p {
    line-height: 1.9;
    font-size: clamp(15px, 2vw, 16px);
    margin: 0 0 1.1em;
    color: #DCE8F6;
}
/* 署名（右寄せ） */
.about-page .about-body .author, .about-page .en-block .author {
    text-align: right;
    font-weight: 700;
    color: var(--about-pink);
    font-style: italic;
    letter-spacing: .03em;
    margin-top: .6em;
}
/* ---------------- 英文ブロックは少しトーン変更 ---------------- */
.about-page .en-block {
    width: min(920px, 100%);
    margin-inline: auto;
    background: rgba(14, 20, 28, .55);
    box-shadow: 0 12px 40px rgba(40, 120, 180, .10);
}
.about-page .en-block .section-ttl {
    font-weight: 900;
    font-size: clamp(18px, 3.2vw, 24px);
    margin: .2em 0 .8em;
    background: linear-gradient(90deg, var(--about-cyan), var(--about-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.about-page .en-block .section-ttl span {
    font-size: .9em;
    opacity: .85;
}
.about-page .en-block p {
    color: #E6F5FF;
}
/* ---------------- 読み易さの小技 ---------------- */
/* 段落の最初だけ行頭を少し下げる（読み物感を演出） */
@media (min-width:768px) {
    .about-page .about-body p + p, .about-page .en-block p + p {
        text-indent: 1em;
    }
}
/* 強調 */
.about-page .about-body strong, .about-page .en-block strong {
    color: #fff;
    text-shadow: 0 0 10px rgba(225, 175, 255, .25);
    font-weight: 800;
}
/* ---------------- PageTop（ABOUTでも馴染む微調整） ---------------- */
.about-page .pagetop .pagetop-icon {
    filter:
        drop-shadow(0 0 12px rgba(255, 255, 255, .4)) drop-shadow(0 0 26px rgba(225, 175, 255, .28)) drop-shadow(0 0 36px rgba(104, 243, 255, .24));
}
.youtube-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    height: 0;
    overflow: hidden;
    border-radius: 12px; /* 角丸つけたい場合 */
}
.youtube-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* --------------- HISTORY --------------- */
.history-box, .works-box, .A-to-Z-box {
    max-width: 1100px;
    margin: auto;
    padding: 3.5rem 0 1.5rem;
}
.history-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/* PC時は7列 */
.history-item {
    width: calc(100% / 7);
    text-align: center;
}
.history-item img {
    width: 100%;
    height: auto;
    display: block;
}
.history-item img.img-download {
    width: 15px;
    height: 15px;
}
.history-item img.img-caret-right {
    width: 15px;
    height: 15px;
}
.accordion img.img-caret-down {
    width: 15px;
    height: 15px;
}
.accordion img.img-caret-right {
    width: 15px;
    height: 15px;
}
.web-link {
    margin-top: 10px;
}
.flyer-link, .web-link, .accordion label img.img-caret-down {
    display: inline-flex;
    align-items: center; /* 垂直位置を中央に揃える */
    text-decoration: none; /* 必要なら下線を消す */
}
.flyer-link .img-download, .flyer-link .img-caret-right {
    width: 15px;
    height: 15px;
    margin-right: 3px;
}
@media (max-width: 768px) {
    .history-box, .works-box, .A-to-Z-box {
        max-width: 90%;
        margin: auto;
        padding: 3.5rem 0 1.5rem;
    }
    .history-item {
        padding-top: 30px;
        width: calc(50% - 10px); /* スマホでは2列 */
    }
} /**/
#history h3 {
    color: #999;
    line-height: 1.4;
}
.ABC-artist {
    text-align: justify;
    line-height: 1.6;
    font-size: 0.9em;
    color: #888;
}
.ABC-artist span {
    padding: 0 0.2em 0 0.4em;
    font-weight: 700;
    font-size: 0.95em;
}
span.ABC-count {
    font-weight: 700;
    font-size: 2rem;
    color: #038cc9;
}
.ABCorder {
    font-size: 0.8em;
    margin-bottom: 1em;
    width: 100%;
}
.ABCorder a {
    font-size: 0.9rem;
    line-height: 2;
    text-decoration: none;
    padding: 0 0.2em;
}
.ABCorder-box {
    margin: 0 0 1em 0;
}
.ABCorder-midashi {
    text-align: left;
}
.ABCorder-txt {
    font-size: 0.8em;
}
/* アーティスト名前 */
ul.artist-list {
    font-weight: 600;
    list-style: none;
    padding: 0;
}
ul li.artist-name {
    font-size: 1em;
    padding-top: 0.5em;
}
ul li.artist-name img.img-caret-right {
    display: inline-flex;
    align-items: left; /* 垂直位置を中央に揃える */
}
/* 曲名 */
ul.artist-title {
    font-weight: 400;
    font-size: 1em;
}
ul.artist-title li {
    font-size: 0.9em;
    list-style-type: none;
    text-indent: -0.9em;
    padding: 0 0.5em 0 0.9em;
}
ul.artist-title li:before {
    display: inline;
    content: "- ";
}
@media (max-width: 768px) {
    span.ABC-count {
        font-size: 1.2rem;
    }
}
/*------------------------------
アコーディオン
------------------------------*/
.accordion {
    width: 98%;
    margin: 10px auto 40px;
    text-align: center;
}
/* チェックボックスを非表示にする */
.accordion-hidden {
    display: none;
}
/* Question部分 */
.accordion-open {
    display: block;
    padding: 0.2em 0.5em;
    font-size: 1em;
    background: #333;
    color: #eee;
    border: 1px solid #666;
    width: 100%;
    font-weight: 600;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
}
/* Answer部分は最初は表示しない */
.accordion-close {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: 0.5s; /* 表示速度の設定 */ margin: auto;
}
/* チェックボックスにチェックが入ったらAnswer部分を表示 */
.accordion-hidden:checked + .accordion-open + .accordion-close {
    height: auto;
    font-size: 0.9em;
    opacity: 1;
    text-align: left;
    padding: 1.5em;
    line-height: 1.75;
    background: #eee;
    color: #444;
}
.accordion_prev {
    font-size: 0.9rem;
    font-weight: 400;
}
.accordion_midashi {
    font-size: 0.9rem;
    font-weight: 600;
    background: #e4f9ff;
    padding: 0.2rem 0.5rem;
    margin: 0.5rem 0 0.5rem;
}
.accordion_prof {
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0 0.2rem;
    margin: 1rem 0.5rem 0.5rem 0;
    background: #e4f9ff;
    border: 1px solid #999;
}
/* ポップアップ全体の背景 */
.pst-overlay {
    display: none; /* 初期非表示 */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 1rem;
    transition: opacity 0.3s ease;
}
/* アクティブ時に表示 */
.pst-overlay.active {
    display: flex;
    opacity: 1;
}
/* ポップアップ内部 */
.pst-content {
    background: #333;
    padding: 1.5rem;
    max-width: 700px;
    width: 100%;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: pstFade 0.3s ease;
    /* スマホ対応：縦スクロール */
    max-height: 90vh; /* 画面高さの90%まで */
    overflow-y: auto;
}
/* 閉じるボタン */
.pst-close {
    position: absolute;
    top: 1rem;
    right: 0.5rem;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 3px solid #333;
    border-radius: 50%;
    color: #333;
    font-size: 2rem;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
/* タイトル・サブタイトル */
.pst-title, .pst-subtitle {
    border: 2px solid #ff13f0; /* ネオンピンク寄りの鮮やかカラー */
    border-radius: 0.8rem;
    padding: 0.3rem 1rem;
    margin-top: 1rem;
    color: #fff;
    text-shadow:
        0 0 6px #ff13f0, 0 0 14px #ff13f0, 0 0 22px #ff13f0;
    box-shadow:
        0 0 0.1rem #ff13f0, 0 0 0.3rem #ff13f0, inset 0 0 0.45rem #ff13f0;
}
/* アニメーション */
@keyframes pstFade {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* 開くボタン */
.pst-btn {
    cursor: pointer;
}
@media (max-width: 768px) {
    .pst-content {
        max-width: 95%; /* 横幅を画面に合わせる */
        padding: 1rem;
    }
    .pst-close {
        top: 0.5rem;
        right: 0.5rem;
        width: 40px;
        height: 40px;
        font-size: 1.8rem;
        line-height: 36px;
    }
} /**/
.set-banner {
    width: 400px;
    text-align: center;
    margin: auto;
}
.set-banner img {
    max-width: 400px;
}
@media (max-width: 768px) {
    .set-banner {
        width: 90%;
        margin: auto;
    }
    .set-banner img {
        max-width: 100%;
    }
} /**/
/* 注釈 */
.ticket-notes {
    margin-top: 30px;
}
/* タブ制御用ラジオは非表示 */
.ticket-notes input[type="radio"] {
    display: none;
}
/* タブ見出し */
.ticket-notes .notes-tabs label {
    padding: 0.45em 1.3em;
    cursor: pointer;
    border-radius: 2em;
    font-size: 0.9rem;
    background: #333; /* 背景グレー */
    color: #f5f5f5; /* 青紫 */
    border: 1px solid #5b5bb2;
    transition: 0.3s;
    position: relative;
}
/* ▼アイコン */
.ticket-notes .notes-tabs label::before {
    content: "▼";
    font-size: 0.7em;
    margin-right: 0.4em;
    vertical-align: middle;
}
/* アクティブタブ */
#notes-ja:checked ~ .notes-tabs label[for="notes-ja"], #notes-en:checked ~ .notes-tabs label[for="notes-en"] {
    background: #5b5bb2; /* 青紫 */
    color: #fff;
    border-color: #5b5bb2;
}
/* アクティブ時だけ▼を少し回す */
#notes-ja:checked ~ .notes-tabs label[for="notes-ja"]::before, #notes-en:checked ~ .notes-tabs label[for="notes-en"]::before {
    transform: rotate(180deg);
    display: inline-block;
}
/* コンテンツ切り替え */
.ticket-notes .notes-content {
    display: none;
}
#notes-ja:checked ~ .notes-ja {
    display: block;
}
#notes-en:checked ~ .notes-en {
    display: block;
}
/* アクティブ時だけ▼を少し回す */
#notes-ja:checked ~ .notes-tabs label[for="notes-ja"]::before, #notes-en:checked ~ .notes-tabs label[for="notes-en"]::before {
    transform: rotate(180deg);
    display: inline-block;
}
/* =============================
   Timetable
============================= */
.section.timetable .timetable-figure {
    margin: 0;
}
.section.timetable .timetable-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.section.timetable .timetable-actions {
    margin-top: 14px;
    display: flex;
    justify-content: center; /* 追加：中央寄せ */
    gap: 10px;
    flex-wrap: wrap;
}
/* =========================================================
  電子音楽の部屋 長文用　Program (Index + Notes) 追加CSS
   既存の .ten / .en-sub を壊さず “枠と余白”だけ整える想定
   ========================================================= */
/* --- 全体 --- */
.programIndex {
    margin-top: .25rem;
}
.programListBlock {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, .12);
}
.programListBlock__title {
    margin: 0 0 .35rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.35;
}
.programListBlock__meta {
    margin: 0 0 .75rem;
    opacity: .85;
    line-height: 1.6;
}
/* =========================================================
   PROGRAM（青アクセント版・白文字前提）
   ========================================================= */
/* 青の基準色 */ :root {
    --accent-blue: #64aaff;
    --accent-glow: rgba(100, 170, 255, .6);
}
/* =========================
   開始時間ブロック
   ========================= */
.programTimes {
    margin: 0 0 1.4rem;
    padding: 1rem 1rem .9rem;
    border: 1px solid var(--accent-blue-soft);
    border-left: 4px solid var(--accent-blue);
    border-radius: 14px;
    background: rgba(0, 0, 0, .72);
}
.programTimes__title {
    margin: 0 0 .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: .95rem;
    color: var(--accent-blue);
}
.programTimes .ten {
    line-height: 1.85;
}
/* =========================
   解説エリア
   ========================= */
.programNotes {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--accent-blue-soft);
}
.programNotes__title {
    margin: 0 0 1rem;
    font-weight: 800;
    letter-spacing: .1em;
    font-size: 1rem;
    color: var(--accent-blue);
}
/* =========================
   解説カード
   ========================= */
.programNotes__group {
    margin: 0 0 1rem;
    border: 1px solid var(--accent-blue-soft);
    border-left: 4px solid var(--accent-blue);
    border-radius: 14px;
    background: rgba(0, 0, 0, .78);
    overflow: hidden;
}
/* summary */
.programNotes__summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .03em;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: .95rem;
}
/* Safari marker消し */
.programNotes__summary::-webkit-details-marker {
    display: none;
}
/* ＋－記号を青に */
.programNotes__summary::after {
    content: "＋";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    font-size: 1rem;
    color: var(--accent-blue);
}
.programNotes__group[open] .programNotes__summary::after {
    content: "－";
}
/* 本文 */
.programNotes__group > p {
    margin: 0;
    padding: 1rem 1rem;
    line-height: 1.95;
    font-size: .95rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    word-break: break-word;
}
/* strong（曲タイトル）を少しだけ青寄りに */
.programNotes__group > p strong {
    color: var(--accent-blue);
    font-weight: 700;
}
/* =========================
   スマホ最適化
   ========================= */
@media (max-width:768px) {
    .programTimes {
        padding: .95rem;
    }
    .programNotes__summary {
        padding: .95rem;
        font-size: .92rem;
    }
    .programNotes__group > p {
        padding: .95rem;
        font-size: .92rem;
    }
}
/* =========================
   音光レインボートラッカー 試作の様子
   ========================= */
.rainbow-thumb {
    margin: 1rem auto 1.5rem;
    max-width: 240px; /* 小さめ */
}
.rainbow-thumb img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #64aaff;
    box-shadow: 0 0 8px rgba(100, 170, 255, .35);
}
.rainbow-thumb figcaption {
    margin: .4rem auto;
    text-align: center;
    font-size: .75rem;
    opacity: .7;
    letter-spacing: .05em;
}
.onko strong {
    color: var(--accent-blue);
}