/* ==========================
    °øÅë
========================== */
.quel-wrap img {width:100%;height:auto}
.quel-wrap .inner {padding:0 4%;}
:root {
    --key-color: #1a0238;
}
.quel-wrap .r-txt {padding-top:15px;text-align:right;color:#999;font-size:1rem;}

/* ==========================
    visual
========================== */
.quel-wrap .visual {position:relative;overflow:hidden;padding-bottom:17vw;background:var(--key-color);}
.quel-wrap .visual .bg01 {z-index:1;position:absolute;top:0;left:0;width:100%;animation:fadeIn 1.5s 1s forwards cubic-bezier(.6,.1,.41,.94)}
.quel-wrap .visual .bg02 {position:absolute;top:0;left:0;animation:fadeIn 1s forwards cubic-bezier(.6,.1,.41,.94)}
.quel-wrap .visual .v-tit01 {position:relative;width:calc(611vw/7.2);height:calc(25vw/7.2);margin:14vw auto 0;animation:showInLong 1s forwards cubic-bezier(1,.05,.27,1.01)}
.quel-wrap .visual .v-tit02 {z-index:1;position:relative;width:calc(569vw/7.2);height:calc(451vw/7.2);padding-top:8.5vw;padding-left:9.6vw;opacity:0;animation:showScale .5s 1s forwards cubic-bezier(1,.05,.27,1.01)}
.quel-wrap .visual .v-tit03 {z-index:1;position:relative;padding-left:11vw;color:#9692ba;font-size:3.6vw;line-height:1.5;letter-spacing:-1px;opacity:0;animation:fadeIn 0.5s 1.5s forwards cubic-bezier(.6,.1,.41,.94);}
.quel-wrap .visual .v-light {z-index:1;position:absolute;top:18.5vw;left:22vw;width:calc(324vw/7.2);height:calc(383vw/7.2);opacity:0;animation:light 1s 3s forwards cubic-bezier(1,.05,.27,1.01)}
.quel-wrap .visual .v-img01 {position:absolute;bottom:-9vw;right:0;width:calc(368vw/7.2);height:calc(504vw/7.2);opacity:0;animation:fadeIn .5s forwards cubic-bezier(.6,.1,.41,.94)}
.quel-wrap .visual .v-img02 {position:absolute;left:0;bottom:-12vw;opacity:0;animation:fadeIn 1.5s 2s forwards cubic-bezier(.6,.1,.41,.94)}

/* ==========================
    contents
========================== */
.quel-wrap .cont01 {padding-bottom:65px;background-color:#f4f5f7}
.quel-wrap .cont01 .quel-slide .swiper-wrapper {padding-bottom:10px}
.quel-wrap .cont01 .quel-slide .swiper-pagination-bullets {bottom:0;}
.quel-wrap .cont01 .quel-slide .swiper-pagination-bullet {width:calc(194vw/6.8);height:6px;margin:0;opacity:1;border-radius:0;background:#CCC;}
.quel-wrap .cont01 .quel-slide .swiper-pagination-bullet:first-child {border-radius:6px 0 0 6px;}
.quel-wrap .cont01 .quel-slide .swiper-pagination-bullet:last-child {border-radius:0 6px 6px 0;}
.quel-wrap .cont01 .quel-slide .swiper-pagination-bullet-active {background:#720ec1;border-radius:6px !important}

.quel-wrap .cont02 {padding-bottom:60px;background-color:#FFF}
.quel-wrap .cont02 .q01 {background-color:#f4eeff}
.quel-wrap .cont02 .q02 {background-color:#e6d7ff}
.quel-wrap .cont02 .q03 {background-color:#d6beff}


/* ==========================
    ¾Ö´Ï¸ÞÀ̼Ç
========================== */
@keyframes fadeIn{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes fadeOut{
    0%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes showIn{
    0%{opacity: 0;transform:translateY(-20%);}
    100%{opacity: 1;transform:translateY(0%);}
}
@keyframes showInLong{
    0%{opacity: 0;transform:translateY(-50%);}
    100%{opacity: 1;transform:translateY(0%);}
}
@keyframes light{
    0%{opacity:0;transform:rotate(-360deg);}
    100%{opacity:1;transform:rotate(0deg);}
}
@keyframes showScale{
	0% {opacity:0;transform: scale(2.5);}
	100% {opacity:1;transform: scale(1);}
}