@charset "utf-8";

/* ========================================================
	about.css
======================================================== */

/* about_contents
============================================================================================================ */
.about_contents {
	padding-bottom: 120px;
}
@media screen and (max-width: 767px) {
	.about_contents {
		padding-bottom: 60px;
	}
}

.about_contents section {
	position: relative;
	border-top: 60px solid #ededed;
	font-weight: bold;
	font-size: 2rem;
	z-index: 3;
}
.about_contents section:first-child {
	border-top-width: 0;
}
.about_contents section .content {
	position: relative;
	overflow: hidden;
	padding-top: 60px;
	z-index: 2;
}
.about_contents section .content::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
}
.about_contents section .content::after {
	content: "";
	position: absolute;
	bottom: calc(100% + 60px);
	width: 50%;
	height: 200%;
}
.about_contents section:nth-child(2n + 1) .content::before {
	left: 0;
	background: -moz-linear-gradient(left,  rgba(243,243,243,1) 0%, rgba(243,243,243,1) 50%, rgba(243,243,243,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(243,243,243,1) 0%,rgba(243,243,243,1) 50%,rgba(243,243,243,0) 100%);
	background: linear-gradient(to right,  rgba(243,243,243,1) 0%,rgba(243,243,243,1) 50%,rgba(243,243,243,0) 100%);
}
.about_contents section:nth-child(2n + 1) .content::after {
	left: 0;
	background-color: #ededed;
	transform-origin: 100% 100%;
	transform: skewY(-41deg);
}
.about_contents section:nth-child(2n) .content::before {
	right: 0;
	transform: rotate(180deg);
	background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 100%);
}
.about_contents section:nth-child(2n) .content::after {
	right: 0;
	background-color: #ededed;
	transform-origin: 0 100%;
	transform: skewY(41deg);
}
.about_contents section:nth-child(4n + 2) {
	border-color: #1d3b87;
}
.about_contents section:nth-child(4n + 2) .content::after {
	background-color: #1d3b87;
}
.about_contents section:nth-child(4n + 4) {
	border-color: #bf000f;
}
.about_contents section:nth-child(4n + 4) .content::after {
	background-color: #bf000f;
}
.about_contents section .box {
	position: relative;
	padding-top: 60px;
	padding-bottom: 70px;
	z-index: 5;
}
.about_contents section:nth-child(2n + 1) .box h2 + p {
	text-shadow: 0 0 15px #fff, 0 0 15px #fff;
}
.about_contents section:nth-child(2n) .box {
	background-color: rgba(0,0,0,.3);
	color: #fff;
}
.about_contents section .more {
	margin-top: 40px;
}
.about_contents section .more a {
	display: block;
	width: 250px;
	padding: 5px;
	text-decoration: none;
	font-weight: bold;
	color: #1d3b87;
	border: 1px solid #1d3b87;
	font-size: 1.6rem;
	text-align: center;
}
.about_contents section:nth-child(2n) .more a {
	color: #fff;
	border-color: #fff;
}
@media screen and (min-width: 768px), print {
	.about_contents section .content {
		height: 700px;
	}
	.about_contents section:nth-child(2n) .box {
		width: 590px;
		margin-left: auto;
		padding-left: 60px;
		padding-right: 40px;
	}
	.about_contents section .more a:hover {
		background-color: #1d3b87;
		color: #fff;
	}
	.about_contents section:nth-child(4n + 2) .more a:hover {
		background-color: #fff;
		color: #1d3b87;
	}
	.about_contents section:nth-child(4n + 4) .more a:hover {
		background-color: #fff;
		color: #bf000f;
	}
}
@media screen and (max-width: 767px) {
	.about_contents section {
		border-top-width: 20px;
		font-size: 1.4rem;
	}
	.about_contents section .line_title {
		margin-bottom: 20px;
	}
	.about_contents section .content {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.about_contents section:nth-child(2n + 1) .content::before {
		width: 70%;
	}
	.about_contents section .content::after {
		bottom: calc(100% + 20px);
	}
	.about_contents section .box {
		padding: 20px;
		background-color: rgba(255,255,255,.5);
	}
	.about_contents section .box h2 + p {
		min-height: 9em;
	}
	.about_contents section .more {
		margin-top: 20px;
	}
	.about_contents section .more a {
		width: auto;
		font-size: 1.3rem;
	}
	.about_contents section:nth-child(2n + 1) .more a {
		background-color: rgba(255,255,255,.5);
	}
}

/* mov_show
============================================================================================================ */
@media screen {
	.about_contents section {
		opacity: 0;
	}
	.about_contents section .content::before,
	.about_contents section .content::after {
		opacity: 0;
	}
	.about_contents section:nth-child(2n + 1) .content::after {
		transform: translateX(-100%) skewY(-41deg);
	}
	.about_contents section:nth-child(2n) .content::after {
		transform: translateX(100%) skewY(41deg);
	}
	.about_contents section .box {
		opacity: 0;
	}
	.about_contents section:nth-child(2n + 1) .box {
		transform: translateX(30px);
	}
	.about_contents section:nth-child(2n) .box {
		transform: translateX(-30px);
	}
	.about_contents section.showed {
		transition: opacity 1.5s;
		opacity: 1;
	}
	.about_contents section:nth-child(2n + 1).showed .content::after {
		transition: opacity 0.6s .3s, transform 0.6s .3s;
		transform: translateX(0) skewY(-41deg);
		opacity: 1;
	}
	.about_contents section:nth-child(2n).showed .content::after {
		transition: opacity 0.6s .3s, transform 0.6s .3s;
		transform: translateX(0) skewY(41deg);
		opacity: 1;
	}
	.about_contents section.showed .content::before {
		transition: opacity 0.5s .5s;
		opacity: 1;
	}
	.about_contents section.showed .box {
		transition: opacity 0.6s .5s, transform 0.6s .5s;
		transform: translateX(0) !important;
		opacity: 1;
	}
}