/* スマホ（768px以下）のみ有効にする */
@media (max-width: 768px) {
    /* 三本線・バツ印のボタン（右上固定） */
    .menu-toggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 20px;
        z-index: 9999 !important;
        cursor: pointer;
        padding: 5px;
        height: 40px;
        display: flex;
        align-items: center;
    }

    /* ② 閉じる印（×）と三本線の色を紫に固定 */
    .menu-toggle i {
        color: #6002cc !important;
        font-size: 1.6rem;
    }

    /* メニュー全体のコンテナ */
    nav ul {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 70%; /* 65%から少し広げて安定させます */
        height: 70vh;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
        z-index: 9998;

        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 80px 0 40px 0; /* 左右のpaddingを一旦0に */
        overflow-y: auto;
        border-bottom-left-radius: 20px;
    }

    nav ul.active {
        display: flex;
    }

    /* 各リスト項目 */
    nav ul li {
        width: 100%; /* 横幅いっぱい使う */
        list-style: none;
        margin: 0;
        padding: 0 10% 0 15%; /* ここで中身を内側に寄せる */
    }

    /* 一層目と二層目の文字スタイル統一 */
    nav ul li a,
    .dropdown-trigger {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 5vw !important;
        font-weight: bold;
        color: #2c3e50 !important;
        text-decoration: none;
        padding: 12px 0; /* 上下の余白を少し広げてタップしやすく */
        position: relative; /* 位置固定を解除 */
    }

    /* ★ 二層目（ドロップダウンメニュー）の表示位置を修正 ★ */
    .dropdown-menu {
        display: none;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        /* 位置を固定せず、通常の流れ（静的配置）に戻す */
        position: static !important;
    }

    .dropdown.open .dropdown-menu {
        display: block !important;
    }

    .dropdown-menu li {
        padding: 0; /* 二層目のliの余白をリセット */
        margin-bottom: 5px;
    }

    /* 二層目のリンク文字（一層目と同じ大きさ・色） */
    .dropdown-menu li a {
        font-size: 5vw !important;
        font-weight: normal; /* 差別化のため太さだけ標準に */
        color: #2c3e50 !important;
        padding: 8px 0 8px 20px; /* 左側に少しだけ隙間を開けて階層を表現 */
        border-left: 2px solid #ebcffc; /* 左に薄い紫の線を入れて「中身」感を出す */
    }
    /* 通常時：下向き矢印 */
    .dropdown-trigger i {
        transition: transform 0.3s ease; /* 0.3秒かけて動くようにする */
        margin-left: 10px; /* 文字との間隔 */
        font-size: 0.8em; /* 少し小さくして上品に */
    }

    /* ★ドロップダウンが開いている時（.openがついている時）の矢印を逆にする */
    .dropdown.open .dropdown-trigger i {
        transform: rotate(180deg); /* 180度回転させて上向きにする */
    }
}

/* PC表示 */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}