/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Grid –––––––––––––––– */
.container,
.container_in {
  position: relative;
  width   : 100%;
  padding : 0 20px;
  margin  : 0 auto;
  box-sizing: border-box; }
.container    { max-width: 960px;}
.container_in { max-width: 880px;}

section { margin-bottom: 5.5em;}

.row {
  display  :flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding  :0 12px; }
  .nav_2 { justify-content: center;}
  .nav_2 li:before,
  .nav_2 li:last-child:after { display:inline; content: '｜'; }
	section .row:after  { content: ""; display: block; width: 31.25%;}
.row div:not(.bnr_au)   { display: flex; flex-direction: column;}
.row div:nth-child(3n+1),
.row dl:nth-child(3n+1) { margin-left: 0; align-content: stretch;}
.clearfix::after { content: ""; display: block; clear: both;}
.pull-box{align-items: flex-end;}
/* For devices larger than 400px */
@media (min-width: 400px) { .col_2 { width:100%;}}
/* For devices larger than 550px */
@media (min-width: 550px) {
  .container { width: 90%; }
  #header .container div:last-of-type { width: 65.3333333333%; }
  .col_4  { width: 22.8125%;}/*219*/
  #header .container div:first-of-type,
  .col_3  { width: 31.85%;  margin-bottom: 3rem; }/*300*/
  .col_2  { width: 48.215%; margin-bottom: 3rem; }
  .col_2:first-child { margin-left: 0; }
}

/* Base Styles –––––––––––––––– */
@media only screen{	
/* haedderMenu Fix */
 .is-fixed { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; }
.fade  { opacity: 0;visibility: hidden;transition: 1s;transform: translateY(30px);}/* fade animation */
.active{ opacity: 1;visibility: visible;transform: translateY(0);}/* animation scroll*/
}

/* based on 10px sizing.1.5rem = 15px */
html { font-size: 62.5%; }
body {
  font-size: 1.5em;
  line-height: 1.75;
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  color: #333;
  text-rendering: optimizeLegibility;
  margin:0 auto;
  text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
  }
 
  b {font-family:'Roboto Condensed', -apple-system, BlinkMacSystemFont, Roboto, 'Noto Sans JP','游ゴシック',"YuGothic", YuGothic, "Yu Gothic", "Segoe UI", Verdana, sans-serif;}
img    { width:100%; max-width: 100%; height: auto;}
header { background: linear-gradient(90deg, white 0%, white 38%, #111e7c 38%, #111e7c 100%);}
/* haedderMenu height / anchorLink */
	.contents_inner { margin-top:-100px; padding-top:130px;}
footer { font-size: 1em; background: #111e7c; color: #FFF; padding: 3em 0 2em;}
footer p:last-of-type { margin-bottom:0;}
footer .container div:first-of-type { margin-right:1.5em;}
nav li:last-child {	padding: 0;}
/*** index ***/
#visual {}

#info    { border-bottom: solid 1px #111e7c; padding-bottom:1em;}
#info h2 ,#product_index h2,#product_ttl h2::after,
#ttl_case_customer p,[id^="ttl_"] h2::before {
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.4666em;/*22*/}
#info h2 { display: flex; align-items: center; letter-spacing:2px; color: #111e7c;}
#info h2:before, 
#info h2:after  { display: block; content: ""; flex-grow: 1; height: 1px; background: #111e7c;}
#info h2:before { margin-right: 2em;}
#info h2:after  { margin-left: 2em;}
#info,
#index_menu { width: 85.71428571428571%;/*840*/ margin: 5.5em auto;}

#info dt { width : 6em;}/*data*/
#info dd { overflow: auto; margin-bottom:.5em;margin-left :6em;}

#product_index h2 span {
	display: inline-block;
	width  : 9em;
	font-size: .8em;
    letter-spacing: 2px;
	color: #FFF;
	background-color: #111e7c;
	border-radius: 2px;	
	padding   : .2em 0;
	margin-top: .5em;
	}
#product_index h3 {
	text-align : center;
	font-weight: bold;
	letter-spacing: 1px;
	color: #111e7c;
	margin-bottom : 1em ;
	}
#product_index img { width: 100%; border-bottom: 2px #111e7c solid; vertical-align: bottom;}
#product_index .arrow{
	content:'';
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 9.5px 0 9.5px;
	border-color: #111e7c transparent transparent transparent;
	margin:0 auto;
}
#product_index p { display: block; margin-bottom: 0; color: #111e7c;}
#product_index .col_3,
.col_4 { box-shadow: 2px 2px 3px #CCC; background: #FFF; margin-bottom: 3rem; }
#index_menu .col_2 a,
#product_index .col_3 a,
#case .btn {
	position: absolute;
	height: 100%;
	width : 100%;
	top : 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform    : translate(-50%, -50%);
}
#product_index .col_3 > div { padding:1.5rem 2.5rem 2.5rem;}
#index_menu .col_2 {
	display: block;
	border : #111e7c 2px solid;
	box-sizing: border-box;
	padding: 1.25em 1em 0;	
	margin-bottom: 2.5em;
}
#index_menu .col_2 h2 {
	font-size  : 1.13em/*17*/;
	font-weight: bold;
	letter-spacing: .05em;
	color: #111e7c;
	margin-bottom: 1rem;
}
#index_menu .col_2 p {  color: #111e7c; margin-bottom: 1em;}
span.linkArrow { position: relative; display: block;}
span.linkArrow::before {
  position: absolute;
  right: 0;
  top  : 5px;
  display: block;
  content: "";
  width : 20px;
  height: 2px;
  background: #111e7c;
  }
span.linkArrow::after {
  position: absolute;
  right  : 0;
  top    : 0;
  display: block;
  content: "";
  width  : 11px;
  height : 11px;
  border-right: 2px solid #111e7c;
  border-top: 2px solid #111e7c;
  transform : rotate(45deg);
  }

.bnr_au {
	display: block;
	color  : #FFF;
	background: url(../img/index/bg_au.jpg) left no-repeat;
	background-size : 50%;
	background-color: #f06a00;
	min-height: 100px;
	padding   : 3em 1em 1em;
	box-sizing: border-box;
}
.bnr_au h2 { font-size: 1.14em; margin-bottom: 0;}

#page_nav    { font-size: .85em; text-align: left; color: #666; background: #f7f5f4;}
#product_nav { display: block; font-size: .9em; text-align: center; color: #111e7c; padding: .5em 0;}
#product_nav .container { display: flex; align-items: center; margin-bottom: 0;}
#product_nav ul {  display:flex; flex-wrap: wrap; margin-left: auto; margin-bottom:0; }
#product_nav li:not(:first-child)::before { content: " / ";}
.nav-ttl { display: inline-block; margin-right: 1em;}
.nav-ttl a:after {
	display: inline-block;
	content: '▲';
	transform: rotate( 90deg );
	margin-left:1em;
	}

[id^="ttl_"] {
	position:relative;
	color :#111e7c;
	width : 100%;
	height: 0;
	padding-top: calc(350 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	margin-bottom: 5em;
	}
	#ttl_company { background: url(../img/company/bg_company_ttl.jpg) center center / cover no-repeat;} 
	#ttl_case    { background: url(../img/case/bg_case_ttl.jpg) center center / cover no-repeat;} 
	#ttl_case_customer   { background: #f1f6f9;}
	#ttl_case_customer p {
		width     : 6em;
		font-size : 1.3em;
		background: #FFF;
		padding   : 0 .5em;
		margin-top: .35em;
		font-weight: normal;
		}
	#ttl_contact { background: url(../img/contact/bg_contact_ttl.jpg) center center / cover no-repeat;} 

[id^="ttl_"] .container {
	position:absolute;
	top : 50%;
  left: 50%;
	text-align:center;
    transform : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	}
	
#product_ttl { position: relative; background: #f7f5f4; color: #111e7c; margin-bottom: 5em;}
#product_ttl h2 { letter-spacing:2px; margin-bottom:.5em; font-weight: bold;}
#product_ttl h2:before {
	display: block;
	width  : 5.5em;
	content:'製品案内';
	font-size  : 12px;
	font-weight: normal;
	letter-spacing:1px;
	text-align : center;
	color: #FFF;
	background: #111e7c;
	padding   : .2em 1em;
	border-radius: 2px;
	margin-bottom: .8em;
	}
#product_ttl h2:after {
	display: block;
	content: 'Network is Power.';
	font-size: .75em;
	font-weight: normal;
	letter-spacing: 1px;
	color : #111e7c;
	margin: 1em 0;
	}
section h2:before,
p[class^="productName_"].color:before{
	display    : block;
	font-size  : 12px;
	text-align : center;
	color      : #004ea1;
	box-sizing : border-box;
	border     : 1px solid;
	border-radius: 2px;
	background : none;
	margin : 0 auto .5em;
	}
[class^="productName_"].color  {
	font-size : 1.6666em/*24*/;
	color     : #004e9f;
	text-align: left;
	margin    : .5em auto 1em;
	}
p[class^="productName_"].color { font-size: .95em; text-align: center; line-height: 1.3;}
[class^="productName_"]:before { margin: 0 0 .5em;}
.productName_musen:before { content:'業務用無線システム'  ; width:11em; margin-bottom: .8em;}
.productName_taxi:before  { content:'タクシー支援システム'; width:11em; margin-bottom: .8em;}
.productName_IP:before    { content:'IP無線システム';   width:9em;}
.productName_phone:before { content:'ビジネスホン'  ;   width:9em;}
.productName_car:before   { content:'車両関連システム'; width:11em;}
.productName_camera:before{ content:'ネットワークカメラ'; width:11em;}

.line_2      { height : 3.5em;}
.line_2 span { display: block;}
dd h3 { font-size: 1.1333em; margin-bottom: .5em; }
#product_ttl p       { margin-bottom: 0;}
#product_ttl div img ,
[id^="ttl_"] div img { position: absolute; top: 0; left: 0; opacity: .3;}
#product_ttl div img { width: 20.954%;}
[id^="ttl_"] div img { width: 20.75%;}
#product_ttl img.ttl { float: right; width: 62%;}
.nav_2 { margin-bottom: 2em;}
#case_nav_list .col_4,
.case > div,
section dl {
	position  : relative;
	box-shadow: 2px 2px 3px #CCC;
	background: #FFF;
	margin    : 0 0 2em;
	}
	section dd { padding: 0 1em .5em; margin: 0 auto;}
	section dd h4 { font-size: 1em ; margin-bottom: 1em;}
	section dd p  { font-size: .9333em; margin-bottom: .5em;}
	section dd span{ font-size:.9em;}
	section dl a {
		position: absolute;
		top    : 0;
		left   : 0;
		width  : 100%;
		height : 100%;
		text-indent:-999px;
		z-index: 3;
		}
	section .col_3 dl,/** only Car system **/
	#function h2,#maker h2 { margin-bottom: 0;}
#function,#maker {
	text-align: center;
	border    : 4px solid #91b8d3;
	box-sizing: border-box;
	padding   : 1.5em 0 0;
	margin-bottom: 2em;
	}
section dd i{ color: #ef9300; font-size: .8em;}
#industry i { color: #ef9300; font-size: .8em; padding:.25em .8em 0 0;}
#function i { color: #ef9300; font-size:1.2em; padding: 0 .5em .5em 0;}
#maker.accordion > i:first-of-type { font-size:1.2em; padding:0 .5em .5em 0;}
.accordion li > i { color: #111e7c; font-size: .8em; padding: 0 .5em;}
.accordion ul { width: 100%; margin: .5em auto 0; padding-bottom: 0;}
.accordion li {
	display: inline-block;
	width  : 33.3333%;
	font-size   : 1.06em;
	line-height : 1.06em;
	padding     : .7em 0 .5em;
	background  : rgba(145,184,211,.5);
	border-right: 1px solid #FFF;
	box-sizing  : border-box;
	}
.accordion li:last-child { border:0;}

/* case_nav common */
#case_nav_list      { background: #edeae8; margin:0 auto;}
#case_nav_list #ttl { background: #111e7c; color: #FFF; padding: .58em 0; margin-bottom: 2em;}
#case_nav_list #ttl h2:after {
	display  : inline-block;
	content  : 'Network is Power.';
	font-size: .77em;
	line-stacking: 1px;
	padding  : 0 1em;
	}
#case_nav_list #ttl h2,
#case_nav_list #ttl p { display: inline-block; margin-bottom: 0;}
#case_nav_list .inner { padding: 1em;}
#case_nav_list img,
#case .box h5  { margin-bottom:.5em;}
#case_nav_list .inner h3 { font-size: 1em; line-height: 1.8; margin: 0 auto;}
#case_nav_list .inner h3 span  { display: block; font-size: .8em;}
#case_nav_list .inner h3:after { display: none;}
.more-read         { margin-top: auto; }
.more-read a       { background: #004e9f; color: #FFF; letter-spacing: 1px; line-height: 2.46em;}
.more-read a:hover { background: #8db4cf; color: #004e9f; transition: .3s; }
/** company **/
section.container_in {
	display    : flex;
	flex-flow  : column;
	align-items: center;
	justify-content: center;
	}
.container_in dl { text-align: left; margin: 0 auto; box-shadow: none;}
.container_in dt { float: left;}
.container_in dd { overflow: auto; padding: 0; margin-bottom: 8px;}

#history dt { width: 6.5em;}
#outline dt { width: 12.5em;color: #111e7c;}
.philosophy__list li {
  text-indent: -1em;
  padding-left: 1em;}
.philosophy__list li + li{margin-top: 6px;}

#message .container_in { max-width: 720px;}
#message .message-txt { overflow: auto;}
#message figure { margin: 0 2em 1em 0;}
figure.col  { margin: 0 0 1em;}
#message figure,
figure.col  { width: 29.42%; padding: 0;}
#message figcaption br:last-of-type{ display: none;}
.col        { width: 66.178%;}
.box {
	border: 8px solid #f7f5f4;
	padding: 2em 2em 0;
	box-sizing: border-box;
	}
.box h4 { margin-bottom: 1em;}
.indt   { text-indent  : 2.5em;}
#au .au_bg { background: #f06a00; z-index: 0;}
/*** case ***/
.select ul { display:flex; flex-wrap:wrap; justify-content: center;}
#sort li {
	font-size: .9em;
	color: #fff;
	padding: 1px 10px;
	cursor: pointer;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 3px;
	background: #004e9f;
	margin: 0 .5em .5em;
	}
#sort li#KeyAll { background: #FFF; color: #004e9f; font-weight: bold;}
.inner { padding: 1em;}
.inner img { margin-bottom: 10px;}
.inner p:last-of-type { margin: 0 auto;}
.inner h3 { font-size: 1.13333em; margin-bottom: .8em;}
.inner h3 span { display: block; font-size: .8em; line-height: 2;}
#case h3:after, 
.inner h3:after {
	content: "";
	display: block;
	width  : 4em;
	height : 2px;
	background-color: #004e9f;
	margin : .5em auto 0;
	}
#case { max-width:760px; margin:0 auto 5em;}
#case figure { margin: 2em auto; padding:0;}
#case [class^="productName_"] { margin-bottom:1em;}
#case h3 span { display:block; margin-top:.5em;}
#case .box { border: 8px solid #f1f6f9;}
.box .col_2 { margin-bottom:0;}
.box .row { padding:0;}
.box dl { width:100%; box-shadow:none; margin-bottom:.5em;}
.box dt:after { display:inline; content:'：'; }
.box dd { overflow:auto; padding: 0 0 .5em;}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin-top:0; }
h1 { margin: 0; line-height: 1;}
h2 { font-size: 1.6666em;/*24*/ line-height: 1.25;}
[class^="productName_"],h2[class^="productName_"],
h3 { font-size: 1.3333em;/*20*/line-height: 1.3;}
h4 { font-size: 1.8rem; line-height: 1.35;}
h5 { font-size: 1.5rem; line-height: 1.5;}
h6 { font-size: 1.5rem; line-height: 1.6;}
#copy { font-size:.8rem; text-align:center; color: #999; margin: .25em auto;}
/* Larger than phablet */
@media (min-width: 550px) {
[id^="ttl_"] h2:before {
	display  :block;
	content  :'Network is Power.';
	font-size:.6em;
	letter-spacing: 1px;
	margin-bottom : .3em;
	} 
[id^="ttl_"] h2 { font-size: 1.8666em; letter-spacing: .2em; margin-bottom:0;}
[id^="ttl_"] p  { font-size: 1.6666em; letter-spacing: .1em; line-height: 1.5; margin:0 auto; font-weight: 500}
}

p { margin-top: 0; }
.LL { font-size: 2.3em;}
.l  { font-size: 1.3333em;} 
.s  { font-size: .95em/*14*/; line-height: 1.6;}
.ss { font-size: .8em/*14*/;}/*メーカー説明*/

/* Links –––––––––––––––– */
a { color: #111e7c; text-decoration: none; z-index: 50; }
a:hover img {
  opacity: 0.8;
  filter : alpha(opacity=80);
  -moz-opacity : 0.8;
  -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;
}
nav a,.nav a:hover,
.nav-ttl a:hover,
.nav_2 a:hover,
#product_nav li a:hover { color: #FFF;}
nav a,.nav_2 a ,.nav-ttl a,
#product_nav li a   { padding: .2em .5em; border-radius: 1px; transition: .3s;}
nav li:last-child a { padding: .2em 0;    border-radius: 2px; }
nav li:last-child a:hover { background:none;}
nav a:hover,.nav_2 a:hover,.nav-ttl a:hover,
#product_nav li a:hover   { width: 100%; background: #00a1e5;}
#page-top   { position: fixed; bottom : 20px; right: 15px; width:35px; z-index: 50;}
#page-top a { display : block; padding: 0;}

/* Buttons –––––––––––––––– */
#au a,.bnr_au a,.btn a {
  text-decoration: none;
  display  : inline-block;
  border   : 0px solid #fff;
  outline  : none;
  cursor   :pointer;
  transition: all .2s;
  }
#case .btn {
  position: relative;
  width   : 20em;
  color   : #111e7c;  
  border  : 2px solid;
  box-sizing : border-box;
  padding :1em;
  line-height: 1;
  }
  #case .btn sapn { padding-top:1.5em;}
  #case .btn a { position:relative; z-index:5; }
.btn::before,
.btn::after {
  position: absolute;
  z-index: 2;
  content: '';
  width  : 0;
  height : 0;
  border : 2px solid transparent;
  }

.btn::before { top   : -2px; left : -2px;}
.btn::after  { bottom: -2px; right: -2px;}
.btn:hover   { color : #00a1e5;}
.btn:hover::before,
.btn:hover::after { width: 100%; height: 100%;}
.btn:hover::before {
  border-bottom-color: #00a1e5;
  border-left-color  : #00a1e5;
  transition: height .3s, width .3s .3s;
}
.btn:hover::after {
  border-top-color  : #00a1e5;
  border-right-color: #00a1e5;
  transition: height .3s, width .3s .3s;
}
#au a,.bnr_au a {
  height: 30px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: .1rem;
  padding:0 1.5em;
  background:#FFF;
  border-radius:2px;
  }
  #au a.page-link { border:1px solid;}
#au a:hover,.bnr_au a:hover {
  color: #FFF; background: #111e7c; border-radius: 2px;}

/* Lists –––––––––––––––– */
ul { list-style: none; }
ol, ul { padding-left: 0; margin-top: 0; }

/* Utilities –––––––––––––––– */
.u-full-width { width: 100%; box-sizing: border-box; }
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right { float: right; }
.u-pull-left  { float: left; }

.bg_page { background: #f7f5f4; padding: 5.5em 0 3em;}
.bg_product { background: #eff5f9; padding: 5.5em 0 3em;}
.center { text-align: center;}
.color  { color: #111e7c;}

.mb   { margin-bottom: 1em;}
.mb_3 { margin-bottom: 2em;}
.mb_5 {	margin-bottom: 5em;}

.bg_i{
	display :inline-block;
	position:relative;
	width :2.5em;
	height:2.5em;
	border-radius : 50%;
	background    :#efebe9;
	vertical-align: bottom;
	}
	
.mail:before {
  font-family: "Font Awesome 5 Free";
  content    : '\f1d8';
  font-weight: 900;
  color      : #0a1266;
  font-size  : 1.35em;
  line-height: inherit;
  left       : 0;
  top        : 1px;
  right      : 2px;
  position   : absolute;
  text-align : center;
  width      : 100%;
  }
  h4.mail:before { display:block; position:relative; margin-bottom:.5em;}
section .col_3 dd p:after,
#industry dd:after,
.accordion li a:after {
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
  position: absolute;
  }
section .col_3 dd p:after,
#industry dd:after   { color: #ef9300; font-size: .9em; right: 1em;}
section .col_3 dd p:after { bottom: .5em;}
.accordion li a:after{ font-size: .8em; right: .5em;}
.accordion li { position: relative;}
.select h3:before {
  font-family: "Font Awesome 5 Free";
  content: '\f002';
  font-weight: 900;
  font-size  : 1.13em;
  color  : #111e7c;
  display: block;
  margin-bottom: .5em;
  }
  .map:before,.box .phone:before,
  .fax:before,.email:before,.link:after{
	  font-family: "Font Awesome 5 Free";
	  font-weight: 900;
	  font-size  : .8em;
	  display    : inline-block;
	  width: 1.5em;
	  color: #666;
	  }
 .map:before  { content: '\f3c5';}
 .box .phone:before{ content: '\f879';}
 .fax:before  { content: '\f1ac';}
 .email:before{ content: '\f1d8';}
 .link:after  { content: '\f35d'; margin-left:.5em;}
footer .u-pull-right { margin: .5em 1em;}

/* Clearing –––––––––––––––– */
.container:after,
.row:after,.u-cf { content: ""; display: table; clear: both; }
#case_nav_list .row:after { display: none;}

/* Media Queries –––––––––––––––– */
/* Larger than desktop */
@media print,screen and (min-width: 960px){
body{ font-size:1.5rem;}
header , header.is-fixed { padding: 20px 0;}
.hamburger { display:none;}
h1 { width: 160px;}
#product_ttl .container div { width:30%; padding:3.5em 0 2em;}
#product_ttl img.ttl { padding:0;}
#product_ttl h2:before,
section h2:before,
p[class^="productName_"].color:before{line-height: 22px;}
#case_nav_list p[class^="productName_"].color:before {line-height: 16px;}
nav li:after { content: '/'; display: inline; padding: 0 ;}
nav li:nth-child(5):after,
nav li:last-child:after { display:none;}
}
@media print {
	#page-top { display:none;}
	body { width:980px;}
	header .container div:last-of-type {margin-left: auto;}
	nav li{ display: inline;} }

@media screen and (max-width: 959px) {/*　hamburger btn　*/
header , header.is-fixed { padding: 15px 0;}
header li { padding: .55em 0; }
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right   : 10px;
  top     : 8px;
  width   : 42px;
  height  : 42px;
  cursor  : pointer;
  text-align: center;
  background:#111e7c;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #FFF;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition   : 0.5s ease-in-out;
  transition        : 0.5s ease-in-out;
}
.hamburger span:nth-child(1) { top: 10px;}
.hamburger span:nth-child(2) { top: 20px;}
.hamburger span:nth-child(3) { top: 30px;}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 20px;
  left: 6px ;
  background : #fff;
  -webkit-transform: rotate(315deg);
  -moz-transform   : rotate(315deg);
  transform        : rotate(315deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top : 20px;
  background : #fff;
  -webkit-transform: rotate(-315deg);
  -moz-transform   : rotate(-315deg);
  transform        : rotate(-315deg);
}

nav.globalMenuSp {
  position: fixed;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0, 78, 164,0.7);
  text-align: center;
  width   : 100%;
  opacity : 0;
  transition: opacity .6s ease, visibility .6s ease;
  z-index : 2;
}

nav.globalMenuSp ul {
  display: none;
  margin : 0 auto;
  padding: 2em 0;
  width  : 100%;
}

nav.globalMenuSp ul li {
  width     : 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child { padding-bottom: 0;}
nav.globalMenuSp ul li a:hover    { background :none;}
nav.globalMenuSp ul li:hover      { background :#111e7c; cursor: pointer;}
nav.globalMenuSp ul li a {
  display: block;
  color  : #fff;
  padding: 0;
  text-decoration :none;
}
/* jQuery give */
nav.globalMenuSp.active    { opacity: 100; }
nav.globalMenuSp.active ul { display:block;}
#product_ttl,#product_ttl img.ttl { padding:1em 0;}

#product_ttl .container div { width:33.125%; padding:1em 0;}
}

/* Larger than tablet */
@media screen and (min-width: 769px) {
body   { font-size : 1.4rem;}
h1 { width: 140px;}

header .container div:first-of-type  { padding: 0;}
header .container div:last-of-type   { margin-left: auto;}
header .container div:last-of-type ul{ margin-bottom: 0;}
nav a { padding:.2em .8em;}
nav li {
	display  : inline-block;
	font-size: 14px;
	letter-spacing: 1px;
	color: #FFF;
	}

#info dl { margin: 0 1.5em 1em;}
#product_index .col_3 div   { padding:1em 1.5em 1.5em;}
#product_index h3 { font-size: 1.2em; }
#product_ttl img.ttl { margin-left: 1em;}
iframe.u-pull-right { width: 55%;height: 250px;}

.row div:nth-child(3n+1).pull{ display: contents;}

}
@media screen and (max-width: 768px) {
body { font-size:1.3rem;}
header div,
nav.row,section .row, #case_nav_list .row { padding:0;}
h1 { width:130px;}


.col_3    { width  : 48.215%;}
#info dl  { margin : 0 auto 1em;}
#product_index h3 { font-size : 1.4em; margin-bottom: .8em;}
#product_index .col_3 div { padding: 1em 1em 1.5em;}
#product_nav { font-size:.8em;}
#product_ttl { padding:1em 0;}
#product_ttl img.ttl { width: 58%; margin-left: 1em;padding:1em 0 ;}
#product_ttl h2 { font-size: 1.8em; }
#product_ttl h2:after       { font-size:.65em; margin: .5em 0;}
#product_ttl .container div { width:100%; padding:1em 0 ;}

iframe.u-pull-right {
	float  : none;
	display: block;
	width  : 100%;
	height : 200px;
	margin-bottom:2em;
	}
.Line { display:flex;}
.Line >.col_3:last-child { margin-left:auto;}
footer h2 { font-size:1.13333em; margin:0 auto .5em;}
#product_ttl h2:before,
section h2:before,
p[class^="productName_"].color:before { line-height:16px;}
.row div:nth-child(3n+1).pull { width:100%;}
.row div:nth-child(3n+1).pull::after{
	content: '';
    display: block;
    width:48.215%;
}
#case_nav_list .row::after{
	content: '';
    display: block;
	width: 31.25%;}
#case_nav_list .col_4 {width:48.215%;}
.line_2 { height:2.5em;}
}

@media screen and (min-width: 550px) and (max-width: 768px) {
	h1 { width : 120px;}
	.col_4 { width:31.25%;}
	.container_in dl { width: 60%;}}

/* Larger than phablet (also point when grid becomes active) */
@media screen and (max-width: 549px) {
body { font-size : 1.2rem;}
h1 { width :90px;}
  
#message figcaption br:last-of-type{ display: block;}
  #outline dt,#outline dd { display: block; width: 100%;}
#product_nav .container { padding:0; }
#product_index .col_3 { width: 90%; margin-left: auto; margin-right: auto;}
.nav-ttl a,
.nav-ttl a:hover { display: inline-block; width: 5em;}
#au .au_bg .bnr_au,.bnr_au {
	background: url(../img/index/bg_au.jpg) top center no-repeat;
	background-size : 70%;
	background-color: #f06a00;
	min-height: 90px;
	}
#au .au_bg .bnr_au{ background-position: left;}
.bnr_au .u-pull-right {
	float  : none;
	clear  : right;
	display: block;
	text-align: center;
	margin : 1em auto 0;
	}
section dd h4 { margin-bottom: .5em}
span.ss,
#product_ttl h2 span { display:block;}
#industry .ss,
#function .ss, #maker .ss { display:inline;}
.col_2,
.container_in dl,
.box .col { width: 100%;}
.col_4 { width: 48.215%;}
.col_4 p:first-of-type { font-size : 11px;}
[id^="ttl_"] h2:before {
	display:block;
	content:'Network is Power';
	font-size:.55em;
	letter-spacing:1px;
	} 
[id^="ttl_"] h2 { font-size: 1.6em; letter-spacing: .2em; margin-bottom: 0;}
[id^="ttl_"] p  { font-size: 1.3em; letter-spacing: .1em; line-height: 1.5; margin:0 auto;}
.box .col { margin: 0 auto;}
}
@media screen and (max-width: 400px) {h1 { width :80px;}}