CLOSE
TOP / 採用情報 / 中途採用 / モジュール：中途採用

本ページ掲載のものは中途採用配下（/corp/recruit/mid/*）でのみ利用可能なモジュール集です。

コーポレートサイトと共通のモジュールはモジュール集ページを参照してください。

section間マージン
<section class="mod-recruite-mid-section">コンテンツが入ります</section>
						<section class="mod-recruite-mid-section_middle">コンテンツが入ります</section>
						<section class="mod-recruite-mid-section_lower">コンテンツが入ります</section>

.mod-recruite-mid-section

コーポレートサイトのカラムモジュール（mod_col*）と同一のマージンボトムを付与します。カラムモジュールを優先的に利用し本モジュールは極力使用しないでください。

.mod-recruite-mid-section_middle

第二階層レベルセクションのマージンボトムを付与します。

.mod-recruite-mid-section_lower

第三階層レベルセクションのマージンボトムを付与します。

コンテンツ幅
<div class="mod-recruite-mid-contentwidth">
						　コンテンツが入ります。
						</div>

.mod-recruite-mid-contentwidth

.layer-innerと同じコンテンツ幅を指定します。.layer-innerを利用しないページにおいて要素個別にコンテンツ幅を指定したい場合に利用してください。

※ブロック要素に対して利用してください。

※幅、左右マージン、左右パディングの指定が上書きされます。

背景色付きエリア
<div class="mod-recruite-mid-contentwrap">
							　コンテンツが入ります。
							</div>

.mod-recruite-mid-contentwrap

※ブロック要素に対して利用してください。

※左右パディングの指定が上書きされます。

※内包要素のコンテンツ幅指定には.mod-recruite-mid-contentwidthを利用してください。

テーブル

見出しレベルは利用箇所に適切になるよう変更して下さい。

<div class="mod-recruite-mid-table">
							　<section class="mod-recruite-mid-table_inner">
							　　<h3 class="mod-recruite-mid-table_title">見出し</h3>

							　　<div class="mod-recruite-mid-table_content">
							　　　<p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
							　　</div>
							　</section>

							　<section class="mod-recruite-mid-table_inner">
							　　<h3 class="mod-recruite-mid-table_title">見出し</h3>

							　　<div class="mod-recruite-mid-table_content">
							　　　<section class="mod-recruite-mid-table_middle-inner">
							　　　　<h4 class="mod-recruite-mid-table_title">見出し</h4>

							　　　　<div class="mod-recruite-mid-table_content">
							　　　　　<p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
							　　　　</div>
							　　　</section>

							　　　<section class="mod-recruite-mid-table_middle-inner">
							　　　　<h4 class="mod-recruite-mid-table_title">見出し</h4>

							　　　　<div class="mod-recruite-mid-table_content">
							　　　　　<section class="mod-recruite-mid-table_lower-inner">
							　　　　　　<h5 class="mod-recruite-mid-table_title">見出し</h5>

							　　　　　　<div class="mod-recruite-mid-table_content">
							　　　　　　　<p>コンテンツコンテンツコンテンツコンテンツ</p>
							　　　　　　</div>
							　　　　　</section>

							　　　　　<section class="mod-recruite-mid-table_lower-inner">
							　　　　　　<h5 class="mod-recruite-mid-table_title">見出し</h5>

							　　　　　　<div class="mod-recruite-mid-table_content">
							　　　　　　　<p>コンテンツコンテンツコンテンツコンテンツ</p>
							　　　　　　</div>
							　　　　　</section>
							　　　　</div>
							　　　</section>
							　　</div>
							　</section>
							</div>

見出し

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

見出し

見出し

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

見出し

見出し

コンテンツコンテンツコンテンツコンテンツ

見出し

コンテンツコンテンツコンテンツコンテンツ

一覧
<ul class="mod-recruite-mid-list">
					　<li>
					　　<a href="#">
					　　　<dl class="mod-recruite-mid-list_item">
					　　　　<dt class="mod-recruite-mid-list_item_title"><span>テキストテキストテキスト</span></dt>

					　　　　<dd class="mod-recruite-mid-list_item_body">
					　　　　　<p class="mod-recruite-mid-list_item_text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
					　　　　</dd>
					　　　</dl>
					　　</a>
					　</li>

					　<li>
					　　<a href="#">
					　　　<dl class="mod-recruite-mid-list_item">
					　　　　<dt class="mod-recruite-mid-list_item_title"><span>テキストテキストテキスト</span></dt>

					　　　　<dd class="mod-recruite-mid-list_item_body">
					　　　　　<p class="mod-recruite-mid-list_item_text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
					　　　　</dd>
					　　　</dl>
					　　</a>
					　</li>
					</ul>

PC表示垂直表示

<ul class="mod-recruite-mid-list opt-vertical">
					　<li>
					　　<a href="#">
					　　　<dl class="mod-recruite-mid-list_item">
					　　　　<dt class="mod-recruite-mid-list_item_title"><span>テキストテキストテキスト</span></dt>

					　　　　<dd class="mod-recruite-mid-list_item_body">
					　　　　　<p class="mod-recruite-mid-list_item_text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
					　　　　</dd>
					　　　</dl>
					　　</a>
					　</li>

					　<li>
					　　<a href="#">
					　　　<dl class="mod-recruite-mid-list_item">
					　　　　<dt class="mod-recruite-mid-list_item_title"><span>テキストテキストテキスト</span></dt>

					　　　　<dd class="mod-recruite-mid-list_item_body">
					　　　　　<p class="mod-recruite-mid-list_item_text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
					　　　　</dd>
					　　　</dl>
					　　</a>
					　</li>
					</ul>

黒文字

<ul class="mod-recruite-mid-list theme-black">
					　<li>
					　　<a href="#">
					　　　<dl class="mod-recruite-mid-list_item">
					　　　　<dt class="mod-recruite-mid-list_item_title"><span>テキストテキストテキスト</span></dt>

					　　　　<dd class="mod-recruite-mid-list_item_body">
					　　　　　<p class="mod-recruite-mid-list_item_text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
					　　　　</dd>
					　　　</dl>
					　　</a>
					　</li>

					　<li>
					　　<a href="#">
					　　　<dl class="mod-recruite-mid-list_item">
					　　　　<dt class="mod-recruite-mid-list_item_title"><span>テキストテキストテキスト</span></dt>

					　　　　<dd class="mod-recruite-mid-list_item_body">
					　　　　　<p class="mod-recruite-mid-list_item_text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
					　　　　</dd>
					　　　</dl>
					　　</a>
					　</li>
					</ul>
タイルリスト
<ul class="mod-recruite-mid-tile">
						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle vision-bold">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>

						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle vision-bold">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>

						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle vision-bold">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>
						</ul>

opt-conversation

<ul class="mod-recruite-mid-tile opt-conversation">
						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>

						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>

						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>
						</ul>

opt-interview

<ul class="mod-recruite-mid-tile opt-interview">
						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle vision-bold">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>

						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle vision-bold">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>

						　<li>
						　　<a href="#">
						　　　<div class="mod-recruite-mid-tile_item">
						　　　　<figure class="mod-recruite-mid-tile_image"><img src="http://placehold.jp/800x360.png" alt=""></figure>

						　　　　<div class="mod-recruite-mid-tile_body">
						　　　　　<h3 class="mod-recruite-mid-tile_title">メインテキスト</h3>

						　　　　　<p class="mod-recruite-mid-tile_subtitle vision-bold">sub text</p>

						　　　　　<p class="mod-recruite-mid-tile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						　　　　</div>
						　　　</div>
						　　</a>
						　</li>
						</ul>
ボタン
<p class="mod-recruite-mid-button"><a href="#"><span class="mod-recruite-mid-button_img"><img src="http://placehold.jp/150x150.png" alt=""></span><span class="mod-recruite-mid-button_text">ボタンテキスト</span></a></p>

ボタンテキスト

インタビュー見出し
<header class="mod-recruite-mid-interview-header">
						　<h2>見出し見出し見出し見出し見出し見出し見出し</h2>
						　<p>テキストテキストテキストテキストテキストテキストテキスト</p>
						</header>

見出し見出し見出し見出し見出し見出し見出し

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

プロフィール
<aside class="mod-recruite-mid-profile">
						　<h4 class="mod-recruite-mid-profile_title">タイトルタイトルタイトル</h4>
						　<h4 class="mod-recruite-mid-profile_title theme-orange">タイトルタイトルタイトルタイトル（別カラー）</h4>
						　<p class="mod-recruite-mid-profile_sub-title">サブタイトルサブタイトルサブタイトルサブタイトルサブタイトル</p>
						　<p class="mod-recruite-mid-profile_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
						</aside>

ウィルオブで最新の求人情報をチェック！

派遣・正社員の仕事を探す

お仕事探しサイト［ウィルオブ］はこちら↓

条件を選んで
求人を探す まずは
登録をする