input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='search'],
textarea,
select {
    box-sizing: border-box;
    width: 100%;
    height: 6.2rem;
    padding: 0 2rem;
    font-family: inherit;
    font-weight: 400;
    font-size: 1.8rem;
    border: 0.1rem solid rgb(0 0 0 / 20%);
    border-radius: 0.5rem;
    background-color: transparent;
    color: rgb(63 63 63 / 60%);
    text-overflow: ellipsis;
    overflow: hidden;
    transition: 0.3s;
}

textarea {
    --height: 6.2rem;

    display: block;
    height: var(--height);
    min-height: var(--height);
    padding-block: 2rem;
    resize: vertical;
    overflow: auto;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: rgb(63 63 63 / 60%);
}

input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
    border-color: var(--color-text-2);
    color: var(--color-text-2);
}

select:valid {
    color: var(--color-text-2);
}


/* custom input START */
.custom-input,
.wpcf7-acceptance label {
    display: block;
    position: relative;
    cursor: pointer;
}

.custom-input input,
.wpcf7-acceptance label input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.custom-input input + span,
.wpcf7-acceptance label input + span {
    padding-left: 3rem;
    line-height: 1.5;
    position: relative;
}

.custom-input input + span::before,
.custom-input input + span::after,
.wpcf7-acceptance label input + span::before,
.wpcf7-acceptance label input + span::after {
    content: "";
    box-sizing: border-box;
    width: 2.1rem;
    border: 0.2rem solid var(--color-red);
    border-radius: 0.2rem;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -0.2rem;
}


.custom-input input + span::after,
.wpcf7-acceptance label input + span::after {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 1.3rem;
    border: 0;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    top: 0.2rem;
    left: 0.7rem;
    opacity: 0;
}

.custom-input input:checked + span::after,
.wpcf7-acceptance label input:checked + span::after {
    opacity: 1;
}

.custom-input input + span a,
.wpcf7-acceptance label input + span a {
    /*color: #E90000;*/
    text-decoration: underline;
}

.custom-input input + span a:hover,
.wpcf7-acceptance label input + span a:hover {
    text-decoration: none;
}

.wpcf7-acceptance {
    font-size: 1.4rem;
    color: rgb(63 63 63 / 60%);
}
/* custom input END */



/* form START */
form {
    --gutter: 2rem;

    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.form__block {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.form__row {
    display: flex;
    gap: var(--gutter);
}

.form__col {
    flex: 1;
    width: 100%;
    flex-grow: 1;
    position: relative;
}

.form__col_2 {
    flex-grow: 2;
}

.form__row.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.form__row.grid .form__col {
    grid-column: span 4;
}

.form__row.grid .form__col_2 {
    grid-column: span 8;
}



.form__field {    
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.form__label sup {
    vertical-align: unset;
    font-size: 100%;
    color: var(--color-primary-700);
}

.form__submit {
    margin-inline: auto;
}

div:has( > .form__submit) {
    display: flex;
}

.form__title {
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.01em;
}
/* form END */



/* CF7 START */
.wpcf7-list-item {
    margin: 0;
}

input.wpcf7-not-valid,
textarea.wpcf7-not-valid,
select.wpcf7-not-valid {
    border-color: var(--color-red);
}

.wpcf7-not-valid-tip {
    padding-top: 0.5rem;
    font-size: 1.2rem;
    color: var(--color-red);
}

.wpcf7 form .wpcf7-response-output {
    padding: 0;
    border: 0;
    color: #FF4500;    
    margin: 0;
}

.wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    z-index: 1;
}

/*@media (hover: hover) and (pointer: fine) {
    input:not([type="submit"]):hover,
    input:not([type="submit"]):focus,
    input:not([type="submit"]):not(:empty),
    textarea:hover,
    textarea:focus {
        border-color: var(--color-text-1);
    }

    input:not([type="submit"]):focus,
    textarea:focus {
        color: var(--color-text-1);
        background-color: #fff;
    }

    input[type="submit"]:hover,
    input[type="submit"]:focus {
        background-color: #fff;
        color: var(--color-text-1);
    }
}*/
/* CF7 END */


@media screen and (max-width: 767.9px) {
    .form__row,
    .form__row.grid {
        display: flex;
        flex-direction: column;
    }
}