@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');

/* OpenCampus Web */
.weboc .container{max-width: 1000px;}
.weboc a{opacity: 1 !important;}
.weboc-wrap{background: #f2fbf8; padding: 80px 0;}
.weboc-title{font-size: 3.3rem; font-weight: 500; line-height: 1.1; text-align: center; margin: 0 0 40px; letter-spacing: 0.1em;}
.weboc-btn a{font-size: 2.5rem; letter-spacing: 0.1em; line-height: 1.6; border-radius: 20px; border: 3px solid #fff; box-shadow: 5px 5px 0px 0px #ccc; text-align: center; padding: 0.7em 0; color: #fff; display: block; overflow: hidden; background: url("../images/admission/web-oc/btn_red.jpg") no-repeat center center; position: relative; font-family: 'Zen Maru Gothic', sans-serif;}
.weboc-btn a:after{content: ''; width: 35px; height: 35px; position: absolute; top: 50%; right: 3%; display: block; background: url("../images/admission/web-oc/arrow_red.svg") no-repeat top left/100% 100%; transform: translateY(-50%);}
.weboc-btn a:hover{background: #fd6b64;}

@media only screen and (max-width: 767px) {
    .weboc-wrap{padding: 50px 0 70px;}
    .weboc-title{font-size: min(8vw,3.3rem); margin: 0 0 30px;}
    .weboc-btn a{font-size: min(5vw,2.5rem); border-radius: 10px;}
    .weboc-btn a:after{width: min(6.3vw,35px); height: min(6.3vw,35px);}
}

/* MV */
@media only screen and (max-width: 1919px) and (min-width: 769px) {
    .mv img.pc{height: 66.5vw; max-height: 850px; width: auto; object-fit: cover;}
}

/* Outline */
.outline-box{display: flex; flex-wrap: wrap; padding: 0 0 30px;}
.outline-item{width: 49%; margin: 0 2% 40px 0; text-align: center; font-size: 1.8rem; line-height: 1.7;}
.outline-item:nth-of-type(2n){margin-right: 0;}
.outline-tit{font-size: 2.2rem; line-height: 1; font-weight: 500; color: #fff; background: #3cab83; margin: 0 0 15px; letter-spacing: 0.1em; padding: 8px 0 10px;}

@media only screen and (max-width: 1000px) {
    .outline-box{padding: 0 0 70px;}
    .outline-item{width: 100%; margin: 0 0 30px; font-size: clamp(1.4rem,3.6vw,1.8rem);}
    .outline-tit{font-size: min(6vw,2.2rem);}
}

/* Benefits */
.benefits{background: url("../images/admission/web-oc/benefits_frame.png") no-repeat top left/100% 100%; min-height: 198px; position: relative; display: flex; justify-content: center; margin: 0 0 55px; padding-left: 10%;}
.benefits-item{margin-top: -7px;}
.benefits-item:nth-of-type(1){margin-right: 9%;}
.benefits-label{position: absolute; top: -55px; left: -10px;}
.benefits-tit{font-weight: 500; color: #3cab83; display: flex; align-items: flex-end;  line-height: 1.4; padding: 0 0 12px 0.8em; letter-spacing: 0.2em; background: url("../images/admission/web-oc/pencil.png") no-repeat bottom left/100% auto; max-width: 190px; min-height: 72px; font-size: 2rem; margin: 0 auto 20px; position: relative; left: 15px;}
.benefits-txt{font-size: 2rem; line-height: 1.4; text-align: center; letter-spacing: 0.1em;}
.benefits-txt span{font-size: 150%; font-weight: 500; display: inline; line-height: 1.2; margin-top: 0.1em; transition: 1s ease .4s; background-position: 0 0.92em; background-size: 100% 100%; background-repeat: no-repeat; background-image: linear-gradient(to right, #ffff84 0, #ffff84 100%);}
.benefits-txt.is-view span{background-size: 100% 100%;}

@media only screen and (max-width: 1000px) {
    .benefits{padding-left: 0;}
    .benefits-label{left: -20px; top: -130px;}
    .benefits-item:nth-of-type(1){margin-right: 5%;}
}

@media only screen and (max-width: 768px) {
    .benefits{display: block; padding-bottom: 60px; background: url("../images/admission/web-oc/benefits_frame_sp.png") no-repeat top left/100% 100%; margin: 0 0 40px;}    
    .benefits-item:nth-of-type(1){margin: 0 0 30px;}
    .benefits-label{width: 120px; top: -80px;}
    .benefits-tit{font-size: min(5.2vw,2rem);}
    .benefits-txt{font-size: min(4.5vw,2rem);}
}