@charset "utf-8";
/* ==========================================================================
   Coffret Couleur ─ 詳細ページ SP用CSS（768px以下でのみ適用）
   base.css の土台に対し、スマホ専用の1列レイアウトとパララックスを上乗せ
   HTML側で <link media="screen and (max-width:768px)"> により読み込む
   ========================================================================== */

/* ------------------------------------------------------------------
   ヘッダー：PCナビを隠しハンバーガーへ
   ------------------------------------------------------------------ */
.gnav{
  position:fixed; inset:0; z-index:99;
  background:rgba(104,127,130,.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:26px; text-align:center; }
.gnav a{ color:#fff; font-size:15px; letter-spacing:.22em; }

.nav-toggle{
  display:block; position:relative; z-index:101;
  width:30px; height:22px; 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 var(--ease), background .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:10px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.is-open span{ background:#fff; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ------------------------------------------------------------------
   ヒーロー：パララックス（背景固定風）＋高さ調整
   ------------------------------------------------------------------ */
.hero{ min-height:72vh; }
.hero__media{
  /* スマホでも破綻しない擬似パララックス：JSで translateY を付与 */
  will-change:transform;
}
.hero__title{ font-size:clamp(36px,12vw,54px); }

/* ------------------------------------------------------------------
   ②カードグリッド：SPは1列 ＋ パララックス（reveal＋scale）
   ------------------------------------------------------------------ */
.card-grid{ grid-template-columns:1fr; gap:22px; }
.card__media{ aspect-ratio:16/11; }
/* カード自体を1枚ずつ視差でせり上げる（.reveal と併用） */

/* ------------------------------------------------------------------
   商品詳細：ギャラリーはスワイプ（swiper）
   ------------------------------------------------------------------ */
/* ギャラリーv2：SP = 大窓（上）＋サムネ横スクロール（下） */
.gallery-v2{
  display:flex; flex-direction:column; gap:12px;
}
.gallery-v2__main{
  position:relative; border-radius:var(--radius);
  overflow:hidden; box-shadow:0 6px 22px rgba(104,127,130,.12);
}
.gallery-v2__main-img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:opacity .25s ease;
}
.gallery-v2__main-img.switching{ opacity:0; }
.gallery-v2__main-label{
  position:absolute; bottom:12px; right:12px;
  font-size:9.5px; letter-spacing:.22em; color:#fff;
  background:rgba(40,50,50,.55); padding:4px 10px;
  border-radius:100px; backdrop-filter:blur(4px);
}
.gallery-v2__thumbs{
  display:flex; flex-direction:row; gap:8px;
  list-style:none; margin:0; padding:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gallery-v2__thumbs::-webkit-scrollbar{ display:none; }
.gallery-v2__thumbs li{
  flex:0 0 80px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; cursor:pointer;
  transition:border-color .25s;
}
.gallery-v2__thumbs li.active{ border-color:var(--sage-deep); }
.gallery-v2__thumbs li img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.gallery-v2__thumbs li span{ display:none; }

/* 意味（word）セクション：縦積み */
.meaning__grid{ display:block; }
.meaning__word{ text-align:center; margin-bottom:26px; }
.meaning__word .jp{ font-size:46px; }
.meaning__word .en{ font-size:24px; }

/* 料金表：縦積み */
.price__cols{ display:block; }
.price__cols > *+*{ margin-top:26px; }

/* 店舗詳細：情報・アクセス・紹介はすべて縦1列 */
.infobar{ display:block; }
.infobar__item{ padding:20px 6%; border-top:1px solid var(--line); text-align:center; }
.infobar__item:first-child{ border-top:0; }
.access__grid{ display:block; }
.access__map{ min-height:280px; margin-top:24px; }
.about__grid{ display:block; }
.about__grid figure{ margin-bottom:24px; border-radius:var(--radius); overflow:hidden; }

/* セクション余白をSP向けに圧縮 */
.section{ padding-block:64px !important; }

/* セットリング4枚：SP2列 */
.setring-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.setring-band{ padding-block:64px; }
.setring-item__en{ font-size:12.5px; }
.setring-item__ja{ font-size:10.5px; }

/* 公式価格表：SP調整 */
.price-table th, .price-table td{ padding:10px 8px; font-size:11.5px; }
.pt-hinban{ font-size:10.5px; }
.spec-notes{ padding:22px 6%; }
.spec-notes li{ font-size:12px; }