@charset "UTF-8";

/* --------------------------------------------------
layout
-------------------------------------------------- */
.l-wrap {
  position: relative;
  width: 100%;
  min-width: 1300rem;
  height: 100vh;
  overflow: hidden;
	z-index:100;
	min-height:1000rem;
}

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

.l-cont {
	width:100%;
  min-width: 1300rem;
  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:880rem;
	position:relative;
	padding-top:120rem;
  margin: 0 auto;
}

#main h1{
	width:760rem;
	position:relative;
  margin: 0 auto;
}

#date{
	width:540rem;
	position:relative;
  margin: 25rem auto 0;
}

ul.official {
	width:830rem;
	margin:20rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

ul.official li {
  width: 200rem;
}

ul.official li a{
	display:block;
  width: 200rem;
	position:relative;
}

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

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

/* --------------------------------------------------
bnr
-------------------------------------------------- */
#bnr{
	width:200rem;
	position:absolute;
	right:20px;
	top:70px;
}

#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:10rem;
}

/* --------------------------------------------------
side_navi
-------------------------------------------------- */
#side_navi{
	width:250rem;
	position:absolute;
	left:20px;
	top:70px;
}

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

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

#side_navi ul li:nth-child(1){
	box-sizing:border-box;
	border:3px solid #f6a800;
	border-radius:10rem;
	padding:15rem 0;
}

#side_navi ul li:nth-child(1) #animation{
	width:196rem;
	height:77rem;
	margin:0 auto;
  position: relative;
}

#side_navi ul li:nth-child(1) #animation::after {
  content: '';
  display: block;
  position: absolute;
  top: 19.5rem;
  left: 0;
	right:0;
	margin:auto;
  width: 38rem;
  height: 38rem;
	background: url(../img/play_btn.png) no-repeat center center;
	background-size:cover;
}

#side_navi ul li:nth-child(1) p{
	color:#f6a800;
	font-size:15rem;
	text-align:center;
	margin-top:10rem;
	line-height:1.0;
	font-weight:500;
}

#side_navi ul li:nth-child(2) a{
	display:block;
	width:100%;
	box-sizing:border-box;
	background-color:#f6a800;
	border-radius:10rem;
	padding:10rem 92.5rem 12rem;
	transition: .3s;
}

#side_navi ul li:nth-child(2) a:hover{
	background-color:#36b0c9;
}

#side_navi ul li:nth-child(2) a img{
	width:65rem;
}

/* --------------------------------------------------
footer
-------------------------------------------------- */
.l-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 1300rem;
	height:50rem;
	background-color:#1a1a1a;
}

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

.l-footer__copyright p{
  font-size: 12rem;
	line-height:50rem;
	font-weight:400;
	padding-left:20px;
}

.l-footer__copyright ul.billing{
	width:122rem;
	height:22rem;
  position: absolute;
  left: 0;
	right:0;
  top: 14rem;
	margin:auto;
	display: flex;
  justify-content: space-between;
  align-items: center;
	flex-wrap: wrap;
}

.l-footer__copyright ul.billing li:nth-child(1){
	width:49rem;
}

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

.l-footer__copyright ul.billing li:nth-child(3){
	width:33rem;
}

.l-footer ul.footer_link{
  position: absolute;
	right:20px;
	top:0;
	text-align:center;
  font-size: 12rem;
  line-height: 1;
	font-weight:500;
	display: flex;
  align-items: center;
	flex-wrap: wrap;
	gap:20rem;
}

.l-footer ul.footer_link li a{
	display:block;
	line-height:50rem;
}


/*--------------------------------------
mvtkWidget
----------------------------------------*/
#mvtkWidget{
	width:100%;
	max-width: 1300rem;
	margin:60rem auto 0;
	position:relative;
}

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



/* --------------------------------------------------
animation
-------------------------------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

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

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform:scale(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

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

@keyframes poyon {
  0%   { transform: scale(0.3, 0.3); }
  20%  { opacity: 1; transform: scale(1.1, 1.1); }
  40%  { opacity: 1; transform: scale(0.8, 0.8); }
  60%  { opacity: 1; transform: scale(1.05, 1.05); }
  80%  { opacity: 1; transform: scale(0.95, 0.95); }
  100% { opacity: 1; transform: scale(1.0, 1.0); }
}

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

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

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-300rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(300rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

h1,
h2,
#mvtkWidget,
ul.official li a{
	opacity:0;
}

.is-loaded h1{
  animation: poyon 0.6s linear 0.6s forwards;
}

.is-loaded h2{
  animation: poyon 0.6s linear 0.9s forwards;
}

.is-loaded #mvtkWidget{
  animation: fadeIn 0.6s linear 1.2s forwards;
}

.is-loaded ul.official li:nth-child(1) a{
  animation: poyon 0.6s linear 1.8s forwards;
}

.is-loaded ul.official li:nth-child(2) a{
  animation: poyon 0.6s linear 1.9s forwards;
}

.is-loaded ul.official li:nth-child(3) a{
  animation: poyon 0.6s linear 2.0s forwards;
}

.is-loaded ul.official li:nth-child(4) a{
  animation: poyon 0.6s linear 2.1s forwards;
}

ul.official li a{
	pointer-events: none;
}

ul.official li a.active {
  pointer-events: auto;
}

ul.c-share,
#side_navi{
	opacity:0;
	transform: translateX(-300rem);
}

#bnr{
	opacity:0;
	transform: translateX(300rem);
}

.is-loaded ul.c-share,
.is-loaded #side_navi{
  animation: slideLeft 1.0s cubic-bezier(.17,.67,.3,.92) 2.5s forwards;
}

.is-loaded #bnr{
  animation: slideRight 1.0s cubic-bezier(.17,.67,.3,.92) 2.5s forwards;
}

.c-sns{
	opacity: 0;
	transform: translateY(-60px);
}

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