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

/*------------------------------------------------------

	common css

------------------------------------------------------*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; overflow: scroll; font-size: 10px; scroll-behavior: smooth; }
body { font-family: " ÓÎ¥´¥·¥Ã¥¯ Medium", ÓÎ¥´¥·¥Ã¥¯Ìå, "Yu Gothic Medium", YuGothic,¥á¥¤¥ê¥ª, Meiryo, "£Í£Ó £Ð¥´¥·¥Ã¥¯", "MS PGothic", sans-serif; color: #272525; line-height: 1.5; background-color: #fff; overflow: hidden; font-size: 1.5rem;}
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative;}
ul { list-style: none; }
ol { list-style: decimal; }
img { vertical-align: bottom; width: auto; max-width: 100%; height: auto; }
/*a:link { color: #000; text-decoration: none; }
a:visited { color: #000; }*/

a { text-decoration: none; color: #272525; }
a.fade:hover { text-decoration: none; background-color: #fff; color: #333; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pc { display:block; }
.sp { display:none; }

main { display: block; margin-bottom: 60px; }

@media (min-width: 768px) {
	body{ min-width: 1100px; }
	.container { max-width: 1100px; }

	a:hover { text-decoration: underline; }
	a img:hover { opacity: 0.8; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
}

@media screen and (min-width:768px) and ( max-width:1080px) {
    .container { width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
}

@media (max-width: 767px) {
	body{ }
	.container {  margin-left: 20px; margin-right: 20px; width: auto; }
	.pc { display: none; }
	.sp { display: block; }

  /*.text { font-size: 1.6rem; line-height: 1.5; }*/
}


/*------------------------------------------------------

	flexbox

------------------------------------------------------*/
.colWrap { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; align-items: stretch; -webkit-align-items: stretch; align-content: stretch; -webkit-align-content: stretch; }

/*------------------------------------------------------

    pageTop

------------------------------------------------------*/
#page-top { position:fixed; bottom:20px; right:20px; font-size:1.4rem; z-index:999; }
#page-top a { background: #666; text-decoration: none; color:#fff; width:100px; padding:20px 0; text-align:center; display: block; border-radius: 5px; opacity:0.8;  }

@media (min-width: 768px) {
    #page-top a:hover { text-decoration:none; background:#999; }
}

@media (max-width: 767px) {

}


/*------------------------------------------------------



------------------------------------------------------*/


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


/*------------------------------------------------------

    header

------------------------------------------------------*/
header {}
header h1 {}


header .logo { text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(/special/new_course_2022/common/img/text_logo.png) no-repeat left top; background-size: 100% auto; position: absolute; z-index: 1; left: 18%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);  }

@media (min-width: 768px) {
    header { height: 550px; background: url("/special/new_course_2022/common/img/bg_main_visual.jpg") no-repeat center center; background-size: cover; margin: auto; margin-bottom: 80px; width: 1100px; }
    /* SP»­Ïñ¤Ïindex.php¤ÎÖФËimg¥¿¥°¤Ç•ø¤¤¤Æ¤¢¤ê¤Þ¤¹¡£ */
    header h1 { width: 640px; height: 290px; top: 130px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("/special/new_course_2022/common/img/text_main_visual.png") no-repeat left top; background-size: 100% auto; margin-left: auto; margin-right: auto; position: absolute; z-index: 1; left: 35%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }

    header .logo { width: 205px; height: 30px; top: 30px; left: 160px;  }
}

@media (max-width: 1100px) {
    header h1 { left:395px; }
    header .logo { left: 150px; }
}


@media (max-width: 767px) {
    header { height: auto; }
    header .mv { margin-bottom: 30px; }
    header h1 { display: block; position: static; width: 290px; margin: auto; margin-bottom: 40px; }

    header .logo { left: 65px; top:5px; width: 112px; }
}


#g_nav { position: absolute; width: 100%; transition: all 0.6s; z-index: 50; }
#g_nav ul li a { display: block; font-weight: bold; text-align: center; text-decoration: none; transition: 0.3s; }
#g_nav ul li a:hover { opacity: 0.6; }


@media (min-width: 768px) {
    #g_nav { top: 150px; right: -320px; background: rgba(255,255,255,0.67); padding: 20px 60px 20px 0; max-width: 318px; position: fixed; }
    #g_nav.open { right: 0; }
    #g_nav ul { border-right: 1px solid #000; }
    #g_nav ul li a { color: #000; padding: 8px; font-size: 1.6rem; }
    #menu_pc .menu_wrap { position: fixed; top: 70px; right: 0; z-index: 100; background: rgba(135,196,208,0.59); width: 34px; text-align: center; padding: 15px 0 30px 0px; }
    #menu_pc .menu_wrap img { width: 23px; }
    #menu_pc .home_btn { position: fixed; top: 240px; right: 0; z-index: 100; background: rgba(135,196,208,0.59); width: 34px; text-align: center; padding: 3.5px 0px 3.5px 0px; }
    #menu_pc .home_btn img { width: 26px; }
    #menu_pc .menu_wrap [class^='header_'] { display: block; padding: 4px; }
    #menu_pc .menu_wrap .header_fb { padding: 0px; padding-top: 40px; }
    #menu_pc .menu_wrap .header_insta { padding: 0px; }
    #menu_pc .menu_wrap .menu { transition: 0.3s; color: #000; font-size: 1.4rem; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin: 13px auto; line-height: 1; font-weight: bold; height: 46px; }
	#menu_pc .menu_wrap .menu:hover { opacity: 0.7; }
	#menu_pc .menu_wrap > a { transition: 0.3s; }
	#menu_pc .menu_wrap > a:hover { opacity: 0.7; }
    #menu_pc .menu { cursor: pointer; }
    #menu_pc .menu > span { opacity: 1; transition: all 0.6s; }
    #menu_pc .menu.open > span { opacity: 0; }
    #menu_pc .menu .close { width: 35px; height: 35px; position: absolute; top: 90px; right: 0; left: 0; margin: 0 auto; }
    #menu_pc .menu .close span { opacity: 0; transition: all 0.6s; display: block; background: #000; width: 20px; height: 2px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; }
    #menu_pc .menu.open .close span { opacity: 1; }
    #menu_pc .menu.open .close span:nth-of-type(1) { transform: rotate( 45deg); }
    #menu_pc .menu.open .close span:nth-of-type(2) { transform: rotate( -45deg); }
}

@media (max-width: 767px) {
    #g_nav { top: -340px; left: 0; right: 0; margin-left: auto; background: rgba(62, 57, 57, 0.55); padding-top: 30px; width: 135px; }
    
    #g_nav.open { top: 0; }
    #g_nav ul li:first-of-type { text-align: center; padding: 4px; }
    #g_nav ul li:first-of-type img { max-width: 16px; }
    #g_nav ul li:not(:last-of-type) { border-bottom: 1px solid #fff; }
    #g_nav ul li a { color: #fff; padding: 5px; font-size: 1.0rem; }
    #g_nav ul li.sp a { padding: 1px 0px 7px; }
    #menu_sp_wrap { position: absolute; top: 0; right: 0; width: 80px; height: 78px; background-size: 100%; z-index: 999; }

    #g_nav .contact { position: relative; }
    #g_nav .contact::before { content: ''; display: inline-block;background-image: url(/special/new_course_2022/common/img/icon_mail_white.svg); width: 10px; height:8px; background-size: cover; margin-right: 5px;   }
    #g_nav .document { position: relative; }
    #g_nav .document::before { content: ''; display: inline-block;background-image: url(/special/new_course_2022/common/img/icon_book_white.svg); width: 15px; height: 12px; background-size: cover; margin-right: 5px; top: 3px; position: relative;  }
    #menu_sp { position: absolute; top: 0; right: 0; width: 43px; height: 50px; padding: 14px 9px; z-index: 1000; }
    #menu_sp span { display: block; background: rgba(0,0,0,1); height: 2px; }
    #menu_sp span:nth-of-type(1) { margin-bottom: 4px; }
    #menu_sp span { transition: all .4s; }
    #menu_sp.open span:nth-of-type(1) { transform: translateY(3px) rotate(-45deg); }
    #menu_sp.open span:nth-of-type(2) { transform: translateY(-3px) rotate(45deg); }

    #menu_sp p { font-size: 1.0rem; letter-spacing: -0.15rem; }
}


/*------------------------------------------------------

    article section

------------------------------------------------------*/

h2  { font-size: 3.5rem; background: linear-gradient(transparent 89%, #FF5958 0%); display: inline; padding: 0 0px 10px; color: #3F5176; }

.h3_wrap { position: relative; }
.h3_wrap::before { content:''; width: 100%; height: 1px; background: #000000; display: block;  position: absolute; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: -1; }

section { margin-bottom: 20px; }

@media (min-width: 768px) {
    article { width: 1100px; margin: auto; }
    h2  { font-size: 3.5rem; line-height: 6rem; letter-spacing: 0.3rem; }
    h3{ text-align: center;  width: 245px; margin: auto; padding: 9px 0px; font-size: 2.3rem; color: #fff; border-radius: 50px; }

}

@media (max-width: 767px) {


    h2  { font-size: 2.0rem; line-height: 4rem;  letter-spacing: 0.1rem;  }
    h3{ text-align: center;  width: 100%; margin: auto; padding: 9px 0px; font-size: 1.6rem; color: #fff; font-weight: normal;}
    section { margin-bottom: 10px; }

}

/*------------------------------------------------------

    about

------------------------------------------------------*/

#about { text-align: center;  }


.h2_wrap { margin-bottom: 55px; }

#about p { font-size: 1.8rem; }

#about .check_btn { background: #87C4D0;  display: block; width: 560px; margin: auto; line-height: 2.5rem; margin-top: 100px; position: relative; }

#about .check_btn::before { content:'';  background-image: url(/special/new_course_2022/common/img/icon_check.svg);display: block; width: 60px; height: 65px; position: absolute;  }

#about .check_btn a { font-weight: bold; }

#about .caption {   font-size: 1.2rem; text-align: left; line-height: 1.8rem;  margin-top: 10px;}

@media (min-width: 768px) {
    #about { margin-bottom: 90px;  }
    #about p { line-height: 4rem; }
    #about .caption  { text-align: center; }
    #about .check_btn {  display: block; width: 560px; margin-top: 100px; padding: 10px 40px; }
    #about .check_btn::before { width: 60px; height: 65px; top: -26px; left: -34px; }
    #about .check_btn a { font-size: 2.0rem; width: 100%; height: 100%; }   

}

@media (max-width: 767px) {
    #about { margin-bottom: 40px;  }
    #about  { padding: 0px 35px; text-align: justify; }
    #about p { line-height: 3.5rem; }
    #about .h2_wrap { text-align: center;  margin-bottom: 35px; }

    #about .caption { margin: 5px auto 0px auto; max-width: 500px; }

    #about .check_btn {  display: block; width: 100%; margin-top: 50px; text-align: center; padding: 5px 10px 5px 40px; max-width: 500px; }
    #about .check_btn a { font-size: 1.6rem; width: 100%; height: 100%; display: block;}
    #about .check_btn::before { width: 40px; height: 45px; background-repeat: no-repeat; top: -15px; left: -15px; } 
    #about .check_btn span { display: none; }

}

/*------------------------------------------------------

    literature

------------------------------------------------------*/

#literature { position: relative; }

#literature .h3_wrap { margin-bottom: 20px; }

#literature .contents img { width: 1035px; margin: auto; display: block; }
#literature .contents img:not(:last-child) { margin-bottom: 15px; }


@media (min-width: 768px) {

    #literature h3{ background: #72BF6A; margin:0px; margin-left: 35%; }

    #literature::before { width: 340px; height: 355px; content: ''; background-image: url(/special/new_course_2022/common/img/bg_01.png); display: block; background-size: contain; position: absolute; z-index:-1; top: -37px; left: -173px;}

    #literature::after { width: 765px; height: 225px; content: ''; background-image: url(/special/new_course_2022/common/img/bg_02.png); display: block; background-size: contain; position: absolute; z-index:-1; bottom: 523px; right: -135px; }


}

@media (max-width: 767px) {
    #literature h3{ background: #72BF6A; }
    #literature .sp .contents{ background: #C4E8BE; padding: 20px 35px; margin-top: 10px; }
    #literature .sp .contents img { margin-bottom: 10px; }
    
}


@media (max-width: 767px) and (min-width: 481px) {
    #literature h3{ background: #72BF6A; }

    #literature .sp {  }
    #literature .sp .wrap { display: -webkit-flex; display: flex;-webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; padding: 10px;}

    #literature .sp .contents{ background: #C4E8BE; padding: 20px 20px; margin-top: 10px; width: 49%; }

}

@media (max-width: 480px) {

    #literature .sp .contents{ background: #C4E8BE; padding: 20px 35px; margin-top: 10px; }
    #literature .sp .contents img { margin-bottom: 10px; }


}



/*------------------------------------------------------

    education

------------------------------------------------------*/

#education h3{ background: #FF5958; }
#education .contents img { width: 1035px; margin: auto; display: block; }

@media (min-width: 768px) {

}

@media (max-width: 767px) {

    #education .sp .contents{ background: #FFF980; padding: 20px 35px; margin-top: 10px; }
    
}

@media (max-width: 767px) and (min-width: 481px) {

    #education .sp .wrap { display: -webkit-flex; display: flex;-webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; padding: 10px;}

    #education .sp .contents{ background: #FFF980; padding: 20px 20px; margin-top: 10px; width: 49%; }



}

@media (max-width: 480px) {

}




/*------------------------------------------------------

    contemporary-japan

------------------------------------------------------*/

#contemporary-japan { position: relative; }

#contemporary-japan h3{ background: #6C7CBB; }

#contemporary-japan .contents img { width: 1035px; margin: auto; display: block; }

@media (min-width: 768px) {

    #contemporary-japan::before { width: 425px; height: 370px; content: ''; background-image: url(/special/new_course_2022/common/img/bg_03.png); display: block; background-size: contain; position: absolute; z-index:-1; top: 25px; left: -239px; }

}

@media (max-width: 767px) {

    #contemporary-japan .sp .contents{ background: #A7B1D7; padding: 20px 35px; margin-top: 10px; }
    
}

@media (max-width: 767px) and (min-width: 481px) {

    #contemporary-japan .sp .wrap { display: -webkit-flex; display: flex;-webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; padding: 10px;}

    #contemporary-japan .sp .contents{ background: #A7B1D7; padding: 20px 20px; margin-top: 10px; width: 49%; }



}

@media (max-width: 480px) {

}



/*------------------------------------------------------

    footer

------------------------------------------------------*/

footer .copyright { text-align: center; color: #20387e; width: 100%; padding:20px 0px; font-size: 14px;}

#foot_navi {   }
#foot_navi ul {   }
#foot_navi ul li a { border: 1px solid #5b6ab8; box-sizing: border-box; font-weight: bold; font-size: 1.6rem; position: relative; display: block; text-decoration: none;  color: #20387e; }
#foot_navi ul li a::before { content: ''; width: 20px; height: 22px; background-size: 100%; display: block; background-image: url(/special/new_course_2022/common/img/icon_footarrow.png); position: absolute;  right: 25px; }

#foot_cont .foot_logo {}
#foot_cont .contact_sns { font-size: 1.6rem; font-weight: bold; color: #20387e; }
#foot_cont .contact_sns * { display: inline-block; }
#foot_cont .contact_sns a { width: 25px; height: 25px; }

#foot_cont .l_col-2 { -webkit-align-items: center; align-items: center; }

#foot_cont .contact_sns > div:first-child { margin-right: 30px; }
#foot_cont .contact_sns > div:last-child a:not(:last-child) { margin-right: 15px; }
#foot_cont .contact_sns > div > p { margin-right: 15px; }

@media (min-width: 768px) {
    #foot_navi { margin-bottom: 60px;  }
    #foot_navi ul { padding: 0px 55px;  }
    #foot_navi ul li a { width: 290px; height: 60px; text-align: center;padding-top: 18px;  }
    #foot_cont .foot_logo { width: 240px; height: auto; display:block; }
    #foot_cont .contact_sns { text-align: right;  }
    
}


@media (max-width: 767px) {
    #foot_navi { margin-bottom: 30px;  }
    #foot_navi ul li { width: 100%; }
    #foot_navi ul li a { padding: 20px; }
    #foot_cont .contact_sns { text-align: left;  }
    #foot_cont .contact_sns > div:first-child { margin-bottom: 10px;}


}