/**
 * ViNETフェス2026 LP 専用スタイル
 * 現行サイトのダーク背景（page-base.bg-black）上に乗せる完全静的1枚ページ。
 * 参考: ViNETフェス2026_LP.html のセクション構成を踏襲。
 */

/* ========================================
   変数・共通
   ======================================== */
.fes-page {
    /* 背景が白〜明るいグレー基調（中央に文字スペース）のため、文字はダーク基調 */
    --fes-fg: #1a1a1a;
    --fes-sub: rgba(26, 26, 26, 0.62);
    --fes-line: rgba(26, 26, 26, 0.14);
    --fes-card: rgba(26, 26, 26, 0.04);
    /* 反転ブロック（クイズ）用：暗い地に明るい文字 */
    --fes-invert-bg: #14121a;
    --fes-invert-fg: #f7f9fb;
    --fes-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
    color: var(--fes-fg);
    line-height: 1.8;
}

.fes-container {
    max-width: 1200px;
}

/* 背景フェードアウト用の白オーバーレイ。
   固定背景(site-background, z-index:-1)のすぐ上に重ね、
   JS がスクロール量に応じて opacity を 0→1 に上げることで、
   背景のキャラビジュアルが白へ溶けていき、最終的に白背景が残る。 */
.fes-bg-fade {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #ffffff;
    opacity: 0;
    pointer-events: none;
    /* スクロール追従はJSで opacity を直接セットするため transition は軽めに */
    transition: opacity 0.1s linear;
}

.fes-section {
    padding: 96px 0;
    border-top: 1px solid var(--fes-line);
}

.fes-section-title {
    font-family: var(--fes-serif);
    font-weight: 800;
    font-size: clamp(2.625rem, 6vw, 3.6rem);
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0 0 56px;
    text-align: center;
    color: var(--fes-fg);
}

.fes-section-sub {
    text-align: center;
    color: var(--fes-sub);
    margin: -40px 0 56px;
}

/* 画像差し替え枠（エンジニア向けの目印） */
.fes-slot {
    border: 1px dashed rgba(26, 26, 26, 0.3);
    background: var(--fes-card);
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--fes-sub);
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 12px;
}

/* ========================================
   1〜2. ヒーロー（ロゴ・キャッチ・リード）

   背景はページ全体の固定背景（site-background, position:fixed）に敷くため、
   ヒーロー自体は背景を持たず、ロゴとテキストを中央に置くレイアウト枠だけ。
   ======================================== */
.fes-hero {
    width: 100%;
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 64px;
    text-align: center;
    /* ロゴ(width:176%等)のはみ出しをヒーロー内に閉じ込め、ページ全体の横幅・レイアウトが崩れるのを防ぐ */
    overflow: hidden;
}

/* ヒーローの中身：読みやすい幅に制限して中央寄せ */
.fes-hero-content {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* ロゴ：中身の幅内に素直に収める（背景には一切影響しない） */
.fes-hero-logo {
    display: block;
    width: 100%;
    height: auto;
    margin: -14% auto -8%;
}

/* キャッチ・リード */
.fes-hero-text {
    margin: 0 auto;
}

/* スクリーンリーダー用の非表示テキスト */
.fes-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.fes-catch {
    font-family: var(--fes-serif);
    font-weight: 800;
    font-size: clamp(1.85rem, 6.9vw, 5.1rem);
    letter-spacing: 0.14em;
    line-height: 1.4;
    margin: 0 0 28px;
    color: var(--fes-fg);
    /* 背景ビジュアルの上で文字を浮かせるドロップシャドウ。
       左右のキャラ（濃色）に重なっても読めるよう、白のにじみを多層で強めにかける。 */
    text-shadow:
        0 0 6px rgba(255, 255, 255, 1),
        0 0 14px rgba(255, 255, 255, 1),
        0 0 24px rgba(255, 255, 255, 0.95),
        0 0 40px rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.2);
}

.fes-lead {
    margin: 0 auto;
    font-size: 1.15rem;
    color: var(--fes-fg);
    text-shadow:
        0 0 6px rgba(255, 255, 255, 1),
        0 0 12px rgba(255, 255, 255, 1),
        0 0 22px rgba(255, 255, 255, 0.95),
        0 0 36px rgba(255, 255, 255, 0.85),
        0 1px 4px rgba(0, 0, 0, 0.18);
}

.fes-lead strong {
    display: block;
    font-family: var(--fes-serif);
    font-size: 1.55rem;
    margin-bottom: 28px;
}

/* ========================================
   3. 開催日時
   ======================================== */
.fes-date-main {
    font-family: var(--fes-serif);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.fes-ymd {
    display: block;
    font-size: clamp(1.9rem, 10.5vw, 7.5rem);
    letter-spacing: 0.04em;
}

.fes-dow {
    font-size: 0.4em;
    margin-left: 0.3em;
}

.fes-time {
    display: block;
    margin-top: 12px;
    font-size: clamp(2.1rem, 6vw, 3rem);
}

.fes-date-info {
    width: fit-content;
    margin: 48px auto 64px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 14px 40px;
    align-items: baseline;
}

.fes-date-info dt {
    color: var(--fes-sub);
    font-size: 1.35rem;
}

.fes-date-info dd {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 500;
}

.fes-date-info .fes-tag {
    font-family: var(--fes-serif);
    font-weight: 700;
}

/* 配信枠 */
.fes-stream-box {
    max-width: 800px;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    background: var(--fes-card);
    border: 1px solid var(--fes-line);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    overflow: hidden;
}

/* YouTube埋め込みは枠いっぱいに（16:9を保つ。paddingは打ち消す） */
.fes-stream-box iframe {
    width: 100%;
    height: 100%;
    margin: -24px;
    border: 0;
    display: block;
}

.fes-stream-box strong {
    display: block;
    font-family: var(--fes-serif);
    font-size: 2.1rem;
    margin-bottom: 8px;
}

.fes-stream-box p {
    margin: 0;
    color: var(--fes-sub);
}

/* ========================================
   4. 出演者
   ======================================== */
.fes-cast-group + .fes-cast-group {
    margin-top: 96px;
}

.fes-group-head {
    text-align: center;
    margin-bottom: 40px;
}

.fes-group-head h3 {
    font-family: var(--fes-serif);
    font-size: 2.025rem;
    letter-spacing: 0.1em;
    margin: 0;
}

.fes-group-head p {
    margin: 4px 0 0;
    color: var(--fes-sub);
    font-size: 1.35rem;
}

.fes-cast-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
}

.fes-cast {
    width: calc((100% - 144px) / 4);
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

.fes-cast img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 出演者サムネの「シュッ」演出。
   セクションのフワッとしたフェードイン(.fes-reveal)とは別に、
   各カードが下からスッと上がりながら素早く出る。
   JS が画面進入時に .is-visible を付与する。
   同じグリッド内では :nth-child で少しずつ遅延させて左から順に出す（スタッガー）。 */
.js-reveal .fes-cast {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.js-reveal .fes-cast.is-visible {
    opacity: 1;
    transform: none;
}

/* スタッガー（左から順に）。1枚目が出る前にワンテンポ（0.3s）置く。 */
.js-reveal .fes-cast-grid .fes-cast:nth-child(1) { transition-delay: 0.3s; }
.js-reveal .fes-cast-grid .fes-cast:nth-child(2) { transition-delay: 0.5s; }
.js-reveal .fes-cast-grid .fes-cast:nth-child(3) { transition-delay: 0.7s; }
.js-reveal .fes-cast-grid .fes-cast:nth-child(4) { transition-delay: 0.9s; }

@media (prefers-reduced-motion: reduce) {
    .js-reveal .fes-cast {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 新メンバー：1枠のみ。他カードと同じ縦長サイズを保って中央寄せ */
.fes-cast-single {
    width: calc((100% - 144px) / 4);
}

.fes-series {
    white-space: nowrap;
}

/* ========================================
   5. 見どころ
   ======================================== */
.fes-program {
    max-width: 1000px;
    margin-inline: auto;
    list-style: none;
    padding: 0;
}

.fes-program li {
    display: grid;
    /* h4(見出し)が1.5倍になったので左カラムを広げて折り返しを防ぐ */
    grid-template-columns: 19em 1fr;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--fes-line);
    /* 左右カラムを縦方向中央揃え */
    align-items: center;
}

.fes-program li:first-child {
    border-top: 1px solid var(--fes-line);
}

.fes-program h4 {
    font-family: var(--fes-serif);
    font-size: 1.8rem;
    margin: 0;
    line-height: 1.5;
}

.fes-program p {
    margin: 0;
    color: var(--fes-sub);
}

/* クイズ枠（反転で強調：暗い地に明るい文字） */
.fes-quiz {
    max-width: 960px;
    margin: 64px auto 0;
    padding: 64px 44px;
    background: var(--fes-invert-bg);
    color: var(--fes-invert-fg);
    text-align: center;
    border-radius: 4px;
}

.fes-quiz h3 {
    font-family: var(--fes-serif);
    font-weight: 800;
    font-size: clamp(2.1rem, 6vw, 3rem);
    margin: 0 0 24px;
    line-height: 1.4;
}

.fes-quiz p {
    margin: 0;
    line-height: 2;
    font-size: 1.1rem;
}

.fes-meter-img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 32px auto 8px;
}

.fes-max {
    display: block;
    font-family: var(--fes-serif);
    font-weight: 800;
    font-size: clamp(4.5rem, 15vw, 8.25rem);
    line-height: 1.1;
    margin: 16px 0;
}

.fes-max small {
    font-size: 0.35em;
    margin-left: 0.2em;
}

.fes-quiz .fes-note {
    margin-top: 28px;
    font-size: 1.275rem;
    color: rgba(247, 249, 251, 0.6);
    line-height: 1.8;
}

/* ========================================
   7. 協賛・サポート
   ======================================== */
.fes-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 100%;
    margin: 0 auto 40px;
}

.fes-sponsor-grid .fes-slot {
    aspect-ratio: 3 / 2;
}

/* 実スポンサーロゴ：差し替え枠と同じ 3:2 の枠に、ロゴ全体を収めて表示 */
.fes-sponsor-logo {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.fes-sponsor-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.fes-thanks-names {
    text-align: center;
    color: var(--fes-sub);
    margin: 0 0 48px;
}

.fes-cta-wrap {
    text-align: center;
}

.fes-cta-wrap p {
    margin: 0 0 20px;
}

.fes-btn {
    display: inline-block;
    padding: 14px 36px;
    border: 1px solid var(--fes-fg);
    background: transparent;
    color: var(--fes-fg);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.fes-btn:hover {
    background: var(--fes-fg);
    color: var(--fes-invert-fg);
}

/* ========================================
   8〜9. フッター
   ======================================== */
.fes-footer {
    padding: 72px 0 24px;
    text-align: center;
    border-top: 1px solid var(--fes-line);
}

.fes-vinet-logo {
    width: min(200px, 60%);
    height: auto;
    margin: 0 auto 32px;
}

.fes-foot-links {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}

.fes-foot-links a,
.fes-foot-contact {
    text-decoration: none;
    color: var(--fes-sub);
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.fes-foot-links a:hover,
.fes-foot-contact:hover {
    color: var(--fes-fg);
}

.fes-copy {
    color: var(--fes-sub);
    font-size: 1.2rem;
    margin: 0;
}

/* ========================================
   タブレット（761〜1024px）
   ======================================== */
@media (min-width: 761px) and (max-width: 1024px) {
    .fes-section {
        padding: 80px 0;
    }
    .fes-cast-grid {
        gap: 24px;
    }
    .fes-cast {
        width: calc((100% - 72px) / 4);
    }
    .fes-cast-single {
        width: calc((100% - 72px) / 4);
    }
}

/* ========================================
   スマホ（〜760px）
   ======================================== */
@media (max-width: 760px) {
    .fes-section {
        padding: 64px 0;
    }
    /* ヒーロー：スマホでは高さと余白を詰める */
    .fes-hero {
        min-height: 56vh;
        padding: 32px 16px 48px;
    }
    .fes-hero-logo {
        /* 現状(88%)の約2倍。176%は親より76%広いので、左右-38%ずつで中央に寄せる */
        width: 176%;
        max-width: none;
        margin-top: -38px;
        margin-bottom: 4px;
        margin-left: -41%;
        margin-right: -38%;
    }
    .fes-cast-group + .fes-cast-group {
        margin-top: 64px;
    }
    .fes-cast-grid {
        gap: 16px;
    }
    .fes-cast {
        width: calc((100% - 16px) / 2);
    }
    .fes-cast-single {
        width: calc((100% - 16px) / 2);
    }
    /* セクション見出しの下マージンを詰める */
    .fes-section-title {
        margin-bottom: 40px;
    }
    .fes-section-sub {
        margin: -28px 0 40px;
    }
    /* 開催日時：ラベルと値を縦積みにして窮屈さを解消 */
    .fes-date-info {
        grid-template-columns: 1fr;
        gap: 4px 0;
        justify-items: center;
        margin: 40px auto 48px;
    }
    .fes-date-info dt {
        margin-top: 12px;
    }
    .fes-date-info dt:first-child {
        margin-top: 0;
    }
    .fes-program li {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .fes-quiz {
        padding: 40px 20px;
    }
    .fes-sponsor-grid {
        /* スマホは縦並び（1列）。各ロゴは画面幅70%で中央寄せ */
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .fes-sponsor-grid .fes-slot,
    .fes-sponsor-grid .fes-sponsor-logo {
        width: 70%;
    }
    /* モバイルのみ協賛ロゴ枠を 2:1（横長）に */
    .fes-sponsor-grid .fes-sponsor-logo {
        aspect-ratio: 2;
    }
    .fes-series {
        display: block;
        font-size: 0.85em;
    }
}

/* ========================================
   スマホ小（〜420px）
   ======================================== */
@media (max-width: 420px) {
    .fes-program h4 {
        font-size: 1.65rem;
    }
    /* クイズのメーターが画面幅を超えないよう縮小 */
    .fes-meter span {
        width: 14px;
    }
    /* フッターリンクの間隔を詰める */
    .fes-foot-links {
        gap: 8px 18px;
    }
}

/* ========================================
   スクロールでフェードイン
   JSが有効（html.js-reveal）で、視覚効果を減らす設定でない場合のみ適用。
   JS未対応/無効時は通常表示のまま。
   ======================================== */
.js-reveal .fes-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.js-reveal .fes-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal .fes-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================
   フェス背景（本番用）
   共通の page-base.css を汚さないよう、このページ専用クラス bg-fes で背景を定義。
   site-background（position:fixed）にフェス背景画像を全画面固定で敷く。
   ======================================== */
body:has(.page-base.bg-fes) .site-background {
    background-image: url('/img/vinet-fes2026/ViNET_Festival_bg.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #eef0f3;
}

body:has(.page-base.bg-fes) .site-background video {
    display: none;
}

/* スマホは縦長のSP用背景に差し替え */
@media (max-width: 767px) {
    body:has(.page-base.bg-fes) .site-background {
        background-image: url('/img/vinet-fes2026/ViNET_Festival_sp_bg.png');
    }
}

/* ========================================
   ピンチズーム無効化（このフェスページのみ）
   近年のブラウザは viewport の user-scalable=no を無視するため、
   touch-action でスケール系ジェスチャを無効化（スクロールは pan-x/pan-y で維持）。
   JS 側（vinet-fes2026.js）でも touchmove/gesturestart/Ctrl+wheel を抑制して補強する。
   ======================================== */
html:has(.page-base.bg-fes),
body:has(.page-base.bg-fes) {
    touch-action: pan-x pan-y;
}