@charset "utf-8";
/* ==========================================================================
 * スマホ・タブレット用 右スライドメニュー（gnb.php の #navigation）
 *   realia-red.css の (max-width: 993px) の指定を上書きして見やすく整える。
 *   PC 表示（994px 以上）には影響しない。
 *
 *   gnb.php 側で付けているクラス
 *     li.has-sub  … サブメニューを持つ項目（セクション見出しとして表示）
 *     li.nav-sep  … 区切り
 *     li.nav-cta  … 無料カウンセリング予約・お申し込み（強調表示）
 * ========================================================================== */
@media (max-width: 993px) {
    .navigation-wrapper {
        background: #fbf8f3;
        box-shadow: -3px 0 14px rgba(0, 0, 0, .15);
    }
    .navigation-wrapper .navigation { float: none !important; width: 100%; }
    .navigation-wrapper .navigation .nav { width: 100%; padding: 0 !important; }
    .navigation-wrapper .navigation .nav > .mobile { display: none; }
    .navigation-wrapper .navigation .nav li { text-align: left !important; margin: 0 !important; }
    .navigation-wrapper .navigation .nav li span.menuparent { display: block; padding: 0 !important; margin: 0 !important; }

    /* 共通のリンク行 */
    .navigation-wrapper .navigation .nav li a {
        display: block;
        position: relative;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        color: #333 !important;
        padding: 10px 36px 10px 18px !important;
        border-bottom: 1px solid #ece3d6 !important;
        text-decoration: none !important;
    }
    /* 右端の矢印 */
    .navigation-wrapper .navigation .nav li a::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        width: 6px;
        height: 6px;
        border-top: 2px solid #c9ad7d;
        border-right: 2px solid #c9ad7d;
        transform: translateY(-50%) rotate(45deg);
    }
    .navigation-wrapper .navigation .nav li a:hover,
    .navigation-wrapper .navigation .nav li a:active {
        background: #f3ebdf !important;
        text-decoration: none !important;
    }

    /* セクション見出し（学校を探す・CEBU21紹介 など） */
    .navigation-wrapper .navigation .nav > li.has-sub > span > a {
        background: #b89b65 !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        letter-spacing: .04em;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        border-bottom: 0 !important;
    }
    .navigation-wrapper .navigation .nav > li.has-sub > span > a::after { border-color: #fff; }

    /* サブメニュー */
    .navigation-wrapper .navigation .nav li ul {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .navigation-wrapper .navigation .nav li ul li a { padding-left: 24px !important; }

    /* 区切り */
    .navigation-wrapper .navigation .nav > li.nav-sep {
        height: 12px;
        background: #efe6d9;
        border-bottom: 1px solid #e6dbcb;
    }

    /* 無料カウンセリング予約・お申し込み */
    .navigation-wrapper .navigation .nav > li.nav-cta > span > a { color: #2a7f9e !important; font-weight: 700 !important; }
    .navigation-wrapper .navigation .nav > li.nav-cta > span > a::after { border-color: #4ca3bf; }

    /* サイト内検索（下部の固定バナーに隠れないよう、後ろに余白を取る） */
    .navigation-wrapper .navigation form[name="fsearchbox"] { display: block; padding: 16px 14px 120px; }
    .navigation-wrapper .navigation form[name="fsearchbox"] .fsearch-box { margin: 0 !important; }
}