@charset "UTF-8";
body, input, select, textarea, button, a {
	font-family: Roboto, "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "ヒラギノ角ゴ Pro W3", "Lucida Grande", "Hiragino Kaku Gothic Pro", Osaka, Verdana, "ＭＳ Ｐゴシック", sans-serif;
}
body {
	color: #111111;
	background-color: #f2f3f5;
}
p {
	margin: 10px 0;
	line-height: 130%;
}
#header {
	background-color: #007E8A;
	/*height: 65px;*/
	height: 55px;
	position: sticky;
	top: 0;
	z-index: 999;
}
#header .content-inner {
	width: 100%;
}
#system-logo {
	width: 10%;
}
#system-logo img {
	margin: 9px 0 0 6px;
	height: 38px;
}
#header-nav {
	width: 80%;
	min-width: 800px;
	padding-top: 15px;
	position: relative;
}
#header-nav > ul {
	margin-left: 25%;
}
@media only screen and (max-width: 1280px) {
	#header-nav > ul {
		margin-left: 8%;
	}
}
#header-nav ul li {
	float: left;
}

#user-info {
	width: 150px;
	color: white;
	vertical-align: middle;
	padding-top: 12px;
	text-align: right;
}
#user-name {
	display: inline;
	font-size: 0.9rem;
	margin-right: 20px;
	position: relative;
	top: -12px;
}
@media only screen and (max-width: 1280px) {
	#user-name {
		margin-right: 5px;
	}
}
.user-icon {
	border-radius: 50%;
	background-color: #e2e3e5;
	width: 32px;
}
.nav {
	display: flex;
	justify-content: flex-start;
	list-style-type: none;
}
.nav li {
	position: relative;
	width: auto;
}
.nav li a {
	color: white;
	font-size: 1rem;
	margin: 0;
	padding: 10px 50px 10px 50px;
	text-align: center;
	text-decoration: none;
	border-left: 1px dotted #22646e;
	white-space: nowrap;
}
@media only screen and (max-width: 1280px) {
	.nav li a {
		padding: 10px 20px 10px 20px;
	}
}

/* .nav li a:hover {} */

.nav-sub {
	position: absolute;
	margin-top: 0;
	padding: 12px 0 0 0;
	display: none;
	z-index: 1000;
}
.nav-sub li a {
	width: 197px;
	padding: 12px 0 12px 0;
	display: block;
	color: #fff;
	font-size: 1rem;
	text-decoration: none;
	background-color: #007E8A;
	font-weight: normal;
	transition: 0.25s;
}
.nav-sub li a:hover {
	background: #046b75;
	transition: 0.25s;
}
.menu {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}
.menu li {
	position: relative;
	width: auto;
}
.menu li a {
	color: #384b70;
	font-size: 1.05rem;
	font-weight: normal;
	margin: 0;
	padding: 3px 25px 3px 25px;
	text-align: center;
	text-decoration: none;
}
.menu li span {
	color: #384b70;
	/* font-size: 1.05rem; */
	font-weight: normal;
	margin: 0;
	padding: 3px 0px 3px 0px;
	text-align: center;
	text-decoration: none;
}
.menu li a:hover {
	opacity: 0.7;
}
.content {
	padding: 10px 10px 10px 10px;
	clear: both;
}
.content-bottom {
	border-top: 5px solid #c6cfd4;
}
.content-inner {
	margin: 0 auto;
	width: 1240px;
	/*width: 1500px;*/
	line-height: normal;
}
@media only screen and (max-width: 1400px) {
	/*
	.content-inner {
		width: 1240px;
	}
	*/
}
@media only screen and (max-width: 1200px) {
	.content-inner {
		width: 1000px !important;
	}
}
@media only screen and (max-width: 1020px) {
	.content-inner {
		width: 100% !important;
		padding: 0 10px !important;
	}
}
.title {
	height: 70px;
	width: 100%;
	/*background-color: #e2e8eb;*/
	background-color: #e7ebed;
	min-height: 70px;
}
footer {
	/*background-color: #222222;*/
	margin-top: 20px;
	height: 30px;
}
h1 {
	font-size: 23px;
	font-weight: bold;
	text-align: left;
	color: #1a6771;
	padding-top: 16px;
	margin-left: 0.5vw;
}
h2 {
	background-color: #c6cfd4;
	font-size: 18px;
	height: 42px;
	line-height: 42px;
	padding-left: 15px;
	padding-right: 15px;
	font-weight: normal;
	margin: 5px 0 5px 0;
}
h4 {
	font-size: 15px;
	color: #224b52;
	display: inline-block;
	padding: 0 187px 0px 12px;
	margin-top: 10px;
}
a:link, a:hover {
	cursor: pointer;
}
input[type=text], input[type=date], input[type=month], input[type=year], input[type=tell], input[type=number], input[type=password], select, textarea {
	background-color: white;
	border: 1px solid #cccccc;
	border-radius: 5px;
	height: 36px;
	width: 98%;
	margin: 0;
	/*padding-left: 10px;
	padding-right: 10px;*/
	text-indent: 10px;
	font-size: 1rem;
}
textarea {
	text-indent: 0;
}
input:disabled, select:disabled, textarea:disabled {
	color: #000000;
	background-color: #ebeced;
	opacity: 1;
}
input[type=date] {
	height: 36px;
	width: 90%;
	text-indent: 5px;
	padding-right: 5px;
}
input[type=number] {
	text-align: right;
}
/*-- for datalist input elemnt --*/
input.data-list {
    text-indent: unset !important;
    padding: 0.1rem 0.625rem !important;
    display: block !important;
    width: 92% !important;
}
/*-- // for datalist input elemnt --*/
select {
	background-image: url(../img/btn-pulldown.svg);
	background-repeat: no-repeat;
	background-position: right center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 35px !important;
}
select::-ms-expand {
	display: none;
}
input[type=checkbox] {
	transform: scale(1.4);
}
fieldset {
	border: none !important;
}
table {
	width: 100%;
	margin: 3px 0 20px 0;
	clear: both;
}
th, td {
	border-collapse: collapse;
	box-sizing: border-box;
	padding: 6px 10px 6px 10px;
	border-bottom: 1px solid #bbbbbb;
	vertical-align: middle;
	line-height: 120%;
	height: 43px;
}
th {
	padding: 6px 10px 5px 10px;
	text-align: left;
	font-weight: bold;
	color: #224b52;
	font-size: 0.9rem;
}
td {
	font-size: 1rem;
}
td span {
	margin: 0 3px;
}
.list-table {
	border-bottom: 2px solid #666666;
}
.list-table th {
	font-weight: normal;
	border-bottom: 2px solid #666666;
	white-space: nowrap;
	font-size: 0.85em;
	/*color: #1c4b52;*/
	color: #224b52;
	background-color: #f2f3f5;
	font-weight: bold;
}
.list-table td {
	border: none;
	border-bottom: 1px solid #bbbbbb;
	background-color: white;
	height: 45px;
}
/*
.list-table tr:nth-child(odd) td {
	background: #f2f2f2;
}
*/
.list-table th, .list-table td {
	padding: 4px 4px;
}
td.no-border {
	border-bottom: none;
}
.half-table {
	border-top: 2px solid #333333;
	border-bottom: 2px solid #333333;
}
.half-table td {
	background: white;
}
.btn {
	font-family: Roboto, "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "ヒラギノ角ゴ Pro W3", "Lucida Grande", "Hiragino Kaku Gothic Pro", Osaka, Verdana, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 1.2rem;
	background-color: white;
	height: 40px;
	color: #384b70;
	border-radius: 6px;
	padding: 0 15px;
	white-space: nowrap;
	transition: 0.25s;
	border: 1px solid #384B70;
	min-height: 42px;
}
.btn:hover {
	cursor: pointer;
	background-color: #edf2fa;
	color: #384b70;
	border: 1px solid #384B70;
}
/* .btn:active {} */
.btn-primary {
	background-color: #384b70;
	color: white;
}
.btn-primary:hover {
	color: white;
	background-color: #384b70;
	opacity: 0.85;
	font-weight: normal;
	transition: 0.25s;
	border-color: black;
}
.btn-danger {
	background-color: #dc3545;
	color: white;
}
.btn-danger:hover {
	background-color: #b62936;
	color: white;
}
.btn-orange {
	background-color: darkorange;
	color: white;
}
.btn-orange:hover {
	background-color: darkorange;
	color: white;
}
.btn-sm {
	font-size: 1rem;
	min-height: 38px;
	height: 38px;
	padding: 0 10px;
}
.txt-btn {
	color: #384b70;
	font-size: 18px;
	font-weight: normal;
}
.txt-btn:hover {
	text-decoration: none;
}
.txt-btn img {
	height: 18px;
	margin-right: 5px;
	position: relative;
	top: 2px;
	filter: invert(26%) sepia(52%) saturate(458%) hue-rotate(180deg) brightness(92%) contrast(91%);
}
.txt-btn-02 {
	color: #384b70;
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
	margin: 0 6px 0 6px;
	letter-spacing: -1px;
}
.txt-btn-02:hover {
	text-decoration: none;
}
.txt-btn-02 img {
	height: 22px;
	margin-right: 7px;
	position: relative;
	top: 4px;
	filter: invert(26%) sepia(52%) saturate(458%) hue-rotate(180deg) brightness(92%) contrast(91%);
}
.btn-icon {
	width: 28px;
	filter: invert(26%) sepia(52%) saturate(458%) hue-rotate(180deg) brightness(92%) contrast(91%);
}
.btn-icon:hover {
	cursor: pointer;
	filter: invert(72%) sepia(40%) saturate(3097%) hue-rotate(343deg) brightness(95%) contrast(94%);
}
.icon-opened, .icon-closed {
	width: 26px;
	filter: invert(26%) sepia(52%) saturate(458%) hue-rotate(180deg) brightness(92%) contrast(91%);
}
.icon-opened:hover, .icon-closed:hover {
	opacity: 0.8;
	cursor: pointer;
}
.row {
	display: flex;
}
.row div {
	width: 100%;
}
.btn-area-top {
	text-align: center;
	margin: 10px auto;
}
/* .btn-area-top button {} */
.btn-area-top-left {
	text-align: left;
}
.btn-area-top-right {
	text-align: right;
}
.btn-area-bottom {
	text-align: center;
	margin: 10px 0 10px 0;
}
.btn-area-bottom button {
	min-width: 10vw;
}
.btn-area-bottom-left {
	text-align: left;
}
.btn-area-bottom-right {
	text-align: right;
}
h1 span, h2 span {
	float: right;
}
.search {
	/*background-color: #f9fcfe;*/
	background-color: #eceff1;
	padding: 15px 0 20px 0;
}
.item {
	display: flex;
	width: 50%;
}
dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
dt {
	width: 30%;
	font-size: 0.95rem;
	margin: 6px 0;
	padding-top: 8px;
	padding-left: 12px;
}
dd {
	width: 70%;
	margin: 6px 0;
	padding-right: 20px;
}
dd span {
	white-space: nowrap;
	display: inline;
	line-height: 30px;
	margin: 8px 5px 0 5px;
}
dd input[type=checkbox] {
	margin-top: 13px;
}
td span {
	white-space: nowrap;
	display: inline;
	line-height: 30px;
	margin: 8px 5px 0 5px;
}
.toggle-btn {
	float: right;
	display: inline-block;
	height: 30px;
	width: 30px;
	background-image: url("../img/icon-arrow-up.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30px;
	margin: 2px 10px 0 0;
}
.toggle-btn:hover {
	cursor: pointer;
}
.toggle-btn.closed {
	background-image: url("../img/icon-search.svg");
}
.toggle-btn.black {
	filter: invert(0%) sepia(6%) saturate(4%) hue-rotate(177deg) brightness(102%) contrast(87%);
}
select.pager {
	width: 80px;
}
th.th-2line {
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: none;
	height: 20px;
}
input.w-50, select.w-50 {
	width: 50px;
}
input.w-75, select.w-75 {
	width: 75px;
}
input.w-100, select.w-100 {
	width: 100px;
}
input.w-120, select.w-120 {
	width: 120px;
}
input.w-150, select.w-150 {
	width: 150px;
}
input.w-200, select.w-200 {
	width: 200px;
}
input.w-auto, select.w-auto {
	width: auto;
	min-width: 80px;
}
.green td, th.green, td.green {
	background-color: #D7F1F4;
}
.purple td, th.purple, td.purple {
	background-color: #f2dfeb;
}
.orange td, th.orange, td.orange {
	background-color: #FCECDE;
}
.yellow td, th.yellow, td.yellow {
	background-color: yellow;
}
.h-fixed {
	height: 236px;
}
span.square-red, span.square-blue, span.square-green , span.square-purple {
	padding: 0px 5px 0px 5px;
	border-radius: 2px;
	font-size: 0.8rem;
	min-width: 50px;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}
span.square-red {
	background-color: #c82626;
	color: white;
}
span.square-purple {
	background-color: #970060;
	color: white;
}

span.square-blue {
	background-color: #3a4b70;
	color: white;
}
span.square-green {
	background-color: #237e8a;
	color: white;
}
td span.square-red, td span.square-blue, td span.square-green,td span.square-purple {
	line-height: 23px;
	margin: 0;
}
.progress-paine {
	width: auto;
	margin-top: 1vw;
	margin-bottom: 1vw;
}
span.purple {
	color:#970060;
}
td.purple {
	color: #970060;
}
div.purple {
	color: #970060;
}
span.red {
	color: red;
}
td.red {
	color: red;
}
div.red {
	color: red;
}
th.amount, td.amount {
	text-align: right;
	padding-right: 10px;
}
.task-progress-header {
	font-family: "Open Sans", "Helvetica Neue", sans-serif;
	font-size: 16px;
	padding: 15px;
	margin-left: 20px;
}
.progressbar a {
	text-decoration: none;
	display: block;
}
.progressbar li img {
	width: 15px;
}
.progressbar {
	padding: 0px;
	display: flex;
	width: 100%;
	counter-reset: step;
}
.progressbar li {
	list-style-type: none;
	width: 14%;
	float: left;
	font-size: 1.1rem;
	font-weight: 700;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	color: #999999;
}
.progressbar li:before {
	width: 33px;
	height: 33px;
	content: counter(step);
	counter-increment: step;
	line-height: 33px;
	border: 2px solid #999999;
	display: block;
	text-align: center;
	margin: 0 auto 5px auto;
	border-radius: 50%;
	background-color: white;
}
.progressbar li:after {
	width: 100%;
	height: 2px;
	content: '';
	position: absolute;
	background-color: #7d7d7d;
	top: 15px;
	left: -50%;
	z-index: -1;
}
.progressbar li a {
	color: #237e8a;
	cursor: context-menu;
}
.progressbar li:first-child:after {
	content: none;
}
.progressbar li.active {
	color: #237e8a;
}
.progressbar li.active:before {
	border-color: #237e8a;
}
.progressbar li.active + li:after {
	background-color: #237e8a;
}
.progressbar li.now-step {
	color: #237e8a;
	font-weight: bold;
}
.progressbar li.now-step:before {
	border: 2px solid #237e8a;
	background-color: #237e8a;
	color: #fdfdfd;
}
.progressbar li.now-step + li:after {
	background: linear-gradient(90deg, #237e8a 0%, rgba(125, 125, 125, 1) 90%);
}
#overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.3);
	display: none;
	z-index: 9999
}
.modal {
	width: 900px;
	position: fixed;
	/*background-color: #f8f9fa;*/
	background-color: #f2f3f5;
	display: none;
	z-index: 99999
}
.modal-title {
	font-weight: bold;
	font-size: 1.5rem;
	padding: 35px 40px 25px 40px;
	color: #1a6771;
}
.modal-close {
	background-image: url("../img/icon-x-lg.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30px;
	width: 40px;
	height: 40px;
	display: block;
	float: right;
	margin: -15px -5px 0 0;
}
.modal-contents {
	padding: 5px 45px 0 45px;
}
.modal-bottom {
	padding: 0 0 20px 0;
	text-align: center;
}


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


.form-control::placeholder {
	color: #aaa;
}

 .ui-dialog .ui-dialog-titlebar-close {
	background-color:#ffffff;
}
.ui-widget-header {
	background:#007E8A;
	font-family: Roboto, "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "ヒラギノ角ゴ Pro W3", "Lucida Grande", "Hiragino Kaku Gothic Pro", Osaka, Verdana, "ＭＳ Ｐゴシック", sans-serif;

	color:#ffffff;
}
.ui-dialog-titlebar-close::before {
    content: '×';
    position: absolute;
    top: -2px;
    left: 2px;
}

.ui-dialog-buttonset button{
	width: 100px;
	font-family: Roboto, "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "ヒラギノ角ゴ Pro W3", "Lucida Grande", "Hiragino Kaku Gothic Pro", Osaka, Verdana, "ＭＳ Ｐゴシック", sans-serif;

}
.alert-msg-box {
    margin: 1rem;
    max-height: 15vh !important;
}
.alert-msg-box p {
	text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.ui-dialog:has(.alert-msg-box) {
	.ui-widget-header {
		background: #edbc6d !important;
	}
}
input:read-only {
	background-color: #e9e9e9;
  }

/*検索結果が0件のメッセージ*/
.no-results {
	text-align: center;
	padding: 50px 20px;
	background-color: #f9f9f9;
	border-radius: 8px;
	margin: 20px 0;
}
.no-results h3 {
	margin-bottom: 10px;
	color: #333;
}

.no-results p {
	color: #666;
}
/*検索結果が超過のメッセージ*/
.over-results {
	text-align: center;
	padding: 50px 20px;
	background-color: #f9f9f9;
	border-radius: 8px;
	margin: 20px 0;
}
.over-results h3 {
	margin-bottom: 10px;
	color: #333;
}

.over-results p {
	color: #666;
}
/*  検索前非表示*/
.display-none-page{
	display: none;
}
/*エラーメッセージ*/
.error-msg {
	padding: 10px 17px;
	line-height: 160%;
	background-color: #fbebeb;
	border: 1px solid #b4201a;
	font-size: 90%;
	margin-bottom: 10px;
}
.error-msg h5 {
	color: #b4201a;
	font-size: 20px;
	padding-bottom: 20px;
}
.error-msg h5 img {
	height: 32px;
	position: relative;
	top: 10px;
	padding-right: 8px;
	padding-left: 3px;
	filter: invert(18%) sepia(48%) saturate(4762%) hue-rotate(354deg) brightness(93%) contrast(88%);
}
.error-msg ul li {
	list-style: inside;
	padding-left: 5px;
}
/*一覧縦スクロール*/
.sticky-table-box {
	max-height: calc(100vh - 275px);
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
/*一覧ヘッダー固定*/
.sticky-table-box .list-table thead th{
	position: sticky;
	top: 0;
	z-index:1;
}
/*一覧行間*/
.list-table tbody td div span {
	margin: 0;
	line-height: 120%;
}
/*文字折り返し*/
.break-word {
	overflow-wrap: break-word; 
	white-space: normal;
}

.focusAmount{
	text-align: right;
}

/*入力欄幅調整*/
.width-adjust {
	width: 99.3%!important;
}



.tooltips {
  position: relative; /* ツールチップの位置の基準に */
  cursor: pointer; /* カーソルを当てたときにポインターに */
}

/* ツールチップのテキスト */
.tooltip-text {
  opacity: 0; /* はじめは隠しておく */
  visibility: hidden; /* はじめは隠しておく */
  position: absolute; /* 絶対配置 */
  left: 50%; /* 親に対して中央配置 */
  transform: translateX(-50%); /* 親に対して中央配置 */
  bottom: -30px; /* 親要素下からの位置 */
  display: inline-block;
  padding: 5px; /* 余白 */
  white-space: nowrap; /* テキストを折り返さない */
  font-size: 1.2rem; /* フォントサイズ */
  line-height: 1.3; /* 行間 */
  background: #333; /* 背景色 */
  color: #fff; /* 文字色 */
  border-radius: 3px; /* 角丸 */
  transition: 0.3s ease-in; /* アニメーション */
}

/* ホバー時にツールチップの非表示を解除 */
.tooltips.show .tooltip-text {
  opacity: 1;
  visibility: visible;
}