@charset "utf-8";



/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.illustration_box {
  opacity: 0;
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/*==================================================
じわっと順番
===================================*/
.fadeUp1 {
  animation-name: jiwariAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}


@keyframes jiwariAnime{
  from {
    filter: jiwari(10px);
    transform: scale(1.02);
    opacity: 0;
  }

  to {
    filter: jiwari(0);
    transform: scale(1);
    opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.jiwariTrigger {
  opacity: 0;
}


/*========= レイアウトのためのCSS ===============*/
.jiwaribox {
  width: 220px;
  padding: 20px;
  background: #666;
  color: #fff;
}


/*==================================================
ラインマーカー
===================================*/

/*マーカーの高さ*/
.marker.scroll-in {
  background-position: -100% 1.0rem;
}
.chishiki.scroll-in {
  background-position: -100% 2.2rem;
}
.seiko.scroll-in {
  background-position: -100% 2.1rem;
}
.marker {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,227,209) 10%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,227,209) 10%);
  background-image: linear-gradient(left, transparent 50%, rgb(255,227,209) 10%);
  background-repeat: repeat-x;
  background-size: 200% .7em;
  background-position: 0 .8em;
  transition: all 2.5s ease;
  font-weight: bold;
}
.line_pink {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,227,209) 10%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,227,209) 10%);
  background-image: linear-gradient(left, transparent 50%, rgb(255,227,209) 10%);
}