@charset "UTF-8";
/* ****************************************************************** 

	--style.css--

	1. Style setting
		1-1. FontColor styles
		1-2. Headline styles

	2. Layout setting
		2-1. Base styles
		2-2. Header styles
		2-3. Main styles
		2-4. Footer styles
		2-5. Common styles

****************************************************************** */

/*==================================================================
	1. Style setting
===================================================================*/

/* ------------------------------------------------------------------
	1-1. FontColor styles
-------------------------------------------------------------------*/
html { color:#333; }
a:link, a:visited { color:#1D3994; }
.touchHover,
.noTapColor,
button { -webkit-tap-highlight-color:rgba(0,0,0,0); }


/* ------------------------------------------------------------------
	1-2. Headline styles
-------------------------------------------------------------------*/


/*==================================================================
	2. Layout setting
===================================================================*/

/* ------------------------------------------------------------------
	2-1. Base setting
-------------------------------------------------------------------*/
body {
	min-width:320px;
	padding-top:54px;
}
.movie_btn_vol {
	text-align:center;
	width:100%;
	margin-bottom:15px;
}
.movie_btn_vol img{
	width:180px;
}
/* ------------------------------------------------------------------
	2-2. Header styles
-------------------------------------------------------------------*/
#header {
	position:fixed;
	top:0;
	left:0;
	z-index:150;
	width:100%;
	height:55px;
	border-bottom:1px solid #989899;
	background:#FFF;
}
#logo {
	padding:8px 8px 5px;
	float:left;
}
#logo img {
	width:auto;
	height:37px;
}
#menuBox {
	float:right;
	line-height:0;
}
#menu {
	font-size:0;
}
#menu img {
	width:auto;
	height:54px;
}
#hTxt {
	position:absolute;
	top:0;
	right:64px;
	width:35%;
	max-width:134px;
	height:54px;
}
#hTxt a {
	display:block;
	height:54px;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	background:url(img/common/hTxt01.png) no-repeat 0 50%;
	background-size:contain;
}
@media screen and (max-width:320px){
	#hTxt a {
		height:78%;
		margin-top:3%;
	}
}

/* ------------------------------------------------------------------
	2-3. Main styles
-------------------------------------------------------------------*/
.inner {
	padding:15px;
}
#main p {
	line-height:1.5;
	text-align:justify;
	letter-spacing:-0.06em;
}

/* ------------------------------------------------------------------
	2-4. Footer styles
-------------------------------------------------------------------*/
footer {
	position:relative;
}
#pageTop {
	display:none;
	position:fixed;
	right:0;
	bottom:20px;
	z-index:100;
}
#pageTop img {
	width:50px;
	height:auto;
}
.sns{
	text-align:center;
	padding-bottom:30px;
}
.sns li {
	display:inline-block;
	margin:0 5px;
	vertical-align:bottom;
	line-height:0;
}
.fLink {
	border-top:1px solid #EAEAEA;
	padding-bottom:10px;
	text-align:center;
}
.fLink li {
	padding:20px 0 10px;
	display:inline-block;
	text-align:center;
}
.fLink a {
	color:#2B6DD1;
	font-size:11px;
	text-align:center;
	text-decoration:none;
}
#copyright {
	padding:20px;
	border-top:1px solid #EAEAEA;
	color:#464646;
	font-size:9px;
	text-align:center;
}
#main {
	text-align:justify;
	text-align:inter-ideograph;
}

/* ------------------------------------------------------------------
	2-5. Common styles
-------------------------------------------------------------------*/
a {
	text-decoration:none;
}

.fMincho {
	font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro', "游明朝体", "Yu Mincho" , "HG明朝E", "メイリオ", Meiryo, sans-serif;
	//font-size:10px;
	letter-spacing:-0.08em;
	line-height:25px;
}
/* [menumodal, gallerymodal] モーダル表示用 ----------*/
.menumodal {
	display:none;
	position:fixed;
	top:55px;
	right:0;
	bottom:0;
	left:0;
	z-index:1001;
	width:100%;
	height:200%;
	background:#000 url(/cms/sp/theplanet/series1/img/common/bgImg01.jpg) no-repeat 50% 0;
	background-size:auto 50%;
}
.menumodal .modalContent {
	width:100%;
	height:300px;
	margin:0 auto;
	overflow-y:scroll;
}
.menumodal .contentListTtl {
	display:table;
	margin:10px 5px 10px 5px;
	overflow:hidden;
	line-height:0;
	border-collapse:separate;
	border-spacing:10px 0;
}
.menumodal .contentListTtl li {
	display:table-cell;
	width:25%;
}
.menumodal .contentListTtl img {
	width:100%;
	height:auto;
	opacity:0.6;
}
.menumodal .contentListTtl li.active img {
	opacity:1;
}
.menumodal .modalContent h2 {
	height:15px;
	margin:0 0 10px;
	text-align:center;
	line-height:0;
}
.menumodal .modalContent h2 img {
	width:auto;
	height:100%;
}
.menumodal .ttl {
	width:auto;
	height:65px;
	margin:20px auto 0;
	overflow:hidden;
	white-space:nowrap;
	text-indent:100%;
	background:url(/cms/sp/theplanet/series1/img/common/ttl_modal.png) no-repeat 50% 0;
	background-size:contain;
}
@media screen and (orientation:landscape) and (max-width:570px){
	.menumodal .menumodal {
		height:20%;
		overflow-y:scroll;
	}
	.menumodal .ttl {
		width:auto;
		height:45px;
		margin:10px auto 0;
		background:url(/cms/sp/theplanet/series1/img/common/ttl_modal.png) no-repeat 50% 0;
		background-size:contain;
	}
}
.menumodal .btnClose {
	position:fixed;
	top:0;
	right:0;
	width:54px;
	height:54px;
	overflow:hidden;
	cursor:pointer;
	text-indent:100%;
	white-space:nowrap;
	background:url(/cms/sp/theplanet/series1/img/common/btn_menu_close.jpg) no-repeat 0 0;
	background-size:contain;
}
/*----*/
.menumodal .menu {
	color:#FFF;
	margin:20px auto 30px;
	text-align:center;
	line-height:1.3;
}
.menumodal .menu li {
	display:inline-block;
	padding:0 15px;
	border-right:1px solid #FFF;
}
.menumodal .menu li:first-child {
	border-left:1px solid #FFF;
}
.menumodal .menu a {
	color:#FFF;
	text-decoration:none;
}
@media screen and (orientation:landscape){
	.menumodal .menu {
		margin:10px auto;
	}
}
/*----*/
.menumodal .seasonList {
	display:table;
	margin:0 5px;
	overflow:hidden;
}
.menumodal .seasonList li {
	color:#B4B5B7;
	display:table-cell;
	width:25%;
	padding:0 5px;
	text-align:center;
}
.menumodal .seasonList li.comingsoon {
	opacity:0.3;
}
.menumodal .seasonList li a {
	color:#FFF;
}
.menumodal .seasonList li a:hover {
	color:#FFE600;
}
.menumodal .seasonList .seasonTtl {
	display:inline-block;
}
.menumodal .seasonList li a img {
	//border:2px solid #FFE600;
}
/*----*/
.carouWrapper {
	position:relative;
}
#main .carouWrapper {
	background:#000;
}
.carousel {
	position:relative;
	background:#000;
	width:100%;
	margin:0 auto;
	padding:15px;
}
@media screen and (orientation:landscape) and (max-width:740px){
	.carousel {
		width:550px;
	}
}
.carousel .frame {
	display:block;
	position:absolute;
	top:0;
	left:0;
	content:"";
	border:1px solid #FFF;
	width:290px;
	height:194px;
}
.carousel .noJS {
	max-height:194px;
	overflow:hidden;
}
.carousel .noJS img {
	width:100%;
}
.carousel li {
	float:left;
	margin:0;
}
.carousel li .text {
	padding:5px 0 0;
	color:#FFF;
	font-size:10px;
	line-height:1.5;
}
.carousel li img {
	display:block;
}
.navigation {
	padding:0 15px 15px;
}
#carousel02 + .navigation {
	opacity:0;
}
.carouWrapper p.prev a,
.carouWrapper p.next a {
	float:left;
	display:block;
	width:11px;
	height:19px;
	overflow:hidden;
	background:url(img/season1/vol1/icon_prev.png) no-repeat;
	-webkit-background-size:11px auto;
	-moz-background-size:11px auto;
	background-size:11px auto;
	text-indent:-9999px;
}
.carouWrapper p.next a {
	float:right;
	background:url(img/season1/vol1/icon_next.png) no-repeat;
	-webkit-background-size:11px auto;
	-moz-background-size:11px auto;
	background-size:11px auto;
}
.carouWrapper .pager {
	padding-top:5px;
	text-align:center;
}
.carouWrapper .pager a {
	display:inline-block;
	height:12px;
	width:12px;
	margin:0 4px;
	border:1px solid #FFF;
	border-radius:50%;
	background:#999;
	text-indent:-9999px;
}
.carouWrapper .pager a.selected {
	background:#FFEB00;
}
#carousel01 img {
	border:1px solid #666;
}
#carousel02 {
	max-width:900px;
	background:#999;
}
#carousel02 .text {
	color:#000;
	padding:5px 10px 0;
}
@media screen and (orientation:landscape){
	.carousel li .text,
	#carousel02 .text {
		padding:5px 0 0;
	}
	.navigation {
		position:absolute;
		right:0;
		bottom:50%;
		left:0;
		padding:0;
	}
	.carouWrapper p.prev a,
	.carouWrapper p.next a {
		float:none;
		position:absolute;
		bottom:-10px;
	}
	.carouWrapper p.prev a {
		left:15px;
	}
	.carouWrapper p.next a {
		right:15px;
	}
	.carouWrapper .pager {
		opacity:0;
	}
}

.modal {
	display:none;
	position:fixed;
	top:100%;
	left:0;
	width:100%;
	height:316px;
	background:#999;
	z-index:0;
}
@media screen and (orientation:portrait) and (max-width:570px){
	.modal {
	}
}
@media screen and (orientation:landscape){
	.modal {
		display:none;
		position:fixed !important;
		top:0 !important;
		left:50%;
		width:100%;
		margin-top:0 !important;
	}
	.modal .carousel {
		width:72%;
		padding-top:0;
	}
}
@media screen and (orientation:landscape) and (max-width:570px){
	.modal .carousel {
		width:400px;
		padding-top:0;
	}
}
.overlay {
	display:none;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:200%;
	height:200%;
	background:#000;
	z-index:1000;
}
.close {
	position:fixed;
	top:0;
	right:0;
	padding:10px 10px 20px 20px;
}
.close img {
	width:19px;
	height:19px;
}
.firstLoad {
	position:absolute !important;
	display:block !important;
	right:200%;
	opacity:0;
}
.firstLoad .close,
.firstLoad .btnClose {
	display:none;
}

/*----*/
.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:320px;
	height:212px;
	margin:-106px auto auto -170px;
	padding-top:20px;
	text-align:center;
}
.suisyoBox .btnClose {
	width:20px;
	height:20px;
	position:fixed;
	top:20%;
	right:10%;
	overflow:hidden;
	white-space:nowrap;
	text-indent:100%;
	background:url(/cms/sp/theplanet/series1/smp/img/common/suisyou/btn_close.png) no-repeat 0 0;
	background-size:contain;
}

/* [iconWindow] ----------*/
.iconWindow {
	display:inline-block;
	padding-right:20px;
	background:url(/cms/sp/theplanet/series1/img/common/icon_window.png) no-repeat 100% 50%;
	background-size:16px;
}