/* body {
	
	background: url(/design_about.jpg) yellow center top no-repeat;
	background-size: 1680px auto;
	height: 15400px;
} */
/* bg. */
.bg {
	margin: 0 auto;
	background: none;
}

@media (min-width: 992px) {
	.bg {
		background: url(/images/story2.png) center top no-repeat;
		background-size: 79%;
	}

}

@media (min-width: 1200px) {
	.bg {
		background-size: 72%;
	}
}
@media (min-width:1680px) {
	.bg {
		background-size: 1200px auto;
	}
}
/* .bg */

div.about h1, div.about h2 {
	padding-bottom: 15px;
	font-size: 2.3rem;
	font-family: 'Hannari';
	font-weight: normal;
	line-height: 1.8;
	
}
@media (min-width:992px) {
	div.about h1, div.about h2 {
		font-size: 3rem;
	}
}
div.about p {
	padding: .85em 0;
	
}
/* story. */
.story {
	box-sizing: border-box;
	display: flex;
	flex-direction:column;
	margin:0 auto;
	max-width: 1680px;
	padding:0 0 0;
}
.story::before {
	padding-top:163%;
	content: "";
	flex-basis: 50%;
	background: url(/images/story.jpg) top center no-repeat;
	background-size: cover;
}
.story .text {
	flex-basis: 50%;
	padding-top:53px;
	padding-left: 10%;
	padding-right: 10%;
}
@media (min-width:992px) {
	.story {
		flex-direction: row;
		padding:0 85px 0;
	}
	.story::before {
		padding-top:53%;
		background: none;
	}
	.story .text {
		padding-top:103px;
		padding-left: 90px;
		padding-right: 0;
	}
}
@media (min-width:1680px) {
	.story::before {
		padding-top:0;
		height:795px;	
	}
}

/* .story */

/* philosophy. */
.philosophy {
	display: flex;
	flex-direction: column-reverse;
	max-width: 1680px;
	margin: 100px auto 0;	
}
.philosophy::after {
	content: "";
	flex-basis: 50%;
	padding-top: 67%;
	background: url(/images/philosophy.jpg) center top no-repeat;
	background-size: cover;
}
.philosophy .text {
	flex-basis: 50%;
	box-sizing: border-box;
	padding:50px 10% 0;
}
@media (min-width:992px) {
	.philosophy {
		flex-direction: row;
		background: url(/images/philosophy.jpg) right 20px no-repeat;
		background-size: 50%;	
		margin: 145px auto 0;	
	}
	.philosophy::after {
		padding-top: 34.5%;
	}
	.philosophy .text {
		padding:0 85px;
	}
}
/* .philosophy */

/* mission. */
.mission {
	display: flex;
	flex-direction: column;
	max-width: 1680px;
	margin: 125px auto 0;
	background:none;
}
.mission::before {
	content: "";
	flex-basis: 50%;
	padding-top: 125%;
	background: url(/images/mission.jpg) center top no-repeat;
	background-size: contain;
}
.mission .text {
	flex-basis: 50%;
	box-sizing: border-box;
	
	padding:50px 10% 0;
}
@media (min-width:992px) {
	.mission {
		flex-direction: row;
		background: url(/images/mission.jpg) left 10px no-repeat;
		background-size: 44.5%;
	}
	.mission::before {
		padding-top: 57%;
		background: none;
	}
	.mission .text {
		max-width: 740px;
		padding:0 85px 0 0;
	}
}
.mission .text ul {
	list-style-type: none;
	margin:110px 0 0;
	padding:0;
}
.mission .text ul li {
	padding:0;
	margin:0;
	position: relative;
	display: inline-block;
	height: 36px;
}

.mission .text ul li p::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 38px;
	content: '';
	transition: all .3s;
	border-bottom: solid 1px #742c1a;
	transform: scale(0, 1);
	box-sizing: border-box;	
}
.mission .text ul li:hover p::after {
	transform: scale(1);	
}
.mission .text ul li a {
	position: relative;
	z-index: 5;
}
@media (min-width:992px) {
	.mission .text ul li p::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		height: 33px;
		content: '';
		transition: all .3s;
		border-bottom: solid 1px #742c1a;
		transform: scale(0, 1);
		box-sizing: border-box;
	}
}


/* .mission */

@media (min-width: 576px) {

}

@media (min-width: 768px) {
	/* lightgoldenrodyellow; */

}

@media (min-width: 992px) {
	/* lightpink */

}

@media (min-width: 1200px) {
	/* lightskyblue */

}
/* .links */