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

@PC - style.css
Copyright (c) ULM Co.,Ltd. - http://www.ulm-design.com

*****************************************--*/
#wrapper {
  background: #000;
}

#top {
  height: 100%;
  width: 100%;
}

#main{
  width: 100%;
  position: relative;
	overflow: hidden;
}

#eigaland-widget{
	position: absolute;
	z-index: 1;
	top: 30%;
	right: 30px;
}

#dvd-banner{
  z-index: 10;
  transition: all 0.3s ease;
	position: relative;
	position: absolute;
	top: calc(50% - 105px);
	right: 50px;
}

#dvd-banner:hover{
  opacity: 0.8;
  transform: scale(1.1);
}

#cp-banner{
  z-index: 10;
  transition: all 0.3s ease;
	position: relative;
}

#cp-banner:hover{
  opacity: 0.8;
  transform: scale(1.1);
}

#cp-banner:after{
  content: "";
  display: block;
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: -1;
  bottom: 10px;
  left: 0px;
  background: url(../img/top/cp_banner0_bg.png) no-repeat;
	background-size: 150px;
  animation: bgRotate 10s infinite linear;
}

#cv-banner{
  z-index: 10;
  transition: all 0.3s ease;
	position: relative;
}

#cv-banner:hover{
  opacity: 0.8;
  transform: scale(1.1);
}

#cv-banner:after{
  content: "";
  display: block;
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  background: url(../img/top/cv_banner0_bg.png) no-repeat;
	background-size: 150px;
  animation: bgRotate 10s infinite linear;
}

#cp-banner img, #cv-banner img {
	width: 150px;
	height: 150px;
}

#banner-area {
	position: absolute;
	bottom: 15%;
	right: 20px;
	display: flex;
}

@keyframes bgRotate{
  0%{transform: rotate(0deg)}
  100%{transform: rotate(360deg)}
}

#talk-banner{
	position: absolute;
	bottom: 50%;
	width: 180px;
  z-index: 10;
  transition: all 0.3s ease;
}

#talk-banner img {
	width: 180px;
}

#talk-banner:hover{
  opacity: 0.8;
  transform: scale(1.1);
}

#senkou-banner{
	position: absolute;
	bottom: calc(50% - 200px);
	width: 180px;
  z-index: 10;
  transition: all 0.3s ease;
}

#senkou-banner img {
	width: 180px;
}

#senkou-banner:hover{
  opacity: 0.8;
  transform: scale(1.1);
}



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

#main-visual-container

-------------------------------*/
#main-visual-container{
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

#main-visual{
  position: absolute;
  z-index: 4;
	opacity: 0;
	transform: scale(0.2);
	transition: all 0.3s cubic-bezier(.03,.88,.35,1.26);
}

#main-visual.show{
	transform: scale(1);
	opacity: 1;
}

#main-review{
	position: absolute;
	z-index: 5;
	transform: translateX(100px);
	opacity: 0;
	transition: all 0.3s cubic-bezier(.03,.88,.35,1.26);
}

#main-review.show{
	transform: translateX(0px);
	opacity: 1;
}

#main-lead{
	position: absolute;
	z-index: 6;
	transform: scale(1.1) rotate(10deg);
	opacity: 0;
	transition: all 0.5s cubic-bezier(.03,.88,.35,1.26);
}

#main-lead.show{
	transform: scale(1) rotate(0deg);
	opacity: 1;
}

#main-copy{
	position: absolute;
	z-index: 7;
	transform: translateY(30px);
	opacity: 0;
	transition: all 0.3s cubic-bezier(.03,.88,.35,1.26);
}

#main-copy.show{
	transform: translateY(0px);
	opacity: 1;
}

#main-visual-bg{
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

#main-visual-bg0{
	position: absolute;
	z-index: 1;
	transform: scale(0);
	transition: all 0.4s cubic-bezier(.03,.88,.35,1.26);
}

#main-visual-bg0.show{
	transform: scale(1);
}

#main-visual-bg1{
	position: absolute;
	z-index: 0;
	transform: scale(1.05);
	opacity: 0;
	transition: all 0.8s linear;
}

#main-visual-bg1.show{
	opacity: 1;
	transform: scale(1);
}

#main-movie-bg{
	position: absolute;
	z-index: 0;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

#main-movie-overlay{
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5) url(../common/img/overlay.png) repeat;
	background-size: 2px 2px;
}

#main-bg-video{
	position: absolute;
	z-index: 0;
}

#main-movie-gra{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0.1;
	z-index: 1;
	/*background: rgba(0,0,0,0.4);
	mix-blend-mode: overlay;*/
  background: linear-gradient(45deg, #677af0, #d637d0, #d69137);
  /*background-size: 400% 400%;
  animation: AnimationName 8s ease infinite;*/
}
 
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

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

#main-contents

-------------------------------*/
#main-contents{
  position: relative;
  z-index: 4;
  overflow: hidden;
}

#ttl,#cast,#koukai,#koukai-hibiya,#logo4DX{
  position: absolute;
	opacity: 0;
}

#ttl{

}


#nav-container{
  position: absolute;
  z-index: 10;
  top: calc((100% - 380px - 211px)/2);
  left: 0px;
  background: rgba(1,37,73,0.5);
  width: 250px;
  min-height: 211px;
  font-family: 'Bank Gothic Medium';
  font-size: 18px;
}

#nav-container:after{
  content: "";
  display: block;
  width: 250px;
  height: 36px;
  background: url(../img/common/nav_frame_top.png) no-repeat;
  position: absolute;
  top: -36px;
  left: 0px;
}

#nav-container:before{
  content: "";
  display: block;
  width: 250px;
  height: 36px;
  background: url(../img/common/nav_frame_bottom.png) no-repeat;
  position: absolute;
  bottom: -36px;
  left: 0px;
}

#nav-container-inner{
  padding: 0 0 0 45px;
}

.nav-box{
  height: 30px;
  line-height: 30px;
  padding: 0 0 20px 0;
	position: relative;
}

.nav-box:after{
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	background: #fff;
	position: absolute;
	z-index: 0;
	top: 0px;
	left: -25px;
}

.nav-box:hover:after{
	animation: nav-hover 0.2s ease-in;
}

@keyframes nav-hover{
	0%{
		width: 12px;
	}
	50%{
		width: 0px;
		left: -13px;
	}
	51%{
		width: 0px;
		left: -25px;
	}
	100%{
		width: 12px;
	}
}

.nav-box:nth-last-child(1){
  padding: 0;
}

.nav-link-btn{
  color: #fff;
	text-shadow: 0px 0px 4px rgba(14,111,161,1.0), 0px 0px 8px rgba(14,111,161,1.0);
	transition: all 0.3s ease;
  display: inline-block;
  width: 173px;
}

.nav-link-btn:hover{
	text-shadow: 2px 2px 0px rgba(0,0,0,0.5), 0px 0px 4px rgba(14,111,161,1.0), 0px 0px 8px rgba(14,111,161,1.0), 0px 0px 10px rgba(14,111,161,1.0), 0px 0px 12px rgba(14,111,161,1.0);
}

.nav-sub-txt{
  font-size: 12px;
  display: block;
  line-height: 0px;
}

.nav-icon{
	width: 17px;
	height: 17px;
	display: inline-block;
}

.icon-img{
	width: 17px;
	height: 17px;
	margin: 0 0 -4px 0;
}

#eigaland {
	width: 219px;
	position: absolute;
	top: calc((100% / 2) - 18px);
	left: 30px;
}

#eigaland .w100 {
	width: 100%;
}


#eigaland .w100:hover{
  opacity: 0.6;
}


.pamph{
	width: 100%;
	border: 1px solid #fff;
	margin: 12px 0 0 0;
	letter-spacing: 0px;
	background: rgba(0,0,0,0.3);
	position: relative;
}

.pamph:after{
	content: "";
	display: block;
	border: 3px solid transparent;
	border-left: 5px solid #fff;
	position: absolute;
	top: 11px;
	left: 9px;
}

.pamph:hover{
	color: #000;
	background: #fff;
}


.pamph:hover a{
	color: #000;
}

.pamph:hover:after{
	border-left: 5px solid #000;
}



.pamph a{
	display: block;
	color: #fff;
	font-size: 12px;
	text-align: center;
	padding: 8px 0;
}



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

#frame

-------------------------------*/
#frame-container{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}

.border-frame{
  position: absolute;
  z-index: 0;
  background: #fff;
}

.border-frame:after{
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  background: #fff;
}

#frame-top{
  width: 100%;
  height: 3px;
  top: 0px;
  left: 0px;
  right: 0px;
}

#frame-top:after{
  top: 8px;
  left: 8px;
  right: 8px;
  width: calc(100% - 16px);
  height: 1px;
}


#frame-bottom{
  width: 100%;
  height: 3px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

#frame-bottom:after{
  top: -5px;
  left: 8px;
  right: 8px;
  width: calc(100% - 16px);
  height: 1px;
}

#frame-left{
  width: 3px;
  height: 100%;
  top: 0px;
  left: 0px;
  bottom: 0px;
}

#frame-left:after{
  top: 8px;
  left: 8px;
  bottom: 8px;
  height: calc(100% - 16px);
  width: 1px;
}

#frame-right{
  width: 3px;
  height: 100%;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

#frame-right:after{
  top: 8px;
  right: 8px;
  bottom: 8px;
  height: calc(100% - 16px);
  width: 1px;
}

.container-ttl-left{
  width: 100px;
  border-bottom: 1px solid #fff;
  text-align: center;
  color: #fff;
  font-family: 'Bank Gothic Medium';
  font-style: italic;
  margin: 0 0 0 42px;
  padding: 0 0 3px 0;
  position: relative;
  font-size: 14px;
  letter-spacing: 4px;
}

.container-ttl-left:after{
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: #fff;
  position: absolute;
  bottom: -4px;
  right: -7px;
}

.container-ttl-left:before{
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  left: -17px;
  transform: rotate(45deg);
}

.container-ttl-left-border0{}
.container-ttl-left-border0:after{
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 13px;
  left: -44px;
}

.container-ttl-left-border0:before{
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 16px;
  left: -33px;
}

.container-ttl-left-border1{font-weight: normal;}
.container-ttl-left-border1:after{
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  left: -15px;
  transform: rotate(45deg);
}

.container-ttl-left-border1:before{
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: -4px;
  left: 9px;
}

.container-ttl-right{
  width: 100px;
  border-bottom: 1px solid #fff;
  text-align: center;
  color: #fff;
  font-family: 'Bank Gothic Medium';
  font-style: italic;
  margin: 0 42px 0 0;
  padding: 0 0 3px 0;
  position: relative;
  font-size: 14px;
  letter-spacing: 3px;
}

.container-ttl-right:after{
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: #fff;
  position: absolute;
  bottom: -4px;
  left: -7px;
}

.container-ttl-right:before{
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  right: -17px;
  transform: rotate(-45deg);
}

.container-ttl-right-border0{}
.container-ttl-right-border0:after{
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 13px;
  right: -44px;
}

.container-ttl-right-border0:before{
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 16px;
  right: -33px;
}

.container-ttl-right-border1{font-weight: normal;}
.container-ttl-right-border1:after{
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  right: -15px;
  transform: rotate(-45deg);
}

.container-ttl-right-border1:before{
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: -4px;
  right: 9px;
}

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

#share-container

-------------------------------*/
#share-container{
  position: absolute;
  z-index: 10;
  bottom: 200px;
  left: 0px;
}

#share-container-inner{
  margin: 20px 0 0 40px;
}

.share-btn{
  line-height: 26px;
  text-align: center;
  position: relative;
  margin: 0 5px;
}

.share-link-btn{
  color: #fff;
  font-size: 18px;
}

.share-btn-left{
  width: 10px;
  height: 35px;
  overflow: hidden;
  position: relative;
  display: block;
}

.share-btn-left0{
  width: 30px;
  height: 40px;
  border-bottom: 1px solid #fff;
  display: block;
  transform: rotate(60deg);
  position: absolute;
  top: -2px;
  left: 9px;
}

.share-btn-left1{
  width: 30px;
  height: 40px;
  border-top: 1px solid #fff;
  display: block;
  transform: rotate(-60deg);
  position: absolute;
  top: 0px;
  left: 6px;
}

.share-btn-right{
  width: 10px;
  height: 35px;
  overflow: hidden;
  position: relative;
  display: block;
}

.share-btn-right0{
  width: 30px;
  height: 40px;
  border-bottom: 1px solid #fff;
  display: block;
  transform: rotate(-60deg);
  position: absolute;
  top: -2px;
  left: -29px;
}

.share-btn-right1{
  width: 30px;
  height: 40px;
  border-top: 1px solid #fff;
  display: block;
  transform: rotate(60deg);
  position: absolute;
  top: 0px;
  left: -26px;
}

.share-btn-center{
  min-width: 20px;
  height: 35px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}

.share-btn-center-inner{
  font-size: 12px;
  display: block;
  width: 0px;
  padding: 2px 0 0 0;
  overflow: hidden;
  white-space: nowrap;
}

/*.share-btn,
.share-link-btn,
.share-btn-center,*/
.share-btn-center-inner{
  transition: all 0.3s ease-in-out;
}


.fa-twitter,
.fa-facebook-square{
  padding: 7px 0 0 2px;
}

.icon-line{
  padding: 7px 0 0 1px;
}


.share-btn:nth-child(1):hover .share-link-btn{
  color: #1da1f2;
  text-shadow: 0px 0px 10px #1da1f2;
}

.share-btn:nth-child(1):hover .share-btn-center{
  border-top: 1px solid #1da1f2;
  border-bottom: 1px solid #1da1f2;
}

.share-btn:nth-child(1):hover .share-btn-left1,
.share-btn:nth-child(1):hover .share-btn-right1{
  border-top: 1px solid #1da1f2;
}

.share-btn:nth-child(1):hover .share-btn-left0,
.share-btn:nth-child(1):hover .share-btn-right0{
  border-bottom: 1px solid #1da1f2;
}

.share-btn:nth-child(2):hover .share-link-btn{
  color: #3b5998;
  text-shadow: 0px 0px 10px #3b5998;
}

.share-btn:nth-child(2):hover .share-btn-center{
  border-top: 1px solid #3b5998;
  border-bottom: 1px solid #3b5998;
}

.share-btn:nth-child(2):hover .share-btn-left1,
.share-btn:nth-child(2):hover .share-btn-right1{
  border-top: 1px solid #3b5998;
}

.share-btn:nth-child(2):hover .share-btn-left0,
.share-btn:nth-child(2):hover .share-btn-right0{
  border-bottom: 1px solid #3b5998;
}

.share-btn:nth-child(3):hover .share-link-btn{
  color: #00c300;
  text-shadow: 0px 0px 10px #00c300;
}

.share-btn:nth-child(3):hover .share-btn-center{
  border-top: 1px solid #00c300;
  border-bottom: 1px solid #00c300;
}

.share-btn:nth-child(3):hover .share-btn-left1,
.share-btn:nth-child(3):hover .share-btn-right1{
  border-top: 1px solid #00c300;
}

.share-btn:nth-child(3):hover .share-btn-left0,
.share-btn:nth-child(3):hover .share-btn-right0{
  border-bottom: 1px solid #00c300;
}



.share-btn:hover .share-btn-center-inner{
  width: 80px;
}


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

#link-container

-------------------------------*/
#link-container{
  position: absolute;
  z-index: 10;
  bottom: 70px;
  left: 0px;
}



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

#credits

-------------------------------*/
#credit-btn-container{
  position: absolute;
  z-index: 10;
  bottom: 9px;
  left: 10px;
}

#credit-btn{
  font-family: 'Bank Gothic Medium';
  font-style: italic;
  width: 110px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: #fff;
  color: #000;
  position: relative;
  cursor: pointer;
	transition: all 0.2s ease;
}

#credit-btn:after{
  content: "";
  display: block;
  width: 114px;
  height: 29px;
  border: 1px solid #fff;
  box-sizing: border-box;
  position: absolute;
  z-index: -1;
  top: -2px;
  left: -2px;
  background: transparent;
}

#credit-btn:hover{
	opacity: 0.8;
}

.credit-icon{
	width: 12px;
	height: 1px;
	background: #000;
	display: inline-block;
	margin: 0 5px 6px 0;
	position: relative;
}

.credit-icon:after{
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	width: 8px;
	height: 1px;
	background: #000;
	top: 4px;
	left: 0px;
}

#credit-container{
	width: 100%;
	height: 310px;
	background: rgba(255,255,255,0.94);
	position: fixed;
	z-index: 40;
	bottom: -310px;
	left: 0px;
	right: 0px;
	text-align: center;
}

#cv{
	padding: 20px 0 0 0;
}

#billing{
	padding: 20px 0 10px 0;
}

#credit-close{
	position: absolute;
	z-index: 10;
	top: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	background: rgba(0,0,0,0.5);
	transition: all 0.3s ease;
}

#credit-close:after{
	content: "";
	display: block;
	width: 83px;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 30px;
	left: -11px;
	transform: rotate(45deg);
}

#credit-close:before{
	content: "";
	display: block;
	width: 83px;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 30px;
	left: -11px;
	transform: rotate(-45deg);
}


#credit-close:hover{
	background: rgba(0,0,0,0.8);
}

.kino-link{
  padding: 2px 8px 0 8px;
  display: inline-block;
	transition: all 0.2s ease;
}

.kino-link:hover{
	opacity: 0.8;
}


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

#trailer-container

-------------------------------*/
#trailer-container{
  position: absolute;
  z-index: 10;
  top: 30px;
  right: 0px;
}

#movie-thumb-container{
  width: 260px;
  height: 115px;
  cursor: pointer;
  position: absolute;
  top: 28px;
  left: -147px;
  border: 1px solid rgba(255,255,255,0.5);
  box-sizing: border-box;
}

#movie-thumb-container:after{
  content: "";
  display: block;
  width: calc(100% + 4px);
  height: 3px;
  position: absolute;
  top: -2px;
  left: -2px;
  background-image: linear-gradient(to right, #fff, #fff 8px, transparent 1px, transparent 2px);
  background-size: 254px 2px;
  background-position: top left;
  background-repeat: repeat-x;
}

#movie-thumb-container:before{
  content: "";
  display: block;
  width: calc(100% + 4px);
  height: 3px;
  position: absolute;
  bottom: -3px;
  left: -2px;
  background-image: linear-gradient(to right, #fff, #fff 8px, transparent 1px, transparent 2px);
  background-size: 254px 2px;
  background-position: top left;
  background-repeat: repeat-x;
}

#moive-thumb-container-inner{
  width: 254px;
  height: 109px;
  cursor: pointer;
  position: absolute;
  top: 2px;
  left: 2px;
  border: 1px solid rgba(255,255,255,1);
  box-sizing: border-box;
}

#moive-thumb-container-inner:after{
  content: "";
  display: block;
  height: calc(100% + 10px);
  width: 2px;
  position: absolute;
  top: -5px;
  left: -5px;
  background-image: linear-gradient(to bottom, #fff, #fff 8px, transparent 8px, transparent 109px,#fff 8px);
  background-size: 2px calc(100% + 13px);
  background-position: top left;
  background-repeat: repeat-y;
}

#moive-thumb-container-inner:before{
  content: "";
  display: block;
  height: calc(100% + 10px);
  width: 2px;
  position: absolute;
  top: -5px;
  right: -5px;
  background-image: linear-gradient(to bottom, #fff, #fff 8px, transparent 8px, transparent 109px,#fff 8px);
  background-size: 2px calc(100% + 13px);
  background-position: top left;
  background-repeat: repeat-y;
}

#movie-box{
  width: 252px;
  height: 107px;
  overflow: hidden;
}

#player{
  margin: -118px 0 0 0;
}

#player-overlay{
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6) url(../common/img/overlay.png) repeat;
  background-size: 2px 2px;
  opacity: 0.5;
  color: #ff0000;
}

#player-overlay:hover{
  opacity: 0.8;
}

#play-icon{
  width: 52px;
  height: 58px;
  font-size: 60px;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  display: block;
  line-height: 1em;
}




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

#about

-------------------------------*/
#aboutmovie-container{
  width: 100%;
	background: #000;
	padding: 0 0 20px 0;
}


#aboutmovie-inner{
  width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}


#aboutmovie-img{
  width: 100%;
  height: auto;
}


#about-close{
  width: calc(100% - 40px);
  height: 62px;
	text-align: center;
	border: 1px solid #fff;
	box-sizing: border-box;
	margin: 20px 20px 0px 20px;
	background: #000;
}

#about-close:hover{
	background: #ff008f;
}

#about-close a{
	display: block;
}

#about-close img{
  width: 50px;
	padding: 5px;
}