@charset "utf-8";

.q_a_box {
  margin-top: 100px;
}
.q_a_box dt {
  padding: 1em;
  background-color: var(--color-theme-white);
  border: 1px solid #eee;
  border-radius: var(--border-radius);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.q_a_box dt:not(:first-child) {
  margin-top: 10px;
}
.q_a_box dd {
  padding: 1em 1em 2em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.q_a_box dt span {
  font-size: 20px;
  padding: .75em 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-font-base);
  margin-right: 1em;
  color: var(--color-theme-white);
  border-radius: var(--border-radius);
}
.q_a_box dd span {
  font-size: 20px;
  padding: .75em 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1em;
  color: var(--color-theme-white);
  font-weight: 500;
  border-radius: var(--border-radius);
}
.high .q_a_box dd span {
  background-color: var(--color-theme-high);
}
.junior .q_a_box dd span {
  background-color: var(--color-theme-junior);
}


section img {
  width: 100%;
  height: auto;
}


table .nomal_3_th {
  background-color: var(--color-theme-primary) !important;
  color: var(--color-theme-white);
}
.scroll table thead td.current {
  background-color: #d36b84;
  color: var(--color-theme-white);
}
.scroll table tbody td:nth-child(6),
.scroll table tbody td:nth-child(7),
.scroll table tbody td:nth-child(8) {
  background-color: #fee9ee;
}


#voice {
  margin-top: calc(var(--content-margin) * 1.5);
}
#voice .voice-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--grid-gap);
}
#voice .voice-box:not(:first-child) {
  margin-top: var(--content-margin);
}
#voice .thumbnail {
  width: 300px;
  position: relative;
}
#voice .thumbnail figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(255,255,255,.8);
  text-align: center;
  padding: 1em;
  font-size: 16px;
  width: 100%;
}
#voice .right {
  flex: 1;
}
#voice .right h4.h5 {
  font-family: var(--font-family-serif);
  font-size: 28px;
}
#voice .right h4.h5 + p {
  margin-top: 1em;
}

.cover-wrap {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.button_wrap {
  max-width: 360px;
}


@media print, screen and ( max-width : 900px ) {
  #voice .voice-box {
    flex-direction: column;
  }
  #voice .thumbnail,
  #voice .right {
    width: 100%;
  }
}