検索

History

History001

沿革コンテンツ用のテンプレートです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。

大きい画面で見る
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Stack, Container, Frame, Grid, Media, HTML, Box } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="History001">
	<Container isWrapper="m" bgc="base" py="50" setGutter>
		<Stack g="50">
			<HTML.h lv="2" class="u--trim" fz="3xl" fw="bold" ff="accent" ta="center">私たちの歩み</HTML.h>
			<Stack bd-l g="40">
				<Grid gtc={['auto', null, '16rem 1fr']} g="30">
					<Box>
						<HTML.p bd-l bdc="text" fz="2xl" p="15 30" mx-s="-1px">2025</HTML.p>
					</Box>
					<Stack g="30" px-s={['30', null, '0']} pb="20">
						<Frame as="figure" ar="16/9" bdrs="10">
							<Media src="https://cdn.lism-css.com/img/random-2510?category=building" alt="" />
						</Frame>
						<Stack g="20">
							<HTML.p fz="l" fw="bold">リズム会社設立</HTML.p>
							<p>「もっと、一人ひとりの心に寄り添う旅を届けたい」——</p>
							<p>
								その一心で、創業者である佐藤と鈴木が、 都内の小さなアパートの一室で「株式会社Journeyful」を設立。
								既存のパッケージツアーに疑問を抱き、テクノロジーの力で、
								誰もが自分だけの物語を紡ぐような旅をデザインできる世界の実現を目指して、サービスの開発に着手した。
								旅の専門家とエンジニアが集い、たった5人のメンバーで、壮大な夢への第一歩を踏み出した瞬間だった。
							</p>
						</Stack>
					</Stack>
				</Grid>
				<Grid gtc={['auto', null, '16rem 1fr']} g="30">
					<Box>
						<HTML.p bd-l bdc="text" fz="2xl" p="15 30" mx-s="-1px">2026</HTML.p>
					</Box>
					<Stack g="30" px-s={['30', null, '0']} pb="20">
						<Frame as="figure" ar="16/9" bdrs="10">
							<Media src="https://cdn.lism-css.com/img/random-2510?category=japan" alt="" />
						</Frame>
						<Stack g="20">
							<HTML.p fz="l" fw="bold">「Journeyful」ローンチ</HTML.p>
							<p>約1年半の開発期間を経て、旅のWebサービス「Journeyful」を正式にローンチ。</p>
							<p>
								サービス開始当初は、専門のコンシェルジュがオンラインで相談に乗り、
								ユーザーの希望に合わせたオーダーメイドの旅行プランを提案するサービスとしてスタートした。
								画一的なツアーではない、パーソナライズされた旅の体験がSNSを中心に話題となり、多くの旅好きから支持を集める。
								自分だけの特別な旅を求める層に、新しい選択肢を提示した。
							</p>
						</Stack>
					</Stack>
				</Grid>
				<Grid gtc={['auto', null, '16rem 1fr']} g="30">
					<Box>
						<HTML.p bd-l bdc="text" fz="2xl" p="15 30" mx-s="-1px">2027</HTML.p>
					</Box>
					<Stack g="30" px-s={['30', null, '0']} pb="20">
						<Frame as="figure" ar="16/9" bdrs="10">
							<Media src="https://cdn.lism-css.com/img/random-2510?category=room" alt="" />
						</Frame>
						<Stack g="20">
							<HTML.p fz="l" fw="bold">新ブランド「Journeyful Earth」発足</HTML.p>
							<p>
								「旅を通じて、地域社会や環境に貢献する」という理念のもと、 サステナブルツーリズムに特化した新ブランド「Journeyful
								Earth」を立ち上げた。
							</p>
							<p>
								環境負荷の少ない移動手段や宿泊施設を選び、旅の収益の一部を現地の環境保護団体に寄付する仕組みを導入。
								この取り組みが評価され、「ジャパン・トラベル・アワード2025」にてサステナビリティ部門大賞を受賞。
								これからも、旅する人と、迎える地域、そして地球全体が豊かになる旅の形を追求し続ける。
							</p>
						</Stack>
					</Stack>
				</Grid>
			</Stack>
		</Stack>
	</Container>
</DemoLayout>
style.css