/*-----------------------------------------------
 title
-----------------------------------------------*/
#title{
	position: relative;
	z-index: 10;
	height: 200px;
	margin-bottom: 40px;
	background-image: url(../img/about/title-bg.png);
	background-position: center top;
	background-repeat: repeat-x;
}
#title .inner{
	position: relative;
	width: 1200px;
	margin: 0 auto;
}
#title .inner h1{
	position: absolute;
	top: 66px;
}
@media only screen and (max-width: 640px) {
	#title{
		height: auto;
		margin-bottom: 20px;
		background: none;
	}
	#title .inner{
		width: auto;
	}
	#title .inner h1{
		position: static;
		background: none;
	}
	#title .inner h1 img{
		width: 100%;
	}
}
/*-----------------------------------------------
 content
-----------------------------------------------*/
#content{
	width: 1200px;
	min-height: 1200px;
	margin: 0 auto;
}
#content h2{
	height: 66px;
	background-image: url(../img/about/border.png);
	background-size: 40px 66px;
	text-align: center;
}
@media only screen and (max-width: 640px) {
	#content{
		width: auto;
		padding: 0;
	}
	#content h2{
		height: auto;
		background: none;
	}
	#content h2 img{
		width: 100%;
	}
	#content img {
		width: 100%;
	}
}

/*-----------------------------------------------
 story
-----------------------------------------------*/
#content .story {
	margin-bottom: 90px;
}
#content .story p {
	text-align: right;
	padding: 65px 25px 0 0;
	height: 764px;
	background: url(../img/about/story-bg.png) top center no-repeat;
}

@media only screen and (max-width: 640px) {
	#content .story {
		margin-bottom: 0;
	}
	#content .story p {
		height: auto;
		background: url(../img/about/story-bg-sp.jpg) top center no-repeat;
		background-size: cover;
		padding: 4% 3% 33%;

	}
}
/*-----------------------------------------------
 character
-----------------------------------------------*/
#content .character h2 {
	margin-bottom: 30px;
}
#content .character ul li {
	display: inline-block;
	width: 276px;
	margin-right: 32px;
	margin-bottom: 85px;
	vertical-align: top;
}
#content .character ul li:nth-of-type(4n) {
	margin-right: 0;
}
#content .character ul li h3 {
	font-size: 36px;
	font-weight: bold;
	line-height: 1;
	padding: 12px 0 15px;
	text-align: center;
}
#content .character ul li p {
	font-size: 18px;
	font-weight: 400;
}

@media only screen and (max-width: 640px) {
	#content .character ul {
		width: 94%;
		margin: 0 auto;
	}
	#content .character ul li{
		width: 45.5%;
		margin-right: 9%;
		margin-bottom: 12%;
	}
	#content .character ul li:nth-of-type(2n) {
	margin-right: 0;
	}
	#content .character ul li h3 {
		font-size: 5.5vw;
		padding: 4% 0 6%;
	}
	#content .character ul li p{
		font-size: 3vw;
	}
}