@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; 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>
```
*/
/*!  .mod_btn05
================================================ */
.mod_btn05 { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; min-width: 80px; min-height: 34px; padding: 8px 20px; border: 1px solid rgba(0,0,0,.5); border-radius: 5px; background-image: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.06) 100%), linear-gradient(90deg, #e6e6e6 0%, #e6e6e6 100%); font-family: inherit; }
.mod_btn05 span { color: #424242; font-weight: bold; font-size: 1.4rem; line-height: 1.2; letter-spacing: .7px; }
.mod_btn05.hasIco span { display: inline-flex; align-items: center; }
.mod_btn05.hasIco span:before { flex-shrink: 0; width: 18px; height: 18px; margin-right: 3px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 18px 18px; content: ""; }
.mod_btn05.setting span:before { background-image: url(../img/common/ico_settings01.svg); }
/*
#styleguide
mod_btn05
```
<button class="mod_btn05 hasIco setting"><span>コメント必須点数</span></button>
```
*/
/*!  .mod_btn06
================================================ */
.mod_btn06 { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; min-width: 80px; min-height: 34px; padding: 8px 20px; border: 1px solid rgba(0,0,0,.5); border-radius: 5px; background-image: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.06) 100%), linear-gradient(90deg, #22c55e 0%, #22c55e 100%); font-family: inherit; }
.mod_btn06 , .mod_btn06 span { color: #fff; font-weight: bold; font-size: 1.4rem; line-height: 1.2; letter-spacing: .7px; text-decoration: none; }
/*
#styleguide
mod_btn06
```
<a class="mod_btn06" href="/projects/csv"><span>CSV出力</span></a>
```
*/
/*!  .mod_btn07
================================================ */
.mod_btn07 { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; min-width: 80px; min-height: 34px; padding: 8px 20px; border-radius: 5px; background-image: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.06) 100%), linear-gradient(90deg, #2563eb 0%, #2563eb 100%); }
.mod_btn07 , .mod_btn07 span { color: #fff; font-weight: bold; font-size: 1.4rem; line-height: 1.2; letter-spacing: .7px; text-decoration: none; }
.mod_btn07.hasIco span { display: inline-flex; align-items: center; }
.mod_btn07.hasIco span:before { flex-shrink: 0; width: 18px; height: 18px; margin-right: 3px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 18px 18px; content: ""; }
.mod_btn07.add span:before { background-image: url(../img/common/ico_add02.svg); }
/*
#styleguide
mod_btn07
```
<a class="mod_btn07 hasIco add" href="/projects/add/"><span>顧客登録</span></a>
```
*/
.mod_btn07.edit span:before { background-image: url(../img/projects/ico_edit01.svg); }
.mod_btn07.check span:before { background-image: url(../img/projects/ico_check01.svg); }
.mod_btn07.taskAlt span:before { background-image: url(../img/projects/ico_task_alt01.svg); }
button.mod_btn07 { border: 0; font-family: inherit; cursor: pointer; }
.mod_btn05.backList span:before { background-image: url(../img/projects/ico_arrow_double_left01.svg); }
a.mod_btn05 { text-decoration: none; }
/*!  .mod_btn08
   削除などの取り消せない操作
================================================ */
.mod_btn08 { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; min-width: 80px; min-height: 34px; padding: 8px 20px; border: 0; border-radius: 5px; background-image: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.06) 100%), linear-gradient(90deg, #eb100e 0%, #eb100e 100%); font-family: inherit; cursor: pointer; }
.mod_btn08 , .mod_btn08 span { color: #fff; font-weight: bold; font-size: 1.4rem; line-height: 1.2; letter-spacing: .7px; text-decoration: none; }
.mod_btn08.hasIco span { display: inline-flex; align-items: center; }
.mod_btn08.hasIco span:before { flex-shrink: 0; width: 18px; height: 18px; margin-right: 3px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 18px 18px; content: ""; }
.mod_btn08.delete span:before { background-image: url(../img/projects/ico_delete01.svg); }
/*
#styleguide
mod_btn08
```
<button type="button" class="mod_btn08 hasIco delete"><span>この顧客を削除</span></button>
```
*/
/*!  .mod_btn09
================================================ */
.mod_btn09 { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; min-width: 80px; min-height: 34px; padding: 8px 20px; border: 1px solid #2563eb; border-radius: 5px; background: #eff6ff; }
.mod_btn09 , .mod_btn09 span { color: #2563eb; font-weight: bold; font-size: 1.4rem; line-height: 1.2; letter-spacing: .7px; text-decoration: none; }
.mod_btn09.hasIco span { display: inline-flex; align-items: center; }
.mod_btn09.hasIco span:before , .mod_btn09.hasIco span:after { flex-shrink: 0; width: 18px; height: 18px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 18px 18px; }
.mod_btn09.prev span:before { margin-right: 3px; background-image: url(../img/projects/ico_arrow_left03.svg); content: ""; }
.mod_btn09.next span:after { margin-left: 3px; background-image: url(../img/projects/ico_arrow_right03.svg); content: ""; }
/*
#styleguide
mod_btn09
```
<a class="mod_btn09 hasIco next" href="#"><span>前の顧客</span></a>
```
*/
/*!  .mod_dialog01
   確認ダイアログ。hidden 属性で開閉する
================================================ */
.mod_dialog01 { display: flex; position: fixed; top: 0; left: 0; z-index: 30; box-sizing: border-box; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; background: rgba(0, 0, 0, .25); font-family: "Noto Sans JP","メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif; }
.mod_dialog01[hidden] { display: none; }
.mod_dialog01 .dialogBox { display: flex; box-sizing: border-box; flex-direction: column; gap: 30px; width: 560px; max-width: 100%; padding: 24px; border: 2px solid #24527a; border-radius: 16px; background: #fff; }
.mod_dialog01 .dialogTit { color: #24527a; font-weight: bold; font-size: 2rem; line-height: 1.2; letter-spacing: 1px; }
.mod_dialog01 .dialogTxt { color: #0e0e0e; font-weight: 500; font-size: 1.2rem; line-height: 1.4; letter-spacing: .6px; }
.mod_dialog01 .dialogBtns { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.mod_dialog01 .dialogBtns .btn { flex: 1 0 0; }
.mod_dialog01 .dialogBtns .mod_btn05 { max-width: 140px; }
.mod_dialog01 .dialogBtns .mod_btn07 , .mod_dialog01 .dialogBtns .mod_btn08 { max-width: 200px; }
/*
#styleguide
mod_dialog01
```
<div class="mod_dialog01" role="dialog" aria-modal="true" hidden>
	<div class="dialogBox">
		<p class="dialogTit">顧客情報を削除しますか？</p>
		<p class="dialogTxt">本当にこの顧客を削除してもよろしいですか？この処理は戻せません。</p>
		<div class="dialogBtns">
			<button type="button" class="btn mod_btn05"><span>キャンセル</span></button>
			<a class="btn mod_btn08" href="#"><span>削除</span></a>
		</div>
	</div>
</div>
```
*/
/*!  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>
```
*/
/*!  pager02
   スマホは .pagerSp(番号入力)、768px 以上は .pagerPc(番号を並べる)を出す
================================================ */
.mod_pager02 { font-family: "Noto Sans JP","メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif; }
.mod_pager02 .prev , .mod_pager02 .next { display: flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 10px; padding: 8px; border: 1px solid rgba(0,0,0,.2); border-radius: 5px; background: #fff; text-decoration: none; }
.mod_pager02 .prev span , .mod_pager02 .next span { color: #0e0e0e; font-weight: 500; font-size: 1.4rem; line-height: 1.2; letter-spacing: .7px; white-space: nowrap; }
.mod_pager02 .prev:before , .mod_pager02 .next:after { flex-shrink: 0; width: 17px; height: 17px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 17px 17px; content: ""; }
.mod_pager02 .prev:before { background-image: url(../img/common/ico_arrow_left02.svg); }
.mod_pager02 .next:after { background-image: url(../img/common/ico_arrow_right02.svg); }
.mod_pager02 .disabled { opacity: .4; }
.mod_pager02 .pagerPc { display: none; }
.mod_pager02 .pagerSp { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 10px; }
.mod_pager02 .pagerSp .prev span , .mod_pager02 .pagerSp .next span { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); }
.mod_pager02 .pagerSp .jump { display: flex; align-items: center; gap: 12px; }
/* デザインは左右 15px だが、3桁のページ番号が幅 50px に収まらないため詰めている */
.mod_pager02 .pagerSp .input { box-sizing: border-box; width: 50px; padding: 8px 4px; border: 1px solid rgba(0,0,0,.8); border-radius: 8px; background: #fff; color: #0e0e0e; font-family: inherit; font-size: 1.6rem; line-height: 1.4; letter-spacing: .8px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.mod_pager02 .pagerSp .input::-webkit-outer-spin-button , .mod_pager02 .pagerSp .input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.mod_pager02 .pagerSp .total { color: #0e0e0e; font-weight: 500; font-size: 1.4rem; line-height: 1.2; letter-spacing: .7px; white-space: nowrap; }
.mod_pager02 .pagerSp .mod_btn07 { min-width: 60px; border: 0; font-family: inherit; cursor: pointer; }
.mod_pager02 .pagerSp .mod_btn07:disabled { opacity: .3; cursor: default; }
@media screen and (min-width: 768px) { .mod_pager02 .pagerPc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; }  .mod_pager02 .pagerSp { display: none; }  .mod_pager02 .pagerPc .prev { padding: 8px 16px 8px 8px; }  .mod_pager02 .pagerPc .next { padding: 8px 8px 8px 16px; }  .mod_pager02 .numbers { display: flex; align-items: center; gap: 16px; }  .mod_pager02 .numbers a , .mod_pager02 .numbers span { display: block; box-sizing: border-box; min-width: 34px; padding: 8px 4px; border: 1px solid rgba(0,0,0,.2); border-radius: 5px; background: #fff; color: #000; font-weight: 500; font-size: 1.4rem; line-height: 1.2; letter-spacing: .7px; text-align: center; text-decoration: none; }  .mod_pager02 .numbers .current span { background: #2563eb; color: #fff; font-weight: bold; }  .mod_pager02 .numbers .ellipsis span { display: flex; align-items: flex-end; justify-content: center; height: 35px; padding: 0; border: 0; background: none; color: #0e0e0e; font-weight: bold; } }
/*
#styleguide
mod_pager02

pager02(app/View/Elements/pager02.ctp で出力する)

```
<nav class="mod_pager02" aria-label="ページ送り">
	<div class="pagerPc">
		<span class="prev disabled"><span>前へ</span></span>
		<ul class="numbers">
			<li class="current"><span aria-current="page">1</span></li>
			<li><a href="#">2</a></li>
			<li class="ellipsis"><span>...</span></li>
			<li><a href="#">15</a></li>
		</ul>
		<a class="next" href="#"><span>次へ</span></a>
	</div>
	<form class="pagerSp js-pagerJump" action="#" data-url="/projects/index/page:__PAGE__" data-current="1" data-count="15">
		<span class="prev disabled"><span>前へ</span></span>
		<div class="jump">
			<input type="number" class="input" name="page" value="1" min="1" max="15" aria-label="ページ番号">
			<span class="total">/ 15</span>
			<button type="submit" class="mod_btn07" disabled><span>移動</span></button>
		</div>
		<a class="next" href="#"><span>次へ</span></a>
	</form>
</nav>
```
*/
/*!  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; } }
@media screen and (max-width: 1243px) { .secSearch { position: fixed; top: 50px; left: 0; z-index: 9; box-sizing: border-box; float: none; width: 100%; margin: 0; padding: 8px 15px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.15); }  .secSearch .tit , .secSearch .txt { display: none; }  .secSearch .detail { padding: 0; border: 0; }  .secSearch .detail .btn { margin: 0; }  .secSearch button.mod_btn01 { height: 38px; padding: 0; line-height: 38px; }  .secSearch .mod_btn01.search span:before { top: 50%; margin-top: -7px; }  .secSearch + .mod_sec01 { margin-top: 0; }  body#Users.index #wrapper { padding-top: 104px; } }
/*
#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>
```
*/

/*! industryDialog 業種選択(#150 顧客編集・#139 顧客一覧の検索)
   .mod_dialog01 と組み合わせて使う。検索用(.is-search)は必須・エラーを出さない
================================================ */
.industryDialog .dialogBox { gap: 0; width: 1000px; max-height: 100%; }
.industryDialog .dialogTit { margin-bottom: 24px; font-size: 2.4rem; }
.industryDialog .industryCols { display: flex; flex: 1 1 auto; gap: 20px; min-height: 0; }
.industryDialog .majorCol { display: flex; flex-direction: column; flex-shrink: 0; gap: 8px; width: 220px; padding-right: 20px; border-right: 2px solid rgba(0, 0, 0, .2); }
.industryDialog .colTit { display: flex; align-items: center; gap: 4px; padding: 8px 0; color: #24527a; font-weight: 500; font-size: 1.6rem; line-height: 1.2; letter-spacing: .8px; }
.industryDialog .minorCol .colTit { padding: 4px 0 0; font-size: 1.4rem; }
.industryDialog .required { flex-shrink: 0; white-space: nowrap; padding: 3px 6px; border-radius: 9999px; background: #eb100e; color: #fff; font-weight: bold; font-size: 1.2rem; line-height: 1.2; letter-spacing: 0; }
.industryDialog .majorList { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 2px solid rgba(0, 0, 0, .2); border-radius: 5px; }
.industryDialog .majorItem , .industryDialog .minorItem { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 8px; border-radius: 6px; color: #424242; font-weight: 500; font-size: 1.4rem; line-height: 1.2; letter-spacing: .4px; cursor: pointer; }
.industryDialog .majorItem:hover , .industryDialog .minorItem:hover { background: #eff6ff; }
.industryDialog input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: #2563eb; cursor: pointer; }
.industryDialog .minorCol { display: flex; flex: 1 1 0; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.industryDialog .colNote { color: #424242; font-weight: 500; font-size: 1.2rem; line-height: 1.2; letter-spacing: .6px; }
.industryDialog .minorGroups { display: flex; flex-direction: column; gap: 16px; height: 413px; max-height: calc(100vh - 300px); padding-right: 10px; overflow-y: auto; }
.industryDialog .minorGroup { display: flex; flex-direction: column; gap: 8px; }
.industryDialog .minorGroup[hidden] , .industryDialog .groupBody[hidden] , .industryDialog .dialogError[hidden] { display: none; }
.industryDialog .groupHead { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 42px; padding: 8px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; background: #fff; color: #424242; font-family: inherit; font-weight: 500; font-size: 1.4rem; line-height: 1.2; letter-spacing: .4px; text-align: left; cursor: pointer; }
.industryDialog .groupHead:after { flex-shrink: 0; width: 24px; height: 24px; margin-left: auto; background: url(../img/common/ico_arrow_down01.svg) no-repeat 50% 50% / 24px 24px; content: ""; }
.industryDialog .is-open .groupHead:after { transform: rotate(180deg); }
.industryDialog .groupCount { padding: 4px 8px; border-radius: 9999px; background: #24527a; color: #fff; font-size: 1.2rem; line-height: 1.2; letter-spacing: .4px; }
.industryDialog .groupError { display: none; align-items: center; gap: 4px; color: #bd0000; font-size: 1.2rem; line-height: 1.4; letter-spacing: .6px; }
.industryDialog .groupError:before , .industryDialog .dialogError:before { flex-shrink: 0; width: 16px; height: 16px; background: url(../img/common/ico_error01.svg) no-repeat 50% 50% / 16px 16px; content: ""; }
.industryDialog .is-error .groupHead { background: rgba(255, 0, 0, .1); }
.industryDialog .is-error .groupCount { display: none; }
.industryDialog .is-error .groupError { display: inline-flex; }
.industryDialog .groupBody { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 8px; }
.industryDialog .dialogFoot { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.industryDialog .dialogError { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-top: 4px; color: #bd0000; font-weight: 500; font-size: 1.2rem; line-height: 1.4; letter-spacing: .6px; }
.industryDialog .dialogBtns .btn { max-width: none; }
.industryDialog .js-industry-decide:disabled { opacity: .3; cursor: default; }
/* 検索用(#139)。小カテゴリを選んでいない大カテゴリは件数を出さない。ボタンは右に寄せる */
.industryDialog.is-search .groupCount:empty { display: none; }
.industryDialog.is-search .dialogBtns .btn { flex: 0 0 auto; }
.industryDialog.is-search .dialogBtns .mod_btn05 { width: 140px; }
.industryDialog.is-search .dialogBtns .mod_btn07 { width: 200px; }