CTA002

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

import { Box, Stack, Container, Frame, Grid, Media, HTML, Icon, Layer } from 'lism-css/astro';
import Button from '@/components/ex/Button/index.astro';
import './_style.css';
---

<DemoLayout title='CTA002'>
	<Stack g='20' pos='rel' py='50'>
		<Frame isLayer>
			<Media isLayer src='https://cdn.lism-css.com/img/random-2510' alt='' width='960' height='640' />
			<Layer blur='4px' bgc='black:30%' />
		</Frame>
		<Container isWrapper='l' hasGutter z='0'>
			<Stack g='40'>
				<Stack g='30' ai='center'>
					<HTML.p class='u-trim' fz='5xl' fw='100' ff='accent' lts='l' c='white' ta='center'>Contact</HTML.p>
					<HTML.p class='u-trim' fz='m' c='white' ta='center'>お気軽にご相談ください</HTML.p>
				</Stack>
				<Grid gt='repeat' cols={['1', null, '3']} g={['30', null, '40']}>
					<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='10'>
						<Box jslf='c' p='30' bdrs='99' bgc='base-2'>
							<Icon icon='book' fz='4xl' c='text-2' />
						</Box>
						<Stack g='20' ai='center'>
							<HTML.p class='u-trim' fz='m'>資料送付をご希望の方</HTML.p>
							<Button href='#' variant='outline' w='stretch' jc='center' bdrs='10' py='15' fw='bold'>資料請求フォーム</Button>
						</Stack>
					</Grid>
					<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='10'>
						<Box jslf='c' p='30' bdrs='99' bgc='base-2'>
							<Icon icon='user' fz='4xl' c='text-2' />
						</Box>
						<Stack g='20' ai='center'>
							<HTML.p class='u-trim' fz='m'>電話でお問い合わせ</HTML.p>
							<Button href='#' w='stretch' jc='center' bdrs='10' py='15' fw='bold'>TEL: 0123-xx-xxxx</Button>
							<HTML.p class='u-trim' fz='s' lh='s' o='-20'>営業時間：9:00〜18:00</HTML.p>
						</Stack>
					</Grid>
					<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='10'>
						<Box jslf='c' p='30' bdrs='99' bgc='base-2'>
							<Icon icon='chat' fz='4xl' c='text-2' />
						</Box>
						<Stack g='20' ai='center'>
							<HTML.p class='u-trim' fz='m'>メッセージでやり取り</HTML.p>
							<Button href='#' w='stretch' jc='center' bgc='accent' bdrs='10' py='15' fw='bold'>チャットで相談</Button>
							<HTML.p class='u-trim' fz='xs' o='-20'>または</HTML.p>
							<Button href='#' variant='outline' w='stretch' jc='center' bdrs='10' py='15' fw='bold'>メールでお問い合わせ</Button>
							<HTML.p class='u-trim' fz='s' lh='s' o='-20'>2営業日以内に返信いたします</HTML.p>
						</Stack>
					</Grid>
				</Grid>
			</Stack>
		</Container>
	</Stack>
</DemoLayout>