@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*
font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho",Georgia, serif;
font-family: Noto Sans Japanese,Noto Sans JP,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", arial, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
*/
html,
body {margin: 0px;margin-bottom: 0px;margin-right: auto;margin-left: auto;font-size: 16px;
font-family: Noto Sans Japanese,Noto Sans JP,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", arial, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
line-height: 1.6em;-webkit-font-smoothing: antialiased;letter-spacing: 1px; background: #FFF;}
article,aside,details,figcaption,figure,footer,hgroup,
menu,nav,section {display: block;padding: 0px;}
p,td,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4 {margin: 0px;padding: 0px;list-style: none;}
table , td, th {border-collapse: collapse;}
img {border: 0px; font-size: 0; line-height: 0;vertical-align:bottom; max-width: 100%;transition: 0.5s;height: inherit;}

a,img {transition: 0.5s;text-decoration: none;}
a:hover img {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";}
.wmain{width: 1200px; margin: 0 auto; overflow: hidden;}
.left{float: left}
.right{float: right;}
.pc{display: inline-block;}
.sp{display: none;}
.center{text-align: center;}
h2{text-align: center;font-size: 40px;line-height: 1.4em;letter-spacing: 0;font-weight: bold;}
.scroll-top{cursor: pointer;}
.wh{background: #fff!important;}

/*fv
*********************/
.fv{overflow: hidden;}
.toiletfv{background: url(../images/page/toilet-fvbg.jpg) center center no-repeat;background-size: cover;}
.bathfv{background: url(../images/page/bath-fvbg.jpg) center center no-repeat;background-size: cover;}
.kitchenfv{background: url(../images/page/kitchen-fvbg.jpg) center center no-repeat;background-size: cover;}
.washfv{background: url(../images/page/wash-fvbg.jpg) center center no-repeat;background-size: cover;}
.pipefv{background: url(../images/page/pipe-fvbg.jpg) center center no-repeat;background-size: cover;}

/*price
*********************/
.price{background:#fff;}
.price .wmain{padding: 40px 0;}
.price h2{padding: 40px 0;color: #fff;background: -moz-linear-gradient(left, #006abc 20%, #009cff 50%, #006abc 80%);
	background: -webkit-linear-gradient(left, #006abc 20%, #009cff 50%, #006abc 80%);
	background: linear-gradient(to right, #006abc 20%, #009cff 50%, #006abc 80%);text-shadow: 1px 1px 2px #333;}
.price h2 span{color: #f6ff00;}
.price .box{text-align: center;}
.price .box.toiletprc .bx{width: 28%;}
.price .box.toiletprc li{letter-spacing: 0;font-size: 15px;}
.price .bx{display: inline-block;*zoom: 1;*display: inline; vertical-align: top; margin: 0 5px 15px;background: #fff;border:3px solid #0077D3;border-radius: 6px;width: 43%;}
.price .bx2 .txt{height: inherit !important;}
.price .ti{background: #0077D3;color: #fff;padding: 15px 0;font-weight: bold;font-size: 26px;line-height: 1.4em;}
.price .ti img{vertical-align: middle;margin: 0 10px 0 0;}
.price .tis{color: #0077D3;font-weight: bold;font-size: 26px;line-height: 1.4em;margin: 0 0 15px;}
.price .txt{padding: 15px;}
.price ul{text-align: left;font-size: 18px;line-height: 1.4em;}
.price li{padding: 5px 0 5px 40px;background: url(../images/page/price-ch.png) 0 5px no-repeat;margin: 0 0 5px;border-bottom: 1px dashed #ddd;}
.price .pr{padding: 15px;color: #fff;background: #0077D3;}
.price .old{font-size: 18px;line-height: 1.4em;}
.price .ar{margin: 10px 0;}
.price .prc{color: #f6ff00;font-weight: bold;font-size: 36px;line-height: 1.4em;}
.price .prc small{font-size: 65%;}
.price .tm img{vertical-align: middle;margin: 0 5px 0 0;}
.price table{width: 88%;margin: 30px auto 0;border:3px solid #0077D3;font-size: 20px;line-height: 1.4em;}
.price caption{font-weight: bold; color: #fff;font-size: 30px;line-height: 1.4em; background: #0077D3;text-align: center;padding: 15px 0;}
.price th,.price td{padding: 5px 20px;border-bottom: 1px dashed #ddd;margin: 0 0 5px;background: #fff;}
.price th{text-align: left;font-weight: normal;}
.price td{text-align: right;}
.price table .prc{color: #ff3030;}

.priceArea .lnk{margin: 10px auto 0;}
.priceArea .lnk a{display: inline-block;text-decoration: none;padding: 5px;width: 95%;background: #fff;color: #0077D3;border-radius: 100px;}
.priceArea .lnk a:hover{background: #333;color: #fff;}

/*map
*********************/
.spTopBtm60{background: #eee;}
.map{padding: 40px 0;background: #d2e9fc;}
.map .ctn{width: 74%;margin: 0 auto;text-align: center;overflow: hidden;letter-spacing: 0;display: flex;
justify-content: center;align-items: center;background: url(../images/page/area-bg.png);border: 1px solid #00ccff;}
.map .txt{color: #fff;font-size: 17px;font-weight: bold;letter-spacing: 0;}
.map .ti{font-weight: bold;font-size: 36px;line-height: 1.4em;}
.map .ti span{color: #fff;}
.map .tis{color: #f6ff00;font-size: 26px;line-height: 1.4em;margin: 15px 0;}
.map .img{width: 50%;}
.map .txt{width: 50%;}

/*cta
*********************/
.goTitle h3 small{font-size: 62%;}

/*menu
*********************/
.menu h2{color: #fff;padding: 30px 0;background: -moz-linear-gradient(left, #006abc 20%, #009cff 50%, #006abc 80%);
	background: -webkit-linear-gradient(left, #006abc 20%, #009cff 50%, #006abc 80%);
	background: linear-gradient(to right, #006abc 20%, #009cff 50%, #006abc 80%);text-shadow: 1px 1px 2px #333;}
.menu .wmain{padding: 40px 0;}
.menu ul{text-align: center;letter-spacing: 0;}
.menu li{display: inline-block;*zoom: 1;*display: inline; vertical-align: top; margin: 0 1px;width: 18%;color: #fff;background:#0077D3;}
.menu .txt{padding: 15px;}
.menu .ti{font-weight: bold;font-size: 18px;line-height: 1.4em;margin: 0 0 10px;}
.menu .lnk a{display: inline-block;text-decoration: none;padding: 5px;width: 95%;background: #fff;color: #0077D3;border-radius: 100px;}
.menu .lnk a:hover{background: #000;color: #fff;}
.footerBox{overflow: hidden;position: relative;}
.reflection {height      :100%;width       :30px;position    :absolute;top         :-180px;left        :0;background-color: #fff;opacity     :0;transform: rotate(45deg);animation: reflection 3s ease-in-out infinite;-webkit-transform: rotate(45deg);-webkit-animation: reflection 3s ease-in-out infinite;-moz-transform: rotate(45deg);-moz-animation: reflection 3s ease-in-out infinite;-ms-transform: rotate(45deg);-ms-animation: reflection 3s ease-in-out infinite;-o-transform: rotate(45deg);-o-animation: reflection 3s ease-in-out infinite;}
@keyframes reflection {0% { transform: scale(0) rotate(45deg); opacity: 0; }80% { transform: scale(0) rotate(45deg); opacity: 0.5; }81% { transform: scale(4) rotate(45deg); opacity: 1; }100% { transform: scale(50) rotate(45deg); opacity: 0; }}
@-webkit-keyframes reflection {0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }}
@-moz-keyframes reflection {0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }}
@-ms-keyframes reflection {0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }}
@-o-keyframes reflection {0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }}

/*--- areaTableArea ----------------------------------------------------------------- */

.areaTableArea {
	width: 100%;
	margin: 20px auto 0;
	padding: 0 0 1em 0;
}
.areaTableArea h4 {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	margin: 0;
	padding: .3em;
}
.areaTableArea.colorBlue h4 {
	background-color: #0080c9;
}
.areaTableArea.colorAqua h4 {
	background-color: #00b5df;
}
.areaTableArea.colorGreen h4 {
	background-color: #31a066;
}

table.tableArea {
	width: 100%;
	font-size: 14px;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
table.tableArea th {
	text-align: center;
	color: #fff;
	width: 20%;
	font-weight: normal;
	padding: 7px 3px 5px 3px;
	vertical-align: middle;
	border-top: 1px solid #e7eff1;
	box-sizing: border-box;
}
.areaTableArea.colorBlue table.tableArea th {
	background-color: #31a4e6;
}
.areaTableArea.colorAqua table.tableArea th {
	background-color: #38c7e8;
}
.areaTableArea.colorGreen table.tableArea th {
	background-color: #4cba80;
}
table.tableArea td {
	width: 80%;
	text-align: left;
	padding: 7px 1em 5px 1em;
	vertical-align: middle;
	border-top: 1px solid #e7eff1;
	background-color: #fff;
	box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	table.tableArea th {
		display: block;
		width: 100%;
	}
	table.tableArea td {
		display: block;
		width: 100%;
	}
}


/*****************************************************************
max-width 1215
******************************************************************/
@media screen and (max-width: 1215px) {
.wmain,.header .hti h1{width: 98%;}
.cta .ctn{width: 100%;}
.cta .wmain{background-size: 450px;}
.menu .ti{font-size: 18px;}
}
/*****************************************************************
max-width 888
******************************************************************/
@media screen and (max-width: 888px) {
h2{font-size: 30px;}
header{width: 98%;}
.price .box.toiletprc .bx{width: 30%;}
.price .ti img{width: 35px;}
.price .prc{font-size: 30px;}
.price .tis,.price .ti{font-size: 20px;}
.price .ti{min-height: 45px;}
.price ul{font-size: 18px;}
.price li{background-size: 25px;padding: 5px 0 5px 30px;}
.price table{width: 96%;}
.map .ctn{width: 95%;}
.cta h2{width: 65%;}
.cta .wmain{background-size: 400px;}
.contact .mailform,.qa ul{width: 95%;}
.menu .lnk a{font-size: 14px;letter-spacing: 0;}
}
@media (max-width: 640px){
#layout{padding-bottom: 120px;}
}

/*****************************************************************
max-width 590
******************************************************************/
@media screen and (max-width: 590px) {
html,body{font-size: 14px;}
.wmain,.header .hti h1{width: 95%;}
h2{font-size: 23px;letter-spacing: 0;}
.sp{display: block;}
.pc{display: none;}
.fv{background: none;text-align: center;}
.fv .wmain{width: 100%;}
.price .box.toiletprc .bx,.price .box .bx{width:95%;margin: 0 auto 15px;}
.price table{font-size: 16px;letter-spacing: 0;}
.price td .old{font-size: 16px;display: block;}
.price td .prc{font-size: 20px;}
.price th,.price td{padding: 5px 10px;}
.price th{width: 50%;}
.map .ctn{display: block;}
.map .txt{width: 100%;padding: 30px 0;font-size: 18px;}
.map .img{width: 100%;}
.map .ti{font-size: 20px;}
.btnTel {width: 95%;margin: 0 auto;}
.cta .wmain{background: none;}
.cta h2{width: 100%;text-align: center;}
.menu li{width: 95%;padding: 5px;overflow: hidden;margin: 0 auto 10px;}
.menu {padding: 0}
.menu .img{float: left;width: 30%;}
.menu .txt{float: right;width: 65%;padding: 0;}
.menu .ti{font-size: 16px;letter-spacing: 0;}
}

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