/* =====================================================================
   lineup.css — TOP 商品ラインナップ
   円形画像は clip-path で円形化（画像差し替えは <img src> のみ）。
   PC(>=1024px)のみ3段がゆっくりスライド（上:右→左/中:左→右/下:右→左）。SPは静止。
   ===================================================================== */
.p-lineup {
  position: relative;
  isolation: isolate;          /* 装飾の z-index をセクション内に閉じ込める（白丸を円の背面へ） */
  overflow: visible;           /* 装飾ブロブの上へのはみ出しを見せる（横はみ出しは body の overflow-x:clip が処理） */
  background: var(--bg-default);
  padding-block: 110px;
  --circle: 96px;
  --row-gap: var(--space-24);
  --item-gap: var(--space-24);   /* SP: 円の左右・上下の間隔を24pxに */
}
/* SP: feature→lineup の区切りを中心に上下75pxずつ（lineup側の上余白） */
@media (max-width: 599px) {
  /* --row-gap=フレーム段間（上段↔中央列/中央列↔下段）を45pxに。--item-gap(中央列内)は24pxのまま維持 */
  .p-lineup { padding-top: 75px; --row-gap: 45px; }
  /* 中央コンテンツ（reveal後）を上に20px移動。transformと干渉しないようmarginで調整 */
  .p-lineup__content.is-act { margin-top: -20px; }
}

/* 装飾ブロブ（PCのみ・画面中央から右へ450px / top -30px） */
.p-lineup__blob {
  position: absolute;
  top: -130px;
  left: calc(50% + 450px);
  width: 178.5px;              /* 元357pxの半分（height:auto で高さも半分に） */
  height: auto;
  z-index: 0;
  pointer-events: none;
  display: none;
}

/* 装飾ブロブ2（PCのみ・画面中央基準 left = 50%-630px / bottom 0px） */
.p-lineup__blob2 {
  position: absolute;
  bottom: 0px;
  left: calc(50% - 630px);
  width: 240px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  display: none;
}

/* 白丸（PCのみ・セクション縦横中央から右+390px/下+190px） */
.p-lineup__circle {
  position: absolute;
  top: calc(50% + 190px);
  left: calc(50% + 390px);
  transform: translate(-50%, -50%);
  width: 80px;
  height: auto;
  z-index: -1;                /* 商品円の背面・背景クリームの前面 */
  pointer-events: none;
  display: none;
}

/* ===== SP/タブレット: 静止フレーム（上段4・左右に縦3ずつ・下段4） ===== */
.p-lineup__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap);
  overflow-x: clip;            /* 左右にはみ出す中段カラム(ちら見)を横方向だけクリップ */
}
.p-lineup__frame-row { display: flex; justify-content: center; gap: var(--item-gap); }
.p-lineup__frame-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 左右の列を画面端から半分はみ出させる（Figmaのちら見） */
  width: calc(100% + var(--circle));
  margin-inline: calc(var(--circle) / -2);
}
.p-lineup__frame-col { display: flex; flex-direction: column; gap: var(--item-gap); flex: 0 0 auto; }

/* ===== PC: 背景の円形画像3段マーキー（フローで高さを決める） ===== */
.p-lineup__rows {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 154px;                  /* マーキー3段の縦間隔 */
  overflow: hidden;            /* マーキー(横に長いトラック)のクリップを rows 自身で担保 */
  /* 左右端をグラデで消す */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.p-lineup__row { display: flex; justify-content: center; }
.p-lineup__track { display: flex; width: max-content; will-change: transform; }
/* 隙間は margin で持たせる（複製時にseamが完全一致＝ループが途切れない） */
.p-lineup__item { flex: 0 0 auto; width: var(--circle); height: var(--circle); }
/* マーキー(トラック)だけ margin で隙間を持たせる（複製時の seam 一致用）。フレームは gap を使用 */
.p-lineup__track .p-lineup__item { margin-right: calc(var(--item-gap) * 2); }
.p-lineup__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: circle(50%);     /* 円形クリップ（差し替えは src だけ） */
  display: block;
}

/* 中央のテキスト（背景クリーム地で中段の画像を隠す） */
.p-lineup__content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: max-content;
  /* SP: 左右の縦列の内側に収める（被り防止）。隙間 = 画面幅 - 円1個分 */
  max-width: calc(100% - var(--circle) - var(--space-32));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
  /* SP: 背景ボックスなし（Figma準拠。フレーム中央は円が無いので透過でOK） */
  padding: 0;
}
.p-lineup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}
.p-lineup__eyebrow {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-orange);
}
.p-lineup__dots { width: 64px; height: auto; }
.p-lineup__heading {
  margin-top: var(--space-12);
  font-size: clamp(32px, 8vw, 40px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.p-lineup__lead {
  font-size: clamp(16px, 4.5vw, 20px);
  line-height: 1.7;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-lineup__more { color: var(--text-primary); }
/* SPのみ改行（≥600pxでは非表示＝1行に戻す） */
@media (min-width: 600px) { .p-lineup__sp-br { display: none; } }

/* ---- タブレット ---- */
@media (min-width: 600px) {
  .p-lineup { --circle: 130px; --row-gap: var(--space-32); --item-gap: var(--space-24); }
}

/* ---- PC: マーキー表示（フレームは非表示）＋円を大きく＋スライド ---- */
@media (min-width: 1024px) {
  .p-lineup {
    --circle: 272px;
    --row-gap: var(--space-40);
    --item-gap: var(--space-40);
    padding-block: 110px;
  }
  .p-lineup__frame { display: none; }
  .p-lineup__blob { display: block; }
  .p-lineup__blob2 { display: block; }
  .p-lineup__circle { display: block; }
  .p-lineup__rows { display: flex; align-items: stretch; } /* 左揃え（端が空かないように） */
  .p-lineup__row { justify-content: flex-start; }
  .p-lineup__content {
    max-width: 560px;
    padding: var(--space-48) var(--space-64);
  }
  /* 背景は box-shadow のぼかしではなく、放射グラデーションで端を透過フェード */
  .p-lineup__content::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 840px;
    height: 840px;
    pointer-events: none;
    /* var(--bg-default) = rgb(251,247,242)。正円：中心のクリーム地(半径270px)→420pxで同色の透明へ */
    background: radial-gradient(circle at center,
      var(--bg-default) 0,
      var(--bg-default) 270px,
      rgba(251, 247, 242, 0) 420px);
  }
  .p-lineup__row--rtl .p-lineup__track[data-marquee="1"] { animation: lineup-rtl var(--marquee-duration, 60s) linear infinite; }
  .p-lineup__row--ltr .p-lineup__track[data-marquee="1"] { animation: lineup-ltr var(--marquee-duration, 60s) linear infinite; }
}

/* 1セット分（--marquee-distance）だけ移動して繰り返す＝シームレスな無限ループ */
@keyframes lineup-rtl { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); } }
@keyframes lineup-ltr { from { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .p-lineup__track { animation: none !important; }
}