/* =========================================================================
   リニューアル版ヘッダー（2026-09-16 奥田さんご依頼「ヘッダー・フッターの整理／検索バーの追加」）

   採寸は支給PCカンプ index_pc_1.jpg（幅3004px＝実寸1920px相当・倍率1.5646）と
   支給SPカンプ index_sp.jpg（幅594px＝実寸375px相当・倍率1.584）の実測から起こしている。
     ・黒帯の高さ            102px → 65px（実装66px）
     ・黄色帯の高さ           59px → 38px・背景 rgb(255,217,110) = #ffd96e
     ・中身の左右             ロゴ左端 15.4% / メニュー右端 84.7% → 中央寄せ・最大幅1330px
     ・ロゴ画像               227px → 145px（右の「公式通販サイト」は 103px → 66px・11px相当）
     ・検索ボックス           501×55px → 320×35px
     ・LINEアイコン            65px → 40px
     ・送料無料の吹き出し      571px → 365px・高さ32px
     ・黄色帯の文字            12.5px相当・太字・項目間 65px（区切り線を中央に置く）
     ・SP                     2026-10-13の支給デザインに合わせ、末尾の上書き節で再構成

   このファイルは base.css・header_shipping_subscription_band.css より後に読み込む
   （＝同じセレクタは後勝ちで上書きする）。
   ========================================================================= */

/* ヘッダーの高さは1か所で持つ。body の padding-top・受賞ティッカーの位置・アンカーのオフセットが
   すべてこの値を参照するので、ここを変えれば全部が追従する（base.css / 帯CSSの 80px/60px 直書きは
   この変数へ置き換え済み）。ここはPCの基準値で、SP値は末尾の上書き節に集約する。 */
:root {
    --nagomi-header-height: 104px;
    /* 広幅PCでは最上部帯を出さない。769〜1400pxは34px、SPは36pxを末尾の上書き節で設定する。 */
    --nagomi-shipping-subscription-band-height: 0px;
    /* スクロールで持ち上げるグループの高さ（JSが実測するまでのフォールバック）＝ヘッダー104px＋受賞ティッカー84px */
    --nagomi-header-group-height: 188px;
    /* 受賞バッジ（.js-ticker）を黒帯の「上」に白い帯として置くときの高さ。
       PCは従来どおりヘッダーの下に重ねて出すので 0px（＝本文を押し下げない）。
       SPでの実測値は header_renewal.js が書き込む（2026-09-16 奥田さんご指示「PCはそのまま、スマホでは上へ移動」）。 */
    --nagomi-ticker-height: 0px;
    --nagomi-ticker-above: 0;
}

header.nagomi_storefront_header {
    height: var(--nagomi-header-height);
    display: block;
    padding: 0;
}
/* 黄色帯が下端に来るので、旧ヘッダーの2pxの黄色い下線は不要 */
header.nagomi_storefront_header::after {
    display: none;
}
/* 下スクロールで持ち上げる。ただし**ドロワー（ハンバーガー）を開いている間は持ち上げない**。
   base.css は `.is_hamb_open header, .is_hamb_open header._up { top: 0 }` で「メニューを開いたら
   ヘッダーを戻す」ことにしていたが、この `_up` を同じ詳細度で後から上書きしている本ファイルが
   後勝ちするため効かなくなっていた。その結果、ドロワーを開いたまま（または開く前に）下へ
   スクロールするとヘッダーごとハンバーガー（×）が画面外へ消え、ドロワーの上端に黒い空きが残る
   （2026-09-17 奥田さんご指摘「またヘッダーでハンバーガーメニューが隠れているので修正」。
    実測 390px: ヘッダー y=-82px＝画面外・×も y=-78px／1440px: y=-104px）。
   持ち上げ側に `body:not(.is_hamb_open)` を付けて、開いている間は通常位置の top がそのまま残るようにする。
   transform での持ち上げ（SP・グループ）は header_shipping_subscription_band.css の
   `body.nagomi_storefront_frame.is_hamb_open …{transform:none}` が既に打ち消している。 */
body:not(.is_hamb_open) header.nagomi_storefront_header._up,
body._scroll:not(.is_hamb_open) header.nagomi_storefront_header._up {
    top: calc(-1 * var(--nagomi-header-height));
}

/* --------------------------------------------------
   黒帯（上段）
-------------------------------------------------- */
.nagomi_storefront_header .hdr_inner {
    max-width: 1330px;
    height: 66px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo search line bubble icons hamb";
    align-items: center;
    column-gap: 0;
}
.nagomi_storefront_header .hdr_inner > * {
    min-width: 0;
}

/* ロゴ */
.nagomi_storefront_header .hdr_logo {
    grid-area: logo;
    margin: 0 20px 0 0;
}
.nagomi_storefront_header .hdr_logo .main {
    max-width: 145px;
    width: 145px;
}
.nagomi_storefront_header .hdr_logo .sub {
    font-size: 1.1rem;
    white-space: nowrap;
    margin: 0 0 3px 10px;
}

/* SP専用の3リンク（PCでは黄色帯が担うので出さない） */
.nagomi_storefront_header .hdr_pills {
    display: none;
    grid-area: pills;
}

/* 検索バー
   幅は 268px（旧 320px）。黒帯の中身は最大 1330px で頭打ちのため、ログイン・会員登録ボタンを足した分だけ
   送料無料の吹き出しの領域が狭まり、365px の吹き出しが 313px に縮んで文がカートアイコンへ 26px はみ出していた
   （2026-10-13 奥田さんご指摘「送料無料はみ出しを修正」・1413px で実測。1401px 以上のどの幅でも同じ）。
   吹き出しの 365px（■8-3 ア）は保ち、足りない 52px を検索バーから譲る。1400px 以下は下のメディアクエリで可変幅に戻る。 */
.nagomi_storefront_header .hdr_search {
    grid-area: search;
    width: 268px;
    position: relative;
}
.nagomi_storefront_header .hdr_search_form {
    width: 100%;
    height: 35px;
    background: #fff;
    border: solid 2px #ffd96e;
    border-radius: 6px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.nagomi_storefront_header .hdr_search_input {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    color: #1d2928;
    background: transparent;
    border: 0;
    outline: none;
    margin: 0;
    padding: 0 4px 0 16px;
    font-family: inherit;
    font-size: 1.3rem;
    line-height: 1.4;
}
.nagomi_storefront_header .hdr_search_input::placeholder {
    color: #9a9a9a;
}
.nagomi_storefront_header .hdr_search_submit {
    appearance: none;
    flex: 0 0 auto;
    width: 36px;
    height: 100%;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.nagomi_storefront_header .hdr_search_submit img {
    width: 17px;
    height: auto;
}

/* 検索プルダウン（選ぶと絞り込みが効く17項目） */
.nagomi_storefront_header .hdr_search_suggest {
    width: 100%;
    max-height: min(60vh, 420px);
    background: #fff;
    border: solid 1px #d9d9d9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    overflow-y: auto;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
}
.nagomi_storefront_header .hdr_search_suggest[hidden] {
    display: none;
}
.nagomi_storefront_header .hdr_search_suggest_list > li + li {
    border-top: solid 1px #ededed;
}
.nagomi_storefront_header .hdr_search_suggest_list a {
    color: #1d2928;
    display: block;
    padding: 8px 16px;
    font-size: 1.3rem;
    line-height: 1.4;
    text-decoration: none;
}
.nagomi_storefront_header .hdr_search_suggest_list a:hover,
.nagomi_storefront_header .hdr_search_suggest_list a:focus {
    background: #fff8e4;
    opacity: 1;
}

/* LINE */
.nagomi_storefront_header .hdr_line {
    grid-area: line;
    width: 40px;
    height: 40px;
    margin: 0 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nagomi_storefront_header .hdr_line img {
    width: 100%;
    height: 100%;
}

/* 送料無料の吹き出し（PCはカートアイコンの左隣・しっぽは右向き）
   2026-09-17 奥田さんご回答（■6 ウ）「PCはカートの左横・しっぽは右向き／スマホはカートボタンの真下・しっぽは上向き」。
   9/16の「カートボタンの真下へ」は支給カンプ index_pc_1.jpg と食い違っていたため、PCはカンプどおりへ戻す。
   幅は 2026-09-17 奥田さんご回答（■8-3 ア）により、支給カンプ採寸の 365px 固定にする（自動幅をやめる）。 */
.hdr_free_shipping_notice {
    grid-area: bubble;
    justify-self: end;
    height: 32px;
    display: grid;
    /* 支給カンプ index_pc_1.jpg の採寸 365px。文字数が増減しても幅を動かさない（ご回答 ■8-3 ア）。 */
    width: 365px;
    /* グリッド領域の幅は max-width の基準に入るが左右マージン(24px+22px)は入らないため、
       その46pxを引かないと領域からはみ出してLINEアイコンへ重なる（1280px幅で実測） */
    max-width: calc(100% - 46px);
    box-sizing: border-box;
    background: #fdf0ef;
    border: solid 2px #dd5447;
    border-radius: 4px;
    color: #dd5447;
    margin: 0 22px 0 24px;
    padding: 2px 14px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    /* overflow:hidden を付けるとカートを指すしっぽ（::before/::after）ごと切り落とされる（1920pxで実測）。
       1400px以下ではヘッダー直下の帯に切り替わるので、ここで文を省略する必要はない。 */
    position: relative;
}
.hdr_free_shipping_notice strong {
    font-weight: 700;
}
.hdr_free_shipping_notice .nagomi_shipping_rotator_item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hdr_free_shipping_notice .nagomi_shipping_rotator_item._schedule {
    flex-direction: column;
    line-height: 1.05;
}
.hdr_free_shipping_notice .nagomi_shipping_schedule_lead {
    font-size: 1rem;
    font-weight: 500;
}
.hdr_free_shipping_notice .nagomi_shipping_schedule_date {
    font-size: 1.2rem;
}
/* カートアイコンを指すしっぽ（外枠と内側を2枚重ねて線幅2pxを再現する） */
.hdr_free_shipping_notice::before,
.hdr_free_shipping_notice::after {
    content: "";
    border-style: solid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.hdr_free_shipping_notice::before {
    left: 100%;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #dd5447;
}
.hdr_free_shipping_notice::after {
    left: calc(100% - 2px);
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #fdf0ef;
}

/* カート・アカウント・お気に入り */
.nagomi_storefront_header .hdr_icons {
    grid-area: icons;
    display: flex;
    align-items: center;
    gap: 12px;
}
.nagomi_storefront_header .hdr_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.nagomi_storefront_header .hdr_icon._cart img { width: 29px; }
.nagomi_storefront_header .hdr_icon._mypage img { width: 20px; }
.nagomi_storefront_header .hdr_icon._favorite img { width: 26px; }
.nagomi_storefront_header .hdr_icon._cart .cart_quantity {
    color: #0e1312;
    font-size: 1rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    background: #ffd96e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -.1em;
    position: absolute;
    top: -6px;
    right: -6px;
}

/* ハンバーガー */
.nagomi_storefront_header #hamb {
    grid-area: hamb;
    width: 48px;
    height: 66px;
    margin: 0 0 0 16px;
}
.nagomi_storefront_header #hamb::before {
    width: 48px;
    height: 60px;
    /* 2026-09-18 奥田さんご指示「×の白い角丸とメニューの背景色を揃えて」:
       base.css の #hamb::before は #f6f6f6（わずかに灰色がかった白）だが、
       ドロワーのパネル .js-drawer_wrap は #fff。×の角丸の下端に
       .js-drawer_wrap の上端を直付けしている（padding-top:0）ため、色が違うと
       継ぎ目に段差が見える。メニュー側の #fff へ揃える。
       SP（≤768px）側の規則は width/height だけを上書きしているので、
       この1か所で全幅に効く。 */
    background: #fff;
}
.nagomi_storefront_header #hamb .hamb_icon {
    width: 38px;
    height: 20px;
}

/* --------------------------------------------------
   黄色帯（下段のナビ8項目）
-------------------------------------------------- */
.nagomi_storefront_header .hdr_band {
    width: 100%;
    height: 38px;
    background: #ffd96e;
}
.nagomi_storefront_header .hdr_band_list {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.nagomi_storefront_header .hdr_band_list::-webkit-scrollbar {
    display: none;
}
.nagomi_storefront_header .hdr_band_list > li {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.nagomi_storefront_header .hdr_band_list > li + li::before {
    content: "";
    width: 1px;
    height: 14px;
    background: #1d2928;
    opacity: .4;
    margin: 0 32px;
}
.nagomi_storefront_header .hdr_band_list a {
    color: #1d2928;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

/* 本文の開始位置・受賞ティッカー・アンカーのオフセット（base.css と帯CSSの 80px/60px 直書きの上書き）は、
   **このファイルではなく header_common.twig の中の <style> で出している**。
   購入フロー（default_frame の既定レイアウト）は header_common.twig を使わず、固定ヘッダーも無いので、
   ここで一律に上書きするとカート画面の上に 24px の余白だけが増えてしまうため
   （1280px幅で実測）。新ヘッダーが実際に出ているページだけに効かせる。 */

/* --------------------------------------------------
   1400px以下（ノートPC・タブレット）
   黄色帯は8項目のまま横スクロールさせ、検索バーを可変にする。
   送料無料の吹き出しは、カートの左隣に置くと 1280px 幅で文が省略されてしまう（実測）ため、
   ここから下はSPと同じ「ヘッダー直下の帯」にして全文を出す。
-------------------------------------------------- */
@media screen and (max-width: 1400px) {
    .nagomi_storefront_header .hdr_inner {
        grid-template-columns: auto minmax(120px, 1fr) auto auto auto;
        grid-template-areas: "logo search line icons hamb";
    }
    .nagomi_storefront_header .hdr_search {
        width: 100%;
    }
    .nagomi_storefront_header .hdr_line {
        margin: 0 0 0 12px;
    }
    .nagomi_storefront_header .hdr_icons {
        margin: 0 0 0 12px;
    }
    /* 吹き出しは幅が足りないのでヘッダー直下の帯にする（SPと同じ扱い）。
       帯のときだけ本文を押し下げる。
       しっぽは上向きで、カートボタンの真下を指す
       （2026-09-17 奥田さんご回答 ■6 ウ「スマホはカートボタンの真下・しっぽは上向き」）。
       カートの位置は幅・段組み（SPは2段でアイコンの並びも変わる）で動くので、
       header_renewal.js が実測して --freeship-notice-tail-right（画面右端からカート中心までの距離）へ入れる。
       ここの 42px はJSが動く前のフォールバック。 */
    .hdr_free_shipping_notice {
        --freeship-notice-push: 1;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;
        border-width: 1px 0;
        white-space: normal;
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        transform: none;
        z-index: 1;
    }
    /* 帯は黒帯の直下（黄色帯の上）に置き、しっぽをカートアイコンへ付ける
       （2026-10-13 奥田さんご指示「送料無料の吹き出しは上へ移動　吹き出しの三角はカートアイコンの上へ」）。
       top:100% の基準を header 全体（黄色帯の下端）から黒帯の段 .hdr_inner へ替え、
       黄色帯は帯の高さ（header_renewal.js が実測する --freeship-notice-offset）だけ下げる。
       黒帯＋帯＋黄色帯の合計高さは従来と同じなので、本文の開始位置・受賞バッジの位置は変わらない。
       SP（768px以下）は帯を出さないので 769px 以上に限る。 */
    @media (min-width: 769px) {
        .nagomi_storefront_header .hdr_inner {
            position: relative;
        }
        .nagomi_storefront_header .hdr_band {
            margin-top: var(--freeship-notice-offset, 0px);
        }
    }
    .hdr_free_shipping_notice::before {
        left: auto;
        /* 外枠の三角は底辺16px＝中心をカート中心に合わせるには右端から8px引く */
        right: calc(var(--freeship-notice-tail-right, 42px) - 8px);
        top: auto;
        bottom: 100%;
        transform: none;
        border-width: 0 8px 9px 8px;
        border-color: transparent transparent #dd5447 transparent;
    }
    .hdr_free_shipping_notice::after {
        left: auto;
        /* 内側の三角は底辺14px＝同じ中心に合わせるには右端から7px引く */
        right: calc(var(--freeship-notice-tail-right, 42px) - 7px);
        top: auto;
        bottom: calc(100% - 1px);
        transform: none;
        border-width: 0 7px 8px 7px;
        border-color: transparent transparent #fdf0ef transparent;
    }
}

/* --------------------------------------------------
   スマートフォン（768px以下）
   支給SPカンプどおり、黒帯を2段にして黄色帯の代わりに3ボタンを置く
-------------------------------------------------- */
@media screen and (max-width: 768px) {
    :root {
        --nagomi-header-height: 82px;
        --nagomi-header-group-height: 138px;
        /* 受賞バッジを黒帯の上へ出す（下の「受賞バッジ」節）。JSが実測するまでのフォールバック */
        --nagomi-ticker-height: 56px;
        --nagomi-ticker-above: 1;
        --nagomi-ticker-top: var(--topinfo-height);
    }
    header.nagomi_storefront_header._up {
        transform: translateY(calc(-1 * (var(--nagomi-header-height) + var(--nagomi-ticker-height))));
    }
    /* 支給SPカンプ（幅375px相当）の採寸をそのまま並べると横1行に収まりきらないので、
       375pxを基準に、それより狭い画面では同じ比率のまま縮める（min(実寸, vw)）。
       こうすると 320px でも横スクロールが出ず、375px 以上では採寸どおりの見た目になる。 */
    .nagomi_storefront_header .hdr_inner {
        height: 82px;
        padding: 0 min(10px, 2.67vw);
        /* ハンバーガーを独立した列にする。ここを下段のアイコン列と共有していたため、
           1段目のハンバーガーの右に約48pxの空きができ、そのぶん3リンクの幅が足りず
           「テイクアウト」がはみ出していた（375pxで実測）。 */
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        grid-template-areas:
            "logo   pills  pills pills hamb"
            "search search line  icons icons";
        align-content: center;
        row-gap: 6px;
    }
    .nagomi_storefront_header .hdr_logo {
        margin: 0 min(8px, 2.13vw) 0 0;
    }
    .nagomi_storefront_header .hdr_logo a {
        align-items: center;
    }
    .nagomi_storefront_header .hdr_logo .main {
        max-width: min(96px, 25.6vw);
        width: min(96px, 25.6vw);
    }
    .nagomi_storefront_header .hdr_logo .sub {
        font-size: min(.95rem, 2.53vw);
        line-height: 1.2;
        white-space: normal;
        /* 4文字で折り返して「公式通販 / サイト」の2行にする（1文字だけ残る折り返しを防ぐ） */
        max-width: 4.2em;
        margin: 0 0 0 min(5px, 1.33vw);
    }
    /* 支給SPデザイン（2026-09-16 奥田さんご指示「デザインを変更する。添付画像を参考」）どおり、
       枠付きのボタンではなく、細い縦線で区切った白文字のリンクにする。 */
    .nagomi_storefront_header .hdr_pills {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nagomi_storefront_header .hdr_pills::-webkit-scrollbar {
        display: none;
    }
    .nagomi_storefront_header .hdr_pill {
        color: #fff;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 0;
        padding: 0;
        font-size: min(.87rem, 2.32vw);
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
    }
    /* 区切りの縦線（支給デザインの実測: 幅1px・高さ19px・#e5e5e5。左右の空きは実測9px相当だが、
       ロゴ横の「公式通販サイト」とハンバーガーが支給カンプより大きいぶん7pxに詰めている） */
    .nagomi_storefront_header .hdr_pill + .hdr_pill::before {
        content: "";
        flex: 0 0 auto;
        width: 1px;
        height: 19px;
        background: #e5e5e5;
        margin: 0 min(7px, 1.87vw);
    }
    .nagomi_storefront_header .hdr_search {
        width: 100%;
    }
    .nagomi_storefront_header .hdr_search_form {
        height: 30px;
    }
    .nagomi_storefront_header .hdr_search_input {
        font-size: 1.2rem;
        padding: 0 4px 0 12px;
    }
    .nagomi_storefront_header .hdr_line {
        width: 26px;
        height: 26px;
        margin: 0 0 0 10px;
    }
    .nagomi_storefront_header .hdr_icons {
        gap: 10px;
        margin: 0 0 0 10px;
    }
    /* 支給SPカンプの並びは アカウント → お気に入り → カート（吹き出しのしっぽもカートを指す） */
    .nagomi_storefront_header .hdr_icon._mypage { order: 1; }
    .nagomi_storefront_header .hdr_icon._favorite { order: 2; }
    .nagomi_storefront_header .hdr_icon._cart { order: 3; }
    .nagomi_storefront_header .hdr_icon._cart img { width: 24px; }
    .nagomi_storefront_header .hdr_icon._mypage img { width: 17px; }
    .nagomi_storefront_header .hdr_icon._favorite img { width: 21px; }
    .nagomi_storefront_header .hdr_icon._cart .cart_quantity {
        width: 14px;
        height: 14px;
        font-size: .9rem;
        top: -5px;
        right: -5px;
    }
    .nagomi_storefront_header #hamb {
        width: min(38px, 10.13vw);
        height: 38px;
        margin: 0 0 0 min(6px, 1.6vw);
    }
    .nagomi_storefront_header #hamb::before {
        width: min(38px, 10.13vw);
        height: 38px;
    }
    .nagomi_storefront_header #hamb .hamb_icon {
        width: min(28px, 7.47vw);
        height: 15px;
    }
    /* 黄色帯はSPでは出さない（上の3ボタンが代わり） */
    .nagomi_storefront_header .hdr_band {
        display: none;
    }
    .hdr_free_shipping_notice {
        font-size: 1.15rem;
        padding: 4px 10px;
    }
}

@media screen and (max-width: 480px) {
    /* 吹き出しを1行に収める（375px幅で2行になるのを防ぐ） */
    .hdr_free_shipping_notice {
        font-size: 1rem;
        padding: 4px 6px;
    }
}

/* --------------------------------------------------
   受賞バッジ（.js-ticker）— SPは黒帯の「上」へ
   2026-09-16 奥田さんご指示「PCはそのまま、スマホでは上へ移動」。
   さらに同日ご指示「スマホヘッダー最上段のデザインを画像通り（角丸削除・上の棒線削除・
   ばつボタン追加・イラスト移動）」を反映した形が下記。
     ・従来のバッジ画像 ticker_sp.png は**角丸の枠と上の棒線が画像に焼き込まれている**ので出さず、
       支給SPデザインどおり「イラストだけを左端に置いた白帯」にする
       （イラストは支給デザインから切り出した ticker_sp_renewal.png ＝牛舎・干し草・生産者・牛が1かたまり）。
     ・右端に閉じる（×）ボタンを足す。閉じるとこのセッションの間は出さない。
     ・文字は帯の幅いっぱいで中央寄せ（支給デザインの文字中心＝帯の50.0%）。
   採寸（支給デザインの実測・幅1770px＝375px相当・倍率4.72）:
     ・帯の高さ        159px → 33.7px
     ・イラスト        幅467px → 99px（帯の高さいっぱい・左端そろえ）／縦横比 2.94:1
     ・×             幅67px → 14px・中心は右端から 4.7%（375pxで約18px）
   PC（769px以上）は従来どおりヘッダーの下に重ねる＝変更なし（×も出さない）。
-------------------------------------------------- */
/* 受賞バッジの2行目（「慶應大学共同研究」「国産100%飼料」）を横並びにする
   （2026-09-17 奥田さんご回答 ■8-1 ア「横並びに揃える」）。
   base.css では2つを重ねて4秒ごとに入れ替える（cmn.js の initTicker が _active/_inactive を付け外しする）が、
   その切り替えに関係なく両方を常に出す＝どちらの状態でも同じ見た目になるよう3セレクタとも同じ指定にする。 */
.js-ticker_list {
    height: auto;
    overflow: visible;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 2つの主張が続けて読めるだけの間隔。支給カンプの文字送りに合わせて詰めすぎない */
    gap: 12px;
}
.js-ticker_list > li,
.js-ticker_list > li._active,
.js-ticker_list > li._inactive {
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
    transform: none;
    transition: none;
    white-space: nowrap;
}
/* PC・タブレットのバッジ画像 ticker.png（340×84）は、左右にイラストが焼き込まれていて
   文字を置ける幅は中央の192pxしかない（画像を実測: 左イラストは79pxまで／右イラストは271pxから）。
   2つを横に並べると 1.4rem のままでは 214.6px 必要で両側のイラストに重なるため、
   2行目だけ 1.2rem に詰めて 183.7px（余白8.3px）に収める。1行目「農林水産大臣賞受賞」は変えない。
   SP（768px以下）は白帯＋左イラストだけで文字幅に余裕があるので、そのままの大きさで並べる。 */
@media screen and (min-width: 769px) {
    .js-ticker_list {
        gap: 10px;
        box-sizing: border-box;
        /* 文字を置ける中央の帯（79px〜270px）の中心は175px、バッジ自体の中心は170px。
           中央寄せのままだと2つ並べた行が左のイラストへ0.8px食い込むので、
           左に9pxのパディングを入れて4.5px右へ寄せ、左右の空きを3.7pxずつに揃える。 */
        padding-left: 9px;
    }
    .js-ticker_list > li,
    .js-ticker_list > li._active,
    .js-ticker_list > li._inactive {
        font-size: 1.2rem;
    }
}
@media screen and (max-width: 768px) {
    body.nagomi_storefront_frame .js-ticker,
    .js-ticker {
        width: 100%;
        max-width: none;
        left: 0;
        transform: none;
        /* 白帯 ＋ 左端のイラスト（高さいっぱい・比率は画像のまま） */
        background: #fff url(../img/cmn/ticker_sp_renewal.png) no-repeat left center;
        background-size: auto 100%;
    }
    /* 角丸の枠・上の棒線が焼き込まれた従来のバッジ画像は出さない */
    .js-ticker > picture {
        display: none;
    }
    .js-ticker > div {
        position: static;
        width: 100%;
        max-width: none;
        height: auto;
        left: auto;
        bottom: auto;
        transform: none;
        /* 支給デザインの帯の高さ（375pxで33.7px相当）に寄せる */
        padding: 2px 0 3px;
    }
    .js-ticker .main {
        line-height: 1.2;
    }
    /* 黒帯はバッジの帯のぶんだけ下げる（帯CSSの top 指定を後勝ちで上書きする） */
    body.nagomi_storefront_frame .nagomi_storefront_header {
        top: calc(var(--topinfo-height) + var(--nagomi-ticker-height));
    }
    /* 帯CSSはSPのバッジが translateX(-50%) で中央寄せされている前提で持ち上げるので、
       画面幅いっぱいになった今の形に合わせて打ち消す */
    .nagomi_storefront_frame.nagomi_header_group_is_up .js-ticker {
        transform: translateY(calc(-1 * var(--nagomi-header-group-height)));
    }
    body.nagomi_storefront_frame.is_hamb_open .js-ticker {
        transform: none;
    }
}
@media print and (max-width: 768px) {
    .nagomi_storefront_frame .js-ticker {
        transform: none !important;
    }
}

/* =========================================================================
   ヘッダーの下端（2026-09-17 奥田さんご指摘への対応で新設）

   ドロワーと商品一覧ポップアップが「ヘッダーの下から始まる」ために共有する高さ。
   受賞バッジ（SPは黒帯の上）と、ヘッダー直下に出る送料無料の帯・吹き出しまで含める。
   値を持っている変数は header_renewal.js が実測して書き込む。
   ========================================================================= */
:root {
    --nagomi-header-bottom: calc(
        var(--topinfo-height, 0px)
        + var(--nagomi-ticker-height, 0px)
        + var(--nagomi-header-height)
        + var(--freeship-notice-ticker-offset, 0px)
    );
}

/* --------------------------------------------------
   ハンバーガーのドロワー
   2026-09-17 奥田さんご指摘「ハンバーガーメニューがヘッダーで隠れているので修正」

   base.css の `#js-drawer{padding:80px 10px}`（≤1024pxは60px）は旧ヘッダーの高さ80pxを
   直書きしたもので、リニューアル版ヘッダー（PC104px／SP82px＋受賞バッジ＋送料無料の帯）
   では1段目の検索窓がヘッダー（z-index 30）の裏に入る。
   実測（before・トップページ）: 390pxでヘッダー下端118.0px に対しドロワーの中身は y=60.0px
   ＝58.0px 潜り込み／1200pxで104.0px に対し y=80.0px ＝24.0px 潜り込み。
   ヘッダーと同じ変数を見させて、常にヘッダーの下から始める。

   2026-09-17 追補（奥田さんご指摘「またヘッダーでハンバーガーメニューが隠れている」＋添付画像）:
   上余白（padding-top）で下げるだけでは、**ドロワーの中身をスクロールしたときに項目がヘッダーの
   裏へ流れ込む**。ドロワーは画面いっぱい（top:0・z-index 10・背景 #0e1312）に敷かれていて、
   ヘッダー（z-index 30）がその上に浮いているため、スクロールした中身はヘッダーに隠れ、
   さらにヘッダーの上（受賞バッジの帯の位置）にも中身が出てしまう＝ご指摘の画面。
   ドロワー自体をヘッダーの下端から始まるパネルにして、中身がヘッダーの裏へ回らないようにする。

   2026-09-18 追補（奥田さんご指示「ヘッダーに隠れたままになっている。現行サイトと同じ、×ボタンの
   すぐ下にメニューが出るようにして。検索、送料無料の列は隠れていい」＋添付画像）:
   ヘッダー全体の下端（--nagomi-header-bottom）から始めると、×とメニューの間に「検索の列」と
   「送料無料の帯」が挟まる。実測（before・575px・トップ）: ×の下端 77.0px に対し、検索の列
   83.0〜113.0px／送料無料の帯 117.0〜143.1px／ドロワー上端 143.0px／ドロワー内の検索窓
   155.0〜235.4px ときて、メニュー1行目（トップページ）は 235.4px ＝×の 158.4px 下。
   現行サイト（同575px 実測）は ×の下端 120.0px に対しメニュー1行目 140.4px ＝20.4px 下で、
   ドロワー内の検索窓（60.0〜140.4px）はヘッダーの裏に隠れている。
   同じ見え方にするため、
   ・ドロワーは「×の白い角丸（#hamb::before）の下端」（--nagomi-header-bar-bottom）から始める
   ・ヘッダー（z-index 20）より上に重ねて、検索の列と送料無料の帯はドロワーの下に隠す
   ・ドロワー内の検索窓は出さない（現行サイトと同じ＝×のすぐ下がメニュー）
   ×ボタン自体は1段目に残るので、押して閉じる動きは変わらない。

   2026-09-18 追補（奥田さんご指示「罰ボタンの下に黒線が入らないようにして」）:
   #js-drawer の背景は #0e1312（黒）で、白いパネルは中の .js-drawer_wrap が持つ。
   上余白（padding-top）を残すとその分だけ黒が×の下に帯で見える（実測 390px: ×の角丸の
   下端 80.0px → 黒 96.0px まで＝16.0px。うち 4.0px は基準が1段目の下端だったぶん、
   12.0px がこの padding-top）。**padding-top を 0 にして、×の角丸の下端に
   .js-drawer_wrap の上端を直付けする**＝現行サイトと同じ継ぎ目のない繋がりになる
   （角丸は #hamb::before が 10px 10px 0 0、.js-drawer_wrap が 10px 0 10px 10px で
   互いの直角の辺が突き合わされる作り）。左右・下の余白は base.css のまま変えない。
-------------------------------------------------- */
#js-drawer {
    top: var(--nagomi-header-bar-bottom, var(--nagomi-header-bottom));
    height: calc(100% - var(--nagomi-header-bar-bottom, var(--nagomi-header-bottom)));
    min-height: 0;
    padding-top: 0;
    /* ヘッダー（.nagomi_storefront_header は z-index:20）の上に重ねる＝
       ドロワーを開いている間だけ、検索の列・送料無料の帯・黄色帯のナビが隠れる */
    z-index: 25;
}

/* 現行サイトと同じく、ドロワーの中の検索窓は出さない（キーワード検索はヘッダーの検索バーが持つ）。
   2026-09-18 奥田さんご指示「検索、送料無料の列は隠れていい」 */
#js-drawer .js-drawer_search {
    display: none;
}

/* ドロワーを開いている間だけ、ドロワーの下に回り込む列を消す。
   ドロワーはSP（〜768px）では画面いっぱいだが、タブレット・PCでは右側のパネルなので、
   そのまま重ねると「キーワード検索」「計15,000円、または…」「黄色帯のナビ」がパネルの
   左側に半分だけ残って切れて見える（実測 575px: 検索の列が x<86px に、PC1200px: 黄色帯の
   左5項目と送料無料の帯の文言が途中で切れて残る）。
   **visibility で消す＝高さは保つ**ので、ヘッダーの高さ・本文の開始位置・受賞バッジの位置は
   開閉で 1px も動かない（display:none にすると開くたびにページが跳ねる）。
   閉じれば元どおり出る。 */
body.is_hamb_open .nagomi_storefront_header .hdr_band,
body.is_hamb_open #hdr-free-shipping-notice,
body.is_hamb_open #hdr-free-shipping-notice .nagomi_shipping_rotator_item {
    /* 2026-10-13 修正R3: 切り替え表示の子要素は表示中 visibility:visible を持つため、子にも hidden を当てる */
    visibility: hidden;
}

@media screen and (max-width: 768px) {
    /* 768px以下だけ、検索とアイコンが×の下の段（＝「検索の列」）に回り込む。
       769px以上は×と同じ段にあり、ドロワーの上に出たままになるので消さない
       （実測: 575px は .hdr_search の上端 83.0px＝×の下端 77.0px より下／
         769〜1440px は 15.5px＝×と同じ段）。 */
    body.is_hamb_open .nagomi_storefront_header .hdr_search,
    body.is_hamb_open .nagomi_storefront_header .hdr_icons,
    body.is_hamb_open .nagomi_storefront_header .hdr_line {
        visibility: hidden;
    }
}

/* --------------------------------------------------
   商品一覧ポップアップ（SP）
   2026-09-17 奥田さんご指示「スマホヘッダー上の『商品一覧』は押すと
   過去の下固定商品一覧を押したサイトと同じポップアップ」

   中身（Block/footer_common.twig の #product-menu-popup）はそのまま使い、
   開く導線が画面下の固定ナビからヘッダーへ移ったぶん、パネルもヘッダーの直下へ移す。
   下向きのしっぽ（.product_menu_panel::after）は、指す先だった下部固定ナビが無くなったので消す。
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .product_menu_panel {
        top: calc(var(--nagomi-header-bottom) + 8px);
        bottom: auto;
        transform: translateY(-16px);
    }
    .product_menu_popup.is_open .product_menu_panel {
        transform: translateY(0);
    }
    .product_menu_panel::after {
        content: none;
    }
    .product_menu_inner {
        max-height: calc(100vh - var(--nagomi-header-bottom) - 24px);
        max-height: calc(100dvh - var(--nagomi-header-bottom) - 24px);
    }

    /* SPヘッダーの「商品一覧」はポップアップを開くので、押せることが分かるようにする
       （見た目は他の2リンクと同じ＝支給デザインどおり） */
    .nagomi_storefront_header .hdr_pill._menu {
        cursor: pointer;
    }
    .nagomi_storefront_header .hdr_pill._menu[aria-expanded="true"] {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* 画面下固定ナビ（.fix_nav）を削除したので、商品詳細の追従カートは画面下端に着く。
       この変数は base.css が #wrap の下余白・追従カートの位置・右下の固定ボタン・
       左下のイラスト・ホルモン祭バナーの位置の計算に使っているので、ここを0にすれば全部が揃う。 */
    #page_product_detail {
        --product-detail-fix-nav-height: 0px;
    }
}

/* =========================================================================
   SPのスクロール時に表示する縮小版ヘッダー

   ページ最上部では従来の全体表示を維持し、最上部を離れている間は
   body.nagomi_header_is_compact を header_renewal.js が付ける。同じDOMを1段へ組み替えるため、
   検索・カート件数・ハンバーガーは全体表示と同じ機能をそのまま使う。

   body の padding-top と既存の高さ変数は全体表示の値から変えない。固定ヘッダーの見た目だけを
   黒バー50px（グレー段の表示中は合計100px）へ組み替え、切替時に本文の座標を動かさない。
   ========================================================================= */
@media screen and (max-width: 768px) {
    :root {
        --nagomi-compact-header-height: 60px;
    }

    /* 専用JSの下スクロール状態。cmn.js とイベント登録順が入れ替わっても、
       全体表示へ一瞬戻らずヘッダー群を確実に画面外へ置く。 */
    /* 持ち上げ量は「全体表示のときに測ったグループの高さ」（--nagomi-full-group-height＝header_renewal.js が
       全体表示中の最大値を html に保持）と、帯JSの現在値の大きい方。縮小版の表示中に帯JSが測り直して
       値が縮んでも全体版の下端が残らない。黒帯は cmn.js の `_up` が微小な上スクロールで外れても
       上へ逃がしたままにする（_up に頼らない）。クラスを重ねて既存のグループ指定（0,3,0）・_up 指定に勝たせる。 */
    html body.nagomi_header_is_hidden.nagomi_header_is_hidden:not(.is_hamb_open) .nagomi_shipping_subscription_band,
    html body.nagomi_header_is_hidden.nagomi_header_is_hidden:not(.is_hamb_open) .top_info,
    html body.nagomi_header_is_hidden.nagomi_header_is_hidden:not(.is_hamb_open) header.nagomi_storefront_header,
    html body.nagomi_header_is_hidden.nagomi_header_is_hidden:not(.is_hamb_open) .js-ticker {
        transform: translateY(calc(-1 * max(var(--nagomi-header-group-height), var(--nagomi-full-group-height, 0px))));
    }
    html body.nagomi_header_is_hidden.nagomi_header_is_hidden:not(.is_hamb_open) header.nagomi_storefront_header.nagomi_storefront_header {
        top: calc(-1 * var(--nagomi-header-height));
    }
    /* 縮小版から隠すときは、縮小版で見えていなかった帯を一瞬見せずに消したまま上へ逃がす */
    body.nagomi_header_from_compact .nagomi_shipping_subscription_band,
    body.nagomi_header_from_compact .top_info,
    body.nagomi_header_from_compact .js-ticker,
    body.nagomi_header_from_compact .hdr_free_shipping_notice {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* PC用受賞ティッカーは縮小中も寸法を残して不可視にする。
       SP最上段の帯とお知らせ帯は、末尾の現行SP節で滑らかに畳む。 */
    body.nagomi_header_is_compact .js-ticker {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.nagomi_header_is_compact {
        --nagomi-header-bottom: var(--nagomi-compact-header-height);
    }
    body.nagomi_header_is_compact header.nagomi_storefront_header,
    body.nagomi_header_is_compact header.nagomi_storefront_header._up,
    body.nagomi_storefront_frame.nagomi_header_is_compact .nagomi_storefront_header,
    body.nagomi_storefront_frame.nagomi_header_group_is_up.nagomi_header_is_compact .nagomi_storefront_header {
        height: var(--nagomi-compact-header-height);
        top: 0;
        transform: none;
    }

    /* 縮小版の表示中は、cmn.js が微小な下スクロールで header に付ける `_up`
       （body._scroll:not(.is_hamb_open) header.nagomi_storefront_header._up {top:-82px} ＝詳細度0,4,2）や
       グループの持ち上げ（.nagomi_header_group_is_up）に負けず、必ず画面上端に出しておく（クラスを重ねて詳細度0,4,3）。 */
    html body.nagomi_header_is_compact.nagomi_header_is_compact header.nagomi_storefront_header.nagomi_storefront_header {
        top: 0;
        transform: none;
    }

    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_inner {
        height: var(--nagomi-compact-header-height);
        padding: 0 min(10px, 2.67vw);
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "logo search icons hamb";
        align-content: center;
        row-gap: 0;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_pills,
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_line,
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band,
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_icon._mypage,
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_icon._favorite {
        display: none;
    }

    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_logo {
        margin-right: min(8px, 2.13vw);
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_logo .main {
        width: min(84px, 22.4vw);
        max-width: min(84px, 22.4vw);
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_logo .sub {
        max-width: 4.2em;
        margin-left: min(4px, 1.07vw);
        font-size: min(.9rem, 2.4vw);
    }

    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search_form {
        height: 34px;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search_input {
        min-width: 0;
        padding-right: 2px;
        padding-left: 8px;
        font-size: 1rem;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search_submit {
        width: 32px;
    }

    /* 送料無料案内は高さ計測を維持するためdisplay:noneにせず、縮小版の間だけ見えなくする。 */
    body.nagomi_header_is_compact .hdr_free_shipping_notice {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_icons {
        gap: 0;
        margin-left: min(8px, 2.13vw);
    }
    body.nagomi_header_is_compact .nagomi_storefront_header #hamb {
        margin-left: min(8px, 2.13vw);
    }
}

/* =========================================================================
   ヘッダーのログイン導線改善（2026-10-13）
   PCは既存配置のマイページアイコンだけをボタンへ変更する。
   SPは390pxの支給デザインを基準に、通常時は36px帯＋39px黒帯、縮小時は
   39px黒帯＋30px灰色段へ組み替える。320px未満方向は同比率で縮める。
   2026-10-13 奥田さんご指示「ヘッダーが少し細過ぎて押しづらいので、header と hdr_band を height:50px に、
   それぞれの項目・検索欄・ボタンを合わせて高さを調整」により、SPの黒帯を39px→50px、縮小時の灰色段を
   30px→50pxへ広げ、中のボタン・カート・LINE・三本線・検索欄・カテゴリ項目を同じ割合で大きくした
   （PC・タブレット＝769px以上は変更なし）。
   ========================================================================= */
.nagomi_storefront_header .hdr_band_label_sp {
    display: none;
}

.nagomi_storefront_header .hdr_auth {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nagomi_storefront_header .hdr_auth_button {
    color: #fff;
    height: 32px;
    border: solid 1px #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
}
.nagomi_storefront_header .hdr_auth_button._login {
    width: 68px;
    background: transparent;
}
.nagomi_storefront_header .hdr_auth_button._entry {
    color: #0e1312;
    width: 78px;
    background: #fff;
}
.nagomi_storefront_header .hdr_auth_button._logged_in {
    color: #0e1312;
    width: 154px;
    background: #fff;
}
.nagomi_storefront_header .hdr_auth_button:hover,
.nagomi_storefront_header .hdr_auth_button:focus {
    opacity: .8;
}
.nagomi_storefront_header .hdr_icon._cart img {
    width: 29px;
    height: 31px;
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
    .nagomi_storefront_header .hdr_auth {
        gap: 6px;
    }
    .nagomi_storefront_header .hdr_auth_button {
        height: 30px;
        padding: 0 6px;
        font-size: 1.1rem;
    }
    .nagomi_storefront_header .hdr_auth_button._login {
        width: 60px;
    }
    .nagomi_storefront_header .hdr_auth_button._entry {
        width: 70px;
    }
    .nagomi_storefront_header .hdr_auth_button._logged_in {
        width: 136px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --nagomi-shipping-subscription-band-height: 36px;
        --nagomi-header-height: 50px;
        --nagomi-header-group-height: 86px;
        --nagomi-ticker-height: 0px;
        --nagomi-ticker-above: 0;
        --nagomi-compact-header-height: 100px;
    }

    /* 通常時はtransitionを止め、cmn.jsの--topinfo-height設定や帯の再計測では位置を即時同期する。
       全体表示⇔縮小表示の切替中だけJSがnagomi_header_is_transitioningを付け、500msの動きを有効にする。
       bodyのpadding-topは変えないため、切替中も本文の座標は動かない。 */
    .nagomi_shipping_subscription_band {
        transition: none;
    }
    .nagomi_storefront_frame .top_info {
        transition: none;
    }
    /* 帯CSSの body.nagomi_storefront_frame .nagomi_storefront_header（transition: transform .5s）より
       詳細度を上げ、状態切替以外ではtop/transformをアニメーションさせない。 */
    html body header.nagomi_storefront_header.nagomi_storefront_header {
        transition: none;
    }
    body.nagomi_header_is_transitioning .nagomi_shipping_subscription_band {
        transition: top .5s linear, height .5s linear;
        will-change: top, height;
    }
    body.nagomi_header_is_transitioning .top_info {
        transition: transform .5s linear;
        will-change: transform;
    }
    html body.nagomi_header_is_transitioning.nagomi_header_is_transitioning header.nagomi_storefront_header.nagomi_storefront_header {
        transition: top .5s linear, transform .5s;
        will-change: top;
    }

    /* 縮小中と伸縮中は帯の外側で切り抜き、z-indexが高い帯の中身を黒バーへ重ねない。
       安定した縮小状態では中身も不可視にし、0pxの帯から文字・イラストの矩形が残らないようにする。 */
    body.nagomi_header_is_compact .nagomi_shipping_subscription_band,
    body.nagomi_header_is_transitioning .nagomi_shipping_subscription_band {
        overflow: hidden;
    }
    body.nagomi_header_is_compact:not(.nagomi_header_is_transitioning) .nagomi_shipping_subscription_band_inner {
        display: none;
    }
    .nagomi_shipping_subscription_band_shipping::after {
        opacity: 1;
    }
    body.nagomi_header_is_compact .nagomi_shipping_subscription_band_shipping::after,
    body.nagomi_header_is_transitioning .nagomi_shipping_subscription_band_shipping::after {
        opacity: 0;
    }
    html body.nagomi_header_is_compact.nagomi_header_is_compact .nagomi_shipping_subscription_band {
        height: 0;
        top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: none;
    }
    html body.nagomi_header_is_compact.nagomi_header_is_compact .top_info {
        opacity: 1;
        visibility: visible;
        transform: translateY(-100%);
        pointer-events: none;
    }

    /* SPの受賞表示は最上部の左右帯へ移したため、PC用ティッカーは描画しない。 */
    body.nagomi_storefront_frame .js-ticker,
    .js-ticker {
        display: none !important;
    }

    header.nagomi_storefront_header {
        height: var(--nagomi-header-height);
    }
    body.nagomi_storefront_frame .nagomi_storefront_header,
    body:not(.nagomi_storefront_frame) header.nagomi_storefront_header {
        top: calc(var(--nagomi-shipping-subscription-band-height) + var(--topinfo-height, 0px));
    }

    .nagomi_storefront_header .hdr_inner {
        width: 100%;
        max-width: none;
        height: var(--nagomi-header-height);
        margin: 0;
        padding: 0 min(13px, 3.3333vw) 0 min(10px, 2.5641vw);
        grid-template-columns:
            min(24px, 6.1538vw)
            min(109px, 27.9487vw)
            minmax(0, 1fr)
            auto
            min(39px, 10vw);
        grid-template-areas: "hamb logo . icons line";
        align-content: center;
        align-items: center;
        column-gap: 0;
        row-gap: 0;
        box-sizing: border-box;
    }

    .nagomi_storefront_header .hdr_logo {
        margin: 0;
    }
    .nagomi_storefront_header .hdr_logo a {
        height: 100%;
        align-items: center;
    }
    .nagomi_storefront_header .hdr_logo .main,
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_logo .main {
        width: min(95px, 24.359vw);
        max-width: min(95px, 24.359vw);
        /* base.css の `flex: 0 0 22vw`（旧SPヘッダー用）が幅を 22vw に固定するため、基準幅も合わせる */
        flex: 0 0 min(95px, 24.359vw);
        margin-left: min(14px, 3.5897vw);
    }
    .nagomi_storefront_header .hdr_logo .sub,
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_logo .sub {
        display: none;
    }

    .nagomi_storefront_header .hdr_pills {
        display: none;
    }
    .nagomi_storefront_header .hdr_search,
    .nagomi_storefront_header .hdr_band,
    .hdr_free_shipping_notice {
        display: none;
    }

    .nagomi_storefront_header .hdr_icons,
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_icons {
        display: flex;
        align-items: center;
        gap: min(12px, 3.0769vw);
        margin: 0;
    }
    .nagomi_storefront_header .hdr_auth {
        order: 1;
        gap: min(6px, 1.5385vw);
    }
    /* カートはログイン／会員登録ボタン・LINEと上下中央をそろえる
       （2026-10-13 奥田さんご指摘「カートアイコンが上寄りになっているので調整」。
        旧指定は箱27pxの上端に20pxのアイコンを寄せていたため、ボタンより約3.5px上に出ていた）。
       箱の高さをアイコンと同じにし、個数の赤丸はアイコン右上の位置関係をそのまま保つ。 */
    .nagomi_storefront_header .hdr_icon._cart {
        order: 2;
        width: min(31px, 7.9487vw);
        height: min(24px, 6.1538vw);
        align-items: center;
    }
    .nagomi_storefront_header .hdr_icon._favorite {
        display: none;
    }
    .nagomi_storefront_header .hdr_auth_button {
        height: min(26px, 6.6667vw);
        border-width: 1px;
        padding: 0;
        font-size: min(11px, 2.8205vw);
    }
    .nagomi_storefront_header .hdr_auth_button._login {
        width: min(62px, 15.8974vw);
    }
    .nagomi_storefront_header .hdr_auth_button._entry {
        width: min(64px, 16.4103vw);
    }
    .nagomi_storefront_header .hdr_auth_button._logged_in {
        width: min(130px, 33.3333vw);
    }
    .nagomi_storefront_header .hdr_icon._cart img {
        width: min(31px, 7.9487vw);
        height: min(24px, 6.1538vw);
    }
    .nagomi_storefront_header .hdr_icon._cart .cart_quantity {
        color: #fff;
        width: min(14px, 3.5897vw);
        height: min(14px, 3.5897vw);
        background: #d65c4d;
        font-size: min(9px, 2.3077vw);
        top: -2px;
        right: -5px;
    }

    .nagomi_storefront_header .hdr_line,
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_line {
        width: min(30px, 7.6923vw);
        height: min(30px, 7.6923vw);
        display: flex;
        margin: 0 0 0 min(9px, 2.3077vw);
    }

    .nagomi_storefront_header #hamb,
    body.nagomi_header_is_compact .nagomi_storefront_header #hamb {
        width: min(24px, 6.1538vw);
        height: var(--nagomi-header-height);
        margin: 0;
    }
    .nagomi_storefront_header #hamb::before {
        width: min(34px, 8.7179vw);
        height: 48px;
    }
    /* 三本線の太さをそろえる（2026-10-13 奥田さんご指摘「メニュー（三本線）の太さを揃える」）。
       旧指定は高さ17px・中央線 top:50%（=7.5px）・線2px（幅により2px未満）で、線が0.5px位置に
       乗る＝にじんで中央線だけ太く見えていた。高さ16px・線2px固定・中央線7pxの整数位置にし、
       黒帯39pxの中で上端も整数になるよう margin-top で1px上げる（(39-15)/2=12 → 上端11px）。
       黒帯50px化（2026-10-13）に合わせ、幅24px・高さ18px・中央線8pxへ広げる。(50-18)/2=16 で上端は
       整数になるので margin-top の補正は不要。 */
    .nagomi_storefront_header #hamb .hamb_icon {
        width: min(24px, 6.1538vw);
        height: 18px;
        margin-top: 0;
    }
    .nagomi_storefront_header #hamb .hamb_icon span {
        height: 2px;
    }
    .nagomi_storefront_header #hamb .hamb_icon span:nth-child(2) {
        top: 8px;
    }
    .is_hamb_open .nagomi_storefront_header #hamb .hamb_icon span:nth-child(1),
    .is_hamb_open .nagomi_storefront_header #hamb .hamb_icon span:nth-child(3) {
        top: 8px;
    }

    /* 最上部ではヘッダー内検索を隠し、ドロワーにある既存検索欄を使う。 */
    #js-drawer .js-drawer_search {
        display: block;
    }

    /* 縮小表示: 黒50pxを常時固定し、灰色50pxはJSの表示閾値を超えたときだけ黒帯の裏から出す。
       黒帯の中身は通常表示と同じ並びを保つ。 */
    body.nagomi_header_is_compact {
        --nagomi-header-bottom: var(--nagomi-header-height);
    }
    body.nagomi_header_is_compact.nagomi_header_subnav_is_visible {
        --nagomi-header-bottom: var(--nagomi-compact-header-height);
    }
    body.nagomi_header_is_compact header.nagomi_storefront_header,
    body.nagomi_header_is_compact header.nagomi_storefront_header._up,
    body.nagomi_storefront_frame.nagomi_header_is_compact .nagomi_storefront_header,
    body.nagomi_storefront_frame.nagomi_header_group_is_up.nagomi_header_is_compact .nagomi_storefront_header,
    html body.nagomi_header_is_compact.nagomi_header_is_compact header.nagomi_storefront_header.nagomi_storefront_header {
        height: var(--nagomi-header-height);
        top: 0;
        transform: none;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_inner {
        height: var(--nagomi-header-height);
        background: #0e1312;
        padding: 0 min(13px, 3.3333vw) 0 min(10px, 2.5641vw);
        grid-template-columns:
            min(24px, 6.1538vw)
            min(109px, 27.9487vw)
            minmax(0, 1fr)
            auto
            min(39px, 10vw);
        grid-template-areas: "hamb logo . icons line";
        align-content: center;
        column-gap: 0;
        row-gap: 0;
        position: relative;
        z-index: 2;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search {
        width: min(150px, 38.4615vw);
        display: block;
        position: absolute;
        /* 灰色段（黒帯50pxの下・高さ50px）の上下中央: 50 + (50 - 34) / 2 */
        top: 58px;
        left: min(4.5px, 1.1538vw);
        z-index: 2;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50px);
        pointer-events: none;
        transition: transform .3s ease, opacity .1s linear, visibility 0s linear .1s;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search_form {
        width: 100%;
        height: 34px;
        border: 0;
        border-radius: 4px;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search_submit {
        width: min(32px, 8.2051vw);
        order: -1;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search_submit img {
        width: min(14px, 3.5897vw);
        opacity: .55;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search_input {
        min-width: 0;
        padding: 0 4px 0 0;
        font-size: min(11px, 2.8205vw);
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_search_suggest {
        top: calc(100% + 4px);
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band {
        width: 100%;
        height: 50px;
        background: #eee;
        display: block;
        overflow: hidden;
        position: absolute;
        top: var(--nagomi-header-height);
        left: 0;
        z-index: 1;
        visibility: hidden;
        transform: translateY(-100%);
        pointer-events: none;
        transition: transform .3s ease, visibility 0s linear .3s;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band_list {
        height: 100%;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 0 18px 0 min(170px, 43.5897vw);
        overflow-x: auto;
        scroll-behavior: smooth;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band_list > li + li {
        margin-left: min(23px, 5.8974vw);
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band_list > li + li::before {
        content: none;
    }
    /* 項目は灰色段の高さいっぱいを押せる範囲にする（文字の行だけでは押しづらいため） */
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band_list > li {
        height: 100%;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band_list a {
        color: #5e6261;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: min(11px, 2.8205vw);
        font-weight: 500;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band_label_pc {
        display: none;
    }
    body.nagomi_header_is_compact .nagomi_storefront_header .hdr_band_label_sp {
        display: inline;
    }
    body.nagomi_header_is_compact.nagomi_header_subnav_is_visible:not(.is_hamb_open) .nagomi_storefront_header .hdr_band {
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition-delay: 0s;
    }
    body.nagomi_header_is_compact.nagomi_header_subnav_is_visible:not(.is_hamb_open) .nagomi_storefront_header .hdr_search {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: transform .3s ease, opacity .1s linear .2s, visibility 0s linear .2s;
    }

    /* 初期同期中とドロワーを閉じた直後は、対象を現在位置へ即時に切り替える。 */
    body.nagomi_header_without_motion .nagomi_shipping_subscription_band,
    body.nagomi_header_without_motion .top_info,
    body.nagomi_header_without_motion header.nagomi_storefront_header,
    body.nagomi_header_without_motion .nagomi_storefront_header .hdr_band,
    body.nagomi_header_without_motion .nagomi_storefront_header .hdr_search,
    body.nagomi_header_subnav_without_motion .nagomi_storefront_header .hdr_band,
    body.nagomi_header_subnav_without_motion .nagomi_storefront_header .hdr_search {
        transition: none !important;
    }
}

@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .nagomi_shipping_subscription_band,
    .nagomi_storefront_frame .top_info,
    header.nagomi_storefront_header,
    .nagomi_storefront_header .hdr_band,
    .nagomi_storefront_header .hdr_search,
    .nagomi_shipping_subscription_band_shipping::after {
        transition: none !important;
    }
}

/* SPドロワーはハンバーガーと同じ左端から出し、閉じると左へ戻す（2026-10-13 奥田さんご指示）。
   開いた後の見た目（パネルの角丸など）は変えない。PC（769px以上）は三本線が右端なので従来どおり右から。 */
@media screen and (max-width: 768px) {
    #js-drawer {
        right: auto;
        left: -500px;
    }
    .is_hamb_open #js-drawer {
        right: auto;
        left: 0;
    }
}

/* 2026-10-13 修正R3: 769〜1400px の送料無料の帯は、切り替え表示にしても従来の高さ（約30px＝上下の線1px＋余白＋1行）を保つ。
   1401px以上の吹き出しは上の height:32px（従来の 2px枠＋5px余白＋1行と同じ）。 */
@media screen and (max-width: 1400px) {
    .hdr_free_shipping_notice {
        height: 30px;
    }
}

/* 769px以上のカット＆発送日は、前半と日付を横1行にする。
   1401px以上は既存の365×32px吹き出し内に収め、各文字は11px以上を保つ。 */
@media screen and (min-width: 769px) {
    .hdr_free_shipping_notice .nagomi_shipping_rotator_item._schedule {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        line-height: 1.2;
    }
    .hdr_free_shipping_notice .nagomi_shipping_schedule_lead {
        flex: 0 0 auto;
        font-size: 1.1rem;
        letter-spacing: -.01em;
    }
    .hdr_free_shipping_notice .nagomi_shipping_schedule_date {
        flex: 0 0 auto;
        font-size: 1.2rem;
        letter-spacing: -.01em;
    }
}

/* タブレットは受賞表示と配送表示を最上部の共通帯へ移す。
   黒帯下の旧・送料無料枠と、右下へぶら下がる受賞ティッカーは重複するためこの幅だけ隠す。 */
@media screen and (min-width: 769px) and (max-width: 1400px) {
    :root {
        --nagomi-shipping-subscription-band-height: 34px;
        --nagomi-ticker-height: 0px;
        --nagomi-ticker-above: 0;
        --nagomi-header-group-height: 138px;
    }
    .hdr_free_shipping_notice,
    body.nagomi_storefront_frame .js-ticker,
    .js-ticker {
        display: none !important;
    }
}