/* CSS Variables for color scheme and z-index layers */
:root {
    /* 色の管理をしやすくするための変数定義 */
    --background-color: #fdfaf3; /* ワイヤーフレームに合わせたクリーム色 */
    --text-color: #c53332; /* ワイヤーフレームに合わせた赤色 */
    --accent-color: #9c2720; /* 深い赤色 */
    --gold-color: #b8860b;
    --light-gold: #d4af37;
    
    /* 要素の重なり順を管理しやすくするための変数定義 */
    --z-background-decorations: 1; /* 背景(0)より手前 */
    --z-floating-elements: 2;
    --z-cloud-layer: 3;
    --z-main-content: 4; /* 装飾(1)より手前 */
    --z-ui-elements: 100;
    --z-interactive-effects: 9999; /* 全ての要素より手前 */
    --z-scroll-indicator: 10000;  /* エフェクトよりもさらに手前 */
}

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

html {
    /* スムーズスクロールを有効に */
    scroll-behavior: smooth;
}

body {
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'YuGothic', 'Yu Gothic', serif;
    background-image: url('assets/back.jpeg');
    background-repeat: repeat; 
    background-size: auto;     
    background-color: var(--background-color);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    color: var(--text-color);
}

.container {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* --- トップページ --- */
.main-logo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 0 25vw;
}

.vertical-text {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 4rem; 
    font-weight: 600;
    color: var(--text-color);
    z-index: var(--z-main-content);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.vertical-text-top-right {
    top: 8vh;
    right: 19vw;
}

.vertical-text-bottom-left {
    bottom: 8vh; /* topからbottomに変更して基準を安定させる */
    left: 19vw;
}

.vertical-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(-5px);
    animation: charFadeIn 0.5s ease-out forwards;
}

.vertical-text-top-right span:nth-child(1) { animation-delay: 0.1s; }
.vertical-text-top-right span:nth-child(2) { animation-delay: 0.3s; }
.vertical-text-top-right span:nth-child(3) { animation-delay: 0.5s; }
.vertical-text-top-right span:nth-child(4) { animation-delay: 0.7s; }
.vertical-text-top-right span:nth-child(5) { animation-delay: 0.9s; }
.vertical-text-top-right span:nth-child(6) { animation-delay: 1.1s; }
.vertical-text-top-right span:nth-child(7) { animation-delay: 1.3s; }

.vertical-text-bottom-left span:nth-child(1) { animation-delay: 1.4s; }
.vertical-text-bottom-left span:nth-child(2) { animation-delay: 1.6s; }
.vertical-text-bottom-left span:nth-child(3) { animation-delay: 1.8s; }
.vertical-text-bottom-left span:nth-child(4) { animation-delay: 2.0s; }

.main-gif {
    max-width: 400px; 
    width: 100%;
    height: auto;
    opacity: 0;
    transform: scale(0.95);
    animation: fadeInScaleUp 2s ease-out 2.8s forwards; 
    will-change: opacity, transform;
}

/* --- オープニングの雲 --- */
.cloud-image {
    position: absolute;
    width: 10000vw; 
    max-width: 10000px; 
    height: auto;
    opacity: 0; 
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
    will-change: transform, opacity;
    z-index: var(--z-cloud-layer);
    animation: none;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.title-opening-cloud { position: absolute; top: 50%; left: 50%; transition: none; }
.cloud-1 { animation: cloud-1-anim 6.0s cubic-bezier(0.6, 0, 0.4, 1) 0.3s forwards; }
.cloud-2 { animation: cloud-2-anim 6.0s cubic-bezier(0.6, 0, 0.4, 1) 0.2s forwards; }
.cloud-3 { animation: cloud-3-anim 6.0s cubic-bezier(0.6, 0, 0.4, 1) 0.1s forwards; }
.cloud-4 { animation: cloud-4-anim 6.0s cubic-bezier(0.6, 0, 0.4, 1) 0.4s forwards; }
.cloud-5 { animation: cloud-5-anim 6.0s cubic-bezier(0.6, 0, 0.4, 1) 0.2s forwards; }
.cloud-6 { animation: cloud-6-anim 6.0s cubic-bezier(0.6, 0, 0.4, 1) 0.0s forwards; }
.cloud-7 { animation: cloud-7-anim 6.0s cubic-bezier(0.6, 0, 0.4, 1) 0.35s forwards; }

/* 雲のアニメーション定義（変更なし） */
@keyframes cloud-1-anim { from { width: 150vw; max-width: 1600px; transform: translate(-67%, -50%); opacity: 1; } to { width: 150vw; max-width: 1600px; transform: translate(-150vw, -50%); opacity: 0; } }
@keyframes cloud-2-anim { from { width: 140vw; max-width: 1500px; transform: translate(-86%, -70%); opacity: 1; } to { width: 140vw; max-width: 1500px; transform: translate(-140vw, -70%); opacity: 0; } }
@keyframes cloud-3-anim { from { width: 160vw; max-width: 1700px; transform: translate(-70%, -20%); opacity: 1; } to { width: 160vw; max-width: 1700px; transform: translate(-140vw, -20%); opacity: 0; } }
@keyframes cloud-4-anim { from { width: 150vw; max-width: 1600px; transform: translate(-40%, -70%); opacity: 1; } to { width: 150vw; max-width: 1600px; transform: translate(130vw, -70%); opacity: 0; } }
@keyframes cloud-5-anim { from { width: 140vw; max-width: 1500px; transform: translate(-60%, -75%); opacity: 1; } to { width: 140vw; max-width: 1500px; transform: translate(150vw, -75%); opacity: 0; } }
@keyframes cloud-6-anim { from { width: 160vw; max-width: 1700px; transform: translate(-57%, -45%); opacity: 1; } to { width: 160vw; max-width: 1700px; transform: translate(120vw, -45%); opacity: 0; } }
@keyframes cloud-7-anim { from { width: 150vw; max-width: 1600px; transform: translate(-40%, -20%); opacity: 1; } to { width: 150vw; max-width: 1600px; transform: translate(170vw, -20%); opacity: 0; } }

/* --- 左右の装飾 --- */
.red-decoration {
    position: absolute;
    top: 0;
    bottom: 0; 
    width: 18vw; 
    max-width: 220px; 
    z-index: var(--z-background-decorations);
    background: repeating-linear-gradient(-45deg, var(--text-color), var(--text-color) 40px, transparent 40px, transparent 80px);
}
.red-decoration-left { left: 0; clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%); }
.red-decoration-right { right: 0; clip-path: polygon(40% 0, 100% 0, 100% 100%, 60% 100%); }

/* --- 共通アニメーション --- */
@keyframes charFadeIn { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScaleUp { to { opacity: 1; transform: scale(1); } }

/* --- スクロール後コンテンツ --- */
.scroll-content-wrapper { width: 100%; position: relative; z-index: 5; }
.sub-catchcopy { font-size: 3rem; font-weight: 500; color:black; line-height: 1.7; text-align: center; margin-bottom: 1rem; position: relative; z-index: 10; padding: 0 1rem; }

/* --- イベント概要 --- */
.event-details-section { position: relative; padding: 3rem 0; min-height: 100vh; text-align: center; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.event-header { text-align: center; position: relative; z-index: 10; }
.event-header h1 { font-size: 3rem; }
.event-header h2 { font-size: 3rem; font-weight: bold; }
.date-image-container { max-width: 500px; margin: 1rem auto; position: relative; z-index: 10; }
.date-image-container img { width: 100%; height: auto; }
.character-icon { position: absolute; width: 100vw; max-width: 600px; z-index: 11; }
.character-icon img { width: 100%; height: 100%; object-fit: contain; }
.icon-fox { top: 10%; left: -10%; }
.icon-crow { top: 60%; right: 0%; }
.event-cloud { position: absolute; width: 50vw; max-width: 500px; z-index: 4; opacity: 0; transition: opacity 3s ease-out, transform 3s ease-out; will-change: opacity, transform; }
.event-cloud-1 { top: 20%; right: 14%; transform: translateX(100%); }
.event-cloud-2 { top: 40%; left: -9%; transform: translateX(-100%); }
.event-details-section.is-visible .event-cloud { opacity: 1; transform: translateX(0); }

/* --- 予約ボタン --- */
.reserve-button-main {
    background: rgba(253, 250, 243, 0.85);
    color: black;
    padding: 1.2rem 3rem;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.4s ease, color 0.4s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    margin: 3rem 0;
    position: relative;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    border-style: solid;
    border-width: 8px;
    border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' style='stroke:%23000; stroke-width:4; fill:none; filter:url(%23f);'/%3E%3Cdefs%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.15' numOctaves='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    border-image-slice: 40;
    border-image-repeat: stretch;
    text-decoration: none;
}
.reserve-button-main:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); background: black; color: white; }

.is-centered {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* --- 公演の魅力 --- */
.attraction-section { padding: 5rem 2rem 15rem; max-width: 800px; margin: 5rem auto; background: rgba(253, 250, 243, 0.85); backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; z-index: 9; border-style: solid; border-width: 12px; border-image-slice: 40; border-image-repeat: stretch; border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' style='stroke:%23000; stroke-width:4; fill:none; filter:url(%23f);'/%3E%3Cdefs%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.15' numOctaves='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"); }
.attraction-title { text-align: center; font-size: 2rem; margin-bottom: 3rem; color: var(--accent-color); }
.attraction-content { display: flex; flex-direction: column; gap: 2.5rem; position: relative; z-index: 12; }
.attraction-item { display: flex; align-items: flex-start; gap: 1.5rem; opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.attraction-section.is-visible .attraction-item { opacity: 1; transform: translateX(0); }
.attraction-section.is-visible .attraction-item:nth-child(1) { transition-delay: 0.2s; }
.attraction-section.is-visible .attraction-item:nth-child(2) { transition-delay: 0.4s; }
.attraction-section.is-visible .attraction-item:nth-child(3) { transition-delay: 0.6s; }
.attraction-number { flex-shrink: 0; width: 60px; height: 60px; background: black; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: bold; }
.attraction-text h3 { font-size: 1.6rem; margin-bottom: 0.5rem; line-height: 1.4; color: black; }
.attraction-text p { font-size: 1.3rem; line-height: 1.8; color: black; }
.icon-kama { top: 60%; right: -45%; }
.icon-kome { top: 70%; right: -27%; }

/* --- 雲の装飾 --- */
.cloud-path-section { position: relative; width: 100%; height: 140vh; margin-top: -10rem; z-index: 8; }
.cloud-path-item { position: absolute; width: 120vw; max-width: 1300px; opacity: 0; transition: opacity 2.2s ease-out, transform 2.2s ease-out; }
.cloud-path-item img { width: 100%; height: auto; filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.15)); }
.cloud-path-section.is-visible .cloud-path-item { opacity: 1; transform: translateX(0) scale(1) !important; }
.cloud-path-section.is-visible .cloud-path-item:nth-of-type(1) { transition-delay: 0.1s; }
.cloud-path-section.is-visible .cloud-path-item:nth-of-type(2) { transition-delay: 0.5s; }
.cloud-path-section.is-visible .cloud-path-item:nth-of-type(3) { transition-delay: 0.9s; }
.cloud-path-item.from-left { transform: translateX(-150%) scale(0.7); }
.cloud-path-item.from-right { transform: translateX(150%) scale(0.7); }
.cloud-path-item:nth-of-type(1) { top: 5%; left: -20%; }
.cloud-path-item:nth-of-type(2) { top: 20%; right: -20%; }
.cloud-path-item:nth-of-type(3) { top: 47%; left: -15%; }

/* --- 世界観 --- */
.worldview-section { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 10vh 5%; gap: 4rem; z-index: 7; }
.worldview-title { writing-mode: vertical-rl; text-orientation: upright; font-size: 3.5rem; color: var(--text-color); margin-bottom: 2rem; }
.worldview-text { display: flex; writing-mode: vertical-rl; text-orientation: upright; gap: 3rem; font-size: 1.3rem; line-height: 2.4; color: var(--text-color); max-height: 80vh; }
.worldview-paragraph-group { opacity: 0; transform: translateY(-20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.worldview-section.is-visible .worldview-paragraph-group { opacity: 1; transform: translateY(0); }
.worldview-section.is-visible .worldview-paragraph-group:nth-child(1) { transition-delay: 0.3s; }
.worldview-section.is-visible .worldview-paragraph-group:nth-child(2) { transition-delay: 0.6s; }
.worldview-section .reserve-button-main { margin-top: 3rem; }

/* --- 雲の装飾 2 --- */
.cloud-path-section-2 { height: 100vh; margin-top: 0; z-index: 6; }
.cloud-path-section-2 .cloud-path-item:nth-of-type(1) { top: -30%; left: -15%; }
.cloud-path-section-2 .cloud-path-item:nth-of-type(2) { top: 5%; right: -20%; }
.cloud-path-section-2 .cloud-path-item:nth-of-type(3) { top: 24%; left: -26%; }

/* --- 公演詳細 --- */
.performance-details-section { position: relative; padding: 8rem 5%; max-width: 900px; margin: 0 auto; z-index: 5; }
.details-title { text-align: center; font-size: 3rem; margin-bottom: 4rem; color: var(--accent-color); }
.details-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; color: black; line-height: 1.8; }
.detail-item h3 { font-size: 2.4rem; color: var(--text-color); margin-bottom: 1rem; }
.detail-item p { font-size: 1.7rem; }
.detail-item span { font-size: 1rem; opacity: 0.8; }
.map-container { margin-top: 4rem; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border: 4px solid black; border-radius: 15px; }
.map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.details-character { position: absolute; z-index: -1; width: 600px; }
.details-character img { width: 100%; height: auto; }
.details-character-left { top: 35%; right: -34%; }
.details-character-right { top: 15%; right: 4%; }

/* --- FAQ --- */
.faq-section { padding: 8rem 5%; max-width: 800px; margin: 0 auto; z-index: 5; }
.faq-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: var(--text-color); }
.faq-list { display: flex; flex-direction: column; gap: 1.5rem; }
.faq-item { border-bottom: 2px solid rgba(0,0,0,0.1); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 1.5rem 0; text-align: left; font-size: 1.4rem; font-weight: bold; cursor: pointer; color: black; }
.faq-question span { flex-grow: 1; }
.faq-arrow { width: 24px; height: 24px; stroke: black; transition: transform 0.3s ease-in-out; flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
.faq-answer p { padding: 0 0 1.5rem 1rem; font-size: 1.1rem; line-height: 1.8; color: black; }
.faq-section .reserve-button-main { display: block; margin: 4rem auto 0; }

/* --- 雲の装飾 3 --- */
.cloud-path-section-3 { height: 80vh; margin-top: -10rem; z-index: 4; }
.cloud-path-section-3 .cloud-path-item:nth-of-type(1) { top: 0%; left: -20%; }
.cloud-path-section-3 .cloud-path-item:nth-of-type(2) { top: 40%; right: -20%; }
.cloud-path-section-3 .cloud-path-item:nth-of-type(3) { top: 60%; left: -17%; }
.cloud-path-section-3 .cloud-path-item:nth-of-type(4) { top: 100%; right: -20%; }
.cloud-path-section-3 .cloud-path-item:nth-of-type(5) { top: 130%; left: -20%; }

/* --- フッター --- */
.footer-section { position: relative; padding: 5rem 5% 3rem; text-align: center; z-index: 3; overflow: hidden; }
.footer-logo-container { margin-bottom: 1rem; }
.footer-logo { max-width: 300px; width: 100%; transform: translateY(650px); }
.footer-characters { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-bottom: 3rem; flex-wrap: wrap; }
.footer-character { object-fit: contain; transition: transform 0.3s ease; margin: 0 -100px; }
.footer-character:nth-child(1) { width: 100vw; max-width: 500px; transform: translateX(20px) translateY(560px); z-index: 1; }
.footer-character:nth-child(2) { width: 100vw; max-width: 500px; transform: translateX(-160px) translateY(570px); z-index: 2; }
.footer-character:nth-child(3) { width: 100vw; max-width: 500px; transform: translateX(-300px) translateY(560px); z-index: 3; }
.footer-character:nth-child(4) { width: 100vw; max-width: 500px; transform: translateX(-460px) translateY(570px); z-index: 4; }
.footer-character:nth-child(5) { width: 100vw; max-width: 500px; transform: translateX(450px) translateY(60px); z-index: 3; }
.footer-character:nth-child(6) { width: 100vw; max-width: 500px; transform: translateX(270px) translateY(70px); z-index: 2; }
.footer-character:nth-child(7) { width: 100vw; max-width: 500px; transform: translateX(100px) translateY(80px); z-index: 1; }
.footer-info { color: black; line-height: 1.8; }
.footer-section::after { content: ''; position: absolute; bottom: 10; left: 0; width: 100%; height: 80px; background: repeating-linear-gradient( -45deg, var(--text-color), var(--text-color) 40px, transparent 40px, transparent 80px ); z-index: -1; }

/* --- その他UI要素 --- */
.fade-in-element { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform; }
.fade-in-element.is-visible { opacity: 1; transform: translateY(0); }
.scroll-indicator { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(139, 0, 0, 0.2); z-index: var(--z-scroll-indicator); }
.scroll-progress { height: 100%; background: var(--accent-color); width: 0%; transition: width 0.1s linear; }
.skip-link { position: absolute; top: -40px; left: 6px; background: var(--accent-color); color: white; padding: 8px; text-decoration: none; border-radius: 4px; z-index: 10000; font-weight: bold; }
.skip-link:focus { top: 6px; }

/* --- インタラクティブエフェクト --- */
#interactive-effects-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-interactive-effects); }
.mouse-particle { position: absolute; width: 10px; height: 10px; background: var(--light-gold); border-radius: 50%; opacity: 1; transform: translate(-50%, -50%); animation: particle-fade 1s forwards; }
@keyframes particle-fade { to { opacity: 0; transform: translate(-50%, -50%) scale(2); } }
.confetti-piece { position: absolute; width: 8px; height: 16px; opacity: 0; transform-origin: center center; animation: confetti-burst 1.2s ease-out forwards; }
@keyframes confetti-burst { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--end-x), calc(var(--end-y) + 100px)) rotate(var(--rotation)); opacity: 0; } }

/* --- トップへ戻るボタン --- */
.back-to-top-container { position: fixed; bottom: -10px; right: -115px; z-index: var(--z-ui-elements); opacity: 0; visibility: hidden; transform: translateY(50px); transition: opacity 1.2s ease-in-out, visibility 1.2s, transform 1.2s ease-in-out; pointer-events: none; }
.back-to-top-container.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top-button { position: absolute; top: -10px; left: 50px; text-decoration: none; pointer-events: auto; }
.btt-character { height: 350px; width: 350px; right: -100px; }
.btt-icon-wrapper { display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; background: transparent; border-radius: 50%; cursor: pointer; border: 4px solid black; transition: transform 0.3s ease, background-color 0.3s ease; }
.btt-arrow { width: 40px; height: 40px; stroke: black; transition: stroke 0.3s ease; }
.back-to-top-button:hover .btt-icon-wrapper { transform: translateY(-5px); background-color: black; }
.back-to-top-button:hover .btt-arrow { stroke: white; }


/*レスポンシブ対応*/
@media (max-width: 1024px) {
    .red-decoration {
        display: none;
    }

    .main-logo { 
        padding: 0 8vw; 
    }
    .vertical-text { 
        font-size: 3rem; 
    }
    .vertical-text-top-right { 
        right: 8vw;    /* 5vw → 8vw に変更 */
        top: 8vh;      /* 追加 */
    }
    .vertical-text-bottom-left { 
        left: 8vw;     /* 5vw → 8vw に変更 */
        bottom: 8vh;   /* 追加 */
    }
    .details-character-left { 
        right: -20%; 
    }
    
    /* 以下2つを追加 */
    .icon-kama { 
        right: -35%; 
    }
    .icon-kome { 
        right: -20%; 
    }
}


@media (max-width: 768px) {
    /* ... 既存のコードは省略 ... */
    
    .vertical-text-top-right { 
        right: 5vw;    /* 5% → 5vw に変更 */
        top: 10vh;     /* 10% → 10vh に変更 */
    }
    .vertical-text-bottom-left { 
        left: 5vw;     /* 5% → 5vw に変更 */
        bottom: 10vh;  /* 10% → 10vh に変更 */
    }

    /* アイコンにtopを明示的に追加 */
    .icon-fox { 
        top: 10%;      /* 追加 */
        left: -5%; 
    }
    .icon-crow { 
        top: 60%;      /* 追加 */
        right: -5%; 
    }
    .icon-kama { 
        max-width: 250px; 
        top: 60%;      /* 追加 */
        right: -25%; 
    }
    .icon-kome { 
        max-width: 200px; 
        top: 70%;      /* 追加 */
        right: -15%; 
    }

    .details-character-left { 
        top: 35%;      /* 45% → 35% に変更 */
        right: -20%; 
    }
    .details-character-right { 
        top: 15%;      /* 10% → 15% に変更 */
        right: -5%; 
    }
    
    /* 雲の位置を追加 */
    .event-cloud { 
        max-width: 400px; 
    }
    .event-cloud-1 { 
        top: 20%; 
        right: 10%; 
    }
    .event-cloud-2 { 
        top: 40%; 
        left: -5%; 
    }
}


@media (max-width: 480px) {

    .title-opening-cloud { position: absolute; top: 50%; left: 50%; transition: none; }
    .cloud-1 { animation: cloud-1-anim 4.0s cubic-bezier(0.6, 0, 0.4, 1) 0.3s forwards; }
    .cloud-2 { animation: cloud-2-anim 4.0s cubic-bezier(0.6, 0, 0.4, 1) 0.2s forwards; }
    .cloud-3 { animation: cloud-3-anim 4.0s cubic-bezier(0.6, 0, 0.4, 1) 0.1s forwards; }
    .cloud-4 { animation: cloud-4-anim 4.0s cubic-bezier(0.6, 0, 0.4, 1) 0.4s forwards; }
    .cloud-5 { animation: cloud-5-anim 4.0s cubic-bezier(0.6, 0, 0.4, 1) 0.2s forwards; }
    .cloud-6 { animation: cloud-6-anim 4.0s cubic-bezier(0.6, 0, 0.4, 1) 0.0s forwards; }
    .cloud-7 { animation: cloud-7-anim 4.0s cubic-bezier(0.6, 0, 0.4, 1) 0.35s forwards; }

    /* 雲のアニメーション定義（変更なし） */
    @keyframes cloud-1-anim { from { width: 200vw; max-width: 1600px; transform: translate(-60%, -100%); opacity: 1; } to { width: 200vw; max-width: 1600px; transform: translate(-150vw, -100%); opacity: 0; } }
    @keyframes cloud-2-anim { from { width: 200vw; max-width: 1500px; transform: translate(-50%, -67%); opacity: 1; } to { width: 200vw; max-width: 1500px; transform: translate(-140vw, -67%); opacity: 0; } }
    @keyframes cloud-3-anim { from { width: 190vw; max-width: 1700px; transform: translate(-50%, -40%); opacity: 1; } to { width: 190vw; max-width: 1700px; transform: translate(-140vw, -40%); opacity: 0; } }
    @keyframes cloud-4-anim { from { width: 190vw; max-width: 1600px; transform: translate(-60%, -60%); opacity: 1; } to { width: 190vw; max-width: 1600px; transform: translate(130vw, -60%); opacity: 0; } }
    @keyframes cloud-5-anim { from { width: 210vw; max-width: 1500px; transform: translate(-40%, -20%); opacity: 1; } to { width: 210vw; max-width: 1500px; transform: translate(210vw, -20%); opacity: 0; } }
    @keyframes cloud-6-anim { from { width: 220vw; max-width: 1700px; transform: translate(-50%, -15%); opacity: 1; } to { width: 220vw; max-width: 1700px; transform: translate(220vw, -15%); opacity: 0; } }
    @keyframes cloud-7-anim { from { width: 200vw; max-width: 1600px; transform: translate(-50%, 0%); opacity: 1; } to { width: 200vw; max-width: 1600px; transform: translate(170vw, 0%); opacity: 0; } }

    .sub-catchcopy { font-size: 2rem; font-weight: 500; color:black; line-height: 1; text-align: center; margin-bottom: 1rem; position: relative; z-index: 10; padding: 0 1rem; }


    .vertical-text-top-right { 
        right: 2vw;    /* 2% → 2vw に変更 */
        top: 5vh;      /* 5% → 5vh に変更 */
    }
    .vertical-text-bottom-left { 
        left: 8vw;     /* 2% → 2vw に変更 */
        bottom: 6vh;   /* 5% → 5vh に変更 */
    }

    .event-details-section {
        padding-top: 0rem;
    }

    .date-image-container { max-width: 300px; margin: 1rem auto; position: relative; z-index: 10; }
    .date-image-container img { width: 100%; height: auto; }

    .character-icon { position: absolute; width: 70vw; max-width: 400px; z-index: 11; }
    .character-icon img { width: 100%; height: 100%; object-fit: contain; }

    .icon-fox { 
        top: 7%;
        left: -20%; 
    }
    .icon-crow { 
        top: 80%; 
        right: -10%;    /* 追加 */
    }
    .icon-kama { 
        max-width: 150px; 
        top: 60%;      /* 追加 */
        right: -15%; 
    }
    .icon-kome { 
        max-width: 120px; 
        top: 70%;      /* 追加 */
        right: -10%; 
    }
    
    /* 雲の位置を調整 */
    .event-cloud-1 { 
        top: 20%; 
        right: 5%; 
    }
    .event-cloud-2 { 
        top: 40%; 
        left: 0%; 
    }
    
    /* トップへ戻るボタンの位置を明示 */
    .back-to-top-button { 
        top: -10px;    /* 追加 */
        left: 30px;    /* 追加 */
    }
    .btt-character { 
        height: 150px; 
        width: 150px;  /* 追加 */
    }
}

/* ユーザーがアニメーションをオフにしている場合の設定 */
@media (prefers-reduced-motion: reduce) {
    html { 
        scroll-behavior: auto; 
    }
    * {
        animation: none !important;
        transition: none !important;
    }
    .fade-in-element, .vertical-text span, .attraction-item, .cloud-path-item, .worldview-paragraph-group {
        opacity: 1 !important;
        transform: none !important;
    }
}