header .logo {
  max-inline-size: clamp(
    308px * var(--fluid-min-ratio),
    calc(308 * var(--fluid)),
    308px
  );
}

.hero h1 {
  font-size: clamp(
    50px * var(--fluid-min-ratio),
    calc(50 * var(--fluid)),
    50px * var(--fluid-max-ratio)
  );
}

.hero .txt-summary {
  font-size: clamp(
    19px * var(--fluid-min-ratio),
    calc(19 * var(--fluid)),
    19px * var(--fluid-max-ratio)
  );
}
.hero .txt-summary p strong {
  font-size: clamp(
    25px * var(--fluid-min-ratio),
    calc(25 * var(--fluid)),
    25px * var(--fluid-max-ratio)
  );
}
.hero .txt-summary > p:first-of-type {
  display: inline-block;
  padding-block: clamp(
    21px * var(--fluid-min-ratio),
    calc(21 * var(--fluid)),
    21px
  );
  padding-inline: clamp(
      39px * var(--fluid-min-ratio),
      calc(39 * var(--fluid)),
      39px * var(--fluid-max-ratio)
    )
    clamp(
      28px * var(--fluid-min-ratio),
      calc(28 * var(--fluid)),
      28px * var(--fluid-max-ratio)
    );
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: clamp(
    6px * var(--fluid-min-ratio),
    calc(6 * var(--fluid)),
    6px
  );
  background-color: rgba(158, 185, 212, 0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#about .sec-inner {
  gap: clamp(70px * var(--fluid-min-ratio), calc(70 * var(--fluid)), 70px);
}

#about .sec-inner h2 {
  aspect-ratio: 411 / 181;
  max-inline-size: clamp(
    411px * var(--fluid-min-ratio),
    calc(411 * var(--fluid)),
    411px
  );
  inline-size: 100%;
  background-image: url("/images/en/ttl-about.png");
}

#highlights .sec-inner h2 {
  aspect-ratio: 1077 / 75;
  max-inline-size: clamp(
    1077px * var(--fluid-min-ratio),
    calc(1077 * var(--fluid)),
    1077px
  );
  background-image: url("/images/en/ttl-highlight.png");
}

#schedule h2 {
  aspect-ratio: 773 / 74;
  max-inline-size: clamp(
    773px * var(--fluid-min-ratio),
    calc(773 * var(--fluid)),
    773px
  );
  background-image: url("/images/en/ttl-schedule.png");
}

#venue h2 {
  aspect-ratio: 808 / 74;
  max-inline-size: clamp(
    808px * var(--fluid-min-ratio),
    calc(808 * var(--fluid)),
    808px
  );
  background-image: url("/images/en/ttl-venue.png");
}

#hotel .sec-inner h2 {
  aspect-ratio: 297 / 77;
  max-inline-size: clamp(
    297px * var(--fluid-min-ratio),
    calc(297 * var(--fluid)),
    297px
  );
  background-image: url("/images/en/ttl-hotel.png");
}
.hotel-info p .txt-slash {
  padding-inline-start: clamp(
    38px,
    calc(38 * var(--fluid-sp)),
    38px * var(--fluid-max-ratio)
  );
}
.hotel-info p .txt-slash::before {
  inset-inline-start: 0;
}

#history .sec-inner h2 {
  aspect-ratio: 435 / 174;
  max-inline-size: clamp(
    435px * var(--fluid-min-ratio),
    calc(435 * var(--fluid)),
    435px
  );
  background-image: url("/images/en/ttl-history.png");
}

#fukuoka .sec-inner h2 {
  aspect-ratio: 1168 / 73;
  max-inline-size: clamp(
    1168px * var(--fluid-min-ratio),
    calc(1168 * var(--fluid)),
    1168px
  );
  background-image: url("/images/en/ttl-fuk.png");
}

#excursion .sec-inner h2 {
  aspect-ratio: 369 / 159;
  max-inline-size: clamp(
    369px * var(--fluid-min-ratio),
    calc(369 * var(--fluid)),
    369px
  );
  background-image: url("/images/en/ttl-excursion.png");
}

.excursion-list .list-items::after {
  background-image: url("/images/en/bg-comingsoon.png");
}
.excursion-list .list-items p {
  padding-inline-end: clamp(
    70px * var(--fluid-min-ratio),
    calc(70 * var(--fluid)),
    70px
  );
}

footer h2 {
  aspect-ratio: 294 / 138;
  max-inline-size: clamp(
    294px * var(--fluid-min-ratio),
    calc(294 * var(--fluid)),
    294px
  );
  background-image: url("/images/en/ttl-contact.png");
}

@media screen and (max-width: 768px) {
  header {
    gap: clamp(18px, calc(18 * var(--fluid-sp)), 18px * var(--fluid-max-ratio));
  }
  header .logo {
    max-inline-size: clamp(
      220px,
      calc(220 * var(--fluid-sp)),
      220px * var(--fluid-max-ratio)
    );
  }

  .hero {
    aspect-ratio: 390 / 830;
    background-size: cover;
  }
  .hero h1 {
    font-size: clamp(
      36px,
      calc(36 * var(--fluid-sp)),
      36px * var(--fluid-max-ratio)
    );
    background-position: left top
      clamp(40px, calc(40 * var(--fluid-sp)), 40px * var(--fluid-max-ratio));
  }

  .hero .txt-summary {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
    line-height: 1.3;
  }
  .hero .txt-summary > p:first-of-type {
    padding-block: clamp(
      13px,
      calc(13 * var(--fluid-sp)),
      13px * var(--fluid-max-ratio)
    );
    padding-inline: clamp(
      11px,
      calc(11 * var(--fluid-sp)),
      11px * var(--fluid-max-ratio)
    );
    border-radius: clamp(
      6px,
      calc(6 * var(--fluid-sp)),
      6px * var(--fluid-max-ratio)
    );
  }
  .hero .txt-summary p .txt-heading {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .hero .txt-summary p strong {
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
  }
  .hero .txt-summary .txt-detail {
    color: var(--color-primaryWhite);
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
    text-shadow: 0 0 4px var(--color-primaryBlue);
  }
  .hero .txt-summary .txt-detail .txt-sub {
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .hero-btn {
    inset-block-end: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      40px * var(--fluid-max-ratio)
    );
  }

  #about .sec-inner h2 {
    aspect-ratio: 330 / 135;
    max-inline-size: clamp(
      330px,
      calc(330 * var(--fluid-sp)),
      330px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-about_sp.png");
  }

  #highlights .sec-inner h2 {
    aspect-ratio: 323 / 139;
    max-inline-size: clamp(
      323px,
      calc(323 * var(--fluid-sp)),
      323px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-highlight_sp.png");
  }

  #schedule h2 {
    aspect-ratio: 304 / 161;
    max-inline-size: clamp(
      304px,
      calc(304 * var(--fluid-sp)),
      304px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-schedule_sp.png");
  }

  #venue h2 {
    aspect-ratio: 341 / 170;
    max-inline-size: clamp(
      341px,
      calc(341 * var(--fluid-sp)),
      341px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-venue_sp.png");
  }

  #hotel .sec-inner h2 {
    aspect-ratio: 212 / 72;
    max-inline-size: clamp(
      212px,
      calc(212 * var(--fluid-sp)),
      212px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-hotel_sp.png");
  }

  #history .sec-inner h2 {
    aspect-ratio: 312 / 138;
    max-inline-size: clamp(
      312px,
      calc(312 * var(--fluid-sp)),
      312px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-history_sp.png");
  }

  #fukuoka .sec-inner h2 {
    aspect-ratio: 346 / 170;
    max-inline-size: clamp(
      346px,
      calc(346 * var(--fluid-sp)),
      346px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-fuk_sp.png");
  }

  #excursion .sec-inner h2 {
    aspect-ratio: 265 / 116;
    max-inline-size: clamp(
      265px * var(--fluid-min-ratio),
      calc(265 * var(--fluid-sp)),
      265px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-excursion_sp.png");
  }

  .excursion-list .list-items::after {
    background-image: url("/images/en/bg-comingsoon_sp.png");
  }
  .excursion-list .list-items p {
    padding-inline-end: clamp(
      42px,
      calc(42 * var(--fluid-sp)),
      42px * var(--fluid-max-ratio)
    );
  }

  footer h2 {
    aspect-ratio: 231 / 116;
    max-inline-size: clamp(
      231px,
      calc(231 * var(--fluid-sp)),
      231px * var(--fluid-max-ratio)
    );
    background-image: url("/images/en/ttl-contact_sp.png");
  }
}