@charset "utf-8";
/* =========================================================================
   DANIEL BECKS  pc.css  — 769px 以上でのみ読み込まれる
   ========================================================================= */

/* ヘッダー */
.header{ padding:22px 44px; }
.header__logo img{ width:28px; }
.gnav{ gap:38px; }
.menu-btn,.drawer{ display:none; }

/* ヒーロー */
.hero{ min-height:100vh; padding-bottom:12vh; }
.hero__bg{ background-image:url(../img/hero.jpg); background-position:center 30%; }
.hero__title{ font-size:clamp(38px,4.6vw,70px); }
.hero__kana{ font-size:12px; }
.hero__copy{ font-size:16px; line-height:2.4; }

/* セクション余白 */
.section{ padding:130px 0; }
.section--tight{ padding:96px 0; }
.sec-head__en{ font-size:12px; }
.sec-head__jp{ font-size:26px; margin-top:16px; }
.sec-head::after{ height:56px; }

/* ブランドステートメント */
.statement{ text-align:center; }
.statement__en{ font-size:clamp(28px,3.4vw,46px); }
.statement__jp{ font-size:16px; margin-top:34px; }

/* コレクション */
.ring-row{ grid-template-columns:1.15fr .85fr; gap:64px; margin-bottom:120px; }
.ring-row:nth-child(even) .ring-row__fig{ order:2; }
.ring-no b{ font-size:64px; }
.ring-name{ font-size:14px; }
.ring-desc{ font-size:14.5px; }
.ring-row__body .btn{ margin-top:32px; }

/* 商品詳細 */
.detail-hero{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.detail-hero__fig{ background:var(--bg-2); border:1px solid var(--line); padding:34px; }
.spec-list{ display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; }

/* 取扱い店舗 */
.area-filter{ margin:0 auto 56px; max-width:860px; }
.area-label{ font-size:14px; margin-bottom:28px; }
.shop-grid{ grid-template-columns:repeat(3,1fr); }
.area-section + .area-section{ margin-top:72px; }

/* FAQ */
.faq__q{ font-size:15px; }

/* フッター */
.footer{ padding:70px 44px 40px; }
.footer__nav{ margin:30px 0 34px; }
.footer__meta{ margin-bottom:26px; }

/* 画像の切り替え */
.only-sp{ display:none !important; }

/* =========================================================================
   PC専用アニメーション・視覚効果（769px以上）
   ========================================================================= */

/* ---------- ヒーロー：ゆっくり寄っていく ---------- */
.hero__bg{ animation:kenburns 22s ease-out forwards; }
.hero__mark{ animation:fadeUp 1.3s cubic-bezier(.16,1,.3,1) .1s both; }
.hero__title{ animation:heroTitle 1.8s cubic-bezier(.16,1,.3,1) .3s both; }
.hero__kana{ animation:fadeUp 1.3s cubic-bezier(.16,1,.3,1) .9s both; }
.hero__copy{ animation:fadeUp 1.3s cubic-bezier(.16,1,.3,1) 1.15s both; }
.scroll-cue{ animation:fadeUp 1.2s ease 1.8s both; }
.scroll-cue i{ animation:cueDrop 2.4s ease-in-out infinite; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes heroTitle{
  from{ opacity:0; letter-spacing:.62em; transform:translateY(18px); }
  to  { opacity:1; letter-spacing:.30em; transform:none; }
}

/* ---------- コンセプトセクション ---------- */
.concept-section{ min-height:100vh; }
.concept-bg{ inset:-18% 0; }     /* パララックスで動かす余白 */
.concept-en{ font-size:clamp(38px,5.2vw,78px); }
.concept-jp{ font-size:clamp(15px,1.7vw,20px); letter-spacing:.28em; line-height:2.2; }
.concept-jp-sub{ font-size:clamp(12px,1.3vw,15px); letter-spacing:.2em; line-height:2; margin-top:26px; }
.concept-divider{ height:56px; margin-block:30px; }

/* ---------- 写真区切りバナー ---------- */
.photo-break{ height:52vmin; max-height:500px; }
.photo-break__bg{ inset:-18% 0; }
.photo-break__copy{ font-size:19px; letter-spacing:.3em; line-height:2.4; }

/* ---------- コレクション：左右から交互に入る ---------- */
.ring-row.reveal{ transition-duration:1.25s; }
.ring-row:nth-child(odd).reveal { transform:translateX(-44px) translateY(16px); }
.ring-row:nth-child(even).reveal{ transform:translateX( 44px) translateY(16px); }
.ring-row.is-in{ transform:none; }

/* リング写真：常時ゆっくり浮遊＋ホバーで拡大 */
.ring-row__fig img{
  animation:ringFloat 7s ease-in-out infinite;
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.ring-row:nth-child(2) .ring-row__fig img{ animation-delay:-2.3s; }
.ring-row:nth-child(3) .ring-row__fig img{ animation-delay:-4.6s; }
.ring-row__fig:hover img{ transform:scale(1.07); filter:brightness(1.12); }

/* 番号 01/02/03 の背後に巨大なゴースト数字 */
.ring-row__body{ position:relative; }
.ring-row__body::before{
  content:attr(data-ghost);
  position:absolute; left:-18px; top:-58px; z-index:-1;
  font-family:var(--serif-en); font-weight:300; font-size:200px; line-height:1;
  color:rgba(255,255,255,.035); letter-spacing:0; pointer-events:none;
}
.ring-no b.chrome-text{ text-shadow:0 0 44px rgba(200,212,224,.2); }

/* ---------- 区切り線 ---------- */
.chrome-line{ margin-block:0; }

/* ---------- ボタン：光がすっと走る ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg); transition:left .75s var(--ease);
}
.btn:hover::after{ left:130%; }

/* ---------- 店舗カード：順番にふわっと ---------- */
.shop-card.reveal{ transition-duration:1s; transform:translateY(30px) scale(.985); }
.shop-card.is-in{ transform:none; }
.shop-card{ transition:border-color .5s var(--ease), transform .5s var(--ease); }
.shop-card:hover{ border-color:var(--line-2); transform:translateY(-5px); }

/* ---------- マウス追従のほのかな光 ---------- */
.cursor-glow{
  position:fixed; z-index:1050; left:0; top:0; width:420px; height:420px;
  margin:-210px 0 0 -210px; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle,rgba(190,205,220,.085) 0%,transparent 62%);
  transition:opacity .6s var(--ease);
  will-change:transform;
}
.cursor-glow.is-on{ opacity:1; }

/* ---------- 価格表：行ホバー ---------- */
.price-table tbody tr{ transition:background .35s var(--ease); }
.price-table tbody tr:hover{ background:rgba(255,255,255,.035); }

/* ---------- 見出しのワイプ演出 ---------- */
.sec-head__jp{ overflow:hidden; }
.sec-head.reveal .sec-head__jp{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) .15s; }
.sec-head.is-in .sec-head__jp{ clip-path:inset(0 0 0 0); }

/* コラム */
.colgrid{ grid-template-columns:repeat(auto-fit, minmax(260px, 354px)); justify-content:center; }
.colhead__title{ font-size:26px; }
.colbody{ font-size:15px; line-height:2.2; }
.colbody h2{ font-size:21px; }
.colbody h3{ font-size:17px; }
.colring{ grid-template-columns:1.1fr .9fr; gap:32px; padding:24px 36px 24px 24px; }
.colindex__head{ margin-top:40px; }