@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');

html{
	font-size: 62.5%;
}
/* BODY
---------------------------------------------------- */
body {
	background:#ffc621;
	color:#262626;
	font-family: "Noto Sans JP","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-weight:500;
    font-size: 1.7rem;
	line-height:1.55;
	-webkit-text-size-adjust: none;
	}

/* LINK
---------------------------------------------------- */
a:link		{ color:#f29496; 	text-decoration:none; }
a:visited	{ color:#f29496; 	text-decoration:none; }
a:hover		{ color:#d85c5f; text-decoration:none;}
a:active	{ color:#d4a7a8; 	text-decoration:none; }


.smal{
	font-size:80%;
}

@media screen and (min-width: 769px) {
.forPC{ display:block; }
.forSP{ display:none; }
	
body {
	font-size: 1.75rem;
	line-height:1.65;
	}
p{ margin-bottom:20px;}

}

@media screen and (max-width: 768px) {
body {
	font-size: 1.5rem;
	}
p{  margin-bottom:12px;}
.forPC{ display:none; }
.forSP{ display:block; }
}

em{
	font-family: "Zen Kaku Gothic Antique","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-weight:700;
}


/* BASE
----------------------------------------------------- */
#wrapper{
	width:100%;
	position:relative;
	overflow-x:hidden;
	z-index:1;
	}
	#wrapper section{
		width:100%;
	}
@media screen and (min-width: 769px) {
	#wrapper{
	}
	#wrapper section{
	}
}
@media screen and (max-width: 768px) {
	#wrapper{
		width:100%;
		position:relative;
	}
	#wrapper section{
	}
}


/* CONTENT CATETITLE
----------------------------------------------------- */

@media screen and (min-width: 769px) {
	
	.cateTitle{
		width:420px;
		height:110px;
		margin:0 auto 0px auto;
		text-indent:-9999px;
		display:block;
	}
	
}
@media screen and (max-width: 768px) {
	
	.cateTitle{
		width:100vw;
		height:25vw;
		text-indent:-9999px;
		display:block;
	}
	
}

#intro .cateTitle{
	background:url(../images/intro_ti.png) no-repeat;
	background-size:100% auto;
}
#story .cateTitle{
	background:url(../images/story_ti.png) no-repeat;
	background-size:100% auto;
}
#cast .cateTitle{
	background:url(../images/cast_ti.png) no-repeat;
	background-size:100% auto;
}
#staff .cateTitle{
	background:url(../images/staff_ti.png) no-repeat;
	background-size:100% auto;
}
#comment .cateTitle{
	background:url(../images/comment_ti.png) no-repeat;
	background-size:100% auto;
}
#theaters .cateTitle{
	background:url(../images/theater_ti.png) no-repeat;
	background-size:100% auto;
}


/* EFFECT
----------------------------------------------------- */

.effect01{
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
	transition-delay: 0.1s !important;
	opacity:0;
	}
.effect02 {
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
	transition-delay: 0.4s !important;
	opacity:0;
	}
.effect03{
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
	transition-delay: 0.4s !important;
	opacity:1;
	transform:scale(1,1);
	}
.effect04 {
	 -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-delay: 0.2s !important;
	opacity:0;
	transform:rotate(-5deg);
	margin-top:-40px;
	}
.effect04.anim,
.effect01.anim,
.effect02.anim,
.effect03.anim{ opacity:1 !important;
	transform:scale(1,1);
}

.effect04.anim{
	opacity:1 !important;
	transform:rotate(0deg);
	margin-top:0px;
}


/* LOADING
---------------------------------------------------- */

#loading{
    position: absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:80px;
    height:90px;
    display:block;
	}
 
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 10000 !important;
	
	background:#ffc621;
	background-size:cover;
}
.loader{
	width:80px;
	height:90px;
	background:url(../images/loading.png) no-repeat;
	background-size:100% auto ;
	opacity:1;
}

/* PAGETOP
---------------------------------------------------- */
#pagetopBtn{
	position:fixed;
	bottom:20px;
	right:20px;
	width:50px;
	height:50px;
	
	background: rgba(255,255,255,0.4);
	background-size:100% auto;
	border-radius: 30px;
	opacity:0;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	z-index:8000;
	text-indent:-9999px;
}
#pagetopBtn::after{
	position:absolute;
	display:block;
	content:' ';
	top: 20px;;
	left: 20px;
	width:12px;
	height:12px;
	border-top:3px solid #53844c ;
	border-right:3px solid #53844c ;
	transform: rotate( -45deg)
}
.scrollDown #pagetopBtn{
	opacity:1;
}
@media screen and (max-width: 768px) {
	#pagetopBtn{
		position:fixed;
		bottom:20px;
		top:auto;
		right:10px;
		width:40px;
		height:40px;
	}
	#pagetopBtn::after{
		position:absolute;
		display:block;
		content:' ';
		top: 16px;;
		left: 15px;
		width:10px;
		height:10px;
		border-top:2px solid #53844c ;
		border-right:2px solid #53844c ;
		transform: rotate( -45deg)
	}
}