@charset "UTF-8";
/* CSS Document */
	
body{
	margin:0px;
    background-color: #e99c0e;
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	color:#FFF;
	height:100%;
}

html{
	height:100%;
}

img { border-style:none;
	vertical-align: bottom;}

a img { border-style:none; }

a:hover img { border-style:none; }

*{
margin: 0;
padding: 0;
}

ol, ul {
	list-style: none;
}

.cf:before,
.cf:after {
  content: "";
  display: table;}
.cf:after {
  clear: both;}
.cf {
  *zoom: 1;}


#loader {
    width: 400px;
    height: 150px;
    display: none;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -75px; /* heightの半分のマイナス値 */
    margin-left: -200px; /* widthの半分のマイナス値 */
    z-index: 103;
}
 
#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #e99c0e;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 102;
}



.menuarea{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
  	-webkit-transition: .4s;
  	transition: .4s;
  	-webkit-transform: translate3d(0, -100%, 0);
  	transform: translate3d(0, -100%, 0);
	z-index: 100;
}

#menuarea_wrapper{
	width: 100%;
	background-color: #B28247;
    overflow: hidden;
	z-index: 100;
}

.imgresponsive img{
	width: 100%;
	height: auto;
}
.menubtn{
	z-index: 101;
	position: fixed;
	top:1.5%;
	left:1.5%;
	width: 6%;
	cursor: pointer;
}

.showMenu .menuarea{
  	-webkit-transform: translate3d(0, 0, 0);
  	transform: translate3d(0, 0, 0);
}

#menu{
	width:100%;
	z-index: 99;
	overflow: hidden; /* heightを戻す */
	padding:2.5% 0.5% 1.7% 7%;
	box-sizing: border-box;
}

.menu-box img{
  width: 100%;
}

.menu-box li{
  position: relative;
  overflow: hidden;
  float: left;
  width: 12.5%;
  box-sizing: border-box;
}

.menubr{
    width:100%;
    box-sizing: border-box;
    border-right: 1px solid #875f2e;
}

.menu-box a{
  display: block;
  position: relative;
}
  
.menu-box .hoverimg{
  position: absolute;
  top: 0;
  left: -100%;
  -webkit-transition: .4s;
     -moz-transition: .4s;
      -ms-transition: .4s;
       -o-transition: .4s;
          transition: .4s;
  z-index: 301;
}

.menu-box a:hover .hoverimg{
  left: 0%;
}


#spmain{
	display:none;
}

#sptrailerarea{
	display:none;
}

#contents_wrapper{
	width:100%;
	margin:0 auto;
	font-size: 15px;
	text-align: justify;
	word-break: break-all;
	line-height: 180%;
    height: 100%;
}

#contents_wrapper img{
	max-width:100%;
	margin-left:auto;margin-right:auto;display:table;
}

#top_wrapper{
    width:100%;
    height: 100%;
	position: relative;
}

#top_ses{
    height: 100vh;
	position: absolute;
	left:3%;
	top:0;
	z-index: 5;
	opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
    transform: translateX(-200px);/* X軸方向に200px */
}

.showNavi #top_ses{
  opacity:1;
  -webkit-transition-delay:0.2s;
  transition-delay:0.2s;
    transform: translateX(0);
}

#top_ses img { 
    height: 100vh;
}


#top_celon{
    height: 100vh;
	position: absolute;
	right:3%;
	top:0;
	opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
    transform: translateX(200px);/* X軸方向に200px */
}

.showNavi #top_celon{
  opacity:1;
  -webkit-transition-delay:0.2s;
  transition-delay:0.2s;
    transform: translateX(0);
}

#top_celon img { 
    height: 100vh;
}


#top_ses_illust{
    height: 100vh;
	position: absolute;
	left:3%;
	top:0;
	z-index: 10;
	opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
}

.showNavi #top_ses_illust{
  opacity:1;
  -webkit-transition-delay:0.6s;
  transition-delay:0.6s;
}

#top_ses_illust img { 
    height: 100vh;
}

#top_celon_illust{
    height: 100vh;
	position: absolute;
	right:3%;
	top:0;
	z-index: 10;
	opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
}

.showNavi #top_celon_illust{
  opacity:1;
  -webkit-transition-delay:0.6s;
  transition-delay:0.6s;
}

#top_celon_illust img { 
    height: 100vh;
}

.fuwafuwa {
-webkit-animation:fuwafuwa 3s infinite linear alternate;
animation:fuwafuwa 3s infinite linear alternate;
}

@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
50% {-webkit-transform:translate(0, -3px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}



@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-3deg);}
50% {transform:translate(0, -3px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(3deg);}
}

#top_logo_wrapper{
    width:42%;
	position: absolute;
	left:29%;
	top:50px;
	z-index: 20;
	opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
}

.showNavi #top_logo_wrapper{
  opacity:1;
  -webkit-transition-delay:1s;
  transition-delay:1s;
}

#top_logo{
	width:100%;
	margin-bottom: 10px;
}

#snsbtn_wrapper1{
	width:50%;
    margin:0 auto;
	overflow: hidden; /* heightを戻す */
	margin-bottom: 10px;
}

.snsbtn{
    width:48%;
	float: left;
	margin:1%;
    overflow: hidden;
  transition-duration: 0.5s;
}

.snsbtn img{
  width: 100%;
  cursor: pointer;
}
.snsbtn:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
  transform: translateY(-2px);
  transition-duration: 0.5s;
}


#snsbtn_wrapper2{
	width:248px;
    margin:0 auto;
	overflow: hidden; /* heightを戻す */
	margin-bottom: 20px;
}

.tweet{
	width:75px;
	float:left;
	margin-right:5px;
	line-height: 100%;
}

.like{
	width:80px;
	float:left;
	line-height: 100%;
	margin-right:5px;
}

.line{
	width:83px;
	float:right;
	line-height: 100%;
}

.tabletview{
    display: none;
}


.scrollShowEffect {
	-webkit-transition-delay: 1s;
	   -moz-transition-delay: 1s;
	    -ms-transition-delay: 1s;
	     -o-transition-delay: 1s;
	        transition-delay: 1s;
	-webkit-transition: all 1s ease-in-out;
	   -moz-transition: all 1s ease-in-out;
	    -ms-transition: all 1s ease-in-out;
	     -o-transition: all 1s ease-in-out;
	        transition: all 1s ease-in-out;
	transition-timing-function: cubic-bezier(.68,-0.55,.27,1.55);
	opacity:0;
}

.scrollShowEffect-R {
	-webkit-transform: translate3d(60%, 0%, 0);
	   -moz-transform: translate3d(60%, 0%, 0);
	    -ms-transform: translate3d(60%, 0%, 0);
	     -o-transform: translate3d(60%, 0%, 0);
	        transform: translate3d(60%, 0%, 0);
}
.scrollShowEffect-L {
	-webkit-transform: translate3d(-60%, 0%, 0);
	   -moz-transform: translate3d(-60%, 0%, 0);
	    -ms-transform: translate3d(-60%, 0%, 0);
	     -o-transform: translate3d(-60%, 0%, 0);
	        transform: translate3d(-60%, 0%, 0);
}
.scrollShowEffect-B {
	-webkit-transform: translate3d(0, 30%, 0);
	   -moz-transform: translate3d(0, 30%, 0);
	    -ms-transform: translate3d(0, 30%, 0);
	     -o-transform: translate3d(0, 30%, 0);
	        transform: translate3d(0, 30%, 0);
}

.scrollShowEffect-T {
	-webkit-transform: translate3d(0, -15%, 0);
	   -moz-transform: translate3d(0, -15%, 0);
	    -ms-transform: translate3d(0, -15%, 0);
	     -o-transform: translate3d(0, -15%, 0);
	        transform: translate3d(0, -15%, 0);
}

.scrollShowEffect.showItem {
	opacity:1;
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	     -o-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
}


.mb0{
	width:100%;
	overflow: hidden; /* heightを戻す */
}

.mb5{
	width:100%;
	overflow: hidden; /* heightを戻す */
	margin-bottom: 5px;
	line-height: 140%;
}

.mb10{
	width:100%;
	overflow: hidden; /* heightを戻す */
	margin-bottom: 10px;
}

.mb20{
	width:100%;
	overflow: hidden; /* heightを戻す */
	margin-bottom: 20px;
}

.mb30{
	width:100%;
	overflow: hidden; /* heightを戻す */
	margin-bottom: 30px;
}

.mb50{
	width:100%;
	overflow: hidden; /* heightを戻す */
	margin-bottom: 50px;
}

.pagetitle{
	width:400px;
	margin:0 auto;
	margin-bottom: 60px;
}

#footer_wrapper{
	width:100%;
	overflow: hidden; /* heightを戻す */
    background-color: #e99c0e;
}

#footer_inner{
	width:30%;
	margin:0 auto;
	padding:50px 0 50px 0;
}

.spview{
	display: none;
}

.pcview{
	width:100%;
}

.content {
  	position: relative;
	margin: 0 auto;
	padding: 0;
}

.spphoto{
    display: none;
}

#intro_wrapper{
	width:100%;
	background-color:#b18247;
}

#intro_inner{
	width:100%;
    padding:3% 15%;
    box-sizing: border-box;
}

#story_wrapper{
	width:100%;
	background: url(images/story/bg.jpg) 100% 0 no-repeat fixed;
	background-size:cover;
	overflow: hidden; /* heightを戻す */
    color: #b18247;
    padding-top:35%;
}

#story_inner{
	width:100%;
	box-sizing: border-box;
    background-color: #f5e928;
	overflow: hidden; /* heightを戻す */
	padding:5% 15% 5% 15%;
}

#cast_wrapper{
	width:100%;
	background: url(images/cast/bg.jpg) 100% 0 no-repeat fixed;
	background-size:cover;
	overflow: hidden; /* heightを戻す */
    color: #fff;
}

#cast_inner{
	width:100%;
	box-sizing: border-box;
	overflow: hidden; /* heightを戻す */
	padding:5%;
    font-size: 14px;
    line-height: 170%;
}

#staff_wrapper{
	width:100%;
	background: url(images/staff/bg1.jpg) 100% 0 no-repeat fixed;
	background-size:cover;
	overflow: hidden; /* heightを戻す */
    padding-top: 40%;
}

#staff_inner{
	width:100%;
	background: url(images/staff/bg2.jpg) 100% 0 no-repeat fixed;
	background-size:cover;
	box-sizing: border-box;
	overflow: hidden; /* heightを戻す */
	padding:5% 15%;
    font-size: 14px;
    line-height: 170%;
    color: #222;
}

#comment_wrapper{
	width:100%;
	background: url(images/comment/bg.jpg) 100% 0 no-repeat fixed;
	background-size:cover;
	overflow: hidden; /* heightを戻す */
}

#comment_inner{
	width:100%;
	box-sizing: border-box;
	overflow: hidden; /* heightを戻す */
	padding:5% 10% 5% 45%;
    font-size: 14px;
    line-height: 170%;
    color: #222;
}

.intro_l{
    width:16%;
    float: left;
    margin-right: 2%;
}

.intro_c{
    width:64%;
    float: left;
}

.intro_r{
    width:16%;
    float: right;
}
.intro_bottom{
    width:40%;
    margin:0 auto;
}


.cast_l{
    width:48%;
    float: left;
}

.cast_r{
    width:48%;
    float: right;
}

.cast_l2{
    width:31%;
    float: left;
    margin-right: 3.5%;
}

.cast_r2{
    width:31%;
    float: right;
}


.sc-slider{
  width: 80%;
  margin:0 auto;
  position: relative;
  height:auto;
}

ul.bxslider,
ul.bxslider li {
margin:0;
padding:0;
height:auto;
}
  
.next-btn{
  width: 100px;
  height: 160px;
  position: absolute;
  right:-120px;
  top:40%;
  margin-top: -20px;
}
.prev-btn{
  width: 100px;
  height: 160px;
  position: absolute;
  left: -120px;
  top:40%;
  margin-top: -20px;
}
.bx-prev,.bx-next {
  width: 100%;
  display: block;
  height: 100%;
  position: absolute;
  top:0;
  z-index: 100;
  /*background-color: #f90;*/
}

.name{
    width:60%;
    margin-bottom: 10px;
}

.name2{
    width:100%;
    margin-bottom: 10px;
}

.loop_wrap {
  overflow: hidden;
}

.sliding {
  background: url("images/cast/photo.jpg") repeat-x;
  height: 155px;
  width: 2500px;
  animation: slide 60s linear infinite;
}

@keyframes slide {
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}

.wrapperline{
	width:100%;
	overflow: hidden; /* heightを戻す */
	padding:0;
	display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

.staffbox{
    width:46%;
    float: left;
    margin:2%;
}

.academy{
	font-size: 14px;
	display: inline-block;
    vertical-align: top;
}


.dispnone{
	display: none;}

.trailerhtml,#youtube-modal{
	background: #000;
	width: 100%;}
#youtube-modal iframe{
	border:none;}
#youtube-modal .youtube-showing{
	display: block;}
	
.youtube-modal-btn li{
	text-align: center;
	color: #FFF;
	float: left;
	width:50%;
	box-sizing: border-box;
	font-weight: bold;
	font-size: 14px;}

.youtube-modal-btn img{
	max-width:100%;
	margin-left:auto;margin-right:auto;display:table;
}

.youtube-modal-btn li +li{
	float: right;}
	
.youtube-modal-btn a{
	display: block;
	color: #FFF;
	padding:0;
	text-decoration: none;}
	
.youtube-modal-btn a.active{
	background: #666;}
	
.movie-wrap {
  position: relative;
  padding-bottom: 56.3%;
  padding-top: 20px;
  height: 0;
  overflow: hidden;}
  
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}


.commentbox{
    width:100%;
    font-size: 16px;
	line-height: 180%;
    padding: 5%;
	margin:2%;
	color: #333;
    box-sizing: border-box;
	background: url("images/comment/box.jpg") ;
	background-position: center top;
	background-repeat: repeat;
}

.commentname1{
    width:100%;
    font-size: 20px;
    font-weight: bold;
    color:#4e142e;
    text-align: right;
}

.commentname2{
    width:100%;
    font-size: 12px;
    font-weight: bold;
    color: #b18247;
    text-align: right;
}

.commentl{
    width:30%;
	float: left;
}

.commentr{
    width:67%;
	float: right;
}

.keisyou{
    font-size:12px;
    text-align: right;
	color: #ddd;
}

#top_comment{
    width:14%;
    position: absolute;
    right: 15%;
    bottom: 9%;
	opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
    z-index: 105;
}

.showNavi #top_comment{
  opacity:1;
  -webkit-transition-delay:2s;
  transition-delay:2s;
}

#top_comment_sp{
    display: none;
}

.top_commentbtn{
    width:70%;
    pdding-left: 10%;
    margin-bottom: 10px;
}

.filmarks{
    width:100%;
}

#dvdbd{
    width:20%;
    position: absolute;
    left:15%;
    bottom:10%;
	opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
    z-index: 105;
}

.showNavi #dvdbd{
  opacity:1;
  -webkit-transition-delay:2s;
  transition-delay:2s;
}




@media screen and (max-width:1050px){

.menuarea{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: auto;
  	-webkit-transition: .4s;
  	transition: .4s;
  	-webkit-transform: translate3d(0, -100%, 0);
  	transform: translate3d(0, -100%, 0);
	z-index: 100;
}

#menuarea_wrapper{
	width: 100%;
	background-color: #B28247;
    overflow: hidden;
	z-index: 100;
}

.menubtn{
	z-index: 101;
	position: fixed;
	top:1.5%;
	left:inherit;
    right: 1.5%;
	width: 14%;
	cursor: pointer;
}


#menu{
	width:100%;
	z-index: 99;
	overflow: hidden; /* heightを戻す */
	padding:30% 10% 20% 10%;
	box-sizing: border-box;
}

.menu-box li{
  position: relative;
  overflow: hidden;
  float: left;
  width: 48%;
  margin:1%;
  box-sizing: border-box;
  border: 1px solid #875f2e;
}

.menubr{
    width:100%;
    box-sizing: border-box;
    border-right:none;
}




    
#top_wrapper{
    width:100%;
	position: relative;
}

#top_ses{
    display: none;
}

#top_celon{
    display: none;
}

#top_ses_illust{
    display: none;
}


#top_celon_illust{
    display: none;
}

.tabletview{
    width:100%;
    display: inherit;
}

#top_logo_wrapper{
    width:56%;
	position: absolute;
	left:22%;
	top:50px;
	z-index: 20;
}


@media screen and (max-width:600px){

#loader {
    width: 300px;
    height: 112px;
    display: none;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -56px; /* heightの半分のマイナス値 */
    margin-left: -150px; /* widthの半分のマイナス値 */
    z-index: 103;
}

.trailer{
    display: none;
}
	
#spmain{
	width:100%;
	display: inherit;
    margin-bottom: 20px;
}

#top_wrapper{
    width:100%;
	height: auto;
	position:inherit;
}

#top_image{
	display: none;
}

#top_logo_wrapper{
    width:90%;
	position: inherit;
	left:0;
	top:0;
	margin:0 auto;
	padding-bottom: 70px;
}

#top_logo{
	display: none;
}

#snsbtn_wrapper1{
	width:100%;
    margin:0 auto;
	overflow: hidden; /* heightを戻す */
	margin-bottom: 20px;
}

div.sptrailer {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
	margin-bottom: 20px;
}
 
div.sptrailer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#sptrailerarea{
	width:100%;
	margin:0 auto;
	margin-bottom:30px;
	display: inherit;
}

.tablet{
    display: none;
}

.spview{
	display:inherit;
}

.pcview{
	display: none;
}

.tabletview{
    display: none;
}


.pagetitle{
	width:90%;
	margin:0 auto;
	margin-bottom: 30px;
}

#footer_inner{
	width:60%;
	margin:0 auto;
	padding:50px 0 50px 0;
}

#intro_wrapper{
	width:100%;
	background-color:#b18247;
}

#intro_inner{
	width:100%;
	padding:8% 10% 8% 10%;
    box-sizing: border-box;
}

#story_wrapper{
	width:100%;
	background:none;
	overflow: hidden; /* heightを戻す */
    color: #b18247;
    padding-top:0;
}

#story_inner{
	width:100%;
	box-sizing: border-box;
    background-color: #f5e928;
	overflow: hidden; /* heightを戻す */
	padding:8% 10% 8% 10%;
}

#cast_wrapper{
	width:100%;
	background: url(images/cast/bg.jpg) 100% 0 no-repeat fixed;
	background-size:cover;
	overflow: hidden; /* heightを戻す */
    color: #fff;
}

#cast_inner{
	width:100%;
	box-sizing: border-box;
	overflow: hidden; /* heightを戻す */
	padding:8% 10% 8% 10%;
    font-size: 14px;
    line-height: 170%;
}

#staff_wrapper{
	width:100%;
	background:none;
    background-color: #000;
	overflow: hidden; /* heightを戻す */
    padding-bottom: 0;
}

#staff_inner{
	width:100%;
	background: url(images/staff/bg2.jpg) 100% 0 no-repeat fixed;
	background-size:cover;
	box-sizing: border-box;
	overflow: hidden; /* heightを戻す */
	padding:8% 10% 8% 10%;
    font-size: 14px;
    line-height: 170%;
    color: #222;
}

.intro_l{
    display: none;
}

.intro_c{
    width:100%;
    float: none;
}

.intro_r{
    display: none;
}
.intro_bottom{
    width:80%;
    margin:0 auto;
    margin-top:20px;
}

.name{
    width:100%;
    margin-bottom: 10px;
}

.name2{
    width:100%;
    margin-bottom: 10px;
}


.staffbox{
    width:100%;
    float: none;
    margin:0;
    margin-bottom: 30px;
}
	
#comment_wrapper{
	width:100%;
	background: none;
	overflow: hidden; /* heightを戻す */
	background-color: #3f1031;
}

#comment_inner{
	width:100%;
	box-sizing: border-box;
	overflow: hidden; /* heightを戻す */
	padding:8% 10% 8% 10%;
    font-size: 14px;
    line-height: 170%;
    color: #222;
}

#top_comment{
    display: none;
}

#top_comment_sp{
    display: inherit;
    width:90%;
    margin:0 auto;
    margin-bottom: 20px;
}


#dvdbd{
    display: none;
}

}