Greeting002

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

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

<DemoLayout title="Greeting002">
  <Wrapper contentSize="l" py="50" bgc="base" hasGutter>
    <Stack g="50">
      <Stack class="u--trimAll" g="40">
        <Inline fz="min(22vw, 10rem)" fw="bold" ff="accent" mx-s="-.5rem" c="gray" o="ppp" whs="nowrap">Greeting</Inline>
        <Heading level="2" fz="3xl" fw="bold" ff="accent">代表メッセージ</Heading>
      </Stack>
      <Flow fz="l" lh="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/random/img?category=ceo" alt="" width="960" height="640" 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>