@CHARSET "UTF-8";

/* ヘッダ */
header {
	position: fixed;
	z-index: 999;
	width: 100%;
	top: 0;
}

/* 上段(ベース) */
#titlebar {
	display:flex;
	justify-content: space-between;
	padding: 10px 20px 5px 20px;
	color: #FFFFFF;
	background-color: #538ED5;
	position: relative;
	z-index: 100;
}
/* システム名コンテナ */
#titlebar>div:first-of-type {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* システム名リンク文字 */
#titlebar>div:first-of-type a {
	color: #FFFFFF;
	text-decoration: none;
}
/* 基本メニューアイテムコンテナ */
#titlebar>div:not(:first-of-type) {
	display: flex;
	align-items: flex-end;
}

/* 設定アイコン */
#tb_settings {
	position: relative;
	padding: 0 10px;
	margin: 0 30px 0 10px;
	cursor: pointer;
}
#tb_settings:before {
	position: absolute;
	content: "";
	width: 30px;
	height: 30px;
	margin: -34px 0 0 0;
	background: url("../images/10002_menu_settings_off.png") no-repeat;
	background-size: 30px 30px;
}
/* コンフィグ表示状態時アイコン */
input[type='checkbox']:checked + #tb_settings:before {
	background: url("../images/10003_menu_settings_on.png") no-repeat;
	background-size: 30px 30px;
}
/* ログアウトアイコン */
#tb_logout {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 36px;
	margin: 0 0 0 10px;
	cursor: pointer;
}
#tb_logout:before {
	position: absolute;
	content: "";
	width: 30px;
	height: 30px;
	margin: 4px 0 0 0;
	background: url("../images/10001_menu_logout.png") no-repeat;
	background-size: 30px 30px;
}

/* 下段(メニュー) */
#menubar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	height: 32px;
	margin-top: -32px;
	padding: 0 10px 0 20px;
	color: #FFFFFF;
	background-color: #000080;
	position: relative;
	z-index: 99;
	transition: margin-top 0.5s;
}
#menubar>span:first-of-type {
	margin-bottom: 6px;
}

/* 設定メニュー */
#dropmenu {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 15px;
}
/* リストアイテム(下地) */
#dropmenu li {
	width: 160px;
	height: 32px;
	display: inline-block;
	list-style-type: none;
	position: relative;
}
/* リストアイテムホバー時にネストされたリストを表示 */
#dropmenu li:hover>ul {
	display:block;
	animation: slideDown_SubMenu .2s ease;
}
@keyframes slideDown_SubMenu {
	from {opacity: 0; transform: translateY(-20px);}
	to {opacity: 1; transform: translateY(0)};
}
/* リストアイテム(本体) */
#dropmenu li a {
	line-height: 32px;
	text-decoration: none;
	padding-left: 10px;
	display: block;
	color: #FFFFFF;
	background-color: #000080;
}
/* リストアイテムホバー時に背景色を変更 */
#dropmenu .linked:hover {
	background-color: #0000CD;
}
/* ネストされたリスト */
#dropmenu ul {
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
}


/* ページタイトル */
h1#page_title {
	font-size: 21px;
	font-weight: normal;
	padding-left: 70px;
	margin-bottom: 40px;
}

/* 検索系画面アイコン */
h1#page_title.search:before {
	position: absolute;
	content: "";
	width: 60px;
	height: 60px;
	margin-left: -70px;
	margin-top: -15px;
	background: url("../images/20001_title_search.png") no-repeat;
	background-size: 60px 60px;
	z-index: -1;
}
/* 編集系画面アイコン */
h1#page_title.edit:before {
	position: absolute;
	content: "";
	width: 60px;
	height: 60px;
	margin-left: -70px;
	margin-top: -15px;
	background: url("../images/20002_title_edit.png") no-repeat;
	background-size: 60px 60px;
	z-index: -1;
}
/* 確認系画面アイコン */
h1#page_title.confirm:before {
	position: absolute;
	content: "";
	width: 60px;
	height: 60px;
	margin-left: -70px;
	margin-top: -15px;
	background: url("../images/20003_title_confirm.png") no-repeat;
	background-size: 60px 60px;
	z-index: -1;
}
/* 照会系画面アイコン */
h1#page_title.reference:before {
	position: absolute;
	content: "";
	width: 60px;
	height: 60px;
	margin-left: -70px;
	margin-top: -15px;
	background: url("../images/20004_title_reference.png") no-repeat;
	background-size: 60px 60px;
	z-index: -1;
}
/* 情報系画面アイコン */
h1#page_title.information:before {
	position: absolute;
	content: "";
	width: 60px;
	height: 60px;
	margin-left: -70px;
	margin-top: -15px;
	background: url("../images/20005_title_information.png") no-repeat;
	background-size: 60px 60px;
	z-index: -1;
}
/* 警告系画面アイコン */
h1#page_title.caution:before {
	position: absolute;
	content: "";
	width: 60px;
	height: 60px;
	margin-left: -70px;
	margin-top: -15px;
	background: url("../images/20006_title_caution.png") no-repeat;
	background-size: 60px 60px;
	z-index: -1;
}


/* タイトル付セクション */
section.indexed {
	display:grid;
	grid-template-rows: minmax(36px, auto) auto;
	grid-template-columns: auto;
	min-width: 940px;
	width: 100%;
	margin-top: 20px;
}
/* タイトルインデックス */
section.indexed>div:first-child {
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 36px;
	padding: 0 5px 0 20px;
	background-color: #99CCFF;
}
/* 更新情報 */
div.up_info {
	display: grid;
	grid-template-rows: minmax(20px, auto);
	grid-template-columns: auto minmax(150px, auto) auto minmax(100px, auto);
	justify-content: right;
	gap: 0 10px;
	padding: 6px 10px 4px 0;
	font-size: 12px;
}
/* タイトル付きセクション同士は間を空ける */
main section.indexed + section.indexed {
	margin-top: 40px;
}
/* インデックスラベル */
h2 {
	margin: 0;
	font-size: 16px;
	font-weight: normal;
	line-height: 36px;
}


/* 機能ボタンコンテナ */
div.func {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
div.func.btw {
	justify-content: space-between;
}


/* ボタンの基本クラス */
.btn {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 180px;
	height: 36px;
	line-height: 28px;
	border-radius: 6px;
	margin: 2px;
	padding: 4px 0;
	font-size: 12px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	background-color: #0070C0;
	cursor: pointer;
}
/* ホバー時に背景色変更 */
.btn:hover {
	background-color: #1E90FF;
}
/* 押下時に少し沈む */
.btn:active {
	transform: translateY(1px);
}
/* 使用不能時(色も変わらないし沈まない) */
.btn.disabled {
	background-color: #1F497D;
	cursor: default;
}
.btn.disabled:hover {
	background-color: #1F497D;
}
.btn.disabled:active {
	transform: translateY(0px);
}

/* 否定形ボタン(背景色赤，主に削除用) */
.btn.negative {
	background-color: #C00000;
}
/* ホバー時に背景色変更(押下時の動きは共通) */
.btn.negative:hover {
	background-color: #FF0000;
}
/* 使用不能時(色は変わらない) */
.btn.negative.disabled {
	background-color: #8B0000;
	cursor: default;
}
.btn.negative.disabled:hover {
	background-color: #8B0000;
}


/* 基本ボタンアイコン部分 */
.head-icon:before {
	position: absolute;
	content: "";
	width: 26px;
	height: 26px;
	top: 50%;
	left: 10px;
	margin: -14px 0 0 0;
}

/* 基本アイコン(切替) */
.head-icon.switch:before {
	background: url("../images/00013_icon_switch.png") no-repeat;
	background-size: 26px 26px;
}
/* 基本アイコン(追加) */
.head-icon.plus:before {
	background: url("../images/00005_icon_plus.png") no-repeat;
	background-size: 24px 24px;
	margin: -13px 0 0 0;
}
/* 基本アイコン(検索) */
.head-icon.search:before {
	background: url("../images/00006_icon_search.png") no-repeat;
	background-size: 26px 26px;
}

/* 基本アイコン(次へ) */
.head-icon.next:before {
	background: url("../images/00001_icon_next.png") no-repeat;
	background-size: 26px 26px;
}

/* 基本アイコン(戻る) */
.head-icon.back:before {
	background: url("../images/00002_icon_back.png") no-repeat;
	background-size: 26px 26px;
}

/* 基本アイコン(削除) */
.head-icon.cross:before {
	background: url("../images/00004_icon_cross.png") no-repeat;
	background-size: 24px 24px;
	margin: -12px 0 0 0;
}

/* 基本アイコン(チェック) */
.head-icon.check:before {
	background: url("../images/00003_icon_check.png") no-repeat;
	background-size: 26px 26px;
}


/* 補助ボタンクラス(基本ボタンを継承) */
.btn.mini {
	height: 26px;
	line-height: 22px;
	border-radius: 4px;
	width: 140px;
	margin: 2px;
	padding: 2px 0 2px 0;
}

/* ダウンロードボタンクラス(補助ボタンを継承) */
.btn.mini.download {
	width: 160px;
	padding-left: 12px;
}
/* 補助ボタンアイコン部分 */
.head-icon-mini:before {
	position: absolute;
	content: "";
	width: 24px;
	height: 24px;
	top: 50%;
	left: 10px;
	margin: -9px 0 0 0;
}

/* 補助アイコン(編集) */
.head-icon-mini.edit:before {
	background: url("../images/00008_icon_edit.png") no-repeat;
	background-size: 20px 20px;
	margin: -10px 0 0 0;
}

/* 補助アイコン(本) */
.head-icon-mini.book:before {
	background: url("../images/00007_icon_book.png") no-repeat;
	background-size: 20px 20px;
	margin: -10px 0 0 0;
}

/* 補助アイコン(上へ戻る) */
.head-icon-mini.scrollup:before {
	background: url("../images/00014_icon_scrollup.png") no-repeat;
	background-size: 20px 20px;
	margin: -10px 0 0 0;
}

/* 補助アイコン(クリップ) */
.head-icon-mini.clip:before {
	background: url("../images/00009_icon_clip.png") no-repeat;
	background-size: 18px 18px;
}

/* 補助アイコン(鍵) */
.head-icon-mini.key:before {
	background: url("../images/00011_icon_key.png") no-repeat;
	background-size: 18px 18px;
}

/* 補助アイコン(ダウンロード) */
.head-icon-mini.download:before {
	background: url("../images/00012_icon_download.png") no-repeat;
	background-size: 18px 18px;
}


/* 補助削除ボタン */
.btn-opt-del {
	position: relative;
	display: inline-block;
	background-color: #C00000;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	margin: 1px;
	cursor: pointer;
}

/* ホバー時に背景色変更 */
.btn-opt-del:hover {
	background-color: #FF0000;
}
/* 押下時に沈む */
.btn-opt-del:active {
	transform: translateY(1px);
}

/* 中央にバツを表示 */
.btn-opt-del:before {
	position: absolute;
	content: "";
	width: 22px;
	height: 22px;
	top: 50%;
	left: 5px;
	margin: -6px 0 0 0;
	background: url("../images/00004_icon_cross.png") no-repeat;
	background-size: 12px 12px;
}


/* 装飾付チェックボックス */
span > input[type='checkbox'] ~ label.opt_ckb {
	position: relative;
	padding-left: 24px;
	margin-right: 24px;
	font-size: 13px;
}
/* チェックボックス(枠線) */
span > input[type='checkbox'] ~ label.opt_ckb:before {
	content: "";
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 21px;
	height: 21px;
	top: -2px;
	left: 0;
	border: 3px #0070C0 solid;
	border-radius: 4px;
	background-color: #FFFFFF;
	transition: background-color 0.2s;
}
/* チェックボックス(フォーカス枠) */
span > input[type='checkbox']:focus ~ label.opt_ckb:before {
	filter: drop-shadow(0 0 2px rgba(0,74,161,1));
}
/* チェックボックス(レ点) */
span > input[type='checkbox'] ~ label.opt_ckb:after {
	content: "";
	display: block;
	position: absolute;
	width: 4px;
	height: 9px;
	left: 7px;
	top: 1px;
	border-right: 3px #FFFFFF solid;
	border-bottom: 3px #FFFFFF solid;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.2s;
}
/* チェックボックス：チェック有 */
span > input[type='checkbox']:checked ~ label.opt_ckb:before {
	background-color: #0070C0;
}
/* チェックボックス(レ点)：チェック有 */
span > input[type='checkbox']:checked ~ label.opt_ckb:after {
	opacity: 1;
}


/* 装飾付ラジオボタン */
input[type='radio'] + label.opt_rbn {
	position: relative;
	padding-left: 24px;
	margin-right: 24px;
	font-size: 13px;
}
/* ラジオボタン(枠線) */
input[type='radio'] + label.opt_rbn:before {
	content: "";
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 21px;
	height: 21px;
	top: -2px;
	left:0;
	border: 3px #0070C0 solid;
	border-radius: 100%;
	background-color: #FFFFFF;
	transition: border 0.3s;
}
/* チェックボックス(フォーカス枠) */
input[type='radio']:focus + label.opt_rbn:before {
	filter: drop-shadow(0 0 2px rgba(0,74,161,1));
}
/* ラジオボタン(枠)：チェック有 */
input[type='radio']:checked + label.opt_rbn:before {
	border: 6px #0070C0 solid;
}


/* 和暦枠 */
.year_s {
	display: inline-block;
	min-width: 40px;
	text-align: center;
}

/* 注意書き */
.c_txt {
	font-size: 12px;
	margin-top: 0.5em;
	margin-bottom: 0;
}
/* 文字数カウント用 */
.dsp_chr {
	font-size: 12px;
	margin-top: 0.5em;
	margin-bottom: 0;
	display: flex;
	justify-content: flex-end;
}
.chr_ok {
	color: #000000;
}
.chr_ng {
	color: #FF0000;
	font-weight: bold;
}


/* ファイルアップロード項目 */
section.upload {
	display: grid;
	grid-template-rows: auto minmax(170px, auto);
	grid-template-columns: auto;
	width: 100%;
}
/* アップロードヘッダ(ドロップダウン枠 + 選択ボタン) */
section.upload>div:first-child {
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
/* ドロップダウン枠 */
div.dropdown {
	display: flex;
	box-sizing: border-box;
	border: 3px #558ED5 dashed;
	border-radius: 12px;
	width: 450px;
	height: 80px;
	justify-content: center;
	align-items: center;
}

/* ファイルコンテナ */
div.file_view {
	display: grid;
	grid-template-columns: repeat(auto-fill, 212px);
	grid-row-gap: 11px;
	grid-column-gap: 11px;
	min-height: 170px;
}
/* ファイル(照会・確認用) */
div.file_view>section.file {
	display: grid;
	grid-template-rows: 150px;
	grid-template-columns: 212px;
}
/* ファイル(編集用) */
section.upload>div.file_view>section.file {
	grid-template-columns: 190px 22px;
}
/* ファイル画像 */
div.file_view>section.file>img {
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	max-width: 180px;
	max-height: 135px;
	margin: auto;
}
/* ファイル削除ボタン */
div.file_view>section.file>a.btn-opt-del {
	grid-row: 1 / span 1;
	grid-column: 2 / span 1;
}
/* キャプション(編集用) */
div.file_view>section.file>input[type='text'] {
	grid-row: 2 / span 1;
	grid-column: 1 / span 3;
	width: 200px;
}
/* キャプション(照会用)・ファイル名 */
div.file_view>section.file>span {
	grid-row: 2 / span 1;
	grid-column: 1 / span 2;
	font-size: 12px;
	justify-self: center;
	word-break: break-all;
}
/* ファイルダウンロードボタン */
div.file_view>section.file>a.head-icon-mini.download {
	grid-row: 3 / span 1;
	grid-column: 1 / span 2;
	align-self: flex-end;
	justify-self: center;
}


/* エラーチェック結果メッセージ */
div#usrMessage {
	margin: 10px;
}
.text_error {
  font-size: 11pt;
  line-height: 12pt;
  color: #CC3333;
  font-weight: bold;
  line-height:1.22em;
}


/* メッセージ */
div.msg {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 200px;
	margin: 20px 40px;
	padding: 20px;
}
div.msg>p {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}
div.msg.mini {
	min-height: 50px;
	margin: 0 10px;
	padding: 0 20px;
}


/* パスワードエリア */
#tr_fgPass th,
#tr_fgPass td {
	border-bottom: none;
}
#tr_cgPass {
	display: none;
}
#tr_cgPass th,
#tr_cgPass td {
	border-top: none;
}

/* 和暦入力セット */
div.w_ggyy>select {
	width: 45px;
}
div.w_ggyy>input[type='text'] {
	width: 40px;
}


/* アップロード処理中表示用 */
body.freeze {
	overflow: hidden;
}

body>div.processing {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	background-color: rgba(220, 220, 220, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
}
body>div.processing.off {
	display: none;
}
div.spinner {
	margin: auto;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	color: #000080;
	font-size: 20px;
	text-indent: -9999em;
	animation: load 1.3s infinite linear;
	transform: translateZ(0);
}
@keyframes load {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

/* 本サイトについて */
a#about_open {
	display: block;
	margin-top: 30px;
	text-align: right;
}
a#about_open:hover {
	cursor: pointer;
}
div.modal {
	width: 600px;
	height: 60vh;
	padding: 10px 10px 10px 20px;
	border-radius: 20px;
	background-color: #FFFFFF;
	filter: drop-shadow(0 0 4px #000000);
}
div.about_site {
	height: 100%;
	overflow-y: scroll;
}
div.about_site h1 {
	display: flex;
	font-size: 21px;
	font-weight: normal;
	line-height: 40px;
}
div.about_site h1:before {
	content:"";
	width: 50px;
	height: 40px;
	background: url("../images/20005_title_information.png") no-repeat;
	background-size: 40px 40px;
}
div.about_site>section {
	padding: 10px 20px 10px 10px;
}
div.about_site h2 {
	padding: 0.25em 0.5em;
	color: #494949;
	border-left: solid 5px #7DB4E6;
}