/* font family */
/* base font size */
/* calculate rem */
/* make media query */
/* header */
.l-hd-content {
  padding-top: 60px;
}
@media screen and (min-width: 769px) {
  .l-hd-content {
    padding-top: 73px;
  }
}

@media screen and (min-width: 769px) {
  .l-hd-links__item.is-link-about {
    width: clamp(132.2666666667px, 17.2222222222vw, 248px);
  }
}

@media screen and (min-width: 769px) {
  .l-hd-links__item.is-link-zone {
    top: clamp(-25px, -1.7361111111vw, 13.3333333333px);
    left: clamp(145.0666666667px, 18.8888888889vw, 272px);
    width: clamp(96.5333333333px, 12.5694444444vw, 181px);
    height: clamp(36.2666666667px, 4.7222222222vw, 68px);
  }
}

@media screen and (min-width: 769px) {
  .l-hd-links__item.is-link-news {
    top: clamp(2.6666666667px, 0.3472222222vw, 5px);
    left: clamp(256px, 33.3333333333vw, 480px);
    width: clamp(90.6666666667px, 11.8055555556vw, 170px);
    height: clamp(29.8666666667px, 3.8888888889vw, 56px);
  }
}

@media screen and (max-width: 768px) {
  .body-show-page .l-hd-catch {
    font-size: 4vw;
  }
}
@media screen and (min-width: 769px) {
  .body-show-page .l-hd-catch {
    font-size: clamp(16px, 2.0833333333vw, 30px);
  }
}

.l-hd-character__text svg text {
  font-size: 1.125rem;
}

/* gnav */
.l-gnav-trigger {
  top: clamp(43.7333333333px, 60px + 5.5vw, 82px);
}
@media screen and (min-width: 769px) {
  .l-gnav-trigger {
    top: clamp(89.0666666667px, 73px + 6.5277777778vw, 167px);
  }
}
@media screen and (min-width: 769px) {
  .l-gnav-drawer {
    top: clamp(44.2666666667px, 73px + 0.6944444444vw, 83px);
  }
}

/* top */
@media screen and (max-width: 768px) {
  .top-about {
    min-height: 300vw;
  }
}
@media screen and (min-width: 769px) {
  .top-about {
    min-height: clamp(672px, 87.5vw, 1260px);
  }
}

@media screen and (max-width: 768px) {
  .top-about-balloon.is-balloon-1 {
    top: 210vw;
    width: 37.5vw;
  }
}
@media screen and (min-width: 769px) {
  .top-about-balloon.is-balloon-1 {
    width: clamp(101.3333333333px, 13.1944444444vw, 190px);
  }
}

@media screen and (max-width: 768px) {
  .top-about-balloon.is-balloon-2 {
    top: 257.5vw;
    width: 37.5vw;
  }
}
@media screen and (min-width: 769px) {
  .top-about-balloon.is-balloon-2 {
    top: clamp(480px, 62.5vw, 900px);
    left: clamp(149.3333333333px, 19.4444444444vw, 280px);
    width: clamp(101.3333333333px, 13.1944444444vw, 190px);
  }
}

@media screen and (max-width: 768px) {
  .top-message .title-1 {
    top: -17.5vw;
  }
}
@media screen and (min-width: 769px) {
  .top-message .title-1 {
    top: clamp(-100px, -6.9444444444vw, 53.3333333333px);
  }
}

.top-message .btn-2 text {
  font-size: 1rem;
}
.top-message .btn-2 text tspan {
  font-size: 0.75rem;
}

@media screen and (max-width: 768px) {
  .top-guide {
    padding-top: 35vw;
  }
}
@media screen and (min-width: 769px) {
  .top-guide {
    padding-top: clamp(74.6666666667px, 9.7222222222vw, 140px);
  }
}

@media screen and (min-width: 769px) {
  .top-zone-lists__item {
    width: clamp(266.6666666667px, 34.7222222222vw, 500px);
  }
}
@media screen and (min-width: 769px) {
  .top-zone-lists__title {
    font-size: clamp(12.8px, 1.6666666667vw, 24px);
  }
}
@media screen and (min-width: 769px) {
  .top-zone-lists__title .is-num {
    font-size: clamp(9.6px, 1.25vw, 18px);
  }
}

/* message */
@media screen and (max-width: 768px) {
  .message-detail-catch {
    font-size: 4vw;
  }
}
@media screen and (min-width: 769px) {
  .message-detail-catch {
    font-size: clamp(14.9333333333px, 1.9444444444vw, 28px);
  }
}

/* zone */
@media screen and (min-width: 769px) {
  .zone-nav-links__above > a {
    padding: clamp(4.2666666667px, 0.5555555556vw, 8px);
  }
}
.zone-nav-links__num span.is-text {
  font-size: 2.5vw;
}
@media screen and (min-width: 769px) {
  .zone-nav-links__num span.is-text {
    font-size: clamp(5.3333333333px, 0.6944444444vw, 10px);
  }
}
.zone-nav-links__num span.is-num {
  font-size: 4vw;
}
@media screen and (min-width: 769px) {
  .zone-nav-links__num span.is-num {
    font-size: clamp(6.4px, 0.8333333333vw, 12px);
  }
}
.zone-nav-links__title {
  font-size: 4.5vw;
}
@media screen and (min-width: 769px) {
  .zone-nav-links__title {
    font-size: clamp(8.5333333333px, 1.1111111111vw, 16px);
  }
}

.zone-nav-character__name {
  letter-spacing: 0;
}