/*
 * グローバルナビ再編 (ナビ再編 実装仕様 版1.2 §2〜§4、2026-09 確定)
 *
 * style.css の後に読み込み、ナビの部分だけを上書きする。
 * style.css は stg (整形済み) と本番 (圧縮済み) で書式が違い、中身の差も判別しきれないため、
 * 本体には手を入れずにこのファイルへ切り出した。stg と本番で同じファイルを出せる。
 *
 * 色とアイコンは li の .nav_{key} で当てる (inc/active-menu-header.php)。
 * style.css 側は :nth-child で当てているが、SP を2段に分けると番号が段の中で振り直されるため、
 * ここでは項目のクラスで当て直している。セレクタは style.css より詳細度を高くしてある。
 */

/* ---------- 項目ごとの色とアイコン ----------
 * 既存6項目: SP の段の中だけ当て直す (PC は1段のままなので style.css の :nth-child が正しい)
 * プレゼント: PC・SP の両方に当てる */

header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsalad a::before { background-image: url("../images/common/icon_tv_off.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsalad a:hover::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsalad a.active::before { background-image: url("../images/common/icon_tv_on.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsalad a:hover,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsalad a.active { background-color: #FD9649; }

header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsplus a::before { background-image: url("../images/common/icon_suitcase.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsplus a:hover::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsplus a.active::before { background-image: url("../images/common/icon_suitcase_w.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsplus a:hover,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_tsplus a.active { background-color: #159EB7; }

header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_overseas a::before { background-image: url("../images/common/icon_air_off.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_overseas a:hover::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_overseas a.active::before { background-image: url("../images/common/icon_air_on.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_overseas a:hover,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_overseas a.active { background-color: #476BBC; }

header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_marche a::before { background-image: url("../images/common/icon_marche.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_marche a:hover::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_marche a.active::before { background-image: url("../images/common/icon_marche_off.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_marche a:hover,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_marche a.active { background-color: #326745; }

header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_store a::before { background-image: url("../images/common/icon_cart_orange.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_store a:hover::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_store a.active::before { background-image: url("../images/common/icon_cart_white.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_store a:hover,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_store a.active { background-color: #F28103; color: #fff; }

header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_stay a::before { background-image: url("../images/common/hedder_icon_stay.svg"); background-size: contain; }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_stay a:hover::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_stay a.active::before { background-image: url("../images/common/hedder_icon_stay_white.svg"); }
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_stay a:hover,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_stay a.active { background-color: #C3A861; color: #fff; }

/* §4 プレゼント (新規) */
nav#globalnav > .inner.pc ul.container_navi_main_items > .container_navi_main_item.bgr_hover.nav_present a::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_present a::before {
    background-image: url("../images/common/icon_present.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
nav#globalnav > .inner.pc ul.container_navi_main_items > .container_navi_main_item.bgr_hover.nav_present a:hover::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_present a:hover::before,
nav#globalnav > .inner.pc ul.container_navi_main_items > .container_navi_main_item.bgr_hover.nav_present a.active::before,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_present a.active::before { background-image: url("../images/common/icon_present_white.svg"); }
nav#globalnav > .inner.pc ul.container_navi_main_items > .container_navi_main_item.bgr_hover.nav_present a:hover,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_present a:hover,
nav#globalnav > .inner.pc ul.container_navi_main_items > .container_navi_main_item.bgr_hover.nav_present a.active,
header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover.nav_present a.active { background-color: #C4506E; color: #fff; }

/* ---------- §2 PC ---------- */

/* §2-3 アイコンを 24px → 19px。仕様では減った 5px を padding 17.5px で吸収して項目幅を据え置くが、
 * プレゼント追加で窮屈になるため左右 2px ずつ詰めて 15.5px にした (2026-09-29 ユーザー判断、クライアント確認前) */
nav#globalnav > .inner.pc ul.container_navi_main_items > .container_navi_main_item.bgr_hover a {
    padding-left: 15.5px;
    padding-right: 15.5px;
}
nav#globalnav > .inner.pc ul.container_navi_main_items > .container_navi_main_item.bgr_hover a::before {
    width: 19px;
    height: 19px;
}
/* プレゼントは7番目。style.css の :nth-child(6) (宿泊) と同じく左に区切り線 */
nav#globalnav > .inner.pc ul.container_navi_main_items > .container_navi_main_item.bgr_hover.nav_present {
    border-left: 1px solid #C6C6C6;
}

/* ---------- §3 SP ---------- */

.container_navi_main_rows {
    display: none;
}
@media (max-width: 960px) {
    .container_navi_main_rows {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .container_navi_main_rows > .container_navi_main_items + .container_navi_main_items {
        border-top: 1px solid #C6C6C6;
    }

    /* 区切り線は段ごとに「2項目目以降の左」に引き直す (style.css の :nth-child 指定を打ち消す) */
    header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover {
        border-left: 0;
        border-right: 0;
    }
    header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover + .container_navi_main_item.bgr_hover {
        border-left: 1px solid #C6C6C6;
    }

    /* §3-3 アイコンとラベルを横並びに。PC 用の height: 70px が SP にも効いているので auto で打ち消す */
    header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover a {
        height: auto;
        min-height: 34px;
        padding: 0 4px;
        flex-direction: row;
        justify-content: center;
        font-size: 3.2558139535vw;
        line-height: 4.8837209302vw;
        white-space: nowrap;
    }
    header#header > .inner .container_navi_main_rows .container_navi_main_items.sp .container_navi_main_item.bgr_hover a::before {
        width: 17px;
        height: 17px;
        margin: 0 5px 0 0;
        background-repeat: no-repeat;
        background-position: center center;
    }
}