@charset "UTF-8";

.type02 .fade-up { opacity: 0; transform: translateY(50%);}
.sc-sub-top { display: flex; flex-direction: column; position: relative; margin-top: 10rem;}
.sc-sub-top.type02 { flex-direction: column; padding-bottom: 8rem;}
.sc-sub-top.type01 .sub-top { padding-bottom: 2rem;}
.sub-top .ttl-area { display: flex; flex-direction: column; text-align: center; position: relative; transform: translateY(0);}
.type01 .sub-top .ttl-area { gap: 2.4rem; padding: 7rem 0; color: #fff;}
.type02 .sub-top .ttl-area { gap: 4.5rem; padding: 7rem 0 4.5rem;}
.sub-top .ttl-area .ttl { font-size: 6.2rem; font-weight: 600; line-height: 1.3; letter-spacing: -2.48px; color: #171717;}
.sub-top .ttl-area .sub-ttl { font-size: 2.4rem; font-weight: 500; letter-spacing: -0.96px; color: #43747d;}
.sub-top .ttl-area .desc { margin: 0; color: #171717;}
.top-menu-wrap { display: flex; justify-content: center;}
.sub-top-menu { display: flex; justify-content: center; gap: 1rem;/*  overflow-x: auto; */}
.sub-top-menu .menu-item { flex-shrink: 0;}
.sub-top-menu .menu-item.active .link-menu { color: #fff; background-color: var(--color-primary);}
.sub-top-menu .link-menu { display: block; padding: 1.4rem 3rem; border-radius: 999em; color: var(--color-gray5); font-size: 1.8rem; letter-spacing: -0.36px; background-color: var(--bg-gray1);}
.sc-sub-top .sub-bottom { width: 100%; height: fit-content;}
.sc-sub-top.type01 .sub-bottom .img-area { position: relative; height: 38rem; margin-top: 0; background-color: transparent; overflow: hidden;}
.sc-sub-top.type02 .sc-sub-top .sub-bottom .img-area { background-color: #fff;}
.sc-sub-top.type01 .sub-bottom .img-area::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 38rem;}
.sc-sub-top.type02 .sc-sub-top .sub-bottom .img-area::before { content: none;}
.sc-sub-top.type01 .sub-bottom .img-area img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; max-width: unset; transform: translate(-50%, -50%);  object-fit: cover;}
.sc-sub-top.type02 .sub-bottom .img-area img { width: 3.6rem; height: 4.6rem; margin: 0 auto; object-fit: cover;}

@media screen and (max-width: 768px) {
    .sc-sub-top { margin-top: 5.8rem;}
    .sc-sub-top.type02 { padding-bottom: 1.6rem;}
    .sub-top { height: unset; padding: 0 2.2rem;}
    .sub-top .ttl-area { gap: 1.6rem;}
    .type01 .sub-top .ttl-area { padding: 5rem 0;}
    .type02 .sub-top .ttl-area { gap: 1.6rem; padding: 3rem 0 2rem;}
    .sub-top .ttl-area .ttl { font-size: 3.2rem; letter-spacing: -0.64px;}
    .sub-top .ttl-area .sub-ttl { font-size: 1.6rem; letter-spacing: -0.72px;}
    .sub-top .ttl-area .desc { word-break: break-all;}
    .type02 .sub-top .ttl-area .desc { font-size: 1.5rem;}
    .top-menu-wrap { margin: 0 -2.2rem;}
    .sub-top-menu { justify-content: flex-start; padding: 0 2.2rem .4rem; gap: .8rem;}
    .sub-top-menu .menu-item:last-child { padding-right: 2.2rem;}
    .sub-top-menu .link-menu { margin-bottom: 0.4rem; padding: 1rem 2.2rem; font-size: 1.4rem; letter-spacing: -0.28px;}
    .sc-sub-top.type01 .sub-bottom .img-area { height: 25rem;}
    .sc-sub-top.type02 .sub-bottom .img-area img { width: 2.2rem; height: 3rem;}
}
/* 
@media screen and (max-width: 360px) {
    .sc-sub-top.type01:not(.test) { height: calc((var(--vh, 1vh) * 100) - 4.64rem); margin-top: 4.64rem;}
    .sc-sub-top.type01:not(.test) .sub-top { padding: 0 1.76rem;}
    .sc-sub-top.type01:not(.test) .sub-top .ttl-area { gap: 1.28rem; padding: 4rem 0; transform: translateY(11.6rem);}
    .sc-sub-top.type01:not(.test) .sub-top .ttl-area .ttl { font-size: 2.56rem; letter-spacing: -0.64px;}
    .sc-sub-top.type01:not(.test) .sub-top .ttl-area .sub-ttl { font-size: 1.44rem; letter-spacing: -0.72px;}
    .sc-sub-top.type01:not(.test) .sub-top .ttl-area .desc { word-break: break-all; font-size: 1.36rem;}
    .sc-sub-top.type01:not(.test) .sub-top-menu { gap: .8rem;}
    .sc-sub-top.type01:not(.test) .sub-top-menu .link-menu { padding: 0.8rem 1.76rem; font-size: 1.11rem; letter-spacing: -0.28px;}
    .sc-sub-top.type01:not(.test) .sub-bottom .img-area { height: calc((var(--vh, 1vh) * 100) - 10rem);}
    .sc-sub-top.type01:not(.test) .sub-bottom .img-area img { height: calc((var(--vh, 1vh) * 100));}
} */