:root{
--header-height:96px;
--color-primary:#3A4081;
--color-primary-hover:#2F5DAA;
--color-primary-light:#6B78B5;
--color-primary-soft:rgba(58,64,129,.08);
--color-primary-soft-strong:rgba(58,64,129,.12);
--color-primary-soft-border:rgba(58,64,129,.16);
--color-primary-border:rgba(58,64,129,.2);
--color-primary-border-strong:rgba(58,64,129,.24);
--color-primary-shadow:rgba(58,64,129,.18);
}

html{scrollbar-gutter:inherit;}
body{overflow-x:hidden;}

.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}

/*main visual*/
.main-section{height:200vh;}
.main-bg{position:sticky;top:var(--header-height);display:flex;max-width:1440px;margin:0 auto;height:600px;border-radius:8px;overflow:hidden;background:url('/images/1111.png') no-repeat 100% 50%/cover;transform:scale(1);transform-origin:center center;}
.main-bg-hero2{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
.split-text-section{width:100%;}
.main-text{position:relative;display:flex;flex:1;align-items:center;justify-content:center;padding:0 40px;}
.main-text .text{position:absolute;color:#fff;font-size:48px;line-height:1.2;width:100%;text-align:center;perspective:500px;font-weight:600;left:50%;top:50%;transform:translate(-50%,-50%);}
.main-text .text-change{opacity:0;}

@media (max-width:1024px){
.main-bg{height:520px;}
.main-text .text{font-size:38px;}
}

@media (max-width:768px){
.main-section{height:170vh;}
.main-bg{top:80px;height:420px;}
.main-text{padding:0 20px;}
.main-text .text{font-size:28px;line-height:1.3;}
}