@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.5%;
    left: 22.5%;
    width: 1.8%;
    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: 71%;
    left: 19%;
    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: 71.9%;
    left: 37.3%;
    height: 6%;
    width: 2%;
}
.human_2 .nod-wrap .hand {
	position: relative;
	width: 100%;
	height: auto;
	transform-origin: 0% 0%;
	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: 57.2%;
    left: 28.4%;
    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: 76%;
    height: auto;
    left: -34%;
    top: 42%;
    z-index: 11;
}
.human_3 .nod-wrap .hand_2 {
    width: 24%;
    height: auto;
    left: 13%;
    top: 40%;
    z-index: 9;
	animation-delay: 0.18s;
}
.human_3 .nod-wrap .body {
	position: relative;
    z-index: 10;
}
@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: 28.3%;
    right: 37.78%;
    height: 6%;
    width: 3%;
}
.human_4 .nod-wrap .righthand {
    position: absolute;
    width: 30%;
    height: auto;
    left: 4%;
    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: 36%;
    top: 0;
    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: 27%;
    height: auto;
    right: 30%;
    top: 12%;
    z-index: 10;
}
@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: 63.9%;
    right: 21.35%;
    height: 10%;
    width: 3.8%;
}
.human_5 .nod-wrap .head {
    position: absolute;
    width: 20%;
    height: auto;
    top: -8%;
    right: 32%;
    z-index: 11;
	transform-origin: center bottom;
	animation: faceTurnDown 12s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.human_5 .nod-wrap .hand {
	position: absolute;
	width: 25%;
	height: auto;
	left: 38%;
	top: 13%;
	transform-origin: top left;
	animation: handMoves 12s linear infinite;
	animation-delay: 1.8s;
}
.human_5 .nod-wrap .tab {
    position: absolute;
    width: 31%;
    height: auto;
    right: 11%;
    top: 23%;
    z-index: 13;
}
.human_5 .nod-wrap .body {
	position: relative;
	z-index: 10;
}
@keyframes handMoves {
  0%   { transform: rotate(0deg); }
  3%   { transform: rotate(5deg); }
  6%   { transform: rotate(0deg); }
  9%   { transform: rotate(5deg); }
  12%  { transform: rotate(0deg); }
  15%  { transform: rotate(5deg); }
  18%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes faceTurnDown {
  0%   { transform: rotate(0deg) scaleX(-1); }
  3%   { transform: rotate(0deg) scaleX(-1); } 
  15%  { transform: rotate(15deg) scaleX(-1); }
  55%  { transform: rotate(15deg) scaleX(-1); }
  65%  { transform: rotate(0deg) scaleX(-1); }
  100% { transform: rotate(0deg) scaleX(-1); }
}
.robot  {
    position: absolute;
	top: 49.8%;
    right: 28.2%;
    height: 4%;
    width: 2%;
}
.robot  .nod-wrap img {
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translate(-50%, -50%);
	animation: robotMove 13s ease-in-out infinite;
}
@keyframes robotMove {
  0% {
    transform: translate(-50%, -50%);
  }
  20% {
    transform: translate(calc(-50% - 36%), calc(-50% - 27%));
  }
  40% {
    transform: translate(calc(-50% + 45%), calc(-50% + 36%));
  }
  60% {
    transform: translate(-50%, -50%);
  }
  80% {
    transform: translate(calc(-50% - 54%), calc(-50% + 27%));
  }
  85% {
    transform: translate(calc(-50% - 54%), calc(-50% + 27%));
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
.bolt_1 {
    position: absolute;
    top: 79.5%;
    left: 24.7%;
    height: 5%;
    width: 2%;
}
.bolt_2 {
	position: absolute;
    top: 67%;
    left: 21.6%;
    height: 5%;
    width: 2%;
}
.bolt_3 {
	position: absolute;
    top: 79%;
    right: 12.5%;
    height: 5%;
    width: 2%;
}
.bolt_4 {
    position: absolute;
    top: 60.5%;
    right: 20%;
    height: 5%;
    width: 2%;
}
.bolt_5 {
    position: absolute;
    top: 17.5%;
    right: 30.5%;
    height: 5%;
    width: 2%;
}
.bolt_6 {
    position: absolute;
    top: 59%;
    left: 42.5%;
    height: 5%;
    width: 2%;
}
.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,
.bolt_6 .nod-wrap img {
	position: absolute;
	bottom: 0;
	left: 0;
}
.bolt_1 .nod-wrap img,
.bolt_2 .nod-wrap img,
.bolt_3 .nod-wrap img,
.bolt_4 .nod-wrap img {
	animation: boltShowHideLeft 1.3s ease-in-out infinite;
}
.bolt_5 .nod-wrap img,
.bolt_6 .nod-wrap img {
	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); }
}
.wifi_1 {
    position: absolute;
    top: 48.5%;
    right: 39%;
    width: 1.5%;
	aspect-ratio: 1 / 1;
}
.wifi_2 {
    position: absolute;
    top: 25.2%;
    right: 40%;
    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;
}
.speechbubble {
	position: absolute;
	top: 74.5%;
	left: 20.4%;
	width: 3.5%;
	height: 2.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%;
	top: 0;
	left: 0;
	animation: bubble-left 4s infinite;
}
.speechbubble .nod-wrap .right {
	width: 45%;
	top: 0;
	right: 0;
	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; }
}
main .contents .map ul.map_icon li.menu01 {
    top: 2.2%;
    left: 18.3%;
}
main .contents .map ul.map_icon li.menu02 {
    top: 5.2%;
    left: 22.8%;
}
main .contents .map ul.map_icon li.menu03 {
    top: 16.5%;
    left: 21.5%;
}
main .contents .map ul.map_icon li.menu04 {
    top: 16.5%;
    left: 14%;
}
main .contents .map ul.map_icon li.menu05 {
    top: 27.7%;
    left: 11.75%;
}
main .contents .map ul.map_icon li.menu06 {
    top: 30.4%;
    left: 18.25%;
}
main .contents .map ul.map_icon li.menu07 {
    top: 5.2%;
    left: 13.75%;
}
main .contents .map ul.map_icon li.menu10 {
	top: 6.5%;
    left: 67.3%;
}
main .contents .map ul.map_icon li.menu17 {
    top: 66.2%;
    left: 58%;
}
main .contents .map ul.map_icon li.menu18 {
	top: 59.5%;
    left: 45.5%;
}
main .contents .map ul.map_icon li.menu18.second {
    top: 19.5%;
    left: 70%;
}
main .contents .map ul.map_icon li.menu24 {
	top: 57.5%;
    left: 75.7%;
}
main .contents .map ul.map_icon li.menu25 {
    top: 36.7%;
    left: 74.45%;
}
main .contents .map ul.map_icon li.menu26 {
	top: 35.8%;
    left: 65.55%;
}
main .contents .map ul.map_icon li.menu27 {
    top: 40%;
    left: 52.55%;
}
main .contents .map ul.map_icon li.menu29 {
    top: 46%;
    left: 28%;
}
main .contents .map ul.map_icon li.menu44 {
    top: 47.2%;
    left: 70.5%;
}
.dot{
	position: absolute;
    width: 1.25%;
    aspect-ratio: 1 / 1;
	background: #2C9ED3;
	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: 34%;
  }
  100% {
    left: 50%;
    top: 60%;
  }
}



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