.formContainer {
    align-items: center;
    border-bottom: 1px solid var(--c-border-gray);
    column-gap: 24px;
    display: flex;
    padding-block: 40px;
}

.formContainer:has(.formTextArea) {
    align-items: flex-start;
}

.formContainer + .formContainer {
    margin-top: 10px;
}

@media screen and (max-width: 1080px) {
    .formContainer {
        align-items: flex-start;
        flex-direction: column;
        row-gap: 8px;
    }
}

@media screen and (max-width: 767px) {
    .formContainer {
        padding-block: 20px;
    }
}

.formLabel {
    align-items: center;
    column-gap: 8px;
    display: grid;
    font-size: 16px;
    font-weight: 500;
    grid-template-columns: auto 1fr;
    letter-spacing: 0.1em;
    width: min(100%, 240px);
}

.formLabel:where(
        .formContainer:has(input) > *,
        .formContainer:has(textarea) > *
    )::before {
    align-items: center;
    background: var(--c-gray-400);
    border-radius: 100px;
    color: var(--c-white);
    content: "任意";
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    height: 22px;
    justify-content: center;
    width: 42px;
}

.formLabel:where(
        .formContainer:has(input[aria-required="true"]) > *,
        .formContainer:has(textarea[aria-required="true"]) > *
    )::before {
    background: var(--c-important);
    color: var(--c-white);
    content: "必須";
}

.formContainer span {
    width: min(100%, 820px);
}

@media screen and (max-width: 1080px) {
    .formContainer span {
        width: 100%;
    }
}

.formInput,
.formTextArea {
    border: 1px solid var(--c-border-gray);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    padding: 16px;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .formInput,
    .formTextArea {
        padding: 8px 10px;
    }
}

.formInput:focus-visible,
.formTextArea:focus-visible {
    outline: 2px solid var(--c-secondary);
}

.formInput::placeholder,
.formTextArea::placeholder {
    color: var(--c-gray-300);
    font-family: var(--font-notosans);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 767px) {
    .formInput::placeholder,
    .formTextArea::placeholder {
        font-size: 16px;
    }
}

.formCheckbox {
    display: grid;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 10px;
    place-items: center;
}

@media screen and (max-width: 576px) {
    .formCheckbox {
        font-size: 15px;
    }
}

.formCheckbox label {
    align-items: center;
    column-gap: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
}

@media screen and (max-width: 480px) {
    .formCheckbox label {
        align-items: flex-start;
    }
}

@media screen and (max-width: 480px) {
    .formCheckbox input {
        margin-top: 4px;
    }
}

.formCheckbox .wpcf7-list-item-label {
    line-height: 1.8;
}

.formCheckbox .wpcf7-not-valid-tip {
    text-align: center;
}

.formCheckbox input {
    appearance: none;
    position: relative;
}

.formCheckbox input::after {
    content: url("../images/common/icon-checked.svg");
    height: 15px;
    left: 1.5px;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
}

@media screen and (max-width: 576px) {
    .formCheckbox input::after {
        left: 0;
        transform: translateY(-50%) scale(0.6);
    }
}

.formCheckbox input::before {
    border: 1px solid var(--c-border-gray);
    content: "";
    display: block;
    height: 24px;
    width: 24px;
}

@media screen and (max-width: 576px) {
    .formCheckbox input::before {
        height: 20px;
        width: 20px;
    }
}

.formCheckbox input:checked::before {
    background: var(--c-primary);
}

.formSubmit {
    display: inline-grid;
    justify-items: center;
    left: 50%;
    margin-inline: auto;
    margin-top: 40px;
    position: relative;
    text-align: center;
    transform: translateX(-50%);
    width: min(100%, 180px);
}

.formSubmit input {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding-inline: 32px 46px;
}

.formSubmit {
    position: relative;
}

.formSubmit::after {
    content: url("../images/common/icon-buttonPrimary.svg");
    height: 23px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
}

@media (any-hover: hover) {
    .formSubmit:hover::after {
        content: url("../images/common/icon-buttonSecondary.svg");
    }
}

/*----------------------------------

 Overwrite Default CSS

----------------------------------*/
.wpcf7-spinner {
    display: none !important;
}

.formInput.wpcf7-not-valid + .wpcf7-not-valid-tip {
    display: none !important;
}

/* 入力中はエラーを表示させない */
/* Do not display errors while typing */
.formInput[aria-invalid="true"]:not(:focus) + .wpcf7-not-valid-tip {
    display: block !important;
    margin-top: 8px;
    padding-left: 8px;
}

.wpcf7-not-valid-tip {
    font-family: var(--font-notosans);
    margin-top: 8px;
    padding-left: 4px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: var(--c-important) !important;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    padding: 16px 24px;
}