h1 要素

• h1の中ですべて同じスタイルなら h1.c-heading だけ
• 2種スタイルなら .c-text と .c-highlight
• 3種なら .c-text と .c-highlight に加えて .c-medium
• おまけ、用途にあわせて .c-pre, .c-medium, .c-sub

<h1 class="c-heading">
  <span class="c-pre">.c-pre</span>
  <span class="c-text">.c-text</span>
  <span class="c-medium">.c-medium</span>
  <span class="c-highlight">.c-highlight</span>
  <span class="c-sub">.c-sub</span>
  <span class="c-link">.c-link 途中にリンク</span>
</h1>

section-visual-a

• 左右背景、画面いっぱい

.section-visual-b

• 背景色全面、窓幅いっぱい

.section-visual-b 背景グラデーション

• 背景色全面、窓幅いっぱい

.section-visual-b 背景グラデーション

• 背景色全面、窓幅いっぱい
• .variation-01
  • スマホのとき縦にはみでる

.section-visual-b 背景グラデーション

• 見出しにアイコン
• .variation-02

.section-visual-c

• 背景仕様
• .p-main 左側にメインエリア、透明の背景色
• .p-sub 右の空いているスペースに画像（座標指定）
• .p-sub の画像が飛び出るときは .type-out-of-bounds

.section-visual-d

• 背景仕様
• 左右半分ずつ、透明の背景色 (.c-bg-01, .c-bg-02)

.section-visual-e

• 背景 .bg-ut-gray.type-pale
• 左右のエリアは.grid-utで .type-3to2
• 右がメイン .unit-ut.p-main

.section-visual-e かこまれ

• xxx

.section-visual-e かこまれ2

• xxx

.section-visual-e かこまれ3

• xxx

.section-visual-f

• 画像 .c-bg-01 が左側に飛び出る
• メインは右側 .p-main

.section-visual-g

• 背景仕様
• 背景写真。わりと自由

.section-visual-g

• img画像
• 背景写真。わりと自由

.section-visual-h

• 上部右にメニュー
• .card-ut-title-label

.section-visual-i

• 背景仕様
• 左右半分ずつ、透明の背景色 (.c-bg-01, .c-bg-02)

.pic-ut-arrange-parts

• 画像の上に部品を配置

.section-visual-どれでも とびでる背景柄

• xxx