@charset "UTF-8";

/*--------------------------------------------------------------------
products.html
products.css
--------------------------------------------------------------------*/

/*------------products---------------------------------------------------------------*/
.detail section:first-of-type { margin-bottom:  100px; }

/*------------illBtn------------------------*/
#clickMap { position: relative; }
#clickMap dl {
	position: absolute;
	z-index: 5;
	width: 25%;
	padding: 0.25em 0.5em 0.25em 1.25em;
	background-color: var(--co-white);
	border: 1px solid var(--co-black);
	border-radius: 20px;
	font-size: 0.75em;
}
#clickMap dl dt a { font-size: 1.25em; }
#clickMap dl ul {
	display: flex;
	flex-wrap: wrap;
	line-height: 1.8;
}
#clickMap dl ul li::before {
	margin-left: 1em;
	content: "・";
}
#clickMap dl span,
#clickMap dl a {
	font-weight: bold;
	color: var(--co-black);
}
#clickMap dl a:hover { color: var(--co-blue); }
#clickMap #water { top: 22.35294117647059%; left: 2.416666666666667%; }
#clickMap #river { top: 43.17647058823529%; left: 20.58333333333333%; }
#clickMap #industry { top: 81.52941176470588%; left: 2.083333333333333%; }
#clickMap #bridge { top: 10%; left: 63.66666666666667%; }
#clickMap #tube { width: 22.5%; top: 31.64705882352941%; left: 73.5%; }
#clickMap #public { width: 21.25%; top: 40.58823529411765%; left: 51.66666666666667%; }
#clickMap #road { width: 23%; top: 84%; left: 53.33333333333333%; }

@media (max-width: 979px) {
	#clickMap {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 20px;
	}
	#clickMap dl {
		position: relative;
		z-index: 5;
		width: calc((100% - 20px) / 2);
		top: 0; left: 0;
		padding: 0.25em 0.5em 0.25em 1.25em;
		background-color: var(--co-white);
		border: 1px solid var(--co-black);
		border-radius: 20px;
		font-size: 0.75em;
	}
	#clickMap #water { top: 0; left: 0; }
	#clickMap #river { top: 0; left: 0; }
	#clickMap #industry { top: 0; left: 0; }
	#clickMap #bridge { top: 0; left: 0; }
	#clickMap #tube { width: calc((100% - 20px) / 2); top: 0; left: 0; }
	#clickMap #public { width: calc((100% - 20px) / 2); top: 0; left: 0; }
	#clickMap #road { width: calc((100% - 20px) / 2); top: 0; left: 0; }
	#illBtn {
		position: relative;
		display: block;
		width: 80%;
		margin: 20px auto 0;
		background-color: var(--co-red);
		transition: .5s;
	}
	#illBtn::after {
		position: absolute;
		display: block;
		content: "";
		z-index: 0;
		width: 14px;
		height: 14px;
		background: url("../../img/parts/nav_a.png") no-repeat left top;
		top: 50%;
		right: 0.5em;
		transform: var(--tr-fY);
	}
	#illBtn:hover {
		text-decoration: none;
		filter: alpha(opacity=75);
		-moz-opacity: 0.75;
		opacity: 0.75;
	}
	#illBtn a {
		position: relative;
		z-index: 1;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.5em 1.5em;
		transition: 1s;
		text-align: center;
		font: bold 1em / 1.2 var(--mincho);
		font-feature-settings: "palt" 1;
		color: var(--co-white);
	}
	#illBtn a:hover { color: #ff0; }
}

/*------------prodList------------------------*/
.prodList {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 30px;
}
.prodList .prodItem {
	display: flex;
	flex-flow: column;
	width: calc((100% - 30px * 2) / 3);
	border: 1px solid var(--co-silv30);
}
.prodList .prodItem a dl { position: relative; }
.prodList .prodItem a dl dt {
	position: absolute;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	min-height: 2.8em;
	background-color: rgba(42,43,43,0.60);
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	font: bold 1.5em / 1.2 var(--mincho);
	font-feature-settings: "palt" 1;
	color: var(--co-white);
}
.prodList .prodItem a dl dt span {
	display: block;
	font: bold 0.75em / 1 var(--mincho);
	font-feature-settings: "palt" 1;
}
.prodList .prodItem a dl dt strong { font-weight: bold; }
.prodList .prodItem a dl dt em {
	display: inline-block;
	font: bold 0.75em / 1 var(--mincho);
	font-feature-settings: "palt" 1;
}
.prodList .prodItem > dl { padding: 0 10px 20px; }
.prodList .prodItem p {
	padding: 10px;
	line-height: 1.2;
}
.prodList .prodItem p strong {
	display: block;
	margin-bottom: 1em;
	padding-left: 1em;
	text-indent: -1em;
	font: bold 0.875em / 1 var(--mincho);
	color: var(--co-red);
}
.prodList .prodItem p strong span {
	display: inline-block;
	font-weight: bold;
	padding-left: 1em;
	text-indent: -1em;
}
.prodList .prodItem > dl dt {
	margin-bottom: 0.25em;
	line-height: 1;
	font-size: 1.15em;
	font-weight: bold;
	color: var(--co-orange);
}
.prodList .prodItem ul {
	display: flex;
	flex-wrap: wrap;
	line-height: 1.2;
	font-size: 0.875em;
}
.prodList .prodItem ul li:not(:last-of-type)::after {
	display: inline-block;
	margin: 0 0.25em;
	content: "/";
}
.prodList .prodItem ul li a { color: var(--co-black); }
.prodList .prodItem ul li a:hover { color: var(--co-sky); }

@media (max-width: 979px) {
	.prodList .prodItem { width: calc((100% - 30px) / 2); }
}

@media (max-width: 450px) {
	.prodList { display: block; }
	.prodList .prodItem { width: 100%; }
	.prodList .prodItem:not(:first-of-type) { margin-top: 60px; }
}

/*------------btnList------------------------*/
.btnList ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
}
.btnList p + nav { margin-top: 30px; }
.btnList ul li {
	width: calc((100% - 30px * 2) / 3);
	padding: 10px;
	background-color: var(--co-black);
}
.btnList ul li a { color: var(--co-white); }
.btnList ul li div {
	position: relative;
	margin-top: 10px;
	padding: 0 20px;
	text-align: center;
	line-height: 1.2;
}
.btnList ul li div::before {
	position: absolute;
	display: block;
	content: "";
	width: 14px;
	height: 14px;
	background: url("../../img/parts/nav_a.png") no-repeat left top;
	top: 50%;
	right: 0;
	transform: var(--tr-fY);
}
.btnList ul li div span { display: inline-block; }

@media (max-width: 979px) {
}

@media (max-width: 450px) {
	.btnList ul { display: block; }
	.btnList ul li { width: 100%; }
	.btnList ul li:not(:first-of-type) { margin-top: 20px; }
}

/*------------in-house------------------------*/
#in-house p#request{
	text-align: center;
	font: bold 1.25em / 1.2 var(--mincho);
	font-feature-settings: "palt" 1;
}
#in-house p strong {
	font: bold 1.25em / 1.2 var(--mincho);
	font-feature-settings: "palt" 1;
	color: var(--co-orange);
}
/*------------development------------------------*/
#development {
	display: flex;
	justify-content: space-between;
	gap: 0 40px;
}
#development #deveImg {
	width: 100%;
	max-width: 500px;
}
#development #deveTxt {
	width: 100%;
	max-width: 660px;
}
#development #deveTxt dl dt {
	margin: 1em 0 0.35em;
	line-height: 1;
	font-size: 1.15em;
	font-weight: bold;
	color: var(--co-orange);
}
#development #deveTxt dl dd ol li {
	position: relative;
	display: flex;
	counter-increment: cont;
}
#development #deveTxt dl dd ol li:not(:first-of-type) { margin-top: 0.5em; }
#development #deveTxt dl dd ol li strong { flex: 1; }
#development #deveTxt dl dd ol li span::before {
	display: inline-block;
	content: "";
	margin-right: 0.5em;
	padding: 0.25em 0.25em;
	background-color: var(--co-red);
	line-height: 1;
	content: "※"counter(cont) ". 注意…";
	color: var(--co-white);
}

@media (max-width: 450px) {
	#development { display: block; }
	#development #deveImg {}
	#development #deveTxt { margin-top: 1em; }
}