@charset "utf-8";
#main-content .wrapper{
	width: 100%;
	max-width: 100%;
}
#about{
	display: grid;
	grid-template-columns: 4fr 3fr;
	grid-template-rows: auto;
	column-gap: 20px;
	row-gap: 20px;
	align-items: stretch;
	margin: 100px auto 0;
	width: 1200px;
}
#about .photo-box{
	position: relative;
}
#about .photo-box img{
	position: absolute;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}
#about .photo-box img.image1{
	width: 90%;
	height: auto;
	z-index: 1;
	top: 0;
	left: 0;
}
#about .photo-box img.image2{
	width: 70%;
	height: auto;
	z-index: 2;
	bottom: 0;
	right: 0;
}

#about .text h1{
	font-size: 2.25em;
	font-weight: bold;
	margin-bottom: 1.5em;
	display: inline-block;
	position: relative;
}
#about .text h1:before{
	width: 100%;
	height: 10px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	content: "";
	background: #63d0e7;
	position: absolute;
	bottom: 13px;
	left: 0;
	z-index: -1;
}
#about .text h1 span.small{
	font-size: 0.542em;
}

#comment{
	margin: 100px auto 0;
	width: 1200px;
	position: relative;
}
#comment:before {
	content:"";
	display: block;
	padding-top: 39%;
}
#comment .photo-box{
	position: absolute;
	left: 0;
	top: 0;
	width: 60%;
	z-index: 1;
}
#comment .photo-box img{
	max-width: 100%;
	height: auto;
}

#comment .text{
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 60%;
	z-index: 2;
	padding: 45px 30px;
	background-color: rgba( 255, 255, 255, 0.75 );
}


#effort{
	margin: 100px auto 0;
	width: 100%;
	background: #ffeef5;
	padding: 50px 0;
}

#effort h1{
	font-size: 2.25em;
	font-weight: bold;
	margin-bottom: 1.5em;
	text-align: center;
}

#effort ul{
	width: 1200px;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	column-gap: 20px;
	row-gap: 20px;
	align-items: stretch;
}
#effort ul li{
	display: block;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
    background: #FFF;
	padding: 25px;
	text-align: center;
}
#effort ul li .image img{
	width: 60%;
	height: auto;
}
#effort ul li h2{
	font-size: 1.25em;
	color: #f09bc0;
	margin: 1em 0;
}
#effort ul li .cmt{
}

@media screen and (max-width: 979px) {
	#about{
		width: 100%;
	}
	#about .photo-box{
		position: static;
	}
	#about .photo-box img{
		position: static;
	}
	#about .photo-box img.image1{
		width: 100%;
	}
	#about .photo-box img.image2{
		width: 70%;
	}
	#about .text h1{
		line-height: 1em;
	}
	#about .text h1:before{
		bottom: auto;
		top: .7em;
		left: 0;
		z-index: -1;
	}
	#about .text h1 span.small{
		display: block;
	}

	#comment{
		width: 100%;
		margin-top: 50px;
	}
	#comment .photo-box{
		width: 70%;
	}
	#comment .text{
		width: 80%;
	}

	#effort{
		margin-top: 50px;
		padding: 50px 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	#effort ul{
		width: 100%;
		margin: auto;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		column-gap: 20px;
		row-gap: 20px;
		align-items: stretch;
	}
	#effort ul li{
		display: block;
		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		background: #FFF;
		padding: 25px;
		text-align: center;
	}
	#effort ul li .image img{
		width: 60%;
		height: auto;
	}
	#effort ul li h2{
		font-size: 1.25em;
		color: #f09bc0;
		margin: 1em 0;
	}
	#effort ul li .cmt{
	}

}
@media screen and (max-width: 620px) {
	#about{
		grid-template-columns: 1fr;
		column-gap: 10px;
		row-gap: 10px;
	}
	#comment .photo-box{
		width: 90%;
	}
	#comment .text{
		width: 90%;
		padding: 20px;
	}
	#about .photo-box img.image1{
		width: 90%;
	}
	#about .photo-box img.image2{
		width: 70%;
		display: block;
		margin-left: auto;
	}
	#effort{
		margin-top: 150px;
	}
	#effort h1{
		font-size: 1.95em;
	}
	#effort ul{
		grid-template-columns: 1fr;
		column-gap: 10px;
		row-gap: 10px;
	}
	#effort ul li{
		display: table;
		text-align: left;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		padding: 10px 10px 20px;
	}
	#effort ul li .image,
	#effort ul li .details{
		display: table-cell;
		vertical-align: top;
	}
	#effort ul li .image{
		width: 30%;
	}
	#effort ul li .image img{
		width: auto;
		max-width: 100%;
		height: auto;
	}
	#effort ul li .details{
		padding-left: 1em;
	}
}
@media screen and (max-width: 480px){
}