@charset "UTF-8";

/*--------------------------------------------------------------------
about.html
about.css
--------------------------------------------------------------------*/

article section:not(:first-of-type) { margin-top: 55px; }

/*------------product---------------------------------------------------------------*/
.product h4 span:not(:last-of-type) { margin-right: 1em; }
.product h3 strong {
	display: block;
	font-size: 0.56em;
	font-weight: bold;
}
.product .flexBox {
	display: flex;
	gap: 20px 35px;
	justify-content: space-between;
}
.product .flexBox .flPho {
	width: 100%;
	max-width: 525px;
}
.product .flexBox .linkBtn {
	width: 90%;
	margin: 10px auto 0;
}
.product .flexBox .linkBtn a {
	position: relative;
	display: block;
	padding: 0.5em 1em;
	background-color: var(--co-orange);
	border-radius: 7px;
	text-align: center;
	font-weight: bold;
	color: var(--co-white);
}
.product .flexBox .linkBtn a::before {
	position: absolute;
	content: "";
	display: block;
	width: 6px;
	height: 7px;
	background-color: var(--co-white);
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	top: 50%;
	right: 0.5em;
	transform: var(--transformY);
	transition: 0.5s;
}
.product .flexBox .linkBtn a:hover {
	background-color: var(--co-white);
	color: var(--co-orange);
}
.product .flexBox .linkBtn a:hover::before { background-color: var(--co-orange); }
.product .flexBox .flTxt {
	width: 100%;
	max-width: 540px;
}
.product .flexBox h5,
.product .flexBox dl dt {
	font-weight: bold;
	color: var(--co-orange);
}
.product .flexBox dl:first-of-type { margin-top: calc( var(--parag-bet) * 2); }
.product .flexBox dl:not(:first-of-type) { margin-top: calc( var(--parag-bet) / 2); }
.product .flexBox .flTxt a,
.product .flexBox a strong {
	display: inline-block;
	font-weight: bold;
	color: var(--co-orange);
}
.product .flexBox .flTxt a:hover,
.product .flexBox .flTxt a:hover strong,
.product .flexBox .flTxt a:hover em { text-decoration: underline; }
.product .flexBox .flTxt a em {
	display: inline-block;
	font-weight: normal;
}
.product .flexBox .flTxt a .gas { color: #00f; }
.product .flexBox .flTxt a .oil,
.product p strong { color: #f00; }
.product .flexBox .flTxt a .ele { color: #080; }
.product .flexBox .flTxt a .fre { color: var(--co-black); }

@media (max-width: 580px) {
	.product .flexBox { flex-direction: column; }
	.product .flexBox .flPho,
	.product .flexBox .flTxt { margin: 0 auto; }
}

/*------------#filter--遠心分離機・濾過機-------------------------------------------------------------*/
/*------------.topTxt------------------------*/
#board.topTxt { margin-top: 280px; }
.topTxt h4 {
	padding-bottom: 0;
	border-bottom: 0 none;
	color: var(--co-black);
}
/*------------#fil01------------------------*/
#filter #fil01 ul {
	display: flex;
	gap: 25px;
	margin-top: 50px;
}
#filter #fil01 ul li { width: calc((100% - 25px * 2) / 3); }
#filter #fil01 ul li p { border: 1px solid var(--co-gray30); }
#filter #fil01 ul li dl dt {
	margin: calc(var(--parag-bet) / 2) 0;
	text-align: center;
	font-size: 1.12em;
	font-weight: bold;
	color: var(--co-navy);
}
/*------------.usage------------------------*/
#filter .usage {
	display: flex;
	gap: 25px 100px;
	flex-wrap: wrap;
}
#filter .usage dl { width: calc((100% - 100px) / 2); }
#filter .usage dl dt {
	font-size: 1.12em;
	font-weight: bold;
	color: var(--co-navy);
}
#filter .usage dl dd { position: relative; }
#filter .usage dl dd p {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}
#filter .usage ul li {
	padding-left: 1.3em;
	text-indent: -1.3em;
}
#filter .usage ul li::before {
	padding-right: 0.3em;
	content: "・";
}
/*------------.lineup------------------------*/
#filter .lineup table tr th:last-of-type,
#filter .lineup table tr td:last-of-type { border-right: 0 none; }
#filter .lineup table tr th:first-of-type { border-left: 0 none; }
#filter .lineup table tr th,
#filter .lineup table tr td {
	width: auto;
	min-width: inherit;
	padding: 10px;
	border: 1px solid var(--co-gray30);
	text-align: center;
	vertical-align: middle;
}
#filter .lineup .ScrollBar { margin-bottom: 0.5em; }
#filter .lineup dl { display: flex; }
#filter .lineup dl:first-of-type { margin-top: 20px; }
#filter .lineup dl dt {
	width: 7em;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-ideograph;
	font-weight: bold;
	color: var(--co-navy);
}
#filter .lineup dl dd::before { content: "："; }
#filter .lineup dl dd {
	padding-left: 1em;
	text-indent: -1em;
	flex: 1;
}
/*------------#structure------------------------*/
#filter #structure ul li {
	padding-left: 1.3em;
	text-indent: -1.3em;
}
#filter #structure ul li::before {
	padding-right: 0.3em;
	content: "・";
}

@media (max-width: 940px) {
	article .ScrollBar {
		width: 100%;
		white-space: nowrap;
		overflow: auto;
	}
	article .ScrollBar::before {
		display: block;
		margin-bottom: 0.5em;
		content: "横へタップして全体を確認できます。";
		font-weight: bold;
		color: #f00;
	}
}
@media (max-width: 580px) {
/*------------#fil01------------------------*/
	#filter #fil01 ul { flex-direction: column; }
	#filter #fil01 ul li {
		width: 100%;
		max-width: 350px;
		margin: 0 auto;
	}
/*------------.usage------------------------*/
	#filter .usage { flex-direction: column; }
	#filter .usage dl { width: 100%; }
	#filter .usage dl dd p {
		position: relative;
		text-align: center;
	}
}
@media (max-width: 480px) {
/*------------.lineup------------------------*/
	#filter .lineup dl { display: block; }
	#filter .lineup dl dt {
		width: auto;
		text-align: inherit;
		text-align-last: inherit;
		text-justify: inherit;
	}
	#filter .lineup dl dd::before { content: ""; }
	#filter .lineup dl dd {
		padding-left: 0;
		text-indent: 0;
	}
}

/*------------#air--空調設備-------------------------------------------------------------*/
#air .flTxt ul li {
	padding-left: 1.3em;
	text-indent: -1.3em;
}
#air .flTxt ul li::before {
	padding-right: 0.3em;
	content: "・";
}

/*------------#breaker--エマルジョンブレーカー-------------------------------------------------------------*/
#breaker h5 {
	margin-bottom: 1em;
	font: normal 1.5em / 1.2 var(--mincho);
	font-feature-settings: "palt" 1;
	color: var(--co-black);
}
#breaker ol {
	padding-left: 1.5em;
	list-style: decimal;
}
#breaker .flPho p + p { text-align: center; }
#breaker h6 {
	font-weight: bold;
	color: var(--co-orange);
}
#breaker #exaFlex {
	display: flex;
	gap: 20px 70px;
}
#breaker #exaFlex > dl > dt { font-weight: bold; }
#breaker table tr th:last-of-type,
#breaker table tr td:last-of-type { border-right: 0 none; }
#breaker table tr th:first-of-type,
#breaker table tr td:first-of-type { border-left: 0 none; }
#breaker table tr th,
#breaker table tr td {
	width: auto;
	min-width: inherit;
	padding: 5px;
	border: 1px solid var(--co-gray30);
	text-align: center;
	vertical-align: middle;
}
#breaker #exaFlex dl dl { display: flex; }
#breaker #exaFlex dl dl dt {
	width: 3em;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-ideograph;
}
#breaker #exaFlex dl dl dd::before { content: "："; }
#breaker #exaFlex dl dl dd {
	padding-left: 1em;
	text-indent: -1em;
	flex: 1;
}
#breaker #result,
#breaker #result > div {
	display: flex;
	justify-content: space-between;
}
#breaker #result > div { gap: 10px; }
#breaker #result > div:nth-of-type(1) {
	width: 50%;
	max-width: 525px;
}
#breaker #result > div:nth-of-type(2) {
	width: 50%;
	max-width: 550px;
}
#breaker #result div div {
	display: flex;
	flex-direction: column;
	width: 270px;
}
#breaker #result div div dl {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#breaker #result div div dl dd { margin-top: auto; }
#breaker #result dl dt {
	margin: 0.5em 0;
	text-align: center;
	font-size: 1.12em;
	font-weight: bold;
	color: var(--co-navy);
}
#breaker #result dl dt span {
	display: inline-block;
	font-weight: bold;
}
#breaker #result dl dt span:not(:last-of-type) { margin-right: 1em; }

@media (max-width: 840px) {
	#breaker #exaFlex { flex-direction: column; }
}
@media (max-width: 580px) {
	#breaker table tr th,
	#breaker table tr td {
		display: table-cell;
		white-space: normal;
	}
	#breaker #result {
		flex-direction: column;
		gap: 30px;
	}
	#breaker #result div:nth-of-type(1),
	#breaker #result div:nth-of-type(2) {
		width: 100%;
		margin: 0 auto;
	}
}