/*
Theme Name: Rapport Kaigo
Theme URI: https://github.com/Gooner14/rapport-kaigo
Author: 株式会社ラ・ポール
Description: 介護美容サイト（本格ヘア＆メイク体験）のテーマ。09-design/comps のカンプから tools/build-theme.py が生成する。
Version: 1.0.1
Requires PHP: 8.1
Text Domain: rapport-kaigo
*/
/* ============================================================
   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}
@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));height:max(520px,min(calc(620*var(--u)),calc(100vh - 180px)));background:rgba(255,255,255,.95);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{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-reverse;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:hidden}
/* 波の帯（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))} .msg .line{display:block}
.msg .ch{color:#B9AE98} .msg .ch.on{color:var(--c-ink)}
.msg-2{margin-left:auto;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)}
.band-photo{width:calc(230*var(--u));aspect-ratio:1;margin-top:calc(-60*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:calc(600*var(--u));--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:var(--sticky-top);height:var(--card-h);display:flex;flex-direction:column;justify-content:center;gap:1.6em;margin-bottom:calc(100vh - var(--card-h))}
.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:var(--sticky-top);height:100vh}
.card{height:var(--card-h);background:#fff;border:1px solid #ECE9E7;border-radius:var(--r-card);padding:calc(36*var(--u)) calc(40*var(--u));display:flex;flex-direction:column;box-shadow:0 8px 32px 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:calc(120*var(--u)) 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:calc(300*var(--u));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:calc(28*var(--u)) calc(36*var(--u));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))}
.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{background:#fff;border-radius:var(--r-card);padding:calc(48*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)} .ccard:hover{transform:translateY(-4px)} .ccard+.ccard{margin-top:calc(16*var(--u))} .ccard .ill{position:static;width:calc(120*var(--u))}
@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:var(--sec);display:grid;grid-template-columns:1fr 1.4fr;gap:calc(80*var(--u));align-items:center;position:relative}
.scatter{position:relative;height:calc(560*var(--u))}
.fcard{position:absolute;width:calc(190*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-active .fcard{transform:translate3d(var(--x),var(--y),0) rotate(var(--rot))}
.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:var(--sec);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.2fr 1fr 1fr 1.2fr;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}
.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}}
@media (prefers-reduced-motion:reduce){[data-scroll],.split .w,.pill .t,.fgrid li span{transition:none;opacity:1;transform:none} .scatter .fcard{animation:none}}

/* ---------- 下層ページ（ref04 の下層: 見出しブロック＋有機写真、以降はトップと同じ部品） ---------- */
.ph-title{padding-top:calc(var(--header-h) + 60*var(--u));display:grid;grid-template-columns:1fr 1fr;gap:calc(60*var(--u));align-items:center;min-height:calc(560*var(--u))}
.ph-title h1{font-family:var(--f-head);font-size:max(30px,calc(44*var(--u)));font-weight:500;letter-spacing:.12em;line-height:1.5}
.ph-title .ph{width:calc(520*var(--u));aspect-ratio:1;justify-self:end;mask:var(--m1) center/100% 100% no-repeat;-webkit-mask:var(--m1) center/100% 100% no-repeat;transform-origin:center;transition:transform 2s var(--ease-out)} .ph-title.is-scale-down .ph{transform:scale(.9)}
.crumb{font-size:var(--fs-body);color:var(--c-sub);margin-top:.5em} .crumb span+span::before{content:"／";margin:0 .4em}
.sec{margin-top:var(--sec)} .sec .h2{max-width:24em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:calc(80*var(--u));align-items:center} .two .ph{aspect-ratio:1;mask:var(--m2) center/100% 100% no-repeat;-webkit-mask:var(--m2) center/100% 100% no-repeat}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(36*var(--u));margin-top:calc(60*var(--u))} .cards3 .card{height:auto;padding:calc(36*var(--u))} .cards3 .kw{font-size:var(--fs-h2)}
.ev{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(24*var(--u));margin-top:calc(60*var(--u))} .evcard{background:#fff;border-radius:calc(var(--r-card)/2);padding:calc(32*var(--u));border:1px solid #ECE9E7} .evcard .ill{position:static;width:60%;margin:0 auto 1em} .evcard h3{font-family:var(--f-head);font-size:var(--fs-h2);text-align:center;margin-bottom:.4em}
.steps{counter-reset:s;list-style:none;margin:calc(60*var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:calc(24*var(--u))} .steps li{counter-increment:s;background:var(--c-cream);border-radius:calc(var(--r-card)/2);padding:calc(28*var(--u));text-align:center} .steps li::before{content:"0" counter(s);display:block;font-family:var(--f-en);font-weight:700;font-size:var(--fs-h2);color:var(--c-sand-deep);letter-spacing:.1em;margin-bottom:.3em}
.cta{margin-top:var(--sec);background:var(--c-cream);border-radius:var(--r-card);padding:calc(64*var(--u));text-align:center} .cta .btns{display:flex;gap:1em;justify-content:center;flex-wrap:wrap;margin-top:1.5em}
.rep{margin-top:var(--sec);display:grid;grid-template-columns:calc(360*var(--u)) 1fr;gap:calc(80*var(--u));align-items:start} .rep .ph{aspect-ratio:3/4;border-radius:16px;overflow:hidden} .rep dl{margin:1.5em 0 0} .rep dt{font-weight:600;color:var(--c-sand-deep)} .rep dd{margin:0 0 1em}
@media (max-width:767px){.ph-title{grid-template-columns:1fr;min-height:0} .ph-title .ph{width:80%;justify-self:center} .two,.cards3,.ev,.steps,.rep{grid-template-columns:1fr} .ev{grid-template-columns:1fr 1fr}}

img[src*="pn11-02"],img[src*="pn11-03"],img[src*="pn11-06"]{transform:scale(1.15)}
.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}
body.scrolled .gnav{opacity:0;pointer-events:none}
.fbtn span:last-child{font-family:var(--f-en);line-height:1}
/* メニュー展開（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))}}
/* ===== 下層の背景処理（ref04 /service/care-house/ の実測を踏襲。2026-09-10 担当者指示） =====
   地: ref04 #f3f1ef → 当社 #F7F4ED。装飾: ref04 .base-bg-deco = 地よりわずかに明るい #F9F8F7（差 +6）の葉形 SVG（viewBox 100×39）を
   幅 2034〜2338/1440・回転 −143.92°／43.59°／180° でセクションに絶対配置し、スクロールで translateY topP×−5%・scale 1+topP×.05 の視差。
   当社では地 #F7F4ED に対して #FDFAF3（差 +6）、形は自社の葉形（左右非対称）。 */
:root{--c-page-sub:#F7F4ED;--c-deco-sub:#FFFFFF}
body{background:var(--c-page-sub)}
main{position:relative;overflow:hidden}
.ph-title,.sec,.cta,.rep,.prose,.two{position:relative}
.bgdeco{position:absolute;z-index:-1;pointer-events:none;top:calc(var(--tm) / 390 * 100vw);left:calc(var(--lm) / 390 * 100vw)} .bgdeco-inner{width:calc(var(--wm) / 390 * 100vw);transition:transform .2s ease;will-change:transform} .bgdeco svg{display:block;width:100%;height:auto;transform:rotate(var(--rm));transform-origin:center}
@media (min-width:768px){.bgdeco{top:calc(var(--td) / 1440 * 100vw);left:calc(var(--ld) / 1440 * 100vw)} .bgdeco-inner{width:calc(var(--wd) / 1440 * 100vw)} .bgdeco svg{transform:rotate(var(--rd))}}
@media (max-width:767px){.bgdeco.pc{display:none}}
.card,.merit .card,.cur .card,.mv .card,.cards3 .card{box-shadow:none;border:1px solid #ECE9E7;background:#fff}
.evcard,.tbl{background:#fff;border:1px solid #ECE9E7}
.steps li,.steps-v li,.faq details{background:#fff;border:1px solid #ECE9E7}
.cta{background:#fff;border:1px solid #ECE9E7}
.band{background:#fff} .wave-top,.wave-bottom{background:#fff}
.vcard .ph,.staff-card .ph{background-color:#fff}
.map{background:#fff;border:1px solid #ECE9E7}
.form .in{background:#fff}
.jobs span{background:#fff;border:1px solid #ECE9E7}
.lcard,.smallcard{box-shadow:none}

.gnav{background:rgba(255,255,255,.75)}

.li{aspect-ratio:1} .li img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:1} .greet p{margin-top:1em;font-size:var(--fs-body);line-height:2} .greet .sign{text-align:right;color:var(--c-sub)}
/* 下層の末尾 CTA（2026-09-10 担当者指示: 幅 50%、トップの問い合わせカードと同じ左上からの斜めワイプ、電話の下に受付時間） */
.cta{position:relative;overflow:hidden;max-width:50%;margin-inline:auto;transition:color .5s var(--ease-fade)} .cta::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} .cta>*{position:relative;z-index:1} .cta .hours{color:var(--c-sand-deep);margin-bottom:.8em}
.cta:hover{color:#fff} .cta:hover::before{clip-path:polygon(0 0,250% 0,0 250%)} .cta:hover .tel,.cta:hover .hours,.cta:hover .h2{color:#fff} .cta:hover .btn{background:#fff;color:var(--c-sand-deep)} .cta:hover .btn .arw{background:var(--c-sand-deep);color:#fff} .cta .tel,.cta .hours,.cta .h2,.cta .btn,.cta .btn .arw{transition:color .5s var(--ease-fade),background-color .5s var(--ease-fade)}
@media (max-width:767px){.cta{max-width:100%}}
/* FV 下部の水引風線画（2026-09-10 担当者提供モチーフ。3 分の 1 が FV 下端から次セクションへはみ出す） */
.ph-title{overflow:visible} .ph-title>div:has(>h1){translate:0 -100px} .ph-title .crumb{position:absolute;left:0;top:calc(var(--header-h) + 20px);margin:0;z-index:3} .crumb a{color:inherit;text-decoration:none;transition:color .3s var(--ease-fade)} .crumb a:hover{color:var(--c-sand-deep);text-decoration:underline} .fv-deco{position:absolute;left:calc(50% - 50vw + 20px);bottom:0;width:600px;translate:0 33%;z-index:2;pointer-events:none;mix-blend-mode:multiply}
@media (max-width:767px){.ph-title{padding-bottom:22vw} .ph-title>div:has(>h1){translate:0 0} .ph-title{padding-top:calc(var(--header-h) + 70*var(--u))} .fv-deco{width:min(600px,80vw);translate:0 33%}}
/* ---------- 下層の追加部品（tone-and-manner 5章） ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:1.5em;background:#fff;border-radius:calc(var(--r-card)/2);overflow:hidden;border:1px solid #ECE9E7}
.tbl th,.tbl td{padding:1em 1.4em;text-align:left;border-top:1px solid #ECE9E7;vertical-align:top} .tbl tr:first-child th,.tbl tr:first-child td{border-top:0}
.tbl th{width:9em;font-weight:500;color:var(--c-sand-deep);background:var(--c-cream)} .tbl .num{font-family:var(--f-en);font-weight:700;color:var(--c-sand-deep);font-size:var(--fs-lead)}
.merit{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(36*var(--u));margin-top:calc(60*var(--u))} .merit .card{height:auto;padding:calc(36*var(--u))} .merit h3{font-family:var(--f-head);font-size:var(--fs-h2);margin:.6em 0 .4em;text-align:center}
.merit .card .en.center{margin-bottom:.4em} .merit .card .li{width:44%;margin:0 auto .4em} .li{aspect-ratio:1} .li img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:.9}
.steps-v{list-style:none;margin:calc(60*var(--u)) 0 0;padding:0;display:grid;gap:calc(36*var(--u))} .steps-v li{position:relative;display:grid;grid-template-columns:auto 1fr calc(130*var(--u));gap:calc(32*var(--u));align-items:center;background:#fff;border:1px solid #ECE9E7;border-radius:calc(var(--r-card)/2);padding:calc(28*var(--u)) calc(36*var(--u))} .steps-v .no{font-family:var(--f-en);font-weight:700;font-size:var(--fs-card-kw);color:var(--c-sand-deep);line-height:1} .steps-v h3{font-family:var(--f-head);font-size:var(--fs-h2);margin:0 0 .3em} .steps-v .li{width:calc(130*var(--u));justify-self:end} .steps-v li+li::after{content:"↓";position:absolute;left:50%;top:calc(-36*var(--u) - .1em);translate:-50% -50%;font-family:var(--f-en);color:var(--c-sand-deep);font-size:var(--fs-body)}
.menu-block{display:grid;grid-template-columns:1fr 1fr;gap:calc(60*var(--u));align-items:center;margin-top:calc(60*var(--u))} .menu-block+.menu-block{margin-top:calc(100*var(--u))} .menu-block .ph{aspect-ratio:1;mask:var(--m3) center/100% 100% no-repeat;-webkit-mask:var(--m3) center/100% 100% no-repeat} .menu-block .no{font-family:var(--f-en);font-weight:700;color:var(--c-sand-deep);font-size:var(--fs-h2);letter-spacing:.15em}
/* FAQ: カテゴリカード・アコーディオン・ページ送り */
.faq-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(16*var(--u));margin-top:calc(40*var(--u))} .faq-cat{background:#fff;border:1px solid #ECE9E7;border-radius:calc(var(--r-card)/2);padding:calc(18*var(--u)) calc(20*var(--u));cursor:pointer;display:grid;gap:.2em;transition:background .3s var(--ease-fade),color .3s var(--ease-fade)} .faq-cat small{font-family:var(--f-en);font-weight:700;letter-spacing:.15em;font-size:var(--fs-small);color:var(--c-sand-deep)} .faq-cat b{font-weight:600} .faq-cat[aria-pressed="true"]{background:var(--c-sand-deep);color:#fff} .faq-cat[aria-pressed="true"] small{color:#fff}
.faq{list-style:none;margin:calc(40*var(--u)) 0 0;padding:0;display:grid;gap:calc(16*var(--u))} .faq-item{background:#fff;border:1px solid #ECE9E7;border-radius:calc(var(--r-card)/2);padding:0 calc(36*var(--u))} .faq-item[hidden]{display:none}
.faq-q{width:100%;background:none;border:0;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:1em;align-items:center;padding:calc(24*var(--u)) 0;cursor:pointer;font-family:var(--f-head);font-size:var(--fs-h2);line-height:1.6;color:inherit} .faq-q .q{font-family:var(--f-en);font-weight:700;color:var(--c-sand-deep)} .faq-q .arrow-btn{transition:transform .4s var(--ease-out)} .faq-item.is-open .faq-q .arrow-btn{transform:rotate(90deg)}
.faq-a{display:grid;grid-template-columns:auto 1fr;gap:1em;overflow:hidden;max-height:0;transition:max-height .5s var(--ease-out),opacity .4s var(--ease-fade);opacity:0;font-size:calc(var(--fs-body) + 2px);line-height:1.9} .faq-a>*{padding-bottom:calc(28*var(--u))} .faq-a b{font-family:var(--f-en);color:var(--c-sand-deep)} .faq-item.is-open .faq-a{opacity:1;border-top:1px dotted var(--c-line);padding-top:calc(20*var(--u))} .faq-a .cat{display:block;font-size:var(--fs-small);color:var(--c-sub);margin-top:.6em}
.faq-pager{display:flex;justify-content:center;gap:.5em;margin-top:calc(40*var(--u))} .faq-pager button{width:44px;height:44px;border-radius:50%;border:1px solid #ECE9E7;background:#fff;font-family:var(--f-en);font-weight:700;color:var(--c-ink);cursor:pointer} .faq-pager button[aria-current="true"]{background:var(--c-sand-deep);color:#fff;border-color:var(--c-sand-deep)} .faq-pager button:disabled{opacity:.35;cursor:default}
.faq-count{margin-top:1em;color:var(--c-sub);font-size:var(--fs-small)}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:calc(36*var(--u));margin-top:calc(60*var(--u))} .mv .card{height:auto;padding:calc(40*var(--u))} .mv h3{font-family:var(--f-head);font-size:var(--fs-h2);margin-bottom:.6em;display:flex;align-items:center;gap:.6em} .mv h3 .li{width:calc(64*var(--u));flex-shrink:0} .mv ul{margin:0;padding-left:1.2em} .mv li{margin:.3em 0}
/* FV 下部の水引風線画（2026-09-10 担当者提供モチーフ。3 分の 1 が FV 下端から次セクションへはみ出す） */
.ph-title{overflow:visible} .ph-title>div:has(>h1){translate:0 -100px} .ph-title .crumb{position:absolute;left:0;top:calc(var(--header-h) + 20px);margin:0;z-index:3} .crumb a{color:inherit;text-decoration:none;transition:color .3s var(--ease-fade)} .crumb a:hover{color:var(--c-sand-deep);text-decoration:underline} .fv-deco{position:absolute;left:calc(50% - 50vw + 20px);bottom:0;width:600px;translate:0 33%;z-index:2;pointer-events:none;mix-blend-mode:multiply}
@media (max-width:767px){.ph-title{padding-bottom:22vw} .ph-title>div:has(>h1){translate:0 0} .ph-title{padding-top:calc(var(--header-h) + 70*var(--u))} .fv-deco{width:min(600px,80vw);translate:0 33%}}
/* スクールのフォトギャラリー: 1 行の無限スライド。hover で本人 1.2・隣 1.1・その隣 1.05（:has で前方にも効かせる） */
.gallery{overflow:hidden;margin-top:150px;padding:80px 0;position:relative;z-index:3} .gal-track{display:flex;gap:12px;width:max-content;animation:gal-slide 60s linear infinite;will-change:transform} .gallery:hover .gal-track{animation-play-state:paused}
.gal-item{display:block;height:100px;flex-shrink:0;border-radius:8px;overflow:hidden;transition:scale .5s var(--ease-out);transform-origin:50% 100%} .gal-item img{height:100%;width:auto;display:block}
.gal-item:hover{scale:1.75;z-index:2;position:relative} .gal-item:hover+.gal-item{scale:1.3} .gal-item:hover+.gal-item+.gal-item{scale:1.1} .gal-item:has(+.gal-item:hover){scale:1.3} .gal-item:has(+.gal-item+.gal-item:hover){scale:1.1}
@keyframes gal-slide{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.gal-track{animation:none}} @media (max-width:767px){.gallery{margin-top:40px} .gal-item{height:80px}}
.ph-title.about-fv{grid-template-columns:1fr 1.3fr;gap:20px} .ph-title.about-fv .ph{width:100%;aspect-ratio:5/4;justify-self:stretch;mask:var(--m1) center/100% 100% no-repeat;-webkit-mask:var(--m1) center/100% 100% no-repeat} @media (max-width:767px){.ph-title.about-fv{grid-template-columns:1fr} .ph-title.about-fv .ph{width:100%} .company-two .ph{aspect-ratio:4/3!important;height:auto!important}}
.history{list-style:none;margin:calc(10*var(--u)) 0 0;padding:0;display:grid;gap:.3em;color:var(--c-sub)} .history li{display:grid;grid-template-columns:5.5em 1fr;gap:1em} .history b{font-family:var(--f-en);font-weight:700;color:var(--c-sand-deep)}
.staffgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(36*var(--u)) calc(36*var(--u));margin-top:calc(60*var(--u))} .staff-card .ph{aspect-ratio:3/4;border-radius:16px;overflow:hidden} .staff-card h3{font-family:var(--f-head);font-size:var(--fs-h2);margin:.8em 0 0} .staff-card .en{display:block;margin-top:.2em} .staff-card p{margin-top:.6em;color:var(--c-sub)}
.profile{display:grid;grid-template-columns:1fr 1fr;gap:calc(60*var(--u));margin-top:calc(40*var(--u));align-items:stretch} .profile .tbl{margin-top:0} .profile .access{display:flex;flex-direction:column} .map{flex:1;min-height:calc(320*var(--u));background:#fff;border:1px solid #ECE9E7;border-radius:calc(var(--r-card)/2);display:grid;place-items:center;color:var(--c-sub);margin-top:1em}
.cur{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(36*var(--u));margin-top:calc(60*var(--u))} .cur .card{height:auto;padding:calc(36*var(--u))} .cur h3{font-family:var(--f-head);font-size:var(--fs-h2)} .cur h3 small{display:block;font-family:var(--f-body);font-size:var(--fs-body);color:var(--c-sub);margin-top:.3em} .cur .ph{aspect-ratio:3/2;border-radius:12px;margin-top:1em} .cur p{margin-top:.8em;color:var(--c-sub)}
.jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(24*var(--u));margin-top:calc(40*var(--u))} .jobs .card{height:auto;padding:calc(24*var(--u));text-align:center;display:grid;gap:.4em;justify-items:center} .jobs .card b{font-weight:600} .jobs .card .li{width:56%}
.form{margin:calc(60*var(--u)) auto 0;display:grid;gap:calc(24*var(--u));max-width:calc(900*var(--u));font-size:calc(var(--fs-body) + 4px)} .form label{display:block;font-weight:500;margin-bottom:.4em} .form label i{font-style:normal;font-size:var(--fs-small);color:#fff;background:var(--c-sand-deep);border-radius:4px;padding:.1em .5em;margin-left:.6em;letter-spacing:.1em} .form .in{height:60px;border:1px solid var(--c-line);border-radius:var(--r-btn);background:#fff;padding:0 1em;display:flex;align-items:center;color:var(--c-muted)} .form .ta{height:180px;align-items:flex-start;padding-top:.8em} .form .radios{display:flex;gap:1.5em;flex-wrap:wrap} .form .radios span::before{content:"";display:inline-block;width:20px;height:20px;border:1px solid var(--c-sub);border-radius:50%;vertical-align:-4px;margin-right:.4em} .form .chk::before{content:"";display:inline-block;width:20px;height:20px;border:1px solid var(--c-sub);border-radius:4px;vertical-align:-4px;margin-right:.5em} .form .submit{text-align:center}
.contact-top{display:grid;grid-template-columns:1fr 1fr;gap:calc(36*var(--u));margin-top:calc(40*var(--u))} .contact-top .ccard{justify-content:flex-start;gap:1.5em}
.prose{max-width:calc(820*var(--u))} .prose h2{font-family:var(--f-head);font-size:var(--fs-h2);margin:2em 0 .6em} .prose p{margin-top:.5em}
.center{text-align:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:calc(80*var(--u));align-items:center} .two .ph{aspect-ratio:1;mask:var(--m2) center/100% 100% no-repeat;-webkit-mask:var(--m2) center/100% 100% no-repeat}
@media (max-width:767px){.merit,.menu-block,.mv,.staffgrid,.cur,.contact-top,.profile,.two{grid-template-columns:1fr} .staffgrid{grid-template-columns:1fr 1fr} .jobs,.faq-cats{grid-template-columns:1fr 1fr} .steps-v li{grid-template-columns:auto 1fr} .steps-v .li{grid-column:1/-1;justify-self:center} .contact-top .ccard{flex-wrap:wrap;overflow:hidden} .contact-top .ccard b{font-size:var(--fs-h2)!important;word-break:break-all}}

/* 生成画像の当て込み（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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2C72 0 96 14 98 40c2 24-10 52-34 58C40 104 8 92 3 66-2 40 20 4 50 2z' fill='black'/></svg>");
 --m2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M18 6c22-10 60-8 74 12 14 22 10 58-10 74S22 100 8 82C-6 62-4 16 18 6z' fill='black'/></svg>");
 --m3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0c30 0 50 16 50 46 0 34-18 54-50 54S0 82 0 48C0 16 20 0 50 0z' fill='black'/></svg>");
 --m4:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M8 30C14 8 40 0 62 4c24 4 40 24 36 50-4 28-30 48-56 44C14 94-2 62 8 30z' fill='black'/></svg>");
}


/* ============================================================
   WordPress 実装で足す分（12-wordpress/theme-src/extra.css。build-theme.py が style.css 末尾に連結）
   ============================================================ */
/* 管理バー */
body.admin-bar .header{top:32px} @media (max-width:782px){body.admin-bar .header{top:46px}}
/* Contact Form 7 をカンプ contact.html の .form と同じ見た目に */
.form .wpcf7,.form .wpcf7-form,.form .wpcf7-form-control-wrap{display:contents}
.form .radios span::before{content:none}
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea{display:block;width:100%;height:60px;border:1px solid var(--c-line);border-radius:var(--r-btn);background:#fff;padding:0 1em;font:inherit;color:var(--c-ink);box-sizing:border-box}
.form textarea{height:180px;padding:.8em 1em;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--c-sand);outline-offset:1px}
.form .wpcf7-radio,.form .wpcf7-acceptance{display:flex;gap:1.5em;flex-wrap:wrap}
.form .wpcf7-list-item{margin:0} .form .wpcf7-list-item label{display:inline-flex;align-items:center;gap:.4em;cursor:pointer;font-weight:400;margin:0}
.form input[type=radio],.form input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid var(--c-sub);border-radius:50%;margin:0;background:#fff;display:inline-grid;place-items:center;flex-shrink:0;cursor:pointer}
.form input[type=checkbox]{border-radius:4px}
.form input[type=radio]:checked::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-sand-deep)}
.form input[type=checkbox]:checked::before{content:"✓";font-size:14px;line-height:1;color:var(--c-sand-deep)}
.form .consent{margin:0} .form .consent .wpcf7-list-item{display:inline}
.form .btn-submit{cursor:pointer} .form .btn-submit input{background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer;letter-spacing:inherit}
.form .btn-submit:hover .arw{transform:translateX(3px)}
.form .wpcf7-not-valid-tip{display:block;color:#B0413E;font-size:var(--fs-small);margin-top:.3em}
.form .wpcf7-response-output{border:1px solid var(--c-sand-deep);border-radius:var(--r-btn);padding:.8em 1em;margin:0;text-align:center;font-size:var(--fs-body)}
.form .wpcf7-form.invalid .wpcf7-response-output{border-color:#B0413E;color:#B0413E}
.form .wpcf7-spinner{display:block;margin:0 auto}
/* お客さまの声（投稿本文） */
.voice-body img{display:block;max-width:100%;height:auto;border-radius:16px;margin-top:2em}
.voice-body .note{margin-top:2em;color:var(--c-sub)}
.voice-body h2{margin-top:2em}