_開発ページ

  1. 0. サイトカラー
  2. 1. マージンの設定
  3. 2. キャッチコピー
    1. ・キャッチコピー
    2. ・サブキャッチコピー
  4. 3. 見出し
    1. ・h3
    2. ・h4
    3. ・h5
    4. ・h6
  5. 4. テキスト
    1. ・文字寄せ
      1. ・左寄せ
      2. ・中央寄せ
      3. ・右寄せ
    2. ・文字の太さ
    3. ・色付き文字
    4. ・アンダーライン
    5. ・テキストリンク
    6. ・注意書き
  6. 5. 基本カラム
    1. ・2カラム
      1. ・本文
      2. ・見出し＋本文
      3. ・見出し＋画像＋本文
      4. ・画像＋本文
    2. ・3カラム
      1. ・本文
      2. ・見出し＋本文
      3. ・見出し＋画像＋本文
      4. ・画像＋本文
  1. 6. 画像
    1. ・1カラム
    2. ・2カラム
    3. ・3カラム
  2. 7. 画像＋本文
    1. ・画像：左寄せ
      1. ・画像サイズ：小
      2. ・画像サイズ：中
      3. ・画像サイズ：大
    2. ・画像：右寄せ
      1. ・画像サイズ：小
      2. ・画像サイズ：中
      3. ・画像サイズ：大
  3. 8. メニュー＋画像＋本文＋下層リンク
    1. ・2カラム
    2. ・3カラム
  4. 9. リンク
    1. ・箇条書きリンク
    2. ・関連リンク
    3. ・背景付きボタン
    4. ・アンカーリンク
    5. ・ページ間リンク
    6. ・リンクボタン
  1. 10. 装飾
    1. ・囲み枠
      1. ・タイプ1
      2. ・タイプ2
      3. ・タイプ3
    2. ・区切り線
      1. ・実線
      2. ・点線
    3. ・背景色
    4. ・リスト
      1. ・数字付き
      2. ・箇条書き
    5. ・引用
    6. ・目次
    7. ・吹き出し
      1. ・タイプ1
      2. ・タイプ2
  2. 11. テーブル
    1. ・通常テーブル
    2. ・段組み変更テーブル
    3. ・下線のみテーブル
    4. ・テーブル挿入用グーグルマップ（レスポンシブ対応）

サイトカラー

メインカラー：#8dc031

サブカラー：#75A027

背景カラー1：#F5F9EC

背景カラー2：#F9F8F4

アクセントカラー1：#a33f37

アクセントカラー2：#d7801a

アクセントカラー3：#266583

テキストカラー：#24313C

ボーダーカラー：#dddddd

マージンの設定

マージンの設定は下記のクラスを付与すること。5pxごとに0〜1000pxまで設定可能。
上：「mt_●●」　下：「mb_●●」　右：「mr_●●」　左：「ml_●●」
（例）<p class=”p-catch mb_20“>

マージン0 → mb_0
マージン5 → mb_5
マージン10 → mb_10
マージン15 → mb_15
マージン20 → mb_20
マージン25 → mb_25
マージン30 → mb_30
マージン35 → mb_35
マージン40 → mb_40
マージン45 → mb_45
マージン50 → mb_50
マージン55 → mb_55
マージン60 → mb_60
マージン65 → mb_65
マージン70 → mb_70
マージン75 → mb_75
マージン80 → mb_80
マージン85 → mb_85
マージン90 → mb_90
マージン95 → mb_95
マージン100 → mb_100
マージン150 → mb_105
マージン200 → mb_110
マージン250 → mb_115
マージン300 → mb_120
マージン350 → mb_125
マージン400 → mb_130
マージン450 → mb_135
（・・・中略・・・）
マージン1000 → mb_1000

キャッチコピー

キャッチコピーキャッチコピーキャッチコピーキャッチコピーキャッチコピー 

<p class="p-catch mb_20">
  キャッチコピーキャッチコピーキャッチコピーキャッチコピーキャッチコピー
</p>

サブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピー 

<p class="p-sub-catch mb_20">
  サブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピー
</p>

見出し

H2大見出し 

<h2 class="styled_h2 mb_20">
  H2大見出し
</h2>

H3大見出し 

<h3 class="styled_h3 mb_20">
  H3大見出し
</h3>

H4中身出し 

<h4 class="styled_h4 mb_20">
  H4中身出し
</h4>
H5小見出し 
<h5 class="styled_h5 mb_20">
  H5小見出し
</h5>
H6最小見出し 
<h6 class="styled_h6 mb_20">
	H6最小見出し
</h6>

テキスト

pタグにマージンを指定しない場合、pタグのデフォルトのマージンは2em（フォントサイズ×2倍のピクセル数）になります。

文字寄せ

テキスト左寄せ。テキスト左寄せ。テキスト左寄せ。テキスト左寄せ。 

<p class="text_left mb_20">
	テキスト左寄せ。テキスト左寄せ。テキスト左寄せ。テキスト左寄せ。
</p>

テキスト中央寄せ。テキスト中央寄せ。テキスト中央寄せ。テキスト中央寄せ。 

<p class="text_center mb_20">
	テキスト中央寄せ。テキスト中央寄せ。テキスト中央寄せ。テキスト中央寄せ。
</p>

テキスト右寄せ。テキスト右寄せ。テキスト右寄せ。テキスト右寄せ。 

<p class="text_right mb_20">
	テキスト右寄せ。テキスト右寄せ。テキスト右寄せ。テキスト右寄せ。
</p>

文字の太さ

太字になります。太字になります。太字になります。 

<p class="text_bold mb_20">
	太字になります。太字になります。太字になります。
</p>

普通の太さになります。普通の太さになります。普通の太さになります。 

<p class="text_normal mb_20">
	普通の太さになります。普通の太さになります。普通の太さになります。
</p>

色付き文字

テキストカラーはグリーンです。テキストカラーはグリーンです。 

<p class="text_green mb_20">
	テキストカラーはグリーンです。テキストカラーはグリーンです。
</p>

テキストカラーはディープグリーンです。テキストカラーはディープググリーンです。 

<p class="text_deepGreen mb_20">
	テキストカラーはディープググリーンです。テキストカラーはディープググリーンです。
</p>

テキストカラーはレッドです。テキストカラーはレッドです。 

<p class="text_red mb_20">
	テキストカラーはレッドです。テキストカラーはレッドです。
</p>

テキストカラーはオレンジです。テキストカラーはオレンジです。 

<p class="text_orenge mb_20">
	テキストカラーはオレンジです。テキストカラーはオレンジです。
</p>

テキストカラーはブルーです。テキストカラーはブルーです。 

<p class="text_blue mb_20">
	テキストカラーはオブルーです。テキストカラーはブルーです。
</p>

アンダーライン

グリーンです。クラス名「.q_underline_green」でも使用できます。 

<p>
  <span class="q_underline q_underline1">グリーンです。クラス名「.q_underline_green」でも使用できます。</span>
</p>

レッドです。クラス名「.q_underline_red」でも使用できます。 

<p>
  <span class="q_underline q_underline2">レッドです。クラス名「.q_underline_red」でも使用できます。</span>
</p>

イエローです。クラス名「.q_underline_yellow」でも使用できます。 

<p>
  <span class="q_underline q_underline3">イエローです。クラス名「.q_underline_yellow」でも使用できます。</span>
</p>

オレンジです。クラス名「.q_underline_orenge」でも使用できます。 

<p>
  <span class="q_underline q_underline4">オレンジです。クラス名「.q_underline_orenge」でも使用できます。</span>
</p>

ブルーです。クラス名「.q_underline_blue」でも使用できます。 

<p>
  <span class="q_underline q_underline5">ブルーです。クラス名「.q_underline_blue」でも使用できます。</span>
</p>

テキストリンク

テキストが入ります。テキストが入ります。 

<p class="mb_20">
	<a href="#">テキストが入ります。テキストが入ります。</a>
</p>

注意書き

※注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。 

<p class="notice mb_20">
	※注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。
</p>

基本カラム

2カラム

本文
ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
ここに右カラムに表示させたい任意のテキストや画像タグを入力します。 
<div class="post_row mb_0">
	<div class="post_col post_col-2 mb_20">
		ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
	</div>
	<div class="post_col post_col-2 mb_20">
		ここに右カラムに表示させたい任意のテキストや画像タグを入力します。
	</div>
</div>
見出し＋本文

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row mb_0">
	<div class="post_col post_col-2 mb_20">
		<h3 class="styled_h2 mb_20">H2大見出し</h3>
		<p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="post_col post_col-2 mb_20">
		<h3 class="styled_h2 mb_20">H2大見出し</h3>
		<p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
見出し＋画像＋本文

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row mb_0">
  <div class="post_col post_col-2 mb_20">
    <h3 class="styled_h2 mb_20">H2大見出し</h3>
    <img class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
    <p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </div>
  <div class="post_col post_col-2 mb_20">
    <h3 class="styled_h2 mb_20">H2大見出し</h3>
    <img class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
    <p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </div>
</div>
画像＋本文

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row mb_0">
  <div class="post_col post_col-2 mb_20">
    <img class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
    <p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </div>
  <div class="post_col post_col-2 mb_20">
    <img class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
    <p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </div>
</div>

3カラム

本文
ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
ここに中央カラムに表示させたい任意のテキストや画像タグを入力します。
ここに右カラムに表示させたい任意のテキストや画像タグを入力してください。 
<div class="post_row mb_0">
	<div class="post_col post_col-3 mb_20">
		ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
	</div>

	<div class="post_col post_col-3 mb_20">
		ここに中央カラムに表示させたい任意のテキストや画像タグを入力します。
	</div>

	<div class="post_col post_col-3 mb_20">
		ここに右カラムに表示させたい任意のテキストや画像タグを入力してください。
	</div>
</div>
見出し＋本文

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row mb_0">
	<div class="post_col post_col-3 mb_20">
		<h3 class="styled_h2 mb_20">H2大見出し</h3>
		<p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 mb_20">
		<h3 class="styled_h2 mb_20">H2大見出し</h3>
		<p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 mb_20">
		<h3 class="styled_h2 mb_20">H2大見出し</h3>
		<p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
見出し＋画像＋本文

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキスト

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキスト

H2大見出し

ダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row mb_0">
  <div class="post_col post_col-3 mb_20">
    <h3 class="styled_h2 mb_20">H2大見出し</h3>
    <img class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
    <p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </div>
  <div class="post_col post_col-3 mb_20">
    <h3 class="styled_h2 mb_20">H2大見出し</h3>
    <img class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
    <p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </div>
  <div class="post_col post_col-3 mb_20">
    <h3 class="styled_h2 mb_20">H2大見出し</h3>
    <img class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
    <p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </div>
</div>
画像＋本文

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row mb_0">
	<div class="post_col post_col-3 mb_20">
		<img class="mb_10" class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 mb_20">
		<img class="mb_10" class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 mb_20">
		<img class="mb_10" class="mb_10" src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<p class="mb_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

画像

1カラム

画像のキャプション
<div class="post_col-1 mb_20">
	<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
	<div class="c-image_pct_caption text_center">画像のキャプション</div>
</div>

2カラム

画像のキャプション
画像のキャプション
<div class="post_row mb_0">
	<div class="post_col post_col-2 mb_20">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_left">画像のキャプション</div>
	</div>
	<div class="post_col post_col-2 mb_20">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_right">画像のキャプション</div>
	</div>
</div>

3カラム

画像のキャプション
画像のキャプション
画像のキャプション
<div class="post_row mb_0">
	<div class="post_col post_col-3 mb_20">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_left">画像のキャプション</div>
	</div>

	<div class="post_col post_col-3 mb_20">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_center">画像のキャプション</div>
	</div>

	<div class="post_col post_col-3 mb_20">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_right">画像のキャプション</div>
	</div>
</div>

画像＋本文

画像：左寄せ

画像サイズ：小
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image left small mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_left">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image left small nowrap mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_left">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
画像サイズ：中
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image left middle mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_center">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image left middle nowrap mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_center">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
画像サイズ：大
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="c-image left large mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_right">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="c-image left large nowrap mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_right">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

画像：右寄せ

画像サイズ：小
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image right small mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_left">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image right small nowrap mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_left">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
画像サイズ：中
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image right middle mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_center">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image right middle nowrap mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_center">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
画像サイズ：大
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="c-image right large mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_right">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="c-image right large nowrap mb_20">
	<div class="c-image_pct">
		<img src="/wp-content/uploads/2024/03/690x460.png" alt="">
		<div class="c-image_pct_caption text_right">画像のキャプション</div>
	</div>
	<div class="c-image_txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
リンクなし

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

リンク付き

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

<div class="post_row mb_0">
  <div class="post_col post_col-2 mb_20">
    <div class="p-grid_item">
      <div class="c-menu">
        <span class="c-menu_header"><span>リンクなし</span></span>
        <div class="c-menu_body">
          <div class="c-menu_body_pct">
            <img alt="" src="/wp-content/uploads/2024/03/690x460.png">
          </div>
          <div class="c-menu_body_txt">
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post_col post_col-2 mb_20">
    <div class="p-grid_item">
      <div class="c-menu">
        <a href="#" rel="noopener noreferrer" target="_self"><span class="c-menu_header"><span>リンク付き</span></span></a>
        <div class="c-menu_body">
          <div class="c-menu_body_pct">
            <img alt="" src="/wp-content/uploads/2024/03/690x460.png">
          </div>
          <div class="c-menu_body_txt">
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
          </div>
        </div>
        <ul class="c-menu_children">
          <li><a href="#" rel="noopener noreferrer" target="_self"><span>下層ページリンク</span></a></li>
          <li><a href="#" rel="noopener noreferrer" target="_self"><span>下層ページリンク下層ページリンク下層ページリンク下層ページリンク</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
リンクなしリンクなしリンクなしリンクなし

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

リンク付きリンク付きリンク付きリンク付き

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

リンク付き

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

<div class="post_row mb_0">
  <div class="post_col post_col-3 mb_20">
    <div class="p-grid_item">
      <div class="c-menu">
        <span class="c-menu_header"><span>リンクなしリンクなしリンクなしリンクなし</span></span>
        <div class="c-menu_body">
          <div class="c-menu_body_pct">
            <img alt="" src="/wp-content/uploads/2024/03/690x460.png">
          </div>
          <div class="c-menu_body_txt">
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="post_col post_col-3 mb_20">
    <div class="p-grid_item">
      <div class="c-menu">
        <a href="#" target="_self" rel="noopener noreferrer"><span class="c-menu_header"><span>リンク付きリンク付きリンク付きリンク付き</span></span></a>
        <div class="c-menu_body">
          <div class="c-menu_body_pct">
            <img alt="" src="/wp-content/uploads/2024/03/690x460.png">
          </div>
          <div class="c-menu_body_txt">
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
          </div>
        </div>
        <ul class="c-menu_children">
          <li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク</span></a></li>
          <li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク下層ページリンク下層ページリンク下層ページリンク</span></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="post_col post_col-3 mb_20">
    <div class="p-grid_item">
      <div class="c-menu">
        <a href="#" target="_self" rel="noopener noreferrer"><span class="c-menu_header"><span>リンク付き</span></span></a>
        <div class="c-menu_body">
          <div class="c-menu_body_pct">
            <img alt="" src="/wp-content/uploads/2024/03/690x460.png">
          </div>
          <div class="c-menu_body_txt">
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
          </div>
        </div>
        <ul class="c-menu_children">
          <li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク</span></a></li>
          <li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク下層ページリンク下層ページリンク下層ページリンク</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="c-menu mb_20">
	<ul class="c-menu_children">
		<li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク</span></a></li>
		<li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク下層ページリンク下層ページリンク下層ページリンク</span></a></li>
	</ul>
</div>

関連リンク

<div class="relatedLink mb_20" style="padding-bottom: 10px !important;">
	<p class="ttl">関連リンク</p>
	<ul class="linkList01 triangle">
		<li class="not_icon"><a href="#http://www.yahoo.co.jp" rel="noopener noreferrer" target="_blank">三角:Yahoo別窓：アイコン無し</a></li>
		<li class="elink"><a href="#http://www.yahoo.co.jp" rel="noopener noreferrer" target="_blank">三角:Yahoo別窓</a></li>
		<li class="elink"><a href="http://www.yahoo.co.jp" rel="noopener noreferrer" target="_self">三角:Yahoo同窓</a></li>
		<li><a href="/" rel="noopener noreferrer" target="_blank">三角:CMS内別窓</a></li>
		<li><a href="/" rel="noopener noreferrer" target="_self">三角：CMS内同窓</a></li>
		<li class="elink_pdf"><a href="/uploads/files/test.pdf" rel="noopener noreferrer" target="_blank">三角:PDF書類（PDF:223.0 B）</a></li>
		<li class="elink_doc"><a href="/uploads/files/test.docx" rel="noopener noreferrer" target="_blank">三角:Word書類（WORD:224.0 B）</a></li>
		<li class="elink_xls"><a href="/uploads/files/test.xlsx" rel="noopener noreferrer" target="_blank">三角:Excel書類（EXCEL:224.0 B）</a></li>
		<li class="elink_ppt"><a href="/uploads/files/test.pptx" rel="noopener noreferrer" target="_blank">三角:PowerPoint書類（Power Point:224.0 B）</a></li>
	</ul>
</div>
ダミーテキストダミーテキスト 
<div class="btnWrap01-2 mb_20">
	<a class="btnTxt01-2" href="#">ダミーテキストダミーテキスト</a>
</div>
ダミーテキストダミーテキスト 
<div class="btnWrap01-3 mb_20">
	<a class="btnTxt01-3" href="#">ダミーテキストダミーテキスト</a>
</div>
<div class="q_frame q_frame1 mb_20">
	<ul class="pageLinkList pageLinkList02">
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
	</ul>
</div>

ページ間リンク

<div class="q_frame q_frame1 mb_20">
	<ul class="pageLinkList pageLinkList03">
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
	</ul>
</div>
ボタン1 
<div class="q_button_wrap">
	<a class="q_custom_button q_custom_button1" href="#">ボタン1</a>
</div>
ボタン2 
<div class="q_button_wrap">
	<a class="q_custom_button q_custom_button2" href="#">ボタン2</a>
</div>
ボタン3
<div class="q_button_wrap">
	<a class="q_custom_button q_custom_button3" href="#">ボタン3</a>
</div>

装飾

囲み枠

タイプ1 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 

<p id="decoration_well_1" class="q_frame q_frame1 mb_20">
	<span>タイプ1</span>
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

タイプ2 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 

<p id="decoration_well_2" class="q_frame q_frame2 mb_20">
	<span>タイプ2</span>
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

タイプ3 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 

<p id="decoration_well_3" class="q_frame q_frame3 mb_20">
	<span>タイプ3</span>
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

区切り線

実線
<hr class="hr solid mb_20">
点線
<hr class="hr dotted mb_20">

背景色

グリーン
<div class="bg_green mb_20">
	ここにコンテンツが入ります。ここにコンテンツが入ります。
</div>
ディープグリーン
<div class="bg_deepGreen mb_20">
	ここにコンテンツが入ります。ここにコンテンツが入ります。
</div>
レッド
<div class="bg_red mb_20">
	ここにコンテンツが入ります。ここにコンテンツが入ります。
</div>
オレンジ
<div class="bg_orenge mb_20">
	ここにコンテンツが入ります。ここにコンテンツが入ります。
</div>
ブルー
<div class="bg_blue mb_20">
	ここにコンテンツが入ります。ここにコンテンツが入ります。
</div>

リスト

数字付きリスト
  1. テキストが入ります。テキストが入ります。
  2. テキストが入ります。テキストが入ります。
  3. テキストが入ります。テキストが入ります。
<ol class="q_styled_ol">
  <li>テキストが入ります。テキストが入ります。</li>
  <li>テキストが入ります。テキストが入ります。</li>
  <li>テキストが入ります。テキストが入ります。</li>
</ol>
箇条書きリスト
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
<ul class="q_styled_ul">
  <li>テキストが入ります。テキストが入ります。</li>
  <li>テキストが入ります。テキストが入ります。</li>
  <li>テキストが入ります。テキストが入ります。</li>
</ul>

引用

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 
<blockquote class="quote mb_20">
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</blockquote>

吹き出し

タイプ1
ユーザー名

テキストが入ります。テキストが入ります。

ユーザー名

テキストが入ります。テキストが入ります。

<div class="speech_balloon left">
  <div class="speech_balloon_user">
    <img decoding="async" class="speech_balloon_user_image" src="https://dog-navi.com/wp-content/themes/rehub_tcd099/img/common/no_avatar.png" alt="">
    <div class="speech_balloon_user_name">ユーザー名</div>
  </div>
  <div class="speech_balloon_text speech_balloon1">
    <span class="before"></span>
    <div class="speech_balloon_text_inner">
      <p>テキストが入ります。テキストが入ります。</p>
    </div>
    <span class="after"></span>
  </div>
</div>

<div class="speech_balloon right">
  <div class="speech_balloon_user">
    <img decoding="async" class="speech_balloon_user_image" src="https://dog-navi.com/wp-content/themes/rehub_tcd099/img/common/no_avatar.png" alt="">
    <div class="speech_balloon_user_name">ユーザー名</div>
  </div>
  <div class="speech_balloon_text speech_balloon3">
    <span class="before"></span>
    <div class="speech_balloon_text_inner">
      <p>テキストが入ります。テキストが入ります。</p>
    </div>
    <span class="after"></span>
  </div>
</div>
タイプ2
ユーザー名

テキストが入ります。テキストが入ります。

ユーザー名

テキストが入ります。テキストが入ります。

<div class="speech_balloon left">
  <div class="speech_balloon_user">
    <img decoding="async" class="speech_balloon_user_image" src="https://dog-navi.com/wp-content/themes/rehub_tcd099/img/common/no_avatar.png" alt="">
    <div class="speech_balloon_user_name">ユーザー名</div>
  </div>
  <div class="speech_balloon_text speech_balloon2">
    <span class="before"></span>
    <div class="speech_balloon_text_inner">
      <p>テキストが入ります。テキストが入ります。</p>
    </div>
    <span class="after"></span>
  </div>
</div>

<div class="speech_balloon right">
  <div class="speech_balloon_user">
    <img decoding="async" class="speech_balloon_user_image" src="https://dog-navi.com/wp-content/themes/rehub_tcd099/img/common/no_avatar.png" alt="">
    <div class="speech_balloon_user_name">ユーザー名</div>
  </div>
  <div class="speech_balloon_text speech_balloon4">
    <span class="before"></span>
    <div class="speech_balloon_text_inner">
      <p>テキストが入ります。テキストが入ります。</p>
    </div>
    <span class="after"></span>
  </div>
</div>

目次

目次

  1. 目次が入ります目次が入ります
  2. 目次が入ります目次が入ります
    1. 目次が入ります目次が入ります目次が入ります
    2. 目次が入ります目次が入ります
  3. 目次が入ります目次が入ります
  4. 目次が入ります目次が入ります
  5. 目次が入ります目次が入ります
<div class="toc mb_20">
  <p>目次</p>
  <ol>
    <li><a href="#anchor6">目次が入ります目次が入ります</a></li>
    <li><a href="#anchor10">目次が入ります目次が入ります</a>
      <ol>
        <li><a href="#anchor38">目次が入ります目次が入ります目次が入ります</a></li>
        <li><a href="#anchor40">目次が入ります目次が入ります</a></li>
      </ol>
    </li>
    <li><a href="#anchor19">目次が入ります目次が入ります</a></li>
    <li><a href="#anchor22">目次が入ります目次が入ります</a></li>
    <li><a href="#anchor27">目次が入ります目次が入ります</a></li>
  </ol>
</div>

テーブル

通常テーブル

ヘッダー項目(列1) ヘッダー項目(列2) ヘッダー項目(列3)
ヘッダー項目(行1) 内容が入ります 内容が入ります
ヘッダー項目(行2) 内容が入ります 内容が入ります 
<table class="n-table mb_20">
	<thead>
		<tr>
			<th scope="row">
				ヘッダー項目(列1)
			</th>
			<th scope="col">
				ヘッダー項目(列2)
			</th>
			<th scope="col">
				ヘッダー項目(列3)
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">
				ヘッダー項目(行1)
			</th>
			<td>
				内容が入ります
			</td>
			<td>
				内容が入ります
			</td>
		</tr>
		<tr>
			<th scope="row">
				ヘッダー項目(行2)
			</th>
			<td>
				内容が入ります
			</td>
			<td>
				内容が入ります
			</td>
		</tr>
	</tbody>
</table>

段組み変更テーブル

ヘッダー項目(1) 内容が入ります。内容がはいります。内容がはいります。
ヘッダー項目(2) 内容が入ります。内容がはいります。内容がはいります。
ヘッダー項目(3) 内容が入ります。内容がはいります。内容がはいります。 
<div class="c-table mb_20">
	<table class="u-resp-table">
		<tbody>
			<tr>
				<th>
					ヘッダー項目(1)
				</th>
				<td>
					内容が入ります。内容がはいります。内容がはいります。
				</td>
			</tr>
			<tr>
				<th>
					ヘッダー項目(2)
				</th>
				<td>
					内容が入ります。内容がはいります。内容がはいります。
				</td>
			</tr>
			<tr>
				<th>
					ヘッダー項目(3)
				</th>
				<td>
					内容が入ります。内容がはいります。内容がはいります。
				</td>
			</tr>
		</tbody>
	</table>
</div>

下線のみテーブル

メニューが入ります 1,000円
メニューが入ります 2,000円
メニューが入ります 3,000円
メニューが入ります 4,000円 
<table class="l-table mb_20">
	<tbody>
		<tr>
			<td style="width: 70%;>
				メニューが入ります
			</td>
			<td style="width: 30%;>
				1,000円
			</td>
		</tr>
		<tr>
			<td style="width: 70%;>
				メニューが入ります
			</td>
			<td style="width: 30%;>
				2,000円
			</td>
		</tr>
		<tr>
			<td style="width: 70%;>
				メニューが入ります
			</td>
			<td style="width: 30%;>
				3,000円
			</td>
		</tr>
		<tr>
			<td style="width: 70%;>
				メニューが入ります
			</td>
			<td style="width: 30%;>
				4,000円
			</td>
		</tr>
	</tbody>
</table>

テーブル挿入用グーグルマップ（レスポンシブ対応）

住所 〒104-0061 東京都中央区銀座1-8-14 銀座大新ビル５F 
<table class="n-table mb_20">
	<tbody>
		<tr>
			<th style="width: 30%; vertical-align: middle; text-align: center;">
				住所
			</th>
			<td style="width: 70%; vertical-align: middle;">
				〒<span class="LrzXr">104-0061 東京都中央区銀座1-8-14 銀座大新ビル５F</span>
				<div class="ggmap">
					<iframe allowfullscreen="allowfullscreen" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12964.508447545564!2d139.768084!3d35.673872!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8970a634d744feec!2z5p2x5Lqs6YqA5bqn44K344Oz44K_44OL5q2v56eR5Y-j6IWU5aSW56eR44Kv44Oq44OL44OD44Kv77yP5aSn5a2m5pWZ5o6I44GM6Ki644KL44Kk44Oz44OX44Op44Oz44OI44O76Kaq55-l44KJ44Ga5oqc5q2v44O76aGO6Zai56-A44O75q2v44GO44GX44KK44O76aOf44GE44GX44Gw44KK5rK755mC!5e0!3m2!1sja!2sjp!4v1543389904157" style="border: 0;" width="600" height="201" frameborder="0"></iframe>
				</div>
			</td>
		</tr>
	</tbody>
</table>