@charset "UTF-8";


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

#main{
	width:650rem;
	position:relative;
	margin:180rem auto 0;
	box-sizing:border-box;
	overflow:hidden;
}

#main ul{
	width:650rem;
	height:90rem;
	position:relative;
	display:flex;
	align-items:flex-start;
	flex-wrap:nowrap;
}

#main ul li:nth-child(1){
	width:100rem;
	margin-right:87rem;
	position:relative;
}

#main ul li:nth-child(2){
	width:90rem;
	margin-right:105rem;
	position:relative;
}

#main ul li:nth-child(3){
	width:84rem;
	margin-right:100rem;
	position:relative;
}

#main ul li:nth-child(4){
	width:84rem;
	position:relative;
}

#date{
	width:150rem;
	position:relative;
	margin:35rem auto 0;
}

/*--------------------------------------
navi
----------------------------------------*/
ul.navi{
	width:500rem;
	margin:80rem auto 0;
	display: block;
	position:relative;
}

ul.navi li{
	width:500rem;
	height:90rem;
	position:relative;
	margin-bottom:30rem;
}

ul.navi li:last-child{
	margin-bottom:0;
}

ul.navi li.btn,
ul.navi li .btn{
	display:block;
	width:500rem;
	height:90rem;
	position:relative;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	color:#fff;
	font-size:42rem;
	box-sizing:border-box;
	border:1px solid transparent;

}

ul.navi li.btn::before,
ul.navi li.btn::after,
ul.navi li .btn::before,
ul.navi li .btn::after{
	content:"";
	position:absolute;
	inset:-2px;
	border:2px solid transparent;
	pointer-events:none;
}

ul.navi li.btn::before,
ul.navi li .btn::before{
	border-image: linear-gradient(to right, #bbbbbb 0%, #676767 50%, #bbbbbb 100%) 1;
}

/*--------------------------------------
mvtkWidget
----------------------------------------*/
#mvtk{
	width: 100%;
	margin:0 auto 0;
	padding:90rem 0 0;
}

#mvtkWidget{
	position:relative;
}

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

ul.bnr_mvtk{
	width: 640rem;
	margin:50rem auto 0;
	display:flex;
	gap:20rem;
}

ul.bnr_mvtk li{
	width: 310rem;
}

#bnr ul{
	width:500rem;
	margin:60rem auto;
  justify-content: space-between;
  align-items: center;
	display: flex;
	flex-wrap: wrap;
}

#bnr ul li{
	width:500rem;
	margin-bottom:30rem;
}

#bnr2 ul{
	width:640rem;
	margin:60rem auto;
  justify-content: space-between;
  align-items: center;
	display: flex;
	flex-wrap: wrap;
}

#bnr2 ul li{
	width:640rem;
	margin-bottom:30rem;
}


/* --------------------------------------------------
poster
-------------------------------------------------- */
#poster {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
	background:rgba(255,255,255,1.0);
	overflow:hidden;
}

.poster_main{
	width:100%;
	height:100%;
	position: relative;
  justify-content: center;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.poster_main_inner{
	width:540rem;
  margin: 0 auto;
	position: relative;
}

#poster .yt-close {
  z-index: 300;
  position: absolute;
  top: -80rem;
  right: -80rem;
}


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

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

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

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-60px);
		pointer-events: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
		pointer-events: auto;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-250px);
		pointer-events: none;
  }
  to {
    opacity: 1;
    transform: translateX(0);
		pointer-events: auto;
  }
}

#main ul li,
#date,
ul.navi li,
#mvtk,
#bnr,
#bnr2,
.c-sns{
	opacity:0;
}

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

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

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

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

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

.is-loaded ul.navi li:nth-child(1){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 3.0s forwards;
}

.is-loaded ul.navi li:nth-child(2){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 3.2s forwards;
}

.is-loaded ul.navi li:nth-child(3){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 3.4s forwards;
}

.is-loaded #mvtk{
  animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 3.6s forwards;
}

.is-loaded #bnr2,
.is-loaded #bnr{
  animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 3.8s forwards;
}

.is-loaded .c-sns{
	animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 4.0s forwards;
}