@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/*!  .mod_btn01
================================================ */
button.mod_btn01 { padding: 12px 0 11px; }
@media screen and (min-width: 600px) { button.mod_btn01 { padding: 8px 0 7px; } }
.mod_btn01 { display: block; box-sizing: border-box; width: 100%; padding: 8px 0 7px; border: 1px solid #1a4fa0; border-radius: 4px; background: -webkit-linear-gradient(top, #1a4fa0 0%, #164388 100%); background: linear-gradient(to bottom, #1a4fa0 0%, #164388 100%); text-align: center; }
.mod_btn01 span , .mod_btn01 a { position: relative; color: #fff; font-weight: bold; font-size: 1.5rem; text-decoration: none; }
.mod_btn01.hasIco span:before { position: absolute; background-repeat: no-repeat; background-size: 100%; content: ""; }
.mod_btn01.search span:before { top: 4px; right: -27px; width: 13px; height: 13px; background-image: url(../img/common/ico_search01.png); }
.mod_btn01.add { padding: 0; }
.mod_btn01.add a { display: block; box-sizing: border-box; height: 100%; padding: 8px 0 7px; color: #fff; }
.mod_btn01.add a span { position: relative; }
.mod_btn01.add a span:before { position: absolute; top: 3px; right: -28px; width: 15px; height: 13px; background: url(../img/common/ico_add01.png) no-repeat; background-size: 100%; content: ""; }
@media screen and (min-width: 600px) { .mod_btn01 { text-align: left; -webkit-transition: opacity .3s; transition: opacity .3s; }  .mod_btn01 span , .mod_btn01 a { display: block; box-sizing: border-box; padding: 0 0 0 20px; }  .mod_btn01:hover { opacity: .7; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }  .mod_btn01.hasIco span:before { right: 15px; }  .mod_btn01.search span:before { top: 2px; right: 15px; width: 15px; height: 15px; }  .mod_btn01.add a span:before { top: 2px; right: 15px; width: 19px; height: 17px; } }
/*
#styleguide
mod_btn01
```
<button class="mod_btn01"><span>アカウント検索</span></button>
<button class="mod_btn01 hasIco search"><span>アカウント検索</span></button>
<p class="mod_btn01 hasIco add"><a href="/users/add/"><span>アカウント登録</span></a></p>
```
*/
/*!  .mod_btn02
================================================ */
.mod_btn02 { display: block; box-sizing: border-box; width: 100%; padding: 12px 0 11px; border: 1px solid #1a4fa0; border-radius: 4px; background: #fff; text-align: center; }
.mod_btn02 span , .mod_btn02 a { position: relative; color: #1a4fa0; font-weight: bold; font-size: 1.5rem; text-decoration: none; }
@media screen and (min-width: 600px) { .mod_btn02 { padding: 8px 0 7px; text-align: center; -webkit-transition: opacity .3s; transition: opacity .3s; }  .mod_btn02 span , .mod_btn02 a { display: block; box-sizing: border-box; }  .mod_btn02:hover { opacity: .7; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } }
/*
#styleguide
mod_btn02
```
<button class="mod_btn02"><span>キャンセル</span></button>
```
*/
/*!  .mod_btn03
================================================ */
.mod_btn03 { width: 45px; height: 23px; }
.mod_btn03 a { display: block; box-sizing: border-box; height: 100%; line-height: 1; padding-top: 4px; border-radius: 4px; background: #444; text-align: center; }
.mod_btn03 span { color: #fff; font-weight: bold; font-size: 1.1rem; }
@media screen and (min-width: 600px) { .mod_btn03 { width: 58px; height: 32px; }  .mod_btn03 a { padding-top: 10px; -webkit-transition: opacity .3s; transition: opacity .3s; }  .mod_btn03 a:hover { opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }  .mod_btn03 span { font-size: 1.4rem; } }
/*
#styleguide
mod_btn03
```
<button class="mod_btn03"><span>編集</span></button>
```
*/
/*!  pager
================================================ */
.mod_pager01 { display: block; position: relative; margin: -4px; padding: 0; font-size: 0; text-align: center; }
.mod_pager01 li { display: inline-block; box-sizing: border-box; width: 32px; height: 32px; margin: 4px; }
.mod_pager01 li a , .mod_pager01 li span { display: block; box-sizing: border-box; height: 100%; line-height: 1; padding: 10px 0 7px; border: 1px solid #cfcfcf; color: #444; font-size: 1.3rem; text-decoration: none; }
.mod_pager01 .previous , .mod_pager01 .next { position: absolute; }
.mod_pager01 .previous { left: 0; }
.mod_pager01 .next { right: 0; }
.mod_pager01 .current { background: #1a4fa0; color: #fff; }
.mod_pager01 .current span { color: #fff; }
@media screen and (min-width: 600px) { .mod_pager01 li a , .mod_pager01 li span { padding: 9px 0 7px; font-size: 1.4rem; }  .mod_pager01 li a:hover { background: #1a4fa0; color: #fff; }  .mod_pager01 .previous , .mod_pager01 .next { position: relative; }  .mod_pager01 .previous { margin-right: 26px; }  .mod_pager01 .next { margin-left: 26px; } }
/*
#styleguide
mod_pager01

pager

```
<div class="mod_pager01">
	<ul>
		<li class="previous"><a href="#">＜</a></li>
		<li class="current"><span>1</span></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li class="next"><a href="#">＞</a></li>
	</ul>
</div>
```
*/
/*!  tit
================================================ */
.mod_tit01 { color: #1a4fa0; font-weight: bold; font-size: 1.9rem; }
@media screen and (min-width: 600px) { .mod_tit01 { font-size: 2.2rem; } }
/*
#styleguide
mod_tit01

mod_tit01

```
<p class="mod_tit01">mod_tit01</p>
```
*/
/*!  sec
================================================ */
.mod_sec01 { position: relative; }
.mod_sec01 + .mod_sec01 { margin-top: 16px; }
.mod_sec01 .detail { padding: 14px 14px 10px; border: 1px solid #cfcfcf; border-radius: 3px; }
.mod_sec01 .detail .btn { margin-bottom: 8px; }
.mod_sec01 .detail .txt { text-align: center; }
@media screen and (min-width: 600px) { .mod_sec01 { float: left; width: 484px; }  .mod_sec01 + .mod_sec01 { margin: 0; }  .mod_sec01:nth-child(2n) { float: right; }  .mod_sec01 .tit { margin-bottom: 10px; }  .mod_sec01 .detail { overflow: hidden; padding: 19px 0 19px 19px; }  .mod_sec01 .detail .btn { float: left; width: 176px; margin: 0 14px 0 0; }  .mod_sec01 .detail .txt { float: left; padding: 9px 0 0; text-align: left; } }
/*
#styleguide
mod_sec01
```
<div class="secWrap cf">
	<section class="mod_sec01">
		<p class="tit mod_tit01">アカウント検索</p>
		<div class="detail">
			<button id="js-search01-open" class="btn mod_btn01 hasIco search"><span>アカウント検索</span></button>
			<p class="txt">アカウントの検索はこちらから行います。</p>
		</div>
	</section>
	<section class="mod_sec01">
		<p class="tit mod_tit01">アカウント登録</p>
		<div class="detail">
			<p class="btn mod_btn01 hasIco add"><a href="/users/add/"><span>アカウント登録</span></a></p>
			<p class="txt">アカウントの登録はこちらから行います。</p>
		</div>
	</section>
</div>
```
*/
/*!  mod_form01
================================================ */
.mod_form01 { margin: 0 -15px; padding: 12px 15px 15px; background: #f0f0f0; }
.mod_form01 .tit { margin-bottom: 5px; }
.mod_form01 .tableWrap { box-sizing: border-box; margin: 0 0 15px; padding: 15px; background: #fff; box-shadow: 0 1px 6px 0 rgba(68, 68, 68, .1); }
.mod_form01 .table01 { display: block; }
.mod_form01 .table01 tbody , .mod_form01 .table01 tr , .mod_form01 .table01 th , .mod_form01 .table01 td { display: block; }
.mod_form01 .table01 tr { margin-bottom: 20px; }
.mod_form01 .table01 tr:last-child { margin-bottom: 0; }
.mod_form01 .table01 th { margin-bottom: 5px; font-weight: bold; }
.mod_form01 .table01 td { overflow: hidden; }
.mod_form01 .required , .mod_form01 .optional { display: inline-block; position: relative; top: -2px; box-sizing: border-box; width: 32px; height: 17px; line-height: 1; margin-left: 9px; border-radius: 2px; font-weight: bold; font-size: 1.0rem; text-align: center; }
.mod_form01 .required { padding: 4px 0 0; background: #1a4fa0; color: #fff; }
.mod_form01 .optional { padding: 3px 0 0; border: 1px solid #444; }
.mod_form01 input[type="text"] , .mod_form01 input[type="password"] , .mod_form01 input[type="number"] , .mod_form01 textarea { display: block; box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #cfcfcf; border-radius: 0; font-size: 1.6rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_form01 input[type="text"] , .mod_form01 input[type="password"] , .mod_form01 input[type="number"] { height: 40px; }
.mod_form01 textarea { height: 120px; }
.mod_form01 select { box-sizing: border-box; width: 100%; height: 40px; border: 1px solid #1a4fa0; border-radius: 4px; background: -webkit-linear-gradient(top, #fff, #e6e6e6); background: linear-gradient(to bottom, #fff, #e6e6e6); }
.mod_form01 label { display: block; float: left; box-sizing: border-box; width: auto; min-width: 86px; line-height: 1; margin: 0 0 9px; padding: 0 10px 0 0; font-size: 1.4rem; }
.mod_form01 label input { margin: 0 5px 0 0; }
.mod_form01 label.file { box-sizing: border-box; width: 100px; height: 40px; line-height: 1.36; padding: 7px 0 0; border-radius: 4px; background: #414141; color: #fff; font-weight: bold; font-size: 1.1rem; text-align: center; }
.mod_form01 label.file input { display: none; }
.mod_form01 .areaSubmit { padding: 0 15px; }
.mod_form01 .areaSubmit .btn + .btn { margin: 10px 0 0; }
@media screen and (min-width: 600px) { .mod_form01 { margin: 0; padding: 26px 30px 30px; }  .mod_form01 .tit { margin-bottom: 25px; }  .mod_form01 .tableWrap { margin-bottom: 30px; padding: 10px 30px 5px; }  .mod_form01 .table01 { width: 850px; }  .mod_form01 .table01 tbody { display: table-row-group; }  .mod_form01 .table01 tr { display: table-row; }  .mod_form01 .table01 th , .mod_form01 .table01 td { display: table-cell; box-sizing: border-box; }  .mod_form01 .table01 th { position: relative; width: 172px; padding: 30px 0 0; }  .mod_form01 .table01 td { width: 678px; padding: 20px 0 20px 30px; }  .mod_form01 .table01 .check th , .mod_form01 .table01 .radio th { padding-top: 18px; }  .mod_form01 .table01 .check th span , .mod_form01 .table01 .radio th span { top: 17px; }  .mod_form01 .required , .mod_form01 .optional { position: absolute; top: 29px; right: 0; width: 40px; height: 22px; font-size: 1.2rem; }  .mod_form01 .required { padding: 5px 0 0; }  .mod_form01 .optional { padding: 4px 0 0; }  .mod_form01 textarea { max-width: 648px; height: 100px; }  .mod_form01 select { width: auto; min-width: 320px; padding: 0 20px 0 10px; }  .mod_form01 label { min-width: auto; padding-right: 25px; font-size: 1.6rem; }  .mod_form01 label input { vertical-align: middle; }  .mod_form01 label.file { width: 160px; height: 40px; padding-top: 10px; font-size: 1.4rem; cursor: pointer; -webkit-transition: opacity .3s; transition: opacity .3s; }  .mod_form01 label.file:hover { opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }  .mod_form01 .areaSubmit { text-align: center; }  .mod_form01 .areaSubmit .btn { display: inline-block; width: 150px; text-align: center; }  .mod_form01 .areaSubmit .btn span { padding-left: 0; }  .mod_form01 .areaSubmit .btn + .btn { margin: 0 0 0 26px; } }
/*
#styleguide
mod_form01
```
<section class="mod_form01">
	<form action="">
		<h2 class="tit mod_tit01">顧客登録</h2>
		<div class="tableWrap">
			<table class="table01">
				<tr>
					<th>テキスト<span class="required">必須</span></th>
					<td><input type="text"></td>
				</tr>
				<tr>
					<th>テキストエリア<span class="optional">任意</span></th>
					<td><textarea></textarea></td>
				</tr>
				<tr>
					<th>画像<span class="required">必須</span></th>
					<td><label for="file_photo" class="file">画像を<br class="viewSp">アップロード<input type="file" id="file_photo"></label></td>
				</tr>
				<tr>
					<th>セレクトボックス<span class="required">必須</span></th>
					<td>
						<select>
							<option value="">あああ</option>
							<option value="">あああ</option>
							<option value="">あああ</option>
							<option value="">あああ</option>
							<option value="">あああ</option>
						</select>
					</td>
				</tr>
				<tr class="check">
					<th>チェックボックス<span class="required">必須</span></th>
					<td><label><input type="checkbox" checked>項目</label><label><input type="checkbox">項目</label><label><input type="checkbox">項目</label><label><input type="checkbox">項目</label></td>
				</tr>
				<tr class="radio">
					<th>オプションボタン<span class="required">必須</span></th>
					<td><label><input type="radio" name="radio">項目</label><label><input type="radio" name="radio">項目</label><label><input type="radio" name="radio">項目</label><label><input type="radio" name="radio">項目</label></td>
				</tr>
			</table>
		</div>
		<div class="areaSubmit">
			<button class="btn mod_btn01" type="submit"><span>保存</span></button>
			<button class="btn mod_btn02" type="reset"><span>キャンセル</span></button>
		</div>
	</form>
</section>
```
*/
/*!  mod_search01
================================================ */
.mod_search01 { display: none; position: absolute; top: 40px; left: 0; z-index: 100; width: 100%; padding: 0; border-top: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; background: #fff; }
.mod_search01 .head { position: relative; padding: 9px 15px 7px; border-bottom: 1px solid #dfdfdf; background: #f0f0f0; box-shadow: 0 0 6px 0 rgba(179, 179, 179, .4); }
.mod_search01 .head .close { position: absolute; top: 12px; right: 15px; width: 20px; height: 20px; overflow: hidden; background: url(../img/common/ico_close01.png) no-repeat; background-size: 100%; text-indent: 150%; white-space: nowrap; }
.mod_search01 .tableWrap { padding: 15px 30px 0; }
.mod_search01 .table01 tbody , .mod_search01 .table01 tr , .mod_search01 .table01 th , .mod_search01 .table01 td { display: block; }
.mod_search01 .table01 th { margin-bottom: 7px; font-weight: bold; }
.mod_search01 .table01 td { margin-bottom: 18px; }
.mod_search01 input[type="text"], .mod_search01 input[type="number"] { display: block; box-sizing: border-box; width: 100%; height: 40px; padding: 10px; border: 1px solid #808080; border-radius: 4px; font-size: 1.6rem; }
.mod_search01 select { box-sizing: border-box; width: 100%; height: 40px; padding: 10px; border: 1px solid #1a4fa0; border-radius: 4px; background: -webkit-linear-gradient(top, #fff, #e6e6e6); background: linear-gradient(to bottom, #fff, #e6e6e6); }
.mod_search01 .date select { width: 225px; }
.mod_search01 .date .txt { display: inline-block; box-sizing: border-box; height: 40px; line-height: 1; padding: 15px 0 0 10px; font-size: 1.2rem; }
.mod_search01 .selectWrap + .selectWrap { margin: 10px 0 0; }
.mod_search01 .sales input { display: inline-block; width: 225px; }
.mod_search01 .sales .txt { display: inline-block; box-sizing: border-box; height: 40px; line-height: 1; padding: 15px 0 0 10px; font-size: 1.2rem; }
.mod_search01 .inputWrap + .inputWrap { margin: 10px 0 0; }
.mod_search01 .areaSubmit { padding: 15px 30px 14px; background: #f0f0f0; }
.mod_search01 .areaSubmit .btn + .btn { margin: 10px 0 0; }
@media screen and (min-width: 600px) { .mod_search01 { position: absolute; top: 100px; left: 50%; box-sizing: border-box; width: 1000px; margin: 0; padding: 0; border: 1px solid #cfcfcf; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }  .mod_search01 .head { padding: 18px 30px 17px; }  .mod_search01 .head .close { top: 19px; right: 19px; width: 31px; height: 31px; cursor: pointer; -webkit-transition: opacity .3s; transition: opacity .3s; }  .mod_search01 .head .close:hover { opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }  .mod_search01 .tableWrap { padding: 30px 89px; }  .mod_search01 .table01 tbody { display: table-row-group; }  .mod_search01 .table01 tr { display: table-row; }  .mod_search01 .table01 th , .mod_search01 .table01 td { display: table-cell; padding: 10px 0; vertical-align: middle; }  .mod_search01 .table01 th { width: 147px; }  .mod_search01 .table01 td { width: 680px; }  .mod_search01 .w140 { width: 140px; }  .mod_search01 .w190 { width: 190px; }  .mod_search01 .w630 { width: 630px; }  .mod_search01 input[type="text"] { width: 630px; }  .mod_search01 select, .mod_search01 input[type="number"] { width: 280px; }  .mod_search01 .date select { width: 280px; }  .mod_search01 .date .txt { padding: 14px 0 0 21px; font-weight: bold; font-size: 1.4rem; }  .mod_search01 .selectWrap { display: inline-block; }  .mod_search01 .selectWrap + .selectWrap { margin: 0 0 0 15px; }  .mod_search01 .sales input { width: 280px; }  .mod_search01 .sales .txt { padding: 14px 0 0 21px; font-weight: bold; font-size: 1.4rem; }  .mod_search01 .inputWrap { display: inline-block; }  .mod_search01 .inputWrap + .inputWrap { margin: 0 0 0 15px; }  .mod_search01 .areaSubmit { padding: 30px 0; text-align: center; }  .mod_search01 .areaSubmit .btn  { display: inline-block; width: 180px; } .mod_search01 .searchBtn .btn  { display: inline-block; width: 180px; text-align: center; padding: 3px 0; }  .mod_search01 .areaSubmit .btn + .btn { width: 150px; margin: 0 0 0 25px; } }
/*
#styleguide
mod_search01
デフォルトはdisplay: none;
スタイルガイド用にdisplay:block;追記
```
<section id="js-search01" class="mod_search01" style="display:block;">
	<header class="head">
		<h2 class="tit mod_tit01">顧客検索</h2>
		<p id="js-search01-close" class="close">閉じる</p>
	</header>
	<form action="">
		<div class="tableWrap">
			<table class="table01">
				<tr>
					<th>顧客名</th>
					<td><input type="text"></td>
				</tr>
				<tr>
					<th>評価</th>
					<td>
						<select class="w140">
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>所属部署</th>
					<td>
						<select class="w190">
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>業種</th>
					<td>
						<select class="w190">
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>エリア</th>
					<td>
						<select>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>エリアフリーワード</th>
					<td><input type="text"></td>
				</tr>
				<tr class="date">
					<th>一般公開日</th>
					<td>
						<div class="selectWrap">
							<select>
								<option value="">---</option>
								<option value="">---</option>
								<option value="">---</option>
								<option value="">---</option>
								<option value="">---</option>
							</select><span class="txt">から</span>
						</div>
						<div class="selectWrap">
							<select>
								<option value="">---</option>
								<option value="">---</option>
								<option value="">---</option>
								<option value="">---</option>
								<option value="">---</option>
							</select><span class="txt">まで</span>
						</div>
					</td>
				</tr>
				<tr class="sales">
					<th>売上</th>
					<td>
						<div class="inputWrap">
							<input type="text"><span class="txt">から</span>
						</div>
						<div class="inputWrap">
							<input type="text">
						</div>
					</td>
				</tr>
				<tr>
					<th>営業担当者</th>
					<td>
						<select>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>ディレクター</th>
					<td>
						<select>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>デザイナー</th>
					<td>
						<select>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>コーダー</th>
					<td>
						<select>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>プラン</th>
					<td>
						<select>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
							<option value="">---</option>
						</select>
					</td>
				</tr>
			</table>
		</div>
		<div class="areaSubmit">
			<button type="submit" class="btn mod_btn01"><span>検索条件を変更する</span></button>
			<button type="reset" class="btn mod_btn02"><span>キャンセル</span></button>
		</div>
	</form>
</section>
```
*/

/*# sourceMappingURL=maps/modules.css.map */