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

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* RESET---------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

@media only screen and (max-width: 768px) {
    img { max-width: 100%; }
}

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

 * 設定をしなおす

---------------------------------------------- */
body {
  font-size: 16px;
  line-height: 2em;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500;
  color: #535761;
  -webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

@media only screen and ( max-width : 768px ) {
  body {font-size: 14px;}
}

@media screen and (min-width: 768px){
.br-sp {display: none; }
}

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

 * アンカータグの設定

---------------------------------------------- */
a {
  outline:none;
  /*color: #333;*/
}

a:hover {
  text-decoration: none;
}


a,a:hover,a:hover img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}

a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}

/*--20260122----*/


a:link {
  color: #3db054; /* 未訪問 */
}

a:visited {
  color: #427413; /* 訪問済み */
}

a:hover {
  color: #efa013; /* マウスを乗せたとき */
}

a:active {
  color: #cc0000; /* クリック中 */
}


/*--------------------------
アニメーション
---------------------------*/

.poyooon {
  animation: poyooon 0.9s linear 0s 1;
}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.9, 1.2) translate(0%, -100%); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
  85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.korokoro {
  animation: korokoro 2.5s linear 0s 1;
}

@keyframes korokoro {
  0%   { transform: translate(0%, 0%); }
  5%   { transform: translate(10%, 0%) rotate(10deg); }
  25%  { transform: translate(20%, 0%) rotate(20deg); }
  30%  { transform: translate(-10%, 0%) rotate(-10deg); }
  35%  { transform: translate(-15%, 0%) rotate(-15deg); }
  45%  { transform: translate(10%, 0%) rotate(10deg); }
  50%  { transform: translate(15%, 0%) rotate(15deg); }
  60%  { transform: translate(-5%, 0%) rotate(-5deg); }
  65%  { transform: translate(-7%, 0%) rotate(-7deg); }
  75%  { transform: translate(0%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.purupuru {
  animation: purupuru 0.8s linear 0s 1;
}

@keyframes purupuru {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.puyon {
  animation: puyon 1.0s linear 0s 1;
}
@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.pururun {
    animation: pururun 1.2s linear 0.2s 1;
}

@keyframes pururun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.0, 1.0) translate(10%, 0%) skew(-10deg, 0deg); }
  60%  { transform: scale(1.0, 1.0) translate(20%, 0%) skew(-20deg, 0deg); }
  70%  { transform: scale(1.0, 1.0) translate(-15%, 0%) skew(15deg, 0deg); }
  80%  { transform: scale(1.0, 1.0) translate(15%, 0%) skew(-15deg, 0deg); }
  80%  { transform: scale(1.0, 1.0) translate(5%, 0%) skew(-5deg, 0deg); }
  90%  { transform: scale(1.0, 1.0) translate(-5%, 0%) skew(5deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.purun {
  animation: purun 0.8s linear 0s 1;
}

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/* ---------------------------------------------------------------------------------------

　   HEADER

--------------------------------------------------------------------------------------- */
#header{
z-index: 99;
  width: 100%;
  position: relativere;
  top: 0;
  left: 0;
  background: #fff;	
	/*max-width: 1280px;
	text-align: center;*/
}

#header h1{
	max-width: 1280px;
	margin: 0 2em;
	box-sizing: border-box;
	padding: 0 5%;
	overflow: hidden;
	text-align: left;
	/*padding-top: 60px;*/
}

.h_logo{
	margin: 1em;
	width: 80vw/*60vw*/;
}

#mainnav a{
	color: #000;
}

#mainImage{
  overflow: hidden;
  width: 100%;
}

#mainImage .top{
	position: relative;
}

#mainImage img{
	margin: auto;
}


#mainImage .over{
	max-width: 1000px;
	width: 60%;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

MENU

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

nav{
 width: 100%;
 height: 6em;
 position: relative;
 background: #fff;
}
 
.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: /*70px;*/ 6em;
 padding: 0 1em;
}
 
/*ナビゲーション部分*/
 
.menu ul li a {
display:block;
  font-weight:bold;
padding: 2em;
border-bottom: 1px dotted #CCC;
  color:#0097be;
  text-decoration:none;
}
 
 
.menu ul li a:hover
{background-color:rgba(0,0,0,0.5);
color:darkturquoise;}
 
 
.menu{
 
  text-align:center;
  background-color: rgba(255,255,255,0.5);
  transition: 0.5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(100%);/*画面より100%外へ押し出し非表示にさせる*/
 
/*  transform: translateX(-100%);/*右から出す場合は、マイナス100%としてください*/
 
}
 
/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*メニューを元の位置へ戻す*/
 
}
 
/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
  right:15px;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 50px;
    border-bottom: solid 4px #333;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
 
}
 /*各ボーダー少しずつずらす*/
.Toggle span:nth-child(1) {
    top:5px;
}
 .Toggle span:nth-child(2) {
    top: 18px;
}
 .Toggle span:nth-child(3) {
    top: 32px;
}
.Toggle.active span:nth-child(1) {
    top: 18px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
 
/*----------------------------------ここからPCモニターの記述-----------*/
@media screen and (min-width: 800px) {
 
nav{
 display: flex;
}
 
.Toggle{
 display: none;
}
.menu{
width: 100%;
font-size:1em;
background-color: transparent;
margin:0 10px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu ul{
 height: /*70px;*/ 6em;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}
.menu ul li a{
 padding: 0 1em;
 border-bottom: none;
}
.menu ul li a:hover{
background-color:transparent;
}
}


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

MENU-hamburger

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

.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #20b2aa;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}

/*----------メニュー装飾---------------------*/
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #B0F5F1;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #20b2aa;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#20b2aa;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #20b2aa;
    border-right: solid 2px #20b2aa;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

/*----------------------------------ここからPCモニターの記述-----------*/
@media screen and (min-width: 800px) {
 
/*ロゴの大きさを調整*/
#logo img{max-width:250px;
	text-align: left;
	margin-left: 2em;
	}
	
.menu-content{
width: 100%;
font-size:1em;
background-color: transparent;
margin:0 10px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu-content ul{
 height: /*70px;*/ 6em;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}
.menu-content ul li a{
 padding: 0 1em;
 border-bottom: none;
}
.menu-content ul li a:hover{
background-color:transparent;
}
}

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

contents

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

img{
	max-width: 100%;
	margin: auto;
	border: none;
}

section{
	clear:both;
	padding-top: 6em;
	text-align: center;
	max-width: 1000px;
	margin: auto;
}

section .left{
	clear:both;
	padding-top: 6em;
	text-align: left;
	max-width: 1000px;
	margin: auto;
} 

/*section h2{
	margin: 0 auto 40px;
	font-size: 22px;
	font-weight:normal;
	text-align: center;
}

section h2 span {
	background: #fff;
	padding: 0 80px;
}
*/

/*section h3{
	font-size: 1.2em;
	font-weight: 700;
	color: #20b2aa;
	margin-top: 1em;
	margin-bottom: 0.5em;
}
*/

.bull{   /*---黒丸付説明文---------*/
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.5em;
	margin-bottom: -0.5em;
}

.bull:before {   
	content: "●";
	display: inline-block;
	color: #20b2aa;
	padding-left: 1em;
	text-indent: -1em;
}


.inner{
	width:100%;
	margin: 0 auto;
	padding-bottom: 50px;
}

.innerText{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 2em;
	padding-top: 2em;
}

.innerText-intro{
	width: 85%;
	/*width: 80%;*/
	margin: 0 auto;
	padding-bottom: 2em;
	padding-top: 2em;
	font-size: 1.2em;
	line-height: 2.5em;
	color: #5c2400;
}

.innerText-intro h1{
	text-align: center;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size: 2em;
	color:#F16638;
}


.innerText-body{
	width: 85%;
	/*width: 80%;*/
	margin: 0 auto;
	padding-bottom: 2em;
	font-size: 1.1em;
	line-height: 1.7em;
	color:#272727;
}


.innerText-map{
	width: 85%;
	margin: 0 auto;
	padding-bottom: 2em;
}

.innerText-body p{
	text-align: left;
	padding-bottom: 1em;
}

.innerText-body p .no-bottom{
	text-align: left;
}

.innerText-body p .green{
	font-weight: 700;
	color: #008f4b;
}

.question{   /*---よくある質問---------*/
	text-align: left;
	padding-left: 8em;
	text-indent: -3em;
	padding-bottom: 0.5em;
}
.question:before{
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background: url("../img/q-square.png") no-repeat;
	background-size: contain;
	padding-right: 1em;
	margin-bottom: -0.5em;
}

.answer{
	text-align: left;
	padding-left: 8em;
	text-indent: -3em;
	padding-bottom: 3em;
}
.answer:before{
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background: url("../img/a-square.png") no-repeat;
	background-size: contain;
	padding-right: 1em;
	margin-bottom: -0.5em;
}


.innerText-body p .answer{
	padding-left: 5em;
	padding-bottom: 3em;
}

h3{
	font-size: 1.2em;
	font-weight: 700;
	color: #20b2aa;
	margin-top: 1em;
	margin-bottom: 0.5em;
	text-align: left;
}

	.blue {
		color: #056BD7;
	}

h4{
	font-size: 1em;
	font-weight: 700;
	color: #20b2aa;
	margin-top: 0.5em;
	text-align: left;
}

.i-orange{color: #F45604}

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

topページ　2col

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

.flex-item{
  display: flex;
  justify-content: space-between;
	border: 1px solid #36b0c5;
	margin-top: 3em;
}

/*---- 最後の要素以外に余白を追加-----*/
.flex-item:not(:last-child){
  margin-bottom: 50px;
}

/*---- 反対バージョンを作る場合はoddをevenに変更する----*/
.flex-item:nth-child(odd){
  flex-direction: row-reverse;
}

/*---- 画像----*/
.flex-item__img {
  width: 40%;
  /*padding-right: 1em;*/
background: #C9EAF0;
}

.flex-item__img img{
  	width:  100%;
	padding: 50px 0;
  /*height: 200px;
  object-fit: cover;*/
}

/*----テキスト----*/
.flex-item__txt{
  width: 58%;
	text-align: left;
}

.flex-item__txt h2 {
  font-size: 1.2em;
  padding: 1em 0;
	color: #36b0c5;
	text-align: center;
}

.flex-item__txt p{
  line-height: 1.5;
	padding: 1em;
	color: #0F121E;
}



/*----レスポンシブ----*/
@media screen and (max-width: 767px) {
  .flex-item{
    flex-direction: column;
    align-items: center;
  }

  .flex-item:nth-child(odd) {
    flex-direction: column;
  }

  .flex-item__img {
    width: 100%;
    /*height: 250px;
    padding-bottom: 30px;*/
  }

  .flex-item__txt {
    width: 100%;
  }
}

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

会社概要　2col

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

.flex_2col-box{
	display: flex;
	border-bottom: 1px dotted #0097be;
}

.flex_2col-item{
	padding: 1em;
}

.flex_2col-item:nth-child(1){
	flex-basis: 25%;
	background: #F3F8F9;
}

.flex_2col-item:nth-child(2){
	background: #fff;
}

/*---レッスン講座内容説明------------------*/

.flex_2col-box-lesson{	
	display: flex;
	border-bottom: 1px dotted #FDA706;
}

.flex_2col-item-lesson{
	padding: 1em;
	font-size: 0.85em;
}

.flex_2col-item-lesson:nth-child(1){
	flex-basis: 30%;
	background: #FDF6E9;
}

.flex_2col-item-lesson:nth-child(2){
	flex-basis: 70%;
	background: #fff;
}

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

理念
------------------------------------------------*/

.flex_5col-box{
	display: flex;
	align-items: stretch;
}

.flex_5col-item{
	padding: 1em;
	color: #fff;
	margin: 1em;
	width: 15%;
}

.flex_5col-item:nth-child(1){
	background: #00ba9b;
}

.flex_5col-item:nth-child(2){
	background: #ba2700;
}

.flex_5col-item:nth-child(3){
	background: #b7ae00;
}

.flex_5col-item:nth-child(4){
	background: #f4ed00;
}

.flex_5col-item:nth-child(5){
	background: #00204f;
}


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

表組

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

.box{		/*-----セミナー案内---------------------*/
	display: table;
	width: 100%;
	margin-top: 1em;
}

.box1{
	display: table-cell;
	text-align: left;
}

.box2, .box3{
	float: left;

}

.box1-img{
	vertical-align: top;
	width: 10%;
}

.text {
	vertical-align: top;
	width: 90%;
	padding-left: 1.5em;
}

.text p .green{
	font-weight: 700;
	color: #008f4b;
	margin-bottom: 0;
}

.text p .tabletext{
	font-weight: normal;
	color: #1F1F1F;
}

#table{
	display: block;
}



/*----------------------------------------------------
  
 google map

----------------------------------------------------*/
.google-map{
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}

.google-map iframe{
	position:absolute;
	left:0;
	height: 100%;
	width: 100%;
	vertical-align: bottom;
}
@media screen and (max-width: 480px) {
    .google-map {
		position: relative;
		padding-bottom: 75%; /* これが縦横比*/
		height: 0;
		overflow: hidden;
}
	.google-map iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
}
}

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

お知らせ記事

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

#news{
	text-align: left;
}

#news ul{
	background: #f4ffe8;
	display: block;
}

#news ul li{
	margin: 0.5em 1em;
	border-bottom: dotted 2px #7EFCC3;
}

#news .ul .li a{
	text-decoration: none;
}

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

　TOPへ戻るボタン

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


#page-top {
    position: fixed;
    bottom: 60px;
    right: 30px;
    font-size: 77%;
	opacity: 0.8;
	z-index: 999;
	
}
#page-top a {
	position: relative;
    background: #74bb30;
    text-decoration: none;
    color: #fff;
	padding: 10px ;
    text-align: center;
    display: block;
	height: 30px;
	width: 30px;
	border-radius: 50%;
}

#page-top a::before {
	font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  top: 5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page-top a:hover {
    text-decoration: none;
    background: #87C6F4;
}


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

button

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

.btn1 { /*----flat-border blue---*/
  display: inline-block;
  padding: 0.3em 0.5em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.btn1:hover {
  background: #67c5ff;
  color: white;
}

.btn2 { /*----flat-border green---*/
  display: inline-block;
  padding: 0.3em 0.5em;
  text-decoration: none;
  color: #1FB848;
  border: solid 2px #1FB848;
  border-radius: 3px;
  transition: .4s;
}

.btn2:hover {
  background: #1FB848;
  color: white;
}

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

footer

------------------------------------------------*/
#footer {
	width: 100%;
	text-align: center;
}

.boxF {
  position: relative;
}

.boxF p {
  position: absolute;
  top: 70%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  text-align: center;
	color: #E1F3FC;
}

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

レスポンシブ

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


@media only screen and (max-width: 768px){
	#header h1{
		max-width: 100;
	}
	
	.h_logo{  /*--------0303---SPロゴ位置大きさ----*/
	/*margin: 0.5em;*/
		margin-top: 2vw;
		align-items: center;
	width: 70vw;
}
	
	section{
	clear:both;
	padding-top: 3em;
	text-align: center;
	max-width: 768px;
	margin: auto;
}
	
	.inner{
	width:100%;
	margin: 0 auto;
	padding-bottom: 1em;
}

	.innerText{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 1em;
	padding-top: 1em;
}

	.innerText-intro{
	width: 85%;
	margin: 0 auto;
	padding-bottom: 1em;
	padding-top: 1em;
	line-height: 2em;
	color: #5c2400;
}

	.innerText-body{
	width: 85%;
	margin: 0 auto;
	padding-bottom: 2em;
	line-height: 1.7em;
	color:#272727;
}

.innerText-map{
	width: 85%;
	margin: 0 auto;
	padding-bottom: 2em;
}

.innerText-body p{
	text-align: left;
	padding-bottom: 1em;
}

.innerText-body p .no-bottom{
	text-align: left;
}

.innerText-body p .green{
	font-weight: 700;
	color: #008f4b;
}

.flex_5col-box{
	flex-wrap: wrap;
	}
	
.flex_5col-item{
		width: 300px;
}

.flex_2col-box-lesson{
		flex-wrap:wrap;
		border-top: 1px solid #FDA706;
		border-left: 1px solid #FDA706;
		border-right: 1px solid #FDA706;
		border-bottom: none;
	}
	
.flex_2col-item-lesson:nth-child(1){
	flex-basis:100%;
	}
	
.flex_2col-item-lesson:nth-child(2){
	flex-basis:100%;
	}

h3{
	font-size: 1.2em;
	font-weight: 700;
	color: #20b2aa;
	margin-top: 0.5em;
	text-align: left;
}

	.blue {
		color: #056BD7;
	}

h4{
	font-size: 1em;
	font-weight: 700;
	color: #20b2aa;
	margin-top: 0.5em;
	text-align: left;
}

.i-orange{color: #F45604}