@charset "utf-8";

body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
    /* 文字設定 */
    font-size: 16px;
    line-height: 1;
    font-weight: normal;
    letter-spacing: 0;
    color: #333;
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
}

.flex>.inner {
    width: 100%;
}

.no_wrap {
    white-space: nowrap;
}

.d-block {
    display: block;
}

/* ------------------------------------------ */

/* テキスト */

/* ------------------------------------------ */

/* リンク付きテキスト */
.link_text {
    color: #006AAB;
    text-decoration: underline;
    transition: 0.3s;
}

    .link_text:hover {
        opacity: 0.8;
    }

.text_blue {
    color: #006AAB;
}

.line-through {
    text-decoration: line-through;
}

/* ------------------------------------------ */

/* ボックスシャドウ */

/* ------------------------------------------ */
/* box-shadow01 */

.box-shadow01 {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
}

.box-shadow02 {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.375);
}

/* ------------------------------------------ */

/* パンくず */

/* ------------------------------------------ */


.breadcrumbs {
    display: flex;
    justify-content: start;
    gap: 5px;
    align-items: center;
    position: relative;
}

.breadcrumbs >span {
    display: inline-block;
}

.breadcrumbs >span:not(:last-of-type) {
    padding-right: 20px;
}
.breadcrumbs >span:not(:last-of-type):after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/icon_arrow_select.png) center center no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}



/* ------------------------------------------ */

/* アニメーション */

/* ------------------------------------------ */

.appear_anime {
    animation: appear .3s ease;
}

@keyframes appear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ------------------------------------------ */

/* タブ */

/* ------------------------------------------ */
.tab-content,
.tab-content_2 {
    display: none;
}

.tab-content.active,
.tab-content_2.active {
    display: block;
}

/* ------------------------------------------ */

/* クリックしたら操作メニューが開く仕組み */

/* ------------------------------------------ */

.click_menu_box {
    position: relative;
}

.click_menu_box > .menu_content {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 999;
}

.click_menu_box_02 {
    position: relative;
}

.click_menu_box_02 > .menu_content_02 {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 999;
}

/* ------------------------------------------ */

/* アコーディオン */

/* ------------------------------------------ */

.accordeion_content {
    display: none;
}

.accordeion_trigger {
    cursor: pointer;
}

.accordeion_trigger:after {
    content: '';
    width: 1em;
    height: 1em;
    background: url(../img/icon_arrow_accordion.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 0.5em;
    position: relative;
    top: -1px;
}

.accordeion_trigger.open:after {
    transform: rotate(180deg);
    top: -2px;
}

.accordeion_trigger.active:after {
    transform: rotate(180deg);
    top: -2px;
}

.accordeion_trigger.open.active:after {
    transform: initial;
    top: -1px;
}

.accordeion_trigger.open + .accordeion_content {
    display: block;
}

/* ------------------------------------------ */

/* プルダウン */

/* ------------------------------------------ */

.dropdown__wrapper {
    position: relative;
}

.dropdown {
    height: 38px;
}

.dropdown__lists {
    display: none;
    width: 100%;
    position: absolute;
    top: 38px;
    left: 0;
}

.dropdown:hover + .dropdown__lists,
.dropdown__lists:hover {
    display: block;
    z-index: 1000;
}

.dropdown__list {
    display: inline-block;
}

.dropdown__list > * {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------ */

/* ラジオボタンのカスタマイズ */

/* ------------------------------------------ */

.radio_btn_custom  input[type="radio"] {
    display: none;
}

.radio_btn_custom input[type="radio"]:checked + label {
    color: red;
}


/* ------------------------------------------ */

/* モーダル */

/* ------------------------------------------ */

.modal-open {
    display: block;
}

.modal-open,
.modal-close {
	cursor: pointer;
}

.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,80%);
	overflow: auto;
	opacity: 0;
	visibility: hidden;
    box-sizing: border-box;
    z-index: 99999;
}

.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

.modal-container.active{
	opacity: 1;
	visibility: visible;
}

.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 600px;/*横幅調整*/
	width: 90%;
}

.modal-content{
	background: #fff;
	text-align: left;
	padding: 50px 30px;
    border-radius: 10px;
}

.modal-container-02 .modal-content  {
    border-radius: 0;
    padding: 10px 25px 30px;
}

.modal-ttl {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #B9BABC;
    margin-bottom: 30px;
    color: #4D4D4D;
    /* margin-right: -25px;
    margin-left: -25px;
    padding: 10px 10px 15px 25px; */
    padding: 10px;
    
}

/*モーダルボタン*/

.btn_modal_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
}

.btn_modal {
    width: 180px;
    height: 50px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    white-space: nowrap;
    padding: 0 10px;
}

.btn_modal.small {
    min-width: 120px;
    width: auto;
    height: 38px;
}

.btn_modal.cancel {
    background-color: #fff;
    color: #616161;
    border: 1px solid #D4D4D4;
    font-weight: normal;
}

.btn_modal.ok {
    background-color: #1A90DA;
    color: #fff;
}

.btn_modal.delete {
    background-color: #fff;
    color: #CC3838;
    border: 1px solid #CC3838;
}

.modal-container.inside {
    background: rgba(0,0,0,30%);
}


/* ------------------------------------------ */

/* list-sytle */

/* ------------------------------------------ */

/* list-sytle01 */

.list-style01 {
    display: inline-block;
    border: 1px solid #B9BABC;
    border-radius: 4px;
    min-width: 200px;
    background-color: #fff;
}

.list-style01>li:not(:last-of-type) {
    border-bottom: 1px solid #F0F0F0;
}

.list-style01>li a,
.list-style01>li p {
    font-size: 12px;
    line-height: 1.25;
    width: 100%;
    height: 100%;
    padding: 6px 10px;
}


.list-style01>li a:hover,
.list-style01>li p:hover {
    background-color: #FBFAE3;
}

.list-style01>li.line a,
.list-style01>li.line p {
    border-bottom: 5px solid #F0F0F0;
    padding-bottom: 4px;
}

/* label-list-style */
.label-list-style {
    left: 10px;
    box-shadow:0 0 20px rgba(0, 0, 0, 0.375);
}

.label-list-style>li p {
    padding: 3px 10px;
}

    .label-list-style > li:nth-last-of-type(2) p {
        /*border-bottom: 5px solid #F0F0F0;*/
        padding-bottom: 4px;
    }

.label-list-style .action-list {
    text-align: right;
    /* padding: 10px; */
    padding: 0;
}

.label-list-style .btn_label_add {
    font-size: 12px;
    position: relative;
    padding-left: 20px;
    width: 100%;
    height: 100%;
    padding: 10px;
    transition: all .3s;
}

.label-list-style .btn_label_add:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/icon_add_black.png) center center no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 2px;
    transition: all .3s;
}

.label-list-style .btn_label_add:hover {
    background-color: #339DDE;
    color: #fff;
}

.label-list-style .btn_label_add:hover:before {
    background-image: url(../img/icon_add_white.png);
}

/* list-sytle02 */

.list-style02 > li {
    padding: 12px;
    border-bottom: 1px solid #F0F0F0;
    font-size: 14px;
}


/* ------------------------------------------ */

/* 書類リスト */

/* ------------------------------------------ */

.document_list {
    width: 100%;
}

.document_list li {
    background-color: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    min-height: 50px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    padding: 10px 12px;
    max-width: 400px;
    display: flex;
    align-items: center;
}

.document_list li:not(:last-of-type) {
    margin-bottom: 5px;
}

.document_list li > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 10px;
    width: 100%;
}

.document_list li p {
    font-size: 14px;
    position: relative;
    padding-left: 28px;
    width: 100%;
}

.document_list li p:before {
    content: '';
    width: 24px;
    height: 24px;
    background: url(../img/icon_report.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}


/* ------------------------------------------ */

/* テーブル01 */

/* ------------------------------------------ */

.table01 {
    border: 1px solid #CECECE;
    border-collapse: collapse;
    table-layout: fixed;
    empty-cells: show;
    background-color: #fff;
}

.table01 p,
.table01 a,
.table01 th,
.table01 td {
    font-size: 14px;
}

/* thead */

.table01 thead {
    background-color: #DEDEDE;
    border-bottom: 1px solid #CECECE;
}

.table01 thead tr th {
    padding: 3px 12px;
    vertical-align: middle;
}

.table01 thead tr th p {
    /* font-weight: bold; */
    display: flex;
    align-items: center;
    justify-content: start;
}

.table01 thead tr th.th_center p {
    justify-content: center;
}

/* tbody */

.table01 tbody tr:not(:last-of-type) {
    border-bottom: 1px solid #CECECE;
}

.table01 tbody tr td,
.table01 tbody tr th {
    padding: 6px 12px;
    vertical-align: middle;
    text-align: left;
}

.table01 tbody tr td p,
.table01 tbody tr td a,
.table01 tbody tr th a {
    line-height: 1.25;
}

.table01 tbody tr:hover {
    background-color: #FBFAE3;
}

.table01 tbody tr.active {
    /* background-color: #FFFCC2; */
    background-color: #F8FAFF;
    /* border: 1px solid #0B54FF; */
}

.table01 tbody tr td.td_center {
    text-align: center;
}

/* table-action-block */

.table_action_block {
    margin-bottom: 8px;
    max-width: 1630px;
}

.selection-status {
    position: relative;
    padding-left: 20px;
    white-space: nowrap;
}

.selection-status:before {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../img/icon_checkbox_checked_blue.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

/* ------------------------------------------ */

/* テーブル02 */

/* ------------------------------------------ */

.table02 .tr {
    display: flex;
    justify-content: space-between;
}

.table02 .thead {
    border: 1px solid #C1C2C4;
    background-color: #F3F3F3;
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

.table02 .tbody {
    border: 1px solid #C1C2C4;
    border-top: none;
}

.table02 .th {
    font-size: 13px;
    padding: 3px 12px;
}

.table02 .tbody .tr {
    border-top: 1px solid #F0F0F0;
}

.table02 .tbody .tr:hover {
    background-color: #FBFAE3;
}

.table02 .td {
    font-size: 14px;
    padding: 15px 12px;
}




/* ------------------------------------------ */

/* ヘッダー */

/* ------------------------------------------ */

#header {
    background-color: #BED600;
    height: 50px;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

#header .inner {
    width: 100%;
}

    #header h1 {
        width: 164px;
    }

#header h1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.header_right {}


/* 通知アイコン */
.btn_news_wrapper {
    display: flex;
    align-items: start;
    margin-right: 35px;
}

.btn_news img {
    width: 30px;
    height: 30px;
}

.news_count {
    position: relative;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #F14322;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 2em;
    pointer-events: none;
    left: -10px;
    top: -5px;
}

.btn_news_wrapper .menu_content {
    right: 10px;
    width: 100%;
}

.btn_news_wrapper .table01 thead tr th {
    padding: 6px 12px;
}

.btn_news_wrapper .table01 tbody tr td {
    padding: 10px 12px;
}

/* ユーザー名 */
p.header_user_name {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    margin-right: 35px;
}

/* ------------------------------------------ */

/* ハンバーガーメニュー */

/* ------------------------------------------ */

.hamburger {
    width: 50px;
    height: 50px;
    position: relative;
}

/* ハンバーガーボタン */

.hamburger span {
    background-color: #fff;
    display: block;
    width: 30px;
    height: 3px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s;
}

.hamburger span:first-of-type {
    top: calc(50% - 10px);
}

.hamburger span:last-of-type {
    top: calc(50% + 10px);
}

/* 開いているハンバーガーボタン */

.open .hamburger {
    z-index: 10000;
}

.open .hamburger span:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
}

.open .hamburger span:nth-child(2),
.open .hamburger span:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.open .hamburger::after {
    content: '';
}


/* ハンバーガーナビ */

.hamburger_nav {
    display: none;
    transition: all .3s;
    position: fixed;
    right: 30px;
    top: 60px;
}

.hamburger_nav ul {
    min-width: 160px;
}

.hamburger_nav li a,
.hamburger_nav li .logout {
    font-weight: bold;
    padding: 10px;
    font-size: 12px;
}

.hamburger_nav li .logout {
    border-top:  5px solid #F0F0F0;
    width: 100%;
    color: #F14322;
    border-radius: 0 0 3px 3px;
    transition: all .3s;
}

.hamburger_nav li .logout:hover {
    background-color: #F14322;
    color: #fff;
}

.hamburger_nav li a:hover {
    background-color: #FBFAE3;
}

.open .hamburger_nav {
    display: block;
    z-index: 10000;
}

/* オーバーレイ */
.overlay {
    background-color: #000;
    cursor: pointer;
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: all .3s;
    visibility: hidden;
    width: 100vw;
    z-index: 1;
}

.open .overlay {
    opacity: 0.4;
    visibility: visible;
}

/* ------------------------------------------ */

/* サイドメニュー */

/* ------------------------------------------ */

#side_menu {
    /* width: 240px;
    min-width: 240px; */
    width: clamp(190px, -240px + 25vw, 240px);
    min-width: clamp(190px, -240px + 25vw, 240px);
    background-color: #fff;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

#side_menu ul li {
    height: 48px;
    padding: 0 20px 0 26px;
}

#side_menu ul li a {
    font-size: 14px;
    color: #808080;
    font-weight: bold;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}

#side_menu ul li a:before {
    content: '';
    width: 1.125em;
    height: 1.125em;
    display: inline-block;
    background: url(../img/icon_header_home.png) center center no-repeat;
    background-size: contain;
    margin-right: 10px;
    position: relative;
    top: -1px;
}

#side_menu ul li.home a:before {
    background-image: url(../img/icon_header_home.png);
}

#side_menu ul li.current.home a:before {
    background-image: url(../img/icon_header_home_current.png);
}

#side_menu ul li.add a:before {
    background-image: url(../img/icon_header_add.png);
}

#side_menu ul li.current.add a:before {
    background-image: url(../img/icon_header_add_current.png);
}

#side_menu ul li.report a:before {
    background-image: url(../img/icon_header_report.png);
}

#side_menu ul li.current.report a:before {
    background-image: url(../img/icon_header_report_current.png);
}

#side_menu ul li.graph a:before {
    background-image: url(../img/icon_header_graph.png);
}

#side_menu ul li.current.graph a:before {
    background-image: url(../img/icon_header_graph_current.png);
}

#side_menu ul li.current {
    background-color: #F2F7CC;
    border-left: 6px solid #BED600;
    padding: 0 20px;
}

#side_menu ul li.current a {
    color: #879900;
}

#side_menu ul li:hover {
    background-color: #FCFFE3;
}

#side_menu ul li.current:hover {
    background-color: #F2F7CC;
}



/* ------------------------------------------ */

/* ボタン */

/* ------------------------------------------ */

/* table-action-btns */

.table-action-btns {
    background-color: #fff;
    border-radius: 2px;
    font-size: 13px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    white-space: nowrap;
}

.table-action-btns:before {
    content: '';
    background: url(../img/icon_hide.png) center center no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 4px;
}

    .table-action-btns.primary {
        border: 1px solid #B9BABC;
        color: #525252;
        transition: 0.3s;
    }

        .table-action-btns.primary:hover {
            background-color: #F4F4F4;
            border-color: #888888;
        }

.table-action-btns.secondary {
    border: 1px solid #006AAB;
    color: #006AAB;
}

.table-action-btns.hide:before {
    background-image: url(../img/icon_hide.png);
}

.table-action-btns.label-apply:before {
    background-image: url(../img/icon_label-apply.png);
}

.table-action-btns.label-remove:before {
    background-image: url(../img/icon_label-remove.png);
}

.table-action-btns.user-add:before {
    background-image: url(../img/icon_user-add.png);
}

.table-action-btns.user-remove:before {
    background-image: url(../img/icon_user-move.png);
}

.table-action-btns.csv-export:before {
    background-image: url(../img/icon_csv-export.png);
}

    .table-action-btns.csv-export-02:before {
        background-image: url(../img/icon_csv-export-02.png);
    }

.table-action-btns.csv-import:before {
    background-image: url(../img/icon_csv-import.png);
}

.table-action-btns.csv-download:before {
    background-image: url(../img/icon_download.png);
}

.table-action-btns.csv-download:before {
    /* background-image: url(../img/icon_favorite_remove.png); */
}

/* table-action-btns -blue- */

.table-action-btns.blue {
    background-color: #339DDE;
    font-weight: bold;
    color: #fff;
    height: 36px;
    padding: 0 10px;
}

.table-action-btns.blue.add:before {
    background-image: url(../img/icon_add_white.png);
}

.table-action-btns.blue.download:before {
    background-image: url(../img/icon_download_blue.png);
    width: 22px;
    height: 22px;
}

.table-action-btns.blue.add.secondary,
.table-action-btns.blue.download.secondary,
.table-action-btns.blue.search.secondary {
    background-color: #fff;
    border: 1px solid #339DDE;
    color: #339DDE;
}

.table-action-btns.blue.add.secondary:before {
    background-image: url(../img/icon_add_blue.png);
}
.table-action-btns.blue.search.secondary:before {
    background-image: url(../img/icon_search_blue.png);
}
.table-action-btns.blue.delete {
    background-color: #fff;
    border: 1px solid #CC3838;
    color: #CC3838;
}

.table-action-btns.blue.delete:before {
    content: none;
}

.table-action-btns.blue.sort {
    border-radius: 3em;
    background-color: #7F7F7F;
    padding: 0 20px;

}

.table-action-btns.blue.sort:before {
    content: none;
}

/* アップロードボタン */

.btn_form_upload_file {
    font-size: 12px;
    color: #3e3e3e;
    background-color: #F1F1F1;
    border: 1px solid #909090;
    font-weight: normal;
    height: 20px;
    padding: 0 3px;
}

.btn_form_action {
    background-color: #1C92DA;
    border: 2px solid #046FB0;
    color: #fff;
    font-size: 20px;
    color: #fff;
    width: 100%;
    font-weight: bold;
    text-align: center;
    padding: 0.25em 0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
}

.btn_form_action:after {
    content: '';
    width: 1em;
    height: 1em;
    background: url(../img/icon_page_arrow_white.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(180deg);
    position: relative;
    top: -1px;
    margin-left: 0.25em;
}

.btn_form_action.secondary {
    background-color: #fff;
    color: #1C92DA;
    border-color: #1C92DA;
    font-size: 18px;
    padding: 1em 0;
    height: 65px;
}

.btn_form_action.secondary:before {
    content: '';
    width: 1.5em;
    height: 1.5em;
    background: url(../img/icon_arrow_blue.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 0.25em;
}

.btn_form_action.secondary.tablet {
    font-size: 16px;
    padding: 0.875em 0;
    height: 55px;
}

.btn_form_action.secondary.edit:before {
    background-image: url(../img/icon_btn_edit_blue.png);
}

.btn_form_delete {
    background-color: #fff;
    border: 2px solid #FF0000;
    border-radius:2px;
    color: #FF0000;
    font-size: 16px;
    font-weight: bold;
    width: 260px;
    text-align: center;
    padding: 0.75em 0;
    height: 48px;
}

.btn_form_delete:before {
    content: '';
    width: 1.5em;
    height: 1.5em;
    background: url(../img/icon_delete_red.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 0.25em;
}

/* 先任チェックボタン */

.btn_in_charge_check {
    color: #F14322;
    border: 3px solid #F14322;
    background-color: #FFEAE4;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    width: 215px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3em;
    margin-right: auto;
    margin-left: auto;
}

.btn_in_charge_check:before {
    content: '';
    width: 28px;
    height: 28px;
    display: inline-block;
    background: url(../img/icon_btn_in_charge_check.png) center center no-repeat;
    background-size: contain;
    margin-right: 5px;
}

/* 検索窓 */

.search_block {
    width: 580px;
    position: relative;
    margin-bottom: 30px;
}

.form_search {
    background-color: #fff;
    border: 1px solid #B9BABC;
    height: 45px;
    width: 100%;
    border-radius: 2em;
    font-size: 14px;
    text-align: left;
    padding: 0 10px;
    padding-left: 40px;
}

.search_block.small {
    width: 230px;
}

.search_block.small .form_search {
    height: 32px;
}

.search_block.small:before {
    top: 5px;
}

.search_block:before {
    content: '';
    background: url(../img/icon_search.png) center center no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
}


/* 編集ボタン */

.btn_edit__common {
    background-color: #fff;
    color: #006AAB;
    border: 1px solid #006AAB;
    border-radius: 2em;
    font-size: 12px;
    padding: 6px 10px;
    padding-left: 25px;
    position: relative;
}

.btn_edit__common:before {
    content: '';
    width: 18px;
    height: 18px;
    background: url(../img/icon_edit_dark_blue.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6px;
}

/* 読み取りボタン */

.btn_pdf_reading {
    font-size: 13px;
    font-weight: bold;
    background-color: #5F6368;
    color: #fff;
    /* width: 165px; */
    padding: 0 15px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3em;
}

.btn_pdf_reading:before {
    content: '';
    width: 18px;
    height: 18px;
    background: url(../img/icon_reading.png) center center no-repeat;
    background-size: contain;
    margin-right: 5px;
    position: relative;
    top: -1px;
}



/* ------------------------------------------ */

/* アイコンボタン */

/* ------------------------------------------ */

/* ソートボタン */
.btn_sort {
    width: 18px;
    height: 18px;
}

/* リロードボタン */
.btn_reload {
    width: 25px;
    height: 25px;
}

/* お気に入りボタン */
.btn_favorite {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

.btn_favorite.is-unfavorited {
    background: url(../img/icon_star.png) center center no-repeat;
    background-size: contain;
}

.btn_favorite.is-favorited {
    background: url(../img/icon_star_selected.png) center center no-repeat;
    background-size: contain;
}

/* ラベルボタン */
.btn_label {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

.btn_label.no-labels {
    background: url(../img/icon_folder.png) center center no-repeat;
    background-size: contain;
}

.btn_label.has-labels {
    background: url(../img/icon_folder_green.png) center center no-repeat;
    background-size: contain;
}

/* チェクボックス */
.table_checkbox {
    display: none;
}

.table_checkbox_label {
    width: 24px;
    height: 24px;
    background: url(../img/icon_checkbox.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    position: relative;
}

th > .table_checkbox_label {
    background-image: url(../img/icon_checkbox_header.png);
}

.table_checkbox:checked+.table_checkbox_label {
    background-image: url(../img/icon_checkbox_checked.png);
}

/* ダウンロードボタン */

.btn_icon_download {
    width: 22px;
    height: 22px;
    background: url(/img/icon_download_blue.png) center center no-repeat;
    background-size: contain;
}

/* 削除ボタン */

.btn_icon_delete {
    width: 22px;
    height: 22px;
    background: url(/img/icon_close.png) center center no-repeat;
    background-size: contain;
}

.form_action_btn {
    font-size: 13px;
    font-weight: bold;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 2px;
    position: relative;
    height: 34px;
    width: 100%;
}

.form_action_btn.primary {
    background-color: #339DDE;
    color: #fff;
}

.form_action_btn.secondary {
    background-color: #fff;
    border: 1px solid #339DDE;
    color: #339DDE;
}

.form_action_btn.print {
    padding-left: 30px;
}

.form_action_btn.print:before {
    content: '';
    position: absolute;
    background: url(../img/icon_print.png) center center no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}


/* 検索窓の詳細ボタン */

.btn_search_detail {
    content: '';
    width: 22px;
    height: 22px;
    background: url(../img/icon_tune.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
}


/* 編集ボタン */

.btn_icon_edit {
    width: 20px;
    height: 20px;
    background: url(../img/icon_edit_gray.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

.btn_icon_close {
    width: 20px;
    height: 20px;
    background: url(../img/icon_close.png) center center no-repeat;
    background-size: contain;
    display: block;
    vertical-align: middle;
}


/* ------------------------------------------ */

/* ステータス */

/* ------------------------------------------ */

p.status {
    display: inline-block;
    padding: 4px 5px;
    font-size: 13px;
    border-radius: 2em;
    background-color: red;
    line-height: 1!important;
}

.status.self,
.status.out {
    position: relative;
    padding-left: 18px;
}

.status.self {
    font-weight: bold;
}

.status.self:before,
.status.out:before {
    background: url(../img/icon_self.png) center center no-repeat;
    background-size: contain;
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
}

.status.out:before {
    background-image: url(../img/icon_out.png);
}

.status.completed {
    background-color: #E2F1E3;
    color: #0E7B44;
}

.status.task.pending,
.status.approval.requested {
    background-color: #FFF4F3;
    border: 1px solid #D10000;
    color: #D10000;
}

.status.task.in-progress {
    background-color: #E9EEFA;
    color: #2A50C0;
    border: 1px solid #2A50C0;
}

.status.approval.pending,
.status.risk.awaiting-final {
    background-color: #FFE5E5;
    color: #D10000;
}

.status.approval.rejected {
    background-color: transparent;
    color: #D10000;
    font-weight: bold;
}

/* ------------------------------------------ */

/* ラベルカラー */

/* ------------------------------------------ */

.folder {
    display: flex;
    align-items: center;
}

.folder:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/icon_folder_yellow.png) center center no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 10px;
}

.folder-common-yellow:before {
    background-image: url(../img/icon_folder_yellow.png);
}

.folder-guestroom-pink:before {
    background-image: url(../img/icon_folder_pink.png);
}

.folder-transport-orange:before {
    background-image: url(../img/icon_folder_orange.png);
}

.folder-cs-lightblue:before {
    background-image: url(../img/icon_folder_light_blue.png);
}

.folder-marketing-blue:before {
    background-image: url(../img/icon_folder_blue.png);
}

/* ------------------------------------------ */

/* 部門 */

/* ------------------------------------------ */

.group-label {
    display: flex;
    align-items: center;
}

.group-label:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/icon_group.png) center center no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 10px;
}


/* ------------------------------------------ */

/* ページネーション */

/* ------------------------------------------ */

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
}

.pagination-info {
    font-size: 13px;
    color: #777;
}

.pagination-buttons {
    display: flex;
    gap: 5px;
}

.pagenation-btn {
    font-size: 14px;
    padding: 0 8px;
    color: #006AAB;
    min-width: 25px;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    height: 25px;
    transition: all .3s;
    background-color: #fff;
}

.pagenation-btn:hover {
    background-color: #006AAB;
    color: #fff;
}

.pagenation-btn.active {
    background-color: #006AAB;
    color: #fff;
}

.pagenation-btn.pagination-prev {
    background: url(../img/icon_page_arrow.png) center center no-repeat;
    background-size: 65%;
    width: 28px;
    background-color: #fff;
}

.pagenation-btn.pagination-next {
    background: url(../img/icon_page_arrow.png) center center no-repeat;
    background-size: 65%;
    width: 28px;
    transform: rotate(180deg);
    background-color: #fff;
}

.pagenation-btn.pagination-arrow:hover {
    background-color: #006AAB;
    background-image: url(../img/icon_page_arrow_white.png);
}

.pagenation-btn.pagination-arrow:disabled {
    background-image: url(../img/icon_page_arrow_disabled.png);
    background-color: #EEEEEE;
}

.pagination-ellipsis {
    font-size: 14px;
    color: #006AAB;
}



/* ------------------------------------------ */

/* レイアウト */

/* ------------------------------------------ */

html {
    height: 100%;
}

body,
body > div,
#main_wrapper,
#main_wrapper > .inner,
#side_menu {
    height: inherit
}

#header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
}

#main_wrapper {
    padding-top: 50px;
}

#main_wrapper > .inner {
    display: flex;
    justify-content: start;
}

#side_menu {
    z-index: 10;
}

#content_wrapper {
    /* min-width: 1480px; */
/*    min-width: 1530px;*/
    min-width: 1126px;
    /* padding: 0 25px 25px; */
    width: 100%;
    overflow: auto;
    height: inherit;
    background-color: #F8F9FA;
    z-index: 9;
    position: relative;
}

#content_wrapper_padding {
    padding: 10px 25px 25px;
    height: inherit;
    overflow: auto;
}

.page_ttl + #content_wrapper_padding {
    padding: 65px 25px 25px;
}

.center_block_wrapper {
    text-align: center;
}

.center_block_wrapper > .inner {
    display: inline-block;
}

/* ------------------------------------------ */

/* ページタイトル */

/* ------------------------------------------ */

.page_ttl {
    height: 50px;
    border-bottom: 1px solid #B9BABC;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #F8F9FA;
    z-index: 100;
}

.page_ttl h2 {
    font-weight: bold;
    font-size: 16px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}



/* ------------------------------------------ */

/* table_tree */

/* ------------------------------------------ */

/* トリガー */

.table_tree .tree_accordeion_trigger {
    cursor: pointer;
}

.table_tree .tree_accordeion_trigger .trigger_text {
    position: relative;
    display: inline-block;
    padding-left: 20px;
}

.table_tree .tree_accordeion_trigger .trigger_text:before {
    content: '';
    vertical-align: middle;
    display: inline-block;
    background: url(../img/icon_tree_arrow.png) center center no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    transition: all .3s;
}

.table_tree .tree_accordeion_trigger.active .trigger_text:before {
    transform: translateY(-50%) rotate(90deg);
}

/* 中身 */

.table_tree .tree_accordeion_content {
    display: none;
    padding-left: 20px;
}

/* テーブルデザイン */

.table_tree  {
    overflow: auto;
}

.table_tree > .inner {
    position: relative;
    display: inline-block;
    min-width: 100%;
}

.table_tree .tbody .tr {
    border: none;
}

.table_tree .tbody .tr.active {
    background-color: #F8FAFF;
}

.table_tree .tbody .tr:after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #F0F0F0;
    right: 0;
    position: absolute;
    display: block;
    /* z-index: -1; */
}

.table_tree .tbody .td.checkbox {
    padding-right: 0;
}

.table_tree .td {
    padding: 10px 12px;
}

.table_tree .tbody .td.main_text {
    width: 100%;
    white-space: nowrap;
}

.table_tree .tbody .td.main_text  >span {
    min-height: 24px;
    line-height: 24px;
}

.table_tree .thead .th.absolute,
.table_tree .tbody .td.absolute {
    position: absolute;
    right: 0;
}

/* チェックボックス付の場合 */

.table_tree.head_none {
    border-top: 1px solid #C1C2C4;
}


/* ------------------------------------------ */

/* タブ */

/* ------------------------------------------ */

.tabs_2.tree_tab {
    display: flex;
    justify-content: start;
    gap: 8px;
    position: initial;
    padding: initial;
    border: none;
    width: initial;
    min-width: initial;
}

.tabs_2.tree_tab .tab-button_2 {
    font-size: 14px;
    font-weight: bold;
    background-color: #fff;
    width: 140px;
    border: 1px solid #B9BABC;
    color: #4D4D4D;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    cursor: pointer;
    border-bottom: none;
}

.tabs_2.tree_tab .tab-button_2.active {
    background-color: #4D4D4D;
    color: #fff;
    border-color: #4D4D4D;
}

.tabs_2.tree_tab .tab-button_2.active:after {
    content: none;
}


/* ---------------------------

ローダー
--------------------------- */
.loader_container {
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    display: flex;
    transition: all 1s;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000000;
}

.loader_container_sub {
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    display: flex;
    transition: all 1s;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000001;
}

.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #BED600;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    animation: pulse 1s linear infinite;
}

    .loader:after {
        content: '';
        position: absolute;
        width: 48px;
        height: 48px;
        border: 5px solid #BED600;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: scaleUp 1s linear infinite;
    }

@keyframes scaleUp {
    0% {
        transform: translate(-50%, -50%) scale(0)
    }

    60%, 100% {
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes pulse {
    0%, 60%, 100% {
        transform: scale(1)
    }

    80% {
        transform: scale(1.2)
    }
}


[v-cloak] {
    display: none;
}


.hide {
    display: none !important;
}


/* ------------------------------------------ */

/* 検索サジェスト */

/* ------------------------------------------ */

.suggest_list {
    border: 1px solid #b6b6b6;
    border-top: none;
    max-height: 360px;
    overflow-y: scroll;
}

    .suggest_list li {
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 6px 10px;
    }

        .suggest_list li:hover {
            background-color: #FBFAE3;
        }

        .suggest_list li .list_name {
            width: 100%;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 10px;
            font-size: 14px;
        }

        .suggest_list li .btn_icon_delete {
            min-width: 22px;
        }

        .suggest_list li .list_group {
            font-size: 13px;
            color: #6F6F6F;
            padding-left: 10px;
        }

.bold {
    font-weight: bold !important;
}