PriceTable004

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

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

<DemoLayout title="PriceTable004">
  <Container isWrapper="l" bgc="base" py="50" hasGutter>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">料金プラン</Heading>
      <Columns cols={['1', null, '3']} g="30">
        <Grid gtr="subgrid" gr="span 4" 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="pp">
            初期費用・追加料金は一切不要です。表示された月額料金のみですべての機能をご利用いただけます。
            契約期間の縛りもないためいつでも安心してプランの変更や解約が可能です。
          </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>
          </Stack>
          <Button href="#" bgc="blue" py="15" bdrs="10">今すぐはじめる</Button>
        </Grid>
        <Grid gtr="subgrid" gr="span 4" 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="pp">
            専門スタッフによる充実のサポートが含まれています。
            操作方法で不明な点や会計に関するご相談など、メールやチャットでいつでもお気軽にお問い合わせください。
          </Text>
          <Stack g="30">
            <Box ta="center" bd bdc="blue" bgc="white" bdrs="10">
              <Inline class="u--trim" d="block" fz="s" c="blue" p="15">Hobbyに以下を追加</Inline>
            </Box>
            <Stack as="ul" g="10">
              <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">メンバー招待（最大10名）</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">API連携</Inline></Flex>
              <Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">請求書郵送代行</Inline></Flex>
            </Stack>
          </Stack>
          <Button href="#" py="15" bdrs="10">このプランを選択</Button>
        </Grid>
        <Grid gtr="subgrid" gr="span 4" 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">Pro</Inline>
            <Flex ai="end" g="10">
              <Inline class="u--trim" fz="xl" fw="bold">9,980</Inline>
              <Inline class="u--trim" fz="xs" fw="bold">/ 円</Inline>
            </Flex>
          </Stack>
          <Text class="u--trim" fz="xs" o="pp">
            本格的なビジネスに耐えうるサポートが含まれています。 Personalプランよりもさらに充実したサポート体制で、安心してご利用いただけます。
          </Text>
          <Stack g="30">
            <Box ta="center" bd bdc="blue" bgc="white" bdrs="10">
              <Inline class="u--trim" d="block" fz="s" c="blue" p="15">Personalに以下を追加</Inline>
            </Box>
            <Stack as="ul" g="10">
              <Flex as="li" g="15" ai="center">
                <Icon icon="check" c="blue" /><Inline fz="s">メンバー招待（最大99名）</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">API連携（上限なし）</Inline></Flex>
            </Stack>
          </Stack>
          <Button href="#" py="15" bdrs="10">このプランを選択</Button>
        </Grid>
      </Columns>
    </Stack>
  </Container>
</DemoLayout>