@charset "Shift_JIS";

/**
 * default.css <www.sony.jp/cyber-shot/1hand-fullsize/>
 * create : 2012.10.15
 * update : 2012.12.20
 * update : 2013.03.06
 */

/*--------------------------------------------------------------------------------
	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;
	-webkit-text-size-adjust: none;
}

body#JS {
	background: url("../img/body_bg.gif") no-repeat center 0;
}

a,a:link,a:active,a:visited,a:hover {
	color: #000;
	text-decoration: none;
}

/*--------------------------------------------------------------------------------
	.display-container
--------------------------------------------------------------------------------*/
.display-container {
	position: relative;
	margin: 0 auto;
	width: 1024px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

/*--------------------------------------------------------------------------------
	.header
--------------------------------------------------------------------------------*/
.header {
	position: absolute;
	z-index: 999;
	margin: 0 auto 0;
	width: 100%;
	height: 79px;
	*zoom: 1;
}

.header:after {
	display: block;
	clear: both;
	content: "";
}

.header h1 {
	float: left;
	_display: inline;
	margin: 15px 0 0 22px;
	background: url("../img/header_logo.png") no-repeat 0 0;
	_background: url("../img/header_logo.gif") no-repeat 0 0;
	text-indent: -9999em;
}

.header h1 a {
	display: block;
	width: 104px;
	height: 35px;
}

.header p {
	float: right;
	_display: inline;
	margin: 20px 23px 0 0;
	width: 130px;
	height: 59px;
	background: url("../img/header_tagline.png") no-repeat 0 0;
	_background: url("../img/header_tagline.gif") no-repeat 0 0;
	text-indent: -9999em;
}

/* menu
--------------------------------------------------------------------------------*/
.header ul {
	float: right;
	_display: inline;
	margin: 21px 30px 0 0;
	width: 684px;
	height: 25px;
	background: url("../img/header_menu.png") no-repeat 0 0;
	_background: url("../img/header_menu.gif") no-repeat 0 0;
	*zoom: 1;
}

.header ul:after {
	display: block;
	clear: both;
	content: "";
}

.header ul li {
	float: left;
	text-indent: -9999em;
}

.header ul li a {
	display: block;
	margin: 0 5px 0 6px;
	width: 103px;
	height: 22px;
	opacity: 0.0;
	filter: alpha(opacity=0);
	border-bottom: 3px solid #656565;
	transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-webkit-transition: opacity 0.3s ease-out;
	-ms-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	background: url("../img/blank.gif");
}

.header ul li a.current {
	opacity: 1.0;
	filter: alpha(opacity=100);
	border-bottom: 3px solid #656565;
}

.header ul li a:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	border-bottom: 3px solid #656565;
}

/*--------------------------------------------------------------------------------
	.container
--------------------------------------------------------------------------------*/
.container {
	position: relative;
	margin: 0 auto;
	width: 1024px;
}

/*--------------------------------------------------------------------------------
	.section
--------------------------------------------------------------------------------*/
.section {
	position: relative;
	height: 732px;
	overflow: hidden;
	*zoom: 1;
}

.section:after {
	display: block;
	clear: both;
	content: "";
}

/*--------------------------------------------------------------------------------
	.targetbox
--------------------------------------------------------------------------------*/
.targetbox {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: middle;
	height: 100%;
	font-size: 0;
}

/*--------------------------------------------------------------------------------
	.navigation
--------------------------------------------------------------------------------*/
.navigation .btn-prev {
	display: none;
}

.navigation .btn-next {
	display: none;
}

/*--------------------------------------------------------------------------------
	.shortcut
--------------------------------------------------------------------------------*/
.shortcut {
	position: absolute;
	z-index: 500;
	left: 0;
	bottom: 56px;
	width: 100%;
	*zoom: 1;
}

.shortcut:after {
	display: block;
	clear: both;
	content: "";
}

.shortcut ul {
	float: left;
	position: relative;
	left: 50%;
	top: 0;
	*zoom: 1;
}

.shortcut ul:after {
	display: block;
	clear: both;
	content: "";
}

.shortcut ul li {
	float: left;
	position: relative;
	left: -50%;
	*left: 0;
	margin: 0 8px;
	width: 10px;
	height: 10px;
	background: url("../img/btn_shortcut_off.png") no-repeat 0 0;
	cursor: pointer;
}

.shortcut ul li:hover,
.shortcut ul li.current {
	background: url("../img/btn_shortcut_on.png") no-repeat 0 0;
}

/*--------------------------------------------------------------------------------
	.info
--------------------------------------------------------------------------------*/
.info {
	position: relative;
	z-index: 400;
	right: 10px;
	bottom: 10px;
	margin: -20px auto 0;
	width: 100%;
	height: 20px;
	text-align: right;
}

.info .inner {
	margin: 0 auto;
}

.info .inner a {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	width: 158px;
}

/*--------------------------------------------------------------------------------
	.footer
--------------------------------------------------------------------------------*/
.footer {
	position: relative;
	bottom: 0;
	z-index: 999;
	margin: 0 auto;
	width: 1024px;
	height: 36px;
	background-color: #000;
}

.footer .inner {
	margin: 0 auto;
}

.footer .topics {
	float: left;
	margin: 10px 0 0 15px;
	font-size: 80%;
	line-height: 1.2;
	color: #fff;
}

/*	.sns
--------------------------------------------------------------------------------*/
.footer ul.sns {
	float: right;
	_display: inline;
	margin: 7px 11px 0 0;
	width: 85px;
	height: 21px;
	*zoom: 1;
}

.footer ul.sns:after {
	display: block;
	clear: both;
	content: "";
}

.footer ul.sns li {
	float: left;
	_display: inline;
}

.footer ul.sns li a {
	display: block;
	overflow: hidden;
	width: 21px;
	height: 21px;
	text-indent: -9999px;
}

.footer ul.sns li.twitter a {
	background: url(../img/footer_sns.gif) no-repeat 0 0;
}
.footer ul.sns li.facebook a {
	background: url(../img/footer_sns.gif) no-repeat -21px 0;
}
.footer ul.sns li.mixi a {
	background: url(../img/footer_sns.gif) no-repeat -42px 0;
}
.footer ul.sns li.google a {
	background: url(../img/footer_sns.gif) no-repeat -63px 0;
}

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

/*--------------------------------------------------------------------------------
	.overlayer
--------------------------------------------------------------------------------*/
.overlayer {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 1024px;
	height: 100%;
	min-height: 768px;
	background: url("../img/loader_w.gif") no-repeat center center #000;
}

.btn-close {
	position: absolute;
	z-index: -1;
	right: 43px;
	top: 106px;
	cursor: pointer;
}

/*--------------------------------------------------------------------------------
	.floatbox
--------------------------------------------------------------------------------*/
iframe.floatbox {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}