@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: var(--layer-header-inner);
    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.35;
    }
}

@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: 90px 0 50px;
}

.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: 0;
    right: 30px;
    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;
    s 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;
}

#story::before {
    content: "";
    position: absolute;
    width: 240%;
    height: 160%;
    top: -30%;
    left: -70%;
    z-index: var(--layer-bottom);
    pointer-events: none;
    background-image: url("../img/steam_001.svg");
    background-repeat: repeat-x;
    background-position: center center;
    background-size: contain;
    filter: blur(15px);
    opacity: 0.03;
    /* filter: invert(1) hue-rotate(180deg) brightness(0.25) contrast(2) blur(15px); */
    filter: brightness(2) contrast(1.5) blur(15px);
    animation: moyaSlideOne 12s ease-in-out infinite alternate;
}

#story::after {
    content: "";
    position: absolute;
    width: 240%;
    height: 160%;
    top: -30%;
    left: -50%;
    z-index: var(--layer-bottom);
    pointer-events: none;
    background-image: url("../img/steam_003.svg");
    background-repeat: repeat-x;
    background-position: center center;
    background-size: contain;
    filter: blur(15px);
    transform: scaleY(-1);
    filter: brightness(2) contrast(1.5) blur(15px);
    opacity: 0.05;
    animation: moyaSlideTwo 5s ease-in-out infinite alternate;
}

/* ――― 2. 文字の浮き上がり設定（フワッ＋ボヤッと登場） ――― */
#story .section__inner {
    padding: 130px 0;
    text-align: center;
    position: relative;
    z-index: var(--layer-middle);
    animation: textFadeIn 4s ease-out 6.5s forwards;
    opacity: 0;
}

#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）
   ========================================================================== */
/* 【1枚目のもや：左右のうごめき】ゆっくりと右へスライドし、少し上下に揺れる */
@keyframes moyaSlideOne {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.1;
    }

    50% {
        transform: translate(120px, -20px) scale(1.05);
        opacity: 0.05;
    }

    100% {
        transform: translate(240px, 10px) scale(0.95);
        opacity: 0.01;
    }
}

/* 【2枚目のもや：左右のうごめき】1枚目とすれ違うように左へスライド */
@keyframes moyaSlideTwo {
    0% {
        transform: scaleY(-1) translate(0, 0) scale(1);
        opacity: 0.01;
    }

    50% {
        transform: scaleY(-1) translate(-100px, 20px) scale(0.95);
        opacity: 0.05;
    }

    100% {
        transform: scaleY(-1) translate(-200px, -10px) scale(1.05);
        opacity: 0.1;
    }
}

/* 【1枚目のもや：常時うごめき】集結完了後、その場でフワフワと不規則に流れる */
@keyframes moyaWobbleOne {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(40px, -30px) scale(1.08) rotate(5deg);
    }

    100% {
        transform: translate(-20px, 20px) scale(0.95) rotate(-3deg);
    }
}

/* 【2枚目のもや：常時うごめき】1枚目とすれ違うようにウネウネ動かす */
@keyframes moyaWobbleTwo {
    0% {
        transform: scaleY(-1) translate(0, 0) scale(1.1) rotate(10deg);
    }

    50% {
        transform: scaleY(-1) translate(-50px, 40px) scale(0.95) rotate(15deg);
    }

    100% {
        transform: scaleY(-1) translate(30px, -10px) scale(1.05) rotate(5deg);
    }
}

/* 【文字のじわっと浮き上がり（ボカシ結合）】 */
@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);

    /* 動きの緩急（cubic-bezier）を使って、ヌルッと動いたりピクッと動いたりさせます */
    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;
}

#movie .section__inner {
    padding: 100px 0;
    text-align: center;
}

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


/* 3枚目のモヤ*/
#detail::before {
    content: "";
    position: absolute;
    width: 240%;
    height: 160%;
    top: -30%;
    left: -70%;
    z-index: var(--layer-bottom);
    pointer-events: none;
    background-image: url("../img/steam_001.svg");
    background-repeat: repeat-x;
    background-position: center center;
    background-size: contain;
    opacity: 0.5;
    filter: invert(1) hue-rotate(180deg) brightness(0.25) contrast(2) blur(15px);
    animation: moyaSlideThree 12s ease-in-out infinite alternate;
}

/* 4枚目のモヤ */
#detail::after {
    content: "";
    position: absolute;
    width: 240%;
    height: 160%;
    top: -30%;
    left: -50%;
    z-index: var(--layer-bottom);
    pointer-events: none;
    background-image: url("../img/steam_003.svg");
    background-repeat: repeat-x;
    background-position: center center;
    background-size: contain;
    transform: scaleY(-1);
    opacity: 0.6;
    filter: invert(1) sepia(1) hue-rotate(110deg) saturate(8) brightness(0.9) blur(10px);
    animation: moyaSlideFour 9s ease-in-out infinite alternate;
}

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

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

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

/* ==========================================================================
   アニメーション定義（Keyframes）
   ========================================================================== */
/* 【1枚目のもや：左右のうごめき】ゆっくりと右へスライドし、少し上下に揺れる */
@keyframes moyaSlideThree {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(120px, -20px) scale(1.05);
        opacity: 0.5;
    }

    100% {
        transform: translate(240px, 10px) scale(0.95);
        opacity: 0.9;
    }
}

/* 【2枚目のもや：左右のうごめき】1枚目とすれ違うように左へスライド */
@keyframes moyaSlideFour {
    0% {
        transform: scaleY(-1) translate(0, 0) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scaleY(-1) translate(-100px, 20px) scale(0.95);
        opacity: 0.08;
    }

    100% {
        transform: scaleY(-1) translate(-200px, -10px) scale(1.05);
        opacity: 0.3;
    }
}

/* 【1枚目のもや：常時うごめき】集結完了後、その場でフワフワと不規則に流れる */
@keyframes moyaSlideThree {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(40px, -30px) scale(1.08) rotate(5deg);
    }

    100% {
        transform: translate(-20px, 20px) scale(0.95) rotate(-3deg);
    }
}

/* 【2枚目のもや：常時うごめき】1枚目とすれ違うようにウネウネ動かす */
@keyframes moyaSlideFour {
    0% {
        transform: scaleY(-1) translate(0, 0) scale(1.1) rotate(10deg);
    }

    50% {
        transform: scaleY(-1) translate(-50px, 40px) scale(0.95) rotate(15deg);
    }

    100% {
        transform: scaleY(-1) translate(30px, -10px) scale(1.05) rotate(5deg);
    }
}


/* ==========================================================================
   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);
    }
}