body {
    margin: 0;
}

body {
    background-color: #292725;
}

.okunoheya {
    margin-top: -30vw;
    margin-left: 10vw;
    width: 40vw;
}



/* style2.css の修正 */

.neko {
    /* 既存のスタイル */
    margin-top: -50vw;
    margin-left: 8vw;
    width: 80vw;
    
    /* ▼ ここを修正: 基本のトランジションを削除（個別クラスで設定するため） ▼ */
    transform: translateY(-100%); 
    opacity: 0; 
    
    /* transition: opacity 0.1s ease-in-out 0.1s; <--- これは削除（またはコメントアウト） */
}

/* アニメーション開始用のクラス（飛び出し） */
.neko.animate-in {
    transform: translateY(0); 
    opacity: 1; 
    
    /* 飛び出しの速さ (例: 0.2秒) */
    transition: transform 0.2s ease-out, opacity 0.1s ease-in; 
}

/* ▼ 戻る動きをなめらかにするため、transitionを追加・修正 ▼ */
.neko.animate-out {
    /* 初期位置（画面外）に戻す */
    transform: translateY(-100%);
    /* すぐに消す */
    opacity: 0;
    
    /* 戻る動きの速さを設定（例: 0.5秒でゆっくり戻す） */
    transition: transform 0.5s ease-in, opacity 0.5s ease-out 0.1s; 
}

.ana1 {
    margin-top: -20vw;
    width: 50vw;
    margin-left: -5vw;
}

.kurohaikei {

    margin-top: 10vw;
    /* ▼ 修正: 画面の横幅全体を埋めるために 100% から 100vw に変更 ▼ */
    width: 100vw;
}


/* style2.css の修正箇所 */

/* ==================================== */
/* アニメーション定義: 扇状の揺れ (kumo-swing に名称変更) */
/* ==================================== */
@keyframes kumo-swing {
    0% { 
        transform-origin: 50% 100%; 
        /* 移動後の位置 (translateX(0)) を含める */
        transform: translateX(0) rotate(-1deg); 
    }
    50% { 
        transform-origin: 50% 100%; 
        /* 移動後の位置 (translateX(0)) を含める */
        transform: translateX(0) rotate(1deg); 
    }
    100% { 
        transform-origin: 50% 100%; 
        /* 移動後の位置 (translateX(0)) を含める */
        transform: translateX(0) rotate(-1deg); 
    }
}


/* ==================================== */
/* .kumo のスタイル修正 */
/* ==================================== */
.kumo {
    margin-top: -140vw;
    margin-bottom: 150vw;
    margin-left: 35vw;
    width: 70vw;
    
    /* 初期位置を画面外（右）に設定 */
    transform: translateX(100vw);
    opacity: 0;
    
    transition: transform 1.2s ease-out, opacity 0.7s ease-in 0.5s;
}

.kumo.fade-in {
    /* 本来の位置に戻す（右から画面内へ移動） */
    transform: translateX(0);
    opacity: 1;

    /* ▼ 修正: cubic-bezier と速度を調整し、さらに不規則な緩急をつける ▼ */
    /* 速度を 1.5s から 1.8s に調整し、揺れをより長く見せる */
    /* cubic-bezier(0.7, 0, 0.3, 1) は、開始と終了が極端に遅く、中間が速い緩急の激しい動きを生成 */
    animation: kumo-swing 1.8s infinite cubic-bezier(0.7, 0, 0.3, 1) alternate 1.2s; 
}

/* ... (以降の .hebi などの記述は省略) ... */

/* style2.css の修正 */

.hebi {
    margin-left: -30vw;
    margin-top: -30vw;
    width: 120vw;
    
    /* ▼ 左からの飛び出しを追加 ▼ */
    /* 初期位置を画面外（左）に設定 */
    transform: translateX(-100vw); /* 画面幅分左へ移動 */
    opacity: 0;
    
    
    transition: transform 3.0s ease-out, opacity 0.5s ease-in 2.5s;
}

/* ▼ 新規追加: .hebi が画面に入った時のスタイル ▼ */
/* .hebi も .fade-in クラスで動作するように定義 */
.hebi.fade-in {
    /* 本来の位置に戻す（左から画面内へ移動） */
    transform: translateX(0);
    opacity: 1;
}







@keyframes hebi-flicker {
    0% { 
        transform-origin: 3% 50%; 
        transform: translateX(0) scaleX(0); 
        opacity: 0;
    }
    1% {
        opacity: 1; 
    }
    30% { 
        transform-origin: 3% 50%;
        transform: translateX(0) scaleX(1); 
        opacity: 1;
    }
    70% { 
        transform-origin: 3% 50%; 
        transform: translateX(0) scaleX(1); 
        opacity: 1;
    }
    100% { 
        transform-origin: 3% 50%; 
        transform: translateX(0) scaleX(0); 
        opacity: 1;
    }
}

.hebinosita {
    margin-left: -42vw; 
    margin-bottom: 37vw;
    width: 5vw; 
    opacity: 0; 
    transform: translateX(-100vw);
    z-index: 11;
    transition: none;
}

.hebinosita.fade-in {
    
    transform: translateX(0);
    transition: transform 3.0s ease-out; 

    
    animation: hebi-flicker 3.5s infinite 3.0s; 
    
    
    animation-fill-mode: forwards; 
}








.tukue {
    margin-top: 30vw;
    margin-left: 10vw;
    width: 40vw;
}







.rousoku-link-container {
    /* ▼ 既存の.rousokuの位置を決めていたマージンをここに移動してください ▼ */
    /* (元のスタイルが不明なため、元の .rousoku にあった margin-XXX をここに記述) */
    
    display: block; 

    margin-left: 5vw;
    margin-top: -60vw;
    position: relative; /* 子要素の絶対配置の基準 */
    
    /* クリック範囲の拡大 (元のロウソクのサイズに合わせて調整してください) */
    width: 50vw; /* 55vw から 30vw へ大幅に縮小 */
    height: 50vw;
    
    z-index: 20;
    cursor: pointer;
    
    /* ホバー時の目印 */
    background-color: transparent; 
    transition: background-color 0.3s ease-in;
}

.rousoku {
    /* 既存の margin は削除またはコメントアウトし、絶対配置でコンテナ内に配置します */
    /* margin-left: XXX; <--- 削除 */
    /* margin-bottom: YYY; <--- 削除 */
    
    width: 25vw; /* 元の画像の幅を維持 */
    
    
    /* 親コンテナ (.rousoku-link-container) の中心に配置 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 自身のサイズを考慮して中心へ */
    
    transition: opacity 0.3s ease-in;
}




.rousoku-text {
    opacity: 0;

    /*font-family: "Zen Kurenaido", sans-serif;*/
    
    /* ロウソクの上に出現させる */
    position: absolute;
     /* 位置を微調整してください */
    margin-top: 11vw;
    left: 54%; 
    transform: translateX(-50%);
    
    font-size: 3vw;
    color: #fff;
    white-space: nowrap; 
    pointer-events: none; 
    
    transition: opacity 0.3s ease-in; 

    font-family: "New Tegomin", serif;
    font-weight: 400;
    font-style: normal;
}




.rousoku-link-container:hover .rousoku-text {
    opacity: 1; 
}



.ana2 {
    margin-left: 40vw;
    margin-top: -20vw;
    width: 40vw;
    margin-bottom: 0vw;
}







.hon {
    margin-left: 65vw;
    margin-top: 0vw;
    margin-bottom: 1vw;
    width: 20vw;
    cursor: pointer;
    position: relative; 
    z-index: 30;
}

/* ▼ 修正: モーダルコンテナ (#diaryModal) のスタイル ▼ */
.diary-modal-container {
    /* 初期状態：画面外に隠す */
    position: fixed; /* 画面に対して固定 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* 半透明の黒背景 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000; /* 他の要素より手前に表示 */
    
    display: flex; /* 子要素を中央に配置するために flexbox を使用 */
    justify-content: center;
    align-items: center;
    
    cursor: pointer; /* クリックで閉じられることを示す */

    pointer-events: none;
}

/* 表示状態：.is-visible クラスが付与されたら表示 */
.diary-modal-container.is-visible {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

/* ▼ 新規追加: 日記のページ画像 (.nikki-page) のスタイル ▼ */
.nikki-page {
    /* 画像のアスペクト比を維持し、コンテナに収まるように拡大縮小 */
    max-width: 90%; 
    max-height: 90%;
    
    /* ページが重なるように絶対配置にする（flexboxを無視し、コンテナの中心に配置） */
    position: absolute;
    
    /* 初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

/* ▼ 新規追加: 現在表示されているページ (.active) のスタイル ▼ */
.nikki-page.active {
    opacity: 1;
    visibility: visible;
}