:root {
  --widthPC: 700px;
}

.review-guide__wrapper {
  margin: auto;
  inline-size: min(100%, var(--widthPC)) !important;
  padding-block-end: 50px;

  a {
    text-decoration: none;
  }
}

.review-guide__wrapper figure,
.review-guide__wrapper img {
  inline-size: min(100%, var(--widthPC)) !important;
  block-size: auto;
  margin-inline: auto !important;
  display: block;
}

.review-guide__wrapper .relative {
  position: relative;
}

.review-guide__wrapper .sp-only,
.review-guide__wrapper .sp-only {
  display: none;
}

.review-guide__wrapper .pc-only,
.review-guide__wrapper .pc-only {
  display: block;
}

@media (any-hover: hover) {
  .review-guide__wrapper a:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}

.review-guide__wrapper .faq {
  summary {
    display: block;
    cursor: pointer;
    position: relative;

    img {
      margin-block: 1rem;
    }

    &::after {
      position: absolute;
      content: "";
      border-bottom: 3px solid #fff;
      border-right: 3px solid #fff;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      inset-block-start: 50%;
      inset-inline-end: 5%;
      transform: rotate(45deg) translate(-50%, -50%);
      z-index: 10;
      transition: transform 0.4s;
    }
  }
  details[open] summary::after {
    transition: transform 0.4s;
    transform: rotate(-135deg);
  }
  p {
    display: block;
    padding-inline: 2rem;
    margin-block-end: 1.5rem;
    font-size: 1.4em;
    line-height: 1.6;
  }

  .js-details-content {
    height: 0;
    overflow: hidden;
    will-change: height;
    display: flow-root;
  }

  /* Safari用 */
  summary::-webkit-details-marker {
    display: none;
  }
}

@media (max-width: 768px) {
  .review-guide__wrapper .sp-only,
  .review-guide__wrapper .sp-only {
    display: block;
  }

  .review-guide__wrapper .pc-only {
    display: none;
  }
}