@charset "UTF-8";

iframe{
  border: 0;
}

.flame{
  position: relative;
  top: 0px;
  left: 0px;

  background: url(img/header_frame.png) no-repeat center;
  overflow: hidden;

  width: 800px; height: 134px;
  user-select: none;
}

.chara{
  float: right;
}

.logo{
  display: inline-block;
  position: absolute;
  top: 33px;
  left: 24px;
}


.album {
	margin: auto;
	position: relative;
  z-index: -1;
}

.album img {
  position: absolute;
  top:0;

	width: 100%;
  height: auto;

  opacity: 0;
  transform: translateY(0);
}


.album #scene_03.active
,.album #scene_05.active{
  -webkit-animation: moveimg 10s ease-out forwards;
  animation: moveimg 10s ease-out forwards;
  z-index: 2;
}

.album #scene_01
,.album #scene_02
,.album #scene_04{
  top:auto;
  bottom: -134px;
}

.album #scene_01.active
,.album #scene_02.active
,.album #scene_04.active{
  -webkit-animation: moveimgTop 10s ease-out forwards;
  animation: moveimgTop 10s ease-out forwards;
  z-index: 2;
}


@-webkit-keyframes moveimg {
  0%{
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  90% {
    -webkit-transform: translateY(134px) translateY(-100%);
    opacity: 1;
  }

  100%{
    -webkit-transform: translateY(134px) translateY(-100%);
    opacity: 0;
  }
}

@keyframes moveimg {
  0%{
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  90% {
    transform: translateY(134px) translateY(-100%);
    opacity: 1;
  }

  100%{
    transform: translateY(134px) translateY(-100%);
    opacity: 0;
  }
}


@-webkit-keyframes moveimgTop {
  0%{
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  90% {
    -webkit-transform: translateY(100%) translateY(-134px);
    opacity: 1;
  }

  100%{
    -webkit-transform: translateY(100%) translateY(-134px);
    opacity: 0;
  }
}

@keyframes moveimgTop {
  0%{
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  90% {
    transform: translateY(100%) translateY(-134px);
    opacity: 1;
  }

  100%{
    transform: translateY(100%) translateY(-134px);
    opacity: 0;
  }
}