/* 年表（chronology） */

.chrono{
  display: block;
  margin: 1rem calc(var(--padding-page) * -1);
  border-top-width: thin;
}
.col-event,
.chrono__general,
.chrono__item--general > .chrono__year,
.chrono__item--general > td,
.chrono__item--general .chrono__ttl, /* この規模のページなら「>」を無理に使わなくても良いそうだ */
.chrono__item--general .chrono__txt{
  background: var(--color-gray-pale);
}
.text--general{
  background: #ddd;
  padding: 0.25rem;
}

.chrono__item{ 
  display: grid;
  align-items: stretch;
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 7em 1fr;
  grid-template-rows: auto auto;
  padding: 0;
  border-top: solid thin var(--color-gray-darker);
}
.chrono td:empty{
  display: none;
}
.crono__hdr{
  display: none;
}

.chrono__year{
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0.75rem var(--padding-page);
  border: none;
  font-weight: normal;
  line-height: 1.4;
}
.chrono__year::after{
  content: "";
  position: absolute;
  top: 1rem;
  right: 0;
  bottom: 1rem;
  width: 1px;
  background: var(--color-gray-translucent);
}
.chrono__item--general:has(> .chrono__main:empty){
  grid-template-rows: auto;
}
.chrono__item--general > .chrono__year{
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}
.chrono__item--general:has(> .chrono__main:empty) > .chrono__year{
  grid-row: auto;
}

.chrono__general{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  justify-self: stretch;
  margin: 0;
  padding: 0;
  border: none;
}
.chrono__item--general > .chrono__general{
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
.chrono__item--general:has(> .chrono__main:empty) > .chrono__general{
  grid-row: auto;
}
.chrono__main{
  display: contents;
}
.chrono__main:empty{
  display: none;
}
.chrono__main--short{
  display: block;
  grid-column: 2 / 3;
  padding: 0.75rem 1rem;
  border: none;
}
.chrono__main--short > .chrono__txt::after{
  display: none;
}
.chrono__item--general > .chrono__main{
  display: block;
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  align-self: stretch;
  padding: 0 var(--padding-page);
  border: none;
}
.chrono__general:empty + .chrono__main{
  grid-row: 1 / 3;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.chrono__ttl{
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.75rem var(--padding-page);
  font-weight: normal;
  font-family: var(--font-serif);
  font-weight: normal;
  font-size: 1.2em;
  line-height: 1.4;
}
.chrono__general:has(.chrono__ttl) + .chrono__main{
  /* 世間のできごとで、見出しとテキストがついている場合 */
  margin-top: -1rem;
}
.chrono__txt{
  position: relative;
  grid-column: 1 / -1;
}
.chrono__txt::after{
  content: "";
  position: absolute;
  top: 1px;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background: var(--color-gray-translucent);
}


.chrono__txt__inner{
  padding: 0.5rem var(--padding-page) 1rem;
}

@media(50rem < width){
  .chrono__item--general > .chrono__year,
  .chrono__item--general > td:not(.chrono__general){
    background: none;
  }
  .chrono{
    display: table;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    empty-cells: show;
    border-top-width: 2px;
  }
  .crono__hdr,
  .chrono__item{
    display: table-row;
  }
  .chrono__year,
  .chrono__main,
  .chrono__general:empty + .chrono__main,
  .chrono td:empty{
    display: table-cell;
    padding: 1rem;
  }
  .crono__hdr > th{
    padding: 0.5rem 1rem;
  }
  .chrono__year{
    text-align: left;
    white-space: nowrap;
  }
  .chrono__year::after{
    display: none;
  }
  .chrono__item--general > .chrono__main {
    display: table-cell;
    padding: 1rem;
  }
  .chrono__general{
    display: table-cell;
    padding: 1rem;
  }
  .chrono__ttl{
    padding: 0;
    border: none;
  }
  .chrono__txt::after{
    top: 1rem;
  }
  .chrono__txt__inner{
    padding: 1rem 0 0;
  }
}