@charset "UTF-8";
.map-layer {
	aspect-ratio: 16 / 9;
}
.nod-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
.nod-wrap img {
	width: 100%;
	height: auto;
	display: block;
}
.work {
	position: absolute;
    top: 28%;
    left: 22.2%;
    width: 1.5%;
    height: 6%;
}
.work .nod-wrap .head {
	position: absolute;
    width: 35%;
    height: auto;
    top: -8%;
    right: 8%;
    z-index: 11;
	transform-origin: 50% 95%;
	animation: nodding 4s ease-in-out infinite;
}
.work .nod-wrap .hand {
    position: absolute;
    width: 47%;
    height: auto;
    left: 26%;
    top: -15%;
    z-index: 11;
	transform-origin: 100% 100%;
	animation: handMove 4s ease-in-out infinite;
}
.work .nod-wrap .body {
	position: relative;
	z-index: 10;
}
.conveyor {
    position: absolute;
    top: 67%;
    left: 20.5%;
    height: 17%;
    width: 20.8%;
    z-index: 1;
}
.conveyor .nod-wrap img {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0%;
    top: 0%;
    z-index: 1;
 opacity: 0;

  will-change: transform, opacity;

  animation-name: conveyorFrame, conveyorMotion;
  animation-duration: 0.8s, 0.8s;
  animation-timing-function: steps(1), ease-in-out;
  animation-iteration-count: infinite, infinite;
}

/* =========================================
   8枚を順番に表示するための delay（!important 不要）
========================================= */
.conveyor .conveyor1 { animation-delay: 0s, 0s, 0s; }
.conveyor .conveyor2 { animation-delay: 0.1s, 0.1s, 0.1s; }
.conveyor .conveyor3 { animation-delay: 0.2s, 0.2s, 0.2s; }
.conveyor .conveyor4 { animation-delay: 0.3s, 0.3s, 0.3s; }
.conveyor .conveyor5 { animation-delay: 0.4s, 0.4s, 0.4s; }
.conveyor .conveyor6 { animation-delay: 0.5s, 0.5s, 0.5s; }
.conveyor .conveyor7 { animation-delay: 0.6s, 0.6s, 0.6s; }
.conveyor .conveyor8 { animation-delay: 0.7s, 0.7s, 0.7s; }

/* =========================================
   1. コマ送り（8つの画像を順番に表示）
========================================= */
@keyframes conveyorFrame {
  0%    { opacity: 1; }
  12.5% { opacity: 1; }
  12.6% { opacity: 0; }
  100%  { opacity: 0; }
}
/* =========================================
   2. 軽い横スライド（回転感・進んでる感）
========================================= */
@keyframes conveyorMotion {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1px, -1px); }
  40%  { transform: translate(-2px, 1px); }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(0px, 1px); }
  100% { transform: translate(0, 0); }
}
.human_1 {
	position: absolute;
    top: 72.25%;
    left: 23.6%;
    height: 5.6%;
    width: 3.7%;
    z-index: 10;
}
.human_2 {
    position: absolute;
    top: 79%;
    left: 31.6%;
    height: 10.8%;
    width: 5.9%;
    z-index: 10;
}
.human_3 {
    position: absolute;
    top: 38.8%;
    right: 20.8%;
    height: 10.5%;
    width: 3%;
}
.human_3 .nod-wrap .head {
	position: absolute;
	width: 29%;
    height: auto;
    top: 0%;
    right: 21%;
    z-index: 11;
  transform-origin: center bottom;
  animation: headMove 8s ease-in-out infinite;
}
.human_3 .nod-wrap .hand {
    position: absolute;
    width: 41%;
    height: auto;
    right: -1%;
    top: 24%;
    z-index: 9;
  transform-origin: center bottom;
  animation: handPoint 8s ease-in-out infinite;
}
@keyframes headMove {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-10deg); }
  22%  { transform: rotate(-10deg); }
  65%  { transform: rotate(-10deg); }
  80%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes handPoint {
  0%, 22% {
    transform: rotate(0deg) translateX(0);
  }
  35% {
    transform: rotate(25deg) translateX(0);
  }
  50% {
    transform: rotate(25deg) translateX(-8px);
  }
  58% {
    transform: rotate(25deg) translateX(-8px);
  }
  80% {
    transform: rotate(0deg) translateX(0);
  }
  100% {
    transform: rotate(0deg) translateX(0);
  }
}
.human_4 {
	position: absolute;
    top: 76%;
    left: 54.6%;
    height: 10.8%;
    width: 5.9%;
}
.human_4 .nod-wrap .head {
    position: absolute;
    width: 15%;
    height: auto;
    top: 3%;
    right: 29%;
    z-index: 10;
}
.human_4 .nod-wrap .hand {
    position: absolute;
    width: 24%;
    height: auto;
    right: 11%;
    top: 10%;
    z-index: 11;
}
.human_4 .nod-wrap .head {
  display: block;
  transform-origin: left bottom; 
  animation: tiltSmooth 6s ease-in-out infinite;
}
@keyframes tiltSmooth {
  0% {
    transform: rotate(0deg);
  }
  16.666% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  66.666% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.human_4 .nod-wrap .hand {
  display: block;
  transform-origin: left bottom; 
  animation: tiltSmooths 6s ease-in-out infinite;
}
@keyframes tiltSmooths {
  0% {
    transform: rotate(0deg);
  }
  16.666% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  66.666% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .human_4 .nod-wrap .head,
  .human_4 .nod-wrap .hand {
    animation: none;
  }
}
.human_5 {
    position: absolute;
    top: 70.5%;
    left: 17.6%;
    height: 11.2%;
    width: 2.9%;
}
.human_5 .nod-wrap .hand {
	position: absolute;
    width: 22%;
    height: auto;
    right: 1%;
    top: 29%;
	transform-origin: 0% 0%;
	animation: nodTwicePause 4s ease-in-out infinite;
	will-change: transform;
}
.human_5 .hand { --tilt-deg: -10deg; }
@keyframes nodTwicePause {
  0%      { transform: rotate(0deg); }
  6.25%   { transform: rotate(var(--tilt-deg, -10deg)); }
  12.5%   { transform: rotate(0deg); }
  18.75%  { transform: rotate(var(--tilt-deg, -10deg)); } 
  25%     { transform: rotate(0deg); }
  100%    { transform: rotate(0deg); }
}
.human_6 {
	position: absolute;
    top: 23.5%;
    right: 33.6%;
    height: 11.2%;
    width: 2.5%;
}
.human_6 .nod-wrap .hand {
	position: absolute;
	width: 48%;
	height: auto;
	left: 25%;
	top: 17%;
	z-index: 9;
	transform-origin: 0% 0%; /* 左上を支点 */
	animation: tapHand 3.5s ease-in-out infinite;
	will-change: transform;
}
.human_6 .nod-wrap .tab {
    position: absolute;
    width: 39%;
    height: auto;
    right: 1%;
    top: 29%;
    z-index: 10;
}
.human_6 .hand { --tap-angle: 12deg; }

@keyframes tapHand {
  /* --- 1回目 --- */
  0%     { transform: rotate(0deg); }
  5%     { transform: rotate(var(--tap-angle)); }
  10%    { transform: rotate(0deg); }

  /* --- 2回目 --- */
  15%    { transform: rotate(var(--tap-angle)); }
  20%    { transform: rotate(0deg); }

  /* --- 3回目 --- */
  25%    { transform: rotate(var(--tap-angle)); }
  30%    { transform: rotate(0deg); }

  /* --- 残り 70% は静止して間をつくる --- */
  100%   { transform: rotate(0deg); }
}
.wifi_1 {
    position: absolute;
    top: 39.5%;
    right: 43.5%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_2 {
    position: absolute;
    top: 14.5%;
    right: 14.8%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_1 .nod-wrap img,
.wifi_2 .nod-wrap img {
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s;
}
.wifi_1 .nod-wrap img.active,
.wifi_2 .nod-wrap img.active {
	opacity: 1;
}
.drone {
    position: absolute;
    top: 2%;
    right: 18%;
    height: 5%;
    width: 6%;
}
.drone .nod-wrap .drone1 {
	position: relative;
	width: 100%;
	height: auto;
	animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.satellite {
    position: absolute;
    top: -5%;
    left: 52.5%;
    height: 13.5%;
    width: 14%;
}
.satellite .nod-wrap .satellite1 {
	position: relative;
	width: 100%;
	height: auto;
	animation: float2 4s ease-in-out infinite;
}
@keyframes float2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
.bolt_1 {
	position: absolute;
    top: 66.4%;
    left: 16.5%;
    height: 5%;
    width: 2%;
    z-index: 20;
}
.bolt_2 {
    position: absolute;
    top: 75.5%;
    left: 30.2%;
    height: 5%;
    width: 2%;
    z-index: 20;
}
.bolt_3 {
    position: absolute;
    top: 6.5%;
    left: 43%;
    height: 5%;
    width: 2%;
    z-index: 20;
}
.bolt_4 {
    position: absolute;
    top: 18.2%;
    right: 35.2%;
    height: 5%;
    width: 2%;
    z-index: 20;
}
.bolt_5 {
	position: absolute;
    top: 25.2%;
    right: 29.1%;
    height: 5%;
    width: 2%;
    z-index: 20;
}
.bolt_1 .nod-wrap img,
.bolt_2 .nod-wrap img,
.bolt_3 .nod-wrap img,
.bolt_4 .nod-wrap img,
.bolt_5 .nod-wrap img {
	position: absolute;
	bottom: 0;
	left: 0;
	animation: boltShowHideRight 1.3s ease-in-out infinite;
}
:root {
  --shake-d: 1px; /* 揺れ幅 */
  --shake-r: 1.2deg;/* 回転角度 */
}
@keyframes shake-cycle {
  /* ===== 前半 0〜50% = 3秒間 高速ブルブル ===== */
  0%   { transform: translate(0,0) rotate(0); }
  2%   { transform: translate(-1px, -1px) rotate(-0.9deg); }
  4%   { transform: translate(1px, 1px) rotate(0.9deg); }
  6%   { transform: translate(-1px, 1px) rotate(-0.9deg); }
  8%   { transform: translate(1px, -1px) rotate(0.9deg); }
  10%  { transform: translate(-1px, 0) rotate(-0.9deg); }
  12%  { transform: translate(1px, 0) rotate(0.9deg); }
  14%  { transform: translate(0, -1px) rotate(-0.9deg); }
  16%  { transform: translate(0, 1px) rotate(0.9deg); }
  18%  { transform: translate(0,0) rotate(0); }

  /* 上の動きを繰り返して50%までぎっしり埋める */
  20%  { transform: translate(-1px, -1px) rotate(-0.9deg); }
  22%  { transform: translate(1px, 1px) rotate(0.9deg); }
  24%  { transform: translate(-1px, 1px) rotate(-0.9deg); }
  26%  { transform: translate(1px, -1px) rotate(0.9deg); }
  28%  { transform: translate(-1px, 0) rotate(-0.9deg); }
  30%  { transform: translate(1px, 0) rotate(0.9deg); }
  32%  { transform: translate(0, -1px) rotate(-0.9deg); }
  34%  { transform: translate(0, 1px) rotate(0.9deg); }
  36%  { transform: translate(0,0) rotate(0); }

  /* このパターンをさらに 40〜50% までコピー */

  50%  { transform: translate(0,0) rotate(0); }

  /* ===== 後半 50〜100% = 3秒間 停止 ===== */
  100% { transform: translate(0,0) rotate(0); }
}
main .contents .map ul.map_icon li.menu01 {
    top: 0.2%;
    left: 17.7%;
}
main .contents .map ul.map_icon li.menu02 {
    top: 3.2%;
    left: 22.5%;
}
main .contents .map ul.map_icon li.menu03 {
    top: 13%;
    left: 21.5%;
}
main .contents .map ul.map_icon li.menu04 {
    top: 13%;
    left: 13.8%;
}
main .contents .map ul.map_icon li.menu05 {
    top: 26.2%;
    left: 11.75%;
}
main .contents .map ul.map_icon li.menu06 {
    top: 29.2%;
    left: 17.85%;
}
main .contents .map ul.map_icon li.menu07 {
	top: 3.2%;
    left: 13%;
}
main .contents .map ul.map_icon li.menu08 {
	top: 32%;
    left: 40.8%;
}
main .contents .map ul.map_icon li.menu10 {
	top: 31.8%;
    left: 43.8%;
}
main .contents .map ul.map_icon li.menu10.second {
    top: 54.8%;
    left: 62.5%;
}
main .contents .map ul.map_icon li.menu10.third {
    top: 55.2%;
    left: 26.7%;
}
main .contents .map ul.map_icon li.menu12 {
    top: 63%;
    left: 58.5%;
}
main .contents .map ul.map_icon li.menu16 {
    top: 43.5%;
    left: 35.8%;
}
main .contents .map ul.map_icon li.menu17 {
    top: 32.2%;
    left: 78.75%;
}
main .contents .map ul.map_icon li.menu17.second {
    top: 36.2%;
    left: 59.75%;
}
main .contents .map ul.map_icon li.menu18 {
    top: 75.2%;
    left: 33.85%;
}
main .contents .map ul.map_icon li.menu22 {
    top: 5.2%;
    left: 50%;
}
main .contents .map ul.map_icon li.menu22.second {
    top: 65.2%;
    left: 18.3%;
}
main .contents .map ul.map_icon li.menu23 {
	top: 69.2%;
    left: 26.7%;
}
main .contents .map ul.map_icon li.menu25 {
    top: 22.9%;
    left: 70.55%;
}
main .contents .map ul.map_icon li.menu25.second {
    top: 70.9%;
    left: 56.9%;
}
main .contents .map ul.map_icon li.menu26 {
    top: 58%;
    left: 54.2%;
}
main .contents .map ul.map_icon li.menu27 {
    top: 67.2%;
    left: 51.7%;
}
main .contents .map ul.map_icon li.menu28 {
    top: 18%;
    left: 65.1%;
}
main .contents .map ul.map_icon li.menu29 {
    top: 56.5%;
    left: 43.5%;
}
main .contents .map ul.map_icon li.menu45 {
    top: 37%;
    left: 47.8%;
}
.move-wrap.move {
  animation: moveUpLeft 4s linear forwards;
}
@keyframes moveUpLeft {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-50vw, -40vh);
  }
  100% {
    transform: translate(-120vw, -120vh);
  }
}
.dot{
	position: absolute;
    width: 1.25%;
    aspect-ratio: 1 / 1;
	background: #2E9FD2;
	border-radius: 50%;
	z-index: -1; 
	left: 25%;
	top: 32%;
	animation: moveDot 2.5s ease-in-out infinite alternate;
}

@keyframes moveDot{
  0% {
	left: 19%;
    top: 32%;
  }
  100% {
    left: 36%;
    top: 46%;
  }
}

@keyframes boltShowHideLeft {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  40% {
    clip-path: inset(0 0 0 0);
  }
  45% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes boltShowHideRight {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  40% {
    clip-path: inset(0 0 0 0); 
  }
  45% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}