@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

body,
#wrap {
	overflow-x:hidden;
}


#container h2 ul {
	text-align:center;
}

#container h2 ul li {
	display:inline-block;
	margin-right:5px;
}

#container h2 ul li:last-child {
	margin-right:0;
}

@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-30px);}
}


@keyframes swing {
    0% { transform: rotate(0deg) }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/*-------------------------------------------------------------------
	life
-------------------------------------------------------------------*/

#life {
	padding:0 0 90px;
	background:url(../image/common/cont_wave.png) top repeat-x;
	-webkit-animation: bgroop 20s linear infinite;
  animation: bgroop 20s linear infinite;
}

.relabox {
	position:relative;
}


#life .box {
	overflow:hidden;
	zoom:1;
	margin:0 0 70px;
}

#life .box .photo {
	float:left;
}

#life .box .text {
	margin-left:350px;
	padding-top:125px;
	font-size:1.2em;
	line-height:1.8;
}

#life .relabox .icon01 {
	position:absolute;
	left:-150px;
	top:50%;
	transform:translateY(-50%);
}

#life .relabox .icon02 {
	position:absolute;
	right:-150px;
	top:50%;
	transform:translateY(-50%);
}

#life .box02 {
	overflow:hidden;
	zoom:1;
	width:1000px;
	margin:0 auto;
}

#life .box02 .left {
	width:665px;
	float:left;
}

#life .box02 .left table {
	width:100%;
}

#life .box02 .left table th,
#life .box02 .left table td {
	border:1px solid #0083c7;
	padding:13px 0;
	vertical-align:top;
}

#life .box02 .left table th {
	text-align:center;
	font-size:1.3em;
	font-weight:400;
	text-align:center;
	background:#eef9ff;
	color:#0083c7;
}

#life .box02 .left table th.blue {
	background:#0083c7;
	color:#FFF;
}

#life .box02 .left table th.blue.fst {
	border-right:1px solid #fff;
	width:200px;
}

#life .box02 .left table td {
	padding:13px 15px;
	font-size:1.2em;
}

#life .box02 .right {
	width:305px;
	float:right;
}

#life .box02 .right li {
	margin:0 0 25px;
}

#life .box02 .right li:last-child {
	margin:0;
}

#life .relabox .icon03 {
	position:absolute;
	left:-150px;
	top:20%;
}

#life .relabox .icon04 {
	position:absolute;
	right:-150px;
	top:20%;
}

/*-------------------------------------------------------------------
	curriculum
-------------------------------------------------------------------*/

#curriculum {
	padding:90px 0 90px;
	background:url(../image/common/cont_wave.png) top repeat-x;
	-webkit-animation: bgroop 20s linear infinite;
  animation: bgroop 20s linear infinite;
	position:relative;
}

#curriculum .box {
	overflow:hidden;
	zoom:1;
}

#curriculum .box dl {
	width:340px;
	float:left;
	margin-right:40px;
}

#curriculum .box dl:last-child {
	margin:0;
}

#curriculum .box dl dt {
	text-align:center;
	margin:0 0 30px;
}

#curriculum .box dl dd.img {
	margin-top:20px;
}

#curriculum .box2 {
	overflow:hidden;
	zoom:1;
}

#curriculum .box2 dl {
	width: 340px;
	margin: 0 auto 30px;
}

#curriculum .box2 dl dt {
	text-align:center;
	margin:0 0 30px;
}

#curriculum .box2 dl dd.img {
	margin-top:20px;
}


#curriculum .human01 {
	position:absolute;
	top:60px;
	left:5%;
}

#curriculum .human02 {
	position:absolute;
	top:60px;
	right:5%;
}


/*-------------------------------------------------------------------
	school
-------------------------------------------------------------------*/

#school {
	padding:90px 0 0;
	position:relative;
}

#container #school h2 {
	margin:0 0 30px;
}

#school h3 {
	background:url(../image/life/life_line.png) bottom center no-repeat;
	line-height:1.0;
	text-align:center;
	padding:0 0 30px;
	margin:0 0 40px;
	font-size:1.3em;
	font-weight:500;
}

#school .box {
	text-align:center;
}

#school .box dl {
	display:inline-block;
	padding:20px 0;
	width:230px;
	border:2px solid #33ccff;
	text-align:center;
	margin-right:30px;
	border-radius:10px;
	vertical-align:top;
}

#school .box dl:last-child {
	margin-right:0;
}

#school .box dl dt {
	margin:0 0 10px;
}

#school .box dl dt span {
	display:inline-block;
	line-height:1.0;
	text-align:center;
	border-bottom:2px solid #33ccff;
	width:155px;
	padding:0 0 15px;
	font-size:1.2em;
	font-weight:500;
}

#school .box dl dd p {
	width:230px;
	height:110px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}


#school .human03 {
	position:absolute;
	top:60px;
	left:-150px;
}

#school .human04 {
	position:absolute;
	top:60px;
	right:-150px;
	animation: swing linear 1.5s infinite;
}


/*===============================================
  画面の横幅が1450px以下に適用
===============================================*/
@media screen and (max-width: 1450px) {
	
	#life .inwrap,
	#life .box02 {
		width:80%;
	}
	
	#life .box .photo {
		width:28%;
	}
	
	#life .box img {
		max-width:100%;
	}

	#life .box .text {
		margin-left:30%;
		padding-top:100px;
		font-size:1.1em;
	}
	
	
	#life .relabox .icon01,
	#life .relabox .icon03 {
		left:-10%;
		z-index:-1;
	}
	
	#life .relabox .icon02,
	#life .relabox .icon04 {
		right:-10%;
		text-align:right;
		z-index:-1;
	}
	
	/*
	#life .relabox .icon01 img,
	#life .relabox .icon02 img,
	#life .relabox .icon03 img,
	#life .relabox .icon04 img {
		max-width:80%;
	}
	*/
	
	#life .box02 .left {
		width:66%;
	}

	#life .box02 .right {
		width:30%;
	}
	
	#life .box02 .right img {
		max-width:100%;
	}
	
	#curriculum .human01 {
		top:30px;
		left:0;
	}
	
	#curriculum .human02 {
		top:30px;
		right:0;
		text-align:right;
	}
	
	#school .human03 {
		top:30px;
		left:-5%;
	}

	#school .human04 {
		top:30px;
		right:-5%;
		text-align:right;
	}
	
	
	#curriculum .human01 img,
	#curriculum .human02 img,
	#school .human03 img,
	#school .human04 img {
		max-width:80%;
	}
	
	
}

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px) {
	
	
	#life .inwrap,
	#life .box02 {
		width:90%;
	}
	
	#life .relabox .icon01,
	#life .relabox .icon03 {
		left:-5%;
	}
	
	#life .relabox .icon02,
	#life .relabox .icon04 {
		right:-5%;
	}
	
	#life .relabox .icon01 img,
	#life .relabox .icon02 img,
	#life .relabox .icon03 img,
	#life .relabox .icon04 img {
		max-width:80%;
	}
	
	
	#life .box02 .left {
		width:66%;
	}

	#life .box02 .right {
		width:30%;
	}
	
	#life .box02 .right img {
		max-width:100%;
	}
	
	#curriculum .human01,
	#curriculum .human02,
	#school .human03,
	#school .human04 {
		display:none;
	}
	
	/* curriculum */

	#curriculum .box dl {
		width:32%;
		float:left;
		margin-right:2%;
	}

	#curriculum .box dl:last-child {
		margin:0;
	}

	/* school */


	#school .box dl {
		display:inline-block;
		padding:20px 0;
		width:31%;
		border:2px solid #33ccff;
		text-align:center;
		margin-right:1%;
		border-radius:10px;
		vertical-align:top;
	}

	#school .box dl:last-child {
		margin-right:0;
	}

	#school .box dl dd p {
		width:auto;
		height:auto;
		display:block;
	}



/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	

}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	
	#container h2 ul li img {
		max-width:40px;
	}
	
	#life .inwrap {
		width:92%;
	}
	
	#life .box02 {
		width:100%;
	}
	
	/* life */

	#life {
		padding:0 0 70px;
	}


	#life .box {
		margin:0 0 40px;
	}

	#life .box .photo {
		float:none;
		width:auto;
		text-align:center;
	}
	
	#life .box .photo img {
		max-width:45%;
	}

	#life .box .text {
		margin-left:0;
		padding-top:30px;
		font-size:1.1em;
	}

	#life .relabox .icon01,
	#life .relabox .icon02,
	#life .relabox .icon03,
	#life .relabox .icon04 {
		display:none;
	}

	#life .box02 .left {
		width:100%;
		float:none;
		margin:0 0 20px;
	}
	
	#life .box02 .left table {
		width:100%;
	}
	
	#life .box02 .left table th,
	#life .box02 .left table td {
		padding:3% 0;
	}

	#life .box02 .left table th {
		font-size:1.1em;
	}

	#life .box02 .left table th.blue.fst {
		width:35%;
	}

	#life .box02 .left table td {
		padding:3% 5%;
		font-size:1.0em;
	}

	#life .box02 .right {
		width:auto;
		float:none;
		text-align:center;
	}

	#life .box02 .right li {
		display:inline-block;
		max-width:45%;
		margin:0;
	}
	
	#life .box02 .right li:nth-child(1) {
		margin-right:3%;
	}

	#life .box02 .right li:nth-child(3) {
		margin:3% 0 0;
	}

	/* curriculum */

	#curriculum {
		padding:50px 0 70px;
	}

	#curriculum .box {
		overflow:hidden;
		zoom:1;
	}

	#curriculum .box dl {
		width:100%;
		float:none;
		margin:0 0 40px;
		text-align:center;
	}

	#curriculum .box dl:last-child {
		margin:0;
	}

	#curriculum .box dl dt {
		margin:0 0 20px;
	}
	
	#curriculum .box dl dt img {
		max-width:50%;
	}
	
	#curriculum .box dl dd {
		text-align:left;
	}
	
	#curriculum .box dl dd.img {
		text-align:center;
	}

	#curriculum .box2 dl {
	width: 100%;
	margin: 0 auto 30px;
}


	/* school */

	#school {
		padding:50px 0 0;
	}

	#container #school h2 {
		margin:0 0 30px;
	}

	#container #school h2 ul li {
		margin-bottom:10px;
	}

	#school h3 {
		background:url(../image/life/life_line.png) bottom center no-repeat;
		line-height:1.5;
		text-align:center;
		padding:0 0 30px;
		margin:0 0 40px;
		font-size:1.3em;
		font-weight:500;
	}

	#school .box {
		text-align:center;
	}

	#school .box dl {
		display:block;
		padding:5%;
		width:80%;
		border:2px solid #33ccff;
		text-align:center;
		margin:0 auto 30px;
	}

	#school .box dl:last-child {
		margin:0 auto;
	}

	#school .box dl dt {
		margin:0 0 10px;
	}

	#school .box dl dt span {
		display:inline-block;
		line-height:1.0;
		text-align:center;
		border-bottom:2px solid #33ccff;
		width:80%;
		padding:0 0 15px;
		font-size:1.2em;
		font-weight:500;
	}
	
	#school .box dl dd {
		padding:0 5%;
	}
	
	

}