@charset "utf-8";


/************************************************************
                動き1
************************************************************/

.mv_fade1{
    opacity: 0;
	transition: 1.2s all 0.2s ease;
}
.mv_fade2{
    opacity: 0;
	transition: 1.2s all 0.4s ease;
}
.mv_fade3{
    opacity: 0;
	transition: 1.2s all 0.8s ease;
}
.mv_fade4{
    opacity: 0;
	transition: 1.2s all 1s ease;
}
.mv_fade5{
    opacity: 0;
	transition: 1.2s all 1.2s ease;
}
.fade {
	opacity: 0;
	transition: 1.2s all 0s ease;
}
.fade.ac {
	opacity: 1;
}
.fade_up{
	opacity: 0;
	transition: 1s 0.2s;
	-moz-transform: scale(1) translate(0,30px);
    -webkit-transform: scale(1) translate(0,30px);
    -o-transform: scale(1) translate(0,30px);
    -ms-transform: scale(1) translate(0,30px);
	transform: scale(1) translate(0,30px);
}

.ac_up{
	opacity: 1.0;
	-moz-transform: scale(1) translate(0);
    -webkit-transform: scale(1) translate(0);
    -o-transform: scale(1) translate(0);
    -ms-transform: scale(1) translate(0);
	transform: scale(1) translate(0);
}

.mv_dw1{
	opacity: 0;
	transition: 0.8s 0.2s;
	-moz-transform: scale(1) translate(0,-30px);
    -webkit-transform: scale(1) translate(0,-30px);
    -o-transform: scale(1) translate(0,-30px);
    -ms-transform: scale(1) translate(0,-30px);
	transform: scale(1) translate(0,-30px);
}
.ac_dw{
	opacity: 1.0;
	-moz-transform: scale(1) translate(0);
    -webkit-transform: scale(1) translate(0);
    -o-transform: scale(1) translate(0);
    -ms-transform: scale(1) translate(0);
	transform: scale(1) translate(0);
}


.cover_a, .cover_b, .cover_c, .cover_d {
  opacity: 0;
}

.img-animation_a {
  animation: img-opacity-left 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}

.img-animation_a::before {
  animation: img-animation-left 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ccc;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.img-animation_b {
  animation: img-opacity-right 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}

.img-animation_b::before {
  animation: img-animation-right 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ccc;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.img-animation_c {
  animation: img-opacity-c 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}

.img-animation_c::before {
  animation: img-animation-left 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ccc;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.img-animation_d {
  animation: img-opacity-d 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}

.img-animation_d::before {
  animation: img-animation-right 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ccc;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-opacity-left {
  100% {
    opacity: 1;
  }
}

@keyframes img-opacity-right {
  100% {
    opacity: 1;
  }
}

@keyframes img-opacity-c {
  100% {
    opacity: 1;
  }
}
@keyframes img-opacity-d {
  100% {
    opacity: 1;
  }
}

@keyframes img-animation-left {
  100% {
    transform: translateX(100%);
  }
}

@keyframes img-animation-right {
  100% {
    transform: translateX(-100%);
  }
}

.cover {
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
  transform: translateY(20px); /* 少し下に配置しておく */
}

/* フェードインアニメーションを追加 */
.img-animation {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻す */
}