/* --- 基本スタイル --- */
/* ヘッダー全体のコンテナ */
.site_header {
    padding: 30px 20px 10px; /* 上の余白を増やしてタイトルを下に移動 */
    background-color: #333; /* ヘッダーの背景を黒に設定 */
    color: #fff; /* ヘッダー内の基本文字色を白に設定 */
    position: relative;
}

/* サイトタイトルのスタイル */
.site_title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center; /* 文字を中央に配置 */
    color: #fff; /* タイトルの文字色を白に設定 */
}

/* ナビゲーションメニューの各リンクの共通スタイル */
.menu_links {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #fff; /* PC用メニューの文字色を白に設定 */
    background-color: transparent;
    /* ホバー時のアニメーションを滑らかにするための設定 */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* リンクにマウスカーソルが乗った時のスタイル */
.menu_links:hover {
    background-color: #555;
    color: #007bff;
    /* 少し上に浮き上がるような効果 */
    transform: translateY(-2px);
    /* 影をつけて立体感を出す */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- PC用ナビゲーション --- */
/* メニュー項目を横並びにするためのFlexbox設定 */
.main_nav ul {
    display: flex;
    gap: 0px;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center; /* メニュー項目を中央に配置 */
}

/* 各メニュー項目の左側に余白を設けて間隔を作る */
.main_nav li {
    margin-left: 10px;
}

/* --- ハンバーガーメニュー (デフォルトは非表示) --- */
.hamburger-menu {
    display: none;
    cursor: pointer;
    /* ボタンのクリック可能な領域を40x40pxに設定 */
    width: 40px;
    height: 40px;
    /* ボタン自体の背景と枠線を消して透明にする */
    background: none;
    border: none;
    /* 他の要素より手前に表示するための設定 */
    z-index: 1001;
}

/* ハンバーガーアイコンの3本線のスタイル */
.site_header .hamburger-menu span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #fff; /* ハンバーガーアイコンの色を白に設定 */
    margin: 6px auto;
    /* 開閉時のアニメーションを0.3秒で滑らかに行う */
    transition: all 0.3s;
}

/* ハンバーガーメニューが開いた時の「×」印スタイル */
/* 1本目の線を45度回転させて下に移動 */
.site_header .hamburger-menu.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

/* 2本目の線を透明にして見えなくする */
.site_header .hamburger-menu.is-open span:nth-child(2) {
    opacity: 0;
}

/* 3本目の線を-45度回転させて上に移動 */
.site_header .hamburger-menu.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* --- スマートフォン表示用のスタイル (メディアクエリ) --- */
/* 画面幅が768px以下の場合に適用 */
@media (max-width: 768px) {
    /* ヘッダー内の要素（タイトルとアイコン）を横並びの両端に配置 */
    .site_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .site_title {
        /* 文字サイズを少し小さくし、下の余白をなくす */
        font-size: 1.8em;
        margin-bottom: 0;
    }

    /* PCでは非表示だったハンバーガーメニューを表示する */
    .site_header .hamburger-menu {
        display: block;
    }

    .main_nav {
        /* アニメーションのために高さを0にしてメニューを隠す */
        max-height: 0;
        /* はみ出した内容を非表示にする */
        overflow: hidden;
        /* ヘッダーを基準に絶対位置で配置 */
        position: absolute;
        /* ヘッダーの高さ分だけ下に配置 */
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* max-heightの変化を0.4秒かけてアニメーションさせる */
        transition: max-height 0.4s ease-in-out;
        /* ハンバーガーアイコンよりは背面に配置 */
        z-index: 1000;
    }

    /* is-openクラスが付与されたときにメニューを表示する */
    .main_nav.is-open {
        /* 高さを十分に確保して内容を表示させる */
        max-height: 1000px;
    }

    .main_nav ul {
        /* メニュー項目を縦に並べる */
        flex-direction: column;
    }

    .main_nav li {
        /* PC表示で設定されていた左の余白をなくす */
        margin: 0;
        display: flex;
    }

    /* 2番目以降のメニュー項目の上側に区切り線を入れる */
    .main_nav li+li {
        border-top: 1px solid #f0f0f0;
    }

    .main_nav li a.menu_links {
        /* 幅を100%に */
        width: 100%;
        /* 文字を中央揃えに */
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
        /* スマホ用メニュー項目の大きさ */
        line-height: 60px;
    }

    /* スマホメニュー内のリンク文字色を強制的に指定 */
    .main_nav.is-open a.menu_links {
        color: #333;
        background-color: transparent;
    }
}