:root {
--stage-w: 3;
--stage-h: 4;
--ui-bg: rgba(0, 0, 0, 0.82);
--ui-border: #585858;
--ui-text: #fff;
--ui-text2: #b1b1b1;
}

* { box-sizing: border-box; }

/* --- 1. ブラウザ全体の背景設定 --- */
html, body { 
margin: 0; padding: 0; color: #fff; font-family: sans-serif;
background-color: #000; 
background-image: url('./images/page_background.webp'); 
background-size: cover; background-position: center; 
background-repeat: no-repeat; background-attachment: fixed;
min-height: 100vh;
}
@media (max-width: 767px) {
html, body { background-image:none; }
}

.seo-text,
.site-footer {
display: none;
}

/* --- 2. 各レイヤーの透過設定 --- */
.stage-wrapper { min-height: 100vh; background: transparent; }
.stage { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }

.stage__board {
position: relative;
aspect-ratio: var(--stage-w) / var(--stage-h);
background: transparent; 
overflow: hidden;
}

/* --- 3. Loadingアニメーション --- */
.loading-screen {
position: absolute; inset: 0; z-index: 9999;
background: transparent; display: flex; flex-direction: column;
justify-content: center; align-items: center;
transition: opacity 0.5s ease;
}
.loader-spinner {
width: 40px; height: 40px; border: 3px solid var(--ui-border);
border-top: 3px solid #fff; border-radius: 50%;
animation: spin 1s linear infinite; margin-bottom: 12px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- 4. アニメーションレイヤーの設定 --- */
.stage__layer {
position: absolute; inset: 0; opacity: 0;
transform-origin: left top; pointer-events: none;
}
.stage__layer img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ==========================================
MODAL: CSS - 動画再生モーダルの表現
========================================== */
.stage__video-open {
    position: fixed; top: 12px; right: 12px; z-index: 1000;
    appearance: none; border: 1px solid var(--ui-border);
    background: var(--ui-bg); color: var(--ui-text);
    padding: 8px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
}

dialog.video-modal {
width: min(92vw, 960px); max-width: 960px;
padding: 0; border: none; background: transparent; overflow: hidden;
}
dialog.video-modal::backdrop { background: rgba(0, 0, 0, 0.82); }
.video-modal__inner { position: relative; background: #000; overflow: hidden; }
.video-modal__close {
position: absolute; top: 10px; right: 10px; z-index: 2;
background: rgba(0,0,0,0.82); color: #fff; border: 1px solid rgba(255,255,255,0.3);
width: 40px; height: 40px; font-size: 20px; cursor: pointer;
}
.video-modal__body { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-modal__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


.stage__board {
    height: 100vh;
    width: auto;
}
@media (max-width: 767px) {
  /* 100vh の「縛り」解除 */
  .stage-wrapper,
  .stage { 
    min-height: auto;
    height: auto;
    display: block;
  }
  /* アニメーションエリアの高さはアスペクト比に任せる */
  .stage__board { 
    width: 100%; 
    height: auto; 
  }
}


/* ==========================================
comingsoon
========================================== */

.comingsoon {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 9999;
}
@media (max-width: 767px){
    .comingsoon {
        position: relative;
        left: inherit;
        bottom: inherit;
        padding: 20px 0;
    }
    .comingsoon h2 {
        text-align: center;
    }
    .comingsoon h3 {
        text-align: center;
    }
}
.comingsoon h2 {
    font-size: 20px;
    font-family: "EB Garamond", serif;
    font-weight: 400;
    color: var(--ui-text2);
    line-height: 1;
    margin: 0 0 10px 0;
    padding: 0;
}
.comingsoon h3 {
    font-size: 13px;
    font-style: italic;
    color: var(--ui-text2);
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding: 0;
}