/* =====================================================
   LIMITED EDITION ストーリー演出
   (スクロールに合わせて赤い帯が描かれ、カードとイラストが現れる)
   ===================================================== */

.ld-story-section {
  position: relative;
  overflow: hidden;
}

/* スクロールで描かれる赤い帯(セクション全体の背面) */
.ld-story-path {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ld-story-path svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ld-story-section > .container {
  position: relative;
  z-index: 1;
}

/* ストーリー部分のレイアウト */
.ld-story {
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding: 24px 0 110px;
}

.ld-story .ld-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.ld-story .ld-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ld-story .ld-img img {
  width: 100%;
  height: auto;
}

.ld-story .ld-row-wide .ld-img {
  width: 72%;
  margin: 0 auto;
}

.ld-story .ld-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 44px 48px;
  width: 92%;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}

/* カード単独の行(イラストなし)。左右交互に配置して帯が間を縫う */
.ld-story .ld-solo .ld-card {
  width: 100%;
  max-width: 640px;
  margin: 0;
}

.ld-story .ld-solo.ld-left {
  justify-content: flex-start;
}

.ld-story .ld-solo.ld-right {
  justify-content: flex-end;
}

.ld-story .ld-card h3 {
  margin-bottom: 2px;
}

.ld-story .ld-card .ld-en {
  color: #b0aca2;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  margin-bottom: 14px;
}

.ld-story .ld-card p {
  margin-bottom: 0;
}

.ld-story .ld-note {
  font-size: 0.82rem;
  color: #888;
  margin-top: 12px !important;
}

@media (max-width: 991.98px) {
  .ld-story {
    gap: 64px;
    padding-bottom: 72px;
  }
  .ld-story .ld-row {
    flex-direction: column;
  }
  .ld-story .ld-row-wide .ld-img {
    width: 100%;
  }
  .ld-story .ld-card {
    width: 100%;
    padding: 30px 24px;
  }
}

/* =====================================================
   黒背景仕上げ(このページのみ)
   ===================================================== */

.ld-story-section {
  background: #0e0e0e;
  color: #b9b6af;
}

/* セクション直下の見出し・本文は明るく */
.ld-story-section h3,
.ld-story-section h4,
.ld-story-section h5 {
  color: #f5f3ee;
}

.ld-story-section hr {
  border-color: rgba(255, 255, 255, 0.25);
  opacity: 1;
}

/* 商品情報テーブルの文字色(text-dark/text-600の上書き) */
.ld-story-section table .text-dark {
  color: #f5f3ee !important;
}

.ld-story-section table .text-600 {
  color: #b9b6af !important;
}

/* 白カード(ストーリー)内は従来の暗い文字に戻す */
.ld-story .ld-card {
  color: #444;
}

.ld-story-section .ld-card h3 {
  color: #1b1b1b;
}

/* COLLECTIONの商品カード(bg-light)内も従来の配色を維持 */
.ld-story-section .card .card-body h5,
.ld-story-section .card .card-body h5 a {
  color: #1b1b1b;
}

.ld-story-section .card .card-body,
.ld-story-section .card .card-body p {
  color: #555;
}

/* カードの影は黒背景向けに柔らかい光彩に */
.ld-story .ld-card {
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
}

/* 商品ブロックの背面に半透明の黒パネルを敷き、
   帯と重なっても文字が読みやすいようにする */
.ld-story-section .container > .row {
  background: rgba(12, 12, 12, 0.78);
  border-radius: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
  row-gap: 28px; /* COLLECTIONカードが2段になったとき、段の間に余白を空ける */
}