@charset "UTF-8";
/* ==========================================================================
   bar 501 susukino（札幌・すすきの）Bar＆シーシャ LP
   スマートフォン優先（モバイルファースト）。PC 向け調整はファイル末尾の @media。
   色・書体を変えるときは、下の :root だけを触ってください。
   ========================================================================== */

:root{
  /* 地色（暖かい黒） */
  --ground:#151413;
  --tint:#1C1A18;
  --surface:#221F1C;

  /* 文字 */
  --ink:#EDE6DA;
  --ink-2:#B9AF9F;
  --ink-3:#8A8173;
  --line:rgba(var(--ink-rgb),.12);

  /* 金（照明とメニュー表の色）。線・英字・強調語だけに使う */
  --gold:#C9A46A;
  --gold-soft:rgba(201,164,106,.14);

  /* 電話ボタン */
  --cta:#C9A46A;
  --cta-ink:#151413;
  --cta-hover:#D8B57E;

  /* 写真の被せ・文字の影に使う色（数字3つ＝RGB） */
  --shade-rgb:21,20,19;
  --ink-rgb:237,230,218;
  --gold-rgb:201,164,106;
  --catch-shadow:0 2px 24px rgba(0,0,0,.5);
  --map-filter:grayscale(.5) invert(.9) hue-rotate(180deg) contrast(.9);

  /* 書体 */
  --font-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --font-en:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-jp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;

  /* 余白 */
  --sec-pad:96px;
  --gutter:22px;

  /* 動き */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}


/* 昼（DAY）の色。<html data-mode="day"> のときに上の値を置き換えます */
[data-mode="day"]{
  --ground:#F3EDE4;
  --tint:#EAE2D6;
  --surface:#FBF8F3;
  --ink:#2A2520;
  --ink-2:#5B5248;
  --ink-3:#6F665A;
  --line:rgba(42,37,32,.14);
  --gold:#8C6A35;
  --gold-soft:rgba(140,106,53,.12);
  --cta:#8C6A35;
  --cta-ink:#FBF8F3;
  --cta-hover:#7A5B2B;
  --shade-rgb:243,237,228;
  --ink-rgb:42,37,32;
  --gold-rgb:140,106,53;
  --catch-shadow:0 1px 18px rgba(243,237,228,.9);
  --map-filter:none;
}

/* 昼だけ・夜だけの部分 */
[data-mode="day"] [data-show="night"],
[data-mode="night"] [data-show="day"]{display:none !important}

/* --- 共通 ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ground)}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-jp);font-size:15px;line-height:2.1;letter-spacing:.04em;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:600;line-height:1.6;text-wrap:balance;word-break:auto-phrase}
a{color:inherit}
small{font-size:.82em;color:var(--ink-3)}
.en{font-family:var(--font-en);font-style:italic;font-weight:500;letter-spacing:.06em}
.inner{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
.sp-br{display:inline}
section[id]{scroll-margin-top:72px}

a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;background:var(--ink);color:var(--ground);text-decoration:none}
.skip:focus{top:12px}

/* 写真：暗い被せと、下からのグラデーション */
.photo{position:relative;overflow:hidden;background:var(--surface)}
.photo picture{display:block;height:100%}
.photo img{width:100%;height:100%;object-fit:cover}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--shade-rgb),0) 55%,rgba(var(--shade-rgb),.45) 100%),rgba(var(--shade-rgb),.12);pointer-events:none}

/* --- ローディング（html.js のときだけ） --------------------------------- */
.loader{display:none}
.js .loader{
  display:grid;place-items:center;position:fixed;inset:0;z-index:300;background:var(--ground);
  transition:opacity 1s var(--ease) .2s,visibility 0s linear 1.2s;
}
.loader-logo{width:120px;height:120px;opacity:0;filter:blur(10px);transform:scale(.92) rotate(-20deg)}
.js .loader .loader-logo{animation:loaderLogo 1.4s var(--ease-out) .1s forwards}
@keyframes loaderLogo{to{opacity:1;filter:blur(0);transform:none}}
.is-loaded .loader{opacity:0;visibility:hidden}

/* --- ヘッダー ------------------------------------------------------------ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 var(--gutter);
  background:linear-gradient(180deg,rgba(var(--shade-rgb),.75),rgba(var(--shade-rgb),0));
  transition:background-color .6s var(--ease);
}
.site-header.is-scrolled{background-color:rgba(var(--shade-rgb),.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.brand img{width:34px;height:34px}
.brand-name{font-family:var(--font-display);font-size:16px;letter-spacing:.08em;white-space:nowrap}
.brand-name i{font-family:var(--font-en);color:var(--gold)}
.gnav{display:none}

/* 右上の丸い電話ボタン（外周の文字がゆっくり回る） */
.callring{
  position:fixed;right:14px;bottom:18px;z-index:110;
  width:88px;height:88px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(var(--shade-rgb),.72);color:var(--ink);text-decoration:none;
  border:1px solid rgba(var(--gold-rgb),.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.callring:hover{background:var(--gold);color:var(--cta-ink)}
.callring-text{position:absolute;inset:0;width:100%;height:100%;fill:var(--gold);font-family:var(--font-en);font-size:9.5px;letter-spacing:.18em;animation:spin 20s linear infinite}
.callring:hover .callring-text{fill:var(--cta-ink)}
.callring-main{font-family:var(--font-display);font-size:17px;letter-spacing:.14em;line-height:1}
.callring-sub{font-size:11px;letter-spacing:.06em;line-height:1.4;margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- 01 ファーストビュー ------------------------------------------------- */
.fv{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.fv-slides,.fv-slide{position:absolute;inset:0}
.fv-slide{opacity:0;transition:opacity 2.4s var(--ease)}
.fv-slide.is-active{opacity:1}
.fv-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.08);transition:transform 9s linear}
.fv-slide.is-active img{transform:scale(1)}
.fv-slide--left img{object-position:30% 60%}   /* スマホで横長写真を縦に切るとき、人物が入るよう左寄りに */
.fv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--shade-rgb),.35) 0%,rgba(var(--shade-rgb),.05) 35%,rgba(var(--shade-rgb),.75) 78%,var(--ground) 100%);pointer-events:none}

/* 煙のゆらぎ（ぼかした光の塊が上へ漂う） */
.smoke{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.smoke span{
  position:absolute;bottom:-30%;width:70vmax;height:70vmax;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--ink-rgb),.22),rgba(var(--ink-rgb),0));
  filter:blur(30px);opacity:0;animation:smoke 22s var(--ease) infinite;
}
.smoke span:nth-child(1){left:-25%;animation-delay:0s}
.smoke span:nth-child(2){left:20%;animation-delay:6s;animation-duration:26s}
.smoke span:nth-child(3){left:50%;animation-delay:11s;animation-duration:20s}
.smoke span:nth-child(4){left:-5%;animation-delay:16s;animation-duration:24s}
@keyframes smoke{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.7)}
  25%{opacity:.75}
  100%{opacity:0;transform:translate3d(8vw,-90vh,0) scale(1.25)}
}

.fv-inner{position:relative;z-index:2;width:100%;max-width:1160px;margin:0 auto;padding:0 var(--gutter) 132px}   /* スマホは右下の電話ボタンに重ならない高さ */
.fv-label{display:flex;align-items:center;gap:12px;font-family:var(--font-en);font-style:italic;font-size:15px;letter-spacing:.12em;color:var(--ink-2);margin-bottom:18px}
.fv-label .en{color:var(--gold);font-size:17px}
.fv-label .sep{width:36px;height:1px;background:rgba(var(--ink-rgb),.4)}
.fv-catch{font-size:30px;line-height:1.6;letter-spacing:.1em;font-weight:600;text-shadow:var(--catch-shadow)}
.fv-catch .ch{display:inline-block}
.fv-h1{margin-top:20px;font-size:14px;font-weight:400;letter-spacing:.12em;color:var(--ink-2)}
.fv-hours{display:flex;gap:28px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);max-width:420px}
.fv-hours dt{font-family:var(--font-en);font-style:italic;font-size:14px;color:var(--gold);letter-spacing:.1em;line-height:1.4}
.fv-hours dd{font-family:var(--font-en);font-size:20px;letter-spacing:.06em;line-height:1.4}

.fv-scroll{position:absolute;left:50%;bottom:18px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;transform:translateX(-50%);text-decoration:none;color:var(--ink-3);font-size:12px;letter-spacing:.3em}
.fv-scroll .bar{position:relative;width:1px;height:44px;background:rgba(var(--ink-rgb),.2);overflow:hidden}
.fv-scroll .bar::after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:var(--gold);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}70%,100%{transform:translateY(300%)}}

/* FV の登場（.is-loaded の後に順番に） */
.js .fv-label,.js .fv-h1,.js .fv-hours,.js .fv-scroll{opacity:0;transform:translateY(14px)}
.js .fv-catch .ch{opacity:0;filter:blur(8px);transform:translateY(.25em)}
.is-loaded .fv-label,.is-loaded .fv-h1,.is-loaded .fv-hours,.is-loaded .fv-scroll{opacity:1;transform:none;transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.is-loaded .fv-label{transition-delay:1.1s}
.is-loaded .fv-catch .ch{opacity:1;filter:blur(0);transform:none;transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(1.3s + var(--i,0) * 60ms)}
.is-loaded .fv-h1{transition-delay:2.6s}
.is-loaded .fv-hours{transition-delay:2.8s}
.is-loaded .fv-scroll{transition-delay:3.2s}

/* --- 流れる文字帯 -------------------------------------------------------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;gap:28px;animation:marquee 40s linear infinite}
.marquee span{font-family:var(--font-display);font-style:italic;font-size:28px;color:var(--ink-2);letter-spacing:.04em}
.marquee i{font-style:normal;color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --- セクション共通 ------------------------------------------------------ */
.sec{position:relative;padding:var(--sec-pad) 0}
.sec--tint{background:var(--tint)}

/* 英字の大見出し（下から持ち上がる） */
.sec-en{overflow:hidden;line-height:1;margin-bottom:18px}
.sec-en span{display:inline-block;font-family:var(--font-display);font-size:56px;line-height:1.05;letter-spacing:.01em;color:var(--ink)}
.sec-title{position:relative;font-size:21px;line-height:1.75;letter-spacing:.08em;padding-left:22px;margin-bottom:36px}
.sec-title::before{content:"";position:absolute;left:0;top:.95em;width:12px;height:1px;background:var(--gold)}
.sec-lead{color:var(--ink-2);margin:-16px 0 36px}
.fine{margin-top:28px;font-size:12px;color:var(--ink-3);line-height:1.8}

/* --- 02 コンセプト ------------------------------------------------------- */
.concept-body{display:grid;gap:44px}
.concept-text p + p{margin-top:1.4em}
.concept-text p{color:var(--ink-2)}
.concept-photo{aspect-ratio:3/4;width:78%;margin-left:auto}

/* --- 03 シーシャ --------------------------------------------------------- */
.shisha-grid{display:grid;gap:40px}
.shisha-photo-a{aspect-ratio:4/5}
.shisha-photo-b{aspect-ratio:3/4;width:64%;margin-left:auto}
.shisha-text .lead{font-size:17px;line-height:2;color:var(--ink);margin-bottom:1.2em}
.shisha-text p{color:var(--ink-2)}
.points{margin-top:28px;border-top:1px solid var(--line)}
.points li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.points .en{color:var(--gold);font-size:18px;min-width:26px}

/* --- 04 メニュー --------------------------------------------------------- */
.menu-grid{display:grid;gap:22px}
.menu-block{padding:26px 22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(var(--ink-rgb),.02),rgba(var(--ink-rgb),0))}
.menu-h{display:flex;flex-direction:column;font-size:15px;letter-spacing:.12em;margin-bottom:12px}
.menu-h .en{font-family:var(--font-display);font-size:26px;color:var(--gold);letter-spacing:.02em;line-height:1.2}
.menu-list > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px dotted var(--line)}
.menu-list dt{color:var(--ink)}
.menu-list dd{font-family:var(--font-en);font-size:20px;letter-spacing:.04em;white-space:nowrap;color:var(--ink)}
.menu-note{margin-top:14px;font-size:13px;line-height:1.95;color:var(--ink-3)}

.cake + .cake{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.cake-name{display:flex;flex-direction:column;font-size:18px;letter-spacing:.1em;margin-bottom:10px}
.cake-name .en{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--gold);letter-spacing:.04em}
.cake p{color:var(--ink-2)}


/* --- 06 FAQ -------------------------------------------------------------- */
.faqlist{border-top:1px solid var(--line)}
.faqlist details{border-bottom:1px solid var(--line)}
.faqlist summary{position:relative;list-style:none;cursor:pointer;padding:20px 40px 20px 34px;font-weight:600;letter-spacing:.06em;line-height:1.8}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::before{content:"Q";position:absolute;left:0;top:16px;font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--gold)}
.faqlist summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:1px;background:var(--ink-2);box-shadow:0 0 0 0 transparent;transition:transform .5s var(--ease)}
.faqlist details:not([open]) summary::after{background:linear-gradient(var(--ink-2),var(--ink-2)) center/1px 14px no-repeat,linear-gradient(var(--ink-2),var(--ink-2)) center/14px 1px no-repeat;height:14px;margin-top:-7px}
.faqlist details[open] summary::after{transform:rotate(180deg)}
.faq-a{padding:0 0 22px 34px;color:var(--ink-2)}

/* --- 07 アクセス --------------------------------------------------------- */
.access-grid{display:grid;gap:36px}
.info > div{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.info > div:first-child{border-top:1px solid var(--line)}
.info dt{font-size:13px;color:var(--gold);letter-spacing:.1em}
.info dd{line-height:1.9}
.info a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:6px;font-family:var(--font-en);font-size:20px;letter-spacing:.08em}
.access-side{display:flex;flex-direction:column;gap:12px}

/* 細い枠線のボタン（hover で金が満ちる） */
.btn-line{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;
  border:1px solid rgba(var(--ink-rgb),.4);color:var(--ink);text-decoration:none;letter-spacing:.1em;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn-line::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:right center;transition:transform .6s var(--ease)}
.btn-line span{position:relative}
.btn-line:hover{color:var(--cta-ink);border-color:var(--gold)}
.btn-line:hover::before{transform:scaleX(1);transform-origin:left center}

.btn-gold{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:68px;padding:10px 28px;background:var(--cta);color:var(--cta-ink);text-decoration:none;transition:background-color .4s var(--ease),transform .4s var(--ease)}
.btn-gold:hover{background:var(--cta-hover);transform:translateY(-2px)}
.btn-gold .btn-main{font-weight:600;letter-spacing:.12em;font-size:16px}
.btn-gold .btn-sub{font-family:var(--font-en);font-size:17px;letter-spacing:.12em;line-height:1.3}

/* --- 08 最終CTA ---------------------------------------------------------- */
.finalcta{position:relative;overflow:hidden;padding:120px 0;text-align:center}
.finalcta-bg{position:absolute;inset:-12% 0;z-index:0}
.finalcta-bg::after{background:rgba(var(--shade-rgb),.72)}
.finalcta .inner{position:relative;z-index:1}
.finalcta .sec-title{padding-left:0;margin-bottom:14px}
.finalcta .sec-title::before{display:none}
.fc-lead{color:var(--ink-2)}
.fc-cta{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:36px auto 0}

/* --- フッター ------------------------------------------------------------ */
.site-footer{padding:64px var(--gutter) 120px;text-align:center;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.ft-logo{width:72px;height:72px;margin:0 auto 14px}
.ft-name{font-family:var(--font-display);font-size:18px;color:var(--ink);letter-spacing:.08em}
.ft-addr{margin-top:4px}
.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;margin:18px 0 8px}
.ft-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-2)}
.ft-nav a:hover{color:var(--gold)}


/* --- 昼／夜の切り替え（左下に追従） -------------------------------------- */
.dn-switch{display:none}
.js .dn-switch{
  position:fixed;left:14px;bottom:36px;z-index:110;display:flex;padding:4px;border-radius:999px;
  background:rgba(var(--shade-rgb),.72);border:1px solid rgba(var(--gold-rgb),.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.dn-knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--gold);transition:transform .8s var(--ease-out),background-color .7s var(--ease)}
[data-mode="night"] .dn-knob{transform:translateX(100%)}
.dn-btn{
  position:relative;z-index:1;flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;
  min-width:84px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:none;cursor:pointer;
  color:var(--ink-2);font-family:var(--font-en);font-style:italic;font-size:15px;letter-spacing:.08em;transition:color .6s var(--ease);
}
.dn-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transition:transform .8s var(--ease-out)}
.dn-btn[aria-pressed="true"]{color:var(--cta-ink)}
.dn-btn[aria-pressed="true"] svg{transform:rotate(360deg)}

/* 切り替えの瞬間（円が広がる。対応していないブラウザは色がゆっくり変わる） */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
.is-switching,.is-switching *{transition:background-color .8s var(--ease),color .8s var(--ease),border-color .8s var(--ease) !important}

/* 昼の最初の画面：文字が読めるよう、下側を明るく */
[data-mode="day"] .fv::after{background:linear-gradient(180deg,rgba(var(--shade-rgb),.45) 0%,rgba(var(--shade-rgb),.15) 30%,rgba(var(--shade-rgb),.85) 64%,var(--ground) 100%)}
[data-mode="day"] .smoke{mix-blend-mode:multiply;opacity:.4}



/* --- 営業時間（カードを押すと昼／夜が切り替わる） -------------------------- */
.hours-grid{display:grid;gap:16px}
.hours-card{
  position:relative;display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;cursor:pointer;
  padding:28px 24px 26px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;
  transition:border-color .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
}
.hours-card:hover{transform:translateY(-3px)}
.hc-en{font-family:var(--font-display);font-size:44px;line-height:1.1;color:var(--ink);margin-bottom:10px}
.hc-en small{display:block;margin-top:6px;font-family:var(--font-en);font-style:italic;font-size:15px;color:var(--gold);letter-spacing:.12em}
.hc-row{display:flex;align-items:baseline;gap:18px}
.hc-day{min-width:3.6em;font-size:14px;color:var(--ink-2)}
.hc-time{font-family:var(--font-en);font-size:32px;letter-spacing:.04em;line-height:1.35}
.hc-note{margin-top:6px;font-size:13px;line-height:1.8;color:var(--ink-3)}
.hc-now{position:absolute;top:20px;right:20px;font-size:11px;letter-spacing:.14em;color:var(--gold);opacity:0;transition:opacity .6s var(--ease)}
[data-mode="day"] .hours-card[data-set-mode="day"],
[data-mode="night"] .hours-card[data-set-mode="night"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
[data-mode="day"] .hours-card[data-set-mode="day"] .hc-now,
[data-mode="night"] .hours-card[data-set-mode="night"] .hc-now{opacity:1}
.hours-fine{margin-top:24px;font-size:13px;line-height:1.9;color:var(--ink-3)}

/* --- メニューの昼夜タブ ----------------------------------------------------- */
.menu-tabs{display:none}
.js .menu-tabs{display:inline-flex;margin-bottom:28px;border:1px solid var(--line)}
.menu-tab{
  display:flex;align-items:baseline;gap:10px;min-height:48px;padding:8px 22px;border:0;background:none;cursor:pointer;
  color:var(--ink-2);font:inherit;font-size:14px;letter-spacing:.08em;transition:background-color .6s var(--ease),color .6s var(--ease);
}
.menu-tab .en{font-size:18px}
.menu-tab[aria-pressed="true"]{background:var(--gold);color:var(--cta-ink)}
.menu-block--feature{border-color:rgba(var(--gold-rgb),.5)}
.menu-grid--common{margin-top:22px}
.menu-list > div{padding:10px 0}
.menu-list dd.dd-text{font-family:var(--font-jp);font-size:14px;line-height:1.6;text-align:right;white-space:normal}

/* --- お客様の声 ---------------------------------------------------------- */
.voice-card{display:grid;gap:32px;padding:36px 24px;border:1px solid var(--line);background:var(--surface)}
.voice-stars{display:flex;gap:6px;margin-bottom:12px}
.voice-stars i{width:24px;height:24px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.voice-card.reveal .voice-stars i{transform:scale(0) rotate(-60deg)}
.voice-card.reveal.is-in .voice-stars i{transform:none;transition:transform .9s var(--ease-out)}
.voice-card.reveal.is-in .voice-stars i:nth-child(2){transition-delay:.12s}
.voice-card.reveal.is-in .voice-stars i:nth-child(3){transition-delay:.24s}
.voice-card.reveal.is-in .voice-stars i:nth-child(4){transition-delay:.36s}
.voice-card.reveal.is-in .voice-stars i:nth-child(5){transition-delay:.48s}
.voice-num .en{font-family:var(--font-display);font-style:normal;font-size:64px;line-height:1}
.voice-num small{margin-left:10px;font-family:var(--font-en);font-size:18px}
.voice-src{margin-top:8px;font-size:13px;color:var(--ink-3)}
.voice-links{display:flex;flex-direction:column;gap:12px}

/* --- コラム -------------------------------------------------------------- */
.col-grid{display:grid;gap:14px}
.col-card{position:relative;display:flex;flex-direction:column;gap:10px;min-height:180px;padding:24px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;overflow:hidden}
.col-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.col-card:hover::before{transform:scaleX(1)}
.col-cat{font-size:15px;color:var(--gold)}
.col-card h3{font-size:16px;line-height:1.8;letter-spacing:.06em}
.col-soon{margin-top:auto;font-size:13px;color:var(--ink-3)}


/* --- サービス（昼夜で2つ目・3つ目が変わる） ------------------------------- */
.svc-grid{display:grid;gap:64px}
.svc{display:flex;flex-direction:column}
.svc-photo{aspect-ratio:4/5;margin-bottom:22px}
.svc-num{display:flex;align-items:baseline;gap:12px;font-family:var(--font-en);font-style:italic;font-size:15px;letter-spacing:.12em;color:var(--gold)}
.svc-num .en{font-family:var(--font-display);font-style:normal;font-size:30px;line-height:1;color:var(--ink)}
.svc h3{margin:6px 0 10px;font-size:20px;letter-spacing:.1em}
.svc > p:not(.svc-num){color:var(--ink-2)}
.svc-banner{
  position:relative;display:flex;align-items:center;gap:14px;min-height:64px;margin-top:22px;padding:12px 18px;
  border:1px solid rgba(var(--gold-rgb),.6);color:var(--ink);text-decoration:none;overflow:hidden;
  transition:color .6s var(--ease),border-color .6s var(--ease);
}
.svc-banner::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease-out)}
.svc-banner > *{position:relative}
.svc-banner .en{font-size:15px;color:var(--gold);transition:color .6s var(--ease)}
.svc-banner-text{flex:1;font-size:14px;letter-spacing:.06em}
.svc-arrow{width:28px;height:1px;background:currentColor;transition:width .6s var(--ease-out)}
.svc-arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.svc-banner:hover{color:var(--cta-ink);border-color:var(--gold)}
.svc-banner:hover::before{transform:scaleX(1);transform-origin:left}
.svc-banner:hover .en{color:var(--cta-ink)}
.svc-banner:hover .svc-arrow{width:40px}

/* --- ケーキ（定番2種＋日替わり） ------------------------------------------ */
.cake-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:64px}
.cake-item .photo{aspect-ratio:2/3}
.cake-item figcaption{display:flex;flex-direction:column;margin-top:10px;font-size:14px;letter-spacing:.08em;line-height:1.6}
.cake-item figcaption .en{font-size:13px;color:var(--gold)}
.cake-item figcaption small{font-size:12px}
.cakes-text{margin-top:44px}


/* --- 特集ページ（coworking.html） ------------------------------------------ */
.sub-hero{position:relative;min-height:72vh;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden}
.sub-hero .photo{position:absolute;inset:0}
.sub-hero .photo::after{background:linear-gradient(180deg,rgba(var(--shade-rgb),.35) 0%,rgba(var(--shade-rgb),.2) 35%,rgba(var(--shade-rgb),.9) 78%,var(--ground) 100%)}
.sub-hero .inner{position:relative;z-index:1;padding-bottom:56px}
.sub-hero h1{font-size:28px;line-height:1.6;letter-spacing:.08em}
.sub-hero .lead{margin-top:14px;color:var(--ink-2)}
.feat-list{display:grid;gap:14px}
.feat{padding:24px;border:1px solid var(--line);background:var(--surface)}
.feat .en{display:block;font-size:16px;color:var(--gold)}
.feat h3{margin:4px 0 6px;font-size:18px;letter-spacing:.08em}
.feat p{color:var(--ink-2);font-size:14px}
.sub-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.sub-photos .photo{aspect-ratio:3/4}
.back-link{display:inline-flex;align-items:center;min-height:44px;margin-top:40px;color:var(--gold);text-underline-offset:6px}

/* --- 地図 ---------------------------------------------------------------- */
.map{position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:var(--map-filter);transition:filter .8s var(--ease)}

/* --- フッターの LINE ------------------------------------------------------ */
.ft-line{max-width:560px;margin:0 auto 40px;padding-bottom:32px;border-bottom:1px solid var(--line);font-size:13px;line-height:2;color:var(--ink-2)}
.ft-line-btn{display:inline-flex;align-items:center;min-height:44px;margin-left:10px;color:var(--gold);text-decoration:underline;text-underline-offset:6px}

/* ==========================================================================
   スクロールで現れる動き（JS が .reveal を付け、画面に入ると .is-in）
   ========================================================================== */
.reveal{opacity:0;filter:blur(6px);transform:translateY(24px);transition:opacity 1.1s var(--ease) var(--d,0ms),filter 1.1s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms)}
.reveal.is-in{opacity:1;filter:blur(0);transform:none}
/* 写真は幕が開くように */
/* 写真は下から幕が上がる（単独の写真も、カードの中の写真も同じ動き） */
.photo.reveal{opacity:1;filter:none;transform:none}
.photo.reveal > picture,.reveal .photo > picture{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease-out) var(--d,0ms)}
.photo.reveal img,.reveal .photo img{transform:scale(1.18);transition:transform 1.8s var(--ease-out) var(--d,0ms)}
.photo.reveal.is-in > picture,.reveal.is-in .photo > picture{clip-path:inset(0 0 0 0)}
.photo.reveal.is-in img,.reveal.is-in .photo img{transform:scale(1)}
/* 英字の大見出しは下から持ち上がる */
.sec-en.reveal{opacity:1;filter:none;transform:none}
.sec-en.reveal span{transform:translateY(105%);transition:transform 1.2s var(--ease-out) var(--d,0ms)}
.sec-en.reveal.is-in span{transform:none}
/* 昼／夜を切り替えたとき、見えている要素を同じ動きでもう一度（JS が .replay を付ける） */
.replay{animation:fadeUp 1.1s var(--ease) var(--d,0ms) both}
.photo.replay > picture,.replay .photo > picture{animation:curtainUp 1.4s var(--ease-out) var(--d,0ms) both}
.photo.replay img,.replay .photo img{animation:zoomOut 1.8s var(--ease-out) var(--d,0ms) both}
.sec-en.replay{animation:none}
.sec-en.replay span{animation:enUp 1.2s var(--ease-out) var(--d,0ms) both}
@keyframes fadeUp{from{opacity:0;filter:blur(6px);transform:translateY(24px)}}
@keyframes curtainUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes zoomOut{from{transform:scale(1.18)}}
@keyframes enUp{from{transform:translateY(105%)}}

/* 視差（JS が --py を更新） */
[data-parallax] img{translate:0 var(--py,0)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .loader{display:none}
  .smoke,.fv-scroll .bar::after{display:none}
  .marquee-track,.callring-text{animation:none}
  .fv-slide img{transform:none;transition:none}
  .js .fv-label,.js .fv-h1,.js .fv-hours,.js .fv-scroll,.js .fv-catch .ch{opacity:1;filter:none;transform:none}
  .reveal,.photo.reveal,.sec-en.reveal span,.photo.reveal img,.photo.reveal > picture,.reveal .photo > picture,.reveal .photo img{opacity:1;filter:none;transform:none;clip-path:none;transition:none}
  .replay,.replay .photo > picture,.photo.replay > picture,.replay .photo img,.sec-en.replay span{animation:none}
  [data-parallax] img{translate:none}
}

/* ==========================================================================
   タブレット以上
   ========================================================================== */
@media (min-width: 720px){
  :root{--sec-pad:128px;--gutter:40px}
  .sp-br{display:none}
  .sec-en span{font-size:88px}
  .sec-title{font-size:26px}
  .fv-catch{font-size:42px}
  .menu-grid{grid-template-columns:1fr 1fr}
  .access-grid{grid-template-columns:3fr 2fr;align-items:start}
  .fc-cta{flex-direction:row;max-width:none;justify-content:center}
  .fc-cta > a{min-width:280px}
  .col-grid{grid-template-columns:1fr 1fr}
  .hours-grid{grid-template-columns:1fr 1fr}
  .feat-list{grid-template-columns:1fr 1fr}
  .sub-photos{grid-template-columns:repeat(3,1fr)}
  .sub-hero h1{font-size:40px}
}

/* ==========================================================================
   PC
   ========================================================================== */
@media (min-width: 960px){
  :root{--sec-pad:160px}
  body{font-size:16px}
  .site-header{height:84px;padding:0 48px}
  .brand img{width:40px;height:40px}
  .brand-name{font-size:18px}
  .gnav{display:flex;gap:34px;margin-right:140px}
  .gnav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-en);font-style:italic;font-size:17px;letter-spacing:.1em;color:var(--ink-2);text-decoration:none;transition:color .4s var(--ease)}
  .gnav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
  .gnav a:hover{color:var(--ink)}
  .gnav a:hover::after{transform:scaleX(1);transform-origin:left}

  .callring{top:18px;bottom:auto;right:36px;width:112px;height:112px}
  .callring-main{font-size:21px}
  .callring-sub{font-size:11px}

  .fv-inner{padding-bottom:120px}
  .fv-catch{font-size:56px;line-height:1.55}
  .fv-h1{font-size:15px}

  .sec-en span{font-size:120px}
  .sec-title{font-size:30px;margin-bottom:56px}

  .concept-body{grid-template-columns:7fr 5fr;gap:80px;align-items:center}
  .concept-text{font-size:17px;line-height:2.3}
  .concept-photo{width:100%}

  .shisha-grid{grid-template-columns:5fr 6fr;grid-template-rows:auto auto;gap:48px 80px;align-items:start}
  .shisha-photo-a{grid-row:1 / span 2}
  .shisha-text{padding-top:20px}
  .shisha-photo-b{width:62%;margin-top:0;justify-self:end}

  .menu-grid{gap:20px}
  .menu-grid--night{grid-template-columns:repeat(3,1fr)}
  .menu-list > div{padding:12px 0}
  .voice-card{grid-template-columns:1fr 1fr;align-items:center;gap:56px;padding:56px}
  .col-grid{grid-template-columns:repeat(4,1fr)}
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:40px}
  .hours-grid{gap:24px}
  .hours-card{padding:40px 40px 36px}
  .hc-en{font-size:64px}
  .hc-time{font-size:40px}
  .svc-photo{aspect-ratio:3/4}
  .cake-gallery{grid-template-columns:repeat(4,1fr);gap:20px}
  .cakes-text{display:grid;grid-template-columns:1fr 1fr;gap:56px}
  .cakes-text .cake + .cake{margin-top:0;padding-top:0;border-top:0}
  .js .dn-switch{left:36px;bottom:32px}


  .faqlist{max-width:860px}
  .finalcta{padding:200px 0}
}