@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: 30%;
    left: 22.2%;
    width: 2%;
    height: 4.7%;
}
.work .nod-wrap .head {
    position: absolute;
    width: 31%;
    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: 33%;
    height: auto;
    left: 25%;
    top: -21%;
    z-index: 11;
	transform-origin: 100% 100%;
	animation: handMove 4s ease-in-out infinite;
}
.work .nod-wrap .body {
	position: relative;
	z-index: 10;
}
.satellite {
    position: absolute;
    top: -1%;
    left: 50.5%;
    height: 8.5%;
    width: 9%;
}
.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);
  }
}
.speechbubble {
    position: absolute;
    top: 70.5%;
    left: 43.4%;
    width: 3.5%;
    height: 5.2%;
	z-index:11;
}
.speechbubble .nod-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
.speechbubble .nod-wrap img {
	position: absolute;
	height: auto;
	opacity: 0; 
}
.speechbubble .nod-wrap .left {
    width: 45%;
    bottom: 43%;
    left: -35%;
	animation: bubble-left 4s infinite;
}
.speechbubble .nod-wrap .right {
    width: 45%;
    top: -20%;
    right: -15%;
	animation: bubble-right 4s infinite;
}
@keyframes bubble-left {
  0%, 49.9% { opacity: 1; }
  50%,100%  { opacity: 0; }
}
@keyframes bubble-right {
  0%,49.9%  { opacity: 0; }
  50%,100%  { opacity: 1; }
}
.human_1 {
    position: absolute;
    top: 69%;
    left: 41%;
    height: 7%;
    width: 3%;
    z-index: 10;
}
.human_1 .nod-wrap .head {
    position: absolute;
    width: 40%;
    height: auto;
    left: 37%;
    top: -3%;
    z-index: 9;
	transform-origin: left top;
	animation: head_tilt var(--cycle) ease-in-out infinite;
}
.human_1 .nod-wrap .body {
    position: absolute;
    width: 73%;
    height: auto;
    left: 0%;
    top: 14%;
    z-index: 10;
}
.human_1 .nod-wrap .hand {
	position: absolute;
    width: 53%;
    height: auto;
    left: 57%;
    top: 30%;
    z-index: 11;
	transform-origin: left top;
	animation: hand_two_tilts var(--cycle) ease-in-out infinite;
}
:root { --cycle: 4s; }
@keyframes hand_two_tilts {
   0%  { transform: rotate(0deg); }
   8%  { transform: rotate(10deg); }
  16%  { transform: rotate(0deg); }
  20%  { transform: rotate(0deg); }
  28%  { transform: rotate(10deg); }
  36%  { transform: rotate(0deg); }
  50%  { transform: rotate(0deg); }
 100%  { transform: rotate(0deg); }
}
@keyframes head_tilt {
   0%  { transform: rotate(0deg); }
  49%  { transform: rotate(0deg); }
  58%  { transform: rotate(7deg); }
  70%  { transform: rotate(7deg); }
  80%  { transform: rotate(0deg); }
 100%  { transform: rotate(0deg); }
}
.human_2 {
	position: absolute;
    top: 55.8%;
    left: 27.8%;
    height: 3%;
    width: 1.6%;
}
.human_2 .nod-wrap .hand {
	position: relative;
	width: 100%;
	height: auto;
	transform-origin: right top;
	animation: handTiltRight 6s linear infinite;
}
@keyframes handTiltRight {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-12deg); }
  43%  { transform: rotate(-12deg); }
  60%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.human_3 {
    position: absolute;
    top: 83%;
    left: 12.98%;
    height: 6%;
    width: 2.4%;
}
.human_3 .nod-wrap .lefthand {
	position: absolute;
    width: 47%;
    height: auto;
    right: -16%;
    top: 38%;
    z-index: 8;
    transform-origin: right top;
	animation: handMove 4s ease-in-out infinite;
}
.human_3 .nod-wrap .head {
    position: absolute;
    width: 35%;
    height: auto;
    left: 36%;
    top: 1%;
    z-index: 9;
    transform-origin: left bottom;
    animation: nodding 2s ease-in-out infinite;
	animation: nodding 4s ease-in-out infinite;
}
.human_3 .nod-wrap .righthand {
    position: absolute;
    width: 39%;
    height: auto;
    left: 16%;
    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_4 {
	position: absolute;
    top: 40%;
    left: 35.58%;
    height: 4%;
    width: 2.4%;
}
.human_4 .nod-wrap .hand {
    position: absolute;
    width: 30%;
    height: auto;
    left: 4%;
    top: 26%;
    z-index: 8;
    transform-origin: 100% 100%;
	animation: handMove 4s ease-in-out infinite;
}
.human_4 .nod-wrap .head {
    position: absolute;
    width: 26%;
    height: auto;
    left: 41%;
    top: -8%;
    z-index: 9;
    transform-origin: 50% 95%;
	animation: nodding 4s ease-in-out infinite;
}
/* 顔：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: 57%;
    left: 59.58%;
    height: 10%;
    width: 2.4%;
}
.human_5 .nod-wrap .head {
    position: absolute;
    width: 30%;
    height: auto;
    left: 31%;
    top: 5%;;
    z-index: 8;
    transform-origin: 100% 100%;
	animation: nodding 4s ease-in-out infinite;
}
.human_5 .nod-wrap .hand {
	position: absolute;
    width: 40%;
    height: auto;
    right: 12%;
    top: 25%;
    z-index: 9;
	transform-origin: 0% 0%;
	animation: tapHand 8s ease-in-out infinite;
	will-change: transform;
}
.human_5 .nod-wrap .tab {
    position: absolute;
    width: 49%;
    height: auto;
    left: 1%;
    top: 35%;
    z-index: 10;
}
.human_5 .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); }
}
.human_6 {
	position: absolute;
    top: 45.8%;
    right: 45.8%;
    height: 4%;
    width: 2.6%;
}
.human_6 .nod-wrap .hand {
	position: absolute;
    width: 40%;
    height: auto;
    right: 1%;
    top: -1%;
	transform-origin: right top;
	animation: handTiltRight 6s linear infinite;
}
@keyframes handTiltRight {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-12deg); }
  43%  { transform: rotate(-12deg); }
  60%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.human_7 {
    position: absolute;
    top: 82.0%;
    right: 19.88%;
    height: 6.7%;
    width: 2.4%;
}
.human_7 .nod-wrap .head {
    position: absolute;
    width: 27%;
    height: auto;
    left: 36%;
    top: -5%;
    transform-origin: 100% 100%;
	animation: nodding 4s ease-in-out infinite;
}
.human_8 {
    position: absolute;
    top: 14%;
    right: 18%;
    height: 4%;
    width: 4%;
}
.human_8 .nod-wrap .lefthand,
.human_8 .nod-wrap .righthand {
  will-change: transform;
}
.human_8 .nod-wrap .lefthand:root,
.human_8 .nod-wrap .righthand:root{
  --cycle: 7s;
}
.human_8 .nod-wrap .lefthand {
    position: absolute;
    width: 39%;
    height: auto;
    left: 6%;
    top: 36%;
    z-index: 11;
  transform-origin: 100% 0%; 
  animation: leftHandTwoTilts var(--cycle) ease-in-out infinite;
}
@keyframes leftHandTwoTilts{
  0%      { transform: rotate(0deg); }
  8.6%    { transform: rotate(-10deg); }  /* ≒0.6s */
  17.1%   { transform: rotate(0deg); }    /* ≒1.2s */
  25.7%   { transform: rotate(-10deg); }  /* ≒1.8s */
  34.3%   { transform: rotate(0deg); }    /* ≒2.4s → 終了 */
  100%    { transform: rotate(0deg); }
}

.human_8 .nod-wrap .righthand {
    position: absolute;
    width: 40%;
    height: auto;
    right: 31%;
    top: 10%;
    z-index: 9;
  transform-origin: 12% 12%;
  animation: rightHandShower var(--cycle) ease-in-out infinite;
}
@keyframes rightHandShower{
  0%      { transform: rotate(0deg); }
  62%     { transform: rotate(0deg); }
  70%     { transform: rotate(22deg); }
  74%     { transform: rotate(26deg); }
  78%     { transform: rotate(22deg); }
  82%     { transform: rotate(27deg); }
  86%     { transform: rotate(23deg); }
  92%     { transform: rotate(0deg); }
  100%    { transform: rotate(0deg); }
}
.human_8 .nod-wrap .body {
    position: absolute;
    width: 41%;
    height: auto;
    left: 31%;
    top: 0%;
    z-index: 10;
}
.bolt_1 {
	position: absolute;
    top: 78.5%;
    left: 15.2%;
    height: 5%;
    width: 2%;
}
.bolt_2 {
    position: absolute;
    top: 83%;
    left: 51.6%;
    height: 5%;
    width: 2%;
}
.bolt_3 {
    position: absolute;
    top: 73.8%;
    right: 32.0%;
    height: 5%;
    width: 2%;
}
.bolt_4 {
    position: absolute;
    top: 27.5%;
    right: 16.7%;
    height: 5%;
    width: 2%;
}
.bolt_5 {
    position: absolute;
    top: 20%;
    right: 25.5%;
    height: 5%;
    width: 2%;
}
.bolt_6 {
	position: absolute;
    top: 6%;
    right: 52.2%;
    height: 5%;
    width: 2%;
}
: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); }
}

.bolt_1 .nod-wrap img,
.bolt_6 .nod-wrap img {
	position: absolute;
	bottom: 0;
	left: 0;
	animation: boltShowHideLeft 1.3s ease-in-out infinite;
}
.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;
}

.wifi_1 {
	position: absolute;
    top: 34.5%;
    right: 56%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_2 {
	position: absolute;
    top: 38.5%;
    right: 60.5%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_3 {
	position: absolute;
    top: 71.5%;
    right: 49%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_4 {
    position: absolute;
    top: 63.2%;
    right: 50.4%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_5 {
    position: absolute;
    top: 41.8%;
    right: 44.6%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_6 {
	position: absolute;
    top: 5.2%;
    right: 26%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_7 {
    position: absolute;
    top: 3.5%;
    right: 29.2%;
    width: 1.5%;
    aspect-ratio: 1 / 1;
}
.wifi_1 .nod-wrap img,
.wifi_2 .nod-wrap img,
.wifi_3 .nod-wrap img,
.wifi_4 .nod-wrap img,
.wifi_5 .nod-wrap img,
.wifi_6 .nod-wrap img,
.wifi_7 .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,
.wifi_3 .nod-wrap img.active,
.wifi_4 .nod-wrap img.active,
.wifi_5 .nod-wrap img.active,
.wifi_6 .nod-wrap img.active,
.wifi_7 .nod-wrap img.active {
	opacity: 1;
}
main .contents .map ul.map_icon li.menu01 {
    top: 2.2%;
    left: 18.2%;
}
main .contents .map ul.map_icon li.menu02 {
    top: 5.2%;
    left: 22.85%;
}
main .contents .map ul.map_icon li.menu03 {
	top: 15.5%;
    left: 21.5%;
}
main .contents .map ul.map_icon li.menu04 {
	top: 15.5%;
    left: 14.3%;
}
main .contents .map ul.map_icon li.menu05 {
    top: 27.8%;
    left: 12.2%;
}
main .contents .map ul.map_icon li.menu06 {
    top: 30.4%;
    left: 18.4%;
}
main .contents .map ul.map_icon li.menu07 {
    top: 5.2%;
    left: 13.6%;
}
main .contents .map ul.map_icon li.menu09 {
    top: 33.2%;
    left: 28.65%;
}
main .contents .map ul.map_icon li.menu10 {
	top: 15.2%;
    left: 67.5%;
}
main .contents .map ul.map_icon li.menu12 {
    top: 60.2%;
    left: 40.65%;
}
main .contents .map ul.map_icon li.menu17 {
    top: 52.2%;
    left: 22.6%;
}
main .contents .map ul.map_icon li.menu18 {
    top: 75.3%;
    left: 12.1%;
}
main .contents .map ul.map_icon li.menu18.second {
    top: 75.3%;
    left: 69.15%;
}
main .contents .map ul.map_icon li.menu19 {
    top: 23.4%;
    left: 85.45%;
}
main .contents .map ul.map_icon li.menu22 {
	top: 37.2%;
    left: 58%;
}
main .contents .map ul.map_icon li.menu25 {
    top: 34.2%;
    left: 84.9%;
}
main .contents .map ul.map_icon li.menu26 {
    top: 24.2%;
    left: 68.5%;
}
main .contents .map ul.map_icon li.menu28 {
    top: 36%;
    left: 33.5%;
}
main .contents .map ul.map_icon li.menu38 {
    top: 23.2%;
    left: 75.9%;
}
main .contents .map ul.map_icon li.menu38.second {
    top: 27.2%;
    left: 39.1%;
}
main .contents .map ul.map_icon li.menu39 {
    top: 8.2%;
    left: 78.5%;
}
main .contents .map ul.map_icon li.menu39.second {
    top: 83.2%;
    left: 27.9%;
}
main .contents .map ul.map_icon li.menu40 {
	top: 81.4%;
    left: 53.85%;
}
main .contents .map ul.map_icon li.menu40.second {
    top: 77.1%;
    left: 75.85%;
}
main .contents .map ul.map_icon li.menu40.third {
    top: 51.8%;
    left: 58.95%;
}
main .contents .map ul.map_icon li.menu41 {
    top: 1.2%;
    left: 65.6%;
}
.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: #2499D4;
	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: 35%;
  }
  100% {
    left: 30%;
    top: 43.8%;
  }
}
.dot_blank{
	position: absolute;
    width: 1.25%;
    aspect-ratio: 1 / 1;
	background: #2499D4;
	border-radius: 50%;
	z-index: -1;
	translate: -50% -50%;
	animation: dotCurve 4s ease-in-out infinite alternate;
}

/* カーブ形状を left/top (%) の組み合わせで完全再現 */
@keyframes dotCurve {
  0% {
    left: 27.5%;
    top: 27.2%;
  }
  45% {
    left: 36%;
    top: 20.8%;
  }
  70% {
    left: 56.8%;
    top: 36.9%;
  }
  100% {
	left: 64.7%;
    top: 31.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);
  }
}