@charset "UTF-8";

/* -------------------------------------------------------------------- */
/*
共通余白

子要素で、２番目以降の要素に対して上部余白を与えます。

Markup:
<div class="content-wrap">
	<div>content-wrap</div>
	<div>２番目以降の要素に15pxのmargin-topを取ります。</div>
</div>
<div class="min-content-wrap">
	<div>min-content-wrap</div>
	<div>２番目以降の要素に10pxのmargin-topを取ります。</div>
</div>

Styleguide 1.1
*/
/* -------------------------------------------------------------------- */

.content-wrap > * + * {
	margin-top: 15px;
}

.min-content-wrap > * + * {
	margin-top: 10px;
}

/* -------------------------------------------------------------------- */
/*
見出しレベル1

.ttl-lv1-underline - アンダーライン付き
.ttl-lv1-fullunderline - フルアンダーライン付き
.ttl-lv1-normal - 太字解除

Markup:
<h2 class="ttl-lv1 {$modifiers}">見出し１</h2>

Styleguide 2.1
*/
/* -------------------------------------------------------------------- */
/*
見出しレベル2

Markup:
<h3 class="ttl-lv2">見出し２</h3>

Styleguide 2.1
*/
/* -------------------------------------------------------------------- */
/*
見出しレベル3

Markup:
<h4 class="ttl-lv3">見出し３</h4>

Styleguide 2.1
*/
/* -------------------------------------------------------------------- */

.ttl-lv1,
.ttl-lv2,
.ttl-lv3,
.ttl-lv4 {
	font-weight: bold;
}

.ttl-lv1 { font-size: 18px; }
.ttl-lv2 { font-size: 16px; }
.ttl-lv3 { font-size: 14px; }
.ttl-lv4 {}

.ttl-lv1-underline,
.ttl-lv1-fullunderline {
	border-bottom: solid 3px #000;
}

.ttl-lv1-underline		{ display: inline-block; }
.ttl-lv1-fullunderline	{ display: block; }

.ttl-lv1-normal,
.ttl-lv2-normal {
	font-weight: normal;
}

.ttl-description {}
.ttl-icn-new-pattern1-description { padding-left: 50px; }

.ttl-lv1 > a {
	display: block;
	color: #404454;
}

/* -------------------------------------------------------------------- */
/*
プライマリテキスト

font-sizeを見出しレベル3相当にします。

Markup:
<p class="txt-primary">テキストテキストテキスト</p>

Styleguide 3.1
*/
/* -------------------------------------------------------------------- */

.txt-primary {
	font-size: 14px;
}

/* -------------------------------------------------------------------- */
/*
内部テキストをセンタリングする時に使用する。

Markup:
<div class="txt-centering">ログインIDを忘れた場合は、本部担当者様にお問い合わせ下さい</div>

Styleguide 3.1
*/
/* -------------------------------------------------------------------- */

.txt-centering {
	text-align: center;
}

/* -------------------------------------------------------------------- */
/*
右寄せテキスト

Markup:
<p class="txt-right">テキストテキストテキスト</p>

Styleguide 3.1
*/
/* -------------------------------------------------------------------- */

.txt-right {
	text-align: right;
}

/* -------------------------------------------------------------------- */
/*
サポート系テキスト

Markup:
<p><span class="txt-support">入力時間目安：１分</span>※場合により１分以上かかります。</p>

Styleguide 3.1
*/
/* -------------------------------------------------------------------- */

.txt-support {
	font-weight: bold;
}

.txt-support:before		{ content: "【"; }
.txt-support:after		{ content: "】"; }

/* -------------------------------------------------------------------- */
/*
フォーム系エラーテキスト

Markup:
<p><span class="txt-fm-error">入力必須項目です</p>

Styleguide 3.1
*/
/* -------------------------------------------------------------------- */

.txt-fm-error {
	color: #ff0000;
	margin-bottom: 5px;
}

.txt-format-date {

}

.txt-format-time {

}

.txt-link-inner {

}

.txt-link-outer {

}
.txt-link-right {
	text-align: right;
}
.txt.is-selected {
	color: #FF0000;
	background: inherit;
}
.txt.is-non-active {
	color: #b3b4bb;
	background: inherit;
}

.function-text {

}
/* -------------------------------------------------------------------- */
/*
テキストエリアのセンタリング

Markup:
<p><span class="txt-fm-error">入力必須項目です</p>

Styleguide 3.1
*/
/* -------------------------------------------------------------------- */

.txt-outer-centering  {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------- */
/*
プライマリ背景

デフォルト状態。position:relative;を指定しています。

Markup:
<div class="bg-primary">テキストテキスト<br>テキストテキスト<br>テキストテキスト</div>

Styleguide 4.1
*/
/* -------------------------------------------------------------------- */
/*
セカンダリ背景

背景色#ececee、上下7px、左右15pxのpaddinbが入ります。

Markup:
<div class="bg-secondary">テキストテキスト<br>テキストテキスト<br>テキストテキスト</div>

Styleguide 4.1
*/
/* -------------------------------------------------------------------- */

.bg-primary,
.bg-secondary {
	position: relative;
}

.bg-primary {

}
.bg-secondary {
	background: #ececee;
	padding: 7px 15px;
}

/* -------------------------------------------------------------------- */
/*
デフォルト背景

上下左右15pxのpaddingが入ります。

Markup:
<div class="bg-default">テキストテキスト<br>テキストテキスト<br>テキストテキスト</div>

Styleguide 4.1
*/
/* -------------------------------------------------------------------- */

.bg-default {
	background-color: transparent;
	padding: 15px;
}

/* -------------------------------------------------------------------- */
/*
セカンダリ背景内のボタン位置を定義

bg-secondaryの背景で、ボタンを中央に配置します。

Markup:
<header class="bg-secondary">
<h3 class="ttl-lv2">見出し</h3>
<p>テキストテキストテキスト</p>
<p class="bg-secondary-btn"><a href="#" class="btn-link-default btn-link-small">ボタン</a></p>
</header>

Styleguide 4.1
*/
/* -------------------------------------------------------------------- */

.bg-secondary-btn {
	display: table;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -1em;
}


/* -------------------------------------------------------------------- */
/*
遷移系プライマリ

カラー#3f76d3のグラデーションボタン

Markup:
<h2 class="btn-link-primary">応募する</h2>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */
/*
遷移系セカンダリ

Markup:
<h2 class="btn-link-secondary">応募する</h2>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */
/*
遷移系デフォルト

カラー#b3b4bbのグラデーションボタン

Markup:
<h2 class="btn-link-default">応募する</h2>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */
/*
機能系プライマリ

カラー#3f76d3のグラデーションボタン

Markup:
<h2 class="btn-function-primary">応募する</h2>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */
/*
機能系セカンダリ

カラー#333のグラデーションボタン

Markup:
<h2 class="btn-function-secondary">応募する</h2>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */
/*
機能系通常

カラー#333のグラデーションボタン

Markup:
<h2 class="btn-function-secondary">応募する</h2>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */

.btn-link-primary,
.btn-link-secondary,
.btn-link-default,
.btn-function-primary,
.btn-function-secondary,
.btn-function-default {
	display: inline-block;
	line-height: 2.4;
	color: #ffffff;
	font-size: 150%;
	border-style: none;
	border-radius: 5px;
	padding: 0 50px;
	cursor: pointer;
}

.btn-link-primary:hover,
.btn-link-secondary:hover,
.btn-link-default:hover,
.btn-function-primary:hover,
.btn-function-secondary:hover,
.btn-function-default:hover {
	color: #ffffff;
	text-decoration: none;
}

.btn-link-primary,
.btn-function-primary {
	background-color: #3f76d3;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #3f76d3),
		color-stop(1, #325ea8)
	);
	background-image: -moz-linear-gradient(bottom, #3f76d3 0%, #325ea8 100%);
	background-image: -webkit-linear-gradient(bottom, #3f76d3 0%, #325ea8 100%);
	background-image: -ms-linear-gradient(bottom, #3f76d3 0%, #325ea8 100%);
	background-image: linear-gradient(to bottom, #3f76d3 0%, #325ea8 100%);
}

a.btn-link-primary:hover,
a.btn-function-primary:hover {
	background-color: #4c86e8;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #4c86e8),
		color-stop(1, #3f71c5)
	);
	background-image: -moz-linear-gradient(bottom, #4c86e8 0%, #3f71c5 100%);
	background-image: -webkit-linear-gradient(bottom, #4c86e8 0%, #3f71c5 100%);
	background-image: -ms-linear-gradient(bottom, #4c86e8 0%, #3f71c5 100%);
	background-image: linear-gradient(to bottom, #4c86e8 0%, #3f71c5 100%);
}

.btn-link-secondary,
.btn-function-secondary {
	background-color: #333333;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #555555),
		color-stop(1, #333333)
	);
	background-image: -moz-linear-gradient(bottom, #555555 0%, #333333 100%);
	background-image: -webkit-linear-gradient(bottom, #555555 0%, #333333 100%);
	background-image: -ms-linear-gradient(bottom, #555555 0%, #333333 100%);
	background-image: linear-gradient(to bottom, #555555 0%, #333333 100%);
}

a.btn-link-secondary:hover,
a.btn-function-secondary:hover {
	background-color: #555555;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #777777),
		color-stop(1, #555555)
	);
	background-image: -moz-linear-gradient(bottom, #777777 0%, #555555 100%);
	background-image: -webkit-linear-gradient(bottom, #777777 0%, #555555 100%);
	background-image: -ms-linear-gradient(bottom, #777777 0%, #555555 100%);
	background-image: linear-gradient(to bottom, #777777 0%, #555555 100%);
}

.btn-link-default,
.btn-function-default {
	background-color: #b3b4bb;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #b3b4bb),
		color-stop(1, #8e8f95)
	);
	background-image: -moz-linear-gradient(bottom, #b3b4bb 0%, #8e8f95 100%);
	background-image: -webkit-linear-gradient(bottom, #b3b4bb 0%, #8e8f95 100%);
	background-image: -ms-linear-gradient(bottom, #b3b4bb 0%, #8e8f95 100%);
	background-image: linear-gradient(to bottom, #b3b4bb 0%, #8e8f95 100%);
}

a.btn-link-default:hover,
a.btn-function-default:hover {
	background-color: #b3b4bb;
	background-image: none;
}

/* -------------------------------------------------------------------- */
/*
スモール

通常ボタンよりも小さいボタン

Markup:
<a href="#" class="btn-link-primary btn-link-small">ボタン</a>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */

.btn-link-small,
.btn-function-small {
	line-height: 2;
	font-size: 100%;
	font-weight: normal;
	padding-left: 30px;
	padding-right: 30px;
	vertical-align: top;
}

.btn-link-smallest,
.btn-function-smallest {
	line-height: 1.5;
	font-size: 100%;
	font-weight: normal;
	padding-left: 15px;
	padding-right: 15px;
	vertical-align: top;
}

.btn-link-special {

}

.btn-function-primary {

}

.btn-function-secondary {

}

.btn-function-default {

}

.btn-function-special {

}

/* -------------------------------------------------------------------- */
/*
閉じる

モーダル表示などを閉じるときに使われるボタン。

Markup:
<a href="#" class="btn-close">閉じる</a>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */

.btn-close {
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
	color: #ffffff;
	background-color: #666976;
	border-radius: 12px;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	text-decoration: none;
}

.btn-close:hover {
	color: #ffffff;
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

.btn-close:after {
	content: "×";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	text-indent: 0;
}

/* -------------------------------------------------------------------- */
/*
ボタンの中央寄せ（１つ）

text-align: center;で中央寄せ

Markup:
<div class="btn-single">
<a href="#" class="btn-link-primary">ボタン</a>
</div>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */

.btn-single {
	text-align: center;
}

/* -------------------------------------------------------------------- */
/*
ボタンの中央寄せ（２つ）

display: table; で中央寄せ。padding-right: 7px; padding-left: 7px;の余白

Markup:
<ul class="btn-double">
<li><a href="#" class="btn-link-primary">ボタン</a></li>
<li><a href="#" class="btn-link-secondary">ボタン</a></li>
</div>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */

.btn-double {
	display: table;
	margin-right: auto;
	margin-left: auto;
}

.btn-double > li {
	display: table-cell;
	padding-right: 7px;
	padding-left: 7px;
}

.btn-double-separate {
}

.btn-double-separate > li + li {
	margin-top: -3.6em;
}

.btn-double-separate-right	{ text-align: right; }
.btn-double-separate-left	{ text-align: left; }
.btn-double-separate-center	{ text-align: center; }

/* -------------------------------------------------------------------- */
/*
非活性ボタン

ボタンをリンクさせない。

Markup:
<span class="btn-function-default btn-function-small-delete is-non-active">削除</span>

Styleguide 5.1
*/
/* -------------------------------------------------------------------- */

.is-non-active {
	background-color: #cccccc;
	cursor: text;
}
.is-non-active:hover {
	opacity: inherit;
}
.icn {
	position: relative;
}

.icn:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background-image: url(/pc/img/spt-icn.png);
	background-repeat: no-repeat;
	margin-top: auto;
	margin-bottom: auto;
}

.icn-bar			{ padding-left: 35px; }
.icn-pin			{ padding-left: 14px; }
.icn-new-pattern1	{ padding-left: 50px; }

/* -------------------------------------------------------------------- */
/*
指

Markup:
<h3 class="ttl-lv2 icn icn-finger">見出し</h3>

Styleguide 6.1
*/
/* -------------------------------------------------------------------- */

.icn-finger:before {
	position: static;
	vertical-align: middle;
	width: 17px;
	height: 22px;
	margin-right: 5px;
}

.icn-finger:before {
	width: 20px;
	height: 24px;
	background-position: 0 0;
}


/* -------------------------------------------------------------------- */
/*
棒

Markup:
<h3 class="ttl-lv2 icn icn-bar">見出し</h3>

Styleguide 6.1
*/
/* -------------------------------------------------------------------- */

.icn-bar:before {
	left: 15px;
	width: 6px;
	height: 16px;
	border-radius: 3px;
	background-image: none;
	margin-right: 10px;
}

/* -------------------------------------------------------------------- */
/*
地図

Markup:
<a href="#" class="icn icn-pin">地図</a>

Styleguide 6.1
*/
/* -------------------------------------------------------------------- */

.icn-pin:before {
	width: 14px;
	height: 18px;
	background-position: 0 -25px;
}

/* -------------------------------------------------------------------- */
/*
新着

Markup:
<a href="#" class="icn icn-new-pattern1">最新ニュース</a>

Styleguide 6.1
*/
/* -------------------------------------------------------------------- */

.icn-new-pattern1:before {
	width: 45px;
	height: 20px;
	background-position: 0 -42px;
}

/* -------------------------------------------------------------------- */
/*
必須

必須テキストをタグ内に含む場合は、icn-tbe-required-txtを付与します。

Markup:
<p class="icn-tbe-required">氏名</h3>
<p><span class="icn-tbe-required icn-tbe-required-txt">必須</span>は、入力必須項目です。</p>

Styleguide 6.1
*/
/* -------------------------------------------------------------------- */

.icn-tbe-required:before {
	content: "必須";
	height: 1.5em;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-right: 7px;
	background-color: #ff0000;
	background-image: none;
	color:#ffffff;
	font-weight: normal;
}

.icn-tbe-required-txt {
	display: inline-block;
	width: 2em;
	height: 1.5em;
	padding-right: 10px;
	margin-right: 7px;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
}

/* -------------------------------------------------------------------- */
/*
見出し1に対する新着のマークアップ

Markup:
<h2 class="ttl-lv1">
	<span class="icn-lv1 icn-lv1-indent icn-lv1-new-pattern1">新着</span>
	<span class="ttl-lv1-normal">店名</span>
	<span>店舗名</span>
</h2>

Styleguide 6.1
*/
/* -------------------------------------------------------------------- */

.icn-lv1 {
}

.icn-lv1-indent {
	text-indent: -100%;
	overflow: hidden;
}

.icn-lv1-new-pattern1 {
	display: inline-block;
	vertical-align: middle;
	width: 45px;
	height: 20px;
	/*background-image: url(/pc/img/spt-icn.png);*/
	background-repeat: no-repeat;
	background-position: 0 -42px;
}

/* -------------------------------------------------------------------- */
/*
入力エリア（通常/エラー）

.fm-default-txt-field-small - 小型入力エリア

Markup:
<table>
	<tr><th>住所：</th><td><input type="text" name="hoge" class="fm-default-txt-field {$modifiers}"></td></tr>
	<tr><th>電話番号：</th><td><input type="text" name="hoge" class="fm-default-txt-field fm-warning-txt-field"></td></tr>
</table>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-default-txt-field {
	width: 100%;
	height: 2em;
	line-height: 2;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	text-indent: 10px;
}

.fm-warning-txt-field {
	height: 2.2em;
	border-width: 2px;
	border-color: #ff0000;
	background-color: #ffebeb;
}

.fm-default-txt-field-small		{ width: 300px; }
.fm-default-txt-field-name		{ width: 12em; }
.fm-default-txt-field-tel		{ width: 15em; }
.fm-default-txt-field-postal	{ width: 8em; }

.fm-date-select {

}

.fm-warning-date-select {

}

/* -------------------------------------------------------------------- */
/*
テキストエリア

Markup:
<table><tr><th>備考：</th><td><textarea cols="30" rows="3" class="fm-textarea"></textarea></td></tr></table>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-textarea {
	width: 100%;
	height: 100px;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	padding: 5px 10px;
	resize: none;
}

.fm-pulldown {
	height: 2em;
	line-height: 2;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	padding-left: 7px;
}

.fm-pulldown > option						{ color: #404454; }
.fm-pulldown-placeholder,
.fm-pulldown > .fm-pulldown-disabled		{ color: #999999; }

/* -------------------------------------------------------------------- */
/*
チェックボックス


Markup:
<ul class="list-horizon-selection list-horizon-selection-small">
	<li><input name="wk_day" type="checkbox" value="月" class="fm-checkbox" id="week-checkbox-01"><label for="week-checkbox-01">月</label></li>
	<li><input name="wk_day" type="checkbox" value="火" class="fm-checkbox" id="week-checkbox-02"><label for="week-checkbox-02">火</label></li>
	<li><input name="wk_day" type="checkbox" value="水" class="fm-checkbox" id="week-checkbox-03"><label for="week-checkbox-03">水</label></li>
	<li><input name="wk_day" type="checkbox" value="木" class="fm-checkbox" id="week-checkbox-04"><label for="week-checkbox-04">木</label></li>
	<li><input name="wk_day" type="checkbox" value="金" class="fm-checkbox" id="week-checkbox-05"><label for="week-checkbox-05">金</label></li>
	<li><input name="wk_day" type="checkbox" value="土" class="fm-checkbox" id="week-checkbox-06"><label for="week-checkbox-06">土</label></li>
	<li><input name="wk_day" type="checkbox" value="日" class="fm-checkbox" id="week-checkbox-07"><label for="week-checkbox-07">日</label></li>
	<li><input name="wk_day" type="checkbox" value="祝日" class="fm-checkbox" id="week-checkbox-08"><label for="week-checkbox-08">祝日</label></li>
</ul>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-checkbox + label:before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 5px;
	background-color: #FFF;
	border-style: solid;
	border-width: 1px;
	border-color: #b3b4bb;
	border-radius: 3px;
	vertical-align: middle;
}

.fm-checkbox:checked + label:before,
.fm-checkbox.input-checked + label:before {
	content: "\02714";
	color: #1d3994;
	font-size: 30px;
	line-height: 22px;
	text-align: center;
}

.fm-checkbox.is-non-active + label {
	color: #b3b4bb;
}

.fm-checkbox.is-non-active + label:before {
	background-color: #b3b4bb;
}

.fm-checkbox {
	/* MOP_G-1264 START */
	position: absolute;
	visibility: hidden;
	/* MOP_G-1264 END */
}

/* -------------------------------------------------------------------- */
/*
ラジオボタン

Markup:
<ul class="fm-vertical-list">
	<li><input type="radio" name="キャンセル後の行動" class="fm-radio" id="cancel-after-radio-01"><label for="cancel-after-radio-01">別の面接日を希望する</label></li>
	<li><input type="radio" name="キャンセル後の行動" class="fm-radio" id="cancel-after-radio-02"><label for="cancel-after-radio-02">応募を取り消す</label></li>
</ul>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-radio + label:before {
	content: "";
	display: inline-block;
	height: 1.3em;
	width: 1.3em;
	margin-right: 7px;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	border-radius: 0.65em;
	vertical-align: middle;
}

.fm-radio:checked + label:before,
.fm-radio.input-checked + label:before {
	background-color: #404454;
	box-shadow: 0 0 0 3px #ffffff inset;
}

.fm-radio {
	/* MOP_G-1264 START */
	position: absolute;
	visibility: hidden;
	/* MOP_G-1264 END */
}
.fm-radio-hidden + label:before {
	display: none;
}
.fm-radio-content {
	padding-left: 25px;
}
.fm-radio.is-disabled + label,
.fm-radio.is-non-active + label {
	color: #b3b4bb;
}
.fm-radio.is-disabled + label:before,
.fm-radio.is-non-active + label:before {
	border-color: #b3b4bb;
}
.fm-radio.is-disabled.is-checked + label:before,
.fm-radio.is-non-active.is-checked + label:before {
	background: #b3b4bb;
}
a > .fm-radio + label {
	cursor: pointer;
}
a.is-selected > .fm-radio + label {
	cursor: default;
}

/* -------------------------------------------------------------------- */
/*
１行フォーム

１行に並べられた、テキストを含むフォーム

Markup:
<div class="fm-line">
	<select name="月" class="fm-pulldown">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<span>月</span>
	<select name="日" class="fm-pulldown">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<span>日</span>
	<span class="fm-line-connection">～</span>
	<select name="月" class="fm-pulldown">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<span>月</span>
	<select name="日" class="fm-pulldown">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<span>日</span>
</div>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-line > span {
	padding-left: 3px;
}

.fm-line > span + .fm-pulldown,
.fm-line > span + .fm-default-txt-field {
	margin-left: 15px;
}

.fm-line >.fm-line-connection {
	padding-left: 15px;
}

/* -------------------------------------------------------------------- */
/*
横並びリスト内の非活性リンク

Markup:
<ul class="list-horizon-bar">
	<li><a href="#">リスト</a></li>
	<li class="is-non-active"><a href="#">リスト</a></li>
	<li class="is-non-active"><a href="#">リスト</a></li>
	<li><a href="#">リスト</a></li>
	<li><a href="#">リスト</a></li>
</ul>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */
.list-horizon-bar > .is-non-active > span {
	color: #9fa1a9;
}


/* -------------------------------------------------------------------- */
/*
フォーム縦並びリスト *現在使用されていません

Markup:


Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-vertical-list > li + li {
	margin-top: 10px;
}

.fm-warning-textarea {

}

.fm-warning-pulldown {

}

.fm-warning-checkbox {

}

.fm-warning-radio {

}

/* -------------------------------------------------------------------- */
/*
フォーム内補足文字列

Markup:
<table class="tbe-vertical"><tr><th>住所：</th>
<td>
	<p><input type="text" name="hoge" class="fm-default-txt-field"></p>
	<p class="fm-caption-small">物件名まで入れてください。</p>
	<p class="fm-caption-rules">20文字以内</p>
</td></tr></table>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-caption-small,
.fm-caption-rules {
	font-size: 85%;
}

.fm-caption-large {

}

.fm-caption-small,
.fm-caption-rules {
	padding-top: 5px;
}

.fm-caption-rules {
	text-align: right;
}

.fm-caption-txt-count {

}

.fm-icon {

}

.list-pagenation {

}

.list-pagenation-set {

}

.list-warning-pagenation-set {

}

.list-horizon {

}

/* -------------------------------------------------------------------- */
/*
横並びリスト（棒分け）

Markup:
<div class="list-horizon-bar-outer">
	<ul class="list-horizon-bar">
		<li>リスト</li>
		<li>リスト</li>
		<li>リスト</li>
		<li>リスト</li>
		<li>リスト</li>
	</ul>
</div>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

.list-horizon-default,
.list-horizon-bar,
.list-horizon-btn {
	overflow: hidden;
}

.list-horizon-default > li,
.list-horizon-bar > li,
.list-horizon-btn > li,
.list-horizon-btn1 > li,
.list-horizon-btn2 > li,
.list-horizon-btn3 > li,
.list-horizon-btn4 > li,
.list-horizon-btn5 > li,
.list-horizon-btn6 > li,
.list-horizon-btn7 > li,
.list-horizon-btn8 > li,
.list-horizon-selection > li {
	margin-right: 3px;
	float: left;
}

.list-horizon-default > li + li:before{
	content: "|";
	color: #333333;
	margin-right: 5px;
	margin-left: 5px;
}

.list-horizon-default > li > .pager--is-end:before{
	content: "･･･";
	color: #333333;
	margin-right: 5px;
	margin-left: 5px;
}

.list-horizon-default > li > .pager--is-start:after{
	content: "･･･";
	color: #333333;
	margin-right: 5px;
	margin-left: 5px;

}
.list-horizon-default > li .is-selected {
	color: #FF0000;
	cursor: default;
	text-decoration: none;
}
.list-horizon-bar-outer {
	overflow: hidden;
}

.list-horizon-bar {
	margin-left: -24px;
}

.list-horizon-bar > li:before{
	content: "|";
	color: #9fa1a9;
	padding-left: 10px;
	padding-right: 10px;
}

/* -------------------------------------------------------------------- */
/*
選択系横並びリスト

.list-horizon-selection-small - スモール

Markup:
<div class="list-horizon-selection-outer">
	<ul class="list-horizon-selection {$modifiers}">
		<li><input type="radio" name="勤務期間" class="fm-radio" id="work-period-radio-01"><label for="work-period-radio-01">1日</label></li>
		<li><input type="radio" name="勤務期間" class="fm-radio" id="work-period-radio-02"><label for="work-period-radio-02">短期</label></li>
		<li><input type="radio" name="勤務期間" class="fm-radio" id="work-period-radio-03"><label for="work-period-radio-03">長期</label></li>
	</ul>
</div>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

.list-horizon-selection-outer {
	overflow: hidden;
}

.list-horizon-selection {
	margin-top: -7px;
	margin-left: -50px;
}

.list-horizon-selection > li {
	min-width: 7em;
	padding-left: 50px;
	margin-top: 7px;
	white-space: nowrap;
}

.list-horizon-selection-small > li {
	min-width: 3em;
}

.list-horizon-selection-cuff {
	display: inline-block;
	vertical-align: top;
	line-height: 22px;
	overflow: hidden;
}

/* -------------------------------------------------------------------- *i/
/*
テキスト風リスト

Markup:
<div class="text-line-wrap">
	<ul class="text-line">
		<li>テスト</li>
		<li>テスト</li>
		<li>テスト</li>
		<li>テスト</li>
		<li>テスト</li>
		<li>テスト</li>
	</ul>
</div>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

.text-line-wrap {
	overflow: hidden;
}

.text-line {
	margin-left: -1em;
}

.text-line > * {
	display: inline-block;
}

.text-line > li:first-child {
	text-indent: 1em;
}

.text-line > * + * {
	margin-left: 1em;
}

/*

.text-line > *:before {
	content: "、";
}
*/

/* -------------------------------------------------------------------- */
/*
横並びボタンリスト（全国）

全国トップのみ使用しています。

Markup:
<ul class="list-horizon-btn">
	<li><a href="#">東京</a></li>
	<li><a href="#">神奈川</a></li>
	<li><a href="#">埼玉</a></li>
	<li><a href="#">千葉</a></li>
	<li><a href="#">栃木</a></li>
	<li><a href="#">茨城</a></li>
	<li><a href="#">群馬</a></li>
</ul>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */
/*---------------------------------------------------------------------
　　　北海道・東北
 -------------------------------------------------------------------- */
.list-horizon-btn1 > li + li {
	margin-right: 3px;
}

.list-horizon-btn1 > li > a:hover {
	opacity: 0.6;
}
.list-horizon-btn1 > li > span,
.list-horizon-btn2 > li > span,
.list-horizon-btn3 > li > span,
.list-horizon-btn4 > li > span,
.list-horizon-btn5 > li > span,
.list-horizon-btn6 > li > span,
.list-horizon-btn7 > li > span,
.list-horizon-btn8 > li > span {
	opacity: 0.4;
}

.list-horizon-btn1 > li > a {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #9DC3E6;
	border-style: solid;
	border-width: 1px;
	border-color: #9DC3E6;
	box-shadow: 0 0 0 1px #9DC3E6 inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn1 > li > span {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #BDBDBD;
	border-style: solid;
	border-width: 1px;
	border-color: #BDBDBD;
	box-shadow: 0 0 0 1px #BDBDBD inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn1 > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}
/*---------------------------------------------------------------------
　　　関東
 -------------------------------------------------------------------- */
.list-horizon-btn2 > li + li {
	margin-right: 3px;
}

.list-horizon-btn2 > li > a:hover {
	opacity: 0.6;
}

.list-horizon-btn2 > li > a {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #92D050;
	border-style: solid;
	border-width: 1px;
	border-color: #92D050;
	box-shadow: 0 0 0 1px #92D050 inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn2 > li > span {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #BDBDBD;
	border-style: solid;
	border-width: 1px;
	border-color: #BDBDBD;
	box-shadow: 0 0 0 1px #BDBDBD inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn2 > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}
/*---------------------------------------------------------------------
　　　甲信越・北陸
 -------------------------------------------------------------------- */
.list-horizon-btn3 > li + li {
	margin-right: 3px;
}

.list-horizon-btn3 > li > a:hover {
	opacity: 0.6;
}

.list-horizon-btn3 > li > a {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #FF9999;
	border-style: solid;
	border-width: 1px;
	border-color: #FF9999;
	box-shadow: 0 0 0 1px #FF9999 inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn3 > li > span {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #BDBDBD;
	border-style: solid;
	border-width: 1px;
	border-color: #BDBDBD;
	box-shadow: 0 0 0 1px #BDBDBD inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn3 > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}
/*---------------------------------------------------------------------
　　　関西
 -------------------------------------------------------------------- */
.list-horizon-btn4 > li + li {
	margin-right: 3px;
}

.list-horizon-btn4 > li > a:hover {
	opacity: 0.6;
}

.list-horizon-btn4 > li > a {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #FFC000;
	border-style: solid;
	border-width: 1px;
	border-color: #FFC000;
	box-shadow: 0 0 0 1px #FFC000 inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn4 > li > span {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #BDBDBD;
	border-style: solid;
	border-width: 1px;
	border-color: #BDBDBD;
	box-shadow: 0 0 0 1px #BDBDBD inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn4 > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}
/*---------------------------------------------------------------------
　　　関西
 -------------------------------------------------------------------- */
.list-horizon-btn5 > li + li {
	margin-right: 3px;
}

.list-horizon-btn5 > li > a:hover {
	opacity: 0.6;
}

.list-horizon-btn5 > li > a {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #DC97FF;
	border-style: solid;
	border-width: 1px;
	border-color: #DC97FF;
	box-shadow: 0 0 0 1px #DC97FF inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn5 > li > span {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #BDBDBD;
	border-style: solid;
	border-width: 1px;
	border-color: #BDBDBD;
	box-shadow: 0 0 0 1px #BDBDBD inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn5 > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}
/*---------------------------------------------------------------------
　　　中国
 -------------------------------------------------------------------- */
.list-horizon-btn6 > li + li {
	margin-right: 3px;
}

.list-horizon-btn6 > li > a:hover {
	opacity: 0.6;
}

.list-horizon-btn6 > li > a {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #6699FF;
	border-style: solid;
	border-width: 1px;
	border-color: #6699FF;
	box-shadow: 0 0 0 1px #6699FF inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn6 > li > span {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #BDBDBD;
	border-style: solid;
	border-width: 1px;
	border-color: #BDBDBD;
	box-shadow: 0 0 0 1px #BDBDBD inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn6 > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}
/*---------------------------------------------------------------------
　　　九州・沖縄
 -------------------------------------------------------------------- */
.list-horizon-btn7 > li + li {
	margin-right: 3px;
}

.list-horizon-btn7 > li > a:hover {
	opacity: 0.6;
}

.list-horizon-btn7 > li > a {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #FF7453;
	border-style: solid;
	border-width: 1px;
	border-color: #FF7453;
	box-shadow: 0 0 0 1px #FF7453 inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn7 > li > span {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #BDBDBD;
	border-style: solid;
	border-width: 1px;
	border-color: #BDBDBD;
	box-shadow: 0 0 0 1px #BDBDBD inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn7 > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}
/*---------------------------------------------------------------------
　　　東海
 -------------------------------------------------------------------- */
.list-horizon-btn8 > li + li {
	margin-right: 3px;
}

.list-horizon-btn8 > li > a:hover {
	opacity: 0.6;
}

.list-horizon-btn8 > li > a {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #FF80FF;
	border-style: solid;
	border-width: 1px;
	border-color: #FF80FF;
	box-shadow: 0 0 0 1px #FF80FF inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn8 > li > span {
	display: block;
	width: 3.2em;
	color: #FFFFFF;
	background-color: #BDBDBD;
	border-style: solid;
	border-width: 1px;
	border-color: #BDBDBD;
	box-shadow: 0 0 0 1px #BDBDBD inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
	margin-bottom:2px;
}

.list-horizon-btn8 > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}


/* ---------------------------------------- org
.list-horizon-btn > li + li {
	margin-left: 3px;
}

.list-horizon-btn > li > a:hover {
	opacity: 0.6;
}

.list-horizon-btn > li > a {
	display: block;
	width: 3.2em;
	color: #333333;
	background-color: #ffffff;
	border-style: solid;
	border-width: 1px;
	border-color: #c4c2ba;
	box-shadow: 0 0 0 1px #ffffff inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
}

.list-horizon-btn > li > span {
	display: block;
	width: 3.2em;
	color: #CCCCCC;
	background-color: #ffffff;
	border-style: solid;
	border-width: 1px;
	border-color: #c4c2ba;
	box-shadow: 0 0 0 1px #ffffff inset;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 4px 3px 1px;
}

.list-horizon-btn > li > .is-non-active {
	background-color: #ffffff;
	cursor: text;
}
-------------------------------- */

.slider-same-height {
	min-height: 241px;
}

/* -------------------------------------------------------------------- */
/*
横並びボタンリスト（ボタン１つ）

Markup:
<ul class="list-horizon-btn list-horizon-btn-single">
	<li><a href="#">東京</a></li>
</ul>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */
/*
横並びボタンリスト（ボタン２つ）

Markup:
<ul class="list-horizon-btn list-horizon-btn-double">
	<li><a href="#">東京</a></li>
	<li><a href="#">神奈川</a></li>
</ul>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */
/*
横並びボタンリスト（ボタン３つ）

Markup:
<ul class="list-horizon-btn list-horizon-btn-triple">
	<li><a href="#">東京</a></li>
	<li><a href="#">神奈川</a></li>
	<li><a href="#">埼玉</a></li>
</ul>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */
/*
横並びボタンリスト（ボタン４つ）

Markup:
<ul class="list-horizon-btn list-horizon-btn-quadruple">
	<li><a href="#">東京</a></li>
	<li><a href="#">神奈川</a></li>
	<li><a href="#">埼玉</a></li>
	<li><a href="#">千葉</a></li>
</ul>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */
/*
横並びボタンリスト（ボタン４つ以上）

Markup:
<ul class="list-horizon-btn list-horizon-btn-more">
	<li><a href="#">東京</a></li>
	<li><a href="#">神奈川</a></li>
	<li><a href="#">埼玉</a></li>
	<li><a href="#">千葉</a></li>
	<li><a href="#">栃木</a></li>
	<li><a href="#">茨城</a></li>
	<li><a href="#">群馬</a></li>
</ul>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

.list-horizon-btn-single > li		{ width: 49%; }
.list-horizon-btn-double > li		{ width: 49%; }
.list-horizon-btn-triple > li		{ width: 32%; }
.list-horizon-btn-quadruple > li	{ width: 48%; }
.list-horizon-btn-more > li			{ width: 23%; }

.list-horizon-btn-double > li + li,
.list-horizon-btn-triple > li + li {
	margin-left: 2%;
}

.list-horizon-btn-quadruple > li + li,
.list-horizon-btn-more > li + li {
	margin-left: 1%;
}

.list-horizon-btn-quadruple,
.list-horizon-btn-more {
	margin-top: -10px;
}

.list-horizon-btn-quadruple > li,
.list-horizon-btn-more > li {
	margin-right: 1%;
	margin-left: 1%;
	margin-top: 10px;
}

.list-horizon-btn-single > li > a,
.list-horizon-btn-double > li > a,
.list-horizon-btn-triple > li > a,
.list-horizon-btn-single > li > span,
.list-horizon-btn-double > li > span,
.list-horizon-btn-triple > li > span,
.list-horizon-btn-quadruple > li > a,
.list-horizon-btn-more > li > a,
.list-horizon-btn-quadruple > li > span,
.list-horizon-btn-more > li > span{
	width: auto;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* -------------------------------------------------------------------- */
/*
横並びリスト用見出し

.list-horizon-header-large - 可変
.list-horizon-header-small - 固定幅

Markup:
<h4 class="ttl-lv3 list-horizon-header {$modifiers}">あなたがチェックしたエリア</h4>
<div class="list-horizon-bar-outer">
	<ul class="list-horizon-bar">
		<li><a href="#">千代田区</a></li>
		<li><a href="#">渋谷区</a></li>
		<li><a href="#">港区</a></li>
	</ul>
</div>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

.list-horizon-header-small,
.list-horizon-header-large,
.list-horizon-header-largest {
	float: left;
	font-weight: bold;
}

.list-horizon-header-large + *,
.list-horizon-header-largest + * {
	line-height: 1.6;
}

.list-horizon-header-small {
	width: 6em;
	padding-right: 10px;
}

.list-horizon-header-large {
	min-width: 150px;
	padding-right: 20px;
}

.list-horizon-header-largest {
	min-width: 220px;
	padding-right: 20px;
}

.list-horizon-header-small-bar,
.list-horizon-header-large-bar,
.list-horizon-header-largest-bar {
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #9fa1a9;
	margin-right: 10px;
}

/* -------------------------------------------------------------------- */
/*
アンダーライン付与 *現在使用されていないようです

bg-default等でpaddingを設けている場合、list-horizon-bd-bottom-outerで左右のpadding打消しが必要。
non-bdでアンダーライン打消し。


Markup:
<div class="list-horizon-bd-bottom-outer">
	<div class="bg-default list-horizon-bd-bottom">
		<h4 class="ttl-lv3 list-horizon-header-large">あなたがチェックしたエリア</h4>
		<div class="list-horizon-bar-outer">
			<ul class="list-horizon-bar">
				<li><a href="#">千代田区</a></li>
				<li><a href="#">渋谷区</a></li>
				<li><a href="#">港区</a></li>
			</ul>
		</div>
	</div>
	<div class="bg-default list-horizon-bd-bottom">
		<h4 class="ttl-lv3 list-horizon-header-large">あなたがチェックしたエリア</h4>
		<div class="list-horizon-bar-outer">
			<ul class="list-horizon-bar">
				<li><a href="#">千代田区</a></li>
				<li><a href="#">渋谷区</a></li>
				<li><a href="#">港区</a></li>
			</ul>
		</div>
	</div>
	<div class="bg-default list-horizon-bd-bottom">
		<h4 class="ttl-lv3 list-horizon-header-large">あなたがチェックしたエリア</h4>
		<div class="list-horizon-bar-outer">
			<ul class="list-horizon-bar">
				<li><a href="#">千代田区</a></li>
				<li><a href="#">渋谷区</a></li>
				<li><a href="#">港区</a></li>
			</ul>
		</div>
	</div>
</div>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

.list-horizon-bd-bottom {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #ececee;
	padding-left: 0;
	padding-right: 0;
}

.list-horizon-bd-bottom-outer {
	padding-left: 15px;
	padding-right: 15px;
}

.list-horizon-bd-bottom-outer > .non-bd {
	border-style: none;
}

.list-horizon-bd-top {
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #ececee;
	padding-left: 0;
	padding-right: 0;
}

.list-horizon-bd-top-outer {
	padding-left: 15px;
	padding-right: 15px;
}

.list-horizon-bd-top-outer > .non-bd {
	border-style: none;
}

/* -------------------------------------------------------------------- */
/*
縦型テーブル

thの幅は固定です。

Markup:
<table class="tbe-vertical">
	<tr><th>見出し</th><td>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td></tr>
	<tr><th>見出し</th><td>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td></tr>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-vertical {
	width: 100%;
	font-size: 14px;
	text-align: left;
}

.tbe-vertical > tbody > tr,
.tbe-vertical > tbody > tr > th,
.tbe-vertical > tbody > tr > td {
	padding: 10px 15px;
	border-width: 1px;
	border-color: #e5e5e5;
	vertical-align: top;
}

.tbe-vertical > tbody > tr > th {
	white-space: nowrap;
	background:#f5f5f6;
	font-weight: bold;
	text-align: left;
}

/* -------------------------------------------------------------------- */
/*
縦型テーブル thを固定します。

.tbe-vertical-str5 - width 5em
.tbe-vertical-str10 - width 10em

Markup:
<table class="tbe-vertical">
	<tr><th class="{$modifiers}">見出し</th><td>テキストテキストテキストテキストテキスト</td></tr>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-vertical-str5 {
	width: 5em;
}
.tbe-vertical-str11 {
	width: 11em;
}

/* -------------------------------------------------------------------- */
/*
小型縦型テーブル

thの幅を最小にします。

Markup:
<table class="tbe-vertical tbe-vertical-small">
	<tr><th>見出し</th><td>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td></tr>
	<tr><th>見出し</th><td>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td></tr>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-vertical-small > tbody > tr > th {
	width: auto;
	padding-right: 15px;
	min-width: 5em;
}

/* -------------------------------------------------------------------- */
/*
上下ボーダーテーブル

Markup:
<table class="tbe-vertical tbe-vertical-top-bottom">
	<tr><th>見出し</th><td>テキストテキストテキスト</td></tr>
	<tr><th>見出し</th><td>テキストテキストテキスト</td></tr>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-vertical-top-bottom > tbody > tr {
	border-bottom-style: solid;
}

.tbe-vertical-top-bottom > tbody > tr:first-child {
	border-top-style: solid;
}

/* -------------------------------------------------------------------- */
/*
内側ボーダーテーブル

Markup:
<table class="tbe-vertical tbe-vertical-inborder">
	<tr><th>見出し</th><td>テキストテキストテキスト</td></tr>
	<tr><th>見出し</th><td>テキストテキストテキスト</td></tr>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-vertical-inborder > tbody > tr + tr {
	border-top-style: solid;
}

.tbe-warning-vertical {

}

/* -------------------------------------------------------------------- */
/*
フォーム系縦型テーブル

Markup:
<table class="tbe-vertical tbe-vertical-fm">
	<tbody>
		<tr>
			<th class="icn-tbe-required">氏名</th>
			<td>
				<p>入力必須項目です</p>
				<div><input type="text" placeholder="例）えむおぴ" class="fm-default-txt-field jsc-placeholder"></div>
			</td>
		</tr>
		<tr>
			<th class="icn-tbe-required">氏名(かな)</th>
			<td>
				<div><input type="text" placeholder="例）えむおぴ" class="fm-default-txt-field jsc-placeholder"></div>
			</td>
		</tr>
		<tr>
			<th class="icn-tbe-required">電話番号</th>
			<td>
				<div><input type="text" placeholder="例） 03123456ｘｘ" class="fm-default-txt-field jsc-placeholder"></div>
			</td>
		</tr>
		<tr>
			<th rowspan="2" class="tbe-vertical-fm-rowspan">最終学歴</th>
			<th class="tbe-vertical-fm-rowspan-affect">学校名</th>
			<td>
				<div><input type="text" placeholder="例）仕事大学" class="fm-default-txt-field jsc-placeholder"></div>
			</td>
		</tr>
		<tr>
			<th class="tbe-vertical-fm-rowspan-affect">学部</th>
			<td>
				<div>
					<input type="text" placeholder="例）経済学部・経済学科" class="fm-default-txt-field jsc-placeholder">
					<select class="fm-pulldown fm-pulldown-placeholder">
						<option value="選択" disabled selected class="fm-pulldown-disabled">選択</option>
						<option value="">3年</option>
						<option value="">2年</option>
						<option value="">1年</option>
					</select>
				</div>
			</td>
		</tr>
	</tbody>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-vertical-fm > tbody > tr + tr {
	border-top-style: solid;
}

.tbe-vertical-fm > tbody > tr > th {
	width: 12em;
	background-color: transparent;
}

.tbe-vertical-fm > tbody > tr > th,
.tbe-vertical-fm > tbody > tr > td {
	padding-right: 0;
	padding-left: 0;
}

.tbe-vertical-fm > tbody > tr > .tbe-vertical-fm-rowspan {
	width: 2em;
	vertical-align: middle;
	padding-right: 1em;
	border-right-style: solid;
}

.tbe-vertical-fm > tbody > tr > .tbe-vertical-fm-rowspan-affect {
	width: 8em;
	padding-left: 1em;
}

.tbe-warning-vertical {

}

/* -------------------------------------------------------------------- */
/*
横型ボーダーテーブル

見出しが横に並ぶバージョン。

Markup:
<table class="tbe-horizon">
	<thead><tr><th>見出し</th><th>見出し</th><th>見出し</th></tr></thead>
	<tbody>
		<tr><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr>
		<tr><td colspan="3" class="tbe-horizon-right-cell">テキスト</td></tr>
	</tbody>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-horizon {
	width: 100%;
	font-size: 14px;
	text-align: left;
}
.tbe-horizon-fixed {
	table-layout: fixed;
}
.tbe-horizon > thead > tr > th,
.tbe-horizon > tbody > tr > td {
	padding: 10px 15px;
	border-style: solid;
	border-width: 1px;
	border-color: #e5e5e5;
	vertical-align: middle;
}

.tbe-horizon > thead > tr > th {
	width: 10em;
	background:#f5f5f6;
	font-weight: bold;
}

.tbe-horizon > tbody > tr > .tbe-horizon-right-cell {
	text-align: right;
}

/* -------------------------------------------------------------------- */
/*
小型横型ボーダーテーブル

横型ボーダーテーブルの縮小版

Markup:
<table class="tbe-horizon tbe-horizon-small">
	<thead><tr><th>見出し</th><th>見出し</th><th>見出し</th></tr></thead>
	<tbody><tr><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr></tbody>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-horizon-small {
	width: auto;
}

.tbe-horizon-small > thead > tr > th {
	width: auto;
	font-size: 100%;
}

/* -------------------------------------------------------------------- */
/*
フォーム系横型テーブル

Markup:
<table class="tbe-horizon tbe-horizon-fm">
	<thead><tr><th>見出し</th><th>見出し</th><th>見出し</th></tr></thead>
	<tbody>
		<tr><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr>
		<tr class="tbe-horizon-fm-separate"><td colspan="3" class="tbe-horizon-right-cell">テキスト</td></tr>
	</tbody>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-horizon-fm > thead > tr > th {
	background-color: transparent;
}

.tbe-horizon-fm > thead > tr > th,
.tbe-horizon-fm > tbody > tr > td {
	border-style: none;
	padding-left: 0;
	padding-right: 0;
}

.tbe-horizon-fm > tbody > tr {
	border-top-style: solid;
	border-width: 1px;
	border-color: #e5e5e5;
}

.tbe-horizon-fm > tbody > .tbe-horizon-fm-separate {
	border-width: 2px;
}

.tbe-warning-horizon {

}

.tbe-sort {

}

/* -------------------------------------------------------------------- */
/*
横型テーブル用オプション

.tbe-horizon-nowrap-cell - 改行禁止セル
.tbe-horizon-full-cell - 100%セル
.tbe-horizon-right-space - padding-right 30px

Markup:
<table class="tbe-horizon tbe-horizon-small">
	<thead><tr><th>見出し</th><th>見出し</th><th class="{$modifiers}">見出し</th></tr></thead>
	<tbody><tr><td>テキスト</td><td>テキスト</td><td>テキスト</td></tr></tbody>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-horizon > thead > tr > .tbe-horizon-nowrap-cell,
.tbe-horizon > tbody > tr > .tbe-horizon-nowrap-cell	{ white-space: nowrap;	padding-right: 15px; }
.tbe-horizon > thead > tr > .tbe-horizon-full-cell,
.tbe-horizon > tbody > tr > .tbe-horizon-full-cell		{ width: 100%;}
.tbe-horizon > thead > tr > .tbe-horizon-right-space,
.tbe-horizon > tbody > tr > .tbe-horizon-right-space	{ padding-right:30px; }

.tbe-horizon-item-w150 {
	display: inline-block;
	width: 150px;
}

/* -------------------------------------------------------------------- */
/*
スクロール

Markup:
<div class="scroll"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.scroll {

}

/* -------------------------------------------------------------------- */
/*
エラー

Markup:
<div class="error-warning"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.error-warning {

}

/* -------------------------------------------------------------------- */
/*
アラート

Markup:
<div class="alert-warning"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.alert-warning {

}

/* -------------------------------------------------------------------- */
/*
ボックス（プライマリ）

仮設定です。正式デザインではありません。

Markup:
<div class="box-primary bg-secondary">コンテンツ</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.box-primary {
	border-style: solid;
	border-width: 1px;
	border-color: #aaaaaa;
	box-shadow: 0 0 7px #aaaaaa;
}
.box-secondary {
	border: 1px dotted #CCCCCC;
	padding: 10px;
}

/* -------------------------------------------------------------------- */
/*
ボックス（デフォルト）

1pxのボーダーかつ、6pxの角丸が入ります。

Markup:
<div class="box-default bg-default">コンテンツ</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.box-default {
	border-style: solid;
	border-width: 1px;
	border-color: #ececee;
	border-radius: 6px;
}

/* -------------------------------------------------------------------- */
/*
ボックス（太枠）

2pxのボーダーかつ、6pxの角丸が入ります。

Markup:
<div class="box-bold bg-default">コンテンツ</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.box-bold {
	border-style: solid;
	border-width: 2px;
	border-color: #e5e5e5;
	border-radius: 6px;
}

/* -------------------------------------------------------------------- */
/*
横並びボックス

間隔を空けての横並び
.box-horizon-interval - 間隔

Markup:
<div class="box-horizon-inline {$modifiers}">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.box-horizon {}

.box-horizon > p,
.box-horizon > div {
	display: inline-block;
	vertical-align: middle;
}

.box-horizon > * + * {
	margin-left: 7px;
}

.box-horizon-interval > * + * {
	margin-left: 45px;
}
.box-horizon:after {
	content: "";
	clear: both;
	display: block;
}
.box-horizon-left {
	float: left;
}
.box-horizon-right {
	float: right;
}

/* -------------------------------------------------------------------- */
/*
左右に離れた横並びボックス

Markup:
<div class="box-separate">
	<p>テキスト</p>
	<p>テキスト</p>
	<p>テキスト</p>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.box-separate {
	display: table;
	width: 100%
}

.box-separate > p {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}

.box-separate > p:first-child {
	text-align: left;
}

/* -------------------------------------------------------------------- */
/*
ボックス（レベルダウン）

ボックス内で更にボックスのレベルを下げる

Markup:
<div class="bg-default">
	<h4>ボックス見出し</h4>
	<p class="box-level-down">レベルダウンボックス</p>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.box-level-down {
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
}

/* -------------------------------------------------------------------- */
/*
横並びタグ

padding5pxの間隔。

Markup:
<ul class="tags">
	<li>タグたぐ</li>
	<li>タグたぐ</li>
	<li>タグたぐ</li>
	<li>タグたぐ</li>
	<li>タグたぐ</li>
</ul>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.tags {
	margin-bottom: -5px;
	overflow: hidden;
}

.tags > li {
	float: left;
	width: 8em;
	padding: 3px 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #e5e5e5;
	text-align: center;
	margin-right: 7px;
	margin-bottom: 5px;
}

/* -------------------------------------------------------------------- */
/*
コンテナー

要素全体を囲む

Markup:
<div class="container">hogehoge</div>

Styleguide 1.1b
*/
/* -------------------------------------------------------------------- */

.container {
	position: relative;
	color: #404454;
	min-height: 100%;
	height: auto !important;
}
/* -------------------------------------------------------------------- */
/*
コンテナー（中央寄せ）

要素全体を中央寄せ

Markup:
<div class="container-centering">hogehoge</div>

Styleguide 1.1
*/
/* -------------------------------------------------------------------- */

.container-centering {
	width: 100%;
	max-width: 1080px;
	background-color: #ffffff;
	margin-right: auto;
	margin-left: auto;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 15px;
	padding-bottom: 30px;
}

/* -------------------------------------------------------------------- */
/*
モーダル

モーダルを作成する

Markup:
<div class="modal-box"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.modal-box {
	background-color: #ffffff;
}

.modal-bg {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: 0;
	z-index: 99;
	background-color: #373a46;
	opacity: 0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/* -------------------------------------------------------------------- */
/*
レベル１セパレータ

H1レベル動詞を完全に分ける

Markup:
<div class="separater-lv1">
	<h1>見出し</h1>
	<p>テキストテキストテキスト</p>
</div>
<div>
	<h1>見出し</h1>
	<p>テキストテキストテキスト</p>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */
/*
コンテンツセパレータ

メインコンテンツとサブコンテンツを分ける

Markup:
<div class="separater-content">メインコンテンツ</div>
<div>サブコンテンツ</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */
/*
H1内セパレータ

H1コンテンツ内で同等のレベルのものを分ける

Markup:
<div>
	<h1>見出し</h1>
	<div class="separater-in-lv1">コンテンツ１</div>
	<div>コンテンツ２</div>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */
/*
同レベルセパレータ

店舗と店舗など、同等レベルのものを分ける

Markup:
<div class="separater-same-lv">店舗１</div>
<div class="separater-same-lv">店舗２</div>
<div>店舗３</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */
/*
同レベル内セパレータ

同等レベルの要素の中で、更に分ける

Markup:
<div>
	<div class="separater-in-same-lv">店舗情報１</div>
	<div>店舗情報２</div>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.separater-lv1,
.separater-content,
.separater-in-lv1,
.separater-same-lv,
.separater-in-same-lv,
.separater-min {
	border-bottom-style: solid;
	border-color: #e5e5e5;
}

.separater-lv1		{ border-width: 3px;	padding-bottom: 30px;	margin-bottom: 30px;}
.separater-content	{ border-width: 2px;	padding-bottom: 20px;}
.separater-in-lv1	{ border-width: 2px;	padding-bottom: 20px;}
.separater-same-lv	{ border-width: 1px;	padding-bottom: 15px;	margin-bottom: 15px}
.separater-min 		{ border-width: 2px;}

.separater-in-same-lv {
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

/* -------------------------------------------------------------------- */
/*
パンくずリスト

font-size 85% 左右10pxの余白。

Markup:
<ol class="breadcrumbs">
	<li><a href="#">トップ</a></li>
	<li><a href="#">大エリア</a></li>
	<li><a href="#">中エリア</a></li>
	<li><a href="#">小エリア</a></li>
	<li>ポイント</li>
</ol>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.breadcrumbs {
	width: 100%;
	font-size: 85%;
}

.breadcrumbs > li {
	float: left;
	white-space: nowrap;
}

.breadcrumbs > li + li:before {
	content: ">";
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
}

/* -------------------------------------------------------------------- */
/*
ソーシャル

ソーシャルを配置

Markup:
<ul class="sns-logos">
						<li class="sns-logos-fb"><a href="https://ja-jp.facebook.com/">facebook</a></li>
						<li class="sns-logos-tw"><a href="https://twitter.com/?lang=ja">twitter</a></li>
						<li class="sns-logos-gl"><a href="https://plus.google.com/">google+</a></li>
						<li class="sns-logos-mi"><a href="https://mixi.jp/">mixi</a></li>
					</ul>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.sns-logos {
	display: table;
	margin-left: auto;
}

.sns-logos > li {
	float: left;
	width: 26px;
	height: 26px;
	line-height: 26px;
	/*background-image: url(/pc/img/spt-sns.png);*/
	background-repeat: no-repeat;
}

.sns-logos > li + li {
	margin-left: 3px;
}

.sns-logos > li > a {
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.sns-logos-fb	{ background-position: 0 0; }
.sns-logos-tw	{ background-position: -26px 0; }
.sns-logos-gl	{ background-position: -52px 0; }
.sns-logos-mi	{ background-position: -78px 0; }

/* -------------------------------------------------------------------- */
/*
横並び検索ボックス

テキスト、テキストボックス、ボタンを横並びする

Markup:
<div class="horizon-search-outer">
	<p class="horizon-search-header">フリーワード</p>
	<div class="horizon-search">
		<form action="/" method="get">
		<div class="horizon-search-inner">
			<p class="horizon-search-field">
				<input type="text" placeholder="例：入力例" class="fm-default-txt-field">
			</p>
			<p class="horizon-search-action">
				<input type="submit" value="検　索" class="btn-link-primary btn-link-small">
			</p>
		</div>
		</form>
	</div>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.horizon-search-outer {
	display: table;
	width: 100%;
}

.horizon-search-header {
	width: 6em;
	font-weight: bold;
	padding-right: 20px;
}

.horizon-search-header,
.horizon-search {
	display: table-cell;
	vertical-align: middle;
}

.horizon-search-inner {
	display: table;
	width: 100%;
}

.horizon-search-field,
.horizon-search-action {
	display: table-cell;
	vertical-align: middle;
}

.horizon-search-field {
	width: 100%;
	padding-right: 15px;
}

/* -------------------------------------------------------------------- */
/*
補足テキスト用クラス

注釈用のクラス。文字のサイズを小さくする。

Markup:
<p>テキスト</p>
<p class="description">テキスト</p>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.description {
	font-size: 85%;
}

.definition-list {
}

/* -------------------------------------------------------------------- */
/*
定義リスト

Markup:
<dl class="definition-list description">
	<dt>定義リスト見出し</dt>
	<dd>
		テキストテキストテキストテキスト<br>
		テキストテキストテキストテキスト<br>
	</dd>
	<dt>定義リスト見出し</dt>
	<dd>
		テキストテキストテキストテキスト<br>
		テキストテキストテキストテキスト<br>
	</dd>
	<dt>定義リスト見出し</dt>
	<dd>
		テキストテキストテキストテキスト<br>
		テキストテキストテキストテキスト<br>
	</dd>
</dl>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.definition-list > dt {
	font-weight: bold;
	margin-top: 25px;
}

.include-area {
	background-color: #ececee;
	padding-top: 10px;
	padding-bottom: 10px;
}

.include-area-banner {
	display: table;
	width: 100%;
}

.include-area-banner > li {
	display: table-cell;
	text-align: center;
}

.custom-word {
	text-align: right;
}

.bd-separator {
	border: none;
	border-bottom-style: solid;
	border-width: 3px;
	border-color: #e5e5e5;
	margin-top: 30px;
}

/* -------------------------------------------------------------------- */
/*
アコーディオン

アコーディオンを展開させます。

Markup:
<section class="box-default jsc-accordion">
	<header class="content-header">
		<h3 class="bg-secondary ttl-lv2"><a href="#" class="ellipsis ellipsis-icn-space function-accordion jsc-accordion-trigger jsc-accordion-icon">【応募先】 　PRONTO（プロント） アトレヴィ三鷹店　　[アルバイト]  キッチンスタッフ</a></h3>
	</header>
	<div class="sg-accordion-content jsc-accordion-content">
		<div class="content bg-default">
			<ul class="list-info-wrap">
				<li class="list-info-item">
					<p class="list-info-ttl">勤務時間</p>
					<p>9:00～15:00</p>
				</li>
				<li class="list-info-item">
					<p class="list-info-ttl">給与</p>
					<p>時給　900～1000円　※経験・能力により昇給あり！</p>
				</li>
				<li class="list-info-item">
					<p class="list-info-ttl">アクセス</p>
					<p>中央線三鷹駅　徒歩5分　三井住友銀行ビル内</p>
				</li>
			</ul>
		</div>
	</div>
</section>

Styleguide 10.1
*/
/* -------------------------------------------------------------------- */

.function-accordion {
	display: block;
	position: relative;
	color: #404454;
	text-decoration: none;
}

.function-accordion:hover {
	color: #404454;
	text-decoration: none;
	opacity: 0.6;
}

.function-accordion:after {
	content: "";
	display: block;
	width: 18px;
	height: 11px;
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	/*background-image: url(/pc/img/icn-more.png);*/
	background-repeat: no-repeat;
	background-position: 0 -11px;
}

.function-accordion.is-show:after { background-position: 0 0; }

.sg-accordion-content {
}
.sg-accordion-byradio-content {
	height: 0;
	overflow: hidden;
}

.accordion-read-more {
	padding: 3px 0;
	text-align: right;
	display: inline-block;
}
.accordion-read-more > * {
	vertical-align: top;
}
.accordion-read-more:before {
	content: "もっと見る";
}
.is-show .accordion-read-more:before {
	content: "閉じる";
}
.accordion-read-more:after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-top: 2px;
	margin-left: 10px;
	vertical-align: top;
	border-right: solid 2px #404454;
	border-bottom: solid 2px #404454;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.is-show .accordion-read-more:after {
	margin-top: 6px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

/* -------------------------------------------------------------------- */
/*
文字カウント

テキストエリアの文字数をカウントします。

Markup:
<div class="jsc-text-counter" data-textcounter-maxlength="10">
	<textarea cols="30" rows="3" placeholder="" class="fm-textarea jsc-placeholder jsc-text-counter-input"></textarea>
	<p class="fm-caption-rules"><span class="jsc-text-counter-inputlength"></span>文字/10文字</p>
</div>

Styleguide 10.1
*/
/* -------------------------------------------------------------------- */

.is-limitover {
	color: #ff0000;
}

/* -------------------------------------------------------------------- */
/*
字切り

長い文字を途中で切ります。

Markup:
<p class="ellipsis">予約名称か予定種別予定予定予定予定予定予定予定予定</p>

Styleguide 10.1
*/
/* -------------------------------------------------------------------- */

.ellipsis {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
}

/* -------------------------------------------------------------------- */
/*
非表示のステートクラス

表示、非表示の切り替え時。

Markup:
<p>表示されます。</p>
<p class="is-hidden">表示されません。</p>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.is-hidden {
	display: none;
}

/* -------------------------------------------------------------------- */
/*
キャッチボックス

ページ内のメイン要素（主にトップに来るコンテンツ）を括る専用クラス

Markup:
<header class="catch-box-header content-header sns-logos-fix">
	<div class="catch-box-header-txt">
		<h2 class="ttl-lv1">
			<span class="icn-lv1 icn-lv1-indent icn-lv1-new-pattern1">新着</span>
			<span class="ttl-lv1-normal">PRONTO（プロント）</span>
			<span>アトレヴィ三鷹店</span>
		</h2>
		<p>[アルバイト]キッチンスタッフ</p>
		<p>中央線三鷹駅　徒歩5分　三井住友銀行ビル内</p>
	</div>
	<ul class="sns-logos">
		<li class="sns-logos-fb"><a href="#">facebook</a></li>
		<li class="sns-logos-tw"><a href="#">twitter</a></li>
		<li class="sns-logos-gl"><a href="#">google+</a></li>
		<li class="sns-logos-mi"><a href="#">mixi</a></li>
	</ul>
</header>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.catch-box-header {
	position: relative;
}

.catch-box-ttl {
	padding-right: 130px;
}

.catch-box {
	display: table;
	width: 100%;
}

.catch-box-main,
.catch-box-slider,
.catch-box-img-outer,
.catch-box-search {
	display: table-cell;
	vertical-align: top;
}

.catch-box-main-h351	{ min-height: 351px; }

.catch-box-main-content {
	position: relative;
	height: auto;
}

.catch-box-main-non-slider {
	float: left;
}

.catch-box-main-area-outer {
	min-height: 241px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.catch-box-main-area-outer > .separater-same-lv {
	padding-bottom: 10px;
	margin-bottom: 10px;
}


.catch-box-main-area {
	display: table;
	width: 100%;
	padding-top: 2px;
	padding-bottom: 2px;
}

.catch-box-main-area + .catch-box-main-area {
}

.catch-box-main-area-header,
.catch-box-main-area-content {
	display: table-cell;
	vertical-align: middle;
}

.catch-box-main-area-header {
	width: 6em;
	padding-top: 4px;
	padding-right: 10px;
}

.catch-box-main-area-header + * {
	padding-left: 10px;
}

.catch-box-tbe				{ height: 130px; }
.catch-box-tbe-non-slider	{ height: 0; }
.catch-box-tbe-single-img	{ height: 80px; }

.catch-box-tbe > tbody > tr > th,
.catch-box-tbe > tbody > tr > td {
	padding: 10px 15px;
	border-style: solid;
	border-width: 1px;
	border-color: #e5e5e5;
	vertical-align: top;
}

.catch-box-tbe > tbody > tr > th {
	width: 10em;
	background:#ececee;
}

.catch-box-tbe > tbody > tr > td {
}

.catch-box-slider {
	width: 228px;
	padding-right: 15px;
	overflow: hidden;
}

.catch-box-img,
.catch-box-slider-img {
	position: relative;
	width: 228px;
	height: 228px;
	vertical-align: middle;
	background-color: #333333;
	overflow: hidden;
}

.catch-box-img > img,
.catch-box-slider-img > img,
.catch-box-slider-thumb > li > img {
	display: block;
	max-width: 228px;
	max-height: 228px;
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.catch-box-slider-thumb {
	width: 228px;
	margin-top: 5px;
}

.catch-box-slider-thumb:after {
	content: "";
	clear: both;
	display: block;
}

.catch-box-slider-thumb > li {
	float: left;
	width: 40px;
	height: 40px;
	position: relative;
	margin-left: 7px;
	background-color: #333333;
	overflow: hidden;
	cursor: pointer;
}

.catch-box-slider-thumb > li > img {
	max-width: 40px;
	max-height: 30px;
}

.catch-box-slider-thumb > li:first-child { margin-left: 0; }

.catch-box-slider-thumb > li:hover {
	opacity: 0.6;
}

.catch-box-slider-thumb > li > img {
	max-width: 40px;
	max-height: 40px;
}

.catch-box-slider-thumb > .is-active:before {
	content: "";
	color: #ffffff;
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #666976;
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

.catch-box-search {
	vertical-align: middle;
}

.catch-box-search {
	width: 400px;
	text-align: center;
}

.catch-box-search-item {
	margin-top: 15px;
}

.catch-box-img-outer {
	padding-right: 15px;
}

.catch-box-img:after {
	content: "";
	display: block;
	width: 228px;
}

/* -------------------------------------------------------------------- */
/*
キャッチボックス(全国トップ用)

Markup:
<div class="catch-box-country"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.catch-box-country-main,
.catch-box-country-include {
	display: table-cell;
	vertical-align: top;
	margin: 0 auto;
}

.catch-box-country-include {
	width: 412px;
	padding-right: 15px;
	overflow: hidden;
}
.catch-box-country-img {
	position: relative;
	width: 412px;
	height: 283px;
	overflow: hidden;
}
.sg-imageslider-mainimage {
	width: 100%;
	height: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}
.catch-box-country-img > img {
	height: auto;
}

.catch-box-country-img > img {
	position: absolute;
}

.catch-box-country-thumb {
	width: 100%;
	margin-top: 5px;
}

.catch-box-country-thumb:after {
	content: "";
	clear: both;
	display: block;
}

.catch-box-country-thumb > li {
	float: left;
	width: 20%;
	height: 58px;
	background: #666666;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.catch-box-country-thumb > li:hover {
	opacity: 0.6;
}

.catch-box-country-thumb > li > img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.catch-box-img, .catch-box-slider-img,
.catch-box-country-img,
.work-same-content-img-inner,
.job-same-header-img-inner,
.catch-box-slider-thumb > li,
.catch-box-country-thumb > li {
	background-color: #222;
}
.catch-box-country-thumb > .is-active {
	opacity: 0.6;
}
.catch-box-country-thumb > .is-active:before {
	content: "";
	color: #ffffff;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #666976;
	opacity: 0.7;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.catch-box-country-thumb > li:first-child {
	padding-left: 0;
}

/* -------------------------------------------------------------------- */
/*
ワークシンプル

簡略求人枠に関するスタイルを定義します。

Markup:
<section class="work-simple bg-default box-bold content content-wrap">
	<header class="content-header work-simple-header">
		<h3 class="ttl-lv2 icn icn-finger work-simple-head">○○○○で働いてみませんか？</h3>
	</header>
	<div class="content work-simple-content">
		<div class="work-simple-content-img"><img src="/pc/img/img-company-freespace.jpg" height="124" width="220" alt=""></div>
		<div class="work-simple-content-inner content-wrap">
			<p class="description">
				インクルードエリア3<br>
				フリースペーステキストフリースペーステキストフリースペーステキストフリースペーステキストフリースペーステキストフリースペーステキストフリースペーステキストフリースペーステキストフリースペーステキストフリースペーステキストフリースペーステキスト<br>
			</p>
			<p><a href="#">フリースペーステキスト</a></p>
		</div>
	</div>
</section>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.work-simple {
}

.work-simple-header,
.work-simple-content {
	display: table;
	width: 100%;
}

.work-simple-header-img,
.work-simple-header-inner,
.work-simple-content-inner,
.work-simple-content-action {
	display: table-cell;
	vertical-align: middle;
}

.work-simple-content-img,
.work-simple-header-img {
	width: 200px;
	padding-right: 15px;
}

.work-simple-header-inner,
.work-simple-content-inner {
	width: 100%;
}

.work-simple-content-inner {
}

.work-simple-content-action {
	width: auto;
	white-space: nowrap;
	padding-left: 20px;
}

/* -------------------------------------------------------------------- */
/*
ワークセイム

「同じ勤務地（東京都）の仕事/求人情報一覧」専用のクラス

Markup:
<div class="work-same-hogehoge"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.work-same-header-btn {
	position: absolute;
	right: 15px;
	top: 0;
	white-space: nowrap;
}

.work-same-content {
	width: 100%;
	display: table;
}

.work-same-content-img,
.work-same-content-txt,
.work-same-content-action {
	display: table-cell;
	vertical-align: top;
}

.work-same-content-inner {
	display: table-cell;
	vertical-align: top;
}

.work-same-content-img,
.work-same-content-img-inner {
	width: 200px;
	height: 200px;
}

.work-same-content-img-inner {
	position: relative;
	background-color: #333333;
}

.work-same-content-img-inner > img {
	display: block;
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.work-same-content-inner {
	width: 100%;
}

.work-same-content-img + .work-same-content-inner {
	padding-left: 15px;
}

.work-same-content-txt {
	padding-right: 20px;
}

.work-same-content-action {
	text-align: right;
	width: auto;
	white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/*
カセット全体リンク

Markup:
<div class="cassette-link"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.cassette-link {
	display: block;
}
.cassette-link:hover * {
	text-decoration: underline;
}

.cassette-link:hover .btn-link-primary,
.cassette-link:hover .btn-link-secondary,
.cassette-link:hover .btn-link-default,
.cassette-link:hover .btn-function-primary,
.cassette-link:hover .btn-function-secondary,
.cassette-link:hover .btn-function-default {
	text-decoration: none;
}

.cassette-link:hover {
	text-decoration: underline;
	opacity: 0.7;
}

.cassette-link:hover .btn-link-default {
	background-color: #b3b4bb;
	background-image: none;
}

/* -------------------------------------------------------------------- */
/*
食い込み防止用クラス

Markup:
<div class="hogehoge-fix"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.btn-link-fix {
	padding-right: 130px;
}

.sns-logos-fix {
	position: relative;
}

.sns-logos-fix > .sns-logos {
	position: absolute;
	bottom: 0;
	right: 0;
}

/* -------------------------------------------------------------------- */
/*
個社設定

個社の設定に関するスタイルを定義します。

Markup:
<div class="companies-color"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.main{
	padding-bottom: 300px;
	display: block;
}

.companies-color {
	background-color: #f5f3ef;
}

.companies-header,
.companies-footer {
	position: relative;
	width: 100%;
	color: #ffffff;
	border-width: 1px;
	border-color: #cbcbcb;
}

.companies-header {
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-style: solid;
}

.companies-footer {
	position: absolute;
	bottom: 0;
	height: 300px;
	border-top-style: solid;
}

.companies-logo-outer,
.companies-header-head {
	width: 100%;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.companies-header-head {
	font-weight: normal;
	font-size: 100%;
	text-align: right;
}

.companies-logo {
	width: auto;
	height: 70px;
	margin-top: 5px;
}

.companies-copyright {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 15px;
	width: 100%;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
}


/* -------------------------------------------------------------------- */
/*
クリアフィックス

クリアフィックスをまとめて定義します。

Markup:
<div class="cf"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.cf:after,
.content-header:after,
.breadcrumbs:after,
.sns-logos:after,
.btn-double:after,
.catch-box:after,
.catch-box-slider-thumb:after,
.list-horizon-default:after,
.list-horizon-bar:after,
.list-horizon-btn:after,
.list-horizon-selection:after,
.tags:after,
.work-simple:after {
	content: "";
	display: block;
	clear: both;
}

/* -------------------------------------------------------------------- */
/*
コンテントボックス

box-sizingを無効にする項目を設定します。

Markup:
<div class="catch-box-slider"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.catch-box-slider,
.catch-box-main-area-header,
.horizon-search-header,
.fm-default-txt-field,
.list-horizon-header-small,
.list-horizon-btn > li > a,
.list-horizon-btn > li > span,
.list-horizon-selection > li,
.tbe-vertical > tbody > tr > th,
.icn-tbe-required-txt {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* -------------------------------------------------------------------- */
/*
JS

box-sizingを無効にする項目を設定します。

.is-active - アクティブ状態

Markup:
<div class="sg-imageslider-mainimage {$modifiers}"></div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.sg-imageslider-mainimage {
	bottom: 0;
	transition: bottom 0.1s ease-in-out;
	z-index: 0;
}
.sg-imageslider-mainimage.is-active {
	transition: bottom 1s ease-in-out;
	z-index: 1;
}
.sg-placeholder {
	color: #aaa;
}


/* -------------------------------------------------------------------- */
/*
区切り（アイテム）

Markup:
<div class="separate-contents-item">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.separate-contents-item > * + * {
	border-top-style: solid;
	border-top-color: #e5e5e5;
	border-top-width: 1px;
	padding-top: 15px;
	margin-top: 15px;
}

/* -------------------------------------------------------------------- */
/*
区切り（セクション）

Markup:
<div class="separate-contents-section">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.separate-contents-section > * + * {
	border-top-style: solid;
	border-top-color: #e5e5e5;
	border-width: 3px;
	padding-top: 25px;
	margin-top: 30px;
}

/* -------------------------------------------------------------------- */
/*
イレギュラー / パンくず / 区切り（セクション）

Markup:
<div class="separate-contents-section">
	<p class="breadcrumbs">1</p>
	<p>2</p>
	<p>3</p>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.breadcrumbs + * {
	border: none;
	padding-top: 0;
	margin-top: 15px;
}

/* -------------------------------------------------------------------- */
/*
イレギュラー / 特定のクラス / 区切り（セクション）

Markup:
<div class="separate-contents-section">
	<p>1</p>
	<p>2</p>
	<p class="no-separate">3</p>
</div>

Styleguide 99.1
*/
/* -------------------------------------------------------------------- */

.separate-contents-section > .no-separate {
	border: none;
	padding-top: 0;
	margin-top: 15px;
}

.cassette-list {

}
.cassette-list > li + li {
	margin-top: 15px;
}
.cassette-control:first-child {
	margin-bottom: 20px;
}
.cassette-list + .cassette-control {
	margin-top: 13px;
}
.cassette-control:after {
	content: "";
	display: block;
	clear: both;
}
.cassette-control-message {
	float: left;
}
.cassette-control-pagenation {
	float: right;
	margin-top: 10px;
}
.cassette-control-num {
	color: #ff0000;
	font-size: 20px;
	font-weight: bold;
}
.cassette-control-text {
	font-size: 16px;
}
.cassette-control-status {
	font-size: 14px;
	color: #404454;
}
.page-description-text {
	padding-bottom: 10px;
}

/* --- add */
.error-wrap {
	background-color: #FFEBEB;
	border: solid 2px #FC0D1B;
	padding: 15px 10px;
	border-radius: 5px;
}
.error-wrap > p,
.error-wrap > dt {
	font-size: 16px;
	color: #FC0D1B;
	font-weight: bold;
}
.error-wrap > dt + dd {
	margin-top: 5px;
}
.error-wrap > dd {
	text-indent: 1em;
}
.error-wrap > dd:before {
	content: "・";
}

.box-default {
	border-radius: 6px;
}

.content-size {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

.catch-box-slider {
	padding-right: 20px;
}

.catch-box-slider-mapImg {
	width: 608px;
	height: 350px;
	vertical-align: middle;
	background-color: #333333;
}

.modal-header-close {
	position: absolute;
	top: 7px;
	right: 15px;
}

/* -------------------------------------------------------------------- */
/*
縦型テーブル

Markup:
<table class="tbe-vertical">
	<tr><th>見出し</th><td>テキストテキストテキスト</td></tr>
	<tr><th>見出し</th><td>テキストテキストテキスト</td></tr>
</table>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-vertical {
	width: 100%;
	text-align: left;
}

.tbe-vertical > tbody > tr:first-child {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #d9dadd;
}

.tbe-vertical > tbody > tr {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #d9dadd;
}

.tbe-vertical > tbody > tr > th {
	background:#f5f5f6;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #d9dadd;
	text-align: left;
}

.tbe-vertical-small > tbody > tr > th {
	width: 60px;
	padding-right: 15px;
}

.tbe-vertical-lv2 {
	width: 100%;
	font-size: 14px;
	text-align: left;
}

.tbe-vertical-lv2 > tbody > tr,
.tbe-vertical-lv2 > tbody > tr > th,
.tbe-vertical-lv2 > tbody > tr > td {
	padding: 10px 15px;
	border-width: 1px;
	border-color: #e5e5e5;
	vertical-align: top;
}

.tbe-vertical-lv2 > tbody > tr > th {
	width: 9em;
	background:#f5f5f6;
	font-weight: bold;
	text-align: left;
}

.tbe-header-fix > tbody > tr > th {
	width: 10em;
}

/* -------------------------------------------------------------------- */
/*
ページャーのリスト

ページ送りのリストを表示

Markup:
<div class="bg-default">
	<div class="list-pagenation-set">
		<ul class="list-horizon-default">
			<li><a href="#">前へ</a></li>
			<li>・・・</li>
			<li><a href="#">9</a></li>
			<li>l</li>
			<li><a href="#">10</a></li>
			<li>l</li>
			<li><a href="#">11</a></li>
			<li>l</li>
			<li><a href="#">12</a></li>
			<li>l</li>
			<li><a href="#">13</a></li>
			<li>・・・</li>
			<li><a href="#">次へ</a></li>
		</ul>
	</div>
</div>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */


.list-pagenation-set > h2 {
	display: inline-block;
	margin-right: 15px;
}

.list-pagenation-set > .list-horizon-default {
	float: right;
}

.list-pagenation-set > h2 > strong {
	font-size: 18px;
	padding-right: 15px;
}

.list-horizon-selection {
	margin-top: -7px;
	margin-left: -9px;
}

.list-horizon-selection > li {
	margin-top: 7px;
	padding-left: 10px;
}

.list-horizon-selection > li {
	float: left;
	vertical-align: middle;
}

.ttl-lv2-size {
	margin-top: -20px;
}

.ttl-lv2-large {
	font-weight: bolder;
	font-size: xx-large;
	color: #FF0000;
}

.ttl-lv2-small {
	font-weight: lighter;
	font-size: small;
}

/* -------------------------------------------------------------------- */
/*
面接予約ページの見出し幅固定のためのスタイル。

Markup:
<a href="http://mop/pc/interview.php" target="_blank">面接予約ページを参照</a>

Styleguide 9.1
*/
/* -------------------------------------------------------------------- */

.tbe-horizon > thead > tr > .tbe-horizon-wid35 {
	width: 35%;
}

/* -------------------------------------------------------------------- */
/*
応募情報入力画面のアコーディオン内のリストにテーブル風のスタイル

Markup:
<ul class="list-info-wrap">
	<li class="list-info-item">
		<p class="list-info-ttl">title1</p>
		<p>content1</p>
	</li>
	<li>
		<p class="list-info-ttl">title2</p>
		<p>content2</p>
	</li>
</ul>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

.list-info-wrap {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e5e5e5;
}

.list-info-item {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #e5e5e5;
	display: table;
	width: 100%;
}

.list-info-item > p {
	padding: 10px;
	display: table-cell;
}

.list-info-ttl {
	width: 6em;
	font-weight: bold;
	background-color: #f5f5f6;
}

/* -------------------------------------------------------------------- */
/*
アコーディオンに付随する注意事項テキストのスタイル

Markup:
<a href="http://mop/pc/info-input-1.php" target="_blank">応募情報入力ページを参照</a>

Styleguide 3.1
*/
/* -------------------------------------------------------------------- */

.txt-notice-outer {
	position: relative;
}
.catch-box-slider-thumb > li:hover {
	cursor: pointer;
}

.txt-notice {
	font-size: 16px;
	height: 1.5em;
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}

.txt-notice-small {
	font-weight: bold;
	font-size: 85%;
	margin-left: 10px;
}

.txt-notice-rightspace {
	padding-right: 50px;
}

/* -------------------------------------------------------------------- */
/*
前の要素との大きな余白

Markup:
<div class="content-top-space">
	<div>cテキスト</div>
	<div>テキスト</div>
</div>

Styleguide 1.1
*/
/* -------------------------------------------------------------------- */

.content-top-space {
	margin-top: 80px;
}

/* -------------------------------------------------------------------- */
/*
ellipsisが、アコーディオンに適用される場合でアイコンに被らないで字切りする

Markup:
<a href="http://mop/pc/info-input-1.php" target="_blank">応募情報入力ページを参照</a>

Styleguide 10.1
*/
/* -------------------------------------------------------------------- */

.ellipsis-icn-space {
	padding-right: 35px;
}

/* cf */
.list-info-item:after {
	content: "";
	display: block;
	clear: both;
}

/* -------------------------------------------------------------------- */
/*
非活性テキストスタイル

Markup:
<a href="" class="inactive">テキスト</a>

Styleguide 3.1
*/
/* -------------------------------------------------------------------- */

.inactive {
	color: #cccccc;
}

/* -------------------------------------------------------------------- */
/*
プルダウン

Markup:
<div class="fm-select">
	<select>
		<option value="デフォルト">デフォルト</option>
		<option value="">カスタム１</option>
		<option value="">カスタム２</option>
	</select>
</div>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-select {
	position: relative;
	top: -1px;
	display: inline-block;
	height: 2em;
	line-height: 2;
	border-style: solid;
	border-width: 1px;
	border-color: #b3b4bb;
	background-color: #ffffff;
	/*background-image: url(/pc/img/fm-select.png);*/
	background-repeat: no-repeat;
	background-position: 90% center;
	padding-right: 20px;
	vertical-align: middle;
	overflow: hidden;
/*--MOP_G-1264--*/
}

.fm-select > select {
	height: 100%;
	width: 170%;
	background-color: transparent;
	border-style: none;
	outline-style: none;
	padding-left: 5px;
	cursor: pointer;
	-webkit-appearance: none;
}
.fm-select > select::-ms-expand {
	display: none;
}

/* -------------------------------------------------------------------- */
/*
チェックボックス

ステート：is-non-activeで非活性

Markup:
<div class="list-horizon-selection-outer">
	<ul class="list-horizon-selection">
		<li><input type="checkbox" class="fm-checkbox" id="requirements-checkbox-01"><label for="requirements-checkbox-01">普通自動車免許取得</label></li>
		<li><input type="checkbox" class="fm-checkbox" id="requirements-checkbox-02"><label for="requirements-checkbox-02">調理師免許取得</label></li>
		<li><input type="checkbox" class="fm-checkbox is-non-active" id="requirements-checkbox-03"><label for="requirements-checkbox-03"><span class="list-horizon-selection-cuff">深夜時間帯（22時以降）は<br>18歳未満不可</span></label></li>
	</ul>
</div>

Styleguide 7.1
*/
/* -------------------------------------------------------------------- */

.fm-checkbox.is-non-active + label {
	color: #b3b4bb;
}

.fm-checkbox.is-non-active + label:before {
	background-color: #b3b4bb;
}

/* -------------------------------------------------------------------- */
/*
リストに選択枠が設けられている場合

Markup:
<div class="list-display-frame-outer">
	<ul class="list-horizon-default list-display-frame">
		<li>
			<input type="checkbox" checked="checked" class="fm-checkbox" id="date-checkbox-01">
			<label for="date-checkbox-01">アシストカフェ</label>
		</li>
	</ul>
</div>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */

.list-display-frame-outer {
	height:300px;
	overflow: auto;
	border-width: 1px;
	border-style: solid;
	border-color: #d9dadd;
	border-radius: 6px;
}

.list-display-frame > li {
	width: 23%;
	display: inline-block;
	margin-bottom: 10px;
	padding-top: 2px;
	padding-left: 10px;
	position: relative;
	vertical-align: top;
}

.list-display-frame > li .start-aligned {
	padding-left: 30px;
	display: inline-block;
}

.list-display-frame > li > label:before {
	position: absolute;
	top: 0;
	left: 10px;
}


.btn-link-choose {
	display: inline-block;
	padding-right: 10px;
	vertical-align: top;
}




/*
ats/pc/account-1.php
フロレフ解除
*/
.list-display-frame:after {
	content: "";
	display: block;
	clear: both;
}

/* ieバグ */
.tbe-horizon th {
	text-align: left;
}

/*
#			Modal
------------------
Modalのスタイルを定義します。
*/

/* -------------------------------------------------------------------- */
/*
モーダルのスタイル定義

Markup:
<div class=".sg-modal"></div>

Styleguide 8.1
*/
/* -------------------------------------------------------------------- */
.sg-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}
.sg-modal.is-show {
	display: block;
}
.sg-modal.is-show .sg-modal-content {
	display: inline-block;
}
.sg-modal-layout-outer {
	position: relative;
	overflow: auto;
	height: 100%;
	z-index: 105;
}
.sg-modal-layout {
	display: table;
	width: 100%;
	height: 100%;
}
.sg-modal-layout-inner {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	padding: 20px;
	text-align: center;
}
.sg-modal-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #373a46;
	z-index: 101;
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.sg-modal-content {
	display: none;
	position: relative;
	max-width: 100%;
	max-height: 100%;
	min-width: 650px;
	z-index: 102;
	text-align: left;
}
.sg-modal-content-full {
	width: 100%;
}
.sg-modal-content-large {
	width: 80%;
}

.ml90 {margin-left: 90px;}

/* -----------------------
/pc/interview.php
----------------------- */

/* モーダルの余白設定 */
.confirmation-reservation {
	padding: 10px;
}
/* モーダルのthの幅設定 */
.confirmation-reservation th {
	width: 200px;
}

/* -------------------------------------------------------------------- */
/*

曜日テーブル

tableにtbe-weekクラスを付与してください<br>
・罫線の指定
・文字の中央寄せ
・セルの高さをpaddingで設定

Markup:
<table class="tbe-week">
	<tbody>
		<tr>
			<th>月</th>
			<th>火</th>
			<th>水</th>
			<th>木</th>
			<th>金</th>
			<th>土</th>
			<th>日</th>
			<th>祝</th>
		</tr>
		<tr>
			<td>◯</td>
			<td>◯</td>
			<td>◯</td>
			<td>◯</td>
			<td>◯</td>
			<td>◯</td>
			<td>×</td>
			<td>×</td>
		</tr>
	</tbody>
</table>

Styleguide 9.1

*/
/* -------------------------------------------------------------------- */

.tbe-week {
	width: 100%;
	border-collapse:collapse;
}
.tbe-week > tbody > tr > th {
	padding: 10px 0;
	text-align: center;
	border: solid 1px #d9dadd;
}
.tbe-week > tbody > tr > td {
	padding: 10px 0;
	text-align: center;
	border: solid 1px #d9dadd;
}

/* -------------------------------------------------------------------- */
/*
静的コンテンツ用スタイル

Markup:
<div class="static-box">
	<section class="content-wrap">
		<header class="content-header content-header-default">
			<h2 class="ttl-lv1 bg-secondary">404エラー</h2>
		</header>
		<p class="ttl-lv2">ページが見つかりません。</p>
		<div>
			<a href="/">トップページ</a>
		</div>
	</section>
</div>

Styleguide 99.9
*/
/* -------------------------------------------------------------------- */
.static-box {
	max-width: 800px;
	margin: 100px auto;
}
/* -------------------------------------------------------------------- */
/*

エラー枠

Markup:
<dl class="warning-index">
	<dt>エラー</dt>
	<dd>
		<div>
			<div><span>入力内容に誤りがあります。</span><span>[1件]</span></div>
			<div>
				<ul class="warning-list">
					<li><a href="#">氏名かなに使用できるのは全角ひらがなです。</a></li>
					<li><a href="#">メールアドレスが入力されていません</a></li>
				</ul>
			</div>
		</div>
	</dd>
</dl>

Styleguide 9.1

*/
/* -------------------------------------------------------------------- */

.warning-index + * {
	margin-top: 15px;
}
.warning-index {
	background-color: #f24454;
	border-style: solid;
	border-width: 2px;
	border-color: #f24454;
	padding-top: 0;
	display: table;
	width: 100%;
}
.warning-index > * {
	display: table-cell;
	vertical-align: middle;
}
.warning-index > dt {
	color: #ffffff;
	padding: 20px;
	font-size: 15px;
	width: 160px;
}

.warning-index > dt:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	position: static;
	margin-right: 5px;
	margin-top: -2px;
	vertical-align: middle;
	/*background: url(/pc/img/icn-exclamation-white.png) no-repeat 0 0;*/
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
.warning-index > dd {
	color: #f24454;
	padding: 5px 20px;
	overflow: hidden;
	background-color: #feecee;
}
.warning-index > dd header + * {
	padding-left: 1em;
}
.warning-list > li {
	padding-left: 1em;
	position: relative;
}
.warning-list > li:before {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: #f24454;
	position: absolute;
	left: 1px;
	top: 7px;
}
.warning-list > li > a {
	color: #f24454;
	text-decoration: underline;
}
.warning-list > li > a:hover {
	text-decoration: none;
}
.work-same-content-img-inner > img.image-length-same {
	width: 100%;
	height: 100%;
}
.work-same-content-img-inner > img.image-vertically-long {
	width: 100%;
	height: auto;
}
.work-same-content-img-inner > img.image-oblong {
	width: auto;
	height: 100%;
}
/*
JS ContainerImage用class
*/
img.is-containerimage-square {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}
img.is-containerimage-vertical {
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}
img.is-containerimage-horizontal {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.tbe-horizon > thead > tr > .shoplist-pref {
	width: 3em;
	padding-right: 0;
}
.tbe-horizon > tbody > tr > .shoplist-pref-name {
	vertical-align: top;
}
.tbe-horizon > thead > tr > .shoplist-area {
	width: 6em;
}


.areasearch > dt {
	font-weight: bold;
	float: left;
	margin-right: 18px;
}
.areasearch > dd {
	overflow: hidden;
	margin-left: 96px;
}
.areasearch > dd+dd {
	margin-top: 10px;
}

.areasearch-content > dt {
	float: left;
	margin-right: 6px;
}
.areasearch-content > dd {
	display: inline-block;
}
.areasearch-content > dd + dd {
	border-left: 1px solid  #7B7B86;
	padding-left: 8px;
	margin-left: 6px;
}
.list-horizon-bar > li {
	white-space: nowrap;
}

.grid-table__list {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 17px;
}
.grid-table__list:first-child {
	margin-top: -17px;
}

/*３列行*/
.grid-table__list--3col {
	display: table-row;
}

.grid-table__list--3col:after { /*rowクリアフィックス*/
    content:" ";
    display:block;
    clear:both;
}

.grid-table__list--3col > li {
	display: table-cell;
	table-layout:fixed;
	width: 33%;
	min-width: 33%;
	padding-right: 1em;
}

.grid-table__list .fm-checkbox + label:before {
	display: block;
	float: left;
}

#rhp-interview-reserve a:hover{
	text-decoration: none;
}

#rhp-interview-reserve .container {
	min-width: 1080px;
}

#rhp-interview-reserve .interview_reserve_wrapper_2column {
	clear: both;
	width: 980px;
	overflow: hidden;
}

#rhp-interview-reserve .interview_reserve_left_container,
#rhp-interview-reserve .interview_reserve_right_container {
	border-style: solid;
	border-width: 1px;
	border-color: #ececee;
	border-radius: 6px;
}

#rhp-interview-reserve .interview_reserve_left_container {
	width: 280px;
	float: left;
}

#rhp-interview-reserve .interview_reserve_left_container .interview_reserve_map-link {
	padding-left: 15px;
	/*background-image: url(/pc/img/map-icn.png);*/
	background-repeat: no-repeat;
	background-position: 3px 50%;
}

#rhp-interview-reserve .interview_reserve_right_container {
	width: 660px;
	float: right;
}


#rhp-interview-reserve .interview_reserve_right_container .interview_reserve_map-link {
	display: inline-block;
	color: #324fe1;
	padding-left: 15px;
	background-image: url(/pc/img/map-icn.png);
	background-repeat: no-repeat;
	background-position: 3px 50%;
}

#rhp-interview-reserve .interview_reserve_right_container .interview_reserve_note {
	position: relative;
}

#rhp-interview-reserve .interview_reserve_right_container .interview_reserve_note span {
	font-weight: normal;
	font-size: 11px;
	position: absolute;
	right: 5px;
	bottom: 10px;
}

#rhp-interview-reserve .interview_reserve_date_list li {
	height: 60px;
	font-size: 15px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #ececee;
	line-height: 59px;
}

#rhp-interview-reserve .interview_reserve_date_list li a {
	display: block;
	font-weight: bold;
	padding-left: 25px;
	/*background-image: url(/pc/img/icn-arrow.png);*/
	background-repeat: no-repeat;
	background-position: 630px 50%;
}

#rhp-interview-reserve .interview_reserve_date_ttl {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #ececee;
	/*background-image: url(/pc/img/icn-arrow-bottom.png);*/
	background-repeat: no-repeat;
	background-position: 625px 50%;
	position: relative;
	cursor: pointer;
}

#rhp-interview-reserve .interview_reserve_date_ttl_txt{
	padding: 30px 140px 30px 25px;
}


#rhp-interview-reserve .interview_reserve_date_ttl p:after {
	content: "日程を見る";
	position: absolute;
	top: 0;
	right: 50px;
	bottom: 0;
	margin: auto;
	width: 5em;
	height: 20px;
	color: #324fe1;
}


#rhp-interview-reserve .interview_reserve_another_date_ttl {
	height: 60px;
	font-size: 15px;
	line-height: 59px;
}

#rhp-interview-reserve .interview_reserve_another_date_ttl a {
	display: block;
	font-weight: bold;
	padding-left: 25px;
	background-image: url(/pc/img/icn-arrow-bottom.png);
	background-repeat: no-repeat;
	background-position: 625px 50%;
}

#rhp-interview-reserve .interview_reserve_another_date .is-show .interview_reserve_another_date_ttl a,
#rhp-interview-reserve .interview_reserve_date .is-show .interview_reserve_date_ttl {
	/*background-image: url(/pc/img/icn-arrow-top.png);*/
	background-repeat: no-repeat;
	background-position: 625px 50%;
}

#rhp-interview-reserve .interview_reserve_date .is-show .interview_reserve_date_ttl p:after {
	content: "閉じる";
	width: 3em;
}

#rhp-interview-reserve .interview_reserve_another_date_txt {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #ececee;
}

#map_modal_wrap {
	position: fixed;
	background: rgba(55,58,70,0.6);
	z-index: 101;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	padding: 20px;
}

#map_modal_content {
	z-index: 102;
	text-align: left;
	max-width: 100%;
	max-height: 100%;
	min-width: 650px;
	background-color: #ffffff;
	margin: 0 auto;
	padding: 0;
	display: inline-block;
	position: relative;
}

#map_modal_content {
	z-index: 102;
	text-align: left;
	max-width: 100%;
	max-height: 100%;
	min-width: 650px;
	background-color: #ffffff;
	margin: 0 auto;
	padding: 0;
	border-radius: 6px;
	display: inline-block;
}

.list-same-area {
	overflow: hidden;
}

.list-same-area .list-horizon-header-largest {
	width: 220px;
}