Our Commitment私たちのこだわり

私たちのお店では、「食」を通じてお客様に特別なひとときを提供することを何よりも大切にしています。

食材は、地域の信頼できる生産者から直接仕入れています。自然の恵みをそのまま活かし、調理の際には素材本来の味を引き出すよう心がけています。

季節ごとの旬の食材を使用したメニューは、お客様の目と舌を楽しませるよう工夫されています。

店内は、心地よい空間と穏やかな音楽でお客様にリラックスした時間をお過ごしいただけるようデザインされています。

お客様一人ひとりとの出会いに感謝し、その瞬間を大切にしたい。私たちはそんな思いを胸に、日々最高のサービスとお料理をお届けしています。ぜひ足を運んで、特別な時間を体感してください。

「kodawari」ブロックについて(私たちのこだわり)

<!-- ここからkodawari -->
<section id="kodawari" class="section">
<div class="contents">

<h2><span class="hosoku">Our Commitment</span><span class="fade-in-text">私たちのこだわり</span></h2>

<aside class="up"><img src="images/kodawari_img.jpg" alt=""></aside>

<div class="bg1">
<p class="up">私たちのお店では、「食」を通じてお客様に特別なひとときを提供することを何よりも大切にしています。</p>
<p class="up">食材は、地域の信頼できる生産者から直接仕入れています。自然の恵みをそのまま活かし、調理の際には素材本来の味を引き出すよう心がけています。</p>
<p class="up">季節ごとの旬の食材を使用したメニューは、お客様の目と舌を楽しませるよう工夫されています。</p>
<p class="up">店内は、心地よい空間と穏やかな音楽でお客様にリラックスした時間をお過ごしいただけるようデザインされています。</p>
<p class="up">お客様一人ひとりとの出会いに感謝し、その瞬間を大切にしたい。私たちはそんな思いを胸に、日々最高のサービスとお料理をお届けしています。ぜひ足を運んで、特別な時間を体感してください。</p>
</div>

</div>
</section>

主なスタイルは

cssフォルダのstyle.cssから「kodawari」でテキスト検索してみて下さい。詳しい解説もあります。

大きな端末で見た場合に見える両サイドの大きな画像について

「images/bg_kodawari.jpg」です。お好みで入れ替えて下さい。サイズは自由で構いませんが端末サイズで配置バランスがかわるのでおかしくないような写真を選んで下さい。

見出し上にある装飾イラストについて

「images/kazari1.png」です。これはcssの背景画像で指定しており、style.cssの「#kodawari h2」や「#kodawari h2::before」や「#kodawari h2::after」が設定箇所です。

h2見出しテキストについて

<span class="hosoku">で囲めば英語表記のような小さな文字になります。
<span class="fade-in-text">で囲めば以下のようなアニメーションテキストになります。

アニメーションテキスト

この「<span class="fade-in-text">」は他の部分にも使えますが、相性が悪いとおかしな動きになるので、おかしくならない所にだけ使うようにして下さい。

見出し下のイメージ画像

「kodawari_img.jpg」で、htmlに直接画像で配置しています。角を丸くする指定などはstyle.cssの「#kodawari aside」のブロックで調整可能です。

テキストブロックの背景色

style.cssの「#kodawari .bg1」で変更が可能です。余白などの設定もここにあります。

upスタイル

「class="up"」をつけるとここのテキストのように下からアップしてくるアニメーションになります。

アップしてくるアニメーション

このupスタイルは他の部分にも使えますが、相性が悪いとおかしな動きになるので、おかしくならない所にだけ使うようにして下さい。