@charset "UTF-8";


/* ==========================================================================
   GLOBAL VARIABLES
   ========================================================================== */
:root {
    --color-bg: #0b0b0b;
    --color-text: #ffffff;
    --color-text-muted: #888888;
    --color-primary: #bc0000;
    --color-accent: #e50012;
    --color-yellow: #fffc00;

    /* レイアウト定義 */
    --max-width: 1000px;
    --space-pc: 120px;
    --space-sp: 60px;

    /* レイヤー定義 */

    --layer-top: 100;
    --layer-middle: 10;
    --layer-bottom: 1;
    --layer-header: 1000;
    --layer-header-inner: 1200;
    --layer-opening: 9999;
}

/* ==========================================================================
   MODERN RESET
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    letter-spacing: 0.06em;
}

body {
    font-size: 1.6rem;
    margin: 0;
    line-height: 2;
}

p {
    font-size: 1.6rem;
}

.for_sp {
    display: none;
}

.sub-text {
    font-size: 1.2rem;
}

section {
    scroll-margin-top: 6rem;
}

.section__inner {
    max-width: 960px;
    padding: 0 15px;
    margin: 0 auto;
}

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

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================================
   HEADER
   ========================================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000000;
    z-index: var(--layer-header);
    margin: 0;
    padding: 0 2.0rem;
    border-bottom: 1px solid #fff;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    height: 6.0rem;
}

.header__logo {
    display: flex;
    align-items: center;
    align-self: flex-start;
}

.header__logo img {
    display: block;
    width: 113px;
    height: auto;
}

.header__right {
    display: flex;
    align-items: center;
}

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

.header__mail a img {
    width: 140px;
    height: auto;
    display: block;
}

.header__nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__nav a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1.6rem;
    display: block;
    padding: 0.2rem 0;
    transition: opacity 0.3s;
}

.header__nav a:hover {
    opacity: 0.7;
    color: var(--color-accent);
}

/* 4. メールボタンの簡単な装飾例 */
.heaer__mail a {
    display: flex;
    align-items: center;
}

.heaer__mail a img {
    display: block;
}

.heaer__mail a:hover {
    opacity: 0.8;
    transition: 0.3s;
}

.header__nav li {
    display: flex;
    align-items: center;
}

.header__nav li:not(:last-child)::after {
    content: "/";
    font-size: 1.2rem;
    color: #ccc;
    margin: 0 1rem;
}



/* ==========================================================================
   MV
   ========================================================================== */
#hero {
    margin-top: 6.0rem;
    background-image: url(../img/hero_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    animation: roomFlicker 1.5s ease-out 3s forwards;
}

.hero__noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--layer-bottom);
    pointer-events: none;

    background-image: url("../img/bg_noiz.png");
    background-repeat: repeat;
    background-size: auto;
    animation:
        noisePlay 0.05s steps(4) infinite,
        flicker 1.5s ease-out 3s forwards;
}

/* 部屋の電気が完全に消えかけたり点いたりする設定 */
@keyframes roomFlicker {

    0%,
    100% {
        filter: brightness(100%);
    }

    /* 通常の明るさ */
    8% {
        filter: brightness(30%);
    }

    /* 一瞬真っ暗に近く */
    10% {
        filter: brightness(120%);
    }

    /* 電球が過電圧で一瞬ギラッと光る */
    12% {
        filter: brightness(40%);
    }

    50% {
        filter: brightness(100%);
    }

    55% {
        filter: brightness(20%);
    }

    /* ガツンと暗くなる */
    58% {
        filter: brightness(90%);
    }
}


@keyframes flicker {

    /* 0秒〜0.8秒の間で、激しくついたり消えたり（ガガガッ！） */
    0% {
        opacity: 0.9;
    }

    5% {
        opacity: 0.1;
    }

    10% {
        opacity: 0.8;
    }

    15% {
        opacity: 0.2;
    }

    20% {
        opacity: 0.9;
    }

    30% {
        opacity: 0.3;
    }

    40% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.1;
    }

    60% {
        opacity: 0.9;
    }

    /* 0.8秒〜1.5秒にかけて、徐々にチカチカが収まっていく */
    75% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.5;
    }

    /* 1.5秒以降（最終状態）：ノイズがうっすら乗った見やすい状態（35%の濃さ）で固定 */
    100% {
        opacity: 0.6;
    }
}

@keyframes noisePlay {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(7px);
    }

    100% {
        transform: translateX(0);
    }
}

.hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.hero__content {
    text-align: center;
    position: relative;
    z-index: var(--layer-top);
}

.hero__content .hero__title img {
    margin: 100px 0 60px;
}

.hero__content .cta {
    margin: 0 0 75px;
}

.hero__splatters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--layer-middle);
}

.splatter {
    position: absolute;
    pointer-events: none;
}

.splatter.mod-1 {
    bottom: 0;
    left: 0;
    width: 440px;
}

.splatter.mod-2 {
    top: 0;
    right: 0;
    width: 298px;
}

.splatter.mod-3 {
    bottom: 0;
    right: 30px;
    width: 314px;
}

/* ==========================================================================
   MV ANIMATION (演出アニメーション)
   ========================================================================== */

/* --- 1. 血しぶきのアニメーション設定 --- */
.splatter {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: var(--layer-middle);
}

.splatter.mod-1 {
    bottom: 0;
    left: 0;
    width: 440px;
    animation: bloodDrop 0.2s cubic-bezier(0.11, 0, 0.5, 0) forwards;
    animation-delay: 3.2s;
}

.splatter.mod-2 {
    top: 0;
    right: 0;
    width: 298px;
    animation: bloodDrop 0.2s cubic-bezier(0.11, 0, 0.5, 0) forwards;
    animation-delay: 3.5s;
}

.splatter.mod-3 {
    bottom: 5%;
    right: 0;
    width: 314px;
    animation: bloodDrop 0.2s cubic-bezier(0.11, 0, 0.5, 0) forwards;
    animation-delay: 3.7s;
}

@keyframes bloodDrop {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* --- 2. タイトルコンテンツのアニメーション設定 --- */
.hero__content {
    text-align: center;
    position: relative;
    z-index: var(--layer-top);

    opacity: 0;
    animation: contentFadeUp 3s ease-out forwards;
    animation-delay: 4s;
}

/* コンテンツが下からフワッと浮き上がる動きの定義 */
@keyframes contentFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   story
   ========================================================================== */

#story {
    background-image: url(../img/story_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

/* 全モヤ共通の基本設定 */
.story__steam {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-repeat: repeat;
    background-size: 1500px auto;
    pointer-events: none;
    z-index: 5;
    filter: url(#gunya-gunya);
}

/* 1️⃣ 黒っぽいモヤ A（💡移動も歪みも、両方とも無限に往復「alternate」させます） */
.story__steam--black1 {
    background-image: url("../img/steam_002.svg");
    filter: url(#gunya-gunya) brightness(0) blur(30px) opacity(0.3);
    animation: pcStoryScrollUpRight 25s ease-in-out infinite alternate, steamDistortA 16s ease-in-out infinite alternate;
}

/* 2️⃣ 黒っぽいモヤ B */
.story__steam--black2 {
    background-image: url("../img/steam_002.svg");
    filter: url(#gunya-gunya) brightness(0.05) blur(22px) opacity(0.25);
    transform: scaleY(-1);
    background-size: 420px auto;
    animation: pcStoryScrollDownLeft 32s ease-in-out infinite alternate, steamDistortB 22s ease-in-out infinite alternate;
}

/* 3️⃣ 白いモヤ 濃いめ */
.story__steam--white1 {
    background-image: url("../img/steam_001.svg");
    filter: url(#gunya-gunya) blur(30px) opacity(0.3);
    animation: pcStoryScrollDownRight 22s ease-in-out infinite alternate, steamDistortC 14s ease-in-out infinite alternate;
}

/* 4️⃣ 白いモヤ 薄いめ */
.story__steam--white2 {
    background-image: url("../img/steam_003.svg");
    filter: url(#gunya-gunya) blur(30px) opacity(0.18);
    background-size: 600px auto;
    animation: pcStoryScrollVertical 28s ease-in-out infinite alternate, steamDistortD 26s ease-in-out infinite alternate;
}

#story .section__inner {
    padding: 130px 0;
    text-align: center;
    position: relative;
    z-index: var(--layer-middle);
    opacity: 0;
}

#story .section__inner.is-animated {
    animation: textFadeIn 2s ease-out forwards;
}


/* ――― 2. 文字の浮き上がり設定（フワッ＋ボヤッと登場） ――― */
#story .section__inner {
    padding: 130px 0;
    text-align: center;
    position: relative;
    z-index: var(--layer-middle);
    opacity: 0;
    /* 最初は非表示にしておく */
}

/* スクロールしてクラスがついたら動くように設定 */
#story .section__inner.is-animated {
    animation: textFadeIn 2s ease-out forwards;
}

#story .section__inner .story__title {
    padding: 5px 0 30px;
}

#story .story__body p {
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    line-height: 2.2;
    margin-bottom: 50px;
    text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
}

#story .story__body p:last-of-type {
    margin-bottom: 0;
}


/* ==========================================================================
   アニメーション定義（Keyframes）
   ========================================================================== */


/* 【文字のじわっと浮き上がり（ボカシ結合）】 */
@keyframes textFadeIn {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: scale(0.97);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}


/* ==========================================================================
   concept
   ========================================================================== */

#concept {
    background-image: url(../img/concept_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#concept::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    bottom: -60px;
    left: -60px;

    background: inherit;
    z-index: -1;
    pointer-events: none;

    filter: url(#gunya-gunya);

    animation: horror-distort-xyz 50s infinite cubic-bezier(0.42, 0, 0.58, 1);
}

/* 縦（scaleY）と横（scaleX）をバラバラのタイミングでランダムっぽく伸縮させる */
@keyframes horror-distort-xyz {
    0% {
        transform: scaleX(1) scaleY(1) translateY(0);
    }

    20% {
        transform: scaleX(1.08) scaleY(0.92) translateY(5px);
        /* 横に伸びて縦に縮む ＋ 位置を少し下に */
    }

    40% {
        transform: scaleX(0.95) scaleY(1.1) translateY(-3px);
        /* 横に縮んで縦に伸びる ＋ 位置を少し上に */
    }

    60% {
        transform: scaleX(1.12) scaleY(0.95) translateY(2px);
        /* 強めに横伸び */
    }

    80% {
        transform: scaleX(0.92) scaleY(1.08) translateY(-4px);
        /* 強めに縦伸び */
    }

    100% {
        transform: scaleX(1) scaleY(1) translateY(0);
    }
}

#concept .section__inner {
    padding: 100px 0;
    text-align: center;
    position: relative;
    opacity: 0;
}

#concept .section__inner.is-animated {
    animation: textFadeIn 2s ease-out forwards;
}

/* タイトル部分 */
.concept__heading {
    text-align: center;
    position: relative;
    z-index: var(--layer-bottom);
}

.concept__heading img {
    max-width: 100%;
    height: auto;
}

.concept__content {
    position: relative;
    margin-top: 50px;
}

.concept__text {
    width: 100%;
    text-align: center;
}

.concept__text p {
    margin-bottom: 1.5em;
    line-height: 1.8;
    text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
}

.concept__chara {
    position: absolute;
    right: -90px;
    top: -95px;
    width: 280px;
    z-index: var(--layer-top);
}

.concept__chara img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   movie
   ========================================================================== */

#movie {
    background-image: url(../img/movie_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

#movie .section__inner {
    padding: 100px 0;
    text-align: center;
    position: relative;
    z-index: var(--layer-bottom);
}

/* 📺 動画の外枠*/
.movie__frame {
    /* background-image: url(../img/movie_img02.png); */
    background-color: #333;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    width: 74%;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 710 / 340;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.movie__frame::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    z-index: 3;
    opacity: 0.16;
    background-image:
        repeating-linear-gradient(45deg, #fff 0px, #fff 1px, transparent 0px, transparent 5px),
        repeating-linear-gradient(-45deg, #000 0px, #000 2px, transparent 0px, transparent 6px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    background-size: 13px 13px, 11px 11px, 100% 100%;

    animation: tvNoiseLoop 0.2s steps(4) infinite;
    pointer-events: none;
}

/* 📝 「後日公開」のテキスト画像 */
.movie__placeholder img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
    z-index: var(--layer-top);
}

/* ――― 【エンドレス砂嵐】高速ノイズアニメーション ――― */
@keyframes tvNoiseLoop {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-5px, 10px);
    }

    50% {
        transform: translate(8px, -5px);
    }

    75% {
        transform: translate(-10px, -8px);
    }

    100% {
        transform: translate(4px, 5px);
    }
}

/* ==========================================================================
   detail
   ========================================================================== */

#detail {
    background-image: url(../img/detail_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

/* 全DETAILモヤ共通の基本設定 */
.detail__steam {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-repeat: repeat;
    background-size: 2050px auto;
    pointer-events: none;
    filter: url(#gunya-gunya);
}

/* 🟢 1️⃣ エメラルドグリーンのモヤ A */
.detail__steam--green1 {
    background-image: url("../img/steam_001.svg");
    filter: url(#gunya-gunya) sepia(1) hue-rotate(110deg) saturate(20) brightness(1.3) blur(30px) opacity(0.5);
    z-index: 8;
    animation: pcDetailScrollUpRight 26s ease-in-out infinite alternate, steamDistortA 18s ease-in-out infinite alternate;
}

/* 🟢 2️⃣ エメラルドグリーンのモヤ B */
.detail__steam--green2 {
    background-image: url("../img/steam_001.svg");
    filter: url(#gunya-gunya) sepia(1) hue-rotate(120deg) saturate(15) brightness(0.8) blur(24px) opacity(0.4);
    transform: scaleY(-1);
    background-size: 450px auto;
    z-index: 7;
    animation: pcDetailScrollDownLeft 35s ease-in-out infinite alternate, steamDistortB 24s ease-in-out infinite alternate;
}

/* ⬛ 3️⃣ 黒っぽいモヤ */
.detail__steam--black {
    background-image: url("../img/steam_002.svg");
    filter: url(#gunya-gunya) brightness(0) blur(18px) opacity(0.55);
    z-index: 6;
    animation: pcDetailScrollDownRight 21s ease-in-out infinite alternate, steamDistortC 15s ease-in-out infinite alternate;
}

/* ⬜ 4️⃣ 白いモヤ */
.detail__steam--white {
    background-image: url("../img/steam_003.svg");
    filter: url(#gunya-gunya) brightness(2) blur(30px) opacity(0.05);
    background-size: 650px auto;
    z-index: 5;
    animation: pcDetailScrollVertical 30s ease-in-out infinite alternate, steamDistortD 28s ease-in-out infinite alternate;
}

#detail .section__inner {
    padding: 100px 0;
    text-align: center;
    position: relative;
    z-index: var(--layer-top);
    opacity: 0;
}

#detail .section__inner.is-animated {
    animation: textFadeIn 2s ease-out forwards;
}

#detail .detail__grid {
    display: flex;
    margin-bottom: 40px;
}

/* ==========================================================================
   アニメーション定義（Keyframes）
   ========================================================================== */

/* ――― 💡【PC版】往復移動（alternate）用アニメーション軌道定義 ――― */
/* 開始位置(0%)から目的地(100%)へ進み、そこからパッと戻らずに同じ道をスムーズに引き返します */
@keyframes pcStoryScrollUpRight {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 180px -180px;
    }
}

@keyframes pcStoryScrollDownLeft {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -150px 150px;
    }
}

@keyframes pcStoryScrollDownRight {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 160px 160px;
    }
}

@keyframes pcStoryScrollVertical {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -200px;
    }
}

@keyframes pcDetailScrollUpRight {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 190px -190px;
    }
}

@keyframes pcDetailScrollDownLeft {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -160px 160px;
    }
}

@keyframes pcDetailScrollDownRight {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 170px 170px;
    }
}

@keyframes pcDetailScrollVertical {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -220px;
    }
}


/* ――― モヤの形を個別・不規則に歪ませるランダム化アニメーション ――― */
@keyframes steamDistortA {
    0% {
        transform: scale(1) rotate(0deg) skewX(0deg);
    }

    100% {
        transform: scale(1.12, 0.92) rotate(3deg) skewX(4deg);
    }
}

@keyframes steamDistortB {
    0% {
        transform: scaleY(-1) scale(1) rotate(0deg);
    }

    100% {
        transform: scaleY(-1) scale(0.92, 1.08) rotate(-3deg) skewY(2deg);
    }
}

@keyframes steamDistortC {
    0% {
        transform: scale(1) skewX(0deg);
    }

    100% {
        transform: scale(1.04, 1.1) skewX(-5deg) rotate(2deg);
    }
}

@keyframes steamDistortD {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1.08, 0.94) rotate(-2deg) skewX(3deg);
    }
}

/* ==========================================================================
   attention
   ========================================================================== */

#attention {
    background-image: url(../img/attention_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.attention__heading {
    text-align: center;
}

.concept__heading img {
    max-width: 100%;
    height: auto;
}


#attention .section__inner {
    padding: 100px 0;
    opacity: 0;
}

#attention .section__inner.is-animated {
    animation: textFadeIn 2s ease-out forwards;
}

#attention .section__inner .section__heading {
    text-align: center;
}

/* 注意事項のブロック*/
.attention__block {
    margin: 0 auto 50px;
    text-align: left;
}

.attention__block:last-child {
    margin-bottom: 0;
}

.attention__block-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
    font-weight: normal;
    text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
}

.attention__body {
    margin: 0;
    padding: 0;
}

/* 親の <li> に対する共通設定 */
.attention__body>li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 1.4rem;
    line-height: 1.6;
    text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
}

.attention__body>li:last-child {
    margin-bottom: 0;
}

/* ★ 親 <li> の先頭にだけ自動で「・」を付与 */
.attention__body>li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffffff;
}

/* ――― 子リスト（ネストされた ul li）の専用調整 ――― */
.attention__body ul {
    margin-top: 1.0rem;
    padding-left: 0;
}

/* 中に入っている子箇条書き */
.attention__body ul li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.4rem;
    color: #cccccc;
}

.attention__body ul li:last-child {
    margin-bottom: 0;
}

/* ★ 子リストの先頭には「・」ではなく、少し下がった位置に「-」などの別の記号を自動付与 */
.attention__body ul li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
    color: #aaaaaa;
}

/* 強調テキスト（span）のカラー設定（既存の設定があればそちらが優先されます） */
#attention span {
    color: var(--color-yellow);
}

/* ==========================================================================
   access
   ========================================================================== */
#access {
    background-image: url(../img/access_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

#access .section__inner {
    padding: 80px 0;
    opacity: 0;
}

#access .section__inner.is-animated {
    animation: textFadeIn 2s ease-out forwards;
}


/* タイトル部分 */
.access__heading {
    text-align: center;
    position: relative;
    z-index: var(--layer-bottom);
}

.access__heading img {
    max-width: 100%;
    height: auto;
}

.access__content {
    position: relative;
    margin-top: 0;
}

.access__info {
    width: 100%;
    text-align: center;
}

.access__info p {
    margin-bottom: 1.5em;
    line-height: 1.8;
    text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
}

.access__map {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    z-index: var(--layer-top);
}

.access__map img {
    width: 100%;
    height: auto;
    display: block;
}

.access__map-link p {
    color: var(--color-yellow);
    text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
}

/* ==========================================================================
   staff
   ========================================================================== */

#staff {
    background-color: #000;
    position: relative;
}

#staff .section__inner {
    width: 550px;
    padding: 100px 0;
    margin: 0 auto;
    opacity: 0;
    text-align: center;
}

#staff .section__inner.is-animated {
    animation: textFadeIn 2s ease-out forwards;
}

.staff__heading {
    margin-bottom: 50px;
}

.staff__item {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.staff__list {
    display: grid;
    grid-template-columns: 220px 1fr;
    text-align: left;
    row-gap: 30px;
}


/* ==========================================================================
   footer
   ========================================================================== */

footer {
    background-color: #ffffff;
    margin: 0;
    padding: 20px 0;
    width: 100%;
}

footer p {
    color: #000000;
    text-align: center;
    margin: 0;
    font-size: 1.6rem;
}


/* ==========================================================================
   CTAボタン
   ========================================================================== */

.cta a {
    display: inline-block;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.cta a:hover {
    filter: drop-shadow(0 0 8px #B8007F) drop-shadow(0 0 20px #B8007F) brightness(1.2);
    transform: scale(1.01);
}

/* ==========================================================================
   opening (オープニング演出)
   ========================================================================== */

/* 画面全体を覆う真っ黒なベース */
#opening {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    /* 完全な黒 */
    z-index: var(--layer-opening);
    /* ヘッダーや他のコンテンツより必ず一番上にする */
    display: flex;
    justify-content: center;
    /* 左右中央揃え */
    align-items: center;
    /* 上下中央揃え */
    pointer-events: none;
    /* 演出中も裏のスクロールを邪魔しない対策 */

    /* 🌟3.5秒かけてじわっと消えるアニメーションを設定（2.5秒表示をキープして、1秒かけて消える） */
    animation: openingFadeOut 3.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 真ん中に配置するロゴ画像の設定 */
.opening__logo {
    width: 90%;
    /* スマホ画面でもはみ出さないように */
    max-width: 500px;
    /* パソコン画面での最大サイズ */
    text-align: center;
    opacity: 0;

    /* 🌟ロゴ自体も、最初の0.5秒でじわっと出てきて、最後は背景と一緒に消える */
    animation: logoFadeInOut 3.5s ease-in-out forwards;
}

.opening__logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* ――― アニメーションの動きの定義 ――― */

/* 1. 黒い背景が消える動き */
@keyframes openingFadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }

    75% {
        opacity: 1;
        /* 2.6秒付近（全体の75%）までは真っ黒のままキープ */
        visibility: visible;
    }

    100% {
        opacity: 0;
        /* 最後に向かってじわっと透明になる */
        visibility: hidden;
        /* 完全に消えたらクリックをすり抜けるようにする */
    }
}

/* 2. 中央の画像が浮き出て消える動き */
@keyframes logoFadeInOut {
    0% {
        opacity: 0;
        transform: scale(0.96);
        /* 最初は少し小さく */
    }

    15% {
        opacity: 1;
        /* 0.5秒後（全体の15%）にクッキリ表示 */
        transform: scale(1);
        /* 通常サイズに */
    }

    70% {
        opacity: 1;
        /* そのまましばらく表示をキープ */
        transform: scale(1.02);
        /* ほんの少しだけじわじわ拡大させるホラー演出 */
    }

    100% {
        opacity: 0;
        /* 最後は完全に消える */
        transform: scale(1.05);
    }
}