[v-cloak] {
    opacity: 0;
}

.loading-wrapper {
    width: 100%;
    height: 100vh;
    background-color: #e8e6e7;
    padding-top: 40vh;
}

.loading {
    /* background-color:rgb(74, 122, 161); */
    width: 60px;
    height: 60px;
    border: 5px solid #0b57ce;
    border-top-color: rgba(145, 131, 226, 0.4);
    border-radius: 50%;
    animation: spin 1.2s linear 0s infinite;
    margin: auto;
}

.loading-mini {
    width: 1rem;
    height: 1rem;
    border: 2px solid #0b57ce;
    border-top-color: rgba(145, 131, 226, 0.4);
    border-radius: 50%;
    animation: spin 1.2s linear 0s infinite;
    margin: auto;
}

.loading-inline {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid #0b57ce;
    border-top-color: rgba(145, 131, 226, 0.4);
    border-radius: 50%;
    animation: spin 1.2s linear 0s infinite;
    margin: 0 0 0 .8rem;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.loader {
    color: #0080ff;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}

.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 3.5em;
}

@-webkit-keyframes load7 {

    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

@keyframes load7 {

    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}




#processing-msg {
    /* background-color:rgb(74, 122, 161); */
    width: 60px;
    height: 60px;
    border: 5px solid #0b57ce;
    border-top-color: rgba(145, 131, 226, 0.4);
    border-radius: 50%;
    animation: spin 1.2s linear 0s infinite;
    margin: auto;
}

#processing {
    padding-top: 40vh;
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.6;
    z-index: 9000;
}

.dialog-update {
    position: fixed;
    top: 10rem;
    left: 80vw;
    font-size: .8rem;
    padding: .5rem;
    background-color: #b3c9f7ed;
    filter: drop-shadow(2px 3px 3px #696969);
    border-radius: .3rem;
    border: 1px solid #69676738;
}
.dialog-update:hover {
    background-color: #8bf8909c;
}

@media (max-width: 575px) {
    .dialog-update {
        font-size: .6rem;
        padding: .3rem;
        background-color: #ff88c0ba;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

@media print {
    .fixed-top {
        display: none;
    }

    .no-print {
        display: none;
    }
}

/*
 * common
 */

p {
    margin: 0 !Important;
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
    z-index: 999;
}

#page-top a {
    opacity: 0.8;
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 1rem 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}

#page-top a:hover {
    text-decoration: none;
    background: #999;
}

.tx-area-full {
    width: 100%;
    height: 10rem;
}

.duringDl {
    width: 20px;
    height: 20px;
    border: 3px solid #0b57ce;
    border-top-color: rgba(145, 131, 226, 0.4);
    border-radius: 50%;
    animation: spin 1.2s linear 0s infinite;
    margin-left: 1rem;
}

.nomargin {
    margin: 0 !important;
}

.nopadding {
    padding: 0 !important;
}

.small {
    font-size: 0.8rem;
    color: #656b7f;
}

.exSmall {
    font-size: 0.6rem;
    color: #656b7f;
}

.exSmall2 {
    font-size: 0.4rem !important;
}

.icon-del {
    font-size: 1.2rem;
    color: red;
    cursor: pointer;
}

input {
    border: 1px solid #ced4da;
}

.func-title {
    color: #0c51b8;
    font-size: 1.5rem;
    width: 100%;
    border-bottom: 1px solid #0c51b8;
    padding: .75rem;
}

.list-manu-area {
    padding: .5rem;
    border: 1px solid #656b7f;
    margin-bottom: 1rem;
    font-size: .8rem;
}

.lbl-st {
    position: relative;
    padding-left: 10px;
}

.lbl-st:before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;
    width: 7px;
    height: 7px;
    border: 7px solid transparent;
    border-left: 7px solid red;
}

.as-link {
    color: blue;
    cursor: pointer;
}

.as-link:hover {
    color: #800080;
}

.as-taglink {
    cursor: pointer;
    color: #8406cf;
    font-weight: bold;
    background-color: #bff4e5;
    margin: 0 .1rem;
    border-radius: .3rem;
}

.in-td {
    margin: 0 1rem 0 0;
}

.txt-humanNum {
    width: 3rem;
}

.btn-exit {
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: red;
}

.btn-login {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #fff;
    color: #6495ed;
    border: solid 2px #6495ed;
    border-radius: 3px;
    transition: .4s;
}

.btn-login:hover {
    background: #0000cd;
    color: white;
}

.btn-work {
    position: relative;
    width: 45%;
    max-height: 100%;
    border: none;
    display: inline-block;
    height: 0;
    padding-bottom: 45%;
}

.btn-work:active {
    position: relative;
    filter: opacity(0.5);
    top: 3px;
}

.btn-work span {
    position: absolute;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    top: 55%;
    left: 0;
    width: 100%;
}

.btn-startWork {
    background: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fbtn-startwork.png?alt=media&token=0f272a5c-bfeb-4a9f-8607-6a500a78964a");
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-endWork {
    background: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fbtn-endwork.png?alt=media&token=35edff39-17d5-4d7e-8ce8-a5cbdd5f2fb0");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 1rem;
}

.btn-contactAdd {
    border: none;
    background-color: transparent;
    color: #0000cd;
    font-weight: bold;
    font-size: 1.5rem;
}

.btn-contactAdd:hover {
    color: #4b0082;
}

.btn-backToList {
    border: none;
    color: red;
    font-weight: bold;
    font-size: 1.5rem;
    background: transparent;
}

.btn-st {
    background-color: #eae9e9;
    width: 8rem;
    padding: .3rem;
    border: none;
}

.btn-st:hover {
    background-color: #e0e0e0;
}

.btn-st-flex {
    background-color: #eae9e9;
    padding: .3rem;
    border: none;
}

.btn-st-flex:hover {
    background-color: #e0e0e0;
}

.btn-pink-flex {
    background-color: #e997c4;
    padding: .3rem;
    border: none;
}

.btn-blue-flex:hover {
    background-color: #83b2f8;
}

.btn-blue-flex {
    background-color: #97aae9;
    padding: .3rem;
    border: none;
}

.btn-pink-flex:hover {
    background-color: #f883e5;
}

.btn-del {
    background-color: red;
    color: #fff;
    width: 3rem;
    padding: .3rem;
    border: none;
}

.btn-del:hover {
    background-color: #ff4500;
}

.btn-del-flex {
    background-color: red;
    color: #fff;
    padding: .3rem;
    border: none;
}

.btn-del-flex:hover {
    background-color: #ff4500;
}

.btn-add-flex {
    background-color: red;
    color: #fff;
    padding: .3rem;
    border: none;
}

.btn-add-flex:hover {
    background-color: #ff4500;
}

.btn-edit {
    background-color: #042f70;
    color: #fff;
    padding: .3rem;
    border: none;
}

.btn-edit:hover {
    background-color: #0000cd;
}

.btn-edit-long {
    background-color: #042f70;
    color: #fff;
    width: 8rem;
    padding: .3rem;
    border: none;
}

.btn-print {
    background-color: #006400;
    color: #fff;
    padding: .3rem;
    border: none;
}

.btn-print:hover {
    background-color: #008000;
}

.btn-submit {
    background-color: #042f70;
    color: #fff;
    width: 8rem;
    padding: .3rem;
    border: none;
}

.btn-submit:hover {
    background-color: #0000cd;
}

.btn-download {
    background-color: #042f70;
    color: #fff;
    padding: .3rem;
    border: none;
}

.btn-download:hover {
    background-color: #0000cd;
    /* position:relative;
    top:1px;
    border-bottom:1px solid #042f70; */
}

.btn-download:active {
    position: relative;
    top: 2px;
}

.btn-green {
    background-color: #008000;
    color: #fff;
    padding: .3rem;
    border: none;
}

.btn-green:hover {
    background-color: #006400;
    /* position:relative;
    top:1px;
    border-bottom:1px solid #042f70; */
}

.btn-keihi:hover {
    background-color: #b0c4de;
}

.btn-plan-memberAdd {
    border: 1px solid #0000cd;
    background-color: transparent;
    color: #0000cd;
    font-weight: bold;
    font-size: 1.2rem;
}

.btn-plan-memberAdd:hover {
    border: 1px solid #0000cd;
    background-color: #87cefa;
    color: #3e3e63;
    font-weight: bold;
    font-size: 1.2rem;
}

.btn-plan-memberRemove {
    border: none;
    background-color: transparent;
    color: red;
    font-weight: bold;
}

.btn-newMessage {
    border: none;
    background-color: transparent;
    color: red;
    font-weight: bold;
    font-size: 2rem;
}

.btn-newMessage:hover {
    border: none;
    color: #3e3e63;
    font-weight: bold;
    font-size: 2rem;
}

.btn-addPost {
    background-color: red;
    color: #fff;
    padding: .3rem;
    border: none;
    width: 10rem;
}

.btn-addPost:hover {
    background-color: #ff4500;
}

.noticeNum {
    position: absolute;
    background-color: red;
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 2rem;
    margin-left: 1rem;
    top: 3px;
}

.noticeMsgNum {
    position: absolute;
    background-color: #ff4200;
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 2rem;
}

.noticeMsgNum-inline {
    margin: 0 !important;
    background-color: #ff4200;
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 2rem;
}

.st-back {
    margin: 0 0 1rem 0;
}

.st-update {
    margin: 0 0 2rem 0;
}

.st-regist {
    margin: 0 0 2rem 0;
}

.sel-fixedWidth {
    width: 5rem;
}

.input-3rem {
    width: 3rem;
}

.input-15rem {
    width: 15rem;
}

.st-table {
    width: 100%;
    overflow: scroll !important;
    /* white-space: nowrap; */
    font-size: 0.8rem;
    table-layout: fixed;
    word-break: break-word;
}

.st-table th {
    background-color: #ffc000;
    border: 1px solid #000;
    padding: .3rem;
    font-weight: normal;
}

.st-table td {
    border: 1px solid #000;
    padding: .3rem;
}

.st-table ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.th_blue th {
    background-color: #a6a7f7!important;
}

.st-table-noVerticalLine {
    width: 100%;
    overflow: scroll;
    font-size: 0.8rem;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

.st-table-noVerticalLine th {
    background-color: #ffc000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-weight: normal;
    padding: .3rem;
}

.st-table-noVerticalLine td {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: .3rem;
}

.st-table-fixed {
    width: 70rem;
    font-size: 0.8rem;
    table-layout: fixed;
    word-break: break-all;
}

.st-table-fixed th {
    background-color: #ffc000;
    border: 1px solid #000;
}

.st-table-fixed td {
    border: 1px solid #000;
}

.colgrp-suitou {
    width: 5rem;
    max-width: 5rem;
}

.st-table-small {
    width: 100%;
    font-size: 0.7rem;
    table-layout: fixed;
    word-break: break-word;
}

.st-table-small th {
    background-color: #ffc000;
    border: 1px solid #000;
}

.st-table-small td {
    border: 1px solid #000;
}

.st-table-wide {
    overflow: scroll !important;
    /* white-space: nowrap; */
    font-size: 0.8rem;
    word-break: keep-all;
}

.st-table-wide th {
    background-color: #ffc000;
    border: 1px solid #000;
    padding: .3rem;
    font-weight: normal;
}

.st-table-wide td {
    border: 1px solid #000;
    padding: .3rem;
}


.st-detail-table {
    width: 100%;
    overflow: scroll !important;
    /* white-space: nowrap; */
    font-size: 0.8rem;
    table-layout: fixed;
    word-break: break-word;
}

.st-detail-table th {
    background-color: #b2cf6c;
    border: 1px solid #000;
    padding: .3rem;
    font-weight: normal;
}

.st-detail-table td {
    border: 1px solid #000;
    padding: .3rem;
}

.th-blue {
    background-color: #c4d8fa !important;
}

.th-3per {
    /* width: 3%; */
}

.th-fiveper {
    width: 5%;
}

.th-tenper {
    width: 10%;
}

.th-thirtyper {
    width: 30%;
}

.th-sixtyper {
    width: 60%;
}

.updatable {
    color: #042c70 !important;
    cursor: pointer;
}

.tablet-table {
    width: 100%;
    overflow: scroll;
}

.tablet-table th {
    background-color: #ff7d43;
    font-weight: bold;
    color: #262626;
    border: 1px solid #585858;
    padding: .8rem;
}

.tablet-table td {
    border: 1px solid #585858;
    padding: .8rem;
}

.tablet-table .input-td {
    background-color: #fefee1;
}

.st-summary-table {
    overflow: scroll !important;
    /* white-space: nowrap; */
    font-size: 0.8rem;
    word-break: break-word;
}

.st-summary-table th {
    background-color: #b5e3a2;
    border: 1px solid #000;
    padding: .3rem;
    font-weight: normal;
}

.st-summary-table td {
    border: 1px solid #000;
    padding: .3rem;
}

.tbl-noline {
    border: none;
}

.tbl-noline td {
    border: none !important;
}

.tbl_manual {
    margin-top: 5rem;
    border: 1px solid #000;
}

.tbl_manual th {
    padding: .5rem;
    border: 1px solid #000;
}

.tbl_manual td {
    padding: .5rem;
    border: 1px solid #000;
}

.st-table-message {
    width: 100%;
    overflow: scroll;
    /* white-space: nowrap; */
    font-size: 0.9rem;
}

.st-table-message th {
    background-color: #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    padding: .3rem;
    font-weight: normal;
}

.st-table-message td {
    border-bottom: 1px solid #dfdfdf;
    padding: .3rem;
}

.td-15p {
    width: 15rem;
}

.td-30p {
    width: 15rem;
}

.max-table input {
    width: 100%;
}

h1 {
    padding-bottom: 9px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.red {
    color: red;
}

.backYellow {
    background-color: rgb(245, 245, 125);
}

.backGreen {
    background-color: #98fb98;
}

.backRed {
    background-color: #fbac98;
}

.rightArign {
    text-align: right;
}

.nav {
    flex-wrap: nowrap !important;
}

body {
    /* padding-top: 3.5rem; */
}

.totalcol {
    color: red;
}

.space-row {
    margin-top: 2rem;
}

.space-row-1 {
    margin-top: 1rem;
}

/* ログイン画面 */

.login-body {
    padding: 0;
    width: 100vw;
}

.login-wrapper {
    display: flex;
    background-color: #eeeeee;
}

.login-header {
    width: 100%;
    margin: 0;
    background-color: #eeeeee;
    padding: .5rem 0;
    font-weight: bold;
}

.login-header img {
    display: block;
    margin: auto;
}

.login-header p {
    text-align: center
}

.login-verticalLine {
    width: 100%;
    margin: 0;
    padding: .5rem 0;
}

.line-darkblue {
    background-color: #042f70;
    color: #fff;
}

.line-blue {
    background-color: #6b99c8;
    color: #fff;
}

.line-black {
    background-image: url("../img/footer-back.jpg");
    color: #fff;
    height: 5rem;
}

.login-verticalLine p {
    text-align: center;
    margin: 0;
    padding: .3rem 0;
}

.login-box {
    width: 25rem;
    margin: 0 auto;
    padding: 2rem;
}

.login-box input {
    border: 1px solid #6495ed;
}

.login-box label {
    margin: auto;
    display: block;
    margin: 0;
    font-size: .9rem;
}

.login-info-box {
    width: 28rem;
    margin: .2rem auto;
    padding: .5rem;
}

.login-info-lastBox {
    margin-bottom: 5rem;
}

.login-info-box span {
    color: red;
    margin-left: .3rem;
}

.login-info-gray {
    background-color: #cfcfcf;
}

.login-info-lightgray {
    background-color: #efefef;
}

.login-bnr-box {
    padding: .3rem 0;
}

.login-bnr-box img,
p {
    display: block;
    margin: auto !important;
}

.login-bnr-box span {
    text-align: center;
    display: block;
    color: #8e8971;
    font-size: .9rem;
    padding-top: 4rem;
}

#langToggle {
    color: #007bff;
    cursor: pointer;
}

/* ログイン画面END */

/*
   * メニューバー
   */

@media (min-width: 768px) {
    .st-main {
        position: absolute;
        top: 9.0rem;
        padding-bottom: 4rem;
    }

    .navbar-black-innner {
        display: flex;
    }

    #navbar-top .nav-item a {
        height: 2rem;
        text-decoration: none;
        text-align: center;
        color: #fff;
        padding: 0;
        padding: .5rem;
    }

    .nav-top-info {
        display: flex;
        flex-direction: row;
        padding: 0 0 0 0;
    }

    .nav-top-info a {
        text-decoration: none;
        color: #fff;
    }

    .navTop-info {
        color: #fff;
        margin: 0;
        font-size: 0.8rem;
    }

    .nav-stTop {
        /* position: fixed; */
        top: 0px;
        right: 0;
        left: 0;
        z-index: 1030;
        height: 3rem;
    }

    .nav_blue {
        border-right: 1px solid #eee;
        background-color: #0b57ce;
        width: 100%;
        z-index: 1090;
    }

    .nav_blue .nav-item {
        width: 6.5rem;
        height: 5.8rem;
    }

    .nav_blue .nav-item+.nav-item {
        margin-left: 0;
    }

    .nav_blue .nav-link {
        border-radius: 0;
    }

    .nav-item {
        font-size: 0.75rem;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .nav-item a {
        height: 100%;
        text-decoration: none;
        text-align: center;
        color: #fff;
        padding: 0;
        padding-top: 3.5rem;
        display: block;
    }

    .dropdown-toggle {
        height: 100%;
        padding-top: 3.5rem;
    }

    .dropdown-toggle::after {
        border: none !important;
        margin: 0 !important;
        content: none !important;
    }

    .dropdown-menu {
        color: #fff;
        background-color: #404040;
        opacity: 0.7;
        position: absolute;
        transform: translate3d(-0px, 5rem, 0px) !important;
        top: 0px;
        left: 0px;
        will-change: transform;
    }

    .dropdown-item {
        padding: 0 !important;
    }

    .dropdown a {
        width: 6.5rem;
        text-decoration: none;
        text-align: center;
        color: #fff;
    }

    .nav-item {
        background-color: #0b57ce;
    }

    .nav-item .active {
        background-color: #0b57ce !important;
        opacity: 0.6;
    }

    .nav-manage {
        background-color: #042f70;
    }

    .nav-manage .active {
        background-color: #042f70 !important;
        opacity: 0.6;
    }

    #nav-dakokuTop {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Ftop.png?alt=media&token=108adf21-06af-43c8-9c50-3ffff4659ec5");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-mypage {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fmypage.png?alt=media&token=c9fae30e-6623-4dd4-9ed3-4d522c40b498");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-aplList {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fapproval.png?alt=media&token=b4131c7f-ba3b-45d2-a233-ba822a65ba4a");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-keihiList {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fkeihilist.png?alt=media&token=a3b06365-c665-427d-9326-945bc2628d45");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-dakokuMyList {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fdakokulist.png?alt=media&token=fead52ed-afe3-4181-aa06-3ded7d20b519");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-reportMyList {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Freportlist.png?alt=media&token=d2a7a18d-fe83-4d7b-a6ee-922ee73e9182");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-dakokuList {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fdakokulist.png?alt=media&token=fead52ed-afe3-4181-aa06-3ded7d20b519");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-reportList {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Freportlist.png?alt=media&token=d2a7a18d-fe83-4d7b-a6ee-922ee73e9182");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-workplace {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fworkplace.png?alt=media&token=0a535e68-7bad-47eb-95e8-4f4f159703df");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-deduraMember {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fdeduramember.png?alt=media&token=f5651a68-8353-489c-aad7-09595c911be8");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-loginMember {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Floginmember.png?alt=media&token=144b2695-a74f-4817-945e-92cf15a687c6");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-equipment {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fequipment.png?alt=media&token=2f84f6e2-6fd6-439b-88b4-925d8bf04629");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-settings {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fconfig.png?alt=media&token=d103ce1b-ca57-4de9-befc-e06e2f8d2544");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-salary {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2Fsalary.png?alt=media&token=0268e251-b9bd-4ac0-95b7-09f6e6926280");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    #nav-stMenu {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/strivenippou.appspot.com/o/imgHosting%2FstMenu.png?alt=media&token=3e74e7b3-0462-43e7-b5db-d51d66e105c8");
        background-repeat: no-repeat;
        background-position: 50% 25%;
    }

    .parentNav ul {
        display: none;
        position: absolute;
        padding: 0;
        width: 6.5rem;
    }

    ul.parentNav ul li {
        color: #fff;
        background-color: #5e646e;
        list-style: none;
        padding: .3rem;
    }

    /* ul.parentNav li:hover ul {
        display: block;
    } */
}

@media (min-width: 1480px) {
    .st-main {
        position: absolute;
        top: 8.5rem;
    }
}

@media (min-width:576px) and (max-width: 767px) {
    .st-main {
        position: absolute;
        top: 9.5rem;
    }

    .navbar-black-innner {
        display: flex;
    }

    .navbar-black-innner {
        display: flex;
    }

    #navbar-top .nav-item a {
        height: 2rem;
        text-decoration: none;
        text-align: center;
        color: #fff;
        padding: 0;
        padding: .5rem;
    }

    .nav-item a {
        font-size: 0.75rem;
    }

    .nav-top-info {
        display: flex;
        flex-direction: column;
        width: 10rem;
        padding: 0 0 0 0;
    }

    .nav-top-info a {
        text-decoration: none;
        color: #fff;
    }

    .navTop-info {
        color: #fff;
        margin: 0;
        font-size: 0.8rem;
    }

    .nav-stTop {
        /* position: fixed; */
        top: 0px;
        right: 0;
        left: 0;
        z-index: 1030;
        height: 3rem;
    }

    .nav_blue {
        border-right: 1px solid #eee;
        background-color: #0b57ce;
        width: 100%;
        z-index: 1090;
    }

    .nav_blue .nav-item+.nav-item {
        margin-left: 0;
    }

    .nav_blue .nav-link {
        border-radius: 0;
    }

    .nav-item a {
        color: #fff;
        font-size: 0.6rem;
        padding: 1rem .5rem;
    }

    .dropdown-menu {
        color: #fff;
        background-color: #404040;
        opacity: 0.7;
        position: absolute;
        transform: translate3d(-0px, 5rem, 0px) !important;
        top: 0px;
        left: 0px;
        will-change: transform;
    }
}

@media (max-width: 575px) {
    .nav-top-info {
        display: none;
    }

    .st-main {
        position: absolute;
        top: 3rem;
    }

    .st-table {
        width: 200%;
        font-size: 0.8rem;
        table-layout: auto;
        white-space: nowrap;
    }

    .st-table-fixed {
        width: 200%;
        font-size: 0.7rem;
        table-layout: auto;
        white-space: nowrap;
    }

    .st-table-fixed th {
        width: 5rem;
        max-width: 5rem;
    }

    .colgrp-suitou {
        width: 6rem;
        max-width: 6rem;
    }

    .noticeNum {
        position: relative;
        background-color: red;
        color: #fff;
        padding: 0.1rem 0.3rem;
        border-radius: 2rem;
        margin-left: 1rem;
    }

}

/* TOP画面 */

.dakokuBlueArea {
    background-color: #6b9ac8;
    color: #fff;
}

.dakokuBlue-dispInfoArea {
    padding: 2rem 0 0 0;
}

.dakokuBlue-dispUserName {
    font-size: 1rem;
    border-bottom: 1px solid #2665a8;
}

.dakokuBlue-dispDate {
    font-size: 1rem;
    margin-bottom: 0;
}

.dakokuBlue-dispTime {
    font-size: 2.5rem;
}

.dakokuDarkBlueArea {
    background-color: #0b5197;
    color: #fff;
    margin: 0 -15px;
    padding: 0.5rem;
}

.dakokuBlue-menuItem {
    padding: 1rem 0;
    font-size: 0.8rem;
    border-bottom: 1px solid #2665a8;
}

.dakokuBlue-menuItem a {
    text-decoration: none;
    color: #fff;
}

.sub-menu-area {
    height: 4.5rem;
    background-color: #f3f3f3;
    margin: 0 -15px;
    padding: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #bfbfbf;
}

.dispLatestDakokuArea {
    margin: 2rem 0 0 0;
}

.dispLatestDakokuArea p {
    margin: 0;
    font-size: 0.8rem;
    color: #3890ea;
}

.shukkinArea {
    padding-top: 1.5rem;
}

.tbl-shukkinTop {
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
    margin-bottom: 3rem;
    background-color: transparent;
    table-layout: fixed;
}

.tbl-shukkinTop th {
    background-color: #ffc000;
    border: #000000 solid 1px !important;
    padding: 0.45rem;
}

.tbl-shukkinTop td {
    border: #000000 solid 1px !important;
    padding: 0.45rem;
}

.tbl-shukkinTop .th-status {
    width: 6rem;
}

@media (max-width: 575px) {
    .fixed-top {
        max-width: 100vw !important;
    }

    .tbl-shukkinTop {
        font-size: 0.6rem;
        width: 100%;
        max-width: 100%;
        margin-bottom: 3rem;
        background-color: transparent;
        table-layout: fixed;
    }

    .tbl-shukkinTop th {
        background-color: #ffc000;
        border: #000000 solid 1px !important;
        padding: 0.1rem;
    }

    .tbl-shukkinTop td {
        border: #000000 solid 1px !important;
        padding: 0.1rem;
    }

    .tbl-shukkinTop .th-status {
        width: 5rem;
    }

    .img-shukkin {
        width: 4rem;
    }

    .img-taikin {
        width: 4rem;
    }

    .shukkinArea {
        font-size: 0.8rem;
    }

}

.inputReport {
    background-color: #e8e6e7;
}

.inputKeihi {
    background-color: #e8e6e7;
}

.inputApl {
    background-color: #e8e6e7;
}

.setOrder {
    background: none;
    border: none;
    color: blue;
}

.above-tbl-area {
    margin: 0 0 1rem 0;
}

/* 経費 */

.th_total {
    color: #ff4500;
    background-color: transparent !important;
}

.keihi-cal-manu-area {
    padding: 3rem 0 0 2rem;
    display: flex;
}

.keihi-cal-area {
    display: flex;
}

.keihi-cal-dispNendo {
    width: 20%;
}

.keihi-cal-btnArea {
    width: 100%;
}

.keihi-cal-dlArea {
    width: 20%;
}

.area-tbl {
    margin-top: 1rem;
}

.tbl-keihi-data {
    margin-top: 1rem;
    width: 100%;
}

.tbl-keihi-data th {
    border: 1px solid #000;
    font-weight: normal;
    padding: 0.3rem;
}

.tbl-keihi-data td {
    border: 1px solid #000;
    /* height:2rem; */
    width: 4rem;
    padding: 0.3rem;
}

.tbl-keihi-data-firstRow {
    background-color: #ffc000;
}

.tbl-kekhi-data-leftTh {
    width: 5rem;
}

.tbl-kekhi-data-totalTh {
    background-color: #ffc000;
}

.tbl-keihi-data-dataCol p {
    padding: 0;
    margin: 0;
    text-align: right;
}

.saturday {
    color: blue;
}

.sunday {
    color: red;
}

.today {
    background-color: #ff4500;
}

/* Placeholders */

.placeholders {
    padding-bottom: 3rem;
}

.placeholder img {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.v-enter-active,
.v-leave-active {
    /* transition: opacity .5s */
    will-change: opacity;
    transition: opacity 125ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.v-enter,
.v-leave-to {
    opacity: 0
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1.5s
}

.fade-enter-active {
    opacity: 0;
}

.fade-leave-active {
    opacity: 0;
}

.th_date {
    width: 10%;
}

.th_reporter {
    width: 10%;
}

.wkName {
    width: 20rem;
}

.link_dispEdit {
    font-size: 12px;
    color: #0000cd;
}

.link_dispEdit:hover {
    color: #E48E00;
    text-decoration: underline;
}

.upload-area {
    position: relative;
}

.st-reportTable {
    width: 100%;
    margin: 25px 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    border-radius: 3px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    overflow: scroll;
    white-space: nowrap;
    font-size: 0.8rem;
}

.st-reportTable th {
    border: 1px solid #000;
    padding: .3rem;
    background-color: #ffc000;
    font-weight: normal;
}

.st-reportTable td {
    border: 1px solid #000;
    padding: .3rem;
}

.st-reportTable .tdAbove {
    /* border-bottom:1px solid; */
}

.st-reportTable .tdFixed {
    /* border-bottom:1px solid; */
    color: #ff0000;
}

.dl-table {
    display: none;
}

.tbl-st-detail {
    margin: 3rem 0 .5rem 0;
}

.tbl-st-detail th {
    border: 1px solid #000;
    padding: .5rem;
    font-weight: normal;
    background-color: #ffc000;
}

.tbl-st-detail td {
    border: 1px solid #000;
    padding: .5rem;
}

.tbl-st-print {
    width: 90%;
    margin: 3rem;
}

.tbl-st-print th {
    border: 1px solid #000;
    padding: 1.5rem;
    font-weight: normal;
    background-color: #ffc000;
}

.tbl-st-print td {
    border: 1px solid #000;
    padding: 1.5rem;
}

.form-control[disabled] {
    background-color: #dcdcdc !important;
}

.modal-mask {
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    /* 初期表示時用一時対応 */
    display: table;
    /* display: none; */
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.modal-container {
    width: 300px;
    max-height: 70vh;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    font-family: Helvetica, Arial, sans-serif;
}

.modal-content {
    max-height: 80vh !important;
}

.modal-body {
    overflow: scroll !important;
}

.modal-header {
    background-color: #ffc000 !important;
}

.modal-header h3 {
    margin-top: 0;
}

.modal-default-button {
    float: right;
}

/*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
   * by Vue.js.
   *
   * You can easily play with the modal transition by editing
   * these styles.
   */

.modal-enter .modal-leave-to {
    opacity: 0.8;
    transform: translateY(-100vh) translateX(-100vh);
}

.modal-leave-active .model-enter-active{
    /* opacity: 0; */
    transform: translate(0px, 0px); 
    transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.modal-mask-max {
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s ease;
    overflow: scroll;
}

.modal-dialog-max {
    max-width: 90vw;
    margin: 1.75rem auto;
    padding: 1rem;
    background-color: #fff;
}

.txarea-high {
    height: 15rem !important;
    font-size: 0.8rem;
}

/* 現場メンバー */

.dm-textarea {
    width: 100%;
    height: 5rem;
}

/* 要望 */

.userRequest-textarea {
    width: 100%;
}

/* マイページ */

.newMsg {
    color: red;
    font-weight: bold;
}

.userIcon {
    width: 30px;
    height: 30px;
}

.newmessage-area {
    margin: 1rem 0;
    /* display:flex; */
}

.newpost-area {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
}

.newpost-area input {
    padding: .3rem 0;
}

.newpostText {
    width: 50rem;
    height: 20vh;
}

.message-title {
    font-size: 1.4rem;
    margin: 1rem 0;
    color: #404040;
    border-bottom: 1px solid #8bbde7;
}

.message-title input {
    width: 80%;
}

.message-memo {
    font-size: 0.8rem;
    margin: .4rem 0;
    color: #404040;
}

.message-memo input {
    width: 80%;
}

.message-info-area {
    padding: .3rem;
}

.mypage-dispMode {
    background-color: #f6f6f6;
    padding: .2rem 0;
}

.mypage-dispMode span {
    margin: 3rem;
}

.messageListHeader {
    padding: .3rem;
    height: 8vh;
}

.tbl-message {
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
    margin-bottom: 3rem;
}

.tbl-message td {
    border-bottom: #c0c0c0 solid 1px !important;
    padding: 0.45rem 0 0.45rem 0;
}

.td-post {
    padding: .45rem 0 .45rem .2rem;
    background-color: #b3e1f759;
}

.tdchecked {
    background-color: #56fcb759;
}

.tblshime {
    background-color: #dfdfdf;
}

.pt_small {
    margin: 1rem;
}

.num_report_eq {
    width: 3rem;
}

.eq_checkbox_wrapper {
    display: flex;
    flex-wrap: wrap;
}

.eq_checkbox {
    font-size: 0.8rem;
    width: 48%;
    background-color: #fffaf0;
    margin: 0.2rem;
    padding: 0.2rem;
}

.input-date {
    /* background-color:#ffe4e1; */
    border: 1px solid #000;
}

/* 勤務地 */

.btnarea-abovetbl {
    display: flex;
    margin: .3rem 0;
}

.priceList-leftarea {
    width: 60%;
}

.priceList-uploadarea {
    width: 40%;
}

/* 給与 */

.btnArea-salary {
    padding: .3rem;
}


/* 議事録 */

.minutesText {
    height: 30rem;
    width: 100%;
}

.minute-table th {
    width: 10%;
}

.minute-table input {
    width: 100%;
}

.participants {
    height: 3rem;
    width: 100%;
}

.agenda {
    height: 6rem;
    width: 100%;
}

.progressText {
    height: 60rem;
    width: 100%;
}

.decision {
    height: 12rem;
    width: 100%;
}

.nextMeeting {
    height: 3rem;
    width: 100%;
}

.txArea-exSmall {
    height: 2rem;
    width: 100%;
}

.txArea-small {
    height: 5rem;
    width: 100%;
}

.txArea-middle {
    height: 10rem;
    width: 100%;
}

.txArea-large {
    height: 15rem;
    width: 100%;
}


/* 店舗運営 */

.sttabs {
    background-color: #fff;
    margin-top: .3rem;
    display:flex;
}

.sttab_item {
    border-bottom: 2px solid #f67417;
    line-height: 2rem;
    text-align: center;
    color: #1e1e1e;
    text-align: center;
    padding: 0 .6rem;
    transition: all 0.2s ease;
    font-size:.7rem;
    margin: 0 .2rem;
}

.sttab_item:hover {
    border-bottom: 2px solid #5389fd;
    background-color: #f0f0f0;
}

.sttab_item_selected {
    border-bottom: 2px solid #175cf6;
    background-color: #bec4fe;
}

.groupName {
    font-size: 2rem;
    background-color: #dedede;
    padding: .4rem;
    border-radius: 3px;
}

.btn-groupDakoku {
    display: block;
    width: 160px;
    padding: 0.8em;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    border-radius: 3px;
    transition: .4s;
    margin: auto;
}

.btn-grStart {
    color: #fff;
    background-color: #22a801;
    border: 1px solid #22a801;
}

.btn-grEnd {
    color: #fff;
    background-color: #fa4756;
    border: 1px solid #fa4756;
}

.graphArea {
    padding: 1rem;
    width: 100vw;
    display: flex;
}

.tbl-graph {
    margin: 1rem auto;
}

.tbl-graph th {
    font-weight: normal;
    background-color: #e4e4e4;
    color: #3a3a3a;
    border: 1px solid #3a3a3a;
    padding: .3rem;
}

.tbl-graph td {
    color: #3a3a3a;
    border: 1px solid #3a3a3a;
    padding: .3rem;
}

.graphLabel {
    font-size: 2rem;
    color: #585858;
    font-weight: bold;
    display: inline;
}

.graphInnerArea {
    position: relative;
    width: 48vw;
}

.graphInnerArea label {
    font-size: 2rem;
    color: #585858;
    font-weight: bold;
    display: inline;
}

@media (max-width: 960px) {
    .graphArea {
        padding: 0;
        width: 100vw;
        flex-direction: column;
    }

    .graphInnerArea {
        position: relative;
        width: 100vw;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .sttabs {
        display: inline;
    }
}

.hoverUpdIcon {
    /* opacity:0; */
}

.hoverUpdIcon:hover {
    cursor: pointer;
    /* font-size:0.8rem; */
    /* opacity:1; */
    background-color: #ffa500;
}

.noHover:hover {
    cursor: none !important;
    background-color: transparent !important;
}

.clickArea {
    width: 100%;
    height: 100%;
}

.tbl-shift-data {
    margin-top: 1rem;
    width: 100%;
}

.tbl-shift-data th {
    border: 1px solid #000;
    font-weight: normal;
    padding: 0.3rem;
}

.tbl-shift-data td {
    border: 1px solid #000;
    /* height:2rem; */
    width: 4rem;
    padding: 0.3rem;
}

.tbl-shift-data-firstRow {
    background-color: #ff7d43;
    font-weight: bold;
}

.tbl-shift-data-leftTh {
    width: 5rem;
}

.tbl-shift-data-totalTh {
    background-color: #ff7d43;
}

.tbl-shift-data-dataCol p {
    padding: 0;
    margin: 0;
    text-align: center;
}

/* invoice */

.invoice-summary-area {
    display: flex;
    /* height:18rem; */
}

.invoice-summary-title {
    border: 1px solid #a1a1a1;
    background-color: #ebebeb;
}

.invoice-summary-title div {
    padding: .2rem;
    border-bottom: 1px solid #a1a1a1;
    background-color: #ebebeb;
    font-size: .8rem;
    min-width: 4.5rem;
    height: 1.6rem;
}

.invoice-summary-title div:last-child {
    border: none;
}

.invoice-summary {
    border-top: 1px solid #a1a1a1;
    border-right: 1px solid #a1a1a1;
    border-bottom: 1px solid #a1a1a1;
}

.invoice-summary div {
    padding: .2rem;
    border-bottom: 1px solid #a1a1a1;
    font-size: .8rem;
    height: 1.6rem;
}

.invoice-summary div:last-child {
    border: none;
}

.invoice-summary-loading-wrapper {
    max-height: 16.24rem;
}

.invoice-summary-loading {
    width: 16.24rem;
    height: 16.24rem;
    border: 3px solid #0b57ce;
    border-top-color: rgba(145, 131, 226, 0.4);
    border-radius: 50%;
    animation: spin 1.2s linear 0s infinite;
    margin: auto;
}

.chk-20px {
    width: 20px !important;
}
.custlist label {
    margin-right: 1rem;
}

.slipDetail {
    margin: 0 !important;
}

/* transition */

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

    {
    opacity: 0;
}

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?9p3f3g');
    src:  url('../fonts/icomoon.eot?9p3f3g#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?9p3f3g') format('truetype'),
      url('../fonts/icomoon.woff?9p3f3g') format('woff'),
      url('../fonts/icomoon.svg?9p3f3g#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }


  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-home:before {
    content: "\e900";
  }
  .icon-calendar:before {
    content: "\e953";
  }
  .icon-undo2:before {
    content: "\e967";
  }
  .icon-bubbles4:before {
    content: "\e970";
  }
  .icon-user-plus:before {
    content: "\e973";
  }
  .icon-bin:before {
    content: "\e9ac";
  }
  .icon-question:before {
    content: "\ea09";
  }
  .icon-plus:before {
    content: "\ea0a";
  }
  .icon-minus:before {
    content: "\ea0b";
  }
  .icon-cross:before {
    content: "\ea0f";
  }
  .icon-checkmark:before {
    content: "\ea10";
  }
  .icon-stop2:before {
    content: "\ea1e";
  }
  .icon-backward2:before {
    content: "\ea1f";
  }
  .icon-forward3:before {
    content: "\ea20";
  }
  .icon-spinner11:before {
    content: "\e984";
  }
  .icon-search:before {
    content: "\e986";
  }