@charset "Shift_JIS";

/**
 * common.css
 * create : 2013.02.18
 * update : 2013.04.18
 * update : 2013.09.09
 */

/*--------------------------------------------------------------------------------
	Reset
--------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;vertical-align:top;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}a{outline: none;}

/*--------------------------------------------------------------------------------
	body
--------------------------------------------------------------------------------*/
body {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Myriad,Helvetica,Arial,sans-serif;
	background-color: #444;
	-webkit-text-size-adjust: none;
}

@media (max-width:640px) {
	body {
		background-color: #fff;
	}
}

/*--------------------------------------------------------------------------------
	.main-container
--------------------------------------------------------------------------------*/
.main-container {
	position: relative;
	margin: 0 auto;
	width: 1280px;
	height: 710px;
}

@media (max-width:640px) {
	.main-container {
		width: 100%;
		height: 100%;
	}
}

/*--------------------------------------------------------------------------------

	.detail-container

--------------------------------------------------------------------------------*/
.detail-container {
	float: left;
	width: 204px;
	min-height: 710px;
	_height: 710px;
	background: url("../img/detail_bg.gif") repeat-x;
}

.detail-container h1 {
	margin: 18px 0 0 18px;
	height: 18px;
}

.detail-container h2 {
	margin: 26px 0 0 16px;
	height: 79px;
}

.detail-container p.text {
	margin: 29px 0 0 17px;
	height: 28px;
}

.detail-container .viewer {
	position: relative;
	margin: 18px 0 0 9px;
	width: 186px;
	min-height: 480px;
	_height: 480px;
}

.detail-container .viewer .item {
	position: relative;
	width: 180px;
	height: 474px;
}

.detail-container .viewer .item img.btn-close {
	position: absolute;
	z-index: 10;
	right: -1px;
	top: -1px;
	cursor: pointer;
}

.detail-container .viewer .item .image {
	position: relative;
	padding-top: 10px;
	height: 132px;
	text-align: center;
}

.detail-container .viewer .item .image img.left-img {
	position: absolute;
	bottom: 0;
	left: 10px;
}

.detail-container .viewer .item .image img.right-img {
	position: absolute;
	bottom: 0;
	right: 10px;
}

.detail-container .viewer .item .name {
	margin: 5px 10px 0;
	font-size: 70%;
	line-height: 1.2;
}

.detail-container .viewer .item h3 {
	margin: 5px 10px 0;
	font-size: 88%;
	font-weight: bold;
	line-height: 1.2;
	word-break: normal;
	word-wrap: normal;
}

.detail-container .viewer .item .subtext {
	margin: 5px 10px 0;
	font-size: 75%;
	line-height: 1.2;
}

.detail-container .viewer .item .copy {
	margin: 10px 10px 0;
	font-size: 80%;
	line-height: 1.4;
}

.detail-container .viewer .item .photo {
	margin: 15px 7px 0;
	text-align: center;
	overflow: hidden;
}

.detail-container .viewer .item .img-box {
	position: relative;
	display: inline-block;
	*display: inline;
	max-height: 111px;
}

.detail-container .viewer .item .photo img {
	max-width: 166px;
	max-height: 111px;
}

.detail-container .viewer .item .photo img.zoom {
	position: absolute;
	bottom: 0;
	right: 0;
}

.detail-container .viewer .item .note {
	margin: 3px 10px 0;
	margin: 5px 10px 0\9;
	font-size: 70%;
	line-height: 1.2;
	color: #ddd;
}

.detail-container .viewer .item .note.e-mount {
	margin: 3px 10px 0;
	margin: 5px 10px 0\9;
	font-size: 70%;
	line-height: 1.2;
	color: #000 !important;
}

.detail-container .viewer .item .info {
	position: absolute;
	bottom: 7px;
	width: 180px;
	text-align: center;
}

.detail-container .viewer .item .info .internal {
	height: 17px;
}

.detail-container .viewer .item .info .store {
	margin-top: 5px;
}

.detail-container .viewer .viewer-hide-layer {
	position: absolute;
	z-index: 50;
	left: 0;
	top: 0;
	width: 186px;
	height: 480px;
}

.detail-container .viewer .viewer-hide-layer div {
	width: 186px;
	height: 480px;
	background: url("../img/detail_viewer_item_bg.png") no-repeat center center;
}

.detail-container .viewer .viewer-hide-layer div.select {
	background: none;
}

@media (max-width:640px) {
	.detail-container {
		display: none;
	}
}

/*--------------------------------------------------------------------------------

	.chart-container

--------------------------------------------------------------------------------*/
.chart-container {
	position: relative;
	float: right;
	width: 1076px;
	min-height: 710px;
	_height: 710px;
	background: url("../img/chart_bg_hide.png") no-repeat;
}

.chart-container img.btn-close {
	position: absolute;
	z-index: 2000;
	right: 0;
	top: 0;
}

.chart-container .hidelayer {
	position: absolute;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 1076px;
	height: 710px;
	background: url("../img/chart_bg_hide.png") no-repeat;
}

.chart-container .section {
	z-index: 10;
	display: none;
}

.chart-container .section h3 {
	line-height: 0;
	font-size: 0;
}

.chart-container .section .inner {
	margin: 0;
	background: #fff;
	/*box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);*/
	*zoom: 1;
}

.chart-container .section .inner:after {
	clear: both;
	display: block;
	content: "";
}

.chart-container .section .inner h4 {
	margin: 0 0 0 8px;
	padding: 5px 0 0 0;
	line-height: 0;
	font-size: 0;
}

.chart-container .section .inner ul {
	*zoom: 1;
}

.chart-container .section .inner ul:after {
	clear: both;
	display: block;
	content: "";
}

.chart-container .section .inner li {
	position: relative;
	float: left;
	display: block;
	margin: 5px 6px 5px 0;
	width: 37px;
	height: 37px;
	background: #e4e4e4;
	/*overflow: hidden;*/
}

.chart-container .section .inner li div {
	position: relative;
	width: 37px;
	height: 37px;
}

.chart-container .section .inner li img.thum {
	margin-top: 4px;
	width: 100%;
}

.chart-container .section .inner li img.star {
	position: absolute;
	left: -3px;
	top: 0;
}

.chart-container .section .inner li img.txt {
	position: absolute;
	left: -2px;
	top: 32px;
}

@media (max-width:640px) {
	.chart-container {
		display: none;
	}
}

/*--------------------------------------------------------------------------------
	.zoom-box
--------------------------------------------------------------------------------*/
.chart-container .zoom-box {
	position: absolute;
	z-index: 50;
	left: 0;
	top: 0;
	/*max-width: 110px;
	min-width: 74px;
	min-height: 80px;*/
	display: none;
	background: #fff;
	border: 2px solid #aeacad;
	text-align: center;
	cursor: pointer;
}

.chart-container .zoom-box div img {
	/*position: relative;
	z-index: 1;*/
	margin-top: 5px;
	width: 168px;
	height: 132px;
}

.chart-container .zoom-box p.name {
	/*position: relative;
	z-index: 1;*/
	margin: 5px 8px;
	width: 168px;
	font-size: 70%;
	line-height: 1.2;
}

.chart-container .zoom-box p.product {
	/*position: relative;
	z-index: 1;*/
	margin: 5px 8px;
	width: 168px;
	font-size: 82%;
	font-weight: bold;
	line-height: 1.2;
}

.chart-container .zoom-box p.alt {
	/*position: relative;
	z-index: 1;*/
	margin: 5px 8px;
	width: 168px;
	font-size: 82%;
	font-weight: bold;
	line-height: 1.2;
}
.chart-container .zoom-box p.alt.small {
	/*position: relative;
	z-index: 1;*/
	margin: 5px 8px;
	width: 168px;
	font-size: 70%;
	font-weight: normal;
	line-height: 1.2;
}
.chart-container .zoom-box p.copy {
	/*position: relative;
	z-index: 1;*/
	margin: 5px 8px;
	width: 168px;
	font-size: 70%;
	line-height: 1.2;
}

.chart-container .zoom-box p.internal {
	position: relative;
	z-index: 1;
	margin: 10px 8px 0;
	text-align: center;
}
.chart-container .zoom-box p.store {
	position: relative;
	z-index: 1;
	margin: 5px 8px 0;
	padding-bottom: 10px;
	text-align: center;
}

#E-MOUNT .chart-container .zoom-box p.internal img,
#E-MOUNT .chart-container .zoom-box p.store img {
	background-color: #fff;
}
#A-MOUNT .chart-container .zoom-box p.internal img,
#A-MOUNT .chart-container .zoom-box p.store img {
	background-color: #000;
}

.chart-container .zoom-box span.atari {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: #ff0000;
	cursor: pointer;
}

/*--------------------------------------------------------------------------------

	.overlayer

--------------------------------------------------------------------------------*/
.overlayer {
	position: absolute;
	z-index: 3000;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	background: #000;
}

/*--------------------------------------------------------------------------------

	.imglayer

--------------------------------------------------------------------------------*/
.imglayer {
	position: absolute;
	z-index: 4000;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	background: url("../img/loader_w.gif") no-repeat center center;
	text-align: center;
	cursor: pointer;
}

.imglayer .box {
	display: inline-block;
	*display: inline;
	*margin-top: 30px;
	vertical-align: middle;
}

.imglayer .box img.sample {
	width: auto;
	height: 630px;
	border: 4px solid #fff;
}

.imglayer .box .close {
	margin-top: 5px;
	text-align: right;
}

.imglayer .targetbox {
	display: inline-block;
	*display: inline;
	width: 1px;
	height: 710px;
	vertical-align: middle;
}

/*--------------------------------------------------------------------------------

	.alternate

--------------------------------------------------------------------------------*/
.alternate {
	display: none;
	width: 100%;
	height: 100%;
}

.alternate .inner {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

.alternate .targetbox {
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100%;
}

.alternate h3 {
	font-weight: bold;
}

.alternate ul {
	margin-top: 5px;
	list-style: disc;
	padding-left: 20px;
	line-height: 1.8;
}

.alternate li {
	list-style: disc;
}

@media (max-width:640px) {
	.alternate {
		display: block;
		text-align: center;
	}
}

/*--------------------------------------------------------------------------------

	.footer

--------------------------------------------------------------------------------*/
.chart-container .footer {
	position: absolute;
	left: 0;
	top: 681px;
	display: none;
	width: 100%;
	height: 29px;
}

.chart-container .footer .pdf {
	position: absolute;
	top: 0;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
	-ms-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

	#A-MOUNT .chart-container .footer .pdf {
		left: 23px;
	}
	#E-MOUNT .chart-container .footer .pdf {
		left: 13px;
	}

.chart-container .footer .store-link {
	position: absolute;
	top: 0;
	padding: 4px 0;
	border: 1px solid #fff;
	*zoom: 1;
}

	#A-MOUNT .chart-container .footer .store-link {
		left: 334px;
		width: 735px;
	}
	#E-MOUNT .chart-container .footer .store-link {
		left: 178px;
		width: 890px;
	}

.chart-container .footer .store-link:after {
	clear: both;
	display: block;
	content: "";
}

.chart-container .footer .store-link h3 {
	float: left;
	_display: inline;
	line-height: 0;
	font-size: 0;
}

	#A-MOUNT .chart-container .footer .store-link h3 {
		margin: 0 9px 0 16px;
		width: 94px;
		border-right: 1px solid #fff;
	}
	#E-MOUNT .chart-container .footer .store-link h3 {
		margin: 0 7px 0 10px;
		width: 83px;
		border-right: 1px solid #fff;
	}

.chart-container .footer .store-link ul {
	float: left;
}

.chart-container .footer .store-link li {
	float: left;
	_display: inline;
	height: 12px;
	line-height: 0;
	font-size: 0;
}

	#A-MOUNT .chart-container .footer .store-link li {
		margin: 1px 9px 0 7px;
	}
	#E-MOUNT .chart-container .footer .store-link li {
		margin: 1px 6px 0 7px;
	}
	
	.chart-container .footer .store-link li.a99 { width: 137px; }
	.chart-container .footer .store-link li.a77 { width: 136px; }
	.chart-container .footer .store-link li.a65 { width: 137px; }
	.chart-container .footer .store-link li.a57 { width: 136px; }
	
	.chart-container .footer .store-link li.nex-7  { width: 140px; }
	.chart-container .footer .store-link li.nex-6  { width: 139px; }
	.chart-container .footer .store-link li.nex-5r { width: 146px; }
	.chart-container .footer .store-link li.nex-3n { width: 146px; }