/* 全画面共通 */
:root{
    --red: #c00000;
    --blue: #007F7F;
    --green: #008000;
    --deep_green: #1a601a;
    --orange: #d46e00;
    --white: #fff;
    --black: #111;
    /* 各色をrgb変換して不透明度変更 */
    --focus_blue: rgba(0, 127, 127, 0.25);
    --focus_green: rgba(0, 128, 0, 0.25);
    --focus_orange: rgba(212, 110, 0, 0.25)
}

body {
    color: var(--black);
    font-family: "Noto Sans", "Arial", "メイリオ";
    min-height: 100vh;
    padding-bottom: 50px;
    position: relative;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: #3583bf;
}

ul{
    list-style: none;
}

h1,h2,h3,h4,h5,h6,p{
    margin-bottom: 0;
}

.font_size_sm{
    font-size: 14px;
}

.font_size_bet_md_sm{
    font-size: 15px;
}

.font_size_md{
    font-size: 16px;
}

.font_size_lg{
    font-size: 22px;
}

.font_size_xl{
    font-size: 28px;
}


.error_msg{
    color: var(--red);
}

.hidden_ele {
    display: none;
}

/* ボタン */
.btn:hover{
    color: var(--white);
}


.content_btn{
    position: relative;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    border: 0;
    border-radius: 3px;
    padding: 0.25rem 1.5rem;
}

@media screen and (max-width: 1199px) {
    .content_btn{
        font-size: 18px;
        padding: 0.4rem 2rem;
    }

    /* 適用されるときははcontent_btnより後に振る */
    .btn_no_responsive{
        font-size: 16px;
        padding: 0.25rem 1.5rem;
    }
}

.content_btn::after{
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 3px;
    background: #000;
    opacity: 0;
    transition: all .3s;
}

.content_btn:hover::after{
    opacity: 0.2;
}

.content_btn:hover{
    opacity: 1;
}

.content_btn a{
    color: var(--white);
}

.btn_bg_info{
    background-color: var(--blue);
}

.btn_bg_normal{
    background-color: var(--green);
}

.btn_bg_menu_confirm{
    background-color: var(--green);
}

.btn_bg_menu_mod{
    background-color: var(--blue);
}

.btn_bg_mod_data{
    background-color: var(--orange);
}


.btn_bg_red {
    background-color: var(--red);
}

.btn_clicked {
    background-color: #005353;
    color: #ddd;
}


/* ログインヘッダー */
.login_header_row{
    position: relative;
}

.login_header_logo{
    position:absolute;
    top:0;
}

/* ダイアログ */
.dialog_bg{
    content: "";
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
}

.apply_completion_dialog, .goods_catalog_dialog_box, .register_confirm_dialog{
    display: none;
    position: fixed;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
}

.dialog_active{
    display: block;
}

.dialog{
    border: 4px solid var(--bluck);
    background-color: var(--white);
}

.dialog_title{
    font-size: 28px;
    background-color: orange;
}

.dialog_content_text{
    font-size: 20px;
}

.ui-dialog .ui-dialog-buttonpane button {
    height: 38.8px;
}

/* カラムカスタマイズ用 */
.col_custom_small {
    width: 4.8%;
    min-width: 80px;
}
.col_custom_large {
    width: 40%;
}

/* フォーカス時の背景色を設定 */

.form-control:focus,
.form-select:focus {
    border-color: var(--blue);
    box-shadow: none;
    /* box-shadow: 0 0 0 0.25rem rgba(0, 127, 127, .25); */
}
.btn.btn_bg_red:focus {
    border-color: var(--red);
    box-shadow: none;
    /* box-shadow: 0 0 0 0.25rem rgba(192, 0, 0, .25); */
}

.btn_bg_info:focus{
    box-shadow: 0 0 0 0.25rem var(--focus_blue);
}

.btn_bg_normal:focus{
    box-shadow: 0 0 0 0.25rem var(--focus_green); 
}

.btn_bg_menu_confirm:focus{
    box-shadow: 0 0 0 0.25rem var(--focus_green); 
}

.btn_bg_menu_mod:focus{
    box-shadow: 0 0 0 0.25rem var(--focus_blue);
}

.btn_bg_mod_data:focus{
    box-shadow: 0 0 0 0.25rem var(--focus_orange);
}

/* 非表示用クラス */

.hidden_disp {
    display: none;
}

/* ダイアログのcss設定 */
#btn_catalog.ui-button:hover,
#btn_catalog.ui-button:active,
#btn_catalog.ui-button:focus{
    background:var(--green);
    border:0;
    font-weight:700;
    color:var(--white);
  }

#btn_update.ui-button:hover,
#btn_confirm.ui-button:hover,
#btn_update.ui-button:active,
#btn_confirm.ui-button:active,
#btn_update.ui-button:focus,
#btn_confirm.ui-button:focus{
    background:var(--red);
    border:0;
    font-weight:700;
    color: var(--white);
}

.ui-dialog .ui-button{
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
}

.ui-dialog .ui-button:hover{
    background: #bbb;
    color:#666;
}

.ui-dialog .ui-button:active{
    border:1px solid #c5c5c5;
    background: #f6f6f6;
    color:#454545;
}

.lh-100{
    vertical-align: middle;
}

/* ダイアログが一瞬表示されるのを消す。 */
.dialog-none{
    display: none;
}

/* ローディング表示 */
/* 画面前面の全体に表示 */
#loading_box {
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
 
/* 画面の中心にローディング画像を表示する */
#loading_box img {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    width: auto;
}

[wj-part=root] {
  overflow: auto !important;
  overscroll-behavior: none;
}