@charset "shift_jis";

/* dresser
========================================*/
#pagePath {
	margin-bottom: 0px;
}

#contents h2 {
	margin: -12px 0 19px;
	position: relative;
	font-weight: normal;
	line-height: 1;
	zoom: 1;
}

#contents h2 .en45 {
	font-size: 40px;
	letter-spacing: 4px;
}

#contents h2 span {
	color: #000;
	display: block;
	font-size: 110%;
	font-weight: normal;
	letter-spacing: 2px;
	margin-top: 3px;
}

#contents .h3Ttl02 {
	font-size: 240%;
	margin: 80px 0 52px;
}

#contents .topInner {
	margin-bottom: 3px;
}

#contents .mb3 {
	margin-bottom: 3px !important;
}

#contents .topInner .photoBox a .speBox {
	display: block;
	background: url(/water_purifier/images/photo01_over.jpg) no-repeat;
}

#contents .topInner .photoBox a:hover .speBox img {
	filter: alpha(opacity=0);
	opacity: 0;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in;
}

#contents .topInner .photoBox .text {
	left: 16px;
	text-shadow:none;
}
/*
#contents .topInner .photoBox .text br {
	display: none;
}*/

#contents .topInner .photoBox .icon {
	display: none;
}

#contents .topInner .photoBox span {
	text-shadow: 0px 0px 20px #000;
	-moz-text-shadow: 0px 0px 20px #000;
	-webkit-text-shadow: 0px 0px 20px #000;
	behavior: url(/common/js/pie.htc);
}

#contents .topInner .photoBox .fs1 {
	height: 146px;
	margin: 0 0 0 -5px;
	text-shadow: none;
	position: relative;
}
#contents .topInner .photoBox .fs1 .fs1_2 {
	display:block;
	text-align:center;
	position:absolute;
	top:96px;
	left:17px;
	text-shadow: none;
	line-height:28px;
	padding-left:5px;
	width:52px;
	height:26px;
	border: solid 2px #fff;
}

#contents .topInner .photoBox .spImg {
	display: none;
}

#contents .comInner .ulText {
	float: left;
}

#contents .topInner .photoBox {
	float: right;
}
#contents .topInner .photoBox a .sp_br {
	display: none;
}

#contents .topInner .ulText .spTtl {
	display: none;
}

#contents .comInner .ulText .h3Head {
	padding-top: 25px;
	font-size: 180%;
	line-height: 1.4;
}

#contents .comInner .ulText .h3Head span {
	margin-top: 15px;
}

#contents .comInner .ulText li .ttl {
	margin-bottom: 2px;
}

#contents .comInner .photoBox a {
	position: relative;
	display: block;
}
#contents .comInner a .newIcon {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 50px;
	height: auto;
}

#contents .comInner01,
#contents .comInner02 {
	margin-bottom: 80px;
}

#contents .comInner02 .photoBox .spImg {
	display: none;
}

#contents .comInner02 .photoBox a .arrow {
	display: none;
}

#contents .comInner01 .ulText .spTtl {
	display: none;
}

#contents .awj .ulText li,
#contents .awj .ulText .liTtl {
	padding-top: 15px;
	min-height: 142px;
}

#contents .awj .ulText .liTtl {
	padding: 13px 45px 0 50px;
}

#contents .awj .ulText .speText {
	padding-top: 18px;
	min-height: 142px;
}

#contents .awj .ulText li .ttl {
	margin-top: 5px;
}

#contents .awj .ulText li .price {
	margin-bottom: 0;
}

#contents .comInner .ulText01 li {
	padding-top: 155px;
	min-height: 163px;
}

#contents .comInner .ulText li .price {
	margin-top: 7px;
}

#contents .comInner .ulText .spTitle {
	display: none;
}

#contents .comInner .link05 .spImg {
	display: none;
}

#contents .comInner .photoBox a:hover .photo {
	filter: alpha(opacity=0);
	opacity: 0;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in;
}

#contents .comInner .link01 a {
	background: url(/water_purifier/images/photo02_over.jpg) no-repeat;
	display: block;
}

#contents .comInner .link02 a {
	background: url(/water_purifier/images/photo03_over.jpg) no-repeat;
	display: block;
}

#contents .comInner .link03 a {
	background: url(/water_purifier/images/photo06_over.jpg) no-repeat; /* photo06に変更 */
	display: block;
}

#contents .comInner .link04 a {
	background: url(/water_purifier/images/photo05_over.jpg) no-repeat;
	display: block;
}

#contents .comInner .link05 a {
	background: url(/water_purifier/images/photo04_over.jpg) no-repeat; /* photo04に変更 */
	display: block;
}

#contents .comInner .link05 a .arrow {
	display: none;
}

#contents .comInner .link06 a {
	background: url(/water_purifier/images/photo17_over.jpg) no-repeat;
	display: block;
}

#contents .comInner .link07 a {
	background: url(/water_purifier/images/photo24_over.jpg) no-repeat;
	display: block;
}

#contents .comInner .link08 a {
	background: url(/water_purifier/images/photo26_over.jpg) no-repeat;
	display: block;
}

#contents .comInner .link27 a {
	background: url(/water_purifier/images/photo27_over.jpg) no-repeat;
	display: block;
}

#contents .comInner .link28 a {
	background: url(/water_purifier/images/photo28_over.jpg) no-repeat;
	display: block;
}


#contents .comInner01 .ulText .ohaText {
	padding-top: 45px;
	min-height: 200px;
}

#contents .photoList {
	margin-bottom: -35px;
	position: relative;
	zoom: 1;
}

#contents .photoList .title {
	float: right;
}

#contents .photoList .spPhoto {
	display: none;
}

#contents .proList {
	margin-bottom: 80px;
}
#contents .proList li.link02 {
	margin-right: 0px;
	width: 639px;
}

#contents .proList li a .text {
	width: 80%;
}
#contents .proList li .text .icon {
	display: none;
}

#contents .proList .link01 a .text {
	letter-spacing: 2px;
}

#contents .proList .link02 a .text {
	letter-spacing: 2px;
}

#contents .proList li a:hover img {
	filter: alpha(opacity=0);
	opacity: 0;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in;
}

#contents .proList .link01 a {
	background: url(/water_purifier/images/photo19_over.jpg) no-repeat;
}

#contents .proList .link02 a {
	background: url(/water_purifier/images/photo21_over.jpg) no-repeat;
}

#contents .proList li a .spImg {
	display: none;
}

#contents .proList li a .arrow {
	display: none;
}
#contents .proList li.link01 a .text span {
  height: 90px;
	margin-left:-16px;
}
#contents .proList li.link02 .text {
	font-size:260%;
}
#contents .proList li.link02 .text .fs1 {
	height: 130px;
	margin: 0 0 0 -5px;
	text-shadow: none;
	position: relative;
}
#contents .proList li.link02 .text .fs1 .fs1_2 {
	display:block;
	text-align:center;
	position:absolute;
	top:85px;
	left:17px;
	text-shadow: none;
	line-height:26px;
	padding-left:3px;
	width:90px;
	height:24px;
	border: solid 2px #fff;
}

#contents .proList li .text .sp_br {
	display: none;
}

#contents .linkUlBox {
	border-bottom: 1px solid #333;
	margin-bottom: 78px;
	padding-bottom: 41px;
}

#contents .linkUl {
	margin-right: -30px;
	width: 992px;
	overflow: hidden;
	zoom: 1;
}

#contents .linkUl li {
	float: left;
	line-height: 1.5;
	margin: 0 30px 88px 0;
	width: 218px;
}

#contents .linkUl li .btn {
	margin: 0 0 15px;
}

#contents .linkUl li .btn a {
	font-size: 125%;
}

#contents .linkUl .liLink  {
	float: right;
	width: 300px;
}

#contents .linkUl .liLink .btn a {
	font-size: 100%;
}

#contents .linkUl .liLink span {
	display: block;
	font-size: 125%;
	margin-bottom: 4px;
}

#contents h3.h3TtlRelated {
	background: none;
	border-top: none;
	clear: both;
	font-size: 180%;
	font-weight: normal;
	letter-spacing: 1px;
	margin:75px 0 20px;
	padding:2px 0 0 14px;
	text-align: left;
	border-left:#FFBE00 5px solid;
	line-height:1.2;
}

#contents .linkUl.related li {
	background:#fff;
	margin: 0 30px 15px 0;
}
#contents .linkUl.related li .btn {
	border:none;
	padding-right:11px;
	margin:0;
}
#contents .linkUl.related li .btn a {
	padding:11px 30px 10px 11px;
	font-size:100%;
	font-weight:bold;
}


/* common
========================================*/
/*0px*/
.pT00 {padding-top   :0px !important;}

@media all and (min-width: 0px) and (max-width: 640px)  {
	#container {
		margin: 0;
		width: auto;
	}

	body {
		min-width: inherit;
	}

	#header #headerMain {
		width: auto;
	}

	#header #headerMain .headNav {
		/*display: none;*/
	}

	#headerMain .logo {
		margin: 12px 0 0 10px;
		width: 73px;
	}

	#headerMain .logo img {
		width: 100%;
	}

	#headerMain .headR {
		float: right;
	}

	#headerMain .headR li a {
		min-height: 39px;
		padding-top: 20px;
		text-decoration: none;
		width: 59px;
	}

	#headerMain .headR li a span {
		display: none;
	}

	#headerMain .headR li a .fs1 {
		display: block;
		height: 20px;
	}

	#headerMain .headR li {
		width: 59px;
		border-left: 1px solid #CCC;
	}

	#headerMain .headR .on {
		filter: alpha(opacity=100) !important;
		opacity: 1 !important;
	}

	#headerMain .headR .on a .fs1 {
		filter: alpha(opacity=30) !important;
		opacity: 0.3 !important;
	}

	#headerMain .headR .on .drop {
		border-bottom: 1px solid #CCC;
	}

	#header .dropBox {
		/*top: 60px;*/
	}

	#headerMain #navArea {
		background: none;
		width: auto;
		float: right;
	}

	#header .dropNav {
		width: 100%;
		padding: 13px 0 0 0;
	}

	#header .dropNav li a .fs1 {
		display: none;
	}

	#header .dropNav li a .spIcon {
		display: block;
		height: 80px;
		line-height: 1;
		margin: -17px 0 0;
	}

	#header .dropNav .subNav01 a .spIcon {
		margin-bottom: -20px;
	}

	#header .dropNav .subNav02 a .spIcon {
		margin: -15px 0 -20px;
	}

	#header .dropNav ul {
		padding: 0 10px 13px;
	}

	#header .dropNav li {
		padding-bottom: 35px;
	}

	#header .dropNav li,
	#header .dropNav .subNav01,
	#header .dropNav .subNav02 {
		margin-right: 0;
		width: 50%;
		text-align: center;
	}

	#header .dropNav li p,
	#header .dropNav li ul {
		display: none;
	}

	#header .dropNav li p,
	#header .dropNav .subNav01 p,
	#header .dropNav .subNav02 p {
		width: auto;
	}

	#header .dropNav li:nth-child(2),
	#header .dropNav .subNav01,
	#header .dropNav .subNav02 {
		padding-bottom: 40px;
	}

	#header .dropNav li:nth-child(2) p a span:last-child ,
	#header .dropNav .subNav01 p a span:last-child,
	#header .dropNav .subNav02 p a span:last-child {
		margin-top: 5px;
	}

	#header .dropNav li .kitLink,
	#header .dropNav li .batLink,
	#header .dropNav li .watLink01,
	#header .dropNav li .dreLink {
		display: block;
	}

	#header .dropNav li .batLink {
		padding-top: 2px;
	}

	#header .dropNav li .kitLink a span,
	#header .dropNav li .batLink a span,
	#header .dropNav li .dreLink a span,
	#header .dropNav li .watLink01 a span {
		font-size: 120%;
		letter-spacing: 1px;
	}

	#header .dropNav .menu {
		float: none;
		text-align: center;
		padding: 0;
		width: 100%;
	}

	#header .dropNav .menu li {
		display: inline-block;
		float: none;
		padding: 0 0 27px;
		width: 30%;
	}

	#header .dropNav .menu li span {
		font-weight: normal;
	}

	#header .dropNav .menu li a .fs1 {
		display: none;
	}

	#header .dropNav .menu li .spIcon {
		display: block;
		height: 42px;
		margin: 0;
	}

	#header .dropNav .menu .home01 {
		display: none;
	}

	#header .dropNav .menu .home02 {
		display: inline-block;
	}

	#header .dropNav .menu .home02 .spIcon {
		height: 47px;
	}

	#header .searchBox {
		top: 60px;
		overflow: hidden;
	}

	#header .searchBox .search {
		float: right;
		margin: 0 27px 0 0;
		padding: 22px 0 0 0;
		width: 266px;
	}

	#header .searchBox .search .fSearch01 {
		border-radius: 0;
	}

	#contents {
		margin-bottom: 100px;
		width: 100%;
	}

	#footerTop {
		overflow: hidden;
		padding: 0 20px;
	}

	#footerTop .footerTopInner {
		width: 100%;
	}

	#footerTop .fb {
		display: none;
	}

	#footerTop .spFb {
		display: block;
		margin-top: 3px;
	}

	#footer {
		padding-bottom: 30px;
	}

	#footer .footerLink {
		width: auto;
		/*margin-bottom: 0;*/
		padding: 38px 10px 5px 20px;
	}

	#footer .footerLink li a {
		font-size: 95%;
	}

	#footer .footerLink .linkBox {
		display: none;
	}

	#footer .footerLink .linkBox li {
		font-size: 11px;
		letter-spacing: 1px;
		padding-bottom: 8px;
	}

	#footer .footerBox .fBox ul li {
		vertical-align: top;
	}

	#footer .footerBox .fBox ul li a {
		background: none !important;
	}

	#footer .footerBox .fBox ul li img {
		vertical-align: top;
	}

	#footer .footerLink .subLink {
		display: block;
		float: none;
		overflow: hidden;
		width: 100%;
	}

	#footer .footerLink .subLink ul {
		float: left;
		width: 50%;
	}

	#footer .footerLink .subLink .linkList {
		float: right;
		width: 50%;
	}

	#footer .footerBox {
		border-top: none;
	}

	#footer .footerBox .fBox {
		width: 100%;
	}

	#footer .footerBox .fBox p {
		border-top: 1px solid #666;
		float: none;
		padding: 40px 20px 0;
		width: auto;
	}

	#footer .footerBox .fBox p span {
		display: block;
		font-size: 90%;
		margin: 10px 0 0;
	}

	#footer .footerBox .fBox ul {
		float: none;
		margin-bottom: 25px;
		text-align: center;
		width: 100%;
	}

	#footer .footerBox .fBox ul li {
		display: inline-block;
		float: none;
		padding: 0 13px;
		text-align: left;
	}

	#footer .footerBox .fBox ul li a {
		border-color: #999;
		border-radius: 32px;
		padding: 9px 0 0 13px;
		width: 41px;
		height: 45px;
	}

	#footer .footerBox .fBox ul li a:hover {
		border-color: #999;
	}

	#footer .footerBox .fBox ul li a img {
		display: none;
	}

	#footer .footerBox .fBox ul li a .ipdImg {
		display: block;
	}
}

@media all and (min-width: 0px) and (max-width: 640px)  {
	#header {
		margin-bottom: 33px;
	}

	#contents {
		margin-bottom: 40px;
	}

	#pagePath {
		display: none;
	}

	#contents h2 {
		margin-bottom: -3px;
	}

	#contents h2 .en45 {
		font-size: 290%;
		letter-spacing: 3px;
	}

	#contents h2 .text {
		margin-top: 8px;
	}

	#contents .comInner .photoBox {
		float: none;
		width: 100%;
	}

	#contents .comInner .photoBox a {
		background: none;
		min-height: inherit;
	}

	#contents .topInner .photoBox a:hover span img,
	#contents .comInner .photoBox a:hover span img,
	#contents .comInner .photoBox a:hover img {
		filter: alpha(opacity=100) !important;
		opacity: 1 !important;
	}

	#contents .comInner .photoBox a .arrow {
		bottom: 20px;
		top: inherit;
		width: auto;
	}

	#contents .comInner .photoBox img {
		width: 100%;
	}

	#contents .comInner .ulText {
		float: none;
		width: 100%;
	}

	#contents .comInner .ulText li {
		float: none;
		padding: 20px 30px 10px;
		width: auto;
	}

	#contents .comInner .ulText .liTtl {
		background: none;
		min-height: inherit;
		padding: 0;
		margin-bottom: -70px;
	}

	#contents .topInner .ulText .liTtl h3 {
		padding-top: 0;
	}

	#contents .topInner .ulText .liTtl h3 span {
		font-size: 200%;
	}

	#contents .comInner01 .link01,
	#contents .comInner .link04,
	#contents .comInner .link07,
	#contents .comInner .link08 {
		display: none;
	}

	#contents .comInner .ulText .spTitle {
		padding: 0;
	}

	#contents .comInner .ulText .spTitle {
		display: block;
	}

	#contents .comInner .ulText .spTitle img {
		width: 100%;
	}

	#contents .comInner .ulText .spTitle a {
		display: block;
		position: relative;
	}

	#contents .comInner .ulText .spTitle a .arrow {
		position: absolute;
		bottom: 20px;
		right: 20px;
		width: auto;
	}

	#contents .comInner .ulText .spTitle a .newIcon {
		width: 50px !important;
	}

	#contents .comInner01 {
		margin-bottom: 0;
	}

	#contents .awj .ulText li {
		padding-bottom: 5px;
	}

	#contents .awj .ulText .liTtl {
		margin-bottom: 30px;
	}

	#contents .awj .ulText .liTtl br {
		display: none;
	}
/*
	#contents .comInner02 {
		margin-bottom: 55px;
	}
*/
	#contents .comInner02 .photoBox img {
		display: none;
	}
	#contents .comInner02 .photoBox .spImg {
		display: block;
	}

	#contents .comInner02 .photoBox a:hover img {
		filter: alpha(opacity=100);
		opacity: 1;
	}

	#contents .comInner02 .photoBox a {
		display: block;
		position: relative;
	}

	#contents .comInner02 .photoBox a .arrow {
		display: block;
		position: absolute;
		bottom: 20px;
		right: 20px;
		width: auto;
	}

	#contents .comInner:nth-child(7) .ulText li {
		min-height: inherit;
	}

	#contents .comInner:nth-child(7) .ulText .liTtl h3 {
		padding-top: 0;
	}

	#contents .comInner .link05 img {
		display: none;
	}

	#contents .comInner .link05 .spImg {
		display: block;
	}

	#contents .comInner .link05 a {
		position: relative;
	}

	#contents .comInner .link05 a .arrow {
		display: block;
		position: absolute;
		right: 20px;
		bottom: 20px;
	}

	#contents .comInner:nth-child(8) .ulText li {
		min-height: inherit;
	}

	#contents .comInner01 .ulText .liTtl {
		display: none;
	}

	#contents .comInner01 .ulText .spTtl {
		display: block;
		margin-bottom: 30px;
	}

	#contents .comInner01 .ulText .ohaText {
		padding-top: 21px;
	}

	#contents .comInner .ulText li {
		min-height: inherit !important;
	}

	#contents .awj .ulText .speText {
		padding: 20px 30px 10px;
	}

	#contents .h3Ttl02 {
		font-size: 150%;
		letter-spacing: 2px;
		margin: 0 0 35px;
		padding: 51px 0 15px;
		border: none;
	}

	#contents .topInner {
		margin-bottom: 0;
	}

	#contents .topInner .photoBox .speBox img {
		display: none;
	}

	#contents .topInner .photoBox .speBox .spImg {
		display: block;
	}

	#contents .topInner .photoBox a .text {
		position: absolute;
		left: 20px;
		bottom: 14px;
		font-size: 180%;
		letter-spacing: 2px;
		line-height: 1.4;
		text-shadow: none;
		width: 270px;
	}

	#contents .topInner .photoBox a .sp_br {
		display: inline;
	}

	#contents .topInner .photoBox .text br {
		display: block;
	}

	#contents .topInner .photoBox .fs1 {
		display: none;
	}

	#contents .topInner .photoBox .icon {
		display: block;
		margin: 0px 0 10px -13px;
		text-shadow: none;
	}
	#contents .topInner .photoBox .icon  {
		line-height:30px;
	}
	#contents .topInner .photoBox .icon .fs1_2 {
	display:block;
	text-align:center;
	text-shadow: none;
	line-height:24px;
	padding-left:4px;
	margin-left:10px;
	width:40px;
	height:22px;
	border: solid 2px #fff;
	}

	#contents .topInner .ulText {
		margin-bottom: 34px;
	}

	#contents .topInner .ulText li {
		background: none;
		min-height: inherit;
		line-height: 1.85 !important;
		padding: 0 30px;
		width: auto;
	}

	#contents .topInner .ulText .liTtl {
		display: none;
	}

	#contents .topInner .ulText .spTtl {
		background: none;
		display: block;
		padding: 34px 0 25px !important;
		margin-bottom: 0;
		width: 100%;
	}

	#contents .comInner .ulText .liTtl h3 {
		padding: 55px 0 1px;
		font-size: 150%;
	}

	#contents .topInner .ulText .liTtl h3 {
		padding: 0;
		font-size: 100%;
	}

	#contents .photoList {
		margin: 0;
		width: 100%;
	}

	#contents .photoList .photoBox {
		display: none;
	}

	#contents .photoList .title {
		float: none;
	}

	#contents .photoList li {
		float: none;
		padding: 0 30px;
		width: auto;
	}

	#contents .photoList li span {
		font-size: 120%;
		letter-spacing: 1px;
		line-height: 1.5;
		margin-bottom: 0;
	}

	#contents .photoList .spPhoto {
		clear: both;
		display: block;
		margin-top: 5px;
		padding: 0;
		overflow: hidden;
	}

	#contents .photoList .spPhoto img {
		float: left;
		margin-right: 3px;
		width: 49.9%;
	}

	#contents .photoList .spPhoto img:last-child {
		margin-right: 0;
		float: right;
		width: 49%;
	}





	#contents .proList {
		margin: 0;
		width: 100%;
	}

	#contents .proList li,
	#contents .proList li.link02 {
		float: none;
		margin: 0 0 3px;
		width: 100%;
	}

	#contents .proList li .text,
	#contents .proList li.link02 .text {
		position: absolute;
		left: 20px;
		bottom: 14px;
		font-size: 180%;
		letter-spacing: 2px;
		line-height: 1.4;
		text-shadow: none;
		width: 270px;
	}
	#contents .proList li .text .fs1 {
		display: none;
	}
	#contents .proList li .text .icon {
		display: block;
	}
	#contents .proList li.link01 a .text span {
		height:75px;
		margin-left:-13px;
	}
	#contents .proList li.link02 a .text span {
		height:104px;
	}
	#contents .proList li.link02 .text .icon  {
		line-height:30px;
		margin-left:-13px;
	}
	#contents .proList li .text .icon .fs1_2 {
	display:block;
	text-align:center;
	text-shadow: none;
	line-height:24px;
	padding-left:4px;
	margin-left:10px;
	width:80px;
	height:22px;
	border: solid 2px #fff;
	}

	#contents .proList li .text .sp_br {
		display: inline;
	}


	#contents .proList .link01 a .text{
		letter-spacing: 2px;
	}

	#contents .proList li img {
		display: none;
		width: 100%;
	}

	#contents .proList li a .spImg {
		display: block;
	}

	#contents .proList li a:hover img {
		filter: alpha(opacity=100);
		opacity: 1;
	}

	#contents .proList li a {
		display: block;
		position: relative;
	}

	#contents .proList li a .fs1 {
		margin-bottom: -5px;
	}

	#contents .proList .link01 a .fs1 {
		margin-bottom: -3px;
	}

	#contents .proList .link02 a .fs1,
	#contents .proList .link03 a .fs1 {
		margin-bottom: -2px;
	}

	#contents .proList li a .arrow {
		display: block;
		bottom: 20px;
		right: 20px;
		position: absolute;
		width: auto;
	}

	#contents .proList .link02 .text {
		width: 80%;
	}





	#contents .linkUlBox {
		border: none;
		margin-bottom: 13px;
		padding: 5px 30px 0;
	}

	#contents .linkUl {
		margin-right: 0;
		width: 100%;
	}

	#contents .linkUl li {
		float: none;
		margin: 0 0 37px;
		width: 100%;
	}

	#contents .linkUl li .btn {
		margin-bottom: 12px;
	}

	#contents .linkUl .liLink {
		float: none;
		width: 100%;
	}

	#contents .linkUl .liLink .btn a {
		padding: 16px 0;
	}

	#contents .btmLink {
		padding: 0;
		width: 100%;
	}

	#contents .btmLink li {
		float: none;
		margin: 0 auto 35px;
	}

	#contents .btmLink li a {
		background: #FFF;
		margin-bottom: 10px;
	}

	#contents h3.h3TtlRelated {
		font-size: 150%;
		margin:75px 0 20px 30px;
	}

	#contents .linkUl.related  {
		padding: 0 30px;
	  -webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	}

	#contents .linkUl.related li {
		width: 219px;
		float:left;
		margin-bottom:15px;
	}

}



/* common - hidden
========================================*/

@media screen and (min-width: 641px) {
    #contents .hidden-desktop {
        display: none !important;
    }
}
@media screen and (max-width: 640px) {
    #contents .hidden-mobile {
        display: none !important;
    }
}



/* common - section
========================================*/

#contents .section-normal {
    margin: 80px auto 0;
    width: 100%;
	box-sizing: border-box;
}
#contents .section-normal.margin-panel {
    margin-top: 3px;
}
#contents .section-inner {
    margin: 0 auto;
    width: 960px;
}
@media screen and (max-width: 640px) {
    #contents .section-normal {
        margin: 80px 0 0;
        padding: 0 5%;
    }
    #contents .section-normal.mobile-width-wide {
        padding: 0;
    }
	#contents .section-normal.margin-panel {
		margin-top: 3px;
	}
    #contents .section-inner {
        width: 100%;
    }
}

#contents .section-normal * {
    box-sizing: border-box;
}
#contents a[target="_blank"].icon-none {
    padding: 0 !important;
    background-image: none !important;
}



/* common - page-nav
========================================*/

#contents #nav-top {
    margin-top: 40px;
}
@media screen and (max-width: 640px) {
    #contents #nav-top {
        padding: 0 5%;
    }
}

#contents .page-nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    padding: 0;
}
#contents .page-nav > li {
    display: block;
    width: calc(33.33333% - (40px / 3));
}
#contents .page-nav > li > a {
    position: relative;
    display: block;
    padding: 20px 15px;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    color: #000;
    text-decoration: none;
    background-color: #fff;
    border: solid 1px #b1b1b1;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

@media screen and (min-width: 641px) {
    #contents .page-nav > li > a:hover {
        color: #000;
        background-color: #eee;
    }
}

@media screen and (max-width: 640px) {
    #contents .page-nav {
        flex-wrap: wrap;
        gap: 12px;
    }
    #contents .page-nav > li {
        width: calc(50% - (12px / 2));
    }
    #contents .page-nav > li > a {
        padding: 20px 12px;
        font-size: 13px;
    }
    #contents .page-nav > li > a::after {
        top: calc(50% - (20px / 2));
        right: 12px;
        width: 20px;
        height: 20px;
    }
}



/* common - grid layout
========================================*/

#contents .grid-normal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    gap: 30px;
}
#contents .grid-normal.direction-column_to_row {
    flex-direction: column;
}
#contents .grid-normal.col-center {
    justify-content: center;
}
#contents .grid-normal.col-vertical-center {
    align-items: center;
}
#contents .grid-normal.panel-gap {
    gap: 3px;
}
#contents .grid-normal.add-margin {
    margin-top: 30px;
}
#contents .grid-normal.panel-add-margin {
    margin-top: 3px;
}
#contents .grid-normal.add-border-01 {
    border-top: dotted 1px #ccc;
    padding-top: 30px;
}
@media screen and (max-width: 640px) {
    #contents .grid-normal {
        flex-direction: column;
        gap: 30px 4%;
    }
    #contents .grid-normal.gap-mobile-small {
        gap: 14px 4%;
    }
    #contents .grid-normal.direction-mobile-reverse {
        flex-direction: column-reverse;
    }
    #contents .grid-normal.direction-mobile-row {
        flex-direction: row;
    }
    #contents .grid-normal.direction-column_to_row {
        flex-direction: row;
    }
    #contents .grid-normal.col-center {
        justify-content: center;
    }
    #contents .grid-normal.col-vertical-center {
        align-items: flex-start;
    }
}

#contents .grid-item {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

@media screen and (min-width: 641px) {
    #contents .grid-item.col_1-2 {
        width: calc(50% - (30px / 2));
    }
    #contents .panel-gap > .grid-item.col_1-2 {
        width: calc(50% - (3px / 2));
    }
    #contents .grid-item.col_1-3 {
        width: calc(33.33333% - (60px / 3));
    }
    #contents .panel-gap > .grid-item.col_1-3 {
        width: calc(33.33333% - (6px / 3));
    }
    #contents .grid-item.col_2-3 {
        width: calc(66.66666% - ((60px / 3) * 2));
    }
    #contents .grid-item.col_1-4 {
        width: calc(25% - (90px / 4));
    }
    #contents .panel-gap > .grid-item.col_1-4 {
        width: calc(25% - (9px / 4));
    }
}
@media screen and (max-width: 640px) {
    #contents .grid-item.col_1-2 {
        width: 100%;
    }
    #contents .grid-item.col_1-3 {
        width: 100%;
    }
    #contents .grid-item.col_1-4 {
        width: 100%;
    }
    #contents .grid-item.mobile-col_1-2 {
        width: calc(50% - (4% / 2));
    }
    #contents .panel-gap > .grid-item.mobile-col_1-2 {
        width: calc(50% - (3px / 2));
    }
}

#contents .grid-item .item-margin {
    margin: 30px 0 0;
}
@media screen and (max-width: 640px) {
    #contents .grid-item .item-margin {
        margin: 20px 0 0;
    }
}



/* common - link btn
----------------------------------------*/

/* linkBtn 01 */
#contents .linkBtn-01.margin-bottom {
	margin-bottom: 10px;
}
#contents .linkBtn-01 a {
    display: block;
    margin: 0;
    padding: 11px 40px 10px 5px;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    background-image: url('/common/images/icon04.gif');
    background-position: right 5px center;
    background-repeat: no-repeat;
    border-top: dotted 1px #ccc;
    border-bottom: dotted 1px #ccc;
}
#contents .linkBtn-01 a:hover {
	color: #ccc;
	background-image: url('/common/images/icon04_over.gif');
}



/* common - pict
========================================*/

#contents .pict-thumb {
    position: relative;
}
#contents .pict-thumb img {
    display: block;
    width: 100%;
    height: auto;
}
#contents .pict-thumb a {
    display: block;
    text-decoration: none;
}
#contents .pict-thumb a img {
    transition: opacity 0.3s ease;
}
#contents .pict-thumb .item-icon {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: block;
    width: 34px;
    height: 34px;
    background-color: #626262;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s ease;
}
#contents .pict-thumb .item-icon::before {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 10px);
    display: block;
    width: 20px;
    height: 2px;
    background-color: #fff;
    z-index: 11;
    transition: background-color 0.3s ease;
}
#contents .pict-thumb .item-icon::after {
    content: '';
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 1px);
    display: block;
    width: 2px;
    height: 20px;
    background-color: #fff;
    z-index: 11;
    transition: background-color 0.3s ease;
}
@media screen and (min-width: 641px) {
    #contents .pict-thumb a:hover img {
        opacity: 0.7;
    }
    #contents .pict-thumb a:hover .item-icon {
        background-color: #fff;
    }
    #contents .pict-thumb a:hover .item-icon::before,
    #contents .pict-thumb a:hover .item-icon::after {
        background-color: #000;
    }
}

#contents .pict-thumb .pict-caption-normal {
    display: block;
    margin: 5px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.8;
}



/* top - product panel
========================================*/

#contents .product-panel {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	gap: 3px;
}
#contents .product-panel.direction-reverse {
	flex-direction: row-reverse;
}
@media screen and (max-width: 640px) {
	#contents .product-panel,
	#contents .product-panel.direction-reverse {
		flex-direction: column;
	}
	#contents .product-panel.mobile-direction-reverse {
		flex-direction: column-reverse;
	}
}

#contents .product-panel .panel-item-text {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: flex-start;
	gap: 3px;
	width: 318px;
}
@media screen and (max-width: 640px) {
	#contents .product-panel .panel-item-text {
		width: 100%;
	}
}

#contents .product-panel .panel-item-text .item-header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 40px;
	width: 100%;
	background-color: #eeeeec;
}
#contents .product-panel .panel-item-text .item-header h3 {
	margin: 0;
	padding: 0;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: 3px;
	border: none;
}
#contents .product-panel .panel-item-text .item-header h3::after {
	content: '';
	display: block;
	margin: 15px auto 0;
	width: 75px;
	height: 2px;
	background-color: #333;
}
@media screen and (min-width: 641px) {
	#contents .product-panel .panel-item-text .item-header {
		min-height: 140px;
	}
	#contents .product-panel .panel-item-text .item-header.height-large {
		min-height: 240px;
	}
}
@media screen and (max-width: 640px) {
	#contents .product-panel .panel-item-text .item-header {
		margin: 0 0 30px;
		padding: 0 10px;
		background-color: transparent;
	}
	#contents .product-panel .panel-item-text .item-header h3 {
		font-size: 20px;
	}
}

#contents .product-panel .panel-item-text .pict-thumb {
	width: 100%;
}
#contents .product-panel .panel-item-text .pict-thumb a {
	position: relative;
	display: block;
}
#contents .product-panel .panel-item-text .pict-thumb a::after {
	content: '';
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: block;
	width: 41px;
	height: 41px;
	background-image: url('/water_purifier/images/icon_arrow_w.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

#contents .product-panel .panel-item-text .item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	flex-grow: 1;
	padding: 20px 35px;
	width: 100%;
	text-align: left;
	background-color: #fff;
}
#contents .product-panel .panel-item-text .item-body.layout-bottom {
	justify-content: flex-end;
	padding-bottom: 35px;
}
@media screen and (max-width: 640px) {
	#contents .product-panel .panel-item-text .item-body {
		padding: 20px 30px 30px;
	}
}

#contents .product-panel .panel-item-text .item-body .item-title {
	margin: 0 0 5px;
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
#contents .product-panel .panel-item-text .item-body .item-title.size-small {
	font-size: 18px;
}
#contents .product-panel .panel-item-text .item-body .item-title small {
	font-size: 13px;
}
@media screen and (max-width: 640px) {
	#contents .product-panel .panel-item-text .item-body .item-title {
		margin: 0 0 5px;
	}
}

#contents .product-panel .panel-item-text .item-body .item-text {
	margin: 0;
}
#contents .product-panel .panel-item-text .item-body .item-text ~ .item-text {
	margin-top: 10px;
}

#contents .product-panel .panel-item-text .item-body .item-links {
	margin: 20px 0 0;
}

#contents .product-panel .panel-item-thumb {
	width: 639px;
}
@media screen and (max-width: 640px) {
	#contents .product-panel .panel-item-thumb {
		display: none;
		width: 100%;
	}
	#contents .product-panel .panel-item-thumb.mobile-show {
		display: block;
	}
}

#contents .product-panel .panel-item-thumb a {
	display: block;
	background-color: #fff;
}
#contents .product-panel .panel-item-thumb a.hover-bg_img {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
@media screen and (min-width: 641px) {
	#contents .product-panel .panel-item-thumb a img {
		transition: filter 0.3s ease;
	}
	#contents .product-panel .panel-item-thumb a:hover img {
		opacity: 1;
		filter: brightness(1.1);
	}
	#contents .product-panel .panel-item-thumb a.hover-bg_img:hover img {
		opacity: 0;
	}
}



/* top - product list
========================================*/

#contents .product-list {
	align-items: stretch;
}
#contents .product-list > li {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
}

#contents .product-list > li > a,
#contents .product-list > li > span.no_link {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: flex-start;
	color: #333;
	background-color: #fff;
}
#contents .product-list > li > a {
	text-decoration: none;
	transition: background-color 0.3s ease;
}
@media screen and (min-width: 641px) {
    #contents .product-list > li > a:hover {
        color: #333;
        background-color: #eee;
    }
}

#contents .product-list > li .product-title {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	flex-grow: 1;
	padding: 10px;
	width: 100%;
}
#contents .product-list > li > a .product-title {
	padding: 10px 55px 10px 10px;
}
#contents .product-list > li > a .product-title::after {
	content: '';
	position: absolute;
	top: calc(50% - (30px / 2));
	right: 15px;
	display: block;
	width: 30px;
	height: 30px;
	background-image: url('/water_purifier/images/icon_arrow_b.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	transition: transform 0.3s ease;
}



/* top - product-top
========================================*/

#contents #product-top {
	margin: 40px auto 0;
}