/* =============================================================
   NAFCO RENEWAL 2026 — TOPページ専用スタイル（top.css）
   元データ: __tmpl/top/nafco_top.css（受領 2026-07-10）を common / top に2分割
   内容: Hero Carousel・Quick Category・Promo Wide・Double Banner・Instagram
   読み込み: common.css の後・TOPページのみ
   ============================================================= */

/* -------------------------------------------------------------
   00  バナースライダー共通（nf-bslider）
   hero[04]・セールプロモ[08]・シーズン/常設バナー[11][15] で共用。
   スワイプ・慣性は scroll-snap ＋ ネイティブ横スクロール、
   ボタン送り・ドット同期は js/renewal2026/common.js（nfBannerSlide 等）。
   ※ このセクションはファイル先頭に置くこと（後続の各ブロック個別
     ルール・SPメディアクエリが同詳細度の後勝ちで上書きできるように）
------------------------------------------------------------- */
.nf-bslider {
    position: relative;
}
.nf-bslider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.nf-bslider__track::-webkit-scrollbar {
    display: none;
}
.nf-bslider__track > * {
    flex: 0 0 100%; /* 1点表示型の既定。2点並列型は各ブロックで上書き */
    scroll-snap-align: start;
}
/* 減光・ドットのアクティブ色はファイル末尾（後勝ちセクション）で定義 */

/* -------------------------------------------------------------
   04  Hero Carousel
------------------------------------------------------------- */
.nf-hero {
    background: rgba(201, 162, 39, 0.18); /* お知らせと同じ薄黄色 */
    padding: 0;
    position: relative;
}
.nf-hero__track {
    position: relative;
    line-height: 0; /* img下余白なし */
}
.nf-hero__img {
    width: 100%;
    height: auto;
    display: block;
}
/* MV用大矢印 */
.nf-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
    transition: opacity 0.15s;
}
.nf-hero__arrow img {
    width: 30px;
    height: 30px;
    display: block;
}
.nf-hero__arrow:hover {
    opacity: 0.7;
}
.nf-hero__arrow--prev {
    left: var(--sp4);
}
.nf-hero__arrow--next {
    right: var(--sp4);
}
/* ドットはPC非表示・SPのみ表示（コーディングデータ末尾パッチの意図。
   CSS分割で common.css の display:none が先読みになり、ここの display:flex が
   PCで勝ってしまい矢印に重なっていたため none に修正。SP表示は下の @media で定義） */
.nf-hero__dots {
    display: none;
    justify-content: center;
    gap: var(--sp2);
    padding: var(--sp3) 0;
}
.nf-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-strong);
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    padding: 0;
}
.nf-hero__dot--active {
    background: var(--color-accent);
}

/* -------------------------------------------------------------
   05  Quick Category（8列×3行・アイコン左・罫線）
------------------------------------------------------------- */
.nf-qcat {
    padding: var(--sp6) 0;
    /* removed:   border-bottom: var(--bd); */
}
.nf-qcat__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 1fr; /* 全行同高（改善メモ 2026-07-22: 1,2段目と3段目の高さ統一） */
    border-top: var(--bd);
    border-left: var(--bd);
}
.nf-qcat__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-right: var(--bd);
    border-bottom: var(--bd);
    text-decoration: none;
    transition: background 0.15s;
}
.nf-qcat__item:hover {
    background: var(--color-bg-secondary);
}
.nf-qcat__icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.nf-qcat__label {
    font-size: 12px;
    color: var(--color-text-primary);
    line-height: 1.45;
    font-family: var(--font-base);
    text-align: left;
}
.nf-qcat__item:hover .nf-qcat__label {
    color: var(--color-accent);
}

/* -------------------------------------------------------------
   08  Promo Wide
------------------------------------------------------------- */
.nf-promo {
    padding: 0;
    border-bottom: none;
}
.nf-promo__band {
    height: 180px;
    background: linear-gradient(90deg, #fff8e1 0%, #ffe082 50%, #fff8e1 100%);
    border-radius: var(--r-m);
    border: var(--bd);
    display: flex;
    align-items: center;
    padding: 0 var(--sp10);
    gap: var(--sp8);
    font-family: var(--font-base);
}
.nf-promo__text {
    flex: 1;
}
.nf-promo__eyebrow {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--sp2);
}
.nf-promo__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--sp2);
    color: var(--color-text-primary);
}
.nf-promo__desc {
    font-size: 13px;
    color: var(--color-text-secondary);
}
.nf-promo__cta {
    flex-shrink: 0;
    width: 140px;
    height: 36px;
    background: var(--color-accent);
    color: #fff;
    font-size: 13px;
    font-weight: var(--fw-heading);
    font-family: var(--font-base);
    border-radius: var(--r-m);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}
.nf-promo__cta:hover {
    background: var(--color-accent-dark);
    color: #fff;
}
.nf-promo__visual {
    width: 200px;
    height: 140px;
    background: #fff;
    border-radius: var(--r-s);
    border: var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--color-text-secondary);
    font-family: var(--font-base);
    overflow: hidden;
}
.nf-promo__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* [08] セールプロモ: bayl スライダー化（改善メモ 2026-07-22。
   旧 __band/__text/__cta/__visual 系は不使用になったが残置）。
   矢印は商品棚（.nf-shelf__scroll、common.css:1306-1336）と同じ
   flex行＋負マージンでバナーの外側に配置（バナー画像に重ねない） */
.nf-promo__slide {
    display: block;
    line-height: 0;
    border-radius: var(--r-m);
    overflow: hidden;
}
.nf-promo__slide img {
    width: 100%;
    height: auto;
    display: block;
}
.nf-promo__slider {
    display: flex;
    align-items: center;
}
.nf-promo__slider--arrows {
    /* 40px(arrow幅) + 24px(gutter) = 64px ずつ外へ（棚と同じ式） */
    margin: 0 calc(-40px - var(--gutter));
}
.nf-promo__track {
    flex: 1;
    min-width: 0;
}
.nf-promo__arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}
.nf-promo__arrow img {
    width: 30px;
    height: 30px;
    display: block;
}
.nf-promo__arrow:hover {
    opacity: 0.7;
}
/* ドットはPC非表示・SPのみ表示（heroと同じ意図） */
.nf-promo__dots {
    display: none;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
}
.nf-promo__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-strong);
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    padding: 0;
}

/* -------------------------------------------------------------
   Double Banner (11 / 14)
------------------------------------------------------------- */
.nf-dbanner {
    padding: var(--sp6) 0;
    /* removed:   border-bottom: var(--bd); */
}
.nf-dbanner__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp4);
}
.nf-hbanner {
    display: block;
    border-radius: var(--r-m);
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.15s;
}
.nf-hbanner img {
    width: 100%;
    height: auto;
    display: block;
}
.nf-hbanner:hover {
    box-shadow: var(--shadow);
}
.nf-hbanner--rainy {
    background: linear-gradient(135deg, #ddeefa 0%, #b8d9ee 100%);
}
.nf-hbanner--summer {
    background: linear-gradient(135deg, #e6f5e9 0%, #c8e6c9 100%);
}
.nf-hbanner--bousai {
    background: linear-gradient(135deg, #fff3df 0%, #ffe0b2 100%);
}
.nf-hbanner--garden {
    background: linear-gradient(135deg, #e0f5f2 0%, #b2dfdb 100%);
}
.nf-hbanner__tag {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-bottom: var(--sp1);
}
.nf-hbanner__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: var(--sp2);
}
.nf-hbanner__desc {
    font-size: 12px;
    color: var(--color-text-secondary);
}
/* [11][15] 3件以上でスライダー化（2点ずつページ送り・端クランプ。
   改善メモ 2026-07-22。2件以下は従来の nf-dbanner__grid グリッドのまま）。
   矢印は商品棚（.nf-shelf__scroll、common.css:1306-1336）と同じ
   flex行＋負マージンでバナーの外側に配置（バナー画像に重ねない） */
.nf-dbanner__slider {
    display: flex;
    align-items: center;
    /* 40px(arrow幅) + 24px(gutter) = 64px ずつ外へ（棚と同じ式） */
    margin: 0 calc(-40px - var(--gutter));
}
.nf-dbanner__grid--slider {
    display: flex;
    gap: var(--sp4);
    flex: 1;
    min-width: 0;
}
.nf-dbanner__grid--slider > .nf-hbanner {
    flex: 0 0 calc((100% - var(--sp4)) / 2);
}
.nf-dbanner__arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}
.nf-dbanner__arrow img {
    width: 30px;
    height: 30px;
    display: block;
}
.nf-dbanner__arrow:hover {
    opacity: 0.7;
}

/* -------------------------------------------------------------
   15  Instagram
------------------------------------------------------------- */
.nf-insta {
    padding: var(--sp8) 0;
    /* removed:   border-bottom: var(--bd); */
}
.nf-insta__hd {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    margin-bottom: var(--sp4);
    font-family: var(--font-base);
}
.nf-insta__hd-icon {
    font-size: 22px;
}
.nf-insta__hd-title {
    font-size: 18px;
    font-weight: var(--fw-heading);
}
.nf-insta__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--sp1);
    aspect-ratio: 8/2;
}
.nf-insta__tile {
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    border-radius: var(--r-xs);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--color-border-strong);
}
.nf-insta__tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nf-insta__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.15s;
}
.nf-insta__tile:hover::after {
    background: rgba(0, 0, 0, 0.08);
}

/* =============================================================
   SP: メインバナー
============================================================= */
@media (max-width: 767px) {
    /* hero: SP用フルwidth、矢印非表示、ドット表示 */
    .nf-hero__inner {
        max-width: 100%;
        background: none;
        display: block;
        position: relative;
    }
    .nf-hero__track {
        width: 100%;
        /* overflow は nf-bslider__track の overflow-x:auto に委ねる（スワイプ用） */
    }
    .nf-hero__img {
        width: 100%;
        height: auto;
        display: block;
    }
    .nf-hero__arrow {
        display: none;
    }
    .nf-hero__dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 8px 0;
    }

    /* SP用スライド画像
     要確認: 受領データに img/sp_mv_slide.png が存在しないため無効化（404防止）。
     SP用ヒーロー画像の支給後に有効化するか、picture要素での出し分けに変更する。
  .nf-hero__img[src*="mv_slide.png"] {
    content: url("../../img/renewal2026/sp_mv_slide.png");
  }
  */
}

/* =============================================================
   SP: メインバナー下カテゴリ非表示
============================================================= */
@media (max-width: 767px) {
    .nf-qcat {
        display: none;
    }
}

/* =============================================================
   SP: バナー 2列→1列
============================================================= */
@media (max-width: 767px) {
    .nf-dbanner__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    /* スライダー化していてもSPは縦積み・スライドなし（改善メモ 2026-07-22） */
    .nf-dbanner__grid--slider {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }
    /* シームレス周回用クローン（common.js ensureClones が生成）は
       縦積みでは同じバナーの重複表示になるため隠す。
       hero/promo はSPでも横スライダーのままなので対象にしない */
    .nf-dbanner__grid--slider > .nf-bslider__clone {
        display: none;
    }
    .nf-dbanner__arrow {
        display: none;
    }
    /* セールプロモ[08]: SPは矢印なし・ドット＋スワイプ（heroと同じ） */
    .nf-promo__arrow {
        display: none;
    }
    .nf-promo__dots {
        display: flex;
    }
    /* SPは矢印非表示のため負マージン（矢印の張り出し）をリセット
       （棚のSPリセット common.css:1855-1857 と同様） */
    .nf-promo__slider--arrows,
    .nf-dbanner__slider {
        margin: 0;
    }
    .nf-hbanner picture,
    .nf-hbanner picture img {
        width: 100%;
        height: auto;
        display: block;
    }
    .nf-promo__band picture,
    .nf-promo__band picture img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* =============================================================
   nf-bslider 状態クラス（後勝ちセクション）
   .nf-hero__dot / .nf-promo__dot 等の基本色（同詳細度）より
   後に読ませる必要があるため必ずファイル末尾に置くこと
============================================================= */
.nf-bslider__arrow--disabled {
    opacity: 0.3;
    /* pointer-events:none は付けない: 画像ロード前に初期同期が走って
       誤って両矢印が disabled になった場合（2026-07-23 発覚）でも、
       クリックすれば動く・scroll イベントで自己復帰できるようにする */
}
.nf-bslider__dot--active {
    background: var(--color-accent);
}