@charset "utf-8";

/* 全般---------------------------------- */

/* PCとSPの切り分け */
.pc-show{display: block;}
.sp-show{display: none;}


body {
    color: var(--black_color);
    font-size: 0.875rem !important;
}
.errmessage{
  margin:30px 0;
 color:#ff7f50;
}
#page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--black_color);
}

.chip-count {
    background-color: var(--sub_blue_100);
    color: var(--sub_blue_300);
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 10rem;
}
.errMessage{
    color:var(--red_color);
}
.og-flex-box {
    display: flex;
    align-items: center;
    gap: 20px;
}
.og-flex-box-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 達成 */
.achieved{color: var(--sub_blue_500);}
/* 未達成 */
.not_achieved{color: var(--orange_color);}

.box-container .row{gap:10px;}
.og-icon{width: 25px;margin-top: 8px;}

/* 一覧画面 */
#list .og-box-style{
    border: 1px solid var(--base_01_color);
    padding: 50px 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    width: 19%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#list .og-box-style:hover{background-color: var(--sub_blue_50);}

#sub .og-box-style{
    border: 1px solid var(--base_01_color);
    padding: 50px 10px !important;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 5px;
}
#sub .og-box-style span{
    position: absolute;
    bottom: 10px;
    right: 20px;
}
#sub .og-box-style02{
    padding: 35px 20px 0 20px;
    text-align: right;
    font-size: 40px;
}
#sub .og-box-style02 span{
    font-size: 25px;
    font-weight: bold;
}
/* サイドバーの開閉の時の処理ー－－－－－－－－ */

.side_togle_style #map #contents-area, .side_togle_style #calendar_main #contents-area,.side_togle_style #map .map-input-area{
    max-width: 1480px;
    margin-left: 54px;
    margin-right: 54px;
    padding-right: 0;
}
.side_togle_style #side-arrow{transform: rotate(180deg);}
.side_togle_style #side-togle{justify-content: center; }
.side_togle_style .container{max-width: 100%;}
.side_togle_style #side-area{width: 56px;}
.side_togle_style #contents-area{margin-left: 56px;}
.side_togle_style #pankuzu_container{margin-left: 56px;}
.side_togle_style .side-close-center{justify-content: center;}
.side_togle_style .side-icon-none{display: none;}

/* ログイン---------------------------------- */

#login{
    background-color: var(--base_03_color);
}
#login .page-size {
    max-width: 500px;
    margin: 0 auto;
    padding: 200px 0;
}


/* ヘッダー---------------------------------- */

#header-area {
    z-index: 900;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--base_02_color);
    height: 45px;
    padding: 0 50px 0 10px;
}
#header-area .contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* 会社ロゴ */
.header-logo {
    width: 130px;
    height: 55px;
    object-fit: contain;
}

/* ヘッダーのprofileアイコン */
#header-area .profile-icon{
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 2px solid var(--black_color);
    border-radius: 50%;
    background: var(--white_color);
    padding: 3px;
}

/* ドロップメニュー */
#dropdownMenuButton1{
    cursor:pointer;
    color: var(--black_color);
    text-decoration: none;
    display: flex;
    align-items: center;
}
.dropdown-menu li{
    padding: 5px 20px;
}

/* サイドバー ----------------------------------*/

#side-area {
    position: fixed;
    bottom: 0;
    left: 0;
    transition: width 0.2s, left 0.2s;
    z-index: 800;
    width: 256px;
    top: 40px;
    background-color: var(--base_03_color);
    border-right: 1px solid var(--base_02_color);
    transform: translate3d(0, 0, 0);
}

#side-area .scroll-area {
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    padding-top: 20px;
    position: relative;
}
#side-area .scroll-area::-webkit-scrollbar{
    display: none;
    -ms-overflow-style: none;
}

#side-area .side-menu .item {
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.25rem;
    width: auto;
    line-height: 1rem;
    transition: none;
    margin: 1px 8px;
    padding-left: 0.25rem;
}

#side-area .side-menu .item.active {background-color: var(--base_02_color);}
#side-area .side-menu .item:hover {background-color: var(--base_02_color);}
#side-area .side-menu .item a {color: var(--black_color);font-size: 13px;}
#side-area .side-menu .item img {width: 20px;}
#side-togle{
    padding: 15px;
    position: absolute;
    bottom: 0;
    left: 0;
    cursor:pointer;
    background-color: var(--base_02_color);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}
#side-arrow{width:15px;}

/*右のサイドバー---------------------------------- */

#side-right-area{
    position: fixed;
    top: 55px;
    right: 0;
    bottom: 0;
    background-color: var(--base_03_color);
    border-left: 1px solid var(--base_02_color);
    transition: width 0.2s, right 0.2s;
    width: 350px;
    z-index: 800;
    box-sizing: border-box;
}

/* 右サイドエリアのscroll */
#side-right-area .scroll-area{
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    padding: 20px !important;
}
#side-right-area .scroll-area::-webkit-scrollbar{
    display: none;
    -ms-overflow-style: none;
}

/* パンクず */
#pankuzu-area{
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--base_02_color);
    font-size: 12px;
    opacity: 60%;
}

#pankuzu-area img{
    width: 15px;
    vertical-align: baseline; 
}

/* メインコンテンツ---------------------------------- */

#contents-wrap {
    display: flex;
    margin-bottom: 100px;
}
#contents-area {
    width: 100%;
    margin-left: 256px;
    padding:100px 30px 0 30px;
    position: relative;
}

/* 検索エリア***************************/

.search-area .search-result-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 0px;
}

.search-result-area .item.active{
    box-shadow: inset 0 -2px 0 0 #0d6efd;
}
.search-result-area .item .btn-link{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1rem;
    font-size: 0.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: box-shadow 100ms linear;
    width: 80px;
    color: var(--black_color);
    text-decoration: none;
    border-style: none !important;
}

.search-result-area .item .btn-link .chip-count {
    background-color: var(--base_01_color);
    color: var(--base_05_color);
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 10rem;
    margin-left: 5px;
}

/* 現在のタブ */

.search-area .search-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 0;
    background-color: var(--base_03_color);
    padding: 16px;
    margin-bottom: 0;
    border-top: 1px solid var(--base_02_color);
    border-bottom: 1px solid var(--base_02_color);
    color: var(--black_color);
}


/* table***************************/

.table-list {
    width: 100%;
    border: 1px solid var(--base_02_color);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    border-bottom: 2px solid var(--base_02_color);
}

.table-list th {
    background-color: var(--base_01_color);
    padding: 10px 16px;
    line-height: 21px;
    border-top: 1px solid var(--base_02_color);
    vertical-align: middle;
}
.table-list td {
    padding: 10px 16px;
    line-height: 21px;
    border-top: 1px solid var(--base_02_color);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 270px;
    vertical-align: middle;
}

.table-list tr:hover {
    background-color: var(--sub_blue_50);
    background-clip: padding-box;
    border-top: 1px solid var(--sub_blue_100);
    border-bottom: 1px solid var(--sub_blue_200);
}

.table-scroll table{white-space: nowrap;}

/* 見出し */
.title-box{
    background-color: var(--sub_blue_50);
    padding: 10px;
    margin-bottom: 20px;
}

/* footer---------------------------------- */

#footer {
    width: 100%;
    border-top: 1px solid var(--base_02_color);
    background-color: var(--white_color);
}

#login #footer {
    background-color:var(--white_color);
    border-top: 1px solid var(--base_02_color);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

#footer .copyright {text-align: center;padding: 10px;}