@charset "utf-8";
/*=======================================================
	illust-animation
=======================================================*/
/* paused */
.paused svg *{
  opacity: 1;
  animation: none;
  animation-play-state: paused;
}
/* 読み込み対策 */
.content-img{
  opacity: 0;
  animation: fadein 0.3s ease 0.4s 1 forwards;
  perspective: 1000px;
  backface-visibility: hidden;
}
@keyframes fadein{
  0%{ opacity: 0; }
  100%{ opacity: 1.0; }
}
/* --- 1 水銀フリー --- */
.kw1_shape2{
  animation: kw1_move 2.0s ease 0s infinite;
}
@keyframes kw1_move{
  0%{
    clip-path: polygon(32.0299% 0.3243%,45.4627% 22.6486%,62.2537% 28.0541%,72.7015% 17.2432%,76.6119% 24.6486%,65.4179% 37.8378%,39.6716% 30.4054%,26.9851% 6.7568%);
  }
  30%{
    clip-path: polygon(32.0299% 0.3243%,45.4627% 22.6486%,62.2537% 28.0541%,72.7015% 17.2432%,100.7463% 68.7027%,74.1343% 99.1081%,15.9254% 84.6757%,0.4925% 40.5405%);
  }
  50%{
    clip-path: polygon(32.0299% 0.3243%,45.4627% 22.6486%,62.2537% 28.0541%,72.7015% 17.2432%,100.7463% 68.7027%,74.1343% 99.1081%,15.9254% 84.6757%,0.4925% 40.5405%);
  }
  70%{
    clip-path: polygon(2.7313% 36.4865%,17.0448% 79.2703%,73.7612% 93.7027%,97.3881% 63.2973%,100.7463% 68.7027%,74.1343% 99.1081%,15.9254% 84.6757%,0.4925% 40.5405%);
  }
  100%{
    clip-path: polygon(2.7313% 36.4865%,17.0448% 79.2703%,73.7612% 93.7027%,97.3881% 63.2973%,100.7463% 68.7027%,74.1343% 99.1081%,15.9254% 84.6757%,0.4925% 40.5405%);
  }
}
/* --- 2 Data Explosion --- */
.kw2_shape1{
  animation: kw2_move 2.0s ease 0s infinite;
}
.kw2_shape1_wrap{
  clip-path: url(#kw2_clip-path);
}
@keyframes kw2_move{
  0%{
    transform: translateX(0);
  }
  30%{
    transform: translateX(0);
  }
  40%{
    transform: translateX(-6%);
  }
  60%{
    transform: translateX(-6%);
  }
  75%{
    transform: translateX(-35%);
  }
  80%{
    transform: translateX(-34%);
  }
  80%{
    transform: translateX(-34%);
  }
  100%{
    transform: translateX(-34%);
  }
}
/* --- 3 OBM --- */
.kw3_body{
  animation: kw3_body_move 0.4s ease 0s infinite;
}
.kw3_tire{
  animation: kw3_tire_move 0.4s ease 0s infinite;
}
@keyframes kw3_body_move{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(0.3%);
  }
}
@keyframes kw3_tire_move{
  0%{
    transform: translateY(0) ;
  }
  100%{
    transform: translateY(0.25%) ;
  }
}
.kw3_line1,
.kw3_line2,
.kw3_line3{
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* 下 */
.kw3_line1{
  animation: kw3_line_move 1.8s ease 0s infinite;
}
/* 中間 */
.kw3_line2{
  animation: kw3_line_move2 1.8s ease 0s infinite;
}
/* 上 */
.kw3_line3{
  animation: kw3_line_move3 1.8s ease 0s infinite;
}
@keyframes kw3_line_move{
  0%{
    opacity: 0;
    transform: translateX(-1%) scaleX(1.0);
  }
  10%{
    opacity: 0;
    transform: translateX(-1%) scaleX(1.0);
  }
  11%{
    opacity: 1;
    transform: translateX(-1%) scaleX(1.0);
  }
  100%{
    opacity: 1;
    transform: translateX(150%) scaleX(3.5);
  }
}
@keyframes kw3_line_move2{
  0%{
    opacity: 0;
    transform: translateX(-5%) scaleX(1.0);
  }
  1%{
    opacity: 1;
    transform: translateX(-5%) scaleX(1.0);
  }
  100%{
    opacity: 1;
    transform: translateX(150%) scaleX(3.5);
  }
}
@keyframes kw3_line_move3{
  0%{
    opacity: 0;
    transform: translateX(-5%) scaleX(1.0);
  }
  15%{
    opacity: 0;
    transform: translateX(-5%) scaleX(1.0);
  }
  16%{
    opacity: 1;
    transform: translateX(-5%) scaleX(1.0);
  }
  100%{
    opacity: 1;
    transform: translateX(150%) scaleX(3.5);
  }
}
/* 停止時調整 */
.paused svg .kw3_line1,
.paused svg .kw3_line2,
.paused svg .kw3_line3{
  opacity: 0;
}
/* --- 4 Smart Logistics --- */
.kw4_waves{
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kw4_waves_1{
  animation: kw4_waves_move1 1.8s ease 0s infinite;
}
.kw4_waves_2{
  animation: kw4_waves_move2 1.8s ease 0s infinite;
}
.kw4_waves_3{
  animation: kw4_waves_move3 1.8s ease 0s infinite;
}
.kw4_waves_4{
  animation: kw4_waves_move4 1.8s ease 0s infinite;
}
@keyframes kw4_waves_move1{
  0%{ opacity:0 }
  40%{ opacity:1 }
  45%{ opacity:1 }
  55%{ opacity:0 }
  100%{ opacity:0 }
}
@keyframes kw4_waves_move2{
  0%{ opacity:0 }
  5%{ opacity:0 }
  45%{ opacity:1 }
  50%{ opacity:1 }
  60%{ opacity:0 }
  100% {opacity:0 }
}
@keyframes kw4_waves_move3{
  0%{ opacity:0 }
  10%{ opacity:0 }
  50%{ opacity:1 }
  55%{ opacity:1 }
  65%{ opacity:0 }
  100%{ opacity:0 }
}
@keyframes kw4_waves_move4{
  0%{ opacity:0 }
  15%{ opacity:0 }
  55%{ opacity:1 }
  60%{ opacity:1 }
  75%{ opacity:0 }
  100%{ opacity:0 }
}
/* --- 5 Next-Generation Power Semiconductor --- */
.kw5_waves{
  opacity: 0;
  transform-origin: 75% 34%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kw5_waves_1{
  animation: kw5_waves_move1 1.8s ease 0s infinite;
}
.kw5_waves_2{
  animation: kw5_waves_move2 1.8s ease 0s infinite;
}
.kw5_waves_3{
  animation: kw5_waves_move3 1.8s ease 0s infinite;
}
@keyframes kw5_waves_move1{
  0%{
    opacity: 0.0;
    transform: scale(0.1);
  }
  38%{
    opacity: 0.0;
    transform: scale(0.5);
  }
  40%{
    opacity: 1.0;
    transform: scale(1.0);
  }
  60%{
    opacity: 0.0;
    transform: scale(1.25);
  }
  100%{
    opacity: 0.0;
    transform: scale(1.5);
  }
}
@keyframes kw5_waves_move2{
  0%{
    opacity: 0.0;
    transform: scale(0.1);
  }
  43%{
    opacity: 0.0;
    transform: scale(0.5);
  }
  45%{
    opacity: 1.0 ;
    transform: scale(1.0);
  }
  65%{
    opacity: 0.0;
    transform: scale(1.25);
  }
  100%{
    opacity: 0.0;
    transform: scale(1.5);
  }
}
@keyframes kw5_waves_move3{
  0%{
    opacity: 0.0;
    transform: scale(0.1);
  }
  47%{
    opacity: 0.0;
    transform: scale(0.5);
  }
  50%{
    opacity: 1.0;
    transform: scale(1.0);
  }
  70%{
    opacity: 0.0;
    transform: scale(1.3);
  }
  100%{
    opacity: 0.0;
    transform: scale(1.6);
  }
}
/* --- 6 CO2-EOR --- */
.kw6_shape1{
  transform-origin: 49.068% 44.909%;
  animation: kw5_move 4s ease 0s infinite;
}
@keyframes kw5_move{
  0%{ transform:rotate(0) }
  50%{ transform:rotate(5deg) }
  100%{ transform:rotate(0) }
}
.kw6_shape2{
  transform-origin: 74.2237% 64.499%;
  animation: kw5_move2 5s linear infinite ;
}
@keyframes kw5_move2{
  0%{ transform:rotate(0); }
  100%{ transform:rotate(360deg); }
}
.kw6_shape3_line{
  transform-origin: 74.3453% 52.8884%;
  animation: kw5_move3 4s ease 0s infinite;
}
@keyframes kw5_move3{
  0%{
    transform: translate(0,0) rotate(0deg);
  }
  50%{
    transform: translate(-1%, 2.5%) rotate(-20deg);
  }
  100%{
    transform: translate(0, 0) rotate(0deg);
  }
}
/* --- 7 Copper Superalloys --- */
.kw7_electricity{
  clip-path: url(#kw7_clip-path);
}
.kw7_electricity1{
  transform-origin: 80.4538% 50.2609%;
  animation: kw7_move 3.0s ease 0s infinite;
}
@keyframes kw7_move{
  0%{
    transform: translatey(0);
  }
  20%{
    transform: translatey(0);
  }
  50%{
    transform: translatey(100%);
  }
  70%{
    transform: translatey(100%) scale(0.0, 0.0);
  }
  80%{
    transform: translatey(-100%) scale(0.0, 0.0);
  }
  100%{
    transform: translatey(0) scale(1.0, 1.0);
  }
}
/* --- 8 Beyond 5G --- */
.kw8_waves{
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kw8_waves_l_1,
.kw8_waves_r_1{
  animation: kw8_waves1 1.0s ease 0s infinite;
}
.kw8_waves_l_2,
.kw8_waves_r_2{
  animation: kw8_waves2 1.0s ease 0s infinite;
}
.kw8_waves_l_3,
.kw8_waves_r_3{
  animation: kw8_waves3 1.0s ease 0s infinite;
}
.kw8_waves_l{
  animation: kw8_left 1.0s ease 0s infinite;
}
.kw8_waves_r{
  animation: kw8_right 1.0s ease 0s infinite;
}
@keyframes kw8_waves1{
  0%{ opacity:0 }
  15%{ opacity:1 }
  85%{ opacity:1 }
  100%{ opacity:0 }
}
@keyframes kw8_waves2{
  0%{ opacity:0 }
  15%{ opacity:0 }
  30%{ opacity:1 }
  85%{ opacity:1 }
  100%{ opacity:0 }
}
@keyframes kw8_waves3{
  0%{ opacity:0 }
  15%{ opacity:0 }
  30%{ opacity:0 }
  45%{ opacity:1 }
  85%{ opacity:1 }
  100%{ opacity:0 }
}
@keyframes kw8_left{
  0%{ transform:translateX(0) }
  100%{ transform:translateX(-1%) }
}
@keyframes kw8_right{
  0%{ transform:translateX(0) }
  100%{ transform:translateX(1%) }
}
/* --- 9 Nearline Storage --- */
.kw9_shape1{
  transform-origin: 47.1875% 30.5078%;
  animation: kw9_zoom 7.0s ease 0s infinite;
}
.kw9_shape2{
  transform-origin: 28.1396% 63.5896%;
  animation: kw9_zoom2 7.0s ease 0s infinite;
}
.kw9_shape3{
  transform-origin: 69.7% 64.0569%;
  animation: kw9_zoom3 7.0s ease 0s infinite;
}
@keyframes kw9_zoom{
  0%{
    transform: scale(1);
  }
  3%{
    transform: scale(1.15);
  }
  6%{
    transform: scale(0.95);
  }
  9%{
    transform: scale(1.05);
  }
  12%{
    transform: scale(1);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes kw9_zoom2{
  0%{
    transform: scale(1);
  }
  11%{
    transform: scale(1);
  }
  14%{
    transform: scale(1.15);
  }
  17%{
    transform: scale(0.95);
  }
  20%{
    transform: scale(1.05);
  }
  23%{
    transform: scale(1);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes kw9_zoom3{
  0%{
    transform: scale(1);
  }
  22%{
    transform: scale(1);
  }
  25%{
    transform: scale(1.15);
  }
  28%{
    transform: scale(0.95);
  }
  31%{
    transform: scale(1.05);
  }
  34%{
    transform: scale(1);
  }
  100%{
    transform: scale(1);
  }
}
/* --- 10 Eliminating Organic Solvents --- */
.kw10_shape1{
  animation: fkw10_move 6.0s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite;
}
.kw10_shape2{
  animation: fkw10_move 6.0s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite;
}
.kw10_shape1-copy{
  animation: fkw10_move 6.0s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite;
}
.kw10_shape2-copy{
  animation: fkw10_move 6.0s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite;
}
.kw10_wrap{
  clip-path: url(#kw10_clip-path);
}
@keyframes fkw10_move{
  0%{
    transform: translateX(0);
  }
  10%{
    transform: translateX(0);
  }
  15%{
    transform: translateX(-39%);
  }
  25%{
    transform: translateX(-39%);
  }
  33%{
    transform: translateX(-39%);
  }
  45%{
    transform: translateX(-39%);
  }
  53%{
    transform: translateX(-39%);
  }
  58%{
    transform: translateX(-76%);
  }
  68%{
    transform: translateX(-76%);
  }
  86%{
    transform: translateX(-76%);
  }
  100%{
    transform: translateX(-76%);
  }
}
/* --- 11 Low-level Radioactive Waste --- */
.kw11_shape1{
  opacity: 0;
  transform-origin: 42.9543% 51.2771%;
  animation: fkw11_moveee 1.5s ease 0s 1 forwards;
}
.kw11_shape2{
  opacity: 0;
  transform-origin: 67.9157% 62.9467%;
  animation: fkw11_moveee 1.5s ease 0.5s 1 forwards;
}
@keyframes fkw11_moveee{
  0%{
    opacity: 0;
    transform: translateY(0%);
  }
  50%{
    opacity: 1;
    transform: translateY(5%);
  }
  60%{
    opacity: 1;
    transform: translateY(5%);
  }
  100%{
    opacity: 1;
    transform: translateY(5%);
  }
}
/* --- 12 Resilience --- */
.kw12_wrap{
  transform-origin: center 74.4889%;
  animation: fkw12_move 1.5s ease 0s 1 forwards;
}
@keyframes fkw12_move{
  0%{
    transform: scale(1.0, 1.0);
  }
  30%{
    transform: scale(1.0, 1.0);
  }
  40%{
    transform: scale(1.0, 1.04);
  }
  50%{
    transform: scale(1.0, 1.0);
  }
  60%{
    transform: scale(1.0, 1.01);
  }
  70%{
    transform: scale(1.0, 1.0);
  }
  100%{
    transform: scale(1.0, 1.0);
  }
}
/* --- 13 Generating and Consuming Locally --- */
/* .kw13_shape2{
  transform-origin: 38.8085% 39.5019%;
  animation: fkw13_move 6s linear infinite ;
}
@keyframes fkw13_move{
  0%{ transform:rotate(0); }
  100%{ transform:rotate(360deg); }
} */
/* --- 13 改定 --- */

.h2{
  animation: fkw13_move-h2 4s ease-out 0s infinite normal;
  
} 


@keyframes fkw13_move-h2{
  0%{ 
    clip-path: polygon(0 32%, 100% 45%, 100% 100%, 0% 100%)
   
  }
  10%{ 
    clip-path: polygon(0 32%, 100% 45%, 100% 100%, 0% 100%)
   
  }
  50%{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
  }
  100%{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
  }

}



.leaf1{
  animation: fkw13_move-leaf1 4s ease-out infinite normal;
  transform-origin: 57.0536% 35.1406%;
}
@keyframes fkw13_move-leaf1{
  0%{ 
    opacity: 0;
  }
  20%{
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  25%{
    opacity: 1;
  }
  30%{
    opacity: 1;
    transform: scale(1, 1);
  }
  100%{
    opacity: 1;
  }
}

.leaf2{
  animation: fkw13_move-leaf2 4s ease-out infinite normal;
  transform-origin: 61.0536% 33.6719%;
}
@keyframes fkw13_move-leaf2{
  0%{ 
    opacity: 0;
  }
  27%{
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  35%{
    opacity: 1;
    transform: scale(1, 1);
  }
  100%{
    opacity: 1;
  }
}




/* --- 14 --- */
.co2{
  animation: fkw14_co2 5s ease infinite normal;
  transform-origin: 65.8871% 55.7876%;
}
@keyframes fkw14_co2{
  0%{ 
    transform: scale(1, 1);
    transform: translateY(2%);
    opacity: 0;
  }

  25%{
    transform: scale(1.1, 1.1);
    transform: translateY(0%);
    opacity: 1;
  }
  35%{
    transform: scale(1.1, 1.1);
    transform: translateY(0%);
    opacity: 1;
  }
  55%{
    transform: scale(1.1, 1.1);
    transform: translateY(1%);
    opacity: 1;
  }

  75%{
    transform: scale(1.1, 1.1);
    transform: translateY(0%);
    opacity: 1;
  }
  100%{ 
    transform: scale(1, 1);
    transform: translateY(2%);
    opacity: 0;
  }

}
.mesh{
  animation: fkw14_mesh 5s ease-out infinite normal;
  transform-origin: 16.5030% 77.9818%;
}
@keyframes fkw14_mesh{
  0%{ 
    transform:rotate(0);
  }
  20%{ 
    transform:rotate(-10deg);
  }
  25%{ 
    transform:rotate(-10deg);
  }
  35%{ 
    transform:rotate(0);
  }
  100%{ 
    transform:rotate(0);
  }

} 

/* --- 15 --- */
.chippua{
  animation: fkw15_move-chippua 8s ease-out infinite normal;
}
@keyframes fkw15_move-chippua{
  0%{ 
    transform: translateY(-2.5%);
    opacity: 0;
  }
  15%{ 
    transform: translateY(-2.5%);
    opacity: 0;
  }
  20%{ 
    transform: translateY(-2.5%);
    opacity:1;
  }
  39%{ 
    transform: translateY(-2.5%);
  }
  41%{ 
    transform: translateY(0);
    opacity: 1;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

.chippud{
  animation: fkw15_move-chippud 8s ease-out infinite normal;
}
@keyframes fkw15_move-chippud{
  0%{ 
    transform: translateY(-3.5%);
    opacity: 0;
  }
  15%{ 
    transform: translateY(-3.5%);
    opacity: 0;
  }
  20%{ 
    transform: translateY(-3.5%);
    opacity:1;
  }
  41%{ 
    transform: translateY(-3.5%);
  }
  44%{ 
    transform: translateY(0);
    opacity: 1;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
.base{
  animation: fkw15_move-base 8s ease-in infinite normal;
  opacity: 1;
}
@keyframes fkw15_move-base{
  0%{ 
    opacity: 1;
  }
  13%{ 
    opacity: 1;
  }
  15%{ 
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
.chippub{
  animation: fkw15_move-chippub 8s ease-out infinite normal;
}
@keyframes fkw15_move-chippub{
  0%{ 
    transform: translateY(-1.5%);
    opacity: 0;
  }
  15%{ 
    transform: translateY(-1.5%);
    opacity: 0;
  }
  20%{ 
    transform: translateY(-1.5%);
    opacity:1;
  }
  37%{ 
    transform: translateY(-1.5%);
  }
  39%{ 
    transform: translateY(0);
    opacity: 1;
  }
  60%{ 
    transform: translateY(0);
    opacity: 1;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

.chippuc{
  animation: fkw15_move-chippuc 8s ease-out infinite normal;
}
@keyframes fkw15_move-chippuc{
  0%{ 
    transform: translateY(-0.5%);
    opacity: 0;
  }
  15%{ 
    transform: translateY(-0.5%);
    opacity: 0;
  }
  20%{ 
    transform: translateY(-0.5%);
    opacity:1;
  }
  35%{ 
    transform: translateY(-0.5%);
  }
  37%{ 
    transform: translateY(0);
    opacity: 1;
  }
  60%{ 
    transform: translateY(0);
    opacity: 1;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
.kw15-light1{
  animation: fkw15light1 3s ease-out infinite normal;
  transform-origin: 76.5119% 71.2813%;
}
.index .kw15-light1{
  fill: #fff;
}
@keyframes fkw15light1{
  0%{ 
    transform: translate(0,0);
  }
  100%{ 
    transform: translate(-59.35%, -40.62%);
  }

} 
.kw15-light2{
  animation: fkw15light2 3s ease-out infinite normal;
  transform-origin: 16.5833% 74.5938%;
}
.index .kw15-light2{
  fill: #fff;
}
@keyframes fkw15light2{
  0%{ 
    transform: translate(0,0);
  }
  100%{ 
    transform: translate(62.32%, -44.84%);
  }

}