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


/*****************************************************

	header

*****************************************************/

















/************SP************/@media (max-width: 767px) {
	
/*****************************************************

  全ページ　共通

*****************************************************/
	
.pc {
	display: none;
}

.sp {
	display: block;
}	
	
	






/*****************************************************

	header

*****************************************************/



header {
	width: 100%;
	height: 150px;
	color: #235ba8;
	background-color: #fff;
	box-shadow: 2px 1px 1px 1px rgba(0,0,0,0.5);
	z-index: 20;
}
header h1 {
	width: 50%;
	margin: 0 ;
}
header .inner {
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
	position: relative;
	z-index: 20;
}
header h1, header .tel, header .wrap nav, header .member li:last-child {
	display: none;
}
header{
	height: 60px;
	padding: 0 0 0px 15px;
	/*margin: 0 0 19px 0;*/
	
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	border-bottom: solid 1px #888;
	position: fixed;
	z-index: 20;
	margin-top: -2px;
}
header .wrap {
	display: flex;
}





.head-space{
	height: 63px;
}

.head-sp .logo{
	width: 100%;
	
	margin-top: 10px;
}

.head-sp .logo img{
	width: 245px;
	margin: 0 auto;
	height: auto;
}


.h-nav{
	font-size: 15px;
	margin: 10px 0;
	border-bottom: dashed 1px #333;
	padding-bottom: 9px;
}


.a-link{
	height: 63px;
	margin-top: -63px;
}

/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -400px;
  bottom: 0;
  width: 400px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: .5s;
  z-index: 3;
}
.open nav {
  left: 0;
}
nav .box {
  padding: 25px;
}
nav .box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .box ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}
nav .box ul li a {
  display: block;
  color: #333;
  font-size: 15px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .box ul li a:hover {
  background: #e4e4e4;
}
@media screen and (max-width: 767px) {
  nav {
    left: -310px;
    width: 310px;
  }
}
/*============
@keyframes
=============*/
@keyframes equalizer01 {
  0% {
    width: 70%;
  }
  10% {
    width: 50%;
  }
  20% {
    width: 100%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 50%;
  }
  50% {
    width: 70%;
  }
  60% {
    width: 50%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 100%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 70%;
  }
}
@keyframes equalizer02 {
  0% {
    width: 30%;
  }
  10% {
    width: 20%;
  }
  20% {
    width: 40%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 20%;
  }
  50% {
    width: 30%;
  }
  60% {
    width: 20%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 40%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 30%;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 15px;
  right: 10px;
  width: 60px;
  height: 30px;
  transform: translate(0, 0);
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.open .toggle_btn {
  left: 330px;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #666;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 5px;
  width: 60px;
  animation: equalizer01 7000ms infinite;
}
.toggle_btn span:nth-child(2) {
  top: 15px;
  width: 30px;
  animation: equalizer02 5000ms infinite;
  animation-delay: 0.33s;
}
.toggle_btn span:nth-child(3) {
  top: 25px;
  width: 20px;
  animation: equalizer02 5000ms infinite;
}
.open .toggle_btn span {
  background-color: #fff;
  width: 30px;
}
.open .toggle_btn span:nth-child(1) {
  transform: translate(0, 10px) rotate(-45deg);
  animation: unset;
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
  animation: unset;
}
.open .toggle_btn span:nth-child(3) {
  transform: translate(0, -10px) rotate(45deg);
  animation: unset;
}
@media screen and (max-width: 767px) {
  .open .toggle_btn {
    left: 340px;
  }
}
/*============
#mask
=============*/
#mask {
  display: none;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
  transition: all .5s;
}



/*****************************************************

  footer

*****************************************************/

footer {
	
	padding: 4% 0 3%;
	color: #999;
	border-top: 10px solid #036E9E;
	
}
footer .inner {
	width: 96%;
	margin: 0 2%;
	
}

footer .inner .logo{
	width: 76%;
	margin: 0 12% 3%;
}

footer .inner .cont{
	display: block;
    justify-content: space-between;
	margin-bottom: 6%;
}

footer .inner .cont .l-box{
	width: 96%;
	margin: 3% 2%;
	font-size: 4.3vw;
	color: #111;
}

footer .inner .cont .l-box h2{
	
	font-size: 5vw;
	margin-bottom: 5%;
	
}

footer .inner .cont .l-box p{
	
	font-size: 4.2vw;
	line-height: 160%;
	
	
}


footer .inner .cont .r-box{
	width: 96%;
	margin: 0 2%;
	color: #111;
}

footer .inner .cont .r-box p{
	font-size: 5vw;
	line-height: 160%;
	margin-bottom: 4%;
}

footer .inner .cont .r-box .btn{
	width: 90%;
	margin: 2% 5%;
}


footer .inner .nav{
	width: 96%;
	margin: 0 2%;
	display: block;
    justify-content: space-between;
	color: #111;
	font-size: 4.2vw;
	margin-bottom: 30px;
	text-align: center;
}

footer .inner .nav li{
	margin-bottom: 2%;
}



footer .copy {
	width: 100%;
	text-align: center;
	background-color: #036E9E;
	color: #fff;
	padding: 15px 0;
	font-size: 4vw;
}

footer .inner .footBox{
	display: flex;
    justify-content: space-between;
	width: 96%;
	margin: 0 2% 2%;
	
}






/*****************************************************

  トップページ	

*****************************************************/


.top-img{
	width: 100%;
	background-image: url(../../img/bg_1.jpg);
	padding: 30px 0;
	margin-bottom: 50px;
}



.titol {
	text-align: center;
	margin: 10px;
}

.titol img{
	margin: 3% 0;
}




.titol h3{
	font-size: 5.2vw;
	font-weight:bold;
	width: 98%;
	margin: 0 1%;
}




.top-img .inner .btn{
	
	position: absolute;
	top: 400px;
	left: 72%;
	width: 250px;
}









.top-titol{
	width: 96%;
	margin: 0 2%;
	background-image: url(../img/sect_titol_mark.png);
	background-repeat: no-repeat;
	color: #036EA4;
	background-size: 13%;
	padding-left: 5%;
	padding-bottom: 10px;
}

/**/

.sect-top{
	width: 100%;
}

.sect-top .inner{
	width: 96%;
	display: block;
	margin: 5% 2%;
}

.sect-top .inner .txt{
	width: 96%;
	margin: 0 2%;
}

.sect-top .inner .txt h3{
	font-size: 5vw;
	color: #036EA4;
	text-align: center;
	margin-bottom: 15px;
	line-height: 170%;
}

.sect-top .inner .txt p{
	font-size: 4.2vw;
	color: #111;
	line-height: 170%;
}


.sect-top .inner .img{
	width: 90%;
	margin: 2% 5%;
}

.slide {
	width: 100%;
	
}


/*----------
 
   LINE

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


.sect-line{
	width: 100%;
	background-image: url(../img/btn_bg.png);
	padding: 50px 0;
	margin-bottom: 9%;
}

.sect-line .inner{
	width: 96%;
	margin: 0 2%;
	text-align: center;

}

.sect-line .inner .btn{
	width: 90%;
	margin: 0 auto;
	

}

.sect-line .inner h3{
	font-size: 5vw;
	margin-bottom: 2%;
	

}

/*＝＝＝＝＝＝＝＝＝＝＝＝
 
   sect-1 こんな方におすすめ

＝＝＝＝＝＝＝＝＝＝＝＝*/

.sect-1{
	width: 100%;
	margin-bottom: 5%;

}

.sect-1 .inner{
	width: 96%;
	margin: 0 2%;
	text-align: center;
	border: 3px solid #036EA4;
	padding: 30px 2%;
	border-radius: 15px;
}

.sect-1 .inner ul{
	
}


.sect-1 .inner ul li{
	background-image: url(../img/sect1_mark.png);
	background-repeat: no-repeat;
	text-align: left;
	background-size: 6%;
	padding-left: 8%;
	font-size: 20px;
	margin-bottom: 15px;
	font-size: 4.3vw;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝
 
   counse カウンセリングボタン

＝＝＝＝＝＝＝＝＝＝＝＝*/

.sect-counse{
	width: 100%;
	background-image: url(../img/btn_bg.png);
	padding: 50px 0;
	margin-bottom: 9%;
}

.sect-counse .inner{
	width: 96%;
	margin: 0 2%;
	text-align: center;

}

.sect-counse .inner .btn{
	width: 70%;
	
	

}

.sect-counse .inner h3{
	font-size: 5vw;
	margin-bottom: 2%;
	color: #060;
	

}


/*＝＝＝＝＝＝＝＝＝＝＝＝
 
   counse 学ぶポイント

＝＝＝＝＝＝＝＝＝＝＝＝*/

.sect-point{
	width: 100%;
	margin-bottom: 9%;
	margin-top: 4%;

}

.sect-point .inner{
	width: 100%;
	margin: 0 auto;
	
}

.sect-point .inner ul{
	display:block;
	-webkit-flex-wrap: wrap;          /* Safari etc. */
  	-ms-flex-wrap    : wrap;          /* IE10        */
  	flex-wrap        : wrap;
    
    justify-content: space-between;
}


.sect-point .inner ul li{
	border: 3px solid #036EA4;
	padding: 2% 2% 4%;
	width: 96%;
	margin: 2% 2% 4%;
	
	
}

.sect-point .inner ul li dt{
  float: left;
    
    width: 75px;
	padding:0px 10px 3% 0;
}

.sect-point .inner ul li dl{
	height: 50px;
  margin-bottom: 9%;
  
}

.sect-point .inner ul li dd{
	
	
}

.sect-point .inner ul li dd h3{
	font-size: 5vw;
	padding: 20px 0 0 0px;
	line-height: 150%;
}

.sect-point .inner ul li p{
	font-size: 4.2vw;
	
}


.sect-point .inner ul li  h4{
	font-size: 22px;
	color: #036EA4;
	margin: 15px 0 10px;
	font-size: 4.5vw;
}


.sect-point .inner ul li dd .point{
	font-size: 5vw;
	padding: 10px 0 0 0px;
	line-height: 150%;
}

.sect-point .inner ul li .btn{
	margin-top: 5%;
	
}

.sect-point .inner ul li .btn a{
	border: 3px solid #036EA4;
	background-color: #036EA4;
	border-radius: 15px;
	color: #fff;
	width: 90%;
	font-size: 4.5vw;
	padding: 6px 15px;
	
	
}

.sect-point .inner ul li .btn a:hover{
	border: 3px solid #036EA4;
	background-color: #036EA4;
	border-radius: 15px;
	color: #fff;
	width: 90%;
	font-size: 4.5vw;
	padding: 5px 15px;
	
}

.point1_txt{
	margin-bottom: 2%;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝
 
   counse 講師紹介

＝＝＝＝＝＝＝＝＝＝＝＝*/




.sect-Instruct{
	width: 100%;
	margin-bottom: 5%;
}


.sect-Instruct .inner ul li{
	width: 100%;
	background-image: url(../img/Instruct_bg_l.png);
	background-position: ;
	background-repeat: repeat;
	padding: 0;
	z-index: 10;
	margin-bottom: 3%;
}

.sect-Instruct .inner ul li dl{
	width: 96%;
	margin: 0 2%;
  
}

.sect-Instruct .inner ul li dt{
    float: none;
	width: 90%;
	padding: 3% 6% 0 15%;
	color: #fff;
	padding-bottom: 1%;
	margin-top: 0;
}


.sect-Instruct .inner ul li dd{
	width: 96%;
	margin: 0 2%;
	color: #fff;
	padding: 0px 0px 2%;
}

.sect-Instruct .inner ul li dd h3{
	font-size: 4.3vw;
	padding: 3% 0 0 0px;
	line-height: 150%;
	color: #fff;
	font-weight: 100;
}

.sect-Instruct .inner ul li dd p{
	font-size: 4.3vw;
	padding: 20px 0 0 0px;
	line-height: 150%;
	color: #fff;
}

.sect-Instruct .inner ul li dd p a{
	font-size: 4.3vw;
	line-height: 150%;
	color: #333;
	background-color: #fff;
	padding: 2px 10px;
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



.bg_y{
	width: 0%;
	background-image: url(../img/Instruct_bg_r.png);
	background-repeat: repeat;
	padding-top: 100px;
	margin-top: -30px;
	float: right;
	z-index: 5;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝
 
    講師メッセージ

＝＝＝＝＝＝＝＝＝＝＝＝*/


/*=================================

　　講師メッセージ

=================================*/


.sect-Message .inner{
	width: 96%;
	margin: 0 2%;
	background-image: url(../img/message_bg.png);
	background-position: center;
	background-repeat: repeat-y;
	height: auto;
	padding: 8% 0;
	margin-bottom: 9%;
}

.sect-Message .inner .video{
	width: 96%;
	margin: 0 2%;
	
}

.sect-Message .inner ul li .video iframe {
	height:315px;
}






.sect-student_in .inner{
	width: 96%;
	margin: 0 2%;
	margin-bottom: 9%;
}


.sect-student_in .inner ul{
	display: block;
    justify-content: space-between;
}

.sect-student_in .inner ul li{
	width: 96%;
	margin: 0 2% 5%;
}


.sect-student_in .inner ul li h3{
	font-size: 4.5vw;
}


/*=================================

　　おすすめ

=================================*/

.sect-osusume{
	margin-bottom: 100%;
	margin-bottom: 9%;
}

.sect-osusume .inner{
	width: 96%;
	margin: 0 2%;
}

.sect-osusume .inner p{
	width: 96%;
	margin: 5% 2% 4%;
	font-size: 4.5vw;
	line-height: 170%;
	
}



.sect-osusume table {
    border-collapse: collapse;  /* セルの線を重ねる */
}
 
.sect-osusume th,td {
    padding: 0;          /* 余白指定 */
}
 
.sect-osusume th {
    background-color: #2196F3;  /* 背景色指定 */
    color:  #fff;               /* 文字色指定 */
    font-weight:  normal;       /* 文字の太さ指定 */
    position:  relative;        /* 位置指定 */
    z-index: 10;  
	width: 30%; 
	padding: 1%;  
	font-size: 4.2vw;           /* 重なり調整 */
}
 
.sect-osusume td {
    background-color: #FFFFEA; /* 背景色指定 */
    padding-left: 25px;  
	     /* 余白指定 */
	width: 70%;
	padding: 2% 2%  2% 6%;  
	font-size: 4.2vw; 
	border: none;
}
 
.sect-osusume th::after {
    content:'';                 /* 空の要素を作る */
    position:  absolute;        /* 位置指定 */
    height: 20px;               /* 高さ指定 */
    width: 20px;                /* 幅指定 */
    background-color: #2196F3;  /* 背景色指定 */
    transform:  rotate(45deg);  /* 要素を回転 */
    top: 35%;                   /* 位置指定 */
    right: -10px;               /* 位置指定 */
    z-index:  -1;               /* 重なり調整 */
}
 
.sect-osusume tr {
    border-bottom:  solid #fff; /* 線指定 */
}







/*=================================

　　カリキュラム

=================================*/


.sect-curriculum{
	width: 100%;
	margin-bottom: 9%;

}

.sect-curriculum .inner{
	width: 96%;
	margin: 0 2%;
	
}

.sect-curriculum .inner .course{
	width: 70%;
	margin: 0 15%;
	background-color: #09C;
	color: #fff;
	text-align: center;
	font-size: 5vw;
	margin-bottom: 4%;
	padding: 5px;
	
}


.sect-curriculum .inner ul{
	font-size: 4.3vw;
	line-height: 170%;
}


.sect-curriculum .inner ul li{
	font-size: 4.3vw;
	line-height: 180%;
}

.sect-curriculum .inner ul li h4{
	font-size: 4.3vw;
	margin-bottom:3%;
	
}

.sect-curriculum .inner ul li p{
	font-size: 4.3vw;
	line-height: 180%;
	margin-bottom: 10px;
	
}

.sect-curriculum .inner ul li h3{
	font-size: 5.3vw;
	padding: 0px 0 0 10%;
	margin-bottom: 15px;
	background-image: url(../img/cl_mrak.png);
	background-repeat: no-repeat;
	background-size: 7.5%;
	
}

.sect-curriculum .inner ul li dt{
    float: none;
    
    width: 96%;
	margin: 0 2%;
	padding:0px 10px 0 0;
}

.sect-curriculum .inner ul li dl{
  margin-bottom: 0%;
}

.sect-curriculum .inner ul li dd{
	width: 96%;
	margin: 0 2%;
	
	
}



.sect-curriculum .inner ul li p{
	font-size: 4.3vw;
	
}



.sect-curriculum .inner ul li .btn{
	width: 88%;
	padding-top: 20px;
	margin: 0% 6% 12%;
}


/*=================================

　　スケジュール

=================================*/

.schedule{
	width: 96%;
	margin: 0 2% 9%;
	text-align:center;
}

.schedule p{
	font-size: 4vw;
	margin-bottom: 3%;
}

.schedule ul{
	width: 96%;
	margin: 0 2%;
}

.schedule ul li{
	
	margin-bottom: 5%;
}


/*=================================

　　受講の流れ

=================================*/

.sect-nagare .inner{
	width: 96%;
	margin: 0 2% 9%;
}


.sect-nagare .inner ul li{
	border: 1px solid #666;
	margin-bottom: 10px;
	
}

.sect-nagare .inner ul li .box{
	padding: 3%;
	font-size: 4.2vw;
}

.sect-nagare .inner ul li h3{
	background-color: #09C;
	color: #fff;
	
	padding: 7px 0 7px 20px;
	
	font-size: 5.6vw;
}

.sect-nagare .inner ul li h4{
	
	font-size: 4.6vw;
	margin-bottom: 2%;
}

.sect-nagare .inner .mrak{
	width: 24%;
	margin: 0 37% 3%;
}



/*=================================

　　料金表

=================================*/

.price{
	width: 96%;
	margin: 0 2% 9%;
}

.price .inner{
	width: 100%;
	margin: 0 auto 0px;
	border: 2px solid #666;
	border-radius: 10px; 
	padding: 2% 2%;
}

.price table{
  width: 100%;
  font-size: 4.2vw;
}

.price table th{
  position: relative;
  text-align: center;
  width: 98%;
  display: block;
  background-color: #09C;
  color: #fff;
  padding: 10px 0;
}

.price table th:after{
  display: none;
  
  
  
}

.price table td{
  text-align: left;
  width: 98%;
  border: none;
  display: block;
  text-align: center;
}

.price p{
  font-size: 4vw;
  margin-bottom: 10px;
}


.txt-m{
	
	margin-top: -7%;
}



/*=================================

　　料金表

=================================*/





.qa-btn{
	width: 90%;
	margin: 0 5% 9%;
	
}

.qa-btn{
	width: 90%;
	margin: 0 5% 9%;
}



/*****************************************************

       companyページ	

*****************************************************/


.company{
	width: 94%;
	margin: 5% 3% 10%;
}


.company table{
  width: 100%;
  border-collapse: collapse;
  font-size: 4.3vw;
}

.company table tr{
  border-bottom: solid 2px white;
}

.company table tr:last-child{
  border-bottom: none;
}

.company table th{
  position: relative;
  text-align: left;
  width: 26%;
  background-color: #52c2d0;
  color: white;
  text-align: center;
  padding: 0% 2%;
}

.company table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #52c2d0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.company table td{
  text-align: left;
  width: 50%;
  text-align: left;
  background-color: #eee;
  padding: 10px 20px;
}



/*****************************************************

       companyページ	

*****************************************************/


.asct{
	width: 94%;
	margin: 5% 3% 10%;
}


.asct table{
  width: 100%;
  border-collapse: collapse;
  font-size: 4.2vw;
}

.asct table tr{
  border-bottom: solid 2px white;
}

.asct table tr:last-child{
  border-bottom: none;
}

.asct table th{
  position: relative;
  text-align: left;
  width: 26%;
  background-color: #52c2d0;
  color: white;
  text-align: center;
  padding: 0% 2%;
}

.asct table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #52c2d0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.asct table td{
  text-align: left;
  width: 50%;
  text-align: left;
  background-color: #eee;
  padding: 10px 20px;
}





/*****************************************************

       QAページ	

*****************************************************/

.sect-qa{
	margin-bottom: 5%;
}

.sect-qa{
	width: 94%;
	margin: 0 3%;
	margin-bottom: 7%;
}

.sect-qa h3{
	font-size: 5vw;
	color: #09C;
	margin-bottom: 2%;
}

.sect-qa .section{
	margin-bottom: 3%;
}

/*****************************************************

       ppページ	

*****************************************************/

.pp{
	width: 92%;
	margin: 0 4% 100px;
}

.pp p{
	font-size: 4vw;
	margin-top: 5%;
}




}
/************************

       ▲▲▲  SP　　▲▲▲

************************/