@charset "utf-8";

/* --- 1. タイトル部分（完成形を完全維持） --- */
#title-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.animation-container {
    width: 100%;
    max-width: 1300px;
    height: 160px;
}

.text-base {
    font-family: 'Helvetica Neue', 'Arial', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !important;
    font-size: 85px;
    font-weight: 900 !important;
    letter-spacing: 0.02em;
}

.stroke-layer {
    fill: none;
    stroke: #ffffff;
    stroke-width: 0.8px; 
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: draw-stroke 2.5s ease-in-out forwards 1.5s, hide-stroke 0.5s forwards 4.2s; 
}

.fill-layer {
    fill: #ffffff;
    stroke: none;
    clip-path: inset(100% 0 0 0); 
    animation: fill-up 1.5s ease-out forwards 3.2s;
}

.top-image { width: 320px; height: auto; opacity: 0; margin-bottom: -20px; animation: fade-in-up 1.0s forwards 0.5s; }
.subtitle-image { width: 700px; height: auto; opacity: 0; margin-top: -33px; animation: fade-in-up 1.0s forwards 4.5s; }

@keyframes draw-stroke { to { stroke-dashoffset: 0; } }
@keyframes hide-stroke { to { opacity: 0; } }
@keyframes fill-up { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0% 0 0 0); } }
@keyframes fade-in-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* --- 2. スライドショー部分（「パッと戻る」を物理的に消去） --- */
header {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

.hero-slideshow {
    position: absolute;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    z-index: 5;
}

.slide-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    
    /* ここが肝：不透明度は1.5秒でフワッと、拡大は「次の画像に変わるまで」ゆっくり続ける */
    /* 10秒かけて拡大する設定にすることで、4秒後の切り替え時もまだ拡大途中にします */
    transition: opacity 1.5s ease-out, transform 10s linear;
    transform: scale(1.0); /* 最初は等倍 */
   
}

/* 表示された瞬間（activeがついた時）の目標地点 */
.slide-item.active {
    opacity: 1;
    z-index: 2;
     transform: scale(1.2); /* 10秒かけてここまで大きくする指示 */
    
}

/* --- 3. オープニング演出 --- */
#opening-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0033cc;
    z-index: 10;
    animation: fade-out 1.0s forwards 7.0s;
}
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }

header .innerWrap { opacity: 0; transition: 1.5s; }
header .innerWrap.is-show { opacity: 1; }