/* ==========================================================================
   Product Long LP - Common Styles
   商品ページ内 縦長LP 共通CSS
   ==========================================================================

   【使い方】
   1. 商品ごとのHTML側で
        <div class="product-long-lp lp-【品番】">
      のように「product-long-lp」+「品番class」をセットで付与する。
   2. 商品ごとに変えたい「値」(色・背景色・角丸など)は、品番classのスコープで
      CSS変数を上書きする。例:
        .lp-16847130{ --plp-ink:#7a6a5c; }
   3. 写真に重ねる文字画像(デコ文字)の「配置」は、HTML側の画像に直接
      --x(左位置) --y(上位置) --w(幅) を書いて指定する。数値は写真の枠に対する%。例:
        <img class="plp-deco" style="--x:-18%; --y:41%; --w:77%;" src="...">
      (品番class側に配置用のCSSを書き足さない)
      ※ 旧方式(.plp-main__deco--01 など、品番classで位置指定)も残してあるが、新規LPでは使わない。
   4. コンテンツのパターンは2種類:
        パターンA … カラー/バリエーションのブロック型 (.plp-color〜)
        パターンB … フリーレイアウト型 (.plp-free〜)
                    写真(.plp-frame)の下に、画像を1枚ずつ --x(左位置) --w(幅) を指定して縦に並べる
                    (端寄せ・片側だけの角丸はモディファイアclassで指定。詳細はパターンBの説明参照)
      1商品の中でA/Bを組み合わせて使ってOK。
   5. HTMLを書く場所はFutureshopの「独自コメント(10)」。
   6. 画像のディレクトリは https://heilis.itembox.cloud/item/img/products/lp/【品番】/
   7. このCSS(共通部分)は最初の型として作ったもので、絶対に変えてはいけないものではない。
      使いながら共通部分を編集した方が使いやすくなる場合は
      編集してOK(デザインが多少変わってしまっても問題ない)。
      その代わり、商品ごとのHTML側に個別の上書き記述をどんどん増やすのは避け、
      共通の仕組み側で吸収する方針にしたい。
      共通の変数も追記OK。
   8. 期間限定の施策表示(OFFなど)は .plp-campaign に data-plp-start / data-plp-end を付ける。
      期間内だけ表示される(切り替えは product.js「縦長LP用」の「4. 期間限定の表示」)。
   ========================================================================== */

:root{
  /* デフォルト値。商品ごとに変えたい値は各商品の品番class側で上書きする */
  --plp-content-w: 700px;      /* LPコンテンツの最大幅(PC/SP共通) */
  --plp-ink: #92a7a8;          /* テキスト・ライン等の基本色 */
  --plp-accent: #92a7a8;       /* 施策表示などの強調色 */
  --plp-bg: transparent;       /* LP全体(外枠)の背景色 */
  --plp-radius: 0;             /* 写真の角丸(例: min(7vw, 49px) → スマホでは画面幅に合わせて小さくなる) */
  --plp-free-gap: 12%;         /* パターンBの画像どうしの縦の間隔(LP幅に対する%) */
  --plp-ease: cubic-bezier(.22,.61,.36,1);
  --plp-fade-duration: 1.1s;
  --plp-fade-y: 24px;
  /* フォントは必要な商品だけ品番classで指定する(未指定ならサイトのフォントのまま)
     --plp-font         … LP内の基本フォント
     --plp-font-display … 数字・見出し用のフォント(未指定なら --plp-font) */
}

/* ---- ラッパー ---- */
.product-long-lp{
  position: relative;
  background-color: var(--plp-bg);
  margin-bottom: 50px;
}
.product-long-lp .plp-inner{
  position: relative;
  max-width: var(--plp-content-w);
  margin: 0 auto;
  overflow-x: hidden; /* 動きが横に飛び出すためのガード */
  color: var(--plp-ink);
  font-family: var(--plp-font, inherit);
}

/* ---- 共通:スクロールでふわっと表示 ---- */
[data-plp-observe]{
  opacity: 0;
  transform: translateY(var(--plp-fade-y));
  transition: opacity var(--plp-fade-duration) var(--plp-ease),
              transform var(--plp-fade-duration) var(--plp-ease);
}
[data-plp-observe].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   写真+文字の重ね(共通部品)
   <div class="plp-frame" style="--plp-frame-w:77%; --plp-frame-x:19%;">
     <img class="plp-frame__photo" src="写真">
     <img class="plp-deco" style="--x:..; --y:..; --w:.." src="文字画像">
   </div>
   ・--plp-frame-w … 写真の幅(LP幅に対する%)。未指定は80%
   ・--plp-frame-x … 写真の左位置(LP幅に対する%)。未指定は中央寄せ
   ・.plp-deco の --x / --y / --w … 写真の枠に対する 左位置 / 上位置 / 幅(%)
     (文字を写真の外にはみ出させたいときは --x にマイナスの値)
   ============================================================ */
.plp-frame{
  position: relative;
  width: var(--plp-frame-w, 80%);
  margin-left: var(--plp-frame-x, auto);
  margin-right: auto;
}
.plp-frame__photo{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--plp-radius, 0);
}
.plp-deco{
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, auto);
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* ============================================================
   1. メインビジュアル
   ============================================================ */
.plp-main{ position: relative; padding-top: 80px; }
.plp-main > img{ width: 80%; display: block; margin: 0 auto; }
.plp-main__deco{ position: absolute; pointer-events: none; } /* 旧方式: 位置は品番class側で指定 */

/* ============================================================
   施策表示(OFFなど)
   ============================================================ */
.plp-campaign{
  display: none;                /* 期間内のときだけJSが .is-active を付けて表示 */
  width: 77%;
  margin: 40px auto 0;
  padding: 6px 0;
  border-top: 1px solid var(--plp-accent);
  border-bottom: 1px solid var(--plp-accent);
  text-align: center;
  color: var(--plp-accent);
}
.plp-campaign.is-active{ display: block; }
.plp-campaign__main{
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.plp-campaign__unit{            /* 「¥」「OFF」など小さくしたい部分 */
  font-size: 0.55em;
  margin: 0 0.08em;
}
.plp-campaign__period{
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   2. 冒頭説明文
   ============================================================ */
.plp-intro{
  padding: 40px 30px 0;
  text-align: center;
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: 0.04em;
}
.plp-intro p{ margin: 0 0 1.6em; }
.plp-intro p:last-child{ margin-bottom: 0; }

/* ============================================================
   3. BUYボタン(インライン)
   ============================================================ */
a.plp-buy-inline{
  display: block;
  width: fit-content;
  margin: 30px auto 60px;
  font-size: 17px;
  font-weight: 600;
  color: var(--plp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--plp-ink);
  padding-bottom: 4px;
}

/* ============================================================
   パターンA: カラー/バリエーションブロック型
   (タイトル画像+ラベル+サブ画像グリッド、を繰り返す)
   ============================================================ */
.plp-color{ margin: 0 0 70px; }
.plp-color__title{
  position: relative; /* 装飾文字を重ねるための基準 */
  width: fit-content;
  margin: 0 auto 8px;
}
.plp-color__title img{ display: block; }
.plp-color__title--landscape img{ width: 100%; }
.plp-color__title--portrait img{ width: 80%; margin: 0 auto; }
.plp-color__title-deco{ position: absolute; pointer-events: none; } /* 旧方式: 位置は品番class側で指定 */

.plp-color__label{
  margin: 25px 0;
  text-align: center;
  font-size: 17px;
  color: var(--plp-ink);
}

.plp-color__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 16px;
}
.plp-color__grid img{ width: 100%; display: block; }
/* サブ画像を1→2→3…の順に少しずつずらして表示 */
.plp-color__grid > [data-plp-observe]:nth-child(1){ transition-delay: 0s; }
.plp-color__grid > [data-plp-observe]:nth-child(2){ transition-delay: .12s; }
.plp-color__grid > [data-plp-observe]:nth-child(3){ transition-delay: .24s; }
.plp-color__grid > [data-plp-observe]:nth-child(4){ transition-delay: .36s; }
.plp-color__grid > [data-plp-observe]:nth-child(5){ transition-delay: .48s; }
.plp-color__grid > [data-plp-observe]:nth-child(6){ transition-delay: .6s; }

/* ============================================================
   パターンB: フリーレイアウト型
   タイトル写真(.plp-frame)の下に、画像(.plp-free__item)を縦に並べる。
   画像ごとに --x(左位置) と --w(幅) をHTMLに書いて、ずらして配置する。
   <img class="plp-free__item" style="--x:15%; --w:72%;" src="...">
   ・数値はLP幅に対する% / 画像どうしの間隔は --plp-free-gap(共通)
   ・LPの端にくっつけたいときは --x の代わりに plp-free__item--left / --right を付ける
   ・角丸は plp-free__item--round-left(左側だけ) / --round-right(右側だけ) / --square(なし)
     例) <img class="plp-free__item plp-free__item--right plp-free__item--round-left" style="--w:72%;" src="...">
   ============================================================ */
.plp-free{ position: relative; margin: 0 0 70px; }
.plp-free__item{
  display: block;
  width: var(--w, 80%);
  height: auto;
  margin: 0 0 var(--plp-free-gap, 12%) var(--x, 10%);
  border-radius: var(--plp-radius, 0);
}
/* 位置: 左位置 --x の代わりに、LPの左右の端にくっつけたいときに付ける(--x は不要) */
.plp-free__item--left{ margin-left: 0; }
.plp-free__item--right{ margin-left: auto; }
/* 角丸: 何も付けなければ四隅とも --plp-radius。
   端にくっつけた画像は、端と反対側(内側)だけ丸くするとなじむ。角丸なしは --square */
.plp-free__item--round-left{ border-radius: var(--plp-radius, 0) 0 0 var(--plp-radius, 0); }
.plp-free__item--round-right{ border-radius: 0 var(--plp-radius, 0) var(--plp-radius, 0) 0; }
.plp-free__item--square{ border-radius: 0; }
.plp-free > .plp-frame{ margin-bottom: var(--plp-free-gap, 12%); }
.plp-free > :last-child{ margin-bottom: 0; }

/* ---- LP締めの1枚画像(左右中央・幅80%) ---- */
.plp-closing{
  width: 80%;
  margin: 0 auto 70px;
}
.plp-closing img{ width: 100%; display: block; }

/* ============================================================
   フロートBUYボタン
   ============================================================ */
a.plp-float-buy{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 20;
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 13px 36px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 1;
  transition: opacity .3s ease, visibility .3s ease;
}
.plp-float-buy.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================
   商品ごとのスタイルはここから
   ============================================================ */

/* ---- 16847130 肩リボンワンピ ---- */
.lp-16847130{
  --plp-ink: #92a7a8;
  --plp-bg: #ede4d0;
}
.lp-16847130 .plp-main__deco--01{ top: 4%; right: 0; width: 36%; }
.lp-16847130 .plp-main__deco--02{ bottom: -5%; left: 4%; width: 35%; }
.lp-16847130 .plp-color__title-deco--gray{ top: -8%; left: 0; width: 42%; }

/* ---- 15727664 チェックブルゾン ---- */
.lp-15727664{
  --plp-ink: #4269aa;
}
.lp-15727664 .plp-main__deco--01{ top: 4%; right: 0; width: 40%; }
.lp-15727664 .plp-main__deco--02{ bottom: -5%; left: 4%; width: 35%; }
.lp-15727664 .plp-color__title-deco--gray{ top: -8%; left: 0; width: 46%; }

/* ---- 16827165 HIDEKA ORIGINAL スエードブルゾン ---- */
.lp-16827165{
  --plp-ink: #000;
  --plp-accent: #ba070b;           /* 赤(デザインから取得) */
  --plp-radius: min(7vw, 49px);    /* 写真の角丸(目安)。角丸を画像側に含めて書き出す場合はこの行を削除 */
  /* --plp-font: "Adobe Fontsのfont-family名", serif;          ← 本文フォント(Adobe Fontsのキットに追加が必要) */
  /* --plp-font-display: "Adobe Fontsのfont-family名", serif;  ← OFFの数字などのフォント */
}