@charset "utf-8";

/***************************************************
 * Generated by SVG Artista on 10/19/2021, 3:23:27 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .mainttl-svg-1 {
  stroke-dashoffset: 236.535888671875px;
  stroke-dasharray: 236.535888671875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .mainttl-svg-1 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-2 {
  stroke-dashoffset: 246.2642822265625px;
  stroke-dasharray: 246.2642822265625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .mainttl-svg-2 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-3 {
  stroke-dashoffset: 246.14430236816406px;
  stroke-dasharray: 246.14430236816406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .mainttl-svg-3 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-4 {
  stroke-dashoffset: 198.49618530273438px;
  stroke-dasharray: 198.49618530273438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .mainttl-svg-4 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-5 {
  stroke-dashoffset: 203.3385467529297px;
  stroke-dasharray: 203.3385467529297px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .mainttl-svg-5 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-6 {
  stroke-dashoffset: 169.90432739257812px;
  stroke-dasharray: 169.90432739257812px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .mainttl-svg-6 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-7 {
  stroke-dashoffset: 275.9538879394531px;
  stroke-dasharray: 275.9538879394531px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .mainttl-svg-7 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-8 {
  stroke-dashoffset: 223.9158935546875px;
  stroke-dasharray: 223.9158935546875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .mainttl-svg-8 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-9 {
  stroke-dashoffset: 224.1557159423828px;
  stroke-dasharray: 224.1557159423828px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .mainttl-svg-9 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-10 {
  stroke-dashoffset: 63.53504180908203px;
  stroke-dasharray: 63.53504180908203px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .mainttl-svg-10 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-11 {
  stroke-dashoffset: 236.55429077148438px;
  stroke-dasharray: 236.55429077148438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .mainttl-svg-11 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-12 {
  stroke-dashoffset: 246.28427124023438px;
  stroke-dasharray: 246.28427124023438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .mainttl-svg-12 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-13 {
  stroke-dashoffset: 246.16429138183594px;
  stroke-dasharray: 246.16429138183594px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .mainttl-svg-13 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-14 {
  stroke-dashoffset: 198.31222534179688px;
  stroke-dasharray: 198.31222534179688px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .mainttl-svg-14 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-15 {
  stroke-dashoffset: 203.40184020996094px;
  stroke-dasharray: 203.40184020996094px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .mainttl-svg-15 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-16 {
  stroke-dashoffset: 169.98875427246094px;
  stroke-dasharray: 169.98875427246094px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}

svg.active .mainttl-svg-16 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-17 {
  stroke-dashoffset: 313.085205078125px;
  stroke-dasharray: 313.085205078125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}

svg.active .mainttl-svg-17 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-18 {
  stroke-dashoffset: 203.3042755126953px;
  stroke-dasharray: 203.3042755126953px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}

svg.active .mainttl-svg-18 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-19 {
  stroke-dashoffset: 232.89788818359375px;
  stroke-dasharray: 232.89788818359375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .mainttl-svg-19 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-20 {
  stroke-dashoffset: 141.58004760742188px;
  stroke-dasharray: 141.58004760742188px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
}

svg.active .mainttl-svg-20 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-21 {
  stroke-dashoffset: 192.6118621826172px;
  stroke-dasharray: 192.6118621826172px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
}

svg.active .mainttl-svg-21 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .mainttl-svg-22 {
  stroke-dashoffset: 51.07972717285156px;
  stroke-dasharray: 51.07972717285156px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
}

svg.active .mainttl-svg-22 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}






/* 旗 */

.flagImg svg{
  transform-origin:left bottom;
  -webkit-transform-origin:left bottom;
  -moz-transform-origin:left bottom;
  animation:pendulum ease-in-out 1.5s infinite alternate;
  -webkit-animation:pendulum ease-in-out 1.5s infinite alternate;
  -moz-animation:pendulum ease-in-out 1.5s infinite alternate;
 }

.flagImg svg .cls-1{
stroke:none;
}

@keyframes pendulum{
  0%{transform: rotate(2deg);}
  100%{transform: rotate(-2deg);}
}
@-webkit-keyframes pendulum{
  0%{-webkit-transform: rotate(2deg);}
  100%{-webkit-transform: rotate(-2deg);}
}
@-moz-keyframes pendulum{
  0%{-moz-transform: rotate(2deg);}
  100%{-moz-transform: rotate(-2deg);}
}



/* 背景 */

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
	z-index: -1;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.05);
    animation: animate 30s linear infinite;
	border-radius: 15px;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 70px;
    height: 70px;
    animation-delay: 2s;
    animation-duration: 40s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 50px;
    height: 50px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 15s;
    animation-duration: 35s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 70px;
    height: 70px;
    animation-delay: 10s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 40px;
    height: 40px;
    animation-delay: 15s;
    animation-duration: 40s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 80px;
    height: 80px;
    animation-delay: 75s;
    animation-duration: 30s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 70s;
    animation-duration: 25s;
}

.circles li:nth-child(11){
    left: 25%;
    width: 150px;
    height: 150px;
    animation-delay: 30s;
    animation-duration: 20s;
}

.circles li:nth-child(12){
    left: 45%;
    width: 150px;
    height: 150px;
    animation-delay: 40s;
    animation-duration: 25s;
}

.circles li:nth-child(13){
    left: 65%;
    width: 150px;
    height: 150px;
    animation-delay: 65s;
    animation-duration: 45s;
}

.circles li:nth-child(14){
    left: 95%;
    width: 150px;
    height: 150px;
    animation-delay: 50s;
    animation-duration: 50s;
}

.circles li:nth-child(15){
    left: 15%;
    width: 150px;
    height: 150px;
    animation-delay: 60s;
    animation-duration: 50s;
}


@keyframes animate {

    0%{
		opacity: 0;
        transform: translateY(0) rotate(0deg);
        border-radius: 15%;
    }
	
	10%{
		opacity: 0;
        transform: translateY(-100) rotate(100deg);
        border-radius: 15%;
    }
	
	50%{
		opacity: 1;
        transform: translateY(-500) rotate(500deg);
        border-radius: 15%;
    }
	
	
	90%{
		opacity: .5;
        transform: translateY(-2500) rotate(700deg);
        border-radius: 15%;
    }
	
	

    100%{
        transform: translateY(-2600px) rotate(720deg);
		opacity: 0;
        border-radius: 25%;
    }

}


/* 旗アイコン */

.flagsvg_icon .cls-1{
	fill:#970b31;
  animation: cls1_anime 2s steps(1,start) infinite;
  -webkit-animation: cls1_anime 2s steps(1,start) infinite;
  -moz-animation: cls1_anime 2s steps(1,start) infinite;
stroke:none;
}

@keyframes cls1_anime {
	
50% {
    fill: #fabd00;
  }
}
@-webkit-keyframes cls1_anime {
	
50% {
    fill: #fabd00;
  }
}
@-moz-keyframes cls1_anime {
	
50% {
    fill: #fabd00;
  }
}

.flagsvg_icon .cls-2{
	fill:#00a6d9;
  animation: cls2_anime 2s steps(1,start) infinite;
  -webkit-animation: cls2_anime 2s steps(1,start) infinite;
  -moz-animation: cls2_anime 2s steps(1,start) infinite;
	
}

@keyframes cls2_anime {
  50% {
    fill: #00a6d9;
  }
}
@-webkit-keyframes cls2_anime {
  50% {
    fill: #00a6d9;
  }
}
@-moz-keyframes cls2_anime {
  50% {
    fill: #00a6d9;
  }
}

.flagsvg_icon .cls-3{fill:#e5001e;
  animation: cls3_anime 2s steps(1,start) infinite;
  -webkit-animation: cls3_anime 2s steps(1,start) infinite;
  -moz-animation: cls3_anime 2s steps(1,start) infinite;
}

@keyframes cls3_anime {
  50% {
    fill: #00973b;
  }
}
@-webkit-keyframes cls3_anime {
  50% {
    fill: #00973b;
  }
}
@-moz-keyframes cls3_anime {
  50% {
    fill: #00973b;
  }
}

.flagsvg_icon .cls-4{fill:#f5a200;
	  animation: cls4_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls4_anime 2s steps(1,start) infinite;
  -moz-animation: cls4_anime 2s steps(1,start) infinite;
}

@keyframes cls4_anime {
  50% {
    fill: #c60f28;
  }
}
@-webkit-keyframes cls4_anime {
  50% {
    fill: #c60f28;
  }
}
@-moz-keyframes cls4_anime {
  50% {
    fill: #c60f28;
  }
}

.flagsvg_icon .cls-5{fill:#e83819;
	animation: cls5_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls5_anime 2s steps(1,start) infinite;
  -moz-animation: cls5_anime 2s steps(1,start) infinite;
}

@keyframes cls5_anime {
  50% {
    fill: #427935;
  }
}
@-webkit-keyframes cls5_anime {
  50% {
    fill: #427935;
  }
}
@-moz-keyframes cls5_anime {
  50% {
    fill: #427935;
  }
}

.flagsvg_icon .cls-6{fill:#d39200;
	animation: cls6_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls6_anime 2s steps(1,start) infinite;
  -moz-animation: cls6_anime 2s steps(1,start) infinite;
}

@keyframes cls6_anime {
  50% {
    fill: #e5001e;
  }
}
@-webkit-keyframes cls6_anime {
  50% {
    fill: #e5001e;
  }
}
@-moz-keyframes cls6_anime {
  50% {
    fill: #e5001e;
  }
}

.flagsvg_icon .cls-7{fill:#dc007a;
	animation: cls7_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls7_anime 2s steps(1,start) infinite;
  -moz-animation: cls7_anime 2s steps(1,start) infinite;
}


@keyframes cls7_anime {
  50% {
    fill: #d7a600;
  }
}
@-webkit-keyframes cls7_anime {
  50% {
    fill: #d7a600;
  }
}
@-moz-keyframes cls7_anime {
  50% {
    fill: #d7a600;
  }
}

.flagsvg_icon .cls-8{fill:#fabd00;
	animation: cls8_anime 2s steps(1,start) infinite;
	-webkit-animation: cls8_anime 2s steps(1,start) infinite;
    -moz-animation: cls8_anime 2s steps(1,start) infinite;
}


@keyframes cls8_anime {
  50% {
    fill: #004c88;
  }
}
@-webkit-keyframes cls8_anime {
  50% {
    fill: #004c88;
  }
}
@-moz-keyframes cls8_anime {
  50% {
    fill: #004c88;
  }
}

.flagsvg_icon .cls-9{fill:#28a838;
	animation: cls9_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls9_anime 2s steps(1,start) infinite;
  -moz-animation: cls9_anime 2s steps(1,start) infinite;
}


@keyframes cls9_anime {
  50% {
    fill: #0075ba;
  }
}
@-webkit-keyframes cls9_anime {
  50% {
    fill: #0075ba;
  }
}
@-moz-keyframes cls9_anime {
  50% {
    fill: #0075ba;
  }
}

.flagsvg_icon .cls-10{fill:#0075ba;
	animation: cls10_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls10_anime 2s steps(1,start) infinite;
  -moz-animation: cls10_anime 2s steps(1,start) infinite;
}


@keyframes cls10_anime {
  50% {
    fill: #28a838;
  }
}
@-webkit-keyframes cls10_anime {
  50% {
    fill: #28a838;
  }
}
@-moz-keyframes cls10_anime {
  50% {
    fill: #28a838;
  }
}

.flagsvg_icon .cls-11{fill:#427935;
	animation: cls11_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls11_anime 2s steps(1,start) infinite;
  -moz-animation: cls11_anime 2s steps(1,start) infinite;
}


@keyframes cls11_anime {
  50% {
    fill: #e83819;
  }
}
@-webkit-keyframes cls11_anime {
  50% {
    fill: #e83819;
  }
}
@-moz-keyframes cls11_anime {
  50% {
    fill: #e83819;
  }
}


.flagsvg_icon .cls-12{fill:#003067;
	animation: cls12_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls12_anime 2s steps(1,start) infinite;
  -moz-animation: cls12_anime 2s steps(1,start) infinite;
}


@keyframes cls12_anime {
  50% {
    fill: #d39200;
  }
}
@-webkit-keyframes cls12_anime {
  50% {
    fill: #d39200;
  }
}
@-moz-keyframes cls12_anime {
  50% {
    fill: #d39200;
  }
}

.flagsvg_icon .cls-13{fill:#ed6a02;
	animation: cls13_anime 2s steps(1,start) infinite;
	  -webkit-animation: cls13_anime 2s steps(1,start) infinite;
  -moz-animation: cls13_anime 2s steps(1,start) infinite;
}

@keyframes cls13_anime {
  50% {
    fill:#dc007a;
  }
}
@-webkit-keyframes cls13_anime {
  50% {
    fill:#dc007a;
  }
}
@-moz-keyframes cls13_anime {
  50% {
    fill:#dc007a;
  }
}

.cls-14{fill:#333;}






/* 取り組みの流れアニメーション */

.ac1_Img_anim {
  animation-name: ac1_Img_anim;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  opacity: 0;
}

.ac1_2 {
  animation-delay: 4s;
}

@keyframes ac1_Img_anim {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}

.ac2_Img_anim {
  animation-name: ac1_Img_anim;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  opacity: 0;
}

.ac2_2 {
  animation-delay: 5s;
}

@keyframes ac1_Img_anim {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}






.fade{
	transition: .3s all;
}

.fade:hover{
	opacity:.7;
}