PriceTable002

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

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

<DemoLayout title="PriceTable002">
	<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, '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">
						<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>
						<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>
					</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">
						<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 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">API連携</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>
					</Stack>
					<Button href="#" py="15" bdrs="10">このプランを選択</Button>
				</Grid>
			</Columns>
		</Stack>
	</Container>
</DemoLayout>