@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Orbitron:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;500;600;700&display=swap');

/* ==========================================
   無限ホームページ - style.css
   Part 1
========================================== */

/* ---------- リセット ---------- */

:root{
    --layer-bg: 0;
    --layer-scene: 10;
    --layer-content: 100;
    --hub-ink: #e8eef8;
    --hub-muted: rgba(232, 238, 248, 0.72);
    --hub-line: rgba(180, 205, 255, 0.22);
    --hub-accent: #7eb6ff;
    --hub-gold: #d4b56a;
    --hub-panel: rgba(8, 14, 28, 0.55);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x: clip;
    max-width: 100%;
    background-color:#060a12;
}

body{

    font-family:"Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    color:var(--hub-ink);

    background-color:#060a12;
    background-image:none;

    overflow-x:clip;
    position:relative;
    max-width: 100%;
    width: 100%;
}

/* 第1層：背景（深いグレー寄りグラデーション。真っ黒すぎない） */
.site-bg{
    position:fixed;
    inset:0;
    z-index:var(--layer-bg);
    pointer-events:none;
    opacity:1;
    background-color:#080c14;
    background-image:
        radial-gradient(
            ellipse 85% 70% at 50% 28%,
            rgba(28, 38, 58, 0.55) 0%,
            transparent 62%
        ),
        radial-gradient(
            ellipse 70% 55% at 18% 80%,
            rgba(22, 32, 48, 0.4) 0%,
            transparent 58%
        ),
        radial-gradient(
            ellipse 55% 50% at 88% 62%,
            rgba(18, 28, 44, 0.35) 0%,
            transparent 55%
        ),
        linear-gradient(
            165deg,
            #0a101c 0%,
            #060a12 42%,
            #04070e 100%
        );
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    filter:none;
}

.site-bg::before{
    content:"";
    position:absolute;
    width:min(720px, 70vw);
    height:min(720px, 70vw);
    top:-28%;
    right:-18%;
    border-radius:50%;
    background:rgba(120, 140, 175, 0.05);
    filter:blur(120px);
}

.site-bg::after{
    content:"";
    position:absolute;
    width:min(800px, 80vw);
    height:min(800px, 80vw);
    bottom:-32%;
    left:-22%;
    border-radius:50%;
    background:rgba(90, 120, 160, 0.06);
    filter:blur(130px);
}

/* 第2層：動く装飾（ページと一緒にスクロール） */
.site-scene{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:100vh;
    z-index:var(--layer-scene);
    pointer-events:none;
    overflow:hidden;
}

/* 第3層：コンテンツ */
.site-content{
    position:relative;
    z-index:var(--layer-content);
    display:flow-root;
}

@media screen and (max-width: 900px){
    .site-bg{
        opacity:1;
        filter:none;
        /* スマホも同じグレー寄りのグラデ */
        background-color:#080c14;
    }

    .site-bg::before,
    .site-bg::after{
        opacity:0.7;
    }
}

/* ---------- 共通 ---------- */

a{
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

.container{

    width:min(1200px,92%);
    margin:120px auto 80px;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;

}


/* ==========================================
   ヘッダー
========================================== */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:80px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 50px;

    box-sizing:border-box;
    
    background:rgba(6, 10, 20, 0.72);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(180, 205, 255, 0.22);

    z-index:2000;

    overflow: visible;
}

/* ---------- ロゴ ---------- */

.logo{

    display:flex;
    align-items:center;
    height:100%;

}

.logo img{

    height:52px;
    width:auto;
    display: block;
    cursor: pointer;
    transition:transform 0.3s ease;

}

.logo a{
    display: flex;
    align-items: center;
    height: 100%;
}

.logo img:hover{
    transform:scale(1.05);
}

/* ---------- PCメニュー ---------- */

.menu{

    display:flex;
    align-items:center;
    height:100%;

    gap:40px;

}

.menu a{

    display:inline-flex;
    align-items:center;
    line-height:1;
    padding:0;

    color:#F5F5F5;

    font-size:16px;

    font-weight:600;

    transition:.25s;
}

.menu a:hover,
.mobile-menu a:hover{

    color:var(--hub-accent);

}

.header .menu a[aria-current="page"]{
    color:var(--hub-accent);
    box-shadow:inset 0 -2px 0 currentColor;
}

.mobile-menu a[aria-current="page"]{
    color:var(--hub-accent);
    background:rgba(126, 182, 255, 0.12);
}

.nav-short{
    display:none;
}

/* ---------- ハンバーガー ---------- */

.hamburger{
    display: none;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 1200;

    width: 42px;
    height: 42px;
    padding: 0;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.hamburger-bars{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 20px;
}

.hamburger-bars span{
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}

.hamburger.is-open .hamburger-bars span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
}

.hamburger.is-open .hamburger-bars span:nth-child(2){
    opacity: 0;
}

.hamburger.is-open .hamburger-bars span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
}

/* スマホ幅ではホーム等をハンバーガーへ。有志発表／クラプロはヘッダーにも残す */
@media screen and (max-width: 900px){
    .header .menu .nav-link--more{
        display: none !important;
    }

    .header .hamburger{
        display: inline-flex !important;
    }
}

body.use-mobile-nav .header .menu .nav-link--more{
    display: none !important;
}

body.use-mobile-nav .header .hamburger{
    display: inline-flex !important;
}

/* ---------- スマホメニュー ---------- */

.mobile-menu{
    position: fixed;

    top: 80px;
    right: 0;

    width: min(78vw, 300px);

    height:calc(100vh - 80px);
    height: calc(100dvh - 80px);

    background: rgba(8, 14, 28, 0.96);

    backdrop-filter: blur(14px);

    display: flex;
    flex-direction: column;

    transform: translateX(105%);
    transition: transform .3s ease;

    z-index: 1050;

    overflow-y: auto;

    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);

    visibility: hidden;
    pointer-events: none;
}

.mobile-menu.active{
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu a{

    display:block;

    color:white;

    text-decoration:none;

    padding:20px 25px;

    border-bottom:1px solid rgba(255,255,255,.1);

    font-size:18px;

    font-weight:600;

}

.mobile-menu a:hover{

    background:rgba(255,255,255,.08);

}

/* ---------- 背景オーバーレイ ---------- */

.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1040;

}

.overlay.active{

    opacity:1;

    visibility:visible;

}

body.menu-open{
    overflow: hidden;
}

/* ==========================================
   Part 2
   カード・コンテンツ
========================================== */

/* ---------- セクション共通 ---------- */

section{
    margin-bottom:80px;
}

h2{

    font-size:34px;

    color:#fff;

    margin-bottom:30px;

    border-left:6px solid #D6B56D;

    padding-left:16px;

}

/* ---------- 開催情報 ---------- */

.info-boxes{

    display:flex;

    gap:35px;

    margin-bottom:70px;

}

.info-card{

    flex:1;

    background:#fff;

    border-radius:22px;

    padding:35px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    transition:.3s;

}

.info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.2);

}

.info-card h3{

    color:#1F4068;

    font-size:24px;

    margin-bottom:18px;

}

.info-card p{

    font-size:18px;

    line-height:1.5;

    color:#555;

}

/* ---------- お知らせ ---------- */

.news{

    background:#fff;

    border-radius:22px;

    padding:40px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.news p{

    padding:16px 0;

    border-bottom:1px solid #ececec;

    font-size:17px;

}

.news p:last-child{

    border-bottom:none;

}

/* ---------- 交通アクセス ---------- */

.access{

    display:flex;

    gap:45px;

    align-items:stretch;

    background:#fff;

    border-radius:22px;

    padding:40px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.access-text{

    width:35%;

}

.access-text p{

    line-height:1.7;

    margin-bottom:18px;

    color:#555;

    font-size:17px;

}

.access-map{

    flex:1;

}

.access-map iframe{

    width:100%;

    height:380px;

    border:0;

    border-radius:18px;

}

/* ==========================================
   Part 3
   背景・星・キラキラ
========================================== */

/* ---------- 背景の光（site-bg へ移行済み） ---------- */

/* ---------- 銀河（横から見たエッジオン・隙間配置） ---------- */

.galaxies{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

/* 1体 = 横向き銀河（薄い円盤＋中央の膨らみ） */
.galaxy{
    position:absolute;
    display:block;
    width:var(--galaxy-w, 220px);
    height:var(--galaxy-h, 56px);
    pointer-events:none;
    opacity:var(--galaxy-op, 0.45);
    transform:rotate(var(--galaxy-rot, -12deg));
    animation:galaxy-float 22s ease-in-out infinite;
    filter:
        drop-shadow(0 0 8px rgba(255, 218, 130, 0.16))
        drop-shadow(0 0 20px rgba(190, 200, 255, 0.12));
    /* 円盤の中心ほど密になる恒星群 */
    background:
        radial-gradient(circle at 50% 48%, rgba(255,250,220,.98) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 46% 54%, rgba(255,220,135,.9) 0 1px, transparent 1.6px),
        radial-gradient(circle at 54% 42%, rgba(255,235,175,.92) 0 1px, transparent 1.7px),
        radial-gradient(circle at 43% 43%, rgba(255,250,225,.78) 0 .8px, transparent 1.4px),
        radial-gradient(circle at 57% 57%, rgba(255,218,130,.82) 0 .9px, transparent 1.5px),
        radial-gradient(circle at 48% 35%, rgba(255,242,195,.75) 0 .7px, transparent 1.3px),
        radial-gradient(circle at 52% 64%, rgba(255,245,205,.72) 0 .8px, transparent 1.4px),
        radial-gradient(circle at 39% 51%, rgba(255,225,155,.7) 0 .8px, transparent 1.4px),
        radial-gradient(circle at 61% 47%, rgba(255,235,180,.68) 0 .8px, transparent 1.4px),
        radial-gradient(circle at 35% 40%, rgba(225,230,255,.65) 0 .7px, transparent 1.3px),
        radial-gradient(circle at 65% 59%, rgba(230,235,255,.62) 0 .7px, transparent 1.3px),
        radial-gradient(circle at 31% 56%, rgba(255,240,205,.58) 0 .6px, transparent 1.2px),
        radial-gradient(circle at 69% 38%, rgba(220,225,255,.55) 0 .7px, transparent 1.3px),
        radial-gradient(circle at 26% 46%, rgba(215,225,255,.5) 0 .6px, transparent 1.2px),
        radial-gradient(circle at 74% 53%, rgba(255,235,190,.5) 0 .6px, transparent 1.2px),
        radial-gradient(circle at 20% 54%, rgba(205,215,255,.42) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 80% 43%, rgba(210,220,255,.42) 0 .5px, transparent 1.1px),
        radial-gradient(circle at 14% 48%, rgba(200,215,255,.32) 0 .5px, transparent 1px),
        radial-gradient(circle at 86% 55%, rgba(215,220,255,.32) 0 .5px, transparent 1px),
        /* 投影された外周リング。透明域を挟んで円盤同士の隙間を作る */
        radial-gradient(ellipse 50% 46% at 50% 50%,
            transparent 0 45%,
            rgba(255,224,155,.25) 49%,
            rgba(224,220,255,.18) 53%,
            transparent 57% 64%,
            rgba(185,200,255,.13) 68%,
            transparent 73%),
        radial-gradient(ellipse 72% 66% at 50% 50%,
            transparent 0 59%,
            rgba(210,215,255,.1) 63%,
            rgba(175,195,245,.07) 66%,
            transparent 70% 78%,
            rgba(170,185,235,.06) 82%,
            transparent 87%);
    background-repeat:no-repeat;
}

/* 円盤 */
.galaxy::before{
    content:"";
    position:absolute;
    inset:18% 0;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,235,.98) 0 1px, transparent 1.8px),
        radial-gradient(circle at 47% 38%, rgba(255,224,140,.9) 0 .9px, transparent 1.6px),
        radial-gradient(circle at 53% 62%, rgba(255,238,185,.88) 0 .9px, transparent 1.6px),
        radial-gradient(circle at 43% 58%, rgba(255,247,215,.78) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 57% 40%, rgba(255,215,120,.8) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 38% 44%, rgba(235,240,255,.7) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 62% 56%, rgba(255,232,175,.68) 0 .7px, transparent 1.4px),
        radial-gradient(circle at 32% 60%, rgba(225,232,255,.58) 0 .65px, transparent 1.3px),
        radial-gradient(circle at 68% 39%, rgba(255,238,195,.56) 0 .65px, transparent 1.3px),
        radial-gradient(circle at 25% 48%, rgba(210,220,255,.48) 0 .6px, transparent 1.2px),
        radial-gradient(circle at 75% 54%, rgba(225,230,255,.46) 0 .6px, transparent 1.2px),
        /* 光の円盤を連続させず、暗い隙間を挟んだ層にする */
        radial-gradient(ellipse 100% 100% at 50% 50%,
            transparent 0 21%,
            rgba(255,229,170,.26) 25%,
            rgba(245,220,180,.19) 29%,
            transparent 34% 41%,
            rgba(210,216,245,.18) 45%,
            rgba(190,205,240,.13) 49%,
            transparent 54% 62%,
            rgba(165,188,230,.11) 66%,
            transparent 72%),
        /* わずかな偏りでCG的な左右対称を崩す */
        radial-gradient(ellipse 38% 92% at 47% 52%,
            rgba(255,247,220,.24) 0%,
            rgba(255,218,145,.13) 28%,
            rgba(210,205,245,.06) 58%,
            transparent 86%),
        /* 白金の中心から青紫の外縁へ連続的に減衰 */
        radial-gradient(ellipse 100% 100% at 50% 50%,
            rgba(255,252,232,.76) 0%,
            rgba(255,232,174,.63) 9%,
            rgba(246,218,168,.49) 20%,
            rgba(222,218,232,.34) 34%,
            rgba(191,205,238,.23) 48%,
            rgba(157,180,225,.14) 62%,
            rgba(126,150,205,.07) 73%,
            transparent 88%),
        linear-gradient(90deg,
            transparent 0%,
            rgba(145,172,225,.05) 7%,
            rgba(174,195,240,.12) 18%,
            rgba(205,216,247,.2) 32%,
            rgba(247,222,170,.4) 44%,
            rgba(255,228,162,.54) 50%,
            rgba(242,222,181,.4) 57%,
            rgba(202,214,244,.2) 69%,
            rgba(167,190,235,.11) 83%,
            rgba(135,160,215,.04) 93%,
            transparent 100%);
    mix-blend-mode:screen;
    filter:blur(.75px);
}

/* 中央バルジ */
.galaxy::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:42%;
    height:68%;
    transform:translate(-50%, -50%);
    border-radius:50%;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(255,255,244,.98) 0%,
            rgba(255,245,210,.94) 7%,
            rgba(255,226,159,.79) 18%,
            rgba(250,205,116,.59) 31%,
            rgba(232,187,108,.4) 45%,
            rgba(218,199,204,.25) 59%,
            rgba(194,197,232,.13) 73%,
            rgba(160,180,225,.05) 86%,
            transparent 100%);
    mix-blend-mode:screen;
    filter:
        blur(1.2px)
        drop-shadow(0 0 6px rgba(255,205,105,.42))
        drop-shadow(0 0 15px rgba(255,220,150,.2));
}

/* 隙間配置（星座と被らないよう左右に振り分け） */
.galaxy-1{
    --galaxy-w: min(260px, 24vw);
    --galaxy-h: 62px;
    --galaxy-rot: -14deg;
    --galaxy-op: 0.42;
    /* 黄惑星（左34%）・オリオン（右上）から離す */
    top:20%;
    left:38%;
    right:auto;
    animation-duration:24s;
    z-index:0;
    /* PCでは非表示 */
    display:none;
}

.galaxy-2{
    --galaxy-w: min(200px, 18vw);
    --galaxy-h: 48px;
    --galaxy-rot: 10deg;
    --galaxy-op: 0.34;
    /* はくちょう（左下）・北斗を避けて右下寄り */
    top:71%;
    left:auto;
    right:10%;
    animation-duration:28s;
    animation-delay:-7s;
    z-index:0;
}

.galaxy-3{
    --galaxy-w: min(170px, 15vw);
    --galaxy-h: 40px;
    --galaxy-rot: -8deg;
    --galaxy-op: 0.28;
    top:72%;
    left:40%;
    right:auto;
    animation-duration:32s;
    animation-delay:-14s;
    z-index:0;
    /* 惑星と重なりやすいため非表示（1・2のみ使う） */
    display:none;
}

/* ホーム以外：少しだけ濃く */
body:not(:has(#homeHub)) .galaxy-1{ --galaxy-op: 0.58; }
body:not(:has(#homeHub)) .galaxy-2{ --galaxy-op: 0.48; }
body:not(:has(#homeHub)) .galaxy-3{ --galaxy-op: 0.4; }

@keyframes galaxy-float{
    0%, 100%{
        transform:rotate(var(--galaxy-rot, -12deg)) translateY(0);
    }
    50%{
        transform:rotate(var(--galaxy-rot, -12deg)) translateY(-10px);
    }
}

@media (max-width:900px){
    .galaxy-1{
        display:block;
        --galaxy-w: 120px;
        --galaxy-h: 30px;
        top:24%;
        left:auto;
        right:8%;
        --galaxy-op: 0.36;
    }

    .galaxy-2{
        --galaxy-w: 96px;
        --galaxy-h: 24px;
        top:56%;
        left:4%;
        right:auto;
        --galaxy-op: 0.3;
    }

    .galaxy-3{
        --galaxy-w: 84px;
        --galaxy-h: 20px;
        top:82%;
        left:auto;
        right:6%;
        --galaxy-op: 0.26;
    }

    body:not(:has(#homeHub)) .galaxy-1{ --galaxy-op: 0.5; }
    body:not(:has(#homeHub)) .galaxy-2{ --galaxy-op: 0.42; }
    body:not(:has(#homeHub)) .galaxy-3{ --galaxy-op: 0.34; }
}

@media (prefers-reduced-motion: reduce){
    .galaxy{
        animation:none;
    }
}

/* ---------- 星 ---------- */

.stars{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.star{

    position:absolute;

    color:white;

    opacity:.45;

    animation:twinkle 5s infinite ease-in-out;

}

/* 星の配置 */

.star:nth-child(1){
    top:8%;
    left:12%;
    font-size:13px;
}

.star:nth-child(2){
    top:18%;
    right:15%;
    font-size:18px;
}

.star:nth-child(3){
    top:38%;
    left:28%;
    font-size:11px;
}

.star:nth-child(4){
    top:62%;
    right:12%;
    font-size:14px;
}

.star:nth-child(5){
    top:78%;
    left:18%;
    font-size:16px;
}

.star:nth-child(6){
    top:55%;
    left:72%;
    font-size:12px;
}

.star:nth-child(7){
    top:28%;
    left:82%;
    font-size:15px;
}

/* ---------- ヘッダーのキラキラ ---------- */

.sparkles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.sparkles span{

    position:absolute;

    color:rgba(255,255,255,.28);

    animation:twinkle 4s infinite ease-in-out;

}

.sparkles span:nth-child(1){

    top:14px;
    left:12%;

    font-size:14px;

}

.sparkles span:nth-child(2){

    top:44px;
    left:30%;

    font-size:10px;

}

.sparkles span:nth-child(3){

    top:18px;
    right:32%;

    font-size:16px;

}

.sparkles span:nth-child(4){

    top:48px;
    right:18%;

    font-size:11px;

}

.sparkles span:nth-child(5){

    top:24px;
    left:62%;

    font-size:13px;

}

/* ---------- アニメーション ---------- */

@keyframes twinkle{

    0%,100%{

        opacity:.2;

        transform:scale(1);

    }

    50%{

        opacity:.9;

        transform:scale(1.4);

    }

}

/* ==========================================
   Part 4
   スマホ対応（レスポンシブ）
========================================== */

@media screen and (max-width:900px){

    /* ---------- ヘッダー ---------- */

    .header{

        height:70px;

        padding:0 54px 0 22px;

        position: fixed;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(6, 10, 20, 0.92);

    }

    .logo{
        max-width: none;
        margin-left: 0;
        transform: none;
        flex-shrink: 0;
    }

    .logo img{

        height:50px;

        max-width: 100%;

    }

    .menu{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.7rem;
        margin-left: auto;
        margin-right: 0.95rem;
        height: auto;
        min-width: 0;
    }

    .menu .nav-link--pin{
        font-size: 0.86rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        white-space: nowrap;
        padding: 0.32rem 0.2rem;
        line-height: 1.2;
    }

    .nav-full{
        display: none;
    }

    .nav-short{
        display: inline;
    }

    /* ---------- メニュー：スマホはハンバーガー ---------- */
    /* ※ 表示切替は上部の共通ルール / body.use-mobile-nav でも担保 */

    .mobile-menu{
        top: 70px;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
    }

    /* ---------- コンテナ ---------- */

    .container{

        width:94%;

        margin:100px auto 50px;

    }

    /* ---------- 情報カード ---------- */

    .info-boxes{

        flex-direction:column;

        gap:20px;

    }

    .info-card{

        padding:28px;

    }

    .info-card h3{

        font-size:22px;

    }

    .info-card p{

        font-size:16px;

    }

    /* ---------- お知らせ ---------- */

    .news{

        padding:28px;

    }

    .news p{

        font-size:16px;

    }

    /* ---------- アクセス ---------- */

    .access{

        flex-direction:column;

        padding:28px;

        gap:25px;

    }

    .access-text{

        width:100%;

    }

    .access-map{

        width:100%;

    }

    .access-map iframe{

        width:100%;

        height:260px;

    }

    /* ---------- 見出し ---------- */

    h2{

        font-size:28px;

    }

}

/* ==========================================
   タブレット
========================================== */

@media screen and (min-width:769px) and (max-width:1100px){

    .container{

        width:92%;

    }

    .info-boxes{

        gap:25px;

    }

    .access{

        gap:30px;

    }

}

/* ==========================================
   PC（大画面）
========================================== */

@media screen and (min-width:1400px){

    .container{

        max-width:1300px;

    }

}

/* ==========================================
   少しだけアニメーション
========================================== */

.info-card,
.news,
.access{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
.news h2,
.access h2{

    color:#1F2937;

}

/* ==========================
   背景の惑星
========================== */

.planets{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow: hidden;
    transform-style: preserve-3d;
    /* 調整用：各惑星のサイズ・位置はこの変数だけ変えればOK */
    --planet-saturn-w: min(480px, 46vw);
    --planet-blue-w: min(200px, 18vw);
    --planet-yellow-w: min(170px, 15vw);
    --planet-purple-w: min(190px, 17vw);
    --planet-green-w: min(150px, 14vw);
    --planet-brown-w: min(130px, 12vw);
}

.planet{
    position:absolute;
    height:auto;
    width:var(--planet-w);
    animation:float 10s ease-in-out infinite;
    /* ほんのりぼわんとした光 */
    filter:
        drop-shadow(0 0 12px rgba(8, 12, 28, 0.5))
        drop-shadow(0 0 18px rgba(210, 220, 255, 0.28))
        drop-shadow(0 0 36px rgba(180, 200, 255, 0.14))
        brightness(1.06)
        contrast(1.04);
}

/* 土星 — 大きさでインパクト、暗く奥に（文字より前に出さない） */
.planet-saturn{
    --planet-w: var(--planet-saturn-w);
    top:8%;
    right:-6%;
    opacity:0.42;
    animation-duration:18s;
    z-index:0;
    filter:
        drop-shadow(0 0 14px rgba(8, 12, 28, 0.45))
        drop-shadow(0 0 22px rgba(232, 230, 180, 0.2))
        drop-shadow(0 0 48px rgba(210, 205, 160, 0.12))
        brightness(0.72)
        contrast(0.95)
        saturate(0.85);
}

/* 青 — 左上・土星より奥 */
.planet-blue{
    --planet-w: var(--planet-blue-w);
    top:5%;
    left:-2%;
    opacity:0.32;
    animation-duration:16s;
    z-index:0;
    filter:
        drop-shadow(0 0 10px rgba(8, 12, 28, 0.4))
        drop-shadow(0 0 18px rgba(150, 185, 255, 0.16))
        drop-shadow(0 0 36px rgba(120, 160, 240, 0.1))
        brightness(0.62)
        contrast(0.92)
        saturate(0.8);
}

/* 黄 — 左中央 */
.planet-yellow{
    --planet-w: var(--planet-yellow-w);
    top:34%;
    /* ロケットが外側を一周できるよう、端から一周分の余白を空ける */
    left:7%;
    opacity:0.55;
    animation-duration:16s;
    animation-delay:-5s;
    z-index:1;
}

/* 紫 — 右中央 */
.planet-purple{
    --planet-w: var(--planet-purple-w);
    top:48%;
    right:8%;
    opacity:0.52;
    animation-duration:15s;
    animation-delay:-3s;
    z-index:1;
}

/* 緑 — 左下寄り */
.planet-green{
    --planet-w: var(--planet-green-w);
    top:68%;
    left:14%;
    opacity:0.42;
    animation-duration:18s;
    animation-delay:-8s;
    z-index:0;
}

/* 茶 — 右下・奥 */
.planet-brown{
    --planet-w: var(--planet-brown-w);
    top:78%;
    right:18%;
    opacity:0.36;
    animation-duration:20s;
    animation-delay:-11s;
    z-index:0;
}

/* ゆっくり浮遊 */

@keyframes float{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-15px);
    }

}

/* PC指定より後ろに置き、スマホの位置が確実に優先されるようにする */
@media (max-width:900px){
    .planets{
        --planet-saturn-w: min(220px, 58vw);
        --planet-blue-w: 78px;
        --planet-yellow-w: 68px;
        --planet-purple-w: 74px;
        --planet-green-w: 64px;
        --planet-brown-w: 52px;
    }

    .planet-saturn{
        top:8%;
        right:-10%;
        opacity:0.38;
    }

    .planet-blue{
        left:8px;
        top:5%;
        opacity:0.28;
    }

    /* スマホでもロケットが外側を一周できる余白を確保する */
    .planet-yellow{
        left:20%;
        top:32%;
        opacity:0.48;
    }

    .planet-purple{
        right:20%;
        top:46%;
        opacity:0.45;
    }

    .planet-green{
        left:20%;
        top:70%;
        opacity:0.38;
    }

    .planet-brown{
        right:20%;
        top:82%;
        opacity:0.32;
    }
}

/* ---------- 流れ星 ---------- */

.scene-shooting-stars{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

/* --- 星座 --- */
.constellations{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    opacity:0.52;
}

.constellation{
    position:absolute;
    pointer-events:none;
    overflow:visible;
    transform:translate(-50%, -50%) scale(var(--const-scale, 1.28));
    transform-origin:center center;
}

@media (max-width: 640px){
    .constellation{
        --const-scale: 1.22;
    }
}

.constellation svg{
    position:absolute;
    inset:0;
    overflow:visible;
}

.const-star{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#e6c56a;
    box-shadow:0 0 4px 1.5px rgba(230,197,106,0.4), 0 0 9px 3px rgba(212,181,106,0.16);
    transform:translate(-50%,-50%) scale(0.2);
    opacity:0;
}

.constellation.is-revealed .const-star{
    animation:constStarReveal 0.45s ease forwards;
    animation-delay:calc(var(--star-i, 0) * 0.18s);
}

@keyframes constStarReveal{
    0%{
        opacity:0;
        transform:translate(-50%,-50%) scale(0.2);
    }
    60%{
        opacity:0.85;
        transform:translate(-50%,-50%) scale(1.35);
    }
    100%{
        opacity:0.78;
        transform:translate(-50%,-50%) scale(1);
    }
}

.constellation svg line{
    stroke:rgba(230,197,106,0.4);
    stroke-width:1.25;
    fill:none;
    stroke-dasharray:var(--line-len);
    stroke-dashoffset:var(--line-len);
    opacity:0;
}

.constellation.is-revealed svg line{
    animation:constLineDraw 0.55s ease forwards;
    /* 星が出揃ってから線をなぞる */
    animation-delay:calc(0.55s + var(--line-i, 0) * 0.22s);
}

@keyframes constLineDraw{
    0%{
        opacity:0;
        stroke-dashoffset:var(--line-len);
    }
    8%{
        opacity:0.72;
    }
    100%{
        opacity:0.72;
        stroke-dashoffset:0;
    }
}

.shooting-star{
    position:absolute;
    width:120px;
    height:2px;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
    border-radius:999px;
    transform-origin:left center;
    opacity:0;
    animation:shootingStarPass var(--shoot-duration, 1.1s) ease-in forwards;
}

@keyframes shootingStarPass{
    0%{
        opacity:0;
        transform:rotate(var(--shoot-angle, 140deg)) translateX(0);
    }
    12%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:rotate(var(--shoot-angle, 140deg)) translateX(480px);
    }
}

/* ---------- ロケット枠 ---------- */

.scene-rockets{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.scene-flight{
    position:absolute;
    left:0;
    top:0;
    width:clamp(36px, 4vw, 58px);
    aspect-ratio:1;
    opacity:0;
    z-index:2;
    transform-origin:center;
    will-change:transform, opacity;
    filter:drop-shadow(0 0 10px rgba(230,197,106,.28));
    transition:opacity .35s ease;
}

.scene-flight.is-active{
    opacity:.46;
}

.scene-flight::before{
    content:"";
    position:absolute;
    right:64%;
    top:50%;
    width:clamp(30px, 6vw, 84px);
    height:10px;
    transform:translateY(-50%);
    transform-origin:right center;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(126,182,255,.08) 28%,
        rgba(230,197,106,.24) 72%,
        rgba(255,238,170,.48)
    );
    filter:blur(2px);
    border-radius:999px;
    animation:sceneFlightTrail .7s ease-in-out infinite alternate;
}

.scene-flight-rocket{
    display:block;
    position:relative;
    width:100%;
    height:auto;
    user-select:none;
    filter:
        drop-shadow(0 0 5px rgba(230,197,106,.38))
        drop-shadow(0 0 12px rgba(126,182,255,.2));
}

@keyframes sceneFlightTrail{
    from{
        opacity:.55;
        transform:translateY(-50%) scaleX(.78);
    }
    to{
        opacity:1;
        transform:translateY(-50%) scaleX(1.08);
    }
}

@media (max-width:900px){
    .scene-flight{
        width:clamp(30px, 10vw, 42px);
    }

    .scene-flight::before{
        width:clamp(24px, 13vw, 48px);
        height:7px;
    }
}

body.video-phase .scene-flight,
body.journey-immersive .scene-flight,
body.opening-active .scene-flight{
    opacity:0 !important;
}

@media (prefers-reduced-motion: reduce){
    .shooting-star{
        display:none;
    }

    .scene-flight{
        display:none;
    }
}

.hero{

    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    transform:translateY(-60px);

}

.hero-logo{

    width:260px;

    margin-bottom:40px;

    opacity:0;

    animation:fade 1s forwards;
}

.hero h1{
    font-size:38px;
}

.hero h2{
    font-size:28px;
}

.hero p{
    font-size:14px;
    letter-spacing:4px;
}

.line1{

    color:white;

    font-size:clamp(38px,6vw,64px);

    margin:0;

    opacity:0;

    animation:fade 1s .6s forwards;
}

.line2{

    color:#D6B56D;

    font-size:clamp(26px,4vw,40px);

    margin-top:25px;

    opacity:0;

    animation:fade 1s 1.5s forwards;
}

.line3{

    color:#ddd;

    margin-top:35px;

    font-size:clamp(12px,2vw,18px);
    
    letter-spacing:6px;

    opacity:0;

    animation:fade 1s 2.3s forwards;
}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.scroll-down{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    color:rgba(255,255,255,.8);

    font-size:28px;

    animation:bounce 2s infinite;

    user-select:none;
}

.scroll-down span{
    font-size:14px;
    letter-spacing:3px;
}

@keyframes updown{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

/* ==========================
   スクロールアニメーション
========================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.show{

    opacity:1;

    transform:translateY(0);
}

/*==========================
  テーマ
==========================*/

.theme{

    text-align:center;

    padding:120px 20px;

    max-width:900px;

    margin:0 auto;
}

.theme-subtitle{

    color:#D6B56D;

    letter-spacing:6px;

    font-size:14px;

    margin-bottom:20px;
}

.theme-title{

    color:white;

    font-size:72px;

    margin-bottom:40px;

    border:none;
    padding:0;
}

.theme-text{

    color:#EAEAEA;

    font-size:20px;

    line-height:2.2;

    letter-spacing:1px;
}

@media (max-width:768px){

.theme{

    padding:80px 20px;

}

.theme-title{

    font-size:48px;

}

.theme-text{

    font-size:16px;

    line-height:2;

}

}

/*==================================
  PHOTO GALLERY
==================================*/

.gallery-preview{

    margin:100px 0;

}

.gallery-header{

    text-align:center;

    margin-bottom:40px;

}

.gallery-header p{

    color:#D6B56D;

    letter-spacing:5px;

    font-size:14px;

    margin-bottom:12px;

}

.gallery-header h2{

    color:white;

    font-size:42px;

    border:none;

    padding:0;

    margin:0;

}

.gallery-glass{

    position:relative;

    overflow:hidden;

    padding:28px 0;

    border-radius:28px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
        0 10px 40px rgba(0,0,0,.25);

    cursor:grab;
}

.gallery-glass:active{
    cursor:grabbing;
}

.gallery-track{

    display:flex;

    gap:24px;

    width:max-content;

    user-select:none;

    will-change:transform;

}

.gallery-track img{

    width:320px;

    height:210px;

    object-fit:cover;

    border-radius:20px;

    display:block;

    transition:.35s;
}

.gallery-track a:hover img{

    transform:translateY(-8px) scale(1.05);

    box-shadow:0 15px 35px rgba(0,0,0,.35);

}

.gallery-track a{

    display:block;

    cursor:pointer;

}

@media (max-width:768px){

.gallery-track img{

    width:240px;

    height:160px;

}

.gallery-header h2{

    font-size:30px;

}

}

.gallery-button{
    display:flex;
    justify-content:center;
    margin-top:30px;
    width:100%;
}

.gallery-button a{

    display:inline-block;

    padding:14px 34px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-size:18px;

    font-weight:600;

    letter-spacing:2px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.2);

    backdrop-filter:blur(10px);

    transition:.3s;
}

.gallery-button a:hover{

    background:rgba(255,255,255,.22);

    transform:translateY(-3px);

}

.gallery-page{

    padding:170px 8%;
    min-height:100vh;

}

.gallery-title{

    text-align:center;
    margin-bottom:70px;

}

.gallery-title p{

    color:#D6B56D;
    letter-spacing:6px;

}

.gallery-title h1{

    color:white;
    font-size:48px;
    margin:15px 0;

}

.gallery-title span{

    color:#bbb;

}

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.photo-card{

    aspect-ratio: 4 / 3;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:25px;

    overflow:hidden;

    transition:.35s;

}

.photo-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.photo-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.3);

}

.photo-card:hover img{

    transform:scale(1.08);

}

/* ===========================
   Lightbox
=========================== */

.lightbox{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.85);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.lightbox.active{

    opacity:1;
    visibility:visible;

}

.lightbox img{

    max-width:90%;
    max-height:85vh;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

    transform:scale(.9);

    transition:.35s;

}

.lightbox.active img{

    transform:scale(1);

}

.close{

    position:absolute;

    top:30px;
    right:45px;

    font-size:48px;

    color:white;

    cursor:pointer;

    transition:.25s;

    user-select:none;

}

.close:hover{

    transform:rotate(90deg) scale(1.2);

    color:#D6B56D;

}

/*==================================
    Schedule
==================================*/

.schedule-page{

    max-width:1100px;

    margin:0 auto;

    padding:160px 30px 100px;

}

/* タイトル */

.schedule-header{

    text-align:center;

    margin-bottom:60px;

}

.schedule-header p{

    color:#D6B56D;

    letter-spacing:6px;

    font-size:14px;

}

.schedule-header h1{

    color:white;

    font-size:52px;

    margin:15px 0;

    text-shadow:

        0 0 12px rgba(214,181,109,.18);

}

.schedule-header span{

    color:#aaa;

    font-size:18px;

}


/*=====================
    タブ
======================*/

.schedule-tabs{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:70px;

}

.tab{

    padding:14px 36px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:17px;

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    transition:.35s;

}

.tab:hover{

    transform:translateY(-3px);

}

.tab.active{

    background:linear-gradient(
        135deg,
        #E6C97A,
        #C79D39
    );

    color:#222;

    box-shadow:

        0 10px 30px rgba(214,181,109,.35);

}


/*=====================
    タイムライン
======================*/

.timeline{

    display:none;

}

.timeline.active{

    display:block;

}


/*=====================
    1イベント
======================*/

.timeline-item{

    display:grid;

    grid-template-columns:120px 60px 1fr;

    align-items:center;

    margin-bottom:60px;

}


/* 時間 */

.timeline-time{

    color:white;

    font-size:26px;

    font-weight:bold;

    text-align:right;

    padding-right:25px;

}


/*=====================
    線
======================*/

.timeline-line{

    position:relative;

    display:flex;

    justify-content:center;

    height:100%;

}

.timeline-line::before{

    content:"";

    position:absolute;

    width:3px;

    top:0;

    bottom:-60px;

    background:#D6B56D;

}


/*=====================
    ●
======================*/

.timeline-dot{

    width:18px;

    height:18px;

    border-radius:50%;

    background:#D6B56D;

    position:relative;

    z-index:2;

    box-shadow:
        0 0 12px rgba(214,181,109,.8),
        0 0 28px rgba(214,181,109,.5);

}


/*=====================
    カード
======================*/

.timeline-card{

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:24px;

    padding:24px 30px;

    transition:.35s;

}

.timeline-card:hover{

    transform:

        translateY(-8px)
        scale(1.02);

    box-shadow:

        0 20px 60px rgba(0,0,0,.35);

}

.timeline-card h3{

    color:white;

    margin-bottom:8px;

    font-size:26px;

}

.timeline-card p{

    color:#bbb;

}


/*=====================
    スマホ
======================*/

@media (max-width: 767px) {

    .timeline-item{

        grid-template-columns:70px 35px 1fr;

        gap:10px;

    }

    .timeline-time{

        font-size:18px;

        padding-right:10px;

    }

    .timeline-card{

        padding:18px;

    }

    .schedule-header h1{

        font-size:36px;

    }

}

/*==========================
 Timeline Animation
==========================*/

.timeline-item{

    opacity:0;

    transform:translateY(40px);

    transition:.7s;

}

.timeline-item.show{

    opacity:1;

    transform:translateY(0);

}

/* 線 */

.timeline-line::before{

    height:0;

    transition:1s;

}

.timeline-item.show .timeline-line::before{

    height:calc(100% + 60px);

}

/* ● */

.timeline-dot{

    transform:scale(.5);

    transition:.5s;

    animation:pulse 2.8s infinite;

}

.timeline-item.show .timeline-dot{

    transform:scale(1);

    box-shadow:
        0 0 10px #D6B56D,
        0 0 25px #D6B56D,
        0 0 45px rgba(214,181,109,.8);

}

/* カード */

.timeline-card{

    opacity:0;

    transform:translateX(40px);

    transition:.6s .2s;

    position:relative;

     overflow:hidden;

}

.timeline-item.show .timeline-card{

    opacity:1;

    transform:translateX(0);

    .timeline-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.28),

            transparent

        );

    transition:.8s;

}

}

.timeline-card:hover::before{

    left:180%;

}

@keyframes pulse{

    0%{

        transform:scale(.95);

        box-shadow:
            0 0 8px rgba(214,181,109,.5);

    }

    50%{

        transform:scale(1.2);

        box-shadow:
            0 0 20px rgba(214,181,109,.9),
            0 0 40px rgba(214,181,109,.6);

    }

    100%{

        transform:scale(.95);

        box-shadow:
            0 0 8px rgba(214,181,109,.5);

    }

}

/*==========================
    Live Status
==========================*/

.live-status{

    width:min(700px,100%);

    margin:0 auto 55px;

    display:flex;

    align-items:flex-start;   /* ← centerから変更 */

    gap:22px;

    padding:28px 34px;

    border-radius:24px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

}


.live-status small{

    color:#D6B56D;

    letter-spacing:4px;

}

.live-status h3{

    margin-top:8px;

    color:white;

    font-size:24px;

}

.live-now-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:4px 8px;
    width:100%;
    min-width:0;
    margin-top:8px;
}

.live-now-label{
    margin:0;
    margin-top:0;
    white-space:nowrap;
}

.live-now-viewport{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    position:relative;
}

.live-now-track{
    position:relative;
    width:100%;
    min-height:1.6em;
}

.live-now-slide{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    color:white;
    font-size:24px;
    font-weight:700;
    line-height:1.4;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .65s ease, visibility .65s ease;
}

.live-now-viewport.is-rotating .live-now-slide:not(.is-active){
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
}

.live-now-slide.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    position:relative;
    z-index:1;
}

.live-now-place{
    display:block;
    font-size:.62rem;
    font-weight:500;
    color:rgba(126,182,255,.95);
}

.live-dot{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#4cff7f;

    margin-top:36px;     /* ←ここで上下位置を調整 */

    flex-shrink:0;

    animation:livePulse 1.5s infinite;

}

.live-status > div{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

@keyframes livePulse{

    0%{

        box-shadow:0 0 0 0 rgba(76,255,127,.7);

    }

    100%{

        box-shadow:0 0 0 18px rgba(76,255,127,0);

    }

}

/*==========================
    Current Time Line
==========================*/

.timeline{

    position:relative;

}

.current-line{

    position:absolute;

    left:150px;

    width:calc(100% - 150px);

    height:3px;

    background:#ff5c5c;

    display:none;

    align-items:center;

    z-index:20;

    box-shadow:

        0 0 15px rgba(255,92,92,.8);

}

.current-marker{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#ff5c5c;

    margin-left:-7px;

    animation:markerPulse 1.5s infinite;

}

.current-label{

    margin-left:15px;

    color:#ff8d8d;

    font-weight:bold;

    letter-spacing:3px;

}

@keyframes markerPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.35);

    }

    100%{

        transform:scale(1);

    }

}

/*==========================
    Project Filter
==========================*/

.project-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:60px;

}

.filter-btn{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(16px);

    color:#ddd;

    padding:12px 26px;

    border-radius:999px;

    cursor:pointer;

    transition:.35s;

    font-size:15px;

    letter-spacing:2px;

}

.filter-btn:hover{

    transform:translateY(-3px);

    border-color:#D6B56D;

    color:white;

    box-shadow:0 0 20px rgba(214,181,109,.25);

}

.filter-btn.active{

    background:#D6B56D;

    color:#1E2A36;

    font-weight:bold;

    box-shadow:
        0 0 18px rgba(214,181,109,.6);

}

@media (max-width:768px){

    .project-filter{

        gap:12px;

    }

    .filter-btn{

        padding:10px 18px;

        font-size:13px;

    }

}

/*==========================
    Class Projects
==========================*/

.projects-page{

    padding:170px 8% 100px;

    min-height:100vh;

}

.projects-header{

    text-align:center;

    margin-bottom:60px;

}

.projects-header p{

    color:#D6B56D;

    letter-spacing:6px;

}

.projects-header h1{

    color:white;

    font-size:48px;

    margin:15px 0;

}

.projects-header span{

    color:#bbb;

}

.projects-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.project-card{

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:25px;

    overflow:hidden;

    transition:
        opacity .25s,
        transform .25s,
        box-shadow .35s;

    opacity:1;

    position:relative;

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.3);

}

.project-image{

    overflow:hidden;

    aspect-ratio:3 / 2;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.project-card:hover .project-image img{

    transform:scale(1.05);

    filter:brightness(1.08);

}

.project-content{

    padding:28px;

}

.project-class{

    color:#D6B56D;

    font-size:14px;

    letter-spacing:3px;

    margin-bottom:12px;

}

.project-content h2{

    color:white;

    margin-bottom:18px;

}

.project-content p,
.project-description{

    color:#ccc;

    line-height:1.85;

    font-size:16px;

}

.project-room{

    margin-top:20px;

    color:#aaa;

    font-size:14px;

}

.project-category{

    position:absolute;

    top:18px;

    right:18px;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(214,181,109,.15);

    border:1px solid rgba(214,181,109,.5);

    color:#D6B56D;

    backdrop-filter:blur(15px);

    font-size:13px;

    letter-spacing:2px;

    z-index:5;

}

.project-more{

    margin-top:22px;

    display:inline-block;

    color:#D6B56D;

    text-decoration:none;

    opacity:0;

    transform:translateY(10px);

    transition:.35s;

    font-weight:600;

}

.project-card:hover .project-more{

    opacity:1;

    transform:translateY(0);

}

.project-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transition:.8s;

}

.project-card:hover::before{

    left:150%;

}

/*==========================
    Project Modal
==========================*/

.project-modal{

    position:fixed;

    inset:0;

    background:rgba(10,15,25,.75);

    backdrop-filter:blur(10px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:3000;

}

.project-modal.active{

    opacity:1;

    visibility:visible;

}

.modal-box{

    width:min(900px,90%);

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(24px);

    position:relative;

    transform:translateY(30px);

    transition:.35s;

}

.project-modal.active .modal-box{

    transform:translateY(0);

}

.modal-close{

    position:absolute;

    top:20px;

    right:20px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.3s;

    z-index:5;

}

.modal-close:hover{

    background:#D6B56D;

    color:#1E2A36;

}

.modal-box img{

    width:100%;

    height:360px;

    object-fit:cover;

    display:block;

}

.modal-content{

    padding:40px;

}

.modal-content span{

    color:#D6B56D;

    letter-spacing:3px;

    font-size:14px;

}

.modal-content h2{

    color:white;

    margin:18px 0;

    font-size:36px;

}

.modal-content p{

    color:#ddd;

    line-height:1.9;

}

.modalRoom{

    margin-top:25px;

    color:#bbb;

}

@media(max-width:768px){

    .modal-box{

        width:94%;

    }

    .modal-box img{

        height:220px;

    }

    .modal-content{

        padding:25px;

    }

    .modal-content h2{

        font-size:28px;

    }

}

.theme-logo{
    display:flex;
    justify-content:center;
    margin:40px 0;
}

.theme-logo img{
    width:320px;
    max-width:80%;
    height:auto;
    animation:themeFloat 5s ease-in-out infinite;
    filter:
        drop-shadow(0 0 15px rgba(255,255,255,.35))
        drop-shadow(0 0 30px rgba(255,215,120,.15));
}

@keyframes themeFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

/* ---------- フッター（全ページ共通。最終見た目はここだけ） ---------- */

.footer {
    margin-top: 3rem;
    padding: 2.25rem 1.5rem 2rem;
    border-top: 1px solid var(--hub-line);
    background: rgba(6, 10, 20, 0.55);
    overflow: hidden;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
}

.footer-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: center;
    align-items: flex-start;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.footer-school-text {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.footer-school-name,
.footer-festival-name {
    display: block;
}

.footer-school-name {
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.08em;
    color: rgba(232, 238, 248, 0.86);
}

.footer-festival-name {
    font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.1em;
    color: var(--hub-ink);
}

.footer img.footer-rits-mark {
    display: block;
    height: auto;
    width: min(22rem, 88vw);
    max-height: 4.2rem;
    margin: 0.35rem 0 0.15rem;
    object-fit: contain;
    object-position: left center;
    opacity: 1;
    filter: none;
    background: transparent;
    padding: 0;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-brand > img {
    height: 56px;
    width: auto;
    margin: 0;
    display: block;
    flex-shrink: 0;
}

.footer p {
    margin: 0;
}

.footer small {
    margin: 0;
    font-size: 0.78rem;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(183, 192, 216, 0.65);
}

@media (max-width: 767px) {
    .footer {
        margin-top: 2rem;
        padding: 1.35rem 1rem 1.25rem;
    }

    .footer-content {
        gap: 0.85rem;
    }

    .footer-brand {
        gap: 0.35rem;
    }

    .footer-brand > img {
        height: 40px;
    }

    .footer-copy {
        gap: 0.2rem;
        align-items: center;
    }

    .footer-school-text {
        gap: 0.3rem;
        align-items: center;
        text-align: center;
    }

    .footer-school-name {
        font-size: 0.82rem;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }

    .footer-festival-name {
        font-size: 0.92rem;
        line-height: 1.35;
        letter-spacing: 0.06em;
    }

    .footer img.footer-rits-mark {
        width: min(14rem, 72vw);
        max-height: 2.6rem;
        margin: 0.2rem auto 0.05rem;
        object-position: center;
    }

    .footer-instagram {
        gap: 0.55rem;
        padding: 0.3rem 0.2rem;
    }

    .footer-instagram-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .footer-instagram-icon svg {
        width: 16px;
        height: 16px;
    }

    .footer-instagram-label {
        font-size: 0.58rem;
        letter-spacing: 0.14em;
    }

    .footer-instagram-text {
        font-size: 0.72rem;
        letter-spacing: 0.03em;
    }

    .footer small {
        font-size: 0.68rem;
    }
}

@media (min-width: 768px) {
    .footer {
        padding: 2.6rem 2rem 2.2rem 1.5rem;
    }

    .footer-content {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 1.75rem;
        min-height: 11rem;
        max-width: none;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .footer-brand {
        flex: 1;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 2.25rem;
        min-height: 11rem;
    }

    .footer-social {
        flex-shrink: 0;
        align-self: stretch;
        align-items: flex-end;
        justify-content: flex-end;
        padding-bottom: 0.35rem;
    }

    .footer-brand > img {
        height: 10rem;
        max-height: 100%;
        width: auto;
        margin: 0;
        flex-shrink: 0;
        object-fit: contain;
        filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.38));
    }

    .footer-copy {
        flex: 1;
        min-width: 0;
        gap: 0.4rem;
        align-items: flex-start;
    }

    .footer-school-text {
        gap: 0.55rem;
        align-items: flex-start;
        text-align: left;
    }

    .footer-school-name {
        font-size: 1.12rem;
        line-height: 1.8;
        letter-spacing: 0.09em;
    }

    .footer-festival-name {
        font-size: 1.28rem;
        letter-spacing: 0.12em;
    }

    .footer img.footer-rits-mark {
        width: min(22rem, 34vw);
        max-height: 4.4rem;
        height: auto;
        margin: 0.35rem 0 0.1rem;
        object-position: left center;
    }

    .footer small {
        font-size: 0.82rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .footer {
        padding: 2rem 1.25rem 1.75rem 1rem;
    }

    .footer-content {
        gap: 1rem;
        min-height: 8.75rem;
    }

    .footer-brand {
        gap: 1.15rem;
        min-height: 8.75rem;
    }

    .footer-brand > img {
        height: 7.25rem;
    }

    .footer-school-name {
        font-size: 0.95rem;
        letter-spacing: 0.06em;
    }

    .footer-festival-name {
        font-size: 1.08rem;
        letter-spacing: 0.08em;
    }

    .footer img.footer-rits-mark {
        width: min(18rem, 100%);
        max-height: 3.4rem;
    }

    .footer-instagram {
        gap: 0.65rem;
    }

    .footer-instagram-text {
        font-size: 0.78rem;
    }
}

@media (min-width: 1200px) {
    .footer {
        padding: 3.25rem 2.75rem 2.75rem 1.75rem;
    }

    .footer-content {
        gap: 2.5rem;
        min-height: 15rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .footer-brand {
        gap: 4.75rem;
        min-height: 15rem;
    }

    .footer-brand > img {
        height: 14.5rem;
    }

    .footer-school-text {
        gap: 0.75rem;
    }

    .footer-school-name {
        font-size: 1.28rem;
    }

    .footer-festival-name {
        font-size: 1.48rem;
    }

    .footer img.footer-rits-mark {
        width: min(28rem, 42vw);
        max-height: 5.5rem;
    }

    .footer small {
        font-size: 0.9rem;
    }
}

.footer-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    border-radius: 0;
    font-family: "Orbitron", "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    padding: 0.45rem 0.35rem;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--hub-ink);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-instagram-icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
    border: none;
    color: var(--hub-gold);
    background: transparent;
}

.footer-instagram-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.footer-instagram-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    text-align: left;
}

.footer-instagram-label {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--hub-gold);
    line-height: 1;
}

.footer-instagram-text {
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    font-weight: 400;
    color: var(--hub-muted);
    line-height: 1.3;
}

.footer-instagram:hover {
    background: transparent;
    border: none;
    transform: translateY(-1px);
    box-shadow: none;
    color: var(--hub-ink);
}

.footer-instagram:hover .footer-instagram-icon {
    border: none;
    color: #e6cf8a;
    background: transparent;
}

.footer-instagram:hover .footer-instagram-text {
    color: var(--hub-ink);
}

.place-filter{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:35px 0 60px;

}

.place-btn{

    padding:10px 24px;

    border:none;
    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:white;

    cursor:pointer;

    transition:.3s;

}

.place-btn:hover{

    background:#d8b45a;
    color:#111;

}

.place-btn.active{

    background:#d8b45a;
    color:#111;

}

.project-title br{
    display:none;
}
/* ==========================================
   Part 6 — sunbelx風 デザインテクニック追加
   （見出しの割り方 / 写真CTA / 余白 / 縁取り）
========================================== */

/* ---------- セクション間の余白を広めに ---------- */

@media screen and (min-width:769px){

    section{
        margin-bottom:150px;
    }

}

/* ---------- 見出し：大きい漢字＋細い接続字＋大きい漢字 ---------- */

.kv-heading{

    display:flex;
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;

    text-align:center;

}

.kv-heading .kv-big{

    font-size:clamp(38px,6vw,60px);
    font-weight:800;
    color:#fff;
    letter-spacing:2px;
    line-height:1.2;

}

.kv-heading .kv-thin{

    font-size:clamp(18px,2.6vw,24px);
    font-weight:300;
    color:#D6B56D;

}

/* ---------- 見どころセクション ---------- */

.explore{

    text-align:center;

}

.explore-eyebrow{

    color:#D6B56D;
    letter-spacing:6px;
    font-size:14px;
    margin-bottom:18px;

}

.explore .kv-heading{

    margin-bottom:55px;

}

/* ---------- 写真つきCTAカード（2分割） ---------- */

.split-cta{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;

}

.split-cta-card{

    position:relative;

    display:block;

    height:420px;

    border-radius:26px;

    overflow:hidden;

    isolation:isolate;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    transition:transform .4s ease;

}

.split-cta-card:hover{

    transform:translateY(-8px);

}

.split-cta-card img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .6s ease, filter .6s ease;

    filter:brightness(.68) saturate(1.05);

}

.split-cta-card:hover img{

    transform:scale(1.08);

    filter:brightness(.5) saturate(1.15);

}

.split-cta-card::after{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        rgba(15,23,42,0) 35%,
        rgba(15,23,42,.92) 100%
    );

    z-index:1;

}

.split-cta-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:2;

    padding:34px 30px;

    text-align:left;

}

.split-cta-label{

    color:#D6B56D;
    letter-spacing:5px;
    font-size:13px;
    margin-bottom:10px;

}

.split-cta-overlay h3{

    color:#fff;
    font-size:26px;
    margin-bottom:10px;

}

.split-cta-overlay p{

    color:#dcdcdc;
    font-size:14px;
    line-height:1.7;

}

.split-cta-arrow{

    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:16px;

    color:#D6B56D;

    font-weight:600;
    font-size:14px;

    transition:gap .3s ease;

}

.split-cta-card:hover .split-cta-arrow{

    gap:14px;

}

@media (max-width:768px){

    .split-cta{

        grid-template-columns:1fr;

    }

    .split-cta-card{

        height:280px;

    }

}

/* ---------- カード四隅のコーナーフレーム（高級感の演出） ---------- */

.corner-frame{

    position:relative;

}

.corner-frame::before,
.corner-frame::after{

    content:"";

    position:absolute;

    width:22px;
    height:22px;

    border:2px solid #D6B56D;

    opacity:0;

    transition:opacity .35s ease, transform .35s ease;

    z-index:6;

    pointer-events:none;

}

.corner-frame::before{

    top:14px;
    left:14px;

    border-right:none;
    border-bottom:none;

    transform:translate(6px,6px);

}

.corner-frame::after{

    bottom:14px;
    right:14px;

    border-left:none;
    border-top:none;

    transform:translate(-6px,-6px);

}

.corner-frame:hover::before,
.corner-frame:hover::after{

    opacity:1;

    transform:translate(0,0);

}

/* ==========================================
   Part 7
   塗り替えトランジション（スクロール発火）
========================================== */

.wipe-panel{

    position:fixed;

    inset:0;

    z-index:900;

    background:#D6B56D;

    transform:scaleY(0);

    transform-origin:bottom;

    transition:transform 1s cubic-bezier(.77,0,.18,1);

    pointer-events:none;

}

.wipe-panel.cover{

    transform:scaleY(1);

    transform-origin:bottom;

}

.wipe-panel.reveal{

    transform:scaleY(0);

    transform-origin:top;

}

/* ==========================================
   Part 8
   固定ビューポート演出（見どころ）
========================================== */

.pin-wrapper{

    position:relative;

    height:500vh;

}

.pin-viewport{

    position:sticky;

    top:0;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}

.pin-frame{

    position:relative;

    width:min(88vw,900px);

    height:min(60vw,420px);

    border:1px solid rgba(214,181,109,.35);

    border-radius:24px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(10px);

    box-shadow:0 20px 50px rgba(0,0,0,.3);

    overflow:hidden;

}

.pin-slide{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:0 50px;

    opacity:0;

    transform:translateY(30px);

    transition:opacity .15s linear, transform .15s linear;

    pointer-events:none;

}

.pin-slide.is-active{

    pointer-events:auto;

}

.pin-slide-left{

    flex:1;

    text-align:left;

}

.pin-slide-left .pin-num{

    font-size:56px;

    font-weight:800;

    color:rgba(255,255,255,.14);

    line-height:1;

    margin-bottom:12px;

}

.pin-slide-left .pin-eyebrow{

    color:#D6B56D;

    letter-spacing:5px;

    font-size:13px;

    margin-bottom:10px;

}

.pin-slide-left h3{

    color:#fff;

    font-size:clamp(20px,2.6vw,30px);

    line-height:1.4;

}

.pin-slide-right{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    text-align:left;

    border-left:1px solid rgba(255,255,255,.15);

    padding-left:30px;

}

.pin-slide-right p{

    color:#cfd6e2;

    font-size:14px;

    line-height:1.9;

}

.pin-slide-right .pin-more{

    margin-top:20px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D6B56D;

    font-weight:600;

    font-size:14px;

    text-decoration:none;

    transition:gap .3s ease;

}

.pin-slide-right .pin-more:hover{

    gap:14px;

}

.pin-progress-track{

    position:absolute;

    bottom:26px;

    left:50%;

    transform:translateX(-50%);

    width:min(70%,300px);

    height:2px;

    background:rgba(255,255,255,.15);

    border-radius:2px;

}

.pin-progress-fill{

    height:100%;

    width:0%;

    background:#D6B56D;

    border-radius:2px;

}

@media screen and (max-width:768px){

    .pin-wrapper{

        height:400vh;

    }

    .pin-frame{

        width:92vw;

        height:70vh;

    }

    .pin-slide{

        flex-direction:column;

        justify-content:center;

        align-items:flex-start;

        padding:24px;

        gap:16px;

    }

    .pin-slide-right{

        border-left:none;

        padding-left:0;

        border-top:1px solid rgba(255,255,255,.15);

        padding-top:16px;

    }

}

/* ==========================================
   EXPLORE: 画面端まで完全突破＆超巨大数字レイアウト
========================================== */
.explore-fixed-section {
    position: relative;
    height: 350vh; 
    background: transparent; 
    
    /* ⚠️【超重要】親要素の横幅制限を無視して、画面の左端から右端まで100%広げる魔法の記述 */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.explore-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 画面外にはみ出た超巨大数字の左右はここで綺麗にカットします */
}

.explore-dark-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 10, 18, 0.75); /* 宇宙背景に馴染むように、少し青みのある暗さに調整 */
    z-index: 1;
}

/* --- フレーム（画角）--- */
.explore-frame {
    position: relative;
    z-index: 2;
    width: 100%; /* 左右の隙間を完全にゼロに */
    height: 55vh; /* 画角の高さ（ここを狭くするほど数字がはみ出します） */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

/* --- 各スライド共通 --- */
.explore-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; 
    height: 100%;
    opacity: 0; 
    pointer-events: none;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 超巨大数字エリア（絶対配置で完全に自由化） --- */
.slide-num-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -4vw; /* ★画面の左端ギリギリ（少しはみ出るくらい）に配置 */
    z-index: 10; /* テキストや線より前面に出す */
    pointer-events: none;
}

/* 偶数番目（reverseクラス）は右端に配置 */
.explore-slide.reverse .slide-num-wrap {
    left: auto;
    right: -4vw; /* ★画面の右端ギリギリに配置 */
}

/* ★画角の白い線を完全にぶち破るサイズと配置 */
.slide-num {
    font-size: clamp(350px, 50vw, 900px); /* ★さらに巨大化（最大900pxまで引き上げ） */
    font-weight: 100;
    color: rgba(255, 255, 255, 0.95); /* 線と被っても目立つように白を強調 */
    
    /* 高さを半分にして上下の線を大胆に跨がせる */
    line-height: 0.5; 
    display: block;
    
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-style: italic; 
    transform: skewX(-12deg); /* 傾きを強めにしてより躍動感を */
    letter-spacing: -0.05em;
    
    /* 白い線と重なった時に数字が浮き出て見えるように立体的なシャドウを付与 */
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.8));
}

/* --- テキストエリア（絶対配置で逆側に浮かせる） --- */
.slide-text-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10vw; /* 右端からの余白 */
    width: 40%;
    max-width: 500px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 5;
}

/* 偶数番目（reverseクラス）は左側にテキストを配置 */
.explore-slide.reverse .slide-text-wrap {
    right: auto;
    left: 10vw;
}

.slide-title {
    font-size: clamp(36px, 4.5vw, 72px);
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.08em;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.slide-line {
    width: 100%;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    margin: 20px 0;
}

.slide-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #dddddd;
    margin-bottom: 35px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.slide-more {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    align-self: flex-start;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.slide-more:hover {
    border-color: #ffffff;
}

#intro{

    position:fixed;
    inset:0;

    background:#000;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:99999;

    transition:opacity .8s ease;
    overflow:hidden;

}

#intro.hide{

    opacity:0;
    pointer-events:none;

}

#intro video{

    width:100%;
    height:100%;

    /* PC：全体を見せる */
    object-fit:contain;
    object-position:center center;
    background:#000;

}

/* スマホ：横は見切れず、縦の余白は動画と同じ真っ黒で埋める */
@media screen and (max-width: 900px){
    html:has(#intro),
    html:has(body.video-phase),
    body.video-phase{
        background:#000 !important;
        overflow:hidden;
    }

    #intro{
        width:100vw;
        height:100vh;
        height:100dvh;
        min-height:100dvh;
        background:#000;
    }

    #intro video{
        width:100%;
        height:auto;
        max-height:100dvh;
        min-width:0;
        min-height:0;
        object-fit:contain;
        object-position:center center;
        transform:none;
        background:#000;
    }
}

/* ==========================================
   ページ全体：ロケット付きスクロールレール
========================================== */

html.page-rail-ready,
html.page-rail-ready body {
    scrollbar-width: none;
}

html.page-rail-ready::-webkit-scrollbar,
html.page-rail-ready body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.page-scroll-rail {
    position: fixed;
    top: 5.5rem; /* JSでヘッダー下に上書き */
    right: 0.35rem;
    bottom: 1.25rem; /* JSでフッター上に上書き */
    width: 1.6rem;
    z-index: 1500; /* ヘッダー(2000)より背面 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.page-scroll-rail.is-active {
    opacity: 1;
}

.page-scroll-rail-track {
    position: absolute;
    left: 50%;
    top: 0.85rem;
    bottom: 0.85rem;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(180, 205, 255, 0.1),
        rgba(212, 181, 106, 0.4) 48%,
        rgba(180, 205, 255, 0.1)
    );
    overflow: hidden;
}

.page-scroll-rail-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(126, 182, 255, 0.2),
        rgba(212, 181, 106, 0.9)
    );
    box-shadow: 0 0 12px rgba(212, 181, 106, 0.4);
}

.page-scroll-rail-rocket {
    position: absolute;
    left: 50%;
    top: 1.1rem;
    width: 2rem;
    height: auto;
    /* 元画像が右下向きなので、鼻先が上になるよう回転 */
    transform: translate(-50%, -50%) rotate(-135deg);
    transform-origin: center center;
    filter: drop-shadow(0 0 8px rgba(212, 181, 106, 0.55));
    pointer-events: none;
    user-select: none;
    will-change: top;
    z-index: 2;
}

@media (max-width: 640px) {
    .page-scroll-rail {
        right: 0.15rem;
        width: 1.35rem;
    }

    .page-scroll-rail-rocket {
        width: 1.65rem;
    }
}

body.video-phase .page-scroll-rail,
body.journey-immersive .page-scroll-rail,
body.opening-active .page-scroll-rail {
    opacity: 0 !important;
    pointer-events: none !important;
}