/* October 2 client feedback and October 1 Illustrator SP artwork. */
.hero{padding-bottom:calc(100 * var(--unit))}
.hero-stage{position:relative;aspect-ratio:750 / 1200;isolation:isolate}
.hero-piece{position:absolute;left:calc(var(--x) / 750 * 100%);top:calc(var(--y) / 1200 * 100%);width:calc(var(--w) / 750 * 100%);transform-origin:center;z-index:1}
.hero-piece picture,.hero-piece img{display:block;width:100%;height:auto}
.hero-left{--x:40;--y:52;--w:365;--from-x:40%;--from-y:60%}
.hero-stove{--x:450;--y:103;--w:245;--from-x:-55%;--from-y:90%}
.hero-tank{--x:432;--y:298;--w:277;--from-x:-45%;--from-y:25%}
.hero-bottom{--x:-37;--y:650;--w:750;--from-x:5%;--from-y:-35%}
#hero-title{position:absolute;left:4.9333%;top:39.5833%;margin:0;z-index:2;font-size:calc(50 * var(--unit));line-height:1.75;font-weight:700;letter-spacing:.1em;white-space:nowrap}
.hero-copy-line{display:block}
.hero-copy-line>span{display:inline-block}
.hero-motion .hero-copy-line>span{animation:hero-type .01s steps(1,end) both;animation-delay:calc(var(--char) * 80ms + 150ms)}
.hero-motion .hero-piece{animation:hero-arrive .9s cubic-bezier(.2,.7,.25,1) both;animation-delay:calc(1.55s + var(--piece) * .1s)}
.hero-motion .hero-piece picture{animation:hero-float 5.5s ease-in-out infinite;animation-delay:calc(2.5s + var(--piece) * -.7s)}
@keyframes hero-type{from{opacity:0}to{opacity:1}}
@keyframes hero-arrive{from{opacity:0;transform:translate(var(--from-x),var(--from-y)) scale(.72)}to{opacity:1;transform:none}}
@keyframes hero-float{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-7px) rotate(.35deg)}}

.shift-note .handwritten{background-image:url('assets/topic-shift-1002.svg')}
.business .section-intro{max-width:calc(550 * var(--unit));font-size:calc(16 * var(--unit));line-height:2.125}
.business-more{position:relative;isolation:isolate;overflow:hidden;border-width:4px}
.business-more strong{line-height:1.4}
.business-more:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#00c2e5,#0079ff);transform:translateX(-101%);transition:transform .4s ease}
.business-more:hover,.business-more:focus-visible{background:linear-gradient(white,white) padding-box,linear-gradient(100deg,#00c2e5,#0079ff) border-box}
.business-more:hover:before,.business-more:focus-visible:before{transform:translateX(0)}
.career-icon{object-fit:contain;overflow:visible;transform:translateX(5px)}
.more-links a{border-width:3px}
.external{width:.8em;height:.8em;vertical-align:-.05em}
.external img{width:100%;height:100%;object-fit:contain}
.gradient-button{background-image:linear-gradient(100deg,#0345a8 0%,#1acfc3 27%,#21ffbc 50%,#1acfc3 73%,#0345a8 100%);background-size:200% 100%;background-position:100% 50%;transition:background-position .65s ease}
.gradient-button:hover,.gradient-button:focus-visible{background-position:0% 50%;opacity:1}

/* Share the title's two-pixel rule; the central SVG keeps a fixed, seamless tip. */
.qa-item h3{border-bottom-width:2px}
.qa-item h3:after{height:14px;bottom:-12px;background-image:linear-gradient(var(--purple),var(--purple)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 1H2L12 11L22 1H24' fill='none' stroke='%236b4eff' stroke-width='2'/%3E%3C/svg%3E"),linear-gradient(var(--purple),var(--purple));background-size:calc(50% - 10px) 2px,24px 14px,calc(50% - 10px) 2px}
@media(min-width:601px){
 .qa-item>p.qa-copy:last-child{top:calc((var(--qa-answer-top) + var(--qa-answer-height,96) + 20) * var(--unit))}
 .qa-item:nth-child(2),.qa-item:nth-child(8){--qa-answer-height:65}
 .qa-item:nth-child(8){--qa-height:280}
}

/* The supplied SP artboards use the same 750-unit canvas for header, MV and menu. */
@media(max-width:800px){
 :root{--sp-unit:min(1px,.13333333vw);--sp-header:calc(160 * var(--sp-unit))}
 html{scroll-padding-top:var(--sp-header)}
 .site-brand{height:var(--sp-header);padding:0;background:white;backdrop-filter:none;box-shadow:none;display:block}
 .site-brand a{position:absolute;left:max(calc((100% - 750px)/2 + 32px),calc(32 * var(--sp-unit)));top:calc(35 * var(--sp-unit));width:calc(400 * var(--sp-unit));max-width:none}
 .site-brand span{font-size:max(10px,calc(20 * var(--sp-unit)));letter-spacing:.08em;margin-top:calc(4 * var(--sp-unit))}
 .menu-toggle{right:max(calc((100% - 750px)/2 + 49px),calc(49 * var(--sp-unit)));top:calc(45 * var(--sp-unit));width:calc(62 * var(--sp-unit));height:calc(73 * var(--sp-unit));min-width:36px;min-height:42px;padding:0;background:transparent;border-radius:0;gap:calc(11 * var(--sp-unit));justify-content:flex-start;color:#003da9}
 .menu-label{order:-1;font-size:max(10px,calc(18 * var(--sp-unit)));font-weight:600;letter-spacing:.12em;line-height:1}
 .menu-lines{width:calc(56 * var(--sp-unit));height:calc(36 * var(--sp-unit));border-block-width:max(1px,calc(2 * var(--sp-unit)))}
 .menu-lines:after{top:50%;border-top-width:max(1px,calc(2 * var(--sp-unit)));transform:translateY(-50%)}
 .menu-toggle[aria-expanded="true"] .menu-lines{height:calc(30 * var(--sp-unit))}
 .menu-toggle[aria-expanded="true"] .menu-lines:before,.menu-toggle[aria-expanded="true"] .menu-lines:after{top:50%;border-top-width:max(1px,calc(2 * var(--sp-unit)));transform:rotate(20deg)}
 .menu-toggle[aria-expanded="true"] .menu-lines:after{transform:rotate(-20deg)}
 .mobile-menu:not([hidden]){inset:var(--sp-header) 0 0;max-height:calc(100dvh - var(--sp-header));padding:0 max(calc((100vw - 616px)/2),calc(67 * var(--sp-unit))) calc(40 * var(--sp-unit));gap:0;font-size:calc(32 * var(--sp-unit));font-weight:700;line-height:1.6}
 .mobile-menu>a:not(.menu-parents),.mobile-menu>.nav-job{border:0;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,#35caff,#0879ff) 1;position:relative;padding:calc(36 * var(--sp-unit)) 0 calc(36 * var(--sp-unit)) calc(76 * var(--sp-unit));margin:0}
 .mobile-menu>a:not(.menu-parents):before,.mobile-menu>.nav-job:before{content:'';position:absolute;left:calc(40 * var(--sp-unit));top:calc(52 * var(--sp-unit));width:calc(18 * var(--sp-unit));height:calc(18 * var(--sp-unit));border-radius:50%;background:linear-gradient(#0879ff,#3bcbff)}
 .mobile-menu .nav-job>a{padding:0;border:0}
 .mobile-menu .nav-job ul{padding:calc(23 * var(--sp-unit)) 0 0;font-size:calc(26 * var(--sp-unit));line-height:2.35}
 .mobile-menu .nav-job li a{padding:0}
 .mobile-menu .menu-parents{flex:none;display:flex;width:100%;max-width:calc(525 * var(--sp-unit));min-height:calc(120 * var(--sp-unit));margin:calc(58 * var(--sp-unit)) auto 0;padding:calc(15 * var(--sp-unit));font-size:max(17px,calc(30 * var(--sp-unit)));line-height:1.45;border:2px solid white;-webkit-text-stroke:2px white;paint-order:stroke fill}
 .hero{padding-bottom:calc(100 * var(--sp-unit))}
 .hero-stage{aspect-ratio:750 / 1140}
 .hero-piece{top:calc(var(--y) / 1140 * 100%)}
 .hero-left{--x:35;--y:-2;--w:372}
 .hero-stove{--x:447;--y:41;--w:246}
 .hero-tank{--x:430;--y:237;--w:283}
 .hero-bottom{--x:35;--y:612;--w:682}
 #hero-title{left:4.8267%;top:36.8421%;font-size:calc(50 * var(--sp-unit))}
}
@media(max-width:600px){
 .business .section-intro{font-size:clamp(12px,2.666667vw,16px);max-width:100%;line-height:2.125}
 .qa-answer{margin-bottom:16px}
 .business-more strong{line-height:1.4}
}
@media(prefers-reduced-motion:reduce){
 .hero-motion .hero-piece,.hero-motion .hero-piece picture,.hero-motion .hero-copy-line>span{animation:none;opacity:1;transform:none}
 .business-more:before,.gradient-button{transition:none}
}

/* Prevent accidental double-tap zoom; keep pan and pinch gestures native. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Center each person, accounting for the artwork's asymmetric decoration. */
.career-step:first-child .career-icon{transform:translateX(12.35%)}
.career-step:nth-child(3) .career-icon{transform:translateX(-1.7%)}
/* Preserve the marked line break without a second accidental wrap on PC. */
@media(min-width:601px){
 .job>.section-intro,.business>.section-intro{white-space:nowrap}
}
/* Compact three-column PC layout down to the requested 801px boundary. */
@media(min-width:801px) and (max-width:1279px){
 :root{--page:calc(16.666667vw + 346.666667px);--unit:calc((16.666667vw + 346.666667px) / 750)}
 .site-brand{left:16px;width:calc((100vw - var(--page)) / 2 - 32px);max-width:none}
 .site-brand span{font-size:clamp(8px,.9vw,12px);white-space:nowrap;letter-spacing:0}
 .desktop-nav{left:auto;right:12px;width:calc((100vw - var(--page)) / 2 - 24px);padding:20px 10px;font-size:clamp(10px,1.15vw,15px);border-radius:16px}
 .desktop-nav .nav-job ul{font-size:.85em;padding-left:12px}
 .parents-fixed{left:12px;width:calc((100vw - var(--page)) / 2 - 24px);font-size:clamp(10px,1.15vw,15px);min-height:0;padding:18px 4px}
 .job-item h3{font-size:calc(34 * var(--unit))}
}

/* Keep each external-link glyph centered beside its Japanese label. */
.footer-links>a{display:flex;align-items:center;justify-content:center;gap:.3em}
.footer-links .external{display:block;flex:0 0 .8em;width:.8em;height:.8em;font-size:inherit;margin:0;vertical-align:initial}
.footer-links .external img{display:block;width:100%;height:100%}