/* 縁側不動産（制作の見本）
   色：障子紙の地・墨の字・柿の差し色・庭の深緑・畳の部屋の暗がり。
   字：Kaisei Tokumin（見出し）／Noto Sans JP（本文）／EB Garamond 斜体（小さな添え書き）。
   しるし：障子が開く（始まりの幕・節の写真・三つの道の戸・目次・相談の節の明かり）と、伸びる日の帯。 */
:root{
  --paper:#F4EFE4; --face:#E7DFCF; --shoji:#FAF6EE; --ink:#2A2622; --txt:#433C35; --mute:#6F675C; --mute2:#5D554B;
  --line:#D9CFBD; --line2:#C5B8A1; --kaki:#C9692B; --kaki-d:#9E4F1F; --kaki-l:#E3A06D; --niwa:#2F4A3A; --yami:#1E1B17;
  --wood:#2E241B; --wood-d:#1D1712;
  --cream:#F4EFE4; --cream-m:rgba(244,239,228,.72); --cream-l:rgba(244,239,228,.16);
  --ff-min:"Kaisei Tokumin","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --ff-go:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --ff-en:"EB Garamond","Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --heavy:cubic-bezier(.72,0,.12,1);
  --gutter:clamp(22px,6vw,80px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff-go);font-size:15px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-break:strict;overflow-wrap:anywhere}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
h1,h2,h3,h4{font-weight:500}
h3{text-wrap:balance}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;letter-spacing:inherit;text-align:inherit;-webkit-tap-highlight-color:transparent}
::selection{background:var(--kaki);color:#fff}
:focus-visible{outline:2px solid var(--kaki);outline-offset:3px}
.ib{display:inline-block;font-weight:inherit}
.tcy{-webkit-text-combine:horizontal;text-combine-upright:all}
.wrap{overflow-x:hidden}
@supports (overflow:clip){.wrap{overflow-x:clip}}
/* 和紙の繊維（うすく全体に） */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75 .12' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .12 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- 障子（桟の格子）：戸・幕・写真の戸・明かりで使い回す ---------- */
.shoji{
  --k:2px; --f:6px; --cols:2; --rows:10;
  background-color:var(--shoji);
  background-image:
    linear-gradient(90deg,var(--wood) calc(var(--k) / 2),transparent calc(var(--k) / 2) calc(100% - var(--k) / 2),var(--wood) calc(100% - var(--k) / 2)),
    linear-gradient(180deg,var(--wood) calc(var(--k) / 2),transparent calc(var(--k) / 2) calc(100% - var(--k) / 2),var(--wood) calc(100% - var(--k) / 2));
  background-size:calc(100% / var(--cols)) 100%,100% calc(100% / var(--rows));
  border:var(--f) solid var(--wood);
}

/* ---------- 共通の部品 ---------- */
main{position:relative}
.sec{position:relative;padding-block:clamp(96px,26vw,132px)}
.in{position:relative;z-index:1;padding-inline:var(--gutter);max-width:1240px;margin-inline:auto}
.lbl{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:24px;line-height:1}
.lbl__n{position:relative;display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid currentColor;font-family:var(--ff-min);font-weight:500;font-size:15px;line-height:1;padding-bottom:1px}
.lbl__n::after{content:"";position:absolute;inset:3px;border:1px solid currentColor;opacity:.26}
.lbl__t{font-size:12px;font-weight:500;letter-spacing:.24em}
.lbl__en{display:flex;align-items:center;gap:10px;font-family:var(--ff-en);font-style:italic;font-size:14.5px;letter-spacing:.02em;color:var(--mute)}
.lbl__en::before{content:"";width:20px;height:1px;background:var(--line2)}
.h2{font-family:var(--ff-min);font-weight:500;font-size:clamp(23px,6.5vw,29px);line-height:1.62;letter-spacing:.07em;font-feature-settings:"palt";text-wrap:balance}
.tx{margin-top:20px;font-size:16px;line-height:2;color:var(--txt);text-wrap:pretty}
.note{font-size:12px;line-height:1.9;color:var(--mute)}
.lnk{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:8px;font-size:13.5px;font-weight:500;letter-spacing:.14em;border-bottom:1px solid currentColor}
.lnk i{position:relative;width:30px;height:1px;background:currentColor;transition:width .6s var(--ease-out)}
.lnk i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.lnk:hover i{width:46px}

/* 写真：枠＝clip（戸が開く）・中の寄り＝scale・奥行き＝JS の transform */
.ph{position:relative}
.ph__z{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;background:#2A241D}
.ph__z img{position:absolute;left:0;top:-7%;width:100%;height:114%;max-width:none;object-fit:cover;will-change:transform}
.ph__door{display:none}
.vcap{position:absolute;top:2px;writing-mode:vertical-rl;font-family:var(--ff-min);font-weight:500;font-size:12.5px;letter-spacing:.34em;line-height:1;color:var(--mute);white-space:nowrap}
.vcap--in{z-index:3;top:14px;right:14px;color:rgba(244,239,228,.86);text-shadow:0 1px 10px rgba(0,0,0,.55)}

/* 出てくる動き（プログラムが動く時だけ） */
html.js [data-r=""]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.3s var(--ease-out) var(--d,0s)}
html.js [data-r=""].is-in{opacity:1;transform:none}
/* 写真は、障子の戸が左右に開いて現れる */
html.js .ph[data-r="door"] .ph__door{display:block;position:absolute;z-index:2;top:0;bottom:0;width:50.4%;--cols:2;--rows:9;--k:1.5px;--f:5px;transform:translateX(0);transition:transform 1.75s var(--heavy) var(--d,0s)}
html.js .ph[data-r="door"] .ph__door--l{left:0;border-right-width:3px;box-shadow:6px 0 16px -6px rgba(30,22,14,.3)}
html.js .ph[data-r="door"] .ph__door--r{right:0;border-left-width:3px;box-shadow:-6px 0 16px -6px rgba(30,22,14,.3)}
html.js .ph[data-r="door"].is-in .ph__door--l{transform:translateX(-102%)}
html.js .ph[data-r="door"].is-in .ph__door--r{transform:translateX(102%)}
html.js .ph[data-r="door"] .ph__z img{scale:1.14;filter:brightness(.62);transition:scale 2.8s var(--ease-out) calc(var(--d,0s) + .15s),filter 2s var(--ease) calc(var(--d,0s) + .3s)}
html.js .ph[data-r="door"].is-in .ph__z img{scale:1;filter:brightness(1)}
html.js .ph[data-r="door"] .vcap{opacity:0;transition:opacity 1.2s var(--ease) calc(var(--d,0s) + 1.3s)}
html.js .ph[data-r="door"].is-in .vcap{opacity:1}

/* 日の帯：縁側に落ちる、格子の影の入った光。--p（0〜1）で伸びる */
.beam{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.beam i{position:absolute;display:block;
  --bl:rgba(255,224,178,.13); --bc:rgba(30,27,23,.92); --bw:84px; --bh:58px; --bk:7px;
  background:
    linear-gradient(90deg,var(--bc) calc(var(--bk) / 2),transparent calc(var(--bk) / 2) calc(100% - var(--bk) / 2),var(--bc) calc(100% - var(--bk) / 2)) 0 0/var(--bw) 100%,
    linear-gradient(180deg,var(--bc) calc(var(--bk) / 2),transparent calc(var(--bk) / 2) calc(100% - var(--bk) / 2),var(--bc) calc(100% - var(--bk) / 2)) 0 0/100% var(--bh),
    linear-gradient(90deg,transparent 0,var(--bl) 16%,var(--bl) 84%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  clip-path:inset(0 0 0 calc((1 - var(--p,1)) * 100%));
  transform-origin:100% 0}

/* ---------- 始まりの幕：暗い中で障子に光が入り、重い戸が左右に開く ---------- */
.intro{display:none}
html.js .intro{display:block;position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none;visibility:visible;transition:visibility 0s 2.7s}
html.js.is-loaded .intro{visibility:hidden}
.intro__door{position:absolute;top:0;bottom:0;width:calc(50% + 1px);--cols:2;--rows:13;--k:2px;--f:7px;background-color:#EEE4D0;transform:translateX(0);transition:transform 2.2s var(--heavy) .05s}
.intro__door--l{left:0;border-right-width:5px}
.intro__door--r{right:0;border-left-width:5px;box-shadow:-10px 0 26px rgba(20,14,8,.28)}
.intro__door::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 62% 30%,rgba(255,246,222,.85),rgba(255,240,210,.25) 48%,rgba(255,240,210,0) 70%),linear-gradient(180deg,rgba(70,50,30,0) 40%,rgba(70,50,30,.24) 100%)}
.intro__door--l::before{background:radial-gradient(120% 70% at 38% 30%,rgba(255,246,222,.78),rgba(255,240,210,.2) 48%,rgba(255,240,210,0) 70%),linear-gradient(180deg,rgba(70,50,30,0) 40%,rgba(70,50,30,.26) 100%)}
.intro__door::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:15%;border-top:4px solid var(--wood-d);background:repeating-linear-gradient(90deg,#33281E 0 3px,#2A2119 3px 8px,#30251C 8px 11px),var(--wood)}
.intro__shade{position:absolute;z-index:2;inset:-8px;background:#14110E;opacity:.97;animation:akari 1.5s var(--ease) .12s forwards}
@keyframes akari{to{opacity:0}}
.intro__branch{position:absolute;top:-3%;right:-5%;width:min(92%,440px);height:auto;color:#2C2117;opacity:0;transform-origin:92% 0;animation:kage 1.7s var(--ease) .5s forwards,yure 5.5s ease-in-out .8s infinite alternate}
@keyframes kage{to{opacity:.36}}
@keyframes yure{from{transform:rotate(-.9deg)}to{transform:rotate(1deg)}}
.intro__name{position:absolute;left:23%;top:44%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;animation:nameIn 1.3s var(--ease) .45s forwards}
.intro__name span{writing-mode:vertical-rl;font-family:var(--ff-min);font-weight:500;font-size:16px;letter-spacing:.62em;line-height:1;color:rgba(42,38,34,.86);white-space:nowrap}
.intro__name b{display:grid;place-items:center;width:22px;height:22px;background:var(--kaki-d);color:#F7E6D3;font-family:var(--ff-min);font-weight:500;font-size:12px;line-height:1}
@keyframes nameIn{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
html.js.is-loaded .intro__door--l{transform:translateX(-101%)}
html.js.is-loaded .intro__door--r{transform:translateX(101%)}

/* ---------- 上の帯 ---------- */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;height:60px;padding-inline:var(--gutter);color:var(--cream);transition:transform .7s var(--ease),background-color .5s,color .5s}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .5s}
.hd.is-solid{background:rgba(244,239,228,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink)}
.hd.is-solid::after{opacity:1}
.hd.is-hide{transform:translateY(-102%)}
html.js .hd{opacity:0;transition:opacity 1.2s var(--ease) 1.5s,transform .7s var(--ease),background-color .5s,color .5s}
html.js.is-loaded .hd{opacity:1}
html.is-menu .hd{transform:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink)}
html.is-menu .hd::after{opacity:0}
.hd__logo{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto}
.hd__mark{flex:none;width:26px;height:26px}
.hd__name{font-family:var(--ff-min);font-weight:700;font-size:17px;letter-spacing:.16em;line-height:1;white-space:nowrap}
.hd__en,.hd__nav,.hd__cta{display:none}
.hd__btn{display:flex;align-items:center;gap:9px;height:44px;margin-right:-8px;padding:0 8px;font-size:12px;font-weight:500;letter-spacing:.18em;line-height:1}
.hd__ico{position:relative;display:block;width:20px;height:18px}
.hd__ico i{position:absolute;top:0;bottom:0;width:10px;border:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat;transition:transform .8s var(--heavy)}
.hd__ico i:first-child{left:0;border-right-width:1px}
.hd__ico i:last-child{right:0;border-left-width:1px}
html.is-menu .hd__ico i:first-child{transform:translateX(-4px)}
html.is-menu .hd__ico i:last-child{transform:translateX(4px)}

/* 目次：引き戸が右から閉まってきて、その紙に目次が書いてある */
.gm{position:fixed;z-index:40;inset:0;overflow:auto;visibility:hidden;background:var(--paper);border-left:7px solid var(--wood);transform:translateX(101%);transition:transform .95s var(--heavy),visibility 0s .95s}
html.is-menu .gm{visibility:visible;transform:none;transition:transform .95s var(--heavy)}
html.is-menu,html.is-menu body{overflow:hidden}
.gm__in{display:flex;flex-direction:column;min-height:100%;padding:84px var(--gutter) 34px;background-image:linear-gradient(90deg,rgba(46,36,27,.07) 1px,transparent 1px),linear-gradient(180deg,rgba(46,36,27,.07) 1px,transparent 1px);background-size:50% 100%,100% 74px}
.gm__ttl{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;font-family:var(--ff-min);font-size:13px;letter-spacing:.3em;color:var(--mute)}
.gm__ttl span{font-family:var(--ff-en);font-style:italic;font-size:14px;letter-spacing:.02em}
.gm__list li{border-bottom:1px solid var(--line);opacity:0;transform:translateX(26px);transition:opacity .3s,transform .3s}
html.is-menu .gm__list li{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(.4s + var(--i,0) * .05s),transform 1s var(--ease-out) calc(.4s + var(--i,0) * .05s)}
.gm__list li:nth-child(2){--i:1}.gm__list li:nth-child(3){--i:2}.gm__list li:nth-child(4){--i:3}.gm__list li:nth-child(5){--i:4}.gm__list li:nth-child(6){--i:5}.gm__list li:nth-child(7){--i:6}.gm__list li:nth-child(8){--i:7}.gm__list li:nth-child(9){--i:8}
.gm__list a{display:grid;grid-template-columns:34px 1fr;align-items:center;min-height:50px;padding:4px 0}
.gm__list b,.gm__cta b{font-family:var(--ff-min);font-weight:500;font-size:14px;color:var(--kaki-d)}
.gm__list span{font-family:var(--ff-min);font-size:16px;letter-spacing:.1em;line-height:1.5}
.gm__cta{display:grid;grid-template-columns:34px 1fr auto;align-items:center;min-height:58px;margin-top:22px;padding:0 18px 0 16px;background:var(--niwa);color:var(--cream);font-family:var(--ff-min);font-size:15.5px;letter-spacing:.12em}
.gm__cta b{color:var(--kaki-l)}
.gm__cta i{position:relative;width:28px;height:1px;background:currentColor}
.gm__cta i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.gm__info{margin-top:auto;padding-top:26px;font-size:12px;line-height:1.95;color:var(--mute)}

/* ---------- 最初の画面 ---------- */
.hero{position:relative;background:var(--yami);color:var(--cream)}
.hero__stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;--ext:clamp(76px,13svh,120px);
  background:linear-gradient(180deg,rgba(22,18,14,.32),rgba(22,18,14,0)) 0 0/100% var(--ext) no-repeat,linear-gradient(90deg,#4E3F31 0%,#665746 18%,#6C5D4B 50%,#665A49 100%)}
.hero__media{position:absolute;left:0;right:0;bottom:0;top:var(--ext);will-change:transform;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60px);mask-image:linear-gradient(180deg,transparent 0,#000 60px)}
.hero__media picture,.hero__media img{display:block;width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:50% 0}
html.js .hero__media img{scale:1.08;filter:brightness(.42);transition:scale 3.4s var(--ease-out) .15s,filter 2.6s var(--ease) .1s}
html.js.is-loaded .hero__media img{scale:1;filter:brightness(1)}
.hero__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(30,27,23,0) 76%,rgba(30,27,23,.78) 94%,var(--yami) 100%)}
.hero__copy{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 76px)}
.hero__eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.22em;line-height:1.6;color:var(--cream);text-shadow:0 1px 10px rgba(18,14,10,.4)}
.hero__eyebrow::before{content:"";flex:none;width:20px;height:1px;background:var(--kaki-l)}
.hero__ttl{margin-top:12px;font-family:var(--ff-min);font-feature-settings:"palt";text-shadow:0 2px 22px rgba(18,14,10,.34)}
.hero__l{display:block}
.hero__l--1{font-weight:700;font-size:clamp(26px,8.2vw,38px);line-height:1.45;letter-spacing:.07em}
.hero__l--2{margin-top:4px;font-weight:500;font-size:clamp(19px,5.7vw,24px);line-height:1.75;letter-spacing:.12em}
html.js .hero__eyebrow{opacity:0;transform:translateY(10px);transition:opacity 1.2s var(--ease) .8s,transform 1.4s var(--ease-out) .8s}
html.js.is-loaded .hero__eyebrow{opacity:1;transform:none}
/* 言葉は、光が差すように左から現れる */
html.js .hero__l{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position 1.9s var(--ease) 1.05s,mask-position 1.9s var(--ease) 1.05s}
html.js .hero__l--2{transition-delay:1.4s}
html.js.is-loaded .hero__l{-webkit-mask-position:0 0;mask-position:0 0}
.hero__cap{display:none}
.hero__under{position:relative;z-index:2;overflow:hidden;padding:6px var(--gutter) 80px}
.hero__under::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:7px;background:linear-gradient(180deg,#45362A,#2A2019)}
.hero__under-in{position:relative;z-index:1;max-width:1240px;margin-inline:auto}
.hero__lead p{font-family:var(--ff-min);font-weight:500;font-size:16px;line-height:2.05;letter-spacing:.07em}
.hero__facts{margin-top:30px;border-top:1px solid var(--cream-l)}
.hero__facts div{display:grid;grid-template-columns:5.6em minmax(0,1fr);align-items:baseline;gap:10px;padding:13px 0 12px;border-bottom:1px solid var(--cream-l)}
.hero__facts dt{font-size:12px;letter-spacing:.16em;line-height:1.8;color:var(--cream-m)}
.hero__facts dd{font-family:var(--ff-min);font-weight:500;font-size:15px;line-height:1.7;letter-spacing:.08em}
html.js .hero__under-in{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) 1.6s,transform 1.4s var(--ease-out) 1.6s}
html.js.is-loaded .hero__under-in{opacity:1;transform:none}
.beam--hero i{top:-6%;right:-42%;width:172%;height:44%;transform:rotate(-17deg) skewX(-30deg)}

/* ---------- 一　いま ---------- */
.ima{padding-top:clamp(90px,25vw,126px)}
.ima__body{position:relative;margin-top:38px}
.ph--room{width:80%;margin-left:auto;margin-right:calc(var(--gutter) * -1)}
.ph--room .ph__z{aspect-ratio:3/4}
.ph--room .vcap{right:calc(100% + 13px)}
.voices{position:relative;z-index:3;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:9px;margin-top:-128px}
.voice{position:relative;flex:1 1 0;min-width:0;height:252px;padding:30px 0 34px;display:flex;justify-content:center;background:#FBF8F2;border:1px solid #E2D9C8;box-shadow:0 22px 34px -26px rgba(30,24,18,.55);transform:rotate(var(--t,0deg))}
.voice:nth-child(1){--t:.7deg}
.voice:nth-child(2){--t:-.6deg;margin-top:38px}
.voice:nth-child(3){--t:.4deg;margin-top:12px}
.voice:nth-child(4){--t:-.8deg;margin-top:54px}
.voice::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:24px;background:var(--line2)}
.voice::after{content:"";position:absolute;left:50%;top:11px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--kaki)}
.voice p{height:100%;writing-mode:vertical-rl;font-family:var(--ff-min);font-weight:500;font-size:15px;line-height:1.85;letter-spacing:.13em;white-space:nowrap}
.voice__n{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);font-family:var(--ff-min);font-size:12px;line-height:1;color:var(--mute)}
html.js .voice[data-r="strip"]{opacity:0;transform:translateY(-26px) rotate(calc(var(--t,0deg) * -3));transition:opacity 1s var(--ease) var(--d,0s),transform 1.6s var(--ease-out) var(--d,0s)}
html.js .voice[data-r="strip"].is-in{opacity:1;transform:rotate(var(--t,0deg))}
.ima__say{margin-top:76px}
.say{font-family:var(--ff-min);font-weight:500;font-size:clamp(20px,5.9vw,26px);line-height:1.85;letter-spacing:.08em;font-feature-settings:"palt"}
.say__sub{margin-top:14px;font-size:16px;line-height:1.95;color:var(--txt)}

/* ---------- 二　決めていること ---------- */
.ph--key{width:72%;margin-top:42px}
.ph--key .ph__z{aspect-ratio:3/4}
.ph--key .vcap{left:calc(100% + 14px)}
.rules{margin-top:50px;border-top:1px solid var(--line)}
.rules li{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;padding:26px 0 28px;border-bottom:1px solid var(--line)}
.rules__n{grid-row:1/3;position:relative;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--ink);font-family:var(--ff-min);font-weight:500;font-size:20px;line-height:1}
.rules__n::after{content:"";position:absolute;inset:3px;border:1px solid var(--ink);opacity:.22}
.rules h3{padding-top:8px;font-family:var(--ff-min);font-size:19px;line-height:1.6;letter-spacing:.08em}
.rules p{margin-top:8px;font-size:16px;line-height:1.95;color:var(--txt)}
.honest{position:relative;margin-top:40px;padding:24px 22px 26px 26px;background:var(--face);border-left:3px solid var(--wood)}
.honest p{font-family:var(--ff-min);font-weight:500;font-size:16px;line-height:2.1;letter-spacing:.06em}

/* ---------- 合間：夕暮れの道 ---------- */
.mado{position:relative;height:76vh;height:76svh;min-height:460px;max-height:880px;overflow:hidden;background:var(--yami);color:var(--cream)}
.mado__ph{position:absolute;left:0;right:0;top:-9%;bottom:-9%}
.mado__ph img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:28% 50%}
.mado::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,12,9,.62) 0%,rgba(16,12,9,.22) 42%,rgba(16,12,9,0) 70%),linear-gradient(180deg,rgba(16,12,9,.3),rgba(16,12,9,0) 34%)}
.mado__say{position:absolute;z-index:2;top:11%;left:var(--gutter);display:flex;flex-direction:row-reverse;gap:.55em;font-family:var(--ff-min);font-weight:500;font-size:clamp(21px,6.2vw,34px);line-height:1;letter-spacing:.24em;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.mado__say span{display:block;writing-mode:vertical-rl;white-space:nowrap}
.mado__say span:nth-child(2){margin-top:2.6em}
html.js .mado__say[data-r="ln"] span{-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 55%);mask-image:linear-gradient(180deg,#000 45%,transparent 55%);-webkit-mask-size:100% 240%;mask-size:100% 240%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 100%;mask-position:0 100%;transition:-webkit-mask-position 2.2s var(--ease) .2s,mask-position 2.2s var(--ease) .2s}
html.js .mado__say[data-r="ln"] span:nth-child(2){transition-delay:.85s}
html.js .mado__say[data-r="ln"].is-in span{-webkit-mask-position:0 0;mask-position:0 0}

/* ---------- 三　三つの道（4枚の引き戸） ---------- */
.michi{background:var(--face);overflow:hidden;--mute:#5D554B}
.beam--michi i{--bl:rgba(255,253,247,.72);--bc:var(--face);--bw:96px;--bh:64px;--bk:8px;top:3%;right:-36%;width:176%;height:15%;transform:rotate(-21deg) skewX(-30deg)}
.roads{margin-top:36px}
.roads__set{position:relative;padding:11px 9px 16px;background:linear-gradient(180deg,#3D3024 0,var(--wood) 11px,var(--wood) calc(100% - 16px),#3A2D21 100%);box-shadow:0 34px 50px -38px rgba(30,24,18,.75)}
.roads__set::before{content:"";position:absolute;left:9px;right:9px;top:5px;height:1px;background:rgba(0,0,0,.4)}
.roads__set::after{content:"";position:absolute;left:9px;right:9px;bottom:6px;height:3px;border-top:1px solid rgba(0,0,0,.45);border-bottom:1px solid rgba(255,255,255,.07)}
.roads__doors{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:clamp(272px,77vw,336px);overflow:hidden;background:#15110D}
.rd{position:relative;z-index:1;display:block;height:100%;min-width:0}
.rd:nth-child(2){z-index:2}.rd:nth-child(3){z-index:3}.rd:nth-child(4){z-index:4}
.rd:focus-visible{outline:2px solid var(--kaki);outline-offset:-7px}
.rd__view{position:absolute;inset:0;overflow:hidden;background:#1A1511}
.rd__view img{width:100%;height:100%;max-width:none;object-fit:cover;filter:brightness(.8) saturate(.92)}
.rd:nth-child(1) .rd__view img{object-position:84% 50%}
.rd:nth-child(2) .rd__view img{object-position:36% 50%}
.rd:nth-child(3) .rd__view img{object-position:72% 50%}
.rd:nth-child(4) .rd__view img{object-position:44% 50%}
.rd__view b{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);writing-mode:vertical-rl;font-family:var(--ff-min);font-weight:500;font-size:15px;letter-spacing:.3em;line-height:1;color:var(--cream);text-shadow:0 1px 10px rgba(0,0,0,.75);white-space:nowrap}
.rd__door{position:absolute;inset:0;z-index:1;--cols:2;--rows:11;--k:2px;--f:5px;transform:translateX(0);transition:transform 1.3s var(--heavy),box-shadow 1.3s var(--ease)}
.rd__door::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,252,240,.4),rgba(255,252,240,0) 46%,rgba(60,44,28,.08) 100%)}
.rd__door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;border-top:3px solid var(--wood-d);background:repeating-linear-gradient(90deg,#33281E 0 2px,#2A2119 2px 6px,#30251C 6px 9px),var(--wood)}
.rd__tag{position:absolute;z-index:2;left:50%;top:41%;transform:translate(-50%,-50%);padding:15px 8px 11px;background:#FFFCF6;border:1px solid var(--line2);writing-mode:vertical-rl;font-family:var(--ff-min);font-weight:700;font-size:clamp(19px,5.6vw,25px);letter-spacing:.26em;line-height:1;color:var(--ink);white-space:nowrap;box-shadow:0 8px 16px -12px rgba(0,0,0,.5)}
.rd--mada .rd__tag{padding:13px 7px 10px;background:var(--niwa);border-color:var(--niwa);color:var(--cream);font-weight:500;font-size:clamp(13.5px,3.9vw,17px);letter-spacing:.16em}
@media (hover:hover){.rd:not(.is-open):hover .rd__door{transform:translateX(7%)}}
.rd.is-open .rd__door{transform:translateX(100%);box-shadow:-14px 0 24px -6px rgba(0,0,0,.55)}
.roads__hint{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;letter-spacing:.08em;line-height:1.7;color:var(--mute)}
.roads__hint i{flex:none;width:14px;height:16px;border:1px solid currentColor;background:linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat}
.roads__panels{margin-top:24px}
.road{position:relative;padding:28px 22px 26px;background:var(--paper);box-shadow:0 26px 40px -34px rgba(30,24,18,.5)}
.road::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--wood)}
.road+.road{margin-top:18px}
html.js .road{display:none}
html.js .road+.road{margin-top:0}
html.js .road.is-active{display:block;animation:roadIn 1.1s var(--ease-out) both}
@keyframes roadIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.road__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.road__k{font-family:var(--ff-min);font-weight:700;font-size:28px;line-height:1.3;letter-spacing:.14em}
.road--mada .road__k{font-size:22px;color:var(--niwa)}
.road__sub{font-family:var(--ff-min);font-weight:500;font-size:14px;letter-spacing:.1em;color:var(--mute)}
.road__dl>div{padding:14px 0 15px;border-bottom:1px dashed var(--line2)}
.road__dl>div:last-child{padding-bottom:0;border-bottom:0}
.road__dl dt{font-size:12px;font-weight:500;letter-spacing:.2em;line-height:1.8;color:var(--kaki-d)}
.road__dl dd{margin-top:3px;font-size:16px;line-height:1.9;color:var(--txt)}
.road__dl dd b{font-family:var(--ff-min);font-weight:500;font-size:17px;letter-spacing:.06em;color:var(--ink)}
.road__care dd{color:var(--ink)}
.flow{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px}
.flow li{display:flex;align-items:center;font-family:var(--ff-min);font-weight:500;font-size:14.5px;line-height:1.7;color:var(--ink)}
.flow li:not(:last-child)::after{content:"";flex:none;width:18px;height:7px;margin:0 9px;background:linear-gradient(var(--kaki),var(--kaki)) 0 50%/100% 1px no-repeat,linear-gradient(-45deg,transparent 45%,var(--kaki) 45% 58%,transparent 58%) 100% 0/5px 4px no-repeat,linear-gradient(45deg,transparent 45%,var(--kaki) 45% 58%,transparent 58%) 100% 100%/5px 4px no-repeat}
.mn{display:inline-block;margin-right:8px;padding:1px 6px 0;border:1px solid currentColor;font-size:12px;font-weight:500;letter-spacing:.1em;line-height:1.5;vertical-align:1px}
.mn--in{color:var(--niwa)}
.mn--out{color:var(--kaki-d)}
.road__lead{margin-top:16px;font-family:var(--ff-min);font-weight:500;font-size:16px;letter-spacing:.06em}
.asks{margin-top:6px}
.asks li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px dashed var(--line2)}
.asks b{display:grid;place-items:center;width:32px;height:32px;background:var(--niwa);color:var(--cream);font-family:var(--ff-min);font-weight:500;font-size:14px;line-height:1}
.asks p{font-family:var(--ff-min);font-weight:500;font-size:16px;line-height:1.7;letter-spacing:.04em}
.asks small{display:block;margin-top:4px;font-family:var(--ff-go);font-weight:400;font-size:13px;line-height:1.8;letter-spacing:.04em;color:var(--mute)}
.road__foot{margin-top:16px;font-size:13.5px;line-height:1.9;color:var(--txt)}

/* ---------- 四　先にやる事（押すと「済」） ---------- */
.ph--docs{margin:40px calc(var(--gutter) * -1) 0}
.ph--docs .ph__z{aspect-ratio:3/2}
.todo{margin-top:36px}
.todo__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--wood)}
.todo__left{display:flex;align-items:baseline;gap:8px;font-family:var(--ff-min);font-weight:500;font-size:15px;letter-spacing:.12em;line-height:1}
.todo__n{display:inline-block;min-width:1.05em;font-weight:500;font-size:56px;line-height:.9;letter-spacing:0;text-align:center;color:var(--kaki);font-variant-numeric:tabular-nums}
.todo__n.is-tick{animation:tick .7s var(--ease-out)}
@keyframes tick{from{opacity:0;transform:translateY(-38%)}to{opacity:1;transform:none}}
.todo__bar{display:grid;grid-template-columns:repeat(8,1fr);width:128px;height:20px;margin-bottom:6px;border:2px solid var(--wood);background:var(--shoji)}
.todo__bar i{border-left:1px solid var(--wood);transition:background-color .7s var(--ease)}
.todo__bar i:first-child{border-left:0}
.todo__bar i.on{background:var(--kaki)}
.td{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;width:100%;min-height:44px;padding:17px 0 16px;border-bottom:1px solid var(--line)}
.td__box{grid-row:1/3;position:relative;width:32px;height:32px;margin-top:3px;border:1.5px solid var(--wood);background:linear-gradient(var(--line2),var(--line2)) 50% 0/1px 100% no-repeat,linear-gradient(var(--line2),var(--line2)) 0 50%/100% 1px no-repeat,var(--shoji)}
.td__seal{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%;background:var(--kaki-d);box-shadow:inset 0 0 0 2px var(--kaki-d),inset 0 0 0 3.5px rgba(251,236,222,.55);color:#FBECDE;font-family:var(--ff-min);font-weight:700;font-size:16px;line-height:1;opacity:0;transform:scale(1.7) rotate(-30deg);transition:opacity .2s var(--ease),transform .55s cubic-bezier(.2,1.5,.45,1)}
.td[aria-pressed="true"] .td__seal{opacity:.95;transform:scale(1) rotate(-12deg)}
.td__t{position:relative;justify-self:start;font-family:var(--ff-min);font-weight:500;font-size:17px;line-height:1.6;letter-spacing:.06em;transition:color .5s}
.td__t::after{content:"";position:absolute;left:-3px;right:-3px;top:55%;height:1.5px;background:var(--kaki-d);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out) .12s}
.td[aria-pressed="true"] .td__t{color:var(--mute)}
.td[aria-pressed="true"] .td__t::after{transform:scaleX(1)}
.td__d{margin-top:2px;font-size:13px;line-height:1.85;color:var(--mute)}
.todo__done{margin-top:20px;padding:15px 20px;background:var(--niwa);color:var(--cream);font-family:var(--ff-min);font-weight:500;font-size:15.5px;line-height:1.8;letter-spacing:.08em;animation:roadIn .9s var(--ease-out)}
.todo__done[hidden]{display:none}
.todo__note{margin-top:14px}

/* ---------- 五　最初の相談の流れ ---------- */
.ph--talk{width:84%;margin-left:calc(var(--gutter) * -1)}
.ph--talk .ph__z{aspect-ratio:4/5}
.ph--talk .vcap{left:calc(100% + 13px)}
.nagare__txt{margin-top:56px}
.steps{margin-top:34px;border-top:2px solid var(--wood)}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);border-bottom:1px solid var(--line)}
.steps__when{display:flex;justify-content:center;padding:21px 0 16px;border-right:1px solid var(--line)}
.steps__when>span{writing-mode:vertical-rl;font-family:var(--ff-min);font-weight:500;font-size:12.5px;letter-spacing:.2em;line-height:1.4;color:var(--kaki-d);white-space:nowrap}
.steps__b{padding:18px 0 22px 18px}
.steps h3{display:flex;align-items:baseline;gap:10px;font-family:var(--ff-min);font-size:17.5px;line-height:1.6;letter-spacing:.06em}
.steps h3 b{flex:none;font-weight:500;font-size:13px;color:var(--mute)}
.steps__b>p{margin-top:6px;font-size:16px;line-height:1.9;color:var(--txt)}
.steps .tag{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:3px 10px 3px 8px;border:1px solid var(--line2);font-size:12px;font-weight:500;letter-spacing:.08em;line-height:1.8;color:var(--niwa)}
.steps .tag::before{content:"";flex:none;width:11px;height:13px;border:1px solid currentColor;background:linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat}
.nagare__note{margin-top:22px;font-family:var(--ff-min);font-weight:500;font-size:15px;letter-spacing:.06em;color:var(--niwa)}

/* ---------- 六　お金のこと（障子の格子の表） ---------- */
.fees{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;margin-top:36px;border:5px solid var(--wood);background:var(--wood)}
.fee{grid-column:1/-1;padding:20px 20px 22px;background:var(--shoji)}
.fee--free{grid-column:auto;padding:18px 16px 20px}
.fee dt{font-size:12px;font-weight:500;letter-spacing:.2em;line-height:1.8;color:var(--mute)}
.fee b{display:block;margin-top:4px;font-family:var(--ff-min);font-weight:500;font-size:21px;line-height:1.5;letter-spacing:.05em}
.fee b small{font-size:12px;letter-spacing:.04em;color:var(--mute)}
.fee--free b{font-size:30px;line-height:1.3;color:var(--kaki)}
.fee dd span{display:block;margin-top:6px;font-size:14px;line-height:1.9;color:var(--txt)}
html.js .fees[data-r="kumi"] .fee{opacity:0;transition:opacity 1.1s var(--ease) calc(var(--i,0) * .12s + .15s)}
html.js .fees[data-r="kumi"].is-in .fee{opacity:1}
.fee:nth-child(2){--i:1}.fee:nth-child(3){--i:2}.fee:nth-child(4){--i:3}.fee:nth-child(5){--i:4}.fee:nth-child(6){--i:5}
.okane__note{margin-top:16px}

/* ---------- 七　店主から ---------- */
.tenshu{background:var(--face);--mute:#5D554B}
.ph--garden{margin-inline:calc(var(--gutter) * -1)}
.ph--garden .ph__z{aspect-ratio:4/5}
.tenshu__txt{margin-top:52px}
.tenshu__cols{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:start;margin-top:8px}
.tenshu__ttl{grid-column:2;grid-row:1;writing-mode:vertical-rl;font-size:25px;line-height:1.75;letter-spacing:.22em;white-space:nowrap;text-wrap:nowrap}
.letter{grid-column:1;grid-row:1}
.letter p{font-family:var(--ff-min);font-weight:500;font-size:16px;line-height:2.2;letter-spacing:.06em;text-wrap:pretty}
.letter p+p{margin-top:1.2em}
.sign{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:4px 12px;margin-top:30px}
.letter .sign{margin-top:30px}
.sign small{font-family:var(--ff-go);font-weight:400;font-size:12px;letter-spacing:.1em;color:var(--mute)}
.sign span{font-family:var(--ff-min);font-size:26px;letter-spacing:.3em;line-height:1.2}

/* ---------- 八　よくある質問 ---------- */
.faq__list{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:14px;min-height:44px;padding:19px 0;cursor:pointer;list-style:none;font-family:var(--ff-min);font-weight:500;font-size:16px;line-height:1.7;letter-spacing:.05em}
.faq summary::-webkit-details-marker{display:none}
.faq__q{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);font-family:var(--ff-min);font-weight:500;font-size:13.5px;line-height:1}
.faq summary i{position:relative;width:18px;height:16px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;top:0;bottom:0;width:8px;border:1px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) 0 50%/100% 1px no-repeat;transition:transform .6s var(--heavy)}
.faq summary i::before{left:1px}
.faq summary i::after{right:1px}
.faq details[open] summary i::before{transform:translateX(-4px)}
.faq details[open] summary i::after{transform:translateX(4px)}
.faq__a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:0 0 22px}
.faq__a>b{display:grid;place-items:center;width:30px;height:30px;background:var(--niwa);color:var(--cream);font-family:var(--ff-min);font-weight:500;font-size:13.5px;line-height:1}
.faq__a p{padding-top:2px;font-size:16px;line-height:1.95;color:var(--txt)}
.faq details[open] .faq__a{animation:faqIn .8s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 九　相談の入口（暗がりと、少し開いた障子） ---------- */
.soudan{background:var(--yami);color:var(--cream);overflow:hidden;padding-top:clamp(196px,54vw,236px)}
.akari{position:absolute;inset:0;pointer-events:none}
.akari__frame{position:absolute;z-index:1;top:44px;left:40%;right:-14px;height:118px;border:7px solid var(--wood-d);border-right:0;background:var(--wood-d);overflow:hidden;box-shadow:0 0 80px rgba(255,214,150,.08)}
.akari__out{position:absolute;inset:0;background:linear-gradient(180deg,#FFF3DB,#F6D8A8 60%,#E7B777)}
.akari__door{position:absolute;inset:0;--cols:4;--rows:3;--k:2px;--f:0px;--wood:var(--wood-d);background-color:#F5E4C6;transform:translateX(calc(var(--p,1) * 54%));box-shadow:-12px 0 22px rgba(0,0,0,.35)}
.akari__door::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 30% 40%,rgba(255,250,236,.55),rgba(255,250,236,0) 70%)}
.beam--soudan i{--bl:rgba(255,222,170,.15);--bw:72px;--bh:50px;--bk:6px;top:150px;right:-6%;width:150%;height:24%;transform:rotate(-24deg) skewX(-26deg)}
.lbl--inv .lbl__en{color:var(--cream-m)}
.lbl--inv .lbl__en::before{background:var(--cream-l)}
.soudan__ttl{font-family:var(--ff-min);font-weight:500;font-size:clamp(22px,6.4vw,32px);line-height:1.6;letter-spacing:.06em;font-feature-settings:"palt"}
.soudan__tx{margin-top:20px;font-size:16px;line-height:2;color:var(--cream-m)}
.soudan__pts{margin-top:18px}
.soudan__pts li{position:relative;padding:5px 0 5px 20px;font-size:16px;line-height:1.85}
.soudan__pts li::before{content:"";position:absolute;left:0;top:calc(5px + .95em - 3px);width:6px;height:6px;background:var(--kaki)}
.btn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;max-width:440px;min-height:66px;margin-top:32px;padding:18px 22px 18px 24px;overflow:hidden;background:var(--cream);color:var(--ink);font-family:var(--ff-min);font-weight:500;font-size:17px;letter-spacing:.12em;line-height:1.5;box-shadow:0 0 0 1px rgba(244,239,228,.2),0 24px 50px -24px rgba(255,214,150,.38)}
.btn::before{content:"";position:absolute;inset:0;background:#FFFFFF;transform:translateX(-101%);transition:transform .8s var(--heavy)}
.btn:hover::before{transform:none}
.btn span,.btn i{position:relative}
.btn i{flex:none;width:34px;height:1px;background:var(--kaki-d);transition:width .6s var(--ease-out)}
.btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--kaki-d);border-right:1px solid var(--kaki-d);transform:rotate(45deg)}
.btn:hover i{width:46px}
.soudan__note{margin-top:12px;font-size:12px;line-height:1.8;color:var(--cream-m)}
.soudan__tel{margin-top:44px;padding-top:24px;border-top:1px solid var(--cream-l)}
.soudan__telk{font-size:12px;letter-spacing:.2em;line-height:1.8;color:var(--cream-m)}
.soudan__teln{margin-top:2px;font-family:var(--ff-min);font-weight:500;font-size:30px;letter-spacing:.08em;line-height:1.5}
.soudan__tels{margin-top:4px;font-size:13px;line-height:1.9;color:var(--cream-m)}

/* ---------- 十　店の案内 ---------- */
.ph--gate{width:78%;margin-left:auto}
.ph--gate .ph__z{aspect-ratio:3/4}
.ph--gate .vcap{right:calc(100% + 13px)}
.mise__txt{margin-top:52px}
.info{margin-top:28px;border-top:1px solid var(--line)}
.info div{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.info dt{font-size:12px;font-weight:500;letter-spacing:.16em;line-height:2.1;color:var(--mute)}
.info dd{font-size:16px;line-height:1.9}
.route{margin-top:40px}
.route__map{width:100%;height:auto}
.route__st path{stroke:var(--face);stroke-width:8}
.route__main{stroke:var(--face);stroke-width:13}
.route__rail{stroke:var(--ink);stroke-width:6}
.route__rail2{stroke:var(--paper);stroke-width:2.4;stroke-dasharray:10 10}
.route__eki{fill:var(--ink)}
.route text{font-family:var(--ff-go);font-size:15px;letter-spacing:.04em;fill:var(--ink)}
.route .route__ekit{fill:var(--cream);font-family:var(--ff-min);font-size:15px;letter-spacing:.08em}
.route__way{stroke:var(--kaki);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
html.js .route .route__way{stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease) .5s}
html.js .route.is-in .route__way{stroke-dashoffset:0}
.route__kaki{fill:var(--kaki)}
.route__shop{fill:var(--niwa)}
.route .route__shopt{font-family:var(--ff-min);font-weight:500;font-size:15px;fill:var(--niwa)}
.route__n path{stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.route__steps{margin-top:18px}
.route__steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:5px 0;font-size:16px;line-height:1.85}
.route__steps b{font-family:var(--ff-min);font-weight:500;color:var(--kaki-d)}
.route .note{margin-top:10px}

/* ---------- 下の帯 ---------- */
.ft{position:relative;background:var(--niwa);color:var(--cream)}
.ft__in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;max-width:1240px;margin-inline:auto;padding:64px var(--gutter) 52px}
.ft__logo{grid-column:2;grid-row:1;writing-mode:vertical-rl;font-family:var(--ff-min);font-weight:700;font-size:34px;letter-spacing:.34em;line-height:1;white-space:nowrap}
.ft__body{grid-column:1;grid-row:1}
.ft__line{font-family:var(--ff-min);font-weight:500;font-size:17px;line-height:1.9;letter-spacing:.08em}
.ft__addr{margin-top:22px;font-size:12.5px;line-height:2;color:var(--cream-m)}
.ft__addr b{font-family:var(--ff-min);font-weight:500;font-size:15px;letter-spacing:.16em;color:var(--cream)}
.ft__nav{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-top:20px;padding-top:8px;border-top:1px solid rgba(244,239,228,.18);font-size:13px;letter-spacing:.08em}
.ft__nav a{display:flex;align-items:center;min-height:44px}
.sample{padding:22px var(--gutter) calc(96px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);font-size:12px;line-height:1.95;color:var(--txt)}
.sample__lnk{margin-top:4px}
.sample__lnk a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--kaki)}

/* 相談の札（右の端から引き戸のように出る）と、見本の札 */
.tab{position:fixed;z-index:30;right:0;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;width:44px;padding:18px 0 15px;background:var(--niwa);color:var(--cream);font-family:var(--ff-min);font-weight:500;font-size:14px;letter-spacing:.32em;line-height:1;box-shadow:-8px 10px 24px -12px rgba(0,0,0,.45);transform:translateX(102%);transition:transform .9s var(--heavy)}
.tab::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:1px;background:rgba(244,239,228,.28)}
.tab::after{content:"";position:absolute;top:8px;left:50%;width:5px;height:5px;margin-left:-2px;background:var(--kaki-l)}
.tab span{writing-mode:vertical-rl;white-space:nowrap}
.tab.is-on{transform:none}
.pill{position:fixed;z-index:30;left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;height:44px;padding:0 11px 0 10px;background:rgba(30,27,23,.92);color:var(--cream);font-size:12px;letter-spacing:.02em;line-height:1.4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
.pill span{color:var(--kaki-l)}
.pill i{font-style:normal;color:rgba(244,239,228,.35)}
.pill a{display:flex;align-items:center;height:100%;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(244,239,228,.45)}
html.is-menu .tab,html.is-menu .pill{opacity:0;pointer-events:none}

/* ---------- 止めた姿（確かめ用） ---------- */
html.static .tab{transform:none}

/* ================= 広い画面 ================= */
@media (min-width:900px){
  html{scroll-padding-top:92px}
  body{font-size:15.5px}
  .sec{padding-block:clamp(140px,12.5vw,210px)}
  .lbl{margin-bottom:34px}
  .h2{font-size:clamp(31px,2.85vw,42px);line-height:1.6}
  .tx{margin-top:26px;font-size:16px}

  .hd{height:86px}
  .hd__mark{width:30px;height:30px}
  .hd__name{font-size:19.5px}
  .hd__en{display:block;margin-left:4px;padding-left:14px;border-left:1px solid currentColor;font-family:var(--ff-en);font-style:italic;font-size:13.5px;letter-spacing:.03em;line-height:1.1;opacity:.78}
  .hd__btn{display:none}
  .hd__nav{display:flex;gap:clamp(18px,2.1vw,34px);margin-right:clamp(20px,2.6vw,40px);font-size:13.5px;font-weight:500;letter-spacing:.14em}
  .hd__nav a{position:relative;padding:10px 0}
  .hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease-out)}
  .hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .hd__cta{display:flex;align-items:center;gap:12px;height:48px;padding:0 24px;border:1px solid currentColor;font-family:var(--ff-min);font-weight:500;font-size:14.5px;letter-spacing:.16em;transition:background-color .5s,color .5s,border-color .5s}
  .hd__cta::before{content:"";width:7px;height:7px;background:var(--kaki)}
  .hd__cta:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  .hd.is-solid .hd__cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

  .intro__door{--cols:4;--rows:12;--k:3px;--f:12px}
  .intro__door--l{border-right-width:7px}
  .intro__door--r{border-left-width:7px}
  .intro__name{left:20%}
  .intro__name span{font-size:21px}
  .intro__name b{width:28px;height:28px;font-size:14px}

  .hero__stage{--ext:0px;min-height:640px;background:var(--yami)}
  .hero__media{top:0;-webkit-mask-image:none;mask-image:none}
  .hero__media img{object-position:50% 70%}
  .hero__veil{background:
    linear-gradient(90deg,rgba(14,12,9,.74) 0%,rgba(14,12,9,.52) 30%,rgba(14,12,9,.08) 52%,rgba(14,12,9,0) 62%),
    linear-gradient(180deg,rgba(14,12,9,.6) 0,rgba(14,12,9,0) 170px),
    linear-gradient(180deg,rgba(30,27,23,0) 58%,rgba(30,27,23,.86) 88%,var(--yami) 100%)}
  .hero__copy{left:7.5vw;right:auto;top:45%;transform:translateY(-50%);width:min(46vw,700px)}
  .hero__eyebrow{font-size:13px;letter-spacing:.3em}
  .hero__ttl{margin-top:24px}
  .hero__l--1{font-size:clamp(44px,4.4vw,68px);line-height:1.38}
  .hero__l--2{margin-top:12px;font-size:clamp(25px,2.45vw,38px)}
  .hero__cap{display:block;position:absolute;z-index:2;right:calc(var(--gutter) - 4px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--ff-min);font-weight:500;font-size:13px;letter-spacing:.44em;line-height:1;color:var(--cream);white-space:nowrap;text-shadow:0 0 14px rgba(14,12,9,.9),0 1px 3px rgba(14,12,9,.8)}
  html.js .hero__cap{opacity:0;transition:opacity 1.6s var(--ease) 2.2s}
  html.js.is-loaded .hero__cap{opacity:1}
  .hero__under{margin-top:-196px;padding:0 0 124px}
  .hero__under-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6vw;align-items:end;max-width:none;padding:0 var(--gutter) 0 7.5vw}
  .hero__lead p{font-size:17px}
  .hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;border-top:0}
  .hero__facts div{display:block;padding:2px 0 8px 26px;border-bottom:0;border-left:1px solid var(--cream-l)}
  .hero__facts dd{margin-top:8px;font-size:16px}
  .beam--hero i{top:-12%;right:-4%;width:86%;height:74%;transform:rotate(-8deg) skewX(-42deg)}

  .ima__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:6%;align-items:start}
  .ima__head{grid-column:1;grid-row:1;padding-top:56px}
  .ima__body{grid-column:2;grid-row:1;margin-top:0}
  .ph--room{width:84%;margin:0 0 0 auto}
  .ph--room .ph__z{aspect-ratio:4/5}
  .voices{position:absolute;left:-42%;bottom:-96px;width:84%;margin:0;gap:16px}
  .voice{height:300px;padding:40px 0 42px}
  .voice p{font-size:17px}
  .voice::before{height:34px}
  .ima__say{grid-column:1/-1;grid-row:2;margin-top:210px;text-align:center}
  .say{font-size:clamp(26px,2.4vw,34px)}
  .say__sub{margin-top:18px;font-size:16px}

  .kimete__in{display:grid;grid-template-columns:auto minmax(0,.95fr) minmax(0,1.05fr);column-gap:5.5%;align-items:start}
  .kimete__head{display:contents}
  .kimete__head .lbl{grid-column:1/-1;grid-row:1}
  .kimete__ttl{grid-column:1;grid-row:2/4;writing-mode:vertical-rl;font-size:clamp(32px,2.9vw,42px);line-height:1.8;letter-spacing:.2em;white-space:nowrap;text-wrap:nowrap}
  .ph--key{grid-column:2;grid-row:2/4;width:100%;margin-top:6px}
  .ph--key .ph__z{aspect-ratio:2/3}
  .rules{grid-column:3;grid-row:2;margin-top:6px}
  .rules li{padding:30px 0 32px}
  .rules h3{font-size:21px}
  .honest{grid-column:3;grid-row:3;margin-top:44px;padding:30px 32px 32px 34px}
  .honest p{font-size:16px}

  .mado{height:90vh;min-height:620px;max-height:none}
  .mado__say{top:15%;left:8vw;font-size:clamp(30px,2.8vw,42px)}

  .beam--michi i{top:2%;right:-6%;width:108%;height:30%;transform:rotate(-11deg) skewX(-38deg);--bw:120px;--bh:80px;--bk:10px}
  .michi__head{max-width:760px}
  .roads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:6%;align-items:start;margin-top:64px}
  .roads__left{position:sticky;top:120px}
  .roads__doors{height:min(520px,64vh)}
  .rd__door{--rows:13;--f:6px}
  .rd__tag{padding:22px 11px 15px;font-size:29px}
  .rd--mada .rd__tag{padding:18px 9px 12px;font-size:18px}
  .rd__view b{font-size:17px;bottom:24px}
  .roads__panels{margin-top:0}
  .road{padding:38px 42px 36px}
  .road__k{font-size:36px}
  .road--mada .road__k{font-size:28px}
  .road__dl>div{display:grid;grid-template-columns:9.6em minmax(0,1fr);gap:22px;align-items:baseline;padding:16px 0 17px}
  .road__dl dd{margin-top:0;font-size:16px}
  .asks p{font-size:17px}

  .saki__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:7%;align-items:start}
  .saki__head{grid-column:1/-1;max-width:760px}
  .ph--docs{grid-column:1;grid-row:2;position:sticky;top:120px;margin:64px 0 0}
  .ph--docs .ph__z{aspect-ratio:4/5}
  .todo{grid-column:2;grid-row:2;margin-top:64px}
  .td{padding:20px 0 19px}
  .td__t{font-size:18px}
  .td__d{font-size:13.5px}

  .nagare__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:8%;align-items:start}
  .ph--talk{position:sticky;top:120px;width:100%;margin:0}
  .ph--talk .ph__z{aspect-ratio:3/4}
  .ph--talk .vcap{left:auto;right:calc(100% + 16px)}
  .nagare__txt{margin-top:0;padding-top:30px}
  .steps{margin-top:44px}
  .steps li{grid-template-columns:58px minmax(0,1fr)}
  .steps__when{padding:28px 0 22px}
  .steps__when>span{font-size:13.5px}
  .steps__b{padding:26px 0 30px 32px}
  .steps h3{font-size:20px}
  .steps__b>p{font-size:16px}

  .okane__head{max-width:760px}
  .fees{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:62px;border-width:8px;gap:3px}
  .fee,.fee--free{grid-column:auto;min-height:240px;padding:32px 32px 34px}
  .fee b{font-size:24px}
  .fee--free b{font-size:38px}
  .fee dd span{font-size:14px}

  .tenshu__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8%;align-items:center}
  .ph--garden{grid-column:2;grid-row:1;margin:0}
  .ph--garden .ph__z{aspect-ratio:3/4}
  .tenshu__txt{grid-column:1;grid-row:1;margin-top:0}
  .tenshu__cols{column-gap:52px;margin-top:20px}
  .tenshu__ttl{font-size:clamp(30px,2.6vw,38px)}
  .letter p{font-size:16px;line-height:2.45}

  .faq__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:7%;align-items:start}
  .faq__head{position:sticky;top:120px}
  .faq__list{margin-top:0}
  .faq summary{padding:26px 0;font-size:17px}
  .faq__a{padding:0 60px 30px 0}
  .faq__a p{font-size:16px}

  .soudan{padding-block:clamp(170px,14vw,230px)}
  .soudan__in>*{max-width:600px}
  .akari__frame{top:14%;left:auto;right:8vw;width:min(24vw,340px);height:min(62%,560px);border-right:7px solid var(--wood-d)}
  .akari__door{--cols:2;--rows:9;transform:translateX(calc(var(--p,1) * 46%))}
  .beam--soudan i{top:auto;bottom:-4%;right:10vw;width:72%;height:44%;transform:rotate(-4deg) skewX(-50deg);--bw:110px;--bh:76px;--bk:9px}
  .soudan__ttl{font-size:clamp(34px,3.3vw,48px)}
  .soudan__tx{font-size:16px}
  .btn{margin-top:40px}

  .mise__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:8%;align-items:start}
  .ph--gate{position:sticky;top:120px;width:100%;margin:0}
  .ph--gate .ph__z{aspect-ratio:2/3}
  .ph--gate .vcap{right:auto;left:calc(100% + 16px)}
  .mise__txt{margin-top:0;padding-top:30px}
  .info div{grid-template-columns:7em minmax(0,1fr);padding:18px 0}
  .info dd{font-size:16px}
  .route{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;margin-top:52px}
  .route__steps{margin-top:0}
  .route text{font-size:10px}
  .route .route__ekit,.route .route__shopt{font-size:11.5px}
  .route .note{grid-column:1/-1;margin-top:0}

  .ft__in{padding:110px var(--gutter) 90px;column-gap:60px}
  .ft__logo{font-size:56px}
  .ft__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 60px;align-content:start}
  .ft__line{grid-column:1/-1;font-size:24px}
  .ft__addr{margin-top:0}
  .ft__nav{margin-top:0;padding-top:0;border-top:0}
  .sample{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-bottom:22px;padding-left:250px}
  .sample br{display:none}
  .sample__lnk{flex:none;margin-top:0}
  .tab{bottom:auto;top:50%;width:52px;padding:24px 0 20px;font-size:15px;transform:translate(102%,-50%)}
  .tab.is-on,html.static .tab{transform:translate(0,-50%)}
  .pill{left:20px;bottom:20px}
}