/* Layout: 一枚のレコードのように — 3つの速さで流れる写真のリール → 言葉が色づくステートメント → 重なる理念カード → 横に流れる3テンポ → 叩いて鳴らすセッションパッド → 窓口 */
:root{
  --bg:#F8F7F3; --white:#FFFFFF; --mist:#E3ECF0;
  --navy:#1D4E6B; --navy-d:#123449; --ink:#14202A;
  --sun:#F4BA3A; --sun-l:#FBE3A2;
  --soft:#5B6B75; --line:#D9E1E4;
  --ok:#3E7F5C; --bad:#B4483B;
  --f-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --f-it:"Instrument Serif","Times New Roman",serif;
  --f-c:"Barlow Condensed","Arial Narrow",sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px));
  --k:1;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-jp);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--navy-d)}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance;line-height:1.3}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.band{padding-left:var(--gl);padding-right:var(--gr)}
.band>.inner{max-width:1200px;margin:0 auto}
.it{font-family:var(--f-it);font-style:italic;font-weight:400}
.eyebrow{font-family:var(--f-c);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.82rem;color:var(--navy)}
.h2{font-size:clamp(1.9rem,4.6vw,3.3rem);font-weight:900;letter-spacing:.01em;color:var(--navy-d)}
.lede{color:var(--soft);max-width:34em}
.temp{display:inline-block;font-size:.66rem;font-weight:700;background:var(--mist);color:var(--navy);border-radius:4px;padding:0 6px;margin-left:6px;vertical-align:middle;line-height:1.8}
.note{font-size:.8rem;color:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .15s, box-shadow .15s, background .2s;line-height:1.3}
.btn-sun{background:var(--sun);color:var(--ink);padding:13px 26px;box-shadow:0 3px 0 var(--navy-d)}
.btn-sun:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--navy-d)}
.btn-sun:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy-d)}
.btn-ghost{background:transparent;border:2px solid currentColor;padding:11px 22px}
.btn-navy{background:var(--navy);color:var(--white);padding:12px 24px}
.btn-navy:hover{background:var(--navy-d)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;color:var(--white);background:var(--navy-d);transition:background .3s,color .3s}
.top.light{background:color-mix(in srgb,var(--bg) 92%,transparent);color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:62px}
.logo{font-family:var(--f-c);font-weight:800;font-size:1.75rem;line-height:1;text-decoration:none;display:flex;align-items:center;gap:8px;height:100%}
.logo small{font-size:.6rem;letter-spacing:.3em;font-weight:600}
.logo img{height:44px;display:block;width:auto;filter:invert(1);transition:filter .3s}
.top.light .logo img{filter:none}
.nav{display:flex;gap:22px;margin-left:auto;font-size:.88rem;font-weight:500}
.nav a{text-decoration:none;opacity:.8}.nav a:hover{opacity:1}
.top .btn-sun{padding:8px 18px;font-size:.88rem;box-shadow:none}
@media (max-width:900px){.nav{display:none}.top .btn-sun{margin-left:auto}}

/* hero */
.hero{position:relative;background:var(--navy-d);color:var(--white);overflow:hidden}
.reels{position:absolute;inset:0 0 0 auto;width:min(62%,760px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 12px;-webkit-mask:linear-gradient(90deg,transparent,#000 22%);mask:linear-gradient(90deg,transparent,#000 22%)}
.reel{position:relative;overflow:hidden}
.reel .strip{display:grid;gap:12px;will-change:transform}
.reel img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;opacity:.9}
.reel .lab{position:absolute;left:8px;top:10px;z-index:2;font-family:var(--f-c);font-weight:800;font-size:.95rem;background:var(--sun);color:var(--ink);border-radius:999px;padding:0 10px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy-d) 30%,color-mix(in srgb,var(--navy-d) 40%,transparent) 62%,transparent);pointer-events:none}
.hero-in{position:relative;z-index:3;padding-block:70px 56px;display:grid;gap:26px;max-width:1200px;margin:0 auto}
.mega{font-weight:900;font-size:clamp(3.4rem,10.5vw,9rem);line-height:1;letter-spacing:-.03em}
.mega .ln{display:block;white-space:nowrap;overflow:hidden;padding-bottom:.06em}
.mega .c{display:inline-block;animation:rise .9s cubic-bezier(.2,1.2,.4,1) backwards}
.mega .c.p{color:var(--sun)}
@keyframes rise{from{transform:translateY(105%)}}
.mega .wob{display:inline-block;animation:wob calc(1.5s / var(--k)) ease-in-out infinite alternate}
@keyframes wob{from{transform:translateY(0)}to{transform:translateY(-.05em)}}
.sub-h{max-width:30em;font-size:clamp(1rem,1.8vw,1.15rem);opacity:.88}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.tempo-ctl{display:grid;gap:8px;max-width:440px;background:color-mix(in srgb,var(--navy) 70%,transparent);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:14px 18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tempo-ctl .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tempo-ctl output{font-family:var(--f-c);font-weight:800;font-size:2rem;line-height:1;color:var(--sun);font-variant-numeric:tabular-nums}
.tempo-ctl .nm{font-family:var(--f-it);font-style:italic;font-size:1.4rem}
.tempo-ctl input[type=range]{width:100%;accent-color:var(--sun);height:28px}
.tempo-ctl .ticks{display:flex;justify-content:space-between;font-size:.72rem;opacity:.75}
.tempo-ctl{grid-template-columns:auto minmax(0,1fr);column-gap:18px;max-width:520px}
.tempo-ctl>*{grid-column:2}
.tempo-ctl .metro{grid-column:1;grid-row:1/span 4;align-self:center;position:relative;width:60px;height:78px}
.metro::before{content:"";position:absolute;left:6px;right:6px;bottom:0;height:68px;background:var(--navy-d);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);border-radius:4px}
.pend{position:absolute;left:50%;bottom:10px;width:3px;height:60px;margin-left:-1.5px;background:var(--sun);transform-origin:50% 100%;animation:tick calc(.75s / var(--k)) ease-in-out infinite alternate;border-radius:2px}
.pend::after{content:"";position:absolute;left:50%;top:14px;width:14px;height:10px;margin-left:-7px;background:var(--white);border-radius:2px}
@keyframes tick{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.player{display:flex;align-items:center;gap:14px;margin-top:4px}
.player button{background:transparent;border:0;color:var(--white);cursor:pointer;padding:6px;border-radius:10px;display:grid;place-items:center}
.player button svg{width:30px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round}
.player button.main{width:46px;height:46px;border-radius:50%;background:var(--sun);color:var(--ink)}
.player button.main svg{width:20px;height:20px;fill:currentColor;stroke:none}
.player button:hover{background:rgba(255,255,255,.12)}.player button.main:hover{background:var(--sun-l)}
.pl-cap{font-size:.75rem;opacity:.75}
@media (max-width:860px){
  .reels{position:relative;inset:auto;width:auto;height:280px;-webkit-mask:linear-gradient(transparent,#000 15%,#000 70%,transparent);mask:linear-gradient(transparent,#000 15%,#000 70%,transparent);padding:0 var(--gr) 0 var(--gl)}
  .hero::after{display:none}
  .hero-in{padding-block:10px 44px}
}

/* statement */
.statement{padding-block:120px}
.st-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:56px;align-items:center}
.hands{margin:0;position:relative}
.hands img{width:100%;aspect-ratio:9/14;object-fit:cover;border-radius:200px 200px 26px 26px}
.hands figcaption{position:absolute;left:14px;bottom:14px;font-size:.75rem;font-weight:700;background:var(--white);border-radius:999px;padding:2px 12px}
@media (max-width:860px){.st-grid{grid-template-columns:1fr;gap:36px}.hands img{aspect-ratio:4/3;object-position:50% 30%;border-radius:140px 140px 22px 22px}}
.statement .eyebrow{margin-bottom:22px}
.say{font-weight:900;font-size:clamp(1.7rem,4.4vw,3.4rem);line-height:1.55;letter-spacing:.01em;max-width:22em}
.say .w{color:color-mix(in srgb,var(--ink) 16%,var(--bg));transition:color .25s}
.say .w.on{color:var(--ink)}
.say .w.hl.on{color:var(--navy);background:linear-gradient(transparent 68%,var(--sun-l) 68%)}
.meaning{display:flex;gap:16px;align-items:center;margin-top:40px;flex-wrap:wrap}
.meaning .word{font-family:var(--f-c);font-weight:800;font-size:clamp(2.6rem,6vw,4.4rem);color:var(--navy);line-height:1}
.meaning p{max-width:26em;color:var(--soft)}

/* philosophy stack */
.phil{padding-block:30px 120px}
.phil-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.stack{display:grid;gap:22px}
.pcard{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:30px;overflow:hidden;min-height:360px;box-shadow:0 -20px 40px -30px rgba(18,52,73,.45)}
.pcard:nth-child(1){background:var(--white);top:calc(env(safe-area-inset-top,0px) + 86px)}
.pcard:nth-child(2){background:var(--mist);top:calc(env(safe-area-inset-top,0px) + 106px)}
.pcard:nth-child(3){background:var(--sun-l);top:calc(env(safe-area-inset-top,0px) + 126px)}
.pcard:nth-child(4){background:var(--navy);color:var(--white);top:calc(env(safe-area-inset-top,0px) + 146px)}
.pcard .tx{padding:34px 34px 30px;display:grid;align-content:space-between;gap:20px}
.pcard .num{font-family:var(--f-c);font-weight:800;font-size:1rem;letter-spacing:.2em;opacity:.7}
.pcard h3{font-family:var(--f-c);font-weight:800;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.9;letter-spacing:.01em}
.pcard p{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;line-height:1.7;max-width:20em}
.pcard .pic{min-height:240px}
.pcard .pic{background:var(--white);display:grid;place-items:center;padding:18px}

.pcard p{font-size:clamp(1.25rem,2.6vw,1.8rem)!important;font-weight:900!important;line-height:1.6!important}
.board{margin:60px 0 0;background:var(--white);border-radius:30px;padding:clamp(14px,3vw,34px);border:1px solid var(--line)}
.board-pic{position:relative;overflow:hidden;border-radius:12px}
.board img{width:100%;height:auto;border-radius:12px}
.pcard .pic{position:relative;overflow:hidden}
.boil{filter:url(#boil)}
.ill{position:relative;aspect-ratio:var(--ar);width:min(100%, calc(290px * var(--ar)))}
.ill img{position:absolute;display:block;max-height:none}
.ill .base{inset:0;width:100%;height:100%}
.ly{height:auto;transform-origin:50% 100%;animation:var(--a) calc(var(--t) / var(--k)) ease-in-out infinite alternate}
.ly.nod{--a:nod;--t:1.7s}.ly.nod2{--a:nod2;--t:2.1s}.ly.bob{--a:bob;--t:1.1s}.ly.sway{--a:swayP;--t:2.6s}
.ly.wave{--a:wave;--t:.8s;transform-origin:20% 100%}.ly.wave2{--a:wave2;--t:.8s;transform-origin:80% 100%}
.ly.bow{--a:bow;--t:.6s;transform-origin:10% 90%}.ly.pick{--a:pick;--t:1.4s;transform-origin:30% 100%}.ly.sip{--a:sip;--t:1.8s}
@keyframes nod{from{transform:rotate(-5deg)}to{transform:rotate(4deg)}}
@keyframes nod2{from{transform:rotate(4deg)}to{transform:rotate(-5deg)}}
@keyframes bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-6%) rotate(2deg)}}
@keyframes swayP{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes wave{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes wave2{from{transform:rotate(14deg)}to{transform:rotate(-12deg)}}
@keyframes bow{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}
@keyframes pick{from{transform:rotate(-3deg)}to{transform:rotate(10deg) translateY(4%)}}
@keyframes sip{from{transform:rotate(0)}to{transform:rotate(-9deg)}}
.fx{position:absolute;pointer-events:none;font-family:var(--f-it);color:var(--navy);line-height:1;animation:floatUp calc(var(--d) / var(--k)) ease-out forwards}
.fx.leaf{width:10px;height:6px;border-radius:0 100% 0 100%;background:#8DB07A;animation-name:fall}
.fx.steam{width:10px;height:22px;border:2.5px solid #9AA8B0;border-color:transparent #9AA8B0 transparent transparent;border-radius:50%}
.fx.crumb{width:6px;height:6px;border-radius:50%;background:var(--sun)}
@keyframes floatUp{from{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}to{opacity:0;transform:translate(var(--dx),-70px) rotate(var(--rot))}}
@keyframes fall{from{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}to{opacity:0;transform:translate(var(--dx),70px) rotate(var(--rot))}}
.board figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:.85rem;color:var(--soft)}
@media (max-width:760px){.pcard{grid-template-columns:1fr;min-height:0}.pcard .pic{min-height:0;height:170px;order:-1;padding:10px;overflow:hidden}.ill{width:min(100%, calc(150px * var(--ar)))}.pcard .tx{padding:22px 20px}
  .pcard:nth-child(n){top:calc(env(safe-area-inset-top,0px) + 74px)}}

/* tempos horizontal */
.tempos{position:relative;height:330vh;background:var(--ink);color:var(--white)}
.tempos-pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);height:calc(100vh - 62px - env(safe-area-inset-top,0px));min-height:540px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.tp-head{display:flex;justify-content:space-between;align-items:end;gap:16px;padding-top:28px;flex-wrap:wrap}
.tp-head .eyebrow{color:var(--sun)}
.tp-head .h2{color:var(--white)}
.speed{font-family:var(--f-c);font-weight:800;font-size:clamp(3rem,7vw,5.5rem);color:var(--sun);line-height:.9;font-variant-numeric:tabular-nums}
.rail{display:flex;gap:24px;align-items:center;will-change:transform;padding-left:var(--gl)}
.panel{flex:none;width:min(82vw,860px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:26px}
.panel .big{font-family:var(--f-it);font-style:italic;font-size:clamp(3rem,7vw,5.6rem);line-height:.9;color:var(--sun)}
.panel .x{font-family:var(--f-c);font-weight:800;font-size:1.3rem;letter-spacing:.06em}
.panel .tag{font-size:1.25rem;font-weight:900;margin-top:8px}
.panel .desc{opacity:.78;font-size:.92rem;margin-top:6px}
.pulse{width:58px;height:58px;border-radius:50%;background:var(--sun);margin-top:22px;animation:beat calc(var(--b) / var(--k)) ease-out infinite}
@keyframes beat{0%{transform:scale(.7);box-shadow:0 0 0 0 color-mix(in srgb,var(--sun) 60%,transparent)}30%{transform:scale(1)}100%{transform:scale(.7);box-shadow:0 0 0 26px transparent}}
.svc{display:grid;gap:10px;align-content:start}
.svc a.sv{color:inherit;text-decoration:none;transition:background .2s, transform .2s}
.svc a.sv:hover{background:rgba(255,255,255,.14);transform:translateX(4px)}
.svc a.sv h4::after{content:" →";color:var(--sun)}
.svc article,.svc a.sv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;background:rgba(255,255,255,.07);border-radius:18px;padding:10px}
.svc img{width:96px;height:80px;object-fit:cover;border-radius:12px}
.svc .st{display:inline-block;font-size:.66rem;font-weight:700;border-radius:999px;padding:0 8px;background:var(--sun);color:var(--ink);margin-bottom:2px}
.svc .st.prep{background:var(--mist);color:var(--navy)}
.svc h4{font-size:1rem;font-weight:900;line-height:1.35}
.svc p{font-size:.78rem;opacity:.75;line-height:1.55}
.cafe-ill{background:var(--white);border-radius:18px;padding:6px;display:grid;place-items:center}
.cafe-ill img{width:min(100%,280px);height:auto}
.svc .soon{display:grid;place-items:center;height:180px;border:2px dashed rgba(255,255,255,.3);border-radius:18px;text-align:center;font-size:.9rem;opacity:.85;padding:16px}
.svc .soon b{display:block;font-family:var(--f-c);font-size:2rem;color:var(--sun)}
.tp-bar{height:4px;background:rgba(255,255,255,.12);margin-bottom:22px;border-radius:2px;overflow:hidden}
.tp-bar i{display:block;height:100%;width:100%;background:var(--sun);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:760px){
  .tempos{height:360vh}
  .panel{width:86vw;grid-template-columns:1fr;gap:12px;padding:18px}
  .pulse{display:none}
  .svc article,.svc a.sv{grid-template-columns:70px minmax(0,1fr)}.svc img{width:70px;height:60px}
  .svc .soon{height:110px}
  .panel .desc,.cafe-ill{display:none}
  .panel .big{font-size:2.6rem}
  .tp-head{padding-top:14px}
  .tempos-pin{min-height:0}
}

/* pads */
.session{padding-block:120px 90px}
.sess-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;margin-top:34px;align-items:start}
.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:var(--ink);padding:14px;border-radius:26px;touch-action:manipulation}
.pad{position:relative;aspect-ratio:1;border:0;border-radius:16px;cursor:pointer;background:var(--pc);color:var(--ink);text-align:left;padding:10px;display:grid;align-content:space-between;overflow:hidden;transition:transform .08s, filter .2s;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.pad b{font-size:clamp(.7rem,1.5vw,.92rem);font-weight:900;line-height:1.3}
.pad small{font-family:var(--f-c);font-weight:800;font-size:.85rem;opacity:.7}
.pad .sol{position:absolute;right:9px;top:6px;font-style:normal;font-weight:900;font-size:clamp(.85rem,1.8vw,1.15rem);color:var(--navy);opacity:.6}
.pad.hit{transform:scale(.93);filter:brightness(1.15)}
.pad::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,255,255,.8);opacity:0}
.pad.hit::after{animation:ring .5s ease-out}
@keyframes ring{from{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.9)}to{opacity:0;box-shadow:0 0 0 18px rgba(255,255,255,0)}}
.seqbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.seq{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-height:22px;align-items:center}
.seq i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.seq i.now{outline:3px solid var(--ink);outline-offset:1px}
.seqbar .btn{padding:8px 16px;font-size:.85rem}
.card-out{background:var(--white);border-radius:26px;padding:22px;border:1px solid var(--line);display:grid;gap:12px;min-height:100%;align-content:start}
.card-out .pic{border-radius:18px;overflow:hidden;aspect-ratio:16/9}
.card-out .pic img{width:100%;height:100%;object-fit:cover}
.card-out .x{font-family:var(--f-c);font-weight:800;color:var(--navy);letter-spacing:.06em}
.card-out h3{font-size:1.4rem;font-weight:900}
.card-out p{color:var(--soft);font-size:.92rem}
.card-out dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:.85rem;margin:0}
.card-out dt{color:var(--navy);font-weight:700}
.card-out dd{margin:0}
.card-out .links{display:flex;flex-wrap:wrap;gap:8px}
.card-out .links a{font-size:.85rem;font-weight:700;color:var(--navy);text-decoration:none;background:var(--mist);border-radius:999px;padding:5px 14px}
.card-out .links a:hover{background:var(--sun-l)}
.card-out .btn{justify-self:start;padding:9px 18px;font-size:.88rem}
.pop{animation:pop .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:translateY(10px);opacity:.3}}
@media (max-width:900px){.sess-grid{grid-template-columns:1fr}}
@media (max-width:420px){.pads{gap:7px;padding:10px}.pad{padding:7px;border-radius:12px}.pad small{display:none}}

/* projects */
.projects{padding-block:100px;background:var(--white)}
.proj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:36px}
.proj{display:grid;gap:12px;align-content:start;color:inherit;text-decoration:none}
.proj .more{display:inline-block;margin-top:8px;font-weight:700;color:var(--navy);border-bottom:2px solid var(--sun)}
.proj:hover .more{background:var(--sun-l)}
.sched{margin-top:28px;display:inline-flex;gap:8px;align-items:center;font-weight:700;text-decoration:none;background:var(--navy);color:var(--white);border-radius:999px;padding:10px 20px}
.sched:hover{background:var(--navy-d)}
.proj .pic{border-radius:24px;overflow:hidden;aspect-ratio:4/5;position:relative}
.proj .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.proj:hover .pic img{transform:scale(1.06)}
.proj .pic span{position:absolute;left:12px;bottom:12px;font-size:.75rem;font-weight:700;background:var(--white);border-radius:999px;padding:2px 12px}
.proj h3{font-size:1.3rem;font-weight:900}
.proj p{color:var(--soft);font-size:.92rem}
@media (max-width:860px){.proj-grid{grid-template-columns:1fr}.proj{grid-template-columns:130px minmax(0,1fr);align-items:start;gap:16px}.proj .pic{aspect-ratio:1;border-radius:18px}.proj .pic span{display:none}}

/* recruit */
.recruit{background:var(--sun);padding-block:110px;overflow:hidden;position:relative}
.recruit .big{font-weight:900;font-size:clamp(2.4rem,7.4vw,6.4rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.recruit .big span{display:inline-block;transform:translateX(calc(var(--rx,0) * 1px))}
.recruit .rg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;margin-top:30px}
.recruit p{max-width:32em;font-weight:500}
@media (max-width:760px){.recruit .rg{grid-template-columns:1fr}.recruit{padding-block:80px}}

/* news */
.news{padding-block:90px 40px}
.news ul{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.news li{display:grid;grid-template-columns:7.5em auto minmax(0,1fr);gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.news time{font-family:var(--f-c);font-weight:600;font-size:1.1rem;color:var(--navy);font-variant-numeric:tabular-nums}
.news .k{font-size:.72rem;font-weight:700;background:var(--mist);color:var(--navy);border-radius:999px;padding:1px 10px;white-space:nowrap}
@media (max-width:560px){.news li{grid-template-columns:auto auto;gap:4px 10px}.news li span:last-child{grid-column:1/-1}}

/* contact */
.contact{padding-block:90px 110px}
.c-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start;margin-top:30px}
.c-side{display:grid;gap:14px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px)}
.c-side .box{background:var(--white);border-radius:22px;padding:20px;border:1px solid var(--line)}
.tel{font-family:var(--f-c);font-weight:800;font-size:1.9rem;line-height:1.1;user-select:all}
.tel-list{display:grid;gap:10px;font-size:.88rem}
.tel-list div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px dashed var(--line);padding-bottom:8px}
.tel-list b{font-family:var(--f-c);font-weight:800;font-size:1.1rem;user-select:all}
.btn-mini{border:0;background:var(--mist);color:var(--navy);border-radius:8px;padding:4px 10px;font-size:.78rem;font-weight:700;cursor:pointer}
.formbox{background:var(--white);border-radius:28px;border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 60px -48px rgba(18,52,73,.6)}
.f-head{background:var(--navy);color:var(--white);padding:18px 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.f-head h3{font-size:1.1rem;font-weight:900}
.stepper{display:flex;gap:6px;margin:0 0 0 auto;padding:0;list-style:none;font-size:.8rem}
.stepper li{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;opacity:.6}
.stepper li b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-family:var(--f-c)}
.stepper li.now{opacity:1;background:var(--white);color:var(--navy)}
.stepper li.now b{background:var(--navy);color:var(--white)}
.stepper li.done{opacity:1}.stepper li.done b{background:var(--sun);color:var(--ink)}
.f-body{padding:28px 26px}
.field{border:0;padding:0;margin:0 0 26px;min-width:0}
.field>legend{display:flex;gap:8px;align-items:center;font-weight:900;padding:0;margin-bottom:10px}
.req{font-size:.66rem;background:var(--bad);color:#fff;border-radius:4px;padding:0 6px;font-weight:700}
.opt-t{font-size:.66rem;background:var(--mist);color:var(--soft);border-radius:4px;padding:0 6px;font-weight:700}
.types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.type{border:2px solid var(--line);background:var(--bg);border-radius:16px;padding:12px 14px;cursor:pointer;text-align:left;line-height:1.4;display:grid;gap:2px}
.type b{font-weight:900}.type small{font-size:.78rem;color:var(--soft)}
.type[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:var(--white)}
.type[aria-pressed="true"] small{color:var(--white);opacity:.8}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:var(--white);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:.88rem}
.chip[aria-pressed="true"]{border-color:var(--navy);background:var(--mist);color:var(--navy);font-weight:700}
.visit{display:grid;gap:12px;background:var(--bg);border-radius:18px;padding:16px}
.dates{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.dbtn{flex:none;width:58px;border:2px solid var(--line);background:var(--white);border-radius:14px;padding:6px 0;cursor:pointer;display:grid;justify-items:center;line-height:1.2;font-variant-numeric:tabular-nums}
.dbtn small{font-size:.66rem;color:var(--soft)}
.dbtn b{font-family:var(--f-c);font-weight:800;font-size:1.3rem}
.dbtn:disabled{opacity:.4;cursor:not-allowed}
.dbtn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.dbtn[aria-pressed="true"] small{color:var(--white)}
.counter{display:flex;align-items:center;gap:12px}
.counter button{width:38px;height:38px;border-radius:50%;border:2px solid var(--navy);background:var(--white);font-size:1.2rem;font-weight:700;cursor:pointer;display:grid;place-items:center;line-height:1}
.counter button:disabled{opacity:.3;cursor:not-allowed}
.counter output{font-family:var(--f-c);font-weight:800;font-size:1.6rem;min-width:1.4em;text-align:center}
.inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.inputs .full{grid-column:1/-1}
.inp{display:grid;gap:6px;min-width:0}
.inp label{font-size:.88rem;font-weight:700;display:flex;gap:6px;align-items:center}
.inp input,.inp select,.inp textarea{width:100%;border:2px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--bg);min-width:0}
.inp textarea{min-height:110px;resize:vertical}
.inp input:focus,.inp select:focus,.inp textarea:focus{outline:0;border-color:var(--navy);background:var(--white)}
.inp .err{font-size:.8rem;color:var(--bad)}
.inp.bad input,.inp.bad textarea{border-color:var(--bad)}
.inp .cnt{font-size:.72rem;color:var(--soft);justify-self:end}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:.88rem}
.agree input{width:20px;height:20px;accent-color:var(--navy);margin-top:3px}
.form-err{background:color-mix(in srgb,var(--bad) 9%,var(--white));color:var(--bad);border-radius:12px;padding:12px 16px;font-size:.9rem;margin-bottom:18px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:20px}
.confirm{width:100%;border-collapse:collapse}
.confirm th{text-align:left;font-size:.82rem;color:var(--navy);width:8.5em;padding:11px 12px 11px 0;vertical-align:top}
.confirm td{padding:11px 0;border-bottom:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.done{display:grid;gap:16px;justify-items:center;text-align:center;padding-block:10px}
.rec{position:relative;width:150px;height:150px;border-radius:50%;background:repeating-radial-gradient(circle,var(--ink) 0 2px,#22303b 2px 4px);display:grid;place-items:center;animation:spin 2.4s linear infinite, popin .5s cubic-bezier(.3,1.5,.5,1)}
.rec::after{content:"";position:absolute;width:56px;height:56px;border-radius:50%;background:var(--sun)}
.rec span{position:relative;z-index:1;font-family:var(--f-c);font-weight:800;font-size:.75rem;color:var(--ink);letter-spacing:.1em}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popin{from{scale:.4}}
.done h3{font-size:1.5rem;font-weight:900}
.rno{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:14px;padding:8px 10px 8px 16px;font-family:var(--f-c);font-weight:800;font-size:1.4rem;letter-spacing:.06em;flex-wrap:wrap;justify-content:center}
.rno small{font-family:var(--f-jp);font-size:.72rem;color:var(--soft);letter-spacing:0;font-weight:700}
.demo{font-size:.78rem;background:var(--mist);border-radius:8px;padding:4px 12px;color:var(--navy)}
@media (max-width:900px){.c-grid{grid-template-columns:1fr}.c-side{position:static}}
@media (max-width:560px){.types,.inputs{grid-template-columns:1fr}.f-body{padding:22px 16px}.f-head{padding:16px}}

footer{background:var(--ink);color:var(--white);padding-block:60px calc(50px + env(safe-area-inset-bottom,0px))}
footer .inner{display:grid;gap:30px}
.today{display:grid;gap:4px}
.today .d{font-family:var(--f-c);font-weight:800;font-size:clamp(2.6rem,8vw,6rem);line-height:.9;color:var(--sun);font-variant-numeric:tabular-nums}
.today p{opacity:.85}
.today .vow{font-weight:900;font-size:clamp(2rem,5.4vw,4rem);line-height:1.25;opacity:1;margin:18px 0 10px;letter-spacing:-.01em}
.today #todayP{font-size:clamp(1rem,1.8vw,1.2rem);max-width:30em}
.today .close{margin-top:14px;font-weight:700;color:var(--sun);opacity:1}
.today .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;max-width:520px;margin-top:10px}
.today .bar i{display:block;height:100%;background:var(--sun);width:0}
.f-nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-weight:700}
.f-nav a{text-decoration:none;opacity:.85}.f-nav a:hover{opacity:1;color:var(--sun)}
.f-row{display:flex;gap:20px 40px;flex-wrap:wrap;justify-content:space-between;font-size:.85rem;opacity:.8;border-top:1px solid rgba(255,255,255,.15);padding-top:22px}
.fab{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;padding:10px var(--gr) calc(10px + env(safe-area-inset-bottom,0px)) var(--gl);background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 92%,transparent) 35%);transition:transform .3s}
.fab .btn{width:100%}
.fab.away{transform:translateY(130%)}
@media (max-width:860px){.fab{display:block}footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);background:var(--ink);color:var(--white);padding:10px 18px;border-radius:999px;font-size:.88rem;opacity:0;transition:.25s;z-index:70;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
@supports (animation-timeline: view()){
  .rv{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .rv-s{animation:sc linear both;animation-timeline:view();animation-range:entry 5% entry 65%}
}
@keyframes up{from{opacity:.15;transform:translateY(46px)}}
@keyframes sc{from{opacity:.2;transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== light theme: 白地に紺（理念イラストの配色に合わせる） ===== */
body::before{background:var(--bg)}
.top,.top.light{background:color-mix(in srgb,var(--bg) 92%,transparent);color:var(--ink);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .logo img{filter:none}
.hero{background:var(--bg);color:var(--ink)}
.hero::after{background:linear-gradient(90deg,var(--bg) 30%,color-mix(in srgb,var(--bg) 45%,transparent) 62%,transparent)}
.hero-in .eyebrow{color:var(--navy)!important}
.mega{color:var(--navy)}
.sub-h{color:var(--soft);opacity:1}
.reel img{opacity:1}
.tempo-ctl{background:var(--white);border:1px solid var(--line);color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 20px 40px -32px rgba(29,78,107,.45)}
.tempo-ctl output{color:var(--navy)}
.tempo-ctl input[type=range]{accent-color:var(--navy)}
.metro::before{background:var(--mist)}
.pend::after{background:var(--navy)}
.player button{color:var(--navy)}
.player button:hover{background:var(--mist)}
.tempos{background:var(--mist);color:var(--ink)}
.tp-head .eyebrow{color:var(--navy)}
.tp-head .h2{color:var(--navy-d)}
.speed{color:var(--navy)}
.panel{background:var(--white);border-color:var(--line);box-shadow:0 24px 50px -40px rgba(29,78,107,.5)}
.panel .big{color:var(--navy)}
.panel .desc{color:var(--soft);opacity:1}
.svc article,.svc a.sv{background:var(--bg)}
.svc a.sv:hover{background:var(--sun-l)}
.svc a.sv h4::after{color:var(--navy)}
.svc p{color:var(--soft);opacity:1}
.svc .soon{border-color:var(--line);color:var(--soft)}
.svc .soon b{color:var(--navy)}
.tp-bar{background:rgba(29,78,107,.12)}
.tp-bar i{background:var(--navy)}
footer{background:var(--white);color:var(--ink);border-top:1px solid var(--line)}
footer img{filter:none!important}
footer .eyebrow{color:var(--navy)!important}
.today .d{color:var(--navy)}
.today .vow{color:var(--navy-d)}
.today #todayP{color:var(--soft)}
.today .close{color:var(--navy);background:linear-gradient(transparent 62%,var(--sun-l) 62%);justify-self:start;padding:0 2px}
.today .bar{background:var(--mist)}
.f-row{border-top-color:var(--line);color:var(--soft)}
.f-nav a:hover{color:var(--navy)}

/* Keep the salon schedule link within its own card column. */
#projects .sched{display:flex;box-sizing:border-box;width:calc((100% - 44px)/3);max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.6;justify-content:center;text-align:center;border-radius:20px;min-width:0;}
@media(max-width:860px){#projects .sched{width:100%;}}

/* Mobile: keep every service visible in normal document flow. */
@media(max-width:860px){
 #tempos{height:auto!important;min-height:0!important;padding-block:36px;}
 #tempos .tempos-pin{position:static!important;height:auto!important;min-height:0!important;overflow:visible!important;display:block;}
 #tempos .rail{display:grid!important;grid-template-columns:minmax(0,1fr);gap:24px;transform:none!important;will-change:auto;padding:24px var(--gr) 0 var(--gl);align-items:start;}
 #tempos .panel{box-sizing:border-box;width:100%!important;min-width:0;height:auto;grid-template-columns:minmax(0,1fr);padding:20px;gap:16px;}
 #tempos .panel .desc{display:block;}
 #tempos .pulse,#tempos .speed,#tempos .tp-bar{display:none;}
 #tempos .svc{min-width:0;}
 #tempos .svc article,#tempos .svc a.sv{grid-template-columns:64px minmax(0,1fr);gap:12px;}
 #tempos .svc img{width:64px;height:64px;}
 #tempos .svc h4{font-size:1rem;overflow-wrap:anywhere;}
 #tempos .cafe-ill{display:none;}
 .fab{display:none!important;}
}

/* Reserve separate rows for note labels and service names. */
#pads .pad{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:8px;align-content:stretch;min-width:0;}
#pads .pad .sol{position:static;grid-column:1;grid-row:1;justify-self:end;line-height:1.2;}
#pads .pad b{grid-column:1;grid-row:2;align-self:start;overflow-wrap:anywhere;}
#pads .pad small{grid-column:1;grid-row:3;}
@media(max-width:600px){
 #pads{gap:8px;padding:10px;}
 #pads .pad{aspect-ratio:auto;min-height:126px;padding:9px 7px;gap:8px;}
 #pads .pad .sol{font-size:1rem;}
 #pads .pad b{font-size:.75rem;line-height:1.45;}
 #pads .pad small{display:none;}
}