@charset "utf-8";

.backnumber {
  padding-bottom: 70px;
}
.backnumber_title {
  text-align: center;
  font-size: 3.6rem;
  margin-top: 52px;
}
.backnumber_toc {
}
.backnumber_toc-figure {
  width: 50%;
  line-height: 0;
  margin: 24px auto 0;
}
.backnumber_toc-img {
  --hover-opacity: 0.6;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
.backnumber_toc-img:focus-visible {
  opacity: var(--hover-opacity);
}
@media (any-hover: hover) {
  .backnumber_toc-img:hover {
    opacity: var(--hover-opacity);
  }
}
.backnumber_viewer-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  text-align: center;
  margin-top: 22px;
}
.backnumber_viewer-button {
  --hover-color: #fff;
  --hover-background-color: #007fcc;
  --hover-border-color: transparent;
  display: inline-block;
  min-width: 380px;
  border: 1px solid #000;
  text-align: center;
  padding: 1em;
  transition-property: color, border-color, background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  cursor: pointer;
}
.backnumber_viewer-button:focus-visible {
  color: var(--hover-color);
  background-color: var(--hover-background-color);
  border-color: var(--hover-border-color);
}
@media (any-hover: hover) {
  .backnumber_viewer-button:hover {
    color: var(--hover-color);
    background-color: var(--hover-background-color);
    border-color: var(--hover-border-color);
  }
}
.backnumber_viewer-button span {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}
.backnumber_articles {
  margin-top: 60px;
}
.backnumber_list-text {
  text-align: center;
}
.backnumber_list-link {
  --hover-color: #fff;
  --hover-background-color: #007fcc;
  --hover-border-color: transparent;
  display: inline-block;
  min-width: 380px;
  border: 1px solid #000;
  text-align: center;
  padding: 1em;
  transition-property: color, border-color, background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.backnumber_list-link:focus-visible {
  color: var(--hover-color);
  background-color: var(--hover-background-color);
  border-color: var(--hover-border-color);
}
@media (any-hover: hover) {
  .backnumber_list-link:hover {
    color: var(--hover-color);
    background-color: var(--hover-background-color);
    border-color: var(--hover-border-color);
  }
}
.backnumber_list-link span {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}