コーポレートの下層ページを作成する際に使用するモジュールになります。
各モジュールのコードと、表示サンプルをご用意しております。
各コードをコピーしてご利用ください。
▼ コードコピー時の注意点 ▼
HTMLの階層を視覚化するために、全角スペースを入れています。
そのまま利用されると、表示に影響が出る可能性がありますので、お手数ですが全角スペースを削除してご利用ください。
section間 マージン
<section class="mod_col1-box">
<div class="mod_col1">この中にモジュールを入れます</div>
</section>コーポレート下層ページのマージンボトムになります。
PC:100px
SP:60px
<section class="mod_col1-box-middle">
この中にモジュールをいれます
</section>コーポレート下層ページ 第二階層のマージンボトムになります。
PC:60px
SP:40px
ボーダーボックス
<div class="mod_border_box">
この中にモジュールを入れます
</div>
外側に枠線がついてるボックスになります。
この中に各リストが入ります。
この中に各リストが入ります。
見出し
<h1 class="mod_heading-1">H1 見出し</h1>H1の見出しです
<h2 class="mod_heading-2">H2 見出し</h2>H2の見出しです
<h2 class="mod_heading-2--link"><a href="#" class="mod_link-heading-2--anchor">H2 リンク付き見出し</a></h2>H2のリンク付き見出しです
<h3 class="mod_heading-3">H3 見出し</h3>H3の見出しです
<h4 class="mod_heading-4">H4 見出し</h4>H4の見出しです
<h5 class="mod_heading-5">H5 見出し</h5>H5の見出しです
<h6 class="mod_heading-6">H6 見出し</h6>H6の見出しです
テキスト
<p class="mod_txt-large">この中にテキストを入れます。</p>大テキスト18px#0f0f0f この文字サイズは、本文テキストをはじめとする本サイトの大テキストサイズとなります。この文字サイズは、本文テキストをはじめとする本サイトの大テキストサイズとなります。
<p class="mod_txt-normal">この中にテキストを入れます。</p>通常テキスト16px#0f0f0f（標準テキスト） この文字サイズは、本文テキストをはじめとする本サイトの標準テキストサイズとなります。この文字サイズは、本文テキストをはじめとする本サイトの標準テキストサイズとなります。
<p class="mod_txt-small">この中にテキストを入れます。</p>小テキスト14px#0f0f0f この文字サイズは、本文テキストをはじめとする本サイトの小テキストサイズとなります。この文字サイズは、本文テキストをはじめとする本サイトの小テキストサイズとなります。
テキスト(強調・機能)
<p class="mod_strongTxt-large">この中にテキストを入れます</p>
キャッチコピー大20px19pxBold#060606 この文字は、本サイトのキャッチコピー大テキストとなります。この文字は、本サイトのキャッチコピー大テキストとなります。本サイトのキャッチコピー大テキストとなります。
<p class="mod_strongTxt-small">この中にテキストを入れます</p>
キャッチコピー小18px17pxBold#060606 この文字は、本サイトのキャッチコピー小テキストとなります。この文字は、本サイトのキャッチコピー小テキストとなります。この文字は、本サイトのキャッチコピー小テキストとなります。
<p class="mod_boldTxt-normal">この中にテキストを入れます</p>
太字テキスト16px15pxBold#0f0f0f この文字は、本文テキストをはじめとする本サイトの太字テキストとなります。この文字は、本文テキストをはじめとする本サイトの太字テキストとなります。
<p class="mod_attentionTxt-normal"><span>※</span>この中にテキストを入れます</p>
※脚注テキスト14px13px#0f0f0f この文字は、本文テキストをはじめとする本サイトの脚注テキストとなります。この文字は、本文テキストをはじめとする本サイトの脚注テキストとなります。
文中リンク
<p class="mod_txt-normal">これは<a href="#" class="mod_txtlink-default">通常の文中リンクテキスト</a>です</p>
これは通常の文中リンクテキストです
<p class="mod_txt-normal">これは<a href="#" class="mod_txtlink-default mod_txtlink-ico--window">文中外部リンクテキスト</a>です</p>
これは文中外部リンクテキストです
<p class="mod_txt-normal">これは<a href="#" class="mod_txtlink-default mod_txtlink-ico--pdf">文中PDFリンクテキスト</a>です</p>
これは文中PDFリンクテキストです
アンカーリンク
<ul class="mod_anchor-list">
<li><a href="#">アンカーリンク01</a></li>
<li><a href="#">アンカーリンク02</a></li>
<li><a href="#">アンカーリンク03</a></li>
<li><a href="#">アンカーリンク04</a></li>
<li><a href="#">アンカーリンク05</a></li>
</ul>中央寄せ
<ul class="mod_anchor-list center">
<li><a href="#">アンカーリンク01</a></li>
<li><a href="#">アンカーリンク02</a></li>
<li><a href="#">アンカーリンク03</a></li>
<li><a href="#">アンカーリンク04</a></li>
<li><a href="#">アンカーリンク05</a></li>
</ul>テキストリスト(横)
<ul class="mod_normal-list--row">
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
</ul>- リスト01
- リスト02
- リスト03
- リスト04
- リスト05
テキストリスト(横・黒点なし)
<ul class="mod_normal-list--row no-icon">
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
</ul>テキストリスト(縦)
<ul class="mod_normal-list--colum">
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
</ul>- リスト01
- リスト02
- リスト03
- リスト04
- リスト05
テキストリスト(縦・黒点なし)
<ul class="mod_normal-list--colum no-icon">
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
</ul>番号リスト(縦)
<ol class="mod_number-list--colum">
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
</ol>- リスト01
- リスト02
- リスト03
- リスト04
- リスト05
タイルリンクリスト
<div class="mod_tilelink--list">
<ul>
<li>
<a href="#">
<div class="mod_tilelink--image">
<img src="画像パス" alt="">
</div>
<div class="mod_tilelink--detail">
<h4 class="mod_tilelink-ttl">タイトル</h4>
<div class="mod_tilelink--lead">
テキストがはいりますテキストがはいりますテキストがはいります
</div>
</div>
</a>
</li>
</ul>
</div>
メディアリンクリスト
<ul class="mod_media-link">
<li class="mod_media-link--item">
<div class="mod_media-link--item-icon">その他</div>
<div class="mod_media-link--item-logo">
<img src="画像パス" alt="">
</div>
<div class="mod_media-link--item-catch">キャッチ文が入ります。</div>
<div class="mod_media-link--item-detail">テキストが入ります。テキストが入ります。テキストが入ります。</div>
<div class="mod_media-link--item-anchor">
<a href="#" class="mod_txtlink-default mod_txtlink-ico--window" target="blank">リンク先</a>
</div>
</li>
</ul>
アイコンモジュール
これは、テキストの末尾にアイコンをつける時に使用します。
テキストを囲っているタグに該当のクラスを付与してください。
<p class="mod_txt-normal">これは<span class="mod_txtlink-ico--window">別タブアイコンが付きます</span></p>
.mod_txtlink-ico--window
これは別タブアイコンが付きます
<p class="mod_txt-normal">これは<span class="mod_txtlink-ico--pdf">PDFアイコンが付きます</span></p>
.mod_txtlink-ico--pdf
これはPDFアイコンが付きます
上部へ戻るボタン
<div class="mod_pageTop-box is-sp tar">
<a href="#" class="mod_pegeTop-anchor">上部へ戻る</a>
</div>sp用のモジュールです。本ページではPCとSP両方で表示されておりますが、実際に使用する際は上記のHTMLをそのままコピーしてご利用ください。
リンクボタン(右矢印)
共通で使用するボタンになります。ボタンの装飾と水平方向の配置のみ指定しておりますので、上下の余白を個別でつけてください。
リンクボタン 英字テキスト1行
<div class="mod_more--btn left">
<div>
<a href="#" class="vision-bold">MORE</a>
</div>
</div><div class="mod_more--btn center">
<div>
<a href="#" class="vision-bold">MORE</a>
</div>
</div><div class="mod_more--btn right">
<div>
<a href="#" class="vision-bold">MORE</a>
</div>
</div>リンクボタン 日本語テキスト1行
<div class="mod_more--btn left">
<div>
<a href="#">詳細を見る</a>
</div>
</div><div class="mod_more--btn center">
<div>
<a href="#">詳細を見る</a>
</div>
</div><div class="mod_more--btn right">
<div>
<a href="#">詳細を見る</a>
</div>
</div>リンクボタン テキスト2行 (右矢印 左寄せ)
<div class="mod_more--btn line2 left">
<div>
<a href="#">携帯/ブロードバンド販売<br>スタッフ派遣</a>
</div>
</div>リンクボタン テキスト2行 (右矢印 中央寄せ)
<div class="mod_more--btn line2 center">
<div>
<a href="#">携帯/ブロードバンド販売<br>スタッフ派遣</a>
</div>
</div>リンクボタン テキスト2行 (右矢印 右寄せ)
<div class="mod_more--btn line2 right">
<div>
<a href="#">携帯/ブロードバンド販売<br>スタッフ派遣</a>
</div>
</div>前ページに戻るボタン
共通で使用するボタンになります。ボタンの装飾と水平方向の配置のみ指定しておりますので、上下の余白を個別でつけてください。
前ページに戻るボタン(左寄せ)
<div class="mod_prev--btn left">
<div>
<a href="/corp/news/">一覧に戻る</a>
</div>
</div>前ページに戻るボタン(中央配置)
<div class="mod_prev--btn center">
<div>
<a href="/corp/news/">一覧に戻る</a>
</div>
</div>前ページに戻るボタン(右寄せ)
<div class="mod_prev--btn right">
<div>
<a href="/corp/news/">一覧に戻る</a>
</div>
</div>定義リスト
共通
<dl class="mod_difinition">
この中に、該当する定義リストアイテムを入れていきます。
</dl>定義リストアイテム
通常テキストのみ
<div class="mod_difinition-list">
<dt class="mod_difinition-list--ttl">項目名</dt>
<dd class="mod_difinition-list--txt">
<p class="mod_txt-normal">この中にテキストを入れます。この中にテキストを入れます。</p>
</dd>
</div>- 項目名
-
この中にテキストを入れます。この中にテキストを入れます。
項目名(ラベル)
<div class="mod_difinition-list">
<dt class="mod_difinition-list--ttl">項目名（ラベル）</dt>
<dd class="mod_difinition-list--txt">
<p class="mod_txt-normal"><span class="mod_label">支店・営業所</span>この中にテキストを入れます。</p>
</dd>
</div>- 項目名（ラベル）
-
支店・営業所この中にテキストを入れます。
リンク
<div class="mod_difinition-list">
<dt class="mod_difinition-list--ttl">
<a href="#" class="link">項目名（リンク有り）</a>
</dt>
<dd class="mod_difinition-list--txt">
<p class="mod_txt-normal">この中にテキストを入れます。</p>
</dd>
</div>- 項目名（リンク有り）
-
この中にテキストを入れます。
別窓リンク
<div class="mod_difinition-list">
<dt class="mod_difinition-list--ttl">
<a href="#" class="window" target="_blank">項目名（別窓）</a>
</dt>
<dd class="mod_difinition-list--txt">
<p class="mod_txt-normal">この中にテキストを入れます。</p>
</dd>
</div>- 項目名（別窓）
-
この中にテキストを入れます。
ページ内リンク
<div class="mod_difinition-list page-anchor">
<dt class="mod_difinition-list--ttl">
<div>項目名（ページ内リンク）</div>
</dt>
<dd class="mod_difinition-list--txt">
<ul class="mod_difinition-anchor--list">
<li><a href="#">アンカーリンク01</a></li>
<li><a href="#">アンカーリンク02</a></li>
<li><a href="#">アンカーリンク03</a></li>
<li><a href="#">アンカーリンク04</a></li>
<li><a href="#">アンカーリンク05</a></li>
</ul>
</dd>
</div>テーブル
SP圧縮型
<table border="1" class="mod_table-compression">
<tbody>
<tr class="mod_table-row first-row">
<td class="mod_table_column-head"></td>
<td class="mod_table_column-head">列見出し01</td>
<td class="mod_table_column-head">列見出し02</td>
<td class="mod_table_column-head">列見出し03</td>
<td class="mod_table_column-head">列見出し04</td>
<td class="mod_table_column-head">列見出し05</td>
</tr>
<tr class="mod_table-row second-row">
<td class="mod_table_row-head">行見出し01</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
</tr>
<tr class="mod_table-row third-row">
<td class="table_row-head">行見出し02</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
</tr>
<tr class="mod_table-row fouth-row">
<td class="table_row-head">行見出し03</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
</tr>
</tbody>
</table>| 列見出し01 | 列見出し02 | 列見出し03 | 列見出し04 | 列見出し05 | |
| 行見出し01 | テキストが入ります | テキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります |
| 行見出し02 | テキストが入りますテキストが入ります | テキストが入りますテキストが入りますテキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります |
| 行見出し03 | テキストが入ります | テキストが入ります | テキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります |
SPスクロール型
<div class="scroll-table">
<table border="1" class="mod_table-scroll">
<tbody>
<tr class="mod_table-row first-row">
<td class="mod_table_column-head"></td>
<td class="mod_table_column-head">列見出し01</td>
<td class="mod_table_column-head">列見出し02</td>
<td class="mod_table_column-head">列見出し03</td>
<td class="mod_table_column-head">列見出し04</td>
<td class="mod_table_column-head">列見出し05</td>
</tr>
<tr class="mod_table-row second-row">
<td class="mod_table_row-head">行見出し01</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
</tr>
<tr class="mod_table-row third-row">
<td class="table_row-head">行見出し02</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
</tr>
<tr class="mod_table-row fouth-row">
<td class="table_row-head">行見出し03</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
<td class="mod_table-cell">テキストが入りますテキストが入ります</td>
</tr>
</tbody>
</table>
</div>| 列見出し01 | 列見出し02 | 列見出し03 | 列見出し04 | 列見出し05 | |
| 行見出し01 | テキストが入ります | テキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります |
| 行見出し02 | テキストが入りますテキストが入ります | テキストが入りますテキストが入りますテキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります |
| 行見出し03 | テキストが入ります | テキストが入ります | テキストが入ります | テキストが入りますテキストが入ります | テキストが入りますテキストが入ります |
注釈テキスト
<p class="mod_table-annotationTxt">※テーブル専用の注釈テキストです</p>※テーブル専用の注釈テキストです
画像パーツ
1カラム
<div class="mod_col1-image-box">
<div class="mod_col1-image">
<img src="画像パス" alt="">
</div>
</div>
2カラム
<div class="mod_col2-image-box">
<div class="mod_col2-image">
<img src="画像パス" alt="">
</div>
<div class="mod_col2-image">
<img src="画像パス" alt="">
</div>
</div>
3カラム
<div class="mod_col3-image-box">
<div class="mod_col3-image">
<img src="画像パス" alt="">
</div>
<div class="mod_col3-image">
<img src="画像パス" alt="">
</div>
<div class="mod_col3-image">
<img src="画像パス" alt="">
</div>
</div>3カラム(結合)
右側結合
左側結合
4カラム
<div class="mod_col4-image-box">
<div class="mod_col4-image">
<img src="画像パス" alt="">
</div>
<div class="mod_col4-image">
<img src="画像パス" alt="">
</div>
<div class="mod_col4-image">
<img src="画像パス" alt="">
</div>
<div class="mod_col4-image">
<img src="画像パス" alt="">
</div>
</div>画像 + テキストパーツ
2カラム(画像左)
<div class="mod_col2-imageTxtRight-box">
<div class="mod_col2-image--left">
<img src="画像パス" alt="">
</div>
<div class="mod_col2-txt--right">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト。</p>
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキスト。
本文テキストが入ります。本文テキストが入ります。本文テキスト。
2カラム(画像右 画像上部)
<div class="mod_col2-imageTxtLeft-box">
<div class="mod_col2-txt--left">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト。</p>
</div>
<div class="mod_col2-image--right">
<img src="画像パス" alt="">
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
2カラム(画像右 テキスト上部)
<div class="mod_col2-imageTxtLeft-box text-top">
<div class="mod_col2-txt--left">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。</p>
</div>
<div class="mod_col2-image--right">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
2カラム(縦並び)
<div class="mod_col2-imageTxt-columnBox">
<div class="mod_col2-imageTxt-columnBox--left">
<div class="mod_col2-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6 tac">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
<div class="mod_col2-imageTxt-columnBox--right">
<div class="mod_col2-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6 tac">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
3カラム(テキスト結合・画像左 画像上部)
<div class="mod_col3-imageTxt-joinRight-box">
<div class="mod_col3-imageTxt-join">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<div class="mod_col3-imageTxt-nojoin">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキスト
本文テキストが入ります。本文テキストが入ります。本文テキスト
3カラム(テキスト結合・画像左 テキスト上部)
<div class="mod_col3-imageTxt-joinRight-box text-top">
<div class="mod_col3-imageTxt-join">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<div class="mod_col3-imageTxt-nojoin">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキスト
本文テキストが入ります。本文テキストが入ります。本文テキスト
3カラム(テキスト結合・画像右)
<div class="mod_col3-imageTxt-joinLeft-box">
<div class="mod_col3-imageTxt-join">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
<div class="mod_col3-imageTxt-nojoin">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキスト
本文テキストが入ります。本文テキストが入ります。本文テキスト
3カラム(画像結合・画像左)
<div class="mod_col3-imageTxt-joinLeft-box mb40">
<div class="mod_col3-imageTxt-join">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<div class="mod_col3-imageTxt-nojoin">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキスト
本文テキストが入ります。本文テキストが入ります。本文テキスト
3カラム(画像結合・画像右)
<div class="mod_col3-imageTxt-joinRight-box mb40">
<div class="mod_col3-imageTxt-join">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
<div class="mod_col3-imageTxt-nojoin">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキスト
本文テキストが入ります。本文テキストが入ります。本文テキスト
3カラム(縦並び)
<div class="mod_col3-imageTxt-columnBox">
<div class="mod_col3-imageTxt-columnBox--item">
<div class="mod_col3-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
</div>
<div class="mod_col3-imageTxt-columnBox--item">
<div class="mod_col3-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
</div>
<div class="mod_col3-imageTxt-columnBox--item">
<div class="mod_col3-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
</div>
見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
4カラム(テキスト結合・画像左)
<div class="mod_col4-imageTxt-joinLeft-box">
<div class="mod_col4-imageTxt-join">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<div class="mod_col4-imageTxt-nojoin">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキスト本文テキストが入ります。本文テキストが入ります。本文テキスト
本文テキストが入ります。本文テキストが入ります。本文テキスト本文テキストが入ります。本文テキストが入ります。本文テキスト
4カラム(テキスト結合・画像右)
<div class="mod_col4-imageTxt-joinRight-box">
<div class="mod_col4-imageTxt-join">
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。本文テキスト本文テキストが入ります。本文テキストが入ります。本文テキスト本文テキストが入ります。本文テキストが入ります。本文テキスト</p>
</div>
<div class="mod_col4-imageTxt-nojoin">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
</div>見出し
本文テキストが入ります。本文テキストが入ります。本文テキスト本文テキストが入ります。本文テキストが入ります。本文テキスト本文テキストが入ります。本文テキストが入ります。本文テキスト
4カラム(縦並び)
<div class="mod_col4-imageTxt-columnBox">
<div class="mod_col4-imageTxt-columnBox--item">
<div class="mod_col4-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
</div>
<div class="mod_col4-imageTxt-columnBox--item">
<div class="mod_col4-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
</div>
<div class="mod_col4-imageTxt-columnBox--item">
<div class="mod_col4-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
</div>
<div class="mod_col4-imageTxt-columnBox--item">
<div class="mod_col4-image">
<img src="/corp/assets/image/sample/test02.png" alt="">
</div>
<h6 class="mod_heading-6">見出し</h6>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
<p class="mod_txt-normal">本文テキストが入ります。本文テキストが入ります。</p>
</div>
見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
見出し
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
本文テキストが入ります。本文テキストが入ります。本文テキストが入ります。
コンテンツリスト 4カラム(説明なし)
<ul class="mod_contentslist-col4">
<li class="mod_contentslist-col4--item">コンテンツリスト<br>コンテンツ</li>
<li class="mod_contentslist-col4--item">コンテンツリスト<br>コンテンツ</li>
<li class="mod_contentslist-col4--item">コンテンツリスト<br>コンテンツ</li>
<li class="mod_contentslist-col4--item">コンテンツリスト<br>コンテンツ</li>
</ul>- コンテンツリスト
コンテンツ - コンテンツリスト
コンテンツ - コンテンツリスト
コンテンツ - コンテンツリスト
コンテンツ
コンテンツリスト 3カラム(説明なし サイドナビあり)
<ul class="mod_contentslist-col3">
<li class="mod_contentslist-col3--item">コンテンツリスト<br>コンテンツ</li>
<li class="mod_contentslist-col3--item">コンテンツリスト<br>コンテンツ</li>
<li class="mod_contentslist-col3--item">コンテンツリスト<br>コンテンツ</li>
<li class="mod_contentslist-col3--item">コンテンツリスト<br>コンテンツ</li>
<li class="mod_contentslist-col3--item">コンテンツリスト<br>コンテンツ</li>
</ul>- コンテンツリスト
コンテンツ - コンテンツリスト
コンテンツ - コンテンツリスト
コンテンツ - コンテンツリスト
コンテンツ - コンテンツリスト
コンテンツ
コンテンツリスト 2カラム(説明あり)
<ul class="mod_contentslist-col2">
<li class="mod_contentslist-col2--item">
<h6 class="mod_heading-6">コンテンツリスト</h6>
<p class="mod_txt-normal tac mb0">この中にテキストを入れます。</p>
</li>
<li class="mod_contentslist-col2--item">
<h6 class="mod_heading-6">コンテンツリスト</h6>
<p class="mod_txt-normal tac mb0">この中にテキストを入れます。</p>
</li>
<li class="mod_contentslist-col2--item">
<h6 class="mod_heading-6">コンテンツリスト</h6>
<p class="mod_txt-normal tac mb0">この中にテキストを入れます。</p>
</li>
<li class="mod_contentslist-col2--item">
<h6 class="mod_heading-6">コンテンツリスト</h6>
<p class="mod_txt-normal tac mb0">この中にテキストを入れます。</p>
</li>
<li class="mod_contentslist-col2--item">
<h6 class="mod_heading-6">コンテンツリスト</h6>
<p class="mod_txt-normal tac mb0">この中にテキストを入れます。</p>
</li>
</ul>-
コンテンツリスト
この中にテキストを入れます。
-
コンテンツリスト
この中にテキストを入れます。
-
コンテンツリスト
この中にテキストを入れます。
-
コンテンツリスト
この中にテキストを入れます。
-
コンテンツリスト
この中にテキストを入れます。
お問い合わせ・応募用エリア
お問い合わせ・応募用エリア(タイトルあり)
<section class="mod_contact-box">
<div class="mod_contact-box--inner">
<div class="mod_contact-ttl">
<h2>タイトルタイトルタイトル</h2>
<div class="vision-bold">subtitle</div>
</div>
<div class="mod_contact--wrap">
<div class="mod_contact--form">
<a href="#">
<div class="mod_contact--form--ico"><img src="アイコン画像パス" alt="" class="ico_form"></div>
<div class="mod_contact--form--txt">テキストテキスト</div>
</a>
</div>
</div>
</div>
</section>タイトルタイトルタイトル
subtitle
お問い合わせ・応募用エリア(タイトルなし)
<section class="mod_contact-box">
<div class="mod_contact-box--inner">
<div class="mod_contact--wrap">
<div class="mod_contact--form">
<a href="#">
<div class="mod_contact--form--ico"><img src="アイコン画像パス" alt=""></div>
<div class="mod_contact--form--txt">テキストテキスト</div>
</a>
</div>
</div>
</div>
</section>
バナーエリア(サイドナビなし 中央寄せ 最大4)
中央寄せでバナー数が4枚を超えるときは本モジュールを追加で使用します。
<div class="mod_banner">
<ul class="mod_banner-list">
<li class="mod_banner-list--item">
<a href="">
<img src="/corp/assets/image/sample/test03.png" alt="">
</a>
</li>
<li class="mod_banner-list--item">
<a href="">
<img src="/corp/assets/image/sample/test03.png" alt="">
</a>
</li>
</ul>
</div>
バナーエリア(サイドナビなし 左寄せ 制限なし)
4枚以上でもli.mod_banner-list--itemを増やして、何枚でも対応できます。
<div class="mod_banner left">
<ul class="mod_banner-list">
<li class="mod_banner-list--item">
<a href="">
<img src="/corp/assets/image/sample/test03.png" alt="">
</a>
</li>
<li class="mod_banner-list--item">
<a href="">
<img src="/corp/assets/image/sample/test03.png" alt="">
</a>
</li>
</ul>
</div>バナーエリア(サイドナビあり 左寄せ)
<div class="mod_banner-onSideNav">
<ul class="mod_banner-onSideNav-list">
<li class="mod_banner-onSideNav-list--item">
<a href="">
<img src="/corp/assets/image/sample/test03.png" alt="">
</a>
</li>
<li class="mod_banner-onSideNav-list--item">
<a href="">
<img src="/corp/assets/image/sample/test03.png" alt="">
</a>
</li>
<li class="mod_banner-onSideNav-list--item">
<a href="">
<img src="/corp/assets/image/sample/test03.png" alt="">
</a>
</li>
<li class="mod_banner-onSideNav-list--item">
<a href="">
<img src="/corp/assets/image/sample/test03.png" alt="">
</a>
</li>
</ul>
</div>改行
文章に改行を入れたいときに使用します。
PC・SPとも改行
<p class="mod_txt-normal">これはPC・SP両方で改行されます。<br>これはPC・SP両方で改行されます。これはPC・SP両方で改行されます。</p>これはPC・SP両方で改行されます。
これはPC・SP両方で改行されます。これはPC・SP両方で改行されます。
PCのみ改行
<p class="mod_txt-normal">これはPCのみで改行されます。<br class="is-pc">これはPCのみで改行されます。これはPCのみ方で改行されます。</p>これはPCのみで改行されます。
これはPCのみで改行されます。これはPCのみ方で改行されます。
SPのみ改行
<p class="mod_txt-normal">これはSPのみで改行されます。<br class="is-sp">これはSPのみで改行されます。これはSPのみ方で改行されます。</p>これはSPのみで改行されます。
これはSPのみで改行されます。これはSPのみ方で改行されます。
余白(margin)クラス
.mb0{ margin-bottom: 0px !important; }
.mb5{ margin-bottom: 5px !important; }
.mb8{ margin-bottom: 8px !important; }
.mb10{ margin-bottom: 10px !important; }
.mb13{ margin-bottom: 13px !important; }
.mb15{ margin-bottom: 15px !important; }
.mb18{ margin-bottom: 18px !important; }
.mb20{ margin-bottom: 20px !important; }
.mb22{ margin-bottom: 22px !important; }
.mb25{ margin-bottom: 25px !important; }
.mb30{ margin-bottom: 30px !important; }
.mb32{ margin-bottom: 32px !important; }
.mb35{ margin-bottom: 35px !important; }
.mb40{ margin-bottom: 40px !important; }
.mb45{ margin-bottom: 45px !important; }
.mb50{ margin-bottom: 50px !important; }
.mb60{ margin-bottom: 60px !important; }
.mb70{ margin-bottom: 70px !important; }
.mb80{ margin-bottom: 80px !important; }
.mb90{ margin-bottom: 90px !important; }
.mb100{ margin-bottom: 100px !important; }
.mb120{ margin-bottom: 120px !important; }
行間(line-height)クラス
.lh19{ line-height: 1.9; }
.lh16{ line-height: 1.6; }
.lh13{ line-height: 1.3; }
各HTMLのclassに追記して、要所で行間を変更したいときに使用します。
行間1.9
<p class="mod_txt-normal lh19">これは行間1.9のパターンです。通常の本文テキストで使用します。</p>
これは行間1.9のパターンです。通常の本文テキストで使用します。これは行間1.9のパターンです。通常の本文テキストで使用します。これは行間1.9のパターンです。通常の本文テキストで使用します。
行間1.6
<p class="mod_txt-normal lh16">これは行間1.6のパターンです。キャッチコピー、リード、注釈等で使用します。</p>
これは行間1.6のパターンです。キャッチコピー、リード、注釈等で使用します。これは行間1.6のパターンです。キャッチコピー、リード、注釈等で使用します。これは行間1.6のパターンです。キャッチコピー、リード、注釈等で使用します。
行間1.3
<p class="mod_txt-normal lh13">これは行間1.3のパターンです。見出し、アイコンテキスト等で使用します。</p>
これは行間1.3のパターンです。見出し、アイコンテキスト等で使用します。これは行間1.3のパターンです。見出し、アイコンテキスト等で使用します。これは行間1.3のパターンです。見出し、アイコンテキスト等で使用します。
テキスト揃え(text-align)クラス
.tal{ text-align: left; }
.tac{ text-align: center; }
.tar{ text-align: right; }
各HTMLのクラスに付与して、テキストの配置を変更したいときに使用します。
※左寄せ用のクラスは念のため作成致しました。
テキスト中央寄せ
<p class="mod_txt-normal tac">これはテキスト中央寄せのパターンです。これはテキスト中央寄せのパターンです。これはテキスト中央寄せのパターンです。これはテキスト中央寄せのパターンです。</p>
これはテキスト中央寄せのパターンです。これはテキスト中央寄せのパターンです。これはテキスト中央寄せのパターンです。これはテキスト中央寄せのパターンです。
テキスト右寄せ
<p class="mod_txt-normal tar">これはテキスト右寄せのパターンです。これはテキスト右寄せのパターンです。これはテキスト右寄せのパターンです。これはテキスト右寄せのパターンです。</p>
これはテキスト右寄せのパターンです。これはテキスト右寄せのパターンです。これはテキスト右寄せのパターンです。これはテキスト右寄せのパターンです。
垂直揃え(vertical-align)クラス
.va-t{ vertical-align: top !important; }
.va-m{ vertical-align: middle !important; }
.va-b{ vertical-align: bottom !important; }
テーブルモジュールに対して、テキストの垂直揃えを変更したいときに使用します。
お知らせ詳細ページ用
お知らせ詳細ページは見出しなどのフォントサイズが一部共通モジュールと異なるため、一部個別で作成致しました。
見出し
<h1 class="news_detail-heading1">これはお知らせ詳細ページ内で使用するh1です。</h1>
これはお知らせ詳細ページ内で使用するh1です。
