/* =========================================================
   一葉 ｜ 別バージョン（ダーク・エディトリアル）
   ※ 鯛茶STANDの「デザイン言語」を参考にした再現版。
     コピー・写真は一葉オリジナル。
   ========================================================= */
:root{
  --bg:#100e0c; --bg2:#161310; --panel:#1b1713;
  --text:#ece5d7; --muted:#9c9282; --faint:#6f665a;
  --line:rgba(236,229,215,.22); --gold:#c3a668;
  --en:"Cormorant Garamond","Cormorant",serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--mincho);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ===== ローディング画面 ===== */
#loader{position:fixed;inset:0;z-index:200;background:radial-gradient(120% 90% at 50% 40%,#181410,var(--bg) 70%);display:flex;align-items:center;justify-content:center;transition:opacity .9s ease .15s,visibility .9s ease .15s}
/* opacity/visibilityのトランジション中も要素自体はクリックを奪ってしまうため、
   フェードアウト開始と同時に即座にpointer-eventsを切る（見た目には消えていく途中でも裏で地球儀等のクリックをブロックしていた不具合の修正） */
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
/* 2回目以降（同セッション内のページ遷移）はローダーを出さない */
html.no-loader #loader{display:none}
.ld-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.ld-eyebrow{font-family:var(--en);text-transform:uppercase;letter-spacing:.44em;font-size:11px;color:var(--gold);text-indent:.44em;opacity:0;animation:ldFade 1s ease .15s forwards}
/* ロゴは brightness(0) invert で白抜き。filter を animation で上書きしないよう
   専用キーフレーム（opacity/transformのみ）を使う。 */
.ld-logo{width:clamp(140px,22vw,176px);height:auto;object-fit:contain;filter:brightness(0) invert(.92);opacity:0;animation:ldLogoRise 1.15s cubic-bezier(.22,.61,.36,1) .28s forwards}
.ld-line{width:130px;height:1px;margin-top:4px;background:rgba(236,229,215,.14);position:relative;overflow:hidden}
.ld-line::after{content:"";position:absolute;top:0;left:0;height:100%;width:45%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:ldSweep 1.25s ease-in-out infinite}
@keyframes ldFade{to{opacity:1}}
@keyframes ldLogoRise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
@keyframes ldSweep{0%{transform:translateX(-120%)}100%{transform:translateX(310%)}}
@media(prefers-reduced-motion:reduce){.ld-eyebrow,.ld-logo{animation:none;opacity:1}.ld-line::after{animation:none;transform:translateX(120%)}}

/* ===== 内層ページ・ヒーロー見出しの登場アニメ ===== */
.phero .inner>*{opacity:0;animation:phRise 1.05s cubic-bezier(.22,.61,.36,1) forwards}
.phero .inner .eyebrow{animation-delay:.15s}
.phero .inner h1{animation-delay:.3s}
.phero .inner .jp{animation-delay:.52s}
.phero .inner .crumb{animation-delay:.72s}
@keyframes phRise{0%{opacity:0;transform:translateY(22px);filter:blur(7px)}100%{opacity:1;transform:none;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.phero .inner>*{animation:none;opacity:1}}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

/* ===== Scroll-snap full sections ===== */
/* mandatory だとビューポートより高いパネル（FAQ等）で下端に届かず破綻するため proximity に */
.deck{height:100vh;overflow-y:scroll;scroll-snap-type:y proximity;scroll-behavior:smooth}
.deck::-webkit-scrollbar{display:none}
.deck{scrollbar-width:none}
.panel{min-height:100vh;scroll-snap-align:start;position:relative;display:flex;align-items:center;overflow:hidden}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(28px,6vw,90px)}

/* ===== Fixed UI ===== */
.fixed-ui{position:fixed;inset:0;z-index:40;pointer-events:none}
.fixed-ui a,.fixed-ui button{pointer-events:auto}
.logo{position:absolute;top:34px;left:clamp(28px,5vw,56px);display:flex;align-items:center;gap:12px}
.logo .kanji{font-family:var(--mincho);font-size:30px;letter-spacing:.14em;color:#fff}
.logo .en{font-family:var(--en);font-size:14px;letter-spacing:.42em;color:var(--muted);padding-left:12px;border-left:1px solid var(--line)}
.social{position:absolute;top:40px;right:clamp(28px,5vw,56px);display:flex;gap:20px;font-size:13px;letter-spacing:.2em;color:var(--muted);font-family:var(--en)}
.social a:hover{color:#fff}

/* right dot nav */
.dots{position:absolute;top:50%;right:clamp(20px,3vw,42px);transform:translateY(-50%);display:flex;flex-direction:column;gap:18px}
.dots a{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--muted);opacity:.7;transition:.25s}
.dots a.active{background:var(--gold);border-color:var(--gold);opacity:1}
.dots a:hover{border-color:#fff}


/* scroll hint（SCROLL文字＋流れるライン。鯛茶STAND風） */
.hint{position:absolute;z-index:3;right:clamp(28px,5vw,58px);bottom:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.hint .lbl{writing-mode:vertical-rl;font-family:var(--en);font-size:11px;letter-spacing:.42em;color:#d8d0c0;text-transform:uppercase}
.hint .line{position:relative;width:1px;height:96px;background:var(--line);overflow:hidden}
.hint .line::after{content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--gold);animation:drop 2.4s ease-in-out infinite}
@keyframes drop{0%{top:-40%}60%,100%{top:100%}}

/* ===== Hero（クロスフェード・スライドショー） =====
   ズームはkeyframesでなくtransformトランジションで行う。
   .show が外れてもscaleが急にリセットされない（カクつき防止） */
.hero .bg{position:absolute;inset:0}
.hero .bg img{position:absolute;inset:0;opacity:0;transform:scale(1.12);transition:opacity 1.8s ease,transform 10s cubic-bezier(.25,.5,.25,1)}
.hero .bg img.show{opacity:1;transform:scale(1)}
/* 写真を活かすため暗幕を軽めに（中心はほぼ素通し・周辺のみ締める）。文字はh1側のシャドーで担保 */
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 92% at 50% 42%,rgba(16,14,12,.06),rgba(16,14,12,.58))}
.hero .inner{position:relative;z-index:2;width:100%;text-align:center}
.hero h1{font-family:var(--en);font-weight:500;text-transform:uppercase;letter-spacing:.14em;line-height:1.08;font-size:clamp(32px,7.4vw,94px);text-shadow:0 1px 3px rgba(0,0,0,.55),0 3px 16px rgba(0,0,0,.6),0 6px 44px rgba(0,0,0,.45)}
.hero .jp{margin-top:26px;font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:.25em;color:#f2ecdf;text-indent:.25em;text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.8),0 4px 18px rgba(0,0,0,.7),0 8px 40px rgba(0,0,0,.5)}
/* ヒーロー・コピーの登場アニメーション（サイト表示時に下からせり上がり） */
.hero h1{opacity:0;animation:heroRise 1.35s cubic-bezier(.22,.61,.36,1) .35s forwards}
.hero .jp{opacity:0;animation:heroRise 1.15s cubic-bezier(.22,.61,.36,1) .95s forwards}
@keyframes heroRise{0%{opacity:0;transform:translateY(32px);filter:blur(8px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.hero h1,.hero .jp{animation:none;opacity:1}}

/* ===== Editorial split ===== */
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.split .photo{position:relative;aspect-ratio:4/5;overflow:hidden}
.split.reverse .photo{order:2}
.split .photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line)}
.eyebrow{font-family:var(--en);letter-spacing:.42em;font-size:13px;color:var(--gold);text-transform:uppercase}
.split h2{font-family:var(--en);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(30px,3.6vw,52px);line-height:1.1;margin:18px 0 6px}
.split .jph{font-family:var(--mincho);font-size:clamp(19px,1.7vw,24px);letter-spacing:.14em;color:#fff;margin-bottom:26px}
.split p{color:var(--muted);line-height:2.05;font-size:15px;max-width:30em}
.split .more{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font-family:var(--en);letter-spacing:.3em;font-size:13px;color:var(--text)}
.split .more::after{content:"";width:44px;height:1px;background:var(--gold)}

/* 末尾セクション（news/faq）を全画面スナップから外し、他セクションに倣った余白で通常フロー化。
   sec-center の中央寄せ＋overflow:hidden＋100vh固定だとアコーディオン展開で内容がクリップ／
   スナップが暴れるため、flow を付けて素直に流す（見出しの中央寄せは .sec-center .head で維持） */
.panel.flow{display:block;min-height:auto;overflow:visible;scroll-snap-align:none;padding:clamp(96px,12vw,160px) 0}

/* ===== Section heading (centered) ===== */
.sec-center{flex-direction:column;justify-content:center}
.sec-center .head{text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.sec-center .head .eyebrow{display:block}
.sec-center .head h2{font-family:var(--en);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(32px,4.4vw,64px);margin-top:14px}
.sec-center .head .jp{margin-top:12px;font-size:16px;letter-spacing:.3em;color:var(--muted)}

/* menu list */
.menu-list{max-width:760px;margin:0 auto;width:100%}
.menu-list li{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.menu-list .nm{font-family:var(--mincho);font-size:19px;letter-spacing:.04em}
.menu-list .nm small{display:block;font-family:var(--en);font-size:11px;letter-spacing:.24em;color:var(--faint);margin-top:4px;text-transform:uppercase}
.menu-list .leader{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.menu-list .pr{font-family:var(--en);font-size:22px;color:var(--gold);letter-spacing:.04em}
.menu-foot{text-align:center;margin-top:38px}
.btn{display:inline-block;font-family:var(--en);letter-spacing:.3em;font-size:13px;text-transform:uppercase;color:var(--text);border:1px solid var(--line);padding:16px 40px;transition:.25s}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#171310}

/* TOPのMenuセクション：次のStoresとの間に10%の余白 */
#menu{margin-bottom:10%}

/* ===== Stores ===== */
/* カード内容が長く100vh一杯になり、他セクションのような中央寄せの余白が出ないため上下に明示パディング */
#stores{padding:clamp(64px,9vw,120px) 0}
.stores .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.store{position:relative;text-align:center}
.store .ph{aspect-ratio:16/11;overflow:hidden;position:relative}
.store .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,14,12,.6),transparent 60%)}
.store .tag{font-family:var(--en);letter-spacing:.34em;font-size:12px;color:var(--gold);margin:22px 0 8px;text-transform:uppercase}
.store h3{font-family:var(--mincho);font-size:24px;letter-spacing:.08em;margin-bottom:14px}
.store dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:13.5px;color:#d1c3ac;text-align:left}
.store dt{color:var(--text);font-family:var(--en);letter-spacing:.16em;font-size:12px}

/* ===== Hero中のUI（ロゴ＋ハンバーガー）。ヒーローを抜けると通常ヘッダーに交代 ===== */
.hero-ui{position:fixed;top:0;left:0;right:0;z-index:65;display:flex;justify-content:space-between;align-items:center;height:72px;padding:0 clamp(24px,5vw,48px);transition:opacity .45s ease;pointer-events:none}
/* summary（地球儀の開閉トリガー）は a/button ではないため、これも明示的に有効化しないと
   PC幅でヒーロー表示中は常にクリック不可になってしまう不具合があった */
.hero-ui a,.hero-ui button,.hero-ui summary{pointer-events:auto}
.hero-ui.off{opacity:0}
.hero-ui.off a,.hero-ui.off button,.hero-ui.off summary{pointer-events:none}
.hui-right{display:flex;align-items:center;gap:6px}
.hero-ui .langsel summary{color:#ece5d7}
.hero-ui .langsel summary:hover,.hero-ui .langsel[open] summary{color:var(--gold)}
.burger{appearance:none;background:none;border:0;cursor:pointer;width:46px;height:46px;position:relative;padding:0}
.burger span{position:absolute;left:8px;right:8px;height:1px;background:#ece5d7;transition:transform .35s ease,opacity .35s ease}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:30px}
.burger:hover span{background:var(--gold)}

/* フルスクリーンメニュー */
.menu-ov{position:fixed;inset:0;z-index:90;background:rgba(13,11,9,.96);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease}
.menu-ov.open{opacity:1;visibility:visible}
.menu-ov .close{position:absolute;top:14px;right:clamp(24px,5vw,48px);width:46px;height:46px;appearance:none;background:none;border:0;cursor:pointer}
.menu-ov .close::before,.menu-ov .close::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:1px;background:#ece5d7;transition:background .3s}
.menu-ov .close::before{transform:rotate(45deg)}
.menu-ov .close::after{transform:rotate(-45deg)}
.menu-ov .close:hover::before,.menu-ov .close:hover::after{background:var(--gold)}
.menu-ov nav{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,22px);text-align:center}
.menu-ov nav a{font-family:var(--en);font-size:clamp(20px,2.6vw,28px);letter-spacing:.22em;text-transform:uppercase;color:var(--text);opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease,color .3s}
.menu-ov nav a .jp{display:block;font-family:var(--mincho);font-size:11px;letter-spacing:.3em;color:var(--muted);margin-top:4px}
.menu-ov nav a:hover{color:var(--gold)}
.menu-ov.open nav a{opacity:1;transform:none}
.menu-ov.open nav a:nth-child(1){transition-delay:.08s}.menu-ov.open nav a:nth-child(2){transition-delay:.14s}.menu-ov.open nav a:nth-child(3){transition-delay:.2s}.menu-ov.open nav a:nth-child(4){transition-delay:.26s}.menu-ov.open nav a:nth-child(5){transition-delay:.32s}.menu-ov.open nav a:nth-child(6){transition-delay:.38s}.menu-ov.open nav a:nth-child(7){transition-delay:.44s}.menu-ov.open nav a:nth-child(8){transition-delay:.5s}
.menu-ov .ov-foot{margin-top:clamp(24px,4vh,40px);display:flex;flex-direction:column;align-items:center;gap:18px}
.menu-ov .ov-foot .lang{display:flex;gap:14px;font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--faint)}
.menu-ov .ov-foot .lang a:hover{color:#fff}
.menu-ov .ov-foot .reserve{font-family:var(--en);letter-spacing:.24em;font-size:12px;text-transform:uppercase;color:#171310;background:var(--gold);padding:13px 34px}
.menu-ov .ov-foot .reserve:hover{background:#d8bd7e}

/* ===== Instagram ===== */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig-grid a{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.ig-grid img{transition:transform .6s ease,opacity .3s ease}
.ig-grid a:hover img{transform:scale(1.06);opacity:.85}
.ig-grid a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line)}
.ig-foot{text-align:center;margin-top:34px}
.ig-foot .handle{display:block;font-family:var(--en);letter-spacing:.24em;font-size:13px;color:var(--muted);margin-bottom:18px}

/* ===== Info / footer ===== */
.info{background:var(--bg2)}
/* #infoはドロップダウン（Tel/Googleマップ）がパネル外へ出るのでクリップしない */
.panel.info{overflow:visible}
.info .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.info .mapbox{aspect-ratio:16/10;background:repeating-linear-gradient(45deg,#1c1814,#1c1814 12px,#211c17 12px,#211c17 24px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--faint);font-family:var(--en);letter-spacing:.2em;font-size:13px}
.info h2{font-family:var(--en);text-transform:uppercase;letter-spacing:.12em;font-size:clamp(30px,3.6vw,52px);font-weight:500;margin-bottom:6px}
.info .jph{font-size:20px;letter-spacing:.14em;margin-bottom:26px}
.info .rows{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:22px}
.info .rows dt{font-family:var(--en);letter-spacing:.18em;font-size:12px;color:var(--text)}
.foot-bar{position:absolute;left:0;right:0;bottom:0;padding:22px clamp(28px,5vw,56px);display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.2em;color:var(--faint);border-top:1px solid var(--line)}
.foot-bar .lang a{margin-left:14px;color:var(--muted)}
.foot-bar .lang a:hover{color:#fff}

/* ===== Mobile ===== */
@media(max-width:900px){
  .ig-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .deck{scroll-snap-type:none;height:auto;overflow:visible}
  .panel{min-height:auto;padding:110px 0 90px}
  .hero{min-height:100vh;padding:0}
  .dots,.hint{display:none}
  .split .wrap,.stores .wrap,.info .wrap{grid-template-columns:1fr;gap:34px}
  .split.reverse .photo{order:0}
  .split .photo{aspect-ratio:4/3}
  /* SP/TB：h1(英語)・jp(日本語)・左右余白をすべて vw 基準にして、画面幅が変わっても
     常に同じ比率で表示。h1は本文ボックスからはみ出さない字間にして中央寄せを保つ */
  .hero .wrap{padding-left:2.5vw;padding-right:2.5vw}
  .hero h1{font-size:13.5vw;letter-spacing:.12em}
  /* SP：文字が小さい(約21px)ので、PC用の重い4層シャドウ(最大40pxブラー)だと
     影が文字の約2倍に広がり「滲んで」見える → 文字サイズに合わせた軽い2層に差し替え */
  .hero .jp{margin-top:3.4vw;font-size:5.6vw;text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 7px rgba(0,0,0,.55)}
  .social{gap:14px;top:44px}
  .logo .kanji{font-size:24px}
  /* infoパネルは flex(row) のまま。foot-bar が static に戻ると wrap と横並びになり崩れる
     → 縦積みにする */
  .info{flex-direction:column;align-items:stretch}
  .foot-bar{position:static;flex-direction:column;gap:10px;margin-top:40px}
  /* TB/SP：TOPは上部にハンバーガー＋地球儀を常時表示（ヒーロー中もヒーロー以下も）。
     通常ヘッダーとの入れ替えはやめ、hero-uiを固定バーとして残す */
  .home .site-header{display:none}
  .home .hero-ui{opacity:1;background:linear-gradient(180deg,rgba(16,14,12,.92),rgba(16,14,12,.45) 60%,transparent);backdrop-filter:blur(2px)}
  .home .hero-ui.off{opacity:1}
  .home .hero-ui.off a,.home .hero-ui.off button,.home .hero-ui .langsel summary{pointer-events:auto}
  .hero-ui .langsel{display:block}
}