@charset "UTF-8";

#entryWrap{
	position:relative;
	width:100%;
	min-width:480px;
	background:#baa6ff;
	transition:background .5s ease-in-out .5s;
	-webkit-transition:background .5s ease-in-out .5s;
}
.ylw #entryWrap{
	background-color:#fdd93f;
}
.ppl #entryWrap{
	background-color:#baa6ff;
}
.entryInner{
	position:relative;
	height:100%;
	max-width:850px;

	margin:0 auto;
	padding:0 15px;
}

#entryHeader{
	position:fixed;
	top:0;
	background-color:#fff;
	width:100%;
	height:80px;
	z-index:10;

	transition:background .5s ease-in-out .5s;
	-webkit-transition:background .5s ease-in-out .5s;
}
.ylw #entryHeader{
	background-color:#fdd93f;
}
.ppl #entryHeader{
	background-color:#baa6ff;
}

#entryHeader .logo{
	position:absolute;
	top:8px;
	left:15px;
}
#entryHeader .tohpBtn{
	position:absolute;
	top:24px;
	right:15px;
}

#entryHeader .shareArea{
	position:absolute;
	top:50%;
	left:140px;
}

#entryContent{
	position:relative;
	background-color:#fff;
	top:0px;
	width:100%;
	padding:100px 0;
	overflow:hidden;
	transition:background .5s ease-in-out .5s;
	-webkit-transition:background .5s ease-in-out .5s;
}
.ylw #entryContent{
	background-color:#fdd93f;
}
.ppl #entryContent{
	background-color:#baa6ff;
}


#entryFooter{
	position:relative;
	background-color:#baa6ff;
	width:100%;
	height:60px;

	transition:background .5s ease-in-out .5s;
	-webkit-transition:background .5s ease-in-out .5s;
}
.ylw #entryFooter{
	background-color:#fdd93f;
}
.ppl #entryFooter{
	background-color:#baa6ff;
}
#entryFooter .tohpBtn{
	position:absolute;
	bottom:13px;
}
#entryFooter .cr{
	position:absolute;
	right:15px;
	bottom:13px;
}

.tohpBtn{
	width:130px;
	height:34px;
}
.tohpBtn a img{
	position:absolute;
}

#entry{
	position:relative;
}


/*viewer*/
#viewer{
	position:relative;
}
#viewer ul{
	position:relative;
	width:99999px;
	display:block;
	overflow-x:visible;
}
#viewer ul li{
	position:relative;
	float:left;
	width:850px;
	margin-right:20px;
	opacity:0;

	-moz-transition: opacity 1s ease-out;
	-webkit-transition: opacity 1s ease-out;
	-o-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}
#viewer ul li.in{
	opacity:1;
}


#viewerArrowL{
	position:absolute;
	top:50%;
	left:0;
	margin-top:-30px;
	margin-left:-50px;
}
#viewerArrowR{
	position:absolute;
	top:50%;
	right:0;
	margin-top:-30px;
	margin-right:-50px;
}
#viewer .arrow{
	width:60px;
	height:60px;
	display:none;
}
#viewer .arrow img{
	position:absolute;
}
#viewerPager{
	position:relative;
	margin-top:5px;
	margin-left:8px;
}
#viewerPager ul{
	position:relative;
	left:50%;
	float:left;
	margin-right:-10px;
}
#viewerPager li{
	position:relative;
	left:-50%;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	width:50px;
	height:50px;
	border:#fff 3px solid;
	background-color:#fff;
}
#viewerPager li a{
	display:block;
	width:50px;
	height:50px;
	opacity:1;

	-moz-transition: opacity .1s ease-out;
	-webkit-transition: opacity .1s ease-out;
	-o-transition: opacity .1s ease-out;
	-ms-transition: opacity .1s ease-out;
	transition: opacity .1s ease-out;
}
#viewerPager li a:hover{
	opacity:.75;
}
#viewerPager li.selected{
	border-color:#91d1db;
}

#viewerPager li .tag{
	position:absolute;
	top:0;
	left:0;
	height:12px;
	padding:0 3px;
	background-color:#fff;
}
.sp #viewerPager li .tag{
	top:-2px;
	left:-2px;
}
#viewerPager li .tag .txt{
	position:relative;
	top:-5px;
	font-size:8px;
	font-weight:600;
}
.sp #viewerPager li .tag .txt{
	top:-8px;
}
#viewerPager li.selected .tag{
	background-color:#91d1db;
}
#viewerPager li.selected .tag .txt{
	color:#fff;
}
#chara-page-btn{
	position:absolute;
	width:229px;
	height:34px;
	bottom:-50px;
	left:50%;
	margin-left:-115px;
}

/*横スライド（キャストスタッフ）*/
#entry .slide{
	position:relative;
	overflow:hidden;
	min-width:480px;
}
#entry .slide>ul{
	position:relative;
	overflow:hidden;
	width:200%;
}
#entry .slide>ul>li{
	position:relative;
	float:left;
	padding-bottom:60px;
}
#entry .slide>ul>li .slide-page-btn{
	position:absolute;
	bottom:0;
	right:0;
	width:229px;
	height:34px;
}