/* 植木と庭の手入れ 枝折（制作の見本）
   色：苔の白の地・深い緑の字・苔と土・木もれ日の黄。字：Shippori Antique B1／Zen 角ゴシック／Libre Caslon Text。
   しるし：ページの上をゆっくり流れる葉の影と、スクロールで回る年輪の暦。 */
:root{
  --bg:#EFF1E7; --face:#E2E6D6; --paper:#F6F7F0; --ink:#1E2A1D; --txt:#364234; --mute:#5F6B5A;
  --moss:#4F6B3A; --soil:#8A6A4A; --sun:#F4E3A1; --light:#EEF0E6;
  --rule:rgba(30,42,29,.14); --rule2:rgba(30,42,29,.26);
  --ff-head:"Shippori Antique B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --ff-latin:"Libre Caslon Text","Times New Roman",serif;
  --ease:cubic-bezier(.25,.6,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(22px,6vw,80px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:60px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-body);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,p,ul,ol,dl,dd,figure{margin:0;padding:0}
h1,h2,h3{font-weight:400}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
::selection{background:var(--moss);color:var(--light)}
:focus-visible{outline:1.5px solid var(--moss);outline-offset:4px}
.wrap{overflow-x:clip}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ib{display:inline-block;font-weight:inherit}

/* ---------- 共通の部品 ---------- */
main{position:relative}
.sec{position:relative;padding-block:clamp(64px,17vw,124px)}
.sec__in{position:relative;z-index:1;padding-inline:var(--gutter);max-width:1300px;margin-inline:auto}
.lbl{display:flex;align-items:baseline;gap:14px;line-height:1;font-family:var(--ff-latin)}
.lbl i{font-style:italic;font-size:16px;color:var(--soil)}
.lbl span{display:inline-flex;align-items:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.lbl span::before{content:"";flex:none;width:8px;height:8px;margin-right:10px;background:var(--moss);border-radius:0 100% 0 100%;transform:rotate(-14deg)}
.lbl em{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:1.2em;margin:0 .35em}
.h2{margin-top:16px;font-family:var(--ff-head);font-size:clamp(27px,7.5vw,34px);line-height:1.6;letter-spacing:.06em;font-feature-settings:"palt";text-wrap:balance}
.body{margin-top:22px;font-size:16px;color:var(--txt);line-height:1.95;text-wrap:pretty}
.lnk{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-family:var(--ff-head);font-size:15px;letter-spacing:.1em;border-bottom:1px solid currentColor}
.lnk i{position:relative;width:30px;height:1px;background:currentColor;transition:width .5s 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:48px}
.btn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;margin-top:24px;padding:16px 20px 16px 22px;background:var(--ink);color:var(--light);font-family:var(--ff-head);font-size:16px;letter-spacing:.12em;line-height:1.5;overflow:hidden;transition:color .5s}
.btn::before{content:"";position:absolute;inset:0;background:var(--moss);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease-out)}
.btn span,.btn i{position:relative}
.btn i{flex:none;width:26px;height:1px;background:currentColor}
.btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.cta-note{margin-top:10px;font-size:12px;line-height:1.8;color:var(--mute)}

/* 枝の区切り線 */
.branch{display:block;width:min(250px,72%);height:auto;margin-top:16px;overflow:visible}
.branch path{stroke:var(--ink);stroke-width:1;stroke-linecap:round;opacity:.55}
.branch .branch__m{stroke-width:1.15;opacity:.7}
.branch .branch__l{fill:var(--moss);stroke:none;opacity:.9}
html.js .branch[data-r="br"] path:not(.branch__l){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s var(--ease) var(--d,0s)}
html.js .branch[data-r="br"] .branch__t{transition-delay:calc(var(--d,0s) + .6s);transition-duration:1.1s}
html.js .branch[data-r="br"] .branch__l{opacity:0;transform:scale(.2) rotate(-30deg);transform-box:fill-box;transform-origin:0 50%;transition:opacity .9s var(--ease) calc(var(--d,0s) + 1.3s),transform 1.4s var(--ease-out) calc(var(--d,0s) + 1.3s)}
html.js .branch[data-r="br"].is-in path:not(.branch__l){stroke-dashoffset:0}
html.js .branch[data-r="br"].is-in .branch__l{opacity:.9;transform:none}

/* 写真：光が差すように明るくなって出る */
.ph{position:relative}
.ph__z{display:block;position:relative;overflow:hidden;aspect-ratio:2/3;background:var(--face)}
.ph__z img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.ph__z::after{content:"";position:absolute;inset:0;z-index:1;background:#1E2A1D;opacity:0;pointer-events:none}
.ph__z::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;right:-60%;z-index:2;background:linear-gradient(104deg,rgba(244,227,161,0) 40%,rgba(244,227,161,.7) 50%,rgba(244,227,161,0) 60%);mix-blend-mode:soft-light;opacity:0;transform:translateX(-62%);pointer-events:none}
.ph figcaption{margin-top:10px;font-family:var(--ff-latin),var(--ff-body);font-size:12px;letter-spacing:.06em;line-height:1.7;color:var(--mute)}
html.js .ph[data-r="img"]{opacity:0;transform:translateY(34px);transition:opacity 1.3s var(--ease) var(--d,0s),transform 1.9s var(--ease-out) var(--d,0s)}
html.js .ph[data-r="img"].is-in{opacity:1;transform:none}
html.js .ph[data-r="img"] .ph__z::after{opacity:.5;transition:opacity 2.4s var(--ease) calc(var(--d,0s) + .15s)}
html.js .ph[data-r="img"].is-in .ph__z::after{opacity:0}
html.js .ph[data-r="img"] .ph__z::before{opacity:1;transition:transform 2.8s var(--ease-out) calc(var(--d,0s) + .25s),opacity .9s linear calc(var(--d,0s) + 2.2s)}
html.js .ph[data-r="img"].is-in .ph__z::before{transform:translateX(62%);opacity:0}
html.js .ph[data-r="img"] .ph__z img{scale:1.1;transition:scale 2.8s var(--ease-out) var(--d,0s)}
html.js .ph[data-r="img"].is-in .ph__z img{scale:1}

/* 出てくる動き（プログラムが動く時だけ） */
html.js [data-r=""]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.5s var(--ease-out) var(--d,0s)}
html.js [data-r=""].is-in{opacity:1;transform:none}
html.js [data-r="h"] .ib{opacity:0;transform:translateY(.42em);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.4s var(--ease-out) var(--d,0s)}
html.js [data-r="h"] .ib:nth-child(2){transition-delay:calc(var(--d,0s) + .12s)}
html.js [data-r="h"] .ib:nth-child(3){transition-delay:calc(var(--d,0s) + .24s)}
html.js [data-r="h"] .ib:nth-child(4){transition-delay:calc(var(--d,0s) + .36s)}
html.js [data-r="h"].is-in .ib{opacity:1;transform:none}

/* ---------- 木もれ日（ページ全体の葉の影） ---------- */
.komorebi{position:fixed;z-index:20;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:multiply}
.komorebi__in{position:absolute;inset:-22%;will-change:transform;transition:transform .9s var(--ease-out)}
.komorebi i,.loader__leaves i{position:absolute;display:block;border-radius:46% 54% 41% 59% / 57% 43% 57% 43%;filter:blur(16px);will-change:transform;animation:sway 17s ease-in-out infinite alternate}
.komorebi i{background:
  radial-gradient(ellipse 3.2vmax 2.2vmax at 20% 30%,rgba(46,66,34,.17),rgba(46,66,34,0)),
  radial-gradient(ellipse 2.4vmax 1.8vmax at 34% 18%,rgba(46,66,34,.15),rgba(46,66,34,0)),
  radial-gradient(ellipse 4vmax 2.8vmax at 47% 38%,rgba(46,66,34,.17),rgba(46,66,34,0)),
  radial-gradient(ellipse 2.6vmax 3.2vmax at 28% 58%,rgba(46,66,34,.14),rgba(46,66,34,0)),
  radial-gradient(ellipse 2.2vmax 1.6vmax at 62% 24%,rgba(46,66,34,.15),rgba(46,66,34,0)),
  radial-gradient(ellipse 3.6vmax 2.6vmax at 68% 56%,rgba(46,66,34,.17),rgba(46,66,34,0)),
  radial-gradient(ellipse 2vmax 1.5vmax at 52% 76%,rgba(46,66,34,.13),rgba(46,66,34,0)),
  radial-gradient(ellipse 2.8vmax 2vmax at 80% 40%,rgba(46,66,34,.13),rgba(46,66,34,0)),
  radial-gradient(closest-side,rgba(46,66,34,.05),rgba(46,66,34,0));filter:blur(5px)}
.komorebi i:nth-child(1){left:4%;top:3%;width:44vmax;height:34vmax;animation-duration:19s;animation-delay:-4s}
.komorebi i:nth-child(2){left:52%;top:10%;width:38vmax;height:30vmax;animation-duration:23s;animation-delay:-11s;animation-name:sway2}
.komorebi i:nth-child(3){left:20%;top:40%;width:34vmax;height:40vmax;animation-duration:17s;animation-delay:-7s}
.komorebi i:nth-child(4){left:62%;top:48%;width:42vmax;height:32vmax;animation-duration:21s;animation-delay:-2s;animation-name:sway2}
.komorebi i:nth-child(5){left:-6%;top:68%;width:40vmax;height:30vmax;animation-duration:25s;animation-delay:-15s}
.komorebi i:nth-child(6){left:40%;top:76%;width:36vmax;height:34vmax;animation-duration:18s;animation-delay:-9s;animation-name:sway2}
@keyframes sway{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}35%{transform:translate3d(1.6vmax,-1.1vmax,0) rotate(5deg) scale(1.05)}70%{transform:translate3d(-.8vmax,.9vmax,0) rotate(-3deg) scale(.97)}100%{transform:translate3d(1.1vmax,1.4vmax,0) rotate(4deg) scale(1.03)}}
@keyframes sway2{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}40%{transform:translate3d(-1.5vmax,1vmax,0) rotate(-5deg) scale(1.04)}75%{transform:translate3d(1vmax,-.6vmax,0) rotate(3deg) scale(.96)}100%{transform:translate3d(-.6vmax,-1.3vmax,0) rotate(-2deg) scale(1.02)}}
html.static .komorebi i{animation:none}

/* ---------- 始まりの幕：葉の影がゆれ、光が差す ---------- */
.loader{display:none}
html.js .loader{display:grid;place-items:center;position:fixed;z-index:100;inset:0;overflow:hidden;background:var(--bg);opacity:1;transition:opacity 1.3s var(--ease) .1s,visibility 0s 1.5s}
html.js.is-loaded .loader{opacity:0;visibility:hidden}
.loader__leaves{position:absolute;inset:-18%}
.loader__leaves i{background:
  radial-gradient(ellipse 5vmax 3.4vmax at 18% 26%,rgba(46,66,34,.3),rgba(46,66,34,0)),
  radial-gradient(ellipse 3.6vmax 2.6vmax at 32% 14%,rgba(46,66,34,.26),rgba(46,66,34,0)),
  radial-gradient(ellipse 6vmax 4vmax at 46% 34%,rgba(46,66,34,.3),rgba(46,66,34,0)),
  radial-gradient(ellipse 3.8vmax 4.6vmax at 26% 56%,rgba(46,66,34,.24),rgba(46,66,34,0)),
  radial-gradient(ellipse 3.2vmax 2.4vmax at 62% 20%,rgba(46,66,34,.26),rgba(46,66,34,0)),
  radial-gradient(ellipse 5.4vmax 3.8vmax at 68% 52%,rgba(46,66,34,.3),rgba(46,66,34,0)),
  radial-gradient(ellipse 3vmax 2.2vmax at 50% 74%,rgba(46,66,34,.24),rgba(46,66,34,0)),
  radial-gradient(ellipse 4.2vmax 3vmax at 82% 36%,rgba(46,66,34,.24),rgba(46,66,34,0)),
  radial-gradient(ellipse 2.6vmax 2vmax at 78% 70%,rgba(46,66,34,.22),rgba(46,66,34,0));filter:blur(5px);animation-duration:5.5s}
.loader__leaves i:nth-child(1){left:0;top:4%;width:62vmax;height:48vmax}
.loader__leaves i:nth-child(2){left:46%;top:-4%;width:56vmax;height:46vmax;animation-name:sway2;animation-duration:6.5s}
.loader__leaves i:nth-child(3){left:10%;top:48%;width:58vmax;height:46vmax;animation-name:sway2;animation-duration:7s}
.loader__leaves i:nth-child(4){left:52%;top:52%;width:54vmax;height:50vmax;animation-duration:6s}
.loader__sun{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 74% 12%,rgba(244,227,161,.95),rgba(244,227,161,0) 72%);opacity:0;animation:ldSun 1.5s var(--ease) .6s forwards}
.loader__in{position:relative;text-align:center}
.loader__logo{display:flex;justify-content:center;font-family:var(--ff-head);font-size:54px;line-height:1;letter-spacing:.18em;padding-left:.18em}
.loader__logo span{opacity:0;animation:ldUp 1.1s var(--ease-out) .15s forwards}
.loader__logo span:nth-child(2){animation-delay:.3s}
.loader__en{margin-top:16px;font-family:var(--ff-latin);font-style:italic;font-size:15px;letter-spacing:.12em;line-height:1;color:var(--soil);opacity:0;animation:ldUp 1s var(--ease-out) .6s forwards}
.loader__ja{margin-top:12px;font-size:12px;letter-spacing:.36em;padding-left:.36em;line-height:1;color:var(--mute);opacity:0;animation:ldUp 1s var(--ease-out) .8s forwards}
@keyframes ldUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ldSun{to{opacity:1}}

/* ---------- 上の帯 ---------- */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:60px;padding-inline:var(--gutter);background:rgba(239,241,231,.82);-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);border-bottom:1px solid rgba(30,42,29,.1);transition:transform .7s var(--ease),background-color .5s,color .5s,border-color .5s}
.hd.is-hide{transform:translateY(-102%)}
.hd__logo{display:flex;align-items:center;gap:11px;min-height:44px}
.hd__mark{font-family:var(--ff-head);font-size:23px;letter-spacing:.12em;line-height:1}
.hd__sub{display:flex;flex-direction:column;gap:4px;padding-left:11px;border-left:1px solid var(--rule2);line-height:1}
.hd__sub em{font-family:var(--ff-latin);font-style:italic;font-size:12px;letter-spacing:.06em}
.hd__sub small{font-size:12px;letter-spacing:.08em;color:var(--mute)}
.hd__nav,.hd__cta{display:none}
.hd__btn{position:relative;width:50px;height:50px;margin-right:-10px}
.hd__btn i{position:absolute;right:12px;height:1px;background:currentColor;transition:transform .6s var(--ease-out),width .6s var(--ease-out),opacity .4s,top .6s var(--ease-out)}
.hd__btn i:nth-child(1){top:14px;width:24px}
.hd__btn i:nth-child(2){top:20px;width:17px}
.hd__btn i:nth-child(3){top:26px;width:10px}
.hd__btn span{position:absolute;left:0;right:0;bottom:4px;font-size:12px;letter-spacing:.12em;padding-left:.12em;line-height:1;text-align:center}
html.is-menu .hd{transform:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent;color:var(--light)}
html.is-menu .hd__sub{border-color:rgba(238,240,230,.3)}
html.is-menu .hd__sub small{color:rgba(238,240,230,.7)}
html.is-menu .hd__btn i{width:22px}
html.is-menu .hd__btn i:nth-child(1){top:20px;transform:rotate(30deg)}
html.is-menu .hd__btn i:nth-child(2){opacity:0}
html.is-menu .hd__btn i:nth-child(3){top:20px;transform:rotate(-30deg)}

/* 目次 */
.gmenu{position:fixed;z-index:45;inset:0;overflow:auto;background:var(--ink);color:var(--light);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-out),visibility 0s .9s}
html.is-menu .gmenu{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-out)}
html.is-menu,html.is-menu body{overflow:hidden}
.gmenu__in{display:flex;flex-direction:column;min-height:100%;padding:88px var(--gutter) 36px}
.gmenu__list li{border-bottom:1px solid rgba(238,240,230,.14);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
html.is-menu .gmenu__list li{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(.2s + var(--i,0)*.06s),transform 1s var(--ease-out) calc(.2s + var(--i,0)*.06s)}
.gmenu__list li:nth-child(2){--i:1}.gmenu__list li:nth-child(3){--i:2}.gmenu__list li:nth-child(4){--i:3}.gmenu__list li:nth-child(5){--i:4}.gmenu__list li:nth-child(6){--i:5}.gmenu__list li:nth-child(7){--i:6}.gmenu__list li:nth-child(8){--i:7}
.gmenu__list a{display:grid;grid-template-columns:36px 1fr;align-items:baseline;padding:14px 0}
.gmenu__list small{font-family:var(--ff-latin);font-style:italic;font-size:13px;color:var(--sun)}
.gmenu__list span{font-family:var(--ff-head);font-size:18px;letter-spacing:.08em}
.gmenu__cta{display:flex;align-items:center;justify-content:space-between;min-height:58px;margin-top:28px;padding:14px 22px;background:var(--sun);color:var(--ink);font-family:var(--ff-head);font-size:16px;letter-spacing:.12em}
.gmenu__cta i{position:relative;width:30px;height:1px;background:currentColor}
.gmenu__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)}
.gmenu__info{margin-top:auto;padding-top:26px;font-size:13px;line-height:1.95;color:rgba(238,240,230,.62)}

/* ---------- 最初の画面 ---------- */
.hero{position:relative}
.hero__stage{position:relative;z-index:1;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#C9CFBD}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__media picture,.hero__media img{display:block;width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:86% 50%}
html.js .hero__media img{scale:1.08;transition:scale 3.6s var(--ease-out) .2s}
html.js.is-loaded .hero__media img{scale:1}
.hero__dim{position:absolute;inset:0;z-index:1;background:#1E2A1D;opacity:0;pointer-events:none}
html.js .hero__dim{opacity:.55;transition:opacity 2.8s var(--ease) .25s}
html.js.is-loaded .hero__dim{opacity:0}
.hero__sun{position:absolute;inset:-12%;z-index:1;background:radial-gradient(ellipse 58% 46% at 80% 6%,rgba(244,227,161,.85),rgba(244,227,161,0) 70%);mix-blend-mode:soft-light;pointer-events:none;animation:breath 9s ease-in-out infinite alternate}
html.js .hero__sun{opacity:0;transform:translate3d(-7%,-5%,0);transition:opacity 3s var(--ease) .5s,transform 4.2s var(--ease-out) .5s}
html.js.is-loaded .hero__sun{opacity:1;transform:none}
html.static .hero__sun{animation:none}
@keyframes breath{from{scale:1}to{scale:1.1}}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(239,241,231,.42) 0%,rgba(239,241,231,.16) 40%,rgba(239,241,231,0) 56%),linear-gradient(0deg,rgba(24,34,22,.42) 0%,rgba(24,34,22,0) 24%)}
.hero__txt{position:absolute;z-index:3;top:calc(60px + 5svh);right:var(--gutter);width:max-content;max-width:calc(100% - 2*var(--gutter))}
.hero__ttl{font-family:var(--ff-head);font-size:min(10.4vw,5.6svh,48px);line-height:1.36;letter-spacing:.05em;font-feature-settings:"palt";color:var(--ink);text-shadow:0 0 16px rgba(244,241,231,.9),0 0 5px rgba(244,241,231,.7)}
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block}
html.js .hero__ttl .ln>span{transform:translateY(106%);transition:transform 1.5s var(--ease-out)}
html.js .hero__ttl .ln:nth-child(1)>span{transition-delay:.8s}
html.js .hero__ttl .ln:nth-child(2)>span{transition-delay:.94s}
html.js .hero__ttl .ln:nth-child(3)>span{transition-delay:1.08s}
html.js .hero__ttl .ln:nth-child(4)>span{transition-delay:1.22s}
html.js .hero__ttl .ln:nth-child(5)>span{transition-delay:1.36s}
html.js.is-loaded .hero__ttl .ln>span{transform:none}
.hero__en{margin-bottom:14px;font-family:var(--ff-latin);font-style:italic;font-size:12.5px;letter-spacing:.06em;line-height:1.4;color:var(--ink)}
.hero__en i{font-style:italic;color:var(--soil)}
.en-pc{display:none}
.hero__pcl{display:none}
.hero__scroll{position:absolute;z-index:3;left:50%;bottom:20px;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);color:var(--light)}
.hero__scroll svg{width:34px;height:34px;animation:turn 16s linear infinite}
.hero__scroll circle,.hero__scroll path{stroke:currentColor;stroke-width:1;fill:none;opacity:.85}
.hero__scroll span{font-family:var(--ff-latin);font-size:12px;letter-spacing:.2em;padding-left:.2em;line-height:1}
@keyframes turn{to{rotate:360deg}}
html.js .hero__en,html.js .hero__scroll{opacity:0;transition:opacity 1.4s var(--ease) 1.9s}
html.js.is-loaded .hero__en,html.js.is-loaded .hero__scroll{opacity:1}
.hero__under{position:relative;z-index:1;padding:36px var(--gutter) 0}
.hero__lead{font-size:16px;line-height:2;color:var(--txt)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}
.facts li{display:flex;flex-direction:column;align-items:center;padding:16px 2px 14px;text-align:center;border-left:1px solid var(--rule)}
.facts li:first-child{border-left:0}
.facts__k{font-size:12px;letter-spacing:.04em;line-height:1.6;color:var(--mute)}
.facts__v{margin-top:6px;font-size:12px;line-height:1.3;letter-spacing:0;white-space:nowrap}
.facts__v b{font-family:var(--ff-latin);font-weight:400;font-size:22px;letter-spacing:0;margin-right:1px}
.facts__v--ja{font-family:var(--ff-head);font-size:21px;letter-spacing:.1em;padding-left:.1em}
.facts small{margin-top:6px;font-size:12px;letter-spacing:0;line-height:1.5;color:var(--mute)}

/* ---------- 01 こんな庭に ---------- */
.stones{margin-top:40px}
.stones li{display:flex;align-items:flex-start;gap:18px;padding:12px 0}
.stones li:nth-child(2){margin-left:11%}
.stones li:nth-child(3){margin-left:4%}
.stones__n{flex:none;display:grid;place-items:center;width:60px;height:40px;margin-top:2px;background:var(--face);border-radius:54% 46% 48% 52% / 60% 54% 46% 40%;box-shadow:inset 0 -3px 0 rgba(30,42,29,.07);font-family:var(--ff-latin);font-style:italic;font-size:16px;line-height:1;color:var(--soil)}
.stones li:nth-child(2) .stones__n{border-radius:46% 54% 56% 44% / 50% 62% 38% 50%;width:56px}
.stones li:nth-child(3) .stones__n{border-radius:58% 42% 50% 50% / 44% 56% 44% 56%;width:64px}
.stones p{font-family:var(--ff-head);font-size:22px;line-height:1.62;letter-spacing:.05em;font-feature-settings:"palt"}
.garden__sub{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule);font-size:16px;line-height:2;color:var(--txt)}

/* ---------- 02 決めていること ---------- */
.ph--consult{width:80%;margin-left:auto;margin-right:calc(var(--gutter)*-1)}
.ph--consult .ph__z{aspect-ratio:1/1}
.ph--consult figcaption{padding-right:var(--gutter)}
.decide__txt{margin-top:44px}
.rules{margin-top:36px;border-bottom:1px solid var(--rule2)}
.rules li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:20px 0 22px;border-top:1px solid var(--rule2)}
.rules b{grid-row:1/3;font-family:var(--ff-latin);font-style:italic;font-weight:400;font-size:24px;line-height:1.25;color:var(--moss)}
.rules h3{font-family:var(--ff-head);font-size:19px;line-height:1.65;letter-spacing:.05em;font-feature-settings:"palt";text-wrap:balance}
.rules p{margin-top:8px;font-size:16px;line-height:1.95;color:var(--txt)}

/* ---------- 03 手入れの暦（年輪） ---------- */
.koyomi{position:relative;padding-top:clamp(64px,17vw,124px)}
.koyomi__track{position:relative;margin-top:28px}
html.js .koyomi__track{height:calc(100vh + 12 * 36vh);height:calc(100svh + 12 * 36svh)}
.koyomi__stage{display:none}
html.js .koyomi__stage,html.static .koyomi__stage{display:flex;flex-direction:column;justify-content:center;gap:2.2svh;padding:66px var(--gutter) 18px}
html.js .koyomi__stage{position:sticky;top:0;height:100vh;height:100svh}
.ring{position:relative;flex:none;width:min(78vw,40svh,440px);aspect-ratio:1;margin:0 auto}
.ring__glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,rgba(244,227,161,.95),rgba(244,227,161,.35) 55%,rgba(244,227,161,0));opacity:.2;transition:opacity 1.4s var(--ease)}
.ring__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring__rings path{stroke:var(--soil);fill:none}
.ring__rings .pith{fill:var(--soil);stroke:none}
.ring__rings .crack{stroke:var(--soil);stroke-width:.8;opacity:.55}
.ring__track{stroke:var(--rule2);stroke-width:1}
.ring__dial .tk{stroke:var(--ink);stroke-width:.8;opacity:.35}
.ring__dial .tk--m{stroke-width:1.3;opacity:.9}
.ring__dial text{font-family:var(--ff-latin);font-size:17px;fill:var(--mute);dominant-baseline:central;text-anchor:middle;transition:fill .5s}
.ring__dial text.is-cur{fill:var(--ink);font-weight:700}
@media (max-width:899px){.ring__dial text{font-size:min(22px,max(17px,calc(36.5px - 5.21vw),calc(35.3px - 2.41svh)))}}
.ring__arc{stroke:var(--moss);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:0 360}
.ring__string{stroke:var(--ink);stroke-width:1}
.ring__tag{fill:var(--sun);stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.ring__hole{fill:var(--bg);stroke:var(--ink);stroke-width:.8}
.koyomi__info{width:100%;max-width:440px;margin:0 auto}
.koyomi__mrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:4px;border-bottom:1px solid var(--rule2)}
.koyomi__m{display:flex;align-items:baseline;line-height:1}
.koyomi__m b{font-family:var(--ff-latin);font-weight:400;font-size:62px;line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums}
.koyomi__m span{margin-left:6px;font-family:var(--ff-head);font-size:22px}
.koyomi__en{font-family:var(--ff-latin);font-style:italic;font-size:17px;line-height:1;color:var(--soil)}
.trees{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.trees li{padding:2px 11px;border:1px dashed rgba(30,42,29,.3);border-radius:999px;font-size:12.5px;line-height:1.85;letter-spacing:.06em;color:var(--mute);transition:background-color .5s,color .5s,border-color .5s}
.trees li.on{background:var(--moss);border:1px solid var(--moss);color:var(--light)}
.trees li[data-t="patrol"]:not(.on){display:none}
.trees li[data-t="patrol"].on{background:var(--soil);border-color:var(--soil)}
.koyomi__say{margin-top:12px;min-height:3.7em;font-family:var(--ff-head);font-size:16.5px;line-height:1.85;letter-spacing:.04em;font-feature-settings:"palt";text-wrap:pretty}
.koyomi__info.is-swap .koyomi__m b,.koyomi__info.is-swap .koyomi__en,.koyomi__info.is-swap .koyomi__say{animation:kIn .8s var(--ease-out)}
.koyomi__info.is-swap .koyomi__en{animation-delay:.05s;animation-fill-mode:both}
.koyomi__info.is-swap .koyomi__say{animation-delay:.1s;animation-fill-mode:both}
@keyframes kIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.months{display:grid;grid-template-columns:repeat(6,1fr);width:100%;max-width:440px;margin:0 auto;border-top:1px solid var(--rule)}
.months button{position:relative;min-height:44px;font-family:var(--ff-latin);font-size:16px;line-height:1;color:var(--mute);border-bottom:1px solid var(--rule);transition:color .4s}
.months small{margin-left:1px;font-family:var(--ff-body);font-size:12px}
.months button::after{content:"";position:absolute;left:30%;right:30%;bottom:-1px;height:3px;background:var(--moss);transform:scaleX(0);transition:transform .5s var(--ease-out)}
.months button[aria-pressed="true"]{color:var(--ink)}
.months button[aria-pressed="true"]::after{transform:none}
.koyomi__list{margin:24px auto 0;padding-inline:var(--gutter);max-width:1300px}
.koyomi__list li{display:grid;grid-template-columns:3.4em 1fr;column-gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.koyomi__list b{font-family:var(--ff-head);font-weight:400}
.koyomi__list span{font-size:12.5px;color:var(--moss)}
.koyomi__list p{grid-column:2;font-size:16px;line-height:1.85;color:var(--txt)}
html.js .koyomi__list,html.static .koyomi__list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0}
.koyomi__note{margin-top:20px;padding-bottom:clamp(64px,17vw,124px);font-size:12.5px;line-height:1.95;color:var(--mute)}

/* ---------- 04 見積のめやす ---------- */
.estimate{background:var(--face)}
.calc{margin-top:40px}
.row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;column-gap:14px;padding:14px 0;border-top:1px solid var(--rule2)}
.row__ic{width:38px;height:56px}
.row__ic path{stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.row__ic .c{fill:var(--paper)}
.row__ic .g{stroke:var(--soil);opacity:.6}
.row__name{font-family:var(--ff-head);font-size:17px;line-height:1.5;letter-spacing:.04em}
.row__name small{display:block;font-family:var(--ff-body);font-size:12px;letter-spacing:.06em;line-height:1.5;color:var(--mute)}
.row__yen{margin-top:2px;font-size:12px;line-height:1.5;color:var(--mute)}
.row__yen b{font-family:var(--ff-latin);font-weight:400;font-size:14px;color:var(--ink)}
.stepper{display:flex;align-items:center}
.stepper button{position:relative;width:44px;height:44px;border:1px solid var(--rule2);border-radius:50%;background:var(--paper);transition:background-color .3s,border-color .3s,opacity .3s}
.stepper button i{position:absolute;left:50%;top:50%;width:13px;height:1.3px;margin:-.65px 0 0 -6.5px;background:var(--ink)}
.stepper button i+i{transform:rotate(90deg)}
.stepper button:hover{border-color:var(--ink)}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{display:flex;align-items:baseline;justify-content:center;min-width:48px}
.stepper output b{font-family:var(--ff-latin);font-weight:400;font-size:24px;line-height:1}
.stepper output small{margin-left:2px;font-size:12px}
.stepper output.is-bump b{animation:bump .45s var(--ease-out)}
@keyframes bump{from{transform:translateY(-6px);opacity:.3}to{transform:none;opacity:1}}
.slide{grid-column:1/-1;display:block;margin-top:2px}
.slide input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--p:15%}
.slide input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--moss) 0 var(--p),var(--rule2) var(--p) 100%)}
.slide input::-moz-range-track{height:3px;border-radius:2px;background:var(--rule2)}
.slide input::-moz-range-progress{height:3px;background:var(--moss)}
.slide input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10.5px;border-radius:50%;background:var(--moss);border:4px solid var(--paper);box-shadow:0 0 0 1px var(--moss)}
.slide input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--moss);border:4px solid var(--paper);box-shadow:0 0 0 1px var(--moss)}
.calc__sum{position:relative;margin-top:28px;padding:30px 22px 26px;background:var(--paper);box-shadow:0 30px 50px -36px rgba(30,42,29,.45)}
.calc__sum::before{content:"";position:absolute;inset:7px;border:1px solid var(--rule);pointer-events:none}
.calc__sum::after{content:"";position:absolute;right:26px;top:-12px;width:16px;height:30px;background:var(--sun);border:1px solid var(--ink);clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%)}
.sum__lbl{position:relative;font-size:12.5px;letter-spacing:.1em;color:var(--mute)}
.sum__lbl small{font-size:12px}
.sum__yen{position:relative;display:flex;align-items:baseline;gap:6px;margin-top:2px;line-height:1.1}
.sum__yen b{font-family:var(--ff-latin);font-weight:400;font-size:54px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sum__yen span{font-size:15px}
.sum__meta{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:16px;border-top:1px solid var(--ink)}
.sum__meta div{padding:12px 0 10px}
.sum__meta div+div{padding-left:16px;border-left:1px solid var(--rule)}
.sum__meta dt{font-size:12px;letter-spacing:.1em;line-height:1.6;color:var(--mute)}
.sum__meta dd{margin-top:2px;font-family:var(--ff-head);font-size:22px;line-height:1.4;letter-spacing:.06em}
.sum__inc{position:relative;padding-top:12px;border-top:1px solid var(--rule)}
.sum__inc li{position:relative;padding:3px 0 3px 18px;font-size:13px;line-height:1.85;color:var(--txt)}
.sum__inc li::before{content:"";position:absolute;left:0;top:calc(3px + .62em);width:7px;height:7px;background:var(--moss);border-radius:0 100% 0 100%}
.sum__note{position:relative;margin-top:10px;font-family:var(--ff-head);font-size:14px;letter-spacing:.06em;color:var(--soil)}
.msg{position:relative;margin-top:22px}
.msg__lbl{font-size:12px;letter-spacing:.1em;color:var(--mute)}
.msg__bub{margin:8px 0 0 auto;max-width:94%;padding:12px 16px;background:var(--moss);color:var(--light);border-radius:18px 18px 4px 18px;font-size:14px;line-height:1.85;letter-spacing:.03em;transition:opacity .3s}
.msg__bub.is-bump{animation:bump .5s var(--ease-out)}
.calc__sum .btn,.calc__sum .cta-note{position:relative}

/* ---------- 05 当日の流れ ---------- */
.flow>li{position:relative;padding:0 0 32px 34px}
.flow>li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border:1px solid var(--moss);border-radius:50%;background:var(--bg)}
.flow>li::after{content:"";position:absolute;left:5px;top:26px;bottom:4px;width:1px;background:var(--rule2);transform-origin:top}
.flow>li:last-child{padding-bottom:0}
.flow>li:last-child::after{display:none}
html.js .flow>li::after{transform:scaleY(0);transition:transform 1.4s var(--ease) .4s}
html.js .flow>li.is-in::after{transform:none}
.flow__t{font-family:var(--ff-latin);font-size:22px;line-height:1.2;color:var(--soil)}
.flow__t--ja{font-family:var(--ff-head);font-size:15px;line-height:1.75;letter-spacing:.1em}
.flow h3{margin-top:6px;font-family:var(--ff-head);font-size:19px;line-height:1.6;letter-spacing:.05em}
.flow li>p:not(.flow__t){margin-top:6px;font-size:16px;line-height:1.95;color:var(--txt)}
.strip{margin:34px calc(var(--gutter)*-1) 0}
.strip__rail{display:flex;gap:10px;overflow-x:auto;padding:0 var(--gutter);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip__rail::-webkit-scrollbar{display:none}
.strip__rail::after{content:"";flex:0 0 1px}
.strip__ph{flex:none;height:232px;scroll-snap-align:start}
.strip__ph .ph__z{height:100%;aspect-ratio:2/3}
.strip__ph--w .ph__z{aspect-ratio:4/3}
.strip__hint{display:flex;align-items:center;gap:10px;margin-top:12px;padding-inline:var(--gutter);font-size:12px;letter-spacing:.1em;line-height:1.6;color:var(--mute)}
.strip__hint i{position:relative;width:26px;height:1px;background:currentColor;overflow:visible;animation:hint 2.4s var(--ease) infinite}
.strip__hint i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
@keyframes hint{0%,100%{transform:none}50%{transform:translateX(6px)}}
.flow{margin-top:36px}
.day__side{display:none}

/* ---------- 06 道具と手 ---------- */
.tools{background:var(--ink);color:var(--light)}
.tools .lbl i{color:var(--sun)}
.tools .lbl span{color:rgba(238,240,230,.62)}
.tools .lbl span::before{background:var(--sun)}
.tools .branch path{stroke:var(--light)}
.tools .branch .branch__l{fill:var(--sun)}
.tools .ph__z{background:#2A3828}
.tools .ph figcaption{color:rgba(238,240,230,.55)}
.tools__in{display:flex;flex-direction:column}
.ph--tools{width:74%;margin-left:calc(var(--gutter)*-1)}
.ph--tools .ph__z{aspect-ratio:4/5}
.ph--tools figcaption{padding-left:var(--gutter)}
.tools__txt{order:2;margin-top:40px}
.hands{margin-top:30px;border-bottom:1px solid rgba(238,240,230,.16)}
.hands li{padding:17px 0;border-top:1px solid rgba(238,240,230,.16)}
.hands p{font-family:var(--ff-head);font-size:19px;line-height:1.6;letter-spacing:.05em}
.hands small{display:block;margin-top:4px;font-size:13px;line-height:1.8;color:rgba(238,240,230,.66)}
.ph--moss{order:1;position:relative;z-index:2;width:46%;margin:-36% calc(var(--gutter)*-1) 0 auto;box-shadow:0 26px 44px -22px rgba(0,0,0,.7)}
.ph--moss .ph__z{aspect-ratio:3/4}

/* ---------- 07 親方から ---------- */
.oyakata__q{margin-top:22px;font-family:var(--ff-head);font-size:clamp(34px,10vw,44px);line-height:1.5;letter-spacing:.06em;font-feature-settings:"palt"}
.letter{margin-top:36px}
.letter p{font-size:16px;line-height:2.1;color:var(--txt);text-wrap:pretty}
.letter p+p{margin-top:1.3em}
.sign{display:flex;align-items:flex-end;justify-content:flex-end;gap:14px;margin-top:40px}
.sign__tag{width:24px;height:52px;flex:none;overflow:visible}
.sign__tag .s{stroke:var(--ink);stroke-width:1}
.sign__tag .t{fill:var(--sun);stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.sign__tag circle{fill:var(--bg);stroke:var(--ink);stroke-width:1}
html.js .sign__tag{transform-origin:50% 0;rotate:-14deg;transition:rotate 2.2s cubic-bezier(.3,1.6,.4,1) .5s}
html.js .sign.is-in .sign__tag{rotate:0deg}
.sign p{text-align:right;line-height:1.5}
.sign small{display:block;font-size:12px;letter-spacing:.1em;color:var(--mute)}
.sign span{display:block;margin:2px 0;font-family:var(--ff-head);font-size:30px;letter-spacing:.24em;padding-left:.24em;color:var(--ink)}

/* ---------- 08 よくある質問 ---------- */
.faq{background:var(--face)}
.faq__list{margin-top:34px;border-bottom:1px solid var(--rule2)}
.faq details{border-top:1px solid var(--rule2)}
.faq summary{display:grid;grid-template-columns:1fr 30px;align-items:center;gap:14px;min-height:44px;padding:17px 0;cursor:pointer;list-style:none;font-family:var(--ff-head);font-size:16.5px;line-height:1.7;letter-spacing:.04em;font-feature-settings:"palt"}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{text-wrap:pretty}
.faq summary i{position:relative;width:30px;height:30px;border:1px solid var(--rule2);border-radius:50%;transition:background-color .4s,border-color .4s,transform .6s var(--ease-out)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;margin-left:-5.5px;background:var(--ink)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);background:var(--moss);border-color:var(--moss)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:var(--light)}
.faq details>div{padding:0 0 24px}
.faq details>div p{padding-left:16px;border-left:2px solid var(--moss);font-size:16px;line-height:1.95;color:var(--txt)}
.faq details[open]>div{animation:faqIn .7s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 09 下見を頼む ---------- */
.request{overflow:hidden;background:var(--moss);color:var(--light)}
.request__ring{position:absolute;z-index:0;right:-62vw;top:40px;width:128vw;max-width:none;height:auto;stroke:rgba(238,240,230,.14);stroke-width:1;animation:turn 160s linear infinite}
html.static .request__ring{animation:none}
.request .lbl i{color:var(--sun)}
.request .lbl span{color:rgba(238,240,230,.7)}
.request .lbl span::before{background:var(--sun)}
.request .branch path{stroke:var(--light)}
.request .branch .branch__l{fill:var(--sun)}
.request .body{color:rgba(238,240,230,.86)}
.three{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1px solid rgba(238,240,230,.22);border-bottom:1px solid rgba(238,240,230,.22)}
.three li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 4px 14px;text-align:center}
.three li+li{border-left:1px solid rgba(238,240,230,.22)}
.three b{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid rgba(238,240,230,.55);border-radius:50%;font-family:var(--ff-latin);font-weight:400;font-size:15px;line-height:1}
.three span{font-family:var(--ff-head);font-size:14px;line-height:1.5;letter-spacing:.04em;text-wrap:balance}
.chips{margin-top:28px}
.chips p{font-size:12px;letter-spacing:.1em;color:rgba(238,240,230,.72)}
.chips ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips li{padding:5px 14px;border:1px solid rgba(238,240,230,.38);border-radius:999px;font-size:13px;line-height:1.8}
.btn--sun{margin-top:30px;background:var(--sun);color:var(--ink)}
.btn--sun::before{background:var(--light)}
.request__note{margin-top:14px;font-size:12px;line-height:1.95;color:rgba(238,240,230,.7)}

/* ---------- 10 案内 ---------- */
.ph--hedge{width:70%;margin-left:auto;margin-right:calc(var(--gutter)*-1)}
.ph--hedge .ph__z{aspect-ratio:5/6}
.ph--hedge figcaption{padding-right:var(--gutter)}
.access__txt{margin-top:44px}
.area{margin-top:28px}
.area__map{width:100%;max-width:340px;height:auto;margin:0 auto}
.area__map .a3{stroke:var(--rule2);stroke-dasharray:3 5}
.area__map .a2{fill:rgba(244,227,161,.55);stroke:var(--soil);stroke-width:.9}
.area__map .a1{fill:rgba(79,107,58,.16);stroke:var(--moss);stroke-width:1}
.area__map .ac{fill:var(--ink)}
.area__map text{font-family:var(--ff-body);font-size:clamp(12.5px,calc(29px - 4.63vw),14.3px);letter-spacing:.04em;fill:var(--ink)}
.area__map .t2{fill:var(--soil)}
.area__map .t3{font-size:clamp(12.5px,calc(29px - 4.63vw),14.3px);fill:var(--mute)}
.area__map .ld{stroke:var(--ink);stroke-width:.7;opacity:.5}
html.js .area circle{transform:scale(.5);opacity:0;transform-box:fill-box;transform-origin:center;transition:transform 1.6s var(--ease-out),opacity 1s var(--ease)}
html.js .area .a2{transition-delay:.25s}
html.js .area .a3{transition-delay:.5s}
html.js .area.is-in circle{transform:none;opacity:1}
.area__note{margin-top:6px;font-size:12px;line-height:1.8;color:var(--mute);text-align:center}
.info{margin-top:30px;border-bottom:1px solid var(--rule)}
.info div{display:grid;grid-template-columns:4.8em 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.info dt{font-size:12px;letter-spacing:.14em;line-height:2.15;color:var(--moss)}
.info dd{font-size:16px;line-height:1.9;text-wrap:pretty}

/* ---------- 下の帯 ---------- */
.ft{position:relative;overflow:hidden;background:var(--ink);color:var(--light)}
.ft__in{display:flex;flex-direction:column;max-width:1300px;margin-inline:auto;padding:56px var(--gutter) 0}
.ft__cols{display:grid;gap:30px}
.ft__addr{font-size:12.5px;line-height:2.05;color:rgba(238,240,230,.75)}
.ft__addr b{font-family:var(--ff-head);font-weight:400;font-size:17px;letter-spacing:.14em;color:var(--light)}
.ft__nav{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;font-size:13.5px;letter-spacing:.06em}
.ft__nav a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid rgba(238,240,230,.12)}
.ft__cta{justify-self:start;color:var(--sun)}
.ft__logo{display:flex;align-items:baseline;justify-content:center;gap:.12em;margin:30px 0 .14em;font-family:var(--ff-head);font-size:clamp(100px,32vw,380px);line-height:1;letter-spacing:.06em;white-space:nowrap;color:rgba(238,240,230,.08)}
.ft__logo em{font-family:var(--ff-latin);font-size:.18em;font-style:italic;letter-spacing:.04em}
.sample{position:relative;padding:22px var(--gutter) calc(98px + env(safe-area-inset-bottom,0px));background:#141D14;font-size:12px;line-height:1.95;color:rgba(238,240,230,.78)}
.sample__lnk{margin-top:8px}
.sample__lnk a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--sun)}

/* 葉の形の入口と、見本の札 */
.leaf{position:fixed;z-index:30;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;align-content:center;gap:3px;width:72px;height:72px;color:var(--light);opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .6s var(--ease),transform .9s var(--ease-out)}
.leaf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--moss);border-radius:6px 70% 6px 70%;box-shadow:0 14px 26px -12px rgba(30,42,29,.6);animation:leafSway 6s ease-in-out infinite alternate}
.leaf::after{content:"";position:absolute;left:14%;top:14%;width:100%;height:1px;background:rgba(238,240,230,.22);transform:rotate(45deg);transform-origin:0 0;z-index:-1}
.leaf span{font-family:var(--ff-head);font-size:12.5px;line-height:1.35;letter-spacing:.1em;padding-left:.1em;text-align:center}
.leaf small{font-family:var(--ff-latin);font-size:12px;letter-spacing:.14em;line-height:1;color:var(--sun)}
.leaf.is-on{opacity:1;transform:none;pointer-events:auto}
@keyframes leafSway{from{rotate:-3deg}to{rotate:3deg}}
.pill{position:fixed;z-index:30;left:8px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;min-height:44px;padding:0 10px 0 22px;background:rgba(246,247,240,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--rule2);border-radius:22px 3px 3px 22px;font-size:12px;letter-spacing:0;line-height:1.5}
.pill::before{content:"";position:absolute;left:11px;top:50%;width:6px;height:6px;margin-top:-3px;border:1px solid var(--ink);border-radius:50%}
.pill span{color:var(--moss);padding-right:6px;margin-right:6px;border-right:1px solid var(--rule2)}
.pill a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
html.is-menu .leaf,html.is-menu .pill{opacity:0;pointer-events:none}
html.static .leaf{opacity:1;transform:none;pointer-events:auto}

/* ================= 広い画面 ================= */
@media (min-width:900px){
  html{scroll-padding-top:76px}
  body{font-size:15.5px}
  .sec{padding-block:clamp(140px,12vw,210px)}
  .h2{margin-top:24px;font-size:clamp(38px,3.3vw,50px);line-height:1.55}
  .body{margin-top:30px}
  .branch{margin-top:24px;width:min(300px,84%)}

  .hd{height:76px}
  .hd__mark{font-size:27px}
  .hd__sub em{font-size:13px}
  .hd__sub small{font-size:12px}
  .hd__btn{display:none}
  .hd__nav{display:flex;gap:clamp(16px,2vw,32px);margin-left:auto;margin-right:clamp(20px,2.6vw,40px);font-size:13px;letter-spacing:.08em}
  .hd__nav a{position:relative;display:flex;align-items:center;min-height:44px}
  .hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;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;min-height:46px;padding:0 22px;background:var(--ink);color:var(--light);font-family:var(--ff-head);font-size:14px;letter-spacing:.12em;transition:background-color .5s}
  .hd__cta small{font-family:var(--ff-latin);font-size:12px;letter-spacing:.2em;color:var(--sun)}
  .hd__cta:hover{background:var(--moss)}

  .hero__media img{object-position:0% 42%}
  .hero__veil{background:linear-gradient(90deg,rgba(239,241,231,.5) 0%,rgba(239,241,231,.22) 28%,rgba(239,241,231,0) 44%),linear-gradient(0deg,rgba(24,34,22,.38) 0%,rgba(24,34,22,0) 22%)}
  .hero__sun{background:radial-gradient(ellipse 50% 50% at 70% 4%,rgba(244,227,161,.85),rgba(244,227,161,0) 70%)}
  .hero__txt{top:calc(76px + 12vh);left:calc(var(--gutter) + .5vw);right:auto}
  .hero__ttl{font-size:clamp(34px,min(3.1vw,5.6vh),60px);line-height:1.46}
  .ln--a,.ln--b{display:inline-block;vertical-align:top}
  .hero__en{margin-bottom:22px;font-size:13px}
  .en-pc{display:inline}
  .en-sp{display:none}
  .hero__pcl{display:block;max-width:24em;margin-top:3.4vh}
  .hero__pcl .hero__lead{font-size:14px;line-height:2.05;color:var(--ink)}
  .hero__pcl .lnk{margin-top:10px}
  html.js .hero__pcl{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) 1.9s,transform 1.4s var(--ease-out) 1.9s}
  html.js.is-loaded .hero__pcl{opacity:1;transform:none}
  .hero__scroll{bottom:26px}
  .hero__lead--sp{display:none}
  .hero__under{max-width:1300px;margin:0 auto;padding:0 var(--gutter)}
  .facts{margin-top:0;border-top:0}
  .facts li{flex-direction:row;align-items:baseline;justify-content:center;gap:14px;padding:26px 10px}
  .facts__k{font-size:12px}
  .facts__v{margin-top:0;font-size:13px}
  .facts__v b{font-size:30px}
  .facts__v--ja{font-size:26px}
  .facts small{margin-top:0;font-size:12px}

  .garden .sec__in{max-width:1180px}
  .stones{display:grid;grid-template-columns:repeat(12,1fr);margin-top:70px}
  .stones li{padding:0}
  .stones li:nth-child(1){grid-column:1/7}
  .stones li:nth-child(2){grid-column:6/12;margin:110px 0 0}
  .stones li:nth-child(3){grid-column:3/9;margin:96px 0 0}
  .stones__n{width:78px;height:52px;font-size:20px;margin-top:6px}
  .stones li:nth-child(2) .stones__n{width:72px}
  .stones li:nth-child(3) .stones__n{width:84px}
  .stones p{font-size:clamp(28px,2.5vw,36px);line-height:1.6}
  .garden__sub{max-width:34em;margin:90px 0 0 auto;padding-top:28px;font-size:15px}

  .decide__in{display:grid;grid-template-columns:5fr 6fr;gap:8%;align-items:start}
  .ph--consult{position:sticky;top:110px;width:100%;margin:0}
  .ph--consult .ph__z{aspect-ratio:2/3;max-height:calc(100vh - 170px)}
  .ph--consult figcaption{padding-right:0}
  .decide__txt{margin-top:0;padding-top:4%}
  .rules{margin-top:56px}
  .rules li{grid-template-columns:70px 1fr;padding:34px 0 36px}
  .rules b{font-size:32px}
  .rules h3{font-size:23px}
  .rules p{margin-top:10px;font-size:15px}

  .koyomi{padding-top:clamp(140px,12vw,210px)}
  .koyomi__head{display:grid;grid-template-columns:auto 1fr;column-gap:8%;align-items:end}
  .koyomi__head .lbl{grid-column:1/-1}
  .koyomi__head .h2{grid-column:1}
  .koyomi__head .branch{grid-column:1;grid-row:3}
  .koyomi__head .body{grid-column:2;grid-row:2/4;align-self:end;margin:0 0 6px;max-width:26em}
  html.js .koyomi__track{height:calc(100vh + 12 * 40vh)}
  html.js .koyomi__stage,html.static .koyomi__stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:7vw;row-gap:0;align-items:center;max-width:1300px;margin:0 auto;padding:96px var(--gutter) 40px}
  html.static .koyomi__stage{min-height:760px}
  .ring{grid-column:1;grid-row:1/5;width:min(70vh,40vw,620px)}
  .koyomi__info{grid-column:2;grid-row:2;max-width:none;margin:0}
  .koyomi__m b{font-size:clamp(110px,10vw,150px)}
  .koyomi__m span{font-size:32px;margin-left:10px}
  .koyomi__en{font-size:22px}
  .trees{gap:8px;margin-top:20px}
  .trees li{padding:3px 15px;font-size:14px}
  .koyomi__say{margin-top:20px;font-size:21px;line-height:1.85}
  .months{grid-column:2;grid-row:3;grid-template-columns:repeat(12,1fr);max-width:none;margin:34px 0 0}
  .months button{font-size:17px}
  .months small{display:none}
  .koyomi__note{margin-top:28px}

  .calc{display:grid;grid-template-columns:7fr 5fr;gap:6%;align-items:start;margin-top:64px}
  .estimate__head{display:grid;grid-template-columns:auto 1fr;column-gap:8%;align-items:end}
  .estimate__head .lbl{grid-column:1/-1}
  .estimate__head .h2{grid-column:1}
  .estimate__head .branch{grid-column:1;grid-row:3}
  .estimate__head .body{grid-column:2;grid-row:2/4;align-self:end;margin:0 0 6px;max-width:26em}
  .row{grid-template-columns:52px 1fr auto;column-gap:24px;padding:22px 0}
  .row__ic{width:46px;height:68px}
  .row__txt{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-right:12px}
  .row__name{font-size:21px}
  .row__name small{display:inline;margin-left:10px;font-size:12px}
  .row__yen{font-size:12.5px}
  .row__yen b{font-size:17px}
  .stepper output{min-width:62px}
  .stepper output b{font-size:28px}
  .calc__sum{position:sticky;top:106px;margin-top:0;padding:40px 40px 34px}
  .sum__yen b{font-size:68px}

  .day__in{display:grid;grid-template-columns:6fr 5fr;gap:8%;align-items:start}
  .flow{margin-top:64px}
  .flow>li{padding:0 0 64px 54px}
  .flow>li::before{top:12px;width:13px;height:13px}
  .flow>li::after{left:6px;top:34px}
  .flow__t{font-size:28px}
  .flow__t--ja{font-size:16px;line-height:2.1}
  .flow h3{margin-top:10px;font-size:23px}
  .flow li>p:not(.flow__t){font-size:15px;max-width:30em}
  .strip{display:none}
  .day__side{display:block;position:sticky;top:120px;padding-top:40px}
  .frame{position:relative;aspect-ratio:4/5;max-height:calc(100vh - 210px);margin-left:auto;background:var(--face)}
  .frame__ph{position:absolute;inset:0;margin:0;overflow:hidden;opacity:0;transition:opacity 1.2s var(--ease)}
  .frame__ph img{width:100%;height:100%;object-fit:cover;scale:1.08;transition:scale 2.6s var(--ease-out)}
  .frame__ph::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;right:-60%;background:linear-gradient(104deg,rgba(244,227,161,0) 40%,rgba(244,227,161,.7) 50%,rgba(244,227,161,0) 60%);mix-blend-mode:soft-light;transform:translateX(-62%);opacity:0}
  .frame__ph.is-on{opacity:1}
  .frame__ph.is-on img{scale:1}
  .frame__ph.is-on::after{transform:translateX(62%);opacity:1;transition:transform 2.6s var(--ease-out) .1s,opacity .4s}
  .frame__cap{position:absolute;left:0;top:100%;margin-top:12px;font-family:var(--ff-latin),var(--ff-body);font-size:12px;letter-spacing:.06em;line-height:1.7;color:var(--mute)}

  .tools__in{display:grid;grid-template-columns:4fr 5fr 3fr;gap:6%;align-items:start}
  .tools__txt,.ph--moss{order:0}
  .ph--moss{box-shadow:none}
  .ph--tools{width:100%;margin:0}
  .ph--tools .ph__z{aspect-ratio:2/3}
  .ph--tools figcaption{padding-left:0}
  .tools__txt{margin-top:0;padding-top:12%}
  .hands{margin-top:48px}
  .hands li{padding:26px 0}
  .hands p{font-size:22px}
  .hands small{font-size:13.5px}
  .ph--moss{width:100%;margin:62% 0 0}
  .tools .h2{font-size:clamp(32px,2.6vw,40px)}

  .oyakata .sec__in{max-width:1120px}
  .oyakata .lbl{justify-content:center}
  .oyakata__q{margin-top:44px;font-size:clamp(52px,5.2vw,76px);line-height:1.45;text-align:center}
  .oyakata .branch{margin-inline:auto}
  .letter{column-count:2;column-gap:80px;margin-top:84px}
  .letter p{font-size:15.5px;line-height:2.3;break-inside:avoid}
  .sign{margin-top:64px}

  .faq__in{display:grid;grid-template-columns:4fr 8fr;gap:8%;align-items:start}
  .faq__head{position:sticky;top:120px}
  .faq__list{margin-top:8px}
  .faq summary{padding:26px 0;font-size:19px}
  .faq details>div{padding:0 70px 30px 0}
  .faq details>div p{font-size:15px}

  .request__ring{right:-300px;top:50%;width:980px;margin-top:-490px}
  .request__in{display:grid;grid-template-columns:7fr 5fr;column-gap:8%;align-items:start}
  .request__in>.lbl,.request__in>.h2,.request__in>.branch,.request__in>.body{grid-column:1}
  .request__ttl{font-size:clamp(44px,4.2vw,62px)}
  .request__in>.three{grid-column:2;grid-row:1/5;align-self:end;margin-top:0}
  .request__in>.chips,.request__in>.btn,.request__in>.request__note{grid-column:1}
  .three{display:block;border-bottom:0}
  .three li{flex-direction:row;gap:16px;padding:18px 0;text-align:left;border-bottom:1px solid rgba(238,240,230,.22)}
  .three li+li{border-left:0}
  .three span{font-size:19px}
  .chips{margin-top:40px}
  .btn--sun{max-width:460px;margin-top:36px;font-size:17px;min-height:68px;padding:18px 30px}

  .access__in{display:grid;grid-template-columns:5fr 7fr;gap:8%;align-items:start}
  .ph--hedge{width:100%;margin:0}
  .ph--hedge .ph__z{aspect-ratio:2/3}
  .ph--hedge figcaption{padding-right:0}
  .access__txt{margin-top:0;padding-top:3%}
  .area{display:grid;grid-template-columns:1fr;justify-items:start;margin-top:44px}
  .area__map{margin:0;max-width:440px}
  .area__note{text-align:left}
  .info{margin-top:40px}
  .info div{grid-template-columns:6.2em 1fr;padding:19px 0}
  .info dd{font-size:14.5px}

  .ft__in{padding-top:100px}
  .ft__cols{grid-template-columns:1.4fr 1.2fr auto;gap:60px;align-items:start}
  .ft__nav{gap:0 36px}
  .ft__logo{margin-top:80px;font-size:clamp(200px,26vw,380px)}
  .sample{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:16px var(--gutter) 16px 250px}
  .sample br{display:none}
  .sample__lnk{margin-top:0;flex:none}
  .leaf{right:28px;bottom:28px;width:92px;height:92px}
  .leaf span{font-size:14px}
  .leaf small{font-size:12px}
  .pill{left:22px;bottom:22px;padding:0 14px 0 26px}
}