/* --- 共通スタイル（注釈テキスト・折り返し設定） --- */
.sub-menu .note {
    display: block;
    font-size: 10px;
    font-weight: normal !important; /* 注釈は細字のままキープ */
    line-height: 1.3;
    margin-top: 6px; /* 「特別体験 ＞」との間のほどよい隙間 */
    white-space: normal;
    word-break: break-all;
    color: inherit !important;
}

/* --- PC用のスタイル（942px以上） --- */
@media screen and (min-width: 942px) {
    .sp-arrow {
        display: none;
    }

    li.has-submenu {
        position: relative;
    }

    /* 体験予約にマウスが乗っていない時は、!important で絶対に強制非表示 */
    li.has-submenu .sub-menu {
        display: none !important;
        position: absolute;
        top: 0;
        left: 100%; /* 体験予約ボタンの右側に配置 */
        width: 260px;
        background-color: #d70545 !important; /* 確定した正しい赤色 */
        padding: 0;
        margin: 0;
        list-style: none;
        z-index: 9999;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    /* 体験予約にマウスが乗った瞬間だけ最優先で表示（2段階ホバー） */
    li.has-submenu:hover .sub-menu {
        display: block !important;
    }

    li.has-submenu .sub-menu a {
        display: block;
        padding: 12px 15px;
        color: #ffffff;
        background-color: #d70545 !important;
        text-decoration: none;
        box-shadow: none !important;
        font-weight: normal !important;
    }

    li.has-submenu .sub-menu li,
    li.has-submenu .sub-menu li a {
        border: none !important;
    }

    li.has-submenu .sub-menu a:hover {
        background-color: #d70545 !important;
    }
}

/* --- SP用のスタイル（941px以下 / 942px未満） --- */
@media screen and (max-width: 941px) {
    /* 最初から消されてしまっている不要な空タグを念のため完全消去 */
    .sp-arrow {
        display: none !important;
    }

    /* 初期状態（タップされていない時）は完全に消去 */
    li.has-submenu .sub-menu {
        display: none !important;
        background-color: transparent !important; /* 背景は透明 */
        padding-left: 15px; /* インデントを下げて階層感を表現 */
        margin: 0;
        list-style: none;
    }

    /* タップされて「体験予約」が開いた時だけ表示 */
    li.has-submenu.is-active .sub-menu {
        display: block !important;
    }

    /* 
       体験予約のメインリンク（.parent-link）の設定
    */
    li.has-submenu > .parent-link {
        /* 既存の共通CSSによって背景に出力されてしまう「＞」画像を完全に消去 */
        background-image: none !important;
        
        /* 
           【修正箇所①】
           「＋」「ー」を文字のすぐ右隣に綺麗に並べるため、
           aタグ自体を文字の長さにフィットするインラインフレックス構造に指定します。
        */
        display: inline-flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-right: 15px !important; /* 通常の余白に戻します */
    }

    /* 
       【修正箇所②】
       「＋」と「ー」を画面の一番右端へ飛ばして固定していた absolute（絶対配置）のルールを完全に解除し、
       「体験予約」という文字のすぐ右隣（他と同じマージン位置）にぴったり並ぶように調整しました。
    */
    li.has-submenu > .parent-link::after {
        content: "＋" !important; /* 1. 通常時は文字のすぐ右に「＋」を表示 */
        display: inline-block !important;
        
        /* 画面右端への強制移動ルール（position: absolute や right: 15px）を完全撤廃 */
        position: static !important;
        float: none !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        
        /* 
           【他とマージンを揃える設定】
           他のメニュー項目の「＞」画像に設定されている文字との隙間（ margin: -0.125rem 0 0 0.625rem ）
           と完全に同じ余白（ 0.625rem ）を指定し、文字からの距離を100%完璧に一致させました。
        */
        margin: 0 0 0 0.625rem !important; 
        
        font-size: 16px !important;
        font-weight: normal !important;
        color: #ffffff !important;
        line-height: 1 !important;
        background: none !important;
        width: auto !important;
        height: auto !important;
    }

    /* 2. タップされて展開状態（.is-active）になった瞬間、文字のすぐ右隣を「ー」へ切り替え */
    li.has-submenu.is-active > .parent-link::after {
        content: "ー" !important;
    }

    /* サブメニューのリンク設定 */
    li.has-submenu .sub-menu a {
        padding: 12px 15px;
        color: #ffffff;
        background-color: transparent !important; /* 背景は透明 */
        text-decoration: none;
        font-size: 14px;
        font-weight: bold !important;
        background-image: none !important;
        
        /* a タグの表示形式を flex（多機能な横並び構造）に強制上書き */
        display: inline-flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* サブメニュー（通常・特別体験）内の「＞」矢印画像の設定（ここは維持） */
    li.has-submenu .sub-menu a::after {
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216.697%22%20height%3D%2224.564%22%20viewBox%3D%220%200%2016.697%2024.564%22%3E%20%3Cpath%20d%3D%22M-3628.673%2C3665.871l11.5%2C14.468%2C11.5-14.468%22%20transform%3D%22translate(-3665.248%20-3604.891)%20rotate(-90)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
        content: "" !important;
        display: inline-block !important;
        height: 0.625rem !important;
        width: 0.625rem !important;
        
        position: static !important;
        float: none !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 0 0 1em !important; /* ちょうど1文字分の綺麗な右側余白 */
    }

    /* 注釈文（.note）を確実に矢印画像よりも下の2行目に配置 */
    li.has-submenu .sub-menu .special-trial .note {
        width: 100% !important;
        order: 2 !important;
    }

    li.has-submenu .sub-menu li {
        border: none !important;
    }
}