@charset "UTF-8";
/* Scss Document */
body {
  background: url(../images/cloud.png) center top no-repeat;
  background-size: contain;
  background-color: #81dbe2; }

a {
  color: #000; }

.seto-font {
  font-family: setofont-sp, sans-serif;
  font-weight: 400;
  font-style: normal; }

#rooftop {
  padding: 0px;
  margin-bottom: 0px; }
  @media (min-width: 992px) {
    #rooftop {
      padding-top: 100px; } }
  @media (max-width: 1200px) and (min-width: 992px) {
    #rooftop {
      width: 95vw;
      max-width: 100vw;
      padding-top: 60px; } }
  @media (max-width: 992px) {
    #rooftop {
      width: 95vw;
      max-width: 100vw; } }
  @media (max-width: 768px) {
    #rooftop {
      padding-top: 0px;
      width: 95vw;
      max-width: 100vw; } }
  @media (max-width: 576px) {
    #rooftop {
      width: 100vw;
      max-width: 100vw; } }
  #rooftop h1 {
    margin: 0px; }

#allContents {
  opacity: 0; }

#loadingAnimation {
  opacity: 1; }

#mainContents {
  background-color: #efe0ca;
  margin-top: 0px;
  padding-top: 0px;
  overflow: hidden; }
  @media (max-width: 1200px) and (min-width: 992px) {
    #mainContents {
      width: 95vw;
      max-width: 100vw; } }
  @media (max-width: 992px) {
    #mainContents {
      width: 95vw;
      max-width: 100vw; } }
  @media (max-width: 768px) {
    #mainContents {
      width: 95vw;
      max-width: 100vw; } }
  @media (max-width: 576px) {
    #mainContents {
      width: 100vw;
      max-width: 100vw; } }

.sectionTitle {
  line-height: 2.5rem;
  padding-bottom: 1rem; }
  @media (max-width: 992px) {
    .sectionTitle {
      font-size: 1.2rem; } }

.sectionTitle::before {
  content: ' ';
  min-width: 100%;
  height: 3rem;
  background-image: url("../images/sectiontitle2.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  /*前後に改行を入れる*/ }

.sectionTitle::after {
  content: ' ';
  min-width: 100%;
  height: 3rem;
  background-image: url("../images/sectiontitle2_rev.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  /*前後に改行を入れる*/ }

@media (max-width: 992px) and (min-width: 768px) {
  .forLongText {
    font-size: 0.8rem; } }

.floorBoard {
  border-bottom: #d7b27c 10px solid;
  margin-bottom: 50px; }

.picture01 {
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45); }
  @media (min-width: 992px) {
    .picture01 {
      transform: rotate(5deg); } }
  @media (max-width: 1200px) and (min-width: 992px) {
    .picture01 {
      transform: rotate(5deg) scale(0.7, 0.7); } }
  @media (max-width: 992px) {
    .picture01 {
      transform: rotate(2deg) scale(1, 1); } }
  @media (max-width: 768px) {
    .picture01 {
      transform: rotate(2deg) scale(0.7, 0.7); } }
  @media (max-width: 576px) {
    .picture01 {
      transform: rotate(1deg) scale(0.7, 0.7); } }
  @media (max-width: 500px) {
    .picture01 {
      transform: scale(0.6, 0.6); } }

.picture02 {
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45); }
  @media (min-width: 992px) {
    .picture02 {
      transform: rotate(-2deg); } }
  @media (max-width: 1200px) and (min-width: 992px) {
    .picture02 {
      transform: rotate(-2deg) scale(0.7, 0.7); } }
  @media (max-width: 992px) {
    .picture02 {
      transform: rotate(-1deg) scale(1, 1); } }
  @media (max-width: 768px) {
    .picture02 {
      transform: rotate(-1deg) scale(0.8, 0.8); } }
  @media (max-width: 576px) {
    .picture02 {
      transform: rotate(-1deg) scale(0.7, 0.7); } }
  @media (max-width: 500px) {
    .picture02 {
      transform: scale(0.6, 0.6); } }

#floor1 {
  padding-top: 10vw;
  background: url("../images/top-gallery.png") center top no-repeat;
  background-size: contain; }
  @media (max-width: 576px) {
    #floor1 {
      padding-top: 40vw;
      background: url("../images/top-gallery-xs.png") center top no-repeat;
      background-size: contain; } }
  #floor1 .sectionTitle {
    line-height: 2.5rem; }
    @media (max-width: 1200px) and (min-width: 992px) {
      #floor1 .sectionTitle {
        letter-spacing: -0.1rem; } }
    @media (max-width: 992px) {
      #floor1 .sectionTitle {
        font-size: 1.2rem; } }
    @media (max-width: 500px) {
      #floor1 .sectionTitle {
        font-size: 1rem;
        line-height: 1.2rem; } }
  #floor1 .sectionTitle::before {
    content: ' ';
    min-width: 100%;
    height: 3rem;
    background-image: url("../images/sectiontitle1.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    /*前後に改行を入れる*/ }
  #floor1 .sectionTitle::after {
    content: ' ';
    min-width: 100%;
    height: 3rem;
    background-image: url("../images/sectiontitle1_rev.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    /*前後に改行を入れる*/ }

#greeting {
  opacity: 0;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 0.3rem; }
  #greeting h5 {
    line-height: 1.5rem; }
  @media (max-width: 992px) {
    #greeting {
      width: 70%;
      margin-left: auto;
      margin-right: auto; } }
  @media (max-width: 768px) {
    #greeting {
      width: 80%;
      margin-left: auto;
      margin-right: auto; } }

.layOverImg {
  position: absolute; }

.bottomPosition {
  top: 50px; }

.rightSidePicForFloor1 {
  min-height: 300px;
  background-image: url("../images/gallery2.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain; }

.rightSidePicForFloor2 {
  min-height: 300px;
  background-image: url("../images/gallery2.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain; }

#elephant {
  min-height: 200px;
  background-image: url("../images/elephant.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain; }

.menu-frame {
  background-color: #fff;
  opacity: 0.8;
  width: 6.5rem;
  padding: 0.2rem;
  border-radius: 0.5rem;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.45);
  font-family: setofont-sp, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.8rem; }

@media (max-width: 992px) {
  .menu-frame-wrapper {
    min-height: 250px; } }
@media (max-width: 768px) {
  .menu-frame-wrapper {
    min-height: 200px; } }
@media (max-width: 576px) {
  .menu-frame-wrapper {
    min-height: 200px; } }

.menu-frame-wrapper::before {
  content: ' ';
  min-width: 100%;
  height: 65px;
  background-image: url("../images/bat.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  display: block;
  /*前後に改行を入れる*/ }

#floor2 .card, #floor4 .card {
  background-color: inherit;
  border: none; }
#floor2 .card-title, #floor4 .card-title {
  background-color: #fff;
  padding: 0.7rem;
  border-radius: 2%; }

.ClassCaption {
  background-color: #fff;
  border-radius: 2%; }
  @media (min-width: 992px) {
    .ClassCaption {
      min-height: 10rem; } }
  @media (max-width: 1200px) and (min-width: 992px) {
    .ClassCaption {
      min-height: 15rem; } }
  @media (max-width: 992px) {
    .ClassCaption {
      min-height: 10rem; } }
  @media (max-width: 768px) {
    .ClassCaption {
      min-height: inherit; } }

.myCaption {
  background-color: #fff;
  border-radius: 2%; }
  @media (min-width: 992px) {
    .myCaption {
      min-height: 15rem; } }
  @media (max-width: 1200px) and (min-width: 992px) {
    .myCaption {
      min-height: 20rem; } }
  @media (max-width: 992px) {
    .myCaption {
      min-height: 28rem; } }
  @media (max-width: 768px) {
    .myCaption {
      min-height: inherit; } }

.nike-back {
  background-image: url("../images/nike.png");
  background-repeat: no-repeat;
  background-position: center bottom; }

@media (max-width: 768px) {
  .myPortrait {
    margin: auto;
    width: 50%; } }

@media (max-width: 992px) {
  #floor4 .myCaption {
    min-height: 24rem; } }
@media (max-width: 768px) {
  #floor4 .myCaption {
    min-height: inherit; } }

.blogcard {
  min-height: 15rem;
  max-height: 15rem;
  border:1px #ccc solid;
  overflow: hidden; }

#map {
  width: 90%;
  height: 40vw;
  background-color: #fff;
  margin: 3rem auto; }
  #map iframe {
    width: 100%;
    height: 100%; }
  @media (max-width: 768px) {
    #map {
      height: 80vw; } }
  @media (max-width: 500px) {
    #map {
      height: 80vw;
      border: none; } }

.metalFrame {
  margin: 0px 30px;
  border: 22px solid #fff;
  border-image: url("../images/mapborder.png") 116/116px/36px round;
  /* repeat */ }

#lastFloor {
  margin-right: -15px;
  margin-left: -15px;
  min-height: 300px;
  background-image: url("../images/brick-md.png");
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain; }
  @media (max-width: 1200px) and (min-width: 992px) {
    #lastFloor {
      margin-top: -12vw;
      background-image: url("../images/brick-md.png"); } }
  @media (max-width: 992px) {
    #lastFloor {
      margin-top: -10vw;
      background-image: url("../images/brick-md.png"); } }
  @media (max-width: 768px) {
    #lastFloor {
      margin-top: -10vw; } }

@media (max-width: 1200px) and (min-width: 992px) {
  #footer {
    width: 95vw;
    max-width: 100vw; } }
@media (max-width: 992px) {
  #footer {
    width: 95vw;
    max-width: 100vw; } }
@media (max-width: 768px) {
  #footer {
    width: 95vw;
    max-width: 100vw; } }
@media (max-width: 576px) {
  #footer {
    width: 100vw;
    max-width: 100vw; } }
#footer a {
  color: #fff; }
#footer a:hover {
  color: #fff; }

#to-top {
  display: none;
  position: fixed;
  bottom:0px;

/*
  width: 50px;
  height: 50px;

  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  opacity: 0.6;
*/
}
#foot-icons{
  background-color: rgba(255, 255, 255, 0.5);	
}
#foot-icons .icon img,
#foot-icons .top-icon img {
    width: 32px;
    height: 32px;
}

/*
#to-top a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none; }

#to-top2 {
  display: none;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: right;
  width: 100%;
  height: 30px;
  position: fixed;
  top: 0px;
  opacity: 0.6; }

#to-top2 a {
  position: relative;
  display: inline;
  height: 30px;
  text-decoration: none; }
*/
#loadAirplane {
  position: absolute;
  top: 8vw;
  left: 35vw; }
  @media (max-width: 1200px) and (min-width: 992px) {
    #loadAirplane {
      top: 8vw;
      left: 30vw; } }
  @media (max-width: 992px) {
    #loadAirplane {
      top: 8vw;
      left: 20vw;
      width: 400px; } }
  @media (max-width: 768px) {
    #loadAirplane {
      top: 6vw;
      left: 15vw;
      width: 300px;
      height: 100px; } }
  @media (max-width: 576px) {
    #loadAirplane {
      top: 4vw;
      left: 10vw;
      width: 300px;
      height: 100px; } }

/* fadeUpOut */
.fadeUpOutforLoader {
  animation-name: fadeUpOutAnimeLoader;
  animation-duration: 1s;
  animation-fill-mode: forwards; }
  @media (max-width: 992px) {
    .fadeUpOutforLoader {
      animation-name: fadeUpOutAnimeLoader-MD; } }
  @media (max-width: 768px) {
    .fadeUpOutforLoader {
      animation-name: fadeUpOutAnimeLoader-SM; } }
  @media (max-width: 576px) {
    .fadeUpOutforLoader {
      animation-name: fadeUpOutAnimeLoader-XS; } }

@keyframes fadeUpOutAnimeLoader {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate(-10vw, -10vw) scale(0.7, 0.7);
    display: none; } }
@keyframes fadeUpOutAnimeLoader-MD {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate(-10vw, -9vw) scale(0.7, 0.7);
    display: none; } }
@keyframes fadeUpOutAnimeLoader-SM {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate(-10vw, -9vw) scale(0.7, 0.7);
    display: none; } }
@keyframes fadeUpOutAnimeLoader-XS {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate(-4vw, -8vw) scale(0.7, 0.7);
    display: none; } }
.airplaneRefadeIn {
  animation-name: OpacityfadeInAnime;
  animation-duration: 0.5s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes OpacityfadeInAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
#pagetop {
  position: relative; }

#anime-airplane {
  position: absolute; }
  @media (min-width: 992px) {
    #anime-airplane {
      top: 10px;
      left: 100px; } }
  @media (max-width: 1200px) and (min-width: 992px) {
    #anime-airplane {
      top: 0px;
      left: 10px;
      width: 50%; } }
  @media (max-width: 992px) {
    #anime-airplane {
      Left: 0px;
      transform: translate(-60px, -50px) scale(0.5, 0.5); } }
  @media (max-width: 768px) {
    #anime-airplane {
      Left: 0px;
      transform: translate(-110px, -60px) scale(0.5, 0.5); } }
  @media (max-width: 576px) {
    #anime-airplane {
      Left: 0px;
      transform: translate(-180px, -60px) scale(0.4, 0.4); } }

.anime-greeting {
  opacity: 0;
  animation-name: OpacityfadeInAnime;
  animation-duration: 1s;
  animation-delay: 4s;
  animation-fill-mode: forwards; }

@media (max-width: 576px) {
  #anime-monkey {
    height: 400px; } }

/* 下の階へのアニメ */
.opendoor {
  position: relative;
  width: 200px;
  /*1フレーム分の横幅*/
  height: 300px;
  /*1フレーム分の縦幅*/ }

.anime-opendoor {
  width: 200px;
  /*1フレーム分の横幅*/
  height: 300px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-dooropen.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: munk_open;
  animation-timing-function: steps(19);
  animation-duration: 2s;
  animation-delay: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; }
  @media (min-width: 992px) {
    .anime-opendoor {
      animation-delay: 2s; } }
  @media (max-width: 992px) {
    .anime-opendoor {
      animation-delay: 1s; } }

@keyframes munk_open {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -3800px 0; } }
/* ドアから出てくるムンク */
#MunkRevers {
  width: 200px;
  /*1フレーム分の横幅*/
  height: 300px;
  /*1フレーム分の縦幅*/ }

.anime-munkrevers {
  width: 200px;
  /*1フレーム分の横幅*/
  height: 300px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-munkreverse.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: munk_revers;
  animation-timing-function: steps(11);
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; }

@keyframes munk_revers {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -2200px 0; } }
/* ブログのドアが開いたり閉じたり */
.blogdoor {
  opacity: 1; }
  @media (max-width: 400px) {
    .blogdoor {
      transform: scale(0.7, 0.7); } }

.anime-blogdoor {
  width: 360px;
  /*1フレーム分の横幅*/
  height: 400px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-blogdoor.png") no-repeat;
  /*背景画像の読み込み*/
  animation: blogDoorOpen 4s 1s steps(9) 3;
  	/*stepsline→アニメーション名
      1s→アニメーションをする時間
      step→（）の中には、アニメーション制作コマ数-1の値を入れる（例：4コマ-1コマ=3コマ）
      forwards→最後の形を維持*/
  margin: auto; }
  @media (max-width: 400px) {
    .anime-blogdoor {
      transform: translate(-10px, 60px) scale(0.7, 0.7);
      animation: blogDoorOpen-u400 4s 1s steps(9) 3; } }

@keyframes blogDoorOpen {
  0% {
    opacity: 1;
    background-position: 0 0; }
  10% {
    opacity: 1;
    background-position: -3240px 0; }
  20% {
    opacity: 1;
    background-position: 0 0; }
  30% {
    opacity: 1;
    background-position: 0 0; }
  40% {
    opacity: 1;
    background-position: -3240px 0; }
  50% {
    opacity: 1;
    background-position: -3240px 0; }
  60% {
    opacity: 1;
    background-position: 0 0; }
  100% {
    opacity: 1;
    background-position: 0px 0;
                               /*アニメーション制作コマ数から1コマ分引いた横幅を指定。
（例：今回は1フレーム横幅100pxで制作しているので全体の400px-100px=300px⇒-300px）を指定。*/ } }
@keyframes blogDoorOpen-u400 {
  0% {
    background-position: 0 0;
    transform: translate(-10px, 60px) scale(0.7, 0.7); }
  10% {
    background-position: -3240px 0;
    transform: translate(-10px, 60px) scale(0.7, 0.7); }
  20% {
    background-position: 0 0;
    transform: translate(-10px, 60px) scale(0.7, 0.7); }
  30% {
    background-position: 0 0;
    transform: translate(-10px, 60px) scale(0.7, 0.7); }
  40% {
    background-position: -3240px 0;
    transform: translate(-10px, 60px) scale(0.7, 0.7); }
  50% {
    background-position: -3240px 0;
    transform: translate(-10px, 60px) scale(0.7, 0.7); }
  60% {
    opacity: 1;
    background-position: 0 0;
    transform: translate(-10px, 60px) scale(0.7, 0.7); }
  100% {
    background-position: 0px 0;
    transform: translate(-10px, 60px) scale(0.7, 0.7); } }
#floor4top {
  position: relative; }

@media (max-width: 992px) {
  #flyingBat {
    transform: scale(0.7, 0.7); } }
@media (max-width: 768px) {
  #flyingBat {
    display: none; } }

/* うさぎ */
.usagi1 {
  width: 70px;
  /*1フレーム分の横幅*/
  height: 220px;
  /*1フレーム分の縦幅*/ }

.anime-usagi1 {
  width: 70px;
  /*1フレーム分の横幅*/
  height: 220px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-usagi1.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: usagi-nobiru1;
  animation-timing-function: steps(13);
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 1; }

@keyframes usagi-nobiru1 {
  0% {
    background-position: 0 0; }
  90% {
    background-position: 0 0; }
  95% {
    background-position: -920px 0; }
  100% {
    background-position: 0px 0;
    /*アニメーション制作コマ数から1コマ分引いた横幅を指定。*/ } }
.usagi2 {
  width: 65px;
  /*1フレーム分の横幅*/
  height: 220px;
  /*1フレーム分の縦幅*/ }

.anime-usagi2 {
  width: 65px;
  /*1フレーム分の横幅*/
  height: 220px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-usagi2.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: usagi-nobiru2;
  animation-timing-function: steps(13);
  animation-duration: 3s;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 1; }

@keyframes usagi-nobiru2 {
  0% {
    background-position: 0 0; }
  90% {
    background-position: 0 0; }
  95% {
    background-position: -845px 0; }
  100% {
    background-position: 0px 0;
    /*アニメーション制作コマ数から1コマ分引いた横幅を指定。*/ } }
/*　白くま　*/
@media (max-width: 576px) {
  #sirokuma {
    display: none; } }

.anime-sirokuma {
  width: 250px;
  /*1フレーム分の横幅*/
  height: 209px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-sirokuma.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: sirokuma-headup;
  animation-timing-function: steps(13);
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 1; }

@keyframes sirokuma-headup {
  0% {
    background-position: 0 0; }
  70% {
    background-position: 0 0; }
  80% {
    background-position: -3250px 0; }
  90% {
    background-position: -3250px 0; }
  100% {
    background-position: 0px 0;
    /*アニメーション制作コマ数から1コマ分引いた横幅を指定。*/ } }
/* エジプトの壁画　*/
.egyptian-wall {
  background-image: url(../images/egyptian-wall.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  padding-left: 17%; }
  @media (max-width: 992px) {
    .egyptian-wall {
      padding-left: 38%; } }
  @media (max-width: 576px) {
    .egyptian-wall {
      padding-left: 34%; } }
  @media (max-width: 500px) {
    .egyptian-wall {
      background-image: url(../images/xs_egyptian-wall.jpg);
      padding-left: 32%; } }
  @media (max-width: 400px) {
    .egyptian-wall {
      background-image: url(../images/xs_egyptian-wall.jpg);
      padding-left: 30%; } }

/*　ホルス */
.horus {
  width: 210px;
  /*1フレーム分の横幅*/
  height: 420px;
  /*1フレーム分の縦幅*/ }
  @media (max-width: 500px) {
    .horus {
      width: 150px;
      /*1フレーム分の横幅*/
      height: 300px;
      /*1フレーム分の縦幅*/ } }

.anime-horus {
  width: 210px;
  /*1フレーム分の横幅*/
  height: 420px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-horus.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: horus-jump,horus-walk-right,horus-walk-left,horus-jump;
  animation-timing-function: steps(9), steps(10), steps(10), steps(9);
  animation-duration: 2s,2s,2s,2s;
  animation-delay: 1s,5s,9s,13s;
  animation-iteration-count: 1,1,1,1;
  animation-direction: normal,normal,normal,reverse;
  animation-fill-mode: forwards,forwards,forwards,forwards;
  opacity: 1; }
  @media (max-width: 500px) {
    .anime-horus {
      width: 150px;
      /*1フレーム分の横幅*/
      height: 300px;
      /*1フレーム分の縦幅*/
      background: url("../images/anime-xs_horus.png") no-repeat;
      /*背景画像の読み込み*/
      animation-name: xs-horus-jump,xs-horus-walk-right,xs-horus-walk-left,xs-horus-jump; } }

@keyframes horus-jump {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1890px 0; } }
@keyframes horus-walk-right {
  0% {
    background-position: -1890px 0;
    transform: translateX(0); }
  40% {
    transform: translateX(0); }
  60% {
    transform: translateX(-50px); }
  80% {
    transform: translateX(-50px); }
  100% {
    background-position: -3990px 0;
    transform: translateX(-100px); } }
@keyframes horus-walk-left {
  0% {
    background-position: -1890px 0;
    transform: scale(-1, 1) translateX(100px); }
  40% {
    transform: scale(-1, 1) translateX(100px); }
  60% {
    transform: scale(-1, 1) translateX(50px); }
  80% {
    transform: scale(-1, 1) translateX(50px); }
  100% {
    background-position: -3990px 0;
    transform: scale(-1, 1) translateX(0px); } }
/************* For XS *****************/
@keyframes xs-horus-jump {
  0% {
    background-position: 0 0;
    transform: translateX(20px); }
  100% {
    background-position: -1350px 0;
    transform: translateX(20px); } }
@keyframes xs-horus-walk-right {
  0% {
    background-position: -1350px 0;
    transform: translateX(20px); }
  40% {
    transform: translateX(20px); }
  60% {
    transform: translateX(-50px); }
  80% {
    transform: translateX(-50px); }
  100% {
    background-position: -2850px 0;
    transform: translateX(-100px); } }
@keyframes xs-horus-walk-left {
  0% {
    background-position: -1350px 0;
    transform: scale(-1, 1) translateX(100px); }
  40% {
    transform: scale(-1, 1) translateX(100px); }
  60% {
    transform: scale(-1, 1) translateX(50px); }
  80% {
    transform: scale(-1, 1) translateX(50px); }
  100% {
    background-position: -2850px 0;
    transform: scale(-1, 1) translateX(-20px); } }
/************* For XS End *****************/
/* 屏風 */
.byoubu {
  background-image: url(../images/byoubu.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 5vw; }
  @media (max-width: 576px) {
    .byoubu {
      border-left: #653e05 4px solid;
      border-right: #653e05 4px solid;
      background-size: cover; } }

/* 雷神 */
@media (min-width: 992px) {
  #rizin {
    transform: translate(0vw, -5vw) scale(0.8, 0.8); } }
@media (max-width: 1200px) and (min-width: 992px) {
  #rizin {
    transform: translate(0vw, -7vw) scale(0.7, 0.7); } }
@media (max-width: 992px) {
  #rizin {
    transform: translate(0vw, -10vw) scale(0.7, 0.7); } }
@media (max-width: 768px) {
  #rizin {
    transform: translate(-1vw, -2vw) scale(1, 1); } }
@media (max-width: 576px) {
  #rizin {
    transform: translate(-1vw, -2vw) scale(1, 1); } }
@media (max-width: 400px) {
  #rizin {
    transform: translate(-4vw, -2.5vw) scale(0.8, 0.8); } }

/* 雷神アニメ */
.anime-rizin {
  width: 400px;
  /*1フレーム分の横幅*/
  height: 400px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-rizin.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: rizin-jump, rizin-repeat,rizin-jump;
  animation-timing-function: steps(19), steps(19), steps(19);
  animation-duration: 2s,3s,2s;
  animation-delay: 1.5s,4s,7s;
  animation-iteration-count: 1,1,1;
  animation-direction: normal,normal,reverse;
  animation-fill-mode: forwards,forwards,forwards; }
  @media (max-width: 1200px) and (min-width: 992px) {
    .anime-rizin {
      animation-name: rizin-jump-lg, rizin-repeat,rizin-jump-lg; } }
  @media (max-width: 992px) {
    .anime-rizin {
      animation-name: rizin-jump-md, rizin-repeat,rizin-jump-md; } }
  @media (max-width: 768px) {
    .anime-rizin {
      width: 200px;
      /*1フレーム分の横幅*/
      height: 200px;
      /*1フレーム分の縦幅*/
      background: url("../images/anime-rizin-sm.png") no-repeat;
      /*背景画像の読み込み*/
      animation-name: rizin-jump-sm, rizin-repeat-sm,rizin-jump-sm; } }
  @media (max-width: 400px) {
    .anime-rizin {
      animation-name: rizin-jump-u400, rizin-repeat-sm,rizin-jump-u400; } }

@keyframes rizin-jump {
  0% {
    background-position: 0 0;
    transform: translate(0vw, -5vw) scale(0.8, 0.8); }
  100% {
    background-position: -7600px 0;
    transform: translate(-2vw, -8vw) scale(1, 1); } }
@keyframes rizin-repeat {
  0% {
    background-position: 0 0;
    transform: translate(-2vw, -8vw); }
  25% {
    transform: translate(-1vw, -8vw); }
  50% {
    transform: translate(0vw, -10vw); }
  75% {
    transform: translate(-1vw, -8vw); }
  100% {
    background-position: -7600px 0;
    transform: translate(-2vw, -8vw); } }
/* For Rizin Large */
@keyframes rizin-jump-lg {
  0% {
    background-position: 0 0;
    transform: translate(0vw, -7vw) scale(0.7, 0.7); }
  100% {
    background-position: -7600px 0;
    transform: translate(-2vw, -8vw) scale(1, 1); } }
/* For Rizin Medium */
@keyframes rizin-jump-md {
  0% {
    background-position: 0 0;
    transform: translate(0vw, -10vw) scale(0.7, 0.7); }
  100% {
    background-position: -7600px 0;
    transform: scale(1, 1); } }
/* For Rizin Small */
@keyframes rizin-jump-sm {
  0% {
    background-position: 0 0;
    transform: translate(-1vw, -2vw); }
  100% {
    background-position: -3800px 0; } }
@keyframes rizin-repeat-sm {
  0% {
    background-position: 0 0;
    transform: translate(-1vw, -2vw); }
  50% {
    transform: translate(-2vw, -5vw); }
  100% {
    background-position: -3800px 0;
    transform: translate(-1vw, -2vw); } }
/* For Rizin Under400 */
@keyframes rizin-jump-u400 {
  0% {
    background-position: 0 0;
    transform: translate(-4vw, -2.5vw) scale(0.8, 0.8); }
  100% {
    background-position: -3800px 0; } }
/* 風神 */
@media (min-width: 992px) {
  #fuuzin {
    transform: translate(0vw, -3vw) scale(0.8, 0.8); } }
@media (max-width: 1200px) and (min-width: 992px) {
  #fuuzin {
    transform: translate(0vw, -5.5vw) scale(0.7, 0.7); } }
@media (max-width: 992px) {
  #fuuzin {
    transform: translate(-3vw, -10vw) scale(0.7, 0.7); } }
@media (max-width: 768px) {
  #fuuzin {
    transform: translate(-1vw, -2vw) scale(1, 1); } }
@media (max-width: 576px) {
  #fuuzin {
    transform: translate(-1vw, -2vw) scale(1, 1); } }
@media (max-width: 400px) {
  #fuuzin {
    transform: translate(-4vw, -1.5vw) scale(0.8, 0.8); } }

/* 風神アニメ */
.anime-fuuzin {
  width: 400px;
  /*1フレーム分の横幅*/
  height: 400px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-fuuzin.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: fuuzin-jump,fuuzin-repeat,fuuzin-jump;
  animation-timing-function: steps(19), steps(19), steps(19);
  animation-duration: 2s,3s,2s;
  animation-delay: 8s,10s,13s;
  animation-iteration-count: 1,1,1;
  animation-direction: normal,normal,reverse;
  animation-fill-mode: forwards,forwards,forwards; }
  @media (max-width: 1200px) and (min-width: 992px) {
    .anime-fuuzin {
      animation-name: fuuzin-jump-lg, fuuzin-repeat,fuuzin-jump-lg; } }
  @media (max-width: 992px) {
    .anime-fuuzin {
      animation-name: fuuzin-jump-md, fuuzin-repeat-md,fuuzin-jump-md; } }
  @media (max-width: 768px) {
    .anime-fuuzin {
      width: 200px;
      /*1フレーム分の横幅*/
      height: 200px;
      /*1フレーム分の縦幅*/
      background: url("../images/anime-fuuzin-sm.png") no-repeat;
      /*背景画像の読み込み*/
      animation-name: fuuzin-jump-sm, fuuzin-repeat-sm,fuuzin-jump-sm; } }
  @media (max-width: 400px) {
    .anime-fuuzin {
      animation-name: fuuzin-jump-u400, fuuzin-repeat-sm,fuuzin-jump-u400; } }

@keyframes fuuzin-jump {
  0% {
    background-position: 0 0;
    transform: translate(0vw, -3vw) scale(0.8, 0.8); }
  100% {
    background-position: -7600px 0;
    transform: translate(2vw, -4vw) scale(1, 1); } }
@keyframes fuuzin-repeat {
  0% {
    background-position: 0 0;
    transform: translate(2vw, -4vw); }
  100% {
    background-position: -7600px 0;
    transform: translate(2vw, -4vw); } }
/* For Fuuzin Large */
@keyframes fuuzin-jump-lg {
  0% {
    background-position: 0 0;
    transform: translate(0vw, -5.5vw) scale(0.7, 0.7); }
  100% {
    background-position: -7600px 0;
    transform: translate(2vw, -6.5vw) scale(1, 1); } }
/* For Fuuzin Medium */
@keyframes fuuzin-jump-md {
  0% {
    background-position: 0 0;
    transform: translate(-3vw, -10vw) scale(0.7, 0.7); }
  100% {
    background-position: -7600px 0;
    transform: translate(-4vw, -10vw) scale(0.9, 0.9); } }
@keyframes fuuzin-repeat-md {
  0% {
    background-position: 0 0;
    transform: translate(-4w, -10vw) scale(0.9, 0.9); }
  100% {
    background-position: -7600px 0;
    transform: translate(-4vw, -10vw) scale(0.9, 0.9); } }
/* For Fuuzin Small */
@keyframes fuuzin-jump-sm {
  0% {
    background-position: 0 0;
    transform: translate(-1vw, -2vw); }
  100% {
    background-position: -3800px 0; } }
@keyframes fuuzin-repeat-sm {
  0% {
    background-position: 0 0;
    transform: translate(-1vw, -2vw); }
  50% {
    transform: translate(-2vw, -5vw); }
  100% {
    background-position: -3800px 0;
    transform: translate(-1vw, -2vw); } }
/* For Fuuzin Under 400 */
@keyframes fuuzin-jump-u400 {
  0% {
    background-position: 0 0;
    transform: translate(-4vw, -1.5vw) scale(0.8, 0.8); }
  100% {
    background-position: -3800px 0; } }
/* ピースサインのムンク */
.peaceMunk {
  width: 210px;
  /*1フレーム分の横幅*/
  height: 300px;
  /*1フレーム分の縦幅*/
  margin-top: 20px; }
  @media (max-width: 576px) {
    .peaceMunk {
      transform: translate(-40px, 46px) scale(0.7, 0.7); } }

.anime-peaceMunk {
  width: 210px;
  /*1フレーム分の横幅*/
  height: 300px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-peacemunk.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: peaceMunk-open;
  animation-timing-function: steps(9);
  animation-duration: 1s;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 1; }
  @media (max-width: 576px) {
    .anime-peaceMunk {
      transform: translate(-40px, 46px) scale(0.7, 0.7);
      animation-name: peaceMunk-open-xs; } }

@keyframes peaceMunk-open {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1890px 0; } }
@keyframes peaceMunk-open-xs {
  0% {
    background-position: 0 0;
    transform: translate(-40px, 46px) scale(0.7, 0.7); }
  100% {
    background-position: -1890px 0;
    transform: translate(-40px, 46px) scale(0.7, 0.7); } }
/* 自由の女神 */
#liberty {
  width: 400px;
  /*1フレーム分の横幅*/
  height: 350px;
  /*1フレーム分の縦幅*/
  margin-right: auto;
  margin-left: auto; }
  @media (max-width: 768px) {
    #liberty {
      transform: scale(0.7, 0.7); } }
  @media (max-width: 576px) {
    #liberty {
      transform: scale(0.5, 0.5); } }
  @media (max-width: 500px) {
    #liberty {
      transform: translate(-15%, 0%) scale(0.5, 0.5); } }

.anime-liberty {
  width: 400px;
  /*1フレーム分の横幅*/
  height: 270px;
  /*1フレーム分の縦幅*/
  background: url("../images/anime-liberty.png") no-repeat;
  /*背景画像の読み込み*/
  animation-name: liberty-change;
  animation-timing-function: steps(9);
  animation-duration: 3s;
  animation-delay: 17s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 1; }
  @media (max-width: 768px) {
    .anime-liberty {
      transform: scale(0.7, 0.7);
      animation-name: liberty-change-sm; } }
  @media (max-width: 576px) {
    .anime-liberty {
      transform: scale(0.5, 0.5);
      animation-name: liberty-change-xs; } }
  @media (max-width: 500px) {
    .anime-liberty {
      transform: translate(-15%, 0%) scale(0.5, 0.5);
      animation-name: liberty-change-u500; } }

@keyframes liberty-change {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -3600px 0; } }
@keyframes liberty-change-sm {
  0% {
    background-position: 0 0;
    transform: scale(0.7, 0.7); }
  100% {
    background-position: -3600px 0;
    transform: scale(0.7, 0.7); } }
@keyframes liberty-change-xs {
  0% {
    background-position: 0 0;
    transform: scale(0.5, 0.5); }
  100% {
    background-position: -3600px 0;
    transform: scale(0.5, 0.5); } }
@keyframes liberty-change-u500 {
  0% {
    background-position: 0 0;
    transform: translate(-15%, 0%) scale(0.5, 0.5); }
  100% {
    background-position: -3600px 0;
    transform: translate(-15%, 0%) scale(0.5, 0.5); } }