@charset "UTF-8";
/* ========================================
   Reset (軽量化)
======================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}
ul[role="list"], ol[role="list"], ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
html:focus-within {
  scroll-behavior: smooth;
}
body {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.6;
}
img, picture {
  width: 100%;
  display: block;
  height: auto;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ========================================
   Fonts (必要なものだけ残す)
======================================== */
.noto-serif-jp-r {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-style: normal;
  font-optical-sizing: auto;
}
.red-hat-display-r {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
}
.crimson-text-regular {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
}
.crimson-text-semibold {
  font-family: "Crimson Text", serif;
  font-weight: 600;
  font-style: normal;
}
.crimson-text-bold {
  font-family: "Crimson Text", serif;
  font-weight: 700;
  font-style: normal;
}
.crimson-text-regular-italic {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: italic;
}
.crimson-text-semibold-italic {
  font-family: "Crimson Text", serif;
  font-weight: 600;
  font-style: italic;
}
.crimson-text-bold-italic {
  font-family: "Crimson Text", serif;
  font-weight: 700;
  font-style: italic;
}
/* ========================================
   CSS Variables
======================================== */ :root {
  --bg: #fff;
  --ink: #111;
  --muted: #444;
  --line: #e6e6e6;
  --max: 1200px;
  --heading-L: 3.2rem;
  --heading-M: 2.8rem;
  --heading-S: 2.4rem;
  --text-XL: 1.8rem;
  --text-L: 1.4rem;
  --text-M: 1.4rem;
  --text-S: 1.2rem;
  --text-XS: 1.0rem;
  --tabs-bg: #000;
  --gold-1: #f4d68a;
  --gold-2: #e5bf69;
  --gold-stroke: #e6c574;
  --text-dark: #111;
  --text-gold: #f0d48a;
  --margin-L: 48px;
  --margin-M: 32px;
  --margin-S: 24px;
  --margin-XS: 16px;
  --margin-XXS: 8px;
  --header-h: 72px;
}
@media (min-width: 769px) {
  :root {
    --margin-L: 80px;
    --margin-M: 64px;
    --margin-S: 40px;
    --margin-XS: 24px;
    --margin-XXS: 12px;
  }
}
/* ========================================
   Base
======================================== */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
} /* 1rem = 10px */
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--text-M);
}
.snow--container {
  background: url(/LP/2025_dv_christmas/img/bg_snow.jpg) no-repeat;
  background-size: cover;
}
/*--------------------------------------
  Header Parts
---------------------------------------*/
header {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
  top: 0;
  position: sticky;
  z-index: 9998;
}
.site-header__logo {
  display: block;
  width: 120px;
  margin: 0 auto !important;
  padding: 12px;
  font-size: 0;
}
.site-header__logo img {
  width: 100%;
}
/*--------------------------------------
  Footer Parts
---------------------------------------*/
#footer {
  color: #ffffff;
  padding: 60px 0 30px 0;
  background: #4e4b4a;
}
#footer a {
  color: #ffffff;
  text-decoration: none;
}
#footer .footer-sns {
  margin: 0 0 54px 0;
}
#footer .footer-sns h1 {
  font-size: 2.0rem;
  font-weight: normal;
  font-family: 'Red Hat Display', 'Noto Serif JP', serif;
  letter-spacing: 1px;
  text-align: center;
  margin: 0 0 12px 0;
}
#footer .footer-sns ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  gap: 30px;
}
#footer .footer-sns ul li {
  width: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer .footer-sns ul li img {
  width: 100%;
}
#footer .footer-bnr {
  margin: 0 0 54px 0;
}
#footer .footer-bnr ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 15px;
}
#footer .footer-bnr ul li {
  width: 90%;
  max-width: 378px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer .footer-bnr ul li img {
  width: 100%;
}
#footer .footer-nav {
  margin: 0 0 54px 0;
}
#footer .footer-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 22px;
}
#footer .footer-nav ul li {
  display: inline-block;
  font-size: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
#footer .footer-nav ul li:after {
  display: inline-block;
  width: 1px;
  height: 16px;
  margin: 0 0 0 22px;
  background: #ffffff;
  content: '';
}
#footer .footer-nav ul li:last-child:after {
  display: none;
}
#footer .copyright {
  font-size: 1.0rem;
  font-weight: 300;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  margin: 0;
}
@media screen and (max-width:768px) {
  .l-inner-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
  #footer .footer-nav ul {
    justify-content: flex-start;
    gap: 22px 0;
  }
  #footer .footer-nav ul li {
    width: 50%;
    text-align: center;
  }
  #footer .footer-nav ul li:after {
    display: none;
  }
}
/* ========================================
   Hero (SPサイズ指定のみ記載されていたので通常化)
======================================== */
.hero {
  width: 100%;
  overflow: hidden;
}
/* ========================================
   Concept
======================================== */
.concept {
  color: #fff;
  margin-bottom: var(--margin-L);
}
.concept__media {
  width: 375px;
  height:350px;
  margin:0 auto;
  margin-bottom:var(--margin-M);
  position: relative;
}
.concept__body {
  width: 78%;
  margin: 0 auto var(--margin-L);
}
.concept__body .container {
  text-align: left;
  display: inline-block;
}
.concept__body p {
  font-size: var(--text-M);
  line-height: 2;
  margin-bottom: var(--margin-XXS);
}
.concept01 {
  position: absolute;
  top: 75px;
  left: 75px;
  z-index: 8;
  width: 225px;
  height: auto;
}
.concept02 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 7;
  width: 100px;
  height: auto;
}
.concept03 {
  position: absolute;
  top: 0px;
  left: 275px;
  z-index: 6;
  width: 25px;
  height: auto;
}
.concept04 {
  position: absolute;
  top: 25px;
  left: 300px;
  z-index: 5;
  width: 50px;
  height: auto;
}
.concept05 {
  position: absolute;
  top: 275px;
  left: 25px;
  z-index: 4;
  width: 75px;
  height: auto;
}
.concept06 {
  position: absolute;
  top: 200px;
  left: 225px;
  z-index: 3;
  width: 150px;
  height: auto;
}

/* ========================================
   Intro
======================================== */
.intro {
  color: #fff;
}
.intro__item {
  margin-bottom: var(--margin-L);
}
.intro__media {
  margin-bottom: var(--margin-M);
}
.intro__media.first {
  padding-right: 11%;
}
.intro__media.second {
  padding-left: 11%;
}
.intro__body {
  width: 78%;
  margin: 0 auto;
}
h2.intro__title {
  font-size: var(--text-XL);
  margin-bottom: var(--margin-XXS);
}
.intro__meta {
  display: flex;
  gap: 1rem;
  margin: 0 0 var(--margin-XS);
  padding: 0;
  list-style: none;
}
.intro__meta li {
  font-family: "Noto Serif JP", serif;
  font-size: var(--text-M);
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  padding: 6px 10px;
  border-radius: 2px;
}
.intro__body p {
  font-size: var(--text-M);
  line-height: 2;
  opacity: .8;
}
/* ========================================
   Product
======================================== */
.product {
  background: #fff;
}
.container__oi {
  background: url(/LP/2025_dv_christmas/img/bg_oi.jpg) no-repeat center / cover;
  padding: 15px;
  margin-top: var(--margin-M);
}
.container__love {
  background: url(/LP/2025_dv_christmas/img/bg_love.jpg) no-repeat center / cover;
  padding: 15px;
  margin-top: var(--margin-M);
}
.grid--products {
  background: #fff;
}
.product__title {
  font-size: 2.2rem;
  line-height: 1.3;
  text-align: center;
  margin-bottom: var(--margin-XXS);
}
.product__price {
  text-align: center;
  font-size: var(--text-XL);
  margin-bottom: var(--margin-S);
}
.product__price-mark, .product__price-note {
  font-size: var(--text-S);
}
.body__text, .product-card__desc {
  font-size: var(--text-M);
  line-height: 1.6;
  color: #000;
}
h3.product__heading {
  font-size: var(--text-L);
  margin-top: var(--margin-S);
}
h3.product-card__title {
  font-size: var(--text-L);
  text-align: center;
}
.product__summary {
  width: 78%;
  margin: var(--margin-M) auto 0;
}
.exclusive__body {
  width: 78%;
  margin: 0 auto;
  padding: var(--margin-S) 0 var(--margin-L);
}
.product__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 常に2列 */
  gap: 2rem;
  background: #fff;
  padding: 25px;
}
.product__grid .product-card:nth-child(5), .product__grid .product-card:nth-child(6) {
  grid-column: 1 / -1;
}
.product-pc-only-btn {
  margin-top: var(--margin-XS);
}
/* ========================================
   Exclusive
======================================== */
.exclusive {
  background: #fff;
}
h2.section-title {
  font-size: var(--heading-M);
  text-align: center;
  margin-bottom: var(--margin-XXS);
}
h3.exclusive__title {
  font-size: var(--text-XL);
  text-align: center;
  margin-bottom: var(--margin-XXS);
}
/* ========================================
   Release
======================================== */
.release {
  background: #F4F4F6;
  padding: 0 20px;
}
.release h2.section-title {
  padding-top: var(--margin-L);
}
.release__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC/SPとも2列 */
  gap: 2rem;
  margin: 0;
  padding: 0 0 var(--margin-L);
}
.release-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.release-card__media {
  width: 100%;
  margin-bottom: 1rem;
}
.release-card__media img {
  width: 100%;
  height: auto;
  display: block;
}
.release-card__name {
  font-family: "Red Hat Display", sans-serif;
  font-size: var(--text-L);
  line-height: 1.2;
  margin: 0 0 .5rem;
}
.release-card__price {
  font-family: "Red Hat Display", sans-serif;
  font-size: var(--text-M);
  margin: 0 0 1rem;
}
/* ========================================
   Buttons
======================================== */
/* 汎用ボタン */
main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  border: 1px solid #000;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  font-size: var(--text-L);
  text-decoration: none;
  transition: background .3s, color .3s;
}
main .btn::after {
  content: "›";
  margin-left: .5rem;
  font-size: var(--text-M);
}
main .btn:hover {
  background: #000;
  color: #fff;
}
/* 小ボタン（カート用） */
main .btn--sm {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .4em 1em;
  font-size: var(--text-S);
  font-weight: 500;
  color: #fff;
  background: #222;
  border-radius: 999px;
  text-decoration: none;
}
main .btn--sm img {
  width: 1em;
  height: auto;
  display: block;
}
/* ========================================
   Tabs
======================================== */
/* Tabs */
.tabs {
  padding: 24px 0;
}
.tabs__list {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 0;
  list-style: none;
}
.tabs__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 48px;
  border-radius: 9999px;
  border: 1px solid var(--gold-stroke);
  text-decoration: none;
  font-size: var(--text-L);
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--text-gold);
  background: transparent;
  position: relative;
  transition:
    transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.tabs__note {
  display: block;
  font-weight: 600;
  font-size: var(--text-XS);
  letter-spacing: .04em;
  opacity: .95;
}
/* hover/focus時はアクティブ時と同じ見た目に */
.tabs__link:hover, .tabs__link:focus-visible, .tabs__link.is-active, .tabs__link[aria-current="page"] {
  background: linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-2) 100%);
  border-color: transparent;
  color: var(--text-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px rgba(0, 0, 0, .35);
  transform: none; /* 浮き上がりを無効化 */
  outline: none;
}
/* noteの色も黒に（hover/focus/active時） */
.tabs__link:hover .tabs__note, .tabs__link:focus-visible .tabs__note, .tabs__link.is-active .tabs__note, .tabs__link[aria-current="page"] .tabs__note {
  color: var(--text-dark);
  opacity: .9;
}
/* 余計なhoverバリエーションは削除（hover＝activeのため） */
/* .tabs__link:not(.is-active):hover ... は不要 */
/* その他 */
.product__visual {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
/* ========================================
   Swiper
======================================== */
.product__visual {
  width: 100%;
  max-width: 600px; /* 必要なら調整 */
  margin: 0 auto;
}
.product__visual .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* 画像ドラッグで操作が阻害されるのを防ぐ */
}
/* --- ナビゲーション矢印 --- */
.product__visual .swiper-button-prev, .product__visual .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  margin: 0;
  background: transparent;
  border: none;
  color: #111; /* 矢印色（黒） */
  opacity: .8;
}
.product__visual .swiper-button-prev:hover, .product__visual .swiper-button-next:hover {
  opacity: 1;
}
/* Swiper のデフォルト矢印を上書きして、シンプルな山括弧に */
.product__visual .swiper-button-prev::after, .product__visual .swiper-button-next::after {
  font-size: 24px;
  line-height: 1;
}
.product__visual .swiper-button-prev::after {
  content: "‹";
}
.product__visual .swiper-button-next::after {
  content: "›";
}
/* 端からのオフセット（画像に近い間隔） */
.product__visual .swiper-button-prev {
  left: 0px;
}
.product__visual .swiper-button-next {
  right: 0px;
}
/* --- ページネーション（ドット） --- */
.product__visual .swiper-pagination {
  bottom: 10px !important; /* 下位置を揃える */
}
.product__visual .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #111; /* 黒いドット */
  opacity: .25; /* 非アクティブは薄く */
  margin: 0 6px !important; /* ドット間隔 */
  transition: transform .2s ease, opacity .2s ease;
}
.product__visual .swiper-pagination-bullet-active {
  opacity: .7; /* アクティブは濃く */
  transform: scale(1.1); /* ほんの少しだけ大きく */
}
/* ========================================
   Responsive tweaks (必要最小限)
======================================== */
.sp-only {
  display: block;
}
.pc-only {
  display: none;
}
@media (max-width: 768px) {
  .tabs__list {
    gap: 16px;
    padding: 0 16px;
  }
  .tabs__link {
    width: 140px;
    padding: 10px 28px;
    font-size: var(--text-L);
    line-height: 1;
  }
  .tabs__note {
    font-size: var(--text-XS);
    line-height: 1;
  }
}
@media (min-width: 769px) {
  .concept {
    padding-top: var(--margin-L);
  }
  .concept__media {
    width: 1200px;
    height: 660px;
    margin: 0 auto;
    position: relative;
    margin-bottom: var(--margin-XS);
  }
  .concept__body {
    text-align: center;
    width: 78%;
    margin: 0 auto var(--margin-L);
  }
  .concept__body p {
    margin: 0 auto var(--margin-XXS);
  }
.concept01 {
  position: absolute;
  top: 100px;
  left: 280px;
  z-index: 8;
  width: 640px;
  height: auto;
}
.concept02 {
  position: absolute;
  top: 0px;
  left: 120px;
  z-index: 7;
  width: 240px;
  height: auto;
}
.concept03 {
  position: absolute;
  top: 0px;
  left: 800px;
  z-index: 6;
  width: 80px;
  height: auto;
}
.concept04 {
  position: absolute;
  top: 60px;
  left: 880px;
  z-index: 5;
  width: 160px;
  height: auto;
}
.concept05 {
  position: absolute;
  top: 480px;
  left: 80px;
  z-index: 4;
  width: 240px;
  height: auto;
}
.concept06 {
  position: absolute;
  top: 420px;
  left: 880px;
  z-index: 3;
  width: 320px;
  height: auto;
}

  .intro__item {
    display: flex;
    align-items: center;
    gap: 40px; /* 画像とテキストの間隔 */
  }
  /* 偶数段は左右入れ替え（画像が右、テキストが左） */
  .intro__item:nth-child(even) {
    flex-direction: row-reverse;
  }
  /* 画像は「画面の60%」に固定 */
  .intro__media {
    width: 60vw; /* 画面幅基準。コンテナ基準なら 60% に変更 */
    margin: 0;
    padding: 0; /* SPの左右paddingを打ち消し */
    flex: 0 0 60vw; /* 伸縮しないよう固定 */
  }
  .intro__media img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* テキストは幅320pxで固定 */
  .intro__body {
    width: 320px;
    flex: 0 0 320px;
    margin: 0; /* SPの中央寄せを解除 */
  }
  /* タイトル・本文サイズは必要なら微調整 */
  h2.intro__title {
    font-size: var(--heading-S);
    line-height: 130%;
  }
  .intro__body p {
    font-size: var(--text-M);
  }
  .intro__media.first {
    padding-right: 0%;
  }
  .intro__media.second {
    padding-left: 0%;
  }
  .product {
    padding-top: var(--margin-L);
  }
  /* 1000pxガイドに合わせて横並び */
  .container.product__head {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 40px; /* 画像とテキストの間だけ40px */
    align-items: flex-start;
  }
  /* 左：画像 640px（max-widthの縛りを解除） */
  .product__visual {
    flex: 0 0 640px;
    width: 640px;
    max-width: none; /* ← これが肝！ 600px制限を解除 */
    margin: 0;
    background: #f5f5f5;
    border-radius: 6px;
    padding-bottom: 32px;
  }
  /* 右：テキスト 320px（左右余白リセット） */
  .product__summary {
    flex: 0 0 320px;
    width: 320px;
    margin: 0; /* SPの auto を打ち消し */
    padding: 0; /* 余計な内側余白もゼロに */
    box-sizing: border-box;
  }
  /* LOVEだけ左右反転（幅はそのまま） */
  .container.love.product__head {
    flex-direction: row-reverse;
  }
  /* PC時は左寄せ */
  .product__title, .product__price, .product__summary .body__text, .product__heading {
    text-align: left;
  }
  /* PC用の文字サイズ調整 */
  .product__title {
    font-size: var(--heading-S);
    line-height: 1.3;
  }
  .product__price {
    font-size: 2.0rem;
    margin-bottom: var(--margin-XS);
  }
  h3.product__heading {
    font-size: var(--text-L);
    margin-top: var(--margin-XS);
    padding-bottom: 4px;
  }
  /* 外側の背景付きコンテナ（1000px） */
  .container__oi, .container__love {
    max-width: 1000px; /* 指定通り */
    margin: var(--margin-L) auto 0; /* センター */
    padding: 10px; /* 1000pxの中に 980px を置くための余白 */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  /* 内側の白背景コンテナ（980px） */
  .product__grid {
    width: 980px; /* 指定通り */
    margin: 0 auto;
    background: #fff;
    padding: 40px; /* 中身の余白（お好みで） */
    display: grid;
    grid-template-columns: repeat(4, 210px); /* 210px × 4列 */
    gap: 20px; /* 指定通り */
    justify-content: center; /* 中央に揃える */
    align-items: start;
  }
  /* 各アイテム（上段4つ） */
  .product-card {
    text-align: center;
  }
  .product-card__media {
    width: 100%;
  }
  .product-card__media img {
    width: 100%;
    height: auto;
    display: block;
  }
  .product-card__title {
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 4px;
  }
  .product-card__desc {
    color: #000;
    line-height: 1.7;
    text-align: left;
  }
  /* 5番目：全幅に広げて内部を 440 | 20 | 440 のグリッドに */
  .product__grid .product-card:nth-child(5) {
    grid-column: 1 / -1;
    display: flex;
    gap: 20px;
    align-items: center; /* ★縦方向の中央揃え */
    text-align: left;
  }
  .product__grid .product-card:nth-child(5) .product-card__media {
    flex: 0 0 440px;
    margin: 0;
  }
  .product__grid .product-card:nth-child(5) .product-card__media img {
    width: 100%;
    height: auto;
    display: block;
  }
  .product__grid .product-card:nth-child(5) .product-card__text {
    flex: 0 0 440px; /* 右側のカラムをまとめる */
  }
  .product__grid .product-card:nth-child(5) .product-card__title {
    margin: 0 0 8px;
    font-weight: 700;
  }
  .product__grid .product-card:nth-child(5) .product-card__desc {
    margin: 0;
    color: #000;
    line-height: 1.7;
  }
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
  .container.exclusive__wrap {
    max-width: 1000px; /* 640 + 40 + 320 */
    margin: 0 auto;
    display: flex;
    gap: 40px; /* 画像とテキストの間 */
    align-items: flex-start; /* 上揃え */
    padding-top: var(--margin-L);
  }
  /* 左側の画像 */
  .exclusive__media {
    flex: 0 0 640px;
    width: 640px;
    margin: 0;
  }
  .exclusive__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  /* 右側のテキスト */
  .exclusive__body {
    flex: 0 0 320px;
    width: 320px;
    margin: 0;
    padding-top: 0;
    text-align: left; /* ← 左寄せ */
  }
  /* タイトル（左寄せ） */
  .exclusive__body .section-title {
    text-align: left;
    font-size: var(--heading-M);
    margin-bottom: var(--margin-XXS);
  }
  h3.exclusive__title {
    text-align: left;
    font-size: var(--text-XL);
    margin-bottom: var(--margin-XXS);
  }
  /* 本文（左寄せ） */
  .exclusive__body .body__text {
    text-align: left; /* ← 左寄せ */
    font-size: var(--text-M);
    line-height: 1.8;
    color: #000;
  }
  .release {
    padding: 0px;
  }
  .release h2.section-title {
    padding-top: var(--margin-L);
    font-size: var(--heading-M);
  }
  .release__list {
    width: 1000px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC/SPとも2列 */
    gap: 2rem;
    margin: 0 auto;
    padding: 0 0 var(--margin-L);
  }
  .release-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .release-card__media {
    width: 100%;
    margin-bottom: 1rem;
  }
  .release-card__media img {
    width: 100%;
    height: auto;
    display: block;
  }
  .release-card__name {
    font-family: "Red Hat Display", sans-serif;
    font-size: var(--text-L);
    line-height: 1.2;
    margin: 0 0 .5rem;
  }
  .release-card__price {
    font-family: "Red Hat Display", sans-serif;
    font-size: var(--text-M);
    margin: 0 0 1rem;
  }
  .teasur {
    background: #222222;
  }
  .teasur img {
    width: 750px;
    height: auto;
    margin: 0 auto;
  }
}
/* ========================================
   Motion
======================================== */
@media (prefers-reduced-motion: reduce) {
  .tabs__link {
    transition: none;
  }
}
/* 距離と時間は変数化＋テキスト用の変数を追加＋画像幅変数を追加 */
.concept {
  --pan-gap: 500px;
  --pan-dur: 12000ms;
  --zoom-start: 1.4;
  --fade-ms: 1600ms;
  --text-rise: 16px;
  --img-w: 1500px; /* ← 画像幅（PCデフォルト）*/
}
.concept .mv__slide {
  position: relative;
} /* テキストを重ねる土台 */
.concept .mv__bg {
  width: var(--img-w); /* ← 固定1500pxを変数に置換 */
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  will-change: transform;
}
/* 初期位置（拡大スタート） */
.concept .mv__slide.pan-rtl .mv__bg {
  transform: translateX(calc(-1 * var(--pan-gap))) scale(var(--zoom-start));
}
.concept .mv__slide.pan-ltr .mv__bg {
  transform: translateX(0) scale(var(--zoom-start));
}
/* キーフレーム（パン＋ズームアウト） */
@keyframes pan-rtl {
  from {
    transform: translateX(calc(-1 * var(--pan-gap))) scale(var(--zoom-start));
  }
  to {
    transform: translateX(0) scale(1);
  }
}
@keyframes pan-ltr {
  from {
    transform: translateX(0) scale(var(--zoom-start));
  }
  to {
    transform: translateX(calc(-1 * var(--pan-gap))) scale(1);
  }
}
/* ←★ is-active でも is-leave でも“動かす”（重なり演出） */
.concept .mv__slide.is-active.pan-rtl .mv__bg, .concept .mv__slide.is-leave.pan-rtl .mv__bg {
  animation: pan-rtl var(--pan-dur) linear both;
}
.concept .mv__slide.is-active.pan-ltr .mv__bg, .concept .mv__slide.is-leave.pan-ltr .mv__bg {
  animation: pan-ltr var(--pan-dur) linear both;
}
/* ===== テキストを画像の上に重ね、画像と同タイミングでフェード ===== */
.concept .mv__content {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 6vw, 56px);
  transform: translate(-50%, var(--text-rise)); /* 初期：少し下に */
  width: min(900px, calc(100% - 40px));
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  font-size: var(--text-L);
  line-height: 1.8;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  z-index: 3;
  pointer-events: none; /* 背面のスワイプを邪魔しない */
  opacity: 0;
  transition:
    opacity var(--fade-ms) ease, transform var(--fade-ms) ease;
}
/* 入場：下からふわっと */
.concept .mv__slide.is-active .mv__content {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0ms; /* 必要なら 100ms などに */
}
/* 退場：少し上に抜けつつ消える（画像のフェードと同期） */
.concept .mv__slide.is-leave .mv__content {
  opacity: 0;
  transform: translate(-50%, calc(var(--text-rise) * -0.3));
  transition-delay: 0ms;
}
/* 低視覚変化ユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .concept .mv__content {
    transition: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* ==== ここだけSP調整：画像幅のみ変更（例：1200px）==== */
@media (max-width: 768px) {
  .concept {
    --img-w: 750px;
      padding-top:var(--margin-M);
  }
}
/* ===== Page Loader ===== */ :root {
  --loader-bg: #fff; /* 背景色（必要なら #000/半透明に変更） */
  --loader-z: 9999; /* 最前面 */
  --loader-fade-ms: 400ms; /* ローディングのフェード時間 */
  --spinner-size: 56px; /* ぐるぐる円のサイズ */
  --spinner-border: 4px; /* 線の太さ */
  --spinner-color: #333; /* 線の色 */
  --spinner-track: #0000001a; /* 薄いトラック色（透明推奨） */
}
.loader {
  position: fixed;
  inset: 0;
  background: var(--loader-bg);
  display: grid;
  place-items: center;
  z-index: var(--loader-z);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--loader-fade-ms) ease, visibility var(--loader-fade-ms) ease;
}
/* 読み込み完了でフェードアウト */
.is-loaded #page-loader {
  opacity: 0;
  visibility: hidden;
}
/* 画面スクロール抑制（ローディング中） */
html.is-lock, body.is-lock {
  overflow: hidden;
}
/* ぐるぐるスピナー */
.loader__spinner {
  width: var(--spinner-size);
  height: var(--spinner-size);
  border-radius: 50%;
  border: var(--spinner-border) solid var(--spinner-track);
  border-top-color: var(--spinner-color);
  animation: loaderSpin 0.9s linear infinite;
}
/* 低モーション環境の配慮 */
@media (prefers-reduced-motion: reduce) {
  .loader__spinner {
    animation-duration: 1.6s;
  }
}
@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}
/* スクリーンリーダー用テキスト非表示ユーティリティ */
.loader__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* --- Debug: 強制オーバーレイ --- */
#page-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important; /* だいたいの要素より上 */
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 1) !important;
}
#page-loader .loader__spinner {
  width: 64px !important;
  height: 64px !important;
  border: 6px solid #0001 !important;
  border-top-color: #333 !important;
  border-radius: 50% !important;
  animation: loaderSpin 0.9s linear infinite !important;
}
/* ===== Scroll Reveal (fade-up) ===== */ :root {
  /* 調整用（ゆったり） */
  --reveal-distance: 18px;
  --reveal-duration: 900ms;
  --reveal-ease: cubic-bezier(.22, .61, .36, 1); /* ちょいモチッと */
}
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}
/* 表示トリガー後 */
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* 遅延を任意で与える（例：data-reveal-delay="200"） */
.reveal[data-reveal-delay] {
  transition-delay: calc(attr(data-reveal-delay number, 0) * 1ms);
}
/* アニメ短縮版（SPでやや早く） */
@media (max-width: 768px) {
  :root {
    --reveal-duration: 720ms;
    --reveal-distance: 14px;
  }
}
/* 低モーション配慮：アニメ無効 */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* === END MARKER === */
.__css-end-check {
  outline: 5px solid lime !important;
}
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance, 18px), 0);
  transition: opacity var(--reveal-duration, 900ms) var(--reveal-ease, cubic-bezier(.22, .61, .36, 1)), transform var(--reveal-duration, 900ms) var(--reveal-ease, cubic-bezier(.22, .61, .36, 1));
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* カード内スライダーのはみ出し対策 */
.product-card__media {
  /* 画像ラッパのサイズを明示：お好みで比率は変更可 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 12px;
}
.product-card__media.shopper {
  /* 画像ラッパのサイズを明示：お好みで比率は変更可 */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* Swiper コンテナをラッパのサイズに合わせる */
.product-card__media .swiper {
  width: 100%;
  height: 100%;
}
/* フェード時も高さを維持 */
.product-card__media .swiper-wrapper, .product-card__media .swiper-slide {
  height: 100%;
}
/* 画像をはみ出させない（トリミングする） */
.product-card__media .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 収まり優先なら contain に変更 */
  display: block;
}
/* 5枚目の横並びレイアウト内でも崩れないように */
.product__grid .product-card:nth-child(5) .product-card__media {
  flex: 0 0 440px; /* 既存指定を再確認 */
  max-width: 440px; /* 念のため横幅を明示 */
}

/* 共通アニメーション（最初は停止） */
.concept__media picture {
  opacity: 0;
  transform: translateY(16px) scale(.20);
  filter: blur(2px);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  will-change: transform, opacity, filter, box-shadow;
  animation: floatUp 3s cubic-bezier(0.17, 0.84, 0.44, 1) forwards;
  animation-play-state: paused; /* スクロールインで再生 */
  animation-delay: calc(var(--i, 1) * 300ms); /* 段階的に */
}

/* .concept__media が画面に入ったら再生 */
.concept__media.is-inview picture {
  animation-play-state: running;
}

/* 登場アニメーション */
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(.20);
    filter: blur(2px);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    box-shadow: 0 8px 16px rgba(0,0,0,.10);
  }
}

/* 各要素の順番（自由に調整可） */
.concept01 { --i: 1; }
.concept02 { --i: 2; }
.concept03 { --i: 3; }
.concept04 { --i: 4; }
.concept05 { --i: 5; }
.concept06 { --i: 6; }

/* 低モーション設定のユーザーに配慮 */
@media (prefers-reduced-motion: reduce) {
  .concept__media picture {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    box-shadow: none;
  }
}