/* Common
---------------------------------------------*/
button:hover:not(:disabled) {
  opacity: 0.7;
}

/* Contact Form - Step
---------------------------------------------*/
#contact.step-form {
  background-color: #fff;
}
.contact.section {
  padding-top: 0;
  padding-bottom: 0;
  @media (max-width: 768px) {
    margin-top: 0;
  }
}
.contact-title-mv {
  background-color: #F9EFDC;
  margin-inline: auto;
  img {
    width: calc(100vw * 550 / var(--lpw));
    height: calc(100vw * 120 / var(--lpw));
    margin-inline: auto;
  }
  @media (min-width: 1281px) {
    img {
      width: 550px;
      height: 120px;
    }
  }
  @media (max-width: 768px) {
    img {
      width: 100%;
      height: 85px;
    }
  }
}
#form-short-step {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-top: 0;
  margin-inline: auto;
}
.contact_form.step_form {
  margin-top: 0;
  @media (max-width: 768px) {
    max-width: 335px;
  }
}
.form-slider-inner {
  display: flex;
  width: 200%; /* 常に2ステップ分 */
  transition: transform 0.5s ease;
  align-items: flex-start;
}

#step-1, #step-2 {
  width: 50%; /* 親(200%)の半分 = 全体の100% */
  flex-shrink: 0;
}
#step-1 {
  padding-bottom: calc(100vw * 20 / var(--lpw));
  @media (min-width: 1281px) {
    padding-bottom: 20px;
  }
  @media (max-width: 768px) {
    padding-bottom: 20px;
  }
}
/* Step 2 の初期状態：スライド用には存在するが、高さは0にする */
#step-2 {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Step 2 表示時 */
#form-short-step.is-step2 .form-slider-inner {
  transform: translateX(-50%);
}

#form-short-step.is-step2 #step-2 {
  padding-bottom: calc(100vw * 30 / var(--lpw));
  height: auto;
  overflow: visible;
  opacity: 1;
  @media (min-width: 1281px) {
    padding-bottom: 30px;
  }
  @media (max-width: 768px) {
    padding-bottom: 30px;
  }
}

/* Step 1 非表示時（Step 2にいるとき） */
#form-short-step.is-step2 #step-1 {
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.contact_form.step_form .contact_form-step-text {
  margin-top: 20px;
  color: #43392F;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-size: clamp( 1px, calc(100vw * 16 / var(--lpw)), 16px );
  font-style: normal;
  font-weight: 400;
  line-height: calc(100vw * 28 / var(--lpw)); /* 175% */
  letter-spacing: calc(100vw * 1.28 / var(--lpw));
  @media (min-width: 1281px) {
    line-height: 28px; /* 175% */
    letter-spacing: 1.28px;
  }
  @media (max-width: 768px) {
    margin-top: 15px;
    text-align: left;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px; /* 153.846% */
    letter-spacing: 0.156px;
  }
}
.contact_form.step_form .contactform-item {
  margin-top: 20px;
}
.contact_form.step_form .contactform-item-title {
  width: 100%;
  color: #43392F;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px; /* 160% */
  letter-spacing: 1.4px;
  @media (max-width: 768px) {
    font-size: 16px;
    line-height: 24px; /* 150% */
    letter-spacing: 1.2px;
  }
}
.contact_form.step_form .contactform-item-title span {
  padding-left: 10px;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 169.231% */
  letter-spacing: 0.65px;
  @media (max-width: 768px) {
    padding-left: 9px;
    font-weight: normal;
    line-height: 20px; /* 153.846% */
    letter-spacing: 0.156px;
  }
}
.contact_form.step_form .contactform-item-title:before {
  content: "任意";
  background: #757575;
  margin-right: 10px;
  padding: 0 12px 1px;
  border-radius: 5px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px; /* 156.25% */
  letter-spacing: 1.28px;
}
.contact_form.step_form .contactform-item-title--require:before {
  content: "必須";
  background: #F83535;
}
.contact_form.step_form .contactform-item-data {
  width: 100%;
  margin-top: 10px;
  flex-wrap: wrap; /* 子要素が溢れたら改行させる */
  align-items: flex-start;
}
.contact_form.step_form .contactform-item-data--name {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 10px;
}
.contact_form.step_form .contactform-input-text {
  width: 100%;
  height: 60px;
  border: 2px solid #B7B7B7;
  border-radius: 5px;
  padding: 0 10px;
  resize: vertical;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px; /* 160% */
  letter-spacing: 1.4px;
  @media (max-width: 768px) {
    font-size: 16px;
    font-weight: 300;
    line-height: 31.2px; /* 156% */
    letter-spacing: 0.04px;
  }
}
.contact_form.step_form .contactform-input-text--name {
  width: 100%;
  align-items: flex-start;
}
.contact_form.step_form .contactform-input-text--remarks {
  padding: 10px;
  height: 100px;
}
/* button
---------------------------------------------*/
.contact_form.step_form .contact_form-button-box {
  margin-top: 30px;
}
.contact_form.step_form .contact_form__button {
  background: none;
  background-color: #1858B7;
  padding: 20px 0;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50px;
  box-shadow: 0 4px 4px 0 rgba(153, 153, 153, 0.25);
  width: 100%;
  max-width: 320px;
  height: auto;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px; /* 160% */
  letter-spacing: 1.4px;
  @media (max-width: 768px) {
    padding: 20px 0;
    width: 335px;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 31.2px; /* 156% */
    letter-spacing: 0.04px;
  }
}
.contact_form.step_form .contact_form__button.web_application_send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-inline: auto;
}
.contact_form.step_form .contact_form__button.web_application_send::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url('../img/icon_mail.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.contact_form.step_form .contact_form__button.web_application_send:disabled {
  background-color: #CCCCCC;
  cursor: not-allowed;
}
.contact_form.step_form .contact_form__button.web_application_send.success {
  background-color: #1858B7;
  cursor: pointer;
}
.contact_form.step_form .contact_form__button.web_application_send:after {
  content: none;
}

/* next
---------------------------------------------*/
.contact_form.step_form .contact_form__button.btn-next:disabled {
  background-color: #999;
  cursor: not-allowed;
}
.contact_form.step_form .contact_form__button.btn-next.success {
  background-color: #1858B7;
  cursor: pointer;
}
.contact_form.step_form .contact_form__button.btn-next:after {
  content: none;
}


/* prev
---------------------------------------------*/
.contact_form.step_form .btn-prev {
  background-color: #E8E8E8;
  border-radius: 6px;
  margin-top: 30px;
  padding: 6px 13px;
  border: none;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  color: #004FA2;
  font-size: 11px;
  font-style: normal;
  font-weight: 300;
  line-height: 22px; /* 200% */
  letter-spacing: 0.55px;
  cursor: pointer;
  position: relative;
  padding-left: 24px;
}
.contact_form.step_form .btn-prev::before,
#form-short-step .btn-prev::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='10' viewBox='0 0 9 10' fill='none'%3E%3Cpath d='M-2.18557e-07 5L9 -3.93402e-07L9 10L-2.18557e-07 5Z' fill='%23004FA2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#form-short-step .btn-prev {
  position: relative;
  padding-left: 24px;
}

/* Validations
---------------------------------------------*/
/* JSで生成した個別の容器 */
.input-container {
  display: flex;
  flex-direction: column; /* 中身（inputとエラー）を縦に並べる */
  flex: 1; /* 姓と名で幅を均等に分ける */
}

.error-message {
  width: 100%; /* メッセージを改行させて表示 */
  margin-top: 4px;
  display: block;
  width: 100%; /* 横幅いっぱいにすることで、次の要素を強制改行させる */
  color: #E61919;
  font-size: 11px;
  font-style: normal;
  font-weight: 300;
  line-height: 22px; /* 200% */
  letter-spacing: 0.55px;
  @media (max-width: 768px) {
    letter-spacing: 0.156px;
  }
}
.contactform.short .is-error {
  border: 2px solid #E61919 !important;
  background-color: #FFF1F1 !important;
  @media (max-width: 768px) {
    border: 1px solid #E61919 !important;
  }
}

/* agree
---------------------------------------------*/
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check {
  appearance: none;
  -webkit-appearance: none;
  top: 4px;
  width: 18px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
  transition: all .2s ease;
  border-radius: 2px;
  border: 1px solid #999;
  background: #fff;
  cursor: pointer;
  @media (max-width: 768px) {
    top: -2px;
  }
}
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check:hover {
  border-color: rgba(153, 153, 153, 0.7);
  background-color: rgba(255, 255, 255, 0.7);
  transition: all .2s ease;
}
.contact_form.step_form .contact_form-agree__label {
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px; /* 153.846% */
  letter-spacing: 0.156px;
  font-feature-settings: "palt";
}
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check:hover + .contact_form-agree__label {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check:not(:checked)::before {
  background-image: url(../img/check-required_bubble.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  width: 88px;
  height: 36px;
  position: absolute;
  translate: -50% -50%;
  top: -20px;
  left: 50%;
}
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check:not(:checked):hover::before {
  opacity: 1;
}
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check:not(:checked)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #b5b5b5;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: .4;
}
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check:not(:checked):hover::after {
  border-color: rgba(181, 181, 181, 0.7); 
  transition: border-color 0.3s ease;
}
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check:checked {
  border-color: #0275ff;
  background-color: #0275ff;
}
.contact_form.step_form .contact_form-agree .contact_form-agree__input--check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 1;
}

/* notice-important
---------------------------------------------*/
.contact_form.step_form .important {
  padding: 0;
  margin-top: calc(100vw * 30 / var(--lpw));
  @media (min-width: 1281px) {
    margin-top: 30px;
  }
  @media (max-width: 768px) {
    margin-top: 30px;
  }
}

/* form-short-step__copyright
---------------------------------------------*/
.copyright.form-short-step__copyright {
  margin-top: calc(100vw * 20 / var(--lpw));
  @media (min-width: 1281px) {
    margin-top: 20px;
  }
  @media (max-width: 768px) {
    margin-top: 20px;
  }
}
.copyright.form-short-step__copyright .copyright_sdl_text {
  margin-top: 0;
  color: #000;
  text-align: center;
  font-size: 9px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 13.5px */
}