/* =========================================================
   えぇ塩梅屋 — 墨と松 / 和モダン・ラグジュアリー
   ========================================================= */
:root{
  --sumi:#1B1A17;
  --sumi-2:#26241F;
  --washi:#EFEBE2;
  --gofun:#F8F6F1;
  --kogane:#E9A91C;   /* ロゴの金 */
  --yamabuki:#F6BE2C;
  --shu:#C8372A;      /* 落款 */
  --nibi:#6D6A63;
  --rule:#D9D2C4;
  --ink-text:#24221E;

  --f-sho:"Yuji Syuku", "Shippori Mincho B1", serif;
  --f-min:"Shippori Mincho B1", "Yu Mincho", serif;
  --f-got:"Zen Kaku Gothic New", system-ui, sans-serif;
  --f-en:"Cormorant Garamond", serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --gutter:clamp(20px, 5vw, 88px);
  --sec-pad:clamp(96px, 14vw, 200px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:var(--washi);color:var(--ink-text);
  font-family:var(--f-got);font-size:16px;line-height:1.95;letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body::before{ /* 和紙の繊維 */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--washi) url(../images/washi.jpg) center/900px repeat;
}
body.is-loading{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--kogane);outline-offset:4px}
.sp{display:none}
@media (max-width:767px){.pc{display:none}.sp{display:inline}}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--sumi);--fg:var(--gofun);
  position:relative;display:inline-flex;align-items:center;gap:18px;
  padding:16px 30px;border:0;border-radius:2px;cursor:pointer;
  background:var(--bg);color:var(--fg);text-decoration:none;
  font:500 15px/1 var(--f-got);letter-spacing:.14em;overflow:hidden;
  transition:color .4s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--sumi);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn>*{position:relative}
.btn--shu{--bg:var(--shu)}
.btn--lg{padding:22px 38px;font-size:16px}
.btn--ghost{--bg:transparent;--fg:var(--gofun);box-shadow:inset 0 0 0 1px rgba(248,246,241,.4)}
.btn--ghost::before{background:var(--kogane)}
.btn--ghost:hover{color:var(--sumi)}
.btn__arrow{width:28px;height:1px;background:currentColor;position:relative;transition:width .5s var(--ease)}
.btn__arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .btn__arrow{width:40px}

/* ---------- opening ---------- */
.opening{position:fixed;inset:0;z-index:100;pointer-events:auto}
.fusuma{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:var(--gofun) url(../images/washi.jpg) center/700px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.fusuma::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%,#C9A24A 50%,transparent 51%),radial-gradient(1.2px 1.2px at 27% 9%,#D8B45A 50%,transparent 51%),
    radial-gradient(2px 2px at 41% 26%,#C9A24A 50%,transparent 51%),radial-gradient(1.1px 1.1px at 63% 14%,#E0BE66 50%,transparent 51%),
    radial-gradient(1.8px 1.8px at 78% 31%,#C9A24A 50%,transparent 51%),radial-gradient(1.3px 1.3px at 88% 8%,#D8B45A 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 18% 84%,#C9A24A 50%,transparent 51%),radial-gradient(2.2px 2.2px at 35% 92%,#D8B45A 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 56% 78%,#C9A24A 50%,transparent 51%),radial-gradient(1.7px 1.7px at 72% 90%,#E0BE66 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 91% 74%,#C9A24A 50%,transparent 51%),radial-gradient(1.4px 1.4px at 8% 52%,#D8B45A 50%,transparent 51%);
  background-size:340px 420px}
.fusuma--l{left:0;border-right:1px solid rgba(169,138,85,.35)}
.fusuma--r{right:0;border-left:1px solid rgba(169,138,85,.35)}
.fusuma__hikite{position:absolute;top:50%;width:18px;height:46px;margin-top:-23px;border:1px solid rgba(27,26,23,.18);border-radius:9px;opacity:0}
.fusuma--l .fusuma__hikite{right:26px}
.fusuma--r .fusuma__hikite{left:26px}
.opening__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vmin,48px)}
.opening__mark{position:relative;width:clamp(250px,52vmin,520px);aspect-ratio:1}
.enso{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.opening__logo{position:absolute;left:50%;top:50%;width:50%;overflow:visible}
.opening__name{writing-mode:vertical-rl;font:400 clamp(30px,6.4vmin,64px)/1 var(--f-sho);letter-spacing:.22em;color:var(--sumi);margin-top:6vmin}
.opening__name span{display:inline-block;opacity:0}
.opening__name .sm{font-size:.62em}
.opening__tag{writing-mode:vertical-rl;font:600 clamp(13px,2vmin,19px)/1 var(--f-min);letter-spacing:.5em;color:var(--sumi);margin-bottom:10vmin;opacity:0;display:flex;gap:.6em;align-items:center}
.opening__tag i{font-style:normal;color:var(--kogane)}
.opening__words{position:absolute;inset:0;display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:clamp(20px,5vmin,60px);pointer-events:none}
.opening__words p{writing-mode:vertical-rl;font:400 clamp(18px,4.6vh,50px)/1.2 var(--f-sho);letter-spacing:.16em;color:var(--sumi);opacity:0}
.opening__words p.is-shu{color:var(--shu)}
.opening__skip{position:absolute;right:24px;bottom:22px;background:none;border:0;color:var(--nibi);font:italic 400 15px var(--f-en);letter-spacing:.2em;cursor:pointer}

/* ---------- header ---------- */
.hd{
  position:fixed;z-index:50;top:0;left:0;right:0;
  display:flex;align-items:center;gap:32px;padding:18px var(--gutter);
  transition:background .5s,backdrop-filter .5s,padding .5s var(--ease);
  background:rgba(239,235,226,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(169,138,85,.18);
}
.hd.is-scrolled{background:rgba(239,235,226,.82);backdrop-filter:blur(10px);padding-top:10px;padding-bottom:10px}
.hd.is-dark{color:var(--gofun);background:rgba(27,26,23,.82)}
.hd.is-dark.is-scrolled{background:rgba(27,26,23,.78)}
.hd__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.hd__logo{width:52px;height:auto}
.hd__name{font:400 22px/1 var(--f-sho);letter-spacing:.14em}
.hd__nav{display:flex;gap:30px;margin-left:auto}
.hd__nav a{position:relative;text-decoration:none;font-size:14px;letter-spacing:.14em}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--kogane);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd__cta{padding:12px 22px;font-size:13px}
.hd__menu{display:none}

/* ---------- ink line (signature) ---------- */
.inkline{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:3;overflow:visible;mix-blend-mode:difference}
.inkline path{fill:none;stroke:#F2EEE4;stroke-width:1.6;stroke-linecap:round}

/* ---------- section head ---------- */
section{position:relative}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(48px,7vw,96px)}
.sec-head__en{font:italic 400 clamp(17px,1.6vw,21px)/1 var(--f-en);letter-spacing:.12em;color:var(--kogane);display:flex;align-items:center;gap:14px}
.sec-head__en::before{content:"";width:34px;height:1px;background:currentColor}
.sec-head__ja{font:800 clamp(28px,3.8vw,54px)/1.42 var(--f-min);word-break:auto-phrase;text-wrap:balance;letter-spacing:.06em;color:var(--sumi)}
.sec-head--light .sec-head__ja{color:var(--gofun)}
.dark{background:var(--sumi);color:rgba(248,246,241,.82)}

/* ---------- ① hero ---------- */
.hero{min-height:100svh;padding:120px var(--gutter) 64px;overflow:hidden;display:flex;align-items:stretch}
.hero__mist{position:absolute;inset:-10%;background:
  radial-gradient(60% 40% at 78% 18%, rgba(246,190,44,.10), transparent 70%),
  radial-gradient(50% 50% at 20% 90%, rgba(255,255,255,.55), transparent 70%);pointer-events:none}
.hero__scenes{position:absolute;right:-6vw;top:9vh;width:min(1100px,80vw);aspect-ratio:1536/1024;mix-blend-mode:multiply;opacity:.94;pointer-events:none;will-change:transform}
.sc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity,filter,transform;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.sc-img.is-on{opacity:1}
.hero__season{position:absolute;left:var(--gutter);bottom:72px;z-index:2;display:grid;gap:14px}
.hero__phrase{display:flex;align-items:baseline;gap:14px;color:var(--sumi);min-height:44px}
.hero__phrase-k{font:400 40px/1 var(--f-sho)}
.hero__phrase-t{font:600 15px/1.6 var(--f-min);letter-spacing:.2em}
.hero__dots{display:flex;gap:22px}
.hero__dots button{position:relative;background:none;border:0;padding:4px 0 10px;cursor:pointer;font:400 18px/1 var(--f-sho);color:var(--nibi);transition:color .4s}
.hero__dots button.is-on{color:var(--sumi)}
.hero__dots i{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);overflow:hidden}
.hero__dots i::after{content:"";position:absolute;inset:0;background:var(--kogane);transform:scaleX(var(--p,0));transform-origin:left}
.hero__grid{position:relative;width:100%;min-height:calc(100svh - 184px);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;column-gap:clamp(24px,5vw,80px)}
.hero__eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:12px;font:600 14px/1 var(--f-min);letter-spacing:.4em;color:var(--sumi)}
.hero__eyebrow i{font-style:normal;color:var(--kogane);letter-spacing:0}
.hero__eyebrow em{margin-left:18px;font:italic 400 16px var(--f-en);letter-spacing:.16em;color:var(--nibi)}
.hero__catch{grid-row:2/4;writing-mode:vertical-rl;font:800 clamp(34px,4.4vw,66px)/1.5 var(--f-min);letter-spacing:.18em;color:var(--sumi);margin-top:clamp(28px,5vh,60px);align-self:start}
.vline{display:block;overflow:hidden}
.vline>span,.vline{will-change:transform}
.hero__catch .vline:nth-child(2){padding-top:1.2em}
.hero__catch .vline:nth-child(3){padding-top:2.4em}
.hero__sho{grid-column:2;grid-row:2;align-self:start;justify-self:center;margin:2vh 0 0 -10vw;mix-blend-mode:multiply}
.hero__sho img{width:auto;height:min(46svh,520px);max-width:52vw;object-fit:contain;clip-path:inset(0 100% 0 0)}
.hero__lead{grid-column:2;grid-row:3;justify-self:end;position:relative;z-index:2;max-width:480px;display:grid;gap:14px;font-size:15px;line-height:2.05;
  padding:28px 32px 32px;background:rgba(244,241,234,.86);backdrop-filter:blur(6px);border-top:2px solid var(--kogane);box-shadow:0 30px 60px -40px rgba(27,26,23,.4)}
.hero__lead .btn{justify-self:start;margin-top:14px}
.hero__scroll{position:absolute;left:var(--gutter);bottom:28px;display:flex;align-items:center;gap:12px;font:italic 400 14px var(--f-en);letter-spacing:.24em;color:var(--nibi)}
.hero__scroll i{width:60px;height:1px;background:var(--rule);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--sumi);animation:scrollbar 2.4s var(--ease-io) infinite}
@keyframes scrollbar{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- ② worries (短冊) ---------- */
.worries{padding:var(--sec-pad) var(--gutter)}
.tanzaku{position:relative}
.tanzaku__track{display:flex;flex-direction:row-reverse;justify-content:center;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap}
.tanzaku__item{
  writing-mode:vertical-rl;min-height:340px;padding:34px 20px;
  background:var(--gofun);box-shadow:0 1px 0 rgba(0,0,0,.04), 0 24px 40px -30px rgba(27,26,23,.35);
  font:500 clamp(16px,1.35vw,19px)/1.9 var(--f-min);letter-spacing:.14em;color:var(--sumi);
  border-top:3px solid var(--kogane);position:relative;
}
.tanzaku__item:nth-child(odd){transform:translateY(36px)}
.tanzaku__item::before{content:"";position:absolute;top:-16px;left:50%;width:1px;height:14px;background:var(--nibi);opacity:.5}
.worries__answer{word-break:auto-phrase;margin-top:clamp(72px,9vw,120px);text-align:center;font:600 clamp(20px,2.2vw,30px)/1.8 var(--f-min);letter-spacing:.12em;color:var(--sumi)}

/* ---------- ③ promise ---------- */
.promise{padding:var(--sec-pad) var(--gutter);overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(32px,6vw,100px)}
.promise__bg,.contact__bg{position:absolute;inset:0;background:url(../images/sumi-ink.jpg) center/cover;opacity:.9}
.promise__sho{position:relative;mix-blend-mode:screen}
.promise__sho img{filter:invert(1);width:min(560px,100%);opacity:.95}
.promise__body{position:relative}
.promise__list{display:grid;gap:clamp(30px,3.6vw,48px)}
.promise__list li{display:grid;grid-template-columns:56px 1fr;column-gap:20px;padding-top:26px;border-top:1px solid rgba(248,246,241,.14)}
.promise__num{grid-row:1/3;font:400 34px/1 var(--f-sho);color:var(--kogane)}
.promise__list h3{font:600 clamp(20px,1.8vw,24px)/1.5 var(--f-min);color:var(--gofun);letter-spacing:.1em;margin-bottom:8px}
.promise__list p{font-size:15px}

/* ---------- ④ pillars / 屏風 ---------- */
.pillars{padding-top:var(--sec-pad);overflow:hidden}
.pillars__intro{padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.pillars__note{max-width:340px;font-size:14px;color:var(--nibi);margin-bottom:clamp(48px,7vw,96px)}
.byobu{height:100svh;display:flex;align-items:center;padding-bottom:4vh}
.byobu__track{display:flex;padding:0 var(--gutter);will-change:transform;perspective:1600px}
.panel{
  flex:0 0 clamp(300px,30vw,440px);min-height:min(74svh,640px);
  padding:clamp(28px,3vw,44px);position:relative;display:flex;flex-direction:column;
  background:linear-gradient(100deg,#FBF9F4 0%,#F3EFE6 100%);
  border-top:2px solid var(--kogane);border-bottom:2px solid var(--kogane);
  box-shadow:0 30px 60px -40px rgba(27,26,23,.45);
}
.panel:nth-child(even){background:linear-gradient(260deg,#FBF9F4 0%,#EDE8DD 100%)}
.panel+.panel{border-left:1px solid rgba(169,138,85,.45)}
.panel__no{font:400 30px/1 var(--f-sho);color:var(--kogane)}
.panel__sho{width:72%;margin:8px auto 4px;mix-blend-mode:multiply;aspect-ratio:1}
.panel__sho img{width:100%;height:100%;object-fit:contain}
.panel__title{font:800 clamp(22px,1.9vw,27px)/1.4 var(--f-min);letter-spacing:.1em;color:var(--sumi)}
.panel__lead{margin:8px 0 18px;font:500 15px/1.7 var(--f-min);color:var(--kogane);letter-spacing:.08em}
.panel__list{display:grid;gap:8px;font-size:14px;line-height:1.75;margin-top:auto}
.panel__list li{padding-left:18px;position:relative}
.panel__list li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1px;background:var(--sumi)}

/* ---------- ⑤ CareOne ---------- */
.careone{padding:var(--sec-pad) var(--gutter);display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:center;overflow:hidden}
.careone__logo{display:block;font:italic 500 clamp(22px,2.2vw,30px)/1 var(--f-en);color:var(--kogane);letter-spacing:.06em;margin-bottom:18px}
.careone__copy>p{font-size:15px;max-width:520px}
.careone__spec{margin:34px 0 26px;display:grid;gap:18px}
.careone__spec div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding-top:16px;border-top:1px solid rgba(248,246,241,.14)}
.careone__spec dt{font:600 13px/1.9 var(--f-min);color:var(--kogane);letter-spacing:.14em}
.careone__spec dd{margin:0;font-size:14px}
.careone__safe{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.careone__safe li{font-size:13px;padding:6px 14px;border:1px solid rgba(233,169,28,.45);color:var(--yamabuki);letter-spacing:.08em}
.careone__frame{position:relative;padding:clamp(16px,2vw,26px);background:linear-gradient(145deg,#3A332A,#211E19);box-shadow:inset 0 0 0 1px rgba(233,169,28,.35), 0 40px 80px -40px #000}
.careone__frame figcaption{margin-top:16px;font-size:13px;color:rgba(248,246,241,.6)}
.ui{position:relative;background:#FBFAF6;color:#2A3B36;border-radius:4px;overflow:hidden;font-size:12px;line-height:1.45}
.ui__bar{display:flex;gap:18px;align-items:center;padding:12px 16px;border-bottom:1px solid #E7E3DA}
.ui__bar b{font:italic 600 16px var(--f-en);color:#1F4A45;margin-right:auto}
.ui__bar span{color:#8C918C}
.ui__bar span{padding-bottom:2px;border-bottom:2px solid transparent;transition:color .4s,border-color .4s}
.ui__bar span.is-active{color:#1F4A45;border-bottom-color:#1F4A45}
.ui__head,.ui__body{display:grid;grid-template-columns:52px repeat(3,1fr);gap:8px;padding:8px 14px}
.ui__head{color:#8C918C;border-bottom:1px solid #EFEBE2}
.ui__t{color:#8C918C;padding-top:6px}
.ui__c{padding:8px 10px;border-radius:4px;min-height:52px;position:relative}
.ui__c small{color:inherit;opacity:.75}
.ui__c--a{background:#1F4A45;color:#F5F2EA}
.ui__c--b{background:#F3E6CF;color:#5B4A2B}
.ui__c--warn{box-shadow:0 0 0 2px var(--shu)}
.ui__c--warn em{position:absolute;right:6px;top:6px;font-style:normal;font-size:10px;background:var(--shu);color:#fff;padding:1px 6px;border-radius:9px}
.ui__drop{border:1.5px dashed #9BB7B2}
.ui__drag{position:absolute;padding:8px 10px;border-radius:4px;background:#1F4A45;color:#F5F2EA;box-shadow:0 14px 30px -8px rgba(0,0,0,.45);width:24%;left:32%;top:66%}

/* ---------- ⑥ cases / 巻物 ---------- */
.cases{padding:var(--sec-pad) var(--gutter)}
.cases__note{max-width:560px;font-size:14px;line-height:1.9;color:var(--nibi);margin:clamp(20px,3vw,32px) 0 clamp(36px,5vw,64px)}
.makimono{position:relative;display:flex;align-items:stretch}
.makimono__paper{flex:1;min-width:0;overflow:hidden;background:var(--gofun);
  box-shadow:0 30px 60px -44px rgba(27,26,23,.5);border-top:6px solid var(--sumi-2);border-bottom:6px solid var(--sumi-2);clip-path:inset(0 50% 0 50%)}
.makimono__jiku{position:relative;z-index:2;width:18px;flex:0 0 18px;margin:-14px 0;border-radius:9px;
  background:linear-gradient(90deg,#3B2F22,#7A6145 45%,#2E251B);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.makimono__track{display:grid;grid-template-columns:repeat(3,1fr)}
.case{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;gap:10px}
.case+.case{border-left:1px solid var(--rule)}
.case__type{font-size:12px;letter-spacing:.16em;color:var(--kogane)}
.case__name{font:800 clamp(17px,1.35vw,21px)/1.6 var(--f-min);word-break:auto-phrase;color:var(--sumi);letter-spacing:.06em;margin-bottom:12px}
.case dl{display:grid;gap:8px}
.case dt{font:600 13px var(--f-min);letter-spacing:.2em;color:var(--sumi);display:flex;align-items:center;gap:10px;margin-top:8px}
.case dt::after{content:"";flex:1;height:1px;background:var(--rule)}
.case dd{margin:0;font-size:14px;line-height:1.9}
.case__sub{font:500 12px/1.6 var(--f-min);color:var(--nibi);margin:-8px 0 8px;letter-spacing:.04em}
.case__result{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;border-top:1px solid var(--sumi)}
.case__result span{font:600 12px/1.6 var(--f-min);letter-spacing:.12em;color:var(--sumi)}
.case__result b{font:600 15px/1 var(--f-min);color:var(--sumi);letter-spacing:.06em}
.case__result em{font:400 clamp(44px,4vw,60px)/1 var(--f-en);font-style:normal;color:var(--kogane);margin:0 .08em}

/* ---------- ⑦ flow ---------- */
.flow{padding:var(--sec-pad) var(--gutter);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,6vw,100px);align-items:start}
.flow .sec-head{position:sticky;top:120px}
.flow__list{position:relative;display:grid;gap:clamp(36px,4vw,56px)}
.flow__list::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--rule)}
.flow__list li{position:relative;padding-left:56px}
.flow__knot{position:absolute;left:0;top:6px;width:23px;height:23px;border-radius:50%;background:var(--washi);border:1px solid var(--sumi)}
.flow__knot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--kogane);transform:scale(0);transition:transform .6s var(--ease)}
.flow__list li.is-on .flow__knot::after{transform:scale(1)}
.flow__list h3{font:800 clamp(19px,1.7vw,23px)/1.5 var(--f-min);color:var(--sumi);letter-spacing:.1em;margin-bottom:6px}
.flow__list p{font-size:15px}

/* ---------- ⑧ 顔ぶれ（掛け軸） ---------- */
.profile{padding:var(--sec-pad) var(--gutter)}
.kakejiku-row{display:flex;justify-content:center;gap:clamp(28px,4vw,72px);align-items:flex-start}
.kakejiku{position:relative;flex:0 1 560px;display:flex;flex-direction:column;align-items:center;padding-top:34px}
.kakejiku__hang{position:absolute;top:0;left:50%;width:110px;height:34px;transform:translateX(-50%);
  background:linear-gradient(to bottom right,transparent calc(50% - 1px),#6b5843 calc(50% - 1px),#6b5843 calc(50% + 1px),transparent calc(50% + 1px)) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent calc(50% - 1px),#6b5843 calc(50% - 1px),#6b5843 calc(50% + 1px),transparent calc(50% + 1px)) right/50% 100% no-repeat}
.kakejiku__hang::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#3b2f22}
.kakejiku__mount{width:100%;padding:44px 22px 52px;background:
  linear-gradient(90deg,rgba(0,0,0,.18),transparent 6%,transparent 94%,rgba(0,0,0,.18)),
  repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
  linear-gradient(#5d4b37,#4b3c2b);
  border-top:10px solid #2f261c;box-shadow:0 40px 70px -40px rgba(27,26,23,.6);clip-path:inset(0 0 100% 0)}
.kakejiku__paper{background:var(--gofun);padding:clamp(22px,2.6vw,36px);box-shadow:inset 0 0 0 1px rgba(169,138,85,.5),inset 0 0 0 6px var(--gofun),inset 0 0 0 7px rgba(169,138,85,.35)}
.kakejiku__rod{position:relative;width:calc(100% + 34px);height:16px;margin-top:-2px;border-radius:8px;background:linear-gradient(#5a4632,#2a2018 60%,#4a3a2a)}
.kakejiku__rod::before,.kakejiku__rod::after{content:"";position:absolute;top:-3px;width:22px;height:22px;border-radius:5px;background:linear-gradient(#c9a24a,#8a6a2a)}
.kakejiku__rod::before{left:-6px}
.kakejiku__rod::after{right:-6px}
.kakejiku__vis{position:relative;aspect-ratio:4/5;overflow:hidden;margin-bottom:26px;mix-blend-mode:multiply}
.kakejiku__vis img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.kakejiku__vis--sho img{object-fit:contain;object-position:100% 0;padding:4% 3% 44% 36%}
.kakejiku__msg{position:absolute;left:3%;bottom:4%;padding:16px 10px;background:radial-gradient(closest-side,rgba(248,246,241,.9),rgba(248,246,241,0))}
.vtext{writing-mode:vertical-rl;font:600 clamp(17px,1.6vw,23px)/1.9 var(--f-min);letter-spacing:.2em;color:var(--sumi)}
.vtext .vline{white-space:nowrap}
.vtext .vline:nth-child(2){padding-top:1.4em}
.vtext .vline:nth-child(3){padding-top:2.8em}
.vtext .vline:nth-child(4){padding-top:4.2em}
/* 代表・事業責任者で書体と色を揃える */
.member__role{font:600 13px/1 var(--f-min);letter-spacing:.4em;color:var(--kogane)}
.member__name{font:400 clamp(34px,3.6vw,54px)/1.2 var(--f-sho);letter-spacing:.16em;color:var(--sumi);margin:12px 0 6px}
.member__kana{font:500 12px/1 var(--f-got);letter-spacing:.4em;color:var(--nibi);margin-bottom:18px}
.member__title{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.member__title span{font:600 12px/1 var(--f-min);letter-spacing:.12em;padding:9px 14px;background:var(--sumi);color:var(--gofun)}
.member__title span+span{background:transparent;color:var(--sumi);box-shadow:inset 0 0 0 1px var(--sumi)}
.profile__career{display:grid;gap:16px}
.profile__career li{display:grid;grid-template-columns:52px 1fr;gap:14px;font-size:14px;line-height:1.85;padding-top:16px;border-top:1px solid var(--rule)}
.profile__career span{font:600 13px/1.9 var(--f-min);letter-spacing:.2em;color:var(--kogane)}
.profile__career strong{font-weight:700;color:var(--sumi);background:linear-gradient(transparent 62%,rgba(246,190,44,.45) 62%)}
.profile__origin{max-width:760px;margin:clamp(48px,6vw,88px) auto 0;text-align:center;font:500 16px/2.1 var(--f-min);color:var(--sumi);word-break:auto-phrase}

/* ---------- ⑨ price ---------- */
.price{padding:var(--sec-pad) var(--gutter);background:var(--gofun)}
.price__table{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sumi);border-bottom:1px solid var(--sumi)}
.price__row{padding:clamp(28px,3.4vw,52px);display:grid;gap:14px;align-content:start}
.price__row+.price__row{border-left:1px solid var(--rule)}
.price__row h3{font:600 15px var(--f-min);letter-spacing:.2em;color:var(--nibi)}
.price__num{font:600 18px/1 var(--f-min);color:var(--sumi);letter-spacing:.06em}
.price__num b{font:400 clamp(56px,6vw,88px)/1 var(--f-en);margin:0 .08em;color:var(--sumi)}
.price__row--main .price__num b{color:var(--kogane)}
.price__row p:last-child{font-size:14px}

/* ---------- ⑩ faq ---------- */
.faq{padding:var(--sec-pad) var(--gutter);display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(40px,6vw,100px)}
.faq__list details{border-top:1px solid var(--rule)}
.faq__list details:last-child{border-bottom:1px solid var(--rule)}
.faq__list summary{list-style:none;cursor:pointer;padding:26px 48px 26px 0;position:relative;font:600 clamp(16px,1.3vw,18px)/1.7 var(--f-min);color:var(--sumi);letter-spacing:.06em}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after,.faq__list summary::before{content:"";position:absolute;right:8px;top:50%;width:16px;height:1px;background:var(--sumi);transition:transform .5s var(--ease)}
.faq__list summary::before{transform:rotate(90deg)}
.faq__list details[open] summary::before{transform:rotate(0)}
.faq__list details p{padding:0 48px 28px 0;font-size:15px}

/* ---------- ⑪ contact ---------- */
.contact{padding:var(--sec-pad) var(--gutter);display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,6vw,110px);overflow:hidden}
.contact__head,.form{position:relative}
.contact__title{font:800 clamp(30px,3.8vw,56px)/1.45 var(--f-min);word-break:auto-phrase;color:var(--gofun);letter-spacing:.08em;margin:18px 0 26px}
.contact__head>p:last-child{font-size:15px;max-width:420px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.form__field{display:grid;gap:8px;font-size:13px;letter-spacing:.12em;color:rgba(248,246,241,.7);border:0;padding:0;margin:0}
.form__field em{font-style:normal;color:var(--yamabuki);margin-left:8px;font-size:11px}
.form__field input,.form__field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(248,246,241,.28);padding:10px 2px;color:var(--gofun);font:400 16px var(--f-got);transition:border-color .4s}
.form__field input:focus,.form__field textarea:focus{outline:0;border-color:var(--kogane)}
.form__field--wide,.form__checks,.form__submit{grid-column:1/-1}
.form__checks{display:flex;flex-wrap:wrap;gap:10px}
.form__checks legend{margin-bottom:12px}
.form__checks label{cursor:pointer}
.form__checks input{position:absolute;opacity:0}
.form__checks span{display:inline-block;padding:8px 16px;border:1px solid rgba(248,246,241,.25);font-size:13px;transition:.3s}
.form__checks input:checked+span{background:var(--kogane);border-color:var(--kogane);color:var(--sumi)}
.form__checks input:focus-visible+span{outline:2px solid var(--kogane);outline-offset:3px}
.form__submit{position:relative;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:12px}
.form__msg{font-size:14px;color:var(--yamabuki)}
.contact__info{margin-top:34px;display:grid;gap:14px}
.contact__info div{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:baseline;padding-top:14px;border-top:1px solid rgba(248,246,241,.14)}
.contact__info dt{font:600 13px var(--f-min);letter-spacing:.2em;color:var(--kogane)}
.contact__info dd{margin:0}
.contact__info a{color:var(--gofun);text-decoration:none;font:500 clamp(17px,1.6vw,21px)/1.4 var(--f-en);letter-spacing:.06em;word-break:break-all}
.contact__info a:hover{color:var(--yamabuki)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__agree{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(248,246,241,.8);cursor:pointer}
.form__agree input{width:18px;height:18px;accent-color:var(--kogane)}
.form__agree a{color:var(--yamabuki)}
.form__agree em{font-style:normal;color:var(--yamabuki);margin-left:8px;font-size:11px}
.btn[disabled]{opacity:.6;pointer-events:none}
/* 送信完了ポップアップ */
.thanks{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.thanks[hidden]{display:none}
.thanks__veil{position:absolute;inset:0;background:rgba(27,26,23,.62);backdrop-filter:blur(6px)}
.thanks__card{position:relative;width:min(520px,100%);padding:56px clamp(24px,5vw,52px) 40px;text-align:center;
  background:var(--gofun) url(../images/washi.jpg) center/700px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);border-top:3px solid var(--kogane)}
.thanks__hanko{position:absolute;right:26px;top:-34px;width:84px;height:84px;display:grid;place-items:center;border:3px solid var(--shu);border-radius:8px;
  background:var(--gofun);font:400 46px/1 var(--f-sho);color:var(--shu);transform:rotate(-8deg)}
.thanks__en{font:italic 400 17px var(--f-en);letter-spacing:.12em;color:var(--kogane)}
.thanks__title{font:800 clamp(26px,3vw,34px)/1.4 var(--f-min);color:var(--sumi);letter-spacing:.1em;margin:8px 0 18px}
.thanks__lead{font:500 15px/2 var(--f-min);color:var(--sumi)}
.thanks__note{margin-top:18px;font-size:13px;color:var(--nibi)}
.thanks__note a{color:var(--sumi)}
.thanks__close{margin-top:28px}

/* ---------- footer ---------- */
.ft{background:var(--sumi);color:rgba(248,246,241,.6);padding:72px var(--gutter) 40px;display:flex;justify-content:space-between;align-items:end;border-top:1px solid rgba(233,169,28,.25)}
.ft__brand{display:grid;gap:10px}
.ft__brand p{font:400 26px/1 var(--f-sho);color:var(--gofun);letter-spacing:.14em}
.ft__brand small{letter-spacing:.4em}
.ft__copy{font:italic 400 14px var(--f-en);letter-spacing:.14em}
.ft__meta{display:grid;gap:10px;justify-items:end;text-align:right}
.ft__contact,.ft__links{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end}
.ft__meta a{color:rgba(248,246,241,.75);text-decoration:none;font-size:13px;letter-spacing:.08em}
.ft__meta a:hover{color:var(--yamabuki)}

/* ---------- reveal helpers ---------- */
.rv-h,.rv-p{will-change:transform,opacity}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1024px){
  .hd__nav{display:none}
  .promise,.careone,.flow,.faq,.contact{grid-template-columns:minmax(0,1fr)}
  .promise__sho{width:60%;justify-self:center}
  .flow .sec-head{position:static}
  .makimono__track{display:flex;width:max-content}
  .case{flex:0 0 min(78vw,420px);border-left:1px solid var(--rule)}
  .price__table{grid-template-columns:1fr}
  .price__row+.price__row{border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:767px){
  body{font-size:15px}
  .hd{gap:12px;padding:12px 16px}
  .hd__logo{width:42px}
  .hd__name{font-size:18px}
  .hd__cta{margin-left:auto;padding:10px 14px;font-size:12px;letter-spacing:.08em}
  .hero{padding:84px 16px 48px;display:block}
  /* スマホ：絵の主役（画像の右半分）を画面いっぱいに */
  .hero__scenes{width:205vw;right:-14vw;top:52px;opacity:1}
  /* スマホ：福祉×AI と 松竹梅 は、絵の左下（塩梅の書の左）にまとめる */
  .hero__eyebrow{position:absolute;left:0;top:calc(18px + 92vw - 60px);z-index:2;gap:10px;letter-spacing:.3em}
  .hero__eyebrow em{display:none}
  .hero__season{left:16px;right:auto;bottom:auto;top:calc(84px + 18px + 92vw - 22px);gap:6px}
  .hero__eyebrow::before,.hero__season::before{content:"";position:absolute;inset:-14px -22px -12px -16px;z-index:-1;
    background:radial-gradient(closest-side,rgba(239,235,226,.95),rgba(239,235,226,.75) 55%,rgba(239,235,226,0))}
  .hero__phrase{display:none}
  .hero__dots{gap:16px}
  .hero__grid{min-height:0;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(92vw,auto) auto;row-gap:18px;column-gap:6px}
  .hero__catch{font-size:clamp(26px,7.6vw,33px);grid-column:1;grid-row:2;margin:-6px 0 0 -16px;padding:18px 16px 22px;align-self:start;background:radial-gradient(closest-side,rgba(239,235,226,.92),rgba(239,235,226,.7) 60%,rgba(239,235,226,0));text-shadow:0 0 10px var(--washi),0 0 18px var(--washi),0 0 28px var(--washi)}
  .hero__sho{grid-column:2;grid-row:2;align-self:end;justify-self:end;margin:0 0 -4px 0;width:58vw;max-width:100%}
  .hero__sho img{height:auto;width:100%;max-width:none}
  .hero__lead{grid-column:1/-1;grid-row:3;justify-self:stretch;font-size:14px;padding:22px 20px 24px}
  .hero__scroll{display:none}
  .worries,.promise,.cases,.flow,.profile,.price,.faq,.contact,.careone{padding-left:16px;padding-right:16px}
  .pillars__intro{padding:0 16px}
  .tanzaku{overflow:hidden;margin:0 -16px;padding:16px 0 40px}
  .tanzaku__track{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:14px;width:max-content;padding:0 7px}
  .tanzaku__item{flex:0 0 auto}
  .tanzaku__item{min-height:300px;padding:26px 14px;font-size:16px}
  .tanzaku__item:nth-child(odd){transform:translateY(20px)}
  .byobu{height:100svh;padding-bottom:0}
  .byobu__track{padding:0 16px}
  .panel{flex:0 0 78vw;min-height:min(72svh,560px);padding:24px 22px}
  .panel__sho{width:62%}
  .kakejiku-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 10px;gap:18px;scrollbar-width:none}
  .kakejiku-row::-webkit-scrollbar{display:none}
  .kakejiku{flex:0 0 84vw;scroll-snap-align:center}
  .kakejiku__mount{padding:30px 12px 36px}
  .careone__spec div{grid-template-columns:1fr;gap:4px}
  .ui{font-size:10px}
  .ui__head,.ui__body{grid-template-columns:38px repeat(3,1fr);gap:5px;padding:6px 8px}
  .form{grid-template-columns:1fr}
  .ft__meta{justify-items:start;text-align:left}
  .ft__contact,.ft__links{justify-content:flex-start}
  .ft{flex-direction:column;align-items:start;gap:24px}
  .makimono__jiku{width:12px;flex-basis:12px}
  .opening__mark{width:62vw}
  .opening__stage{gap:12px}
  .promise__sho{width:48%;justify-self:start}
  .promise__sho img{width:100%}
  .inkline path{stroke-width:1.1;opacity:.6}
  .hero__sho img{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__sho img{clip-path:none!important}
  .kakejiku__mount{clip-path:none!important}
  .makimono__paper{clip-path:none!important}
  .opening{display:none}
}

.careone .sec-head__ja{font-size:clamp(26px,3vw,44px)}

/* スワイプの案内（スマホのみ表示） */
.swipe-hint{display:none}
@media (max-width:1024px){
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;font:500 12px/1 var(--f-min);letter-spacing:.3em;color:var(--nibi)}
  .swipe-hint i{display:block;width:44px;height:1px;background:var(--rule);position:relative;overflow:hidden}
  .swipe-hint i::after{content:"";position:absolute;inset:0;background:var(--kogane);animation:swipe 2.2s var(--ease-io) infinite}
}
@keyframes swipe{0%{transform:translateX(100%)}60%,100%{transform:translateX(-100%)}}

/* ---------- 実績(契約継続率) ---------- */
.hero__proof{display:flex;align-items:baseline;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--rule)}
.hero__proof span{font:600 13px/1.4 var(--f-min);letter-spacing:.14em;color:var(--sumi)}
.hero__proof b{font:500 40px/1 var(--f-en);color:var(--kogane);letter-spacing:.02em}
.hero__proof small{font-size:.5em;margin-left:2px}
.cases__stat{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(24px,4vw,56px);margin-top:clamp(24px,3.4vw,40px);padding:clamp(20px,2.6vw,32px) 0;border-top:1px solid var(--sumi);border-bottom:1px solid var(--rule)}
.cases__stat-num{display:flex;align-items:baseline;gap:14px}
.cases__stat-num span{font:700 clamp(15px,1.3vw,18px)/1.4 var(--f-min);letter-spacing:.16em;color:var(--sumi)}
.cases__stat-num b{font:500 clamp(56px,7vw,96px)/1 var(--f-en);color:var(--kogane)}
.cases__stat-num small{font-size:.45em;margin-left:4px}
.cases__stat-text{flex:1 1 300px;max-width:520px;font:500 15px/1.9 var(--f-min);color:var(--sumi)}
.cases__stat-text small{display:block;font-size:12px;color:var(--nibi);margin-top:4px}

/* ---------- CareOne: スマホ見出し + 場面切り替え ---------- */
.careone__mobile{margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--f-min)}
.careone__mobile span{font-size:clamp(15px,1.3vw,18px);font-weight:600;color:rgba(248,246,241,.8);letter-spacing:.1em}
.careone__mobile b{font-size:clamp(22px,2.2vw,32px);font-weight:800;color:var(--yamabuki);letter-spacing:.08em}
.ui__stage{position:relative;min-height:268px}
.ui__scene{transition:opacity .5s ease}
.ui__scene:not([data-scene="assign"]){position:absolute;inset:0;opacity:0;pointer-events:none;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.ui__scene[data-scene="assign"]:not(.is-on){opacity:0}
.ui__scene.is-on{opacity:1}
.careone__frame figcaption{position:relative;min-height:1.6em}
.careone__frame .cap{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s}
.careone__frame .cap.is-on{position:relative;opacity:1}
/* シフト */
.sh__top{display:flex;justify-content:space-between;align-items:center;color:#1F4A45;font-weight:600}
.sh__btn{font-style:normal;font-size:.95em;background:#1F4A45;color:#F5F2EA;padding:5px 12px;border-radius:14px;transition:transform .2s}
.sh__btn.is-press{transform:scale(.92);background:var(--kogane);color:#2A3B36}
.sh__grid{display:grid;grid-template-columns:44px repeat(6,1fr);gap:5px;align-items:center;flex:1}
.sh__grid>span{color:#8C918C;text-align:center}
.sh__grid>span.sh__name{text-align:left;color:#2A3B36}
.sh__grid i{font-style:normal;text-align:center;min-height:30px;display:grid;place-items:center;border-radius:4px;background:#F1EEE6;color:transparent;font-weight:700}
.sh__grid i.sh__req{color:var(--shu);font-size:.8em;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--shu);background:#FBF1EE}
.sh__grid i.is-fill{color:#2A3B36;background:#F3E6CF}
.sh__grid i.is-fill[data-v="夜"],.sh__grid i.is-fill[data-v="明"]{background:#1F4A45;color:#F5F2EA}
.sh__grid i.is-fill[data-v="休"]{background:#E9E5DC;color:#8C918C}
.sh__done{font-size:.95em;color:#1F4A45;opacity:0}
/* タイムカード */
.tc{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;flex:1}
.tc__phone{height:218px;aspect-ratio:9/16;border-radius:18px;background:#1F4A45;color:#F5F2EA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 0 0 5px #2E2A24, 0 18px 30px -12px rgba(0,0,0,.5)}
.tc__who{font-size:.95em;opacity:.8}
.tc__time{font:500 clamp(26px,2.6vw,34px)/1 var(--f-en);letter-spacing:.04em}
.tc__btn{font-style:normal;margin-top:6px;width:64%;text-align:center;padding:9px 0;border-radius:20px;background:var(--kogane);color:#2A3B36;font-weight:700;transition:transform .2s}
.tc__btn.is-press{transform:scale(.9)}
.tc__ok{font-size:.85em;color:var(--yamabuki);opacity:0}
.tc__log{display:grid;gap:8px}
.tc__log li{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:9px 12px;background:#F1EEE6;border-radius:4px}
.tc__log b{color:#1F4A45}
.tc__log time{color:#8C918C;font-variant-numeric:tabular-nums}
.tc__log .tc__new{opacity:0;background:#F3E6CF}
/* 人件費 */
.py{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.py th{font-weight:500;color:#8C918C;text-align:left;padding:6px 6px;border-bottom:1px solid #E7E3DA}
.py td{padding:9px 6px;border-bottom:1px solid #EFEBE2}
.py td:last-child,.py th:last-child{text-align:right}
.py b{font-weight:700;color:#2A3B36}
.py tfoot td{border-bottom:0;padding-top:12px;font-weight:700;color:#1F4A45}
.py tfoot b{font-size:1.5em;color:#1F4A45}
@media (max-width:767px){
  .sh__grid{grid-template-columns:32px repeat(6,1fr);gap:3px}
  .sh__grid i{min-height:24px}
  .tc{gap:10px}
  .tc__phone{height:190px;border-radius:14px}
  .ui__stage{min-height:236px}
  .tc__log li{padding:7px 8px;gap:6px}
}

/* ---------- トップ：得意分野の一言 ---------- */
.hero__strong{font:800 clamp(18px,1.6vw,22px)/1.6 var(--f-min);letter-spacing:.08em;color:var(--sumi)}

/* ---------- 顔ぶれ：松の絵と文字を重ねない / スマホの切り替えボタン ---------- */
.kakejiku__vis--pine img{object-fit:contain;object-position:100% 0;padding:0 0 26% 38%}
.kakejiku-nav{display:none}
@media (max-width:767px){
  .kakejiku-nav{display:flex;justify-content:center;gap:10px;margin-top:20px}
  .kakejiku-nav button{font:600 13px/1 var(--f-min);letter-spacing:.12em;padding:12px 16px;border:1px solid var(--rule);background:transparent;color:var(--nibi);border-radius:22px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
  .kakejiku-nav button.is-on{background:var(--sumi);border-color:var(--sumi);color:var(--gofun)}
  .swipe-hint{margin-top:12px}
  .kakejiku__vis--pine img{padding:0 0 46% 61%}
}
/* ---------- 料金：CareOne AI ---------- */
.price__badge{justify-self:start;font:700 13px/1 var(--f-min);letter-spacing:.1em;color:#fff;background:var(--shu);padding:7px 12px}
.price__list{display:grid;gap:8px;margin-top:4px}
.price__list li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-top:8px;border-top:1px solid var(--rule)}
.price__list span{color:var(--nibi)}
.price__list b{font-weight:700;color:var(--sumi)}

/* ---------- トップ(PC・タブレット)：絵を画面いっぱいに敷き、文字は和紙色のにじみで読みやすく ---------- */
@media (min-width:768px){
  .hero__scenes{inset:-2% 0 -18% 0;width:auto;aspect-ratio:auto;right:0;top:0;opacity:1}
  .sc-img{object-position:62% 40%}
  .hero__catch{position:relative;z-index:2;padding:22px 26px 28px;margin-left:-26px;
    background:radial-gradient(closest-side,rgba(239,235,226,.9),rgba(239,235,226,.68) 62%,rgba(239,235,226,0));
    text-shadow:0 0 10px var(--washi),0 0 20px var(--washi),0 0 32px var(--washi)}
  .hero__eyebrow,.hero__season{position:relative;z-index:2}
  .hero__eyebrow{justify-self:start;width:max-content}
  .hd__nav a,.hd__name{text-shadow:0 0 8px var(--washi),0 0 16px var(--washi),0 0 24px var(--washi)}
  .hd.is-dark .hd__nav a,.hd.is-dark .hd__name{text-shadow:none}
  .hero__season{position:absolute}
  .hero__eyebrow::before,.hero__season::before{content:"";position:absolute;inset:-16px -28px -14px -20px;z-index:-1;
    background:radial-gradient(closest-side,rgba(239,235,226,.95),rgba(239,235,226,.75) 55%,rgba(239,235,226,0))}
  .hero__phrase-t{text-shadow:0 0 8px var(--washi),0 0 16px var(--washi)}
}

.price__tax{font-size:13px;color:var(--nibi);margin-left:4px;letter-spacing:.04em}

/* ---------- 筆文字「塩梅」の読みがな(筆文字の乗算の外に置いて、くっきり見せる) ---------- */
.hero__kana{grid-column:2;grid-row:2;align-self:start;justify-self:center;position:relative;z-index:2;
  margin:calc(2vh + min(46svh,520px) * .8) 0 0 -10vw;white-space:nowrap;
  font:700 clamp(15px,1.4vw,20px)/1 var(--f-min);letter-spacing:.55em;padding:12px 26px 12px calc(26px + .55em);color:var(--sumi);
  background:radial-gradient(closest-side,rgba(239,235,226,.96),rgba(239,235,226,.85) 60%,rgba(239,235,226,0));text-shadow:0 0 6px var(--washi),0 0 12px var(--washi)}
@media (max-width:767px){
  .hero__kana{align-self:end;justify-self:end;width:58vw;text-align:center;margin:0 0 -6px 0;padding:8px 0 8px .55em;font-size:14px}
}

/* ---------- 問い合わせ：受付時間 ---------- */
.contact__hours{font-size:14px;line-height:1.9;color:rgba(248,246,241,.82)}
.contact__hours b{color:var(--yamabuki);font-weight:700}
.ft__contact span{font-size:12px;color:var(--nibi)}


/* ---------- 仕組みと制作で、支える(CareOne AI＋その他の支援) ---------- */
.careone__intro{grid-column:1/-1;margin-bottom:clamp(8px,2vw,24px)}
.careone__label{display:inline-block;justify-self:start;width:max-content;font:700 12px/1 var(--f-min);letter-spacing:.2em;color:var(--sumi);background:var(--kogane);padding:6px 10px;margin-bottom:14px}
.careone__more{grid-column:1/-1;margin-top:clamp(40px,6vw,88px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid rgba(233,169,28,.35)}
.careone__more-title{font:700 clamp(18px,1.6vw,22px)/1.4 var(--f-min);letter-spacing:.16em;color:var(--gofun);margin-bottom:20px}
.svc{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.svc__item{padding:20px 18px;border:1px solid rgba(248,246,241,.16);background:rgba(248,246,241,.04);display:flex;flex-direction:column;gap:10px}
.svc__txt h4{font:700 16px/1.5 var(--f-min);color:var(--yamabuki);letter-spacing:.06em}
.svc__txt p{font-size:13px;line-height:1.85;color:rgba(248,246,241,.82)}
.svc__proof{margin-top:auto;padding-top:10px;border-top:1px dashed rgba(248,246,241,.2);font-size:12px!important}
.svc__proof small{display:block;margin-top:4px;font-size:11px;color:rgba(248,246,241,.55)}
.careone__more-foot{margin-top:20px;font-size:14px;line-height:1.9;color:rgba(248,246,241,.85)}
.careone__more-foot b{color:var(--yamabuki);font-weight:700}
.careone__more-foot span{display:block;font-size:13px;color:rgba(248,246,241,.6)}
@media (max-width:1100px){.svc{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.svc{grid-template-columns:1fr}}

/* ---------- その他の支援：2×2の大きなカード＋CareOne AIと同じ「本物っぽい画面」の動き(6秒でくり返す) ---------- */
.svc{grid-template-columns:repeat(2,1fr)!important;gap:18px}
.svc__item{display:grid!important;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:20px;padding:18px 18px 22px}
.svc__art{position:relative;height:260px;border-radius:6px;background:linear-gradient(145deg,#3A332A,#211E19);box-shadow:inset 0 0 0 1px rgba(233,169,28,.3);overflow:hidden;display:grid;place-items:center;padding:14px}
.svc:not(.is-play) .svc__art *{animation-play-state:paused!important}
.svc__txt{display:flex;flex-direction:column;gap:10px}
.svc__txt h4{font:700 18px/1.4 var(--f-min);color:var(--yamabuki);letter-spacing:.06em}
.svc__catch{font:700 15px/1.6 var(--f-min)!important;color:var(--gofun)!important}
.svc__pts{display:grid;gap:7px}
.svc__pts li{position:relative;padding-left:16px;font-size:13px;line-height:1.75;color:rgba(248,246,241,.82)}
.svc__pts li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--kogane)}
.svc__proof{margin-top:auto}
.mk{position:relative;width:100%;max-width:420px;font-family:var(--f-got);color:#2A3B36}
@media (max-width:1100px){.svc{grid-template-columns:1fr!important}}
@media (max-width:767px){.svc__art{height:250px}.mk{transform:scale(.92)}}

/* 採用：見える求人票 → スマホに応募通知が届く */
.rec__card{width:58%;background:#FBFAF6;border-radius:4px;padding:10px 11px;display:grid;gap:6px;font-size:9.5px;line-height:1.5}
.rec__ttl{font:700 11.5px/1.3 var(--f-min);color:#1F4A45}
.rec__tags{display:flex;flex-wrap:wrap;gap:3px}
.rec__tags span{font-size:8.5px;padding:2px 5px;border-radius:8px;background:#F3E6CF;color:#5B4A2B}
.rec__sub{font-weight:700;color:#8C918C;font-size:8.5px;margin-top:2px}
.rec__flow{display:grid;gap:2px}
.rec__flow li{display:flex;gap:6px}
.rec__flow b{color:#1F4A45;min-width:28px}
.rec__voice{padding:5px 7px;background:#F1EEE6;border-radius:3px;font-weight:600}
.rec__voice small{display:block;font-weight:400;color:#8C918C;font-size:8px}
.rec__phone{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:36%;height:220px;overflow:hidden;padding:20px 7px 10px;border-radius:14px;background:#1F4A45;box-shadow:0 0 0 4px #2E2A24,0 16px 28px -12px rgba(0,0,0,.6);display:grid;gap:6px;align-content:start}
.rec__count{font-size:9px;color:rgba(245,242,234,.8);text-align:center;margin-bottom:2px}
.rec__count b{display:block;font:500 30px/1 var(--f-en);color:var(--yamabuki)}
.rec__note{background:#FBFAF6;border-radius:6px;padding:5px 6px 5px 18px;position:relative;font-size:8.5px;font-weight:700;line-height:1.35;animation:recNote 6s cubic-bezier(.16,1,.3,1) infinite both}
.rec__note small{display:block;font-weight:400;color:#8C918C;font-size:7.5px}
.rec__note i{position:absolute;left:6px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--shu)}
.rec__note.n2{animation-delay:.9s}.rec__note.n3{animation-delay:1.8s}
@keyframes recNote{0%,6%{opacity:0;transform:translateY(-14px) scale(.96)}14%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* SNS：縦動画の数字が伸び、フォロワーのグラフが上がる */
.sns{display:flex;align-items:center;gap:12px;justify-content:center}
.sns__ph{position:relative;width:118px;height:210px;border-radius:16px;background:#111;box-shadow:0 0 0 4px #2E2A24,0 16px 28px -12px rgba(0,0,0,.6);overflow:hidden;flex:none}
.sns__video{position:absolute;inset:0;background:linear-gradient(160deg,#2F5A52,#1F4A45 45%,#14302C);display:grid;place-items:center}
.sns__cap{font:800 15px/1.5 var(--f-min);color:#fff;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.4);margin-left:-14px}
.sns__cap b{color:var(--yamabuki);font-size:20px}
.sns__prog{position:absolute;left:8px;right:8px;bottom:8px;height:3px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.sns__prog i{display:block;height:100%;background:#fff;animation:snsProg 6s linear infinite both}
@keyframes snsProg{from{width:0}to{width:100%}}
.sns__side{position:absolute;right:5px;bottom:24px;display:grid;gap:8px;text-align:center;color:#fff;font-size:8px}
.sns__side span{display:block;font-size:14px;line-height:1}
.sns__side li:first-child span{color:#FF5A6E}
.sns__pop{position:absolute;right:10px;bottom:120px;color:#FF5A6E;font-size:13px;animation:snsPop 6s ease-out infinite both}
.sns__pop.p2{right:18px;animation-delay:1.6s;font-size:10px}.sns__pop.p3{right:6px;animation-delay:3.2s}
@keyframes snsPop{0%{opacity:0;transform:translateY(20px)}12%{opacity:1}45%,100%{opacity:0;transform:translateY(-70px)}}
.sns__stat{width:118px;background:#FBFAF6;border-radius:6px;padding:10px;font-size:9px;color:#8C918C}
.sns__num{font:500 26px/1 var(--f-en);color:#1F4A45;margin:2px 0 4px}
.sns__graph{width:100%;height:46px;overflow:visible}
.sns__graph polyline{fill:none;stroke:var(--shu);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;animation:snsLine 6s ease-in-out infinite both}
@keyframes snsLine{0%,5%{stroke-dashoffset:160}55%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.2}}
.sns__chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.sns__chips span{font-size:7.5px;padding:2px 5px;border-radius:8px;background:#EFEBE2;color:#5B4A2B}

/* HP：サイトが組み上がり、ボタンが押されて問い合わせが届く */
.web__win{width:92%;margin:0 auto;background:#FBFAF6;border-radius:5px;overflow:hidden;position:relative;box-shadow:0 16px 28px -12px rgba(0,0,0,.6)}
.web__bar{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#E7E3DA}
.web__bar i{width:6px;height:6px;border-radius:50%;background:#B9B2A3}
.web__bar span{margin-left:8px;flex:1;font-size:8px;color:#8C918C;background:#F6F3EC;border-radius:8px;padding:2px 8px}
.web__page{padding:8px;display:grid;gap:8px}
.web__hero{position:relative;height:104px;border-radius:3px;background:linear-gradient(120deg,rgba(239,235,226,.95) 30%,rgba(239,235,226,.3)),url(../images/pine-branch.jpg) right/cover;padding:12px;display:flex;flex-direction:column;justify-content:space-between;animation:webIn 6s ease-out infinite both}
.web__hero p{font:800 13px/1.5 var(--f-min);color:#1B1A17}
.web__btns{display:flex;gap:5px}
.web__btns i{font-style:normal;font-size:8px;font-weight:700;padding:4px 8px;border-radius:3px;border:1px solid #1F4A45;color:#1F4A45}
.web__btns i.is-main{background:var(--shu);border-color:var(--shu);color:#fff;animation:webBtn 6s infinite both}
.web__row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.web__row span{height:34px;border-radius:3px;background:#EFEBE2;animation:webIn 6s ease-out infinite both}
.web__row span:nth-child(1){animation-delay:.25s}.web__row span:nth-child(2){animation-delay:.45s}.web__row span:nth-child(3){animation-delay:.65s}
@keyframes webIn{0%,4%{opacity:0;transform:translateY(10px)}16%,92%{opacity:1;transform:none}100%{opacity:0}}
.web__cursor{position:absolute;width:0;height:0;border-left:7px solid #1B1A17;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:rotate(-30deg);left:20%;top:85%;animation:webCur 6s cubic-bezier(.65,0,.35,1) infinite both}
@keyframes webCur{0%,22%{left:20%;top:88%;opacity:0}28%{opacity:1}44%,50%{left:46%;top:73%;opacity:1}58%,100%{left:46%;top:73%;opacity:0}}
@keyframes webBtn{0%,46%{transform:none}48%{transform:scale(.88)}52%,100%{transform:none}}
.web__toast{position:absolute;left:50%;bottom:-6px;width:84%;transform:translateX(-50%);background:#1F4A45;color:#F5F2EA;border-radius:6px;padding:7px 10px 7px 30px;font-size:9.5px;font-weight:700;line-height:1.4;box-shadow:0 10px 20px -8px rgba(0,0,0,.6);animation:webToast 6s cubic-bezier(.16,1,.3,1) infinite both}
.web__toast i{position:absolute;left:9px;top:8px;font-style:normal;color:var(--yamabuki)}
.web__toast small{display:block;font-weight:400;opacity:.75;font-size:8px}
@keyframes webToast{0%,52%{opacity:0;transform:translate(-50%,14px)}60%,92%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}

/* アプリ：走り書きのメモを、AIが記録文に整える → 完了 */
.app{display:grid;place-items:center}
.app__ph{width:178px;border-radius:16px;background:#FBFAF6;box-shadow:0 0 0 4px #2E2A24,0 16px 28px -12px rgba(0,0,0,.6);padding:12px 10px 9px;display:grid;gap:5px;align-content:start;font-size:9px}
.app__head{font:700 11px/1.3 var(--f-min);color:#1F4A45}
.app__memo{background:#F1EEE6;border-radius:5px;padding:7px;display:grid;gap:5px}
.app__in{color:#8C918C;font-size:8.5px}
.app__ai span{display:inline-block;font-size:7.5px;font-weight:700;color:#fff;background:var(--kogane);padding:1px 5px;border-radius:6px;margin-bottom:3px}
.app__type{display:block;font-weight:600;line-height:1.55;color:#1B1A17;overflow:hidden;white-space:normal;clip-path:inset(0 100% 0 0);animation:appType 6s steps(30,end) infinite both}
@keyframes appType{0%,8%{clip-path:inset(0 100% 0 0)}45%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:.3}}
.app__list{display:grid;gap:4px}
.app__list li{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:4px;background:#F1EEE6;font-weight:600}
.app__list i{width:11px;height:11px;border-radius:50%;border:1.5px solid #B9B2A3;position:relative;animation:appChk 6s infinite both}
.app__list li:nth-child(2) i{animation-delay:.35s}.app__list li:nth-child(3) i{animation-delay:.7s}
@keyframes appChk{0%,50%{background:transparent;border-color:#B9B2A3}56%,92%{background:#1F4A45;border-color:#1F4A45;box-shadow:inset 0 0 0 2px #FBFAF6}100%{background:transparent}}
.app__badge{position:absolute;right:8%;top:6%;font-size:9px;font-weight:700;color:#2A3B36;background:var(--kogane);padding:5px 9px;border-radius:12px;animation:appBadge 6s cubic-bezier(.16,1,.3,1) infinite both}
@keyframes appBadge{0%,62%{opacity:0;transform:scale(.4)}70%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* ---------- その他の支援：カードごとに画面の色合いを変える(同じアプリに見えないように) ---------- */
/* 採用＝藍色の求人サイト風 */
.svc__item:nth-child(1) .svc__art{background:linear-gradient(145deg,#2A3350,#151A2B);box-shadow:inset 0 0 0 1px rgba(140,160,220,.3)}
.rec__ttl{color:#2C3E6B}
.rec__tags span{background:#E3E8F4;color:#2C3E6B}
.rec__flow b{color:#2C3E6B}
.rec__voice{background:#EEF1F8}
.rec__phone{background:#2C3E6B}
.rec__count b{color:#FFD27A}
/* SNS＝ピンク〜紫のSNS風 */
.svc__item:nth-child(2) .svc__art{background:linear-gradient(145deg,#3A2140,#160E1B);box-shadow:inset 0 0 0 1px rgba(225,48,108,.3)}
.sns__video{background:linear-gradient(160deg,#FF5E8A,#B23AEE 55%,#5B2BD6)}
.sns__cap b{color:#FFE14D}
.sns__side li:first-child span,.sns__pop{color:#FF4D7A}
.sns__num{color:#B23AEE}
.sns__graph polyline{stroke:#E1306C}
.sns__chips span{background:#F6E7F3;color:#8A2C80}
/* HP＝このサイトと同じ墨・金・朱 */
.svc__item:nth-child(3) .svc__art{background:linear-gradient(145deg,#4A4237,#221E19);box-shadow:inset 0 0 0 1px rgba(233,169,28,.35)}
.web__btns i{border-color:#1B1A17;color:#1B1A17}
.web__toast{background:#1B1A17;box-shadow:0 10px 20px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(233,169,28,.4)}
/* アプリ＝CareOne AIと同じ緑の系統 */
.svc__item:nth-child(4) .svc__art{background:linear-gradient(145deg,#22403B,#0F1D1B);box-shadow:inset 0 0 0 1px rgba(120,190,170,.3)}

/* ---------- スマホ：支援事例は横に流さず、縦に並べて最初から見せる ---------- */
@media (max-width:767px){
  .makimono__paper{clip-path:none!important}
  .makimono__track{display:grid!important;grid-template-columns:1fr;width:auto!important;transform:none!important}
  .case{flex:none;border-left:0!important}
  .case+.case{border-top:1px solid var(--rule)}
  .case.is-clone{display:none}
}