@charset "UTF-8";
.page-body .page-inner .page-inner-wrap {
  max-width: 855px;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  .page-body .page-inner .page-inner-wrap {
    padding: 0;
  }
}

.form .form-desc {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.form .form-desc p {
  margin: 0;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.75;
}

.form .form-desc p a {
  color: #222;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form .form-desc p a:hover {
  text-decoration: none;
}

.form .form-desc + .page-inner {
  margin: 48px auto 0;
}

@media screen and (max-width: 768px) {
  .form .form-desc {
    padding: 0;
  }

  .form .form-desc p {
    font-size: 0.9375em;
  }

  .form .form-desc + .page-inner {
    margin: 32px auto 0;
  }
}

.form form {
  padding: 32px 0 128px;
}

.form form dl > div {
  display: flex;
  align-items: center;
  column-gap: 90px;
  padding: 36px 0;
  border-bottom: 1px solid #dfdfdf;
}

.form form dl > div:has(.form-checkbox) {
  padding: 48px 0;
}

.form form dl dt {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.form form dl dt .form-heading {
  display: flex;
  align-items: center;
  column-gap: 12px;
  min-width: 192px;
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.5;
}

.form form dl dt .form-heading span {
  position: relative;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.66667em;
  font-weight: 500;
  line-height: 1.75;
}

.form form dl dt .form-heading .required {
  background: var(--gradient-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.form form dl dt .form-heading .no-required {
  background: linear-gradient(to bottom right, #2e3747 0%, #0b0e14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.form form dl dt .form-heading span::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  content: "";
}

.form form dl dt .form-heading .required::before {
  background: linear-gradient(to bottom right, rgb(34, 136, 214, 0.08) 0%, rgb(38, 75, 128, 0.08) 100%);
}

.form form dl dt .form-heading .no-required::before {
  background: linear-gradient(to bottom right, rgb(46, 55, 71, 0.08) 0%, rgb(11, 14, 20, 0.08) 100%);
}

.form form dl dt .form-heading + span {
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.75;
}

.form form dl dd {
  flex: 1;
  margin: 0;
  font-weight: 500;
}

.form form dl dd ul {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .form form {
    padding: 16px 24px 64px;
  }

  .form form dl > div ,
  .form form dl > div:has(.form-checkbox) {
    flex-direction: column;
    align-items: unset;
    row-gap: 14px;
    padding: 24px 0;
  }

  .form form dl dt {
    flex-direction: row;
    column-gap: 20px;
  }

  .form form dl dt .form-heading {
    width: fit-content;
    min-width: auto;
    column-gap: 10px;
    min-width: auto;
    font-size: 0.875em;
  }

  .form form dl dt .form-heading span {
    font-size: 0.85714em;
  }

  .form form dl dd {
    width: 100%;
  }
}

/* テキストボックス */
.form form dl .form-input input {
  position: relative;
  width: 100%;
  height: 48px;
  padding: 5px 23px;
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  background-color: rgb(217, 217, 217, 0.32);
}

.form form dl .form-input input.alert {
  margin: 8px 0 0;
  border: 1px solid #ff3030;
  background-color: rgb(255, 48, 48, 0.12);
}

.form form dl .form-input input:focus {
  border: 1px solid #222 !important;
}

.form form dl dd .form-example {
  margin: 10px auto 0;
  color: rgb(34, 34, 34, 0.6);
  font-size: 0.8125em;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .form form dl .form-input input {
    height: 50px;
    padding: 5px 17px;
  }

  .form form dl .form-input input.alert {
    margin: 6px 0 0;
  }

  .form form dl dd .form-example {
    margin: 8px auto 0;
    font-size: 0.75em;
  }
}

/* テキストエリア */
.form form dl .form-textarea textarea {
  position: relative;
  width: 100%;
  height: 200px;
  padding: 13px 23px;
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  background-color: rgb(217, 217, 217, 0.32);
}

.form form dl .form-textarea textarea:focus {
  border: 1px solid #222 !important;
}

.form form dl .form-textarea textarea.alert {
  margin: 8px 0 0;
  border: 1px solid #ff3030;
  background-color: rgb(255, 48, 48, 0.12);
}

@media screen and (max-width: 768px) {
  .form form dl .form-textarea textarea {
    height: 178px;
    padding: 14px 17px;
  }

  .form form dl .form-textarea textarea.alert {
    margin: 6px 0 0;
  }
}

/* セレクトボックス */
.form-select {
  position: relative;
  width: 100%;
  margin-top: 11px;
}

.form-select::before {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  right: 23px;
  top: 14px;
  z-index: 1;
  background: url(/assets/images/select-arrow.svg) center center no-repeat;
  content: "";
}

.form-select:has(.alert)::before {
  top: 41px;
}

.form-select select {
  width: 100%;
  padding: 15px 23px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--main-color-black);
  background-color: rgb(217, 217, 217, 0.32);
  outline: none;
  font-size: 0.875em;
  font-weight: 500;
  appearance: none;
}

.form-select select:focus {
  border: 1px solid #222 !important;
}

.form-select select.alert {
  margin: 8px 0 0;
  border: 1px solid #ff3030;
  background-color: rgb(255, 48, 48, 0.12);
}

@media screen and (max-width: 768px) {
  .form-select {
    margin-top: 14px;
  }

  .form-select::before {
    right: 15px;
  }

  .form-select select {
    font-size: 0.8125em;
    padding: 16px 17px;
  }

  .form-select:has(.alert)::before {
    top: 39px;
  }

  .form-select select.alert {
    margin: 6px 0 0;
  }

  .form-select select.alert::before {
    top: 41px;
  }
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background-color: rgb(217, 217, 217, 0.32);
  appearance: none;
}

input[type="checkbox"] + label {
  font-size: 0.875em;
}

input[type="checkbox"]:checked {
  background: linear-gradient(to bottom right, #2e3747 0%, #0b0e14 100%);
}

input[type="checkbox"]:checked::before {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: url(/assets/images/icon_check.svg) center center / cover no-repeat;
  transform: translate(-50%, -50%);
  content: "";
}

input[type="checkbox"]:focus-visible {
  outline-offset: none;
}

@media screen and (max-width: 768px) {
  input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
}

/* プライバシーポリシー同意 */
.agree-button-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 52px auto 0;
}

.agree-button-box p {
  margin: 0;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
}

.agree-button-box input[type="checkbox"] {
  height: 22px;
  width: 22px;
}

.agree-button-box input[type="checkbox"] + label {
  flex: 1;
  font-size: 1em;
  font-weight: 500;
}

.agree-button-box input[type="checkbox"] + label a {
  color: #222;
  text-underline-offset: 2px;
}

.agree-button-box > div {
  display: flex;
  align-items: center;
  column-gap: 12px;
}

@media screen and (max-width: 768px) {
  .agree-button-box {
    width: 100%;
    max-width: 246px;
    gap: 6px;
    margin: 32px auto 0;
  }

  .agree-button-box p {
    font-size: 0.9375em;
    text-align: center;
  }

  .agree-button-box > div {
    column-gap: 14px;
  }

  .agree-button-box input[type="checkbox"] {
    height: 22px;
    width: 22px;
  }

  .agree-button-box input[type="checkbox"] + label {
    font-size: 0.9375em;
  }
}

/* 入力エラー時 */
.form form .error {
  position: relative;
  margin: 0 auto;
  font-size: 0.8125em;
  font-weight: 500;
  color: #ff3030;
}

@media screen and (max-width: 768px) {
  .form form .error {
    font-size: 0.75em;
  }
}

/* ボタン */
.submit-btn {
  width: 100%;
  max-width: 360px;
  margin: 80px auto 0;
}

.submit-btn button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 74px;
  padding-left: 47px;
  padding-right: 50px;
  border-radius: 40px;
  border: 3px solid #dfdfdf;
  color: var(--main-color-black);
  font-size: 1em;
  font-weight: 500;
  font-family: "Noto Sans JP", "Lato", sans-serif;

  background-color: transparent;
  cursor: pointer;
  outline: none;
  appearance: none;
}

.submit-btn button::before {
  position: absolute;
  top: 50%;
  right: 31px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--main-color-orange);
  transform: translateY(-50%);
  content: "";
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.submit-btn button::after {
  position: absolute;
  top: 50%;
  right: 37px;
  width: 16px;
  height: 16px;
  background: url(/assets/images/icon_arrow.svg) center center / cover no-repeat;
  transform: translateY(-50%);
  content: "";
}

.submit-btn button:hover::before {
  transform: translateY(-50%) scale(1.3);
}

.submit-btn button:hover::after {
  animation: slide-arrow-right 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
  .submit-btn {
    max-width: 270px;
    margin: 52px auto 0;
  }

  .submit-btn button {
    height: 64px;
    padding-left: 47px;
    padding-right: 50px;
    border-radius: 40px;
    border: 3px solid #dfdfdf;
    font-size: 0.9375em;
  }

  .submit-btn button::before {
    right: 21px;
    width: 24px;
    height: 24px;
  }

  .submit-btn button::after {
    right: 26px;
    width: 14px;
    height: 14px;
  }
}

.form form .common-back-btn {
  margin: 36px auto 0;
}

/* サンクスメッセージ */
.form .thanks-message {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 20px;
}

.form .thanks-message h2 {
  position: relative;
  font-size: 1.75em;
  line-height: 1.5;
  padding-bottom: 27px;
}

.form .thanks-message h2::before,
.form .thanks-message h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
}

.form .thanks-message h2::before {
  width: 100%;
  background-color: #dfdfdf;
}

.form .thanks-message h2::after {
  width: calc(100% * (1 / 21));
  background: var(--gradient-blue);
}

.form .thanks-message p {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.75;
}

.form .thanks-message p + p {
  margin: 16px 0 0;
}

.form .thanks-message h2 + p {
  margin: 36px 0 0;
}

.form .thanks-message .common-btn {
  margin: 80px auto 0;
}

.form .thanks-message .common-btn a {
  height: 66px;
  border: 3px solid #dfdfdf;
}

@media screen and (max-width: 768px) {
  .form .thanks-message {
    padding: 0;
  }

  .form .thanks-message h2 {
    font-size: 1.25em;
    padding-bottom: 15px;
  }

  .form .thanks-message p {
    font-size: 0.9375em;
  }

  .form .thanks-message p + p {
    margin: 12px 0 0;
  }

  .form .thanks-message h2 + p {
    margin: 24px 0 0;
  }

  .form .thanks-message .common-btn {
    margin: 52px auto 0;
  }
}