@charset "utf-8";

/* main */
.main-visual {height:var(--height-full);}
.mainSwiper,
.swiper-wrapper,
.main-visual__title,
.main-visual__title .wrap {height: 100%;}
.main-visual__title {position: absolute; left:0; top:0; width: 100%; height: 100%; color: #fff;}
.main-visual__title .wrap {display: flex; flex-direction: column; justify-content: center; padding:55rem 145rem 0; box-sizing: border-box;}
.main-visual__title h2 {line-height: 1.4; font-family: var(--font-elice); font-size: 60rem; font-weight: 500;}
.main-visual__title p {margin: 20rem 0; line-height: 1.7; font-size: 22rem; font-weight: 300;}
.main-visual .slide01 .main-visual__title p {letter-spacing:1rem;}
.main-visual .swiper-pagination-wrap {position: relative; display: flex; align-items: center; margin-top: 40rem;}
.main-visual .swiper-pagination {position: relative; display: flex;}
.main-visual .swiper-pagination-bullet {opacity: .3; width: 40rem; height: 4rem; margin-right: 10rem; background:#fff; border-radius: 0;}
.main-visual .swiper-pagination-bullet-active {opacity: 1;}
.main-visual .btn-pause {position: relative; width: 40rem; height: 40rem; margin-left: 10rem; font-size: 0; background: transparent; border: 0;}
.main-visual .btn-pause::after {position: absolute; left: 50%; top: 50%; content:''; width: 12rem; height: 12rem; background-repeat: no-repeat; background-size: 12rem; background-position: 50% 50%; background-image: url(../images/common/ic-pause.svg); transform: translate(-50%, -50%);}
.main-visual .btn-pause.on::after {background-size: 9rem; background-image: url(../images/common/ic-start.svg);}

.main-visual .swiper-slide {overflow: hidden;}
.main-visual .swiper-slide > i {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;}
.main-visual .swiper-slide.slide01 > i {background-image: url(../images/main/visual01.jpg);}
.main-visual .swiper-slide.slide02 > i {background-image: url(../images/main/visual02.jpg);}
.main-visual .swiper-slide.slide03 > i {background-image: url(../images/main/visual03.jpg);}
.main-visual .swiper-slide.slide04 > i {background-image: url(../images/main/visual05.jpg);}
.main-visual .swiper-button-prev,
.main-visual .swiper-button-next {width: 40rem; height: 70rem;}
.main-visual .swiper-button-prev::after,
.main-visual .swiper-button-next::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: url(../images/common/arrow-w.svg) no-repeat center / contain;}
.main-visual .swiper-button-prev::after {transform: scaleX(-1);}
.main-visual .swiper-button-prev {left: 0; font-size: 0;}
.main-visual .swiper-button-next {right: 0; font-size: 0;}

.main-visual .swiper-slide-active > i {animation:visualScale 8s both;}
.main-visual .swiper-slide-active .main-visual__title .wrap > *:first-child {animation: visual_text_motion 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-visual .swiper-slide-active .main-visual__title .wrap > *:nth-child(2) {animation: visual_text_motion 1.5s cubic-bezier(0.4, 0, 0.2, 1) .3s both;}
.main-visual .swiper-slide-active .main-visual__title .wrap > *:nth-child(3) {animation: visual_text_motion 1.5s cubic-bezier(0.4, 0, 0.2, 1) .6s both;}

@media (max-width:1023px){
    .main-visual .swiper-button-prev,
    .main-visual .swiper-button-next {width: 30rem; height: 50rem;}
    .main-visual__title .wrap {padding: 30rem 80rem 0;}
    .main-visual__title h2 {font-size: 47rem;}
}

@media (max-width:860px){
    .main-visual__title .wrap {padding: 20rem 0 0;}
    .main-visual__title h2 {font-size: 42rem;}
    .swiper-button-wrap {display: none;}
}

@media (max-width:540px){
    .main-visual__title h2 {font-size: 42rem; word-break: keep-all;}
}

@media (max-width:480px){
    .main-visual__title h2 {font-size: 35rem;}
    .main-visual__title p {font-size: 18rem; line-height: 1.6;}
    .main-visual .swiper-pagination-wrap {margin-top: 25rem;}
    .main-visual .swiper-pagination-bullet {width: 25rem; height: 3rem;}
}