@charset "UTF-8";

/*--------------------------------------------------------------------
recycle.html
solidification.html
works.css
--------------------------------------------------------------------*/

article section:not(:first-of-type) { margin-top: 85px; }
.imgPho {
	margin: 50px 0;
	text-align: center;
}
.strongTxt {
	margin: 30px 0;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
}

/*------------recycle---------------------------------------------------------------*/
#recycle #reuse {
	display: flex;
	flex-wrap: wrap;
	gap: 70px 40px;
	margin-top: 30px;
}
#recycle #reuse dl { width: calc((100% - 40px) / 2); }
#recycle #reuse dl dt {
	margin-bottom: var(--parag-bet);
	line-height: 1.2;
	font-size: 1.5em;
	color: var(--co-navy);
}
#recycle #streetBtn {
	margin-top: 30px;
	text-align: center;
}

@media (max-width: 960px) {
	#recycle #reuse {
		flex-direction: column;
		gap: 40px;
	}
	#recycle #reuse dl {
		width: 100%;
		max-width: 530px;
		margin: 0 auto;
	}
}


/*------------solidification-------------------------------------------------------------*/
#solidification table tr th {
	width: auto;
	background-color: var(--co-navy);
	border: 1px solid var(--co-gray30);
	text-align: center;
	font-weight: bold;
	color: var(--co-white);
}
#solidification table tr td {
	border: 1px solid var(--co-gray30);
	border-left: 0 none;
	vertical-align: middle;
}
#solidification table tr th:last-of-type,
#solidification table tr td:last-of-type { border-right: 0 none; }
#solidification table tr td:first-of-type {
	width: 20%;
	background-color: var(--co-gray10);
}
#solidification ul li {
	margin-top: var(--parag-bet);
	padding-left: 1.3em;
	text-indent: -1.3em;
	color: var(--co-orange);
}
#solidification ul li::before {
	padding-right: 0.3em;
	content: "※";
}
#solidification #note {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 50px;
	margin-top: 30px;
}
#solidification #note::before {
	position: absolute;
	display: block;
	content: "";
	width: 3px;
	height: 100%;
	background-color: var(--co-gray30);
	top: 0;
	left: 50%;
	transform: var(--transformX);
}
#solidification #note dl { width: calc((100% - 50px) / 2); }
#solidification #note dl dt {
	text-align: center;
	font-size: 1.5em;
	color: var(--co-navy);
}
#solidification #note ol {
	padding-left: 2em;
	list-style: decimal;
}
#solidification #note ol li { margin-top: var(--parag-bet); }

@media (max-width: 650px) {
	#solidification #note {
		flex-direction: column;
		gap: 25px;
	}
	#solidification #note::before { display: none; 	}
	#solidification #note dl { width: 100%; }
}

/*------------demolition---------------------------------------------------------------*/
#demolition #safety ul { margin: var(--parag-bet) 0; }
#demolition #safety ul li {
	padding-left: 1.3em;
	text-indent: -1.3em;
	font-size: 1.25em;
	font-weight: bold;
	color: var(--co-navy);
}
#demolition #safety ul li::before {
	padding-right: 0.3em;
	content: "・";
}
#demolition #feature ul {
	display: flex;
	flex-wrap: wrap;
	gap: 75px 60px;
}
#demolition #feature ul li { width: calc((100% - 60px) / 2); }
#demolition #feature dl { margin-top: var(--parag-bet); }
#demolition #feature dl dt {
	text-align: center;
	font-size: 1.5em;
	color: var(--co-navy);
}
#demolition #flow ol {
	display: flex;
	gap: 15px 40px;
	counter-reset: number 0;
}
#demolition #flow ol li {
	position: relative;
	display: flex;
	align-items: center;
	width: calc((100% - 40px * 10) / 11);
	padding: 20px 10px;
	background-color: var(--co-navy);
	writing-mode: vertical-rl;
	font-feature-settings: initial;
	line-height: 1.2;
	font-size: 1.25em;
	font-weight: bold;
	color: var(--co-white);
}
#demolition #flow ol li:not(:last-of-type)::before {
	position: absolute;
	content: "";
	display: block;
	width: 16px;
	height: 19px;
	background-color: var(--co-gray30);
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	top: 45%;
	left: 120%;
	transform: var(--transformY);
}
#demolition #flow ol li span::before {
	margin-bottom: 20px;
	counter-increment: number 1;
	content: counter(number, decimal-leading-zero);
	writing-mode: vertical-rl;
	font-feature-settings: initial;
	text-combine-upright: all;
	font-size: 1.25em;
	font-weight: bold;
}
@media (max-width: 960px) {
	#demolition #flow ol {
		flex-direction: column;
		gap: 40px 40px;
		counter-reset: number 0;
	}
	#demolition #flow ol li {
		width: 100%;
		writing-mode: horizontal-tb;
		font-feature-settings: initial;
	}
	#demolition #flow ol li:not(:last-of-type)::before {
		width: 19px;
		height: 16px;
		clip-path: polygon(100% 0, 0 0, 50% 100%);
		top: 120%;
		left: 50%;
		transform: var(--transformX);
	}
	#demolition #flow ol li span::before {
		margin: 0 20px 0 0px;
		writing-mode: horizontal-tb;
	}
	#demolition #flow ol li .PcOnly { display: none; }
	#demolition #flow ol li .SpOnly { display: inline-block; }
}

@media (max-width: 650px) {
	#demolition #feature ul {
		flex-direction: column;
		gap: 25px 60px;
	}
	#demolition #feature ul li {
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}
}

/*------------csr---------------------------------------------------------------*/
#csr ul {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 25px;
	margin-top: 30px;
}
#csr ul li { width: calc((100% - 25px * 2) / 3); }
#csr dl { margin-top: var(--parag-bet); }
#csr dl dt {
	text-align: center;
	font-size: 1.5em;
	color: var(--co-navy);
}

@media (max-width: 650px) {
	#csr ul {
		flex-direction: column;
	}
	#csr ul li {
		width: 100%;
		max-width: 350px;
		margin: 0 auto;
	}
}

/*------------environment---------------------------------------------------------------*/
#environment ul {
	display: flex;
	flex-wrap: wrap;
	gap: 75px 60px;
}
#environment ul li { width: calc((100% - 60px) / 2); }
#environment dl { margin-top: var(--parag-bet); }
#environment dl dt {
	text-align: center;
	font-size: 1.5em;
	color: var(--co-navy);
}

@media (max-width: 650px) {
	#environment ul {
		flex-direction: column;
		gap: 25px 60px;
	}
	#environment ul li {
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}
}

/*------------equipment---------------------------------------------------------------*/
#equipment #topTxt {
	margin-bottom: 30px;
	text-align: center;
	font: bold 1.9em / 1.2 var(--mincho);
	color: var(--co-navy);
}
#equipment ul {
	display: flex;
	flex-wrap: wrap;
	gap: 75px 40px;
}
#equipment ul li { width: calc((100% - 40px) / 2); }
#equipment ul li p + p { text-align: center; }
#equipment table tr th { width: 90%; }
#equipment table tr td { text-align: right; }

@media (max-width: 650px) {
	#equipment ul {
		flex-direction: column;
		gap: 25px 60px;
	}
	#equipment ul li {
		width: 100%;
		max-width: 530px;
		margin: 0 auto;
	}
	#equipment table tr th { width: 80%; }
}

@media (max-width: 480px) {
	#equipment table tr th { width: 100%; }
}