@charset "utf-8";
/* marker */
.markerpink {
  font-weight:bold;
  background: -webkit-linear-gradient(left, rgba(255,179,169,1) 40%, transparent 60%);
  background: -moz-linear-gradient(left, rgba(255,179,169,1) 40%, transparent 60%);
  background: linear-gradient(left, rgba(255,179,169,1) 40%, transparent 60%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
  background-position: 100% .7em;
  transition: 2s;
padding: 3px;
}
.markerpink.is-active{
  background-position: 0% .7em;
}

.check-mark {
  opacity : 0;
  display: inline-block;
  width: 20px;
  height: 10px;
  border-left: 3px solid #e81010;
  border-bottom: 3px solid #e81010;
  transform: rotate(-45deg);
}

.check-mark.scrollin {
  opacity : 1;
  transition-property: opacity,transform;
  /*transform: rotateY(360deg);*/
  transition: all .8s cubic-bezier(.77,0,.175,1);
  transition-timing-function: cubic-bezier(.77,0,.175,1);
  display: inline-block;
}

.check-mark2 {
  opacity : 0;
  display: inline-block;
  width: 20px;
  height: 10px;
  border-left: 3px solid #e81010;
  border-bottom: 3px solid #e81010;
  transform: rotate(-45deg);
}

.check-mark2.scrollin {
  opacity : 1;
  transition-property: opacity,transform;
  /*transform: rotateY(360deg);*/
  transition: all 1.2s cubic-bezier(.77,0,.175,1);
  transition-timing-function: cubic-bezier(.77,0,.175,1);
  display: inline-block;
}

.check-mark3 {
  opacity : 0;
  display: inline-block;
  width: 20px;
  height: 10px;
  border-left: 3px solid #e81010;
  border-bottom: 3px solid #e81010;
  transform: rotate(-45deg);
}

.check-mark3.scrollin {
  opacity : 1;
  transition-property: opacity,transform;
  /*transform: rotateY(360deg);*/
  transition: all 1.6s cubic-bezier(.77,0,.175,1);
  transition-timing-function: cubic-bezier(.77,0,.175,1);
  display: inline-block;
}

.check-mark4 {
  opacity : 0;
  display: inline-block;
  width: 20px;
  height: 10px;
  border-left: 3px solid #e81010;
  border-bottom: 3px solid #e81010;
  transform: rotate(-45deg);
}

.check-mark4.scrollin {
  opacity : 1;
  transition-property: opacity,transform;
  /*transform: rotateY(360deg);*/
  transition: all 2s cubic-bezier(.77,0,.175,1);
  transition-timing-function: cubic-bezier(.77,0,.175,1);
  display: inline-block;
}



.slideinL {
opacity : 0;
transform : translate(-50px, 0);
transition:all 0.5s;
transition-delay: 0.5s;
}

.slideinL.scrollin {
opacity : 1;
transform : translate(0, 0);
}


.rotateL {
transform-origin:left top;
opacity : 0;
transform: rotate(30deg);
transition:all 1s;
}
.rotateL.scrollin {
opacity : 1;
transform : rotate(0deg);
}


/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e81010;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

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