:root{
  --sumi:#141312; --black:#0B0A09; --ivory:#EFE8DC; --brass:#B8935A; --brass-l:#D9BC8C; --leather:#6B3E26; --lamp:#E9B872;
  --col: 560px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ivory);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif; font-size:16px; line-height:1.85;
  background:radial-gradient(ellipse at 50% 0%, #2a2219 0%, var(--black) 60%) fixed;
  background-color:var(--black);
}
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(11,10,9,.92); color:var(--brass-l); text-align:center; border-bottom:1px solid rgba(184,147,90,.4);
  font-size:12px; letter-spacing:.06em; line-height:1.4; padding:6px 12px;
}

.lp{max-width:var(--col); margin:0 auto; background:var(--sumi); box-shadow:0 0 80px rgba(0,0,0,.6)}
.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}
.hotspot:focus-visible{outline:3px solid var(--ivory); 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:lamp 3.2s cubic-bezier(.3,.5,.2,1) both}
@keyframes lamp{
  0%{filter:brightness(.15) saturate(.6); transform:scale(1.04)}
  40%{filter:brightness(.55) saturate(.8)}
  100%{filter:brightness(1) saturate(1); transform:scale(1)}
}

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

/* 写真で見積もり（デモ） */
.estimate{padding:64px 24px 72px; text-align:center; background:var(--black); border-top:1px solid rgba(184,147,90,.35)}
.estimate-en{margin:0; font-family:"Cormorant Garamond",serif; letter-spacing:.32em; color:var(--brass-l); font-size:14px}
.estimate h2{margin:8px 0 16px; font-family:"Shippori Mincho",serif; font-weight:400; font-size:28px; letter-spacing:.08em}
.estimate-lead{margin:0 0 24px; color:rgba(239,232,220,.8)}
.estimate-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 32px;
  background:var(--brass); color:var(--sumi); text-decoration:none; letter-spacing:.08em; font-size:16px;
}
.estimate-btn:focus-visible{outline:3px solid var(--ivory); outline-offset:3px}
.estimate-note{margin:20px 0 0; color:rgba(239,232,220,.7); font-size:14px}

.foot{max-width:var(--col); margin:0 auto; background:var(--black); color:var(--ivory); text-align:center; padding:40px 24px 120px; font-size:14px; border-top:1px solid rgba(184,147,90,.35)}
.foot p{margin:4px 0}
.foot-logo{font-family:"Cormorant Garamond",serif; letter-spacing:.5em; font-size:22px; color:var(--brass-l)}
.foot-note{margin-top:20px!important; color:rgba(239,232,220,.65); 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(--brass); color:var(--sumi); text-decoration:none; letter-spacing:.06em; font-size:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.5); 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(--ivory); 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(--ivory); z-index:5; align-items:center; text-align:center}
  .side-l{left:0}
  .side-r{right:0}
  .side-en{margin:0 0 10px; font-family:"Cormorant Garamond",serif; letter-spacing:.36em; font-size:13px; color:var(--brass-l)}
  .side-logo{margin:0 0 24px; font-family:"Cormorant Garamond",serif; letter-spacing:.5em; font-size:34px; padding-left:.5em}
  .side-copy{margin:0; font-family:"Shippori Mincho",serif; font-size:20px; line-height:2; letter-spacing:.14em}
  .side-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 28px; background:var(--brass); color:var(--sumi); text-decoration:none; letter-spacing:.08em; box-shadow:0 8px 28px rgba(0,0,0,.45)}
  .side-btn:focus-visible{outline:3px solid var(--ivory); outline-offset:3px}
  .side-info{margin:16px 0 0; font-size:14px; line-height:1.8; color:rgba(239,232,220,.75)}
  .float-cta{display:none}
}