:root {
  --c-cream: #fdf7ed;
  --c-green-pale: #eefae1;
  --c-green-light: #d6f2b6;
  --c-green: #52763a;
  --c-brown: #503317;
  --c-brown-dark: #45391e;
  --c-white: #fffbfb;
  --c-yellow: #f3d076;
  --c-hover: #e18a3b;
  --c-hover-pale: #fbd2ac;
  --font-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
    "ヒラギノ丸ゴ ProN W4", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic",
    sans-serif;
  --font-round: "M PLUS Rounded 1c", "Zen Maru Gothic",
    "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", sans-serif;
  --fz-130: clamp(52px, 1rem + 6.1vw, 130px);
  --fz-45: clamp(22px, 1rem + 1.4vw, 45px);
  --fz-35: clamp(22px, 1rem + 0.95vw, 35px);
  --fz-30: clamp(20px, 1rem + 0.7vw, 30px);
  --fz-25: clamp(18px, 1rem + 0.5vw, 25px);
  --fz-23: clamp(16px, 1rem + 0.4vw, 23px);
  --fz-22: clamp(16px, 1rem + 0.35vw, 22px);
  --fz-20: clamp(15px, 1rem + 0.25vw, 20px);
  --fz-18: clamp(14px, 0.9rem + 0.15vw, 18px);
  --fz-15: clamp(13px, 0.85rem + 0.05vw, 15px);
  --hdr-h: 64px;
  --radius: 20px;
}

@media (min-width: 992px) {
  :root {
    --hdr-h: min(10.8vw, 163px);
  }
}


.form-box {
  border-radius: 20px;
  border: 2px solid #503317;
  background: #fffbfb;
  box-shadow: 12px 10px 0px var(--c-green);
}
.form-box__wrap {
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}
@media (min-width: 768px) {
  .form-box__wrap {
    gap: 35px 0;
  }
}
.form-box .formTh {
  font-size: clamp(0.938rem, 0.857rem + 0.35vw, 1.188rem);
  font-weight: bold;
  font-family: var(--font-base);
  color: var(--c-brown);
}
.form-box .requiredText {
  color: var(--c-cream);
  font-size: 0.6875rem;
  background-color: #a7a5a5;
  padding: 0 10px;
  border-radius: 100px;
  margin-left: 10px;
}
@media (min-width: 576px) {
  .form-box .requiredText {
    font-size: 0.8125rem;
  }
}
.form-box .requiredText.required {
  background-color: #ec745d;
}
.form-box label {
  margin-bottom: 0px;
}
.form-box input[type=text],
.form-box input[type=email],
.form-box input[type=tel],
.form-box textarea {
  width: 100%;
  border: 1px solid var(--c-green);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1rem;
  background: var(--c-green-pale);
}
.form-box textarea {
  min-height: 200px;
  resize: vertical;
}
.form-box .checkbox {
  width: clamp(18px, 1.5vw, 24px);
  height: clamp(18px, 1.5vw, 24px);
  border: 1px solid var(--c-black);
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
  margin-right: 15px;
}
@media (min-width: 768px) {
  .form-box .checkbox {
    border: 2px solid var(--c-black);
  }
}
.form-box .privacy {
  background: var(--c-green);
  padding: 16px;
  padding-right: 10px;
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 24px;
  color: var(--c-cream);
  border-radius: 20px;
  max-width: 800px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .form-box .privacy {
    font-size: 1rem;
  }
}
.form-box .privacy__inner {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-cream) transparent;
}
.form-box button {
  color: var(--c-cream);
  cursor: pointer;
  background-color: var(--c-green);
  border-radius: 100px;
  font-size: clamp(1rem, 0.879rem + 0.53vw, 1.375rem);
  border: solid 1px var(--c-green);
  min-width: 250px;
  padding-block: 18px;
  transition: all 0.3s ease;
}
@media (min-width: 992px) {
  .form-box button {
    min-width: 350px;
    padding-block: 23px;
    border: solid 2px var(--c-green);
  }
}
.form-box button:hover {
  color: var(--c-green);
  background-color: var(--c-green-light);
}

.p-complete {
  height: 100vh;
  min-height: 650px;
}