HARUKISM:作品を見た時に少しでも心が揺れ動くような作品を作りたい。ピュアな気持ちで制作/鑑賞できるような方法を探る。

<style>

/* パーツ間の余白を強制的に小さくする */

.section, .block, main > div, div[class*="block"] {

margin-top: 0px !important;

margin-bottom: 0px !important;

padding-top: 5px !important;

padding-bottom: 5px !important;

}

/* ページ内ジャンプを滑らかにする */

html {

scroll-behavior: smooth;

}

</style>

<!-- ==========================================

1. ページ上部のメニュー（目次ボタン）

========================================== -->

<div style="text-align: center; margin-bottom: 40px; padding: 15px; background: #f9f9f9; border-radius: 5px;">

<p style="margin-bottom: 10px; font-weight: bold; font-size: 14px;">目次</p>

<!-- クリックすると #story の場所にジャンプします -->

<a href="#story" style="display: inline-block; margin: 0 10px; color: #333; text-decoration: underline; font-size: 15px;">◆ ブランドストーリー</a>

<!-- クリックすると #faq の場所にジャンプします -->

<a href="#faq" style="display: inline-block; margin: 0 10px; color: #333; text-decoration: underline; font-size: 15px;">◆ よくある質問</a>

</div>

<!-- ==========================================

2. ブランドストーリー（ジャンプ先：#story）

========================================== -->

<div id="story" style="scroll-margin-top: 100px; margin-bottom: 60px; padding: 20px 0;">

<h2 style="font-size: 22px; text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px;">Brand Story</h2>

<div style="line-height: 1.8; max-width: 600px; margin: 0 auto;">

<p>ここにブランドストーリーの文章を記述します。私たちの想いやこだわりをここにすべて詰め込みます。</p>

<p>文章が長くなっても、ページ内リンクで一瞬でたどり着けるので安心です。</p>

</div>

<!-- 上に戻るボタン -->

<div style="text-align: right; margin-top: 20px;">

<a href="#" style="font-size: 12px; color: #888; text-decoration: none;">▲ ページ上部へ戻る</a>

</div>

</div>

<!-- ==========================================

3. よくある質問（ジャンプ先：#faq）

========================================== -->

<div id="faq" style="scroll-margin-top: 100px; margin-bottom: 60px; padding: 20px 0;">

<h2 style="font-size: 22px; text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px;">FAQ（よくある質問）</h2>

<div style="max-width: 600px; margin: 0 auto;">

<p style="font-weight: bold; margin-bottom: 5px;">Q. 送料はいくらですか？</p>

<p style="margin-bottom: 20px; color: #555;">A. 全国一律〇〇円です。〇〇円以上のご購入で送料無料になります。</p>

<p style="font-weight: bold; margin-bottom: 5px;">Q. 注文後どれくらいで届きますか？</p>

<p style="margin-bottom: 20px; color: #555;">A. ご注文から〇営業日以内に発送いたします。</p>

</div>

<!-- 上に戻るボタン -->

<div style="text-align: right; margin-top: 20px;">

<a href="#" style="font-size: 12px; color: #888; text-decoration: none;">▲ ページ上部へ戻る</a>

</div>

</div>