02 - 罫線で区切るアコーディオン

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Stack, Text, Inline, Heading } from 'lism-css/astro';
import { Accordion } from '@lism-css/ui/astro/Accordion';
---

<DemoLayout title="02 - 罫線で区切るアコーディオン">
  <Container isWrapper="m" bgc="base" py="50" hasGutter>
    <Stack g="50">
      {/* セクション見出し */}
      <Stack g="20" ai="center">
        <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">よくある質問</Heading>
        <Inline class="u--trim" fz="s" o="ppp" ta="center">FAQ</Inline>
      </Stack>
      {/* 罫線で区切った開閉式のQ&Aリスト。質問はホバーで背景色が付く */}
      <Accordion.Root layout="stack" bd-be>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">無料でお試しできますか？</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>
              すべてのプランで14日間の無料トライアルをご用意しています。トライアル期間中は機能の制限がなく、クレジットカードの登録も必要ありません。
            </Text>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">支払い方法には何が使えますか？</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>主要なクレジットカードと銀行振込に対応しています。年払いをお選びいただくと、月払いに比べて2ヶ月分の料金がお得になります。</Text>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">途中でプランを変更できますか？</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>
              いつでも変更できます。上位プランへの変更は申し込み後すぐに反映され、差額は日割りで計算されます。下位プランへの変更は次の更新日から適用されます。
            </Text>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">解約したあとのデータはどうなりますか？</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>解約から90日間はデータをお預かりしています。その間に再度ご契約いただければ、解約前の状態から利用を再開できます。</Text>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">サポートへの問い合わせ方法を教えてください。</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>
              管理画面のチャットとメールで受け付けています。平日10時から18時までにいただいたお問い合わせには、当日中の返信を心がけています。
            </Text>
          </Accordion.Panel>
        </Accordion.Item>
      </Accordion.Root>
    </Stack>
  </Container>
</DemoLayout>