@charset "utf-8";
/* CSS Document */
.boxBg{ background-color:rgba(0,0,0,0.1); padding:60px 0; width:100%;}
	.innerWrap1100{ max-width:1100px; margin:auto;}
						.caption h2 { font-size:16px; margin-bottom:1.2em; text-align: center;}
						.caption p {text-align: justify;text-justify: distribute-all-lines;font-size:13px;}



/*-------------------------*/
.grid-col--2{
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
	float: left;
	box-sizing: border-box;
	margin-bottom: 20px;
}
.grid-col--2{width: 19.9999999999%; margin-bottom:40px;}

.anc{
  display:block;
  margin-top:-90px;
  padding-top:90px;
}

@media only screen and  (max-width:1150px){
  .anc{
    display:block;
    margin-top:-14vw;
    padding-top:14vw;
  } 
}


@media only screen and (min-width:415px) and (max-width:1080px){
.grid-col--2{width: 25%; margin-bottom:40px;}
}

@media only screen and (min-width:1px) and (max-width:1080px){
	.grid-col--2{
		width: 50%;
		padding: 0 5px 0 5px;
		margin-bottom: 10px;
	}
	.grid-col-sp--2{
		position: relative;
		min-height: 1px;
		float: left;
		box-sizing: border-box;
		padding: 0 5px 0 5px;
		margin-bottom: 10px;
	}
	.grid-col-sp--2{width: 16.6666666667%;}
}

.btnAngle{
	display: inline-block;
	padding: 20px 50px;
	background: #004b85;
    color: #fff;
	position: relative;
	width: 280px;
	max-width: 100%;
	-webkit-transition: all .3s;
	transition: all .3s;
	font-size: 15px;
	box-sizing: border-box;
	overflow: hidden;
}
.btnAngle:hover{
	color: #004b85;
	text-decoration: none;
}
.btnAngle span{
	position: relative;
	z-index: 1;
	display: block;
}
.btnAngle:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	visibility: hidden;
	-webkit-transition: all .4s;
	transition: all .4s;
}
.btnAngle span:before {
    content: '\f105';
    position: absolute;
    right: 0;
   font-family: FontAwesome;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .4s;
    transition: all .4s;
}


.btnAngle:hover:after{
	-webkit-transform: translateY(0);
	transform: translateY(0);
	visibility: visible;
	color: #004b85;
}
.grid-col--2 a {
	display: block;
}
.grid-col--2 a:hover {
	text-decoration: none;
}
.boxContent {
	display: block;
	text-align: center;
	position: relative;
}
.logoImage1 {
	display: block;
	overflow: hidden;
}
.logoImage > span {
	display: block!important;
	padding-bottom: 100%;
	-webkit-transition: all .6s;
	transition: all .6s;
}
.logo_01 > span {
	background: url("/common/img/so_forkers.jpg") center center / cover;
}
.logo_02 > span {
	background: url("/common/img/so_degidora.jpg") center center / cover;
}
.logo_03 > span {
	background: url("/common/img/so_ruckus.jpg") center center / cover;
}
.logo_04 > span {
	background: url("/common/img/so_laser.jpg") center center / cover;
}
.logo_05 > span {
	background: url("/common/img/so_builtin.jpg") center center / cover;
}
.logo_06 > span {
	background: url("/common/img/so_cubei.jpg") center center / cover;
}
.logo_07 > span {
	background: url("/common/img/so_factory.jpg") center center / cover;
}
.logo_08 > span {
	background: url("/common/img/so_equipment.jpg") center center / cover;
}
.logo_09 > span {
	background: url("/common/img/so_materials.jpg") center center / cover;
}
.logoImage > span img {
	display:none;
}
.boxContentInner {
	display: block;
	position: absolute;
	color: #fff;
	top: 45%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 100%;
	padding: 20px 1em;
	box-sizing: border-box;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	margin-top: 30px;
}
.boxButton {
	display: block;
	text-align: center;
	margin-top: -24px;
}
.boxButton .btnAngle {
	width: 80%; padding: 12px 1em;
	white-space: nowrap;
}

.caption {
	display: block;
	text-align: left;
	opacity: 0;
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	-webkit-transition: all 0s ease-in-out;
	transition: all 0s ease-in-out;
}
@media only screen and (min-width: 768px){
	.logoImage span{
		position: relative;
	}
	.logoImage span:before {
		content: "";
		background: rgba(0,0,0,.7);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		transition: all 0.4s;
	}
	.grid-col--2 a:hover .logoImage > span {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	.grid-col--2 a:hover .btnAngle{
		color: #004b85;
		background: #fff;
	}
	.grid-col--2 a:hover .btnAngle:after {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		visibility: visible;
	}
	.grid-col--2 a:hover .btnAngle span:before {
		right: -10px;
	}
	.grid-col--2 a:hover .logoImage span:before {
		opacity: 1;
	}
	.grid-col--2 a:hover .caption {
		top: 0;
		opacity: 1;
		position: relative;
		-webkit-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	.grid-col--2 a:hover .boxContentInner {
		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		opacity: 1;
		margin-top: 0;
		top: 50%;
	}
}
@media only screen and (min-width: 1px) and (max-width:1080px) {
	.boxButton {
		display: none;
	}
	.boxContentInner {
		padding: 17px;
		margin-top: 0;
		top: 50%;
	}
	.logoImage span:before {
		content: "";
		background: rgba(0,0,0,.7);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		transition: all 0.4s;
	}
.caption {
	opacity: 1;
	position: static;
	top: 0;
}
.caption p{
	font-size: 11px;}

}



/*検索タブ*/
#linkBtn{text-align: center; margin-top: -70px;}
	#linkBtn div{ display: inline-block; width: 250px; text-align: center;}
		#linkBtn div span{border: 1px solid #758fa0; background-color:#758fa0;color: #ffffff; padding: .8em 6em; cursor:pointer; position:relative;}
		#linkBtn div span:hover,
		#linkBtn div.select span{border: 1px solid #62869b; background-color:#ffffff; color: #36647a;}
		#linkBtn div span:hover:after,
		#linkBtn div.select span:after{position: absolute; top: 50%; right: 20px; display: block; content: ''; width: 8px; height: 8px; margin-top: -4px; border-top: 1px solid #62869b; border-right: 1px solid #62869b; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

/*カテゴリ・メーカータブ*/
.cont_inner { margin-top: 60px; }
	.tabLi li { display: inline-block; width: 19%; text-align: center; vertical-align:bottom;margin-right: .8%; margin-bottom: .8%;position: relative;}
	.tabLi li.select:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 8px solid #36647a; }
	.tabLi li:last-child {margin-right:0;}
		.tabLi li span,
		.tabLi li a {border: 1px solid #758fa0; background-color: #758fa0; color: #ffffff; padding: .8em 1em; cursor: pointer; position: relative;display: block;}
		.tabLi li.select span{border:none;border-bottom: 2px solid #36647a; background-color: #ffffff; color: #36647a;}

/*タブコンテンツ*/
.tabCont{background-color: rgba(255,255,255,0.8); margin-bottom: .8%; padding: 15px;}
.cont_close input[type="button"] { border: none; background-color: #ececec; width: 100%; padding: .5em 0; font-size: 13px; letter-spacing: 1px; text-indent: -1px;    text-align: center;}

	.midLi li { display: inline-block; width: 19%; text-align: center; vertical-align:bottom;margin-right: .8%; margin-bottom: .8%;position: relative;}
	.midLi li:last-child,
	.midLi li:nth-child(5) {margin-right:0;}
		.midLi li span,
		.midLi li a {border: 1px solid #758fa0; background-color: #758fa0; color: #ffffff; padding: .8em 1em; cursor: pointer; position: relative;display: block;}
		.midLi li.select span{border:none;border-bottom: 2px solid #36647a; background-color: #ffffff; color: #36647a;}

	#mbel_main h4{font-size: 1.2rem; font-weight: 600;}	
	.endLi{ margin-bottom:15px;}
		.endLi span{ display:inline-block; margin-right:30px; vertical-align: bottom;}
		.endLi a{ color:#004b85;}
		.endLi a:before{content:"-"; margin-right:8px;}
		.endLi a:hover{ text-decoration:underline; color:#FF0000; transition:.6s;}
			.endLi > div { margin: 8px 0 0; }
/*.hide {display:none;}*/

#tab2_cont ul{background-color: rgba(255,255,255,0.8);padding: 15px;}
	#tab2_cont li { display: inline-block; width: 19%; text-align: center; vertical-align:bottom;margin-right: .8%; margin-bottom: .8%;position: relative;border: 1px solid #BDBDBD; box-sizing: border-box; background-color:#FFFFFF; height:54.5px;}
	#tab2_cont li img { max-width: 140px; height: auto; max-height: 53px;object-fit: cover; object-position: center top; font-family: 'object-fit: cover; object-position: center top;'; }
        #tab2_cont li:last-child,
	#tab2_cont li:nth-child(5n) {margin-right:0;}
        #tab2_cont li:nth-child(36) {padding: 5px;}
       
        
.telitlogo3{
            width:7em;
            padding:2px;}






/*詳細ページ*/
/***********************************************************
タブ切り替え
***********************************************************/
#linkTab{text-align: center;}
	#linkTab div{ display: inline-block; width: 350px; text-align: center; vertical-align:bottom;}
		#linkTab div a{border: 1px solid #758fa0; background-color:#758fa0;color: #ffffff; padding: .8em 6em; cursor:pointer; position:relative;}
		#linkTab div a:hover,
		#linkTab div.select a{border: 1px solid #62869b; background-color:#ffffff; color: #36647a;}
		#linkTab div a:hover:after,
		#linkTab div.select a:after{position: absolute; top: 50%; right: 20px; display: block; content: ''; width: 8px; height: 8px; margin-top: -4px; border-top: 1px solid #62869b; border-right: 1px solid #62869b; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

#linkBtn.wide{margin-bottom: 50px;margin-top: 0;}
	#linkBtn.wide div{width: 210px;}
		#linkBtn.wide div span{padding: .8em 3em;display:inline-block;}

/***********************************************************
コンテンツ
***********************************************************/
#prodTitleLarge{ font-size: 1.7em; color: #005ead; border-bottom: 1px solid; padding-bottom: 8px; font-weight: bold; }
#wrap1050{ max-width:1050px;}
.txtbl { color: #005ead; }
video { width:100%; height:auto;}
.wrap600{ max-width: 570px; margin: auto; text-align: left; display:block;}
.content{padding: 50px 0;border-bottom: 1px solid #9fa0a0;}
	#mbel_main .titleCenter { margin-bottom: 1.3em;font-size: 27px; text-align: center; letter-spacing: 2px; text-indent: -2px; line-height:1;}
	.textBox3 { margin-left: 350px; text-align:left;}
	.imgBox3 { float: left; text-align: center; width: 290px; }
		.imgBox3 img { max-width:100%; height:auto;}
	ul.list-circle {}
		ul.list-circle li { margin-top: 5px; padding-left: 1.5em; font-size: 1.3em; line-height: 1.4; position: relative; vertical-align: middle; }
		ul.list-circle li:first-child { margin-top: 0; }
		ul.list-circle > li:before { content: "●"; color: #005ead; position: absolute; top: 1px; left: 0; }
			ul.list-circle li p { font-size: 1em; margin-bottom: 20px; }
			ul.list-circle li p.mb5 { margin-bottom: 5px; }
	
		ul.list-circle.side-by-side li { margin: 0 0 0 20px; display: inline-block; }
		ul.list-circle.side-by-side li:first-child { margin: 0; }
			ul.list-circle ul.text-list2 li { margin: 0 0 0 15px; font-size: 1em; line-height: 1.6; text-indent: -2.5em; }
			ul.list-circle li span.wifi-spec { position: absolute; display: inline-block; left: 220px; }
	
	ul.list-circle.lineList { text-align:center;}
		ul.list-circle.lineList li{ display:inline-block;vertical-align: bottom; margin-right: 1em;}
		ul.list-circle.lineList li:not(:last-child):after { content: "/"; padding-left: 1em; }

	.tableBox{ width:100%; margin:30px auto 0;}
		.tableBox > div{ float:left; width:48%;}
		.tableBox > div:first-child{ margin-right:4%;}
			.tableBox > div img{ max-width:100%; height:auto; border: 1px solid #ababab;}
			.tableBox > div span{ display:block; margin-top:5px; font-size:1rem;}
		.tableBox dl { float:left; width:33%;}
			.tableBox dt { font-size: 1.3em; color:#005ead;}

	#diagram{ width:100%; table-layout:fixed; font-size: 1.3em; border-collapse:collapse;}
		#diagram th{ background-color:#005ead; color:#FFFFFF;}
		#diagram th, #diagram td{ padding: 12px 1em; border: 1px solid;}
		#diagram td[colspan] { text-align:center;}


	h5 { font-size: 1.2em; background-color: #005ead; color: #ffffff; padding: 5px 15px; border-radius: 15px; display: inline-block; margin: 50px auto 20px; }
	.comparison{ margin-top:30px;}
		.comparison dl{ width:500px; float:left;}
			.comparison dt { font-size: 1.3em; color:#005ead;}
			
	.tableBox2 dl { float:left;}
		.tableBox2 dt { font-size: 1.3em; color:#005ead;}

	.icon-point { display: inline-block; position: relative; }
		.icon-point a { top: -5px; margin-left: 10px; display: inline-block; position: absolute; }	
		

.makerBox{border-bottom: 1px solid #004b85; margin-bottom:60px;}
.onhidden { height: 300px; overflow-y: hidden; position:relative; }
	.readmore { position: absolute; bottom: 0; width: 100%; padding: 20px 0; text-align: center; background: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(255, 255, 255, 0.5), white) repeat scroll 0 0; font-weight: bold; cursor: pointer; z-index: 9; }
		.readmore span { border-radius: 20px; padding: 5px 30px; background-color: #dd4b39; color: #FFF; }
	.titleProd { font-size: 1.6em; line-height: 1.6; color: #555555; font-weight: bold;    margin-bottom: 1em;}
	.titlePoint{color: #005ead;font-size: 1.3em; line-height: 1.6; margin-bottom: 10px;}

/******************securewise.html*******************/
.topContents{
              text-align:center;padding-top:30px;}
 .companylogo{
                              display:flex;
                              justify-content:space-around;
                              margin:40px 0;
                              }
             .telitlogo2{
                        margin-top:20px;}
           .telitlogo img{
/*                            width:13em;*/
                            width:203px;
                            height:125.08px;}
              .telitlogo2 img{
/*                            width:18em;*/
                            width:281px;
                            height:51.86px;}
               .telitlogo2 p:nth-child(2){
                                          margin-top:71px;}