@charset "utf-8";
/* CSS Document */

/*　サブページ　セクション
-----------------------------------------------------*/
#sub section { 
	position:relative;
	clear:both;
	width:100%;
}

/*　サブページ　タイトル
-----------------------------------------------------*/
#sub header.sub-top {
	width:100%;
	clear:both;
	margin:0 auto 0;
	padding:0;
	/*background:#F9F9F9;background:rgba(51,141,190,0.1);*/
background: -webkit-linear-gradient(to right, #ebf3f8, #F9F9F9);
	/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ebf3f8, #F9F9F9);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#sub header.sub-top h2 {
	color:#0055b4;
	position:relative;
	padding-top:150px;
	padding-bottom:10px;
	margin:0 auto;
	width:40%;
	font-size:20px;
	letter-spacing:2px;
	line-height:1.2;
}

#sub header.sub-top h2 span {
	font-family: "Montserrat", sans-serif;
	font-size:7vw;
	bottom:0;
	color:#fff;
	color:rgba(51,141,190,0.12);
	display:block;
	text-align:center;
}

@media only screen and (max-width:820px){
#sub header.sub-top h2 {
	padding-top:100px;
	padding-bottom:20px;
	width:100%;
	font-size:22px;
	line-height:1.4;
	text-align:center;}
}

/*　サブページ　事業内容タイトル
-----------------------------------------------------*/
#sub header.sub-top-service {
	width:100%;
	clear:both;
	margin:0 auto 0;
	padding:0;
	/*background:#F9F9F9;
	background:rgba(51,141,190,0.1);*/
background: -webkit-linear-gradient(to right, #ebf3f8, #F9F9F9);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ebf3f8, #F9F9F9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#sub header.sub-top-service h2 {
	color:#0055b4;
	position:relative;
	padding-top:150px;
	padding-bottom:20px;
	margin:0 auto;
	width:auto;
	text-align:center;
	font-size:36px;
	letter-spacing:2px;
	line-height:1.8;
}

#sub header.sub-top-service h2 span {
	font-family: "Montserrat", sans-serif;
	font-size:2vw;
	bottom:0;
	color:#fff;
	color:rgba(51,141,190,0.12);
	display:block;
	text-align:center;
}

@media only screen and (max-width:820px){
#sub header.sub-top-service h2 {
	padding-top:100px;
	padding-bottom:20px;
	width:100%;
	font-size:22px;
	line-height:1.4;
	text-align:center;}
}


/*　会社概要
-----------------------------------------------------*/
.greeting {
	width:80%;
	margin:80px auto 100px;
}

.greeting p {
	line-height:2.5;
	font-size:16px;
	padding:50px 0 0;
	letter-spacing:2px;
}


/* 会社沿革テーブル レスポンシブ仕様
-------------------------------*/
table.Re_table {
	width:100%;
	margin:50px auto 50px;
	letter-spacing:2px;
}
table.Re_table th {
	width:20%;
	font-weight:600;
	padding:30px 15px;
	vertical-align: top;
	border-top:3px solid rgba(51,141,190,0.1);
	border-bottom:3px solid rgba(51,141,190,0.1);
}
table.Re_table td {
	padding:30px 15px;
	border-top:3px solid rgba(51,141,190,0.1);
	border-bottom:3px solid rgba(51,141,190,0.1);
}

@media only screen and (max-width:820px){
table.Re_table th {
	width:25%;}	
}

@media only screen and (max-width:767px){
table.Re_table {
	width:90%;
	margin:50px auto 50px;
	letter-spacing:2px;
	border-bottom:3px solid rgba(0,64,150,0.1);
}
table.Re_table th {
	width:100%;
	text-align:center;
	font-size:15px;
	display:block;
	border-bottom:none;
	padding:15px 0;
	background:rgba(51,141,190,0.03);
	color:rgba(0,64,150,1.0);
}
table.Re_table td {
	width:100%;
	display:block;
	border-bottom:none;
	padding:15px 0 30px;
	line-height:2;
	font-size:15px;
}
table.Re_table td.last {
	border-bottom:1px solid rgba(0,64,150,0.5);}
}

@media only screen and (max-width:480px){
table.Re_table {
	letter-spacing:1px;
	font-size:13px;}
}


ul.business li {
	position:relative;
	line-height:1.6;
	margin:0 0 0.5em 1em;
}

ul.business li::before {
	content:"";
	position:relative;
	display:inline-block;
	left:-1.3em;
	margin-top: 0.3rem;
	margin-right:-0.8em;
	min-width: 0.8rem;
	min-height: 0.8rem;
	border-radius: 100%;
	background-color: rgba(0,64,150,0.1);
}



/*　お問い合わせ
-----------------------------------------------------*/
.contact {
	width:80%;
	margin:80px auto 0px;
}

@media screen and (max-width:820px) {
.contact .inner {
	width:100%;}
}

@media screen and (max-width:767px) {
.contact {
	width:90%;
	margin:80px auto 0px;
}
.contact .inner {
	width:100%;}
}

.contact p {
	margin:30px auto 0;
	text-align:center;
	border:5px solid rgba(51,141,190,0.12);
	line-height:2.1;
	font-size:16px;
	padding:30px;
}

.contact p span {
	display:block;
	font-size:90%;
}

.contact p a.tel {
	display:inline-block;
	font-size:180%;
	font-weight:700;
	margin:0 10px 5px;
	vertical-align:middle;
	color:#0055b4;
}

@media screen and (max-width:820px) {
.contact p {
	line-height:1.7;
	font-size:15px;
	padding: 25px 15px;
}	
.contact p a.tel {
	line-height:1;
	margin:12px 10px 15px;}	
}

@media screen and (max-width:767px) {
.contact p {
	line-height:1.7;
	font-size:15px;
	padding: 25px 20px;
}	
}

table.form-table { 
	width:100%;
	background:#fff;
	margin:50px auto;
	border-top: solid 3px rgba(51,141,190,0.1);
	border-bottom: solid 3px rgba(51,141,190,0.1);
}
.form-table th {
	border-bottom: solid 3px rgba(51,141,190,0.1);
	padding:20px 20px;
	font-weight: 600;
	width:30%;
	/*text-align:center;*/
	font-size:15px;
	background:rgba(51,141,190,0.03);
	white-space: nowrap;
}

span.required {
	background:#ff0052;
	color:#fff;
	display:inline-block;
	vertical-align:middle;
	padding: 0px 6px 1.5px;
	margin-right:5px;
	margin-bottom:3px;
	border-radius: 6px;
	font-size:10.5px;
}
.form-table td {
 border-bottom: solid 3px rgba(51,141,190,0.1);
	padding: 10px 15px;
}
.form-table td p {
padding:10px 0 15px 0;
}

@media screen and (max-width:767px) {
.form-table {
    width:100%;
  }
.form-table th {
	border-bottom: none;
    display: block;
    width:calc( 100% - 40px );
}
.form-table td {
	border-bottom: none;
    display: block;
    width: 100%;
	width:calc( 100% - 40px );
}
.form-table td {
border-bottom: solid 1px #485563;
padding:15px 20px 15px;
}
}

input[type=radio] {
display: none; /* 標準スタイル */
}
.first_label {
position: relative; /* ボックスの位置を指定する */
padding: 0 0 0 40px; /* ボックス内側の余白を指定する */
}

.first_label:after, .first_label:before {
position: absolute; /* ボックスの位置を指定する */
content: ""; /* ボックスのコンテンツ */
display: block; /* ブロックレベル要素化する */
top: 50%; /* 上部から配置の基準位置を決める */
}
.first_label:after {
left:15px; /* 左から配置の基準位置を決める */
margin-top: -9px; /* チェック枠の位置 */
width: 16px; /* ボックスの横幅を指定する */
height: 16px; /* ボックスの高さを指定する */
border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
border-radius: 50%; /* ボックスの角丸を指定する */
}
.first_label:before {
left:19.7px; /* 左から配置の基準位置を決める */
margin-top: -4.5px; /* チェックマークの位置 */
width: 10px; /* ボックスの横幅を指定する */
height: 10px; /* ボックスの高さを指定する */
background: #0171bd;/* ボックスの背景色を指定する */
border-radius: 50%; /* ボックスの角丸を指定する */
opacity: 0; /* 要素を透過指定する */
}
input[type=radio]:checked + .first_label:before {
opacity: 1; /* 要素を表示する */
}
.first_label:hover:after {
border-color: #0171bd; /* ボックスの境界線を実線で指定する */
}
.first_label.first {
position: relative; /* ボックスの位置を指定する */
padding: 0 0 0 25px; /* ボックス内側の余白を指定する */
}
.first_label.first:after {
left:0px; /* 左から配置の基準位置を決める */
}
.first_label.first:before {
left:4.7px; /* 左から配置の基準位置を決める */
}
.form-table input,
.form-table select {
	height : 1.8em;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #fff;
	font-size: 16px;
	color: #505050;
	padding:5px;
}

.form-table textarea{
	width : 300px;
	height : 180px;
	resize : vertical;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #fff;
	padding:5px;
	width: 100%;
	font-size: 15px;
	color: #505050;
}
.form-table input:focus,
.form-table textarea:focus{
	box-shadow:0px 0px 7px #ddd;
	border:1px solid #ddd;
	background: #ffffff;
}

.form-table label:hover{
	cursor : pointer;
}
.form-table input{
	height : auto;
	margin-right : 0.5em;
}

.form-table .form-file { font-size:12px;}

input.submit_button {
	width : auto;
	height : auto;
	display:inline-block;
	vertical-align : middle;
	border-radius : 3px;
	font-family : inherit;
	border:none;
	padding-top: 15px;
	padding-right: 35px;
	padding-bottom: 16px;
	padding-left: 35px;
	font-size: 15px;
	font-weight: 600;
	line-height: 26px;
	color: #444;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
	margin: auto;
}
input.submit_button:hover{
	cursor : pointer;
	color:#fff;
	background-color:rgba(0,64,150,1.0);
}

input.sent_button {
	width : auto;
	height : auto;
	display:inline-block;
	vertical-align : middle;
	border-radius : 3px;
	font-family : inherit;
	border:none;
	padding-top: 15px;
	padding-right: 35px;
	padding-bottom: 16px;
	padding-left: 35px;
	font-size: 15px;
	font-weight: 600;
	line-height: 26px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
	margin: auto;
	color:#fff;
	background-color:rgba(0,64,150,1.0);
}
input.sent_button:hover{
	cursor : pointer;
	background-color:rgba(0,64,150,0.7);		
}

@media screen and (max-width:767px) {
.form-table input,
.form-table select,.form-table textarea {
	width:100%;
}
input.submit_button,input.sent_button {
	margin:0 auto 0;
}
.form-table .form-file { font-size:11px;}
}
.error_messe {
	color:#ff0052;
}
section.comfirm {
	width:80%;
	margin:80px auto 0px;
}

/*事業内容
----------------------------------------------*/
/*左なび*/
.service-content {
  width:100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.service-side {
width:18%;
}

.service-side ul { 
	position: sticky;
    top:120px;
	margin:100px 0 0 0;
	list-style:none;
}

main.service-main { 
width: calc(100% - 18%);
}

@media screen and (max-width:1600px) {
.service-side {
width:25%;
}
main.service-main { 
width: calc(100% - 25%);
}

main.service-main .inner {
	width:92%!important;
	padding-bottom: 120px;
}	
}

@media screen and (max-width:1400px) {
.service-side {
width:20%;
}
main.service-main { 
width: calc(100% - 20%);
}
}

@media screen and (max-width:1200px) {
.service-side {
display:none;
}
main.service-main { 
width:100%;}
}
.service-side ul li {
	width:100%;
	padding:0;
	margin:0 0 0;
}
.service-side ul li.title {
	width:68%;
	margin-left:32%;
	padding:0 0 15px 0;
	font-size:18px;
	letter-spacing:2px;
	font-weight:700;
	color:rgba(0,64,150,1.0);
}

.service-side ul li ol {
list-style: none;
padding:0;
margin:0px 0 0 0;
position:relative;
}

.service-side ul li ol li　{
padding:0;
margin:0;
}

.service-side ul li a {
position:relative;
display:block;
width:65%;
margin-left:35%;
padding:8px 0;
text-decoration:none;
font-weight:700;
font-size:15px;
color:#344a63;
left:0;
letter-spacing:1px;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
transition: 0.2s linear;
}

.service-side ul li ol li a {
position:relative;
display:block;
padding:8px 0;
width:calc( 65% - 1em );
margin-left:calc( 35% + 1em );
color:#344a63;
font-weight:700;
font-size:15px;
	left:0;
text-decoration:none;
letter-spacing:1px;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
transition: 0.2s linear;
}

.service-side ul li a:before,
.service-side ul li ol li a:before{
	content:"";
	position:relative;
	display:inline-block;
	width:8px;
	height:8px;
	top:-1.3px;
	left:-8px;
	border-radius:50%;
}

.service-side ul li a:before {

	background:rgba(51,141,190,0.7);}

.service-side ul li.current a:before {
	background:rgba(51,141,190,1.0);}

.service-side ul li ol li a:before,
.service-side ul li.current ol li a:before {
	background:#ccc;
	width:6px;
	height:6px;
	top:-2.5px;
}

.service-side ul li.current a:after {
	content:"";
	position:absolute;
	width:14px;
	height:14px;
	top:14.2px;
	left:-12.5px;
	border-radius:50%;
	border:rgba(51,141,190,1.0) 1.8px solid;
}
.service-side ul li ol li a:after {
	display:none;
}

.service-side ul li a:hover,
.service-side ul li ol li a:hover {
	color:#0055b4;
	color:rgba(51,141,190,0.8);
	left:5px;
}


@media screen and (max-width:1300px) {
.service-side ul li.title {
	width:80%;
	margin-left:20%;
	padding:0 0 15px 0;
	font-size:17px;
	letter-spacing:2px;
	font-weight:700;
	color: rgba(0,64,150,1.0);
}
.service-side ul li a {
width:75%;
margin-left:25%;
}
.service-side ul li ol li a {
width:calc( 75% - 0.8em );
margin-left:calc( 25% + 0.8em );
}
}

/*アンカー用*/
#waterworks::before {
    display: block;
    height: 5rem;
    margin-top: -5rem;
	content: "";
}
#waterworks02::before {
    display: block;
    height: 5rem;
    margin-top: -5rem;
	content: "";
}

#construct-flow::before {
    display: block;
    height:6rem;
    margin-top: -6rem;
	content: "";
}





/*　事業内容タイトル　*/
h2.service-title {
	color:#0055b4;
	font-size: 36px;
	letter-spacing:5px;
	margin:30px 0 0;
}

h2.service-title.long {
	font-size:33px;
	letter-spacing:2px;
}

h2.service-title span {
	color:rgba(51,141,190,0.6);
	font-size: 15px;
	letter-spacing:4px;
	padding-left:10px;
	position:relative;
	display:block;
	font-family: "Montserrat", sans-serif;
}
h2.service-title span:before {
	position:relative;
	display:inline-block;
	background:url("../images/h2-logo.svg");
	content:"";
	background-size: contain;
	background-repeat: no-repeat;
	width:33px;
	height:33px;
	left:-10px;
	top:8px;
}

@media only screen and (max-width:1100px){
h2.service-title {
	margin-left:20px;}
}

@media only screen and (max-width:820px){
h2.service-title {
	font-size:30px;
	text-align:center;
	margin-left:auto;
	letter-spacing:3px;
}
h2.service-title span {
	padding-left:0px;}
}

@media only screen and (max-width:767px){
h2.service-title {
	font-size:30px;
	line-height: 1.5;
}
h2.service-title span {
	margin-bottom:10px;
}

h2.service-title.long {
	font-size:26px;
	letter-spacing:1px;
}
}

@media only screen and (max-width:400px){
h2.service-title {
	font-size:26px;
}
h2.service-title.long {
	font-size:24px;
	letter-spacing:1px;
}
}


/*水まわり
------------------------------------------------*/
p.sub-txt { 
	font-size:16px;
	line-height:1.8;
	margin:30px 0 20px;
}

@media only screen and (max-width:400px){
p.sub-txt { 
	font-size:15px;}	
}

span.blue-dots {
	font-weight:800;
	display:inline-block;
	vertical-align:top;
	margin:-2px 0 4px 0;
	color:#0055b4;
	border-bottom:dotted 3px rgba(0,64,150,0.3);
}

h3.caution {
	text-align:center;
	color:#0055b4;
	border-top:8px solid rgba(51, 141, 190, 0.2);
	border-bottom:8px solid rgba(51, 141, 190, 0.2);
	font-size:24px;
	padding:0 0 8px;
	font-weight:800;
	margin:60px auto 40px;
	letter-spacing:2px;
	position:relative;
	display:block;
}

h3.caution:before {
	position:relative;
	display:inline-block;
	background:url("../images/service01/warning.svg");
	content:"";
	background-size: contain;
	background-repeat: no-repeat;
	width:40px;
	height:40px;
	top:10px;
	left:-0.5em;
	/*top:-55%;
  left:50%;
  transform: translate(-50%, -50%);*/
}

/*注意マークなし　水色タイトル*/
h3.light-blue {
	text-align:center;
	color:rgba(51, 141, 190, 1.00);
	border:8px solid rgba(51, 141, 190, 0.2);
	font-weight:800;
	margin: 50px auto 30px;
	letter-spacing:2px;
	position:relative;
	display:block;
	padding:10px 0 10px;
	font-size:22px;
}
h3.light-blue:before {
	display:none;
}

@media only screen and (max-width:840px){
h3.caution {
	padding:0 20px 8px;
	}
h3.light-blue {
	font-size:20px;
	padding:10px 20px 10px;
	line-height:1.5;
}
}


/*　青タイトル　*/
h3.blue {
	text-align:center;
	color:#0055b4;
	border-top:8px solid rgba(51, 141, 190, 0.15);
	border-bottom:8px solid rgba(51, 141, 190, 0.15);
	font-weight:800;
	margin: 50px auto 30px;
	letter-spacing:1px;
	position:relative;
	display:block;
	padding:10px 0 10px;
	font-size:22px;
}
h3.blue:before {
	display:none;
}

@media only screen and (max-width:840px){
h3.blue {
	font-size: 18px;
	padding: 10px 5px 10px;
	line-height:1.5;
	letter-spacing: 0.5px;
}
}


@media only screen and (max-width:460px){
h3.caution {
	text-align: center;
	color:rgba(51, 141, 190, 1.0);
	border:8px solid rgba(51, 141, 190, 0.1);
	font-size: 18px;
	padding: 10px 0 8px 0;
	font-weight:600;
	margin:50px auto 30px;
	letter-spacing:2px;
	position:relative;
	/* display:block; */
	font-family: "Montserrat", sans-serif;
}
h3.caution:before {
	top: -20%;
	left: calc( 50%);
	position: absolute;
	transform: translate(-50%, -50%);
}

h3.light-blue {
	font-size:18px;
	letter-spacing:0.8px;
	padding:10px 10px 10px;
}
}

@media only screen and (max-width:390px){
h3.light-blue {
	font-size:17px;
}
}


#waterworks ul.case {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:auto;
}

#waterworks ul.case li {
	width:calc( 33.333333333333333% - 40px );
	height: auto;
	color:rgba(0,64,150,1.0);
	font-size:22px;
	font-weight:600;
	aspect-ratio:2;
	line-height:1.4;
	margin:0 auto 0;
	padding:30px 0 0 10px;
	position:relative;
	overflow:hidden;
	border-radius:30px;
	text-align:center;
	background:rgba(51, 141, 190, 0.1);
}

#waterworks ul.case li img {
	position:absolute;
	width: 25%;
	bottom:20px;
	margin:auto;
	left:50%;
	transform: translateX(-50%);
}

#waterworks ul.case li:nth-of-type(1) img {
	width:30%;
	bottom:33px;
}

@media only screen and (max-width:1600px){
#waterworks ul.case li {
	aspect-ratio:1.8;
	font-size:20px;}
}

@media only screen and (max-width:1300px){
#waterworks ul.case li {
	aspect-ratio:1.7;
	font-size:20px;
}
#waterworks ul.case li img {
	bottom:20px;}
}

@media only screen and (max-width:1000px){
#waterworks ul.case {
	gap:10px;
}
#waterworks ul.case li {
	width:calc( 33.333333333333333% - 30px );
	aspect-ratio:1.7;
	padding:25px 0 0;
	font-size:18px;
}
#waterworks ul.case li img {
	bottom:20px;}
}

@media only screen and (max-width:820px){
#waterworks ul.case {
	gap:10px;
}
#waterworks ul.case li {
	width:calc( 33.333333333333333% - 20px );
	aspect-ratio:1.6;
	line-height:1.3;
	padding:20px 0 0;
	font-size:15px;
}
#waterworks ul.case li img {
	bottom:20px;}
}

@media only screen and (max-width:767px){
#waterworks ul.case {
	gap:20px;
}
#waterworks ul.case li {
	width:90%;
	aspect-ratio:3;
	line-height:1.3;
	padding:20px 0 0;
	font-size:20px;
}
#waterworks ul.case li img {
	bottom:12px;
	width:20%;
}
#waterworks ul.case li:nth-of-type(1) img {
	bottom:20px;
	width:25%;
}
}

@media only screen and (max-width:440px){
#waterworks ul.case li {
	aspect-ratio:2.4;
}
}

@media only screen and (max-width:400px){
#waterworks ul.case li {
	aspect-ratio:2.3;
}
#waterworks ul.case li img {
	bottom:12px;
	width:20%;
}
#waterworks ul.case li:nth-of-type(1) img {
	bottom:20px;
	width:30%;
}
}

.arrow-below {
	position: relative;
	color:#555;
	text-align:center;
	margin:60px auto 120px;
	font-weight:600;
	font-size:22px;
}

.arrow-below span {
	font-size:24px;
	display:inline-block;
	vertical-align:middle;
	margin-bottom:8px;
}

.arrow-below:before {
	content:"";
	position:absolute;
	width: 1.5em;
	height: 1.5em;
	border-bottom: 0.5em solid rgba(0,64,150,0.8);
	border-right: 0.5em solid rgba(0,64,150,0.8);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	left: calc(50% - 0.75em);
	bottom:-3em;
}

@media only screen and (max-width:767px){
.arrow-below {
	font-size:18px;

	line-height:1.5;
}
}

/*施工事例の写真 3枚
---------------------------------------------*/
ul.sample {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:0 auto 0;
}

ul.sample li {
	width:calc( 33.333333333333333% - 30px );
	margin:0 auto 0;
	padding:0;
	position:relative;
	text-align:center;
}

ul.sample li img {
	position: relative;
	width: 100%;
}

@media only screen and (max-width:767px){
ul.sample li {
	width:calc( 100% - 30px );}
}

/*施工事例の写真　2枚*/
ul.sample02 {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:0 auto 0;
}

ul.sample02 li {
	width:calc( 50% - 30px );
	margin:0 auto 0;
	padding:0;
	position:relative;
	text-align:center;
}

ul.sample02 li img {
	position: relative;
	width: 100%;
}

@media only screen and (max-width:767px){
ul.sample02 li {
	width:calc( 100% - 30px );}
}

/*施工事例の写真 1枚と下2枚*/
ul.sample03 {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:0 auto 0;
}
ul.sample03 li:nth-of-type(1) {
width:calc( 100% - 15px);
margin:0 auto 0;
padding:0;
position:relative;
text-align:center;
}

ul.sample03 li:nth-of-type(2),
ul.sample03 li:nth-of-type(3) {
width:calc( 50% - 30px );
margin:0 auto 0;
padding:0;
position:relative;
text-align:center;
}

ul.sample03 li img {
	position: relative;
	width:100%;
}

@media only screen and (max-width:767px){
ul.sample03 li {
	width:calc( 100% - 30px );}
}

/*施工事例の写真 4枚
---------------------------------------------*/
ul.sample04 {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:20px;
	width:100%;
	margin:0 auto 0;
}

ul.sample04 li {
	width:calc( 25% - 20px );
	margin:0 auto 0;
	padding:0;
	position:relative;
	text-align:center;
}

ul.sample04 li img {
	position: relative;
	width: 100%;
}

@media only screen and (max-width:840px){
ul.sample04 li {
	width:calc( 50% - 20px );}
}

@media only screen and (max-width:767px){
ul.sample04 li {
	width:93%;}
}




/*施工事例の写真と説明
---------------------------左写真*/
ul.sample-txt-left {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:0 auto 0;
}

ul.sample-txt-left li.img-box {
	width:50%;
	margin:0 auto 0;
	padding:0;
	position:relative;
	text-align:center;
}

ul.sample-txt-left li.txt-box {
	width:calc( 45% - 5% );
	text-align:left;
	font-size:16px;
	line-height:2;
}

ul.sample-txt-left li img {
	position: relative;
	min-width:100%;
}

@media only screen and (max-width:840px){
ul.sample-txt-left {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:20px;
	width:100%;
	margin:0 auto 0;
}
ul.sample-txt-left li.img-box {
	width:45%;
	margin:0 auto 0;
	padding:0;
	position:relative;
	text-align:center;
}

ul.sample-txt-left li.txt-box {
	width:40%;
	margin:0 5% 0 0;
	text-align:left;
	font-size:16px;
	line-height:2;
}
}

@media only screen and (max-width:767px){
ul.sample-txt-left {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap: 0 20px;
	width:100%;
	margin:0 auto 0;
}
ul.sample-txt-left li.img-box {
	width:100%;
	margin:0 auto 0;
	padding:0;
	position:relative;
	text-align:center;
}

ul.sample-txt-left li.txt-box {
	width:100%;
	margin:0 auto 0;
	text-align:left;
	font-size:15px;
	line-height:2;}
}

/*施工事例の写真と説明
---------------------------右写真*/
ul.sample-txt-right {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:0 auto 0;
}

ul.sample-txt-right li.img-box {
	width:50%;
	margin:0 auto 0;
	padding:0;
}

ul.sample-txt-right li.txt-box {
	width:40%;
	margin:0 0 0 5%;
	text-align:left;
	font-size:16px;
	line-height:2;
}

ul.sample-txt-right li img {
	position: relative;
	min-width:100%;
}

@media only screen and (max-width:840px){
ul.sample-txt-right {
	gap:20px;
	width:100%;
	margin:0 auto 0;
}
ul.sample-txt-right li.img-box {
	width:45%;
	margin:0 auto 0;
}

ul.sample-txt-right li.txt-box {
	width:40%;
	margin:0 0 0 5%;
	text-align:left;
	font-size:16px;
	line-height:2;
}
}

@media only screen and (max-width:767px){
ul.sample-txt-right {
	display:flex;
	flex-direction:column;
	flex-direction: column-reverse;
	position:relative;
	gap:0 20px;
	width:100%;
	margin:0 auto 0;
}
ul.sample-txt-right li.img-box {
	width:100%;
	margin:0 auto 0;
	padding:0;
	position:relative;
	text-align:center;
}

ul.sample-txt-right li.txt-box {
	width:100%;
	margin:0 auto 0;
	text-align:left;
	font-size:15px;
	line-height:2;
}
}


/*メリット*/
.merit {
	margin:70px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap:0 20px;
}

.merit li {
	position: relative;
	margin:0 auto;
	width: calc( 33.333% - 80px);
	padding: 0 30px 40px;
	background: rgba(255,255,255,0.6);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
	border-top:8px solid rgba(51, 141, 190, 0.2);
}

.merit p.num::before {
	position: absolute;
	margin:auto;
	text-align:center;
	left:calc( 50% - 4em);
	top:-20px;
	width:8em;
	color: rgba(51, 141, 190, 1.0);
	content:"＼ メリット ／";
	font-size:12px;
	font-family:'Noto Sans JP';
}

.merit p.num {
	position:absolute;
	font-weight:600;
	font-size:30px;
	line-height: 1.6;
	border-radius:50%;
	width:20px;
	padding:0 15px;
	background-color:#0055b4;
	color:#fff;
	font-family: 'Roboto Condensed', sans-serif;
	top:5%;
	left:50%;
	transform: translate(-50%, -50%);
}

ul.merit h3 {
	margin:50px auto 20px;
	font-size:26px;
	text-align:center;
	font-weight: 700;
	line-height: 1.4;
	color: #0055b4;
}

.merit .lead p {
	font-size:16px;
	font-weight:600;
	color: #444;
	line-height:1.7;
}

@media only screen and (max-width:940px){
.merit li {
	padding: 0 30px 30px;
}	
}

@media only screen and (max-width: 820px){
.merit {
	gap:0 15px;
}
.merit li {
	width: calc( 33.333% - 50px);
	padding: 0 15px 25px;
}	
ul.merit h3 {
	margin:40px auto 10px;
	font-size:22px;
}
.merit .lead p {
	font-size:14px;}
}

@media only screen and (max-width: 767px){
ul.merit { 
	width:90%;
	margin:50px auto 0;
}
	
ul.merit h3 {
	font-size:24px;
	margin:40px auto 10px;
}

.merit li {
	width: calc( 100% - 30px );
	margin-bottom:50px;
	padding: 0 20px 25px 25px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px;
}
.merit p.num {
	position:absolute;
	font-weight:600;
	font-size:24px;
	line-height: 1.6;
	text-align:center;
	border-radius:50%;
	width:20px;
	padding:0 10px;
	background-color:#0055b4;
	color:#fff;
	font-family: 'Roboto Condensed', sans-serif;
	top:5%;
	left:50%;
	transform: translate(-50%, -50%);
}

.merit .lead p {
	font-size:15px;
	font-weight:500;
}
}

/* お問合せボタンのスタイル */
.btn-contact {
    margin:20px auto 30px;
    display:block;
    font-weight: 600;
    color: #fff;
    letter-spacing:2.5px;
    text-align: center;
    background:#0055b4;
    border-radius: 60px;
    padding:13px 5px 15px 0;
    width:300px;
    position: relative;
    transition: .3s ease-in-out;
}
.btn-contact a {
text-decoration:none;
}

.btn-contact:hover {
 background:#13337a;
 text-decoration:none;
 color:#fff;
}
.btn-contact::before,
.btn-contact::after {
  position: absolute;
  content: '';
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.btn-contact::before {

width:20px;
height:20px;
border-radius:50%;
background:#fff;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
right:17px;
top: 50%;
}

.btn-contact::after {
  width:5px;
  height:5px;
  border: 0.13em solid #0055b4;
  border-left: 0;
  border-bottom: 0;
  right:23px;
  top:42%;
  transform: translateX(-10%) rotate(135deg);
}

.btn-contact:hover::before {
top:56%;
}
.btn-contact:hover::after {
top:48%;
}



/*対応工事等、カテゴリー*/

.service-category {
	margin:30px 0 50px;
	display: flex;
	flex-wrap: wrap;
	row-gap:15px;
	justify-content: flex-start;
}

.service-category li {
	position: relative;
	margin-right:20px;
	text-align:center;
	color:#0055b4;
	font-weight:500;
	font-size:15px;
	width:auto;
	padding:5px 20px 5px;
	background: rgba(51, 141, 190, 0.1);
	border-radius:60px;	
}

.service-category li:first-child {
width:100%;
font-size:16px;
padding:0 10px 0px 0px;
text-align:left;
font-weight:700;
background:none;
}

@media only screen and (max-width:767px){
.service-category {
	row-gap:8px;
}
.service-category li:first-child {
padding:0 10px 0px 10px;
}
.service-category li {
	position: relative;

	margin-right:10px;
	padding:3px 20px 3px;
	font-size:14px;
}
}

/* 工事の流れ
------------------------------------*/
.construct-flow {
	margin: 80px auto 30px;
}
.construct-flow dl {
	margin: 62px 0 0 70px;
}
.construct-flow dl > div {
	position: relative;
	display: -webkit-box;
	display: flex;
	padding-bottom: 60px;
}

.construct-flow dl > div:before {
	height: calc(100% - 56px) !important;
}

.construct-flow dt {
	position: relative;
	width: 200px;
	min-width: 200px;
	/* padding-top: 7px; */
	color:rgba(0,64,150,1.0);
}


.construct-flow dt strong {
	display: block;
	font-size:20px;
	letter-spacing:2px;
}

.construct-flow dd p {
	font-size: 16px;
	margin: 4px 0 0;
	font-weight: 500;
}

.construct-flow dt span {
	display: block;
	position: absolute;
	font-weight:600;
	top: -1px;
	left: -62px;
	box-sizing: border-box;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	padding: 2px 0 0 1px;
	font-size: 19px;
	text-align: center;
	background: rgba(51, 141, 190, 0.1);
}

.construct-flow dl > div:before {
	display: block;
	content: '';
	position: absolute;
	top: 48px;
	border-left:2px dotted rgba(0,64,150,1.0);
	left: -40px;
	width:3px;
	height: calc(100% - 60px);
}

.construct-flow dl > div.last:before {
	display:none;
}

@media only screen and (max-width:840px){
.construct-flow {
	margin:40px auto 30px;
}
.construct-flow dl > div {
	position: relative;
	display: -webkit-box;
	display: flex;
	width:80%;
	margin:0 auto;
	padding-bottom: 60px;
	flex-wrap:wrap;
}
.construct-flow dt {
	width:100%;
}
.construct-flow dd {
	width:100%;
}
}

.construct-flow-box {
	background:rgba(51, 141, 190, 0.1);
}
.construct-flow-box p {
	padding:20px 0;
	text-align:center;
	font-size:18px;
}
@media only screen and (max-width:767px){
.construct-flow-box p {
	padding:20px 20px;
	text-align:left;
}
}


/*　ポンプ販売
--------------------------------------------*/
.pump-copy {
	color:#444;
	font-size:30px;
	margin:80px auto;
	line-height:2;
	text-align:center;
	letter-spacing:5px;
	padding: 0 0 0 12px;
}

@media only screen and (max-width:840px){
.pump-copy {
	letter-spacing:3px;
}	
}

@media only screen and (max-width: 767px){
.pump-copy {
	font-size: 25px;
	line-height:1.6;
	letter-spacing:1px;
	padding:0 0 0 10px;
}
}

@media only screen and (max-width:391px){
.pump-copy {
	font-size: 22px;
	line-height:1.6;
	padding:0 0 0 10px;
	}
}


/************************************
** アイコンフキダシボックス(ブルー)
************************************/
/* ボックス全体 */
	
ul.pump-copy-list {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	clear:both;
	margin: 50px auto 0px;
}

ul.pump-copy-list li {
	width:calc( 50% - 40px );
	padding:0 0;
	margin:auto;
	background:rgba(51,141,190,0.05)!important;
	/* 背景色 */
}

ul.pump-copy-list li h2 {
	border:2px #0055b4 solid;
	background:#fff;
	color:#0055b4;
	width:90%;
	margin:20px auto 0;
	border-radius:30px;
	font-size:18px;
	text-align:center;
}

ul.pump-copy-list li p {
	padding:20px 30px;
	font-size:18px;
}

ul.pump-copy-list li ol {
	background:none;
	margin:20px auto;
	width:84%;
	list-style: none;
	clear:both;
	gap:5px 15px;
	display:flex;
	flex-wrap:wrap;
	position:relative;
}

ul.pump-copy-list li ol li {
	width:calc( 50% - 15px );
	background:none!important;
	color:#0055b4;
	font-weight:600;
	font-size:16px;
}

ul.pump-copy-list li ol li:last-child {
	width: calc(100% - 7.5px);
}
ul.pump-copy-list li ol li:before{
  display:inline-block;
  vertical-align: middle;
  content:'';
  width:8px;
  height:8px;
  background:#0055b4;
  border-radius: 50%;
  margin:0 4px 3px 0px;
}

@media only screen and (max-width:840px){
ul.pump-copy-list {
	gap:20px;
}
ul.pump-copy-list li {
	width:calc( 50% - 20px );
}
ul.pump-copy-list li ol li:last-child {
    width: calc(100% - 5px);
}
ul.pump-copy-list li ol {
	width:85%;
	gap:2px 20px;
	margin:15px auto 20px;
}
}

@media only screen and (max-width:767px){
ul.pump-copy-list {
	gap:20px;
}
ul.pump-copy-list li {
	width:100%;
}
ul.pump-copy-list li ol {
	width:90%;
	gap:2px 20px;
	margin:15px auto 15px;
}
}

ul.pump-copy-list-important {
	display:flex;
	flex-wrap:
		wrap;
	position:relative;
	gap:10px 0;
	width:90%;
	clear:both;
	margin:30px auto 30px;
}

ul.pump-copy-list-important li {
	width:100%;
	font-weight:600;
	font-size:18px;
}

ul.pump-copy-list-important li:before{
  display:inline-block;
  vertical-align: middle;
  content:'';
  width:12px;
  height:12px;
  background:#0055b4;
  border-radius: 50%;
  margin:0 5px 3px 0px;
}

p.pump-exp {
	margin:30px auto 0;
	width: calc( 98% - 80px );
	line-height:2;
	font-size: 16.5px;
	border: rgba(51,141,190,0.05) 10px solid;
	padding:20px 30px;
}

.pump-title {
	color:#0055b4;
	font-size:30px;
	text-align: left;
	margin: 0 0 10px 0;
	line-height:1.5;
	padding:0 0 0 28px;
	position:relative;
}

.pump-title:after {
content:"";
position:absolute;
font-size:30px;
padding:0;
top:20px;
left:5px;
background:#0055b4;
border-radius:50%;
width:12px;
height:12px;
/*border-left:5px solid #0055b4;*/
}

.pump-title span {
	font-size:80%;
	display:block;
}

@media only screen and (max-width:840px){
p.pump-exp {
	margin:30px auto 0;
	width: calc( 98% - 55px );
	line-height:1.8;
	font-size:15px;
	padding:20px;
}
.pump-title {
	color:#0055b4;
	font-size:26px;
	text-align: left;
	margin: 0 0 10px 0;
	line-height:1.5;
	padding:0 0 0 28px;
	position:relative;
}
}

/*　ポンプ販売　タイトル左　*/
.pump_left {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:0 auto 0;
	/*align-items: flex-end;*/
}

.pump_left div:nth-of-type(1) {
	width:calc( 60% - 30px );
	margin:0 auto 0;
	padding:0;
}

.pump_left div:nth-of-type(2) {
	width:calc( 40% - 30px );
	margin:0 auto 0;
	padding:0;
}

@media only screen and (max-width:767px){
.pump_left {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:0 auto 0;
	/*align-items: flex-end;*/
}

.pump_left div:nth-of-type(1) {
	width:100%;
	margin:0 auto 0;
	padding:0;
}

.pump_left div:nth-of-type(2) {
	width:100%;
	margin:0 auto 0;
	padding:0;
}
}



/*　ポンプ販売　タイトル右　*/
.pump_right {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:0 auto 0;
	align-items:flex-start;
	/*align-items: flex-end;*/
}

.pump_right div:nth-of-type(1) {
	width:calc( 60% - 30px );
	margin:0 auto 0;
	padding:0;
}

.pump_right div:nth-of-type(2) {
	width:calc( 40% - 30px );
	margin:0 auto 0;
	padding:0;
}

@media only screen and (max-width:820px){
.pump_right div:nth-of-type(1) {
	width:calc( 50% - 30px );
	margin:0 auto 0;
	padding:0;
}

.pump_right div:nth-of-type(2) {
	width:calc( 50% - 30px );
	margin:0 auto 0;
	padding:0;
}	
}

@media only screen and (max-width:767px){
.pump_right {
	flex-direction:column;
	flex-direction: column-reverse;
}
.pump_right div:nth-of-type(1) {
	width:100%;
	margin:0 auto 0;
	padding:0;
}

.pump_right div:nth-of-type(2) {
	width:100%;
	margin:0 auto 0;
	padding:0;
}	
}

/*各種配管工事
-----------------------------------------*/
.piping {
	display: flex;
	flex-wrap: wrap;
	margin:50px 0 0;
}
.piping li {
	position:relative;
	margin:20px auto;
	width:100%;
	padding:0 0 15px;
	/*border-top:3px solid rgba(0,64,150,1.0);*/
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

.piping li::before {
	content: "";
	position:absolute;
	top:0;
	left:0;
	width:150px;
	height:5px;
	background:rgba(0,64,150,1.0);
}

.piping li div.piping-inner {
	margin:40px 0 30px;
	display: flex;
	flex-wrap: wrap;
	gap:30px;
}

.piping li div.piping-inner h3 {
	margin:0 0 0 30px;
	width:calc( 40% - 30px );
}
.piping li div.piping-inner p {
	width:calc( 60% - 30px );
	display: flex;
	flex-wrap: wrap;
	gap:15px;
	margin:auto;
	text-align:center;
}

/*.piping li div.piping-inner p.center {
justify-content:center;
}
*/
.piping li div.piping-inner p img {
	width:calc( 50% - 20px );
}

.piping li div.piping-inner p.before-after {
	position:relative;
}

.piping li div.piping-inner p.before-after::before{
	position:absolute;
	content:"BEFORE";
	color:#fff;
	font-size:15px;
	padding:0px 7px;
	top: 0;
	left:0px;
	background-color:rgba(51,141,190,1.0);
}
.piping li div.piping-inner p.before-after::after{
	position:absolute;
	content:"AFTER";
	color:#fff;
	font-size:15px;
	top: 0px;
	right:25px;
	padding:0px 7px;
	background-color:rgba(51,141,190,1.0);
}

.piping h3.ttl {
	font-size:26px;
	font-weight:700;
	line-height: 1.4;
	color: #0055b4;
}

.piping h3.ttl span {
	font-size:80%;
}

@media only screen and (max-width:820px){
.piping li div.piping-inner p.before-after::before{
	font-size:13px;
}
.piping li div.piping-inner p.before-after::after{
	font-size:13px;
}
}


@media only screen and (max-width:767px){
.piping li div.piping-inner h3 {
	margin:0 0 0 30px;
	width:100%;
}
.piping li div.piping-inner p {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	gap:15px;
	margin:auto;
	text-align:center;
	justify-content:center;
}
.piping li div.piping-inner p img {
	width:44%;
}
.piping h3.ttl {
	font-size:24px;
}
.piping li div.piping-inner p.before-after::before{
	font-size:12px;
	left:16px;
}
.piping li div.piping-inner p.before-after::after{
	font-size:12px;
	top: 0px;
	right: 16px;
}
}