/* てくも 基本スタイルシート */

/*====================================================================================+
| 【0.全体初期化】 1.レイアウト 2.ステータス 3.仮想ダイアログ 4.一般部品 5.専用部品   |
+====================================================================================*/

/***** 0.0 全体初期化 > 全体属性 *****/
@charset "UTF-8"; /* 文字エンコーディング */
@font-face { font-family: 'RoundedGothicP'; src: url('fonts/genjyuugothic-x-20150607/RoundedGothicP-Medium.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoundedGothicP'; src: url('fonts/genjyuugothic-x-20150607/RoundedGothicP-Bold.woff2')   format('woff2'); font-weight: bold;   font-style: normal; font-display: swap; }
@font-face { font-family: 'RoundedGothicM'; src: url('fonts/genjyuugothic-x-20150607/RoundedGothicM-Medium.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoundedGothicM'; src: url('fonts/genjyuugothic-x-20150607/RoundedGothicM-Bold.woff2')   format('woff2'); font-weight: bold;   font-style: normal; font-display: swap; }

/***** 0.1 全体初期化 > デフォルト属性 *****/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
  center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
  section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; min-width: 0; min-height: 0; box-sizing: border-box; }
body { width: 100%; height: 100%; background: var(--bas_nBG); font-family: "RoundedGothicP", sans-serif; font-size: 1rem; list-style-type: none; overflow: hidden; } /* color: var(--bas_sFG); font-weight: bold; */
input, select { box-sizing: border-box; }
input::placeholder { color: silver; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }

/*====================================================================================+
| 0.全体初期化 【1.レイアウト】 2.ステータス 3.仮想ダイアログ 4.一般部品 5.専用部品   |
+====================================================================================*/

/***** 1.0 レイアウト *****/
.fvct { display: flex; flex-direction: column; align-items: center; }
.fvlt { display: flex; flex-direction: column; align-items: left; }
.fhlt { display: flex; }
.fhct { display: flex; justify-content: center; }
.fhcm { display: flex; justify-content: center; align-items: center; }
.fvct, .fvlt, .fhlt, .fhct, .fhcm { flex-wrap: nowrap;
  &.gap { gap: var(--gap); }
/*  &.pad { padding: var(--gap); }*/
  > * { flex-shrink: 0; } }
.padt { padding-top: var(--gap); }
.pado { padding: var(--gap); }
.padu { padding: 0 var(--gap) var(--gap) var(--gap); }

/***** 1.1 レイアウト > マトリクス *****/
.body_frame { width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; }
.tkBody { position: relative; flex: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.tkBody > * { flex-shrink: 0; }
.tkLiner { position: absolute; margin: 0; border: 0; padding: 0; }
.tkSlide { position: absolute; width: var(--slide_width); height: var(--slide_height); margin: 0; border: 0; padding: 0; }

/***** 1.2 レイアウト > スライド > ヘッダ・フッタ *****/
.tkHead, .tkFoot { position: relative; width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 0.2rem 0.5rem; }
.tkHead { height: var(--header_height); color: var(--header_color); background: var(--header_background); > h1 { padding: 0; } }
.tkFoot { height: var(--footer_height); color: var(--footer_color); background: var(--footer_background);
  > #tkMsg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0 1rem; z-index: 10;
    &.panic { color: #FFDDDD; background: #D70005; font-weight: bold; border: inset 1px #0080FF; animation: panic_alter 1s ease-in-out infinite alternate; }
    &.panic::before { content: "絶望："; }
    &.fatal { color: #FFFFCC; background: #FF6A6F; font-weight: bold; border: inset 1px #0000B5; animation: fatal_alter 2s ease-in-out infinite alternate; }
    &.fatal::before { content: "障害："; }
    &.mistake { color: #880000; background: #FAFAD2; font-weight: normal; border: inset 1px #100808; }
    &.mistake::before { content: "失敗："; }
    &.warning { color: #204020; background: #FAFAD2; font-weight: normal; border: inset 1px #7D7D69; }
    &.warning::before { content: "警告："; }
    &.guide { color: #000066; background: #F0FFF0; border: inset 1px #7F7F7F; }
    &.guide::before { content: "案内："; }
    &.ignore { color: #888888; background: #FFFFFF; border: inset 1px #7F7F7F; }
    &.ignore::before { content: "無視："; } } }

.set_left { align-self: center; padding-left: 1rem; }
.set_midleft { position: absolute; left: 25%; transform: translateX(-50%); }
.set_center { position: absolute; left: 50%; transform: translateX(-50%); }
.set_midright { position: absolute; left: 75%; transform: translateX(-50%); }
.set_right { align-self: center; padding-right: 1rem; }
.set_left, .set_midleft, .set_center, .set_midright, .set_right { 
  > a { color: var(--header_a_color); text-decoration: none; }
  > a:visited { color: var(--header_a_visited_color); }
  > a:hover { color: var(--header_a_hover_color); text-decoration: var(--header_a_hover_text-decoration); } }
.page_title { width: 100%; height: fit-content; white-space: nowrap; text-align: center; overflow-x: auto; }
.no_title { padding-top: var(--gap); }
.horz_cols { flex: 1; max-width: 100%; height: 100%; display: inline-flex; gap: var(--gap); flex-wrap: nowrap; overflow: hidden; }
.horz_cols > * { flex-shrink: 0; }
/*.cols_fit { overflow: hidden; }
.cols_scrh { overflow-x: auto; }*/
.vert_rows { width: fit-content; max-height: 100%; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.vert_none { display: none; }
.rows_fit { flex: 1; width: 100%; }
.head_row { white-space: nowrap; text-align: center; }
.body_row { white-space: nowrap; flex: 1; max-height: 100vh; overflow: auto; }
.body_row > div { width: fit-content; }
.body_row > div { width: fit-content; }
.row_fit { max-width: 100%; }
.row_fit0 { color: black; font-weight: normal; flex: 0; width: 100%; max-width: 100%; }
.row_fit1 { color: black; font-weight: normal; flex: 1; width: 100%; max-width: 100%; }
.row_fit2 { color: black; font-weight: normal; flex: 2; width: 100%; max-width: 100%; }
.row_fit3 { color: black; font-weight: normal; flex: 3; width: 100%; max-width: 100%; }
.row_fit4 { color: black; font-weight: normal; flex: 4; width: 100%; max-width: 100%; }
.row_fit5 { color: black; font-weight: normal; flex: 5; width: 100%; max-width: 100%; }
.e1border { border: solid 1px var(--bas_eBC); }
/*.fv ct_frame { display: flex; flex-direction: column; align-items: center; }*/
/*.fv ct_frame.gap { gap: var(--gap); padding: var(--gap); }*/
/*.fv ct_frame > * { flex-shrink: 0; }*/
/*.fhlt frame { display: flex; gap: 0.2rem; flex-wrap: nowrap; }*/
/*.fhlt frame > * { flex-shrink: 0; }*/
/*.fhct frame { max-width: 100%; flex: 1; display: flex; gap: var(--gap); justify-content: center; flex-wrap: nowrap; padding: var(--gap); }*/
.flex_fill { flex: 1; }
.flex_end { width: 100%; display: flex; justify-content: flex-end; padding: 0 var(--gap); margin-top: 2px; }
.flex_between { width: 100%; display: flex; justify-content: space-between; padding: 0 var(--gap); }
.flex_topbody { flex: 1; width: auto; max-width: 100%; height: auto; max-height: 100%; padding-bottom: 1rem; }
.col_frame { display: flex; flex-direction: column; overflow: hidden; }
.col_head { text-align: center; }
.col_body { flex: 1; overflow: auto; border: solid 1px var(--bas_eBC); }
.vrt_button { display: flex; flex-direction: column; overflow-y: auto; padding: 0 var(--gap); }
.both_limit { width: auto; max-width: 100%; height: auto; max-height: 100%; padding: 0 var(--gap) var(--gap) var(--gap);}
.width_limit { width: auto; max-width: 100%; }
.height_limit { height: auto; max-height: 100%; }
.hrzl { text-align: left; }
.hrzc { text-align: center; }
.hrzr { text-align: right; }
.vrtt { vertical-align: top; }
.vrtm { vertical-align: middle; }
.vrtb { vertical-align: bottom; }
.nhrz { font-size: 0; width: fit-content;}
.nhrz > * { display: inline-block; font-size: 1rem; }
.ghrz { width: fit-content; }
.ghrz > * { display: inline-block; }
.scrn { /*max-width: 100%; max-height: 100%;*/ overflow: hidden; }
.scrb { /*max-width: 100%; max-height: 100%;*/ overflow: auto; }
.scrh { max-width: 100%; /*max-height: 100%;*/ overflow-x: auto; }
.scrv { width: auto; max-height: 100%; overflow-y: auto; }
.lcscrv > *:last-child { max-height: 100%; overflow-y: auto; }
.filb { width: 100%; height: 100%; }
.filw { width: 100%; }
.filh { height: 100%; }
.maxb { max-width: 100%; max-height: 100%; }
.maxw { max-width: 100%; }
.maxh { max-height: 100%; }

/*====================================================================================+
| 0.全体初期化 1.レイアウト 【2.ステータス】 3.仮想ダイアログ 4.一般部品 5.専用部品   |
+====================================================================================*/

/***** 2.1 ステータス > 基本装飾 *****/
/*.panic { color: #FFFFFF; font-weight: bold; margin: 0; }
@keyframes panic_alter { 0% { color: #D70005; background: #FFFFFF; } 10% { color: #FFFFFF; background: #D70005; } 100% { color: #FFFFFF; background: #D70005; } }
@keyframes panic_blink { 0% {opacity:0;} 20% {opacity:1;} 100% {opacity:1; } }
.fatal { color: #FFFFFF; font-weight: bold; margin: 0; }
@keyframes fatal_alter { 0% { color: #FF6A6F; background: #FFFFFF; } 10% { color: #FFFFFF; background: #FF6A6F; } 100% { color: #FFFFFF; background: #FF6A6F; } }
@keyframes fatal_blink { 0% {opacity:0;} 20% {opacity:1;} 100% {opacity:1; } }
.mistake { color: #880000; font-weight: bold; margin: 0; }
span.mistake { font-weight: bold; color: maroon; }
.warning { color: #884400; font-weight: bold; margin: 0; }
span.warning { color: maroon; }
.report { color: #000000; font-weight: normal; margin: 0; }
span.report { font-size: 0.8rem; color: black; }
.guide { color: #003020; margin: 0; }
.ignore { color: #000000; margin: 0; }*/

/***** 2.2 ステータス > メッセージ装飾 *****/
/*.tkMsg { white-space: nowrap; width: 100%; }
.msg_frame { position: relative; width: 100%; padding: 0.2rem 0.5rem 0.2rem 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
.tk Msg { width: calc(100% - 2rem); text-align: left; padding: 0 0.5rem; }
.tk Msg.panic { background: #D70005; border: inset 1px #0080FF; animation: panic_alter 1s ease-in-out infinite alternate; }
.tk Msg.fatal { background: #FF6A6F; border: inset 1px #0000B5; animation: fatal_alter 2s ease-in-out infinite alternate; }
.tk Msg.mistake { background: #FAFAD2; border: inset 1px #100808; }
.tk Msg.warning { background: #FAFAD2; border: inset 1px #7D7D69; }
.tk Msg.report { background: #E8E8FF; border: inset 1px #7D7D69; }
.tk Msg.guide { background: #F0FFF0; border: inset 1px #7F7F7F; }
.tk Msg.ignore { background: #FFFFFF; border: inset 1px #7F7F7F; }*/

/***** 2.3 ステータス > リスト修飾 *****/
.tkTxt.panic { animation: panic_blink 1s ease-in-out infinite alternate; }
.tkTxt.fatal { animation: fatal_blink 2s ease-in-out infinite alternate; }

/***** 2.4 ステータス > 行内句装飾 *****/
span.guide { color: black; }
span.warning { color: maroon; }
span.mistake { font-weight: bold; color: maroon; }

/***** 2.5 ステータス > 独立設定 *****/
.blink { animation: fadeBlink 2s infinite; }
@keyframes fadeBlink { 0%, 40% { opacity: 0; } 40.01%, 100% { opacity: 1; } }
.alert { color: red; margin: 0.1rem; padding: 0.1rem; background: transparent; font-weight: bold; border: 0; }

/*====================================================================================+
| 0.全体初期化 1.レイアウト 2.ステータス 【3.仮想ダイアログ】 4.一般部品 5.専用部品   |
+====================================================================================*/

/*====================================================================================+
| 0.全体初期化 1.レイアウト 2.ステータス 3.仮想ダイアログ 【4.一般部品】 5.専用部品   |
+====================================================================================*/

/***** 4.1 一般部品 > メニュー *****/
.scrv_rows { width: fit-content; max-height: 100%; display: flex; flex-direction: column; align-items: center; overflow-y: auto; > * { flex-shrink: 0; } }

/***** 4.2 一般部品 > 見出し *****/
h1 { font-weight: bold; font-size: var(--h1_font-size); height: var(--h1_height); color: var(--h1_color); margin: var(--h1_margin); text-shadow: var(--h1_text-shadow); }
h1 .ver { margin-left: 0.4rem; font-weight: bold; color: var(--h1_ver_color); font-size: var(--h1_ver_font-size); text-shadow: var(--h1_ver_text-shadow); }
h1 .cat { margin-left: 0; font-size: var(--h1_cat_font-size); color: var(--h1_cat_color); text-shadow: var(--h1_cat_text-shadow); }
h2 { position: relative; color: var(--h2_color); padding: 2px 0 0 0; text-align: center; font-size: var(--h2_font-size); }
h2.underH1 { top: -0.5rem; }
h3 { color: var(--h3_color); font-size: var(--h3_font-size); height: var(--h3_height); padding: var(--h3_padding); white-space: var(--h3_white-space);
  margin: var(--h3_margin); text-align: center; text-shadow: var(--h3_text-shadow); }
h3 button { position: relative; top: -0.2em; font-weight: bold; padding: 0; margin: 0 0.2em; filter: none; }
h4 { font-size: var(--h4_font-size); color: var(--h4_color); margin: var(--h4_margin); text-align: center; height: var(--h4_height);
  padding: var(--h4_padding); text-shadow: var(--h4_text-shadow); }
.usage { display: inline-block; font-weight: bold; align: center; color:  #6A573C; margin: 0.1rem auto; padding: 0.5rem;
  border: #4E6F20 2px solid; text-align: left; }

/***** 4.3 一般部品 > テーブル *****/
th { color: darkgreen; padding: 0 0.5em; text-align: center; vertical-align: middle; white-space: nowrap; }
td { font-weight: bold; color: black; padding: 0 0.5em; white-space: nowrap; }
td a { white-space: nowrap; color: navy; padding: 0 0.5em; font-weight: bold; text-decoration: none; }
td a:visited { color: navy; font-weight: bold; text-decoration: none; }
td a:hover { text-decoration: underline; }
/*.nowrap, .nowrap th, .nowrap td { white-space: nowrap; }*/
th.nowrap td.nowrap { white-space: nowrap; }
td.oji_kin { text-align: center; vertical-align: middle; }
td span.any { font-weight: bold; }
td span.req { font-weight: bold; }
.textdiv { margin: 1px; background: white; padding: 2px; border: gray solid 1px; overflow: auto; }
input[type=button].right, button.right { text-align: right; margin-top: 0; margin-bottom: 0.1rem; }

.left_wall { border-left: 3px double gray; border-right: 0; text-align: right; }
.no_wall { border-left: 0; border-right: 0; }
.right_wall { border-left: 0; border-right: 3px double gray; }
.both_wall { border-left: 3px double gray; border-right: 3px double gray; }
.top_floor { border-top: 3px double gray; border-bottom: 1px solid silver; }
.middle_floor { border-top: 1px solid silver; border-bottom: 1px solid silver; }
.bottom_floor { border-top: 1px solid silver; border-bottom: 3px double gray; }
.single_floor { border-top: 3px double gray; border-bottom: 3px double gray; }

/***** 4.4 一般部品 > 配置装飾部品 *****/
.listhead { font-weight: bold; white-space: nowrap; }
.listbody { text-align: left; vertical-align: top; max-height: 100%; }
.listline { text-align: left; vertical-align: top; white-space: nowrap; }
.bas_border { border: 1px solid var(--bas_sBC); }
/*.no ime { ime-mode: disabled; }*/
.show { display: block; }
.hide { display: none; }
.bold_tip { font-weight: bold; text-decoration: underline dotted; }
/*div.body box { margin: 0; padding: 0 4rem 0.2rem 4rem; }
.ui-tooltip { width: 16rem; padding: 0.4rem; border-radius: var(--radius2); box-shadow: 2px 2px 2px #aaaaaa; background: white; }*/

/***** 4.5 一般部品 > スイッチ *****/
.switch { font-size: 0.9rem; }

/***** 4.6 一般部品 > ボタン *****/

/***** 4.7 一般部品 > グリッド *****/
.grid { max-width: 100%; height: 100%; padding: 0.5rem; overflow-y: auto; }

/***** 4.8 一般部品 > セレクトボックス *****/

/*====================================================================================+
| 0.全体初期化 1.レイアウト 2.ステータス 3.仮想ダイアログ 4.一般部品 【5.専用部品】   |
+====================================================================================*/

/***** 5.1 専用部品 > 開閉ツリー表示機能部品 *****/
a.upper, a.middle, a.lower { color: black; cursor: pointer; padding-left: 44px; text-decoration: none; }
a.upper:hover, a.middle:hover, a.lower:hover { background: lightblue; }
a.expd { background: url(/basimg/folder_open.png) no-repeat 0 4px; }
a.clps { background: url(/basimg/folder_close.png) no-repeat 0 4px; }
a.upper { margin-left: 0; }
a.middle { margin-left: 1rem; }
a.lower { margin-left: 2rem; }
a.current { background-color: lightskyblue; }