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