:root {
    --btn-font-size: 16px;
    --table-font-size: 16px;
    --search-name-font-size: 16px;
    --search-date-font-size: 14px;
    --search-name-line-height: 1.8em;
    --search-item-margin: 10px;
    --btn-height: 2em;
    --radio-font-size: 16px;
    --margin: 6px;
    --tr-height: 34px;
    --input-height: 32px;
    --input-font-size: 16px;
    --table-padding: 6px;
    --table-header-background:#B5BEE7;
    --sub-header-background:#9DC3E6;
    --table-header-background-light:#D9E1F2;
    --footer-font-size:12px;
    --phone-footer-font-size:8px;
    --smaller-font-size:13px;
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

#wrap {
    min-height: 99.9%;
    height: 99.9%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* .container {
    flex: auto;
    padding: 0em 10%;
} */

header {
    height: 4.5em;
    min-height: 4.5em;
    padding: 0.5em;
    margin-bottom: 0%;
    line-height: 0.1em;
    background: #003399;
    color: white;
    display: flex;
    justify-content: space-between;
}

phoneHeader {
    height: 3em;
    min-height: 3em;
    padding: 0.5em 0em;
    margin-bottom: 0%;
    line-height: 0.1em;
    background: #003399;
    color: white;
    display: flex;
    text-align: center;
}

/* input[type="date"] {
    -webkit-appearance:none;
    width: 40%;
    font-size: 12px;
} */

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}





/*  */
@media screen and (min-width: 0px) and (max-width:991px) {
    html {
        touch-action: none;
        touch-action: pan-y;
        font-family: 'Montserrat', sans-serif;
    }

    header {
        display: none;
    }

    footer {
        display: none;
    }

    .container {
        flex: auto;
        padding: 1em 1%;
    }

    .container_common{
        flex: auto;
        padding: 1em 1%;
        margin-top: -120px;
        z-index: -1;
    }
    .footer_div {
        color: black;
        font-size: var(--phone-footer-font-size);
        width: fit-content;
    }

    .footer_div p {
        margin-left: 10px;
    }

    .p_header_title {
        width: 30%;
        display: flex;
        margin-top: 0.2em;
    }

    .right_header {
        height: 100%;
        text-align: center;
        display: flex;
        width: 70%;
        justify-content: flex-end;
    }

    .header_sub_title {
        display: flex;
        flex-direction: column;
        height: 100%;
        flex: 1;
    }

    .header_sub_title_flex2 {
        display: flex;
        flex-direction: column;
        height: 100%;
        flex: 2;
    }

    .sub_title_span {
        font-size: 8px;
        margin-top: 8px;
        /* width: 90%; */
        /* display: inline-block; */
        vertical-align:bottom;
        white-space: nowrap;
        /* overflow: hidden; */
        text-overflow: ellipsis;
    }


    .p_title {
        font-weight: bold;
        margin: 0.5em;
        font-size: 18px;
        word-break: keep-all;
    }

    .p_sub_title_phone {
        height: 4em;
        width: 100%;
        display: flex;
        margin-top: 0;
        background-color: #003399;
        /* flex-direction: column; */
        /* z-index: 101; */
        /* position: absolute; */
    }
    .p_sub_title {
        height: 2em;
        width: 100%;
        display: flex;
        margin-top: 0;
        background-color: #003399;
        /* flex-direction: column; */
        /* z-index: 101; */
        /* position: absolute; */
    }

    subHeader{
        height: 2em;
        min-height: 2em;
        padding: 0em;
        margin-bottom: 0%;
        margin-top: 0.1em;
        line-height: 0.1em;
        background: #003399;
        color: white;
        display: flex;
        text-align: center;
    }
    subHeader_phone{
        height: 4em;
        min-height: 2em;
        padding: 0em;
        margin-bottom: 0%;
        margin-top: 0.1em;
        line-height: 0.1em;
        background: #003399;
        color: white;
        display: flex;
        text-align: center;
    }
    .subTitle_30{
        flex: 25%;
    }
    .subTitle_40{
        flex: 50%;
    }
    .width_50{
       width: 50%; 
    }
    .width_30{
        width: 30%; 
    }
    .width_40{
        width: 30%; 
     }

    #navi_bar {
        display: flex;
        flex-wrap: wrap;
        /* margin-top: 1em; */
        list-style: none;
        font-size: var(--input-font-size);
        flex-direction: row;
        width: 100%;
    }
    .navi_bar_phone {
        display: flex;
        /* margin-top: 1em; */
        list-style: none;
        font-size: var(--input-font-size);
        flex-direction: row;
        width: 100%;
    }

    #navi_bar div {
        /* flex: 1; */
        border: #ffffff 1px solid;
        text-align: left;
        line-height: 2em;
        padding-left: 0.5em;

    }

    #navi_bar div a {
        color: #ffffff;
        text-decoration: none;
    }

    .flex1 {
        flex: 1;
    }

    .flex2 {
        flex: 2;
    }

    #fileUpload {
        width: 96%;
        margin-top: 2em;
        margin-left: 2%;
        text-align: left;
        background-color: #ffffff;
        display: none;
        flex-direction: column;
        list-style: none;
        color: #000000;
        position: absolute;
        z-index: 2;

    }

    #fileUpload div {
        flex: 1;
        line-height: 2em;
        text-align: left;
        border: #7F7F7F 1px solid;
    }
    #fileUpload div a {
        margin-left: 1em;
        color: #000000;
        font-weight: bold;
        text-decoration: none;
    }
    #copyContact {
        width:96%;
        margin-left: 2%;
        margin-top: 2em;
        display: none;
        text-align: left;
        background-color: #ffffff;
        flex-direction: column;
        list-style: none;
        color: #000000;
        position: absolute;
        z-index: 2;

    }

    #copyContact div {

        line-height: 2em;
        text-align: left;
        border: #7F7F7F 1px solid;
    }

    #copyContact div a {
        margin-left: 1em;
        color: #000000;
        font-weight: bold;
        text-decoration: none;

    }
    .sub_header_div{
        background-color: var(--sub-header-background);
        color: #ffffff;
        padding-left: 10px;

    }

    /* ツールチップ本体 */
    div.tgToolTip {
        margin: 0;
        background-color: white;
        border: 3px solid #000;
        color: black;
        border-radius: 5px;
        -moz-border-radius: 5px;
        min-height: 1em;
        top: 40px;
        right: 13%;
        display: none;
        position: absolute;
        z-index: 100;
        height: auto;
        text-align: left;
    }

    div.tgToolTip div {
        margin: 15px;
    }


    .dummy {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
    }
    #alertPanel #panel {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 90%;
        height: fit-content;
        max-height: 80%;
        background-color: white;
        padding: 5%;
        box-shadow: 2px 2px 2px #6c757d;
        text-align: center;
    }
    #confirmPanel .buttonClose {
        position: absolute;
        margin: 12px 18% 20px 10px;
        bottom: 0;
        right: 0;
        width: 30%;
        height: 36px;
        border-radius: 5px;
    }
    
    #confirmPanel .buttonOk {
        position: absolute;
        margin: 12px 10px 20px 18%;
        bottom: 0;
        left: 0;
        width:30%;
        height: 36px;
        border-radius: 5px;
    }
    
    #alertPanel button {
        /* position: absolute; */
        /* margin: 12px 40% 20px 10px; */
        margin-top: 30px;
        bottom: 0;
        right: 0;
        width: 20%;
        height: 36px;
        border-radius: 5px;
    }

    #confirmPanel #panelConfirm {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 80%;
        height: 280px;
        background-color: white;
        padding: 5%;
        box-shadow: 2px 2px 2px #6c757d;
    }

    pfooter {
        margin-top: 10px;
        min-height: 59px;
        height: 59px;
        line-height: 59px;
        color: #837280;
        display: flex;
        justify-content: center;
    }

    .logo {
        background: #ffffff url('../resources/img/title_new.gif') no-repeat 4% 1em;
        background-size: 50px;
        width: 50px;
    }
    
    pfooter ul li {
        display: table-cell;
        padding-left: 10px;
        padding-right: 10px;
        border-right: 1px solid rgba(120,97,66,.8);
        /* text-align: center; */
    }
    pfooter ul {
        display: table;
        /* table-layout: fixed; */
        margin: 5px 0;
       line-height: 1.5;
    }
    pfooter ul li:last-child {
        padding-right: 0;
        border-right: none;
    }
    .pb-0{
        padding-bottom: 0 !important;
    }
    .mb-0 {
        margin-bottom: 0 !important;
    }
    .list-inline {
        padding-left: 0;
        list-style: none;
    }
    .p-0 {
        padding: 0 0 0 10px !important;
        line-height: 30px;
    }
    .m-0 {
        margin: 0 !important;
    }
    pfooter ul li a {
        color: #000;
        text-decoration: none;
        background-color: transparent;
        -webkit-text-decoration-skip: objects;
    }

    pfooter li ul {
        display: none;
        margin: 0;
        background-color: #ffffff;
        position: fixed;
        bottom: 53px;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    }

    pfooter li li {
        display: block;
        border: none;
        padding: 6px;
        margin: 0 5px;
        border-bottom: 1px solid #e1e1e1;
    }

    pfooter li li:last-child {
        border-bottom: none;
    }

    pfooter li li:hover {
        background-color: #f2f2f2;
    }

    pfooter li:hover ul {
        display: block;
        z-index: 101;
    }
}

/*  */
@media screen and (min-width: 992px) {
    phoneHeader {
        display: none;

    }

    pfooter {
        display: none;
    }

    .container {
        flex: 1;
        padding: 1em 5%;
    }
    .container_common{
        flex: auto;
        padding: 1em 5%;
        z-index: -1;
        margin-top: -120px;
    }

    .footer_div {
        margin-left: 36%;
        color: black;
        /* display: flex; */
        /* flex-direction: column; */
    }

    .right_header {
        height: 100%;
        text-align: center;
        display: flex;
        /* width: 48%; */
        margin-top: 1em;
        margin-right: 1%;
        white-space: nowrap;
        flex: 0.5 0 fit-content;
    }

    .p_title {
        font-weight: bold;
        margin: 0.5em;
        font-size: 24px;
    }

    .p_sub_title {
        margin-top: 2em;
        margin-left: 2em;
        font-size: var(--input-font-size);
    }

    #navi_bar {
        display: flex;
        flex-direction: row;
    }

    #navi_bar li ul {
        height: 0;
        width: fit-content;
        overflow: hidden;
        text-align: left;
        background-color: white;
        display: flex;
        flex-direction: column;
        margin-top: 0.6em;
        z-index: 101;
        position: absolute;
    }

    #navi_bar li ul li {
        color: black;
        width: 100%;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
        list-style: none;
        padding: 20px 1px;
        border: #7F7F7F 1px solid;
    }

    #navi_bar li ul li:hover {
        background-color: #BFBFBF;
        /* cursor: wait; */
    }

     a:hover {
        cursor: pointer;

    }

    #navi_bar li {
        list-style: none;
        margin-right: 1.5em;
        cursor: pointer;
        height: fit-content;
    }

    ul#navi_bar li:hover ul {
        height: fit-content;
        overflow: visible;
        z-index: 101;

    }

    ul#navi_bar li:hover p {
        color: #ffc745;
    }

    ul#navi_bar li:hover p {
        color: #ffc745;
    }

    ul#navi_bar li:hover #home {
        color: #ffc745;
    }


    #navi_bar li a {
        color: white;
        text-decoration: none;
        /* font-weight: bold; */
        margin-left: 1em;
    }

    #navi_bar li ul li a {
        color: black;
        text-decoration: none;
        /* font-weight: bold; */
        margin-left: 1em;
    }

    subHeader{
        display: none;
    }
    subHeader_phone{
        display: none;
    }

    #fileUpload{
        display: none;
    }
    #copyContact{
        display: none;
    }

    #alertPanel #panel {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 30%;
        height: fit-content;
        max-height: 80%;
        overflow: auto;
        background-color: white;
        padding: 3% 1% 3.5% 1%;
        box-shadow: 2px 2px 2px #6c757d;
        text-align: center;
    }
    #confirmPanel .buttonClose {
        position: absolute;
        margin: 12px 18% 20px 10px;
        bottom: 0;
        right: 0;
        width: 26%;
        height: 36px;
        border-radius: 5px;
    }
    
    #confirmPanel .buttonOk {
        position: absolute;
        margin: 12px 10px 20px 18%;
        bottom: 0;
        left: 0;
        width: 26%;
        height: 36px;
        border-radius: 5px;
    }
    
    #alertPanel button {
        /* position: absolute;
        margin: 12px 40% 20px 10px; */
        margin-top: 50px;
        bottom: 0;
        right: 0;
        width: 20%;
        height: 36px;
        border-radius: 5px;
    }

    #confirmPanel #panelConfirm {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 30%;
        height: 280px;
        background-color: white;
        padding: 5%;
        box-shadow: 2px 2px 2px #6c757d;
    }
    footer ul li {
        display: table-cell;
        padding-left: 10px;
        padding-right: 10px;
        border-right: 1px solid rgba(120,97,66,.8);
        /* text-align: center; */
    }
    footer ul {
        display: table;
        /* table-layout: fixed; */
        margin: 5px 0;
       line-height: 1.5;
    }
    footer ul li:last-child {
        padding-right: 0;
        border-right: none;
    }
    .pb-0{
        padding-bottom: 0 !important;
    }
    .mb-0 {
        margin-bottom: 0 !important;
    }
    .list-inline {
        padding-left: 0;
        list-style: none;
    }
    .p-0 {
        padding: 0 0 0 10px !important;
        line-height: 30px;
    }
    .m-0 {
        margin: 0 !important;
    }
    footer ul li a {
        color: #000;
        text-decoration: none;
        background-color: transparent;
        -webkit-text-decoration-skip: objects;
    }

    footer li ul {
        display: none;
        margin: 0;
        background-color: #ffffff;
        position: fixed;
        bottom: 53px;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    }

    footer li li {
        display: block;
        border: none;
        padding: 6px;
        margin: 0 5px;
        border-bottom: 1px solid #e1e1e1;
    }

    footer li li:last-child {
        border-bottom: none;
    }

    footer li li:hover {
        background-color: #f2f2f2;
    }

    footer li:hover ul {
        display: block;
        z-index: 101;
    }
}

footer {
    margin-top: 2em;
    min-height: 59px;
    height: 59px;
    line-height: 59px;
    color: #837280;
    /* border-top: 1px solid #d6dbde; */
    background: #ffffff url('../resources/img/title_new.gif') no-repeat 28% 0.5em;
    background-size: 110px;
}

#header{
    z-index: 100;
}

/* .right_header div {
    flex: 1;
} */
.flex1{
    flex: 1;
    margin-left: 0.5em;
}
.flex2{
    flex:1;
    display: flex;
}

.right_header div a {
    text-decoration: none;
    color: #ffffff;
}

.label_list {
    padding-top: 30%;
    padding-left: 12%;
}

/* .title {
    float: left;
} */

.header_title {
    /* width: 51%; */
    min-width: fit-content;
    margin-top: 0em;
}

.header_user {
    /* width: 90%; */
    font-size: var(--input-font-size);
    margin-left: 0.5em;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
    text-align: left;

}

.menu_title {
    font-weight: bold;

}

.footer_hr {
    width: 60%;
    margin-left: 20%;
    align-items: center;
    border-top: 0px;
}

.btn {
    height: 2em;
    line-height: 2em;
    display: inline-block;
    padding: 0px 12px;
    margin-bottom: 0;
    font-size: var(--btn-font-size);
    color: #ffffff;
    text-align: center;
    /* text-shadow: 0 1px 1px rgb(255 255 255 / 75%); */
    cursor: pointer;
    background-color: #003399;
    border: 1px solid black;
    border-radius: 0.3em;
    text-decoration: none;
    vertical-align: middle;
}
#waitingPanel,
#confirmPanel,
#alertPanel{
    z-index: 9999;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    background: rgba(128, 128, 128, 0.35);
    background-image: url('../resources/img/loading.gif');
    background-repeat:no-repeat;
    background-position:center;
    background-size: 5%;
}


#alertPanel #msg {
    /* position: absolute; */
    top: 0;
	left: 0;
    /* height: 30%; */
    background-color: white;
    padding: 5% 5% 2% 5%;
    font-size: 14px;
    white-space: pre-wrap;
}

#confirmPanel #msgConfirm {
    position: absolute;
    top: 10px;
	left: 0;
    height: 200px;
    background-color: white;
    padding: 0% 5% 5% 5%;
    font-size: 14px;
    overflow: auto;
    width: 100%;
}

#waitingPanel #panel{
    position: absolute;
    margin: auto;
    top: 5px;
    left: 0;
    height: 5px;
	background-color: rgba(248, 248, 255, 0.64);
}

#requestWaitingPanel #requestPanel{
    position: absolute;
    margin: auto;
    top: 5px;
    left: 0;
    height: 5px;
	background-color: rgba(248, 248, 255, 0.64);
}

input {
    padding-left: 8px;
    height: var(--input-height);
}

[v-cloak] {
    display: none;
}

.check_msg_min_width{
    min-width: 200px;
}
.icon_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon_i {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.sort-icon {  
    display: inline-block; 
    position: relative; 
    width: 10px; 
    height: 15px; 
    position: relative;
    cursor: pointer;
  }  

.sort-arrow {  
    width: 0;  
    height: 0;  
    border-left: 5px solid transparent;  
    border-right: 5px solid transparent;  
    position: absolute;  
    left: 50%;  
    transform: translateX(-50%); 
}  
    .sort-arrow.up {  
        top: 0; 
        border-bottom: 7px solid black;  
}  
    
    .sort-arrow.down {  
        bottom: 0;  
        border-top: 7px solid black;  
} 
    .sort-arrow.up:hover{
        background-color: #f0f0f0;
    }
    .sort-arrow.down:hover{
        background-color: #f0f0f0;
    }