.form-container {
    --form-element-my: 12px; /* 12px */
    --form-font-size: 15px; /* 16px */
    --form-item-my: 48px; /* 48px */

    --checkbox-size: 28px;
    --radio-size: 28px;
}

.form-container {
    border: 4px solid var(--blue-border);
    border-radius: var(--border-radius-sm);
    padding: 56px;
    font-size: 14px;
}

@media (width <= 768px){

    .form-container {
        --form-element-my: 12px;
        --form-font-size: 15px;
        --form-item-my: 32px;

        --checkbox-size: 24px;
        --radio-size: 24px;

        border: 2px solid var(--blue-border);
        padding: 24px;
    }

}

/*
*****************************************************************************************

フォームの要素

*****************************************************************************************
*/

.form-container {

    /*
    ***************************** checkbox, radio *****************************
    */

    /* 最初がcheckboxとかradioだったら、気持ち余白を大きくする */
    .form-item-body > .checkboxes:first-child, 
    .form-item-body > .radios:first-child, 
    .form-item-body > .form-checkboxes:first-child, 
    .form-item-body > .form-radios:first-child {
        margin-top: calc(var(--form-element-my) + 8px);
    }

    /*
    ***************************** inputtext *****************************
    */

    .form-input {
        letter-spacing: normal;
        vertical-align: top;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .input:where(input[type="text"],
    input[type="search"],
    input[type="url"],
    input[type="email"],
    input[type="tel"],
    input[type="password"]),
    .form-input:where(input[type="text"],
    input[type="search"],
    input[type="url"],
    input[type="email"],
    input[type="tel"],
    input[type="password"]),
    .form-input 
    :where(input[type="text"],
    input[type="search"],
    input[type="url"],
    input[type="email"],
    input[type="tel"],
    input[type="password"]) {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        font-size: var(--form-font-size);
        border: 1px solid var(--gray-input);
        border-radius: var(--border-radius-sm);
        min-height: calc(44 / var(--form-font-size) * 1em);
        padding: 0.4em 0.8em 0.425em;
        color: var(--black);
    }

    .input-full {
        width: stretch;
    }

    /* 本来はhtmlの構造は`.input.input-full`を意図していたが、
    たまに`.input > .input-full`になってるときがあるので、それへの対応 */
    .input:has( .input-full),
    .form-input:has( .input-full) {
        display: block;
    }

    /*
    ***************************** textarea *****************************
    */

    .textarea,
    .form-textarea:where(textarea),
    :where(.form-textarea) textarea {
        border: 1px solid var(--gray-input);
        background-color: #fff;
        border-radius: var(--border-radius-sm);
        font-size: var(--form-font-size);
        padding: 0.8em 0.8em 0.825em;
        box-sizing: border-box;
    }

    .textarea-full {
        width: stretch;
    }

    /*
    ***************************** label *****************************
    */

    .form-label {
        width: auto;
    }

    label:where(.form-label),
    :where(.form-label) label {
        font-weight: bold;
    }

    label:where(.form-label-lg),
    :where(.form-label-lg) label {
        font-size: var(--font-size-ml);
    }

    :where(.form-item-header) .form-label {
        margin-bottom: 0;
    }

    /*
    ***************************** required *****************************
    */

    :where(.form-label) .required {
        font-weight: normal;
    }

    .form-label .required::after {
        content: none;
    }

    .required {
        color: #de0000;
        font-weight: normal;
        font-size: 13px;
        line-height: 1;
    }

}

.form-select {
    border: 1px solid #cdcdcd;
    background: #fff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1;
    padding: 0.85em 0.6em 0.75em;
    padding-right: 30px;
    width: 300px;
    max-width: 100%;
    background-image: url(/assets/images/form-select-arrow.png);
    background-position: right 10px center;
    background-size: 0.8em;
    background-repeat: no-repeat;
}

/*
*****************************************************************************************

フォームの基本レイアウト

*****************************************************************************************
*/

.form-list {
    all: unset;
    display: block;
}

.form-item {
    all: unset;
    display: block;
    margin-top: var(--form-item-my);
}

.form-item:first-child {
    margin-top: 0;
}

.form-item-header {
    all: unset;
    display: block;
    margin-bottom: var(--form-element-my);
}

.form-item-header:has( .form-label-lg) {
    margin-bottom: calc(var(--form-element-my) + 12px);
}

.form-item-body {
    all: unset;
    display: block;
}

/* 送信ボタンなど */
.form-btn-block {
    margin: 64px 0 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

:where(.survey-form) .form-item {
    border-top: 1px solid var(--blue-border);
}

:where(.survey-form) .form-item::before {
    content: '';
    display: block;
    margin-bottom: calc(var(--form-item-my));
}

:where(.survey-form) .form-item:first-child {
    border-top: 0;
}

:where(.survey-form) .form-item:first-child:before {
    content: '';
    display: block;
    margin-bottom: 8px;
}

@media (width <= 768px){

    .form-btn-block {
        margin: 32px 0 8px;
        gap: 4px;
    }

}