@charset "utf-8";
/* ==========================================================================
   Coffret Couleur ─ トップページ CSS（base / 全デバイス共通）
   detail-base.css のトークンを継承し、トップ専用セクションを定義する
   PC専用→ top-pc.css（769px〜）  SP専用→ top-sp.css（〜768px）
   ========================================================================== */

/* --- デザイントークン（detail-base.css と同一値・独立可動）-------------- */
:root{
  --ink:        #3e3a39;
  --ink-soft:   #6f6b68;
  --sage:       #94a7aa;
  --sage-deep:  #687f82;
  --sage-mist:  #bcd1cf;
  --sage-pale:  #eef2f2;
  --mauve:      #c38fb8;
  --mauve-deep: #a86c9e;
  --paper:      #ffffff;
  --paper-warm: #f9f8f7;
  --line:       #e4e6e5;
  --font-display:'Prata','Noto Serif JP',serif;
  --font-serif:  'Noto Serif JP',serif;
  --font-sans:   'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --wrap:  1120px;
  --radius: 18px;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

/* --- リセット ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-sans); color:var(--ink); background:var(--paper);
  line-height:1.9; letter-spacing:.02em; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:color .3s var(--ease); }
ul,li{ list-style:none; margin:0; padding:0; }
p{ margin:0; }

/* --- ユーティリティ -------------------------------------------------------- */
.wrap{ width:min(var(--wrap),92%); margin-inline:auto; }

.rule-couleur{
  width:64px; height:2px; border:0; margin:0;
  background:linear-gradient(90deg,var(--sage) 0%,var(--sage-mist) 45%,var(--mauve) 100%);
}
.eyebrow{ font-family:var(--font-sans); font-size:12px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--sage-deep); }

.sec-head{ text-align:center; margin-bottom:50px; }
.sec-head .en{ font-family:var(--font-display); font-size:clamp(28px,4vw,42px);
  color:var(--sage-deep); letter-spacing:.06em; line-height:1.2; }
.sec-head .ja{ margin-top:10px; font-family:var(--font-serif); font-size:15px;
  color:var(--ink-soft); letter-spacing:.28em; }
.sec-head .rule-couleur{ margin:20px auto 0; }

.btn{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--font-sans);
  font-size:14px; font-weight:500; letter-spacing:.14em; padding:16px 40px;
  border:1px solid var(--sage); color:var(--sage-deep); border-radius:100px;
  background:transparent; cursor:pointer; transition:all .35s var(--ease); }
.btn:hover{ background:var(--sage); color:#fff; }
.btn--fill{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fff; }
.btn--fill:hover{ background:var(--mauve); border-color:var(--mauve); }

.reveal{ opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 5%;
  background:transparent;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  padding:13px 5%; box-shadow:0 1px 0 var(--line);
}
.site-header .logo img{ height:44px; width:auto; transition:height .4s var(--ease),filter .4s; }
.site-header.is-scrolled .logo img{ height:34px; }
/* ロゴ：ヒーロー上では白く、スクロール後は元色 */
.logo-white img{ filter:brightness(0) invert(1) !important; }
.site-header.is-scrolled .logo-white img{ filter:none !important; }

.gnav ul{ display:flex; gap:32px; }
.gnav a{ font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; position:relative; padding:3px 0; }
.site-header.is-scrolled .gnav a{ color:var(--ink); }
.gnav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--mauve); transition:width .3s var(--ease); }
.gnav a:hover::after{ width:100%; }

.nav-toggle{ display:none; }

/* ==========================================================================
   HERO（フルスクリーン：Vegas.js スライドショー）
   ========================================================================== */
.hero-top{
  position:relative; width:100%; min-height:100vh;
  display:flex; align-items:flex-end; overflow:hidden;
  background:#3a4444;
}
/* Vegas が background をインジェクトする受け皿 */
.hero-top .vegas-slide-inner{ background-size:cover; background-position:center; }

.hero-top__overlay{
  position:absolute; inset:0; z-index:1;
  /* オーバーレイ除去：画像をクリーンに見せる */
  background:none;
}
.hero-top__inner{
  position:absolute; left:0; right:0; bottom:11vh; z-index:2;
  width:min(var(--wrap),92%); margin-inline:auto;
}
.hero-top__eyebrow{ font-family:var(--font-sans); font-size:11px; letter-spacing:.42em;
  text-transform:uppercase; color:rgba(255,255,255,.85); }
.hero-top__copy{
  font-family:var(--font-serif); font-size:clamp(26px,4.2vw,50px);
  color:#fff; line-height:1.55; letter-spacing:.22em;
  margin:16px 0 20px; text-shadow:0 1px 2px rgba(20,30,30,.6), 0 3px 18px rgba(20,30,30,.45), 0 0 40px rgba(20,30,30,.3);
}
.hero-top__sub{
  font-family:var(--font-serif); font-size:clamp(13px,1.6vw,16px);
  color:rgba(255,255,255,.95); letter-spacing:.14em; line-height:2.1; margin-bottom:30px;
  text-shadow:0 1px 2px rgba(20,30,30,.6), 0 2px 16px rgba(20,30,30,.4);
}
/* サイン線：2色ヘアライン（ブランドシグネチャ） */
.rule-couleur--hero{ width:96px; height:2px; border:0; margin:0 0 36px;
  background:linear-gradient(90deg,var(--sage) 0%,var(--sage-mist) 45%,var(--mauve) 100%); }
.hero-top__btn{ display:inline-flex; align-items:center; gap:.8em;
  padding:15px 38px; border:1.5px solid rgba(255,255,255,.9); border-radius:100px;
  color:#fff; font-size:13px; letter-spacing:.2em;
  transition:background .35s var(--ease), border-color .35s; }
.hero-top__btn:hover{ background:rgba(255,255,255,.18); border-color:#fff; }

/* スクロール誘導アロー */
.hero-top__scroll{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-top__scroll span{ font-size:10px; letter-spacing:.3em; color:rgba(255,255,255,.7); }
.hero-top__scroll::after{
  content:""; width:1px; height:52px;
  background:linear-gradient(180deg,rgba(188,209,207,.8),rgba(195,143,184,.6));
  animation:scrollLine 2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{transform:scaleY(0);transform-origin:top;opacity:1} 
  50%{transform:scaleY(1);transform-origin:top;opacity:1}
  51%{transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0} }

/* ==========================================================================
   CONCEPT セクション
   ========================================================================== */
.sec-concept{ padding-block:120px; text-align:center; background:var(--paper); }
.sec-concept__logo{ margin:0 auto 40px; }
.sec-concept__logo img{ width:min(280px,60%); margin-inline:auto; }
.sec-concept__midashi{
  font-family:var(--font-serif); font-size:clamp(22px,3.5vw,36px);
  color:var(--sage-deep); letter-spacing:.22em; line-height:1.7; margin-bottom:30px;
}
.sec-concept__text{ font-family:var(--font-serif); font-size:15px; line-height:2.4;
  color:var(--ink); letter-spacing:.1em; }
.sec-concept .rule-couleur{ margin:30px auto; }

/* ==========================================================================
   BIRTHSTONE セクション（パララックス帯）
   ========================================================================== */
.sec-birthstone{
  position:relative; min-height:80vh; display:flex; align-items:center;
  overflow:hidden; background:#3a4444;
}
.sec-birthstone__media{ position:absolute; inset:0; z-index:0; will-change:transform; }
.sec-birthstone__media img{ width:100%; height:100%; object-fit:cover; }
.sec-birthstone__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(38,44,44,.5) 0%,rgba(38,44,44,.3) 100%);
}
.sec-birthstone__inner{ position:relative; z-index:1; text-align:center;
  width:min(var(--wrap),92%); margin-inline:auto; padding-block:80px; }
.sec-birthstone__parts img{ width:min(420px,80%); margin-inline:auto; }
.sec-birthstone__midashi{
  font-family:var(--font-serif); font-size:clamp(20px,3vw,30px);
  color:#fff; letter-spacing:.22em; line-height:1.8; margin:28px 0 18px;
}
.sec-birthstone__midashi span{ color:var(--sage-mist); }
.sec-birthstone__text{ font-family:var(--font-serif); font-size:14px;
  color:rgba(255,255,255,.9); letter-spacing:.1em; line-height:2.3; margin-bottom:36px; }

/* ==========================================================================
   SIMULATOR セクション（既存機能を継承・モダン化）
   ========================================================================== */
.sec-simulator{ padding-block:100px; background:var(--sage-pale); text-align:center; }
.sec-simulator__title{ font-family:var(--font-display); font-size:clamp(28px,4vw,44px);
  color:var(--sage-deep); letter-spacing:.08em; margin-bottom:8px; }
.sec-simulator__sub{ font-family:var(--font-serif); font-size:16px; letter-spacing:.28em;
  color:var(--ink-soft); margin-bottom:54px; }

/* タブ */
.sim-tabs{ display:flex; justify-content:center; gap:0; margin-bottom:36px; }
.sim-tab{
  padding:12px 40px; font-size:13px; letter-spacing:.2em; cursor:pointer;
  border:1px solid var(--sage-mist); background:#fff; color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.sim-tab:first-child{ border-radius:100px 0 0 100px; }
.sim-tab:last-child{ border-radius:0 100px 100px 0; border-left:0; }
.sim-tab.active{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fff; }



/* ==========================================================================
   RING COLLECTION セクション（②角丸・PC3列・SP1列パララックス）
   ========================================================================== */
.sec-ring{ padding-block:100px; background:var(--paper); }
.sec-ring__bg{
  position:relative; min-height:340px; display:flex; align-items:center;
  justify-content:center; overflow:hidden; margin-bottom:70px;
}
.sec-ring__bg-media{ position:absolute; inset:0; z-index:0; }
.sec-ring__bg-media img{ width:100%; height:100%; object-fit:cover; }
.sec-ring__bg-media::after{
  content:""; position:absolute; inset:0;
  background:rgba(38,44,44,.48);
}
.sec-ring__bg-inner{ position:relative; z-index:1; text-align:center; padding:60px 20px; }
.sec-ring__bg-inner .en{ font-family:var(--font-display);
  font-size:clamp(32px,5vw,54px); color:#fff; letter-spacing:.06em; }
.sec-ring__bg-inner .ja{ font-family:var(--font-serif); font-size:14px;
  color:rgba(255,255,255,.85); letter-spacing:.3em; margin-top:10px; }
.sec-ring__bg-inner .rule-couleur{ margin:20px auto 0; width:80px; }

/* カードグリッド */
.card-grid{ display:grid; gap:28px; }

.card{
  display:block; background:var(--paper); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 6px 24px rgba(104,127,130,.10);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  text-decoration:none;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(104,127,130,.20); }
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__body{ padding:22px 22px 26px; }
.card__en{ font-family:var(--font-display); font-size:22px;
  color:var(--sage-deep); letter-spacing:.04em; }
.card__ja{ font-family:var(--font-serif); font-size:12px;
  color:var(--ink-soft); letter-spacing:.2em; margin-top:6px; }
.card__more{ margin-top:14px; font-size:11px; letter-spacing:.16em; color:var(--mauve-deep); }

.sec-ring__more{ text-align:center; margin-top:52px; }

/* ==========================================================================
   SHOP セクション
   ========================================================================== */
.sec-shop{ padding-block:100px; background:var(--paper-warm); }
.shop-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:44px; }
.shop-tag{
  padding:8px 22px; border:1px solid var(--sage-mist); border-radius:100px;
  font-size:12.5px; letter-spacing:.12em; cursor:pointer; color:var(--ink-soft);
  transition:all .3s var(--ease); background:#fff;
}
.shop-tag.active{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fff; }



/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{ text-align:center; padding:90px 5%; background:var(--sage-pale); }
.cta-band__en{ font-family:var(--font-display); font-size:clamp(24px,4vw,36px);
  color:var(--sage-deep); letter-spacing:.05em; }
.cta-band p{ font-family:var(--font-serif); font-size:14.5px; color:var(--ink);
  margin:14px auto 30px; max-width:34em; line-height:2; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--sage-deep); color:#fff; text-align:center;
  padding:56px 5% 40px; }
.site-footer .f-logo img{ height:40px; width:auto; margin:0 auto 20px;
  filter:brightness(0) invert(1); opacity:.9; }
.site-footer .f-nav{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:22px; margin-bottom:28px; }
.site-footer .f-nav a{ font-size:12px; letter-spacing:.16em; opacity:.85; }
.site-footer .f-nav a:hover{ opacity:1; color:var(--sage-mist); }
.site-footer .f-sub{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:18px; margin-bottom:26px; }
.site-footer .f-sub a{ font-size:11px; letter-spacing:.1em; opacity:.6; }
.site-footer .f-sub a:hover{ opacity:.9; }
.site-footer .copyright{ font-size:11px; letter-spacing:.1em; opacity:.6; }


/* =====================================================
   店舗カード（<a>ネスト解消版：div + 独立リンク）
   ===================================================== */
.shop-grid{ display:grid; gap:24px; }

.shop-card{
  background:var(--paper); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 4px 16px rgba(104,127,130,.10);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex; flex-direction:column;
}
.shop-card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(104,127,130,.18); }

.shop-card__link{ display:block; text-decoration:none; color:inherit; }
.shop-card__media{ aspect-ratio:16/9; overflow:hidden; }
.shop-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.shop-card:hover .shop-card__media img{ transform:scale(1.05); }

.shop-card__body{ padding:16px 18px 10px; }
.shop-card__name{ font-family:var(--font-serif); font-size:14.5px; font-weight:500;
  color:var(--ink); letter-spacing:.04em; line-height:1.5; }
.shop-card__addr{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; line-height:1.7; }

.shop-card__footer{
  margin-top:auto;
  padding:10px 18px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap;
}
.shop-card__tel-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 15px; border-radius:100px;
  background:var(--sage-deep); color:#fff;
  font-size:12.5px; font-weight:500;
  letter-spacing:.05em; text-decoration:none;
  transition:background .3s var(--ease);
  white-space:nowrap;
}
.shop-card__tel-btn:hover{ background:var(--mauve); }
.tel-svg{ flex-shrink:0; }
.shop-card__more{
  font-size:10.5px; letter-spacing:.14em; color:var(--mauve-deep);
  text-decoration:none; white-space:nowrap;
}
.shop-card__more:hover{ color:var(--sage-deep); }

/* =====================================================
   シミュレーター（縦一列センター配置）
   ===================================================== */
.sim-stone-panel{ display:none; }
.sim-stone-panel.active{ display:block; }

.sim-stone-list{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  max-width:820px; margin:0 auto 44px;
  padding:0; list-style:none;
}
.stone-btn{
  display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:14px 6px 12px;
  border:1px solid var(--line); border-radius:16px;
  background:#fff; text-decoration:none; color:var(--ink);
  transition:all .3s var(--ease);
  box-shadow:0 2px 10px rgba(104,127,130,.08);
  cursor:pointer;
}
.stone-btn:hover,
.stone-btn.active{
  border-color:var(--sage); background:var(--sage-pale);
  box-shadow:0 6px 20px rgba(104,127,130,.2);
  transform:translateY(-3px);
}
.stone-btn__img img{ width:46px; height:46px; object-fit:contain; display:block; }
.stone-btn__month{
  font-family:var(--font-sans); font-size:9px; font-weight:700;
  letter-spacing:.24em; color:var(--sage); line-height:1; margin-top:3px;
}
.stone-btn__en{
  font-family:var(--font-display); font-size:11.5px; color:var(--sage-deep);
  letter-spacing:.02em; line-height:1.2; text-align:center;
}
.stone-btn__ja{
  font-family:var(--font-serif); font-size:10px; color:var(--ink-soft);
  letter-spacing:.04em; line-height:1;
}

/* 選択中の石の名前（HTMLテキスト表示） */
.sim-name{
  display:flex; justify-content:center; align-items:center;
  gap:20px; margin:0 auto 26px;
}
.sim-name__stone{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:150px; padding:12px 20px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 3px 12px rgba(104,127,130,.09);
}
.sim-name__stone .n-mon{
  font-family:var(--font-sans); font-size:9px; font-weight:700;
  letter-spacing:.26em; color:var(--sage); line-height:1;
}
.sim-name__stone .n-en{
  font-family:var(--font-display); font-size:16px; color:var(--sage-deep);
  letter-spacing:.03em; line-height:1.3;
}
.sim-name__stone .n-ja{
  font-family:var(--font-serif); font-size:11px; color:var(--ink-soft);
  letter-spacing:.1em; line-height:1;
}
.sim-name__x{
  font-family:var(--font-display); font-size:20px; color:var(--mauve);
}

/* リング表示（絶対配置レイヤー） */
.sim-ring{
  position:relative;
  width:min(340px, 84%);
  margin:0 auto 28px;
  background:#fff; border-radius:var(--radius);
  padding:22px; box-shadow:0 8px 30px rgba(104,127,130,.12);
  overflow:hidden;
}
.sim-ring img{ width:100%; height:auto; display:block; }
.sim-ring__base{ position:relative; z-index:1; }
.sim-ring__bg-l, .sim-ring__bg-r{
  position:absolute; inset:22px; z-index:0; opacity:.3;
  width:calc(100% - 44px) !important;
}
.sim-ring__stone-l, .sim-ring__stone-r{
  position:absolute; inset:22px; z-index:2;
  width:calc(100% - 44px) !important;
}

.sim-note{
  font-size:12px; color:var(--ink-soft); line-height:2;
  letter-spacing:.05em; text-align:center;
}

@media(max-width:768px){
  .sim-stone-list{ grid-template-columns:repeat(4,1fr); gap:9px; max-width:440px; }
  .stone-btn{ padding:10px 4px 9px; border-radius:12px; }
  .stone-btn__img img{ width:36px; height:36px; }
  .stone-btn__month{ font-size:8px; }
  .stone-btn__en{ font-size:10px; }
  .stone-btn__ja{ font-size:9px; }
  .sim-name img{ height:36px; }
  .sim-name__x{ height:18px !important; }
  .shop-card__footer{ padding:8px 14px 14px; }
  .shop-card__tel-btn{ font-size:12px; padding:7px 13px; }
}
@media(max-width:400px){
  .sim-stone-list{ grid-template-columns:repeat(3,1fr); }
}


/* =====================================================
   SP専用：メイン画像下のキャッチコピー（PCでは非表示）
   ===================================================== */
.hero-sp-copy{ display:none; }

/* ===== Instagram導線：フッターリンク ===== */
.site-footer .f-sns{ display:flex; justify-content:center; margin-bottom:24px; }
.site-footer .f-sns a{ display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.14em; color:#fff; opacity:.9;
  border:1px solid rgba(255,255,255,.35); border-radius:30px; padding:8px 18px;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease); }
.site-footer .f-sns a:hover{ background:var(--sage-mist); border-color:var(--sage-mist); color:var(--sage-deep); opacity:1; }
.site-footer .f-sns svg{ flex-shrink:0; }

/* ===== Instagram導線：トップ専用セクション ===== */
.sec-instagram{ padding:96px 5% 100px; text-align:center; background:var(--paper-warm); }
.sec-instagram .btn{ max-width:100%; }
.sec-instagram .btn svg{ flex-shrink:0; }
.sec-instagram .btn span{ white-space:nowrap; }
.sec-ig__text{ font-family:var(--font-serif); font-size:15px; line-height:2.4;
  color:var(--ink-soft); letter-spacing:.06em; margin:0 auto 34px; max-width:560px; }
@media (max-width:768px){
  .sec-instagram{ padding:64px 6% 68px; }
  .sec-instagram .btn{ padding:15px 26px; font-size:13px; letter-spacing:.1em; }
}