@import "fonts.css";
/*========================================================*/
/*================ questionnaire page ====================*/
/*========================================================*/
.num-font{
  font-family: "Hiragino w3";
}
.num-font-bold{
  font-family: "Hiragino w8";
}
.enquete__box .enquete__img
{
  position: relative;
}
.enquete__box .enquete__img .num
{
  position: absolute;
}
.enquete__box .enquete__img .num.left
{
  left: 0px;
  font-size: 37px;
  color: #1da1c4;
  font-weight: bold;
  bottom: -2px;
}
.enquete__box .enquete__img .num.right
{
  right: 25px;
  font-size: 37px;
  color: #e0a14b;
  font-weight: bold;
  bottom: -2px;
}

.progress
{
  display: inline-block;
  width: 100%;
  border-left: 3px solid #18a299;
  padding-top: 5px;
  padding-bottom: 5px;
}
.progress .progress-bar
{
  height: 22px;
  line-height: 20px;
  background: #18a299;
  color: #fff;
  margin-bottom: 6px;
  text-align: center;
  font-size: 11px;
  transition: width 1.2s ease-in-out;
  width: 0;
  overflow: hidden;
  position: relative;
}
.progress .progress-bar.small
{
  overflow: unset;
}
.progress .progress-bar:last-child
{
  margin-bottom: 0;
}
.progress .progress-bar .txt
{
  position: absolute;
  left: 100%;
  top: 1px;
  width: 400px;
  text-align: left;
  padding-left: 10px;
}
.progress-bg3 .progress-bar .txt
{
  color: #f7aa48;
}
.progress-bg1 .progress-bar .txt
{
  color: #18a299;
}
.progress-bg2 .progress-bar .txt
{
  color: #3ca0c3;
}
.progress-bg3 .progress-bar .txt
{
  color: #f7aa48;
}
.progress.progress-bg1
{
  border-left: 3px solid #18a299;
}
.progress.progress-bg2
{
  border-left: 3px solid #3ca0c3;
}
.progress.progress-bg3
{
  border-left: 3px solid #f7aa48;
}
.progress.progress-bg1 .progress-bar{
  background: #18a299;
}
.progress.progress-bg2 .progress-bar{
  background: #3ca0c3;
}
.progress.progress-bg3 .progress-bar{
  background: #f7aa48;
}
.progress .progress-bar .num-font{
  margin-left: 10px;
}
.progress.large .progress-bar
{
  height: 56px;
  line-height: 56px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.progress.large .progress-bar.f-small{
  font-size: 15px;
}
.progress.large
{
  padding-top: 10px;
  padding-bottom: 10px;
  border-left: 6px solid #3ca0c3;
}
.progress.progress-bg3.large
{
  border-left: 6px solid #f7aa48;
}
.progress.large .progress-bar:last-child
{
  margin-bottom: 0px !important;
}
.progress .progress-bar .icon1
{
  width: 63px;
  height: 42px;
  position: relative;
  right: 10px;
  top: 6px;
}
.progress.progress-bg3 .progress-bar .icon1
{
  width: 28px;
  height: 29px;
  top: 15px;
}
.progress .progress-bar .icon2
{
  width: 43px;
  height: 45px;
  position: relative;
  right: 10px;
  top: 6px;
}
.progress.large .progress-bar .num-font
{
  font-family: "Hiragino w8";
  font-size: 30px;
}
.enquete__img.img16
{
  height: auto !important;
}
@media(max-width: 779px){
  .enquete__box .enquete__img .num.left
  {
    font-size: 28px;
  }
  .enquete__box .enquete__img .num.right
  {
    right: 18px;
    font-size: 28px;
  }
  .progress .progress-bar
  {
    height: 18px;
    font-size: 9px;
    line-height: 17px;
    margin-bottom: 5px;
  }
  .progress .progress-bar .txt
  {
    padding-left: 5px;
  }
  .progress .progress-bar .txt .num-font
  {
    margin-left: 5px;
  }
  .progress.large
  {
    padding-top: 8px;
    padding-bottom: 8px;
    border-left: 4px solid #3ca0c3;
  }
  .progress.progress-bg3.large
  {
    border-left: 4px solid #f7aa48; 
  }
  .progress.large .progress-bar
  {
    height: 35px;
    line-height: 35px;
    font-size: 13px;
    margin-bottom: 9px;
  }
.progress.large .progress-bar.f-small{
  font-size: 10px;
}
  .progress .progress-bar .icon1
  {
    width: 40px;
    height: 27px;
    top: 3px;
    right: 5px;
  }
  .progress.progress-bg3 .progress-bar .icon1
  {
    top: 10px;
    width: 18px;
    height: 19px;
  }
  .progress .progress-bar .icon2
  {
    width: 26px;
    height: 28px;
    top: 3px;
    right: 5px;
  }
  .progress.large .progress-bar .num-font
  {
    font-size: 18px;
    margin-left: 5px;
  }
  .progress .progress-bar .txt
  {
    width: 200px;
  }
}
/*animation svg ============================*/
@-webkit-keyframes ani-svg-color-1 {
  0% {fill: transparent;}
  100% {fill: #f7aa48;}
}
@keyframes ani-svg-color-1 {
  0% {fill: transparent;}
  100% {fill: #f7aa48;}
}
@-webkit-keyframes ani-svg-color-2 {
  0% {fill: transparent;}
  100% {fill: #18a299;}
}
@keyframes ani-svg-color-2 {
  0% {fill: transparent;}
  100% {fill: #18a299;}
}
@-webkit-keyframes ani-svg-color-3 {
  0% {fill: transparent;}
  100% {fill: #3ca0c3;}
}
@keyframes ani-svg-color-3 {
  0% {fill: transparent;}
  100% {fill: #3ca0c3;}
}
@-webkit-keyframes ani-svg-color-4 {
  0% {fill: transparent;}
  100% {fill: #8e8e8e;}
}
@keyframes ani-svg-color-4 {
  0% {fill: transparent;}
  100% {fill: #8e8e8e;}
}
@-webkit-keyframes ani-svg-color-5 {
  0% {fill: transparent;}
  100% {fill: #3aacd3;}
}
@keyframes ani-svg-color-5 {
  0% {fill: transparent;}
  100% {fill: #3aacd3;}
}
svg .svg-fade-1,
svg .svg-fade-2,
svg .svg-fade-3 {
  fill: transparent;
  stroke: transparent;
}
/* ani-svg03 ========================*/
svg.ani-svg03
{
  width: 100%;
  height: 100%;
  display: none;
}
svg.ani-svg03.active .svg-color-1 {
  -webkit-animation: ani-svg-color-1 0.5s ease-out 0.5s both;
          animation: ani-svg-color-1 0.5s ease-out 0.5s both;
}
svg.ani-svg03.active .svg-color-2 {
  -webkit-animation: ani-svg-color-1 0.5s ease-out 0.7s both;
          animation: ani-svg-color-1 0.5s ease-out 0.7s both;
}
svg.ani-svg03.active .svg-color-3 {
  -webkit-animation: ani-svg-color-1 0.5s ease-out 0.9s both;
          animation: ani-svg-color-1 0.5s ease-out 0.9s both;
}
svg.ani-svg03.active .svg-color-4 {
  -webkit-animation: ani-svg-color-1 0.5s ease-out 1s both;
          animation: ani-svg-color-1 0.5s ease-out 1s both;
}
svg.ani-svg03.active .svg-color-5 {
  -webkit-animation: ani-svg-color-1 0.5s ease-out 1.2s both;
          animation: ani-svg-color-1 0.5s ease-out 1.2s both;
}
svg.ani-svg03.active .svg-color-6 {
  -webkit-animation: ani-svg-color-2 0.5s ease-out 1.4s both;
          animation: ani-svg-color-2 0.5s ease-out 1.4s both;
}
svg.ani-svg03.active .svg-color-7 {
  -webkit-animation: ani-svg-color-2 0.5s ease-out 1.4s both;
          animation: ani-svg-color-2 0.5s ease-out 1.4s both;
}
@-webkit-keyframes ani-svg-line-1 {
  0% {stroke: transparent;}
  100% {stroke: #fff;}
}
@keyframes ani-svg-line-1 {
  0% {stroke: transparent;}
  100% {stroke: #fff;}
}
@-webkit-keyframes ani-svg-fade-1 {
  0% {fill: transparent;}
  100% {fill: #fff;}
}
@keyframes ani-svg-fade-1 {
  0% {fill: transparent;}
  100% {fill: #fff;}
}
@-webkit-keyframes ani-svg-fade-2 {
  0% {fill: transparent;}
  100% {fill: #3aacd3}
}
@keyframes ani-svg-fade-2 {
  0% {fill: transparent;}
  100% {fill: #3aacd3}
}
@-webkit-keyframes ani-svg-fade-3 {
  0% {fill: transparent;}
  100% {fill: #18a299;}
}
@keyframes ani-svg-fade-3 {
  0% {fill: transparent;}
  100% {fill: #18a299;}
}
@-webkit-keyframes ani-svg-fade-4 {
  0% {fill: transparent;}
  100% {fill: #8e8e8e;}
}
@keyframes ani-svg-fade-4 {
  0% {fill: transparent;}
  100% {fill: #8e8e8e;}
}

svg.ani-svg03.active .svg-fade-1 {
  -webkit-animation: ani-svg-fade-1 0s linear 1.8s both;
          animation: ani-svg-fade-1 0s linear 1.8s both;
}
svg.ani-svg03.active .svg-fade-3 {
  -webkit-animation: ani-svg-fade-3 0s linear 1.8s both;
          animation: ani-svg-fade-3 0s linear 1.8s both;
}
svg.ani-svg03.active .svg-line-1 {
  -webkit-animation: ani-svg-line-1 0s linear 1.8s both;
          animation: ani-svg-line-1 0s linear 1.8s both;
}
/* end ani-svg03 ========================*/
/* ani-svg08 ========================*/
svg.ani-svg08
{
  width: 100%;
  height: 100%;
  display: none;
}
@-webkit-keyframes ani-svg08-color-1 {
  0% {fill: transparent;}
  100% {fill: #3ca0c3;}
}
@keyframes ani-svg08-color-1 {
  0% {fill: transparent;}
  100% {fill: #3ca0c3;}
}
@-webkit-keyframes ani-svg08-color-2 {
  0% {fill: transparent;}
  100% {fill: #8e8e8e;}
}
@keyframes ani-svg08-color-2 {
  0% {fill: transparent;}
  100% {fill: #8e8e8e;}
}
svg.ani-svg08.active .svg-color-1 {
  -webkit-animation: ani-svg08-color-1 0.5s ease-out 0.5s both;
          animation: ani-svg08-color-1 0.5s ease-out 0.5s both;
}
svg.ani-svg08.active .svg-color-1 {
  -webkit-animation: ani-svg08-color-1 0.5s ease-out 0.7s both;
          animation: ani-svg08-color-1 0.5s ease-out 0.7s both;
}
svg.ani-svg08.active .svg-color-1 {
  -webkit-animation: ani-svg08-color-1 0.5s ease-out 0.9s both;
          animation: ani-svg08-color-1 0.5s ease-out 0.9s both;
}
svg.ani-svg08.active .svg-color-1 {
  -webkit-animation: ani-svg08-color-1 0.5s ease-out 1.1s both;
          animation: ani-svg08-color-1 0.5s ease-out 1.1s both;
}
svg.ani-svg08.active .svg-color-2 {
  -webkit-animation: ani-svg08-color-2 0.5s ease-out 1.3s both;
          animation: ani-svg08-color-2 0.5s ease-out 1.3s both;
}
svg.ani-svg08.active .svg-color-2 {
  -webkit-animation: ani-svg08-color-2 0.5s ease-out 1.5s both;
          animation: ani-svg08-color-2 0.5s ease-out 1.5s both;
}
svg.ani-svg08.active .svg-color-2 {
  -webkit-animation: ani-svg08-color-2 0.5s ease-out 1.7s both;
          animation: ani-svg08-color-2 0.5s ease-out 1.7s both;
}
svg.ani-svg08.active .svg-color-2 {
  -webkit-animation: ani-svg08-color-2 0.5s ease-out 1.9s both;
          animation: ani-svg08-color-2 0.5s ease-out 1.9s both;
}
svg.ani-svg08.active .svg-fade-1 {
  -webkit-animation: ani-svg-fade-1 0s linear 2.1s both;
          animation: ani-svg-fade-1 0s linear 2.1s both;
}
svg .svg-ani-move
{
  opacity: 0;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
svg.ani-svg08.active .svg-ani-move
{
  animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -webkit-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -moz-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -o-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -ms-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  animation-fill-mode: forwards;
}
svg.ani-svg08.active .svg-ani-move path
{
  animation: aniMove 2.5s ease 3.2s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes aniMove {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(7px, 0px);
  }
  75% {
    transform: translate(-7px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes aniMove {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(7px, 0px);
  }
  75% {
    transform: translate(-7px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
/* end ani-svg08 ========================*/
/* ani-svg09 ========================*/
svg.ani-svg09
{
  width: 100%;
  height: 100%;
  display: none;
}
svg.ani-svg09.active .svg-color-1 {
  -webkit-animation: ani-svg-color-1 0.5s ease-out 0.5s both;
          animation: ani-svg-color-1 0.5s ease-out 0.5s both;
}
svg.ani-svg09.active .svg-color-2 {
  -webkit-animation: ani-svg-color-2 0.5s ease-out 0.7s both;
          animation: ani-svg-color-2 0.5s ease-out 0.7s both;
}
svg.ani-svg09.active .svg-color-3 {
  -webkit-animation: ani-svg-color-2 0.5s ease-out 0.9s both;
          animation: ani-svg-color-2 0.5s ease-out 0.9s both;
}
svg.ani-svg09.active .svg-color-4 {
  -webkit-animation: ani-svg-color-4 0.5s ease-out 1s both;
          animation: ani-svg-color-4 0.5s ease-out 1s both;
}
svg.ani-svg09.active .svg-color-5 {
  -webkit-animation: ani-svg-color-5 0.5s ease-out 1.2s both;
          animation: ani-svg-color-5 0.5s ease-out 1.2s both;
}
svg.ani-svg09.active .svg-fade-1 {
  -webkit-animation: ani-svg-fade-1 0s linear 1.8s both;
          animation: ani-svg-fade-1 0s linear 1.8s both;
}
svg.ani-svg09.active .svg-fade-2 {
  -webkit-animation: ani-svg-fade-2 0s linear 1.8s both;
          animation: ani-svg-fade-2 0s linear 1.8s both;
}
svg.ani-svg09.active .svg-fade-3 {
  -webkit-animation: ani-svg-fade-3 0s linear 1.8s both;
          animation: ani-svg-fade-3 0s linear 1.8s both;
}
svg.ani-svg09.active .svg-polyline-fade-1 {
  -webkit-animation: ani-svg-polyline-fade-1 0s linear 1.8s both;
          animation: ani-svg-polyline-fade-1 0s linear 1.8s both;
}
svg .svg-polyline-fade-1
{
  stroke: transparent; 
}
@-webkit-keyframes ani-svg-polyline-fade-1 {
  0% {stroke: transparent;}
  100% {stroke: #3ca0c3;}
}
@keyframes ani-svg-polyline-fade-1 {
  0% {stroke: transparent;}
  100% {stroke: #3ca0c3;}
}
svg.ani-svg09.active .svg-ani-move
{
  animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -webkit-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -moz-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -o-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -ms-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  animation-fill-mode: forwards;
}
svg.ani-svg09.active .svg-ani-move path
{
  animation: aniMove 2.5s ease 3.2s;
  animation-fill-mode: forwards;
}
/* end ani-svg09 ========================*/
/* ani-svg10 ========================*/
svg.ani-svg10
{
  width: 100%;
  height: 100%;
  display: none;
}
svg.ani-svg10.active .svg-color-1 {
  -webkit-animation: ani-svg-color-1 0.5s ease-out 0.5s both;
          animation: ani-svg-color-1 0.5s ease-out 0.5s both;
}
svg.ani-svg10.active .svg-color-2 {
  -webkit-animation: ani-svg-color-2 0.5s ease-out 0.7s both;
          animation: ani-svg-color-2 0.5s ease-out 0.7s both;
}
svg.ani-svg10.active .svg-color-3 {
  -webkit-animation: ani-svg-color-2 0.5s ease-out 0.9s both;
          animation: ani-svg-color-2 0.5s ease-out 0.9s both;
}
svg.ani-svg10.active .svg-color-4 {
  -webkit-animation: ani-svg-color-3 0.5s ease-out 1s both;
          animation: ani-svg-color-3 0.5s ease-out 1s both;
}
svg.ani-svg10.active .svg-color-5 {
  -webkit-animation: ani-svg-color-4 0.5s ease-out 1.2s both;
          animation: ani-svg-color-4 0.5s ease-out 1.2s both;
}
svg.ani-svg10.active .svg-color-6 {
  -webkit-animation: ani-svg-color-4 0.5s ease-out 1.4s both;
          animation: ani-svg-color-4 0.5s ease-out 1.4s both;
}
svg.ani-svg10.active .svg-color-7 {
  -webkit-animation: ani-svg-color-4 0.5s ease-out 1.6s both;
          animation: ani-svg-color-4 0.5s ease-out 1.6s both;
}
svg.ani-svg10.active .svg-fade-1 {
  -webkit-animation: ani-svg-fade-1 0s linear 1.8s both;
          animation: ani-svg-fade-1 0s linear 1.8s both;
}
svg.ani-svg10.active .svg-fade-2 {
  -webkit-animation: ani-svg-fade-2 0s linear 1.8s both;
          animation: ani-svg-fade-2 0s linear 1.8s both;
}
svg.ani-svg10.active .svg-fade-3 {
  -webkit-animation: ani-svg-fade-3 0s linear 1.8s both;
          animation: ani-svg-fade-3 0s linear 1.8s both;
}
svg.ani-svg10.active .svg-fade-4 {
  -webkit-animation: ani-svg-fade-4 0s linear 1.8s both;
          animation: ani-svg-fade-4 0s linear 1.8s both;
}
svg.ani-svg10.active .svg-img10-fade-1 {
  -webkit-animation: ani-svg-img10-fade-1 0s linear 1.8s both;
          animation: ani-svg-img10-fade-1 0s linear 1.8s both;
}
svg .svg-img10-fade-1
{
  stroke: transparent; 
}
@-webkit-keyframes ani-svg-img10-fade-1 {
  0% {stroke: transparent;}
  100% {stroke: #3ca0c3;}
}
@keyframes ani-svg-img10-fade-1 {
  0% {stroke: transparent;}
  100% {stroke: #3ca0c3;}
}
svg.ani-svg10.active .svg-img10-fade-2 {
  -webkit-animation: ani-svg-img10-fade-2 0s linear 1.8s both;
          animation: ani-svg-img10-fade-2 0s linear 1.8s both;
}
svg.ani-svg10.active .svg-polyline-fade-4 {
  -webkit-animation: ani-svg-polyline-fade-4 0s linear 1.8s both;
          animation: ani-svg-polyline-fade-4 0s linear 1.8s both;
}
svg .svg-img10-fade-2,
svg .svg-polyline-fade-4
{
  stroke: transparent; 
}
@-webkit-keyframes ani-svg-img10-fade-2 {
  0% {stroke: transparent;}
  100% {stroke: #f7aa48;}
}
@keyframes ani-svg-img10-fade-2 {
  0% {stroke: transparent;}
  100% {stroke: #f7aa48;}
}
@-webkit-keyframes ani-svg-polyline-fade-4 {
  0% {stroke: transparent;}
  100% {stroke: #8e8e8e;}
}
@keyframes ani-svg-polyline-fade-4 {
  0% {stroke: transparent;}
  100% {stroke: #8e8e8e;}
}
svg.ani-svg10.active .svg-ani-move
{
  animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -webkit-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -moz-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -o-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  -ms-animation: zoom-in-zoom-out-svg 1s ease 2.2s;
  animation-fill-mode: forwards;
}
svg.ani-svg10.active .svg-ani-move path
{
  animation: aniMove 2.5s ease 3.2s;
  animation-fill-mode: forwards;
}
/* end ani-svg10 ========================*/
.enquete__img.img11,
.enquete__img.img13
{
  position: relative;
}
.img11-num
{
  position: absolute;
  color: #fff;
  font-size: 22px;
  top: 40px;
}
.img11-num.num1{
  left: 125px;
}
.img11-num.num2{
  left: 385px;
}
.img11-num.num3{
  right: 54px;
}
.img13-num
{
  position: absolute;
  color: #fff;
  font-size: 38px;
  bottom: -3px;
}
.img13-num.large
{
  font-size: 50px;
  top: 213px;
  bottom: unset;
}
.img13-num.num1{
  left: 260px;
  color: #3aacd3;
}
.img13-num.num2{
  left: 561px;
  color: #f7aa48;
}
.img13-num.num3
{
  left: 13px;
  color: #3ca0c3;
}
.img13-num.num4
{
  left: 218px;
  color: #f7aa48;
}
.img13-num.num5
{
  left: 407px;
  color: #8e8e8e;
}
.img13-num.num6
{
  right: 246px;
  color: #18a299;
}
.img13-num.num7
{
  right: 69px;
  color: #3ca0c3;
}
@media(max-width: 779px){
  .img11-num
  {
    font-size: 10px;
    top: 19px;
  }
  .img11-num.num1{
    left: 59px;
  }
  .img11-num.num2{
    left: 180px;
  }
  .img11-num.num3{
    right: 26px;
  }
  .img13-num
  {
    font-size: 16px;
    bottom: 0px;
  }
  .img13-num.large
  {
    font-size: 18px;
    top: 71px;
  }
  .img13-num.num1
  {
    left: 85px;
  }
  .img13-num.num2
  {
    left: 185px;
  }
  .img13-num.num3
  {
    left: 1px;
  }
  .img13-num.num4
  {
    left: 68px;
  }
  .img13-num.num5 {
    left: 131px;
  }
  .img13-num.num6 {
    right: 94px;
  }
  .img13-num.num7 {
    right: 30px;
  }
}
.enquete__img.img14.active img {
  width: 100%;
  animation: zoom-in-zoom-out 3s ease;
}

@-webkit-keyframes zoom-in-zoom-out {
  0% {
    transform: scale(0, 0);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(0, 0);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
/* map =========================================*/
.enquete-map .group-province
{
  display: none;
}
.enquete-map svg 
{
  display: none;
  width: 100%;
  animation: zoom-in-zoom-out-svg 2s ease;
}
.enquete-map svg.active {
  display: block;
}
.enquete-map .group-province
{
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: #fff;
}
@-webkit-keyframes zoom-in-zoom-out-svg {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes zoom-in-zoom-out-svg {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* end map =========================================*/
/* uyeno group =========================================*/
.enquete-uyeno-group .uyeno-group
{
  display: none;
}
.enquete-uyeno-group svg 
{
  display: none;
  width: 100%;
  animation: zoom-in-zoom-out-svg 2s ease;
}
.enquete-uyeno-group svg.active {
  display: block;
}
.enquete-uyeno-group .uyeno-group
{
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: #fff;
}
@-webkit-keyframes zoom-in-zoom-out-svg {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes zoom-in-zoom-out-svg {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* end uyeno group =========================================*/
/*========================================================*/
/*============== end questionnaire page ====================*/
/*========================================================*/
/*========================================================*/
/*================= infographics page ====================*/
/*========================================================*/
@-webkit-keyframes fadeInImg {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInImg {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.infographics-page .fade-img 
{
  display: none;
  animation: fadeInImg ease-out 1.5s;
  -webkit-animation: fadeInImg ease-out 1.5s;
  -moz-animation: fadeInImg ease-out 1.5s;
  -o-animation: fadeInImg ease-out 1.5s;
  -ms-animation: fadeInImg ease-out 1.5s;
}
.infographics-page .fade-img.active {
  display: block;
}
.infographics-page .img-hdn
{
  opacity: 0;
}
.infographics-page .number__boxBottom.img01,
.infographics-page .number__boxBottom.img02,
.infographics-page .number__boxBottom.img03,
.infographics-page .number__boxBottom.img04,
.infographics-page .number__boxBottom.img05,
.infographics-page .number__boxBottom.img06,
.infographics-page .number__boxBottom.img07,
.infographics-page .number__boxBottom.img08,
.infographics-page .number__boxBottom.img09,
.infographics-page .number__boxBottom.img10,
.infographics-page .number__boxBottom.img12,
.infographics-page .number__boxBottom.img13
{
  position: relative;
}
.infographics-page .number__boxBottom.img01 .fade-img,
.infographics-page .number__boxBottom.img05 .fade-img,
.infographics-page .number__boxBottom.img06 .fade-img,
.infographics-page .number__boxBottom.img13 .fade-img,
.infographics-page .number__boxBottom.img02 svg,
.infographics-page .number__boxBottom.img03 svg,
.infographics-page .number__boxBottom.img04 svg,
.infographics-page .number__boxBottom.img08 svg,
.infographics-page .number__boxBottom.img09 svg,
.infographics-page .number__boxBottom.img10 svg,
.infographics-page .number__boxBottom.img12 svg
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.infographics-page svg{
  display: none;
}
.infographics-page svg.active {
  display: block;
}
.infographics-page .number02-group-cls,
.infographics-page .number03-group-cls,
.infographics-page .number04-group-cls
{
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: #fff;
}
.infographics-page .random-txt .rand
{
  display: none;
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}
.infographics-page .random-txt.active .rand
{
  display: block;
}
.number__boxBottom.img07 .mask
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #e6e6eb;
  display: block;
}
.number__boxBottom.img07.active .mask
{
  animation: aniPosition linear 1s;
  -webkit-animation: aniPosition linear 1s;
  -moz-animation: aniPosition linear 1s;
  -o-animation: aniPosition linear 1s;
  -ms-animation: aniPosition linear 1s;
  animation-fill-mode: forwards;
}
.number__boxBottom.img07.active img
{
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}
@-webkit-keyframes aniPosition {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
@keyframes aniPosition {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
/* number08 svg ========================*/
svg.number08-svg
{
  width: 100%;
  height: 100%;
  display: none;
}
svg.number08-svg.active .svg-color-1 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.5s both;
          animation: ani-svg-color-4 0.2s ease-out 0.5s both;
}
svg.number08-svg.active .svg-color-2 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.55s both;
          animation: ani-svg-color-4 0.2s ease-out 0.55s both;
}
svg.number08-svg.active .svg-color-3 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.6s both;
          animation: ani-svg-color-4 0.2s ease-out 0.6s both;
}
svg.number08-svg.active .svg-color-4 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.65s both;
          animation: ani-svg-color-4 0.2s ease-out 0.65s both;
}
svg.number08-svg.active .svg-color-5 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.7s both;
          animation: ani-svg-color-4 0.2s ease-out 0.7s both;
}
svg.number08-svg.active .svg-color-6 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.75s both;
          animation: ani-svg-color-4 0.2s ease-out 0.75s both;
}
svg.number08-svg.active .svg-color-7 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.8s both;
          animation: ani-svg-color-4 0.2s ease-out 0.8s both;
}
svg.number08-svg.active .svg-color-8 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.85s both;
          animation: ani-svg-color-4 0.2s ease-out 0.85s both;
}
svg.number08-svg.active .svg-color-9 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.9s both;
          animation: ani-svg-color-4 0.2s ease-out 0.9s both;
}
svg.number08-svg.active .svg-color-10 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 0.95s both;
          animation: ani-svg-color-4 0.2s ease-out 0.95s both;
}
svg.number08-svg.active .svg-color-11 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 1.0s both;
          animation: ani-svg-color-4 0.2s ease-out 1.0s both;
}
svg.number08-svg.active .svg-color-12 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 1.05s both;
          animation: ani-svg-color-4 0.2s ease-out 1.05s both;
}
svg.number08-svg.active .svg-color-13 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.1s both;
          animation: ani-svg-color-3 0.2s ease-out 1.1s both;
}
svg.number08-svg.active .svg-color-14 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.15s both;
          animation: ani-svg-color-3 0.2s ease-out 1.15s both;
}
svg.number08-svg.active .svg-color-15 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.2s both;
          animation: ani-svg-color-3 0.2s ease-out 1.2s both;
}
svg.number08-svg.active .svg-color-16 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.25s both;
          animation: ani-svg-color-3 0.2s ease-out 1.25s both;
}
svg.number08-svg.active .svg-color-17 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.3s both;
          animation: ani-svg-color-3 0.2s ease-out 1.3s both;
}
svg.number08-svg.active .svg-color-18 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.35s both;
          animation: ani-svg-color-3 0.2s ease-out 1.35s both;
}
svg.number08-svg.active .svg-color-19 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.4s both;
          animation: ani-svg-color-3 0.2s ease-out 1.4s both;
}
svg.number08-svg.active .svg-color-20 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.45s both;
          animation: ani-svg-color-3 0.2s ease-out 1.45s both;
}
/* end number08 svg ========================*/
/* number09 svg ========================*/
svg.number09-svg
{
  width: 100%;
  height: 100%;
  display: none;
}
svg.number09-svg.active .svg-color-1 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.5s both;
          animation: ani-svg-color-1 0.2s ease-out 0.5s both;
}
svg.number09-svg.active .svg-color-2 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.55s both;
          animation: ani-svg-color-1 0.2s ease-out 0.55s both;
}
svg.number09-svg.active .svg-color-3 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.6s both;
          animation: ani-svg-color-1 0.2s ease-out 0.6s both;
}
svg.number09-svg.active .svg-color-4 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.65s both;
          animation: ani-svg-color-1 0.2s ease-out 0.65s both;
}
svg.number09-svg.active .svg-color-5 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.7s both;
          animation: ani-svg-color-1 0.2s ease-out 0.7s both;
}
svg.number09-svg.active .svg-color-6 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.75s both;
          animation: ani-svg-color-1 0.2s ease-out 0.75s both;
}
svg.number09-svg.active .svg-color-7 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.8s both;
          animation: ani-svg-color-1 0.2s ease-out 0.8s both;
}
svg.number09-svg.active .svg-color-8 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.85s both;
          animation: ani-svg-color-1 0.2s ease-out 0.85s both;
}
svg.number09-svg.active .svg-color-9 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.9s both;
          animation: ani-svg-color-1 0.2s ease-out 0.9s both;
}
svg.number09-svg.active .svg-color-10 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 0.95s both;
          animation: ani-svg-color-1 0.2s ease-out 0.95s both;
}
svg.number09-svg.active .svg-color-11 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 1s both;
          animation: ani-svg-color-1 0.2s ease-out 1s both;
}
svg.number09-svg.active .svg-color-12 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 1.05s both;
          animation: ani-svg-color-1 0.2s ease-out 1.05s both;
}
svg.number09-svg.active .svg-color-13 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 1.1s both;
          animation: ani-svg-color-1 0.2s ease-out 1.1s both;
}
svg.number09-svg.active .svg-color-14 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 1.15s both;
          animation: ani-svg-color-1 0.2s ease-out 1.15s both;
}
svg.number09-svg.active .svg-color-15 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 1.2s both;
          animation: ani-svg-color-1 0.2s ease-out 1.2s both;
}
svg.number09-svg.active .svg-color-16 {
  -webkit-animation: ani-svg-color-1 0.2s ease-out 1.25s both;
          animation: ani-svg-color-1 0.2s ease-out 1.25s both;
}
svg.number09-svg.active .svg-color-17 {
  -webkit-animation: ani-svg-color-2 0.2s ease-out 1.3s both;
          animation: ani-svg-color-2 0.2s ease-out 1.3s both;
}
svg.number09-svg.active .svg-color-18 {
  -webkit-animation: ani-svg-color-2 0.2s ease-out 1.35s both;
          animation: ani-svg-color-2 0.2s ease-out 1.35s both;
}
svg.number09-svg.active .svg-color-19 {
  -webkit-animation: ani-svg-color-2 0.2s ease-out 1.4s both;
          animation: ani-svg-color-2 0.2s ease-out 1.4s both;
}
svg.number09-svg.active .number09-cls-4,
svg.number09-svg.active .number09-cls-5 {
  -webkit-animation: ani-svg-opacity 0s linear 1.8s both;
          animation: ani-svg-opacity 0s linear 1.8s both;
}
svg.number09-svg .number09-cls-4,
svg.number09-svg .number09-cls-5 {
  opacity: 1;
}
@-webkit-keyframes ani-svg-opacity {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes ani-svg-opacity {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/* end number09 svg ========================*/
/* number12 svg ========================*/
svg.number12-svg
{
  width: 100%;
  height: 100%;
  display: none;
}
svg.number12-svg.active .svg-color-1 {
  -webkit-animation: ani-svg-color-3 0.5s ease-out 0.5s both;
          animation: ani-svg-color-3 0.2s ease-out 0.5s both;
}
svg.number12-svg.active .svg-color-2 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.55s both;
          animation: ani-svg-color-3 0.2s ease-out 0.55s both;
}
svg.number12-svg.active .svg-color-3 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.6s both;
          animation: ani-svg-color-3 0.2s ease-out 0.6s both;
}
svg.number12-svg.active .svg-color-4 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.65s both;
          animation: ani-svg-color-3 0.2s ease-out 0.65s both;
}
svg.number12-svg.active .svg-color-5 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.7s both;
          animation: ani-svg-color-3 0.2s ease-out 0.7s both;
}
svg.number12-svg.active .svg-color-6 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.75s both;
          animation: ani-svg-color-3 0.2s ease-out 0.75s both;
}
svg.number12-svg.active .svg-color-7 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.8s both;
          animation: ani-svg-color-3 0.2s ease-out 0.8s both;
}
svg.number12-svg.active .svg-color-8 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.85s both;
          animation: ani-svg-color-3 0.2s ease-out 0.85s both;
}
svg.number12-svg.active .svg-color-9 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.9s both;
          animation: ani-svg-color-3 0.2s ease-out 0.9s both;
}
svg.number12-svg.active .svg-color-10 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 0.95s both;
          animation: ani-svg-color-3 0.2s ease-out 0.95s both;
}
svg.number12-svg.active .svg-color-11 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1s both;
          animation: ani-svg-color-3 0.2s ease-out 1s both;
}
svg.number12-svg.active .svg-color-12 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.05s both;
          animation: ani-svg-color-3 0.2s ease-out 1.05s both;
}
svg.number12-svg.active .svg-color-13 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.1s both;
          animation: ani-svg-color-3 0.2s ease-out 1.1s both;
}
svg.number12-svg.active .svg-color-14 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.15s both;
          animation: ani-svg-color-3 0.2s ease-out 1.15s both;
}
svg.number12-svg.active .svg-color-15 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.2s both;
          animation: ani-svg-color-3 0.2s ease-out 1.2s both;
}
svg.number12-svg.active .svg-color-16 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.25s both;
          animation: ani-svg-color-3 0.2s ease-out 1.25s both;
}
svg.number12-svg.active .svg-color-17 {
  -webkit-animation: ani-svg-color-3 0.2s ease-out 1.3s both;
          animation: ani-svg-color-3   0.2s ease-out 1.3s both;
}
svg.number12-svg.active .svg-color-18 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 1.35s both;
          animation: ani-svg-color-4 0.2s ease-out 1.35s both;
}
svg.number12-svg.active .svg-color-19 {
  -webkit-animation: ani-svg-color-4 0.2s ease-out 1.4s both;
          animation: ani-svg-color-4 0.2s ease-out 1.4s both;
}
svg.number12-svg.active .number12-cls-7,
svg.number12-svg.active .number12-cls-8 {
  -webkit-animation: ani-svg-opacity 0s linear 1.8s both;
          animation: ani-svg-opacity 0s linear 1.8s both;
}
svg.number12-svg .number12-cls-7,
svg.number12-svg .number12-cls-8 {
  opacity: 1;
}
/* end number12 svg ========================*/
.infographics-page .number10-group-cls,
.infographics-page .number10-group-cls,
.infographics-page .number10-group-cls
{
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: #fff;
}
.infographics-page .number__messageTop.active
{
  animation: zoomScale ease-out 2s;
  -webkit-animation: zoomScale ease-out 2s;
  -moz-animation: zoomScale ease-out 2s;
  -o-animation: zoomScale ease-out 2s;
  -ms-animation: zoomScale ease-out 2s;
  animation-iteration-count: 1;
}
@keyframes zoomScale {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*========================================================*/
/*=============== end infographics page ==================*/
/*========================================================*/