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

 *{
	 box-sizing: border-box;
   word-break: break-all;
 }
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;
	vertical-align:baseline;
	background:transparent;
	font-weight:normal;
}
html{
  font-size: 62.5%;
}
body {
	line-height:1
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block
}
ul li{
	list-style-type: none;
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:none
}
a {
	margin:0;
	padding:0;
	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
}
@media screen and (max-width:768px) {
  html{
    font-size: 70%;
  }
}

/*================================================
 *  一般・共通設定
 ================================================*/

body {
	width: 100%;
	margin: 0 auto;
	font-size: 1.6rem;
	color: #333333;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	line-height: 1.6;
	position: relative;
}
header{
  position: relative;
  z-index:3;
}
.headerWP {
	width: 1000px;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
	margin-left: auto;
  margin-right: auto;
}
.headlogo{
  width: 350px;
}

@media screen and (max-width:980px) {
.headerWP {
	width: 100%;
}
.headlogo{
  width: 250px;
}

}

@media screen and (max-width:768px) {
.headerWP {
	justify-content: center;
}

.headtp{
  justify-content: flex-start;
  margin-top: 0!important;
  margin-bottom: 0!important;
  padding-right: 50px;
}

}

@media screen and (max-width:576px) {
.headlogo{
  width: 300px;
  max-width: 95%;
  margin-top: 5%;
}
}
#contents {
	width: 1000px;
	margin: 10px auto;
}
.h1soto{
    background: #333;
}
h1 {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	color: #fff;
	font-size: 1.4rem;
  padding-right: 50px;
}
h1 a {
	color:#000;
	text-decoration:none;
}
h1 a:hover {
	color: #e78f00;
	text-decoration: underline;
}
h2 {
	margin-bottom: 0.5em;
	padding-left: 10px;
	color: #000;
	border-left: 5px solid #d30202;
	font-weight: bold;
	margin: 0 0 20px 0;
}
h3 {

}
h5 {

}
h6 {

}
p {
	margin: 0.5em 0 1em 0;
}
img {
	vertical-align:bottom;
}
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;
}

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%;
}

.tablet,.sp{
  display: none;
}
@media screen and (max-width:768px) {
  .tablet{
    display: block;
  }
  .pc_tablet{
    display: none;
  }
}
@media screen and (max-width:768px) {
  .sp{
    display: block;
  }
}
.container{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  max-width: 95%;
}
.tl0{
  top: 0;
  left: 0;
}
.z2{
  z-index:2;
}
.bg_machi2im{
  background: url(../img/common/bg_machi2.png);
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;

}

.bg_machi3im{
  background: url(../img/common/bg_machi3.jpg);
  background-size: cover;
}
.bg_bl4{
  background: url(../img/common/bg_bl_4.jpg);
  background-size: cover;
}
.bg_oreaim{
  background: url(../img/common/bg_r.jpg);
  background-size: 100%;
}
.bg_marubl{
  background: url(../img/common/bg_bl_3.jpg);
  background-size: 100%;
}
.bg_marubl2{
  background: url(../img/common/bg_bl_2.jpg);
  background-size: 100%;
}
.bg_marubls{
  background: url(../img/common/bg_bl_1.png);
  background-size: 100px;
}
.bg_brim{
  background: url(../img/common/bg_br.jpg);
  background-size: cover;
}
.bg_whtm{
  background: rgba(255,255,255,0.7);
}
.bg_blgrad{
  background: linear-gradient(#d30202, transparent 10%, transparent 90%, #d30202);
}
.bg_usg{
  background: #ccc;
}

.btn_grprimary{
  background: linear-gradient(#3789fc, #d30202);
  color: #fff;
}
.bg_ograd{
  background: linear-gradient(#d30202 50%,#960000 50%);
}
.bg_rgrad{
  background: linear-gradient(#5d5f6d 50%,#222432 50%);
}
.bg_to{
  background: linear-gradient(to top right,rgba(255,255,255,1) 60%,rgba(255,255,255,0.5)),url(../img/common/bg_t.png), #fff;
  background-position: top right;
  background-size: cover, 35%, cover;
  background-repeat: no-repeat;
}
.bg_yok{
  background: linear-gradient(to top right,rgba(255,255,255,1) 60%,rgba(255,255,255,0.8)),url(../img/common/bg_qa.png), #fff;
  background-position: top right;
  background-size: cover, 50%, cover;
  background-repeat: no-repeat;
}
.fs-tt{
  font-size: calc(2.5rem + 2vw)!important;
}

.fs-0{
  font-size: calc(2rem + 1.3vw)!important;
}
.f_ramp {
font-family: 'Noto Sans JP', sans-serif;
}
.marker{
  background: linear-gradient(transparent 60%, #ff0 60%);
}
.marub{
  opacity: 0.3;
  z-index: -1;
}
.marub .maruea{
  width: 200px;
}
.marub .maruea:nth-child(odd){
  width: 400px;
}
.marub .maruea:nth-child(3n){
  width: 100px;
}
.gridcenter{
  display: grid;
  place-items: center;
}

.rounded{
  border-radius: 0.5rem!important;
}
@media screen and (max-width:768px) {
  .marub .maruea{
    width: 100px;
  }
  .marub .maruea:nth-child(odd){
    width: 200px;
  }
  .marub .maruea:nth-child(3n){
    width: 50px;
  }

}
/*================================================
 *  ヘッダー
 ================================================*/
.headerWP {
	position:relative;
}

/*================================================
 *  グローバルナビゲーション
 ================================================*/
 .navibox{
   background: linear-gradient(#d30202,#d30202 50%,#960000 50%,#960000);
   padding: 1%;
   position: relative;
   z-index: 3;
 }
nav {
}
nav ul {
  width: 100%;
  display: flex;
  margin-bottom: 0;
  justify-content: space-between;
}
nav li {
  list-style-type: none;

}
nav li a {
	color: #fff;
	font-weight: bold;
	text-decoration:none;
  font-size: 2rem;
  text-shadow: 2px 2px 2px #333;
  display: block;
}
nav li a:hover {
  color: #ff0;
  animation: okiku 0.5s ease forwards;
  text-shadow: none;
}

@keyframes okiku {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

li.menu-searchbox{
  display: none!important;
}


/*=================================================
 *  検索
=================================================*/
.seboxsoto{
	padding: 2%;

}

.sebox{
	display: flex;
  align-items: center;
	flex-wrap: wrap;
	width: 1000px;
	max-width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin: auto;
	justify-content: center;
}
.sear_cate{
	width: 20%;
	margin: 0.5%;
  display: grid;
  place-items: center;
  background: #fff;
  padding-top: 1%;
  padding-bottom: 1%;
  box-shadow: 1px 1px 1px #ccc inset;
  border-radius: 3px;
}
.sear_word{
	width: 40%;
	margin: 0.5%;
  display: grid;
  place-items: center;
  background: #fff;
  padding-top: 1%;
  padding-bottom: 1%;
  box-shadow: 1px 1px 1px #ccc inset;
  border-radius: 3px;
}
.sear_word input{
  width: 300px;
}
.sear_kensaku input{
  background: #333;
  color: #fff;
  font-size: 2.0rem;
  font-weight: bold;
  padding: 0.5%;
  display: block;
  width: 80px;
  border-radius: 3px;
  border: none;
  box-shadow: 1px 1px 2px #333;
}

@media screen and (max-width:900px) {
  .sear_cate{
    width: 45%;
}
  .sear_word{
    width: 70%;
}
}
@media screen and (max-width:576px) {

.sear_word input{
  display: block;
  width: 90%;
}
.sear_word input::placeholder{
  font-size: 2vw;
}
.sear_word div{
  width: 100%;
}
}
footer {
	clear:both;
	width: 100%;
}
.footmenu {
	width:100%;
	padding:20px 0;
	overflow:hidden;
}
.footmenu ul {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}
.footmenu li {
  margin: 2%;
  list-style-type: none;
}
.footmenu li:last-child {
  width: 100%;
  text-align: center;
}
.footmenu li a {
	text-decoration: none;
  color: #333;
  font-weight: bold;
}
.fomenuin{
  margin: 1%;
  width: 48%;
}
#menu-footmenu2 .menu-searchbox,#menu-menufoot .menu-searchbox,#menu-footmenu3 .menu-searchbox{
  display: none;
}
footer .nolink{
  background: linear-gradient(to right,#d30202 90%, #fff);
  padding: 1% 5px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2%;
}
.fomenu li a{
  text-decoration: none;
  font-weight: bold;
  color: #333;
  padding-left: 5px;
}
.copyright {
	clear: both;
	padding: 5px 0;
	font-size: 1.4rem;
	background: #000;
	color: #FFFFFF;
}
.fmn ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}
.fmn li a{
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  padding-left: 10px;
  border-left: solid #fff 1px;
  padding-right: 10px;
}
.fmn li:first-child a{
  border-left: none;

}
.fmnbl li a{
  color: #000;
  border-left: solid #000 1px;
}


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

.fomenuin{
  width: 100%;
}

.copyright {
	padding-bottom: 20%;
}
.fmn.bg_ograd{
  background: #960000!important;
}
.fmn li{
  width: 100%;

}
.fmn li a{
  border-left: none;
}

.fmn li a:before {
  font-family: "Font Awesome 5 Free";
  content: '\f0a9';
  font-weight: bold;
  color: yellow;
  margin-right: 5%;
}
.fmnbl li a:before {
  color: #333;
}

}



/*================================================
 *  ページトップへの戻り
 ================================================*/
 .totop {
 	position:fixed;
 	bottom:100px;
 	right:15px;
  z-index: 99;
 }

.totop a {
	display:block;
	text-decoration:none;
	text-align: right;
}
.totop img {
}
.totop img:hover {
	opacity: 0.8;
}
.totop .tomoline{
	display: block;
	margin-bottom: 2%;
}
@media screen and (max-width:768px) {
.totop {
 position:fixed;
 bottom:150px;
}
}
@media screen and (max-width:576px) {
 .totop {
   bottom:80px;
}

.totop img{
  width: 50px;
}


}
/*================================================
 *  クラス
 ================================================*/

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

.catchdt{
  position: relative;
  z-index:2;
}
.catchdt .slick-list{
/*  padding-top: 10px!important;
  padding-bottom: 10px!important;
  background: url(../img/common/bg_bl_3.jpg);*/
  box-shadow: 0 0 3px #af0a0a,0 0 10px #af0a0a;
}



/* スライドショー */

.slideyo{
	position: relative;
	overflow: hidden;
  padding-top: 25px;
  background: url(../img/common/bg_k.jpg);
  background-size: cover;
}

.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: #ff5a00;
	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;
}


.slider5-wrap {
  width: 950px;
	max-width: 100%;
  margin: 0 auto;
  position: relative;
	line-height: 0;
}
.slider5-wrap li{
	margin-left: 0;
}
.slider-5 .slick-slide {

  overflow: hidden;
}
.slider-5 .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dots-5 .slick-dots,.dots-6 .slick-dots {
  text-align: center;
}
.dots-5 .slick-dots li,.dots-6 .slick-dots li {
  display: inline-block;
  width: 100px;
  height: 6px;
  margin: 4px;
  background: #eaeaea;
  cursor: pointer;
}
.dots-5 .slick-dots button,.dots-6 .slick-dots button {
  display: block;
  width: 0%;
  height: 6px;
  margin: 0;
  font-size: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  outline: none;
  background: #0a467d;
  cursor: pointer;
}
.dots-5 .slick-dots .slick-active button,.dots-6 .slick-dots .slick-active button {
  background: #0a467d;
  opacity: 1;
}
.slick-dots li button:before{
  display: none;
}
/***********************
topbanner
***********************/
.topbannersoto{
  padding:  1%;
  background-size: 100%;
}
.topbannerbox{
  width: 1100px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
  display :flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.topbannerea{
  width: 548px;
  max-width: 100%;
  margin: 1% 0;

}


/****************
施工事例
*****************/
.scim{
  width: 100px;
  left: 0;
  bottom:0;
}


/****************
よくある質問
*****************/
.yokim{
  width: 40%;
  right: 0;
  bottom:0;
}



/***********************
lineup
***********************/
.lineupboxsoto{
  padding: 2% 1%;
}
.lineupbox{
  width: 1000px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.indexPrct {
	display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
.indexPrct a:hover {
	opacity: 0.6;
}
.prctBox {
 width: 30%;
 margin: 0.5%;
}
@media screen and (max-width:576px) {
  .prctBox {
    width: 49%;
}
}

/***********************
osusumes
***********************/
.osusumes .slick-prev{
    left: -75px!important;
}
.osusumes .slick-next {
    right: -40px!important;
}
.osusumes .slick-prev, .osusumes .slick-next{
FONT-VARIANT: none;
}
.osusumes .slick-prev::before{
font-family: 'Font Awesome 5 Free';
content: '\f0a8';
font-weight: 900;
font-size: 5rem;
color: #fff!important;
}

.osusumes .slick-next::before{
font-family: 'Font Awesome 5 Free';
content: '\f0a9';
font-weight: 900;
font-size: 5rem!important;
color: #fff!important;

}

.osusumes .slick-prev:before,.osusumes .slick-next:before{
  color: #d30202;
  background: transparent;
  opacity: 1;
}

.osusumes .slick-next {
    right: -20px;
}
.osusumes .slick-prev {
    left: -20px;
}


@media screen and (max-width:768px) {
.osusumes .slick-prev::before,.osusumes .slick-next::before{
font-size: 18px!important;
}
.osusumes .slick-prev {
    left: -40px!important;
}

}
/***********************
point
***********************/
/* 給湯器の知識 */
.pointsoto{
}

.point {
	overflow: hidden;
  background: #fff;
	margin-bottom: 2%;
  width: 1000px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 1%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.point .box{
  width: 48%;
  margin: 1%;
  border-bottom: 2px solid #ff3200;

}

.point .cmt{
  color: #333;
  font-weight: bold;
  padding: 2%;
}
@media screen and (max-width:768px) {
  .point .box{
    width: 100%;
}
}


/***********************
voice
***********************/
.voice .slick-prev:before,.voice .slick-next:before{
  color: #333;
  background: transparent;
  opacity: 1;
}

.voice .slick-next {
    right: -20px;
}
.voice .slick-prev {
    left: -20px;
}

/***********************
appeal
***********************/
.appealsoto{
  background: #fcf3db;
  padding: 2% 1%;
}

.appealbox{
  width: 1000px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}


.appealbox .riyutt{
	text-align: center;
	font-size: 3.5rem;
	font-weight: bold;
	color: #0c2e90;
	margin-top: 5%;
}
.appealbox .riyuchu{
	color: #f27b07;
	font-weight: bold;

}
.appealbox hr{
	border-top: #0c2e90 solid 3px;
	margin-top: 3%;
	margin-bottom: 3%;
}
.appealbox .riyubox{
	display: flex;
  flex-wrap: wrap;
}
.appealbox .riyuinsidebox{
	display: flex;
	width: 48%;
	margin-right: 1%;
	background: linear-gradient(#722e04,#ff3200);
	padding: 2%;
	box-sizing: border-box;
	margin-bottom: 3%;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  border-radius: 8px;
}
.appealbox .riyuinsidebox:nth-child(even){
	margin-right: 0;
}

.appealbox .riyuboxlf{
	width: 40%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.appealbox .riyuboxlf img{
  padding: 2%;
  background: linear-gradient(45deg,#492f00,#9e9601,#fcf34e,#9e9601,#492f00);
}
.appealbox .riyuboxri{
	width: 55%;
	margin-left: 5%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.appealbox .riyunum{
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
	padding: 3%;
	box-sizing: border-box;
	font-size: 1.8rem;
}
.appealbox .riyudet{
	color: #ffffff;
	font-size: 1.5rem;
	margin-left: 3%;
}

@media screen and (max-width:768px) {
  .appealbox .riyutt{
    font-size: 2.5rem;
}
  .appealbox .riyubox{
    flex-wrap: wrap;
    justify-content: center;
  }
  .appealbox .riyuinsidebox{
    width: 90%;
    margin: 0;
    margin-bottom: 3%;
  }
}
@media screen and (max-width:576px) {
  .appealbox .riyubox {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .appealbox .riyuinsidebox {
    flex-wrap: wrap;
  }
.appealbox .riyuboxlf{
	width: 100%;
  margin-bottom: 2%;
}
.appealbox .riyuboxlf img{
  width: 60%;
}
.appealbox .riyuboxri{
	width: 100%;
  margin:0;
}
.appealbox .riyunum {
  margin: 0;
}
}


/***********************
int
***********************/



/***********************
taioarea
***********************/

.taioareasoto{
  padding: 2% 1%;
}

.taioareabox{
  width: 1000px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}


.taioareabox .taioareatt{
	text-align: center;
	font-size: 3.5rem;
	font-weight: bold;
	color: #0c2e90;
	margin-top: 5%;
}
.taioareabox .taioareachu{
	color: #f27b07;
	font-weight: bold;

}
.taioareabox hr{
	border-top: #0c2e90 solid 3px;
	margin-top: 3%;
	margin-bottom: 3%;
}


/***********************
nagare
***********************/

.nagaresoto{
  background: #fcf3db;
  padding: 2% 1%;
}

.nagarebox{
  width: 1000px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}


.nagarebox .nagarett{
	text-align: center;
	font-size: 3.5rem;
	font-weight: bold;
	color: #333;
	margin-top: 5%;
}
.nagarebox .nagarechu{
	color: #fff;
	font-weight: bold;

}
.nagarebox hr{
	border-top: #333 solid 3px;
	margin-top: 3%;
	margin-bottom: 3%;
}

.nagarebox .nagarebox{
	display: flex;
  background: #fff;
  border-radius: 8px;
  padding: 2%;
  flex-wrap: wrap;
}
.nagarebox .nagareinsidebox{
	width: 48%;
	margin: 1%;
	padding: 2% 2% 1% 2%;
	border-radius:8px;
	box-sizing: border-box;
	margin-bottom: 3%;
	color: #0c2e90;
	display: flex;
	border: double 5px #d30202;
}

.nagarebox .nagareinsidebox .nagarelf{
	display: flex;
	align-items: center;
	justify-content: 	center;
	width: 30%;
}
.nagarebox .nagareinsidebox .nagarelf img{
	border-radius: 8px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
.nagarebox .nagareinsidebox .nagareri{
	display: flex;
	flex-direction: column;
	justify-content: 	center;
	margin-left: 5%;
	width: 65%;

}
.nagarebox .nagaredet{
	font-size: 1.5rem;
	text-shadow: 0 0 5px #fff,0 0 5px #fff;
	margin-left: 7%;
}
.nagarebox .nagarenum{
	font-weight: bold;
	font-size: 1.8rem;
	padding: 1%;
	text-shadow: 0 0 5px #fff,0 0 5px #fff;
	border-bottom: solid #ccc 1px;
	padding-bottom: 1%;
	margin-bottom: 2%;
}
@media screen and (max-width:768px) {
  .nagarebox .nagarett{
    font-size: 2.5rem;
}
  .nagarebox .nagarebox{
    justify-content: center;
}
  .nagarebox .nagareinsidebox{
    width: 90%;
}

}


@media screen and (max-width:576px) {
.nagarebox .nagareinsidebox{
	width: 85%;
  flex-wrap: wrap;
}

.nagarebox .nagareinsidebox .nagarelf{
	width: 100%;
  margin-bottom: 2%;
}
.nagarebox .nagareinsidebox .nagarelf img{
	width: 60%;
}
.nagarebox .nagareinsidebox .nagareri{
	width: 100%;
  margin: 0;
}
}




/*=================================================
 *  ごあいさつページ　greeting
=================================================*/

.greeting_main {
	margin-bottom: 5%;
}
.greeting p {
}
.greeting p span {
	color: #d30202;
	font-weight: bold;
}
.greeting .column {
	background: #d30202;
	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: 1.6rem;
	margin: 0 0 0 5px;
}
.greeting ul li.grtli:before {
	content: "\f1ae";
	font-family: FontAwesome;
	font-size: 2.0rem;
	margin-right: 5px;
}
/*=================================================
 *  会社概要ページ　company
=================================================*/

.company_main {
	margin-bottom: 5%;
}
.company_main table {
	border: none;
}
.company_main th {
	width: 22%;
	border-bottom: 1px solid #d30202;
	font-weight: bold;
	color: #d30202;
  background: #fff;
}
.company_main td {
	border-bottom: 1px solid #d30202;
	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: #fcedef;
}
.contact.g-recaptcha div{
	margin: 5% auto;
}

/*=================================================
*フォーム送信完了ページ
=================================================*/

.thanks {
	height: 100%;
}
body.thanks footer {
	bottom: 0;
	position: absolute;
	left: 0;
}
.thanks #main{
	width: 100%;
}
@media screen and (max-width:768px) {
	body.thanks footer {
	bottom: auto;
}
}

/*=================================================
 *  よくあるご質問ページ　faq
=================================================*/

.faq_main {
	margin-bottom: 5%;
}
faq_main p {
}
faq_main p span {
	color: #d30202;
}
.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 {
	content: "\f059";
	font-family: FontAwesome;
	font-size: 2.0rem;
	margin-right: 5px;
}
.answer {
	margin: 0;
	padding: 8px;
}
.answer:before {
	content: "\f118";
	font-family: FontAwesome;
	font-size: 2.0rem;
	margin-right: 5px;
}
/*=================================================
 *  ガス給湯器の基礎知識 kyutoki.html
=================================================*/

#kyutoki {
}
.kyutoki_main {
	margin-bottom: 5%;
	overflow: hidden;
}
.kyutoki_main h3 {
	color: #FFFFFF;
	background: #330A00;
	width: 20%;
}

.kyutoki_main .box {
	overflow: hidden;
	clear: both;
	margin-bottom: 2%;
}
.kyutoki_main .box .right {
	float: right;
	margin-left: 2%;
}

.kyutoki_main .box img {
	width: 100%;
}
.kyutoki_main .box p {
}
.kyutoki_main .box h4 {
	font-weight: bold;
	font-size: 1.8rem;
	border-bottom: 2px solid;
}
.kyutoki_main .box h5 {
	background: none;
	color: #330A00;
	border: none;
	padding: 0%;
	font-weight: bold;
  margin-top: 5%;
  margin-bottom: 2%;
}
.kyutoki_main .box ul {
	overflow: hidden;
	margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.kyutoki_main .box ul li {
	list-style: none;
	padding: 5px 0;
	border: 1px solid #330A00;
	margin: 0 5px 0 0;
	text-align: center;
	width: 31%;
  margin: 0 1%;
}
.kyutoki_main .box ul li p {
	text-align: left;
	padding: 2%;
}
.kyutoki_main .box ul li img {
	width: 95%;
}

.kyutoki_main .box .legend {
	margin: 2% 0 3% 0;
}
.kyutoki_main .box .legend p.pink {
	line-height: 1;
	margin: 1% 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;
}

.kyutoki_main .box .legend p.blue:before {
	content: "";
	background: #a3dbff;
	width: 50px;
	height: 50px;
	padding: 0 20px;
	margin-right: 10px;
}

@media screen and (max-width:768px) {
.kyutoki_main h3 {
	color: #FFFFFF;
	background: #330A00;
	width: 30%;
}
}
@media screen and (max-width:576px) {
.kyutoki_main h3 {
	width: 100%;
}
.kyutoki_main .box .right {
	float: none;
	margin: 0;
}
.kyutoki_main .box .legend p.blue {
	font-size: 1.3rem;
}
.kyutoki_main .box .legend p.pink {
	font-size: 1.3rem;
	padding: 10px 0 5px 0;
}
.kyutoki_main .box ul{
  justify-content: center;
}
.kyutoki_main .box ul li img {
	width: 50%;
}
.kyutoki_main .box ul li {
	width: 99%;
	padding: 1% 0;
	margin: 1% 0;

}
}
@media screen and (max-width:320px) {
.kyutoki_main .box ul li {
	width: 99%;
	padding: 1% 0;
	margin: 1% 0;

}
}
/*=================================================
 *  エコジョーズの基礎知識 ecojozu.html
=================================================*/

#ecojozu {
}
.ecojozu_main {
	margin-bottom: 5%;
	overflow: hidden;
}
.ecojozu_main h3 {
	color: #FFFFFF;
	background: #330A00;
	width: 20%;
}
.ecojozu_main .box {
	overflow: hidden;
	clear: both;
	margin-bottom: 2%;
}
.ecojozu_main .box .right {
	float: right;
	margin-left: 2%;
}

.ecojozu_main .box img {
	width: 100%;
}
.ecojozu_main .box p {
}
.ecojozu_main .box h4 {
	font-weight: bold;
	font-size: 1.8rem;
	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;
}
@media screen and (max-width:768px) {
.ecojozu_main h3 {
	color: #FFFFFF;
	background: #330A00;
	width: 30%;
}
}
@media screen and (max-width:576px) {
.ecojozu_main h3 {
	width: 100%;
}
.ecojozu_main .box .right {
	float: none;
	margin: 0;
}
}


/***************************************
プライバシーポリシー　.privacy
****************************************/
.privacy h3 {
	background: #d30202;
	color: #FFFFFF;
	padding: 1px 5px;
	font-weight: bold;
	border-bottom: 4px double #FFFFFF;
}
.privacy .privacy_box {
	overflow: hidden;
	margin: 0 0 30px;
}
.privacy p {
	margin: 0;
	padding: 0 0 1em;
}

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

 ***************************************************************/
.news_boxsoto{
  padding: 2% 1%;
}
.news_box{
  width: 1000px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.eali{
  padding-bottom: 1%;
  border-bottom: dashed 1px #ccc;
  margin-bottom: 2%;
  list-style-type: none;
  text-indent: -10px;
  padding-left: 25px;
}

.eali a{
  font-weight: bold;
  font-size: 1.8rem;
  color: #000;
}

.tolist {

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

}

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

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

	}
}


/*=================================================
 *  スタッフ情報ページ　staff
=================================================*/
#staffpage .staff {
	overflow:hidden;
	margin:20px 0;
	padding:0;
	background:#fff;
}
#staffpage .staff .imgL {
	float:left;
	margin: 0 10px 10px 0;
}

#staffpage .staff h4 {
	font-size: 1.6rem;
	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: 3.0rem;
	vertical-align: middle;
	background: #330A00;
	color: #FFFFFF;
	border-radius: 30px;
	padding: 10px;
}

@media screen and (max-width:576px) {
#staffpage .staff .imgL {
	float: none;
	width: 100%;
	text-align: center;
}
}

/*********************
responsive navi
***********************/

#hamb {
	  padding:10px;
	  background: #ff0000;
		position: fixed;
		right: 5px;
		top: 30px;
		z-index: 9999;
	}

	#nav-drawer {
	  position: relative;
	}

	/*チェックボックス等は非表示に*/
	.nav-unshown {
	  display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
	  display: inline-block;
	  width: 30px;
	  height: 22px;
	  vertical-align: middle;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  position: absolute;
	  height: 3px;/*線の太さ*/
	  width: 25px;/*長さ*/
	  border-radius: 3px;
	  background: #fff;
	  display: block;
	  content: '';
	  cursor: pointer;
	}
	#nav-open span:before {
	  bottom: -8px;
	}
	#nav-open span:after {
	  bottom: -16px;
	}

	/*閉じる用の薄黒カバー*/
	#nav-close {
	  display: none;/*はじめは隠しておく*/
	  position: fixed;
	  z-index: 99;
	  top: 0;/*全体に広がるように*/
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: black;
	  opacity: 0;
	  transition: .3s ease-in-out;
	}

	/*中身*/
	#nav-content {
	  overflow: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;/*最前面に*/
	  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	  max-width: 330px;/*最大幅（調整してください）*/
	  height: 100%;
	  background: #fff;/*背景色*/
	  transition: .3s ease-in-out;/*滑らかに表示*/
	  -webkit-transform: translateX(-105%);
	  transform: translateX(-105%);/*左に隠しておく*/
	}
#nav-content .navtt{
	font-size: 2rem;
	background: #ff0000;
	color: #fff;
	font-weight: bold;
	padding: 2%;
	text-align: center;
}
	#nav-content ul{
		padding-bottom: 30%;
}
#nav-content ul.sub-menu{
  padding-bottom: 0;
}
	#nav-content ul li{
		margin-left: 5%;
		font-weight: bold;
		font-size: 1.3rem;
		color: #ff0000;
		margin-top: 2%;
    display: block;
    float: none;
    background-color: transparent;
    border: none;
    height: auto;
    text-indent: -10px;
    padding-left: 10px;
	}

	#nav-content ul li a{
		text-decoration: none;

}
#nav-content ul li:hover,#nav-content ul li a:hover{
	color: #000;
}
	#nav-content ul li::before{
		content: "\f0a9";
		font-family: "Font Awesome 5 Free";
		margin-right: 1%;
}

	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
	  display: block;/*カバーを表示*/
	  opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
	  -webkit-transform: translateX(0%);
	  transform: translateX(0%);/*中身を表示（右へスライド）*/
	  box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

#nav-content ul li.menu-searchbox label{
  margin-bottom: 5%;
}
  #nav-content ul li.menu-searchbox::before {
    display: none;

  }


  /*================================================
 *  otoiawase
 ================================================*/
 .otoiawase_new{
 	padding: 5% 2%;
	background: #ccc;
	position: relative;
  background-size: cover;
 }
 .otoiawase_newbox{
   width: 1000px;
   margin-left: auto;
   margin-right: auto;
   max-width: 95%;
}
  .otoiawase_new .otoiawase_new_ue{
 	 text-align: center;
 	 font-weight: bold;
 	 color: #333;
 	 font-size: 1.8rem;
  }
.otoiawase_newfl{
	display: flex;
	justify-content: stretch;
}
.otoiawase_newfl a{
	font-weight: bold;
	font-size: 1.8rem;
	text-decoration: none;
	background: #1d97f4;
	border-radius: 8px;
	padding: 2%;
	margin: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-grow: 1;
	background: #fff;
	box-shadow: 2px 2px 5px inset #513300;
  color: #333;
}
@media screen and (max-width:576px) {
.otoiawase_new .otoiawase_new_ue{
  font-size: 3.3vw;
}
.otoiawase_newfl{
  display: block;
}
  .otoiawase_newfl a{
    display: block;
    width: 80%;
    margin: 2% auto;
  }
}

/******************************
form
*******************************/
.contact{
  border: none;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.contact td{
  border-bottom: solid 1px #ccc;
  padding-bottom: 2%;
  margin-bottom: 2%;
  font-size: 15px;
  font-weight: bold;
  vertical-align: middle;
}
.contact td:first-child{
  width: 300px;
}
.contact .red{
  font-weight: bold;
  font-size: 80%;
  background: #d30202;
  padding: 1%;
  border-radius: 3px;
  margin-left: 2%;
  color: #fff;
}
.contact td input[type="text"],.contact td textarea,.contact td input[type="email"]{
  width: 300px;
}

@media screen and (max-width:768px) {
  .contact{
    width: 95%;
}
.contact td{
  display: block;
  width: 100%;
}
.contact td:first-child{
  border-bottom: none;
}
.contact td input[type="text"],.contact td textarea,.contact td input[type="email"]{
  width: 100%;
}
}


/*************************
cta
************************/

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

.contactsp a{
	text-decoration: none;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	display: grid;
	place-items: center;
	font-size: 18px;
	font-weight: bold;
	padding: 2%;

}
@media screen and (max-width:600px) {
	.contactsp a{
		font-size: 3vw;
    font-size: 6vw;/*電話番号なしの場合*/

}
}
.contactsp a .smj{
	font-size: 60%;
}
.contactsp a:hover{
	background: #000;
	color: #fff;
}
a.ctdenwa{
	background: #f00;
	width: 45%;
  display: none;/*電話番号なしの場合*/

}
a.ctweb{
	background: #c42082;
	width: 27.5%;
    width: 100%;/*電話番号なしの場合*/
}
a.ctline{
	background: #00b900;
	width: 27.5%;
  display: none;/*電話番号なしの場合*/

}

/**************
pagenation
*************/
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
ul.page-numbers{
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
}
ul.page-numbers,.page-numbers li {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 10px;
}

.page-numbers li{
  list-style-type: none;
  display: inline-block;
}

.page-numbers li a{
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
.page-numbers li .current{
  color: #f00;
  font-weight: bold;

}


/**********************
shohin
**********************/
.kinobox{
  display: flex;
  flex-wrap: wrap;
}
.kinobox span{
  background: #ccc;
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;
  border-radius: 3px;
  margin: 1%;
  padding: 1%;
  display: inline-block;
}




/**********************
sekojirei
**********************/
.sekojireip img{
  margin: 1%;
}