/* =========================================================
   MONZ Inc. — Draft 3 "Backcasting"
   ---------------------------------------------------------
   写真ディレクション（/assets/img/）
   hero-pc.webp 2400×1400 / hero-sp.webp 1080×1920
     夕景〜夜明けの大開口の窓越しに都市と空を望む上質な住空間。
     右上（GOAL位置）に光源・空、左下はコピー用に暗く静かな面。
     物件外観・鍵・握手・営業マンは不可。人物は無し or 小さな後ろ姿。
   band.webp 2400×1200 : 自然光と影が落ちる床・壁の抽象クロップ
   about.webp 1200×1500: 窓辺・階段など建築ディテール（縦位置、アーチでトリミング）
   ========================================================= */

:root{
  --ink:#142B61; --ink-2:#18336F; --ink-line:rgba(236,242,255,.18);
  --stone:#F2F5FA; --stone-2:#E8EEF7; --paper:#FAFCFF;
  --text:#18213A; --muted:#59657A; --line:rgba(24,43,97,.14);
  --on-dark:#F4F7FF; --on-dark-muted:#B8C5DF;
  --brass:#B8925A; --brass-light:#CFAE78; --brass-deep:#7A5B30;
  --error:#A3392B;
  --btn-blue:#4DA3FF; --btn-blue-hover:#FFFFFF; --btn-blue-deep:#2F7FE0;
  --ff-min:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --ff-en:"Cormorant Garamond","Times New Roman",serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(20px,5vw,72px);
  --max:1280px;
  --slope:7vw;
  --header-h:72px;
}
@media (max-width:767px){ :root{ --slope:12vw; --header-h:60px; } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--stone);color:var(--text);font-family:var(--ff-sans);font-size:clamp(15px,.3vw + 14px,17px);line-height:1.95;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
::selection{background:var(--brass);color:#111}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--on-dark);padding:10px 16px;transition:top .2s}
.skip-link:focus{top:12px}
.container{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sp-only{display:inline}
@media (min-width:768px){.sp-only{display:none}}
[lang="en"]{font-family:var(--ff-en)}
p,h1,h2,h3,h4,li,dd{word-break:auto-phrase;line-break:strict}
.text-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .3s}
.text-link:hover{color:var(--brass-deep)}

/* ---------- mask reveal (shared) ---------- */
.mask{display:block;overflow:hidden;padding-bottom:.08em}
.mask>span{display:block;transition:transform 1.1s var(--ease)}

/* ---------- section head ---------- */
.sec-head{display:flex;align-items:flex-start;gap:1.2em;margin-bottom:clamp(40px,6vw,88px)}
.sec-head__no{position:relative;padding-right:3em;font-family:var(--ff-en);font-size:1rem;letter-spacing:.12em;color:var(--brass-deep);line-height:1;margin-top:.55em}
.sec-head__no::after{content:"";position:absolute;right:0;top:50%;width:2.2em;height:1px;background:currentColor}
.sec-head__title{display:flex;flex-direction:column;font-weight:500;font-size:.82rem;letter-spacing:.24em;line-height:1.4}
.sec-head__title span[lang="en"]{font-style:italic;font-weight:400;font-size:clamp(2.2rem,4.6vw,4.2rem);letter-spacing:0;line-height:1;margin-bottom:.4em}
.sec-head--dark .sec-head__no{color:var(--brass)}
.sec-head--dark .sec-head__title{color:var(--on-dark)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:70;height:var(--header-h);color:var(--text);transition:background-color .4s,color .4s,transform .5s var(--ease),box-shadow .4s}
.site-header__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter)}
.site-header--top-no-brand .site-header__inner{justify-content:flex-end}
.site-header.is-dark{color:var(--on-dark)}
.site-header.is-scrolled{background:rgba(242,245,250,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.site-header.is-scrolled.is-dark{background:rgba(20,43,97,.82);box-shadow:0 1px 0 var(--ink-line)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-menu{background:transparent;box-shadow:none;color:var(--on-dark);transform:none}
.brand{display:inline-flex;align-items:baseline;gap:.4em;text-decoration:none;line-height:1}
.brand__mark{font-family:var(--ff-en);font-weight:500;font-size:1.6rem;letter-spacing:.32em}
.brand__sub{font-family:var(--ff-en);font-style:italic;font-size:.95rem;opacity:.7}
.gnav{display:none}
@media (min-width:1024px){
  .gnav{display:flex;align-items:center;gap:40px}
  .gnav__list{display:flex;gap:36px}
  .gnav__list a{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1.2;padding:6px 0}
  .gnav__list a span{font-size:1.08rem;font-style:italic}
  .gnav__list small{font-size:.66rem;letter-spacing:.2em;opacity:.7}
  .gnav__list a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
  .gnav__list a:hover::after,.gnav__list a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
  .gnav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 1.5em;border:1px solid currentColor;border-radius:999px;font-size:.82rem;letter-spacing:.14em;text-decoration:none;transition:background-color .35s,color .35s,border-color .35s}
  .gnav__cta:hover{background:var(--btn-blue);border-color:var(--btn-blue);color:#071A3A}
  .menu-btn{display:none}
}
.menu-btn{position:relative;width:44px;height:44px;display:grid;place-items:center}
.menu-btn span{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.menu-btn span:first-child{transform:translateY(-4px)}
.menu-btn span:last-child{transform:translateY(4px)}
.menu-btn[aria-expanded="true"] span:first-child{transform:rotate(30deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:rotate(-30deg)}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--header-h) + 32px) var(--gutter) calc(32px + env(safe-area-inset-bottom));overflow-y:auto;clip-path:circle(0 at calc(100% - 42px) 30px);visibility:hidden;transition:clip-path .7s var(--ease-io),visibility 0s .7s}
.drawer.is-open{clip-path:circle(150% at calc(100% - 42px) 30px);visibility:visible;transition:clip-path .7s var(--ease-io)}
.drawer__list li{border-bottom:1px solid var(--ink-line)}
.drawer__list a{display:flex;align-items:baseline;gap:14px;padding:20px 0;text-decoration:none;font-family:var(--ff-min);font-size:1.45rem;letter-spacing:.08em}
.drawer__list i{font-family:var(--ff-en);font-style:normal;font-size:.85rem;color:var(--brass)}
.drawer__list span{margin-left:auto;font-style:italic;font-size:.95rem;color:var(--on-dark-muted)}
.drawer__foot{display:flex;flex-direction:column;gap:8px;margin-top:40px;font-size:.9rem;color:var(--on-dark-muted)}
.drawer__foot a{text-decoration:none;padding:6px 0}

/* ---------- progress rail (PC) ---------- */
.rail{display:none}
@media (min-width:1200px){
  .rail{position:fixed;right:26px;top:50%;z-index:30;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;mix-blend-mode:difference;pointer-events:none}
  .rail__label{font-family:var(--ff-en);font-size:.7rem;letter-spacing:.2em;writing-mode:vertical-rl}
  .rail__track{position:relative;width:1px;height:32vh;background:rgba(255,255,255,.28)}
  .rail__fill{position:absolute;inset:0;background:#fff;transform-origin:top;transform:scaleY(var(--progress,0))}
}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:580px;color:var(--on-dark);background:var(--ink);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slope)),0 100%);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;clip-path:inset(0 0 0 0 round 0 0 0 0);transition:clip-path 1.5s var(--ease-io)}
.js .hero:not(.is-ready) .hero__media{clip-path:inset(18% 19.5% 55% 76.5% round 999px 999px 0 0)}
@media (max-width:767px){ .js .hero:not(.is-ready

) .hero__media{clip-path:inset(14% 12% 66% 70% round 999px 999px 0 0)} }
.hero__img{position:absolute;inset:-6% 0;background:radial-gradient(120% 90% at 82% 18%,#5673ad 0%,#294b88 36%,#19366f 70%,#102653 100%)}
.hero__img picture,.hero__img img{width:100%;height:100%}
.hero__img img,.band__img img,.arch__img img{width:100%;height:100%;object-fit:cover}
.hero__img img{object-position:70% 40%;transform:scale(1.12);transition:transform 2.8s var(--ease)}
.hero.is-ready .hero__img img{transform:scale(1)}
[data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hero__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(20,43,97,0) 18%,rgba(20,43,97,.48) 58%,rgba(12,31,73,.9) 100%),linear-gradient(90deg,rgba(14,36,82,.58),rgba(20,43,97,0) 62%);transition:opacity 1.6s .4s}
.js .hero:not(.is-ready) .hero__veil{opacity:0}
.hero__axis{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;clip-path:inset(0 0 0 0);transition:clip-path 1.4s var(--ease-io)}
.hero__axis line{stroke:var(--brass-light);stroke-width:1;vector-effect:non-scaling-stroke}
.hero__axis .is-sp{display:none}
@media (max-width:767px){.hero__axis .is-pc{display:none}.hero__axis .is-sp{display:inline}}
.js .hero:not(.is-lit) .hero__axis{clip-path:inset(0 0 0 100%)}
.hero__goal{position:absolute;left:78%;top:27%;width:0;height:0;transition:opacity 1s .3s}
.js .hero:not(.is-ready) .hero__goal{opacity:0}
.hero__goal-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#FFF7D8;box-shadow:0 0 10px rgba(255,247,216,.95),0 0 28px rgba(255,237,177,.62),0 0 60px rgba(255,237,177,.26);animation:pulse 3.2s var(--ease) infinite}.hero__goal-dot::before,.hero__goal-dot::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,rgba(255,247,216,.75),transparent);transform:translate(-50%,-50%);pointer-events:none}.hero__goal-dot::before{width:52px;height:1px}.hero__goal-dot::after{width:1px;height:52px;background:linear-gradient(180deg,transparent,rgba(255,247,216,.65),transparent)}
.hero__goal-label{position:absolute;left:18px;bottom:10px;white-space:nowrap;font-family:var(--ff-en);font-size:.78rem;letter-spacing:.24em}
.hero__goal-label em{display:block;font-size:1rem;letter-spacing:.04em;color:var(--on-dark-muted)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(207,174,120,.55)}70%,100%{box-shadow:0 0 0 22px rgba(207,174,120,0)}}
@media (max-width:767px){.hero__goal{left:80%;top:20%}.hero__goal-label{left:auto;right:16px;text-align:right}}
.hero__inner{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--slope) + clamp(56px,9vh,110px));max-width:1000px}
.hero__eyebrow{font-style:italic;font-size:clamp(.95rem,1.2vw,1.2rem);color:var(--brass-light);margin-bottom:1.4em}
.hero__title{font-family:var(--ff-min);font-weight:500;font-size:clamp(28px,5.6vw,88px);line-height:1.38;letter-spacing:.06em}
@media (max-width:767px){.hero__title{font-size:8vw;letter-spacing:.02em}}

.hero__note{margin-top:2em;font-size:.85rem;letter-spacing:.18em;color:var(--on-dark-muted)}


.hero__scroll{position:absolute;right:var(--gutter);bottom:calc(var(--slope) + 24px);display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px;font-size:.74rem;letter-spacing:.24em;text-decoration:none;color:var(--on-dark-muted)}
.hero__scroll::after{content:"";width:1px;height:56px;background:linear-gradient(var(--brass-light),transparent);transform-origin:top;animation:drop 2.4s var(--ease-io) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:767px){.hero__scroll{display:none}}

/* ---------- PHILOSOPHY ---------- */
.philosophy{position:relative;padding:clamp(96px,14vw,200px) 0 clamp(140px,18vw,260px);overflow:hidden}
.drift{position:absolute;top:clamp(24px,5vw,60px);left:0;white-space:nowrap;font-family:var(--ff-en);font-style:italic;font-size:clamp(4.5rem,15vw,15rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(122,91,48,.22);pointer-events:none;user-select:none}
.drift__track{display:flex;width:max-content;will-change:transform;animation:drift-marquee 42s linear infinite}
.drift__group{display:flex;gap:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem)}
@keyframes drift-marquee{to{transform:translateX(-50%)}}
.philosophy__grid{position:relative;display:grid;gap:8px}
@media (min-width:1024px){.philosophy__grid{grid-template-columns:4fr 8fr;gap:0 48px;padding-top:6vw}}
.philosophy__lead{font-family:var(--ff-min);font-weight:500;font-size:clamp(1.4rem,3.1vw,2.9rem);line-height:1.9;letter-spacing:.08em}
@media (max-width:767px){.philosophy__lead{font-size:clamp(1.15rem,5.2vw,1.5rem)}}
.ch{opacity:.16;transition:opacity .5s}
.ch.is-on{opacity:1}
.philosophy__text{margin-top:2em;color:var(--muted);max-width:36em}
.backcast{margin-top:clamp(56px,8vw,110px);max-width:640px}
.backcast__track{position:relative;display:flex;justify-content:space-between;padding-top:8px}
.backcast__pt{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;font-size:.78rem;letter-spacing:.14em;color:var(--muted)}
.backcast__pt b{font-weight:400;font-style:italic;font-size:1.3rem;letter-spacing:.06em;color:var(--text)}
.backcast__pt::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--stone);border:1px solid var(--brass-deep);margin-bottom:10px}
.backcast__pt--goal{align-items:flex-end;text-align:right}
.backcast__pt--goal::before{background:var(--brass)}
.backcast__line{position:absolute;left:6px;right:6px;top:12px;height:1px;background:var(--brass-deep);transform-origin:right;transition:transform 1.6s var(--ease-io) .2s}
.backcast__line::before{content:"";position:absolute;left:0;top:-4px;border-style:solid;border-width:4px 7px 4px 0;border-color:transparent var(--brass-deep) transparent transparent}
.js .backcast:not(.is-in) .backcast__line{transform:scaleX(0)}
.backcast figcaption{margin-top:18px;font-family:var(--ff-min);letter-spacing:.14em}
@media (max-width:767px){
  .philosophy__body,.philosophy__lead,.backcast,.backcast__track{min-inline-size:0;max-inline-size:100%}
  .philosophy__lead{font-size:clamp(1.15rem,5vw,1.5rem);letter-spacing:.06em;word-break:normal;overflow-wrap:anywhere}
  .backcast{inline-size:100%}
  .backcast__track{gap:24px}
  .backcast__pt{min-inline-size:0;max-inline-size:calc((100% - 24px)/2);letter-spacing:.1em}
  .backcast__pt b{font-size:clamp(1.15rem,5.2vw,1.3rem)}
}

/* ---------- BUSINESS ---------- */
.business{position:relative;z-index:1;background:var(--ink);color:var(--on-dark);padding:clamp(40px,6vw,80px) 0 clamp(200px,24vw,340px);--open:0}
.business::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(70px,12vw,200px);background:var(--ink);border-top-left-radius:calc(50% - 50% * var(--open)) calc(100% - 100% * var(--open));border-top-right-radius:calc(50% - 50% * var(--open)) calc(100% - 100% * var(--open))}
.business__catch{font-family:var(--ff-min);font-weight:500;font-size:clamp(1.5rem,3.6vw,3.2rem);line-height:1.6;letter-spacing:.06em;margin-bottom:clamp(64px,9vw,140px)}
@media (max-width:767px){.business__catch{font-size:5.4vw}}
.business__catch .mask:nth-child(2)>span,.about__mission .mask:nth-child(2)>span,.mission__statement .mask:nth-child(2)>span{transition-delay:.12s}
.js [data-reveal]:not(.is-in) .mask>span{transform:translateY(105%)}
.biz{display:grid;gap:56px}
@media (min-width:1024px){
  .biz{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:0 clamp(40px,6vw,96px);align-items:start}
  .biz__visual{position:sticky;top:calc(var(--header-h) + 4vh);height:calc(100vh - var(--header-h) - 8vh);display:grid;place-items:center}
}
.orbit{position:relative;width:min(100%,600px,calc(100vh - 180px));min-width:260px;aspect-ratio:1;margin-inline:auto}
.orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orbit__ring{fill:none;stroke:var(--ink-line);stroke-width:1}
.orbit__ring--main{stroke:rgba(207,174,120,.35);stroke-dasharray:2 6}
.orbit__ray{stroke:var(--brass-light);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;opacity:.5;transition:stroke-dashoffset 1.1s var(--ease-io) calc(var(--i) * 70ms),opacity .3s,stroke-width .3s}
.orbit__ray.is-active{opacity:1;stroke-width:2}
.orbit__center{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%;border:1px solid rgba(207,174,120,.5);background:radial-gradient(circle,rgba(207,174,120,.22),rgba(207,174,120,0) 70%)}
.orbit__center span{font-size:clamp(.6rem,1.1vw,.82rem);letter-spacing:.18em;color:var(--brass-light)}
.orbit__center strong{font-family:var(--ff-min);font-weight:500;font-size:clamp(.85rem,1.7vw,1.3rem);letter-spacing:.08em}
.orbit__center::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--brass-light);opacity:0}
.orbit[data-state="step1"] .orbit__center::after{animation:ripple 2.4s var(--ease) infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.4);opacity:0}}
.orbit__node{position:absolute;left:var(--x);top:var(--y);width:0;height:0;cursor:pointer;transition:opacity .6s calc(var(--i) * 60ms),transform .6s var(--ease) calc(var(--i) * 60ms)}
.orbit__dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--ink);border:1px solid var(--brass-light);transition:background-color .3s,transform .3s var(--ease)}
.orbit__label{position:absolute;left:0;top:14px;transform:translateX(-50%);white-space:nowrap;font-size:clamp(.7rem,1.1vw,.9rem);letter-spacing:.06em;transition:color .3s}
.orbit__node.is-active .orbit__dot{background:var(--brass-light);transform:scale(1.5)}
.orbit__node.is-active .orbit__label{color:var(--brass-light)}
.orbit[data-state="step0"] .orbit__node,.orbit[data-state="step1"] .orbit__node{opacity:0;transform:scale(.4)}
.orbit[data-state="step0"] .orbit__ray,.orbit[data-state="step1"] .orbit__ray,.orbit[data-state="step2"] .orbit__ray{stroke-dashoffset:1}
.step{padding:24px 0;border-top:1px solid var(--ink-line);transition:opacity .5s}
.step__no{font-family:var(--ff-en);font-size:clamp(3rem,6vw,5.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--brass-light)}
.step__en{margin-top:12px;font-style:italic;font-size:1.1rem;color:var(--on-dark-muted)}
.step__title{margin-top:6px;font-family:var(--ff-min);font-weight:500;font-size:clamp(1.3rem,2.4vw,2.1rem);letter-spacing:.08em}
@media (min-width:1024px){
  .step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:0;border:0}
  .js .biz.is-stepping .step:not(.is-current){opacity:.28}
}
@media (max-width:1023px){
  .step{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:center}
  .step__no{grid-row:span 2;font-size:2.8rem}
  .step__en{margin:0;font-size:.95rem}
  .step__title{margin:0;font-size:1.2rem}
}
.services{padding-top:clamp(48px,6vw,80px)}
.services__title{display:flex;flex-direction:column;margin-bottom:28px;font-family:var(--ff-min);font-weight:500;font-size:1.15rem;letter-spacing:.1em}
.services__title span{font-style:italic;font-weight:400;font-size:1rem;letter-spacing:.06em;color:var(--brass-light)}
.svc{display:grid;grid-template-columns:3em 1fr;gap:0 12px;padding:22px 8px;border-top:1px solid var(--ink-line);scroll-margin-top:calc(var(--header-h) + 40px);outline-offset:-2px;transition:background-color .3s}
.svc:last-child{border-bottom:1px solid var(--ink-line)}
.svc__no{font-family:var(--ff-en);color:var(--brass-light);line-height:1.8}
.svc__name{font-family:var(--ff-min);font-weight:500;font-size:1.12rem;letter-spacing:.08em;transition:color .3s}
.svc__desc{margin-top:8px;font-size:.9rem;line-height:1.9;color:var(--on-dark-muted)}
.svc__tags{margin-top:8px;font-size:.74rem;letter-spacing:.06em;color:var(--on-dark-muted);opacity:.85}
.svc.is-active{background:linear-gradient(90deg,rgba(207,174,120,.08),transparent)}
.svc.is-active .svc__name{color:var(--brass-light)}

/* ---------- BAND（境界をまたぐ写真） ---------- */
.band{position:relative;z-index:2;margin-top:calc(clamp(140px,18vw,260px) * -1);padding-left:var(--gutter)}
.band__frame{position:relative;width:min(88%,1400px);margin-left:auto;aspect-ratio:21/9;overflow:hidden;background:linear-gradient(120deg,#d3cabc,#8f877b 55%,#4a4640);clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease-io)}
.js .band:not(.is-in) .band__frame{clip-path:inset(0 0 0 100%)}
.band__img{position:absolute;inset:-10% 0}
@media (max-width:767px){.band{padding:0 var(--gutter) 0 0}.band__frame{width:100%;aspect-ratio:4/3}}

/* ---------- ABOUT ---------- */
.about{position:relative;padding:clamp(80px,10vw,150px) 0 calc(clamp(100px,12vw,180px) + var(--slope))}
.about__grid{display:grid;gap:56px}
@media (min-width:1024px){.about__grid{grid-template-columns:6fr 5fr;gap:0 clamp(48px,7vw,120px);align-items:end}}
.about__label{font-style:italic;font-size:1.05rem;color:var(--brass-deep);margin-bottom:10px}
.about__mission{font-family:var(--ff-min);font-weight:500;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.5;letter-spacing:.06em}
.about__body{margin-top:24px;color:var(--muted)}
.facts{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{font-style:italic;color:var(--brass-deep)}
.facts dd{font-size:.92rem}
.about__links{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:32px}
.link-arrow{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:.92rem;letter-spacing:.1em;text-decoration:none;transition:color .3s}
.link-arrow>span,.btn__arrow{position:relative;width:44px;height:1px;background:currentColor;transition:width .4s var(--ease),transform .4s var(--ease)}
.link-arrow>span::after,.btn__arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.link-arrow:hover{color:var(--brass-deep)}
.link-arrow:hover>span{width:64px}
.arch{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(180deg,#dad2c5,#a69c8e);clip-path:inset(0 0 0 0 round 999px 999px 0 0);transition:clip-path 1.5s var(--ease-io)}
.js .about__visual:not(.is-in) .arch{clip-path:inset(100% 0 0 0 round 999px 999px 0 0)}
.arch__img{position:absolute;inset:-8% 0}
@media (max-width:1023px){.about__visual{width:78%;max-width:420px;margin-left:auto}}

/* ---------- CTA ---------- */
.cta{position:relative;z-index:2;margin-top:calc(var(--slope) * -1);background:var(--ink);color:var(--on-dark);clip-path:polygon(0 var(--slope),100% 0,100% 100%,0 100%);padding:calc(var(--slope) + clamp(90px,12vw,170px)) 0 clamp(90px,12vw,160px);overflow:hidden;text-align:center}
.cta--compact{padding-bottom:clamp(80px,10vw,130px)}
.cta__rings{position:absolute;left:50%;top:50%;width:0;height:0}
.cta__rings span{position:absolute;left:0;top:0;width:var(--d);height:var(--d);border-radius:50%;border:1px solid rgba(207,174,120,.22);transform:translate(-50%,-50%) scale(1);transition:transform 2s var(--ease-io),opacity 2s}
.cta__rings span:nth-child(1){--d:min(110vw,1300px)}
.cta__rings span:nth-child(2){--d:min(76vw,880px);transition-delay:.12s}
.cta__rings span:nth-child(3){--d:min(46vw,500px);transition-delay:.24s}
.cta__rings i{display:none}
.js .cta:not(.is-in) .cta__rings span{transform:translate(-50%,-50%) scale(1.7);opacity:0}
.cta__inner{position:relative}
.cta__label{font-style:italic;font-size:1.05rem;letter-spacing:.12em;color:var(--brass-light)}
.cta__title{margin-top:18px;font-family:var(--ff-min);font-weight:500;font-size:clamp(1.8rem,4.4vw,3.8rem);line-height:1.5;letter-spacing:.08em}
.cta__text{margin-top:20px;color:var(--on-dark-muted)}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px}
.cta__tel{display:inline-flex;align-items:baseline;gap:12px;min-height:44px;margin-top:28px;font-family:var(--ff-en);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:.08em;text-decoration:none}
.cta__tel span{font-style:italic;font-size:1rem;color:var(--brass-light)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;padding:0 2em;border:1px solid transparent;border-radius:999px;font-size:.92rem;letter-spacing:.12em;text-decoration:none;transition:background-color .35s,color .35s,border-color .35s}
.btn--primary{background:var(--btn-blue);color:#071A3A}
.btn--primary:hover{background:var(--btn-blue-hover)}
.btn--ghost{border-color:rgba(237,232,223,.5);color:var(--on-dark)}
.btn--ghost:hover{border-color:var(--on-dark);background:rgba(237,232,223,.08)}
.btn .btn__arrow{width:22px}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark-muted);padding:clamp(56px,7vw,96px) 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--ink-line);font-size:.86rem}
.site-footer__grid{display:grid;gap:32px}
@media (min-width:768px){.site-footer__grid{grid-template-columns:1fr auto;align-items:end}}
.brand--footer{color:var(--on-dark);margin-bottom:18px}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:0 28px}
.site-footer__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.site-footer__nav a:hover,.site-footer__nav a[aria-current]{color:var(--on-dark)}
.site-footer__copy{margin-top:32px;font-family:var(--ff-en);letter-spacing:.1em}
@media (max-width:1023px){.site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* ---------- mobile CTA ---------- */
.m-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;display:flex;gap:8px;transform:translateY(calc(100% + 24px));transition:transform .5s var(--ease)}
.m-cta.is-show{transform:none}
.m-cta__btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--ink-line);border-radius:999px;background:var(--ink);color:var(--on-dark);font-size:.88rem;letter-spacing:.1em;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.m-cta__btn--line{flex:0 0 30%;background:#06C755;color:#fff;border-color:transparent}
@media (min-width:1024px){.m-cta{display:none}}

/* ---------- lower pages ---------- */
.page-hero{position:relative;background:var(--ink);color:var(--on-dark);padding:calc(var(--header-h) + clamp(56px,9vw,130px)) 0 calc(var(--slope) + clamp(56px,7vw,100px));clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slope)),0 100%);overflow:hidden}
.page-hero__axis{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease-io)}
.page-hero__axis line{stroke:rgba(207,174,120,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.js .page-hero:not(.is-lit) .page-hero__axis{clip-path:inset(0 0 0 100%)}
.page-hero .container{position:relative}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:.76rem;letter-spacing:.1em;color:var(--on-dark-muted)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--on-dark)}
.page-hero__title{display:flex;flex-direction:column;margin-top:clamp(32px,5vw,64px);font-family:var(--ff-min);font-weight:500;font-size:.95rem;letter-spacing:.24em}
.page-hero__title span{font-style:italic;font-weight:400;font-size:clamp(2.8rem,9vw,8rem);line-height:1;letter-spacing:0;margin-bottom:.25em}
.page-hero__lead{margin-top:28px;color:var(--on-dark-muted)}
.page-hero__local{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:36px}
.page-hero__local a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.88rem;letter-spacing:.12em;text-decoration:none}
.page-hero__local a::before{content:"";width:18px;height:1px;background:var(--brass-light)}
.mission,.profile{padding:clamp(80px,11vw,160px) 0}
.profile{padding-bottom:calc(var(--slope) + clamp(80px,10vw,140px))}
@media (min-width:1024px){.mission__grid,.message__grid,.profile__grid,.form-section__grid{display:grid;grid-template-columns:4fr 8fr;gap:0 48px}}
.mission__statement{font-family:var(--ff-min);font-weight:500;font-size:clamp(1.8rem,4.2vw,3.6rem);line-height:1.5;letter-spacing:.06em}
.mission__text{display:grid;gap:1.6em;margin-top:clamp(36px,5vw,64px);font-size:clamp(1rem,1.3vw,1.15rem);line-height:2.1}
[data-reveal="fade"]{transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.js [data-reveal="fade"]:not(.is-in){opacity:0;transform:translateY(16px)}
.message{background:var(--ink);color:var(--on-dark);padding:calc(var(--slope) + clamp(80px,10vw,150px)) 0;clip-path:polygon(0 var(--slope),100% 0,100% calc(100% - var(--slope)),0 100%)}
.message__body{display:grid;gap:1.6em;max-width:40em;color:rgba(237,232,223,.86)}
.message__content{display:grid;gap:clamp(36px,5vw,64px)}
.message__lead{font-family:var(--ff-min);font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.9;color:var(--on-dark)}
.message__sign{display:flex;flex-direction:column;align-items:flex-end;margin-top:1em;font-family:var(--ff-min);font-size:1.3rem;letter-spacing:.2em}
.message__sign span{font-family:var(--ff-sans);font-size:.78rem;letter-spacing:.12em;color:var(--on-dark-muted)}
.message__portrait{width:min(100%,360px);aspect-ratio:2/3;margin:0;overflow:hidden;border:1px solid rgba(237,232,223,.24)}
.message__portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
@media (max-width:767px){.message__content{gap:32px}.message__portrait{width:min(72%,280px);margin-left:auto}}
.profile__list>div{display:grid;grid-template-columns:7em 1fr;gap:4px 24px;padding:22px 0;border-top:1px solid var(--line)}
.profile__list>div:last-child{border-bottom:1px solid var(--line)}
.profile__list dt{font-size:.86rem;letter-spacing:.12em;color:var(--muted)}
@media (max-width:600px){.profile__list>div{grid-template-columns:1fr}}
.profile__biz{display:grid;gap:4px}
.profile__biz li::before{content:"";display:inline-block;width:10px;height:1px;margin-right:10px;vertical-align:middle;background:var(--brass-deep)}
.channels{padding-top:clamp(64px,8vw,110px)}
.channels__list{display:grid;border-top:1px solid var(--line)}
@media (min-width:900px){.channels__list{grid-auto-flow:column;grid-auto-columns:1fr}.channel:not(:last-child){border-right:1px solid var(--line)}}
.channel{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:32px clamp(0px,2vw,32px);border-bottom:1px solid var(--line)}
.channel__en{font-style:italic;font-size:1.05rem;color:var(--brass-deep)}
.channel__title{font-family:var(--ff-min);font-size:1.15rem;letter-spacing:.1em}
.channel__value{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ff-en);font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.06em;text-decoration:none}
.channel__value--mail{font-size:clamp(1.25rem,2.2vw,1.6rem);word-break:break-all}
.channel__value:hover{color:var(--brass-deep)}
.channel__meta{margin-top:10px;font-size:.86rem;line-height:1.8;color:var(--muted)}
.form-section{padding:clamp(80px,10vw,150px) 0 clamp(90px,11vw,160px)}
.form{position:relative;display:grid;gap:30px;max-width:760px}
.form__note{font-size:.84rem;color:var(--muted)}
.field{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.field>label,.field>legend{padding:0;font-size:.92rem;font-weight:500;letter-spacing:.08em}
.field>legend{margin-bottom:10px}
.req,.opt{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:3px;font-size:.68rem;font-weight:400;letter-spacing:.1em;vertical-align:2px}
.req{background:var(--ink);color:var(--on-dark)}
.opt{border:1px solid var(--line);color:var(--muted)}
.form__note .req{margin:0 4px 0 0}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field textarea{width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--text);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brass-deep);box-shadow:0 0 0 3px rgba(184,146,90,.25)}
.field [aria-invalid="true"]{border-color:var(--error)}
.field textarea{min-height:180px;line-height:1.8;resize:vertical}
.field__error{font-size:.82rem;color:var(--error)}
.field__error:empty{display:none}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices label{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:.88rem;cursor:pointer;transition:border-color .3s,background-color .3s}
.choices label:hover{border-color:var(--brass-deep)}
.choices input{width:18px;height:18px;margin:0;accent-color:var(--brass-deep)}
.choices label:has(input:checked){border-color:var(--brass-deep);background:rgba(184,146,90,.12)}
.consent__text{font-size:.82rem;line-height:1.9;color:var(--muted)}
.consent__check{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.consent__check input{flex:none;width:20px;height:20px;margin:5px 0 0;accent-color:var(--brass-deep)}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn--submit{justify-self:start;min-width:240px;background:var(--ink);color:var(--on-dark)}
.btn--submit:hover{background:var(--btn-blue-deep);color:#fff}
.btn--submit[aria-busy="true"]{opacity:.6;pointer-events:none}
@media (max-width:767px){.btn--submit{justify-self:stretch}}
.form__status{font-size:.92rem}
.form__status:focus{outline:none}
.form__status.is-error{color:var(--error)}
.form__status.is-success{color:var(--brass-deep)}
.legal{max-width:calc(820px + var(--gutter) * 2);padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(90px,11vw,160px)}
.legal>p{margin-top:1em}
.legal h2{margin-top:2.6em;padding-bottom:.6em;border-bottom:1px solid var(--line);font-family:var(--ff-min);font-weight:500;font-size:1.2rem;letter-spacing:.08em}
.legal__date{margin-top:3em;text-align:right;font-size:.86rem;color:var(--muted)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  [data-parallax],.drift{transform:none!important}
  .hero__img img{transform:none}
}

/* ---------- client review / production notes ---------- */
.draft-note{margin-top:14px;padding:12px 14px;border:1px solid #D9D900;background:#FFFF00;color:#202000;font-size:.76rem;line-height:1.7;letter-spacing:.04em;border-radius:4px;box-shadow:0 4px 16px rgba(89,70,0,.08)}
.draft-note strong{display:inline-block;margin-right:.7em;font-family:var(--ff-en);font-size:.78rem;letter-spacing:.16em;color:#3A3A00}
.draft-note--dark{border-color:#D9D900;background:#FFFF00;color:#202000}.draft-note--dark strong{color:#3A3A00}
.draft-photo{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;margin:0;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.band__frame,.arch{position:relative}
.draft-check-inline{display:inline-block;margin-left:.65em;padding:.22em .65em;border:1px solid #D9D900;border-radius:4px;background:#FFFF00;color:#202000;font-size:.7rem;font-weight:600;line-height:1.5;vertical-align:middle;box-shadow:0 2px 8px rgba(89,70,0,.08)}
.philosophy__text{margin-top:clamp(26px,3vw,40px);max-width:46em;color:var(--muted);white-space:normal}
.philosophy__text p+p{margin-top:1.25em}
@media(max-width:767px){.draft-photo{left:10px;right:10px;bottom:10px;font-size:.7rem}.draft-note{padding:10px 12px}}

.hero__draft-photo{position:absolute;z-index:4;left:var(--gutter);top:calc(var(--header-h) + 22px);max-width:min(620px,calc(100% - var(--gutter)*2));margin:0;background:#FFFF00;border-color:#D9D900;color:#202000}.hero__draft-photo strong{color:#3A3A00}@media(max-width:767px){.hero__draft-photo{top:calc(var(--header-h) + 12px);max-width:calc(100% - var(--gutter)*2);font-size:.68rem}}

.draft-note .draft-line{display:block;margin:0;line-height:1.7}.draft-note>strong:first-child{display:block;margin:0;line-height:1.7}


/* Backcast Light v1.3 integrated Hero override */
.hero{--pin:50vh;--gold:#E8CD8C;--gold-deep:#7A5B30;--star:#FFF6DC;--ice:#CFE0FF}
@supports (height:1svh){.hero{--pin:50svh}}
@media (max-width:767px){.hero{--pin:36vh}}
@supports (height:1svh){@media (max-width:767px){.hero{--pin:36svh}}}
/* =========================================================
   HERO
   .hero（外枠）= 100svh + pin の高さ。中の .hero__stage が sticky で固定され、
   pin 区間のスクロールは「演出の進行」に使われる（切れない構造）。
   ========================================================= */
.hero{position:relative;height:calc(100vh + var(--pin));height:calc(100svh + var(--pin));min-height:calc(560px + var(--pin));color:var(--on-dark)}
.hero.is-static{--pin:0px}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--ink);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slope)),0 100%)}

/* 背景（写真未確定時は MONZ ブルーの夜空グラデーション） */
.hero__bg{position:absolute;inset:-3% 0;z-index:-4;background:
  radial-gradient(60% 50% at 80% 24%,rgba(126,160,232,.38),rgba(126,160,232,0) 70%),
  radial-gradient(120% 90% at 82% 18%,#4466B0 0%,#2A4C96 32%,#1B3979 64%,#132B64 100%);
  transform:translate3d(0,calc(var(--exit,0) * -2%),0) scale(calc(1.02 + var(--exit,0) * .03));will-change:transform}
.hero__photo{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.6s var(--ease)}
.hero__photo picture,.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero.has-photo .hero__photo{opacity:1}
/* 写真テスト用ダミー：明るい夕景＋強い光源（光の視認性の最悪ケース検証用） */
.hero__photo--dummy{background:
  radial-gradient(30% 24% at 70% 46%,rgba(255,240,215,.75),rgba(255,240,215,0) 70%),
  linear-gradient(180deg,rgba(22,28,43,0) 0 61%,#1A2133 61.2%,#121826 100%),
  linear-gradient(180deg,#86A2D4 0%,#BDB8D2 32%,#EBC9A8 52%,#F6DDB8 61%)}

/* 可読性・光の視認性を守るベール。写真投入時は GOAL 周辺を局所的に沈める */
.hero__veil{position:absolute;inset:0;z-index:-3;pointer-events:none;background:
  linear-gradient(180deg,rgba(14,33,80,.38) 0,rgba(14,33,80,0) 22%),
  linear-gradient(200deg,rgba(20,43,97,0) 20%,rgba(20,43,97,.42) 60%,rgba(12,31,73,.86) 100%),
  linear-gradient(90deg,rgba(14,36,82,.5),rgba(20,43,97,0) 60%)}
.hero.has-photo .hero__veil{background:
  radial-gradient(360px 300px at var(--gx,78%) var(--gy,27%),rgba(12,30,74,.55),rgba(12,30,74,0) 72%),
  linear-gradient(180deg,rgba(14,33,80,.5) 0,rgba(14,33,80,.12) 38%,rgba(14,33,80,.2) 55%,rgba(12,31,73,.9) 100%),
  linear-gradient(90deg,rgba(14,36,82,.62),rgba(20,43,97,0) 64%)}

/* 現在地に光が当たる：コピー背後のごく淡い光だまり */
.hero__nowlight{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 2.2s var(--ease);background:
  radial-gradient(260px 200px at var(--nx,10%) var(--ny,60%),rgba(255,236,196,.16),rgba(255,236,196,0) 70%),
  radial-gradient(640px 420px at var(--nx,10%) var(--ny,60%),rgba(160,190,255,.12),rgba(160,190,255,0) 72%)}
.hero.is-lit .hero__nowlight,html:not(.js) .hero__nowlight{opacity:1}

/* 光レイヤー：screen で写真の上でも光として加算される */
.hero__canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

/* GOAL（位置はJSがレイアウトから算出して left/top を設定） */
.hero__goal{position:absolute;left:78%;top:27%;z-index:1;width:0;height:0}
.hero__goal-label{position:absolute;left:28px;bottom:18px;white-space:nowrap;font-family:var(--ff-en);font-size:.78rem;letter-spacing:.24em;color:var(--star);transition:opacity 1.2s var(--ease) .2s,transform 1.2s var(--ease) .2s}
.hero__goal-label em{display:block;font-style:italic;font-size:1rem;letter-spacing:.04em;color:var(--on-dark-muted)}
.js .hero:not(.is-arrived) .hero__goal-label{opacity:0;transform:translateY(6px)}
@media (max-width:767px){.hero__goal-label{left:auto;right:14px;bottom:auto;top:14px;text-align:right}}
.hero__goal-star{display:none}
html:not(.js) .hero__goal-star,.hero.no-canvas .hero__goal-star{display:block;position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--star);box-shadow:0 0 12px rgba(255,246,220,.9),0 0 36px rgba(232,205,140,.5)}

/* コピー */
.hero__inner{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--slope) + clamp(48px,8vh,110px));z-index:2;max-width:1000px}
.hero__now{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,2.4vh,28px);font-size:.72rem;letter-spacing:.2em;color:var(--on-dark-muted);opacity:.72;transition:opacity 1s var(--ease),color 1.4s var(--ease)}
.js .hero:not(.is-now) .hero__now{opacity:0}
.hero__now-dot{position:relative;flex:none;width:11px;height:11px;border-radius:50%;border:1px solid rgba(232,205,140,.72);background:rgba(18,42,99,.6);transition:background-color 1.2s,border-color 1.2s,box-shadow 1.6s var(--ease)}
.hero__now-text b{margin-right:.7em;font-weight:400;font-style:italic;font-size:1rem;letter-spacing:.08em;color:var(--on-dark)}
.hero.is-lit .hero__now,html:not(.js) .hero__now{opacity:1;color:var(--star)}
.hero.is-lit .hero__now-dot,html:not(.js) .hero__now-dot{background:var(--star);border-color:var(--star);box-shadow:0 0 0 4px rgba(255,246,220,.1),0 0 18px rgba(255,246,220,.7)}
.hero__eyebrow{font-style:italic;font-size:clamp(.95rem,1.2vw,1.2rem);color:var(--gold);margin-bottom:1.1em}
.hero__title{font-family:var(--ff-min);font-weight:500;font-size:clamp(28px,5.6vw,88px);font-size:clamp(28px,min(5.6vw,9.5vh),88px);line-height:1.38;letter-spacing:.06em}
@media (max-width:767px){.hero__title{font-size:8vw;letter-spacing:.02em}}
.hero.has-photo .hero__title,.hero.has-photo .hero__eyebrow{text-shadow:0 2px 24px rgba(10,24,60,.4)}
.hero__note{margin-top:1.6em;font-size:.85rem;letter-spacing:.18em;color:var(--on-dark-muted)}
.hero__title .mask:nth-child(1)>span{transition-delay:.12s}
.hero__title .mask:nth-child(2)>span{transition-delay:.26s}
.js .hero:not(.is-copy) .hero__eyebrow .mask>span,
.js .hero:not(.is-copy) .hero__title .mask>span,
.js .hero:not(.is-lit) .hero__note .mask>span{transform:translateY(105%)}

/* scroll cue */
.hero__scroll{position:absolute;right:var(--gutter);bottom:calc(var(--slope) + 24px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px;font-size:.74rem;letter-spacing:.24em;text-decoration:none;color:var(--on-dark-muted);opacity:calc(1 - var(--exit,0) * 1.6);transition:opacity 1s var(--ease)}
.js .hero:not(.is-done) .hero__scroll{opacity:0}
.hero__scroll::after{content:"";width:1px;height:56px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:drop 2.4s var(--ease-io) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:767px){.hero__scroll{display:none}}

/* ---------- 制作中メモ（html[data-draft] のときだけ表示） ---------- */
.draft-note{display:block;padding:6px 12px;border:1px solid rgba(160,190,255,.4);border-radius:4px;background:rgba(18,42,99,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--on-dark);font-size:.72rem;line-height:1.6;letter-spacing:.04em}
.draft-note strong{margin-right:.8em;font-family:var(--ff-en);font-weight:500;letter-spacing:.16em;color:var(--ice)}
html:not([data-draft]) .draft-note{display:none!important}
.hero__draft{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:calc(var(--header-h) + 4px);width:max-content;max-width:calc(100% - var(--gutter)*2);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
@media (max-width:767px){.hero__draft{font-size:.64rem;padding:4px 10px}}


.hero__draft{background:#FFFF00;border-color:#D9D900;color:#202000;white-space:normal;overflow:visible;text-overflow:clip;width:auto;max-width:min(620px,calc(100% - var(--gutter)*2));top:calc(var(--header-h) + 22px)}
.hero__draft strong{color:#3A3A00}
@media(max-width:767px){.hero__draft{top:calc(var(--header-h) + 12px);max-width:calc(100% - var(--gutter)*2);font-size:.68rem}}
@media (prefers-reduced-motion:reduce){.hero{--pin:0px}.hero__bg{transform:none}}


/* ===== 2026-09-29 client review refinements ===== */

/* Official MONZ logo asset */
.brand__logo{
  display:block;
  width:auto;
  height:38px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  transition:filter .22s ease;
}
.site-header.is-scrolled:not(.is-dark) .brand__logo{filter:none}
.brand__logo--footer{height:56px}
@media (max-width:767px){
  .brand__logo{height:30px}
  .brand__logo--footer{height:42px}
}

/* Business service accordion */
.svc--accordion{
  display:block;
  padding:0;
}
.svc__toggle{
  width:100%;
  display:grid;
  grid-template-columns:3em minmax(0,1fr) 28px;
  align-items:center;
  gap:0 12px;
  padding:22px 8px;
  text-align:left;
}
.svc__toggle .svc__name{
  transform-origin:left center;
  transition:color .28s var(--ease),transform .32s var(--ease);
}
.svc__plus{
  position:relative;
  width:20px;
  height:20px;
  justify-self:end;
}
.svc__plus::before,.svc__plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:1px;
  background:var(--brass-light);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease),opacity .3s;
}
.svc__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.svc.is-open .svc__plus::after{transform:translate(-50%,-50%) rotate(0);opacity:0}
.svc__panel{padding:0 8px 24px calc(3em + 20px)}
.svc__panel-inner{max-width:680px}
.svc__lead{
  font-family:var(--ff-min);
  font-size:1rem;
  line-height:1.8;
  letter-spacing:.05em;
  color:var(--brass-light);
}
.svc__panel .svc__desc{
  margin-top:12px;
  font-size:.9rem;
  line-height:2;
}
.svc.is-open{background:linear-gradient(90deg,rgba(207,174,120,.08),transparent)}
@media (hover:hover) and (pointer:fine){
  .svc__toggle:hover .svc__name,
  .svc.is-active .svc__toggle .svc__name{
    color:var(--brass-light);
    transform:scale(1.08);
  }
}
.svc__toggle:focus-visible{outline:2px solid var(--brass-light);outline-offset:-3px}

/* Mobile: make the future/options diagram a primary interactive visual */
@media (max-width:767px){
  .biz{gap:30px}
  .biz__visual{overflow:visible}
  .orbit{
    /* Fill the viewport (not 112% of the content column) so the enlarged
       diagram remains large without extending the document horizontally. */
    width:min(calc(100% + var(--gutter) + var(--gutter)),470px);
    min-width:0;
    margin-left:calc(var(--gutter) * -1);
    margin-right:calc(var(--gutter) * -1);
    transform:none;
  }
  .orbit__label{
    font-size:clamp(.72rem,3.25vw,.84rem);
    letter-spacing:.035em;
  }
  .orbit__center strong{font-size:clamp(.86rem,3.8vw,1rem)}
  .svc__toggle{padding:20px 4px;grid-template-columns:2.6em minmax(0,1fr) 28px}
  .svc__panel{padding:0 4px 22px calc(2.6em + 16px)}
  .svc__name{font-size:1.08rem}
  .svc__lead{font-size:.96rem}
}


/* ===== v7.1 review fixes ===== */

/* Hero: remove the extra pinned blue scroll area after the visual.
   Backcast Light remains time-based; only the surplus scroll height is removed. */
.hero{
  --pin:0px !important;
}

/* SP: 高さのある端末だけHeroを穏やかに抑え、通常高の端末は従来どおり1画面を使う。 */
@media (max-width:767px){
  .hero{height:var(--sp-stage-h,min(100svh,780px));min-height:min(560px,100svh)}
  .hero__stage{height:var(--sp-stage-h,min(100svh,780px));min-height:min(560px,100svh)}
  .hero__inner{bottom:calc(var(--slope) + clamp(48px,8svh,110px))}
}

/* Rough-review notes: unresolved PHOTO / TEXT / CHECK must stay visible and yellow.
   Hero has no draft note in the markup, so it remains clean. */
.draft-note,
html:not([data-draft]) .draft-note{
  display:block !important;
  border-color:#D9D900 !important;
  background:#FFFF00 !important;
  color:#202000 !important;
  box-shadow:0 4px 16px rgba(89,70,0,.08);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.draft-note strong,
.draft-note--dark strong{
  color:#3A3A00 !important;
}

/* Client request: the Future diagram labels visibly grow on hover. */
.orbit__node{
  cursor:pointer;
}
.orbit__label{
  transform:translateX(-50%) scale(1);
  transform-origin:center top;
  transition:color .3s var(--ease),transform .3s var(--ease),text-shadow .3s var(--ease);
}
.orbit__node.is-active .orbit__label{
  color:var(--brass-light);
  transform:translateX(-50%) scale(1.18);
  text-shadow:0 0 18px rgba(232,205,140,.22);
}
@media (hover:hover) and (pointer:fine){
  .orbit__node:hover .orbit__label{
    color:var(--brass-light);
    transform:translateX(-50%) scale(1.18);
    text-shadow:0 0 18px rgba(232,205,140,.22);
  }
  .orbit.is-hovering .orbit__ray{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
  .orbit.is-hovering .orbit__ray.is-active{
    stroke-width:1.6;
    filter:drop-shadow(0 0 2px rgba(232,205,140,.9)) drop-shadow(0 0 6px rgba(232,205,140,.42));
    animation:orbit-ray-draw .72s var(--ease-io) both;
  }
  .orbit.is-hovering .orbit__node.is-active .orbit__dot{
    background:var(--ink);
    transform:scale(1);
    animation:orbit-node-arrive .72s var(--ease-io) both;
  }
}
.orbit.is-sequencing .orbit__ray{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
.orbit.is-sequencing .orbit__ray.is-active{stroke-width:1.6;filter:drop-shadow(0 0 2px rgba(232,205,140,.9)) drop-shadow(0 0 6px rgba(232,205,140,.42));animation:orbit-ray-draw .72s var(--ease-io) both}
.orbit.is-sequencing .orbit__node.is-active .orbit__dot{background:var(--ink);transform:scale(1);animation:orbit-node-arrive .72s var(--ease-io) both}
@keyframes orbit-ray-draw{0%{stroke-dashoffset:1;opacity:0}12%{opacity:.9}100%{stroke-dashoffset:0;opacity:1}}
@keyframes orbit-node-arrive{0%,72%{background:var(--ink);transform:scale(1);box-shadow:none}84%{background:#fff0bd;transform:scale(1.72);box-shadow:0 0 0 6px rgba(232,205,140,.19),0 0 28px rgba(232,205,140,.72)}100%{background:var(--brass-light);transform:scale(1.55);box-shadow:0 0 0 5px rgba(232,205,140,.14),0 0 21px rgba(232,205,140,.56)}}