@charset "UTF-8";
@media screen and (max-width: 639px) {
/* 639px 以下 */
.pc { display: none!important;}
.sp { display: block!important;}

html,body { font-size:95%; line-height: 1.7; }
img {max-width: 100%; }
ul.disc li{margin-left: 6%;} /*リスト黒丸 出す*/
.p_cnt {text-align: center;}


/* トップページへボタン
-------------------- */
.pagetop {bottom: 30px;right: 16px;}

#header { margin:0px; padding:0%; }
#header{ display: block; width: 100%; border-bottom: 1px solid #959595; position: fixed; z-index: 999; background: #FFF; }
#header_inner .header_sa01_l{ position: relative; z-index: 10; display: flex; flex-wrap: nowrap; align-items: center; background: #FFF; width: 100%; margin: 0 auto; justify-content: space-between;}
#sp_subbtn{ display: none;}
#sp_nav{
	position: absolute;
	top: -1300px;
	left: 0;
	right: 0;
	margin: auto;
	overflow-x: hidden;
	overflow-y: scroll;
	border-bottom: 1px solid #909090;
	background: #fff;
	transition: all 0.6s;
}
#header_logo{ width: 70%; z-index: 10; margin-left: 2%;}
#header_logo h1 a{ display: block; width: 100%; margin: 0;}

#pc_subnav,
#pc_nav{	display: none;}
#sp_subbtn{ display: flex; z-index: 1; margin-right: 4%;}

#nav_inner{ display: flex;}
#sp_subbtn #nav_btn{ display: flex; align-content: center;	flex-wrap: wrap; max-width: 48px; min-width: 24px;}
#nav_btn .nav_btn_bar{ width: 100%;}
#nav_btn .nav_btn_bar span{ display: block; height: 1px; background: #666; width: 100%; transition: 0.3s;}
#nav_btn .nav_btn_bar span:not(:last-child){ margin-bottom: 8px;}
#nav_btn.close{	margin-top: -7px;}
#nav_btn.close div.nav_btn_bar span:nth-child(2){ display: none;}
#nav_btn.close div.nav_btn_bar span:first-child{ transform: rotate(45deg); margin-top: 12px; margin-bottom: 6px;}
#nav_btn.close div.nav_btn_bar span:last-child{ transform: rotate(-45deg); margin-top: -7px;}

 
 /* コース選択
-------------------- */
#entrance-nav { display: flex;	flex-wrap: wrap;	justify-content: center;	margin: 2rem 0 0;}
#entrance-nav .course { position: relative;	margin: 0 auto; width: 48%;}	
#entrance-nav .course p {	margin: 0.5rem 0; font-size: 1rem; text-align: center;}
 
 
/*サポートお問い合わせ*/
p#btn_sup a{
  margin: 20px auto;
  margin-bottom: 10px;
  display: block;
  width: 70%;
  padding: 10px 10px;
  color: #FFF;
  text-decoration: none;
  background: #202745;
  text-align: center;
}
.telephone {font-size: 1.4rem; margin-right: 20px; text-align: center;}
.telephone a { font-size: 2rem; text-decoration: none; transition: 0.3s;}

#sp_search.show{	top: 54px;	z-index: 1;}
#sp_nav.show{ top: 54px;	height: 96vh;}
ul.info-nav { width: 100%; }
ul.sp_nav_menu{ margin: 20px 30px 0; font-size: 14px; text-align: left;}
ul#sp_subnav{
  margin: 8px 30px 0;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid #AFAFAF;
}
ul.drop-box{ display: none;}
ul.drop-box.close{ display: none !important;}
ul.sp_nav_menu li{ position: relative;}
ul.sp_nav_menu li,
ul.lev_1st > li > span{ margin-top: 10px; border-bottom: 1px solid #AFAFAF;}
ul.sp_nav_menu li.lev_2nd:last-of-type,
ul.sp_nav_menu li.lev_3rd{	border-bottom: none;}
ul.sp_nav_menu li:not(.has-drop) > span,
ul.sp_nav_menu li:not(.has-drop) > a,
ul.sp_nav_menu li a,
ul#sp_subnav li a{ display: block; padding-bottom: 10px; padding-left: 20px; text-decoration: none; }
ul.sp_nav_menu ul.lev_2nd > li{ padding-left: 40px;}
ul.sp_nav_menu ul.lev_2nd > li > a{ padding-left: 0;}
ul.sp_nav_menu ul.lev_2nd > li:last-of-type{	border-bottom: none;}
ul.sp_nav_menu li.lev_3rd a{ padding: 0 0 0 20px;}
ul.sp_nav_menu li.has-drop{ position: relative;}
ul.sp_nav_menu li.has-drop::before,
ul.sp_nav_menu li.has-drop::after{
  content: '';
  display: block;
  position: absolute;
  width: 15px;
  height: 1px;
  top: 11px;
  right: 21px;
  background: #666;
  opacity: 1;
  -webkit-transition: 300ms;
  transition: 300ms;
}
ul.sp_nav_menu li.has-drop::before{ width: 1px; height: 15px; top: 4px;	right: 28px;}
ul.sp_nav_menu li.has-drop.show::before{ transform: rotate(90deg);}
ul.sp_nav_menu li.has-drop.show::after{ opacity: 0;}
ul.sp_nav_menu li.outlink::after{
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 20px;
  width: 20px;
  height: 20px;
  background: url("../img/ex_link.png") no-repeat right center;
  background-size: contain;
}
ul.sp_nav_menu li.has-drop{ padding-bottom: 10px;}


div#container {padding-top:69px;}

section {padding: 4%;}
section p {margin-bottom: 1em;}

.curriculum_box {background: #fff; border:6px solid #202745; border-radius: 12px; padding: 4%; overflow: hidden;}

/*===========
.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.scroll-box div img {
  max-width: 100%;
  min-width: 800px;
  vertical-align: top;
}
 
/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* title
-------------------- */
h1 div.e_tit { width: 50%; font-size: 1.1rem;}
h1 div.j_tit { font-size: 1.2rem; }
h1 div.j_tit::before {
content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    left: -25px;
    transform: translateY(-50%);   /* 縦軸をセンタリングする */  
    border: 10px solid transparent;
    border-left: 15px solid #202745;
}
h1 div.j_tit::after {
content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    right: -25px;
    transform: translateY(-50%);   /* 縦軸をセンタリングする */  
    border: 10px solid transparent;
    border-right: 15px solid #ff5500;
}
h2.ttl {font-size: 1.4rem;line-height: 1.7; margin: 24px 0; padding: 0 4%;}
h2.ttl span.small { display:block; line-height: -1em!important; letter-spacing: 0.2em; font-size: 60%; background: none;}
h2.ttl::before {margin-right: 16px;}
h2.ttl::after {margin-left: 16px;}
h2.ttl_white { color: #FFF; font-size: 30px; border-bottom: 1px solid #fff; line-height: 1.5}
h3.sub_ttl { font-size: 1.2rem; margin: 2% 0; text-align: center;}
h3.sub_ttl2 { font-size: 1.1rem; color: #fff; margin: 2% 0; background: #ff5500; padding: 2px 10px; display: inline-block;}
h4 { font-size: 24px; margin: 15px 0;}
h5 { margin: 0 auto;}
h6 { font-size: 22px; margin: 0 auto; color: #ff5500;}

.fs14 {font-size: 0.8rem;}
.fs24 {font-size: 1.4rem;}

figure {font-size: 85%;}


div.point { margin: 0 auto;}
div.point .point_tit {width: 80%; margin: 0 auto; padding: 4%;}
div.point .point_box {border-radius: 8px; background: #fff; width: 80%; margin: 8% auto; padding: 4%; position: relative; }
div.point .p_icon {position: absolute; top:-20px; left:-20px; width: 30%; z-index: 50;}
div.point h2 {font-size: 150%; text-align: center; color: #f58242; padding-top: 4%;}
div.point p {font-size:100%;}

div.contact {margin: 0 auto; padding: 4%;}
div.container_contact {background-size: 10%;}
div.contact h3 {width: 95%; margin: 20px auto 5px;}
div.contact .contact_box { border:5px solid #333; margin: 4% auto; font-weight: bold;}
div.contact .contact_box .contact_bk {background: #000; padding:5px; color: #fff; font-size: 120%; text-align: center;}
div.contact .contact_box .under_contact {width: 90%; background: #ff5500; border-radius: 10px; text-align: center; margin: 10px auto; font-size: 1.2rem;}
div.contact .contact_box .under_contact a {display: block; color: #fff; padding: 20px; text-decoration: none; text-align: center; transition: 0.3s;}
div.contact .contact_box .phone_address {font-size: 200%; text-align: center; margin-bottom:20px;}
div.contact .contact_box .phone_address span {font-size: 120%;}
div.contact .contact_box .mail_address {margin-bottom:20px; font-size: 120%; text-align: center;}

div.learn { margin: 0 auto; padding-bottom: 20px; background: #fff;}
div.learn h5 {font-size: 200%; font-weight: bold; text-align: center;}
div.learn p { font-size: 120%; text-align: center;}

div.map {max-width: 960px; margin: 0 auto;}
div.btn { background: #ff5500; margin: 20px auto;  text-align: center; }
div.btn a {display: block; color: #fff; font-size: 1.2rem; padding: 10px; text-decoration: none; transition: 0.3s;}
  

/* Movie List
---------------------------------------------*/
.movieList {display:flex; flex-wrap: wrap; justify-content: space-between;}
.movieList .item { width: 47%;  border: 1px solid #ccc;  margin-bottom: 6%; background: #fff;}
.movie_ttl,.movie_txt { margin: 2% 0; padding: 4% 4%; font-size: 100%; font-weight: normal;}


/* SiteMap
-------------------- */
ul.sitemap { width: 80%; margin: 0 auto;}

/* footer
-------------------- */
footer#footer {
  padding-top: 2%;
	padding-bottom: 2%;
}
div.footer_inner { margin: 0 auto; padding: 0 2%;}
div.footer_inner ul.flex {display: flex; flex-wrap: wrap; color: #fff; line-height: 1.0; }
div.footer_inner ul.flex li.address { margin: 0 auto; margin-bottom: 4%; font-size: 100%; text-align: left; line-height: 1.5; text-align: center;}
div.footer_inner ul.flex li.address p { font-size: 180%; text-align: center;}
div.footer_inner ul.flex li.address span {font-size: 0.6rem; text-align: center; text-align: center;}
div.footer_inner ul.flex li.phone_mail { font-size: 220%; margin: 2% auto 2%; text-align: center;}
div.footer_inner ul.flex li.phone_mail span {display: inline-block; font-size: 0.9rem; text-align: center; line-height: 1.5;}
div.footer_inner ul.flex li.QR {display: none;}
div.footer_inner ul.flex li.QR img {width: 100%;}
div.footer_inner ul.policy {display: flex; justify-content: space-around;; margin: 20px auto 10px;}
div.footer_inner ul.policy li {margin: 0;}
div.footer_inner ul.policy li a { font-size: 0.8rem; color: #fff; line-height: 1.0; align-items: center; text-decoration: none; transition: 0.3s;}
div.footer_inner .copyright {color: #fff; font-size: 90%; margin:0; text-align: center; }


/* FlexBox
-------------------- */
ul.flex {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.flex li.item { margin-bottom: 4%; }
ul.flex li.item_img {}
ul.flex.alcnt { align-items: center;}
ul.flex.reverse {flex-direction: column-reverse; }


/* width
-------------------- */
.spw10 { width: 10%; } .spw15 { width: 15%; } .spw18 { width: 18%; } .spw20 { width: 20%; } .spw25 { width: 25%; } .spw30 { width: 30%; } .spw35 { width: 35%; } .spw40 { width: 40%; } .spw45 { width: 45%; } .spw48 { width: 48%; } .spw50 { width: 50%; } .spw55 { width: 55%; } .spw60 { width: 60%; } .spw65 { width: 65%; } .spw70 { width: 70%; } .spw75 { width: 75%; } .spw80 { width: 80%; } .spw85 { width: 85%; } .spw90 { width: 90%; } .spw95 { width: 95%; } .spw100 { width: 100%; } 

/* padding
-------------------- */
.pd5 { padding: 2%; }.pd10 { padding: 10px; } .pd20 { padding: 20px; } .pd30 { padding: 30px; } .pd40 { padding: 40px; } .pd50 { padding: 50px; } .pd60 { padding: 60px; } .pd70 { padding: 70px; } .pd80 { padding: 80px; } .pd90 { padding: 90px; } .pd100 { padding: 100px; }
.pd110 { padding: 110px; } .pd120 { padding: 120px; } .pd130 { padding: 130px; } .pd140 { padding: 140px; } .pd150 { padding: 150px; } .pd160 { padding: 160px; } .pd170 { padding: 170px; } .pd180 { padding: 180px; } .pd190 { padding: 190px; } .pd200 { padding: 200px; }
	
.pdt5 { padding-top: 5px; } .pdt20 { padding-top: 20px; }

/* padding-left
-------------------- */	
.pdl5 { padding-left: 5px; } .pdl10 { padding-left: 10px; } .pdl15 { padding-left: 15px; } .pdl20 { padding-left: 20px; } .pdl30 { padding-left: 30px; } .pdl40 { padding-left: 40px; } .pdl60 { padding-left: 60px; }
  
/* padding-right
-------------------- */	
.pdr5 { padding-right: 5px; }
	
/* margin
-------------------- */
.smg0a{margin: 0 auto;} .mg0 {margin: 0 auto!important;} .mg0 { margin: 0; } .mg10 { margin: 10px; } .mg20 { margin: 20px; } .mg30 { margin: 30px; } .mg40 { margin: 40px; } .mg50 { margin: 50px; } .mg60 { margin: 60px; } .mg70 { margin: 70px; } .mg80 { margin: 80px; } .mg90 { margin: 90px; } .mg100 { margin: 100px; }
.mg110 { margin: 110px; } .mg120 { margin: 120px; } .mg130 { margin: 130px; } .mg140 { margin: 140px; } .mg150 { margin: 150px; } .mg160 { margin: 160px; } .mg170 { margin: 170px; } .mg180 { margin: 180px; } .mg190 { margin: 190px; } .mg200 { margin: 200px; }

/* margin-top
-------------------- */
.mgt5 { margin-top: 5px; } .mgt10 { margin-top: 10px; } .mgt15 { margin-top: 15px; } .mgt20 { margin-top: 20px; } .mgt40 { margin-top: 40px; } .margin_box { margin-top: 20px; }
	
	
/* margin-bottom
-------------------- */
.mgb10 { margin-bottom: 10px; } .mgb20 { margin-bottom: 20px; } .mgb30 { margin-bottom: 30px; } .mgb40 { margin-bottom: 40px; } .mgb50 { margin-bottom: 50px; } .mgb56 { margin-bottom: 56px; } .mgb60 { margin-bottom: 4%; } .mgb70 { margin-bottom: 70px; } .mgb80 { margin-bottom: 80px; } .mgb90 { margin-bottom: 90px; } .mgb100 { margin-bottom: 100px; }
.mgb110 { margin-bottom: 110px; } .mgb120 { margin-bottom: 120px; } .mgb130 { margin-bottom: 130px; } .mgb140 { margin-bottom: 140px; } .mgb150 { margin-bottom: 150px; } .mgb160 { margin-bottom: 160px; } .mgb170 { margin-bottom: 170px; } .mgb180 { margin-bottom: 180px; } .mgb190 { margin-bottom: 190px; } .mgb200 { margin-bottom: 200px; }  .margin_box { margin-bottom: 30px; } 
.smgb15 { margin-bottom: 15%; } .smgb4 { margin-bottom: 4%; }


/* margin-right
-------------------- */
.mgr5 { margin-right: 5px; } .mgr10 { margin-right: 10px; } .mgr15 { margin-right: 15px; } .mgr20 { margin-right: 20px; } .margin_box { margin-right: 30px; }
	
/* margin-left
-------------------- */
.mgl5 { margin-left: 5px; } .mgl10 { margin-left: 10px; } .mgl15 { margin-left: 15px; }.mgl20 { margin-left: 20px; } .margin_box { margin-left: 30px; }

}