@charset "utf-8";

.wrapper {
/*  grid-template-rows: 1.4fr 3.4fr 1.2fr 3.5fr;*/
/*grid-template-rows: 14% 50% 36%;*/
	grid-template-rows: 19vh 40vh 41vh;
}

/* ヘッダー
------------------------------------------------------------*/

.up-container {
  width: 1180px;
  margin: 0px auto 0px;
  display: table;
}
.okeiko {
  width: 80%;
  display: table-cell;
 vertical-align: top;
}
.okeiko h2 {
  margin: 0px 0 15px;
}
.okeiko p{
	margin-bottom: 15px;
}
.okeiko p.big{
	font-size: 120%;
}
.okeiko-image {
  width: 20%;
  display: table-cell;
  padding: 0px;
	vertical-align: top;
	text-align: right;
}

.contents-box div {
 padding: 0px;
}
.contents-box img {
  width: 100%;
  max-width: 203px;
  height: auto;
  vertical-align: middle;
  transition: transform 0.3s;
}

.contents-box img:hover {
  transform: scale(1.5);
  transition: 0.3s;
}
.middle-container{
  width: 100%;
  display: table;
  margin: 0 auto;
}
.middle-container .price-box{
display: table-cell;
	width: 45%;
}
.middle-container .price-box:last-child{
display: table-cell;
	width: 55%;
	padding-left:20px;
}
ul.price-flex{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  margin: 0 auto;
  justify-content: flex-start;
  align-items: center;
}
ul.price-flex li{
	  width: auto;
	font-size:110%;
}
ul.price-flex li.neri img{
	  max-width: 121px;
height:auto;
}
ul.price-flex li.lesson img{
	  max-width: 200px;
height:auto;
}
span.small{
	font-size:90%;
}
li.nerima{
	padding-left:15px;
	line-height: 120%;
}
li.online{
	padding-left:15px;
}


/* 企業団体
------------------------------------------------------------*/
.bottom-container {
  display: table;
	width: 1180px;
  margin: 0 auto;
}
.thumbleft {
  display: table-cell;
  width: 60%;
  vertical-align: top;
}
.thumbright {
  display: table-cell;
  width: 40%;
  vertical-align: top;
	padding-left:10px;
	padding-bottom: 10px;
}

.thumbleft p {
  transform: rotate(0.03deg);
}
ul.thumb {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  margin: 0 auto;
  justify-content: flex-end;
	align-items: center;
}
ul.thumb li {
  width: 100%;
	margin: 20px 0px 0px 15px; 
	text-align: left;
	align-self: center;
}
ul.thumb li.sumaho {
display: none;
}
ul.thumb li img{
  width: 100%;
  max-width: 220px;
  height: auto;
}


@media (max-width: 1350px) {
.wrapper {
/*grid-template-rows: 14% 56% 30%;*/
	grid-template-rows: 15vh 41vh 44vh;
}

.up-container {
  display: table;
	width: 100%;
  margin: 0 auto;
}
.okeiko {
  width: 80%;
  display: table-cell;
  padding: 0;	
  vertical-align: top;
}
.okeiko h2 {
  margin: 0px 0 5px;
}	
 .okeiko h2 img{
  width: 100%;
	 max-width:591px;
	 height:auto;
}
.okeiko p{
	margin-bottom: 10px;
	font-size: 90%;
}
.okeiko p.big{
	font-size: 120%;
	margin-bottom: 8px;
}	
.okeiko p.big span.small{
	font-size: 80%;
}	
.okeiko-image {
  width: 20%;
  display: table-cell;
  padding: 0px 0 0 5px;
	vertical-align: top;
	text-align: right;
}
.okeiko-image img{
	  width: 100%;
	 max-width:175px;
	 height:auto;	
	}	
/* middle-container
------------------------------------------------------------*/
.middle-container{
  width: 100%;
  display: table;
  margin: 0 auto;
}
.middle-container .price-box{
display: table-cell;
	width: 44%;
}
.middle-container .price-box:last-child{
display: table-cell;
	width: 56%;
	padding-left:20px;
}
ul.price-flex{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  margin: 0 auto;
  justify-content: flex-start;
  align-items: center;
	flex-direction: column;
}
ul.price-flex li{
	  width: 100%;
	font-size:110%;
}
span.small{
	font-size:80%;
}
li.nerima{
	padding-left:0px;
	line-height: 120%;
}
li.online{
	padding-left:0px;
}
li.neri img{
	  width: 100%;
	 max-width:121px;
	 height:auto;	
	}
li.lesson img{
	  width: 100%;
	 max-width:200px;
	 height:auto;	
	}


/* bottom-container
------------------------------------------------------------*/
.bottom-container {
  display: table;
	width: 100%;
  margin: 0 auto;
}
.thumbleft {
  display: table-cell;
  width: 75%;
  vertical-align: top;
}
.thumbleft h2 img{
	  width: 100%;
	 max-width:371px;
	 height:auto;
}
.thumbleft p {
  font-size: 90%;

}	
.thumbright {
  display: table-cell;
  width: 25%;
	padding-left:0px;
	padding-top: 55px;
	  vertical-align: top;
}

ul.thumb {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  margin: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
}
ul.thumb li {
  width: 100%;
	margin: 0 0px 0px 10px; 
	text-align: left;
}

}
@media screen and (max-width: 960px), screen and (max-height: 620px) { 
.wrapper {
	grid-template-rows: none;
	min-width:2560px;
}
.up-container {
  display: table;
	width: 45%;
  margin: 0 auto;
}
.okeiko {
  width: 60%;
  display: table-cell;
  padding: 0 20px 0 40px;	
  vertical-align: middle;
}
.okeiko-image {
  width: 40%;
  display: table-cell;
  padding: 0px 30px 0 5px;
	vertical-align: middle;
	text-align: center;
}
.okeiko-image img{
	  width: 100%;
	 max-width:203px;
	 height:auto;	
	}
.okeiko p{
	width:90vw;
		max-width:350px;
	margin-bottom: 10px;
	font-size: 90%;
}
.okeiko p.big{
	font-size: 120%;
	margin-bottom: 8px;
	width:100%;
	max-width:100%;
}	
/* middle-container
------------------------------------------------------------*/
ul.price-flex li{
	  width: 100%;
	font-size:100%;
}
.middle-container .price-box{
display: table-cell;
	width: 50%;
}
.middle-container .price-box:last-child{
display: table-cell;
	width: 50%;
	padding-left:10px;
}	
/* bottom-container
------------------------------------------------------------*/	
.bottom-container {
  display: table;
	width: 55%;
  margin: 0 auto;
}
.thumbleft {
  display: table-cell;
  width: 30%;
  vertical-align: top;
}
.thumbright {
  display: table-cell;
  width: 70%;
  vertical-align: middle;
	padding:0 0 0 40px;
}

.thumbleft p {
	width:85vw;
	max-width:350px;
	margin: 0 auto;
  transform: rotate(0.03deg);
}
ul.thumb {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  margin: 0 auto;
  justify-content: flex-end;
  align-items: center;
	flex-direction: row;
}
	
ul.thumb li {
  width: 33%;
	margin: 0 0px 0 15px; 
	text-align: left;
}
ul.thumb li.sumaho {
display: block;
}
ul.thumb li img{
  width: 100%;
  max-width: 262px;
  height: auto;
}
}
@media screen and (max-height: 620px) { 
.okeiko {
  width: 60%;
  display: table-cell;
  padding: 30px 20px 0 40px;	
  vertical-align: middle;
}
}
/*@media (max-width: 650px) {


.wrapper {
  width: 1080px;
  display: grid;
grid-template-rows: 8% 37% 18% 37%;
  height: 89vh;
	padding-left: 80px;
	padding-right:30px;
	padding-top:2%;
}
.thumbleft {
  display: table-cell;
  width: 60%;
  vertical-align: top;
}
.thumbright {
  display: table-cell;
  width: 40%;
  vertical-align: middle;
	padding-left:10px;
}
ul.thumb {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  margin: 0 auto;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

ul.thumb li {
  width: 100%;
	margin: 0 0px 0 15px; 
	text-align: left;
}
ul.thumb li.sumaho {
display: block;
}

}
*/