「目次」ブロックについて

<!-- ここから目次r -->
<section id="mokuji" class="up">

<nav>
<h2>目次</h2>
<ul>
<li><span class="number">1.</span><a href="#section1">施術メニュー</a></li>
<li><span class="number">2.</span><a href="#section2">料金</a></li>
<li><span class="number">3.</span><a href="#section3">施設・スタッフ紹介</a></li>
<li><span class="number">4.</span><a href="#section4">よくあるご質問</a></li>
<li><span class="number">5.</span><a href="#section5">場所</a></li>
</ul>
</nav>

</section>

主なスタイルは

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

目次内にある背景画像について(_mensタイプは除く)

上の画像、下の画像と2つ使っています。
上の画像は「images/bg_mokuji_top.png」で、下の画像は「images/bg_mokuji_bottom.png」です。

数字に使っているフォント(_mensタイプは除く)

style.cssの「.number」でGoogle Fontsを指定しています。
フォント自体はcss冒頭で読み込んでいます。
Google Fontsを変更したい場合。

ページ内リンク(アンカーリンク)

このテンプレートは同一ページ内リンクなので、ブロックごとにidをつけてそこに飛ぶ指定になっています。
例えば、
<a href="#section1">
というのは、同一ページ内の
id="section1"
に移動する指示になります。
(「#」と「id」は同じ意味ですが、使う場所によって使い分ける必要があります。)