@charset "utf-8";
:root{
  --form-inner-width: min(83rem, var(--page-main-inner) - var(--page-side-padding));
}
@media screen and (max-width: 768px){
  :root{
    --form-inner-width: var(--page-main-inner)
  }
}

/* 他フォームへのリンク */
.p-contact-form__overview{
  margin: 0;
}
.p-contact-form__link-introduction{
  width: var(--page-main-inner);
  margin: 0 auto 8rem;
  text-align: center;
  line-height: 2;
}
.p-contact-form__link-container .p-contact-info__form-list{
  width: var(--page-main-inner);
  margin: 0 auto;
}
@media screen and (max-width: 1080px) {
  .p-contact-form__link-container .p-contact-info__form-list{
    width: 100%;
  }
}

@media screen and (max-width: 768px){

}

/* 入力・確認画面 共通 */
.p-contact-form__area{
  margin: 0;
}
.p-contact-form__step{
  width: var(--form-inner-width);
  margin: 0 auto;
}
.p-contact-form__introduction{
  margin: 0 0 6.5rem;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 2;
}
.p-contact-form__table{
  width: 100%;
}

/* 入力画面 */
.p-contact-form__introduction--input{
  margin-top: 14rem;
}
input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea{
  display: inline-block;
  width: 100%;
  padding: 1rem 2rem;
  font-size: inherit;
  font-family: inherit;
  letter-spacing: 0.05em;
  line-height: 1.5;
  background-color: var(--color-white);
  border-radius: 0.2rem;
  border: 1px solid #AEB7C4;
}
select{
  padding-right: 3.9rem;
  padding-left: 1.4rem;
}
span:has(select)::after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 0.4rem);
  right: 1.5rem;
  border-top: 0.9rem solid #AEB7C4;
  border-bottom: 0 solid transparent;
  border-right: 0.5rem solid transparent;
  border-left: 0.5rem solid transparent;
  pointer-events: none;
}
textarea{
  height: 24rem;
}
.wpcf7-list-item{
  margin-left: 0;
}
.wpcf7-list-item + .wpcf7-list-item{
  margin-left: 5rem;
}
input[type="radio"]{
  appearance: none;
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}
label:has(input[type="radio"]){
  display: inline-flex;
  column-gap: 0.5rem;
  margin-top: 1rem;
  position: relative;
}
label:has(input[type="radio"])::before,
label:has(input[type="radio"])::after{
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  top: calc(50% - 0.8rem);
  left: 0;
  z-index: 0;
  border-radius: 50%;
}
label:has(input[type="radio"])::before{
  background-color: var(--color-white);
  border: 1px solid #AEB7C4;
}
label:has(input[type="radio"])::after{
  scale: 0;
  background-color: var(--color-gradient-deepblue);
}
label:has(input[type="radio"]:checked)::before{
  border-color: var(--color-gradient-deepblue);
}
label:has(input[type="radio"]:checked)::after{
  scale: 0.625;
}
.p-contact-input__file-label{
  display: block;
  background-color: var(--color-white);
  border: 1px solid #AEB7C4;
  border-radius: 0.2rem;
}
.wpcf7-form-control-wrap:has(input[type="file"]),
input[type="file"]{
  display: block;
  width: 100%;
}
::file-selector-button,
::-webkit-file-upload-button{
  appearance: none;
  margin-right: 2rem;
  padding: 1.1rem 1.9rem 1.2rem;
  color: inherit;
  font-family: inherit;
  background-color: #E8ECF2;
  border: none;
  border-right: 1px solid #AEB7C4;
  border-radius: 0.2rem 0 0 0.2rem;
}
::placeholder{
  color: #AEB7C4;
  opacity: 1;
}
fieldset, output{
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  word-break: break-all;
}
.wpcf7-form-control-wrap:has(.wpcf7-not-valid){
  display: block;
}
.p-contact-form .wpcf7-not-valid{
  border: 1px solid #FF251F;
}
.wpcf7-not-valid-tip{
  width: max-content;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 0;
  color: #FF251F;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}
.p-contact-form .p-contact-form__heading{
  margin-top: 0;
  padding: 0 1.8rem 0.9rem;
  font-size: 1.8rem;
  border-bottom: 1px solid #AEB7C4;
}
.p-contact-form .p-contact-form__heading::before,
.p-contact-form .p-contact-form__heading::after{
  display: none;
}
.p-contact-form__table + .p-contact-form__heading{
  margin-top: 3.5rem;
}


.p-contact-form__table--input .p-contact-form__head,
.p-contact-form__table--input .p-contact-form__cell{
  display: block;
}
.p-contact-form__head{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.p-contact-form__head-inner{
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;
  column-gap: 2rem;
}
.p-contact-form__tag{
  padding: 0.8rem 1rem 0.8rem;
  font-size: 1.4rem;
  color: var(--color-white);
  text-align: center;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  background-color: #AEB7C4;
  border-radius: 0.2rem;
}
.p-contact-form__tag--require{
  background-color: var(--color-gradient-deepblue);
}
.p-contact-form__term{
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
}

.p-contact-form__cell{
  padding-bottom: 3.5rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
}

.p-contact-form__description{
  padding-bottom: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.p-contact-form__input-container + .p-contact-form__input-container{
  margin-top: 2rem;
}
.wpcf7 form .wpcf7-response-output{
  width: var(--page-main-inner);
  margin: 3rem auto 0;
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: var(--page-text-size);
  line-height: 1.777;
  border-radius: 0.2rem;
}

@media screen and (max-width: 768px){
  .p-contact-form__link-introduction,
  .p-contact-form__introduction{
    margin-bottom: 5.6rem;
    text-align: left;
  }
  .p-contact-form__introduction--input{
    margin-top: 10rem;
    margin-bottom: 4.6rem;
  }
  .wpcf7-not-valid-tip{
    width: 100%;
  }


}

/* ページ個別 */
.p-contact-form__rental-date{
  display: grid;
  grid-template-columns: [term] 10.1rem max-content min-content auto;
  column-gap: 2rem;
}
.p-contact-form__rental-cell{
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;
  column-gap: 1rem;
}
.p-contact-form__rental-cell--head{
  grid-column: term;
  display: inline-flex;
}
.p-contact-form__rental-cell--year [data-name="your-reserve-year"]{
  width: 10.1rem;
}
.p-contact-form__rental-cell input[type="text"]{
  width: 9rem;
}

.p-contact-form__inquiry-row{
  display: grid;
  grid-template-columns: [term] 4.5rem max-content min-content;
  column-gap: 1rem;
  align-items: center;
}
.p-contact-form__inquiry-row + .p-contact-form__inquiry-row{
  margin-top: 2rem;
}
.p-contact-form__inquiry-row:not(:has(.p-contact-form__inquiry-cell--head)){
  grid-template-columns: max-content min-content;
}
.p-contact-form__inquiry-cell input[type="text"]{
  width: 14rem;
}
.p-contact-form__inquiry-cell--short input[type="text"]{
  width: 9rem;
}

@media screen and (max-width: 768px){
  .p-contact-form__rental-date{
    grid-template-columns: [term] 10.1rem [input] 1fr;
    row-gap: 1rem;
  }
  .p-contact-form__rental-cell{
    grid-column: input;
  }
  .p-contact-form__rental-cell--head{
    grid-column: term;
  }
}

/* reCAPTCHA表記 */
.recaptcha-policy-area{
  width: var(--form-inner-width);
  margin: 4.5rem auto 0;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.75;
}
.recaptcha-policy-area a{
  color: var(--color-gradient-deepblue);
  text-decoration: underline;
}

/* 確認画面 */
.p-contact-form__step--confirm .p-contact-form__head,
.p-contact-form__step--confirm .p-contact-form__cell{
  padding: 1rem 0;
}
.p-contact-form__step--confirm .p-contact-form__cell{
  vertical-align: middle;
  line-height: 1.75;
}
:where(.p-contact-form--inquiry) .p-contact-form__step--confirm .p-contact-form__head{
  width: 22.6rem;
}
:where(.p-contact-form--quote) .p-contact-form__step--confirm .p-contact-form__head{
  width: 22.6rem;
}
:where(.p-contact-form--rental) .p-contact-form__step--confirm .p-contact-form__head{
  width: 22.6rem;
}


@media screen and (max-width: 768px){
  .p-contact-form__step--confirm .p-contact-form__head,
  .p-contact-form__step--confirm .p-contact-form__cell{
    display: block;
  }
  .p-contact-form__step--confirm .p-contact-form__head{
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 0.8rem;
  }
  .p-contact-form__step--confirm .p-contact-form__cell{
    padding-top: 0.7rem;
    padding-bottom: 1.5rem;
  }
}

/* ボタン類 */
.p-contact-form__button-area{
  margin-top: 10rem;
}
.p-contact-form__button{
  justify-content: center;
  align-items: center;
  width: 30rem;
  height: 5rem;
  margin: 0 auto;
  border-radius: 0.2rem;
}

.c-chevron__container:has(.c-chevron--static){
  position: relative;
}
.p-contact-form__button-container--to-submit{
  justify-content: center;
  column-gap: 8rem;
}
.p-contact-form__button-container--to-submit .p-contact-form__button{
  margin: 0;
}
.p-contact-form__button--cancel{
  background-color: #AEB7C4;
  background-image: none;
}
.p-contact-form__button--cancel .c-chevron--static::after{
  right: auto;
  left: 2.4rem;
  rotate: 180deg;
}
.p-contact-form__button--submit{
  position: relative;
}
.p-contact-form__button--submit::after{
  content: "";
  display: block;
  width: 0.6rem;
  height: 1rem;
  position: absolute;
  top: calc(50% - 0.4rem);
  right: 2.4rem;
  z-index: 0;
  background: url(../images/common/chevron-s_w.svg) no-repeat center / contain;
  pointer-events: none;
}
.p-contact-form__button--submit .form-submit{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wpcf7-spinner{
  position: absolute;
  left: 1rem;
}

@media screen and (max-width: 768px){
  .p-contact-form__button-area{
    margin-top: 8rem;
  }
  .confirm-open .p-contact-form__button-container--to-submit{
    flex-direction: column;
    align-items: center;
    row-gap: 2.5rem;
  }
  .p-contact-form__button{
    width: min(100%, 31.5rem);
  }
  
}




/* JSによる制御 */
.confirm-open .js-step-input{
  display: none;
}
:not(.confirm-open) .js-step-confirm{
  display: none;
}
.confirm-open .js-step-confirm{
  display: block;
}
.confirm-open .p-contact-form__button-container--to-submit{
  display: flex;
}