@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Oswald:wght@200..700&display=swap');

/* 共通 */
article{font-size: 14px;line-height: 1.6;}
article section{animation-name: fadeInUp;margin-top: 0;padding: 70px 0;}
article{color: #333;letter-spacing: 0.05em;}
.contents_tit{max-width: 600px;margin-inline: auto;color: #fff;font-size: 20px;text-align: center;background: #edad2c;padding: 0.5em;border-radius: 1.5em;letter-spacing: 0.1em;}
.contents_tit + p{font-size: 15px;margin-top: 1em;}
.frame{background: #fcf3e0;margin-top: 30px;padding: 30px;animation-name: fadeInUp;}
.contents_tit_s{color: #cf941e;font-size: 16px;line-height: 1;}
.contents_tit_s + p{margin-top: 0.7em;}
.contents_tit_s + .lead{margin-top: 1em;}
.lead{line-height: 2;}
.lead + .lead{margin-top: 1.5em;}
.wrap1024{max-width: 1024px;margin-inline: auto;}
.item{margin-top: 35px;}

@media screen and (max-width: 767px){
article{font-size: 13px;line-height: 1.5;padding-top: 62px;}
article img{width: 100%;}
article section{padding: 35px 0;}
.contents_tit{font-size: 15px;}
.contents_tit + p{font-size: 13px;}
.frame{margin-top: 20px;padding: 20px;}
.contents_tit_s{font-size: 14px;}
.wrap1024{padding: 0 20px;}
}

/* メイン */
#under_mv{padding: 0!important;}
#under_mv::after{display: none;}
#under_mv .img_area{margin-bottom: 0!important;}
.main_copy{position: absolute;right: 3.4%;bottom: 7%;z-index: 2;opacity: 0;animation: 3s fadeInRight 0.5s forwards;}

@media screen and (max-width: 767px){
.main_copy{width: 55%;right: auto;left: 3.4%;bottom: auto;top: 7%;animation: 3s fadeInLeft 0.5s forwards;filter: drop-shadow(0 0 0.3vw #000) drop-shadow(0 0 0.3vw #000)}
}

/* YAMANOTEが選ばれる理由 */
#reason_choosing{background: url("https://yamanote.ac.jp/shibuya/mg/wp-content/themes/yamanote/assets/add_img/fromschool/correspondence/reason_choosing_bk.webp") center top/cover;margin-top: 0;}
#reason_choosing h2{color: #cb0000;text-align: center;font-size: 50px;letter-spacing: 0.1em;animation-name: fadeInUp;}
.reason_choosing_item{display: flex;margin-top: 40px;}
.reason_choosing_item > li{width: 33.333%;text-align: center;animation-name: fadeInUp;}
.reason_choosing_item > li:nth-of-type(n+2){border-left: 1px solid #cb0000;}
.reason_choosing_item > li h3{font-family: "EB Garamond", serif;font-size: 24px;color: #cb0000;letter-spacing: 0.1em;}
.reason_choosing_item > li h3 big{font-size: 2.5em;vertical-align: -0.05em;line-height: 0.8;}
.reason_choosing_item > li h3 + p{font-size: 60px;line-height: 1.2;margin-top: 0.2em;}
.reason_choosing_item > li h3 + p + p{font-size: 18px;color: #333;margin-top: 1em;letter-spacing: 0.1em;}
.reason_choosing_item > li:nth-of-type(1) h3 + p{font-family: "EB Garamond", serif;font-size: 100px;line-height: 0.6;}
.reason_choosing_item > li:nth-of-type(1) h3 + p small{font-size: 0.4em;line-height: 1;}
.reason_choosing_img{display: flex;flex-wrap: wrap;margin-top: 50px;}
.reason_choosing_img > figure{animation-name: fadeIn;}

@media screen and (min-width: 768px){
.reason_choosing_item > li:nth-of-type(2){animation-delay: 0.3s;}
.reason_choosing_item > li:nth-of-type(3){animation-delay: 0.6s;}
.reason_choosing_img > figure:nth-of-type(even){animation-delay: 0.3s;}
}

@media screen and (max-width: 767px){
#reason_choosing h2{font-size: 24px;}
.reason_choosing_item{margin-top: 20px;}
.reason_choosing_item > li{padding: 0 3px;}
.reason_choosing_item > li h3{font-size: 16px;}
.reason_choosing_item > li h3 + p{font-size: 26px;}
.reason_choosing_item > li h3 + p + p{font-size: 14px;text-align: left;}
.reason_choosing_item > li:nth-of-type(1) h3 + p{font-size: 50px;}
.reason_choosing_img{margin-top: 30px;}
.reason_choosing_img > figure{width: 50%;}
}

/* 在校生の声 */
#current_student{background: #f7f7f7;}
.current_student_slide{margin-top: 50px;}
.current_student_slide li{width: 480px;margin: 0 20px;}
.current_student_slide li .contents_tit_s{margin-top: 15px;}
.current_student_slide li .contents_tit_s + p + p{margin-top: 0.3em;}
.slick-arrow{position: absolute;top: 150px;z-index: 1;cursor: pointer;}
.slick-arrow.prev{left: 20px;}
.slick-arrow.next{right: 20px;}

@media screen and (max-width: 767px){
.current_student_slide{margin-top: 30px;}
.current_student_slide li{width: 85vw;margin: 0 2vw;}
.current_student_slide li .contents_tit_s{margin-top: 15px;}
.slick-arrow{top: 22vw;width: 6vw;}
.slick-arrow.prev{left: 10vw;}
.slick-arrow.next{right: 10vw;}
}

/* 最新就職実績 */
#employment_record .wrap1024{background: url("https://yamanote.ac.jp/shibuya/mg/wp-content/themes/yamanote/assets/add_img/fromschool/correspondence/graduate_img.svg") no-repeat right top/300px;}
.employment_record_copy{display: flex;justify-content: center;align-items: center;margin-top: 30px;}
.employment_record_copy p{font-size: 32px;line-height: 1.4;}
.employment_record_copy big{color: #ffd800;-webkit-text-stroke: 7px #b20000;paint-order: stroke;font-weight: 700;font-size: 150px;font-family: "Oswald", sans-serif;line-height: 1;margin-left: 0.1em;}
.employment_record_copy span{color: #ffd800;-webkit-text-stroke: 7px #b20000;paint-order: stroke;font-weight: 700;font-size: 100px;font-family: "Oswald", sans-serif;line-height: 1;align-self: flex-end;}

@media screen and (max-width: 767px){
#employment_record .wrap1024{background-size: 50vw;background-position: right -20vw top 7vw;}
.employment_record_copy{margin-top: 20px;}
.employment_record_copy p{font-size: 4.5vw;}
.employment_record_copy big{-webkit-text-stroke: 2vw #b20000;paint-order: stroke;font-size: 25vw;}
.employment_record_copy span{-webkit-text-stroke: 2vw #b20000;paint-order: stroke;font-size: 17vw;}
}

/* オープンキャンパスや 学校説明会に参加してみよう！ */
#opencampus{background: url("https://yamanote.ac.jp/shibuya/mg/wp-content/themes/yamanote/assets/add_img/fromschool/correspondence/opencampus_bk.webp") no-repeat center bottom/cover;padding-top: 50px;}
#opencampus .wrap1024{display: flex;justify-content: flex-end;}
.opencampus_wrap{max-width: 860px;}
#opencampus h2{text-align: right;padding-right: 60px;}
.ko_img{display: flex;margin-top: 40px;}
.ko_img figure:nth-of-type(1){animation-name: fadeInLeft;}
.ko_img figure:nth-of-type(2){animation-name: fadeInRight;}
.opencampus_link{max-width: 560px;margin: -80px auto 0;z-index: 1;background: rgba(214,21,24,0.9);color: #fff;padding: 10px 0 15px;text-align: center;animation-name: fadeInUp;position: relative;}
.opencampus_link p{font-size: 32px;line-height: 1.4;}
.opencampus_link a{display: inline-block;padding: 0.3em 1.5em;border-radius: 1.2em;font-size: 16px;color: rgba(214,21,24,1);background: #fff;margin-top: 10px;text-decoration: none;transition: 0.3s all;}
.opencampus_bn{display: flex;justify-content: space-between;margin-top: 40px;gap: 5px;}
.opencampus_bn a{transition: 0.3s all;}

@media screen and (min-width: 768px){
.opencampus_link a:hover{opacity: 0.6;}
}

@media screen and (max-width: 767px){
#opencampus{background-position: 30% bottom;padding-top: 30px;}
#opencampus .wrap1024{display: flex;justify-content: flex-end;}
.opencampus_wrap{max-width: 860px;}
#opencampus h2{text-align: right;padding-right: 60px;}
.ko_img{display: flex;margin-top: 20px;}
.opencampus_link{width: 90%;margin: -20px auto 0;padding: 10px 0 15px;}
.opencampus_link p{font-size: 20px;}
.opencampus_link a{font-size: 14px;}
.opencampus_bn{flex-wrap: wrap;margin-top: 20px;gap: 10px;}
}

/* 入学までのスケジュール */
#schedule{padding-bottom: 0;margin-bottom: 70px;}
.schedule_wrap{max-width: 800px;margin-inline: auto;}
#schedule .item{animation-name: fadeInUp;}
#schedule .item h3{display: flex;align-items: center;z-index: 1;}
#schedule .item h3 div{font-family: "Oswald", sans-serif;background: #fff;width: 120px;height: 120px;border: 3px solid;border-radius: 50%;display: flex;justify-content: center;align-items: center;line-height: 1.1;font-weight: 600;text-align: center;font-size: 30px;z-index: 1;}
#schedule .item h3 span{border-radius: 0 1em 1em 0;color: #fff;padding: 0.25em 1em;display: flex;justify-content: space-between;align-items: center;margin-left: -10px;width: calc(100% - 110px);font-size: 24px;}
#schedule .item h3 span small{font-size: 0.75em;}
#schedule .item h3.red_tit span{background: linear-gradient(to right,#c70202,#8f1111);}
#schedule .item h3.red_tit div{color: #c70202;border-color: #c70202;}
#schedule .item h3.yellow_tit span{background: linear-gradient(to right,#e28d1a,#e17423);}
#schedule .item h3.yellow_tit div{color: #e28d1a;border-color: #e28d1a;}
#schedule .item .inner_wrap{margin: -15px 0 0 5.5%;display: flex;justify-content: space-between;}
#schedule .item .inner_wrap > figure{width: 37.5%;}
#schedule .item .inner_wrap > figure img{width: auto;}
#schedule .item .inner_wrap > .copy{width: 100%;}
#schedule .item .inner_wrap > figure + .copy{width: 69%;}
#schedule .item .inner_wrap > .copy .schedule_tit{color: #cf941e;font-size: 22px;margin-top: 1.2em;}
#schedule .item .inner_wrap > .copy .schedule_tit + p{font-size: 16px;margin-top: 1em;}
#schedule .item .inner_wrap > .copy .threepoint{font-size: 16px;margin-top: 1em;color: #e28d1a;}
#schedule .item .inner_wrap > .copy .threepoint p{text-indent: -1.3em;padding-left: 1.3em;}
#schedule .item .inner_wrap > .copy .ao_btn{font-size: 16px;display: block;width: 320px;margin: 2em auto 0;padding: 0.5em;text-align: center;border: 1px solid #4ca60a;background: #4ca60a;border-radius: 25px;color: #fff;text-decoration: none;transition: 0.3s all;position: relative;}
#schedule .item .inner_wrap > .copy .ao_btn::after{content: "→";display: inline-block;transition: 0.3s all;position: absolute;right: 1em;}

@media screen and (min-width: 768px){
#schedule .item .inner_wrap > .copy .ao_btn:hover{background: #fff;color: #4ca60a;}
#schedule .item .inner_wrap > .copy .ao_btn:hover::after{transform: translateX(0.6em);}
}

@media screen and (max-width: 767px){
.schedule_wrap{padding: 0 20px;}
#schedule .item h3{width: calc(100% + 15px);margin-left: -15px;}
#schedule .item h3 div{width: 80px;height: 80px;font-size: 20px;}
#schedule .item h3 span{width: calc(100% - 70px);font-size: 17px;}
#schedule .item .inner_wrap{margin: -10px 0 0 0;}
#schedule .item .inner_wrap > figure{width: 40%;}
#schedule .item .inner_wrap > figure img{width: 100%;}
#schedule .item .inner_wrap > .copy{width: 100%;}
#schedule .item .inner_wrap > figure + .copy{width: 58%;}
#schedule .item .inner_wrap > .copy .schedule_tit{font-size: 15px;}
#schedule .item .inner_wrap > figure + .copy .schedule_tit{font-size: 15px;margin-top: 0;}
#schedule .item .inner_wrap > .copy .schedule_tit + p{font-size: 13px;margin-top: 0.5em;}
#schedule .item .inner_wrap > .copy .threepoint{font-size: 13px;}
#schedule .item .inner_wrap > .copy .ao_btn{font-size: 14px;width: 70vw;margin: 2em auto 0;}
}