@charset "UTF-8";


/*--------------------------------------
top
----------------------------------------*/
#main{
  width: 100%;
	height:1060rem;
	background: url(../img/bg.jpg) no-repeat center center;
	background-size:cover;
	position:relative;
}

#visual{
  width: 100%;
	height:1060rem;
	background: url(../img/visual.jpg) no-repeat center center;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}

.l-wrap h1{
	width:418rem;
	position:absolute;
	left:0;
	right:0;
	top:372rem;
	margin:auto;
	z-index:10;
}

.l-wrap #chara{
	width:210rem;
	position:absolute;
	left:0;
	right:0;
	top:840rem;
	margin:auto;
	z-index:10;
}

.l-wrap #fukidashi{
	width:30rem;
	position:absolute;
	left:255rem;
	top:740rem;
	margin:auto;
	z-index:10;
}

.l-wrap h2#date{
	width:165rem;
	position:absolute;
	left:0;
	right:0;
	top:1010rem;
	margin:auto;
	z-index:10;
}

.l-wrap h3{
	width:60rem;
	position:absolute;
	left:25rem;
	top:20rem;
	z-index:10;
	clip-path: inset(0 0 100% 0);
}

/*--------------------------------------
navi
----------------------------------------*/
#navi{
	width:650rem;
	position:relative;
	margin:100rem auto 0;
}

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

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

#navi ul li:nth-child(4){
	margin-bottom:20rem;
}

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

#navi ul li:nth-child(3){
	box-sizing:border-box;
	border:4px solid #36b0c9;
	border-radius:20rem;
	padding:45rem 0;
}

#navi ul li:nth-child(3) #animation{
	width:560rem;
	height:260rem;
	margin:0 auto;
  position: relative;
	overflow:hidden;
}

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

#navi ul li:nth-child(3) p{
	color:#36b0c9;
	font-size:40rem;
	text-align:center;
	margin-top:10rem;
	line-height:1.0;
	font-weight:600;
}

#navi ul li:nth-child(4) a{
	width:650rem;
	height:120rem;
	display:block;
	box-sizing:border-box;
	background-color:#36b0c9;
	border-radius:20rem;
	padding:40rem 240rem;
}

#navi ul li:nth-child(4) a img{
	width:170rem;
}

#navi ul li:nth-child(5) a{
	width:650rem;
	height:120rem;
	display:block;
	box-sizing:border-box;
	background-color:#36b0c9;
	border-radius:20rem;
	padding:40rem 50rem;
}

#navi ul li:nth-child(5) a img{
	width:550rem;
}

#navi ul li:nth-child(6) a{
	width:650rem;
	height:120rem;
	display:block;
	box-sizing:border-box;
	background-color:#36b0c9;
	border-radius:20rem;
	padding:40rem 185rem;
}

#navi ul li:nth-child(6) a img{
	width:280rem;
}

#bnr ul{
	width:650rem;
	margin:0 auto;
	padding-top:50rem;
  justify-content: space-between;
  align-items: center;
	display: flex;
	flex-wrap: wrap;
}

#bnr ul li:nth-child(1){
	width:550rem;
	margin:0 auto;
}

#bnr ul li:nth-child(2){
	width:650rem;
	margin:70rem auto 0;
}

#bnr ul li:nth-child(3){
	width:650rem;
	margin:60rem auto 0;
}

ul#mvtk{
	width:550rem;
	margin:0 auto;
	padding-top:50rem;
  justify-content: space-between;
  align-items: center;
	display: flex;
	flex-wrap: wrap;
}

ul#mvtk li{
	width:550rem;
	margin-bottom:20rem;
}

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

/*--------------------------------------
mvtkWidget
----------------------------------------*/

#mvtkWidget{
	width:650rem;
	margin:70rem 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(50px);
    transform: translateY(50px);
  }
  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 0 100% 0);
  }
  100% {
    clip-path: inset(0);
  }
}

@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);
  }
}

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

@keyframes minions {
  0%   { transform: scale(0.8, 1.0) translate(0%, -50px); opacity:0;}
  10%  { transform: scale(0.8, 1.0) translate(0%, -15px); opacity:1;}
  20%  { transform: scale(1.2, 0.6) translate(0%, 30px); opacity:1;}
  30%  { transform: scale(0.9, 1.1) translate(0%, -10px); opacity:1;}
  40%  { transform: scale(0.95, 1.1) translate(0%, -30px); opacity:1;}
  50%  { transform: scale(0.95, 1.1) translate(0%, -10px); opacity:1;}
  60%  { transform: scale(1.1, 0.9) translate(0%, 5px); opacity:1;}
  70%  { transform: scale(1.0, 1.0) translate(0%, 0px); opacity:1;}
  100% { transform: scale(1.0, 1.0) translate(0%, 0px); opacity:1;}
}

#fukidashi,
#chara,
#visual,
h1,
h2,
#navi,
#mvtkWidget,
ul#mvtk li,
#bnr ul li,
.c-sns ul li,
.c-share,
ul.official li{
	opacity:0;
}

.is-loaded #visual{
  animation: slideBg 1.8s cubic-bezier(0.15, 0.85, 0.25, 1) 0.6s forwards;
}

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

.is-loaded #chara{
  animation: minions 0.8s linear 2.0s forwards;
}

.is-loaded h2{
  animation: poyon 0.8s linear 2.2s forwards;
}

.is-loaded h3{
  animation: maskIn 2.0s cubic-bezier(0.8, 0, 0.1, 1) 2.6s forwards;
}

.is-loaded #fukidashi{
  animation: poyon 0.8s linear 3.0s forwards;
}

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

#mvtkWidget.is_loaded{
  animation: poyon 0.6s linear 0.4s forwards;
}

ul#mvtk.is_loaded li:nth-child(1){
  animation: poyon 0.6s linear 0.4s forwards;
}

ul#mvtk.is_loaded li:nth-child(2){
  animation: poyon 0.6s linear 0.6s forwards;
}

#bnr ul li.is_loaded{
  animation: fadeIn 1.0s cubic-bezier(.17,.67,.3,.92) 0.4s forwards;
}

.c-sns.is_loaded ul li:nth-child(1){
  animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 0.4s forwards;
}

.c-sns.is_loaded ul li:nth-child(2){
  animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 0.5s forwards;
}

.c-sns.is_loaded ul li:nth-child(3){
  animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 0.6s forwards;
}

.c-sns.is_loaded ul li:nth-child(4){
  animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 0.7s forwards;
}

.c-sns.is_loaded ul li:nth-child(5){
  animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 0.8s forwards;
}

.c-sns.is_loaded ul li:nth-child(6){
  animation: fadeInUp 0.6s cubic-bezier(.17,.67,.3,.92) 0.9s forwards;
}

.c-share.is_loaded{
  animation: fadeIn 1.0s cubic-bezier(.17,.67,.3,.92) 0.6s forwards;
}

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

ul.official.is_loaded li:nth-child(2){
  animation: poyon 0.6s linear 0.7s forwards;
}

ul.official.is_loaded li:nth-child(3){
  animation: poyon 0.6s linear 0.8s forwards;
}

ul.official.is_loaded li:nth-child(4){
  animation: poyon 0.6s linear 0.9s forwards;
}