PriceTable004

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

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

<DemoLayout title="PriceTable004">
	<Container isWrapper="l" bgc="base" py="50" hasGutter>
		<Stack g="50">
			<HTML.h lv="2" class="u-trim" fz="2xl" fw="bold" ta="center">料金プラン</HTML.h>
			<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">
						<HTML.span class="u-trim" fz="m" fw="bold" c="blue">Hobby</HTML.span>
						<HTML.span class="u-trim" fz="xl" fw="bold">無料</HTML.span>
					</Stack>
					<HTML.p class="u-trim" fz="xs" o="-20">
						初期費用・追加料金は一切不要です。表示された月額料金のみですべての機能をご利用いただけます。
						契約期間の縛りもないためいつでも安心してプランの変更や解約が可能です。
					</HTML.p>
					<Stack tag="ul" g="10">
						<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">確定申告書類の作成</HTML.span></Flex>
						<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">銀行口座・カード連携</HTML.span></Flex>
						<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">仕訳データの自動入力</HTML.span></Flex>
						<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">月次決算レポート</HTML.span></Flex>
						<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">メンバー招待（最大3名）</HTML.span></Flex>
						<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">データバックアップ</HTML.span></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">
						<HTML.span class="u-trim" fz="m" fw="bold" c="blue">Personal</HTML.span>
						<Flex ai="end" g="10">
							<HTML.span class="u-trim" fz="xl" fw="bold">1,980</HTML.span>
							<HTML.span class="u-trim" fz="xs" fw="bold">/ 円</HTML.span>
						</Flex>
					</Stack>
					<HTML.p class="u-trim" fz="xs" o="-20">
						専門スタッフによる充実のサポートが含まれています。
						操作方法で不明な点や会計に関するご相談など、メールやチャットでいつでもお気軽にお問い合わせください。
					</HTML.p>
					<Stack g="30">
						<Box ta="center" bd bdc="blue" bgc="white" bdrs="10">
							<HTML.span class="u-trim" d="block" fz="s" c="blue" p="15">Hobbyに以下を追加</HTML.span>
						</Box>
						<Stack tag="ul" g="10">
							<Flex tag="li" g="15" ai="center"
								><Icon icon="check" c="blue" /><HTML.span fz="s">メンバー招待（最大10名）</HTML.span></Flex
							>
							<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">チャットサポート</HTML.span></Flex>
							<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">電話サポート</HTML.span></Flex>
							<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">API連携</HTML.span></Flex>
							<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">請求書郵送代行</HTML.span></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">
						<HTML.span class="u-trim" fz="m" fw="bold" c="blue">Pro</HTML.span>
						<Flex ai="end" g="10">
							<HTML.span class="u-trim" fz="xl" fw="bold">9,980</HTML.span>
							<HTML.span class="u-trim" fz="xs" fw="bold">/ 円</HTML.span>
						</Flex>
					</Stack>
					<HTML.p class="u-trim" fz="xs" o="-20">
						本格的なビジネスに耐えうるサポートが含まれています。
						Personalプランよりもさらに充実したサポート体制で、安心してご利用いただけます。
					</HTML.p>
					<Stack g="30">
						<Box ta="center" bd bdc="blue" bgc="white" bdrs="10">
							<HTML.span class="u-trim" d="block" fz="s" c="blue" p="15">Personalに以下を追加</HTML.span>
						</Box>
						<Stack tag="ul" g="10">
							<Flex tag="li" g="15" ai="center">
								<Icon icon="check" c="blue" /><HTML.span fz="s">メンバー招待（最大99名）</HTML.span>
							</Flex>
							<Flex tag="li" g="15" ai="center">
								<Icon icon="check" c="blue" /><HTML.span fz="s">チャットサポート（優先）</HTML.span>
							</Flex>
							<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">電話サポート（優先）</HTML.span></Flex>
							<Flex tag="li" g="15" ai="center"><Icon icon="check" c="blue" /><HTML.span fz="s">API連携（上限なし）</HTML.span></Flex>
						</Stack>
					</Stack>
					<Button href="#" py="15" bdrs="10">このプランを選択</Button>
				</Grid>
			</Columns>
		</Stack>
	</Container>
</DemoLayout>