@charset "UTF-8";
.graduation-year-table {
  border: 1px solid #888;
  border-collapse: collapse;
  margin: 0 auto;
  width: 650px;
  table-layout: fixed;
}
@media screen and (max-width: 767px) {
  .graduation-year-table {
    width: 100%;
  }
}

.graduation-year-table th,
.graduation-year-table td {
  border: 1px solid #888;
  font-size: 12px;
  line-height: 1.2;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .graduation-year-table td {
    font-size: 10px;
  }
}

.graduation-year-table th {
  font-weight: 700;
}

.graduation-year-table tr:not(.row-selectable) th {
  background: #dfe3f8 linear-gradient(to bottom, #f2f5fb, #dfe3f8);
  color: #113471;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
@media screen and (max-width: 767px) {
  .graduation-year-table tr:not(.row-selectable) th {
    font-size: 10px;
  }
}

.graduation-year-table tr.row-selectable th:nth-child(odd),
.graduation-year-table tr.row-selectable td:nth-child(odd) {
  padding: 5px 0;
}

.graduation-year-table td {
  cursor: pointer;
}

.graduation-year-table tr:nth-child(even) {
  background: #f5f5f5;
}

@media screen and (min-width: 768px) {
  /* PC: 卒業年早見表 hover時 1行2列の背景色変更 */
  .graduation-year-table tbody tr.row-selectable:has(td:hover) th,
  .graduation-year-table tbody tr.row-selectable:has(td:hover) td,
  .graduation-year-table tbody:has(td:nth-child(3):hover) td:nth-child(3),
  .graduation-year-table tbody:has(td:nth-child(3):hover) td:nth-child(4),
  .graduation-year-table tbody:has(td:nth-child(4):hover) td:nth-child(3),
  .graduation-year-table tbody:has(td:nth-child(4):hover) td:nth-child(4),
  .graduation-year-table tbody:has(td:nth-child(5):hover) td:nth-child(5),
  .graduation-year-table tbody:has(td:nth-child(5):hover) td:nth-child(6),
  .graduation-year-table tbody:has(td:nth-child(6):hover) td:nth-child(5),
  .graduation-year-table tbody:has(td:nth-child(6):hover) td:nth-child(6),
  .graduation-year-table tbody:has(td:nth-child(7):hover) td:nth-child(7),
  .graduation-year-table tbody:has(td:nth-child(7):hover) td:nth-child(8),
  .graduation-year-table tbody:has(td:nth-child(8):hover) td:nth-child(7),
  .graduation-year-table tbody:has(td:nth-child(8):hover) td:nth-child(8),
  .graduation-year-table tbody:has(td:nth-child(9):hover) td:nth-child(9),
  .graduation-year-table tbody:has(td:nth-child(9):hover) td:nth-child(10),
  .graduation-year-table tbody:has(td:nth-child(10):hover) td:nth-child(9),
  .graduation-year-table tbody:has(td:nth-child(10):hover) td:nth-child(10) {
    background: #ebf5ff;
  }

  /* PC: 卒業年早見表 hover時 2セル背景色変更 */
  .graduation-year-table tbody td.year-w:hover,
  .graduation-year-table tbody td.year-w:hover + td.year-j,
  .graduation-year-table tbody td.year-j:hover,
  .graduation-year-table tbody td.year-w:has(+ td.year-j:hover) {
    background: #a1d2ff !important;
  }
}