@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/*!  box
================================================ */
.mod_box01 { position: relative; }
.mod_box01:before { display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 0; height: 0; border-width: 140px 140px 0 0; border-style: solid; border-color: #e4f3f9 transparent transparent transparent; content: ""; }
@media (min-width: 640px), print { .mod_box01:before { border-width: 280px 280px 0 0; } }
/*
#styleguide
mod_box01

左上三角ブルー角ボックス

```
<div class="mod_box01">
	テキストテキストテキスト<br>
	テキストテキストテキスト<br>
	テキストテキストテキスト<br>
	テキストテキストテキスト<br>
	テキストテキストテキスト<br>
	テキストテキストテキスト<br>
	テキストテキストテキスト<br>
	テキストテキストテキスト<br>
	テキストテキストテキスト<br>
</div>
```
*/
.mod_box02 { position: relative; }
.mod_box02:after { display: inline-block; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-width: 0 0 9px 9px; border-style: solid; border-color: transparent transparent #9b9b9c transparent; content: ""; transition: all .3s ease 0s; }
@media (min-width: 640px), print { .mod_box02:after { border-width: 0 0 18px 18px; }  .mod_box02:hover:after { border-color: transparent transparent #13449d transparent; } }
/*
#styleguide
mod_box02

三角アイコン付きリンクボックス

```
<ul class="topicsList">
	<li class="list"><a href="#" class="mod_box02" data-mh="topicsList01">
		<div class="img"><img src="http://placehold.jp/690x456.png" alt="タイトルタイトルタイトル"></div>
		<div class="txtBox">
			<p class="cat">製品紹介</p>
			<p class="txt">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
		</div>
	</a></li>
	<li class="list"><a href="#" class="mod_box02" data-mh="topicsList01">
		<div class="img"><img src="http://placehold.jp/690x456.png" alt="タイトルタイトルタイトル"></div>
		<div class="txtBox">
			<p class="cat">お知らせ・ご案内</p>
			<p class="txt">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
		</div>
	</a></li>
</ul>
```
*/
.mod_inner01 { margin: 0 15px; }
@media (min-width: 640px), print { .mod_inner01 { width: 1000px; margin: 0 auto; } }
/*
#styleguide
mod_inner01

コンテンツ幅box

```
<section class="mod_inner01">
	<h3 class="mod_tit04 pink01">商品の店頭化</h3>
	<ul class="mod_ulList01 pink01">
		<li>商品の取扱い折衝</li>
		<li>売場の獲得</li>
		<li>本部商談内容の店舗への落とし込み</li>
		<li>企画、販売の実現化</li>
		<li>大陳、山積販売の実施折衝</li>
	</ul>
</section>
```
*/
.mod_bnrBox01 { padding: 45px 0 50px; background: #e4ecef; }
@media (min-width: 640px), print { .mod_bnrBox01 { padding: 70px 0; background: #e4ecef url(../img/common/bg_bnrBox01.png) right top no-repeat; } }
/*
#styleguide
mod_bnrBox01

ページ下部のバナーボックス

```
<div class="mod_bnrBox01">
	<div class="mod_inner01">
		<ul class="bnrList">
			<li><a href="/company">
				<div class="txtBox">
					<h2 class="tit">会社概要<span class="sub roboto">About</span></h2>
					<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
				<div class="img"><img src="/img/home/img_bnr01.png" alt="会社概要"></div>
			</a></li>
			<li><a href="/product">
				<div class="txtBox">
					<h2 class="tit">製品案内<span class="sub roboto">About</span></h2>
					<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
				<div class="img"><img src="/img/home/img_bnr02.png" alt="会社概要"></div>
			</a></li>
			<li><a href="/faq">
				<div class="txtBox">
					<h2 class="tit">よくあるご質問<span class="sub roboto">Q&amp;A</span></h2>
					<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
				<div class="img"><img src="/img/home/img_bnr03.png" alt="よくあるご質問"></div>
			</a></li>
			<li><a href="/agencylist">
				<div class="txtBox">
					<h2 class="tit">代理店一覧<span class="sub roboto">Agency</span></h2>
					<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
				<div class="img"><img src="/img/home/img_bnr04.png" alt="代理店一覧"></div>
			</a></li>
		</ul>
	</div>
</div>
```
*/
@media (max-width: 639px) {
	.scrollBox { overflow: auto; white-space: nowrap; margin-bottom: 20px; }
	.scrollBox::-webkit-scrollbar { height: 5px; }
	.scrollBox::-webkit-scrollbar-track { background: #F1F1F1; }
	.scrollBox::-webkit-scrollbar-thumb  { background: #BCBCBC; }
	#product .scrollBox > *:first-child { width: 100% !important; }
}
/*
#styleguide
scrollBox

ボックススクロール

```
<div class="scrollBox">
<table class="mod_table01">
	<tr>
		<th>社名</th>
		<td>ワケンビーテック株式会社（旧・ワケン電子株式会社）</td>
	</tr>
	<tr>
		<th>本社</th>
		<td>〒606-8171 京都市左京区一乗寺西水干町17番地<br>
			<p class="note">※製品・サービスに関するお問い合わせは下記の各事業所にお願いたします。</p>
		</td>
	</tr>
</table>
</div>
```
*/
.mod_table01 { border-top: 1px solid #dfdede; }
.mod_table01 tr { border-bottom: 1px solid #dfdede; }
.mod_table01 th , .mod_table01 td { vertical-align: top; }
.mod_table01 th { width: 75px; padding: 12px 10px; color: #13449d; font-weight: 700; }
.mod_table01 td { padding: 12px 0; }
.bg_blue01 { background: #e4f3f9 !important; }
.bg_gray01 { background: #f0f0f0 !important; }
#topics #Details .mod_table01 th, #topics #Details .mod_table01 td, #news #Details .mod_table01 th, #news #Details .mod_table01 td { text-align: center; padding: 12px 10px; border: 1px solid #dfdede; vertical-align: middle; }
#topics #Details .mod_table01 thead th, #news #Details .mod_table01 thead th { background: #e4f3f9; }
#topics #Details .mod_table01 thead + tbody th, #news #Details .mod_table01 thead + tbody th { background: #f0f0f0; }
@media (max-width: 639px) {
	#topics #Details .scrollBox > *:first-child, #news #Details .scrollBox > *:first-child { min-width: 100% !important; }
}
@media (min-width: 640px), print {
	.mod_table01 th { width: 170px; line-height: 1.7; padding: 18px 20px 18px 2px; }  .mod_table01 td { line-height: 1.7; padding: 18px 0; }
	#topics #Details .mod_table01 th, #news #Details .mod_table01 th, #topics #Details .mod_table01 td, #news #Details .mod_table01 td { padding: 15px 20px; }
}
/*
#styleguide
mod_table01

テーブル①

```
<table class="mod_table02">
	<tr>
		<th>社名</th>
		<td>ワケンビーテック株式会社（旧・ワケン電子株式会社）</td>
	</tr>
	<tr>
		<th>本社</th>
		<td>〒606-8171 京都市左京区一乗寺西水干町17番地<br>
			<p class="note">※製品・サービスに関するお問い合わせは下記の各事業所にお願いたします。</p>
		</td>
	</tr>
</table>
```
*/
.mod_table02 th , .mod_table02 td { vertical-align: middle; border: 1px solid #dfdede; line-height: 1.5; font-size:clamp( 13px, calc( 11.584905660377359px + 0.37735849056603776vw ), 14px ); }
.mod_table02 thead th { text-align: center; }
.mod_table02 th { padding: 12px 10px; font-weight: 700; background: #e4f3f9; }
.mod_table02 td { padding: 12px 10px; }
@media (min-width: 640px), print { .mod_table02 th, .mod_table02 td { padding: 8px 10px; } }
@media (min-width: 639px) {
	.mod_table02 .p_tableCatalog01 { width: 90px; }
	.mod_table02 .p_tableCatalog02 { width: 115px; }
	.mod_table02 .p_tableCatalog03 { width: 140px; }
	.mod_table02 .p_tableCapacity01 { width: 80px; }
	.mod_table02 .p_tableCapacity02 { width: 135px; }
	.mod_table02 .p_tableCapacity03 { width: 160px; }
	.mod_table02 .p_tableCapacity04 { width: 200px; }
	.mod_table02 .p_tablePrice { width: 120px; }
}
/*
#styleguide
mod_table01

テーブル①

```
<table class="mod_table01">
	<tr>
		<th>社名</th>
		<td>ワケンビーテック株式会社（旧・ワケン電子株式会社）</td>
	</tr>
	<tr>
		<th>本社</th>
		<td>〒606-8171 京都市左京区一乗寺西水干町17番地<br>
			<p class="note">※製品・サービスに関するお問い合わせは下記の各事業所にお願いたします。</p>
		</td>
	</tr>
</table>
```
*/
@media (max-width: 639px) {
	.scrollTable { overflow: auto; white-space: nowrap; margin-bottom: 20px; }
	.scrollTable::-webkit-scrollbar { height: 5px; }
	.scrollTable::-webkit-scrollbar-track { background: #F1F1F1; }
	.scrollTable::-webkit-scrollbar-thumb  { background: #BCBCBC; }
	.scrollTable > table { width: 100% !important; }
	.scrollTable > .mod_table02{ position: relative; }
}
/*
#styleguide
scrollTable

テーブルスクロール

```
<div class="scrollTable">
<table class="mod_table01">
	<tr>
		<th>社名</th>
		<td>ワケンビーテック株式会社（旧・ワケン電子株式会社）</td>
	</tr>
	<tr>
		<th>本社</th>
		<td>〒606-8171 京都市左京区一乗寺西水干町17番地<br>
			<p class="note">※製品・サービスに関するお問い合わせは下記の各事業所にお願いたします。</p>
		</td>
	</tr>
</table>
</div>
```
*/
.mod_card01 { overflow: hidden; margin: 0 0 -17px; padding-bottom: 2px; }
.mod_card01 .card { float: left; width: 48%; width: calc(50% - 8px); margin: 0 0 15px; border: 1px solid #dfdede; background-color: #fff; box-shadow: 0 2px 0 0 rgba(171, 195, 204, .5); overflow: hidden; }
.mod_card01 .card:nth-child(even) { float: right; }
.mod_card01 .card .cardIn > a { display: block; position: relative; }
.mod_card01 .card .cardIn > a:after { display: inline-block; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-width: 0 0 9px 9px; border-style: solid; border-color: transparent transparent #9b9b9c; }
.mod_card01 .card .cardIn > a .img { display: table-cell; width: 640px; height: 108px; text-align: center; vertical-align: middle; }
.mod_card01 .card .cardIn > a .img.noimg { background-color: #ebebeb; }
.mod_card01 .card .cardIn > a .img img { width: auto; max-width: 100%; height: auto; max-height: 100%; }
.mod_card01 .card .cardIn > a .txtBox { padding: 15px 15px 18px; border-top: 1px solid #dfdede; }
.mod_card01 .card .cardIn > a .txtBox .tit { margin: 0 0 6px; font-weight: 700; }
.mod_card01 .card .cardIn > a .txtBox .txt { font-size: 19.2px; font-size: 1.2rem; }
.mod_card01 .card .catList { padding: 15px; background: #fafafa; }
.mod_card01 .card .catList .label { line-height: 1.3; margin: 0 0 3px; padding: 2px 10px 3px; background: #9b9b9c; color: #fff; font-size: 16px; font-size: 1rem; text-align: center; }
.mod_card01 .card .catList dd { line-height: 1.64; font-size: 17.6px; font-size: 1.1rem; }
.mod_card01 .card .catList dd+.label { margin-top: 8px; }
.mod_card01 .card .catList .catLink>li { display: inline; }
.mod_card01 .card .catList .catLink>li+li:before { display: inline-block; margin: 0 2px; content: "／"; }
.mod_card01 .card .catList .makerLink a, .mod_card01 .card .catList .catLink a { color: #13449d; }
@media (max-width: 639px) {
	.mod_card01.slider .card { margin: 0 5px !important; }
}
@media (min-width: 640px), print {
	.mod_card01 { margin: 0 0 -20px; }
	.mod_card01 .card { width: 318px; margin: 0 0 20px 20px; border: 1px solid #dfdede; box-shadow: 0 2px 0 0 rgba(171, 195, 204, .5); }
	.mod_card01 .card:nth-child(even) { float: left; }
	.mod_card01 .card:first-child, .mod_card01 .card:nth-child(3n+1) { margin-left: 0; }
	.mod_card01 .card .cardIn > a { text-decoration: none; }
	.mod_card01 .card .cardIn > a:after { border-width: 0 0 18px 18px; }
	.mod_card01 .card .cardIn > a .img { height: 212px; }
	.mod_card01 .card .cardIn > a .img img { max-height: 212px; max-width: 318px; }
	.mod_card01 .card .cardIn > a .txtBox { padding: 15px 20px 25px; transition: all .3s ease 0; }
	.mod_card01 .card .cardIn > a .txtBox .tit { margin: 0 0 10px; font-size: 1.8rem; }
	.mod_card01 .card .cardIn > a .txtBox .txt { line-height: 1.6; font-size: 1.5rem; }
	.mod_card01 .card .cardIn > a:hover:after { border-color: transparent transparent #13449d; }
	.mod_card01 .card .cardIn > a:hover .txtBox { color: #13449d; }
	.mod_card01 .card .catList { padding: 20px 20px 15px; }
	.mod_card01 .card .catList .label { float: left; clear: both; width: 92px; height: 23px; line-height: 23px; overflow: hidden; margin: 0 0 10px; padding: 0; font-size: 1.2rem; }
	.mod_card01 .card .catList dd { min-height: 23px; line-height: 1.7; margin: 0 0 10px 100px; font-size: 1.3rem; }
	.mod_card01 .card .catList dd+.label { margin-top: 0; }
	.mod_card01 .card .catList .catLink>li { display: inline; }
	.mod_card01 .card .catList .catLink>li+li:before { display: inline-block; margin: 0 2px; content: "／"; }
	.mod_card01 .card .catList .makerLink a, .mod_card01 .card .catList .catLink a { color: #13449d; }
}

/*
#styleguide
mod_card01

商品カードリスト

```
<ul class="mod_card01">
	<li class="card" data-mh="related-group">
		<div class="cardIn">
			<a href="#" class="mod_box02">
				<div class="img"><img src="https://placehold.jp/150x150.png" alt="タイトルタイトルタイトル"></div>
				<div class="txtBox">
					<h3 class="tit">Ag+goods! 銀イオン抗菌・水質安定剤</h3>
					<p class="txt">加湿水の水質維持に、銀イオンによる抗菌・安定剤をどうぞ。</p>
				</div>
			</a>
		</div>
		<dl class="catList">
			<dt class="label">メーカー</dt>
			<dd>
				<p class="makerLink"><a href="#">ワケンビーテック</a></p>
			</dd>
			<dt class="label">関連カテゴリ</dt>
			<dd>
				<ul class="catLink">
					<li><a href="#">大型インキュベーター</a></li>
					<li><a href="#">大型培養・高密度培養</a></li>
				</ul>
			</dd>
		</dl>
	</li>
</ul>
```
*/

.mod_card02 .list{background-color:#fff;-webkit-box-shadow:0 2px 0 0 rgba(171,195,204,.5);box-shadow:0 2px 0 0 rgba(171,195,204,.5)}
.mod_card02 .list:nth-child(n+2){margin-top:20px}
.mod_card02 .link{display:block}
.mod_card02 .img img{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mod_card02 .txtBox{position:relative;padding:20px 20px 25px;overflow:hidden;border:1px solid #dfdede;border-top:none}
.mod_card02 .txtBox::before{content:'';position:absolute;top:0;left:0;width:0;height:0;border-style:solid;border-width:110px 110px 0 0;border-color:#f3f8fa transparent transparent transparent}
.mod_card02 .txtBox::after{content:'';position:absolute;right:4px;bottom:4px;width:0;height:0;border-style:solid;border-width:0 0 9px 9px;border-color:transparent transparent #9b9b9c transparent}
.mod_card02 .tit{position:relative;font-size:1.5rem;font-weight:700}
@media (min-width:640px),print{
.mod_card02{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}
.mod_card02 .list{width:calc(50% - 20px)}
.mod_card02 .list:nth-child(n+2){margin-top:0}
.mod_card02 .list:nth-child(n+3){margin-top:40px}
.mod_card02 .link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}
.mod_card02 .link:hover{color:#13449d;text-decoration:none}
.mod_card02 .link:hover .txtBox::after{border-bottom-color:#13449d}
.mod_card02 .img img{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mod_card02 .txtBox{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:25px 25px 30px}
.mod_card02 .txtBox::before{border-width:160px 160px 0 0}
.mod_card02 .txtBox::after{border-width:0 0 18px 18px;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}
.mod_card02 .tit{font-size:2.2rem;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}
}

/*
#styleguide
mod_card02

カードリスト②

```
<ul class="mod_card02">
	<li class="list">
		<a href="#" class="link">
			<div class="img">
				<img src="<?php echo $theme_url; ?>/img/common/img_noimage690x456.png" alt="No Image">
			</div>
			<div class="txtBox">
				<p class="tit">タイトルタイトルタイトル</p>
			</div>
		</a>
	</li>
</ul>
```
*/
.mod_card03 .item{border-right:1px solid #dfdede}
.mod_card03 .link{display:block;padding:0 10px}
.mod_card03 .catList{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -5px 3px 0}
.mod_card03 .catList .cat{margin:0 5px 5px 0;padding:2px 12px 3px;line-height:1.35;color:#fff;font-size:1rem;background-color:#9b9b9c}
.mod_card03 .tit{line-height:1.65;color:#13449d;font-size:1.4rem;font-weight:700}
@media (min-width:640px),print{
.mod_card03 .item{width:250px;-webkit-box-sizing:border-box;box-sizing:border-box}
.mod_card03 .link{padding:0 20px}
.mod_card03 .link:hover{text-decoration:none}
.mod_card03 .link:hover .tit{text-decoration:underline}
.mod_card03 .catList{margin:0 -8px 3px 0}
.mod_card03 .catList .cat{margin:0 8px 8px 0;padding:3px 20px 4px;font-size:1.2rem}
.mod_card03 .tit{font-size:1.5rem}
}
/*
#styleguide
mod_card03

問題解決事例カードリスト（スライダー前提）

```
<div class="mod_card03">
	<div class="item"><a href="#" class="link" data-mh="solution-group1">
	<ul class="catList">
		<li class="cat">カテゴリー02</li>
	</ul>
	<p class="tit">タイトルが入ります。タイトルが入ります。⑤</p>
</a></div>
<div class="mod_card03">
	<div class="item"><a href="#" class="link" data-mh="solution-group1">
	<ul class="catList">
		<li class="cat">カテゴリー02</li>
	</ul>
	<p class="tit">タイトルが入ります。タイトルが入ります。⑤</p>
</a></div>
<div class="mod_card03">
	<div class="item"><a href="#" class="link" data-mh="solution-group1">
	<ul class="catList">
		<li class="cat">カテゴリー02</li>
	</ul>
	<p class="tit">タイトルが入ります。タイトルが入ります。⑤</p>
</a></div>
<div class="mod_card03">
	<div class="item"><a href="#" class="link" data-mh="solution-group1">
	<ul class="catList">
		<li class="cat">カテゴリー02</li>
	</ul>
	<p class="tit">タイトルが入ります。タイトルが入ります。⑤</p>
</a></div>
```
*/


/*
#styleguide
mod_table01

PCのみ自動で４列表示

```
<div class="mod_row-pc4">
	<ul>
		<li>サンプルテキスト</li>
		<li>サンプルテキスト</li>
		<li>サンプルテキスト</li>
		<li>サンプルテキスト</li>
		<li>サンプルテキスト</li>
		<li>サンプルテキスト</li>
	</ul>
</div>
```
*/
/*!  tit
================================================ */
.mod_tit01 { position: relative; line-height: 1.4; margin: 0 auto 30px; padding: 0 0 15px; /* padding: 22px 0 15px; */ color: #13449d; font-weight: 700; font-size: 40px; font-size: clamp( 25px, calc( 12.264150943396226px + 3.3962264150943398vw ), 34px ); text-align: center; }
.mod_tit01:before { display: inline-block; position: absolute; top: 0; right: 0; left: 0; width: 1px; height: 15px; margin: 0 auto; background: #13449d; content: none; transform: rotate(40deg); }
.mod_tit01:after { display: inline-block; position: absolute; right: 0; bottom: 0; left: 0; width: 33px; height: 2px; margin: 0 auto; background: #dfdede; content: ""; }
.mod_tit01 .roboto { display: block; line-height: 1.0; padding: 5px 0 0; font-size: 48px; font-size: clamp( 30px, calc( 1.6981132075471699px + 7.547169811320755vw ), 50px ); }
@media (min-width: 640px), print { .mod_tit01 { margin: 0 auto 40px; padding: 0 0 20px; /* padding: 30px 0 20px; */ font-size: clamp( 25px, calc( 12.264150943396226px + 3.3962264150943398vw ), 34px ); }  .mod_tit01:before { height: 20px; }  .mod_tit01:after { width: 50px; height: 3px; }  .mod_tit01 .roboto { font-size: clamp( 30px, calc( 1.6981132075471699px + 7.547169811320755vw ), 50px ); } }
/*
#styleguide
mod_tit01

タイトル

```
<h2 class="mod_tit01"><span class="roboto">TOPICS</span></h2>
```
*/
.mod_tit02 { line-height: 1.6; margin: 0 0 15px; padding: 1px 0 1px 10px; border-left: 3px solid #13449d; font-weight: 700; font-size: 24px; font-size: clamp( 15px, calc( 5.09433962264151px + 2.6415094339622645vw ), 22px ); }
@media (min-width: 640px), print { .mod_tit02 { line-height: 1.6; margin: 0 0 30px; padding: 0 0 3px 20px; border-left: 4px solid #13449d; font-size: clamp( 15px, calc( 5.09433962264151px + 2.6415094339622645vw ), 22px ); } }
.mod_tit02:nth-of-type(n+2) { margin-top:clamp( 15px, calc( -6.226415094339622px + 5.660377358490567vw ), 30px ); }

/*
#styleguide
mod_tit02

タイトル②

```
<h3 class="mod_tit02">テクニカルセンター（大阪センター）</h3>
```
*/
.mod_tit03 { line-height: 1.6; margin: 20px 0 15px; padding: 6px 0; border-top: 1px solid #13449d; border-bottom: 1px solid #13449d; font-weight: 700; font-size: 30px; font-size: clamp( 15px, calc( 7.9245283018867925px + 1.8867924528301887vw ), 20px ); }
@media (min-width: 640px), print { .mod_tit03 { line-height: 1.6; margin: 40px 0 25px; padding: 10px 0; font-size: clamp( 15px, calc( 7.9245283018867925px + 1.8867924528301887vw ), 20px ); border-top: 2px solid #13449d; border-bottom: 2px solid #13449d;  } }
/*
#styleguide
mod_tit03

タイトル②

```
<h3 class="mod_tit03">テクニカルセンター（大阪センター）</h3>
```
*/
.mod_tit04 { line-height: 1.6; margin: 20px 0 15px; padding: 6px 10px; background: #13449d; color: #fff; font-weight: 500; font-size: 26px; font-size: clamp( 13px, calc( 7.339622641509434px + 1.509433962264151vw ), 17px ); }
@media (min-width: 640px), print { .mod_tit04 { line-height: 1.5; margin: 30px 0 20px; padding: 5px 15px 6px; font-size: clamp( 13px, calc( 7.339622641509434px + 1.509433962264151vw ), 17px ); } }
/*
#styleguide
mod_tit04

タイトル②

```
<h3 class="mod_tit04">テクニカルセンター（大阪センター）</h3>
```
*/
.mod_tit05 { line-height: 1.5; margin: 15px 0 10px; padding: 0 0 0 10px; position: relative; font-weight: 700; font-size: 26px; font-size: clamp( 13px, calc( 7.339622641509434px + 1.509433962264151vw ), 17px ); }
.mod_tit05:before { content: ''; display: inline-block; position: absolute; top: 3px; left: 0; width: 5px; height: 14px; background: #13449d; }
@media (min-width: 640px), print { .mod_tit05 { line-height: 1.5; margin: 25px 0 15px; padding: 0 0 0 12px; font-size: 17px; font-size: clamp( 13px, calc( 7.339622641509434px + 1.509433962264151vw ), 17px ); } .mod_tit05:before { top: 4px; width: 6px; height: 18px; } }
/*
#styleguide
mod_tit04

タイトル②

```
<h3 class="mod_tit04">テクニカルセンター（大阪センター）</h3>
```
*/
/*!  button
================================================ */
.mod_btn01 { width: 275px; max-width: 100%; margin: 0 auto; }
.mod_btn01 a , .mod_btn01 button { display: block; position: relative; box-sizing: border-box; width: auto; height: 50px; line-height: 46px; overflow: hidden; padding: 0; border: 2px solid #13449d; background: #fff; color: #13449d; font-weight: 700; font-size: 22.4px; font-size: 1.4rem; text-align: center; vertical-align: middle; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_btn01 a:after , .mod_btn01 button:after { display: inline-block; position: absolute; top: 0; right: 15px; bottom: 0; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_btn01.return:before { display: inline-block; position: absolute; top: 0; bottom: 0; left: 15px; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow02.png) center center no-repeat; background-size: cover; content: ""; }
.mod_btn01.return:after { content: none; }
.mod_btn01 button { width: 100%; }
.mod_btn01.line2 a { height: 68px; line-height: 23px; padding-top: 8px; }
.mod_btn01.mail a:before, .mod_btn01.mail button:before { display: inline-block; width: 20px; height: 14px; margin: 0 10px -2px 0; background: url(../img/common/ico_mail02.png) center center no-repeat; background-size: cover; content: ""; }
@media (min-width: 640px), print { .mod_btn01 { width: 280px; }  .mod_btn01 a , .mod_btn01 button { height: 60px; line-height: 57px; border: 2px solid #13449d; font-size: 1.6rem; transition: all .3s ease 0s; }  .mod_btn01 a:hover , .mod_btn01 button:hover { background: #13449d; color: #fff !important; text-decoration: none; }  .mod_btn01 a:after , .mod_btn01 button:after { font-size: 1.8rem; }  .mod_btn01 button { width: 100%; }  .mod_btn01.line2 a { height: 80px; line-height: 26px; padding-top: 12px; } .mod_btn01.mail a::before, .mod_btn01.mail button::before { margin: 0 10px -1px 0; transition: all .3s ease 0s; }.mod_btn01.mail a:hover::before, .mod_btn01.mail button:hover::before { background: url(../img/common/ico_mail01.png) center center no-repeat; background-size: cover; } }
/*
#styleguide
mod_btn01

```
<p class="mod_btn01"><a href="#">mod_btn01</a></p>
```
*/
.mod_btn02 { width: 290px; max-width: 100%; margin: 0 auto; }
.mod_btn02 a , .mod_btn02 button { display: block; position: relative; box-sizing: border-box; height: 50px; line-height: 50px; overflow: hidden; padding: 0; border-radius: 25px; background: #d82a34; color: #fff !important; font-weight: 700; font-size: 20.8px; font-size: 1.3rem; text-align: center; vertical-align: middle; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.pcr_inq a {background: #13449d; margin-bottom: 20px;}
.rec_info a {background: #008080; margin-bottom: 20px;}
.mod_btn02 button { width: 100%; border: none; }
.mod_btn02.contact a:before , .mod_btn02.contact button:before { display: inline-block; width: 20px; height: 14px; margin: 0 10px -2px 0; background: url(../img/common/ico_mail01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_btn02.download a , .mod_btn02.download button { background: #13449d; }
.mod_btn02.download a:before , .mod_btn02.download button:before { display: inline-block; width: 20px; height: 20px; margin: 0 10px -5px 0; background: url(../img/common/ico_pdf01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_btn02.submit a , .mod_btn02.submit button { font-size: 25.6px; font-size: 1.6rem; text-align: center; }
.mod_btn02.contact.nav a { line-height: 1.7; height: 60px; border-radius: 30px; padding: 8px 0; }
.mod_btn02 .smTxt { display: block; font-size: 1.1rem; }
@media (min-width: 640px), print { .mod_btn02 { width: 240px; }  .mod_btn02 a , .mod_btn02 button { height: 46px; line-height: 44px; border-radius: 23px; font-size: 1.7rem; transition: all .3s ease 0s; }  .mod_btn02 a:hover , .mod_btn02 button:hover { background: #ba0e16; text-decoration: none; }  .mod_btn02 button { width: 100%; }  .mod_btn02.contact a:before , .mod_btn02.contact button:before { margin: 0 10px -1px 0; }  .mod_btn02.download a:before , .mod_btn02.download button:before { margin: 0 10px -2px 0; }  .mod_btn02.download a:hover , .mod_btn02.download button:hover { background: #0e358b; text-decoration: none; } .pcr_inq a {font-size: 14px;} .pcr_inq a:hover {background: #0e358b;} .mod_btn02.contact.nav a { height: 64px; border-radius: 32px; } .mod_btn02 .smTxt { font-size: 1.2rem;} }
/*
#styleguide
mod_btn02

お問い合わせ系塗りつぶしボタン

```
<p class="mod_btn02 contact"><a href="#">お問い合わせ</a></p>
<p class="mod_btn02 download"><a href="#">お問い合わせ</a></p>
<p class="mod_btn02"><button type="submit" name="btn_confirm" value="">内容を確認する</button></p>
```
*/
.mod_btn03 { width: 275px; max-width: 100%; margin: 0 auto; }
.mod_btn03 a { display: block; position: relative; box-sizing: border-box; width: auto; height: 50px; line-height: 46px; overflow: hidden; padding: 0; border: 2px solid #dfdede; background: #fff; color: #000; font-weight: 700; font-size: 22.4px; font-size: 1.4rem; text-align: center; vertical-align: middle; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_btn03 a:after { display: inline-block; position: absolute; top: 0; right: 15px; bottom: 0; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow01.png) center center no-repeat; background-size: cover; content: ""; transform: rotate(90deg); }
.mod_btn03.line2 a { height: 68px; line-height: 23px; padding-top: 8px; }
.mod_btn03.is-upper a:after { -webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg); }
@media (min-width: 640px), print { .mod_btn03 { width: 280px; }  .mod_btn03 a { height: 60px; line-height: 57px; border: 2px solid #dfdede; font-size: 1.6rem; transition: all .3s ease 0s; }  .mod_btn03 a:hover { border: 2px solid #13449d; color: #13449d; text-decoration: none; }  .mod_btn03 a:after { font-size: 1.8rem; }  .mod_btn03.line2 a { height: 80px; line-height: 26px; padding-top: 12px; } }
/*
#styleguide
mod_btn03

```
<p class="mod_btn03"><a href="#">mod_btn03</a></p>
```
*/
/*
#styleguide
mod_btn02

お問い合わせ系塗りつぶしボタン

```
<p class="mod_btn02 contact"><a href="#">お問い合わせ</a></p>
<p class="mod_btn02 download"><a href="#">お問い合わせ</a></p>
<p class="mod_btn02"><button type="submit" name="btn_confirm" value="">内容を確認する</button></p>
```
*/
.mod_noteBtn01 { width: 275px; max-width: 100%; margin: 0 auto; }
.mod_noteBtn01 a , .mod_noteBtn01 button { display: table-cell; position: relative; box-sizing: border-box; width: 271px; height: 68px; line-height: 23px; padding-top: 8px; overflow: hidden; padding: 0; border: 2px solid #13449d; background: #fff; color: #13449d; font-weight: 700; font-size: 22.4px; font-size: 1.4rem; text-align: center; vertical-align: middle; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_noteBtn01 a:after , .mod_noteBtn01 button:after { display: inline-block; position: absolute; top: 0; right: 15px; bottom: 0; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_noteBtn01.return:before { display: inline-block; position: absolute; top: 0; bottom: 0; left: 15px; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow02.png) center center no-repeat; background-size: cover; content: ""; }
.mod_noteBtn01.return:after { content: none; }
.mod_noteBtn01 button { width: 100%; }
@media (min-width: 640px), print {
	.mod_noteBtn01 { width: 440px; }
	.mod_noteBtn01 a , .mod_noteBtn01 button { width: 436px; height: 60px; line-height: 57px; border: 2px solid #13449d; font-size: 1.6rem; transition: all .3s ease 0s; }
	.mod_noteBtn01 a:hover , .mod_noteBtn01 button:hover { background: #13449d; color: #fff; text-decoration: none; }
	.mod_noteBtn01 a:after , .mod_noteBtn01 button:after { font-size: 1.8rem; }
	.mod_noteBtn01 button { width: 100%; }
	.mod_noteBtn01.line2 a { height: 80px; line-height: 26px; padding-top: 12px; }
}
/*
#styleguide
mod_noteBtn01

```
<p class="mod_noteBtn01"><a href="#">mod_noteBtn01</a></p>
```
*/
.mod_moreBtn01 { width: 200px; max-width: 100%; margin: 0 auto; }
.mod_moreBtn01 a, .mod_moreBtn01 button {
	display: block;
	position: relative;
	height: 44px;
	padding: 0;
	line-height: 44px;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
	color: #fff !important;
	font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 20.8px;
	font-size: 1.3rem;
	outline: none;
	background: #13449d;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.mod_moreBtn01 button { width: 100%; border: none; }
.mod_moreBtn01 a:before, .mod_moreBtn01 button:before, .mod_moreBtn01 a:after, .mod_moreBtn01 button:after {
	content: '';
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	width: 2px;
	height: 12px;
	margin: auto 0;
	background-color: #fff;
	box-sizing: border-box;
}
.mod_moreBtn01 a:after, .mod_moreBtn01 button:after {
	transform: rotate(90deg);
}
.mod_moreBtn01.disable {
	display: none;
}
@media (min-width: 640px), print {
	.mod_moreBtn01 { width: 220px; }
	.mod_moreBtn01 a, .mod_moreBtn01 button { height: 50px; line-height: 47px; font-size: 1.6rem; transition: all .3s ease 0s; }
	.mod_moreBtn01 button { width: 100%; padding-bottom: 2px; }
	.mod_moreBtn01 a:before, .mod_moreBtn01 button:before, .mod_moreBtn01 a:after, .mod_moreBtn01 button:after {
		right: 25px;
		height: 14px;
	}
	.mod_moreBtn01 a:hover , .mod_moreBtn01 button:hover { background: #0e358b; text-decoration: none; }
}
.js-more-content { display: none; }
/*
#styleguide
moreBtn01

```
<p class="moreBtn01"><button class="js-more-trigger">mod_btn03</button></p>
<div class="js-more-content">コンテンツ</div>
```
*/
/*!  list
================================================ */
.mod_olList01 { margin-top: 15px; counter-reset: olist01; }
.mod_olList01 > li { position: relative; padding-left: 1.5em; counter-increment: olist01; }
.mod_olList01 > li:before { display: inline-block; position: absolute; left: 0; color: #13449d; font-weight: 700; vertical-align: baseline; content: counter(olist01) "."; }
.mod_olList01 > li + li { margin-top: 15px; }
@media (min-width: 640px), print { .mod_olList01 > li { line-height: 1.8; } .mod_olList01 > li + li { margin-top: 4px; } }
/*
#styleguide
mod_olList01

ナンバリング.

```
<ul class="mod_olList01">
	<li>いろはにほへと</li>
	<li>ちりぬるをわか</li>
	<li>よたれそつね</li>
</ul>
```
*/
.mod_ulList01 { margin-top: 15px; /*&.inline {  > li {  margin-right: .7em; display: inline-block; } } &.mg_none {  > li {  + li {  margin-top: 0; } } }*/ }
.mod_ulList01 > li { position: relative; padding-left: 15px; }
.mod_ulList01 > li:before { display: inline-block; position: absolute; top: 9px; left: 2px; width: 4px; height: 4px; border-radius: 2px; background: #13449d; content: ""; }
.mod_ulList01 > li + li { margin-top: 15px; }
@media (min-width: 640px), print { .mod_ulList01 { /*&.inline {  > li {  margin-right: .7em; } }*/ }  .mod_ulList01 > li { padding-left: 14px; }  .mod_ulList01 > li:before { width: 5px; height: 5px; border-radius: 2.5px; }  .mod_ulList01 > li + li { margin-top: 6px; } }
/*
#styleguide
mod_ulList02

小さい●

```
<ul class="mod_ulList02">
	<li>自社商品の売場維持</li>
	<li>品切れ、品薄防止</li>
	<li>商品の品出し、前出し</li>
</ul>
```
*/
.mod_accordion01 .list01 .item + .item { margin-top: 10px; }
.mod_accordion01 .list01 .item .link { position: relative; }
.mod_accordion01 .list01 .item .link:after { display: inline-block; position: absolute; top: 0; right: 15px; bottom: 0; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_accordion01 .list01 .item .link > a { display: table-cell; position: relative; box-sizing: border-box; width: 640px; height: 45px; line-height: 1.3; padding: 5px 35px 5px 15px; background: #fff; vertical-align: middle; }
.mod_accordion01 .list01 .item .toggle .tit-toggle { display: block; position: relative; box-sizing: border-box; line-height: 1.3; background: #fff; cursor: pointer; }
.mod_accordion01 .list01 .item .toggle .tit-toggle:before , .mod_accordion01 .list01 .item .toggle .tit-toggle:after { display: inline-block; position: absolute; top: 0; right: 15px; bottom: 0; width: 16px; height: 2px; margin: auto; background: #aeaeb0; content: ""; }
.mod_accordion01 .list01 .item .toggle .tit-toggle:after { transition: all .3s ease 0s; transform: scale(1, 1) rotate(90deg); }
.mod_accordion01 .list01 .item .toggle .tit-toggle.on:after { transform: scale(1, 0) rotate(90deg); }
.mod_accordion01 .list01 .item .toggle .tit-toggle > span { display: table-cell; box-sizing: border-box; width: 640px; height: 45px; padding: 6px 35px 6px 15px; vertical-align: middle; }
.mod_accordion01 .list01 .item .toggle .content-toggle { display: none; }
.mod_accordion01 .list01 .item .sub { display: block; font-size: 17.6px; font-size: 1.1rem; }
.mod_accordion01 .list02 > li { position: relative; }
.mod_accordion01 .list02 > li:after { display: inline-block; position: absolute; top: 0; right: 15px; bottom: 0; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_accordion01 .list02 > li + li { margin-top: 1px; }
.mod_accordion01 .list02 > li > a { display: table-cell; box-sizing: border-box; width: 640px; height: 45px; padding: 6px 35px 6px 28px; background: #e8e8e8; vertical-align: middle; }
@media (min-width: 640px), print { .mod_accordion01 .list01 .item + .item { margin-top: 20px; }  .mod_accordion01 .list01 .item .link > a { width: 1060px; height: 60px; }  .mod_accordion01 .list01 .item .toggle .tit-toggle > span { width: 1060px; height: 60px; }  .mod_accordion01 .list02 > li > a { width: 1060px; } }
/*
#styleguide
mod_accordion01

アコーディオン

```
<div class="mod_accordion01">
	<ul class="list01">
		<li class="item">
			<p class="link"><a href="">お知らせ・キャンペーン</a></p>
		</li>
		<li class="item">
			<p class="link"><a href="/product/use/clearance_sale">クリアランスセール対象商品<br>
				<span class="sub">数量限定・在庫限り</span></a></p>
		</li>
		<li class="item">
			<dl class="toggle">
				<dt class="tit-toggle"><span>ワケンビーテック</span></dt>
				<dd class="content-toggle">
					<ul class="list02">
						<li><a href="#">カタログ・リーフレット</a></li>
						<li><a href="#">アプリケーションノート・文献</a></li>
						<li><a href="#">マニュアル・MSDS</a></li>
					</ul>
				</dd>
			</dl>
		</li>
	</ul>
</div>
```
*/
/*!  pager
================================================ */
.mod_pagination01 { display: block; padding: 20px 0; font-size: 0; text-align: center; }
.mod_pagination01 .links { position: relative; }
.mod_pagination01 .links li { display: inline-block; width: 25px; height: 25px; line-height: 25px; margin: 0 2px; }
.mod_pagination01 .links li a , .mod_pagination01 .links li span { display: block; box-sizing: border-box; border: 2px solid #13449d; background-color: #fff; color: #13449d; font-weight: bold; font-size: 12px; font-size: 13px; text-decoration: none; }
.mod_pagination01 .links li.previous { position: absolute; top: 0; left: 0; width: 60px; margin: 0; }
.mod_pagination01 .links li.previous a { display: block; position: relative; overflow: hidden; padding-left: 18px; }
.mod_pagination01 .links li.previous a:after { position: absolute; top: 0; bottom: 0; left: 10px; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow01.png) center center no-repeat; background-size: cover; content: ""; transform: rotate(180deg); }
.mod_pagination01 .links li.next { position: absolute; top: 0; right: 0; width: 60px; margin: 0; }
.mod_pagination01 .links li.next a { display: block; position: relative; overflow: hidden; padding-right: 18px; }
.mod_pagination01 .links li.next a:after { position: absolute; top: 0; right: 10px; bottom: 0; width: 13px; height: 13px; margin: auto; background: url(../img/common/ico_arrow01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_pagination01 .links li.current a , .mod_pagination01 .links li.current span { background-color: #13449d; color: #fff; }
.mod_pagination01 .links li.list { width: 120px; }
@media (min-width: 640px), print { .mod_pagination01 .links { width: 600px; margin: 0 auto; }  .mod_pagination01 .links li { width: 50px; height: 50px; line-height: 50px; }  .mod_pagination01 .links li.previous { width: 100px; }  .mod_pagination01 .links li.next { width: 100px; }  .mod_pagination01 .links li.list { width: 230px; }  .mod_pagination01 .links li a { transition: all .3s ease 0s; }  .mod_pagination01 .links li a:hover { background-color: #13449d; color: #fff; }  }
/*
#styleguide
mod_pagination01

pager

```
<div class="mod_pagination01">
	<ul class="links">
		<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 class="next"><a href="">次へ</a></li>
	</ul>
</div>

<div class="mod_pagination01">
	<ul class="links">
		<li class="prev"><a href="">前へ</a></li>
		<li class="list"><a href="">記事一覧へ</a></li>
		<li class="next"><a href="">次へ</a></li>
	</ul>
</div>
```
*/
/*!  form
================================================ */
.mod_textbox01 { box-sizing: border-box; width: 100%; padding: 5px 10px; border: 1px solid #f6f6f6; background: #f6f6f6; font-size: 24px; font-size: 24px; font-size: 1.5rem; }
@media (min-width: 640px), print { .mod_textbox01 { padding: 7px 10px; } }
/*
#styleguide
mod_textbox01

テキストボックス

```
<input type="text" class="mod_textbox01">
```
*/
.mod_textarea01 { box-sizing: border-box; resize: vertical; width: 100%; min-height: 250px; line-height: 1.5; overflow: auto; padding: 3px 10px; border: 1px solid #f6f6f6; background: #f6f6f6; font-size: 24px; font-size: 24px; font-size: 1.5rem; }
@media (min-width: 640px), print { .mod_textarea01 { height: 150px; font-size: 1.5rem; } }
/*
#styleguide
mod_textarea01

テキストエリア

```
<textarea placeholder="プレースホルダ" class="mod_textarea01"></textarea>
```
*/
.mod_checkbox01 label { display: block; }
.mod_checkbox01 label + label { margin-top: 8px; }
.mod_checkbox01 label input[type="checkbox"] { display: none; }
.mod_checkbox01 label span { position: relative; margin-right: 26px; padding-left: 26px; }
.mod_checkbox01 label span:before { display: block; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 1px solid #cdcdcd; content: ""; }
.mod_checkbox01 label input[type="checkbox"]:checked + span:after { display: block; position: absolute; top: 3px; left: 6px; width: 4px; height: 7px; border-right: 3px solid #13449d; border-bottom: 3px solid #13449d; content: ""; transform: rotate(40deg); }
/*
#styleguide
mod_checkbox01

チェックボックス
ラッパー要素に設定します。

```
<div class="checkbox01">
	<label><input type="checkbox" name="your_job[]" value="資料請求">資料請求</label>
	<label><input type="checkbox" name="your_job[]" value="商品のお問い合わせ・引き合い">商品のお問い合わせ・引き合い</label>
	<label><input type="checkbox" name="your_job[]" value="デモのご依頼">デモのご依頼</label>
	<label><input type="checkbox" name="your_job[]" value="技術的なご質問"技術的なご質問</label>
</div>

```
*/
.mod_select01 { position: relative; width: 100%; height: 40px; overflow: hidden; border: 1px solid #f6f6f6; background: #f6f6f6; }
.mod_select01:before { position: absolute; top: 0; right: 0; width: 32px; height: 100%; background: #f6f6f6; content: ""; }
.mod_select01:after { position: absolute; top: 0; right: 11px; bottom: 0; width: 0; height: 0; margin: auto; border-width: 6px 5px 0 5px; border-style: solid; border-color: #333 transparent transparent transparent; content: ""; }
.mod_select01 .selectbox { position: relative; z-index: 2; box-sizing: border-box; width: 100%; height: 100%; padding: 0 39px 0 10px; font-size: 20.8px; font-size: 1.3rem; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_select01 .selectbox::-ms-expand { display: none; }
@media (min-width: 640px), print { .mod_select01 { position: relative; height: 43px; margin: 0; }  .mod_select01:before { width: 37px; }  .mod_select01:after { right: 12px; border-width: 6px 4px 0 4px; }  .mod_select01 .selectbox { padding: 0 40px 0 20px; font-size: 1.6rem; } }
/*
#styleguide
mod_select01

セレクトボックス

```
<div class="mod_select01">
	<select class="selectbox">
		<option selected disabled>選択ください</option>
		<option>店舗向け営業</option>
		<option>店舗販売促進</option>
		<option>その他</option>
	</select>
	<span class="bg"></span>
</div>
```
*/
.mod_select02 { position: relative; height: 39px; overflow: hidden; border: 1px solid #dfdede; background: #fff; }
.mod_select02:before { position: absolute; top: 0; right: 0; width: 32px; height: 100%; background: #f0f0f0; content: ""; }
.mod_select02:after { position: absolute; top: 0; right: 11px; bottom: 0; width: 0; height: 0; margin: auto; border-width: 6px 5px 0 5px; border-style: solid; border-color: #333 transparent transparent transparent; content: ""; }
.mod_select02 .selectbox { position: relative; z-index: 2; box-sizing: border-box; width: 100%; height: 100%; padding: 0 39px 0 10px; font-size: 20.8px; font-size: 1.3rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_select02 .selectbox::-ms-expand { display: none; }
@media (min-width: 640px), print { .mod_select02 { position: relative; height: 55px; margin: 0; border: 1px solid #dfdede; background: #fff; }  .mod_select02:before { width: 37px; }  .mod_select02:after { right: 12px; border-width: 8px 6px 0 6px; }  .mod_select02 .selectbox { padding: 0 45px 0 15px; font-size: 1.6rem; } }
/*
#styleguide
mod_select02

セレクトボックス

```
<div class="mod_select01">
	<select class="selectbox">
		<option selected disabled>選択ください</option>
		<option>店舗向け営業</option>
		<option>店舗販売促進</option>
		<option>その他</option>
	</select>
</div>
```
*/
.mod_form01 .formBox { margin: 0 -15px; }
.mod_form01 .formTable th , .mod_form01 .formTable td { display: block; }
.mod_form01 .formTable th { position: relative; padding: 8px 50px 8px 10px; border-top: 1px solid #f5f5f5; background: #fafafa; font-weight: 500; }
.mod_form01 .formTable td { padding: 18px 15px; }
.mod_form01 .ico_require01 { display: inline-block; position: absolute; top: 12px; right: 10px; height: 17px; line-height: 16px; overflow: hidden; padding: 0 5px; border-radius: 2px; background: #fe6767; color: #fff; font-weight: 400; font-size: 17.6px; font-size: 1.1rem; }
.mod_form01 .ico_option01 { display: inline-block; position: absolute; top: 12px; right: 10px; height: 17px; line-height: 16px; overflow: hidden; padding: 0 5px; border-radius: 2px; background: #dfdede; color: #fff; font-weight: 400; font-size: 17.6px; font-size: 1.1rem; }
.mod_form01 .free { color: #999; font-size: 20.8px; font-size: 1.3rem; vertical-align: baseline; }
.mod_form01 .subtxt { line-height: 1.5; margin: 6px 0 -2px; color: #999; font-size: 20.8px; font-size: 1.3rem; }
.mod_form01 .confirmTxt { line-height: 1.6; margin: 20px 0; padding: 9px 12px 10px; border-radius: 6px; background: #e4f3f9; color: #0e358b; }
.mod_form01 [class*="errors"] { line-height: 1.6; margin: 20px 0; padding: 8px 12px 9px; border: 1px solid #fe6767; border-radius: 6px; color: #fe6767; }
.mod_form01 [class*="valid-tip"] { display: block; position: relative; line-height: 1.5; margin: 12px 0 0; padding: 5px 12px; border-radius: 3px; background: #ffe6e6; color: #fe6767; }
.mod_form01 [class*="valid-tip"]:before { position: absolute; top: -7px; left: 40px; width: 0; height: 0; border-width: 0 7px 8px 7px; border-style: solid; border-color: transparent transparent #ffe6e6 transparent; content: ""; }
.mod_form01 .submitArea { margin: 20px 15px 0; }
.mod_form01 .submitArea .btns { display: -ms-flexbox; display: flex; }
.mod_form01 .submitArea .btns > li { margin: 0 5px; }
.mod_form01 .submitArea button[type="reset"]:after { content: none; }
.mod_form01 .submitArea button[class*="back"]:after { right: auto; left: 15px; transform: rotate(180deg); }
@media (min-width: 640px), print { .mod_form01 .formBox { margin: 0; }  .mod_form01 .formTable { border-bottom: 1px solid #f5f5f5; }  .mod_form01 .formTable th , .mod_form01 .formTable td { display: table-cell; }  .mod_form01 .formTable th { position: relative; width: 180px; padding: 24px 60px 18px 20px; }  .mod_form01 .formTable td { padding: 18px 20px; border-top: 1px solid #f5f5f5; }  .mod_form01 .ico_require01 { top: 26px; right: 15px; height: 20px; line-height: 19px; padding: 0 5px; font-size: 1.2rem; }  .mod_form01 .ico_option01 { display: inline-block; position: absolute; top: 12px; right: 10px; height: 17px; line-height: 16px; overflow: hidden; padding: 0 5px; border-radius: 2px; background: #dfdede; color: #fff; font-weight: 400; font-size: 1.1rem; }  .mod_form01 .free { color: #999; font-size: 1.3rem; vertical-align: baseline; }  .mod_form01 .subtxt { line-height: 1.5; margin: 6px 0 -2px; color: #999; font-size: 1.4rem; }  .mod_form01 .confirmTxt { line-height: 1.6; margin: 20px 0; padding: 9px 12px 10px; border-radius: 6px; background: #e4f3f9; color: #0e358b; }  .mod_form01 [class*="errors"] { line-height: 1.6; margin: 20px 0; padding: 8px 12px 9px; border: 1px solid #fe6767; border-radius: 6px; color: #fe6767; }  .mod_form01 [class*="valid-tip"] { display: block; position: relative; line-height: 1.5; margin: 12px 0 0; padding: 5px 12px; border-radius: 3px; background: #ffe6e6; color: #fe6767; }  .mod_form01 [class*="valid-tip"]:before { position: absolute; top: -7px; left: 40px; width: 0; height: 0; border-width: 0 7px 8px 7px; border-style: solid; border-color: transparent transparent #ffe6e6 transparent; content: ""; }  .mod_form01 .submitArea { margin: 50px auto 0; }  .mod_form01 .submitArea .btns { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; }  .mod_form01 .submitArea .btns > li { margin: 0 20px; } }
/*
#styleguide
mod_form01

フォームモジュールいろいろ

```
<form class="form entryForm mod_form01" id="form">
	<div class="wpcf7-validation-errors">エラーメッセージエラーメッセージエラーメッセージエラーメッセージ</div>
	<p class="confirmTxt wpcf7c-elm-step2">下記の内容で送信します。よろしいですか？</p>
	<div class="formBox">
		<table class="formTable">
			<tr>
				<th>希望職種<span class="ico_require01">必須</span></th>
				<td>
					<span class="mod_radio01 inline">
						<span class="wpcf7-list-item first">
							<label><input type="radio" name="your_job[]" value="店舗向け営業"><span class="label">店舗向け営業</span></label>
						</span>
						<span class="wpcf7-list-item">
							<label><input type="radio" name="your_job[]" value="店頭販売促進"><span class="label">店頭販売促進</span></label>
						</span>
						<span class="wpcf7-list-item">
							<label><input type="radio" name="your_job[]" value="その他の求人"><span class="label">その他の求人</span></label>
						</span>
						<span class="wpcf7-list-item last">
							<label><input type="radio" name="your_job[]" value="未定"><span class="label">未定</span></label>
						</span>
					</span>
				</td>
			</tr>
			<tr>
				<th>お名前<span class="ico_require01">必須</span></th>
				<td>
					<input type="text" name="your_name" class="mod_textbox01" placeholder="山田 太郎">
					<span role="alert" class="wpcf7-not-valid-tip">必須項目です。</span>
				</td>
			</tr>
			<tr>
				<th>連絡方法<span class="ico_require01">必須</span><span class="free">（複数選択可）</span></th>
				<td>
					<span class="mod_checkbox01 inline">
						<span class="wpcf7-list-item first">
							<label><input type="checkbox" name="your_job[]" value="電話"><span class="label">電話</span></label>
						</span>
						<span class="wpcf7-list-item">
							<label><input type="checkbox" name="your_job[]" value="メール"><span class="label">メール</span></label>
						</span>
						<span class="wpcf7-list-item last">
							<label><input type="checkbox" name="your_job[]" value="LINE"><span class="label">LINE</span></label>
						</span>
					</span>
				</td>
			</tr>
			<tr>
				<th>電話番号</th>
				<td>
					<input type="tel" name="your_tel" class="mod_textbox01" placeholder="">
				</td>
			</tr>
			<tr>
				<th>メールアドレス</th>
				<td>
					<input type="mail" name="your_mail" class="mod_textbox01">
				</td>
			</tr>
			<tr>
				<th>LINE ID</th>
				<td>
					<input type="number" name="your_line" class="mod_textbox01">
				</td>
			</tr>
			<tr>
				<th>備考</th>
				<td>
					<textarea name="your_message" class="mod_textarea01"></textarea>
				</td>
			</tr>
		</table>
		<div class="submitArea">
			<ul class="btns">
				<li class="mod_btn02"><button type="submit" class="wpcf7-form-control wpcf7-confirm wpcf7c-elm-step1 wpcf7c-btn-confirm">確認する</button></li>
				<li class="mod_btn02 gray01"><button type="reset" class="reset">リセット</button></li>
			</ul>
			<ul class="btns">
				<li class="mod_btn02 blue04"><button type="button" class="wpcf7-form-control wpcf7-back wpcf7c-elm-step2 wpcf7c-btn-back wpcf7c-force-hide">戻って編集</button></li>
				<li class="mod_btn02 orange01"><button type="submit" class="hannari submit wpcf7-form-control wpcf7-submit submitBtn wpcf7c-elm-step wpcf7c-elm-step2 wpcf7c-force-hide">送信する</button></li>
			</ul>
		</div>
	</div>
</form>
```
*/
/*
#styleguide
mod_movie01

アスペクト比固定用埋め込みボックス

```
<div class="mod_movie01">
	<iframe width="560" height="314" src="//www.youtube.com/embed/kAgIodrZSmw" allowfullscreen="allowfullscreen"></iframe>
</div>
```
*/
.mod_movie01 { position: relative; width: 100%; margin: 0 auto; padding-bottom: 56.25%; }
.mod_movie01 iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

/*!  link
================================================ */
.mod_link01 { color: #13449d; text-decoration: underline; }
.mod_link01:hover { text-decoration: none; }
/*# sourceMappingURL=maps/modules.css.map */


/*!  関連コンテンツ
================================================ */
#contents_related ul li {margin-bottom: 20px;}
#contents_related .cnts_relatedLabel {display: inline-block; line-height: 1.4; padding: 2px 12px; background: #9b9b9c; color: #fff; font-size: 1.0rem;}
#contents_related h3.tit {font-weight: 700;}
@media (min-width: 640px), print { #contents_related .cnts_relatedLabel {padding: 2px 8px 3px; font-size: 1.2rem;} }
@media (min-width: 640px), print { #contents_related h3.tit {font-size: 1.6rem; line-height: 1.625;} }

/*!  問題解決事例アーカイブリスト形式
================================================ */
.mod_list01{border-top:1px solid #dfdede}
.mod_list01 .item{border-bottom:1px solid #dfdede}
.mod_list01 .link{display:block;padding:20px 0 18px}
.mod_list01 .catList{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -5px 3px 0}
.mod_list01 .catList .cat{margin:0 5px 5px 0;padding:2px 12px 3px;line-height:1.35;color:#fff;font-size:1rem;background-color:#9b9b9c}
.mod_list01 .tit{line-height:1.65;color:#13449d;font-size:1.4rem;font-weight:700}
@media (min-width:640px),print{
.mod_list01 .link{padding:26px 0 24px}
.mod_list01 .link:hover{text-decoration:none}
.mod_list01 .link:hover .tit{text-decoration:underline}
.mod_list01 .catList{margin:0 -8px 3px 0}
.mod_list01 .catList .cat{margin:0 8px 8px 0;padding:3px 20px 4px;font-size:1.2rem}
.mod_list01 .tit{font-size:1.8rem}
}



/* 202110追加
------------------------------------- */
.c-head06 {
	margin-bottom: 18px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: #13449d;
}
@media all and (min-width: 640px) {
	.c-head06 {
		margin-bottom: 34px;
		font-size: 2rem;
	}
}



.mod_btn04 {
	width: 290px;
	max-width: 100%;
	margin: 20px auto 0;
}
.mod_btn04 a , .mod_btn04 button {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: auto;
	height: 45px;
	line-height: 45px;
	overflow: hidden;
	padding: 0;
	border: 2px solid #13449d;
	background: #13449d;
	color: #fff;
	font-weight: 700;
	font-size: 1.3rem;
	text-align: center;
	vertical-align: middle;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.mod_btn04.white a , .mod_btn04.white button {
	background: #fff;
	color: #13449d;
}
.mod_btn04.login a:after,.mod_btn04.login button:after {
	position: relative;
	top: -3px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	width: 18px;
	height: 18px;
	background: url(../img/common/ico_login01.png) center center no-repeat;
	background-size: cover; content: "";
}
.mod_btn04 button { width: 100%; }
@media (min-width: 640px), print {
	.mod_btn04 {
		width: 300px;
	}
	.mod_btn04 a, .mod_btn04 button {
		height: 56px;
		line-height: 54px;
		font-size: 1.6rem;
		transition: all .3s ease 0s;
	}
	.mod_btn04 a:hover, .mod_btn04 button:hover {
		background: #fff;
		color: #13449d !important;
		text-decoration: none;
	}
	.mod_btn04.white a:hover , .mod_btn04.white button:hover {
		background: #13449d;
		color: #fff !important;
	}
	.mod_btn04.login a:hover:after,.mod_btn04.login button:hover:after {
		background-image: url(../img/common/ico_login02.png);
	}
}


/* 220603追加
------------------------------------- */
.mod_textbox02 {
	margin: 0 -15px;
	padding: 30px 15px 40px;
	background: #fff;
	box-sizing: border-box;
}
@media (min-width: 640px), print {
	.mod_textbox02 {
		margin: 0;
		padding: 40px 28px;
		text-align: center;
	}
}