@charset "utf-8";

body,td,th {
	font-size: small;
	line-height: 140%;
	font-weight: normal;
}
body {
	padding: 0px;
	margin: 0px;
}
h1,h2,h3,h4,h5,h6,form,ol,ul,li,hr,dl,dt,dd,address,em {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
}
img {
	border:0px;
}
em {
	font-style: normal;
	font-weight: bold;
	}
table {
	margin: 0px;
	padding: 0px;
	empty-cells: show;
	font-size: 100%;
	rules: all;
	border-collapse:collapse;
}
tr,th,td {
	/*	vertical-align: top; */
	text-align: left;
}
li {
	list-style-type: none;
}
p {
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 8px;
	padding-left: 0px;
}
a {
	font-weight: normal;
	color: #1D3994;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #810081;
}
a:active {
	text-decoration: none;
}
address {
	font-style: normal;
	font-weight: normal;
}
.red {
	color: #E20029;
	}
.green {
	color: #66992d;
	}
.small-font2 {
	font-size: 10px;
	line-height: 14px;
	}
.t10 {
	margin-top: 10px;
	}
.t20 {
	margin-top: 20px;
}
.b5 {
	margin-bottom: 5px;
	}
.b10 {
	margin-bottom: 10px;
	}
.b1010 {
	margin-bottom: 10px;
	margin-top: 10px;
	}
.b1020 {
	margin-bottom: 20px;
	margin-top: 10px;
	}
.b20 {
	margin-bottom: 20px;
	}
.b2020 {
	margin-bottom: 20px;
	margin-top: 20px;
	}
.b40 {
	margin-bottom: 40px;
}

/* html5 */
img {
	vertical-align:bottom;
}
/*
#side1 h4 {
	width: 180px;
	vertical-align:bottom;
	background-color: #00CCFF;
	margin: 0px;
	padding: 0px;
}
*/

/* #side1 h5 {
	width: 180px;
	vertical-align:bottom;
	background-color: #00CCFF;
	margin: 0px;
	padding: 0px;
} */
/* html5 */

/* PC用 */
@media screen and (min-width: 561px){

	/* カテゴリ一覧 */
	ul.category-list {
		display: flex;
		flex-wrap: wrap;
	}

	ul.category-list li {
		width: 137px;
		margin: 0 10px 0 0;
	}

	ul.category-list li:nth-child(4n) {
		margin-right: 0;
	}

	ul.category-list li p {
		margin-bottom: 5px;
	}

	ul.category-list li a {
		color: #ff5600;
	}

	ul.category-list > li {
		margin-bottom: 20px;
	}

	ul.category-list li ul li {
		margin-bottom: 5px;
	}

	ul.category-list li ul li:before {
	    content: "• ";
	    color: #aaa;
	}

	ul.category-list li ul li a {
		text-decoration: underline;
	}

	ul.category-list li ul li a:hover {
		color: #0056b3;
	}

    .work-title {
        text-align: center;
        font-weight: bold;
    }

/*qa*/
    .qa-list .item .point {
        font-weight: bold;
        font-size: 1.5em;
    }
    .qa-list .item-box p {
        font-size: .95rem !important;
        width: 100% !important;
    }
    
    
}



/* スマホ用 */
@media screen and (max-width: 560px){

	/**
	 * 蛇口
	 * トップページ
	 */

	.sp-none {
 		display: none;
 	}

	/* 設置場所別一覧 */
	ul#box2 {
		width: 80% !important;
		margin: 0 auto 10% !important;
	}

	ul#box2 li {
		width: 100% !important;
		float: none !important;
		margin: 3% 0 !important;
	}

	#box2 li a {
		width: 100% !important;
		height: 16.8vw !important;
		background-size: cover !important;
	}

	#box2 li#btn1 a {
    background: url(/faucet/img/index_m_list_kitchen.jpg) no-repeat left top;
	}

	#box2 li#btn2 a {
    background: url(/faucet/img/index_m_list_bathroom.jpg) no-repeat left top;
	}

	#box2 li#btn3 a {
    background: url(/faucet/img/index_m_list_powderroom.jpg) no-repeat left top;
	}

	#box2 li#btn4 a {
    background: url(/faucet/img/index_m_list_gardening.jpg) no-repeat left top;
	}

	/* 他社と比較してください！ */
	#box3 {
    width: 90% !important;
		margin: 0 auto !important;
    font-size: 0.9em !important;
    clear: both !important;
	}

	/* 自分で取り付け可能！節約名人！ */
	#box6 {
		box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 3% 0;
    padding: 0 !important;
		background: #f3f3f3 !important;
	}

	#box7 {
    width: 100% !important;
		background-size: cover !important;
    padding: 0 !important;
    background: none !important;
	}

	#box7-bg {
		width: 100% !important;
		background: none !important;
	}

	#faucet #cap7 {
    width: 100% !important;
    height: 12vw !important;
		background-size: cover !important;
		margin-bottom: 3% !important;
	}

	#box7 #img {
		width: 80% !important;
		margin: 0 auto 3% !important;
		float: none !important;
	}

	#box7 #img img {
		width: 100% !important;
	}

	#box7 #txt {
		width: 80% !important;
		margin: 0 auto 3% !important;
    float: none !important;
		font-size: 0.9em !important;
	}

	#btn4 {
    width: 100% !important;
    height: 9vw !important;
		background-size: cover !important;
	}

	#cap8 {
		width: 100% !important;
    height: 9vw !important;
		background-size: cover !important;
	}

	#box8 {
    width: 100% !important;
    margin: 0 !important;
		box-sizing: border-box !important;
	}

	#box8 #left {
    width: 47% !important;
    margin: 0 !important;
    float: left !important;
		padding-right: 3%;
		border-right: 1px dotted #999999 !important;
	}

	#box8 #right {
    width: 47% !important;
    margin: 0 !important;
    float: right !important;
	}

	#box8 #left #img, #box8 #right #img {
		width: 100% !important;
	}

	#box8 #left #txt, #box8 #right #txt {
    width: 100% !important;
		padding: 4% !important;
		box-sizing: border-box !important;
		font-size: 0.8em !important;
	}

	#box8 img {
    width: 100% !important;
	}

	/* 更にお得に！ */
	#box9 {
    width: 100% !important;
    height: 30vw !important;
		background-size: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
		position: relative !important;
	}

	#box9 a {
		width: 100% !important;
    height: 10vw !important;
		background-size: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url(/faucet/img/index_m_btn08.gif) no-repeat left top !important;
		position: absolute !important;
		top: 20vw !important;
		left: 50vw !important;
	}

	.info {
		margin: 3% 0;
	}

	.info p a img:hover {
		opacity: 0.8;
	}

	/* カテゴリ一覧のアコーディオン */
	.accordion {
	  text-align: center;
	  margin: 20px 0;
	  border-top: 1px solid #cccccc;
	  border-left: 1px solid #cccccc;
	  border-right: 1px solid #cccccc;
	}

	.accordion .inner {
	  display: none;
	}

	.accordion p {
	  width: 100% !important;
	  margin: 0 !important;
	  cursor: pointer;
	  padding: 15px 0;
	  font-weight: bold;
	  border-bottom: 1px solid #cccccc;
	  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefefe+0,eaeaea+100 */
		background: #fefefe; /* Old browsers */
		background: -moz-linear-gradient(top, #fefefe 0%, #eaeaea 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #fefefe 0%,#eaeaea 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #fefefe 0%,#eaeaea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
	}

	.accordion .inner li {
	  border-bottom: 1px dotted #cccccc;
	}

	.accordion .inner li a {
	  display: block;
	  padding: 15px 0;
	  color: #333333;
	}

	.accordion .inner li:last-child {
	  border-bottom: 1px solid #cccccc;
	}

	/**
	 * 蛇口
	 * DIYページ
	 */

	#faucet-diy-case01 {
		width: 100% !important;
	}

	#faucet-diy-case01 a, #faucet-diy-case02 a, #faucet-diy-case03 a, #faucet-diy-case04 a, #faucet-diy-case05 a {
		background: none !important;
		height: auto !important;
	}

	/**
	 * 蛇口
	 * 蛇口の種類・用語解説
	 */

	 #faucet-type-text {
     padding: 2% !important;
     margin: 0 !important;
		 box-sizing: border-box !important;
		 line-height: 1.6 !important;
 	}

	#faucet-type-text p a {
		font-size: 1em !important;
		line-height: 2.5 !important;
	}

	.faucet-type-2c-l, .faucet-type-2c-r {
 		width: 100% !important;
 	}

	.faucet-type-2c-l img, .faucet-type-2c-r img {
		width: 100% !important;
	}

	.faucet-type-3c ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 2%;
	}

	.faucet-type-3c ul li {
		width: 47% !important;
	}

	.faucet-type-3c ul li img {
		width: 100% !important;
	}

	.faucet-type-3c-r {
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

/*qa*/
    .qa-list .item .point {
        font-weight: bold;
        font-size: 1.5em;
    }
    .qa-list .item-box p {
        font-size: .85rem !important;
        width: 100% !important;
    }
    

    .work-title {
        text-align: center;
        font-weight: bold;
    }

}