/* ============================================================
   WAVE SALAD デジタルカタログ ―― トップページ 検索・絞り込み（ECサイト風レイアウト）
   index.html が読み込むスタイル。inline <style> の後に読み込んで上書きする方式。
   追加分のクラスはすべて np- 接頭辞に統一。

   構成:
   ・商品一覧を1つのグリッドに統合
   ・PC = 左サイドバー(絞り込み) + 右(並び替えツールバー + グリッド + もっと見る)
   ・スマホ = サイドバーはドロワー、上部に「絞り込み」ボタン
   ============================================================ */

:root {
  --np-brand: #8b6f47;
  --np-brand-dark: #6d5438;
  --np-line: #e5ddd3;
  --np-line-soft: #ece4d8;
  --np-bg: #faf8f5;
  --np-text: #3a352e;
  --np-muted: #8a8070;
}

/* 新版では商品カードを常時表示（出現アニメ待ちで空白が出ないように）。
   hover の浮き上がりは殺さないよう !important は使わない。 */
.np-layout .catalog-item { opacity: 1; }
.np-layout .catalog-item:not(.card-visible) { transform: none; }
/* 旧のスクロール追従カテゴリーバーは新版では不要 */
.scroll-cat-bar { display: none !important; }

.catalog-item.np-hidden,
.catalog-item.np-more-hidden,
.cat-section.np-hidden { display: none !important; }

/* ---------- 全体レイアウト ---------- */
.np-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
.np-layout *, .np-layout *::before, .np-layout *::after { box-sizing: border-box; }
.np-main { min-width: 0; }

/* ---------- サイドバー ---------- */
.np-sidebar-inner { position: sticky; top: 76px; }
.np-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.np-sidebar-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--np-text);
}
.np-drawer-close {
  display: none;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--np-muted);
  cursor: pointer;
  padding: 4px 6px;
}

.np-group { border-top: 1px solid var(--np-line-soft); }
.np-group:first-of-type { border-top: none; }
.np-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 2px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--np-text);
  cursor: pointer;
}
.np-group-head .np-caret { color: var(--np-brand); font-size: 11px; transition: transform .2s; }
.np-group.np-closed .np-caret { transform: rotate(-90deg); }
.np-group-body { padding: 0 2px 16px; }
.np-group.np-closed .np-group-body { display: none; }

.np-kw {
  width: 100%;
  border: 1px solid var(--np-line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--np-text);
  outline: none;
}
.np-kw:focus { border-color: var(--np-brand); }

.np-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.np-chip {
  border: 1px solid var(--np-line);
  background: #fff;
  color: #5b5347;
  border-radius: 999px;
  padding: 7px 13px;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.np-chip:hover { border-color: var(--np-brand); color: var(--np-brand); }
.np-chip.np-on { background: var(--np-brand); border-color: var(--np-brand); color: #fff; }

.np-colors { display: flex; flex-wrap: wrap; gap: 9px; }
.np-color {
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: var(--np-muted);
  cursor: pointer;
  user-select: none;
}
.np-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .14);
  box-shadow: inset 0 0 0 2px #fff;
  transition: transform .12s;
}
.np-color:hover .np-swatch { transform: scale(1.08); }
.np-color.np-on { color: var(--np-brand); font-weight: 700; }
.np-color.np-on .np-swatch { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--np-brand); }

.np-sidebar-clear {
  margin-top: 14px;
  width: 100%;
  border: 1px solid var(--np-line);
  background: #fff;
  color: #6d6459;
  border-radius: 999px;
  padding: 10px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.np-sidebar-clear:hover:not(:disabled) { border-color: var(--np-brand); color: var(--np-brand); }
.np-sidebar-clear:disabled { opacity: .4; cursor: default; }

/* ---------- ツールバー（並び替え・件数） ---------- */
.np-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 15px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--np-line);
}
.np-toolbar-left { display: flex; align-items: center; gap: 14px; }
.np-toolbar-count { font-size: 13px; color: #6d6459; white-space: nowrap; }
.np-toolbar-count b { font-size: 17px; color: var(--np-text); }
.np-sort { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--np-muted); white-space: nowrap; }
.np-sort select {
  border: 1px solid var(--np-line);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--np-text);
  background: #fff;
  cursor: pointer;
}
.np-sort select:focus { outline: none; border-color: var(--np-brand); }

.np-drawer-btn {
  display: none;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--np-brand);
  background: #fff;
  color: var(--np-brand);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* ---------- グリッド ---------- */
#np-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.np-more { text-align: center; padding: 40px 0 4px; }
.np-more button {
  border: 1px solid var(--np-brand);
  background: #fff;
  color: var(--np-brand);
  border-radius: 999px;
  padding: 13px 46px;
  font: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.np-more button:hover { background: var(--np-brand); color: #fff; }
.np-more[hidden] { display: none; }

.np-rank-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: var(--np-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.np-empty {
  padding: 64px 16px 20px;
  text-align: center;
  color: var(--np-muted);
  font-size: 14px;
  line-height: 1.9;
}
.np-empty[hidden] { display: none; }
.np-empty b { color: var(--np-brand-dark); }

/* ---------- ドロワー（スマホ） ---------- */
.np-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 12, .42);
  z-index: 390;
}
body.np-drawer-open .np-drawer-overlay { display: block; }
.np-drawer-apply { display: none; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
  .np-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 28px; }
  #np-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 900px) {
  .np-layout { display: block; }
  #np-grid { grid-template-columns: repeat(3, 1fr); }
  .np-drawer-btn { display: inline-flex; }

  .np-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 344px);
    background: #fff;
    z-index: 400;
    overflow-y: auto;
    padding: 20px 18px 20px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.16, .84, .44, 1);
    box-shadow: 0 0 44px rgba(0, 0, 0, .18);
  }
  body.np-drawer-open .np-sidebar { transform: none; }
  .np-sidebar-inner { position: static; }
  .np-drawer-close { display: block; }

  .np-drawer-apply {
    display: block;
    position: sticky;
    bottom: 0;
    margin: 16px -18px -20px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--np-line);
  }
  .np-drawer-apply button {
    width: 100%;
    background: var(--np-brand);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
}

@media (max-width: 640px) {
  #np-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .np-toolbar { flex-wrap: wrap; gap: 10px; padding-bottom: 12px; margin-bottom: 18px; }
  .np-toolbar-left { gap: 10px; }
  /* 並び替えは独立した行にして右寄せ */
  .np-sort { font-size: 11px; width: 100%; justify-content: flex-end; }
}

/* ============================================================
   人気ランキング（カテゴリータブ＋変更前と同じ横並びカード .series-grid/.series-card）
   ============================================================ */
.np-rank-tabs {
  max-width: 1400px;
  margin: 2px auto 22px;
  padding: 0 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
.np-rank-tab {
  border: 1px solid var(--np-line);
  background: #fff;
  color: #5b5347;
  border-radius: 999px;
  padding: 10px 26px;
  font: inherit;
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.np-rank-tab:hover { border-color: var(--np-brand); color: var(--np-brand); }
.np-rank-tab.np-on { background: var(--np-brand); border-color: var(--np-brand); color: #fff; }

/* 順位バッジ（変更前の .series-card-tag を大きめ・上位は強調色に。
   フォントはカード他要素と同じ（Zen Kaku Gothic New）に統一） */
.np-rank-tag {
  font-family: inherit;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 3px;
  background: rgba(45, 42, 38, .82);
}
.np-rank-tag.np-rank-top { background: var(--np-brand); }

@media (max-width: 640px) {
  .np-rank-tabs { padding: 0 20px; gap: 8px; margin-bottom: 16px; }
  .np-rank-tab { padding: 9px 20px; font-size: 12.5px; }
}

/* ============================================================
   導線改善：メインビジュアル直下「PRODUCT SEARCH」バー
   ============================================================ */
.np-ps {
  max-width: 640px;
  margin: 4px auto 24px;
  padding: 0 20px;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
.np-ps-row { display: flex; gap: 10px; }
.np-ps-kw {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  padding: 13px 20px;
  font: inherit;
  font-size: 14px;
  color: var(--np-text);
  background: #fff;
  outline: none;
}
.np-ps-kw:focus { border-color: var(--np-brand); }
.np-ps-filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--np-brand);
  background: var(--np-brand);
  color: #fff;
  border-radius: 999px;
  padding: 13px 24px;
  font: inherit;
  font-size: 13.5px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s;
}
.np-ps-filter:hover { background: var(--np-brand-dark); }
.np-ps-note {
  margin-top: 9px;
  text-align: center;
  font-size: 11.5px;
  color: var(--np-muted);
  letter-spacing: .03em;
}
@media (max-width: 640px) {
  .np-ps { padding: 0 14px; margin-bottom: 18px; }
  .np-ps-row { flex-direction: column; gap: 8px; }
  .np-ps-filter { justify-content: center; padding: 12px; font-size: 14px; }
}

/* ============================================================
   導線改善：ブランドコンセプトを簡潔化（原文は hidden で保持）
   ============================================================ */
/* ABOUT WAVE SALAD：見出し＋矢印付きテキストリンクだけの静かな見せ方 */
a.np-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding-bottom: 4px;
  font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--np-text);
  text-decoration: none;
  border-bottom: 1px solid var(--np-line);
  transition: color .2s ease, border-color .2s ease;
}
a.np-brand-link:hover { color: var(--np-brand); border-color: var(--np-brand); }
.np-brand-arrow { font-size: 14px; transition: transform .2s ease; }
a.np-brand-link:hover .np-brand-arrow { transform: translateX(4px); }

/* ============================================================
   導線改善：スマホでメインビジュアルの高さを抑えて、
   「商品を探す」に早く到達できるようにする（雰囲気は維持）
   ============================================================ */
@media (max-width: 900px) {
  .hero-v2 { height: 72vh; min-height: 480px; }
}
@media (max-width: 640px) {
  .hero-v2 { height: 64vh; min-height: 420px; }
}

/* ============================================================
   「静かなカタログ」調整
   機能はそのまま、見た目だけ: 余白を活かす / 囲み・ボーダー・ボタンを減らす
   / 商品写真を主役に / 文字情報を整理 / ベージュのアクセントを抑える
   ============================================================ */

/* ---------- ② NEWS：HERO直下のコンパクトな帯 ---------- */
.news-section {
  background: #fff;
  border-top: none;
  border-bottom: 1px solid var(--np-line-soft);
  padding: 20px 24px;
}
.news-inner { max-width: 720px; margin: 0 auto; }
.news-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--np-muted);
  text-align: center;
  margin-bottom: 8px;
}
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--np-line-soft);
  font-size: 13px;
}
.news-item:last-child { border-bottom: none; }
.news-badge { display: none !important; }
.news-date { color: var(--np-muted); font-size: 11px; letter-spacing: .04em; }
.news-text { color: var(--np-text); flex: 1; }
a.news-text:hover { color: var(--np-brand); }
.news-text::after { content: ' ›'; color: var(--np-muted); }
.news-more { margin-top: 8px; text-align: right; }
.news-more a { border-bottom: none !important; font-size: 11.5px; color: var(--np-muted); }
.news-more a:hover { color: var(--np-brand); }
.news-more a::after { content: ' ›'; }
@media (max-width: 640px) {
  .news-section { padding: 16px 18px; }
  .news-item { font-size: 12.5px; gap: 10px; }
}

/* ---------- ③ PRODUCT SEARCH：余白を詰めて上部で早く出す ---------- */
.items-section { padding: 30px 32px 26px; }
.items-inner .section-eyebrow { letter-spacing: .28em; color: var(--np-muted); }
.items-inner .section-heading { margin-bottom: 18px; letter-spacing: .06em; }
@media (max-width: 640px) {
  .items-section { padding: 22px 0 18px; }
}

/* PC：セクション見出し（商品を探す / 特集 / 人気ランキング / 新商品）の文字を控えめに */
@media (min-width: 641px) {
  .items-section .section-heading,
  .feature-banner-section .section-heading,
  .popular-series .section-heading,
  .new-arrival-section .section-heading {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: .06em;
    margin-bottom: 14px;
  }
  .items-section .section-eyebrow,
  .feature-banner-section .section-eyebrow,
  .popular-series .section-eyebrow,
  .new-arrival-section .section-eyebrow {
    font-size: 10px;
    margin-bottom: 7px;
  }
}

/* ---------- ④⑤ POPULAR / NEW：背景色と囲みを外し、写真を主役に ---------- */
.popular-series, .new-arrival-section {
  background: #fff;
  border-top: none;
  padding: 40px 0 36px;
}
.popular-series .section-eyebrow, .new-arrival-section .section-eyebrow {
  letter-spacing: .28em;
  color: var(--np-muted);
}
.np-rank-tabs { margin: 2px auto 18px; }
/* キャプションを写真の“上に重ねる”のをやめ、写真の下に静かに置く */
.popular-series .series-card, .new-arrival-section .series-card { overflow: visible; }
.popular-series .series-card-label, .new-arrival-section .series-card-label {
  position: static;
  background: none;
  padding: 9px 2px 0;
}
.popular-series .series-card-eyebrow, .new-arrival-section .series-card-eyebrow {
  color: var(--np-muted);
  letter-spacing: .16em;
}
.popular-series .series-card-name, .new-arrival-section .series-card-name {
  color: var(--np-text);
  font-size: 13px;
  text-shadow: none;
}
.popular-series .series-card-name small, .new-arrival-section .series-card-name small {
  color: var(--np-muted);
}
/* 人気ランキング：カラー名は商品名の“横”に（改行しない）。カテゴリー名(g.tab)はタブで分かるので出さない */
.np-rank-card .series-card-eyebrow { display: none; }
.np-rank-color {
  margin-left: 6px;
  color: var(--np-muted);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
/* 「NEW」タグは主張を控えめに */
.series-card-tag { background: rgba(45, 42, 38, .72); border-radius: 2px; }
@media (max-width: 640px) {
  .popular-series, .new-arrival-section { padding: 30px 0 26px; }
}

/* ---------- ⑥⑧ PRODUCTS：写真を大きく、カードの囲みを消す ---------- */
.np-layout .catalog-item {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.np-layout .catalog-item:hover {
  box-shadow: none;
  transform: translateY(-3px);
}
.np-layout .catalog-item::before { display: none !important; }
/* Mar-Style / Spring-Style を1枚画像化（3分割グリッド .wide-card-variants を JS で .wide-card-media に置換） */
.np-layout .wide-card-media { display: block; overflow: hidden; line-height: 0; }
.np-layout .wide-card-media > a { display: block; }
/* 商品画像の縦横比（通常カードもワイドカードも同じ比率にそろえる） */
.np-layout .catalog-item img.main-image { aspect-ratio: 4 / 4.5; }
/* PC表示は縦をさらに詰める */
@media (min-width: 641px) {
  .np-layout .catalog-item img.main-image { aspect-ratio: 4 / 4; }

  /* PC：カラーチップを商品名の上（画像の直下）に配置。
     .catalog-item は flex-direction:column なので order で並べ替える。 */
  .np-layout .catalog-item > img.main-image,
  .np-layout .catalog-item > .catalog-item-media,
  .np-layout .catalog-item > .wide-card-media { order: 1; }
  .np-layout .catalog-item > .color-options { order: 2; padding-top: 9px; padding-bottom: 2px; }
  .np-layout .catalog-item > .title-container { order: 3; }
  .np-layout .catalog-item > .catalog-item-subrow { order: 4; }
  .np-layout .catalog-item > .info-row { order: 5; }
  .np-layout .catalog-item > .description-with-meta,
  .np-layout .catalog-item > .composition,
  .np-layout .catalog-item > .detail-link { order: 6; }
}
/* カード内の文字情報を整理（組成テキスト・詳細ボタンは隠す。
   機能の楕円マーク .info-icons、種別(ドレープ/レース)・価格ランクの表記は表示する） */
.np-layout .catalog-item .composition,
.np-layout .catalog-item .detail-link { display: none !important; }
.np-layout .catalog-item .info-row { padding: 8px 2px 2px; }
/* 種別・ランクの2段目行を写真の縁に合わせる */
.np-layout .catalog-item .catalog-item-subrow { padding-left: 2px; padding-right: 2px; }
/* 価格ランクは丸囲みの中にアルファベット1文字（スマホの .catalog-item-rank-circle と同じデザイン） */
.np-layout .catalog-item .catalog-item-subrow .catalog-item-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #ece4d8;
  color: #6b5438;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
/* 商品名・価格・カラーchip は残す。写真の縁に合わせて左右の余白をゼロに */
.np-layout .catalog-item .title-container,
.np-layout .catalog-item .color-options {
  padding-left: 2px;
  padding-right: 2px;
}
.np-layout .catalog-item .title-container { padding-top: 12px; padding-bottom: 4px; }
/* カード下の商品名は、ランキング等の商品名(.series-card-name)と同じ書体にそろえる */
.np-layout .catalog-item h2 {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
}
.np-layout .catalog-item .price { color: var(--np-text); font-weight: 500; }
.np-layout .catalog-item .color-options { padding-top: 8px; }
#np-grid { gap: 40px 28px; }
@media (max-width: 640px) {
  #np-grid { gap: 22px 12px; }
  .np-layout .catalog-item .title-container { padding-top: 9px; }
}

/* ---------- ⑦ ABOUT WAVE SALAD：見出し＋リンクだけの静かな見せ方 ---------- */
.brand-concept { padding: 64px 32px 112px; }
.brand-concept-inner { gap: 56px; align-items: center; }
.brand-concept-media img,
.brand-concept-media video {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
.brand-concept-text .section-eyebrow {
  letter-spacing: .3em;
  color: var(--np-muted);
  font-size: 11px;
}
.brand-concept-text .section-heading {
  font-size: 22px;
  line-height: 1.7;
  margin-bottom: 4px;
}
/* 01 / 02 / 03：罫線で仕切っただけの、すっきりした3項目 */
.brand-concept-text .brand-values {
  display: flex;
  gap: 0;
  margin: 22px 0 2px;
  border-top: 1px solid var(--np-line);
}
.brand-concept-text .brand-value-item {
  flex: 1;
  min-width: 0;
  padding: 15px 14px 0;
  border-left: 1px solid var(--np-line);
  text-align: left;
}
.brand-concept-text .brand-value-item:first-child {
  border-left: none;
  padding-left: 0;
}
.brand-concept-text .brand-value-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--np-muted);
  margin-bottom: 5px;
}
.brand-concept-text .brand-value-item h3 {
  font-family: 'Shippori Mincho', serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--np-text);
  margin: 0;
}
@media (max-width: 640px) {
  .brand-concept { padding: 40px 20px 88px; }
  .brand-concept-media img,
  .brand-concept-media video { height: 240px; }
  .brand-concept-text .section-heading { font-size: 18px; }
  .brand-concept-text .brand-value-item { padding: 12px 8px 0; }
  .brand-concept-text .brand-value-item h3 { font-size: 11.5px; }
}

/* ---------- ⑦ POPULAR / NEW を「横スクロール」に統一（縦に伸びない・ボタンを増やさない） ----------
   キャプションを写真の下に置いた分、PCの1行キャップだと見切れるため、
   PC・スマホとも横スクロール＋「→」ヒントに統一し、「もっと見る」は使わない。 */
.popular-series .series-grid,
.new-arrival-section .series-grid {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  max-height: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-left: 32px;
  padding-right: 32px;
}
.popular-series .series-grid::-webkit-scrollbar,
.new-arrival-section .series-grid::-webkit-scrollbar { display: none; }
.popular-series:not(.is-expanded) .series-grid,
.popular-series.is-expanded .series-grid {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}
.series-more { display: none !important; }
.swipe-hint { display: flex !important; }
@media (max-width: 640px) {
  .popular-series .series-grid,
  .new-arrival-section .series-grid { padding-left: 18px; padding-right: 18px; }
}
/* 新商品(NEW ARRIVAL)はカード枚数が少ないので、PCでは折り返して中央揃えにする
   （人気ランキングは枚数が多いので横スクロールのまま） */
@media (min-width: 641px) {
  .new-arrival-section .series-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
  .new-arrival-section .swipe-hint { display: none !important; }
}

/* ============================================================
   スマホ表示の追加調整
   ============================================================ */
@media (max-width: 640px) {
  /* ── フッターをコンパクトに・余白を詰める・会社の紹介文/住所は非表示 ── */
  .site-footer { padding: 26px 20px 14px; }
  .footer-inner { grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
  .footer-brand-desc,
  .footer-brand-company { display: none; }
  .footer-brand-logo { font-size: 15px; letter-spacing: 0.1em; margin-bottom: 4px; }
  .footer-brand-link { margin-top: 2px; font-size: 11px; }
  .footer-col h4 { font-size: 12px; margin-bottom: 4px; }
  .footer-col a { font-size: 11.5px; padding: 3px 0; }
  .footer-bottom { padding-top: 10px; font-size: 10px; }

  /* ── 「条件で絞り込む」バーとカテゴリー画像の間をもう少しあける ── */
  .np-ps { margin-bottom: 32px; }

  /* ── 右下ボタン：トップに戻る → 絞り込みを開く（小さめ） ── */
  .back-to-top { display: none !important; }
}

/* 絞り込みFAB（スマホのみ表示。JSで body 直下に生成） */
.np-fab-filter {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 999;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--np-brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.np-fab-filter svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .np-fab-filter { display: flex; }
}
/* 絞り込みパネル（ドロワー）が開いている間は、絞り込みを開くボタンを隠す */
body.np-drawer-open .np-fab-filter,
body.np-drawer-open .np-drawer-btn { display: none !important; }