/* =============================================================
   Split product background (6 stacked WebP tiles) rendered as ONE
   continuous image that COVERs the (very tall) .c-description section.

   Root cause of the previous bug: the old rules put object-fit:cover on
   EACH tile's flex box independently, so continuity depended on every tile
   box being taller than its native aspect. That only held because the
   section height coincidentally tracked 5.3333*width to <1%. Any
   non-proportional reflow flipped tiles to width-scaling and cropped a
   strip off each tile's top+bottom -> visible horizontal seams.

   Fix: each <img> renders at its NATURAL aspect (width:100%; height:auto),
   so NO individual tile can ever be cropped, at ANY width or section height
   (no object-fit touches any tile). The tiles' own stacked height is exactly
   containerWidth * 12800/2400, i.e. it already equals the full-image aspect by
   construction, reproducing the original single-image scale. The column is
   top-anchored and horizontally centred (== object-position:top); the single,
   uniform crop happens at the overflow:hidden frame on .c-description-image.
   The <=~1% bottom remainder that appears only when the section is fractionally
   taller than containerWidth*5.3333 is filled with #000032 == the image's
   near-black bottom row, so it is seamless, never a visible line.
   ============================================================= */

/* The crop box = exact size of the section (parent .c-description is
   position:relative, so 100%/100% == full section width & height). */
.c-description-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden; /* the single, uniform crop happens here */
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  /* hard-override add_2026.css .c-description-image (sticky / 100svh / margin
     -100svh / z-index:0): force the absolute, section-sized box. */
  inset: auto;
  bottom: auto;
  right: auto;
  margin-top: 0;
  /* Safety fill: the section is taller than the image whenever the bg column
     doesn't reach the bottom (e.g. the 200vw mobile zoom only covers ~47% of
     the section). This element is the full-section (height:100%) z-index:-1 box
     BEHIND the content, so an opaque colour here guarantees that nothing behind
     ever shows through below/around the image. */
  background: #010335;
}

/* =============================================================
   背景画像 = 縦4分割タイルを縦スタックして元画像を再構成する。
   クロップ枠は上の .c-description-image (position:absolute / overflow:hidden /
   セクション全面) が担い、.l-bg は枠の上端から幅100%で積んだタイル列。各タイルは
   width:100%/height:auto で同一倍率になり継ぎ目が一致、列はセクション上端基準
   （下のはみ出しは overflow:hidden でクロップ、不足分は下の背景色で継ぐ）。
   PC/SP の出し分けは HTML 側 各 <picture> 行の <source media> で行い、
   マッチした 1 セットのみ取得する。
   旧6枚タイル仕様は下の `@media not all { ... }` 内に全文保持（無効化）。
   ============================================================= */
.c-description-image .l-bg {
  position: absolute;
  inset: 0 0 auto 0; /* top/left/right:0、高さは積んだタイル分(auto)。上端基準 */
  width: 100%;
  display: block;
  margin: 0;
  transform: none; /* 旧 translateX(-50%) を明示的に打ち消す */
  /* インライン要素間の余白でタイル間に 1px 隙間が出るのを防止 */
  font-size: 0;
  line-height: 0;
  /* 端数フォールバック。画像最下行(≒rgb 0,0,51)と同等色で、列がセクションより
     僅かに短い場合の下端を継ぎ目なく埋める */
  background: #010335;
}
/* add_2026.css:98 の dim オーバーレイ(::after rgba(11,40,67,.3)) 無効化を維持 */
.c-description-image .l-bg::after {
  content: none;
  display: none;
}
.c-description-image .l-bg picture {
  display: block;
  width: 100%;
}
.c-description-image .l-bg img {
  /* 通常フローで縦スタック。add_2026.css:107 の `.l-bg img{position:absolute;
     top:0;left:0}` / style.css の generic 指定を打ち消す（これが無いと全タイルが
     top:0 に重なる）。 */
  position: relative;
  top: 0;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  width: 100%; /* フレーム幅いっぱい → 全タイル同一倍率で継ぎ目が一致 */
  height: auto; /* 各タイルは自然アスペクト → 個別クロップなし */
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: fill; /* box==自然アスペクトなので無効果だが generic の cover 漏れを封じる */
  vertical-align: top; /* インライン残りに対する保険 */
}

/* =============================================================
   ▼▼▼ 旧仕様（保持・無効化）: 6枚タイルを縦に積んで連続1枚に見せる構成。
   `@media not all` は決して真にならないため、内側のルールは一切適用されない
   （＝コメントアウト相当）。仕様ドキュメントとして全文そのまま温存する。
   ============================================================= */
@media not all {

/* .l-bg = the 6 tiles as ONE continuous column.
   width:100% (NOT auto) + height:auto: the column spans the section width and
   takes its height purely from the stacked tiles == containerWidth*12800/2400.
   That is exactly the image's own aspect, so the column reproduces the original
   single-image scale, top-anchored and horizontally centred (== object-position:top).

   We deliberately DO NOT use aspect-ratio + min-width/min-height:100% here.
   The tiles have no object-fit, so they never grow to fill a box that is taller
   than their natural stack; an aspect-ratio box would only inflate the EMPTY .l-bg,
   producing the identical rendered pixels while relying on the contested
   min-vs-aspect-ratio interaction (some engines keep the ratio, some break it ->
   a width shift). Pure width:100%/height:auto removes that ambiguity entirely:
   continuity and the section width-fit are guaranteed by construction.

   Coverage: the section height tracks containerWidth*5.3333 to <1% at every width.
   - When the section is (fractionally) SHORTER, the column overflows and the
     overflow:hidden frame on .c-description-image crops the bottom uniformly.
   - When the section is (fractionally) TALLER, a <=~1% remainder at the very foot
     shows .l-bg's #000032 background, which is the EXACT bottom-row colour of the
     image (rgb 0,0,50) -> a seamless continuation of the near-black sea floor,
     never a visible line. (Requirement #2 sanctions this seamless remainder.) */
.c-description-image .l-bg {
  position: absolute;
  inset: auto; /* override add_2026.css `.l-bg{inset:0}` and style.css `.l-bg{top/left/height}` */
  /* COVER, top-anchored, horizontally centred (== object-fit:cover; object-position:top center).
     The column keeps the full image's intrinsic aspect (2400x12800) and grows to
     the LARGER of (fill the section width) / (fill the section height), so it
     ALWAYS covers the section in BOTH axes -- the <=1% bottom gap of the old
     width-fit is gone. The overflow is cropped by .c-description-image's
     overflow:hidden. min-width/min-height:100% + aspect-ratio is the object-fit:cover
     formula for this stacked-tile column; the tiles stay width:100%/height:auto inside
     it, so they still scale by one factor and the seams stay pixel-aligned. */
  top: 0;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%); /* horizontal-center the (cropped) column */
  z-index: -1;
  display: block; /* not flex anymore */
  flex-direction: row; /* harmless reset of the old column direction */
  aspect-ratio: 2400 / 12800; /* exact summed-tile aspect: 5*2400 + 800 = 12800 tall (pro_bg_06 cropped to top half) */
  width: auto;
  height: auto;
  min-width: 100%; /* >= section width  */
  min-height: 100%; /* >= section height -> guarantees full vertical cover */
  max-width: none;
  max-height: none;
  /* Belt-and-suspenders against inline-image whitespace between the stacked
     tiles: zero font/line box so no baseline gap can ever open a seam, even
     if `display:block` on the imgs were somehow defeated. */
  font-size: 0;
  line-height: 0;
  /* Seamless fallback: EXACT bottom-row colour of the image (verified rgb 0,0,50),
     so any sub-pixel remainder at the very bottom (only when the section is
     fractionally TALLER than width*5.3333) is an invisible continuation of the
     near-black sea floor, never a visible line. Colour matches the section
     safety-fill (#010335) and is visually identical to the image's #000032
     bottom row, so the image -> fill transition stays seamless. */
  background: #010335;
}

/* kill the dim rgba(11,40,67,.3) overlay pseudo-element from add_2026.css:98 */
.c-description-image .l-bg::after {
  content: none;
  display: none;
}

/* THE CRUX: every tile renders at its TRUE aspect (width:100%; height:auto),
   with NO object-fit -> a tile can NEVER be cropped individually, at ANY width
   (320..2560+) or section height. All six are 2400px wide natively and share
   one rendered width (100% of .l-bg), so they scale by the identical factor
   (renderedWidth/2400): the 5 seams stay pixel-aligned and the verified-continuous
   slices reassemble into the original 2400x12800 image. Section height never
   enters tile sizing, so the old cliff (sectionHeight >= 5.3333*width forcing
   per-tile cover-by-height) is gone by construction.

   Explicit overrides (no reliance on initial values):
   - add_2026.css:107-115  position:absolute; top/left:0; width/height:100%; object-fit:cover; object-position:center
   - add_2026.css:63-68    height:100%; top:0; object-fit:cover; object-position:bottom
   - style.css:262-267     z-index:-1; width:100%; height:inherit; object-fit:cover
   - style.css:891-899     object-position:top; position:relative; @media>=1200px { height:auto; top:-36vw }
   - previous add_2026_07.css flex weighting (flex:2400 1 0; img:last-child flex-grow:1600) */
.c-description-image .l-bg img {
  position: relative; /* normal flow, stacked top-to-bottom */
  top: 0; /* cancel style.css @media(min-width:1200px) top:-36vw */
  left: auto;
  right: auto;
  bottom: auto;
  display: block; /* primary inline-gap kill + no float */
  float: none;
  width: 100%; /* full column width -> all six share one scale, seams align */
  height: auto; /* <- the crux: natural per-tile aspect, cannot crop a tile */
  min-height: 0;
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  vertical-align: top; /* belt-and-suspenders vs inline-gap if display ever reverts */
  /* object-fit/flex no longer used; object-fit:fill is a NO-OP here (box already
     equals each tile's intrinsic aspect, so it never distorts) but it positively
     forbids any inherited cover-crop from leaking in. */
  object-fit: fill;
  object-position: 0 0;
  flex: 0 0 auto; /* neutralise the previous flex:2400 1 0 weighting */
}

/* pro_bg_06 (2400x800, cropped to top half) follows the SAME width:100%/height:auto rule;
   explicitly cancel the old flex-grow:1600 weighting. */
.c-description-image .l-bg img:last-child {
  flex: 0 0 auto;
  height: auto;
}

/* --- Smartphone (<=780px): cover is now UNIVERSAL, handled by the base rule
   (min-width/min-height:100% + aspect-ratio == object-fit:cover). The column
   covers the phone section the same way as desktop -- centred horizontally,
   top-anchored, overflow clipped by overflow:hidden (no h-scroll), no #010335
   gap. No width override is needed anymore. To deliberately zoom in on phones
   again, set an explicit width here (e.g. `width: 280vw;`) which overrides the
   cover sizing. --- */

}
/* ▲▲▲ 旧仕様（保持・無効化）ここまで =============================
   新仕様(単一画像 COVER)は object-fit:cover が SP/PC 共通で機能するため、
   SP 専用の上書きは不要。ズームを変えたい場合は新ブロックの
   .c-description-image .l-bg img の object-position / 別途 scale で調整する。 */

.c-bg {
  width: 100%;
  height: 100svh;
  left: 50%;
  object-fit: cover;
  object-position: center;
  transform: translateX(-50%);
  background: #01081a;
}
@media (min-width: 781px) {
  .c-bg {
    width: 100%;
    height: 100svh;
    object-fit: cover;
  }
}

.c-kv__product-wrap {
  display: none !important;
}

/* 202607 add */
.promaster-fair {
  padding-top: clamp(88px, 8.3333333333vw, 160px);
}
.promaster-fair__inner {
  color: #000;
  margin: 0 auto;
  padding: clamp(55px, 5.2083333333vw, 100px);
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(33px, 3.125vw, 60px) clamp(44px, 4.1666666667vw, 80px);
}
.promaster-fair__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.promaster-fair__head {
  padding-bottom: clamp(8.8px, 0.8333333333vw, 16px);
  border-bottom: 2px solid #000;
  margin-bottom: clamp(17.6px, 1.6666666667vw, 32px);
}
.promaster-fair__logo {
  width: 100%;
}
.promaster-fair__logo-text {
  color: #000;
  font-size: clamp(53.35px, 5.0520833333vw, 97px);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.promaster-fair__date {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(26.95px, 2.5520833333vw, 49px);
  letter-spacing: 0.05em;
  margin-right: -0.4em;
}
.promaster-fair__date-line {
  width: 3em;
  position: relative;
  left: -0.1em;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
  margin-right: clamp(7.7px, 0.7291666667vw, 14px);
}
.promaster-fair__date-weekday {
  font-size: 0.8em;
  margin-left: -0.4em;
  /* 曜日（）込みは Noto Sans JP Regular（クライアント指定） */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
/* （）はRegular、中の漢字（木/水）だけ Bold（クライアント指定） */
.promaster-fair__date-weekday-kanji {
  font-weight: 700;
}
.promaster-fair__date-text {
  display: flex;
  align-items: center;
}
.promaster-fair__date-text:last-child .promaster-fair__date-weekday {
  margin-right: -0.25em;
}
.promaster-fair__text {
  margin-top: clamp(22px, 2.0833333333vw, 40px);
  font-weight: 700;
  font-size: clamp(19.25px, 1.8229166667vw, 35px);
  line-height: 1.4;
}
.promaster-fair__brand {
  font-size: 1.12em;
}
.promaster-fair__note {
  margin-top: clamp(7.7px, 0.7291666667vw, 14px);
  font-size: clamp(13.75px, 1.3020833333vw, 25px);
  line-height: 1.4;
}
.promaster-fair__image {
  flex: 0 0 clamp(225.5px, 21.3541666667vw, 410px);
}
.promaster-fair__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.promaster-fair__image--sp {
  display: none;
  aspect-ratio: 275/195;
}
.promaster-fair__button-wrap {
  flex-basis: 100%;
  margin-top: clamp(15.4px, 1.4583333333vw, 28px);
  text-align: center;
}
.promaster-fair__button {
  display: inline-block;
  padding: clamp(7.7px, 0.7291666667vw, 14px) clamp(13.2px, 1.25vw, 24px);
  background: #d71920;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: clamp(23.65px, 2.2395833333vw, 43px);
  transition: 0.3s;
}
.promaster-fair__button:hover {
  background: #fff;
  color: #000;
}
@media (max-width: 780px) {
  .promaster-fair {
    padding: min(12vw, 80px) 0 0;
  }
  .promaster-fair__inner {
    display: block;
    max-width: min(85.8974358974vw, 670px);
    padding: min(6.1538461538vw, 48px) min(6.1538461538vw, 48px)
      min(7.1794871795vw, 56px);
  }
  .promaster-fair__head {
    border-bottom: 1px solid #000;
  }
  .promaster-fair__logo {
    padding: 0;
    max-width: none;
    width: 100%;
  }
  .promaster-fair__logo-text {
    font-size: min(8.5897435897vw, 67px);
  }
  .promaster-fair__date {
    gap: min(0.2564102564vw, 2px);
    font-size: min(4.7435897436vw, 37px);
    padding: 0;
  }
  .promaster-fair__date-line {
    width: min(7.1794871795vw, 56px);
    height: 1px;
  }
  .promaster-fair__image--pc {
    display: none;
  }
  .promaster-fair__image--sp {
    display: block;
    flex: none;
    margin-top: min(3.5897435897vw, 28px);
    box-sizing: border-box;
    overflow: hidden;
    margin-inline: auto;
  }
  .promaster-fair__image--sp img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .promaster-fair__text {
    padding: 0;
    margin-top: min(4.6153846154vw, 36px);
    font-size: min(4.1025641026vw, 32px);
  }
  .promaster-fair__note {
    font-size: min(2.8205128205vw, 22px);
  }
  .promaster-fair__button-wrap {
    margin-top: min(5.641025641vw, 44px);
  }
  .promaster-fair__button {
    padding: min(2.0512820513vw, 16px) min(3.5897435897vw, 28px);
    font-size: min(4.6153846154vw, 36px);
  }
}

@media screen and (min-width: 781px) and (max-width: 1199px) {
  .l-container--fair {
    margin: 0 auto;
    max-width: clamp(660px, 62.5vw, 1200px);
  }
  .promaster-fair__inner {
    padding: clamp(38.5px, 3.6458333333vw, 70px);
    gap: clamp(27.5px, 2.6041666667vw, 50px);
  }
  .promaster-fair__logo-text {
    font-size: clamp(42.35px, 4.0104166667vw, 77px);
  }
  .promaster-fair__date {
    font-size: clamp(21.45px, 2.03125vw, 39px);
  }
  .promaster-fair__text {
    font-size: clamp(15.51px, 1.46875vw, 28.2px);
  }
  .promaster-fair__image {
    flex-basis: clamp(187px, 17.7083333333vw, 340px);
  }
}

/* === PROMASTER FAIR : 参考画像をピクセル等価で再現 (PC >=781px) ===
   参考画像(4908x2622, 比率 1.872:1)の「全面」がカード=.promaster-fair__inner。
   inner を query container(inline-size) + position:relative + aspect-ratio にし、
   可視要素すべてを参考画像の実測タイト座標へ position:absolute で配置する。
   座標系(すべて実測 px から算出, 2-3桁精度):
     left%  = x / 4908 * 100        (カード幅基準)
     top%   = y / 2622 * 100        (カード高基準)
     width% = w / 4908 * 100        (カード幅基準)
     font-size は cqw(=カード幅の1%) 指定 -> どの PC 幅でも比率を保持。
   中間ラッパ(.promaster-fair__content / __text / __button-wrap)は display:contents で
   ボックスを消し、子の絶対配置の包含ブロックを inner(position:relative) に固定する。
   SP(<=780px) は別ブロックのまま完全に不変。 */
@media (min-width: 781px) {
  /* cqw をカード幅基準にするため query container は inner のみ。外側の旧 container を解除 */
  .promaster-fair {
    container-type: normal;
  }
  /* カード本体: 参考画像の比率(4908:2622)を保持する絶対配置の土台 */
  .promaster-fair__inner {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 4908 / 2622;
    width: 100%;
    max-width: none;
    display: block;
    padding: 0;
    margin: 0 auto;
    gap: 0;
    /* 背景は現状維持(範囲外) */
    background: rgba(255, 255, 255, 0.7);
  }
  /* 中間ラッパ達はボックスを作らせず(display:contents)、子を inner 基準で絶対配置 */
  .promaster-fair__content,
  .promaster-fair__text,
  .promaster-fair__button-wrap {
    display: contents;
  }
  /* SP 用画像は PC では非表示(基底ルールの保険) */
  .promaster-fair__image--sp {
    display: none;
  }

  /* 見出し "PROMASTER FAIR" : 実測 x350 y370 w2599 h219(全大文字 cap=全高) */
  .promaster-fair__head {
    position: absolute;
    top: 12.441%;
    left: 7.131%;
    width: 52.954%;
    margin: 0;
    padding: 0;
    border: 0; /* 仕切り線は別要素で描くので head の罫線は消す(線の二重描画防止) */
  }
  .promaster-fair__logo {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .promaster-fair__logo-text {
    display: block;
    /* capH=4.4621cqw, Poppins(c-godeeper) cap-height≈0.70em -> 4.4621/0.70 */
    font-size: 6.374cqw;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* 仕切り線 : 実測 x351 y699 w2615 厚4px(=0.081cqw)。inner::after で1本だけ描く */
  .promaster-fair__inner::after {
    content: "";
    position: absolute;
    top: 26.659%;
    left: 7.152%;
    width: 53.28%;
    height: 0.081cqw;
    height: 0.115cqw;
    height: 0.15cqw;
    background: #000;
    pointer-events: none;
  }

  /* 期間表記 : 左日付 / 中央線 / 右日付 を 3つの独立要素として実測座標へ絶対配置。
     .promaster-fair__date は display:contents で解体し、font-size/letter-spacing は子へ継承。 */
  .promaster-fair__date {
    display: contents;
    font-size: 3.3cqw;
    line-height: 1;
    letter-spacing: 0.08em;
  }
  .promaster-fair__date-text-16 {
    letter-spacing: 0em;
  }
  /* 左日付 "2026.7.16（木）" : 実測 x353 (left 7.192%), top=leading補正済 29.880% */
  .promaster-fair__date-text:first-child {
    position: absolute;
    top: 29.88%;
    left: 7.192%;
    margin: 0;
    white-space: nowrap;
  }
  /* 中央の線 : 実測 x1504..1801 (left 30.644%, w 6.072cqw), y871 (top 33.219%, 厚 0.163cqw) */
  .promaster-fair__date-line {
    position: absolute;
    top: 33.219%;
    left: 30.644%;
    width: 6.072cqw;
    height: 0.163cqw;
    height: 0.15cqw;
    margin: 0;
    background: currentColor;
  }
  /* 右日付 "2026.9.30（水）" : 右端基準で配置（字間調整で幅が変わっても右端固定）。
     実測の可視右端 60.391% に合わせる -> right = 100 - 60.391 - 閉じ括弧の右ベアリング ≈ 39.151% */
  .promaster-fair__date-text:last-child {
    position: absolute;
    top: 29.88%;
    right: 38%;
    left: auto;
    margin: 0;
    white-space: nowrap;
  }

  /* 本文 : 実測 line1 x355 y1150 w2607 字高108=2.2005cqw ;
     行送り(top->top)=149px, CJK字高≒em とみなし lh=149/108=1.380 で2行目を実測位置へ */
  .promaster-fair__text__main {
    position: absolute;
    top: 42.392%;
    left: 7.233%;
    width: 53.117%;
    margin: 0;
    font-size: 2.2cqw;
    line-height: 1.38;
  }
  /* 注記 : 実測 line1 x363 y1476 字高79=1.6096cqw, 最長行 line2 w1534=31.255% ;
     行送り=121px, lh=121/79=1.532 */
  .promaster-fair__note {
    position: absolute;
    top: 54.972%;
    left: 7.396%;
    width: 36%;
    margin: 0;
    font-size: 1.61cqw;
    line-height: 1.532;
  }

  /* 写真(PC) : 実測 x3258 y330 w1308 h1346(原画 900x922 と同比率 -> 高さ auto で一致) */
  .promaster-fair__image--pc {
    position: absolute;
    top: 12.586%;
    left: 66.381%;
    width: 26.65%;
    flex: none;
    margin: 0;
  }
  .promaster-fair__image--pc img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ボタン : 実測 x1652 y2018 w1600 h264 ; centerX=49.959%≈50% -> left50%+translateX(-50%) */
  .promaster-fair__button {
    position: absolute;
    top: 76.964%;
    left: 50%;
    transform: translateX(-50%);
    width: 32.6%;
    height: 5.379cqw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 白文字ラベル実測 字高≈130px=2.649cqw(CJK字高≒em) */
    font-size: 2.649cqw;
    line-height: 1;
  }
}

.sp-only {
  display: none;
}

@media (max-width: 780px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: inline;
  }
}
.c-footer {
  margin-top: -2px;
}

.c-product-pickup .c-product__thum {
  padding: 0;
}

.c-product__slider-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.c-product__slider-wrap .swiper-button-prev,
.c-product__slider-wrap .swiper-button-next {
  width: clamp(24.2px, 2.2916666667vw, 44px);
  height: clamp(24.2px, 2.2916666667vw, 44px);
  background: none;
  z-index: 10;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - var(--pagination-button-offset, 0px)));
  margin-top: 0;
}

.c-product__slider-wrap .swiper-button-prev::after,
.c-product__slider-wrap .swiper-button-next::after {
  display: none;
}

.c-product__slider-wrap .swiper-button-prev {
  left: calc(clamp(17.6px, 1.6666666667vw, 32px) * -1);
}

.c-product__slider-wrap .swiper-button-next {
  right: calc(clamp(17.6px, 1.6666666667vw, 32px) * -1);
}

.c-product__slider-wrap .c-arrow {
  display: inline-block;
  width: clamp(16.5px, 1.5625vw, 30px);
  height: clamp(16.5px, 1.5625vw, 30px);
  border: solid #fff;
  border-width: 0 2px 2px 0;
  padding: 4px;
  position: absolute;
  transform: rotate(45deg);
}

.c-product__slider-wrap .c-arrow--prev {
  transform: rotate(135deg);
}

.c-product__slider-wrap .c-arrow--next {
  transform: rotate(-45deg);
}

@media (max-width: 780px) {
  .c-product__slider-wrap .swiper-button-prev,
  .c-product__slider-wrap .swiper-button-next {
    width: min(8.2051282051vw, 64px);
    height: min(8.2051282051vw, 64px);
  }
  .c-product__slider-wrap .swiper-button-prev {
    left: calc(min(0vw, 0px) * -1);
  }
  .c-product__slider-wrap .swiper-button-next {
    right: calc(min(0vw, 0px) * -1);
  }
  .c-product__slider-wrap .c-arrow {
    width: min(4.6153846154vw, 36px);
    height: min(4.6153846154vw, 36px);
  }
}
.l-slider.swiper .swiper-pagination {
  margin-top: 1em;
}