/* ================== ナビケーションバー ================== */
        /* ナビゲーションバーの全体スタイル */
        nav {
            background-color: #e1caff;
            border-bottom: 2px solid #d869e7;
            padding: 0;
            position: sticky;
            top: 0;
            display: flex;
            align-items: center;
            gap: 30px;
            z-index: 100;
        }


        /* ロゴエリアのスタイル */
        .logo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        /* ロゴ画像のスタイル */
        .logo img {
            height: 60px;
            max-width: 220px;
            width: auto;
            object-fit: contain;
            padding: 10px 20px;
        }

        /* ナビゲーション内のリストを横並びにする */
        nav ul {
            list-style: none;
            display: flex;
            justify-content: flex-start;
        }

        /* 各タブのスタイル */
        nav li:last-child {
            border-right: none;
        }

        /* ナビゲーション内のリンクのスタイル */
        nav a {
            display: block;
            padding: 15px 30px;
            text-decoration: none;
            color: #333;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        /* マウスが乗った時(通称ホバー)のスタイル */
        nav a:hover {
            background-color: #f0f0f0;
        }

        /* アクティブ状態 */
        nav a.active {
            background-color: #e769dd;
            color: #ffffff;
            font-weight: bold;
        }

        /* ハンバーガーメニューボタン（スマホ用） */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #333;
            padding: 10px 20px;
        }

        /* ================== スマホ対応（768px以下） ================== */
        @media (max-width: 768px) {
            /* スマホサイズの時のナビゲーションバー */
            nav {
                flex-direction: column;
                align-items: flex-start;
            }
        
            /* スマホサイズの時のメニューリスト */
            nav ul {
                display: none;  /* 初期状態では隠す */
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                flex-direction: column;
                background-color: #e1caff;
                border-bottom: 2px solid #ff39cd;
                z-index: 1000; 
            }

            /* メニューがアクティブになった時（開いた時） */
            nav ul.active {
                display: flex;
            }

            /* スマホでハンバーガーメニューボタンを表示 */
            .menu-toggle {
                display: block;  /* スマホでだけ表示 */
            }

            .logo img {
                max-width: 190px;
            }
        }

/*ナビケーションバーは個別CSS化されています*/