/*! fk-top-v2.css — design build values
 * top-page sections only
 */
/* ── src/css/base.css ── */
/*!
 * fk-top base.css
 * #fkTop 配下だけに効くリセットと共通パーツ。
 * グローバルリセット（*{...}）と !important は使わない（アレックス指示）。
 */

/* #fkTop の子孫だけ、意図しない親サイトのbox-sizingに引きずられないようにする */
#fkTop, #fkTop *, #fkTop *::before, #fkTop *::after{
  box-sizing:border-box;
}

#fkTop{
  font-family:var(--fkTop-font);
  color:var(--fkTop-ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#fkTop a{
  color:inherit;
  text-decoration:none;
}

#fkTop img{
  display:block;
  max-width:100%;
  border:0;
}

/* P1-10: 画像なし込み全<img>の既定オブジェクトフィット。
   個別サイズは各コンポーネントCSSで .fk-top__img に width/height/aspect-ratioを与える。

   ★ height は auto にすること（2026-08-17に実描画で検出した不具合の再発防止）。
     以前ここは height:100% だった。.fk-top__row は display:flex（align-items:stretch）
     なので、カードの <a> は行の最大高さまで引き伸ばされて「確定した高さ」を持つ。
     その子の画像に height:100% を与えると、画像がカード全体の高さを食い尽くし、
     aspect-ratio 指定（定番アイテム 1:1／特集 4:3）が無効化される。
     実測では 定番カードの画像が 142×142 ではなく 142×230 になり、
     商品名・★・価格・バッジがカードの外へ押し出されて欠けていた（特集も同様に潰れていた）。
     ピクセル指定の箇所（cat-row/grid/minicards/rank/new-items/brands）は height を
     自分で指定しているため影響を受けず、aspect-ratio に頼る2箇所だけが壊れる=気付きにくい。 */
#fkTop .fk-top__img{
  width:100%;
  height:auto;
  object-fit:cover;
  background:var(--fkTop-img);
  border-radius:6px;
  -webkit-user-drag:none;
  user-drag:none;
}

#fkTop .fk-top__cards .fk-top__img,
#fkTop .fk-top__minicards .fk-top__img,
#fkTop .fk-top__new-items .fk-top__img,
#fkTop .fk-top__feat .fk-top__img,
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__imageContainer,
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__imageContainer{
  border:1px solid #eeeeee;
}

/* [hidden] の基本定義。
 * ★注意：この規則の詳細度は (0,1,1,0) しかなく、コンポーネント側の
 *   `#fkTop .fk-top__grid a.fk-top__no-image{display:flex}` (0,1,2,1) に負ける。
 *   実際にそれで9件目のアイテムが隠れない不具合が起きた（2026-08-07）。
 *   最終的な勝敗は zz-visibility.css（結合順の最後）で担保している。ここだけを頼らないこと。 */
#fkTop [hidden]{
  display:none;
}

/* セクション共通の間隔リズム */
#fkTop .fk-top__sec{
  padding:0 var(--fkTop-pad);
}
/* セクション間の余白。値は tokens.css の --fkTop-sec-gap が持つ（2026-08-21・80pxに統一）。
   ★幅による出し分けはしない。以前は PC だけ responsive.css で 64px に上書きしていたが、
     「統一で80px」の指示に合わせて撤去した。 */
#fkTop .fk-top__sec + .fk-top__sec{
  margin-top:var(--fkTop-sec-gap);
}
#fkTop .fk-top__sec[data-fk-section="guide"]{
  margin-bottom:var(--fkTop-sec-gap);
}
/* ★「話題のキーワード」の上だけ 40px（2026-08-21・オーナー指示）。
   直前が部門タブ（カテゴリの丸）で、丸の下のラベルぶん余白が視覚的に足されて
   80pxだと空きすぎて見えるため。**このセクションだけの例外**。
   セレクタに `+ .fk-top__sec` を残しているのは、上の規則と同じ詳細度で並ぶのを避けるため
   （同じ詳細度だと結合順しだいで効かなくなる。1つ多い方が順序に依存しない）。 */
#fkTop .fk-top__sec + .fk-top__sec[data-fk-section="keywordChips"]{
  margin-top:40px;
}
/* ★部門タブ（deptTabs）はKV直後で#fkTop内の最初のセクションのため、
   上の「+ .fk-top__sec」（直前セクション必須）が効かず margin-top:0 のままだった。
   2026-08-24・オーナー指定で40px（幅を問わず統一）。 */
#fkTop .fk-top__sec[data-fk-section="deptTabs"]{
  margin-top:40px;
}
/* ★2026-08-25：FutureShopでは「タブ」と「カテゴリーアイコン」を別パーツに分けるため、
   deptTabs セクションが2つ連続で出力される。上の 40px が2つ目にも当たり、
   タブとアイコンの間が デザインHTML（14px＝.fk-top__panes の margin-top）から
   40px に開いていた（実測）。2つ目の margin-top を 0 にして、
   .fk-top__panes の 14px がマージン相殺でそのまま出るようにする。
   1パーツにまとめた場合もこの規則は無害（2つ目が存在しないだけ）。 */
#fkTop .fk-top__sec[data-fk-section="deptTabs"] + .fk-top__sec[data-fk-section="deptTabs"]{
  margin-top:0;
}

/* セクション見出しの器。「和文の主見出し ＋ 赤い小さな英字」を並べる（2026-08-21・全セクションへ展開）。
   ★以前は justify-content:space-between だった。これは右端に「すべて見る」(.fk-top__sec-more) を
     置くための指定だったが、英字ラベルを足すと**英字が右端まで飛ばされる**ので flex-start にした。
     右端に寄せたいものは .fk-top__sec-more 側の margin-left:auto が担う（下記）。 */
#fkTop .fk-top__sec-head{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:var(--fkTop-sp-4);
  margin-bottom:var(--fkTop-sp-7);   /* 2026-08-24・オーナー指定（10px→16px） */
}
/* セクション見出し。
   P1-8 で デモの14px → 16px に上げ、さらに 2026-08-18・オーナー指定で **20px** にした。
   カテゴリの丸（64px）とラベル（13px）を大きくしたのに合わせ、見出しの階層を明確にするため。 */
#fkTop .fk-top__sec-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
}
/* 見出しに「和文＋英字」を並べたあと、これだけを右端へ送る
   （sec-head が space-between をやめたので、押し出す役はここが持つ） */
#fkTop .fk-top__sec-more{
  margin-left:auto;
  font-size:12px;   /* 添付（補足）は12pxまで可 */
  color:var(--fkTop-ink3);
}

/* 見出しに添える英字ラベル（2026-08-21・オーナー指示「お知らせ NEWS みたいに全部に展開」）。
   お知らせで作った扱いを全セクション共通へ引き上げたもの。
   ★意味は和文の主見出しが担っていて、これは装飾。よって
     ・文字サイズ規約（本文14px以上／添付12px）は適用外として10pxで置いている
     ・支援技術には読ませない（マークアップ側で aria-hidden="true" を付ける）
   読ませる情報をここに足す場合は12px以上へ上げ、aria-hidden も外すこと。 */
#fkTop .fk-top__sec-en{
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.12em;   /* 10pxだと字が詰まって潰れて見えるので字間を開ける */
  color:var(--fkTop-brand-red);
  white-space:nowrap;
}
#fkTop .fk-top__sec-lead{
  font-size:12px;   /* 添付（補足）は12pxまで可 */
  color:var(--fkTop-ink3);
  margin:calc(var(--fkTop-sp-2) * -1) 0 var(--fkTop-sp-5);
  line-height:1.5;
}

/* 商品名など2行クランプの共通ユーティリティ（P0-3）。
   line-height/font-sizeが違う箇所は各コンポーネントで上書きしつつ利用する。 */
#fkTop .fk-top__clamp2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-all;
}

/* データ0件などでJSがsectionごと非表示にする際に使うクラス（section-registry.js） */
#fkTop [data-fk-section].fk-top__is-empty,
#fkTop [data-fk-section].fk-top__is-off{
  display:none;
}

/* ── src/css/components/scroll-row.css ── */
/*!
 * fk-top scroll-row.css
 * 横スクロール列（カテゴリ・商品カード・ランキング・特集・新着・ブランド共通）の器。
 * 個々の幅・アスペクト比は各コンポーネントCSSで指定する。
 */
#fkTop .fk-top__row{
  display:flex;
  gap:var(--fkTop-sp-5);
  overflow-x:auto;
  margin:0 calc(var(--fkTop-pad) * -1);
  padding:0 var(--fkTop-pad) var(--fkTop-sp-7);
  cursor:grab;
  user-select:none;
  /* ★ scrollbar-width / scrollbar-color は指定しない（2026-08-18）。
     Chromium 121以降は、この2つのどちらかが指定されていると
     **その要素の ::-webkit-scrollbar 系の指定を全て無視する**。
     結果、下の「高さ3px」も「トラックの左マージン16px」も効かなくなり、
     ブラウザ標準のスクロールバーが**コンテナの左端いっぱい（x=0）から**描かれる。
     この列は「見切れをスクロールの合図にする」ため負のマージンで画面端まで広げてあるので、
     バーが画面の左端に貼り付いて見える（オーナー指摘・2026-08-18）。
     Firefoxではバーが標準幅に戻るが、対象はiOS Safari/Android Chrome（どちらもオーバーレイ表示で
     ほぼ見えない）と、確認に使うデスクトップChromeなので、こちらを優先する。 */
}
#fkTop .fk-top__row.fk-top__is-dragging{
  cursor:grabbing;
}
#fkTop .fk-top__row a{
  -webkit-user-drag:none;
}
#fkTop .fk-top__row::-webkit-scrollbar{
  height:3px;
}
/* トラックの開始位置を中身の左端（16px）に揃える＝バーが画面の端から始まらないようにする。
   デモ（demo-top-v3）も同じ指定を持っていた。 */
#fkTop .fk-top__row::-webkit-scrollbar-track{
  background:transparent;
  margin-left:var(--fkTop-pad);
  margin-right:var(--fkTop-pad);
}
#fkTop .fk-top__row::-webkit-scrollbar-thumb{
  background:var(--fkTop-line2);
  border-radius:999px;
}

/* 2段重ね横スクロール（特集）用のgrid版コンテナ */
#fkTop .fk-top__row--grid{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);
  gap:var(--fkTop-sp-6) var(--fkTop-sp-5);
}

/* ── src/css/components/hero.css ── */
/*!
 * fk-top hero.css
 * 既存KVスライダー（実測確定：.item__slider__list、slick稼働中）の再スキン。
 * 新規スライダーは追加しない。centerMode/centerPadding はJS側（hero-slider.js）で設定し、
 * ここでは見た目（4:3化・角丸・ドットのピル表現）だけを扱う。
 * #fkTopの外（スライドショー管理領域）にあるため body.fs-body-top スコープ。
 */
/* ★ここから下はSP（〜1200px）専用（2026-08-18）。
   実サイトのPCのKVは **実寸1200×400** の別画像を1枚ずつ表示している（実測）。
   モバイルは1040×1040の正方形。つまりPC/SPで画像セットが別。
   ここで無限定に aspect-ratio:4/3 を当てると、PCの1200×400バナーを1200×900の枠へ
   object-fit:cover で押し込むことになり、**バナーの大半が切り落とされる**。
   4:3化・角丸・ドットのピル表現はSPの改善なので、SP帯域に閉じ込める。
   PCのKVをどう扱うかは、PCデザインを詰めるときに別途決める。 */
/* ★2026-08-26：KVのマークアップを実サイトに合わせて <ul class="item__slider__list"> ／
   <li class="item__slider__list__content"> に揃えた（パーツ02を画像直書き方式へ変更）。
   ul/li はブラウザ既定で margin-block:1em ／ padding-inline-start:40px ／ list-style:disc を持つ。
   実サイト側CSSに依存せず単体で正しく出るよう、ここで打ち消す。
   ※PC（1201px〜）の全幅化は下の負マージンが後勝ちで上書きする。 */
/* slick の初期化前（および jQuery/slick が無くて初期化できなかった場合）に、
   スライドが全部縦積みになるのを防ぐ。1枚目だけ静止画として見せる。
   ★2026-08-26：パーツ02のインライン<style>からこちらへ移動。 */
/* KVは「読み込むまで白 → 準備できたらふんわり表示」（2026-09-09・オーナー指示）。
   ★器は常に白で見えたままにし、フェードさせるのは中身（リスト）だけ。
     器ごと opacity:0 にすると、器の白も一緒に消えて背景が透けるため。
   ★高さは下の `:not(.slick-initialized)` で予約済み。opacity はレイアウトに影響しないので、
     フェード中も場所は動かない。
   ★フェイルセーフ：JSが is-fk-hero-ready を付けられなくても、3秒後に必ず表示する。
     animation は delay 中は値を持たない（fill が forwards のみ）ので、
     通常どおり準備できた場合は下のクラス指定が先に効く。 */
.item__slider{
  overflow:hidden;
  background:#fff;
}
.item__slider__list{
  opacity:0;
  transition:opacity .45s ease;
  animation:fkHeroFailsafe .45s ease 3s forwards;
}
.item__slider.is-fk-hero-ready .item__slider__list,
.item__slider__list.slick-initialized{
  opacity:1;
}
@keyframes fkHeroFailsafe{
  to{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .item__slider__list{
    transition:none;
    animation-duration:.01s;
  }
}

/* ★KV画像の「読み込み時に実寸で一瞬出る」対策（2026-09-09）。
   スライドの <img> は width="1448" height="1086" の属性付きで出力される。
   この属性は presentational hint として width:1448px / height:1086px を作るため、
   これを打ち消すCSSが当たっていない一瞬だけ**実寸のまま巨大表示**になる。
   （実測：slider11.png = 1448x1086・比4:3、表示は570px）

   下の各規則は状態を条件にしている：
     ・`:not(.slick-initialized)` … slick初期化前だけ
     ・`.slick-slide` を含むもの  … slick初期化後だけ
     ・`body.fs-body-top` 付き    … JSがクラスを付けたあとだけ
   どれにも当てはまらない瞬間が残るので、ここで**状態に依存しない下限**を敷く。
   詳細度は (0,1,1) と低いので、上記の規則が当たる場面ではそちらが勝つ。 */
.item__slider__list img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}
.item__slider__list:not(.slick-initialized){
  height:calc(75vw - 40px);
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
}
.item__slider__list:not(.slick-initialized) > .item__slider__list__content:not(:first-child){
  display:none;
}
.item__slider__list:not(.slick-initialized) > .item__slider__list__content:first-child{
  list-style:none;
}
.item__slider__list:not(.slick-initialized) > .item__slider__list__content:first-child a,
.item__slider__list:not(.slick-initialized) > .item__slider__list__content:first-child img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
}
.item__slider__list.is-fk-hero-fallback{
  height:auto;
}
@media (min-width:1201px){
  .item__slider__list:not(.slick-initialized){
    height:calc(25vw - 45px);
    max-height:440px;
  }
}
body.fs-body-top .item__slider__list:not(.slick-initialized) > .item__slider__list__content:not(:first-child){
  display:none;
}
body.fs-body-top .item__slider__list:not(.slick-initialized) > .item__slider__list__content:first-child{
  list-style:none;
}
body.fs-body-top .item__slider__list:not(.slick-initialized) > .item__slider__list__content:first-child a,
body.fs-body-top .item__slider__list:not(.slick-initialized) > .item__slider__list__content:first-child img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
}

body.fs-body-top .item__slider__list{
  margin:0;
  padding:0;
  list-style:none;
}
body.fs-body-top .item__slider__list .item__slider__list__content{
  list-style:none;
}

@media (max-width:1200px){
  body.fs-body-top .item__slider__list{
    padding:0; /* centerPaddingはslick側のインラインstyleで付与される想定。ここでは上書きしない */
  }
  body.fs-body-top .item__slider__list .slick-slide{
    padding:0 5px; /* スライド間の見た目の隙間。実測して要調整（NOTES.md） */
  }
  /* 現状KV画像は1040×1040の正方形（実測）。4:3の枠にobject-fit:coverで暫定対応。
     11枚を4:3で作り直した後もこの指定はそのまま安全に使える。 */
  body.fs-body-top .item__slider__list .slick-slide a,
  body.fs-body-top .item__slider__list .slick-slide img{
    display:block;
    width:100%;
    /* ★height:auto は必須（2026-08-25）。FutureShopのスライドショーが出力する
       <img width="1448" height="1086"> の height 属性は presentational hint として
       height:1086px を作り、幅と高さが両方確定するため aspect-ratio が無視される。
       実測でKVが1086px高のまま巨大表示になった。height:auto で属性を打ち消す。 */
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:10px;
  }

  /* ドット：既存はslickの標準ドット（.slick-dots）。現在地だけ横長ピルにする。
     slickの生成マークアップは安定しているため、このセレクタは信頼して良い。 */
  body.fs-body-top .item__slider__list ~ .slick-dots,
  body.fs-body-top .slick-dots{
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
    margin-top:10px;
    list-style:none;
    padding:0;
  }
  body.fs-body-top .slick-dots li{
    width:9px;
    height:9px;
  }
  body.fs-body-top .slick-dots li button{
    appearance:none;
    border:0;
    width:9px;
    height:9px;
    border-radius:999px;
    background:var(--fkTop-line2);
    font-size:0;
    color:transparent;
    padding:0;
    transition:width .2s;
  }
  body.fs-body-top .slick-dots li.slick-active{
    width:28px;
  }
  body.fs-body-top .slick-dots li.slick-active button{
    width:28px;
    background:var(--fkTop-ink);
  }
}

/* ══════════════════════════════════════════════════════════════
   PC（1201px〜）のKV（2026-08-18・オーナー指示「幅いっぱい・常時複数枚・スマホと同じ感じ」）
   ★2026-08-20：オーナー指示「PC時のスライダーをもう少し大きく」で **5枚→4枚**。
     枚数を決めているのは hero-slider.js の slidesToShow（本番）と index.html のモックCSS。
     このファイルは見た目（間隔・角丸・4:3）だけを持ち、枚数には関与しない。
   ══════════════════════════════════════════════════════════════
   実サイトのPCは .item__slider__list が1200pxの器に収まり、1200×400のバナーを1枚ずつ出している（実測）。
   指示は「画面幅いっぱいに流して5枚見せる」なので、器の制約を外して全幅にし、
   1枚あたりを 4:3 のカードにする（モバイルと同じ見え方）。

   ★2026-08-20：オーナーからKV11枚が支給され、**全点 1448×1086（ちょうど4:3）**だった。
     ここで長く懸案だった「PCのKV画像を4:3で作り直す」は解消済み。
     PCの1200×400の横長バナーは、この4:3の11枚に置き換わる前提。
     （本番のKV差し替えはFutureShop管理画面のスライドショー設定で行う。実装側の作業ではない）

   ★投入前チェック：`50vw` はスクロールバーの幅も含む。縦スクロールバーが常時表示される環境
     （Windows／macOSで「常にスクロールバーを表示」設定）では、この全幅指定が
     スクロールバー幅ぶん（約15px）はみ出して横スクロールが出る可能性がある。
     実機で横スクロールが出ないことを必ず確認すること。出る場合は全幅をやめて
     器（1200px）内に収める判断もある。 */
@media (min-width:1201px){
  /* 器から抜ける方法：
     KVを1200pxに絞っているのは祖先の div.wrapper（max-width:1200px・margin:0 auto／実測）。
     wrapper自体を広げると全ページの本文が広がってしまうので、KVだけ負のマージンで外へ出す。
     ★width は指定しない。ブロック要素なので幅はマージンから自動で決まり（＝100vw相当）、
       padding は幅に加算されない。width:100vw と書くと padding の分だけはみ出す
       （実測：1280px幅で列が1360pxになり横スクロールが出た）。 */
  body.fs-body-top .item__slider__list{
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  /* slickが slidesToShow（現在4）で幅を割り当てる。CSSは見た目（間隔・角丸・比率）だけを持つ */
  body.fs-body-top .item__slider__list .slick-slide{
    padding:0 5px;
  }
  body.fs-body-top .item__slider__list .slick-slide a,
  body.fs-body-top .item__slider__list .slick-slide img{
    display:block;
    width:100%;
    /* ★height:auto は必須（2026-08-25）。FutureShopのスライドショーが出力する
       <img width="1448" height="1086"> の height 属性は presentational hint として
       height:1086px を作り、幅と高さが両方確定するため aspect-ratio が無視される。
       実測でKVが1086px高のまま巨大表示になった。height:auto で属性を打ち消す。 */
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:10px;
  }
  body.fs-body-top .slick-dots{
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
    margin-top:10px;
    list-style:none;
    padding:0;
  }
  /* ★2026-08-25：PC帯域にドット本体（li / button / active）の指定が無く、
     slick標準の20pxドットのまま＝SPと見た目が違っていた（デザインHTMLは
     モックCSS側でメディアクエリ外にこの指定を持っていたため一致して見えていた）。
     SP側（max-width:1200px）と同じピル表現をPCにも当てる。 */
  body.fs-body-top .slick-dots li{
    width:9px;
    height:9px;
  }
  body.fs-body-top .slick-dots li button{
    appearance:none;
    border:0;
    width:9px;
    height:9px;
    border-radius:999px;
    background:var(--fkTop-line2);
    font-size:0;
    color:transparent;
    padding:0;
    transition:width .2s;
  }
  body.fs-body-top .slick-dots li.slick-active{
    width:28px;
  }
  body.fs-body-top .slick-dots li.slick-active button{
    width:28px;
    background:var(--fkTop-ink);
  }
}

/* FutureShopテーマ側のslick/button指定に負けないため、KVドットだけ最後に固定する。 */
body.fs-body-top .item__slider .slick-dots{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  margin:15px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  line-height:0 !important;
}
body.fs-body-top .item__slider .slick-dots li{
  flex:0 0 auto !important;
  width:9px !important;
  height:9px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  line-height:0 !important;
  transition:width .2s !important;
}
body.fs-body-top .item__slider .slick-dots li.slick-active{
  width:28px !important;
}
body.fs-body-top .item__slider .slick-dots li button{
  display:block !important;
  appearance:none !important;
  border:0 !important;
  width:9px !important;
  height:9px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  background:var(--fkTop-line2) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
  transition:width .2s !important;
}
body.fs-body-top .item__slider .slick-dots li.slick-active button{
  width:28px !important;
  background:var(--fkTop-ink) !important;
}
body.fs-body-top .item__slider .slick-dots li button::before{
  content:none !important;
  display:none !important;
}

/* ── src/css/components/dept-tabs.css ── */
/*!
 * fk-top dept-tabs.css
 * 部門タブ＋タブ連動アイテム（#fkTop 配下・新規ブロック）。
 * FutureShop標準パーツではなくカスタムJS（dept-tabs.js）で動く。
 */

/* タブ */
#fkTop .fk-top__tabs{
  display:flex;
  gap:0;
  justify-content:space-between;
  overflow-x:auto;
  border-bottom:1px solid var(--fkTop-line);
  scrollbar-width:none;
  margin:0 calc(var(--fkTop-pad) * -1);
  padding:0 var(--fkTop-pad);
}
#fkTop .fk-top__tabs::-webkit-scrollbar{ display:none; }
/* タブ本体。
 * ★ button と a の両方を対象にする。子カテゴリが3未満の部門は dept-tabs.js が
 *   button を <a data-fk-tab-fallback> へ置換して縮退する（アレックス設計の縮退パス）。
 *   要素セレクタを button だけにすると、縮退したタブが無スタイルで描画され、
 *   文字サイズも揃わずタブ列が崩れる（2026-08-07に実描画で検出した不具合）。 */
#fkTop .fk-top__tabs button,
#fkTop .fk-top__tabs a{
  flex:none;
  /* P1-9: タップ領域確保 */
  min-width:var(--fkTop-tap);
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;   /* 2026-08-24：アクティブ下線(::after)の位置基準にする */
  background:transparent;
  border:0;
  padding:16px 8px 10px;   /* 2026-08-18・オーナー指定（13px 9px → 16px 8px 10px）。文字を下線寄りに置く */
  font-size:15px;          /* 2026-08-24・オーナー指定（14px → 15px） */
  color:var(--fkTop-ink) !important;
  white-space:nowrap;
  font-family:var(--fkTop-font);
  cursor:pointer;
  letter-spacing:0;
  text-decoration:none;
  margin-top:8px;   /* 2026-08-18・オーナー指定。KVのドットとタブ文字の間を空ける */
}
/* アクティブ下線（2026-08-24・オーナー指定：2px→3px・端を丸く）。
   border-bottomは直線の端を丸められない（border-radiusは箱の角にしか効かない）ため、
   ::afterの棒に置き換えた。非アクティブ時は透明のまま場所だけ確保する。 */
#fkTop .fk-top__tabs button::after,
#fkTop .fk-top__tabs a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:transparent;
}
#fkTop .fk-top__tabs button.fk-top__is-on,
#fkTop .fk-top__tabs button[aria-selected="true"],
#fkTop .fk-top__tabs a.fk-top__is-on{
  color:var(--fkTop-ink);
  font-weight:700;
}
#fkTop .fk-top__tabs button.fk-top__is-on::after,
#fkTop .fk-top__tabs button[aria-selected="true"]::after,
#fkTop .fk-top__tabs a.fk-top__is-on::after{
  background:var(--fkTop-ink);
}

/* パネル
 * 表示/非表示の真実源は hidden 属性の1つだけにする（dept-tabs.jsが p.hidden を切り替える）。
 * クラスとhidden属性の二重管理はCSS詳細度の勝敗に依存する壊れやすい状態になるため避けている
 * （非表示は base.css の #fkTop [hidden]{display:none} に一本化）。 */
#fkTop .fk-top__panes{ margin-top:var(--fkTop-sp-6); }
#fkTop .fk-top__pane-note{
  font-size:12px;   /* 添付（注記） */
  color:var(--fkTop-ink3);
  margin-top:var(--fkTop-sp-4);
  line-height:1.5;
}

/* ① アイテムから探す：横1行（メンズ／キッズなど、件数のブレを横スクロールが吸収する） */
/* 横1行スクロール版。現在この器を使っているパネルは無い（2026-08-18に全部グリッドへ統一）が、
   縮退テストや将来の利用でサイズがズレないよう、丸の寸法はグリッドと同じ64pxに揃えておく。 */
/* 部門タブ（レディース／メンズ／キッズ／足袋）を切り替えたときの、
   カテゴリアイコンのふんわり表示（2026-09-09・オーナー指示）。

   切り替えは dept-tabs.js が pane の hidden 属性を付け外しして行う。
   hidden は display:none なので transition では追えないが、
   **display:none から表示に変わった瞬間 animation は最初から走る**ため、
   アニメーションなら JS を一切触らずに実現できる。

   ★animation-fill-mode は付けないこと（重要）。
     `both` や `backwards` を付けると、アニメーションが走らない環境
     （タブが非アクティブで描画が止まっている、拡張機能でアニメーション無効、等）で
     キーフレーム冒頭の opacity:0 が残り続け、**カテゴリが永久に見えなくなる**。
     fill-mode 無しなら、走らなかった場合は通常状態＝そのまま表示されるだけで済む。
     この理由から、段差をつけるための animation-delay も入れていない
     （delay 中は fill-mode 無しだと素の状態＝先に見えてしまい、かえってちらつくため）。

   ★アイコンは loading="lazy"。隠れているペインの画像は表示された瞬間に
     読み込みが始まるが、.fk-top__img が background:var(--fkTop-img) を持っているので
     フェード中は灰色の丸がプレースホルダとして見え、空欄のままにはならない。 */
@keyframes fkPaneItemIn{
  from{ opacity:0; transform:translateY(6px); }
}
#fkTop [data-fk-pane]:not([hidden]) [data-fk-item]{
  animation:fkPaneItemIn .34s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  #fkTop [data-fk-pane]:not([hidden]) [data-fk-item]{
    animation:none;
  }
}

#fkTop .fk-top__cat-row a{
  flex:none;
  width:64px;
  text-align:center;
}
#fkTop .fk-top__cat-row .fk-top__img{
  width:64px;
  height:64px;
  border-radius:50%;
}
/* （cat-row のラベル指定は上のグリッド共通規則にまとめた） */

/* レディース／足袋：P0-5 5×2グリッドを8点＋「すべて見る」タイル構成にして
   実データ数のブレに耐えさせる（9〜10件超の場合はdept-tabs.jsが8件目以降を隠す）。 */
#fkTop .fk-top__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));   /* 2026-08-24・オーナー指定（5列→4列） */
  gap:var(--fkTop-sp-6) var(--fkTop-sp-4);
  /* ★ margin:0 が要る。このブロックは .fk-top__row と併用しており、
     .fk-top__row の「画面端まで流す」負の左右マージン（0 -16px）を打ち消さないと、
     グリッドだけが左右16pxはみ出して、セクション見出しや他セクションの1件目と左端が揃わない。
     実測（2026-08-17）では グリッド左端 x=0px／他セクション x=16px でズレていた。
     overflow:visible も同様に .fk-top__row の overflow-x:auto を戻す（グリッドは横スクロールしない）。 */
  margin:0;
  overflow:visible;
  padding:10px 0 var(--fkTop-sp-7);   /* 2026-08-18・オーナー指定。タブ下線とカテゴリの間を空ける */
}
#fkTop .fk-top__grid a{
  width:auto;
  min-width:0;
  text-align:center;
}
/* 丸のサイズ（2026-08-18・オーナー指定で 58px → 64px）。
   4列の1カラム幅は (390 - 32 - 8×3) ÷ 4 = 83.5px なので、64pxは余裕を持って収まる
   （2026-08-24・5列→4列化で再計算。旧5列時は65.2pxでぎりぎりだった）。 */
#fkTop .fk-top__grid .fk-top__img{
  width:64px;
  height:64px;
  margin:0 auto;
  border-radius:50%;
}
/* ラベルは2行で高さを固定する（2026-08-18）。
   実カテゴリ名をそのまま出すと長さがまちまちで、グリッドの段の高さが揃わない。
   実測：「レギンス・スパッツ」「レッグウォーマー」が2行、「ルーム・トレーニングウェア」が**3行**になり、
   メンズの2段目だけが高くなって丸の間隔が不揃いに見えていた。
   商品名と同じ扱い（P0-3）で2行クランプ＋高さ固定にし、どのセルも同じ高さにする。
   ★副作用：2行に収まらない名前は末尾が切れる。運用側で表示名を短くするのが本来の解
     （例「ルーム・トレーニングウェア」→「ルームウェア」）。README §12.10.10 参照。 */
#fkTop .fk-top__grid small,
#fkTop .fk-top__cat-row small{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  /* 2026-08-18・オーナー指定：10.5px → 13px / weight 500。
     高さの計算だけ 13.5px 基準（指定どおり）。実測 13.5×1.3×2 = 35.1px で、
     13pxの2行（33.8px）よりわずかに余裕がある。 */
  /* カテゴリ名だけは13px（2026-08-18・オーナー指定）。
     5列グリッドの1セルが狭く（モバイルで65px）、14pxだと「レギンス・スパッツ」等が
     2行に収まらず末尾が切れるため。高さの計算はオーナー指定どおり13.5px基準。 */
  font-size:13px;
  font-weight:500;
  color:var(--fkTop-ink2);
  margin-top:var(--fkTop-sp-3);
  line-height:1.3;
  height:calc(13.5px * 1.3 * 2);
}
/* データ数がJSで8件に満たない場合でも、hiddenが付いた要素はgrid上で場所を取らない */
#fkTop .fk-top__grid a[hidden]{ display:none; }

/* 「すべて見る」タイル（グリッド版・丸アイコンを踏襲した破線丸＋矢印） */
#fkTop .fk-top__grid a.fk-top__more .fk-top__img{
  background:transparent;
  border:1.5px dashed var(--fkTop-line2);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* 矢印。フォントの「→」は環境ごとに太さ・長さが変わるので、
   お知らせの View More と同じ SVGマスク（--fkTop-arrow-right）で描いて形を固定する
   （2026-08-21。以前は content:"→" だった）。 */
#fkTop .fk-top__grid a.fk-top__more .fk-top__img::after{
  content:"";
  width:19px;
  height:10px;
  background:var(--fkTop-ink3);
  -webkit-mask:var(--fkTop-arrow-right) no-repeat center / contain;
  mask:var(--fkTop-arrow-right) no-repeat center / contain;
}
#fkTop .fk-top__grid a.fk-top__more small{
  color:var(--fkTop-ink2);
  font-weight:700;
}

/* アウトレット：商品カードで出す（部門トップへの導線が強いため「すべて見る」を残す） */
#fkTop .fk-top__minicards a{
  flex:none;
  width:120px;   /* 2026-08-24・オーナー指定（96px → 120px） */
}
#fkTop .fk-top__minicards .fk-top__img{
  width:120px;
  height:120px;
}
#fkTop .fk-top__minicards b{
  display:block;
  font-size:14px;
  font-weight:700;
  margin-top:var(--fkTop-sp-4);
  line-height:1.35;
  /* P0-3: 商品名を2行クランプ＋固定高さ */
  height:calc(14px * 1.35 * 2);
}
#fkTop .fk-top__minicards .fk-top__price{
  font-size:14px;
  font-weight:700;
  margin-top:var(--fkTop-sp-1);
}
#fkTop .fk-top__minicards .fk-top__price s{
  font-size:12px;   /* 添付（元の値段） */
  font-weight:400;
  color:var(--fkTop-ink4);
  margin-left:4px;
}
#fkTop .fk-top__minicards a.fk-top__more .fk-top__img{
  background:transparent;
  border:1.5px dashed var(--fkTop-line2);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
}
#fkTop .fk-top__minicards a.fk-top__more .fk-top__img::after{
  content:"→";
  font-size:20px;
  color:var(--fkTop-ink3);
  line-height:1;
}
#fkTop .fk-top__minicards a.fk-top__more b{
  color:var(--fkTop-ink2);
  font-weight:700;
  height:auto;
  -webkit-line-clamp:unset;
}

/* ── 壊れる入力への耐性 ── */
/* 画像取得失敗（img onerror）時：丸画像をやめ、テキストのみのピルにする（dept-tabs.jsが付与） */
#fkTop .fk-top__cat-row a.fk-top__no-image,
#fkTop .fk-top__grid a.fk-top__no-image{
  display:flex;
  align-items:center;
  justify-content:center;
}
#fkTop .fk-top__cat-row a.fk-top__no-image .fk-top__img,
#fkTop .fk-top__grid a.fk-top__no-image .fk-top__img{
  display:none;
}
#fkTop .fk-top__cat-row a.fk-top__no-image,
#fkTop .fk-top__grid a.fk-top__no-image{
  width:auto;
}
#fkTop .fk-top__cat-row a.fk-top__no-image small,
#fkTop .fk-top__grid a.fk-top__no-image small{
  margin-top:0;
  padding:8px 12px;
  border:1px solid var(--fkTop-line2);
  border-radius:999px;
  background:var(--fkTop-surf2);
  white-space:nowrap;
}

/* ── src/css/components/chips.css ── */
/*!
 * fk-top chips.css
 * 話題のキーワード（#付きチップ）
 */
#fkTop .fk-top__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;   /* 2026-08-18・オーナー指定（8px → 10px） */
}
/* 高さについて（2026-08-17・オーナー指摘「デモの方が洗練されている」への対応）：
 * 一時 min-height:44px（--fkTop-tap）を入れていたが、チップは9個が折り返して並ぶため
 * 44pxにするとブロック全体が 144px → 200px に膨らみ、デモの密度と別物になっていた。
 * チップはP0/P1のタップ領域指摘対象（こだわり検索トリガー・ヘッダーアイコン・タブ）に
 * 含まれていない。デモ寸法（実測30px高）へ戻す。
 * 30px は WCAG 2.5.8「ターゲットのサイズ（最小）」レベルAAの24×24px基準を満たす
 * （44pxはレベルAAAの2.5.5基準）。
 * ★その後 2026-08-18 のオーナー指定で 15px/line-height:1.5・gap:10px になり、
 *   実測の高さは41pxになった（AAの24pxは当然満たす。AAAの44pxには3px届かない）。 */
#fkTop .fk-top__chips a{
  display:inline-flex;
  align-items:center;
  /* 2026-08-18・オーナー指定：12px/line-height:1 → 15px/1.5 */
  font-size:15px;
  font-weight:600;   /* 2026-08-24・オーナー指定 */
  color:var(--fkTop-ink);
  border:1px solid var(--fkTop-line2);
  border-radius:999px;
  padding:var(--fkTop-sp-4) var(--fkTop-sp-6);
  background:var(--fkTop-surf);
  line-height:1.5;
}
#fkTop .fk-top__chips a::before{
  content:"#";
  color:var(--fkTop-ink4);
  margin-right:2px;
}
#fkTop .fk-top__chips a.fk-top__chip-lead{
  background:var(--fkTop-ink);
  color:#fff;
  border-color:var(--fkTop-ink);
  font-weight:700;
}
#fkTop .fk-top__chips a.fk-top__chip-lead::before{
  color:rgba(255,255,255,.5);
}

/* ── src/css/components/cards.css ── */
/*!
 * fk-top cards.css
 * 「みんなが選ぶ、定番アイテム」「いま、売れているアイテム」「注目の新着アイテム」の商品カード。
 */

/* ── 定番アイテム ── */
#fkTop .fk-top__cards a{
  flex:none;
  width:170px;
  color:inherit;
  text-decoration:none;
}
/* 正方形。高さは aspect-ratio で決めるので height は auto を明示する
   （base.css 側が将来また height を持ったときに、ここで確実に打ち消すため） */
#fkTop .fk-top__cards .fk-top__img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
}
#fkTop .fk-top__cards .fk-top__img.f_img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
}
/* 定番の文章（2026-08-21・オーナー指示「Hello!などの文章を追加。15px程度で」）。
   実サイトの「定番」は特集バナー＋2行のコピーという作りなので、商品名の枠をそのまま
   コピー文として使っている。
   ★2行クランプの高さは **font-size × line-height × 2**。ここを 14→15px にしたら
     下の height の 15px も必ず一緒に変える（片方だけだと3行目が見切れる or 余る）。 */
/* 定番のコピー（2026-08-24・オーナー指定）。
   ★クランプ（-webkit-line-clamp）と高さ固定をやめた。**文言は全部出す**。
     以前は「2行では切れる／4行だとPCで余る」を幅ごとの行数指定で吸収していたが、
     行数を決め打ちしない形になったので、その上書き（responsive.css の2箇所）も削除した。
   ★カードの高さは中身なりに変わる。横スクロール列（flex）とPCの4カラム（grid）は
     どちらも既定で stretch なので、**カード自体の高さは揃う**（文字量の差は下の余白になる）。
   ★マークアップから `fk-top__clamp2` クラスを外してある。
     あのクラスは base.css で **-webkit-line-clamp:2** を持っており、
     ここで打ち消さないと2行で切れてしまうため（クラス名の意味とも合わなくなる）。 */
#fkTop .fk-top__cards b{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:15px;
  font-weight:600;
  margin-top:16px;
  line-height:1.5;
}
#fkTop .fk-top__cards .fk-top__rev{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:var(--fkTop-sp-2);
  min-height:12px; /* Revico取得待ち/非表示でもレイアウトが跳ねないよう最小高さを確保 */
}
#fkTop .fk-top__cards .fk-top__stars{ display:flex; gap:1.5px; }
#fkTop .fk-top__cards .fk-top__stars i{
  width:9px; height:9px; background:var(--fkTop-ink2);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
#fkTop .fk-top__cards .fk-top__rev small{ font-size:12px;   /* 添付（レビュー件数） */ color:var(--fkTop-ink3); }
/* 価格は <span> だが1行を占有させる（デモは <div>）。
   display:block を落とすと価格とバッジが同じ行に並び、バッジの左端がカード左辺から
   ずれる（実測 x=50.9px／正しくは16px）。 */
#fkTop .fk-top__cards .fk-top__price{
  display:block;
  font-size:14px;
  font-weight:700;
  margin-top:var(--fkTop-sp-2);
}
#fkTop .fk-top__cards .fk-top__bulk{
  display:inline-block;
  font-size:12px;   /* 添付（バッジ） */
  color:var(--fkTop-ink2);
  background:var(--fkTop-surf3);
  border-radius:3px;
  padding:2px 6px;
  margin-top:var(--fkTop-sp-3);
}

/* ── ランキング（モザイク型・2026-08-25・v2独自）──
 * オーナー支給の参考画像（レシピサイトの「人気のレシピ」）どおりのレイアウトへ全面差し替え。
 * v1の横スクロールカード（.fk-top__rank）から、1位だけ大きい「モザイク」構成に変更した。
 * v1は変更していない（このファイルは production-top-v2 限定）。
 *
 * 実装方針：ループの中身（5件）はテンプレートとしては**全部同じマークアップ**にし、
 * 「1位だけ大きい」はCSSの :first-child だけで作る。理由：
 *   ・本番テンプレートはFutureShop側のBEGIN:LOOP〜ENDで5件を一括生成する。
 *     ループ1周目だけ別マークアップにする、という制御はこの仕組みでは作れない。
 *   ・全部同じマークアップなら、モック（index.html）と本番フラグメントを
 *     同じ構造のまま保てる（1位用に特別なタグを新設していない）。
 * ★参考画像にあった「サムネ右下の点グリッドのアイコン」は意味が不明瞭
 *   （レシピサイト固有のUI要素の可能性）だったため、今回は再現していない。
 *   欲しければ別途指示をもらう。 */
#fkTop .fk-top__rankmosaic{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 16px;
  /* .fk-top__row と併用。横スクロールはさせないので、.fk-top__grid と同じやり方で
     負のマージン・overflow-x:auto・左右paddingを打ち消す（dept-tabs.css 参照）。
     ★padding:0 が必要（2026-08-25・オーナー指定）。.fk-top__row の
       padding:0 var(--fkTop-pad) ... を打ち消さないと、セクション側の余白と
       二重に効いて左右が余分に窮屈になる。 */
  margin:0;
  overflow:visible;
  padding:0;
}
/* 1位：2カラムぶん使って全幅に */
#fkTop .fk-top__rankmosaic__item:first-child{
  grid-column:1 / -1;
  grid-template-columns:60px minmax(0,1fr);
}
#fkTop .fk-top__rankmosaic__item{
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  gap:8px;
  align-items:start;
  color:inherit;
  text-decoration:none;
}
/* ★2026-08-25・オーナー指示「必ず、ここは正方形固定にしてください」。
   1位・2〜5位とも例外なく aspect-ratio:1/1（固定・全ブレークポイント共通）。
   以前は1位だけ横長（4/3.3）にしていたが、それは廃止した。
   1位が「大きい」のは正方形の一辺が長いからであって、比率を変えているからではない
   （SP：1位はgrid-column:1/-1で全幅、2〜5位は半幅／PC：1位は2fr列で2〜5位の2倍幅）。 */
#fkTop .fk-top__rankmosaic__thumb{
  display:contents;
}
#fkTop .fk-top__rankmosaic__thumb .fk-top__img{
  display:block;
  grid-column:1 / -1;
  grid-row:1;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  border:1px solid #eeeeee;
  border-radius:14px;
  background:var(--fkTop-img);
  object-fit:cover;
}
/* 順位バッジ */
#fkTop .fk-top__rankmosaic__badge{
  grid-column:1;
  grid-row:2;
  display:block;
  width:50px;
  height:50px;
  border-radius:0;
  background:transparent no-repeat center / contain;
  color:transparent;
  font-size:0;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  box-shadow:none;
}
#fkTop .fk-top__rankmosaic__item:first-child .fk-top__rankmosaic__badge{
  width:60px;
  height:60px;
}
#fkTop .fk-top__rankmosaic__item:nth-child(1) .fk-top__rankmosaic__badge{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank01.png"); }
#fkTop .fk-top__rankmosaic__item:nth-child(2) .fk-top__rankmosaic__badge{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank02.png"); }
#fkTop .fk-top__rankmosaic__item:nth-child(3) .fk-top__rankmosaic__badge{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank03.png"); }
#fkTop .fk-top__rankmosaic__item:nth-child(4) .fk-top__rankmosaic__badge{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank04.png"); }
#fkTop .fk-top__rankmosaic__item:nth-child(5) .fk-top__rankmosaic__badge{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank05.png"); }
#fkTop .fk-top__rankmosaic__title{
  grid-column:2;
  grid-row:2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:4px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--fkTop-ink);
}
#fkTop .fk-top__rankmosaic__item:first-child .fk-top__rankmosaic__title{
  margin-top:4px;
  font-size:16px;
}
/* 「説明文」枠。参考画像はレシピの紹介文だが、うちに商品説明コピーは無いため、
   代わりに既存のレビュー★＋件数（他セクションと同じ実データ源）を差し込む。
   2〜5位は参考画像どおり非表示（タイトルだけ）。 */
#fkTop .fk-top__rankmosaic__desc{
  display:none;
}
#fkTop .fk-top__rankmosaic__item:first-child .fk-top__rankmosaic__desc{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
}
#fkTop .fk-top__rankmosaic .fk-top__stars{ display:flex; gap:1.5px; }
#fkTop .fk-top__rankmosaic .fk-top__stars i{
  width:9px; height:9px; background:var(--fkTop-ink2);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
#fkTop .fk-top__rankmosaic .fk-top__rankmosaic__desc small{ font-size:12.5px; color:var(--fkTop-ink3); }

/* FutureShop レコメンドAI：ランキング枠
   AI側の同一マークアップを活かし、5件表示＋1件目だけ大きいモザイクへ整形する。 */
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fs-p-heading--lv2,
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__ButtonContainer{
  display:none !important;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slides{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:20px 16px;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  scroll-snap-type:none !important;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:nth-child(n+6){
  display:none !important;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:first-child{
  grid-column:1 / -1;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item{
  position:relative;
  display:grid !important;
  grid-template-columns:50px minmax(0,1fr);
  gap:8px;
  align-items:start;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:inherit;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:first-child .fr3-item{
  grid-template-columns:80px minmax(0,1fr);
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__link{
  display:contents !important;
  color:inherit !important;
  text-decoration:none !important;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__imageContainer{
  position:relative;
  grid-column:1 / -1;
  grid-row:1;
  display:block !important;
  width:100% !important;
  aspect-ratio:1/1;
  margin:0 !important;
  border-radius:14px;
  overflow:hidden;
  background:var(--fkTop-img);
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__rankContainer{
  position:static !important;
  grid-column:1;
  grid-row:2;
  z-index:2;
  margin:0 !important;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__rank{
  display:block !important;
  width:50px;
  height:50px;
  border-radius:0;
  background:transparent no-repeat center / contain;
  color:transparent;
  font-size:0;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  box-shadow:none;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__rank::after,
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__rankContainer::after{
  content:none !important;
  display:none !important;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:first-child .fr3-item__rank{
  width:60px;
  height:60px;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:nth-child(1) .fr3-item__rank{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank01.png"); }
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:nth-child(2) .fr3-item__rank{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank02.png"); }
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:nth-child(3) .fr3-item__rank{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank03.png"); }
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:nth-child(4) .fr3-item__rank{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank04.png"); }
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:nth-child(5) .fr3-item__rank{ background-image:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/rank05.png"); }
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__productName{
  grid-column:2;
  grid-row:2;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:10px !important;
  color:var(--fkTop-ink);
  font-family:var(--fkTop-font);
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:first-child .fr3-item__productName{
  margin-top:10px !important;
  font-size:16px;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__productPrice{
  display:none !important;
  margin-top:8px !important;
  color:var(--fkTop-ink);
  font-family:var(--fkTop-font);
  font-size:13px;
  font-weight:700;
  line-height:1.3;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__productPrice__price{
  font-size:18px;
  font-weight:800;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:first-child .fr3-item__productPrice__price{
  font-size:22px;
}
#fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-item__productPrice__addon{
  margin-left:2px;
  font-size:12px;
  font-weight:400;
}

/* ── 新着アイテム ── */
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fs-p-heading--lv2,
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__ButtonContainer{
  display:none !important;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slides{
  display:flex !important;

  overflow-x:auto !important;
  margin:0 calc(var(--fkTop-pad) * -1);
  padding:0 var(--fkTop-pad) var(--fkTop-sp-7);
  cursor:grab;
  user-select:none;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slides.fk-top__is-dragging{
  cursor:grabbing;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slides::-webkit-scrollbar{
  height:3px;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slides::-webkit-scrollbar-track{
  background:transparent;
  margin-left:var(--fkTop-pad);
  margin-right:var(--fkTop-pad);
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slides::-webkit-scrollbar-thumb{
  background:var(--fkTop-line2);
  border-radius:999px;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slide{
  display:block !important;

  width:170px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slide:nth-child(n+6){
  display:none !important;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:inherit;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__rankContainer{
  display:none !important;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__link{
  display:block !important;
  color:inherit !important;
  text-decoration:none !important;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__link,
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__link img{
  -webkit-user-drag:none;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__imageContainer{
  display:block !important;
  width:170px !important;
  height:170px !important;
  margin:0 !important;
  overflow:hidden;

}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__image{
  display:block !important;
  width:100% !important;
  height:100% !important;

}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__productName{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  height:calc(14px * 1.4 * 2);
  margin-top:var(--fkTop-sp-4) !important;
  color:var(--fkTop-ink);
  font-family:var(--fkTop-font);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__productPrice{
  display:block !important;
  margin-top:var(--fkTop-sp-2) !important;
  color:var(--fkTop-ink);
  font-family:var(--fkTop-font);
  font-size:14px;
  font-weight:700;
  line-height:1.35;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__productPrice__price{
  font-weight:800;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__productPrice__addon{
  margin-left:2px;
  font-size:12px;
  font-weight:400;
}
#fkTop .fk-top__new-items a{
  flex:none;
  width:170px;
  color:inherit;
  text-decoration:none;
}
#fkTop .fk-top__new-items .fk-top__img{
  width:170px;
  height:170px;
}
#fkTop .fk-top__new-items b{
  display:block;
  font-size:14px;
  font-weight:700;
  margin-top:var(--fkTop-sp-4);
  line-height:1.4;
  /* P0-3 */
  height:calc(14px * 1.4 * 2);
}
#fkTop .fk-top__new-items .fk-top__price{
  display:block; /* <span>なのでblock指定が要る（デモは<div>） */
  font-size:14px;
  font-weight:700;
  margin-top:var(--fkTop-sp-2);
}

/* Revicoが取得できない/未ロードの間、レビュー行は非表示（ダミー数値を出さない）。
   [hidden] 制御は analytics/section-registry.js 側が担当。見た目はここでゼロレイアウトシフトを担保する。 */
#fkTop .fk-top__rev[hidden]{ display:none; }

/* ── src/css/components/features.css ── */
/*!
 * fk-top features.css
 * 特集から探す（2段重ねの横スクロール・トップのヒーロースライダーとは別枠）
 */
#fkTop .fk-top__feat a{ width:200px; }   /* 2026-08-21・オーナー指定（150 → 200px） */
/* 4:3。高さは aspect-ratio で決めるので height:auto を明示する（base.css の解説参照）。
   height を継承すると2段グリッドの行高いっぱいまで画像が伸び、1段目のラベルが
   2段目の画像に潰される（実測 150×133／正しくは 150×112.5）。 */
#fkTop .fk-top__feat .fk-top__img{ width:200px; height:auto; aspect-ratio:4/3; }
#fkTop .fk-top__feat small{
  display:block;
  font-size:14px;
  color:var(--fkTop-ink2);
  margin-top:var(--fkTop-sp-3);
  line-height:1.4;
}

/* ── src/css/components/brands.css ── */
/*!
 * fk-top brands.css
 * ブランドから探す（横スクロールタイル）
 */
/* 素材の比率に合わせる（2026-08-18）。
   実サイトのブランド画像は 373×237／277×169 の**バナー**（ロゴだけの素材ではない）。
   デモの104×56（1.86:1）に contain で入れると上下に余白が出るうえ、
   「満足」のようにイラスト＋小さな文字で構成された素材は**その大きさでは読めない**。
   素材の比率（約1.57:1）に寄せ、読める大きさまで広げる。 */
#fkTop .fk-top__brands a{
  flex:none;
  width:160px;   /* 2026-08-21・オーナー指定（140 → 160px） */
  text-align:center;
}
/* 2026-08-21・オーナー指定（140×110 → **160×140**）。
   ★素材の比率は約1.57:1、この枠は約1.14:1。`object-fit:contain` は**幅で頭打ち**になるので、
     ロゴの描画サイズを決めるのは **width だけ**。今回は width が増えたぶんロゴも大きくなる
     （前回の 110 → 140 は height だけの変更だったため、ロゴは変わらず余白が増えただけだった）。
   ★height を増やしたぶんは上下の余白になる。実測値は下の表（README §24）参照。 */
#fkTop .fk-top__brands .fk-top__img{
  width:160px;
  height:140px;
  background:var(--fkTop-surf);
  border:1px solid var(--fkTop-line);
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  object-fit:contain; /* ブランドロゴは切り抜かず全体表示（商品写真とは要件が違う） */
}
#fkTop .fk-top__brands small{
  display:block;
  font-size:14px;
  color:var(--fkTop-ink2);
  margin-top:var(--fkTop-sp-3);
}

/* ── src/css/components/banner.css ── */
/*!
 * fk-top banner.css
 * 「お得にお買い物」（promo）の中の、画像1枚で作られたタイル。
 * 2026-08-20・オーナー支給の `assets/bnr/line.png` を出すために新設。
 *
 * ── 何をするCSSか ──
 *   **promo のレイアウトは一切変えない。** 2列＋全幅の並びも、他のタイルの見た目もそのまま。
 *   タイルの中身がテキストから画像に替わったぶんだけを吸収する。
 *   （オーナー指示「さっきのレイアウトは残しておいてよ」「これのline部分だけ差し替えるってことね」）
 *
 *   2026-08-21：**メルマガ（mail.png）も同じ形に差し替え**。1タイル目＝LINE／2タイル目＝メルマガの
 *   2枚がバナー、3タイル目（福助メンバーズ）はテキストのまま。
 *   支給素材は2枚とも **1448×1086（ちょうど4:3）・角丸なし**で仕様が揃っている。
 *
 * ── 枠線とpaddingを外す理由 ──
 *   promo のタイルは `border:1px + border-radius + padding` を持つが、
 *   支給バナーは**角丸も余白も画像に焼き込み済み**。そのまま重ねると枠が二重に見える。
 *   このタイルだけ枠とpaddingを外し、画像そのものをタイルにする。
 *
 * ── 縦位置 ──
 *   gridのセルは行の高さまで伸びる。バナー（約2.11:1）は隣の「メルマガ」タイルより背が低いので、
 *   余った分は上下に均等に振る（`align-items:center`）。画像を引き伸ばしたり切ったりはしない。
 *   ★`object-fit:cover` で高さを埋める案は採らない。左のコピーか右のクーポンアイコンが切れるため。
 */
#fkTop .fk-top__promo a.fk-top__promo-banner{
  border:0;
  padding:0;
  overflow:hidden;
  display:flex;
  align-items:center;      /* 行の高さが余ったら上下中央に置く */
  justify-content:center;
}
#fkTop .fk-top__promo a.fk-top__promo-banner img{
  display:block;
  width:100%;
  height:auto;
  /* 2026-08-21・素材が **1448×1086（ちょうど4:3）** に差し替わったのに合わせて、
     枠も 1821/864 → 4/3 に変更（オーナー指定）。素材と枠の比率が一致しているので、
     object-fit が無くても**引き伸ばしは起きない**（実測：縦の伸び0%）。
     ★素材を差し替えるときは、この比率も必ず合わせること。ズレると object-fit が無いぶん
       そのまま歪む（既定は fill）。 */
  aspect-ratio:4 / 3;
  /* 角丸について（2026-08-21に前提が変わった）。
     旧素材（1821×864）は**角に黒が焼き込まれていた**ため、CSSで切らないと四隅に黒い三角が残った。
     その黒を隠すために、素材の丸み（半径約31px）から逆算した％値を指定していた。

     ★新素材（1448×1086）は**角丸なしの緑ベタ**（実測：(0,0)=rgb(6,176,58)）。
       黒は無くなったので、角丸は**完全にCSS側の裁量**になった。
       この 1.9%/4.0% は旧素材から逆算した値がそのまま残っているもので、
       枠が4:3になったぶん **横3.3px／縦5.2px（SP）の楕円**になり、
       隣のタイル（8px）より小さく、上下左右で丸みが違う。
     → 隣のタイルと揃えるなら `var(--fkTop-radius)`（8px）1つで済む。要オーナー判断。 */
  border-radius:1.9% / 4.0%;
}

/* ══════════════════════════════════════════════════════════════
   福助メンバーズ：SPとタブレット以上で**別画像＝別の比率**
   （2026-08-21新設／2026-08-25・切り替え幅をオーナー指示で 1201px→768px に変更）
   ══════════════════════════════════════════════════════════════
   SP（〜767px）        ：全幅の横長帯  member_sp.png  2966×658（約4.5:1）
   タブレット以上（768px〜）：3カラムの1枠  member_pc.png  1448×1086（4:3）

   ★以前はタブレットもSPと同じ横長帯のままで、responsive.css側の3列化と噛み合わず
     「メンバーズだけ下に全幅ではみ出す」崩れになっていた（オーナー添付で指摘）。
     responsive.css の `.fk-top__promo a.fk-top__promo-wide{grid-column:auto}` と
     index.html の `<picture><source media="...">` も**同じ768pxに揃えてある**。
     3箇所のうち1つだけ閾値がズレると、また同じ崩れ方に戻るので要注意。
   ★上の共通規則が `aspect-ratio:4/3` を当てているので、そのままだと
     **SPで横長帯が4:3の枠に押し込まれて潰れる**（object-fit が無いので既定は fill）。
     画像ごとに比率を上書きする。
   ★比率は必ず素材の実寸で書くこと。ズレるとそのまま歪む。 */
#fkTop .fk-top__promo a.fk-top__promo-banner--member picture{
  display:block;
  width:100%;
}
#fkTop .fk-top__promo a.fk-top__promo-banner--member img{
  aspect-ratio:2966 / 658;   /* SP：横長帯 */
}
@media (min-width:768px){
  #fkTop .fk-top__promo a.fk-top__promo-banner--member img{
    aspect-ratio:1448 / 1086;  /* タブレット以上：4:3（LINE／メルマガと同じ形） */
  }
}

/* メンバーズは**地が白**なので、罫線が無いとページの白に溶けてタイルの端が分からない
   （LINE＝緑／メルマガ＝水色は地の色で境界が分かるが、これだけ分からない）。
   2026-08-21・オーナー指示「このバナーはうっすいグレーの線を入れて欲しい」。
   色はお知らせの罫線と同じ #e8e8e8（同日オーナーが「薄い罫線」として選んだ値に合わせた）。
   ★img に付ける（a ではなく）。角丸も img が持っているので、線が角に沿う。 */
#fkTop .fk-top__promo a.fk-top__promo-banner--member img{
  border:1px solid #e8e8e8;
}

/* ── src/css/components/promo.css ── */
/*!
 * fk-top promo.css
 * お得にお買い物（旧Promotion：LINE／メルマガ／福助メンバーズ）
 */
#fkTop .fk-top__promo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--fkTop-sp-5);
}
#fkTop .fk-top__promo a{
  border:1px solid var(--fkTop-line);
  border-radius:var(--fkTop-radius);
  padding:12px 12px 14px;
  min-height:var(--fkTop-tap);
}
#fkTop .fk-top__promo b{
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
}
#fkTop .fk-top__promo span{
  display:block;
  font-size:12px;   /* 添付（説明文） */
  color:var(--fkTop-ink3);
  margin-top:var(--fkTop-sp-3);
  line-height:1.5;
}
#fkTop .fk-top__promo a.fk-top__promo-wide{
  grid-column:1 / -1;
}

/* ── src/css/components/guide.css ── */
/*!
 * fk-top guide.css
 * ご利用ガイド（配送・支払い・返品・FAQ・お問い合わせ・福助についてを統合）
 */
#fkTop .fk-top__guide{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--fkTop-line);
  border:1px solid var(--fkTop-line);
  border-radius:var(--fkTop-radius);
  overflow:hidden;
}
#fkTop .fk-top__guide a{
  background:var(--fkTop-surf);
  padding:13px 12px;
  font-size:14px;
  font-weight:600;
  color:var(--fkTop-ink2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--fkTop-tap);
}
#fkTop .fk-top__guide a::after{
  content:"\203A";
  color:var(--fkTop-ink4);
  font-size:14px;
}
@media (max-width:767px){
  #fkTop .fk-top__guide:has(> a:first-child:nth-last-child(odd))::after{
    content:"";
    display:block;
    min-height:var(--fkTop-tap);
    background:var(--fkTop-surf);
  }
}

/* ── src/css/components/news.css ── */
/*!
 * fk-top news.css
 * お知らせ（トップの最後尾に配置。1.1画面目から退避させた結果を反映）
 *
 * ── 2026-08-21：オーナー支給の参考画像どおりに作り直した ──
 *   旧：枠線で囲った箱の中に「日付＋タイトル」の1行リスト
 *   新：
 *       NEWS  お知らせ                 ← 見出し（英字が大きい赤・和文が小さい黒）
 *       ─────────────────
 *       2026.07.13  [お知らせ]          ← 日付＋赤いカテゴリのピル
 *       8月8日(土)〜16日(日)の…         ← タイトル（大きめ・太字）
 *                     View More →       ← 右寄せ・赤
 *       ─────────────────
 *
 *   ★カテゴリのピル（「お知らせ」）は新しく増えた情報。
 *     実データ側にカテゴリが無い場合に空のピルが出ないよう、
 *     **中身が空なら出さない**（`:empty` で消す）ようにしてある。
 *   ★「View More」は英字だが、行き先はお知らせ詳細。リンクは li 全体に掛かっているので、
 *     この文字自体は独立したリンクにしていない（入れ子リンクを作らないため）。
 *
 * ── 他セクションとの整合について ──
 *   この「英字大＋和文小」の見出しは**このセクションだけ**の扱いで、
 *   他セクション（定番アイテム／特集など）は従来どおり和文20pxのまま。
 *   全セクションに広げるかは要オーナー判断。
 */

/* ── 見出しはカードの外。地（カード）は一覧だけを包む ──
   2026-08-21・オーナー指示「お知らせ／NEWSの部分、タイトルだけ他のセクションと同じように外に出せる？」

   経緯：
     1. 参考画像どおり「セクション全体にグレーの地」で作った
     2. オーナー指定で「角丸24pxのカード」に変えた（`.fk-top__sec` 側に background/padding/margin/radius）
     3. その結果、**見出しまでカードの中に入り、他セクションの見出しと左端がズレた**（このコミットで解消）

   直し方：**セクションには何も足さない**（`.fk-top__sec` の素の padding/margin をそのまま使う）。
   カードの見た目は一覧（`.fk-top__news`）へ移す。これで
     ・見出しは他セクションと同じ左端に並ぶ
     ・カードの左右端も他セクションの中身と同じ位置に揃う（余分な横マージンを足さないため）
   となる。★ここで `.fk-top__sec[data-fk-section="news"]` に横マージンを足すと、
     セクションのpaddingと二重になって中身だけが内側へずれるので足さないこと。 */

/* ── 見出し ──
   「お知らせ ＋ 赤いNEWS」の形は、2026-08-21に**全セクション共通**へ引き上げた（base.css の
   .fk-top__sec-head / .fk-top__sec-en）。ここに残すのは、お知らせだけ違う値＝
   **見出しの下の余白**だけ。カードが続くので他セクション（10px）より広く取る。 */
#fkTop .fk-top__news-head{
  margin-bottom:var(--fkTop-sp-8);
}

/* ── 一覧 ── */
#fkTop .fk-top__news{
  border:0;
  /* カード本体。オーナー指定の値（padding 36/32・角丸24）をそのまま持ってきた。
     横マージンは持たせない＝セクションのpaddingが決める位置に左右端が揃う。 */
  background:var(--fkTop-surf2);
  border-radius:24px;
  padding:36px 32px;
  margin:0;   /* ブラウザ既定の ul の上下マージンを消す */
}
#fkTop .fk-top__news li{
  list-style:none;
  /* 2026-08-21・オーナー指定。--fkTop-line2(#D0D0D0) より淡い罫線
     （地がグレーになったぶん、区切りを主張させない） */
  border-bottom:1px solid #e8e8e8;
}
#fkTop .fk-top__news li + li{
  border-top:0;   /* 旧デザインの上罫線を打ち消す */
}
#fkTop .fk-top__news li a{
  display:block;
  padding:var(--fkTop-sp-7) 0;
  color:var(--fkTop-ink);
  text-decoration:none;
}

/* 日付＋カテゴリのピル */
#fkTop .fk-top__news-meta{
  display:flex;
  align-items:center;
  gap:var(--fkTop-sp-5);
  flex-wrap:wrap;
  margin-bottom:8px;   /* 2026-08-21・オーナー指定 */
}
#fkTop .fk-top__news li em,
#fkTop .fk-top__news time{
  font-style:normal;
  font-size:14px;
  font-weight:500;
  color:var(--fkTop-ink);
  margin-right:0;      /* 旧デザインの右マージンを打ち消す（間隔は gap が持つ） */
  letter-spacing:.02em;
}
#fkTop .fk-top__news-cat{
  display:inline-block;
  padding:3px 14px;
  border-radius:999px;
  background:var(--fkTop-brand-red);
  color:#fff;
  font-size:12px;      /* 添付（ラベル）は12pxまで可 */
  font-weight:700;
  line-height:1.5;
  white-space:nowrap;
}
#fkTop .fk-top__news-cat:empty{
  display:none;        /* 実データにカテゴリが無いときに空のピルを出さない */
}

/* タイトル
   ★`display:block` が要る。マークアップは <span> なので、既定のままだと**インライン**で、
     縦のマージンが一切効かない（2026-08-21実測：margin-top:10px を書いても適用されず、
     見た目の隙間は行ボックスの余りだった＝11px）。
     オーナー指定の「meta の margin-bottom:8px」「View More の margin-top:4px」を
     指定どおりの値で効かせるため、ブロックにしたうえで**自前のマージンは持たせない**。
     上下の間隔は meta と View More 側が持つ（＝余白の持ち主を1か所に寄せる）。 */
#fkTop .fk-top__news-title{
  display:block;
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  color:var(--fkTop-ink);
}

/* View More → */
#fkTop .fk-top__news-more{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--fkTop-sp-3);
  margin-top:4px;   /* 2026-08-21・オーナー指定（10px → 4px） */
  font-size:14px;
  font-weight:500;
  color:var(--fkTop-brand-red);
}
/* 矢印。フォント依存の「→」は環境で形が変わるので、SVGをマスクにして描く。
   `background:currentColor` なので、文字色（赤）を変えれば矢印も自動で追従する。 */
#fkTop .fk-top__news-more::after{
  content:"";
  width:19px;
  height:10px;
  background:currentColor;
  -webkit-mask:var(--fkTop-arrow-right) no-repeat center / contain;
  mask:var(--fkTop-arrow-right) no-repeat center / contain;
}

/* ── src/css/responsive.css ── */
/*!
 * fk-top responsive.css
 * PC・タブレット対応（2026-08-18）。モバイルの定義には触らず、ここに増分だけを書く。
 * ★このファイルは components/* の後、zz-visibility.css の前に結合すること（build.sh）。
 *
 * ── 基準にした実測（2026-08-18・www.fukuske.com）──
 *   ・実サイトのPCコンテンツ幅は **1200px**（`.header__inner` の max-width、KV `.item__slider__list` の実幅とも1200px）
 *   ・PC/SPヘッダーの切替は **1201px**（1200pxまで .header--sp、1240pxで .header--pc）
 *   → 器もブレークポイントもサイト側に合わせる。独自の数字を持ち込まない。
 *
 * ── ブレークポイント ──
 *   〜767px    モバイル（既存の定義そのまま。ここでは何もしない）
 *   768〜1200  タブレット：SPヘッダーが出る帯域。余白と部品を一段大きくするだけ
 *   1201px〜   PC：サイトがPCヘッダーへ切り替わる帯域。1200pxの器に収める
 *
 * ── 設計の要点 ──
 *   余白は `--fkTop-pad` 1つに集約してある。セクションの左右paddingも、横スクロール列の
 *   「画面端まで流す」負マージン（margin:0 calc(--fkTop-pad * -1)）も同じ変数を見ているので、
 *   **変数を書き換えるだけで両方が揃って追従する**。個別に上書きしない。
 */

/* ══════════════════════════════════════════════════════════════
   タブレット（768px〜1200px）
   ══════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  body.fs-body-top{
    --fkTop-pad:24px;      /* セクション余白と横スクロール列の負マージンが同時に追従する */
  }
  /* 画面が広がった分、カード類を一段大きくする（定番は横スクロールのまま＝件数のブレに耐える） */
  #fkTop .fk-top__cards a{ width:170px; }
  /* ランキングは .fk-top__rankmosaic に置き換わった（2026-08-25・v2独自）。
     固定px幅ではなく fr グリッドなので、タブレットも専用の上書きなしで自然に追従する。 */

  /* ★新着アイテムは**タブレットから**5カラムで使い切る（2026-08-25・オーナー指示）。
     以前はPC（1201px〜）だけこの扱いで、タブレットは170px固定幅の横スクロールのままだった。
     新着は常に5件なので、768px幅でも横スクロールにすると右に大きな空白が残る
     （オーナー添付：5枚並んだあと右側が丸ごと空いていた）。
     PC向けに書いていた5カラムのgrid規則をそのままここへ移設した（実装内容は同じ）。
     ★件数は**5件前提**。増減したら見直すこと（6件で1枚あふれ、4件で右が空く）。 */
  #fkTop .fk-top__new-items{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:var(--fkTop-sp-5);
    overflow:visible;
    margin:0;
    padding:0;
    cursor:default;
  }
  #fkTop .fk-top__new-items a{ width:auto; }
  #fkTop .fk-top__new-items .fk-top__img{ width:100%; height:auto; aspect-ratio:1/1; }
  #fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slides{
    display:grid !important;
    grid-template-columns:repeat(5,1fr);
    gap:var(--fkTop-sp-5);
    overflow:visible !important;
    margin:0;
    padding:0;
    cursor:grab;
  }
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__imageContainer{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1/1;
  }
  #fkTop .fk-top__minicards a,
  #fkTop .fk-top__minicards .fk-top__img{ width:120px; }
  #fkTop .fk-top__minicards .fk-top__img{ height:120px; }
  #fkTop .fk-top__feat a,
  #fkTop .fk-top__feat .fk-top__img{ width:200px; }
  /* ★2026-08-20：モバイルの枠が 140×110 になったため、108pxのままだと
     **タブレットの方がモバイルより低くなる**（幅は広いのに高さが逆転する）。
     モバイルと同じ比率（140:110）に合わせて 170×134 にした。
     オーナー指定はモバイルの1組だけだったので、ここはこちらの判断。 */
  /* モバイルが 160×140 になったのに合わせて、同じ比率（8:7）で 170×149 に。
     ★モバイル160に対してタブレット170は+6%しか差がない。段階として意味が薄いので、
       ここは「タブレットの上書きを外してモバイルと同じにする」判断もあり得る（README §24）。 */
  #fkTop .fk-top__brands a,
  #fkTop .fk-top__brands .fk-top__img{ width:170px; }
  #fkTop .fk-top__brands .fk-top__img{ height:149px; }
  /* カテゴリの丸は64px固定なので、列数を固定すると幅が広がるほどセルが間延びする
     （5列のままだと1024pxでセル189px＝丸が浮く）。セル幅の下限を決めて列数を幅に追従させる。
     auto-fit ではなく auto-fill：件数が少なくてもセル幅が一定に保たれ、丸の間隔が変わらない。 */
  #fkTop .fk-top__grid{
    grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  }

  /* 2列だと1枚が広くなりすぎる箱を3列へ */
  #fkTop .fk-top__promo,
  #fkTop .fk-top__guide{ grid-template-columns:repeat(3,1fr); }
  /* ★お得にお買い物は**タブレットから**3列でLINE／メルマガ／メンバーズを横に並べる
     （2026-08-25・オーナー指示。以前はPC＝1201px〜だけで、タブレットはメンバーズが
     下に全幅ではみ出していた＝オーナー添付のとおり3列になっていなかった）。
     「福助メンバーズ」の全幅指定（.fk-top__promo-wide）はここで解除する。
     画像側の切り替え（member_pc.png・aspect-ratio）もタブレットから合わせること
     → index.html の<picture><source>、banner.css の aspect-ratio を参照
     （どちらも同じ768pxに揃えてある）。 */
  #fkTop .fk-top__promo a.fk-top__promo-wide{ grid-column:auto; }
}

/* ══════════════════════════════════════════════════════════════
   PC（1201px〜）
   ══════════════════════════════════════════════════════════════ */
@media (min-width:1201px){
  body.fs-body-top{
    /* 器そのものが1200pxなので、セクション内側の左右余白は持たない。
       これで横スクロール列の負マージンも0になり、行が器にぴったり収まる
       （モバイルの「画面端まで流して見切れさせる」演出はPCでは不要）。 */
    --fkTop-pad:0px;
  }
  #fkTop{
    max-width:1200px;      /* 実サイトのPCコンテンツ幅と一致させる */
    margin-inline:auto;
  }
  /* セクション間隔もPCでは少し広げる */
  /* ★2026-08-21：PCだけ 64px にしていた上書きは撤去した（オーナー指示「セクション間は統一で80px」）。
     値は tokens.css の --fkTop-sec-gap が一元管理する。 */
  #fkTop .fk-top__sec-title{ font-size:24px; }

  /* ★2026-08-24：話題のキーワード（9チップ）がPC1200px幅で1個だけ2行目に落ちて
     不揃いに見えていた（実測：9個の合計1251px＞器1200px）。
     左右paddingを14px→10pxに詰め、9個ぶんで72px縮めて1行（1179px）に収める。 */
  #fkTop .fk-top__chips a{ padding:var(--fkTop-sp-4) 10px; }

  /* 列数は768px以上の auto-fill 指定が効く（1200pxなら11列＝レディース9件が1段に収まる）。
     ここでは上下の余白だけPC用に広げる。 */
  #fkTop .fk-top__grid{
    padding:16px 0 24px;
  }
  /* 丸はPCで84px（2026-08-18・オーナー指定。モバイル64px） */
  #fkTop .fk-top__grid .fk-top__img{
    width:84px;
    height:84px;
    margin:0 auto;
    border-radius:50%;
  }

  /* ★定番だけ、PCでは**1200pxを4カラムで使い切る**（2026-08-21・オーナー指示）。
     実サイトの「定番」は4件と決まっているので、横スクロールにする意味がない
     （200px×4＝800pxで、右に400pxの空白が残っていた）。
     ・display:grid で4等分。1枚あたり約285px
     ・横スクロール用の指定（負マージン／下padding／grab カーソル）は打ち消す
       負マージンを残すと、器が1200pxより外へはみ出して他セクションと左端がズレる
     ・カードの width:200px も打ち消す（グリッドのセル幅に任せる）
     ★件数が4以外になったら見直すこと。5件だと1枚あふれ、3件だと右が空く。 */
  #fkTop .fk-top__cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--fkTop-sp-5);
    overflow:visible;
    margin:0;
    padding:0;
    cursor:default;
  }
    #fkTop .fk-top__cards.f_cards{
    grid-template-columns:repeat(3,1fr);
    }
  #fkTop .fk-top__cards a{ width:auto; }
  /* ★定番のコピーは行数を決め打ちしない（2026-08-24・オーナー指定でクランプ廃止）。
     以前ここでタブレット3行／PC2行に切り替えていたが、その上書きは削除した。 */

  /* ★新着の5カラムgridは2026-08-25にタブレット側（768px〜）へ移設した。
     このPC帯（1201px〜）はタブレット帯の続きなので、そのまま引き継がれる（再定義不要）。 */

  /* ランキングはPCで「モザイク」（2026-08-25・v2独自・オーナー支給の参考画像どおり）。
     1位＝左に大きく2段ぶち抜き／2〜5位＝右側に2×2。
     3カラム（1位1.7fr＋右2列が0.8frずつ）×2行。1位を grid-row:1/3 で明示配置し、
     残り4件は auto-placement（grid-auto-flow:row既定）に任せる＝
     2〜5位に個別の grid-column/row 指定は持たせていない（自然に2×2へ収まる）。
     ★列比率はオーナー指定値（2026-08-25）。正方形は cards.css の aspect-ratio:1/1固定が
       保証しているので、この比率を動かしても1位が縦長・横長に崩れることはない
       （列幅が変わればサムネの絶対サイズが変わるだけ）。 */
  #fkTop .fk-top__rankmosaic{
    grid-template-columns:1.7fr 0.8fr 0.8fr;
    grid-template-rows:repeat(2,1fr);
    gap:var(--fkTop-sp-7);
  }
  /* ★2026-08-25・flexで高さを追従させる方式は撤去した。
     grid行(1fr)のトラックサイジングとflex-growが循環参照を起こし、1位が縦に暴走する
     不具合が出たため（オーナー指摘）。今は1位も含めて全アイテムが aspect-ratio:1/1固定
     （cards.css）。1位の列幅を2fr（＝右2列の合計）にしてあるので、正方形の一辺が
     自然と右2×2ブロックの高さに近づく（ピクセル一致の保証はしないが、実測でほぼ揃う）。 */
  #fkTop .fk-top__rankmosaic__item:first-child{
    /* ★ベース（モバイル）ルールの grid-column:1/-1（全カラムspan）を、
       ここで grid-column:1 に戻す必要がある。戻さないと1位がPCでも
       3カラム全幅（1280px）に広がってしまい、右2×2が下に押し出される。 */
    grid-column:1;
    grid-row:1 / 3;
  }
  #fkTop .fk-top__rankmosaic__item:first-child .fk-top__rankmosaic__title{
    font-size:18px;
  }
  #fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slides{
    grid-template-columns:1.7fr 0.8fr 0.8fr;
    grid-template-rows:repeat(2,1fr);
    gap:var(--fkTop-sp-7);
  }
  #fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:first-child{
    grid-column:1;
    grid-row:1 / 3;
  }
  #fkTop [data-fk-section="ranking"] .flywheel-recommend__frame .fr3-productListCarousel__slide:first-child .fr3-item__productName{
    font-size:18px;
  }
  #fkTop .fk-top__minicards a,
  #fkTop .fk-top__minicards .fk-top__img{ width:150px; }
  #fkTop .fk-top__minicards .fk-top__img{ height:150px; }
  #fkTop .fk-top__feat a,
  #fkTop .fk-top__feat .fk-top__img{ width:280px; }
  /* 2026-08-24・オーナー指定で height:223px（幅220pxは維持。8:7比率の指定は終了） */
  #fkTop .fk-top__brands a,
  #fkTop .fk-top__brands .fk-top__img{ width:220px; }
  #fkTop .fk-top__brands .fk-top__img{ height:223px; }

  /* 商品名の行送りは幅が広がる分だけ読みやすさ優先で据え置き。
     2行クランプの高さ固定はモバイルと同じ計算式のままで崩れない（実測確認済み）。 */

  /* 横並びの箱：PCは横幅が余るので4列 */
  /* ご利用ガイドは**6件**。4列だと 4＋2 で2段目に空セルが2つ出る（実測）。
     3列にすると 3＋3 でちょうど埋まる（2026-08-24・オーナー指示「ここ3カラムでちょうどよく」）。
     ★件数が変わったら見直すこと。 */
  #fkTop .fk-top__guide{ grid-template-columns:repeat(3,1fr); }

  /* ★お得にお買い物の3列化・メンバーズの全幅解除は2026-08-25にタブレット側（768px〜）へ
     移設した。このPC帯はタブレット帯の続きなので、そのまま引き継がれる（再定義不要）。 */

  /* タブは1200pxいっぱいに広がりすぎると押しにくいので、左寄せで自然幅にする */
  #fkTop .fk-top__tabs{ justify-content:flex-start; gap:8px; }
  /* ★2026-08-24・オーナー指示「PC版のみ、もっと広くボタンの幅をとりたい」。
     左右paddingだけ広げてタップ領域を拡大する（上下・文字サイズ・下線位置はSPと共通のまま）。 */
  #fkTop .fk-top__tabs button,
  #fkTop .fk-top__tabs a{ padding-left:28px; padding-right:28px; }

  /* ★2026-08-21：お知らせの読み幅制限（max-width:800px・中央寄せ）は外した。
     オーナー指示で見出しをカードの外に出したため、800pxで中央に寄せると
     **見出しだけが他セクション（ブランドから探す等）と左端がズレる**。
     他セクションと同じく1200pxの器いっぱいを使う。
     1行が長すぎると感じたら、ここで `#fkTop .fk-top__news{max-width:...}` を復活させる
     （その場合は見出しも同じ幅に揃えること。片方だけだとズレる）。 */
}

@media (hover:hover) and (pointer:fine){
  #fkTop a,
  #fkTop button{
    transition:opacity .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  #fkTop a:hover,
  #fkTop button:hover{
    opacity:.72;
  }
  #fkTop .item__slider a:hover{
    opacity:.88;
  }
  #fkTop .slick-dots button:hover{
    opacity:1;
  }
}

/* ── src/css/zz-visibility.css ── */
/*!
 * fk-top zz-visibility.css
 * ★このファイルは必ず build.sh の CSS_FILES の「最後」に置くこと。
 *
 * なぜ要るか（2026-08-07 実描画で検出した不具合の再発防止）：
 *   base.css の `#fkTop [hidden]{display:none}` は詳細度 (0,1,1,0) しかなく、
 *   コンポーネント側の `#fkTop .fk-top__grid a.fk-top__no-image{display:flex}` (0,1,2,1) に負ける。
 *   その結果、JSが hidden 属性を付けた9件目のアイテムが display:flex のまま描画され、
 *   グリッドが崩れた（P0-5の8件キャップが見た目上まったく効いていなかった）。
 *
 * どう直したか：
 *   属性セレクタを3回重ねて詳細度を (0,1,3,0) へ引き上げる。
 *   これで要素セレクタを含むコンポーネント規則 (0,1,2,1) より確実に強くなり、
 *   かつ !important を使わずに済む（!important 禁止というアレックス指示を守る）。
 *   同点の規則が将来増えても、このファイルが最後に結合されるので後勝ちで安全側に倒れる。
 *
 * 原則：#fkTop 配下の表示/非表示の真実源は hidden 属性ひとつだけ。
 *       表示制御用のクラス（.is-hidden 等）を新設しないこと。二重管理は詳細度勝負になり壊れる。
 */

#fkTop [hidden][hidden][hidden]{
  display:none;
}

/* ══════════════════════════════════════════════════════════════
   注目の新着アイテム：画像をタイル全面に出す（2026-08-31）
   ══════════════════════════════════════════════════════════════
   これまでは 170×170 の枠に object-fit:contain で収めていたため、
   横長の商品画像だと上下（または左右）にグレーの余白が出て、
   枠線つきの箱の中に小さく入っているように見えていた。
   枠全面に画像を出す指定へ変更する。
   ★ランキング側は変更していない（従来どおり contain ＋ グレー地）。
   ★元に戻す場合は object-fit を contain へ、background を var(--fkTop-img) へ、
     border を 1px solid #eeeeee へ戻す（このブロックを削除するだけでよい）。 */
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__imageContainer{
  background:transparent !important;
  border:0 !important;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-item__image{
  object-fit:cover !important;
  object-position:center !important;
}

/* ══════════════════════════════════════════════════════════════
   注目の新着アイテム：カードの間隔を後勝ちで固定する（2026-09-02）
   ══════════════════════════════════════════════════════════════
   AIレコメンドのウィジェットは、描画時に自前の <style> をJSで後から差し込む。
   実サイトで中身を確認したところ、こう入っている：
     .fr3-productListCarousel__slides{ display:flex; gap:16px; overflow-x:scroll;
                                       scroll-snap-type:x mandatory; }
     .fr3-productListCarousel__responsive_2 .fr3-productListCarousel__slide{
                                       flex:0 0 calc((100% - 16px * 4) / 5); }
   これらは後から読み込まれるため、こちら側の gap / flex に !important が無いと
   「読み込み直後は正しく、数秒後に崩れる」という出方をする。
   間隔を決めるプロパティにだけ !important を付けて後勝ちを確定させる。 */
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slides{
  gap:var(--fkTop-sp-5) !important;
  scroll-snap-type:none !important;
}
#fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slide{
  flex:0 0 170px !important;
  scroll-snap-align:none !important;
}
@media (min-width:768px){
  #fkTop [data-fk-section="newItems"] .flywheel-recommend__frame .fr3-productListCarousel__slide{
    flex:none !important;
    width:auto !important;
  }
}