@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;
}
.human_1 {
    position: absolute;
    top: 47%;
    right: 53.2%;
    height: 6%;
    width: 3%;
}
.human_1 .nod-wrap .righthand {
    position: absolute;
    width: 34%;
    height: auto;
    left: -1%;
    top: 33%;
    z-index: 8;
    transform-origin: 100% 100%;
	animation: handMove 4s ease-in-out infinite;
}
.human_1 .nod-wrap .head {
	position: absolute;
    width: 23%;
    height: auto;
    left: 37%;
    top: 4%;
    z-index: 9;
    transform-origin: 50% 95%;
    animation: nodding 2s ease-in-out infinite;
	animation: nodding 4s ease-in-out infinite;
}
.human_1 .nod-wrap .lefthand {
    position: absolute;
    width: 26%;
    height: auto;
    right: 28%;
    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_2 {
    position: absolute;
    top: 27.25%;
    right: 41.5%;
    height: 2%;
    width: 1.7%;
}
.human_2 .nod-wrap .hand {
	position: relative;
	width: 100%;
	height: auto;
  transform-origin: left top;
  animation: handTilt 8s ease-in-out infinite;
}
@keyframes handTilt {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(10deg); }
  25%  { transform: rotate(10deg); }
  35%  { transform: rotate(0deg); }
  45%  { transform: rotate(0deg); }
  50%  { transform: rotate(-10deg); }
  75%  { transform: rotate(-10deg); }
  90%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.human_3 {
    position: absolute;
    top: 43.2%;
    right: 40.5%;
    height: 10%;
    width: 3%;
}
.human_3 .nod-wrap .head {
	position: absolute;
	width: 29%;
    height: auto;
    top: 1%;
    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;
    left: 17%;
    top: 20%;
    z-index: 9;
  transform-origin: left 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(-3px);
  }
  58% {
    transform: rotate(25deg) translateX(-3px);
  }
  80% {
    transform: rotate(0deg) translateX(0);
  }
  100% {
    transform: rotate(0deg) translateX(0);
  }
}
.human_4 {
    position: absolute;
    top: 55.5%;
    left: 36.5%;
    height: 10.5%;
    width: 2%;
}
.human_4 .nod-wrap .hand {
    position: absolute;
    width: 71%;
    height: auto;
    top: 24%;
    left: 36%;
  transform-origin: left top;
  animation: tinyTripleTouch 2.0s ease-in-out infinite;
}
@media screen and (max-width:764px) {
.human_4 .nod-wrap .hand {
    left: 23%;
}
}
@keyframes tinyTripleTouch {
  0% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  18% {
    transform: rotate(-2deg) translate(1.5px, -1.5px);
  }
  33% {
    transform: rotate(-1deg) translate(0.5px, -0.5px);
  }
  55% {
    transform: rotate(1.5deg) translate(-1.5px, 2px);
  }
  70% {
    transform: rotate(0.5deg) translate(0.5px, 1px);
  }
  85% {
    transform: rotate(1.5deg) translate(1.5px, 2px);
  }
  100% {
    transform: rotate(0deg) translate(0px, 0px);
  }
}
.human_5 {
	position: absolute;
    top: 83.2%;
    right: 29.5%;
    height: 8%;
    width: 3%;
}
.human_5 .nod-wrap .head {
	position: absolute;
    width: 22%;
    height: auto;
    top: 2%;
    right: 30%;
    z-index: 10;
  transform-origin: left bottom;
  animation: nodHead 2.6s ease-in-out infinite;
}
.human_5 .nod-wrap .hand {
    position: absolute;
    width: 30%;
    height: auto;
    right: 24%;
    top: 25%;
    z-index: 11;
  transform-origin: right top;
  animation: tinyTap 2.6s ease-in-out infinite;
}
@keyframes nodHead {
  0%, 40% {
    transform: rotate(0deg);
  }
  52% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes tinyTap {
  0% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  12% {
    transform: rotate(-3deg) translate(1px, -1px);
  }
  22% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  32% {
    transform: rotate(-3deg) translate(1px, -1px);
  }
  40% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  70% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  100% {
    transform: rotate(0deg) translate(0px, 0px);
  }
}
.train {
    position: absolute;
    top: 3.5%;
    right: 15%;
    height: 26%;
    width: 24.7%;
}
.train .nod-wrap .train {
	position: absolute;
	width: 100%;
	height: auto;
	right: 0%;
	top: 0%;
	display: inline-block;
	transform-origin: 50% 60%;
	will-change: transform;
	animation: shakeCycle 5s linear infinite;
}
@keyframes shakeCycle {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  8%   { transform: translate(0px, -2.2px) rotate(0.02deg); }
  12%  { transform: translate(0px,  1.8px) rotate(-0.02deg); }
  18%  { transform: translate(0.4px, -1.1px) rotate(0.03deg); }
  24%  { transform: translate(-0.4px, 0.9px) rotate(-0.03deg); }
  32%  { transform: translate(0.7px, -0.6px) rotate(0.04deg); }
  40%  { transform: translate(-0.6px, 1.0px) rotate(-0.03deg); }
  48%  { transform: translate(0px, -2.5px) rotate(0.03deg); }
  54%  { transform: translate(0px,  1.7px) rotate(-0.02deg); }
  60%  { transform: translate(0px, 0px) rotate(0deg); }
  60.01% { transform: translate(0px, 0px) rotate(0deg); }
  100%   { transform: translate(0px, 0px) rotate(0deg); }
}
.wifi {
    position: absolute;
    top: 52%;
    right: 46.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;
}
.bolt_1 {
	position: absolute;
    top: 80%;
    left: 24.3%;
    height: 5%;
    width: 2%;
	z-index: 9;
}
.bolt_2 {
    position: absolute;
    top: 7%;
    left: 35.2%;
    height: 5%;
    width: 2%;
}
.bolt_3 {
    position: absolute;
    top: 6%;
    left: 42%;
    height: 5%;
    width: 2%;
}
.bolt_4 {
	position: absolute;
    top: 7.2%;
    right: 13.2%;
    height: 5%;
    width: 2%;
}
.bolt_5 {
    position: absolute;
    top: 87%;
    right: 24.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 {
	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: boltShowHideRight 1.3s ease-in-out infinite;
}
.bolt_5 .nod-wrap img {
	animation: boltShowHideLeft 1.3s ease-in-out infinite;
}
:root {
  --shake-d: 1px; /* 揺れ幅 */
  --shake-r: 1.2deg;/* 回転角度 */
}
@keyframes shake-cycle {
  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); }
  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); }
  50%  { transform: translate(0,0) rotate(0); }
  100% { transform: translate(0,0) rotate(0); }
}
.car {
    position: absolute;
    top: 70%;
    right: 75.7%;
    width: 10%;
    height: 11.7%;
}
.car .nod-wrap img {
	position: absolute;
	bottom: 0;
	left: 0;
}
.car .nod-wrap img.parts {
	left: 51.4%;
    top: 32%;
    bottom: auto;
    width: 61.85%;
    z-index: 5;
    height: 66%;
}
.car .nod-wrap img.cars {
	z-index:4;
}
.cars.move {
  --dx: -60vw;
  --dy: 40vh;
  --car-speed: 5s;

  animation: moveDownLeft var(--car-speed) linear 1; 
  animation-fill-mode: forwards; 
}

@keyframes moveDownLeft {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}
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.menu08 {
    top: 39.1%;
    left: 29.5%;
}
main .contents .map ul.map_icon li.menu10 {
	top: 36.3%;
    left: 32.1%;
}
main .contents .map ul.map_icon li.menu11 {
    top: 56.1%;
    left: 39.5%;
}
main .contents .map ul.map_icon li.menu12 {
    top: 7.3%;
    left: 37.5%;
}
main .contents .map ul.map_icon li.menu12.second {
    top: 51.3%;
    left: 46.5%;
}
main .contents .map ul.map_icon li.menu13 {
    top: 37.5%;
    left: 68.7%;
}
main .contents .map ul.map_icon li.menu14 {
    top: 32.5%;
    left: 41.1%;
}
main .contents .map ul.map_icon li.menu15 {
    top: 36.5%;
    left: 35.2%;
}
main .contents .map ul.map_icon li.menu16 {
    top: 64.3%;
    left: 45.5%;
}
main .contents .map ul.map_icon li.menu17 {
	top: 49.9%;
    left: 55.9%;
}
main .contents .map ul.map_icon li.menu18 {
    top: 7.3%;
    left: 45.5%;
}
main .contents .map ul.map_icon li.menu18.second {
	top: 80.3%;
    left: 27.5%;
}
main .contents .map ul.map_icon li.menu19 {
    top: 66.1%;
    left: 18.5%;
}
main .contents .map ul.map_icon li.menu20 {
    top: 79.3%;
    left: 66.2%;
}
main .contents .map ul.map_icon li.menu21 {
    top: 3.5%;
    left: 66.9%;
}
main .contents .map ul.map_icon li.menu45 {
    top: 26.2%;
    left: 52.7%;
}
.dot{
	position: absolute;
    width: 1.25%;
    aspect-ratio: 1 / 1;
	background: #2396D1;
	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: 32%;
    top: 45%;
  }
}


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