body {
  margin: 3rem auto 0 auto;
}

a {
  color: #bcbbbb;
  text-decoration: none;
}

.wrapper {
  max-width: 1400px;
  /* これにより横スクロールさせる */
  /* これだと wrapper 全体のスクロールになる。
     table のみスクロールさせたいので table の幅を 1400px 未満にする
     table に overflow 属性を設定する */
  /* overflow-x: auto; */
  margin: 0 auto;
  padding: 0 1.5%;
}


.page-title {
  font-size: 3rem;
  font-family: 'Philosopher', serif;
  /* font-family: "Open Sans"; */
  color: #36304a;
  font-weight: normal;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.large_line_top {
  width: 600px;
  border-bottom: 0.2rem #36304a solid;
}

.mini_line_top {
  width: unset;
  border-bottom: 0.2rem #36304a solid;
}

.large_line_bottom {
  width: 600px;
  border-top: 0.2rem #36304a solid;
  margin-left: auto;
  margin-bottom: 3rem;
}

.mini_line_bottom {
  border-top: 0.2rem #36304a solid;
  margin-left: auto;
  margin-bottom: 3rem;
}

/* a {
  text-decoration: none;
} */

/* グローバルナビ */
.navi {
  display: flex;
  font-size: 1.25rem;
  /* font-family: 'Philosopher', serif; */
  font-family: "Open Sans";
  justify-content: flex-end;
  list-style: none;
  margin-right: 0.2rem;
}

.navi a {
  color: #36304a;
  background-color: transparent;
}

.navi li {
  margin-left: 36px;
}

/* ダウンロードアイコン */
.dli-box-in {
  display: inline-block;
  vertical-align: middle;
  color: #36304a;
  line-height: 1;
  position: relative;
  width: 1.15em;
  height: 0.9em;
}

.dli-box-in::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.46em;
  border: 0.1em solid currentColor;
  border-top: 0;
  border-radius: 0 0 0.15em 0.15em;
  box-sizing: border-box;
}

.dli-box-in>span {
  position: relative;
  width: 0.1em;
  height: 0.625em;
  background: currentColor;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.353em;
  margin: auto;
}

.dli-box-in>span::before {
  content: '';
  width: 0.40625em;
  height: 0.40625em;
  border: 0.1em solid currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  position: absolute;
  left: 50%;
  bottom: -0.05em;
  box-sizing: border-box;
}


.tabulator {
  max-width: 1350px;
  border: unset;
  background-color: #ffffff;
  /* overflow-x: scroll; */
}

.tabulator .tabulator-header {
  height: 60px;
  font-size: 18px;
  font-family: "Open Sans";
  font-weight: unset;
  background-color: #36304a;
  color: #fff;
  padding-top: 0.7rem;
}

.tabulator .tabulator-header .tabulator-col {
  border-right: unset;
  background: none;
  width: 150px;
}

.tabulator-row {
  height: 50px;
  padding-top: 0.5rem;
}

.tabulator-row .tabulator-cell {
  color: #808080;
  font-size: 15px;
  border-right: unset;
  font-family: "Open Sans";
}

.tabulator-row.tabulator-row-even {
  background-color: #f5f5f5;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom: 6px solid #ffffff;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-top: 6px solid #808080;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom: 6px solid #ffffff;
}


/* ------------------------------↓ テーブルのスクロールバーの設定 ↓------------------------------*/
.tabulator-tableholder::-webkit-scrollbar {
  width: 5px;
  height: 7px;
  display: none;
}

.tabulator-tableholder::-webkit-scrollbar-thumb {
  background-color: rgba(54, 48, 74, 0.1);
  border-radius: 30px;
}

.tabulator-tableholder:hover::-webkit-scrollbar {
  display: block;
}

/* ------------------------------↓ フィルター ↓------------------------------*/
/* フィルターに必要な矢印アイコン(旧版) */
/* span.filter_obj{
  position: relative;
  z-index: 300;
}
.filter_obj::after {
content: "";
display: block;
position: absolute;
top: 0.3rem;
right: 100%; */
/* width: 0;
height: 0; */
/* 2024/09/18 サイズ拡大(クリックイベントの範囲拡大の為) */
/* width: 9px;
height: 15px;
transform: translateX(180%);
border: 0.3rem solid transparent;
border-top: 0.3rem solid #fff;
} */

/* フィルターに必要な矢印アイコン */
/* 参考URL: https://design-library.jp/lab/arrow-triangle-down */
/* filter_obj クラスでクリックさせる為 filter_icon が重なりが下。filter_obj が重なりが上側 */
.filter_icon {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 15px;
  margin-left: 5px;
  border: 0.3rem solid transparent;
  border-top: 0.3rem solid #fff;
}

.filter_obj {
  display: inline-block;
  /* vertical-align: middle; */
  /* color: #fff; */
  /* line-height: 1; */
  /* border-style: solid; */
  /* border-color: transparent; */
  /* border-width: 0.64952em 0.375em; */
  /* border-width: 0.3em; */
  /* border-top-color: currentColor; */
  /* border-bottom: 0; */

  /* 2024/09/23 一旦コメントアウト */
  /* width: 9px;
  height: 15px;
  margin-left: 5px;  
  border: 0.3rem solid transparent;
  border-top: 0.3rem solid #fff; */

  position: absolute;
  width: 20px;
  height: 25px;
  /* margin-left: 5px;   */
  /* filter_icon　の上に重ねる */
  left: -10px;
  top: -10px;
  border: 0.3rem solid transparent;
  /* border-top: 0.3rem solid #16be16; */
}

.filter_obj_on {
  /* display: inline-block;
  width: 9px;
  height: 15px;
  margin-left: 5px;
  border: 0.3rem solid transparent; */
  border-top: 0.3rem solid #f81404;
}




/* モーダルウインドウ(フィルター)の表示・非表示の切り替え */
.display_none {
  display: none;
}

/* 折り返しの設定 */
table#filter_table tr td {
  white-space: nowrap;
}

.modal_filter {
  position: fixed;
  width: 200px;
  height: 30%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: scroll; */
}

/* 20240917 Fix */
.modal_filter_inner {
  /* background-color: rgba(255, 255, 255, 0.9); */
  font-family: "Open Sans";
  /* color: #808080; */
  color: #ffffff;
  font-size: 0.8rem;
  vertical-align: middle;
  /* opacity: 0.5; */
  width: 99%;
  /* width: 80%; */
  height: 98%;
  /* height: 90%; */
  padding: 4%;
  overflow-y: scroll;
  /* overflow: scroll; */
  /* scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.8); */
}

/* 20240917 Fix */
/* フィルターのプレースホルダー */
.modal_filter input::placeholder {
  /* font-weight: bold;*/
  opacity: 0.7;
  color: #ffffff;
}

/* フィルターのスクロールバーの設定 */
.modal_filter_inner::-webkit-scrollbar {
  /* scrollbar-width: thin; */
  width: 7px;
  height: 7px;
  display: none;
}

.modal_filter_inner::-webkit-scrollbar-thumb {
  /* scrollbar-width: thin; */

  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
}

.modal_filter_inner:hover::-webkit-scrollbar {
  /* background-color: rgba(0,0,0,0.8);
  border-radius: 20px; */
  display: block;
}

/* xボタン(閉じるボタン)を右端に並べる為に flex を付けて xボタン(閉じるボタン)に 
   margin-left: auto; を設定。
   ボタン要素はインライン要素なのでそれだけでは margin-left: auto の効力は無い */
#filter_button {
  display: flex;
  /* justify-content: flex-end; */
  justify-content: space-between;
}

/* 20240917 Fix */
/* xボタン(閉じるボタン)を右端に揃える */
#modal_close {
  margin-left: auto;
  height: 1rem;
  line-height: 0.5;
  /* border: 1px solid #bbb; */
  /* background-color: #f1f1f1; */
  border-radius: 15%;
  /* color: #808080; */
  color: #ffffff;
  /* font-size: 0.5rem; */
  font-size: 0.8rem;
  padding: 0.3rem;
}

/* 20240917 Fix */
/* フィルターボタンとクリアーボタン */
.filter_on_off {
  /* border: 1px solid #bbb; */
  border: 1px solid #ffffff;
  /* background-color: #f1f1f1; */
  border-radius: 15%;
  /* color: #808080; */
  color: #ffffff;
  font-size: 0.7rem;
  padding: 0.3rem;
  margin-right: 0.5rem;
}

/* 20240917 Fix */
#filter_text {
  /* background-color: rgba(255, 255, 255, 0.7); */
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  margin-top: 0.8rem;
  padding: 0.2rem;
  width: 100%;
  font-family: "Open Sans";
  font-size: 0.7rem;
}

#filter_table {
  margin-top: 0.5rem;
}

/* checkbox に対してテキストを縦中央に揃える */
#filter_table td {
  display: flex;
  align-items: center;
}

#filter_table input {
  margin-right: 0.4rem;
}



/* ------------------------------↓ 他のシートへの リンク ↓------------------------------*/

.modal_sheet_link {
  position: fixed;
  /* width: 200px;  */
  /* 2024/09/17 width につき修正 */
  width: 120px;
  /* height: 20%; */
  height: 160px;
  background-color: rgba(0, 0, 0, 0.6);
  overflow-y: hidden;
  /* overflow-y: scroll; */
  /* position: relative; */
  /* display: flex;
  justify-content: center; */
}

/*不要　→ align-items: center; */
.modal_sheet_inner {
  font-family: "Open Sans";
  color: #ffffff;
  font-size: 0.8rem;
  vertical-align: middle;
  /* width: 90%;
  height: 95%; */
  padding: 4%;
  text-align: center;
  position: relative;
}

/* 2024/09/17 ul につき修正 */
.modal_sheet_inner ul {
  margin-top: 15px;
}

.modal_sheet_on_scroll {
  /* font-family: "Open Sans";
  color: #ffffff;
  font-size: 0.8rem;
  vertical-align: middle;  
  padding: 4%;
  text-align: center;
  position: relative; */
  overflow-y: scroll;
  overflow-x: hidden;
}

.modal_sheet_inner li {
  list-style: none;
  align-items: center;
  margin-top: 0.7rem;
}

/* .modal_sheet_link li {
  list-style: none;
  align-items: center;
  margin-top: 0.7rem;
} */
.modal_sheet_link a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  /* background-color: transparent; */
}

/* 要素同士を重ねる  参考URL: https://qiita.com/kuuuuumiiiii/items/a519658dba9582d99505 */
.modal_sheet_link_scroll {
  position: absolute;
  top: 3px;
  /* left: 180px; */
  /* 2024/09/17 left につき修正 */
  left: 105px;
  width: 10%;
  height: 100%;
  text-align: center;
  /* background-color: rgba(247, 16, 16, 0.6);  */
  /* overflow-y: scroll; */
  margin: 0 0 0 auto;
}

div #modal_sheet_link_close {
  position: absolute;
  top: 2px;
  left: 7px;
  width: 5%;
  height: 5%;
  text-align: center;
  /* background-color: rgba(247, 16, 16, 0.6);  */
  /* overflow-y: scroll; */
  margin: 0 0 0 auto;
  color: rgba(255, 255, 255, 0.8);
}

/* フィルターのスクロールバーの設定 */
.modal_sheet_link::-webkit-scrollbar {
  width: 7px;
}

.modal_sheet_link::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
}

/* ------------------------------↑ 他のシートへの リンク ↑------------------------------*/




/* 行の追加 */
#add-row {
  height: 5rem;
  width: 5rem;
  color: #808080;
  border: 1px solid #bbb;
  background-color: #f1f1f1;
  border-radius: 15%;
  font-family: 'Open Sans';
  font-size: 14px;
  margin-top: 1rem;
}

#add-dvi {
  width: 100px;
}

.tabulator-row.tabulator-selected {
  background-color: #a09da9
}


@media (hover:hover) and (pointer:fine) {
  .tabulator-row.tabulator-selectable:hover {
    background-color: #f9f9fc;
    cursor: pointer
  }
}


/* チェックボックスがチェックされている場合の色設定 */
/*  クラス名に tabulator-row まで指定して複数クラスの指定にしないと .tabulator-row.tabulator-row-even の
    設定が反映されてしまう */
.tabulator-row.row-checked {
  background-color: #a09da9
}

.tabulator-row.row-checked:hover {
  background-color: #b1afb6
}

/* リンクのホバーの色 */
/* a:hover{
  color: #b3d0d7;
} */
/* aタグの他、他のシートへのリンク文字列など */
a:hover,
li#sheet_link:hover,
div#modal_sheet_link_close:hover,
li#download:hover .dli-box-in {
  color: #b3d0d7;
}

/* a:hover,
li#sheet_link:hover,
div#modal_sheet_link_close:hover {
  color: #b3d0d7;
} */