#dx {
  padding: 160px 20px 200px 20px;
  background-color: var(--bg-color_01);
}
@media screen and (max-width: 768px) {
  #dx {
    padding: 60px 20px 100px 20px;
  }
}
#dx .headline {
  margin: 0 0 70px 0;
}
@media screen and (max-width: 768px) {
  #dx .headline {
    margin: 0 0 20px 0;
  }
}
#dx .headline h2 {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 80px 0;
}
@media screen and (max-width: 768px) {
  #dx .headline h2 {
    margin: 0 0 30px 0;
  }
}

#outline {
  width: min(1000px, 100%);
  margin: 0 auto 100px auto;
  display: grid;
  gap: 20px;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  #outline {
    margin: 0 auto 100px auto;
  }
}

#detail {
  width: min(1000px, 100%);
  margin: auto;
  display: grid;
  gap: 100px;
}
@media screen and (max-width: 768px) {
  #detail {
    gap: 100px;
  }
}
#detail .detail_1 {
  display: grid;
  justify-items: center;
}
#detail .detail_2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
@media screen and (max-width: 768px) {
  #detail .detail_2 {
    grid-template-columns: 1fr;
    gap: 100px;
  }
}
#detail figure {
  width: min(515px, 100%);
  margin: auto;
}
#detail figure img {
  width: 235px;
  margin: 0 auto 10px auto;
}
#detail figure figcaption {
  display: grid;
  gap: 20px;
  text-align: justify;
}
#detail figure figcaption h3 {
  font-weight: 700;
  text-align: center;
}/*# sourceMappingURL=dx.css.map */