@charset "UTF-8";
/* common */
.z-index1 {
  z-index: 1; }

.z-index2 {
  z-index: 2; }

.z-index3 {
  z-index: 3; }

.z-index4 {
  z-index: 4; }

.z-index5 {
  z-index: 5; }

.z-index6 {
  z-index: 6; }

.z-index7 {
  z-index: 7; }

.z-index8 {
  z-index: 8; }

.z-index9 {
  z-index: 9; }

.z-index10 {
  z-index: 10; }

.z-index11 {
  z-index: 11; }

.z-index12 {
  z-index: 12; }

.z-index13 {
  z-index: 13; }

.z-index14 {
  z-index: 14; }

.z-index15 {
  z-index: 15; }

.z-index16 {
  z-index: 16; }

.z-index17 {
  z-index: 17; }

.z-index18 {
  z-index: 18; }

.z-index19 {
  z-index: 19; }

.z-index20 {
  z-index: 20; }

.z-index21 {
  z-index: 21; }

.z-index22 {
  z-index: 22; }

.z-index23 {
  z-index: 23; }

.z-index24 {
  z-index: 24; }

.z-index25 {
  z-index: 25; }

.z-index26 {
  z-index: 26; }

.z-index27 {
  z-index: 27; }

.z-index28 {
  z-index: 28; }

.z-index29 {
  z-index: 29; }

.z-index30 {
  z-index: 30; }

.z-index31 {
  z-index: 31; }

.z-index32 {
  z-index: 32; }

.z-index33 {
  z-index: 33; }

.z-index34 {
  z-index: 34; }

.z-index35 {
  z-index: 35; }

.z-index36 {
  z-index: 36; }

.z-index37 {
  z-index: 37; }

.z-index38 {
  z-index: 38; }

.z-index39 {
  z-index: 39; }

.z-index40 {
  z-index: 40; }

.z-index41 {
  z-index: 41; }

.z-index42 {
  z-index: 42; }

.z-index43 {
  z-index: 43; }

.z-index44 {
  z-index: 44; }

.z-index45 {
  z-index: 45; }

.z-index46 {
  z-index: 46; }

.z-index47 {
  z-index: 47; }

.z-index48 {
  z-index: 48; }

.z-index49 {
  z-index: 49; }

.z-index50 {
  z-index: 50; }

.z-index51 {
  z-index: 51; }

.z-index52 {
  z-index: 52; }

.z-index53 {
  z-index: 53; }

.z-index54 {
  z-index: 54; }

.z-index55 {
  z-index: 55; }

.z-index56 {
  z-index: 56; }

.z-index57 {
  z-index: 57; }

.z-index58 {
  z-index: 58; }

.z-index59 {
  z-index: 59; }

.z-index60 {
  z-index: 60; }

.z-index61 {
  z-index: 61; }

.z-index62 {
  z-index: 62; }

.z-index63 {
  z-index: 63; }

.z-index64 {
  z-index: 64; }

.z-index65 {
  z-index: 65; }

.z-index66 {
  z-index: 66; }

.z-index67 {
  z-index: 67; }

.z-index68 {
  z-index: 68; }

.z-index69 {
  z-index: 69; }

.z-index70 {
  z-index: 70; }

.z-index71 {
  z-index: 71; }

.z-index72 {
  z-index: 72; }

.z-index73 {
  z-index: 73; }

.z-index74 {
  z-index: 74; }

.z-index75 {
  z-index: 75; }

.z-index76 {
  z-index: 76; }

.z-index77 {
  z-index: 77; }

.z-index78 {
  z-index: 78; }

.z-index79 {
  z-index: 79; }

.z-index80 {
  z-index: 80; }

.z-index81 {
  z-index: 81; }

.z-index82 {
  z-index: 82; }

.z-index83 {
  z-index: 83; }

.z-index84 {
  z-index: 84; }

.z-index85 {
  z-index: 85; }

.z-index86 {
  z-index: 86; }

.z-index87 {
  z-index: 87; }

.z-index88 {
  z-index: 88; }

.z-index89 {
  z-index: 89; }

.z-index90 {
  z-index: 90; }

.z-index91 {
  z-index: 91; }

.z-index92 {
  z-index: 92; }

.z-index93 {
  z-index: 93; }

.z-index94 {
  z-index: 94; }

.z-index95 {
  z-index: 95; }

.z-index96 {
  z-index: 96; }

.z-index97 {
  z-index: 97; }

.z-index98 {
  z-index: 98; }

.z-index99 {
  z-index: 99; }

.z-index100 {
  z-index: 100; }

.main-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0; }
  .main-visual-img .img {
    position: absolute; }
  .main-visual-img .img-cover {
    inset: 0;
    width: 100%;
    height: 100%; }
    .main-visual-img .img-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

/* 電波
------------------------------------------------------------*/
.img-signal {
  left: 63%;
  top: 22.7%;
  transform: translate(-50%, calc(-100% - 24px)); }
  @media (max-width: 768px) {
    .img-signal {
      left: 68%;
      top: 10.2%;
      --tri-offset: calc(var(--pin-size) * 24 / 90 * 0.7071);
      transform: translate(-50%, calc(0% + 24px));
      transform-origin: calc(0% - var(--tri-offset)) calc(0% - var(--tri-offset)); } }
  @media screen and (max-width: 600px) {
    .img-signal {
      top: 7.2%; } }
  @media (max-width: 500px) {
    .img-signal {
      left: 72%;
      top: 8.8%; } }

.signal-pulse {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block; }

.signal-pulse-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #365ba2; }

.signal-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #365ba2;
  animation: signal-spread 3s ease-out infinite; }
  .signal-pulse-ring:nth-child(1) {
    animation-delay: 0s; }
  .signal-pulse-ring:nth-child(2) {
    animation-delay: 1s; }
  .signal-pulse-ring:nth-child(3) {
    animation-delay: 2s; }

@keyframes signal-spread {
  0% {
    transform: scale(1);
    opacity: 0.65; }
  100% {
    transform: scale(6);
    opacity: 0; } }
/* 電車
------------------------------------------------------------*/
.img-train-01,
.img-train-02 {
  width: 10%;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }
  .img-train-01 img,
  .img-train-02 img {
    width: 100%;
    height: auto;
    display: block; }

.img-train-01 {
  right: -15%;
  animation-name: train-run-01;
  animation-duration: 20s; }

.img-train-02 {
  right: 71%;
  animation-name: train-run-02;
  animation-duration: 20s;
  animation-delay: 5s; }

@keyframes train-run-01 {
  0% {
    right: -15%;
    top: 14.8%; }
  60% {
    right: 66%;
    top: 114.8%; }
  100% {
    right: 66%;
    top: 114.8%; } }
@media (max-width: 500px) {
  @keyframes train-run-01 {
    0% {
      right: -15%;
      top: 37%; }
    60% {
      right: 72%;
      top: 115%; }
    100% {
      right: 72%;
      top: 115%; } } }
@keyframes train-run-02 {
  0% {
    right: 71%;
    top: 115%;
    animation-timing-function: ease-out; }
  45% {
    right: 35.2%;
    top: 71.3%;
    animation-timing-function: ease-in; }
  60% {
    right: 35.2%;
    top: 71.3%;
    animation-timing-function: ease-in; }
  100% {
    right: -15%;
    top: 9%; } }
@media (max-width: 500px) {
  @keyframes train-run-02 {
    0% {
      right: 79%;
      top: 115%;
      animation-timing-function: ease-out; }
    45% {
      right: 33%;
      top: 75%;
      animation-timing-function: ease-in; }
    60% {
      right: 33%;
      top: 75%;
      animation-timing-function: ease-in; }
    100% {
      right: -15%;
      top: 32%; } } }
/* 車、トラック：線路の手前の町
------------------------------------------------------------*/
.img-car-01,
.img-car-02,
.img-car-03 {
  animation-timing-function: linear;
  animation-iteration-count: infinite; }
  .img-car-01 img,
  .img-car-02 img,
  .img-car-03 img {
    width: 100%;
    height: auto;
    display: block; }

.img-car-01 {
  width: 2%;
  right: -5%;
  animation-name: car-run-01;
  animation-duration: 20s; }
  @media (max-width: 500px) {
    .img-car-01 {
      width: 2.73%; } }

.img-car-02 {
  width: 2.2%;
  right: 10%;
  animation-name: car-run-02;
  animation-duration: 15s; }
  @media (max-width: 500px) {
    .img-car-02 {
      width: 2.9%; } }

.img-car-03 {
  width: 2%;
  right: 52.2%;
  animation-name: car-run-03;
  animation-duration: 20s; }
  @media (max-width: 500px) {
    .img-car-03 {
      width: 2.73%; } }

@keyframes car-run-01 {
  0% {
    right: -5%;
    top: 38.8%; }
  100% {
    right: 49.4%;
    top: 105%; } }
@media (max-width: 500px) {
  @keyframes car-run-01 {
    0% {
      right: -5%;
      top: 57%; }
    100% {
      right: 48%;
      top: 105%; } } }
@keyframes car-run-02 {
  0% {
    right: 10%;
    top: 100%; }
  60% {
    right: 28.5%;
    top: 77%; }
  100% {
    right: 28.5%;
    top: 77%; } }
@media (max-width: 500px) {
  @keyframes car-run-02 {
    0% {
      right: -2%;
      top: 100%; }
    60% {
      right: 18%;
      top: 80%; }
    100% {
      right: 18%;
      top: 80%; } } }
@keyframes car-run-03 {
  0% {
    right: 52.2%;
    top: 105%; }
  100% {
    right: -5%;
    top: 35.5%; } }
@media (max-width: 500px) {
  @keyframes car-run-03 {
    0% {
      right: 51.5%;
      top: 104.3%; }
    100% {
      right: -5%;
      top: 53.3%; } } }
/* 車：左側の町、すれ違う２台
------------------------------------------------------------*/
.img-car-04,
.img-car-05 {
  width: 2%;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }
  @media (max-width: 500px) {
    .img-car-04,
    .img-car-05 {
      width: 2.73%; } }
  .img-car-04 img,
  .img-car-05 img {
    width: 100%;
    height: auto;
    display: block; }

.img-car-04 {
  left: 41%;
  animation-name: car-run-04;
  animation-duration: 15s; }

.img-car-05 {
  left: -5%;
  animation-name: car-run-05;
  animation-duration: 30s; }

@keyframes car-run-04 {
  0% {
    left: 41%;
    top: 105%; }
  100% {
    left: -5%;
    top: 46.5%; } }
@media (max-width: 500px) {
  @keyframes car-run-04 {
    0% {
      left: 36%;
      top: 105%; }
    100% {
      left: -5%;
      top: 64%; } } }
@keyframes car-run-05 {
  0% {
    left: -5%;
    top: 42%;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
  45% {
    left: 25%;
    top: 80%;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
  60% {
    left: 25%;
    top: 80%;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
  100% {
    left: 44%;
    top: 105%; } }
@media (max-width: 500px) {
  @keyframes car-run-05 {
    0% {
      left: -5%;
      top: 61%;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    45% {
      left: 17.5%;
      top: 81%;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    60% {
      left: 17.5%;
      top: 81%;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    100% {
      left: 42%;
      top: 105%; } } }
/* バス：線路の奥
------------------------------------------------------------*/
.img-car-06 {
  width: 4%;
  left: 30%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: car-run-06;
  animation-duration: 32s; }
  @media (max-width: 500px) {
    .img-car-06 {
      width: 5%; } }
  .img-car-06 img {
    width: 100%;
    height: auto;
    display: block; }

@keyframes car-run-06 {
  0% {
    left: 38%;
    top: 90%;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
  49% {
    left: 74%;
    top: 45%;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
  56% {
    left: 74%;
    top: 45%;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
  100% {
    left: 115%;
    top: -5.5%; } }
@media (max-width: 500px) {
  @keyframes car-run-06 {
    0% {
      left: 38%;
      top: 87.2%;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    49% {
      left: 83.5%;
      top: 45.2%;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    56% {
      left: 83.5%;
      top: 45.2%;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
    100% {
      left: 115%;
      top: 17.7%; } } }
/* 車：駐車場
------------------------------------------------------------*/
.img-car-parking {
  width: 2%;
  position: absolute;
  animation-name: car-parking-move;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }
  @media (max-width: 500px) {
    .img-car-parking {
      width: 2.73%; } }
  .img-car-parking img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto; }
  .img-car-parking .car-img-a {
    opacity: 1;
    animation-name: show-then-hide;
    animation-duration: 20s;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite; }
    .img-car-parking .car-img-a.is-repeat {
      animation-name: show-then-hide-fade; }
  .img-car-parking .car-img-b {
    animation-name: hide-then-show;
    animation-duration: 20s;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite; }

@keyframes car-parking-move {
  0% {
    left: 48.4%;
    top: 57.5%; }
  20% {
    left: 48.4%;
    top: 57.5%; }
  30% {
    left: 50.5%;
    top: 60.3%;
    animation-timing-function: ease-in; }
  100% {
    left: 105%;
    top: -8.2%; } }
@media (max-width: 500px) {
  @keyframes car-parking-move {
    0% {
      left: 47.9%;
      top: 57.9%; }
    20% {
      left: 47.9%;
      top: 57.9%; }
    30% {
      left: 50.5%;
      top: 60.5%;
      animation-timing-function: ease-in; }
    100% {
      left: 105%;
      top: 11.1%; } } }
@keyframes show-then-hide {
  0% {
    opacity: 1; }
  29% {
    opacity: 1; }
  30% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes show-then-hide-fade {
  0% {
    opacity: 0;
    animation-timing-function: linear; }
  8% {
    opacity: 1;
    animation-timing-function: steps(1); }
  29% {
    opacity: 1; }
  30% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes hide-then-show {
  0% {
    opacity: 0; }
  29% {
    opacity: 0; }
  30% {
    opacity: 1; }
  100% {
    opacity: 1; } }
/* 車、トラック：正面の奥、すれ違う２台
------------------------------------------------------------*/
.img-car-08,
.img-car-09 {
  animation-timing-function: linear;
  animation-iteration-count: infinite; }
  .img-car-08 img,
  .img-car-09 img {
    width: 100%;
    height: auto;
    display: block; }

.img-car-08 {
  width: 3.58%;
  left: 81%;
  animation-name: car-run-08;
  animation-duration: 20s; }
  @media (max-width: 500px) {
    .img-car-08 {
      width: 4.8%; } }

.img-car-09 {
  width: 2%;
  left: 21%;
  animation-name: car-run-09;
  animation-duration: 15s; }
  @media (max-width: 500px) {
    .img-car-09 {
      width: 2.73%; } }

@keyframes car-run-08 {
  0% {
    left: 81%;
    top: -18%; }
  100% {
    left: 21%;
    top: 54.5%; } }
@media (max-width: 500px) {
  @keyframes car-run-08 {
    0% {
      left: 91.5%;
      top: -18%; }
    100% {
      left: 21%;
      top: 46.3%; } } }
@keyframes car-run-09 {
  0% {
    left: 21%;
    top: 54.3%; }
  100% {
    left: 81%;
    top: -18.1%; } }
@media (max-width: 500px) {
  @keyframes car-run-09 {
    0% {
      left: 21%;
      top: 45%; }
    100% {
      left: 81%;
      top: -8%; } } }
/* 満空表示器
------------------------------------------------------------*/
.main-visual-img .img-signage img {
  position: absolute;
  inset: 0; }
.main-visual-img .img-signage img:nth-child(2) {
  animation-name: signage-blink;
  animation-duration: 20s;
  animation-timing-function: step-end;
  animation-iteration-count: infinite; }

@keyframes signage-blink {
  0% {
    opacity: 1; }
  45% {
    opacity: 0; }
  100% {
    opacity: 0; } }