@charset "UTF-8";
/* ============================================================================
   pages.css  —  おやつ/フード 着地ページ 専用スタイル（レビュー反映・最終版）
   ----------------------------------------------------------------------------
   ■前提（実ファイル検証済み・レビュー反映）
     ・Future Recommend(FR) 枠は、囲みクラスに関係なく管理画面テンプレ設定で
       描画マークアップが決まる。DOGTREE の既定は「Static grid」
       ＝ <div class="fr3-productListStatic"> + <article class="fr3-item"> を
       非同期で後入れ（実例: gift/html.html L617-642）。
       → よって本CSSは「FRが実際に吐く .fr3-productListStatic」を対象にする。
         .fr3-productListCarousel を待っても永久に一致しないため使わない。
     ・common.css SP(@max-width:768px) は Static grid を横スクロール化する:
         .flywheel-recommend__frame{width:100vw; overflow-x:scroll}  (L2710)
         .fr3-productListStatic{width:850px}                         (L2722)
         .fr3-productListStatic .fr3-item{width:150px}               (L2725)
       これらを着地では打ち消す（#fs_Top L2716/2730 と同じ手法）。
     ・自動見出し <h2 class="fs-p-heading--lv2"> は common.css L747 で既に
       display:none 済み → 二重見出しは起きない（HTML側 .title のみ表示）。
     ・価格は Static grid で __currencyMark 非表示(L868)・__addon(税込)表示(L864)。
   ■方針
     ・全ルールを .lp-landing 配下にスコープ（common.css を汚さない）。
     ・SPファースト（base = SP / @media min-width:769px で PC 上書き＝common準拠）。
     ・common.css で賄えるものは流用（.wrap-top/.inner/.bg_pale-yellow/.title/
       .btn.white / #ranking のメダル SVG・連番 / #cat-area のタイル）。
   ■含むもの
     1. FR「横スクロール」レコメンド（おすすめ/新着/スタッフ）… static grid を
        横1行スクロール化（.fr3-item を固定幅カード化）
     2. ランキング 3列グリッド（SP）… static grid を 3列グリッド化＋850px打ち消し
     3. NEW バッジ
     4. アウトレット単独時センタリング（空時非表示は JS 一本化。:has()先制は撤去）
     5. バナー領域
     6. ボタン余白 / 見出し余白
   ============================================================================ */


/* ============================================================================
   0. ページ土台
   ========================================================================== */
.lp-landing {
	overflow-x: hidden;
}
.lp-landing > section {
	position: relative;
}

/* FR 枠の共通打ち消し（全レコメンド枠に効かせる基礎）
   common.css L2710 の width:100vw / margin / padding-left:5% / overflow-x:scroll
   を全部戻す。これをしないと枠が画面幅いっぱいに溢れ、意図せぬ横スクロールになる。
   ※ #fs_Top / .page-ranking が L2716 でやっている initial 打ち消しと同義。 */
.lp-landing .flywheel-recommend__frame {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: visible !important;
}
/* FR が枠内に注入し得る自動見出しは念のため着地でも抑止（common L747 と二重の保険） */
.lp-landing .flywheel-recommend__frame .fs-p-heading--lv2 {
	display: none !important;
}


/* ============================================================================
   1. FR「横スクロール」レコメンド（おすすめ / 新着 / スタッフ）
   ----------------------------------------------------------------------------
   対象セクション: .lp-row-scroll（HTML 側で section に付与）
   FR が吐く .fr3-productListStatic（既定 display:flex; flex-wrap:wrap）を、
   ここでは「1 行・折り返さない・横スクロール」に上書きする。
   common.css SP の width:850px（L2722）と .fr3-item{width:150px}（L2725）を打ち消す。
   手動キュレーション新着も同じ .fr3-productListStatic / .fr3-item 構造で書くため
   同一 CSS が両方に効く。
   ========================================================================== */

.lp-landing .lp-row-scroll .fr3-productListStatic {
	display: flex !important;
	flex-wrap: nowrap !important;       /* ← 折り返さない（common は wrap） */
	align-items: flex-start !important;
	justify-content: flex-start !important;
	width: auto !important;             /* ← common SP の 850px を打ち消し */
	gap: 12px !important;
	padding: 4px 0 14px !important;
	margin: 0 !important;
	overflow-x: auto !important;        /* 指で横スクロール */
	overflow-y: visible !important;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;           /* IE/Edge */
	counter-reset: none !important;     /* ランキング連番リセットを無効化 */
}
.lp-landing .lp-row-scroll .fr3-productListStatic::-webkit-scrollbar {
	display: none;                      /* Chrome/Safari */
}
/* 1 枚 = 固定幅カード（SP 約 2.5〜3 枚見せ＝続きがあると分かる）
   common SP の .fr3-item{width:150px; margin-right:20px} を打ち消す。 */
.lp-landing .lp-row-scroll .fr3-productListStatic .fr3-item {
	flex: 0 0 140px !important;
	width: 140px !important;
	margin: 0 !important;
	padding: 0 !important;
	scroll-snap-align: start;
	position: relative;                 /* NEW バッジの基準 */
}
/* 縦グリッド用の連番バッジ（a::before）が横スクロール文脈に漏れないよう無効化 */
.lp-landing .lp-row-scroll .fr3-productListStatic .fr3-item a:before {
	content: none !important;
	display: none !important;
}
.lp-landing .lp-row-scroll .fr3-productListStatic .fr3-item a {
	display: block !important;
	position: relative !important;
}
/* 画像・商品名・価格は common.css の .fr3-item 系がそのまま乗る（aspect-ratio/角丸/
   hover ズーム）。カード幅に合わせてフォントだけ SP 用に少し詰める。 */
.lp-landing .lp-row-scroll .fr3-productListStatic .fr3-item a .fr3-item__productName {
	font-size: 1.3rem;
	margin-top: 8px;
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lp-landing .lp-row-scroll .fr3-productListStatic .fr3-item .fr3-item__productPrice {
	font-size: 1.5rem;
}


/* ============================================================================
   2. ランキング 3列グリッド（SP）
   ----------------------------------------------------------------------------
   対象: #ranking（メダル SVG バッジ・連番 counter() が #ranking スコープのため
   HTML 側の id="ranking" は必須）。FR は Static grid を吐くので、
   common.css SP の「850px 横スクロール」を打ち消し、#fs_Top(L2730) と同じ
   display:grid / 3列 に上書きする（width:% + nth-child より安全）。
   PC は common.css の 5列（display:flex; width:17.6%）のまま＝ここでは触らない。
   ========================================================================== */
@media screen and (max-width: 768px) {
	/* frame の 100vw/overflow-x:scroll は 0.土台で打ち消し済み。ここで grid 化。 */
	.lp-landing #ranking .fr3-productListStatic {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 10px 3% !important;
		width: auto !important;              /* ← common SP の 850px を打ち消し */
		padding: 0 !important;
		overflow-x: visible !important;
	}
	.lp-landing #ranking .fr3-productListStatic .fr3-item {
		width: 100% !important;              /* ← common SP の 150px を打ち消し */
		margin: 0 0 24px !important;         /* margin-right:20px を打ち消し */
	}
	/* メダル/連番バッジは #ranking の common 資産（ranking_label0*.svg・counter）を
	   そのまま流用。SP 縮小は common L2095-2105 が @max-width:1024px で既に効くので
	   ここでは位置(top/left)だけ 3列タイルに合わせて微調整。 */
	.lp-landing #ranking .fr3-productListStatic .fr3-item a:before {
		top: 6px;
		left: 6px;
	}
	.lp-landing #ranking .fr3-productListStatic .fr3-item:nth-child(1) a:before,
	.lp-landing #ranking .fr3-productListStatic .fr3-item:nth-child(2) a:before,
	.lp-landing #ranking .fr3-productListStatic .fr3-item:nth-child(3) a:before {
		top: 0;
		left: 6px;
	}
	.lp-landing #ranking .fr3-productListStatic .fr3-item a .fr3-item__productName {
		font-size: 1.3rem;
		margin-top: 10px;
		margin-bottom: 6px;
	}
	.lp-landing #ranking .fr3-productListStatic .fr3-item .fr3-item__productPrice {
		font-size: 1.6rem;
	}
}


/* ============================================================================
   3. NEW バッジ（横スクロールカード左上の小ラベル）
   ----------------------------------------------------------------------------
   手動キュレーション / 新商品レコメンドどちらでも、カード先頭に
   <span class="lp-new__badge">NEW</span> を置くだけで出る。
   親 .fr3-item は 1.で position:relative 済み。
   ========================================================================== */
.lp-landing .lp-new__badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 20px;
	padding: 0 7px;
	background: #e50012;
	border-radius: 10px;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.lp-landing .lp-new__badge.limited {
	background: #d17b00;
}


/* ============================================================================
   4. アウトレット（空時の見え方）
   ----------------------------------------------------------------------------
   ■重要（レビュー反映）:
     ・「在庫 0 で枠ごと非表示」はマークアップ別に手段が異なる:
        (A) FR レコメンド枠化 → 末尾の共通 JS が .fr3-item 0 件で section を畳む。
        (B) 静的リンク（<a class="linkbox">）運用 → JS/CSS では在庫数を知れない。
            FutureShop 側の「在庫あり商品数」バインドでセクションごと未出力にする
            運用が必須（HTML コメント参照）。CSS/JS では担保できない。
     ・:has() による“描画前の先制 display:none”はチラつき低減より
       「描画ターゲット消失／計測イベント欠落」のリスクが上回るため撤去。
       空判定は末尾 JS（双方向・デバウンス）に一本化する。
   ここでは「アウトレットが消えても残り 1 枚で崩れない」センタリングのみ担う。
   静的リンク版アウトレットは HTML 側で section に id="cat-area" を付け、
   .catlist a.linkbox / .pht / h3 の #cat-area 装飾（角丸・白帯・hoverズーム）を流用する。
   ========================================================================== */
.lp-landing .lp-trial__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 4%;
}
.lp-landing .lp-trial__list a.linkbox {
	width: 100%;                     /* SP: 縦積み 1 列 */
	margin: 0 !important;            /* #cat-area の 17.6%/3%/nth-child を打ち消す */
}
.lp-landing .lp-trial__list a.linkbox:nth-child(5n) {
	margin-right: 0 !important;      /* #cat-area の 5n 規則を無効化 */
}
/* アウトレットが（JS/運用で）非表示になり残り 1 枚のとき、中央寄せ */
.lp-landing .lp-trial__list > a.linkbox:only-child {
	margin-left: auto !important;
	margin-right: auto !important;
}


/* ============================================================================
   5. バナー領域（キービジュアル / 2 枚並びバナー）
   ----------------------------------------------------------------------------
   単体バナーは .lp-banner に <a><img></a> を入れるだけ。PC/SP 出し分けは
   HTML 側で img.pc / img.sp（common.css の .pc/.sp 表示切替を流用）。
   ========================================================================== */
.lp-landing .lp-banner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.lp-landing .lp-banner a {
	display: block;
	width: 100%;                     /* SP: 1 枚 = 全幅 */
	overflow: hidden;
	border-radius: 12px;
}
.lp-landing .lp-banner a img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.2s linear;
	-webkit-transition: -webkit-transform 0.2s linear;
}
.lp-landing .lp-banner a:hover img {
	transform: scale(1.03);
	-webkit-transform: scale(1.03);
}


/* ============================================================================
   6. ボタン余白 / 見出し余白（着地限定・.lp-landing スコープ）
   ========================================================================== */
.lp-landing .btn {
	margin-top: 40px;
}
.lp-landing .title + .btn {
	margin-top: 0;
}
.lp-landing .flywheel-recommend__frame + .btn,
.lp-landing .lp-row-scroll .fr3-productListStatic + .btn {
	margin-top: 45px;
}
/* common の .title は margin-bottom が広い。SP は詰める。 */
.lp-landing .title {
	margin-bottom: 32px;
}


/* ============================================================================
   7. PC 上書き（min-width:769px ＝ common.css の BP 規約に統一）
   ----------------------------------------------------------------------------
   ・ランキング 3→5 列は common.css（PC 既定 flex 5 列）が担うので戻さない。
   ・横スクロールカードは PC で 1 枚を大きく。
   ========================================================================== */
@media screen and (min-width: 769px) {

	/* 横スクロールカード: PC は 1 枚を大きく */
	.lp-landing .lp-row-scroll .fr3-productListStatic {
		gap: 20px !important;
		scroll-snap-type: x mandatory;
	}
	.lp-landing .lp-row-scroll .fr3-productListStatic .fr3-item {
		flex: 0 0 220px !important;
		width: 220px !important;
	}
	.lp-landing .lp-row-scroll .fr3-productListStatic .fr3-item a .fr3-item__productName {
		font-size: 1.6rem;
	}
	.lp-landing .lp-row-scroll .fr3-productListStatic .fr3-item .fr3-item__productPrice {
		font-size: 1.8rem;
	}

	/* NEW バッジ: PC は一回り大きく */
	.lp-landing .lp-new__badge {
		top: 10px;
		left: 10px;
		min-width: 46px;
		height: 24px;
		font-size: 1.3rem;
		border-radius: 12px;
	}

	/* バナー: PC は 2 枚横並び */
	.lp-landing .lp-banner a {
		width: calc((100% - 16px) / 2);
	}

	/* お試し/アウトレット: PC は 2 列 */
	.lp-landing .lp-trial__list a.linkbox {
		width: 48%;
		margin: 0 !important;
	}
	.lp-landing .lp-trial__list > a.linkbox:only-child {
		width: 48%;
	}

	/* 見出し・ボタン余白は PC で少し広げる */
	.lp-landing .title {
		margin-bottom: 56px;
	}
	.lp-landing .btn {
		margin-top: 50px;
	}
}