@charset "UTF-8";
/* CSS Document */
@media screen and (max-width: 767px) {
	.date .dateline01 {
    width: 0;
    height:5.128vw;
    background: #DEFC6F;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left: 1.025vw;
    bottom: 2.051vw;
  }
  .date .dateline01.active {
    width: 80vw;
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 2s;
	transition-delay: 0.2s;
  }
  #result .date .dateline02 {
    width: 0;
    height: 5.128vw;
    ;
    background: #DEFC6F;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left: 16.92vw;
    bottom: 2.051vw;
  }
  #result .date .dateline02.active {
    width: 60.25vw;
    transition: 0.1s ease-in-out 0.4s;
  }
  #judge h4 .judgeline01, #judge h4 .judgeline02 {
    width: 0;
    height: 2.051vw;
    background: #DEFC6F;
    z-index: -99999;
    position: absolute;
    left: 0;
    bottom: 1.025vw;
  }
  #judge h4 .judgeline01.active {
    width: 33.07vw;
    transition: 0.3s;
    transition-property: width;
    transition-delay: 0.3s;
    transition-timing-function: ease-in-out;
    /* transition: width 0.4s ease-in-out 0.6s;*/
  }
  #judge h4 .judgeline02.active {
    width: 33.07vw;
    transition: 0.3s;
    transition-property: width;
    transition-delay: 0.9s;
    transition-timing-function: ease-in-out;
    /*transition: width 0.4s ease-in-out 10s;*/
  }
  img.box01_txt {
    /*
transform:rotate(3.0002deg);
transition: 0.05s ease-in-out;
*/
    transform: scale(1.6);
    transition: 0.3s ease-in-out;
    opacity: 0;
  }
  img.box01_txt.active {
    /*
transform:rotate(0);
		*/
    transform: scale(1);
    opacity: 100;
  }
  .bomb {}
  .bomb.active {
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;
  }
  @keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
  }
  #mc img.fukidashi.active {
    animation: yure 3s infinite;
    transition-timing-function: ease-in-out;
    transition-delay: 3s;
  }
  @keyframes yure {
    0% {
      transform: rotateZ(0deg)
    }
    25% {
      transform: rotateZ(12deg)
    }
    50% {
      transform: rotateZ(0deg)
    }
    75% {
      transform: rotateZ(12deg)
    }
    100% {
      transform: rotateZ(0deg)
    }
  }
	
}
@media screen and (min-width: 768px) {
  .date .dateline01 {
    width: 0;
    height: 20px;
    background: #DEFC6F;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left: 4px;
    bottom: 8px;
  }
  .date .dateline01.active {
    width: 312px;
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 0.4s;
  }
  #result .date .dateline02 {
    width: 0;
    height: 20px;
    ;
    background: #DEFC6F;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left: 66px;
    bottom: 8px;
  }
  #result .date .dateline02.active {
    width: 235px;
    transition: 0.1s ease-in-out 0.4s;
  }
  #judge h4 .judgeline01, #judge h4 .judgeline02 {
    width: 0;
    height: 8px;
    background: #DEFC6F;
    z-index: -99999;
    position: absolute;
    left: 0;
    bottom: 4px;
  }
  #judge h4 .judgeline01.active {
    width: 129px;
    transition: 0.3s;
    transition-property: width;
    transition-delay: 0.3s;
    transition-timing-function: ease-in-out;
    /* transition: width 0.4s ease-in-out 0.6s;*/
  }
  #judge h4 .judgeline02.active {
    width: 129px;
    transition: 0.3s;
    transition-property: width;
    transition-delay: 0.9s;
    transition-timing-function: ease-in-out;
    /*transition: width 0.4s ease-in-out 10s;*/
  }
  img.box01_txt {
    /*
transform:rotate(3.0002deg);
transition: 0.05s ease-in-out;
*/
    transform: scale(1.6);
    transition: 0.3s ease-in-out;
    opacity: 0;
  }
  img.box01_txt.active {
    /*
transform:rotate(0);
		*/
    transform: scale(1);
    opacity: 100;
  }
  .bomb {}
  .bomb.active {
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;
  }
  @keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
  }
  #mc img.fukidashi.active {
    animation: yure 3s infinite;
    transition-timing-function: ease-in-out;
    transition-delay: 3s;
  }
  @keyframes yure {
    0% {
      transform: rotateZ(0deg)
    }
    25% {
      transform: rotateZ(12deg)
    }
    50% {
      transform: rotateZ(0deg)
    }
    75% {
      transform: rotateZ(12deg)
    }
    100% {
      transform: rotateZ(0deg)
    }
  }

	
}
	.scroll_up {
  transition: 0.5s ease-in-out;
  transform: translateY(17px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}