/* ============================================================
P13 実装。カンプ 09-design/comps から tools/build-theme.py が生成（手で編集しない）。
・寸法・文字サイズ・動き: ref04 yamatoen（1440 基準の vw 比例。references/yamatoen-typography.md / -animations.md）
・配色・書体・写真の扱い: ref05 本サイト（design-tokens.json color / typography）
・写真＝有機マスクのプレースホルダ（区分S）。イラスト＝生成画像のプレースホルダ（区分M、担当者指示）
============================================================ */
:root{
--c-white:#FFFFFF; --c-bg:#FFFFFF; --c-cream:#F5F0E2; --c-gray:#F5F5F5; --c-sand:#AEA082; --c-sand-deep:#8B7B5B;
--c-ink:#4D4D4D; --c-sub:#666666; --c-line:#D7D3D0; --c-on-sand:#FFFFFF;
--f-body:'Noto Sans JP','游ゴシック体','Yu Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
--f-head:'Shippori Mincho B1','Noto Serif JP','Hiragino Mincho ProN',serif;
--f-en:'Lato','Helvetica Neue',Arial,sans-serif;
--u:calc(100vw / 1440); /* ref04: --su */
--fs-hero:clamp(40px,calc(53*var(--u)),60px); --fs-card-kw:max(30px,calc(40*var(--u))); --fs-h2:max(20px,calc(24*var(--u) - 2px));
--fs-message:max(16px,calc(24*var(--u) - 4px)); --fs-lead:max(14px,calc(20*var(--u) - 4px)); --fs-body:max(12px,calc(16*var(--u) - 4px));
--fs-nav:max(16px,calc(16*var(--u))); --fs-small:max(14px,calc(14*var(--u))); --fs-tel:max(36px,calc(53*var(--u)));
--sec:calc(200*var(--u)); --blk:calc(80*var(--u)); --cont:calc(1200*var(--u)); --pad:calc(40*var(--u));
--r-card:32px; --r-btn:8px; --header-h:calc(97*var(--u));
--ease-out:cubic-bezier(.47,.16,.24,1); --ease-soft:cubic-bezier(.18,.06,.23,1); --ease-snap:cubic-bezier(.43,.05,.17,1); --ease-fade:cubic-bezier(.26,.06,0,1);
}
@media (max-width:767px){ :root{ --u:calc(100vw / 390); --fs-hero:max(30px,calc(36*var(--u))); --fs-card-kw:max(26px,calc(28*var(--u))); --fs-h2:max(20px,calc(22*var(--u))); --fs-message:max(17px,calc(18*var(--u))); --fs-lead:max(17px,calc(17*var(--u))); --fs-tel:max(32px,calc(40*var(--u))); --sec:calc(100*var(--u)); --pad:calc(24*var(--u)); --header-h:calc(74*var(--u)); } }
*{box-sizing:border-box} html{scroll-behavior:auto}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-size:var(--fs-body);line-height:2;letter-spacing:.08em;font-feature-settings:"palt";overflow-x:hidden}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:600} p{margin:0}
.container{width:min(var(--cont),calc(100% - var(--pad)*2));margin-inline:auto}
.en{font-family:var(--f-en);font-weight:700;letter-spacing:.15em;font-size:var(--fs-small);color:var(--c-sand-deep)}
.h2{font-family:var(--f-head);font-size:var(--fs-h2);line-height:1.6;letter-spacing:.12em}
.lead{font-size:var(--fs-lead);line-height:1.9}
.btn{display:inline-flex;align-items:center;gap:1em;background:var(--c-sand-deep);color:var(--c-on-sand);font-size:calc(var(--fs-nav) - 4px);font-weight:500;padding:1em 1.5em;border-radius:var(--r-btn);transition:background .3s var(--ease-fade)}
.btn:hover{background:#6F6146} .btn .arw{width:1.6em;height:1.6em;border-radius:50%;background:var(--c-white);color:var(--c-sand-deep);display:inline-flex;align-items:center;justify-content:center;line-height:1;font-family:var(--f-en);font-size:1em;padding-bottom:.08em;box-sizing:border-box;transition:transform .3s var(--ease-out)} .btn:hover .arw{transform:translateX(4px)}
.btn-line{display:inline-flex;align-items:center;gap:1.2em;border:1px solid var(--c-sub);padding:.8em 1.6em;font-family:var(--f-en);font-weight:700;letter-spacing:.2em;font-size:var(--fs-small);color:var(--c-ink);transition:background .3s} .btn-line:hover{background:var(--c-gray)}
.arrow-btn{width:2.2em;height:2.2em;border-radius:50%;background:var(--c-sand-deep);color:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-family:var(--f-en);font-size:var(--fs-small);padding-bottom:.08em;box-sizing:border-box}
/* ---------- 管理帯（カンプ専用。実装には出ない） ---------- */
/* ---------- ヘッダー（ref04: hide on scroll） ---------- */
.header{position:fixed;inset:0 0 auto;height:var(--header-h);z-index:40;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--pad);transition:transform .5s var(--ease-snap),opacity .5s var(--ease-out)}
.header.is-hide{transform:translate3d(0,-5vw,0);opacity:0;pointer-events:none}
.logo{display:flex;align-items:center;gap:.6em;font-family:var(--f-en);font-style:italic;letter-spacing:.2em;font-size:var(--fs-nav);color:var(--c-ink)}
.logo .mark{width:2.2em;height:2.2em;border-radius:50% 50% 50% 0;background:var(--c-sand)}
.gnav{display:flex;gap:2.2em;background:rgba(255,255,255,.75);padding:.7em 1.6em;border-radius:var(--r-btn);font-size:calc(var(--fs-nav) - 4px);font-weight:500} .gnav a{position:relative;transition:color .3s} .gnav a:hover{color:var(--c-sand-deep)}
.hbtn{display:flex;gap:.6em;align-items:center}
.hbtn .menu{width:calc(58*var(--u));min-width:52px;aspect-ratio:1;background:#fff;border:0;border-radius:var(--r-btn);display:grid;grid-template-columns:1fr;grid-auto-flow:row;justify-items:center;align-content:center;gap:4px;font-size:var(--fs-small);font-family:var(--f-en);font-weight:700;color:var(--c-sand-deep);box-shadow:0 8px 32px rgba(77,77,77,.06);cursor:pointer;padding:0} .hbtn .menu .bars{display:grid;gap:3px} .hbtn .menu .bars i{display:block;width:16px;height:3px;border-radius:2px;background:var(--c-sand-deep)} .hbtn .menu .lbl{font-size:var(--fs-small);line-height:1}
@media (max-width:1023px){.gnav{display:none}}
/* ---------- ヒーロー（ref04 home-kv） ---------- */
.kv{position:relative;min-height:max(760px,calc(809*var(--u)));padding-top:var(--header-h);overflow:hidden}
.kv-title{position:absolute;right:calc(80*var(--u));top:calc(130*var(--u) - 25px);border-radius:16px;height:max(520px,min(calc(620*var(--u)),calc(100vh - 180px)));background:rgba(255,255,255,.65);display:flex;justify-content:flex-end;gap:calc(24*var(--u));padding:calc(36*var(--u));z-index:2}
.kv-title h2{writing-mode:vertical-rl;font-family:var(--f-head);font-size:var(--fs-hero);line-height:1.5;letter-spacing:.12em;font-weight:500}
.kv-title p{writing-mode:vertical-rl;font-size:var(--fs-body);line-height:2}
.kv-tags{writing-mode:vertical-rl;display:flex;gap:.6em;font-size:var(--fs-small);font-weight:500}
.kv-tags span{border-left:1px solid var(--c-line);padding:.2em .3em} .kv-tags b{color:var(--c-sand-deep);font-family:var(--f-en)}
.kv-img{position:absolute;width:var(--w);left:var(--x);top:var(--y);aspect-ratio:var(--ar);--mask:var(--m1)}
.kv-img__inner{width:100%;height:100%;mask:var(--mask) center/100% 100% no-repeat;-webkit-mask:var(--mask) center/100% 100% no-repeat;transform-origin:center;transition:transform 2s var(--ease-out)}
.kv-img__inner .ph{width:100%;height:100%;transform-origin:center;transition:transform 2s var(--ease-out)}
.kv-img.is-scale-down .kv-img__inner{transform:scale(.9)} .kv-img.is-scale-down .ph{transform:scale(1.1)}
.kv-img.is-rotate-l .kv-img__inner{transform:rotate(-10deg)} .kv-img.is-rotate-l .ph{transform:rotate(10deg) scale(1.1)}
.kv-img.is-rotate-r .kv-img__inner{transform:rotate(10deg)} .kv-img.is-rotate-r .ph{transform:rotate(-10deg) scale(1.1)}
.ph{background:linear-gradient(135deg,#d9cfbf,#b8a98f 60%,#e9e2d3);position:relative} .ill{position:absolute;width:var(--w);left:var(--x);top:var(--y);aspect-ratio:1;border-radius:46% 54% 42% 58%/55% 40% 60% 45%;background:radial-gradient(circle at 40% 40%,rgba(174,160,130,.35),rgba(174,160,130,.08) 70%);display:grid;place-items:center;font:11px/1.3 monospace;color:var(--c-sand-deep);text-align:center;letter-spacing:0}
.kv-scroll{overflow:hidden;position:absolute;left:var(--pad);bottom:calc(120*var(--u));border:1px solid var(--c-ink);border-radius:999px;padding:.2em 1em;font-family:var(--f-en);font-size:var(--fs-small);opacity:0;transition:opacity .5s var(--ease-fade)} body.intro-completed .kv-scroll.is-in{opacity:1} .kv-scroll.scrolled{opacity:0}
.kv-photos{position:static}
@media (max-width:767px){
.kv{min-height:0;padding-bottom:calc(20*var(--u))}
.kv-title{position:relative;right:auto;top:auto;height:auto;margin:calc(20*var(--u)) var(--pad) 0;padding:calc(24*var(--u));flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:calc(20*var(--u))}
.kv-title h2{height:calc(9*1.12*var(--fs-hero))}
.kv-title p,.kv-tags{writing-mode:horizontal-tb} .kv-title p{flex:1} .kv-tags{position:absolute;left:calc(24*var(--u));bottom:calc(24*var(--u));flex-wrap:wrap;gap:.4em} .kv-tags span{border-left:0;border-bottom:1px solid var(--c-line)}
.kv-title p{padding-bottom:3.4em}
.kv-photos{position:relative;height:calc(420*var(--u));margin-top:calc(24*var(--u))}
.kv-img:nth-of-type(1){--w:calc(250*var(--u));--x:calc(-20*var(--u));--y:calc(40*var(--u))}
.kv-img:nth-of-type(2){--w:calc(190*var(--u));--x:calc(210*var(--u));--y:0}
.kv-img:nth-of-type(3){--w:calc(150*var(--u));--x:calc(120*var(--u));--y:calc(270*var(--u))}
.kv-img:nth-of-type(4){--w:calc(110*var(--u));--x:calc(275*var(--u));--y:calc(250*var(--u))}
.kv-photos .ill:nth-of-type(5){--w:calc(80*var(--u));--x:calc(300*var(--u));--y:calc(200*var(--u))}
.kv-photos .ill:nth-of-type(6){--w:calc(70*var(--u));--x:calc(20*var(--u));--y:calc(320*var(--u))}
.kv-photos .ill:nth-of-type(7){display:none}
.kv-scroll{display:none} .header .pc{display:none} .header .btn{white-space:nowrap;padding:1em 1.1em}
.svc>.ill{display:none}
}
.svc{overflow:visible}
/* 波の帯（ref04: SVG 曲線で食い込む） */
.wave-top{position:absolute;left:0;right:0;bottom:-1px;height:calc(220*var(--u));background:var(--c-cream);clip-path:ellipse(70% 100% at 50% 100%)}
/* ---------- 色の帯のメッセージ（ref04 home-message） ---------- */
.band{background:var(--c-cream);position:relative}
.band-inner{padding:calc(120*var(--u)) 0 calc(160*var(--u))}
.msg{font-size:var(--fs-message);line-height:2.2;letter-spacing:.12em;max-width:calc(880*var(--u));margin-inline:auto;text-align:center} .msg .line{display:block}
.msg .ch{color:#B9AE98} .msg .ch.on{color:var(--c-ink)}
.msg-2{margin-top:calc(80*var(--u))}
.close3{margin-top:calc(120*var(--u))} .close3 .big{font-family:var(--f-head);font-size:var(--fs-h2)}
.oldphoto{position:absolute;width:calc(230*var(--u));margin:0;background:#fff;padding:calc(12*var(--u)) calc(12*var(--u)) calc(34*var(--u));box-shadow:0 10px 28px rgba(77,77,77,.12);rotate:var(--rot);z-index:1} .oldphoto .ph{aspect-ratio:1;filter:sepia(.18) contrast(.95) saturate(.9)} .oldphoto .ph::after{display:none} .op-1{left:calc(-40*var(--u));top:calc(40*var(--u))} .op-2{right:calc(-30*var(--u));top:calc(300*var(--u))} .op-3{left:calc(60*var(--u));top:calc(620*var(--u))} .band-inner{min-height:calc(900*var(--u))}
.wave-bottom{height:calc(160*var(--u));background:var(--c-cream);clip-path:ellipse(75% 100% at 50% 0)}
/* split（ref04 .base-split） */
.split{overflow:hidden} .split .w{display:inline-block;transform:translate3d(0,120%,0);opacity:0;transition:transform 1s var(--ease-out),opacity 1.2s var(--ease-out);transition-delay:calc(var(--i)*25ms)}
.split.is-in .w{transform:none;opacity:1}
[data-scroll]{opacity:0;transition:opacity .4s .2s var(--ease-out),transform .8s var(--ease-soft)}
[data-scroll="fade-in-up"]{transform:translate3d(0,40px,0)} [data-scroll="fade"]{transform:none;transition:opacity 1s var(--ease-fade)}
[data-scroll="fade-up-rotate-l"]{transform:translate3d(0,40px,0) rotate(-3deg);transition:opacity .5s .2s var(--ease-out),transform .7s .1s var(--ease-snap)}
[data-scroll].is-in{opacity:1;transform:none} [data-delay="1"]{transition-delay:.1s} [data-delay="2"]{transition-delay:.2s}
/* ---------- 3枚カード（ref04 home-important） ---------- */
.imp{--card-h:min(calc(600*var(--u)),calc(100vh - var(--header-h) - 120px));--sticky-top:calc(var(--header-h) + (100vh - var(--card-h))/2);display:grid;grid-template-columns:1fr calc(684*var(--u));gap:calc(80*var(--u));margin-top:var(--sec)}
.imp-left{position:sticky;top:calc(var(--sticky-top) - 85px);height:var(--card-h);display:flex;flex-direction:column;justify-content:center;gap:1.6em;margin-bottom:calc(100vh - var(--card-h))} .imp-left .h2{margin-top:-1.4em}
.pills{display:flex;gap:.4em} .pill{border:1px solid #fff;background:var(--c-gray);border-radius:999px;padding:.35em 1em;font-family:var(--f-en);font-weight:700;font-size:var(--fs-small);color:var(--c-ink);overflow:hidden} .pill .t{display:inline-block;transform:translate3d(0,130%,0);opacity:0;transition:transform .6s var(--ease-out),opacity .5s .2s var(--ease-out);margin-left:.5em;white-space:nowrap} .pill[aria-current="true"]{background:#fff} .pill[aria-current="true"] .t{transform:none;opacity:1}
.card-body{position:sticky;top:calc(var(--sticky-top) - 85px);height:100vh}
.card{height:var(--card-h);background:#fff;border:1px solid #ECE9E7;border-radius:var(--r-card);padding:max(8px,calc(36*var(--u) - 20px)) calc(40*var(--u)) calc(36*var(--u) + 50px);display:flex;flex-direction:column;box-shadow:0 24px 56px rgba(77,77,77,.16),0 4px 12px rgba(77,77,77,.06)}
.card-head{display:flex;justify-content:space-between} .card-ill{flex:1;display:grid;place-items:center} .card-ill .ill{position:static;width:calc(300*var(--u))}
.card-foot{display:grid;grid-template-columns:auto 1fr;gap:calc(40*var(--u));align-items:center}
.kw{font-family:var(--f-head);font-size:var(--fs-card-kw);letter-spacing:.28em;line-height:1.6;text-align:center;font-weight:600} .kw::after{content:"";display:block;width:1.2em;height:.25em;margin:.2em auto 0;background:var(--c-sand);border-radius:0 0 .3em .3em}
.pts{list-style:none;margin:0;padding:0 0 0 calc(40*var(--u));border-left:1px dotted var(--c-line);display:grid;gap:.2em} .pts li{display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:start} .pts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-line);margin-top:.9em}
@media (max-width:767px){.imp{grid-template-columns:1fr;gap:var(--blk)} .imp-left{position:static;height:auto;margin:0} .card-body{position:static;height:auto} .card-body+.card-body{margin-top:calc(40*var(--u))} .card{height:auto} .card-foot{grid-template-columns:1fr;gap:1em} .pts{border-left:0;border-top:1px dotted var(--c-line);padding:1em 0 0} .card-ill .ill{width:60%}}
/* ---------- サービスの帯（ref04 大カード2＋小カード2） ---------- */
.svc{position:relative;margin-top:var(--sec);padding:50px 0 calc(60*var(--u));background:var(--c-cream)}
.svc::before{content:"";position:absolute;left:0;right:0;top:calc(-100*var(--u));height:calc(100*var(--u));background:var(--c-cream);clip-path:ellipse(70% 100% at 50% 100%)}
.svc-big{display:grid;grid-template-columns:1fr 1fr;gap:calc(36*var(--u))}
.bigcard{background:#fff;border-radius:var(--r-card);padding:calc(48*var(--u)) calc(48*var(--u)) calc(32*var(--u));text-align:center;position:relative;transition:transform .4s var(--ease-out)} .bigcard:hover{transform:translateY(-4px)}
.bigcard .ph{width:min(calc(300*var(--u)),100%);aspect-ratio:1;margin:1.5em auto 0;mask:var(--m2) center/100% 100% no-repeat;-webkit-mask:var(--m2) center/100% 100% no-repeat}
.bigcard .arrow-btn{position:absolute;right:calc(28*var(--u));bottom:calc(28*var(--u))}
.svc-small{display:grid;grid-template-columns:1fr 1fr;gap:calc(36*var(--u));margin-top:calc(36*var(--u))}
.smallcard{background:#fff;border-radius:calc(var(--r-card)/2);padding:max(4px,calc(28*var(--u) - 25px)) calc(36*var(--u));min-height:0;display:flex;justify-content:space-between;align-items:center} .smallcard small{display:block;font-size:var(--fs-body);color:var(--c-sub)}
@media (max-width:767px){.svc-big,.svc-small{grid-template-columns:1fr}}
/* ---------- お問い合わせ（ref04 home-contact） ---------- */
.contact{margin-top:var(--sec);display:grid;grid-template-columns:1fr 1.3fr;gap:calc(120*var(--u));align-items:stretch} .contact-cards{display:grid;grid-template-rows:1fr 1fr;gap:calc(16*var(--u))}
.tel{font-family:var(--f-en);font-weight:700;font-size:var(--fs-tel);line-height:1;color:var(--c-sand-deep);letter-spacing:.04em;margin-top:.2em}
.hours{font-weight:500;color:var(--c-sand-deep)} .rule{border-top:1px solid var(--c-line);margin:1.6em 0 1em}
.ccard{position:relative;overflow:hidden;background:#fff;border-radius:var(--r-card);padding:calc(20*var(--u)) calc(40*var(--u));display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 32px rgba(77,77,77,.06);transition:transform .4s var(--ease-out),color .5s var(--ease-fade)} .ccard::before{content:"";position:absolute;inset:0;background:var(--c-sand-deep);clip-path:polygon(0 0,0 0,0 0);transition:clip-path .7s var(--ease-out);z-index:0} .ccard > *{position:relative;z-index:1} .ccard .en,.ccard .arrow-btn,.ccard .arrow-btn{transition:color .5s var(--ease-fade),background-color .5s var(--ease-fade)} .ccard:hover{transform:translateY(-4px);color:#fff} .ccard:hover::before{clip-path:polygon(0 0,250% 0,0 250%)} .ccard:hover .en{color:#fff} .ccard:hover .arrow-btn{background:#fff;color:var(--c-sand-deep)} .ccard:hover .ill img{filter:brightness(0) invert(1);opacity:.95;mix-blend-mode:normal} .ccard .ill img{transition:filter .5s var(--ease-fade),opacity .5s var(--ease-fade)} .ccard .ill{position:static;width:calc(144*var(--u));margin:-10px 0}
@media (max-width:767px){.contact{grid-template-columns:1fr;gap:var(--blk)}}
/* ---------- 声（ref04 home-news 3カード） ---------- */
.voice{margin-top:var(--sec)} .voice-head{display:flex;justify-content:space-between;align-items:flex-end}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(36*var(--u));margin-top:calc(60*var(--u))}
.vcard .ph{aspect-ratio:4/3;border-radius:16px;overflow:hidden} .vcard .tag{display:inline-block;background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:.1em .8em;font-size:var(--fs-body);margin-top:.6em}
@media (max-width:767px){.vgrid{grid-template-columns:1fr}}
/* ---------- スタッフ（ref04 home-recruit 散らばる浮遊カード） ---------- */
.staff{margin-top:calc(var(--sec)*.55 + 50px);display:grid;grid-template-columns:1fr 1.4fr;gap:calc(80*var(--u));align-items:start;position:relative} .staff > div:first-child{padding-top:calc(40*var(--u) + 100px)}
.scatter{position:relative;height:calc(520*var(--u))}
.fcard{position:absolute;width:calc(150*var(--u));aspect-ratio:190/280;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(77,77,77,.06);transform:translate3d(0,0,0) rotate(0);transition:transform 1s var(--ease-out)}
.scatter.is-scrolled .fcard{animation:card-floating 10s ease-in-out infinite alternate}
@keyframes card-floating{0%{translate:0 0;rotate:0deg}50%{translate:0 -1.5vw;rotate:-2deg}100%{translate:0 0;rotate:2deg}}
@media (max-width:767px){.staff{grid-template-columns:1fr} .scatter{height:calc(380*var(--u))} .fcard{width:calc(140*var(--u))}}
/* ---------- 関連サイト・フッター（ref04 sticky footer） ---------- */
.links{margin-top:calc(var(--sec)*.5);display:grid;grid-template-columns:repeat(3,1fr);gap:calc(36*var(--u))} .lcard{background:#fff;border-radius:16px;padding:calc(24*var(--u));display:flex;gap:1em;align-items:center;justify-content:space-between;border:1px solid #ECE9E7}
@media (max-width:767px){.links{grid-template-columns:1fr}}
.main-end{height:calc(120*var(--u))}
.footer{position:sticky;top:100%;background:var(--c-sand);color:#fff;margin-top:calc(-100*var(--u))}
.footer-top{background:var(--c-bg);height:calc(160*var(--u));clip-path:ellipse(75% 100% at 50% 0)}
.footer-body{padding:calc(60*var(--u)) 0 calc(40*var(--u))}
.area{background:rgba(255,255,255,.14);border-radius:16px;padding:1.2em 1.6em;display:flex;gap:2em;align-items:center;flex-wrap:wrap} .area b{font-weight:600}
.fgrid{display:grid;grid-template-columns:1.7fr .9fr .9fr 1.1fr;gap:calc(40*var(--u));margin-top:calc(60*var(--u))} .fgrid h4{margin:0 0 .6em;font-size:var(--fs-nav)} .fgrid ul{list-style:none;margin:0;padding:0;font-size:var(--fs-body)} .fgrid li{overflow:hidden} .fgrid li span{display:block;transform:translate3d(0,120%,0);transition:transform .7s var(--ease-out);transition-delay:calc(var(--i)*40ms)} .footer.is-in .fgrid li span{transform:none}
.fbtn{display:flex;justify-content:space-between;align-items:center;background:var(--c-sand-deep);color:#fff;border-radius:var(--r-btn);padding:1em 1.4em;font-weight:500;font-size:calc(var(--fs-nav) - 4px);margin-top:.6em;line-height:1.4} .fbtn span:last-child{font-family:var(--f-en);line-height:1}
.copy{margin-top:calc(40*var(--u));font-size:var(--fs-body);text-align:right;opacity:.85}
@media (max-width:767px){.fgrid{grid-template-columns:1fr 1fr} .fgrid li span{white-space:normal!important}}
@media (prefers-reduced-motion:reduce){[data-scroll],.split .w,.pill .t,.fgrid li span{transition:none;opacity:1;transform:none} .scatter .fcard{animation:none}}
/* ===== yamatoen 忠実再現の追加（2026-09-10。references/yamatoen-animations.md 改訂版） ===== */
/* 1 イントロ（.site-transition） */
.transition{position:fixed;inset:0;z-index:100;background:var(--c-cream);display:grid;place-items:center;pointer-events:none}
.transition-inner{display:grid;justify-items:center;gap:calc(18*var(--u))}
.transition-mark{width:calc(96*var(--u));min-width:64px;transform:translate3d(0,5.6vw,0);scale:.92;opacity:0}
.transition-label{width:calc(220*var(--u));min-width:150px;transform:translate3d(0,4.666vw,0);scale:.92;opacity:0}
.transition.is-start .transition-mark{transform:translate3d(0,-2.8vw,0);scale:1.1;opacity:1;transition:transform 2.2s var(--ease-fade),scale 2.7s var(--ease-soft),opacity .4s var(--ease-soft)}
.transition.is-start .transition-label{transform:translate3d(0,-2.333vw,0);scale:1.1;opacity:1;transition:transform 2.2s var(--ease-fade),scale 2.7s var(--ease-soft),opacity .4s var(--ease-fade);transition-delay:.25s}
.transition.is-start .transition-inner{transform:translateZ(0) scale(.8);opacity:0;transition:transform 1s 1.9s var(--ease-out),opacity .2s 2.2s ease}
.transition.is-out{opacity:0;transition:opacity .4s var(--ease-fade)} .transition.is-done{display:none}
body:not(.intro-completed) .header{opacity:0} body.intro-completed .header{transition:opacity .3s var(--ease-fade),transform .5s var(--ease-fade)}
/* 2 ヒーロー: 横に流れる無限ループ（Se）＋視差 */
.kv{overflow:hidden}
.kv-loop{position:absolute;left:0;bottom:0;width:100%;display:flex;flex-direction:row;align-items:flex-start;overflow:hidden;transform-origin:center top}
.kv-canvas{position:relative;flex-shrink:0;width:calc(5400*var(--u));height:calc(809*var(--u));will-change:transform}
.kv-canvas .kv-img,.kv-canvas .ill{position:absolute}
.kv-img__body,.ill__body{width:100%;height:100%}
.kv-img{transform:scale(0);opacity:0}
.kv-img.is-rotate-l .kv-img__inner{transform:rotate(-10deg)!important;transition:transform 2s var(--ease-snap)} .kv-img.is-rotate-l .ph{transform:rotate(10deg) scale(1.1);transition:transform 2s var(--ease-snap)}
.kv-img.is-rotate-r .kv-img__inner{transform:rotate(10deg)!important;transition:transform 2s var(--ease-snap)} .kv-img.is-rotate-r .ph{transform:rotate(-10deg) scale(1.1);transition:transform 2s var(--ease-snap)}
.kv-img.is-scale-down .kv-img__inner{transform:scale(.9)!important} .kv-img.is-scale-down .ph{transform:scale(1.1)}
.kv-title-wrap{position:absolute;right:0;top:0;width:100%;height:100%;pointer-events:none} .kv-title{pointer-events:auto;opacity:0}
.kv-title .split .w{transform:translate3d(0,120%,0);opacity:0}
.kv-title.is-in .split{overflow:hidden} .kv-title.is-in .split .w{transform:none;opacity:1;transition:opacity 1.2s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i)*.01s);transition-duration:calc(var(--i)*.02s + .8s)}
.kv-scroll .ch{display:inline-block}
/* 3 帯のメッセージ: 行ごとに左から塗る（baseMessageLine／Yi） */
.msg .line{display:block;background-image:linear-gradient(90deg,var(--c-ink) 0 50%,#C4BDB0 50% 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transform:translate3d(0,120%,0);opacity:0}
.msg.is-in .line{transform:none;opacity:1;transition:opacity 1.2s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i)*.01s);transition-duration:calc(var(--i)*.02s + .8s)}
.msg{overflow:hidden} .msg .ch{color:inherit}
.parapara{position:relative} .parapara img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:.9;transition:opacity .7s var(--ease-fade);z-index:1} .parapara img:not(.on){opacity:0}
/* 4 出現: yamatoen の値（3vw／rotate -10deg[s]） */
[data-scroll="fade-in-up"]{transform:translate3d(0,3vw,0)}
[data-scroll="fade-up-rotate-l"]{transform:translate3d(0,3vw,0) rotate(-10deg)} [data-scroll="fade-up-rotate-r"]{transform:translate3d(0,3vw,0) rotate(10deg);transition:opacity .5s var(--ease-out),transform .7s var(--ease-snap)}
[data-scroll="fade-up-rotate-r"].is-in{transform:none;opacity:1;transition:opacity .5s .2s var(--ease-out),transform .7s .1s var(--ease-snap)}
/* 5 3枚カード: 画像 scale 0→1、ピル */
.card-ill{min-height:0} .card-ill .parapara{width:min(calc(300*var(--u)),32vh);aspect-ratio:1;transform:scale(0);opacity:0;margin-top:-50px} .card-ill .parapara::before{content:"";position:absolute;inset:2%;background:var(--c-cream);z-index:0;-webkit-mask:var(--m1) center/100% 100% no-repeat;mask:var(--m1) center/100% 100% no-repeat} .card-body:nth-child(2) .parapara::before{-webkit-mask-image:var(--m2);mask-image:var(--m2)} .card-body:nth-child(3) .parapara::before{-webkit-mask-image:var(--m3);mask-image:var(--m3)}
/* 7 スタッフ: 3秒ごとに1枚が弾んで散る（homeRecruit）＋背景の有機形が流れる */
.scatter{overflow:visible}
.fcard{transition:none;transform:translate3d(0,0,0) rotate(var(--base,0deg));transform-origin:50% 100%} .fcard.is-active{transform:translate3d(var(--x),var(--y),0) rotate(calc(var(--base,0deg) + var(--rotate,0deg)))}
.scatter.is-scrolled .fcard{animation:none}
.staff-bg{position:absolute;inset:-4% 0 auto;height:84%;z-index:-1;display:flex;justify-content:center;align-items:flex-start;pointer-events:none} .blob-one{width:80%;height:100%;border-radius:46% 54% 42% 58%/55% 40% 60% 45%;background:var(--c-cream);opacity:.85} .staff-bg .blob{flex-shrink:0;width:55%;height:78%;margin-top:8%;border-radius:46% 54% 42% 58%/55% 40% 60% 45%;background:var(--c-cream);opacity:.8}
/* メニュー展開（yamatoen .site-menu: 白 inset 12px 角丸 32、Close は塗りの角丸、左に電話とボタン、右に 3 列の項目。ラベルは --i×.04s で下から） */
.menu-layer{position:fixed;inset:12px;z-index:90;background:#fff;border-radius:32px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-fade);overflow:auto;padding:calc(120*var(--u)) calc(120*var(--u)) calc(80*var(--u))}
body.menu-opened .menu-layer{opacity:1;pointer-events:auto}
.menu-close{position:absolute;top:calc(20*var(--u));right:calc(20*var(--u));width:calc(58*var(--u));min-width:52px;aspect-ratio:1;background:var(--c-sand-deep);color:#fff;border:0;border-radius:var(--r-btn);display:grid;place-items:center;align-content:center;gap:4px;cursor:pointer;font-family:var(--f-en);font-weight:700;padding:0} .menu-close .x{position:relative;width:18px;height:18px} .menu-close .x::before,.menu-close .x::after{content:"";position:absolute;left:0;top:7px;width:18px;height:3px;background:#fff;border-radius:2px;transform:rotate(45deg)} .menu-close .x::after{transform:rotate(-45deg)} .menu-close .lbl{font-size:var(--fs-small);line-height:1}
.menu-grid{display:grid;grid-template-columns:calc(240*var(--u)) 1fr;gap:calc(120*var(--u))} .menu-logo{width:calc(176*var(--u));min-width:140px;display:block} .menu-rule{border-top:1px solid var(--c-line);margin:calc(40*var(--u)) 0 calc(20*var(--u))} .menu-tel-label{font-weight:600} .menu-tel{font-size:clamp(22px,2.1vw,32px);white-space:nowrap;display:block;margin:.2em 0 0} .menu-left .hours{margin-bottom:calc(30*var(--u))} .menu-left .fbtn{background:var(--c-sand-deep);margin-top:.6em}
.menu-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(40*var(--u))} .menu-item{display:block;overflow:hidden;font-weight:600;font-size:var(--fs-body);margin-top:1.2em} .menu-item.small{font-size:var(--fs-small);color:var(--c-sub);font-weight:400} .menu-item span,.menu-children li span{display:block;transform:translate3d(0,120%,0);transition:transform .7s var(--ease-out);transition-delay:calc(var(--i)*.04s)} .menu-children{list-style:none;margin:.6em 0 0 .6em;padding:0 0 0 1.2em;border-left:1px dashed var(--c-line);display:grid;gap:.3em} .menu-children li{overflow:hidden} .menu-children li span{transform:translate3d(0,1.6em,0);opacity:0;transition:transform .8s var(--ease-out),opacity 1s var(--ease-snap);transition-delay:calc(var(--i)*.02s)}
body.menu-opened .menu-item span,body.menu-opened .menu-children li span{transform:none;opacity:1}
.menu-card{margin-top:2em;border:1px dashed var(--c-sand);border-radius:16px;padding:1.2em 1.4em;opacity:0;transform:scale(.9);transition:opacity 1s var(--ease-snap),transform .8s var(--ease-out);transition-delay:calc(var(--i)*.04s)} body.menu-opened .menu-card{opacity:1;transform:none} .menu-card .small{font-size:var(--fs-small);color:var(--c-sub)}
@media (max-width:767px){.menu-layer{inset:0;border-radius:0;padding:calc(90*var(--u)) calc(24*var(--u)) calc(60*var(--u))} .menu-grid,.menu-cols{grid-template-columns:1fr;gap:calc(30*var(--u))}}
@media (max-width:767px){.oldphoto{position:relative;left:auto;right:auto;top:auto;width:60%;margin:calc(30*var(--u)) auto} .band-inner{min-height:0} .kv-canvas-ill .ill:nth-of-type(n+7){display:none} .kv{display:flex;flex-direction:column;padding-top:var(--header-h)} .kv-illust-loop{height:calc(440*var(--u))} .kv-loop{order:2} .kv-title-wrap{order:1} .kv-scroll,.wave-top{order:3} .card{padding:calc(36*var(--u)) calc(40*var(--u))} .fcard{width:calc(96*var(--u))!important} .scatter{height:calc(420*var(--u));overflow:hidden;padding-top:calc(30*var(--u))} .sc-ill{width:calc(72*var(--u))} .card-ill .parapara{width:60%;margin-top:0} .kv-loop{position:relative;height:calc(440*var(--u));margin-top:calc(24*var(--u));display:block;overflow:visible} .kv-canvas{width:100%;height:100%} .kv-canvas .kv-img:nth-of-type(n+5),.kv-canvas .ill:nth-of-type(n+4){display:none} .kv-title-wrap{position:static;height:auto} .menu-layer{inset:0;border-radius:0}}
@media (max-width:767px){.kv-canvas .kv-img:nth-of-type(1){width:calc(250*var(--u))!important;left:calc(-20*var(--u))!important;top:calc(40*var(--u))!important} .kv-canvas .kv-img:nth-of-type(2){width:calc(180*var(--u))!important;left:calc(190*var(--u))!important;top:0!important} .kv-canvas .kv-img:nth-of-type(3){width:calc(150*var(--u))!important;left:calc(120*var(--u))!important;top:calc(270*var(--u))!important} .kv-canvas .kv-img:nth-of-type(4){width:calc(110*var(--u))!important;left:calc(275*var(--u))!important;top:calc(250*var(--u))!important} .kv-canvas .ill:nth-of-type(1){width:calc(80*var(--u))!important;left:calc(300*var(--u))!important;top:calc(200*var(--u))!important} .kv-canvas .ill:nth-of-type(2){width:calc(70*var(--u))!important;left:calc(20*var(--u))!important;top:calc(330*var(--u))!important} .kv-canvas .ill:nth-of-type(3){display:none}}
/* ===== homeSymbol: 固定レイヤーの山（z 10）。本文は z 20 で上に載る ===== */
.symbol-fixed{position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden}
.symbol-fixed .symbol-inner{position:absolute;transform-origin:top left;will-change:transform}
.symbol-group{position:relative;width:100%;transform-origin:50% 100%} .hill-field{position:relative;transform:translateY(calc(200px + var(--slide,0px)))} .lav-layer{position:absolute;inset:0;transform:translateY(var(--slide,0px));pointer-events:none} .symbol-group .hill{display:block;width:100%;height:auto;overflow:visible} .lav-field{position:absolute;left:0;top:-19%;width:100%;height:auto} .lav-front{position:absolute;left:15%;top:-29%;width:13.5%;height:auto;transform-origin:50% 100%;animation:lav-sway 3.8s ease-in-out infinite alternate;pointer-events:none} .lav-front-2{left:22%;top:-19%;width:9.2%;transform:scaleX(-1);animation-duration:4.6s;animation-delay:-1.7s;opacity:.85} @keyframes lav-sway{0%{rotate:-2.2deg;translate:0 0}50%{rotate:.4deg;translate:.4% .1%}100%{rotate:2.2deg;translate:0 0}} @media (prefers-reduced-motion:reduce){.lav-front{animation:none}}
.symbol-fixed{transition:opacity .35s var(--ease-fade)} .symbol-fixed.is-hidden{opacity:0}
.kv{position:relative;z-index:auto;background:transparent} .band{position:relative;z-index:0;background:transparent;overflow:hidden} .band{margin-top:0} .band-inner{padding-top:calc(60*var(--u))}
.wave-top,.wave-bottom{display:none}
.kv-loop{z-index:0} .kv-title-wrap{z-index:20}
main{position:static} .imp,.contact,.voice,.staff,.links,.svc{position:relative;z-index:20} .kv-illust-loop{position:absolute;left:0;bottom:0;width:100%;z-index:20;pointer-events:none;overflow:hidden;transform-origin:center top} .kv-canvas-ill{background:none;width:calc(8000*var(--u))} .kv-scroll{z-index:20}
/* 受け渡し先: サービスの帯（yamatoen の home-gallery-bg）。帯の地は山と同じサンド */
.svc{background:var(--c-sand);margin-top:20px} .svc::before{display:none} .svc-symbol{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none}
.svc .container{position:relative;z-index:1}
.svc .bigcard,.svc .smallcard{position:relative} .svc .en{color:var(--c-sand-deep)}
.svc > .ill{display:none}
/* ナビ: スクロール 50px で非表示（x-show="!scrolled"、opacity .5s） */
.gnav{transition:opacity .5s var(--ease-fade)} body.scrolled .gnav{opacity:0;pointer-events:none}
@media (max-width:767px){.lav-front{left:12%;top:-26%;width:20%} .lav-front-2{left:24%;top:-20%;width:17%}}
img[src*="pn11-02"],img[src*="pn11-03"],img[src*="pn11-06"]{transform:scale(1.15)}
.smallcard{gap:1em} .sc-ill{position:static;width:calc(144*var(--u));aspect-ratio:1;margin:-14px 0 -14px auto;flex-shrink:0}
/* 生成画像の当て込み（P09 仮置き。区分 S は公開前に実写へ差し替え） */
.ph.has-img{background-size:cover;background-position:center} .ph.has-img::after{background:rgba(77,77,77,.35);font-size:10px}
.ill.has-img{background:none;font-size:0} .ill.has-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:1}
.logo img{height:calc(60*var(--u));min-height:44px;width:auto} .logo .mark{display:none}
.flogo{width:calc(94*var(--u));min-width:70px;height:auto;display:block;margin-bottom:.8em}
@media (max-width:767px){.logo img{height:40px}}
/* 有機マスク（ref04 home-kv-img の mask-image と同じ手法。形は独自） */
:root{
--m1:url("data:image/svg+xml;utf8,");
--m2:url("data:image/svg+xml;utf8,");
--m3:url("data:image/svg+xml;utf8,");
}