/* --------------------------------------------
* よくあるご質問(/faq/)
* 本文は「固定ページ用Tpl01」+ 見出し(h2)と「詳細」ブロック
* -------------------------------------------- */
.tpl01 .page__main {
  & > p:first-child {
    font-size: 14px;
    line-height: 2;
    margin: 0 0 3rem;
  }
  & h2 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 4rem 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #1a1a1a;
  }
  & .wp-block-details {
    border-bottom: 1px solid #e3e1dc;
    margin: 0;
    & summary {
      position: relative;
      list-style: none;
      cursor: pointer;
      padding: 1.2rem 2.4rem 1.2rem 2.4rem;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.7;
      &::-webkit-details-marker {
        display: none;
      }
      &::before {
        content: "Q";
        position: absolute;
        left: 0;
        top: 1.05rem;
        font-family: "Akshar", sans-serif;
        font-size: 1.3rem;
        color: #1a1a1a;
      }
      &::after {
        content: "";
        position: absolute;
        right: .4rem;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 1.5px solid #1a1a1a;
        border-bottom: 1.5px solid #1a1a1a;
        transform: translateY(-70%) rotate(45deg);
        transition: transform .3s;
      }
      &:hover {
        opacity: .7;
      }
    }
    &[open] summary::after {
      transform: translateY(-30%) rotate(-135deg);
    }
    & > :not(summary) {
      position: relative;
      font-size: 14px;
      line-height: 2;
      color: #444;
      margin: 0 0 1rem;
      padding-left: 2.4rem;
    }
    & > :not(summary):last-child {
      margin-bottom: 1.6rem;
    }
    & > summary + *::before {
      content: "A";
      position: absolute;
      left: 0;
      top: -.15rem;
      font-family: "Akshar", sans-serif;
      font-size: 1.3rem;
      color: #b08d57;
    }
    & a {
      text-decoration: underline;
    }
  }
}

/* 目次ボタン(functions.php の org24_faq_toc() が見出しから自動で作る) */
.faq-toc {
  margin: 0 0 1rem;
  & ul {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  & a {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .7em 1.3em;
    border: 1px solid #1a1a1a;
    border-radius: 999px;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color .3s, color .3s;
    &::after {
      content: "";
      width: 6px;
      height: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
    }
    &:hover {
      background: #1a1a1a;
      color: #fff;
    }
  }
  @media (max-width: 768px) {
    & ul {
      gap: .5rem;
    }
    & a {
      padding: .6em 1.1em;
      font-size: 13px;
    }
  }
}