/*! fk-common.css — design build values * header / mega menu / search / footer */ /* ── src/css/tokens.css ── */ /*! * fk-top tokens.css * デザイントークン（色・余白・角丸・フォント）。 * * スコープについて： * CSSカスタムプロパティは「子孫要素」にしか継承されない。 * このサイトでは実DOM上、共通ヘッダー(#header)と新規ブロック(#fkTop)は * どちらもの子孫だが、互いの子孫ではない * （兄弟関係）。よって #fkTop だけにトークンを定義すると、header.css / * search.css / hero.css（body.fs-body-top スコープ側）から参照できない。 * * そのため、値の定義は body.fs-body-top 側に1本化し、#fkTop はその子孫として * 自然に継承する形にしている（#fkTop 独自の再定義はしない＝値のズレが起きない）。 * 「:root変数は #fkTop{--fkTop-*} へスコープする」という指示の意図（グローバル * :root を汚さない・トップページ限定にする）は、body.fs-body-top 自体が * トップページ限定スコープであるため満たしている。 */ body.fs-body-top{ overflow-x:hidden; /* 色（デモのグレースケールをそのまま踏襲。ブランドカラー適用はダニエル確認後に差し替え） */ --fkTop-ink:#111111; --fkTop-ink2:#5A5A5A; --fkTop-ink3:#8C8C8C; --fkTop-ink4:#B4B4B4; --fkTop-line:#E2E2E2; --fkTop-line2:#D0D0D0; --fkTop-surf:#FFFFFF; --fkTop-surf2:#F6F6F6; --fkTop-surf3:#EDEDED; --fkTop-img:#DEDEDE; --fkTop-img2:#D2D2D2; /* 余白トークン：demoに実在した値をそのまま採番し「使う」状態にした。視覚的な差分を生まないことを優先し、8px基準へ丸め直すことはしていない（丸め直す場合は see-through な変更になるためダニエル確認要）。 */ --fkTop-sp-1: 3px; --fkTop-sp-2: 4px; --fkTop-sp-3: 6px; --fkTop-sp-4: 8px; --fkTop-sp-5: 10px; --fkTop-sp-6: 14px; --fkTop-sp-7: 16px; /* = --fkTop-pad */ --fkTop-sp-8: 22px; --fkTop-sp-9: 26px; --fkTop-sp-10: 32px; --fkTop-sp-11: 48px; --fkTop-sp-12: 60px; --fkTop-sp-13: 64px; --fkTop-pad: 16px; /* セクション左右パディング */ /* セクション間の余白。2026-08-21・オーナー指示で**全セクション80pxに統一**。ここ1行で全体が動くよう、値はこのトークンだけが持つ（base.css / responsive.css / HTMLのinline style に散らばっていたものを集約した）。 */ --fkTop-sec-gap: 80px; /* 固定ヘッダーの透過（2026-08-21・オーナー指示「ヘッダーは透明度を上げてください」）。 ★不透明度はこの1つで決まる。濃くしたい／薄くしたいときはここだけ触る。色そのものは各層が持ち、この値で薄めている（帯のベージュ等の色みは保つ）。 */ --fkTop-header-alpha: .72; /* スクロール中／スクロール後の固定ヘッダーの見え方（2026-09-08・オーナー指示「コンテンツをスクロールしたときのヘッダー背景に透過ブラーを追加」）。ページ最上部（--fkTop-header-alpha / --fkTop-header-blur）は従来の見た目のまま据え置き、 **スクロールしてヘッダーの背後に本文が来たときだけ** 下の2つに切り替わる。 ★濃さ・ぼけ具合の調整はこの3行だけ触ればよい（切り替えは #header.fk-top__header-scrolled）。・alpha を下げる＝より透ける／ blur を上げる＝よりぼける */ --fkTop-header-blur: 12px; /* 最上部（従来値） */ --fkTop-header-alpha-scrolled: .58; /* スクロール後：より透ける */ --fkTop-header-blur-scrolled: 20px; /* スクロール後：よりぼける */ --fkTop-radius: 8px; --fkTop-radius-sm: 6px; --fkTop-tap: 44px; /* P0: タップ領域の最小サイズ */ /* ── ブランド色 ── */ --fkTop-brand-red:#C8402F; --fkTop-font:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif; /* 右矢印（お知らせの View More ／「すべて見る」タイルで使用）。フォントの「→」は環境ごとに太さ・長さが変わるため、形を固定したいところではこれをマスクに使う。色は使う側の `background:currentColor`（= 文字色に追従）や `background:var(--fkTop-ink3)` が決めるので、ここには色を持たせない（マスクはSVGのアルファだけを見るため、SVG側の塗りは無関係）。 SVGは viewBox="0 0 19 10"。使う側も width:19px / height:10px で合わせている。 */ --fkTop-arrow-right:url("https://fukuskeonline.itembox.cloud/item/common/images/icon/morearrow.svg"); /* 右向きの山カッコ（›）。リスト1行ごとの「進む」印に使う（メガメニューのサブ項目など）。上の --fkTop-arrow-right が「もっと見る」用の長い矢印なのに対し、こちらは行内用の小さい記号。フォントの「›」は環境で太さ・形が変わるため、同じ考え方でSVGマスクにして形を固定する。色は使う側の `background:currentColor` が決めるので、ここには色を持たせない。 */ --fkTop-chevron-right:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ── 共通ヘッダーの基本土台（デザインHTMLの既存サイトモック部分） ── */ #header{ position:relative; background:#fff; } .header_top{ height:0; } .header--pc{ display:none; } .header--sp{ display:flex; justify-content:space-between; align-items:center; padding:10.14px 15.6px; background:#fff; box-shadow:0 4px 4px rgba(0,0,0,.1); } .header__inner__logo{ margin:0; } .header__inner__account{ display:flex; align-items:center; } .header__inner__account__log, .header__inner__account__cart, .header--sp__menu{ position:relative; } .header__inner__account a, .header--sp a{ text-decoration:none; color:#000; } .header__inner__account img{ display:block; width:17px; height:17px; margin:0 auto; } .header__inner__account__log__text, .header__inner__account__cart__text, .header--sp__menu__box__hamburger__button__text{ display:block; font-size:6.76px; line-height:1.2; text-align:center; color:#000; } .header__inner__account__cart__number{ position:absolute; top:-2px; right:-2px; z-index:1; width:18px; height:18px; border-radius:50%; background:#E60012; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; } .header--sp__menu__box__hamburger__button{ appearance:none; border:0; background:transparent; padding:0; cursor:pointer; font-size:0; } .header--sp__menu__box__hamburger__button--border{ display:block; position:relative; width:22px; height:2px; background:#000; font-size:0; color:transparent; } .header--sp__menu__box__hamburger__button--border::before, .header--sp__menu__box__hamburger__button--border::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:#000; } .header--sp__menu__box__hamburger__button--border::before{ top:-7px; } .header--sp__menu__box__hamburger__button--border::after{ top:7px; } .header--sp__menu__list{ display:none; } .header--sp__menu__list.is-open{ display:block; } .header__inner__bottom{ background:#E5E5E5; padding:7.8px 0; } .header__inner__bottom__box{ display:grid; justify-content:center; align-items:center; } /* ── src/css/components/header.css ── */ /*! * fk-top header.css * 共通ヘッダー（#header）の上書き。#fkTopの外側にある既存DOMを対象にするため、 * スコープ根は body.fs-body-top（トップページ限定）にする。#fkTopは使わない。 * * ★2026-08-18：実サイト（www.fukuske.com・iPhone UA・390px）からDOMを実測し、全面的に書き直した。 * 8/7版は実クラス名が取れておらず仮セレクタで書いていたため、当たらない／誤爆する規則が複数あった。 * 実測で確定した構造（#header 直下）： * * #header display:block / position:relative / 白背景 / 総高162px * .header_top PC専用の細バナー（SPでは高さ0） * .header--pc PCヘッダー（SPでは display:none） * .header--sp SPヘッダー（flex・space-between・padding 10.14px 15.6px・下に影） * .header__inner__logo ロゴ（151×44）> a > img.header__inner__logo--img * .header__inner__account アイコン4つ（flex・147×62） * .header__inner__account__log ×2（お気に入り／マイページ）39×32・中は img17×17 + 6.76pxのラベル * .header__inner__account__cart カート 23×32（.__cart__number が赤い個数バッジ18×18） * .header--sp__menu ハンバーガー 23×33 * .header--sp__menu__box__hamburger__button 実際のボタン 22×16（線は --border が22×2の黒帯） * .header--sp__menu__list 開閉するメニュー本体（中に検索フォームを持つ★） * .header__inner__bottom 帯＋検索のまとまり（背景 #E5E5E5・padding 7.8px 0・390×70） * .header__inner__bottom__box display:grid・中央寄せ・幅363 * .fk-top__band 告知バナー画像 * .header__inner__bottom__box__search 検索（363×26） * form[action="/p/search"] > .__search__input（234×26）+ .__search__button（41×26・黒） * .__search__commitment > a 「こだわり検索」（72×18・黒ボタン・href="/f/search"）★既に存在する * * PC/SPの切替は 1201px（実測：1200pxまでSP、1240pxでPC）。SP専用の指定は max-width:1200px に入れる。 * * ★8/7版からの重要な訂正（そのまま出していたら実サイトで壊れていたもの）： * 1. `--big` を「当日発送の枠」だと誤解し、背景色・justify-content を当てていた。 * 実際は「送料無料」の4文字を囲む inline の span。当てると文字だけに灰色の箱が付く。 * 2. 「当日発送 11:59まで」は実サイトのヘッダーに存在しない（デモで足した要素）。 * 出すならテンプレートへの追加が要る＝全ページ共通ヘッダーの変更。要オーナー判断。 * 3. ヘッダーアイコンのクラス名が未取得で、`.header__inner__top a` 等の仮セレクタを置いていた。 * 実サイトにその要素は無く、44×44のタップ領域は**一切効いていなかった**（P0-2）。 * 4. #header は position:relative（8/7の記録の fixed は誤り）。追従しないので、 * スクロールで隠す処理は意味を持たない（header-scroll.js 側で自己判定して停止するようにした）。 */ /* ══════════════════════════════════════════════════════════════ ① 帯を最上段へ（2026-08-17 オーナー決定「帯は一番上」） ══════════════════════════════════════════════════════════════ デモは帯 → ロゴ行 → 検索の順。実DOMはロゴ行(.header--sp) → 帯+検索(.header__inner__bottom)。帯と検索は同じ親（.header__inner__bottom > __box）に入っているため、 .header__inner__bottom ごと order で上げると「帯と検索がセットで」最上段へ行き、ロゴが検索の下に落ちる（デモと違う並びになる）。そこで中間の2階層を display:contents でフラット化し、帯と検索を #header の直接の子として個別に並べ替える。DOMは動かさないので、この規則を消せば元の並びに戻る。 display:contents で失われる .header__inner__bottom の背景(#E5E5E5)と padding は、下の②③で帯・検索それぞれに付け直している（＝見た目の欠落は起きない）。 */ body.fs-body-top #header{ display:flex; flex-direction:column; } body.fs-body-top #header .header__inner__bottom, body.fs-body-top #header .header__inner__bottom__box{ display:contents; } body.fs-body-top #header .fk-top__band{ order:-1; } body.fs-body-top #header .header--sp{ order:0; } body.fs-body-top #header .header__inner__bottom__box__search{ order:1; } /* ② ヘッダー告知帯 */ body.fs-body-top .fk-top__band{ display:flex; align-items:center; justify-content:center; width:100%; max-width:1200px; height:auto; min-height:30px; margin:0 auto; overflow:hidden; background:transparent; } body.fs-body-top .fk-top__band-picture{ display:block; width:100%; margin:0 auto; } body.fs-body-top .fk-top__band-img{ display:block; max-width:100%; width:100%; height:auto; margin:0 auto; } /* ── ロゴ（2026-08-18・オーナー指定で 151px → 130px） ── * ★このファイルで唯一、body.fs-body-top を付けない規則。オーナー指定の形をそのまま採用している。 * 結果として **トップページだけでなく、このCSSが読み込まれる全ページのロゴが130pxになる**。 * 「トップ限定にしますか」と一度確認したうえで、この形で確定した（2026-08-18）。 * トップだけに戻す場合はセレクタの前に `body.fs-body-top ` を足すだけでよい。 * 高さは auto。モックが使っている logo.png は 2172×724（比 3:1）なので **120px 幅で40px**（実測） * （同フォルダの logo.jpg は 289×84＝比3.44 で別物。比が違うので取り違えると高さがズレる）。 * 2026-08-21にオーナー指定で 130 → 120px。ロゴ行の高さはアイコン（44px）が * 決めているため、ロゴを縮めても行の高さは変わらない（実測で確認）。 * * ※2026-08-18に一度この規則が消えた事故がある（帯のCSSを差し替えたときに範囲へ巻き込んだ）。 * ロゴ幅は確認用モック側では指定していないので、消えると即座に151pxへ戻る＝実測で気づける。 */ .header__inner__logo--img{ display:block; width:120px; /* 2026-08-21・オーナー指定（130px → 120px） */ height:auto; } /* ══════════════════════════════════════════════════════════════ ③ ヘッダーアイコン：44×44のタップ領域（P0-2） ══════════════════════════════════════════════════════════════ 実測：お気に入り39×32／マイページ39×32／カート23×32／メニュー22×16。いずれも44px未満だった。アイコン画像（17×17）とラベル（6.76px）の見た目は変えず、リンク／ボタンの当たり判定だけを広げる。 .header__inner__account の実測幅は147pxだが、ロゴ(151px)＋左右padding(31px)を引いた残りは約208pxあり、 44×4=176px は収まる（実測で確認済み）。 */ body.fs-body-top .header__inner__account__log > a, body.fs-body-top .header__inner__account__cart > a, body.fs-body-top .header--sp__menu__box__hamburger__button{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:var(--fkTop-tap); min-height:var(--fkTop-tap); box-sizing:border-box; } /* カートの個数バッジは a の外（兄弟）にあるため、a を flex にしても位置がずれないよう親側を相対配置の基準にしておく。 */ body.fs-body-top .header__inner__account__cart{ position:relative; } /* ハンバーガーは button の中に線(--border)しか無く、MENUの文字は button の外にある。ラベルを消したあとも中央に来るよう、まとまりの側でも中央寄せしておく。 */ body.fs-body-top .header--sp__menu__box__hamburger{ display:flex; flex-direction:column; align-items:center; justify-content:center; } /* ── ラベル（お気に入り／マイページ／カート／MENU）を消す（2026-08-18・オーナー指示） ── * ★ display:none にはしない。 * アイコンは④で img を隠して ::before の背景画像に置き換えているため、 * ラベルまで display:none にすると、リンクから読み上げ可能なテキストが完全に無くなり、 * 支援技術には「行き先の分からないリンク」になってしまう。 * そこで視覚的にだけ隠す（visually-hidden）。見た目はアイコンのみ、 * 読み上げは「お気に入り」「マイページ」「カート」のまま保たれる。 */ body.fs-body-top .header__inner__account__log__text, body.fs-body-top .header__inner__account__cart__text, body.fs-body-top .header--sp__menu__box__hamburger__button__text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* ラベルが抜けた分、アイコンだけを枠の中央に置く。ラベルは position:absolute でフローから外れているので、残るフレックスアイテムは ::before（アイコン）だけになり、gap も効かない。 */ body.fs-body-top .header__inner__account__log > a, body.fs-body-top .header__inner__account__cart > a, body.fs-body-top .header--sp__menu__box__hamburger__button{ position:relative; gap:0; } /* カートの個数バッジは a の兄弟。アイコンが中央に来た分、バッジも寄せ直す。 */ body.fs-body-top .header__inner__account__cart__number{ top:2px; right:2px; } /* ══════════════════════════════════════════════════════════════ ④ アイコンを差し替える（2026-08-18・オーナー支給のSVG） ══════════════════════════════════════════════════════════════ 支給された `assets/header/*.svg`（20×20・stroke 1.5の線アイコン）へ差し替える。実サイトのアイコンは

という「要素」なので、CSSからは src を変えられない。そこで img を隠し、リンクの ::before に背景としてSVGを描く。リンクは③で flex column にしてあるため、::before が最初のフレックスアイテム＝「アイコンの下にラベル」という元の並びがそのまま保たれる。 ★★ 投入前に必ずやること ★★ 下の --fkTop-icon-* の url() は、このリポジトリ内の相対パス（build/ から見た ../img/header/）。本番ではSVGをFutureShopのファイル管理へアップロードし、**その絶対URLに書き換える**こと。書き換えを忘れると、img を隠したあとに背景が読めず**アイコンが消える**。ここが唯一の危険箇所。（変数は1箇所にまとめてあるので、差し替えは5行で済む）ハンバーガー（MENU）は支給が無く、実サイトもCSSの線で描いているためそのまま。 */ body.fs-body-top{ --fkTop-icon-favorite:url("https://fukuskeonline.itembox.cloud/item/common/images/header/favorite.svg"); --fkTop-icon-user:url("https://fukuskeonline.itembox.cloud/item/common/images/header/user.svg"); --fkTop-icon-cart:url("https://fukuskeonline.itembox.cloud/item/common/images/header/cart.svg"); --fkTop-icon-search:url("https://fukuskeonline.itembox.cloud/item/common/images/header/search.svg"); /* こだわり検索（詳細検索）のアイコン。2026-08-21・オーナー支給の slider.svg に差し替え（それまでは search.css にインラインのdata URIで描いていた）。 ★他の4本と同じくここに置いてあるので、投入前のURL書き換えで**一緒に差し替わる**。 search.css の中に置いたままだと差し替え漏れの原因になる。 */ --fkTop-icon-slider:url("https://fukuskeonline.itembox.cloud/item/common/images/header/slider.svg"); --fkTop-icon-size:20px; } /* 既存のPNGを隠す（要素は残す＝マークアップは触らない） */ body.fs-body-top .header__inner__account__log > a > img, body.fs-body-top .header__inner__account__cart > a > img{ display:none; } /* 差し替え後のアイコン本体 */ body.fs-body-top .header__inner__account__log > a::before, body.fs-body-top .header__inner__account__cart > a::before{ content:""; display:block; width:var(--fkTop-icon-size); height:var(--fkTop-icon-size); background-repeat:no-repeat; background-position:center; background-size:contain; } /* どのリンクにどのアイコンを当てるか。お気に入りとマイページは同じクラス（.header__inner__account__log）なので、並び順（.header__inner__account 直下のdivの何番目か）で振り分ける。ログイン状態でマイページのhrefが変わる可能性があるため、hrefでの判定は使っていない。 ★実サイトでアイコンの並び順が変わったらここも直すこと。 */ body.fs-body-top .header__inner__account__log:nth-of-type(1) > a::before{ background-image:var(--fkTop-icon-favorite); } body.fs-body-top .header__inner__account__log:nth-of-type(2) > a::before{ background-image:var(--fkTop-icon-user); } body.fs-body-top .header__inner__account__cart > a::before{ background-image:var(--fkTop-icon-cart); } /* ══════════════════════════════════════════════════════════════ ⑤ PC（1201px〜）：SPと同じヘッダーを「広げて」使う ══════════════════════════════════════════════════════════════ 2026-08-18・オーナー指示「ヘッダーはSPと同じ感じでいい。それが広がった感じで」。実サイトは1201pxで .header--sp を隠し .header--pc を出す作りだが、その切替を止めて **PCでもSPのヘッダー（帯→ロゴ＋アイコン→検索）を使う**。幅が広がった分は、中身を1200pxの器に収めて中央に置く（実サイトの .header__inner と同じ器）。 ★トレードオフ：実サイトのPCヘッダーにあるグローバルナビ／インフォメーションは出なくなる。ナビはハンバーガー（MENU）が担う。PCでナビを出す必要があるかは要オーナー確認。告知帯は支給画像を中央配置で表示する。 */ @media (min-width:1201px){ body.fs-body-top #header .header--sp{ display:flex; } /* ★白地と影は #header（全幅）へ移す。実サイトの .header--sp は自前で background:#fff と影を持っているが、 PCでは中身を1200pxの器に収めるため、そのままだと**白い帯が1200pxで途切れて左右に地色が出る**（2026-08-19に実測で確認）。器は中身だけ絞り、地は全幅に敷く。 */ body.fs-body-top #header{ background:#fff; box-shadow:0 4px 4px rgba(0,0,0,.1); } body.fs-body-top #header .header--sp{ background:transparent; box-shadow:none; } /* 検索行（2段構成のとき）も同じ理由でグレーの島を作らない */ body.fs-body-top #header .header__inner__bottom__box__search{ background:transparent; } /* ロゴ行・検索行の中身を1200pxの器へ */ body.fs-body-top #header .header--sp, body.fs-body-top #header .header__inner__bottom__box__search{ max-width:1200px; margin-inline:auto; width:100%; box-sizing:border-box; } body.fs-body-top #header .header--sp{ padding:14px 24px; } body.fs-body-top #header .header__inner__bottom__box__search{ padding:10px 24px 12px; } /* アイコンは間隔を少し広げる（幅に余裕があるため） */ body.fs-body-top .header__inner__account{ gap:8px; } body.fs-body-top .fk-top__band{ min-height:45px; } } @media (max-width:767px){ body.fs-body-top .fk-top__band{ max-width:585px; } } @media (hover:hover) and (pointer:fine){ body.fs-body-top #header a, body.fs-body-top #header button, #footer.fk-footer-rebuild a, #footer.fk-footer-rebuild button{ transition:opacity .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; } body.fs-body-top #header a:hover, body.fs-body-top #header button:hover, #footer.fk-footer-rebuild a:hover, #footer.fk-footer-rebuild button:hover{ opacity:.72; } body.fs-body-top #header .fk-top__gnav-item--has-mega:hover > a, body.fs-body-top #header .fk-top__gnav-item--has-mega:focus-within > a{ opacity:1; } body.fs-body-top #header .header--sp__menu__list a:hover, body.fs-body-top #header .header--sp__menu__list button:hover{ opacity:.82; } } /* ══════════════════════════════════════════════════════════════ ⑥ PCのグローバルナビ（2026-08-19 オーナー指示） ══════════════════════════════════════════════════════════════ 「レディース／メンズ／キッズ／福助足袋／アウトレットをPCでは出したい。見た目は今のままではなく、このサイトに合う感じで」実サイトのPCナビは 18px/400・黒・下線なし（実測）。ここではトップページの他セクション（見出し20px・タブ14px・カテゴリ名13px）と揃うよう **15px/500**にし、現在地・ホバーはブランド赤の下線で示す（うちのデザインの語彙に寄せる）。マークアップは header-nav.js が実サイトのリンクから組む（メガメニューは付けない）。 SP（〜1200px）では出さない＝ハンバーガーが担う。 */ body.fs-body-top .fk-top__gnav{ display:none; } /* ★初期描画でナビが縦に展開されて一瞬崩れるのを防ぐガード（2026-09-08）。経緯：新ヘッダーのCSSは `body.fs-body-top` にスコープしてあるが、このクラスは**トップページ以外では生HTMLに存在せず**、fk-common.js（defer）が実行時に付ける（商品ページの生HTMLは ``）。 defer はHTML解析が終わるまで走らないため（実測 866ms）、CSS取得完了（194ms）〜クラス付与までの間だけ・ナビを「見せる」指定（`#header.fk-header-rebuild .fk-top__gnav{display:block!important}`）は無スコープなので即座に効く・ナビを「畳む」指定（`body.fs-body-top .fk-top__mega{position:absolute…}` 等）は効かないという食い違いが起き、メガメニューの中身が全部縦に流れて #header が SP:5379px / PC:2176px まで伸びる（実測）。初回アクセスでは第三者CSSのレンダリングブロックで偶然隠れるが、キャッシュの効く再訪・更新時に露出する。 ★`body:not(.fs-body-top)` で囲っているので、クラスが付いた瞬間にこのガードは自動で無効になる。JSが動かなかった場合も「ナビが出ないだけ」で崩れない（SPはハンバーガー、PCは各カテゴリのトップリンクが生きている）。 ★恒久対応としては、ヘッダーのフリーHTMLの先頭に `` を1行入れるのが最小。入れた場合もこのガードは無害なので残してよい。 */ body:not(.fs-body-top) #header.fk-header-rebuild .fk-top__mega{ display:none !important; } @media (max-width:1200px){ body:not(.fs-body-top) #header.fk-header-rebuild .fk-top__gnav{ display:none !important; } } @media (min-width:1201px){ body.fs-body-top .fk-top__gnav{ display:block; flex:0 0 auto; margin-left:32px; font-family:var(--fkTop-font); } /* ★セレクタは「gnavの直接の子のul」に限定する（2026-08-24）。 `.fk-top__gnav ul` だと子孫セレクタなので、メガメニュー内の ul.fk-top__mega-flatlist（部門liの孫）まで display:flex を拾ってしまい、幅がshrink-to-fitされず間延びした（.fk-top__gnav a と同種の事故）。 */ body.fs-body-top .fk-top__gnav > ul{ display:flex; align-items:center; gap:28px; margin:0; padding:0; list-style:none; } body.fs-body-top .fk-top__gnav > ul > li{ margin:0; } /* ★セレクタは「liの直接の子のa」＝部門トリガーだけに限定する（2026-08-24）。単に `.fk-top__gnav a` だと、メガメニュー追加後は li の孫（見出しリンク・サブアイテムリンク）まで拾ってしまい、white-space:nowrap 等が意図せず継承されて長い見出し（「ルームウェア（リラックスウェア）」）が折り返せず列からはみ出た。 */ body.fs-body-top .fk-top__gnav > ul > li > a{ display:flex; align-items:center; /* 44pxのタップ／クリック領域を確保（P0-2と同じ基準をナビにも当てる） */ min-height:var(--fkTop-tap); padding:0 2px; font-size:15px; font-weight:500; line-height:1.4; color:var(--fkTop-ink); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; transition:border-color .15s ease, color .15s ease; } body.fs-body-top .fk-top__gnav > ul > li > a:hover, body.fs-body-top .fk-top__gnav > ul > li > a:focus-visible{ color:var(--fkTop-brand-red); border-bottom-color:var(--fkTop-brand-red); } body.fs-body-top #header .header--sp.fk-top__hdr--inline .header__inner__logo, /* 検索は余った幅を全部使う（＝ロゴ・ナビ・アイコンを引いた残り） */ body.fs-body-top #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search{ /* ★これが無いと中身の幅で親を押し広げる（8/18の横スクロール事故と同じ原因） */ /* ★①で検索に /* 帯の下から出たので、グレーの下地は要らない */ } } /* ══════════════════════════════════════════════════════════════ ⑦ ヘッダーを画面上部に固定する（2026-08-21 オーナー指示） ══════════════════════════════════════════════════════════════ 「ヘッダーは固定で、表示するようにしてください」 ★このブロックは `body.fk-top__header-is-fixed` が付いたときだけ効く。クラスを付けるのは header-fixed.js で、**スペーサーの高さを実測して入れたあと**に付ける。つまりJSが動かなければヘッダーは通常フローのままで、「固定になったのに本文がヘッダーの下に潜る」という壊れ方をしない。 ★position:sticky ではなく fixed。親 `div.fs-l-page` が overflow:hidden のため sticky は素通りする（実サイト実測）。詳細は header-fixed.js の冒頭コメント。 ★z-index:10000 の理由：実サイトには z-index:9999 の要素がある（`a.revico-ranking--slide-btn`＝レビューのランキング枠の矢印・position:absolute）。これより下だと、その枠がヘッダーの上に描かれてしまう。 ⚠️ 逆に、レビューのモーダル（`div.revico-modal`・fixed・z-index:999）はヘッダーより下になる。モーダルを開いたとき上端にヘッダーが重なるので、実機で許容できるか確認すること（README §19）。 */ body.fs-body-top.fk-top__header-is-fixed #header{ position:fixed; top:0; left:0; right:0; z-index:10000; /* ★地は必ず transparent にする。地は下の⑧（::before）が持つ。ここを抜かすと「::before は半透明なのにヘッダー本体が白いまま」で、まったく透けない。白を敷いている場所が2つあり、どちらもこの規則より詳細度が低いので上書きできる：・実サイト（およびモック）の `#header{background:#fff}` ・⑤の PC用 `body.fs-body-top #header{background:#fff}`（1200px幅で途切れる白の対策） */ background:transparent; /* ★影は出さない（2026-08-21・オーナー指示「ここの影いらない」）。 `none` で明示的に消しているのは、影を持っている規則が2つあるため。・実サイトの `.header--sp{box-shadow:0 4px 4px rgba(0,0,0,.1)}`（⑧で別途 none にしている）・⑤の PC用 `body.fs-body-top #header{box-shadow:…}`（1201px〜で効く）この規則の方が詳細度が高いので、両方まとめてここで打ち消せる。 ★ヘッダーと本文の境目は、帯の色と半透明の地だけで示す形になる。 */ box-shadow:none; } /* ══════════════════════════════════════════════════════════════ ⑧ 固定ヘッダーを半透明にする（2026-08-21 オーナー指示「透明度を上げて」） ══════════════════════════════════════════════════════════════ 不透明度は tokens.css の --fkTop-header-alpha（現在 .72）ひとつで決まる。 ★層が4つあるので、全部そろえないと「一部だけ不透明」になる。 1. #header 自身（⑦で敷いていた白） 2. .header--sp（**実サイト側のCSSが background:#fff を持っている**。上書きが要る） 3. 帯（左＝ベージュ／右＝オフホワイト。色みは保ったまま薄める） 4. 検索行（--fkTop-surf の白） ★backdrop-filter（すりガラス）は #header 本体に付けてはいけない。 backdrop-filter / filter / transform / will-change は **子孫の position:fixed の基準を自分に変えてしまう**。ハンバーガーのメニュー本体（.header--sp__menu__list）は実サイトで position:fixed で、しかも #header の中にある（2026-08-21実測）。#header に付けるとメニューが画面全体ではなく「146pxのヘッダーの中」に閉じ込められて壊れる。 → 擬似要素 ::before に付ける。::before は子を持たないので、メニュー（::before の兄弟）の基準は viewport のまま変わらない。 z-index:-1 で「#header の地の上・中身の下」に潜り込ませる。 */ body.fs-body-top.fk-top__header-is-fixed #header::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,var(--fkTop-header-alpha)); /* ぼけ量はトークン化してある（最上部＝12px／スクロール後＝20px）。値の変更は tokens 側の --fkTop-header-blur* で行う。 */ -webkit-backdrop-filter:blur(var(--fkTop-header-blur)) saturate(1.15); backdrop-filter:blur(var(--fkTop-header-blur)) saturate(1.15); /* すりガラスの濃さ／ぼけが切り替わる瞬間が唐突に見えないよう、地とぼけを同じ時間で送る。 ★transition は ::before に持たせる。#header 本体は ⑨ で top を送っているので、ここで背景を混ぜると同じプロパティ列に別の意図が入って読みにくくなる。 */ transition:background-color .28s linear, -webkit-backdrop-filter .28s linear, backdrop-filter .28s linear; } /* ★スクロールしてヘッダーの背後に本文が来たときだけ、透過を強め・ぼけを深くする（2026-09-08・オーナー指示「コンテンツをスクロールしたときのヘッダー背景に透過ブラーを追加」）。クラス `fk-top__header-scrolled` の付け外しは header-scroll.js（scrollY > 4px で付く）。 ★なぜページ最上部では切り替えないか：最上部ではヘッダーの背後がページの地（白）なので、ぼかしても見た目が変わらない一方、透過を強めると帯のベージュだけが薄く見えて「上端だけ色が抜けた」状態になる。最上部は 2026-08-21 にオーナー確認済みの alpha .72 / blur 12px のまま据え置く。 ★backdrop-filter は **必ず ::before 側**に置くこと（#header 本体に付けてはいけない）。理由は⑧の冒頭コメントのとおり：ハンバーガーのメニュー本体（.header--sp__menu__list）が #header の中の position:fixed なので、#header に backdrop-filter を付けるとメニューがヘッダーの高さに閉じ込められて壊れる。 */ body.fs-body-top.fk-top__header-is-fixed #header.fk-top__header-scrolled::before{ background:rgba(255,255,255,var(--fkTop-header-alpha-scrolled)); -webkit-backdrop-filter:blur(var(--fkTop-header-blur-scrolled)) saturate(1.18); backdrop-filter:blur(var(--fkTop-header-blur-scrolled)) saturate(1.18); } /* ★境界線は既定では足していない。透過を .58 まで強めるとヘッダーと本文の境目が曖昧になるが、「ここの影いらない」（2026-08-21・オーナー指示）を尊重して線も影も出していない。実機で境目が弱いと感じた場合だけ、下の2行のコメントを外す（影ではなく内側1pxの線。ヘッダーの高さは変わらない）。 */ /* body.fs-body-top.fk-top__header-is-fixed #header.fk-top__header-scrolled{ box-shadow:inset 0 -1px 0 rgba(0,0,0,.06); } */ /* 「動きを減らす」設定では切り替えを瞬時に行う */ @media (prefers-reduced-motion:reduce){ body.fs-body-top.fk-top__header-is-fixed #header::before{ transition:none; } } /* 中の層を薄める。ここを抜かすと「一部だけ不透明」になる。 ★影も一緒に外すこと。実サイトの `.header--sp` は `box-shadow:0 4px 4px rgba(0,0,0,.1)` を持つ。これは「ヘッダーの下端の影」のつもりの指定だが、うちはロゴ行の**下にさらに検索行がある**ため、ヘッダーの**途中に横線が入る**。地が白かったうちは目立たなかったが、半透明にした瞬間にはっきり出た（2026-08-21・オーナー指摘「変になった」）。影はヘッダー全体の下端（#header）に1本だけ持たせる。 */ body.fs-body-top.fk-top__header-is-fixed #header .header--sp{ background:transparent; box-shadow:none; } body.fs-body-top.fk-top__header-is-fixed #header .header__inner__bottom__box__search{ background:transparent; } /* ══════════════════════════════════════════════════════════════ ★不透明な地を最後まで潰す（2026-09-08・オーナー指摘「透明感がない」の原因） ══════════════════════════════════════════════════════════════ ⑦は `background:transparent` を指定しているのに、実測では #header の computed が `rgb(255,255,255)`（＝完全な不透明）になっていた。原因は 2026-08-28 に追加された #header.fk-header-rebuild{ … background:#fff !important; } （このファイル内。詳細度(1,1,0)＋!important）で、⑦を打ち消している。 ★これが「透明感がゼロになる」決定打だった理由： #header は ⑦ で z-index:10000 を持つ＝**スタッキングコンテキストを作る**。スタッキングコンテキストの描画順は 1. その要素自身の背景・境界 2. z-index が負の子 3. 通常フローの中身 … なので、z-index:-1 の ::before は **#header 自身の背景より「上」** に描かれる。本体が不透明な白だと、・::before の alpha .58 は「白の上に白」を重ねるだけ＝色が変わらない・backdrop-filter がぼかす対象も「白一色」＝ぼかしても何も現れないとなり、透過もブラーも完全に無効化される。 ⑦の冒頭コメントの「ここを抜かすと…まったく透けない」が、まさにこの状態。 ★スコープを `body.fs-body-top.fk-top__header-is-fixed` に絞ってあるので、 8/28 の指定の本来の目的（固定していないページで作り直したヘッダーに白地を敷く）はそのまま残る。すりガラスにしている固定時だけ白を外す。 */ body.fs-body-top.fk-top__header-is-fixed #header.fk-header-rebuild{ background:transparent !important; } /* 帯の行の下地。`.header__inner__bottom{ background:#E5E5E5 }`（このファイルの上部）が不透明なので、ここを外さないと**帯の行だけ灰色のまま**残って上端に横帯が出る。 ★帯そのもの（.fk-top__band-img）は現在1枚のJPG（header_bnr-sp/pc.jpg）で、画像自体は不透明。帯の行まで透かしたい場合は画像側の opacity を落とすことになり、赤文字のコントラストが落ちる。ここでは下地だけ外し、画像は触っていない。 */ body.fs-body-top.fk-top__header-is-fixed #header .header__inner__bottom{ background:transparent; } /* ★backdrop-filter に対応していない環境では、::before は「ただの半透明の白」になる。ぼけないぶん背後の文字が透けて読みにくくなるので、その場合だけ不透明度を上げる。 */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ body.fs-body-top.fk-top__header-is-fixed #header{ --fkTop-header-alpha:.94; /* スクロール後の .58 も、ぼけない環境では本文が透けて読めなくなるので同じ扱いにする */ --fkTop-header-alpha-scrolled:.94; } } /* ══════════════════════════════════════════════════════════════ ⑨ 下スクロール中はヘッダーを画面外へ送る（2026-08-21 オーナー指示） ══════════════════════════════════════════════════════════════ 「スクロールしてる時は固定を外すみたいにできる？」下へスクロールしている間はヘッダーを上へ逃がし、**上へスクロールした瞬間に戻す**。クラスの付け外しは header-scroll.js（`ENABLED = true`）。 ★transform は使えない。 transform / filter / backdrop-filter は**子孫の position:fixed の基準を自分に変える**。ハンバーガーのメニュー本体（.header--sp__menu__list）は実サイトで position:fixed で、しかも #header の中にあるため、transform を当てるとメニューがヘッダーの中に閉じ込められる（⑧の backdrop-filter で同じ理由から ::before に逃がしたのと同じ話）。 → **`top` を動かす**。動かす量は header-fixed.js が実測して入れた `--fkTop-header-h`。高さが変わっても追従する（決め打ちしない）。 ★スペーサーは動かさない。本文の位置は固定したままヘッダーだけが出入りする。スペーサーまで縮めると、隠れるたびに本文が上下に飛ぶ。 */ body.fs-body-top.fk-top__header-is-fixed #header{ /* 2026-08-21・オーナー指示「もう少し優しい挙動に」。 .25s ease から少し伸ばし、終わり際がゆっくり止まるカーブにした。 */ transition:top .38s cubic-bezier(.22,.61,.36,1); } body.fs-body-top.fk-top__header-is-fixed #header.fk-top__header-hidden{ top:calc(var(--fkTop-header-h, 160px) * -1); } /* 「動きを減らす」設定の環境ではアニメーションさせない（出入りは即座に行う） */ @media (prefers-reduced-motion:reduce){ body.fs-body-top.fk-top__header-is-fixed #header{ transition:none; } } /* ヘッダーが抜けた高さを埋めるスペーサー。高さは header-fixed.js が実測して入れる。 ★ここで高さを決め打ちしないこと（SP146px / PC104px と幅で変わり、 Webフォントの適用や帯の折り返しでも変わるため）。 */ body.fs-body-top .fk-top__header-spacer{ height:0; } /* ページ内リンクの着地点が、固定ヘッダーの下に潜らないようにする。 `--fkTop-header-h` は header-fixed.js が実測値を入れる（未設定でも 146px で成立する）。 */ body.fs-body-top.fk-top__header-is-fixed{ scroll-padding-top:var(--fkTop-header-h, 146px); } /* ── src/css/components/mega-menu.css ── */ /*! * fk-top mega-menu.css * PCグローバルナビのホバー・メガメニュー（2026-08-24・オーナー指示）。 * * 「実サイトのメガメニューを、このサイトのデザインに合うようにリデザインしてほしい。 * 丸型、現代的なUI、洗練された余白感、ゴシック」 * * データは header-nav.js が実サイトの .f-categoryArea（hidden・data-fk-hero:false）から * 読み取り、ここで定義する見た目へ組み替えて描画する。実サイトのDOM/CSSはそのまま使わない * （実サイトは1200×1055pxの専用パネルで、うちの1200px器にそのまま置くと破綻するため）。 * * PCのみで有効。SP（〜1200px）は .fk-top__gnav 自体が非表示なので何もしない。 */ @media (min-width:1201px){ /* ── ナビ側：メガメニューを持つ項目はホバー基準点にする ── */ body.fs-body-top .fk-top__gnav li.fk-top__gnav-item--has-mega{ position:relative; } /* ── パネル共通：白背景・角丸・柔らかい影・ふわっと出現 ── ★position:fixed（絶対配置ではない）。liに対する相対配置(absolute)だと、 liが画面中央から外れているとき「liを中心に幅1040pxを配る」形になり、左寄りのliではパネルの左半分が画面外へはみ出た（2026-08-24実測）。 fixedにして、position()（header-nav.js）が開くたびに実測した trigger.getBoundingClientRect() を基準に top（と、flat型はleft）を入れる。初期状態は「そこにあるが見えない」（display:noneにしない）。 visibility:hidden にしておくとキーボード操作でタブが入り込まないので、フォーカス可能な子要素にはこちらを使う（opacityだけだと0でも操作できてしまう）。 */ body.fs-body-top .fk-top__mega{ position:fixed; z-index:20; background:var(--fkTop-surf); border-radius:20px; box-shadow:0 16px 40px rgba(17,17,17,.12), 0 2px 8px rgba(17,17,17,.06); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; font-family:var(--fkTop-font); } body.fs-body-top .fk-top__gnav-item--open .fk-top__mega{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .18s ease, transform .18s ease; } /* ── grouped型（レディース／メンズ）：画面中央固定の大きいパネル ── どのタブから開いても同じ横位置に降りてくる方が、複数回さわるときに視線が安定する（実サイトも同種の巨大パネルを画面中央寄りに出す設計だった）。 position:fixedなので left:50%+translateX(-50%) はビューポート中央を指す。 */ /* ★2026-08-24・オーナー指示「下の長さもっと短くして」「スクロールは残っていい。表示領域（縦）だけ狭めて」。 → パネルの箱そのものを低くし、入り切らない分は中でスクロールさせる。 max-height がその上限。画面が低いときは 100vh 基準の方が効く。 */ body.fs-body-top .fk-top__mega--grouped{ left:50%; transform:translateX(-50%) translateY(-6px); /* ★box-sizing:border-box が要る。このパネルは #header 配下＝#fkTop の box-sizing 指定（base.css）の外なので、既定の content-box のままだと width に padding(40px×2) が加算され、1280px幅の画面で左右2pxはみ出した（実測）。 */ box-sizing:border-box; width:min(1040px, 92vw); max-height:min(600px, calc(100vh - 160px)); overflow-y:auto; padding:28px 40px; } body.fs-body-top .fk-top__gnav-item--open .fk-top__mega--grouped{ transform:translateX(-50%) translateY(0); } /* ★2026-08-24実測：CSS Gridだと「同じ行の中でいちばんサブアイテムが多い列」に行の高さが引っ張られ、少ない列（アームカバー1件など）の下に大きな空白ができた（レディースは8〜13件と1件が同じ器に並ぶため顕著）。「洗練された余白感」の逆効果。 Multi-column（columns）に替え、コンテンツの高さぶんだけ詰めて次のカテゴリを同じ列の下へ流し込む方式にした。列を跨いで分断されないよう .fk-top__mega-col に break-inside:avoid を付けている。 */ body.fs-body-top .fk-top__mega-grid{ columns:5 200px; column-gap:28px; } body.fs-body-top .fk-top__mega-col{ break-inside:avoid; /* カテゴリ1件分が列の途中で分断されるのを防ぐ */ margin-bottom:22px; /* 同じ列に次のカテゴリが縦積みされたときの間隔 */ } /* ── カテゴリ見出し：丸型アイコン＋テキスト ── */ body.fs-body-top .fk-top__mega-head{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--fkTop-ink); padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid var(--fkTop-line); } /* 丸の器。写真・線画のどちらでも「白地＋淡いグレー枠」で統一する（2026-08-24・オーナー指定「アイコンで残ってる方も、写真の方と同じように白背景グレーボーダーに」）。トップのカテゴリグリッドの丸とも見え方が揃う。 */ body.fs-body-top .fk-top__mega-icon{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--fkTop-surf); border:1px solid var(--fkTop-line); display:flex; align-items:center; justify-content:center; overflow:hidden; /* 写真を丸で切り抜く */ transition:border-color .15s ease; } /* ── 商品写真（2026-08-24・オーナー確認を受けて追加）── トップの「アイテムから探す」と同じ写真を、丸いっぱいに敷く。 */ body.fs-body-top .fk-top__mega-icon--photo img{ width:100%; height:100%; /* ★cover だと商品が丸で切り取られ、何の商品か分からなくなる（アームカバー・ルームウェアで顕著。2026-08-24実測）。 contain で全体を必ず収める。トップのカテゴリグリッド側と同じ扱い。 */ object-fit:contain; padding:5px; } /* ── 線画アイコン（写真が無い横断カテゴリ：大きいサイズ／機能）── 器は写真と共通（白地＋グレー枠）。中央に小さく置く。 */ body.fs-body-top .fk-top__mega-icon--glyph img{ width:22px; height:22px; object-fit:contain; } body.fs-body-top .fk-top__mega-head-text{ font-size:16px; font-weight:700; letter-spacing:.01em; line-height:1.3; /* flexアイテムの既定 min-width:auto のままだと長い見出し（「ルームウェア（リラックスウェア）」等）が折り返せず列幅の外へはみ出た（2026-08-24実測）。 min-width:0 で折り返しを許可し、overflow-wrap で括弧前後の禁則により折り返し不可と判定された箇所も強制的に折り返す。 */ min-width:0; overflow-wrap:break-word; } /* ホバー：器が写真・線画で共通になったので、反応も共通にする（枠だけ赤）。以前は線画だけ「丸を赤で塗って線画を白へ反転」していたが、白地に統一した今は線画だけ塗り潰されて浮くため廃止した（2026-08-24）。 */ body.fs-body-top .fk-top__mega-head:hover .fk-top__mega-icon{ border-color:var(--fkTop-brand-red); } body.fs-body-top .fk-top__mega-head:hover .fk-top__mega-head-text{ color:var(--fkTop-brand-red); } /* ── サブアイテム ── ★2026-08-24・オーナー指示「テキストリンク感が強いので、クリックできる範囲を増やして、 hoverで矢印と薄い背景(#F5F5F5)を出したい」。 display:block（flex）＋paddingで**行全体**を当たり判定にし、hoverで帯と矢印を出す。・gapをやめてpaddingで行間を作る（余白そのものもクリックできるようにするため）・左右の margin を padding と同じだけ負に振り、**文字の左端は今までの位置のまま** 背景だけを外側へ広げる（サブ項目をインデントさせない）。列間は28pxなので、左右12pxずつ食っても隣の列とはぶつからない（実測で確認）。 */ body.fs-body-top .fk-top__mega-sublist{ list-style:none; margin:0; padding:0; } body.fs-body-top .fk-top__mega-sublist a{ display:flex; align-items:center; gap:8px; margin:0 -12px; padding:5px 12px; /* 2026-08-24：行の高さ35→29px。パネル全体を画面内に収めるため */ border-radius:10px; font-size:13.5px; font-weight: 500; line-height:1.7; letter-spacing: 1.3px; color:var(--fkTop-ink2); text-decoration:none; transition:background-color .12s ease, color .12s ease; } /* 矢印。hoverしたときだけ出す（66項目すべてに常時出すと、この密度では点が多すぎる）。 */ body.fs-body-top .fk-top__mega-sublist a::after{ content:""; flex:none; margin-left:auto; /* 右端へ送る */ width:6px; height:10px; background:currentColor; -webkit-mask:var(--fkTop-chevron-right) no-repeat center / contain; mask:var(--fkTop-chevron-right) no-repeat center / contain; opacity:0; transition:opacity .12s ease; } body.fs-body-top .fk-top__mega-sublist a:hover{ background:#F5F5F5; /* オーナー指定。既存の --fkTop-surf2 (#F6F6F6) とは実質同色 */ color:var(--fkTop-brand-red); } body.fs-body-top .fk-top__mega-sublist a:hover::after{ opacity:1; } /* ── flat型（キッズ／福助足袋／アウトレット）：小さい縦ドロップダウン ── 見出し階層を持たない部門に、grouped型と同じ巨大パネルを出すと中身より器が目立って間延びする。器そのものを小さくする。 */ body.fs-body-top .fk-top__mega--flat{ left:0; transform:translateY(-6px); /* ★position:fixed かつ width未指定（autoのみ）だと、shrink-to-fitが期待どおり働かずパネルが横に間延びした（2026-08-24実測：571pxまで広がった）。 width:max-content で明示的にコンテンツ幅へ固定する。 */ width:max-content; min-width:220px; max-width:320px; box-sizing:border-box; /* grouped型と同じ理由（#fkTop の box-sizing 指定の外にあるため） */ padding:14px; } body.fs-body-top .fk-top__gnav-item--open .fk-top__mega--flat{ transform:translateY(0); } /* ★display:flex;flex-direction:columnをやめ、通常のブロックフローにした（2026-08-24）。 flexだと中の a（display:block）が親の幅いっぱいに広がらず、テキストが列の中で浮いて見えた（実測：li幅220pxに対しaの幅は71.5pxしかなかった）。通常フローなら block 要素は素直に親幅いっぱいになり、左揃えが期待どおり効く。 */ body.fs-body-top .fk-top__mega-flatlist{ list-style:none; margin:0; padding:0; } body.fs-body-top .fk-top__mega-flatlist li + li{ margin-top:2px; } /* grouped型のサブ項目と同じ扱いに揃える（hoverで帯＋矢印。2026-08-24）。こちらは元から display:block＋padding で行全体が当たり判定になっている。 */ body.fs-body-top .fk-top__mega-flatlist a{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:12px; font-size:14.5px; font-weight:500; color:var(--fkTop-ink); text-decoration:none; transition:background-color .12s ease, color .12s ease; } body.fs-body-top .fk-top__mega-flatlist a::after{ content:""; flex:none; margin-left:auto; width:6px; height:10px; background:currentColor; -webkit-mask:var(--fkTop-chevron-right) no-repeat center / contain; mask:var(--fkTop-chevron-right) no-repeat center / contain; opacity:0; transition:opacity .12s ease; } body.fs-body-top .fk-top__mega-flatlist a:hover{ background:#F5F5F5; /* サブ項目と同じ（オーナー指定） */ color:var(--fkTop-brand-red); } body.fs-body-top .fk-top__mega-flatlist a:hover::after{ opacity:1; } /* ── 動きを抑えたい環境への配慮 ── */ @media (prefers-reduced-motion:reduce){ body.fs-body-top .fk-top__mega, body.fs-body-top .fk-top__mega-sublist a{ transition:none; } } } /* ── src/css/components/search.css ── */ /*! * fk-top search.css * 通常検索フォームの再スキン。偽フォームは作らず、既存フォームの見た目だけを上書きする。 * * ★2026-08-18 実測で判明した重要な事実（8/7版の選択子は誤爆していた）： * 実サイトには form[action="/p/search"] が **2つ** ある。 * 1) .header__inner__bottom__box__search 内（帯の下・常時表示）… こちらが主 * 2) .header--sp__menu__list__search__form 内（ハンバーガーメニューの中・通常は非表示） * DOM順では 2) の方が先に来るため、`form[action="/p/search"]` と無限定で書くと * **閉じているメニューの中のフォームに当たる**。8/7版のCSS/JSはこの状態だった。 * よって、以下はすべて `.header__inner__bottom__box__search` の配下に限定する。 * * 検索は input 右端に search.svg の送信ボタンを重ね、左側のテキスト余白は通常幅にする。 * こだわり検索は slider.svg のアイコンボタンとして、href="/f/search" の導線を残す。 */ /* 検索の行（display:contents でフラット化した後は #header の直接の子になる。header.css ①参照） */ /* ★ここから下はSP（〜1200px）専用（2026-08-18）。実サイトのPCでは .header__inner__bottom__box が1200pxのflexで、帯（postage 284px・左）と検索（356px・右）が**横1行**に並ぶ（実測）。 SP向けの作り替え（44px化・角丸・検索ボタン非表示・こだわり検索のアイコン化）をそのままPCに当てるとこの横並びが崩れるため、SP帯域に閉じ込める。 */ body.fs-body-top .header__inner__bottom__box__search{ display:flex; align-items:center; gap:var(--fkTop-sp-4); padding:4px var(--fkTop-pad) 16px; /* 2026-08-21・オーナー指定で下だけ 4 → 16px（2026-08-18は 4/4） */ background:var(--fkTop-surf); font-family:var(--fkTop-font); position:relative; /* こだわり検索ポップオーバーを使う場合の位置基準 */ } body.fs-body-top .header__inner__bottom__box__search form{ position:relative; display:flex; align-items:center; flex:1; min-width:0; } /* ── 入力欄：デザインHTMLに合わせ、虫眼鏡は右端の送信ボタンとして配置する。 */ body.fs-body-top .header__inner__bottom__box__search__input{ box-sizing:border-box; flex:1; min-width:0; /* ★2026-08-21・オーナー指定で 44px（--fkTop-tap）→ 40px。 44pxは P0-2「タップ領域の最小サイズ」の基準値で、この案件で守ってきた値。入力欄なので誤タップの実害は小さい（隣接する操作要素が無い）が、**基準は下回る**。隣の「こだわり検索」は44pxのままなので、行の高さは変わらない。 */ height:40px; border:1px solid var(--fkTop-line2); border-radius:var(--fkTop-radius); padding:0 42px 0 16px; /* 2026-08-21・オーナー指定で --fkTop-surf2(#F6F6F6) → 白。ヘッダーを半透明にしたぶん、入力欄だけは不透明の白で浮かせて読みやすくする狙いに合う。 */ background-color:#ffffff; background-image:none; box-shadow:0 1px 3px rgba(0,0,0,.05); font-size:14px; font-weight:500; color:var(--fkTop-ink); } body.fs-body-top .header__inner__bottom__box__search__input::placeholder{ color:var(--fkTop-ink3); font-size:14px; font-weight:500; letter-spacing:.01em; } /* ── 検索送信ボタン：入力欄右端の虫眼鏡アイコン。 */ body.fs-body-top .header__inner__bottom__box__search__button{ position:absolute; top:0; right:0; z-index:2; display:flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; margin:0; padding:0; border:0; border-radius:0 var(--fkTop-radius) var(--fkTop-radius) 0; background:transparent; color:var(--fkTop-ink); font-size:0; line-height:1; overflow:hidden; cursor:pointer; } body.fs-body-top .header__inner__bottom__box__search__button .fk-search-submit__icon{ display:block; width:16px; height:16px; object-fit:contain; } body.fs-body-top .fk-search-submit__text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ── 「こだわり検索」：デモ仕様の44×44アイコンボタンにする ── * デモは検索窓の右にツマミ（tune）アイコンのボタンを置き、押すと条件パネルが開く形だった。 * ただしデモのパネルは中身がダミー（丈・長さ／サイズ／カラー／素材・機能は何にもつながっていない）。 * 実サイトの「こだわり検索」は /f/search という**実際に動くページ**への導線なので、 * 見た目だけデモのアイコンボタンにして、行き先はそのまま残す。 * （パネル方式にするなら search-popover.js の FORCE_POPOVER を true にする。 * その場合は絞り込み条件を実装しないと、動く導線を動かないパネルに置き換えることになる。） */ body.fs-body-top .header__inner__bottom__box__search__commitment{ margin:0; flex:none; } body.fs-body-top .header__inner__bottom__box__search__commitment a{ box-sizing:border-box; display:grid; place-items:center; /* ★2026-08-21・オーナー指定で 44px（--fkTop-tap）→ 40px。隣の入力欄（同日40pxへ変更）と高さがそろう。ただしここは**入力欄と違って押すもの**なので、P0-1「タップ領域 44×44」を実質的に取り下げることになる（P0-1はまさにこの「こだわり検索」を 40×40 → 44×44 にした対応だった）。指定どおり入れているが、基準を下回っている事実は記録しておく。戻すならこの2行。 */ width:40px; height:40px; padding:0; border:1px solid var(--fkTop-line2); border-radius:var(--fkTop-radius); /* 2026-08-21・オーナー支給の slider.svg に差し替え（それまではインラインのdata URIで描いていた）。 URLは header.css の --fkTop-icon-slider が持つ＝投入前のURL書き換えが1箇所で済む。 ★素材は18×18。従来は 18×14 で描いていたので、**表示サイズも18×18に合わせた** （14pxのまま使うと縦に潰れる）。 */ background:var(--fkTop-surf) var(--fkTop-icon-slider) no-repeat center / 18px 18px; /* ラベル「こだわり検索」は視覚的にだけ隠す（読み上げ・リンクの意味は保つ） */ font-size:0; color:transparent; text-decoration:none; overflow:hidden; white-space:nowrap; } /* ── 以下「こだわり検索」ポップオーバー用のスタイル ── * ★現状は未使用。実サイトには既に「こだわり検索」ボタン（/f/search）が存在するため、 * search-popover.js は新しいトリガーを注入せず、既存リンクを活かす方針にした（2026-08-18）。 * ポップオーバー方式（デモの提案）に切り替える判断が出た場合に備えて規則は残してある。 */ /* ── こだわり検索トリガー（JS注入）── P0-1: 40×40 → 44×44px */ body.fs-body-top .fk-top__pref-trigger{ appearance:none; width:var(--fkTop-tap); height:var(--fkTop-tap); flex:none; border:1px solid var(--fkTop-line2); border-radius:var(--fkTop-radius); background:var(--fkTop-surf); display:grid; place-items:center; cursor:pointer; } body.fs-body-top .fk-top__pref-trigger[aria-expanded="true"]{ background:var(--fkTop-ink); border-color:var(--fkTop-ink); } body.fs-body-top .fk-top__pref-trigger .fk-top__tune-ico{ display:flex; flex-direction:column; gap:4px; width:18px; } body.fs-body-top .fk-top__pref-trigger .fk-top__tune-ico i{ display:block; height:1.5px; background:var(--fkTop-ink2); border-radius:2px; position:relative; } body.fs-body-top .fk-top__pref-trigger .fk-top__tune-ico i::after{ content:""; position:absolute; top:-2.25px; width:6px; height:6px; border-radius:50%; background:var(--fkTop-ink2); } body.fs-body-top .fk-top__pref-trigger .fk-top__tune-ico i:nth-child(1)::after, body.fs-body-top .fk-top__pref-trigger .fk-top__tune-ico i:nth-child(3)::after{ left:3px; } body.fs-body-top .fk-top__pref-trigger .fk-top__tune-ico i:nth-child(2)::after{ right:3px; } body.fs-body-top .fk-top__pref-trigger[aria-expanded="true"] .fk-top__tune-ico i, body.fs-body-top .fk-top__pref-trigger[aria-expanded="true"] .fk-top__tune-ico i::after{ background:#fff; } /* ── こだわり検索ポップオーバー（JS注入） ── * form自身をposition:relativeの基準にしているため、left/right:0はform幅に揃う。 * ヘッダー内の実際の余白と視覚的に揃うかは投入後の実機確認が要る（NOTES.md）。 */ body.fs-body-top .fk-top__pref-popover{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; background:var(--fkTop-surf); border:1px solid var(--fkTop-line2); border-radius:10px; padding:var(--fkTop-sp-6); box-shadow:0 10px 28px rgba(0,0,0,.18); } body.fs-body-top .fk-top__pref-popover[hidden]{ display:none; } body.fs-body-top .fk-top__pref-head{ display:flex; align-items:center; justify-content:space-between; } body.fs-body-top .fk-top__pref-head b{ font-size:14px; } body.fs-body-top .fk-top__pref-head button{ appearance:none; border:0; background:transparent; font:20px/1 var(--fkTop-font); color:var(--fkTop-ink3); padding:5px; cursor:pointer; min-width:var(--fkTop-tap); min-height:var(--fkTop-tap); } body.fs-body-top .fk-top__pref-popover p{ font-size:12px; /* 添付（説明） */ color:var(--fkTop-ink3); margin-top:2px; } body.fs-body-top .fk-top__pref-options{ display:grid; grid-template-columns:1fr 1fr; gap:var(--fkTop-sp-4); margin-top:var(--fkTop-sp-6); } body.fs-body-top .fk-top__pref-options button{ appearance:none; border:1px solid var(--fkTop-line); background:var(--fkTop-surf2); border-radius:var(--fkTop-radius-sm); padding:10px 8px; font:11px var(--fkTop-font); color:var(--fkTop-ink2); text-align:left; min-height:var(--fkTop-tap); } /* footer（既存サイト由来・ご利用ガイド除外） */ #footer { background: #e5e5e5; color: #000; } #footer a { color: #000; text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer .footer__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 48px 20px; box-sizing: border-box; } #footer .footer__inner--pc { display: flex; align-items: flex-start; gap: 56px; flex-wrap: wrap; } #footer .footer__inner__left__logo { max-width: 240px; } #footer .footer__inner__center { display: flex; gap: 54px; } #footer .footer__inner__center__list__item:first-of-type { margin-bottom: 18px; font-size: 15px; font-weight: 700; } #footer .footer__inner__center__list__item { margin-bottom: 12px; font-size: 13px; line-height: 1.5; letter-spacing: 0; } #footer .footer__inner__right { margin-left: auto; } #footer .footer__inner__right__box { width: 210px; } #footer .footer__inner__right__box__contact a { display: block; padding: 14px 12px; background: #000; color: #fff; font-size: 14px; text-align: center; } #footer .footer__inner__right__box__sns { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; } #footer .footer__inner__right__box__sns img { width: 34px; height: 34px; object-fit: contain; } #footer .fukuske_logo-aniv { max-width: 120px; margin-left: auto; } #footer .footer__inner__copy { width: 100%; margin-top: 40px; color: #444; font-size: 11px; text-align: center; } #footer .footer__inner--sp { display: none; } #footer .f-categoryArea-outer { max-width: 1200px; margin: 0 auto; padding: 42px 20px 0; box-sizing: border-box; } #footer .f-categoryArea-title { margin-bottom: 28px; color: #000; font-size: 18px; font-weight: 700; letter-spacing: 0; text-align: center; } #footer .f-categoryArea { max-width: 1120px; margin: 0 auto 36px; } #footer .f-categoryArea .ctg_content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } #footer .f-categoryArea .ctg_content-flex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } #footer .f-categoryArea ._ctgGroup { margin: 0; } #footer .f-categoryArea ._ctgGroupChild { margin: 0 0 22px; } #footer .f-categoryArea ._top { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #000; font-size: 16px; font-weight: 700; } #footer .f-categoryArea ._top a, #footer .f-categoryArea ._head { color: #000; font-weight: 700; } #footer .f-categoryArea ._head { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.45; } #footer .f-categoryArea ul { margin: 0; padding: 0; list-style: none; } #footer .f-categoryArea li a { display: block; padding: 3px 0; color: #333; font-size: 13px; line-height: 1.55; } @media (max-width: 767px) { #footer .footer__inner--pc { display: none; } #footer .footer__inner--sp { display: block; width: 92%; padding: 0 0 36px; } #footer .footer__inner--sp__list--first { margin-bottom: 34px; } #footer .footer__inner--sp__list--first__item { position: relative; border-bottom: 1px solid #b7b7b7; font-size: 16px; font-weight: 700; line-height: 1.4; } #footer .footer__inner--sp__list--first__item a, #footer .footer__inner--sp__list--first__item--accordion { display: block; padding: 20px 28px 18px 0; color: #000; } #footer .footer__inner--sp__list--first__item--accordion::before, #footer .footer__inner--sp__list--first__item--accordion::after { content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 2px; background: #777; transition: transform .2s ease; } #footer .footer__inner--sp__list--first__item--accordion::after { transform: rotate(90deg); } #footer .footer__inner--sp__list--first__item--accordion.is-open::after { transform: rotate(0deg); } #footer .footer__inner--sp__list--second { display: none; } #footer .footer__inner--sp__list--second__item { border-bottom: 1px solid #d0d0d0; font-size: 14px; } #footer .footer__inner--sp__list--second__item a { display: block; padding: 16px 0 15px 16px; color: #333; } #footer .footer__inner--sp__list__sns { display: flex; justify-content: center; gap: 18px; margin: 0 auto 34px; } #footer .footer__inner--sp__list__sns img { width: 34px; height: 34px; object-fit: contain; } #footer .footer__inner--sp__logo { width: 180px; margin: 0 auto 24px; text-align: center; } #footer .footer__inner--sp__copy { color: #444; font-size: 11px; text-align: center; } #footer .f-categoryArea-outer { padding: 28px 4% 0; } #footer .f-categoryArea-title { margin-bottom: 18px; font-size: 16px; } #footer .f-categoryArea { margin-bottom: 24px; } #footer .f-categoryArea .ctg_content, #footer .f-categoryArea .ctg_content-flex { display: block; } #footer .f-categoryArea ._top, #footer .f-categoryArea ._head { position: relative; margin: 0; padding: 16px 28px 15px 0; border-bottom: 1px solid #cfcfcf; font-size: 15px; } #footer .f-categoryArea .first-content, #footer .f-categoryArea ._accodion-third { display: none; } #footer .f-categoryArea .f-ctg-trigger-01::before, #footer .f-categoryArea .f-ctg-trigger-01::after, #footer .f-categoryArea ._accodion-second::before, #footer .f-categoryArea ._accodion-second::after { content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 2px; background: #777; transition: transform .2s ease; } #footer .f-categoryArea .f-ctg-trigger-01::after, #footer .f-categoryArea ._accodion-second::after { transform: rotate(90deg); } #footer .f-categoryArea .f-ctg-trigger-01.active::after, #footer .f-categoryArea ._accodion-second.active::after { transform: rotate(0deg); } #footer .f-categoryArea li a { padding: 12px 0 12px 14px; border-bottom: 1px solid #e5e5e5; font-size: 14px; } } /* FutureShop組み込み用の共通ヘッダー補正 */ @media (min-width:1201px){ /* FutureShopの既存.header__inner__logo幅がナビを右へ押し出すため、 buildと同じ120pxのロゴ枠を共通CSSの最後で固定する。 */ #header .header--sp.fk-top__hdr--inline{ max-width:1200px !important; width:100% !important; min-height:84px !important; margin-inline:auto !important; padding:14px 24px !important; box-sizing:border-box !important; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; } #header .header--sp.fk-top__hdr--inline .header__inner__logo{ flex:0 0 120px !important; width:120px !important; min-width:120px !important; margin:0 !important; padding:0 !important; } #header .header--sp.fk-top__hdr--inline .header__inner__logo--img{ width:120px !important; max-width:120px !important; height:auto !important; } #header .header--sp.fk-top__hdr--inline .fk-top__gnav{ margin-left:32px !important; padding:0 !important; } #header .header--sp.fk-top__hdr--inline .fk-top__gnav > ul{ margin:0 !important; padding:0 !important; } #header .header--sp.fk-top__hdr--inline .fk-top__gnav > ul > li > a{ font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; font-size:15px !important; line-height:1.4 !important; } #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search{ height:40px !important; box-sizing:border-box !important; } #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search form{ height:40px !important; } #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search__input{ height:40px !important; min-height:40px !important; box-sizing:border-box !important; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; font-size:14px !important; } /* body classがFutureShop側で付く前でも、改修ヘッダー自身を崩さない。 */ #header .header--pc{ display:none !important; } #header .header--sp.fk-top__hdr--inline{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:0 !important; } #header .header--sp.fk-top__hdr--inline .fk-top__gnav{ display:block !important; flex:0 0 auto !important; } #header .header--sp.fk-top__hdr--inline .fk-top__gnav > ul{ display:flex !important; align-items:center; gap:28px; list-style:none; } #header .header--sp.fk-top__hdr--inline .fk-top__gnav > ul > li > a{ display:flex; align-items:center; min-height:44px; padding:0 2px; color:#111; font:500 15px/1.4 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif; text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; } #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search{ display:flex !important; flex:0 1 307px !important; width:307px !important; min-width:307px !important; max-width:307px !important; margin-inline:24px !important; padding:0 !important; order:0 !important; background:transparent !important; } #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search form{ position:relative !important; display:flex !important; align-items:center !important; flex:1 1 auto !important; min-width:0 !important; } #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search__button{ display:flex !important; } #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search__commitment{ display:flex !important; flex:0 0 40px !important; width:40px !important; height:40px !important; margin:0 !important; padding:0 !important; align-items:center; justify-content:center; background:transparent !important; border:0 !important; box-shadow:none !important; } #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search__commitment a{ display:grid !important; place-items:center; width:40px !important; height:40px !important; min-width:40px !important; background:#fff url("https://fukuskeonline.itembox.cloud/item/common/images/header/slider.svg") no-repeat center / 18px 18px !important; border:1px solid #d7d7d7 !important; box-shadow:none !important; color:transparent !important; font-size:0 !important; } #header .header--sp__menu__box__hamburger__button{ appearance:none !important; width:44px; height:44px; min-width:44px; min-height:44px; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; font-size:0 !important; position:relative; } #header .header--sp__menu__box__hamburger__button--border, #header .header--sp__menu__box__hamburger__button::before, #header .header--sp__menu__box__hamburger__button::after{ position:absolute; left:50%; width:22px; height:2px; margin:0; background:#000 !important; transform:translate(-50%,-50%); transform-origin:center; } #header .header--sp__menu__box__hamburger__button--border{ top:50%; display:block; opacity:1; } #header .header--sp__menu__box__hamburger__button::before{ content:""; top:calc(50% - 7px); } #header .header--sp__menu__box__hamburger__button::after{ content:""; top:calc(50% + 7px); } #header #header--sp__menu__box.is-open .header--sp__menu__box__hamburger__button--border{ opacity:0; } #header #header--sp__menu__box.is-open .header--sp__menu__box__hamburger__button::before{ top:50%; transform:translate(-50%,-50%) rotate(45deg); } #header #header--sp__menu__box.is-open .header--sp__menu__box__hamburger__button::after{ top:50%; transform:translate(-50%,-50%) rotate(-45deg); } /* 既存テーマの後勝ち指定で検索行が折り返されないよう、buildの1段構成を固定する。 */ body.fs-body-top #header .header--pc{ display:none !important; } body.fs-body-top #header .header--sp.fk-top__hdr--inline{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:0 !important; } body.fs-body-top #header .header--sp.fk-top__hdr--inline .header__inner__logo, body.fs-body-top #header .header--sp.fk-top__hdr--inline .header__inner__account{ flex:0 0 auto !important; } body.fs-body-top #header .header--sp.fk-top__hdr--inline .fk-top__gnav{ display:block !important; flex:0 0 auto !important; } body.fs-body-top #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search{ display:flex !important; flex:0 1 307px !important; width:307px !important; min-width:307px !important; max-width:307px !important; margin-inline:24px !important; padding:0 !important; order:0 !important; background:transparent !important; } body.fs-body-top #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search form{ position:relative !important; display:flex !important; align-items:center !important; flex:1 1 auto !important; min-width:0 !important; } body.fs-body-top #header .header--sp.fk-top__hdr--inline .header__inner__bottom__box__search__button{ display:flex !important; } } body.fs-body-top #header .header__inner__bottom__box__search__commitment{ display:flex !important; flex:0 0 40px !important; width:40px !important; height:40px !important; margin:0 !important; padding:0 !important; align-items:center; justify-content:center; background:transparent !important; border:0 !important; box-shadow:none !important; } body.fs-body-top #header .header__inner__bottom__box__search__commitment a{ display:grid !important; place-items:center; width:40px !important; min-width:40px !important; height:40px !important; background:#fff var(--fkTop-icon-slider) no-repeat center / 18px 18px !important; border:1px solid #d7d7d7 !important; box-shadow:none !important; } /* build responsive.css の極小幅ヘッダー指定 */ @media (max-width:359px){ .header__inner__logo--img{ width:104px; } body.fs-body-top #header .header--sp{ padding:10px 12px; } } /* JSが遅延読み込み・無効の場合も、PCナビのhoverだけでメガメニューを表示する。 */ @media (min-width:1201px){ body.fs-body-top .fk-top__gnav-item--has-mega:hover > .fk-top__mega, body.fs-body-top .fk-top__gnav-item--has-mega:focus-within > .fk-top__mega{ opacity:1; visibility:visible; transition:opacity .18s ease, transform .18s ease; } body.fs-body-top .fk-top__gnav-item--has-mega:hover > .fk-top__mega--grouped, body.fs-body-top .fk-top__gnav-item--has-mega:focus-within > .fk-top__mega--grouped{ transform:translateX(-50%) translateY(0); } body.fs-body-top .fk-top__gnav-item--has-mega:hover > .fk-top__mega--flat, body.fs-body-top .fk-top__gnav-item--has-mega:focus-within > .fk-top__mega--flat{ position:absolute; top:calc(100% + 12px) !important; left:0 !important; z-index:1000; transform:translateY(0); } } /* FutureShop側の共通CSSが画像のwidth/heightを42pxへ戻しても、このヘッダーのアイコン本体は20pxで描画する。bodyクラスが付いた場合は上の疑似要素方式が優先されるため、既存ページ側のヘッダーにも影響しない。 */ body:not(.fs-body-top) #header .header__inner__account img{ display:block !important; width:20px !important; height:20px !important; max-width:none !important; object-fit:contain !important; } /* 詳細検索は実サイト側の黒いボタン背景を継承させない。 */ #header .header__inner__bottom__box__search__commitment{ display:flex !important; flex:0 0 40px !important; width:40px !important; height:40px !important; margin:0 !important; padding:0 !important; align-items:center !important; justify-content:center !important; background:transparent !important; border:0 !important; box-shadow:none !important; } #header .header__inner__bottom__box__search__commitment a{ display:grid !important; place-items:center !important; box-sizing:border-box !important; width:40px !important; min-width:40px !important; height:40px !important; padding:0 !important; background:#fff url("https://fukuskeonline.itembox.cloud/item/common/images/header/slider.svg") no-repeat center / 18px 18px !important; border:1px solid #d7d7d7 !important; border-radius:8px !important; box-shadow:none !important; color:transparent !important; font-size:0 !important; line-height:0 !important; text-decoration:none !important; } /* JSが遅れても、共通HTMLに含まれるフラット型メニューはhoverで開けるようにする。 */ @media (min-width:1201px){ #header .fk-top__gnav > ul > li.fk-top__gnav-item--has-mega{ position:relative; } #header .fk-top__gnav > ul > li.fk-top__gnav-item--has-mega > .fk-top__mega--flat{ position:absolute !important; top:calc(100% + 12px) !important; left:0 !important; z-index:1000 !important; min-width:220px; padding:14px; border-radius:20px; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; } #header .fk-top__gnav > ul > li.fk-top__gnav-item--has-mega:hover > .fk-top__mega--flat, #header .fk-top__gnav > ul > li.fk-top__gnav-item--has-mega:focus-within > .fk-top__mega--flat{ opacity:1; visibility:visible; transform:translateY(0); } #header .fk-top__mega--flat .fk-top__mega-flatlist{ display:grid; gap:2px; margin:0; padding:0; list-style:none; } #header .fk-top__mega--flat .fk-top__mega-flatlist li, #header .fk-top__mega--flat .fk-top__mega-flatlist a{ margin:0; } #header .fk-top__mega--flat .fk-top__mega-flatlist a{ display:block; padding:11px 14px; color:#171717; font-size:14px; line-height:1.4; text-decoration:none; white-space:nowrap; } #header .fk-top__mega--flat .fk-top__mega-flatlist a:hover{ background:#f6f6f6; } } /* 既存 common.css?251205 からヘッダーを分離するための専用スコープ。 common.css自体は変更せず、fk-header-rebuildの詳細度を上げて必要箇所だけ上書きする。 */ #header.fk-header-rebuild, #header.fk-header-rebuild *{ box-sizing:border-box; } #header.fk-header-rebuild{ font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; background:#fff !important; } @media (min-width:1201px){ #header.fk-header-rebuild .header--pc{ display:none !important; } #header.fk-header-rebuild .header--sp.fk-top__hdr--inline{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; width:100% !important; max-width:1200px !important; min-height:84px !important; margin-inline:auto !important; padding:14px 24px !important; background:transparent !important; box-shadow:none !important; gap:0 !important; } #header.fk-header-rebuild .header__inner__logo{ flex:0 0 120px !important; width:120px !important; min-width:120px !important; margin:0 !important; padding:0 !important; } #header.fk-header-rebuild .header__inner__logo--img{ display:block !important; width:120px !important; max-width:120px !important; height:auto !important; } #header.fk-header-rebuild .fk-top__gnav{ display:block !important; flex:0 0 auto !important; width:auto !important; margin-left:32px !important; padding:0 !important; } #header.fk-header-rebuild .fk-top__gnav > ul{ display:flex !important; align-items:center !important; gap:28px !important; margin:0 !important; padding:0 !important; list-style:none !important; } #header.fk-header-rebuild .fk-top__gnav > ul > li{ margin:0 !important; padding:0 !important; } #header.fk-header-rebuild .fk-top__gnav > ul > li > a{ display:flex !important; align-items:center !important; min-height:44px !important; padding:0 2px !important; color:#111 !important; font:500 15px/1.4 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; text-decoration:none !important; white-space:nowrap !important; } #header.fk-header-rebuild .header__inner__bottom__box__search{ display:flex !important; flex:0 1 307px !important; width:307px !important; min-width:307px !important; max-width:307px !important; height:40px !important; margin-inline:24px !important; padding:0 !important; background:transparent !important; } #header.fk-header-rebuild .header__inner__bottom__box__search form{ position:relative !important; display:flex !important; align-items:center !important; flex:1 1 auto !important; width:auto !important; height:40px !important; margin:0 !important; padding:0 !important; } #header.fk-header-rebuild .header__inner__bottom__box__search__input{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; height:40px !important; min-height:40px !important; padding:0 42px 0 16px !important; border:1px solid #d7d7d7 !important; border-radius:8px !important; background:#fff !important; background-image:none !important; color:#171717 !important; font:500 14px/1.4 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; opacity:1 !important; } #header.fk-header-rebuild .header__inner__bottom__box__search__input::placeholder{ color:#666 !important; font-size:14px !important; font-weight:500 !important; letter-spacing:.01em !important; opacity:1 !important; } #header.fk-header-rebuild .header__inner__bottom__box__search__button{ position:absolute !important; top:0 !important; right:0 !important; z-index:2 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:40px !important; height:40px !important; min-width:40px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 8px 8px 0 !important; background:transparent !important; color:#111 !important; font-size:0 !important; line-height:1 !important; overflow:hidden !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; cursor:pointer !important; } #header.fk-header-rebuild .header__inner__bottom__box__search__button .fk-search-submit__icon{ display:block !important; width:16px !important; height:16px !important; object-fit:contain !important; } #header.fk-header-rebuild .fk-search-submit__text{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; } #header.fk-header-rebuild .header__inner__bottom__box__search__commitment{ display:flex !important; flex:0 0 40px !important; width:40px !important; height:40px !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } #header.fk-header-rebuild .header__inner__bottom__box__search__commitment a{ display:grid !important; place-items:center !important; width:40px !important; height:40px !important; min-width:40px !important; padding:0 !important; border:1px solid #d7d7d7 !important; border-radius:8px !important; background:#fff url("https://fukuskeonline.itembox.cloud/item/common/images/header/slider.svg") no-repeat center / 18px 18px !important; box-shadow:none !important; color:transparent !important; font-size:0 !important; } #header.fk-header-rebuild .header__inner__account{ display:flex !important; flex:0 0 auto !important; align-items:center !important; gap:8px !important; } #header.fk-header-rebuild .header--sp__menu__box__hamburger__button{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } } /* 公式SPハンバーガーメニューをPC/SP共通で使うための再スキン。 */ #header.fk-header-rebuild .header--sp__menu{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 44px !important; width:44px !important; height:44px !important; } #header.fk-header-rebuild #header--sp__menu__box{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; margin:0 !important; padding:0 !important; cursor:pointer; z-index:10030; } #header.fk-header-rebuild .header--sp__menu__box__hamburger, #header.fk-header-rebuild .header--sp__menu__box__hamburger__button{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } #header.fk-header-rebuild .header--sp__menu__box__hamburger__button--border, #header.fk-header-rebuild .header--sp__menu__box__hamburger__button::before, #header.fk-header-rebuild .header--sp__menu__box__hamburger__button::after{ position:absolute !important; left:50% !important; display:block !important; width:22px !important; height:2px !important; margin:0 !important; border-radius:0 !important; background:#000 !important; transform:translate(-50%,-50%) !important; transform-origin:center !important; } #header.fk-header-rebuild .header--sp__menu__box__hamburger__button--border{ top:50% !important; color:transparent !important; font-size:0 !important; line-height:0 !important; } #header.fk-header-rebuild .header--sp__menu__box__hamburger__button::before{ content:"" !important; top:calc(50% - 7px) !important; } #header.fk-header-rebuild .header--sp__menu__box__hamburger__button::after{ content:"" !important; top:calc(50% + 7px) !important; } #header.fk-header-rebuild #header--sp__menu__box.is-open .header--sp__menu__box__hamburger__button--border{ opacity:0 !important; } #header.fk-header-rebuild #header--sp__menu__box.is-open .header--sp__menu__box__hamburger__button::before{ top:50% !important; transform:translate(-50%,-50%) rotate(45deg) !important; } #header.fk-header-rebuild #header--sp__menu__box.is-open .header--sp__menu__box__hamburger__button::after{ top:50% !important; transform:translate(-50%,-50%) rotate(-45deg) !important; } #header.fk-header-rebuild .header--sp__menu__box__hamburger__button__text{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip-path:inset(50%) !important; white-space:nowrap !important; } #header.fk-header-rebuild .header--sp__menu__list{ display:block !important; position:fixed !important; top:0 !important; bottom:auto !important; left:0 !important; z-index:10040 !important; width:min(84vw,390px) !important; max-width:390px !important; height:100vh !important; height:100dvh !important; margin:0 !important; padding:10px 0 70px !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; background:#fff !important; box-shadow:16px 0 40px rgba(0,0,0,.16) !important; color:#111 !important; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; font-size:14px !important; line-height:1.5 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translate3d(-100%,0,0) !important; transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .28s ease, visibility 0s linear .38s !important; will-change:transform !important; } #header.fk-header-rebuild .header--sp__menu__list.is-open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translate3d(0,0,0) !important; transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .28s ease, visibility 0s linear 0s !important; } #header--sp--overlay{ display:block !important; position:fixed !important; inset:0 !important; z-index:9990 !important; background:rgba(0,0,0,.45) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition: opacity .28s ease, visibility 0s linear .28s !important; } #header--sp--overlay.is-open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transition: opacity .28s ease, visibility 0s linear 0s !important; } #header.fk-header-rebuild .header--sp__menu__list ul, #header.fk-header-rebuild .header--sp__menu__list ol, #header.fk-header-rebuild .header--sp__menu__list li{ margin:0 !important; padding:0 !important; list-style:none !important; } #header.fk-header-rebuild .header--sp__menu__list a, #header.fk-header-rebuild .header--sp__menu__list button{ color:#fff !important; font-family:inherit !important; text-decoration:none !important; } #header.fk-header-rebuild .header--sp__menu__list__member, #header.fk-header-rebuild .header--sp__menu__list__company, #header.fk-header-rebuild .header--sp__menu__list__search{ margin:0 25px 14px !important; } #header.fk-header-rebuild .header--sp__menu__list__member a, #header.fk-header-rebuild .header--sp__menu__list__company a{ display:block !important; padding:12px 10px 10px !important; border:1px solid #dadada !important; background:#f7f7f7 !important; font-size:12px !important; line-height:1.4 !important; text-align:center !important; color: #111 !important; } #header.fk-header-rebuild .header--sp__menu__list__search__form form{ display:flex !important; width:100% !important; height:36px !important; margin:0 !important; padding:0 !important; } #header.fk-header-rebuild .header--sp__menu__list__search__form__input{ display:block !important; flex:1 1 auto !important; min-width:0 !important; width:auto !important; height:36px !important; padding:0 12px !important; border:1px solid #d7d7d7 !important; border-right:0 !important; border-radius:4px 0 0 4px !important; background:#fff !important; font-size:14px !important; } #header.fk-header-rebuild .header--sp__menu__list__search__form__submit{ display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 48px !important; width:48px !important; height:36px !important; margin:0 !important; padding:0 !important; border:1px solid #000 !important; border-radius:0 4px 4px 0 !important; background:#000 !important; color:#fff !important; font-size:12px !important; font-weight:700 !important; line-height:1 !important; text-align:center !important; text-indent:0 !important; opacity:1 !important; visibility:visible !important; white-space:nowrap !important; appearance:none !important; cursor:pointer !important; } #header.fk-header-rebuild .header--sp__menu__list__search__commitment a{ display:block !important; margin-top:8px !important; padding:10px !important; border-radius:4px !important; background:#000 !important; color:#fff !important; font-size:12px !important; font-weight:700 !important; line-height:1.4 !important; text-align:center !important; opacity:1 !important; visibility:visible !important; } #header.fk-header-rebuild .sp_tab ._tabs{ display:flex !important; flex-wrap:wrap !important; gap:0 !important; margin:16px !important; padding:0 !important; } #header.fk-header-rebuild .sp_tab ._item{ display:flex !important; align-items:center !important; justify-content:center !important; width:50% !important; min-height:38px !important; border:1px solid #d7d8d9 !important; background:#fff !important; color:#111 !important; font-size:12px !important; line-height:1.4 !important; cursor:pointer !important; } #header.fk-header-rebuild .sp_tab ._item.is-select{ border-color:var(--fkTop-brand-red) !important; background:var(--fkTop-brand-red) !important; color:#fff !important; } #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content{ display:none; } #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content.is-active{ display:block; } #header.fk-header-rebuild .header--sp__menu__list img{ display:inline-block !important; max-width:100% !important; height:auto !important; opacity:1 !important; visibility:visible !important; vertical-align:middle !important; } #header.fk-header-rebuild .header--sp__menu__list .recommend_lp{ margin:20px 25px 20px !important; } #header.fk-header-rebuild .header--sp__menu__list .recommend_lp ul, #header.fk-header-rebuild .header--sp__menu__list .recommend_lp li{ margin:0 !important; padding:0 !important; list-style:none !important; } #header.fk-header-rebuild .header--sp__menu__list .recommend_lp a{ display:block !important; } #header.fk-header-rebuild .header--sp__menu__list .recommend_lp img{ display:block !important; width:100% !important; height:auto !important; border-radius:4px !important; } #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content > div > ul > li > a, #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content > div > ul > li > button{ position:relative !important; display:flex !important; align-items:center !important; gap:10px !important; width:100% !important; min-height:58px !important; padding:8px 54px 8px 25px !important; border:0 !important; background:#fff !important; color:#111 !important; font-size:13px !important; font-weight:500 !important; line-height:1.4 !important; text-align:left !important; } #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content > div > ul > li{ border-top:1px solid #dedede !important; background:#fff !important; } #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content > div > ul > li:last-child{ border-bottom:1px solid #dedede !important; } #header.fk-header-rebuild .header--sp__menu__list li.is-accordion > button::before, #header.fk-header-rebuild .header--sp__menu__list li.is-accordion > button::after{ content:"" !important; position:absolute !important; top:50% !important; right:25px !important; display:block !important; width:17px !important; height:3px !important; margin:0 !important; border:0 !important; background:#000 !important; transform:translateY(-50%) !important; opacity:1 !important; } #header.fk-header-rebuild .header--sp__menu__list li.is-accordion > button::after{ transform:translateY(-50%) rotate(90deg) !important; } #header.fk-header-rebuild .header--sp__menu__list li.is-accordion.is-open > button::after, #header.fk-header-rebuild .header--sp__menu__list li.is-accordion.active > button::after{ opacity:0 !important; } #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content > div > ul > li > a .-icon, #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content > div > ul > li > button .-icon{ flex:0 0 50px !important; width:50px !important; height:50px !important; margin:0 !important; object-fit:contain !important; } #header.fk-header-rebuild .header--sp__menu__list__category__item, #header.fk-header-rebuild .header--sp__menu__list__category__item--acordion__under__item{ margin:0 !important; border-top:1px solid #e5e5e5 !important; background:#f7f7f7 !important; } #header.fk-header-rebuild .header--sp__menu__list__category__item a, #header.fk-header-rebuild .header--sp__menu__list__category__item button, #header.fk-header-rebuild .header--sp__menu__list__category__item--acordion__under__item a, #header.fk-header-rebuild .header--sp__menu__list__category__item--acordion__under__item button{ display:block !important; width:100% !important; min-height:46px !important; padding:14px 25px !important; border:0 !important; background:transparent !important; color:#111 !important; font-size:13px !important; font-weight:600 !important; line-height:1.4 !important; text-align:left !important; } #header.fk-header-rebuild .header--sp__menu__list__category__item > a{ background:#f7f7f7 !important; } #header.fk-header-rebuild .header--sp__menu__list__category__item--acordion__under__item + div{ padding:10px 25px 16px !important; background:#fff !important; } #header.fk-header-rebuild .header--sp__menu__list__category__item--acordion__under__item + div li a{ display:block !important; padding:6px 0 !important; color:#111 !important; font-size:13px !important; font-weight:500 !important; line-height:1.5 !important; } #header.fk-header-rebuild .header--sp__menu__list li.is-accordion > div li a{ color:#111 !important; font-weight:500 !important; } /* common.cssの全体リセットに依存しないフッター専用リセット。 */ #footer.fk-footer-rebuild, #footer.fk-footer-rebuild *{ box-sizing:border-box; } #footer.fk-footer-rebuild{ font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; color:#000 !important; } #footer.fk-footer-rebuild ul, #footer.fk-footer-rebuild ol, #footer.fk-footer-rebuild li{ list-style:none !important; } #footer.fk-footer-rebuild .footer__inner__center__list, #footer.fk-footer-rebuild .footer__inner--sp__list--first, #footer.fk-footer-rebuild .footer__inner--sp__list--second, #footer.fk-footer-rebuild .footer__inner__right__box__sns, #footer.fk-footer-rebuild .f-categoryArea ul{ padding:0 !important; } #footer.fk-footer-rebuild .footer__inner__center__list, #footer.fk-footer-rebuild .footer__inner--sp__list--second, #footer.fk-footer-rebuild .f-categoryArea ul{ margin-top:0 !important; } #footer.fk-footer-rebuild .footer__inner__center__list{ margin-bottom:0 !important; } #footer.fk-footer-rebuild img{ display:block; max-width:100%; height:auto; } #footer.fk-footer-rebuild .footer__inner__left__logo img{ width:100%; } /* フッターカテゴリの文字と下段カテゴリの横並びを固定する。 */ #footer.fk-footer-rebuild .f-categoryArea li a{ color:#222 !important; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif !important; font-size:14px !important; font-weight:500 !important; line-height:1.55 !important; } #footer.fk-footer-rebuild .f-categoryArea-title{ font-size:20px !important; } #footer.fk-footer-rebuild .f-categoryArea ._top a, #footer.fk-footer-rebuild .f-categoryArea ._head{ color:#000 !important; font-weight:700 !important; } #footer.fk-footer-rebuild .f-categoryArea ._top, #footer.fk-footer-rebuild .f-categoryArea ._top a{ font-size:16px !important; } #footer.fk-footer-rebuild .f-categoryArea ._head{ font-size:16px !important; } #footer.fk-footer-rebuild .f-categoryArea ._box{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; align-items:flex-start !important; gap:56px 0 !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens{ display:block !important; flex:0 0 50% !important; width:50% !important; max-width:none !important; padding:0 36px 0 0 !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > ._top{ display:block !important; width:100% !important; margin:0 0 32px !important; padding:0 0 20px !important; border-bottom:1px solid #000 !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > .first-content{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:0 28px !important; width:100% !important; margin:0 !important; padding:0 !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > .first-content > ._ctgGroup.first{ float:none !important; width:auto !important; margin:0 !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > .first-content > ._ctgGroup.second{ float:none !important; width:auto !important; margin:0 !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex{ display:block !important; flex:0 0 25% !important; width:25% !important; max-width:none !important; padding:0 0 0 36px !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex ._ctgGroup{ display:block !important; width:100% !important; margin:0 !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex ._ctgGroupChild{ display:block !important; width:100% !important; margin:0 0 34px !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex ._top{ display:block !important; width:100% !important; margin:0 0 20px !important; padding:0 0 20px !important; border-bottom:1px solid #000 !important; } @media (max-width:768px){ #footer.fk-footer-rebuild .f-categoryArea ._box{ display:block !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens, #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex{ width:100% !important; padding:0 !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > .first-content{ display:block !important; } #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > .first-content > ._ctgGroup.first, #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > .first-content > ._ctgGroup.second{ float:none !important; width:100% !important; margin:0 !important; } } /* ══════════════════════════════════════════════════════════════ SP／タブレット（〜1200px）のヘッダーを2段構成にする（2026-08-26） ══════════════════════════════════════════════════════════════ 実装は1段構成（ロゴ｜ナビ｜検索｜アイコンを横1行）だが、SPでは検索窓がアイコンの右へ回って画面外へはみ出していた（390px幅で右端613px）。デザインのSPヘッダーは 1段目：送料無料の帯 2段目：ロゴ＋アイコン4つ 3段目：検索窓（全幅）＋こだわり検索ボタンなので、PCナビが隠れる帯域（〜1200px）で折り返しを許可し、検索を独立行にする。 ★1201px以上には一切影響しない（PCは従来どおり1段）。 */ @media (max-width:1200px){ body.fs-body-top #header .header--sp{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:space-between !important; min-height:0 !important; padding:10px 16px 12px !important; row-gap:10px !important; column-gap:0 !important; } /* 2段目：ロゴ（左） */ body.fs-body-top #header .header--sp .header__inner__logo{ order:1 !important; flex:0 0 auto !important; margin:0 !important; } /* 2段目：アイコン（右） */ body.fs-body-top #header .header--sp .header__inner__account{ order:2 !important; flex:0 0 auto !important; margin-left:auto !important; } /* 3段目：検索窓を全幅で独立させる */ body.fs-body-top #header .header--sp .header__inner__bottom__box__search{ order:3 !important; display:flex !important; flex:0 0 100% !important; width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important; margin:0 !important; padding:0 !important; gap:8px !important; background:transparent !important; } body.fs-body-top #header .header--sp .header__inner__bottom__box__search form{ display:flex !important; flex:1 1 auto !important; min-width:0 !important; } body.fs-body-top #header .header--sp .header__inner__bottom__box__search__input{ width:100% !important; min-width:0 !important; max-width:none !important; box-sizing:border-box !important; } /* SPでもPCナビは出さない */ body.fs-body-top #header .header--sp .fk-top__gnav{ display:none !important; } } /* 2026-08-28: SPメニューの後勝ち補正 */ #header.fk-header-rebuild .header--sp__menu__list, #header.fk-header-rebuild .header--sp__menu__list a, #header.fk-header-rebuild .header--sp__menu__list button{ font-weight:500 !important; } #header.fk-header-rebuild .header--sp__menu__list__category > .header--sp__menu__list__category__item{ display:block !important; margin:0 !important; padding:0 !important; border-top:1px solid #e5e5e5 !important; background:#f7f7f7 !important; } #header.fk-header-rebuild .header--sp__menu__list__category > .header--sp__menu__list__category__item > a{ display:block !important; width:100% !important; min-height:46px !important; margin:0 !important; padding:14px 25px !important; background:#f7f7f7 !important; color:#111 !important; font-size:13px !important; font-weight:700 !important; line-height:1.4 !important; text-align:left !important; text-decoration:none !important; box-sizing:border-box !important; } #header.fk-header-rebuild .header--sp__menu__list__category__item--acordion__under__item > button, #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content > div > ul > li > a, #header.fk-header-rebuild .header--sp__menu__list .switch.tab-content > div > ul > li > button{ font-weight:700 !important; } @media (hover:hover) and (pointer:fine){ #header.fk-header-rebuild .header--sp__menu__list a:hover, #header.fk-header-rebuild .header--sp__menu__list button:hover{ opacity:.9; } #header.fk-header-rebuild .header--sp__menu__list__search__form__submit:hover, #header.fk-header-rebuild .header--sp__menu__list__search__commitment a:hover, #header.fk-header-rebuild .header--sp__menu__list__category > .header--sp__menu__list__category__item > a:hover{ opacity:1; } } /* ══════════════════════════════════════════════════════════════ フッター：SPのカテゴリ見出しの罫線を揃える（2026-08-31） ══════════════════════════════════════════════════════════════ PC用の2つの規則 #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > ._top #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex ._top が border-bottom:1px solid #000 !important をメディアクエリ無しで当てていたため、 SPのアコーディオンでも黒い線のまま残っていた（メンズ／キッズ・ベビー／アウトレット／福助足袋の4本。レディースだけ #cfcfcf で正しかった）。同時に margin:0 0 32px / padding:0 0 20px も効いていて行の間隔もズレていたので、 SP（〜767px）では他の見出しと同じ指定に戻す。 ★768px以上のPCレイアウトには影響しない。 */ @media (max-width:767px){ #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > ._top, #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex ._top{ position:relative !important; margin:0 !important; padding:16px 28px 15px 0 !important; border-bottom:1px solid #cfcfcf !important; font-size:15px !important; } } /* ══════════════════════════════════════════════════════════════ フッター：SPのカテゴリ行の高さを揃える（2026-09-02） ══════════════════════════════════════════════════════════════ 実測すると2つの原因で行の高さ・間隔がバラついていた。 ① 文字サイズと行送りが揃っていない ._top（部門）は 15〜16px / line-height:normal → 行高58px ._head（中カテゴリ）は 16px / line-height:23.2px → 行高55px ② 囲みdivの下マージンが行間に出ている .f-categoryArea=24px ／ ._ctgGroupChild=22px ／ .ctg_content-flex ._ctgGroupChild=34px SP（〜767px）では全行を同じ文字サイズ・行送りにし、囲みの下マージンを消して 1pxの罫線だけで区切る。 ★セレクタは #footer.fk-footer-rebuild 始まりに揃えてある。PC用の規則（.ctg_content-flex ._ctgGroupChild{margin:0 0 34px !important} など）と詳細度を並べ、記述順で後勝ちさせるため。 ★768px以上のPCレイアウトには影響しない。 */ @media (max-width:767px){ #footer.fk-footer-rebuild .f-categoryArea ._top, #footer.fk-footer-rebuild .f-categoryArea ._head, #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens > ._top, #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex ._top{ box-sizing:border-box !important; margin:0 !important; padding:16px 28px 15px 0 !important; font-size:15px !important; line-height:22px !important; /* 端数を出さないためpx指定（1.5だと22.5pxで行高が1px揺れる） */ min-height:54px !important; } /* 行間に出ていた囲みdivの余白を消す（区切りは罫線が担う） */ #footer.fk-footer-rebuild .f-categoryArea, #footer.fk-footer-rebuild .f-categoryArea .ctg_content, #footer.fk-footer-rebuild .f-categoryArea ._ctgGroup, #footer.fk-footer-rebuild .f-categoryArea ._ctgGroupChild, #footer.fk-footer-rebuild .f-categoryArea .ctg_content.mens ._ctgGroupChild, #footer.fk-footer-rebuild .f-categoryArea .ctg_content-flex ._ctgGroupChild{ margin-top:0 !important; margin-bottom:0 !important; } } /* ══════════════════════════════════════════════════════════════ フッター：SPの「定番アイテム／アイテム／会社概要／お問い合わせ」もカテゴリ行と同じ高さに揃える（2026-09-02） ══════════════════════════════════════════════════════════════ .footer__inner--sp__list--first__item は .f-categoryArea とは別系統のリストで、実測すると 16px / line-height:22.4px / padding:20px 28px 18px 0 / 罫線#b7b7b7 で行高61px（カテゴリ行は54px）だった。カテゴリ行と同じ値に統一する。 ★見出し行（--accordion）はli自身に余白、リンク行（お問い合わせ）は中のaに余白、と余白の付き先が違うので分けて指定する。 */ @media (max-width:767px){ #footer .footer__inner--sp__list--first__item{ box-sizing:border-box !important; margin:0 !important; min-height:54px !important; border-bottom:1px solid #cfcfcf !important; font-size:15px !important; line-height:22px !important; } /* 見出し行（テキストのみ） */ #footer .footer__inner--sp__list--first__item--accordion{ padding:16px 28px 15px 0 !important; } /* リンク行（中にがある） */ #footer .footer__inner--sp__list--first__item:not(.footer__inner--sp__list--first__item--accordion){ padding:0 !important; } #footer .footer__inner--sp__list--first__item:not(.footer__inner--sp__list--first__item--accordion) > a{ display:block !important; box-sizing:border-box !important; min-height:53px !important; padding:16px 28px 15px 0 !important; font-size:15px !important; line-height:22px !important; } /* カテゴリ一覧との間に出ていた余白を消す */ #footer .footer__inner--sp__list--first, #footer .footer__inner.footer__inner--sp{ margin-top:0 !important; padding-top:0 !important; } }