@charset "UTF-8";

/* --- 初期状態 --- */

/* キービジュアル */
.kv-background {
  opacity: 0;
  filter:opacity(0);
  animation: anim-appear 1s ease 0s 1 normal forwards;
}
#mion {
  transform: translateX(100vw);
  animation: anim-fromright 1s ease 1s 1 normal forwards;
}
#shion {
  transform: translateX(-100vw);
  animation: anim-fromleft 1s ease 1s 1 normal forwards;
}
#photo {
  opacity: 0;
  filter:opacity(0);
  animation: anim-appear 2s ease 2s 1 normal forwards;
}
#catch {
  opacity: 0;
  filter:opacity(0);
  animation: anim-appear 2s ease 4s 1 normal forwards;
}
#title {
  opacity: 0;
  filter:opacity(0);
  transform: scale(0.5);
  animation: anim-appear-large 1s ease 6s 1 normal forwards;
}
/* 固定ボタン */
.button-menu {
  opacity: 0;
  filter:opacity(0);
  animation: anim-appear 0.1s ease 7s 1 normal forwards;
}
#button-fix {
  opacity: 0;
  filter:opacity(0);
  animation: anim-appear 0.1s ease 7s 1 normal forwards;
}

/* ストーリー */
#title-story {
  transform: translateX(100vw);
}
#parts-story {
  transform: translateX(-100vw);
}
/* ムービー */
#title-movie {
  transform: translateX(100vw);
}
#parts-movie {
  transform: translateX(-100vw);
}
/* グッズ */
#title-goods {
  transform: translateX(100vw);
}
#parts-goods {
  transform: translateX(-100vw);
}
/* インフォメーション */
#title-information {
  transform: translateX(100vw);
}
#parts-information {
  transform: translateX(-100vw);
}
/* スケジュール */
#title-schedule {
  transform: translateX(100vw);
}
#parts-schedule {
  transform: translateX(-100vw);
}
#button-ticket {
  opacity: 0;
  filter:opacity(0);
}
/* マップ */
#title-map {
  transform: translateX(100vw);
}
#parts-map {
  transform: translateX(-100vw);
}
#button-map {
  opacity: 0;
  filter:opacity(0);
}
/* 解説 */
#title-about {
  transform: translateX(100vw);
}
#parts-about {
  transform: translateX(-100vw);
}
/* 注意事項 */
#title-faq {
  transform: translateX(100vw);
}
#parts-faq {
  transform: translateX(-100vw);
}

/* --- アニメーション --- */
@keyframes anim-fromright {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes anim-fromleft {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes anim-appear {
  0% {
    opacity: 0;
    filter:opacity(0);
  }
  100% {
    opacity: 100;
    filter:opacity(1);
  }
}
@keyframes anim-appear-large {
  0% {
    opacity: 0;
    filter:opacity(0);
    transform: scale(0.5);
  }
  100% {
    opacity: 100;
    filter:opacity(1);
  transform: scale(1);
  }
}

/*
@keyframes anim-character {
  0% { 
    filter: alpha(opacity=0);
    opacity: 0;
    transform: translateY(10%);
  }
  100% { 
    filter: alpha(opacity=100);
    opacity: 1;
    transform: translateY(0);
  }
}

#chara-1 {
  filter: alpha(opacity=0);
  opacity: 0;
  transform: translateY(100px);

  animation: anim-character 0.2s ease-in 1.5s forwards;
}

#chara-2 {
  filter: alpha(opacity=0);
  opacity: 0;
  transform: translateY(100px);

  animation: anim-character 0.2s ease-in 1.7s forwards;
}

#chara-3 {
  filter: alpha(opacity=0);
  opacity: 0;
  transform: translateY(100px);

  animation: anim-character 0.2s ease-in 1.9s forwards;
}
*/
/* テキスト・タイトル */
/*
@keyframes anim-title {
  0% { 
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(125%);
  }
  10% { 
    filter: alpha(opacity=100);
    opacity: 1;
  }
  100% { 
    filter: alpha(opacity=100);
    opacity: 1;
    transform: scale(100%);
  }
}
#right {
  filter: alpha(opacity=0);
  opacity: 0;
  transform: scale(125%);
  animation: anim-title 1s ease-in 2.4s forwards;
}
#left {
  filter: alpha(opacity=0);
  opacity: 0;
  transform: scale(125%);
  animation: anim-title 1s ease-in 2.4s forwards;
}
#title {
  filter: alpha(opacity=0);
  opacity: 0;
  transform: scale(125%);
  animation: anim-title 1s ease-in 2.4s forwards;
}
*/

/* 固定ボタン */
/*
@keyframes anim-appear {
  0% { 
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% { 
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@keyframes anim-disappear {
  0% { 
    filter: alpha(opacity=100);
    opacity: 1;
  }
  100% { 
    filter: alpha(opacity=0);
    opacity: 0;
  }
}

.button-fix {
  filter: alpha(opacity=0);
  opacity: 0;
  animation: anim-disappear 0.01s ease-in 0s forwards;
}

.dim-visible {
  animation: anim-appear 0.5s ease-in 0s forwards;
}
.dim-hidden {
  animation: anim-disappear 0.5s ease-in 0s forwards;
}
*/