/* スマホ */
@media (max-width: 768px) {
    :root {
        /* basic */
        --basic-color: rgb(48, 150, 84);
        --basic-font-size: 14px;
        --basic-checkbox-size: 14px;
        --basic-radiobox-size: 14px;
        --basic-tab-height: 28px;
        --basic-tab-md: 3px;
        --basic-margin: 3px;
        --basic-padding: 3px;
        /* header */
        --header-color: #ddf7eb;
        --header-height: 50px;
        --header-icon-width: 50px;
        /* sidemenu */
        --sidemenu-top: calc(var(--header-height) + 1px);
        --sidemenu-right: 1px;
        --sidemenu-title-font-size: 14px;
        --sidemenu-basic-font-size: 12px;
        /* main */
        --main-mt: 50px;
        --input-field-input-font-size: 14px;
        /* contents */
        --contents-header-pt: 5px;
        --contents-header-pd: 5px;
        --contents-header-title-font-size: 20px;
        --contents-header-title-pt: 5px;
        --contents-header-title-pd: 5px;
        --contents-header-attention-height: 20px;
        --contents-header-attention-font-size: 0.8rem;
        --contents-header-attention-pt: 5px;
        --contents-header-attention-pd: 5px;
        --contents-bgcolor: rgb(242, 242, 242);
        --contents-header-height: 50px;
        --contents-body-pt: 20px;
        --contents-body-pd: 20px;
        --contents-body-mt: 20px;
        --contents-body-md: 20px;
        /* form */
        --form-field-pt: 10px;
        --form-field-pd: 10px;
        /* icon */
        --icon-field: 50px;
        --icon-scale: 70%;
        --icon-color: #fff;
        --icon-bgcolor: var(--basic-color);
        --icon-hover-color: #4de7ff;
        --icon-font-size: 14px;
        --icon-title-space: 3px;
        /* button */
        --button-pt: 10px;
        --button-pd: 10px;
        --button-pl: 5px;
        --button-pr: 5px;
        --button-width: calc(var(--icon-field) * 3);
        --mini-button-width: var(--icon-field);
        --button-height: 30px;
        --button-bgcolor: var(--basic-color);
        /* card */
        --card-pt: 20px;
        --card-pd: 20px;
        --card-bgcolor: rgb(242, 242, 242);
        --card-header-height: 28px;
        --card-input-height: 40px;
        --card-textarea-height: 100px;
        --card-font-size: 10px;
        /* search */
        --search-field-md: 10px;
        /* table */
        --table-cell-height: calc(var(--input-field-input-font-size) * 2);
        --table-header-bgcolor: rgb(35, 97, 149);
        --table-font-size: 12px;
        --table-body-bgcolor: #fff;
        --table-body-hover-bgcolor: rgb(255, 255, 204);
        --table-body-checked-bgcolor: rgb(255, 231, 255);
        /* input-field */
        --input-height: 25px;
        --input-field-hover-bgcolor: rgb(255, 255, 204);
        --input-field-checked-bgcolor: rgb(255, 231, 255);
        --input-field-mt: 10px;
        --input-field-md: 10px;
        --input-field-ml: 10px;
        --input-field-mr: 10px;
        --input-field-pt: 10px;
        --input-field-pd: 10px;
        --input-field-pl: 10px;
        --input-field-pr: 10px;
        --input-field-label-padding: 3px;
        --input-field-input-height: calc(
            var(--input-field-input-font-size) * 2
        );
        --input-padding: 3px;
        --input-font-size: 14px;
        --input-bgcolor: #fff;
        --input-focus-color: #d2ecf9;
        --input-field-list-padding: 3px;
        /* parts */
        --alert-color: #aa1f24;
    }

    main {
        max-width: 768px;
    }

    .sidemenu {
        width: 100%;
    }

    .sidemenu .sidemenu-field {
        width: 100%;
    }

    .sidemenu .sidemenu-field ul.sidemenu-list {
        width: 100%;
    }

    .sidemenu .sidemenu-field ul.sidemenu-list li.sidemenu-item {
        padding-block: 10px;
        width: 100%;
    }

    .card .card-body .body .input-field:has(input.first_name, input.last_name) {
        display: block;
        /* height: var(--card-input-height); */
        height: auto;
    }

    .card
        .card-body
        .body
        .input-field
        .text-field:has(input.first_name, input.last_name) {
        padding-bottom: var(--basic-padding);
    }

    .card
        .card-body
        .body
        .input-field:has(input.first_name_kana, input.first_name_kana) {
        padding-bottom: var(--basic-padding);
        display: block;
        /* height: var(--card-input-height); */
        height: auto;
    }

    .card
        .card-body
        .body
        .input-field
        .text-field:has(input.first_name_kana, input.last_name_kana) {
        padding-bottom: var(--basic-padding);
    }

    /* profile */
    main .container .contents-field-header.profile .attention {
        display: block;
        height: auto;
    }

    main .container .contents-field-header.profile .attention .slash {
        display: none;
    }
}