News004

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

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

<DemoLayout title='News004'>
	<Container isWrapper='m' bgc='base-2' py='50' hasGutter>
		<Grid gtr={['auto', null, 'auto auto 1fr']} gtc={['auto', null, 'auto 1fr']} g='30'>
			<Stack gr='1' gc='1' g='20' min-w={['auto', null, '12rem']}>
				<HTML.p class='u-trim' fz='3xl' fw='light' lts='l'>News</HTML.p>
				<HTML.h lv='2' class='u-trim' fz='s' fw='normal' o='-20'>お知らせ</HTML.h>
			</Stack>
			<Grid gr={['2', null, '1 / -1']} gc={['1', null, '2']} gtc={['auto', 'auto 1fr']} g='30'>
				<Grid
					tag='a'
					isLinkBox
					href='#'
					gtc='subgrid'
					gc='1 / -1'
					g={['20', '30']}
					bgc='white'
					p='30'
					bdrs='20'
					setTransition
					setHov
					setTransition
					hov='bxsh'
				>
					<Grid gtc={['auto auto', 'auto 1fr']} g='30' jc='start' ai='center'>
						<HTML.p fz='m'>2025.07.13</HTML.p>
						<HTML.p d='if' jc='center' fz='xs' lh='xs' c='text' bd p='10 20' bdrs='99' ta='center'>新サービス</HTML.p>
					</Grid>
					<Flex ai='center' c='text' td='n' g='30'>
						<HTML.p setTransition hov='to:cLink'
							>目標金額を設定して貯蓄ができる「目的別預金」が登場。楽しみながら計画的な資産形成が行えます。</HTML.p
						>
						<Flex ai='center' jc='center' p='15' bd bdc='text' bdrs='99' setTransition hov='to:reverse'>
							<Icon icon='caret-right' fz='xs' mx-s='auto' />
						</Flex>
					</Flex>
				</Grid>
				<Grid
					tag='a'
					isLinkBox
					href='#'
					gtc='subgrid'
					gc='1 / -1'
					g={['20', '30']}
					bgc='white'
					p='30'
					bdrs='20'
					setTransition
					setHov
					setTransition
					hov='bxsh'
				>
					<Grid gtc={['auto auto', 'auto 1fr']} g='30' jc='start' ai='center'>
						<HTML.p fz='m'>2025.07.13</HTML.p>
						<HTML.p d='if' jc='center' fz='xs' lh='xs' c='text' bd p='10 20' bdrs='99' ta='center'>セキュリティ</HTML.p>
					</Grid>
					<Flex ai='center' c='text' td='n' g='30'>
						<HTML.p setTransition hov='to:cLink'>当行を装った不審なメール（フィッシング詐欺）にご注意ください。</HTML.p>
						<Flex ai='center' jc='center' p='15' bd bdc='text' bdrs='99' setTransition hov='to:reverse'>
							<Icon icon='caret-right' fz='xs' mx-s='auto' />
						</Flex>
					</Flex>
				</Grid>
				<Grid
					tag='a'
					isLinkBox
					href='#'
					gtc='subgrid'
					gc='1 / -1'
					g={['20', '30']}
					bgc='white'
					p='30'
					bdrs='20'
					setTransition
					setHov
					setTransition
					hov='bxsh'
				>
					<Grid gtc={['auto auto', 'auto 1fr']} g='30' jc='start' ai='center'>
						<HTML.p fz='m'>2025.07.13</HTML.p>
						<HTML.p d='if' jc='center' fz='xs' lh='xs' c='text' bd p='10 20' bdrs='99' ta='center'>重要なお知らせ</HTML.p>
					</Grid>
					<Flex ai='center' c='text' td='n' g='30'>
						<HTML.p setTransition hov='to:cLink'>インターネットバンキングサービス利用規定の一部改定について</HTML.p>
						<Flex ai='center' jc='center' p='15' bd bdc='text' bdrs='99' setTransition hov='to:reverse'>
							<Icon icon='caret-right' fz='xs' mx-s='auto' />
						</Flex>
					</Flex>
				</Grid>
			</Grid>
			<Flex gr={['3', null, '2']} gc='1'>
				<Button href='#' jc='center' w={['stretch', null, 'auto']} min-w='10rem' fz='s' p='15' bdrs='99'>View All</Button>
			</Flex>
		</Grid>
	</Container>
</DemoLayout>

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