main section {
  display: flex;
  flex-wrap: wrap;
}

main section > h2 {
  width: 100%;
}

.data-list {
  display: flex;
  align-items: center;
  margin: 0 -0.5rem;
}

.data-list span {
  cursor: pointer;
  display: block;
  margin: 0.5rem 0.5rem 0;
}

.data-list img {
  max-height: 10rem;
  max-width: 10rem;
}

.item-area em {
  font-style: normal;
  font-weight: bold;
}

.item-area strong {
  color: #ff8a80;
  font-style: normal;
  font-weight: bolder;
}

.item-area dt {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.item-area dt .item-type {
  margin-right: 1rem;
}

.item-area dt .date {
  font-size: 0.9rem;
  margin-right: 1rem;
}

.item-area dt h3 {
  margin: 0.5rem 0;
  width: 100%;
}

.item-area dd {
  margin-bottom: 0.5rem;
  white-space: pre-line;
  word-break: break-all;
}

.item-area dd p {
  margin: 0;
  white-space: pre-line;
  word-break: break-all;
}

.icons {
  margin-bottom: 0;
}

.buttons button img {
  margin-right: 0.2rem;
}

@media (min-width: 1024px) {
  .data-area {
    margin-right: 2rem;
    width: calc(40% - 2rem);
  }

  .data-area .data-image {
    align-items: center;
    display: flex;
    max-height: 23rem;
    margin-bottom: 2rem;
    justify-content: center;
    width: 23rem;
  }

  .data-area .data-image img {
    max-height: 23rem;
    max-width: 23rem;
  }

  .data-area .data-image img[data-src] {
    cursor: pointer;
  }

  .data-list {
    flex-wrap: wrap;
  }

  .item-area {
    width: 60%;
  }

  .item-area dd {
    margin-bottom: 2rem;
  }
}

@media (max-width: 1023px) {
  main section {
    flex-direction: column;
  }

  .data-area,
  .item-area {
    padding: 0 0.5rem;
    width: 100%;
  }

  .data-area {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .data-view {
    max-height: 50vh;
    margin-bottom: 1rem;
  }

  .data-list {
    margin-top: 0.5rem;
    overflow-x: auto;
    width: 100%;
  }

  .item-area {
    margin-top: 2rem;
  }

  .item-area dt {
    flex-wrap: wrap;
  }

  .item-area dt h3 {
    margin-top: 1rem;
    width: 100%;
  }

  .item-area dd {
    margin-bottom: 1rem;
  }

  .buttons button {
    margin-top: 1rem;
    width: 100%;
  }
}