:root {
    --nagomi-shipping-subscription-band-height: 40px;
}

html.nagomi_shipping_subscription_band_is_hidden {
    --nagomi-shipping-subscription-band-height: 0px;
}

.nagomi_shipping_subscription_band {
    color: #d75b4c;
    width: 100%;
    height: var(--nagomi-shipping-subscription-band-height);
    background: #f7eaeb;
    border-top: solid 1px #d75b4c;
    border-bottom: solid 1px #d75b4c;
    font-family: YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "Hiragino Kaku Gothic ProN", "HiraKakuPro-W3", "メイリオ", Meiryo, Verdana, sans-serif;
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    overflow: hidden;
    position: relative;
    z-index: 19;
}
.nagomi_shipping_subscription_band,
.nagomi_shipping_subscription_band *,
.nagomi_shipping_subscription_band *::before,
.nagomi_shipping_subscription_band *::after {
    box-sizing: border-box;
}
html.nagomi_shipping_subscription_band_is_hidden .nagomi_shipping_subscription_band {
    display: none;
}
.nagomi_shipping_subscription_band_inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 52px 0 24px;
    position: relative;
}
.nagomi_shipping_subscription_band_content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.nagomi_shipping_subscription_band a {
    color: inherit;
    text-decoration: none;
}
.nagomi_shipping_subscription_band_shipping,
.nagomi_shipping_subscription_band_subscription {
    white-space: nowrap;
}
.nagomi_shipping_subscription_band_subscription {
    flex: 0 0 auto;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.nagomi_shipping_subscription_band_text_sp {
    display: none;
}
.nagomi_shipping_subscription_band_close {
    appearance: none;
    color: #d75b4c;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}
.nagomi_shipping_subscription_band_close:focus-visible {
    outline: solid 2px #d75b4c;
    outline-offset: -3px;
}

/* 最上部の帯・お知らせ帯(.top_info)・ヘッダー（黒帯）・受賞ティッカー(.js-ticker) は、
   スクロール時に同じ動きをする1つのグループとして扱う（バラバラに動かさない）。
   グループの高さ（＝隠すときに持ち上げる距離）は header_shipping_subscription_band.js が実測して
   --nagomi-header-group-height に書き込む。ここの値はJSが動く前／効かない場合のフォールバック
   （帯40px＋ヘッダー80px＋受賞ティッカー84px＝204px。1024px以下は帯60px、768px以下はヘッダー60px・ティッカー56px）。 */
:root {
    --nagomi-header-group-height: 204px;
}

.nagomi_storefront_frame {
    padding-top: calc(80px + var(--topinfo-height) + var(--nagomi-shipping-subscription-band-height));
}
.nagomi_storefront_frame .nagomi_shipping_subscription_band {
    position: fixed;
    top: 0;
    left: 0;
    transition: transform .5s;
}
.nagomi_storefront_frame .top_info {
    position: fixed;
    top: var(--nagomi-shipping-subscription-band-height);
    transition: transform .5s;
}
/* 黒帯は常に帯（＋お知らせ帯）のすぐ下で固定する。
   隠す/戻すアニメーションはグループ全員 transform だけで行うため、base.css の `transition: .5s`（全プロパティ）を
   transform 限定に上書きし、top はスクロール状態で切り替えない＝「片方だけ動く」瞬間を作らない。
   `body` を付けて詳細度を base.css の `._scroll header` / `.is_hamb_open header` と同じにし、後勝ちで揃える。 */
body.nagomi_storefront_frame .nagomi_storefront_header {
    top: calc(var(--topinfo-height) + var(--nagomi-shipping-subscription-band-height));
    transition: transform .5s;
}
/* 受賞ティッカーも黒帯の直下に固定して一緒に動かす。 */
body.nagomi_storefront_frame .js-ticker {
    position: fixed;
    top: calc(80px + var(--topinfo-height) + var(--nagomi-shipping-subscription-band-height));
    transition: transform .5s;
    pointer-events: auto;
}
.js-ticker[href],
.js-ticker[href]:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.js-ticker[href]:hover {
    color: inherit;
    text-decoration: none;
    opacity: 1;
}
/* 下スクロールで黒帯が隠れるときは、グループ全員を同じ距離・同じ時間で持ち上げる */
.nagomi_storefront_frame.nagomi_header_group_is_up .nagomi_shipping_subscription_band,
.nagomi_storefront_frame.nagomi_header_group_is_up .top_info,
.nagomi_storefront_frame.nagomi_header_group_is_up .nagomi_storefront_header,
.nagomi_storefront_frame.nagomi_header_group_is_up .js-ticker {
    transform: translateY(calc(-1 * var(--nagomi-header-group-height)));
}
/* メニュー（ハンバーガー）を開いている間はグループ全員を表示位置へ戻す（base.css の黒帯だけを動かす指定も打ち消す） */
body.nagomi_storefront_frame.is_hamb_open .nagomi_shipping_subscription_band,
body.nagomi_storefront_frame.is_hamb_open .top_info,
body.nagomi_storefront_frame.is_hamb_open .nagomi_storefront_header,
body.nagomi_storefront_frame.is_hamb_open .js-ticker {
    transform: none;
}
html.nagomi_shipping_subscription_band_is_closing .nagomi_storefront_header,
html.nagomi_shipping_subscription_band_is_closing .nagomi_shipping_subscription_band,
html.nagomi_shipping_subscription_band_is_closing .top_info,
html.nagomi_shipping_subscription_band_is_closing .js-ticker {
    transition: none;
}

@media screen and (max-width: 1024px) {
    :root {
        --nagomi-shipping-subscription-band-height: 60px;
        --nagomi-header-group-height: 224px;
    }
    html.nagomi_shipping_subscription_band_is_hidden {
        --nagomi-shipping-subscription-band-height: 0px;
    }
    .nagomi_shipping_subscription_band {
        font-size: clamp(8px, 2.5vw, 14px);
    }
    .nagomi_shipping_subscription_band_inner {
        padding: 5px 36px;
    }
    .nagomi_shipping_subscription_band_content {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        text-align: center;
    }
    .nagomi_shipping_subscription_band_text_pc {
        display: none;
    }
    .nagomi_shipping_subscription_band_text_sp {
        display: inline;
    }
    .nagomi_shipping_subscription_band_close {
        right: 2px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --nagomi-header-group-height: 176px;
    }
    .nagomi_storefront_frame {
        padding-top: calc(60px + var(--topinfo-height) + var(--nagomi-shipping-subscription-band-height));
    }
    body.nagomi_storefront_frame .js-ticker {
        top: calc(60px + var(--topinfo-height) + var(--nagomi-shipping-subscription-band-height));
    }
    /* SPのティッカーは base.css で translateX(-50%) による中央寄せがかかっているため、
       持ち上げるときも横位置を保つ */
    .nagomi_storefront_frame.nagomi_header_group_is_up .js-ticker {
        transform: translateX(-50%) translateY(calc(-1 * var(--nagomi-header-group-height)));
    }
    body.nagomi_storefront_frame.is_hamb_open .js-ticker {
        transform: translateX(-50%);
    }
}

/* 印刷時は固定表示をやめ、従来どおり文書の先頭に1度だけ出す（画面用の追従指定を確実に打ち消す） */
@media print {
    .nagomi_storefront_frame .nagomi_shipping_subscription_band,
    .nagomi_storefront_frame .top_info,
    .nagomi_storefront_frame .js-ticker {
        position: absolute !important;
    }
    .nagomi_storefront_frame .nagomi_shipping_subscription_band,
    .nagomi_storefront_frame .top_info,
    .nagomi_storefront_frame .js-ticker,
    .nagomi_storefront_frame .nagomi_storefront_header {
        transform: none !important;
    }
}
@media print and (max-width: 768px) {
    .nagomi_storefront_frame .js-ticker {
        transform: translateX(-50%) !important;
    }
}