@charset "UTF-8";

/*--------------------------------------------------------------------
works.html
works.css
--------------------------------------------------------------------*/

/*------------about---------------------------------------------------------------*/
#about section h4 {
	padding: 0;
	border: 0 none;
	text-align: center;
	font: bold 2em / 1.2 var(--mincho);
}
#about section h4 span {
	display: block;
	font-size: 0.79em;
	font-weight: bold;
}
#about section .aboList {
	width: 90%;
	max-width: 980px;
	margin: 100px auto 0;
}
#about section .aboList ul {
	position: relative;
	width: 100%;
}
#about section #about01 ul { height: 500px; }
#about section #about02 ul { height: 560px; }
#about section #about03 ul { height: 580px; }
#about section #about04 ul { height: 640px; }
#about section #about05 ul { height: 500px; }
#about section .aboList ul::before {
	position: absolute;
	content: "";
	display: block;
	width: 96%;
	max-width: 900px;
	height: 80%;
	max-height: 435px;
	background-color: #92d1ef;
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	left: 50%;
	transform: var(--transformX);
	z-index: -1;
}
#about section .aboList:nth-of-type(2n) ul::before { background-color: #d3d1d0; }
#about section .aboList ul li {
	position: absolute;
	width: 55%;
}

#about section #about01 ul::before { top: 50px; }
#about section #about01 ul li:nth-of-type(1) { left: 0; bottom: 0; }
#about section #about01 ul li:nth-of-type(2) { right: 0; top: 0; }

#about section #about02 ul::before { bottom: 0; }
#about section #about02 ul li:nth-of-type(1) { left: 0; top: 0; z-index: 1; }
#about section #about02 ul li:nth-of-type(2) { right: 0; top: 105px; }

#about section #about03 ul::before { top: 0; }
#about section #about03 ul li:nth-of-type(1) { left: 0; bottom: 0; }
#about section #about03 ul li:nth-of-type(2) { right: 0; top: 110px; }

#about section #about04 ul::before { top: 50%; transform: var(--transformXY); }
#about section #about04 ul li:nth-of-type(1) { left: 0; top: 0; }
#about section #about04 ul li:nth-of-type(2) { right: 0; bottom: 0; }

#about section #about05 ul::before { top: 50%; transform: var(--transformXY); }
#about section #about05 ul li:nth-of-type(1) { left: 0; bottom: 0; }
#about section #about05 ul li:nth-of-type(2) { right: 0; top: 0; }

#about section .aboList p {
	margin-top: 3em;
	font: bold 1.25em / 1.4 var(--mincho);
}
#about section #end p {
	text-align: center;
	margin-top: 0;
	font: bold 1.5em / 1.4 var(--gothic);
}

@media (max-width: 540px) {
	#about section #about01 ul { height: 250px; }
	#about section #about02 ul { height: 250px; }
	#about section #about03 ul { height: 250px; }
	#about section #about04 ul { height: 250px; }
	#about section #about05 ul { height: 250px; }
	#about section .aboList ul::before { height: 48%; }
}