03 - 罫線で区切る沿革

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

import { Stack, Container, Frame, Grid, Media, Box, Text, Heading } from 'lism-css/astro';
---

<DemoLayout title="About03">
  <Container isWrapper="m" bgc="base" py="50" hasGutter>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="3xl" fw="bold" ff="accent" ta="center">私たちの歩み</Heading>
      <Stack bd-l g="40">
        <Grid gtc={['auto', null, '16rem 1fr']} g="30">
          <Box>
            <Text bd-l bdc="text" fz="2xl" p="15 30" ms="-1px">2016</Text>
          </Box>
          <Stack g="30" ps={['30', null, '0']} pb="20">
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
            <Stack g="20">
              <Text fz="l" fw="bold">株式会社Journeyful設立</Text>
              <p>「一人ひとりに合った旅を届けたい」。そんな思いから、創業者の佐藤と鈴木が都内の小さなアパートの一室で会社を立ち上げました。</p>
              <p>
                旅行の専門家とエンジニア、あわせて5人。決まりきったパッケージツアーではなく、自分だけの旅を組み立てられるサービスの開発を始めました。
              </p>
            </Stack>
          </Stack>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="30">
          <Box>
            <Text bd-l bdc="text" fz="2xl" p="15 30" ms="-1px">2019</Text>
          </Box>
          <Stack g="30" ps={['30', null, '0']} pb="20">
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.pexels.com/photos/3184668/pexels-photo-3184668.jpeg?auto=compress&cs=tinysrgb&w=1920"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
            <Stack g="20">
              <Text fz="l" fw="bold">旅のWebサービス「Journeyful」を公開</Text>
              <p>約3年の開発を経て、サービスを正式に公開しました。</p>
              <p>
                専任のコンシェルジュがオンラインで希望を聞き、その人だけの旅程を提案します。この体験がSNSで話題になり、多くの旅好きに使われるようになりました。
              </p>
            </Stack>
          </Stack>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="30">
          <Box>
            <Text bd-l bdc="text" fz="2xl" p="15 30" ms="-1px">2025</Text>
          </Box>
          <Stack g="30" ps={['30', null, '0']} pb="20">
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.unsplash.com/photo-1605540827677-693bad36b91f?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
            <Stack g="20">
              <Text fz="l" fw="bold">新ブランド「Journeyful Earth」を開始</Text>
              <p>環境にやさしい移動手段や宿を選び、売上の一部を訪れた地域の環境保護団体に寄付する旅のブランドです。</p>
              <p>
                この取り組みが「ジャパン・トラベル・アワード2025」サステナビリティ部門で大賞を受賞。旅する人も、迎える地域も豊かになる旅を、これからも広げていきます。
              </p>
            </Stack>
          </Stack>
        </Grid>
      </Stack>
    </Stack>
  </Container>
</DemoLayout>