@charset "UTF-8";


#trailer_block{
	width:100%;
  min-width: 1200px;
	position:relative;
	background-color:#0f0f0f;
}

.p-trailer {
  width: 100%;
	padding:40px 0 30px;
	overflow:hidden;
}

#trailer_block h2{
  position: relative;
  width: 370px;
	margin:0 auto;
	padding:100px 0 20px;
}

/* --------------------------------------------------
slick
-------------------------------------------------- */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* --------------------------------------------------
slick
-------------------------------------------------- */
.slick-slider {
  opacity: 0;
}

.slick-slider.slick-initialized {
  opacity: 1;
}

.slick-list {
  min-height: 216rem;
}

.slick-arrow {
  position: absolute;
  display: block;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  padding: 0;
  border: none;
  outline: none;
  background: center center / contain no-repeat;
  top: 0;
  bottom: 0;
  margin: auto 0;
  transition: opacity 0.5s;
}

.slick-arrow:hover {
  outline: none;
  opacity: 0.5;
}

.slick-arrow.slick-disabled {
  opacity: 0;
}

.slick-arrow::before {
  content: '';
}

.slick-arrow {
  z-index: 2;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.c-carouselTrailer__slider .slick-arrow {
  top: 0;
  bottom: 0;
  margin-block: auto;
  width: 53rem;
  height: 53rem;
}

.c-carouselTrailer__slider[data-size="large"] .slick-arrow {
  width: 50rem;
  height: 50rem;
}

.c-carouselTrailer__slider[data-size="small"] .slick-arrow {
  width: 32rem;
  height: 32rem;
}

.c-carouselTrailer__slider .slick-prev {
  left: calc( (420 / 1920 * 100%) - 25rem);
  background-image: url("../img/arw_prev.png");
}

.c-carouselTrailer__slider[data-size="large"] .slick-prev {
  left: calc( (420 / 1920 * 100%) - 25rem);
}

.c-carouselTrailer__slider[data-size="small"] .slick-prev {
  left: 390rem;
}

.c-carouselTrailer__slider .slick-next {
  right: calc( (420 / 1920 * 100%) - 25rem);
  background-image: url("../img/arw_next.png");
}

.c-carouselTrailer__slider[data-size="large"] .slick-next {
  right: calc( (420 / 1920 * 100%) - 25rem);
}

.c-carouselTrailer__slider[data-size="small"] .slick-next {
  right: 390rem;
}

.slick-slider.slick-dotted {
  margin-bottom: 32rem;
}

.slick-dots {
  position: absolute;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%;
  font-size: 0;
  line-height: 0;
  margin-top: 30rem;
}

[data-size="large"] .slick-dots {
  margin-top: 30rem;
}

[data-size="small"] .slick-dots {
  margin-top: 20rem;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  aspect-ratio: 1;
  margin-inline: 5rem;
  padding: 0;
  cursor: pointer;
  width: 10rem;
}

[data-size="large"] .slick-dots li {
  width: 10rem;
}

[data-size="small"] .slick-dots li {
  width: 12rem;
}

.slick-dots li button {
  border: 0;
  background: #4a4a4a;
  display: block;
  height: 100%;
  width: 100%;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.3s;
}

.slick-dots li.slick-active button {
  background: #dbb20d;
}

.slick-dots li button:hover, .slick-dots li button:focus {
  background: #dbb20d;
}

/* --------------------------------------------------
p-topNav
-------------------------------------------------- */
.p-topNav {
  position: absolute;
  top: 0;
  right: 0;
	left:0;
	margin:auto;
	width:100%;
	height:60px;
  display: flex;
  justify-content: center;
  align-items: center;
	background-color:#000;
	z-index:100;
}

.p-topNav__list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20rem;
}
/*
.p-topNav__item {
  width: 200rem;
  height: 50rem;
}
*/
.p-topNav__btn {
  width: 100%;
  height: 100%;
  display: block;
  font-size: 16rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
	transition: 0.4s ;
	color:#e62e8b;
}


/* --------------------------------------------------
p-top
-------------------------------------------------- */
.p-top {
  position: relative;
	z-index:10;
}

.p-top__hero {
  position: relative;
  width: 100%;
  min-width: 1200px;
	display: flex;
}

#main_left,
#main_right{
	width:50%;
	position:relative;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
}

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

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

#main_right #catch {
  width: 540rem;
  position: relative;
	margin:50rem auto 0;
	clip-path: inset(0 100% 0 0);
}

#main_right h1 {
  width: 640rem;
	height:280rem;
  position: relative;
	margin:50rem auto 0;
}

#main_right h1 ul{
  width: 640rem;
	height:280rem;
  position: absolute;
	left:0;
	top:0;
	z-index:10;
}

#main_right h1 ul li:nth-child(1){
  width: 50%;
  position: absolute;
	left:0;
	top:0;
	z-index:1;
}

#main_right h1 ul li:nth-child(2){
  width: 50%;
  position: absolute;
	right:0;
	top:0;
	z-index:1;
}

#main_right h1 ul li:nth-child(3){
  width: 100%;
  position: absolute;
	left:0;
	bottom:0;
	z-index:0;
}

#main_right h2 {
  width: 160rem;
  position: relative;
	margin:0 auto;
}

#main_right #name {
  width: 540rem;
  position: relative;
	margin:40rem auto 0;
}

#main_right #credit {
  width: 480rem;
  position: absolute;
	left: 50%;
  top: 785rem;
  transform: translateX(-50%);
}

#main_right ul.sub_navi {
  display: inline-flex;
  gap: 20rem;
  position: absolute;
	left: 50%;
  top: 840rem;
  transform: translateX(-50%);
}

#main_right ul.sub_navi li a,
#main_right ul.sub_navi li span{
	width:180rem;
	padding:10rem 0 11rem;
	font-size:17rem;
	color:#fff;
	font-weight:500;
	line-height: 1;
	border:1rem solid #fff;
	border-radius:20rem;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
}

ul.global_navi {
	width:580rem;
  display: flex;
  gap: 15rem;
  position: absolute;
	right: 110rem;;
  top: 25rem;
	z-index:100;
}

ul.global_navi li a,
ul.global_navi li span{
	display: block;
	height:20rem;
}

ul.global_navi li:nth-child(1) a,
ul.global_navi li:nth-child(1) span{
	width:42rem;
}

ul.global_navi li:nth-child(2) a,
ul.global_navi li:nth-child(2) span{
	width:63rem;
}

ul.global_navi li:nth-child(3) a,
ul.global_navi li:nth-child(3) span{
	width:112rem;
}

ul.global_navi li:nth-child(4) a,
ul.global_navi li:nth-child(4) span{
	width:50rem;
}

ul.global_navi li:nth-child(5) a,
ul.global_navi li:nth-child(5) span{
	width:41rem;
}

ul.global_navi li:nth-child(6) a,
ul.global_navi li:nth-child(6) span{
	width:46.5rem;
}

ul.global_navi li:nth-child(7) a,
ul.global_navi li:nth-child(7) span{
	width:50rem;
}

ul.global_navi li:nth-child(8) a,
ul.global_navi li:nth-child(8) span{
	width:67rem;
}

ul.sns {
	width:60rem;
	display:flex;
  gap: 15rem;
  position: absolute;
  top: 25rem;
	right:30rem;
	z-index:100;
}

ul.sns li{
  width:20rem;
}

ul.sns li a{
	display:block;
}

/*--------------------------------------
mvtkWidget
----------------------------------------*/
#mvtk{
	width:100%;
	min-width: 1200rem;
	margin:0 auto 0;
	padding:60rem 0 80rem;
}

#mvtk ul{
	width:620rem;
	margin:0 auto 30rem;
	display: flex;
  justify-content: space-between;
  align-items: start;
	flex-wrap: wrap;
}

#mvtk ul li{
	width:300rem;
}

#mvtkWidget{
	position:relative;
}

#mvtk-widgets-container{
	margin:0 auto;
}

/* --------------------------------------------------
Utility
-------------------------------------------------- */
.u-fontAdjust {
  font-feature-settings: "palt" 1;
}

.u-fontAdjust-none {
  font-feature-settings: normal;
}

.u-font-Noto-Sans-JP {
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
}

.u-hover {
  transition: opacity .3s;
}

.u-hover:hover {
  opacity: .5;
  cursor: pointer;
}

.shuei{
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-weight: 600;
	font-style: normal;
}

/*--------------------------------------
introduction
----------------------------------------*/
#introduction{
  position: relative;
  width: 100%;
  min-width: 1200px;
	padding:0 0 20rem;
	background: url(../img/intro_bg.jpg) no-repeat center top #0f0f0f;
	background-size: 100% auto;
}

@media screen and (max-width: 2000px) {
	#introduction{
	  position: relative;
	  width: 100%;
	  min-width: 1200px;
		padding:0 0 20rem;
		background: url(../img/intro_bg.jpg) no-repeat center 80rem #0f0f0f;
		background-size: 100% auto;
	}
}

#intro_catch{
	width: 902px;
	height:170px;
	margin:0 auto;
	position:relative;
}

#intro_catch #intro_catch1,
#intro_catch #intro_catch2{
	width:100%;
	position:absolute;
	left:0;
	top:0;
}

.blur {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: auto;
  height: 100%;
}

.blur2 {
  position: absolute;
  top: 0;
  right: 50%;
  -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
          transform: translateX(50%);
  width: auto;
  height: 100%;
}

.blur img,
.blur2 img {
  width: auto !important;
  height: 100% !important;
  position: relative;
  z-index: -1;
}


.base img,
.blur img,
.blur2 img{
	opacity:0;
}

.addAni #intro_catch1 .base img{
	animation: speed__base .2s cubic-bezier(0.19, 1, 0.22, 1) 0.8s forwards;
}

.addAni #intro_catch1 .blur img {
	animation: speed__blur .3s cubic-bezier(0.19, 1, 0.22, 1) 0.8s forwards;
}

.addAni #intro_catch2 .base img{
	animation: speed__base .2s cubic-bezier(0.19, 1, 0.22, 1) 1.0s forwards;
}

.addAni #intro_catch2 .blur2 img {
	animation: speed__blur2 .3s cubic-bezier(0.19, 1, 0.22, 1) 1.0s forwards;
}

@keyframes speed__base {
  0% {
		transform: translateX(-50%);
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
		transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes speed__blur {
  0% {
		transform: translateX(-50%);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
		transform: translateX(50%);
    opacity: 0;
  }
}

@keyframes speed__blur2 {
  0% {
		transform: translateX(50%);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
		transform: translateX(-50%);
    opacity: 0;
  }
}

#introduction h2{
  position: relative;
  width: 520px;
	margin:80px auto 50px;
}

.container{
	width:900px;
	margin:0 auto;
  position: relative;
}

#introduction p{
	padding:30px 0 40px;
	letter-spacing:1px;
	font-size:16px;
	line-height:2.2;
}

#introduction span{
	display:inline-block;
	background-color:#fff;
	font-size:36px;
	font-weight:900;
	color:#000;
	line-height:36px;
	padding:4px 2px 6px;
	margin-bottom:15px;
}

/*--------------------------------------
story
----------------------------------------*/
#story{
  position: relative;
  width: 100%;
  min-width: 1200px;
	padding:60rem 0 40rem;
}

#story h2{
  position: relative;
  width: 340px;
	margin:0 auto 40px;
}

.container{
	width:900px;
	margin:0 auto;
  position: relative;
}

#story p{
	padding:20px 0 40px;
	letter-spacing:2px;
	font-size:16px;
	line-height:2.2;
}

/*--------------------------------------
cast
----------------------------------------*/
#cast{
  position: relative;
  width: 100%;
  min-width: 1200px;
	background: url(../img/cast_bg.jpg) no-repeat center top #000;
	background-size: 100% auto;
}

#cast .container{
	width:100%;
  min-width: 900px;
	max-width:1380px;
}

#cast h2{
  position: relative;
  width: 290px;
	margin:90px auto 80px;
}

#cast ul.cast_list1{
	width: 900px;
	position:relative;
	margin:0 auto;
	display: flex;
  justify-content: space-between;
  align-items: stretch;
	flex-wrap: wrap;
}

#cast ul.cast_list1 li{
	width:438px;
	position:relative;
	margin-bottom:60px;
	text-align:center;
}

#cast ul.cast_list1 li .cast_img{
	width:438px;
	position:relative;
	overflow:hidden;
}

#cast ul.cast_list1 li .cast_img img{
	width:100%;
	transition: 0.4s ;
	transform: scale(1.0);
}

#cast ul.cast_list1 li p{
	font-size:36px;
	font-weight:800;
	line-height:1.0;
	letter-spacing:4px;
	text-align:center;
	margin-top:25px;
}

#cast ul.cast_list1 li span.sub{
	display:inline;
	font-size:22px;
	font-weight:800;
}

#cast ul.cast_list1 li span{
	font-size:18px;
	font-weight:600;
	letter-spacing:2px;
}

#cast ul.cast_list2{
	width:1380px;
	position:relative;
	margin:0 auto;
	display: flex;
  justify-content: center;
  align-items: stretch;
	flex-wrap: wrap;
}

#cast ul.cast_list2 li{
	width:325px;
	position:relative;
	margin:0 26px 60px 0;
	text-align:center;
}

#cast ul.cast_list2 li:nth-child(4n){
	margin-right:0;
}

#cast ul.cast_list2 li .cast_img{
	width:325px;
	position:relative;
	overflow:hidden;
}

#cast ul.cast_list2 li .cast_img img{
	width:100%;
	transition: 0.4s ;
	transform: scale(1.0);
}

#cast ul.cast_list2 li p{
	font-size:28px;
	font-weight:800;
	line-height:1.0;
	letter-spacing:3px;
	text-align:center;
	margin-top:25px;
}

#cast ul.cast_list2 li span{
	font-size:16px;
	font-weight:600;
	letter-spacing:2px;
}

@media screen and (max-width: 1370px) {
	#cast ul.cast_list2{
		width:1028px;
	}

	#cast ul.cast_list2 li:nth-child(4n){
		margin:0 26px 60px 0;
	}

	#cast ul.cast_list2 li:nth-child(3n){
		margin-right:0;
	}
}

#cast ul.cast_list1 li .cast_btn,
#cast ul.cast_list2 li .cast_btn{
	width:180px;
	height:40px;
	color:#d3ad15;
	font-size:14px;
	font-weight:600;
	border:1px solid #d3ad15;
	border-radius:20px;
	display: flex;
  justify-content: center;
  align-items: center;
	margin:30px auto 0;
	transition: 0.4s ;
}

#cast ul.cast_list1 li:hover,
#cast ul.cast_list2 li:hover{
	cursor:pointer;
}

#cast ul.cast_list1 li:hover .cast_img img,
#cast ul.cast_list2 li:hover .cast_img img{
	transform: scale(1.1);
}

#cast ul.cast_list1 li:hover .cast_btn,
#cast ul.cast_list2 li:hover .cast_btn{
	color:#000;
	background-color:#d3ad15;
}

#cast01, #cast02, #cast03, #cast04, #cast05, #cast06, #cast07, #cast08, #cast09, #cast010, #cast011, #cast012,#staff01,#staff02,#music01{
	width: 100%;
	min-width: 1200px;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background:rgba(0,0,0,1.0);
	overflow-y: auto;
	display: none; 
	justify-content: center !important;
	align-items: center !important;
}

#cast01.is-show, 
#cast02.is-show, 
#cast03.is-show, 
#cast04.is-show, 
#cast05.is-show, 
#cast06.is-show, 
#cast07.is-show, 
#cast08.is-show, 
#cast09.is-show, 
#cast010.is-show, 
#cast011.is-show, 
#cast012.is-show, 
#staff01.is-show, 
#staff02.is-show, 
#music01.is-show {
	display: flex !important;
}

.main{
	width:100%;
	max-width:1200px;
	height: auto;
	position: relative;
	margin: auto;
	padding-top:70px;
}

.staff .main,
.music .main{
	width:600px;
	max-width:600px;
	height: auto;
	position: relative;
	margin: auto;
}

.main ul{
	width:100%;
	display: flex;
  justify-content: space-between;
  align-items: start;
	flex-wrap: wrap;
	gap:20px;
}

.main ul li{
	width:590px;
}

.main ul li h2{
	font-size:40px;
	font-weight:800;
	line-height:1.0;
	border-bottom:1px solid #fff;
	margin-bottom:20px;
	padding-bottom:20px;
	letter-spacing:4px;
}

.main ul li h2 span{
	font-size:20px;
	font-weight:600;
}

.main ul li h2 span.sub{
	font-size:26px;
	font-weight:800;
}

.main ul li h3{
	font-size:16px;
	margin-bottom:50px;
}

.comment_field{
	position:relative;
}

.main ul li h4{
	font-size:16px;
	color:#d3ad15;
	font-weight:500;
	margin-bottom:15px;
}

.main ul li h4.spacer{
	padding-top:20px;
}

.comment_field p{
	font-size:14px;
	line-height:1.8;
	margin-bottom:40px;
}

.comment_field span{
	display:block;
	font-size:12px;
	line-height:2.0;
}

.btn_close{
	width:36px;
	position:absolute;
	right:-50px;
	top:50px;
	cursor: pointer;
	transition: 0.4s ;
}

.btn_close:hover{
	opacity:0.6;
}

/*--------------------------------------
keep_out
----------------------------------------*/
.tape{
  position: relative;
  width: 100%;
  min-width: 1200px;
	height:250px;
}

.keep_out {
	background: url(../img/tape.png) repeat-x;
	background-size: auto 100%;
	width: 120%;
	height: 65px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-4.0deg);
	animation: photoscroll 24s linear infinite;
	pointer-events: none;
	z-index: 100;
}

@keyframes photoscroll {
 0% {background-position: 0 0;}
 100% { background-position: -1584.05px 0; }
}


/*--------------------------------------
staff
----------------------------------------*/
#staff{
  position: relative;
  width: 100%;
  min-width: 1200px;
	padding-top:40px;
}

#staff h2{
  position: relative;
  width: 320px;
	margin:0 auto 50px;
}

#staff ul.staff_list{
	width:680px;
	position:relative;
	margin:0 auto;
	display: flex;
  justify-content: space-between;
  align-items: stretch;
	flex-wrap: wrap;
	gap:0 240px;
}

#staff ul.staff_list li{
	width:220px;
	position:relative;
	margin-bottom:60px;
	text-align:center;
}

#staff ul.staff_list li .staff_btn{
	width:180px;
	height:40px;
	color:#d3ad15;
	font-size:14px;
	font-weight:600;
	border:1px solid #d3ad15;
	border-radius:20px;
	display: flex;
  justify-content: center;
  align-items: center;
	margin:30px auto 0;
	transition: 0.4s ;
}

#staff ul.staff_list li:hover .staff_btn{
	color:#000;
	background-color:#d3ad15;
}

#staff ul.staff_list li:nth-child(1):hover,
#staff ul.staff_list li:nth-child(2):hover{
	cursor:pointer;
}

#staff ul li span{
	display:block;
	font-size:16px;
	font-weight:600;
	margin-bottom:20px;
	letter-spacing:2px;
}

#staff ul li h3{
	font-size:36px;
	font-weight:900;
	line-height:1.0;
	letter-spacing:4px;
}

/*--------------------------------------
music
----------------------------------------*/
#music{
  position: relative;
  width: 100%;
  min-width: 1200px;
	padding-top:40px;
}

#music h2{
  position: relative;
  width: 330px;
	margin:0 auto 50px;
}

#music ul{
	width:1200px;
	position:relative;
	margin:0 auto;
	display: flex;
  justify-content: space-between;
  align-items: center;
	flex-wrap: wrap;
}

#music ul li:nth-child(1){
	width:615px;
	height:430px;
	position:relative;
	overflow:hidden;
}

#music ul li:nth-child(2){
	width:535px;
	display: flex;
  justify-content: start;
  align-items: start;
	flex-wrap: wrap;
}

#music ul li:nth-child(2) p{
	font-size:20px;
	line-height:1.4;
	margin-bottom:15px;
}

#music ul li:nth-child(2) h3{
	font-size:28px;
	font-weight:900;
	line-height:1.4;
}

#music ul li:nth-child(2) h4{
	font-size:36px;
	font-weight:900;
	line-height:1.4;
}

#music ul li:nth-child(2) h4 span{
	font-size:12px;
	font-weight:500;
	line-height:1.4;
}

#music ul li:nth-child(2) .music_btn{
	width:180px;
	height:40px;
	color:#d3ad15;
	font-size:14px;
	font-weight:600;
	border:1px solid #d3ad15;
	border-radius:20px;
	display: flex;
  justify-content: center;
  align-items: center;
	margin-top:30px;
	transition: 0.4s ;
}

#music ul li:nth-child(2):hover .music_btn{
	color:#000;
	background-color:#d3ad15;
	cursor:pointer;
}

#copyright{
  position: relative;
  width: 1200px;
	padding:200px 0 100px;
	margin:0 auto;
}

/*--------------------------------------
gototop
----------------------------------------*/
#gototop,
#gototop p{
	width:50rem;
	height:50rem;
}

#gototop{
	position:fixed;
	z-index:1000;
	right:0;
	bottom:70rem;
}

#gototop a{
	display:block;
}

#gototop p{
	position:absolute;
	right:-150rem;
	top:0;
	transition:0.6s;
}

#gototop p:hover{
	opacity:0.6;
	cursor:pointer;
}

#gototop.open p{
	right:20rem;
}


/* --------------------------------------------------
animation
-------------------------------------------------- */

.c-loader {
  opacity: 1;
}

.is-loaded .c-loader {
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s 1s;
}

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

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

@keyframes  scale_img {
	0% {
		opacity:0;
		transform: scale(1.4);
	}
	100% {
		opacity:1;
		transform: scale(1);
	}
}

@keyframes  scale_img2 {
	0% {
		opacity:0;
		transform: scale(0.6);
	}
	100% {
		opacity:1;
		transform: scale(1);
	}
}

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

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

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-60rem);
    transform: translateY(-60rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes maskIn {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(-10px);
  }
}

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

#main_right h1 ul li,
#main_right h2,
#main_right #name,
#main_right #credit,
#main_right ul.sub_navi li,
ul.sns,
ul.global_navi,
#mvtk{
	opacity:0;
}

#mainvisual img{
	transform: scale(1.4);
	opacity:0;
}

.is-loaded #mainvisual img{
  animation: scale_img 3.0s cubic-bezier(0.19, 1, 0.22, 1) 1.0s forwards;
}

.is-loaded #main_right #catch{
  animation: maskIn 1.2s cubic-bezier(.82,.13,.23,.95) 2.4s forwards;
}

.is-loaded #main_right h1 ul li:nth-child(1){
  animation: scale_img 0.4s cubic-bezier(0.19, 1, 0.22, 1) 2.0s forwards;
}

.is-loaded #main_right h1 ul li:nth-child(2){
  animation: scale_img 0.4s cubic-bezier(0.19, 1, 0.22, 1) 2.1s forwards;
}

.is-loaded #main_right h1 ul li:nth-child(3){
  animation: scale_img 0.4s cubic-bezier(0.19, 1, 0.22, 1) 2.2s forwards;
}

.is-loaded #main_right h2{
  animation: fadeInUp 1.6s cubic-bezier(0.19, 1, 0.22, 1) 3.2s forwards;
}

.is-loaded #main_right #name{
  animation: fadeInUp 1.6s cubic-bezier(0.19, 1, 0.22, 1) 3.4s forwards;
}

.is-loaded ul.global_navi{
  animation: fadeInDown 1.6s cubic-bezier(0.19, 1, 0.22, 1) 3.6s forwards;
}

.is-loaded ul.sns{
  animation: fadeInDown 1.6s cubic-bezier(0.19, 1, 0.22, 1) 3.8s forwards;
}

.is-loaded #mvtk{
  animation: fadeInUp 1.6s cubic-bezier(0.19, 1, 0.22, 1) 4.2s forwards;
}