PriceTable002

---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Button } from '@lism-css/ui/astro';

import { Container, Flex, Grid, Icon, Stack, Columns, Text, Inline, Heading } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="PriceTable002">
  <Container isWrapper="l" bgc="base" py="50" set="gutter">
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">料金プラン</Heading>
      <Columns cols={['1', null, '2']} g="40" ai="center">
        <Grid g="30" bgc="white" p="40" bd bdc="blue" bdw="2px" bdrs="20" bxsh="20">
          <Stack w="stretch" g="20">
            <Inline class="u--trim" fz="m" fw="bold" c="blue">Hobby</Inline>
            <Inline class="u--trim" fz="xl" fw="bold">無料</Inline>
          </Stack>
          <Text class="u--trim" fz="xs" o="-20">
            初期費用・追加料金は一切不要です。表示された月額料金のみですべての機能をご利用いただけます。
            契約期間の縛りもないためいつでも安心してプランの変更や解約が可能です。
          </Text>
          <Stack as="ul" g="10">
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">確定申告書類の作成</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">銀行口座・カード連携</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">仕訳データの自動入力</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">月次決算レポート</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">メンバー招待（最大3名）</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">データバックアップ</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">チャットサポート</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">電話サポート</Inline></Flex>
          </Stack>
          <Button href="#" bgc="blue" py="15" bdrs="10">今すぐはじめる</Button>
        </Grid>
        <Grid g="30" bgc="gray:5%" p="40" bdrs="20" bxsh="20">
          <Stack w="stretch" g="20">
            <Inline class="u--trim" fz="m" fw="bold" c="blue">Personal</Inline>
            <Flex ai="end" g="10">
              <Inline class="u--trim" fz="xl" fw="bold">1,980</Inline>
              <Inline class="u--trim" fz="xs" fw="bold">/ 円</Inline>
            </Flex>
          </Stack>
          <Text class="u--trim" fz="xs" o="-20">
            専門スタッフによる充実のサポートが含まれています。
            操作方法で不明な点や会計に関するご相談など、メールやチャットでいつでもお気軽にお問い合わせください。
          </Text>
          <Stack as="ul" g="10">
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">チャットサポート</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">電話サポート</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">API連携</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">請求書郵送代行</Inline></Flex>
            <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">年末調整機能</Inline></Flex>
          </Stack>
          <Button href="#" py="15" bdrs="10">このプランを選択</Button>
        </Grid>
      </Columns>
    </Stack>
  </Container>
</DemoLayout>