@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: 27%;
    left: 22%;
    width: 2%;
    height: 5%;
}
.work .nod-wrap .head {
    position: absolute;
    width: 32%;
    height: auto;
    top: -13%;
    right: 14%;
    z-index: 11;
	transform-origin: 50% 95%;
	animation: nodding 4s ease-in-out infinite;
}
.work .nod-wrap .hand {
    position: absolute;
    width: 41%;
    height: auto;
    left: 21%;
    top: -28%;
    z-index: 11;
	transform-origin: 100% 100%;
	animation: handMove 4s ease-in-out infinite;
}
.work .nod-wrap .body {
	position: relative;
	z-index: 10;
}
.human_1 {
	position: absolute;
	top: 65.9%;
	left: 34.7%;
	height: 5%;
	width: 2%;
}
.human_1 .nod-wrap .hand_1,
.human_1 .nod-wrap .hand_2 {
  position: absolute;
  transform-origin: 110% 20%;
  animation: typingMotion 3.6s ease-in-out infinite;
}
.human_1 .nod-wrap .hand_1 {
	width: 82%;
	height: auto;
	left: 20%;
	top: 39%;
	z-index: 10;
}
.human_1 .nod-wrap .hand_2 {
    width: 73%;
    height: auto;
    left: 5%;
    top: 32%;
    z-index: 9;
	animation-delay: 0.18s;
}
@keyframes typingMotion {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(-8deg); }   /* ↓1 */
  10%  { transform: rotate(0deg); }    /* ↑戻る */
  15%  { transform: rotate(-6deg); }   /* ↓2 */
  20%  { transform: rotate(0deg); }    /* ↑戻る */
  25%  { transform: rotate(-7deg); }   /* ↓3 */
  30%  { transform: rotate(0deg); }    /* ↑戻る */
  40%  { transform: rotate(-5deg); }   /* ↓細かくもう1拍 */
  45%  { transform: rotate(0deg); }    /* ↑戻る */
  80%  { transform: rotate(0deg); }    /* 静止 */
  100% { transform: rotate(0deg); }	
}
.bolt_1 {
	position: absolute;
    top: 77.5%;
    left: 22.15%;
    height: 5%;
    width: 2%;
}
.bolt_2 {
	position: absolute;
    top: 5%;
    right: 20.8%;
    height: 6%;
    width: 8%;
}
.bolt_3 {
    position: absolute;
    top: 6.2%;
    right: 17.1%;
    height: 5%;
    width: 2%;
}
.bolt_4 {
    position: absolute;
    top: 7%;
    right: 46.5%;
    height: 5%;
    width: 2%;
}
.bolt_5 {
    position: absolute;
    top: 4.2%;
    right: 35.82%;
    height: 6%;
    width: 8%;
}
.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;
}
.bolt_1 .nod-wrap img,
.bolt_5 .nod-wrap img {
	animation: boltShowHideRight 1.3s ease-in-out infinite;
}
.bolt_3 .nod-wrap img,
.bolt_4 .nod-wrap img,
.bolt_2 .nod-wrap img {
	animation: boltShowHideLeft 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); }
}
.drone {
    position: absolute;
    top: 74%;
    left: 62.2%;
    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: 60.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);
  }
}
.wifi {
    position: absolute;
    top: 88.2%;
    right: 29.3%;
    width: 1.5%;
	aspect-ratio: 1 / 1;
}
.wifi .nod-wrap img {
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s;
}
.wifi .nod-wrap img.active {
	opacity: 1;
}
.human_2 {
	position: absolute;
    top: 61.8%;
    right: 34.85%;
    height: 3.9%;
    width: 1.2%;
}
.human_2 .nod-wrap .head {
	position: absolute;
	top: -41%;
    left: 60%;
    width: 31%;
	transform: translateX(-50%);
	transform-origin: center bottom;
	animation: faceMotion 8s ease-in-out infinite;
}

.human_2 .nod-wrap .hand {
	position: absolute;
	top: -20%;
    left: 56%;
    width: 34%;
	transform-origin: right center;
	transform: translateX(-50%) rotate(0deg);
	animation: handMotion 8s ease-in-out infinite;
}

/* === 手の動き === */
@keyframes handMotion {
  0%   { transform: translateX(-50%) rotate(0deg); }        /* 初期 */
  10%  { transform: translateX(-50%) rotate(-50deg); }      /* 手を挙げる */
  25%  { transform: translateX(-50%) rotate(-20deg); }      /* タップ1 */
  30%  { transform: translateX(-50%) rotate(-25deg); }      /* タップ2 */
  40%  { transform: translateX(-50%) rotate(0deg); }        /* 戻る */
  60%  { transform: translateX(-50%) rotate(-50deg); }      /* 再び手を挙げる */
  80%  { transform: translateX(-50%) rotate(0deg); }        /* 戻る */
  100% { transform: translateX(-50%) rotate(0deg); }
}

/* === 顔の動き === */
@keyframes faceMotion {
  0%, 20%  { transform: translateX(-50%) rotate(0deg); }    /* 初期 */
  30%      { transform: translateX(-50%) rotate(-7deg); }  /* 顔を上げる */
  55%      { transform: translateX(-50%) rotate(-7deg); }  /* 2秒保持 */
  70%,100% { transform: translateX(-50%) rotate(0deg); }    /* 戻る */
}
.human_4 {
	position: absolute;
	top: 54.5%;
	right: 30.2%;
	height: 6%;
	width: 3%;
}
.human_4 .nod-wrap .righthand {
    position: absolute;
    width: 34%;
    height: auto;
    left: -2%;
    top: 33%;
    z-index: 8;
    transform-origin: 100% 100%;
	animation: handMove 4s ease-in-out infinite;
}
.human_4 .nod-wrap .head {
	position: absolute;
    width: 23%;
    height: auto;
    left: 37%;
    top: 2px;
    z-index: 9;
    transform-origin: 50% 95%;
    animation: nodding 2s ease-in-out infinite;
	animation: nodding 4s ease-in-out infinite;
}
.human_4 .nod-wrap .lefthand {
    position: absolute;
    width: 26%;
    height: auto;
    right: 25%;
    top: 15%;
    z-index: 10;
}
/* 顔：2回うなずく（そのまま） */
@keyframes nodding {
  0%, 100% { transform: rotate(0deg); }
  10%      { transform: rotate(-12deg); }
  15%      { transform: rotate(-3deg); }
  25%      { transform: rotate(-12deg); }
  30%      { transform: rotate(-3deg); }
  40%, 100%{ transform: rotate(0deg); }
}

/* 腕：控えめにサッと動かす */
@keyframes handMove {
  0%, 50%, 100% { transform: rotate(0deg); }
  60%           { transform: rotate(6deg); }  /* ←小さめ */
  65%           { transform: rotate(2deg); }  /* ←控えめに戻す */
  70%           { transform: rotate(0deg); }
}
.human_5 {
    position: absolute;
    top: 26.8%;
    right: 32.5%;
    height: 8%;
    width: 4%;
}
.human_5 .nod-wrap .head {
	position: absolute;
    width: 20%;
    height: auto;
    top: -12%;
    right: 34%;
    z-index: 11;
	transform-origin: 50% 95%;
	animation: nodding 4s ease-in-out infinite;
	animation-delay: 0s;
}
.human_5 .nod-wrap .hand {
    position: absolute;
    width: 45%;
    height: auto;
    left: 5%;
    top: -6%;
    z-index: 9;
	transform-origin: 100% 100%;
	animation: handMove 4s ease-in-out infinite;
	animation-delay: 0s;
}
.human_5 .nod-wrap .body {
	position: relative;
	z-index: 10;
}
.human_7 {
    position: absolute;
    top: 61.8%;
    right: 17%;
    height: 10%;
    width: 4%;
}
.human_7 .nod-wrap .head {
	position: absolute;
	width: 25%;
	height: auto;
	top: -5%;
	right: 37%;
	z-index: 11;
	transform-origin: 38% 82%;
	animation: headLookUpFast 5s ease-in-out infinite;
}
.human_7 .nod-wrap .foot {
	position: absolute;
	width: 19%;
	height: auto;
	top: 57%;
	right: 54%;
	z-index: 11;
	transform-origin: 22% 14%;
	animation: footLift3Times 5.4s ease-in-out infinite;
}
.human_7 .nod-wrap .body {
	position: relative;
	z-index: 10;
}
@keyframes headLookUpFast{
  0%   { transform: rotate(0deg) translate(0,0); }
  16%  { transform: rotate(12deg) translate(2%,-4%); } /* 0.8秒で上を向く */
  56%  { transform: rotate(12deg) translate(2%,-4%); } /* 約2秒キープ */
  84%  { transform: rotate(0deg) translate(0,0); }     /* 約1.4秒で戻る */
  100% { transform: rotate(0deg) translate(0,0); }     /* 少し休止 */
}
/* ===== 足：持ち上げて戻す（1.2sループ） ===== */
@keyframes footLift3Times{
  /* 1回目 */
  0%   { transform: rotate(0deg) translateY(0); }
  7%   { transform: rotate(-22deg) translateY(-10%); }
  14%  { transform: rotate(0deg) translateY(0); }

  /* 2回目 */
  21%  { transform: rotate(-22deg) translateY(-10%); }
  28%  { transform: rotate(0deg) translateY(0); }

  /* 3回目 */
  35%  { transform: rotate(-22deg) translateY(-10%); }
  42%  { transform: rotate(0deg) translateY(0); }

  /* 3秒休止ゾーン */
  100% { transform: rotate(0deg) translateY(0); }
}
main .contents .map ul.map_icon li.menu01 {
    top: -2.5%;
    left: 17.6%;
}
main .contents .map ul.map_icon li.menu02 {
    top: 1.2%;
    left: 22.4%;
}
main .contents .map ul.map_icon li.menu03 {
    top: 12.4%;
    left: 21.45%;
}
main .contents .map ul.map_icon li.menu04 {
    top: 12.4%;
    left: 13.8%;
}
main .contents .map ul.map_icon li.menu05 {
    top: 25.2%;
    left: 11.15%;
}
main .contents .map ul.map_icon li.menu06 {
    top: 30.4%;
    left: 17.85%;
}
main .contents .map ul.map_icon li.menu07 {
    top: 1.2%;
    left: 12.7%;
}
main .contents .map ul.map_icon li.menu09 {
	top: 48.75%;
    left: 23.6%;
}
main .contents .map ul.map_icon li.menu10 {
	top: 45.2%;
    left: 27.5%;
}
main .contents .map ul.map_icon li.menu12 {
    top: 56.4%;
    left: 37.1%;
}
main .contents .map ul.map_icon li.menu16 {
	top: 41.6%;
    left: 31.5%;
}
main .contents .map ul.map_icon li.menu22 {
	top: 55.55%;
    left: 63.5%;
}
main .contents .map ul.map_icon li.menu22.second {
	top: 8.55%;
    left: 65.5%;
}
main .contents .map ul.map_icon li.menu42 {
    top: 10.4%;
    left: 28.4%;
}
main .contents .map ul.map_icon li.menu43 {
	top: 85.2%;
    left: 71.3%;
}
.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: #1F96D4;
	border-radius: 50%;
	z-index: -1;
	translate: -50% -50%;
	animation: dotCurve 3.5s ease-in-out infinite alternate;
}

/* カーブ形状を left/top (%) の組み合わせで完全再現 */
@keyframes dotCurve {
  0% {
    left: 18.9%;
    top: 37.6%;
  }
  45% {
    left: 18.9%;
    top: 53%;
  }
  70% {
    left: 25.5%;
    top: 59.7%;
  }
  100% {
    left: 26.7%;
    top: 59.1%;
  }
}


@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);
  }
}