News001

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

import { Container, Grid, Box, Flex, Icon, HTML } from 'lism-css/astro';
import Button from '@/components/ex/Button/index.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>