News001

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

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

<DemoLayout title="News001">
	<Container isWrapper="m" py="50" hasGutter>
		<Grid gtc={['1fr', 'auto 1fr']} g="40">
			<Box gr={['1', '1 / 2']} gc={['1', '1 / 2']}>
				<h2 class="u-trim">お知らせ</h2>
			</Box>
			<Box gr={['2', '2']} gc={['1', '1 / 3']}>
				<Grid gtc={['auto', 'auto 1fr']} className="u-collapseGrid" ov="clip" p="0" bd-y>
					<Grid tag="a" isLinkBox href="#" gtc="subgrid" gc="1 / -1" g={['20', '30']} py="30" setHov>
						<Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
							<HTML.span fz="s">2025.07.13</HTML.span>
							<HTML.p d="in-flex" jc="center" fz="xs" lh="xs" c="text" bgc="white" bd p="10 20" bdrs="99">新サービス</HTML.p>
						</Grid>
						<Flex ai="center" td="none" g="30" hov="to:cLink">
							<HTML.p>目標金額を設定して貯蓄ができる「目的別預金」が登場。楽しみながら計画的な資産形成が行えます。</HTML.p>
							<Icon icon="arrow-right" fz="s" c="text" mx-s="auto" />
						</Flex>
					</Grid>
					<Grid tag="a" isLinkBox href="#" gtc="subgrid" gc="1 / -1" g={['20', '30']} py="30" setHov>
						<Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
							<HTML.span fz="s">2025.07.13</HTML.span>
							<HTML.p d="in-flex" jc="center" fz="xs" lh="xs" c="white" bgc="text" p="10 20" bdrs="99">セキュリティ</HTML.p>
						</Grid>
						<Flex ai="center" td="none" g="30" hov="to:cLink">
							<HTML.p>当行を装った不審なメール（フィッシング詐欺）にご注意ください</HTML.p>
							<Icon icon="arrow-right" fz="s" c="text" mx-s="auto" />
						</Flex>
					</Grid>
					<Grid tag="a" isLinkBox href="#" gtc="subgrid" gc="1 / -1" g={['20', '30']} py="30" setHov>
						<Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
							<HTML.span fz="s">2025.07.13</HTML.span>
							<HTML.p d="in-flex" jc="center" bd bdc="accent" fz="xs" lh="xs" c="white" bgc="accent" p="10 20" bdrs="99"
								>重要なお知らせ</HTML.p
							>
						</Grid>
						<Flex ai="center" td="none" g="30" hov="to:cLink">
							<HTML.p>インターネットバンキングサービス利用規定の一部改定について</HTML.p>
							<Icon icon="arrow-right" fz="s" c="text" mx-s="auto" />
						</Flex>
					</Grid>
				</Grid>
			</Box>
			<Flex gr={['3', '1 / 2']} gc={['1', '2 / 3']} ai="flex-e" jc="flex-e">
				<Button href="#" variant="outline" w={['stretch', 'auto']} min-w="8rem" fz="s" p="15" bdrs="10">View All</Button>
			</Flex>
		</Grid>
	</Container>
</DemoLayout>

<style>
	@media (any-hover: hover) {
		.-hov\:to\:cLink {
			color: var(--_isHov, var(--link));
		}
	}
</style>