@charset 'UTF-8';


#sidebar dl dd li.installation > a {color:#004097; font-weight:bold;}
#sidebar dl dd li.installation > ul {display:block;}
#sidebar dl dd li.installation > ul > li.ctype a {color:#004097; font-weight:bold;}

#main > nav {}
#main > nav > ul {letter-spacing:-0.4em;}
#main > nav > ul > li {display:inline-block; width:330px; padding:15px; font-size:129%; font-weight:bold; letter-spacing:normal; vertical-align:top; line-height:1;}
#main > nav > ul > li > a {display:block; margin:-15px; padding:15px; background:#e5ecf5; color:#014099; text-align:center;}
#main > nav > ul > li > a:hover {background:#014099; color:#fff; text-decoration:none;}

#main > div {margin:30px 0 0;}
#main > div > h2 {color:#014099; font-size:129%; font-weight:bold;}
#main > div > div {margin:20px 0 0;}
#main > div > div > h3 {padding:10px 15px; background:#e5ecf5; color:#014099; font-size:100%; font-weight:bold;}
#main > div > div > blockquote {padding:1px 0 0;}
#main > div > div > blockquote > * {margin-top:1em;}
#main > div > div > blockquote a {color:#000; text-decoration:underline;}
#main > div > div > blockquote a:hover {text-decoration:none;}
#main > div > div > blockquote ul {list-style:disc inside;}
#main > div > div > blockquote ul > li {padding-left:1em; text-indent:-1em;}
#main > div > div > blockquote ol {}
#main > div > div > blockquote ol > li {}
#main > div > div > blockquote > p {font-size:100%;}
#main > div > div > blockquote > p b {color:#014099;}
#main > div > div > blockquote > ul {font-size:86%;}
#main > div > div > blockquote > small {display:block; font-size:86%;}
#main > div > div > blockquote > .caution {min-height:60px; position:relative; margin:1em 0 0; padding:19px 19px 19px 99px; border:1px solid #e5e5e5; font-size:86%;}
#main > div > div > blockquote > .caution > * {margin-top:1em;}
#main > div > div > blockquote > .caution > *:first-child {margin-top:0;}
#main > div > div > blockquote > .caution > h4 {
	width:99px; height:100%; position:absolute; left:0; top:0; background:url(../images/caution_title.png) 21px center no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden;}
#main > div > div > blockquote > .caution > img {display:block;}
#main > div > div > blockquote > .caution > p {}
#main > div > div > blockquote > .caution > small {display:block;}

#main > #before {}

#main > #after {}

html.fac-js-enabled #main > div {display:none; margin-top:-20px; padding:30px 0 0;}
html.fac-js-enabled #main > div > h2 {display:none;}
html.fac-js-enabled #main > nav > ul > li.selected > a {background:#014099; color:#fff;}
html.fac-js-enabled #main > div > div > h3 {cursor:pointer;}
html.fac-js-enabled #main > div > div > h3:hover {background-color:#014099; color:#fff;}
html.fac-js-enabled #main.before > #before {display:block;}
html.fac-js-enabled #main.after  > #after  {display:block;}


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

#main > h1 {padding:0; border:0; font-size:17px; text-align:center;}

#main > nav {}
#main > nav > ul {}
#main > nav > ul > li {width:50%; box-sizing:border-box; padding:10px; font-size:15px;}
#main > nav > ul > li > a {margin:-10px; padding:10px;}
#main > nav > ul > li > a:hover {}

#main > div {margin:20px 0 0;}
#main > div > h2 {font-size:15px;}
#main > div > div {margin:0; border-top:1px solid #e5e5e5;}
#main > div > div > h3 {padding:10px 40px 10px 10px; background:transparent; background-size:40px; color:#014099; font-size:14px;}
#main > div > div > blockquote {padding:0 9px 1px; border-top:1px solid #e5e5e5;}
#main > div > div > blockquote > * {}
#main > div > div > blockquote > *:last-child {margin-bottom:1em;}
#main > div > div > blockquote a {}
#main > div > div > blockquote a:hover {}
#main > div > div > blockquote ul, 
#main > div > div > blockquote ol {}
#main > div > div > blockquote ul > li, 
#main > div > div > blockquote ol > li {}
#main > div > div > blockquote > p {font-size:12px;}
#main > div > div > blockquote > p b {}
#main > div > div > blockquote > ul {font-size:10px;}
#main > div > div > blockquote > small {font-size:10px;}
#main > div > div > blockquote > .caution {min-height:0; padding:9px; border:none; background:#f2f2f2; font-size:10px;}
#main > div > div > blockquote > .caution > * {}
#main > div > div > blockquote > .caution > *:first-child {}
#main > div > div > blockquote > .caution > h4 {width:auto; height:50px; position:static; background-position:center 0; background-size:contain;}
#main > div > div > blockquote > .caution > img {width:100%; height:auto;}
#main > div > div > blockquote > .caution > p {}
#main > div > div > blockquote > .caution > small {}

#main > #before {}

#main > #after {}

html.fac-js-enabled #main > div {margin-top:0; padding:0; border:1px solid #e5e5e5; border-top:none;}
html.fac-js-enabled #main > div > h2 {}
html.fac-js-enabled #main > nav > ul > li.selected > a {}
html.fac-js-enabled #main > div > div > h3 {cursor:pointer; background:transparent url(../images/icon_open.png) right center no-repeat; background-size:40px;}
html.fac-js-enabled #main > div > div.opened > h3 {background-image:url(../images/icon_close.png);}
html.fac-js-enabled #main > div > div > h3:hover {background-color:transparent; color:#3466ad;}
html.fac-js-enabled #main.before > #before {}
html.fac-js-enabled #main.after  > #after  {}

}

/*取り付け方 faucet_atype.css*/

/*faucetTtle*/
#faucetTtl {
	display: table;
	border-top: #eaeaea 1px solid;
	border-bottom: #eaeaea 1px solid;
	width: 100%;
	margin-bottom: 20px;
}
#faucetTtl h1,
#faucetTtl p {
	display: table-cell;
	vertical-align: middle;
}
#faucetTtl p {
	text-align: right;
	padding-left: 2%;
}
#faucetTtl h1 {
	border: none;
	width: 70%;
}
/*faucetTtle END*/

.caption {
	margin-bottom: 20px;
}

/*option*/
#option {
	width: 100%;
	margin-bottom: 20px;
}
#option p {
	text-align: center;
}
#option ul {
	overflow: hidden;
	margin-bottom: 20px;
}
#option li {
	float: left;
	width: 33.3333%;
	text-align: center;
}
#optionTxt {
	display: table;
	width: 96%;
	background: #F2EDDA;
	border-radius: 5px;
	padding: 2%;
	margin-top: 20px;
}
#optionTxt p {
	text-align: left;
}
#optionTxt p:first-child {
	margin-bottom: 10px;
}
#optionLeftTxt,
#optionRightTxt {
	display: table-cell;
	text-align: left;
}
#optionLeftTxt {
	width: 70%;
	padding-right: 2%;
	vertical-align: middle;
}
#optionRightTxt {
	width: 28%;
	background: #FFF;
	padding: 2%;
	border-radius: 5px;
	vertical-align: middle;
	font-weight: bold;
}
/*option END*/

/*method*/
.methodBox {
	margin-bottom: 20px;
}
.methodBox h3 {
	padding-top: 10px;
	margin-bottom: 20px;
	color: #9A9797;
	font-weight: bold;
}
.methodBox h3:before {
 	background : #9A9797;
	color: #FFF;
	border-radius: 5px;
	padding: 10px 13px;
	margin-right: 10px;
}
#stepOne:before {
	content: "1";
}
#stepTwo:before {
	content: "2";
}
#stepThree:before {
	content: "3";
}
#stepFour:before {
	content: "4";
}
#stepFive:before {
	content: "5";
}
.methodBoxWrap {
	display: table;
	width: 100%;
	margin-bottom: 20px;
}
.methodImg {
	display: table-cell;
	vertical-align: middle;
	width: 42%;
	margin-right: 2%
}
.methodImg img {
	max-width: 280px;
}
.methodImgBig {
	text-align: center;
	margin-bottom: 10px;
}
.methodImgBig img {
	max-width: 100%;
}
.methodBoxRight {
	display: table-cell;
	width: 56%;
	vertical-align: middle;
}
.methodBoxRight p {
	margin-bottom: 10px;
}
.posCenter {
	text-align: center;
}
.cautionTxt {
	border: 1px solid #C6C6C6;
	padding: 10px;
	border-radius: 5px;
}
.cautionTxt dt {
	display: table;
	color: #C00;
}
.cautionTxt dt img {
	display: table-cell;
	max-width: 20px;
	padding: 5px;
}
.cautionTxt dt p {
	display: table-cell;
	vertical-align: middle;
}
/*method END*/

/*other css*/
#main > .small {
	font-size: 86%!important;
}
.linkBtn {
	display: block;
	padding: 10px 0;
	background: #e5ecf5;
	color: #004097;
	width: 100%;
	margin: 0 auto;
	border-radius: 5px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
}
.linkBtn:hover {
	background: #004097;
	color: #FFF;
	text-decoration: none;
}
.attentionTxt {
	color: #C00;
	margin-bottom: 20px;
	text-align: center;
}
/*other css END*/

@media screen and (max-width:599px){
	#optionTxt {
		display: block;
	}
	#optionLeftTxt,
	#optionRightTxt {
		display: block;
	}
	#optionLeftTxt {
		width: 100%;
		margin-bottom: 10px;
	}
	#optionRightTxt {
		width: 96%;
		padding: 2%;
	}
	.methodBox h3:before {
		padding: 5px 8px;
		margin-right: 5px;
	}
	.methodBoxWrap,
	.methodBoxPhoto {
		display:block;
	}
	.methodImg {
		display: block;
		width: 100%;
		margin: 0 auto 10px auto;
		text-align: center;
	}
	.methodBoxRight {
		display: block;
		width: 100%;
	}
	.stepCap {
		text-align: center;
	}
}

@media screen and (max-width:500px){
	.exTxt {
		text-align: left;
	}
}