@charset "UTF-8";

/**
 * 共通設定
 */
:where(.hanasuto-faq) {
  --page-gap: 28px;
}


.hanasuto-faq {
  padding-inline: var(--page-gap);
}




/**
 * FAQ
 */
.section-faq {
  max-width: 936px;
  margin-block: 120px;
  margin-inline: auto;

  .section-faq-title {
    margin-bottom: 16px;
    padding-block: 0.25em;
    padding-inline: 0.75em;
    border-bottom: 1px solid var(--color-text);
    font-weight: 600;
    font-size: clamp(18px, 4.8vw, 24px);
  }

  .section-faq-content {
    display: grid;
    gap: 30px;
    --background-color: #EBF1F7;

    .faq-list {
      font-weight: 600;
    }

    .faq-title {
      padding-block: 1em;
      padding-left: clamp(3em, 8.2vw, 4em);
      padding-right: 1.25em;
      line-height: 1.25;
      background-color: var(--background-color);
      position: relative;

      &::before {
        content: "Q";
        position: absolute;
        left: clamp(1em, 3.6vw, 1.75em);
      }
    }

    .faq-detail {
      padding-block: 1em;
      padding-left: clamp(3em, 8.2vw, 4em);
      padding-right: 1.25em;
      border: 3px solid var(--background-color);
      position: relative;

      &::before {
        content: "A";
        position: absolute;
        left: clamp(1em, 3.6vw, 1.75em);
      }

      p {
        margin-block: 1em;
      }

      a {
        color: #1E92FF;
        text-decoration: underline;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }

  .carecone-topbutton {
    position: relative;
    align-items: center;
    margin-block: 40px;
    margin-inline: auto;
  }

  .button-slidechange {
    --background: var(--color-accent);
    width: min(100%, 230px);
    aspect-ratio: 230 / 48;
  }

}