/* アニメーション */
/* 写真が横からすっと出てくるやつ */
.in_hidari,.in_migi,.in_ue{
    opacity: 0;
}
.in_hidari.is-active{
  animation: slideIn_L 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn_L {
  0% {
    transform: translateX(-450px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
.in_migi.is-active{
  animation: slideIn_R 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn_R {
  0% {
    transform: translateX(450px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
.in_ue.is-active{
  animation: slideIn_T 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn_T {
  0% {
    transform: translateY(250px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* 四角いアニメーション */
.anime-01{
	width: 42%;
	position: relative;
	margin:0 0 0 auto;
	z-index: -2;
	opacity: 0.7;
}
.anime-01 span{
	display: block;
}
.anime-01-1{
	width: 180px;
	height: 80px;
	background: #29abe2;
	position: absolute;
	top: 0;
	left: 160px;
	opacity: 0.7;
}
@media screen and (max-width: 768px) {
	.anime-01-1{
        width: 28vw;
        height: 15vw;
        position: absolute;
        top: 0;
        left: 10vw;
	}
}

.anime-01-1.is-active{
  animation: anime1-1 1s cubic-bezier(0.6, 1, 0.8, 1) 1 forwards;
}
@keyframes anime1-1 {
  20% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  100% {
    opacity: 0.7;
  }
}

.anime-01-2{
	width: 220px;
	height: 100px;
	border: 2px solid #29abe2;
	position: absolute;
	top: 40px;
	left: 200px;
	opacity: 0.7;
}
@media screen and (max-width: 768px) {
	.anime-01-2{
        width: 38vw;
        height: 18vw;
        position: absolute;
        top: 7vw;
        left: 20vw;
	}
}
.anime-01-2.is-active{
  animation: anime1-2 1s cubic-bezier(0.25, 1, 0.7, 1) 1 forwards;
}
@keyframes anime1-2 {
  20% {
    transform: translateX(150px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  100% {
	opacity: 0.7;
  }
}

.anime-01-3{
	width: 320px;
	height: 140px;
	background: #29abe2;
	position: absolute;
	top: 60px;
	left: 0;
	opacity: 0.5;
}

@media screen and (max-width: 768px) {
	.anime-01-3{
        width: 38vw;
        height: 18vw;
        position: absolute;
        top: 11vw;
        left: 0;
	}
}
.anime-01-3.is-active{
  animation: anime1-3 1s cubic-bezier(0.6, 1, 0.9, 1) 1 forwards;
}
@keyframes anime1-3 {
  20% {
    transform: translateX(250px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  100% {
	opacity: 0.5;
  }
}

.anime-02{
	width: 40%;
	position: relative;
	margin:0 auto 0 0;
	z-index: -2;
	opacity: 0.7;
}
.anime-02 span{
	display: block;
}
.anime-02-1{
	width: 180px;
	height: 80px;
	background: #29abe2;
	position: absolute;
	top: 0;
	left: 130px;
	opacity: 0.5;
}
@media screen and (max-width: 768px) {
	.anime-02-1{
        width: 32vw;
        height: 15vw;
        position: absolute;
        top: 0;
        left: 26vw;
	}
}
.anime-02-1.is-active{
  animation: anime2-1 1s cubic-bezier(0.6, 1, 0.9, 1) 1 forwards;
}
@keyframes anime2-1 {
  20% {
    transform: translateX(-250px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  100% {
	opacity: 0.5;
  }
}
.anime-02-2{
	width: 240px;
	height: 100px;
	border: 2px solid #29abe2;
	position: absolute;
	top: 30px;
	left: 0;
	opacity: 0.7;
}
@media screen and (max-width: 768px) {
	.anime-02-2{
        width: 38vw;
        height: 18vw;
        position: absolute;
        top: 6vw;
        left: 8vw;
	}
}
.anime-02-2.is-active{
  animation: anime2-2 1s cubic-bezier(0.25, 1, 0.7, 1) 1 forwards;
}
@keyframes anime2-2 {
  20% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  100% {
	opacity: 0.7;
  }
}

.anime-02-3{
	width: 340px;
	height: 140px;
	background: #29abe2;
	position: absolute;
	top: 60px;
	left: 180px;
	opacity: 0.7;
}
@media screen and (max-width: 768px) {
	.anime-02-3{
        width: 48vw;
        height: 21vw;
        position: absolute;
        top: 11vw;
        left: 37vw;
	}
}
.anime-02-3.is-active{
  animation: anime2-3 1s cubic-bezier(0.6, 1, 0.8, 1) 1 forwards;
}
@keyframes anime2-3 {
  20% {
    transform: translateX(-150px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  100% {
    opacity: 0.7;
  }
}