@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/* archive
================================================ */
/*ニュース欄
#styleguide
mod_archive01

ブログ記事一覧
高さ揃えはdata-mh属性でmatchheight使用。
```
<ul class="mod_archive01_list">
	<li class="mod_archive01"><a href="" class="mod_archive01_link">
		<div class="mod_archive01_meta">
			<p class="mod_archive01_date">2019年9月17日</p>
			<p class="mod_archive01_cat">ニュース</p>
		</div>
		<p class="mod_archive01_tit">「工場のIoT化を実現する日新システムズのFA向けソリューション」ダウンロード資料公開</p>
	</a></li>
	<li class="mod_archive01"><a href="" class="mod_archive01_link">
		<div class="mod_archive01_meta">
			<p class="mod_archive01_date">2019年9月17日</p>
			<p class="mod_archive01_cat">ニュース</p>
		</div>
		<p class="mod_archive01_tit">Lantronix社 無線タイプ外部接続BOXデバイスサーバ「E series」を公開</p>
	</a></li>
	<li class="mod_archive01"><a href="" class="mod_archive01_link">
		<div class="mod_archive01_meta">
			<p class="mod_archive01_date">2019年9月9日</p>
			<p class="mod_archive01_cat">ニュース</p>
		</div>
		<p class="mod_archive01_tit">「実証試験で実績を培った『スマートシティを加速させる無線通信端末（屋外型ゲートウェイ）』の活用紹介」ダウンロード資料公開</p>
	</a></li>
	<li class="mod_archive01"><a href="" class="mod_archive01_link">
		<div class="mod_archive01_meta">
			<p class="mod_archive01_date">2019年7月19日</p>
			<p class="mod_archive01_cat">ニュース</p>
		</div>
		<p class="mod_archive01_tit">「OPC UA 次の進化へ OPC UA including TSN」ダウンロード資料公開</p>
	</a></li>
	<li class="mod_archive01"><a href="" class="mod_archive01_link">
		<div class="mod_archive01_meta">
			<p class="mod_archive01_date">2019年7月16日</p>
			<p class="mod_archive01_cat">ニュース</p>
		</div>
		<p class="mod_archive01_tit">「ECHONET Liteの市場動向とVPP/ZEH対応に向けた最新の機器オブジェクト」ダウンロード資料公開</p>
	</a></li>
</ul>
```
*/
.mod_archive01_list { margin-top: -20px; }
#home .mod_archive01_list .mod_archive01:nth-child(n+7) {
	display: none;
}
.mod_archive01_link { display: block; padding: 20px 0 16px; border-bottom: 1px solid #e2e2e2; text-decoration: none; }

.mod_archive01_link.is-no-link .mod_archive01_tit { text-decoration: none; }

.mod_archive01_meta { line-height: 1; }

.mod_archive01_date { display: inline-block; margin-right: 8px; padding-bottom: 2px; font-size: 1.3rem; font-weight: 600; }

.mod_archive01_cat { display: inline-block; padding: 0 8px; color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.8; background: #0171b8; }

.mod_archive01_cat.pre { background: #1cacda; }

.mod_archive01_cat.product { background: #febf00; }

.mod_archive01_cat.media { background: #00b2b4; }

.mod_archive01_cat.press { background: #ff6e00; }

.mod_archive01_tit { margin-top: 12px; text-decoration: underline; }

@media all and (min-width: 600px) { .mod_archive01_list { margin-top: -20px; }
  .mod_archive01_link { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 14px 0 13px; }
  .mod_archive01_link:hover .mod_archive01_tit { color: #016cb1; }
  .mod_archive01_meta { float: left; overflow: hidden; padding: 4px 0; margin-right: 12px; }
  .mod_archive01_date { float: left; width: auto; margin-right: 20px; padding: 4px 0 0; font-size: 1.6rem; }
  .mod_archive01_cat { box-sizing: border-box; float: right; min-width: 100px; padding: 4px 10px 3px; line-height: 1; font-size: 1.2rem; text-align: center; }
  .mod_archive01_tit { box-sizing: border-box; width: auto; margin-top: 0; padding: 6px 0 0 0; font-size: 1.6rem; line-height: 1.2; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; max-width: 800px; } }

/* title
================================================ */
/*縮小画像2列
#styleguide
mod_img_box01


```
<ul class="mod_img_box01">
	<li class="mod_img_box01_item">
		<a class="js_popup01" href="https://placehold.jp/800x600.png" data-lightbox="example-set">
			<div class="img">
				<img src="https://placehold.jp/800x600.png" alt="">
			</div>
		</a>
	</li>
	<li class="mod_img_box01_item">
		<a class="js_popup01" href="https://placehold.jp/800x600.png" data-lightbox="example-set">
			<div class="img">
				<img src="https://placehold.jp/800x600.png" alt="">
			</div>
		</a>
	</li>
	<li class="mod_img_box01_item">
		<a class="js_popup01" href="https://placehold.jp/800x600.png" data-lightbox="example-set">
			<div class="img">
				<img src="https://placehold.jp/800x600.png" alt="">
			</div>
		</a>
	</li>
	<li class="mod_img_box01_item">
		<a class="js_popup01" href="https://placehold.jp/800x600.png" data-lightbox="example-set">
			<div class="img">
				<img src="https://placehold.jp/800x600.png" alt="">
			</div>
		</a>
	</li>
</ul>
```
*/
.mod_img_box01 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 50px; /* justify-content:space-between; */ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -5px; }

.mod_img_box01_item { width: calc(50% - 10px); box-sizing: border-box; margin: 0 5px; border: 1px solid #e2e2e2; }

.mod_img_box01_item a { display: block; position: relative; }

.mod_img_box01_item a:before { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; background: url(../../img/common/ico_expansion01.png) no-repeat center; background-size: 100%; }

.mod_img_box01_item:nth-child(n+3) { margin-top: 9px; }

@media all and (min-width: 600px) { .mod_img_box01 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -15px; margin-bottom: 50px; }
  .mod_img_box01_item { width: calc(50% - 30px); margin: 0 15px; }
  .mod_img_box01_item a:before { width: 40px; height: 40px; }
  .mod_img_box01_item:nth-child(n+3) { margin-top: 20px; } }




/* 枠無し　大きい画像
================================================ */
.mod_img_box01-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 50px; /* justify-content:space-between; */ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -5px; }

.mod_img_box01-2_item { width: calc(100% - 10px); box-sizing: border-box; margin: 0 5px;  }

.mod_img_box01-2_item a { display: block; position: relative; }

.mod_img_box01-2_item a:before { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 25px; height: 25px;  background-size: 100%; }

.mod_img_box01-2_item:nth-child(n+3) { margin-top: 9px; }

@media all and (min-width: 600px) { .mod_img_box01-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -15px; margin-bottom: 50px; }
  .mod_img_box01-2_item { width: calc(70% - 30px); margin: 0 15px; }
  .mod_img_box01-2_item a:before { width: 40px; height: 40px; }
  .mod_img_box01-2_item:nth-child(n+3) { margin-top: 20px; } }

	.mod_img_box01-3_item { border: 1px solid #e2e2e2;}


/*　マウスオーバー
================================================ */
.box_hover:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

/*
#styleguide
mod_img_box02


```
フル画像
<ul class="mod_img_box02">
	<li class="mod_img_box02_item">
		<a class="js_popup02" href="https://placehold.jp/800x600.png" data-lightbox="example-set">
			<div class="img">
				<img src="https://placehold.jp/800x600.png" alt="">
			</div>
		</a>
	</li>
	<li class="mod_img_box02_item">
		<a class="js_popup02" href="https://placehold.jp/800x600.png" data-lightbox="example-set">
			<div class="img">
				<img src="https://placehold.jp/800x600.png" alt="">
			</div>
		</a>
	</li>
	<li class="mod_img_box02_item">
		<a class="js_popup02" href="https://placehold.jp/800x600.png" data-lightbox="example-set">
			<div class="img">
				<img src="https://placehold.jp/800x600.png" alt="">
			</div>
		</a>
	</li>
	<li class="mod_img_box02_item">
		<a class="js_popup02" href="https://placehold.jp/800x600.png" data-lightbox="example-set">
			<div class="img">
				<img src="https://placehold.jp/800x600.png" alt="">
			</div>
		</a>
	</li>
</ul>
```
*/
.mod_img_box02 { overflow: hidden; }

.mod_img_box02_img { float: left; width: calc(34% - 15px); height: 80px; position: relative; }

.mod_img_box02_img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }

.mod_img_box02_txt + .mod_img_box02_txt { margin-top: 25px; }

@media all and (min-width: 600px) { .mod_img_box02_img { width: calc(20% - 10px); height: 200px; margin-right: 40px; } }


.mod_img_box02r { overflow: hidden; }
.mod_img_box02r_img { float: right; width: calc(34% - 15px); height: 80px; position: relative; }
.mod_img_box02r_img img { position: absolute; top: 0; right: 0; bottom: 0; right: 0; margin: auto; }
.mod_img_box02r_txt + .mod_img_box02r_txt { margin-top: 25px; }
@media all and (min-width: 600px) { .mod_img_box02r_img { width: calc(20% - 30px); height: 150px; margin-lefht: 40px; } }


/*
#styleguide
mod_tit01
お問い合わせ枠

```
<div class="mod_box01">
	<p class="mod_box01_tit">パワーコンディショナの<br>出力制御ユニットの購入に関する<br>お問い合わせ</p>
	<p class="mod_box01_txt">ユアサ商事株式会社　東部住環境本部 スマートエネルギー部<br>TEL：03-6369-1512　平日9:00 - 18:00（土・日祝・年末年始を除く）<br>E-mail：<a href="mailto:yuasa-smartenergy@yuasa.co.jp">yuasa-smartenergy@yuasa.co.jp</a></p>
</div>
```
*/
.mod_box01_tit { background: #80b5d8; padding: 9px 0; font-size: 1.7rem; font-weight: bold; text-align: center; color: #fff; }

.mod_box01_txt { background: #e5f0f7; padding: 15px 20px; }

.mod_box01_txt a { color: #256db3; }

@media all and (min-width: 600px) { .mod_box01_tit { padding: 17px 0; font-size: 2rem; }
  .mod_box01_txt { padding: 28px 0; text-align: center; } }

/*
#styleguide
mod_img_box03
左画像右テキスト

```
<div class="box mod_img_box03">
	<ul class="img_box mod_img_box01">
		<li class=item "mod_img_box01_item">
			<a class="js_popup01" href="<?php echo $root; ?>/img/gateway/img_gateway06.png" data-lightbox="example-set">
				<div class="img">
					<img src="<?php echo $root; ?>/img/gateway/img_gateway06.png" alt="">
				</div>
			</a>
		</li>
	</ul>
	<div class="area mod_img_box03_area">
		<div class="areaTxt mod_img_box03_area_txt">
			<h4 class="copy mod_img_box03_copy">HEMSとして活用</h4>
			<ul class="list mod_list01" data-mh="test-box">
				<li class="item mod_list01_item">ECHONET Lite、Wi-SUN Bルート対応<span>- PV、蓄電池、ヒートポンプ給湯機などの監視、制御</span></li>
				<li class="item mod_list01_item">在宅者への表示、操作はスマホ、タブレット</li>
			</ul>
		</div>
		<div class="areaTxt  mod_img_box03_area_txt">
			<h4 class="copy mod_img_box03_copy">屋内設置が困難</h4>
			<ul class="list mod_list01" data-mh="test-box">
				<li class="item mod_list01_item">ゲートウェイの置き場所がない</li>
				<li class="item mod_list01_item">意図せず在宅者が電源を落とす可能性</li>
			</ul>
		</div>
	</div>
</div>
```
*/
.mod_img_box03 { margin-bottom: 50px; }

.mod_img_box03.is_marginLLose { margin-bottom: 0; }

.mod_img_box03_img { width: 50%; box-sizing: border-box; margin-bottom: 20px; }

.mod_img_box03_img a { display: block; position: relative; }

.mod_img_box03_img a:before { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; background: url(../../img/common/ico_expansion01.png) no-repeat center; background-size: 100%; }

.mod_img_box03_copy { margin-bottom: 5px; font-size: 1.5rem; font-weight: bold; }

@media all and (min-width: 600px) { .mod_img_box03 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 50px; }
  .mod_img_box03_img { width: calc(50% - 15px); margin-bottom: 0; }
  .mod_img_box03_img a:before { width: 40px; height: 40px; }
  .mod_img_box03_area { width: calc(50% - 15px); }
  .mod_img_box03_copy { margin-bottom: 5px; font-size: 1.8rem; }
  .mod_img_box03 .mod_img_box01 { width: calc(50% + 15px); }
  .mod_img_box03 .mod_img_box01 .mod_img_box01_item { width: auto; }
}

.mod_img_box03-2 { margin-bottom: 50px; }
.mod_img_box03-2.is_marginLLose { margin-bottom: 0; }
.mod_img_box03-2_img { width: 50%; box-sizing: border-box; margin-bottom: 20px; }
.mod_img_box03-2_img a { display: block; position: relative; }
.mod_img_box03-2_img a:before { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; background: url(../../img/common/ico_expansion01.png) no-repeat center; background-size: 100%; }

.mod_img_box03-2_copy { margin-bottom: 5px; font-size: 1.5rem; font-weight: bold; }

@media all and (min-width: 600px) { .mod_img_box03-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 50px; }
  .mod_img_box03-2_img { width: calc(50% - 15px); margin-bottom: 0; }
  .mod_img_box03-2_img a:before { width: 40px; height: 40px; }
  .mod_img_box03-2_area { width: calc(50% - 15px); }
  .mod_img_box03-2_copy { margin-bottom: 5px; font-size: 1.8rem; }
  .mod_img_box03-2 .mod_img_box01-2 { width: calc(50% + 15px); }
  .mod_img_box03-2 .mod_img_box01-2 .mod_img_box01-2_item { width: auto; }
}

.pointwrap{
	max-width: 960px;
    margin: auto;
	margin-bottom: 60px;
	background: #eef3ff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.pointbox{
	margin-bottom: 0;
}
.pointlist{
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex; 
	-ms-flex-wrap: wrap; 
	flex-wrap: wrap; -webkit-box-pack: justify; 
	-ms-flex-pack: justify; 
	justify-content: space-between;
}
.pointlist .pointlist_ttl{
	flex:0 1 24%;
	max-width: 24%;
	width: 24%;
	 display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
	padding: 5px 0;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
    box-sizing: border-box;
}

.pointlist .pointlist_yl{
	background: #FFB743;
}
.pointlist .pointlist_bl{
	background: #3EBFFF;
}
.pointlist .pointlist_pk{
	background: #FF99D1;
}
.pointlist .pointlist_gy{
	background: #7C7C7C;
}

.pointimg{
	max-width: 1000px;
    margin: auto;
	margin-bottom: 40px;
}
.set { margin-top: 30px; }
.set .setTit { position: relative; margin-bottom: 5px; padding-left: 15px; font-weight: bold; font-size: 1.5rem; }
.set .setTit:before {
	content: "";
	position: absolute;
	top: .4em;
	left: 0;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 5px;
	height: 10px;
	border-right: 3px solid #016cb1;
	border-bottom: 3px solid #016cb1;
}
.note { margin-top: 1em; font-size: 1.1rem; color: #999; }

.case_info .relation { border: 1px solid  #e2e2e2; margin-top: -1px; padding: 20px 20px 25px; }
.case_info .relation .tit { margin-bottom: -12px; padding-left: 37px; position: relative; font-size: 1.5rem; font-weight: 500; }
.case_info .relation .tit:before { content: ""; display: block; position: absolute; top: 50%; left: 0px; width: 23px; height: 30px; margin-top: -15px; background: url(/img/common/ico_info01.png) no-repeat center; background-size: 100%; }
.case_info .relation .txt { margin-bottom: 7px; line-height: 1.85; font-weight: 400; }
.case_info .relation .txt span { display: block; color: #016cb1; }
.case_info .relation .list { margin-bottom: 23px; }
.case_info .relation .list .item { padding-left: 12px; line-height: 1.8; }
.case_info .relation .list .item:before { left: 0; }
.case_info .relation .btn + .btn { margin-top: 10px; }

@media all and (min-width: 600px) {
	.pointbox .mod_img_box01_area{
		width: calc(35% - 10px);
	}

	.pointbox .mod_img_box03_area{
		width: calc(60% - 10px);
	}
	.set .setTit { padding-left: 20px; margin-bottom: 10px; font-size: 1.5rem; line-height: 1.5;}
	.set .setTit:before {top: 0em;	height: 13px; }
	.note { margin-top: 0.5em; font-size: 1.3rem; }
	.case_info .relation { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: -1px; padding: 26px 30px 26px 38px; }
  .case_info .relation .tit { -ms-flex-preferred-size: 260px; flex-basis: 260px; margin-bottom: 0; font-size: 2.0rem; font-weight: bold; line-height: 2.6; }
  .case_info .relation .tit:before { top: 10px; margin-top: 0; }
  .case_info .relation .areaTxt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
  .case_info .relation .txt { margin-bottom: 13px; font-size: 1.4rem; }
  .case_info .relation .txt span { margin-bottom: 7px; font-size: 1.6rem; font-weight: bold; }
  .case_info .relation .list { margin-bottom: 21px; }
  .case_info .relation .list .item { padding-left: 17px; line-height: 1.8; }
  .case_info .relation .list .item:before { left: 0; }
  .case_info .relation .areaBtn,.case_info .relation .btnList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin-left: 20px; }
  .case_info .relation .btn { max-width: none; width: 410px; margin: 0; }
  .case_info .relation .btn a { min-height: 55px; height: 100%; padding: 14px 0 14px; line-height: 1.4; text-align: center; }
  .case_info .relation .btn a:before { height: 85px; }
  .case_info .relation .btn + .btn { margin-top: 0; margin-left: 10px; }
	.case_relation{
		max-width: 750px;
		margin: auto;
		margin-bottom: 60px;
	}
	.case_info .case_relation .tit{
		flex-basis: 250px;
	}
	.case_info .case_relation .btn{
		width: 410px;
	}
}

/*表*/
.detailtable__wrap{
	margin-bottom: 40px;
}
 .detailtable {
	margin-bottom: 0;
}
 .detailtable + .detailtable { margin-top: 15px; }
.detailtable {
	max-width: 950px;
    margin: auto;
	vertical-align: middle;
	border: 1px solid #ababab;
}
.detailtable td{
	padding: 12px 1%;
    vertical-align: middle;
	font-size: 1.2rem;
}
 .detailtable tr:nth-child(n+2) th,
 .detailtable tr:nth-child(n+2) td {
	border: 1px solid #ababab;
}

 .detailtable th.detailtable-head {
	vertical-align: middle;
	width: 30%;
	line-height: 1.4;
}
.detailtable_box{
	margin-bottom: 20px;
}
 .detailtable th.detailtable-head {
	border-right: #ababab solid 1px;
}
 .detailtable th.detailtable-head:last-child{
	border-right: #ababab solid 1px;
}
.detailtable th.head__yl{
	background: #FFC000;
	color: #fff;
	font-weight: bold;
	text-align: center;
	
}
.detailtable th.head__bl{
	background: #3EBFFF;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.detailtable th.head__pk{
	background: #FF99D1;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.head__yl-sub{
	background: #FFEF92;
	border-right: #ababab solid 1px!important;
	font-weight: bold;
	color: #5b5b5b;
	text-align: center;
}
.head__bl-sub{
	background: #ABE1FF;
	border-right: #ababab solid 1px!important;
	font-weight: bold;
	color: #5b5b5b;
	text-align: center;
}
.head__pk-sub{
	background: #FFD7EF;
	border-right: #ababab solid 1px!important;
	font-weight: bold;
	color: #5b5b5b;
	text-align: center;
}

@media all and (min-width: 600px) {
   .detailtable thead th { padding: 16px 0; }
   .detailtable tbody th { vertical-align:middle; max-width: 230px; box-sizing: border-box; width: auto; padding: 12px 20px; display:table-cell; }
	.detailtable td{
		font-size: 1.4rem;
		padding: 12px 20px;
	}
	 .detailtable th.detailtable-head{
		width: 25%;
	}
	 .detailtable th.detailtable-head:last-child{
		width: 50%;
	}
	
	.detailtable th.head__yl{
		font-size: 1.6rem;
	}
	.detailtable th.head__bl{
		font-size: 1.6rem;
	}
	.detailtable th.head__pk{
		font-size: 1.6rem;
	}
	
}
@media all and (max-width: 599px) {
	 .detailtable.is-sirc {
		display: table;
	}

	 .detailtable.is-sirc tr:nth-child(n+2) {
		display: table-row;
	}
	 .detailtable.is-sirc th,
	 .detailtable.is-sirc td {
		display: table-cell;
		word-break: break-word;
	}
}



/*
#styleguide
mod_img_box04


```
<div class="box mod_img_box04">
	<ul class="img_box mod_img_box01">
		<li class=item "mod_img_box01_item">
			<a class="js_popup01" href="<?php echo $root; ?>/img/gateway/img_gateway06.png" data-lightbox="example-set">
				<div class="img">
					<img src="<?php echo $root; ?>/img/gateway/img_gateway06.png" alt="">
				</div>
			</a>
		</li>
	</ul>
	<div class="area mod_img_box03_area">
		<div class="areaTxt mod_img_box03_area_txt">
			<h4 class="copy mod_img_box03_copy">HEMSとして活用</h4>
			<ul class="list mod_list01" data-mh="test-box">
				<li class="item mod_list01_item">ECHONET Lite、Wi-SUN Bルート対応<span>- PV、蓄電池、ヒートポンプ給湯機などの監視、制御</span></li>
				<li class="item mod_list01_item">在宅者への表示、操作はスマホ、タブレット</li>
			</ul>
		</div>
		<div class="areaTxt  mod_img_box03_area_txt">
			<h4 class="copy mod_img_box03_copy">屋内設置が困難</h4>
			<ul class="list mod_list01" data-mh="test-box">
				<li class="item mod_list01_item">ゲートウェイの置き場所がない</li>
				<li class="item mod_list01_item">意図せず在宅者が電源を落とす可能性</li>
			</ul>
		</div>
	</div>
</div>
```
*/
.mod_img_box04_item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; box-sizing: border-box; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; }

.mod_img_box04_item + .mod_img_box04_item { margin-top: 10px; }

.mod_img_box04_item a { display: block; position: relative; }

.mod_img_box04_item a:before { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; background: url(../../img/common/ico_expansion01.png) no-repeat center; background-size: 100%; }

.mod_img_box04_item_tit { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: calc(50% - 5px); box-sizing: border-box; margin-left: 10px; font-size: 1.5rem; font-weight: 700; }

.mod_img_box04_item_img { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: calc(50% - 5px); box-sizing: border-box; }

@media all and (min-width: 600px) { .mod_img_box04 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .mod_img_box04_item { display: block; position: relative; width: calc(50% - 15px); }
  .mod_img_box04_item + .mod_img_box04_item { margin-top: 0; }
  .mod_img_box04_item:nth-child(even) { margin-left: 30px; }
  .mod_img_box04_item:nth-child(n+3) { margin-top: 40px; }
  .mod_img_box04_item a:before { width: 40px; height: 40px; }
  .mod_img_box04_item_tit { width: auto; margin-left: 0; margin-bottom: 20px; font-size: 1.8rem; }
  .mod_img_box04_item_img { width: auto; } }

/* button
================================================ */
/*
#styleguide
mod_btn01
ボタン

```
<p class="mod_btn01"><a href="" class="mod_btn01_link"><span class="mod_btn01_txt">エネルギーソリューション</span></a></p>

<p class="mod_btn01 mod_color_blue"><a href="" class="mod_btn01_link mod_btn01_download"><span class="mod_btn01_txt">青字DLアイコン版↓</span></a></p>
```
*/
.mod_btn01 { margin: 30px auto 0; max-width: 284px; }

.mod_btn01_link { box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding: 10px 0; font-size: 1.3rem; border: 1px solid; color: inherit; text-decoration: none; background: #fff; }

.mod_btn01_link.mod_btn01_download:after { content: ""; display: block; position: absolute; top: 50%; right: 15px; width: 17px; height: 17px; margin-top: -8px; border: none; background: url(../../img/common/ico_pdf01.png) no-repeat center; background-size: 100%; }

.mod_btn01_link:before { -webkit-transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 100%; padding-bottom: 1px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

.mod_btn01_link:after { position: absolute; top: 50%; right: 0; content: ""; display: block; width: 14px; border-top: 1px solid; }

.mod_btn01.is_transparent .mod_btn01_link { background-color: transparent; }

.mod_btn01.is_small { margin-top: 22px; }

.mod_btn01.is_small .mod_btn01_link { padding: 8px 0 7px; font-size: 1.2rem; }

.mod_btn01_txt { font-weight: 600; }

@media all and (min-width: 600px) { .mod_btn01 { margin: 30px auto 0; max-width: 284px; }
  .mod_btn01_link { padding-top: 2px; font-size: 1.6rem; padding: 13px 0 12px; }
  .mod_btn01_link.mod_btn01_download:after { right: 22px; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_btn01_link.mod_btn01_download:hover:after { background: url(../../img/common/ico_pdf02.png) no-repeat center; background-size: 100%; }
  .mod_btn01_link:hover { border-color: #016cb1; color: #fff; }
  .mod_btn01_link:hover:before { background-color: #016cb1; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_btn01_link:after { width: 30px; }
  .mod_btn01.is_small { margin-top: 22px; }
  .mod_btn01.is_small .mod_btn01_link { font-size: 1.4rem; }
  .mod_btn01_txt { position: relative; z-index: 1; } }


/*
#styleguide
mod_btn03


```
<p class="mod_btn03"><a href="" class="mod_btn03_link"><span class="mod_btn03_txt">エネルギーソリューション</span></a></p>

<p class="mod_btn03 mod_color_blue"><a href="" class="mod_btn03_link mod_btn03_download"><span class="mod_btn03_txt">青字右矢印版→</span></a></p>
```
*/
.mod_btn03 { margin: 30px auto 0; max-width: 284px; }

.mod_btn03_link { box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding: 10px 0; font-size: 1.3rem; border: 1px solid; color: inherit; text-decoration: none; background: #fff; }

.mod_btn03_link.mod_btn03_download:after { content: ""; display: block; position: absolute; top: 50%; right: 15px; width: 17px; height: 17px; margin-top: -8px; border: none; background: url(../../img/common/ico_btn03b.png) no-repeat center; background-size: 100%; }

.mod_btn03_link:before { -webkit-transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 100%; padding-bottom: 1px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

.mod_btn03_link:after { position: absolute; top: 50%; right: 0; content: ""; display: block; width: 14px; border-top: 1px solid; }

.mod_btn03.is_transparent .mod_btn03_link { background-color: transparent; }

.mod_btn03.is_small { margin-top: 22px; }

.mod_btn03.is_small .mod_btn03_link { padding: 8px 0 7px; font-size: 1.2rem; }

.mod_btn03_txt { font-weight: 600; }

@media all and (min-width: 600px) { .mod_btn03 { margin: 30px auto 0; max-width: 284px; }
  .mod_btn03_link { padding-top: 2px; font-size: 1.6rem; padding: 13px 0 12px; }
  .mod_btn03_link.mod_btn03_download:after { right: 22px; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_btn03_link.mod_btn03_download:hover:after { background: url(../../img/common/ico_btn03w.png) no-repeat center; background-size: 100%; }
  .mod_btn03_link:hover { border-color: #016cb1; color: #fff; }
  .mod_btn03_link:hover:before { background-color: #016cb1; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_btn03_link:after { width: 30px; }
  .mod_btn03.is_small { margin-top: 22px; }
  .mod_btn03.is_small .mod_btn03_link { font-size: 1.4rem; }
  .mod_btn03_txt { position: relative; z-index: 1; } }



/*
#styleguide
mod_btn04


```
						<p class="btn mod_btn04 mod_color_blue"><a href="" target="_blank" class="mod_btn04_link mod_btn04_download"><span class="mod_btn04_txt"></span></a></p>

<p class="mod_btn04 mod_color_blue"><a href="" class="mod_btn04_link mod_btn04_download"><span class="mod_btn04_txt">青字外部リンク</span></a></p>
```
*/
.mod_btn04 { margin: 30px auto 0; max-width: 284px; }

.mod_btn04_link { box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding: 10px 0; font-size: 1.3rem; border: 1px solid; color: inherit; text-decoration: none; background: #fff; }

.mod_btn04_link.mod_btn04_download:after { content: ""; display: block; position: absolute; top: 50%; right: 15px; width: 17px; height: 17px; margin-top: -8px; border: none; background: url(../../img/common/ico_btn04b.png) no-repeat center; background-size: 100%; }

.mod_btn04_link:before { -webkit-transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 100%; padding-bottom: 1px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

.mod_btn04_link:after { position: absolute; top: 50%; right: 0; content: ""; display: block; width: 14px; border-top: 1px solid; }

.mod_btn04.is_transparent .mod_btn04_link { background-color: transparent; }

.mod_btn04.is_small { margin-top: 22px; }

.mod_btn04.is_small .mod_btn04_link { padding: 8px 0 7px; font-size: 1.2rem; }

.mod_btn04_txt { font-weight: 600; }

@media all and (min-width: 600px) { .mod_btn04 { margin: 30px auto 0; max-width: 284px; }
  .mod_btn04_link { padding-top: 2px; font-size: 1.6rem; padding: 13px 0 12px; }
  .mod_btn04_link.mod_btn04_download:after { right: 22px; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_btn04_link.mod_btn04_download:hover:after { background: url(../../img/common/ico_btn04w.png) no-repeat center; background-size: 100%; }
  .mod_btn04_link:hover { border-color: #016cb1; color: #fff; }
  .mod_btn04_link:hover:before { background-color: #016cb1; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_btn04_link:after { width: 30px; }
  .mod_btn04.is_small { margin-top: 22px; }
  .mod_btn04.is_small .mod_btn04_link { font-size: 1.4rem; }
  .mod_btn04_txt { position: relative; z-index: 1; } }


/*
#styleguide
mod_lnav01
水色横並びボタン

```
<ul class="mod_lnav01">
	<li class="mod_lnav01_item">
		<a class="mod_lnav01_link" href="#">
			<span class="mod_lnav01_txt">日新システムズのEMS</span>
		</a>
	</li>
	<li class="mod_lnav01_item">
		<a class="mod_lnav01_link" href="#">
			<span class="mod_lnav01_txt">日新システムズのEMS</span>
		</a>
	</li>
	<li class="mod_lnav01_item">
		<a class="mod_lnav01_link" href="#">
			<span class="mod_lnav01_txt">日新システムズのEMS</span>
		</a>
	</li>
	<li class="mod_lnav01_item">
		<a class="mod_lnav01_link" href="#">
			<span class="mod_lnav01_txt">日新システムズのEMS</span>
		</a>
	</li>
	<li class="mod_lnav01_item">
		<a class="mod_lnav01_link" href="#">
			<span class="mod_lnav01_txt">日新システムズのEMS</span>
		</a>
	</li>
	<li class="mod_lnav01_item">
		<a class="mod_lnav01_link" href="#">
			<span class="mod_lnav01_txt">日新システムズのEMS</span>
		</a>
	</li>
	<li class="mod_lnav01_item">
		<a class="mod_lnav01_link" href="#">
			<span class="mod_lnav01_txt">日新システムズのEMS</span>
		</a>
	</li>
</ul>
```
*/
.mod_lnav01 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 50px; }

.mod_lnav01_item { width: calc(50% - 5px); }

.mod_lnav01_item:nth-child(n+3) { margin-top: 25px; }

.mod_lnav01_link { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #e5f0f7; border: 1px solid #016cb1; position: relative; font-size: 1.3rem; color: inherit; height: 72px; text-decoration: none; }

.mod_lnav01_link:before { -webkit-transition: all 750ms cubic-bezier(0.255, 0.255, 0.255, 1); transition: all 750ms cubic-bezier(0.255, 0.255, 0.255, 1); width: 100%; height: 100%; padding-bottom: 1px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

.mod_lnav01_link:after { position: absolute; bottom: -10px; left: 50%; content: ""; display: block; width: 1px; height: 21px; background: #016cb1; }

.mod_lnav01.is_transparent .mod_btn01_link { background-color: transparent; }

.mod_lnav01.is_small { margin-top: 22px; }

.mod_lnav01.is_small .mod_lnav01_link { height: 42px; font-size: 1.2rem; }

.mod_lnav01_txt { line-height: 1.5; font-weight: 600; color: #016cb1; text-align: center; }

.mod_lnav01_txt_min { font-size: 1.1rem; }

@media all and (min-width: 600px) { .mod_lnav01 { margin-bottom: 80px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .mod_lnav01_item { width: calc(25% - 15px); }
  .mod_lnav01_item + .mod_lnav01_item { margin-left: 20px; }
  .mod_lnav01_item:nth-child(n+3) { margin-top: 0; }
  .mod_lnav01_item:nth-child(n+5) { margin-top: 30px; }
  .mod_lnav01_item:nth-child(4n+1) { margin-left: 0; }
  .mod_lnav01_link { height: 85px; font-size: 1.6rem; }
  .mod_lnav01_link:before { height: 85px; }
  .mod_lnav01_link:hover { border-color: #016cb1; }
  .mod_lnav01_link:hover .mod_lnav01_txt { color: #fff; }
  .mod_lnav01_link:hover:before { background-color: #016cb1; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_lnav01_link:hover:after { background: #fff; }
  .mod_lnav01_link:after { -webkit-transition: all 750ms cubic-bezier(0.255, 0.255, 0.255, 1); transition: all 750ms cubic-bezier(0.255, 0.255, 0.255, 1); }
  .mod_lnav01.is_small { margin-top: 22px; }
  .mod_lnav01.is_small .mod_lnav01_link { height: 85px; font-size: 1.4rem; }
  .mod_lnav01_txt { position: relative; z-index: 1; }
  .mod_lnav01_txt_min { font-size: 1.5rem; } }

/*
#styleguide
mod_lnav02
背景水色の左寄り横並びボタン


```
<div class="mod_lnav02">
	<ul class="mod_lnav02_list">
		<li class="mod_lnav02_item mod_color_blue">
			<a href="" class="mod_lnav02_link"><span class="mod_lnav02_txt">EMS</span></a>
		</li>
		<li class="mod_lnav02_item mod_color_blue">
			<a href="" class="mod_lnav02_link"><span class="mod_lnav02_txt">ECHONET Lite</span></a>
		</li>
		<li class="mod_lnav02_item mod_color_blue">
			<a href="" class="mod_lnav02_link"><span class="mod_lnav02_txt">屋外型<br>ゲートウェイ</span></a>
		</li>
		<li class="mod_lnav02_item mod_color_blue">
			<a href="" class="mod_lnav02_link"><span class="mod_lnav02_txt">IEC 61850<br>（SISCO社）</span></a>
		</li>
	</ul>
</div>
```
*/
.mod_lnav02 { background: #e5f0f7; margin-top: 50px; padding: 25px 18px; }

.mod_lnav02_tit { color: #016cb1; font-weight: bold; font-size: 1.5rem; margin-bottom: 10px; }

.mod_lnav02_list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.mod_lnav02_item { width: calc(50% - 5px); }

.mod_lnav02_item:nth-child(n+3) { margin-top: 10px; }

.mod_lnav02_link { box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; font-size: 1.3rem; border: 1px solid; color: inherit; text-decoration: none; text-align: center; background: #fff; min-height: 73px; }

.mod_lnav02_link:before { -webkit-transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 100%; padding-bottom: 1px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

.mod_lnav02_link:after { position: absolute; top: 50%; right: 0; content: ""; display: block; width: 14px; border-top: 1px solid; }

.mod_lnav02.is_transparent .mod_btn01_link { background-color: transparent; }

.mod_lnav02.is_small { margin-top: 22px; }

.mod_lnav02.is_small .mod_btn01_link { height: 42px; font-size: 1.2rem; }

.mod_lnav02_txt { font-weight: 600; line-height: 1.55; }

.lnav02_menuttl{ margin-bottom: 20px; font-size: 2.1rem; font-weight: 700; letter-spacing: .05em; text-align: center;}

@media all and (min-width: 600px) { .mod_lnav02 { margin-top: 100px; padding: 40px 0; }
  .mod_lnav02_tit { width: 1100px; margin: 0 auto 15px; font-size: 2.0rem; }
  .mod_lnav02_list { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin: 0 -8px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; }
  .mod_lnav02_item { width: calc(100% / 5 - 16px); margin: 0 8px 16px; }
  .mod_lnav02_item:nth-child(n+3) { margin-top: 0; }
  .mod_lnav02_link { min-height: 85px; padding-top: 2px; font-size: 1.6rem; }
  .mod_lnav02_link:before { min-height: 85px; }
  .mod_lnav02_link:hover { border-color: #016cb1; color: #fff; }
  .mod_lnav02_link:hover:before { background-color: #016cb1; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_lnav02_link:after { width: 30px; }
  .mod_lnav02.is_small { margin-top: 22px; }
  .mod_lnav02.is_small .mod_btn01_link { height: 42px; font-size: 1.4rem; }
  .mod_lnav02_txt { position: relative; z-index: 1; }
  .lnav02_menuttl{ margin-bottom: 30px; font-size: 3.2rem;}
}

/*
#styleguide
mod_lnav03
上部メニュー

```
<ul class="mod_lnav03">
	<li class="mod_lnav03_item">
		<a class="mod_lnav03_link" href="#">
			<span class="mod_lnav03_txt">日新システムズのEMS</span>
		</a>
	</li>
	<li class="mod_lnav03_item">
		<a class="mod_lnav03_link" href="#">
			<span class="mod_lnav03_txt">日新システムズのEMS</span>
		</a>
	</li>
</ul>
```
*/
.mod_lnav03 { display: none; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #e5f0f7; max-width: 1100px; min-width: 480px; height: 83px; }

.mod_lnav03_wrap { background: #e5f0f7; width: 100%; overflow-x: auto; margin-bottom: 50px; }

.mod_lnav03_wrap.fixed { position: fixed; top: 55px; left: 0; z-index: 100; }

.mod_lnav03_inner { padding-top: 0; }

.mod_lnav03_item { width: 120px; }

.mod_lnav03_link { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #e5f0f7; position: relative; font-size: 1.3rem; color: inherit; height: 83px; text-decoration: none; }

.mod_lnav03_link:after { position: absolute; bottom: 0; left: 50%; content: ""; display: block; width: 1px; height: 11px; background: #016cb1; }

.mod_lnav03_txt { line-height: 1.5; font-weight: 600; color: #016cb1; text-align: center; }

.mod_lnav03_txt_min { font-size: 1.1rem; }

@media all and (min-width: 600px) { .mod_lnav03 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: 85px; }
  .mod_lnav03_wrap { margin-bottom: 0; }
  .mod_lnav03_wrap.fixed { position: fixed; top: 80px; left: 0; z-index: 100; }
  .mod_lnav03_item { width: 134px; }
  .mod_lnav03_item.is_wide { width: 150px; }
  .mod_lnav03_link { font-size: 1.4rem; padding: 14px 0; height: 85px; }
  .mod_lnav03_link:after { bottom: 0; left: 50%; content: ""; display: block; width: 1px; height: 11px; background: #016cb1; position: absolute; }
  .mod_lnav03_link:hover { background: #016cb1; }
  .mod_lnav03_link:hover .mod_lnav03_txt { color: #fff; }
  .mod_lnav03_link:hover:after { background: #fff; }
  .mod_lnav03_txt { position: relative; z-index: 1; }
  .mod_lnav03_txt_min { font-size: 1.5rem; }
  .mod_lnav03.is_hide { position: fixed; top: 50px; left: 0; } }

/* .mod_lnav03_link:hover::after {
	background: #fff;
} */
/*
#styleguide
mod_btn_list01


```
<div class="mod_lnav02">
	<ul class="mod_lnav02_list">
		<li class="mod_lnav02_item mod_color_blue">
			<a href="" class="mod_lnav02_link"><span class="mod_lnav02_txt">EMS</span></a>
		</li>
		<li class="mod_lnav02_item mod_color_blue">
			<a href="" class="mod_lnav02_link"><span class="mod_lnav02_txt">ECHONET Lite</span></a>
		</li>
		<li class="mod_lnav02_item mod_color_blue">
			<a href="" class="mod_lnav02_link"><span class="mod_lnav02_txt">IEC 61850<br>（SISCO社）</span></a>
		</li>
	</ul>
</div>
```
*/
.mod_btn_list01_item + .mod_btn_list01_item { margin-top: 10px; }

.mod_btn_list01_item a { line-height: 1.4; text-align: center; }

.mod_btn_list01_item a:before { height: 55px; }

@media all and (min-width: 600px) { .mod_btn_list01 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .mod_btn_list01_item { width: calc(34% - 25px); max-width: calc(34% - 25px); margin: 0; }
  .mod_btn_list01_item + .mod_btn_list01_item { margin-top: 0; margin-left: 25px; }
  .mod_btn_list01_item:nth-child(3n+1) { margin-left: 0; }
  .mod_btn_list01_item:nth-child(n+4) { margin-top: 10px; }
  .mod_btn_list01_item a { height: 85px; padding: 13px 0 14px; line-height: 1.4; text-align: center; }
  .mod_btn_list01_item a:before { height: 85px; } }

/*
#styleguide
mod_btns01


```
<div class="mod_btns01 areaBtn">
	<p class="btn mod_btns01_btn mod_btn01"><a href="" class="mod_btn01_link mod_color_blue"><span class="mod_btn01_txt">一覧に戻る</span></a></p>
</div>
```
*/
.mod_btn02 { margin: 30px 0 0; }

.mod_btn02 .btn { margin-top: 0; }

.mod_btn02 .btn + .btn { margin-top: 10px; }

.mod_btn02 .btn a { font-size: 1.5rem; font-weight: 500; display: block; height: auto; padding: 15px; line-height: 1.4; text-decoration: none; text-align: center; color: #fff; position: relative; }

.mod_btn02 .btn a:after { position: absolute; content: ''; width: 15px; height: 15px; background: url(../../img/common/ico_download01.png) no-repeat; background-size: contain; margin-left: 10px; vertical-align: middle; top: 35%; }

@media all and (min-width: 600px) { .mod_btn02 { margin: 50px 0 0; }
  .mod_btn02 .btn { margin-top: 0; }
  .mod_btn02 .btn a { font-size: 2.6rem; font-weight: bold; padding: 45px; }
  .mod_btn02 .btn a:after { width: 30px; height: 30px; top: 38%; }
  .mod_btn02 .btn a:hover { color: #ffe156; }
  .mod_btn02 .btn a:hover:after { background-image: url("../../img/common/ico_download01_yellow.png"); } }

/*
↑のメール版
	<div class="areaBtn mod_btn02-2">
		<div class="inner mod_inner01">
			<p class="btn is-ico-mail"><a href="/contact/" class="mod_gradation_blue">お問い合わせ</a></p>
		</div>
	</div>
*/
.mod_btn02-2 { margin: 30px 0 0; }
.mod_btn02-2 .btn { margin-top: 0; }
.mod_btn02-2 .btn + .btn { margin-top: 10px; }
.mod_btn02-2 .btn a { font-size: 1.5rem; font-weight: 500; display: block; height: auto; padding: 15px; line-height: 1.4; text-decoration: none; text-align: center; color: #fff; position: relative; }

.mod_btn02-2 .btn a:after { position: absolute; content: ''; width: 15px; height: 15px; background: url(../../img/common/ico_mail01.png) no-repeat; background-size: contain; margin-left: 10px; vertical-align: middle; top: 35%; }

@media all and (min-width: 600px) { .mod_btn02-2 { margin: 50px 0 0; }
  .mod_btn02-2 .btn { margin-top: 0; }
  .mod_btn02-2 .btn a { font-size: 2.6rem; font-weight: bold; padding: 45px; }
  .mod_btn02-2 .btn a:after { width: 30px; height: 30px; top: 38%; }
  .mod_btn02-2 .btn a:hover { color: #ffe156; }
  .mod_btn02-2 .btn a:hover:after { background-image: url("../../img/common/ico_mail01_yellow.png"); } }

/*
#styleguide
mod_card01


```

```
*/
.mod_card01 { position: relative; display: block; padding: 20px 23px 25px; background: #fff; border: 1px solid #c6c6c6; }

.mod_card01 + .mod_card01 { margin-top: 15px; }

.mod_card01_link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; line-height: 0; overflow: hidden; text-indent: 200%; white-space: nowrap; }

.mod_card01_label { display: inline-block; margin-bottom: 10px; padding: 0 8px; color: #fff; font-size: 1rem; font-weight: 600; }

.mod_card01_tit { font-size: 1.5rem; line-height: 1.5; font-weight: 600; }

.mod_card01_date { position: relative; margin-top: 8px; padding-left: 32px; }

.mod_card01_date:before { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; display: block; width: 20px; height: 20px; background: url("../../img/common/ico_date01.png") no-repeat center/contain; }

.mod_card01_txt { margin: 15px -23px 0; padding: 15px 23px 0; border-top: 1px solid #e2e2e2; }

.mod_card01_txt a { color: #016cb1; }

.mod_card01_txt a[target]:after { content: ""; display: inline-block; width: 13px; height: 9px; margin-left: 8px; background: url("../img/common/ico_blank01_blue.png") no-repeat center/contain; }

.mod_card01_txt table { width: 100%; table-layout: fixed; font-size: 1.2rem; }

.mod_card01_txt table + table { margin-top: 18px; }

.mod_card01_txt th, .mod_card01_txt td { padding: 3px 0; }

.mod_card01_txt th { box-sizing: border-box; width: 68px; font-weight: 700; }

.mod_card01_txt dl { margin-top: 18px; padding: 16px 20px 20px; border-radius: 6px; background: #f3f3f3; }

.mod_card01_txt dl:first-child { margin-top: 0; }

.mod_card01_txt dt { font-weight: 700; }

.mod_card01_txt dd { margin-top: 5px; }

@media all and (min-width: 600px) { .mod_card01 { box-sizing: border-box; width: 538px; margin: 0 12px 25px; padding: 28px 30px 30px; vertical-align: top; letter-spacing: .05em; border-width: 2px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_card01_list { margin: 0 -12px; letter-spacing: -.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .mod_card01 + .mod_card01 { margin-top: 0; }
  .mod_card01:hover { box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); }
  .mod_card01_label { padding: 2px 8px 1px; line-height: 1.5; font-size: 1.2rem; }
  .mod_card01_tit { font-size: 1.9rem; }
  .mod_card01_date { font-size: 1.5rem; line-height: 1.5; margin-top: 10px; }
  .mod_card01_date:before { width: 25px; height: 25px; }
  .mod_card01_txt { margin: 25px -30px 0; padding: 18px 30px 0; }
  .mod_card01_txt a { position: relative; z-index: 2; }
  .mod_card01_txt a[target]:after { margin-left: 4px; }
  .mod_card01_txt a:hover { text-decoration: none; }
  .mod_card01_txt table { font-size: 1.4rem; }
  .mod_card01_txt table + table { margin-top: 18px; }
  .mod_card01_txt th, .mod_card01_txt td { padding: 5px 0; }
  .mod_card01_txt th { width: 80px; font-size: 1.6rem; }
  .mod_card01_txt dl { margin-top: 15px; padding: 18px 20px 20px; font-size: 1.5rem; border-radius: 5px; }
  .mod_card01_txt dl dt { font-size: 1.6rem; } }

/*
#styleguide
mod_card02


```

```
*/
.mod_card02_list { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15); }

.mod_card02_list + .mod_card02_list { margin-top: 15px; }

.mod_card02_link { display: block; text-decoration: none; height: 100%; }

.mod_card02_detail { position: relative; padding: 10px 25px 20px; }

.mod_card02_detail:before { content: ''; position: absolute; top: 50%; right: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); width: 20px; height: 1px; background: #016cb1; }

.mod_card02_tit { font-size: 1.7rem; color: #016cb1; font-weight: bold; }

.mod_card02_txt { font-size: 1.2rem; }

@media all and (min-width: 600px) { .mod_card02 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -12px; }
  .mod_card02_list { -ms-flex-preferred-size: calc(33.3333% - 24px); flex-basis: calc(33.3333% - 24px); margin: 0 12px 25px; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15); }
  .mod_card02_list + .mod_card02_list { margin-top: 0; }
  .mod_card02_link { position: relative; display: block; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_card02_link:hover { opacity: .7; }
  .mod_card02_link:hover .mod_card02_detail:before { width: 35px; }
  .mod_card02_img { position: relative; }
  .mod_card02_detail { position: relative; padding: 25px 30px; }
  .mod_card02_detail:before { width: 30px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_card02_tit { position: absolute; top: -130px; left: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 3em; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); font-size: 1.8rem; color: #fff; text-align: center; line-height: 1.5; }
  .mod_card02_txt { font-size: 1.4rem; } }


.mod_card03_list{
	margin-top: 15px;
	 background: #fff; 
	 box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
}
.mod_card03_link {     
	display: block;
    padding: 20px;
    height: 100%; 
	 text-decoration: none;
	background: #fff;
}
.mod_card03_detail { position: relative; padding-top: 12px; }
.mod_card03_tit { font-size: 1.7rem; color: #016cb1; font-weight: bold; }
.mod_card03_txt { font-size: 1.2rem; }

@media all and (min-width: 600px){
	.mod_card03_list{
		max-width: 1100px;
		margin: auto;
		width: 100%;
		
	}

	.mod_card03_link{
		display: flex;
        justify-content: flex-start;
        align-content: center;
        flex-wrap: wrap;
        align-items: flex-start;
	}
	.mod_card03_list .mod_card03_img{
		flex: 0 1 48%;
		width:48%;
		max-width:48%;
	}
	.mod_card03_list .mod_card03_detail{
		flex: 0 1 45%;
        width: 45%;
        max-width: 45%;
        margin-left: 5%;
        padding: 30px 0px;
	}
	.mod_card03_tit { 
		margin-bottom: 20px;
        font-size: 2.2rem;
        border-bottom: 2px solid;
        line-height: 2;
	}
	.mod_card03_txt { font-size: 1.4rem; }
}

/* color
================================================ */
/*
#styleguide
mod_color_yellow


```
<p class="mod_color_yellow">見出しテキスト</p>
```
*/
.mod_color_yellow { color: #ffe156; }

/*
#styleguide
mod_color_blue


```
<p class="mod_color_blue">見出しテキスト</p>
```
*/
.mod_color_blue { color: #016cb1; }

/*
#styleguide
mod_color_red


```
<p class="mod_color_red">見出しテキスト</p>
```
*/
.mod_color_red { color: #dd2727; }

.mod_color_gray { color: #999; }

.mod_color_sky { color: #1cacda; }
/*
#styleguide
mod_gradation_blue


```
<p class="mod_gradation_blue"><a href="">青のグラデーション</a></p>
```
*/
.mod_gradation_blue { background-image: -webkit-linear-gradient(45deg, #0171b8 0%, #0185d8 100%); background-image: linear-gradient(45deg, #0171b8 0%, #0185d8 100%); }

/*
#styleguide
mod_gradation_sky


```
<p class="mod_gradation_sky"><a href="">水色のグラデーション</a></p>
```
*/
.mod_gradation_sky { background-image: -webkit-linear-gradient(45deg, #1cacda 0%, #21caff 100%); background-image: linear-gradient(45deg, #1cacda 0%, #21caff 100%); }

.mod_gradation_yellow { background-image: -webkit-linear-gradient(45deg, #ffe156 0%, #ffff65 100%); background-image: linear-gradient(45deg, #ffe156 0%, #ffff65 100%); }

/* form
================================================ */
/*
#styleguide
mod_form01

form
```


```
*/
/*  mod_info01
================================================== */
.mod_info01 .txt + .relation { margin-top: 25px; }

.mod_info01 .news { margin-top: 25px; border: 1px solid  #e2e2e2; padding: 18px 20px 0 25px; }
.mod_info01 .news .tit { margin-bottom: 10px; padding-left: 37px; position: relative; font-size: 1.5rem; font-weight: 500; }
.mod_info01 .news .tit:before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 28px; height: 25px; margin-top: -13px; background: url(/img/common/ico_news01.png) no-repeat center; background-size: 100%; }
.mod_info01 .news .txt { margin-bottom: 7px; line-height: 1.85; font-weight: 400; }
.mod_info01 .news .txt span { display: block; color: #016cb1; }
.mod_info01 .news .list { margin-bottom: 23px; }
.mod_info01 .news .list .item { padding-left: 12px; line-height: 1.8; }
.mod_info01 .news .list .item:before { left: 0; }
.mod_info01 .news .btn { margin-top: 0; }
.mod_info01 .news .btn a { height: auto; padding: 11px 0 13px; line-height: 1.4; text-align: center; }

.mod_info01 .press { border: 1px solid  #e2e2e2; margin-top: -1px; padding: 18px 20px 0 25px; }
.mod_info01 .press .tit { margin-bottom: 10px; padding-left: 37px; position: relative; font-size: 1.5rem; font-weight: 500; }
.mod_info01 .press .tit:before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 28px; height: 25px; margin-top: -13px; background: url(/img/common/ico_news01.png) no-repeat center; background-size: 100%; }
.mod_info01 .press .txt { margin-bottom: 7px; line-height: 1.85; font-weight: 400; }
.mod_info01 .press .txt span { display: block; color: #016cb1; }
.mod_info01 .press .list { margin-bottom: 23px; }
.mod_info01 .press .list .item { padding-left: 12px; line-height: 1.8; }
.mod_info01 .press .list .item:before { left: 0; }
.mod_info01 .press .btn { margin-top: 0; }
.mod_info01 .press .btn a { height: auto; padding: 11px 0 13px; line-height: 1.4; text-align: center; }

.mod_info01 .relation { border: 1px solid  #e2e2e2; margin-top: -1px; padding: 20px 20px 25px; }
.mod_info01 .relation .tit { margin-bottom: -12px; padding-left: 37px; position: relative; font-size: 1.5rem; font-weight: 500; }
.mod_info01 .relation .tit:before { content: ""; display: block; position: absolute; top: 50%; left: 0px; width: 23px; height: 30px; margin-top: -15px; background: url(/img/common/ico_info01.png) no-repeat center; background-size: 100%; }
.mod_info01 .relation .txt { margin-bottom: 7px; line-height: 1.85; font-weight: 400; }
.mod_info01 .relation .txt span { display: block; color: #016cb1; }
.mod_info01 .relation .list { margin-bottom: 23px; }
.mod_info01 .relation .list .item { padding-left: 12px; line-height: 1.8; }
.mod_info01 .relation .list .item:before { left: 0; }
.mod_info01 .relation .btn + .btn { margin-top: 10px; }

.mod_info01 .movie { border: 1px solid  #e2e2e2; margin-top: -1px; padding: 20px 20px 25px; }
.mod_info01 .movie .tit { margin-bottom: -12px; padding-left: 37px; position: relative; font-size: 1.5rem; font-weight: 500; }
.mod_info01 .movie .tit:before { content: ""; display: block; position: absolute; top: 50%; left: 0px; width: 28px; height: 30px; margin-top: -15px; background: url(/img/common/ico_info02.png) no-repeat center; background-size: 100%; }
.mod_info01 .movie .txt { margin-bottom: 7px; line-height: 1.85; font-weight: 400; }
.mod_info01 .movie .txt span { display: block; color: #016cb1; }
.mod_info01 .movie .list { margin-bottom: 23px; }
.mod_info01 .movie .list .item { padding-left: 12px; line-height: 1.8; }
.mod_info01 .movie .list .item:before { left: 0; }
.mod_info01 .movie .btn + .btn { margin-top: 10px; }

.mod_info01 .bnr { margin-top: 30px; }

.mod_info01 .bnr a { display: block; margin: 10px 0; }

.mod_info01 .example { border: 1px solid #e2e2e2; border-top: 0; padding: 18px 20px 0 25px; }
.mod_info01 .example .tit { margin-bottom: 10px; padding-left: 37px; position: relative; font-size: 1.5rem; font-weight: 500; }
.mod_info01 .example .tit:before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 27px; height: 30px; margin-top: -18px; background: url(/img/common/ico_light01.png) no-repeat center; background-size: 100%; }

.mod_info01 .info { border: 1px solid #e2e2e2; border-top: 0; padding: 18px 20px 0 25px; }
.mod_info01 .info .tit { margin-bottom: 10px; padding-left: 37px; position: relative; font-size: 1.5rem; font-weight: 500; }
.mod_info01 .info .tit:before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 25px; height: 23px; margin-top: -13px; background: url(/img/common/ico_book01.png) no-repeat center; background-size: 100%; }

.mod_info01 .archive01 { padding-bottom: 24px; }
.mod_info01 .archive01 .item a { display: flex; align-items: flex-start; color: #016cb1; }
.mod_info01 .archive01 .item .txt { font-size: 1.3rem; }
.mod_info01 .archive01 .item + .item { margin-top: 1em; }

.mod_info01 .archive02 { padding-bottom: 24px; }
.mod_info01 .archive02 .item a { display: flex; align-items: flex-start; color: #016cb1; }
.mod_info01 .archive02 .item .img { width: 47.5%; padding-right: 2.5%; }
.mod_info01 .archive02 .item .txt { flex: 1; font-size: 1.3rem; }
.mod_info01 .archive02 .item + .item { margin-top: 15px; }

@media all and (min-width: 600px) { .mod_info01 .inner { padding-top: 35px; }
  .mod_info01 .txt + .relation { margin-top: 45px; }

  .mod_info01 .news { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 26px 30px 0 36px; margin-top: 45px; }
  .mod_info01 .news .tit { -ms-flex-preferred-size: 150px; flex-basis: 150px; margin-bottom: 0; font-size: 2.0rem; font-weight: bold; line-height: 1.4; }
  .mod_info01 .news .tit:before { content: ""; display: block; position: absolute; top: 1px; left: -1px; margin-top: 0; }
  .mod_info01 .news .areaTxt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
  .mod_info01 .news .txt { margin-bottom: 13px; font-size: 1.4rem; }
  .mod_info01 .news .txt span { margin-bottom: 7px; font-size: 1.6rem; font-weight: bold; }
  .mod_info01 .news .list { margin-bottom: 21px; }
  .mod_info01 .news .list .item { padding-left: 17px; line-height: 1.8; }
  .mod_info01 .news .list .item:before { left: 0; }
  .mod_info01 .news .btn { margin: 0; }
  .mod_info01 .news .btn a { height: 85px; padding: 13px 0 14px; line-height: 1.4; text-align: center; }
  .mod_info01 .news .btn a:before { height: 85px; }

  .mod_info01 .press { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: -1px; padding: 26px 30px 0 36px; }
  .mod_info01 .press .tit { -ms-flex-preferred-size: 150px; flex-basis: 150px; margin-bottom: 0; font-size: 2.0rem; font-weight: bold; line-height: 1.4; }
  .mod_info01 .press .tit:before { content: ""; display: block; position: absolute; top: 1px; left: -1px; margin-top: 0; }
  .mod_info01 .press .areaTxt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
  .mod_info01 .press .txt { margin-bottom: 13px; font-size: 1.4rem; }
  .mod_info01 .press .txt span { margin-bottom: 7px; font-size: 1.6rem; font-weight: bold; }
  .mod_info01 .press .list { margin-bottom: 21px; }
  .mod_info01 .press .list .item { padding-left: 17px; line-height: 1.8; }
  .mod_info01 .press .list .item:before { left: 0; }
  .mod_info01 .press .btn { margin: 0; }
  .mod_info01 .press .btn a { height: 85px; padding: 13px 0 14px; line-height: 1.4; text-align: center; }
  .mod_info01 .press .btn a:before { height: 85px; }

  .mod_info01 .relation { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: -1px; padding: 26px 30px 26px 38px; }
  .mod_info01 .relation .tit { -ms-flex-preferred-size: 150px; flex-basis: 150px; margin-bottom: 0; font-size: 2.0rem; font-weight: bold; line-height: 2.6; }
  .mod_info01 .relation .tit:before { top: 10px; margin-top: 0; }
  .mod_info01 .relation .areaTxt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
  .mod_info01 .relation .txt { margin-bottom: 13px; font-size: 1.4rem; }
  .mod_info01 .relation .txt span { margin-bottom: 7px; font-size: 1.6rem; font-weight: bold; }
  .mod_info01 .relation .list { margin-bottom: 21px; }
  .mod_info01 .relation .list .item { padding-left: 17px; line-height: 1.8; }
  .mod_info01 .relation .list .item:before { left: 0; }
  .mod_info01 .relation .areaBtn,.mod_info01 .relation .btnList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin-left: 20px; }
  .mod_info01 .relation .btn { max-width: none; width: 350px; margin: 0; }
  .mod_info01 .relation .btn a { min-height: 55px; height: 100%; padding: 14px 0 14px; line-height: 1.4; text-align: center; }
  .mod_info01 .relation .btn a:before { height: 85px; }
  .mod_info01 .relation .btn + .btn { margin-top: 0; margin-left: 10px; }
  .mod_info01 .relation .btn:nth-child(n+3) { margin-top: 10px; }
  .mod_info01 .relation .btn:nth-child(2n+1) { margin-left: 0; }

  .mod_info01 .movie { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: -1px; padding: 26px 30px 26px 36px; }
  .mod_info01 .movie .tit { -ms-flex-preferred-size: 150px; flex-basis: 150px; margin-bottom: 0; font-size: 2.0rem; font-weight: bold; line-height: 2.6; }
  .mod_info01 .movie .tit:before { top: 10px; margin-top: 0; }
  .mod_info01 .movie .areaTxt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
  .mod_info01 .movie .txt { margin-bottom: 13px; font-size: 1.4rem; }
  .mod_info01 .movie .txt span { margin-bottom: 7px; font-size: 1.6rem; font-weight: bold; }
  .mod_info01 .movie .list { margin-bottom: 21px; }
  .mod_info01 .movie .list .item { padding-left: 17px; line-height: 1.8; }
  .mod_info01 .movie .list .item:before { left: 0; }
  .mod_info01 .movie .areaBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin-left: 20px; }
  .mod_info01 .movie .btn { max-width: none; width: 350px; margin: 0; }
  .mod_info01 .movie .btn a { min-height: 55px; height: 100%; padding: 14px 0 14px; line-height: 1.4; text-align: center; }
  .mod_info01 .movie .btn a:before { height: 85px; }
  .mod_info01 .movie .btn + .btn { margin-top: 0; margin-left: 10px; }
  .mod_info01 .movie .btn:nth-child(n+3) { margin-top: 10px; }
  .mod_info01 .movie .btn:nth-child(2n+1) { margin-left: 0; }

	.mod_info01 .example { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 26px 30px 0 36px; }
  .mod_info01 .example .tit { -ms-flex-preferred-size: 150px; flex-basis: 150px; margin-bottom: 0; font-size: 2.0rem; font-weight: bold; line-height: 1.4; }
  .mod_info01 .example .tit:before { content: ""; display: block; position: absolute; top: 1px; left: -1px; margin-top: 0; }
  .mod_info01 .example .areaTxt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

	.mod_info01 .info { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 26px 30px 0 36px; }
  .mod_info01 .info .tit { -ms-flex-preferred-size: 150px; flex-basis: 150px; margin-bottom: 0; font-size: 2.0rem; font-weight: bold; line-height: 1.4; }
  .mod_info01 .info .tit:before { content: ""; display: block; position: absolute; top: 1px; left: -1px; margin-top: 0; }
  .mod_info01 .info .areaTxt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }


  .mod_info01 .bnr { margin: 60px -15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .mod_info01 .bnr a { width: 535px; margin: 0 15px; }
  .mod_info01 .bnr a:hover { opacity: .7; } 
	
	.mod_info01 .archive01 { padding-bottom: 27px; }
	.mod_info01 .archive01 .item .txt { font-size: 1.4rem; margin-bottom: 0; }
	.mod_info01 .archive01 .item + .item { margin-top: 0; }

	.mod_info01 .archive02 { padding-bottom: 27px; display: flex; flex-wrap: wrap; margin: 0 -15px -30px; }
	.mod_info01 .archive02 .item { width: calc(33.333% - 30px); margin: 0 15px 30px; }
	.mod_info01 .archive02 .item a { display: block; }
	.mod_info01 .archive02 .item .img { width: 100%; padding: 0 0 5px; }
	.mod_info01 .archive02 .item .txt { font-size: 1.4rem; }
	.mod_info01 .archive02 .item + .item { margin-top: 0; }

}

/* inner
================================================ */
/*
#styleguide
mod_inner01

SP:両端パディング15px
PC:1100pxでセンタリング＆border-box

```
<section id="hoge">
	<div class="inner mod_inner01">
		<h2 class="tit">タイトル</h3>
		<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</section>
```
*/
.mod_inner01 { box-sizing: border-box; padding-left: 18px; padding-right: 18px; }

@media all and (min-width: 600px) { .mod_inner01 { width: 1100px; margin: auto; padding-right: 0; padding-left: 0; } }

.mod_inner01.anchor { padding-top: 230px; margin-top: -185px; }

@media all and (min-width: 600px) { .mod_inner01.anchor { padding-top: 180px; margin-top: -70px; } }

.is_sticky .mod_inner01.anchor { padding-top: 90px; margin-top: -45px; }

@media all and (min-width: 600px) { .is_sticky .mod_inner01.anchor { padding-top: 60px; margin-top: 0; } 
}

/* mod_section
------------------------------------- */
.mod_inner_wrap01 .inner { padding-top: 50px; }

@media all and (min-width: 600px) { .mod_inner_wrap01 .inner { padding-top: 100px; } }

.mod_inner_contents01 { padding-top: 20px; }

@media all and (min-width: 600px) { .mod_inner_contents01 { padding-top: 40px; } }

/* line
================================================ */
/*
#styleguide
mod_line01


```
<p class="line mod_line01"><span></span></p>
```
*/
.mod_line01 { position: absolute; z-index: 2; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.mod_line01 span { display: block; height: 100%; width: 100%; background: #1cacda; }

.mod_line01.is_reverse { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }

@media all and (max-width: 599px) { .mod_line01 { width: 133px; height: 1px; } }

@media all and (min-width: 600px) { .mod_line01 { width: 0; height: 0; }
  .mod_line01.is_anim { width: 200px; height: 2px; }
  .mod_line01.is_anim span { -webkit-animation: line 1.6s cubic-bezier(0.68, 0.035, 0.5, 1) both; animation: line 1.6s cubic-bezier(0.68, 0.035, 0.5, 1) both; }
  .mod_line01.is_anim_reverse { width: 200px; height: 2px; }
  .mod_line01.is_anim_reverse span { -webkit-animation: lineEnd 1.6s cubic-bezier(0.68, 0.035, 0.5, 1) both; animation: lineEnd 1.6s cubic-bezier(0.68, 0.035, 0.5, 1) both; } }

@-webkit-keyframes line { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  10% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  40% { -webkit-transform: scale(1, 1); transform: scale(1, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  60% { -webkit-transform: scale(1, 1); transform: scale(1, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  80% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  100% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; } }

@keyframes line { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  10% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  40% { -webkit-transform: scale(1, 1); transform: scale(1, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  60% { -webkit-transform: scale(1, 1); transform: scale(1, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  80% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  100% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; } }

@-webkit-keyframes lineEnd { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  10% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  40% { -webkit-transform: scale(1, 1); transform: scale(1, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  60% { -webkit-transform: scale(1, 1); transform: scale(1, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  80% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  100% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; } }

@keyframes lineEnd { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  10% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  40% { -webkit-transform: scale(1, 1); transform: scale(1, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top; }
  60% { -webkit-transform: scale(1, 1); transform: scale(1, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  80% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; }
  100% { -webkit-transform: scale(0, 1); transform: scale(0, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top; } }

/* title
================================================ */
/*
#styleguide
mod_list01


```
<ul class="childList mod_list01">
	<li class="childItem mod_list01_item">労働力の確保、技術継承</li>
	<li class="childItem mod_list01_item">人手不足による慢性的な長時間労働</li>
	<li class="childItem mod_list01_item">少量多品種生産におけるロボット化</li>
</ul>
```
*/
/*
#styleguide
mod_list01


```
<p class="tit mod_tit01">見出しテキスト</p>
```
*/
.mod_list01 { margin-bottom: 20px; }

.mod_list01_item { padding-left: 18px; position: relative; font-size: 1.3rem; line-height: 1.75; }

.mod_list01_item:before { content: ""; display: block; position: absolute; top: 10px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: #016cb1; }

.mod_list01_item a{ color: #016cb1;}

.mod_list02_item span{color: #016cb1;}

.mod_list_txt a{ color: #016cb1;}

.file_table{
	border: 1px solid #333;
}
.file_table .file_table_main,.file_table_sub{
	padding: 10px 0;
	border: 1px solid #333;
	text-align: center;
	vertical-align: middle;
}
.file_table .hai{
	width: 24%;
	background: #a0d9ff;
}

.file_table .ao{
	background: #ffec97;
}

@media all and (min-width: 600px) { .mod_list01_item { padding-left: 21px; font-size: 1.5rem; line-height: 1.75; }
  .mod_list01_item:before { top: 11px; width: 6px; height: 6px; } }

.mod_list_box01_item { padding: 20px; border: 1px solid #e2e2e2; box-sizing: border-box; overflow: hidden; }

.mod_list_box01_item + .mod_list_box01_item { margin-top: 20px; }

.mod_list_box01_img { float: left; width: 102px; margin: 0 15px 10px 0; }

.mod_list_box01_tit { padding-top: 35px; font-size: 1.5rem; font-weight: bold; }

.mod_list_box01_txt { clear: both; }

.mod_list01_impact{
	margin-bottom: 15px;
    padding-left: 15px;
    position: relative;
    font-size: 1.5rem;
    line-height: 1.75;
    font-weight: bold;
    color: #1cacda;
}
.mod_list01_impact:before { 
	content: "";
    display: block;
    position: absolute;
    top: 13px;
    left: 0;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: #1cacda;
}

.mod_list02_item{padding-left: 40px;}

@media all and (min-width: 600px) { 
	.mod_list_box01_item { padding: 40px; }
	.mod_list_box01_img { width: 140px; margin: 0 30px 0 0; }
	.mod_list_box01_detail { overflow: hidden; }
	.mod_list_box01_tit { padding-top: 0; font-size: 1.8rem; }
	.mod_list_box01_txt { margin-top: 10px; clear: none; } 
	.mod_list01_impact{
		font-size: 1.7rem;
	}
}

/*
================================================ */
/*
#styleguide
mod_otherLink01_link01


```
<ul class="mod_otherLink01">
	<li class="mod_otherLink01_item iot">
		<a href="/iot/" class="mod_otherLink01_link">
			<p class="mod_otherLink01_en fontRoboto">SOLUTION</p>
			<p class="mod_otherLink01_ja fontNotoSerif">産業IoTソリューション</p>
		</a>
	</li>
	<li class="mod_otherLink01_item engineering">
		<a href="/engineering/" class="mod_otherLink01_link">
			<p class="mod_otherLink01_en fontRoboto">ENGINEERING</p>
			<p class="mod_otherLink01_ja fontNotoSerif">エンジニアリングサービス</p>
		</a>
	</li>
</ul>
```
*/
.mod_otherLink01 { margin: 0 -18px; }

.mod_otherLink01_item { position: relative; height: 185px; text-align: center; }

.mod_otherLink01_item + .mod_otherLink01_item { top: -2px; }

.mod_otherLink01_item.iot .mod_otherLink01_link { background-image: url(../../img/common/bg_other02_sp.png); }

.mod_otherLink01_item.engineering .mod_otherLink01_link { background-image: url(../../img/common/bg_other01_sp.png); }

.mod_otherLink01_item.energy .mod_otherLink01_link { background-image: url(../../img/common/bg_other03_sp.png); }

.mod_otherLink01_link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; height: 100%; width: 100%; text-decoration: none; background: no-repeat center / cover; }

.mod_otherLink01_link:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; height: 120px; background: rgba(1, 108, 177, 0.9); }

.mod_otherLink01_en { position: relative; z-index: 1; color: #ffe156; font-size: 1rem; font-weight: bold; }

.mod_otherLink01_ja { position: relative; z-index: 1; color: #fff; font-size: 1.7rem; font-weight: bold; }

@media all and (min-width: 600px) { .mod_otherLink01 { margin: 0 -15px; display: -webkit-box; display: -ms-flexbox; display: flex; }
  .mod_otherLink01_item { position: relative; -ms-flex-preferred-size: calc(50% - 30px); flex-basis: calc(50% - 30px); margin: 0 15px; height: 180px; }
  .mod_otherLink01_item + .mod_otherLink01_item { top: 0; }
  .mod_otherLink01_item.iot .mod_otherLink01_link { background-image: url(../../img/common/bg_other02_pc.png); }
  .mod_otherLink01_item.engineering .mod_otherLink01_link { background-image: url(../../img/common/bg_other01_pc.png); }
  .mod_otherLink01_item.energy .mod_otherLink01_link { background-image: url(../../img/common/bg_other03_pc.png); }
  .mod_otherLink01_link { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_otherLink01_link:hover { opacity: .7; }
  .mod_otherLink01_link:before { display: none; }
  .mod_otherLink01_en { color: #fff; font-size: 2.8rem; }
  .mod_otherLink01_ja { font-size: 1.5rem; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; } }

/* pager
================================================ */
/*
#styleguide
mod_pagination01

pager

```
<ul class="pager mod_pagination01">
	<li class="previous"><a href="#">&lt;</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="#">&gt;</a></li>
</ul>
```
*/
.mod_pagination01 { text-align: center; letter-spacing: -.5em; }

.mod_pagination01 li { display: inline-block; margin: 0 5px 10px; letter-spacing: 0; }

.mod_pagination01 li a, .mod_pagination01 li span { display: block; width: 30px; height: 30px; box-sizing: border-box; padding-top: 1px; border: 1px solid #000; text-decoration: none; }

.mod_pagination01 li.current span { color: #fff; background: #000; }

.mod_pagination01 li.previous { margin-right: 15px; }

.mod_pagination01 li.next { margin-left: 15px; }

@media all and (min-width: 600px) { .mod_pagination01 li { margin: 0 3px; }
  .mod_pagination01 li a { width: 30px; height: 30px; padding: 4px 0 0 0; font-size: 1.3rem; }
  .mod_pagination01 li a:hover { text-decoration: none; border: 1px solid #034198; background-color: #034198; color: #fff; }
  .mod_pagination01 li.current { width: 30px; height: 30px; font-size: 1.3rem; padding: 4px 0 0 0; }
  .mod_pagination01 li.previous { margin-right: 0; }
  .mod_pagination01 li.next { margin-left: 0; } }

/*
#styleguide
mod_pagination02

pager

```
<ul class="mod_pagination02">
	<li class="mod_pagination02_previous"><a href="">前へ</a></li>
	<li class="mod_pagination02_back"><a href="/blog/">一覧へ</a></li>
	<li class="mod_pagination02_next"><a href="">次へ</a></li>
</ul>
```
*/
/*!  single
================================================ */
/*
#styleguide
mod_single01

.mod_single01 - base style

```
<article class="mod_single01">
	<div class="mod_single01_thum"><img src="https://placehold.jp/810x522.png" alt=""></div>
	<header class="mod_single01_head">
		<div class="mod_single01_meta">
			<ul class="mod_single01_tag mod_tag01 is_black">
				<li>ニュース</li>
			</ul>
			<time class="mod_single01_date">2019.12.12</time>
		</div>
		<h1>年末年始休業日お知らせ</h1>
	</header>
	<div class="mod_single01_content">
		<p>12/29(土)～1/6(日)まで誠に勝手ながら冬季休暇とさせていただきます。<br>新年2019年1月7日より通常営業致します。</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
	<p class="mod_single01_btn mod_btn01"><a href="/news/">一覧に戻る</a></p>
</article>
```
*/
.mod_single01 { padding: 48px 18px 20px; background: #fff; }

.mod_single01_meta { display: flex; align-items: center; }

.mod_single01_tag { margin-bottom: 10px; }

.mod_single01_date { margin: 0 0 10px 10px; }

.mod_single01_tag li { display: inline-block; margin-right: 1px; background: #016cb1; border: 1px solid #016cb1; padding: 1px 8px 0; font-size: 1rem; color: #fff; font-weight: 700; }

.mod_single01_tag li.end { background: none; border: 1px solid #333; color: #333; font-weight: 700; }

.mod_single01_info { margin-bottom: 6px; }

.mod_single01_info .item { margin-top: 1px; display: table; font-size: 1.2rem; }

.mod_single01_info .item span { display: table-cell; width: 40px; font-weight: 700; }

.mod_single01_info .item span + span { width: auto; padding-left: 5px; font-weight: 400; }

.mod_single01 h1 { margin-bottom: 25px; padding-bottom: 10px; font-size: 2rem; line-height: 1.5; font-weight: 700; letter-spacing: .08em; border-bottom: 2px solid #016cb1; }

.mod_single01_content { margin-top: 18px; }

.mod_single01_content *:first-child { margin-top: 0; }

.mod_single01_content *:last-child { margin-bottom: 0; }

.mod_single01_content p { margin: 10px 0; }

@media all and (min-width: 600px) { .mod_single01 { width: 1100px; margin: auto; padding: 40px 0 7px 0; }
  .mod_single01_meta { margin-bottom: 10px; }
  .mod_single01_tag { display: inline-block; margin-bottom: 0; margin-right: 24px; }
	.mod_single01_date  { margin-left: 0; margin-bottom: 0; }
  .mod_single01_tag li { margin-right: -1px; padding: 1px 8px 0px; }
  .mod_single01_info { display: inline-block; margin-bottom: 0; position: relative; top: 2px; }
  .mod_single01_info .item { display: inline-block; font-size: 1.4rem; }
  .mod_single01_info .item + .item { margin-left: 10px; }
  .mod_single01_info .item span { width: auto; }
  .mod_single01 h1 { margin-bottom: 35px; padding-bottom: 19px; font-size: 3rem; }
  .mod_single01_thum { margin-bottom: 33px; padding: 0 101px 0; }
  .mod_single01_content { margin-top: 24px; }
  .mod_single01_content p { margin: 20px 0; }
  .mod_single01_btn { width: 330px; margin: 40px auto 0; } }

/*!  single
================================================ */
/*
#styleguide
mod_single02

.mod_single02 - base style

```
<article class="mod_single02">
	<header class="head">
		<ul class="catogory">
			<li class="item">セミナー</li>
			<li class="item">終了</li>
			<li class="item">中止</li>
			<h1>Smart Energy Japan 2020</h1>
		</ul>
	</header>
	<div class="content">
		<div class="img"><img src="/img/event/dedail1/img_detail01.png" alt=""></div>
		<div class="news">
			<p class="tit">中止・延期のお知らせ</p>
			<p class="txt">新型コロナウイルスの影響を鑑み、3月11日開催予定でした『ニューモデルに採用！自動運転技術者向け最新「組込みプラットフォーム・ネットワーク」技術紹介』セミナーをやむなく中止することにいたしました。不明点等ございましたら<a href="/contact/">お問い合わせフォーム</a>をご利用ください。</p>
		</div>
		<div class="box">
			<div class="table">
				<table class="mod_table01">
					<tr>
						<th scope="row">日程</th>
						<td>2020年<br>1月29日(水) - 31日(金)</td>
					</tr>
					<tr>
						<th scope="row">時間</th>
						<td>10:00 - 17：00</td>
					</tr>
					<tr>
						<th scope="row">場所</th>
						<td><a href="" target="_blank">東京ビッグサイト</a><br><a href="" target="_blank">南1・2&会議棟</a></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="box">
			<h2>神奈川工科大学 スマートハウス研究センターブース 共同出展</h2>
			<p>ECHONET LiteのSDKやツールをはじめ、受託開発、AIF認証取得支援などECHONET Liteに関する全てのサービスや、OpenADRを含むIoT技術などを展示いたします。</p>
			<a href="/energy/echonet" target="_blank">ECHONET Liteソリューション「EW-ENET Lite」</a>
			<div class="table">
				<table class="mod_table01">
					<tr>
						<th scope="row">ブース名</th>
						<td>神奈川工科大学スマートハウス研究センター</td>
					</tr>
					<tr>
						<th scope="row">ブースNo.</th>
						<td>1S-C08</td>
					</tr>
					<tr>
						<th scope="row">場所</th>
						<td><a href="/pdf/floormap_2020.pdf#page=3" target="_blank">南1ホール</a></td>
					</tr>
				</table>
			</div>
		</div>
		<p class="btn">
			<a href="https://www.smartenergy.co.jp/event/2020/SEJ2020seminar.html" class="link" target="_blank">詳細とお申込みはこちら</a>
		</p>
	</div>
</article>

```
*/
.mod_single02 header { margin-bottom: 25px; }

.mod_single02 header .category { letter-spacing: -.5em; margin-bottom: 12px; }

.mod_single02 header .category .item + .item { margin-left: 5px; }

.mod_single02 header .category .item { display: inline-block; box-sizing: border-box; padding: 0 9px; font-size: 1rem; letter-spacing: normal; }

.mod_single02 header .category .item.is-seminar { border: 1px solid #016cb1; color: #fff; background-color: #016cb1; }

.mod_single02 header .category .item.is-end { border: 1px solid; }

.mod_single02 header .category .item.is-cancel { color: #ff3636; border: 1px solid; }

.mod_single02 header h1 { padding-bottom: 10px; font-weight: bold; line-height: 1.5; font-size: 2rem; font-family: 'Noto Serif JP', sans-serif; border-bottom: 2px solid #016cb1; }

/*.mod_single02 p, .mod_single02 a, .mod_single02 td, .mod_single02 li { font-weight: 300; }*/

.mod_single02 .news { margin-top: 25px; padding: 25px 30px; border: 2px solid #ff3636; }

.mod_single02 .news a { color: #016cb1; }

.mod_single02 .news .tit { margin-bottom: 8px; text-align: center; color: #ff3636; font-size: 1.7rem; font-weight: bold; }

/*.mod_single02 .news .txt { font-weight: 300; }*/

.mod_single02 .box { margin-top: 35px; }

.mod_single02 .box .table { margin-top: 15px; }

.mod_single02 .box .link { display: block; margin-top: 15px; }

.mod_single02 .box .link + .link { margin-top: 5px; }

.mod_single02 .box ul li { text-indent: 1em; }

.mod_single02 .box a { display: inline-block; color: #016cb1; }

.mod_single02 .box a[target="_blank"] span { position: relative; }

.mod_single02 .box a[target="_blank"] span:before { content: ""; display: block; position: absolute; bottom: 4px; right: -20px; width: 13px; height: 9px; margin-top: -4px; background: url(../../img/common/ico_blank01_blue.png) no-repeat center; background-size: 100%; }

.mod_single02 .box h2 { position: relative; margin-bottom: 10px; padding-left: 18px; line-height: 1.5; font-weight: bold; font-size: 1.7rem; color: #1cacda; }

.mod_single02 .box h2:before { position: absolute; top: 11px; left: 0; content: ''; display: block; width: 8px; height: 8px; background-color: #1cacda; border-radius: 50%; }

.mod_single02 .btn { width: 284px; margin: 0 auto; }

.mod_single02 .btn a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 284px; height: 47px; margin-top: 0; text-decoration: none; background-color: #016cb1; color: #fff; }

@media all and (min-width: 600px) { .mod_single02 header { margin-bottom: 44px; }
  .mod_single02 header .category { margin-bottom: 2px; }
  .mod_single02 header h1 { padding-bottom: 14px; font-size: 3rem; letter-spacing: .05em; line-height: 1.8; }
  .mod_single02 .content .img { max-width: 100%; }
  .mod_single02 .content .img.center { text-align: center; }
  .mod_single02 .content .img.right { text-align: right; }
  .mod_single02 .news { margin-top: 60px; padding: 29px 88px 35px; }
  .mod_single02 .news .tit { margin-bottom: 12px; font-size: 2.5rem; }
  .mod_single02 .news .txt { font-size: 1.7rem; }
  .mod_single02 .box { margin-top: 75px; }
  .mod_single02 .box .table { margin-top: 20px; }
  .mod_single02 .box .link { margin-top: 25px; }
  .mod_single02 .box .link + .link { margin-top: 4px; }
  .mod_single02 .box h2 { margin-bottom: 16px; padding-left: 26px; font-size: 2.4rem; letter-spacing: .06em; }
  .mod_single02 .box h2:before { left: 2px; top: 13px; width: 12px; height: 12px; }
  .mod_single02 .btn { width: 350px; margin: 50px auto 0; }
  .mod_single02 .btn a { width: 350px; height: 75px; }
  .mod_single02 .btn a:hover { color: #ffe156; } }


.mod_single-content01 { display: flow-root; }
.mod_single-content01 a { color: #016cb1; }
.mod_single-content01 .img { margin: 10px 0; }
.mod_single-content01 h2 { margin-bottom: 19px; padding-bottom: 9px; border-bottom: 2px solid #016cb1; font-size: 2.3rem; line-height: 1.5; letter-spacing: .085em; font-weight: bold; word-break: break-all; font-family: 'Noto Serif JP', serif; }
.mod_single-content01 h3 { margin-bottom: 15px; font-size: 2rem; line-height: 1.75; color: #016cb1; font-weight: bold; word-break: break-all; font-family: 'Noto Serif JP', serif;}
.mod_single-content01 h4 { margin-bottom: 10px; position: relative; font-size: 1.7rem; line-height: 1.75; font-weight: bold; word-break: break-all; font-family: 'Noto Serif JP', serif; }
.mod_single-content01 p + h2,.mod_single-content01 p + h3,.mod_single-content01 p + h4 { margin-top: 25px; }
.mod_single-content01 ul { margin: 10px 0; }
.mod_single-content01 ul li { padding-left: 18px; position: relative; font-size: 1.3rem; line-height: 1.75; }
.mod_single-content01 ul li::before { content: ""; display: block; position: absolute; top: 10px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: #016cb1; }

@media all and (min-width: 600px) {
	.mod_single-content01 img { width: auto; margin: 0; }
	.mod_single-content01 .left { float: left; margin-right: 20px; }
	.mod_single-content01 .right { float: right; margin-left: 20px; }
	.mod_single-content01 .set { margin-bottom: 20px; }
	.mod_single-content01 .set:after {content: ''; display: table; clear: both; }
	.mod_single-content01 h2 { margin-bottom: 30px; padding-bottom: 18px; font-size: 3.4rem; }
	.mod_single-content01 h3 { margin-bottom: 22px; font-size: 3rem; }
	.mod_single-content01 h4 { margin-bottom: 20px; font-size: 2.4rem; }
	.mod_single-content01 ul { margin: 20px 0; }
	.mod_single-content01 ul li { padding-left: 21px; font-size: 1.5rem; line-height: 1.75; }
  .mod_single-content01 ul li:before { top: 11px; width: 6px; height: 6px; }
}
/*
#styleguide
mod_tab01


```
<div class="mod_tab01_list_wrap">
	<ul class="js-switch-tab mod_tab01_list">
		<li class="mod_tab01 is_active">すべて</li>
		<li class="mod_tab01">イベント</li>
		<li class="mod_tab01">セミナー</li>
	</ul>
	<p class="mod_tab01_btn"><a href="" class="mod_tab01_btn_link">一覧</a></p>
</div>
```
*/
.mod_tab01 { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(33.333% - 10px); max-width: 108px; height: 35px; margin: 0 5px; padding-top: 2px; background: #f3f3f3; border-radius: 3px 3px 0 0; font-weight: 600; font-size: 1.2rem; cursor: pointer; text-align: center; }

.mod_tab01_list_wrap { 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; margin: 0 -18px 25px; padding: 0 18px; border-bottom: 3px solid #016cb1; }

.mod_tab01_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin: 0 -5px; }

.mod_tab01_list.is-column4 .mod_tab01 { width: calc(25% - 10px); line-height: 1.4; font-size: 1rem; }

.mod_tab01_list.is-column5 .mod_tab01 { width: calc(20% - 10px); line-height: 1.4; font-size: 1rem; }

.mod_tab01.is_active { background: #016cb1; color: #fff; }

@media all and (max-width: 350px) { .mod_tab01 { font-size: 1.1rem; } }

@media all and (min-width: 600px) { .mod_tab01 { width: 160px; max-width: none; height: 48px; margin: 0 6px 0 0; padding-top: 2px; font-size: 1.6rem; }
  .mod_tab01_list_wrap { margin: 0 0 40px; padding: 0; }
  .mod_tab01_list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: calc(100% - 90px); margin: 0; }
  .mod_tab01_list.is-column4 .mod_tab01 { width: 160px; font-size: 1.6rem; }
  .mod_tab01_list.is-column5 .mod_tab01 { width: 160px; font-size: 1.6rem; }
  .mod_tab01_btn { width: 80px; }
  .mod_tab01_btn_link { position: relative; overflow: hidden; display: block; padding: 4px 0 3px; border: 1px solid; text-align: center; font-size: 1.6rem; color: inherit; text-decoration: none; }
  .mod_tab01_btn_link:hover { border-color: #016cb1; color: #fff; }
  .mod_tab01_btn_link:before { -webkit-transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 32px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
  .mod_tab01_btn_link:hover:before { background-color: #016cb1; -webkit-transform: rotateX(0); transform: rotateX(0); }
  .mod_tab01_btn_txt { position: relative; z-index: 1; } }

/* table
================================================ */
/*
#styleguide
mod_table01

会社概要など
```
<table class="table mod_table01" border="1">
	<tr>
		<th scope="row">社名</th>
		<td>株式会社</td>
	</tr>
	<tr>
		<th scope="row">設立</th>
		<td>2003年10月</td>
	</tr>
	<tr>
		<th scope="row">従業員</th>
		<td>●名<span>（ディレクター：●名、デザイナー：●名、エンジニア：●名）</span></td>
	</tr>
	<tr>
		<th scope="row">資本金</th>
		<td>1,000万円</td>
	</tr>
	<tr>
		<th scope="row">事業内容</th>
		<td><b>ウェブサイト事業</b>（コンサルティング、制作、運営）<br>
			<b>メディア事業</b>（企画、制作、実施）</td>
	</tr>
</table>

```
*/
.mod_table01 { width: 100%; margin-bottom: 30px; border-bottom: 1px solid  #e2e2e2; }

.mod_table01 th { background: #f3f3f3; border-top: 1px solid  #e2e2e2; padding: 7px 20px 8px; font-weight: 500; }

.mod_table01 th .note { display: block; font-size: 1.1rem; font-weight: 400; color: #999999; text-indent: -1em; padding-left: 10px; }

.mod_table01 td { padding: 15px 20px; }

.mod_table01 td a { color: #016cb1; }

.mod_table01 td a.pdf { position: relative; }

.mod_table01 td a.pdf:after { content: ""; display: block; position: absolute; bottom: 0; right: -40px; width: 18px; height: 18px; background: url(../../img/common/ico_pdf03.png) no-repeat center; background-size: 100%; }
/*.mod_table01 td a.pdf:after { content: ""; display: block; position: absolute; bottom: 0; right: -25px; width: 18px; height: 18px; background: url(../../img/common/ico_pdf03.png) no-repeat center; background-size: 100%; }*/

.mod_table01 td a[target="_blank"] { position: relative; }

.mod_table01 td a[target="_blank"]:after { content: ""; display: block; position: absolute; bottom: 6px; right: -20px; width: 12px; height: 10px; margin-top: -4px; background: url(../../img/common/ico_blank01_blue.png) no-repeat center; background-size: 100%; border-top: none; }

.mod_table01 td .note { display: block; font-size: 1.1rem; font-weight: 400; color: #999999; text-indent: -1em; padding-left: 10px; }

@media all and (max-width: 599px) { .mod_table01 { display: block; }
  .mod_table01 tbody, .mod_table01 tr, .mod_table01 th, .mod_table01 td { display: block; }
  .mod_table01 tr + tr th + td { border-top: none; }
  .mod_table01 tr + tr td { border-top: 1px solid  #e2e2e2; } }

@media all and (min-width: 600px) { .mod_table01 { margin-bottom: 40px; }
  .mod_table01 th { width: 240px; padding: 16px 30px; font-weight: bold; }
  .mod_table01 th .note { margin-top: 13px; font-size: 1.3rem; }
  .mod_table01 td { border-top: 1px solid  #e2e2e2; padding: 16px 30px; vertical-align: middle; }
  .mod_table01 td a.pdf:after { right: -20px; bottom: 3px; }
  .mod_table01 td a[target="_blank"] { position: relative; }
  .mod_table01 td a:hover { text-decoration: none; }
  .mod_table01 td a[target="_blank"]:hover:after {
  	background-image: url(../img/common/ico_blank01_white.png);
  }
}

/*
#styleguide
mod_table02

会社概要など
```
<table class="table mod_table01" border="1">
	<tr>
		<th scope="row">社名</th>
		<td>株式会社</td>
	</tr>
	<tr>
		<th scope="row">設立</th>
		<td>2003年10月</td>
	</tr>
	<tr>
		<th scope="row">従業員</th>
		<td>●名<span>（ディレクター：●名、デザイナー：●名、エンジニア：●名）</span></td>
	</tr>
	<tr>
		<th scope="row">資本金</th>
		<td>1,000万円</td>
	</tr>
	<tr>
		<th scope="row">事業内容</th>
		<td><b>ウェブサイト事業</b>（制作、運営）<br>
			<b>メディア事業</b>（企画、制作）</td>
	</tr>
</table>

```
*/
.mod_table02 { width: 100%; margin-bottom: 30px; }

.mod_table02 thead th { background: #f3f3f3; border-top: 1px solid  #e2e2e2; border-bottom: 1px solid  #e2e2e2; padding: 7px 0 8px; font-size: 1.3rem; font-weight: 700; text-align: center; }

.mod_table02 thead th + th { border-left: 1px solid  #e2e2e2; }

.mod_table02 tbody th { padding: 8px 17px; vertical-align: middle; font-size: 1.3rem; font-weight: 400; border-bottom: 1px solid  #e2e2e2; }

.mod_table02 tbody td { padding: 8px 17px; vertical-align: middle; font-size: 1.3rem; font-weight: 400; border-left: 1px solid  #e2e2e2; border-bottom: 1px solid  #e2e2e2; }

@media all and (min-width: 600px) { .mod_table02 { margin-bottom: 40px; }
  .mod_table02 thead th { padding: 16px 40px 16px; font-size: 1.5rem; }
  .mod_table02 tbody th { width: 300px; padding: 16px 30px; font-size: 1.5rem; }
  .mod_table02 tbody td { padding: 16px 25px; font-size: 1.5rem; } }

/*
#styleguide
mod_table03

会社概要など
```
<table class="table mod_table01" border="1">
	<tr>
		<th scope="row">社名</th>
		<td>株式会社エムハンド</td>
	</tr>
	<tr>
		<th scope="row">設立</th>
		<td>2003年10月</td>
	</tr>
	<tr>
		<th scope="row">従業員</th>
		<td>35名<span>（ディレクター：11名、デザイナー：13名、エンジニア：8名、エディター：3名）</span></td>
	</tr>
	<tr>
		<th scope="row">資本金</th>
		<td>1,000万円</td>
	</tr>
	<tr>
		<th scope="row">事業内容</th>
		<td><b>ウェブサイト事業</b>（コンサルティング、制作、運営）<br>
			<b>メディア事業</b>（企画、制作、実施）</td>
	</tr>
</table>

```
*/
.mod_table03 { margin-bottom: 30px; overflow: auto; white-space: nowrap; }

.mod_table03 table { width: 100%; }

.mod_table03 table thead th { background: #f3f3f3; border-top: 1px solid  #e2e2e2; border-bottom: 1px solid  #e2e2e2; padding: 7px 0 8px; font-size: 1.3rem; font-weight: 700; text-align: center; }

.mod_table03 table thead th + th { border-left: 1px solid  #e2e2e2; }

.mod_table03 table tbody th { background: #f3f3f3; padding: 8px 17px; vertical-align: middle; font-size: 1.3rem; font-weight: 700; border-bottom: 1px solid  #e2e2e2; }

.mod_table03 table tbody td { padding: 8px 17px; vertical-align: middle; font-size: 1.3rem; font-weight: 400; border-left: 1px solid  #e2e2e2; border-bottom: 1px solid  #e2e2e2; }

@media all and (min-width: 600px) { .mod_table03 { margin-bottom: 40px; width: 100%; white-space: normal; }
  .mod_table03 table { width: auto; }
  .mod_table03 table thead th { padding: 16px 40px 16px; font-size: 1.5rem; }
  .mod_table03 table tbody th { width: 240px; padding: 16px 30px; font-size: 1.5rem; }
  .mod_table03 table tbody td { padding: 16px 25px; font-size: 1.5rem; } }

/*
#styleguide
mod_table04

タイムテーブル
```
<div class="table mod_table04">
	<table>
		<tr>
			<th>13:10</th>
			<td>受付</td>
		</tr>
		<tr>
			<th>13:30</th>
			<td>開会の挨拶</td>
		</tr>
	</table>
	<div class="note">※プログラム内容は予告なく変更</div>
</div>

```
*/
.mod_table04 th { width: 18%; font-weight: bold; color: #016cb1; }

.mod_table04 th, .mod_table04 td { padding: 12px 0; }

.mod_table04 .note { display: inline-block; font-size: 1.1rem; /* font-weight: 300; */ color: #999999; }

@media all and (min-width: 600px) { .mod_table04 th { width: 70px; font-weight: bold; color: #016cb1; }
  .mod_table04 th, .mod_table04 td { padding: 13px 0; }
  .mod_table04 td .txt { padding-left: 20px; }
  .mod_table04 .note { font-size: 1.4rem; } }

/* title
================================================ */
/*
#styleguide
mod_tit01


```
<p class="tit mod_tit01">見出しテキスト中央揃え青文字見出し</p>
```
*/
.mod_tit01 { margin-bottom: 20px; font-size: 2.3rem; line-height: 1.75; color: #016cb1; text-align: center; }

@media all and (min-width: 600px) { .mod_tit01 { margin-bottom: 22px; font-size: 3.4rem; } }

/*
#styleguide
mod_head01


```中央揃え青文字明朝体短い水色下線見出し
<header class="mod_head01">
	<p class="mod_head01_en fontRoboto mod_color_blue">EVENT&amp;SEMINAR</p>
	<p class="mod_head01_tit fontNotoSerif">イベント&amp;セミナー</p>
</header>
```
*/
.mod_head01 { position: relative; margin-bottom: 25px; padding-bottom: 15px; text-align: center; line-height: 1.75; }

.mod_head01:after { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ""; display: block; width: 42px; height: 2px; background: #1cacda; }

.mod_head01_en { font-size: 1rem; }

.mod_head01_tit { margin-top: 4px; font-size: 2.1rem; font-weight: 700; letter-spacing: .05em; }

@media all and (min-width: 600px) { .mod_head01 { margin-bottom: 30px; padding-bottom: 15px; }
  .mod_head01:after { width: 60px; }
  .mod_head01_en { font-size: 1.6rem; }
  .mod_head01_tit { margin-top: -7px; font-size: 3.2rem; } }

/*
#styleguide
mod_tit02


```
<h2 class="mod_tit02 fontNotoSerif">日新システムズのEMS（エネルギーマネジメントシステム）明朝体青色下線見出し<</h2>
```
*/
.mod_tit02 { margin-bottom: 19px; padding-bottom: 9px; border-bottom: 2px solid #016cb1; font-size: 2rem; line-height: 1.5; letter-spacing: .085em; font-weight: bold; }

.mod_tit02_min { position: relative; top: -2px; font-size: 1.7rem; }

@media all and (min-width: 600px) { .mod_tit02 { margin-bottom: 30px; padding-bottom: 18px; font-size: 3rem; }
  .mod_tit02_min { top: -1px; font-size: 2.5rem; } }

/*
#styleguide
mod_tit03


```
<h3 class="mod_tit03 fontNotoSerif">日新システムズのEMS（エネルギーマネジメントシステム）箇条書き明朝体水色見出し</h3>
```
*/
.mod_tit03 { margin-bottom: 15px; padding-left: 15px; position: relative; font-size: 1.7rem; line-height: 1.75; font-weight: bold; color: #1cacda; }

.mod_tit03:before { content: ""; display: block; position: absolute; top: 13px; left: 0; border-radius: 50%; width: 8px; height: 8px; background: #1cacda; }

@media all and (min-width: 600px) { .mod_tit03 { margin-bottom: 20px; padding-left: 25px; font-size: 2.4rem; }
  .mod_tit03:before { top: 15px; width: 12px; height: 12px; } }

/*
#styleguide
mod_tit04


```
<h3 class="mod_tit04 fontNotoSerif">日新システムズのEMS（エネルギーマネジメントシステム）明朝体水色見出し</h3>
```
*/
.mod_tit04 { margin-bottom: 10px; font-size: 1.7rem; line-height: 1.5; font-weight: bold; color: #1cacda; }

.mod_tit04 + p { margin-top: -5px; }

@media all and (min-width: 600px) { .mod_tit04 { margin-bottom: 15px; font-size: 2rem; }
  .mod_tit04 + p { margin-top: 12px; } }

/*
#styleguide
mod_tit05


```
<h3 class="mod_tit05 fontNotoSerif">日新システムズのEMS（エネルギーマネジメントシステム）</h3>
```
*/
.mod_tit05 { margin-bottom: 15px; font-size: 2.1rem; line-height: 1.5; letter-spacing: .085em; font-weight: bold; }

@media all and (min-width: 600px) { .mod_tit05 { margin-bottom: 30px; font-size: 3.6rem; } }




/* 動画などを横並び2列に配置してスマホ対応

<div class="wrap2">
  <div class="float-left" >
    <div class="youtube1">
      <iframe src="動画" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen title=""></iframe>
    </div>
  </div>
  <div class="float-right spmargintop20" >
    <div class="youtube1">
      <iframe src="動画" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen title=""></iframe>
    </div>
  </div>
</div>

<div class="wrap2">
  <div class="float-left" >
    <div class="youtube1">
      <iframe src="動画" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen title=""></iframe>
    </div>
  </div>
  <div class="float-right" >
    <p>テキスト</p>
    <img src="画像">
  </div>
</div>
 */


.wrap2{
  margin-bottom: 1.5rem;
}
.youtube1 {
  position: relative;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.youtube1 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.wrap2 img{
  width: 100%;
}

@media screen and (min-width: 600px) { 
/* PC表示（600px以上）のレイアウト */
  .float-right{
    float: right;
    width: 47.5%;
  }
  .float-left{
    float:left;
    width: 47.5%;
  }
  .wrap2:after{
    display: block;
    clear: both;
    content: "";
  }
}



.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/*  余白
---------------------------------------- */

.packtop-100 {margin-top:10px;}
.packtop-50 {margin-top:10px;}
.packtop-20 {margin-top:10px;}
.packbottom-150 {margin-bottom:10px;}
.packbottom-100 {margin-bottom:10px;}
.packbottom-80 {margin-bottom:10px;}
.packbottom-50 {margin-bottom:10px;}
.packbottom-30 {margin-bottom:10px;}
.packbottom-20 {margin-bottom:10px;}
.packbottom-10 {margin-bottom:10px;}
.packbottom-5 {margin-bottom:10px;}
.marginbottom-0{margin-bottom: 0;}

.margintop10 {margin-top:10px;}
.margintop20 {margin-top:10px;}
.margintop40 {margin-top:20px;}
.margintop50 {margin-top:25px;}
.margintop80 {margin-top:40px;}
.margintop100 {margin-top:40px;}
.marginbottom10 {margin-bottom:10px;}
.marginbottom20 {margin-bottom:10px;}
.marginbottom40 {margin-bottom:20px;}
.marginbottom100 {margin-bottom:40px;}
.spmargintop20 {margin-top:20px;}
.sppacktop-20 {margin-top:-20px;}

@media all and (min-width: 600px) { 
.packtop-100 {margin-top:-100px;}
.packtop-50 {margin-top:-50px;}
.packtop-30 {margin-top:-30px;}
.packtop-20 {margin-top:-20px;}
.packbottom-150 {margin-bottom:-150px;}
.packbottom-100 {margin-bottom:-100px;}
.packbottom-80 {margin-bottom:-80px;}
.packbottom-50 {margin-bottom:-50px;}
.packbottom-30 {margin-bottom:-30px;}
.packbottom-20 {margin-bottom:-20px;}
.packbottom-10 {margin-bottom:-10px;}
.packbottom-5 {margin-bottom:-5px;}
.packbottom-0 {margin-bottom:0px;}

.margintop10 {margin-top:10px;}
.margintop20 {margin-top:20px;}
.margintop40 {margin-top:40px;}
.margintop50 {margin-top:50px;}
.margintop80 {margin-top:80px;}
.margintop100 {margin-top:100px;}
.marginbottom10 {margin-bottom:10px;}
.marginbottom20 {margin-bottom:20px;}
.marginbottom40 {margin-bottom:40px;}
.marginbottom100 {margin-bottom:100px;}
.spmargintop20 {margin-top:0;}
.sppacktop-20 {margin-top:0;}
 }