@charset "utf-8";

#page-about .inner-sct { padding: 40px 0;}
#page-about .bloc { padding: 50px 0;}
#page-about .flex { display: flex; justify-content: space-between; width: 88%; max-width: 1200px; margin: 0 auto;}
#page-about .about .flex { margin-bottom: 72px;}

#page-about .tit { transition: 0.4s linear; opacity: 0;}
#page-about .tit h2 { font-size: 24px; font-weight: 700;}
#page-about .tit h2 span { display: block; padding-top: 20px; letter-spacing: 0.1rem;}

#page-about .flex .pht { width: calc( 100% - 660px );}
#page-about .flex .ctn { width: 630px; padding-top: 30px;}
#page-about .flex .pht figure { position: relative; text-align: center;}
#page-about .flex .pht figure img { position: relative; width: 100%; max-width: 500px;
 transition: 0.4s linear; transition-delay: 0.4s; opacity: 0;
}
#page-about .flex .pht figure img.txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
 transition: 0.4s linear; transition-delay: 0.6s; opacity: 0;
}

#page-about .show .flex .pht figure img { opacity: 1;}

#page-about .flex .ctn .tit { margin-bottom: 50px; transition-delay: 0.6s;}
#page-about .flex .ctn .tit h2 { text-align: right;}
#page-about .flex .ctn .tit h2 img { width: 80%; max-width: 450px;}
#page-about .flex .ctn .txt { transition: 0.4s linear; transition-delay: 0.8s; opacity: 0;}
#page-about .flex .ctn .txt p { margin-bottom: 40px; font-size: 20px; letter-spacing: 0.12rem; line-height: 1.85;}
#page-about .flex .ctn .txt p:last-child { margin-bottom: 0px;}
#page-about .flex .ctn .txt p span { display: block;}

#page-about .show .flex .ctn .tit { opacity: 1;}
#page-about .show .flex .ctn .txt { opacity: 1;}

#page-about .flex .tit-2{ width: 32%;}
#page-about .flex .tit-2 h2 img { width: 100%; max-width: 450px;}
#page-about .flex .data { width: 65%; transition: 0.4s linear; transition-delay: 0.4s; opacity: 0;}
#page-about .flex .data ul { border-top: solid 1px #000;}
#page-about .flex .data ul li { padding: 18px 30px; border-bottom: solid 1px #000;}
#page-about .flex .data ul li dl { display: table; width: 100%;}
#page-about .flex .data ul li dl dt,
#page-about .flex .data ul li dl dd { display: table-cell; font-size: 20px; letter-spacing: 0.05rem;}
#page-about .flex .data ul li dl dt { width: 180px;}
#page-about .flex .data ul li dl dd { width: auto;}

#page-about .show .flex .tit-2{ opacity: 1;}
#page-about .show .flex .data { opacity: 1;}

#page-about .map { width: 88%; max-width: 1200px; margin: 0 auto;}
#page-about .map .iframe { width: 100%; height: 500px; transition: 0.4s linear; opacity: 0;}
#page-about .map .iframe iframe { width: 100%; height: 100%; border: none;}
#page-about .map.show .iframe { opacity: 1;}

@media (max-width: 1281px) {
	#page-about .flex .pht { width: calc( 100% - 580px );}
	#page-about .flex .ctn { width: 550px; padding-top: 20px;}
	#page-about .flex .ctn .txt p { margin-bottom: 30px; font-size: 18px;}
	#page-about .flex .data ul li dl dt,
	#page-about .flex .data ul li dl dd { font-size: 18px;}
}
@media (max-width: 1001px) {
	#page-about .tit h2 { font-size: 20px;}
	#page-about .tit h2 span { padding-top: 12px;}

	#page-about .flex .pht { width: calc( 100% - 540px );}
	#page-about .flex .ctn { width: 500px; padding-top: 20px;}
	#page-about .flex .ctn .txt p { font-size: 16px;}
	
	#page-about .flex .data ul li { padding: 12px 20px;}
	#page-about .flex .data ul li dl dt,
	#page-about .flex .data ul li dl dd { font-size: 16px;}
	#page-about .flex .data ul li dl dt { width: 150px;}
}
@media (max-width: 801px) {
	#page-about .bloc { padding: 30px 0;}
	#page-about .flex { display: block;}
	#page-about .about .flex { margin-bottom: 50px;}

	#page-about .flex .pht { width: 100%;}
	#page-about .flex .ctn { width: 100%; padding-top: 60px;}
	#page-about .flex .pht figure img { width: 80%;}
	#page-about .flex .ctn .tit { margin-bottom: 40px;}
	#page-about .flex .ctn .tit h2 { text-align: left;}
	#page-about .flex .ctn .tit h2 img { width: 56%;}

	#page-about .flex .tit-2 { width: 100%; margin-bottom: 30px;}
	#page-about .flex .tit-2 h2 img { width: 56%; max-width: 450px;}
	#page-about .flex .data { width: 100%;}
	
	#page-about .map .iframe { height: 400px;}
}
@media (max-width: 641px) {
	#page-about .flex .ctn .txt p span { display: inline;}
	#page-about .flex .data ul li dl dt,
	#page-about .flex .data ul li dl dd { font-size: 13px;}
}
@media (max-width: 481px) {
	#page-about .inner-sct { padding: 0px 0px 20px;}
	#page-about .bloc { padding: 20px 0;}
	#page-about .about .flex { margin-bottom: 40px;}

	#page-about .tit h2 { font-size: 16px;}
	#page-about .tit h2 span { padding-top: 6px;}

	#page-about .flex .ctn { padding-top: 40px;}
	#page-about .flex .ctn .tit { margin-bottom: 20px;}
	#page-about .flex .ctn .txt p { margin-bottom: 20px; font-size: 13px; letter-spacing: 0.05rem; line-height: 1.8;}
	#page-about .flex .data ul li { padding: 8px 12px;}
	#page-about .flex .data ul li dl dt,
	#page-about .flex .data ul li dl dd { font-size: 12px;}
	#page-about .flex .data ul li dl dt { width: 120px;}

	#page-about .map .iframe { height: 200px;}
}



.wave-1 { position: relative; height: 480px; z-index: 1;}
.wave-1 .wave { position: absolute; left: 0; top: 0px; width: 100%; margin: 0 auto; z-index: 1;}
.wave-1 .wave div { position: relative; width: 100%; padding-top: 600px; overflow: hidden;}
.wave-1 .wave img { position: absolute; left: 50%; top: 0; width: auto; height: 540px; transform: translateX(-50%); opacity: 0.8;}

.wave-1 .wave svg { position: absolute; left: 50%; top: 0px; width: auto; height: 600px; transform: translateX(-50%);}
.wave-1 .wave svg image {}
.wave-1 .wave svg .cls-3 { fill: none; stroke: #fff; stroke-linecap: round;
 stroke-width: 360px;
 stroke-miterlimit: 10;
 stroke-dasharray: 2000;
 stroke-dashoffset: 2000;
}
.wave-1.show .wave svg .cls-3 { animation: 1.6s ease wave-3 forwards;}
@keyframes wave-3{
 0% { stroke-dashoffset: 2000;}
 100% { stroke-dashoffset: 0;}
}
@media (max-width: 641px) {
	.wave-1 { height: 240px;}
	.wave-1 .wave div { padding-top: 400px;}
	.wave-1 .wave svg { height: 400px;}
}
@media (max-width: 481px) {
	.wave-1 { height: 200px;}
	.wave-1 .wave div { padding-top: 280px;}
	.wave-1 .wave svg { height: 280px;}
}