.section--info-html {
  container-name: info-section;
  container-type: inline-size;
  line-height: normal;
  color: #2f2a24;
  background:
    linear-gradient(rgba(255, 253, 246, .82), rgba(255, 253, 246, .78)),
    url("../section-03-experience/assets/backgrounds/section-03-experience-background-calm-v2_20260719.webp") center / cover;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.info-html {
  padding: 72px 44px 70px;
}

.info-html__eyebrow {
  margin: 0;
  color: #986919;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.info-html__title {
  margin: 18px 0 0;
  color: #16482f;
  font-size: 39px;
  line-height: 1.2;
  text-align: center;
}

.info-html__lead {
  margin: 18px 0 34px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.info-board {
  position: relative;
  padding: 32px 30px 34px;
  background: linear-gradient(#fbf4df, #efe1c2);
  border: 2px solid #8b692e;
  box-shadow:
    inset 0 0 0 5px #f6e9c8,
    inset 0 0 0 6px rgba(184, 148, 76, .72),
    0 9px 18px rgba(55, 35, 13, .13);
}

.info-board__section {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 22px;
  padding: 0 0 28px;
}

.info-board__section + .info-board__section {
  padding-top: 27px;
  border-top: 1px solid rgba(184, 148, 76, .6);
}

.info-board__label,
.info-notice__title {
  margin: 0;
  color: #6f501b;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
}

.info-board__value {
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
}

.info-season {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 900;
}

.info-season + .info-hours {
  margin-bottom: 12px;
}

.info-hours {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  margin: 0;
}

.info-hours dt,
.info-hours dd {
  margin: 0;
}

.info-hours dd span {
  white-space: nowrap;
}

.info-hours__reception {
  display: block;
  font-size: 16px;
}

.info-maintenance {
  grid-column: 1 / -1;
  margin: 22px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  line-break: strict;
  text-wrap: pretty;
}

.info-price {
  margin: -5px 0 0;
  font-size: 19px;
  line-height: 1.55;
}

.info-price strong {
  color: #16482f;
  font-size: 30px;
  font-weight: 900;
}

.info-notice {
  padding-top: 27px;
  border-top: 1px solid rgba(184, 148, 76, .6);
}

.info-notice__list {
  margin: 18px 0 0;
  padding-left: 1.25em;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.info-notice__list li {
  padding-left: .2em;
}

.info-notice__list li + li {
  margin-top: 10px;
}

.info-html__latest {
  margin: 48px 0 0;
  color: #16482f;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

.info-html__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  margin: 32px 26px 0;
  padding: 16px 56px;
  color: #fff5d6;
  background: linear-gradient(#245c3f, #123d29);
  border: 3px solid #d2ae55;
  box-shadow:
    inset 0 0 0 2px #1d4934,
    inset 0 0 0 3px rgba(243, 212, 125, .55),
    0 8px 12px rgba(28, 47, 36, .22);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.info-html__button:focus-visible {
  outline: 4px solid #f4c84c;
  outline-offset: 4px;
}

.info-html__button-arrow {
  margin-left: 20px;
  font-size: 28px;
}

.info-html__closing {
  margin-top: 64px;
  text-align: center;
}

.info-html__closing p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.info-html__closing strong {
  display: block;
  margin-top: 7px;
  color: #16482f;
  font-size: 27px;
  line-height: 1.35;
}

@container info-section (max-width: 520px) {
  .info-html {
    padding: 44px 18px 52px;
  }

  .info-html__eyebrow {
    font-size: 13px;
  }

  .info-html__title {
    margin-top: 12px;
    font-size: 31px;
  }

  .info-html__lead {
    margin: 14px 0 25px;
    font-size: 15px;
  }

  .info-board {
    padding: 25px 20px 28px;
  }

  .info-board__section {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 12px;
    padding-bottom: 22px;
  }

  .info-board__section + .info-board__section {
    padding-top: 22px;
  }

  .info-board__label,
  .info-notice__title {
    font-size: 16px;
  }

  .info-board__value {
    font-size: 15px;
    line-height: 1.65;
  }

  .info-season {
    font-size: 16px;
  }

  .info-hours {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .info-hours__reception {
    font-size: 14px;
  }

  .info-maintenance {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.7;
  }

  .info-price {
    font-size: 16px;
  }

  .info-price strong {
    font-size: 25px;
  }

  .info-notice {
    padding-top: 22px;
  }

  .info-notice__list {
    margin-top: 14px;
    padding-left: 1.2em;
    font-size: 15px;
    line-height: 1.7;
  }

  .info-notice__list li + li {
    margin-top: 9px;
  }

  .info-html__latest {
    margin-top: 34px;
    font-size: 15px;
  }

  .info-html__button {
    min-height: 64px;
    margin: 24px 6px 0;
    padding: 13px 34px;
    font-size: 20px;
  }

  .info-html__button-arrow {
    margin-left: 14px;
    font-size: 23px;
  }

  .info-html__closing {
    margin-top: 45px;
  }

  .info-html__closing p {
    font-size: 15px;
  }

  .info-html__closing strong {
    font-size: 24px;
  }
}

@container info-section (max-width: 350px) {
  .info-html {
    padding-inline: 12px;
  }

  .info-board {
    padding-inline: 16px;
  }

  .info-board__section {
    grid-template-columns: 78px minmax(0, 1fr);
    column-gap: 9px;
  }

  .info-board__value,
  .info-notice__list {
    font-size: 14px;
  }

  .info-hours {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}