style.css

/* great appreciation for former system designer T.Nagaya */

/* TODO: body:has(#view:checked) でView/Editのスタイル付け */

/* 変数(配色) */

/* #07d372 = hsl(151deg, 93%, 43%) */
/* #00d372 = hsl(152deg, 100%, 41%) */
/* ut.code();のテーマ色: 151deg */
/* TODO: 説明修正 */
:root {
  /* 1rem = 10px となるように変更 */
  font-size: 62.5%;
  /* 諸般 */
  --c-mono-0: #fff;
  /* 講義詳細 - 背景 */
  --c-mono-1: #f8f8f8;
  /* カレンダー, 所属登録画面 - 枠線 */
  --c-mono-2: #ccc;
  /* 講義テーブル, ボタン - 枠線 */
  --c-mono-3: #999;
  /* 検索条件ボタン(Ignore), 講義テーブル(本体) - 背景 */
  --c-mono-4: #666;
  /* 講義テーブル - [ヘッダー, 本体(ホバー)] - 背景 */
  --c-mono-5: #333;
  /* 諸般 */
  --c-mono-6: #000;
  /* メインコンテンツ, 所属登録画面, AA画面 - 背景 */
  --c-green-1: hsl(151deg, 23%, 88%);
  /* カレンダー - フィルタ背景 */
  --c-green-2: hsl(151deg, 53%, 73%);
  /* 登録ボタン(登録), 検索条件ボタン(Accept) - 背景; 講義詳細(セクション見出し) - 文字 */
  --c-green-3: hsl(151deg, 93%, 43%);
  /* カレンダー - フィルタ背景(ホバー) */
  --c-green-4: hsl(151deg, 53%, 53%);
  /* クリアボタン(ホバー), カレンダー見出し - 文字 */
  --c-green-5: hsl(151deg, 53%, 23%);
  /* カレンダー - マーク */
  --c-blue-1: hsl(241deg, 93%, 33%);
  /* AAタイトル - 文字 */
  --c-red-1: hsl(1deg, 93%, 53%);
  /* 登録ボタン(削除) - 背景(ホバー), 講義詳細表示終了ボタン - 背景 */
  --c-red-2: hsl(1deg, 93%, 33%);
}
body {
  font-family: sans-serif;
  font-size: 1.6rem;
}

/* ボタン関連デザイン */

button.b-button,
.b-button > label {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 1.3rem;
}

.b-button {
  margin: 4px 2px;
}

.b-button:not(button) {
  display: inline-flex;
}

button {
  font-size: inherit;
  --c-dominant: var(--c-green-3);
  --c-base: var(--c-mono-0);
  --c-border: var(--c-dominant);
}

.f-clickable {
  --c-base: var(--c-mono-0);
  --c-border: var(--c-dominant);
}

a:not(main a),
button,
.register-button,
.f-clickable {
  border: 1px solid var(--c-border);
  background-color: var(--c-base);
  color: var(--c-dominant);
  scroll-behavior: smooth;
}
a:not(main a):focus,
button:focus,
.register-button:focus,
.f-clickable:focus {
  background-color: var(--c-dominant);
  color: var(--c-base);
}
@media (any-hover: hover) {
  a:not(main a):hover,
  button:hover,
  .register-button:hover,
  .f-clickable:hover {
    background-color: var(--c-dominant);
    color: var(--c-base);
  }
}

.f-reset {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: inherit;
  border: none;
  text-decoration: underline;
  color: var(--c-mono-4);
  background-color: transparent;
  --c-dominant: unset;
  --c-base: unset;
  --c-border: unset;
}
@media (any-hover: hover) {
  .f-reset:hover {
    --c-base: var(--c-green-5);
  }
}

span:has(> .f-ribbon) {
  padding: 0;
}

.f-ribbon {
  position: relative;
  border: none;
  width: max-content;
  min-width: 100px;
}
@media (max-width: 400px) {
  .f-ribbon {
    min-width: 60px;
  }
}

input:checked + .f-ribbon::after {
  position: absolute;
  bottom: 10%;
  border-radius: 5em;
  content: "";
  width: 95%;
  height: 8%;
  background-color: var(--c-dominant);
}

/* General */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

button,
label {
  cursor: pointer;
}

label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

select,
input[type="number"],
input[type="search"] {
  display: inline-block;
  vertical-align: middle;
  height: 3em;
  margin: 2px;
  padding: 5px 10px;
  border: 1px solid var(--c-mono-3);
  border-radius: 5px;
  font-weight: normal;
  overflow: hidden;
  text-shadow: 0 1px 0 var(--c-mono-0);
}

.fullscreen-window {
  position: fixed;
  top: var(--l-header-height);
  bottom: var(--l-footer-height);
  left: 0;
  height: calc(100vh - var(--l-header-height) - var(--l-footer-height));
  width: 100vw;
  padding: 10px;
  background-color: var(--c-mono-0);
  overscroll-behavior: none;
}

.over-fullscreen-window {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overscroll-behavior: none;
}

/* タイトル画面 */

#title-window {
  display: flex;
  flex-direction: column;
}

#title-window div,
#title-window header {
  display: flex;
  align-items: center;
  justify-content: center;
}

#title-header {
  height: 20%;
  background-color: var(--c-mono-3);
  color: var(--c-mono-0);
}

#title-head-main {
  font-size: 2em;
  margin-left: 10%;
}
@media (max-width: 400px) {
  #title-window {
    word-break: keep-all;
    text-align: center;
  }
  #title-header {
    flex-direction: column;
  }
  #title-head-main {
    margin-left: 0;
  }
}

#title-main {
  font-size: 1.5em;
  flex-direction: column;
  gap: 10%;
  height: 80%;
  background-color: var(--c-green-1);
}

#title-main-title {
  font-size: 3em;
  color: var(--c-green-3);
}

#start {
  height: 2em;
  width: 10em;
  border-width: 2px;
  border-radius: 1.5em;
  --c-dominant: var(--c-green-3);
  --c-base: var(--c-green-1);
  margin-bottom: 10%;
}
#start::after {
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  border-top: 3px solid;
  border-right: 3px solid;
  transform: rotate(45deg);
}

@media (max-height: 500px) {
  #start {
    margin-bottom: 0;
  }
}

#title-main-sub {
  color: var(--c-mono-4);
}

/* オーバーレイ */

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

/* AA画面 */

#aa-window {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: var(--c-green-1);
  overflow-x: auto;
}

#delete-aa {
  margin: auto;
  padding: 10px;
}

#aa-alert {
  margin: auto;
  padding: 10px;
  background-color: var(--c-mono-0);
  color: var(--c-red-1);
}

#askii-art {
  background-color: var(--c-mono-0);
  margin: 0 auto;
  padding: 10px;
  max-width: 100%;
  line-height: 1;
  overflow-x: auto;
  white-space: nowrap;
}

/* ヘッダー, フッター共通項目 */

#global-header,
#global-footer {
  position: fixed;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 1;
  box-shadow: 0 0 8px var(--c-base);
  background-color: var(--c-base);
  font-size: 0;
}

header span,
footer span,
a:not(main a) {
  display: inline-block;
  padding: 0 1.5rem;
  height: inherit;
}

/* フッター */

:root {
  --l-footer-height: 3rem;
  scroll-padding-bottom: var(--l-footer-height);
}

#global-footer {
  bottom: 0;
  height: var(--l-footer-height);
  line-height: var(--l-footer-height);
  --c-base: var(--c-mono-4);
  --c-dominant: var(--c-mono-0);
  text-align: end;
}

#global-footer > a {
  font-size: 1.4rem;
}

/* ヘッダー */

body {
  min-width: 300px;
}

:root {
  --l-header-height: 5rem;
  scroll-padding-top: var(--l-header-height);
}

#global-header {
  display: flex;
  top: 0;
  height: var(--l-header-height);
  line-height: var(--l-header-height);
  --c-base: var(--c-mono-0);
  --c-dominant: var(--c-mono-4);
  color: var(--c-dominant);
  border-bottom: 1px solid var(--c-green-1);
  box-sizing: content-box;
}

#global-header label,
#global-header > a {
  font-size: 1.6rem;
}

/* ヘッダー - ut.code()ロゴ */

@media (max-width: 800px) {
  #logo-link:has(~ #toggle-mode) {
    display: none;
  }
  #syllabus-link {
    margin-right: auto;
  }
}

#logo-link {
  padding-right: 0;
  text-decoration: none;
  background-color: var(--c-mono-0);
  color: var(--c-green-3);
  margin-right: auto;
}
#logo-link > span {
  padding: 0;
  vertical-align: top;
}
#logo-link > img {
  display: inline-block;
  height: 100%;
  padding: 10px;
}

/* ヘッダー - モード切り替え */

#toggle-mode {
  position: absolute;
  width: max-content;
  padding: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ヘッダー - アイコン */

.material-icons {
  --c-base: inherit;
  --c-dominant: inherit;
  border: none;
  min-width: var(--l-header-height);
  user-select: none;
}

@media (max-width: 320px) {
  .material-icons {
    min-width: calc(var(--l-header-height) - 5px);
  }
}

body:has(#view:checked) #scroll-to-search {
  display: none;
}

/* メインコンテンツ */

#main-contents {
  background-color: var(--c-green-1);
  padding: 5px 0;
  min-height: calc(100vh - var(--l-header-height) - var(--l-footer-height));
}

#main-contents > section {
  position: relative;
  margin: 20px;
  border-radius: 20px;
  background-color: var(--c-mono-0);
}
@media (max-width: 400px) {
  #main-contents > section {
    margin: 10px;
  }
}

#main-contents > section > header {
  margin: 5px;
  padding: 0 5px;
  border-bottom: 1px solid var(--c-mono-6);
  font-size: 2.2rem;
}

/* 設定画面 */

#settings-window button,
#settings-window header {
  margin: 10px;
}

/* 所属登録画面 */

#status-window {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-green-1);
}

#input-field {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 50px 30px;
  border-radius: 20px;
  line-height: 4em;
  background-color: var(--c-mono-0);
}

#input-field span {
  display: inline-block;
}

#input-message {
  align-self: flex-start;
  font-size: 2em;
}

#personal-status {
  padding: 10px 0;
  max-width: fit-content;
}

#grade {
  margin: 0 1em;
}

#class-number {
  max-width: 4.5em;
}

@media (max-width: 400px) {
  #input-field {
    padding: 10px 20px 30px;
  }
  #grade {
    margin: 0 0.5em;
  }
}

button:disabled {
  background-color: revert;
  color: revert;
  border-color: revert;
  cursor: not-allowed;
}

#autofill-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  user-select: none;
  -webkit-user-select: none;
}

#close-status {
  height: 2em;
  width: 5em;
  border-radius: 0.5em;
  font-size: 1.2em;
  --c-dominant: var(--c-green-3);
  --c-base: var(--c-mono-0);
}

/* 講義詳細 */

:root {
  --l-detail-padding: 30px;
}
body {
  margin: 0;
  padding: var(--l-header-height) 0 var(--l-footer-height) 0;
  overflow: auto;
  overscroll-behavior: none;
}

#detail-window {
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  padding: 20px;
  position: fixed;
  top: calc(var(--l-detail-padding) + var(--l-header-height));
  bottom: calc(var(--l-detail-padding) + var(--l-footer-height));
  left: var(--l-detail-padding);
  right: var(--l-detail-padding);
  background-color: var(--c-mono-1);
  color: var(--c-mono-6);
}
@media (max-width: 400px) {
  #detail-window {
    --l-detail-padding: 15px;
    padding: 15px;
  }
}

#detail-header {
  display: flex;
  height: max-content;
  margin: 0;
  min-height: 5rem;
  width: 100%;
  background-color: inherit;
}

#detail-title {
  margin-right: auto;
  padding: 10px;
  font-size: 2.8rem;
  color: var(--c-mono-6);
}

#detail-button-wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

@media (max-width: 600px) {
  :root {
    --l-detail-padding: 20px;
  }
  #detail-header {
    flex-direction: column-reverse;
  }
  #detail-title {
    font-size: 2rem;
  }
}

#detail-register-box {
  flex: 1 0 0;
  min-width: 6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#detail-label {
  --c-base: var(--c-mono-1);
  width: 100%;
}

#detail-remove {
  flex: 1 0 0;
  height: auto;
  min-width: 6rem;
  padding: 0;
  border: none;
  background-color: inherit;
  color: var(--c-mono-3);
  font-size: 3rem;
  font-weight: bold;
  user-select: none;
  -webkit-user-select: none;
}
@media (any-hover: hover) {
  #detail-remove:hover {
    color: var(--c-red-2);
  }
}

#detail-content {
  overflow: scroll;
  flex-grow: 1;
  flex-basis: 0;
  overscroll-behavior: none;
  overflow-wrap: break-word;
}

#detail-content > section {
  padding: 0.5rem 10px 1rem;
}

#detail-content > section:has(div:empty) {
  display: none;
}

#detail-content header {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  border-bottom: 1px solid var(--c-green-3);
  color: var(--c-green-3);
}

/* カレンダー, 講義テーブル共通項目 */

table {
  font-size: 1.2rem;
}

/* カレンダー */

#calendar-container {
  padding: 10px;
}
body:has(#edit:checked) #calendar-container {
  padding-bottom: 50px;
}

:root {
  --l-calendar-header: 3rem;
  --l-calendar-radius: calc(var(--l-calendar-header) / 2);
  --l-calendar-sub-radius: calc(var(--l-calendar-header) * 3 / 8);
}

/* カレンダー - 単位数表示 */

#credit-display {
  position: absolute;
  right: 30px;
  top: 10px;
}
#credit-counter {
  padding: 20px;
  font-size: 1.5em;
  color: var(--c-green-3);
}

#blank-period {
  position: absolute;
  bottom: 10px;
  left: 20px;
}
body:has(#view:checked) #all-period,
body:has(#view:checked) #blank-period {
  display: none;
}

/* カレンダー - セル */

#time-table {
  display: grid;
  grid-template-columns: var(--l-calendar-header) repeat(
      5,
      minmax(var(--l-calendar-width), 1fr)
    );
  grid-auto-rows: minmax(var(--l-calendar-header), auto);
  margin: 10px;
  overflow-x: auto;
}
body:has(#view:checked) #time-table {
  --l-calendar-width: 10rem;
  border: 0.5px solid var(--c-mono-4);
}
body:has(#edit:checked) #time-table {
  --l-calendar-width: 9rem;
  gap: 10px;
}

#time-table thead,
#time-table tbody,
#time-table tr {
  display: contents;
}
[colspan="5"] {
  grid-column: auto / span 5;
}

#time-table th,
#time-table td {
  display: block;
  padding: 0;
  border: none;
}

/* ここまでgrid用テンプレ, ここからデザイン */

body:has(#view:checked) #time-table th > button {
  color: unset;
  border: none;
  pointer-events: none;
}
body:has(#edit:checked) #time-table th > button {
  background-color: var(--c-mono-1);
  color: var(--c-green-5);
  height: var(--l-calendar-header);
  width: var(--l-calendar-header);
  min-width: max-content;
}
@media (any-hover: hover) {
  body:has(#edit:checked) #time-table th > button:hover {
    background-color: var(--c-mono-2);
  }
}
body:has(#edit:checked) #time-table th {
  display: flex;
  justify-content: center;
  align-items: center;
}

#time-table th {
  font-size: 1.2em;
}

body:has(#view:checked) .today-label {
  background-color: var(--c-green-1);
}
body:has(#view:checked) .today-button {
  font-weight: bold;
  background-color: var(--c-green-3);
  color: var(--c-mono-0) !important;
}

#time-table button {
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
  width: 100%;
  font-size: inherit;
}

#time-table button,
#time-table label {
  font-family: inherit;
}
body:has(#edit:checked) #time-table button,
body:has(#edit:checked) #time-table label {
  border-radius: var(--l-calendar-radius);
  border: 1px solid var(--c-mono-2);
}

body:has(#view:checked) #time-table th,
body:has(#view:checked) #time-table td {
  border: 1px solid var(--c-mono-4);
}

#time-table label {
  flex-direction: column;
  padding: 4px;
  gap: 4px;
}
body:has(#view:checked) #time-table label {
  pointer-events: none;
}
body:has(#edit:checked) #time-table label {
  padding: 2px;
  background-color: var(--c-mono-1);
}

body:has(#edit:checked) #time-table thead th:first-child {
  visibility: hidden;
}

#time-table .lecture-box {
  padding: 3px 6px;
  border-radius: var(--l-calendar-sub-radius);
  color: var(--c-mono-5);
}
body:has(#view:checked) #time-table .lecture-box {
  border-radius: 10px;
  pointer-events: all;
  --c-base: aliceblue;
  --c-dominant: rgb(98, 181, 254);
  color: var(--c-mono-5);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* 影の設定 */
  transition: transform 0.2s ease-in-out;
}
@media (any-hover: hover) {
  body:has(#view:checked) #time-table .lecture-box:hover {
    --c-base: aliceblue;
    transform: translateY(-3px);
  }
}
body:has(#edit:checked) #time-table .lecture-box {
  border: none;
  background-color: inherit;
  pointer-events: none;
}

.required::before {
  content: "◆";
  display: inline;
  font-size: 80%;
  color: var(--c-red-2);
}

.recommended::before {
  content: "▲";
  display: inline;
  font-size: 80%;
  color: var(--c-blue-1);
}

/* カレンダー - ホバー時の挙動 */

body:has(#edit:checked) #time-table input:checked + label {
  background-color: var(--c-green-2);
  color: var(--c-mono-0);
}
@media (any-hover: hover) {
  body:has(#edit:checked) #time-table label:hover {
    background-color: var(--c-mono-2);
  }
  body:has(#edit:checked) #time-table input:checked + label:hover {
    background-color: var(--c-green-4);
  }
}

/* 講義テーブル */

:root {
  --l-register-button: 7.2rem;
}

#view-table-container {
  padding: 10px;
  min-height: calc(100vh - var(--l-footer-height) - var(--l-header-height));
}
#view-table-container > header {
  padding: 0 !important;
}
#display-ribbon-wrapper {
  font-size: 0;
  padding: 0;
}
#display-ribbon-wrapper > span {
  font-size: 2.2rem;
}
#view-table-container .f-ribbon {
  padding: 0 0.25em;
}
#search-status {
  padding: 0;
  pointer-events: none;
}

body:has(#view:checked) #view-table-container {
  display: none;
}

#search-result {
  margin: 0;
  height: 100%;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
}
#search-result th,
#search-result td {
  border-width: 1px;
  border-color: var(--c-mono-2);
  border-style: solid none;
}
.info-col {
  padding: 5px 0.25em;
}
.title-col {
  font-size: 1.4em;
  color: var(--c-green-3);
  text-decoration: underline;
}
.registration-col {
  width: var(--l-register-button);
  min-width: var(--l-register-button);
  padding: 0;
}

.detail-col > span {
  padding: 0 1em;
  display: inline-block;
}

#search-result tbody {
  cursor: pointer;
}
@media (any-hover: hover) {
  #search-result tr:not(:hover) .register-button {
    display: none;
  }
  #search-result tbody tr:hover {
    background-color: var(--c-mono-1);
  }
}

/* 講義テーブル: 本体: 二値ボタン */

.register-button {
  height: calc(var(--l-register-button) / 2);
  width: var(--l-register-button);
  border-radius: calc(var(--l-register-button) / 4);
  font-size: 1.4rem;
  font-weight: bold;
  user-select: none;
  -webkit-user-select: none;
  --c-dominant: var(--c-green-3);
  --c-base: var(--c-mono-0);
  --c-border: var(--c-dominant);
}
input:checked + .register-button {
  --c-dominant: var(--c-red-2);
}
.register-button::after {
  content: "追加";
}
input:checked + .register-button::after {
  content: "削除";
}

/* 検索画面 */

#search-panel {
  padding: 10px;
}
body:has(#view:checked) #search-panel {
  display: none;
}

#search-keyword form {
  display: flex;
  padding: 10px 5px;
  gap: 5px 10px;
  flex-wrap: wrap;
}

#search-keyword header {
  display: flex;
  justify-content: center;
  align-items: center;
}

#do-search-all-label::after {
  content: "対象：科目名のみ";
}
input:checked + #do-search-all-label::after {
  content: "対象：詳細等含む";
}

/* 検索画面: ボタン類配置 */

:root {
  --l-grid: max(4.2rem, 42px);
}

.b-circle {
  border-radius: calc(var(--l-grid) / 2);
}

#search-condition {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 0;
  font-size: 1.4rem;
  user-select: none;
  -webkit-user-select: none;
}

#search-condition > section {
  display: flex;
  align-items: start;
  width: fit-content;
  gap: 10px;
  position: relative;
}

#search-condition header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  height: var(--l-grid);
  width: var(--l-grid);
}

.internal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
}

.accordion-parent {
  display: grid;
  gap: 5px;
  grid-auto-rows: var(--l-grid);
}
#semester {
  grid-template-columns: repeat(4, var(--l-grid));
  grid-template-rows: repeat(2, var(--l-grid));
  grid-auto-flow: column dense;
}
#semester > :nth-child(3n + 1) {
  grid-column: auto / span 2;
}
#evaluation {
  grid-template-columns: repeat(5, calc(0.75 * var(--l-grid)));
  grid-template-rows: repeat(3, calc(0.75 * var(--l-grid)));
  grid-auto-flow: column;
}
#evaluation input:checked + label::after {
  content: "";
  display: block;
  position: relative;
  bottom: 1px;
  height: 12px;
  width: 6px;
  transform: rotate(45deg);
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--c-dominant);
}
@media (any-hover: hover) {
  #evaluation input:checked + label:hover::after {
    border-color: var(--c-base);
  }
}
#evaluation .accordion-child {
  display: flex;
  justify-content: center;
  align-items: center;
}
#evaluation label {
  height: 70%;
  width: 70%;
  border-radius: 15%;
}

#evaluation > .internal-header:first-child {
  grid-row-start: 2;
}
#category {
  grid-template-columns: repeat(8, var(--l-grid));
}
@media (max-width: 470px) {
  #category {
    grid-template-columns: repeat(4, var(--l-grid));
  }
}
#category > :nth-child(-n + 4) {
  grid-column: auto / span 2;
}
#registration {
  grid-template-columns: repeat(2, var(--l-grid));
}

.accordion-child {
  position: relative;
}

/* 検索画面: フィルタ: ボタン共通項目 */

input:checked + .c-binary,
input:checked + .f-ribbon {
  --c-dominant: var(--c-green-3);
}
.c-binary,
.f-ribbon {
  --c-dominant: var(--c-mono-4);
}
input:checked + .reject {
  --c-dominant: var(--c-red-2);
}

/* 検索画面: フィルタ: 三値ボタン */

.button-component {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.button-component input[type="checkbox"] + .f-clickable {
  display: flex;
  pointer-events: auto;
}

/* ローディング画面 */

/* Got from https://projects.lukehaas.me/css-loaders/ */

#loading-message {
  margin: 0;
  padding-top: 50px;
  font-size: 2rem;
  text-align: center;
  z-index: 1;
  background-color: var(--c-mono-0);
}

#loader,
#loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
#loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0, 211, 114, 0.2);
  border-right: 1.1em solid rgba(0, 211, 114, 0.2);
  border-bottom: 1.1em solid rgba(0, 211, 114, 0.2);
  border-left: 1.1em solid rgb(0, 211, 114);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* 付随文書 */

main {
  padding: 0 10px;
}

h1 {
  border-bottom: 2px solid var(--c-green-3);
}

table#filterList {
  background-color: white;
}

table#filterList > thead {
  background-color: bisque;
}

table#filterList > tbody > tr > td:first-child {
  background-color: bisque;
}
table#filterList > tbody > tr > td {
  background-color: blanchedalmond;
  border-color: blanchedalmond;
}