@charset "UTF-8";

/* ==============================================
   Header (ヘッダー) 専用スタイル
   ============================================== */

html { scroll-behavior: smooth; }

/* ヘッダー全体の枠 */
.site-header {
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    
    /* 追従（固定）設定 */
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 要素を両端に配置 */
    box-sizing: border-box;
}

/* ロゴエリア */
.site-branding {
    /* ▼▼▼【重要】PC版：ロゴの右側余白を最大にしてメニューを右端へ押す ▼▼▼ */
    margin-right: auto; 
    
    flex-shrink: 0;
    z-index: 1002;
    position: relative;
}

.header-logo {
    height: 40px;
    width: auto;
    display: block;
}

/* --- ハンバーガーメニューボタン（基本は非表示） --- */
.hamburger-menu {
    display: none; /* PCでは消す */
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1002;
    padding: 0;
}

.hamburger-menu .bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.hamburger-menu .bar:nth-child(1) { top: 0; }
.hamburger-menu .bar:nth-child(2) { top: 11px; }
.hamburger-menu .bar:nth-child(3) { bottom: 0; }

/* メニューのアクティブ状態 */
.hamburger-menu.is-active .bar:nth-child(1) { transform: rotate(45deg); top: 11px; }
.hamburger-menu.is-active .bar:nth-child(2) { opacity: 0; }
.hamburger-menu.is-active .bar:nth-child(3) { transform: rotate(-45deg); bottom: 11px; }


/* --- ナビゲーションメニュー --- */
.main-navigation {
    /* ベーステーマの影響をリセット */
    width: auto;
}

.menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.menu-list li a {
    text-decoration: none;
    color: #333;
    font-size: 0.95rem;
    font-weight: bold;
    transition: color 0.3s;
}

.menu-list li a:hover {
    color: #008080;
}


/* ==============================================
   SP（スマホ）対応 768px以下
   ============================================== */
@media screen and (max-width: 768px) {
    
    /* ロゴの「右寄せ強制」を解除（ロゴとボタンを両端にするため） */
    .site-branding {
        margin-right: 0;
    }

    /* ハンバーガーボタンを表示 */
    .hamburger-menu {
        display: block;
    }

    /* ナビゲーションメニューを隠して全画面オーバーレイにする */
    .main-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        z-index: 1001;
        
        /* PC版の設定をリセット */
        margin: 0;
        
        /* 最初は隠しておく */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        
        /* 中身を中央揃え（強制表示） */
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .main-navigation.is-active {
        opacity: 1;
        visibility: visible;
    }

    .menu-list {
        /* 強制表示 */
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        font-size: 1.2rem;
    }
}