.page-wwl {
  --content-min-margin: 20;
  --content-base-margin: 80;
  --content-base-width: 1440;
  --content-max-width: 1280px;

  --fz-h1: clamp(2.8rem, calc((80 / 1440) * 100vw), 8rem);
  --fz-h2: clamp(2.2rem, calc((28 / 1440) * 100vw), 2.8rem);
  --fz-h3: clamp(2.2rem, calc((24 / 1440) * 100vw), 2.4rem);
  --fz-h4: clamp(1.8rem, calc((22 / 1440) * 100vw), 2.2rem);

  --fz-p: clamp(1.4rem, calc((16 / 1440) * 100vw), 1.6rem);

  --clr-sb-green: #00836b;
  --clr-sb-red: #d62828;

  /* --clr-text-gray-1: #000; */

  --clr-bdr-gray-1: #d2cfc6;
  /* --clr-bdr-gray-2: #000; */

  :where(p) {
    margin-top: unset;
  }
}

@keyframes map-pointer {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

.pg-kv {
  position: relative;
  img {
    width: 100%;
  }
}

.pg-kv__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.pg-kv__title {
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  font-size: var(--fz-h1);
  line-height: 1;
  text-shadow: 2px 2px 7px #000000;
  text-align: center;
}

.pg-contents {
  --min-size: 60;
  --max-size: 100;
  padding-block: clamp(
      3.2rem,
      calc(64 / var(--base-size, 1440) * 100vw),
      6.4rem
    )
    clamp(4rem, calc(56 / var(--base-size, 1440) * 100vw), 5.6rem);
}

.pg-section {
  & + & {
    margin-top: clamp(6.4rem, calc(96 / 1440 * 100vw), 9.6rem);
  }
}

.pg-section__inner {
  --minmax: max(
    calc(var(--content-min-margin) * 1px),
    calc(var(--content-base-margin) / var(--content-base-width) * 100vw)
  );
  max-width: var(--content-max-width, 100%);
  width: calc(100% - var(--minmax) * 2);
  margin-left: auto;
  margin-right: auto;
}

.pg-section__content {
  margin-top: clamp(3.2rem, calc(48 / 1440 * 100vw), 4.8rem);

  > .btn-02 {
    margin-top: clamp(3rem, calc(40 / 1440 * 100vw), 4rem);
  }
}

.pg-section__title {
  font-size: var(--fz-h2);
  font-weight: bold;
  line-height: 1.2;
}

.pg-section__lead {
  font-size: var(--fz-p);
  margin-top: 1em;
}

.pg-world-map {
  --map-bg-img-w: 350;
  --map-bg-img-h: 204;
  position: relative;
  @media (min-width: 54.3125em) {
    --map-bg-img-w: 1280;
    --map-bg-img-h: 613;
  }
}

.pg-world-map__bg {
  img {
    width: 100%;
  }
}

.pg-world-map__img {
  --delay-rate: 0.2s;
  position: absolute;
  z-index: 5;
  top: calc(var(--map-img-top) / var(--map-bg-img-h) * 100%);
  left: calc(var(--map-img-left) / var(--map-bg-img-w) * 100%);
  width: calc(var(--map-img-w) / var(--map-bg-img-w) * 100%);
  transition: opacity 0.8s ease-out 0s;

  &:not(.is-active) {
    opacity: 0;
  }

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    border: 1px solid var(--clr-sb-red);
    top: calc(var(--marker-top) / var(--map-img-h) * 100%);
    left: calc(var(--marker-left) / var(--map-img-w) * 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: map-pointer 1.5s ease-out 0s infinite;
    transform-origin: center center;
    @media (min-width: 54.3125em) {
      width: 64px;
      height: 64px;
    }
  }

  &:not([data-region="usa"]) {
    &::before {
      display: none;
    }
  }

  &[data-region="uk"] {
    --map-img-top: 0;
    --map-img-left: 0;
    --map-img-w: 80;
    --map-img-h: 78;
    --marker-top: 76;
    --marker-left: 50;
    transition-delay: calc(var(--delay-rate) * 0);
    @media (min-width: 54.3125em) {
      --map-img-top: 8;
      --map-img-left: 24;
      --map-img-w: 172;
      --map-img-h: 223;
      --marker-top: 219;
      --marker-left: 168;
    }
  }

  &[data-region="singapore"] {
    --map-img-top: 125;
    --map-img-left: 85;
    --map-img-w: 95;
    --map-img-h: 79;
    --marker-top: 2;
    --marker-left: 58;
    transition-delay: calc(var(--delay-rate) * 1);
    @media (min-width: 54.3125em) {
      --map-img-top: 396;
      --map-img-left: 310;
      --map-img-w: 199;
      --map-img-h: 215;
      --marker-top: 4;
      --marker-left: 195;
    }
  }

  &[data-region="japan"] {
    --map-img-top: 93;
    --map-img-left: 168;
    --map-img-w: 80;
    --map-img-h: 32;
    --marker-top: 2;
    --marker-left: 7;
    transition-delay: calc(var(--delay-rate) * 4);
    @media (min-width: 54.3125em) {
      --map-img-top: 292;
      --map-img-left: 612;
      --map-img-w: 188;
      --map-img-h: 74;
      --marker-top: 4;
      --marker-left: 4;
    }
  }

  &[data-region="canada"] {
    --map-img-top: 0;
    --map-img-left: 207;
    --map-img-w: 80;
    --map-img-h: 82;
    --marker-top: 79;
    --marker-left: 53;
    transition-delay: calc(var(--delay-rate) * 2);
    @media (min-width: 54.3125em) {
      --map-img-top: 12;
      --map-img-left: 723;
      --map-img-w: 180;
      --map-img-h: 231;
      --marker-top: 227;
      --marker-left: 176;
    }
  }

  &[data-region="usa"] {
    --map-img-top: 79;
    --map-img-left: 218;
    --map-img-w: 93;
    --map-img-h: 82;
    &::before {
      --marker-top: 19;
      --marker-left: 47.23;
    }
    &::after {
      --marker-top: 2;
      --marker-left: 91;
    }
    transition-delay: calc(var(--delay-rate) * 3);
    @media (min-width: 54.3125em) {
      --map-img-top: 242;
      --map-img-left: 807;
      --map-img-w: 263;
      --map-img-h: 233;
      &::before {
        --marker-top: 61;
        --marker-left: 112;
      }
      &::after {
        --marker-top: 4;
        --marker-left: 259;
      }
    }
  }

  img {
    width: 100%;
    height: auto;
  }
}

.pg-google-maps {
}

.pg-google-maps__items {
  display: grid;
  gap: 0 4rem;
  margin-top: clamp(3.2rem, calc(64 / 1440 * 100vw), 6.4rem);

  @media (min-width: 54.3125em) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pg-google-maps__item {
  border-bottom: 1px solid var(--clr-bdr-gray-1);
  padding-block: clamp(2rem, calc(28 / 1440 * 100vw), 2.8rem);

  &:nth-child(1) {
    border-top: 1px solid var(--clr-bdr-gray-1);
  }

  @media (min-width: 54.3125em) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    &:nth-child(2) {
      border-top: 1px solid var(--clr-bdr-gray-1);
    }
  }
}

.pg-google-maps__title {
  font-size: var(--fz-h4);
  font-weight: bold;
}

.pg-google-maps__link {
  display: flex;
  align-items: start;
  gap: 0.5em;
  font-size: var(--fz-p);
  line-height: 1.5;
  &::before {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.5em;
    background: url("../img/map-pointer.svg") center center no-repeat;
    background-size: contain;
    flex-shrink: 0;
  }
  a {
    color: #000;
    text-decoration: none;
    transition: color 0.4s ease-out 0s;
    line-height: 1.5;
    &:hover {
      color: var(--clr-sb-green);
    }
  }
}

.pg-gallery {
}
.pg-gallery__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, calc(20 / 1440 * 100vw), 2rem);
  @media (min-width: 54.3125em) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.pg-gallery__img {
  img {
    border-radius: 1rem;
  }
}