@keyframes hero-scale {
  0% {
    transform: scale(0);
  }
  2% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  32% {
    transform: scale(0);
  }
  34% {
    transform: scale(1);
  }
  62% {
    transform: scale(1);
  }
  64% {
    transform: scale(0);
  }
  66% {
    transform: scale(1);
  }
  98% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes hero-icon-fade01 {
  0% {
    opacity: 0;
  }
  0.1% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  33.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes hero-icon-fade02 {
  0% {
    opacity: 0;
  }
  32% {
    opacity: 0;
  }
  32.1% {
    opacity: 1;
  }
  64% {
    opacity: 1;
  }
  64.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes hero-icon-fade03 {
  0% {
    opacity: 0;
  }
  64% {
    opacity: 0;
  }
  64.1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*
div.hero-area{
	div.icon-wrap{
		div.icon{
			animation: hero-scale 12s 0s linear infinite;
			span{
				&:nth-of-type(1){
					animation: hero-icon-fade01 12s 0s linear infinite;
				}
				&:nth-of-type(2){
					animation: hero-icon-fade02 12s 0s linear infinite;
				}
				&:nth-of-type(3){
					animation: hero-icon-fade03 12s 0s linear infinite;
				}
				&:nth-of-type(2),&:nth-of-type(3){
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
		}
	}
}
	*/
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
div.merit-area h2,
div.merit-area h3.merit-title,
p.expenses-txt01,
div.expenses-box01,
div.expenses-box02 p,
div.expenses-box03 p,
div.hirutoku-link-box,
div.denkae-link-box,
div.convenience-box,
div.living-box,
a.bn-img,
section.sec-gallery h2,
div.gallery-box01,
div.gallery-box02 {
  opacity: 0;
}
div.merit-area h2.animation,
div.merit-area h3.merit-title.animation,
p.expenses-txt01.animation,
div.expenses-box01.animation,
div.expenses-box02 p.animation,
div.expenses-box03 p.animation,
div.hirutoku-link-box.animation,
div.denkae-link-box.animation,
div.convenience-box.animation,
div.living-box.animation,
a.bn-img.animation,
section.sec-gallery h2.animation,
div.gallery-box01.animation,
div.gallery-box02.animation {
  animation: fade 0.4s 0s linear forwards;
}

@keyframes expenses-img01 {
  0% {
    left: 2%;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}
div.expenses-img01 {
  opacity: 0;
}
div.expenses-img01.animation {
  animation: expenses-img01 0.4s 0.2s ease forwards;
}

@keyframes expenses-img06_sp {
  0% {
    transform: translate(0, -5%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes expenses-img06_pc {
  0% {
    bottom: 7px;
    opacity: 0;
  }
  100% {
    bottom: -5px;
    opacity: 1;
  }
}
div.expenses-img06 {
  opacity: 0;
}
div.expenses-img06.animation {
  animation: expenses-img06_sp 0.4s 0.2s ease forwards;
}
@media screen and (min-width: 768px) {
  div.expenses-img06.animation {
    animation: expenses-img06_pc 0.4s 0.2s ease forwards;
  }
}

@keyframes living-img03 {
  0% {
    transform: translate(10%, -100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, -100%);
    opacity: 1;
  }
}
div.living-img03 {
  opacity: 0;
}
div.living-img03.animation {
  animation: living-img03 0.4s 0.2s ease forwards;
}

@keyframes simulation-img {
  0% {
    transform: translate(0, -10%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
div.simulation-area div.simulation-box p {
  opacity: 0;
}
div.simulation-area div.simulation-box div.simulation-img {
  opacity: 0;
}
div.simulation-area a {
  opacity: 0;
}
div.simulation-area.animation div.simulation-box p {
  animation: fade 0.4s 0s linear forwards;
}
div.simulation-area.animation div.simulation-box div.simulation-img {
  animation: simulation-img 0.4s 0.3s ease forwards;
}
div.simulation-area.animation a {
  animation: fade 0.4s 0s linear forwards;
}/*# sourceMappingURL=animation.css.map */