html, body {
    font-family: 'Roboto', 'Noto Sans JP';
}

/* カスタム検証用クラス */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}
.invalid {
    outline: 1px solid red;
}

/*ユニクル用*/
:root {
    /* 青 */
    --uniqle-blue-100: #EEF5F6;
    --uniqle-blue-200: #D2E3ED;
    --uniqle-blue-300: #66AAD0;
    --uniqle-blue-400: #0072B1;
    /* 灰 */
    --uniqle-gray-100: #F2F2F2;
    --uniqle-gray-200: #D9D9D9;
    --uniqle-gray-300: #C4C4C4;
    --uniqle-gray-400: #B3B3B3;
    --uniqle-gray-500: #7E7E7E;
    /* 既定色 */
    --uniqle-nautral-pink: #F6EEEE;
    --uniqle-general-delete: #E54D4D;
    --uniqle-general-alert: #FF0000;
    --uniqle-text-body: #343434;
    --uniqle-bg-base: #FFFFFF;
}

.uniqle-btn {
    min-width: 150px;
    height: 50px;
    font-size: 20px;
}

.uniqle-btn-sm {
    width: fit-content;
    height: fit-content;
    font-size: 20px;
}

.text-uniqle-primary {
    color: var(--uniqle-blue-400);
}

.uniqle-primary {
    background-color: var(--uniqle-blue-400);
    color: #fff;
}

    .uniqle-primary:hover {
        color: #fff;
    }

.uniqle-outline-primary {
    color: var(--uniqle-blue-400);
    border-color: var(--uniqle-blue-400);
}

    .uniqle-outline-primary:hover {
        color: #fff;
        background-color: var(--uniqle-blue-400);
        border-color: var(--uniqle-blue-400);
    }

.uniqle-pageback {
    background-color: var(--uniqle-blue-300);
    color: #fff;
}

    .uniqle-pageback:hover {
        color: #fff;
    }

.uniqle-info {
    background-color: var(--uniqle-light-blue);
    color: #fff;
}

    .uniqle-info:hover {
        color: #fff;
    }

.uniqle-light {
    background-color: var(--uniqle-gray-100) !important;
    color: var(--uniqle-gray-500);
}

    .uniqle-light:hover {
        color: var(--uniqle-gray-500);
    }

.uniqle-delete {
    background-color: var(--uniqle-general-delete);
    color: #fff;
}

    .uniqle-delete:hover {
        color: #fff;
    }

/*bootstrap wrap*/
.btn-close {
    background: transparent url(./image/close.png) center / 1em auto no-repeat;
    background-size: 32px;
    padding: 0px;
    margin: 0 0 0 auto;
    width: 32px;
    height: 32px;
    opacity: .85;
}

    .btn-close:hover {
        opacity: 1;
    }

.btn {
    opacity: .9;
}

    .btn:hover {
        opacity: 1;
    }

h4 {
    font-weight: 600;
}

a,
.btn-link {
    color: var(--uniqle-blue-400);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}