/*
	IO Works スタイルシート
*/

/*** The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除、displayは除く */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)){
    all: unset;
    display: revert;
}
/* box-sizingの優先値 */
*,
*::before,
*::after{
    box-sizing: border-box;
}
/* リストのスタイル（箇条書き・番号）を削除 */
ol, ul {
    list-style: none;
}
/* 画像がコンテナを超えないようにするため */
img {
    max-width: 100%;
}
/* テーブルのセル間のスペースを削除 */
table{
    border-collapse: collapse;
}
/*** // The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/

/**
 * 全体レイアウト
 */
#container {
  margin: 2vh 3vw;
  display: grid;
  grid-template-columns: 200px auto; /* 左側：メニュー、右側：メイン */
  /*grid-template-rows: repeat(2,auto);*/
  grid-template-rows: 50px auto; /* 上側：ヘッダ、下側：メイン */
  grid-column-gap: 1vw;
  /*grid-gap: 2px;*/ /* grid確認用 */
}

/* grid-area: grid-row-start/grid-col-start/grid-row-end/grid-col-end */
#container header { /* ヘッダ(上) */
  grid-area: 1/1/2/3;
}

#container aside { /* メニュー(左側) */
  grid-area: 2/1/3/2;
  z-index: 999;
}
#container main { /* メイン(右側) */
  grid-area: 2/2/3/3;
  align-self: stretch;
  z-index: 1;
  width: calc(94vw - 1vw - 200px); /* 左右マージンの残り - メニューとのgap - メニュー幅 */
}
#container.login-container main { /* mainをasideの上にかぶせる */
  grid-area: 2/1/3/3;
  width: calc(94vw); /* 左右マージンの残り */
}
#container.login-container aside { /* メニューは後ろに。ロゴがあるので消しはしない */
	z-index: 0;
}

#container > * { /* grid確認用 */
  /*background-color: #ddd;*/
}

/* レスポンシブ用メニューボタン */
#container header #btn_menu
  {
	display: none;
	}
/* レスポンシブ用メニューボタン */
#container.login-container header #btn_menu
  {
	display: none;
	}

/**
 * 全体設定
 */
body *
  {
	font-size: 14px;
	color: #383838;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
  }
body a
  {
	cursor: pointer; /* リセットされているのでデフォルトを戻す */
  }


/*
	ヘッドセクション
*/
#container header {
	display: flex;
	/*flex-wrap: wrap;*/
	/*justify-content: space-between;*/
	column-gap: 1rem;
}

/*
	ヘッドセクション：ユーザー
*/
#container header #usr0
  {
	display: flex;
	height: 100%;
	align-items: center;
	font-weight: bold;
	gap: 0 10px;
	}

/*
 * ヘッドセクション：ロゴ
*/
#container header div.logo_h
	{
	text-align: center;
	height: 50px; /* ヘッダの高さと同じに指定。 */
	margin-right: auto; /* 左寄せ */
	}


/**
 * メニュー
 */
#container>aside *
	{
	font-weight: bold;
	}

#container>aside #ct_menu2
	{
	margin-top: 10px; /* mainのmargin-top と同じにする */
	background-color: #fff;
	text-align: center;
	}
#container>aside ul li
	{
	position: relative;
	border: solid 1px #c0c0c0;
	border-radius: 2px;
	}
#container>aside ul li + li /* liのborder重なり解消 */
  {
	border-top: none;
  }
#container>aside ul li a
	{
	display: block;
	padding: 16px;
	text-decoration: none;
	}
#container>aside ul li:hover
	{
	background-color: #408CC8;
	}
/* 第三メニューは、通常非表示 POPUP表示で右接続位置 */
#container>aside ul li ul
	{
	display: none;
	position: absolute;
	left: 100%;
	top: 0;
	width: 100%;
	}
/* 第三メニューは、マウスエンターでPOPUP表示 */
#container>aside ul li:hover ul
	{
	display: block;
	}

/* 第三メニューの設定 */
#container>aside ul li ul li
	{
	text-align: left;
	}
#container>aside ul li ul li:hover
	{
	}
#container>aside ul li ul li a
	{
	}

/* サイドメニュー 無効項目 ※開発時用 */
#container>aside ul li a.disabled
	{
	pointer-events: none;
	color: #666;
	cursor: initial;
	}

/*
	メインセクション
*/
main
  {
	display: flex;
	margin-top: 10px; /* aside.ul:first-child の margin-topと同じにする*/
	}

/*
	メインセクション・コンテンツ
*/
.cont
	{
	width: 100%;
	}

#login
	{
	margin: auto;
	border: solid 40px #f5f5f5;
	padding: 40px;
	}
#login label
	{
  max-width: 280px;
	margin: 0 auto 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
  align-items: center;
	}
#login label .title {
  align-items: center;
  width: 80px;
}
#login .btn
	{
	margin: 20px auto 0;
	display: block;
	width: fit-content;
	}

/* パネル */
.panel
	{
	padding:8px 16px;
	}
.panel > .bd1
	{
	position: relative;
	}
.panel > .bd1 > .bd2
	{
	padding:10px;
	border:solid 1px #5f85f5;
	border-radius:3px;
	}
/* 背景 */
.panel.bg-def
	{
	background:#FFFDF7;
	}

/*
	コンテンツエリア
*/
.list_body
  {
	overflow-x: auto;
  }
.lv_tbl
	{
	box-sizing: border-box;
	width: 100%;
	background: #fff;
	border: solid 1px #aaaaaa;
	border-collapse:collapse;
	border-spacing: 0;
	max-width: 100%;
	}
.lv_tbl tr th
	{
	padding:5px;
	background: #f0f0f0;
	border:solid 1px #aaa;
	font-weight:bold;
	text-align:center;
	white-space: nowrap;
	}
.lv_tbl tr td
	{
	padding-left: 20px;
	padding-right: 20px;
	vertical-align: middle;
	border:solid 1px #aaa;
	white-space: nowrap;
	}
.lv_hd
	{
	height: 48px;
	font-weight: bold;
	text-align: center;
	}
.lv_bd
	{
	height: 64px;
	border-top: solid 1px #e9e9e9;
	vertical-align: middle;
	}
.lv_vh
	{
	font-weight: bold;
	text-align: center;
	background-color: #e9e9e9;
	}
.lv_vh a
	{
	display: inline-block;
	margin-right: 5px;
	}
.lv_vh a:last-child
	{
	margin-right: 0;
	}


.lv_tbl tr td.wrap
	{
	white-space: normal;
	}

/*
	エディットビュー
*/
.evblock
	{
	display: flex;
	}
.qvblock
	{
	display: flex;
	}

.evlead
	{
	margin-top: 10px;
	margin-bottom: 10px;
	width: 240px;
	}

.qvlead
	{
	margin-top: 10px;
	width: 100%;
	display: flex;
	}
.qvlead .qvodrs,
.qvlead .qvcnts
	{
	margin-left: 10px;
	display: flex;
	align-items: center;
	}
.qvlead .qvodrs .lbl,
.qvlead .qvcnts .lbl
	{
	display: block;
	padding: 3px;
	margin-right: 3px;
	}
.qvlead .qvodrs iwu-select,
.qvlead .qvcnts iwu-select
	{
	width: auto;
	margin-right: 3px;
	}


/* ページ送り */
ul.page
	{
	display:inline-block;
	padding: 0;
	margin: 0;
	}
ul.page li
	{
	display:inline;
	}
ul.page li a
    {
	border: 1px solid #ddd; /* Gray */
	background-color: #ffffff;
	}

ul.page li a.noa
	{
	color:#000000;
	float:left;
	padding: 8px 8px;
	text-decoration:none;
	}
ul.page li a.act
	{
	color:#6FA9D7;
	float:left;
	padding: 8px 8px;
	text-decoration:none;
	}


/* インライン要素に変更 */
.inline
	{
	display:inline-block;
	margin-right:10px;
	}
.inline input[type="radio"],input[type="checkbox"]
	{
	position: static;
	margin-top: 0.15em;
	margin-right:4px;
	float:left;
	}
.inline_box
	{
	display: inline-block;
	}
.inline_flex
	{
	display: inline-flex;
	}
.flex
  {
	display: flex;
	align-items: center;
	}

.ta_l
	{
	text-align: left;
	}
.ta_r
	{
	text-align: right;
	}
.ta_c
	{
	text-align: center;
	}
.flex.ta_c
	{
	justify-content: center;
	}


/* パンくず */
.bread
	{
  padding: 0.5rem 1rem;
  list-style: none;
  background: #e9edf5;
  overflow: hidden;
	border-radius: 3px;
	font-size: 0.8rem;
	}
.bread:empty
	{
	padding: 0;
	}
.bread li {
  display: inline;
}
.bread li:after {
  content: '>';
  padding: 0 0.2rem;
  color: #8186a0;
}
.bread li:last-child:after {
  content: '';
}
.bread li a {
  text-decoration: none;
  color: #273376;
	cursor: initial; /* 今はリンクなし */
}

/* toast */
#toast
	{
    position: fixed;
    top: 180px;
    display: inline-block;
    background-color: #c1e9b8;
	color: #000;
    border-radius: 15px;
    padding: 8px 15px;
    border: solid 1px #eee;
    z-index: 1000;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
	}
#toast.suc
	{
    background-color: #c1e9b8;
	color: #000;
	}
#toast.err
	{
    background-color: #fcc;
	color: #000;
	}



/* 一覧の上下（ページネーション、ボタンなど） */
.list_header
  {
	display: flex;
	margin-bottom: 10px;
	align-items: center;
  }

.list_header .icon
	{
	font-size: 1.4rem;
	color:#228b22;
	margin-right: 3px;
	cursor: pointer;
	}

.list_footer
	{
	display: flex;
	margin-top: 10px;
	}

span.rel_val
    {
	display: inline-block;
	width:100%;
    }
label.rel_val
	{
	display: inline-block;
	width:100%;
	}
label.num
	{
	text-align: right;
	}


.hide
	{
	display: none !important;
	}
.pointer
	{
	cursor: pointer;
	}

span.req
	{
	color:#d1474c;
	}

span.error_msg
	{
	color: #c00;
	font-weight: bold;
	display: block;
	width:100%;
	}
span.error_msg:empty
	{
	display: none;
	}

span.file_link
	{
	width: 100%;
	display: block;
	margin-top: 3px;
	margin-bottom: 3px;
	}

span.file_link > a
	{
	cursor: pointer;
	}
span.file_link.deleted > a
	{
	text-decoration: line-through;
	color: #f00;
	}
span.file_link .del_icon
	{
	color: #f00;
	font-weight: 900;
	display: inline-block;
	margin-right: 3px;
	}

span.file_del
	{
	display: inline-block;
	margin: 5px;
	}

span.unit
	{
	display: inline-block;
	margin-left: 3px;
	}
span.unit_f
	{
	display: inline-block;
	margin-right: 3px;
	}

div.ev_desc
	{
	color:#C00000;
	white-space: pre-wrap;
	word-break: break-all;
	border:dotted 1px #999;
	}

/* 見出し（テーブル上に表示される） */
div.caption
	{
	margin-bottom: 10px;
	font-size: 24px;
	font-weight: bold;
	}

tr.lv_row
	{
	background-color: #fff;
	transition: background-color 0.2s ease 0s;
	}
tr.lv_row.updated
	{
	background-color: #e3f5df;
	}

tr.lv_row.deleted
	{
	background-color: #ccc;
	}
tr.lv_row td.subnum
	{
	vertical-align: top;
	}
table.tbl1 .sl_head
	{
	display: flex;
	align-items: stretch;
	justify-content: center;
	position: relative;
	}
table.tbl1 .sl_cap
	{
	}
tr.hide_row > th,
tr.hide_row > td
	{
	display: none;
	}

.lvmain td.proc div.wrap
	{
	display: flex;
	flex-direction: column;
	}

.lvmain td.proc div.wrap a:not(:last-child)
	{
	margin-bottom: 3px;
	}

/* box */
.box1
	{
	font-weight:normal;
	text-decoration:none;
	font-size: 0.85rem;
	}

/* 幅 */
.w100p
	{
	width:100%;
	}
/* 最小幅 */
.miw100
	{
	min-width:100px;
	}
/* 最大幅 */
.mxw250
	{
	max-width: 250px;
	}
/* マージン */
.mgr5
	{
	margin-right:5px;
	}
.mgr10
	{
	margin-right:10px;
	}
.mgr20
	{
	margin-right: 20px;
	}
.mgr30
	{
	margin-right: 30px;
	}

.mgb20
	{
	margin-bottom: 20px;
	}
.mgb40
	{
	margin-bottom: 40px;
	}
.mgb3
{
	margin-bottom: 3px;
}
.mgl3
	{
	margin-left:3px;
	}
.mgt20
	{
	margin-top: 20px;
	}
.mgt10
{
	margin-top: 10px;
}