/* ===== フォント読み込み ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&family=Zen+Maru+Gothic:wght@400;500;700&family=Dela+Gothic+One&display=swap');

/* ===== CSS カスタムプロパティ（和風旅館カラーパレット） ===== */
:root {
    /* カラーパレット */
    --ink-black: #1a1a1a;
    --charcoal: #2d2d2d;
    --wood-brown: #5c4033;
    --cedar: #8b6f47;
    --gold-accent: #d4af37;
    --paper-white: #f5f3ed;
    --cream: #ebe6d9;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-deep: rgba(0, 0, 0, 0.5);

    /* タイポグラフィ */
    --font-display: 'Noto Serif JP', serif;
    --font-body: 'Zen Maru Gothic', sans-serif;

    /* スペーシング */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
}

/* ===== リセット & ベーススタイル ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 画像のドラッグ移動を無効化 */
img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    font-family: var(--font-body);
    color: var(--ink-black);
    background: rgba(0, 0, 0, 0.4); /* フラッシュ防止：半透明の暗幕 */
    /* 初期状態はスクロール無効（アニメーション終了後JSで解除） */
    overflow: hidden;
    min-height: 100vh;
    position: relative;
    /* スマホのバウンススクロールによる背景ズレを防止 */
    overscroll-behavior: none;
}

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

/* ===== 背景画像（クロスフェード用2レイヤー） ===== */
/* JSでbackground-imageをセットし、opacityでクロスフェードする */
.bg-layer {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    transition: opacity 0.6s ease;
}


/* ===== ローディング画面（黒・最前面） ===== */
.loading-screen {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.8s ease;
    /* ローディング中はタッチ・スクロール操作を全てブロック */
    pointer-events: all;
    touch-action: none;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ===== オープニング画面 ===== */
/* 読み込み完了前はアニメーションを止めておく */
.intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    /* デフォルトは非表示・アニメーションなし */
    opacity: 0;
}

/* JS側でこのクラスを付与してアニメーション開始 */
.intro-screen.ready {
    opacity: 1;
    animation: fadeOut 1s ease-in-out 2.5s forwards;
}

.intro-screen.ready .intro-text {
    animation: slideUp 1s ease-out 0.3s backwards;
}

.intro-screen.ready .character-logo {
    animation: scaleIn 1s ease-out;
}

.intro-screen.ready .schedule {
    animation: slideUp 1s ease-out 0.5s backwards;
}

/* 社長キャラクター画像（右中央固定） */
.character-logo {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(160px, 20vw, 320px);
    height: clamp(160px, 20vw, 320px);
    /* logo.png が用意されたら background-image: url('images/logo.png') に変更 */
    background: rgba(245, 243, 237, 0.08);
    border: 3px solid var(--gold-accent);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
}

/* タイトル・開催情報のまとまり（中央寄せ） */
.intro-text {
    text-align: center;
}

.main-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--paper-white);
    text-shadow: 2px 2px 8px var(--shadow);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0.1em;
}

.intro-screen .schedule {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--gold-accent);
    letter-spacing: 0.05em;
}

/* ===== メインコンテンツ ===== */
.main-content {
    opacity: 0;
    padding-top: 90px;
    transition: opacity 1s ease;
}

/* JSからこのクラスを付与してフェードイン */
.main-content.visible {
    opacity: 1;
}

#sakuraCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#sakuraCanvas.active {
    opacity: 1;
}

#sakuraCanvas.behind {
    z-index: -1;
}

/* ===== 固定ヘッダー ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: rgba(44, 28, 18, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* ヘッダー内部レイアウト: タイトル（左）とナビ（右）を横並び */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: var(--spacing-lg);
}

/* タイトルエリア: 画像を横並び */
.header-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* 透過ロゴ（正方形想定） */
.header-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* バナー画像（横長） */
.header-banner {
    height: 44px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

/* ===== PC用タブナビゲーション ===== */
.tabs {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-bottom: 0;
}

.tab-button {
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    font-weight: 500;
    padding: 0.6rem var(--spacing-md);
    background: rgba(245, 243, 237, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.3);
    color: var(--paper-white);
    cursor: pointer;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
}

/* 非アクティブタブのホバーエフェクト */
.tab-button:hover:not(.active) {
    background: rgba(245, 243, 237, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
}

.tab-button.active {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold-accent);
    color: var(--gold-accent);
}

.tab-button:focus-visible {
    outline: 3px solid var(--gold-accent);
    outline-offset: 2px;
}

/* ベルマークタブ（お知らせ専用） */
.tab-button--bell {
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-button--bell.active svg {
    stroke: var(--gold-accent);
}

/* スマホではPC用タブを非表示 */
@media (max-width: 768px) {
    .tabs {
        display: none;
    }
}

/* ===== ハンバーガーメニューボタン（スマホ専用） ===== */
/* PCでは非表示 */
.menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 8px;
        background: rgba(245, 243, 237, 0.1);
        border: 2px solid rgba(212, 175, 55, 0.4);
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0;
        /* タップ時のエフェクトなし */
        -webkit-tap-highlight-color: transparent;
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--paper-white);
        border-radius: 2px;
    }

    .menu-toggle:focus-visible {
        outline: 3px solid var(--gold-accent);
        outline-offset: 2px;
    }
}

/* ===== オーバーレイ（ドロワー背後の暗幕） ===== */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* ===== サイドメニュー（ドロワー） ===== */
.side-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100%;
    background: rgba(20, 12, 8, 0.97);
    border-right: 2px solid rgba(212, 175, 55, 0.4);
    backdrop-filter: blur(16px);
    z-index: 900;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.side-drawer.open {
    transform: translateX(0);
}

/* ドロワーヘッダー（タイトル＋閉じるボタン） */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    flex-shrink: 0;
}

.drawer-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-accent);
    letter-spacing: 0.1em;
}

.drawer-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    color: var(--paper-white);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.drawer-close:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold-accent);
}

.drawer-close:focus-visible {
    outline: 3px solid var(--gold-accent);
    outline-offset: 2px;
}

/* ドロワーナビゲーション */
.drawer-nav {
    list-style: none;
    padding: var(--spacing-sm) 0;
    margin: 0;
    flex: 1;
}

.drawer-nav li {
    padding: 0 var(--spacing-sm);
}

/* 各メニュー項目 */
.drawer-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px var(--spacing-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(245, 243, 237, 0.75);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    letter-spacing: 0.03em;
    /* タップ時のハイライトを無効化 */
    -webkit-tap-highlight-color: transparent;
}

/* 非アクティブアイテムのホバーエフェクト */
.drawer-item:hover:not(.active) {
    background: rgba(212, 175, 55, 0.08);
    color: rgba(245, 243, 237, 0.9);
}

/* アクティブ（選択中）のスタイル */
.drawer-item.active {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold-accent);
    border-left-color: var(--gold-accent);
}

.drawer-item:focus-visible {
    outline: 3px solid var(--gold-accent);
    outline-offset: -3px;
}

/* メインエリアの左右余白 */
main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg) var(--spacing-xl);
}

/* ===== タブコンテンツ ===== */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeInContent 0.5s ease;
}

/* キャストタブは1秒かけてふわっと表示 */
#cast.active .content-card {
    animation: fadeInContent 1s ease;
}

/* ===== セクションレイアウト ===== */
.section-layout {
    display: block;
}

/* PCではサイドバー非表示・hidden属性も確実に非表示 */
.section-sidebar {
    display: none;
}

.section-sidebar[hidden] {
    display: none !important;
}

/* メインコンテンツ領域 */
.section-body {
    width: 100%;
}

/* サブセクションの表示切替 */
.sub-section {
    display: none;
}

.sub-section.active {
    display: block;
}

/* スマホ: 上部横スクロールタブバーとして表示 */
@media (max-width: 768px) {
    .section-sidebar {
        display: block;
        width: 100%;
        background: rgba(10, 6, 4, 0.72);
        border: 1px solid rgba(212, 175, 55, 0.35);
        border-radius: 8px;
        padding: var(--spacing-xs) var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .section-sidebar::-webkit-scrollbar {
        display: none;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: row;
        gap: 6px;
        white-space: nowrap;
    }

    .sidebar-item {
        display: inline-block;
        padding: 8px 14px;
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 600;
        color: rgba(245, 243, 237, 0.65);
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        border-radius: 6px 6px 0 0;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .sidebar-item:hover {
        background: rgba(212, 175, 55, 0.12);
        color: var(--paper-white);
    }

    .sidebar-item.active {
        color: var(--gold-accent);
        border-bottom-color: var(--gold-accent);
        background: rgba(212, 175, 55, 0.12);
    }
}

/* キャストカードはページスクロールで表示（内部スクロールなし） */
#castCard {
}

/* ===== コンテンツカード ===== */
.content-card {
    background: rgba(245, 243, 237, 0.6);
    padding: var(--spacing-xl);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--shadow);
}

.content-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--wood-brown);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border-bottom: 2px solid var(--gold-accent);
    padding-bottom: var(--spacing-sm);
    letter-spacing: 0.05em;
}

/* ===== イベントポスター 2カラムレイアウト ===== */
.event-posters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

/* 各ポスターブロック: 画像 + 説明 */
.poster-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.poster-image {
    width: 100%;
    border-radius: 8px;
    border: 2px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: block;
}

.poster-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 700;
    color: var(--wood-brown);
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid rgba(212, 175, 55, 0.5);
    letter-spacing: 0.05em;
}

.poster-description {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    line-height: 1.8;
    color: var(--charcoal);
}

.poster-description p {
    margin-bottom: var(--spacing-sm);
}

.poster-schedule {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--wood-brown);
    letter-spacing: 0.05em;
}

/* 開催情報の補足注記（小さめ・斜体） */
.poster-schedule-note {
    font-size: 0.85em;
    color: var(--cedar);
    font-style: italic;
    margin-top: -0.4rem;
    margin-bottom: var(--spacing-sm);
}

/* スマホは1カラムに */
@media (max-width: 768px) {
    .event-posters {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

/* ===== About / ルールセクション ===== */
.about-group,
.about-rule {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    font-weight: 500;
    line-height: 1.9;
    color: var(--ink-black);
}

.about-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--ink-black);
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.05em;
}

/* キャッチコピー（引用風） */
.about-catch {
    font-style: italic;
    color: var(--ink-black);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-md);
    border-left: 3px solid var(--gold-accent);
}

/* 「嘘です。」強調 */
.about-truth {
    font-weight: 700;
    color: var(--wood-brown);
    margin-bottom: var(--spacing-md);
}

.about-group p {
    margin-bottom: var(--spacing-sm);
}

/* ===== 参加ガイド / FAQ ===== */
.guide-section {
    margin-bottom: 2rem;
}

.guide-section:last-child {
    margin-bottom: 0;
}

.guide-steps {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.guide-steps li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.guide-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(180, 130, 80, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #e8d5b0;
    letter-spacing: 0;
    margin-top: 3px;
    background: rgba(20, 15, 10, 0.75);
}

.guide-step-body strong {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--wood-brown);
}

.guide-event-split {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.guide-event-item {
    padding: 0.7rem 0.9rem;
    border-left: 2px solid rgba(180,130,80,0.4);
    background: transparent;
}

.guide-event-label {
    display: block;
    font-size: 0.85em;
    color: var(--wood-brown);
    margin-bottom: 0.3rem;
    font-weight: bold;
}

.guide-event-item p {
    margin: 0;
    font-size: 0.88em;
    color: rgba(220, 200, 170, 0.85);
    line-height: 1.6;
}

.guide-step-body p,
.guide-section > p {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--charcoal);
}

.guide-step-body p:last-child,
.guide-section > p:last-child {
    margin-bottom: 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.faq-item {
    border-bottom: 1px solid rgba(139, 111, 71, 0.2);
    padding: 1rem 0;
}

.faq-item:first-child {
    padding-top: 0;
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-question {
    font-weight: 700;
    color: var(--wood-brown);
    margin-bottom: 0.5rem;
    padding-left: 1.2em;
    position: relative;
}

.faq-question::before {
    content: 'Q.';
    position: absolute;
    left: 0;
    color: rgba(139, 111, 71, 0.8);
    font-size: 0.9em;
}

.faq-answer {
    margin: 0;
    padding-left: 1.2em;
    position: relative;
    color: var(--charcoal);
    font-size: 0.95rem;
    line-height: 1.8;
}

.faq-answer::before {
    content: 'A.';
    position: absolute;
    left: 0;
    color: rgba(139, 111, 71, 0.7);
    font-size: 0.9em;
}

/* ショップ案内 */
.about-shop {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
}

.about-shop p {
    margin-bottom: var(--spacing-xs);
}

.shop-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--wood-brown);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.shop-link:hover {
    color: var(--gold-accent);
}

/* 注意書き（小さめ・薄め） */
.about-notice {
    font-size: 0.85rem;
    color: #666;
    margin-top: var(--spacing-md);
}

/* ===== イベント説明文 ===== */
.event-description {
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.8;
    color: var(--charcoal);
}

.event-description p {
    margin-bottom: var(--spacing-md);
}

.event-description p:last-child {
    margin-bottom: 0;
}

/* ===== 検索バー ===== */
.search-container {
    margin-bottom: var(--spacing-lg);
}

.search-input {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-body);
    font-size: 1rem;
    border: 2px solid var(--cedar);
    border-radius: 25px;
    background: white;
    color: var(--ink-black);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--gold-accent);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* ===== 検索結果0件メッセージ ===== */
.no-results {
    text-align: center;
    padding: var(--spacing-xl);
    font-size: 1.1rem;
    color: var(--cedar);
    font-family: var(--font-body);
}

/* ===== キャストグリッド ===== */
.cast-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

/* ===== 木札風キャストカード ===== */
.cast-card {
    background: url('images/wood-texture.jpg') center / cover no-repeat;
    border: 3px solid var(--cedar);
    border-radius: 8px;
    will-change: transform, box-shadow;
    padding: var(--spacing-md);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    /* 名前テキストを常にカード下部に揃えるためflex縦並び */
    display: flex;
    flex-direction: column;
}

/* ホバー時の金色グロー */
.cast-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--gold-accent), transparent);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.cast-card:hover::before {
    opacity: 0.3;
}

.cast-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    border-color: var(--gold-accent);
}

.cast-card:focus-visible {
    outline: 3px solid var(--gold-accent);
    outline-offset: 3px;
}

.cast-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 4px;
    margin-bottom: var(--spacing-sm);
    background: transparent;
    border: 2px solid rgba(212, 175, 55, 0.3);
    display: block;
    position: relative;
    z-index: 1;
}

.cast-name {
    font-family: 'Dela Gothic One', sans-serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 400;
    color: #3b1f0e;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
    /* 画像の高さに関わらず名前を下部に固定 */
    margin-top: auto;
}

/* 文字数別フォントサイズ調整 */
.cast-name.name-short  { font-size: clamp(1.1rem, 2.4vw, 1.5rem); } /* ≤4文字: ぬの・音狐 など */
.cast-name.name-medium { font-size: clamp(0.95rem, 2vw, 1.25rem); } /* 5〜7文字: ウルフィー・takaniso など */
.cast-name.name-long   { font-size: clamp(0.75rem, 1.6vw, 1rem);  } /* 8文字〜: Shint_Akatohi など */

/* 木札カードの役職バッジ */
.cast-role {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--paper-white);
    background: rgba(212, 175, 55, 0.85);
    border-radius: 4px;
    padding: 2px 8px;
    text-align: center;
    margin-top: 4px;
    position: relative;
    z-index: 1;
    letter-spacing: 0.05em;
}

/* 詳細ビューの役職バッジ */
.detail-role {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-black);
    background: var(--gold-accent);
    border-radius: 4px;
    padding: 2px 10px;
    display: inline-block;
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0.05em;
}

/* Coming Soon カード（クリック不可・グレーアウト） */
.cast-card.coming-soon {
    cursor: default;
    opacity: 0.6;
    filter: grayscale(60%);
}

.cast-card.coming-soon:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--cedar);
}

.cast-card.coming-soon::before {
    display: none;
}

/* 最後のComing Soon枠（VIP解放トリガー）
   パッと見は他と変わらないが、よく見ると金色の枠線がうっすら光る */
.cast-card.vip-slot {
    cursor: pointer;
    border-color: rgba(212, 175, 55, 0.25);
    transition: border-color 0.4s, box-shadow 0.4s, opacity 0.4s;
}

.cast-card.vip-slot:hover {
    transform: translateY(-2px);
    opacity: 0.85;
    border-color: rgba(212, 175, 55, 0.7);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

.coming-soon-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(245, 243, 237, 0.7);
    text-align: center;
    margin-top: 4px;
    letter-spacing: 0.1em;
    position: relative;
    z-index: 1;
}

/* ===== キャスト詳細ビュー（木札非表示・背景の上に重ねる） ===== */

/* hidden属性がついているときは必ず非表示 */
.cast-detail[hidden] {
    display: none !important;
}

/* ヘッダーの下から全面表示・キャラ画像が背景全体に広がる */
.cast-detail {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    height: calc(100vh - 90px);
    z-index: 100;
    animation: fadeIn 1.5s ease;
}

/* キャラ画像: 全面表示（吹き出しより背面に） */
.cast-detail-visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* デフォルト（大: 100%） */
.detail-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 60% bottom;
    display: block;
    /* 元の位置（右寄り下端）を起点にスケールする */
    transform-origin: 60% bottom;
}

/* 中: 元の位置を起点に80%縮小 */
.cast-detail-visual.size-medium .detail-image {
    transform: scale(0.8);
}

/* 小: 元の位置を起点に60%縮小 */
.cast-detail-visual.size-small .detail-image {
    transform: scale(0.6);
}

/* キャスト詳細情報エリア: 背景・枠なし、背景画像が透けて見える */
.cast-detail-info {
    position: absolute;
    top: 50%;
    right: 55%;
    left: auto;
    z-index: 1;
    animation: slideInLeftCenter 0.4s ease forwards;
    max-width: 320px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--spacing-md) var(--spacing-md);
    box-shadow: none;
}

/* 吹き出し尻尾は不要なので非表示 */
.cast-detail-info::after,
.cast-detail-info::before {
    display: none;
}

/* 名前（大きめ）・名前と説明の間の線のみ残す */
.detail-name {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 700;
    color: var(--paper-white);
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid rgba(212, 175, 55, 0.7);
    letter-spacing: 0.08em;
    text-shadow:
        -1px -1px 3px rgba(0, 0, 0, 0.9),
        1px -1px 3px rgba(0, 0, 0, 0.9),
        -1px 1px 3px rgba(0, 0, 0, 0.9),
        1px 1px 3px rgba(0, 0, 0, 0.9);
}

/* 説明文（2〜3行） */
.detail-description {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(245, 243, 237, 0.95);
    white-space: pre-line;
    margin-bottom: var(--spacing-sm);
    text-shadow:
        -1px -1px 3px rgba(0, 0, 0, 0.9),
        1px -1px 3px rgba(0, 0, 0, 0.9),
        -1px 1px 3px rgba(0, 0, 0, 0.9),
        1px 1px 3px rgba(0, 0, 0, 0.9);
}

/* 閉じるボタン */
.detail-close {
    display: block;
    width: 100%;
    padding: 0.4rem var(--spacing-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(212, 175, 55, 0.12);
    color: var(--paper-white);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.detail-close:hover {
    transform: translateY(-2px);
    background: rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.detail-close:focus-visible {
    outline: 2px solid var(--gold-accent);
    outline-offset: 2px;
}

/* ===== サイズ確認ボタン＆パネル ===== */

/* 右下に固定表示される📐ボタン */
.size-check-btn {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.5);
    background: rgba(10, 6, 4, 0.75);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.size-check-btn:hover {
    background: rgba(212, 175, 55, 0.25);
}

/* ボタンがアクティブ（割り当てサイズ表示中）のスタイル */
.size-check-btn.active {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--gold-accent);
}

/* スマホ: 画像を上・吹き出しを下中央に */
@media (max-width: 768px) {
    .cast-detail {
        top: 70px;
        height: calc(100vh - 70px);
    }

    .detail-image {
        object-fit: contain;
        object-position: center top;
    }

    /* top/right をリセットして下部中央に固定・スマホでは背景透明化して背景画像が透けるようにする */
    /* コメントと閉じるボタンが収まるよう bottom を少し上げる */
    .cast-detail-info {
        top: auto;
        right: auto;
        bottom: calc(var(--spacing-md) + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - var(--spacing-md) * 2);
        max-width: 480px;
        animation: slideInBottom 0.4s ease forwards;
        /* 背景・枠線・影を透明化 */
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* スマホでは名前・説明文に文字影をつけて読みやすくする */
    .cast-detail-info .detail-name,
    .cast-detail-info .detail-description {
        text-shadow:
            -1px -1px 3px rgba(0, 0, 0, 0.9),
            1px -1px 3px rgba(0, 0, 0, 0.9),
            -1px 1px 3px rgba(0, 0, 0, 0.9),
            1px 1px 3px rgba(0, 0, 0, 0.9);
    }

    /* 名前下の区切り線は残す */
    .cast-detail-info .detail-name {
        border-bottom: 1px solid rgba(212, 175, 55, 0.7);
        padding-bottom: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }

    /* スマホでは尻尾を非表示 */
    .cast-detail-info::after,
    .cast-detail-info::before {
        display: none;
    }

    .detail-name {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
    }

    /* スマホ: サイズ確認ボタンを右上に移動（下部のinfo panelと被らないように） */
    .size-check-btn {
        bottom: auto;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* スマホ: サイズ確認ボタンは右上に固定（元の位置を維持） */
    .size-check-btn {
        bottom: auto;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* スマホ: 閉じるボタンはパネル内に自然配置（fixed解除）。コメント下に表示 */
    .detail-close {
        position: static;
        width: 100%;
        margin-top: var(--spacing-xs);
        padding: 0.4rem var(--spacing-sm);
        font-size: 0.85rem;
    }
}

/* ===== 公式リンク ===== */
.official-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) 0;
}

.official-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 600;
    color: var(--paper-white);
    background: linear-gradient(135deg, var(--wood-brown) 0%, var(--charcoal) 100%);
    border: 2px solid var(--gold-accent);
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.official-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--shadow);
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--wood-brown) 100%);
}

/* リンクボタン内のアイコン画像 */
.official-icon {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

/* BOOTHアイコンは白ロゴなので暗い背景を追加 */
.official-icon--booth {
    background: #333;
    padding: 2px;
}

.official-link:focus-visible {
    outline: 3px solid var(--gold-accent);
    outline-offset: 3px;
}

.official-link--no-icon {
    justify-content: center;
}

/* ===== BGMプレイヤー ===== */
.bgm-player {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 15, 10, 0.85);
    border: 1px solid rgba(180, 130, 80, 0.5);
    border-radius: 30px;
    padding: 6px;
    backdrop-filter: blur(8px);
}

.bgm-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(180,130,80,0.5);
    background: transparent;
    color: rgba(200, 170, 120, 0.8);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.bgm-toggle-btn:hover {
    background: rgba(180, 130, 80, 0.2);
    color: #d4a96a;
}

.bgm-toggle-btn.active {
    background: rgba(180, 130, 80, 0.35);
    color: #f0c070;
    border-color: rgba(180, 130, 80, 0.8);
}

@media (max-width: 768px) {
    .bgm-player {
        bottom: 14px;
        right: 14px;
        padding: 6px;
    }

    .bgm-toggle-btn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
}

/* ===== キーフレームアニメーション ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-40px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 縦中央固定＋左スライドを両立するアニメーション */
@keyframes slideInLeftCenter {
    from {
        transform: translateY(-50%) translateX(-40px);
        opacity: 0;
    }
    to {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}

@keyframes slideInTop {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* スマホ詳細吹き出し: translateX(-50%)を維持しながら下からスライドイン */
@keyframes slideInBottom {
    from {
        transform: translateX(-50%) translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== お知らせセクション ===== */

/* イベントについての先頭に統合されたお知らせブロック */
.news-block {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.news-empty {
    color: rgba(245, 243, 237, 0.5);
    font-size: 0.9rem;
    text-align: center;
    padding: var(--spacing-lg) 0;
}

/* 各お知らせアイテム */
.news-item {
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 6px;
    padding: var(--spacing-md);
    background: #1e1208;
    transition: border-color 0.2s;
}

.news-item.is-new {
    border-color: rgba(212, 175, 55, 0.5);
    background: #2a1c08;
}

/* ヘッダー行: バッジ + 日付 */
.news-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 0.4rem;
}

/* NEWバッジ */
.news-badge {
    display: inline-block;
    background: var(--gold-accent);
    color: var(--ink-black);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1em 0.5em;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

/* 日付 */
.news-date {
    font-size: 0.8rem;
    color: rgba(245, 243, 237, 0.5);
    font-family: var(--font-body);
}

/* タイトル */
.news-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--paper-white);
    margin-bottom: 0.4rem;
}

/* 本文 */
.news-body {
    font-size: 0.875rem;
    color: rgba(245, 243, 237, 0.75);
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

/* お知らせ一覧へのボタン */
.news-more-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-md);
}

.news-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold-accent);
    background: none;
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    border-radius: 4px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 0.2s, border-color 0.2s;
}

.news-more-btn:hover,
.news-more-btn:focus-visible {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold-accent);
    outline: none;
}

/* リンク */
.news-link {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--gold-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
    transition: border-color 0.2s;
}

.news-link:hover {
    border-color: var(--gold-accent);
}

/* ===== レスポンシブ対応 ===== */

/* タブレット（〜1024px） */
@media (max-width: 1024px) {
    .cast-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマートフォン（〜768px） */
@media (max-width: 768px) {
    /* ヘッダーはタイトル＋ハンバーガーボタンを横並びのまま */
    .header-inner {
        flex-direction: row;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .header-logo {
        height: 36px;
    }

    .header-banner {
        height: 30px;
    }

    /* ヘッダー高さが減ったので余白を調整 */
    .main-content {
        padding-top: 80px;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .cast-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* スマホ2列に合わせてカードをコンパクト化 */
    .cast-card {
        padding: var(--spacing-xs);
        border-width: 2px;
        /* タップ時のホバーエフェクトを軽減 */
        transition: none;
    }

    .cast-card:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* タップ時の軽いフィードバック */
    .cast-card:active {
        opacity: 0.9;
        transform: scale(0.98);
    }

    .cast-name {
        font-size: 0.75rem;
        padding: 0.2rem var(--spacing-xs);
        margin-bottom: 0.2rem;
    }
    .cast-name.name-short  { font-size: 0.85rem; }
    .cast-name.name-medium { font-size: 0.75rem; }
    .cast-name.name-long   { font-size: 0.65rem; }

    .cast-role {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        top: 4px;
        right: 4px;
    }

    .coming-soon-label {
        font-size: 0.65rem;
    }

    .content-card {
        padding: var(--spacing-lg);
    }

    .popup-content {
        padding: var(--spacing-lg);
    }

    /* キャラクターロゴをスマホでは縮小・下部へ */
    .character-logo {
        width: 100px;
        height: 100px;
        right: 4%;
        bottom: 10%;
        top: auto;
        transform: none;
    }
}

/* 極小画面（〜375px） */
@media (max-width: 375px) {
    .main-title {
        font-size: 2rem;
    }

    .content-card {
        padding: var(--spacing-md);
    }

    .cast-grid {
        gap: 0.4rem;
    }

    .cast-name {
        font-size: 0.65rem;
    }
    .cast-name.name-short  { font-size: 0.75rem; }
    .cast-name.name-medium { font-size: 0.65rem; }
    .cast-name.name-long   { font-size: 0.55rem; }
}

/* ===== VIP発見モーダル ===== */
/* VIPスロット発見時に画面中央にオーバーレイ表示 */
.vip-discover-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(4px);
    animation: vipOverlayIn 0.3s ease;
}

.vip-discover-modal[hidden] {
    display: none;
}

@keyframes vipOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vip-discover-inner {
    position: relative;
    background: radial-gradient(ellipse at top, #1c1500 0%, #0a0800 60%, #000 100%);
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 4px;
    padding: var(--spacing-xl) var(--spacing-xl);
    text-align: center;
    max-width: 440px;
    width: calc(100% - var(--spacing-lg) * 2);
    box-shadow:
        0 0 0 4px rgba(212, 175, 55, 0.06),
        0 0 60px rgba(212, 175, 55, 0.15),
        0 24px 80px rgba(0, 0, 0, 0.7);
    animation: vipCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes vipCardIn {
    from { transform: scale(0.85) translateY(20px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* 装飾ライン（◆ ―――― ◆） */
.vip-discover-ornament {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.vip-discover-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.vip-discover-diamond {
    color: var(--gold-accent);
    font-size: 0.6rem;
    opacity: 0.7;
}

.vip-discover-eyebrow {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: rgba(212, 175, 55, 0.55);
    margin-bottom: 0.6rem;
}

.vip-discover-title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 4vw, 1.45rem);
    color: var(--gold-accent);
    margin-bottom: 0.5rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.vip-discover-sub {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    color: var(--paper-white);
    margin-bottom: 0;
    letter-spacing: 0.06em;
}

/* index.htmlではcard-style.cssを読み込まないためここでベーススタイルを定義 */
.btn-share-x {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    background: #000;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-share-x:hover {
    background: #111;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.btn-share-x:active {
    transform: scale(0.97);
    box-shadow: none;
}

/* VIP発見モーダル内のポストボタン：ゴールドボーダー */
.vip-discover-share {
    margin: var(--spacing-sm) auto 0;
    border-color: rgba(212, 175, 55, 0.45);
}

.vip-discover-share:hover {
    border-color: var(--gold-accent);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.2), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.vip-discover-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: rgba(245, 243, 237, 0.3);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.vip-discover-close:hover {
    color: rgba(245, 243, 237, 0.65);
}

/* ===== 名刺ジェネレーターボタン（イベントタブ・左下固定） ===== */

/* ボタン本体：バナーと同じ青背景・ピンク枠・白文字 */
.card-gen-btn {
    position: fixed;
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.75rem 1.1rem 0.75rem 1rem;
    background: #1a1acc;
    border: 3px solid #ff3399;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    z-index: 110;
    box-shadow: 0 0 12px rgba(255, 51, 153, 0.4);
    /* 非表示状態はスケール縮小・フェードアウト */
    opacity: 0;
    transform: scale(0.85) translateY(8px);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.25s ease;
}

/* イベントタブがアクティブのとき表示 */
.card-gen-btn.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.card-gen-btn:hover {
    box-shadow: 0 0 20px rgba(255, 51, 153, 0.7);
}

/* タイトル行：白・太字 */
.card-gen-title {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.06em;
    line-height: 1.3;
    /* バナーっぽいピンクのテキストシャドウ */
    text-shadow: 1px 1px 0 #ff3399, -1px -1px 0 #ff3399;
}

/* サブテキスト：「作成開始」白 */
.card-gen-sub {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.03em;
}

/* 「ここをクリック！」：右下角に斜めで枠に重なる */
.card-gen-badge {
    position: absolute;
    bottom: -0.65rem;
    right: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    color: #ffffff;
    background: #ff3399;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    transform: rotate(-6deg);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* PC：縦横比を維持しつつ全体を大きく */
@media (min-width: 769px) {
    .card-gen-btn {
        padding: 1.1rem 1.7rem 1.1rem 1.5rem;
        gap: 0.3rem;
        border-radius: 10px;
    }

    .card-gen-title {
        font-size: 1.15rem;
    }

    .card-gen-sub {
        font-size: 1.05rem;
    }

    .card-gen-badge {
        font-size: 0.8rem;
        bottom: -0.85rem;
        right: 0.9rem;
        padding: 0.15rem 0.5rem;
    }
}

/* スマホ：下部固定の広告バナー風フルWidth */
@media (max-width: 768px) {
    .card-gen-btn {
        /* 左右いっぱいに広げてバナー配置 */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-top: 3px solid #ff3399;
        /* 横並びレイアウト */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding: 0.7rem 1.2rem 0.7rem 1rem;
        /* バナーと同じ青背景 */
        background: #1a1acc;
        backdrop-filter: none;
    }

    /* タイトルと「作成開始」を左側にまとめる */
    .card-gen-title {
        font-size: 0.8rem;
        display: block;
    }

    .card-gen-sub {
        font-size: 0.72rem;
        display: block;
    }

    /* 右側にCTAボタン風のラベルとして「作成開始 →」をピンクで表示 */
    .card-gen-btn::after {
        content: '作成開始 →';
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 700;
        color: #ffffff;
        background: #ff3399;
        padding: 0.35rem 0.85rem;
        border-radius: 20px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* スマホでは「作成開始」テキストは非表示（::afterで代替） */
    .card-gen-sub {
        display: none;
    }

    /* バッジはバナーに馴染まないので非表示 */
    .card-gen-badge {
        display: none;
    }
}

/* ===================================================================
   画像遅延読み込み（Lazy Load）関連スタイル
   =================================================================== */

/* ===== ローディングスケルトン ===== */
/* シマーアニメーション（右から左へ光が流れる） */
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

/* 画像スケルトン：絶対配置で実画像と重ねる */
.skeleton-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 0;
    pointer-events: none;
}

/* ===== 画像ラッパー（スケルトンと実画像の重ね合わせ） ===== */
/* aspect-ratio で縦横比を維持しながらスケルトンを内包する */
.cast-image-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 3 / 4;
    margin-bottom: var(--spacing-sm);
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid rgba(212, 175, 55, 0.3);
    background: transparent;
}

/* ラッパー内のpicture要素はブロックで全幅・全高 */
.cast-image-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* ラッパー内の実画像はラッパーのサイズに合わせる */
/* （ラッパーが縦横比・ボーダー・マージンを担うため個別指定を上書き） */
.cast-image-wrapper .cast-image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* ===== 遅延読み込み画像のフェードイン ===== */
/* 読み込み前は透明（レイアウトスペースは確保） */
.cast-image.lazy-load {
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* 読み込み完了後にフェードイン */
.cast-image.lazy-load.loaded {
    opacity: 1;
}

/* ===================================================================
   漫画セクション・ライトボックス
   =================================================================== */


/* ===== 漫画セクション（イベントについてタブ内） ===== */
.about-manga {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.manga-description {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: var(--charcoal);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

/* 複数漫画を横並びに並べるグリッド */
.manga-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* サムネイル：クリック可能なプレビューエリア */
.manga-preview {
    position: relative;
    display: inline-block;
    max-width: 300px;
    width: 100%;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.manga-preview:hover,
.manga-preview:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    outline: 3px solid var(--gold-accent);
    outline-offset: 2px;
}

.manga-thumb {
    display: block;
    width: 100%;
    height: auto;
}

/* ホバー時に表示されるオーバーレイ */
.manga-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.manga-preview:hover .manga-overlay,
.manga-preview:focus-visible .manga-overlay {
    opacity: 1;
}

.manga-open-btn {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: var(--gold-accent);
    padding: 0.5rem 1.2rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.manga-page-count {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-display);
}

/* ===== ライトボックスモーダル ===== */
.manga-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.93);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer; /* 背景クリックで閉じる視覚的ヒント */
}

/* hiddenのときは非表示 */
.manga-lightbox[hidden] {
    display: none;
}

/* 閉じるボタン */
.manga-lb-close {
    position: fixed;
    top: 1.2rem;
    right: 1.5rem;
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 1.4rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    z-index: 10001;
}

.manga-lb-close:hover,
.manga-lb-close:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--gold-accent);
    outline: none;
}

/* 矢印＋画像の横並びrow（PC用） */
.manga-lb-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-height: calc(100vh - 7rem);
    pointer-events: none; /* rowはクリックを透過させ背景クリックを維持 */
}

/* 左右ナビゲーション矢印 */
.manga-lb-arrow {
    pointer-events: all; /* 矢印ボタン自体はクリック有効 */
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 2rem;
    width: 3rem;
    height: 5rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.manga-lb-arrow:hover,
.manga-lb-arrow:focus {
    background: rgba(212, 175, 55, 0.25);
    border-color: var(--gold-accent);
    outline: none;
}

.manga-lb-arrow:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

/* 漫画画像エリア */
.manga-lb-content {
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100%;
}

.manga-lb-img {
    max-width: 100%;
    max-height: calc(100vh - 7rem);
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-drag: none;
    cursor: default; /* 画像上はデフォルトカーソル */
}

/* フッター（インジケーター） */
.manga-lb-footer {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    cursor: default;
}

/* ページドットインジケーター */
.manga-lb-indicators {
    display: flex;
    gap: 0.6rem;
}

.manga-lb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.manga-lb-dot.active {
    background: var(--gold-accent);
    border-color: var(--gold-accent);
    transform: scale(1.3);
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
    .manga-lb-arrow {
        width: 2.2rem;
        height: 3.5rem;
        font-size: 1.4rem;
    }

    .manga-lb-row {
        gap: 0.4rem;
    }
}