@charset "utf-8";
/* ===================================================================
 style info : ファイル読み込み
=================================================================== */

/* default style - リセット・共通
----------------------------------------------------------- */
@import url("default.css");

/* ===================================================================
 style info : 個別css
=================================================================== */


.imgfit {
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	position: relative;
}

.imgfit img {
	position: relative;
	width: 100%;
	height: auto;
}

.mincho {
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
}

#fade{
	position: absolute;
	background: #FFF;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	min-height: 670px;
	z-index: 300;
}

#loading{
	position: absolute;
	background: #FFF;
	width: 77px;
	height: 30px;
	top: 50%;
	left: 50%;
	margin-left: -38px;
	margin-top: -30px;
	z-index: 301;
	text-align: center;
}

#loading p{
	margin-bottom:.5em;
}


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

html { 
	overflow-y: auto;
	zoom:1;
}

body {
	margin:0;
	color:#111;
	background:#FFF;
}
#wrapper {
	width: 1000px;
	margin: 0 auto;
	position: relative;
}

#titleArea {
	position: relative;
	left: 100px;
	top: 0px;
	width: 900px;
	height: 860px;
	background: url(../img/pc/top-topimg.png) no-repeat 0 70%;
}

#titleLogo {
	position: absolute;
	left: 18px;
	top: 16px;
	z-index: 2;
}

#titleArea h2 {
	position: absolute;
	left: 18px;
	top: 130px;
}

#titleArea h3 {
	position: absolute;
	right: 5px;
	top: 692px;
}

#titleArea h4 {
	position: absolute;
	right: 36px;
	top: 27px;
}

#titleArea h5 {
	position: absolute;
	bottom: 37px;
	right: 5px;
}

#titleArea h6 {
	position: absolute;
	bottom: 0px;
	left: 0px;
}

/* ----------------------------------------------------*/
#menuNavi {
	padding: 0;
	width: 100px;
	z-index: 1;
	height: 860px;
	position: absolute;
	top: 0;
	left: 0;
}

#menuNavi ul{
	padding:30px 5px 0;
	width:72px;
}

#menuNavi ul#menuArea li {
	padding:2px 0;
}

#menuNavi ul#menuArea li a {
	padding:8px 0px 4px;
	display: block;
}

#menuNavi ul#menuArea li a img {
	padding:0 0 6px;
	border-bottom:2px solid #FFF;
}

#menuNavi ul#menuArea li a:hover img {
	border-bottom:2px solid #111;
}

ul#bannerArea {
	padding:30px 0px 0;
}


ul#snsArea {
	position:absolute;
	bottom:0px;
	left:0;
	width:auto;
	padding:0 0 20px;
}

ul#snsArea li{
	margin-bottom:8px;
}

ul#snsArea li#like{
	margin:0;
	height: auto;
	width:auto;
}

ul#snsArea li#like span,
ul#snsArea li#like span iframe{
	width: auto;
}

ul#snsArea li#follow{
	padding: 0px;
	height: 24px;
}

/* ----------------------------------------------------*/
/* 2nd */

#container {
	position: relative;
	left: 100px;
	top: 16px;
	width: 900px;
	min-height:600px;
}

#header {
	padding-bottom: 80px;
}

#header h1 {
	padding: 6px 15px;
	width:200px;
}

#header #official {
	position:absolute;
	top:0px;
	right:0px;
}

#header #official a{
	display:block;
	width:180px;
	height:72px;
	background:url("../img/pc/header_logo.png") no-repeat 50% 50%;
	text-indent:-9999px;
}

.panes {
	padding:0 60px;
	position:relative;
	overflow:hidden;
}

#billing {
	width:800px;
	height:200px;
	margin:0 auto;
	overflow:hidden;
	text-indent: -9999px;
	background:url("../img/pc/billing_brown.png") no-repeat 50% 120px;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}



/* ----------------------------------------------------*/
/* footer */
#footer {
	clear:both;
	margin:16px 0 30px;
	padding:5px 0px;
	height:15px;
	overflow:hidden;
	background: url("../img/pc/teaser-cp.png") no-repeat 100% 100%;
}

.ie7 #footer {
	height:30px;
}

body.home #footer {
	margin:0;
}

#photoby{
	color:#000;
	text-align:right;
	padding:3px 150px 0 0;
	font-size:.6em;
	line-height:1em;
	height:15px;
	vertical-align:baseline;
}

.copyright {
	display:none;
}

/* page-top */
#page-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	display:none;
}

.ie6 #page-top {
	display:block;
	padding:0 10px 10px 0;
	text-align:right
}

#page-top a {
	width: 40px;
	height:40px;
	display: block;
	background: url("../img/pc/bg_pagetop_new.png") no-repeat 50% 50%;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}

#page-top a:hover {
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

.ie6 #page-top {
	display:none
}


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

.ie6 #fade,
.ie6 #loading {
	display:none;
}