/* ========================================
   CSS VARIABLES - 統合・最適化版
   ======================================== */

:root {
    /* === RESPONSIVE BREAKPOINTS === */
    /* 2-tier system: Mobile (< 768px) and Desktop (≥ 768px) */
    --bp-mobile-max: 767px;
    --bp-desktop-min: 768px;

    /* === COLOR SYSTEM === */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-accent-blue: #3a44ff;
    --color-accent-red: #ff0000;
    --color-cyan: #00F7FF;

    /* === GRID LAYOUT VARIABLES === */
    --grid-columns-45-55: 45% 55%;
    --grid-columns-60-40: 60% 40%;
    --grid-columns-30-70: 30% 70%;
    --grid-columns-50-50: 50% 50%;

    /* === SPACING SYSTEM === */
    --gap-tiny: 0.5rem;     /* 8px */
    --gap-small: 1rem;      /* 16px */
    --gap-standard: 2rem;   /* 32px */
    --gap-large: 3rem;      /* 48px */
    --gap-huge: 4rem;       /* 64px */

    --padding-tiny: 0.5rem;     /* 8px */
    --padding-small: 1rem;      /* 16px */
    --padding-standard: 1rem;   /* 16px */
    --padding-large: 2.5rem;    /* 40px */
    --padding-huge: 3.75rem;    /* 60px */

    /* === BORDER RADIUS SYSTEM === */
    --radius-tiny: 10px;
    --radius-small: 15px;
    --radius-standard: 20px;
    --radius-medium: 25px;
    --radius-large: 30px;
    --radius-huge: 50px;

    /* === TYPOGRAPHY SYSTEM === */
    --font-primary: 'Noto Sans JP', sans-serif;
    --font-size-responsive: clamp(0.75rem, 1vw, 1rem);
    --line-height-standard: 1.375;
    --letter-spacing-standard: 0.05em;

    /* === RESPONSIVE FONT SIZES === */
    --fs-title-desktop: clamp(32px, 3.5vw, 48px);
    --fs-title-mobile: clamp(24px, 6vw, 36px);
    --fs-content: 14px;
    --fs-date: clamp(12px, 1vw, 14px);

    /* === LAYOUT DIMENSIONS === */
    --header-height: 165px;
    --viewport-height-base: 100vh;
    --main-content-height: calc(100vh - var(--header-height));
    --container-max-width: 1400px;

    /* === DANCER LAYOUT VARIABLES === */
    --name-box-width: 778px;
    --profile-content-width: 849px;
    --gap-main: 107px;
    --gap-figma: 50px;

    /* === FIGMA TRANSFORM VARIABLES === */
    --transform-inner-width: 1200;
    --transform-inner-height: 675;
    --figma-aspect-ratio: calc(915 / 515);
    --figma-aspect-width: 915;
    --figma-aspect-height: 515;
    --figma-container-basis: 0;

    /* === ROTATION VARIABLES === */
    --rotation-angle: -90deg;
    --rotation-container-width: 1297px;
    --rotation-container-height: 914.984px;

    /* === PERFORMANCE SECTION === */
    --performance-title-width: 89.984px;
    --performance-video-width: 462px;
    --performance-video-area-width: 1296px;
    --performance-video-height: 462px;
    --performance-gap: 50px;

    /* === PROFILE SECTION === */
    --profile-section-width: 363px;
    --profile-title-height: 98px;
    --profile-content-gap: 10px;
    --profile-sns-padding: 30px;

    /* === SPONSOR SECTION === */
    --sponsor-section-height: 67.5rem; /* 1080px */
    --sponsor-main-height: 62%; /* 670px ratio */
    --sponsor-content-height: 38%; /* 410px ratio */
    --sponsor-left-width: 45%;
    --sponsor-right-width: 55%;
    --sponsor-logo-aspect: calc(255 / 564);
    --sponsor-border-radius: 51px;

    /* === INFO-NEWS SPECIFIC === */
    --info-news-container-pad: clamp(24px, 4vw, 48px);
    --info-news-gap-x: clamp(24px, 3vw, 48px);
    --info-news-gap-y: clamp(32px, 4vw, 48px);
    --info-news-visual-height: clamp(200px, 22vh, 280px);

    /* === INFO-NEWS SPECIFIC VARIABLES === */
    /* Layout */
    --info-news-desktop-left: 50%;
    --info-news-desktop-right: 50%;
    --info-news-container-max-width: 1920px;
    --info-news-padding: clamp(20px, 5vw, 60px);

    /* Colors */
    --info-news-bg-black: #000000;
    --info-news-text-white: #ffffff;
    --info-news-accent-blue: #3a44ff;
    --info-news-category-bg: rgba(58, 68, 255, 0.2);

    /* Typography */
    --info-news-font: 'Noto Sans JP', sans-serif;
    --info-news-title-size-desktop: clamp(32px, 3.5vw, 48px);
    --info-news-content-size: 16px;
    --info-news-date-size: 14px;

    /* Border Radius */
    --info-news-image-radius: 20px;
    --info-news-category-radius: 15px;
    --info-news-button-radius: 20px;

    /* === DANCER SPECIFIC === */
    --dancer-desktop-left: 30%;
    --dancer-desktop-right: 70%;
    --dancer-padding: 40px;
    --dancer-gap: 30px;
    --dancer-video-radius: 30px;
    --dancer-mobile-radius: 20px;

    /* === Z-INDEX SYSTEM === */
    /* Base Layer (0-99) */
    --z-base: 0;
    --z-main-content: 1;
    --z-sidebar: 10;
    --z-header: 50;
    --z-footer: 50;

    /* WHSJ Mobile Layer System */
    --z-whsj-bg-vector: 0;
    --z-whsj-video: 1;
    --z-whsj-accent-vector: 1.5;
    --z-whsj-text: 2;
    --z-whsj-text-content: 3;
    --z-whsj-sono: 4;

    /* Content Layer (100-999) */
    --z-content-overlay: 100;

    /* Navigation Layer (1000-9999) */
    --z-fixed-header: 1000;
    --z-dropdown-menu: 2000;
    --z-mobile-menu: 3000;

    /* Overlay Layer (10000+) */
    --z-navigation-overlay: 10000;
    --z-modal: 10001;
    --z-tooltip: 10002;
    --z-notification: 10003;
}

/* ========================================
   スクロールバー二重問題修正（A案：HTMLレベル制御統一）
   ======================================== */
html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow: visible;
}

/* 最適化されたスクロールバー制御 */
html, body {
    scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none; /* Webkit browsers */
}

/* 登録ダンサー詳細ページ専用変数は統合済み :root セクションに移動 */

/* INFO & NEWS 詳細ページ専用変数は統合済み :root セクションに移動 */

/* ========================================
   モバイルスクロール修正（h-full制約解除）
   ======================================== */
@media (max-width: 767px) {
    html, body {
        height: auto !important;
        min-height: 100vh;
    }
}

/* ========================================
   BASIC SETUP - Tailwind主体、補助的カスタムCSS
======================================== */

/* 基本表示制御クラス - Tailwind互換 */
.hidden {
    display: none;
}

.block {
    display: block;
}

/* ジャンルフィルタリング用スタイル */
.genre-filtered {
    display: none !important;
}

.genre-highlight {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(58, 68, 255, 0.3);
    transition: all 0.3s ease;
}

.genre-dimmed {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.genre-filter-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(58, 68, 255, 0.1);
    border-radius: var(--radius-small);
    color: var(--color-white);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.filter-clear {
    background: var(--color-accent-red);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.empty-results::after {
    content: 'フィルター条件に一致するダンサーがいません';
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    padding: 2rem;
    font-size: 0.875rem;
}

/* レスポンシブグリッド最適化 */
.dancers-grid-4col {
    display: block;
}

/* ========================================
   STEPJAMRE ROOT CONTAINER
======================================== */

.stepjamre-root {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* ========================================
   WHSJ SECTION - COMPLEX GRID LAYOUT
======================================== */

/* Desktop WHSJ Section Grid Layout - HTML基準3列2行構造 */
.whsj-section-container {
    display: grid;
    grid-template-columns: 55% 30% 15%;  /* HTML基準パーセンテージ指定で比率保持 */
    grid-template-rows: 7fr 3fr;         /* HTML基準 70% : 30% */
    grid-template-areas:
        "video-area    content-area  sono"
        "vector-area   content-area  sono";
    width: 100%;
    aspect-ratio: 16 / 9; /* 動的高さ：幅に応じて自動調整 */
}

/* Video Area (Left Top) - HTML基準 */
.whsj-video-area {
    grid-area: video-area;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Vector Area (Left Bottom) - HTML基準 */
.whsj-vector-area {
    grid-area: vector-area;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content Area (Center) - HTML基準 */
.whsj-content-area {
    grid-area: content-area;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 4vw, 5rem);
    gap: 1rem;
}

/* ========================================
   Sono Area - 70vh統一型レスポンシブ設計
   ======================================== */

/* 全ビューポート共通：セクションコンテナの70%サイズ */
.whsj-sono-area {
    /* 親要素は高さのみ指定、幅は画像のアスペクト比から自動計算 */
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 画像スタイル統一：画像自体にアスペクト比設定 */
.whsj-sono-area img {
    height: 100%;
    width: auto;
    aspect-ratio: 157 / 1182;  /* SVG本来のアスペクト比を画像に設定 */
    object-fit: contain;
    object-position: center;
}

/* Desktop WHSJ Section - Unified Layout (768px以上) */
@media (min-width: 768px) {
    .whsj-section-container {
        display: grid;
        grid-template-columns: 1fr 1fr 0.6fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "video content sono"
            "vector content sono";
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    
    /* Sono Area デスクトップ配置 */
    .whsj-sono-area {
        grid-area: sono;
        justify-self: end;
        align-self: center;
        padding: 0 2rem;
    }
    
    .whsj-content-area {
        padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 3vw, 3rem);
        gap: 0.75rem;
    }
    
    .whsj-text-responsive {
        font-size: clamp(0.875rem, 2.2vw, 1rem);
        line-height: 1.4;
        letter-spacing: 0.05em;
        text-align: justify;
        word-break: break-word;
        hyphens: auto;
        font-weight: 300;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        color: rgba(255, 255, 255, 0.95);
    }
    
    /* Desktop Enhancement */
    @media (min-width: 768px) {
        .whsj-text-responsive {
            font-size: clamp(1rem, 1.2vw, 1.125rem);
            line-height: 1.375;
        }
    }
}

/* ========================================
   WHSJ Text Responsive - Mobile Fix
   モバイル専用: テキストの強制改行とコンテナ収まり
   ======================================== */
@media (max-width: 767px) {
    .whsj-text-responsive {
        /* 強制改行を確実にする */
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        
        /* コンテナからはみ出さないように */
        overflow: hidden !important;
        max-width: 100%;
        
        /* 可読性向上 */
        line-height: 1.6;
        text-align: left;
    }
    
    /* 子要素の.leading-snugとpタグもオーバーライド */
    .whsj-text-responsive .leading-snug,
    .whsj-text-responsive p {
        word-break: inherit !important;
        overflow-wrap: inherit !important;
        line-height: inherit !important;
        white-space: normal !important;
    }
}

/* Mobile WHSJ Section - Enhanced Responsive Layout */
@media (max-width: 767px) {
    .whsj-section-container {
        display: flex;
        flex-direction: column;
        position: relative;
        min-height: max(600px, 80vh);
        aspect-ratio: unset;
        overflow: visible;
    }
    
    .whsj-video-area {
        position: relative;
        width: 100%;
        height: clamp(300px, 50vh, 400px);
        flex-shrink: 0;
        z-index: var(--z-whsj-video);
    }
    
    .whsj-content-area {
        position: relative;
        width: 100%;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
        gap: clamp(1rem, 3vw, 1.5rem);
        z-index: var(--z-whsj-text);
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
    }

    /* Mobile background overlay - opacity only */
    .bg-overlay-mobile {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
    }

    /* WHSJ Vector System - Enhanced Mobile Layout */
    
    /* Background vector - simplified positioning */
    .whsj-vector-area {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60%;
        z-index: var(--z-whsj-bg-vector);
        opacity: 0.4;
        pointer-events: none;
        overflow: hidden;
    }
    
    .whsj-vector-area img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: bottom center;
        transform: translateZ(0);
        filter: brightness(0.85) contrast(0.9);
    }
    
    /* WHSJ Text Box Vector Background - Optimized */
    .whsj-textbox-vector-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 600/413;
        min-height: clamp(200px, 30vw, 300px);
        z-index: calc(var(--z-whsj-text) - 1);
        opacity: 0.6;
        pointer-events: none;
        overflow: visible;
    }
    
    .whsj-textbox-vector-bg img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center center;
        aspect-ratio: 600/413;
        transform: translateZ(0);
        filter: brightness(0.9) contrast(0.85);
        display: block;
        min-height: clamp(200px, 30vw, 300px);
    }

    /* SVG背景コンテナ - フル幅利用 */
    .whsj-svg-background-container {
        width: 100%;
        position: relative;
        z-index: 1;
        overflow: hidden; /* 横スクロール防止 */
    }

    /* モバイル専用調整 - 768px以下でSTEPJAM全文表示確保 */
    @media (max-width: 768px) {
        .whsj-svg-background-container {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            transform: translateZ(0); /* ハードウェアアクセラレーション */
            max-width: 100vw; /* 最大幅制限 */
        }

        /* 親要素の横スクロール防止 */
        body, html {
            overflow-x: hidden;
        }
    }

    /* 小型デバイス対応 - 375px以下 */
    @media (max-width: 375px) {
        .whsj-svg-background-container {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            min-width: 320px; /* 最小幅保証 */
        }
    }

    /* ベクターシステム共通最適化 */
    .whsj-vector-area,
    .whsj-textbox-vector-bg {
        contain: layout style paint;
        will-change: transform, opacity;
        backface-visibility: hidden;
    }

    /* STEPJAMで広がる テキストオーバーレイスタイル */
    .stepjam-text-overlay {
        pointer-events: none; /* 背景の相互作用を維持 */
        text-align: center;
    }

    .stepjam-promo-text {
        font-weight: 300;
        letter-spacing: 0.1em;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        white-space: nowrap;
    }

    .stepjam-brand {
        font-weight: 700;
        font-size: clamp(18px, 4vw, 28px);
    }

    .stepjam-connector {
        font-weight: 300;
        font-size: clamp(14px, 3vw, 20px);
        margin: 0 0.2em;
    }

    .stepjam-action {
        font-weight: 500;
        font-size: clamp(16px, 3.5vw, 24px);
    }

    /* モバイル専用調整 - 768px以下でSTEPJAM全文表示確保 */
    @media (max-width: 768px) {
        .stepjam-text-overlay {
            padding: 0 10px;
        }

        .stepjam-promo-text {
            font-size: clamp(16px, 5vw, 24px);
        }
    }

    /* Sono Area モバイル配置 */
    .whsj-sono-area {
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: var(--z-whsj-sono);
        opacity: 0.95;
        pointer-events: none;
        transform: translateZ(0);
    }
    
    .whsj-sono-area img {
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
        transform: translateZ(0);
    }
    
    /* Enhanced Text Readability - Removed: Conflicting !important rules moved to unified definition */
    
    /* Touch-Friendly Interactive Elements */
    .whsj-content-area [role="button"],
    .whsj-content-area a,
    .whsj-content-area button {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* 統合されたモバイル最適化 - 横スクロール防止とベクター調整 */
    .whsj-section-container,
    .whsj-content-area,
    .whsj-video-area,
    .whsj-vector-area {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* 画像の適応性向上 */
    .whsj-video-area img,
    .whsj-vector-area img {
        object-fit: contain !important;
        object-position: center !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* ベクター統一最適化 */
    .whsj-vector-area {
        opacity: 0.35; /* 統一設定 */
    }
    
    .whsj-textbox-vector-bg {
        opacity: 1.0;
        overflow: visible;
        max-width: 100vw;
        height: clamp(250px, 35vh, 350px);
        z-index: calc(var(--z-whsj-text) - 1);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
}

/* ========================================
   WHSJ VC MOBILE - Responsive Display Control
======================================== */

/* デフォルト: 非表示 (768px以上) */
.whsj-vc-mobile {
    display: none;
}

/* モバイル専用表示 (767px以下) */
@media (max-width: 767px) {
    .whsj-vc-mobile {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: var(--z-whsj-bg-vector, 1);
    }
    
    .whsj-vc-mobile img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* ========================================
   LIBRARY TOP SECTION - RESPONSIVE GRID
   ※ Lib-Top styles are now in components/lib-top-grid.css
======================================== */

/* ========================================
   LIBRARY LIST SECTION - HTML基準完全実装
======================================== */

/* Desktop Lib-List Container - HTML基準 */
.lib-list-container {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header-area"
        "cards-area";
    height: 100%;
    max-width: min(1200px, 90%);
    margin: 0 auto;
    position: relative;
}

/* Desktop Header Area - HTML基準 */
.lib-list-header-area {
    grid-area: header-area;
    display: grid;
    grid-template-rows: 48.7% 51.3%;  /* 109px : 115px の比率 - HTML基準 */
    height: 100%;
}

.lib-list-title-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 0;
}

.lib-list-button-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

/* Desktop Cards Area - 参考デザイン準拠 */
.lib-list-cards-area {
    grid-area: cards-area;
    height: 100%;
    padding: 2rem 0 4rem 0;  /* 下部を64pxに増加してfooter余白を確保 */
}

.lib-list-cards-grid {
    display: grid;
    width: 100%;
    min-height: 600px;
}

/* Desktop Dancers Areas - Grid Stack Layout（Footer余白問題の解決） */
#tokyo-dancers,
#osaka-dancers,
#tohoku-dancers {
    grid-area: 1 / 1;
    width: 100%;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#tokyo-dancers.hidden,
#osaka-dancers.hidden,
#tohoku-dancers.hidden {
    display: none !important;
}

.lib-list-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 280px;
    max-width: 280px;
    min-width: 180px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.lib-list-card:hover {
    transform: translateY(-5px);
}

.card-image {
    width: 100%;
    aspect-ratio: 9/16; /* 9:16の縦長比率 */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-text {
    text-align: center;
}

.card-text .dancer-name {
    color: #ffffff;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Mobile Lib-List Container - HTML基準 */
.lib-list-container-mobile {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header-area-mobile"
        "cards-area-mobile";
    height: 100%;
    max-width: min(600px, 90%);
    margin: 0 auto;
    position: relative;
    padding: 60px 0;
}

/* Mobile Header Area - HTML基準 */
.lib-list-header-area-mobile {
    grid-area: header-area-mobile;
    display: grid;
    grid-template-rows: 48.7% 51.3%;  /* 109px : 115px の比率 - HTML基準 */
    height: 100%;
}

.lib-list-title-area-mobile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
}

.lib-list-button-area-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Mobile Cards Area - HTML基準 */
.lib-list-cards-area-mobile {
    grid-area: cards-area-mobile;
    height: 100%;
    padding: 1rem 0 2.5rem 0;  /* 下部を40pxに増加してfooter余白を確保 */
}

.lib-list-cards-grid-mobile {
    display: grid;
    width: 100%;
    padding: 0 5px;
    min-height: 800px;
}

/* Mobile Dancers Areas - Grid Stack Layout（Footer余白問題の解決） */
#tokyo-dancers-mobile,
#osaka-dancers-mobile,
#tohoku-dancers-mobile {
    grid-area: 1 / 1;
    width: 100%;
    padding: 0 5px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#tokyo-dancers-mobile.hidden,
#osaka-dancers-mobile.hidden,
#tohoku-dancers-mobile.hidden {
    display: none !important;
}

/* ========================================
   Empty State Spacing - Footer重なり問題解決
   Issue: lib-list各タブでダンサー数0件時にfooterと重なる
   Solution: 空データ時に追加のpadding-bottomを適用
======================================== */

/* デスクトップ: 空データ時の追加余白 */
.lib-list-cards-grid.empty-state-spacing {
    padding-bottom: 15rem; /* 240px - footer余白を確保 */
}

/* モバイル: 空データ時の追加余白 */
.lib-list-cards-grid-mobile.empty-state-spacing {
    padding-bottom: 12rem; /* 192px - footer余白を確保 */
}

/* ========================================
   未定義クラス追加 - HTML基準見栄え再現
======================================== */

/* Library Tab Buttons - 参考デザイン準拠 */
.library-tab-btn {
    background-color: transparent;
    border: 2px solid #3a44ff; /* デザイン準拠の青色 */
    color: #ffffff;
    padding: 12px 32px;
    border-radius: 50px; /* 参考デザインの丸いボタン形状 */
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 120px;
    text-align: center;
}

/* TOKYO ボタン - アクティブ状態（青塗りつぶし） */
.library-tab-btn.tokyo-active {
    background-color: #3a44ff;
    border-color: #3a44ff;
    color: #ffffff;
}

/* OSAKA ボタン - 非アクティブ状態（青線のみ） */
.library-tab-btn.osaka-inactive {
    background-color: transparent;
    border-color: #3a44ff;
    color: #ffffff;
}

/* TOHOKU ボタン - 非アクティブ状態（青線のみ） */
.library-tab-btn.tohoku-inactive {
    background-color: transparent;
    border-color: #3a44ff;
    color: #ffffff;
}

/* ホバー効果 */
.library-tab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(58, 68, 255, 0.3);
}

/* レスポンシブ対応: 小画面用ボタンサイズ調整 */
@media (max-width: 480px) {
    .library-tab-btn {
        padding: 8px 20px;
        font-size: 0.875rem;
        min-width: unset;
        flex-shrink: 1;
    }
}

/* Library Title Images - HTML基準 */
.lib-title-image {
    width: 100%;
    text-align: center;
    margin: 2rem 0;
}

.lib-title-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    object-fit: contain;
}

.lib-title-image.hidden {
    display: none;
}

/* Dancers Grid - 参考デザイン準拠 4カード横並び */
.dancers-grid {
    display: flex;
    gap: clamp(1rem, 2.5%, 2rem);
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

@media (max-width: 767px) {
    .dancers-grid {
        gap: clamp(0.3rem, 1%, 0.5rem);
        justify-content: center;
        width: 100%;
    }
    
    .lib-list-card {
        flex: 0 0 auto;
        width: min(180px, 45vw);
        max-width: 180px;
        min-width: 120px;
    }
}

/* Dancer Card - HTML基準 */
.dancer-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.dancer-card:hover {
    transform: scale(1.05);
}

.dancer-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.dancer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dancer-info {
    padding: 1rem;
    text-align: center;
}

.dancer-name {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.dancer-profile {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ========================================
   ENHANCED RESPONSIVE GRID LAYOUT
======================================== */

/* 4-Column Desktop Grid */
.dancers-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2.5%, 2rem);
    width: 100%;
    justify-items: center;
    align-items: start;
}

/* 2-Column Mobile Grid */
.dancers-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.5rem, 1.5%, 1rem);
    width: 100%;
    justify-items: center;
    align-items: start;
}

/* Enhanced Card Styles for Grid Layout */
.dancers-grid-4col .lib-list-card,
.dancers-grid-2col .lib-list-card {
    width: 100%;
    max-width: 280px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

/* Genre display for enhanced cards */
.dancer-genre {
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    /* Force 2-column layout on mobile */
    .dancers-grid-4col {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.5rem, 2%, 1rem);
    }
}

@media (max-width: 480px) {
    /* Even smaller mobile screens */
    .dancers-grid-4col,
    .dancers-grid-2col {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.3rem, 1.5%, 0.8rem);
    }

    .dancers-grid-4col .lib-list-card,
    .dancers-grid-2col .lib-list-card {
        min-width: 120px;
        max-width: 200px;
    }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .dancers-grid-4col {
        gap: 2.5rem;
    }

    .dancers-grid-4col .lib-list-card {
        max-width: 320px;
    }
}

/* ========================================
   RESPONSIVE UTILITIES
======================================== */

/* Ensure grid layouts work across screen sizes */
@media (min-width: 768px) {
    .md\:block {
        display: block !important;
    }
    
    .hidden.md\:block {
        display: block !important;
    }
}

/* ========================================
   WHSJ TEXT RESPONSIVE FONT SIZE - HTML基準
   Note: Removed conflicting duplicate definitions - unified in main definition
======================================== */

/* ========================================
   ENHANCED GENRE FILTERING STYLES
   ======================================== */

/* Genre Filter Status */
.genre-filter-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(66, 153, 225, 0.1);
    border: 1px solid rgba(66, 153, 225, 0.3);
    border-radius: 4px;
    margin: 0.5rem 0 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    animation: filterApplied 0.3s ease;
}

.genre-filter-status .filter-text {
    font-weight: 500;
}

.genre-filter-status .filter-count {
    background: rgba(66, 153, 225, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.genre-filter-status .filter-clear {
    background: rgba(239, 68, 68, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: background-color 0.2s ease;
}

.genre-filter-status .filter-clear:hover {
    background: rgba(239, 68, 68, 1);
}

/* Genre Highlight Effects */
.lib-list-card.genre-highlight {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(66, 153, 225, 0.4);
    border: 2px solid rgba(66, 153, 225, 0.6);
    transition: all 0.3s ease;
    z-index: 10;
    position: relative;
}

.lib-list-card.genre-dimmed {
    opacity: 0.3;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.lib-list-card.genre-filtered {
    display: none !important;
}

/* Enhanced Card Genre Styling */
.lib-list-card .dancer-genre {
    padding: 0.25rem 0.5rem;
    background: rgba(66, 153, 225, 0.2);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: all 0.3s ease;
}

.lib-list-card:hover .dancer-genre {
    background: rgba(66, 153, 225, 0.4);
    color: white;
}

/* Filter Animation Effects */
@keyframes filterApplied {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Genre Filter Adjustments */
@media screen and (max-width: 768px) {
    .genre-filter-status {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
        gap: 0.5rem;
    }

    .genre-filter-status .filter-count {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    .lib-list-card.genre-highlight {
        transform: scale(1.02);
        box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
    }

    .lib-list-card.genre-dimmed {
        opacity: 0.4;
        transform: scale(0.98);
    }
}

/* ========================================
   FIGMA RESPONSIVE ASPECT RATIOS
   ======================================== */

/* Mobile-first: 9:16 aspect ratio for image containers */
[data-name="lib-siglen_acf-dancer-img"] {
    aspect-ratio: 9/16;
}

/* Desktop: Use Figma aspect ratio (915:515) */
@media (min-width: 768px) {
    [data-name="lib-siglen_acf-dancer-img"] {
        aspect-ratio: var(--figma-aspect-width) / var(--figma-aspect-height);
    }
}

/* ========================================
   SPONSOR SECTION - RESPONSIVE GRID LAYOUT
   ======================================== */

/* スポンサーセクション変数は統合済み :root セクションに移動 */

/* Progressive Enhancement: Base styles first */
.sponsor-section-container {
    position: relative;
    width: 100%;
    min-height: 300px; /* ロゴを見やすくするための最小高さを追加 */
    height: auto; /* 固定高さを削除し、コンテンツに合わせて自動調整 */
    overflow: hidden;
    background-color: var(--figma-black, #000000);
    padding-top: 6rem; /* メインコンテナ上部に余白を追加（3倍に変更） */
}

/* Enhanced Grid Layout for Modern Browsers */
@supports (display: grid) {
    .sponsor-section-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: var(--sponsor-main-height, 62%) var(--sponsor-content-height, 38%);
        width: 100%;
        max-width: 100vw;
        height: var(--sponsor-section-height, 67.5rem);
        position: relative;
    }
}

/* Main Slider Container: REMOVED for rebuild */

/* Sponsor Content Container */
.sponsor-content-container {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
}

/* Fallback for non-grid browsers */
@supports not (display: grid) {
    .sponsor-content-container {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 38%;
        display: flex;
    }
}

/* Sponsor Content Left (Priority 3) - Semantic Article Section */
.sponsor-content-left {
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}

/* Fallback for non-grid browsers */
@supports not (display: grid) {
    .sponsor-content-left {
        flex: 0 0 45%;
    }
}

/* Logo Slider Right (Priority 2) - Semantic Navigation */
.sponsor-logo-right {
    flex: 0 0 55%;
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 30px 0; /* ロゴエリアに上下パディングを追加 */
}

/* Fallback for non-grid browsers */
@supports not (display: grid) {
    .sponsor-logo-right {
        flex: 0 0 55%;
    }
}

/* ========================================
   SWIPER CUSTOM STYLES - Enhanced for Sponsor Section
   ======================================== */

/* Main Slider: REMOVED for rebuild */

/* Logo Slider Continuous Animation */
.logo-slider-desktop .swiper-wrapper,
.logo-slider-mobile .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Sponsor Logo Slides - Simplified */
.sponsor-logo-right .swiper-slide {
    min-width: 0;
}

/* Accessibility: Ensure focus visibility */
.sponsor-logo-right .swiper-slide a:focus,
.sponsor-logo-right .swiper-slide img:focus {
    outline: 2px solid var(--figma-cyan, #00F7FF);
    outline-offset: 2px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS - Mobile First Approach
   ======================================== */

/* Tablet and Desktop optimizations */
@media (min-width: 768px) {
    .sponsor-content-container {
        flex-direction: row;
    }
    
    .sponsor-content-left {
        order: 1; /* デスクトップ表示でスポンサーコンテンツを左側に配置 */
    }
    
    .sponsor-logo-right {
        order: 2; /* デスクトップ表示でロゴスライダーを右側に配置 */
    }
}

/* Mobile Layout Adjustments */
@media (max-width: 767px) {
    .sponsor-content-container {
        flex-direction: column;
        height: 100%;
    }
    
    .sponsor-content-left {
        flex: 0 0 30%;
        order: 1; /* モバイル表示でスポンサーコンテンツを上部に配置 */
        position: relative; /* 子要素の絶対配置基準 */
        align-items: flex-end; /* 内容を下端に配置 */
    }
    
    /* モバイル時のスポンサータイトル画像をbottom配置（中央揃え維持） - 特異性強化 */
    .sponsor-content-container .sponsor-content-left > div {
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: clamp(55%,calc(65% + 1vw),85%) !important;
        height: clamp(40%,46.7%,55%) !important;
    }
    
    .sponsor-logo-right {
        flex: 0 0 60%;
        order: 2; /* モバイル表示でロゴスライダーを下部に配置 */
    }
    
    /* Fallback for non-grid browsers */
    @supports not (display: grid) {
        .sponsor-content-container {
            flex-direction: column;
            height: 100%;
        }
        
        .sponsor-content-left {
            flex: 0 0 30%;
            order: 1; /* モバイル表示でスポンサーコンテンツを上部に配置 */
            position: relative; /* 子要素の絶対配置基準 */
            align-items: flex-end; /* 内容を下端に配置 */
        }
        
        /* Fallback: モバイル時のスポンサータイトル画像をbottom配置（中央揃え維持） - 特異性強化 */
        .sponsor-content-container .sponsor-content-left > div {
            position: absolute !important;
            bottom: 0 !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: clamp(55%,calc(65% + 1vw),85%) !important;
            height: clamp(40%,46.7%,55%) !important;
        }
        
        .sponsor-logo-right {
            flex: 0 0 60%;
            order: 2; /* モバイル表示でロゴスライダーを下部に配置 */
        }
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU Acceleration for smooth animations */
.sponsor-logo-right {
    will-change: transform;
    transform: translateZ(0);
}

/* Reduce layout thrashing */
.sponsor-section-container * {
    box-sizing: border-box;
}

/* Responsive padding for sponsor section container */
@media (max-width: 767px) {
    .sponsor-section-container {
        padding-top: 4.5rem; /* モバイルでは上部余白を少し小さく（3倍に変更） */
    }
}

@media (max-width: 480px) {
    .sponsor-section-container {
        padding-top: 3rem; /* 小画面では更に小さく（3倍に変更） */
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Screen reader only content */
.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;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sponsor-logo-right .swiper-slide {
        border: 2px solid var(--figma-white, #FFFFFF);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .logo-slider-desktop .swiper-wrapper,
    .logo-slider-mobile .swiper-wrapper {
        transition: none !important;
    }
    
    .sponsor-logo-right {
        will-change: auto;
    }
}

/* ========================================
   登録ダンサー詳細ページ - 新デザイン実装
   ======================================== */

/* メインコンテナ */
.toroku-dancer-detail {
    background-color: var(--dancer-bg-black);
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* ========================================
   デスクトップレイアウト
   ======================================== */
.desktop-layout {
    display: grid;
    grid-template-columns: var(--dancer-desktop-left) var(--dancer-desktop-right);
    height: 100vh;
    width: 100%;
}

/* 左列: サムネイル画像エリア */
.desktop-layout .thumbnail-area {
    position: relative;
    height: 100vh;
    background-color: #3a44ff; /* デザイン準拠の青色 */
}

.desktop-layout .thumbnail-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.desktop-layout .thumbnail-placeholder {
    width: 100%;
    height: 100%;
    background-color: #3a44ff;
}

/* 右列: コンテンツエリア */
.desktop-layout .content-area {
    padding: var(--dancer-padding);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--dancer-bg-black);
}

/* ヘッダーエリア */
.desktop-layout .header-area {
    margin-bottom: 60px;
}

.desktop-layout .dancer-name {
    color: var(--dancer-text-white);
    font-size: clamp(48px, 5vw, 80px);
    font-weight: 900;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    line-height: 1.05;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.desktop-layout .dancer-genre {
    color: var(--dancer-text-white);
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400;
    letter-spacing: 0.05em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Performance セクション */
.desktop-layout .performance-section {
    margin-bottom: 60px;
}

.desktop-layout .section-title {
    color: var(--dancer-text-white);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    margin-bottom: 30px;
    letter-spacing: 0.02em;
}

/* Performance コンテナ - 左固定画像 + 右YouTubeスライダー */
.desktop-layout .performance-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dancer-gap);
}

/* 固定画像なしの場合：1カラムレイアウト */
.desktop-layout .performance-container.no-fixed-image {
    grid-template-columns: 1fr;
}

/* 固定画像なしの場合：YouTubeスライダーをフル幅表示 */
.desktop-layout .performance-container.no-fixed-image .youtube-slider-container {
    width: 100%;
    max-width: 100%;
}

/* 左側: 固定画像エリア */
.desktop-layout .performance-fixed-image {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--dancer-video-radius);
    overflow: hidden;
}

.desktop-layout .performance-fixed-image .fixed-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右側: YouTubeスライダーエリア */
.desktop-layout .youtube-slider-container {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--dancer-video-radius);
    overflow: hidden;
}

.desktop-layout .youtube-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.desktop-layout .youtube-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.desktop-layout .youtube-slider .slide.active {
    opacity: 1;
}

.desktop-layout .youtube-slider .slide iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.desktop-layout .video-placeholder {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: var(--dancer-video-radius);
}

/* Profile セクション */
.desktop-layout .profile-section {
    flex: 1;
}

.desktop-layout .profile-content {
    display: flex;
    gap: 40px;
}

.desktop-layout .profile-text {
    flex: 1;
    color: var(--dancer-text-white);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.desktop-layout .sns-icons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.desktop-layout .sns-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dancer-text-white);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.desktop-layout .sns-icon:hover {
    background-color: var(--dancer-text-white);
}

.desktop-layout .sns-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.desktop-layout .sns-icon:hover img {
    filter: none;
}

/* ========================================
   モバイルレイアウト
   ======================================== */
.mobile-layout {
    background-color: var(--dancer-bg-black);
    min-height: 100vh;
    padding-bottom: 60px;
}

/* モバイルヘッダー */
.mobile-header {
    padding: 40px 20px;
    text-align: center;
}

.mobile-header .dancer-name {
    color: var(--dancer-text-white);
    font-size: clamp(64px, 16vw, 120px);
    font-weight: 900;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    line-height: 1.05;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.mobile-header .dancer-genre {
    color: var(--dancer-text-white);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.05em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* モバイルサムネイル */
.mobile-thumbnail {
    width: 100%;
    position: relative;
    background-color: #3a44ff;
    /* サムネイル画像に合わせて高さ自動調整 */
    min-height: 300px; /* 最小高さを設定 */
    aspect-ratio: auto; /* アスペクト比を画像に合わせる */
}

/* タブレット以下でのサムネイル画像コンテナ高さ自動調整 */
/* Note: 1024px used for fine-tuning, not main breakpoint (main: 768px) */
@media (max-width: 1024px) {
    .mobile-thumbnail {
        height: auto; /* 高さを画像に合わせる */
        min-height: 250px;
    }
    
    .mobile-thumbnail .thumbnail-image {
        /* タブレットでのアスペクト比最適化 */
        background-size: contain;
        height: auto;
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .mobile-thumbnail {
        min-height: 200px;
    }
    
    .mobile-thumbnail .thumbnail-image {
        /* モバイルでのアスペクト比最適化 */
        min-height: 200px;
    }
}

.mobile-thumbnail .thumbnail-image {
    width: 100%;
    height: 100%;
    min-height: inherit; /* 親要素の最小高さを継承 */
    background-size: contain; /* cover → contain に変更で全体表示 */
    background-position: center;
    background-repeat: no-repeat;
    /* アスペクト比維持のための追加設定 */
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-thumbnail .thumbnail-placeholder {
    width: 100%;
    height: 100%;
    min-height: inherit;
    background-color: #3a44ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* モバイルPerformance */
.mobile-performance {
    padding: 40px 20px;
}

.mobile-performance .section-title {
    color: var(--dancer-text-white);
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

/* モバイル固定画像エリア */
.mobile-performance .mobile-fixed-image {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--dancer-mobile-radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.mobile-performance .mobile-fixed-image .fixed-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 固定画像なしの場合：YouTubeスライダーエリアの上マージンを削除 */
.mobile-performance.no-fixed-image .mobile-youtube-slider {
    margin-top: 0;
}

/* モバイルYouTubeスライダーエリア */
.mobile-performance .mobile-youtube-slider {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--dancer-mobile-radius);
    overflow: hidden;
}

.mobile-performance .youtube-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.mobile-performance .youtube-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.mobile-performance .youtube-slider .slide.active {
    opacity: 1;
}

.mobile-performance .youtube-slider .slide iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* モバイルProfile */
.mobile-profile {
    padding: 40px 20px;
}

.mobile-profile .section-title {
    color: var(--dancer-text-white);
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.mobile-profile .profile-text {
    color: var(--dancer-text-white);
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}

.mobile-profile .sns-icons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.mobile-profile .sns-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dancer-text-white);
    border-radius: 8px;
}

.mobile-profile .sns-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* ========================================
   レスポンシブブレークポイント
   ======================================== */

/* デスクトップ（768px以上）でのレイアウト制御 */
@media (min-width: 768px) {
    .desktop-layout {
        display: grid !important;
    }
    
    .mobile-layout {
        display: none !important;
    }
    
    /* Tailwind md:hidden override */
    .md\:hidden {
        display: none !important;
    }
    
    /* Tailwind md:grid override */
    .md\:grid {
        display: grid !important;
    }
}

/* モバイル（767px以下）でのレイアウト制御 */
@media (max-width: 767px) {
    .desktop-layout {
        display: none !important;
    }
    
    .mobile-layout {
        display: block !important;
    }
    
    /* モバイルでのフォントサイズ調整 */
    .mobile-header .dancer-name {
        font-size: clamp(64px, 16vw, 120px);
    }
    
    .mobile-header .dancer-genre {
        font-size: clamp(16px, 4vw, 18px);
    }
    
    .mobile-performance .section-title,
    .mobile-profile .section-title {
        font-size: clamp(20px, 5vw, 24px);
    }
}

/* ========================================
   INFO & NEWS 詳細ページ - CSS Grid レイアウト
   ======================================== */

/* メインコンテナ */
.info-news-single-container {
    background-color: var(--info-news-bg-black);
    min-height: 100vh;
    width: 100%;
}

/* ========================================
   デスクトップレイアウト (768px以上)
   ======================================== */
.info-news-desktop-layout {
    grid-template-columns: var(--info-news-desktop-left) var(--info-news-desktop-right);
    min-height: 100vh;
    max-width: var(--info-news-container-max-width);
    margin: 0 auto;
    gap: 0;
}

/* 左列: ビジュアルコンテンツ */
.info-news-visual-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--info-news-padding);
    background-color: var(--info-news-bg-black);
}

.info-news-image-container,
.info-news-video-container {
    width: 100%;
    max-width: 600px;
    border-radius: var(--info-news-image-radius);
    overflow: hidden;
}

.info-news-image-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.info-news-video-embed {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--info-news-image-radius);
    overflow: hidden;
}

.info-news-video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.info-news-video-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 右列: コンテンツ */
.info-news-content-column {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--info-news-padding);
    background-color: var(--info-news-bg-black);
}

.info-news-content-inner {
    width: 100%;
    max-width: 600px;
}

/* メタ情報 */
.info-news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.info-news-date {
    color: var(--info-news-text-white);
    font-size: var(--info-news-date-size);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.info-news-categories {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.info-news-category-tag {
    background-color: var(--info-news-category-bg);
    color: var(--info-news-text-white);
    padding: 5px 12px;
    border-radius: var(--info-news-category-radius);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* タイトル */
.info-news-title {
    color: var(--info-news-text-white);
    font-size: var(--info-news-title-size-desktop);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 30px;
}

/* コンテンツ */
.info-news-content {
    color: var(--info-news-text-white);
    font-size: var(--info-news-content-size);
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

.info-news-content p {
    margin-bottom: 1.5rem;
}

.info-news-content h2,
.info-news-content h3,
.info-news-content h4 {
    color: var(--info-news-text-white);
    margin: 2rem 0 1rem 0;
    line-height: 1.4;
}

.info-news-content a {
    color: var(--info-news-accent-blue);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.info-news-content a:hover {
    opacity: 0.8;
}

/* リンクボタン */
.info-news-button-container {
    margin-top: 40px;
    text-align: right;
}

.info-news-link-button {
    display: inline-block;
    background-color: var(--info-news-accent-blue);
    color: var(--info-news-text-white);
    padding: 8px 20px;
    border-radius: var(--info-news-button-radius);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 120px;
}

.info-news-link-button:hover {
    background-color: var(--info-news-text-white);
    color: var(--info-news-accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(58, 68, 255, 0.3);
}

/* ========================================
   モバイルレイアウト (767px以下) - 新デザイン実装
   ======================================== */
.info-news-mobile-layout {
    background-color: var(--info-news-bg-black);
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    display: grid;
    grid-template-rows: auto 30vh auto;
    grid-template-areas: 
        "header-area"
        "visual-area" 
        "content-area";
    font-family: 'Noto Sans JP', sans-serif;
}

/* 上部ヘッダーエリア */
.info-news-mobile-header {
    grid-area: header-area;
    background-color: var(--info-news-bg-black);
    padding: clamp(20px, 5vw, 40px);
    text-align: left;
}

/* ヘッダーエリア - マージン相殺を防ぐ */
.info-news-mobile-header-area {
    grid-area: header-area;
    background-color: var(--info-news-bg-black);
    padding-top: clamp(30px, 6vw, 50px);
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
    padding-bottom: clamp(20px, 5vw, 40px);
}

/* モバイル: 日付 */
.info-news-mobile-date {
    color: var(--info-news-text-white);
    font-size: clamp(12px, 3vw, 16px);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: 0 0 clamp(10px, 3vw, 20px) 0; /* 下部のみ余白 */
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
}

/* モバイル: タイトル */
.info-news-mobile-title {
    color: var(--info-news-text-white);
    font-size: clamp(24px, 6vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin: 0 0 clamp(20px, 5vw, 40px) 0; /* 下部のみ余白 */
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
}

/* 中央ビジュアルエリア - 30vh固定（要望対応） */
.info-news-mobile-visual-area {
    grid-area: visual-area;
    height: 30vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #3a44ff; /* あおいパーツの背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-news-mobile-image-container,
.info-news-mobile-video-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.info-news-mobile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.info-news-mobile-video-embed {
    width: 100%;
    height: 100%;
    position: relative;
}

.info-news-mobile-video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.info-news-mobile-video-thumbnail {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.info-news-mobile-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 下部コンテンツエリア */
.info-news-mobile-content-area {
    grid-area: content-area;
    background-color: var(--info-news-bg-black);
    padding: clamp(20px, 5vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 30px);
    min-height: fit-content;
}

/* モバイル: コンテンツ */
.info-news-mobile-content {
    color: var(--info-news-text-white);
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    text-align: center;
}

.info-news-mobile-content p {
    margin-bottom: 1.5rem;
}

.info-news-mobile-content h2,
.info-news-mobile-content h3,
.info-news-mobile-content h4 {
    color: var(--info-news-text-white);
    margin: 1.5rem 0 1rem 0;
    line-height: 1.4;
    font-family: 'Noto Sans JP', sans-serif;
}

.info-news-mobile-content a {
    color: var(--info-news-accent-blue);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.info-news-mobile-content a:hover {
    opacity: 0.8;
}

/* モバイル: リンクボタン - 右下配置 */
.info-news-mobile-button-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: auto;
}

.info-news-mobile-link-button {
    display: inline-block;
    background-color: var(--info-news-accent-blue);
    color: var(--info-news-text-white);
    padding: clamp(6px, 2vw, 10px) clamp(12px, 3vw, 18px);
    border-radius: clamp(15px, 3vw, 20px);
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    font-family: 'Noto Sans JP', sans-serif;
    min-width: clamp(80px, 20vw, 120px);
    text-align: center;
}

.info-news-mobile-link-button:hover {
    background-color: var(--info-news-text-white);
    color: var(--info-news-accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(58, 68, 255, 0.3);
}

/* カテゴリ表示（必要に応じて） */
.info-news-mobile-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: clamp(15px, 4vw, 25px);
}

.info-news-mobile-category-tag {
    background-color: var(--info-news-category-bg);
    color: var(--info-news-text-white);
    padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 12px);
    border-radius: clamp(8px, 2vw, 12px);
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 旧スタイル互換性のため維持 */
.info-news-mobile-meta {
    /* 新デザインでは使用しないが、テンプレート互換のため残す */
    display: none;
}

.info-news-mobile-visual {
    /* 新デザインでは使用しないが、テンプレート互換のため残す */
    display: none;
}

/* ========================================
   レスポンシブブレークポイント
   ======================================== */

/* デスクトップ（768px以上）での表示制御 */
@media (min-width: 768px) {
    .info-news-desktop-layout {
        display: grid !important;
    }
    
    .info-news-mobile-layout {
        display: none !important;
    }
}

/* モバイル（767px以下）での表示制御 */
@media (max-width: 767px) {
    .info-news-desktop-layout {
        display: none !important;
    }
    
    .info-news-mobile-layout {
        display: block !important;
    }
}


/* ========================================
   INFO & NEWS ARCHIVE PAGE - 参考画像完全再現
   ======================================== */

/* info-news専用変数は統合済み :root セクションに移動 */

/* ========= コンテナベース ========= */
.info-news-archive-container {
    background-color: #000000;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    font-family: var(--info-news-font);
    container-type: inline-size;
    container-name: info-news-archive;
}

/* ========= デスクトップ・モバイル表示制御 ========= */
.info-news-archive-desktop {
    display: none; /* デフォルト非表示 */
}

.info-news-archive-mobile {
    display: block; /* デフォルト表示 */
}

/* ========= 2列グリッド基盤（参考画像完全再現） ========= */
@container info-news-archive (min-width: 768px) {
    .info-news-archive-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 完全均等2列グリッド */
        gap: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 48px); /* row-gap column-gap（参考画像目視調整） */
        padding: clamp(24px, 4vw, 48px);
    }
    
    .info-news-archive-mobile {
        display: none; /* デスクトップ時は非表示 */
    }
}

/* ========= カード基本構造（統一高さ・2列配置） ========= */
@container info-news-archive (min-width: 768px) {
    .info-news-archive-item {
        position: relative;
        height: clamp(200px, 25vh, 320px); /* 統一高さ（参考画像目視調整） */
        overflow: hidden;
        border: 1px solid #FFFFFF; /* 参考画像の白線ボーダー */
    }
    
    .info-news-archive-link {
        display: grid;
        grid-template-columns: clamp(40%, 45%, 50%) 1fr; /* 画像:コンテンツ比率（参考画像準拠） */
        height: 100%;
        text-decoration: none;
        color: inherit;
    }
}

/* ========= 黄色パス（画像エリア）========= */
@container info-news-archive (min-width: 768px) {
    .info-news-archive-visual {
        position: relative;
        overflow: hidden;
        height: 100%;
    }
    
    /* 画像・動画をコンテナ100%幅でフィット、上下オーバーフロー設定 */
    .info-news-archive-visual img,
    .info-news-archive-visual iframe {
        width: 100%; /* コンテナ100%幅 */
        height: 100%;
        object-fit: cover; /* アスペクト比保持でカバー */
        object-position: center; /* 中心軸配置 */
    }
}

/* ========= ピンクパス（コンテンツエリア）========= */
@container info-news-archive (min-width: 768px) {
    .info-news-archive-content {
        background-color: transparent; /* ピンクパス削除：透明背景、白文字 */
        padding: clamp(16px, 2vw, 24px);
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 1vw, 12px);
        height: 100%;
        color: #FFFFFF; /* テキスト色を白に設定 */
        /* 包含問題修正 */
        box-sizing: border-box; /* paddingを幅計算に含める */
        min-width: 0; /* flex/gridアイテムの縮小を許可 */
        overflow: hidden; /* はみ出し防止 */
    }
}

/* ========= タグスタイル（INFO赤・NEWS青）========= */
@container info-news-archive (min-width: 768px) {
    .info-news-archive-tag {
        position: relative;
        color: white;
        padding: clamp(3px, 0.4vw, 5px) clamp(6px, 0.8vw, 10px);
        font-size: clamp(9px, 1vw, 10px);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        display: inline-block;
        width: fit-content;
        border-radius: clamp(8px, 1.2vw, 15px);
    }
}

/* INFO タグ - 青色 */
.info-news-archive-tag-info {
    background-color: #0066FF;
    color: #FFFFFF;
}

/* NEWS タグ - 赤色 */
.info-news-archive-tag-news {
    background-color: #FF0000;
    color: #FFFFFF;
}

/* ========= タイトル ========= */
@container info-news-archive (min-width: 768px) {
    .info-news-archive-title {
        color: #FFFFFF; /* テキストを白色に変更 */
        font-size: clamp(14px, 1.8vw, 20px);
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.02em;
        margin: 0;
        font-family: var(--info-news-font);
        /* テキスト包含修正 */
        word-wrap: break-word; /* 長い単語の適切な改行 */
        word-break: break-word; /* 単語境界での改行許可 */
        overflow-wrap: break-word; /* 現代的な改行制御 */
    }
}

/* ========= 本文概要 ========= */
@container info-news-archive (min-width: 768px) {
    .info-news-archive-excerpt {
        color: #FFFFFF; /* テキストを白色に変更 */
        font-size: clamp(12px, 1.4vw, 14px);
        line-height: 1.6;
        letter-spacing: 0.02em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        flex: 1;
        font-family: var(--info-news-font);
        /* テキスト包含修正 */
        word-wrap: break-word; /* 長い単語の適切な改行 */
        word-break: break-word; /* 単語境界での改行許可 */
        overflow-wrap: break-word; /* 現代的な改行制御 */
    }
}

/* ========= 日付表示 ========= */
@container info-news-archive (min-width: 768px) {
    .info-news-archive-date {
        color: #FFFFFF; /* テキストを白色に変更 */
        font-size: clamp(11px, 1.2vw, 13px);
        font-weight: 400;
        letter-spacing: 0.05em;
        margin-top: auto;
        font-family: var(--info-news-font);
    }
}

/* ========= ビジュアルコンテンツ要素 ========= */
.info-news-archive-image-container,
.info-news-archive-video-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.info-news-archive-image-container img,
.info-news-archive-video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.info-news-archive-video-embed {
    width: 100%;
    height: 100%;
    position: relative;
}

.info-news-archive-video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* ========================================
   モバイルレイアウト (767px以下)
   ======================================== */
@container info-news-archive (max-width: 767px) {
    .info-news-archive-mobile {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 3vw, 16px);
        padding: clamp(16px, 4vw, 24px);
    }
    
    .info-news-archive-mobile .info-news-archive-item {
        height: clamp(120px, 25vw, 160px); /* min-heightをheightに変更してサイズ統一 */
        overflow: hidden;
        border: 1px solid #FFFFFF; /* 参考画像の白線ボーダーを追加 */
    }
    
    .info-news-archive-mobile .info-news-archive-link {
        display: grid;
        grid-template-columns: clamp(100px, 30vw, 140px) 1fr;
        height: 100%;
        text-decoration: none;
        color: inherit;
    }
    
    /* 黄色パス（画像エリア）- モバイル */
    .info-news-archive-mobile .info-news-archive-visual {
        position: relative;
        overflow: hidden;
        height: 100%;
    }
    
    .info-news-archive-mobile .info-news-archive-visual img,
    .info-news-archive-mobile .info-news-archive-visual iframe {
        width: 100%; /* コンテナ100%幅 */
        height: 100%;
        object-fit: cover; /* アスペクト比保持でカバー */
        object-position: center; /* 中心軸配置 */
    }
    
    /* ピンクパス（コンテンツエリア）- モバイル */
    .info-news-archive-mobile .info-news-archive-content {
        background-color: transparent; /* ピンクパス削除：透明背景、白文字 */
        padding: clamp(12px, 3vw, 16px);
        display: flex;
        flex-direction: column;
        gap: clamp(6px, 1.5vw, 10px);
        position: relative;
        color: #FFFFFF; /* テキスト色を白に設定 */
        /* 包含問題修正 */
        box-sizing: border-box; /* paddingを幅計算に含める */
        min-width: 0; /* flex/gridアイテムの縮小を許可 */
        overflow: hidden; /* はみ出し防止 */
    }
    
    .info-news-archive-mobile .info-news-archive-tag {
        position: relative;
        padding: clamp(2px, 0.6vw, 4px) clamp(5px, 1.2vw, 8px);
        font-size: clamp(8px, 2vw, 9px);
        display: inline-block;
        width: fit-content;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-radius: clamp(6px, 1.8vw, 12px);
    }
    
    .info-news-archive-mobile .info-news-archive-title {
        font-size: clamp(13px, 3.6vw, 16px);
        line-height: 1.4;
        color: #FFFFFF; /* テキストを白色に変更 */
        font-weight: 700;
        margin: 0;
        font-family: var(--info-news-font);
        /* テキスト包含修正 */
        word-wrap: break-word; /* 長い単語の適切な改行 */
        word-break: break-word; /* 単語境界での改行許可 */
        overflow-wrap: break-word; /* 現代的な改行制御 */
    }
    
    .info-news-archive-mobile .info-news-archive-excerpt {
        font-size: clamp(11px, 3vw, 13px);
        line-height: 1.5;
        color: #FFFFFF; /* テキストを白色に変更 */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        flex: 1;
        font-family: var(--info-news-font);
        /* テキスト包含修正 */
        word-wrap: break-word; /* 長い単語の適切な改行 */
        word-break: break-word; /* 単語境界での改行許可 */
        overflow-wrap: break-word; /* 現代的な改行制御 */
    }
    
    .info-news-archive-mobile .info-news-archive-date {
        font-size: clamp(10px, 2.6vw, 12px);
        color: #FFFFFF; /* テキストを白色に変更 */
        margin-top: auto;
        font-family: var(--info-news-font);
    }
}

/* モバイル非表示設定 */
@media (min-width: 768px) {
    .info-news-archive-mobile {
        display: none;
    }
}

/* 以下の行は削除 */
/* .info-news-archive-mobile .info-news-archive-excerpt {
        font-size: var(--text-base);
        line-height: var(--leading-normal);
        color: rgba(255, 255, 255, 0.8);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    
    .info-news-archive-mobile .info-news-archive-date {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: auto;
    }
}

/* No Posts Message */
.info-news-archive-no-posts {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--info-news-text-white);
    font-size: clamp(16px, 2vw, 20px);
    text-align: center;
}


/* ========================================
   NEWS & INFO SECTION - フロントページ
   ======================================== */

/* セクション基本設定 */
.news-info-section {
    background-color: #000;
    color: #fff;
    position: relative;
    container-type: inline-size;
    container-name: news-info;
}

/* デスクトップレイアウト（≥768px） */
.news-info-desktop {
    display: none;
}

@container news-info (min-width: 768px) {
    .news-info-desktop {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(16px, 2vw, 24px);
        padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
        max-width: 1920px;
        margin: 0 auto;
    }
    
    .news-info-mobile {
        display: none;
    }
    
    /* Info Column - 左側 5カラム */
    .info-column {
        grid-column: 1 / 6;
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 2vw, 24px);
    }
    
    /* News Column - 右側 7カラム */
    .news-column {
        grid-column: 6 / 13;
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 2vw, 24px);
    }
}

/* 見出しスタイル */
.info-heading,
.news-heading {
    margin: 0 0 clamp(24px, 3vw, 40px) 0;
}

.info-heading-svg,
.news-heading-svg {
    width: 50%; /* デスクトップ版は50% */
    height: auto;
    display: block;
    object-fit: contain;
}

/* Info リストスタイル */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.info-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.info-link {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: clamp(12px, 1.5vw, 20px) 0;
    transition: opacity 0.3s ease;
}

.info-link:hover {
    opacity: 0.7;
}

.info-content {
    display: grid;
    grid-template-columns: clamp(40px, 5vw, 60px) 1fr;
    gap: clamp(12px, 2vw, 24px);
    align-items: start;
}

.info-date {
    background-color: #fff;
    color: #000;
    padding: clamp(4px, 0.5vw, 8px) clamp(8px, 1vw, 12px);
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.info-title {
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 700;
    margin: 0 0 clamp(4px, 0.5vw, 8px) 0;
    display: inline-block;
    padding: clamp(2px, 0.25vw, 4px) clamp(8px, 1vw, 12px);
}

.info-excerpt {
    font-size: clamp(12px, 1.2vw, 14px);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* デスクトップでのinfo-excerpt 2行レイアウト */
@media (min-width: 768px) {
    .info-content {
        grid-template-rows: auto auto;
        grid-template-areas: 
            "date title"
            "excerpt excerpt";
    }
    
    .info-date {
        grid-area: date;
    }
    
    .info-title {
        grid-area: title;
    }
    
    .info-excerpt {
        grid-area: excerpt;
        margin-top: clamp(4px, 0.5vw, 8px);
    }
}

/* News グリッドスタイル */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 24px);
}

.news-item {
    background-color: #fff;
    overflow: hidden;
}

.news-link {
    display: block;
    color: #000;
    text-decoration: none;
    height: 100%;
}

.news-visual {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-content {
    padding: clamp(12px, 1.5vw, 20px);
}

.news-date {
    display: inline-block;
    color: #fff;
    background-color: #0000FF;
    padding: clamp(4px, 0.5vw, 8px) clamp(12px, 1.5vw, 20px);
    border-radius: 20px;
    font-size: clamp(11px, 1.1vw, 13px);
    font-weight: 700;
    margin-bottom: clamp(8px, 1vw, 12px);
}

.news-title {
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 700;
    margin: 0 0 clamp(8px, 1vw, 12px) 0;
    color: #000;
}

.news-excerpt {
    font-size: clamp(12px, 1.2vw, 14px);
    line-height: 1.5;
    color: #333;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read More リンク */
.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-size: clamp(14px, 1.4vw, 16px);
    margin-top: clamp(20px, 3vw, 40px);
    transition: gap 0.3s ease;
}

.read-more-link:hover {
    gap: 16px;
}

.read-more-link .arrow {
    display: inline-block;
    font-size: 1.2em;
}

/* モバイルレイアウト（≤767px） */
.news-info-mobile {
    display: block;
    padding: clamp(32px, 6vw, 48px) clamp(16px, 4vw, 24px);
}

@container news-info (min-width: 768px) {
    .news-info-mobile {
        display: none;
    }
}

/* モバイル Info セクション */
.mobile-info-section {
    margin-bottom: clamp(48px, 8vw, 64px);
}

.mobile-info-heading,
.mobile-news-heading {
    margin: 0 0 clamp(20px, 4vw, 32px) 0;
}

.mobile-info-heading-svg,
.mobile-news-heading-svg {
    width: 25%; /* 12カラムの3カラム分 = 25% */
    height: auto;
    display: block;
    object-fit: contain;
}

.mobile-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-info-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-info-link {
    display: grid;
    grid-template-columns: clamp(45px, 12vw, 60px) 1fr;
    gap: clamp(12px, 3vw, 16px);
    align-items: start;
    color: inherit;
    text-decoration: none;
    padding: clamp(12px, 3vw, 16px) 0;
}

.mobile-info-date {
    background-color: #fff;
    color: #000;
    padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 10px);
    font-size: clamp(11px, 2.8vw, 13px);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.mobile-info-content {
    overflow: hidden;
}

.mobile-info-title {
    font-size: clamp(14px, 3.6vw, 16px);
    font-weight: 700;
    margin: 0 0 clamp(4px, 1vw, 6px) 0;
    display: inline-block;
    padding: clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 10px);
}

.mobile-info-excerpt {
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* モバイル News セクション */
.mobile-news-section {
    position: relative;
}

.mobile-news-list {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 4vw, 24px);
}

.mobile-news-item {
    background-color: #fff;
    overflow: hidden;
}

.mobile-news-link {
    display: grid;
    grid-template-columns: clamp(80px, 25vw, 120px) 1fr;
    gap: clamp(12px, 3vw, 16px);
    color: #000;
    text-decoration: none;
    padding: clamp(12px, 3vw, 16px);
}

.mobile-news-visual {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.mobile-news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-news-content {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vw, 8px);
}

.mobile-news-date {
    display: inline-block;
    color: #fff;
    background-color: #0000FF;
    padding: clamp(3px, 0.8vw, 6px) clamp(10px, 2.5vw, 16px);
    border-radius: 16px;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 700;
    align-self: flex-start;
}

.mobile-news-title {
    font-size: clamp(14px, 3.6vw, 16px);
    font-weight: 700;
    margin: 0;
    color: #000;
}

.mobile-news-excerpt {
    font-size: clamp(11px, 2.8vw, 13px);
    line-height: 1.4;
    color: #333;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-size: clamp(13px, 3.3vw, 15px);
    margin-top: clamp(16px, 4vw, 24px);
}

/* No posts メッセージ */
.no-posts {
    font-size: clamp(14px, 1.4vw, 16px);
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: clamp(40px, 6vw, 60px) 0;
}

/* ====================================================================
   Single Toroku Dancer Page - Sponsor Section Custom Styles
   ================================================================== */

/* Base Layout - Desktop & Mobile Common */
body.single-toroku-dancer .sponsor-section-container {
    grid-template-rows: 100% !important;
    height: auto !important;
    min-height: 400px;
}

body.single-toroku-dancer .sponsor-content-container {
    height: 100% !important;
    grid-row: 1 !important;
}

.single-sponsor-section .single-sponsor-container {
    display: grid !important;
    grid-template-rows: 100%;
    height: auto;
    min-height: clamp(400px, 40vh, 500px);
}

.single-dancer-sponsor {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: inherit;
}

/* Desktop Layout (768px+) - 2段階設計統一 */
@media (min-width: 768px) {
    .single-dancer-sponsor .sponsor-logo-right {
        flex: 0 0 50%;
    }
}

.single-dancer-sponsor .sponsor-logo-right,
.single-dancer-sponsor .sponsor-content-left {
    flex: 1;
    min-width: 0;
    width: 50%;
}

.single-content-left {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.single-sponsor-image {
    max-height: 100%;
    object-fit: contain;
}

/* Mobile Layout (767px以下) */
@media (max-width: 767px) {
    body.single-toroku-dancer .sponsor-section-container {
        min-height: 300px;
    }
    
    .single-sponsor-section .single-sponsor-container {
        min-height: clamp(300px, 35vh, 400px);
    }
    
    .single-dancer-sponsor {
        flex-direction: column;
        min-height: 300px;
        align-items: stretch;
    }
    
    /* Layout Order: タイトルpng(上40%) → スライダー(中60%) */
    .single-dancer-sponsor .sponsor-content-left {
        width: 100%;
        flex: 0 0 40%;
        order: 1;
        position: relative; /* 子要素のabsolute配置基準 */
    }
    
    /* タイトル画像をbottom配置（スライダーに近づける） */
    .single-dancer-sponsor .sponsor-content-left > div {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .single-dancer-sponsor .sponsor-logo-right {
        width: 95vw !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        margin: 0 auto !important;
        flex: 0 0 60% !important;
        order: 2 !important;
        max-width: none !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: block !important;
        visibility: visible !important;
    }
}




/* ===============================================
   Sponsor Video Slider Styles
   =============================================== */

/* 7.1 基本スライダーレイアウト */
.sponsor-main-section {
    min-height: 60vh;
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.sponsor-main-slider-desktop,
.sponsor-main-slider-mobile {
    width: 100%;
    height: 60vh;
    position: relative;
    
    /* ==========================================
       🎨 逆バレル型（凹み型）形状 - 開始
       ==========================================
       中央（上下）が内側に凹む形状（強度：10%凹み）
       バレル型の反対 - 左右端は直線、上下が凹む
       削除する場合：この行から「逆バレル型 - 終了」までを削除
       ========================================== */
    -webkit-clip-path: polygon(
        0% 10%,                   /* 左上 - 外側10% */
        2% 6%,
        5% 3%,
        10% 1.5%,
        20% 0.7%,
        30% 0.2%,
        50% 0%,                   /* 中央上 - 最も凹む */
        70% 0.2%,
        80% 0.7%,
        90% 1.5%,
        95% 3%,
        98% 6%,
        100% 10%,                 /* 右上 - 外側10% */

        100% 90%,                 /* 右下 - 外側10% */
        98% 94%,
        95% 97%,
        90% 98.5%,
        80% 99.3%,
        70% 99.8%,
        50% 100%,                 /* 中央下 - 最も凹む */
        30% 99.8%,
        20% 99.3%,
        10% 98.5%,
        5% 97%,
        2% 94%,
        0% 90%                    /* 左下 - 外側10% */
    ); /* Safari/WebKit対応 */
    clip-path: polygon(
        0% 10%,                   /* 左上 - 外側10% */
        2% 6%,
        5% 3%,
        10% 1.5%,
        20% 0.7%,
        30% 0.2%,
        50% 0%,                   /* 中央上 - 最も凹む */
        70% 0.2%,
        80% 0.7%,
        90% 1.5%,
        95% 3%,
        98% 6%,
        100% 10%,                 /* 右上 - 外側10% */

        100% 90%,                 /* 右下 - 外側10% */
        98% 94%,
        95% 97%,
        90% 98.5%,
        80% 99.3%,
        70% 99.8%,
        50% 100%,                 /* 中央下 - 最も凹む */
        30% 99.8%,
        20% 99.3%,
        10% 98.5%,
        5% 97%,
        2% 94%,
        0% 90%                    /* 左下 - 外側10% */
    ); /* 標準仕様 */
    /* ==========================================
       🎨 逆バレル型（凹み型）形状 - 終了
       ========================================== */
}

/* 7.2 左右グラデーションオーバーレイ - ソフトグラデーション
   ========================================
   スライダーの左右端から中央に向かって黒くフェードするグラデーション
   - パターン: ソフトグラデーション（自然で優しい印象）
   - 幅: 左右各20%
   - 透明度: 黒100% → 黒60% → 完全透明
   - z-index: 10（スライドコンテンツの上に配置）
   ======================================== */

/* 左側グラデーション */
.sponsor-main-slider-desktop::before,
.sponsor-main-slider-mobile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 0%,      /* 完全な黒 */
        rgba(0, 0, 0, 0.6) 50%,   /* 半透明の黒 */
        rgba(0, 0, 0, 0) 100%     /* 完全透明 */
    );
    pointer-events: none;         /* クリックイベントを透過 */
    z-index: 10;
}

/* 右側グラデーション */
.sponsor-main-slider-desktop::after,
.sponsor-main-slider-mobile::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 0%,      /* 完全な黒 */
        rgba(0, 0, 0, 0.6) 50%,   /* 半透明の黒 */
        rgba(0, 0, 0, 0) 100%     /* 完全透明 */
    );
    pointer-events: none;         /* クリックイベントを透過 */
    z-index: 10;
}

/* デフォルト: モバイル表示 */
.sponsor-main-slider-desktop {
    display: none;
}

.sponsor-main-slider-mobile {
    display: block;
}

/* 768px以上: デスクトップ表示（Tailwind md: と統一） */
@media (min-width: 768px) {
    .sponsor-main-slider-desktop {
        display: block;
    }

    .sponsor-main-slider-mobile {
        display: none;
    }
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 7.3 センターモードとスライド強調 */
.swiper-slide-active {
    transform: scale(1.05) translateX(0) !important;
    opacity: 1;
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.6s ease-in-out;
}

.swiper-slide:not(.swiper-slide-active) {
    opacity: 0.7;
    z-index: 1;
}

/* 前後以外の待機スライドを非表示 */
.swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-active):not(.swiper-slide-next) {
    opacity: 0;
    pointer-events: none;
}

/* 7.4 動画要素のスタイリングと表示制御 */
.sponsor-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
}

/* 7.5 アニメーション効果 */
.swiper-slide {
    transition: opacity 0.3s ease, transform 0.6s ease-in-out;
    will-change: transform, opacity;
}

/* ホバー時のマイクロインタラクション */
.swiper-slide-active:hover .sponsor-video {
    transform: scale(1.02);
}

/* ケンバーンズ効果（画像用） */
@keyframes kenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.sponsor-slide-image {
    animation: kenBurns 20s ease-in-out infinite alternate;
}

/* 7.6 ナビゲーションとページネーションのスタイル */
/* スポンサースライダーの矢印とページネーションを非表示 */
.sponsor-main-slider-desktop .swiper-button-prev,
.sponsor-main-slider-desktop .swiper-button-next,
.sponsor-main-slider-mobile .swiper-button-prev,
.sponsor-main-slider-mobile .swiper-button-next,
.sponsor-main-slider-desktop .swiper-pagination,
.sponsor-main-slider-mobile .swiper-pagination {
    display: none !important;
}

.swiper-button-prev,
.swiper-button-next {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: #fff;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.swiper-button-prev:focus,
.swiper-button-next:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 20px;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.3);
}

.swiper-pagination-bullet:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 7.7 レスポンシブ調整 */
/* モバイル（<768px） */
@media (max-width: 767px) {
    .sponsor-main-section {
        min-height: 50vh;
    }

    .sponsor-main-slider-desktop,
    .sponsor-main-slider-mobile {
        height: 50vh;
    }

    .swiper-slide-active {
        transform: scale(1.03) translateX(0) !important;
    }
}

/* タブレット（768px-1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
    .sponsor-main-section {
        min-height: 55vh;
    }

    .sponsor-main-slider-desktop,
    .sponsor-main-slider-mobile {
        height: 55vh;
    }
}

/* デスクトップ大画面（1024px+） - 高さ微調整用 */
/* Note: Main breakpoint is 768px; this is for large screen optimization */
@media (min-width: 1024px) {
    .sponsor-main-section {
        min-height: 60vh;
    }

    .sponsor-main-slider-desktop,
    .sponsor-main-slider-mobile {
        height: 60vh;
    }
}

/* 7.8 パフォーマンス最適化CSS */
.swiper-slide,
.sponsor-video {
    will-change: transform, opacity;
}

/* レイアウトシフト防止 */
.sponsor-main-slider-desktop,
.sponsor-main-slider-mobile {
    min-height: 50vh;
}

/* 7.9 エラーフォールバック用CSS */
.sponsor-video-error {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding: 20px;
}

.sponsor-video-placeholder {
    width: 100%;
    height: 100%;
    background-color: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-video-placeholder::before {
    content: "動画を読み込み中...";
    color: #999;
    font-size: 16px;
}

/* Task 9.7: 動画エラーオーバーレイ */
.video-error-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a1a1a;
    z-index: 10;
}

.video-error-content {
    text-align: center;
    padding: 20px;
}

.video-error-message {
    color: #fff;
    font-size: 18px;
    margin: 0;
}

/* Task 9.6: noscriptフォールバック */
.sponsor-noscript-fallback {
    width: 100%;
    height: 60vh;
    position: relative;
}

.sponsor-noscript-fallback .sponsor-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Task 10.2: Ken Burns effect for images */
@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.1) translate(-2%, -2%);
    }
}

/* Task 10.1 & 10.3: Image slide styling with unified height */
.sponsor-main-slider-desktop .swiper-slide img,
.sponsor-main-slider-mobile .swiper-slide img {
    width: 100%;
    height: 60vh; /* Task 10.3: Unified height */
    object-fit: cover; /* Task 10.1: Same layout as videos */
    transition: opacity 0.6s ease; /* Task 10.1: 600ms transition */
}

/* Task 10.2: Ken Burns effect on active image slides only */
.sponsor-main-slider-desktop .swiper-slide-active img,
.sponsor-main-slider-mobile .swiper-slide-active img {
    animation: kenBurns 5s ease-in-out infinite alternate;
}

/* ==========================================
   Safari特有のパフォーマンス最適化
   ========================================== */
/* Safari では will-change が逆にパフォーマンスを悪化させる場合があるため無効化 */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .swiper-slide,
        .sponsor-video {
            will-change: auto !important;
        }
    }
}

/* ==========================================
   GSAP Phase 2: Hero Logo Animation Optimization
   ========================================== */
/* LCP degradation prevention: GPU acceleration hint for hero logos */
.hero-logo-container,
.hero-mobile-logo {
    will-change: opacity, transform;
}

/* Remove will-change after animation completes (handled by GSAP onComplete) */
.hero-animation-complete .hero-logo-container,
.hero-animation-complete .hero-mobile-logo {
    will-change: auto;
}

/* ==========================================
   GSAP Phase 2: Additional Sections Initial States (FOUC Prevention)
   ========================================== */

/* Lib-Top Section */
.lib-top-container[data-gsap-animate] {
    opacity: 0;
}

.lib-top-area-link[data-gsap-animate] {
    opacity: 0;
    transform: translateY(30px);
}

/* WHSJ Section */
.whsj-logo[data-gsap-animate],
.whsj-title[data-gsap-animate],
.whsj-text[data-gsap-animate] {
    opacity: 0;
    transform: translateY(20px);
}

/* Sponsor Section */
.sponsor-slider-container[data-gsap-animate] {
    opacity: 0;
}

.sponsor-navigation[data-gsap-animate] {
    opacity: 0;
}

/* Animation Complete - Reset will-change */
.gsap-animation-complete {
    will-change: auto !important;
}

/* ==========================================
   Footer Spacing Fix
   ========================================== */
footer {
    margin-top: 2rem;  /* 全ページ共通の安全マージン（32px） */
}