.page-contact-individual{
    --sub-top-padding-top: calc(var(--header-height) + (var(--s-val) * 8));
    --sub-top-padding-bottom: calc(var(--s-val) * 12);
}
.contact__text{
    text-align: center;
    color: var(--color-gray);
}
.contact__notice--individual{
    font-size: calc(var(--s-val) * 2.2);
    margin-bottom: calc(var(--s-val) * 1.2);
}
.contact__notice--corporate{
    font-size: calc(var(--s-val) * 1.8);
}
.contact__notice-link{
    color: #1670B9;
}
.contact{
    padding-block: calc(var(--s-val) * 7.7) calc(var(--s-val) * 8.7);
}
.contact.page-width {
    max-width: calc(715px + var(--p-inline) * 2);
}
.contact__description{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: calc(var(--s-val) * 2.2);
    margin-bottom: calc(var(--s-val) * 8.7);
}
.contact__description-text{
    font-size: calc(var(--s-val) * 2.2);
    color: var(--color-gray);
}
.page-heading{
    text-align: center;
    margin-bottom: calc(var(--s-val) * 4.5);
}
.page-heading__label{
    display: inline-block;
    padding: calc(var(--s-val) * 0.5) calc(var(--s-val) * 2.5);
    border: 1px solid var(--color-black);
    border-radius: calc(var(--s-val) * 5);
    font-size: calc(var(--s-val) * 1.6);
    margin-bottom: calc(var(--s-val) * 1.5);
}
.page-heading__title{
    color: var(--color-orange02);
    font-size: calc(var(--s-val) * 3.6);
}
/* お問い合わせフォーム */

.contact-form__title{
    display: flex;
    gap: var(--s-val);
}
.contact-form__item{
    margin-bottom: calc(var(--s-val) * 4);
}
.contact-form__title-text,
.contact-form__title-required{
    font-weight: bold;
}
.contact-form__title-required{
    background-color: var(--color-orange02);
    padding: 0 calc(var(--s-val) * 0.8);
    color: var(--color-white);

}
.contact-form__text-input{
    margin-top: var(--s-val);
}
.contact-form__input-area {
    font-size: calc(var(--s-val) * 1.6);
    width: 100%;
    padding: calc(var(--s-val) * 1.6) calc(var(--s-val) * 3.3) calc(var(--s-val) * 1.8);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px  solid rgb(0 0 0 / 50%);
    border-radius: calc(var(--s-val) * 0.5);
}
.wpcf7 ::placeholder {
    color: #c3c3c3;
}
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
    outline: none;
    border-width: 2px; 
    border-color: var(--color-orange02);
}

.contact-submit__description p {
    margin: 0;
}
.contact-submit__description br {
    display: none;
}
.contact-submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.contact-submit__agree {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--s-val) * 0.5);
    line-height: normal;
    cursor: pointer;
}
.contact-submit__agree .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
}
.contact-submit__agree input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.contact-submit__privacy-policy {
    display: inline-flex;
    align-items: center;
    line-height: normal;
    padding: 0;
    color: var(--color-orange02);
}
.contact-submit__agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: calc(var(--s-val) * 2);
    height: calc(var(--s-val) * 2);
    border: 1.5px solid #999;
    border-radius: calc(var(--s-val) * 0.4);   
    background: var(--color-white);
    cursor: pointer;
    vertical-align: middle;
    position: relative;
}
.contact-submit__agree input[type="checkbox"]:checked {
    background: var(--color-orange02);
    border-color: var(--color-white);
}
.contact-submit__agree input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: calc(var(--s-val) * 0.2);
    left: calc(var(--s-val) * 0.5);
    width: calc(var(--s-val) * 0.6);
    height: calc(var(--s-val) * 1.1);
    border: solid var(--color-white);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.contact-submit__agree .wpcf7-form-control-wrap,
.contact-submit__agree .wpcf7-form-control,
.contact-submit__agree .wpcf7-list-item {
    display: flex;
    align-items: center;
}

/* 確認ボタン */
.button-wrap{
    margin-top: calc(var(--s-val) * 2);
    display: flex;
    justify-content: center;
}
.button-wrap a{
    text-decoration: none;
}
.contact-submit__button p {
    display: contents;
}
.contact-submit__button .wpcf7-spinner {
    display: none;
}
.contact-submit__button {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.button{
    width: calc(var(--s-val) * 23.5);
    color: var(--color-white);
    font-size: calc(var(--s-val) * 2);
    padding: calc(var(--s-val) * 1.4) calc(var(--s-val) * 6.6);
    border-radius:  calc(var(--s-val) * 2.7);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
    text-align: center;
}
/* チェックボックス未承諾 */
.button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
/* チェックボックス承諾後 */
.button:not(:disabled) {
    background-color: var(--color-orange02);
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(251, 197, 197, 1), 0 2px 4px rgba(83, 83, 83, 0.25);

}
/* active */
.button:not(:disabled):active {
    box-shadow: 0 2px 4px #FBC5C5;
    transform: translateY(1px);
}
.contact-submit__button::after{
    content: "";
    width: calc(var(--s-val) * 1.6);
    height: calc(var(--s-val) * 1.6);
    aspect-ratio: 1 / 1;
    background: url(../images/contact/button-arrow.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: calc(var(--s-val) * 2);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: var(--color-orange02);
}

.wpcf7 form .wpcf7-response-output {
    text-align: center;
    padding: 1.2em 1em;
    border: 2px solid var(--color-orange02);
  }



.grecaptcha-text{
    margin-top: calc(var(--s-val) * 2);
    font-size: calc(var(--s-val) * 1.2);
    color: rgb(0 0 0 / 50%);
    text-align: center;
}
.grecaptcha-text a{
    color: rgb(0 0 0 / 50%);
}
.hover-opacity {
    transition: opacity 0.3s ease;
}
.hover-opacity:hover{
    opacity: 0.8;
}





@media screen and (max-width: 768px){
    .br--pc{
        display: none;
    }
    .br--sp{
        display: block;
    }
    .page-contact-individual{
        --sub-top-padding-top: calc(var(--header-height) + (var(--s-val) * 5));
        --sub-top-padding-bottom: calc(var(--s-val) * 7);
    }
    .contact__text{
        max-width: 32em;
        margin-inline: auto;
        padding-inline: calc(var(--s-val) * 2);
    }
    .contact__notice--individual{
        font-size: calc(var(--s-val) * 2.6);
        line-height: 1.2;
        margin-bottom: calc(var(--s-val) * 2.5);
    }
    .contact__description-text{
        font-size: calc(var(--s-val) * 2.1);
    }
    .contact__description{
        text-align: left;
        margin-bottom: calc(var(--s-val) * 7.7);
    }
    .page-heading{
        margin-bottom: calc(var(--s-val) * 4);
    }
    .page-heading__label{
        margin-bottom: calc(var(--s-val) * 0.5);
    }
}

/* =========================
 確認画面
============================*/
.contact-bg{
    background: url(../images/common/back-image.webp) no-repeat center top / cover;
    width: 100%;
}
.contact--confirmation,
.contact--complete{
    padding-block: calc(var(--s-val) * 19) calc(var(--s-val) * 13.5);
}
.contact--confirmation.page-width {
    max-width: calc(715px + var(--p-inline) * 2);
}
.confirm__title{
    text-align: center;
    margin-bottom: calc(var(--s-val) * 3.5);
}
.confirm__notice{
    text-align: center;
    margin-bottom: calc(var(--s-val) * 6);
}
/* 確認内容（入力内容） */
.confirmation{
    margin-bottom: calc(var(--s-val) * 4);
}
.confirmation__item{
    display: flex;
    align-items: stretch;
    --w-title: calc(var(--s-val) * 20);
    border-bottom: 1px solid rgb(0 0 0 / 50%);
}
.confirmation__item:first-of-type {
    border-top: 1px solid rgb(0 0 0 / 50%);
}

.confirmation__title, .confirmation__detail {
    padding: calc(var(--s-val) * 3) calc(var(--s-val) * 2);
}
.confirmation__title{
    width: var(--w-title);
    font-weight: bold;
}
/* textarea 行だけ */
.confirmation__item--textarea .confirmation__title {
    flex-shrink: 0;
}

.confirmation__item--textarea .confirmation__detail {
    flex: 1;
    word-break: break-word;
    white-space: pre-wrap;
}


@media screen and (max-width: 768px){
    .contact-bg{
        background: none;
    }
    .contact--confirmation,
    .contact--complete {
        padding-block: calc(var(--s-val) * 15) calc(var(--s-val) * 11);
    }
    .confirmation__item {
        --w-title: 100%;
        display: block;
        padding: calc(var(--s-val) * 2.3) calc(var(--s-val) * 2);
    }
    .confirmation__title, .confirmation__detail {
        padding: 0;
    }
    .confirmation__title {
        margin-bottom: calc(var(--s-val) * 0.6);
        line-height: 1.5;
    }
    
    .confirmation__detail {
        width: 100%;
    }
}

/* =========================
 送信完了画面
============================*/
.contact--complete.page-width{
    max-width: calc(800px + var(--p-inline) * 2);
}
.complete__description{
    text-align: center;
    margin-bottom: calc(var(--s-val) * 3);
}
.contact--complete .complete__description .complete__notice-list{
    margin-top: calc(var(--s-val) * 1.4);
    text-align: left;
    display: inline-flex;
    flex-direction: column;
    gap: calc(var(--s-val) * 1.2);
}
.complete__notice-list{
    list-style: none;
    padding-left: 0;
}

.complete__notice-item {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.6;
}

.complete__notice-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(1em * 0.5);
    width: 0.6em;
    height: 0.6em;
    background-color: var(--color-black);
    border-radius: 50%;
}



@media screen and (max-width: 768px){
    .page-heading__title {
        font-size: calc(var(--s-val) * 2.8);
    }
    .complete__description{
        text-align: left;
        margin-bottom: calc(var(--s-val) * 3);
    }
}