@charset "UTF-8";
/* CSS Document */
@media screen and (max-width: 767px) {
  .date .dateline01 {
    width: 0;
    height: 23.07vw;/*90px;*/
    background:#F7E736;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left: 1.025vw;/*4px*/
    bottom:3.076vw;/*12px;*/
  }
  .date .dateline01.active {
    width: 80vw;/*312px;*/
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 0.4s;
  }
  #result .date .dateline02 {
    width: 0;
    height: 5.128vw;/*20px;*/
    background:#F7E736;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left: 16.92vw;/*66px*/
    bottom: 2.307vw;/*8px;*/
  }
  #result .date .dateline02.active {
    width: 60.25vw;/*235px*/
    transition: 0.1s ease-in-out 0.4s;
  }

  #judgeWrap h4 .judgeline01,
  #judgeWrap h4 .judgeline02 {
    width: 0;
    height: 5.641vw;/*22px;*/
    background:#F7E736;
    z-index: -99999;
    position: absolute;
    left: 0;
    bottom: 1.025vw;/*4px;*/
  }
  #judgeWrap h4 .judgeline01.active,
  #judgeWrap h4 .judgeline02.active{
    width: 33.07vw;/*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;*/
  }
  #judgeWrap dt .judgeline01_01,
  #judgeWrap dt .judgeline01_02,
  #judgeWrap dt .judgeline01_03{
    width: 0;
    height: 2.564vw;/*10px;*/
    background:#F7E736;
    z-index: -99999;
    position: absolute;
    left: 3.076vw;/*12px;*/
    bottom: 1.025vw;/*4px;*/
  }
	
  #judgeWrap dt .judgeline01_01.active,
  #judgeWrap dt .judgeline01_02.active,
  #judgeWrap dt .judgeline01_03.active{
    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;*/
  }
  #judgeWrap dt .judgeline01_01.active{
    width: 43.58vw;/*170px;*/
  }	
  #judgeWrap dt .judgeline01_02.active{
    width: 69.23vw;/*270px;*/
  }
  #judgeWrap dt .judgeline01_03.active{
    width: 34.87vw;/*136px;*/
  }	
  #judgeWrap dt .judgeline01_01.active{
    width: 43.58vw;/*170px;*/
  }	
  #judgeWrap dt .judgeline01_02.active{
    width: 69.23vw;/*270px;*/
  }
  #judgeWrap dt .judgeline01_03.active{
    width: 34.87vw;/*136px;*/
  }	
  #result .date .dateline03 {
    width: 0;
    height: 5.128vw;/*20px;*/
    background:#F7E736;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left:4.102vw;/*16px;*/
    top: 2.564vw;/*10px;*/
  }
  #result .date .dateline03.active {
    width: 70.25vw;/*274px;*/
    transition: 0.1s ease-in-out 0.4s;
  }	
 .date .dateline04 {
    width: 0;
    height: 2.051vw;/*8px;*/
    background:#F7E736;
    transform: rotate(-5deg);
    position: absolute;
    left: 0.256vw;/*1px;*/
    top:4.102vw;/*16px;*/
  }
  .date .dateline04.active {
	z-index: -1!important;
    width: 25.12vw;/*98px;*/
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 0.4s;
  }	
 .date .dateline05 {
    width: 0;
    height: 5.128vw;/*20px;*/
    background:#F7E736;
    transform: rotate(-5deg);
    position: absolute;
    left: -1.538vw;/*-6px;*/
    top:0px;
  }
  .date .dateline05.active {
	z-index: -1!important;
    width: 72.82vw;/*284px;*/
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 0.4s;
  }
 .date .dateline06 {
    width: 0;
    height: 5.128vw;/*20px;*/
    background:#F7E736;
    transform: rotate(-5deg);
    position: absolute;
    left: -1.538vw;/*-6px;*/
    top:0px;
  }
  .date .dateline06.active {
	z-index: -1!important;
    width: 72.82vw;/*284px;*/
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 0.4s;
  }
	.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);
    }
  }
  #mcWrap 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: 90px;
    background:#F7E736;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left: 4px;
    bottom:12px;
  }
  .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:#F7E736;
    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;
  }

  #judgeWrap h4 .judgeline01,
  #judgeWrap h4 .judgeline02 {
    width: 0;
    height: 22px;
    background:#F7E736;
    z-index: -99999;
    position: absolute;
    left: 0;
    bottom: 4px;
  }
  #judgeWrap h4 .judgeline01.active,
  #judgeWrap h4 .judgeline02.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;*/
  }
  #judgeWrap dt .judgeline01_01,
  #judgeWrap dt .judgeline01_02,
  #judgeWrap dt .judgeline01_03{
    width: 0;
    height: 10px;
    background:#F7E736;
    z-index: -99999;
    position: absolute;
    left: 12px;
    bottom: 4px;
  }
  #judgeWrap dt .judgeline01_01.active,
  #judgeWrap dt .judgeline01_02.active,
  #judgeWrap dt .judgeline01_03.active{
    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;*/
  }
  #judgeWrap dt .judgeline01_01.active{
    width: 170px;
  }	
  #judgeWrap dt .judgeline01_02.active{
    width: 270px;
  }
  #judgeWrap dt .judgeline01_03.active{
    width: 136px;
  }		
	/*
	  #result .date .dateline02 {
    width: 0;
    height: 20px;
    ;
    background:#F7E736;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left: 66px;
	}*/
  #result .date .dateline03 {
    width: 0;
    height: 20px;
    background:#F7E736;
    transform: rotate(-5deg);
    z-index: -99999;
    position: absolute;
    left:16px;
    top: 10px;
  }
  #result .date .dateline03.active {
    width: 274px;
    transition: 0.1s ease-in-out 0.4s;
  }	
 .date .dateline04 {
    width: 0;
    height: 8px;
    background:#F7E736;
    transform: rotate(-5deg);
    position: absolute;
    left: 1px;
    top:16px;
  }
  .date .dateline04.active {
	z-index: -1!important;
    width: 98px;
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 0.4s;
  }	
 .date .dateline05 {
    width: 0;
    height: 20px;
    background:#F7E736;
    transform: rotate(-5deg);
    position: absolute;
    left: -6px;
    top:0px;
  }
  .date .dateline05.active {
	z-index: -1!important;
    width: 284px;
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 0.4s;
  }
 .date .dateline06 {
    width: 0;
    height: 20px;
    background:#F7E736;
    transform: rotate(-5deg);
    position: absolute;
    left: -6px;
    top:0px;
  }
  .date .dateline06.active {
	z-index: -1!important;
    width: 284px;
    /*transition-delay: 0.2s;*/
    transition: 0.1s ease-in-out 0.4s;
  }
	.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);
    }
  }
  #mcWrap 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;
}