:root {
  --color-primaryBlue: #31587c;
  --color-primaryBlueLight: #1c398e;
  --color-primaryWhiteBlue: #eff6ff;
  --color-primaryBlack: #364153;
  --color-primaryBlackLight: #1e2939;
  --color-primaryBlackLight2: #0a0a0a;
  --color-primaryGray: #4a5565;
  --color-primaryGrayLight: #6a7282;
  --color-border-gray: #e5e7eb;
  --color-border-gray2: #cacaca;
  --color-primaryWhite: #fff;
  --color-primaryYellow: #f0d041;

  --bg-primaryBlue: rgba(163, 187, 223, 0.2);
  --bg-primaryBlue2: #093662;
  --bg-btn-primaryBlue: #31577c;
  --bg-primaryWhite: #f9fafb;
  --bg-primaryFooter: #02080f;

  --color-gradient-blue: linear-gradient(180deg, #1c60a5 0%, #011325 100%);
  --color-gradient-transparent: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-primaryWhite) 70%,
    var(--color-primaryWhite) 100%
  );
  --color-text-shadow: 0 0 16px rgba(247, 252, 255, 0.6);

  --letter-spacing-012: 0.12px;
  --letter-spacing-04: 0.4px;
  --letter-spacing-min-045: -0.45px;
  --letter-spacing-min-03: -0.3px;
  --letter-spacing-min-015: -0.15px;

  --layout-min: 390;
  --layout-max: 1280;
  --container-break: 768;

  --fluid: calc(100vw / var(--layout-max));
  --fluid-min-ratio: calc(var(--layout-min) / var(--layout-max));

  --fluid-sp: calc(100vw / var(--layout-min));
  --fluid-max-ratio: calc(var(--container-break) / var(--layout-min));
}

html,
body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-primaryBlue);
  font-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px
  );
  container-type: inline-size;
  scroll-behavior: smooth;
}

body {
  position: relative;
  z-index: 1;
}
body::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("/images/bg-mosic.png"), var(--color-primaryWhite);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  html,
  body {
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
    scroll-padding-top: 60px;
  }
}

/* ===============================================
common
===============================================*/
.bg-noise {
  position: relative;
  z-index: 1;
}
.bg-noise::before {
  position: absolute;
  content: "";
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background-image: url("/images/bg-sectionNoise.png");
  background-size: 65px;
  background-position: center;
  background-repeat: repeat;
  opacity: 0.18;
  z-index: -1;
}

section .sec-inner {
  max-inline-size: 1280px;
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: clamp(
    40px * var(--fluid-min-ratio),
    calc(40 * var(--fluid)),
    40px
  );
}

section .sec-inner h2,
footer h2 {
  inline-size: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.txt-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cfx-ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: clamp(
    80px * var(--fluid-min-ratio),
    calc(80 * var(--fluid)),
    80px
  );
}
.cfx-ttl p {
  max-inline-size: clamp(
    552px * var(--fluid-min-ratio),
    calc(552 * var(--fluid)),
    552px
  );
  color: var(--color-primaryWhite);
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-min-045);
}

.sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  section .sec-inner {
    max-inline-size: none;
    padding-inline: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }

  section .sec-inner h2,
  footer h2 {
  }
  section .sec-inner h2 .txt-sub,
  footer h2 .txt-sub {
  }

  .cfx-ttl {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(35px, calc(35 * var(--fluid-sp)), 35px * var(--fluid-max-ratio));
    padding: 0;
  }
  .cfx-ttl p {
    max-inline-size: none;
    font-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
  }

  .sp-only {
    display: block;
  }
  .pc-only {
    display: none !important;
  }
}

/*===============================================
header
===============================================*/
header {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  inset-block-start: clamp(
    35px * var(--fluid-min-ratio),
    calc(35 * var(--fluid)),
    35px
  );
  inset-inline: 0;
  max-inline-size: 93.984%;
  inline-size: 100%;
  margin-inline: auto;
  padding-block: clamp(
    15px * var(--fluid-min-ratio),
    calc(15 * var(--fluid)),
    15px
  );
  padding-inline: clamp(
      35px * var(--fluid-min-ratio),
      calc(35 * var(--fluid)),
      35px
    )
    clamp(84px * var(--fluid-min-ratio), calc(84 * var(--fluid)), 84px);
  border-radius: 4px;
  background-color: var(--color-primaryWhite);
  z-index: 2;
}

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

nav ul {
  display: flex;
  align-items: center;
  gap: clamp(32px * var(--fluid-min-ratio), calc(32 * var(--fluid)), 32px);
  color: var(--color-primaryBlack);
  font-size: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-min-03);
}
.language {
  display: block;
}
.language a {
  display: flex;
  align-items: center;
  gap: clamp(8px * var(--fluid-min-ratio), calc(8 * var(--fluid)), 8px);
  padding: clamp(5px * var(--fluid-min-ratio), calc(5 * var(--fluid)), 5px)
    clamp(12px * var(--fluid-min-ratio), calc(12 * var(--fluid)), 12px);
  color: var(--color-primaryBlueLight);
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  font-family: inter, sans-serif;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.15px;
  border-radius: 20px;
  background-color: var(--color-primaryWhiteBlue);
}
.language a img {
  max-inline-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px
  );
}

.sp-enBtn {
  display: none;
}

/* hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 101;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  inline-size: clamp(
    24px,
    calc(24 * var(--fluid-sp)),
    24px * var(--fluid-max-ratio)
  );
  block-size: clamp(
    24px,
    calc(24 * var(--fluid-sp)),
    24px * var(--fluid-max-ratio)
  );
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--color-primaryBlack);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-primaryBlueLight);
  outline-offset: 2px;
}

.nav-toggle__bar {
  display: block;
  inline-size: 22px;
  block-size: 2px;
  margin-inline: auto;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

header.is-nav-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

header.is-nav-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

header.is-nav-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-overlay {
  display: none;
}

body.nav-menu-open {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  header {
    position: fixed;
    inset-block-start: 0;
    max-inline-size: none;
    margin-block-start: 0;
    margin-inline: 0;
    padding: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
    border-radius: 0;
    border-block-end: 1px solid var(--color-border-gray);
    z-index: 100;
  }

  .header-inner {
    display: flex;
    gap: clamp(8px, calc(8 * var(--fluid-sp)), 8px * var(--fluid-max-ratio));
    align-items: center;
  }

  .sp-enBtn {
    display: block;
  }
  .sp-enBtn a {
    display: flex;
    gap: clamp(4px, calc(4 * var(--fluid-sp)), 4px * var(--fluid-max-ratio));
    padding: clamp(4px, calc(4 * var(--fluid-sp)), 4px * var(--fluid-max-ratio))
      clamp(8px, calc(8 * var(--fluid-sp)), 8px * var(--fluid-max-ratio));
    color: var(--color-primaryBlueLight);
    font-size: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      12px * var(--fluid-max-ratio)
    );
  }
  .sp-enBtn a img {
    max-inline-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }

  .nav-toggle {
    display: flex;
    flex-shrink: 0;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(2, 8, 15, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    pointer-events: none;
  }

  header.is-nav-open .nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  nav {
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    inset-block-start: 0;
    inset-inline-end: 0;
    block-size: 100dvb;
    inline-size: min(18rem, 86vw);
    max-inline-size: 320px;
    padding-block: 0;
    padding-inline: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
    background-color: var(--color-primaryWhite);
    box-shadow: -8px 0 32px rgba(2, 8, 15, 0.12);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  header.is-nav-open nav {
    transform: translateX(0);
  }

  nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    inline-size: 100%;
  }

  nav ul li {
    border-block-end: 1px solid var(--color-border-gray);
  }

  nav ul li:last-child {
    border-block-end: none;
    margin-block-start: clamp(
      8px * var(--fluid-min-ratio),
      calc(8 * var(--fluid)),
      8px
    );
  }

  nav ul li a {
    display: block;
    padding-block: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
    padding-inline: clamp(
      4px,
      calc(4 * var(--fluid-sp)),
      4px * var(--fluid-max-ratio)
    );
    color: var(--color-primaryBlack);
    font-size: clamp(
      15px,
      calc(15 * var(--fluid-sp)),
      15px * var(--fluid-max-ratio)
    );
  }

  nav ul li a:active {
    color: var(--color-primaryBlueLight);
  }

  nav ul li.language {
    display: none;
  }

  header .logo {
    display: flex;
    max-inline-size: clamp(
      240px,
      calc(240 * var(--fluid-sp)),
      240px * var(--fluid-max-ratio)
    );
  }
}

/*===============================================
hero
===============================================*/
.hero {
  position: relative;
  aspect-ratio: 1280 / 722;
  background-image: url("/images/fv.png");
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 1;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: 100%;
  padding-block-end: clamp(
    48px * var(--fluid-min-ratio),
    calc(48 * var(--fluid)),
    48px
  );
  padding-inline-start: clamp(
    38px * var(--fluid-min-ratio),
    calc(38 * var(--fluid)),
    38px
  );
}

.hero h1 {
  margin-inline: 0
    clamp(
      40px * var(--fluid-min-ratio),
      calc(40 * var(--fluid)),
      40px * var(--fluid-max-ratio)
    );
  padding-inline-start: clamp(
    170px * var(--fluid-min-ratio),
    calc(170 * var(--fluid)),
    170px * var(--fluid-max-ratio)
  );
  color: var(--color-primaryBlack);
  font-size: clamp(
    70px * var(--fluid-min-ratio),
    calc(70 * var(--fluid)),
    70px * var(--fluid-max-ratio)
  );
  background-image: url("/images/img-slash.svg");
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}
.hero h1 .txt-sm {
  display: block;
  font-size: clamp(
    30px * var(--fluid-min-ratio),
    calc(30 * var(--fluid)),
    30px * var(--fluid-max-ratio)
  );
}

.hero .txt-summary {
  color: var(--color-primaryBlackLight);
  font-size: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px * var(--fluid-max-ratio)
  );
  text-shadow: var(--color-text-shadow);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.07px;
}
.hero .txt-summary p .txt-heading {
  display: flex;
  align-items: center;
  gap: clamp(8px * var(--fluid-min-ratio), calc(8 * var(--fluid)), 8px);
  font-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px * var(--fluid-max-ratio)
  );
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-min-045);
}
.hero .txt-summary p strong {
  display: block;
  font-size: clamp(
    30px * var(--fluid-min-ratio),
    calc(30 * var(--fluid)),
    30px * var(--fluid-max-ratio)
  );
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-04);
}

.hero .txt-summary .txt-detail {
  margin-block-start: clamp(
    26px * var(--fluid-min-ratio),
    calc(26 * var(--fluid)),
    26px * var(--fluid-max-ratio)
  );
  font-size: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px * var(--fluid-max-ratio)
  );
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.07px;
}
.hero .txt-summary .txt-detail .txt-sub {
  display: block;
  margin-block-start: clamp(
    8px * var(--fluid-min-ratio),
    calc(8 * var(--fluid)),
    8px * var(--fluid-max-ratio)
  );
  font-size: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px * var(--fluid-max-ratio)
  );
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-min-045);
}

.hero-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  inset-block-end: clamp(
    47px * var(--fluid-min-ratio),
    calc(47 * var(--fluid)),
    47px * var(--fluid-max-ratio)
  );
  inset-inline-end: clamp(
    45px * var(--fluid-min-ratio),
    calc(45 * var(--fluid)),
    45px * var(--fluid-max-ratio)
  );
  inline-size: clamp(
    327px * var(--fluid-min-ratio),
    calc(327 * var(--fluid)),
    327px * var(--fluid-max-ratio)
  );
}
.hero-btn a {
  display: grid;
  align-items: center;
  inline-size: 100%;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  letter-spacing: var(--letter-spacing-min-045);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.75));
  transition: filter 0.3s ease;
}
.hero-btn a:hover {
  filter: none;
}

.hero-btn .btn-yellow {
  aspect-ratio: 328 / 63;
  max-inline-size: clamp(
    328px * var(--fluid-min-ratio),
    calc(328 * var(--fluid)),
    328px * var(--fluid-max-ratio)
  );
  font-size: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px * var(--fluid-max-ratio)
  );
  background-image: url("/images/bg-link_yellow.svg");
}
.hero-btn .btn-blue {
  aspect-ratio: 279 / 54;
  max-inline-size: clamp(
    279px * var(--fluid-min-ratio),
    calc(279 * var(--fluid)),
    279px * var(--fluid-max-ratio)
  );
  margin-block-start: clamp(
    15px * var(--fluid-min-ratio),
    calc(15 * var(--fluid)),
    15px
  );
  font-size: clamp(
    21px * var(--fluid-min-ratio),
    calc(21 * var(--fluid)),
    21px * var(--fluid-max-ratio)
  );
  color: var(--color-primaryWhite);
  background-image: url("/images/bg-link_blue.svg");
}

@media screen and (max-width: 768px) {
  .hero {
    aspect-ratio: 390 / 722;
    background-image: url("/images/fv_sp.png");
  }
  .hero-inner {
    justify-content: flex-start;
    padding-block: clamp(
        100px,
        calc(100 * var(--fluid-sp)),
        100px * var(--fluid-max-ratio)
      )
      0;
    padding-inline: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .hero h1 {
    margin-block: 0
      clamp(16px, calc(16 * var(--fluid-sp)), 16px * var(--fluid-max-ratio));
    margin-inline: 0;
    padding-inline-start: clamp(
      56px,
      calc(56 * var(--fluid-sp)),
      56px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      38px,
      calc(38 * var(--fluid-sp)),
      38px * var(--fluid-max-ratio)
    );
    line-height: 1.3;
    background-image: url("/images/img-slash_sp.svg");
    background-size: clamp(
        51px,
        calc(51 * var(--fluid-sp)),
        51px * var(--fluid-max-ratio)
      )
      clamp(84px, calc(84 * var(--fluid-sp)), 84px * var(--fluid-max-ratio));
    background-position: left bottom 5px;
  }
  .hero h1 .txt-sm {
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
    line-height: 2;
  }
  .hero .txt-summary {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
    line-height: 2;
  }
  .hero .txt-summary p .txt-heading {
    gap: clamp(8px, calc(8 * var(--fluid-sp)), 8px * var(--fluid-max-ratio));
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * 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 {
    margin-block-start: clamp(
      10px,
      calc(10 * var(--fluid-sp)),
      10px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .hero .txt-summary .txt-detail .txt-sub {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .hero-btn {
    inset-block-end: clamp(
      43px,
      calc(43 * var(--fluid-sp)),
      43px * var(--fluid-max-ratio)
    );
    inset-inline-end: 50%;
    transform: translateX(50%);
    max-inline-size: clamp(
      327px,
      calc(327 * var(--fluid-sp)),
      327px * var(--fluid-max-ratio)
    );
    inline-size: 100%;
  }
  .hero-btn .btn-yellow {
    aspect-ratio: 328 / 73;
    max-inline-size: clamp(
      328px,
      calc(328 * var(--fluid-sp)),
      328px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
  }
  .hero-btn .btn-blue {
    aspect-ratio: 279 / 62;
    max-inline-size: clamp(
      279px,
      calc(279 * var(--fluid-sp)),
      279px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
  }
}

/*===============================================
message
===============================================*/
#message {
  padding-block: clamp(
      142px * var(--fluid-min-ratio),
      calc(142 * var(--fluid)),
      142px
    )
    clamp(43px * var(--fluid-min-ratio), calc(43 * var(--fluid)), 43px);
  background-image: url("/images/bg-rectangle.png");
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
}

#message .sec-inner {
  max-inline-size: 1120px;
}

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

.message-list {
  display: flex;
  flex-direction: column;
  gap: clamp(60px * var(--fluid-min-ratio), calc(60 * var(--fluid)), 60px);
  margin-block-start: clamp(
    62px * var(--fluid-min-ratio),
    calc(62 * var(--fluid)),
    62px
  );
}

.message-list .list-items {
  display: flex;
  align-items: center;
  gap: clamp(100px * var(--fluid-min-ratio), calc(100 * var(--fluid)), 100px);
}
.message-list .list-items .img-message {
  max-inline-size: clamp(
    150px * var(--fluid-min-ratio),
    calc(150 * var(--fluid)),
    150px
  );
  inline-size: 100%;
}
.message-list .list-items .text-message {
  font-size: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-min-045);
}
.message-list .list-items .text-message .text-name {
  display: block;
  text-align: right;
}

@media screen and (max-width: 768px) {
  #message {
    padding-block: clamp(
      118px,
      calc(118 * var(--fluid-sp)),
      118px * var(--fluid-max-ratio)
    );
    background: url("/images/bg-rectangle_sp.png"), var(--color-primaryWhite);
    background-size: cover;
  }
  #message .sec-inner h2 {
    aspect-ratio: 181 / 116;
    max-inline-size: clamp(
      181px,
      calc(181 * var(--fluid-sp)),
      181px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-message_sp.png");
  }
  .message-list {
    gap: clamp(40px, calc(40 * var(--fluid-sp)), 40px * var(--fluid-max-ratio));
    margin-block-start: clamp(
      44px,
      calc(44 * var(--fluid-sp)),
      44px * var(--fluid-max-ratio)
    );
  }
  .message-list .list-items {
    flex-direction: column;
    gap: clamp(35px, calc(35 * var(--fluid-sp)), 35px * var(--fluid-max-ratio));
  }
  .message-list .list-items .img-message {
    max-inline-size: clamp(
      265px,
      calc(265 * var(--fluid-sp)),
      265px * var(--fluid-max-ratio)
    );
  }
  .message-list .list-items .img-message img {
    inline-size: 100%;
    block-size: auto;
  }
  .message-list .list-items .text-message {
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
    line-height: 2em;
  }

  .read-more {
    position: relative;
    padding-block-end: clamp(
      30px,
      calc(30 * var(--fluid-sp)),
      30px * var(--fluid-max-ratio)
    );
  }
  .read-more p {
    max-height: 160px;
    transition: max-height 0.3s ease;
    overflow: hidden;
  }
  .read-more p::after {
    position: absolute;
    content: "";
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    height: 80px;
    background-image: var(--color-gradient-transparent);
  }
  .read-more p.is-open::after {
    content: none;
  }
  .read-more .btn-readmore {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, calc(10 * var(--fluid-sp)), 10px * var(--fluid-max-ratio));
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    padding: 0;
    text-align: center;
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
    border: none;
    z-index: 10;
  }
  .read-more .btn-readmore::before {
    position: absolute;
    content: "";
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 100%;
    height: 1px;
    background-color: var(--color-border-gray2);
    z-index: -1;
  }
  .read-more .btn-readmore::after {
    position: absolute;
    content: "";
    inset: 50%;
    transform: translate(-50%, -50%);
    inline-size: clamp(
      130px,
      calc(130 * var(--fluid-sp)),
      130px * var(--fluid-max-ratio)
    );
    height: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
    background-color: var(--color-primaryWhite);
    z-index: -1;
  }
  .read-more .btn-readmore img {
    inline-size: clamp(
      9px,
      calc(9 * var(--fluid-sp)),
      9px * var(--fluid-max-ratio)
    );
    block-size: auto;
  }
}

/*===============================================
about
===============================================*/
#about {
  padding-block: clamp(
    123px * var(--fluid-min-ratio),
    calc(123 * var(--fluid)),
    123px
  );
  padding-inline: clamp(
    80px * var(--fluid-min-ratio),
    calc(80 * var(--fluid)),
    80px
  );
  color: var(--color-primaryWhite);
  background-image: var(--color-gradient-blue);
}
#about .sec-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(205px * var(--fluid-min-ratio), calc(205 * var(--fluid)), 205px);
}

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

#about .sec-inner p {
  inline-size: fit-content;
  font-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px
  );
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-min-045);
}

#about .sec-inner p .txt-right {
  display: block;
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  line-height: 2.28;
  text-align: right;
}

@media screen and (max-width: 768px) {
  #about {
    padding-block: clamp(
      80px,
      calc(80 * var(--fluid-sp)),
      80px * var(--fluid-max-ratio)
    );
    padding-inline: 0;
  }
  #about .sec-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(32px, calc(32 * var(--fluid-sp)), 32px * var(--fluid-max-ratio));
  }
  #about .sec-inner h2 {
    aspect-ratio: 281 / 116;
    max-inline-size: clamp(
      281px,
      calc(281 * var(--fluid-sp)),
      281px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-about_sp.png");
  }
  #about .sec-inner p {
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
    line-height: 2;
  }
  #about .sec-inner p .txt-right {
    font-size: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      12px * var(--fluid-max-ratio)
    );
  }
}

/* ===============================================
highlights
===============================================*/
#highlights {
  padding-block: clamp(
      118px * var(--fluid-min-ratio),
      calc(118 * var(--fluid)),
      118px
    )
    clamp(122px * var(--fluid-min-ratio), calc(122 * var(--fluid)), 122px);
  background-image: var(--color-gradient-blue);
}

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

.highlights-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(10px * var(--fluid-min-ratio), calc(10 * var(--fluid)), 10px);
  margin-block-start: clamp(
    55px * var(--fluid-min-ratio),
    calc(55 * var(--fluid)),
    55px
  );
}
.highlights-list .list-items {
  aspect-ratio: 393 / 287;
  display: flex;
  align-items: flex-end;
  inline-size: calc(100% / 3 - 10px);
  padding: clamp(16px * var(--fluid-min-ratio), calc(16 * var(--fluid)), 16px)
    clamp(26px * var(--fluid-min-ratio), calc(26 * var(--fluid)), 26px);
  color: var(--color-primaryWhite);
  font-weight: 500;
  background-image: url("/images/img-highlights01.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.highlights-list .list-items:nth-child(2) {
  background-image: url("/images/img-highlights02.png");
}
.highlights-list .list-items:nth-child(3) {
  background-image: url("/images/img-highlights03.png");
}
.highlights-list .list-items:nth-child(4) {
  background-image: url("/images/img-highlights04.png");
}
.highlights-list .list-items:nth-child(5) {
  background-image: url("/images/img-highlights05.png");
}
.highlights-list .list-items:nth-child(6) {
  background-image: url("/images/img-highlights06.png");
}

@media screen and (max-width: 768px) {
  #highlights {
    padding-block: clamp(
        54px,
        calc(54 * var(--fluid-sp)),
        54px * var(--fluid-max-ratio)
      )
      clamp(118px, calc(118 * var(--fluid-sp)), 118px * var(--fluid-max-ratio));
  }
  #highlights .sec-inner h2 {
    aspect-ratio: 324 / 116;
    max-inline-size: clamp(
      324px,
      calc(324 * var(--fluid-sp)),
      324px * var(--fluid-max-ratio)
    );
    margin-inline-start: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-highlight_sp.png");
  }
  .highlights-list {
    gap: clamp(10px, calc(10 * var(--fluid-sp)), 10px * var(--fluid-max-ratio));
    margin-block-start: clamp(
      48px,
      calc(48 * var(--fluid-sp)),
      48px * var(--fluid-max-ratio)
    );
  }
  .highlights-list .list-items {
    inline-size: 100%;
    padding-block: clamp(
      10px,
      calc(10 * var(--fluid-sp)),
      10px * var(--fluid-max-ratio)
    );
    padding-inline: clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        16px * var(--fluid-max-ratio)
      )
      clamp(8px, calc(8 * var(--fluid-sp)), 8px * var(--fluid-max-ratio));
  }
}

/* ===============================================
schedule-info
===============================================*/
.schedule-info {
  padding-block: clamp(
      160px * var(--fluid-min-ratio),
      calc(160 * var(--fluid)),
      160px
    )
    clamp(120px * var(--fluid-min-ratio), calc(120 * var(--fluid)), 120px);
  background-image: url("/images/bg-rectangle04.png");
  background-size: clamp(
    1280px * var(--fluid-min-ratio),
    calc(1280 * var(--fluid)),
    1280px * var(--fluid-max-ratio)
  );
  background-position: top left;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .schedule-info {
    padding-block: clamp(
        90px,
        calc(90 * var(--fluid-sp)),
        90px * var(--fluid-max-ratio)
      )
      clamp(80px, calc(80 * var(--fluid-sp)), 80px * var(--fluid-max-ratio));
    background-image: url("/images/bg-rectangle04_sp.png");
    background-size: cover;
  }
  .schedule-info .sec-inner {
    padding: 0;
  }
}

/* ===============================================
schedule
===============================================*/
#schedule h2 {
  aspect-ratio: 779 / 74;
  max-inline-size: clamp(
    779px * var(--fluid-min-ratio),
    calc(779 * var(--fluid)),
    779px
  );
  background-image: url("/images/ttl-schedule.png");
}
.schedule-wrap {
  margin-block-start: clamp(
    80px * var(--fluid-min-ratio),
    calc(80 * var(--fluid)),
    80px
  );
  padding: clamp(80px * var(--fluid-min-ratio), calc(80 * var(--fluid)), 80px)
    clamp(62px * var(--fluid-min-ratio), calc(62 * var(--fluid)), 62px);
  background-color: var(--color-primaryWhite);
}
.schedule-wrap .txt-right {
  margin-block-start: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  text-align: right;
  font-weight: 700;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: clamp(40px * var(--fluid-min-ratio), calc(40 * var(--fluid)), 40px);
}

.schedule-list .list-items {
  padding-block: clamp(
      35px * var(--fluid-min-ratio),
      calc(35 * var(--fluid)),
      35px
    )
    clamp(40px * var(--fluid-min-ratio), calc(40 * var(--fluid)), 40px);
  padding-inline: clamp(
      58px * var(--fluid-min-ratio),
      calc(58 * var(--fluid)),
      58px
    )
    clamp(68px * var(--fluid-min-ratio), calc(68 * var(--fluid)), 68px);
  background: var(--bg-primaryBlue);
}

.schedule-list .list-items .date {
  display: flex;
  align-items: center;
  gap: clamp(12px * var(--fluid-min-ratio), calc(12 * var(--fluid)), 12px);
  margin-block-end: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px
  );
  padding-block-end: clamp(
    8px * var(--fluid-min-ratio),
    calc(8 * var(--fluid)),
    8px
  );
  font-size: clamp(
    30px * var(--fluid-min-ratio),
    calc(30 * var(--fluid)),
    30px
  );
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-04);
  border-bottom: 2px solid var(--color-primaryBlue);
}

.schedule-list .list-items .date .img {
  display: grid;
  place-items: center;
  padding: clamp(12px * var(--fluid-min-ratio), calc(12 * var(--fluid)), 12px);
  inline-size: clamp(
    48px * var(--fluid-min-ratio),
    calc(48 * var(--fluid)),
    48px
  );
  block-size: clamp(
    48px * var(--fluid-min-ratio),
    calc(48 * var(--fluid)),
    48px
  );
  border-radius: 50%;
  background-color: var(--color-primaryBlue);
}

.schedule-list .list-items .time-line {
  display: flex;
  flex-direction: column;
  gap: clamp(24px * var(--fluid-min-ratio), calc(24 * var(--fluid)), 24px);
}

.schedule-list .list-items .time-line .time-line-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px * var(--fluid-min-ratio), calc(16 * var(--fluid)), 16px);
  padding: clamp(20px * var(--fluid-min-ratio), calc(20 * var(--fluid)), 20px);
  background-color: var(--color-primaryWhite);
}

.schedule-list .list-items .time-line .time {
  display: flex;
  align-items: center;
  gap: clamp(8px * var(--fluid-min-ratio), calc(8 * var(--fluid)), 8px);
  min-inline-size: clamp(
    160px * var(--fluid-min-ratio),
    calc(160 * var(--fluid)),
    160px
  );
  font-size: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-min-03);
}

.schedule-list .list-items .time-line .content {
  inline-size: 100%;
  color: var(--color-primaryBlackLight2);
  font-size: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-min-045);
}
.schedule-list .list-items .time-line .content p .txt-en {
  margin-block-start: clamp(
    4px * var(--fluid-min-ratio),
    calc(4 * var(--fluid)),
    4px
  );
}

.schedule-list .list-items .time-line .content .location {
  display: flex;
  align-items: center;
  gap: clamp(8px * var(--fluid-min-ratio), calc(8 * var(--fluid)), 8px);
  margin-block-start: clamp(
    8px * var(--fluid-min-ratio),
    calc(8 * var(--fluid)),
    8px
  );
  color: var(--color-primaryBlack);
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-min-015);
}

.schedule-list .list-items .time-line .content .txt-summary {
  margin-block-start: clamp(
    6px * var(--fluid-min-ratio),
    calc(6 * var(--fluid)),
    6px
  );
  padding: clamp(12px * var(--fluid-min-ratio), calc(12 * var(--fluid)), 12px);
  color: var(--color-primaryGray);
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-min-015);
  background-color: var(--bg-primaryWhite);
}

/* セクション共通 */
.schedule-list .list-items .txt-en {
  display: block;
  color: var(--color-primaryGray);
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-min-015);
}

@media screen and (max-width: 768px) {
  #schedule h2 {
    aspect-ratio: 329 / 161;
    max-inline-size: clamp(
      329px,
      calc(329 * var(--fluid-sp)),
      329px * var(--fluid-max-ratio)
    );
    margin-inline-start: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-schedule_sp.png");
  }
  .schedule-wrap {
    margin-block-start: clamp(
      84px,
      calc(84 * var(--fluid-sp)),
      84px * var(--fluid-max-ratio)
    );
    padding: clamp(
        50px,
        calc(50 * var(--fluid-sp)),
        50px * var(--fluid-max-ratio)
      )
      clamp(14px, calc(14 * var(--fluid-sp)), 14px * var(--fluid-max-ratio));
  }
  .schedule-list {
    gap: clamp(37px, calc(37 * var(--fluid-sp)), 37px * var(--fluid-max-ratio));
  }
  .schedule-list .list-items {
    padding: clamp(
      25px,
      calc(25 * var(--fluid-sp)),
      25px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .date {
    gap: clamp(12px, calc(12 * var(--fluid-sp)), 12px * var(--fluid-max-ratio));
    margin-block-end: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
    padding-block-end: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      8px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .date .img {
    inline-size: clamp(
      48px,
      calc(48 * var(--fluid-sp)),
      48px * var(--fluid-max-ratio)
    );
    block-size: clamp(
      48px,
      calc(48 * var(--fluid-sp)),
      48px * var(--fluid-max-ratio)
    );
    padding: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      12px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .txt-en {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .time-line {
    gap: clamp(16px, calc(16 * var(--fluid-sp)), 16px * var(--fluid-max-ratio));
  }
  .schedule-list .list-items .time-line .time-line-item {
    flex-direction: column;
    gap: clamp(16px, calc(16 * var(--fluid-sp)), 16px * var(--fluid-max-ratio));
    padding: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .time-line .time {
    gap: clamp(8px, calc(8 * var(--fluid-sp)), 8px * var(--fluid-max-ratio));
    min-inline-size: auto;
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .time-line .content {
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .time-line .content p .txt-en {
    margin-block-start: clamp(
      4px,
      calc(4 * var(--fluid-sp)),
      4px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .time-line .content .location {
    gap: clamp(8px, calc(8 * var(--fluid-sp)), 8px * var(--fluid-max-ratio));
    margin-block-start: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      8px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .schedule-list .list-items .time-line .content .txt-summary {
    margin-block-start: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      8px * var(--fluid-max-ratio)
    );
    padding: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      12px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .schedule-wrap .txt-right {
    margin-block-start: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      12px * var(--fluid-max-ratio)
    );
  }
}

/* ===============================================
venue
===============================================*/
#venue {
  margin-block-start: clamp(
    120px * var(--fluid-min-ratio),
    calc(120 * var(--fluid)),
    120px
  );
}

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

.venue-list {
  display: flex;
  flex-direction: column;
  gap: clamp(24px * var(--fluid-min-ratio), calc(24 * var(--fluid)), 24px);
  margin-block-start: clamp(
    80px * var(--fluid-min-ratio),
    calc(80 * var(--fluid)),
    80px
  );
  background-color: var(--color-primaryWhite);
}

.venue-list .list-items {
  padding: clamp(40px * var(--fluid-min-ratio), calc(40 * var(--fluid)), 40px);
}

.venue-list .list-items .ttl-heading {
  position: relative;
  margin-block-end: clamp(
    32px * var(--fluid-min-ratio),
    calc(32 * var(--fluid)),
    32px
  );
  padding-block-end: clamp(
    28px * var(--fluid-min-ratio),
    calc(28 * var(--fluid)),
    28px
  );
  padding-inline-start: clamp(
    55px * var(--fluid-min-ratio),
    calc(55 * var(--fluid)),
    55px
  );

  border-bottom: 1px solid #000;
}
.venue-list .list-items .ttl-heading::before {
  position: absolute;
  content: "";
  inset-block-start: 0;
  inset-inline-start: 0;
  width: clamp(43px * var(--fluid-min-ratio), calc(43 * var(--fluid)), 43px);
  height: clamp(73px * var(--fluid-min-ratio), calc(73 * var(--fluid)), 73px);
  background-image: url("/images/img-slash_min.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.venue-list .list-items .ttl-heading .txt-ttl {
  display: flex;
  align-items: center;
  gap: clamp(15px * var(--fluid-min-ratio), calc(15 * var(--fluid)), 15px);
  font-size: clamp(
    30px * var(--fluid-min-ratio),
    calc(30 * var(--fluid)),
    30px
  );
  font-weight: 700;
  line-height: 1.2;
}
.venue-list .list-items .ttl-heading .txt-sub {
  margin-block-start: clamp(
    8px * var(--fluid-min-ratio),
    calc(8 * var(--fluid)),
    8px
  );
  font-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px
  );
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-min-045);
}
.venue-list .list-items .ttl-heading img {
  inline-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px
  );
}

.venue-list .list-items .venue-map {
  display: flex;
  gap: clamp(26px * var(--fluid-min-ratio), calc(26 * var(--fluid)), 26px);
}

.venue-list .list-items .venue-map .venue-summary {
  display: flex;
  flex-direction: column;
  gap: clamp(24px * var(--fluid-min-ratio), calc(24 * var(--fluid)), 24px);
  inline-size: 100%;
  font-size: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-min-03);
}
.venue-list .list-items .venue-map .venue-summary > div {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px * var(--fluid-min-ratio), calc(12 * var(--fluid)), 12px);
}

.venue-list .list-items .venue-map .venue-summary > div img {
  inline-size: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
}

.venue-list .list-items .venue-map .venue-summary .txt-gray {
  display: block;
  color: var(--color-primaryGrayLight);
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-min-015);
}

.venue-list .list-items .venue-map .venue-summary .access-summary {
  padding: clamp(16px * var(--fluid-min-ratio), calc(16 * var(--fluid)), 16px);
  background-color: var(--bg-primaryBlue);
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
}
.venue-list .list-items .venue-map .venue-summary .access-summary strong {
  display: block;
}

.venue-list .list-items .venue-map .venue-map {
  aspect-ratio: 532 / 224;
  max-inline-size: clamp(
    532px * var(--fluid-min-ratio),
    calc(532 * var(--fluid)),
    532px
  );
  inline-size: 100%;
  border-radius: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  overflow: hidden;
}
.venue-list .list-items .venue-map .venue-map iframe {
  inline-size: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  #venue {
    margin-block-start: clamp(
      100px,
      calc(100 * var(--fluid-sp)),
      100px * var(--fluid-max-ratio)
    );
    padding-inline: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  #venue h2 {
    aspect-ratio: 325 / 170;
    max-inline-size: clamp(
      325px,
      calc(325 * var(--fluid-sp)),
      325px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-venue_sp.png");
  }
  .venue-list {
    margin-block-start: clamp(
      35px,
      calc(35 * var(--fluid-sp)),
      35px * var(--fluid-max-ratio)
    );
    gap: clamp(20px, calc(20 * var(--fluid-sp)), 20px * var(--fluid-max-ratio));
  }
  .venue-list .list-items {
    padding: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      32px * var(--fluid-max-ratio)
    );
    padding-block-start: clamp(
      21px,
      calc(21 * var(--fluid-sp)),
      21px * var(--fluid-max-ratio)
    );
  }
  .venue-list .list-items .ttl-heading {
    margin-block-end: clamp(
      34px,
      calc(34 * var(--fluid-sp)),
      34px * var(--fluid-max-ratio)
    );
    padding-block-end: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
    padding-inline-start: 0;
  }
  .venue-list .list-items .ttl-heading::before {
    inset-block-start: clamp(
      -4px,
      calc(-4 * var(--fluid-sp)),
      -4px * var(--fluid-max-ratio)
    );
    inline-size: clamp(
      43px,
      calc(43 * var(--fluid-sp)),
      43px * var(--fluid-max-ratio)
    );
    block-size: clamp(
      73px,
      calc(73 * var(--fluid-sp)),
      73px * var(--fluid-max-ratio)
    );
  }
  .venue-list .list-items .ttl-heading .txt-ttl {
    gap: clamp(12px, calc(12 * var(--fluid-sp)), 12px * var(--fluid-max-ratio));
    min-block-size: clamp(
      64px,
      calc(64 * var(--fluid-sp)),
      64px * var(--fluid-max-ratio)
    );
    padding-inline-start: clamp(
      50px,
      calc(50 * var(--fluid-sp)),
      50px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
    font-weight: 400;
    line-height: 1.3;
  }
  .venue-list .list-items .ttl-heading img {
    inline-size: clamp(
      19px,
      calc(19 * var(--fluid-sp)),
      19px * var(--fluid-max-ratio)
    );
  }
  .venue-list .list-items .ttl-heading .txt-sub {
    margin-block-start: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      8px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
  }
  .venue-list .list-items .venue-map {
    flex-direction: column;
    gap: clamp(32px, calc(32 * var(--fluid-sp)), 32px * var(--fluid-max-ratio));
  }
  .venue-list .list-items .venue-map .venue-summary {
    gap: clamp(24px, calc(24 * var(--fluid-sp)), 24px * var(--fluid-max-ratio));
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .venue-list .list-items .venue-map .venue-summary > div {
    gap: clamp(12px, calc(12 * var(--fluid-sp)), 12px * var(--fluid-max-ratio));
  }
  .venue-list .list-items .venue-map .venue-summary > div img {
    inline-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
  }
  .venue-list .list-items .venue-map .venue-summary .txt-gray {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .venue-list .list-items .venue-map .venue-summary .access-summary {
    padding: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .venue-list .list-items .venue-map .venue-map {
    aspect-ratio: 297 / 320;
    max-inline-size: none;
    border-radius: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
}

/* ===============================================
hotel
===============================================*/
#hotel {
  padding-block: clamp(
      120px * var(--fluid-min-ratio),
      calc(120 * var(--fluid)),
      120px
    )
    clamp(139px * var(--fluid-min-ratio), calc(139 * var(--fluid)), 139px);
  background-image: url("/images/bg-hotel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

.hotel-ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hotel-ttl .hero-btn {
  position: relative;
  inset: 0;
}

.hotel-ttl .hero-btn .btn-yellow {
  max-inline-size: clamp(
    328px * var(--fluid-min-ratio),
    calc(328 * var(--fluid)),
    328px
  );
  font-size: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px
  );
}

.hotel-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(20px * var(--fluid-min-ratio), calc(20 * var(--fluid)), 20px);
  margin-block-start: clamp(
    80px * var(--fluid-min-ratio),
    calc(80 * var(--fluid)),
    80px
  );
}

.hotel-list .list-items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  inline-size: calc(100% / 3 - 14px);
  padding: clamp(24px * var(--fluid-min-ratio), calc(24 * var(--fluid)), 24px);
  color: var(--color-primaryBlack);
  font-size: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-min-03);
  background-color: var(--color-primaryWhite);
}
.hotel-list .list-items:first-of-type {
  inline-size: 100%;
  text-align: center;
}

.hotel-list .list-items strong {
  position: relative;
  display: block;
  margin-block-end: clamp(
    8px * var(--fluid-min-ratio),
    calc(8 * var(--fluid)),
    8px
  );
  padding-inline-start: clamp(
    25px * var(--fluid-min-ratio),
    calc(25 * var(--fluid)),
    25px
  );
  color: var(--color-primaryBlackLight2);
  font-size: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px
  );
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-007);
}
.hotel-list .list-items strong::before {
  position: absolute;
  content: "";
  inset-block-start: 0;
  inset-inline-start: 0;
  width: clamp(20px * var(--fluid-min-ratio), calc(20 * var(--fluid)), 20px);
  height: clamp(33px * var(--fluid-min-ratio), calc(33 * var(--fluid)), 33px);
  background-image: url("/images/img-slash_hotel.svg");
  background-size: contain;
  background-position: center;
}

.hotel-list .list-items:first-of-type strong {
  display: table;
  margin-inline: auto;
}
.hotel-list .list-items:first-of-type .info {
  align-items: center;
}

.hotel-list .list-items .info {
  display: flex;
  flex-direction: column;
  gap: clamp(12px * var(--fluid-min-ratio), calc(12 * var(--fluid)), 12px);
  margin-block-start: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
}
.hotel-list .list-items .info p {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px * var(--fluid-min-ratio), calc(8 * var(--fluid)), 8px);
  color: var(--color-primaryGray);
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
}

.hotel-list .list-items .application {
  margin-block-start: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  padding-block-start: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  font-size: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  border-top: 1px solid var(--color-border-gray);
  text-align: center;
}

.hotel-list .list-items .application a {
  display: block;
  margin-block-start: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  padding-block: clamp(
    12px * var(--fluid-min-ratio),
    calc(12 * var(--fluid)),
    12px
  );
  color: var(--color-primaryWhite);
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  line-height: 1.5;
  background-color: var(--bg-btn-primaryBlue);
}

.hotel-info {
  margin-block-start: clamp(
    38px * var(--fluid-min-ratio),
    calc(38 * var(--fluid)),
    38px
  );
  text-align: center;
  background-color: var(--color-primaryWhite);
}
.hotel-info p {
  padding-block: clamp(
    12px * var(--fluid-min-ratio),
    calc(12 * var(--fluid)),
    12px
  );
  line-height: 4.44;
  background-color: var(--bg-primaryBlue);
}

.hotel-info p .txt-slash {
  position: relative;
}
.hotel-info p .txt-slash::before {
  position: absolute;
  content: "";
  inset-block-start: 50%;
  inset-inline-start: clamp(
    -40px * var(--fluid-max-ratio),
    calc(-40 * var(--fluid)),
    -40px * var(--fluid-min-ratio)
  );
  transform: translateY(-50%);
  width: clamp(20px * var(--fluid-min-ratio), calc(20 * var(--fluid)), 20px);
  height: clamp(33px * var(--fluid-min-ratio), calc(33 * var(--fluid)), 33px);
  background-image: url("/images/img-slash_hotel.svg");
  background-size: contain;
  background-position: center;
}

@media screen and (max-width: 768px) {
  #hotel {
    padding-block: clamp(
        100px,
        calc(100 * var(--fluid-sp)),
        100px * var(--fluid-max-ratio)
      )
      clamp(70px, calc(70 * var(--fluid-sp)), 70px * var(--fluid-max-ratio));
    background-image: url("/images/bg-hotel_sp.png");
    background-size: cover;
  }
  #hotel .sec-inner h2 {
    aspect-ratio: 218 / 78;
    max-inline-size: clamp(
      218px,
      calc(218 * var(--fluid-sp)),
      218px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-hotel_sp.png");
  }
  .hotel-list {
    flex-direction: column;
    gap: clamp(30px, calc(30 * var(--fluid-sp)), 30px * var(--fluid-max-ratio));
    margin-block-start: clamp(
      53px,
      calc(53 * var(--fluid-sp)),
      53px * var(--fluid-max-ratio)
    );
  }
  .hotel-list .list-items {
    inline-size: 100%;
    padding: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .hotel-list .list-items:first-of-type {
    text-align: left;
  }
  .hotel-list .list-items strong {
    margin-block-end: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      8px * var(--fluid-max-ratio)
    );
    padding: 0;
    font-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
  }
  .hotel-list .list-items strong::before {
    content: none;
  }
  .hotel-list .list-items:first-of-type strong {
    display: block;
    margin-inline: auto;
  }
  .hotel-list .list-items .info {
    gap: clamp(12px, calc(12 * var(--fluid-sp)), 12px * var(--fluid-max-ratio));
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .hotel-list .list-items .info p {
    gap: clamp(8px, calc(8 * var(--fluid-sp)), 8px * var(--fluid-max-ratio));
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .hotel-list .list-items:first-of-type .info {
    align-items: flex-start;
  }
  .hotel-list .list-items .info p img {
    inline-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
  }
  .hotel-list .list-items .application {
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
    padding-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .hotel-list .list-items .application a {
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
    padding-block: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      12px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .hotel-info {
    margin-block-start: clamp(
      60px,
      calc(60 * var(--fluid-sp)),
      60px * var(--fluid-max-ratio)
    );
  }
  .hotel-info p {
    padding: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
    line-height: 1.6;
    text-align: left;
  }
  .hotel-info p .txt-slash {
    display: table;
    margin-inline: auto;
    padding-inline-start: clamp(
      22px,
      calc(22 * var(--fluid-sp)),
      22px * var(--fluid-max-ratio)
    );
  }
  .hotel-info p .txt-slash::before {
    inset-inline-start: clamp(
      -16px * var(--fluid-max-ratio),
      calc(-16 * var(--fluid-sp)),
      -16px
    );
    inset-block-start: clamp(
      6px,
      calc(6 * var(--fluid-sp)),
      6px * var(--fluid-max-ratio)
    );
    inline-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
    block-size: clamp(
      33px,
      calc(33 * var(--fluid-sp)),
      33px * var(--fluid-max-ratio)
    );
    transform: translateX(0);
  }

  #hotel .hero-btn.sp-only {
    position: relative;
    inset: 0;
    transform: none;
    margin-block-start: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      40px * var(--fluid-max-ratio)
    );
    margin-inline: auto;
  }
}

/* ===============================================
history
===============================================*/
#history {
  padding-block: clamp(
      90px * var(--fluid-min-ratio),
      calc(90 * var(--fluid)),
      90px
    )
    clamp(128px * var(--fluid-min-ratio), calc(128 * var(--fluid)), 128px);
  background-image: url("/images/bg-rectangle03.png");
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
}

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

.history-ttl p {
  color: var(--color-primaryBlue);
  font-size: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-min-045);
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(10px * var(--fluid-min-ratio), calc(10 * var(--fluid)), 10px);
  margin-block-start: clamp(
    60px * var(--fluid-min-ratio),
    calc(60 * var(--fluid)),
    60px
  );
}

.history-list .list-items {
  inline-size: 100%;
  padding-block: clamp(
    34px * var(--fluid-min-ratio),
    calc(34 * var(--fluid)),
    34px
  );
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  letter-spacing: var(--letter-spacing-012);
  text-align: center;
  background-color: var(--color-primaryYellow);
}
.history-list .list-items:first-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px * var(--fluid-min-ratio), calc(18 * var(--fluid)), 18px);
}
.history-list .list-items:nth-child(n + 2) {
  inline-size: calc(100% / 4 - 8px);
  padding-inline: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  padding-block: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px
  );
  background-color: var(--color-primaryWhite);
}
.history-list .list-items:nth-child(n + 6) {
  inline-size: calc(100% / 5 - 8px);
}

.history-list .list-items p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px * var(--fluid-min-ratio), calc(4 * var(--fluid)), 4px);
}
.history-list .list-items p:first-of-type::before {
  position: absolute;
  content: "";
  inset-block-start: 50%;
  inset-inline-start: clamp(
    -25px,
    calc(-25 * var(--fluid)),
    -25px * var(--fluid-min-ratio)
  );
  inline-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px
  );
  block-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px
  );
  background-image: url("/images/icon-calendar_blue.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.history-list .list-items p strong {
  font-size: clamp(
    34px * var(--fluid-min-ratio),
    calc(34 * var(--fluid)),
    34px
  );
  line-height: 0.8;
  letter-spacing: var(--letter-spacing-min-045);
}
.history-list .list-items p img {
  inline-size: clamp(
    18px * var(--fluid-min-ratio),
    calc(18 * var(--fluid)),
    18px
  );
}

.history-list .list-items:nth-child(n + 2) p {
  inline-size: fit-content;
  margin-inline: auto;
  color: var(--color-primaryGray);
}
.history-list .list-items:nth-child(n + 2) p:first-of-type::before {
  background-image: url("/images/icon-calendar.svg");
}
.history-list .list-items:nth-child(n + 2) p strong {
  color: var(--color-primaryBlackLight);
  font-size: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px
  );
}

.history-list .list-items .venue {
  margin-block-start: clamp(
    12px * var(--fluid-min-ratio),
    calc(12 * var(--fluid)),
    12px
  );
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-min-015);
}
.history-list .list-items:first-of-type .venue {
  margin: 0;
  gap: clamp(18px * var(--fluid-min-ratio), calc(18 * var(--fluid)), 18px);
}

.history-list .list-items .venue .label {
  padding-block: clamp(
    5px * var(--fluid-min-ratio),
    calc(5 * var(--fluid)),
    5px
  );
  padding-inline: clamp(
    10px * var(--fluid-min-ratio),
    calc(10 * var(--fluid)),
    10px
  );
  font-size: clamp(
    12px * var(--fluid-min-ratio),
    calc(12 * var(--fluid)),
    12px
  );
  line-height: 1.3;
  background-color: var(--color-primaryWhite);
}

@media screen and (max-width: 768px) {
  #history {
    padding-block: clamp(
        95px,
        calc(95 * var(--fluid-sp)),
        95px * var(--fluid-max-ratio)
      )
      clamp(110px, calc(110 * var(--fluid-sp)), 110px * var(--fluid-max-ratio));
    background-image: url("/images/bg-rectangle03_sp.png");
    background-size: cover;
  }
  #history .sec-inner h2 {
    aspect-ratio: 318 / 116;
    max-inline-size: clamp(
      318px,
      calc(318 * var(--fluid-sp)),
      318px * var(--fluid-max-ratio)
    );
    margin-inline-start: clamp(
      36px,
      calc(36 * var(--fluid-sp)),
      36px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-history_sp.png");
  }
  .history-ttl p {
    font-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
  }
  .history-list {
    gap: clamp(10px, calc(10 * var(--fluid-sp)), 10px * var(--fluid-max-ratio));
    margin-block-start: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      40px * var(--fluid-max-ratio)
    );
  }
  .history-list .list-items {
    padding-block: clamp(
      35px,
      calc(35 * var(--fluid-sp)),
      35px * var(--fluid-max-ratio)
    );
  }
  .history-list .list-items:nth-child(n + 2) {
    aspect-ratio: 176 / 100;
    inline-size: calc(
      50% - clamp(5px, calc(5 * var(--fluid-sp)), 5px * var(--fluid-max-ratio))
    );
    padding-block: clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        24px * var(--fluid-max-ratio)
      )
      clamp(10px, calc(10 * var(--fluid-sp)), 10px * var(--fluid-max-ratio));
    padding-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .history-list .list-items:first-of-type {
    gap: clamp(18px, calc(18 * var(--fluid-sp)), 18px * var(--fluid-max-ratio));
  }
  .history-list .list-items p {
    gap: clamp(4px, calc(4 * var(--fluid-sp)), 4px * var(--fluid-max-ratio));
  }
  .history-list .list-items p:first-of-type::before {
    inset-inline-start: clamp(
      -25px,
      calc(-25 * var(--fluid-sp)),
      -25px * var(--fluid-max-ratio)
    );
    inline-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
    block-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
  }
  .history-list .list-items p strong {
    font-size: clamp(
      34px,
      calc(34 * var(--fluid-sp)),
      34px * var(--fluid-max-ratio)
    );
  }
  .history-list .list-items:nth-child(n + 2) p strong {
    font-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
  }
  .history-list .list-items p img {
    inline-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      18px * var(--fluid-max-ratio)
    );
  }
  .history-list .list-items .venue {
    margin-block-start: clamp(
      10px,
      calc(10 * var(--fluid-sp)),
      10px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .history-list .list-items:first-of-type .venue {
    gap: clamp(18px, calc(18 * var(--fluid-sp)), 18px * var(--fluid-max-ratio));
  }
  .history-list .list-items .venue .label {
    padding: clamp(5px, calc(5 * var(--fluid-sp)), 5px * var(--fluid-max-ratio))
      clamp(11px, calc(11 * var(--fluid-sp)), 11px * var(--fluid-max-ratio));
    font-size: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      12px * var(--fluid-max-ratio)
    );
  }
}

/* ===============================================
fukuoak
===============================================*/
#fukuoka {
  padding-block: clamp(
    120px * var(--fluid-min-ratio),
    calc(120 * var(--fluid)),
    120px
  );
  background-image: url("/images/bg-rectangle02.png");
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
}

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

.charm-fuk {
  margin-block-start: clamp(
    87px * var(--fluid-min-ratio),
    calc(87 * var(--fluid)),
    87px
  );
}

.charm-fuk > .video {
  position: relative;
  aspect-ratio: 878 / 493;
  max-inline-size: clamp(
    878px * var(--fluid-min-ratio),
    calc(878 * var(--fluid)),
    878px
  );
  inline-size: 100%;
  margin-inline: auto;
  z-index: 1;
}
.charm-fuk > .video::before {
  position: absolute;
  content: "";
  inset-block-start: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  inset-inline-start: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  inline-size: 100%;
  block-size: 100%;
  background-image: url("/images/bg-movie.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.charm-list {
  display: flex;
  gap: clamp(10px * var(--fluid-min-ratio), calc(10 * var(--fluid)), 10px);
  margin-block-start: clamp(
    80px * var(--fluid-min-ratio),
    calc(80 * var(--fluid)),
    80px
  );
}

.charm-list .list-items {
  display: grid;
  place-items: center;
  inline-size: calc(100% / 5 - 8px);
  padding: clamp(20px * var(--fluid-min-ratio), calc(20 * var(--fluid)), 20px);
  color: var(--color-primaryWhite);
  text-align: center;
  background-color: var(--bg-primaryBlue2);
}
.charm-list .list-items .icon {
  inline-size: clamp(
    72px * var(--fluid-min-ratio),
    calc(72 * var(--fluid)),
    72px
  );
  block-size: clamp(
    72px * var(--fluid-min-ratio),
    calc(72 * var(--fluid)),
    72px
  );
  padding: clamp(16px * var(--fluid-min-ratio), calc(16 * var(--fluid)), 16px);
  margin-inline: auto;
  border-radius: 50%;
  background-color: var(--color-primaryWhite);
}
.charm-list .list-items .icon img {
  inline-size: clamp(
    40px * var(--fluid-min-ratio),
    calc(40 * var(--fluid)),
    40px
  );
}

.charm-list .list-items p {
  margin-block-start: clamp(
    11px * var(--fluid-min-ratio),
    calc(11 * var(--fluid)),
    11px
  );
}

@media screen and (max-width: 768px) {
  #fukuoka {
    padding-block: clamp(
        92px,
        calc(92 * var(--fluid-sp)),
        92px * var(--fluid-max-ratio)
      )
      clamp(120px, calc(120 * var(--fluid-sp)), 120px * var(--fluid-max-ratio));
    background-image: url("/images/bg-rectangle02_sp.png");
    background-position: bottom right;
  }
  #fukuoka .sec-inner h2 {
    aspect-ratio: 336 / 170;
    max-inline-size: clamp(
      336px,
      calc(336 * var(--fluid-sp)),
      336px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-fuk_sp.png");
  }
  .charm-fuk {
    margin-block-start: clamp(
      62px,
      calc(62 * var(--fluid-sp)),
      62px * var(--fluid-max-ratio)
    );
  }
  .charm-fuk .video {
    max-inline-size: clamp(
      341px,
      calc(341 * var(--fluid-sp)),
      341px * var(--fluid-max-ratio)
    );
  }
  .charm-fuk > .video::before {
    inset-inline-end: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      8px * var(--fluid-max-ratio)
    );
    inset-block-end: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      8px * var(--fluid-max-ratio)
    );
  }
  .charm-list {
    flex-direction: column;
    gap: clamp(10px, calc(10 * var(--fluid-sp)), 10px * var(--fluid-max-ratio));
    margin-block-start: clamp(
      60px,
      calc(60 * var(--fluid-sp)),
      60px * var(--fluid-max-ratio)
    );
  }
  .charm-list .list-items {
    aspect-ratio: 360 / 170;
    inline-size: 100%;
    padding-block: clamp(
        30px,
        calc(30 * var(--fluid-sp)),
        30px * var(--fluid-max-ratio)
      )
      clamp(10px, calc(10 * var(--fluid-sp)), 10px * var(--fluid-max-ratio));
  }
  .charm-list .list-items .icon {
    inline-size: clamp(
      72px,
      calc(72 * var(--fluid-sp)),
      72px * var(--fluid-max-ratio)
    );
    block-size: clamp(
      72px,
      calc(72 * var(--fluid-sp)),
      72px * var(--fluid-max-ratio)
    );
    padding: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .charm-list .list-items .icon img {
    inline-size: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      40px * var(--fluid-max-ratio)
    );
  }
  .charm-list .list-items p {
    margin-block-start: clamp(
      11px,
      calc(11 * var(--fluid-sp)),
      11px * var(--fluid-max-ratio)
    );
  }
}

/* ===============================================
excursion
===============================================*/
#excursion {
  padding-block: clamp(
      120px * var(--fluid-min-ratio),
      calc(120 * var(--fluid)),
      120px
    )
    clamp(20px * var(--fluid-min-ratio), calc(20 * var(--fluid)), 20px);
  background-image: var(--color-gradient-blue);
}

#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/ttl-excursion.png");
}

.excursion-ttl {
  justify-content: flex-start;
  gap: clamp(69px * var(--fluid-min-ratio), calc(69 * var(--fluid)), 69px);
}

.excursion-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px * var(--fluid-min-ratio), calc(10 * var(--fluid)), 10px);
  margin-block-start: clamp(
    55px * var(--fluid-min-ratio),
    calc(55 * var(--fluid)),
    55px
  );
}

.excursion-list .list-items,
.excursion-list .list-items a {
  position: relative;
  display: flex;
  inline-size: 100%;
  background-color: var(--color-primaryWhite);
  overflow: hidden;
}
.excursion-list .list-items::before {
  position: absolute;
  content: "";
  inset-block-start: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  inset-inline-start: 44.5%;
  transform: translateX(-50%);
  inline-size: clamp(
    48px * var(--fluid-min-ratio),
    calc(48 * var(--fluid)),
    48px
  );
  block-size: clamp(
    48px * var(--fluid-min-ratio),
    calc(48 * var(--fluid)),
    48px
  );
  background-image: url("/images/logo-excursion01.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}
.excursion-list .list-items.comingsoon::after {
  position: absolute;
  content: "";
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background-image: url("/images/img-comingsoon.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 999;
}
.excursion-list .list-items:nth-child(2)::before {
  background-image: url("/images/logo-excursion02.svg");
}
.excursion-list .list-items:nth-child(3)::before {
  background-image: url("/images/logo-excursion03.svg");
}

.excursion-list .list-items a .excursion-img img {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.excursion-list .list-items a:hover .excursion-img img {
  transform: scale(1.05);
}

.excursion-list .list-items .excursion-img {
  position: relative;
  max-inline-size: clamp(
    537px * var(--fluid-min-ratio),
    calc(537 * var(--fluid)),
    537px
  );
  inline-size: 100%;
}
.excursion-list .list-items:first-of-type .excursion-img img {
  max-inline-size: clamp(
    393px * var(--fluid-min-ratio),
    calc(393 * var(--fluid)),
    393px
  );
  margin-inline-start: clamp(
    30px * var(--fluid-min-ratio),
    calc(30 * var(--fluid)),
    30px
  );
}

.excursion-list .list-items p {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  inline-size: calc(
    100% -
      clamp(537px * var(--fluid-min-ratio), calc(537 * var(--fluid)), 537px)
  );
  padding-inline-start: clamp(
    144px * var(--fluid-min-ratio),
    calc(144 * var(--fluid)),
    144px
  );
  color: var(--color-primaryGray);
  font-size: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  z-index: 1;
}
.excursion-list .list-items p::before {
  position: absolute;
  content: "";
  inset-block-start: 50%;
  inset-inline-start: clamp(
    75px * var(--fluid-min-ratio),
    calc(75 * var(--fluid)),
    75px
  );
  inline-size: clamp(
    43px * var(--fluid-min-ratio),
    calc(43 * var(--fluid)),
    43px
  );
  block-size: clamp(
    73px * var(--fluid-min-ratio),
    calc(73 * var(--fluid)),
    73px
  );
  background-image: url("/images/img-slash_min.svg");
  background-size: contain;
  background-position: center;
  transform: translateY(-50%) scale(1, -1);
}
.excursion-list .list-items p::after {
  position: absolute;
  content: "";
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: clamp(
    744px * var(--fluid-min-ratio),
    calc(744 * var(--fluid)),
    744px
  );
  block-size: clamp(
    262px * var(--fluid-min-ratio),
    calc(262 * var(--fluid)),
    262px
  );
  background-image: url("/images/bg-excursion.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.excursion-list .list-items p strong {
  display: block;
  margin-block-end: clamp(
    8px * var(--fluid-min-ratio),
    calc(8 * var(--fluid)),
    8px
  );
  color: var(--color-primaryBlue);
  font-size: clamp(
    30px * var(--fluid-min-ratio),
    calc(30 * var(--fluid)),
    30px
  );
}

#excursion .hero-btn {
  position: relative;
  inset: 0;
  margin-block-start: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
  margin-inline: auto;
  inline-size: clamp(
    328px * var(--fluid-min-ratio),
    calc(328 * var(--fluid)),
    328px
  );
}

#excursion .hero-btn .btn-yellow {
  max-inline-size: clamp(
    328px * var(--fluid-min-ratio),
    calc(328 * var(--fluid)),
    328px
  );
  font-size: clamp(
    24px * var(--fluid-min-ratio),
    calc(24 * var(--fluid)),
    24px
  );
}

@media screen and (max-width: 768px) {
  #excursion {
    padding-block: clamp(
        92px,
        calc(92 * var(--fluid-sp)),
        92px * var(--fluid-max-ratio)
      )
      clamp(67px, calc(67 * var(--fluid-sp)), 67px * var(--fluid-max-ratio));
  }
  #excursion .sec-inner h2 {
    aspect-ratio: 318 / 116;
    max-inline-size: clamp(
      318px,
      calc(318 * var(--fluid-sp)),
      318px * var(--fluid-max-ratio)
    );
    margin-inline-start: clamp(
      25px,
      calc(25 * var(--fluid-sp)),
      25px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-excursion_sp.png");
  }
  .excursion-ttl p {
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .excursion-list {
    gap: clamp(10px, calc(10 * var(--fluid-sp)), 10px * var(--fluid-max-ratio));
    margin-block-start: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      40px * var(--fluid-max-ratio)
    );
  }
  .excursion-list .list-items,
  .excursion-list .list-items a {
    flex-direction: column;
  }
  .excursion-list .list-items::before {
    inset-inline-start: auto;
    inset-inline-end: clamp(
      30px,
      calc(30 * var(--fluid-sp)),
      30px * var(--fluid-max-ratio)
    );
    inset-block-start: 54%;
    transform: translateY(-50%);
    inline-size: clamp(
      48px,
      calc(48 * var(--fluid-sp)),
      48px * var(--fluid-max-ratio)
    );
    block-size: clamp(
      48px,
      calc(48 * var(--fluid-sp)),
      48px * var(--fluid-max-ratio)
    );
  }
  .excursion-list .list-items.comingsoon::after {
    background-image: url("/images/img-comingsoon_sp.png");
  }
  .excursion-list .list-items .excursion-img {
    aspect-ratio: 360 / 283;
    max-inline-size: none;
    text-align: center;
  }
  .excursion-list .list-items .excursion-img img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .excursion-list .list-items:first-of-type .excursion-img img {
    max-inline-size: clamp(
      319px,
      calc(319 * var(--fluid-sp)),
      319px * var(--fluid-max-ratio)
    );
    block-size: auto;
    margin-inline: auto;
  }
  .excursion-list .list-items p {
    aspect-ratio: 360 / 194;
    inline-size: 100%;
    padding-inline: clamp(
        83px,
        calc(83 * var(--fluid-sp)),
        83px * var(--fluid-max-ratio)
      )
      clamp(50px, calc(50 * var(--fluid-sp)), 50px * var(--fluid-max-ratio));
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .excursion-list .list-items p::before {
    inline-size: clamp(
      38px,
      calc(38 * var(--fluid-sp)),
      38px * var(--fluid-max-ratio)
    );
    block-size: clamp(
      64px,
      calc(64 * var(--fluid-sp)),
      64px * var(--fluid-max-ratio)
    );
  }
  .excursion-list .list-items p::after {
    inset-block-start: auto;
    inset-block-end: 0;
    inline-size: clamp(
      361px,
      calc(361 * var(--fluid-sp)),
      361px * var(--fluid-max-ratio)
    );
    block-size: clamp(
      325px,
      calc(325 * var(--fluid-sp)),
      325px * var(--fluid-max-ratio)
    );
    background-image: url("/images/bg-excursion_sp.png");
  }
  .excursion-list .list-items p strong {
    margin-block-end: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      8px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
  }
  #excursion .hero-btn {
    position: relative;
    inset: 0;
    transform: none;
    inline-size: clamp(
      328px,
      calc(328 * var(--fluid-sp)),
      328px * var(--fluid-max-ratio)
    );
    margin-block-start: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      40px * var(--fluid-max-ratio)
    );
    margin-inline: auto;
  }
  #excursion .hero-btn .btn-yellow {
    max-inline-size: clamp(
      328px,
      calc(328 * var(--fluid-sp)),
      328px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      24px * var(--fluid-max-ratio)
    );
  }
}

/* ===============================================
footer
===============================================*/
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(140px * var(--fluid-min-ratio), calc(140 * var(--fluid)), 140px);
  padding-block: clamp(
      80px * var(--fluid-min-ratio),
      calc(80 * var(--fluid)),
      80px
    )
    clamp(65px * var(--fluid-min-ratio), calc(65 * var(--fluid)), 65px);
  background-color: var(--bg-primaryFooter);
}

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

.contact-list {
  display: flex;
  flex-direction: column;
  gap: clamp(16px * var(--fluid-min-ratio), calc(16 * var(--fluid)), 16px);
  color: var(--color-primaryWhite);
}
.contact-list .list-items {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px * var(--fluid-min-ratio), calc(12 * var(--fluid)), 12px);
  font-size: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
  line-height: 1.6;
}
.contact-list .list-items img {
  inline-size: clamp(
    20px * var(--fluid-min-ratio),
    calc(20 * var(--fluid)),
    20px
  );
}
.contact-list .list-items .txt-en,
.contact-list .list-items .txt-sub {
  display: block;
  margin-block-start: clamp(
    4px * var(--fluid-min-ratio),
    calc(4 * var(--fluid)),
    4px
  );
  font-size: clamp(
    14px * var(--fluid-min-ratio),
    calc(14 * var(--fluid)),
    14px
  );
  line-height: 1.4;
}
.contact-list .list-items .txt-sub {
  margin-block-start: clamp(
    16px * var(--fluid-min-ratio),
    calc(16 * var(--fluid)),
    16px
  );
}

@media screen and (max-width: 768px) {
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(54px, calc(54 * var(--fluid-sp)), 54px * var(--fluid-max-ratio));
    padding-block: clamp(
        60px,
        calc(60 * var(--fluid-sp)),
        60px * var(--fluid-max-ratio)
      )
      clamp(54px, calc(54 * var(--fluid-sp)), 54px * var(--fluid-max-ratio));
    padding-inline: clamp(
      25px,
      calc(25 * var(--fluid-sp)),
      25px * var(--fluid-max-ratio)
    );
  }
  footer h2 {
    aspect-ratio: 288 / 116;
    max-inline-size: clamp(
      288px,
      calc(288 * var(--fluid-sp)),
      288px * var(--fluid-max-ratio)
    );
    background-image: url("/images/ttl-contact_sp.png");
  }
  .contact-list {
    gap: clamp(16px, calc(16 * var(--fluid-sp)), 16px * var(--fluid-max-ratio));
    padding-inline-start: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
  }
  .contact-list .list-items {
    gap: clamp(12px, calc(12 * var(--fluid-sp)), 12px * var(--fluid-max-ratio));
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
  .contact-list .list-items img {
    inline-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      20px * var(--fluid-max-ratio)
    );
  }
  .contact-list .list-items .txt-en,
  .contact-list .list-items .txt-sub {
    margin-block-start: clamp(
      4px,
      calc(4 * var(--fluid-sp)),
      4px * var(--fluid-max-ratio)
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      14px * var(--fluid-max-ratio)
    );
  }
  .contact-list .list-items .txt-sub {
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      16px * var(--fluid-max-ratio)
    );
  }
}