#kv {
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(../img/top/kv.jpg) 50% 50% / cover no-repeat;
	height: 100dvh;
}

#kv h2 {
	color: #ffffff;
	text-shadow: rgba(0, 0, 0, 0.8) 1px 0px 10px;
}

#about div {
	position: relative;
	margin-inline: auto;
	margin-top: 40px;
	max-width: 960px;
	text-align: center;
}

#about div h3,
#about div h4 {
	color : var(--text-color-title);
}

#about div p {
	padding-top: 20px;
}

#about div > dl {
	padding-top: 40px;
}

#about div > dl:first-of-type dt {
	padding-bottom: 20px;
	font-weight: bold;
}

#about div > dl:first-of-type dt::before {
	content: "\25A0";
	padding-right: 4px;
}

#about div > dl:first-of-type dd {
	padding-bottom: 40px;
}

#about div > dl:first-of-type dd ul {
	counter-reset: item;
}

#about div > dl:first-of-type dd ul li {
	padding-bottom: 20px;
}

#about div > dl:first-of-type dd ul li h4::before {
	content: counter(item) ". ";
	counter-increment: item;
	color: var(--text-color-title);
	padding-right: 4px;
}

#about div > dl:first-of-type dd ul li p {
	padding-top: 8px;
}

#about div > dl:last-of-type {
	display: flex;
	flex-wrap: wrap;
	border: solid 1px var(--border-color);
	border-bottom: none;
	margin-inline: auto;
	margin-top: 40px;
	padding-top: 0px;
	width: 550px;
	text-align: left;
}

#about div > dl:last-of-type dt {
	border-right: solid 1px var(--border-color);
	border-bottom: solid 1px var(--border-color);
	padding: 10px;
	width: 20%;
}

#about div > dl:last-of-type dd {
	border-bottom: solid 1px var(--border-color);
	padding: 10px;
	width: 80%;
}

@media (max-width: 768px) {
	#about div {
		padding-right: 0px;
	}

	#about div::after {
		position: relative;
		margin-inline: auto;
		margin-top: 40px;
		width: 50%;
	}

	#about div > dl:last-of-type {
		flex-direction: column;
		border: none;
		width: 100%;
	}

	#about div > dl:last-of-type dt {
		border: none;
		padding-bottom: 0px;
		width: 100%;
		font-weight: bold;
	}

	#about div > dl:last-of-type dt::before {
		content: "\25A0";
		padding-right: 4px;
	}

	#about div > dl:last-of-type dd {
		border: none;
		width: 100%;
	}
}

#service div {
	position: relative;
	margin-inline: auto;
	margin-top: 40px;
	max-width: 960px;
	text-align: center;
}

#service div ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 40px;
}

#service div ul li {
	border: solid 1px var(--border-color);
	border-radius: 2px;
	padding: 20px;
	width: calc((100% - 20px * 2) / 3);
}

#service div ul li dl dt {
	font-weight: bold;
	font-size: 1.4em;
}

#service div ul li:first-of-type dl dt {
	background: url(../img/top/enescore.svg) 50% 50% / contain no-repeat;
	aspect-ratio: 1161 / 167;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#service div ul li:nth-of-type(2) dl dt {
	background: url(../img/top/nextflow.svg) 50% 50% / contain no-repeat;
	aspect-ratio: 1203 / 218;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#service div ul li dl dd {
	padding-top: 20px;
}

@media (max-width: 768px) {
	#service div ul li {
		width: 100%;
	}
}

#contact {
	/*padding-bottom: calc(((100% * 639) / 2000) + 60px);*/
}

#contact > div {
	margin-inline: auto;
	padding-top: 40px;
	max-width: 960px;
	text-align: center;
}

#contact > div form dl {
	display: flex;
	flex-wrap: wrap;
	margin-inline: auto;
	max-width: 600px;
	text-align: left;
}

#contact > div form dl dt {
	padding-bottom: 20px;
	width: 30%;
}

#contact > div form dl dt label.required::after {
	content: " *";
	color: red;
	font-weight: bold;
	padding-left: 4px;
}

#contact > div form dl dd {
	padding-bottom: 20px;
	width: 70%;
}

#contact > div form dl dd input,
#contact > div form dl dd textarea {
	width: 100%;
}

#contact > div form > div {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	padding-bottom: 20px;
}

#contact > div form p.btn button {
	background-color: var(--button-bg-color);
	border: none;
	border-radius: 2px;
	padding: 5px 40px;
	color: #ffffff;
	transition: all 0.5s;
}

#contact > div form p.btn button.on {
	background-color: var(--button-bg-color-hover);
}

@media (max-width: 768px) {
	#contact > div form dl {
		flex-direction: column;
		max-width: 100%;
	}

	#contact > div form dl dt {
		padding-bottom: 0px;
		width: 100%;
	}

	#contact > div form dl dd {
		width: 100%;
	}
}