パーツ集

見出し

ここにタイトルが入ります（h3）

ここにタイトルが入ります（h4）

ここにタイトルが入ります（h5）

<h2>見出し</h2>
<h3>ここにタイトルが入ります（h3）</h3>
<h4>ここにタイトルが入ります（h4）</h4>
<h5>ここにタイトルが入ります（h5）</h5>

概要パーツ

概要パーツ 1カラム

タイトルが入ります。タイトルが入ります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

<dl class="o-facilityItem">
  <dt class="o-facilityItem__ttl">タイトルが入ります。タイトルが入ります。</dt>
  <dd class="o-facilityItem__img"><img src="画像URL" alt=""></dd>
  <dd class="o-facilityItem__desc">
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  </dd>
</dl>
<!-- /.o-facilityItem -->

概要パーツ 2カラム

<div class="o-facilityColumn">
  <div class="o-facilityColumn__body">
    <div class="o-facilityColumn__item">
      <dl class="o-facilityItem">
        <dt class="o-facilityItem__ttl">タイトルが入ります。タイトルが入ります。</dt>
        <dd class="o-facilityItem__img"><img src="画像URL" alt=""></dd>
        <dd class="o-facilityItem__desc">
          <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </dd>
      </dl>
      <!-- /.o-facilityItem -->
    </div>
    <div class="o-facilityColumn__item">
      <dl class="o-facilityItem">
        <dt class="o-facilityItem__ttl">タイトルが入ります。タイトルが入ります。</dt>
        <dd class="o-facilityItem__img"><img src="画像URL" alt=""></dd>
        <dd class="o-facilityItem__desc">
          <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </dd>
      </dl>
      <!-- /.o-facilityItem -->
    </div>
  </div>
</div>
<!-- /.o-facilityColumn -->

概要パーツ 横並び

コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。

<div class="o-facilityColumn2">
  <div class="o-facilityColumn2__body">
    <div class="o-facilityColumn2__img">
      <img src="画像URL" alt="">
    </div>
    <div class="o-facilityColumn2__text">
      <p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
    </div>
  </div>
</div>
<!-- /.o-facilityColumn2 -->

枠付きボックス

通常

<div class="o-borderBox">
  <div class="o-borderBox__body">
    <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
  </div>
</div>
<!-- /.o-borderBox -->

見出しが入ります。見出しが入ります。

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

<dl class="o-borderBox">
  <dt class="o-borderBox__head">見出しが入ります。見出しが入ります。</dt>
  <dd class="o-borderBox__body">
    <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
  </dd>
</dl>
<!-- /.o-borderBox -->

注意喚起

<div class="o-borderBox o-borderBox--caution">
  <div class="o-borderBox__body">
    <p>注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。</p>
  </div>
</div>
<!-- /.o-borderBox -->

注意喚起が入ります。見出しが入ります。

注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。

<dl class="o-borderBox o-borderBox--caution">
  <dt class="o-borderBox__head">注意喚起が入ります。見出しが入ります。</dt>
  <dd class="o-borderBox__body">
    <p>注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。注意喚起テキストです。ここにテキストが入ります。</p>
  </dd>
</dl>
<!-- /.o-borderBox -->