h1、h2などの見出しのレベルは、使用先の階層に応じて変更してください。
h1、h2などのタグが異なっていても、class=""の内容が同じであれば、見た目に同じように表示されます。

heading-l

<h1 class="heading-l">見出し</h1>

---

heading-circle

<h1 class="heading-circle">見出し</h1>

---

heading-m

<h1 class="heading-m">見出し</h1>

---

heading-brown

<h1 class="heading-brown">見出し</h1>

---

heading-beige

<h2 class="heading-beige">見出し</h2>

---

heading-beige -large

<h2 class="heading-beige -large">見出し</h2>

---

heading-beige -left

<h2 class="heading-beige -left">見出し</h2>

---

heading-doubleline

<h2 class="heading-doubleline"><span class="title">見出し</span></h2>

---

heading-doubleline -small

<h2 class="heading-doubleline -small"><span class="title">見出し</span></h2>

---

heading-sand

<h1 class="heading-sand">見出し</h1>

---

heading-underline

<h2 class="heading-underline"><span class="title">見出し</span></h2>

---

heading-underline -large

<h2 class="heading-underline -large">見出し</h

---

heading-simpleline

<h2 class="heading-simpleline">見出し</h2>

---

heading-bean

<h3 class="heading-bean">見出し</h3>

---

heading-dot

<h2 class="heading-dot">見出し</h2>

---

heading-a

<h2 class="heading-a">見出し</h2>

---

heading-b

<h3 class="heading-b">見出し</h3>

---

<div class="_mt-1em box-grey"> box-grey </div> <div class="_mt-1em box-grey"> <p class="_text-13 _lineheight-14">テキストテキストテキストテキストテキスト</p> </div>

---

button-brown

<p><a class="button-brown" href="#">ボタン</a></p>

---

<p> <a class="button-brown -image" href="#" rel="noopener"> <img src="https://gigaplus.makeshop.jp/hasya710/img/guide/qa-contactbutton.svg" alt="お問い合わせはこちら"> </a> </p>

---

button-small

<p><a class="button-small" href="#">ボタン</a></p>

---

button-gold

<p><a class="button-gold" href="#">ボタン</a></p>

---

button-goldborder

<p><a class="button-goldborder" href="#">ボタン</a></p>

---

button-borderbg

<p><a class="button-borderbg" href="#">ボタン</a></p>

---

button-triangle（一行単体）

<p><a class="button-triangle" href="">ボタン</a></p>

---

• ul-dot
• ul-dot

<ul class="ul-dot"> <li>項目名</li> <li>項目名</li> </ul>

---

• ul-kome
• ul-kome

<ul class="ul-kome"> <li>項目名</li> <li>項目名</li> </ul>

---

• ul-hyphen
• ul-hyphen

<ul class="ul-hyphen"> <li>項目名</li> <li>項目名</li> </ul>

---

• ul-cross
• ul-cross

<ul class="ul-cross"> <li>項目名</li> <li>項目名</li> </ul>

---

• ul-circle
• ul-circle

<ul class="ul-circle"> <li>項目名</li> <li>項目名</li> </ul>

---

• ul-indexlink
• ul-indexlink
• ul-indexlink
• ul-indexlink
• ul-indexlink
• ul-indexlink
• ul-indexlink

<ul class="ul-indexlink -column"> <li><a class="link" href="">項目名</a></li> <li><a class="link" href="">項目名</a></li> </ul>

---

• ul-anchorlink
• ul-anchorlink

<ul class="ul-anchorlink -inline"> <li><a class="link" href="#">項目名</a></li> <li><a class="link" href="#">項目名</a></li> </ul>

---

1. ol-circle
2. ol-circle
3. ol-circle
4. ol-circle

<ol class="ol-circle"> <li>項目名</li> <li>項目名</li> </ol>

---

---

背景色

背景色シリーズは、のちに出てくる_pd-1emや_text-whiteと組み合わせて使うと良いです

例

<div class="bg-darkbrown _text-white _pd-1em"> bg-darkbrown _text-white _pd-1emの組み合わせ </div>

---

---

テキストをちょっと変えるためのクラスたち

下記のように、タグに対してクラスを与えることで、文字の大きさや色を変えたりします。
効かない時は、まずclassの頭に「_（アンダーバー）」がついているか確認してください

<p class="_text-8">_text-8</p>

_bold

_mincho

_text-red

_text-gray

_text-gold

_text-darkgold

_text-brown

_text-whiteは白文字になりますが、ここで実際に試すと読めないので…

_text-right

_text-center

_bold

_text-8

_text-13

_text-23

_text-29

_lineheight-14 (line-height: 1.4)

_text-spacing（文字間をちょっと開ける）

---

_mt-05em：上方向に0.5emのマージンをつける

_mt-1em：上方向に1emのマージンをつける

_mt-2em：上方向に2emのマージンをつける

_mt-1em：下方向に1emのマージンをつける

_pd-1em：上下左右に1emの余白をつける（分かりやすいように背景を黄色にしています）

---

ちょっと特殊な子たち

_mark-gold

<p><mark class="_mark-gold">テキスト</mark></p>

_mark-red

<p><mark class="_mark-red">テキスト</mark></p>

---

---

レイアウト系

レイアウト系は使う場所によってはうまく見た目を変えられないので、ちょっと難しいかもしれません。

_sp-visible：スマホでだけ表示したいものにつけます
_pc-visible：PCでだけ表示したいものにつけます。

<img src="○○.jpg" alt="スマホでだけ見せたい画像" class="_sp-visible">

_img-blockは画像を中央揃えにします。

<img src="○○.jpg" class="_img-block" alt="">

_box-centerは中にあるブロック要素を中央揃えにします。

<div class="_box-center _bold"> <ul class="ul-kome _text-13"> <li class="_text-red">北海道・沖縄・一部地域は、合計金額に関わらず、1,200円になります。</li> <li>大変恐れ入りますが、お客様による配送業者のご指定は出来かねます。<br>ご理解のほどよろしくお願いします。ご注文内容や、配送地域に合わせて、<br>最善の配送業者にてお届けさせていただきます</li> <li>送料は全て税別表記です。</li> </ul> </div>

_width-fullは全幅になりますが、使いどころが限られています（このページではうまく動きません）