@charset "utf-8";

#body {padding-top:0;}

#body > header {margin:0 calc(50% - 50vw); padding:0 calc(50vw - 50%); background:#FFF;}
#body > header > h1 {display:none;}
#body > header > .image {width:1200px; margin:0 -140px;}
#body > header > .image > ul {}
#body > header > .image > ul > li {}
#body > header > .image > ul > li > a {display:block; position:relative; text-decoration:none;}
#body > header > .image > ul > li img {display:block; width:100%; height:auto;}

#body > .cameras{width:100vw; background: #f2f2f2; margin:0 calc(50% - 50vw); padding:0 20px 30px; box-sizing: border-box;}
#body > .cameras > section{max-width:1160px; min-width: 920px; margin:0 auto; padding:25px 0 0;}
#body > .cameras > section > h1{font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 25px;}
#body > .cameras > section > .list{}
#body > .cameras > section > .list ul{display:-webkit-flex; display:flex; -webkit-flex-wrap:nowrap; flex-wrap:wrap; justify-content: space-between; margin-bottom: -20px;}
#body > .cameras > section > .list ul li{width:49.138%; background: #fff; box-sizing: border-box; margin-bottom:20px; position: relative;}
#body > .cameras > section > .list ul li.feature{width:100%;}
#body > .cameras > section > .list ul li > a{display: block; text-decoration: none; padding:70px 0;}
#body > .cameras > section > .list ul li > a:hover{opacity: 0.7;}
#body > .cameras > section > .list ul li.feature > a{padding:100px 0;}
#body > .cameras > section > .list ul li h2{width:80px; height:60px; text-indent: 120%; white-space: nowrap; overflow: hidden; position: absolute; top:20px; left:20px;}
#body > .cameras > section > .list ul li.feature h2{width:100px; height:100px; top:48px; left:48px;}
#body > .cameras > section > .list ul li.fp h2{background: url(images/fp_title.png) no-repeat;}
#body > .cameras > section > .list ul li.sd h2{background: url(images/sd_title.png) no-repeat;}
#body > .cameras > section > .list ul li.sd-h h2{background: url(images/sd-h_title.png) no-repeat;}
#body > .cameras > section > .list ul li.dp0 h2{background: url(images/dp0_title.png) no-repeat;}
#body > .cameras > section > .list ul li.dp1 h2{background: url(images/dp1_title.png) no-repeat;}
#body > .cameras > section > .list ul li.dp2 h2{background: url(images/dp2_title.png) no-repeat;}
#body > .cameras > section > .list ul li.dp3 h2{background: url(images/dp3_title.png) no-repeat;}

#body > .cameras > section > .list ul li em{display: block; font: normal 12px/1.5 Century; position: absolute; top:160px; left:65px;}
#body > .cameras > section > .list ul li i{display: inline-block; border:1px #000 solid; padding:0 2em; font: normal 12px/22px SIGMA_Bold; position: absolute; top:165px; left:65px;}
#body > .cameras > section > .list ul li figure{text-align: center;}
#body > .cameras > section > .list ul li b{display: inline-block; font-size:10px; position: absolute; bottom:25px; right:25px;}
#body > .cameras > section > .list ul li.feature b{font-size:12px; color:#fff; background: #000; padding:0.5em 0.8em;}

	#other {clear:both; padding:20px 0 0;}
	#other > h1 {font-size:12px; font-weight:normal; display: none;}
	#other > ul {}
	#other > ul > li {}
	#other > ul > li > a {text-decoration: none;}
	#other > ul > li > a:before {display: inline-block; content: "\e909"; width: 1em; margin: -2px 5px 0 0; font: 16px/1 icons; vertical-align: middle; text-indent: 0;}
	
	#contents {clear:both; padding:50px 0 0;}
	#contents > h1 {
		font-size:24px; text-align:center; 
		font-family:SIGMA_Bold, Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}
	#contents > ul {
		display:-webkit-flex; display:-ms-flexbox; display:flex; 
		-webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; 
		margin:-20px 0 0 -25px; padding:35px 0 0; font-size:12px;}
	#contents > ul > li {
		-webkit-flex:0 1 250px; -ms-flex:0 1 250px; flex:0 1 250px; 
		margin:20px 0 0 25px; padding:19px; border:1px solid #e5e5e5; display: none;}
	#contents > ul > li > a {display:block; margin:-19px; padding:19px; text-decoration:none; width: 100%;}
	#contents > ul > li .image {margin:-20px -20px 0;}
	#contents > ul > li .image > img {display:block; transition:opacity 0.2s ease-in-out 0s;}
	#contents > ul > li h2 {display:block; margin:1em 0 0; font-weight:bold;}
	#contents > ul > li p {margin:1em 0 0;}
	#contents > ul > li > a:hover > .image > img {opacity:0.5;}
	#contents > ul > li.new h2:before {content:"NEW"; background: #000; display: inline-block; color: #FFF; padding: 1px 5px; margin-right: 5px; font-size: smaller;}
	
	#contents > .readMoreBtn {margin:40px auto 0; min-width:290px; box-sizing:border-box;}

#body > footer {}

@media screen and (max-width:920px) {
#body > header {margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px;}
#body > .cameras{width:920px; margin:0 -10px; padding:0 10px 30px;}
}

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

#body {padding-top:0; padding-bottom:30px;}
html.fac-js-enabled #body {padding-top:0;}

#body > header {margin:0; padding:0;}
#body > header > h1 {}
#body > header > .image {width:auto; margin:0;}
#body > header > .image > ul {}
#body > header > .image > ul > li {}
#body > header > .image > ul > li > a {}
#body > header > .image > ul > li img {}

#body > .cameras{width:auto; background: #f2f2f2; margin:0 0; padding:0 10px 15px; box-sizing: border-box;}
#body > .cameras > section{max-width:auto; min-width: auto; margin:0 auto; padding:15px 0 0;}
#body > .cameras > section > h1{font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 15px;}
#body > .cameras > section > .list{}
#body > .cameras > section > .list ul{display:-webkit-flex; display:flex; -webkit-flex-wrap:nowrap; flex-wrap:wrap; justify-content: space-between; margin-bottom: -10px;}
#body > .cameras > section > .list ul li{width:calc(50% - 5px); background: #fff; box-sizing: border-box; margin-bottom:10px; position: relative;}
#body > .cameras > section > .list ul li.feature{width:100%;}
#body > .cameras > section > .list ul li > a{display: block; text-decoration: none; padding:10px;}
#body > .cameras > section > .list ul li > a:after{display: block; content: ""; clear: both; height: 0; overflow: hidden;}
#body > .cameras > section > .list ul li > a:hover{opacity: 0.7;}
#body > .cameras > section > .list ul li.feature > a{padding:10px;}
#body > .cameras > section > .list ul li h2{width:40px; height:30px; text-indent: 120%; white-space: nowrap; overflow: hidden; position: static;}
#body > .cameras > section > .list ul li.feature h2{width:50px; height:50px; top:48px; left:48px;}
#body > .cameras > section > .list ul li.fp h2{background: url(images/fp_title.png) no-repeat top/contain;}
#body > .cameras > section > .list ul li.sd h2{background: url(images/sd_title.png) no-repeat top/contain;}
#body > .cameras > section > .list ul li.sd-h h2{background: url(images/sd-h_title.png) no-repeat top/contain;}
#body > .cameras > section > .list ul li.dp0 h2{background: url(images/dp0_title.png) no-repeat top/contain;}
#body > .cameras > section > .list ul li.dp1 h2{background: url(images/dp1_title.png) no-repeat top/contain;}
#body > .cameras > section > .list ul li.dp2 h2{background: url(images/dp2_title.png) no-repeat top/contain;}
#body > .cameras > section > .list ul li.dp3 h2{background: url(images/dp3_title.png) no-repeat top/contain;}

#body > .cameras > section > .list ul li em{display: block; font: normal 10px/1.5 Century; position: relative; top:0; left: 0; z-index: 2; }
#body > .cameras > section > .list ul li i{display: inline-block; border:1px #000 solid; padding:0 2em; font: normal 8px/17px SIGMA_Bold; position: relative; top:0; left: 0; z-index: 2; margin-top:1em;}
#body > .cameras > section > .list ul li figure{text-align: center; margin-bottom:1em;}
#body > .cameras > section > .list ul li.feature figure{margin:-40px 0 0;}
#body > .cameras > section > .list ul li figure img{width:90%; height: auto;}
#body > .cameras > section > .list ul li b{display: block; font-size:8px; text-align: center; position: static;}
#body > .cameras > section > .list ul li.feature b{display: inline-block; font-size:10px; color:#fff; background: #000; padding:0.5em 0.8em; float:right;}
	
	#other {padding:15px 20px 0;}
	#other > h1 {font-size:10px;}
	#other > ul {}
	#other > ul > li {}
	#other > ul > li > a {}
	
	#contents {padding:2em 20px 0;}
	#contents > h1 {font-size:18px;}
	#contents > ul {display:block; margin:-10px 0 0; padding:0; font-size:10px;}
	#contents > ul > li {margin:2em 0 0; padding:9px;}
	#contents > ul > li > a {margin:-9px; padding:9px;}
	#contents > ul > li .image {margin:-10px -10px 0;}
	#contents > ul > li .image > img {width:100%; height:auto;}
	#contents > ul > li h2 {}
	#contents > ul > li p {}
	#contents > ul > li > a:hover > .image > img {}
	#contents > .readMoreBtn {margin:2em auto 0; min-width:280px;}

#body > footer {margin-top:0;}

}