@charset "utf-8";
@import "destyle.min.css";

/* ---------- textile ---------- */

body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: #FFFBED;
  letter-spacing: 0.03rem;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
.footer-logo,
.logo-green-bg {
  font-family: "Aclonica", "RocknRoll One", sans-serif;
}

h1,
.footer-logo {
  font-size: min(7.5vw, 3rem);
  color: #008080;
}

.h1-first-letter {
  font-size: 2.5em;
}

.h1-second-letter {
  font-size: 1.667em;
}

.h1-third-letter {
  font-size: 1.667em;
}

.h1-plus-shape-letter {
  display: inline-block;
  width: min(20.3vw, 133px);
  height: min(20.3vw, 133px);
  margin-bottom: min(1.56vw, 10px);
  padding-top: clamp(23px, 6.85vw, 46px);
  vertical-align: middle;
  text-align: center;
  background: url("images/plus.svg") center/ contain no-repeat;
  font-size: 0.833em;
}

h1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(73.4vw, 477px);
  margin: 0;
  padding-top: min(1vw, 0.5rem);
  padding-left: min(5vw, 2rem);
  padding-bottom: min(2vw, 0.75rem);
  background: url("images/car-shape.svg") center/100% no-repeat;
}

h1 a {
  transition: color 0.1s;
}

@media(any-hover: hover) {
  h1 a:hover {
    color: hsl(180, 100%, 36%)
  }
}

h2,
h3,
h4,
a.button {
  text-align: center;
}

h2 {
  font-size: min(10vw, 5rem);
}

h2::first-letter {
  font-size: 3.2em;
}

.price-header hgroup h2 {
  letter-spacing: 0.15rem;
}

.price-header hgroup h2::first-letter {
  margin-right: max(-14vw, -7rem);
}

.information-header hgroup h2::first-letter {
  margin-right: max(-2.25vw, -1rem);
}

header hgroup p {
  margin-top: max(-5vw, -3rem);
  font-family: "RocknRoll One", sans-serif;
  font-size: min(6vw, 2rem);
  letter-spacing: 0.65rem;
  padding-left: 0.5rem;
}

header hgroup :is(h2, p) {
  color: #fffbed;
  text-shadow: #0008 0 0 10px;
}

h3 {
  font-size: min(7vw, 3.15rem);
  margin-bottom: 2rem;
}

:is(h3, h4)::first-letter,
.large-capital {
  font-size: 2em;
}






.button {
  display: block;
  background-color: #FFBF00;
  box-shadow: #0008 0 0 10px 0;
  color: #000;
}

a.button {
  width: 9.375rem;
  height: 3.125rem;
  padding-block: 1rem;
  padding-left: 0.03rem;
  border-radius: 1.5625rem;
  transition: transform 0.25s;
}

a.button.long-space {
  letter-spacing: 0.55rem;
  padding-left: 0.55rem;
}

a.button.short-space {
  padding-left: 0.25rem;
  letter-spacing: 0.25rem;
}

button.button {
  width: 4rem;
  height: 2rem;
  border-radius: 1rem;
}

.logo-green-bg {
  font-size: 3rem;
  color: #FFFBED
}

footer a.button {
  position: relative;
  width: 11.25rem;
  height: 2rem;
  padding-block: 0.4rem;
  padding-left: 1.5rem;
  border-radius: 1rem;
  text-align: left;
}

footer a.button::after {
  content: "";
  display: block;
  background-image: url();
  position: absolute;
  right: 1rem;
}

@media(any-hover: hover) {
  a.button:hover {
    transform: translateY(-5px);
  }
}

.break-mobile-only br {
  display: none;
}

.break-pc-only {
  display: unset;
}

@media (max-width: 767px) {
  .break-mobile-only br {
    display: unset;
  }

  .break-pc-only br {
    display: none;
  }

  .footer-logo {
    font-size: 6vw;
  }

  .footer-logo .h1-plus-shape-letter {
    padding-top: clamp(23px, 7.5vw, 46px);
    font-size: 0.9em;
  }
}

/* ---------- flex, grid ---------- */

[class*=flex-] {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

[class*=flex-]>* {
  margin: auto;
}

.flex-vertical {
  flex-direction: column;
}

.grid-four-to-two {
  display: grid;
  grid-template-columns: repeat(4, min(calc(25% - (7.5rem / 4)), 200px));
  justify-content: center;
  gap: 2.5rem;
}

@media (max-width: 767px) {
  .flex-mobile-forward {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
  }

  .flex-mobile-reverse {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;

  }

  .grid-four-to-two {
    grid-template-columns: repeat(2, min(45%, 200px));
    gap: 2.5rem clamp(10px, 6vw, 2.5rem);
  }
}

/* ---------- header ---------- */

header {
  position: relative;
  width: 100%;
  height: 100svh;
}

.index-header {
  background: url("images/index-header1.webp") center/cover no-repeat;
}

.price-header {
  background: url("images/price-header.webp") center left 15%/cover no-repeat;
}

.information-header {
  background: url("images/information-header.webp") center left 63%/cover no-repeat;
}

header hgroup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  text-align: center;
}

.header-nav {
  position: absolute;
  top: 2rem;
  right: 2rem;
}

.header-nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.header-nav li:has(a.sns-icon) {
  padding-left: 0.5rem;
}
.header-nav a.sns-icon {
  transition: filter 0.15s;
}
@media(any-hover: hover) {
  :is(.header-nav, #mobile-nav) a.brightness:hover {
    filter: contrast(50%) brightness(1.5);
  }

  :is(.header-nav, #mobile-nav) a.invert:hover {
    filter: invert(80%);
  }
}

/* ---------- mobile-nav ---------- */

header input {
  display: none;
}

/* ----- 閉じているときのボタン ----- */

header label.open {
  display: none;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  background-color: #FFBF00;
  box-shadow: 0 0 10px #0008;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  transform-origin: center;
  transition: transform 0.25s;
}

@media(any-hover: hover) {
  header label.open:hover {
    transform: translateY(-5px);
  }
}

header label.open::before,
header label.open::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 50%;
  height: 2px;
  background-color: #000;
  transform-origin: center;
  transition: box-shadow 0.25s 0.25s, transform 0.25s, width 0.5s;
}

header label.open::before {
  box-shadow: 0 -10px, 0 10px;
}

/* ----- 開いているときのボタン ----- */

header input:checked~label.open::before,
header input:checked~label.open::after {
  width: 75%;
  height: 2px;
  transition: box-shadow 0.25s, transform 0.25s 0.25s, width 0.5s;
}

header input:checked~label.open::before {
  box-shadow: 0 0, 0 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

header input:checked~label.open::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ----- 開いているときの背景 ----- */

header label.close {
  display: none;
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0000;
  z-index: 10;
  pointer-events: none;
  transition: background-color 0.5s;
}

/* ----- モバイル用ナビゲーションメニュー ----- */

#mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: min(-50vw, -184px);
  width: max(50vw, 184px);
  height: 100vh;
  border-left: 4px solid #fffbed;
  background-color: hsl(180, 100%, 25%);
  opacity: 0;
  z-index: 15;
  transition: right 0.5s, opacity 0s 0.5s;
}

#mobile-nav ul {
  position: absolute;
  top: max(5.125rem, 17.5%);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  height: clamp(15.125rem, 48.4vh, 21.125rem);
  flex-direction: column;
  justify-content: space-between;
}

#mobile-nav a.button {
  width: 9.375rem;
  height: 2rem;
  margin-inline: auto;
  padding-top: 0.4rem;
}

#mobile-nav .flex-always a {
  transition: 0.15s;
}

#mobile-nav .logo-green-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  font-size: max(1.2rem, 3.5vw);
  white-space: nowrap;
}

#mobile-nav .logo-green-bg .h1-plus-shape-letter {
  width: max(57.6px, 10.169vw);
  height: max(57.6px, 10.169vw);
  margin-bottom: 8px;
  padding-top: max(21px, calc(10.169vw * 0.365));
  background-image: url("images/plus-ivory.svg");
  font-size: max(0.833em);
}

@media (max-width: 767px) {
  header nav {
    display: none;
  }

  header label.open,
  header label.close,
  header #mobile-nav {
    display: block;
  }

  header input:checked~label.close {
    pointer-events: auto;
    background-color: #0008;
  }

  header input:checked~#mobile-nav {
    opacity: 1;
    right: 0;
    transition: right 0.5s, opacity 0s;
  }
}

/* ---------- main, section ---------- */

section>*,
footer>* {
  width: clamp(300px, 90%, 1200px);
}

section *,
footer * {
  margin-inline: auto;
  text-align: center;
}

.ivory-bg-with-upper,
.ivory-bg-with-lower,
.ivory-bg-with-both {
  position: relative;
}

.ivory-bg-with-both {
  padding-block: 13.5rem 18.5rem;
}

.ivory-bg-with-upper::after,
.ivory-bg-with-both::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 200px;
  background: url("images/green-upper.svg") bottom center/100vw no-repeat;
}

.ivory-bg-with-lower::before,
.ivory-bg-with-both::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 200px;
  background: url("images/green-lower.svg") top center/100vw no-repeat;
}

.green-bg {
  position: relative;
  padding-block: 5rem 10rem;
  background-color: #008080;
  color: #FFFBED;
}

h3.treatment {
  position: relative;
}

[class*=-bg] h3.treatment::before,
[class*=-bg] h3.treatment::after {
  content: "";
  display: block;
  width: clamp(64px, 15vw, 336px);
  height: 70px;
  position: absolute;
  bottom: min(4.25vw, 1.65rem);
}

[class*=green-bg] h3.treatment::before,
[class*=ivory-bg] h3.treatment::before {
  left: 0;
  background: bottom left / contain no-repeat;
}

[class*=green-bg] h3.treatment::after,
[class*=ivory-bg] h3.treatment::after {
  right: 0;
  background: bottom right / contain no-repeat;
}

[class*=green-bg] h3.treatment::before,
[class*=green-bg] h3.treatment::after {
  background-image: url("images/treat-ivory.svg");
}

[class*=ivory-bg] h3.treatment::before,
[class*=ivory-bg] h3.treatment::after {
  background-image: url("images/treat-black.svg");
}

@media (max-width: 767px) {
  .green-bg {
    padding-block: 4rem 5rem;
  }

  .ivory-bg-with-both {
    padding-block: 6rem 8rem;
  }
}

/* ---------- footer ---------- */

footer {
  padding-block: 12.5rem 2.5rem;
}

footer .footer-logo {
  width: fit-content;
  margin: auto;
  margin-bottom: 5rem;
}

footer>.flex-mobile-forward {
  align-items: end;
  gap: 1rem;
}

footer .access .address {
  width: fit-content;
  text-align: left;
  margin-bottom: 5rem;
}

footer .access {
  flex: 1 1 50%;
}

footer .access .maps iframe {
  margin: unset;
  width: min(100%, 400px);
  aspect-ratio: 4/3;
}

footer .footer-info {
  margin-block: unset;
  flex: 1 1 50%;
  min-width: 350px;
}

footer .footer-info .footer-nav {
  width: 11.25rem;
}

footer .footer-info .footer-nav li {
  position: relative;
  margin-bottom: 2.5rem;
}

footer .footer-info .footer-nav li:not(:last-child) a.button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  display: block;
  width: 100%;
  height: 1rem;
  background: url(images/arrow-right.svg) center right / contain no-repeat;
  transform: translateY(-50%);
  transition: 0.25s;
}

footer .footer-info .footer-nav a.sns-icon {
  transition: 0.15s;
}

@media(any-hover: hover) {
  footer .footer-info .footer-nav a.sns-icon:hover {
    opacity: 0.5;
  }
}

footer .footer-info .footer-nav li:last-child {
  margin-block: 4rem 5.5rem;
}

footer p.address {
  line-height: 2rem;
}

footer p.copyright {
  font-size: min(4.1vw, 1rem);
}

@media (max-width: 767px) {
  footer {
    padding-block: 5rem 2.5rem;
  }

  footer>.flex-mobile-forward {
    gap: 5rem;
  }

  footer .footer-info {
    min-width: unset;
  }
}

/* ---------------------------------------------------- */
/* -------------------- index-page -------------------- */
/* ---------------------------------------------------- */


/* ---------- index-introduction ----------- */

#index-introduction {
  padding-block: min(14vw, 16rem) min(30vw, 20rem);
}

#index-introduction .description {
  flex: 0 0 max(50%, 350px);
  margin-block: 0;
}

#index-introduction .description h3 {
  margin-bottom: 3.5rem;
  font-size: min(6.4vw, 2.5rem);
  white-space: nowrap;
}

#index-introduction .description p {
  width: min(100%, 350px);
  text-align: left;
  line-height: 2.95rem;
}

#index-introduction .image {
  position: relative;
  width: max(50%, 280px);
  margin: 0;
  align-self: end;
  text-align: center;
}

#index-introduction .image img {
  width: max(100%, 280px);
  border-radius: 52% 47% 74% 42% / 64% 52% 48% 36%;
}

#index-introduction .image::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 25px;
  left: 25px;
  border-radius: 52% 47% 74% 42% / 64% 52% 48% 36%;
  background-color: #fff0bb;
  z-index: -1;
}

@media(max-width: 767px) {
  #index-introduction .description h3 {
    margin-bottom: 1.5rem;
  }

  #index-introduction .description p {
    text-align: left;
    line-height: 2rem;
  }

  #index-introduction .image {
    align-self: unset;
  }

  #index-introduction .image::after {
    top: 10px;
    left: 10px;
  }
}

/* ---------- #camp-site ---------- */

#camp-site .description {
  line-height: 3.575rem;
  text-align: center;
}

#camp-site #area-guide {
  margin-block: 4.5rem 10rem;
}

#camp-site #area-guide h4 {
  font-size: clamp(11.2px, 3vw, 1.45rem);
  letter-spacing: 0.105rem;
}

#camp-site #area-guide #free-tent-area h4::first-letter,
#camp-site #area-guide h4 .kerning-narrow {
  margin-right: -0.15rem;
}

#camp-site .panel {
  position: relative;
  transition: transform 0.25s;
}

#camp-site .panel::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transition: opacity 0.25s;
}

@media(any-hover: hover) {
  #camp-site .panel:hover {
    transform: translateY(-5px);
  }

  #camp-site .panel:hover::after {
    opacity: 0.25;
  }
}

#camp-site #area-guide .panel {
  position: relative;
  width: clamp(135px, 39vw, 17.25rem);
  height: clamp(180px, 53vw, 23rem);
  background-color: #FFBF00;
  box-shadow: #0008 0 0 10px 0;
  overflow: hidden;
}

#camp-site #area-guide div .panel a {
  display: block;
}

#camp-site #area-guide div .panel img {
  width: 100%;
}

#camp-site #area-guide div .panel .summary {
  position: relative;
  width: 100%;
  height: clamp(72px, 22.5vw, 8.875rem);
}

#camp-site #area-guide div .panel .summary p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: fit-content;
  color: #000;
  font-size: clamp(12px, 4vw, 1rem);
}

#camp-site #area-guide div .panel .summary .dog-ear {
  width: 70px;
  height: 70px;
  position: absolute;
  bottom: -35px;
  right: -35px;
  background-color: hsl(180, 100%, 35%);
  transform: rotate(-45deg);
}

#camp-site #area-guide div .panel .summary .inner-dog-ear {
  position: absolute;
  bottom: 0.5rem;
  right: 0.375rem;
  font-size: 1.125rem;
}

#camp-site #rental h4 {
  font-size: min(7vw, 2.25rem);
  letter-spacing: 0.125rem;
}

#camp-site #rental h4::first-letter {
  margin-right: -0.1rem;
}

#camp-site #rental img {
  margin-block: 1.25rem;
}

@media (max-width: 767px) {
  #camp-site .description {
    line-height: 2rem;
  }

  #camp-site #area-guide {
    margin-bottom: 5rem;
  }
}

/* ---------- information ---------- */

#information .image {
  position: relative;
  width: clamp(280px, 50%, 400px);
}

#information .image::after {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 25px;
  left: 25px;
  border-radius: 52% 47% 74% 42% / 64% 52% 48% 36%;
  background-color: #7edada;
  z-index: -1;
}

#information .image img {
  max-width: 100%;
  border-radius: 36% 50% 56% 34% / 49% 55% 36% 42%;
}

#information .description {
  width: min(100%, 400px);
}

#information .description p {
  margin: auto;
  margin-bottom: 3rem;
  width: fit-content;
  line-height: 2.95rem;
  text-align: left;
}

@media(max-width: 767px) {
  #information .flex-mobile-reverse {
    gap: 6rem;
  }

  #information .image::after {
    top: 10px;
    left: 10px;
  }

  #information .description p {
    line-height: 2rem;
  }
}

/* ---------- contact ---------- */

#contact p {
  margin-bottom: 5rem;
  line-height: 2rem;
}

#contact-form {
  width: clamp(300px, 90%, 1400px);
  padding-block: 3.5rem 1.5rem;
  background-color: #FFFBED;
  box-shadow: #0008 0 0 20px 0;
  color: #000;
}

#contact-form form {
  display: grid;
  grid-template-columns: 11rem calc(100% - 15rem);
  gap: 2rem 1rem;
  justify-content: center;
  align-items: center;
}

#contact-form label {
  display: block;
  width: 100%;
  height: fit-content;
  text-align: right;
}

#contact-form label[for="message"] {
  align-self: start;
  padding-top: 0.2rem;
}

#contact-form input {
  width: 100%;
  height: 1.5rem;
  padding: 0.1rem 0.25rem 0.3rem;
  background-color: #DCDCDC;
  text-align: start;
}

#contact-form textarea {
  width: 100%;
  height: 15.5rem;
  padding: 0.1rem 0.25rem 0.3rem;
  resize: none;
  line-height: 1.5rem;
  background-color: #DCDCDC;
  text-align: start;
}

#contact-form form button {
  margin: unset;
  justify-self: right;
  transition: transform 0.25s;
}

@media(any-hover: hover) {
  #contact-form form button:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 767px) {
  #contact p {
    margin-block: 2.5rem 2rem;
  }

  #contact-form {
    padding-block: 1rem 0.5rem;
  }

  #contact-form form {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #contact-form label {
    padding-left: 0.5rem;
    text-align: left;
  }

  #contact-form input,
  #contact-form textarea {
    width: calc(100% - 1rem);
    margin-block: 0.25rem 0.75rem;
  }

  #contact-form form button {
    margin-bottom: 1.25rem;
  }
}

/* ---------------------------------------------------- */
/* -------------------- price-page -------------------- */
/* ---------------------------------------------------- */

/* ---------- price-introduction ---------- */

#price-introduction {
  display: block;
  padding-block: 6.5rem 15rem;
}

#price-introduction p {
  line-height: 3rem;
}

@media (max-width: 767px) {
  #price-introduction {
    padding-block: 4rem 6rem;
  }

  #price-introduction p {
    line-height: 2rem;
    text-align: left;
  }
}

/* ---------- area-price ---------- */

#area-price hgroup {
  margin-bottom: 5rem;
}

#area-price hgroup h3 {
  font-size: min(5vw, 2.5rem);
  margin-bottom: 0;
}

#area-price hgroup h3.treatment::before,
#area-price hgroup h3.treatment::after {
  width: min(336px, 12.5vw);
  bottom: min(3vw, 1.5rem);
}

#area-price hgroup p {
  font-size: min(5vw, 1.75rem);
  font-family: "RocknRoll One", sans-serif;
}

#area-price #auto-camp-area {
  margin-bottom: 10rem;
}

#area-price #free-tent-area h3::first-letter,
#area-price #free-tent-area h3 .large-capital:first-child {
  margin-right: -0.25rem;
}

#area-price .flex-mobile-forward {
  gap: 1rem;
}

#area-price .flex-mobile-forward img {
  max-width: 100%;
  margin-right: 0;
}

#area-price .flex-mobile-forward p {
  line-height: 2rem;
}

#area-price .flex-mobile-forward p.area-price-list {
  margin-top: 3.5rem;
  line-height: 3.5rem;
}

@media (max-width: 767px) {
  #area-price hgroup {
    margin-bottom: 2rem;
  }

  #area-price .flex-mobile-forward {
    gap: 2rem;
  }

  #area-price .flex-mobile-forward img {
    margin-inline: auto;
  }

  #area-price .flex-mobile-forward p.area-price-list {
    margin-top: 2rem;
    line-height: 2rem;
  }

  #area-price #auto-camp-area {
    margin-bottom: 5rem;
  }
}

/* ---------- rental-price ---------- */

#rental-price h3::first-letter {
  margin-right: max(-0.5vw, -0.25rem);
}

#rental-price p {
  line-height: 3rem;
}

#rental-price .flex-mobile-forward {
  margin-block: 4.5rem;
  gap: 5rem;
}

#rental-price #camp-goods {
  margin-top: 0;
  align-self: start;
}

#rental-price h4 {
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-family: "RocknRoll One", sans-serif;
}

#rental-price h4::first-letter {
  font-size: 1em;
}

#rental-price table {
  width: clamp(300px, 40vw, 22rem);
}

#rental-price table tr {
  height: 1.75rem;
}

#rental-price table tr:nth-child(2n+1) {
  background-color: #c8c8c8;
}

#rental-price table td {
  padding-inline: 1rem;
  vertical-align: middle;
}

#rental-price table td:first-child {
  text-align: left;
}

#rental-price table td:last-child {
  text-align: right;
}

@media (max-width: 767px) {
  #rental-price p {
    line-height: 2rem;
  }

  #rental-price .flex-mobile-forward {
    margin-block: 2rem;
  }
}

/* ---------- cancel-policy ----------- */

#cancel-policy h3 .large-capital {
  margin-right: max(-2.5vw, -1.25rem);
}

#cancel-policy p {
  line-height: 3rem;
}

#cancel-policy table {
  width: clamp(300px, 40vw, 25rem);
  margin-block: 4rem 3rem;
}

#cancel-policy table tr {
  height: 3rem;
}

#cancel-policy table td {
  vertical-align: middle;
}

#cancel-policy table td:first-child {
  text-align: left;
}

#cancel-policy table td:last-child {
  text-align: right;
}

@media (max-width: 767px) {
  #cancel-policy p {
    line-height: 2rem;
  }

  #cancel-policy table {
    margin-block: 2rem;
  }

  #cancel-policy table tr {
    height: 2rem;
  }
}

/* ---------------------------------------------------------- */
/* -------------------- information-page -------------------- */
/* ---------------------------------------------------------- */

/* ---------- time-payment ---------- */

#time-payment {
  padding-block: 6.5rem 17.5rem;
}

@media (max-width: 767px) {
  #time-payment {
    padding-block: 4rem 6rem;
  }
}

/* ----- business-time ------ */

#business-time {
  margin-bottom: 10rem;
}

#business-time table {
  width: clamp(300px, 40vw, 25rem);
  margin-block: 4rem 3rem;
}

#business-time table tr {
  height: 3rem;
}

#business-time table td {
  vertical-align: middle;
}

#business-time table td:first-child {
  text-align: left;
}

#business-time table td:last-child {
  text-align: right;
}

#business-time p.break-mobile-only {
  margin-bottom: 4rem;
  line-height: 2rem;
}

#time-payment .blue-radius-border {
  width: clamp(300px, 100%, 47.5rem);
  height: min(41.25vw, 15rem);
  border: 8px solid #00b3b3;
  border-radius: min(7vw, 50px);
  font-family: "RocknRoll One", sans-serif;
  align-items: center;
}

#time-payment .blue-radius-border p {
  margin: 0;
}

#business-time .business-time-icon [class*=check] img {
  width: min(13vw, 91px);
}

#business-time .business-time-icon .larger-text {
  font-size: min(8vw, 3rem);
}

#business-time .business-time-icon .smaller-text {
  font-size: min(5vw, 1.25rem);
}

#business-time .business-time-icon .arrow-right {
  flex: 0 0 min(11vw, 48px);
  margin: 0;
}

@media (max-width: 767px) {
  #business-time {
    margin-bottom: 4rem;
  }

  #business-time table {
    margin-block: 0 1rem;
  }

  #business-time p.break-mobile-only {
    margin-bottom: 2rem;
  }
}

/* ----- payment ----- */

#payment .fade>p {
  line-height: 2rem;
}

#payment p.break-mobile-only:first-of-type {
  margin-block: 5rem 2rem;
}

#payment p.break-mobile-only:last-of-type {
  margin-bottom: 4.5rem;
}

#payment .payment-icon img {
  height: min(15vw, 100px);
}

#payment .payment-icon p {
  margin-top: min(5vw, 1.75rem);
  font-size: min(5vw, 1.75rem);
}

@media (max-width: 767px) {
  #payment p.break-mobile-only:first-of-type {
    margin-block: 2rem 0;
  }

  #payment p.break-mobile-only:last-of-type {
    margin-bottom: 2rem;
  }
}

/* ---------- facility ---------- */

#facility p.break-mobile-only {
  margin-block: 5rem;
  line-height: 2rem;
}

#facility #facilities-guide p {
  margin-top: 1.5rem;
}

@media (max-width: 767px) {
  #facility p.break-mobile-only {
    margin-block: 2rem;
  }
}