/* ==========================================================
   未来亭WOWWOW モダンテーマ（ダーク＋ネオンブルーが基本。ライトモードは modern-light.css が色を上書きする）
   - style.css の後に読み込み、色・フォント・一部の見た目だけを上書きする
   - functions.php の WOWWOW_ENABLE_MODERN_THEME を false にすると、このファイルは読み込まれず元の見た目に戻る
   - 特設ページ（ビア怪談・やきとり一番）では読み込まない
   ========================================================== */

/* ---------- 色とフォント ---------- */
:root {
    --font: 'Zen Kaku Gothic New', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
    --font-display: 'Dela Gothic One', 'Zen Kaku Gothic New', sans-serif;
    --font-latin: 'Space Grotesk', 'Zen Kaku Gothic New', sans-serif;
    --accent: #3de0ff;
    /* ライトだった階調をダーク用に反転（n50が一番暗く、n900が一番明るい） */
    --n50:  #0f1014;
    --n100: #171a21;
    --n200: #232733;
    --n300: #343a4a;
    --n400: #6b7388;
    --n500: #8e96aa;
    --n600: #aeb5c6;
    --n700: #cfd4e0;
    --n800: #e8ebf2;
    --n900: #f5f7fb;
    --on-accent: #0f1014;
    --deep: #0a0b0e;
    --bg-dark: #090a0d;
    --bg-light: #1c212c;
}

/* セクションの背景は、線を使わず「濃い」と「やや明るい」を交互にして区切る */
.section--gray  { background: var(--bg-dark); --autofill-bg: var(--bg-dark); }
.section--white { background: var(--bg-light); --autofill-bg: var(--bg-light); }
.hero { background: var(--deep); }

/* ---------- セクションタイトル（左寄せ・太い見出しフォント） ---------- */
.section-head { text-align: left; margin-bottom: 2.2rem; }
.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 5vw, 2.7rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-bottom: 0.9rem;
}
.section-title__line { margin: 0; width: 3.5rem; height: 5px; border-radius: 3px; }

/* ---------- ヘッダー ---------- */
/* 「Official Website」だけ英字の大文字ラベル風にする（ロゴ本体は現行のまま） */
.site-header__logo-sub {
    font-family: var(--font-latin);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--accent);
    opacity: 1;
}

/* ---------- グローバルメニュー ---------- */
.menu-overlay,
body.wowwow-menu-open .site-header { background: var(--deep); }
.menu-overlay__nav {
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-left: clamp(20px, 5vw, 56px);
    padding-right: clamp(20px, 5vw, 56px);
}
.menu-overlay__menu { align-items: stretch; gap: 0; width: 100%; }
.menu-overlay__menu li { position: relative; border-bottom: 1px solid var(--n300); }
.menu-overlay__menu li:first-child { border-top: 1px solid var(--n300); }
.menu-overlay__menu a {
    display: flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    letter-spacing: 0.03em;
    padding: 0.9rem 0;
    color: var(--n900);
    transition: color 0.3s ease, transform 0.3s ease;
}
.menu-overlay__social { justify-content: flex-start; margin-top: 2rem; color: var(--n900); }

/* ライト／ダーク切り替えボタン：2つの選択肢が並び、今の表示モードの方が点灯する */
.theme-toggle {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 2rem;
    padding: 3px;
    border: 1px solid var(--n400);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-latin);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--n500);
}
.theme-toggle__option { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45rem 1.1rem; border-radius: 999px; transition: background 0.25s ease, color 0.25s ease; }
.theme-toggle__option svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }
html[data-theme="light"] .theme-toggle__option[data-theme-option="light"],
html[data-theme="dark"] .theme-toggle__option[data-theme-option="dark"] { background: var(--accent); color: var(--on-accent); }

/* PCのホバー：選んでいる項目だけ強調し、他は薄くする。文字が右へ動き、右端に矢印、下線が伸びる */
@media (hover: hover) and (pointer: fine) {
    .menu-overlay__menu li { transition: opacity 0.3s ease; }
    .menu-overlay__menu:hover li:not(:hover) { opacity: 0.3; }
    .menu-overlay__menu a:hover { color: var(--accent); transform: translateX(0.9rem); }
    .menu-overlay__menu a::after {
        content: "→";
        margin-left: auto;
        font-family: var(--font-latin);
        font-size: 1.3rem;
        color: var(--accent);
        opacity: 0;
        transform: translateX(-0.8rem);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .menu-overlay__menu li:hover a::after { opacity: 1; transform: translateX(0); }
    .menu-overlay__menu li::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }
    .menu-overlay__menu li:hover::before { transform: scaleX(1); }
}

/* ---------- ヒーロー：スクロールを促す表示（山形が順に流れ落ちる） ---------- */
.hero__scroll-cue {
    position: absolute;
    right: 1.25rem;
    bottom: 2.75rem;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-family: var(--font-latin);
    pointer-events: none;
}
@media (min-width: 768px) {
    .hero__scroll-cue { right: 3rem; }
}
.hero__scroll-cue-text {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    padding-left: 0.28em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.hero__scroll-cue-arrows { display: block; height: 44px; margin-top: 0.5rem; }
.hero__scroll-cue-arrows span {
    display: block;
    width: 16px;
    height: 16px;
    margin: -8px auto 0;
    border-right: 2.5px solid var(--accent);
    border-bottom: 2.5px solid var(--accent);
    opacity: 0;
    animation: hero-cue-chevron 1.8s ease-in-out infinite;
}
.hero__scroll-cue-arrows span:nth-child(1) { margin-top: 0; }
.hero__scroll-cue-arrows span:nth-child(2) { animation-delay: 0.25s; }
.hero__scroll-cue-arrows span:nth-child(3) { animation-delay: 0.5s; }
@keyframes hero-cue-chevron {
    0%   { opacity: 0; transform: translateY(-8px) rotate(45deg); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(10px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__scroll-cue-arrows span { animation: none; opacity: 1; transform: rotate(45deg); }
}

/* ---------- ヒーロー：「WOW!²」 ---------- */
.hero--wow2 .hero__overlay {
    background: linear-gradient(to top, rgba(10, 11, 14, 0.88) 0%, rgba(10, 11, 14, 0.35) 38%, rgba(0, 0, 0, 0.25) 100%);
}
.hx {
    --s: clamp(3rem, 11vw, 8.5rem);
    position: absolute;
    left: 1.25rem;
    bottom: 3.4rem;
    z-index: 5;
    max-width: calc(100% - 7rem);
    color: #fff;
    /* loading.js が is-visible を付けるとフェードインする */
    opacity: 0;
    transition: opacity 1s ease;
}
.hx.is-visible { opacity: 1; }
@media (min-width: 768px) {
    .hx { left: 3rem; }
}
@media (max-width: 767px) {
    .hx { --s: clamp(3rem, 17vw, 5.5rem); }
}
/* 読み上げ・検索エンジン向けの文字（画面には出さない） */
.hx__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* 肩書きは枠やラベルをやめ、アクセント色の文字を「WOW!」と同じ幅に均等割り付けする */
.hx__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* 自分の文字量でロゴの幅を広げず、「WOW!」と同じ幅に合わせる */
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.1rem;
    padding: 0 calc(var(--s) * 0.0327) 0 calc(var(--s) * 0.0284);
    font-family: var(--font);
    font-weight: 700;
    font-size: calc(var(--s) * 0.14);
    line-height: 1;
    color: var(--accent);
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hx__meta .hx__sep { font-weight: 400; opacity: 0.55; }
@media (max-width: 767px) {
    .hx__meta { font-size: calc(var(--s) * 0.17); padding: 0 calc(var(--s) * 0.0317) 0 calc(var(--s) * 0.0259); }
}
.hx__name { margin: 0; line-height: 1; }
/* ロゴの幅は「WOW!」の文字幅（約3.37倍）に固定する。端末ごとの幅の計算の違いに左右されず、肩書き・サブ表記を同じ幅に揃えるため */
.hx__logo { display: block; width: calc(var(--s) * 3.371); }
/* 「WOW!」と、右上の小さな「2」（WOWの2乗） */
.hx__en {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--s);
    letter-spacing: 0.01em;
    line-height: 0.8;
    color: #fff;
}
/* 「!」だけ背が高いため、少し小さくして「WOW」と上下を揃える */
.hx__en .ex { font-size: 0.9em; position: relative; top: -0.015em; }
.hx__en sup {
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0.02em 0 0 0.04em;
    font-size: 0.5em;
    line-height: 1;
    color: var(--accent);
}
/* 下の「未来亭WOWWOW OFFICIAL WEBSITE」は「WOW!」と同じ幅に均等割り付け */
.hx__sub {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* 自分の文字量でロゴの幅を広げず、「WOW!」と同じ幅に合わせる */
    width: 100%;
    box-sizing: border-box;
    margin: 0.6rem 0 0;
    padding: 0 calc(var(--s) * 0.0316) 0 calc(var(--s) * 0.037);
    font-family: var(--font);
    font-weight: 700;
    font-size: calc(var(--s) * 0.15);
    line-height: 1;
    white-space: nowrap;
}
.hx__sub .hx__sub-row { display: contents; }
.hx__sub i { display: block; width: 0.9em; }
/* スマホは2行（未来亭WOWWOW／OFFICIAL WEBSITE）に分け、それぞれ同じ幅に均等割り付け */
@media (max-width: 767px) {
    .hx__sub { flex-direction: column; align-items: stretch; gap: 0.5em; font-size: calc(var(--s) * 0.2); padding: 0; }
    .hx__sub .hx__sub-row { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; }
    .hx__sub .hx__sub-row:first-child { padding: 0 calc(var(--s) * 0.033) 0 calc(var(--s) * 0.036); }
    .hx__sub .hx__sub-row:last-child { padding: 0 calc(var(--s) * 0.0298) 0 calc(var(--s) * 0.0328); }
    .hx__sub > i { display: none; }
    .hx__sub .hx__sub-row i { width: 0.7em; }
}

/* ---------- お知らせ・公演リスト（左バーは使わない） ---------- */
#live .live-list__item,
#news .news-list__item { position: relative; border: 0; border-top: 1px solid var(--n300); }
/* 公演は月ごとにリストが分かれているため、最後の下線は「いま表示中の最後の公演」（JSが is-list-end を付ける）だけにして、月の境目で線が重ならないようにする */
#live .live-list__item.is-list-end,
#news .news-list__item:last-child { border-bottom: 1px solid var(--n300); }
#live .live-list__inner { padding: 1.1rem 3rem 1.1rem 0; }
#news .news-list__item { padding: 0.8rem 3rem 0.8rem 0; }
#live .live-list__date,
#news .news-list__date {
    font-family: var(--font-latin);
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
    letter-spacing: 0.04em;
}
#live .live-list__date { min-width: 10.5rem; }
#news .news-list__date { min-width: 9rem; }
/* タイトルが折り返したとき、行間が広く空かないようにする */
#live .live-list__title { --fs: 1.2rem; font-size: var(--fs); font-weight: 700; line-height: 1.4; align-items: flex-start; }
#live .live-list__title-text { line-height: 1.4; }
/* 県名ラベル：枠線つきで見やすくし、タイトル1行目と同じ高さの中で上下中央に揃える */
#live .live-list__area {
    display: inline-flex;
    align-items: center;
    height: calc(var(--fs) * 1.4);
    padding: 0 0.6rem;
    line-height: 1;
    font-weight: 700;
    color: var(--accent);
    background: rgba(61, 224, 255, 0.14);
    border: 1px solid rgba(61, 224, 255, 0.55);
    border-radius: 0.25rem;
    vertical-align: baseline;
    /* タイトルの文字の中心が箱の中心よりわずかに下にあるため、1pxほど下げて見た目の中央に合わせる */
    margin-top: 0.06rem;
}
/* 都道府県ごとの色（--area-hue はPHPから渡される。無い場合は上の既定色のまま） */
#live .live-list__area[style*="--area-hue"] {
    color: hsl(var(--area-hue) var(--area-s) var(--area-l));
    background: hsl(var(--area-hue) var(--area-s) var(--area-l) / 0.14);
    border-color: hsl(var(--area-hue) var(--area-s) var(--area-l) / 0.55);
}
#news .news-list__title { font-size: 1.2rem; font-weight: 700; line-height: 1.5; }
#live .live-list__meta { color: var(--n500); }
#news .news-list__item--clickable .news-list__title-text { text-decoration: none; }
/* 右端の丸い矢印 */
#live .live-list__item::after,
#news .news-list__item--clickable::after {
    content: "→";
    position: absolute;
    inset: auto 0 auto auto;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--n400);
    border-radius: 50%;
    background: transparent;
    font-size: 1rem;
    color: var(--n800);
    transition: all 0.25s ease;
    pointer-events: none;
}
#live .live-list__inner,
#news .news-list__date,
#news .news-list__title { transition: transform 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
    /* 動かすのは幅が変わらないtransformで行い、文字が折り返さないようにする */
    #live .live-list__item:hover { background: transparent; }
    #live .live-list__item:hover .live-list__inner,
    #news .news-list__item--clickable:hover .news-list__date,
    #news .news-list__item--clickable:hover .news-list__title { transform: translateX(0.5rem); }
    #live .live-list__item:hover::after,
    #news .news-list__item--clickable:hover::after { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
    #live .live-list__item:hover .live-list__title-text,
    #news .news-list__item--clickable:hover .news-list__title-text { color: var(--accent); }
}
/* 月の絞り込みタブ */
.live-list__tab { background: transparent; color: var(--n700); border-color: var(--n400); }
.live-list__tab.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
    .live-list__tab:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
}

/* ---------- ピックアップ・プロフィールなどの画像 ---------- */
.featured-live__thumb,
.featured-live__thumb img { border-radius: 14px; }

/* ---------- 出演実績（WORKS） ---------- */
#history .history-group__heading {
    font-family: var(--font-latin);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    margin: 3rem 0 0.9rem;
}
#history .history-group__heading:first-of-type { margin-top: 0; }
#history .news-list__items { border-top: 1px solid var(--n300); }
#history .news-list__item {
    border: 0;
    border-bottom: 1px solid var(--n300);
    padding: 0.7rem 2.2rem 0.7rem 0;
    align-items: center;
    gap: 1.2rem;
}
#history .news-list__items--compact .news-list__date {
    font-family: var(--font-latin);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--n500);
    min-width: 4.6rem;
}
#history .news-list__items--compact .news-list__title { font-size: 0.9rem; font-weight: 500; align-items: flex-start; gap: 0.6rem; }
#history .news-list__title-text { line-height: 1.5; }
#history .news-list__item--clickable .news-list__title-text { text-decoration: none; }
/* ラベルは出演情報の県名ラベルと同じ形（枠線＋薄い色の塗り＋角丸）。色はカテゴリーごと。タイトル1行目と同じ高さで上下中央に揃える */
#history .live-list__area {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.6rem;
    line-height: 1;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
    border-radius: 0.25rem;
    vertical-align: baseline;
}
/* ダーク背景で読めるようラベル色を明るくする */
#history .live-list__area--radio   { color: #f0b074; }
#history .live-list__area--tv      { color: #c4a0f5; }
#history .live-list__area--mc      { color: #6fe0a8; }
#history .live-list__area--lecture { color: #f58cbc; }
#history .live-list__area--rakugo  { color: var(--accent); }
/* リンクありの行は右端に小さな矢印 */
#history .news-list__item--clickable::after {
    content: "↗";
    position: absolute;
    inset: auto 0 auto auto;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    background: transparent;
    font-size: 1.1rem;
    color: var(--n500);
    transition: color 0.25s;
}
#history .news-list__date,
#history .news-list__title { transition: transform 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
    #history .news-list__item--clickable:hover .news-list__date,
    #history .news-list__item--clickable:hover .news-list__title { transform: translateX(0.5rem); }
    #history .news-list__item--clickable:hover::after { background: transparent; color: var(--accent); }
    #history .news-list__item--clickable:hover .news-list__title-text { color: var(--accent); }
}
/* 「すべて表示」ボタン */
.history-group__toggle {
    background: transparent;
    border: 1px solid var(--n400);
    border-radius: 999px;
    margin: 1.2rem 0 0;
    padding: 0.45rem 1.6rem;
    color: var(--n700);
}
@media (hover: hover) and (pointer: fine) {
    .history-group__toggle:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
}

/* ---------- お問い合わせ・フォーム ---------- */
.contact-form { margin: 0; }
/* 左：ご依頼のご案内／右：フォーム（スマホは案内が上、フォームが下） */
.contact-layout { display: grid; gap: 2rem; }
.contact-layout .contact-form { max-width: none; }
@media (min-width: 768px) {
    .contact-layout { grid-template-columns: 5fr 6fr; }
}
/* 案内とフォームの区切り線：PCは右側に縦線、スマホは下側に横線（アクセントカラー） */
.contact-info::after { content: ""; display: block; width: 8rem; height: 1px; margin: 2rem auto 0; background: var(--accent); }
@media (min-width: 768px) {
    .contact-info { border-right: 1px solid var(--accent); padding-right: 2rem; }
    .contact-info::after { display: none; }
}
.contact-info__title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; line-height: 1.5; color: var(--n900); }
.contact-info__text { margin: 0 0 1.2rem; line-height: 2; color: var(--n800); }
.contact-info__note { margin: 0; font-size: 0.85rem; line-height: 1.9; color: var(--n600); }
.form-label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; color: var(--n700); }
.form-input,
.form-textarea {
    color: var(--n900);
    border-bottom: 1.5px solid var(--n400);
    padding: 0.7rem 0;
    font-size: 1.05rem;
    caret-color: var(--accent);
}
.form-input:focus,
.form-textarea:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
/* ブラウザの自動入力で入力欄が白・黄色くなるのを防ぐ（背景色と文字色を固定する） */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--n900);
    caret-color: var(--accent);
    -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg, var(--n50)) inset;
    box-shadow: 0 0 0 1000px var(--autofill-bg, var(--n50)) inset;
    transition: background-color 9999s ease-in-out 0s;
}
.form-input:autofill {
    -webkit-text-fill-color: var(--n900);
    box-shadow: 0 0 0 1000px var(--autofill-bg, var(--n50)) inset;
}

/* ---------- ボタン（すべて丸い形に統一） ---------- */
.btn-submit,
.live-detail__link-btn {
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
@media (hover: hover) and (pointer: fine) {
    .btn-submit:hover,
    .live-detail__link-btn:hover { background: var(--n900); color: var(--on-accent); }
}

/* ---------- 詳細ページ（お知らせ・公演・過去の出演） ---------- */
/* タイトルは太いゴシック。上に英字の小さなラベル（LIVE / NEWS / WORKS）を添える */
.detail-page__title {
    font-family: var(--font);
    font-weight: 900;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.35;
    letter-spacing: 0.02em;
}
.detail-page__title::before {
    display: block;
    margin-bottom: 0.7rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    color: var(--accent);
}
body.single-live .detail-page__title::before    { content: "LIVE"; }
body.single-news .detail-page__title::before    { content: "NEWS"; }
body.single-history .detail-page__title::before { content: "WORKS"; }
.detail-page__date { font-family: var(--font-latin); font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.detail-page__info dt { color: var(--accent); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; }
.detail-page__info dd { color: var(--n800); }
.detail-page hr,
.detail-page__body hr { border: 0; border-top: 1px solid var(--n300); }
/* 公演ページ：コメントの直後に外部リンクのボタンが無いときは、ボタン分の下の余白をなくす */
.detail-page__comment:last-child { margin-bottom: 0; }
/* 公演ページ：情報欄の後にコメントもリンクも無いときは、下の区切り線と余白をなくす */
.detail-page__info:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* ---------- フッター ---------- */
.site-footer { background: var(--bg-light); color: var(--n800); }

/* ---------- スマホ向けの調整 ---------- */
/* ヘッダー：狭い画面では「OFFICIAL WEBSITE」をロゴの下に小さく置き、ハンバーガーメニューと重ならないようにする */
@media (max-width: 480px) {
    .site-header__logo-text { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
    .site-header__logo-main { line-height: 1.15; }
    .site-header__logo-sub { display: block; font-size: 0.66rem; letter-spacing: 0.16em; line-height: 1; }
}
@media (max-width: 380px) {
    .site-header__logo-sub { display: block; }
}

/* ヒーロー：「WOW!²」とその下の行の間を詰める */
.hx__sub { margin-top: 0.3rem; }
@media (max-width: 767px) {
    .hx__sub { gap: 0.3em; }
}

/* ホバーのないスマホ・タブレットでは、リンクの矢印を常にゆっくり動かして「押せる」ことを伝える */
@media (hover: none) {
    #live .live-list__item::after,
    #news .news-list__item--clickable::after { animation: wowwow-arrow-nudge 1.8s ease-in-out infinite; }
    #history .news-list__item--clickable::after { animation: wowwow-arrow-nudge-diag 1.8s ease-in-out infinite; }
}
@keyframes wowwow-arrow-nudge {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(5px); }
}
@keyframes wowwow-arrow-nudge-diag {
    0%, 100% { transform: translateY(-50%) translate(0, 0); }
    50%      { transform: translateY(-50%) translate(3px, -3px); }
}
@media (prefers-reduced-motion: reduce) {
    #live .live-list__item::after,
    #news .news-list__item--clickable::after,
    #history .news-list__item--clickable::after { animation: none; }
}

/* ---------- 公演詳細の予約フォーム・TICKET見出しは中央揃えに戻す ---------- */
.live-reservation .section-head { text-align: center; }
.live-reservation .section-title__line { margin: 0 auto; }
.live-reservation .contact-form { margin: 0 auto; }
.live-reservation .form-label { text-align: left; }

/* ---------- スマホの出演情報リスト：タイトルだけ小さく ---------- */
@media (max-width: 639px) {
    #live .live-list__title { --fs: 1.05rem; }
    #news .news-list__title { font-size: 1.05rem; }
}

/* ---------- 公演詳細：プレイガイドのリンクボタンも中央揃え ---------- */
.live-reservation .live-detail__links { justify-content: center; }

/* ---------- スマホのWORKS：年とラベルの余白を詰めて、タイトルの表示領域を広げる ---------- */
@media (max-width: 639px) {
    #history .news-list__item { gap: 0.6rem; padding-right: 1.8rem; align-items: flex-start; }
    #history .news-list__items--compact .news-list__date { font-size: 0.8rem; min-width: 3rem; line-height: 1.9; }
}

/* ---------- スマホのお知らせ：日付とタイトルの間（行間）を詰める ---------- */
@media (max-width: 639px) {
    #news .news-list__item { gap: 0.2rem; }
    #news .news-list__date { line-height: 1.4; }
}

/* PCだけ：肩書きと「WOW!²」の間をさらに詰める（「WOW!」の文字の上の余白に少し重ねる） */
@media (min-width: 768px) {
    .hx__meta { margin-bottom: -0.35rem; }
}

/* 肩書きの上のキャッチコピー：アクセント色の角丸を文字でくり抜く（幅は「WOW!」と同じ。PC用とスマホ用のSVGを出し分ける） */
.hx__catch { margin: 0 0 0.5rem; line-height: 0; }
.hx__catch svg { display: block; width: 100%; height: auto; }
.hx__catch-sp { display: none !important; }
.hx__catch rect { fill: var(--accent); }
/* マスク内の四角は白に固定する。ここにもアクセント色が塗られると、明るさ分だけマスクが半透明になり、囲みが透けてしまう（白＝完全に表示） */
.hx__catch mask rect { fill: #fff; }
.hx__catch text { font-family: var(--font); font-weight: 700; font-size: 1px; }
@media (max-width: 767px) {
    .hx__catch-pc { display: none !important; }
    .hx__catch-sp { display: block !important; }
}

/* ---------- ローディング画面（文字全体がローディングバーになる） ---------- */
/* 白い文字の上に、アクセント色（ダークは水色、ライトは赤）の同じ文字を重ね、実際の読み込みの進み具合（--ld-progress: 0〜1）に合わせて左から現れさせる */
.loading-screen--modern { background: var(--deep); }
.ld {
    --s: clamp(3rem, 13vw, 9rem);
    position: relative;
    width: calc(var(--s) * 3.371);
}
.ld__layer { width: 100%; }
.ld__logo {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--s);
    line-height: 0.8;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.ld__logo sup {
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0.02em 0 0 0.04em;
    font-size: 0.5em;
    line-height: 1;
}
.ld__name {
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    margin: 1rem 0 0;
    padding: 0 calc(var(--s) * 0.0316) 0 calc(var(--s) * 0.037);
    font-family: var(--font);
    font-weight: 700;
    font-size: calc(var(--s) * 0.15);
    line-height: 1;
}
.ld__layer--base { color: #fff; opacity: 0; transition: opacity 0.5s ease; }
.loading-screen--modern.is-ready .ld__layer--base { opacity: 1; }
.ld__layer--fill {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    /* 右側の切り取り量を、進み具合に合わせて 100%（何も見えない）→ -30%（右上の「2」まで全部見える）にする */
    clip-path: inset(-20% calc(100% - 130% * var(--ld-progress, 0)) -20% 0);
}
/* 完了後は白い下の層を消して、文字の縁に白がにじまないようにする */
.loading-screen--modern.is-complete .ld__layer--base { opacity: 0; transition: none; }

/* スマホ：ローディングの「WOW!²」と「未来亭WOWWOW」の間（行間）を詰める */
@media (max-width: 767px) {
    .ld__name { margin-top: 0.3rem; }
}

/* ---------- フッター：ロゴ画像の代わりに「WOW!²」の文字 ---------- */
.site-footer__wordmark {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0 0 0.8rem;
}
.site-footer__wordmark sup {
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0.02em 0 0 0.04em;
    font-size: 0.5em;
    line-height: 1;
    color: var(--accent);
}

/* スマホ：ローディングの文字をもっと大きくする（画面幅の約85%まで使う） */
@media (max-width: 767px) {
    .ld { --s: 16vw; }
    /* 小さな「2」は枠の外にはみ出すため、枠をそのまま中央に置くと右寄りに見える。完全に「2」込みで中央に合わせる量（0.24s）だと左寄りに見えるので、その半分だけ左へずらして見た目の中間にする（スマホのみ。調整はこの数値で） */
    .ld { transform: translateX(calc(var(--s) * -0.12)); }
    .ld__name { margin-top: 0.4rem; font-size: calc(var(--s) * 0.2); }
}

/* ---------- 詳細ページ（お知らせ・公演・過去の出演）は背景を濃い色にして、明るいフッターとの差をつける ---------- */
.section--white.detail-page { background: var(--bg-dark); --autofill-bg: var(--bg-dark); }
.live-reservation__target-title { background: var(--bg-light); }
/* 詳細ページで内容が短いとき、本文の下に見える余白も同じ濃い背景にする（色の段差を出さない） */
body.single .site-main { background: var(--bg-dark); }

/* ---------- ヘッダー：明るい方の背景色（フッターと同じ）のすりガラス＋下端の薄い影（線は使わない） ---------- */
.site-header {
    background: rgba(28, 33, 44, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: transparent;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.55);
}
/* トップページのヒーローの上では、これまで通り透明（影も出さない） */
body.has-hero .site-header:not(.is-scrolled) { box-shadow: none; }
/* メニューを開いている間は、濃い背景のまま、影は出さない */
body.wowwow-menu-open .site-header { box-shadow: none; }