@charset 'UTF-8';


#main > h1 {padding:0; border:none;}
#main > h1 > img {display:block; width:720px; height:240px;}
	
	#items {}
	#items > ul {margin:-20px 0 0 -20px; letter-spacing:-0.4em;}
	#items > ul > li {display:inline-block; width:310px; position:relative; margin:20px 0 0 20px; padding:19px; border:1px solid #e5e5e5; letter-spacing:normal; vertical-align:top;}
	#items > ul > li > a {display:block; margin:-19px; padding:19px; text-decoration:none;}
	#items > ul > li .image {}
	#items > ul > li .image > img {display:block; width:310px; height:210px;}
	#items > ul > li .header {}
	#items > ul > li .header > strong {display:block; margin:10px 0 0; color:#000; font-size:86%; font-weight:normal;}
	#items > ul > li .header > b      {display:block; color:#014099; font-size:200%; font-weight:bold; line-height:1.4;}
	#items > ul > li .header > b i.reg {font-size:50%;}
	#items > ul > li .header > .features {margin:15px -19px -19px; padding:19px 10px 19px 19px; border-top:1px solid #e5e5e5; background:#f7f7f7; line-height:1.2;}
	#items > ul > li .header > .features:after {display:block; content:""; clear:both; height:0;}
	#items > ul > li .header > .features > .jis {position:absolute; left:19px; top:19px; color:#000; font-size:100%;}
	#items > ul > li .header > .features > .jis > small {display:block; font-size:72%;}
	#items > ul > li .header > .features > .jis > b {display:inline-block; margin:0 4px 0 0; color:#014099; font-size:172%; vertical-align:middle;}
	#items > ul > li .header > .features > ul {float:left;}
	#items > ul > li .header > .features > ul + ul {margin-left:0;}
	#items > ul > li .header > .features > ul > li {}
	#items > ul > li .header > .features > ul.remarks > li.high-filtration-performance {
		width:100px; height:100px; position:absolute; right:0; top:0; margin:0; background-image:url(../product/images/remarks_high-filtration-performance_c.png);}
	#items > ul > li > a:hover > .image > img {opacity:0.8;}
	#items > ul > li > a:hover > .header > strong {color:#333;}
	#items > ul > li > a:hover > .header > b      {color:#3466ad;}
	
	#discontinued {margin:20px 0 0;}
	#discontinued > h2 {font-size:129%; font-weight:bold; line-height:1;}
	#discontinued > ul {margin:-20px 0 0 -20px; padding:15px 0 0; letter-spacing:-0.4em;}
	#discontinued > ul > li {display:inline-block; width:186px; position:relative; margin:20px 0 0 20px; padding:19px; border:1px solid #e5e5e5; letter-spacing:normal; vertical-align:top;}
	#discontinued > ul > li > a {display:block; margin:-19px; padding:19px; text-decoration:none;}
	#discontinued > ul > li .image {margin:0 -1px;}
	#discontinued > ul > li .image > img {display:block; width:190px; height:110px;}
	#discontinued > ul > li .header {}
	#discontinued > ul > li .header > strong {display:block; margin:10px 0 0; color:#000; font-size:86%; font-weight:normal;}
	#discontinued > ul > li .header > b      {display:block; color:#014099; font-size:143%; font-weight:bold; line-height:1.4;}
	#discontinued > ul > li .header > b i.reg {font-size:50%;}
	#discontinued > ul > li > a:hover > .image > img {opacity:0.8;}
	#discontinued > ul > li > a:hover > .header > strong {color:#333;}
	#discontinued > ul > li > a:hover > .header > b      {color:#3466ad;}


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

#main > h1 {margin:-10px -10px 0;}
#main > h1 > img {width:100%; height:auto;}
	
	#items {}
	#items > ul {margin:-10px 0 0; padding:10px 0 0;}
	#items > ul > li {display:block; width:auto; margin:10px 0 0; padding:0;}
	#items > ul > li > a {display:block; margin:0; padding:0;}
	#items > ul > li .image {display:table-cell; width:50%;}
	#items > ul > li .image > img {width:100%; height:auto;}
	#items > ul > li .header {display:table-cell; padding:9px; background:#f7f7f7; vertical-align:top;}
	#items > ul > li .header > strong {margin:0; font-size:10px;}
	#items > ul > li .header > b      {font-size:14px;}
	#items > ul > li .header > b i.reg {}
	#items > ul > li .header > .features {margin:0; padding:0; border-top:none; background:transparent;}
	#items > ul > li .header > .features:after {}
	#items > ul > li .header > .features > .jis {left:9px; top:9px; font-size:9px;}
	#items > ul > li .header > .features > .jis > small {font-size:6px;}
	#items > ul > li .header > .features > .jis > b {font-size:15px;}
	#items > ul > li .header > .features > ul {float:none; margin:0;}
	#items > ul > li .header > .features > ul + ul {}
	#items > ul > li .header > .features > ul > li {}
	#items > ul > li .header > .features > ul.remarks > li.high-filtration-performance {width:50px; height:50px; right:50%; background-size:contain;}
	#items > ul > li > a:hover > .image > img {}
	#items > ul > li > a:hover > .header > strong {}
	#items > ul > li > a:hover > .header > b      {}
	
	#discontinued {margin:10px 0 0;}
	#discontinued > h2 {font-size:15px; text-align:center;}
	#discontinued > ul {margin:-10px 0 0; padding:10px 0 0;}
	#discontinued > ul > li {display:block; width:auto; margin:10px 0 0; padding:0;}
	#discontinued > ul > li > a {margin:0; padding:10px;}
	#discontinued > ul > li .image {display:table-cell; width:50%; margin:0; padding:0 10px; vertical-align:middle;}
	#discontinued > ul > li .image > img {width:100%; height:auto;}
	#discontinued > ul > li .header {display:table-cell; padding:0 0 0 10px; vertical-align:middle;}
	#discontinued > ul > li .header > strong {margin:0; font-size:10px;}
	#discontinued > ul > li .header > b      {font-size:14px;}
	#discontinued > ul > li .header > b i.reg {}
	#discontinued > ul > li > a:hover > .image > img {}
	#discontinued > ul > li > a:hover > .header > strong {}
	#discontinued > ul > li > a:hover > .header > b      {}

}