﻿@charset "utf-8";
/*PC NPC TAB SP*/
header nav ul#pc-main-menu > li.maintenance a { color:rgba(31,130,205,1);}
.keyvisual {
	background-image:url(../images/inspection/keyvisual.png);
}
section h1.title:first-letter {
	color:rgba(31,130,205,1);
}

/*アピールポイント*/
#appeal-point {
	background-color:rgba(31,130,205,1);
}
.appeal-point .content-box h2 {
	font-weight:700;
}
.appeal-point .content-box h2.line::before,
.appeal-point .content-box h2.line::after,
.appeal-point .content-box h2.line-r::after {
	background-color:rgba(31,130,205,1);
}
.appeal-point ul.contents > li {
	background-color:#FFF;
	box-shadow:0 0 10px 2px rgba(31,130,205,.5);
	border-radius:10px;
}

/*アピール*/
.appeal .title:first-letter {
	color:rgba(31,130,205,1);
}

/*最後に*/
.about .title span:first-letter {
	color:rgba(31,130,205,1) !important;
}


#tank div.page-nav_category menu li.index a,
#flow div.page-nav_category menu li.flow a,
#repair div.page-nav_category menu li.repair a {
	color: rgba(31,130,205,1);
}

/*計量機検定*/
#flow #about .about {
	background-color:rgba(255,255,255,1);
}
#flow .about h1.title {
	color:rgba(31,130,205,1);
}
#flow .about h1.title > span {
	color:#333;
}
#flow #about h1.title:first-letter {
	color:#333;
}
#flow .about .img-box img {
	border:solid 1pt #999; 
}

/*設置・清掃・修繕・廃止工事*/
#home #appeal {
	background-color:rgba(31,130,205,.15);
}

/*電気防食システム設置工事*/
#protection .information .message-box h2.title span {
	color:rgba(31,130,205,1);
}
#protection .appeal-point .content-box .img-box {
	text-align:center;
}
#protection .appeal-point .content-box .img-box img {
	width:auto;
	height:80px;
}
#protection .appeal-point .content-box h3 {
	font-weight:bold;
}
#protection .appeal-point .content-box h3 span {
	color:rgba(31,130,205,1);
}


/*SP*/
@media not screen and (min-width: 768px) {
/*BASE*/
html { scroll-padding-top: calc(60px + 38px + 32px); }
.keyvisual .title-box {
	background-color:rgba(31,130,205,1);
}

/*最後に*/
.about .content-box {
	background: linear-gradient(180deg, rgba(31,130,205,0) 0, rgba(31,130,205,0) 240px, rgba(31,130,205,.25) 240px, rgba(31,130,205,.25) 100%);
}
.about .content-box_x {
	background: linear-gradient(180deg, rgba(31,130,205,0) 0, rgba(31,130,205,0) 100px, rgba(31,130,205,.25) 100px, rgba(31,130,205,.25) 100%);
}


/*タンク漏えい検査*/
#tank .appeal-point .cycle dl:not(:last-of-type) {
	margin-bottom:1rem;
}
#tank .appeal-point .cycle .table .tr .th {
	font-weight:bold;
	margin-bottom:.5rem;
}
#tank .appeal-point .cycle .table .tr .td {
	padding-left:2em;
}
#tank #about {
	background-image:url(../images/inspection/tank/img_0300_sp.jpg);
}

/*計量機検定*/
#flow .about ul.button a {
	font-size:14px;
}

/*設置・清掃・修繕・廃止工事*/
#home ul.appeal > li:not(:last-child) {
	border-bottom-color:rgba(86,91,157,1);
}

/*電気防食システム設置工事*/
#protection section {
	padding:4rem 2rem;
}

#protection .appeal-point h2 {
	font-size: 20px;
	text-align:center;
	color:#FFF;
	padding-bottom:1rem;
}
#protection .appeal-point .content-box h3 {
	font-size: 18px;
	text-align:center;
}
#protection .appeal-point .content-box h3 span {
	font-size: 20px;
}

#protection .details .contents .info,
#protection .details .contents .features {
	margin-bottom:3rem;
}
#protection .details .content-box h2 {
	font-size: 20px;
	font-weight:700;
	margin-bottom:1rem;
}
#protection .details .content-box h3 {
	font-size: 18px;
	font-weight:700;
	margin-bottom:.5rem;
}
#protection .details .contents .features ul {
	border-top:solid 1px #999;
	border-left:solid 1px #999;
}
#protection .details .contents .features ul li {
	padding:.5rem 1rem;
	border-bottom:solid 1px #999;
	border-right:solid 1px #999;
}
#protection .details .contents .diagram ul li:not(:last-child) {
	margin-bottom:1rem;
}
#protection .details .contents .diagram h3 {
	font-size:16px;
	margin-bottom:.5rem;
}

#protection #flowchart {
	padding:4rem 2rem;
	background-color:rgba(31,130,205,.15);
}
#protection .flowchart .flow {
	counter-reset: step 0;
}
#protection .flowchart .flow > li {
	width:100%;
	padding-left:calc(40px + 2rem);
	position:relative;
}
#protection .flowchart .flow > li:not(:last-child) {
	padding-bottom:3rem;
}
#protection .flowchart .flow >  li:not(:last-child)::after {
	content:"";
	display:block;
	width:4px;
	height:100%;
	background-color:rgba(31,130,205,.6);
	position:absolute;
	top:0;
	left:18px;
}
#protection .flowchart .flow > li::before {
	counter-increment: step 1;
	content:counter(step/*, decimal-leading-zero*/);
	display:flex;
	justify-content:center;
	align-items:center;
	color:#FFF;
	background-color:rgba(31,130,205,1);
	font-family:Anton;
	font-size:20px;
	line-height:1 !important;
	width:40px;
	height:40px;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
#protection .flowchart .flow > li .content-box .txt-box {
	text-align:justify;
	padding-bottom:1rem;
}
#protection .flowchart .flow > li .content-box .txt-box h2 {
	font-size: 18px;
	font-weight:700;
	padding:4px 0 1rem;
}
#protection .flowchart .flow > li .content-box .img-box {
	max-width:320px;
}
#protection .flowchart .flow > li .content-box .img-box ul li:not(:last-child) {
	margin-bottom:.5rem;
}

}

/*PC NPC TAB*/
@media screen and (min-width: 768px) {
/*BASE*/
div.page-nav_category menu {
	table-layout: auto;
}
header nav ul#pc-main-menu > li.inspection a {
    color: rgba(31, 130, 205, 1);
}
div.page-nav_category menu li a:hover {
	color:rgba(31,130,205,1);
	text-decoration:none;
	background-color:rgba(31,130,205,.2);
}
.keyvisual .title-box h1 span {
	display:block;
}
/*インフォメーション*/
#information {
	background-image:url(../images/inspection/information_bgimg.webp);
}

/*最後に*/
.about .content-box {
	background-image:linear-gradient(0deg, rgba(31,130,205,.25) 0, rgba(31,130,205,.25) 100%) ;
}
.about .content-box_x {
	background-image:linear-gradient(0deg, rgba(31,130,205,.25) 0, rgba(31,130,205,.25) 100%) ;
}


/*タンク漏えい検査*/
#tank .appeal-point .cycle .table {
	width:auto;
	margin:auto;
}
#tank .appeal-point .cycle .table .tr > * {
	text-align:left;
	vertical-align:top;
	padding:.5rem 1rem;
}

/*計量機検定*/
#flow .about ul.button a {
	font-size:16px;
}

/*設置・清掃・修繕・廃止工事*/
#home ul.appeal > li:nth-child(1) .content-box::before { background-image:url(../images/construction/index/img_0201.jpg); }
#home ul.appeal > li:nth-child(2) .content-box::before { background-image:url(../images/construction/index/img_0202.jpg); }
#home ul.appeal > li:nth-child(3) .content-box::before { background-image:url(../images/construction/index/img_0203.jpg); }
#home ul.appeal > li:nth-child(4) .content-box::before { background-image:url(../images/construction/index/img_0204.jpg); }

/*電気防食システム設置工事*/
#protection section:not(#information) {
	padding:80px 60px;
}
#protection .appeal {
	width:100%;
	max-width:1000px;
	margin:auto;
}
#protection ul.appeal > li:nth-child(1) .content-box::before {
	background-image:url(../images/construction/protection/img_0201.jpg);
	aspect-ratio:16 / 10;
}

#protection .appeal-point h2 {
	font-size: clamp(32px, 2.8vw, 40px);
	text-align:center;
	color:#FFF;
	padding-bottom:40px;
}
#protection .appeal-point .content-box h3 {
	font-size: clamp(20px, 1.6vw, 28px);
	text-align:center;
}
#protection .appeal-point .content-box h3 span {
	font-size:clamp(32px, 2.8vw, 40px);
}

#protection .details {
}
#protection .details .contents {
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 1fr 1fr;
	gap:60px 60px;
	width:100%;
	max-width:1000px;
	margin:auto;
}
#protection .details .contents .info {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#protection .details .contents .features {
	grid-row: 2 / 3;
	grid-column: 1 / 3;
}
#protection .details .contents .diagram {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	align-self:end;
}
#protection .details .content-box h2 {
	font-size: clamp(32px, 2.8vw, 40px);
	font-weight:700;
	margin-bottom:1rem;
}
#protection .details .content-box h3 {
	font-size: clamp(20px, 1.6vw, 28px);
	font-weight:700;
	margin-bottom:1rem;
}
#protection .details .contents .features ul {
	display:flex;
	flex-flow: row wrap;
	border-top:solid 1px #999;
	border-left:solid 1px #999;
}
#protection .details .contents .features ul li {
	width:calc(100% / 3);
	padding:1rem 1rem;
	border-bottom:solid 1px #999;
	border-right:solid 1px #999;
}
#protection .details .contents .diagram ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:40px 20px;
	width:100%;
}
#protection .details .contents .diagram h3 {
	font-size:16px;
	margin-bottom:.5rem;
	white-space:nowrap;
}

#protection #flowchart {
	padding:80px 60px;
	background-color:rgba(31,130,205,.15);
}
#protection .flowchart {
	width:100%;
	max-width:1000px;
	margin:auto;
}
#protection .flowchart .flow {
	counter-reset: step 0;
}
#protection .flowchart .flow > li {
	width:100%;
	padding-left:calc(80px + 40px);
	position:relative;
}
#protection .flowchart .flow > li:not(:last-child) {
	padding-bottom:120px;
}
#protection .flowchart .flow >  li:not(:last-child)::after {
	content:"";
	display:block;
	width:6px;
	height:100%;
	background-color:rgba(31,130,205,.6);
	position:absolute;
	top:0;
	left:37px;
}
#protection .flowchart .flow > li::before {
	counter-increment: step 1;
	content:counter(step/*, decimal-leading-zero*/);
	display:flex;
	justify-content:center;
	align-items:center;
	color:#FFF;
	background-color:rgba(31,130,205,1);
	font-family:Anton;
	font-size:48px;
	line-height:1 !important;
	width:80px;
	height:80px;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
#protection .flowchart .flow > li .content-box {
	flex-grow:1;
	display:flex;
	flex-flow: row nowrap;
}
#protection .flowchart .flow > li .content-box .txt-box {
	flex-grow:1;
	text-align:justify;
}
#protection .flowchart .flow > li .content-box .txt-box h2 {
	font-size: clamp(20px, 1.6vw, 28px);
	font-weight:700;
	padding:20px 0 1rem;
}
#protection .flowchart .flow > li .content-box .img-box {
	width:320px;
	min-width:320px;
	margin-left:20px;
}
#protection .flowchart .flow > li .content-box .img-box ul li:not(:last-child) {
	margin-bottom:20px;
}


}

@media screen and (min-width: 1280px) {
/*BASE*/
div.page-nav_category menu {
	table-layout: fixed;
}
}
@media screen and (min-width: 1880px) {
/*BASE*/
.fhd { display:none; }
}