@charset "Shift_JIS";

/**
 * default.css <www.sony.jp/cyber-shot/qx/css/>
 * create : 2013.09.17
 */

/*--------------------------------------------------------------------------------
	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;}nav{display:block;}a,a:link,a:active,a:visited,a:hover {color: #000;text-decoration: none;}
img{-ms-interpolation-mode: bicubic;}

/*--------------------------------------------------------------------------------
	html
--------------------------------------------------------------------------------*/
html {
	transform-origin: center top;
	-o-transform-origin: center top;
	-moz-transform-origin: center top;
	background: #91c070;
}
html.mobile {
	transform-origin: left top;
	-o-transform-origin: left top;
	-moz-transform-origin: left top;
}
html.no-js { zoom:0.5; }
html.mobile { overflow-x: hidden; }

/*--------------------------------------------------------------------------------
	body
--------------------------------------------------------------------------------*/
body {
	margin: 0 auto;
	transform-origin: left top;
	-o-transform-origin: left top;
	-moz-transform-origin: left top;
	background: #91c070;
}

/*--------------------------------------------------------------------------------
	.display
--------------------------------------------------------------------------------*/
.display {
	position: relative;
	margin: 0 auto;
	width: 1920px;
	overflow: hidden;
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
	-o-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
	transform-origin: left top;
	-o-transform-origin: left top;
	-moz-transform-origin: left top;
	user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	_zoom: 0.5;
}

/*--------------------------------------------------------------------------------
	.container
--------------------------------------------------------------------------------*/
.container {
	position: relative;
	overflow: hidden;
	zoom: 1;
	z-index:100;
}
.container:after {
	clear: both;
	display: block;
	content: "";
}

/*--------------------------------------------------------------------------------
	.section
--------------------------------------------------------------------------------*/
.section {
	position: relative;
	width: 1920px;
	height: 1400px;
	background-color: #fff;
	overflow: hidden;
	zoom: 1;
}
.section:after {
	clear: both;
	display: block;
	content: "";
}
.no-js .section { border-bottom: 1px solid #fff; }
.js .section { float: left; }

.section .main-img {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
}
.section .obi-img {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
}
.section .content {
	position: relative;
	z-index: 1;
	width: 100%;
	zoom: 1;
}
.section .content .menu {
	position: relative;
}
.section .content .menu li {
	width: 227px;
	height: 243px;
	text-align: center;
	cursor: pointer;
}
.section .content .menu li img {
	position: absolute;
	left: 0;
	top: 0;
	width: 227px;
	height: 243px;
	-ms-interpolation-mode: bicubic;
	image-rendering: optimizeQuality;
}

/*--------------------------------------------------------------------------------
	.thickbox
--------------------------------------------------------------------------------*/
.thickbox {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
.thickbox .thick {
	position: absolute;
	display: none;
	width: 0px;
	height: 0px;
}
.thickbox .thick .box {
	position: relative;
	z-index: 2;
	padding-top: 95px;
	width: 100%;
	text-align: center;
}
.thickbox .thick .box img {
	display: none;
}
.thickbox img.circle {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.thickbox img.close {
	position: absolute;
	left: 47%;
	bottom: 23px;
	z-index: 1;
	display: none;
	cursor: pointer;
}
.thickbox .thick.scene5 .thick_2.btn {
	margin-top: 20px;
}


/*--------------------------------------------------------------------------------
	.navigation
--------------------------------------------------------------------------------*/
.no-js .navigation {
	display: none;
}
.navigation .btn-prev {
	position: absolute;
	left: 23px;
	top: 666px;
	z-index: 100;
	width: 71px;
	height: 70px;
	cursor: pointer;
}
.navigation .btn-prev img {
	position: absolute;
	left: 0;
	top: 0;
}

.navigation .btn-next {
	position: absolute;
	left: 0px;
	top: 628px;
	z-index: 100;
	width: 151px;
	height: 150px;
	background-size: 100%;
	cursor: pointer;
}
.navigation .btn-next img {
	position: absolute;
	left: 0;
	top: 0;
}

/*--------------------------------------------------------------------------------
	.shortcut
--------------------------------------------------------------------------------*/
.shortcut {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	width: 1000%\9;
	height: 100%;
	height: 150px\9;
	overflow: hidden\9;
	zoom: 1;
}
.shortcut ul:after {
	clear: both;
	display: block;
	content: "";
}
.shortcut p {
	position: absolute;
	left: 760px;
	bottom: 15px;
}

/* .sns
--------------------------------------------------------------------------------*/
.shortcut ul.sns {
	position: absolute;
	right:30px;
	top:30px;
	z-index: 300;
}
.shortcut ul.sns li {
	float: left;
	margin-right: 20px;
	width: 43px;
	height: 42px;
}

/* .btn
--------------------------------------------------------------------------------*/
.shortcut ul.btn {
	position: absolute;
	left: 741px;
	bottom:50px;
	width: 100%;
	z-index:250;
}
.shortcut ul.btn li {
	float: left;
	margin: 0 16px;
	width: 27px;
	height: 26px;
	background: url("../img/btn_shortcut_ot.png") no-repeat;
	cursor: pointer;
}
.shortcut ul.btn li.current {
	background: url("../img/btn_shortcut_ov.png") no-repeat;
}
.shortcut ul.btn li:hover {
	background: url("../img/btn_shortcut_ov.png") no-repeat;
}

/* .info
--------------------------------------------------------------------------------*/
.shortcut ul.info {
	position: absolute;
	left: 1280px;
	bottom: 25px;
	z-index: 300;
	width: 100%;
}
.shortcut ul.info li {
	float: left;
	margin-right: 32px;
	text-indent: -9999em;
}
.shortcut ul.info li.qx10 a {
	display: block;
	width: 187px;
	height: 125px;
	background: url("../img/btn_qx10.png") no-repeat;
}
.shortcut ul.info li.qx30 a {
	display: block;
	width: 101px;
	height: 125px;
	background: url("../img/btn_qx30.png") no-repeat;
}
.shortcut ul.info li.qx100 a {
	display: block;
	width: 101px;
	height: 125px;
	background: url("../img/btn_qx100.png") no-repeat;
}
.shortcut ul.info li.qx1 a {
	display: block;
	width: 101px;
	height: 125px;
	background: url("../img/btn_qx1.png") no-repeat;
}
.shortcut ul.info.white li.qx10 a {
	background: url("../img/btn_qx10w.png") no-repeat;
}
.shortcut ul.info.white li.qx30 a {
	background: url("../img/btn_qx30w.png") no-repeat;
}
.shortcut ul.info.white li.qx100 a {
	background: url("../img/btn_qx100w.png") no-repeat;
}
.shortcut ul.info.white li.qx1 a {
	background: url("../img/btn_qx1w.png") no-repeat;
}
/*--------------------------------------------------------------------------------
	.loading
--------------------------------------------------------------------------------*/
.js .loading {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
	width: 1920px;
	height: 100%;
	background: url("../img/loading.gif") no-repeat 50% 50% #91c070;
}

/*--------------------------------------------------------------------------------
	.alert
--------------------------------------------------------------------------------*/
.alert { display: none; }

.mobile .alert {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999;
	background: url("../img/alert_h.gif") no-repeat 50% 45% #fff;
	width: 1920px;
	height: 101%;
	overflow: hidden;
}

@media only screen and (orientation : landscape) {
	.mobile .alert {
		background-size: 40%;
	}
}

@media only screen and (orientation : portrait) {
	.mobile .alert {}
}