@charset "utf-8";
/* ==========================================================================
   Coffret Couleur ─ トップページ SP用CSS（screen and (max-width:768px)）
   ========================================================================== */

/* ---- ヘッダー ---- */
.gnav{
  position:fixed; inset:0; z-index:99;
  background:rgba(72,96,100,.97); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease),visibility .4s;
}
.gnav.is-open{ opacity:1; visibility:visible; }
.gnav ul{ flex-direction:column; gap:28px; text-align:center; }
.gnav a{ color:#fff !important; font-size:15px; letter-spacing:.24em; }
.site-header.is-scrolled .gnav a{ color:#fff !important; }

.nav-toggle{
  display:block; position:relative; z-index:101;
  width:28px; height:20px; background:none; border:0; cursor:pointer; padding:0;
}
.nav-toggle span{
  position:absolute; left:0; width:100%; height:2px; background:#fff;
  transition:transform .35s var(--ease),opacity .35s;
}
.site-header.is-scrolled .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }
.nav-toggle.is-open span{ background:#fff !important; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ---- ヒーロー：SPは縦長写真を専用表示 ---- */
.hero-top{
  min-height:74svh;
  background:url(../img/bg-main-sp.jpg) center 30% / cover no-repeat !important;
}
/* Vegas生成のスライド要素をSPでは非表示にして背景を見せる */
.hero-top .vegas-slide{ display:none !important; }
.hero-top__inner{ display:none; }
.hero-top__scroll{ display:none; }
.hero-top__overlay{ background:none; }

/* ---- SP：メイン画像下のキャッチコピー ---- */
.hero-sp-copy{
  display:block;
  text-align:center;
  padding:44px 7% 46px;
  background:var(--sage-pale);
}
.hero-sp-copy__eyebrow{
  font-family:var(--font-sans); font-size:10px; font-weight:600;
  letter-spacing:.38em; text-transform:uppercase;
  color:var(--sage); margin-bottom:14px;
}
.hero-sp-copy__main{
  font-family:var(--font-serif);
  font-size:clamp(24px,7.4vw,32px);
  color:var(--sage-deep);
  line-height:1.65; letter-spacing:.16em;
  margin:0 0 16px; font-weight:500;
}
.hero-sp-copy__sub{
  font-family:var(--font-serif); font-size:12.5px;
  color:var(--ink-soft); letter-spacing:.06em; line-height:2.1;
}

/* ---- CONCEPT SP：縦積み ---- */
.sec-concept{ text-align:center; padding-block:64px 80px; }
.sec-concept__inner{ display:block; }
.sec-concept__deco{ margin-top:36px; }
.sec-concept__logo{ margin:0 auto 30px; }
.sec-concept .rule-couleur{ margin:22px auto; }

/* ---- BIRTHSTONE SP ---- */
.sec-birthstone{ min-height:60vh; }

/* ---- SIMULATOR SP ---- */
.sec-simulator{ padding-block:72px; }
.sim-stone-list li img{ width:40px; }
.sim-stone-list{ gap:7px; }
.sim-tabs{ gap:0; }
.sim-tab{ padding:10px 24px; font-size:12px; }

/* ---- COLLECTION SP：1列 + パララックス ---- */
.card-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
.sec-ring{ padding-block:72px; }

/* ---- SHOP SP：2列 ---- */
.shop-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
.shop-card__body{ padding:14px 16px 18px; }
.shop-card__name{ font-size:13px; }
.shop-card__addr{ font-size:11px; }
.sec-shop{ padding-block:72px; }

/* ---- CTA SP ---- */
.cta-band__btns{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.cta-band{ padding:72px 6%; }

/* SP2列：カード内テキスト調整 */
.card__en{ font-size:12px; letter-spacing:.02em; line-height:1.3; }
.card__ja{ font-size:9.5px; margin-top:3px; letter-spacing:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__more{ font-size:9px; margin-top:8px; letter-spacing:.1em; }
.card__body{ padding:10px 10px 13px; }
.card__media{ aspect-ratio:3/2; }