:root{
  --navy:#1E3448; --ink:#4A5A68; --sea:#6E9BB8; --sky:#EAF1F6; --sun:#E8743B;
  --dusk1:#AEBBD3; --dusk2:#F3D3C3;
  --col: 560px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--navy);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif; font-size:16px; line-height:1.85;
  background:linear-gradient(180deg,var(--dusk1) 0%,#cfc6d6 45%,var(--dusk2) 100%) fixed;
  background-color:#d9d3df;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{word-break:auto-phrase;text-wrap:balance;line-break:strict}

.sample-bar{
  position:sticky; top:0; z-index:20;
  background:rgba(30,52,72,.92); color:#fff; text-align:center;
  font-size:12px; letter-spacing:.06em; line-height:1.4; padding:6px 12px;
}

.lp{max-width:var(--col); margin:0 auto; background:#fff; box-shadow:0 0 60px rgba(30,52,72,.18)}
.sec{margin:0}
.frame{position:relative; overflow:hidden; aspect-ratio:1024/1792}
.frame img{width:100%; height:100%; object-fit:cover}
.hotspot{position:absolute; display:block; border-radius:2px}
.hotspot:focus-visible{outline:3px solid var(--sun); outline-offset:2px}

/* 読み上げ用の本文（見た目は画像が担う） */
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* FV：読み込み時にゆっくり寄りが引く（終わりは等倍なのでボタン位置はずれない） */
.sec-fv .frame img{animation:settle 2.6s cubic-bezier(.2,.6,.2,1) both}
@keyframes settle{from{transform:scale(1.06);opacity:.4}to{transform:scale(1);opacity:1}}

/* スクロールで出る */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease}
.reveal.is-in{opacity:1; transform:none}

/* 予約（デモ） */
.reserve{padding:64px 24px 72px; text-align:center; background:var(--sky)}
.reserve-en{margin:0; font-family:"Cormorant Garamond",serif; letter-spacing:.32em; color:var(--sea); font-size:14px}
.reserve h2{margin:8px 0 16px; font-family:"Shippori Mincho",serif; font-weight:400; font-size:28px; letter-spacing:.08em}
.reserve-lead{margin:0 0 24px; color:var(--ink)}
.reserve-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 28px;
  background:var(--sun); color:#fff; text-decoration:none; letter-spacing:.06em; font-size:16px;
}
.reserve-btn:focus-visible{outline:3px solid var(--navy); outline-offset:3px}
.reserve-note{margin:20px 0 0; color:var(--ink); font-size:14px}

.foot{max-width:var(--col); margin:0 auto; background:var(--navy); color:#fff; text-align:center; padding:40px 24px 120px; font-size:14px}
.foot p{margin:4px 0}
.foot-logo{font-family:"Cormorant Garamond",serif; letter-spacing:.4em; font-size:22px}
.foot-note{margin-top:20px!important; color:#c7d2dc; font-size:13px; line-height:1.8}

/* 追従ボタン（FVを過ぎてから出る） */
.float-cta{
  position:fixed; z-index:30; left:50%; bottom:16px; transform:translate(-50%,140%);
  width:min(calc(100% - 32px), 520px); min-height:56px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--sun); color:#fff; text-decoration:none; letter-spacing:.08em; font-size:16px;
  box-shadow:0 8px 24px rgba(30,52,72,.25); transition:transform .5s ease, opacity .5s ease; opacity:0; pointer-events:none;
}
.float-cta.is-on{transform:translate(-50%,0); opacity:1; pointer-events:auto}
.float-cta:focus-visible{outline:3px solid var(--navy); outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sec-fv .frame img{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .float-cta{transition:none}
}

/* PC：左右の余白に店のロゴと予約ボタン */
.side{display:none}
@media (min-width:1180px){
  .side{display:flex; flex-direction:column; justify-content:center; position:fixed; top:0; bottom:0; width:calc((100vw - var(--col))/2); padding:0 40px; color:var(--navy); z-index:5}
  .side-l{left:0; align-items:center; text-align:center}
  .side-r{right:0; align-items:center; text-align:center}
  .side-en{margin:0 0 10px; font-family:"Cormorant Garamond",serif; letter-spacing:.36em; font-size:13px; color:var(--navy); opacity:.75}
  .side-logo{margin:0 0 20px; font-family:"Cormorant Garamond",serif; letter-spacing:.32em; font-size:30px}
  .side-copy{margin:0; font-family:"Shippori Mincho",serif; font-size:16px; line-height:2; letter-spacing:.08em}
  .side-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 28px; background:var(--sun); color:#fff; text-decoration:none; letter-spacing:.08em; box-shadow:0 8px 24px rgba(30,52,72,.2)}
  .side-btn:focus-visible{outline:3px solid var(--navy); outline-offset:3px}
  .side-info{margin:16px 0 0; font-size:14px; line-height:1.8}
  .float-cta{display:none}
}