/* ==========================================================
   CONTACT FORM
========================================================== */

.contact .contact-actions {
    width: min(100%, 980px);
    margin: 48px auto 0;

    display: block;
}


/* ==========================================================
   FORM CONTAINER
========================================================== */

.contact-form {
    width: 100%;

    padding:
        40px
        42px
        42px;

    color: var(--ink);
    text-align: left;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    border:
        1px solid
        rgba(
            201,
            164,
            92,
            0.28
        );

    border-radius: 28px;

    box-shadow:
        0
        28px
        70px
        rgba(
            92,
            67,
            26,
            0.1
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* ==========================================================
   GRID
========================================================== */

.contact-form__grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        24px
        20px;
}

.contact-form__field {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.contact-form__field--full {
    grid-column:
        1 /
        -1;
}


/* ==========================================================
   LABEL
========================================================== */

.contact-form__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.contact-form__label {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--ink);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.045em;
}

.contact-form__required {
    padding:
        4px
        7px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #d5ae5d,
            #b98836
        );

    border-radius: 999px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
}


/* ==========================================================
   INPUT / TEXTAREA
========================================================== */

.contact-form input,
.contact-form textarea {
    width: 100%;

    color: var(--ink);

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border:
        1px solid
        rgba(
            25,
            25,
            24,
            0.14
        );

    border-radius: 15px;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.8;

    outline: none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.contact-form input {
    min-height: 58px;

    padding:
        0
        17px;
}

.contact-form textarea {
    min-height: 190px;

    padding:
        15px
        17px;

    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color:
        rgba(
            25,
            25,
            24,
            0.36
        );
}

.contact-form input:focus,
.contact-form textarea:focus {
    background: #ffffff;

    border-color:
        rgba(
            190,
            143,
            62,
            0.78
        );

    box-shadow:
        0
        0
        0
        4px
        rgba(
            201,
            164,
            92,
            0.13
        );
}

.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
    border-color:
        rgba(
            172,
            55,
            55,
            0.55
        );
}


/* ==========================================================
   CHARACTER COUNT
========================================================== */

.contact-form__counter {
    flex: 0 0 auto;

    color:
        rgba(
            25,
            25,
            24,
            0.5
        );

    font-size: 11px;
    letter-spacing: 0.06em;
}


/* ==========================================================
   ERROR MESSAGE
========================================================== */

.contact-form__error {
    min-height: 0;

    color: #a33b3b;

    font-size: 11px;
    line-height: 1.6;
}

.contact-form__error:empty {
    display: none;
}


/* ==========================================================
   SUCCESS / SEND ERROR
========================================================== */

.contact-form__notice {
    width: 100%;

    margin:
        0
        0
        20px;

    padding:
        18px
        20px;

    border-radius: 16px;

    font-size: 13px;
    line-height: 1.85;
    text-align: left;
}

.contact-form__notice:not([data-fs-active]) {
    display: none;
}

.contact-form__notice--success[data-fs-active] {
    display: block;

    color: #4d3a16;

    background:
        rgba(
            229,
            207,
            157,
            0.45
        );

    border:
        1px solid
        rgba(
            190,
            143,
            62,
            0.3
        );
}

.contact-form__notice--error[data-fs-active] {
    display: block;

    color: #8c3030;

    background:
        rgba(
            172,
            55,
            55,
            0.08
        );

    border:
        1px solid
        rgba(
            172,
            55,
            55,
            0.2
        );
}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.contact-form__submit-area {
    margin-top: 30px;

    display: flex;
    justify-content: center;
}

.contact-form__submit {
    min-width: 300px;

    border: 0;

    font-family: inherit;

    cursor: pointer;
}

.contact-form__submit:disabled {
    opacity: 0.62;

    cursor: wait;

    transform: none;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .contact .contact-actions {
        width: 100%;
        margin-top: 40px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 820px) {

    .contact .contact-actions {
        margin-top: 32px;
    }

    .contact-form {
        padding:
            25px
            18px
            28px;

        border-radius: 22px;
    }

    .contact-form__grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .contact-form__field--full {
        grid-column: auto;
    }

    .contact-form input {
        min-height: 56px;

        font-size: 16px;
    }

    .contact-form textarea {
        min-height: 180px;

        font-size: 16px;
    }

    .contact-form__label {
        font-size: 12px;
    }

    .contact-form__label-row {
        align-items: flex-end;
    }

    .contact-form__submit-area {
        margin-top: 24px;
    }

    .contact-form__submit {
        width: 100%;
        min-width: 0;
    }

}

/* ==========================================================
   CONTACT ALIGNMENT FIX
   見出しと送信ボタンの中央位置を修正
========================================================== */

/* PC版のCONTACT見出しを画面中央へ固定 */

@media (min-width: 821px) {

    .contact .contact-box {
        width: 100%;
        max-width: none;
        margin-inline: auto;

        text-align: center;
    }

    .contact .contact-label,
    .contact .contact-box h2,
    .contact .contact-title-line,
    .contact .contact-copy {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .contact .contact-actions {
        margin-left: auto;
        margin-right: auto;
    }

}


/* 送信ボタンの文字をボタン中央へ固定 */

.contact-form__submit {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding:
        0
        62px !important;

    text-align: center !important;
}

.contact-form__submit > span:first-child {
    width: 100%;

    text-align: center;
}

.contact-form__submit .btn-icon {
    position: absolute;

    top: 50%;
    right: 14px;

    margin: 0;

    transform:
        translateY(-50%) !important;
}

.contact-form__submit:hover .btn-icon {
    transform:
        translateY(-50%) !important;
}

/* CONTACT見出しだけ視覚的に中央へ補正 */
@media (min-width: 821px) {

    .contact .contact-title-line {
        position: relative;
        left: 24px;
    }

}
/* 送信ボタンの文字位置を微調整 */
.contact-form__submit > span:first-child {
    position: relative;
    left: -4px;
}

/* ==========================================================
   PRIVACY CONSENT
========================================================== */

.contact-form__consent {
    margin-top: 26px;
}

.contact-form__consent-row {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;
}

.contact-form__consent input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;

    flex: 0 0 20px;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 4px;

    box-shadow: none !important;

    accent-color: #c69543;

    cursor: pointer;
}

.contact-form__consent-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        4px
        10px;
}

.contact-form__consent-copy label {
    color: var(--ink);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;

    cursor: pointer;
}

.contact-form__consent-copy a {
    color: #a9782d;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.contact-form__consent-copy a:hover {
    opacity: 0.68;
}

.contact-form__consent .contact-form__error {
    margin-top: 8px;

    text-align: center;
}


/* スマホ */

@media (max-width: 820px) {

    .contact-form__consent {
        margin-top: 22px;
    }

    .contact-form__consent-row {
        align-items: flex-start;
        justify-content: flex-start;

        gap: 9px;
    }

    .contact-form__consent-copy {
        flex: 1;

        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }

    .contact-form__consent-copy label {
        font-size: 12px;
    }

    .contact-form__consent .contact-form__error {
        text-align: left;
    }

}