@charset "UTF-8";
/* CSS Document */


a.co_btn{ display: block; text-decoration: none; width: 10em; margin: 1em auto 0; text-align: center; position: relative; padding: 0.5em 0;}
a.co_btn span{ position: relative; z-index: 3;}
a.co_btn::before,a.co_btn::after{ content: ""; width: 100%; height: 100%;  position: absolute; opacity: 0.5; z-index: 2;transition-property : border,background-color;transition-duration : 1s;}
a.co_btn::before{ left: -0.1em; top: -0.1em;}
a.co_btn::after{ left: 0.1em; top: 0.1em;}

a.co_btn{color: #FFF;}
a.co_btn:hover{color: #000;}
a.co_btn::before,a.co_btn::after{border: 1px solid #FFF;}
a.co_btn:hover::before,a.co_btn:hover::after{background-color: #FFF;}




#mv{ position: relative;;}
#mv .slide{ position: relative;}

#mv .slide img.pc{display: block;}
#mv .slide img.spi{display: none;}

#mv .img{width: 100%; max-height: 853px; overflow: hidden;}
#mv .img a{display: block;width: 100%;max-height: 853px;}
#mv .img img{width: 100%;height: 100%;max-width: none;max-height: 853px;object-fit: contain; object-position: top center;}
#mv .slide.zoom .img img{width: 100%;height: 100%;max-width: none;object-fit: cover;}
#mv .text{position: absolute;left: 0;top: 0;right: 0;width: 100%;margin: auto;}
#mv .text img{ margin: auto;}
#mv .slick-prev, #mv .slick-next{ display: none;}
#mv #slick_count_bar {position: absolute;right: 1em;bottom: 3em;width: 5em;height: 3px;background: rgba(0, 0, 0, 0.3);z-index: 10;}
#mv #slick_count_bar span {position: absolute;width: 0%;height: 100%;left: 0;top: 0;background: #FFF;}


.header_fixed #mv #event_wrap{ position: fixed; left: 1em; top: 6em;}

#mv #event_wrap{ background:rgba(0,113,188,0.95);; position: absolute; left: 1em; top: 2em; z-index: 10; color: #FFF; padding: 1em; max-width: 300px; box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.5);font-size: 0.8em;}
#mv #event_wrap .close{ position: absolute; right: -0.75em; top: -0.75em; width: 2em; height: 2em; background: #666; border: 0.2em solid #FFF; border-radius: 50%; box-shadow: 0 0 0.2em 0 rgba(0, 0, 0, 0.5);}
#mv #event_wrap .close::before{content: ""; width: 60%; height: 0.2em; background: #FFF; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transform: rotate(45deg);}
#mv #event_wrap .close::after{content: ""; width: 60%; height: 0.2em; background: #FFF; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transform: rotate(135deg);}

#mv #event_wrap .event{ border-bottom: 1px solid; padding-bottom: 0.5em; margin-bottom: 0.5em;}
#mv #event_wrap .event:last-of-type{ border-bottom:none; padding-bottom: 0em; margin-bottom: 0em;}
#mv #event_wrap .event a{text-decoration: none; display: block;}
#mv #event_wrap .event .ttl{ font-size: 1em; font-weight: bold;}
#mv #event_wrap .event .day{font-size: 1.6em;}
#mv #event_wrap .event .day .y_m_d{ display: inline-block;  font-weight: bold; vertical-align: bottom;}
#mv #event_wrap .event .day .y_m_d .y{ font-size: 0.7em;}
#mv #event_wrap .event .day .y_m_d .m{}
#mv #event_wrap .event .day .y_m_d .d{}
#mv #event_wrap .event .day .y_m_d .week{ font-size: 0.7em;}

#mv #event_wrap .event .day .h_mi{display: inline-block; margin-left: 0.5em;font-weight: bold; vertical-align: bottom;}
#mv #event_wrap .event .day .h_mi .h{}
#mv #event_wrap .event .day .h_mi .mi{}


@media all and (max-width: 750px) {
    #mv .slide img.pc{display: none;}
    #mv .slide img.spi{display: block;}
    #mv .text{ position: absolute; left: 0; top: 50%; right: 0; width: 94%; margin: auto; transform: translateY(-50%);}
    #mv .img a{display: block;width: 100%;height: auto;}

#mv #event_wrap{ font-size: 0.7em;max-width: 50%; padding: 0.5em; bottom: auto; top: 1.5em;}
#mv #event_wrap .close{ right: -1.0em; top: -1.0em;}
#mv #event_wrap .event .day{font-size: 1.3em;}
#mv #event_wrap .event{}
}






#news_topic{}
#news_topic .ttl{position: relative; background: url(../images/top/news_bg1.png) no-repeat center center / 100% 100%; text-align: center; padding-top: 5em; margin-top: -8em; z-index: 9;}

#news_topic .ttl .text{ position: relative; color: #FFF; display: inline-block;}
#news_topic .ttl .text h4{font-size: 3em;font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
#news_topic .ttl .text a{ display:block; position: absolute; bottom: 1em; left: 100%; width: 7em; margin-left: 1em; text-decoration: none;}

#news_topic .cont_wrap{text-align: center; padding: 1em 1em 2em; background: url(../images/top/news_bg2.png) no-repeat center center / 100% 100%;}
#news_topic .cont_wrap .cont{ display: inline-block; width: 22%; margin: 0 1% 2%; vertical-align: top;}
#news_topic .cont_wrap .cont a{ text-decoration: none; display: block;}
#news_topic .cont_wrap .cont .thumbnail{width: 100%; height: 200px;}
#news_topic .cont_wrap .cont .thumbnail img{ width: 100%; height: 100%; object-fit: contain; object-position: center center;}
#news_topic .cont_wrap .cont .text{ text-align: left; line-height: 1.2;}
#news_topic .cont_wrap .cont .text .day{ font-size: 0.9em; font-weight: 600; margin: 0.2em 0;}
#news_topic .cont_wrap .cont .text .naiyou{ font-weight: 600;}


@media all and (max-width: 750px) {
#news_topic .ttl{position: relative; background: url(../images/top/news_bg1.png) no-repeat center center / 100% 100%; text-align: center; padding-top: 5em; margin-top: -8em; z-index: 9;}

#news_topic .ttl .text a{ display:block; position: relative; bottom: 0; left: 0; width: auto;  text-decoration: none; margin:0 auto 0.5em; text-align: center;}



#news_topic .cont_wrap{ padding: 1em 0.5em 3em;}

#news_topic .cont_wrap #slick .slick-btn{ position: absolute; top: 45%; width: 1.7em; font-size: inherit; z-index: 6;/*transform: translateY(-50%);*/}
#news_topic .cont_wrap #slick .slick-prev{ left: -6px; right: auto;}
#news_topic .cont_wrap #slick .slick-next{ right: -6px; left: auto}
#news_topic .cont_wrap #slick .slick-prev::before,
#news_topic .cont_wrap #slick .slick-next::before{ display:none;}


#news_topic .cont_wrap #slick .slick-dots{bottom: auto; top: 100%;right: 0; position: absolute; padding:0.5em 0 0;text-align: right;line-height: 0;}
#news_topic .cont_wrap #slick .slick-dots li{ width: 1em; height: 1em; margin: 0 0.5em 0.5em 0;}
#news_topic .cont_wrap #slick .slick-dots li button{width: 100%;height: 100%;padding: 0;background: #FFF;border-radius: 50%; border: 2px solid #939393;}
#news_topic .cont_wrap #slick .slick-dots li button::before{ display: none;}
#news_topic .cont_wrap #slick .slick-dots li.slick-active button{background: #939393;}

#news_topic .cont_wrap .cont{ display: block; width: 50%; margin: 0 0.4em 0.5em;position: relative; z-index: 3;}
#news_topic .cont_wrap .cont a{ position: relative; z-index: 3; background: #FFF;}
#news_topic .cont_wrap .cont::after{ content: ""; width: 100%; height: 100%; right: -0.3em; position: absolute; bottom: -0.3em; background: rgba(0,0,0,0.3); z-index: 2;}
#news_topic .cont_wrap .cont .thumbnail{width: 100%; height: 146px;}
#news_topic .cont_wrap .cont .thumbnail img{ object-fit: cover;}
#news_topic .cont_wrap .cont .text{ text-align: left; line-height: 1.2; padding:0.5em 0.5em 0.75em; }
}












#concept{ margin: 4em auto;}
#concept .ttl{width: 62%; max-width: 420px; margin: auto;text-align: center;}
#concept .text_wrap{ text-align: center; }
#concept .text_wrap .text{ font-weight: 600; font-size: 1.1em; margin-top: 1.5em;}
#concept .text_wrap .text .glay{ color: #b3b3b3; font-weight: 600; font-size: 1.1em;;}
#concept .text_wrap .text .img{ width: 70%; margin: auto; max-width: 600px;}

@media all and (max-width: 750px) {
    #concept .text_wrap .text{font-size: 1em;}
    #concept .text_wrap .text .img{ width: 90%; margin: auto;}
}




#course{}
#course .ttl{text-align: center; line-height: 1.2; color: #FFF; padding: 0.3em; font-size: 2.2em;font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; background: url(../images/top/news_bg2.png) no-repeat center center / 100% 100%;}
#course .ttl span{display: inline-block;}

#course .course_wrap{ display:flex;justify-content:space-between;}
#course .course_wrap .cont{ flex: 1;}
#course .course_wrap .cont .img{ max-height: 513px; }
#course .course_wrap .cont .img img{ max-width: none; width: 100%;}
#course .course_wrap .cont .text_wrap{ color: #FFF; display: inline-block; width: 100%;}
#course .course_wrap .cont1{background: #0071bc;}
#course .course_wrap .cont1 .text_wrap{background: #0071bc;}
#course .course_wrap .cont2 .text_wrap{background: url(../images/top/news_bg2.png) no-repeat center center / 100% 100%;}
#course .course_wrap .cont1 .text_wrap{ padding: 0em 2em 0em 2em;}
#course .course_wrap .cont2 .text_wrap{ padding: 0em 2em 3em 3em;}
#course .course_wrap .cont .text_wrap .name{ font-size: 2.4em; font-weight: bold; text-align: center; line-height: 1.2;}
#course .course_wrap .cont .text_wrap .lead{ font-size: 1.2em; font-weight: 600; text-align: center; line-height: 1.2; margin-top: 0.75em;}
#course .course_wrap .cont1 .text_wrap *{ max-width: 520px; margin: 0.75em 0 0 auto;}
#course .course_wrap .cont2 .text_wrap *{ max-width: 520px; margin: 0.75em auto 0 0;}
#course .course_wrap .cont .text_wrap br{ margin: 0;}

#course .course_wrap .cont .text_wrap a.co_btn{ margin: 1em 0 0 auto;}


@media all and (max-width: 750px) {
    #course .ttl{text-align: center; line-height: 1.2; color: #FFF; padding:0.5em 0.3em; font-size: 1.6em;}
    #course .course_wrap{ display:block;}
    #course .course_wrap .cont1 .text_wrap{ padding: 0em 1em 3em;}
    #course .course_wrap .cont2 .text_wrap{ padding: 0em 1em 3em;}
    #course .course_wrap .cont .text_wrap .name{ font-size: 1.8em;}
    #course .course_wrap .cont .text_wrap .lead{ font-size: 1.1em; font-weight: 600; text-align: center; line-height: 1.2; margin-top: 0.5em;}
    #course .course_wrap .cont1 .text_wrap *{ margin: 0.5em auto 0;}
    #course .course_wrap .cont2 .text_wrap *{ margin: 0.5em auto 0;}
}







#select{ margin-top: 3em;}
#select .cont_wrap{ display:flex;justify-content:space-between;align-items:flex-start;}
#select .cont_wrap .cont{ flex: 1; position: relative; overflow: hidden;}
#select .cont_wrap .cont2{ margin-top: 3em;}
#select .cont_wrap .cont .img{ max-height: 683px; }
#select .cont_wrap .cont .img img{ max-width: none; width: 100%;}
#select .cont_wrap .cont .text_wrap{ display: inline-block; width: 70%; position: absolute; background: rgba(255,255,255,0.95);}
#select .cont_wrap .cont1 .text_wrap{ padding: 0em 2em 2em 2em; left: 0; bottom: 0;}
#select .cont_wrap .cont2 .text_wrap{ padding: 0em 2em 2em 3em; right: 0; bottom: 0;}
#select .cont_wrap .cont .text_wrap .name{ font-size: 1.5em; font-weight: bold; line-height: 1.4;}
#select .cont_wrap .cont1 .text_wrap *{ max-width: 520px; margin: 0.75em 0 0 auto; word-break:break-word;}
#select .cont_wrap .cont2 .text_wrap *{ max-width: 520px; margin: 0.75em auto 0 0; word-break:break-word;}
#select .cont_wrap .cont .text_wrap br{ margin: 0;}

#select .cont_wrap .cont .text_wrap a.co_btn{color: #000; margin: 1em 0 0 auto;}
#select .cont_wrap .cont .text_wrap a.co_btn:hover{color: #FFF;}
#select a.co_btn::before,#select a.co_btn::after{border: 1px solid #000;}
#select a.co_btn:hover::before,#select a.co_btn:hover::after{background-color: #000;}

@media all and (max-width: 750px) {
    #select .cont_wrap{ display:block;}
    #select .cont_wrap .cont .text_wrap{  width: 94%; position: absolute; background: rgba(255,255,255,0.7);}
    #select .cont_wrap .cont1 .text_wrap{ padding: 0em 1em 1em 2em; left: 0; bottom: 0;}
    #select .cont_wrap .cont2 .text_wrap{ padding: 0em 1em 1em 2em; right: 0; bottom: 0;}
    #select .cont_wrap .cont .text_wrap .name{ font-size: 1.3em; font-weight: bold; line-height: 1.4;}
}




#youtube{ margin-top: 4em;;}
#youtube .ttl{ margin-bottom: 1.5em;text-align: center; position: relative;}
#youtube .ttl::after{ content: ""; width: 100%; height: 70%; background: #000; position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}
#youtube .ttl span{ position: relative; z-index: 3;display: block; }
#youtube .ttl .logo{ width: 35%; max-width: 427px; margin: auto;}
#youtube .ttl .deco{position: absolute; max-width: 266px; left: 100%; top: 50%; width: 63%; transform: translateY(-65%);}

#youtube .cont_wrap{ text-align: center;}
#youtube .cont_wrap .data{ display: inline-block; width: 28%; margin: 0 2% 2%;}
#youtube .cont_wrap .data .iframe{ width: 100%; height: 0; padding-bottom: 56.25%; position: relative;}
#youtube .cont_wrap .data .iframe iframe{ position: absolute; width: 100%;; height: 100%; left: 0; top: 0;}


@media all and (max-width: 750px) {
    #youtube .ttl{ margin-bottom: 1.5em;;}
    #youtube .ttl::after{ content: ""; width: 100%; height: 70%; background: #000; position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}
    #youtube .ttl span{ position: relative; z-index: 3;display: block; }
    #youtube .ttl .logo{ width: 50%; max-width: 427px; margin: auto;}
    #youtube .ttl .deco{position: absolute; max-width: 266px; left: 100%; top: 50%; width: 45%; transform: translateY(-65%);}
    #youtube .cont_wrap .data{ width: 45%; margin: 0 2% 2%;}
}




#instagram{ background: linear-gradient(45deg, #52c5e1,#e978b0); padding: 1em; margin-top: 3em;;}
#instagram .logo{ max-width: 290px; margin: auto; width: 40%;}
#instagram .text{ text-align: center; color: #FFF;}
#instagram .img_wrap{}

@media all and (max-width: 750px) {
    #instagram .logo{ max-width: 290px; margin: auto; width: 60%;}
    #instagram .text{ font-size: 0.9em; margin: 0.5em auto 0;}
}


#bnr_alea{background: url(../images/top/news_bg2.png) no-repeat center center / 100% 100%; margin-top: 3em; padding: 2em 1em;}
#bnr_alea .bnr_wrap{ font-size: 0; text-align: center;}
#bnr_alea .bnr_wrap .bnr{ display: inline-block; max-width: 272px; background: #FFF; width: 24%; margin: 0.5%; box-shadow:0 0 3px 0 rgba(0,0,0,0.3);}


@media all and (max-width: 750px) {
    #bnr_alea{padding: 2em 0.5em;}
    #bnr_alea .bnr_wrap .bnr{ width: 48%; margin: 1%;;}
}