@charset "UTF-8";
/*================================================
 *  CSSリセット
 ================================================*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	font-weight:normal;
}

h7{
	display: block;
}
body {
	line-height:1
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block
}
ul {
	list-style:none
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:none
}
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
del {
	text-decoration:line-through
}
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help
}
table {
	border-collapse:collapse;
	border-spacing:0
}
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #ccc;
	margin:1em 0;
	padding:0
}
input, select {
	vertical-align:middle
}
/*================================================
 *  一般・共通設定
 ================================================*/

body {
	width: 100%;
	margin: 0 auto;
	font-size: 16px;
	color: #333333;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	line-height: 1.6;
	position: relative;
}
header{
	/*background: url(../img/common/bg_lg.png);
	background-repeat: repeat-x;
	background-size:200px;
	background-color: rgba(255,255,255,0.7);
	background-blend-mode: lighten;
	background-position: center;*/
}
.headerWP {
	width: 1000px;
	margin: 10px auto;
}
.backpc{
	display: block;
}
.backsp{
	display: none;
}
@media screen and (max-width:767px) {
	.backpc{
		display: none;
	}
	.backsp{
		display: block;
	}

}
.spefont {
	font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
nav {
	width: 100%;
}
#contents {
	width: 1000px;
	max-width: 100%;
	margin: 10px auto;
}
#main,#main_contact {
	float: right;
	width: 90%;
	margin-right: 5%;
}
a {
	color:#000;
}
a:hover {
	color:#e78f00;
}
a.nolink,a.nolink:hover{
 opacity: 1!important;
 cursor: auto!important;
 text-decoration: none!important;
}

h1 {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	color: #333333;
	font-size: 14px;
}
h1 a {
	color:#000;
	text-decoration:none;
}
h1 a:hover {
	color: #e78f00;
	text-decoration: underline;
}
h2 {
	font-size: 23px;
	font-weight:bold;
	position: relative;
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	color: #454545;
	margin: 1%;
	margin-bottom:4%;
}
h2:after {
	position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
h3 {
	margin-bottom: 0.5em;
	padding: 2px 5px;
	color: #0666BD;
	font-weight: bold;
	font-size: 18px;
}
h5 {
	margin-bottom:0.25em;
	padding:2px;
	color:#000;
	font-size:16px;
	border-top:1px dotted #999;
	border-bottom:1px dotted #999;
	background:#f1f1f1;
}
h6 {
	margin-bottom:0.25em;
	color:#382400;
	font-size:14px;
	font-weight:bold;
}
p {
	margin: 0.5em 0 1em 0;
}
img {
	vertical-align:bottom;
	max-width: 100%;
}
em {
	font-weight:bold;
}
strong {
	font-weight:bold;
	color:#f19500;
}
pre {
	margin:1em 0;
	padding:1em;
}
blockquote {
	margin-bottom:1em;
	padding:1em;
	border:1px dotted #ddd;
	border-left:5px solid #ddd;
}
ul, ol, dl {
	margin:0 0 1em 0;
}
ul li {
	list-style:disc;
}
ol li {
	list-style:decimal;
}
li {
	margin-left:2em;
}
/*dt {
	margin-bottom:0.5em;
	border-bottom:1px dotted #ddd;
}
dt:before {
	content:"\0025a0";
}
dd {
	margin-bottom:1em;
}*/

table {
	width:100%;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #ddd;
}
th {
	padding:10px;
	text-align:center;
	vertical-align:middle;
	background:#f5f5f5;
}
td {
	padding:10px;
	text-align:left;
}
.clearFix:after {
	content: "";
	display: block;
	clear: both;
}
.img-responsive {
	max-width: 100%;
}
.sp,.tablet {
	display: none;
}
.kasari{
	position: relative;
}
/*================================================
 *  ヘッダー
 ================================================*/


.uehead{
	width: 900px;
	max-width: 95%;
  margin: 10px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.ueheadlogo{
	width: 35%;
}
.uecontact{
	width: 65%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
.uecontact_tel,.uecontact_form{
	width: 47%;
	margin-left: 1%;
}

@media screen and (max-width:767px) {
	.ueheadlogo,.uecontact{
		width: 100%;
		text-align: center;
	}
	.uecontact_tel,.uecontact_form{
		width: 100%;
		margin-left: 0;
		margin-top: 2%;
}
}


/*================================================
 *  グローバルナビゲーション
 ================================================*/
nav {
	margin: 10px 0 0;
	padding: 0;
	background: #0666BD;
	overflow: hidden;
}
nav ul {
	width:1160px;
	margin:0 auto;
	padding:0;
}
nav li {
	float:left;
	list-style:none;
	width:16.666666%;
	margin:0;
	padding:0;
}
nav li a {
	display:block;
	padding:10px 0;
	color: #FFFFFF;
	font-weight: bold;
	text-align:center;
	text-decoration:none;
}
nav li a:hover {;
	text-decoration: none;
	background: #FFFFFF;
	color: #0666BD;
}
nav .navtab{
display: none;
}
/*=================================================
 *  サイドナビ
=================================================*/

#sub {
	float:left;
	width:21.25%;
}
/* 商品バナー */
#sub h3.prct {
	display: inline-block;
	color: #FFFFFF;
	line-height: 37px;
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #0666BD;
	padding: 0;
}
#sub h3.prct:before {
	content: "\f06d";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 22px;
	vertical-align: middle;
}
/*しっぽ部分*/
/*
#sub h3.prct:after {
	content: "";
	border-style: solid;
	border-width: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-color: #0666BD transparent;
	right: -19px;
	border-width: 19px 19px 20px 0px;
}*/
#sub .prct_bnr {
	overflow: hidden;
	margin: 3% 0 10%;
}
#sub .prct_bnr a{
	display: block;
	position: relative;
}
#sub .prct_bnr a .sideprott{
	position: absolute;
	bottom:0;
	left:0;
	padding: 2% 3% 6% 13%;
	box-sizing: border-box;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	color: #000;
	box-sizing: border-box;
}
@media screen and (max-width:1024px) {
	#sub .prct_bnr a .sideprott{
		font-size: 1.8vw;
}
}
@media screen and (max-width:767px) {
	#sub .prct_bnr a .sideprott{
		font-size: 7vw;
}
}
#sub .prct_bnr a .sideprottdou{
	line-height: 1;
	padding-bottom: 3%;
	font-size: 17px;
}
@media screen and (max-width:1024px) {
	#sub .prct_bnr a .sideprottdou{
		font-size: 1.5vw;
}
}
@media screen and (max-width:767px) {
	#sub .prct_bnr a .sideprottdou{
		font-size: 6vw;
}
}


#sub .prct_bnr a:hover {
	opacity: 0.7;
}
#sub .prct_bnr a img {
	margin-bottom: 2%;
}
/* サービス */
#sub h3.srv {
	display: inline-block;
	color: #FFFFFF;
	line-height: 37px;
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #0666BD;
	padding: 0;
}
#sub h3.srv:before {
	content: "\f015";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 22px;
	vertical-align: middle;
}
/*しっぽ部分*/
/*
#sub h3.srv:after {
	content: "";
	border-style: solid;
	border-width: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-color: #0666BD transparent;
	right: -19px;
	border-width: 19px 19px 20px 0px;
}*/
/* LINE QRコード登録 */
#sub h3.line {
	display: inline-block;
	color: #FFFFFF;
	line-height: 37px;
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #0666BD;
	padding: 0;
}
#sub h3.line:before {
/*	content: "\f041";*/
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 22px;
	vertical-align: middle;
}
/*#sub h3.line:after {
	content: "";
	border-style: solid;
	border-width: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-color: #0666BD transparent;
	right: -19px;
	border-width: 19px 19px 20px 0px;
}*/
#sub h3.line i{
	margin: 0 10px 0 0;
}
.lineQR img{
	margin: 0 auto 10px auto;
	width: 180px!important;
	max-width: 100%!important;
	display: block;
}

/* 対応エリア */
#sub h3.area {
	display: inline-block;
	color: #FFFFFF;
	line-height: 38px;
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #0666BD;
	padding: 0;
}
#sub h3.area:before {
	content: "\f041";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 22px;
	vertical-align: middle;
}
/*しっぽ部分*/
/*#sub h3.area:after {
	content: "";
	border-style: solid;
	border-width: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-color: #0666BD transparent;
	right: -19px;
	border-width: 19px 19px 20px 0px;
}*/
/* メーカー */
#sub h3.mk {
	display: inline-block;
	color: #FFFFFF;
	line-height: 38px;
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #0666BD;
	padding: 0;
}
#sub h3.mk:before {
	content: "\f06d";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 22px;
	vertical-align: middle;
}
/*しっぽ部分*/
/*#sub h3.mk:after {
	content: "";
	border-style: solid;
	border-width: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-color: #0666BD transparent;
	right: -19px;
	border-width: 19px 19px 20px 0px;
}*/
#sub img.maker {
	border: solid 1px #CCC;
	margin: 1%;
	width: 98%;
	padding: 1% 0;
}
@media screen and (max-width:767px) {
.mkb {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}
#sub img.maker {
	width: 150px;
	margin: 3%;
}
}
/*対応エリア*/
#sub p.area {
}
#sub p.area span {
	font-weight: bold;
	color: #330A00;
}
#sub p.area span:after {
	content: "\A";
	white-space: pre;
}
/* エコキュート交換の流れ */
#sub .bnr h3.step {
	display: inline-block;
	color: #FFFFFF;
	line-height: 38px;
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #0666BD;
	padding: 0;
	margin-top: 1em;
}
#sub h3.step:before {
	content: "\f0ad";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 22px;
	vertical-align: middle;
}
/*しっぽ部分*/
/*#sub h3.step:after {
	content: "";
	border-style: solid;
	border-width: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-color: #0666BD transparent;
	right: -19px;
	border-width: 19px 19px 20px 0px;
}*/
#sub .bnr dl {
	overflow: hidden;
	margin: 0;
}
#sub .bnr dl dt {
	float: left;
	width: 70px;
	clear: both;
	margin-right: 5px;
	margin-bottom: 5%;
}
#sub .bnr dl dt img {
	width: 70px;
}
#sub .bnr dl dd {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 5%;
	margin-top: 0.5%;
}
#sub .bnr dl dd p {
	margin-top:0;
}
#sub .bnr dl dd p span {
	padding: 1%;
	border: 1px solid;
	line-height: 2;
	color: #000000;
}
#sub .bnr a.jump {
	float: right;
}
#sub .bnr a.jump:before {
	content: "\f101";
	font-family: FontAwesome;
}
/* ページバナー */
#sub .bnr .page_bnr {
	margin: 20% 0 3%;
}
#sub .bnr .page_bnr img {
	margin-bottom: 3%;
}
#sub .page_bnr {
	text-align: center;
}
/* 追加のコラム */
#sub h3.column {
	display: inline-block;
	color: #FFFFFF;
	line-height: 38px;
	position: relative;
	width: 195px;
	text-align: center;
	background-color: #0666BD;
	padding: 0;
}
#sub h3.column:before {
	content: "\f06d";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 22px;
	vertical-align: middle;
}
#sub h3.column:after {
	content: "";
	border-style: solid;
	border-width: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-color: #0666BD transparent;
	right: -19px;
	border-width: 19px 19px 20px 0px;
}
#sub .column_list {
	overflow: hidden;
}
#sub .column_list ul {
}
#sub .column_list ul li {
}
#sub .column_list ul li a {
	font-weight: normal;
	line-height: 1.3;
	padding: 0;
	border: none;
}
#sub .column_list ul li a:hover {
	font-weight: bold;
}
/* 問い合わせ */
#sub .bnr .info {
	overflow: hidden;
	background: #0666BD;
	text-align: center;
	padding: 1% 0;
	margin-bottom: 5%;
	clear: both;
}
#sub .bnr .info h4 {
	color: #FFFFFF;
	width: 100%;
	border-bottom: 5px solid #FFFFFF;
	font-size: 18px;
	padding: 5% 0px;
}
#sub .bnr .info h4:before {
	content: "";
}
#sub .bnr .info p {
	padding: 0;
	margin: 5% 0 0 0;
	line-height: 1;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: bold;
}
#sub .bnr .info a {
	display: block;
	background: #FFFFFF;
	margin: 3%;
	padding: 3% 0;
	border-radius: 40px;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
}
#subnav {
	display:none;
}
.submenu li {
	margin:0;
	padding:0;
	list-style:none;
}
.submenu li a:before {
	content:"\0025a0";
	color:#000;
}
.submenu li a {
	display: block;
	padding:5px 2px;
	color: #000;
	border-bottom:1px dotted #ddd;
	text-decoration:none;
}
.submenu li a:hover {
	background:#eee;
}
/*.bnr {
	overflow:hidden;
}　エラーのため外し*/
.bnr ul {
	overflow:hidden;
}
.bnr li {
	margin: 0 0 6px 0;
	padding:0;
	list-style:none;
}
.bnr li a {
	padding: 5px;
	text-decoration: none;
	display: block;
	font-weight: bold;
	color: #330A00;
	border-bottom: 1px solid transparent;

}
.bnr li a:hover {
/*	margin-bottom: -1px;*/
	border-bottom: 1px solid #330A00;
}
.bnr img {
	width:100%;
}
/*================================================
 *  宣言・お問い合わせ
 ================================================*/

 .appboxue{
 	position: absolute;
 	top: 0;
 	left: 0;
 	padding: 0% 1% 0 1%!important;
 	width: 100%;
 	font-size: 20px;
 	color: #fff;
 	font-weight: bold;
 	margin: 0;
	box-sizing: border-box;
 }
 .appboxst{
 	position: absolute;
 	bottom: 0;
 	left: 2%;
 	padding: 1% 1% 2% 4%;
 	width: 98%;
 	font-size: 21px;
 	font-weight: bold;
 	margin: 0;
 	line-height: 1.2;
	box-sizing: border-box;

 }


   .contactnewbox{
    	display :flex;
    	justify-content: space-between;
   	margin-bottom: 5%;
		width: 80%;
  margin-right: auto;
  margin-left: auto;
    }
@media screen and (max-width:767px) {
	.contactnewbox{
		width:100%;
	 }

}


   .contactnewbox .eanewbox{
    	width: 49.5%;
    	max-width: 370px;
    }

		.contactnewbox .eanewbox a:hover{
			 opacity:0.8;
		 }

footer {
 position: absolute;
 left: 0;
 clear:both;
 width: 100%;
}
.footmenu {
 width:100%;
 padding:20px 0;
 overflow:hidden;
 background: #4C1300;
}
.footmenu ul {
 position:relative;
 float:left;
 left:50%;
 margin:0;
}
.footmenu li {
 position:relative;
 left:-50%;
 float:left;
 list-style:none;
 margin:0;
 padding:0 10px;
 font-size:14px;
 text-align:center;
 font-weight: bold;
}
.footmenu li a {
 text-decoration: none;
 color: #ffffff;
}
.copyright {
 clear: both;
 padding: 5px 0;
 font-size: 14px;
 text-align: center;
 background: #0666BD;
 color: #FFFFFF;
}
@media screen and (max-width:767px) {
.copyright {
 padding-bottom: 120px;
}
}
@media screen and (max-width:480px) {
.copyright {
 padding-bottom: 100px;
}
}
/*================================================
*  ページトップへの戻り
================================================*/
.totop {
 position:fixed;
 bottom:15px;
 right:2px;
}
@media screen and (max-width:767px) {
.totop {
 position:fixed;
 bottom:170px;
}
}
@media screen and (max-width:480px) {
 .totop {
	 bottom:170px;
}
}
.totop a {
 display:block;
 text-decoration:none;
 text-align: right;
 width: 80px;
}
.totop img {

}
.totop img:hover {
 opacity: 0.8;
}
.totop .tomoline{
 display: block;
 margin-bottom: 2%;
}
@media screen and (max-width:480px) {
 .totop .tomoline,.totop .linebanner{
	 display: none;
 }
}

/*================================================
 *  フロートバナー　電話
 ================================================*/
 .denwa{
	 display: none;
 }
 @media screen and (max-width:767px) {
.denwa{
	display: block;
	position: fixed;
	width: 40%;
	bottom:15px;
	right:15px;
}
.denwasp{
	display: none;
}
}
@media screen and (max-width:767px) {
	.denwa{
		width: 100%;
		right: 0;
		bottom: 0;
	}
	.denwasp{
		display: block;
	}
	.denwapc{
		display: none;
	}
}
.denwa img{
	max-width: 100%;
}
@media screen and (max-width:480px) {
	.denwa img{
		display:block;
	}
}

.contactsp{
	display: none;
}
@media screen and (max-width:767px) {
	.contactsp{
		display:flex;
		position: fixed;
		bottom: 0;
		left: 0;
		flex-wrap: wrap;
		width: 100%;
	}
}

.contactsp a{
	text-decoration: none;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	display: grid;
	place-items: center;
	/*font-size: 18px; 電話・ラインあるの場合*/
	font-size: 25px;
	font-weight: bold;
	padding: 2%;

}
@media screen and (max-width:600px) {
	.contactsp a{
		/*font-size: 3vw; 電話・ラインあるの場合*/
}
}
.contactsp a .smj{
	font-size: 60%;
}
.contactsp a:hover{
	background: #000;
	color: #fff;
}
a.ctdenwa{
	background: #0099ff;
	width: 45%;
}
a.ctweb{
	background: #c42082;
	width: 27.5%;
}
a.ctline{
	background: #00b900;
	width: 27.5%;
}
.contactsp_connomi a.ctweb{
	width: 100%;
}

/*================================================
 *  クラス
 ================================================*/
.textL {
	text-align:left;
}
.textR {
	text-align:right;
}
.textC {
	text-align:center;
}
.verbase{
	vertical-align: baseline;
}
.list {
	padding:0 0 0 0.5em;
}
.list li {
	margin:0;
	padding:0 0 0 15px;
	list-style:none;
	background:url(../img/check.png) 0 5px no-repeat;
}
.info dt {
	border-bottom:none;
}
.info dd {
	padding-bottom:1em;
	border-bottom:1px solid #ddd;
}
.cobl{
	color: #000000;
}

.imgcenter{
	display: block;
	margin: 1% auto;
}

.nodecor{
	text-decoration: none;
}

.mt5{
	margin-top: 5%;
}

.mt10{
	margin-top: 10%;
}

.mb5{
	margin-bottom: 5%;
}


/*================================================
 *  トップページ
 ================================================*/

 .uebn{
	 width: 950px;
	 max-width: 95%;
	 margin: 2% auto;
 }


/* スライドショー */
.slidesp{
	display: none!important;
}
/*.slide {
	display:none;
	position:relative;
	overflow:hidden;
}
.slidePrev {
	position:absolute;
	cursor:pointer;
	z-index:100;
}
.slideNext {
	position:absolute;
	cursor:pointer;
	z-index:100;
}
.slidePrev img {
	position:absolute;
	width:50px !important;
	height:60px !important;
}
.slideNext img {
	position:absolute;
	width:50px !important;
	height:60px !important;
}
.slideInner {
	position:relative;
	margin:0 0 5px 0;
	padding:0;
}
.slideInner li {
	float:left;
	margin:0;
	padding:0;
	list-style:none;
}
.slideInner li img {
	margin:0 5px;
	padding:0;
}
.filterPrev {
	position:absolute;
	left:0;
	opacity:0.5;
	filter:alpha(opacity=50);
	background-color:#fff;
}
.filterNext {
	position:absolute;
	right:0;
	opacity:0.5;
	filter:alpha(opacity=50);
	background-color:#fff;
}*/

/*slide*/
.topslide{
	background: url(../img/index/bg_km.png);
	background-size: cover;
	background-position: bottom center;
	background-color: rgba(255,255,255,0.2);
	background-blend-mode: lighten;
	padding: 2% 0;
}
.topslide .inner{
	width: 950px;
	max-width: 95%;
	margin: auto;
}
.topslide .slide{
	width: 90%;
	border: 10px #fff solid;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}
.topslide  .slide img{
	width: 100%;
}

.slide{
	line-height: 0;
}
.slick-dotted.slick-slider{
	margin-bottom: 0;
}
.slick-dots{
	bottom: 5px;
}

.slick-next:before,.slick-prev:before{
	font-size: 25px;
	font-weight: bold;
	background: rgba(0,0,0,0.8);
	border-radius: 50%;
	padding: 2% 30%;
}

.slick-next,.slick-prev{
	z-index: 10;
	right: 20px;
}
.slick-prev{
	left: 10px;
	right: auto;
}


.griy{
	background: #0666BD;
	padding: 1%;
	padding-bottom: 3%;
}
.griy .griytt{
	display: grid;
	place-items:center;
	color: #fff;
	font-weight: bold;
	font-size: 33px;
	margin-bottom: 1%;
	margin-top: 0;
	letter-spacing: 5px;
}

.griy .griyinbox{
	width: 900px;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	padding: 1.5%;
	display: grid;
	place-items:center;
	border-radius: 10px;
	box-shadow: 2px 2px 3px #333 inset;
}
.griy .griydt{
	font-weight: bold;
	font-size: 23px;
}




.controlNav {
	position:relative;
	float:left;
	left:50%;
}
.controlNav span {
	position:relative;
	left:-50%;
	float:left;
	margin:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	width:10px;
	height:10px;
	overflow:hidden;
	background:#ccc;
	text-indent:-9999px;
	vertical-align:middle;
}
.controlNav span:hover {
	background:#999;
	cursor:pointer;
}
.controlNav span.current {
	background:#f19500;
}
/* トップナビ */
* html .topNavi {
	height:1em;
	overflow:visible;
}
.topNavi {
	overflow:hidden;
	position:relative;
/*	margin-right:-1.030%;*/
	margin-top:20px;
	margin-bottom:20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.topNaviColumn {
	display:inline;
	width:32.302%;
	float:left;
	margin-right:1.030%;
}
.topNaviCon {
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	padding: 10px;
	text-decoration: none;
	transition: background 0s ease 0s, border 0.5s ease-out 0s;
	background: rgba(255, 50, 0, 0.08);
	border-radius:4px;
}
.topNaviCon:hover {
	color:#000;
	background:#fff9f5 none repeat scroll 0 0;
	transition:background 0s ease 0s, border 0.5s ease-out 0s;
}
.topNaviCon h2 {
	margin: 3px 0;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	color: #0666BD;
	border: none;
}
.topNaviCon:hover h2 {
}
.topNaviCon p {
	margin: 0;
	line-height: 1.5;
}
.hot_contact {
	float: right;
	text-decoration: none;
	font-size: 16px;
}
.hot_contact:after {
	content: "\f0a9";
	font-family: FontAwesome;
	margin-left: 3px;
}
.hot_contact:hover {
	font-weight: bold;
	color: #000;
}
.topNaviPhoto img {
	width:100%;
}
.indexPrct {
	letter-spacing: 5px;
	margin-bottom: 5%;
}
.indexPrct a:hover {
	opacity: 0.6;
}
.prctBox {
	display: inline-block;
	margin-bottom: 10px;
	position: relative;
}
.prctBox .prctBoxtt{
	position: absolute;
	top:0;
	left:0;
	padding: 1% 3%;
	box-sizing: border-box;
	margin: 0;
	font-size: 30px;
	font-weight: bold;
	color: #000;
}
@media screen and (max-width:1024px) {
	.prctBox .prctBoxtt{
		font-size: 3vw;
}
}
@media screen and (max-width:767px) {
	.prctBox .prctBoxtt{
		font-size: 4vw;
}
}
@media screen and (max-width:480px) {
	.prctBox .prctBoxtt{
		left: 5%;
		font-size: 5vw;

}
}
@media screen and (max-width:400px) {
	.prctBox .prctBoxtt{
		left: 0;
}
}

/* エコキュートの知識 */
#main .point {
	overflow: hidden;
	background: #FFEAE5;
	margin-bottom: 2%;
}
#main .point .box {
	padding: 1%;
}
#main .point .box img {
	float: left;
	width: 50%;
	clear: both;
	margin: 0 1% 0 0;
}
@media screen and (max-width:767px) {
#main .point .box img {
	float: none;
	width: 100%;
}
}
#main .point .box .cmt {
	margin: 0;
}
@media screen and (max-width:767px) {
#main .point .box .cmt {
	padding: 1%;
}
}
#main .point a:hover {
	opacity: 0.7;
}

.hojokin {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	margin-top:3%;
	margin-bottom:3%;
}
.bannars {
	display: flex;
	width:100%;
	margin-right:auto;
	margin-left:auto;
	margin-top:2%;
	margin-bottom:2%;
}
.bannars img:hover {
	opacity: 0.8;
}
.bannar1{
 margin-right:3%;

}
.bannar2{

}
@media screen and (max-width:900px) {
	.hojokin {
		width:100%;
		margin-left:auto;
		margin-right:auto;
		margin-top:3%;
		margin-bottom:3%;
	}
	.bannars {
		display: block;
		width:90%;
		margin-right:auto;
		margin-left:auto;
		margin-top:2%;
		margin-bottom:2%;
	}
	.bannar1{
	 margin-right:0%;
	 margin-bottom:3%;
	}
	.bannar2{

	}
}

/* merit */
:root{
		--bg:#f4f9fc;
		--card:#fff;
		--text:#2d3142;
		--blue:#1373b8;
		--shadow:0 16px 40px rgba(31,73,125,.08);
		--radius:22px;
	}

	*{box-sizing:border-box}


	.merit-section{
		padding:88px 24px 96px;
		background:#FFF68E;
			margin-bottom: 3%;
	}
.merit-section h2 {

}
	.container{
		max-width:1400px;
		margin:0 auto;
	}

	.section-title{
		text-align:center;
		font-size:clamp(34px,4vw,52px);
		line-height:1.2;
		font-weight:800;
		margin:0 0 64px;
		color:#30344a;
	}

	.section-title span{
		font-weight:1000;
		color:#0080F8;
	}

	.merit-grid{
		display:grid;
		grid-template-columns:repeat(5, minmax(0, 1fr));
		gap:24px;
		align-items:stretch;
	}
		@media (max-width: 640px){
			.merit-grid{
				display:grid;
				grid-template-columns:repeat(5, minmax(0, 1fr));
				gap:14px;
				align-items:stretch;
			}
		}

	.merit-card{
		background:var(--card);
		border-radius:var(--radius);
		box-shadow:var(--shadow);
		padding:28px 24px 26px;
		display:flex;
		flex-direction:column;
		overflow:hidden;
	}

	.illustration{
		height:230px;
		margin-bottom:18px;
		display:flex;
		align-items:center;
		justify-content:center;
		border-radius:16px;
		overflow:hidden;
	}

	.illustration img{
		width:100%;
		height:100%;
		object-fit:contain;
		display:block;
	}
	.illustration_sp{
		height:230px;
		margin-bottom:18px;
		display:none;
		align-items:center;
		justify-content:center;
		border-radius:16px;
		overflow:hidden;
	}

	.illustration_sp img{
		width:100%;
		height:100%;
		object-fit:contain;
	}

	.merit-card h3{
		margin:0;
		text-align:center;
		color:var(--blue);
		font-size:40px;
		line-height:1.3;
		font-weight:800;
	}

	.merit-card p{
		margin:18px 0 0;
		font-size:15px;
		line-height:1.9;
		color:#333;
	}

	@media (max-width: 1280px){
		.merit-grid{
			grid-template-columns:repeat(3, minmax(0, 1fr));
		}
	}

	@media (max-width: 860px){
		.merit-grid{
			grid-template-columns:repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 640px){
		.merit-section{
			padding:64px 16px 72px;
		}

		.section-title{
			margin-bottom:40px;
			font-size: 26px;
		}

		.merit-grid{
			grid-template-columns:repeat(1, minmax(0, 1fr));
		}

		.merit-card{
			min-height:auto;
			padding:24px 18px 22px;
		}

		.illustration{
			display: none;
		}
		.illustration_sp{
			display:block;
			height:110px;
			margin-bottom:18px;
			align-items:center;
			justify-content:center;
			border-radius:16px;
			overflow:hidden;
		}
	}

	/* plan */
	.page {
	min-height: 70vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 28px 16px;
}
	.panel {
		width: min(860px, 100%);
		background: #fff;
		border: 2px solid #7a7a7a;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
		justify-content: center;
	}

	.panel__header {
		position: relative;
		padding: 22px 24px 20px;
		text-align: center;
		font-weight: 700;
		line-height: 1.55;
		font-size: 28px;
		color: #fff;
		background:#0080F8;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	.content {
		padding: 26px 28px 28px;
	}

	.plan_title {
		text-align: center;
		font-size: 42px;
		line-height: 1.1;
		font-weight: 800;
		color: #0080F8;
		letter-spacing: 0.04em;
		margin: 0 0 14px;
	}

	.price {
		text-align: center;
		font-size: 26px;
		line-height: 1.7;
		margin-bottom: 10px;
		font-weight: 700;
	}

	.price .amount {
		color: #e52121;
		font-size: 40px;
		font-weight: 800;
		vertical-align: -2px;
	}

	.price .tax {
		font-weight: 600;
	}

	.ribbon {
		width: min(420px, 100%);
		margin: 0 auto 18px;
		background: #e52121;
		color: #fff;
		text-align: center;
		font-weight: 800;
		padding: 6px 12px;
		font-size: 26px;
	}

	.product-card {
		width: min(420px, 100%);
		margin: 0 auto;
		background: linear-gradient(#eefcc0, #e5f4a2);
		border: 2px solid #7c7c7c;
		border-radius: 10px;
		padding: 16px 14px 14px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
		text-align: center;
		position: relative;
	}

	.product-top {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-bottom: 12px;
	}

	.product-title {
		font-size: 26px;
		font-weight: 800;
		color: #6fb81f;
		letter-spacing: 0.04em;
	}

	.illustration2 {
		width: 84px;
		height: 72px;
		position: relative;
		flex: 0 0 auto;
		margin-top: -6px;
	}



	.specs {
		display: grid;
		gap: 6px;
		margin: 0 auto;
		width: min(300px, 100%);
	}

	.spec {
		background: #86c91d;
		color: #fff;
		font-weight: 800;
		font-size: 18px;
		padding: 8px 10px;
		line-height: 1.2;
	}



	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		height: 48px;
		border-radius: 6px;
		background: linear-gradient(#ea7ab0, #e76ca4);
		color: #fff;
		text-decoration: none;
		font-size: 19px;
		font-weight: 800;
		box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
		position: relative;
	}

	.btn::after {
		content: "→";
		position: absolute;
		right: 14px;
		top: 50%;
		transform: translateY(-50%);
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		display: grid;
		place-items: center;
		font-size: 18px;
		font-weight: 900;
	}

	@media (max-width: 640px) {
		.panel__header {
			font-size: 20px;
			padding: 16px 14px 14px;
		}

		.content {
			padding: 20px 14px 22px;
		}

		.title {
			font-size: 30px;
		}

		.price {
			font-size: 18px;
		}

		.price .amount {
			font-size: 25px;
		}

		.ribbon {
			font-size: 35px;
		}

		.product-title {
			font-size: 22px;
		}

		.spec {
			font-size: 16px;
		}

		.note {
			font-size: 12px;
		}

		.btn {
			font-size: 17px;
		}
	}

/*================================================
 *  商品ページ
 ================================================*/
 .products #main h4.shohinyo {
 margin-bottom: 0.25em;
 font-size: 18px;
 color: #000000;
 font-weight: bold;
 background-color: #ffcd3c;
 padding-left: 1%;
 }
 .products #main h4:before {
 content: "\f06d";
 font-family: FontAwesome;
 margin-right: 5px;
 }
 .products #main .tenlogo{
 width: 100px;
 }
.products #main .chushaku p{
	background-color: #e7141a;
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
	padding: 1% 2%;
	margin: 1% 0;
	font-size: 18px;
}
.products #main .chushaku p.nobi{
	width: 96%;
}
.products #main .chushaku a{
	background-color: #0666BD;
	color: #ffffff;
	font-weight: bold;
	display: block;
	padding: 3% 2%;
	margin: 1% 0;
	font-size: 18px;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	border-radius: 8px;
}
.products #main .chushaku a:hover{
	opacity: 0.8;
}


.products #main .shohin{
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}



.products #main .shohin .shooutlf{
	width: 64%;
	float: left;
}
@media screen and (max-width:480px) {
	.products #main .shohin .shooutlf{
		width: 100%;
		float: none;
	}
}
.products #main .shohin .sholf{
	width: 40%;
	float: left;
}
.products #main .shohin .waribiki{
	background: linear-gradient(#ea4707, #fd7e14);
	border-radius: 8px;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
	color: #ffffff;
	font-weight: bold;
	font-size: 40px;
	line-height: 1.2;
	padding: 3% 1%;
	text-shadow: 3px 3px 2px #333333;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}
@media screen and (max-width:767px) {
	.products #main .shohin .waribiki{
		font-size: 6vw;
	}
}
.products #main .shohin .wsmj{
	font-size: 24px;
	font-weight: bold;
}
.products #main .shohin .ctk{
	font-weight: bold;
}
.products #main .shohin .logoim{
	max-width: 100%;
	margin-left:auto;
	margin-right:auto;
	display: block;
}
.products #main .shohin .shoim{
	float: right;
	width: 55%;
	position: relative;
}
.products #main .shohin .shoim img{
	display:block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}
.products #main .shohin .shoim .addre{
	position: absolute;
	width: 45%;
	left: 0;
	top: 10%;
	border: dashed #0666BD 1px;
	padding: 1%;
	border-radius: 5px;
}
@media screen and (max-width:1024px) {
	.products #main .shohin .shoim .addre{
		position: static;
		width: 100%;
		box-sizing: border-box;
	}
}
.products #main .shohin .shoim .remotext{
	font-weight: bold;
	margin: 1% 1% 0 1%;

}
.products #main .shohin .shoyo{
	width: 35%;
	float: right;
	margin-top: 3%;
}
@media screen and (max-width:480px) {
	.products #main .shohin .shoyo{
		width: 100%;
		box-sizing: border-box;
		float: none;
		clear: both;
	}
}
.products #main .shohin .shoyo .shokai{
	list-style-type: none;
	background-color: #fd7e14;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 2%;
	margin-bottom: 1%;
	border-radius: 8px;
	color: #ffffff;
}
@media screen and (max-width:480px) {
	.products #main .shohin .shoyo .shokai{
		margin-left: 0;
	}
}


.products #main dl {
	height: auto;
	box-sizing: border-box;
	margin: 10px 0 20px 0;
	padding: 0;
	letter-spacing: -.4em;
	border: 1px solid #CCCCCC;
}
.products #main dt {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 100%;
	font-size: 20px;
	letter-spacing: normal;
	background-color: #EFEAE6;
	color: #572C00;
	font-weight: bold;
}

.products #main dt.marka {
	background-color: #0666BD;
	color:#fff;
	font-weight:bold;
	font-size:larger;
}
.products #main dd {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 64px;
	font-size: 20px;
	letter-spacing: normal;
	color: #333333;
}
.products #main dd.markb {
	line-height: 80px;
	font-size: larger;
	background-color: #FDFFBB;
}
.products #main dd.markbnum {
	line-height: 40px!important;
}
.products #main dd.pnum {
	width: 40%;
	vertical-align: middle;
	line-height: 1.2;
}
.products #main dd.pnum span {
	font-size: 16px;
}
.products #main dd.price {
	width: 60%;
}
.products #main dd span.p1 {
}
.products #main dd span.p2 {
	vertical-align: middle;
	font-size: 36px;
	font-weight: bold;
	color: #0666BD;
}
.products #main dd span.p2:before {
	content: "\f0a9";
	font-family: FontAwesome;
	color: #333333;
	margin-right: 5px;
}
.products #main dd span.tax {
	font-size: 16px;
}
.products #main dd span.tax2 {
	color: #0666BD;
	font-size: 16px;
}
.products #main dd.alls {
	width: 100%;
	line-height: 1.3;
    text-align: left;
    padding-left: 3%;
    padding-bottom: 2%;
    border-top: dashed 1px #ccc;
    padding-top: 2%;
    box-sizing: border-box;
}

.products .hojari{
	margin-top: 2%;
	margin-top: 2%;
	text-align: center;
	font-weight: bold;
	color: #fff;
	font-size: 30px;
	padding: 0.1%;
	background: #f00;

}
.products #main dd.hjh{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width:95%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3%;
	background: #fff;

}
.products #main dd.hjh span{
	font-weight: bold;

}
.products #main .hjk{
	box-sizing: border-box;
	width: 40%;
	padding: 0.5% 5% 0.5% 1%;
	font-size: 20px;
	font-weight: bold;
	color: yellow;
	background: linear-gradient(#f40404,#ba0000);
	clip-path: polygon(0 0, 80% 0px, 100% 50%, 80% 100%, 0 100%);
	line-height: 2;
}
.products #main .hjt{
	font-size: 140%;
}
.products #main .hjg{
	box-sizing: border-box;
	overflow: hidden;
	width: 58%;
	font-size: 88px;
	font-weight: bold;
	display: flex;
	position: relative;
	padding: 1.5%;
	justify-content: center;
}
.products #main .hjg::before{
	position: absolute;
	top: -2px;
	left:0;
	width: 100%;
	height: 100%;
	content: "";
	background: linear-gradient(#fc2500,#ba0000);
	mix-blend-mode: screen;

}
.products #main .hjg span.spefont{
	font-weight: normal;
}
.products #main .hje{
	font-size: 25%;
	font-weight: bold;
	line-height: 1.8;
}
.products #main .hkr{
	font-size: 50%;
	font-weight: bold;
}



.products #main .shohinea{
	border-bottom: solid 2px #333333;
	border-top: none;
	margin-top: 2%;
	margin-bottom: 10%;
}

.products .include{
	border: solid 2px #4C1300;
	margin:3%;
}
.products .incl_tt{
	background-color: #4C1300;
	padding: 2%;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	font-size: 18px;
	margin-top: 0;
}
.products .include_in{
	padding: 1%;
}
.products .incl_de{
	list-style: disc;
	font-weight: bold;

}
.products br.hjchosei{
			display: none;
}

@media screen and (max-width:980px) and (min-width:768px) {
	.products br.hjchosei{
		    display: block;
	}

}



@media screen and (max-width:980px) {


	.products #main dd.hjh{
		justify-content: center;
}
	.products #main .hjk{
		width: 60%;
		padding: 0.5% 0.5% 5% 0.5%;
		clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 98%, 0px 80%);
		margin-bottom: 3%;
	}
	.products #main .hjt{
		font-size: 140%;
	}
	.products #main .hjg{
		box-sizing: border-box;
		overflow: visible;
		width: 100%;
		font-size: 85px;
		justify-content: center;
	}
.products #main .hje{
	line-height: 2;

	}
}
	@media screen and (max-width:576px) {
		.products #main .hjk{
			font-size: 5vw;
}
		.products #main .hjg{
			font-size: 14vw;
		}


}


/* new 商品ページ　*/
.main_box {
	width: 80%;
  margin: auto;
}
@media(max-width:768px){
	.main_box {
		width: 100%;
	  margin: auto;
	}
}
.catch {
	background: #0666bd;
	  padding: 14px;
	  border-radius: 10px;
	  margin-top: 4%;
	  margin-bottom: 25px;
	  font-size: 20px;
	  font-weight: bold;
	  color: #fff;
}

.product-wrap{
    max-width:1100px;
    margin:auto;
}

.badge-area{
    display:flex;
    margin-bottom:20px;
}

.badge{
    color:#fff;
    font-size:28px;
    font-weight:bold;
    padding:15px 30px;
    border-radius:50px;
		margin-left:1%;
		margin-top:1%;
}
@media(max-width:500px){
	.badge-area{
	    display:block;
	    margin-bottom:20px;
	}

}

.red{
    background:#e60012;
}

.orange{
    background:#ff8c00;
}

.product-box{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    display:block;
    flex-wrap:wrap;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
		margin-bottom:5%;
}

.image-area{
    width:45%;
    min-width:320px;
    padding:40px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.image-area img{
	display: flex;
	float:right;
    width:100%;
    max-width:350px;
}

.info-area{
    flex:1;
    padding:40px;
}

.maker{
	font-size: 18px;
	    color: #ff7a00;
	    font-weight: bold;
	    margin-top: 8px;
}
@media(max-width:767px){
	.maker{
		font-size: 20px;
		    color: #ff7a00;
		    font-weight: bold;
		    margin-top: 8px;
	}
}

.model{
    font-size:38px;
    margin:15px 0 25px;
}

.subsidy-box{
    background:#fff5cc;
    border:3px solid #ffcc00;
    border-radius:15px;
    padding:15px;
    text-align:center;
    margin-bottom:30px;
}

.subsidy-box span{
    display:block;
		font-size: 25px;
  font-weight: 800;
  color: #fff;
}

.subsidy-box strong{
    color:#d60000;
    font-size:40px;
}

.price-box{
    background:#f8f8f8;
    border-radius:15px;
    padding:30px;
    text-align:center;
}

.before-price p,
.after-price p{
    font-size:18px;
    margin-bottom:10px;
}

.before-price span{
    text-decoration:line-through;
    color:#888;
    font-size:32px;
    font-weight:bold;
}

.arrow{
    font-size:50px;
    color:#ff8c00;
    margin:15px 0;
}

.after-price span{
    color:#e60012;
    font-size:52px;
    font-weight:bold;
}

.monthly-box{
    margin-top:30px;
    background:linear-gradient(90deg,#ff8c00,#ff5500);
    color:#fff;
    text-align:center;
    padding:25px;
    border-radius:15px;
    font-size:28px;
    font-weight:bold;
}

.monthly-box strong{
    display:block;
    font-size:60px;
    line-height:1.2;
		font-weight: bold;
  color: #fff;
}
.monthly-box span {
	font-size:30px;
}

.contact-btn{
    display:block;
    text-align:center;
    margin-top:30px;
    background:#00a73c;
    color:#fff;
    text-decoration:none;
    padding:20px;
    font-size:28px;
    font-weight:bold;
    border-radius:15px;
    transition:.3s;
}

.contact-btn:hover{
    opacity:.85;
}

@media(max-width:768px){

    .product-box{
        display:block;
    }

    .image-area{
        width:100%;
    }

    .info-area{
        padding:25px;
    }

    .model{
        font-size:30px;
    }

    .after-price span{
        font-size:42px;
    }

    .monthly-box strong{
        font-size:40px;
    }

    .badge{
        font-size:16px;
				padding:10px 30px;
    }

}
@media(max-width:500px){
	.badge{
		text-align: center;
			margin: 2% 9%;
	}


}

.banner{
    width:450px;
    margin:20px auto;
    background:#fff;
    border:1px solid #ccc;
}

/* 上部 */

.top{
    display:flex;
    justify-content:space-between;
    padding:15px;
}


.left{
    width:100%;
}

.right{
    width:40%;
    text-align:center;
}
@media screen and (max-width:767px) {
	.top{
	    display:block;
	}
	.right{
	    width:100%;
	    text-align:center;
	}

}

.maker-logo{
    width:160px;
}

.maker-name{
    font-size:26px;
    font-weight:bold;
    margin-top:10px;
}



.model2{
    font-size:55px;
    font-weight:900;
    margin-top:10px;
    line-height:1;
}
@media screen and (max-width:767px) {
	.maker-name{
			font-size:17px;
			font-weight:bold;
			margin-top:10px;
	}
	.model2{
	    font-size:40px;
	    font-weight:900;
	    margin-top:10px;
	    line-height:1;
	}

}

@media screen and (max-width:767px) {
	.model2{
	    font-size:35px;
	}
}

.product-image{
    max-width:100%;
    max-height:220px;
    object-fit:contain;
}

/* 保証 */

.guarantee{
    margin:10px;
    background:#e50000;
    border:4px solid #d8a200;
    border-radius:12px;
    color:#fff;
    display:flex;
}

.box{
    width:50%;
    text-align:center;
    padding:10px;
}

.box:first-child{
    border-right:2px solid rgba(255,255,255,.3);
}

.title{
    font-size:30px;
    font-weight:bold;
}

.value{
    font-size:90px;
    font-weight:900;
    color:#ffd700;
    text-shadow:
    3px 3px 0 #a80000;
}

.value span{
    font-size:40px;
}

/* 価格 */

.price-area{
    margin:10px;
    border:3px solid #333;
    border-radius:15px;
    padding:15px;
}

.price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
@media screen and (max-width:767px) {
	.price-row{
	    display:block;
	    align-items:center;
	    justify-content:space-between;
	}


}

.label{
    width:220px;
    color:#fff;
    text-align:center;
    font-size:25px;
    font-weight:bold;
    padding:10px;
    border-radius:5px;
}

@media screen and (max-width:767px) {
	.label{
	    width:100%;
	    color:#fff;
	    text-align:center;
	    font-size:25px;
	    font-weight:bold;
	    padding:10px;
	    border-radius:5px;
	}

}

.gray{
    background:#444;
}

.red2{
    background:#ff2b00;
}

.price2{
    font-size:60px;
    font-weight:900;
}

.price2 span{
    font-size:22px;
}
 @media screen and (max-width:767px) {
	 .price2{
	     font-size:30px;
	     font-weight:900;
			 text-align: center;
	 }

	 .price2 span{
	     font-size:22px;
	 }

 }

.black{
    color:#000;
}

.red-text2{
    color:#ff2b00;
}

.arrow2{
    text-align:center;
    color:#1565ff;
    font-size:80px;
    line-height:1;
    margin:5px 0;
}
.tekiyo {

}

/* 月々 */

.monthly{
    background:#ffe91a;
    padding:20px;
    text-align:center;
}

.monthly-small{
    display:inline-block;
    background:#d50000;
    color:#fff;
    border-radius:50%;
    width:70px;
    height:70px;
    line-height:70px;
    font-size:24px;
    font-weight:bold;
    vertical-align:middle;
}

.monthly-price{
    display:inline-block;
    font-size:95px;
    color:#e50000;
    font-weight:900;
    margin-left:10px;
    text-shadow:
    3px 3px 0 #fff;
}

.monthly-price span{
    font-size:55px;
}

.monthly-tax{
    display:inline-block;
    font-size:30px;
    color:#e50000;
    font-weight:bold;
}

.monthly-text{
    margin-top:10px;
    color:#1438b3;
    font-size:34px;
    font-weight:900;
}



/*================================================
 *  商品詳細仕様ページ
 ================================================*/

  .shosai li{
		list-style-type: none;
		margin-left: 0;
	}
.shosai .shosainaiyo{
	margin-bottom: 15%;

}
 .shosai #main h4.shosaiyo {
 margin-bottom: 0.25em;
 font-size: 18px;
 color: #000000;
 font-weight: bold;
 background-color: #ffcd3c;
 padding-left: 1%;
 }
 .shosai #main h4.shosaiyo:before {
 content: "\f06d";
 font-family: FontAwesome;
 margin-right: 5px;
 }
 .shosai #main .shosaitenlogo{
 width: 100px;
 }

  .shosai .ttkino{
		margin-bottom: 4%;
		font-weight: bold;
	}
 .shosai .shonaiyo{
	 width: 30%;
	 margin-left: 1%;
	 display: inline-block;
	 background-color: #fce4a4;
	 padding: 1%;
	 border-radius: 3px;
	 box-sizing: border-box;
	 margin-bottom: 1%;
	 text-align: center;
 }
 @media screen and (max-width:767px) {
	 .shosai .shonaiyo{
		 width: 48%;
	 }
}
.shosai .shonaiyotwo{
	width: 48%;
	margin-left: 1%;
	display: inline-block;
	background-color: #fce4a4;
	padding: 1%;
	border-radius: 3px;
	box-sizing: border-box;
	margin-bottom: 1%;
	text-align: center;
	vertical-align: top;
}

@media screen and (max-width:480px) {
	.shosai .shonaiyo,.shosai .shonaiyotwo{
		font-size: 3vw!important;
		width: 85%;
		margin-left:auto;
		margin-right:auto;
		display: block;
	}
}

	.shosai .shobox{
		background: linear-gradient(#fce4a4,#ffffff);
		padding: 2%;
		border-radius: 8px;
		margin-top: 2%;
		margin-bottom: 2%;
	}
		.shosai .shoboxone{
			position: relative;
	}
	.shosai .shoboxone p{
		text-align: center;
		width: 100%;
	}
	.shoboxfour{
		width: 23%;
		margin: 1%;
		margin-left: 0;
		display: inline-block;
	}
	@media screen and (max-width:767px) {
		.shoboxfour{
			width: 45%;
		}
	}
	@media screen and (max-width:480px) {
		.shoboxfour{
		width: 100%;
		height: auto;
		margin-bottom: 5%;
}
}
	.shosai .shoboxfouchosei{
		position: relative;
		height: 200px;
	}
	@media screen and (max-width:767px) {
		.shosai .shoboxfouchosei{
		height: 250px;
	}
}
@media screen and (max-width:480px) {
	.shosai .shoboxfouchosei{
	height: auto;
}
}
.shosai .shoboxfouchosei img{
	position: absolute;
	top: 0;
	left: 0;
}
@media screen and (max-width:480px) {
	.shosai .shoboxfouchosei img{
		position: static;
		margin-left:auto;
		margin-right:auto;
		display: block;
	}
}
.shosai .shoboxfouchosei p{
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
}
@media screen and (max-width:480px) {
	.shosai .shoboxfouchosei p{
		position: static;
	}
}

	.shosai .number{
		position: absolute;
		display: block;
		height: 20px;
		width: 20px;
		left: 0;
		top: 0;
		background-color: #ffcd3c;
		font-weight: bold;
		text-align: center;
		border-radius: 50%;
		box-shadow: 3px 3px 3px #333333;
	}
	.shosai .shoboxtwo{
		width: 48%;
		display: inline-block;
		vertical-align: top;
	}
	.shosai .shoboxtwobase{
		width: 48%;
		display: inline-block;
		vertical-align: baseline;
	}
	@media screen and (max-width:480px) {
		.shosai .shoboxtwo,.shosai .shoboxtwobase{
			width: 100%;
			display: block;
		}
}
.shosai .shonor{
	background-color: transparent;
	text-align: left;
}
.shosai li.ten:before,.shosai p.ten:before,.shosai .ten:before{
	content: "◆";
	margin-right: 5px;
	color: #ff3200;
	margin-right: 2%;
}
.shosai .kodawariim,.shosai .slimim{
	float: right;
	max-width: 30%;
}
@media screen and (max-width:480px) {
	.shosai .kodawariim,.shosai .slimim{
		display: block;
		margin-left: auto;
		margin-right: auto;
		float: none;
		max-width: 100%;
	}
}
/*=================================================
 *  ごあいさつページ　greeting
=================================================*/

.greeting_main {
	margin-bottom: 5%;
}

.greeting span {
	color: #4C1300;
	font-weight: bold;
}
.greeting .column {
	background: #0666BD;
	color: #FFFFFF;
	padding: 1px 5px;
	font-weight: bold;
	border-bottom: 4px double #FFFFFF;
}
.greeting .type {
	font-weight: bold;
	margin: 0;
	color: #330A00;
}
.greeting .type:before {
	content: "\f0ad";
	font-family: FontAwesome;
	margin-right: 5px;
}
.greeting ul.grtul {
}
.greeting ul li.grtli {
	list-style: none;
	font-weight: bold;
	font-size: 16px;
	margin: 0 0 0 5px;
}
.greeting ul li.grtli:before {
	content: "\f1ae";
	font-family: FontAwesome;
	font-size: 20px;
	margin-right: 5px;
}

.greeting .thrbox{
	border: inset 10px #ed6933;
	padding: 3%;
	width: 100%;
	box-sizing: border-box;
	margin: 2% auto;
}

.greeting .thrboxlf{
	float: left;
	max-width: 30%;
	display: block;
}
.greeting .thrboxri{
	float: right;
	max-width: 55%;
	display: block;
}
@media screen and (max-width:480px) {
	.greeting .thrboxlf{
		float: none;
		max-width: 95%;
		margin: 2% auto;
}

.greeting .thrboxri{
	float: none;
	max-width: 95%;
	margin: 2% auto;
}
}

.greeting .gtbox{
	padding: 3%;
	box-sizing: border-box;
	width: 100%;
	background-color: #fce69f;
	border: 1px solid #f9ce3e;
}
@media screen and (max-width:480px) {
.greeting .grtel{
	display: block;
	margin: 1% auto;
}
}
.greeting .gtshomei{
	text-align: right;
	font-weight: bold;
}

.greeting .tosite{
	font-size: 23px;
	font-weight: bold;
	color: #0666BD;
}
@media screen and (max-width:480px) {
	.greeting .tosite{
		font-size: 4.5vw;
	}
}
.greeting .tosite_each{
	font-size: 18px;
	font-weight: bold;
}
@media screen and (max-width:480px) {
	.greeting .tosite_each{
		font-size: 4.3vw;
	}
}

.greeting .tosite_each .fa-check-square{
	color: #0666BD;
	margin-right: 1%;
}

/*=================================================
 *  施工事例ページ　case
=================================================*/

.case .case_type {
	letter-spacing: 5px;
	margin-bottom: 5%;
}
.case .caseBox {
	display: inline-block;
	margin-bottom: 1%;
}

.case_detail li{
	display: inline-block;
	margin: 1%;
	width: 30%;
	position: relative;
}
.case_detail li span.numb{
	position: absolute;
	display: block;
	border-radius: 50%;
	height: 30px;
	width: 30px;
	line-height: 30px;
	vertical-align: middle;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	background-color: #fd7e14;
	left: 0;
	top: 0;
	text-align: center;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4);
}
.case_detail img{
	display: block;
	margin-left:auto;
	margin-right:auto;
}

@media screen and (max-width:767px) {
	.case_detail .fbox{
		width: 47%;
	}
}
@media screen and (max-width:480px) {
	.case_detail .fbox{
		width: 97%;
	}
}
/*=================================================
 *  会社概要ページ　company
=================================================*/

.company_main {
	margin-bottom: 5%;
}
.company_main table {
	border: none;
}
.company_main th {
	width: 22%;
	background: #FFF;
	border-bottom: 1px solid #330A00;
	font-weight: bold;
	color: #000;
}
.company_main td {
	border-bottom: 1px solid #330A00;
	vertical-align: middle;
}
@media screen and (max-width:480px) {
	.company_main th,.company_main td {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
}
/*================================================
 *  お問い合わせページ　contact
=================================================*/

table.mailform {
	width: 100% !important;
	border: none;
	margin: 0 auto;
}
table.mailform tr {
	border-bottom: dashed 1px #aaa;
	display: block;
	padding: 10px 20px;
}
table.mailform tr th {
	/*width: 400px !important;*/
	/* box-sizing: border-box; */
    background: transparent;
	border: none;
}
table.mailform td {
	border: none;
}
table span.hisu {
	margin-left: 10px;
	background: #ff0000;
	color: #fff;
	border-radius: 6px;
	padding: 1px 5px;
}
table span.nini {
	margin-left: 10px;
	background: #c7c7c7;
	color: #fff;
	border-radius: 6px;
	padding: 1px 5px;
}
table.mailform tr:hover {
	background: #E7F3FF;
}
.contact .g-recaptcha div{
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
}
table.mailform input[type="text"], table.mailform textarea {
	width: 95%!important;
}
/*=================================================
*フォーム送信完了ページ
=================================================*/

.thanks {
	height: 100%;
}
body.thanks footer {
	bottom: 0;
}
.thanks #main{
	width: 100%;
}
@media screen and (max-width:767px) {
	body.thanks footer {
	bottom: auto;
}
}
/*=================================================
 *  よくあるご質問ページ　faq
=================================================*/

.faq_main {
	margin-bottom: 5%;
}
faq_main p {
}
faq_main p span {
	color: #0666BD;
}
.FaQ {
	margin: 20px 0;
}
.answerWP {
	display: none;
}
.questionWP {
	position: relative;
	cursor: pointer;
}
.questionWP span {
	position: absolute;
	right: 10px;
	top: 6px;
}
.question {
	padding: 8px;
	margin: 0;
	font-weight: bold;
	color: #330A00;
}
.question:before {
	font-family: FontAwesome;
	font-size: 20px;
	margin-right: 5px;
}
.answer {
	margin: 0;
	padding: 8px;
}
.answer:before {
	content: "\f118";
	font-family: FontAwesome;
	font-size: 20px;
	margin-right: 5px;
}

/* new */
.qa-2 {
  max-width: 1200px;
  margin: 0 auto 1em;
  border-bottom: 2px solid #d6dde3;
}

.qa-2 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.qa-2 summary::before,
.qa-2 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-2 summary::before {
  color: #0666BD;
  content: "Q";
}

.qa-2 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-2[open] summary::after {
  transform: rotate(225deg);
}

.qa-2 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.qa-2[open] p {
  transform: none;
  opacity: 1;
}

.qa-2 p::before {
  color: #f94c4c;
  line-height: 1.2;
  content: "A";
}
/*=================================================
 *  工事の流れページ　flow
=================================================*/

.flow_main {
	margin-bottom: 5%;
}
.flow {
	overflow: hidden;
	margin: 20px 0;
	padding: 0;
	background: #fff;
}
.imgR {
	float:right;
	margin:0 0 0.5em 0.5em;
}
.flow h4 {
	font-weight: bold;
	border-bottom: 1px dotted #0666BD;
	width: 150px;
	color: #330A00;
}
.flow h4:before {
	content: "\f1d8";
	font-family: FontAwesome;
	margin-right: 5px;
}

/* new flow */
.flow_design10 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow10 {
  padding-left: 0;
}

.flow10 > li {
  list-style-type: none;
  border: 2px solid #0666BD;
  padding: 20px;
  border-radius: 20px;
	margin-left: 0;
	margin-bottom: 4%;
}

.flow10 > li:not(:last-child) {
  margin-bottom: 40px;
  position: relative;
}

.flow10 > li:not(:last-child)::after {
  content: '';
  position: absolute;
  border: 20px solid transparent;
  width: 0;
  height: 0;
  bottom: -53px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  border-top-color: #0666BD;
}

.flow10 > li dl dt {
  font-size: 1.3em;
  font-weight: bold;
  border-bottom: 2pt dashed #ccc;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}

.flow10 > li .icon10 {
  color: #0666BD;
  margin-right: 0.5em;
}

.flow10 > li dl dd {
  margin: 0;
	font-size: 1rem;
}
@media screen and (max-width:767px) {
	.flow10 > li:not(:last-child) {
	  margin-bottom: 40px;
		margin-top:3%;
	  position: relative;
	}

	.flow10 > li dl dt {
	  font-size: 1.8em;
	}
}



/*=================================================
 *  お客様の声ページ　voice
=================================================*/

.voice_main {
	margin-bottom: 5%;
}
.voice .word {
	border-bottom: 1px solid #0666BD;
	margin-bottom: 5%;
}
.voice dl.word dt {
	color: #330A00;
	font-weight: bold;
}
.voice dl.word dt span {
	margin-left: 10px;
	font-weight: bold;
	color: #0666BD;
}
.voice dl.word dt:before {
	content:"\f075";
	font-family: FontAwesome;
	color: #330A00;
	font-size: 25px;
	margin-right: 5px;
	vertical-align: middle;
}
.voice dl.word dd {
	padding: 0 0 1.0em 0;
}
.voice li{
	list-style-type: none;
}
.voice .tbox{
	width: 47%;
	margin: 1%;
	display: inline-block;
}
@media screen and (max-width:480px) {
	.voice .tbox{
	width: 97%;
}
}
.voice .tbox img{
	margin-left: auto;
	margin-right: auto;
}
.voice .onbox{
	width: 96.8%;
	margin: 1%;
}
/*=================================================
 *  ガスエコキュートの基礎知識 kyutoki.html
=================================================*/

#kyutoki {
}
.kyutoki_main {
	margin-bottom: 5%;
	overflow: hidden;
}
.kyutoki_main h3 {
	color: #FFFFFF;
	background: #330A00;
	width: 20%;
}
@media screen and (max-width:767px) {
.kyutoki_main h3 {
	color: #FFFFFF;
	background: #330A00;
	width: 30%;
}
}
@media screen and (max-width:480px) {
.kyutoki_main h3 {
	width: 100%;
}
}
.kyutoki_main .box {
	overflow: hidden;
	clear: both;
	margin-bottom: 2%;
}
.kyutoki_main .box .right {
	float: right;
	margin-left: 2%;
}
@media screen and (max-width:480px) {
.kyutoki_main .box .right {
	float: none;
	margin: 0;
}
}
.kyutoki_main .box img {
	width: 100%;
}
.kyutoki_main .box p {
}
.kyutoki_main .box h4 {
	font-weight: bold;
	font-size: 18px;
	border-bottom: 2px solid;
}
.kyutoki_main .box h5 {
	background: none;
	color: #330A00;
	border: none;
	padding: 0%;
	font-weight: bold;
}
.kyutoki_main .box ul {
	overflow: hidden;
	margin: 0;
}
.kyutoki_main .box ul li {
	list-style: none;
	padding: 5px 0;
	border: 1px solid #330A00;
	margin: 0 5px 0 0;
	float: left;
	text-align: center;
	width: 32.5%;
	height: 430px;
}
@media screen and (max-width:480px) {
.kyutoki_main .box ul li {
	width: 99%;
	padding: 1% 0;
	margin: 1% 0;
	height: 300px;
}
}
@media screen and (max-width:320px) {
.kyutoki_main .box ul li {
	width: 99%;
	padding: 1% 0;
	margin: 1% 0;
	height: 320px;
}
}
.kyutoki_main .box ul li:nth-child(3) {
	margin: 0;
}
.kyutoki_main .box ul li p {
	text-align: left;
	padding: 2%;
}
.kyutoki_main .box ul li img {
	width: 95%;
}
@media screen and (max-width:480px) {
.kyutoki_main .box ul li img {
	width: 50%;
}
}
.kyutoki_main .box .legend {
	margin: 2% 0 3% 0;
}
.kyutoki_main .box .legend p.pink {
	line-height: 1;
	margin: 1% 0;
}
@media screen and (max-width:480px) {
.kyutoki_main .box .legend p.pink {
	font-size: 13px;
	padding: 10px 0 5px 0;
}
}
.kyutoki_main .box .legend p.pink:before {
	content: "";
	background: #ff9cc6;
	width: 50px;
	height: 50px;
	padding: 0 20px;
	margin-right: 10px;
}
.kyutoki_main .box .legend p.blue {
	line-height: 1;
	margin: 1% 0;
}
@media screen and (max-width:480px) {
.kyutoki_main .box .legend p.blue {
	font-size: 13px;
}
}
.kyutoki_main .box .legend p.blue:before {
	content: "";
	background: #a3dbff;
	width: 50px;
	height: 50px;
	padding: 0 20px;
	margin-right: 10px;
}
/*=================================================
 *  エコジョーズの基礎知識 ecojozu.html
=================================================*/

#ecojozu {
}
.ecojozu_main {
	margin-bottom: 5%;
	overflow: hidden;
}
.ecojozu_main h3 {
	color: #FFFFFF;
	background: #330A00;
	width: 20%;
}
@media screen and (max-width:767px) {
.ecojozu_main h3 {
	color: #FFFFFF;
	background: #330A00;
	width: 30%;
}
}
@media screen and (max-width:480px) {
.ecojozu_main h3 {
	width: 100%;
}
}
.ecojozu_main .box {
	overflow: hidden;
	clear: both;
	margin-bottom: 2%;
}
.ecojozu_main .box .right {
	float: right;
	margin-left: 2%;
}
@media screen and (max-width:480px) {
.ecojozu_main .box .right {
	float: none;
	margin: 0;
}
}
.ecojozu_main .box img {
	width: 100%;
}
.ecojozu_main .box p {
}
.ecojozu_main .box h4 {
	font-weight: bold;
	font-size: 18px;
	border-bottom: 2px solid;
}
.ecojozu_main .box p.out-link {
	background: #d7d7d7;
	padding: 5px 10px;
	border-radius: 5px
}
.ecojozu_main .box p.out-link:before {
	content: "\f08e";
	font-family: FontAwesome;
	margin-right: 5px;
}
/************************************
コラム .column
*************************************/
.column .column_main {
	padding: 0 0 30px;
}
.column .column_main .bread {
	font-size: 80%;
	margin: 0 0 20px;
	text-align: right;
}
.column .column_main .column_list {
	overflow: hidden;
	margin: 0 0 30px;
}
.column .column_main .column_list ul {
	margin: 0;
	padding: 10px 10px 0 30px;
}
.column .column_main .column_list ul li {
	padding: 0 0 1em;
	list-style: decimal;
}
.column .column_main h3 {
	border-bottom:dotted 2px #330A00;
	padding:5px;
	margin: 30px 0 10px;
}
.column .column_main table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	border-left:#fff;
	border-right:#fff;
	border-top:none;
	border-bottom:none;
}
.column .column_main table th {
	color:#330A00;
	border: 1px solid #330A00;
	border-left:#fff;
	padding: 10px;
	background: #fffecc;
	vertical-align: middle;
	font-weight:bold;
}
.column .column_main table td {
	border: 1px solid #330A00;
	border-right:#fff;
	padding: 10px;
}
/************************************
コラム内 .column_inside
*************************************/
.column_inside .bread {
	font-size: 80%;
	margin: 0 0 20px;
	text-align: right;
}
/***********************************
サイドエリア
************************************/
/*お役立つコラム*/
h4.column_in {
	color: #0666BD;
	font-weight: bold;
	font-size:larger;
	border-bottom: dashed 2px #CCC;
	padding: 1%;
	margin-bottom: 1%;
}
/*.sidearea_main　共通*/
.sidearea_main h3 {
	clear:both;
	background-color: #0666BD;
	padding: 1%;
	border-bottom: 5px double #fff;
	color: #fff;
}
.sidearea_main img {
	float:right;
	width: 30%;
	box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.1);
}
/***************************************
プライバシーポリシー　.privacy
****************************************/
.privacy h3 {
	background: #0666BD;
	color: #FFFFFF;
	padding: 1%;
	font-weight: bold;
}
.privacy #sub h3 {
	border-bottom: none;
}
.privacy .privacy_box {
	overflow: hidden;
	margin: 0 0 30px;
}
.privacy .pdetails p {
	margin: 0;
	padding: 0 0 1em;
}
/*================================================
 *  タブレット向けデザイン
 ================================================*/
 @media screen and (max-width:1300px) {
.footmenu{
	padding-right: 80px;
	box-sizing: border-box;
}

}
 @media screen and (max-width:1160px) {
	 nav ul {
 		width: 100%;
 	}
 }
 @media screen and (max-width:1024px) {
	.prctBox{
	width: 49%;
	}

}
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:980px) {
body {
	box-sizing: border-box;
	width: 100%;
	padding: 0 10px;
}
.headerWP {
	width: 100%;
}

#contents {
	width: 100%;
	max-width: 100%;
}
.appboxue{
font-size: 1.9vw;

}
.appboxst{
font-size: 2vw;
}

.indexPrct {
	letter-spacing: 4px;
}
.prctBox img {
	max-width: 100%;
}
/* トップナビ */
	.topNavi {
	margin-right: 0;
}

.topNaviCon h2 {
	font-size: 16px;
}
.topNaviCon p {
	line-height: 1.2;
	font-size: 16px;
}
.hot_contact {
	float: right;
	text-decoration: none;
	font-size: 14px;
}
.hot_contact:after {
	content: "\f0a9";
	font-family: FontAwesome;
	margin-left: 3px;
}
.hot_contact:hover {
	font-weight: bold;
	color: #000;
}

/* お問い合わせフォーム */
	table.mailform tr th {
	width: 250px !important;
}
table.mailform {
	max-width: 100%;
}
table.mailform input[type="text"]::placeholder, table.mailform textarea::placeholder{
 font-size: 2.0vw;
}

}




/*==============================================================
 *  スマートフォン向けデザイン　767以下
 =============================================================*/
@media screen and (max-width:767px) {
body {
	font-size: 16px;
}
header{
	background-position: top;
}
h1 {
	margin-bottom: 0;
	font-size: 13px;
}
.pctablet{
	display: none!important;
}
.tablet{
	display: block!important;
}

.contact {
	margin:10px 0;
}
.contact #sub{
	display: none;
}
#main,#main_contact {
	float: none;
	width: 100%;
	margin-bottom: 5%;
}
#sub {
	float: none;
	width: 100%;
}
.appboxue{
	font-size: 2.5vw;

}
.appboxst{
	font-size: 2.6vw;
}

.bnr ul {
	overflow: hidden;
}
.bnr li {
	float:left;
	width:100%;
	margin:0 2% 2% 0;
	font-size: 18px;
}
/* ヘッダー */
	.headerWP .contactBox {
	margin: 10px 0;
}
.contact_web, .contact_tel {
	position: static;
	top: 0;
/*	width: 49.5%;*/
	width: 100%
/*	float: left;*/
}
div.contact_web + div.contact_tel {
	margin-left: 1%;
}
.contact_tel a span, .contact_web a span {
	display: none;
}
.sp {
	display: block;
}
.pcsp{
	display:none;
}

/* グローバルナビ */
	nav {
	display: block;
	position: relative;
	width: 100%;
}
nav h3 {
	cursor: pointer;
	margin-bottom: 0;
	color: #fff;
	background: #0666BD;
	border: none;
}
nav h3:after {
	position: absolute;
	content: "\0025bc";
	top: 3px;
	right: 5px;
}
nav h3.menuOpen:after {
	position: absolute;
	content: "\0025b2";
	top: 3px;
	right: 5px;
}
nav ul {
	width:100%;
}
nav li {
	width: 50%;
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li:first-child a {
	width: 100%;
}
nav li a {
	display: block;
	width: 100%;
	border-bottom: 1px dotted #ddd;
	text-decoration: none;
}
nav .navtab{
	display: block;
}
/* トップナビ */
	.topNavi {
	margin-right:0;
}
.topNaviColumn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	float: none;
	margin-right: 0;
	margin-bottom: 10px;
}
.topNaviCon h2 {
	font-size: 16px;
}
.topNaviCon p {
	line-height: 1.2;
	font-size: 16px;
}
.hot_contact {
	float: right;
	text-decoration: none;
	font-size: 16px;
}
.hot_contact:after {
	content: "\f0a9";
	font-family: FontAwesome;
	margin-left: 3px;
}
.hot_contact:hover {
	font-weight: bold;
	color: #000;
}
/* サイドバー */
	#sub p.area {
	/*font-size: 11px;*/
}
/* トップページ */
	.prctBox {
/*	text-align: center;
	width: 100%;*/
}
/* contact */
	#main_contact .form {
	font-size: 12px;
}
/*お問い合わせフォーム*/
	table.mailform {
	width: 100% !important;
	max-width: 100%;
	display: block;
}
tbody {
	display: block;
}
table.mailform tr th, table.mailform tr td {
	display: block;
	width: 100% !important;
	max-width: 100%;
	text-align: left !important;
}
table.mailform tr th {
	padding: 1% 0 !important;
}
table.mailform tr td {
	padding: 1% 0 !important;
}
textarea.mfp {
	max-width: 95%;
}
table.mailform input, table.mailform textarea {
	font-size: 1.2em;
	width: 95% !important;
	padding: 10px;
}
table.mailform input[type="radio"],table.mailform input[type="checkbox"] {
	width: 10%!important;
}
table.mailform input#send_confirm {
	width: 5% !important;
}
.ft120 {
	font-size: 120%;
}
div#confirmBody {
	width: 100% !important;
	left: 0 !important;
}
div#confirmWindow {
	height: 100% !important;
}
table.infield {
	width: 90% !important;
	display: block;
	border: none;
}
ul.confirm_layer li {
	width: 100% !important;
}
ul.confirm_layer {
	width: 100% !important;
}
li.confirm_middle {
	background: none !important;
}
li.confirm_top {
	background: none !important;
}
ul.confirm_layer li {
	background: none !important;
}
table.infield tr th {
	width: 96% !important;
	display: block;
	text-align: left !important;
	border-bottom: none !important;
}
table.infield tr td {
	width: 96% !important;
	display: block;
	border-bottom: none !important;
}
table.infield tr {
	width: 100% !important;
	display: block;
}
table.infield tr:nth-child(even) td {
	background: #f5f5f5;
}
/* product ページ */

.products #main dl {
	height: auto;
	box-sizing: border-box;
	margin: 10px 0 20px 0;
	padding: 0;
	letter-spacing: -.4em;
	border: 1px solid #CCCCCC;
}
.products #main dt {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 100%;
	font-size: 16px;
	letter-spacing: normal;
	background-color: #EFEAE6;
	color: #572C00;
	font-weight: bold;
}
.products #main dd {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 64px;
	font-size: 16px;
	letter-spacing: normal;
	color: #333333;
	display: block;
}
.products #main dd.pnum {
	width: 100%;
	line-height: 1.5;
	font-weight: bold;
}
.products #main dd.price {
	width: 100%;
	line-height: 1.5;
	font-weight: bold;
}
.products #main dd span.p1 {
	font-weight: bold;
}
.products #main dd span.p2 {
	vertical-align: middle;
	font-size: 20px;
	font-weight: bold;
	color: #0666BD;
}
.products #main dd span.tax {
	font-size: 12px;
}
.products #main dd span.tax2 {
	font-size: 12px;
	color: #0666BD;
}
/* greeting */
	.greeting_main {
	font-size: 12px;
}
/* flow */
	.flow_main {
}
.flow h4 {
	width: 100%;
	margin-bottom: 10px;
}
.flow {
	font-size: 12px;
}
/* voice */
	.voice_main {
	font-size: 12px;
}

/* footer */
.footmenu ul{
	float: none;
	display: flex;
	justify-content: flex-start;
	left: auto;
	flex-wrap: wrap;

}
.footmenu li{
	float: none;
	width: 180px;
	left:auto;
	text-align: left;
}


	.copyright {
	font-size: 12px;
}

}

/*==============================================================
 *  スマートフォン向けデザイン　480px以下 iPhone6縦等
 =============================================================*/
@media (max-width: 480px) {
body {
	font-size: 16px;
}
.prctBox {
	text-align: center;
width: 100%;
}
.prctBox img {
	width: inherit;
}
/*お問い合わせ*/
	input.mfp {
	max-width: 95%;
}
/* トップナビ */
	.topNavi {
	margin-right:0;
}
.topNaviColumn {
	display:block;
	box-sizing:border-box;
	width:100%;
	float:none;
	margin-right:0;
	margin-bottom:10px;
}
.topNaviCon h2 {
	font-size: 16px;
}
.topNaviCon p {
	line-height: 1.2;
	font-size: 16px;
}
.hot_contact {
	float: right;
	text-decoration: none;
	font-size: 16px;
}
.hot_contact:after {
	content: "\f0a9";
	font-family: FontAwesome;
	margin-left: 3px;
}
.hot_contact:hover {
	font-weight: bold;
	color: #000;
}


/* サイドバー */
	#sub .bnr li {
	font-size: 14px;
}
#sub p.area {
	font-size: 14px;
}
#sub p.area span {
	font-size: 15px;
}
/* contact */
	#main_contact .form {
	font-size: 15px;
}

.slidesp{
	display: block!important;
}
.slidepc{
	display: none!important;
}

/*問い合わせbanner*/

.contactnewbox{
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
}

.contactnewbox .eanewbox{
	width: 100%;
	max-width: 100%;
	margin-bottom: 3%;
}

/* product ページ */
.products #main dl {
	height: auto;
	box-sizing: border-box;
	margin: 10px 0 20px 0;
	padding: 0;
	letter-spacing: -.4em;
	border: 1px solid #CCCCCC;
}
.products #main dt {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 100%;
	font-size: 16px;
	letter-spacing: normal;
	background-color: #EFEAE6;
	color: #572C00;
	font-weight: bold;
}
.products #main dd {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 64px;
	font-size: 16px;
	letter-spacing: normal;
	color: #333333;
	display: block;
}
.products #main dd.pnum {
	width: 100%;
	line-height: 1.5;
	font-weight: bold;
}
.products #main dd.price {
	width: 100%;
	line-height: 1.5;
	font-weight: bold;
}
.products #main dd span.p1 {
	font-weight: bold;
}
.products #main dd span.p2 {
	vertical-align: middle;
	font-size: 20px;
	font-weight: bold;
	color: #0666BD;
}
.products #main dd span.tax {
	font-size: 12px;
}
.products #main dd span.tax2 {
	font-size: 12px;
	color: #0666BD;
}
/* greeting */
	.greeting_main {
	font-size: 15px;
}
/* flow */
	.flow_main {
}
.flow {
	font-size: 15px;
}
.flow h4 {
	width: 100%;
	margin-bottom: 10px;
}
/* voice */
	.voice_main {
	font-size: 15px;
}
}
 @media (max-width: 500px) {
table.mailform input[type="text"]::placeholder, table.mailform textarea::placeholder{
 font-size: 4.0vw;
}
}
 @media (max-width: 320px) {
div.buttons input {
	display: inline-block;
	width: 47.905%;
}
/* product ページ */
	.products #main h4 {
	margin-bottom: 0.25em;
	font-size: 18px;
	color: #0666BD;
	font-weight: bold;
}
.products #main h4:before {
	content: "\f06d";
	font-family: FontAwesome;
	margin-right: 5px;
}
.products #main dl {
	height: auto;
	box-sizing: border-box;
	margin: 10px 0 20px 0;
	padding: 0;
	letter-spacing: -.4em;
	border: 1px solid #CCCCCC;
}
.products #main dt {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 100%;
	font-size: 16px;
	letter-spacing: normal;
	background-color: #EFEAE6;
	color: #572C00;
	font-weight: bold;
}
.products #main dd {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 64px;
	font-size: 16px;
	letter-spacing: normal;
	color: #333333;
	display: block;
}
.products #main dd.pnum {
	width: 100%;
	line-height: 1.5;
	font-weight: bold;
}
.products #main dd.price {
	width: 100%;
	line-height: 1.5;
	font-weight: bold;
}
.products #main dd span.p1 {
	font-weight: bold;
}
.products #main dd span.p2 {
	vertical-align: middle;
	font-size: 20px;
	font-weight: bold;
	color: #0666BD;
}
.products #main dd span.tax {
	font-size: 12px;
}
.products #main dd span.tax2 {
	font-size: 12px;
	color: #0666BD;
}
}




/************************************************************
 news系　共通CSS

 ***************************************************************/
.tolist {

	margin: 2% 0;
	text-align: right;

}

@media screen and (max-width:480px) {
	.tolist {

		margin: 3% 10px;
		text-align: right;

	}
}


/*====================================================================
 *  最新情報 PHP news/top-uekomi.php(index.html) OR (index.php)  CSS
 ===================================================================*/

/* news/top-uekomi.php OR index.php */


/* clearfix */
.clearfix:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { display:inline-block; }

/* for macIE \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }

iframe {
	overflow: hidden;
}

#top_newsWrap {
	margin: 1%;
}

ul#top_newsList{
	margin:0 0 15px;
	padding:0;
}

.title a{line-height:2;text-decoration:none; color:#09c; font-weight:bold;}

ul#top_newsList li{
	color:#000;
	font-size:14px;
	margin:0;
	padding:8px 0;
	margin-bottom:3px;
	/*border-bottom:1px dotted #ccc;*/
	border-bottom: dotted 2px #ccc;
	line-height:120%;
	list-style-type:none;
	font-weight: bold;
/*	display: inline-block;*/
}
a{color:#4C1300;text-decoration:underline;}
a:hover{color:#039;text-decoration:none;}

.top_up_ymd {
    font-weight: bold;
}

.top_catName{
	display:inline-block;
	padding:3px 8px;
	border:1px solid #ccc;
	border-radius:6px;
	font-size:11px;
	line-height:100%;
	margin:0 2px;
}
.top_newMark{
	display:inline-block;
	border:1px solid #F00;
	padding:1px 4px;
	font-size:11px;
	line-height:100%;
	background:#F00;
	color:#fff;
	box-shadow:1px 1px 1px #999;
	border-radius:8px;
	font-style:italic;
}
/*.top_comment{
	line-height:2.5em;
	clear:both;
	padding:3px;
	overflow:hidden;
	width:240px;
}
.top_thumbNailWrap{
	line-height:2em;
	clear:both;
	padding:5px;
	width:240px;
	height:280px;
	overflow:hidden;

}*/


/************************************************************
 news/case.php CSS (施工事例一覧)

 ***************************************************************/
#newsWrap {
  width: 100%;
}

.case-box {
	margin: 0 auto;
	width: 100%;
	border: solid 1px #ccc;
}

ul#newsList{
  margin:0 0 15px;
  padding:0;
}

ul#newsList li{
  color:#000;
  font-size:12px;
/*  margin:0;
  padding:5px 0;*/
  margin-bottom:2%;
/*  border-bottom:1px dotted #ccc;*/
  line-height:120%;
  list-style-type:none;
}

.title a	{
	text-decoration:none;
	color:#0666bd;;
	font-weight:bold;}

.catName{
  display:inline-block;
  padding:3px 8px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:11px;
  line-height:100%;
  margin:0 2px;
}
.newMark{
  display:inline-block;
  border:1px solid #F00;
  padding:1px 4px;
  font-size:11px;
  line-height:100%;
  background:#F00;
  color:#fff;
  box-shadow:1px 1px 1px #999;
  border-radius:8px;
  font-style:italic;
}

.thumbNailWrap {
    display: block;
    /*float: left;*/
    height: auto;
    margin: 10px auto;/*左のコメントと高さをそろえる*/
    overflow: hidden;
    width: 95%;
    text-align: center;
}

@media screen and (max-width:480px) {
	.thumbNailWrap {
	    display: block;
	    /*float: left;*/
	    height: auto;
	    margin: 10px auto;/*左のコメントと高さをそろえる*/
	    overflow: hidden;
	    width: 95%;
	    text-align: center;
	}
}

.case_comment {
    display: block;
    line-height: 2em;
    overflow: hidden;
    width: 95%;
   /* margin-top: 10px;右の写真と高さをそろえる*/
   margin: 0 auto;
}

@media screen and (max-width:480px) {
	.case_comment {
	    display: block;
	    line-height: 2em;
	    overflow: hidden;
	    width: 92%;
	   /* margin-top: 10px;右の写真と高さをそろえる*/
	   margin: 10px auto;
	}
}


/* Pager style（外部化可） */
.pager{
  text-align:right;
  padding:10px;
  clear:both;
}
/*ページャーボタン*/
.pager a{
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #333;
    font-size: 12px;
    padding: 3px 7px 2px;
    text-decoration: none;
  margin:0 1px;
}

/*現在のページのボタン*/
.pager a.current{
    background: #999;
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    font-size: 12px;
    padding: 3px 7px 2px;
  margin:0 1px;
    text-decoration: none;
}

.pager a:hover{
    background:#999;
    color: #fff;
}

.overPagerPattern{
  padding:0 2px ;
}

.update{
  width: 95%;
  margin: 2% auto;
}

.update .date_cat {
	margin: 1% 0;
}

.up_ymd{
/*  float: right;*/
  margin: 1% auto;

}

.catName{
  text-align: right;
  border-bottom: dotted 1px #ccc;
  font-size: 12px;
  margin: 1% auto;
}

.case_catName{
  display:inline-block;
  padding:6px 8px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:11px;
  line-height:100%;
  margin:0 2px;
}

.title{
  text-align: left;
	font-size: 17px;
	font-weight: bold;
	padding: 12px 16px 12px 16px;
	width: 95%;
	margin: 0% auto 1% auto;
	display: inline-block;
	background:#dfefff;
}

@media screen and (max-width:480px) {
	.title{
	  text-align: left;
		font-size: 17px;
		font-weight: bold;
		padding: 12px 16px 12px 16px;
		width: 100%;
		margin: 0% auto 1% auto;
		display: inline-block;
	}
}

.comment{
/*  position: absolute;*/
  width: 50%;
  margin: 3% auto;
}

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

news/news-detail.php CSS (詳細ページ１ページ)

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

.pNav {
	font-size:12px;
	margin-bottom: 10px;
}

.backORcloseBtn{
	text-align:center;
	line-height:2.5em;
	margin:15px 0;
}

@media screen and (max-width:480px) {
	.backORcloseBtn{
		text-align:center;
		line-height:1.5em;
		margin:15px 0;
	}
}

.backORcloseBtn a{
	display:inline-block;
	padding:4px 15px;
	border:1px solid #aaa;
	color: #000;
	border-radius:6px;
	text-decoration:none;
	font-size:12px;
}

.detailUpfile{
	margin:5px 0 35px;
	text-align:center;
}

.detailUpfile img{
	margin-top:50px;
	max-width:100%;
	height:auto;
}

@media screen and (max-width:480px) {
	.detailUpfile{
		margin:0 0 10px;
		text-align:center;
	}

	.detailUpfile img{
		margin-top:10px;
		max-width:100%;
		height:auto;
	}
}



#up_ymd_detail{
	text-align:right;
	margin:2% 10px 0;
	border-bottom: dotted 1px #ccc;
}

.title_detail {
	text-align: left;
	font-size: 17px;
	font-weight: bold;
	padding: 12px 16px 12px 16px;
/*	width: 51.5%;*/
/*	position: absolute;*/
	margin: -15px;
}

.entry {
    margin: 0 auto;
    width: 100%;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    border: solid 1px #ccc;
}

.entry-box {
    margin: 3% auto;
	width: 95%;
}

.entry-box h2{
	padding: 12px 16px 12px 16px;
	width: 100%;
	margin: 0;
}


@media screen and (max-width:480px) {
	.entry-box h2{
		padding: 12px 16px 12px 16px;
		width: 100%;
		margin: 0;
	}
}


#detail {
	margin: 3% auto;
}

.detailText {
	line-height: 1.6;
	padding: 0px 0px 12px 0px;
}



/*=================================================
 *  スタッフ情報ページ　staff
=================================================*/
#staffpage .staff {
	overflow:hidden;
	margin:20px 0;
	padding:0;
	background:#fff;
}
#staffpage .staff .imgL {
	float:left;
	margin: 0 10px 10px 0;
}
@media screen and (max-width:480px) {
#staffpage .staff .imgL {
	float: none;
	width: 100%;
	text-align: center;
}
}
#staffpage .staff h4 {
	font-size: 16px;
	color: #330A00;
	font-weight: bold;
	padding: 0 0 0.25em 0;
	margin-top: 2px;
}
#staffpage .staff h4:before {
	content: "\f0a1";
	font-family: FontAwesome;
	margin-right: 5px;
	font-size: 30px;
	vertical-align: middle;
	background: #330A00;
	color: #FFFFFF;
	border-radius: 30px;
	padding: 10px;
}