04 - 年号を大きく見せる沿革

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

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

<DemoLayout title="About04">
  <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=Playfair+Display:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet" />
  </Fragment>
  <Container isWrapper="m" bgc="base" py="50" hasGutter style={{ '--ff--accent': "'Playfair Display', Georgia, serif" }}>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="3xl" fw="bold" ff="accent" ta="center">工房のあゆみ</Heading>
      <Stack bd-bs>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-be py="40">
          <Text class="u--trim" ff="accent" fz="5xl" fs="i" lh="1">1968</Text>
          <Flow ps={['30', null, '0']}>
            <Text fz="l" fw="bold">木工所として創業</Text>
            <p>初代の山田松雄が、郊外の小さな作業場で創業しました。地元の家具店から注文を受け、椅子と机を一つずつ手で作る日々でした。</p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.pexels.com/photos/30907888/pexels-photo-30907888.jpeg?auto=compress&cs=tinysrgb&w=1920"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
          </Flow>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-be py="40">
          <Text class="u--trim" ff="accent" fz="5xl" fs="i" lh="1">1994</Text>
          <Flow ps={['30', null, '0']}>
            <Text fz="l" fw="bold">自社ブランド「MATSUO」を発表</Text>
            <p>二代目が工房を継ぎ、卸の仕事から自社ブランドへ切り替えました。無垢材の椅子が展示会で注目され、全国の家具店に並ぶようになりました。</p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.unsplash.com/photo-1704751513218-4a03217ff91e?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
          </Flow>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-be py="40">
          <Text class="u--trim" ff="accent" fz="5xl" fs="i" lh="1">2012</Text>
          <Flow ps={['30', null, '0']}>
            <Text fz="l" fw="bold">直営ショールームを開設</Text>
            <p>工房の隣に直営店を構え、作り手が直接お客様に説明できる場を作りました。椅子の修理や張り替えの受付も、ここから始まりました。</p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.unsplash.com/photo-1613906800797-d5d4fb2f7bbb?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
          </Flow>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-be py="40">
          <Text class="u--trim" ff="accent" fz="5xl" fs="i" lh="1">2023</Text>
          <Flow ps={['30', null, '0']}>
            <Text fz="l" fw="bold">三代目が就任、海外へ</Text>
            <p>三代目のもとで、初めて海外の展示会に出展しました。直しながら長く使う家具の文化を、国内外に広げていきます。</p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media src="https://cdn.lism-css.com/img/room/nFsD8915rqe6.webp" alt="" width="960" height="640" />
            </Frame>
          </Flow>
        </Grid>
      </Stack>
    </Stack>
  </Container>
</DemoLayout>