<!-- FAQ 引き出し型アコーディオン -->
<style>
  /* ===== FAQ アコーディオン ===== */
  .faq-accordion-wrapper {
    background-color: #FAFAFA;
    padding: 40px 20px;
    font-family: "Noto Sans JP", sans-serif;
  }

  .faq-accordion-list {
    max-width: 800px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
  }

  .faq-accordion-item {
    background: #fff;
    margin-bottom: 0;
    list-style: none;
  }

  /* マーカーを完全に消す */
  .faq-accordion-item::marker {
    display: none;
    content: none;
  }

  .faq-question {
    position: relative;
    padding: 24px 48px 24px 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #1A1311;
    cursor: pointer;
    border-bottom: 1px solid #F2EFEB;
    transition: background-color 0.2s ease;
  }

  .faq-question:hover {
    background-color: #f9f9f9;
  }

  /* 矢印アイコン */
  .faq-question::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #1A1311;
    border-bottom: 2px solid #1A1311;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s ease;
  }

  .faq-question.open::after {
    transform: translateY(-25%) rotate(-135deg);
  }

  .faq-question.open {
    border-bottom: 0;
  }

  /* アコーディオンコンテナ */
  .faq-answer-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  /* 答えの内容 */
  .faq-answer {
    background: #F2F2F2;
    padding: 20px 24px 32px;
    font-size: 14px;
    font-weight: 400;
    line-height: 2;
    color: #1A1311;
    transform: translateY(-100%);
    transition: transform 0.35s ease;
    will-change: transform;
  }

  /* 開いた状態 */
  .faq-question.open + .faq-answer-container {
    max-height: var(--actual-height, 500px);
  }

  .faq-question.open + .faq-answer-container .faq-answer {
    transform: translateY(0);
  }

  /* レスポンシブ */
  @media (max-width: 768px) {
    .faq-accordion-wrapper {
      padding: 24px 16px;
    }

    .faq-question {
      padding: 20px 40px 20px 16px;
      font-size: 14px;
    }

    .faq-question::after {
      right: 16px;
    }

    .faq-answer {
      padding: 16px 16px 24px;
      font-size: 13px;
    }
  }
</style>

<div class="faq-accordion-wrapper">
  <ul class="faq-accordion-list">
    
    <li class="faq-accordion-item">
      <div class="faq-question">
        肛門診療を受けるか悩んでいます。どのように相談すればいいですか？
      </div>
      <div class="faq-answer-container">
        <div class="faq-answer">
          まずは当院の公式LINEからご連絡下さい。お電話での予約は承っておりません。専門のカウンセラーが丁寧にご相談に応じます。
        </div>
      </div>
    </li>

    <li class="faq-accordion-item">
      <div class="faq-question">
        初診に掛かる時間はどれくらいですか？
      </div>
      <div class="faq-answer-container">
        <div class="faq-answer">
          医師との診察時間は20分程になります。お時間に余裕を持ってお越しください。
        </div>
      </div>
    </li>

    <li class="faq-accordion-item">
      <div class="faq-question">
        予約なしで来院できますか？
      </div>
      <div class="faq-answer-container">
        <div class="faq-answer">
          当院は完全予約制となります。事前にLINEまたはお電話でご予約をお願いいたします。
        </div>
      </div>
    </li>

    <li class="faq-accordion-item">
      <div class="faq-question">
        友人や付き添いと一緒に来院してもいいですか？
      </div>
      <div class="faq-answer-container">
        <div class="faq-answer">
          ご同伴は原則お断りしております。プライバシー保護の観点から、お一人でのご来院をお願いしております。
        </div>
      </div>
    </li>

    <li class="faq-accordion-item">
      <div class="faq-question">
        当日、施術はカウンセリングと同時にできますか？
      </div>
      <div class="faq-answer-container">
        <div class="faq-answer">
          カウンセリングと手術は基本的には別日でご案内しております。症状やお薬の内容により可否を判断します。詳しくはカウンセリング時にご相談ください。
        </div>
      </div>
    </li>

  </ul>
</div>

<script>
(function() {
  'use strict';
  
  // ページ読み込み時に実行
  function initFAQ() {
    const containers = document.querySelectorAll('.faq-answer-container');
    
    // 各アコーディオンの実際の高さを測定
    containers.forEach(function(container) {
      const answer = container.querySelector('.faq-answer');
      if (answer) {
        const actualHeight = answer.scrollHeight;
        container.style.setProperty('--actual-height', actualHeight + 'px');
      }
    });
    
    // クリックイベント
    const questions = document.querySelectorAll('.faq-question');
    questions.forEach(function(question) {
      question.addEventListener('click', function() {
        // openクラスをトグル
        question.classList.toggle('open');
      });
    });
  }
  
  // DOMが読み込まれたら実行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initFAQ);
  } else {
    initFAQ();
  }
})();
</script>