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



@top



*****************************************--*/
#top{
	position:relative;
    background: #000;
	}

.mainW{
	margin:0 0 0 260px;
	min-width:1024px;
	width:100%;
	box-sizing:border-box;
}
#mainVisual{
	width:100%;
	height:auto;
    margin-bottom: -2px;
	}
#topElement{
	position:absolute;
	top:0;
	width:100%;
	text-align:center;
	z-index:1;
	}
#topElement li{
	position:absolute;	
	display:inline-block;
	box-sizing:border-box;
	vertical-align:bottom;
	}
#topElement li img{
	height:auto;
	}
#eigaka{
	height:auto;
	}
#koukai{
	height:auto;
	}

.run0 {
    animation: runAnime0 .9s  infinite;
}
.run1 {
    animation: runAnime1 .5s  infinite;
}

@keyframes runAnime0 {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(1px, 1px) rotateZ(1deg)}
    50% {transform: translate(0px, 1px) rotateZ(0deg)}
    75% {transform: translate(1px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@keyframes runAnime1 {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

#song {
	margin:  5px 0 0;
	text-align: center;
	z-index: 100;
}

#song:hover {
	-moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
/*--****************************************



@banner



*****************************************--*/
#banner-container li {
	width:200px;
	margin: 1em auto 0;
	text-align: center;
}

#banner-container li img{
	width:100%;
	}

#banner-container li img:hover {
	-moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

/*--****************************************



@contents



*****************************************--*/
.content-wrap{
	background:url(../img/common/content_head.png) repeat-x 0 50px;
	background-attachment:fixed;
	padding:100px 0 20px;
	}
.content-inner{
	max-width:1280px;
	margin:0 auto;	
	}
.activeBg{
	background:url(../img/common/content_head.png) repeat-x 0 50px;
	background-attachment:fixed;	
	}
#contents h2{
	font-weight:bold;
	font-size:3em;
	color:#E5004A;
	width:100%;
	text-align:center;
	margin-bottom:20px;
	}
#contents section{
	width:100%;
	}
/*--****************************************



@intro



*****************************************--*/
#content-intro{
	margin-top:-12px;
	}
#content-intro img{
	width:100%;
}
#content-intro p{
	width:90%;
	margin:0 auto 2em;
	}
#content-intro .copy{
	}
/*--****************************************



@story



*****************************************--*/
#story{
}
#story-img{
	margin-top:-48px;
	position:relative;
	}
#story-main-img{
	width:100%;
	display:block;
	}
#word1,
#word2,
#word3{
	position:absolute;
	z-index:10;
	}
#word1{
	top:20%;
	right:4%;
	width:12%;
	max-width:108px;
	}
#word2{
	width:6%;
	bottom:8%;
	right:49%;
	max-width:67px;
	}
#word3{
	top:30%;
	left:4%;
	width:6%;
	max-width:67px;
	}
#story-txt{
	padding-top:10px;
	background:url(../img/story/bg01.png) no-repeat;
	background-size:cover;
	text-align:center;
	color:#E5004A;
	font-size:1.2em;
	line-height:1.8em;
	font-weight:bold;
	}
#story-txt p{
	padding:10px 0;
	}
#story-txt img{
	width:100%;
	}
/*--****************************************



@characters



*****************************************--*/
#characters{
	width:100%;	
}
#characters img{
	margin-top:-36px;
	width:100%;
	}

/*--****************************************



@keyword



*****************************************--*/
#keyword h3{
	font-size:1.4em;
	font-weight:bold;
	color:#E5004A;
	width:100%;
	text-align:center;
}
.keyword-box{
	display:inline-block;
	width:33%;
	margin:0;
	box-sizing:border-box;
	vertical-align:middle;
	}
.keyword-box-center{
	display:inline-block;
	width:34%;
	margin:0;
	font-size:0.9em;
	box-sizing:border-box;
	vertical-align:middle;
	}
#keyword ul li:first-child,
#keyword ul li:nth-child(3){
	background:#eeeeee;	
	}
#keyword ul li:nth-child(2),
#keyword ul li:last-child{
	background:#fff537;	
	}
.key-pic{
	width:100%;
	display:block;
	}
.key-txt{
	text-align:justify;
	padding:4%;
	font-size:1em;
	line-height:1.2em;
	}
.key-img img{
	width:20%;
	max-width:71px;
	}
#source{
	text-align:right;
	font-size:0.8em;
	}
/*--****************************************



@cast



*****************************************--*/
#cast{
}
#main-cast{
	position:relative;
	background: url(../img/cast/bg.png) no-repeat center center;
	background-size:cover;
	width:100%;
	margin-bottom:12px;
	}
#main-cast-img{
	text-align:center;
	}
#main-cast-img img{
	width:48%;
	}
#sasaki,
#yokoyama{
	position:absolute;
	bottom:10%;
	width:30%;
	vertical-align:middle;
	padding:18px 24px;
	text-align:justify;
	border:2px solid #fff537;
	background:rgba(255,255,255,0.70);
	z-index:5;
	}
#sasaki{
	left:5%;
	}
#yokoyama{
	right:5%;
	}
#main-cast li:first-child{
	margin-right:-48px;
	}
#main-cast li:last-child{
	margin-left:-48px;
}
#main-cast li:nth-child(2){
	width:38%;
	padding:24px 0;
	}
#main-cast li img{
	width:100%;
	}
.actor-name{
	color:#E5004A;
	font-size:2em;
	font-weight:bold;
	}
.chara-name{
	color:#E5004A;	
	font-size:1.6em;
	font-weight:bold;
	}
.actor-img{
	width:25%;
	float:left;
	}
.actor-img img{
	width:100%;
	}
.actor-profile{
	width:75%;
	height:100%;
	padding-left:12px;
	box-sizing:border-box;
	}
#sub-cast{
	background:rgba(255,255,255,0.7);	
	}
#sub-cast li{
	width:94%;
	margin:12px auto;
	padding:12px 0;
	clear:both;
	overflow:hidden;
	border-bottom:2px solid #E5004A;
	}
.border-bold{
	border-bottom:4px solid #E5004A !important;
	}
.left .actor-profile{
	float:right;	
	}
.left .actor-img{
	float:left;	
	}
.right .actor-profile{
	float:left;	
	}
.right .actor-img{
	float:right;	
	}

/*--****************************************



@staff



*****************************************--*/
.staff-list{
	text-align:center;
	margin:0 auto;
	border-collapse: separate;
	border-spacing: 42px 21px;
	display:table;
}
.staff-list li{
	display:table-cell;
	vertical-align:top;
	box-shadow: 0 0 0 2px #E5004A, 0 0 0 12px #FFF, 0 0 0 14px #E5004A;
	padding:12px;
	width:50%;
	box-sizing:border-box;
	background:rgba(255,255,255,0.70);
	}
#content-staff{
	margin-bottom:84px;
	}
#content-staff .name,
#content-music .name{
	font-size:2em;
	color:#E5004A;
	font-weight:bold;
	}
#content-staff .staff-part{
	font-size:18px;
	color:#000;
	font-weight:bold;
}
#director #director-img{
	float:left;		
	width:40%;
	}
#director #director-profile{
	float:right;		
	width:60%;
	padding-left:12px;
	box-sizing:border-box;
	}
#author #author-img{
	float:right;		
	width:40%;
	}
#director-img img,
#author-img img{
	width:100%;
	}

#author #author-profile{
	float:left;		
	width:60%;
	padding-right:12px;
	box-sizing:border-box;
	}
#author-comment{
	margin:12px 0;
	}
#author-comment img{
	width:100%;	
	}
#book{
	overflow:hidden;
	width:100%;
	}
#book #book-img{
	float:right;		
	width:14%;
	padding:12px;
	box-sizing:border-box;
	}
#book #book-img img{
	width:100%;
	}
#book #book-txt{
	float:left;
	width:86%;
	font-size:9px;
	text-align:right;
	z-index:10;
	}
#book-txt a{
	display:block;
	margin-right:1.6em;
	}
#book #book-txt img{
	width:100%;
	}
#director,
#author{
	width:94%;
	margin:12px auto;
	padding:12px 0;
	clear:both;
	}
#content-music{
	padding-bottom:36px;
	margin-bottom:36px;
	}
#music-list{
	text-align:center;
	margin:0 auto;
	border-collapse: separate;
	border-spacing: 42px 0;
	display:table;
	text-align:center;
}
#music-list li{
	display:table-cell;
	vertical-align:top;
	box-shadow: 0 0 0 2px #E5004A, 0 0 0 12px #FFF, 0 0 0 14px #E5004A;
	width:33%;
	padding:12px;
	background:rgba(255,255,255,0.70);
	}
#kanjani{
	vertical-align:top;
	box-shadow: 0 0 0 2px #E5004A, 0 0 0 12px #FFF, 0 0 0 14px #E5004A;
	padding:12px;
	width:94%;
	margin:48px auto 0;
	box-sizing:border-box;
	background:rgba(255,255,255,0.70);
	overflow:hidden;
	}
#kanjani-name{
	margin-left:1em;
	font-size:1.4em;
	}
#kanjani-img{
	width:30%;
	float:left;
	}
#kanjani-img img,
#kanjani-profile{
	width:70%;
	float:right;
	padding:0 18px;
	box-sizing:border-box;
	}
#kanjani-shudaika{
	width:48%;
	display:block;
	margin:8px 0 0 auto;
	}
/*--****************************************



@gallery



*****************************************--*/
#gallery .slider-wrap{
	width:80%;
	margin:0 auto;
	}
#gallery .slider img{
	width:100%;
	}
#gallery .slider-nav{
	width:100%;
	margin:0 auto;
	}
.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
	color:#E5004A !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#gallery .slider div{
	width:100%;
	}
#gallery .slider div img{
	width:100%;
	}
.slider-nav-single{
	margin:1px;
	width:20%;
	box-sizing:border-box;
	}
#gallery .slider-nav div img{
	width:100%;
	height:auto;
	}
.slick-prev {
    left: 0;
	top:-380% !important;
	z-index:10;
}
.slick-next {
    right: 0;
	top:-380% !important;
}
/*--****************************************



@prono



*****************************************--*/
#prono{
	background:url(../img/prono/bg.jpg) center 120px fixed;
	background-size:cover;
	min-height:900px;
}
#content-prono{
	width:90%;
	margin:0 auto;
	}
#prono h2{
	margin-bottom:64px;
	}
#content-prono .content-inner{
	text-align:center;
	margin:0 auto;
	border-collapse: separate;
	border-spacing: 42px 0;	
}
.prono-list-left,
.prono-list-right{
	text-align:center;
	border-collapse: separate;
	border-spacing: 42px 0;
	clear:both;	
}
.prono-list-left .inner{
	margin:0 auto 68px 0;
	}
.prono-list-right .inner{
	margin:0 0 68px auto;
	}
.prono-list-left .inner,
.prono-list-right .inner{
	position:relative;
	width:90%;
	box-shadow: 0 0 0 2px #E5004A, 0 0 0 12px #FFF, 0 0 0 14px #E5004A;
	padding:48px 12px 12px 12px;
	box-sizing:border-box;
	background:rgba(255,255,255,0.90);
	}
.prono-list-left .prono-ttl{
	position:absolute;
	top:-34px;
	width:600px;
	}
.prono-list-right .prono-ttl{
	position:absolute;
	top:-34px;
	right:24px;
	width:660px;
	}
.prono-ttl img{
	width:100%;
	}
.prono-ttl-right img{
	width:100%;
	}
.prono-txt{
	width:60%;
	display:inline-block;
	padding:0 18px;
	box-sizing:border-box;
	vertical-align:top;
	text-align:justify;
	}
.prono-txt span{
	display:block;
	margin-bottom:1em;
	}
.prono-img{
	width:40%;
	display:inline-block;
	}
.prono-img img{
	width:100%;
	}