:root{--red:#e3062c;--deep:#171717;--soft:#f3f3f1;--green:#24b34b;--text:#191919;--muted:#666;--font:"IBM Plex Sans JP",sans-serif;--display:"Roboto Slab","IBM Plex Sans JP",serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);font-family:var(--font);background:#fff}a{color:inherit;text-decoration:none}.topbar{height:38px;background:#3d3d3d;color:#fff;display:flex;align-items:center;justify-content:flex-end;padding:0 4.5vw;gap:30px;font-size:11px}.topbar span{margin-right:auto;color:#d9d9d9}.header{height:86px;background:#080808;color:#fff;display:flex;align-items:center;padding:0 4.5vw;position:sticky;top:0;z-index:20}.logo{display:flex;flex-direction:column;line-height:1}.logo-type{font:800 31px/1 var(--font);letter-spacing:.08em;position:relative}.logo-type:after{content:"";display:inline-block;width:11px;height:22px;background:var(--red);margin-left:-62px;transform:skew(-12deg);vertical-align:-2px}.logo small{font-size:7px;letter-spacing:.2em;color:#aaa;margin-top:5px}.header nav{display:flex;gap:28px;margin-left:auto;align-items:center}.header nav a{font-size:13px;font-weight:600}.header nav b{color:var(--red);font-size:18px}.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:15px 27px;font-size:13px;font-weight:700;transition:.25s;border:0}.pill:hover{transform:translateY(-2px)}.red{background:var(--red);color:#fff}.white{background:#fff;color:#111}.header-cta{margin-left:28px;padding:13px 24px}.menu{display:none}.hero{height:calc(100vh - 124px);min-height:650px;position:relative;color:#fff;background:url("assets/site/88630584-img20240226102544923643.webp") center 48%/cover;overflow:hidden}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.26) 60%,rgba(0,0,0,.03)),linear-gradient(0deg,rgba(0,0,0,.3),transparent 45%)}.hero-content{position:absolute;left:4.5vw;bottom:10%;z-index:2;max-width:830px}.kicker,.section-kicker{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--red);margin:0 0 16px}.hero h1{font:800 clamp(58px,7vw,104px)/1.04 var(--display);margin:0 0 25px;letter-spacing:-.035em}.hero-content>p:not(.kicker){font-size:15px;line-height:1.9;text-shadow:0 1px 4px #000}.actions{display:flex;gap:13px;margin-top:28px}.hero-badge{position:absolute;right:4.5vw;bottom:8%;background:var(--red);border-radius:50%;width:124px;height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(7deg)}.hero-badge strong{font-size:14px}.hero-badge span{font-size:9px;line-height:1.4}.hero-scroll{position:absolute;right:4.5vw;top:8%;font-size:9px;letter-spacing:.16em;writing-mode:vertical-rl}.hero-scroll i{font-style:normal;margin-top:12px}.section{padding:120px 5.5vw}.family h2,.hoeflon h2,.section-heading h2,.process h2,.contact h2{font:800 clamp(42px,5vw,72px)/1.14 var(--display);letter-spacing:-.03em;margin:0}.family h2 em,.hoeflon h2 em{font-style:normal;color:var(--red)}.family-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:22px;margin-top:62px}.family-card{background:var(--soft);border-radius:18px;overflow:hidden;transition:.3s}.family-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(0,0,0,.1)}.family-image{height:335px;background-size:cover;background-position:center}.building{background-image:url("assets/site/90518666-pxt00011843096003_r.jpg")}.heavy{background-image:url("assets/site/90518668-pxt00008386131903_r.jpg")}.survey{background-image:url("assets/site/90518672-pxt00012084642903_r.jpg")}.family-copy{padding:25px 27px 28px;position:relative}.family-copy>span{font-size:10px;color:var(--red);font-weight:700}.family-copy h3{font:700 25px var(--display);margin:7px 0}.family-copy p{font-size:11px;color:var(--muted);margin:0}.family-copy i{position:absolute;right:25px;top:38px;background:#fff;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;font:normal 28px/1 sans-serif}.hoeflon{background:var(--soft);display:grid;grid-template-columns:43% 57%;min-height:760px;align-items:center;overflow:hidden}.hoeflon-copy{padding-left:2vw;position:relative;z-index:3}.hoeflon-copy>p:not(.section-kicker){font-size:13px;line-height:2;color:var(--muted);max-width:550px;margin:27px 0}.hoeflon-copy ul{list-style:none;padding:0;margin:0 0 35px}.hoeflon-copy li{font-size:12px;font-weight:600;margin:13px 0}.hoeflon-copy li:before{content:"✓";display:inline-grid;place-items:center;width:21px;height:21px;background:var(--red);color:#fff;border-radius:50%;font-size:10px;margin-right:12px}.machine-stage{position:relative;height:620px;display:grid;place-items:center}.machine-stage img{position:relative;z-index:2;max-width:92%;max-height:590px;object-fit:contain;filter:drop-shadow(0 30px 25px rgba(0,0,0,.22))}.machine-halo{position:absolute;width:520px;height:520px;border-radius:50%;background:#fff}.spec{position:absolute;right:3%;bottom:4%;z-index:3;background:var(--red);color:#fff;border-radius:50%;width:138px;height:138px;display:flex;flex-direction:column;align-items:center;justify-content:center}.spec strong{font:800 31px var(--display)}.spec span{font-size:8px;text-align:center;line-height:1.4}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:52px}.text-arrow{font-size:12px;font-weight:700;border-bottom:1px solid #aaa;padding:10px 0}.text-arrow b{font-size:20px;color:var(--red);margin-left:12px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.project-photo{height:300px;border-radius:16px;background-size:cover;background-position:center}.p1{background-image:url("assets/site/88630582-img20240226102544997593.webp")}.p2{background-image:url("assets/site/88630581-img20240226102545081294.webp")}.p3{background-image:url("assets/site/88630586-img20240226102544798772.webp")}.project-grid article>span{display:inline-block;margin-top:21px;color:var(--red);font-size:10px;font-weight:700}.project-grid h3{font:700 21px/1.5 var(--display);margin:8px 0 13px}.project-grid article>a{font-size:11px;font-weight:700}.process{background:#171717;color:#fff;padding:110px 9vw;display:grid;grid-template-columns:1fr 1fr;gap:10vw}.process-copy>p:not(.section-kicker){max-width:480px;font-size:13px;line-height:2;color:#aaa;margin-top:28px}.process ol{list-style:none;padding:0;margin:0}.process li{display:grid;grid-template-columns:60px 1fr;gap:15px;padding:25px 0;border-bottom:1px solid #444}.process li>b{font:700 20px var(--display);color:var(--red)}.process li span{font-size:11px;color:#999}.process li strong{display:block;color:#fff;font:700 20px var(--display);margin-bottom:8px}.news-list{border-top:1px solid #ddd}.news-list a{display:grid;grid-template-columns:130px 90px 1fr auto;align-items:center;gap:20px;border-bottom:1px solid #ddd;padding:25px 12px;transition:.2s}.news-list a:hover{background:var(--soft);padding-left:23px}.news-list time{font-size:12px;color:#777}.news-list span{font-size:9px;font-weight:700;color:var(--red)}.news-list p{font-size:13px}.news-list b{color:var(--red);font-size:24px}.contact{padding:100px 8vw;background:var(--red);color:#fff;display:flex;align-items:end;justify-content:space-between}.contact .section-kicker{color:#fff;opacity:.7}.contact-links{display:flex;gap:13px}.contact-links .red{background:#111}footer{background:#080808;color:#fff;padding:60px 5vw 40px;display:grid;grid-template-columns:1fr 1fr auto;gap:35px;align-items:end}.white-logo .logo-type:after{background:var(--red)}footer strong{font-size:13px}footer p{font-size:9px;color:#888}footer>small{font-size:8px;color:#777}
@media(max-width:980px){.header nav,.header-cta{display:none}.menu{display:flex;margin-left:auto;background:transparent;border:0;flex-direction:column;gap:5px}.menu span{width:27px;height:2px;background:#fff}.hero{height:720px}.family-grid{grid-template-columns:1fr 1fr}.family-card.large{grid-column:1/-1}.hoeflon{grid-template-columns:1fr}.machine-stage{height:520px;grid-row:1}.hoeflon-copy{padding:40px 0}.project-photo{height:240px}.contact{align-items:start;flex-direction:column;gap:45px}}@media(max-width:650px){.topbar{padding:0 18px}.topbar span,.topbar a:first-of-type{display:none}.header{height:70px;padding:0 18px}.logo-type{font-size:25px}.hero{height:680px;min-height:0}.hero-content{left:22px;right:22px;bottom:11%}.hero h1{font-size:55px}.hero-content>p:not(.kicker){font-size:12px}.hero-badge{display:none}.section{padding:80px 22px}.family h2,.hoeflon h2,.section-heading h2,.process h2,.contact h2{font-size:40px}.family-grid{grid-template-columns:1fr;margin-top:40px}.family-card.large{grid-column:auto}.family-image{height:270px}.machine-stage{height:380px}.machine-halo{width:330px;height:330px}.spec{width:98px;height:98px}.spec strong{font-size:23px}.project-grid{grid-template-columns:1fr}.project-photo{height:300px}.section-heading{align-items:start;gap:20px}.process{padding:80px 22px;grid-template-columns:1fr;gap:50px}.news-list a{grid-template-columns:95px 1fr}.news-list p{grid-column:1/-1;margin:0}.news-list b{display:none}.contact{padding:80px 22px}.contact-links{flex-direction:column;width:100%}.contact-links .pill{width:100%}footer{grid-template-columns:1fr}.hero-scroll{display:none}}
.language-switch{display:inline-flex!important;align-items:center;justify-content:center;min-width:42px;height:30px;padding:0 11px;border:1px solid currentColor;border-radius:999px;font:700 10px/1 var(--font);letter-spacing:.08em;white-space:nowrap}
html[lang="en"] body{font-family:"Inter","Helvetica Neue",Arial,sans-serif}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{word-break:normal;overflow-wrap:break-word;line-break:auto;letter-spacing:0}
html[lang="en"] main :where(h1,h2,h3,p,li,dt,dd,figcaption,strong){word-break:normal;overflow-wrap:break-word;hyphens:auto}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{text-wrap:balance}
html[lang="en"] .header nav a{white-space:nowrap}
:root{--font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;--display:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif}

:root{
  --lux-ivory:#f8f7f2;
  --lux-mist:rgba(247,250,248,.68);
  --lux-line:rgba(255,255,255,.58);
  --lux-shadow:0 28px 80px rgba(34,74,65,.13);
  --lux-gradient:linear-gradient(125deg,rgba(5,188,208,.82),rgba(8,189,112,.72));
}

body{
  background:
    radial-gradient(circle at 8% 18%,rgba(5,188,208,.055),transparent 27rem),
    radial-gradient(circle at 92% 68%,rgba(8,189,112,.05),transparent 30rem),
    var(--lux-ivory);
}

.header{
  background:rgba(250,249,245,.8)!important;
  border-bottom:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 12px 40px rgba(42,74,67,.07);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}

.topbar{
  background:linear-gradient(100deg,#50605d,#6c7d77)!important;
}

.hero-content{
  padding:clamp(30px,4vw,58px);
  border:1px solid rgba(255,255,255,.64);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(242,249,246,.48));
  box-shadow:0 35px 90px rgba(22,59,51,.2);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(5,188,208,.16),transparent 38%,rgba(8,189,112,.13));
}

.hero-content{z-index:3}

.family-card,
.detail-card,
.job,
.phone-card{
  border:1px solid rgba(255,255,255,.72)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(239,246,242,.66))!important;
  box-shadow:var(--lux-shadow);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}

.family-image,
.project-photo,
.case img,
.president-photo img,
.company-gallery figure,
.work-images figure,
.machine-stage img{
  filter:saturate(.88) contrast(.96);
  box-shadow:0 24px 65px rgba(34,70,62,.16);
}

.family-card,
.project-grid article,
.case,
.president-photo,
.company-gallery figure,
.work-images figure{
  position:relative;
}

.family-card::after,
.project-grid article::after,
.president-photo::after,
.company-gallery figure::after,
.work-images figure::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.22),transparent 38%,rgba(5,188,208,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

.project-grid article{
  padding:0 0 28px;
  border-radius:20px;
  background:rgba(255,255,255,.46);
  box-shadow:var(--lux-shadow);
  overflow:hidden;
  backdrop-filter:blur(10px);
}

.project-grid article>span,
.project-grid article>h3,
.project-grid article>a{
  margin-left:24px;
  margin-right:24px;
  position:relative;
  z-index:2;
}

.sub-hero,
.sub-section.gray,
.work-hero{
  background:
    radial-gradient(circle at 78% 12%,rgba(255,255,255,.85),transparent 25rem),
    linear-gradient(128deg,#eef5f2 0%,#f8f6f0 48%,#e9f4f2 100%)!important;
}

.sub-hero::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:28px;
  pointer-events:none;
}

.work-entry{
  padding-left:clamp(20px,3vw,46px)!important;
  padding-right:clamp(20px,3vw,46px)!important;
  border:1px solid rgba(255,255,255,.7)!important;
  border-radius:30px;
  margin-bottom:38px;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(239,247,244,.54));
  box-shadow:var(--lux-shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.work-images figure{border-radius:18px;overflow:hidden}
.work-images img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.work-entry:hover .work-images img{transform:none;filter:saturate(.96) contrast(.98)}

.smoothcontact-frame{
  border:1px solid rgba(255,255,255,.76)!important;
  background:rgba(255,255,255,.64)!important;
  box-shadow:0 32px 90px rgba(34,74,65,.14)!important;
  backdrop-filter:blur(16px);
}

.page-cta,
.sub-cta,
.contact{
  background:
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.22),transparent 22rem),
    linear-gradient(115deg,#22aeb5,#49a985 58%,#77a78f)!important;
}

.pill.red,
.button-primary{
  border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(110deg,#28aeb8,#45aa85)!important;
  box-shadow:0 15px 35px rgba(29,137,119,.2);
}

.news-list article{
  display:grid;
  grid-template-columns:130px 90px 1fr auto;
  align-items:center;
  gap:20px;
  border-bottom:1px solid #d9dfdc;
  padding:25px 12px;
}

.news-list article time{font-size:12px;color:#777}
.news-list article span{font-size:9px;font-weight:700;color:var(--brand-green)}
.news-list article p{font-size:13px}
.news-list article b{color:var(--brand-green);font-size:24px}

footer{
  background:
    radial-gradient(circle at 20% 10%,rgba(5,188,208,.08),transparent 24rem),
    linear-gradient(135deg,#f5f4ef,#edf4f1)!important;
  border-top:1px solid rgba(255,255,255,.76)!important;
}

@media(max-width:650px){
  .hero-content{border-radius:20px}
  .sub-hero::before{inset:10px;border-radius:20px}
  .work-entry{border-radius:22px;margin-bottom:22px}
  .news-list article{grid-template-columns:95px 1fr}
  .news-list article p{grid-column:1/-1;margin:0}
  .news-list article b{display:none}
}

.visual-summary{position:relative;max-width:1400px;margin:0 auto;padding:74px 6vw 84px}
.visual-summary::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(8,189,112,.35),transparent)}
.visual-summary-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:40px}
.visual-summary-head h2{font:500 clamp(1.65rem,3vw,3rem)/1.45 var(--display);margin:10px 0 0}
.visual-summary-caption{max-width:480px;font-size:12px;line-height:1.9;color:#68736f;margin:0}
.visual-flow{--node-count:4;display:grid;grid-template-columns:repeat(var(--node-count),1fr);gap:clamp(18px,3vw,42px);list-style:none;padding:0;margin:0;counter-reset:visual-step}
.visual-node{counter-increment:visual-step;position:relative;min-width:0;padding:28px 22px 25px;border:1px solid rgba(255,255,255,.78);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(235,246,241,.62));box-shadow:0 20px 55px rgba(34,74,65,.1);backdrop-filter:blur(13px)}
.visual-node:not(:last-child)::after{content:"";position:absolute;z-index:2;top:45px;left:calc(100% + 7px);width:calc(clamp(18px,3vw,42px) - 14px);height:1px;background:linear-gradient(90deg,var(--brand-cyan),var(--brand-green))}
.visual-node:not(:last-child)::before{content:"";position:absolute;z-index:3;top:41px;right:calc(clamp(18px,3vw,42px) * -1 + 5px);width:8px;height:8px;border-top:1px solid var(--brand-green);border-right:1px solid var(--brand-green);transform:rotate(45deg)}
.visual-symbol{display:grid;place-items:center;width:40px;height:40px;margin-bottom:22px;border:1px solid rgba(5,188,208,.28);border-radius:50%;background:linear-gradient(135deg,rgba(5,188,208,.12),rgba(8,189,112,.16));color:#258f80;font:500 12px/1 var(--display)}
.visual-symbol::before{content:counter(visual-step,decimal-leading-zero)}
.visual-node small{display:block;margin-bottom:8px;color:#79908a;font-size:8px;letter-spacing:.15em}
.visual-node strong{display:block;font:500 clamp(1rem,1.6vw,1.35rem)/1.5 var(--display);color:#34433f}
.visual-node p{margin:10px 0 0;color:#68736f;font-size:10px;line-height:1.75}
.visual-summary[data-count="3"] .visual-flow{--node-count:3}
.visual-summary[data-count="5"] .visual-flow{--node-count:5}
@media(max-width:900px){.visual-summary-head{display:block}.visual-summary-caption{margin-top:18px}.visual-summary[data-count="5"] .visual-flow{--node-count:3}.visual-node:nth-child(3)::after,.visual-node:nth-child(3)::before{display:none}}
@media(max-width:650px){.visual-summary{padding:58px 20px 68px}.visual-flow,.visual-summary[data-count="3"] .visual-flow,.visual-summary[data-count="5"] .visual-flow{grid-template-columns:1fr}.visual-node{display:grid;grid-template-columns:48px 1fr;column-gap:15px;padding:22px}.visual-symbol{grid-row:1/4;margin:0}.visual-node small,.visual-node strong,.visual-node p{grid-column:2}.visual-node:not(:last-child)::after{top:100%;left:42px;width:1px;height:18px;background:linear-gradient(var(--brand-cyan),var(--brand-green))}.visual-node:not(:last-child)::before{top:calc(100% + 10px);left:38px;right:auto;transform:rotate(135deg)}}

html{background:#f7f6f1}
body{opacity:1;transition:opacity .38s ease}
body.page-leaving{opacity:0}

.site-opening{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,#fff 0,#eef7f3 34%,transparent 65%),linear-gradient(135deg,#f8f6f0 0%,#e8f4f0 100%);animation:opening-exit 1s cubic-bezier(.7,0,.3,1) 8.15s forwards}
.opening-panel{position:absolute;z-index:3;top:0;bottom:0;width:50.2%;background:linear-gradient(135deg,rgba(248,247,242,.98),rgba(232,245,240,.97));animation:opening-panel-split 1.05s cubic-bezier(.8,0,.2,1) 7.55s forwards}
.opening-panel-left{left:0;transform-origin:left}.opening-panel-right{right:0;transform-origin:right}
.opening-glow{position:absolute;width:min(78vw,880px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 210deg,rgba(5,188,208,.2),rgba(255,255,255,.7),rgba(8,189,112,.18),rgba(255,255,255,.5));filter:blur(30px);animation:opening-orbit 4s ease-out both}
.opening-lines{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.82) 49%,transparent 63%);transform:translateX(-120%);animation:opening-light 1.5s cubic-bezier(.2,.7,.2,1) .5s both}
.opening-inner{position:relative;z-index:5;display:grid;justify-items:center;width:min(86vw,680px);text-align:center}
.opening-logo{display:block;width:min(46vw,310px);height:auto;opacity:0;transform:translateY(18px);animation:opening-logo .72s cubic-bezier(.2,.7,.2,1) 6.35s forwards}
.opening-rule{width:0;height:1px;margin:25px 0 16px;background:linear-gradient(90deg,var(--brand-cyan),var(--brand-green));animation:opening-rule .7s ease 6.55s forwards}
.opening-eyebrow{margin:0;color:#4b7169;font:600 10px/1.4 var(--display);letter-spacing:.26em;opacity:0;animation:opening-copy .55s ease 6.7s forwards}
.opening-message{margin:20px 0 0;color:#263e38;font:500 clamp(1.55rem,3vw,3.2rem)/1.45 var(--sans);letter-spacing:.04em;opacity:0;transform:translateY(18px);animation:opening-message .72s cubic-bezier(.2,.7,.2,1) 6.85s forwards}
.opening-message strong{font-weight:600;background:linear-gradient(90deg,#078e9d,#087f56);-webkit-background-clip:text;background-clip:text;color:transparent}
.opening-inner::before{content:"";position:absolute;z-index:-1;inset:-36px -52px;border-radius:34px;background:radial-gradient(circle,rgba(250,251,247,.94) 0,rgba(250,251,247,.72) 54%,transparent 76%);filter:blur(9px);opacity:0;animation:opening-copy-bg .65s ease 6.12s forwards}
.c10-motion{position:absolute;z-index:4;left:50%;top:50%;width:min(94vw,920px);height:min(67vw,610px);transform:translate(-50%,-48%);filter:drop-shadow(0 28px 38px rgba(26,76,65,.18));animation:c10-stage 7.3s both}
.c10-ground{position:absolute;left:8%;right:8%;bottom:12%;height:2px;background:linear-gradient(90deg,transparent,rgba(27,111,92,.42),transparent);transform:scaleX(0);animation:c10-ground 1s .15s forwards}
.c10-machine{position:absolute;left:50%;bottom:13%;width:360px;height:170px;transform:translateX(-50%);animation:c10-level 1.2s 2.1s both}
.c10-track{position:absolute;bottom:0;width:142px;height:35px;border:5px solid #243b38;border-radius:22px;background:repeating-linear-gradient(90deg,#304c47 0 8px,#9db0aa 8px 11px);box-shadow:inset 0 0 0 4px #dce6e2}.track-left{left:25px}.track-right{right:25px}
.c10-chassis{position:absolute;left:46px;bottom:25px;width:268px;height:58px;clip-path:polygon(6% 0,94% 0,100% 82%,88% 100%,10% 100%,0 82%);background:linear-gradient(135deg,#fff 0 44%,#e4eee9 45% 100%);border-bottom:7px solid #06a7b6;box-shadow:0 6px 14px rgba(16,50,44,.2)}
.c10-chassis span{position:absolute;right:24px;top:16px;color:#087d6b;font:800 14px/1 var(--display);letter-spacing:.04em}
.c10-counterweight{position:absolute;z-index:1;left:22px;bottom:66px;width:84px;height:72px;border-radius:24px 8px 8px 18px;background:linear-gradient(135deg,#263d39,#54716a);transform:translateX(32px);animation:c10-counter 1s 3.4s cubic-bezier(.2,.8,.2,1) forwards}
.c10-upper{position:absolute;z-index:2;left:112px;bottom:68px;width:150px;height:92px;transform-origin:70px 80px;animation:c10-slew 1.5s 4.8s cubic-bezier(.2,.7,.2,1) both}
.c10-cab{position:absolute;left:7px;bottom:0;width:116px;height:76px;clip-path:polygon(22% 0,84% 0,100% 32%,92% 100%,0 100%,0 32%);background:linear-gradient(135deg,#fefefe 0 48%,#dceae5 49%);border-bottom:8px solid #09a9b5}
.c10-cab::before{content:"";position:absolute;left:28px;top:9px;width:59px;height:27px;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);background:linear-gradient(135deg,#23413d,#6d8983)}
.c10-cab span{position:absolute;left:22px;bottom:14px;color:#08765c;font:800 8px/1 var(--display);letter-spacing:.08em}
.c10-boom{position:absolute;z-index:3;left:70px;top:9px;width:195px;height:28px;transform-origin:8px 20px;transform:rotate(-5deg);animation:c10-boom-lift 2s 3.55s cubic-bezier(.3,.75,.15,1) forwards}
.c10-boom>i{position:absolute;left:0;top:0;display:block;height:25px;transform-origin:left center;clip-path:polygon(0 12%,100% 0,100% 100%,0 88%)}.boom-one{width:195px;background:#f7faf8;border-left:8px solid #08a9b6}.boom-two{width:175px;background:#dceae5;transform:translateX(95px) scaleX(.24);animation:c10-telescope-two 1.35s 4.35s cubic-bezier(.15,.75,.15,1) forwards}.boom-three{width:155px;background:#f9fbfa;transform:translateX(130px) scaleX(.12);animation:c10-telescope-three 1.25s 4.75s cubic-bezier(.15,.75,.15,1) forwards}
.c10-wire{position:absolute;left:281px;top:13px;width:2px;height:0;background:#30453f;transform:rotate(55deg);transform-origin:top;animation:c10-wire-drop .9s 5.35s forwards}.c10-wire b{position:absolute;left:-7px;bottom:-13px;width:14px;height:14px;border:3px solid #08a379;border-top:0;border-radius:0 0 10px 10px}
.c10-leg{position:absolute;z-index:3;left:50%;bottom:18%;width:196px;height:17px;border-radius:9px;background:linear-gradient(90deg,#15544c,#08a67f);transform-origin:8px 50%;opacity:0}.c10-leg i{position:absolute;right:0;top:5px;width:72px;height:8px;border-radius:5px;background:#d9e7e2;transform-origin:left;transform:scaleX(.2);animation:c10-leg-extend .75s 1.15s forwards}.c10-leg b{position:absolute;right:-3px;top:8px;width:7px;height:64px;background:#486c65;transform-origin:top;transform:scaleY(.08);animation:c10-jack-down .75s 1.72s forwards}.c10-leg b::after{content:"";position:absolute;left:-13px;bottom:-5px;width:34px;height:8px;border-radius:50%;background:#173b35}
.leg-rear-left{margin-left:-26px;transform:rotate(180deg);animation:c10-leg-rear-left 1s .25s forwards}.leg-front-left{margin-left:-18px;transform:rotate(180deg);animation:c10-leg-front-left 1s .48s forwards}.leg-rear-right{margin-left:18px;animation:c10-leg-rear-right 1s .35s forwards}.leg-front-right{margin-left:10px;animation:c10-leg-front-right 1s .58s forwards}
.c10-status{position:absolute;left:50%;bottom:3%;display:flex;gap:20px;transform:translateX(-50%);white-space:nowrap}.c10-status span{color:#57716a;font:700 9px/1 var(--display);letter-spacing:.13em;opacity:.24}.c10-status span:nth-child(1){animation:c10-status .5s .3s alternate 2}.c10-status span:nth-child(2){animation:c10-status .5s 2s alternate 2}.c10-status span:nth-child(3){animation:c10-status .5s 3.7s alternate 3}.c10-status span:nth-child(4){animation:c10-status .5s 5.2s alternate 2}
.replay-opening{position:fixed;z-index:1100;right:20px;bottom:20px;display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(16,104,87,.18);border-radius:999px;background:rgba(249,249,246,.76);backdrop-filter:blur(12px);color:#31584f;font:600 8px/1 var(--display);letter-spacing:.18em;cursor:pointer;box-shadow:0 10px 32px rgba(36,78,67,.1);transition:transform .25s ease,background .25s ease}
.replay-opening:hover{transform:translateY(-3px);background:#fff}
.replay-opening span{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--brand-cyan),var(--brand-green));box-shadow:0 0 0 4px rgba(5,188,208,.1)}
.site-opening.skip-opening{display:none}

.scroll-progress{position:fixed;z-index:1000;left:0;top:0;width:var(--scroll-progress,0%);height:3px;background:linear-gradient(90deg,var(--brand-cyan),var(--brand-green));box-shadow:0 0 18px rgba(5,188,208,.55);pointer-events:none}

.hero-kinetic{position:absolute;z-index:2;inset:auto -3vw 3%;display:flex;gap:5vw;white-space:nowrap;pointer-events:none;mix-blend-mode:soft-light;transform:translateX(var(--kinetic-x,0))}
.hero-kinetic span{font:500 clamp(7rem,17vw,18rem)/.8 var(--display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.48)}
.kinetic-rail{overflow:hidden;overflow:clip;max-width:100%;contain:paint;padding:17px 0;border-top:1px solid rgba(8,189,112,.18);border-bottom:1px solid rgba(5,188,208,.16);background:linear-gradient(90deg,#f1f7f4,#faf7f1,#edf6f3)}
.kinetic-rail>div{display:flex;width:max-content;align-items:center;gap:30px;animation:rail-move 22s linear infinite}
.kinetic-rail span{font:500 10px/1 var(--display);letter-spacing:.22em;color:#54645f}
.kinetic-rail i{font-style:normal;color:var(--brand-green);opacity:.6}

.reveal-effect{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-effect.is-revealed{opacity:1;transform:none}
.reveal-effect:nth-of-type(even){transition-delay:.08s}

.image-reveal{position:relative;overflow:hidden}
.image-reveal::before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:linear-gradient(115deg,#eaf4f1,#f7f5ef);transform-origin:right;transform:scaleX(1);transition:transform 1.15s cubic-bezier(.7,0,.3,1)}
.image-reveal.is-revealed::before{transform:scaleX(0)}

.hero-video,.sub-hero::after{will-change:transform}
.hero-content>*{opacity:0;transform:translateY(18px);animation:hero-copy-in .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-content>*:nth-child(2){animation-delay:.12s}.hero-content>*:nth-child(3){animation-delay:.24s}.hero-content>*:nth-child(4){animation-delay:.36s}

.header nav a{position:relative}
.header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:linear-gradient(90deg,var(--brand-cyan),var(--brand-green));transform:scaleX(0);transform-origin:right;transition:transform .38s ease}
.header nav a:hover::after,.header nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

@media(hover:hover) and (pointer:fine){
  .family-card,.project-grid article,.visual-node,.work-entry{transform:perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateY(var(--lift,0));transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
  .family-card:hover,.project-grid article:hover,.visual-node:hover,.work-entry:hover{--lift:-7px;box-shadow:0 34px 90px rgba(27,80,69,.18)}
}

@keyframes opening-logo{to{opacity:1;transform:none}}
@keyframes opening-rule{to{width:min(60vw,330px)}}
@keyframes opening-copy{to{opacity:1}}
@keyframes opening-message{to{opacity:1;transform:none}}
@keyframes opening-copy-bg{to{opacity:1}}
@keyframes c10-stage{0%{opacity:0;transform:translate(-50%,-44%) scale(.86)}7%,80%{opacity:1}100%{opacity:.2;transform:translate(-50%,-48%) scale(.96)}}
@keyframes c10-ground{to{transform:scaleX(1)}}
@keyframes c10-leg-rear-left{0%{opacity:0;transform:rotate(180deg)}100%{opacity:1;transform:translateX(-145px) rotate(212deg)}}
@keyframes c10-leg-front-left{0%{opacity:0;transform:rotate(180deg)}100%{opacity:1;transform:translateX(-128px) translateY(42px) rotate(153deg)}}
@keyframes c10-leg-rear-right{0%{opacity:0;transform:rotate(0)}100%{opacity:1;transform:translateX(142px) rotate(-31deg)}}
@keyframes c10-leg-front-right{0%{opacity:0;transform:rotate(0)}100%{opacity:1;transform:translateX(126px) translateY(42px) rotate(27deg)}}
@keyframes c10-leg-extend{to{transform:scaleX(1)}}
@keyframes c10-jack-down{to{transform:scaleY(1)}}
@keyframes c10-level{0%,15%{transform:translateX(-50%) translateY(13px) rotate(-2deg)}55%{transform:translateX(-50%) translateY(-5px) rotate(1deg)}100%{transform:translateX(-50%) translateY(0) rotate(0)}}
@keyframes c10-counter{to{transform:translateX(-18px)}}
@keyframes c10-boom-lift{0%{transform:rotate(-5deg)}55%{transform:rotate(-48deg)}100%{transform:rotate(-62deg)}}
@keyframes c10-telescope-two{to{transform:translateX(162px) scaleX(1)}}
@keyframes c10-telescope-three{to{transform:translateX(304px) scaleX(1)}}
@keyframes c10-slew{0%,10%{transform:translateX(-14px) skewY(0)}55%{transform:translateX(16px) skewY(-4deg)}100%{transform:translateX(0) skewY(0)}}
@keyframes c10-wire-drop{to{height:96px}}
@keyframes c10-status{to{opacity:1;color:#058d77}}
@keyframes opening-light{to{transform:translateX(120%)}}
@keyframes opening-orbit{from{transform:scale(.75) rotate(-18deg);opacity:.2}to{transform:scale(1.15) rotate(22deg);opacity:.8}}
@keyframes opening-panel-split{to{transform:scaleX(0)}}
@keyframes opening-exit{0%{clip-path:inset(0 0 0 0);opacity:1}99%{clip-path:inset(0 0 100% 0);opacity:1;visibility:visible}100%{clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;pointer-events:none}}
@keyframes hero-copy-in{to{opacity:1;transform:none}}
@keyframes rail-move{to{transform:translateX(-50%)}}

/* C10e official red/black finish and hydraulic-paced motion */
.site-opening{background:radial-gradient(circle at 50% 48%,#fff 0,#f5f2ef 38%,transparent 68%),linear-gradient(135deg,#faf9f6 0%,#ece8e4 100%);animation-delay:10.15s}
.opening-panel{background:linear-gradient(135deg,rgba(250,249,246,.98),rgba(239,235,231,.97));animation-delay:9.55s}
.opening-logo{animation-delay:8.35s}.opening-rule{animation-delay:8.55s}.opening-eyebrow{animation-delay:8.7s}.opening-message{animation-delay:8.85s}
.opening-inner::before{animation-delay:8.12s}
.c10-motion{filter:drop-shadow(0 28px 38px rgba(35,21,23,.18));animation-duration:9.3s}
.c10-ground{background:linear-gradient(90deg,transparent,rgba(47,42,43,.42),transparent)}
.c10-machine{animation-duration:3.75s;animation-delay:0}
.c10-track{border-color:#171719;background:repeating-linear-gradient(90deg,#161619 0 8px,#78787b 8px 11px);box-shadow:inset 0 0 0 4px #bfc0c2}
.c10-chassis{background:linear-gradient(135deg,#d71535 0 46%,#a90824 47% 100%);border-bottom-color:#171719;box-shadow:0 6px 14px rgba(44,10,16,.24)}
.c10-chassis span,.c10-cab span{color:#fff}
.c10-counterweight{background:linear-gradient(135deg,#cf1331,#8d071d);animation-duration:1.15s;animation-delay:4.25s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.c10-upper{animation-duration:1.7s;animation-delay:7.1s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.c10-cab{background:linear-gradient(135deg,#d91938 0 48%,#a80722 49%);border-bottom-color:#171719}
.c10-cab::before{background:linear-gradient(135deg,#151518,#48484c)}
.c10-boom{animation-duration:1.65s;animation-delay:5.05s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.boom-one{background:#c70c2c;border-left-color:#7d0618}.boom-two{background:#e0334e;animation-duration:1.25s;animation-delay:6.05s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.boom-three{background:#b60926;animation-duration:1.15s;animation-delay:6.65s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.c10-wire{background:#242426;animation-delay:7.65s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.c10-wire b{border-color:#d4d500;border-top:0}
.c10-leg{background:linear-gradient(90deg,#8f071d,#cf1231)}.c10-leg i{background:#222226;animation-duration:.85s;animation-delay:1.75s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.c10-leg b{background:#747477;animation-duration:.9s;animation-delay:2.65s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.c10-leg b::after{background:#151518}
.leg-rear-left{animation-duration:1.25s;animation-delay:.25s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.leg-rear-right{animation-duration:1.25s;animation-delay:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.leg-front-left{animation-duration:1.25s;animation-delay:.65s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.leg-front-right{animation-duration:1.25s;animation-delay:.85s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.c10-status span:nth-child(1){animation-duration:.7s;animation-delay:.4s}.c10-status span:nth-child(2){animation-duration:.7s;animation-delay:2.55s}.c10-status span:nth-child(3){animation-duration:.7s;animation-delay:5.1s}.c10-status span:nth-child(4){animation-duration:.7s;animation-delay:7.15s}
@keyframes c10-stage{0%{opacity:0;transform:translate(-50%,-46%) scale(.9)}5%,84%{opacity:1}100%{opacity:.18;transform:translate(-50%,-48%) scale(.96)}}
@keyframes c10-level{0%,72%{transform:translateX(-50%) translateY(9px) rotate(-1.2deg)}86%{transform:translateX(-50%) translateY(2px) rotate(-.3deg)}100%{transform:translateX(-50%) translateY(0) rotate(0)}}
@keyframes c10-boom-lift{0%,12%{transform:rotate(-5deg)}100%{transform:rotate(-62deg)}}
@keyframes c10-slew{0%,12%{transform:translateX(0) scaleX(1)}55%{transform:translateX(9px) scaleX(.92)}100%{transform:translateX(0) scaleX(1)}}
@keyframes c10-status{to{opacity:1;color:#b50b28}}

/* HISATEC-only opening */
.site-opening{background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.98) 0,rgba(235,247,243,.86) 36%,transparent 66%),linear-gradient(135deg,#f8f7f2 0%,#e8f3ef 100%);animation-duration:.42s;animation-delay:.72s}
.opening-panel{background:linear-gradient(135deg,rgba(249,248,244,.98),rgba(230,243,238,.97));animation-duration:.46s;animation-delay:.48s}
.opening-glow{width:min(66vw,720px);background:conic-gradient(from 215deg,rgba(5,188,208,.2),rgba(255,255,255,.82),rgba(8,189,112,.18),rgba(255,255,255,.68));animation-duration:4.2s}
.opening-lines{animation-duration:1.8s;animation-delay:.25s}
.opening-inner{animation:hisatec-opening-focus .9s cubic-bezier(.2,.7,.2,1) both}
.opening-inner::before{inset:-76px -110px;background:radial-gradient(circle,rgba(252,252,249,.97) 0,rgba(249,252,249,.78) 48%,transparent 73%);opacity:0;animation:opening-copy-bg .32s ease .02s forwards}
.opening-inner::after{content:"";position:absolute;z-index:-2;inset:-105px -155px;border:1px solid rgba(8,143,126,.14);border-radius:50%;opacity:0;transform:scale(.78);animation:hisatec-ring .75s cubic-bezier(.2,.7,.2,1) .08s forwards}
.opening-logo{width:min(50vw,340px);animation-duration:.35s;animation-delay:.04s}
.opening-rule{margin-top:29px;animation-duration:.35s;animation-delay:.18s}
.opening-eyebrow{animation-delay:.32s}
.opening-message{animation-duration:.36s;animation-delay:.44s}
.c10-motion{display:none!important}
@keyframes hisatec-opening-focus{0%{transform:scale(.95);filter:blur(4px)}18%,82%{transform:scale(1);filter:blur(0)}100%{transform:scale(1.015);filter:blur(0)}}
@keyframes hisatec-ring{0%{opacity:0;transform:scale(.78)}35%{opacity:1}100%{opacity:.36;transform:scale(1.08)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .site-opening{display:none}
  .reveal-effect{opacity:1;transform:none}
  .image-reveal::before{display:none}
  .kinetic-rail>div{animation:none}
}
@media(max-width:650px){
  .hero-kinetic{inset-inline:0;overflow:hidden}
  .opening-inner{width:84vw}
  .c10-motion{width:138vw;height:95vw;transform:translate(-50%,-50%) scale(.72)}
  .c10-status{gap:10px}.c10-status span{font-size:7px;letter-spacing:.06em}
  .opening-inner::before{inset:-28px -18px}
  .opening-logo{width:min(62vw,260px)}
  .opening-message{font-size:1.5rem}
  .replay-opening{right:12px;bottom:12px}
  .reveal-effect{transform:translateY(22px)}
}

/* Keep the cinematic opener available on demand without delaying first paint. */
.site-opening{display:none}
.site-opening.is-replaying{display:grid}
.hero-content>*{opacity:1;transform:none;animation:none}
.hero{background:#263632}
.hero-poster{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}


.logo {
  display: flex;
  align-items: center;
  width: 190px;
  height: 58px;
  overflow: hidden;
}

:root {
  --red: #08b69b;
  --brand-cyan: #05bcd0;
  --brand-green: #087f56;
  --brand-charcoal: #353538;
  --display: "IBM Plex Sans JP", "Noto Sans JP", "Yu Gothic", sans-serif;
}

html[lang="ja"],
body {
  font-kerning: normal;
  font-feature-settings: "palt" 0;
  text-rendering: optimizeLegibility;
}

body,
p,
a,
li,
th,
td,
label,
input,
select,
textarea {
  letter-spacing: 0;
  line-break: strict;
  word-break: normal;
}

h1,
h2,
h3,
h4,
.hero h1,
.sub-hero h1,
.sub-title,
.page-cta h2,
.contact h2,
.family h2,
.hoeflon h2,
.section-heading h2,
.process h2 {
  letter-spacing: 0 !important;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

.kicker,
.section-kicker,
.breadcrumbs {
  letter-spacing: 0.14em;
}

.logo img {
  display: block;
  width: 190px;
  height: auto;
  object-fit: contain;
}

.white-logo {
  width: 220px;
  height: 68px;
}

.white-logo img {
  width: 220px;
  filter: none;
}

.header {
  background: #fff;
  color: var(--brand-charcoal);
  border-bottom: 1px solid #e8e8e8;
}

.header nav b {
  color: var(--brand-cyan);
}

.hero-video {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77777778vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  border: 0;
  transform: translate(-50%, -50%);
}

.hero-shade {
  z-index: 1;
}

.red,
.hero-badge,
.spec {
  background: linear-gradient(110deg, var(--brand-cyan), var(--brand-green));
}

.family h2 em,
.hoeflon h2 em,
.section-kicker,
.kicker,
.family-copy > span,
.project-grid article > span,
.text-arrow b,
.news-list span,
.news-list b {
  color: var(--brand-green);
}

.hoeflon-copy li::before {
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
}

.lineup-stage {
  margin-left: 5vw;
  height: auto;
  min-height: 0;
  display: block;
  background: transparent;
  border-radius: 18px;
  overflow: visible;
  box-shadow: 0 28px 60px rgb(0 0 0 / 20%);
}

.lineup-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
  filter: none;
  border-radius: 18px;
}

.contact {
  background: linear-gradient(110deg, #05adc6, #08bc70);
}

footer {
  background: #f3f3f1;
  color: var(--brand-charcoal);
  border-top: 1px solid #dedede;
}

footer p,
footer > small {
  color: #747474;
}

/* Refined visual direction */
body {
  color: #282d2e;
  background: #fcfcfb;
}

.topbar {
  background: #292d2e;
  color: #dfe3e2;
}

.header {
  height: 92px;
  padding-inline: 5.5vw;
  box-shadow: 0 8px 28px rgb(0 0 0 / 4%);
}

.header nav {
  gap: 34px;
}

.header nav a {
  font-weight: 500;
  font-size: 12px;
}

.pill {
  border-radius: 5px;
  padding: 16px 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.red {
  background: #079b8a;
}

.red:hover {
  background: #067f73;
}

.hero {
  min-height: 690px;
}

.hero-shade {
  background: linear-gradient(90deg, rgb(10 18 19 / 68%) 0%, rgb(10 18 19 / 30%) 57%, rgb(10 18 19 / 8%)),
              linear-gradient(0deg, rgb(0 0 0 / 28%), transparent 48%);
}

.hero h1 {
  font-weight: 600;
  line-height: 1.12;
}

.hero h1 .hero-name {
  display: block;
  font: inherit;
}

.hero h1 .hero-promise {
  display: block;
  margin-top: .22em;
  font-family: var(--font);
  font-size: clamp(25px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
}

.hero h1 .copy-line {
  display: block;
  white-space: nowrap;
}

.hero h1,
.sub-hero h1,
.family h2,
.hoeflon h2,
.section-heading h2,
.process h2,
.contact h2,
.sub-title,
.visual-summary h2 {
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: wrap;
}

.seo-intro {
  max-width: 820px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}

.seo-intro strong {
  color: var(--brand-green-deep);
  font-weight: 600;
}

@media (max-width: 650px) {
  .hero-content {
    left: 14px;
    right: 14px;
    padding: 25px 22px;
  }

  .hero h1 .hero-name {
    font-size: clamp(42px, 13vw, 55px);
  }

  .hero h1 .hero-promise {
    font-size: clamp(20px, 5.8vw, 25px);
    line-height: 1.42;
  }
}

@media (max-width: 980px) {
  .header{--mobile-header-height:92px}
  body.nav-open{overflow:hidden;overscroll-behavior:none}
  .header.menu-open nav{position:fixed;z-index:30;top:var(--mobile-header-height);right:0;bottom:0;left:0;height:calc(100vh - var(--mobile-header-height));height:calc(100dvh - var(--mobile-header-height));display:flex!important;flex-direction:column;align-items:flex-start;gap:0;margin:0;padding:34px 24px calc(44px + env(safe-area-inset-bottom));background:rgba(8,18,16,.97);color:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow-x:hidden;overflow-y:auto}
  .header.menu-open nav a{display:flex;width:100%;align-items:center;justify-content:space-between;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.13);color:#fff;font-size:15px}
  .menu{position:relative;z-index:31;min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .menu{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .header.menu-open{z-index:100}
  .header.menu-open nav{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .menu span{transition:transform .25s ease,opacity .2s ease}
  .header.menu-open .menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .header.menu-open .menu span:nth-child(2){opacity:0}
  .header.menu-open .menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media (max-width: 359px) {
  .hero-content {
    padding-right: 18px;
    padding-left: 18px;
  }

  .hero h1 .hero-promise {
    font-size: 20px;
  }
}

.hero-content > p:not(.kicker) {
  color: rgb(255 255 255 / 88%);
  font-weight: 400;
}

.hero-badge {
  right: 4.5vw;
  bottom: 5.5%;
  width: auto;
  height: auto;
  min-width: 230px;
  padding: 15px 18px;
  border-radius: 3px;
  transform: none;
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
  background: rgb(12 19 20 / 72%);
  border: 1px solid rgb(255 255 255 / 26%);
  border-left: 3px solid var(--brand-green);
  backdrop-filter: blur(12px);
  box-shadow: 0 15px 35px rgb(0 0 0 / 18%);
}

.hero-badge strong {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #82d8c7;
}

.hero-badge span {
  padding-left: 14px;
  border-left: 1px solid rgb(255 255 255 / 25%);
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.11em;
  color: rgb(255 255 255 / 88%);
}

.section {
  padding-top: 135px;
  padding-bottom: 135px;
}

.family h2,
.hoeflon h2,
.section-heading h2,
.process h2,
.contact h2 {
  font-weight: 600;
  line-height: 1.2;
}

.family-card {
  border-radius: 7px;
  background: #fff;
  border: 1px solid #e3e6e4;
}

.family-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgb(23 38 36 / 9%);
}

.family-copy i {
  border: 1px solid #e2e5e3;
  box-shadow: 0 5px 15px rgb(0 0 0 / 4%);
}

.hoeflon {
  background: #f2f4f2;
}

.lineup-stage {
  border-radius: 7px;
  box-shadow: 0 25px 55px rgb(0 0 0 / 15%);
}

.lineup-stage img,
.project-photo {
  border-radius: 7px;
}

.project-grid h3 {
  font-weight: 600;
}

.process {
  background: #222929;
}

.contact,
.page-cta {
  background: #263130;
  border-top: 3px solid var(--brand-green);
}

.contact .section-kicker,
.page-cta .section-kicker {
  color: #78d2c0;
}

.contact-links .red {
  background: #079b8a;
}

.sub-hero {
  background: #f2f4f2;
}

.sub-hero::after {
  opacity: 0.07;
}

.detail-card,
.job,
.case img,
.president-photo img,
.access iframe {
  border-radius: 7px;
}

/* Light, editorial elegance — intentionally non-industrial */
body {
  background: #faf9f6;
  color: #35403d;
}

.topbar {
  background: #123f38;
  color: #fff;
  border-bottom: 1px solid #0b302a;
  box-shadow: inset 0 -1px rgba(255, 255, 255, .08);
  font-weight: 700;
}

.topbar span {
  color: #bff3e6;
  font-weight: 700;
  letter-spacing: .08em;
}

.topbar > a {
  color: #fff;
  font-weight: 700;
  opacity: 1;
  -webkit-text-fill-color: #fff;
}

.topbar > a:first-of-type {
  font-size: 12px;
  letter-spacing: .05em;
}

.topbar > a:last-child {
  display: inline-flex;
  min-height: 30px;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #123f38;
  line-height: 1;
  opacity: 1;
  -webkit-text-fill-color: #123f38;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

.header {
  background: rgb(250 249 246 / 94%);
  color: #35403d;
  border-color: #e6e7e2;
  backdrop-filter: blur(18px);
}

.hero {
  color: #2f3a37;
  background-color: #e7ece9;
}

.hero-video iframe {
  filter: saturate(.72) contrast(.88) brightness(1.08);
}

.hero-shade {
  background:
    linear-gradient(90deg, rgb(250 249 246 / 94%) 0%, rgb(250 249 246 / 78%) 38%, rgb(250 249 246 / 22%) 70%, transparent),
    linear-gradient(0deg, rgb(244 246 243 / 25%), transparent 50%);
}

.hero-content {
  padding: 38px 40px;
  border-left: 1px solid rgb(69 104 94 / 28%);
}

.hero-content > p:not(.kicker) {
  color: #52605c;
  text-shadow: none;
}

.hero .white {
  background: rgb(255 255 255 / 72%);
  color: #34413d;
  border: 1px solid #ccd6d1;
  backdrop-filter: blur(8px);
}

.hero-badge {
  color: #35403d;
  background: rgb(250 249 246 / 82%);
  border: 1px solid rgb(80 111 102 / 25%);
  border-left: 3px solid #75bcae;
  box-shadow: 0 16px 38px rgb(46 69 62 / 10%);
}

.hero-badge strong {
  color: #478f81;
}

.hero-badge span {
  color: #4c5b56;
  border-left-color: rgb(65 90 82 / 20%);
}

.hero-scroll {
  color: #4f5d58;
}

.family,
.projects,
.news {
  background: #faf9f6;
}

.family-card {
  background: #fdfdfb;
  border-color: #e1e5e1;
}

.family-copy i {
  background: #f7f8f5;
}

.hoeflon {
  background: #eef2ef;
}

.process {
  background: #f4f1eb;
  color: #35403d;
  border-top: 1px solid #e3dfd7;
  border-bottom: 1px solid #e3dfd7;
}

.process-copy > p:not(.section-kicker),
.process li span {
  color: #66726e;
}

.process li {
  border-bottom-color: #d8ddd8;
}

.process li strong {
  color: #35403d;
}

.contact,
.page-cta {
  background: #e9f2ee;
  color: #35403d;
  border-top: 1px solid #d1e0da;
}

.contact .section-kicker,
.page-cta .section-kicker {
  color: #478f81;
}

.contact .white,
.page-cta .white {
  background: #faf9f6;
  color: #35403d;
  border: 1px solid #cad8d2;
}

.contact-links .red {
  background: #6aa99d;
}

.sub-hero,
.sub-section.gray {
  background: #f1f3ef;
}

.sub-hero::after {
  background: radial-gradient(circle, #badfd6 0%, transparent 68%);
}

footer {
  background: #f7f5f0;
  border-top-color: #dedfd9;
}

@media (max-width: 650px) {
  .header {
    --mobile-header-height: 70px;
  }

  .hero-content {
    padding: 28px 24px;
    background: rgb(250 249 246 / 78%);
    backdrop-filter: blur(5px);
  }
}

footer {
  grid-template-columns: 1.2fr 1fr 1.3fr .8fr;
  align-items: start;
}

.footer-links,
.footer-social {
  display: grid;
  gap: 9px;
}

.footer-links a,
.footer-social a {
  width: fit-content;
  font-size: 10px;
  font-weight: 600;
}

.footer-links a:hover,
.footer-social a:hover {
  color: var(--brand-green);
}

.copyright {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.page-top-button {
  position: fixed;
  z-index: 80;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  width: 62px;
  height: 62px;
  padding: 0;
  place-content: center;
  place-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(226, 244, 238, .82));
  color: var(--brand-charcoal);
  box-shadow: 0 14px 36px rgba(22, 64, 53, .19);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.92);
  transition: opacity .3s ease, transform .3s ease, border-color .2s ease, background .2s ease;
}

.page-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.page-top-button span {
  width: 10px;
  height: 10px;
  border-top: 1.5px solid var(--brand-green);
  border-left: 1.5px solid var(--brand-green);
  transform: rotate(45deg) translate(2px, 2px);
}

.page-top-button small {
  font: 700 8px/1 var(--display);
  letter-spacing: .12em;
}

.page-top-button:hover,
.page-top-button:focus-visible {
  border-color: rgba(8, 189, 112, .55);
  background: rgba(255, 255, 255, .98);
  transform: translateY(-3px);
  outline: none;
}

@media (max-width: 650px) {
  .topbar {
    min-height: 48px;
    height: 48px;
    padding: 4px 14px;
    background: #eef3f0;
    color: #35403d;
  }

  .topbar > a:last-child {
    display: inline-flex;
    min-width: 104px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border: 1px solid #0d6559;
    border-radius: 999px;
    background: #176f63;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(23, 111, 99, .22);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .topbar > a:last-child:focus-visible {
    outline: 3px solid rgba(23, 111, 99, .3);
    outline-offset: 2px;
  }

  .header .logo {
    width: 145px;
    height: 46px;
  }

  .header .logo img {
    width: 145px;
  }

  .hero-video iframe {
    width: 220vh;
  }

  .menu span {
    background: var(--brand-charcoal);
  }

  .lineup-stage {
    height: auto;
    margin-left: 0;
  }

  footer {
    grid-template-columns: 1fr;
  }

  .copyright {
    grid-column: auto;
  }

  .page-top-button {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top-button {
    transition: none;
  }
}

/* Stable mobile navigation trigger for Android Chrome and iOS Safari */
@media (max-width: 980px) {
  .topbar {
    display: none;
  }

  .header .header-cta {
    display: inline-flex !important;
    flex: 0 0 88px;
    width: 88px;
    min-width: 88px;
    height: 42px;
    min-height: 42px;
    margin-right: 0;
    margin-left: auto;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #0d6559;
    border-radius: 999px;
    background: #176f63;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(23, 111, 99, .22);
    font-size: 0;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    appearance: none;
    -webkit-appearance: none;
    -webkit-text-fill-color: #fff;
  }

  .header .header-cta::after {
    content: "お問い合わせ";
    color: #fff;
    font-size: 11px;
    line-height: 1;
    -webkit-text-fill-color: #fff;
  }

  html[lang="en"] .header .header-cta::after {
    content: "Contact";
    font-size: 12px;
  }

  html[lang="de"] .header .header-cta::after { content: "Kontakt"; }
  html[lang="it"] .header .header-cta::after { content: "Contatti"; }
  html[lang="fr"] .header .header-cta::after { content: "Contact"; }
  html[lang="es"] .header .header-cta::after { content: "Contacto"; }
  html[lang="tr"] .header .header-cta::after { content: "İletişim"; }
  html[lang="th"] .header .header-cta::after { content: "ติดต่อเรา"; }
  html[lang="vi"] .header .header-cta::after { content: "Liên hệ"; }
  html[lang="ru"] .header .header-cta::after { content: "Связаться"; }
  html[lang="id"] .header .header-cta::after { content: "Kontak"; }

  .header .menu {
    position: relative;
    z-index: 101;
    display: inline-flex !important;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    margin-left: 8px;
    padding: 11px 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    border: 1px solid rgba(53, 64, 61, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #263d37;
    box-shadow: 0 5px 16px rgba(22, 64, 53, .12);
    font-size: 0;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
    opacity: 1;
    visibility: visible;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .header.menu-open nav {
    counter-reset: mobile-navigation;
    gap: 8px;
    padding-top: 24px;
    background:
      radial-gradient(circle at 92% 8%, rgba(30, 162, 139, .28), transparent 28%),
      radial-gradient(circle at 5% 92%, rgba(9, 120, 104, .22), transparent 34%),
      linear-gradient(155deg, rgba(9, 25, 22, .98), rgba(13, 47, 40, .97));
  }

  .header.menu-open nav::before {
    content: "HISATEC  /  NAVIGATION";
    display: block;
    width: 100%;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .22em;
  }

  .header.menu-open nav a {
    counter-increment: mobile-navigation;
    position: relative;
    flex: 0 0 auto;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    width: 100%;
    min-height: 58px;
    padding: 10px 14px 10px 12px;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    color: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .02em;
    white-space: normal;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .header.menu-open nav a::before {
    content: counter(mobile-navigation, decimal-leading-zero);
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(107, 224, 196, .28);
    border-radius: 50%;
    background: rgba(23, 111, 99, .2);
    color: #87dfca;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
  }

  .header.menu-open nav a::after {
    content: "↗";
    color: #87dfca;
    font: 400 17px/1 sans-serif;
    text-align: right;
  }

  .header.menu-open nav a:active {
    border-color: rgba(135, 223, 202, .45);
    background: rgba(23, 111, 99, .28);
  }

  .header.menu-open nav .language-switch {
    counter-increment: none;
    display: flex !important;
    width: min(180px, 100%);
    min-height: 48px;
    margin-top: 10px;
    padding: 8px 14px;
    align-self: flex-start;
    justify-content: flex-start;
    border-color: rgba(135, 223, 202, .45);
    border-radius: 999px;
    background: #eef8f4;
    color: #145f54;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .header.menu-open nav .language-switch::before {
    content: "LANGUAGE";
    display: inline;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #145f54;
    font-size: 9px;
    text-align: left;
  }

  .header.menu-open nav .language-switch::after {
    content: "→";
    margin-left: auto;
    color: #145f54;
  }

  .header .menu span {
    display: block !important;
    flex: 0 0 2px;
    width: 26px;
    height: 2px;
    min-height: 2px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #263d37 !important;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform-origin: center;
  }

  .header.menu-open .menu span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .header.menu-open .menu span:nth-child(2) {
    opacity: 0;
  }

  .header.menu-open .menu span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media (max-width: 370px) {
  .header {
    padding-right: 12px;
    padding-left: 12px;
  }

  .header .logo,
  .header .logo img {
    width: 128px;
  }

  .header .header-cta {
    flex-basis: 82px;
    width: 82px;
    min-width: 82px;
  }

  .header .menu {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
  }
}

/* FARO Focus 3D scanning equipment */
.family-image.survey {
  background-image: url("assets/site/faro-focus-front.jpg");
  background-position: center 48%;
}

.survey-equipment-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-self: center;
}

.survey-equipment-gallery figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(26, 76, 65, .12);
  border-radius: 16px;
  background: #e8eeeb;
  box-shadow: 0 16px 38px rgba(29, 65, 56, .12);
}

.survey-equipment-gallery .survey-equipment-main {
  grid-column: 1 / -1;
}

.survey-equipment-gallery img,
.service-detail .split .survey-equipment-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #e8eeeb;
}

.survey-equipment-gallery .survey-equipment-main img,
.service-detail .split .survey-equipment-gallery .survey-equipment-main img {
  aspect-ratio: 16 / 11;
}

@media (max-width: 600px) {
  .survey-equipment-gallery {
    order: -1;
    gap: 8px;
  }

  .survey-equipment-gallery figure {
    border-radius: 12px;
  }
}

.sub-hero{padding:105px 7vw 90px;background:#f3f3f1;position:relative;overflow:hidden}.sub-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-80px;top:-150px;background:linear-gradient(135deg,#05bcd0,#08bd70);opacity:.13}.breadcrumbs{font-size:9px;letter-spacing:.12em;color:#777;margin-bottom:45px}.sub-hero h1{font:800 clamp(48px,7vw,92px)/1.04 var(--display);margin:0;letter-spacing:-.04em}.sub-hero p:last-child{max-width:640px;font-size:13px;line-height:2;color:#666;margin:28px 0 0}.sub-section{padding:95px 8vw}.sub-section.gray{background:#f3f3f1}.sub-title{font:800 clamp(35px,4vw,58px)/1.2 var(--display);margin:0 0 45px}.split{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.split img{width:100%;border-radius:18px}.split p{font-size:13px;line-height:2;color:#626262}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.detail-card{padding:35px;background:#f3f3f1;border-radius:16px}.detail-card b{color:var(--brand-green);font-size:10px}.detail-card h2,.detail-card h3{font:700 24px/1.35 var(--display)}.detail-card p{font-size:11px;line-height:1.9;color:#666}.data-table{width:100%;border-collapse:collapse;font-size:12px}.data-table th,.data-table td{padding:20px;border-bottom:1px solid #ddd;text-align:left}.data-table th{width:26%;color:#777}.case{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;padding:70px 0;border-bottom:1px solid #ddd;align-items:center}.case img{width:100%;height:390px;object-fit:cover;border-radius:18px}.case h2{font:700 32px/1.35 var(--display)}.case p{font-size:12px;line-height:2;color:#666}.steps{display:grid;gap:1px;background:#ddd}.step{display:grid;grid-template-columns:100px 1fr;background:#fff;padding:35px}.step b{font:700 34px var(--display);color:var(--brand-green)}.step h2{margin:0 0 8px;font:700 23px var(--display)}.step p{margin:0;font-size:12px;color:#666}.form{max-width:850px}.field{margin:0 0 28px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:9px}.field input,.field textarea,.field select{width:100%;padding:17px;border:1px solid #d5d5d5;border-radius:8px;background:#fff;font:inherit}.field textarea{min-height:160px}.note{padding:22px;background:#eef9f6;border-radius:10px;font-size:11px;line-height:1.8}.page-cta{padding:80px 8vw;background:linear-gradient(110deg,#05adc6,#08bc70);color:#fff;display:flex;justify-content:space-between;align-items:center}.page-cta h2{font:700 40px var(--display);margin:0}.mini-header{position:relative;top:auto}.product-poster{width:min(760px,100%);display:block;margin:auto;border-radius:18px;box-shadow:0 25px 60px #0003}.job-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.job{padding:38px;border:1px solid #ddd;border-radius:16px}.job h2{font:700 25px var(--display)}.job p{font-size:12px;line-height:1.9;color:#666}@media(max-width:760px){.split,.case{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.job-list{grid-template-columns:1fr}.sub-hero{padding:75px 22px}.sub-section{padding:70px 22px}.case img{height:280px}.page-cta{align-items:flex-start;flex-direction:column;gap:30px}.step{grid-template-columns:60px 1fr;padding:25px 18px}.data-table th{width:34%}}

.kodomo-hero{display:grid;grid-template-columns:1fr 1fr;min-height:690px;background:linear-gradient(135deg,#eff8f4,#f9f6ef)}.kodomo-hero>div{display:flex;flex-direction:column;justify-content:center;padding:90px 7vw}.kodomo-hero h1{margin:18px 0 30px;font:700 clamp(44px,6vw,84px)/1.25 var(--display);letter-spacing:0}.kodomo-hero>div>p:last-child{max-width:560px;color:#586761;font-size:13px;line-height:2}.kodomo-hero>figure{margin:0;overflow:hidden}.kodomo-hero>figure>figure{height:100%;margin:0}.kodomo-hero>figure img{display:block;width:100%;height:100%;object-fit:cover}.kodomo-hero figcaption{display:none}.kodomo-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw;padding:120px 8vw}.kodomo-intro h2,.kodomo-heading h2,.kodomo-closing h2{margin:16px 0 0;font:700 clamp(38px,5vw,70px)/1.3 var(--display)}.kodomo-intro>div:last-child>p{margin:0 0 22px;color:#53615c;font-size:14px;line-height:2.15}.kodomo-intro dl{display:grid;grid-template-columns:repeat(3,1fr);margin:45px 0 0}.kodomo-intro dl div{padding:20px;border-top:1px solid #cbdad4}.kodomo-intro dt{color:var(--brand-green);font-size:9px;font-weight:700;letter-spacing:.1em}.kodomo-intro dd{margin:12px 0 0;font-size:11px}.kodomo-gallery-section{padding:110px 6vw;opacity:1!important;transform:none!important}.kodomo-gallery-section.recent{background:#f0f6f3}.kodomo-gallery-section.archive{background:#fff}.kodomo-heading{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin:0 2vw 55px;align-items:end}.kodomo-heading>p:last-child{color:#65716d;font-size:12px;line-height:2}.kodomo-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.kodomo-gallery figure{margin:0;padding:10px;border:1px solid #dce7e2;border-radius:16px;background:rgba(255,255,255,.78);box-shadow:0 16px 40px rgba(36,72,61,.07)}.kodomo-gallery img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:10px}.kodomo-gallery figcaption{padding:12px 4px 5px;color:#52605b;font-size:10px;line-height:1.6}.origin-gallery figure:nth-child(5n+1){grid-column:span 2}.recent-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.kodomo-closing{padding:110px 8vw;background:linear-gradient(115deg,#05adc6,#08bc70);color:#fff}.kodomo-closing .section-kicker{color:#fff}.kodomo-closing .pill{margin-top:35px}@media(max-width:900px){.kodomo-hero{grid-template-columns:1fr;min-height:0}.kodomo-hero>figure{height:520px;order:-1}.kodomo-intro,.kodomo-heading{grid-template-columns:1fr}.kodomo-gallery,.recent-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.origin-gallery figure:nth-child(5n+1){grid-column:auto}}@media(max-width:600px){.kodomo-hero>figure{height:auto}.kodomo-hero>figure img{height:auto;object-fit:contain}.kodomo-hero>div{padding:65px 22px 75px}.kodomo-intro{grid-template-columns:1fr;padding:80px 22px}.kodomo-intro dl{grid-template-columns:1fr}.kodomo-gallery-section{padding:80px 14px}.kodomo-heading{margin:0 8px 38px}.kodomo-gallery,.recent-gallery{grid-template-columns:1fr;gap:13px}.kodomo-gallery figure{padding:8px}.kodomo-closing{padding:85px 22px}}

.kodomo-hero h1,
.kodomo-intro h2,
.kodomo-heading h2,
.kodomo-closing h2,
.kodomo-intro p,
.kodomo-heading p,
.kodomo-gallery figcaption {
  letter-spacing: 0 !important;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: wrap;
  text-align: left;
  font-kerning: normal;
  font-feature-settings: "palt" 0;
}

.kodomo-gallery,
.recent-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.recent-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.kodomo-gallery figure,
.origin-gallery figure:nth-child(5n+1) {
  display: grid;
  grid-column: auto !important;
  grid-template-rows: 240px 1fr;
  min-width: 0;
}

.kodomo-gallery img {
  width: 100% !important;
  height: 240px !important;
  max-height: 240px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #edf3f0;
}

.kodomo-gallery figcaption {
  min-height: 3.2em;
}

@media (max-width: 1000px) {
  .kodomo-gallery,
  .recent-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .kodomo-gallery figure,
  .origin-gallery figure:nth-child(5n+1) {
    grid-template-rows: 280px 1fr;
  }

  .kodomo-gallery img {
    height: 280px !important;
    max-height: 280px !important;
  }
}

@media (max-width: 600px) {
  .kodomo-gallery,
  .recent-gallery {
    grid-template-columns: 1fr !important;
  }

  .kodomo-gallery figure,
  .origin-gallery figure:nth-child(5n+1) {
    grid-template-rows: min(72vw, 320px) 1fr;
  }

  .kodomo-gallery img {
    height: min(72vw, 320px) !important;
    max-height: min(72vw, 320px) !important;
  }
}

/* Final responsive and English-language refinements. */

@media (max-width: 980px) {
  .header nav + .menu {
    margin-left: auto;
  }
}

.job-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job {
  min-width: 0;
}

.job h2,
.job p {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .job-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep the branded opening, but hand control to visitors sooner. */
.site-opening {
  animation-duration: .55s;
  animation-delay: 1.75s;
}

.opening-panel {
  animation-duration: .55s;
  animation-delay: 1.45s;
}

.opening-inner {
  animation-duration: 1.7s;
}

.opening-logo {
  animation-duration: .55s;
  animation-delay: .12s;
}

.opening-rule {
  animation-duration: .5s;
  animation-delay: .38s;
}

.opening-eyebrow {
  animation-delay: .58s;
}

.opening-message {
  animation-duration: .55s;
  animation-delay: .72s;
}

.opening-inner::before {
  animation-duration: .5s;
  animation-delay: .08s;
}

.english-contact-options {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid #d8e7e2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(40, 75, 65, .08);
}

.english-contact-options h3 {
  margin: 0 0 16px;
  color: #183f37;
  font: 700 clamp(1.8rem, 4vw, 3rem)/1.2 var(--display);
}

.english-contact-options > p {
  margin: 0;
  color: #5d6864;
  font-size: 13px;
  line-height: 1.9;
}

.english-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.english-contact-actions a {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid #176f63;
  border-radius: 999px;
  color: #176f63;
  font-size: 13px;
  font-weight: 700;
}

.english-contact-actions a:first-child {
  background: #176f63;
  color: #fff;
}

.japanese-form-details {
  margin-top: 34px;
  border-top: 1px solid #dfe9e5;
  padding-top: 24px;
}

.japanese-form-details summary {
  color: #176f63;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.japanese-form-details > p {
  color: #6b7471;
  font-size: 11px;
  line-height: 1.8;
}

.japanese-form-details .smoothcontact-frame {
  margin-top: 18px;
}

.partner-form-section .english-contact-options {
  margin-top: 42px;
}

/* Collapsible language tab shared by every page. */
.language-menu {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
}

.header .logo {
  flex: 0 0 auto;
}

.language-menu summary {
  display: flex;
  width: 108px;
  height: 42px;
  padding: 0 13px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #8b9692;
  border-radius: 999px;
  color: #35403d;
  font-size: 11px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.language-menu summary::before {
  content: "LANGUAGE";
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

.language-menu summary::-webkit-details-marker {
  display: none;
}

.language-menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 370px;
  padding: 10px;
  border: 1px solid rgba(23, 111, 99, .18);
  border-radius: 16px;
  background: rgba(250, 249, 246, .98);
  box-shadow: 0 20px 55px rgba(18, 53, 44, .18);
}

.language-menu-panel a {
  display: flex;
  min-height: 40px;
  padding: 8px 10px;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  color: #35403d;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.language-menu-panel a span {
  display: inline-grid;
  width: 31px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #e5f2ed;
  color: #176f63;
  font-size: 9px;
}

.language-menu-panel a:hover,
.language-menu-panel a[aria-current="page"] {
  background: #eaf5f1;
}

html:not([lang="ja"]) .header nav {
  gap: clamp(10px, 1.25vw, 20px);
}

html:not([lang="ja"]) .header nav > a {
  font-size: 11px;
}

html:not([lang="ja"]) .hero h1 .copy-line {
  white-space: normal;
  overflow-wrap: anywhere;
}

html:not([lang="ja"]) .hero h1 .hero-promise {
  font-size: clamp(25px, 3vw, 44px);
  line-height: 1.34;
}

html[lang="th"] body {
  line-break: loose;
}

html[lang="vi"] body,
html[lang="vi"] .hero h1,
html[lang="vi"] .hero h1 .hero-promise,
html[lang="ru"] body,
html[lang="ru"] .hero h1,
html[lang="ru"] .hero h1 .hero-promise,
html[lang="id"] body,
html[lang="id"] .hero h1,
html[lang="id"] .hero h1 .hero-promise {
  font-family: "Segoe UI", Arial, sans-serif;
}

@media (min-width: 981px) {
  .header nav {
    gap: clamp(10px, 1.15vw, 18px);
  }

  .header .header-cta {
    flex: 0 0 auto;
    margin-left: 14px;
    padding-inline: 18px;
    white-space: nowrap;
  }

  .language-menu summary {
    width: 98px;
    padding-inline: 11px;
  }

  html[lang="vi"] .header nav {
    gap: 14px;
    margin-left: 14px;
  }

  html[lang="vi"] .header nav > a {
    font-size: 11px;
  }

  html[lang="ru"] .header nav,
  html[lang="id"] .header nav {
    gap: 10px;
    margin-left: 10px;
  }

  html[lang="ru"] .header nav > a,
  html[lang="id"] .header nav > a {
    font-size: 10px;
  }
}

@media (min-width: 981px) and (max-width: 1380px) {
  .header {
    padding-inline: 2vw;
  }

  .header .logo,
  .header .logo img {
    width: 160px;
  }

  .header .logo {
    flex-basis: 160px;
  }

  html:not([lang="ja"]) .header nav {
    gap: 8px;
    margin-left: 10px;
  }

  html:not([lang="ja"]) .header nav > a {
    font-size: 10px;
  }

  .header .language-menu summary {
    width: 82px;
  }

  html:not([lang="ja"]) .header .header-cta {
    max-width: 140px;
    padding: 10px 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
}

html[lang="th"] .hero h1,
html[lang="th"] .hero h1 .hero-promise {
  font-family: var(--font);
  line-height: 1.42;
}

@media (max-width: 980px) {
  .header.menu-open nav .language-menu {
    width: 100%;
    margin-top: 10px;
  }

  .header.menu-open nav .language-menu summary {
    display: flex;
    width: min(180px, 100%);
    height: 48px;
    padding: 8px 16px;
    justify-content: space-between;
    border-color: rgba(135, 223, 202, .45);
    border-radius: 999px;
    background: #eef8f4;
    color: #145f54;
  }

  .header.menu-open nav .language-menu summary::before {
    content: "LANGUAGE";
    font-size: 9px;
    letter-spacing: .12em;
  }

  .header.menu-open nav .language-menu-panel {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 10px;
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
  }

  .header.menu-open nav .language-menu-panel a {
    counter-increment: none;
    display: flex !important;
    width: auto;
    min-height: 44px;
    padding: 7px 9px;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 11px;
  }

  .header.menu-open nav .language-menu-panel a::before,
  .header.menu-open nav .language-menu-panel a::after {
    display: none !important;
  }

  .header.menu-open nav .language-menu-panel a span {
    flex: 0 0 29px;
  }
}

@media (max-width: 600px) {
  .process > * {
    min-width: 0;
    max-width: 100%;
  }

  .process h2 {
    overflow-wrap: anywhere;
  }

  .process li > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .english-contact-actions {
    flex-direction: column;
  }

  .english-contact-actions a {
    width: 100%;
  }
}