@charset "UTF-8";

:root {
  --colorBk: #000;
  --colorWh: #fff;
  --colorNv: #343399;
}

header {
	position: absolute;
	top: 0;
	left: 0;
	.logo a:hover {
		opacity: 1;
	}
	nav ul {
		li {
			a {
				color: #fff!important;
			}
			&:last-child a {
				color: #333398!important;
				background: #fff;
			}
		}
	}
}
#main {
	width: 100%;
	min-width: 1280px;
	aspect-ratio: 1920 / 1036;
	background: url(../images/toppage/mainv.jpg) no-repeat center center/cover;
	display: flex;
	justify-content: center;
	align-items: center;
	.text {
		color: var(--colorWh);
		.copy {
			font-size: clamp(4.67rem, 7.47vw, 8.75rem);
		}
	}
}
#lead {
	min-width: 1280px;
	background: url(../images/toppage/lead_bg_01.jpg) no-repeat left top, url(../images/toppage/lead_bg_02.jpg) no-repeat right bottom;
	padding: 100px 0;
	.subContents {
		text-align: center;
		.btns {
			ul {
				display: flex;
				justify-content: center;
				li {
					width: 370px;
					margin: 0 18px;
				}
			}
		}
	}
}
#aboutus {
	color: var(--colorWh);
	min-width: 1280px;
	background: url(../images/toppage/aboutus_bg_01.jpg) #00419D no-repeat center bottom;
	padding: 110px 0 140px;
	.bl1 {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		.fig {
			width: 51.2%;
			img {
				width: 100%;
			}
		}
		.text {
			width: 43.4%;
			.btns {
				width: 400px;
			}
		}
	}
}
#numbers {
	min-width: 1280px;
	background: #ebebeb;
	padding: 110px 0 140px;
	.bl1 {
		ul {
			display: flex;
			justify-content: space-between;
			li {
				text-align: center;
				width: calc(calc(100% - 90px) / 4);
				background: #fff;
				border-radius: 15px;
				padding: 50px 10px;
				.num {
					line-height: 1;
					span {
						color: var(--colorNv);
						font-size: clamp(3.33rem, 5.33vw, 6.25rem);
						margin-right: 15px;
					}
				}
				.add {
					color: #7d7b7b;
				}
			}
		}
	}
}
#services {
	background: #fff;
	padding: 110px 0 140px;
	.bl1 {
		ul {
			display: flex;
			justify-content: space-between;
			li {
				width: calc(calc(100% - 72px) / 3);
				background: #f5f5f5;
				padding: 30px;
				img {
					width: 100%;
				}
				p {
					color: #636363;
				}
			}
		}
		.btns {
			width: 500px;
			margin: 0 auto;
		}
	}
}
#project {
	color: var(--colorWh);
	min-width: 1280px;
	background: url(../images/common/common_bg_01.jpg) center center;
	padding: 110px 0 140px;
	.bl1 {
		.box {
			background: #fff;
			border-radius: 20px;
			padding: 32px 60px 32px 32px;
			#pjslider {
				.slide {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.fig {
						width: 51%;
						img {
							width: 100%;
							aspect-ratio: 746 / 418;
							object-fit: cover;
						}
					}
					.text {
						width: 45%;
						color: var(--colorBk);
						p {
							color: #636363;
						}
						.cat {
							span {
								color: #333398;
								background: #edf3f6;
								border-radius: 50vh;
								padding: .1em 2em;
								display: inline-block;
							}
						}
					}
				}
			}
		}
		.btns {
			width: 500px;
			margin: 0 auto;
		}
	}
}
#news {
	padding: 110px 0 140px;
	.bl1 {
		.box {
			display: flex;
			justify-content: space-between;
			#newscats {
				width: 200px;
				li {
					color: #bbb;
					line-height: 1.5;
					margin-bottom: 24px;
					cursor: pointer;
					&.cr {
						color: #333398;
						font-weight: 700;
					}
				}
			}
			#newsitems {
				width: calc(100% - 250px);
				.item {
					display: none;
					&[newscat="all"] {
						display: block;
					}
					li {
						border-bottom: solid 1px #ededf6;
						margin: 0 0 30px;
						padding: 0 0 30px;
						span.cat {
							width: 10em;
							color: #333398;
							text-align: center;
							background: #edf3f6;
							border-radius: 50vh;
							padding: .2em 0;
							margin-right: 20px;
							display: inline-block;
						}
						span.date {
							color: #7e7e7e;
						}
					}
				}
			}
		}
		.btns {
			width: 500px;
			margin: 0 auto;
		}
	}
}

@media screen and (max-width:799px) {
	header {
		nav ul {
			li {
				a {
					color: #fff!important;
				}
				&:last-child a {
					color: #333398!important;
					background: #fff;
				}
			}
		}
	}
	#main {
		width: 100%;
		min-width: initial;
		aspect-ratio: 2 / 3;
		.text {
			.copy {
				font-size: 2.5rem;
			}
		}
	}
	#lead {
		min-width: initial;
		background-size: 60vw auto, 60vw auto;
		padding: 13vw 0;
		.subContents {
			.btns {
				ul {
					display: block;
					li {
						width: 70vw;
						margin: 0 auto 5vw;
					}
				}
			}
		}
	}
	#aboutus {
		min-width: initial;
		background-size: 200vw auto;
		padding: 13vw 0;
		.bl1 {
			display: block;
			.fig {
				width: 80vw;
				margin: 0 auto 6vw;
			}
			.text {
				width: 100%;
				.btns {
					width: 80%;
					margin: 0 auto;
				}
			}
		}
	}
	#numbers {
		min-width: initial;
		padding: 13vw 0;
		.bl1 {
			ul {
				flex-wrap: wrap;
				gap: 5vw;
				li {
					width: calc(calc(100% - 5vw) / 2);
					padding: 8vw 10px;
					.num {
						span {
							margin-right: 10px;
						}
					}
				}
			}
		}
	}
	#services {
		padding: 13vw 0;
		.bl1 {
			ul {
				display: block;
				li {
					width: 100%;
					margin-bottom: 5vw;
					padding: 5vw 10vw;
				}
			}
			.btns {
				width: 80%;
			}
		}
	}
	#project {
		min-width: initial;
		padding: 13vw 0;
		.bl1 {
			.box {
				padding: 5vw 8vw 1vw;
				#pjslider {
					.slide {
						display: block;
						.fig {
							width: 100%;
							margin-bottom: 3vw;
						}
						.text {
							width: 100%;
							.cat {
								margin-bottom: 1vw!important;
							}
							h3 {
								margin-bottom: 2vw!important;
							}
						}
					}
				}
			}
			.btns {
				width: 80%;
			}
		}
	}
	#news {
		padding: 13vw 0;
		.bl1 {
			.box {
				display: block;
				#newscats {
					width: 100%;
					margin-bottom: 10vw;
					ul {
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						li {
							margin-right: 1em;
							margin-bottom: 0;
						}
					}
				}
				#newsitems {
					width: 100%;
					.item {
						li {
							border-bottom: solid 1px #ededf6;
							margin: 0 0 6vw;
							padding: 0 0 6vw;
							span.cat {
								margin-right: 20px;
							}
						}
					}
				}
			}
			.btns {
				width: 80%;
			}
		}
	}

}