モジュール

コーディングルール

README.me参照（テーマディレクトリ内）

カラーアセット

• .mainColor
• .subColor
• .textColor
• .lineColor
• .bgColor
• .bdrColor
• .textColor
• .linkColor
• .linkColor02

ユーティリティクラス

※**は数字

※末尾に--pcをつけるとpcのみで有効

• .u-mt** 上マージン 10px刻み 0~100px
• .u-mr** 右マージン
• .u-mb** 下マージン
• .u-ml** 左マージン

• .u-pt** 上余白 10px刻み 0~100px
• .u-pr** 右余白
• .u-pb** 下余白
• .u-pl** 左余白

• .u-w** ブロック要素の横幅 5%刻み 5~100%

• .u-fs** フォントサイズ 1px刻み 10~30px

• 細字 .u-fwn
• 太字 .u-fwb

• 左寄せ .u-tal
• 中央寄せ .u-tac
• 右寄せ .u-tar

ステート

ブレイクポイント以上で表示 .is-pc

.is-pc

ブレイクポイント未満で表示 .is-sp

.is-sp

見出し

.c-title-lv2

.c-title-bg-tag

.c-title-bg-tag

.c-title-bg-tag

テキスト装飾

.c-txt-tel 電話番号 000-000-0000(スマホのみリンク有効)

.c-txt-leadリード文（PC：font-size:34 中央寄せ 太字）

.c-txt-strong 強調

.c-txt-small 注釈

.c-txt-link リンクテキスト

.c-txt-emph 強調（背景白）

.c-txt-emph--02 強調（背景色）

.c-txt-marker （白マーカー）

.c-txt-color （テキスト オレンジ色）

.c-txt-color-sub （テキスト 青）

c-txt-sr スクリーンリーダーテキスト

.c-txt-sr スクリーンリーダーテキスト

ボタン

Google Mapで見る

リスト

• リスト
• .c-list__item
• .c-list__item

• 番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト
• .c-list-num__item
• .c-list-num__item

画像

動画

google map

ボックス要素のアラインメント

flexレイアウト

• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム

• PCのみ
• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム

• 上下左右中央寄せ
• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム

• 上下左右中央寄せ PCのみ
• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム

• 右寄せ
• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム

• 右寄せ PCのみ
• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム

• 均等割り付け
• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム

• 均等割り付け PCのみ
• flexアイテム
• flexアイテム
• flexアイテム
• flexアイテム