body {
font-family:Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
-webkit-text-size-adjust:none;
margin:0;
padding:0;
background:#FFF;
color:#333;
}
a:link {
text-decoration:none;
color:#333;
}
a:visited {
text-decoration:none;
color:#666;
}
a:hover {
color:#e890c3;
}
img {
border:none;
}
/*---------------------------------------------------------------------*/
/* レイアウト */
/*---------------------------------------------------------------------*/
#masterMain {
width:auto;
}
#masterBody {
width:100%;
margin:0 auto;
}
#masterContents {
width:100%;
margin:0 auto;
padding:15px 0 20px;
}
#localNavigation {
margin:0 auto;
padding:15px 0 30px;
overflow:hidden;
text-align:center;
}
#localNavigation .lnavBtn {
width:300px;
height:100px;
display:block;
text-align:center;
margin:0 15px;
float:left;
}
#localNavigation .lnavBtn a {
display:block;
position:relative;
width:300px;
height:100px;
text-indent:-99999px;
background:url(//image.itmedia.co.jp/topics/1702/iottech/images/menu.png) no-repeat 0 0;
background-position:0 0;
}
#localNavigation .lnavBtn.current a {
background-position:0 -200px;
}
#localNavigation .lnavBtn a::after {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:url(//image.itmedia.co.jp/topics/1702/iottech/images/menu.png) no-repeat 0 0;
background-position:0 -100px;
opacity:0;
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
#localNavigation .lnavBtn a:hover::after {
opacity:1;
}
#localNavigation .lnavBtn.current a:hover::after {
opacity:0;
}
#localNavigation .lnavBtn.lnavBtnSolution a {
background-position:-300px 0;
}
#localNavigation .lnavBtn.lnavBtnSolution.current a {
background-position:-300px -200px;
}
#localNavigation .lnavBtn.lnavBtnSolution a::after {
background-position:-300px -100px;
}
#localNavigation .lnavBtn.lnavBtnDevelop a {
background-position:-600px 0;
}
#localNavigation .lnavBtn.lnavBtnDevelop.current a {
background-position:-600px -200px;
}
#localNavigation .lnavBtn.lnavBtnDevelop a::after {
background-position:-600px -100px;
}
section {
margin:0 0 30px;
}

@media screen and (max-width:498px) { 
	#masterMain {
	width:320px;
	margin:0 auto 50px;
	}
	#localNavigation {
	width:210px;
	padding:15px 0;
	}
	#localNavigation .lnavBtn {
	margin:0 0 15px;
	}
	#localNavigation .lnavBtn,
	#localNavigation .lnavBtn a {
	width:210px;
	height:70px;
	}
	#localNavigation .lnavBtn a,
	#localNavigation .lnavBtn a::after {
	background-size:630px 210px;
	}
	#localNavigation .lnavBtn a::after {
	background-position:0 -70px;
	}
	#localNavigation .lnavBtn.current a {
	background-position:0 -140px;
	}
	#localNavigation .lnavBtn.lnavBtnSolution a {
	background-position:-210px 0;
	}
	#localNavigation .lnavBtn.lnavBtnSolution a::after {
	background-position:-210px -70px;
	}
	#localNavigation .lnavBtn.lnavBtnSolution.current a {
	background-position:-210px -140px;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop a {
	background-position:-420px 0;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop a::after {
	background-position:-420px -70px;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop.current a {
	background-position:-420px -140px;
	}
}
@media screen and (min-width:498px) and ( max-width:747px) {
	#masterMain {
	width:498px;
	margin:0 auto 50px;
	}
	#localNavigation {
	width:498px;
	padding:15px 0 20px;
	}
	#localNavigation .lnavBtn {
	margin:0 5px;
	}
	#localNavigation .lnavBtn,
	#localNavigation .lnavBtn a {
	width:150px;
	height:50px;
	}
	#localNavigation .lnavBtn a,
	#localNavigation .lnavBtn a::after {
	background-size:450px 150px;
	}
	#localNavigation .lnavBtn a::after {
	background-position:0 -50px;
	}
	#localNavigation .lnavBtn.current a {
	background-position:0 -100px;
	}
	#localNavigation .lnavBtn.lnavBtnSolution a {
	background-position:-150px 0;
	}
	#localNavigation .lnavBtn.lnavBtnSolution a::after {
	background-position:-150px -50px;
	}
	#localNavigation .lnavBtn.lnavBtnSolution.current a {
	background-position:-150px -100px;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop a {
	background-position:-300px 0;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop a::after {
	background-position:-300px -50px;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop.current a {
	background-position:-300px -100px;
	}
}
@media screen and (min-width:747px) and ( max-width:990px) {
	#masterMain {
	width:747px;
	margin:0 auto 50px;
	}
	#localNavigation {
	width:747px;
	}
	#localNavigation .lnavBtn,
	#localNavigation .lnavBtn a {
	width:210px;
	height:70px;
	}
	#localNavigation .lnavBtn a,
	#localNavigation .lnavBtn a::after {
	background-size:630px 210px;
	}
	#localNavigation .lnavBtn a::after {
	background-position:0 -70px;
	}
	#localNavigation .lnavBtn.current a {
	background-position:0 -140px;
	}
	#localNavigation .lnavBtn.lnavBtnSolution a {
	background-position:-210px 0;
	}
	#localNavigation .lnavBtn.lnavBtnSolution a::after {
	background-position:-210px -70px;
	}
	#localNavigation .lnavBtn.lnavBtnSolution.current a {
	background-position:-210px -140px;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop a {
	background-position:-420px 0;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop a::after {
	background-position:-420px -70px;
	}
	#localNavigation .lnavBtn.lnavBtnDevelop.current a {
	background-position:-420px -140px;
	}
}
@media screen and (min-width:990px) {
	#masterBodyInner {
	width:990px;
	margin:0 auto;
	box-shadow:0 0 30px 10px #e6e6e6;
	}
	#masterContents {
	width:990px;
	}
	#localNavigation {
	width:990px;
	}
}
/*---------------------------------------------------------------------*/
/* カラムボックス */
/*---------------------------------------------------------------------*/
.colBox {
margin:0 auto 10px;
width:auto;
box-sizing:border-box;
}
.colBox a:link,
.colBox a:visited {
text-decoration:none;
}
.colBoxInner,
.colBoxHead {
text-align:left;
}
.colBoxHead {
position:relative;
width:80%;
margin:0 auto 30px;
padding:0;
text-align:center;
}
.colBoxHead::before {
content:'';
position:absolute;
top:45%;
display:block;
width:100%;
height:2px;
background:#A6C7DD;
background:-webkit-linear-gradient(-45deg, transparent, #A6C7DD 10%, #A6C7DD 70%, transparent);
background:linear-gradient(-45deg, transparent, #A6C7DD 10%, #A6C7DD 70%, transparent);
z-index:1;
}
.colBoxHead h2 {
position:relative;
display:inline-block;
margin:0;
padding:0 1em;
font-weight:normal;
font-size:20px;
line-height:24px;
color:#4591c3;
background-color:#fff;
text-align:left;
z-index:2;
}
.colBoxIndex {
position:relative;
float:left;
width:210px;
margin:0 18px 30px;
padding:4px 0;
border-top:2px #ccc solid;
}
.colBoxIndex.listspecial .colBoxTitle::after {
content:'Special';
position:absolute;
top:-20px;
font-size:12px;
color:#999;
}
.colBoxTitle {
width:100%;
height:46px;
overflow:hidden;
margin:0 0 3px;
padding:0;
bottom:0;
left:0;
}
.colBoxTitle h3 {
font-size:14px;
line-height:20px;
margin:0;
padding:5px 0;
word-break:break-all;
}
.colBoxTitle h3 a {
transition:color 0.8s;
}
.colBoxTitle h3 a:hover {
transition:color 0.1s;
}
.colBoxNewtxt {
font-weight:bold;
color:#C00;
}
.colBoxIcon {
display:block;
width:210px;
height:118px;
overflow:hidden;
position:relative;
border:1px #eee solid;
}
.colBoxIcon a {
line-height:0;
display:block;
width:210px;
height:118px;
}
.colBoxIcon img {
margin:0;
position:absolute;
width:210px;
height:158px;
top:-20px;
left:0;
}
.colBoxDescription {
margin:0 0 3px;
}
.colBoxDescription p {
font-size:12px;
line-height:16px;
margin:0;
}
.colBoxClear {
font-size:0;
line-height:0;
height:0;
clear:both;
}

/*---------------------------------------------------------------------*/
/* ヘッダー タイトル */
/*---------------------------------------------------------------------*/
#topicsTitle {
width:100%;
max-width:990px;
min-width:350px;
height:180px;
margin:0 auto;
position:relative;
}
#topicsTitle h1 {
width:100%;
max-width:990px;
height:100%;
margin:0;
padding:0;
text-align:center;
color:#999;
background:url(//image.itmedia.co.jp/topics/1702/iottech/images/title.jpg) no-repeat 0 0;
background-size:contain;
background-position:center;
text-indent:-9999px;
}
#topicsTitle h1 a {
width:100%;
max-width:990px;
height:100%;
display:block;
}
#topicsTitle .SocialLinks {
width:22px;
height:22px;
position:absolute;
}
#topicsTitle .SocialLinksFacebook {
background:url(//image.itmedia.co.jp/mn/images/icon_facebook.png) no-repeat 0 0 transparent;
background-size:contain;
right:35px;
top:65px;
}
#topicsTitle .SocialLinksTwitter {
background:url(//image.itmedia.co.jp/mn/images/icon_twitter.png) no-repeat 0 0 transparent;
background-size:contain;
right:7px;
top:65px;
}
#topicsTitle .SocialLinks a {
width:22px;
height:22px;
margin:0;
display:block;
text-indent:-9999px;
}
#topicsTitle ul {
list-style:none;
margin:0;
padding:0;
}
#topicsTitle li {
position:absolute;
list-style:none;
margin:0;
padding:0;
display:block;
}
#topicsTitle li.techtarget {
top:7px;
right:105px;
width:80px;
height:50px;
}
#topicsTitle li.techfactory {
top:10px;
right:5px;
width:94px;
height:42px;
}
#topicsTitle li a {
display:block;
width:100%;
height:100%;
text-indent:-9999px;
}
#topicsDescription {
	width:100%;
	max-width:960px;
	margin:0 auto;
}
#topicsDescription p {
	line-height:180%;
	font-size:15px;
	color:#5c5c5c;
}
@media screen and (max-width:498px) { 
	#topicsTitle {
	width:320px;
	height:63px;
	}
	#topicsTitle li.techtarget {
	top:0;
	right:39px;
	width:28px;
	height:22px;
	}
	#topicsTitle li.techfactory {
	top:0;
	right:0;
	width:36px;
	height:22px;
	}
	#topicsTitle .SocialLinks {
	top:60px;
	}
	#topicsDescription {
	width:350px;
	padding-top:13px;
	}
	#topicsDescription p {
	font-size:12px;
	line-height:150%;
	}
}
@media screen and (min-width:498px) and ( max-width:747px) {
	#topicsTitle {
	width:498px;
	height:91px;
	}
	#topicsTitle li.techtarget {
	top:5px;
	right:52px;
	width:42px;
	height:24px;
	}
	#topicsTitle li.techfactory {
	top:5px;
	right:3px;
	width:46px;
	height:24px;
	}
	#topicsTitle .SocialLinks {
	top:32px;
	}
	#topicsDescription {
	width:498px;
	}
	#topicsDescription p {
	font-size:14px;
	}
}
@media screen and (min-width:747px) and ( max-width:990px) {
	#topicsTitle {
	width:747px;
	height:136px;
	}
	#topicsTitle li.techtarget {
	top:6px;
	right:80px;
	width:60px;
	height:40px;
	}
	#topicsTitle li.techfactory {
	top:10px;
	right:4px;
	width:70px;
	height:32px;
	}
	#topicsTitle .SocialLinks {
	top:50px;
	}
	#topicsDescription {
	width:747px;
	}
}
@media screen and (min-width:990px) {
	#topicsTitle {
	height:180px;
	}
}
/*---------------------------------------------------------------------*/
/* Futures */
/*---------------------------------------------------------------------*/
#colBoxFutures {
text-align:center;
}
#colBoxFutures .colBoxOuter {
display:inline-block;
}
#colBoxFutures .colBoxInner {
border:1px solid #4b4b4b;
padding:20px 10px;
}
#colBoxFutures .colBoxIndex {
margin:0 15px;
border-top:none;
}
@media screen and (min-width:747px) and ( max-width:990px) {
	#colBoxFutures {
	width:502px;
	}
	#colBoxFutures .colBoxIndex {
	    margin:0 15px 15px;
	}
}
@media screen and ( max-width:747px) {
	#colBoxFutures .colBoxIndex {
	float:none;
	}
}

/*---------------------------------------------------------------------*/
/* インタビュー特集 */
/*---------------------------------------------------------------------*/
#colBoxInterview {
margin:0 3px;
}
#colBoxInterview .colBoxArticleType {
position:absolute;
top:-14px;
left:0;
font-size:10px;
line-height:12px;
}
#colBoxInterview .colBoxArticleType span {
display:none;
background:#A01013;
padding:1px 5px;
color:#FFF;
}
#colBoxInterview .colBoxArticleType span.at_Special {
display:block;
}

/*---------------------------------------------------------------------*/
/* 新着記事 */
/*---------------------------------------------------------------------*/
#colBoxArticleList .colBoxInner span {
display:block;
width:200px;
margin:10px auto 40px;
padding:5px 30px;
background:#9cc1da;
border-radius:3px;
color:#fff;
text-align:center;
cursor:pointer;
transition:background 0.5s;
}
#colBoxArticleList .colBoxInner span:hover {
background:#7ea7c3;
}

/*---------------------------------------------------------------------*/
/* スポンサーロゴ */
/*---------------------------------------------------------------------*/
.colBoxLogolist {
margin:0;
overflow:hidden;
}
.colBoxLogolist .colBoxLogo {
float:left;
margin:0 11px 21px;
padding:10px;
border:1px #ddd solid;
}
.colBoxLogolist .colBoxLogo a {
display:block;
line-height:0;
}
#colBoxLogolistPlatinum img {
width:300px;
height:160px;
}
#colBoxLogolistGold img {
width:200px;
height:107px;
}
#colBoxLogolistSilver img {
width:100px;
height:54px;
}
@media screen and (max-width:498px) { 
	.colBoxLogolist .colBoxLogo {
	float:none;
	margin:0 auto 18px;
	text-align:center;
	}
}
/*---------------------------------------------------------------------*/
/* 共通フッタ（簡易版） */
/*---------------------------------------------------------------------*/
#globalFooterLink {
width:94%;
margin:0 auto 10px;
padding:0;
font-size:10px;
line-height:14px;
text-align:right;
}
#globalFooterCorp {
clear:both;
width:94%;
margin:0 auto;
padding:10px 0;
border-top:1px solid #DDD;
}
#globalFooterCorpIn {
}
#globalFooterCorp p a:link,
#globalFooterCorp p a:visited {
}
#globalFooterCorpLogo {
position:relative;
display:bslock;
margin:0 0 5px;
padding:12px 0 0 180px;
font-size:12px;
line-height:16px;
}
#globalFooterCorpLogo a {
position:absolute;
top:0;
left:0;
display:block;
width:170px;
height:28px;
background:url(//image.itmedia.co.jp/images/logo/170_itmedia_bgw.gif) no-repeat 0 0;
text-indent:-9999px;
float:left;
}
#globalFooterCorpLink {
margin:0;
font-size:12px;
line-height:16px;
clear:both;
}
@media screen and (min-width:990px) {
  #globalFooterLink {
    width:970px;
  }
  #globalFooterCorp {
    width:970px;
  }
}
@media screen and (max-width:498px) { 
	.colBoxIndex {
	margin:0 auto 18px;
	float:none;
	}
}