/* =============================================================
   NAFCO RENEWAL 2026 — 共通スタイル（common.css）
   元データ: __tmpl/top/nafco_top.css（受領 2026-07-10）を common / top に2分割
   内容: デザイントークン・ユーティリティ・TopBar・Header・GlobalNav・
         セクション見出し/商品カード/商品棚（共通部品）・Footer・
         SPボトムナビ・カテゴリドロワー・SPレスポンシブ調整
   読み込み: 既存CSSの後・リニューアル対象ページのみ（site_frame.tpl の isRenewal 分岐）
   ============================================================= */

/* -------------------------------------------------------------
   リニューアルベース
   受領 index.html のスタンドアロン確認用リセット相当。
   本ファイルはリニューアル対象ページでしか読み込まれないため、
   スタンドアロン時と同じ詳細度（* や要素セレクタ）のまま適用する。
   ※ body.nf-renewal 等でスコープして詳細度を上げると、単一クラスの
     コンポーネント指定（.nf-xxx { padding: ... }）がリセットに負けて
     レイアウトが崩れるため、スコープしないこと。
------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body.nf-renewal {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    color: #222;
    background: #fff;
    line-height: 1.6;
}
a {
    color: #777;
    text-decoration: none;
}
img {
    display: block;
    max-width: 100%;
}
ul,
ol {
    list-style: none;
}
/* 旧CSS（import.css）のフレーム・コンテナ制約を解除（リニューアルページのみ） */
body.nf-renewal .frame_outer {
    text-align: left;
}
body.nf-renewal #container {
    max-width: none;
    padding: 0;
}
body.nf-renewal #main_column,
body.nf-renewal #main_column.colnum1 {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: none;
    background-color: #fff;
}
/* visually-hidden（アクセシビリティ） */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------
   CSS Variables (design.md §3 / §5 / §6 / §7)
------------------------------------------------------------- */
:root {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-text-primary: #222222;
    --color-text-secondary: #777777;
    /* 黒系UIパーツ（カートボタン・プルダウン▼・検索ボタン等）の地色。
       クライアントFB 2026-07-23「黒が少し濃い」→ ブラックに近いダークグレーへ */
    --color-ui-dark: #353536;
    --color-accent: #c9a227;
    --color-accent-dark: #b8911f;
    --color-border: #e6e6e6;
    --color-border-strong: #d8d8d8;
    --color-footer-bg: #2a2a2a;
    --color-footer-text: #ffffff;
    --color-link: #777777;
    --color-link-hover: #c9a227;
    --color-price: #222222;

    --font-base: "Noto Sans JP", sans-serif;
    --fw-heading: 600;
    --fw-body: 400;
    --fw-price: 700;

    --sp1: 4px;
    --sp2: 8px;
    --sp3: 12px;
    --sp4: 16px;
    --sp5: 20px;
    --sp6: 24px;
    --sp8: 32px;
    --sp10: 40px;
    --sp12: 48px;
    --sp14: 56px;
    --sp16: 64px;

    --r-xs: 4px;
    --r-s: 6px;
    --r-m: 8px;
    --r-pill: 9999px;

    --bd: 1px solid #e6e6e6;
    --bd-strong: 1px solid #d8d8d8;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    --w-container: 1248px;
    --gutter: 24px;
}

/* -------------------------------------------------------------
   ユーティリティ
------------------------------------------------------------- */
.nf-container {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* -------------------------------------------------------------
   01  TopBar
------------------------------------------------------------- */
.nf-topbar {
    background: var(--color-bg-secondary);
    /* removed:   border-bottom: var(--bd); */
    font-size: 11px;
    color: var(--color-text-secondary);
    font-family: var(--font-base);
}
.nf-topbar__inner {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 5px var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--sp6);
}
.nf-topbar__item {
    display: flex;
    align-items: center;
    gap: var(--sp1);
    white-space: nowrap;
}
.nf-topbar__item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.nf-topbar__store {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp2);
    font-size: 12px;
}
.nf-topbar__store-link {
    color: var(--color-accent);
    font-weight: var(--fw-heading);
    text-decoration: none;
}
.nf-topbar__store-link:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------
   02  Header
------------------------------------------------------------- */
.nf-header {
    background: var(--color-bg-primary);
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow:
        0 1px 0 var(--color-border),
        var(--shadow);
    font-family: var(--font-base);
}
.nf-header__inner {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp5);
}

/* Logo */
.nf-logo {
    width: 180px;
    flex-shrink: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--sp2);
}
.nf-logo__mark {
    width: 36px;
    height: 36px;
    background: var(--color-accent);
    border-radius: var(--r-s);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nf-logo__mark svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}
.nf-logo__text {
    line-height: 1.15;
}
.nf-logo__name {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.06em;
}
.nf-logo__sub {
    display: block;
    font-size: 8.5px;
    color: var(--color-text-secondary);
    letter-spacing: 0.06em;
}

/* Search */
.nf-search {
    flex: 1;
    max-width: 560px;
    display: flex;
    height: 40px;
}
.nf-search__cat {
    height: 40px;
    width: 150px;   /* 固定幅。select の内在幅は最長optionやページ文脈(フォント)で変わり
                       ヘッダがページ毎に変わってしまうため明示。全ページで同一レイアウトにする */
    flex-shrink: 0; /* カテゴリ選択も固定。縮むのは中央の入力欄(flex:1)のみ */
    padding: 0 var(--sp3);
    border: var(--bd-strong);
    border-right: none;
    border-radius: var(--r-m) 0 0 var(--r-m);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-family: var(--font-base);
    cursor: pointer;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
.nf-search__input {
    flex: 1;
    min-width: 0; /* flexの min-width:auto(内容幅) を解除。縮むのはこの入力欄だけにし、
                     カテゴリ選択・検索ボタンを潰さない（レガシーガードページ対策） */
    height: 40px;
    border: var(--bd-strong);
    border-right: none;
    padding: 0 var(--sp4);
    font-size: 13px;
    font-family: var(--font-base);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    outline: none;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.nf-search__input:focus {
    background: #fff;
    border-color: var(--color-accent);
}
.nf-search__btn {
    width: 44px;
    height: 40px;
    flex-shrink: 0; /* 固定幅の検索ボタン。レガシーガードページ等でflex縮小させない */
    background: var(--color-accent);
    border: none;
    border-radius: 0 var(--r-m) var(--r-m) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.15s;
}
.nf-search__btn:hover {
    background: var(--color-accent-dark);
}
.nf-search__btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Utilities */
.nf-header__utils {
    display: flex;
    align-items: center;
    gap: var(--sp1);
    margin-left: auto;
}
.nf-util {
    width: 52px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    border-radius: var(--r-xs);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background 0.15s;
    position: relative;
}
.nf-util:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}
.nf-util__icon {
    position: relative;
    line-height: 1;
}
.nf-util__icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}
.nf-util__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e03;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.nf-util__label {
    font-size: 10px;
    color: var(--color-text-secondary);
    font-family: var(--font-base);
    /* PCは「マイ<br>ページ」等の2行をセンター合わせ（改善メモ 2026-07-22。
       改行 .nf-util__br はSPで非表示＝下のSPメディアクエリ参照） */
    text-align: center;
    line-height: 1.3;
}
/* 会員名（ログイン時のみ出力。中身は旧 common.js の header_info Ajax が
   「姓<br>名 様」の2行で注入） */
.nf-util-name {
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text-primary);
    /* 検索窓と領域を奪い合うため幅を制限。改行は <br> のみで、
       長い姓・名は nowrap＋ellipsis により各行末尾で省略表示 */
    max-width: 10em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: var(--sp1);
}
/* Ajax注入前・未取得時は場所を取らない */
.nf-util-name:empty {
    display: none;
}
@media (max-width: 767px) {
    .nf-util-name {
        font-size: 10px;
        max-width: 6em;
        margin-right: 0;
    }
}

/* 棚・バナースライダーのPCマウスドラッグ（common.js）: 掴めることを示すカーソル */
@media (hover: hover) and (pointer: fine) {
    .nf-shelf__list,
    .nf-bslider__track {
        cursor: grab;
    }
}

/* Store bar (header 下部) */
.nf-storebar {
    background: var(--color-bg-primary);
    /* removed:   border-bottom: var(--bd); */
    font-size: 12px;
    font-family: var(--font-base);
}
.nf-storebar__inner {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 6px var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--sp2);
    color: var(--color-text-secondary);
}
.nf-storebar__icon {
    font-size: 14px;
}
.nf-storebar__name {
    color: var(--color-text-primary);
    font-weight: var(--fw-heading);
}
.nf-storebar__change {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 11px;
}
.nf-storebar__change:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------
   03  GlobalNav
------------------------------------------------------------- */
.nf-globalnav {
    background: var(--color-bg-primary);
    /* removed:   border-bottom: var(--bd); */
    height: 46px;
    font-family: var(--font-base);
}
.nf-globalnav__inner {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 100%;
    display: flex;
    align-items: center;
}
.nf-globalnav__list {
    display: flex;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: space-between;
}
.nf-globalnav__item {
    flex: 1;
    display: flex;
}
.nf-globalnav__item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 13px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition:
        color 0.15s,
        border-color 0.15s;
}
.nf-globalnav__item > a:hover,
.nf-globalnav__item--active > a {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* InfoBar (お知らせ) */
.nf-infobar {
    font-size: 12px;
    font-family: var(--font-base);
    color: var(--color-text-secondary);
}
.nf-infobar__inner {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 6px var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--sp3);
}
.nf-infobar__tag {
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    flex-shrink: 0;
}
.nf-infobar__date {
    color: var(--color-accent);
    font-weight: var(--fw-heading);
}
.nf-infobar__more {
    margin-left: auto;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
    font-size: 11px;
}
.nf-infobar__more:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------
   Section Header (共通)
------------------------------------------------------------- */
.nf-sec-hd {
    display: flex;
    align-items: center;
    height: 44px;
    gap: var(--sp2);
    margin-bottom: var(--sp4);
    font-family: var(--font-base);
}
.nf-sec-hd__icon {
    font-size: 18px;
    line-height: 1;
    color: var(--color-accent);
    flex-shrink: 0;
    /* imgタグの場合 */
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.nf-sec-hd__title {
    font-size: 18px;
    font-weight: var(--fw-heading);
    color: var(--color-text-primary);
    line-height: 27px;
}
.nf-sec-hd__more {
    margin-left: var(--sp4); /* タイトル直後に配置 */
    font-size: 12px;
    color: var(--color-text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.nf-sec-hd__more:hover {
    color: var(--color-accent);
}

/* -------------------------------------------------------------
   Product Card (共通)
------------------------------------------------------------- */
.nf-card {
    width: 192px; /* 6item PSD幅 */
    min-height: 253px;
    border: var(--bd);
    border-radius: var(--r-xs);
    background: var(--color-bg-primary);
    padding: var(--sp2);
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font-base);
    transition: box-shadow 0.15s;
    text-decoration: none;
    color: var(--color-text-primary);
}
.nf-card:hover {
    box-shadow: var(--shadow);
    color: var(--color-text-primary);
}
.nf-card__thumb {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    border-radius: var(--r-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-text-secondary);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.nf-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nf-card__fav {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--color-border-strong);
    cursor: pointer;
    z-index: 2;
    transition: color 0.15s;
}
.nf-card__fav:hover {
    color: #e05;
}
.nf-card__rank {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: var(--r-pill);
    background: var(--color-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    line-height: 1;
}
.nf-card__name {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nf-card__price {
    font-size: 18px;
    font-weight: var(--fw-price);
    color: var(--color-price);
    line-height: 24px;
    margin-top: auto;
    text-align: right;
}
.nf-card__price-unit {
    font-size: 12px;
    font-weight: var(--fw-body);
}

/* -------------------------------------------------------------
   Product Shelf (共通)
------------------------------------------------------------- */
.nf-shelf {
    padding: var(--sp8) 0;
    /* removed:   border-bottom: var(--bd); */
}
.nf-shelf__scroll {
    position: relative;
    padding: 0 var(--sp6);
}
.nf-shelf__list {
    display: flex;
    gap: var(--sp3);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: var(--sp2);
}
.nf-shelf__list::-webkit-scrollbar {
    display: none;
}
.nf-shelf__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    z-index: 5;
    padding: 0;
    transition: opacity 0.15s;
}
.nf-shelf__arrow img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}
.nf-shelf__arrow:hover {
    opacity: 0.7;
}
.nf-shelf__arrow--prev {
    left: -4px;
}
.nf-shelf__arrow--next {
    right: -4px;
}

/* -------------------------------------------------------------
   Footer Info (お支払い・お届け・送料) アコーディオン
------------------------------------------------------------- */
.nf-finfo {
    background: var(--color-bg-secondary);
    /* removed:   border-top: var(--bd); */
    /* removed:   border-bottom: var(--bd); */
    font-family: var(--font-base);
    margin-top: 20px;
}
.nf-finfo__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp8);
    padding: var(--sp10) 0;
}
/* PC: accordion trigger style overridden to look static */
.nf-finfo__trigger {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 15px;
    font-weight: var(--fw-heading);
    padding-bottom: var(--sp3);
    border-bottom: 2px solid var(--color-accent);
    margin-bottom: var(--sp4);
    cursor: default;
}
.nf-finfo__trigger-arrow {
    display: none;
} /* PC では矢印非表示 */
.nf-finfo__body {
    font-size: 12px;
    line-height: 20px;
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------
   16  Footer Global
------------------------------------------------------------- */
.nf-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: var(--sp14) 0 var(--sp8);
    font-family: var(--font-base);
}
.nf-footer__top {
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    gap: var(--sp8);
    padding-bottom: var(--sp10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Footer logo */
.nf-footer__logo {
    margin-bottom: var(--sp4);
}
.nf-footer__logo-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.06em;
    display: block;
    line-height: 1.1;
}
.nf-footer__logo-sub {
    font-size: 8.5px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.06em;
    display: block;
    margin-top: 3px;
}
.nf-footer__tagline {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.75;
}

/* Footer nav */
.nf-footer__nav-title {
    font-size: 12px;
    font-weight: var(--fw-heading);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--sp3);
    padding-bottom: var(--sp2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nf-footer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
}
.nf-footer__nav-list a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.15s;
}
.nf-footer__nav-list a:hover {
    color: var(--color-accent);
}

/* Footer bottom */
.nf-footer__bottom {
    padding-top: var(--sp8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp4);
}
.nf-footer__corp {
    display: inline-flex;
    align-items: center;
    gap: var(--sp2);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-m);
    padding: 8px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-decoration: none;
    transition:
        border-color 0.15s,
        color 0.15s;
}
.nf-footer__corp:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.nf-footer__corp-logo {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 13px;
}
.nf-footer__copy {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
}

/* =============================================================
   PATCH: PSD実画像適用（2026-06-29）
============================================================= */

/* ロゴ（imgタグに変更） */
.nf-logo img {
    display: block;
    max-width: 144px;
    height: auto;
}

/* カテゴリアイコン（imgタグに変更） */
/* nf-qcat__icon: 本体CSSで直接imgサイズ指定済み */

/* ヘッダーユーティリティアイコン */
.nf-util__icon img {
    display: block;
}

/* 商品カードサムネイル（imgタグに変更） */
.nf-card__thumb {
    position: relative;
    background: var(--color-bg-secondary);
}

/* バナー：画像+テキストオーバーレイ構造 */
.nf-hbanner {
    position: relative;
    padding: 0;
}
.nf-hbanner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: var(--r-m);
}
.nf-hbanner__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: var(--sp5);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        transparent 60%
    );
    border-radius: var(--r-m);
}
.nf-hbanner__body .nf-hbanner__tag {
    color: rgba(255, 255, 255, 0.85);
}
.nf-hbanner__body .nf-hbanner__title {
    color: #fff;
}
.nf-hbanner__body .nf-hbanner__desc {
    color: rgba(255, 255, 255, 0.8);
}

/* フッターロゴ（imgタグに変更） */
.nf-footer__logo img {
    display: block;
    max-width: 144px;
    height: auto;
}

/* ストアバーの位置アイコン */
.nf-storebar__inner img {
    vertical-align: middle;
    margin-right: 4px;
}

/* 検索ボタン内のimgサイズ調整 */
.nf-search__btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* =============================================================
   PATCH: ロゴテキスト画像 / お知らせティッカー（2026-06-29）
============================================================= */

/* ---- ロゴ ---- */
.nf-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    width: auto; /* 旧定義の width:180px を上書き */
}
.nf-logo img {
    display: block;
}
.nf-logo__text-img {
    /* "NAFCO ONLINE STORE / ナフコオンラインストア" 画像 */
    height: 32px;
    width: auto;
}

/* ---- お知らせバー ---- */
/* ---- お知らせバー：コンテンツ幅に合わせる ---- */
.nf-infobar {
    background: rgba(201, 162, 39, 0.18);
}
.nf-infobar__inner {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 var(--sp4);
    height: 40px;
    display: flex;
    align-items: center;
    gap: 0;
}

/* ラベル（アイコン+おしらせ） */
.nf-infobar__label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-right: var(--sp4);
    margin-right: var(--sp4);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.nf-infobar__label img {
    flex-shrink: 0;
}

/* ---- ティッカー（左スライド） ---- */
.nf-infobar__ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 40px;
    position: relative;
}
.nf-infobar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 40px;
}
.nf-infobar__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(40px);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}
/* 入場：右から左へスライドイン */
@keyframes nfTickerIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* 退場：左へスライドアウト */
@keyframes nfTickerOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-40px);
    }
}
.nf-infobar__item--active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    animation: nfTickerIn 0.4s ease forwards;
}
.nf-infobar__item--exit {
    animation: nfTickerOut 0.4s ease forwards;
    pointer-events: none;
}
.nf-infobar__item a {
    color: var(--color-text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nf-infobar__item a:hover {
    text-decoration: underline;
    color: var(--color-accent);
}

/* =============================================================
   8item棚バリアント（人気商品・新商品）枠線なし・163px幅
============================================================= */
.nf-shelf--wide .nf-card {
    width: 163px;
    min-height: 224px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: var(--sp1) var(--sp2);
}
.nf-shelf--wide .nf-card:hover {
    box-shadow: none;
}
.nf-shelf--wide .nf-shelf__list {
    gap: 0;
}

.nf-promo__band {
    display: block;
    height: auto;
    background: none;
    border: none;
    padding: 0;
    border-radius: var(--r-m);
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.15s;
    text-align: center; /* 画像を中央寄せ */
}
.nf-promo__band:hover {
    opacity: 0.92;
}
.nf-promo__band img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Hero: 幅制御 (スライダー全体1440px / 画像1248px) ─────────── */
.nf-hero {
    background: rgba(201, 162, 39, 0.18);
    padding: 0;
    position: static;
}
.nf-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}
.nf-hero__track {
    max-width: 1248px;
    margin: 0 auto;
    overflow: hidden;
    line-height: 0;
}
.nf-hero__img {
    width: 100%;
    height: auto;
    display: block;
}
/* 矢印は1440px内側の両端（1248px画像の左右96px余白中央に配置） */
.nf-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: opacity 0.15s;
}
.nf-hero__arrow img {
    width: 40px;
    height: 40px;
    display: block;
}
.nf-hero__arrow:hover {
    opacity: 0.7;
}
.nf-hero__arrow--prev {
    left: 76px;
}
.nf-hero__arrow--next {
    right: 76px;
}

/* ── Hero: 背景1440px・矢印をtrack基準に ─────────────────────── */
.nf-hero {
    background: none;
    padding: 0;
}
.nf-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    background: rgba(201, 162, 39, 0.18);
}
.nf-hero__track {
    max-width: 1248px;
    margin: 0 auto;
    overflow: hidden;
    line-height: 0;
    position: relative;
}
.nf-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: opacity 0.15s;
}
.nf-hero__arrow img {
    width: 40px;
    height: 40px;
    display: block;
}
.nf-hero__arrow:hover {
    opacity: 0.7;
}
.nf-hero__arrow--prev {
    left: 16px;
}
.nf-hero__arrow--next {
    right: 16px;
}
/* ドット非表示 */
.nf-hero__dots {
    display: none;
}

/* ── Hero: 矢印を画像の左右外側（inner内の余白中央）に配置 ─── */
.nf-hero {
    background: none;
    padding: 0;
}
.nf-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    background: rgba(201, 162, 39, 0.18);
    position: relative;
    display: flex;
    align-items: center;
}
.nf-hero__track {
    width: 1248px;
    flex-shrink: 0;
    margin: 0 auto;
    overflow: hidden;
    line-height: 0;
}
.nf-hero__img {
    width: 100%;
    height: auto;
    display: block;
}
.nf-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.nf-hero__arrow img {
    width: 40px;
    height: 40px;
    display: block;
}
.nf-hero__arrow:hover {
    opacity: 0.7;
}
/* 余白96px中央 = (96-40)/2 = 28px */
.nf-hero__arrow--prev {
    left: 28px;
}
.nf-hero__arrow--next {
    right: 28px;
}
.nf-hero__dots {
    display: none;
}

/* ── 検索ボタン: 背景ui-dark・虫眼鏡アウトライン ───────────── */
.nf-search__btn {
    background: var(--color-ui-dark);
}
.nf-search__btn:hover {
    background: #444444;
}
.nf-search__btn svg {
    fill: none;
    stroke: #fff;
}

/* ── 1. Shelf矢印: 1248pxすぐ外側 ─────────────────────────── */
.nf-shelf__scroll {
    padding: 0;
    overflow: visible;
}
.nf-shelf__arrow--prev {
    left: calc(-1 * var(--gutter) - 4px);
}
.nf-shelf__arrow--next {
    right: calc(-1 * var(--gutter) - 4px);
}

/* ── 2. もっと見る色 ──────────────────────────────────────── */
.nf-sec-hd__more {
    color: #c39e29 !important;
    text-decoration: none;
}
.nf-sec-hd__more:hover {
    text-decoration: underline;
}

/* ── 3. ダブルバナー セクションヘッダー ───────────────────── */
.nf-dbanner .nf-sec-hd {
    margin-bottom: var(--sp4);
}

/* ── 7. ランキング カテゴリ選択 ───────────────────────────── */
.nf-ranking-select {
    margin-left: var(--sp3);
    height: 28px;
    padding: 0 var(--sp2);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xs);
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    color: var(--color-text-primary);
}

/* ── Shelf矢印: container(1248px)の外側に flex で配置 ────────
   scroll を -64px ずつ広げ、arrow(40px)を container 境界の外へ
   ────────────────────────────────────────────────────────── */
.nf-shelf__scroll {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    overflow: visible;
    /* 40px(arrow幅) + 24px(gutter) = 64px ずつ外へ */
    margin: 0 calc(-40px - var(--gutter));
    position: static;
}
.nf-shelf__list {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: var(--sp2);
}
.nf-shelf__list::-webkit-scrollbar {
    display: none;
}
/* arrow を static flex-item に戻す */
.nf-shelf__arrow {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s;
}
.nf-shelf__arrow:hover {
    opacity: 0.7;
}
.nf-shelf__arrow img {
    width: 30px;
    height: 30px;
    display: block;
}

/* ── Shelf: カード中央揃え ─────────────────────────────────── */
.nf-shelf__list {
    justify-content: center;
}

/* ── Shelf: 中央揃え取り消し（左端切れ防止） ─────────────── */
.nf-shelf__list {
    justify-content: flex-start;
}

/* ── 6-item Card: コンテンツ190×250px（padding: 8px込みで206×266px） */
.nf-card {
    width: 206px;
    min-height: 266px;
}

/* ── 6-item Card: 190×250px（padding込み） ─────────────────── */
.nf-card {
    width: 190px;
    min-height: 250px;
}

/* ── Shelf list: 1200px 中央寄せ ───────────────────────────── */
.nf-shelf__list {
    flex: none;
    width: 1200px;
    margin: 0 auto;
}

/* ── Shelf list: 1200px 中央寄せ（scroll維持） ─────────────── */
.nf-shelf__list {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    justify-content: flex-start;
}

/* ── nf-finfo: PSD準拠（#2a2a2a背景・白テキスト） ──────────── */
.nf-finfo {
    background: #2a2a2a;
}
.nf-finfo__title {
    font-size: 15px;
    font-weight: var(--fw-heading);
    color: #fff;
    padding-bottom: var(--sp3);
    border-bottom: 2px solid var(--color-accent);
    margin-bottom: var(--sp4);
}
.nf-finfo__body {
    font-size: 12px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.75);
}
.nf-finfo__body p {
    margin-bottom: var(--sp3);
}

/* ── nf-finfo: テキストスタイル修正 ───────────────────────── */
.nf-finfo__title {
    font-size: 32px;
    border-bottom: none;
    margin-bottom: var(--sp4);
}
.nf-finfo__body {
    font-size: 14px;
    line-height: 1.7em;
}
.nf-finfo__col {
    display: flex;
    flex-direction: column;
}
.nf-finfo__body {
    flex: 1;
}

/* ── nf-finfo: テキスト色 #ffffff ──────────────────────────── */
.nf-finfo__body {
    color: #ffffff;
}

/* ── nf-footer: PSD準拠 ────────────────────────────────────── */
.nf-footer {
    background: #2a2a2a;
    font-family: var(--font-base);
}

.nf-footer__main {
    border-top: 1px solid #e6e6e6;
    padding: var(--sp10) 0;
}
.nf-footer__top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp8);
    align-items: start;
    border: none;
    padding: 0;
}

/* ロゴ + コーポレートボタン */
.nf-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--sp6);
}
.nf-footer__logo img {
    height: 42px;
    width: auto;
    display: block;
}
.nf-footer__corp-btn img {
    height: 43px;
    width: auto;
    display: block;
}

/* ナビリスト */
.nf-footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}
.nf-footer__nav-list a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.6;
}
.nf-footer__nav-list a:hover {
    text-decoration: underline;
}

/* コピーライトバー */
.nf-footer__copy-bar {
    background: var(--color-accent);
    padding: 10px 0;
    text-align: center;
}
.nf-footer__copy {
    color: #fff;
    font-size: 12px;
    margin: 0;
}

/* ── nf-footer: 全上書き ───────────────────────────────────── */
.nf-footer {
    background: #2a2a2a;
    font-family: var(--font-base);
    padding: 0;
}
.nf-footer__main {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: var(--sp10) 0;
}
.nf-footer__top {
    display: grid;
    grid-template-columns: 4fr 4fr 3fr;
    gap: var(--sp8);
    align-items: start;
    padding: 0;
    border: none;
}

/* ロゴエリア */
.nf-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--sp6);
}
.nf-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--sp3);
}
.nf-footer__logo img {
    display: block;
    flex-shrink: 0;
}
.nf-footer__logo-text {
    display: block;
}
.nf-footer__logo-text img {
    display: block;
}
.nf-footer__corp-btn {
    display: inline-block;
}
.nf-footer__corp-btn img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ナビ */
.nf-footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}
.nf-footer__nav-list a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.6;
}
.nf-footer__nav-list a:hover {
    text-decoration: underline;
}

/* コピーライトバー */
.nf-footer__copy-bar {
    background: #c39e29;
    padding: 10px 0;
    text-align: center;
}
.nf-footer__copy {
    color: #fff;
    font-size: 12px;
    margin: 0;
}

/* ── nf-footer: ロゴアスペクト比修正 + ボーダー1440px ─────────── */
/* ロゴmark は 144×42、text は 175×33 — 個別に指定 */
.nf-footer__logo > img {
    height: 42px;
    width: auto;
}
.nf-footer__logo-text img {
    height: 33px;
    width: auto;
}
/* フッター上部の白線を1440px幅に */
.nf-footer__main {
    max-width: 1440px;
    margin: 0 auto;
}

/* ── nf-footer: ボーダー色修正 (#e6e6e6 不透過) ─────────────── */
.nf-footer__main {
    border-top: 1px solid #e6e6e6;
}

/* ── nf-qcat: アイコン26px・エリア1248px ──────────────────────── */
.nf-qcat .nf-container {
    max-width: 1248px;
}
.nf-qcat__icon {
    width: 26px;
    height: auto;
}

/* ── nf-qcat: サイドパディングなし ───────────────────────────── */
.nf-qcat .nf-container {
    padding-left: 0;
    padding-right: 0;
}

/* ── nf-qcat: アイコン縦横最大26px ───────────────────────────── */
.nf-qcat__icon {
    width: auto;
    height: auto;
    max-width: 26px;
    max-height: 26px;
}

/* ── nf-topbar: アイテムをロゴ左端〜検索窓右端まで均等配置 ───── */
.nf-topbar__inner {
    justify-content: space-between;
    gap: 0;
}

/* ── nf-topbar: ヘッダーと同一幅・同一padding に揃える ────────── */
.nf-topbar__inner {
    max-width: var(--w-container);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    justify-content: space-between;
    gap: 0;
}

/* ── nf-topbar: 900px幅で均等配置 ────────────────────────────── */
.nf-topbar__inner {
    max-width: 900px;
    margin-left: 0;
}

/* ── nf-topbar: 1248px内で900px左寄せ ───────────────────────── */
.nf-topbar__inner {
    max-width: var(--w-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.nf-topbar__inner {
    justify-content: flex-start;
    gap: 0;
}
.nf-topbar__item {
    flex: 0 0 calc(900px / 3);
}

/* ── nf-topbar: 900px中央寄せ ────────────────────────────────── */
.nf-topbar__inner {
    justify-content: center;
}
.nf-topbar__item {
    flex: 0 0 300px;
}

/* ── nf-topbar: サービス3項目を実幅＋均等gapでセンター配置 ──────
   （改善メモ 2026-07-22: バランス調整。300px固定枠だと各項目の
     テキストが枠内左寄りになり全体が左に寄って見えるため） */
.nf-topbar__inner {
    justify-content: center;
    gap: 48px;
}
.nf-topbar__item {
    flex: 0 0 auto;
}

/* ── PC固定幅: 1248px未満は横スクロール ───────────────────────── */
body {
    min-width: 1248px;
}

/* ── PC固定幅: 1440px未満は横スクロール ───────────────────────── */
body {
    min-width: 1440px;
}

/* =============================================================
   SP レスポンシブ  @media (max-width: 767px)
============================================================= */
@media (max-width: 767px) {
    /* ─ リセット ─────────────────────────────────────────────── */
    body {
        min-width: 0;
    }

    /* ─ nf-topbar → SP横スクロールサービスバー ────────────────── */
    .nf-topbar {
        overflow: hidden;
    }
    .nf-topbar__inner {
        max-width: none;
        width: max-content;
        padding: 6px 16px;
        gap: 0;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nf-topbar__inner::-webkit-scrollbar {
        display: none;
    }
    .nf-topbar__item {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 11px;
        padding: 0 20px 0 0;
    }
    .nf-topbar__item:last-child {
        padding-right: 16px;
    }

    /* ─ nf-header ────────────────────────────────────────────── */
    .nf-header {
        height: 56px;
        position: sticky;
        top: 0;
        z-index: 200;
    }
    .nf-header__inner {
        max-width: none;
        padding: 0 16px;
        gap: 12px;
    }

    /* ─ ロゴ ─────────────────────────────────────────────────── */
    .nf-logo {
        width: auto;
        flex-shrink: 0;
    }
    .nf-logo > img:first-child {
        width: 36px;
        height: auto;
    }
    .nf-logo__text-img {
        width: 88px;
        height: auto;
    }

    /* ─ 検索バーを非表示（ボトムナビの検索に移動） ──────────── */
    .nf-search {
        display: none;
    }

    /* ─ ユーティリティアイコン ───────────────────────────────── */
    .nf-header__utils {
        margin-left: auto;
        gap: 12px;
    }
    .nf-util__label {
        display: none;
    }
    .nf-util__icon img {
        width: 24px;
        height: 24px;
    }

    /* ─ お気に入り店舗バー ───────────────────────────────────── */
    .nf-storebar__inner {
        padding: 6px 16px;
        font-size: 12px;
    }

    /* ─ ボトムナビ（固定） ───────────────────────────────────── */
    .nf-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 300;
        background: #fff;
        border-top: 1px solid #e6e6e6;
        height: 56px;
    }
    .nf-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #333;
        font-size: 10px;
        font-family: var(--font-base);
    }
    .nf-bottom-nav__item img {
        width: 22px;
        height: 22px;
    }
    .nf-bottom-nav__item--active {
        color: var(--color-accent);
    }
    body {
        padding-bottom: 56px;
    }
}

/* ─ ボトムナビはPCで非表示 ────────────────────────────────── */
.nf-bottom-nav {
    display: none;
}

/* =============================================================
   SP: カテゴリグリッド・各セクションのはみ出し修正
============================================================= */
@media (max-width: 767px) {
    /* コンテナ幅リセット */
    .nf-container {
        max-width: 100%;
        padding: 0 16px;
    }
    .nf-qcat .nf-container {
        padding: 0;
    }

    /* カテゴリ: 4列グリッド */
    .nf-qcat__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .nf-qcat__item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 4px;
        text-align: center;
    }
    .nf-qcat__label {
        font-size: 10px;
        text-align: center;
    }

    /* shelf: はみ出し防止 */
    .nf-shelf__scroll {
        margin: 0 !important;
        padding: 0 16px;
        overflow-x: auto;
    }
    .nf-shelf__list {
        max-width: none;
        width: max-content;
    }
    .nf-shelf__arrow {
        display: none;
    }

    /* 各セクションの幅 */
    .nf-section {
        overflow: hidden;
    }
    .nf-shelf__wrap {
        overflow: hidden;
    }
}

/* =============================================================
   SP: グローバルナビ非表示
============================================================= */
@media (max-width: 767px) {
    .nf-globalnav {
        display: none;
    }
}

/* =============================================================
   SP: ヘッダーのお気に入りボタン非表示
============================================================= */
@media (max-width: 767px) {
    .nf-util--fav {
        display: none;
    }
}

/* =============================================================
   SP: はみ出し修正（hero・shelf・footer）
============================================================= */
@media (max-width: 767px) {
    /* hero track: 固定幅を解除 */
    .nf-hero__inner {
        display: block;
    }
    .nf-hero__track {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* shelf: 負マージン・固定幅を解除 */
    .nf-shelf__scroll {
        margin: 0 !important;
        padding: 0 16px !important;
        overflow-x: auto;
        display: block;
    }
    .nf-shelf__list {
        width: max-content !important;
        max-width: none !important;
        flex: none !important;
        display: flex;
    }

    /* finfo: 1カラム */
    .nf-finfo__grid,
    .nf-finfo .nf-finfo__inner {
        display: block;
    }

    /* footer: grid → block */
    .nf-footer__top {
        display: block;
    }
    .nf-footer__main {
        max-width: 100%;
    }
    .nf-footer__brand {
        margin-bottom: 24px;
    }
    .nf-footer__nav-list {
        margin-bottom: 16px;
    }
}

/* =============================================================
   PC・SP共通: ヘッダーアイコンのテキストラベル表示
============================================================= */
@media (max-width: 767px) {
    .nf-util__label {
        display: block;
        font-size: 9px;
    }
    .nf-util {
        width: auto;
        min-width: 44px;
        height: 56px;
    }
    /* SPはラベルを改行せず1行のまま、ボタン間隔を広げて対処
       （改善メモ 2026-07-22。gap は .nf-header__utils のSP指定を拡大） */
    .nf-util__br {
        display: none;
    }
    .nf-header__utils {
        gap: 16px;
    }
}

/* =============================================================
   PC・SP: ヘッダーアイコン画像アスペクト比修正
============================================================= */
.nf-util__icon img {
    display: block;
    width: auto;
    height: 24px;
}

@media (max-width: 767px) {
    .nf-util__icon img {
        height: 22px;
        width: auto;
    }
}

/* =============================================================
   SP: ロゴサイズ修正（PSD実測 mark=72px text=87px）
============================================================= */
@media (max-width: 767px) {
    .nf-logo > img:first-child {
        width: 72px;
        height: auto;
    }
    .nf-logo__text-img {
        width: 87px;
        height: auto;
    }
}

/* =============================================================
   SP: ヘッダーアイコンサイズ修正（PSD実測 ~16px）
============================================================= */
@media (max-width: 767px) {
    .nf-util__icon img {
        height: 16px;
        width: auto;
    }
}

/* =============================================================
   SP: ヘッダーパディング調整（左16px 右14px）
============================================================= */
@media (max-width: 767px) {
    .nf-header__inner {
        padding-left: 16px;
        padding-right: 14px;
    }
}

/* =============================================================
   SP: ヘッダー右パディング 10px
============================================================= */
@media (max-width: 767px) {
    .nf-header__inner {
        padding-right: 10px;
    }
}

/* =============================================================
   SP: ヘッダーアイコン間gap（PSD実測 ~20px）
============================================================= */
@media (max-width: 767px) {
    .nf-header__utils {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .nf-header__utils {
        gap: 10px;
    }
}

/* =============================================================
   SP: ボトムナビ表示修正
============================================================= */
@media (max-width: 767px) {
    .nf-bottom-nav {
        display: flex;
    }
}

/* =============================================================
   SP: ボトムナビアイコン アスペクト比修正
============================================================= */
@media (max-width: 767px) {
    .nf-bottom-nav__item img {
        width: auto;
        height: 21px;
    }
}

/* =============================================================
   SP: 検索オーバーレイ（ボトムナビの検索ボタンで開閉）
   renewal2026_19_sp_bottomnav.tpl ＋ common.js（nfOpenSearchOverlay ほか）。
   検索バーはキーボード表示時に common.js が bottom を持ち上げて追随させる
   （クライアントFB 2026-07-23 添付イメージ準拠）。
   z-index はドロワー（500/600）より上・カートトースト（1100）より下。
============================================================= */
.nf-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 700;
}
.nf-search-overlay--open {
    display: block;
}
.nf-search-overlay__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}
.nf-search-overlay__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* キーボード表示中は common.js が隠れ量ぶん上げる */
    display: flex;
    align-items: center;
    margin: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 0 6px 0 20px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: bottom 0.15s ease-out;
}
.nf-search-overlay__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: none;
    background: transparent;
    /* 16px未満だと iOS がフォーカス時に画面ズームするため 16px 固定 */
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.nf-search-overlay__btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.nf-search-overlay__btn svg {
    width: 20px;
    height: 20px;
}

/* =============================================================
   SP: カテゴリドロワー
============================================================= */
.nf-cat-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 400;
}
.nf-cat-overlay--open {
    display: block;
}

.nf-cat-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: #fff;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 75vh;
    padding-bottom: 56px; /* ボトムナビ分 */
}
.nf-cat-drawer--open {
    transform: translateY(0);
}

.nf-cat-drawer__handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.nf-cat-drawer__bar {
    width: 36px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    display: block;
}

.nf-cat-drawer__header {
    font-size: 14px;
    font-weight: bold;
    padding: 0 16px 10px;
    border-bottom: 1px solid #e6e6e6;
    flex-shrink: 0;
    font-family: var(--font-base);
}

.nf-cat-drawer__scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.nf-cat-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nf-cat-drawer__item {
    border-bottom: 1px solid #f0f0f0;
}
.nf-cat-drawer__major {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: none;
    border: none;
    font-size: 14px;
    font-family: var(--font-base);
    color: #333;
    cursor: pointer;
    text-align: left;
}
.nf-cat-drawer__arrow {
    font-size: 16px;
    color: #999;
    transition: transform 0.2s;
    display: inline-block;
}
.nf-cat-drawer__major[aria-expanded="true"] .nf-cat-drawer__arrow {
    transform: rotate(90deg);
}
.nf-cat-drawer__minor {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 0;
    background: #f8f8f8;
}
.nf-cat-drawer__minor li a {
    display: block;
    padding: 10px 16px 10px 24px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    font-family: var(--font-base);
    border-bottom: 1px solid #efefef;
}
.nf-cat-drawer__minor li:last-child a {
    border-bottom: none;
}

/* =============================================================
   SP: カテゴリドロワー 再設計
   - オーバーレイなし
   - ボトムナビ(56px)の上に表示
   - PSDデザイン準拠
============================================================= */
.nf-cat-overlay {
    display: none !important;
} /* オーバーレイ不要 */

.nf-cat-drawer {
    position: fixed;
    bottom: 56px; /* ボトムナビの高さ分上 */
    left: 0;
    right: 0;
    z-index: 490;
    background: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: calc(75vh - 56px);
    padding-bottom: 0;
}
.nf-cat-drawer--open {
    transform: translateY(0);
}

.nf-cat-drawer__handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.nf-cat-drawer__bar {
    width: 36px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    display: block;
}
.nf-cat-drawer__header {
    display: none;
} /* タイトル不要 */

.nf-cat-drawer__scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}
.nf-cat-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nf-cat-drawer__item {
    border-bottom: 1px solid #ebebeb;
}
.nf-cat-drawer__major {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: none;
    border: none;
    font-size: 13px;
    font-family: var(--font-base);
    color: #474443;
    cursor: pointer;
    text-align: left;
    gap: 8px;
}
.nf-cat-drawer__major-name {
    flex: 1;
}
.nf-cat-drawer__arrow {
    font-size: 14px;
    color: #5b5b5b;
    transition: transform 0.2s;
    display: inline-block;
    flex-shrink: 0;
}
.nf-cat-drawer__major[aria-expanded="true"] .nf-cat-drawer__arrow {
    transform: rotate(90deg);
}
.nf-cat-drawer__minor {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f8f8f8;
}
.nf-cat-drawer__minor li a {
    display: block;
    padding: 11px 16px 11px 24px;
    font-size: 12px;
    color: #444;
    text-decoration: none;
    font-family: var(--font-base);
    border-bottom: 1px solid #efefef;
}
.nf-cat-drawer__minor li:last-child a {
    border-bottom: none;
}

/* =============================================================
   SP: ボトムナビをドロワーより前面に
============================================================= */
@media (max-width: 767px) {
    .nf-bottom-nav {
        z-index: 600;
    }
    .nf-cat-drawer {
        z-index: 500;
    }
}

/* =============================================================
   SP: カテゴリドロワー アイコン
============================================================= */
.nf-cat-drawer__icon {
    width: auto;
    height: 20px;
    max-width: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* =============================================================
   SP: カテゴリドロワー テキストスタイル修正（PSD準拠）
   大カテゴリ: 14px bold #222
   中カテゴリ: 12px normal #222
============================================================= */
.nf-cat-drawer__major {
    font-size: 14px;
    font-weight: bold;
    color: #222222;
}
.nf-cat-drawer__minor li a {
    font-size: 12px;
    font-weight: normal;
    color: #222222;
}

/* =============================================================
   SP: カテゴリドロワー 矢印画像
============================================================= */
.nf-cat-drawer__arrow {
    width: auto;
    height: 13px;
    flex-shrink: 0;
    transition: none;
    display: block;
}
.nf-cat-drawer__major[aria-expanded="true"] .nf-cat-drawer__arrow {
    content: url("../../img/renewal2026/icon/sp_cat_arrow_open.png");
    height: 7px;
    transform: none;
}

/* =============================================================
   SP: カテゴリドロワー 矢印・背景色修正（PSD準拠）
============================================================= */
/* 中カテゴリ背景: 白 */
.nf-cat-drawer__minor {
    background: #fff;
}

/* 中カテゴリ区切り: インデント付き #e6e6e6 */
.nf-cat-drawer__minor li a {
    border-bottom: 1px solid #e6e6e6;
    padding-left: 20px;
}
.nf-cat-drawer__minor li:last-child a {
    border-bottom: none;
}

/* 大カテゴリ区切り */
.nf-cat-drawer__item {
    border-bottom: 1px solid #e6e6e6;
}

/* 閉じ状態の矢印: 右向き */
.nf-cat-drawer__arrow {
    content: url("../../img/renewal2026/icon/sp_cat_arrow.png");
    width: auto;
    height: 13px;
    display: block;
    flex-shrink: 0;
    transform: none;
    transition: none;
}

/* 展開状態の矢印: 下向きゴールド */
.nf-cat-drawer__major[aria-expanded="true"] .nf-cat-drawer__arrow {
    content: url("../../img/renewal2026/icon/sp_cat_arrow_open.png");
    height: 7px;
    transform: none;
}

/* 中カテゴリ右矢印 */
.nf-cat-drawer__minor li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nf-cat-drawer__minor li a::after {
    content: url("../../img/renewal2026/icon/sp_cat_arrow_sub.png");
    display: block;
    flex-shrink: 0;
    height: 13px;
    width: auto;
}

/* =============================================================
   SP: カテゴリドロワー 背景・罫線・インデント修正
============================================================= */
/* 中カテゴリ背景: 白 */
.nf-cat-drawer__minor {
    background: #ffffff !important;
}

/* 中カテゴリテキスト: 26pxインデント */
.nf-cat-drawer__minor li a {
    padding-left: 26px !important;
}

/* 最初の大カテゴリ（工具）の前にも罫線 */
.nf-cat-drawer__list {
    border-top: 1px solid #e6e6e6;
}

/* =============================================================
   SP: カテゴリドロワー レイアウト仕様
   - ドロワー幅 92vw・左右4vwパディング
   - 中カテゴリ幅 81.33vw・背景#fcf9f2・40vhスクロール
============================================================= */
.nf-cat-drawer {
    width: 92vw;
    left: 50%;
    right: auto;
    padding-left: 4vw;
    padding-right: 4vw;
    box-sizing: border-box;
    transform: translateX(-50%) translateY(100%);
}
.nf-cat-drawer--open {
    transform: translateX(-50%) translateY(0);
}

/* 中カテゴリ: 81.33vw・背景#fcf9f2・40vhスクロール */
.nf-cat-drawer__minor {
    background: #fcf9f2 !important;
    width: 81.33vw;
    margin-left: auto;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 一番上の中カテゴリに上ボーダー */
.nf-cat-drawer__minor li:first-child a {
    border-top: 1px solid #e6e6e6;
}

/* =============================================================
   SP: ボトムナビ カテゴリ アクティブ時に金色
============================================================= */
@media (max-width: 767px) {
    .nf-bottom-nav__item--active {
        color: var(--color-accent);
    }
    .nf-bottom-nav__item--active img {
        filter: invert(64%) sepia(60%) saturate(600%) hue-rotate(5deg)
            brightness(95%);
    }
}

/* =============================================================
   SP: ボトムナビ カテゴリ アクティブ時 → 金色画像に切替 + ドロワー幅100%
============================================================= */
@media (max-width: 767px) {
    .nf-bottom-nav__item--active img {
        filter: none;
        content: url("../../img/renewal2026/icon/sp_nav_category_gold.png");
    }
    .nf-cat-drawer {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: translateY(100%) !important;
    }
    .nf-cat-drawer--open {
        transform: translateY(0) !important;
    }
    .nf-cat-drawer__minor {
        width: 81.33vw !important;
    }
}

/* ドロワー: 幅100% + パディング復元 */
@media (max-width: 767px) {
    .nf-cat-drawer {
        padding-left: 4vw !important;
        padding-right: 4vw !important;
    }
}

/* =============================================================
   SP: 中カテゴリ幅・ボーダー調整
============================================================= */
@media (max-width: 767px) {
    .nf-cat-drawer__minor {
        width: 100% !important;
        border-top: none !important;
    }
    .nf-cat-drawer__minor li:first-child a {
        border-top: none !important;
    }
    .nf-cat-drawer__minor li a {
        width: 81.33vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =============================================================
   SP: アコーディオン開閉アニメーション
============================================================= */
.nf-cat-drawer__minor {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.nf-cat-drawer__minor--open {
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ハンドル上下の余白を広げる */
@media (max-width: 767px) {
    .nf-cat-drawer__handle {
        padding: 16px 0 14px;
    }
}

/* =============================================================
   SP: 商品スライダー 3枚表示
============================================================= */
@media (max-width: 767px) {
    .nf-shelf__list {
        display: flex !important;
        gap: 8px !important;
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }
    .nf-card {
        width: calc((100vw - 48px) / 3) !important;
        min-width: calc((100vw - 48px) / 3) !important;
        min-height: 0 !important;
        flex-shrink: 0;
    }
}

/* SP: shelf padding 0・カード幅再計算 */
@media (max-width: 767px) {
    .nf-shelf__scroll {
        padding: 0 !important;
    }
    .nf-card {
        width: calc((100vw - 16px) / 3) !important;
        min-width: calc((100vw - 16px) / 3) !important;
    }
}

/* =============================================================
   SP: 人気ランキング プルダウンをタイトル下に配置
============================================================= */
@media (max-width: 767px) {
    .nf-shelf .nf-sec-hd {
        flex-wrap: wrap;
    }
    .nf-ranking-select {
        order: 10;
        flex-basis: 100%;
        margin-top: 8px;
    }
}

/* SP: ランキング sec-hd の固定高さを解除 */
@media (max-width: 767px) {
    .nf-shelf .nf-sec-hd {
        height: auto;
    }
}

/* =============================================================
   SP: フッター nf-finfo アコーディオン
============================================================= */
/* PC: button を div と同じ見た目に */
.nf-finfo__title {
    background: none;
    border: none;
    cursor: default;
    font-family: inherit;
    font-weight: inherit;
    color: #fff;
    padding: 0;
    text-align: left;
    width: 100%;
}
.nf-finfo__chevron {
    display: none;
}

@media (max-width: 767px) {
    .nf-finfo__grid {
        display: block;
    }
    .nf-finfo__col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .nf-finfo__col:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    .nf-finfo__title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        padding: 18px 0;
        cursor: pointer;
    }
    .nf-finfo__chevron {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        flex-shrink: 0;
        margin-right: 4px;
        transition: transform 0.3s;
    }
    .nf-finfo__title[aria-expanded="true"] .nf-finfo__chevron {
        transform: rotate(225deg);
    }
    .nf-finfo__body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }
    .nf-finfo__body--open {
        max-height: 600px;
    }
}

/* SP: finfo 罫線削除・矢印をテキスト横に */
@media (max-width: 767px) {
    .nf-finfo__col,
    .nf-finfo__col:first-child {
        border: none;
    }
    .nf-finfo__title {
        justify-content: flex-start;
        gap: 8px;
    }
}

/* SP: finfo 矢印の上下中央揃え調整 */
@media (max-width: 767px) {
    .nf-finfo__chevron {
        align-self: center;
        margin-top: 3px;
    }
    .nf-finfo__title[aria-expanded="true"] .nf-finfo__chevron {
        margin-top: -3px;
    }
}

/* SP: finfo 矢印を画像に変更 */
@media (max-width: 767px) {
    .nf-finfo__chevron {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url("../../img/renewal2026/icon/finfo_arrow_down.png")
            center / contain no-repeat;
        border: none;
        transform: none;
        margin-top: 0;
        flex-shrink: 0;
        align-self: center;
    }
    .nf-finfo__title[aria-expanded="true"] .nf-finfo__chevron {
        background-image: url("../../img/renewal2026/icon/finfo_arrow_up.png");
        transform: none;
        margin-top: 0;
    }
}

/* SP: finfo 矢印サイズ修正（PSD書き出し 27x15px @ 2x → 14x8px CSS） */
@media (max-width: 767px) {
    .nf-finfo__chevron {
        width: 14px;
        height: 8px;
    }
}

/* SP: finfo 矢印 回転アニメーション */
@media (max-width: 767px) {
    .nf-finfo__chevron {
        background-image: url("../../img/renewal2026/icon/finfo_arrow_down.png") !important;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }
    .nf-finfo__title[aria-expanded="true"] .nf-finfo__chevron {
        background-image: url("../../img/renewal2026/icon/finfo_arrow_down.png") !important;
        transform: rotate(180deg);
    }
}

/* =============================================================
   SP: フッター リンク2列 + ブランドを下に
============================================================= */
@media (max-width: 767px) {
    .nf-footer__top {
        display: flex !important;
        flex-direction: column;
    }
    .nf-footer__brand {
        order: 10;
        margin-bottom: 0;
        margin-top: 24px;
    }
    .nf-footer__nav-list:nth-of-type(1) {
        order: 1;
    }
    .nf-footer__nav-list:nth-of-type(2) {
        order: 2;
    }

    /* 2列グリッドで並べる */
    .nf-footer__nav-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
        order: 1;
    }
}

/* SP: フッターナビ2列・ブランドを下へ（wrap対応） */
@media (max-width: 767px) {
    .nf-footer__top {
        display: flex;
        flex-direction: column;
    }
    .nf-footer__brand {
        order: 10;
        margin-top: 24px;
        margin-bottom: 0;
    }
    .nf-footer__nav-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
        order: 1;
    }
}

/* =============================================================
   SP: フッター ブランドエリア（PSD準拠）
============================================================= */
@media (max-width: 767px) {
    .nf-footer__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .nf-footer__logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .nf-footer__logo > img:first-child {
        width: 100px;
        height: auto;
    }
    .nf-footer__logo-text img {
        width: 122px;
        height: auto;
    }
    .nf-footer__corp-btn {
        display: block;
        width: 226px;
    }
    .nf-footer__corp-btn img {
        width: 226px;
        height: auto;
    }
}

/* SP: フッターブランド 中央寄せ強制 */
@media (max-width: 767px) {
    .nf-footer__brand {
        align-items: center;
        text-align: center;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .nf-footer__logo {
        justify-content: center;
    }
    .nf-footer__corp-btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* お知らせアイコンのpadding/margin削減 */
.nf-infobar__label {
    padding-right: 6px;
    margin-right: 6px;
}

/* =============================================================
   SP: nf-topbar 1件ずつフェード表示
============================================================= */
@media (max-width: 767px) {
    .nf-topbar__inner {
        max-width: none !important;
        width: 100% !important;
        overflow: visible;
        justify-content: center;
        position: relative;
        height: 36px;
    }
    .nf-topbar__item {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        justify-content: center;
        opacity: 0;
        transition: opacity 0.6s ease;
        white-space: nowrap;
    }
    .nf-topbar__item--visible {
        opacity: 1;
    }
    /* フェイルセーフ: ローテーションJSが動かない環境でも1件目は表示する
       （2026-07-27 本番SP実機で全件 opacity:0 のまま非表示になった対策。
       JS起動時は --rotating が付き、以降は --visible のみで制御する） */
    .nf-topbar__item:first-child {
        opacity: 1;
    }
    .nf-topbar__inner--rotating .nf-topbar__item:first-child {
        opacity: 0;
    }
    .nf-topbar__inner--rotating .nf-topbar__item--visible {
        opacity: 1;
    }
}

/* =============================================================
   SP: ヒーロースライダー ドット
============================================================= */
.nf-hero__dots {
    display: none;
}

@media (max-width: 767px) {
    .nf-hero__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 8px 0 4px;
    }
    .nf-hero__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ccc;
        transition: background 0.3s;
    }
    .nf-hero__dot--active {
        background: var(--color-accent);
    }
}

/* ヒーロードット タップ可能に */
@media (max-width: 767px) {
    .nf-hero__dot {
        cursor: pointer;
    }
}

/* ドロワーはPCで非表示 */
.nf-cat-drawer {
    display: none;
}
@media (max-width: 767px) {
    .nf-cat-drawer {
        display: flex;
    }
}

/* SP: 各スライダーのタイトル フォントサイズ */
@media (max-width: 767px) {
    .nf-sec-hd__title {
        font-size: 14px;
    }
}

/* SP: 商品カード 価格 フォントサイズ */
@media (max-width: 767px) {
    .nf-card__price {
        font-size: 14px;
    }
}

/* SP: sec-hd タイトルがアイコン横で折り返すよう修正 */
@media (max-width: 767px) {
    .nf-sec-hd {
        align-items: flex-start;
        flex-wrap: nowrap;
        height: auto;
    }
    .nf-sec-hd__icon {
        flex-shrink: 0;
        margin-top: 2px;
    }
    .nf-sec-hd__title {
        flex: 1;
        min-width: 0;
        white-space: normal;
        line-height: 1.4;
    }
}

/* SP専用改行 */
.nf-sp-br {
    display: none;
}
@media (max-width: 767px) {
    .nf-sp-br {
        display: block;
    }
}

/* SP: sec-hd アイコンとテキストをトップ揃え */
@media (max-width: 767px) {
    .nf-sec-hd {
        align-items: flex-start;
    }
    .nf-sec-hd__icon {
        margin-top: 0 !important;
    }
    .nf-sec-hd__title {
        line-height: 1;
        padding-top: 0;
    }
}

/* SP: sec-hd 1行目中央をアイコン中央に揃える */
@media (max-width: 767px) {
    .nf-sec-hd {
        align-items: flex-start;
    }
    .nf-sec-hd__icon {
        margin-top: 0 !important;
    }
    .nf-sec-hd__title {
        line-height: 1.5;
        padding-top: 2px;
    }
}

/* ドロワー: 大カテゴリ16px・中カテゴリ14px */
@media (max-width: 767px) {
    .nf-cat-drawer__major-name {
        font-size: 16px;
    }
    .nf-cat-drawer__minor li a {
        font-size: 14px;
    }
}

/* =============================================================
   価格表示 共通コンポーネント（nf-price）
   リニューアル2026全体の共通規約。カード・棚・下層ページで共用する。
   構造:
     <p class="nf-card__price">                  ← 置き場所（カード内。下層では任意の親要素）
       <span class="nf-price__old">￥2,980<span class="nf-price__unit">(税込)</span></span>
       <span class="nf-price__now">￥1,980<span class="nf-price__unit">(税込)</span></span>
     </p>
   - nf-price__now  現在価格
   - nf-price__old  値引き前価格（ある場合のみ。打ち消し線・小さめ・控えめ色）
   - nf-price__unit (税込) などの単位表記（小さめ・通常ウェイト）
   アイジェント棚の price_string は js/renewal2026/common.js がこの構造へ変換して描画する。
============================================================= */
.nf-price__now {
    font-size: 18px;
    font-weight: var(--fw-price);
    color: var(--color-price);
    line-height: 24px;
}
.nf-price__old {
    display: block;
    font-size: 12px;
    font-weight: var(--fw-body);
    color: var(--color-text-secondary);
    text-decoration: line-through;
    line-height: 1.4;
}
.nf-price__unit {
    font-size: 12px;
    font-weight: var(--fw-body);
}
.nf-price__old .nf-price__unit {
    font-size: 10px;
}
/* 商品カード内では単位表記（(税込)等）は出さない（コーディングデータのカードは￥のみ）。
   アイジェント棚（06/07）の price_string 由来の (税込) もこれで非表示になる。 */
.nf-card__price .nf-price__unit {
    display: none;
}

/* カードのお気に入りボタン状態（NFCEC-1229）
   .nf-card__fav 本体は受領コーディングデータ既定（未追加=グレー、hover=#e05）。
   追加済み（favorite_btn-del）はピンクで塗る。クリック処理は common.js の委譲ハンドラ */
.nf-card__fav.favorite_btn-del {
    color: #e0245e;
}

/* -------------------------------------------------------------
   TODOプレースホルダ（未実装ブロックの仮表示）
   実装が済んだブロックからこの表示は消える。本番リリース前に残っていないこと。
------------------------------------------------------------- */
.nf-todo-placeholder {
    border: 2px dashed #c9a227;
    background: #fdf8ec;
    color: #8a6d1c;
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    border-radius: var(--r-m);
}
@media (max-width: 767px) {
    .nf-price__now {
        font-size: 14px;
    }
    .nf-price__old {
        font-size: 11px;
    }
}

/* =============================================================
   お知らせ本文ポップアップ（nf-news-modal）
   infobar のお知らせ（news_url なし・news_comment あり）クリックで表示。
   renewal2026_03_globalnav.tpl + js/renewal2026/common.js（nfNewsOpen/nfNewsClose）
============================================================= */
.nf-news-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}
/* 中央寄せは flex で行う（旧 top/left 50%＋translate(-50%,-50%) 方式は
   2026-07-27 本番SP実機で transform が効かず右下へずれる事象があったため変更） */
.nf-news-modal--open {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nf-news-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.nf-news-modal__box {
    position: relative;
    width: calc(100% - 32px);
    max-width: 640px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--r-m);
    padding: 32px 28px 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.nf-news-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 8px;
}
.nf-news-modal__date {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.nf-news-modal__title {
    font-size: 18px;
    font-weight: var(--fw-heading);
    line-height: 1.5;
    margin-bottom: 16px;
}
/* 本文はティッカーより少し大きめに表示する */
.nf-news-modal__comment {
    font-size: 15px;
    line-height: 1.9;
}
@media (max-width: 767px) {
    .nf-news-modal__box {
        padding: 28px 20px 20px;
    }
    .nf-news-modal__title {
        font-size: 16px;
    }
    .nf-news-modal__comment {
        font-size: 14px;
    }
}

/* ── カート追加トースト（Ajaxカートイン。EC-CUBE4系風・数秒で自動消灯。詳細/一覧で共有。NFCEC-1229） ── */
body.nf-renewal .nf-cart-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-16px);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 92vw;
  padding: 13px 16px;
  background: var(--color-ui-dark);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
body.nf-renewal .nf-cart-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
body.nf-renewal .nf-cart-toast__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #2ec76a; color: #fff; font-size: 13px; flex-shrink: 0;
}
body.nf-renewal .nf-cart-toast__msg { font-weight: 600; }
body.nf-renewal .nf-cart-toast__link { color: #ffd873; text-decoration: underline; font-weight: 700; white-space: nowrap; }
body.nf-renewal .nf-cart-toast__link:hover { color: #fff; }
body.nf-renewal .nf-cart-toast__close {
  background: none; border: none; color: #cfd3d8; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 2px; margin-left: 2px;
}
body.nf-renewal .nf-cart-toast__close:hover { color: #fff; }
@media (max-width: 767px) {
  body.nf-renewal .nf-cart-toast { top: 12px; width: calc(100% - 24px); font-size: 13px; }
}

/* =============================================================
   固定フローティング要素のSP位置調整（改善メモ 2026-07-22）
   - #page-top: 旧デザイン共用のトップへ戻るボタン（bloc 97 js-config.tpl、
     anywhere=1 で全ページ描画。fixed bottom:20px z-index:1000）。
     SPボトムナビ（.nf-bottom-nav: bottom:0 / height:56px / z-index:300）の
     カートに重なるため、リニューアルページのみ上へ逃がす。
     js-config.tpl 側は旧デザイン共用のため触らない（body.nf-renewal
     スコープの詳細度で tpl 内 <style> の #page-top に勝つ）。
   - z-index はドロワー（500/600）・ボトムナビ（300）より下の 250 に整理
============================================================= */
@media (max-width: 767px) {
    body.nf-renewal #page-top {
        bottom: calc(56px + 12px); /* ボトムナビの高さ56px＋余白 */
        z-index: 250;
    }
}
/* PC（751px以上で js-config 側が bottom:150px 指定）はボトムナビが無いため
   位置は変えず、z-index の整理のみ適用 */
body.nf-renewal #page-top {
    z-index: 250;
}

/* ChatPlus（チャットbot。site_main.tpl で全ページ読込・cp.js が
   #chatplusview を body 直下に生成＝cp.js 実コードで確認済み）:
   SPでデフォルト右下固定がボトムナビと被るため、リニューアルページ
   のみボトムナビの上に逃がす。ウィジェットはインラインstyleで位置
   指定するため !important で上書き（実機で被り解消を要確認） */
@media (max-width: 767px) {
    body.nf-renewal #chatplusview {
        bottom: 56px !important; /* ボトムナビの高さぶん */
    }
    body.nf-renewal #chatplusview #chatplusheader {
        width: 80% !important;
    }
}

/* -------------------------------------------------------------
   注目キーワード（nf-keywords）
   renewal2026_25_pickup_keyword.tpl（旧 pickup-keyword の nf- 化。
   TOP MainHead 配置）
   list.css から移設。掲載ページが変わっても効くよう common.css に置く。
   ブロックが .nf-container を持たないため、コンテナ幅・ガターは
   .nf-keywords 自身に持たせる。
------------------------------------------------------------- */
.nf-keywords {
  display: flex;
  align-items: baseline;
  gap: var(--sp3);
  font-family: var(--font-base);
  max-width: var(--w-container);
  margin: var(--sp3) auto;
  padding: 0 var(--gutter);
}
.nf-keywords__label {
  font-size: 13px;
  font-weight: var(--fw-heading);
  color: var(--color-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.nf-keywords__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2);
}
.nf-keywords__list a {
  display: inline-block;
  padding: 3px 12px;
  border: var(--bd);
  border-radius: var(--r-pill);
  background: var(--color-bg-primary);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.nf-keywords__list a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
@media (max-width: 767px) {
  .nf-keywords { flex-direction: column; gap: var(--sp1); }
  .nf-keywords__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp1);
  }
  .nf-keywords__list a { white-space: nowrap; }
}