@charset "utf-8";
/* CSS Document */

/* *************************************
	Default Style
************************************* */

/* body */
.body-default {
    /* font */
    color: var(--text-color);

    /* scroll bar */
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) var(--light-gray);
}

/* link */
a {
    color: var(--main-color-deep);
}
a:hover,
a:focus,
a:active {
    color: var(--main-color-dark);
}

/* list */
li {
    list-style: none;
}

/* checkbox color */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--main-color);
}

/* button */
.btn:focus,
.btn:active {
    outline: none;
    box-shadow: none;
}

/* *************************************
	Colors
************************************* */

/* main colors */
.main-color {
    color: var(--main-color) !important;
}
.main-color-dark {
    color: var(--main-color-dark) !important;
}
.main-color-deep {
    color: var(--main-color-deep) !important;
}
.main-color-light {
    color: var(--main-color-light) !important;
}
.main-color-pale {
    color: var(--main-color-pale) !important;
}
.main-color-whitish {
    color: var(--main-color-whitish) !important;
}

/* text-color */
.text-color {
    color: var(--text-color) !important;
}

/* monotone colors */
.white {
    color: var(--white) !important;
}
.smoke-white {
    color: var(--smoke-white) !important;
}
.off-white {
    color: var(--off-white) !important;
}
.pale-gray {
    color: var(--pale-gray) !important;
}
.light-gray {
    color: var(--light-gray) !important;
}
.gray {
    color: var(--gray) !important;
}
.dark-gray {
    color: var(--dark-gray) !important;
}
.charcoal-gray {
    color: var(--charcoal-gray) !important;
}
.graphite-black {
    color: var(--graphite-black) !important;
}
.black {
    color: var(--black) !important;
}

/* *************************************
	Background Colors
************************************* */

/* main colors */
.bg-main-color {
    background-color: var(--main-color) !important;
}
.bg-main-color-dark {
    background-color: var(--main-color-dark) !important;
}
.bg-main-color-deep {
    background-color: var(--main-color-deep) !important;
}
.bg-main-color-light {
    background-color: var(--main-color-light) !important;
}
.bg-main-color-pale {
    background-color: var(--main-color-pale) !important;
}
.bg-main-color-whitish {
    background-color: var(--main-color-whitish) !important;
}

/* text-color */
.bg-text-color {
    background-color: var(--text-color);
}

/* monotone colors */
.bg-white {
    background-color: var(--white) !important;
}
.bg-smoke-white {
    background-color: var(--smoke-white) !important;
}
.bg-off-white {
    background-color: var(--off-white) !important;
}
.bg-pale-gray {
    background-color: var(--pale-gray) !important;
}
.bg-light-gray {
    background-color: var(--light-gray) !important;
}
.bg-gray {
    background-color: var(--gray) !important;
}
.bg-dark-gray {
    background-color: var(--dark-gray) !important;
}
.bg-graphite-black {
    background-color: var(--graphite-black) !important;
}
.bg-black {
    background-color: var(--black) !important;
}

.bg-pale-danger {
    background-color: mistyrose !important;
}

.bg-pale-success {
    background-color: honeydew !important;
}

/* *************************************
	Border
************************************* */

/* main color border */
.border-main-color {
    border: 1px solid var(--main-color);
}

/* main color border */
.border-main-color-bold {
    border: 3px solid var(--main-color);
}

.border-mistaken-color {
    border: 3px solid red;
}

/* main color border */
.border-lite-gray-color {
    border: 1px solid var(--light-gray);
}

/* gray border */
.border-top-gray {
    border-top: 1px solid var(--light-gray);
}

/* gray border */
.border-bottom-gray {
    border-bottom: 1px solid var(--light-gray);
}

/* gray border */
.border-bottom-top {
    border-top: 1px solid var(--light-gray);
}

/* *************************************
	Button
************************************* */

/* rounded button */
.btn.btn-rounded {
    border-radius: 36px;
}

/* .btn-primary */
.btn.btn-primary {
    border-color: var(--main-color);
    background-color: var(--main-color);
}
.btn.btn-primary:hover {
    border-color: var(--main-color-deep);
    background-color: var(--main-color-deep);
}
.btn.btn-primary:focus,
.btn.btn-primary:active {
    border-color: var(--main-color-deep) !important;
    background-color: var(--main-color-deep) !important;
    outline: none;
    box-shadow: none;
}
.btn.btn-primary.disabled,
.btn.btn-primary:disabled {
    border-color: var(--main-color-deep);
    background-color: var(--main-color-deep);
}

/* .btn-secondary */
.btn.btn-secondary {
    color: white;
    background-color: var(--gray);
}
.btn.btn-secondary:hover {
    color: white;
    background-color: #708b92;
}
.btn.btn-secondary:focus,
.btn.btn-secondary:active {
    color: white;
    background-color: #61797f;
}
.btn-check:checked + .btn.btn-secondary {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: white;
}

/* .btn-outline-primary */
.btn.btn-outline-primary {
    color: var(--main-color);
    border-color: var(--main-color);
}
.btn.btn-outline-primary:hover {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: white;
}
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active {
    border-color: var(--main-color-deep) !important;
    background-color: var(--main-color-deep) !important;
    color: white;
    outline: none;
    box-shadow: none;
}
.btn.btn-outline-primary.disabled,
.btn.btn-outline-primary:disabled {
    border-color: var(--main-color-deep);
    background-color: #a0a0a0;
    color: white;
}
.btn-check:checked + .btn.btn-outline-primary {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: white;
}

/* .btn-outline-secondary */
.btn.btn-outline-secondary {
    color: var(--gray);
    border-color: var(--gray);
}
.btn.btn-outline-secondary:hover {
    border-color: var(--gray);
    background-color: var(--gray);
    color: white;
}
.btn.btn-outline-secondary:focus,
.btn.btn-outline-secondary:active {
    border-color: var(--gray);
    background-color: var(--gray);
    color: white;
    outline: none;
    box-shadow: none;
}
.btn-check:checked + .btn.btn-outline-secondary {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: white;
}

/* btn-pale-primary */
.btn.btn-pale-primary {
    border: 1px solid var(--main-color-pale);
    background-color: var(--main-color-whitish);
    color: var(--text-color);
}
.btn.btn-pale-primary:focus,
.btn.btn-pale-primary:active {
    color: var(--text-color);
    outline: none;
    box-shadow: none;
}

/* btn-pale-secondary */
.btn.btn-pale-secondary {
    border: 1px solid var(--light-gray);
    background-color: var(--smoke-white);
    color: var(--text-color);
}
.btn.btn-pale-secondary:focus,
.btn.btn-pale-secondary:active {
    color: var(--text-color);
    outline: none;
    box-shadow: none;
}

.btn.btn-outline-primary.active {
    background-color: var(--main-color) !important;
    color: #fff;
}

.btn-processing {
    background-color: mistyrose;
    border-color: mistyrose;
}

.btn-processing:hover {
    background-color: #f9c7d3;
}

.btn-processing:focus {
    background-color: mistyrose;
}

.btn-selected {
    border: 3px solid var(--main-color) !important;
}



/* *************************************
	Form Control
************************************* */

/* input border */
.form-control.form-control-border {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    border-color: var(--dark-gray);
    box-shadow: inherit;
    line-height: 30px;
}

.form-control.form-control-border:focus {
    border-color: var(--main-color);
}

/* radio button */
.radio-btn .btn {
    height: 36px;
    border-radius: 36px;
    color: var(--main-color);
    border-color: var(--main-color);
}
.radio-btn-input:checked + .btn {
    color: white;
    border-color: var(--main-color);
    background-color: var(--main-color);
}
.radio-btn-input {
    display: none;
}

/* *************************************
	Table
************************************* */

/* tbl-bordered */
.tbl.tbl-bordered th,
.tbl.tbl-bordered tr {
    border-bottom: thin solid var(--light-gray);
}

/* hover effect */
.tbl.tbl-hover tbody tr:hover {
    background-color: var(--pale-gray);
    cursor: pointer;
}

/* *************************************
	Navigation Bar
************************************* */

/* nav-primary */
.nav-primary .nav-item {
    border: 1px solid var(--main-color);
    box-sizing: border-box;
}
.nav-primary .nav-item.active {
    background-color: var(--main-color);
}
.nav-primary .nav-link {
    color: var(--main-color-deep);
}
.nav-primary .nav-item.active .nav-link {
    color: var(--white);
}

/* *************************************
	Navigation Bar(gray)
************************************* */
.nav-gray .nav-link {
    color: var(--gray);
}

.nav-gray .nav-gray-item.active .nav-link {
    color: var(--main-color-deep);
    border-bottom: 1px solid var(--main-color-deep);
        /* 下部に1pxの実線ボーダーを設定 */
}

/* *************************************
	Pagination
************************************* */

/* pagination-primary */
.pagination.pagination-primary .page-item.active .page-link {
    color: var(--white);
    background-color: var(--main-color);
    border-color: var(--main-color);
}
.pagination.pagination-primary .page-link:hover,
.pagination.pagination-primary .page-link:focus,
.pagination.pagination-primary .page-link:active {
    color: var(--main-color-deep);
    outline: none;
    box-shadow: none;
}
.pagination.pagination-primary .page-link {
    color: var(--main-color);
}

/* *************************************
	Text Icon
************************************* */

/* required icon */
.text-icon-danger {
    color: var(--danger);
    background-color: var(--danger-pastel);
}

.text-icon-bg-danger {
    color: var(--white);
    background-color: var(--danger);
}

.text-icon-danger-light {
    color: var(--white);
    background-color: var(--danger-light);
}

.text-icon-primary-light {
    color: var(--white);
    background-color: var(--primary-light);
}

.text-icon-success {
    color: var(--white);
    background-color: var(--success);
}

.text-icon-success-light {
    color: var(--white);
    background-color: var(--success-light);
}

.text-icon-light-gray {
    color: var(--gray);
    background-color: var(--light-gray);
}

.text-icon-red {
    color: var(--white);
    background-color: red;
}

/* *************************************
	Alert
************************************* */

/* alert-primary */
.alert-primary {
    color: var(--main-color-deep);
    border: 1px solid var(--main-color-pale);
    background-color: var(--main-color-whitish);
}

/* *************************************
	Card
************************************* */

/* card */
.card {
    border-color: var(--light-gray);
}
.card.card-border-none {
    border: none;
}
.card.card-gray {
    background-color: var(--smoke-white);
}
.card.card-main-color {
    background-color: var(--main-color-whitish);
}

/* *************************************
	Common Sections
************************************* */

/* contents box (default) */
.contents-default {
    background: white;
    overflow: auto;
}

/* *************************************
	必須アイコン
************************************* */
.essential-icon {
color:red;
font-size:14px;
}
.essential-webview-icon {
color:red;
font-size:14px;
}