@charset "UTF-8";

/* Contents
 * ****************************
 *
 * 1: general style
 * 2: body
 * 3: container
 * 4: header
 * 5: content
 * 6: footer
 *
 * ****************************
 */

/*
======= 1: general style ========================================================
*/
html {
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
}
::selection {
	background:#9FC3E6; /* Safari */
}
::-moz-selection {
	background:#9FC3E6; /* Firefox */
}

/*
======= 2: body ========================================================
*/
body,td,th {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	line-height:1.6;
}
body {
	position:relative;
	min-width:1024px;
	height:100%;
	margin:0;
	overflow:hidden;
	-webkit-font-smoothing:antialiased;
	background:#000;
}
body#home {
	background:url(/cms/sp/theplanet/series1/img/season1/vol1/bg01.jpg) no-repeat 50% 50%;
	background-size:cover;
	background-position:top;
}

/*
======= 3: container ========================================================
*/
#container {
	position:relative;
	z-index:20;
	width:1024px;
	margin:0 auto;
}
#home #container {
	width:auto;
}

/*
======= 4: header ========================================================
*/
.header_op {
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	height:71px;
	margin:20px 0px 0px 20px;
	overflow:hidden;
}
.header_op img {
	height:100%;
}

header {
	position:relative;
	width:100%;
	min-width:1024px;
}
#home header {
	height:340px;
	background:#FFF;
}

#hNews {
	position: absolute;
	top: 17px;
	right: 134px;
	padding: 0 10px;
	line-height: 29px;
	border-bottom: 1px solid #7F7F7F;
	font-size: 13px;
}
#hNews:after {
	content:url(/cms/sp/theplanet/series1/img/home/icon_news.gif);
	position:absolute;
	top:0;
	left:-55px;
}

/*
======= 5: content ========================================================
*/
#home #content {
	position:fixed;
	top:340px;
	right:0;
	bottom:35px;
	left:0;
	
}
#home #content a {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	padding:18px;
}
#home #content a img {
	position:absolute;
	bottom:18px;
	left:18px;
	width:auto;
	height:35px;
}

#loadingBox {
	position:fixed;
	z-index:999;
	top:0;
	right:0;
	bottom:0;
	left:0;
	text-align:center;
	background:#000;
}
#home #loadingBox {
	background:url(/cms/sp/theplanet/series1/img/season1/vol1/bg01.jpg) no-repeat 50% 50%;
	background-size:cover;
	background-position:top;
}

#loadingBox .loadingImg {
	position:absolute;
	top:50%;
	left:50%;
	text-align:left;
	
}
.cssload-loader {
	display:inline-block;
	position:relative;
	width:0;
	height:50px;
	margin:-25px;
	padding-left:50px;
	overflow:hidden;
	white-space:nowrap;
	border-radius:50%;
	background:rgb(255,234,0);
}
.cssload-loader,
.cssload-loader:before,
.cssload-loader:after {
	animation:1.75s infinite ease-in-out;
	-o-animation:1.75s infinite ease-in-out;
	-ms-animation:1.75s infinite ease-in-out;
	-webkit-animation:1.75s infinite ease-in-out;
	-moz-animation:1.75s infinite ease-in-out;
}
.cssload-loader:before,
.cssload-loader:after {
	width:100%;
	height:100%;
	border-radius:50%;
	position:absolute;
	top:0;
	left:0;
}

.cssload-loader {
	animation-name:cssload-loader;
	-o-animation-name:cssload-loader;
	-ms-animation-name:cssload-loader;
	-webkit-animation-name:cssload-loader;
	-moz-animation-name:cssload-loader;
}

@keyframes cssload-loader {
	from { transform: scale(0); opacity: 1; }
	to	 { transform: scale(1); opacity: 0; }
}
@-o-keyframes cssload-loader {
	from { -o-transform: scale(0); opacity: 1; }
	to	 { -o-transform: scale(1); opacity: 0; }
}
@-ms-keyframes cssload-loader {
	from { -ms-transform: scale(0); opacity: 1; }
	to	 { -ms-transform: scale(1); opacity: 0; }
}
@-webkit-keyframes cssload-loader {
	from { -webkit-transform: scale(0); opacity: 1; }
	to	 { -webkit-transform: scale(1); opacity: 0; }
}
@-moz-keyframes cssload-loader {
	from { -moz-transform: scale(0); opacity: 1; }
	to	 { -moz-transform: scale(1); opacity: 0; }
}
/*----*/
.loadingAni {
	opacity:0;
}

/*-- nav --------------------------------------------*/
#menuBox {
	position:fixed;
	top:0;
	right:0;
	z-index:20;
	width:60px;
	height:100%;
	box-shadow:1px 0 0 0 rgba(0,0,0,0.15) inset;
	background:#000;
	background:rgba(0,0,0,0.3);
}
@media screen and (max-height:150px){
	#menuBox {
		display:none !important;
	}
}
#home #menuBox {
	background:rgba(0,0,0,0.2);
}
#btnMenu {
	position:absolute;
	top:0;
	right:0;
	width:60px;
	height:60px;
	overflow:hidden;
	cursor:pointer;
	text-indent:100%;
	white-space:nowrap;
	background:url(/cms/sp/theplanet/series1/img/common/btn_menu_open.jpg) no-repeat 0 0;
	background-size:contain;
}


/*
======= 6: footer ========================================================
*/
footer {
	position:fixed;
	bottom:0;
	z-index:1000;
	width:100%;
	height:35px;
	padding-left:20px;
	text-align:center;
	line-height:1;
	background:#FFFFFF;
	border-top:#BABABA 1px solid;
}
footer .sns a img {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
footer .sns a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.suisyo_speace{
	color:#000 !important;
	text-decoration:none !important;
}

.movie_speace{
	color:#000 !important;
	text-decoration:none !important;
}

/*IE8▼*/
.btn {
	color:#000;
	font-size:12px;
}
.btn a img {
	-webkit-transition:0.3s ease-in-out;
	-moz-transition:0.3s ease-in-out;
	-o-transition:0.3s ease-in-out;
	transition:0.3s ease-in-out;
}
.btn a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.sns {
	float:left;
}
.sns li {
	float:left;
	font-size:5px;
}
.sns li span {
	font-size:10px;
	line-height:20px;
}
.suisyou_link {
	font-size:11px;
	line-height:5px;
}
.copylight {
	color:#666;
	float:right;
	margin:10px 15px 0px 0px;
	font-size:10px;
}
#sns-b {
	float:left;
	margin:7px 0px 0px 0px;
}
.sbox {
	float:left;
	display:inline-block;
	padding:0 15px 5px 0;
}
/*----*/
.suisyoBox {
	display:none;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1100;
	background:#FFF;
}
.suisyoBox .modalContent {
	position:absolute;
	top:50%;
	left:50%;
	width:800px;
	height:320px;
	margin:-160px auto auto -400px;
	padding-top:20px;
	text-align:center;
}
.suisyoBox .btnClose {
	width:40px;
	height:40px;
	position:absolute;
	top:0;
	right:0;
	overflow:hidden;
	white-space:nowrap;
	text-indent:100%;
	cursor:pointer;
	background:url(/cms/sp/theplanet/series1/img/common/suisyou/btn_close.png) no-repeat 0 0;
}

/*----*/