@charset "UTF-8";
/* ==========================================================================
   LeSportsac × PEANUTS（2026/10/28）ページ個別CSS
   ※ 共通テンプレCSS（css/style.css）は無改変。依頼票指定分のみ。
   - 背景カラー（リード文）：#fdd100
   - ボタン：丸形 / #e70012
   ========================================================================== */
#LpContainer {
  --pn-bg: #fdd100;
  --pn-button: #e70012;
  --pn-button-hover: #de5990;
  background-color: var(--pn-bg);
}
#LpContainer .p-scrollcontainer {
  background-color: var(--pn-bg);
}

/* --- 画像1カラム（ロゴ・コピーライト：透過PNG） --- */
#LpContainer .p-lp-logo {
  width: calc(260*var(--variable)*var(--ratio));
  margin: calc(40*var(--variable)*var(--ratio)) auto 0;
}
#LpContainer .p-lp-copyright {
  width: calc(130*var(--variable)*var(--ratio));
  margin: calc(80*var(--variable)*var(--ratio)) auto 0;
  padding-bottom: calc(100*var(--variable)*var(--ratio));
}

/* --- リード文（背景あり） --- */
#LpContainer .c-summary[data-bg="on"] {
  padding: calc(30*var(--variable)*var(--ratio)) calc(20*var(--variable)*var(--ratio));
  background-color: #fff;
  color: #000;
  border-radius: calc(16*var(--variable)*var(--ratio));
}

/* --- ボタン：丸形 --- */
#LpContainer a.c-button[data-shape="round"],
#LpContainer a.c-button[data-shape="round"]:link,
#LpContainer a.c-button[data-shape="round"]:visited {
  border: none;
  border-radius: calc(100*var(--variable)*var(--ratio));
  background-color: var(--pn-button);
  color: #fff;
  transition: background-color 0.3s ease;
}
#LpContainer .c-button[data-shape="round"]::after {
  filter: invert(1);
}
#LpContainer a.c-button[data-shape="round"]:hover {
  background-color: var(--pn-button-hover);
}

/* --- 商品1カラム：画像＋複数クレジット --- */
#LpContainer .p-lp-credits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(30*var(--variable)*var(--ratio)) calc(10*var(--variable)*var(--ratio));
  width: calc(355*var(--variable)*var(--ratio));
  margin: 0 auto;
}
#LpContainer .p-lp-credits[data-count="1"] {
  grid-template-columns: 1fr;
}
#LpContainer .c-item-name,
#LpContainer .c-item-credit,
#LpContainer .c-item-price {
  text-decoration: underline;
}
#LpContainer .c-item-price {
  font-size: calc(15*var(--variable)*var(--ratio));
  line-height: 1.8;
}

/* --- 未支給画像のプレースホルダー（差し替え前提） --- */
#LpContainer .p-lp-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background-color: #f2f2f2;
  color: #8a8a8a;
  font-size: calc(11*var(--variable)*var(--ratio));
  line-height: 1.6;
  text-align: center;
}

/* --- 画像スライダー（商品1カラム・複数枚） ---
   本番は slick（slidesToShow:1 / arrows:true）。プレビューはスクロール＋＜＞で再現。 */
#LpContainer .p-lp-sliderbox {
  position: relative;
}
#LpContainer .p-lp-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
#LpContainer .p-lp-track::-webkit-scrollbar {
  display: none;
}
#LpContainer .p-lp-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
#LpContainer .p-lp-sliderbox .slick-arrow {
  top: 50%;
  transform: translateY(-50%);
}
#LpContainer .p-lp-sliderbox .slick-next {
  transform: translateY(-50%) rotate(180deg);
}

/* --- 商品2カラム（横スライド式／2点のため＜＞非表示＝静止2列） --- */
#LpContainer .p-product__container[data-pattern="pattern-b"][data-static="true"] {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}