@charset "UTF-8";

@font-face {
    font-family: 'SBAggroM';
    src: url('../../font/SBAggroM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@keyframes scale1 {
	0% {transform: scale(0.2); top:-50%; right:-50%}
	100% {transform: scale(1); top:0%; right:0%}
}
@keyframes scale2 {
	0% {transform: scale(0.2); bottom:-50%; left:-50%}
	100% {transform: scale(1); bottom:0%; left:0%}
}

#header, #footer {display:none;}

#wrap {height:100vh; padding:8.5rem 0; position:relative;}
#wrap::before {content:''; width:clamp(10rem, 18.2299vw, 35rem); height:clamp(10rem, 18.2299vw, 35rem); border-radius:0 0 0 100%; background-color:#002361; position:absolute; top:0; right:0; z-index:-1; animation:scale1 0.5s linear}
#wrap::after {content:''; width:clamp(10rem, 18.2299vw, 35rem); height:clamp(10rem, 18.2299vw, 35rem); border-radius:0 100% 0 0; background-color:#02ACEE; position:absolute; bottom:0; left:0; z-index:-1; animation:scale2 0.5s linear}

.logo {width:31.5rem; height:6.5rem; margin:0 auto 8.5rem;}
.logo img {display:block; width:100%;}

.site {display:flex; align-items:center; justify-content:center; width:100%; gap:4rem; position:absolute; top:50%; transform:translateY(-40%); z-index:1}
.site .item {padding:8.5rem 0; transition:all .3s;}
.site .item a {display:flex; flex-direction:column; justify-content:space-between; width:39rem; height:51.5rem; border-radius:9rem 9rem 0 0; box-shadow:0 1rem 2rem rgba(0,0,0,0.1); overflow:hidden; padding:9rem 4rem; position:relative; word-break:keep-all; transition:all .3s;}
.site .item a::before {content:''; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; transition:0.3s;}
.site .item strong {display:block; font-family:'SBAggroM'; font-weight:500; font-size:3.6rem; transition:all .3s;}
.site .item span {display:block; color:#fff; font-size:2.2rem; font-weight:500; line-height:1.4;}
.site .item span::after,
.site .item span::before {content:''; background:url('/intro/img/arrow-w.svg') no-repeat center; width:3.5rem; height:3.5rem; position:absolute; bottom:4rem; transition:0.3s;}
.site .item span::after {right:4rem;}
.site .item span::before {right:100%;}

.site .item01 a {width:43rem; height:68rem; background-color:#fff; border:1px solid #003CA6;}
.site .item01 strong {color:#003CA6;}
.site .item01 span::after,
.site .item01 span::before {filter:brightness(0);}

.site .item a[target="_blank"]::after {content:''; width:100%; height:100%; position:absolute; left:0; top:0; background-color:#000; opacity:0.3; z-index:-1;}
.site .item a[target="_blank"] strong {color:#fff;}

.site .item01 a::before {background:url('/intro/img/site01.svg') no-repeat center; background-size:17rem; transition:all .3s; z-index:0;}
.site .item02 a::before {background:url('/intro/img/site02.png') no-repeat center / cover;}
.site .item03 a::before {background:url('/intro/img/site03.png') no-repeat center / cover;}

@media screen and (min-width:1025px){
	.site .item a:hover::before {transform:scale(1.2);}
	.site .item a:hover span::after {animation:arrow_move 0.3s forwards;}
	.site .item a:hover span::before {animation:arrow_move2 0.6s 0.3s forwards;}
}

@keyframes arrow_move {
	0% {right:4rem;}
	100% {right:-4rem;}
}
@keyframes arrow_move2 {
	0% {right:100%;}
	100% {right:4rem;}
}