/* common */
body {
    /*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
    font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: .8rem;
    line-height: 150%;
    padding: 0;
    background-color: #ffe;
}
@media (max-width: 767px) {
    body {
        font-size: 1.0rem;
        line-height: 150%;
    }
}

@media print {
    .noprint {
        display:none;
    }
}

a {
    color:#888;
}
img.auto {
    width:100%;
    height: auto;
}

.spanbox_5em {
    display: inline-block;
    width:5em;
}
.input-group-text {
    font-size: .8rem;
    padding: .1rem .3rem;
}
.form-control {
    font-size: .8rem;
    padding: 0 .3rem;
    height: 2em;
}
.btn {
    font-size: .8rem;
    padding: .1rem .3rem;
}

.help {
    display: inline-block;
    position: relative;
}
.help a img {
    width:15px;
    display: inline;
}
.help .help_content {
    display: none;
    position: absolute;
    width:300px;
    top:23px;
    left:0;
    z-index:999;
    border: #ccc solid 1px;
    border-radius: 5px;
    background: #fee;
    padding: .5rem;
    text-align: left;
}
@media (max-width: 767px) {
    .help .help_content {
        position:fixed;
        left:30%;
        width:90%;
    }
}

#loading {
    position: absolute;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:rgba(255,255,255,.5);
    z-index: 99999;
    text-align: center;
    padding-top: 45vh;
}

header {
    position: relative;
    padding:0;
}
header h1 {
    font-size: 1rem;
    background-color: #000;
    color:#cc6;
    margin: 0;
    padding:.3rem;
    font-weight:bold;
}
@media (max-width: 767px) {
    header h1 {
        text-align: center;
    }
}

footer .copy {
    margin-top: 1rem;
    padding: 1rem;
}

@media (max-width: 767px) {

}

main {
    /*padding-top: 2rem;
    padding-bottom: 2rem;*/
    position: relative;
    padding:1rem;
}


main .buttons01 li {
    display: inline-block;
    width: 15em;
    margin: 10px;
}
main .buttons01 li a {
    display: block;
    padding: 2em 1em;
    background: #fdd;
    border: 2px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}
main .buttons01 li a:hover {
    background: #eee;
    text-decoration: none;
}
main .buttons02 li {
    display: inline-block;
    width: 15em;
    margin: 10px;
}
main .buttons02 li a {
    display: block;
    padding: 2em 1em;
    background: #dfd;
    border: 2px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}
main .buttons02 li a:hover {
    background: #eee;
    text-decoration: none;
}
main .buttons03 li {
    display: inline-block;
    width: 15em;
    margin: 10px;
}
main .buttons03 li a {
    display: block;
    padding: 2em 1em;
    background: #ddf;
    border: 2px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}
main .buttons03 li a:hover {
    background: #eee;
    text-decoration: none;
}
main .buttons99 li {
    display: inline-block;
    width: 15em;
    margin: 10px;
}
main .buttons99 li a {
    display: block;
    padding: 2em 1em;
    background: #ddd;
    border: 2px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}
main .buttons99 li a:hover {
    background: #eee;
    text-decoration: none;
}
main h2.color01 {
    background-color: #fdd;
    padding:.6rem;
    font-size: 110%;
    font-weight: bold;
}
main h2.color02 {
    background-color: #dfd;
    padding:.6rem;
    font-size: 110%;
    font-weight: bold;
}
main h2.color03 {
    background-color: #ddf;
    padding:.6rem;
    font-size: 110%;
    font-weight: bold;
}

main section {
    padding: 1rem 0;
}
@media (max-width: 767px) {

}

main table input[type="text"] {
    display:inline-block;
    text-align: left;
    width:15em;
}
main table textarea {
    width:100%;
    height: 100%;
    text-align: left!important;
}

main table th {
    font-weight: bold;
    background-color: #eee;
}

/* for stock */
main .stock_list {
    max-height: 71vh;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    border: 1px solid #dee2e6;
}
main .stock_list table {
    border-collapse: collapse;
    width: 100%;
}
main .header_fix th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa !important;
    border-bottom: none !important; 
    box-shadow: inset 0 -1px 0 #dee2e6; 
}

main .stock_list th.strong {
    background-color: #cca;
    font-weight: bold;
}
main .stock_list td.strong {
    background-color: #ffe;
    font-weight: bold;
}

/* for operation */
main .operation {
     max-width:70em;
}
main .operation input[type="text"], main .operation input[type="email"], main .operation input[type="date"] {
    width:100%;
    text-align: left;
    background-color: #fff;
    display: inline-block;
}
main .operation select {
    display: inline-block;
}
main .operation textarea {
    width:100%;
    height: 7em;
    text-align: left;
    background-color: #fff;
    display: inline-block;
}
main .operation .detail {
    height: 13em;
    overflow-y: scroll;
}

main .operation .detail thead th {
    position: sticky;
    top: 0;
    background-color: #eee;
    z-index: 1;
    border-top: 0;
}

/*@media print {
    main table th {
        font-size: 90%;
    }
}*/
/*@media (max-width: 767px) {
    main .profile th, main .profile td {
        display:inline-block;
        width:100%;
        min-height: 2rem;
    }
}*/

/* for input */
main .input {
     max-width:100%;
}
main .input th {
    width:10em;
}
main .input input[type="text"], main .input input[type="email"], main .input input[type="date"] {
    width:100%;
    text-align: left;
    background-color: #fff;
    display: inline-block;
}
main .input select {
    display: inline-block;
}
main .input textarea {
    width:100%;
    height: 7em;
    text-align: left;
    background-color: #fff;
    display: inline-block;
}
main .input .detail {
    height: 30em;
    overflow-y: scroll;
}

main .input .detail thead th {
    width: auto;
    position: sticky;
    top: 0;
    background-color: #eee;
    z-index: 1;
    border-top: 0;
}



/* modal */
.modal_area {
    display:none;
    z-index: 100;
}
.modal_area_on {
    display:block;
    z-index: 100;
}
.modal_area .screen {
    background-color: rgba(0, 0, 0, .5);
    width:100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.modal_area .modal_window {
    position: fixed;
    top:5%;
    left:50%;
    margin-left:-400px;
    width:800px;
    max-height: 90vh;
    overflow-y: scroll;
    background: #fff;
    padding:1rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: none;
    z-index: 100;
}
@media (max-width: 767px) {
    .modal_area .modal_window {
        margin-left:-47%;
        width:94%;
    }
}
.modal_area .frame {
    padding: 1rem;
}
.modal_area .data_input th {
    min-width: 7em;
}
.modal_area .data_input input[type="text"], .modal_area .data_input input[type="email"], .modal_area .data_input input[type="date"] {
    width:100%;
    text-align: left;
    background-color: #fff;
    display: inline-block;
}
.modal_area .data_input select {
    display: inline-block;
}
.modal_area .data_input textarea {
    width:100%;
    height: 7em;
    text-align: left;
    background-color: #fff;
    display: inline-block;
}
.modal_area .data_input .sku_window {
    max-height: 30em;
    overflow-y: scroll;
}
@media (max-width: 767px) {
    .modal_area .data_input th, .modal_area .data_input td {
        display: block;
        float: none;
        width:100%;
    }
}

/* popup window */
.popup_window {
    font-size: .8rem;
    line-height: 120%;
    padding: 0;
}
@media (max-width: 767px) {
    body {
        font-size: .8rem;
        line-height: 120%;
    }
}
.popup_window .input-group-text {
    font-size: .8rem;
    padding: .1rem .3rem;
}
.popup_window .btn {
    font-size: .8rem;
    padding: .1rem .3rem;
}