/*
 * グローバルナビ再編 (ナビ再編 実装仕様 版1.2 §2〜§4) のマルシェ版。
 *
 * マルシェのページはテーマ本体の style.css ではなく marche/assets/css/style.css を読み、
 * ヘッダーも別の作り (ナビは PC・SP 共用の ul 1本) になっている。
 * 本体側 (assets/css/global-nav.css) と同じ見た目になるよう、ここで上書きする。
 * SP は ul を分けずに折り返しで2段にする (上段3つ・下段4つ)。
 * 色とアイコンは li の .nav_{key} で当てる (inc/active-menu-header.php)。
 */

/* ---------- §4 プレゼント (新規) ---------- */
body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present {
    border-left: 1px solid #C6C6C6;
}
body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present a::before {
    background-image: url("../../../assets/images/common/icon_present.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present a:hover,
body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present a.active {
    background-color: #C4506E;
    color: #fff;
}
body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present a:hover::before,
body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present a.active::before {
    background-image: url("../../../assets/images/common/icon_present_white.svg");
}

/* ---------- §2-3 PC: アイコンを 24px → 19px。左右 padding は本体と同じく 15.5px (仕様の 17.5px から 2px 詰めた) ---------- */
@media (min-width: 961px) {
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover a {
        padding-left: 15.5px;
        padding-right: 15.5px;
    }
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover a::before {
        width: 19px;
        height: 19px;
    }
}
@media only screen and (max-width: 1366px) and (min-width: 961px) {
    /* style.css 側はこの幅で get_pc(24) = vw 指定になっている。19px 相当の vw に揃える */
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover a::before {
        width: 1.3909224012vw;
        height: 1.3909224012vw;
    }
}

/* プレゼント追加でマルシェの PC ナビが収まらない幅の対策 (2026-09-30 方針決定)。
 * キャッチコピーはできるだけ広い範囲で表示し、収まらない幅でだけ隠す。実測 (2026-09-30):
 *   1600px 以上      そのままで収まる
 *   1500〜1599px     文字間隔 0 ＋ 検索窓 150px にすればキャッチコピーを出したまま収まる
 *   1150〜1499px     キャッチコピーを隠す (1440px でも出したままだと 23px 足りない)
 *   1024〜1149px     さらに検索窓を 100px に。それより狭い幅は追わない
 * 文字間隔は 1599px 以下で一律 0 (通常ページのナビと同じ) にして、幅によって字間が変わらないようにする */
@media (min-width: 961px) and (max-width: 1599px) {
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover a {
        letter-spacing: 0;
    }
}
@media (min-width: 1500px) and (max-width: 1599px) {
    body header .inner .search.util_pc {
        width: 150px;
    }
}
@media (min-width: 961px) and (max-width: 1499px) {
    header .inner .start_header .logo-txt.util_pc {
        display: none;
    }
}
@media (min-width: 961px) and (max-width: 1149px) {
    body header .inner .search.util_pc {
        width: 100px;
    }
}

/* ---------- §3 SP: 2段 (上段 番組情報/国内旅/海外旅、下段 マルシェ/ストア/宿泊/プレゼント) ---------- */
@media (max-width: 960px) {
    body header .inner .container_navi_main_items {
        flex-wrap: wrap;
    }
    /* style.css の :nth-child(n) の区切り線より強くするため、項目クラスで打ち消す */
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_tsalad,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_tsplus,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_overseas,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_marche,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_store,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_stay,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present {
        border-left: 0;
        border-right: 0;
    }
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_tsalad,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_tsplus,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_overseas {
        flex: 0 0 33.3333%;
    }
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_marche,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_store,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_stay,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present {
        flex: 0 0 25%;
        border-top: 1px solid #C6C6C6;
    }
    /* 区切り線は段ごとに「先頭以外の左」 */
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_tsplus,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_overseas,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_store,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_stay,
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover.nav_present {
        border-left: 1px solid #C6C6C6;
    }
    /* §3-3 アイコンとラベルを横並びに */
    body header .inner .container_navi_main_items .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;
    }
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover a::before {
        width: 17px;
        height: 17px;
        margin: 0 5px 0 0;
    }
}

/* §3 SP: 固定ヘッダーの下に本文を出す (2026-10-01)
 * - 項目の幅 (33.33% / 25%) に区切り線 1px が足されて段からはみ出し、幅 320px 前後で3段に折り返していた。
 *   線を幅の内側に入れ、文字が長い項目でも縮められるようにする
 * - marche/style.css の .marche #main { padding-top: 31.1628vw } はナビ1段の頃のヘッダーの高さ。
 *   ナビ2段 (1段 min-height 34px) で幅 430px 以下のバナーに被ったので、ヘッダーと同じ式にする:
 *   ロゴの段 16.2791vw + ナビ2段 max(34px, 4.8837vw) x2 + 2段目の上の線 1px */
@media (max-width: 960px) {
    body header .inner .container_navi_main_items .container_navi_main_item.bgr_hover {
        box-sizing: border-box;
        min-width: 0;
    }
    .marche #main {
        padding-top: calc(16.2790697674vw + 2 * max(34px, 4.8837209302vw) + 1px);
    }
    /* 一覧・検索は 16.9767vw (= 旧ヘッダー 31.1628vw - 14.1860vw) で、見出しの手前に別の余白を持つ作り。
     * 元の差を保ったままヘッダーが伸びた分だけ下げる (幅 375px で見出しに12px被っていた) */
    .products_category #main,
    .marche.article_category #main,
    .marche.search #main {
        /* +2px: 元の作りでも幅 430px で見出しがヘッダー下端に 1px 掛かっていたので、少しだけ余裕を持たせる */
        padding-top: calc(16.2790697674vw + 2 * max(34px, 4.8837209302vw) + 1px - 14.1860465116vw + 2px);
    }
    /* 商品一覧 (/marche/products/) だけ、本文向けの h1 { margin-bottom: 30px } がヘッダー内の h1 にも当たり、
     * ロゴの段が 4〜8px 高くなってナビごと押し下げられていた。ヘッダー内の h1 は余白を持たない */
    body header .inner .start_header h1 {
        margin-bottom: 0;
    }
}

/* §3 SP: ヘッダーの虫眼鏡で開くサイト全体検索 (2026-10-02)
 * - マルシェのヘッダーは id="header marche_header" で、marche/style.css の #header input[type="submit"] { display:none }
 *   が当たらず、ブラウザ標準の「送信」ボタンが出ていた。入力欄もサイト本体の見た目 (下線＋虫眼鏡) が当たっていなかった
 * - 位置はロゴの段の下端 (bottom:0 + translate 100%) が基準で、2段ナビの上に被っていた。
 *   本文の上余白と同じ式でナビの下に出す
 * 見た目の値はサイト本体 (幅 375px) の実測値に合わせる */
@media (max-width: 960px) {
    body header .inner .container_header_search .container_header_search_box {
        top: calc(16.2790697674vw + 2 * max(34px, 4.8837209302vw) + 1px);
        bottom: auto;
        left: 0;
        transform: none;
        box-sizing: border-box;
    }
    body header .inner .container_header_search .container_header_search_box input[type="submit"] {
        display: none;
    }
    body header .inner .container_header_search .container_header_search_box input[type="text"] {
        box-sizing: border-box;
        width: 100%;
        height: 9.7vw;
        border: 0;
        border-bottom: 0.5px solid #212121;
        border-radius: 0;
        padding: 0 8vw;
        font-size: 3.2333vw;
        color: #000;
        background: url("../../../assets/images/common/icon_serch_ss.svg") no-repeat 3% center / 4.388vw auto;
        -webkit-appearance: none;
        appearance: none;
    }
    body header .inner .container_header_search .container_header_search_box input[type="text"]::placeholder {
        color: #ACACAC;
        font-weight: 500;
    }
}