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

/* ヘッダー */
.header{ padding:14px 18px; }
.header__logo img{ width:22px; }
.header__logo span{ font-size:11px; letter-spacing:.22em; }
.gnav{ display:none; }
.menu-btn{ display:block; }

/* ヒーロー */
.hero{ min-height:100svh; padding-bottom:14vh; }
.hero__bg{ background-image:url(../img/hero-sp.jpg); background-position:center 24%; }
.hero__mark{ width:42px; margin-bottom:20px; }
.hero__title{ font-size:32px; letter-spacing:.24em; }
.hero__kana{ font-size:10.5px; letter-spacing:.34em; }
.hero__copy{ font-size:13.5px; line-height:2.2; margin-top:24px; }
.scroll-cue{ bottom:24px; }
.scroll-cue i{ height:38px; }

/* セクション余白 */
.section{ padding:78px 0; }
.section--tight{ padding:58px 0; }
.sec-head__en{ font-size:10.5px; }
.sec-head__jp{ font-size:19px; margin-top:12px; }
.sec-head::after{ height:40px; }

/* ブランドステートメント */
.statement{ text-align:center; }
.statement__en{ font-size:25px; }
.statement__jp{ font-size:13.5px; margin-top:24px; }

/* コレクション */
.ring-row{ grid-template-columns:1fr; gap:26px; margin-bottom:72px; }
.ring-no b{ font-size:44px; }
.ring-name{ font-size:12.5px; }
.ring-desc{ font-size:13.5px; }
.ring-row__body .btn{ margin-top:24px; width:100%; }

/* 商品詳細 */
.detail-hero{ display:grid; grid-template-columns:1fr; gap:28px; }
.detail-hero__fig{ background:var(--bg-2); border:1px solid var(--line); padding:18px; }
.spec-list{ display:grid; grid-template-columns:1fr; gap:16px; }

/* 価格表は横スクロールで逃がす */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll .price-table{ min-width:520px; }
.price-table th,.price-table td{ padding:11px 8px; }
.price-table td{ font-size:13px; }

/* 取扱い店舗 */
.area-filter{ margin:0 auto 34px; }
.area-btn{ font-size:11px; padding:8px 13px; letter-spacing:.1em; }
.area-label{ font-size:12.5px; margin-bottom:20px; }
.shop-grid{ grid-template-columns:1fr; gap:18px; }
.area-section + .area-section{ margin-top:48px; }
.shop-card__btns{ flex-wrap:wrap; }

/* FAQ */
.faq__q{ font-size:13.5px; padding:18px 0; }
.faq__a > p{ font-size:12.5px; }

/* フッター */
.footer{ padding:52px 20px 34px; }
.footer__nav{ margin:24px 0 26px; gap:10px 20px; }
.footer__meta{ margin-bottom:20px; }

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

/* =========================================================================
   スマホ専用アニメーション・視覚効果（768px以下）
   ※ 端末の負荷を抑えるため、パララックスとマウス追従は使わない。
      「フェード＋わずかなスライド」を基本にする。
   ========================================================================= */

/* ---------- ヒーロー：ズームは弱めに、文字は順番に出す ---------- */
.hero__bg{ animation:kenburns 26s ease-out forwards; }
.hero__mark { animation:fadeUpSp 1.1s cubic-bezier(.16,1,.3,1) .1s both; }
.hero__title{ animation:heroTitleSp 1.5s cubic-bezier(.16,1,.3,1) .25s both; }
.hero__kana { animation:fadeUpSp 1.1s cubic-bezier(.16,1,.3,1) .8s both; }
.hero__copy { animation:fadeUpSp 1.1s cubic-bezier(.16,1,.3,1) 1.0s both; }
.scroll-cue { animation:fadeUpSp 1s ease 1.5s both; }
.scroll-cue i{ animation:cueDrop 2.4s ease-in-out infinite; }

@keyframes fadeUpSp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes heroTitleSp{
  from{ opacity:0; letter-spacing:.5em; }
  to  { opacity:1; letter-spacing:.24em; }
}

/* ---------- コンセプトセクション ---------- */
.concept-section{ min-height:92svh; }
.concept-bg{ inset:0; }                     /* SPはパララックスなし＝ぴったり */
.concept-en{ font-size:30px; letter-spacing:.24em; }
.concept-jp{ font-size:13.5px; letter-spacing:.16em; line-height:2.2; }
.concept-jp-sub{ font-size:11.5px; letter-spacing:.12em; line-height:2; margin-top:18px; }
.concept-divider{ height:38px; margin-block:20px; }

/* ---------- 写真区切りバナー ---------- */
.photo-break{ height:62vw; min-height:250px; max-height:340px; }
.photo-break__bg{ inset:0; }
.photo-break__copy{ font-size:13.5px; letter-spacing:.18em; line-height:2.2; }

/* ---------- コレクション：下からのみ（横スライドはしない） ---------- */
.ring-row.reveal{ transition-duration:1s; transform:translateY(26px); }
.ring-row.is-in{ transform:none; }
.ring-row__fig img{ animation:ringFloat 8s ease-in-out infinite; }
.ring-row:nth-child(2) .ring-row__fig img{ animation-delay:-2.6s; }
.ring-row:nth-child(3) .ring-row__fig img{ animation-delay:-5.2s; }

/* ゴースト数字はSPでは小さめ・薄め */
.ring-row__body{ position:relative; }
.ring-row__body::before{
  content:attr(data-ghost);
  position:absolute; right:0; top:-26px; z-index:-1;
  font-family:var(--serif-en); font-weight:300; font-size:96px; line-height:1;
  color:rgba(255,255,255,.028); pointer-events:none;
}

/* ---------- 店舗カード ---------- */
.shop-card.reveal{ transition-duration:.85s; transform:translateY(22px); }
.shop-card.is-in{ transform:none; }

/* ---------- タップしたときの手応え ---------- */
.btn:active,.card-btn:active,.area-btn:active{ transform:scale(.97); }
.btn,.card-btn,.area-btn{ transition:transform .15s var(--ease), background .3s var(--ease), color .3s var(--ease); }

/* ---------- SPではマウス追従の光を出さない ---------- */
.cursor-glow{ display:none !important; }

/* ---------- グレインはさらに薄く（小さい画面ではノイズが目立つため） ---------- */
.grain{ opacity:.022; }

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

/* コラム */
.colgrid{ grid-template-columns:1fr; gap:22px; }
.colhead{ margin:32px 0 28px; }
.colhead__title{ font-size:19px; }
.colbody{ font-size:14px; line-height:2.1; }
.colbody h2{ font-size:17px; }
.colbody h3{ font-size:15px; }
.colbody__point{ padding:18px; }
.colring{ grid-template-columns:1fr; gap:14px; padding:18px 18px 22px; }
.colcta__btns .btn{ flex:1 1 100%; }
.colindex__head{ margin-top:32px; }