02 - ご相談から公開までのステップ

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

import { Container, Flex, Heading, Inline, Stack, Text } from 'lism-css/astro';
---

<DemoLayout title="02 - ご相談から公開までのステップ">
  <Container as="section" isWrapper="m" isContainer hasGutter bgc="base" py="50">
    <Stack g="50">
      <Stack g="20">
        <Inline fz="s" c="text-2">制作の流れ</Inline>
        <Heading level="2" class="u--trim" fz="2xl" fw="bold">ご相談から公開まで</Heading>
        <Text c="text-2">はじめてのご依頼でも心配はいりません。対話を重ねながら、一つずつかたちにしていきます。</Text>
      </Stack>

      <Stack as="ol" g="40">
        <Stack as="li" g="20">
          <Flex g="15" ai="center">
            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
              <Inline fz="xs">Step.</Inline>
              <Inline fz="l">1</Inline>
            </Inline>
            <Heading level="3" fz="l">お問い合わせ</Heading>
          </Flex>
          <Text px="15">フォームからご相談内容をお送りください。2営業日以内に担当者からご連絡します。内容が固まっていない段階でも構いません。</Text>
        </Stack>

        <Stack as="li" g="20">
          <Flex g="15" ai="center">
            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
              <Inline fz="xs">Step.</Inline>
              <Inline fz="l">2</Inline>
            </Inline>
            <Heading level="3" fz="l">ヒアリング・ご提案</Heading>
          </Flex>
          <Text px="15">事業の強みや届けたい相手を伺い、課題を整理します。そのうえで、制作の範囲とスケジュール、お見積りをご提案します。</Text>
        </Stack>

        <Stack as="li" g="20">
          <Flex g="15" ai="center">
            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
              <Inline fz="xs">Step.</Inline>
              <Inline fz="l">3</Inline>
            </Inline>
            <Heading level="3" fz="l">デザイン・制作</Heading>
          </Flex>
          <Text px="15">情報の構成からデザイン、実装まで。節目ごとに確認の機会を設け、いただいたご意見を反映しながら進めます。</Text>
        </Stack>

        <Stack as="li" g="20">
          <Flex g="15" ai="center">
            <Inline d="inline-flex" fxsh="0" hl="0" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
              <Inline fz="xs">Step.</Inline>
              <Inline fz="l">4</Inline>
            </Inline>
            <Heading level="3" fz="l">公開・運用サポート</Heading>
          </Flex>
          <Text px="15">公開後の反応を確かめ、次の課題を整理します。日々の更新から内容やデザインの見直しまで、継続して支えます。</Text>
        </Stack>
      </Stack>
    </Stack>
  </Container>
</DemoLayout>