@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: 2%;
    height: 6%;
}
.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: -20%;
    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: 70%;
    left: 11.2%;
    width: 3.2%;
    height: 11%;
}
.human_1 .nod-wrap .head {
    position: absolute;
    width: 35%;
    height: auto;
    top: -8%;
    right: 37%;
    z-index: 11;
	transform-origin: 50% 95%;
	animation: nodding 4s ease-in-out infinite;
}
.human_1 .nod-wrap .hand {
    position: absolute;
	width: 45%;
    height: auto;
    right: -1%;
    top: -13%;
	z-index: 9;
	transform-origin: 100% 100%;
	animation: handMove 4s ease-in-out infinite;
}
.human_1 .nod-wrap .body {
	position: relative;
	z-index: 10;
}
@keyframes handMove {
  0%, 10%, 20%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(8deg); }
  10% { transform: rotate(0deg); }
}
@keyframes nodding {
  0%, 25%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(12deg); }
  35% { transform: rotate(3deg); }
  45% { transform: rotate(12deg); }
  50% { transform: rotate(3deg); }
  60% { transform: rotate(0deg); }
}
.human_2 {
	position: absolute;
    top: 51%;
    left: 33.4%;
    height: 3%;
    width: 2.1%;
}
.human_2 .nod-wrap .hand {
	position: relative;
	width: 100%;
	height: auto;
	transform-origin: 120% 20%;
	animation: handTiltLeft 4s ease-in-out infinite;
}
@keyframes handTiltLeft {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-10deg); }
  70%  { transform: rotate(-10deg); } 
  100% { transform: rotate(0deg); } 
}
.human_3 {
  position: absolute;
  top: 50.9%;
  left: 53.2%;
  height: 5%;
  width: 2%;
}
.human_3 .nod-wrap .hand_1,
.human_3 .nod-wrap .hand_2 {
  position: absolute;
  transform-origin: 110% 20%;
  animation: typingMotion 3.6s ease-in-out infinite;
}
.human_3 .nod-wrap .hand_1 {
	width: 82%;
	height: auto;
	left: 20%;
	top: 39%;
	z-index: 10;
}
.human_3 .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); }	
}
.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: noddings 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;
}
/* 顔：2回うなずく（そのまま） */
@keyframes noddings {
  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 .nod-wrap .body {
	position: relative;
	z-index: 10;
}
.human_6 {
    position: absolute;
    top: 15.9%;
    right: 45.2%;
    height: 10%;
    width: 4%;
}
.human_6 .nod-wrap .head {
    position: absolute;
    width: 22%;
    height: auto;
    top: -10%;
    right: 32%;
    z-index: 11;
	transform-origin: 50% 95%;
	animation: tiltLoop 6s ease-in-out infinite;
}
.human_6 .nod-wrap .hand {
    position: absolute;
    width: 21%;
    height: auto;
    right: 25%;
    top: 13%;
    z-index: 12;
	transform-origin: 100% 100%;
	animation: handMoves 6s ease-in-out infinite;
	animation-delay: 1.8s;
}
.human_6 .nod-wrap .body {
	position: relative;
	z-index: 10;
}
@keyframes handMoves {
  /* --- 通常時（右向きの間）：動かない --- */
  0%, 34% {
    transform: rotate(0deg);
  }

  /* === 1回目 === */
  35%, 38%   { transform: rotate(0deg); }
  36.5%      { transform: rotate(6deg); }  /* 半分だけ動く */
  38%, 43%   { transform: rotate(6deg); }  /* 停止 */
  43%, 46%   { transform: rotate(0deg); }  /* 戻る */

  /* === 2回目 === */
  46%, 49%   { transform: rotate(0deg); }
  47.5%      { transform: rotate(6deg); }
  49%, 54%   { transform: rotate(6deg); }
  54%, 57%   { transform: rotate(0deg); }

  /* === 3回目 === */
  57%, 60%   { transform: rotate(0deg); }
  58.5%      { transform: rotate(6deg); }
  60%, 65%   { transform: rotate(6deg); }  /* 最後に止まる */
  65.1%      { transform: rotate(0deg); }  /* ← 反転解除と同時に戻す */

  /* --- 反転解除後（65〜100%）：動かない --- */
  65%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes tiltLoop {

  /* --- 左向き（35〜65%）：下を向いて静止 --- */
  0% { transform: rotate(-10deg) scaleX(-1); }
  70% { transform: rotate(-10deg) scaleX(-1); }
  75% { transform: rotate(-10deg) scaleX(-1); }
  80% { transform: rotate(-10deg) scaleX(-1); } /* ← ゆっくり戻る */

  /* --- 残りは小休止（80〜100%） --- */
  100% { transform: rotate(-10deg) scaleX(-1); }
}
.human_7 {
    position: absolute;
    top: 61.8%;
    right: 17%;
    height: 11%;
    width: 4%;
}
.human_7::before{
	content: "！";
	position: absolute;
	left: 50%;
	top: -1.1em;
	transform: translateX(-50%) translateY(6px) scale(0.6) rotate(-8deg);
	opacity: 0;
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
	color: #ff3b30;
	text-shadow: 0 2px 6px rgba(0,0,0,.25);
	pointer-events: none;
	z-index: 50;
}
.human_7.runaway::before{
  animation:
    exclaimIn 0.9s cubic-bezier(.2,.9,.2,1.1) forwards,
    exclaimFloat 1.4s ease-in-out 0.9s infinite alternate,
    exclaimOut 0.8s ease 3s forwards; 
}
@keyframes exclaimIn{
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.6);
  }
  60%{
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(1.15);
  }
  100%{
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes exclaimFloat{
  from{ transform: translateX(-50%) translateY(0) scale(1); }
  to  { transform: translateX(-50%) translateY(-3px) scale(1.02); }
}
@keyframes exclaimOut{
  0%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100%{ opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); }
}
.human_7.runaway{
  animation: human7FadeOut 1.2s ease forwards 3s; 
}
@keyframes human7FadeOut {
  0%{
    opacity: 1;
    transform: translateY(0);
  }
  100%{
    opacity: 0;
    transform: translateY(10px);
  }
}
@media (prefers-reduced-motion: reduce){
  .human_7.runaway::before{
    animation: none;
    opacity: 1;
  }
}
.human_7 .nod-wrap .head {
	position: absolute;
	width: 25%;
	height: auto;
	top: 0%;
	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); }
}
.wifi {
    position: absolute;
	top: 51.8%;
    right: 30%;
    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;
}
.bolt_1 {
    position: absolute;
    top: 64%;
    left: 11.5%;
    height: 5%;
    width: 2%;
}
.bolt_2 {
    position: absolute;
    top: 9%;
    right: 15.5%;
    height: 5%;
    width: 2%;
}
.bolt_1 .nod-wrap img,
.bolt_2 .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); }
}
.drone {
	position: absolute;
	top: 60%;
	left: 42.2%;
	height: 5%;
	width: 6%;
}
.drone .nod-wrap .drone1 {
	position: relative;
	width: 100%;
	height: auto;
	animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
main .contents .map ul.map_icon li.menu01 {
    top: 2.2%;
    left: 17.85%;
}
main .contents .map ul.map_icon li.menu02 {
    top: 5.2%;
    left: 22.5%;
}
main .contents .map ul.map_icon li.menu03 {
    top: 15.2%;
    left: 21.5%;
}
main .contents .map ul.map_icon li.menu04 {
	top: 15.2%;
    left: 13.8%;
}
main .contents .map ul.map_icon li.menu05 {
    top: 27.2%;
    left: 11.75%;
}
main .contents .map ul.map_icon li.menu06 {
    top: 30.4%;
    left: 17.85%;
}
main .contents .map ul.map_icon li.menu07 {
	top: 5.2%;
    left: 13%;
}
main .contents .map ul.map_icon li.menu10 {
    top: 38.2%;
    left: 44.5%;
}
main .contents .map ul.map_icon li.menu12 {
	top: 47.2%;
	left: 55%;
}
main .contents .map ul.map_icon li.menu12.second {
    top: -0.7%;
    left: 76.5%;
}
main .contents .map ul.map_icon li.menu18 {
    top: 63.2%;
    left: 27.9%;
}
main .contents .map ul.map_icon li.menu26 {
	top: 49.5%;
    left: 78%;
}
main .contents .map ul.map_icon li.menu30 {
    top: 39.2%;
    left: 63.75%;
}
main .contents .map ul.map_icon li.menu31 {
    top: 56.4%;
    left: 69.65%;
}
main .contents .map ul.map_icon li.menu31.second {
    top: 10.4%;
    left: 78.65%;
}
main .contents .map ul.map_icon li.menu32 {
    top: 50.5%;
    left: 60.65%;
}
main .contents .map ul.map_icon li.menu33 {
    top: 28.52%;
    left: 55.85%;
}
main .contents .map ul.map_icon li.menu34 {
    top: 53.25%;
    left: 63.75%;
}
main .contents .map ul.map_icon li.menu35 {
	top: 69.92%;
    left: 14.85%;
}
main .contents .map ul.map_icon li.menu36 {
    top: 44.8%;
    left: 34.58%;
}
main .contents .map ul.map_icon li.menu37 {
    top: 19.2%;
    left: 43.15%;
}
main .contents .map ul.map_icon li.menu46 {
	top: 16.4%;
    left: 54.65%;
}
.dot{
	position: absolute;
    width: 1.25%;
    aspect-ratio: 1 / 1;
	background: #1B94D3;
	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);
  }
}