@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600&family=Noto+Serif+JP:wght@200;400;600&display=swap');

:root {
    --gold: #c5a059;
    --navy: #050a14;
    --white: #e6f1ff;
}

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

body {
    background-color: var(--navy);
    color: var(--white);
    font-family: 'Noto Serif JP', 'Yu Mincho', serif;
    line-height: 2.4;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    text-align: center !important;
}

.container { 
    max-width: 1000px; /* バナーを広く見せるために少し拡張 */
    margin: 0 auto !important; 
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- HERO --- */
.hero {
    height: 100vh; width: 100%; position: relative;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-media {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1; filter: brightness(0.4);
}
.hero-content {
    position: relative; z-index: 10; text-align: center !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 1);
}
.main-title { font-size: clamp(2rem, 7vw, 4.5rem); letter-spacing: 0.3em; font-weight: 200; line-height: 1.5; margin-bottom: 40px; }

/* --- STORY SECTION --- */
.story-section { padding: 100px 0; width: 100%; }
.story-para {
    width: 100%; margin: 0 auto 3.5rem auto !important;
    text-align: center !important; font-weight: 200; font-size: 1.1rem;
}

/* --- HIGHLIGHT BOX (バナー特化型) --- */
.highlight-box {
    margin: 100px auto 0 auto !important;
    padding: 40px;
    border: 1px solid rgba(197, 160, 89, 0.4);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    width: 100%;
    
    /* バナーとして黄金比（16:9）を強制 */
    aspect-ratio: 16 / 8; 
    min-height: auto !important; /* 縦長化を防ぐ */
    
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);

    display: grid;
    grid-template-rows: 1fr 2fr 1fr; /* 中段（メッセージ）を広く取る */
    align-items: center;
}

.highlight-box::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(5, 10, 20, 0.6) 0%, rgba(5, 10, 20, 0.8) 100%);
    z-index: 1;
}

.highlight-box > * { position: relative; z-index: 2; width: 100%; }

/* バナー内の文字サイズ調整 */
.highlight-middle .story-para { 
    font-size: clamp(1rem, 2.5vw, 1.4rem) !important; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.9);
}
.highlight-top .story-para, .highlight-bottom .story-para {
    font-size: 0.9rem !important;
    opacity: 0.9;
}

/* --- ANIMATION --- */
.js-fade-up {
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1), transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fade-up.is-visible { opacity: 1; transform: translateY(0); }

.btn-glass {
    display: inline-block; padding: 15px 50px; border: 1px solid rgba(255,255,255,0.4);
    color: #fff; text-decoration: none; letter-spacing: 0.4em; font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);
}