02 - 署名つきの代表メッセージ

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

import { Wrapper, Grid, Flex, Frame, Media, Stack, Flow, Inline, Heading } from 'lism-css/astro';
---

<DemoLayout title="About02">
  <Fragment slot="head">
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400&display=swap" rel="stylesheet" />
  </Fragment>
  <Wrapper contentSize="l" py="50" bgc="base" hasGutter>
    <Stack g="50">
      <Stack class="u--trimAll" g="40">
        <Inline
          fz="min(16vw, 10rem)"
          fw="normal"
          ff="accent"
          ms="-.5rem"
          c="gray"
          o="ppp"
          whs="nowrap"
          style={{ '--ff--accent': "'Libre Baskerville', Georgia, serif" }}>Greeting</Inline
        >
        <Heading level="2" fz="3xl" fw="bold" ff="accent">代表メッセージ</Heading>
      </Stack>
      <Flow hl="l">
        <p>
          あらゆるモノがインターネットに繋がり、膨大なデータが生成される現代において、
          そのデータをいかに安全に、そして有効に活用するかが企業競争力の源泉となっています。
        </p>
        <p>
          私たちは創業以来、情報セキュリティ分野における技術開発に注力し、
          お客様の大切な情報資産をあらゆる脅威から守る、堅牢なシステムとソリューションを提供してまいりました。
          技術は日々進化しますが、お客様からの「信頼」こそが私たちの事業の根幹であるという信念は、
          決して揺らぐことはありません。最高水準のセキュリティ技術とコンサルティングを通じて、
          お客様が安心してデータを活用し、新たな価値を創造できる社会基盤の構築に貢献してまいります。
        </p>
      </Flow>
      <Flex jc="flex-end">
        <Grid gtc="6rem auto" g="30" ai="center" px="40">
          <Frame as="figure" ar="1/1" bdrs="99">
            <Media
              src="https://cdn.lism-css.com/img/avatar/8KAmN8R1HbuA.webp"
              alt=""
              width="800"
              height="800"
              style={{ objectPosition: '50% 20%' }}
            />
          </Frame>
          <Stack g="20" class="u--trimAll" ff="accent">
            <Inline fz="l">代表取締役社長</Inline>
            <Inline fz="xl" fw="bold">田中　誠二</Inline>
          </Stack>
        </Grid>
      </Flex>
    </Stack>
  </Wrapper>
</DemoLayout>