@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 swing {
    0% { transform: rotate(0deg) }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

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

/*-------------------------------------------------------------------
	about
-------------------------------------------------------------------*/

#about {
	padding:0 0 100px;
	background:url(../image/common/cont_wave.png) bottom repeat-x;
	margin:0 0 70px;
	-webkit-animation: bgroop 20s linear infinite;
  animation: bgroop 20s linear infinite;
}

#about .relabox {
	position:relative;
}

#about .relabox.mb60 {
	margin:0 0 60px;
}

#about .box01 {
	width:1100px;
	margin:0 auto;
	overflow:hidden;
	zoom:1;
}

#about .box01 .img {
	float:left;
}

#about .box01 .text {
	margin-left:400px;
	padding-top:100px;
	font-size:1.2em;
	line-height:1.8;
}

#about .box02 {
	width:800px;
	margin:0 auto;
}

#about .box02 table {
	width:100%;
	border-top:1px dashed #360035;
	background:rgba(255,255,255,0.8);
}

#about .box02 table th,
#about .box02 table td {
	text-align:left;
	vertical-align:middle;
	border-bottom:1px dashed #360035;
	padding:15px 0;
}

#about .box02 table th {
	width:30%;
	font-size:1.2em;
	font-weight:400;
}

#about .flower01 {
	position:absolute;
	left:3%;
	top:0;
}

#about .flower02 {
	position:absolute;
	right:3%;
	top:100px;
}

#about .human01 {
	position:absolute;
	left:3%;
	top:30px;
	z-index:-1;
	animation: key1 .5s ease infinite alternate;
}

#about .human02 {
	position:absolute;
	right:3%;
	top:-20px;
	z-index:-1;
}



/*-------------------------------------------------------------------
	goal
-------------------------------------------------------------------*/

#goal {
	position:relative;
	padding:0 0 70px;
}

#goal .inner {
	width:750px;
	margin:0 auto;
}

#goal .inner .greenbox {
	border:2px solid #70c700;
	padding:30px;
	border-radius:10px;
	/*
	background:rgba(255,255,255,0.8);
	*/
}

#goal .inner .greenbox dl {
	margin:0 0 15px;
}

#goal .inner .greenbox dl:last-child {
	margin:0;
}

#goal .inner .greenbox dl dt,
#goal .inner .greenbox dl dd {
	display:inline-block;
}

#goal .inner .greenbox dl dt {
	margin-right:20px;
}

#goal .inner .greenbox dl dd {
	vertical-align:top;
	font-size:1.6em;
	letter-spacing:1.0;
	padding-top:10px;
	font-weight:400;
}

#goal .inner .greenbox dl dd span {
	background: linear-gradient(transparent 60%, #f9d747 60%);
  font-size: 100%;
}

#goal .human01 {
	position:absolute;
	left:3%;
	top:5%;
}

#goal .human02 {
	position:absolute;
	right:3%;
	top:5%;
	animation: swing linear 2s infinite;
}

#goal .human03 {
	position:absolute;
	left:3%;
	bottom:0;
}

#goal .human04 {
	position:absolute;
	right:3%;
	bottom:0;
}

/*===============================================
  画面の横幅が1450px以下に適用
===============================================*/
@media screen and (max-width: 1450px) {
	#about .box01 {
		width:70%;
	}

	#about .box01 .img {
		width:38%;
	}

	#about .box01 .img img {
		max-width:100%;
	}

	#about .box01 .text {
		margin-left:40%;
		padding-top:15%;
	}
	
	#about .human01 {
		left:1%;
	}

	
	#about .human02 {
		right:1%;
		text-align:right;
	}
	
	#about .human01 img,
	#about .human02 img {
		max-width:70%;
	}
	
	#goal .human01 img,
	#goal .human02 img,
	#goal .human03 img,
	#goal .human04 img {
		max-width:90%;
	}
	
	#goal .human02,
	#goal .human04 {
		text-align:right;
	}

	
}

/*===============================================
  画面の横幅が1080px以下に適用
===============================================*/
@media screen and (max-width: 1080px){
	
	#about .box02,
	#goal .inner {
		width:70%;
	}

}

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

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	#container h2 ul li {
		max-width:40px;
	}
	
	/* about */

	#about {
		padding:0 0 70px;
		margin:0 0 50px;
	}

	#about .relabox.mb60 {
		margin:0 0 40px;
	}

	#about .box01 {
		width:92%;
	}

	#about .box01 .img {
		float:none;
		width:100%;
		text-align:center;
		margin:0 0 30px;
	}
	
	#about .box01 .img img {
		max-width:50%;
	}

	#about .box01 .text {
		margin-left:0;
		padding-top:0;
		font-size:1.1em;
	}
	

	#about .box02 {
		width:92%;
	}
	
	#about .box02 table th {
		font-size:1.1em;
	}
	
	#about .box02 table a {
		color:#361d05;
	}

	
	#about .flower01 {
		top:24%;
		left:7%;
	}

	#about .flower02 {
		top:30%;
		right:10%;
		text-align:right;
	}
	
	#about .flower01 img,
	#about .flower02 img {
		max-width:50%;
	}

	#about .human01,
	#about .human02 {
		display:none;
	}

	/* goal */

	#goal {
		padding:0;
	}

	#goal .inner {
		width:92%;
	}

	#goal .inner .greenbox {
		padding:5% 3%;
		background:none;
	}
	
	#goal .inner .greenbox dl {
		overflow:hidden;
		zoom:1;
	}

	#goal .inner .greenbox dl dt,
	#goal .inner .greenbox dl dd {
		display:block;
	}

	#goal .inner .greenbox dl dt {
		margin-right:0;
		float:left;
		width:40px;
	}

	#goal .inner .greenbox dl dd {
		font-size:1.1em;
		padding-top:0;
		padding-left:15px;
		display:table-cell;
		height:10px;
		vertical-align:middle;
	}

	#goal .human01,
	#goal .human02,
	#goal .human03,
	#goal .human04 {
		display:none;
	}

}