@charset "UTF-8";

.mincho{
  font-family: "Noto Serif JP", serif;
}

/* --------------------------------------------------
menu
-------------------------------------------------- */
#nav_toggle {
	position: fixed;
	z-index: 7000;
	width:70rem;
	height:70rem;
	right:15rem;
	top:15rem;
	border-radius:50%;
}

#nav_toggle span {
	position: absolute;
	left: 0;
	right:0;
	margin:auto;
	width:30rem;
	height: 2px;
	background-color: #e61010;
	transition: all 0.6s;
}

#nav_toggle span:nth-of-type(1) {
  top: calc(24rem - 2px);
}

#nav_toggle span:nth-of-type(2) {
  top: calc(50% - 1px);
}

#nav_toggle span:nth-of-type(3) {
  bottom: calc(24rem - 2px);
}

.open #nav_toggle span:nth-of-type(1) {
	width:30rem;
  transform: translateY(12rem) rotate(-40deg);
}

.open #nav_toggle span:nth-of-type(2) {
  opacity: 0;
}

.open #nav_toggle span:nth-of-type(3) {
	width:30rem;
  transform: translateY(-12rem) rotate(40deg);
}

@media print{
	#sidebar{
		display: none;
	}
}

#sidebar {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 5000;
  background: rgba(0, 0, 0, 1.0);
	right:-110%;
	transition: all 0.6s;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#global-nav{
	width: 100%;
	height:100%;
	position:relative;
	transition: all 0.6s;
	z-index:10;
}

.open #sidebar{
	right: 0;
}

#global-nav ul.navi_list{
	width:100%;
	margin:0 auto 50rem;
  justify-content: start;
  align-items: start;
	display: flex;
	flex-wrap: wrap;
	padding:150rem 0 30rem;
}

#global-nav ul.navi_list li{
	width:100%;
	padding-bottom:100rem;
}

#global-nav ul.navi_list li a,
#global-nav ul.navi_list li{
	display:block;
	color:#e61010;
	font-size:40rem;
	text-align:center;
	letter-spacing:2rem;
}


/*--------------------------------------
top
----------------------------------------*/
.p-hero__box {
	width:100%;
	position:relative;
}

#main{
	width:100%;
	height:1100rem;
	position:relative;
}

#main #mainvisual{
	width:100%;
	height:1100rem;
	position:relative;
	background: url(../img/mainvisual.jpg) no-repeat center top #000;
	background-size:100% auto;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}

ul#main_copy{
	width:440rem;
	position:relative;
	margin:0 auto;
	padding-top:680rem;
	z-index:10;
}

ul#main_copy li{
	width:440rem;
	position:absolute;
	left:0;
	bottom:0;
	transform-origin: center center;
}

#main #dcs{
	width:180rem;
	position:relative;
	margin:30rem auto 0;
	z-index:10;
}

#main #logo{
	width:570rem;
	position:relative;
	margin:0 auto 0;
	z-index:10;
}

#main #date{
	width:170rem;
	position:relative;
	margin:30rem auto 0;
	z-index:10;
}

/*--------------------------------------
trailer
----------------------------------------*/
#trailer{
	width:100%;
	position:relative;
	background: url(../img/trailer_bg.jpg) no-repeat center top;
	background-size:cover;
	padding-bottom:70rem;
}

#trailer h2{
	width:270rem;
	position:relative;
	margin:0 auto;
	padding:30rem 0 20rem;
}

.movie {
  width: 660rem;
	margin:0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 10;
}

.movie__item {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.movie__item iframe {
  width: 100%;
  height: 100%;
}

.movie__nav {
  padding: 0;
  margin-top: 10rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10rem;
}

.movie__nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.8;
  width: 325rem;
  font-weight: 500;
  min-height: 50rem;
  background: #fff;
  color: #e61010;
  box-sizing: border-box;
  padding: 4rem 10rem;
  font-size: 22rem;
	font-weight:500;
  transition-duration: .3s;
  transition-property: background;
}

.movie__nav-item:hover,
.movie__nav-item.is-active {
  background: #e61010;
	color:#fff;
  cursor: pointer;
}

/*--------------------------------------
story
----------------------------------------*/
.container{
	width:670rem;
	margin:0 auto;
	position:relative;
}

#story{
	width:100%;
	position:relative;
	overflow:hidden;
	z-index:1;
}

#story .bg{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background: url(../img/story_bg.jpg) no-repeat center top #000;
	background-size:100% auto;
	z-index:1;
}

ul#story_catch{
	width:70rem;
	position:absolute;
	right:0;
	top:0;
	z-index:10;
}

ul#story_catch li{
	width:70rem;
	position:absolute;
	left:0;
	top:0;
}


ul#story_lead{
	width:270rem;
	height:660rem;
	position:relative;
	margin:0 auto;
	z-index:10;
}

ul#story_lead li{
	width:270rem;
	height:480rem;
	position:absolute;
	left:0;
	bottom:0;
	transform-origin: center top;
}

#story .container h2{
	width:190rem;
	position:relative;
	padding-top:120rem;
	z-index:10;
}

#story .container p{
	position:relative;
	font-size:30rem;
	color:#fff;
	line-height:2.0;
	letter-spacing:2rem;
	padding-top:10rem;
	z-index:10;
}


/*--------------------------------------
cast
----------------------------------------*/
#cast{
	width:100%;
	position:relative;
	overflow:hidden;
	z-index:1;
}

#cast .container{
	margin:0 auto;
	position:relative;
	z-index:10;
}

#cast .bg{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:80rem;
	background: url(../img/cast_bg.jpg) no-repeat left top #000;
	background-size:100% auto;
	z-index:1;
}

#cast_catch{
	width:750rem;
	position:relative;
	padding-top:80rem;
	z-index:10;
}

#cast h2{
	width:370rem;
	position:relative;
	padding-top:540rem;
}

#cast p{
	font-size:30rem;
	font-weight:600;
	color:#fff;
	line-height:1.8;
	padding-top:20rem;
}

#cast p span{
	font-size:32rem;
	font-weight:800;
	display:inline-block;
	line-height:1.7;
}

#waku{
	width:100%;
	position:relative;
	padding:50rem 0;
}

#waku #waku_inner{
	width:100%;
	margin:0 auto 0;
	position:relative;
	border:2px solid #740303;
	background-color: rgba(34,1,1,0.4);
	padding:20rem 40rem;
}

#waku h3{
	font-size:28rem;
	color:#faeb03;
	text-align:center;
	font-weight:700;
	line-height:1.4;
	letter-spacing:2rem;
	padding:10rem 0 6rem;
	background: linear-gradient(to right, transparent 0%, #be0a0a 30%, #be0a0a 50%, #be0a0a 70%, transparent 100%);
}

#waku p{
	font-size:24rem;
	line-height:1.8;
	padding-top:30rem;
	font-weight:500;
}

#waku a{
	display:block;
	width:340rem;
	height:70rem;
	font-size:30rem;
	line-height:70rem;
	font-weight:600;
	color:#fff;
	letter-spacing:1rem;
	margin:30rem auto 0;
	background-color:#be0a0a;
	text-align:center;
	position:relative;
}

#waku a:after{
	display:block;
	position:absolute;
	right:30rem;
	top:20rem;
	content:"";
	width:30rem;
	height:30rem;
	background: url(../../../assets/img/sns/ico_instagram.svg) no-repeat center center;
	background-size:cover;
}




/* --------------------------------------------------
footer
-------------------------------------------------- */
.l-footer {
	width:100%;
  display: flex;
  align-items: center;
	position:relative;
}

.l-footer__copyright {
	width:100%;
  text-align: center;
  font-size: 14rem;
  line-height: 1;
	color:#706c67;
}

.l-footer__copyright ul.footer_link{
	position:relative;
  justify-content: center;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
  gap: 15rem;
	font-size:16rem;
	font-weight:500;
	margin-top:80rem;
	color:#706c67;
}

.l-footer__copyright ul.footer_link li:nth-child(2){
	width:96rem;
}


.l-footer__copyright .copyright{
	padding:30rem 0 30rem;
	font-size:16rem;
	color:#706c67;
}


/* --------------------------------------------------
animation
-------------------------------------------------- */
@keyframes blur {
  0% {
	  opacity: 0;
    filter: blur(40rem);
  }
  100% {
	  opacity: 1;
    filter: blur(0);
  }
}

@keyframes zoomOut {
  from {
    transform:scale(1.4);
  }
  to {
    transform:scale(1.0);
  }
}

@keyframes zoomOut2 {
  from {
	  opacity: 0;
    transform:scale(1.4);
  }
  to {
	  opacity: 1;
    transform:scale(1.0);
  }
}

@keyframes main_blur {
  0% {
	  opacity: 0;
    filter: blur(80rem);
  }
  100% {
	  opacity: 1;
    filter: blur(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scaleY {
  0% {
    opacity: 0;
		transform: scale(1, 1.3);
  }
  100% {
    opacity: 1;
		transform: scale(1, 1);
  }
}



#main #mainvisual,
#main ul#main_copy li,
#main #dcs,
#main #logo,
#main #date{
	opacity:0;
}

.is-loaded #main #mainvisual{
  animation: main_blur 3.0s cubic-bezier(.17,.67,.3,.92) 1.8s forwards;
}

.is-loaded ul#main_copy li:nth-child(1){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 1.0s forwards;
}

.is-loaded ul#main_copy li:nth-child(1) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 1.0s forwards;
}

.is-loaded ul#main_copy li:nth-child(2){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 1.2s forwards;
}

.is-loaded ul#main_copy li:nth-child(2) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 1.2s forwards;
}

.is-loaded ul#main_copy li:nth-child(3){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 1.4s forwards;
}

.is-loaded ul#main_copy li:nth-child(3) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 1.4s forwards;
}

.is-loaded ul#main_copy li:nth-child(4){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 1.6s forwards;
}

.is-loaded ul#main_copy li:nth-child(4) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 1.6s forwards;
}

.is-loaded ul#main_copy li:nth-child(5){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 1.8s forwards;
}

.is-loaded ul#main_copy li:nth-child(5) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 1.8s forwards;
}

.is-loaded ul#main_copy li:nth-child(6){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 2.0s forwards;
}

.is-loaded ul#main_copy li:nth-child(6) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 2.0s forwards;
}

.is-loaded ul#main_copy li:nth-child(7){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 2.2s forwards;
}

.is-loaded ul#main_copy li:nth-child(7) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 2.2s forwards;
}

.is-loaded ul#main_copy li:nth-child(8){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 2.4s forwards;
}

.is-loaded ul#main_copy li:nth-child(8) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 2.4s forwards;
}

.is-loaded ul#main_copy li:nth-child(9){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 2.6s forwards;
}

.is-loaded ul#main_copy li:nth-child(9) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 2.6s forwards;
}

.is-loaded ul#main_copy li:nth-child(10){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 2.8s forwards;
}

.is-loaded ul#main_copy li:nth-child(10) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 2.8s forwards;
}

.is-loaded ul#main_copy li:nth-child(11){
  animation: blur 0.8s cubic-bezier(.17,.67,.3,.92) 3.0s forwards;
}

.is-loaded ul#main_copy li:nth-child(11) img{
  animation: zoomOut 1.2s cubic-bezier(.17,.67,.3,.92) 3.0s forwards;
}

.is-loaded #main #dcs{
  animation: blur 1.2s cubic-bezier(.17,.67,.3,.92) 2.0s forwards;
}

.is-loaded #main #logo{
  animation: blur 1.2s cubic-bezier(.17,.67,.3,.92) 2.4s forwards;
}

.is-loaded #main #date{
  animation: blur 1.2s cubic-bezier(.17,.67,.3,.92) 2.6s forwards;
}

#trailer h2,
#trailer .movie{
	opacity:0;
}

#trailer.is_loaded h2{
  animation: blur 1.0s cubic-bezier(.17,.67,.3,.92) 0.6s forwards;
}

#trailer.is_loaded .movie{
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 1.0s forwards;
}

#story .bg,
#story ul#story_catch li,
#story h2,
#story p,
#story ul#story_lead li{
	opacity:0;
}

#story.is_loaded .bg{
  animation: fadeIn 2.0s cubic-bezier(.17,.67,.3,.92) 0.6s forwards;
}

#story.is_loaded  ul#story_catch li:nth-child(1){
  animation: blur 1.2s cubic-bezier(.17,.67,.3,.92) 1.0s forwards;
}

#story.is_loaded  ul#story_catch li:nth-child(2){
  animation: blur 1.2s cubic-bezier(.17,.67,.3,.92) 1.4s forwards;
}

#story.is_loaded  ul#story_catch li:nth-child(3){
  animation: blur 1.2s cubic-bezier(.17,.67,.3,.92) 1.8s forwards;
}

#story.is_loaded  ul#story_lead li:nth-child(1){
  animation: scaleY 2.0s cubic-bezier(.17,.67,.3,.92) 1.8s forwards;
}

#story.is_loaded  ul#story_lead li:nth-child(2){
  animation: scaleY 2.0s cubic-bezier(.17,.67,.3,.92) 2.4s forwards;
}

#story.is_loaded  ul#story_lead li:nth-child(3){
  animation: scaleY 2.0s cubic-bezier(.17,.67,.3,.92) 3.0s forwards;
}

#story.is_loaded h2{
  animation: blur 1.4s cubic-bezier(.17,.67,.3,.92) 2.6s forwards;
}

#story.is_loaded p{
  animation: fadeInUp 1.4s cubic-bezier(.17,.67,.3,.92) 3.2s forwards;
}

#cast .bg,
#cast #cast_catch,
#cast h2,
#cast p,
#cast #waku{
	opacity:0;
}

#cast.is_loaded .bg{
  animation: fadeIn 2.0s cubic-bezier(.17,.67,.3,.92) 0.6s forwards;
}

#cast.is_loaded  #cast_catch{
  animation: blur 1.2s cubic-bezier(.17,.67,.3,.92) 1.0s forwards;
}

#cast.is_loaded h2{
  animation: blur 1.4s cubic-bezier(.17,.67,.3,.92) 1.4s forwards;
}

#cast.is_loaded p{
  animation: fadeInUp 1.4s cubic-bezier(.17,.67,.3,.92) 2.0s forwards;
}

#cast.is_loaded #waku{
  animation: fadeInUp 1.4s cubic-bezier(.17,.67,.3,.92) 2.6s forwards;
}