/*
8px	0.571428571rem
10px	0.714285714rem
11px	0.785714286rem
12px	0.857142857rem
13px	0.928571429rem
14px	1rem
15px	1.071428571rem
16px	1.142857143rem
18px	1.285714286rem
20px	1.428571429rem
21px	1.5rem
22px	1.571428571rem
24px	1.714285714rem
28px	2rem
32px	2.285714285rem
36px	2.571428571rem
38px	2.714285714rem
39px	2.7857142857rem
40px	2.857142857rem
*/

html {
    /* font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif; */
    font-family: "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
}

body {
    /* font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif; */
    font-family: "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
    color: #000;


}

.app-main {
    padding-bottom: 80px;
}

/**bootstrap************************/
.btn {
    box-shadow: none;
}

.btn-sm {
    font-size: .75rem !important;

}

.btn-xs {
    font-size: 0.714285714rem !important;
    padding: .3rem .4rem;
    margin: 0;
    line-height: 1;
}

.form-select, .form-control {
    height: 25px;
    width: auto;
    min-width: 240px;
    font-size: 0.785714286rem !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
}


.select_search, select {
    height: 25px;
    font-size: 0.857142857rem;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single {
    height: 25px;
    font-size: 0.857142857rem;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
}

.select2-selection__rendered, .select2-search__field, .select2-results__option {
    font-size: .75rem !important;
}

.bg-secondary {
    background-color: #ddd !important;
}

.btn-outline-secondary {
    border-color: #ccc !important;

}

/**font************************/
.fs-10 {
    font-size: 0.714285714rem;
}

.fs-11 {
    font-size: 0.785714286rem;
}

.fs-12 {
    font-size: 0.857142857rem;
}

.fs-14 {
    font-size: 1rem;
}

.fs-16 {
    font-size: 1.142857143rem;
}

.fs-18 {
    font-size: 1.285714286rem;
}

.fw-700 {
    font-weight: 700;
}

.fw-900 {
    font-weight: 900;
}

.noto_sans {
    font-family: 'Noto Sans JP', sans-serif !important;
}

.fa-solid:not(.fa-bars) {
    padding-top: .27rem;
    padding-right: .3rem;
}

input::placeholder {
    color: #aaa !important;
    font-size: .75rem !important;
}

/**nav************************/


.nav-item a p, .nav-item a i {
    color: #fff;
    font-size: 0.785714286rem
}

.nav-item a p {
    font-family: 'Noto Sans JP', sans-serif !important;
    /* font-weight: 500; */
}

/**card************************/
.card-header {
    padding: .7rem 1rem .5rem 1rem;

}

.card-title {
    font-family: 'Noto Sans JP', sans-serif !important;
    /* line-height: 1; */
    font-size: 0.857142857rem;
    font-weight: bold;
    /* max-height:10px; */
    /* padding: 0; */
    padding-top: .2rem;
    font-weight: 500;
}

.card-body, .table td, .table th {
    /* 10px */
    font-size: 0.72rem;
    color: #333 !important;
    /* padding: .5rem; */
    /* min-height: 200px !important; */
}

.app-footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
}


/* アラート */
.alert {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 1rem auto;
    font-size: 0.75rem !important;
    /* border: 1px solid #ff1e00 !important; */
    background-color: #fff0e7 !important;
    color: #ff1e00 !important;
    z-index: 1000 !important;
    width: 90%;
    background: rgba(255, 240, 231, 0.9) !important;
}


/** ローディングの背景部分のCSS **********************************************************/
.loader_bg {
    background: #000;
    opacity: 0.6;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999999998 !important;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader {
    margin: 20% auto;
    font-size: 5px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

:disabled {
    opacity: .3 !important;
}


.blink {
    animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

a.disabled {
    opacity: .5;
    cursor: none;
    pointer-events: none;
}

.datepicker {
    text-align: center;
    min-width: 120px !important;
    width: 120px !important;
}