@charset "UTF-8";
/* CSS Document */

.header-container {
	width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
	background:#025bab;
}
@media screen and (min-width:769px){
	.sticky{
		position:fixed;
		top:0;
		transition: all 0.3s ease-in-out;
	}
}
/* ナビゲーションメニュー（PC版のスタイル） */
.nav-menu {
    transition: transform 0.3s ease-in-out; /* スムーズな開閉アニメーション */
	width: 100%;
}
.nav-list {
    display: flex; /* PC版では横並び */
	justify-content: center;
	margin: 10px 0;
}
.nav-list li{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight:800;
	font-style: normal;
	margin-left:2em;
	text-align: center;
	line-height: 1;
}
.nav-list li span.ja{
	padding: 0.5em 0;
	font-family: Folk Medium;
	font-size: 0.7em;
}
.nav-list li:first-child{
	margin-left: 0;
}
.nav-list a {
    color: #fff;
    font-weight: bold;
    padding: 5px 0;
    transition: color 0.3s ease;
}
.nav-list a:hover {
    color: #ffd700; /* ホバー時の色 */
}

/* ハンバーガーメニューアイコン（初期状態は非表示） */
.hamburger-menu {
    display: none; /* デフォルトでは非表示（PCでは不要） */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    position: relative;
    z-index: 10; /* メニューより手前に表示 */
}

.hamburger-bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease; /* 開閉アニメーション */
}

/* --- レスポンシブ対応（スマートフォン・タブレット向け） --- */
@media screen and (max-width: 768px) {
    .header-container {
        /*padding:15px;  スマートフォン向けの左右余白 
		height: 20px;*/
    }

    /* ハンバーガーメニューアイコンを表示 */
    .hamburger-menu {
        display: flex;
        position:fixed;
        right: 20px;
        top: 15px;
		background:#002174;
    }
	body.menu-open .hamburger-menu {
		background:rgba(2,91,171,1);
	}
    /* ナビゲーションメニュー（SP版のスタイル） */
    .nav-menu {
        /* 初期状態：画面外に隠す */
        position: fixed; /* 画面に固定 */
        top: 0;
        right: -100%; /* 画面右外に隠す */
        width: 70%; /* メニューの幅 */
        height: 100%;
        background:rgba(2,91,171,1); /* メニューの背景色 */
        padding-top: 60px; /* ヘッダーの高さ分開ける */
        box-shadow: -2px 0 5px rgba(0,0,0,0.3); /* 影 */
        overflow-y: auto; /* メニューが長すぎる場合にスクロール */
        transition: right 0.3s ease-in-out; /* スムーズな開閉アニメーション */
    }

    .nav-list {
        flex-direction: column; /* スマートフォンでは縦並び */
        align-items: center; /* 項目を中央寄せ */
        padding:0.5em 0;
    }

    .nav-list li {
        margin: 15px 0; /* 縦方向の間隔 */
    }

    .nav-list a {
        font-size: 1.2em; /* スマートフォンでの文字サイズ */
        padding: 10px 0;
        display: block; /* リンクエリアを広げる */
    }

    /* メニューが開いた時のスタイル（JavaScriptでクラスを付与） */
    body.menu-open .nav-menu {
        right: 0; /* 画面内に表示 */
    }

    /* ハンバーガーアイコンのアニメーション（メニューが開いた時） */
    body.menu-open .hamburger-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    body.menu-open .hamburger-bar:nth-child(2) {
        opacity: 0; /* 中央の棒を非表示 */
    }
    body.menu-open .hamburger-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}