@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@import "reset.css";

/* =======================================

	base.css - 基本スタイル

======================================= */
/*↓ Google Fonts URL ↓*/
/*https://fonts.google.com/specimen/Noto+Sans+JP?selection.family=Noto+Sans+JP*/
/*----------------------------------------
　　1.  Common - 共通
----------------------------------------*/
html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	color: #1b232b;
	font: 13.5px "Noto Sans JP", "sans-serif","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","HIragino Kaku Gothic Pro W3","HIragino Kaku Gothic Pro","Osaka","ＭＳ Ｐゴシック", "MS P Gothic";
	letter-spacing: 0.03em;
	margin: 0;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
img {
	border:0;
}
#wrapper {
	display:flex;
	width: 100%;
	/*min-width: 100vw;*/
	background-color: #f5f5f5;
	flex: 1;
}

/*PC・スマホの表示非表示*/
.sp {display: none;}
@media screen and (max-width: 768px){
	.pc {display: none;}
	.sp {display: block;}
}

/* IEの場合、コンテンツ領域が潰れてフッタ位置が上がってしまうので #wrapper のflex定義を解除 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    #wrapper {
        flex: none;
    }
}

/*----------------------------------------
　　2.  Header - ヘッダー
----------------------------------------*/
header {
    padding: 0.5em; /* 横 padding:14px(1em) * 2(両サイド) = 28px */
    background-color: #000066;
    color: #fff;
    z-index: 1;
}
.headerWrapper {
	/*width: 996px;*/
	} /* (header padding:28px) + (width:996px) = 1024px（header横幅） */
.logo {
    float: left;
    width: 170px;
    margin-top: 0.1em;
    padding: 0.5em 0;
    background-color: initial;
}
.companyIcn {
	float: left;
	padding:1.2em 0.5em 0 0.5em;
}
.companyName {
    float: left;
    /*padding-top: 0.5em;*/
    /*width: 300px;*/
    font-size: 120%;
}
.userName {
    float: right;
    padding-top: 0.8em;
    text-align: right;
    font-size: 120%;
}
.userIcn {
    float: right;
    padding: 1em 1em 0em 0em;
}

.userIcn i {padding-left: 0.5em;}
.userIcn a:hover{	cursor:pointer;}
.userArea {
padding: 0 2em;
}
.userArea div{
	padding-bottom: 1em;
}
.userArea a {
	color: #63c8ba;
}
.userArea a:link, .userArea a:visited, .userArea a:hover, .userArea a:active {
	color: #63c8ba;
}
@media screen and (max-width: 768px){
	.headerWrapper {
		margin: 0 auto;
		width: auto;
	}
    .logo {
        width: 170px;
        margin-top: 0.1em;
        padding: 0.5em 0;
        background-color: initial;
    }
    .spMenu {
        display: inline;
        position: fixed;
        top: 0;
        right: 0;
        float: right;
        width: 3em;
        margin: 0.6em;
        padding: 0.2em;
        border-radius: 0.2em;
        background-color: #506581;
        text-align: center;
    }
}

/*----------------------------------------
　　3.  Nav - メニュー
----------------------------------------*/
nav {
	background-color: #658296;
	color: #fff;
	display:flex;
}
#menu i {margin-right: 3px;}
#menu {
	float:left;
	width: 175px;
}
#menusp {
	float:left;
	width: 175px;
}

#menu_opcl{
	float:right;
	width: 20px;
	padding: 0.5em;
	background-color: #51687a;
}
.menu_user {
	margin: 0;
	padding: 0.5em 0 0.5em 1em;
	background-color: #779dad;
}
.menu_fst {
	margin: 0 0 3px 0;
	padding: 1em;
	background-color: #51687a;
}
.menu_snd{
	margin: 0;
	padding: 0.5em;
}
.menu_trd {
	margin: 0;
	padding: 0.5em 0 0.5em 2em;
	background-color: #779dad;
}
nav a {
	color: #fff;
}
nav a:link, nav a:visited, nav a:hover, nav a:active {
	color: #fff;
}
.menuA_box {
    font-size: 75%;
}
/*----------------------------------------
　　4.  Content - コンテンツ
----------------------------------------*/
#contentWrap{
	width: 100%;
}
#content{
	/*width: 1024px;*/
	padding: 1em;
}
    #content.content-min {
        width: calc(92vw - 28px);
    }

    #content.content-max {
        width: calc(92vw - 200px);
    }

#contentResult{
	padding: 1em;
}

#modal{
	margin: 0 auto;
	width: 700px;
	padding: 1em;
}
#user{
	margin: 0 auto;
	width: 250px;
	padding: 1em;
}
@media screen and (max-width: 768px){

	#content{
		margin: 0 auto;
		/*width: 90vw;*/
	}

        #content.content-min,
        #content.content-max {
            width: 90vw;
        }

	#modal{
		width: 300px;
	}
}
#content i {margin-right: 3px;}
.dvTxtCenter {
	margin-bottom: 0.5em;
	width: 100%;
	text-align: center;
}
.dvTxtLeft {
	margin-bottom: 0.5em;
	width: 100%;
	text-align: left;
}
.dvTxtRight {
	margin-bottom: 0.5em;
	width: 100%;
	text-align: right;
}

.gridCount {
    margin: 0 0 0.3em 0.3em;
    width: 100%;
    text-align: left;
    color: #51687a;
}
@media screen and (max-width: 768px) {
    .gridCount {
        text-align: center;
    }
}
.dvTxtLeftEmp {
    font-size: 1.3em;
}

/*画面名エリア↓*/
.scrTitle {
	padding: 0.5em 0;
	color: #63c8ba;
	border-bottom: solid 1px #63c8ba;    	/* 二重線の上の線になる一本線をひく */
    margin-bottom: 20px;             /* 二重線の下の線の位置を確保する */
    position: relative;             /* 外側の線の位置を調整する時の基準点になるようにする    */
}
.scrTitle:before {
    content: '';                /* 擬似要素に実体を持たせる */
    width: 100%;                /* 二重線の下の線になる要素の幅を指定する */
    height: 1px;                /* 線を表示させるために1pxだけ高さを入れる */
    border-bottom: solid 2px;   /* 二重線の下の線になる一本線の枠線をひく*/
    position: absolute;         /* 二重線の下の線の位置を自由に動かせるようにする */
    left: 0px;                 /* 二重線の下の線の位置を、内側の線の左に揃える */
    bottom: -5px;               /* 二重線の下の線の位置を、内側の線から下に-2pxずらす */
}
    .scrTitle .icnBack {
        float: left;
        width: 4.5em;
        cursor: pointer;
    }

.scrTitle h1 {
	font-size: 140%;
	text-align: center;
}
.icnBack a {
	color: #63c8ba;
}
    .icnBack a:hover {
        text-decoration: none;
    }

/*画面名エリア↑*/

/*メッセージ↓*/
/* MessageArea.vue に記載 */
/*メッセージ↑*/
/*--------------
　　ボックス
--------------*/
/*タイトル↓*/
.boxTitle {
    margin-bottom: 1em;
    padding: 0.5em 0;
    color: #63c8ba;
    border-bottom: solid 1px #63c8ba;
}
.boxTitle a,
.boxTitle a:link,
.boxTitle a:visited,
.boxTitle a:hover,
.boxTitle a:active
 {
	color: #63c8ba;
}
.boxInner {
	margin: 1em 0;
	padding: 1em;
	border: solid 1px #63c8ba;
}
.topTitle {
	text-align:center;
    font-size:120%;
}
/*タイトル↑*/

/*項目リスト↓*/
.listItem {
	margin-bottom: 1em;
}
.listItem ul {
	width: 100%;
}
.listItem li {
	float: left;
	display:block;
	width: 110px;
	margin: 0 0.5em 0.5em 0;
	padding: 2px 0.5em;
	border: solid 1px #63c8ba;
	border-radius: 5px;
	color: #63c8ba;
	font-weight: bold;
	text-align: center;
}
.listItem li:hover{
	background-color: #63c8ba;
	color: #fff;
}
.listItem li a{
	display: block;
	color: #63c8ba;
}
.listItem li a:hover{
	background-color: #63c8ba;
	color: #fff;
	text-decoration: none;
}
.listItem li.select{
	background-color: #63c8ba;
	color: #fff;
}

/*項目リスト↑*/

/*レイアウト↓*/
.boxAll {
	margin-bottom: 1em;
	padding: 1em;
	background-color: #fff;
	border-radius: 5px
}

.boxFree {
    margin-bottom: 1em;
    padding: 1em;
    background-color: #fff;
    border-radius: 5px
}

.boxLeft {
    float: left;
    width: 49%;
    margin-bottom: 1em;
    padding: 1em;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.boxRight {
    float: right;
    width: 49%;
    margin-bottom: 1em;
    padding: 1em;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.boxList {
    margin-bottom: 1em;
    padding: 1em;
    background-color: #fff;
    border-radius: 5px
}

.boxMax {
    width: 92vw;
    margin-bottom: 1em;
    padding: 1em;
    background-color: #fff;
    border-radius: 5px
}

/*旧boxFree*/
.boxOther {
    display: inline-block;
    margin-bottom: 1em;
    padding: 1em;
    background-color: #fff;
    border-radius: 5px
}

@media screen and (min-width: 768.02px) {
    .boxAll {
        max-width: 1024px;
    }

    .boxFree {
        min-width: 500px;
        display: inline-block;
    }
}

@media screen and (max-width: 768px) {

    .boxLeft {
        float: none;
        width: auto;
    }

    .boxRight {
        float: none;
        width: auto;
    }

    .boxMax {
        width: 85vw;
    }
}
/*レイアウト↑*/

/*--------------
　　モーダル表示（ユーザーエリア）
--------------*/

/* ユーザーエリア */
/* 未使用
#user-main {
    display: none;
    z-index: 3;
    width: 25em;
    height: 25em;
    margin: 0;
    padding: 0;
    position: fixed;
    background-color: #f5f5f5;
    border: solid 1px #ccc;
    color: #666666;
}
*/

/* ユーザーエリア 背景エリア */
/* 未使用
#user-bg {
    display: none;
    width: 100%;
    height: 130%;
    background-color: rgba(0,0,0, 0.50);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
*/

a#user-open {
    color: #fff;
}
/*--------------
　　モーダル表示（スマホメニュー）
--------------*/

/* モーダル コンテンツエリア */
/* 未使用
#menusp-main {
    display: none;
    z-index: 3;
    width: 175px;
    height: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    background-color: #658296;
    color: #666666;
}
*/

/* モーダル 背景エリア */
/* 未使用
#menusp-bg {
    display: none;
    width: 100%;
    height: 130%;
    background-color: rgba(0,0,0, 0.20);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
*/

/*--------------
　　モーダル表示（補足）
--------------*/

/* モーダル コンテンツエリア */
/* 未使用
#supple-main {
    display: none;
    z-index: 3;
    width: 30em;
    height: 10em;
    margin: auto;
    padding: 1em;
    position: fixed;
    background-color: #fff;
    color: #666666;
}
*/

/* モーダル 背景エリア */
/* 未使用
#supple-bg {
    display: none;
    width: 100%;
    height: 130%;
    background-color: rgba(0,0,0, 0.20);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
*/

/* 未使用
#supple-main h2 {
    float: none;
    width: 96%;
    margin-bottom: 0.5em;
    padding: 0.5em;
    background-color: #63c8ba;
    color: #fff;
    border-radius: 5px;
}
*/
/* 未使用
#supple-main button {
    width: 8em;
    padding: 0;
}
*/
/* 未使用
#supple-main span {
    font-size: 120%;
    font-weight: bolder;
}
*/
/*--------------
　　モーダル表示
--------------*/
/* モーダル コンテンツエリア */
/* 未使用
#modal-main {
    display: none;
    z-index: 3;
    width: 70%;
    height: 800px;
    margin: 0;
    padding: 0;
    position: fixed;
    background-color: #f5f5f5;
    color: #666666;
}
*/

/* モーダル 背景エリア */
/* 未使用
#modal-bg {
    display: none;
    width: 100%;
    height: 130%;
    background-color: rgba(0,0,0, 0.50);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
*/

/*--------------
　　入力エリア
--------------*/
/*レイアウト（2カラム-左右分離-）↓*/
.inputAreaL {
    float: left;
    width: 49%;
}

.inputAreaR {
    float: right;
    width: 49%;
}

@media screen and (max-width: 768px) {
    .inputAreaL,
    .inputAreaR {
        float: none;
        width: 100%;
    }
}
/*レイアウト（2カラム-左右分離-）↑*/

/*レイアウト（2カラム-左右交互-）↓*/
.lineWrapper {
    display: flex;
    width: 100%;
}

.inputLeft {
    float: left;
    margin-right: 0.5em;
    width: 49%;
}

.inputRight {
    float: right;
    margin-left: 0.5em;
    width: 49%;
}

@media screen and (max-width: 768px) {
    .lineWrapper {
        display: block;
    }

    .inputLeft,
    .inputRight {
        float: none;
        width: 100%;
        margin: 0;
    }
}
/*レイアウト（2カラム-左右交互-）↑*/

/*入力エリア↓*/
.inputArea div.line {
    display: flex;
    border-bottom: solid 0.5px #cad8d6;
}

@media screen and (max-width: 768px) {
}

.inputArea dl {
    width: 100%;
}

.list::after {
    clear: both;
    display: block;
    content: "";
}

.inputArea dt {
    float: left;
    clear: left;
    padding: 0.5em 0em 0.5em 0em;
    width: 9em;
    color: #63c8ba;
    flex-shrink: 0;
    min-height: 2.22em;
}

.inputArea div.itemRec {
    float: left;
    width: 1em;
    font-size: 50%;
    color: #d94b5d;
}

.inputArea div.itemName {
    float: left;
    width: 8em;
}

.inputArea dd {
    float: left;
    padding: 0.5em 0;
    width: calc(100% - 9em);
}

@media screen and (max-width: 768px) {
    .inputArea dt {
        width: 8em;
        min-height: unset;
    }

    .inputArea div.itemName {
        width: 7.5em;
        font-size: 90%;
    }

    .inputArea dd {
        width: calc(100% - 8em);
    }
    .inputArea div.splinenone {
        border-bottom: none;
    }
}
/*入力エリア↑*/

/*コントロール*/
input {
    min-height: 1em;
    /*margin-bottom: 0.5em;*/
    background-color: #e9eef4;
    border: solid 1px #e9eef4;
    border-radius: 4px;
}

    input[type="date"] {
        height: 1.5em;
        font-family: "Noto Sans JP", "sans-serif","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","HIragino Kaku Gothic Pro W3","HIragino Kaku Gothic Pro","Osaka","ＭＳ Ｐゴシック", "MS P Gothic";
        color: #00f;
    }

.textbox,
.text {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 4px;
    padding: 4px 4px;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
    min-height: 2em;
    font: inherit;
}

select.list {
    margin-bottom: 0.5em;
}

select {
    min-height: 1em;
    background-color: #e9eef4;
    border: solid 1px #e9eef4;
    border-radius: 4px;
}

textarea {
    background-color: #e9eef4;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 4px;
    padding: 4px 4px;
    width: 100%;
    min-height: 4em;
    box-sizing: border-box;
    font: inherit;
    resize: vertical;
}

    textarea.widthAll {
        width: 850px;
        height: 70px;
    }

    select:focus,
    input:focus,
    input.error:focus,
    input.rec:focus,
    textarea:focus {
        background-color: #eadfca;
    }


input.rec,
select.rec,
textarea.rec{
    background-color: #e9eef4;
    border: solid 1px #d94b5d;
}

textarea.error {
    background-color: #e8babc;
    border: solid 1px #e8babc;
}

input.error {
    background-color: #e8babc;
    border: solid 1px #e8babc;
}

    input.error:focus,
    textarea.error:focus {
        background-color: #eadfca;
    }

select:hover,
input:hover,
button:hover {
    cursor: pointer;
}
/*チェックボックス*/
.check-label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 5px;
}

.chk,
.check-display {
    width: 1em;
    height: 1em;
}
/* チェックボックス本体(透明化) */
.chk {
    opacity: 0;
}
/* チェックボックスデザイン */
.check-display {
    display: block;
    left: 0; /* 左から配置の基準位置を決める */
    margin-top: 3px; /* チェックボックス枠の位置 */
    width: 13px; /* チェックボックスの横幅を指定する */
    height: 13px; /* チェックボックスの高さを指定する */
    border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
    pointer-events: none;
}

    /* チェックマークデザイン */
    .check-display:before {
        content: "";
        display: block;
        left: 0; /* 左から配置の基準位置を決める */
        margin-top: -2px; /* チェックマークの位置 */
        margin-left: 2px;
        width: 5px; /* ボックスの横幅を指定する */
        height: 9px; /* ボックスの高さを指定する */
        border-right: 3px solid #0171bd; /* 境界線（右）のスタイルを指定する */
        border-bottom: 3px solid #0171bd; /* 境界線（下）のスタイルを指定する */
        transform: rotate(45deg); /* 要素を回転させる */
        opacity: 0; /* 要素を透過指定する */
    }
/* 本体にデザインを重ねる */
.check-label .check-display {
    position: absolute;
    top: 0;
    left: 0;
}

.chk:focus + .check-display {
    background-color: #eadfca;
}
/* 本体自体がチェックされたときのデザイン */
.chk:checked + .check-display {
    /*border-color: #00AEEF;*/
}

    .chk:checked + .check-display:before {
        opacity: 1;
    }

/*ラジオボタン*/
.radio-label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 5px;
}

.rdo,
.radio-display {
    width: 1em;
    height: 1em;
}

/* ラジオボタン本体(透明化) */
.rdo {
    opacity: 0;
}

/* ラジオボタンデザイン */
.radio-display {
    display: block;
    left: 0; /* 左から配置の基準位置を決める */
    margin-top: 3px; /* ラジオボタン枠の位置 */
    width: 13px; /* ラジオボタンの横幅を指定する */
    height: 13px; /* ラジオボタンの高さを指定する */
    border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
    border-radius: 100%;
    pointer-events: none;
}

    /* チェックマークデザイン */
    .radio-display:before {
        content: "";
        display: block;
        left: 0; /* 左から配置の基準位置を決める */
        margin-top: 2px; /* ラジオボタンの位置 */
        margin-left: 2px;
        width: 9px; /* ラジオボタンの横幅を指定する */
        height: 9px; /* ラジオボタンの高さを指定する */
        background-color: #0171bd;
        border-radius: 100%;
        opacity: 0; /* 一旦非表示にしておく */
    }

/* 本体にデザインを重ねる */
.radio-label .radio-display {
    position: absolute;
    top: 0;
    left: 0;
}

.rdo:focus + .radio-display {
    background-color: #eadfca;
}
/* 本体自体がチェックされたときのデザイン */
.rdo:checked + .radio-display {
    /*border-color: #00AEEF;*/
}

    .rdo:checked + .radio-display:before {
        opacity: 1;
    }

@media screen and (max-width: 768px) {
    textarea.widthAll {
        width: 180px;
        height: 70px;
    }
}
/*--------------
　   コンテンツカテゴリ
--------------*/
.displayArea {
}

/*テーブル↓*/
/*.displayArea table {
    margin-bottom: 1em;
}

.displayArea th {
    padding: 0.5em;
    background-color: #63c8ba;
    color: #fff;
    border-bottom: solid 0.5px #fff;
    border-top: solid 0.5px #63c8ba;
    border-left: solid 0.5px #fff;
    border-right: solid 0.5px #fff;
}

    .displayArea th:first-child {
        border-left: solid 0.5px #63c8ba;
    }

    .displayArea th:last-child {
        border-right: solid 0.5px #63c8ba;
    }

.displayArea td {
    padding: 0.5em;
    border: solid 0.5px #63c8ba;
}

.displayArea tr:nth-child(odd) {
    background-color: rgba(149,181,178,0.3);
}*/
/*テーブル↑*/

/*--------------
　　ページング
--------------*/

.moveArea {
    vertical-align: bottom;
}

.moveLeft {
    float: left;
    width: 70%;
    text-align: left;
    vertical-align: bottom;
}

.moveRight {
    float: right;
    width: 30%;
    text-align: right;
    vertical-align: bottom;
}

@media screen and (max-width: 768px) {
    .moveArea {
        display: block;
    }

    .moveLeft {
        float: none;
        width: 100%;
        text-align: center;
        vertical-align: bottom;
    }

    .moveCenter {
        float: none;
        width: 100%;
        text-align: center;
        vertical-align: bottom;
    }

    .moveRight {
        float: none;
        width: 100%;
        text-align: center;
        vertical-align: bottom;
    }
}

.txtPd1 {
    padding-top: 0.5em;
}

/*--------------
　　フレーム / スクロールバー
--------------*/

/*検索結果フレーム↓*/
div.frame /*基本*/{
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: auto;
    background: #fff;
    box-shadow: inset 2px 2px 2px #fff;
    max-height: 70vh;
}

/* wijmo 不具合対応css */
/* 
    wijmo 5.20241.9 の不具合対応
    今後、wijmoのバージョンアップにより、問題が解消した場合は以下を削除してください。

    高さ指定のあるブロック要素で囲んでいる場合に行をクリックすると動作が不正になる
    https://support.mescius.jp/hc/ja/articles/10105737699855
*/
div.frame .wj-flexgrid {
    max-height: calc(70vh - 1em);
}

div.frame_s /*子画面用*/ {
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: auto;
    background: #fff;
    box-shadow: inset 2px 2px 2px #fff;
    max-height: 40vh;
}

/* wijmo 不具合対応css */
    /* 
    wijmo 5.20241.9 の不具合対応
    今後、wijmoのバージョンアップにより、問題が解消した場合は以下を削除してください。

    高さ指定のあるブロック要素で囲んでいる場合に行をクリックすると動作が不正になる
    https://support.mescius.jp/hc/ja/articles/10105737699855
*/
div.frame_s .wj-flexgrid {
    max-height: calc(40vh - 1em);
}



div.frame_noscroll /*基本*/ {
    margin: 0 auto;
    background: #fff;
    box-shadow: inset 2px 2px 2px #fff;
}
@media screen and (max-width: 768px) {
    div.frame_noscroll /*基本(SP)*/ {
        overflow-y: auto;
        overflow-x: auto;
    }
}

div.wrapDiv /*行内*/ {
    /*.wrapFrameとセットで使用すること*/
}

div.wrapFrame /*行内*/ {
    overflow-y: auto;
    overflow-x: auto;
    background: #fff;
    box-shadow: inset 2px 2px 2px #fff;
}

#singleSheetModal div.frame {
    width: 50em;
}

@media screen and (max-width: 768px) {
    #singleSheetModal div.frame {
        width: 20em;
    }
}
/*フレーム↑*/

/*スクロールバー↓*/
.frame::-webkit-scrollbar,
.frame_s::-webkit-scrollbar,
.frame_noscroll::-webkit-scrollbar,
.wrapFrame::-webkit-scrollbar {
    width: 16px;
}

.frame::-webkit-scrollbar-thumb,
.frame_s::-webkit-scrollbar-thumb,
.frame_noscroll::-webkit-scrollbar-thumb,
.wrapFrame::-webkit-scrollbar-thumb {
    background: #63c8ba;
    border-radius: 16px;
}

.frame::-webkit-scrollbar-track-piece:start,
.frame_s::-webkit-scrollbar-track-piece:start,
.frame_noscroll::-webkit-scrollbar-track-piece:start,
.wrapFrame::-webkit-scrollbar-track-piece:start {
    background: #ddd;
}

.frame::-webkit-scrollbar-track-piece:end,
.frame_s::-webkit-scrollbar-track-piece:end,
.frame_noscroll::-webkit-scrollbar-track-piece:end,
.wrapFrame::-webkit-scrollbar-track-piece:end {
    background: #ddd;
}
/*スクロールバー↑*/

/*--------------
　　ボタン
--------------*/

button.btnBase /*基本[画面特有のボタン等]*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 0.5em;
    background-color: #506581;
    color: #fff;
    border: solid 1px #506581;
    border-radius: 25px;
}

    button.btnBase:hover,
    button.btnBase:focus {
        background-color: #405266;
        text-decoration: underline;
    }

    button.btnBase:active {
        text-decoration: none;
    }

button.btnRegist, /*登 録*/
button.btnUpdate, /*更 新*/
button.btnApprove /*承 認*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #4269cf;
    color: #fff;
    border: solid 1px #4269cf;
    border-radius: 25px;
}

    button.btnRegist:hover,
    button.btnUpdate:hover,
    button.btnApprove:hover,
    button.btnRegist:focus,
    button.btnUpdate:focus,
    button.btnApprove:focus {
        background-color: #335399;
        text-decoration: underline;
    }

    button.btnRegist:active,
    button.btnUpdate:active,
    button.btnApprove:active {
        text-decoration: none;
    }

button.btnDelete, /*削 除（一括削除）*/
button.btnReject /*却 下*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #d94b5d;
    color: #fff;
    border: solid 1px #d94b5d;
    border-radius: 25px;
}

    button.btnDelete:hover,
    button.btnReject:hover,
    button.btnDelete:focus,
    button.btnReject:focus {
        background-color: #89303f;
        text-decoration: underline;
    }

    button.btnDelete:active,
    button.btnReject:active {
        text-decoration: none;
    }

button.btnSearch, /*検 索*/
button.btnDisp /*表 示*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #ef9a55;
    color: #fff;
    border: solid 1px #ef9a55;
    border-radius: 25px;
}

    button.btnSearch:hover,
    button.btnDisp:hover,
    button.btnSearch:focus,
    button.btnDisp:focus {
        background-color: #a3683b;
        text-decoration: underline;
    }

    button.btnSearch:active,
    button.btnDisp:active {
        text-decoration: none;
    }

button.btnOutput /*出 力*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #66a2d7;
    color: #fff;
    border: solid 1px #66a2d7;
    border-radius: 25px;
}

    button.btnOutput:hover,
    button.btnOutput:focus {
        background-color: #5193c4;
        text-decoration: underline;
    }

    button.btnOutput:active {
        text-decoration: none;
    }

button.btnToNext, /*次 へ*/
button.btnToRegist, /*新規登録へ*/
button.btnToEdit, /*編集へ*/
button.btnToUpdate /*更新へ*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #4269cf;
    color: #fff;
    border: solid 1px #4269cf;
    border-radius: 25px;
}

    button.btnToNext:hover,
    button.btnToRegist:hover,
    button.btnToEdit:hover,
    button.btnToUpdate:hover,
    button.btnToNext:focus,
    button.btnToRegist:focus,
    button.btnToEdit:focus,
    button.btnToUpdate:focus {
        background-color: #335399;
        text-decoration: underline;
    }

    button.btnToNext:active,
    button.btnToRegist:active,
    button.btnToEdit:active,
    button.btnToUpdate:active {
        text-decoration: none;
    }

button.btnOK, /*Ｏ Ｋ*/
button.btnApply /*適 用*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #4269cf;
    color: #fff;
    border: solid 1px #4269cf;
    border-radius: 25px;
}

    button.btnOK:hover,
    button.btnApply:hover,
    button.btnOK:focus,
    button.btnApply:focus {
        background-color: #335399;
        text-decoration: underline;
    }

    button.btnOK:active,
    button.btnApply:active {
        text-decoration: none;
    }

button.btnApplyDelete /*適 用[削除系処理]*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #d94b5d;
    color: #fff;
    border: solid 1px #d94b5d;
    border-radius: 25px;
}

    button.btnApplyDelete:hover,
    button.btnApplyDelete:focus {
        background-color: #89303f;
        text-decoration: underline;
    }

    button.btnApplyDelete:active {
        text-decoration: none;
    }

button.btnCancel, /*キャンセル*/
button.btnClose /*閉じる*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #a6a6a6;
    color: #fff;
    border: solid 1px #a6a6a6;
    border-radius: 25px;
}

    button.btnCancel:hover,
    button.btnClose:hover,
    button.btnCancel:focus,
    button.btnClose:focus {
        background-color: #888888;
        text-decoration: underline;
    }

    button.btnCancel:active,
    button.btnClose:active {
        text-decoration: none;
    }

button.btnSelectAll, /*全選択*/
button.btnCancelAll, /*全解除*/
button.btnOpenCloseAll, /*全開閉*/
button.btnSetting, /*設 定（一括設定）*/
button.btnDeleteBase, /*削 除（一括削除）*/
button.btnClear /*クリア*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #506581;
    color: #fff;
    border: solid 1px #506581;
    border-radius: 25px;
}

    button.btnSelectAll:hover,
    button.btnCancelAll:hover,
    button.btnOpenCloseAll:hover,
    button.btnSetting:hover,
    button.btnDeleteBase:hover,
    button.btnClear:hover,
    button.btnSelectAll:focus,
    button.btnCancelAll:focus,
    button.btnOpenCloseAll:focus,
    button.btnSetting:focus,
    button.btnDeleteBase:focus,
    button.btnClear:focus {
        background-color: #334252;
        text-decoration: underline;
    }

    button.btnSelectAll:active,
    button.btnCancelAll:active,
    button.btnOpenCloseAll:active,
    button.btnSetting:active,
    button.btnDeleteBase:active,
    button.btnClear:active {
        text-decoration: none;
    }

button.btnGridOption /*Grid用ボタン（追加/全削除）*/ {
    height: 2em;
    width: 7em;
    background-color: #7b8ca1;
    color: #fff;
    border: none;
    margin-bottom: 0.5em;
    margin-left: 5px;
    border-radius: 5px;
}

    button.btnGridOption:hover,
    button.btnGridOption:focus {
        background-color: #888888;
        text-decoration: underline;
    }

    button.btnGridOption:active {
        text-decoration: none;
    }

button.btnPreview, /*プレビュー*/
button.btnDownload /*ダウンロード*/ {
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #00aa64;
    color: #fff;
    border: solid 1px #00aa64;
    border-radius: 25px;
}

    button.btnDownload:hover,
    button.btnDownload:focus {
        background-color: #015e37;
        text-decoration: underline;
    }

    button.btnDownload:active {
        text-decoration: none;
    }

button.btnLogout /*ログアウト*/ {
    min-width: 8em;
    margin: 0.5em;
    padding: 0em 1em;
    background-color: #506581;
    color: #fff;
    border: solid 1px #506581;
    border-radius: 25px;
}

    button.btnLogout:hover,
    button.btnLogout:focus {
        background-color: #405266;
        text-decoration: underline;
    }

@media screen and (max-width: 768px) {
    button.btnLogout /*ログアウト*/ {
        height: 2.5em;
    }
}

/* その他ボタン（小さめ）*/
button.btnMini {
    margin: 0em 0.2em;
    padding: 0.2em 1em;
    height: auto;
    min-width: initial;
}

/*以下は使わない*/
    input.select { /*選択*/
        height: 2em;
        width: 7em;
        background-color: #7b8ca1;
        color: #fff;
    }

    input.select:hover {
        background-color: #647382;
    }

button.btnRed { /*赤*/
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #d94b5d;
    color: #fff;
    border: solid 1px #d94b5d;
    border-radius: 25px;
}

        button.btnRed:hover {
            background-color: #89303f;
            color: #fff;
        }

        button.btnRed:active {
            text-decoration: none;
        }

button.btnLOrange { /*オレンジ*/
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #ef9a55;
    color: #fff;
    border: solid 1px #ef9a55;
    border-radius: 25px;
}

        button.btnLOrange:hover {
            background-color: #a3683b;
        }

button.btnBlue { /*青*/
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #4269cf;
    color: #fff;
    border: solid 1px #4269cf;
    border-radius: 25px;
}

        button.btnBlue:hover {
            background-color: #335399;
        }

button.btnLBlue { /*水色*/
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #66a2d7;
    color: #fff;
    border: solid 1px #66a2d7;
    border-radius: 25px;
}

        button.btnLBlue:hover {
            background-color: #5193c4;
        }

button.btnDBlue { /*紺色*/
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #506581;
    color: #fff;
    border: solid 1px #506581;
    border-radius: 25px;
}

        button.btnDBlue:hover {
            background-color: #405266;
        }



button.btnDBlueH { /*紺色*/
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #506581;
    color: #fff;
    border: solid 1px #506581;
    border-radius: 25px;
}

        button.btnDBlueH:hover {
            background-color: #405266;
        }

        button.btnDBlueH:active {
            text-decoration: none;
        }


button.btnGreen { /*緑色*/
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #00aa64;
    color: #fff;
    border: solid 1px #00aa64;
    border-radius: 25px;
}

        button.btnGreen:hover {
            background-color: #015e37;
            color: #fff;
        }

        button.btnGreen:active {
            text-decoration: none;
        }



button.btnGray { /*灰色*/
    min-width: 8em;
    height: 2.5em;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #a6a6a6;
    color: #fff;
    border: solid 1px #a6a6a6;
    border-radius: 25px;
}

        button.btnGray:hover {
            background-color: #888888;
            color: #fff;
        }

        button.btnGray:active {
            text-decoration: none;
        }
/*以上は使わない*/

button.btnS,
input.btnS {
    min-width: 6em;
    padding: 0;
}

.size8 {
    width: 8em;
}

.size10 {
    width: 10em;
}

.heightAuto {
    height: auto !important;
}

/*ボタン↑*/

/*--------------
　　テキスト
--------------*/
.cell-ledal-holiday {
    background-color: violet;
}

.cell-holiday {
    background-color: lightblue;
}

/*テキストエリア↓*/
.pcXS {
    max-width: 3.9em;
}

.pcS {
    max-width: 5em;
}

.pcM {
    max-width: 13em;
}

.pcL {
    max-width: 50em;
}

.approve-pc-comment {
    width: 35em;
    height: 7em;
}

@media screen and (max-width: 768px) {
    .spXS {
        max-width: 3.9em;
    }

    .spS {
        max-width: 5em;
    }

    .spM {
        max-width: 13em;
    }

    .spL {
        max-width: 50em;
    }

    .approve-sp-comment {
        width: 13em;
        height: 3em;
    }
}
/*テキストエリア↑*/

/*テキスト装飾↓*/
.clGr {
    color: #63c8ba;
}

.clDGray {
    color: #51687a;
}

.clLiteGray {
    color: #828282;
}

.clRed {
    color: #d94b5d;
}

.clOrange {
    color: #ef9a55;
}

.clBlue {
    color: #4269cf;
}

.txB600 {
    font-weight: 600;
}

.txBolder {
    font-weight: bolder;
}

.txS70 {
    font-size: 70%;
}

.txS120 {
    font-size: 120%;
}

.txS140 {
    font-size: 140%;
}

.txS200 {
    font-size: 200%;
}
/*テキスト装飾↑*/

/*--------------
　　アイコン（Font Awesome）
--------------*/
/*Font Awesome↓*/
.fa-edit, /*編集*/
.fa-copy, /*コピー*/
.fa-trash-alt, /*削除*/
.fa-indent, /*詳細*/
.fa-caret-square-left, /*選択*/
.fa-calendar-alt, /*カレンダー*/
.fa-user-plus, /*対象者登録*/
.fa-users-cog, /*要員編集*/
.fa-link, /*設定*/
.fa-unlink, /*解除*/
.fa-undo /*復帰*/ {
    color: #506581;
}

    .fa-edit:hover,
    .fa-copy:hover,
    .fa-trash-alt:hover,
    .fa-indent:hover,
    .fa-caret-square-left:hover,
    .fa-calendar-alt:hover,
    .fa-user-plus:hover,
    .fa-users-cog:hover,
    .fa-link:hover,
    .fa-unlink:hover,
    .fa-undo:hover {
        color: #334252;
    }

    .fa-edit:before,
    .fa-copy:before, 
    .fa-trash-alt:before,
    .fa-indent:before, 
    .fa-caret-square-left:before,
    .fa-calendar-alt:before,
    .fa-user-plus:before, 
    .fa-users-cog:before,
    .fa-link:before, 
    .fa-unlink:before,
    .fa-undo:before {
        cursor: pointer;
    }

.fa-search /*検索*/ {
    color: #ef9a55;
}

    .fa-search:hover {
        color: #a3683b;
    }

    .fa-search:before {
        cursor: pointer;
    }

.fa-readme /*凡例*/ {
    color: #a6a6a6;
}

    .fa-readme:hover {
        color: #888888;
    }

    .fa-readme:before {
        cursor: pointer;
    }

.fa-question-circle /*補足*/ {
    color: #a6a6a6;
}

    .fa-question-circle:hover {
        color: #888888;
    }

    .fa-question-circle:before {
        cursor: pointer;
    }

.fa-chevron-circle-down /*展開*/ {
}

    .fa-chevron-circle-down:before {
        cursor: pointer;
    }

.fa-chevron-circle-up /*縮小*/ {
}

    .fa-chevron-circle-up:before {
        cursor: pointer;
    }

.fa-inactive /*非活性*/ {
    color: #e2e2e2;
}

    .fa-inactive:hover {
        color: #e2e2e2;
    }
/*Font Awesome↑*/

.icn-blue {
    padding: 0.5em;
    color: #4269cf;
}

.icn-white {
    padding: 0 0.2em;
    color: white;
}
    .icn-white:hover {
        color: white;
    }

/*イレギュラー＆却下依頼のアイコン*/
/*Gridセル内*/
.fa-exc-triangle-cell {
    color: #d94b5d;
    cursor: pointer;
    font-size: initial;
}

/*ラベル用*/
.fa-exc-triangle {
    color: #d94b5d;
}
/*ボタン用*/
.fa-exc-triangle-button {
    color: #d94b5d;
    cursor: pointer;
    vertical-align: middle;
}
.fa-exc-triangle-button:hover {
    color: #89303f;
}

/* IE限定設定 */
@media all and (-ms-high-contrast: none){
    .fa-search, /*検索*/
    .fa-readme, /*凡例*/
    .fa-question-circle, /*補足*/
    .fa-chevron-circle-down, /*展開*/
    .fa-chevron-circle-up, /*縮小*/
    .fa-edit,
    .fa-copy, 
    .fa-trash-alt,
    .fa-indent, 
    .fa-caret-square-left,
    .fa-calendar-alt,
    .fa-user-plus, 
    .fa-users-cog,
    .fa-link, 
    .fa-unlink,
    .fa-undo {
        cursor: pointer;
    }
}
/* Edge限定設定 */
@supports (-ms-ime-align:auto) {
    .fa-search, /*検索*/
    .fa-readme, /*凡例*/
    .fa-question-circle, /*補足*/
    .fa-chevron-circle-down, /*展開*/
    .fa-chevron-circle-up, /*縮小*/
    .fa-edit,
    .fa-copy,
    .fa-trash-alt,
    .fa-indent,
    .fa-caret-square-left,
    .fa-calendar-alt,
    .fa-user-plus,
    .fa-users-cog,
    .fa-link,
    .fa-unlink,
    .fa-undo {
        cursor: pointer;
    }

    input[type="text"]::-ms-clear {
        display: none;
    }
}


/*--------------
　　背景
--------------*/
/*背景↓*/
.bgGray { /*背景グレー*/
    background-color: #f5f5f5;
}

.bgGreen { /*背景グリーン*/
    background-color: #daefeb;
}

.bgBlue { /*背景ブルー*/
    background-color: #d1dfe8;
}

.bgOrange { /*背景オレンジ*/
    background-color: #eddacc;
}
.bgResultColor { /*背景：標準*/
    border: solid 2px #ccc;
}
.bgApplyColor { /*背景：申請の識別色：オレンジ*/
    background-color: #fff2be;
    border: solid 2px #ef9a55;
}
/*背景↑*/

/*-----------
　　地図
-----------*/

#map,
#allMap {
    width: 40em;
    height: 30em;
}

@media screen and (max-width: 768px) {
    #map,
    #allMap {
        width: 20em;
        height: 30em;
    }
}

/*----------------------------------------
　　8.  Footer - フッター
----------------------------------------*/
footer {
    margin: 0;
    padding: 1em 0;
    /*position: absolute;*/ /*←絶対位置*/
    /*bottom: 0;*/ /*下に固定*/
    width: 100%;
    background-color: #000066;
    color: #fff;
    text-align: center;
    font-size: 80%;
}

@media screen and (max-width: 768px) {
}

/*----------------
　　ステータス
----------------*/
.status {
    min-width: 7em;
    margin: 0em 0.5em;
    padding: 0.3em;
    font-weight: bold;
    text-align: center;
}

.wj-calendar /deep/ .bg-00 {
    background-color: #FFFFFF;
}

.bg-00 {
    background-color: #FFFFFF;
}

.bd-00 {
    border: 0.2em solid black;
}

.wj-calendar /deep/ .bg-01 {
    background-color: #FF6680;
}

.bg-01 {
    background-color: #FF6680;
}

.bd-01 {
    border: 0.2em solid hotpink;
}

.wj-calendar /deep/ .bg-05 {
    background-color: #FFC0CB;
}

.bg-05 {
    background-color: #FFC0CB;
}

.bd-05 {
    border: 0.2em solid rebeccapurple;
}

.wj-calendar /deep/ .bg-09 {
    background-color: #ECFFA5;
}

.bg-09 {
    background-color: #ECFFA5;
}

.bd-09 {
    border: 0.2em solid #31B93C;
}

.wj-calendar /deep/ .bg-1 {
    background-color: #9FD8F5;
}

.bg-1 {
    background-color: #9FD8F5;
}

.bd-1 {
    border: 0.2em solid #007FAB;
}

.wj-calendar /deep/ .bg-2 {
    background-color: #FCD7A1;
}

.bg-2 {
    background-color: #FCD7A1;
}

.bd-2 {
    border: 0.2em solid #AE7A26;
}

.wj-calendar /deep/ .bg-3 {
    background-color: #A5D4AD;
}

.bg-3 {
    background-color: #A5D4AD;
}

.bd-3 {
    border: 0.2em solid #007B43;
}

.wj-calendar /deep/ .bg-4 {
    background-color: #A3BCE2;
}

.bg-4 {
    background-color: #A3BCE2;
}

.bd-4 {
    border: 0.2em solid #005A8E;
}

.wj-calendar /deep/ .bg-5 {
    background-color: #DED46E;
}

.bg-5 {
    background-color: #DED46E;
}

.bd-5 {
    border: 0.2em solid #B6AC2B;
}

.wj-calendar /deep/ .bg-6 {
    background-color: #5AA572;
}

.bg-6 {
    background-color: #5AA572;
}

.bd-6 {
    border: 0.2em solid #007B43;
}

.wj-calendar /deep/ .bg-7 {
    background-color: #B491B2;
}

.bg-7 {
    background-color: #B491B2;
}

.bd-7 {
    border: 0.2em solid #352A6F;
}

.wj-calendar /deep/ .bg-8 {
    background-color: #D7A861;
}

.bg-8 {
    background-color: #D7A861;
}

.bd-8 {
    border: 0.2em solid #AE7A26;
}

.wj-calendar /deep/ .bg-9 {
    background-color: #49AAD2;
}

.bg-9 {
    background-color: #49AAD2;
}

.bd-9 {
    border: 0.2em solid #007FAB;
}

.wj-calendar /deep/ .bg-locked {
    background-color: #D3D3D3;
}

.bg-locked {
    background-color: #D3D3D3;
}

.bd-locked {
    border: 0.2em solid #ABA7A7;
}

/*--------------------
　　カレンダー凡例
--------------------*/

.calendar-supple-paddiing {
    padding-right: 2em;
}

.calendar-supple-border {
    border: solid 1px #666;
}

/*
.calendar-supple-bg01 {
    background-color: pink;
}

.calendar-supple-bg05 {
    background-color: mediumpurple;
}

.calendar-supple-bg09 {
    background-color: lightyellow;
}

.calendar-supple-bg1 {
    background-color: lightgreen;
}

.calendar-supple-bg2 {
    background-color: aquamarine;
}

.calendar-supple-bg3 {
    background-color: lightgray;
}

.calendar-supple-bg4 {
    background-color: lightgray;
}

.calendar-supple-bg5 {
    background-color: lightgray;
}

.calendar-supple-bg6 {
    background-color: lightgray;
}

.calendar-supple-bg7 {
    background-color: lightgray;
}

.calendar-supple-bg8 {
    background-color: lightgray;
}

.calendar-supple-bg9 {
    background-color: lightgray;
}
.calendar-supple-bgLocked {
    background-color: navy;
}
*/

.calendar-supple-bdSelecting {
    border: solid 2px #4d97d4;
}


/*--------------------
　　非活性スタイル
--------------------*/
input:disabled,
button:disabled {
    background-image: none;
    background-color: #f3f3ef;
    border-color: #ccc;
    color: #888;
    pointer-events: none;
}

div.disabled {
    color: #666;
    pointer-events: none;
}

    div.disabled label .radio-display:before,
    div.disabled label .check-display:before {
        background-color: #ccc;
    }