/* 茶房るが吉 — DESIGN.md準拠：窓からのぞく見世棚。430px幅・1カラム・縦書き・余白で区切る */
:root{--paper-ink:#e6e2de;
  --ink:#261507;      /* 墨茶：文字・線・ボタン */
  --accent:#c68343;   /* 琥珀茶：強調語・柄の差し色だけ */
  --bg:#d2cecb;       /* 生成り灰：地 */
  --font-heading:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --frame-x:max(10px, calc(50vw - 205px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;overscroll-behavior-x:none;background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:500;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.stage{position:relative;z-index:1;max-width:430px;margin:0 auto}
.paper{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg) url(assets/bg-paper.webp) center top/430px auto repeat}

/* 窓枠・枝 */
.frame{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.brw{position:fixed;z-index:6;pointer-events:none;inset:0;overflow:hidden}
.brw img{position:absolute;height:auto;display:block}

/* ナビ */
.burger{position:fixed;z-index:20;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8.5px);width:62px;height:26px;margin-left:-31px;border:0;border-radius:11px 11px 0 0;background:var(--ink);cursor:pointer;padding:0}
.burger::before,.burger::after{content:"";position:absolute;bottom:0;width:16px;height:12px;pointer-events:none}
.burger::before{left:-16px;background:radial-gradient(ellipse 100% 100% at 0 0,transparent 97%,var(--ink) 100%)}
.burger::after{right:-16px;background:radial-gradient(ellipse 100% 100% at 100% 0,transparent 97%,var(--ink) 100%)}
.burger span{position:absolute;left:20px;width:22px;height:1.5px;border-radius:1px;background:var(--bg);transition:transform .35s cubic-bezier(.6,0,.3,1),opacity .2s}
.burger span:nth-child(1){top:8px}.burger span:nth-child(2){top:12.25px}.burger span:nth-child(3){top:16.5px}
.nav-open .burger span:nth-child(1){transform:translateY(4.25px) rotate(30deg)}
.nav-open .burger span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-open .burger span:nth-child(3){transform:translateY(-4.25px) rotate(-30deg)}
.nav{position:fixed;inset:0;z-index:19;background:rgba(210,206,203,.97);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.nav-open .nav{opacity:1;visibility:visible;transition:opacity .3s}
.nav-open{overflow:hidden}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:26px;font-size:17px;letter-spacing:.24em}
.nav a{text-decoration:none}
.nav .nav-nest{line-height:0;margin-bottom:-6px}
.nav .nav-nest img{width:80px;height:auto}
.nav .arrow-link{margin-top:8px;font-size:14px}

/* ボタン：八角形 */
.btn{--cut:8px;display:inline-block;margin-top:22px;padding:13px 32px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:14px;letter-spacing:.16em;font-weight:500;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:-7px}
.tlink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}

/* KV */
.kv{height:100svh;background:var(--bg)}
.kv video{display:block;width:100%;height:100%;object-fit:cover}

/* 縦書きセクション */
.v{writing-mode:vertical-rl;font-size:14px;line-height:2.3;letter-spacing:.2em}
.v p{margin:0}
.v p+p{margin-block-start:2.2em}
.v h2{margin:0 0 0 2em;font-size:21px;line-height:2.2;letter-spacing:.24em}
.v em{font-style:normal;font-weight:700;color:var(--accent)}
/* 「見世」：画面に貼りついた棚の前を、縦書きの文章がスクロールに合わせて左から右へ流れる */
.about{position:relative;height:400svh}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;clip-path:inset(0 12px);background:url(assets/shelves.webp) center top/100% auto no-repeat}
.strip{position:absolute;right:76px;top:calc(min(100vw,430px) * 1980 / 1080 * .202 + 28px);height:calc(100svh - min(100vw,430px) * 1980 / 1080 * .202 - 90px);will-change:transform}
.strip p.gap{margin-block-start:5.5em}
.strip p.strong{font-size:1.125em;font-weight:700;margin-block:7em}
.strip p:last-child{padding-block-end:calc(min(100vw,430px) * .8)}
.swallow{position:absolute;left:0;top:0;width:80px;height:auto;opacity:0;pointer-events:none;will-change:transform}
.brw,.frame{opacity:0;transition:opacity .8s ease}
.brw.on,.frame.on{opacity:1}
.burger{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.burger.on{opacity:1;visibility:visible}

/* Menu */
.menu{position:relative;padding:11svh 30px 20svh}
.svc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px;text-align:center}
.interlude{position:relative;z-index:2;height:30svh;margin:0 -30px;pointer-events:none}
.interlude img{position:absolute;left:0;top:0;width:110px;height:auto;will-change:transform}
.logo{display:block;height:64px;width:auto}
/* 英字見出しが上辺にまたがるパネル */
.svc-head{align-self:stretch;margin:.9em -10px 0;padding:0 20px 40px;background:#f2ede9;display:flex;flex-direction:column;align-items:center;font-size:30px}
.svc-en{margin:-.7em -.02em 0 0;font-family:var(--font-body);font-weight:700;font-size:1em;line-height:1;letter-spacing:.02em;color:var(--accent)}
.svc-head .logo{margin-top:38px}
/* 急須の注ぎ口の分だけ絵が右寄りなので、湯のみ2つの間が中央に来るよう左へ寄せる */
#vision .logo{transform:translateX(-12.9%)}
.svc .svc-head h3{font-size:21px;margin-top:37px;letter-spacing:.1em;font-feature-settings:"palt"}
.hk{letter-spacing:-.08em;font-feature-settings:"palt";margin-inline-end:.16em}
.hk .yo{margin-inline:-.05em}
.svc-head .desc{font-size:14px}
.desc .lead{display:block;text-align:center}
.svc-head .cases::before,.svc-head .apply::before{display:none}
/* パネル内の小見出し：墨の帯をやめ、文字＋右に伸びる細い線で軽く区切る */
.svc-head .cases h4,.svc-head .apply h4{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:0;background:none;color:var(--ink)}
.svc-head .cases h4::after,.svc-head .apply h4::after{content:"";flex:1;height:1px;background:var(--ink);opacity:.45}
.svc-head .cases ul{padding-left:.8em}
.apply p,.svc-head .apply p{padding-left:0;text-align:center}
.svc-head .cases li{word-break:auto-phrase}
.svc h3{margin:12px 0 14px;font-size:21px;letter-spacing:.24em}
.desc{word-break:auto-phrase;margin:0 auto;width:calc(100% - 2.12em);text-align:left;font-size:14px;line-height:2;letter-spacing:.06em}
.flow{display:flex;direction:rtl;align-items:flex-start;gap:16px;margin:28px 0 0}
.flow h4{direction:ltr;writing-mode:vertical-rl;font-size:12.5px;letter-spacing:.3em}
.flow ol{display:flex;direction:rtl;gap:10px;margin:0;padding:0;list-style:none;counter-reset:s}
.flow li{position:relative;direction:ltr;counter-increment:s;width:44px;text-align:center;font-size:14px;letter-spacing:.08em}
.flow li::before{content:counter(s);display:block;margin:0 auto 8px;width:20px;height:20px;border:1px solid var(--ink);border-radius:50%;font-size:11px;line-height:18px;letter-spacing:0}
.flow li span{display:inline-block;writing-mode:vertical-rl;line-height:1.5}
.flow li:not(:last-child)::after{content:"";position:absolute;top:9.5px;left:calc(50% - 44px);width:34px;height:1px;background:var(--ink);opacity:.35}
.cases,.apply{align-self:stretch;margin:10svh -10px 0;text-align:left;font-size:14px;letter-spacing:.06em}
.apply{margin-top:10svh}
.cases,.apply{position:relative;isolation:isolate;padding-bottom:30px}
.cases::before,.apply::before{content:"";position:absolute;z-index:-1;left:4px;right:-6px;top:20px;bottom:0;background:#f2ede9;border-radius:14px}
.cases h4,.apply h4{z-index:1}
.cases h4,.apply h4{--fold:13px;position:relative;display:inline-block;margin:0 0 22px -80px;padding:.38em 1.8em .38em 90px;background:var(--ink);color:var(--paper-ink);font-size:15px;letter-spacing:.24em;line-height:1.6}
.cases ul{list-style:none;margin:0;padding:0 0 0 2em;font-size:14px;letter-spacing:.01em;display:grid;gap:8px;line-height:1.75}
.cases li{display:grid;grid-template-columns:1.1em 1fr}
.cases li::before{content:"・"}
.apply p{margin:0;padding-left:2em;font-size:14px;letter-spacing:.01em;line-height:2.1}
.more{display:inline-flex;align-items:center;gap:22px;margin-top:44px;padding:0 4px 12px 6px;border-bottom:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font-size:14.5px;letter-spacing:.14em;font-weight:500}
.more-arw{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#c68343;transition:transform .25s}
.more:hover .more-arw{transform:translateX(3px)}

/* チケット */
.tickets{position:relative;padding:16svh 24px;display:flex;flex-direction:column;align-items:center;background:#f2ede9 url(assets/bg-dots.webp) center/cover}
.perch{position:absolute;z-index:3;left:38%;top:0;width:64px;transform:translate(-50%,-84.4%);pointer-events:none}
.perch img{display:block;width:100%;height:auto;transition:opacity .18s}
.perch .dn{position:absolute;inset:0;opacity:0}
.perch.look .dn{opacity:1}
.perch.look img:not(.dn){opacity:0}
.bloom{position:relative;isolation:isolate;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:0 16%}
.bloom-en{margin:0 0 18px;font-family:var(--font-body);font-weight:700;font-size:22px;line-height:1;letter-spacing:.12em;color:var(--accent)}
.bloom-ill{width:34px;height:auto;margin:0 0 22px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bloom .lead{display:block;font-family:var(--font-heading);font-weight:700;font-size:14px;letter-spacing:.24em;line-height:1;padding:2px 7px;border-block:1px solid var(--ink);inline-size:fit-content;margin-block-end:.9em}
.kk{letter-spacing:.02em;font-feature-settings:"palt"}
.kk .tsu{margin-inline:-.04em}
.bloom p:not(.bloom-en){margin:0;writing-mode:vertical-rl;height:15em;font-size:14px;line-height:2.3;letter-spacing:.06em;text-align:start}
.arrow-link{position:relative;display:inline-block;margin-top:34px;padding:0 4px 9px;color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:.12em}
.arrow-link::after{content:"";position:absolute;left:0;right:-6px;bottom:0;height:8px;background:linear-gradient(var(--ink),var(--ink)) left bottom/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) right bottom/10px 1px no-repeat;clip-path:none}
.svc .arrow-link{margin-top:44px}
.arrow-link::before{content:"";position:absolute;right:-6px;bottom:0;width:10px;height:1px;background:var(--ink);transform-origin:right center;transform:rotate(35deg)}
.bloom p .num{letter-spacing:0}

/* お客さまの声（花札） */
.voices{padding:10svh 0 14svh;overflow:hidden;background:#ecebea url(assets/bg-leaf.webp) center/cover}
.voices .bloom-en{margin-bottom:4svh;text-align:center}
.voice-ill{display:block;width:52px;height:auto;margin:0 auto 7svh}
.deck{position:relative;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:20px calc(50% - 170px);scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.pair{position:relative;flex:none;width:340px;height:440px;scroll-snap-align:center}
.pair .fuda{position:absolute;left:0;top:22px;width:262px;height:392px;object-fit:contain;transform:rotate(-8deg);transform-origin:50% 60%}
.vo-nav{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:6px}
.vo-nav button{width:44px;height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0;transition:opacity .2s}
.vo-nav button:disabled{opacity:.25;cursor:default}
.vo-nav svg{width:14px;height:14px}
.vo-count{font-family:var(--font-heading);font-size:14px;letter-spacing:.16em;min-width:4.5em;text-align:center}
.hf{position:absolute;left:84px;top:0;width:250px;min-height:392px;display:grid;grid-template-columns:2.5rem 1fr;background:var(--bg);border:1px solid var(--ink)}
.hf-tan{background:var(--ink);color:var(--bg);writing-mode:vertical-rl;font-family:var(--font-heading);font-weight:700;font-size:14.5px;letter-spacing:.14em;line-height:2.5rem;padding:16px 0;text-align:start}
.hf-body{padding:16px 18px 18px 14px;min-width:0}
.hf-head{display:flex;align-items:center;gap:10px}
.hf-face{width:46px;height:46px;flex:none;object-fit:contain}
.hf-genre{font-size:15px;font-weight:700;letter-spacing:.1em;line-height:1.4}
.hf-work{margin:10px 0 0;padding-bottom:8px;border-bottom:1px solid var(--accent);color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:.08em}
.hf-text{margin:10px 0 0;font-size:14px;line-height:1.95;letter-spacing:.05em}

/* プロフィール・コラム */
.profile{padding:12svh 24px 6svh;display:flex;flex-direction:column;align-items:center;background:#d2cecb url(assets/bg-profile.webp) center top/cover no-repeat}
.portrait{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.portrait img{width:100px;height:auto}
.portrait p{margin:0;text-align:center;letter-spacing:.2em;font-size:14px;line-height:1.9}
.portrait b{display:block;font-family:var(--font-body);font-weight:700;font-size:19px;letter-spacing:.28em}
.column{padding:6svh 30px 14svh;display:flex;flex-direction:column;align-items:center;gap:8svh}
.column h2{writing-mode:vertical-rl;font-size:20px;letter-spacing:.24em;line-height:1.7}
.column .text{width:calc(100% - 2.12em);word-break:auto-phrase;display:flex;flex-direction:column;gap:1.4em;font-size:14px;line-height:2.1;letter-spacing:.06em}
.column .text p{margin:0}
.column .text p.mid{text-align:center}

/* お問い合わせ */
.closing{position:relative;isolation:isolate;background:#d2cecb}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;background:url(assets/bg-closing.webp) center top/100% auto no-repeat;opacity:.9;pointer-events:none}
.contact{position:relative;height:calc(min(100vw,430px) * 1.22);padding:0 20px;text-align:center}
.contact h2{position:absolute;left:0;right:0;top:calc(min(100vw,430px) * .059);margin:0!important;transform:translateY(-50%)}
.c-body{position:absolute;left:0;right:0;top:calc(min(100vw,430px) * .605);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}
.c-body .arrow-link{margin-top:22px}
.contact h2{font-size:21px;letter-spacing:.14em;margin-bottom:20px}
.contact p{margin:0;font-size:14px;line-height:2.1;letter-spacing:.06em}

/* フッター */
.foot{padding:6svh 30px calc(9svh + env(safe-area-inset-bottom,0px));text-align:center;font-size:12.5px;letter-spacing:.1em}
.foot ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px}
.foot p{margin:0}
.sns{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center;gap:26px}
.sns a{display:block;line-height:0}
.sns img{height:22px;width:auto}
.sns img.note{height:14px}
.foot .legal-links{flex-direction:column;gap:8px;margin-bottom:20px}
.foot .legal-links a{color:inherit;text-decoration:none}
.foot .name{font-family:var(--font-heading);font-weight:700;font-size:16px;letter-spacing:.3em;margin-bottom:16px}

/* 下層ページ */
.sub{padding:calc(env(safe-area-inset-top,0px) + 96px) 30px 12svh}
.sub-head{text-align:center;margin-bottom:0}
.sub-head+.block{margin-top:6svh}
.sub-head a.home{display:inline-block;font-family:var(--font-heading);font-weight:700;letter-spacing:.3em;font-size:15px;text-decoration:none;margin-bottom:5svh}
.sub-head h1{font-size:21px;letter-spacing:.14em;line-height:1.8;text-wrap:balance}
.sub-head p{margin:10px 0 0;font-size:13px;letter-spacing:.16em}
.sub-icon{display:block;width:72px;height:auto;margin:0 auto}
.block>p.sub-cap{margin:-14px 0 22px;text-align:center;font-size:12px;letter-spacing:.16em}
.block{margin-top:9svh}
.block>h2{font-size:19px;letter-spacing:.22em;text-align:center;margin-bottom:22px}
.block p,.block li,.block dd{font-size:14px;line-height:2;letter-spacing:.05em}
.panel{position:relative;padding:28px 22px 72px;border-radius:14px;background:#f2ede9 url(assets/bg-panel2.webp) center/cover}
.note{font-size:12.5px!important;line-height:1.9!important}
.buy{display:grid;gap:12px;justify-items:stretch}
.buy .btn{margin:0;display:flex;justify-content:space-between;align-items:center}
.btn.light{position:relative;isolation:isolate;color:var(--ink)}
.btn.light::before{content:"";position:absolute;inset:1.5px;z-index:-1;background:var(--bg);clip-path:polygon(7.4px 0,calc(100% - 7.4px) 0,100% 7.4px,100% calc(100% - 7.4px),calc(100% - 7.4px) 100%,7.4px 100%,0 calc(100% - 7.4px),0 7.4px)}
.panel-ume{position:absolute;right:0;top:48px;width:60px;height:auto;pointer-events:none}
.panel-ume2{position:absolute;left:0;bottom:16px;width:65px;height:auto;pointer-events:none}
.plan+.plan{margin-top:22px}
/* チケット枚数の見出し：線が続かないよう、下線ではなくパネルより一段濃い淡い色面で区切る */
.plan h3{font-size:17px;letter-spacing:.2em;display:flex;justify-content:space-between;align-items:baseline;margin:0 -4px;padding:9px 12px;background:#e5ddd3}
.plan h3 small{font-family:var(--font-body);font-size:14px;letter-spacing:.08em}
/* チケットページの小見出し：トップページと同じく、墨の帯をやめて文字＋右に伸びる細い線 */
.plan h4{display:flex;align-items:center;gap:14px;font-size:14px;letter-spacing:.16em;line-height:1.6;margin:18px 0 6px;padding:0;background:none;color:var(--ink)}
.plan h4::after{content:"";flex:1;height:1px;background:var(--ink);opacity:.45}
.plan ul{margin:0;padding-left:1.2em}
.plan h3 .tks{display:inline-flex;gap:3px;margin-left:8px;vertical-align:-1px}
.plan h3 .tk{width:auto;height:17px}
.plan .unit{margin:2px 0 0;font-weight:700}
.plan .ex{margin:8px 0 0;font-size:12.5px;letter-spacing:.08em;opacity:.75}
.plan .inc{margin:6px 0 0;font-size:12.5px;line-height:1.9}
.diff{margin:16px 0 0;display:grid;gap:10px}
.diff div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid rgba(38,21,7,.25);padding-bottom:8px}
.diff dt{font-size:14px;line-height:1.7}
.diff dd{margin:0;font-weight:700;white-space:nowrap}
.faq details{border-bottom:1px solid rgba(38,21,7,.25);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:14px;line-height:1.8;letter-spacing:.05em}
.faq details p{margin:10px 0 0}
.legal dl{margin:0;display:grid;gap:18px}
.legal dt{font-weight:700;font-size:14px;letter-spacing:.1em;margin-bottom:2px}
.legal dd{margin:0}
.legal h3{font-size:15px;letter-spacing:.14em;margin:26px 0 6px}
.legal ul,.legal ol{margin:0;padding-left:1.3em}
.toc{text-align:center;font-size:13px;letter-spacing:.1em;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:16px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .deck{scroll-behavior:auto}
  .nav,.burger,.burger span,.brw,.frame{transition:none}
  .about{height:auto}
  .pin{position:relative;height:100svh;overflow-x:auto}
  .strip{position:relative;right:auto;margin-left:auto;transform:none!important}
  .swallow{display:none}
  .interlude img{display:none}
}
.tcy{text-combine-upright:all}
.side{display:none}
@media (min-width:1000px){
  .side{position:fixed;z-index:7;top:0;bottom:0;width:calc(50vw - 215px);display:flex;align-items:center;justify-content:center}
  .side-l{left:0}.side-r{right:0}
  .side-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:22px;font-size:15px;letter-spacing:.24em}
  .side-nav a{text-decoration:none}
  .side-nav .nav-nest{line-height:0;margin-bottom:-4px}
  .side-nav .nav-nest img{width:80px;height:auto}
  .side-nav .arrow-link{margin-top:8px;font-size:14px}
  .burger,.nav{display:none}
}
.sub .btn{clip-path:none;background:none;color:var(--ink);position:relative;padding:12px 22px 11px 4px;border-bottom:1px solid var(--ink)}
.sub .btn.light::before{display:none}
.sub .btn::after{content:"";position:absolute;right:0;bottom:-1px;width:10px;height:1px;background:var(--ink);transform-origin:right center;transform:rotate(35deg)}
.sub-contact{text-align:center}
.sub-contact h2{font-size:21px;letter-spacing:.14em}
.sub-contact p{margin:0}

/* 文字詰めの統一ルール（本文・ラベル・見出し・縦書き見出し） */
:root{--ls-body:.05em;--ls-label:.16em;--ls-head:.08em;--ls-wide:.2em;--ls-vhead:.24em}
/* ① 本文：詰めない。字間はひとつに */
.desc,.cases ul,.apply p,.hf-text,.column .text,.contact p,.block p,.block li,.block dd,.diff dt,.note,.inc,.unit{letter-spacing:var(--ls-body)}
/* ② ラベル・小見出し：広めに空けるので自動詰めはせず、等幅のまま均等に */
.cases h4,.apply h4,.hf-genre,.hf-work,.plan h4,.ex,.sub-cap,.nav ul,.side-nav,.arrow-link,.btn{font-feature-settings:normal;letter-spacing:var(--ls-label)}
/* ③ 見出し：2種類に分ける
   ・詰める見出し（サービス名など）＝自動詰め（palt）＋少しだけ空ける
     paltで縮むのはかなだけ。字間を広げすぎると漢字の間だけ空いて見えるので、控えめにする
   ・広げる見出し（お問い合わせなど）＝自動詰めはせず、等幅のまま均等に広げる */
.svc .svc-head h3,.plan h3{font-feature-settings:"palt";letter-spacing:var(--ls-head)}
.contact h2,.block>h2,.foot .name{font-feature-settings:normal;letter-spacing:var(--ls-wide)}
/* 縦書き見出し：縦用の自動詰め（vpal） */
.v h2,.column h2,.flow h4,.hf-tan,.bloom .lead,.strip p.strong{font-feature-settings:"vpal";letter-spacing:var(--ls-vhead)}
/* 手動カーニングは、見出しの自動詰めで足りる分を外して最小限に */
.hk{letter-spacing:0;margin-inline-end:0}

/* 和欧間：和文（かな・漢字）と半角の英数字の間を少し空ける。桁の間は空けない */
html{text-autospace:normal}
.ws{display:inline-block;inline-size:.125em}
/* 価格は等幅数字にして、縦に並んだときに桁をそろえる */
.btn span,.plan h3 small,.diff dd{font-variant-numeric:tabular-nums}

/* まとめ割：リンク全体ではなく、ラベルの文字だけにベージュの帯をつけて区別し、1枚あたりの金額を添える */
.sub .btn.deal{align-items:flex-start}
.btn.deal>span:first-child{margin-left:-2px;padding:0 8px;background:#e5ddd3}
.btn.deal .price{display:flex;flex-direction:column;align-items:flex-end}
.btn.deal .per{margin-top:2px;font-size:11.5px;letter-spacing:.08em;opacity:.75;font-variant-numeric:tabular-nums}
/* 当日アップグレードの差額ボタンも、「〇枚まとめ割」の文字にだけ同じベージュの帯 */
[aria-labelledby=up] .btn>span:last-child{margin-right:-2px;padding:0 8px;background:#e5ddd3}

/* 下層ページ：右上の端に縦書きの「ホームへ戻る」。左に細い線を添えてリンクだとわかるように */
.sub-head{position:relative}
.home-v{position:absolute;right:0;top:-14px;writing-mode:vertical-rl;padding:6px 12px;font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:.24em;color:var(--ink);text-decoration:none;border-left:1px solid var(--ink)}

/* 「たとえば、こんなご相談」「お申し込み方法」の本文：パネルより少し明るい白っぽい色面 */
.svc-head .cases ul,.svc-head .apply p{margin-inline:8px;padding:18px 12px;background:#f9f6f3;border-radius:0}
/* 矢印リンクは途中で改行しない */
.arrow-link{white-space:nowrap}
/* チケット枚数の見出し：文字とチケット画像を改行させない */
.plan h3>span:first-child{white-space:nowrap}
/* よくある質問：右端に＋、開くと－ */
.faq summary{list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:4px;top:calc(.9em - .5px);width:12px;height:1px;background:var(--ink)}
.faq summary::after{transform:rotate(90deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(0)}
/* トップ動画：縦長のスマホでも左右の梅の枝が切れないよう、横幅いっぱい・上そろえで表示（下の余りは動画の地色） */
.kv{overflow:hidden;background:#d1ccc9}
.kv video{height:auto;object-fit:initial}

/* チケットページ：ご案内はパネルではなく、ロゴまで覆うセクション背景（角丸なし） */
.guide-wrap{position:relative;margin:calc(-1 * (env(safe-area-inset-top,0px) + 96px)) -30px 0;padding:calc(env(safe-area-inset-top,0px) + 96px) 30px 0;background:#f2ede9 url(assets/bg-panel2.webp) center/cover}
.guide-wrap .panel{margin:0 -30px;padding:6px 30px 96px;border-radius:0;background:none}
/* 購入するとの切れ目：花札を散らして並べる（並び順は読み込みごとにシャッフル） */
.fuda-row{position:relative;z-index:2;height:0;margin:0 -30px}
.fuda-row img{position:absolute;width:50px;height:auto;filter:drop-shadow(0 3px 4px rgba(38,21,7,.18))}
.fuda-row img:nth-child(1){left:9%;top:-50px;transform:rotate(-14deg)}
.fuda-row img:nth-child(2){left:23%;top:-30px;transform:rotate(9deg)}
.fuda-row img:nth-child(3){left:37%;top:-56px;transform:rotate(-4deg)}
.fuda-row img:nth-child(4){left:51%;top:-26px;transform:rotate(15deg)}
.fuda-row img:nth-child(5){left:65%;top:-52px;transform:rotate(-9deg)}
.fuda-row img:nth-child(6){left:79%;top:-32px;transform:rotate(6deg)}
.fuda-row+.block{margin-top:calc(9svh + 40px)}
/* PC：購入する以降が外の背景と同じ色になるので、ページの左右に細い線 */
@media (min-width:460px){.sub{border-inline:1px solid rgba(38,21,7,.3)}}
/* ご案内の上：購入するへのセクションリンク */
.to-buy{margin:0 0 30px;text-align:center}
.to-buy a{position:relative;display:block;padding:13px 0 12px;border-block:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:var(--ls-label);white-space:nowrap}
/* 右端に下向きの小さな矢印（ページ内で下へ移動することを示す） */
.to-buy a::after{content:"";position:absolute;right:10px;top:50%;width:7px;height:7px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:translateY(-70%) rotate(45deg)}
html{scroll-padding-top:24px}
/* 梅の枝は「ホームへ戻る」の上、右端から出す（位置の基準をセクション全体にする） */
.guide-wrap .panel{position:static}
.guide-wrap .panel-ume{top:calc(env(safe-area-inset-top,0px) + 38px);width:74px}

/* チケットのご案内・プラン内の余白ルール（近いものは近く、まとまり同士は広く）
   チケット帯→部屋名 28px ／ 部屋どうし 36px ／ 部屋名→内容 12px ／ 内容→「たとえば」 16px ／ 「たとえば」→箇条書き 6px ／ 箇条書き→補足 16px ／ プランどうし 56px */
.plan h4{margin:36px 0 12px}
.plan h3+h4{margin-top:28px}
.plan .unit{margin:0;line-height:1.8}
.plan .ex{margin:16px 0 6px}
.plan ul{display:grid;gap:2px}
.plan .inc{margin:16px 0 0}
.plan+.plan{margin-top:56px}
/* チケットページのフッター：店名はトップへのリンクなので細い下線 */
.foot .name-link{text-decoration:none;padding-bottom:4px;border-bottom:1px solid currentColor}
/* チケットのご案内：箇条書きの点を小さく（点の中心と文字の位置は元の黒丸と同じ） */
.plan ul{list-style:none}
.plan ul li{position:relative}
.plan ul li::before{content:"";position:absolute;left:-16.4px;top:13.9px;width:3px;height:3px;border-radius:50%;background:var(--ink)}
/* トップの「たとえば、こんなご相談」「お申し込み方法」の本文：チケットページの箇条書きと同じ書式（14px・行間2・小さな点・左揃え） */
.svc-head .cases ul{display:grid;gap:2px;padding:18px 16px 18px calc(16px + 1.2em);font-size:14px;line-height:2}
.svc-head .cases li{display:block;position:relative;word-break:normal}
.svc-head .cases li::before{content:"";position:absolute;left:-16.4px;top:13.9px;width:3px;height:3px;border-radius:50%;background:var(--ink)}
.svc-head .apply p{padding:18px 4px 18px calc(16px + 1.2em);text-align:left;font-size:14px;line-height:2}

/* メニューを開いたとき：窓枠と梅の枝をメニューの上に重ねて見せる（ボタンはさらに上） */
.nav-open .frame,.nav-open .brw{z-index:19;opacity:1}
.nav-open .nav{z-index:18}
/* メニュー・PCサイドの「チケットを購入する」：細い線の四角ボタン */
.nav .buy-btn,.side-nav .buy-btn{display:inline-block;padding:11px 26px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:var(--ls-label);white-space:nowrap}
/* バーガーメニュー：項目の間隔を詰める（26px→18px） */
.nav ul{gap:18px}
.nav .buy-btn{margin-top:6px}
/* ご予約の流れ：上の説明文と「たとえば、こんなご相談」のちょうど中間に（全体の間隔は変えずに上下を均等に） */
.svc-head .flow{margin-top:calc((28px + 10svh) / 2)}
.svc-head .cases{margin-top:calc((28px + 10svh) / 2)}
/* 「チケットを購入する」：枠線ではなくベージュの色面ボタン（まとめ割の帯と同じ色） */
.nav .buy-btn,.side-nav .buy-btn{border-color:transparent;background:#e5ddd3}
/* 料金（PRICE）の「チケットを見る」：メニューの「チケットを購入する」と同じベージュの色面ボタン */
.bloom .buy-btn{display:inline-block;margin-top:28px;padding:11px 26px;background:#e5ddd3;color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:var(--ls-label);white-space:nowrap}
/* 相談例：右の余白を少し詰めて、幅375pxでも1行に収まるように */
.svc-head .cases ul{padding-right:4px}
.up-panel{padding:28px 22px 24px;background:#f2ede9 url(assets/bg-panel2.webp) center/cover;border-radius:0}
.up-panel>p:first-child{margin-top:0}
.up-panel>.note:last-child{margin-bottom:0}
@media (min-width:460px){.sub .guide-wrap{margin-inline:-31px;padding-inline:31px}.sub+.closing{border-inline:1px solid rgba(38,21,7,.3)}}
.up-panel>h2{margin:6px 0 22px;font-size:19px;text-align:center;font-feature-settings:normal;letter-spacing:var(--ls-wide)}
.up-panel>p.sub-cap{margin:-14px 0 22px;text-align:center;font-size:12px;letter-spacing:.16em}
.up-panel{padding-top:34px}
.legal .panel{border-radius:0;padding-top:34px}
.legal .panel>h2{margin:6px 0 26px;font-size:19px;text-align:center;font-feature-settings:normal;letter-spacing:var(--ls-wide)}
.foot .top-link{color:inherit;text-decoration:none}

/* チケットのご案内：早見表（枚数ごとに「部屋 → できること」を1行ずつ） */
.q-lead{margin:0 0 26px;text-align:center;font-size:13.5px!important}
.plan.q+.plan.q{margin-top:34px}
.qt{margin:14px 0 0;display:grid}
.qt div{display:grid;grid-template-columns:7.6em 1fr;gap:12px;align-items:baseline;padding:12px 2px;border-bottom:1px solid rgba(38,21,7,.2)}
.qt dt{font-size:12.5px;letter-spacing:var(--ls-label);font-weight:700}
.qt dd{margin:0;font-size:14px;line-height:1.8}
.q-inc{margin:22px 0 0}
.guide-wrap .panel:has(.plan.q){padding-bottom:84px}
/* 当日アップグレード：よくあるご質問の中に折りたたむ */
.up-q .diff{margin-top:14px}
.up-q .buy{margin-top:18px}
.up-q .btn>span:last-child{margin-right:-2px;padding:0 8px;background:#e5ddd3}
.up-q>p.note{margin-top:12px}
.block+.fuda-row{margin-top:34px;padding-top:1px}
.fuda-row+.block.faq{margin-top:calc(9svh + 40px)}
.buy-panel{padding-bottom:40px}
/* タブレット・パソコン：中央の列の外側（左右）は、どのページ・どの位置でも窓枠の外側と同じ刷毛目の紙（bg-main）に。中央の本文の列は今までどおり */
@media (min-width:460px){
  body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:#d2cecb url(assets/bg-main.webp) center/cover no-repeat;
    -webkit-mask:linear-gradient(to right,#000 calc(50% - 215px),transparent calc(50% - 215px),transparent calc(50% + 215px),#000 calc(50% + 215px));
    mask:linear-gradient(to right,#000 calc(50% - 215px),transparent calc(50% - 215px),transparent calc(50% + 215px),#000 calc(50% + 215px))}
}
/* お試し：スマホでは窓枠の外を濃い色の面にし、トップ動画から表示する */
@media (max-width:459px){.frame #fo{fill:#261507}}
/* 枠はスマホ・パソコンともトップ動画から表示する */
.frame{opacity:1}
@media (max-width:459px){.burger{bottom:calc(env(safe-area-inset-bottom,0px) + .5px)}}