@charset "UTF-8";

/* ====================================
   レスポンシブ対応 (768px以下)
   ==================================== */

@media (max-width: 768px) {

    /* --- ヘッダー --- */
    .header_logo img {
        height: 50px; /* ロゴを小さく */
    }

    .header_menubar {
        display: none; /* PCメニュー非表示 */
    }

    body {
        padding-top: 60px; /* ヘッダーの高さ分 */
    }

    /* --- ハンバーガーメニュー --- */
    .hamburger_btn {
        display: block; /* スマホで表示 */
        position: fixed;
        top: 15px;
        right: 20px;
        width: 30px;
        height: 25px;
        z-index: 200;
        cursor: pointer;
    }

    .hamburger_btn span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--color-accent);
        border-radius: 3px;
        transition: all 0.4s;
    }

    .hamburger_btn span:nth-of-type(1) { top: 0; }
    .hamburger_btn span:nth-of-type(2) { top: 11px; }
    .hamburger_btn span:nth-of-type(3) { bottom: 0; }

    .hamburger_btn.active span:nth-of-type(1) { transform: translateY(11px) rotate(45deg); }
    .hamburger_btn.active span:nth-of-type(2) { opacity: 0; }
    .hamburger_btn.active span:nth-of-type(3) { transform: translateY(-11px) rotate(-45deg); }

    /* --- スマホ用ナビゲーション --- */
    .sp_nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        z-index: 150;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s, visibility 0.4s;
        justify-content: center;
        align-items: center;
    }
    .sp_nav.active { opacity: 1; visibility: visible; }
    .sp_nav ul { list-style: none; text-align: center; }
    .sp_nav ul li { margin-bottom: 20px; }
    .sp_nav ul li a {
        font-size: 20px;
        font-weight: bold;
        color: var(--color-text);
        display: block;
        padding: 10px;
    }

    /* --- メインビジュアル (topsec/parallax) --- */
    
    .topsec {
        /* PC版の margin: 0 0 60px 0; を縮小 */
        margin-bottom: 40px; 
    }

    .parallax-container {
        /* スマホ画面に合わせて高さを調整 */
        height: 600px; 
        min-height: 500px;
        max-height: 650px;
        
        /* 格子のサイズを調整 */
        background-size: 25px 25px; 
    }
    
    /* ① 最下層（固定レイヤー） */
    .parallax-layer.layer-base {
        /* PC版(8vh)よりも上下の余白を詰める */
        padding: 40px 0 20px 0; 
    }

    .hero_title_base {
        font-size: 2.5rem; /* タイトルサイズ調整 */
        width: 90%;
        margin: 0 auto;
        /* スマホでも見やすいように影を調整 */
        text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 0 0 10px rgba(0,0,0,0.4); 
    }

    /* 日時・場所とお礼のメッセージ */
    .top_static_info {
        gap: 10px;
        margin-bottom: 0;
    }
    
    .hero_date_place {
        font-size: 0.9rem; /* 画面幅に収まるサイズ */
        padding: 8px 15px;
    }
    
    .hero_thanks {
        font-size: 1.4rem;
        padding: 8px 20px;
        margin-bottom: 20px; /* 下端からの余白 */
        transform: skewX(-10deg);
    }
    
    /* ② 奥（ロゴ） */
    .layer-back {
        padding-bottom: 150px; /* 位置調整 */
    }
    .layer-back img {
        width: 70%; /* ロゴを大きく */
    }

    /* ③ 手前（キャラ） */
    .layer-front {
        /* キャラクターを上に持ち上げてテキストと被らないように */
        padding-bottom: 150px; 
        align-items: flex-end; 
    }
    
    .chars-group {
        width: 100%;
        height: 100%;
    }

    .chars-group img {
        width: 28%; /* キャラクターの幅を拡大 */
        margin-left: -5px; /* ネガティブマージン調整 */
        margin-right: -5px;
    }

    /* --- About (イベント概要) --- */
    .about_content { 
        flex-direction: column; 
        gap: 30px; 
    }
    .about_text_block, .about_slideshow { 
        flex-basis: auto; 
        width: 100%; 
    }
    .about_slideshow { 
        padding-top: 56.25%; /* 16:9比率 */
    }
    .about_text_block p { 
        font-size: 16px; 
    }

    /* --- アンバサダー --- */
    .ambassadorsec { 
        padding: 30px 10px; 
    }
    .ambassador_item { 
        width: 100%; /* 1列表示 */
        margin-bottom: 20px; 
    }
    .ambassador_item img:first-child { 
        max-height: 150px; /* スマホで大きすぎないように制限 */
    }

    /* --- ポップアップ --- */
    .ambassador_popup img { 
        max-width: 95vw; 
        max-height: 80vh; 
    }
    .close_popup_btn {
        top: 2vh;
        right: 2vh;
        font-size: 30px;
        background-color: rgba(0,0,0,0.3);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }
}