@charset "utf-8";
/*
body { width: 100%; min-width: 1366px; height: 6000px; margin: 0 auto; background-image: url('../images/hoge-about.jpg'); background-repeat: no-repeat; background-position: top center; background-size: auto; }
.page { background-color: transparent; }
.page #svg_gear { display: none; }
*/


#section1 { padding: 200px 0 46px; }
#section1 .box { padding: 50px; gap: 0 40px; background-color: #fff; flex-flow: row-reverse; }
#section1 .box figure { width: 347px; }
#section1 .box figcaption { font-size: 18px; line-height: 1.75; margin: 10px 0; }
#section1 .box div { width: calc(100% - 387px); }
#section1 .box p { font-size: 16px; line-height: 1.75; margin: 0 auto 15px; }

#section2 { padding: 150px 0 94px; }
#section2 .flex-wrapper { gap: 2.77938621887667%; align-items: center; }
#section2 .flex-wrapper .flexTable { width: 47.42327735958309%; }
#section2 .flex-wrapper .flexTable dl { display: flex; }
#section2 .flex-wrapper .flexTable dl * { font-size: 16px; line-height: 1.75; border-bottom: 2px solid #777; padding-top: 14px; margin-bottom: 14px; }
#section2 .flex-wrapper .flexTable dt { width: 23.07692307692308%; font-size: 18px; font-weight: bold; text-align: center; border-color: #b30000; }
#section2 .flex-wrapper .flexTable dd { width: 76.92307692307692%; text-align: left; padding-left: 30px; }
#section2 .flex-wrapper figure { width: 49.79733642154024%; }

#section3 { padding: 94px 0; }
.section3-1 { padding-bottom: 53px; }
.section3-1 ul { width: 100%; max-width: 1384px; margin: 0 auto; list-style: none; }
.section3-1 ul li { display: flex; }
.section3-1 ul li:nth-child(even) { flex-direction: row-reverse; }
.section3-1 ul li div { width: calc(50% + 2px); padding-bottom: 23px; }
.section3-1 ul li:nth-child(odd) div { border-right: 4px solid #b30000; }
.section3-1 ul li:nth-child(even) div { border-left: 4px solid #b30000; }
.section3-1 ul li h4 { font-size: 36px; font-weight: bold; color: #b30000; letter-spacing: 4px; position: relative; padding: 0 0 3px 46px; margin-bottom: 12px; border-bottom: 1px solid #b30000; }
.section3-1 ul li h4:after { content: ""; display: block; position: absolute; bottom: -12.5px; right: -14px; width: 25px; height: 25px; border-radius: 100%; background-color: #b30000; }
.section3-1 ul li:nth-child(even) h4:after { right: 0; left: -14px; }
.section3-1 ul li p { font-size: 16px; line-height: 1.75; letter-spacing: 1px; padding-left: 22.5%; }
#section3 .Tcenter h4 { font-size: 30px; font-weight: bold; color: #b30000; line-height: 1.75; letter-spacing: 1px; }
.section3-2 { padding: 53px 0; }
.section3-2 .flexTable { width: 100%; max-width: 1100px; margin: 30px auto 0; }
.section3-2 .flexTable dl { display: flex; align-items: flex-end; margin-bottom: 24px; }
.section3-2 .flexTable dl > * { font-size: 16px; line-height: 1.75; padding-top: 14px; margin-bottom: 14px; }
.section3-2 .flexTable dt { width: 22.36363636363636%; font-size: 18px; font-weight: bold; text-align: center; border-bottom: 2px solid #b30000; }
.section3-2 .flexTable dd { width: 77.63636363636364%; text-align: left; }
.section3-2 .flexTable dd span { display: block; padding-left: 30px; border-bottom: 2px solid #777; margin: 20px 0 0; }
.section3-3 { padding: 76px 0; }
.section3-3 .flex-wrapper1 { position: relative; justify-content: flex-end; margin: 80px auto 0; }
.section3-3 .svgWrapper {position: absolute; top: 0; left: 0; width: 824px; padding: 23px 32px 43px; background-color: #cf0000; overflow: hidden; z-index: 1; }
.section3-3 .box { position: relative; width: calc(100% - 420px); max-width: 1023px; margin-top: 60px; padding: 50px 50px 70px 172px; flex-wrap: wrap; gap: 65px 34px; box-shadow: 20px 20px 60px #d9d9d9; background-color: #d5d2d2; z-index: 0; }
.section3-3 .box figure { width: calc(50% - 19px);}
.section3-3 .box figcaption { font-size: 18px; font-weight: bold; letter-spacing: 2px; margin: 13px 0 0 20px; }
#svg_map1 { width: 730px; }
#svg_map1 .cls-1 { fill: #fff; }
#svg_map1 .cls-2 { fill: #fbca00; }
#svg_map1 .cls-3 { fill: none; stroke: #fff; stroke-miterlimit: 10; opacity: 0; transform: translateX(-100px); transition: .5s ease-in-out .3s; }
.active #svg_map1 .cls-3 { opacity: 1; transform: translateX(0); }
#svg_map1 .cls-4 { fill: #b30000; }
.section3-4 { padding: 93px 0 80px; }
.section3-4 .flex-wrapper { margin: 110px 0 0; position: relative; }
.section3-4 .flex-wrapper figure { position: relative; width: 25%; }
.section3-4 .flex-wrapper figure h5 { font-size: 18px; font-weight: bold; color: #fff; text-align: center; line-height: 50px; display: block; width: 197px; height: 50px; position: absolute; top: -30px; right: 0; left: 0; margin: 0 auto; background-color: #b30000; }
.section3-4 .flex-wrapper figure figcaption { font-size: 18px; font-weight: bold; line-height: 1.75; letter-spacing: 2px; margin: 12px 0 0 25px; }
.section3-4 .flex-wrapper figure figcaption span { color: #b30000; }
.section3-4 .flex-wrapper figure svg { display: block; min-height: 152px; margin: -15px 0 0 auto; }
#svg_map2 { width: 370px; }
#svg_map3 { width: 212px; }
#svg_map4 { width: 173px; }
#svg_map5 { width: 161px; }
#svg_map2 .cls-1 { fill: none; stroke: #b30000; stroke-miterlimit: 10; }
#svg_map2 .cls-2 { fill: #fff; }
#svg_map2 .cls-3 { fill: #b4b3b3; }
#svg_map2 .cls-4 { fill: #fbca00; }
#svg_map2 .cls-5 { fill: #b30000; }
#svg_map3 .cls-1 { fill: #fff; }
#svg_map3 .cls-2 { fill: #fbca00; }
#svg_map3 .cls-3 { fill: #b30000; }
#svg_map4 .cls-1 { fill: #fff; }
#svg_map4 .cls-2 { fill: #fbca00; }
#svg_map4 .cls-3 { fill: #b4b3b3; }
#svg_map4 .cls-4 { fill: #b30000; }
#svg_map5 .cls-1 { fill: #fbca00; }
#svg_map5 .cls-2 { fill: #b4b3b3; }
#svg_map5 .cls-3 { fill: #b30000; }

/* -------------------- SP -------------------- */
@media (max-width:1726px) {
	.section3-3 .svgWrapper { width: 46%; }
	#svg_map1 { width: 100%; }
	.section3-3 .box { width: calc(54% + 138px); }

	@media (max-width:1400px) {
		.section3-1 ul li p { padding-left: 12%; }
		.section3-4 .flex-wrapper figure svg { margin-top: 0; }

		@media (max-width:1299px) {
			#section1 { padding-top: 100px; }
			#section1 .box { display: block; }
			#section1 .box figure { width: 100%; text-align: center; margin-bottom: 20px; }
			#section1 .box div { width: 100%; }
			#section2 .flex-wrapper { display: block; }
			#section2 .flex-wrapper .flexTable { width: 100%; margin-bottom: 20px; }
			#section2 .flex-wrapper figure { width: 100%; text-align: center; }
			.section3-3 .box { width: calc(54% + 80px); padding: 20px 20px 20px 100px; gap: 20px; }
			.section3-4 .flex-wrapper figure figcaption { font-size: 16px; }

			@media (max-width:1023px) {		
				#section2  { padding: 80px 0; }
				#section3 { padding: 46px 0 0; }
				.section3-2 .flexTable dt { width: 30%; }
				.section3-2 .flexTable dd { width: 70%; }
				.section3-3 { padding: 20px 0; }
				.section3-3 .flex-wrapper1 { display: block; margin: 46px auto 0; }
				.section3-3 .svgWrapper { position: relative; width: 100%; }
				.section3-3 .box { width: 100%; padding: 20px; margin: 0 auto; justify-content: center; }
				.section3-4 { padding: 46px 0 0; }
				.section3-4 .flex-wrapper { display: block; margin: 46px auto 0; }
				.section3-4 .flex-wrapper figure { width: 100%; text-align: center; margin: 0 auto; padding: 0 0 100px; }
				.section3-4 .flex-wrapper figure svg { margin: 0 auto; }
					
				@media (max-width:767px) {
					#section1 { padding: 50px 0 0; }
					#section1 .box { padding: 20px; }
					#section1 .box p:last-child { margin-bottom: 0; }
					#section2 .flex-wrapper .flexTable dt { width: 34%; }
					#section2 .flex-wrapper .flexTable dd { width: 66%; }
					.section3-1 ul li div, .section3-1 ul li:nth-child(odd) div, .section3-1 ul li:nth-child(even) div { width: 100%; border-left: 4px solid #b30000; border-right: 0px solid transparent; border-right: none; }
					.section3-1 ul li h4:after, .section3-1 ul li:nth-child(odd) h4:after, .section3-1 ul li:nth-child(even) h4:after { right: 0; left: -14px; }
					#section3 .Tcenter h4 { font-size: 21px; }
					.section3-2 { padding: 46px 0; }
					.section3-2 .flexTable dl { flex-wrap: wrap; margin-bottom: 20px; }
					.section3-2 .flexTable dt { width: 100%; margin-bottom: 0; }
					.section3-2 .flexTable dd { width: 100%; margin: 0 auto; }
					.section3-2 .flexTable dd span { margin-top: 5px; padding: 0 5px; }
					.section3-3 .box figure { width: 100%; }
					

					@media (max-width:767px) {

						@media (max-width:593px) {

							@media (max-width:495px) {

								@media (max-width:460px) {

									@media (max-width:394px) {

									}
								}
							}
						}
					}
				}
			}
		}
	}
}