@charset "UTF-8";
/* Open Campus */
.campus{font-family: "Shippori Mincho", serif; font-weight: 500; color: #666666; line-height: 1.7; font-size: 1.5rem;}
.campus .container{max-width: 1000px;}
.campus a{opacity: 1 !important;}

@media (min-width: 768px){
    .only-sp{display: none;}
}

@media (max-width: 767px){
    .only-pc{display: none !important;}
}


.cap{font-size: 1rem; line-height: 1.6;}

/* Btn */
[class*="ocbtn-"] a{font-size: 2.5rem; 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;}
[class*="ocbtn-"] span{display: inline-block; line-height: 1;}
[class*="ocbtn-"] .date{font-size: 240%; line-height: 0.9;}
[class*="ocbtn-"] .day{font-size: 160%;}
[class*="ocbtn-"] .time{font-size: 120%;}

.ocbtn-red a{background: url("../images/admission/opencampus/btn_red.jpg") no-repeat center center;}
.ocbtn-red a:hover{background: #fd6b64;}
.ocbtn-green a{background: url("../images/admission/opencampus/btn_green.jpg") no-repeat center center;}
.ocbtn-green a:hover{background: #3cab83;}

@media only screen and (max-width: 767px) {
    [class*="ocbtn-"] a{font-size: min(4.5vw, 1.5rem); border-radius: 10px;}
}

/* Title */
.oc-title{font-size: 2.8rem; line-height: 1.3; letter-spacing: 0.2em; font-weight: bold; color: #3cab83; padding: 19px 20px 0; text-align: center; background: url("../images/admission/opencampus/tit_frame.png") no-repeat center center; width: 262px; height: 85px; margin: 0 auto 25px;}

[class*="titpen"]{font-weight: bold; color: #3cab83; display: flex; align-items: flex-end; font-size: 2.5rem; line-height: 1.4; margin: 0 0 20px; padding: 0 0 12px 10px; letter-spacing: 0.1em;}
.titpen-s{background: url("../images/admission/opencampus/pen_short.png") no-repeat bottom left/100% auto; max-width: 190px; min-height: 72px;}
.titpen-l{background: url("../images/admission/opencampus/pen_long.png") no-repeat bottom left/100% auto; max-width: 446px; min-height: 75px;}

@media only screen and (max-width: 767px) {
    [class*="titpen"]{font-size: min(5.2vw,2.5rem);}
}

@media only screen and (max-width: 480px) {
    .titpen-l{min-height: 15vw;}
}

/* Hero */
.hero{background: #ffff50; padding-bottom: 1px;}
.hero .ocbtn-red,
.ocbtn-red{margin: 50px auto 30px; position: relative;}
.hero .ocbtn-red img.circle_arrow,
.ocbtn-red img.circle_arrow { position: absolute; width: 5%; right: 3%; top: 50%; transform: translateY(-50%);}
.ocbtn-red p { font-weight: 600;}
img.mv {
    margin: 0 auto;
    width: 100%;
    max-width: 1920px;
    display: block;
}

@media only screen and (max-width: 767px) {
    .hero .ocbtn-red{margin: 8vw auto 10vw;}
}

/* Wrap */
.oc-sec1{padding: 45px 0 65px; background: #fffceb url("../images/admission/opencampus/bg.jpg") no-repeat top center;}
.oc-sec2{padding: 80px 0 150px; background: url("../images/admission/opencampus/bg2.jpg") no-repeat top center/100% auto;}
.oc-sec3{padding: 45px 0; background: url("../images/admission/opencampus/bg3.jpg") no-repeat top center;}

.oc-box{margin-bottom: 100px;}

@media only screen and (min-width: 1921px) {
    .oc-sec1,
    .oc-sec3{background-size: 100% auto;}
}

@media only screen and (max-width: 767px) {
    .oc-sec1{background: #fffceb url("../images/admission/opencampus/bg_sp.jpg") no-repeat top center/100% auto;}
    .oc-sec2{padding: 70px 0 90px; background: url("../images/admission/opencampus/bg2_sp.jpg") no-repeat top center/100% auto;}
    .oc-sec3{background: url("../images/admission/opencampus/bg3_sp.jpg") no-repeat center center/cover;}
    
    .oc-box{margin-bottom: 60px;}
}

/* Intro */
.intro{max-width: 1190px; margin: 0 auto 60px;}
.intro-item1,
.intro-item2{position: relative;}
.intro-inner{position: absolute; text-align: center; font-weight: 700; font-size: min(1.26vw,1.5rem);}
.intro-tit{font-size: 186.67%; color: #3cab83; line-height: 1.3; margin: 0 0 0.2em;}
.intro-item1 .intro-inner{top: 9%; right: 0; width: 57%;}
.intro-item2 .intro-inner{bottom: 9%; left: 0; width: 56%;}

@media only screen and (min-width: 768px) {
    .intro-item1{width: 56.31%; float: left;}
    .intro-item2{width: 59.16%; float: right; margin-top: -35%;}
}

@media only screen and (max-width: 767px) {
    .intro{margin: 0 auto 100px;}
    .intro-item1{width: 100%; max-width: 670px;}
    .intro-item2{width: 100%; max-width: 704px; margin-top: -40px;}
    .intro-inner{font-size: min(2.3vw,1.5rem);}
}

/* Benefits */
.benefits{background: url("../images/admission/opencampus/benefits_frame.png") no-repeat top left/100% 100%; min-height: 198px; position: relative; display: flex; justify-content: center; margin: 0 0 75px;}
.benefits-item{margin-top: -7px;}
.benefits-item:nth-of-type(1){margin-right: 5%; padding-left: 5%;}
.benefits-label{position: absolute; top: -55px; left: -10px;}
.benefits .titpen-s{font-size: 1.8rem; padding-left: 20px; letter-spacing: 0.2em; 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: 700; display: inline; line-height: 1.2; margin-top: 0.1em; transition: 1s ease .4s; letter-spacing: 0.2em; background-position: 0 0.92em; background-size: 100% 100%; background-repeat: no-repeat; background-image: linear-gradient(to right, #ffffa7 0, #ffffa7 100%);}
.benefits-txt.is-view span{background-size: 100% 100%;}

@media only screen and (max-width: 1024px) {
    .benefits-label{left: -20px; top: -120px;}
}

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


/* voice */
.voice { text-align: center;}
.voice .voice-title span{ display: inline-block; margin: 0 5% 0 6%; font-size: clamp(20px, 5.333vw, 28px); font-weight: bold; color: #3cab83; line-height: 1.5;}
.voice .voice-title img{ width: 4%; min-width: 30px;}
.voice .voice-text{ margin: 2% 0; font-size: 15px; line-height: 1.5;}
.voice figure{ max-width: 550px; margin: 0 auto; transition: 0.3s;}
.voice figure:hover{ opacity: 0.7; display: block;}

@media only screen and (max-width: 767px) {
    .voice .voice-text{ margin: 4% 0;}
}


/* Access */
.access-txt{font-size: 2rem; line-height: 1.4; text-align: center; margin: 0 0 30px;}

/* Schedule */
.schedule{text-align: center;}
.schedule-txt{margin: 0 0 10px;}
.schedule-list{display: flex; flex-wrap: wrap; gap: 5%; margin: 35px auto 0; max-width: 1000px;}
.schedule-list .index { width: 100%; text-align: left; border-bottom: 1px solid;}
.schedule-list .date{display: flex; height: 100%;}
.schedule-list .date a{background: #38a47f; color: #fff; font-weight: bold; box-shadow: 0px 6px 0px 0px #238060; border-radius: 10px;  padding: 10px 0; width: 100%; font-family: "Noto Serif JP", serif; font-size: min(1.5vw,1.5rem); font-weight: 400; line-height: 1; overflow: hidden; transition: .4s;}
.schedule-list .date a:hover{background: #238060;}

.schedule-list .date-txt { display: flex; align-items: center; height: 100%; position: relative; font-weight: 400;}
.schedule-list .date-txt .no { width: 25%; height: 100%; display: flex; justify-content: center; align-items: center; border-right: 1px solid; font-size: 15px;}
.schedule-list .date-txt .col { width: 75%; padding-left: 6%; display: flex; flex-direction: column; align-self: flex-start; text-align: left;}
.schedule-list .date-txt .day { font-size: 20px; font-weight: 400; letter-spacing: 0.3rem;}
.schedule-list .date-txt .day span { font-size: 40px;}
.schedule-list .date-txt .time { font-weight: lighter; text-align: left; letter-spacing: 0.1em;}
.schedule-list .date-txt img.circle_arrow { position: absolute; width: 28px; right: 3%;}

/*  */
.schedule-list .date.end a{background: #999999; box-shadow: 0px 6px 0px 0px #666666; pointer-events: none;}
.schedule-list .date.end p{ opacity: .5 !important;}
.schedule-list .date.soon a{opacity: .5 !important; pointer-events: none;}

/* '/' のみフォントサイズを小さくする */
.small-slash { margin: 0 0.3rem; color: #fff; font-size: 18px !important; vertical-align: middle;}

/* Schedule-under */

.bg-yellow .schedule-year { border-bottom: 1px solid;}


@media only screen and (min-width: 768px) {
    #schedule { margin-bottom: 40px;}
    .schedule-list .index {margin-bottom: 2.5rem;}
    .schedule-list .date{width: 30%; margin-bottom: 3rem;}
    .schedule-list .date-txt .col { line-height: 1.2;}
    .schedule-list .date-txt .day { font-size: clamp(13px, 1.69vw, 18px);}
    .schedule-list .date-txt .day span { font-size: clamp(30px, 3.906vw, 40px);}
    .schedule-list .date-txt .no { font-size: clamp(12px, 1.56vw, 15px);}

    .bg-yellow { max-width: 1000px; margin: 0 auto;}
    .bg-yellow .schedule-list { margin-top: 2.5rem;}
}

@media only screen and (max-width: 767px) {
    #schedule { margin-bottom: 20px;}
    .schedule-list .index {margin-bottom: 1.5rem;}
    .schedule-list .date{width: 100%; margin-bottom: 4%;}
    .schedule-list .date a{ padding: 13px 0; font-size: min(3.2vw,1.5rem);}
    .schedule .cap{text-align: center; margin: 0 2rem;}

    .schedule-list .date-txt img.circle_arrow { position: absolute; width: 23px; right: 2%;}
    .schedule-list .date-txt .no{ width: 23%; font-size: 10px;}
    .schedule-list .date-txt .col { width: 100%; flex-direction: row; align-items: center; width: 100%; padding-left: 4%;}
    .schedule-list .date-txt .day{ width: 50%; font-size: 16px; white-space: nowrap; letter-spacing: 1.3px;}
    .schedule-list .date-txt .day span { font-size: 28px;}
    .schedule-list .date-txt .time {  width: 50%;}

    .small-slash { position: relative; bottom: 3px;}

    .bg-yellow .schedule-year{ margin: 0 2rem;}
    .bg-yellow .schedule-list { margin-top: 1.5rem;}
}

/* Program */
.program-list{padding: 20px 0 0 0;}
.program-item{display: flex; justify-content: space-between; flex-wrap: wrap;}
.program-item .img{width: 40%; position: relative;}
.program-item .img figure{padding: 2.5%; margin: 0; box-shadow: 6px 6px 0px 0px #ccc; position: relative;}
.program-item .img figure:not(:last-of-type){margin-bottom: 16px;}
.program-item .img figcaption{min-width: 150px; display: block; padding: 10px 15px; text-align: center; position: absolute; bottom: 20px; right: -12px; color: #fff; line-height: 1; box-sizing: border-box;}
.program-item .img p{background: url("../images/admission/opencampus/circle.png") no-repeat top left/100% 100%; width: 86px; height: 86px; text-align: center; padding: 34px 0 0 17px; font-size: 3.5rem; font-weight: bold; line-height: 1; color: #fff; position: absolute; top: 0; left: -27px; z-index: 10;}
.program-item .inner{width: 55%;}
.program-item:not(:last-of-type):after{content: ''; background: url("../images/admission/opencampus/arrow_down.png") no-repeat top left; width: 58px; height: 55px; margin: 16px 0 10px calc(20% - 29px);}
.program-item .book{margin: 40px 0 0 0;}

.bg-pink{background: #f77dae;}
.bg-blue{background: #4593cf;}

@media only screen and (max-width: 767px) {
    .program-list{max-width: 400px; margin: 0 auto;}
    .program-item .img{width: 100%; margin: 0 auto 15px;}
    .program-item .inner{width: 100%;}
    .program-item h3{margin: 0 auto 15px;}
    .program-item:not(:last-of-type):after{margin: 16px 0 10px calc(50% - 29px);}
    .program-item .book{margin: 20px 0 5px 0;}
}

/* Tour */
.tour{margin: 0 0 30px; background: url("../images/admission/opencampus/tour_frame.png") no-repeat top left/100% 100%; min-height: 300px; position: relative; padding: 20px 0 40px; display: flex; justify-content: center; align-items: center;}
.tour-tit{width: 28.4%; position: absolute; top: -36%; left: -1.5%; z-index: 1;}
.tour-txt{line-height: 2; text-align: center; width: 100%;}
.tour-txt span{display: inline; line-height: 1.7; margin-top: 0.1em; transition: 1s ease .4s; letter-spacing: 0.2em; background-position: 0 0.93em; background-size: 100% 100%; background-repeat: no-repeat; background-image: linear-gradient(to right, #ffffa7 0, #ffffa7 100%);}
.tour-txt.is-view span{background-size: 100% 100%;}
.tour-img{width: 23.2%; position: absolute; bottom: -3%; right: -2.7%; z-index: 1;}

@media only screen and (max-width: 1023px) {
    .tour-img{bottom: -10%;}
    .schedule-list{margin: 35px 2rem 0;}
}

@media only screen and (max-width: 767px) {
    .tour{padding: 50px 0 100px; margin: 0 0 60px; background: url("../images/admission/opencampus/tour_frame_sp.png") no-repeat top left/100% 100%;} 
    .tour-tit{width: 200px; top: -100px;}
    .tour-img{width: 180px;}
    .tour-txt{line-height: 1.8; padding: 0 15px;}
}

/* another-oc */
.another-oc { margin-top: 2rem; padding-bottom: 5rem; text-align: center; text-align: center;}
.another-oc a{ display: inline-block; position: relative; color: #3cab83; font-size: min(4.5vw, 2.5rem);}
.another-oc a span{ opacity: 1; transition: .3s;}
.another-oc a span:hover{ opacity: 0.5;}
.mt-h{ margin-top: 3rem;}

.another-oc a span::after{ position: absolute; content: ''; display: inline-block; width: 0; height: 8px; bottom: -3px; left: 0; z-index: -1; background-color: rgba(60, 171, 131, 0.3); transition: width 1.5s;}
.another-oc a span.in-view02::after{ width: 100%;}

/* mv-info */
.mv-info .fin-text{ margin-bottom: 3rem; padding: 1.5rem 1rem; font-size: clamp(16px, 4.266vw, 25px); background-color:#3cab83; color: #fff; text-align: center;}

/* other-dates */
.other-dates .other-dates-wrapper { display: block; max-width: 1000px; margin: 0 auto 50px; text-align: center;}
.other-dates .other-dates-wrapper p.tit { background: #38a47f; color: #FFFFFF; font-size: clamp(18px, 4.8vw, 20px); padding: 5px 0;}
.other-dates .other-dates-wrapper .txt-box{ background: #ffffad; padding: 2rem 1rem;}
.other-dates .other-dates-wrapper .txt-box p{ color: #666666;}

@media only screen and (max-width: 767px) {
    .other-dates{ margin: 0 5%;}
}