/* つなぐ (Tsunagu) — photocatalyst coating, Nagoya. Palette: paper / light / sun / kaki (persimmon) / sumi. */
:root{
  --paper:#FAF6EF; --paper-2:#F3EDE2; --light:#FFF3D6; --sun:#F7B544; --sun-2:#E89A2E;
  --kaki:#E8683A; --kaki-2:#CF4F27; --ink:#23302A; --muted:#5E6963; --line:#E3DBCC;
  --card:#FFFFFF; --r:26px; --r-s:14px; --max:1180px; --gutter:clamp(16px,4vw,40px);
  --display:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif; --body:'Noto Sans JP','Hiragino Sans',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.9 var(--body);overflow-x:hidden}
img,svg,canvas,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:1.3;margin:0;word-break:auto-phrase}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(18px,2vw,22px);font-weight:700}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--display);letter-spacing:.2em;color:var(--kaki-2);text-transform:uppercase;margin-bottom:14px}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sun)}
.lead{color:var(--muted);font-size:clamp(15px,1.2vw,17px);max-width:62ch}
.tbc{display:inline-block;font:700 11px/1 var(--display);letter-spacing:.06em;color:#8A3B0F;background:var(--light);border:1px solid #F1D9A6;border-radius:999px;padding:4px 8px;vertical-align:middle;margin-left:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;font:700 15px/1 var(--display);text-decoration:none;border:2px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:linear-gradient(135deg,var(--kaki),var(--kaki-2));color:#fff;box-shadow:0 10px 24px -10px rgba(207,79,39,.6)}
.btn-g{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-g:hover{background:var(--ink);color:#fff}
.btn-s{background:var(--sun);color:var(--ink)}
/* header */
.hd{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(227,219,204,.7)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.hd .logo img{height:42px;width:auto}
.hd nav{display:flex;gap:22px;font:700 14px var(--display)}
.hd nav a{text-decoration:none;color:var(--ink);opacity:.85}
.hd nav a:hover{color:var(--kaki-2);opacity:1}
.hd .btn{min-height:44px;padding:0 18px;font-size:14px}
.menu{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;font:700 12px var(--display);color:var(--ink)}
@media (max-width:900px){.hd nav{display:none}.hd .btn{display:none}.menu{display:block}
  .hd.open nav{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:var(--paper);padding:16px var(--gutter) 24px;border-bottom:1px solid var(--line);gap:14px}}
/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(28px,5vw,64px) 0 0}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;min-height:min(78vh,760px)}
.hero h1{font-size:clamp(34px,5.2vw,68px);letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--kaki-2)}
.hero .lead{margin:18px 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .note{margin-top:16px;font-size:13px;color:var(--muted)}
.stage3d{position:relative;aspect-ratio:1150/1500;max-height:min(74vh,720px);margin:0 auto;width:100%}
.stage3d .av{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform-origin:50% 100%;will-change:transform;filter:drop-shadow(0 24px 24px rgba(35,48,42,.18))}
.stage3d.idle .av{animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1.2%) scaleY(1.012)}}
.stage3d.jumping .av{animation:none}
.stage3d.jumping .bubble{opacity:0;transition:opacity .25s}
.bubble{position:absolute;left:0;top:7%;max-width:min(300px,58%);background:#fff;border:2px solid var(--ink);border-radius:18px;padding:12px 16px;font:700 15px/1.6 var(--display);box-shadow:6px 6px 0 var(--sun);animation:pop .8s var(--ease) both;animation-delay:.6s}
.bubble::after{content:"";position:absolute;right:-14px;top:38%;border:8px solid transparent;border-left-color:var(--ink);border-left-width:14px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.sunglow{position:absolute;right:-10%;top:-20%;width:62vw;max-width:900px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(247,181,68,.42),rgba(247,181,68,0));pointer-events:none}
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.trust .wrap{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:center;padding:14px var(--gutter);font:700 13px var(--display);color:var(--ink)}
.trust span::before{content:"◎";color:var(--kaki);margin-right:6px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;min-height:0}.stage3d{max-height:60vh;aspect-ratio:1150/1300}.bubble{top:2%}.cap{width:min(300px,78vw)}.cap[data-kind=card]{left:12px;bottom:56px;width:min(420px,calc(100vw - 24px))}}
/* sections */
section{padding:clamp(56px,8vw,112px) 0}
.sec-h{max-width:820px;margin-bottom:clamp(28px,4vw,48px)}
.sec-h .lead{margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);box-shadow:0 18px 40px -30px rgba(35,48,42,.35)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
.num{font:900 44px/1 var(--display);color:var(--kaki-2)}
.num small{font-size:18px;color:var(--ink);margin-left:2px}
/* mechanism (scroll-scrubbed frames) */
#mech{padding-top:0}
.mech-head{padding:clamp(56px,8vw,96px) 0 24px}
.scroller{position:relative;height:640vh}
.stage{position:sticky;top:0;height:100vh;height:100dvh;display:grid;place-items:center;padding:56px 16px 16px;box-sizing:border-box;background:var(--paper)}
.box{position:relative;width:min(100%,calc((100dvh - 84px)*16/9),1280px);aspect-ratio:16/9}
.frame{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#F1EADF;box-shadow:0 30px 70px -34px rgba(35,48,42,.5),0 0 0 1px rgba(35,48,42,.08)}
.film{position:absolute;inset:0;background:#F1EADF}
.film video,.film .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film video{opacity:0;transition:opacity .4s}.film.has-video video{opacity:1}.film.has-video .poster{opacity:0;transition:opacity .4s}
.ov{position:absolute;inset:0;pointer-events:none}
.jumper{position:fixed;left:0;top:0;width:0;height:0;display:none;pointer-events:none;z-index:40;transform-origin:0 0;will-change:transform,left,top;filter:drop-shadow(0 24px 24px rgba(35,48,42,.18))}
.jumper img{position:absolute;left:0;bottom:0;transform:translateX(-50%);width:auto;max-width:none;display:none}
.jumper img.j0{display:block}
.jumper.on{display:block}
.stage3d.handoff .av{visibility:hidden}
.film.flying .poster{opacity:1!important;z-index:2}
.ov .tag{position:absolute;left:16px;bottom:16px;font:700 11px var(--display);letter-spacing:.14em;color:var(--muted);background:rgba(255,255,255,.8);border-radius:999px;padding:5px 10px}
.film .wall{position:absolute;left:4.5%;top:7%;font:700 12px var(--display);color:var(--muted);letter-spacing:.1em}
.film .loader{position:absolute;inset:0;display:grid;place-items:center;background:#F1EADF;font:700 13px var(--display);letter-spacing:.2em;color:var(--muted);transition:opacity .5s}
.film .loader.off{opacity:0;pointer-events:none}
.box{container-type:inline-size}
.caps{position:absolute;inset:0}
.cap{position:absolute;left:0;top:0;width:min(30cqw,380px);opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.cap.on{opacity:1;transform:none}
.cap .step{display:inline-block;font:700 clamp(9px,.85cqw,11px) var(--display);letter-spacing:.2em;color:#fff;background:var(--kaki);border-radius:999px;padding:5px 11px;margin-bottom:8px}
.cap .say{position:relative;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:.9cqw 1.3cqw;font:500 clamp(11px,1.2cqw,16px)/1.75 var(--body);box-shadow:5px 5px 0 var(--sun)}
.cap .say b{display:block;font:900 clamp(14px,1.7cqw,22px)/1.3 var(--display);margin-bottom:4px}
.cap[data-kind=say]{width:min(25cqw,320px)}
.cap[data-kind=say] .say::after{content:"";position:absolute;right:-16px;top:34px;border:8px solid transparent;border-left-color:var(--ink);border-left-width:14px}
.cap[data-kind=card]{left:2.4cqw;bottom:9cqw;top:auto}
.labels{position:absolute;inset:0}
.lab{position:absolute;transform:translate(-50%,-100%) translateY(-14px) scale(.6);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);font:900 clamp(11px,1.3cqw,18px)/1.2 var(--display);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:14px;padding:.55cqw 1cqw;box-shadow:4px 4px 0 var(--sun);white-space:nowrap;text-align:center}
.lab small{display:block;font:500 clamp(9px,.85cqw,12px)/1.3 var(--body);color:var(--muted);margin-top:2px}
.lab::before{content:"";position:absolute;left:50%;bottom:-16px;width:2px;height:12px;background:var(--ink);transform:translateX(-50%)}
.lab::after{content:"";position:absolute;left:50%;bottom:-20px;width:8px;height:8px;border-radius:50%;background:var(--kaki);transform:translateX(-50%)}
.lab.on{opacity:1;transform:translate(-50%,-100%) translateY(-14px) scale(1)}
.lab.b{transform:translate(-50%,0) translateY(14px) scale(.6)}
.lab.b.on{transform:translate(-50%,0) translateY(14px) scale(1)}
.lab.b::before{bottom:auto;top:-16px}
.lab.b::after{bottom:auto;top:-20px}
.rail{position:absolute;left:50%;bottom:2.2cqw;transform:translateX(-50%);display:flex;gap:6px;width:min(420px,40cqw)}
.rail i{flex:1;height:6px;border-radius:3px;background:rgba(35,48,42,.15);transition:background .3s}
.rail i.on{background:linear-gradient(90deg,var(--sun),var(--kaki))}
.mech-note{font-size:12px;color:var(--muted);max-width:820px;margin:18px auto 0;padding:0 var(--gutter)}
@media (max-width:760px){
  .stage{align-content:start;place-items:start center;padding:64px 12px 12px}
  .box{width:100%;container-type:normal}
  .frame{border-radius:14px}
  .cap,.cap[data-kind=say],.cap[data-kind=card]{left:0;right:0;top:calc(100% + 14px);bottom:auto;width:auto}
  .cap .say{padding:12px 16px;font-size:14px}.cap .say b{font-size:17px}.cap .step{font-size:10px}
  .lab{font-size:11px;padding:4px 8px}.lab small{display:none}
  .rail{bottom:8px;width:60%}
  .ov .tag{left:8px;bottom:8px}
}
/* reasons */
.reason{display:flex;gap:14px;align-items:flex-start}
.reason .no{flex:0 0 44px;height:44px;border-radius:14px;background:var(--light);display:grid;place-items:center;font:900 18px var(--display);color:var(--kaki-2)}
/* scenes */
.scene{position:relative;background:linear-gradient(160deg,#fff,var(--light));border:1px solid var(--line);border-radius:var(--r);padding:22px;min-height:150px}
.scene h3{margin-bottom:8px}
.scene p{font-size:14px;color:var(--muted)}
/* honesty */
.honest{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.honest .card h3{display:flex;align-items:center;gap:10px}
.honest .ok::before{content:"○";color:var(--kaki)}
.honest .no::before{content:"△";color:var(--muted)}
.honest ul{margin:12px 0 0;padding-left:1.2em;color:var(--muted);font-size:15px}
@media (max-width:900px){.honest{grid-template-columns:1fr}}
/* spec */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-family:var(--display);font-weight:700;color:var(--muted);font-size:13px}
td.me{font-weight:700;color:var(--kaki-2)}
/* flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:f}
.flow .card{position:relative;padding-top:56px}
.flow .card::before{counter-increment:f;content:counter(f);position:absolute;left:22px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--kaki);color:#fff;display:grid;place-items:center;font:900 14px var(--display)}
.flow p{font-size:14px;color:var(--muted);margin-top:6px}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flow{grid-template-columns:1fr}}
/* faq */
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font:700 16px var(--display);list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"＋";color:var(--kaki)}
details[open] summary::after{content:"－"}
details p{margin-top:10px;color:var(--muted);font-size:15px}
/* company + contact */
.co dl{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;margin:0;font-size:15px}
.co dt{color:var(--muted);font-family:var(--display);font-weight:700}
.co dd{margin:0}
.contact{background:var(--ink);color:#fff;border-radius:32px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:32px}
.contact h2{color:#fff}
.contact .lead{color:#CFC6B8}
.contact ul{padding-left:1.2em;color:#E8E0D2;font-size:15px}
.contact form{display:grid;gap:12px}
.contact label{display:grid;gap:6px;font:700 13px var(--display)}
.contact input,.contact select,.contact textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #4A5650;background:#2E3B35;color:#fff;font:400 15px var(--body)}
.contact .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact .fine{font-size:12px;color:#B7AE9F}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
footer{padding:36px 0 110px;color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.phonebar{display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:8px}
.phonebar .btn{flex:1;min-height:50px}
@media (max-width:900px){.phonebar{display:flex}}
.demo{font-size:12px;background:var(--light);color:#8A3B0F;text-align:center;padding:8px var(--gutter)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.bubble{animation:none}html{scroll-behavior:auto}}