@charset "UTF-8";

.content {
	margin-bottom: 80px;
}

.content-wrap {
	background-color: #dfeff7;
}

.bgwhite {
	background-color: #fff;
	padding: 5% 2%;
	margin-bottom: 3.0rem;
}

/*******************

対応エリア

********************/

.area .line {
	color: #019fe6;
	font-size: 1.8rem;
	border-bottom: 3px solid #019fe6;
	padding-bottom: 5px;
}

.area .line::before {
	content: 'ー ';
}

.area .underspace {
	margin-bottom: 80px;
}

.area .city {
	padding: 10px;
	font-size: 1.6rem;
	margin-bottom: 20px;
}

.area ul.citylist {
	background-color: #fff;
	padding: 2.0rem 1.0rem;

}

.area .city li {
	float: left;
	padding: 5px;
	width: 16.6%;
}

.area .city li.ng {
	color: #cccccc;
}

.area .content .large {
	font-size: 3.0rem;
	color: #0162e6;
	margin-bottom: 2.0rem;
}

.area .content .textL {
	float: left;
	width: 50%;
}

.area .waiting {
	text-align: center;
	width: 90%;
	margin: 10px auto;
}

.area .waiting figcaption {
	margin-top: 1.5rem;
}

.area .content .imgR {
	float: right;
	width: 45%;
	margin-top: 10%;
}

.area .content figcaption {
	padding-top: 1em;
	text-align: center;
	line-height: 1.4em;
	font-size: 2rem;
}

.area .areabtn li {
	float: left;
	width: 50%;
	text-align: center;
	padding: 1%;
	margin-top: 20px;
}

.area .areabtn img {
	width: 100%;
	max-width: 468px;
}

.area p {
	margin-bottom: 1.5em;
}

.area .examples h4 {
	font-size: 1.6rem;
	padding: 1rem 0;
	font-weight: bold;
}

.area .examples h4:before {
	content: '◎';
	color: #0162e6;
}

.area .photoframe {
	width: 100%;
}

.area .areatitle {
	font-size: 2em;
	border-left: solid 7px #019fe6;
	padding-left: 0.5em;
	margin: 1em 1em 0.5em;
}

.content.area {
	margin-bottom: 50px;
}

.area .flex.shitei {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 50px;
}

.area .flex.shitei figure {
	width: 24%;
	text-align: center;
}

.area .flex.shitei figure img {
	width: 100%;
	box-shadow: 0 2px 4px 0 #ccc;
}

.area .flex.shitei figcaption {
	margin: 0.5em;
	font-size: 1em;
}

.area .area_name_title {
	font-size: 2.5rem;
	border-left: 5px solid #019fe6;
	padding-left: 0.5em;
	margin-bottom: 0;
	font-weight: normal;
}

.area .area_name_title:before {
	content: '';
}

/*
※※※※※※※※※※※※※※※※

水道局

※※※※※※※※※※※※※※※※
*/

.suidoukyoku {
	border-top: 5px double #007fcc;
	padding: 50px 0 50px;
	background-color: #dfeff7;
}

.suidoukyoku .content {
	margin-bottom: 0;
}

.suidoukyoku p {
	margin-bottom: 50px;
}

.suidoukyoku table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
}

.suidoukyoku table tr>* {
	line-height: 1.5em;
	padding: 1em;
	border: 2px solid inherit;
	vertical-align: middle;
}

.suidoukyoku th {
	width: 30%;
	color: #fff;
	background-color: #007fcc;
}

.suidoukyoku td {
	background-color: #f6f6f6;
	color: #000;
}

/*
※※※※※※※※※※※※※※※※

指定証

※※※※※※※※※※※※※※※※
*/
.certification .warn {
	border-top: 5px solid #000;
	border-bottom: 5px solid #000;
	line-height: 2em;
	width: 95%;
	margin: 0 auto 2em;
	font-size: 2rem;
	text-align: center;
	font-weight: bold;
	padding-bottom: 20px;
	position: relative;

}

.certification .warn .head {
	color: #fff;
	background-color: #BD2632;
	font-size: 3rem;
	text-align: center;
	text-indent: 2em;
	padding: 0.5em 0;
	margin-bottom: 20px;
	background-image: url('../img/icon_warn.png');
	background-repeat: no-repeat;
	background-position: calc(50% - 4.5em) center;
	background-size: 40px auto;
}

.certification .warn::before {
	position: absolute;
	left: 20px;
	bottom: 0;
	content: '';
	display: block;
	width: 10vw;
	height: 16vw;
	max-width: 100px;
	background-image: url(../img/warn_police.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;
}


.certification .flex {
	display: flex;
}

.certification .flex>div {
	width: 50%;
}

.certification .flex .image_area img {
	width: 85%;
	margin: 0 auto;
	display: block;
	box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.4);
}

.certification .certification_info {
	border: 3px solid #019fe6;
	text-align: center;
}

.certification .certification_info p {
	margin-bottom: 0;
	padding: 0.5em;
}

.certification .certification_title {
	background-color: #019fe6;
	color: #fff;
}

.certification .group {
	background-color: #fff;
	font-size: 2rem;
}

.certification .number {
	background-color: #dfeff7;
	font-size: 2.3rem;
}


/*******************

運営会社

********************/

.company table {
	width: 100%;

	margin: 0 auto;
}

.company th {
	background-color: #dfeff7;
	width: 30%;
	padding: 15px 10px;
	vertical-align: middle;
	border: 1px solid #ccc;
}

.company td {
	background-color: #FFF;
	height: 70%;
	padding: 15px 10px;
	border: 1px solid #ccc;
}

.company dt {
	padding-bottom: 10px;
}

.company dd {
	padding-left: 30px;
	margin-bottom: 20px;
	line-height: 1.2em;
}

.company li {
	line-height: 1.3em;
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 20px;
}

.company p {
	margin-bottom: 1.4rem;
}

.company .sign {
	text-align: right;
	font-family: "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "ＭＳ Ｐ明朝", "MS PMincho", Meiryo, serif;
	font-size: 2.0rem;
	font-weight: bold;
}

.company .profile {
	float: left;
	width: 400px;
	padding-right: 30px;
}

/*******************

水道局指定工事店とは

********************/

.designation .prefecture {
	/*共通化可能*/
	color: #019fe6;
	font-size: 1.6rem;
	border-bottom: 3px solid #019fe6;
	padding-bottom: 5px;
}

.designation table {
	width: 100%;
	margin: 20px 0 50px;
}

.designation tr {
	line-height: 20px;
}

.designation tr:nth-child(even) {
	background-color: #fafafa;
}

.designation tr:nth-child(odd) {
	background-color: #dfeff7;
}

.designation td {

	border: 3px solid #FFF;
}


.designation dt,
.designation dd {
	display: inline-block;
	padding: 5px 10px;
}

.designation dt {
	padding-right: 20px;
}

.designation td {
	width: 33%;
}

.designation p {
	margin-bottom: 1.3rem;
}

.designation .prefecture-data {
	padding: 20px 0;
}

.designation .red-check {
	padding: 20px;
	border: 2px dashed #019fe6;
	margin-bottom: 1.3rem;
	background-color: #dfeff7;
}

.designation .red-check li {
	background-image: url(../img/check_red.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 20px;
	padding-left: 25px;
	padding-top: 15px;
	height: 40px;
	font-size: 1.6rem;
}

.designation .certification {
	float: right;
	width: 33%;
	margin-right: 1%;
}

.designation .shorui p {
	line-height: 2.5rem;
}

.designation .certification img {
	width: 100%;
	box-shadow: 10px 10px 15px -10px;
}

.designation .certification-text {
	float: left;
	width: 65%;
}

.designation .certification figcaption {
	text-align: center;
	padding-top: 1.0rem;
}



/*******************

よくある質問

********************/

.faq .question-list {
	background-color: #fff;
	width: 100%;
	margin: 0 auto 100px;
	padding: 40px;
}

.faq .question-list li {
	border-top: 1px dashed #000;
	padding: 20px 20px;
	line-height: 1.5rem;
}

.faq .question-list li::before {
	content: 'Q. ';
	font-size: 2.5rem;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
	color: #0162e6;
}

.faq .question-list li:last-child {
	border-bottom: 1px dashed #000;
}

.faq .qa-list {
	width: 100%;
	margin: 0 auto;
}

.faq .qa-list dt {
	background-color: #0162e6;
	color: #FFF;
	height: 50px;
	padding: 10px 60px;
}

.faq .qa-list dt::before {
	content: 'Q. ';
	font-size: 2.5rem;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
	color: #ffffff;
}

.faq .qa-list dd {
	background-color: #ffffff;
	padding: 30px 60px;
	margin-bottom: 30px;

}

.faq .qa-list dd::before {
	content: 'A. ';
	font-size: 2.5rem;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
	color: #0162e6;
}

.faq .qa-list p {
	padding-left: 2.8rem;
	margin-bottom: 1.3rem;
}

.faq .qa-list p:first-child {
	margin-top: 10px;
}

.faq .qa-list ul {
	padding: 2rem 4rem;
}

.faq .qa-list li {
	list-style-type: disc;
	line-height: 2.0rem;
	list-style-position: inside;
}

.faq .qa-list .credit {
	display: block;
	max-width: 300px;
	width: 100%;
	margin-left: 2.8rem;
	margin-bottom: 2rem;
}

.makerlogo {
	width: 100%;
	max-width: 750px;
}

.makerlogo img {
	width: 100%;
	display: block;
	margin: 10px auto;
}


/*******************

サービス・料金

********************/
.service .introduction img {
	float: left;
	width: 40%;
	padding: 0 15px 10px 0;
}

.service .introduction h4 {
	color: #019fe6;
	font-size: 2.0rem;
	padding: 20px 0 15px;

}

.service .introduction h4.first {
	padding: 0 0 15px;
}




.service table {
	width: 100%;
}

.service tr {
	line-height: 1.6rem;
}

.service tr:nth-child(even) {
	background-color: #fafafa;
}

.service tr:nth-child(odd) {
	background-color: #dfeff7;
}

.service th {
	background-color: #019fe6;
	color: #fff;
	text-align: center;
	padding: 10px;
	border: 2px solid #ffffff;
}

.service td {
	padding: 10px;
	border: 2px solid #ffffff;
	vertical-align: middle;
}

.service .flexbox-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

.service .service-icon {
	background-color: #dfeff7;
	padding: 2% 0;
}

.service .service-icon .icon {
	text-align: center;
}

.service .service-icon .icon img {
	width: 100%;
	max-width: 250px;
	margin-bottom: 10%;
}

.service .service-icon li {
	width: 33.3%;
	padding: 0 3%;
	border-right: 1px solid #fff;
}

.service .service-icon li:nth-child(3) {
	border-right: none;
}

.service .servicetable .price {
	width: 60%;
}

.service .servicetable .price,
.service .servicetable .time {
	width: 20%;
}

.service .service-icon .text {
	text-align: left;
}

.service .maker img {
	float: left;
	width: 50%;
	display: block;
}

.service .maker .text {
	float: right;
	width: 50%;
}

.service .maker .othermaker {
	padding-top: 5rem;
	clear: both;
}

.service .pricetxt {
	margin-bottom: 20px;
}

.service .price0 {
	text-align: center;
	margin-bottom: 20px;
}

.service .price0 img {
	width: 100%;
	max-width: 882px;
}

.service .pricestyle {
	text-align: center;
	margin-bottom: 20px;
}

.service .pricestyle img {
	width: 100%;
	max-width: 882px;
}

.service .word {
	font-size: 2.0rem;
	color: #019fe6;
	padding: 20px 0 5px;
}

.service .word:before {
	content: '●';
}

.service .everreform {
	width: 80%;
	max-width: 400px;
	margin: 3em auto 0;
}

.service .everreform img {
	width: 100%;
	border: 3px solid #ccc;
	border-radius: 5px;
	transition: .2s;
}

.service .everreform:hover img {
	border: 3px solid #e68801;
}

/*******************

サービスの流れ

********************/

.flow ul.scheme {
	max-width: 1200px;
	width: 100%;
}

.flow ul.scheme li {
	float: left;
	width: 20%;
	position: relative;
}

.flow .number {
	position: relative;
	top: -50px;
}

.flow dt {
	height: 100px;
	color: #FFF;
	font-size: 1.8rem;
	padding: 30px 15px;
	vertical-align: middle;
	line-height: 38px;
}

.flow dt.blue {
	background-color: #0162e6;
	background-image: url(../img/section_flow_parts_water.png);
	background-position: left;
	background-repeat: no-repeat;
}

.flow dt.water {
	background-color: #019fe6;
	background-image: url(../img/section_flow_parts_blue.png);
	background-position: left;
	background-repeat: no-repeat;
}

.flow ul.scheme li.one dt {
	background-image: none;
}

.flow dd {
	padding: 30px 20px;
}

.flow .step {
	margin-bottom: 50px;
}

.flow .step h4 {
	font-size: 2.4rem;
	border-bottom: 2px solid #0162e6;
	height: 60px;
	padding-left: 80px;
	background-position: left center;
	background-repeat: no-repeat;
	margin-bottom: 40px;
	width: 100%;
}

.flow .step h4 span {
	height: 60px;
	line-height: 20px;
	display: table-cell;
	vertical-align: middle;
	font-family: "Sawarabi Gothic";
}

.flow .step1 h4 {
	background-image: url(../img/step1.jpg);
}

.flow .step2 h4 {
	background-image: url(../img/step2.jpg);
}

.flow .step3 h4 {
	background-image: url(../img/step3.jpg);
}

.flow .step4 h4 {
	background-image: url(../img/step4.jpg);
}

.flow .step5 h4 {
	background-image: url(../img/step5.jpg);
}

.flow .text {
	float: left;
	width: 60%;
	padding: 0 1rem;
}

.flow .text p {
	margin-bottom: 1.3rem;
}

.flow .image {
	float: right;
	width: 40%;
	text-align: right;

}

.flow .image img {
	width: 100%;
}

.flow ul.dashedlist {
	border: 2px dashed #019fe6;
	background-color: #dfeff7;
	padding: 20px 10px;
	margin: 20px 10px;
}

.flow ul.dashedlist li {
	text-align: left;
	list-style-type: none;
	line-height: 2.0rem;
	padding-left: 2.3rem;
	text-indent: -1.3rem;
}

.flow ul.dashedlist li:before {
	content: '● ';
	color: #019fe6;
}

.flow .step_wrap {
	background-color: #FFF;
	padding: 10px;
}

.flow .credit {
	width: 300px;
	height: auto;
	margin-bottom: 1.3rem;
}

/*******************

お客様の声

********************/

.voice .voices {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.voice .voices div {
	width: 45%;
	background-color: #FFF;
	border: 2px dashed #019fe6;
	padding: 2%;
	outline: 5px solid #ffffff;
	margin-bottom: 40px;
}

.voice .voices img {
	display: block;
	margin: 0 auto 10px;
	width: 100%;
}

.voice .voices p {
	margin: 0 auto 1.3rem;
}

.voice .name {
	text-align: right;
}


/*******************

選ばれる理由

********************/

.reason .reasonbox {
	margin-bottom: 100px;
}

.reason .text {
	float: left;
	width: 53%;
}

.reason .text p {
	margin-bottom: 1.4rem;
}

.reason .text img {
	width: 100%;
	max-width: 520px;
	margin-bottom: 3.0rem;
}

.reason .img {
	float: right;
	width: 45%;
	text-align: right;
}

.reason .img img {
	width: 95%;
	padding-top: 50px;
}

.reason .shikaku {
	border: 2px dashed #019fe6;
	background-color: #dfeff7;
	padding: 20px 10px;
	margin: 20px 10px;
}

.reason .shikaku .title {
	font-weight: bold;
	border-bottom: 2px solid #000;
}

.reason .shikaku li {
	float: left;
	width: 50%;
}

.reason .shikaku li:after {
	content: '／';
}

/*******************

お問い合わせフォーム

********************/
.contact .netprice {
	margin-bottom: 50px;
}

.contact .netprice .banner {
	float: left;
	width: 50%;
}

.contact .netprice img {
	width: 100%;
}

.contact .netprice .text {
	float: left;
	width: 50%;
	padding: 0 0 0 2rem;
}

.contact .netprice p {
	margin-bottom: 1.3rem;
}

.contact .netprice .attention li {
	font-size: 1.2rem;
	line-height: 1.1;
	text-indent: -1.3rem;
	padding-left: 1rem;
}

.contact .netprice .attention li:before {
	content: "※ ";
	font-size: 1.5rem;
}

.contact .isogi {
	font-size: 2.0rem;
	text-align: center;
	margin-bottom: 50px;
	line-height: 4.0rem;
}

.contact .isogi span,
.contact .isogi a {
	font-size: 4.0rem;
	color: #e68801;
}

.contact table {
	width: 100%;
	margin-bottom: 20px;
}

.contact table th {
	background-color: #dfeff7;
	width: 30%;
	color: #000;
	border: 1px solid #ccc;
	padding: 10px 20px;
	font-weight: normal;
	vertical-align: middle;
}

.contact table td {
	width: 70%;
	border: 1px solid #ccc;
	padding: 10px 20px;
}

.contact input[type=text],
.contact input[type=email],
.contact textarea,
.contact select {
	box-sizing: border-box;
	padding: 5px 10px;
	font-size: 1.3em;
	font-family: Arial, sans-serif;
	color: #333;
	border: solid 1px #ccc;
	margin: 0 0 0.3em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.contact .required {
	display: inline-block;
	background-color: #e60106;
	color: #fff;
	line-height: 1.2rem;
	padding: 3px 8px;
	font-size: 1.3rem;
	margin-left: 0.5rem;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.contact select {
	height: 37px;
}

.contact .long {
	width: 100%;
}

.contact .subtitle {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.contact .short {
	width: 70%;
}

.contact .wpcf7-list-item {
	display: block;
	margin-left: 0;
	margin-bottom: 0.5em;
}

.contact .sample {
	font-size: 1.3rem;
	color: #888;
}

.contact span.wpcf7-not-valid-tip {
	margin-bottom: 0.5rem;
	color: #e60106;
}

.contact div.wpcf7-response-output {
	padding: 1em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.contact .btn {
	width: 30%;
	height: 50px;
	background-color: #0162e6;
	line-height: 50px;
	font-size: 1.6rem;
	margin: 0 auto;
	text-align: center;

	display: block;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #FFF;
	text-decoration: none;
	-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;
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}

.contact .btn:hover {
	background-color: #019fe6;
}

.contact .attention {
	margin-bottom: 1em;
}

.contact .attention.taC {
	text-align: center;
}

.contact div.wpcf7-validation-errors {
	border: 3px solid #e60106;
	color: #e60106;
}

.contact .lastcheck {
	text-align: center;
	font-weight: bold;
}

.page-id-28 .banner-area {
	/*page-id-28はコンタクトページ*/
	display: none;
}

.page-id-28 #movebanner {
	display: none;
}

/*******************

プライバシーポリシー

********************/
.privacy .title {
	font-weight: bold;
	font-size: 1.7rem;
	margin: 20px 0 5px 0;
	padding: 0;
	border-bottom: 1px solid #333;
}

.privacy p {
	padding: 0 10px;
}

.privacy ul {
	margin-top: 1rem;
	padding-left: 10px;
}

.privacy li {
	list-style-type: disc;
	list-style-position: inside;
	line-height: 1.5rem;
}

.privacy .contact {
	margin-top: 10px;
}

/*******************

ブログ記事

********************/

.blog .sec-title {
	font-size: 2.8rem;
	/*font-family: 'Avenir','Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';*/
	font-family: "Sawarabi Gothic";
	color: #333;
	text-shadow: 0 0 5px white;
	border-left: solid 7px #019fe6;
	background-color: #FFF;
	line-height: 3.5rem;
	padding: 2rem 0 2rem 1.0rem;
	;
	margin-bottom: 3.0rem;
	box-shadow: 0 0 2px 1px rgba(1, 159, 230, 0.1);
}

.blog .sec-title a {
	color: #111;
	text-decoration: none;
}

.blog .date {
	font-size: 1.6rem;
	line-height: 1em;
	display: block;
	background-image: url(../img/calendar.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1.8rem;
	padding-left: 2.1rem;
	margin-bottom: 0.5em;
}

.blog .latest-list {
	box-sizing: border-box;
	line-height: 1.2em;
	height: 200px;
	overflow-y: scroll;
}

.blog .latest-list dt {
	box-sizing: border-box;
	clear: left;
	float: left;
	width: 130px;
	border-top: 1px solid #ddd;
	padding: 1em 0 1em 0.5em;
	margin: 0;
}

.blog .latest-list dd {
	box-sizing: border-box;
	float: left;
	width: calc(100% - 130px);
	border-top: 1px solid #ddd;
	padding: 1em 0.5em 1em 0;
	margin: 0;
}

.blog .more {
	text-align: right;
}

.blog .bgwhite {
	margin-bottom: 80px;
}


.pagination {
	text-align: center;
}

.pagination a,
.pagination span {
	display: inline-block;
	border: 1px solid #ccc;
	padding: 0.8em 1em;
}

.pagination a {
	text-decoration: none;
	color: #111;
}

.pagination span {
	background-color: #0162e6;
	color: #fff;
}


/*******************

HOWTO

********************/
.post-type-archive-howto .pagelink {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
	margin-bottom: 50px;
}

.post-type-archive-howto .pagelink li {
	width: 31%;
	text-align: center;
	background-color: #fff;
	border-radius: 10px;
}

.post-type-archive-howto .pagelink li a {
	display: block;
	padding: 5%;
}

.post-type-archive-howto .pagelink img {
	width: auto;
	height: 180px;
}

.post-type-archive-howto .pagelink .link_name {
	font-size: 2rem;
	margin-top: 1em;
}

.post-type-archive-howto .article-list li {
	font-size: 1.8rem;
	margin: 0 0 1em 0;
	line-height: 1.4em;
}

.post-type-archive-howto .article-list li:last-child {
	margin-bottom: 0;
}

.post-type-archive-howto .article-list li a {
	background-image: url(../img/icon_arrow.png);
	background-repeat: no-repeat;
	background-position: left 1em top 0.2em;
	background-size: 0.7em;
	padding: 0 1em 0 2em;
	display: inline-block;
}

.single-howto .howto-list ul {
	margin-bottom: 70px;
}

.single-howto .howto-list li {
	line-height: 1.4em;
	padding: 0 1em 0 2em;
	margin-bottom: 1em;
	font-size: 1.8rem;
}

.single-howto .howto-list a {
	position: relative;
}

.single-howto .howto-list a:before {
	content: '';
	display: block;
	background-image: url(../img/icon_arrow.png);
	background-size: contain;
	width: 0.8em;
	height: 0.8em;
	position: absolute;
	top: 0.3em;
	left: -1em;
	margin-right: 20px;
}

.single-howto .list-title {
	font-size: 2rem;
	display: inline-block;
	background-color: #019fe6;
	border-radius: 3px;
	color: #fff;
	padding: 0.7em 1em;
	margin: 0 0 2em 1em;
	letter-spacing: 0.05em;
}

/*******************

水道修理ブログ

********************/

.post-type-archive-blog .article-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
}

.post-type-archive-blog .article-list li {
	width: 32%;
	background-color: #fff;
	padding: 1% 1% 5%;
	position: relative;
	margin: 0 0.66% 2%;
}

.post-type-archive-blog .article-list li a {
	text-decoration: none;
	color: inherit;
}

.post-type-archive-blog .article-list li img {
	width: 100%;
	height: auto;
	margin: 0 auto;
	object-fit: cover;
	overflow: hidden;
}

.post-type-archive-blog .article-title {
	color: inherit;
	text-decoration: none;
	font-size: 2rem;
	margin: 1em 0 1.2em;
	line-height: 1.4em;
}

.post-type-archive-blog .created {
	font-size: 1.4rem;
	color: #000;
	text-align: right;
	position: absolute;
	right: 3%;
	bottom: 3%;
}

.single-blog .blog-list ul {
	margin-bottom: 70px;
}

.single-blog .blog-list li {
	line-height: 1.4em;
	padding: 0 1em 0 2em;
	margin-bottom: 1em;
	font-size: 1.8rem;
}

.single-blog .blog-list a {
	position: relative;
}

.single-blog .blog-list a:before {
	content: '';
	display: block;
	background-image: url(../img/icon_arrow.png);
	background-size: contain;
	width: 0.8em;
	height: 0.8em;
	position: absolute;
	top: 0.3em;
	left: -1em;
	margin-right: 20px;
}

/*******************

求人

********************/
.recruit table {
	width: 100%;
	margin-bottom: 80px;
}

.recruit table tr>* {
	border: 1px solid #333;
	vertical-align: middle;
	padding: 1.5em 0.5em;
	font-size: 1.6rem;
}

.recruit table th {
	background-color: #efefef;
	font-weight: bold;
	text-align: center;
	width: 20%;
}

.recruit .sellspoint {
	text-align: center;
	border: 3px solid #e68801;
	color: #e68801;
	padding: 1em 3em;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	margin-bottom: 2em;
}


/*******************

SDGs

********************/
.sdgs p {
	margin-bottom: 1.5rem;
}

.sdgs .poster {
	width: 70%;
	display: block;
	margin: -2em auto 0;
}

.sdgs .s-title {
	color: #019fe6;
	font-size: 1.6rem;
	border-bottom: 3px solid #019fe6;
	padding-bottom: 5px;
	margin-bottom: 1em;
}

.sdgs .textarea {
	float: left;
	width: 50%;
}

.sdgs .imgarea {
	float: right;
	text-align: center;
	width: 50%;
}

.sdgs .imgarea img {
	width: 85%;
	box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.4);
}


@media (max-width: 767px) {

	.bgwhite {
		padding: 5% 1%;
	}

	/*******************

対応エリア

********************/
	.area .content .large {
		font-size: 2.5rem;
	}


	.area .content .textL {
		float: none;
		width: 100%;
	}

	.area .content .imgR {
		float: none;
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	.area .content .imgR img {
		width: 100%;
	}

	.area .areabtn li {
		width: 100%;
		margin-top: 5px;
	}

	.area .city li {
		padding: 5px 1px;
		width: 33.3%;
	}

	.area .areatitle {
		font-size: 1.5em;
		border-left: solid 7px #019fe6;
		padding-left: 0.5em;
		margin: 1em 0.5em 0.5em;
	}

	.area .content figcaption {
		font-size: 1.5rem;
	}

	.area .flex.shitei figure {
		width: 48%;
		text-align: center;
	}

	.area .flex.shitei figcaption {
		font-size: 0.8em;
	}

	/*
	※※※※※※※※※※※※※※※※

	水道局

	※※※※※※※※※※※※※※※※
	*/
	.suidoukyoku table tr>* {
		padding: 1em 0.5em;
		border: 1px solid #fff;
		font-size: 0.8em;
	}

	/*
※※※※※※※※※※※※※※※※

指定証

※※※※※※※※※※※※※※※※
*/


	.certification .warn {
		width: 98%;
		font-weight: bold;
		padding-bottom: 20px;
	}

	.certification .warn .head {
		font-size: 4.5vw;
		text-align: center;
		padding: 0.3em 0;
		margin-bottom: 20px;
		background-position: calc(50% - 4.5em) center;
		background-size: 6vw auto;
	}

	.certification .warn::before {
		left: 2vw;
		width: 12vw;
		height: 21vw;
	}

	.certification .warn_text {
		padding-left: 18vw;
		font-size: 3.3vw;
		line-height: 1.6em;
		text-align: left;
	}

	.certification .text_area {
		display: contents;
	}

	.certification .flex {
		flex-direction: column;
		display: inherit;
	}

	.certification .flex>div {
		width: 48%;
		float: left;
	}

	.certification .flex .image_area img {
		width: 90%;
		margin: 0 auto 10%;
		display: block;
		float: left;
		box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.4);
	}

	.certification .certification_info {
		border: 3px solid #019fe6;
		text-align: center;
	}

	.certification .certification_info p {
		margin-bottom: 0;
		padding: 0.5em;
	}

	.certification .certification_title {
		background-color: #019fe6;
		color: #fff;
	}

	.certification .group {
		background-color: #fff;
		font-size: 2rem;
	}

	.certification .number {
		background-color: #dfeff7;
		font-size: 2.3rem;
	}

	/*******************

サービス・料金

********************/
	.service .introduction img {
		float: none;
		width: 100%;
		padding: 0 0 10px 0;
	}

	.service .service-icon .icon {
		text-align: center;
		width: 45%;
		float: left;
	}

	.service .service-icon .text {
		float: right;
		width: 55%;
		padding: 0 0 0 2%;
	}

	.service td {
		padding: 10px 5px;
	}


	.service .servicetable .price {
		width: 52%;

	}

	.service .servicetable .price,
	.service .servicetable .time {
		width: 24%;
	}

	.service .flexbox-container {
		flex-direction: column;
	}

	.service .service-icon li {
		width: 100%;
		padding: 0 2%;
		border-right: none;
	}

	.service .maker img {
		float: none;
		width: 100%;
		margin-bottom: 50px;
	}

	.service .maker .text {
		float: none;
		width: 100%;
	}


	/*******************

サービスの流れ

********************/

	.flow .text {
		float: none;
		width: 100%;
	}

	.flow .image {
		float: none;
		width: 100%;
		margin-bottom: 2rem;
	}

	.flow .step h4 {
		font-size: 2rem;
		line-height: 20px;
	}

	/*******************

お客様の声

********************/

	.voice .voices {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.voice .voices div {
		width: 100%;
		background-color: #FFF;
		border: 2px dashed #019fe6;
		padding: 2%;
		outline: 5px solid #ffffff;
		margin-bottom: 40px;
	}

	/*******************

水道局指定工事店とは

********************/


	/*******************

よくある質問

********************/
	.faq .question-list {
		background-color: #fff;
		width: 100%;
		margin: 0 auto 100px;
		padding: 40px 5px;
	}

	.faq .question-list li {
		border-top: 1px dashed #000;
		padding: 20px 5px;
		line-height: 1.5rem;
	}

	.faq .qa-list dt {
		background-color: #0162e6;
		color: #FFF;
		height: 50px;
		padding: 10px 10px 10px 3em;
		text-indent: -2.3em;
	}

	.faq .qa-list dd {
		background-color: #ffffff;
		padding: 20px 20px 20px 10px;
		margin-bottom: 30px;
	}

	.faq .qa-list dd .credit {
		max-width: 250px;
	}

	/*******************

選ばれる理由

********************/

	.reason .text {
		float: none;
		width: 100%;
	}

	.reason .img {
		float: none;
		width: 100%;
		text-align: none;
	}


	/*******************

水道局指定工事店とは

********************/

	.designation .certification {
		float: none;
		width: 100%;
	}

	.designation .certification-text {
		float: none;
		width: 100%
	}

	/*******************

お問い合わせフォーム

********************/
	.contact .netprice {
		margin-bottom: 30px;
	}

	.contact .netprice .banner {
		float: none;
		width: 100%;
	}

	.contact .netprice .text {
		float: none;
		width: 100%;
		padding: 1rem;
		border: 2px solid #e6e301;
		border-top: none;
	}

	.contact .isogi {
		margin-bottom: 30px;
	}

	.contact .isogi a {
		display: block;
	}

	.contact table th {
		width: 100%;
		display: block;
	}

	.contact table td {
		width: 100%;
		display: block;
	}

	/*******************

運営会社

********************/

	.company .profile {
		float: left;
		width: 50vw;
		padding-right: 2vw;
		padding-bottom: 1vw;
	}

	/*******************

ブログ記事

********************/

	.blog .sec-title {
		font-size: 1.7rem;
		font-family: "Sawarabi Gothic";
		line-height: 2.2rem;
		padding: 1.5rem 0 1.5rem 1.0rem;
	}

	.blog .date {
		font-size: 1.3rem;
		line-height: 1em;
		display: block;
		background-image: url(../img/calendar.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 1.8rem;
		padding-left: 2.1rem;
	}

	/*******************

HOWTO

********************/

	.post-type-archive-howto .pagelink {
		margin-bottom: 30px;
	}

	.post-type-archive-howto .pagelink li {
		width: 32%;
	}

	.post-type-archive-howto .pagelink img {
		height: 25vw;
	}

	.post-type-archive-howto .pagelink .link_name {
		font-size: 3.5vw;
	}

	.post-type-archive-howto .article-list li {
		font-size: 3.5vw;
		margin: 0 0 0.5em 0;
		line-height: 1.4em;
	}

	.post-type-archive-howto .article-list li a {
		background-position: left 1em top 0.2em;
	}

	.single-howto .howto-list li {
		line-height: 1.4em;
		padding: 0 1em 0 2em;
		margin-bottom: 1em;
		font-size: 3.5vw;
	}

	.single-howto .list-title {
		font-size: 4.2vw;
	}



	/*******************

水道修理ブログ

********************/

	.post-type-archive-blog .article-list {
		justify-content: space-between;
	}

	.post-type-archive-blog .article-list li {
		width: 49%;
		min-height: 0;
		margin: 0 0 2%;
	}

	.post-type-archive-blog .article-title {
		color: inherit;
		text-decoration: none;
		font-size: 3.5vw;
		margin: 1em 0 1em;
		line-height: 1.4em;
	}

	.post-type-archive-blog .created {
		font-size: 2.5vw;
	}

	.single-blog .blog-list li {
		line-height: 1.4em;
		padding: 0 1em 0 2em;
		margin-bottom: 1em;
		font-size: 3.5vw;
	}

	/*******************

求人

********************/
	.recruit table {
		margin-bottom: 50px;
	}

	.recruit table tr>* {
		padding: 1em 0.5em;
	}

	.recruit .sellspoint {
		border: 2px solid #e68801;
		padding: 1em 0.5em;
		font-size: 1.8rem;
		letter-spacing: 0.025em;
	}

	/*******************

SDGs

********************/
	.sdgs p {
		margin-bottom: 1.5rem;
	}

	.sdgs .poster {
		width: 80%;
		margin: 0 auto 0;
	}

	.sdgs .textarea {
		float: none;
		width: 100%;
		margin-bottom: 50px;
	}

	.sdgs .imgarea {
		float: none;
		width: 100%;
	}

	.sdgs .imgarea img {
		width: 80%;
	}



}