.sub-page{padding-top:var(--header-h)}
.sub-hero{padding:6.8rem 0 16.6rem;background:linear-gradient(115deg,#204f9f,#2a5bb7 55%,#1679c8);color:#fff}
.sub-hero__en{font-family:var(--f-en);font-size:2rem;font-weight:600;color:#dce9ff;line-height:1.4}
.sub-hero h1{margin-top:1rem;font-size:4.8rem;line-height:1.3;font-weight:700}
.breadcrumb{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:3rem;font-size:1.4rem;color:#fff}
.breadcrumb a:hover{text-decoration:underline}
.sub-content{padding-top:4rem;padding-bottom:15rem;min-height:58rem}
.sub-tabs{display:flex;overflow-x:auto;border-bottom:1px solid #dcdcdc;scrollbar-width:thin;gap:0}
.sub-tabs a{flex:0 0 auto;padding:2rem 3rem;font-size:1.8rem;font-weight:600;color:#707070;border-bottom:2px solid transparent}
.sub-tabs a.is-active,.sub-tabs a:hover{color:var(--c-navy);border-bottom-color:var(--c-navy)}
.detail-tabs{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}
.detail-tabs a{padding:1rem 2.4rem;border:1px solid #dcdcdc;border-radius:3rem;font-size:1.6rem;color:#707070}
.detail-tabs a.is-active,.detail-tabs a:hover{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.sub-title{font-size:3.6rem;line-height:1.4;margin-top:6rem;margin-bottom:4rem}
.content-placeholder{min-height:23rem;padding:4rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed #d5d9df;border-radius:1rem;background:#fafafa;color:#777;font-size:1.6rem;line-height:1.8}
@media(max-width:1024px){.sub-content.inner{padding-top:3rem;padding-bottom:12rem}.sub-hero{padding:5rem 0 12rem}.sub-hero h1{font-size:4rem}.sub-tabs a{padding:1.8rem 2.4rem}}
@media(max-width:767px){.sub-content.inner,.sub-hero .inner{width:100%;padding-left:2rem;padding-right:2rem}.sub-hero{padding:3.6rem 0 8.6rem}.sub-hero h1{font-size:3.2rem}.breadcrumb{margin-top:2.2rem;font-size:1.4rem;gap:.8rem}.sub-tabs a{font-size:1.6rem;padding:1.6rem 1.8rem}.sub-title{margin-top:3.6rem;margin-bottom:2.4rem;font-size:2.8rem}.content-placeholder{min-height:22rem;font-size:1.6rem}.sub-content.inner{padding-bottom:10rem}}

/* Shared hero: PSD 1920 x 485, content x=240..1680.
   14pt=18.6667px / 54pt=72px / 12pt=16px / 13pt=17.3333px. */
.sub-page{padding-top:0}
.sub-hero{position:relative;height:48.5rem;padding:0;isolation:isolate}
.sub-hero>.inner{position:relative;height:100%}
.sub-hero__en{position:absolute;top:20rem;left:0;margin:0;font-size:1.86667rem;line-height:2.6rem;font-weight:700;color:#fff}
.sub-hero h1{position:absolute;left:0;top:23.6rem;margin:0;font-size:7.2rem;line-height:8.6rem;font-weight:700;letter-spacing:-.025em}
.breadcrumb{position:absolute;left:0;bottom:6.4rem;margin:0;gap:1.4rem;font-size:1.6rem;font-weight:500;line-height:1.6rem;max-width:calc(100% - 64rem)}
.breadcrumb__home{width:1.6rem;height:1.6rem;display:block}
.breadcrumb__arrow{width:.7rem;height:1.1rem;flex:none}
.sub-hero--newsroom{background:#71665c}
.sub-hero--newsroom::before{content:"";position:absolute;inset:0;z-index:-2;background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSprec/assets/images/sub/newsroom/hero.jpg');background-repeat:no-repeat;background-size:200rem 112.4rem;background-position:calc(50% + 4rem) -31.7rem}
.sub-hero--newsroom::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.30)}
.hero-selects{position:absolute;right:0;bottom:4.3rem;display:flex;gap:1rem;width:61rem;z-index:10}
.hero-select{position:relative;flex:1;min-width:0;color:#fff}
.hero-select summary{height:6rem;padding:0 2.5rem 0 3.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;cursor:pointer;border-radius:3rem;background:rgba(255,255,255,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.13);font-size:1.73333rem;font-weight:700;line-height:1.35}
.hero-select summary::-webkit-details-marker{display:none}
.hero-select summary img{width:1.2rem;height:.8rem;flex:none;transition:transform .25s}
.hero-select[open] summary img{transform:rotate(180deg)}
.hero-select summary:hover{background:rgba(255,255,255,.34)}
.hero-select summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-select ul{position:absolute;left:0;right:0;top:calc(100% + .8rem);max-height:32rem;overflow:auto;border-radius:2rem;padding:1rem 0;background:rgba(40,55,74,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 10px 30px #0002}
.hero-select li a{display:block;padding:1.2rem 3.6rem;font-size:1.73333rem;font-weight:700;line-height:1.4}
.hero-select li a:hover,.hero-select li a:focus-visible,.hero-select li a[aria-current]{background:rgba(255,255,255,.16)}
@media(min-width:1921px){.sub-hero--newsroom::before{background-size:104.166667vw auto;background-position:left calc(-16.510417vw)}}
@media(max-width:1024px){
 .sub-hero{height:48.5rem;padding:0}.sub-hero>.inner{padding:0 4rem}
 .sub-hero__en{left:4rem;top:17rem}.sub-hero h1{left:4rem;top:20.6rem;font-size:7.2rem}
 .breadcrumb{left:4rem;bottom:12.8rem;max-width:calc(100% - 8rem)}
 .hero-selects{left:4rem;right:4rem;width:auto;bottom:3.8rem}
 .sub-hero--newsroom::before{background-size:auto 87rem;background-position:55% -20rem}
}
@media(max-width:767px){
 .sub-hero{height:47rem;padding:0}.sub-hero>.inner{padding:0 2rem}
 .sub-hero__en{left:2rem;top:14rem}.sub-hero h1{left:2rem;top:17.8rem;font-size:clamp(4.4rem,10vw,7.2rem);line-height:1.25}
 .breadcrumb{left:2rem;bottom:13.8rem;max-width:calc(100% - 4rem);gap:1rem;font-size:1.6rem;line-height:1.6}
 .hero-selects{left:2rem;right:2rem;bottom:4.3rem;gap:1rem}
 .hero-select summary{height:6rem;padding:0 1.6rem;font-size:1.73333rem}
 .hero-select li a{padding:1.2rem 1.6rem;font-size:1.73333rem}
 .sub-hero--newsroom::before{background-size:auto 76rem;background-position:57% -14rem}
}
@media(prefers-reduced-motion:reduce){.hero-select summary img{transition:none}}

/* Category photographs: exact PSD layer positions at the 1920px design width.
   Original JPG bytes preserved. Existing foreground elements are unchanged. */
.sub-hero--company,.sub-hero--technology,.sub-hero--esg{background:#182d3c}
.sub-hero--company::before,.sub-hero--technology::before,.sub-hero--esg::before{content:"";position:absolute;inset:0;z-index:-2;background-repeat:no-repeat}
.sub-hero--company::after,.sub-hero--technology::after,.sub-hero--esg::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.3019607843)}
.sub-hero--company::before{background-image:url("/api/modules/assets/hwashin-site/dist/sites/HSprec/assets/images/sub/company/hero.jpg");background-size:200rem 133.3rem;background-position:calc(50% + 4rem) -49.2rem}
.sub-hero--technology::before{background-image:url("/api/modules/assets/hwashin-site/dist/sites/HSprec/assets/images/sub/technology/hero.jpg");background-size:200rem 133.3rem;background-position:calc(50% + 4rem) -44.8rem}
.sub-hero--esg::before{background-image:url("/api/modules/assets/hwashin-site/dist/sites/HSprec/assets/images/sub/esg/hero.jpg");background-size:200rem 112.4rem;background-position:calc(50% + 4rem) -50rem}
@media(min-width:1921px){
 .sub-hero--company::before{background-size:104.16666667vw auto;background-position:left -25.62500000vw}
 .sub-hero--technology::before{background-size:104.16666667vw auto;background-position:left -23.33333333vw}
 .sub-hero--esg::before{background-size:104.16666667vw auto;background-position:left -26.04166667vw}
}
@media(max-width:1024px){
 .sub-hero--company::before{background-position:50% -49.2rem}
 .sub-hero--technology::before{background-position:50% -44.8rem}
 .sub-hero--esg::before{background-position:50% -50rem}
}