.wrapper {
  opacity: 0;
  animation: fadeIn 1s 1s ease forwards;
}

.content__inner {
  max-width: calc(var(--rem) * 960);
  margin-inline: auto;
  margin-top: calc(var(--rem) * 58);
}

.content-block {
  padding-block: calc(var(--rem) * 40);
  background: rgba(255, 234, 87, 0.3);

  &:not(:first-child) {
    margin-top: calc(var(--rem) * 70);
  }
}

.content-block__head {
  display: grid;
  gap: calc(var(--rem) * 20);
  padding-inline: calc(var(--rem) * 10);
}

.content-block__author {
  display: grid;
  justify-items: center;
  width: fit-content;
  margin-inline: auto;

  img {
    width: calc(var(--rem) * 64);
  }

  figcaption {
    font-size: calc(var(--rem) * 16);
    line-height: 2;
  }
}

.content-block__title {
  display: grid;
  place-items: center;
  min-height: calc(var(--rem) * 80);
  padding: calc(var(--rem) * 10);
  font-family: "Aoto Gothic Bold";
  font-size: calc(var(--rem) * 22);
  line-height: 1.4;
  color: #24517e;
  background: #fff;
  border-radius: calc(var(--rem) * 10);
}

.content-block__img {
  max-width: calc(var(--rem) * 800);
  margin-top: calc(var(--rem) * 14);
  margin-inline: auto;
}

.content-block__text {
  padding: calc(var(--rem) * 30) calc(var(--rem) * 30) 0;
  font-size: calc(var(--rem) * 16);
  line-height: 2;
}

.pc {
}

@media (min-width: 801px) {
  .content__inner {
    margin-top: calc(var(--rem) * 102);
  }

  .content-block {
    padding: calc(var(--rem) * 60) calc(var(--rem) * 80);
    border-radius: calc(var(--rem) * 30);

    &:not(:first-child) {
      margin-top: calc(var(--rem) * 60);
    }
  }

  .content-block__head {
    display: flex;
    align-items: center;
    gap: calc(var(--rem) * 36);
    padding-right: 0;
    padding-left: calc(var(--rem) * 22);
  }

  .content-block__author {
    margin-inline: 0;
  }

  .content-block__title {
    flex: 1;
    font-size: calc(var(--rem) * 36);
  }

  .content-block__text {
    display: grid;
    justify-content: center;
    padding: calc(var(--rem) * 60) 0 0;
    font-size: calc(var(--rem) * 16);
    line-height: 2;

    p + p {
      margin-top: 2em;
    }
  }
}

.content-end {
  padding: calc(var(--rem) * 66) calc(var(--rem) * (20)) calc(var(--rem) * 90);
  line-height: 2;
}

.content-end__inner {
  text-align: center;
}

.content-end__text {
  font-size: calc(var(--rem) * 16);
}

.content-end__date {
  margin-top: calc(var(--rem) * 65);
  font-size: calc(var(--rem) * 12);
}

.content-end__credit {
  margin-top: calc(var(--rem) * 65);
  font-size: calc(var(--rem) * 12);
  color: #9ea0a1;
}

@media (min-width: 801px) {
  .content-end {
    padding: calc(var(--rem) * 140) calc(var(--rem) * (40))
      calc(var(--rem) * 194);
    line-height: 2;
  }

  .content-end__text {
    font-size: calc(var(--rem) * 16);
  }

  .content-end__date {
    margin-top: calc(var(--rem) * 98);
  }

  .content-end__credit {
    margin-top: calc(var(--rem) * 74);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}