/* =====================================================================
   CELEBRATION OF LIFE 2026 ── Stage Theme
   PDF (大阪公演 2026/11/26-29) のキービジュアルに合わせた配色レイヤー。
   qt-main.css の後に読み込まれ、必要部分のみ上書きします。
   ===================================================================== */

:root {
    /* Base palette — derived from the PDF key visual */
    --col-bg-deep:   #0b0418;   /* 最暗部（外周）       */
    --col-bg:        #160830;   /* 主背景                */
    --col-bg-soft:   #261148;   /* セクションコントラスト */
    --col-violet:    #4a1f7a;   /* スポットライト紫     */
    --col-magenta:   #d946ef;   /* マゼンタアクセント   */
    --col-gold:      #d4af37;   /* シャンパンゴールド   */
    --col-gold-soft: #e6c463;
    --col-gold-hi:   #f4d97f;
    --col-yellow:    #facc15;   /* 日付ハイライト       */
    --col-cream:     #f5f0d8;   /* 見出しのオフホワイト */
    --col-text:      #efe7f5;
    --col-text-mute: #b9aecb;
    --col-line:      rgba(212, 175, 55, 0.35);

    /* Typography
       Web フォントは Cinzel と Noto Serif JP のみを Google Fonts からロード。
       本文系（jp-sans / en）はシステムフォントを利用して通信量を削減 */
    --ff-jp-sans:  -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
    --ff-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
    --ff-en-deco:  "Cinzel", "Playfair Display", "Bodoni Moda", "Times New Roman", serif;
    --ff-en:       -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;

    /* Layout tokens */
    --shadow-glow: 0 0 32px rgba(217, 70, 239, 0.35), 0 0 80px rgba(74, 31, 122, 0.55);
    --radius:      14px;
}

/* ----------------------------------------------------------------
   Global base
---------------------------------------------------------------- */
html, body {
    background: var(--col-bg-deep);
    color: var(--col-text);
    font-family: var(--ff-jp-sans);
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    line-height: 1.8;
    overflow-x: hidden;
}

body {
    background:
      radial-gradient(ellipse at 18% 12%, rgba(217, 70, 239, 0.18), transparent 55%),
      radial-gradient(ellipse at 80% 6%,  rgba(74, 31, 122, 0.55), transparent 60%),
      radial-gradient(ellipse at 50% 100%, rgba(38, 17, 72, 0.9), transparent 70%),
      var(--col-bg-deep);
    background-attachment: fixed;
}

a { color: var(--col-gold-hi); }
a:hover { color: var(--col-yellow); }

/* Reusable starfield — applied to sections that want sparkle.
   Pairs with the particles.js canvas (.qt-particles) for a layered effect. */
.col-starfield {
    position: relative;
    overflow: hidden;
}
.col-starfield::before,
.col-starfield::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
}
.col-starfield::before {
    background-image:
      radial-gradient(1.4px 1.4px at 6% 8%,   rgba(255,255,255,0.95), transparent 60%),
      radial-gradient(1px 1px     at 14% 28%, rgba(255,255,255,0.85), transparent 60%),
      radial-gradient(1.6px 1.6px at 22% 64%, rgba(255,255,255,0.95), transparent 60%),
      radial-gradient(1.1px 1.1px at 31% 14%, rgba(255,255,255,0.8), transparent 60%),
      radial-gradient(1.4px 1.4px at 38% 48%, rgba(255,255,255,0.85), transparent 60%),
      radial-gradient(1px 1px     at 46% 86%, rgba(255,255,255,0.75), transparent 60%),
      radial-gradient(1.6px 1.6px at 54% 24%, rgba(255,255,255,0.95), transparent 60%),
      radial-gradient(1.1px 1.1px at 62% 70%, rgba(255,255,255,0.8), transparent 60%),
      radial-gradient(1.3px 1.3px at 70% 8%,  rgba(255,255,255,0.85), transparent 60%),
      radial-gradient(1px 1px     at 78% 52%, rgba(255,255,255,0.7), transparent 60%),
      radial-gradient(1.5px 1.5px at 86% 30%, rgba(255,255,255,0.95), transparent 60%),
      radial-gradient(1.2px 1.2px at 94% 76%, rgba(255,255,255,0.85), transparent 60%);
    animation: col-twinkle-a 5s ease-in-out infinite alternate;
}
.col-starfield::after {
    background-image:
      radial-gradient(1.2px 1.2px at 9%  56%, rgba(244,217,127,0.85), transparent 60%),
      radial-gradient(1px 1px     at 19% 18%, rgba(244,217,127,0.7), transparent 60%),
      radial-gradient(1.4px 1.4px at 27% 88%, rgba(244,217,127,0.85), transparent 60%),
      radial-gradient(1px 1px     at 36% 32%, rgba(244,217,127,0.65), transparent 60%),
      radial-gradient(1.6px 1.6px at 49% 60%, rgba(244,217,127,0.95), transparent 60%),
      radial-gradient(1.1px 1.1px at 58% 12%, rgba(244,217,127,0.75), transparent 60%),
      radial-gradient(1.3px 1.3px at 67% 78%, rgba(217,70,239,0.6), transparent 60%),
      radial-gradient(1px 1px     at 76% 38%, rgba(244,217,127,0.7), transparent 60%),
      radial-gradient(1.5px 1.5px at 84% 64%, rgba(244,217,127,0.85), transparent 60%),
      radial-gradient(1.2px 1.2px at 92% 16%, rgba(217,70,239,0.55), transparent 60%);
    animation: col-twinkle-b 7s ease-in-out infinite alternate;
}
@keyframes col-twinkle-a {
    from { opacity: 0.55; transform: translateY(0); }
    to   { opacity: 1;    transform: translateY(-8px); }
}
@keyframes col-twinkle-b {
    from { opacity: 0.4;  transform: translateY(0) scale(1); }
    to   { opacity: 0.95; transform: translateY(6px) scale(1.05); }
}

/* Particles.js canvas overlay */
.qt-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.qt-particles canvas {
    display: block;
}
/* Make sure section content sits above particles */
.col-hero__inner,
.col-container,
.section .col-container {
    position: relative;
    z-index: 2;
}

/* ----------------------------------------------------------------
   Utility wrappers
---------------------------------------------------------------- */
.col-section {
    position: relative;
    padding: clamp(60px, 8vw, 120px) 0;
    z-index: 1;
}
.col-section--alt {
    background:
      linear-gradient(180deg, rgba(11, 4, 24, 0) 0%, rgba(38, 17, 72, 0.55) 50%, rgba(11, 4, 24, 0) 100%);
}
.col-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
    position: relative;
}
.col-eyebrow {
    display: inline-block;
    font-family: var(--ff-en-deco);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: clamp(11px, 1.6vw, 13px);
    color: var(--col-gold-hi);
    margin-bottom: 18px;
}
.col-eyebrow::before,
.col-eyebrow::after {
    content: "✦";
    margin: 0 0.7em;
    color: var(--col-gold);
    opacity: 0.7;
}

/* ----------------------------------------------------------------
   Headings — section title
---------------------------------------------------------------- */
.qt-section-title,
.col-h2 {
    font-family: var(--ff-jp-serif);
    font-weight: 700;
    color: var(--col-cream) !important;
    text-align: center;
    font-size: clamp(28px, 4.4vw, 44px);
    letter-spacing: 0.08em;
    margin: 0 0 0.7em;
    position: relative;
    text-shadow: 0 2px 24px rgba(217, 70, 239, 0.35);
}
.qt-section-title .deco,
.col-h2 .deco {
    display: block;
    margin: 14px auto 0;
    width: 140px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--col-gold) 50%, transparent);
    border: none;
    position: relative;
}
.qt-section-title .deco::after,
.col-h2 .deco::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--col-gold);
    box-shadow: 0 0 12px var(--col-gold-hi);
}

/* ----------------------------------------------------------------
   Header / Hero — symmetric, center-aligned, dynamic
---------------------------------------------------------------- */
.col-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    color: var(--col-text);
    background: var(--col-bg-deep);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

/* Layered backgrounds */
.col-hero__bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 5%, rgba(217, 70, 239, 0.4), transparent 50%),
      radial-gradient(ellipse at 18% 30%, rgba(74, 31, 122, 0.7), transparent 55%),
      radial-gradient(ellipse at 82% 30%, rgba(74, 31, 122, 0.7), transparent 55%),
      radial-gradient(ellipse at 50% 100%, rgba(11, 4, 24, 1) 30%, transparent 80%),
      linear-gradient(180deg, #1a0a30 0%, #0b0418 100%);
    z-index: -3;
}

/* Symmetric stage spotlight beams (left + right) */
.col-hero__bg::before,
.col-hero__bg::after {
    content: "";
    position: absolute;
    top: -12%;
    width: 70%;
    height: 130%;
    pointer-events: none;
    z-index: -1;
    filter: blur(6px);
    opacity: 0.9;
    transform-origin: top center;
    animation: col-spotlight 8s ease-in-out infinite alternate;
}
.col-hero__bg::before {
    left: -10%;
    background: conic-gradient(from 175deg at 50% 0%,
        transparent 0deg,
        rgba(217, 70, 239, 0.22) 4deg,
        rgba(244, 217, 127, 0.16) 12deg,
        transparent 22deg);
}
.col-hero__bg::after {
    right: -10%;
    background: conic-gradient(from 165deg at 50% 0%,
        transparent 0deg,
        rgba(244, 217, 127, 0.16) 8deg,
        rgba(217, 70, 239, 0.22) 18deg,
        transparent 26deg);
    animation-delay: -4s;
}
@keyframes col-spotlight {
    0%   { transform: rotate(-3deg); opacity: 0.7; }
    50%  { transform: rotate(0deg);  opacity: 1; }
    100% { transform: rotate(3deg);  opacity: 0.8; }
}

/* Stage photo behind, dimmed */
.col-hero__photo {
    position: absolute;
    inset: 0;
    /* 浮遊イリュージョンの実演ステージ写真（前回大阪公演より） */
    background-image: url("../images/2026_hero_stage.jpg");
    background-image: -webkit-image-set(url("../images/2026_hero_stage.webp") type("image/webp"), url("../images/2026_hero_stage.jpg") type("image/jpeg"));
    background-image: image-set(url("../images/2026_hero_stage.webp") type("image/webp"), url("../images/2026_hero_stage.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center 35%;
    opacity: 0.45;
    z-index: -2;
    mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 90%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 90%);
}

/* 3-column symmetric layout: side photo | center stack | side photo */
.col-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: clamp(50px, 7vh, 90px) clamp(16px, 3vw, 40px) clamp(28px, 4vh, 50px);
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 820px) minmax(220px, 1fr);
    align-items: center;
    gap: clamp(0px, 2vw, 28px);
}

/* Side performer photos (Lawrence / Priscilla) */
.col-hero__side {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.2vw, 16px);
}
/* ----------------------------------------------------------------
   サイド肖像 — 劇場スポットライト風の演出
   背景は黒の被写体写真前提。アーチ枠を廃して、被写体のみが
   舞台上で照らされているように見せる。
---------------------------------------------------------------- */
.col-hero__side img {
    width: auto;
    max-width: 100%;
    /* 縦の高さを上限制限。アスペクト比は維持されるため横潰れしない。
       両画像がアスペクト比 720:1200 で揃っている前提で、左右が同じ縦サイズに揃う */
    max-height: clamp(360px, 56vh, 560px);
    height: auto;
    /* mask-image は drop-shadow と組み合わさって四角いハローを発生させるため不採用 */
    /* 切り抜きキャラなので、フレーム/マスク不要。立体感のドロップシャドウのみ */
    filter:
        saturate(1.02)
        contrast(1.04)
        drop-shadow(0 28px 32px rgba(0,0,0,0.55))
        drop-shadow(0 0 50px rgba(74, 31, 122, 0.55))
        drop-shadow(0 0 14px rgba(244, 217, 127, 0.18));
    animation: col-float 6s ease-in-out infinite alternate;
}

/* ステージ照明：頭上のスポットライト + 床面の光プール
   切り抜き2人を「劇場のステージに立つ俳優」として演出する装飾レイヤー */
.col-hero__side {
    isolation: isolate;
}
/* 上から降り注ぐスポットライトの光柱 */
.col-hero__side::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 88%;
    background:
        radial-gradient(ellipse 38% 92% at 50% 0%,
            rgba(244, 217, 127, 0.42) 0%,
            rgba(244, 217, 127, 0.18) 22%,
            rgba(217, 70, 239, 0.12) 50%,
            transparent 80%);
    pointer-events: none;
    z-index: -1;
    filter: blur(10px);
}
/* 足元の光プール — 円形の床光、被写体が「乗っている」ステージ */
.col-hero__side::after {
    content: "";
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 22%;
    background:
        radial-gradient(ellipse 48% 90% at 50% 60%,
            rgba(244, 217, 127, 0.38) 0%,
            rgba(217, 70, 239, 0.32) 28%,
            rgba(74, 31, 122, 0.22) 55%,
            transparent 80%);
    pointer-events: none;
    z-index: -1;
    filter: blur(14px);
}

/* ネームプレート — 古き良き劇場ポスター風（画像の真下に） */
.col-hero__name {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--col-cream);
    font-family: var(--ff-en-deco);
    font-size: clamp(13px, 1.05vw, 17px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 8px clamp(14px, 1.6vw, 22px) 9px;
    background: linear-gradient(180deg, rgba(11, 4, 24, 0.85), rgba(11, 4, 24, 0.95));
    border: 1px solid rgba(212, 175, 55, 0.55);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(74, 31, 122, 0.55),
        inset 0 1px 0 rgba(244, 217, 127, 0.18);
    border-radius: 2px;
}
.col-hero__name::before,
.col-hero__name::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
}
.col-hero__name::before { right: 100%; margin-right: 6px; }
.col-hero__name::after  { left: 100%;  margin-left:  6px; }
.col-hero__name small {
    display: block;
    font-size: 0.62em;
    color: var(--col-gold-soft);
    letter-spacing: 0.36em;
    margin-bottom: 2px;
    opacity: 0.85;
}

/* ネームプレートはスマホでは非表示（ヒーロー縮小のため） */
@media (max-width: 950px) {
    .col-hero__name { display: none; }
}
.col-hero__side--left img {
    object-position: 45% 25%;
    transform: rotate(-2deg);
}
.col-hero__side--right img {
    object-position: 55% 30%;
    transform: rotate(2deg);
    transform-origin: bottom center;
    animation-delay: -3s;
}
@keyframes col-float {
    from { transform: translateY(0) rotate(var(--rot, 0deg)); }
    to   { transform: translateY(-12px) rotate(var(--rot, 0deg)); }
}
.col-hero__side--left img  { --rot: -2deg; }
.col-hero__side--right img { --rot:  2deg; }

/* Center column */
.col-hero__center {
    display: grid;
    gap: clamp(10px, 1.4vw, 16px);
    justify-items: center;
    text-align: center;
    align-self: start; /* ブランド行を上端へ寄せ、タイトル前に意図的な余白を作る */
    animation: col-fadeup 1.2s ease-out both;
}
@keyframes col-fadeup {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.col-hero__brand {
    display: inline-flex;
    align-items: center;
    /* 折返し時の縦余白を控えめに（行間 4px / 列間 12px） */
    gap: 4px 12px;
    font-family: var(--ff-en-deco);
    letter-spacing: 0.22em;
    color: var(--col-gold-hi);
    font-size: clamp(10px, 1.4vw, 12px);
    text-transform: uppercase;
    flex-wrap: wrap;
    justify-content: center;
}
.col-hero__brand strong {
    background: linear-gradient(135deg, #ff3b6b 0%, #c026d3 100%);
    color: #fff;
    padding: 4px 10px 3px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    font-family: var(--ff-en);
    font-weight: 800;
}
/* ブランド行のロゴ画像（FCBC / Gateway 共通の振る舞い） */
.col-hero__brand-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.col-hero__brand-logo img {
    width: auto;
    display: block;
}
/* FCBC ロゴ（赤いハート＋FCBC） */
.col-hero__brand-logo--fcbc img {
    height: clamp(13px, 1.3vw, 17px);
}
/* Gateway Entertainment ロゴ */
.col-hero__brand-logo--gateway img {
    height: clamp(18px, 1.9vw, 26px);
}

.col-hero__title {
    font-family: var(--ff-jp-serif);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 0.04em;
    /* アンコール公演バッジから余白を開けてからタイトル */
    margin: clamp(36px, 7vh, 100px) 0 0;
    font-size: clamp(40px, 6.4vw, 88px);
    background: linear-gradient(180deg, #f4d97f 0%, #d4af37 55%, #a07a18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 38px rgba(217, 70, 239, 0.35);
    text-align: center;
    white-space: nowrap;
}
.col-hero__title small {
    display: block;
    font-size: 0.32em;
    color: var(--col-cream);
    background: none;
    -webkit-text-fill-color: var(--col-cream);
    letter-spacing: 0.22em;
    margin-top: 0.7em;
    font-weight: 500;
    font-family: var(--ff-en-deco);
    text-transform: uppercase;
    white-space: normal;
}
@media (max-width: 600px) {
    .col-hero__title { white-space: normal; }
    /* スマホでは brand 行のロゴ・テキストを一回り大きくして全幅まで広げる */
    .col-hero__brand {
        display: flex;
        width: 100%;
        max-width: 100%;
        font-size: 13px;
        gap: 6px 14px;
    }
    .col-hero__brand-logo--fcbc img {
        height: 17px;
    }
    .col-hero__brand-logo--gateway img {
        height: 24px;
    }
    /* スマホでは各セクションの外余白をギャラリーと同じ 16px に統一 */
    .section.section-bio,
    .section.section-performance,
    .section.section-ticket,
    .section.section-contact,
    .section.section-video {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* col-container の追加左右パディングを撤去（section の 16px のみ有効に） */
    .section.section-bio .col-container,
    .section.section-performance .col-container,
    .section.section-ticket .col-container,
    .section.section-contact .col-container,
    .section.section-video .col-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* スマホでは bio の h4（金縦線アクセント）を撤去 */
    .section.section-bio .content h4,
    .section-bio h4 {
        border-left: none !important;
        padding-left: 0 !important;
    }
    /* h3（開演スケジュール / チケット情報）の小注記を、スマホでは
       タイトル直下に折り返して表示（◆＋タイトルは横並びのまま） */
    .col-card h3 {
        flex-wrap: wrap;
    }
    .col-card h3 > small {
        flex-basis: 100%;   /* 全幅を取って次行に押し出す */
        margin-left: 18px;  /* ◆アイコン分のインデント揃え */
        margin-top: 4px;
    }
}

/* bio セクションのアイブロウは全幅で中央寄せ（PC・スマホ共通） */
.section-bio .col-eyebrow {
    display: block;
    text-align: center;
}

/* Decorative gold rule above/below the title */
.col-hero__rule {
    width: clamp(160px, 32vw, 320px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--col-gold) 50%, transparent);
    position: relative;
}
.col-hero__rule::before,
.col-hero__rule::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--col-gold);
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 12px var(--col-gold-hi);
}
.col-hero__rule::before { left: calc(50% - 80px); }
.col-hero__rule::after  { left: calc(50% + 72px); }

.col-hero__sub {
    font-family: var(--ff-jp-serif);
    font-weight: 500;
    color: var(--col-text);
    font-size: clamp(14px, 1.7vw, 18px);
    letter-spacing: 0.08em;
    max-width: none;
    /* 下のタイトル罫線から余白を開ける */
    margin: clamp(20px, 4vh, 56px) auto 0;
    line-height: 2;
}
/* スマホ幅では文中の強制改行を打ち消し、文を続けて表示する */
@media (max-width: 600px) {
    .col-hero__sub-break { display: none; }
    /* 背景の人物写真と重なるサブ文を、太字＋余白で読みやすく */
    .col-hero__sub {
        font-weight: 700;
        padding: 0 15px;
    }
}

/* Date block — symmetric layout, gold gradient like PDF */
.col-hero__date {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(8px, 1.2vw, 16px);
    flex-wrap: wrap;
    margin-top: 6px;
}
.col-hero__date .y {
    font-family: var(--ff-en-deco);
    color: var(--col-yellow);
    font-size: clamp(18px, 2.2vw, 24px);
    letter-spacing: 0.12em;
    font-weight: 700;
}
.col-hero__date .d {
    font-family: var(--ff-en-deco);
    font-weight: 700;
    font-size: clamp(58px, 9vw, 120px);
    line-height: 1;
    background: linear-gradient(180deg, #fff5b8 0%, #facc15 50%, #b08a08 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.01em;
}
.col-hero__date .sep {
    color: var(--col-yellow);
    font-size: clamp(38px, 6vw, 72px);
    font-weight: 300;
}
.col-hero__date .dow {
    font-family: var(--ff-en-deco);
    font-style: italic;
    color: var(--col-magenta);
    font-size: clamp(16px, 2vw, 24px);
    margin-left: -0.15em;
}

.col-hero__venue {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--col-cream);
    font-size: clamp(14px, 1.7vw, 17px);
    letter-spacing: 0.06em;
}
.col-hero__venue .pill {
    background: var(--col-gold);
    color: var(--col-bg-deep);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85em;
    letter-spacing: 0.14em;
}

.col-hero__cta {
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
    /* スティッキーメニュー(高さ90px + margin-top:-90px) と被らないよう余白 */
    margin-bottom: clamp(110px, 12vh, 140px);
}
/* スマホではメニュー非表示なので、CTA下の余白は控えめに */
@media (max-width: 768px) {
    .col-hero__cta {
        margin-bottom: 32px;
    }
}
.col-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--ff-jp-sans);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: 1px solid transparent;
    line-height: 1;
}
.col-btn--primary {
    background: linear-gradient(135deg, #d946ef 0%, #7c1aa8 100%);
    color: #fff;
    box-shadow: 0 12px 36px rgba(217, 70, 239, 0.45);
}
.col-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(217, 70, 239, 0.6);
    color: #fff;
}
.col-btn--ghost {
    background: rgba(255,255,255,0.04);
    border-color: var(--col-gold);
    color: var(--col-gold-hi);
}
.col-btn--ghost:hover {
    background: rgba(212, 175, 55, 0.12);
    color: var(--col-yellow);
    transform: translateY(-2px);
}

/* Encore ribbon (好評につきアンコール) */
.col-encore {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d97f 50%, #a07a18 100%);
    color: #2a0a3f;
    font-family: var(--ff-jp-serif);
    font-weight: 800;
    letter-spacing: 0.12em;
    border-radius: 4px;
    font-size: clamp(13px, 1.6vw, 16px);
    box-shadow: 0 8px 24px rgba(212,175,55,0.25);
    align-self: flex-start;
}
.col-encore::before {
    content: none;
}

/* ----------------------------------------------------------------
   Menu / Sticky nav — adapt to dark theme
---------------------------------------------------------------- */
.qt-menu-wrapper {
    background: rgba(11, 4, 24, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--col-line);
}
/* タブレット幅以下（≤992px）はデスクトップメニューが効かず、ハンバーガーも撤去済みのため、
   メニューバー自体を完全非表示にしてヒーロー直下の余白を解消する */
@media (max-width: 992px) {
    #menu,
    .qt-menu-wrapper {
        display: none !important;
    }
    .col-hero__inner {
        padding-top: 24px !important;
    }
}


/* ----------------------------------------------------------------
   散りばめキャラクター（サイト全体）
   各セクションの端に切り抜きキャラがひっそり立つ装飾。.col-decor
   ヒーローには配置せず、bio / gallery / performance / ticket / contact
   など各セクションに1〜2体ずつ。
---------------------------------------------------------------- */
.col-decor {
    position: absolute;
    z-index: 5;
    width: var(--size, 160px);
    height: auto;
    top: var(--top, auto);
    bottom: var(--bottom, auto);
    left: var(--left, auto);
    right: var(--right, auto);
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.0s cubic-bezier(.2,.8,.2,1), transform 1.0s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--delay, 0s);
    filter:
        drop-shadow(0 18px 18px rgba(0,0,0,0.55))
        drop-shadow(0 0 26px rgba(74, 31, 122, 0.55))
        drop-shadow(0 0 8px rgba(244, 217, 127, 0.22));
}
.col-decor img {
    display: block;
    width: 100%;
    height: auto;
    /* 切り抜きキャラの足元を背景にじんわり溶かす（コンテンツの境目で切れても気にならないように） */
    -webkit-mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 78%,
        rgba(0,0,0,0.55) 92%,
        rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 78%,
        rgba(0,0,0,0.55) 92%,
        rgba(0,0,0,0) 100%);
}
/* チケット購入の上に立つキャラ（ツインズ）はつま先まで見せる */
.section-performance .col-decor--hcenter img {
    -webkit-mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 96%,
        rgba(0,0,0,0.5) 99%,
        rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 96%,
        rgba(0,0,0,0.5) 99%,
        rgba(0,0,0,0) 100%);
}
/* 写真の後ろに回り込む配置（z-index を低く） */
.col-decor--behind {
    z-index: 1;
}
.col-decor--behind ~ .qtgallery,
.qtgallery .col-decor--behind ~ * {
    position: relative;
    z-index: 2;
}
/* 中央寄せ配置 */
.col-decor--hcenter {
    left: 50%;
    margin-left: calc(var(--size, 160px) / -2);
}
/* 境界をまたぐ装飾キャラを次のセクションに隠されないよう、セクションのスタッキング順を調整 */
.section.section-bio,
.section.section-photos,
.section.section-performance {
    z-index: 5 !important;
}
.section.section-ticket,
.section.section-contact {
    z-index: 1 !important;
}
/* col-starfield が overflow:hidden でツインズの足元をクリップしているのを解除 */
.section.section-performance.col-starfield,
.section.section-bio.col-starfield,
.section.section-photos {
    overflow: visible !important;
}
/* セクションが視界に入ったら現れる（既存の col-reveal 連動） */
.col-reveal.is-revealed .col-decor,
.section.is-revealed .col-decor,
.col-decor.is-revealed {
    opacity: var(--final-opacity, 0.92);
    transform: translateY(0);
    animation: col-decor-float 7s ease-in-out infinite alternate;
    animation-delay: calc(var(--delay, 0s) + 1s);
}
@keyframes col-decor-float {
    0%   { translate: 0 0; }
    50%  { translate: 0 -10px; }
    100% { translate: 0 4px; }
}

/* タブレット幅（769〜1024px）はサイズ 85%・透明度 0.7、スマホ（≤768px）は非表示 */
@media (max-width: 1024px) {
    .col-decor { width: calc(var(--size, 160px) * 0.85); opacity: 0.7; }
}
@media (max-width: 768px) {
    .col-decor { display: none; }
}

/* ----------------------------------------------------------------
   タブレット専用：装飾キャラの位置微調整（769〜1024px）
   インラインスタイルの --left/--right を上書きする
---------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 猫: 右に 30px（左側配置なので left をプラス方向へ） */
    .col-decor--cat { left: -35px !important; }
    /* 緑のキャラ（YouTube横）: 左に 30px（右側配置なので right をプラス方向へ） */
    .col-decor--green { right: -100px !important; }
    /* ネズミ: 左に 60px（左側配置なので left をマイナス方向へ） */
    .col-decor--mouse { left: -30px !important; }
    /* うさぎ: 右に 60px（右側配置なので right をマイナス方向へ） */
    .col-decor--bunny { right: -20px !important; }
    /* クイーン: 左に 70px（30+40px、左側配置なので left をマイナス方向へ） */
    .col-decor--queen { left: -15px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .col-decor {
        animation: none !important;
        opacity: var(--final-opacity, 0.92) !important;
        transform: none !important;
    }
}


/* ----------------------------------------------------------------
   旧：散りばめキャラクターアイコン（ヒーロー専用） — 廃止
   現在 .col-decor で置き換えのため未使用
---------------------------------------------------------------- */
.col-hero__scatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;  /* photoより上、テキスト/portraitより下 */
    overflow: hidden;
}
.col-hero__scatter-item {
    position: absolute;
    width: var(--size, 100px);
    height: auto;
    top: var(--top, auto);
    left: var(--left, auto);
    right: var(--right, auto);
    bottom: var(--bottom, auto);
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    /* 切り抜きキャラに合わせた立体感のあるドロップシャドウ */
    filter:
        drop-shadow(0 18px 18px rgba(0,0,0,0.55))
        drop-shadow(0 0 22px rgba(74, 31, 122, 0.55))
        drop-shadow(0 0 6px rgba(244, 217, 127, 0.25));
    animation:
        col-scatter-fade 1.1s cubic-bezier(.2,.8,.2,1) forwards,
        col-scatter-float 6s ease-in-out infinite alternate;
    animation-delay: calc(2.6s + var(--delay, 0s)), calc(3.7s + var(--delay, 0s));
}
.col-hero__scatter-item picture,
.col-hero__scatter-item img {
    display: block;
    width: 100%;
    height: auto;
}
@keyframes col-scatter-fade {
    to { opacity: var(--final-opacity, 0.85); transform: translateY(0) scale(1); }
}
@keyframes col-scatter-float {
    0%   { translate: 0 0; }
    50%  { translate: 0 -8px; }
    100% { translate: 0 2px; }
}

/* スマホでは散りばめも非表示 */
@media (max-width: 950px) {
    .col-hero__scatter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .col-hero__scatter-item {
        animation: none !important;
        opacity: var(--final-opacity, 0.85) !important;
        transform: none !important;
    }
}
.qt-menu .qt-desktopmenu li a,
.qt-menu .qt-mobilemenu li a {
    color: var(--col-cream) !important;
    font-family: var(--ff-jp-sans);
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: color 0.18s ease;
}
.qt-menu .qt-desktopmenu li a:hover {
    color: var(--col-gold-hi) !important;
}
.qt-menu .qt-menu-switch {
    color: var(--col-gold-hi) !important;
}

/* ----------------------------------------------------------------
   Section: 公演について (bio)
---------------------------------------------------------------- */
.section-bio {
    background:
      radial-gradient(ellipse at 80% 10%, rgba(217,70,239,0.12), transparent 50%),
      radial-gradient(ellipse at 10% 90%, rgba(74,31,122,0.45), transparent 60%),
      var(--col-bg);
    padding: clamp(70px, 9vw, 120px) clamp(20px, 4vw, 40px);
}
.section-bio .qt-framed {
    background: linear-gradient(180deg, rgba(38,17,72,0.6) 0%, rgba(11,4,24,0.65) 100%);
    border: 1px solid var(--col-line);
    border-radius: var(--radius);
    padding: clamp(28px, 4vw, 56px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    max-width: 880px;
    margin: 0 auto;
}
.section-bio h4 {
    font-family: var(--ff-jp-serif);
    color: var(--col-gold-hi);
    font-weight: 700;
    border-left: 3px solid var(--col-gold);
    padding-left: 14px;
    margin-bottom: 1em;
    letter-spacing: 0.06em;
}
.section-bio p,
.section-bio .content {
    color: var(--col-text);
    line-height: 1.95;
    font-size: clamp(15px, 1.6vw, 16px);
}

/* The lawrence "alley" portrait used as a story image */
.col-portrait {
    width: 100%;
    border-radius: var(--radius);
    margin: 24px 0;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px var(--col-line);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 30%;
}
/* スマホでは画像の縦サイズを抑える（縦長になりすぎないよう ratio を横長寄りに） */
@media (max-width: 600px) {
    .col-portrait {
        aspect-ratio: 16 / 9;
        max-height: 240px;
    }
}

/* ----------------------------------------------------------------
   Section: ギャラリー
---------------------------------------------------------------- */
.section-photos {
    background: var(--col-bg-deep) !important;
    padding-top: clamp(60px, 8vw, 100px);
    padding-bottom: clamp(60px, 8vw, 100px);
}
/* qtgallery を col-decor の基準にする */
.qtgallery { position: relative; }
.section-photos .qtgallery {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.section-photos .qtgallery > div {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--col-line);
    aspect-ratio: 1 / 1;
}
.section-photos .qtgallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}
.section-photos .qtgallery > div:hover img {
    transform: scale(1.06);
}

.section-video {
    background:
      linear-gradient(180deg, rgba(11,4,24,0.7), rgba(11,4,24,0.95)),
      var(--col-bg) !important;
    padding: clamp(60px, 8vw, 100px) clamp(16px, 3vw, 32px);
}
.section-video h5 {
    color: var(--col-gold-hi);
    font-family: var(--ff-jp-serif);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.12em;
    margin: 28px 0 16px;
}
.section-video .qt-framed {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
}
.section-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--col-line);
    box-shadow: 0 18px 48px rgba(0,0,0,0.5);
}


/* ----------------------------------------------------------------
   Section: 公演スケジュール / チケット
---------------------------------------------------------------- */
.section-performance,
.section-ticket {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(74,31,122,0.4), transparent 55%),
      var(--col-bg);
    padding: clamp(70px, 9vw, 120px) clamp(20px, 4vw, 40px);
}

.col-card {
    background: linear-gradient(180deg, rgba(38,17,72,0.7) 0%, rgba(11,4,24,0.85) 100%);
    border: 1px solid var(--col-line);
    border-radius: var(--radius);
    padding: clamp(24px, 3.5vw, 44px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    max-width: 880px;
    margin: 0 auto 28px;
}
.col-card h3 {
    font-family: var(--ff-jp-serif);
    font-weight: 700;
    color: var(--col-gold-hi);
    font-size: clamp(20px, 2.4vw, 24px);
    margin: 0 0 18px;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.col-card h3::before {
    content: "◆";
    color: var(--col-magenta);
    font-size: 0.8em;
}

/* Schedule table */
.col-schedule {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--col-line);
    color: var(--col-cream);
}
.col-schedule th,
.col-schedule td {
    padding: 14px 10px;
    text-align: center;
    font-size: clamp(13px, 1.5vw, 15px);
    border-bottom: 1px solid var(--col-line);
    border-right: 1px solid var(--col-line);
    vertical-align: middle;
}
.col-schedule th:last-child,
.col-schedule td:last-child { border-right: none; }
.col-schedule tbody tr:last-child td { border-bottom: none; }
.col-schedule thead th {
    background: linear-gradient(180deg, #2a1450 0%, #1a0a30 100%);
    color: var(--col-gold-hi);
    font-family: var(--ff-jp-serif);
    letter-spacing: 0.06em;
    font-weight: 700;
}
.col-schedule td.time {
    background: rgba(212,175,55,0.06);
    color: var(--col-gold-hi);
    font-family: var(--ff-en-deco);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.col-schedule td.show {
    color: var(--col-yellow);
    font-weight: 700;
    letter-spacing: 0.12em;
}
.col-schedule td.empty {
    background:
      linear-gradient(135deg, transparent calc(50% - 1px), rgba(255,255,255,0.18) 50%, transparent calc(50% + 1px));
    color: transparent;
}
.col-schedule__caption {
    color: var(--col-text-mute);
    font-size: 0.85em;
    margin-top: 10px;
    text-align: right;
}

/* Tickets */
.col-tickets {
    width: 100%;
    border-collapse: collapse;
    color: var(--col-cream);
}
.col-tickets td {
    padding: 14px 8px;
    border-bottom: 1px dashed var(--col-line);
    font-size: clamp(14px, 1.5vw, 16px);
    vertical-align: baseline;
}
.col-tickets tr:last-child td { border-bottom: none; }
.col-tickets td.label {
    color: var(--col-cream);
    width: 50%;
}
.col-tickets td.label small {
    color: var(--col-text-mute);
    font-size: 0.8em;
    margin-left: 6px;
}
.col-tickets td.price {
    text-align: right;
    color: var(--col-gold-hi);
    font-family: var(--ff-en-deco);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: clamp(15px, 1.7vw, 18px);
    white-space: nowrap;
    vertical-align: middle;
}
.col-tickets td.price small {
    color: var(--col-text-mute);
    font-family: var(--ff-jp-sans);
    font-size: 0.7em;
    margin-left: 8px;
    letter-spacing: 0;
}
.col-tickets-note {
    color: var(--col-text-mute);
    font-size: 0.85em;
    margin-top: 14px;
    line-height: 1.7;
}
/* チケットセクションの問い合わせ先ブロック（大阪事務局の TEL/FAX/携帯/Email） */
.col-contactblock {
    margin: 22px auto 0;
    padding: 18px clamp(16px, 2vw, 28px);
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 8px;
    background: rgba(11, 4, 24, 0.45);
    display: inline-block;
    text-align: left;
    color: var(--col-cream);
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.7;
}
/* 連絡先ブロックの帰属を示す見出し（大阪事務局名） */
.col-contactblock__heading {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    color: var(--col-gold-hi);
    font-family: var(--ff-jp-serif);
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
}
.col-contactblock__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}
.col-contactblock__row + .col-contactblock__row {
    margin-top: 4px;
}
.col-contactblock dt {
    color: var(--col-gold-soft);
    font-family: var(--ff-en-deco);
    font-size: 0.82em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    min-width: 3.6em;
}
.col-contactblock dd {
    margin: 0 14px 0 0;
    font-family: var(--ff-en-deco);
    letter-spacing: 0.02em;
    color: var(--col-gold-hi);
}
.col-contactblock dd:last-child { margin-right: 0; }
.col-contactblock a {
    color: var(--col-gold-hi);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.col-contactblock a:hover {
    color: #fff;
    border-bottom-color: var(--col-gold-hi);
}
.col-contactblock small {
    color: var(--col-text-mute);
    font-size: 0.8em;
    font-family: var(--ff-jp-sans);
    margin-left: 4px;
    letter-spacing: 0;
}
@media (max-width: 600px) {
    .col-contactblock { display: block; }
    .col-contactblock__row { flex-direction: column; gap: 0; }
    .col-contactblock__row + .col-contactblock__row { margin-top: 10px; }
}
/* チケット行の直下に付くサブノート（小人料金など） */
.col-tickets td.col-tickets-subnote {
    color: var(--col-text-mute);
    font-size: 0.7em;
    line-height: 1.55;
    padding: 0 8px 12px;
    border-bottom: 1px dashed var(--col-line);
    white-space: nowrap;
}
/* 狭い幅でははみ出すので折り返しを許可 */
@media (max-width: 720px) {
    .col-tickets td.col-tickets-subnote {
        white-space: normal;
    }
}
/* サブノート直前の行のラベルセルのみ下ボーダーを消し、上の余白も詰めて一体化させる
   （rowspan を使う価格セルの下ボーダーは保つ） */
.col-tickets tr:has(+ .col-tickets-subnote-row) td.label {
    border-bottom: none;
    padding-bottom: 2px;
}
.col-pill {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--col-gold);
    border-radius: 999px;
    color: var(--col-gold-hi);
    font-size: 0.8em;
    margin-left: 8px;
    letter-spacing: 0.1em;
}

/* Venue / map */
.col-venue {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .col-venue { grid-template-columns: 1fr; }
}
.col-venue__list {
    color: var(--col-cream);
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.95;
}
.col-venue__list strong {
    color: var(--col-gold-hi);
    font-family: var(--ff-jp-serif);
    font-size: 1.1em;
    letter-spacing: 0.06em;
}
.col-venue__list small { color: var(--col-text-mute); margin-left: 6px; }
.col-venue__access {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.col-venue__access li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--col-line);
    color: var(--col-cream);
}
.col-venue__access li:last-child { border-bottom: none; }
.col-venue__access li small {
    margin-left: auto;        /* 右寄せ */
    white-space: nowrap;      /* 「徒歩 5分」を1行に固定 */
    flex-shrink: 0;
    padding-left: 12px;
}
.col-venue__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--col-magenta);
    box-shadow: 0 0 12px rgba(217, 70, 239, 0.7);
    flex-shrink: 0;
}
.col-venue__mapcard {
    display: block;
    width: 100%;
    aspect-ratio: 1600 / 1130;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--col-line);
    box-shadow: 0 16px 48px rgba(0,0,0,0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: #f3f8ee; /* 地図画像の地色（薄緑）に合わせ、読み込み中の暗転を防ぐ */
}
.col-venue__mapcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(217,70,239,0.35), 0 0 0 1px var(--col-gold);
}
.col-venue__mapcard img,
.col-venue__mapcard svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ----------------------------------------------------------------
   Contact form
---------------------------------------------------------------- */
.section-contact {
    background:
      radial-gradient(ellipse at 50% 30%, rgba(217,70,239,0.18), transparent 55%),
      var(--col-bg);
    padding: clamp(70px, 9vw, 120px) clamp(20px, 4vw, 40px);
}
.section.section-contact .qt-contact-form,
.section-contact .qt-contact-form {
    width: auto !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    background: rgba(11, 4, 24, 0.6) !important;
    color: var(--col-text) !important;
    border: 1px solid var(--col-line);
    border-radius: var(--radius);
    padding: clamp(28px, 4vw, 48px) !important;
    backdrop-filter: blur(2px);
}
.section-contact label {
    color: var(--col-cream) !important;
    font-family: var(--ff-jp-sans);
    font-weight: 500;
}
.section-contact label small { color: var(--col-text-mute); }
.section-contact input[type="text"],
.section-contact input[type="email"],
.section-contact input[type="tel"],
.section-contact textarea {
    color: var(--col-cream) !important;
    border-bottom: 1px solid rgba(212,175,55,0.4) !important;
    box-shadow: none !important;
    background: transparent;
}
.section-contact input:focus,
.section-contact textarea:focus {
    border-bottom: 1px solid var(--col-gold-hi) !important;
    box-shadow: 0 1px 0 0 var(--col-gold-hi) !important;
}
.section-contact input:focus + label,
.section-contact textarea:focus + label {
    color: var(--col-gold-hi) !important;
}
.section-contact .err,
.section-contact span.err {
    color: #ff7ad9;
    font-size: 0.85em;
    display: block;
    margin-bottom: 6px;
}
.section-contact .btn,
.col-btn--submit {
    background: linear-gradient(135deg, #d946ef 0%, #7c1aa8 100%) !important;
    box-shadow: 0 12px 32px rgba(217,70,239,0.4);
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0 30px !important;
    height: 48px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}
.section-contact .btn:hover {
    box-shadow: 0 18px 44px rgba(217,70,239,0.6) !important;
}

/* ----------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
.qt-footer {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(74,31,122,0.45), transparent 55%),
      var(--col-bg-deep) !important;
    color: var(--col-text) !important;
    border-top: 1px solid var(--col-line);
    padding: clamp(60px, 8vw, 90px) clamp(20px, 4vw, 32px) 40px !important;
}
.qt-footer .parallax { display: none; }
.qt-footer .qt-footertitle img {
    max-width: 320px;
    width: 80%;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(217,70,239,0.4));
}
.qt-footer h5 {
    color: var(--col-gold-hi);
    font-family: var(--ff-jp-serif);
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 28px 0 24px;
}
/* dl をカラム中央に寄せる（短いコンテンツでも左片寄りに見えないように） */
.qt-footer .row > .col {
    text-align: center;
}
.qt-footer dl {
    display: inline-block;
    text-align: left;
    color: var(--col-text);
}
.qt-footer dt strong {
    color: var(--col-gold-hi);
    font-family: var(--ff-jp-serif);
}
.qt-footer dd {
    color: var(--col-text-mute);
    font-size: 0.92em;
    line-height: 1.85;
}
.qt-footer a { color: var(--col-gold-hi); }
.qt-footer .col-copyright {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--col-line);
    color: var(--col-text-mute);
    font-size: 0.82em;
    letter-spacing: 0.1em;
}

/* ----------------------------------------------------------------
   フッターの SNS アイコン
---------------------------------------------------------------- */
.col-sns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 36px 0 8px;
    flex-wrap: wrap;
}
.col-sns__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(11, 4, 24, 0.5);
    color: var(--col-cream) !important;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.col-sns__link svg {
    width: 18px;
    height: 18px;
    display: block;
}
.col-sns__link:hover,
.col-sns__link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--col-gold-hi);
}
/* 各 SNS のブランドカラーをホバーで適用 */
.col-sns__link--facebook:hover,
.col-sns__link--facebook:focus-visible {
    background: #1877F2;
    color: #fff !important;
    border-color: #1877F2;
}
.col-sns__link--instagram:hover,
.col-sns__link--instagram:focus-visible {
    /* Instagram の公式グラデーション */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff !important;
    border-color: #dc2743;
}
.col-sns__link--x:hover,
.col-sns__link--x:focus-visible {
    background: #000;
    color: #fff !important;
    border-color: #fff;
}
.col-sns__link--line:hover,
.col-sns__link--line:focus-visible {
    background: #06C755;
    color: #fff !important;
    border-color: #06C755;
}

/* ----------------------------------------------------------------
   Sponsor band (主催/共催)
---------------------------------------------------------------- */
.col-sponsors {
    background: rgba(38, 17, 72, 0.6);
    border-top: 1px solid var(--col-line);
    border-bottom: 1px solid var(--col-line);
    padding: 18px 16px;
    text-align: center;
    color: var(--col-cream);
    font-size: clamp(12px, 1.4vw, 14px);
    line-height: 1.9;
    letter-spacing: 0.06em;
}
.col-sponsors strong {
    color: var(--col-gold-hi);
    font-family: var(--ff-jp-serif);
    margin-right: 6px;
}

/* ----------------------------------------------------------------
   Logo image (CELEBRATION OF LIFE)
---------------------------------------------------------------- */
.col-logoart {
    display: block;
    width: min(520px, 80%);
    margin: 18px 0 6px;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px var(--col-line);
}

/* ----------------------------------------------------------------
   Responsive — mobile tightening
---------------------------------------------------------------- */
/* tablet: shrink side photos */
@media (max-width: 1100px) {
    .col-hero__side img { max-width: 280px; }
    .col-hero__inner {
        grid-template-columns: minmax(0, 0.7fr) minmax(min(560px, 100%), 1fr) minmax(0, 0.7fr);
        gap: 12px;
    }
}

@media (max-width: 950px) {
    /* Switch hero to single column, stack side photos behind */
    .col-hero { min-height: 92vh; }
    .col-hero__inner {
        grid-template-columns: 1fr;
        /* タブレット幅ではメニュー分の余白を残す。左右は最低 15px 確保 */
        padding-top: 110px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-hero__side {
        position: absolute;
        inset: 0;
        /* iOS 互換性のため top/left/right/bottom を明示 */
        top: 0; right: 0; bottom: 0; left: 0;
        opacity: 0.6;
        pointer-events: none;
        /* iOS Safari の z-index: -1 描画バグを回避するため正の値で運用 */
        z-index: 0;
    }
    /* テキスト中央列を確実に最前面に */
    .col-hero__center {
        position: relative;
        z-index: 2;
    }
    .col-hero__side img {
        max-width: 60vw;
        border-radius: 14px;
        animation: none;
        /* iOS Safari は多重 drop-shadow で画像が描画されないバグがあるため、
           モバイル幅では filter を無効化（背景アンビエント用途なので影は不要） */
        filter: none;
    }
    .col-hero__side--left  { justify-content: flex-start; align-items: flex-start; padding: 90px 0 0 0; }
    .col-hero__side--right { justify-content: flex-end; align-items: flex-end; padding: 0 0 90px 0; }
    .col-hero__side--left img  { transform: rotate(-6deg) translateX(-12%); }
    .col-hero__side--right img { transform: rotate(6deg) translateX(12%); }

    /* 背景の人物写真と重なるサブ文・会場テキストにのみ控えめなハローを付与
       バッジ系（col-encore、.pill、.col-hero__date）は自前の背景色 / 装飾を
       持つため、text-shadow は付けず素のままで読ませる */
    .col-hero__sub,
    .col-hero__venue {
        text-shadow:
            0 0 4px rgba(11, 4, 24, 0.95),
            0 2px 8px rgba(11, 4, 24, 0.85);
    }
    /* タイトル（グラデ塗り）に背景写真と分離するための軽いシャドウを */
    .col-hero__title {
        filter:
            drop-shadow(0 0 3px rgba(11, 4, 24, 0.9))
            drop-shadow(0 2px 10px rgba(11, 4, 24, 0.75));
    }
    /* 会場の pill バッジ自体は自前の地色があるので shadow は無効 */
    .col-hero__venue .pill {
        text-shadow: none;
    }

    .col-hero__date { gap: 6px; }
    .col-schedule th,
    .col-schedule td { padding: 10px 4px; font-size: 12px; }
    .qt-footer dl { text-align: center; }
    .qt-footer dl + dl { margin-top: 24px; }
    .col-venue { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .col-hero__title { font-size: 36px; line-height: 1.08; letter-spacing: 0.02em; }
    .col-hero__title small { font-size: 0.36em; letter-spacing: 0.16em; }
    .col-hero__date .d { font-size: 56px; }
    .col-hero__date .sep { font-size: 32px; }
    .col-hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
    .col-btn { justify-content: center; }
    .col-hero__rule { width: 60%; }
    .col-hero__rule::before { left: calc(50% - 60px); }
    .col-hero__rule::after  { left: calc(50% + 52px); }
}

/* Override of older inline images that won't be used anymore */
.col-hide-2024 { display: none !important; }

/* ----------------------------------------------------------------
   Hard overrides for legacy qt-main.css / materialize defaults
   that conflict with the dark theme
---------------------------------------------------------------- */
.section .qt-framed,
.section.section-bio .qt-framed,
.section .qt-framed .content,
.section.section-bio .content,
.section .content,
.qt-polydecor,
.qt-polydecor-content {
    background: transparent !important;
    color: var(--col-text) !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.section.section-bio .qt-framed { /* re-apply themed card on bio */
    background: linear-gradient(180deg, rgba(38,17,72,0.6) 0%, rgba(11,4,24,0.65) 100%) !important;
    border: 1px solid var(--col-line) !important;
    border-radius: var(--radius) !important;
    padding: clamp(28px, 4vw, 56px) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
    max-width: 880px !important;
    margin: 0 auto !important;
}
.section.section-bio .content {
    color: var(--col-text) !important;
}
.section.section-bio .content h2,
.section.section-bio .content h3,
.section.section-bio .content h4,
.section.section-bio .content h5 {
    color: var(--col-gold-hi) !important;
    margin: 32px 0 16px 0 !important;
    padding-bottom: 0 !important;
}
.section.section-bio .content h4::after,
.section.section-bio .content h2::after,
.section.section-bio .content h3::after,
.section.section-bio .content h5::after {
    display: none !important;
}
.section .qt-section-title::before,
.section .qt-section-title::after {
    display: none !important;
}
.section.section-photos .qt-section-title {
    position: relative !important;
    color: var(--col-cream) !important;
    text-shadow: 0 2px 24px rgba(217, 70, 239, 0.35) !important;
}
.qt-framed h4,
.qt-framed h5 {
    color: var(--col-gold-hi) !important;
}
.qt-framed p,
.qt-framed li,
.qt-framed dd {
    color: var(--col-text) !important;
}

/* Make sure section backgrounds aren't masked by parallax containers */
.section.parallax-container > .parallax,
.qt-header > .parallax,
.qt-footer > .parallax { display: none !important; }

/* Disable slick on our grid gallery */
.qtgallery.slick-initialized { display: grid !important; }
.qtgallery .slick-list,
.qtgallery .slick-track { display: contents; }

/* Materialize button reset for dark theme */
.btn, .btn-block {
    background-color: var(--col-magenta) !important;
}
.btn:hover {
    background-color: #c026d3 !important;
}

/* Sticky menu (materialize side-nav) for dark theme */
.side-nav {
    background-color: var(--col-bg) !important;
    border-left: 1px solid var(--col-line);
    visibility: hidden;
    transform: translateX(105%) !important;
    transition: transform 0.25s ease, visibility 0.25s !important;
}
.side-nav.show,
.side-nav[style*="visible"] {
    visibility: visible;
}
/* Materialize toggles inline style — keep in sync */
.side-nav[style*="translateX(0"] { transform: translateX(0) !important; visibility: visible !important; }
.side-nav li > a {
    color: var(--col-cream) !important;
    font-family: var(--ff-jp-sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
}
.side-nav li > a:hover {
    background: rgba(217, 70, 239, 0.1) !important;
    color: var(--col-gold-hi) !important;
}
.drag-target { display: none !important; }
#sidenav-overlay { background: rgba(11,4,24,0.6) !important; }
/* Suppress flash before materialize finishes init */
.side-nav { will-change: transform; }
/* ハンバーガーメニューはどの幅でも非表示 */
.qt-menu-switch { display: none !important; }
.side-nav { display: none !important; }
#sidenav-overlay { display: none !important; }

/* Make sure hero is full-bleed (no parallax wrapping) */
.qt-header.col-hero {
    height: auto;
}

/* スマホ (≤600px) のセクション余白整理 — 最後尾で再宣言して
   先行の `... !important` を確実に打ち消す */
@media (max-width: 600px) {
    /* bio フレームの左ボーダー撤去 + 左右の内側余白を縮小 */
    .section.section-bio .qt-framed {
        border-left: none !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    /* お問合わせフォーム内の左右余白をさらに半分に（16px→8px） */
    .section.section-contact .qt-contact-form,
    .section-contact .qt-contact-form {
        padding: 8px !important;
    }
    /* col-card（公演スケジュール / チケット情報）の左右内側余白も縮小 */
    .col-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}