:root{
  --kinari:#F4EFE6; --washi:#E9E2D6; --sumi:#2B2622; --enji:#9E3B3B; --kincha:#A8875A;
  --col: 560px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--sumi);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif; font-size:16px; line-height:1.85;
  background:#DDD9D2; background-image:radial-gradient(ellipse at 50% 30%, #ECE8E1 0%, #D6D1C9 70%); background-attachment:fixed;
}
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(43,38,34,.92); color:var(--kinari); 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:var(--kinari); box-shadow:0 0 60px rgba(43,38,34,.14)}
.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; z-index:3}
.hotspot:focus-visible{outline:3px solid var(--enji); outline-offset:2px}

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

/* ===== FV の動き：光の呼吸・光の移ろい・結晶のきらめき・舞い降りる雪の結晶（画像はゆがめない） ===== */
.fv-motion > img{animation:fv-in 2.4s cubic-bezier(.2,.6,.2,1) both}
@keyframes fv-in{from{opacity:0; filter:brightness(1.08)} to{opacity:1; filter:none}}
.beam{
  position:absolute; right:-18%; top:-12%; width:70%; height:80%; pointer-events:none; mix-blend-mode:screen; z-index:1;
  background:linear-gradient(200deg, rgba(255,238,206,.5) 0%, rgba(255,230,190,.15) 40%, transparent 72%);
  transform-origin:100% 0; filter:blur(12px);
  animation:beam-breathe 11s ease-in-out infinite, beam-turn 26s ease-in-out infinite;
}
@keyframes beam-breathe{0%,100%{opacity:.3} 50%{opacity:.7}}
@keyframes beam-turn{0%,100%{rotate:-8deg} 50%{rotate:-6.8deg}}
.halo{position:absolute; left:8%; top:33%; width:84%; height:30%; border-radius:50%; pointer-events:none; mix-blend-mode:soft-light; z-index:1;
  background:radial-gradient(closest-side, rgba(255,246,230,.9), transparent); filter:blur(16px);
  animation:beam-breathe 11s ease-in-out infinite}
.spark{position:absolute; width:1.1%; aspect-ratio:1; pointer-events:none; mix-blend-mode:screen; opacity:0; z-index:2;
  background:radial-gradient(closest-side, rgba(255,255,255,1), rgba(255,250,235,.5) 45%, transparent);
  animation:spark ease-in-out infinite}
.spark::before,.spark::after{content:""; position:absolute; left:50%; top:50%; width:280%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); transform:translate(-50%,-50%)}
.spark::after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes spark{0%,100%{opacity:0; transform:scale(.4)} 8%{opacity:1; transform:scale(1)} 18%{opacity:0; transform:scale(.5)}}
.flake{position:absolute; top:0; pointer-events:none; opacity:0; z-index:2; animation:fall linear infinite; will-change:transform,opacity}
.flake i{display:block; width:100%; height:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg stroke='white' stroke-width='1.1' stroke-linecap='round' fill='none'%3E%3Cg id='a'%3E%3Cpath d='M0 0V-10.5M0 -6.5L-2.6 -9M0 -6.5L2.6 -9M0 -3.4L-1.8 -5.2M0 -3.4L1.8 -5.2'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60)'/%3E%3Cuse href='%23a' transform='rotate(120)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(240)'/%3E%3Cuse href='%23a' transform='rotate(300)'/%3E%3C/g%3E%3Ccircle r='1.3' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(110,104,96,.45));
  animation:spin linear infinite, twinkle ease-in-out infinite}
@keyframes fall{
  0%{transform:translate(0,var(--y0)); opacity:0}
  12%{opacity:var(--op)}
  50%{transform:translate(var(--sway),calc((var(--y0) + var(--y1)) / 2))}
  80%{opacity:var(--op)}
  100%{transform:translate(0,var(--y1)); opacity:0}
}
@keyframes spin{to{rotate:360deg}}
@keyframes twinkle{0%,100%{opacity:.75; scale:1} 50%{opacity:1; scale:1.12}}

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

/* お取り寄せ（デモ） */
.order{padding:64px 24px 72px; text-align:center; background:var(--washi)}
.order-en{margin:0; font-family:"Cormorant Garamond",serif; letter-spacing:.32em; color:var(--kincha); font-size:14px}
.order h2{margin:8px 0 16px; font-family:"Shippori Mincho",serif; font-weight:400; font-size:28px; letter-spacing:.12em}
.order-lead{margin:0 0 24px; color:rgba(43,38,34,.8)}
.order-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 32px;
  background:var(--sumi); color:var(--kinari); text-decoration:none; letter-spacing:.08em; font-size:16px;
}
.order-btn:focus-visible{outline:3px solid var(--enji); outline-offset:3px}
.order-note{margin:20px 0 0; color:rgba(43,38,34,.7); font-size:14px}

.foot{max-width:var(--col); margin:0 auto; background:var(--sumi); color:var(--kinari); text-align:center; padding:44px 24px 120px; font-size:14px}
.foot p{margin:2px 0}
.foot-sub{font-family:"Shippori Mincho",serif; letter-spacing:.3em; font-size:12px}
.foot-logo{font-family:"Shippori Mincho",serif; letter-spacing:.6em; font-size:26px; padding-left:.6em}
.foot-en{font-family:"Cormorant Garamond",serif; letter-spacing:.4em; font-size:12px; color:var(--kincha)}
.foot-note{margin-top:22px!important; color:rgba(244,239,230,.7); 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(--sumi); color:var(--kinari); text-decoration:none; letter-spacing:.08em; font-size:16px;
  box-shadow:0 8px 24px rgba(43,38,34,.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(--enji); outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .fv-motion > img,.beam,.halo,.spark,.flake,.flake i{animation:none!important}
  .spark,.flake{display: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; align-items:center; text-align:center; position:fixed; top:0; bottom:0; width:calc((100vw - var(--col))/2); padding:0 40px; color:var(--sumi); z-index:5}
  .side-l{left:0}
  .side-r{right:0}
  .side-sub{margin:0; font-family:"Shippori Mincho",serif; letter-spacing:.3em; font-size:13px}
  .side-logo{margin:4px 0 24px; font-family:"Shippori Mincho",serif; letter-spacing:.6em; font-size:40px; padding-left:.6em}
  .side-copy{margin:0; font-family:"Shippori Mincho",serif; font-size:18px; line-height:2.1; letter-spacing:.16em}
  .side-en{margin:0 0 12px; font-family:"Cormorant Garamond",serif; letter-spacing:.36em; font-size:13px; color:var(--kincha)}
  .side-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 28px; background:var(--sumi); color:var(--kinari); text-decoration:none; letter-spacing:.08em; box-shadow:0 8px 24px rgba(43,38,34,.18)}
  .side-btn:focus-visible{outline:3px solid var(--enji); outline-offset:3px}
  .side-info{margin:16px 0 0; font-size:14px; line-height:1.8; color:rgba(43,38,34,.75)}
  .float-cta{display:none}
}