/* ==========================================================================
   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. デコ文字画像などの「配置(位置・幅)」は商品・画像ごとに異なって当然なので、
      品番classのスコープで指定する。例:
        .lp-16847130 .plp-main__deco--01{ top:4%; right:0; width:36%; }
   4. コンテンツのパターンは2種類（現時点）:
        パターンA … カラー/バリエーションのブロック型 (.plp-color〜)
        パターンB … フリーレイアウト型 (.plp-free〜 / 未使用のため骨組みのみ用意、必要になったら拡張)
      1商品の中でA/Bを組み合わせて使ってOK。
   5. HTMLを書く場所はFutureshopの「独自コメント(10)」。
   6. 画像のディレクトリは https://heilis.itembox.cloud/item/img/products/lp/【品番】/
   7. このCSS(共通部分)は最初の型として作ったもので、絶対に変えてはいけないものではない。
      使いながら共通部分を編集した方が使いやすくなる場合は
      編集してOK(デザインが多少変わってしまっても問題ない)。
      その代わり、商品ごとのHTML側に個別の上書き記述をどんどん増やすのは避け、
      共通の仕組み側で吸収する方針にしたい。
      共通の変数も追記OK。
   ========================================================================== */

:root{
  /* デフォルト値。商品ごとに変えたい値は各商品の品番class側で上書きする */
  --plp-content-w: 700px;      /* LPコンテンツの最大幅(PC/SP共通) */
  --plp-ink: #92a7a8;          /* テキスト・ライン等の基本色 */
  --plp-bg: transparent;       /* LP全体(外枠)の背景色 */
  --plp-ease: cubic-bezier(.22,.61,.36,1);
  --plp-fade-duration: 1.1s;
  --plp-fade-y: 24px;
}

/* ---- ラッパー ---- */
.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);
}

/* ---- 共通:スクロールでふわっと表示 ---- */
[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);
}

/* ============================================================
   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側で指定 */

/* ============================================================
   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ボタン(インライン)
   ============================================================ */
.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; }

.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-free{ position: relative; margin: 0 0 70px; }
.plp-free__item{ position: absolute; } /* 個別の配置は品番class側で指定 */

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

/* ============================================================
   フロートBUYボタン
   ============================================================ */
.plp-float-buy{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 20;
  background: var(--plp-ink);
  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%; }