@charset "UTF-8";

html{
	font-size: 62.5%;
}
/* BODY
---------------------------------------------------- */
body {

	color:#000;
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 1.6rem;
	line-height:1.8;
	-webkit-text-size-adjust: none;
	letter-spacing:0.1px;
	}


/* LINK
---------------------------------------------------- */
a:link		{ color:#000; 	text-decoration:none; }
a:visited	{ color:#333; 	text-decoration:none; }
a:hover		{ color:#fff02e; text-decoration:none;}
a:active	{ color:#999; 	text-decoration:none; }


p{
	text-align: justify
}
@media screen and (min-width: 641px) {
.forPC{ display:block; }
.forSP{ display:none; }
	
body {
	font-size: 1.8rem;
	line-height:1.8;
	background:#fff url("../images/bg_pc.jpg") center top repeat;
	}

}

@media screen and (max-width: 640px) {
body {
	font-size: 1.5em;;
	line-height:1.7;
	}
.forPC{ display:none; }
.forSP{ display:block; }
}

.credit{ font-size:0.6rem; line-height:1.3; text-align:center;}

/* BASE
----------------------------------------------------- */
#wrapper{
	width:100%;
	overflow-x:hidden;
	}
@media screen and (min-width: 641px) {
	#wrapper{
	width:100%;
	max-width:1080px;
	background:#fff;
	margin:0 auto;
	overflow-x:auto;
	}
}

@media screen and (min-width: 1081px) {
	.content{
	width:68.5%;
	margin:60px auto;
	}
}

@media screen and (min-width: 641px) and (max-width:1080px) {
	.content{
	width:76%;
	margin:60px auto;
	}
}

@media screen and (max-width: 640px) {
	.content{
	width:100%;
	margin:10% auto;
	}
}


#socialBookmark{
	width:300px;
	height:30px;
	clear:both;
	margin:0px auto;
	}

#socialBookmark li{
		float:left;
		}
		#fb{ width:113px; overflow:hidden;  }
		#tw{ width:87px;}
		#line { width:100px !important; }
		#eiga { width:110px; }

@media screen and (min-width: 641px) {
	#socialBookmark{
	width:300px;
	height:30px;
	margin:0 auto;
	}
}

@media screen and (max-width: 640px) {
#socialBookmark{
	width:300px;
	height:30px;
	margin:10px auto;
	}
#socialBookmark li{
		float:left;
		}
}

/* GO THEATER
---------------------------------------------------- */
#goTheater{
	opacity:1;
	
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
.scrollPlus #goTheater{
	opacity:0;
}
@media screen and (min-width: 641px) {
	#goTheater{
		position:fixed;
		width:71px;
		height:253px;
		background:url("../images/theater_btn_pc.png") no-repeat;
		bottom:10vh;
		right:0;
		text-indent:-9999px;
	}
}

@media screen and (max-width: 640px) {
	#goTheater{
		position:fixed;
		width:210px;
		height:57px;
		background:url("../images/theater_btn_sp.png") no-repeat;
		background-size:100% auto;
		bottom:-5px;
		right:10px;
		text-indent:-9999px;
	}
}

/* PAGETOP
---------------------------------------------------- */
#pagetopBtn{
	position:absolute;
	top:-40px;
	right:30px;
	width:157px;
	height:112px;
	margin-top:10px;
}
#pagetopBtn img{
	width:100%;
}
#pagetopBtn img{
	margin-top:10px;
	display:block;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	-ms-transition: all 0.15s ease-out;
	-o-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}

#pagetopBtn img:hover{
	margin-top:0px;
}
@media screen and (max-width: 640px) {
	#pagetopBtn{
		position:absolute;
		top:-30px;
		right:5%;
		width:78px;
		height:56px;
		margin-top:10px;
	}
}


/* LOADING
----------------------------------------------------- */
#loading{
    position: absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:104px;
    height:140px;
	background:url("../images/loading.png") no-repeat;
	background-size:100% auto;
    display:block;
	}
 #loading img{
	}
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
   background:#fff02e;
    z-index: 10000 !important;
}
@media screen and (max-width: 640px) {
	#loading{
    width:70px;
    height:94px;
	}
}



/* FUWAFUWA
----------------------------------------------------- */
.fuwafuwa {

-webkit-animation:fuwafuwa 3s infinite linear alternate;
animation:fuwafuwa 3s infinite linear alternate;

}

@-webkit-keyframes fuwafuwa {
0% { transform: translateY(0) }
  33.33333% { transform: translateY(-5px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(5px) }
}

@keyframes fuwafuwa {
0% { transform: translateY(0) }
  33.33333% { transform: translateY(-5px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(5px) }
}