@charset "UTF-8";
/* ============================================================
   lp-base.css — 特集LP（商品グループページの独自コメントに貼るLP）の土台
   設置先: https://vanityme.itembox.cloud/item/css/lp-base.css

   ■ 読み込む場所
     LPページだけ。パーツ「LP土台CSS」を貼ると <link> が入る。
     ★このファイルはヘッダーやパンくずにも手を入れる。全ページ共通の
       フレームに入れると全ページが変わってしまうので、絶対に入れないこと。

   ■ 使い方
     LP本体を <div class="vmlp vmlp-<slug>"> で包む。
     ページ固有の数値は :root で変数を上書きする。

       <style>
       :root{ --lp-headerH: 60px; }        ← ヘッダーの高さが変わったとき
       </style>

   ■ 変数
     --lp-headerH     ヘッダーの高さ。#page_wrap の押し下げとアンカー退避に使う
     --lp-gutter      親 div.container の左右padding。スマホ全幅の打ち消し量
     --lp-max         LPの最大幅（デザインの原寸）
     --lp-anchor-gap  ページ内ジャンプの着地位置。ヘッダー下端からの余白
     --lp-header-bg   ヘッダーの背景。既定は半透明の白

   ■ 実測メモ（2026-08-18 / ゆいぴすLPで計測）
     ヘッダー: position:fixed / 高さ60px（スマホもPCも同じ）
       ただし .txt_menu を出すと下に43pxはみ出して約97pxになる
     div.container: 左右 padding 5px。375pxの画面でLPが365pxになる原因
     アンカー退避 -60px でヘッダー下端にぴったり、-70px で10px空く
============================================================ */

:root {
  --lp-headerH: 60px;
  --lp-gutter: 5px;
  --lp-max: 750px;
  --lp-anchor-gap: 10px;
  --lp-header-bg: rgba(255, 255, 255, .72);
}

/* ───────── ページの土台（LPページ全体にかかる） ───────── */

/* ヘッダーは出す。テキストメニュー（新作/全商品/ランキング/カテゴリ）だけ隠す。
   出したままだとヘッダーが下に43pxはみ出し、押し下げ量が合わなくなる */
.txt_menu { display: none !important; }

/* ヘッダーは position:fixed。スクロール中はLP画像がこの下を通るので、
   背景を透かして下の絵を見せる。透かしたくないときは --lp-header-bg に
   不透明な色を入れる（例: #fdf7fb）。

   ★背景とぼかしは ::before に持たせること。#global_header 自身に
     backdrop-filter（や filter / transform）を付けると、その要素が
     position:fixed の子の「包含ブロック」になってしまう。
     ヘッダーの中にはサイドメニュー(.drawer-nav)・検索オーバーレイ・
     カート・アカウントが fixed で入っていて、実際にサイドメニューの
     高さが 812px → 60px（ヘッダーの高さ）に潰れて開かなくなった。 */
#global_header { background: transparent !important; }
#global_header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                             /* ヘッダーの中身より後ろに敷く */
  background: var(--lp-header-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ヘッダー分の押し下げ。#page_wrap はもともと padding-top:50px を持っている
   (cosplay2024.css)。LP画像をヘッダーの下に潜り込ませて最上部から見せたい
   ページは、そのページの <style> で 0 に戻す */
#page_wrap { padding-top: var(--lp-headerH) !important; }

/* パンくず。固定ヘッダー分の押し下げ(padding-top:11.5%／PC幅は4%)を持っているので、
   消さないとヘッダー分の空きが二重になる。
   ※テーマ側の div.fs-c-breadcrumb{display:none} は実体が <nav> のため効いていない */
.fs-c-breadcrumb { display: none !important; }

/* 商品グループページの「おすすめ」枠。LPと内容がぶつかるので既定で消す。
   出したいページは、そのページの <style> で display:block に戻す */
#top_recommend01 section { display: none !important; }

html { scroll-behavior: smooth; }          /* 一瞬で飛ばしたいならページ側で auto */

/* ───────── LP本体 ───────── */

.vmlp {
  max-width: var(--lp-max);
  margin: 0 auto;
  line-height: 0;                          /* 画像を縦に並べたときの隙間を殺す */
}

/* スマホは画面いっぱいに。親の div.container が左右5pxのpaddingを持っていて、
   そのままだとLP画像の左右に隙間ができる（実測 375pxの画面でLPが365px）。
   .container の padding を0にすると同じ親にいる商品一覧まで詰まるので、
   LPだけ負のマージンで打ち消す。
   max-width も外す。残すと760px前後の画面で中央寄せが崩れる */
@media (max-width: 767px) {
  .vmlp {
    max-width: none;
    margin-left: calc(-1 * var(--lp-gutter));
    margin-right: calc(-1 * var(--lp-gutter));
  }
}

.vmlp img {
  display: block;
  width: 100%;
  height: auto;
}

/* 画像全体をリンクにするとき */
.vmlp a.full {
  display: block;
  font-size: 0;
  transition: opacity .15s ease;
}
.vmlp a.full:hover { opacity: .94; }

/* 画像の中に部分リンク（イメージマップ相当）を置くとき。
   .ys で包み、中の <a> を % 指定で置く。%なので拡大縮小に追従する */
.vmlp .ys {
  position: relative;
  display: block;
  font-size: 0;
}
.vmlp .ys a {
  position: absolute;
  display: block;
  z-index: 2;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
.vmlp .ys a:hover { background: rgba(255, 255, 255, .14); }
.vmlp .ys a:focus-visible {
  outline: 2px solid rgba(90, 60, 110, .7);
  outline-offset: 2px;
}
/* 座標合わせ用。<div class="vmlp debug"> にすると当たり判定が見える */
.vmlp.debug .ys a {
  background: rgba(255, 0, 80, .28);
  outline: 1px solid #f04;
}

/* ページ内ジャンプ用の見えないアンカー。
   固定ヘッダーの下に潜らないよう、その分だけ上に退避させる。
   ★着地位置がずれるときは --lp-anchor-gap（ヘッダー下端からの余白）で調整する。
     ヘッダー自体の高さが違うページは --lp-headerH を直す */
.vmlp .anc {
  display: block;
  position: relative;
  top: calc(-1 * (var(--lp-headerH) + var(--lp-anchor-gap)));
  height: 0;
  visibility: hidden;
}