@charset "UTF-8";
/* 申請締め切りカレンダー（page-onlylist.php）
   表の基本の見た目は style.css の .c-table を使い、ここでは列幅と締め切りの状態だけを足す */

.p-onlylist__notes {
  margin: 0;
  padding: 16px 20px 16px 2.4em;
  list-style: disc;
  background-color: var(--bg_gray);
  font-size: 1.4rem;
  line-height: 1.8;
}
.p-onlylist__notes li + li {
  margin-top: 4px;
}

.p-onlylist__empty {
  margin-top: 30px;
}

.p-onlylist__table .c-table__item {
  width: 100%;
  table-layout: fixed;
}
.p-onlylist__col-date {
  width: 12%;
}
.p-onlylist__col-limit {
  width: 16%;
}
.p-onlylist__table thead th {
  line-height: 1.5;
}
/* 見出しの配色（PCの表の見出しとスマホのカードの見出し列で共通）
   サイト標準の表見出し（#202020）より少し弱めた黒にしている
   -bg: 背景 / -text: 文字 / -line: 見出しどうしの区切り / -under: 見出しと中身の境目 */
.p-onlylist {
  --onlylist-head-bg: #444;
  --onlylist-head-text: #fff;
  --onlylist-head-line: rgba(255, 255, 255, 0.35);
  --onlylist-head-under: #444;
}
#body .p-onlylist__table thead th {
  background-color: var(--onlylist-head-bg);
  border-color: var(--onlylist-head-line);
  border-bottom-color: var(--onlylist-head-under);
  color: var(--onlylist-head-text);
}
#body .p-onlylist__table td {
  text-align: center;
}
#body .p-onlylist__table td.p-onlylist__name {
  text-align: left;
}
.p-onlylist__name a {
  color: #202020;
  font-weight: 700;
  text-decoration: underline;
}
.p-onlylist__name a:hover {
  color: var(--color_red);
  text-decoration: none;
}
.p-onlylist__notes a {
  color: var(--color_link);
  text-decoration: underline;
}
.p-onlylist__notes a:hover {
  text-decoration: none;
}
.p-onlylist__date {
  font-weight: 700;
  white-space: nowrap;
}

.p-onlylist__state {
  display: block;
  font-size: 1.2rem;
  line-height: 1.4;
}
.p-onlylist__limit.is-closed {
  color: #727272;
}
#body .p-onlylist__limit.is-closed {
  background-color: var(--bg_gray);
}
.p-onlylist__limit.is-soon {
  color: var(--color_red);
  font-weight: 700;
}
.p-onlylist__limit.is-none {
  color: #727272;
}

/* スマホ：1イベント1枚のカードにする */
@media screen and (max-width: 767px) {
  .p-onlylist__table thead {
    display: none;
  }
  .p-onlylist__table .c-table__item,
  .p-onlylist__table tbody,
  .p-onlylist__table tr,
  .p-onlylist__table td {
    display: block;
    width: 100%;
  }
  .p-onlylist__table tr {
    border: 1px solid #d3d3d3;
  }
  .p-onlylist__table tr + tr {
    margin-top: 12px;
  }
  #body .p-onlylist__table td {
    border: none;
    text-align: left;
  }
  #body .p-onlylist__table td.p-onlylist__date {
    padding-bottom: 0;
    background-color: #fff;
  }
  #body .p-onlylist__table td.p-onlylist__name {
    padding-top: 2px;
    border-bottom: 1px solid #d3d3d3;
  }
  #body .p-onlylist__table td.p-onlylist__limit {
    position: relative;
    min-height: 3.2em;
    padding-left: 134px;
  }
  #body .p-onlylist__table td.p-onlylist__limit + td.p-onlylist__limit {
    border-top: 1px solid #d3d3d3;
  }
  #body .p-onlylist__table td.p-onlylist__limit + td.p-onlylist__limit::before {
    border-top: 1px solid var(--onlylist-head-line);
  }
  .p-onlylist__table td.p-onlylist__limit::before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 120px;
    white-space: nowrap;
    padding: 0 10px;
    border-right: 1px solid var(--onlylist-head-under);
    background-color: var(--onlylist-head-bg);
    color: var(--onlylist-head-text);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.4;
  }
}