@charset "utf-8";
/* Top */
.block{padding: 60px 0;}
.block .m-btn{margin-top: 30px;}
.block-child:not(:last-of-type){margin-bottom: 60px;}
.bg-light{background: #EBE9E6;}

@media screen and (max-width: 768px){
    .block{padding: 40px 0;}
    .block-child:not(:last-of-type){margin-bottom: 40px;}
}

/* First View */
.fview{padding: 60px 20px 45px; max-width: 1920px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; position: relative;}

@media screen and (max-width: 1000px){
    .fview{padding: 35px 20px 120px;}
}

@media screen and (max-width: 768px){
    .fview{padding: 25px 20px 90px;}
}

/* Button Modal */
.btn-modal-wrap{position: absolute; top: 60px; left: 0; right: 0; z-index: 100; max-width: 1400px; width: 100%; margin: 0 auto; display: flex; justify-content: flex-end;}
.btn-modal{cursor: pointer; width: 260px; font-size: 1.7rem; line-height: 1.4; font-weight: bold; border: 1px solid #4B4594; padding: 0.35em 0; text-align: center; display: block; background: #fff; border-radius: 37px; color: #4B4594; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.btn-modal:after{content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.5em; background: #4B4594; mask: url("../img/common/ic-arrow.svg") no-repeat top left/100% 100%; -webkit-mask: url("../img/common/ic-arrow.svg") no-repeat top left/100% 100%;}
.btn-modal:hover{background: #4B4594; color: #fff;}
.btn-modal:hover:after{background: #fff;}

@media screen and (max-width: 1420px) and (min-width: 1001px){
    .btn-modal-wrap{top: 15px; padding: 0 20px;}
}

@media screen and (max-width: 1000px){
    .btn-modal-wrap{top: min(75vw,520px);}
    .btn-modal{font-size: min(3.2vw,2.4rem); width: 12em; border-radius: 12em; margin-right: 20px;}
    .btn-modal br{display: block;}
}

/* Main Visual */
.mvisual{width: 48.125%; text-align: right; line-height: 1;}
.mvisual-wrap{width: 100%; position: relative;}
.mvisual-txt{position: absolute; top: 0; left: 30px;}
.mvisual-btn{position: absolute; top: 42%; right: min(16vw,230px); width: 65.26%; line-height: 1;}
.mvisual-btn a{transition: .4s; display: inline-block;}
.mvisual-btn a:hover{transform: translateX(15px);}

@media screen and (max-width: 1500px){
    .mvisual-txt{left: 0;}
}

@media screen and (max-width: 1000px){
    .mvisual{width: 100%; margin: 0 auto 40px;}
    .mvisual-wrap{max-width: 662px; margin: 0 auto;}
    .mvisual-btn{right: auto; left: 0;}
}

/* Featured */
.featured{width: 46.5%;}
.featured-wrap{max-width: 630px; width: 100%;}
.featured .m-tit{text-align: left;}

.featured-slider{position: relative; z-index: 10; line-height: 0; max-width: 580px; width: 100%;}
.featured-slider .slick-list{background: #E9E6E2; border-radius: 10px; overflow: hidden; box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.2);}
.featured-slide{line-height: 0;}
.featured-slide a{display: block; line-height: 0; position: relative; width: 100%;}
.featured-slide a:after{content: ""; padding-bottom: 56.25%; display: block;}
.featured-slide a:hover{opacity: .8;}
.featured-slide img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}

.featured-slider .slick-dots{position: absolute; bottom: -70px; left: 0; width: 100%;}
.featured-slider .slick-arrow{width: 44px; height: 44px; bottom: -75px;}
.featured-slider .slick-next{right: calc(50% - 180px);}
.featured-slider .slick-prev{left: calc(50% - 180px);}

@media screen and (max-width: 1000px){
    .featured{width: 100%; max-width: 580px; margin: 0 auto;}
    .featured .m-tit{text-align: center;}
}

@media screen and (max-width: 768px){
    .featured-inner{max-width: 768px; width: calc(100% - 40px); padding-right: 0;}
    .featured-mask{top: 10px; left: 10px; width: 100%;}
    
    .featured-slide .txt{font-size: 1.6rem;}
    
    .featured-slider .slick-dots{left: 0; width: 100%; bottom: -47px;}
    .featured-slider .slick-arrow{width: 30px; height: 30px; bottom: -50px;}
    .featured-slider .slick-next{right: calc(50% - 145px);}
    .featured-slider .slick-prev{left: calc(50% - 145px);}
}

/* Top slider */
.top-slider{font-weight: bold;}

.top-slider .slick-list,
.top-slider .slick-track,
.top-slider .slick-slide,
.top-slider .slick-slide > div,
.top-slider .top-slide{display: flex !important;}

.top-slider .slick-list{margin: -10px 0;}
.top-slider .slick-slide{width: 380px; margin: 0 15px;}

.top-slider .slick-dots{margin-top: 30px;}
.top-slider .slick-arrow{top: 87px;}
.top-slider .slick-next{right: calc(50% - 670px);}
.top-slider .slick-prev{left: calc(50% - 670px);}

.top-slide{display: flex; align-content: flex-start; flex-wrap: wrap; width: 100%; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2); border-radius: 10px; overflow: hidden; background: #fff; margin: 10px 0;}

.top-slide .img{width: 100%; position: relative;}
.top-slide .img a:hover{opacity: .8;}

.top-slide .outer{padding: 15px 20px 20px; width: 100%;}
.top-slide .date{font-size: 1.6rem; line-height: 1.2; color: #4B4594; font-family: "Afacad", sans-serif;}
.top-slide .txt{font-size: 2rem; line-height: 1.6; text-decoration: underline; text-underline-offset: 0.1em;}
.top-slide .inner a:hover .txt{text-decoration: none;}

.top-slide .hashtag{font-size: 1.3rem; line-height: 1.6; margin-top: 10px; color: #6F6F6F;}
.top-slide .hashtag a:not(:last-of-type){margin-right: 1em;}
.top-slide .hashtag a{text-decoration: underline;}
.top-slide .hashtag a:hover{text-decoration: none;}

.top-slide .list{font-size: 1.4rem; line-height: 1.6; color: #4B4594; margin: 3px 0;}
.top-slide .list li{position: relative; padding-left: 14px;}
.top-slide .list li:before{content: ""; width: 8px; height: 8px; display: block; border-radius: 100%; background: #4B4594; position: absolute; top: 7px; left: 0; overflow: hidden;}
.top-slide .time{font-size: 1.6rem; line-height: 1.6; margin-top: 5px;}

.top-slide.end .img:before{content: "このイベントは\A終了しました"; font-size: 2.6rem; line-height: 1.23; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; background: rgba(255,255,255,.85); z-index: 10; white-space:pre;}

.top-slide.soon a{pointer-events: none;}
.top-slide.soon .img:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.8); z-index: 1; display: block;}
.top-slide.soon .img:before{content: "COMING SOON"; font-size: 3rem; line-height: 1; font-weight: bold; font-family: "Afacad", sans-serif; letter-spacing: 0.04em; background: #fff; color: #4B4594; display: flex; justify-content: center; align-items: center;
position: absolute; top: 50%; right: 0; left: 0; width: 90%; max-width: 307px; height: 2.13em; margin: 0 auto; border-radius: 2.2em;
transform: translateY(-50%); text-align: center; z-index: 7; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.3); opacity: 1;}

@media screen and (max-width: 1400px){
	.top-slider .slick-next{right: 20px;}
    .top-slider .slick-prev{left: 20px;}
}

@media screen and (max-width: 768px){    
    .top-slider .slick-slide{width: 70vw; margin: 0 3vw;}
    
    .top-slider .slick-arrow{top: calc(20vw - 5px);}
    .top-slider .slick-next{right: calc(15vw - 40px);}
    .top-slider .slick-prev{left: calc(15vw - 40px);}
    
    .top-slide .outer{padding: 15px 10px;}
    .top-slide .txt{font-size: 1.6rem;}
    .top-slide .img img{width: 100%;}
    .top-slide .hashtag{font-size: 1.1rem;}
    .top-slide .time{font-size: 1.4rem;}
    
    .top-slide.end .img:before{font-size: min(5vw,2rem);}
    .top-slide.soon .img:before{font-size: min(6vw,2.4rem);}
}

/* Subscription */
.price{display: flex; flex-wrap: wrap; padding-bottom: 10px;}
.price .item{width: 31.67%; margin-right: 2.45%;}
.price .item:last-of-type{margin-right: 0;}
.price .note{color: #E57139; font-size: 2rem; line-height: 1.6; text-align: center; font-weight: bold; margin-bottom: 12px;}
.price .note span{font-size: 1.4em; line-height: 1;}
.price .inner{padding: 0 30px 40px; background: #fff; border-radius: 10px; font-size: 1.6rem; line-height: 1.4;border: 2px solid #F1EFEE;}
.price .head{text-align: center; padding: 23px 0; font-weight: bold;}
.price .tit{font-size: 5rem; color: #4B4594; font-weight: bold; line-height: 1; font-family: "Afacad", sans-serif; margin-bottom: 2px;}
.price .tit-jp{font-weight: bold;color: #222;margin: 0 0 1rem;}
.price .tit-jp span{transition: background .5s;background-image: linear-gradient(to right, #ffe0d1 0, #ffe0d1 100%);background-position: 0 1.37em;background-size: 100% 100%;background-repeat: no-repeat;display: inline;background-position: 0 1em;}
.price .head p.desc{font-weight: 400;text-align: left;margin: 1rem 0 0;}
.price .info{margin-bottom: 10px;}
.price .info li{border-top: 1px solid #D9D9D9; padding: 19px 0; display: flex; justify-content: space-between; align-items: flex-start;}
.price .info li:nth-of-type(1){align-items: flex-end;}
.price .info p:nth-of-type(1){position: relative; padding-left: 34px;}
.price .info p:nth-of-type(1):before{content: ""; position: absolute; top: 3px; left: 0;}
.price .info p:nth-of-type(2){font-size: 1.8rem; line-height: 1.5; font-weight: bold; text-align: right; min-width: 3em;}
.price .info p.info-price1{font-weight: 500; background: #EEEEF0; width: 70px; padding: 5px 0; text-align: center; margin-top: 8px;}
.price .info p.info-price1:before{display: none;}
.price .info p.info-price2{font-size: 1.6rem; line-height: 1;}
.price .info p.info-price2 span{font-size: 5.2rem; color: #4B4594; font-family: "Afacad", sans-serif; display: inline-block; position: relative; top: 2px;} 
.price .info p.info-article1:before{width: 26px; height: 21px; background: #222; mask: url("../img/common/ic-news.svg") no-repeat top left/100% auto; -webkit-mask: url("../img/common/ic-news.svg") no-repeat top left/100% auto;}
.price .info p.info-coupon1{min-width: 105px;}
.price .info p.info-coupon1:before{width: 28px; height: 18px; background: url("../img/common/ic-coupon.svg") no-repeat top left/100% auto;}
.price .info p.info-coupon2.txtS{font-size: 1.5rem;}
.price .info p.info-coupon2{min-height: 45px;}
.price .info p.info-function1:before{width: 17px; height: 22px; left: 5px; background: url("../img/common/ic-male.svg") no-repeat top center/100% auto; overflow: hidden;}
.price .info p.info-framework1:before{width: 22px; height: 20px; left: 3px; background: url("../img/common/ic-paper-pen.svg") no-repeat top center/100% auto;}
.price .info p.info-line1:before{width: 26px; height: 20px; left: 0; background: url("../img/common/ic-line.svg") no-repeat top center/100% auto;}
.price .clr-txt{color: #4B4594;}

.price .comming{position: relative;overflow: hidden;}
.price .comming::after{content: 'Coming soon';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.6);color: #ffffff;display: flex;justify-content: center;align-items: center;font-size: 2.8rem;font-weight: bold;}
.price .standard{border-color: #4B4594;position: relative;overflow: hidden;}
.price .standard::before{content: 'おすすめ！';position: absolute;top: 0;right: 0;background: #4B4594;color: #fff;font-size: 1.4rem;font-weight: bold;padding: 5px 10px;text-align: center;}

@media screen and (max-width: 1250px) and (min-width: 1001px){
    .price .inner{padding: 0 2vw 40px;}
	.price .info p.info-price2{font-size: 1.2vw;}
    .price .info p.info-price2 span{font-size: 4.5vw;}
}

@media screen and (max-width: 1000px){
	.price .item{width: 48%; margin: 0 4% 4% 0;}
    .price .item:nth-of-type(2n){margin-right: 0;}
    .price .item:last-of-type{margin: 0;}
    .price .info p.info-price2{font-size: 1.7vw;}
    .price .note.empty{display: none;}
}

@media screen and (max-width: 768px){
    .price{padding-bottom: 0;}
    .price .item{width: 100%; margin: 0 0 30px 0;}
    .price .note{font-size: 1.6rem;}
    .price .inner{padding: 0 20px 20px; font-size: 1.4rem;}
    .price .tit{font-size: 3.5rem;}
    .price .info li{padding: 15px 0;}
    .price .info p:nth-of-type(2){font-size: 1.6rem;}
    .price .info p.info-price1{margin-top: 11px; padding: 3px 0;}
    .price .info p.info-price2{font-size: 1.4rem;}
    .price .info p.info-price2 span{font-size: min(14vw,5rem); top: 1px;}
    .price .info p.info-coupon1{min-width: 95px;}
    .price .info p.info-coupon2{min-height: 1px;}
    .price .info p.info-coupon2.txtS{font-size: 1.4rem;}
    .price .standard::before{font-size: 1.2rem;}
}

/* Bnr Box */
.bnr-box a{display: block; position: relative; transition: .4s; overflow: hidden; border-radius: 20px; border: 1px solid #eeeef0;}
.bnr-box a:hover{box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2); transform: translateY(-2px);}
.bnr-box a.comming::after{content: 'Coming soon';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.6);color: #ffffff;display: flex;justify-content: center;align-items: center;font-size: 2.8rem;font-weight: bold;}

@media screen and (max-width: 768px){
    .bnr-box a{border-radius: 10px;}
}

/* Information */
.infor{background: #fff; border: 1px solid #eeeef0; border-radius: 20px; padding: min(6vw,60px); margin: 60px 0;}
.infor-list{margin-bottom: 30px; border-top: 1px solid #cac0b4;}
.infor-item{border-bottom: 1px solid #cac0b4; padding: 25px 0; font-size: 1.6rem; line-height: 1.625;}
.infor-item .head{position: relative; padding-right: 50px; cursor: pointer;}
.infor-item .head i{display: block; position: absolute; top: 16px; right: 0; width: 24px; height: 24px; border-radius: 100%; background: #4B4594; overflow: hidden;}
.infor-item .head i:before,
.infor-item .head i:after{content: ""; display: block; background: #fff; position: absolute;}
.infor-item .head i:before{width: 12px; height: 2px; left: 6px; top: 11px;}
.infor-item .head i:after{width: 2px; height: 12px; left: 11px; top: 6px;}
.infor-item .head.is-open i:after{display: none;}

.infor-item .cont{margin-top: 8px; display: none;}
.infor-item .date{font-size: 1.6rem; font-weight: bold; color: #4B4594; font-family: "Afacad", sans-serif; margin-bottom: 2px;}
.infor-item .txt{font-size: 1.8rem; font-weight: bold;}

@media screen and (max-width: 768px){
    .infor{padding: 30px 20px; margin: 40px 0; border-radius: 10px;}
    .infor-item{padding: 15px 0;}
    .infor-item .head{padding-right: 40px;}
    .infor-item .head i{top: 0;}
    .infor-item .txt{font-size: 1.6rem;}    
}

/* Partner */
.partner-slider .slick-slide{width: 388px; margin: 0 8px; border-radius: 20px; overflow: hidden; line-height: 1; background: #fff;}
.partner-slider .slick-dots{margin-top: 30px;}
.partner-slider .slick-arrow{top: 35px;}
.partner-slider .slick-next{right: calc(50% - 670px);}
.partner-slider .slick-prev{left: calc(50% - 670px);}
.partner-slide a:hover{opacity: .8;}

@media screen and (max-width: 1400px){
	.partner-slider .slick-next{right: 20px;}
    .partner-slider .slick-prev{left: 20px;}
}

@media screen and (max-width: 768px){
    .partner-slider .slick-slide{width: 70vw; margin: 0 3vw; border-radius: 10px;}
    .partner-slider .slick-slide img{width: 100%;}
    
    .partner-slider .slick-arrow{top: calc(11.75vw - 18px);}
    .partner-slider .slick-next{right: calc(15vw - 40px);}
    .partner-slider .slick-prev{left: calc(15vw - 40px);}
}

/* Support */
.support-box{background: #fff; overflow: hidden; border-radius: 40px; display: flex; justify-content: space-between; align-items: center; padding: 25px 40px 25px 60px; margin-bottom: 40px;}
.support-box .inner{width: 560px; font-size: 1.8rem; line-height: 2;}
.support-box .img{width: 344px; margin-left: 30px;}
.support-box .m-btn{margin: 30px 0 0 0;}

@media screen and (max-width: 1024px){
    .support-box{padding: 25px 0 25px 30px;}
    .support-box .inner{width: 58%;}
    .support-box .img{width: 37%; margin: 0;}
}

@media screen and (max-width: 768px){
    .support-box{border-radius: 20px; flex-wrap: wrap; padding: 25px; margin-bottom: 0;}
    .support-box .inner{width: 100%; font-size: 1.6rem;}
    .support-box .img{order: -1; width: 200px; margin: 0 auto 15px; padding-left: 20px;}
    .support-box .m-btn{margin: 20px auto 0;}
}

/* Modal */
.modal-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 990; display: none;}
.modal-close{position: absolute; top: 0; right: -60px; background: #fff; width: 50px; height: 50px; cursor: pointer; z-index: 991; border: 2px solid #4B4594; border-radius: 100%; cursor: pointer;}
.modal-close:before,
.modal-close:after{content: ""; position: absolute; top: 47%; width: 60%; left: 20%; height: 2px; background: #4B4594;}
.modal-close:before{transform: rotate(45deg);}
.modal-close:after{transform: rotate(-45deg);}
.modal-close:hover{background: #4B4594;}
.modal-close:hover:before,
.modal-close:hover:after{background: #fff;}

.modal{margin: 0 auto; max-width: 1080px; width: calc(100% - 40px); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 995; display: none;}
.modal-wrap{width: 100%; max-height: calc(100% - 100px); background: #fff; border-radius: 40px; overflow: hidden;}

.modal-outer{width: 100%; padding: 40px; max-height: calc(100vh - 100px); overflow-y: auto;}
.modal-outer::-webkit-scrollbar{width: 6px;}
.modal-outer::-webkit-scrollbar-track{background: none;}
.modal-outer::-webkit-scrollbar-thumb{background: #e0e0e0; border-radius: 3px;}

.modal-tit{font-size: 4rem; line-height: 1.5; font-weight: bold; color: #4B4594; text-align: center;}
.modal-txt{font-size: 2.6rem; line-height: 1.5; font-weight: bold; text-align: center;}
.modal-inner{font-size: 1.8rem; line-height: 1.6; margin: 1.5em auto 0; max-width: 830px;}
.modal-inner p{margin-bottom: 1.5em;}
.modal-list{font-weight: bold; margin-bottom: 1.5em;}
.modal-list1 li{text-indent: -1.25em; margin-left: 1.25em;}
.modal-list2{font-weight: 400; margin-left: -1.25em;}
.modal-list2 li{text-indent: -1.05em; margin-left: 1.05em;}
.modal-list3 li{text-indent: -0.75em; margin-left: 0.75em;}

.modal-slider .slick-dots{width: 100px; margin: 0 auto; padding: 20px 0;}
.modal-slider .slick-btn{display: none !important;}
.modal-slider .slick-arrow{position: absolute; bottom: 9px; text-indent: 0; background: none; font-size: 1.8rem; font-weight: bold; width: auto; height: auto; padding: 5px 0; color: #222;}
.modal-slider .slick-next{right: 0;}
.modal-slider .slick-next:after{content: ""; width: 26px; height: 26px; display: inline-block; margin-left: 10px; vertical-align: middle;
background: url("../img/common/ic-arrow3.svg") no-repeat top left/100% 100%;}

.modal-slider .slick-prev{left: 0;}
.modal-slider .slick-prev:before{content: ""; width: 26px; height: 26px; display: inline-block; margin-right: 10px; vertical-align: middle;
background: url("../img/common/ic-arrow3.svg") no-repeat top left/100% 100%; transform: rotateY(-180deg);}

@media screen and (max-width: 1200px){
    .modal-close{width: 40px; height: 40px; top: -42px; right: -5px;}
}

@media screen and (max-width: 768px){    
    .modal-close{right: -12px;}
    .modal:after{content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 60px; z-index: 10; background: #fff; border-radius: 0 0 20px 20px;}
    .modal-wrap{border-radius: 20px;}
    .modal-outer{padding: 30px 20px 70px;}
    
    .modal-tit{font-size: 2.2rem; line-height: 1.3; margin-bottom: 5px;}
    .modal-txt{font-size: 1.7rem;}
    .modal-inner{font-size: 1.4rem;}
    
    .modal-outer{height: calc(100vh - 100px);}
    .modal-slide{min-height: calc(100vh - 200px);}
    
    .modal-slider .slick-dots{position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;}
    .modal-slider .slick-arrow{font-size: 1.6rem; position: fixed;}
    .modal-slider .slick-next{right: 20px;}
    .modal-slider .slick-next:after{width: 24px; height: 24px;}
    .modal-slider .slick-prev{left: 20px;}
    .modal-slider .slick-prev:before{width: 24px; height: 24px;}
}