@charset "UTF-8";

/* --------------------------------------------------
layout
-------------------------------------------------- */
.l-wrap {
  position: relative;
  width: 100%;
  min-width: 1200rem;
  height: 100vh;
  overflow: hidden;
  display: flex;
  /*flex-direction: column;*/
  justify-content: center;
  align-items: center;
	z-index:100;
	min-height:800rem;
}

.l-wrap > * {
  width: 100%;
}

.l-cont {
	width:100%;
  min-width: 1200rem;
  margin: 0 auto;
	position:relative;
}

/* --------------------------------------------------
p-hero
-------------------------------------------------- */
.p-hero {
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-hero__box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#main{
	width:1100rem;
	min-width:900px;
	height:450rem;
	margin:0 auto;
	position:relative;
}

#main ul.logo{
	width:1100rem;
	height:160rem;
	position:relative;
	margin:0 auto;
	display:flex;
	align-items:flex-start;
	flex-wrap:nowrap;
}

#main ul.logo li:nth-child(1){
	width:176rem;
	margin-right:144rem;
	position:relative;
}

#main ul.logo li:nth-child(2){
	width:153rem;
	margin-right:170rem;
	position:relative;
}

#main ul.logo li:nth-child(3){
	width:146rem;
	margin-right:157rem;
	position:relative;
}

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

#date{
	width:260rem;
	position:relative;
	margin:50rem auto 0;
}

/*--------------------------------------
mvtkWidget
----------------------------------------*/
#mvtk{
	width: 900px;
	margin:0 auto 0;
	padding:60rem 0 0;
}

#mvtkWidget{
	position:relative;
}

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

/*--------------------------------------
navi
----------------------------------------*/
ul.navi{
	width:920rem;
	margin:90rem auto 0;
	display: flex;
  justify-content: space-between;
  align-items: center;
	flex-wrap: wrap;
	position:relative;
}


ul.navi li{
	width:290rem;
	height:60rem;
	position:relative;
}

ul.navi li.btn,
ul.navi li .btn{
	display:block;
	width:290rem;
	height:60rem;
	position:relative;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	color:#fff;
	font-size:28rem;
	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:-1px;
	border:1px 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;
}

ul.navi li.btn::after,
ul.navi li .btn::after{
	border-image: linear-gradient(to right, #676767 0%, #bbbbbb 50%, #676767 100%) 1;
	opacity:0;
	transition:opacity 0.5s ease;
}

ul.navi li.btn:hover::after,
ul.navi li .btn:hover::after{
	opacity:1;
}

ul.navi li .btn:hover,
ul.navi li.btn:hover{
	cursor:pointer;
	color:#9a9a9a;
}



/* --------------------------------------------------
p-top
-------------------------------------------------- */
.p-top {
  position: relative;
  width: 100%;
	height:450rem;
}

.p-top__hero {
  position: relative;
  width: 100%;
	height:450rem;
}

/* --------------------------------------------------
bnr
-------------------------------------------------- */
#bnr{
	width:186rem;
	position:absolute;
	left:20rem;
	bottom:60rem;
}

#bnr ul{
	width:100%;
	display: flex;
  justify-content: start;
  align-items: start;
	flex-wrap: wrap;
  position: relative;
}

#bnr ul li{
	width:100%;
  position: relative;
	margin-bottom:15rem;
}

#bnr ul li:last-child{
	margin-bottom:0;
}

/* --------------------------------------------------
footer
-------------------------------------------------- */
.l-footer {
  position: absolute;
  left: 0;
  bottom: 10rem;
  width: 100%;
  min-width: 1200rem;
	height:22rem;
  justify-content: start;
  align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.l-footer__copyright {
	width:100%;
	color:#fff;
  position: relative;
}

.l-footer__copyright p{
	text-align:left;
  font-size: 12rem;
  line-height: 1;
	font-weight:400;
	padding-left:10rem;
	color:#7b7b7b;
}

.l-footer__copyright ul{
	height:22rem;
  position: absolute;
  right: 20rem;
  bottom: 0;
	display: flex;
	gap:20rem;
}

.l-footer__copyright ul li:nth-child(1) a{
  font-size: 12rem;
  line-height: 1;
	font-weight:500;
	color:#7b7b7b;
}

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

/* --------------------------------------------------
poster
-------------------------------------------------- */
#poster {
	width: 100%;
	min-width: 1100rem;
	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:636rem;
  margin: 0 auto;
	position: relative;
}

#poster .yt-close {
  z-index: 300;
  position: absolute;
  width: 64rem;
  height: 64rem;
  top: 0;
  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;
  }
}

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

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

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

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

.is-loaded ul.logo 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 1.0s cubic-bezier(.17,.67,.3,.92) 3.6s forwards;
}

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

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