@charset "UTF-8";
/** テーブル css */
/** version 20.12.23 */

/*
一覧用:table.list-tbl.no-stripe
一覧用(ストライプ無し):table.list-tbl.no-stripe
入力用:table.inpt-tbl
*/

:root {
 --hover-color: #e3feda; /*e3feda  d9d9ff  f0f8ff*/
}

/* ソート用 */
.list-tbl:not(.no-sort) .sort, .list-tbl:not(.no-sort) .sort label { cursor: pointer; }
.list-tbl:not(.no-sort) .sort:hover label { border-bottom: 1px dotted #fff;  }
.list-tbl:not(.no-sort) .sort { margin-left: 0.3em; margin-right: 0; }
.list-tbl:not(.no-sort) .sort:after { content: "\f0dc"; margin-left: 0.3em; margin-right: 0; font-weight: 900; font-family: "Font Awesome 5 Free"; }
.list-tbl:not(.no-sort) .sort.asc:after { content: "\f0de"; }
.list-tbl:not(.no-sort) .sort.desc:after { content: "\f0dd"; }
.list-tbl:not(.no-sort) .sort.asc label, .list-tbl:not(.no-sort) .sort.desc label { border-bottom: 1px dotted #fff; }
.list-tbl tbody.list td .sort-hidden { display: none; }
.list-tbl tbody.list td.sort-dummy { display: none; }/* なぜかsort対象の1つ目が吹き出し表示がされないのでdummy列 */

table { display: table; background-color: #fff;  /*border-collapse: separate;*/ border-collapse: collapse; border-spacing: 0; width: 100%; border-radius: 8px; border: none; }

table thead th { border-top: none; }
table thead th, .tbl-th div.inner-box div { padding: 10px; }
table tbody td, table tr td { padding: 2px 5px; }
table tr td { border: 1px solid #e5e5e5; }
table tr th, .tbl-th div.inner-box div { border-left: 1px solid #e5e5e5; }
table tr th:first-child, .tbl-th div.inner-box div:first-child { border-left: 1px solid transparent; }
table tr th:last-child, .tbl-th div.inner-box div:last-child { border-right: 1px solid transparent; }

table.list-tbl tr:not(.subth) th:first-child, .tbl-th div:first-child { border-radius: 8px 0 0 0; }
table.list-tbl tr:not(.subth) th:last-child, .tbl-th div:last-child { border-radius: 0 8px 0 0; }
/*
「border-collapse: separate;」にしないと内側が丸くなるだけで罫線に影響なし
※border-collapse: separate;だと罫線が太く見えるので却下
table tr:last-child td:first-child { border-radius: 0 0 0 8px; }
table tr:last-child td:last-child { border-radius: 0 0 8px 0; }
*/

table.inpt-tbl { }
table.inpt-tbl tr th, table.inpt-tbl tr td { padding: 10px 5px; }
table.inpt-tbl tr th { text-align: right; font-weight: bold; }
table.inpt-tbl tr td { border: none; }

table.list-tbl { table-layout: fixed; }
table.list-tbl tr th { text-align: center; vertical-align: middle; background-color: #3085d6; color: #fff; font-weight: bold; }
table .thstyle, table.list-tbl  tr td.thstyle { border-left: 1px solid transparent; vertical-align: middle; background-color: #3085d6; color: #fff; font-weight: bold; }

table.list-tbl tr:nth-child(odd), table.list-tbl tr:nth-child(even).odd { background-color: #fff; }
table.list-tbl tr:nth-child(even), table.list-tbl tr:nth-child(odd).even { background-color: #eee; }
table.list-tbl.no-stripe tr:nth-child(even) { background-color: #fff; }
table.list-tbl tr:hover,table.list-tbl tr.odd:hover,table.list-tbl tr.even:hover { background-color: var(--hover-color); } /*e3feda  d9d9ff   f0f8ff*/
table.list-tbl.no-stripe tr:hover, table.list-tbl.no-stripe tr.even:hover { background-color: var(--hover-color); }

table.list-tbl tr:nth-child(odd) input, table.list-tbl tr:nth-child(even).odd input, table.list-tbl tr:nth-child(odd) input, table.list-tbl tr:nth-child(even).odd select, table.list-tbl tr:nth-child(odd) select { background-color: #fff; }
table.list-tbl tr:nth-child(even) input, table.list-tbl tr:nth-child(odd).even input, table.list-tbl tr:nth-child(even) input, table.list-tbl tr:nth-child(odd).even select, table.list-tbl tr:nth-child(even) select { background-color: #eee; }
table.list-tbl.no-stripe tr:nth-child(even) input, table.list-tbl.no-stripe tr:nth-child(even) input, table.list-tbl.no-stripe tr:nth-child(even) select { background-color: #fff; }

table.list-tbl tr td input { padding: 2px; }
table.list-tbl tr:hover input, table.list-tbl tr:hover select, table.list-tbl tr:hover textarea { background-color: var(--hover-color); } /*e3feda  d9d9ff   f0f8ff*/
table.list-tbl.no-stripe tr:nth-child(even):hover input, table.list-tbl.no-stripe tr:nth-child(even):hover input, table.list-tbl.no-stripe tr:nth-child(even):hover select { background-color: var(--hover-color); }
table.list-tbl tr input:focus, table.list-tbl tr select:focus { background-color: #fff; }
table.list-tbl tr td select { padding: 0 2px; min-height: 22px; }

table.list-tbl tr:hover input[readonly="readonly"],table.list-tbl tr.odd:hover input[readonly="readonly"],table.list-tbl tr.even:hover input[readonly="readonly"] { background-color: var(--hover-color); } /*e3feda  d9d9ff   f0f8ff*/
table.list-tbl tr:hover textarea[readonly="readonly"],table.list-tbl tr.odd:hover textarea[readonly="readonly"],table.list-tbl tr.even:hover textarea[readonly="readonly"] { background-color: var(--hover-color); } /*e3feda  d9d9ff   f0f8ff*/
table.list-tbl tr:hover select[readonly="readonly"],table.list-tbl tr.odd:hover select[readonly="readonly"],table.list-tbl tr.even:hover select[readonly="readonly"] { background-color: var(--hover-color); } /*e3feda  d9d9ff   f0f8ff*/

/* 疑似ヘッダー ※div改行なしで記述 (font-size: 0でも対応可能) */
/*
[HTML例]
<div class="list-box">
 <div class="tbl-th">
  <div class="inner-box">
   <div class="col_dt">日付</div><div class="col_dt-e">曜日</div><div class="col_policy">方針</div><div class="col_summary">摘要</div><div class="col_birthday">誕生日</div>
  </div>
 </div>
 <div class="tbl-outer">
  <table class="list-tbl">

  ※最後の列は<col>タグの幅プラス1px必要っぽい「<col class="col_x">=100px <div class="col_x">=101px
*/
.list-box .tbl-th { text-align: center; font-size: 0; }
.list-box .tbl-th div.inner-box div {
 display: inline-block;
 text-align: center;
 vertical-align: middle;
 background-color: #3085d6;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 padding: 10px;
}
.list-box .tbl-th div.inner-box div div { display: block; border: none; padding: 0; }
.list-box .tbl-th div.inner-box div div.g-row { display: grid; display: -ms-grid; }
.tbl-th div:empty:before { content: '　'; }

.list-box .tbl-outer { -ms-overflow-style: none; scrollbar-width: none; max-height: calc(100vh - 50px); border-bottom: 1px solid #e5e5e5; } .list-box .tbl-outer::-webkit-scrollbar { display:none; }
.list-box table tr:last-child td { border-bottom: none; }
.list-box .tbl-outer table thead { display: none; }
/* .list-box .tbl-outer table tr td:first-child { border-left: 1px solid transparent; } */