サンプル

H2H2サブテキスト

Copy<h2 class="common_h2">H2<span>H2サブテキスト</span></h2>

H3テキスト

Copy<h3 class="common_h3">H3テキスト</h3>

H4テキスト

Copy<h4 class="common_h4">H4テキスト</h4>

Copy<div class="btns">
    <a href="#">ボタン</a>
</div>

Copy<div class="btns">
    <a href="#">ボタン</a>
    <a href="#">ボタン</a>
</div>

2カラム

Copy<div class="column-box txt_left">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <div class="read">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
</div>

Copy<div class="column-box txt_right">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <div class="read">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
</div>

Copy<div class="column-box">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
</div>

Copy<div class="column-box">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
</div>

Copy<div class="column-box">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
    </figure>
</div>

Copy<div class="column3">
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
    <figure>
        <img src="./images/recruit/dummy.png" alt="ダミー">
        <figcaption>テキスト有の場合</figcaption>
    </figure>
</div>

リスト

• リスト
• リスト
• リスト
• リスト

Copy<ul class="common_list">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

1. リスト
2. リスト
3. リスト
4. リスト

Copy<ol class="common_num-list">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ol>

行テーブル

Copy<div class="row_table">
    <dl>
        <dt>項目</dt>
        <dd>テキストテキストテキストテキスト</dd>
    </dl>
    <dl>
        <dt>項目</dt>
        <dd>テキストテキストテキストテキスト</dd>
    </dl>
    <dl>
        <dt>項目</dt>
        <dd>テキストテキストテキストテキスト</dd>
    </dl>
</div>

テーブル

Copy<div class="common_table">
    <div class="table_wrap">
        <dl class="thead">
            <dt>決算期</dt>
            <dt>第28期<br>（2015年12月期）</dt>
            <dt>第28期<br>（2015年12月期）</dt>
            <dt>第28期<br>（2015年12月期）</dt>
            <dt>第28期<br>（2015年12月期）</dt>
            <dt>第28期<br>（2015年12月期）</dt>
        </dl>
        <dl class="tbody">
            <dt>売上高</dt>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
        </dl>
        <dl class="tbody">
            <dt>経常利益</dt>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
        </dl>
        <dl class="tbody">
            <dt>売上高</dt>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
            <dd>78,626</dd>
        </dl>
        <dl class="tbody">
            <dt>経常利益</dt>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
            <dd>5,235</dd>
        </dl>
    </div>
</div>

トグル

• テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

• テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Copy<ul class="toggle_list">
    <li>
        <div class="toggle_parent">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="toggle_child">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </li>
    <li>
        <div class="toggle_parent">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="toggle_child">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
    </li>
</ul>

背景有テキスト

Copy<div class="read-box">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>