@charset "UTF-8";/* グローバルなスタイル設定とフォントの指定 */
        body {
            font-family: 'Inter', sans-serif;
            margin-top: 64px; /* 固定ナビゲーションバーの高さに合わせてボディのオフセットを設定 */
        }
        /* 固定ナビゲーションバーのスタイル */
        .fixed-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 50; /* 他のコンテンツの上に表示 */
            height: 64px; /* ナビゲーションバーの固定高さ */
        }
        /* ロゴ画像のサイズ調整 */
        .logo-size {
            width: 4vw; /* ロゴの幅 */
            height:2.6vw; /* ロゴの高さ */
            border-radius: 9999px; /* 完全な円形 */
            object-fit: cover; /* 画像が要素に合わせて拡大縮小されるように設定 */
        }
@media (max-width: 768px) {
    .logo-size {
            width: 8vw; /* ロゴの幅 */
            height:5.2vw; /* ロゴの高さ */
         }
}
        /* ドロップダウンメニューの基本スタイル（デスクトップ用） */
        .nav-dropdown {
            position: absolute;
            top: 100%; /* 親要素の直下に配置 */
            left: 0;
            display: none; /* デフォルトでは非表示 */
            opacity: 0; /* 透明度を0に設定 */
            visibility: hidden; /* 表示を隠す */
            transform: translateY(10px); /* 少し下にずらす */
            transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out; /* アニメーションの追加 */
            min-width: 160px; /* ドロップダウンの最小幅 */
        }

        /* ホバー時にドロップダウンを表示（デスクトップ用） */
        .group:hover .nav-dropdown {
            display: block; /* ホバー時に表示 */
            opacity: 1; /* 透明度を1に設定 */
            visibility: visible; /* 表示を有効にする */
            transform: translateY(0); /* 通常の位置に戻す */
        }

        /* モバイルメニューのベーススタイル */
        #main-nav {
            transition: all 0.3s ease-in-out;
        }

        /* モバイルメニューが開いたときのスタイル */
        .mobile-menu-open {
            display: flex !important; /* 強制的に表示 */
            flex-direction: column; /* 縦並びにする */
            position: absolute;
            top: 64px; /* ナビゲーションバーの高さの分下に配置 */
            left: 0;
            width: 100%;
            /*background-color: rgb(126 34 206); /* 背景色 */
            background-color: rgb(0 0 0);
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* 影 */
            padding-top: 1rem; /* 上パディング */
            padding-bottom: 1rem; /* 下パディング */
            z-index: 60; /* ナビゲーションバーより前面に表示 */
        }

        /* モバイルメニュー内の項目スタイル */
        .mobile-menu-open a,
        .mobile-menu-open .nav-dropdown-toggle {
            padding: 0.75rem 1rem; /* パディング */
            width: 100%; /* 幅いっぱい */
            text-align: left; /* 左寄せ */
            /*border-bottom: 1px solid rgb(147 51 234); /* 項目間の区切り線 */
            border-bottom: 1px solid rgb(0 0 0);
            color: white !important; /* テキストカラーを確実に白に設定 */
            text-decoration: none;
        }

        .mobile-menu-open a:hover,
        .mobile-menu-open .nav-dropdown-toggle:hover {
            background-color: rgb(107 114 128);
        }

        .mobile-menu-open > *:last-child {
            border-bottom: none; /* 最後の項目は区切り線なし */
        }

        /* モバイル時のドロップダウンメニューのスタイル */
        .mobile-menu-open .nav-dropdown {
            position: static; /* 静的な配置 */
            display: none; /* デフォルトでは非表示 */
            opacity: 1; /* 透明度を1に設定 */
            visibility: visible; /* 表示を有効にする */
            transform: translateY(0); /* 位置調整なし */
            background-color: rgb(55 65 81); /* 背景色 */
            width: 100%; /* 幅いっぱい */
            padding-left: 2rem; /* インデント */
            border-bottom: 1px solid rgb(55 65 81);
        }

        /* モバイル時のドロップダウンが開いたときのスタイル */
        .mobile-menu-open .nav-dropdown.active {
            display: block; /* アクティブ時に表示 */
        }

        .mobile-menu-open .nav-dropdown a {
            border-bottom: 1px solid rgb(55 65 81);
            padding-left: 1rem;
        }

        .mobile-menu-open .nav-dropdown a:last-child {
            border-bottom: none;
        }