:root, :root[data-theme="dark"]{
  --room:#0f0d0a;
  --ivory:#f3ead6;
  --ink:#2c2c20;
  --ink-soft:#56563f;
  --gold:#d8bd80;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --latin:"Cormorant Garamond","Times New Roman",serif;
  --grain:linear-gradient(transparent,transparent);
  --bw:300px; --bh:426px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --room:#0f0d0a; --ivory:#f3ead6; --ink:#2c2c20; }
}
html{ scroll-padding-top:env(safe-area-inset-top,0px); background:#0f0d0a; }
html.lock, html.lock body{ overflow:hidden; touch-action:none; }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:#0f0d0a; color:var(--ivory); font-family:var(--mincho); -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

#seq{ position:relative; }
.js #seq{ height:560vh; }
html:not(.js) #seq, html:not(.js) .hero-copy{ display:none; }

/* ===== 舞台（3D） ===== */
#stage{
  position:sticky; top:0; z-index:0; width:100%; height:100vh; height:100svh;
  perspective:900px; -webkit-perspective:900px; perspective-origin:50% 47%;
  background:radial-gradient(ellipse at 50% 45%, #231d15 0%, var(--room) 72%);
  overflow:hidden;   /* 森の層が画面の外へ広がっても、ページが横に動かないように */
}
#rig{ position:absolute; inset:0; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; }
.book{
  position:absolute; left:50%; top:47%;
  width:var(--bw); height:var(--bh);
  margin:calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2);
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
}
.page{
  position:absolute; inset:0; border-radius:2px 6px 6px 2px;
  background:var(--grain), radial-gradient(ellipse at 50% 42%, #fff3cf 0%, #ece3b8 20%, #b9c79d 44%, #6f8c68 72%, #2c4736 100%);
  box-shadow:1px 1px 0 #e9dfc8, 2px 2px 0 #cfc2a3, 3px 3px 0 #e9dfc8, 4px 4px 0 #cfc2a3, 5px 5px 0 #e9dfc8, 10px 16px 34px rgba(0,0,0,.6);
}
.pshade{ position:absolute; inset:0; border-radius:2px 6px 6px 2px; background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 58%); pointer-events:none; }
.lz{ position:absolute; inset:0; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; pointer-events:none; visibility:hidden; }
.lr{ position:absolute; inset:0; transform-origin:50% 100%; }
.lr > svg, .lr > .fx{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; }
.fx > svg, .fog{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mote{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle,rgba(255,238,178,.95) 0%,rgba(255,226,150,.4) 42%,rgba(255,226,150,0) 72%);
  animation:tw var(--d,5s) ease-in-out infinite; animation-delay:var(--dl,0s);
}
@keyframes tw{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }
.bk{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle,rgba(255,238,184,.34) 0%,rgba(255,232,170,.17) 42%,rgba(255,226,150,0) 70%);
}

.cover{ position:absolute; inset:0; transform-origin:0 50%; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transform:translateZ(2px); }
.cf, .cover > .cb{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:2px 6px 6px 2px; }
.cf{
  background:var(--grain), linear-gradient(135deg,#2f3a2c 0%,#1d281f 58%,#141b15 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 6px 12px 30px rgba(0,0,0,.6);
}
.cf::before{ content:""; position:absolute; inset:5.5% 6% 5.5% 12%; border:1px solid rgba(216,189,128,.85); }
.cf::after{ content:""; position:absolute; inset:7.5% 8% 7.5% 14%; border:1px solid rgba(216,189,128,.42); }
.spine{ position:absolute; left:0; top:0; bottom:0; width:9%; background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.08) 72%,rgba(255,255,255,.07)); }
.emb{ position:absolute; left:55%; top:42%; width:62%; transform:translate(-50%,-50%); }
.emb svg{ display:block; width:100%; height:auto; }
.cw{
  position:absolute; left:55%; top:42%; margin:0; transform:translate(-50%,-50%);
  font-family:var(--latin); font-style:italic; font-weight:600; white-space:nowrap;
  font-size:calc(var(--bw) * .085); letter-spacing:.04em;
  background:linear-gradient(180deg,#f6e6b4,#cfb06a 60%,#97793f); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.cshade{ position:absolute; inset:0; background:#000; opacity:0; border-radius:2px 6px 6px 2px; pointer-events:none; }
.cover > .cb{ transform:rotateY(180deg); background:var(--grain), repeating-linear-gradient(45deg,rgba(110,92,56,.1) 0 2px,transparent 2px 7px), radial-gradient(circle at 30% 30%,#d9cfaf,#aa9a72); }

/* ===== 写真ページ（章1：森が終わる場所） ===== */
.sheet{ position:absolute; inset:0; visibility:hidden; }
#pp{
  z-index:3; transform-origin:0 50%; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:var(--grain), linear-gradient(180deg,#e7e5d0 0%,#dfe3cb 52%,#d1d9bd 100%);
}
.pp-shade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(30,25,15,0) 38%,rgba(30,25,15,.6)); opacity:0; pointer-events:none; }
.pp-wrap{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:min(100%,560px,calc(78vh - 124px)); width:min(100%,560px,calc(78svh - 124px));
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:calc(env(safe-area-inset-top,0px) + 56px) max(20px, env(safe-area-inset-right,0px)) 84px max(20px, env(safe-area-inset-left,0px));
}
.row{ display:flex; justify-content:space-between; align-items:flex-start; }
.row2{ align-items:flex-end; }
.ph{ margin:0; padding:6px; background:#f8f3e4; box-shadow:0 10px 24px rgba(40,50,30,.28); }
.ph > i{ display:block; position:relative; width:100%; height:100%; overflow:hidden; }
.ph > i::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.38); }
.ph > i > b{ position:absolute; left:14px; bottom:12px; font:500 11px/1.4 var(--mincho); letter-spacing:.12em; color:rgba(255,255,255,.78); }
.pA{ width:64%; aspect-ratio:3/4; }
.pA > i{ background:radial-gradient(ellipse at 60% 30%,rgba(255,240,200,.45),rgba(255,240,200,0) 55%), linear-gradient(165deg,#56755a,#22392b); }
.pB{ width:55%; aspect-ratio:4/3; }
.pB > i{ background:radial-gradient(ellipse at 30% 70%,rgba(255,230,190,.5),rgba(255,230,190,0) 60%), linear-gradient(150deg,#b39775,#6d5236); }
.pC{ width:19%; aspect-ratio:2/3; transform-origin:50% 0; }
.pC > i{ background:linear-gradient(170deg,#e8cfc9,#bb9a96); }
.pC > i > b{ left:8px; bottom:8px; font-size:10px; letter-spacing:.06em; }
/* HEROの実写真。画像の固有寸法で既存の紙枠や動きを押し広げない。 */
#pp .ph > i > img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
#pp .ph > i::before{ content:none; }
.ch{
  margin:0 0 6px; font-family:var(--latin); font-style:italic; font-weight:600;
  font-size:clamp(30px,9vw,42px); line-height:1.05; color:var(--ink);
}
/* 章題だけ：欧文の斜体を残し、和文は明朝の正体に。末尾の線に小さな描画余白を持たせる。 */
#chTitle{ padding-right:.14em; line-height:1.1; }
#chTitle .ch-ja{ font-family:var(--mincho); font-style:normal; }
.turn:not(#turn){
  position:absolute; left:0; right:0; margin:0; text-align:center; opacity:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 30px);
  font-size:13px; letter-spacing:.3em; color:var(--ink-soft);
}

/* ===== 季節の章（桜・ひまわり） ===== */
.scene{ z-index:1; overflow:hidden; }
#c2{
  z-index:2; transform-origin:0 50%; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:var(--grain), linear-gradient(180deg,#c6e1ee 0%,#e1eff1 50%,#f4eee8 100%);
}
#c3{ background:var(--grain), linear-gradient(180deg,#8bcfe6 0%,#c6e7ee 52%,#eef2dc 100%); }
.sl{ position:absolute; inset:0; transform-origin:50% 100%; }
.sl svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.fxl{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cs{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(40,30,25,.6),rgba(40,30,25,0) 72%); opacity:0; pointer-events:none; }
.sh-shade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(30,25,15,0) 38%,rgba(30,25,15,.6)); opacity:0; pointer-events:none; }
.s-in{ position:absolute; inset:0; }
.s-title{ position:absolute; left:8%; top:calc(env(safe-area-inset-top,0px) + 84px); margin:0; opacity:0; }
.s-title h2{ margin:0; font-family:var(--latin); font-style:italic; font-weight:600; font-size:clamp(40px,12vw,58px); line-height:1.05; color:var(--ink); }
.s-title p{ margin:8px 0 0 4px; font:500 14px/1.6 var(--mincho); letter-spacing:.2em; color:var(--ink-soft); }
.sf{ position:absolute; margin:0; padding:6px; background:#fbf7ec; box-shadow:0 12px 26px rgba(40,50,60,.3); opacity:0; }
.sf > i{ display:block; position:relative; width:100%; height:100%; overflow:hidden; }
.sf > i::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.5); }
.sf > i > b{ position:absolute; left:14px; bottom:12px; font:500 11px/1.4 var(--mincho); letter-spacing:.12em; color:rgba(60,50,50,.7); }
.sfA{ right:8%; bottom:calc(env(safe-area-inset-bottom,0px) + 19%); width:min(44vw,230px); aspect-ratio:3/4; }
.sfA > i{ background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%), linear-gradient(170deg,#f6dfe3,#d9a9b6); }
.sfB{ left:8%; bottom:calc(env(safe-area-inset-bottom,0px) + 17%); width:min(62vw,320px); aspect-ratio:4/3; }
.sfB > i{ background:radial-gradient(ellipse at 40% 30%,rgba(255,244,200,.7),rgba(255,244,200,0) 60%), linear-gradient(165deg,#e9c566,#b98a2c); }
.s-note{
  position:absolute; left:0; right:0; margin:0; text-align:center; opacity:0; padding:0 20px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  font-size:12px; line-height:1.9; letter-spacing:.12em; color:#2c3b36;
}
.petal{
  position:absolute; top:-6%; display:block; width:11px; height:8px; border-radius:70% 30% 70% 30%; background:#f7d6dc; opacity:.92;
  animation:fall var(--d,12s) linear infinite; animation-delay:var(--dl,0s);
}
@keyframes fall{ from{ transform:translate3d(0,-8vh,0) rotate(0deg); } to{ transform:translate3d(var(--dx,30px),112vh,0) rotate(420deg); } }
.pol{
  position:absolute; bottom:-4%; display:block; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,160,.95),rgba(255,226,130,0) 70%);
  animation:rise var(--d,14s) linear infinite; animation-delay:var(--dl,0s);
}
@keyframes rise{ from{ transform:translate3d(0,0,0); opacity:0; } 15%{ opacity:1; } to{ transform:translate3d(var(--dx,20px),-105vh,0); opacity:0; } }

/* ===== 画面全体の空気 ===== */
#vig{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 50%, rgba(5,9,6,.66) 100%);
}
#fg{ position:absolute; inset:0; z-index:4; pointer-events:none; background:var(--grain); background-size:64px 64px; }
#veil{ position:absolute; inset:0; z-index:5; background:var(--room); pointer-events:none; }

/* ===== 画面に重ねる要素 ===== */
.wm{
  position:fixed; z-index:6; left:20px; top:calc(env(safe-area-inset-top,0px) + 14px); margin:0;
  font-family:var(--latin); font-style:italic; font-weight:600; font-size:20px; color:#e6d09b;
  text-shadow:0 1px 10px rgba(0,0,0,.5); transition:color .5s, text-shadow .5s; text-decoration:none;
}
.wm.dark{ color:var(--ink); text-shadow:none; }
.hero-copy{
  position:fixed; z-index:4; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 9vh);
  text-align:center; pointer-events:none;
}
.js .hero-copy{ opacity:0; }
.hero-copy h1{
  display:inline-block; margin:0; font-weight:500; font-size:clamp(19px,5.6vw,26px); line-height:1.95; letter-spacing:.24em;
  background:linear-gradient(180deg,#f7e8b8 0%,#dcc183 55%,#b99b5c 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.65));
}
.hero-copy p{ margin:16px 20px 0; font-size:13px; line-height:1.9; letter-spacing:.08em; color:#cfc4ad; }
.js .hero-copy p{ display:none; }
.hint{
  position:fixed; z-index:4; left:0; right:0; margin:0; text-align:center; opacity:0; transition:opacity .6s;
  bottom:calc(env(safe-area-inset-bottom,0px) + 24px); font-size:12px; letter-spacing:.3em; color:#d8c99c; pointer-events:none;
}
.skip{
  position:fixed; z-index:7; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 22px); min-height:44px; padding:0 24px;
  color:var(--ivory); background:rgba(15,13,10,.5); border:1px solid rgba(216,189,128,.4); border-radius:999px;
  font:13px/1 var(--mincho); letter-spacing:.2em; cursor:pointer;
}
.skip:active{ background:rgba(15,13,10,.8); }
.ready .skip{ display:none; }
.nojs{ display:none; }
html:not(.js) .nojs{ display:block; }
html:not(.js) .skip{ display:none; }

@media (min-width:760px){ .wm{ left:32px; } }
/* ===== HOME：紙のページ（HEROのあと、普通にスクロール） ===== */
:root{ --paper:#f3ead6; --paper2:#fbf6e8; --green:#24422f; --line:rgba(110,92,56,.3); --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif; }
html{ scroll-behavior:auto; }
html.lockm body{ position:fixed; left:0; right:0; top:var(--lock-top,0); }
#home{
  position:relative; z-index:1; color:var(--ink); font-family:var(--mincho);
  background:var(--grain), linear-gradient(180deg,#e6e3cc 0,#f3ead6 14%,#f3ead6 100%);
}
.hs{ max-width:640px; margin:0 auto; padding:64px 20px 8px; scroll-margin-top:12px; }
.hs h2{ margin:0 0 6px; font-weight:500; font-size:22px; line-height:1.6; letter-spacing:.14em; }
.hs h2::after{ content:""; display:block; width:36px; height:1px; margin-top:12px; background:#b99b5c; }
.hs p{ margin:12px 0 0; }
.lead{ font-size:16px; line-height:2.1; letter-spacing:.08em; }
.sub{ font:13px/1.9 var(--sans); color:var(--ink-soft); }
.todo{ display:inline-block; margin:0 6px 2px 0; padding:1px 8px; border:1px dashed #b99b5c; background:rgba(185,155,92,.16); color:#6a5521; font:500 11px/1.7 var(--sans); }
.genres{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.gc{ display:flex; flex-direction:column; padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper2); text-align:left; font:inherit; color:inherit; cursor:pointer; }
.gc i{ display:block; position:relative; aspect-ratio:3/4; }
.gc i b{ position:absolute; left:10px; bottom:8px; font:500 11px/1.4 var(--sans); letter-spacing:.08em; opacity:.85; }
.gc span{ padding:10px 12px 12px; font-size:16px; letter-spacing:.06em; }
.gc small{ display:block; margin-top:2px; font:12px/1.6 var(--sans); color:var(--ink-soft); letter-spacing:0; }
.gc:active, .btn:active{ transform:scale(.985); }
.slider{ margin:16px -20px 0; }
.tabs{ display:none; gap:6px; padding:0 20px 10px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar, .track::-webkit-scrollbar{ display:none; }
.js .tabs{ display:flex; }
.slider.fits .tabs, .slider.fits .ctrl{ display:none; }
.tab{ flex:0 0 auto; min-height:46px; padding:0 16px 9px; border:0; background:rgba(110,92,56,.14); color:var(--ink-soft); font:500 14px/1 var(--mincho); letter-spacing:.1em; cursor:pointer; clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%); }
.tab[aria-selected="true"]{ background:var(--green); color:#ecd9a0; }
.track{ display:flex; gap:12px; padding:2px 20px 10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:20px; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; }
.card{ flex:0 0 82%; scroll-snap-align:start; background:var(--paper2); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ctrl{ display:none; align-items:center; justify-content:center; gap:16px; margin-top:2px; }
.js .ctrl{ display:flex; }
.arrow{ width:44px; height:44px; border:1px solid var(--line); background:var(--paper2); border-radius:50%; font-size:18px; color:var(--ink); cursor:pointer; }
.arrow:disabled{ opacity:.35; cursor:default; }
.cnt{ min-width:60px; text-align:center; font:500 15px/1 var(--latin); letter-spacing:.1em; }
.scn{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.cb{ padding:12px 14px 14px; }
.cb h3{ margin:0; font:italic 600 22px/1.3 var(--latin); }
.cb p{ margin:4px 0 0; font:13px/1.8 var(--sans); color:var(--ink-soft); }
.price{ padding:16px 16px 14px; }
.price h3{ margin:0; font:500 17px/1.4 var(--mincho); letter-spacing:.08em; }
.yen{ margin:6px 0 2px; font:500 24px/1.3 var(--mincho); letter-spacing:.04em; }
.price dl{ margin:10px 0 14px; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font:13px/1.7 var(--sans); }
.price dt{ color:var(--ink-soft); } .price dd{ margin:0; }
.btns{ display:flex; gap:8px; }
.btn{ flex:1; min-height:46px; padding:0 12px; border:1px solid var(--green); background:transparent; color:var(--green); font:500 14px/1 var(--mincho); letter-spacing:.08em; border-radius:4px; cursor:pointer; }
.btn.fill{ background:var(--green); color:#f0dfab; }
.gal{ columns:2; column-gap:10px; margin-top:20px; }
.gal i{ display:block; margin:0 0 10px; border-radius:4px; break-inside:avoid; position:relative; }
.gal i b{ position:absolute; left:10px; bottom:8px; font:500 11px/1.4 var(--sans); color:rgba(255,255,255,.85); }
.prof{ display:flex; gap:16px; align-items:center; margin-top:18px; }
.prof i{ flex:0 0 96px; height:96px; border-radius:50%; background:linear-gradient(160deg,#e3d6b8,#b7a884); }
.prof strong{ display:block; font:500 18px/1.5 var(--mincho); letter-spacing:.1em; }
.prof span{ display:block; font:13px/1.8 var(--sans); color:var(--ink-soft); }
.stp{ margin:18px 0 12px; font:500 15px/1 var(--latin); letter-spacing:.14em; color:var(--ink-soft); }
.js .step{ display:none; } .js .step.on{ display:block; }
.step + .step{ margin-top:22px; } .js .step + .step{ margin-top:0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips input{ position:absolute; opacity:0; pointer-events:none; }
.chips label{ display:inline-flex; align-items:center; min-height:46px; padding:0 15px; border:1px solid var(--line); border-radius:999px; background:var(--paper2); font:14px/1 var(--mincho); cursor:pointer; }
.chips input:checked + label{ background:var(--green); color:#f0dfab; border-color:var(--green); }
.chips input:focus-visible + label{ outline:2px solid #b99b5c; outline-offset:2px; }
.fld{ display:block; margin:14px 0 6px; font:13px/1.5 var(--sans); color:var(--ink-soft); }
.in{ width:100%; min-height:46px; padding:11px 12px; border:1px solid var(--line); border-radius:4px; background:#fffdf6; color:var(--ink); font:16px/1.5 var(--sans); }
.err{ min-height:20px; margin:8px 0 0; font:13px/1.6 var(--sans); color:#a03a2a; }
.nav{ display:flex; gap:8px; margin-top:14px; }
.review{ margin:0 0 12px; padding:12px 14px; border:1px dashed var(--line); background:#fffdf6; white-space:pre-wrap; font:13px/1.9 var(--sans); }
/* 予約確認文だけ：URL・メール・長い英数字も内容幅で折り返す。入力・コピーする文字列は変えない。 */
#pg-reservation .review{ overflow-wrap:break-word; overflow-wrap:anywhere; word-break:normal; }
.testbox{ margin:12px 0 0; padding:10px 12px; background:rgba(185,155,92,.18); font:12.5px/1.8 var(--sans); color:#5a4720; }
.foot{ padding:48px 20px calc(env(safe-area-inset-bottom,0px) + 110px); text-align:center; font:12px/2 var(--sans); color:var(--ink-soft); }
.fab{
  position:fixed; z-index:30; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  transform:translateX(-50%) translateY(140%); min-height:52px; padding:0 30px; border:0; border-radius:999px;
  background:var(--green); color:#f0dfab; font:500 15px/1 var(--mincho); letter-spacing:.14em; box-shadow:0 8px 22px rgba(0,0,0,.32); cursor:pointer; transition:transform .4s;
}
.fab.on{ transform:translateX(-50%) translateY(0); }
.menu-btn{
  position:fixed; z-index:9; right:10px; top:calc(env(safe-area-inset-top,0px) + 6px); min-width:48px; min-height:44px; padding:0 12px; border:0; background:transparent;
  color:#e6d09b; font:500 13px/1 var(--mincho); letter-spacing:.14em; text-shadow:0 1px 10px rgba(0,0,0,.5); cursor:pointer; transition:color .5s;
}
.menu-btn.dark{ color:var(--ink); text-shadow:none; }
.ovl{ position:fixed; inset:0; z-index:40; display:none; background:rgba(15,13,10,.62); }
.ovl.on{ display:flex; align-items:flex-end; justify-content:center; }
.ovl.menu.on{ align-items:stretch; }
.sheetp{
  width:min(100%,560px); max-height:88vh; max-height:88svh; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 26px); background:var(--grain), var(--paper); border-radius:14px 14px 0 0; color:var(--ink); font-family:var(--mincho);
}
.ovl.menu .sheetp{ max-height:none; height:100%; border-radius:0; padding-top:calc(env(safe-area-inset-top,0px) + 14px); }
.ovl.on .sheetp{ animation:lift .35s ease both; transform-origin:50% 100%; }
@keyframes lift{ from{ transform:translateY(26px) rotateX(8deg); opacity:0; } to{ transform:none; opacity:1; } }
.x{ float:right; width:46px; height:46px; margin:-6px -8px 0 0; border:0; background:transparent; font-size:24px; color:var(--ink); cursor:pointer; }
.sheetp h3{ margin:4px 0 0; font:500 20px/1.5 var(--mincho); letter-spacing:.1em; }
.sheetp .yen{ margin:8px 0 2px; }
.sheetp dl{ margin:14px 0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font:14px/1.7 var(--sans); }
.sheetp dt{ color:var(--ink-soft); } .sheetp dd{ margin:0; }
.mlist{ list-style:none; margin:22px 0 0; padding:0; clear:both; }
.mlist a, .mlist span{ display:flex; justify-content:space-between; align-items:center; min-height:54px; padding:0 4px; border-bottom:1px solid var(--line); font-size:17px; letter-spacing:.1em; color:var(--ink); text-decoration:none; }
.mlist .soon{ color:var(--ink-soft); } .mlist small{ font:11px/1 var(--sans); }
.ts{ position:fixed; z-index:60; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 88px); transform:translate(-50%,16px); max-width:88vw; padding:12px 18px; background:#24422f; color:#f0dfab; font:13px/1.7 var(--sans); opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; }
.ts.on{ opacity:1; transform:translate(-50%,0); }
@media (min-width:760px){ .card{ flex-basis:44%; } }
@media (prefers-reduced-motion: reduce){ .ovl.on .sheetp{ animation:none; } .fab, .ts{ transition:none; } }

@media (prefers-reduced-motion: reduce){
  .hint{ transition:none; }
  .mote{ animation:none; opacity:.6; }
}
/* ===== 章（ページ）：一冊の絵本の、それぞれのページ ===== */
html.js .pg{ display:none; }
html.js .pg.on{ display:block; }
html.js[data-route]:not([data-route="home"]) #home,
html.js[data-route]:not([data-route="home"]) #seq,
html.js[data-route]:not([data-route="home"]) .hero-copy,
html.js[data-route]:not([data-route="home"]) .hint,
html.js[data-route]:not([data-route="home"]) .skip{ display:none; }

#home, .air-base{ --bg:#f3ead6; --bg2:#fbf6e8; --tx:#2c2c20; --tx2:#56563f; --acc:#24422f; --on-acc:#f0dfab; --ln:rgba(110,92,56,.3); --gd:#a98a4c; --sky1:#e9e6d2; --sky2:#f3ead6; --ph1:#8aa38a; --ph2:#4d6a52; --phl:rgba(255,255,255,.86); }
.air-wedding{ --bg:#1e3227; --bg2:#27402f; --tx:#efe6cf; --tx2:#c9c0a6; --acc:#d8bd80; --on-acc:#1b2e23; --ln:rgba(216,189,128,.28); --gd:#d8bd80; --sky1:#57725f; --sky2:#1e3227; --ph1:#4f6b57; --ph2:#20372a; --phl:rgba(239,230,207,.85); }
.air-kids{ --bg:#efe1c6; --bg2:#f8efdc; --tx:#3a2b1b; --tx2:#6a553c; --acc:#6e4a2a; --on-acc:#f6e6c6; --ln:rgba(110,74,42,.28); --gd:#a47b40; --sky1:#f5e8cc; --sky2:#efe1c6; --ph1:#d8b98a; --ph2:#9c7646; --phl:rgba(255,248,232,.9); }
.air-maternity{ --bg:#faf8f4; --bg2:#ffffff; --tx:#3b3833; --tx2:#6b665d; --acc:#7b6a73; --on-acc:#fbf6f4; --ln:rgba(90,80,70,.18); --gd:#b29a72; --sky1:#ffffff; --sky2:#faf8f4; --ph1:#f3eee8; --ph2:#d9d0c6; --phl:rgba(70,60,55,.7); }
.air-newborn{ --bg:#f7ecea; --bg2:#fdf7f5; --tx:#4a3834; --tx2:#7a625c; --acc:#9a6a62; --on-acc:#fff6f3; --ln:rgba(140,100,90,.22); --gd:#b88f6a; --sky1:#fcf3f0; --sky2:#f7ecea; --ph1:#f2dcd6; --ph2:#d3aaa2; --phl:rgba(80,55,50,.72); }

.pg{
  --green:var(--acc); --paper2:var(--bg2); --ink:var(--tx); --ink-soft:var(--tx2); --line:var(--ln);
  position:relative; min-height:100vh; min-height:100svh; color:var(--tx); font-family:var(--mincho);
  overflow-x:hidden; overflow-x:clip;
  background:var(--grain), var(--bg);
}
html[data-air="home"]{ --wmc:#e6d09b; }
html[data-air="base"]{ --wmc:#2c2c20; --barbg:rgba(243,234,214,.94); --barln:rgba(110,92,56,.18); --pagebg:#f3ead6; }
html[data-air="wedding"]{ --wmc:#e6d09b; --barbg:rgba(30,50,39,.94); --barln:rgba(216,189,128,.2); --pagebg:#1e3227; }
html[data-air="kids"]{ --wmc:#3a2b1b; --barbg:rgba(239,225,198,.94); --barln:rgba(110,74,42,.16); --pagebg:#efe1c6; }
html[data-air="maternity"]{ --wmc:#3b3833; --barbg:rgba(250,248,244,.94); --barln:rgba(90,80,70,.12); --pagebg:#faf8f4; }
html[data-air="newborn"]{ --wmc:#4a3834; --barbg:rgba(247,236,234,.94); --barln:rgba(140,100,90,.14); --pagebg:#f7ecea; }
html[data-route]:not([data-route="home"]), html[data-route]:not([data-route="home"]) body{ background:var(--pagebg); }
html[data-route]:not([data-route="home"]) body::before{
  content:""; position:fixed; z-index:5; left:0; right:0; top:0; height:calc(env(safe-area-inset-top,0px) + 52px);
  background:var(--barbg); box-shadow:0 1px 0 var(--barln);
}
html[data-route]:not([data-route="home"]) .wm, html[data-route]:not([data-route="home"]) .menu-btn{ color:var(--wmc); text-shadow:none; }
/* 戻るボタン（上の帯の左）。HOME 以外のページで出す。ロゴはその右へ（制作者が見本から A を選んだ。2026-10-22） */
.back-btn{ display:none; position:fixed; z-index:9; left:6px; top:calc(env(safe-area-inset-top,0px) + 4px); min-width:44px; min-height:44px; padding:0 6px; border:0; background:transparent; color:var(--wmc); font:500 34px/1 var(--latin); cursor:pointer; }
.back-btn:focus-visible{ outline:2px solid #b99b5c; outline-offset:-4px; }
html[data-route]:not([data-route="home"]) .back-btn{ display:block; }
html[data-route]:not([data-route="home"]) .wm{ left:48px; }
/* HOME：表紙（HERO）が終わったら、ほかのページと同じ紙の色の帯を敷く（ui.js の updBar が .bar-on をつける） */
html[data-route="home"] body::before{
  content:""; position:fixed; z-index:5; left:0; right:0; top:0; height:calc(env(safe-area-inset-top,0px) + 52px); pointer-events:none;
  background:rgba(243,234,214,.94); box-shadow:0 1px 0 rgba(110,92,56,.18); opacity:0; visibility:hidden; transition:opacity .35s, visibility 0s .35s;
}
html[data-route="home"].bar-on body::before{ opacity:1; visibility:visible; transition:opacity .35s; }
html[data-route="home"].bar-on .wm, html[data-route="home"].bar-on .menu-btn{ color:var(--ink); text-shadow:none; }

/* 扉（章のはじまり） */
.chap{ position:relative; padding-top:52px; }
.vig{ position:relative; width:100%; aspect-ratio:390/250; max-height:48vh; max-height:48svh; overflow:hidden; background:linear-gradient(180deg,var(--sky1),var(--sky2)); }
.vig[data-vig="wedding"]{ aspect-ratio:390/328; }   /* Wedding の扉は少し高く（木の葉と幹が両方入るように。見せる範囲は art.js の VIEW） */
.vig::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(180deg,rgba(0,0,0,0),var(--bg)); pointer-events:none; }
.pg.on .vig .sl, #home .scn[data-vig] .sl{ animation:vrise 1s cubic-bezier(.2,.7,.2,1) both; }
.pg.on .vig .sl:nth-child(2), #home .scn[data-vig] .sl:nth-child(2){ animation-delay:.12s; }
.pg.on .vig .sl:nth-child(3), #home .scn[data-vig] .sl:nth-child(3){ animation-delay:.24s; }
.pg.on .vig .sl:nth-child(4), #home .scn[data-vig] .sl:nth-child(4){ animation-delay:.36s; }
@keyframes vrise{ from{ transform:translateY(10px) scaleY(.05); opacity:0; } 30%{ opacity:1; } to{ transform:none; opacity:1; } }
.chap-card{
  position:relative; z-index:1; width:min(86%,480px); margin:-44px auto 0; padding:22px 18px 20px; text-align:center;
  background:var(--grain), var(--bg2); border:1px solid var(--ln); outline:1px solid var(--ln); outline-offset:-7px; box-shadow:0 14px 30px rgba(0,0,0,.12);
}
.chap-no{ margin:0 0 8px; font:500 12px/1 var(--mincho); letter-spacing:.42em; color:var(--gd); }
.chap-t{ margin:0; font-family:"Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN",serif; font-style:italic; font-weight:600; font-size:clamp(34px,10vw,46px); line-height:1.1; color:var(--tx); }
.chap-t.jt{ font-style:normal; font-weight:500; letter-spacing:.2em; font-size:clamp(30px,9vw,40px); }
.chap-ja{ margin:10px 0 0; font:13px/1.8 var(--sans); letter-spacing:.08em; color:var(--tx2); }

/* 本文 */
.ps{ max-width:640px; margin:0 auto; padding:48px 20px 0; }
.ps h2{ margin:0; font-weight:500; font-size:20px; line-height:1.7; letter-spacing:.12em; }
.ps h2::after{ content:""; display:block; width:32px; height:1px; margin-top:10px; background:var(--gd); }
/* 既知の2見出しのみ、狭い画面では意味のまとまりで改行。拡大文字はさらに自然に折り返せる。 */
@media (max-width:480px){
  #pg-studio .ps h2.copy-wrap .copy-line, #pg-wedding .ps h2.copy-wrap .copy-line{ display:block; }
  #pg-wedding .price .btns .btn{ line-height:1.35; padding-top:3px; padding-bottom:3px; }
}
.ps h3{ margin:0; font-weight:500; font-size:16px; line-height:1.7; letter-spacing:.08em; }
.body{ margin:14px 0 0; font:15px/2.05 var(--mincho); letter-spacing:.04em; }
.body.small{ font:13px/1.95 var(--sans); letter-spacing:.02em; color:var(--tx2); }
.quote{ margin:18px 0 0; padding-left:14px; border-left:1px solid var(--gd); font:500 17px/2.1 var(--mincho); letter-spacing:.08em; }
.quote.small{ font-size:15px; }
.lead-sec .body:first-of-type{ font-size:16px; }
.notes{ margin:14px 0 0; padding:0; list-style:none; font:13.5px/1.9 var(--sans); color:var(--tx2); }
.notes li{ position:relative; margin-top:6px; padding-left:16px; }
.notes li::before{ content:""; position:absolute; left:2px; top:.95em; width:7px; height:1px; background:var(--gd); }
.two{ display:grid; gap:22px; margin-top:16px; }
.two h3 + .body{ margin-top:6px; }
@media (min-width:640px){ .two{ grid-template-columns:1fr 1fr; } }
.facts{ margin:10px 0 12px; font:13px/1.7 var(--sans); }
.facts .r{ display:grid; grid-template-columns:5.6em minmax(0,1fr); gap:10px; padding:6px 0; border-top:1px dotted var(--ln); }
.facts dt{ color:var(--tx2); } .facts dd{ margin:0; }
.opts{ margin:12px 0 0; font:14px/1.8 var(--sans); }
.opts .r{ display:flex; flex-wrap:wrap; justify-content:space-between; column-gap:14px; padding:11px 0; border-top:1px solid var(--ln); }
.opts .r:last-child{ border-bottom:1px solid var(--ln); }
.opts dd{ margin:0 0 0 auto; text-align:right; }
.catch{ margin:0 0 4px; font:12px/1.6 var(--sans); letter-spacing:.14em; color:var(--gd); }
.yen small{ margin-left:4px; font:12px/1 var(--sans); color:var(--tx2); }
.ptext{ margin:0 0 6px; font:13.5px/1.95 var(--mincho); }
.js .card .more{ display:none; }
.card .more{ margin-bottom:12px; }
.pg .tab[aria-selected="true"], .pg .btn.fill, .pg .chips input:checked + label{ color:var(--on-acc); }
.pg .btn{ border-color:var(--acc); color:var(--acc); }
.pg .btn.fill{ background:var(--acc); }
.pg .tab{ background:rgba(127,110,80,.16); }
.air-wedding .tab{ background:rgba(216,189,128,.12); }
a.btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.btn.ghost{ border-color:transparent !important; }
.cta{ max-width:640px; margin:40px auto 0; padding:0 20px; }
.cta .btn{ display:flex; width:100%; min-height:52px; }
.cta.inline{ margin:18px 0 0; padding:0; }
.cta.inline .btn{ display:inline-flex; width:auto; min-height:46px; padding:0 22px; }
.nav.col{ flex-direction:column; }

/* 写真の枠（差し替え） */
.ph-f{ display:block; width:100%; margin:0; padding:6px; border:0; background:#fbf7ec; box-shadow:0 8px 20px rgba(30,30,20,.16); cursor:pointer; font:inherit; text-align:left; }
.ph-f > i{ display:block; position:relative; aspect-ratio:var(--ar,3/4); background:radial-gradient(ellipse at 60% 30%,rgba(255,244,214,.45),rgba(255,244,214,0) 58%), linear-gradient(165deg,var(--ph1),var(--ph2)); }
.ph-f > i::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.35); }
.ph-f b, .ph-f em{ position:absolute; left:14px; font:500 11px/1.4 var(--sans); font-style:normal; letter-spacing:.08em; color:var(--phl); }
.ph-f b{ bottom:28px; } .ph-f em{ bottom:12px; opacity:.85; }
.ph-f img{ display:block; width:100%; height:auto; }
.gal{ columns:2; column-gap:12px; margin:24px auto 0; max-width:640px; padding:0 20px; }
.gal.one{ columns:auto; } .gal.one .ph-f{ width:72%; margin:0 auto; }
.gal-note{ max-width:640px; margin:6px auto 0; padding:0 20px; font:12px/1.7 var(--sans); color:var(--tx2); }
#home .gal-note{ padding:0; }
#home .gal{ padding:0; }
.gal .ph-f{ margin:0 0 12px; break-inside:avoid; }
.gal.film{ columns:auto; }
.gal.film .ph-f{ width:86%; margin:0 0 14px; }
.gal.film .ph-f:nth-child(even){ width:70%; margin-left:auto; }
.gal.soft{ column-gap:16px; }
.gal.soft .ph-f{ padding:0; box-shadow:none; border-radius:2px; overflow:hidden; margin-bottom:16px; }
.booths{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.booth{ margin:0; } .booth figcaption{ margin-top:8px; font:13px/1.6 var(--sans); color:var(--tx2); text-align:center; }
.booth-sub{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; } .booth-sub .ph-f{ padding:4px; }
.gc i{ background:#e9e2d2; } .gc i img{ display:block; width:100%; height:100%; object-fit:cover; }
.prof i{ overflow:hidden; } .prof i img{ display:block; width:100%; height:100%; object-fit:cover; }
.links .lk{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:2px 14px; align-items:center; }
.lk img{ grid-row:1 / span 2; display:block; width:64px; height:80px; object-fit:cover; border-radius:3px; }
.ev .scn.ph img{ display:block; width:100%; height:100%; object-fit:cover; }
/* HOME：季節のロケーションのカード（章の絵の層を img で重ねる。見える直前に読み込む） */
.lsc{ background:#eef0e8; }
.lcard{ position:relative; }
.lgo{ position:absolute; inset:0; z-index:3; border-radius:inherit; -webkit-tap-highlight-color:transparent; }   /* カード全体を押せる：その章が開く */
.lgo:focus-visible{ outline:2px solid #b99b5c; outline-offset:-3px; }
.lsc .ly{ position:absolute; left:0; top:0; width:100%; height:100%; }   /* カード用の絵（art の card フォルダ）は、章の絵の y=150 から 520 分を切り出したもの */
.lsc .lph{ position:absolute; left:var(--lx); top:var(--ly); width:var(--lw); height:var(--lh); object-fit:cover; transform:rotate(var(--lr)); }
.covers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 4px; padding:0; list-style:none; }

/* 写真の出方：1枚ずつ違う動き（貼る・すべりこむ・ひらく・のぞく） */
.js .rv{ opacity:0; }
.js .rv.m1{ transform:translateY(18px) rotate(-2.5deg); }
.js .rv.m2{ transform:translateX(26px); }
.js .rv.m3{ transform:scaleY(.62); transform-origin:50% 0; }
.js .rv.m4{ transform:scale(1.05); clip-path:inset(0 0 80% 0); }   /* 100% だと見えている面積が 0 になり、IntersectionObserver が「見えた」と判定しない（Chrome） */
.js .rv.in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); transition:opacity .8s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), clip-path 1.1s cubic-bezier(.2,.7,.2,1); }
/* 2列の写真一覧（段組み columns:2）は動きなしで、はじめから置いておく。
   iPhone の Safari は、段組みの右の列のいちばん上の写真を、動いている間（約1.1秒）描かず、動きが終わった瞬間にパッと出す
   （制作者の画面収録をコマ送りで確認。HOME の作品の右上）。1列の並び（.film・.one）とブースなどは今までどおり動く */
.js .gal:not(.film):not(.one) > .rv{ opacity:1; transform:none; clip-path:none; transition:none; }

/* プロフィール */
.prof2{ display:flex; gap:16px; align-items:flex-end; }
.prof2 .portrait{ flex:0 0 44%; }
.pname{ margin:0; font:500 22px/1.5 var(--mincho); letter-spacing:.14em; }
.pname small{ display:block; font:italic 600 15px/1.4 var(--latin); letter-spacing:.12em; color:var(--tx2); }
.area{ margin:8px 0 0; font:13px/1.8 var(--sans); color:var(--tx2); }

/* 年齢から探す */
.ages{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.age{ min-height:44px; padding:0 16px; border:1px solid var(--ln); border-radius:999px; background:var(--bg2); color:var(--tx); font:14px/1 var(--mincho); letter-spacing:.06em; cursor:pointer; }
.age[aria-pressed="true"]{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
.finder{ margin:14px 0 0; padding:0; list-style:none; }
.fi a{ display:flex; align-items:center; gap:12px; min-height:62px; padding:10px 4px; border-top:1px solid var(--ln); color:inherit; text-decoration:none; }
.fi:last-child a{ border-bottom:1px solid var(--ln); }
.fi small{ flex:0 0 8.2em; font:12px/1.55 var(--sans); color:var(--tx2); }
.fi span{ flex:1; font:500 16px/1.5 var(--mincho); letter-spacing:.06em; }
.fi i{ font-style:normal; font-size:20px; color:var(--gd); }
.fi.off{ display:none; }
.links .lk{ display:block; padding:16px; border:1px solid var(--ln); border-radius:6px; background:var(--bg2); color:inherit; text-decoration:none; }
.lk b{ display:block; font-family:"Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN",serif; font-style:italic; font-weight:600; font-size:22px; line-height:1.3; }
.lk span{ display:block; margin-top:4px; font:13px/1.8 var(--sans); color:var(--tx2); }

/* キャンセル規定 */
.rl{ margin:0; padding:0; list-style:none; counter-reset:r; }
.rl > li{ counter-increment:r; padding:20px 0; border-top:1px solid var(--ln); }
.rl h3::before{ content:counter(r, decimal-leading-zero) "｜"; color:var(--gd); }
.rl .body{ margin-top:8px; }

/* 撮影会（HOME） */
.events .card.ev{ flex-basis:86%; }
.ev .scn{ aspect-ratio:16/10; background:linear-gradient(180deg,#f3ead6,#efe4cc); }
.ev-sub{ margin:2px 0 0 !important; font:500 13px/1.6 var(--mincho) !important; letter-spacing:.12em; color:var(--tx2); }
.ev-h{ margin:12px 0 0 !important; font:500 13px/1.6 var(--sans) !important; color:var(--tx) !important; }
.word{ margin:12px 0 0 !important; padding:10px 12px; background:rgba(36,66,47,.08); font:13px/1.8 var(--sans) !important; color:var(--tx) !important; }
.word b{ font-family:var(--mincho); font-size:16px; letter-spacing:.1em; }
#home .card.sum .yen{ font-size:22px; }

/* HOME「料金の目安」7カードだけ。詳細プラン・撮影会のカードには適用しない。 */
#planSlider .track{ align-items:stretch; }
#planSlider .card.sum{ display:flex; flex-direction:column; min-width:0; padding:0; }
#planSlider .sum-photo{ flex:none; width:100%; aspect-ratio:3/2; overflow:hidden; background:var(--paper2); }
#planSlider .sum-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
#planSlider .sum-body{ flex:1; display:flex; flex-direction:column; padding:16px 16px 14px; }
#planSlider .sum-body h3{ min-height:2.8em; }
#planSlider .sum-body .yen{ margin:8px 0 0; }
#planSlider .sum-body .cta{ margin: auto 0 0; padding:18px 0 0; }
#planSlider .sum-body .cta .btn{ min-height:46px; }


/* 前後のページ・おわり */
.pnav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:640px; margin:60px auto 0; padding:0 20px; }
.pn{ display:block; padding:14px; border:1px solid var(--ln); border-radius:6px; background:var(--bg2); color:inherit; text-decoration:none; font:italic 600 18px/1.3 var(--latin); }
.pn small{ display:block; margin-bottom:2px; font:12px/1.6 var(--sans); font-style:normal; color:var(--tx2); }
.pn.next{ text-align:right; }
.ft{ padding:44px 20px calc(env(safe-area-inset-bottom,0px) + 110px); text-align:center; font:12px/2 var(--sans); color:var(--tx2); }
.ft-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 14px; max-width:520px; margin:0 auto 16px; padding:0; list-style:none; }
.ft-links a, .ft-ig a{ display:inline-block; padding:6px 2px; color:var(--tx2); }
.ft p{ margin:6px 0 0; }
.tgl{ min-height:40px; padding:0 14px; border:1px dashed var(--gd); border-radius:999px; background:transparent; color:var(--tx2); font:12px/1 var(--sans); cursor:pointer; }

/* 確認メモ（プレビューだけ。本番では出ない） */
.memo, .memo-only, .todo-row, .pending{ display:none; }
html.memo-on .memo{ display:block; margin:10px 0 0; padding:8px 10px; border:1px dashed #b99b5c; background:rgba(185,155,92,.12); font:12px/1.7 var(--sans); color:var(--tx2); text-align:left; }
html.memo-on .memo-only{ display:block; }
html.memo-on .todo-row{ display:grid; }
/* 「確認中」の行は、確認メモを出さないときは行ごと隠す（.facts .r の display:grid が勝って、空の「日程」の行だけ残っていた） */
.facts .r.todo-row{ display:none; }
html.memo-on .facts .r.todo-row{ display:grid; }
html.memo-on .pending{ display:block; outline:1px dashed rgba(185,155,92,.6); outline-offset:-1px; }
html.memo-on .rl > li.pending{ display:list-item; }
.memo .todo{ margin-right:8px; }
.air-wedding .todo{ color:#f0dfab; border-color:#d8bd80; }
.facts .memo, .opts .memo{ margin-top:4px; }

/* もくじ */
.mh{ margin:4px 0 0; font:italic 600 24px/1.3 var(--latin); }
.mlist small{ color:var(--gd); letter-spacing:.2em; }

/* ページをめくる */
#turn{ opacity:1; position:fixed; inset:0; z-index:58; pointer-events:none; visibility:hidden; perspective:1400px; }
#turn.go{ visibility:visible; pointer-events:auto; }
.leaf{ position:absolute; inset:0; background:var(--grain), #efe5cc; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.leaf::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(60,45,20,.22),rgba(60,45,20,0) 22%,rgba(60,45,20,0) 78%,rgba(60,45,20,.18)); }
#turn.a .leaf{ transform-origin:100% 50%; animation:leafIn .32s cubic-bezier(.25,.6,.3,1) both; }
#turn.b .leaf{ transform-origin:0 50%; animation:leafOut .44s cubic-bezier(.2,.7,.3,1) both; }
@keyframes leafIn{ from{ transform:rotateY(88deg); } to{ transform:rotateY(0); } }
@keyframes leafOut{ from{ transform:rotateY(0); } to{ transform:rotateY(-88deg); } }

.nojs-form{ margin:12px 0 0; font:13px/1.8 var(--sans); color:var(--tx2); }
.js .nojs-form{ display:none; }
html:not(.js) .step{ display:none; }
.fab{ border:1px solid rgba(240,223,171,.35); }
.ph-big{ margin:12px 0 0; }

@media (prefers-reduced-motion: reduce){
  .js .rv{ opacity:1; transform:none; clip-path:none; }
  .pg.on .vig .sl, #home .scn[data-vig] .sl{ animation:none; }
  #turn{ display:none; }
}
@media (min-width:760px){
  .chap-card{ margin-top:-60px; }
  .events .card.ev{ flex-basis:46%; }
}
.price dl.facts, .sheetp dl.facts, .sheetp dl.opts, .ev dl.facts{ display:block; margin:10px 0 12px; }
.sheetp .facts .r{ grid-template-columns:6em minmax(0,1fr); }
#home{ overflow-x:hidden; overflow-x:clip; }
.events .track{ align-items:flex-start; }
.evx{ margin:4px 0 0; font:13px/1.7 var(--sans); }
/* 撮影会のカード：4枚の高さをそろえ、予約ボタンは下にそろえる。くわしくは「くわしく見る」で開く画面へ（2026-10-22） */
.events .track{ align-items:stretch; }
.card.ev{ display:flex; flex-direction:column; }
.card.ev .cb{ flex:1; display:flex; flex-direction:column; }
.card.ev .btns{ margin-top:auto; padding-top:10px; }
.evd{ display:none !important; }
.evmore{ display:block; width:100%; min-height:44px; margin:0; padding:0; border:0; background:none; color:var(--tx); font:500 13px/44px var(--sans); letter-spacing:.04em; text-align:left; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.evmore:focus-visible{ outline:2px solid #b99b5c; outline-offset:2px; }
#mBody > .ev-sub{ margin:2px 0 8px; font:13px/1.6 var(--mincho); letter-spacing:.12em; color:var(--tx2); }
.evx summary{ min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--tx); }
.ev .facts .r{ grid-template-columns:4.2em minmax(0,1fr); }
.evx .facts .r{ grid-template-columns:minmax(0,1fr) auto; }
.gc{ text-decoration:none; }
#mBtns[hidden]{ display:none; }
:root{ --ph1:#8aa38a; --ph2:#4d6a52; --phl:rgba(255,255,255,.86); }

/* ===== ロケーション：季節のページを1枚ずつめくる ===== */
#pg-location{ overflow:visible; }
.sidx{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.lbook{ position:relative; margin-top:28px; }
.lp{ position:relative; height:100vh; height:100svh; min-height:540px; overflow:hidden; background:linear-gradient(180deg,var(--s1),var(--s2)); }
.lp-scn{ position:absolute; inset:0; }
.lp-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.lp-t{ position:absolute; z-index:2; left:8%; top:calc(env(safe-area-inset-top,0px) + 76px); }
.lp-t h3{ margin:0; font:italic 600 clamp(40px,12vw,58px)/1.05 var(--latin); color:#2c2c20; text-shadow:0 1px 14px rgba(255,255,255,.55); }
.lp-season{ margin:0 0 6px 4px; font:500 12px/1 var(--mincho); letter-spacing:.42em; color:#6a5521; }
.lp-ja{ margin:8px 0 0 4px; font:500 14px/1.6 var(--mincho); letter-spacing:.2em; color:#3d3a2c; }
.lp .sf{ z-index:2; opacity:1; }
.lp .sf > i{ background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%), linear-gradient(170deg,var(--s1),var(--s2)); }
.lp-n{ position:absolute; z-index:2; right:16px; top:calc(env(safe-area-inset-top,0px) + 64px); margin:0; font:500 13px/1 var(--latin); letter-spacing:.12em; color:#4a4636; }
.lp-shade{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; background:linear-gradient(90deg,rgba(40,30,20,0) 30%,rgba(40,30,20,.55)); }
.lp.up .lp-scn .sl{ animation:vrise 1s cubic-bezier(.2,.7,.2,1) both; }
.lp.up .lp-scn .sl:nth-child(2){ animation-delay:.12s; } .lp.up .lp-scn .sl:nth-child(3){ animation-delay:.24s; }
.lp.up .lp-scn .sl:nth-child(4){ animation-delay:.36s; } .lp.up .lp-scn .sl:nth-child(5){ animation-delay:.48s; }
.js .lbook.live{ height:calc(var(--n) * 100vh); height:calc(var(--n) * 100svh); }
.js .lbook.live .lb-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; perspective:1600px; }
.js .lbook.live .lp{ position:absolute; inset:0; height:auto; min-height:0; transform-origin:0 50%; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
@media (prefers-reduced-motion: reduce){ .lp.up .lp-scn .sl{ animation:none; } .lp-fx{ display:none; } }
.lp .sfA{ top:31%; bottom:auto; right:7%; width:min(38vw,210px); transform:rotate(2.5deg); }
.lp .sfB{ top:43%; bottom:auto; left:7%; width:min(54vw,290px); transform:rotate(-2deg); }

/* 季節の写真：縦・横・大きさが違っても、見た目の大きさがそろうように並べる */
.lp{ --u:min(1vw, .5vh); --u:min(1vw, .5svh); }
.lp-ph{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.lpf{ position:absolute; display:block; width:calc(var(--fw) * var(--u)); aspect-ratio:var(--ar); margin:0; padding:5px; border:0; background:#fbf7ec; box-shadow:0 12px 26px rgba(40,50,60,.3); pointer-events:auto; cursor:pointer; }
.lpf img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 45%); }
.lpf.ph0{ cursor:default; }
.lpf.ph0 > i{ display:block; position:relative; height:100%; background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%), linear-gradient(170deg,var(--s1),var(--s2)); }
.lpf.ph0 b{ position:absolute; left:10px; bottom:8px; font:500 11px/1.4 var(--sans); color:rgba(60,50,50,.7); }
.lp-ph.n1 .lpf{ left:50%; top:max(26%, calc(env(safe-area-inset-top,0px) + 180px)); transform:translateX(-50%) rotate(-1.5deg); }
.lp-ph.n2 .lpf:nth-child(1){ right:6%; top:max(24%, calc(env(safe-area-inset-top,0px) + 180px)); transform:rotate(2.5deg); }
.lp-ph.n2 .lpf:nth-child(2){ left:6%; top:max(42%, calc(env(safe-area-inset-top,0px) + 300px)); transform:rotate(-2deg); }
.lp-ph.n3 .lpf:nth-child(1){ right:5%; top:max(22%, calc(env(safe-area-inset-top,0px) + 176px)); transform:rotate(2.5deg); }
.lp-ph.n3 .lpf:nth-child(2){ left:5%; top:max(35%, calc(env(safe-area-inset-top,0px) + 270px)); transform:rotate(-2.5deg); }
.lp-ph.n3 .lpf:nth-child(3){ right:12%; top:max(50%, calc(env(safe-area-inset-top,0px) + 372px)); transform:rotate(1.5deg); }
html:not(.memo-on) .ph-empty{ display:none; }
.mimg{ display:block; width:100%; height:auto; max-height:72vh; max-height:72svh; object-fit:contain; margin-top:12px; }

/* 案A：季節のページは背景をひかえめにして、写真を前に出す */
.lp-scn::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(250,247,240,0) 12%,rgba(250,247,240,.6) 30%,rgba(250,247,240,.6) 72%,rgba(250,247,240,0) 92%); }
.lpf{ padding:7px; box-shadow:0 18px 34px rgba(30,30,25,.32), 0 2px 6px rgba(30,30,25,.18); }
/* 写真の外へ続く切り絵 */
.lpf{ overflow:visible; }
.lpx{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.lpx svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lp.up .lpx svg{ animation:xgrow 1.1s .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes xgrow{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .lp.up .lpx svg{ animation:none; } }
/* 写真を押すと、その季節の写真をめくって見られる */
.lpc{ position:absolute; right:12px; bottom:12px; z-index:3; padding:3px 9px 3px 23px; border-radius:999px; background:rgba(251,247,236,.92); box-shadow:0 2px 8px rgba(0,0,0,.18); font:500 11px/1.5 var(--sans); letter-spacing:.06em; color:#3d3a2c; pointer-events:none; }
.lpc::before, .lpc::after{ content:""; position:absolute; width:7px; height:7px; border:1.2px solid #3d3a2c; border-radius:1px; }
.lpc::before{ left:8px; top:5px; background:rgba(251,247,236,.92); }
.lpc::after{ left:11px; top:8px; background:rgba(251,247,236,1); }
.mgal{ display:flex; gap:0; margin:12px 0 0; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; }
.mgal::-webkit-scrollbar{ display:none; }
.mgal figure{ flex:0 0 100%; margin:0; scroll-snap-align:center; }
.mgal img{ display:block; width:100%; height:62vh; height:min(62svh,560px); object-fit:contain; background:#efe7d4; }
.mg-ctrl{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:12px; }
.mg-ctrl .cnt{ min-width:4.5em; text-align:center; font:500 14px/1 var(--latin); letter-spacing:.1em; }

/* 参考画像に合わせて描いた章（桜）：章全体の切り絵と写真を1枚のSVGで */
.lp-art{ position:absolute; inset:0; z-index:1; }
.lp-art svg{ position:absolute; inset:0; width:100%; height:100%; }
.lp.art .lp-t, .lp.art .lp-n{ z-index:3; }
.lp-hit-wrap{ width:100%; height:100%; }
.lp-hit{ display:block; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lp-hit:focus-visible{ outline:2px solid #b99b5c; outline-offset:-4px; }
.lp.up .lp-art{ animation:artIn 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes artIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.js .lbook.live .lp{ will-change:transform; }
@media (min-width:600px){ .lp-art{ left:50%; right:auto; width:calc(100vh * 390 / 844); width:calc(100svh * 390 / 844); transform:translateX(-50%); } .lp.up .lp-art{ animation:none; } }
@media (prefers-reduced-motion: reduce){ .lp.up .lp-art{ animation:none; } }


/* 季節の小さな同一絵の見本。元の SVG と同じ切り取りで、準備中だけ下に残す。 */
.lp-preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.lp-full{ position:absolute; inset:0; }
.js .lp[data-art-state="pending"] .lp-full image,
.js .lp[data-art-state="fallback"] .lp-full image{ visibility:hidden; }
.js .lp[data-art-state="ready"] .lp-preview{ visibility:hidden; }

/* HOMEの人物紹介だけ：スマートフォンでは人物・本文・リンクを同じ中心軸にまとめる。
   見出しは既存の左揃え、本文は自然に折り返す左揃え。保存済みの本文や写真は変更しない。 */
@media (max-width:759px){
  #h-profile .prof{ flex-direction:column; gap:12px; margin-top:20px; }
  #h-profile .prof > i{ flex:0 0 96px; width:96px; height:96px; }
  #h-profile .prof > div{ max-width:100%; min-width:0; text-align:center; overflow-wrap:break-word; }
  #h-profile > .body{ max-width:20em; margin:22px auto 0; text-align:left; overflow-wrap:break-word; }
  #h-profile > .cta.inline{ margin:24px 0 0; text-align:center; }
  #h-profile > .cta.inline .btn{ max-width:100%; line-height:1.5; padding-top:10px; padding-bottom:10px; }
}

/* 1.0.23: a shared, stable stage height; touch toolbar resize must not move the book.
   Scoped to HERO and the live seasonal book. Ordinary pages/forms remain native. */
.js #seq{ height:var(--otogi-seq-h, 560vh); }
.js #stage{ height:var(--otogi-stage-h, 100svh); }
.js .pp-wrap{ width:min(100%,560px,calc(var(--otogi-stage-h, 100svh) * .78 - 124px)); }
.js .lbook.live{ height:calc(var(--n) * var(--otogi-stage-h, 100svh)); }
.js .lbook.live .lb-stage{ height:var(--otogi-stage-h, 100svh); }
.js .lbook.live .lp{ --u:min(1vw, calc(var(--otogi-stage-h, 100svh) * .005)); }
@media (min-width:600px){ .js .lbook.live .lp-art{ width:calc(var(--otogi-stage-h, 100svh) * 390 / 844); } }

/* 1.0.24: Instagram in-app only. Safari keeps the original layout and CTA. */
.otogi-instagram .fab{ transform:translateX(-50%); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s; }
.otogi-instagram .fab.on{ opacity:1; visibility:visible; pointer-events:auto; }
.otogi-instagram .ig-intro{
  position:absolute; z-index:4; left:0; right:0;
  top:calc(47% + var(--bh) / 2 + 12px); bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  padding:0 16px; display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--ig-copy-gap, 8px); text-align:center; pointer-events:none;
}
.otogi-instagram .ig-intro .hero-copy{ position:static; flex:0 0 auto; bottom:auto; }
.otogi-instagram .ig-intro .hero-copy h1{ display:block; font-size:var(--ig-copy-size, 20px); line-height:1.65; }
.otogi-instagram .ig-intro.compact .hero-copy h1{ white-space:nowrap; }
.otogi-instagram .ig-intro.compact .hero-copy h1 br{ display:none; }
.otogi-instagram .ig-intro .hint{ position:static; flex:0 0 auto; bottom:auto; font-size:var(--ig-hint-size, 12px); line-height:1.5; }
@media (prefers-reduced-motion: reduce){ .otogi-instagram .fab{ transition:none; } }