News001

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

import { Container, Grid, Box, Flex, Icon, Text, Inline } 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--divide" bd-y>
          <Grid as="a" isBoxLink href="#" gtc="subgrid" gc="1 / -1" g={['20', '30']} py="30" set="var:hov">
            <Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
              <Inline fz="s">2025.07.13</Inline>
              <Text d="inline-flex" jc="center" fz="xs" lh="xs" c="text" bgc="white" bd p="10 20" bdrs="99">新サービス</Text>
            </Grid>
            <Flex ai="center" td="none" g="30" hov="in:cLink">
              <Text>目標金額を設定して貯蓄ができる「目的別預金」が登場。楽しみながら計画的な資産形成が行えます。</Text>
              <Icon icon="arrow-right" fz="s" c="text" mx-s="auto" />
            </Flex>
          </Grid>
          <Grid as="a" isBoxLink href="#" gtc="subgrid" gc="1 / -1" g={['20', '30']} py="30" set="var:hov">
            <Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
              <Inline fz="s">2025.07.13</Inline>
              <Text d="inline-flex" jc="center" fz="xs" lh="xs" c="white" bgc="text" p="10 20" bdrs="99">セキュリティ</Text>
            </Grid>
            <Flex ai="center" td="none" g="30" hov="in:cLink">
              <Text>当行を装った不審なメール（フィッシング詐欺）にご注意ください</Text>
              <Icon icon="arrow-right" fz="s" c="text" mx-s="auto" />
            </Flex>
          </Grid>
          <Grid as="a" isBoxLink href="#" gtc="subgrid" gc="1 / -1" g={['20', '30']} py="30" set="var:hov">
            <Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
              <Inline fz="s">2025.07.13</Inline>
              <Text d="inline-flex" jc="center" bd bdc="accent" fz="xs" lh="xs" c="white" bgc="accent" p="10 20" bdrs="99">重要なお知らせ</Text>
            </Grid>
            <Flex ai="center" td="none" g="30" hov="in:cLink">
              <Text>インターネットバンキングサービス利用規定の一部改定について</Text>
              <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-end" jc="flex-end">
        <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\:in\:cLink {
      color: var(--_isHov, var(--link));
    }
  }
</style>