.section {
  padding: 15px 2% 40px 2%;
  margin-bottom: 4rem;
}

main {
  padding-left: 2%;
  padding-right: 2%;
}

/* 固定ヘッダーに重ならないようアンカー位置を調整 */
.section[id] {
  scroll-margin-top: 70px;   /* ヘッダーの高さに合わせる */
}



/* ✅ スマホ表示時に余白を小さくする */
@media (max-width: 768px) {
  .section {
    padding: 10px 2% 20px 2%;
    margin-bottom: 2rem;
  }

  main {
    padding-left: 2%;
    padding-right: 2%;
  }
    }



/*アコーディオン　faq*/
.accordion-faq {
  max-width: 900px;
  background-color: hsl(0, 0%, 100%);
  margin: 1.5em auto;
  border: 1px solid #2657f7e3;
  ;
  /* 外枠 */
  border-radius: 8px;
}

.accordion-faq[open] {

  padding-bottom: 1.4em;

}

.accordion-faq:not([open]) {
  margin-bottom: 7px;

}

.accordion-faq summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  background-color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
}

.accordion-faq summary::-webkit-details-marker {
  display: none;
}

.accordion-faq summary .faq-icon {
  position: absolute;
  right: 2em;
  top: 45%;
  /* slightly raise the icon */
  width: 3px;
  height: .9em;
  pointer-events: none;
}

.accordion-faq summary .faq-icon::before,
.accordion-faq summary .faq-icon::after {
  position: absolute;
  width: 3px;
  height: .9em;
  border-radius: 5px;
  background-color: #3869f1;
  content: '';
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.accordion-faq summary .faq-icon::before {
  transform: translateY(-50%) rotate(90deg);
}

.accordion-faq summary .faq-icon::after {
  transition: transform .3s;
}

.accordion-faq summary.is-open .faq-icon::after {
  transform: translateY(-50%) rotate(90deg);
}

/* accordion content */
.accordion-faq .accordion-content {
  padding: 0 0;
}

.accordion-faq[open] .accordion-content {
  padding: 1em 0 0.2rem;
}

.q-label {
  color: #3869f1;
  font-weight: 900;
  margin-right: 0.7em;
  font-size: 1.1rem;
}

.a-label {
  color: #1dd396;
  font-weight: 900;
  margin-right: 0.7em;
  font-size: 1.1rem;
}

.qa-title {
  margin-left: 0;
  text-align: left;
  flex-grow: 1;
  line-height: 1.4;
  margin-right: 2.5rem;
}

/* Answer text */
.qa-answer {
  margin-left: 0;
  text-align: left;
  flex-grow: 1;
  color: #1dd396;
  font-size: 1rem;
}


.accordion-faq p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 1em 6% 1em 4%;
  line-height: 1.7;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}



.accordion-faq[open] p {
  transform: none;
  opacity: 1;
}

@media (min-width: 769px) {
.qa-answer {
padding-right: 1.5rem;
}
    }


@media (max-width: 768px) {

  .accordion-faq,
  .accordion-faq[open] {
    width: 100%;
    max-width: none;
    margin: 1.5em auto;
    padding: 0;


  }

  .accordion-faq summary {
    padding: 1.15em 5%;
    font-size: clamp(0.75rem, 3.5vw, 1rem);
    text-align: left;
    justify-content: flex-start;
  }

  .accordion-faq .accordion-content {
    padding: 0 0;
  }

  .accordion-faq[open] .accordion-content {
    padding: 1em 0em;
  }

  .accordion-faq p {
    margin: 1em 5% 0.3em 0;
    line-height: 1.6;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
      padding: 1em 6% 1em 6%;
  }

  .accordion-faq img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;

  }

  .accordion-faq summary .faq-icon::before,
  .accordion-faq summary .faq-icon::after {
    width: 4px;
    height: 1.2rem;
    margin: auto 2%;
  }

  .qa-title {
    margin-right: 12%;
    font-size: 0.85rem;
    text-align: left;
    line-height: 1.3;
    flex-grow: 1;
  }

    .qa-answer {
    font-size: clamp(0.8rem, 3.5vw, 0.88rem);
  }

.a-label {
  margin-right: 4%;
  font-size: 1.1rem;
}

}

#contact .slide-icon-button {
  margin-top: 1rem;
}

@media (max-width: 768px) {

  .gradient-icon-button,
  .gradient-icon-button:link,
  .gradient-icon-button:visited {
    padding: 2rem 5%;
    font-size: 1em;
    line-height: 1.25;
    margin-top: 1rem;
  }

  .gradient-icon-button:hover {
    transform: none;
  }
}

/* ----------【問い合わせリンクボタン】------------ */
.contact-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.contact-link-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6em 1.4em;
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
}

.contact-link-btn img.icon-left {
  width: 1.2rem;
  height: auto;
  margin-right: 0.4em;
}

.contact-link-btn::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.6em;
  background: url("../images/open_in_new.svg") no-repeat center/contain;
}



#contact .ribbon-title {
  margin-bottom: 0;
}



@media (max-width: 768px) {
  .contact-link-btn {
    font-size: 0.85rem;
    padding: 0.1em 1.8em;
  }
}


@media (max-width: 360px) {
  .contact-link-btn {
    font-size: 0.75rem;
  }

  .accordion-faq,
  .accordion-faq[open] {
    margin: 1.5em auto;

  }

  .accordion-faq summary {
    padding: 1.15em 3%;
    font-size: 0.8rem;
  }

  .accordion-faq[open] .accordion-content {
    padding: 1em 0em;
  }

  .accordion-faq p {
    margin: 1em 1rem 0.3em -0.9rem;
    line-height: 1.5;
  }

  .accordion-faq img {
    margin: 1em auto;
  }

  .accordion-faq summary .faq-icon::before,
  .accordion-faq summary .faq-icon::after {
    width: 4px;
    height: 1.2rem;
    margin: auto 2%;
  }

  .qa-title {
    margin-right: 5%;
    line-height: 1.3;
    font-size: 0.85rem;
  }

  .qa-answer {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .a-label {
    margin-right: 0.65em;
  }

}

#contact .slide-icon-button {
  margin-top: 1rem;
}