@charset "UTF-8";






/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
マスタ管理画面
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


/*------------------------------------------------------------
ダッシュボード管理
-------------------------------------------------------------*/

/*各種ボタン*/
body.Master #main.dashboard .btnPrev { display: block; width: 20px; height: 40px; border-radius: 4px; background-image: url("../images/ico_prev_dashboard.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 6px 10px; background-color: #C1C1C1; text-indent: -9999px; margin-right: 5px; cursor: default; }
body.Master #main.dashboard .btnPrevOn { position: relative; display: block; width: 20px; height: 40px; border-radius: 4px; background-image: url("../images/ico_prev_dashboard.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 6px 10px; background-color: #6A7277; text-indent: -9999px; margin-right: 5px; transition: opacity ease 0.3s; will-change: transform; }
body.Master #main.dashboard .btnPrevOn:hover { opacity: 0.7; }
body.Master #main.dashboard .btnPrevOn:after { content: ""; display: block; width: 30px; height: 40px; position: absolute; top: 0; left: 25px; background: linear-gradient(to left, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 100%); }
body.Master #main.dashboard .btnNext { display: block; width: 20px; height: 40px; border-radius: 4px; background-image: url("../images/ico_next_dashboard.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 6px 10px; background-color: #C1C1C1; text-indent: -9999px;  margin-left: 5px; cursor: default; }
body.Master #main.dashboard .btnNextOn { position: relative; display: block; width: 20px; height: 40px; border-radius: 4px; background-image: url("../images/ico_next_dashboard.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 6px 10px; background-color: #6A7277; text-indent: -9999px; margin-left: 5px; transition: opacity ease 0.3s; will-change: transform; }
body.Master #main.dashboard .btnNextOn:hover { opacity: 0.7; }
body.Master #main.dashboard .btnNextOn:before { content: ""; display: block; width: 30px; height: 40px; position: absolute; top: 0; right: 20px; background: linear-gradient(to right, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 100%); }
body.Master #main.dashboard .btnAdd { position: static; border-radius: 4px; border: 1px solid #999; background-color: #FFF; }
body.Master #main.dashboard .btnAdd.type1 { background-image: url("../images/ico_layout_box1.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-1 { background-image: url("../images/ico_layout_box2-1.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-2 { background-image: url("../images/ico_layout_box2-2.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-3 { background-image: url("../images/ico_layout_box2-3.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-4 { background-image: url("../images/ico_layout_box2-4.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-5 { background-image: url("../images/ico_layout_box2-5.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-6 { background-image: url("../images/ico_layout_box2-6.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-7 { background-image: url("../images/ico_layout_box2-7.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-8 { background-image: url("../images/ico_layout_box2-8.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .btnAdd.type2-9 { background-image: url("../images/ico_layout_box2-9.svg"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; background-size: 64px 22px; }
body.Master #main.dashboard .dragItem { padding: 0 10px; height: 38px; text-decoration: none !important; line-height: 1; display: inline-flex; justify-content: center; align-items: center; cursor: move; border-radius: 4px; transition: opacity ease 0.3s; border: 1px solid #999; font-size: 1em; color: #4D4F5C; background-color: #FFF;  }
body.Master #main.dashboard .dragItem:hover { opacity: 0.7; }

/*レイアウト追加・表示ブロック選択部分*/
body.Master #main.dashboard .headerBox { }
body.Master #main.dashboard .headerBox .box { padding: 20px 10px 10px; background-color: #FFF; }
body.Master #main.dashboard .headerBox .box .col { margin-left: 10px; }
body.Master #main.dashboard .headerBox .box .col:first-of-type { margin-left: 0; }
body.Master #main.dashboard .headerBox .box .col p + div { padding: 10px; background-color: #F5F6FA; }
body.Master #main.dashboard .headerBox .box .col p + div table tbody tr { display: flex; }
body.Master #main.dashboard .headerBox .box .col p + div table tbody td:first-of-type { }
body.Master #main.dashboard .headerBox .box .col p + div table tbody td:nth-of-type(2) { width: calc(100% - 40px); }
body.Master #main.dashboard .headerBox .box .col p + div table tbody td:last-of-type { }
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .layoutBox,
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .blockBox { width: calc(100vw / 2 - 199px); overflow: hidden; }
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .layoutBoxInner { }
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .layoutBoxInner ul,
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .blockBoxInner ul { display: flex; height: 40px; align-items: center; list-style: none; width: 9999px; }
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .layoutBoxInner ul li,
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .blockBoxInner ul li { margin-right: 5px; }
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .layoutBoxInner ul li:last-of-type,
body.Master #main.dashboard .headerBox .box .col p + div table tbody td .blockBoxInner ul li:last-of-type { margin-right: 0; }

/*サンプルレイアウト表示部分*/
body.Master #main.dashboard .scrollTableOuter { border: none; background-color: #F5F6FA; }
body.Master #main.dashboard .scrollTableOuter .scrollOuterBox { height: 100%; padding: 10px; overflow: hidden; box-sizing: border-box; }
body.Master #main.dashboard .scrollTableOuter .scrollArea { height: 100%; overflow-y: auto; box-sizing: border-box; }
body.Master #main.dashboard .scrollTableOuter .layoutItem { padding-bottom: 10px; position: relative; }
body.Master #main.dashboard .scrollTableOuter .layoutItem:last-of-type { padding-bottom: 0; }
body.Master #main.dashboard .scrollTableOuter .layoutItem .layoutDragArea { opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(165,165,165,0.4); transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .layoutItem .layoutDragArea:hover { cursor: ns-resize; opacity: 1; }
body.Master #main.dashboard .scrollTableOuter .layoutItem .layoutDragArea > .btnDel { opacity: 0.6; position: absolute; top: 0; right: 0; display: block; width: 30px; height: 30px; background-color: #FF6565; background-image: url("../images/ico_del_02.svg"); background-size: 17px 20px; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .layoutItem .layoutDragArea:hover > .btnDel:hover { opacity: 1; }
body.Master #main.dashboard .scrollTableOuter .box { padding-bottom: 0; }
body.Master #main.dashboard .scrollTableOuter .box .col:first-of-type { margin-left: 0; }
body.Master #main.dashboard .scrollTableOuter .box .col { margin-left: 10px; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox { background-color: #FFF !important; padding: 20px 10px 10px; box-sizing: border-box; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox .blockTitle { font-weight: bold; font-family: system-ui; font-size: 1.4em; margin-bottom: 10px; } 
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_01.jpg"); background-repeat: no-repeat; background-position: top left; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box.box1 .col .contentsBox .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_01.jpg"); background-repeat: no-repeat; background-position: top left; background-size: cover; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox .blockItem:hover { opacity: 1; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox .blockItem span { color: 222; font-weight: bold; font-size: 2em; font-family: system-ui; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox .blockItem .blockDragArea { opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(165,165,165,0.4); transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox .blockItem .blockDragArea:hover { cursor: move; opacity: 1; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox .blockItem .blockDragArea > .btnDel { opacity: 0.6; position: absolute; top: 0; right: 0; display: block; width: 25px; height: 25px; background-color: #FF0000; background-image: url("../images/ico_del_02.svg"); background-size: 12px 15px; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; will-change: transform; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox .blockItem .blockDragArea:hover >.btnDel:hover { opacity: 1; }

/*サンプルレイアウト画像指定*/
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox[model_id="Chart"] .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_02.jpg"); background-repeat: no-repeat; background-position: top left; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box.box1 .col .contentsBox[model_id="Chart"] .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_02.jpg"); background-repeat: no-repeat; background-position: top left; background-size: cover; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox[model_id="DataAnalysisDashboard"] .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_02.jpg"); background-repeat: no-repeat; background-position: top left; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box.box1 .col .contentsBox[model_id="DataAnalysisDashboard"] .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_02.jpg"); background-repeat: no-repeat; background-position: top left; background-size: cover; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox[model_id="InfoDashboard"] .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_03.jpg"); background-repeat: no-repeat; background-position: top left; background-size: cover; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box.box1 .col .contentsBox[model_id="InfoDashboard"] .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_04.jpg"); background-repeat: no-repeat; background-position: top left; background-size: cover; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box .col .contentsBox[model_id="SupportDashboard"] .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_05.jpg"); background-repeat: no-repeat; background-position: top left; background-size: cover; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }
body.Master #main.dashboard .scrollTableOuter .box.box1 .col .contentsBox[model_id="SupportDashboard"] .blockItem { position: relative; height: calc(100% - 30px); background-image: url("../images/dashboard_sample_06.jpg"); background-repeat: no-repeat; background-position: top left; background-size: cover; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: opacity ease 0.3s; }