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:#666;
}
img {
border:none;
}
/*---------------------------------------------------------------------*/
/* 特集記事領域 */
/*---------------------------------------------------------------------*/
#SpecialBox {
margin:0 0 12px;
width:100%;
height:360px;
position:relative;
}
#SpecialBox .SpecialBoxIn {
width:100%;
height:360px;
overflow:hidden;
position:absolute;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
top:0;
left:0;
display:none
}
#SpecialBox .SpecialBoxIn:first-child {
display:block;
}
#SpecialBox .SpecialBoxIn a {
width:100%;
height:360px;
display:block;
background:-moz-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 80%, rgba(0,0,0,1) 100%);
background:-webkit-linear-gradient(top, rgba(0,0,0,0) 60%,rgba(0,0,0,0.7) 80%, rgba(0,0,0,1) 100%);
background:linear-gradient(to bottom, rgba(0,0,0,0) 60%,rgba(0,0,0,0.7) 80%, rgba(0,0,0,1) 100%);
}
#SpecialBox .SpecialImage {
height:360px;
}
#SpecialBox .SpecialImage img {
width:auto;
height:100%;
}
#SpecialBox .SpecialBoxTextBox {
position:absolute;
left:0;
bottom:36px;
width:100%;
text-align:center;
}
#SpecialBox .SpecialBoxTitle {
color:#FFF;
font-size:30px;
line-height:40px;
margin:0 auto;
padding:0 4%;
display:inline-block;
text-align:justify;;
letter-spacing:2px;
}
#SpecialBoxMenu {
position:absolute;
bottom:10px;
left:0;
right:0;
margin:auto;
text-align:center;
}
#SpecialBoxMenu ul {
list-style:none;
margin:0;
padding:0;
}
#SpecialBoxMenu li {
display:inline;
list-style:none;
padding:0;
color:#FFF;
font-size:14px;
line-height:24px;
margin:0 5px;
cursor:pointer;
text-shadow:#FFF 0 0 1px;
}
#SpecialBoxMenu li.Active {
color:#222;
cursor:default;
}
@media screen and (max-width:749px) { 
	#SpecialBox .SpecialBoxTitle {
	font-size:16px;
	line-height:24px;
	}
}
/*---------------------------------------------------------------------*/
/* レイアウト */
/*---------------------------------------------------------------------*/
#masterMain {
width:auto;
}
#masterBody {
width:100%;
margin:0 auto;
}
#masterContents {
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 0 20px;
}
section {
margin:0;
clear:both;
overflow:hidden;
}
@media screen and (max-width:498px) { 
	#masterContents {
	width:320px;
	}
}
@media screen and (max-width:1220px) {
	#masterContents {
	width:96%;
	}
}
/*---------------------------------------------------------------------*/
/* メニュー */
/*---------------------------------------------------------------------*/
#localNavigation {
margin:0 auto 36px;
padding:0;
overflow:hidden;
width:100%;
display:inline-flex;
justify-content:space-between;
flex-wrap:wrap;
}
#localNavigation .lnavBtn {
width:280px;
height:80px;
display:block;
text-align:center;
margin:0;
background:#496253;
}
#localNavigation .lnavBtn a,
#localNavigation .lnavBtn span {
display:block;
position:relative;
width:100%;
height:100%;
text-indent:-99999px;
background-size:100% auto;
background-repeat:no-repeat;
}
#localNavigation .lnavBtn.lnavBtnCloud a {
background-image:url(//image.itmedia.co.jp/topics/1808/techin2018/images/menu1.png);
}
#localNavigation .lnavBtn.lnavBtnWorkstyle a {
background-image:url(//image.itmedia.co.jp/topics/1808/techin2018/images/menu2.png);
}
#localNavigation .lnavBtn.lnavBtnSecurity a {
background-image:url(//image.itmedia.co.jp/topics/1808/techin2018/images/menu3.png);
}
#localNavigation .lnavBtn.lnavBtnAi a {
background-image:url(//image.itmedia.co.jp/topics/1808/techin2018/images/menu4.png);
}
#localNavigation .lnavBtn.lnavBtnCloud span {
background-image:url(//image.itmedia.co.jp/topics/1808/techin2018/images/menu1o.png);
}
#localNavigation .lnavBtn.lnavBtnWorkstyle span {
background-image:url(//image.itmedia.co.jp/topics/1808/techin2018/images/menu2o.png);
}
#localNavigation .lnavBtn.lnavBtnSecurity span {
background-image:url(//image.itmedia.co.jp/topics/1808/techin2018/images/menu3o.png);
}
#localNavigation .lnavBtn.lnavBtnAi span {
background-image:url(//image.itmedia.co.jp/topics/1808/techin2018/images/menu4o.png);
}
#localNavigation .lnavBtn a:hover {
opacity:0.5;
transition:all 0.5s;
}
@media screen and (max-width:1220px) {
	#localNavigation .lnavBtn {
	width:210px;
	height:60px;
	}
}
@media screen and (max-width:990px) {
	#localNavigation .lnavBtn {
	width:175px;
	height:50px;
	}
}
@media screen and (max-width:780px) {
	nav {
	text-align:center;
	}
	#localNavigation {
	width:572px;
	margin:0 auto;
	}
	#localNavigation .lnavBtn {
	width:280px;
	height:80px;
	margin:0 0 12px;
	}
}
@media screen and (max-width:650px) {
	#localNavigation {
	width:362px;
	margin:0 auto;
	}
	#localNavigation .lnavBtn {
	width:175px;
	height:50px;
	margin:0 0 12px;
	}
}
@media screen and (max-width:380px) {
	#localNavigation {
	width:280px;
	margin:0 auto;
	}
	#localNavigation .lnavBtn {
	width:280px;
	height:80px;
	margin:0 0 12px;
	}
}
/*---------------------------------------------------------------------*/
/* カラムボックス */
/*---------------------------------------------------------------------*/
.colBox {
margin:0 auto 10px;
width:auto;
box-sizing:border-box;
}
.colBox a:link,
.colBox a:visited {
text-decoration:none;
}
.colBoxOuter {
text-align:center;
}
.colBoxHead {
position:relative;
width:100%;
margin:0 0 24px;
padding:0;
background-color:#222;
text-align:left;
}
.colBoxHead h2 {
position:relative;
display:inline-block;
margin:0;
color:#FFF;
font-weight:normal;
font-size:18px;
padding:6px 12px 3px;
line-height:24px;
}
.colBoxTitle h3 {
font-size:14px;
line-height:20px;
margin:0;
padding:5px 0;
word-break:break-all;
}
.colBoxNewtxt {
font-weight:bold;
color:#C00;
}
.colBoxDescription {
margin:0 0 3px;
}
.colBoxDescription p {
font-size:14px;
line-height:20px;
margin:0;
}
.colBoxClear {
font-size:0;
line-height:0;
height:0;
clear:both;
}
.colBoxInner {
clear:both;
overflow:hidden;
}
.moreButton {
display:block;
width:200px;
margin:40px auto;
padding:10px 30px;
background:#75a788;
border-radius:3px;
color:#fff;
text-align:center;
cursor:pointer;
transition:background 0.5s;
}
.moreButton:hover {
background:#496253;
transition:all 0.5s;
}
.colBoxHeadSubtxt {
position:absolute;
top:6px;
right:6px;
font-size:10px;
line-height:14px;
color:#FFF;
}
/*---------------------------------------------------------------------*/
/* ヘッダー ABOUT */
/*---------------------------------------------------------------------*/
#topicsAboutButton {
position:absolute;
right:12px;
bottom:12px;
}
#topicsAboutButtonInner {
width:220px;
margin:0;
padding:3px;
text-align:center;
font-size:13px;
color:#FFF;
cursor:pointer;
background:#75a788;
}
#topicsAboutButtonInner:hover {
background:#496253;
transition:all 0.5s;
}
#topicsAbout {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:100000;
}
#topicsAboutBack {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#topicsAboutInner {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:80%;
max-width:590px;
height:70%;
max-height:300px;
margin:auto;
padding:40px 40px 20px;
color:#CCC;
background:#000;
border:1px #999 solid;
overflow-y:auto;
overflow-x:hidden;
}
#topicsAboutInner p {
font-size:14px;
line-height:26px;
text-align:left;
margin:0 0 20px;
}
#topicsAboutCloseButton {
right:50px;
margin:0 auto 20px;
width:80px;
padding:3px 0;
text-align:center;
font-size:13px;
color:#999;
border:1px #555 solid;
cursor:pointer;
transition:all 1s;
}
#topicsAboutCloseButton:hover {
background:#666;
transition:all 0.5s;
}
@media screen and (max-height:600px) {
	#topicsAboutInner {
	padding:20px;
	max-height:90%;
	}
}
@media screen and (max-width:480px) {
	#topicsAboutInner {
	width:280px;
	padding:15px;
	}
	#topicsAboutInner p {
	font-size:13px;
	line-height:20px;
	}
}
@media screen and (min-width:480px) and ( max-width:768px) {
	#topicsAboutInner {
	padding:20px;
	max-height:90%;
	}
	#topicsAboutInner p {
	font-size:13px;
	line-height:20px;
	}
}
/*---------------------------------------------------------------------*/
/* ヘッダー タイトル */
/*---------------------------------------------------------------------*/
#topicsHeader {
width:100%;
height:auto;
margin:0 auto 12px;
position:relative;
background:url(//image.itmedia.co.jp/topics/1808/techin2018/images/headerbackground.jpg) no-repeat left center;
background-size:100% auto;
}
#topicsTitle {
position:relative;
max-width:1200px;
width:100%;
height:100px;
margin:0 auto;
padding:0;
}
#topicsTitle .maintitle {
position:absolute;
left:0;
bottom:15px;
}
#topicsTitle h1 {
margin:0;
padding:0;
font-size:0;
line-height:0;
}
#topicsTitle h1 a {
margin:0;
padding:0;
display:inline-block;
}
#topicsTitle .mainmedia {
position:absolute;
right:0;
top:0;
}
#topicsTitle .medialogo {
display:inline-block;
margin:6px;
}
#topicsTitle .medialogo a {
display:block;
}
@media screen and ( max-width:1060px) {
	#topicsTitle .maintitle {
	bottom:0;
	}
}
@media screen and ( max-width:820px) {
	#topicsAboutButton {
	right:6px;
	bottom:6px;
	}
	#topicsAboutButtonInner {
	width:170px;
	font-size:10px;
	}
	#topicsTitle {
	height:76px;
	}
	#topicsTitle .medialogo a {
	height:20px;
	}
	#topicsTitle .mainmedia img {
	height:100%;
	}
	#topicsTitle .maintitle img {
	width:390px;
	}
}
@media screen and ( max-width:590px) {
	#topicsTitle {
	height:62px;
	}
	#topicsTitle .maintitle {
	display:block;
	text-align:center;
	width:100%;
	}
	#topicsTitle .maintitle img {
	max-width:360px;
	width:90%;
	}
	#topicsAboutButton {
	display:none;
	}
	#topicsTitle .medialogo {
	margin:2px;
	}
}
/*---------------------------------------------------------------------*/
/* 新着記事 */
/*---------------------------------------------------------------------*/
.colBoxSideLayout .colBoxInner {
width:100%;
display:inline-flex;
justify-content:space-between;
flex-wrap:wrap;
}
.colBoxSideLayout .colBoxIndex {
position:relative;
width:240px;
margin:0 0 24px;
padding:6px;
}
.colBoxSideLayout .colBoxTitle h3 {
font-size:16px;
line-height:24px;
text-align:justify;
}
.colBoxSideLayout .colBoxIcon {
display:block;
width:240px;
height:180px;
position:relative;
margin:0 0 12px;
overflow:hidden;
}
.colBoxSideLayout .colBoxIcon a {
line-height:0;
display:block;
width:240px;
height:180px;
}
.colBoxSideLayout .colBoxTitle {
width:100%;
padding:0;
}
.colBoxSideLayout .colBoxEmpty {
width:252px;
}
.colBoxSideLayout .colBoxIcon img {
width:100%;
height:auto;
position:relative;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.colBoxSideLayout .colBoxIndex:hover .colBoxIcon img {
opacity:0.8;
-webkit-transform:translate3d(-50%,-50%,0) scale(1.1);
transform:translate3d(-50%,-50%,0) scale(1.1);
transition:all 500ms 0s ease;
}
@media screen and ( max-width:804px) {
	.colBoxSideLayout .colBoxInner {
	max-width:580px;
	}
}
@media screen and ( max-width:541px) {
	.colBoxSideLayout .colBoxInner {
	width:252px;
	}
}
/*---------------------------------------------------------------------*/
/* スポンサーロゴ */
/*---------------------------------------------------------------------*/
#colBoxSponsor {
margin:0;
overflow:hidden;
}
#colBoxSponsor .colBoxInner {
width:100%;
display:inline-flex;
justify-content:space-between;
flex-wrap:wrap;
}
#colBoxSponsor .colBoxLogo {
margin:0;
padding:20px;
}
#colBoxSponsor .colBoxLogo a {
display:block;
line-height:0;
}
#colBoxSponsor .colBoxLogo img {
width:160px;
height:80px;
}
#colBoxSponsor .colBoxEmpty {
width:200px;
}
@media screen and ( max-width:516px) {
	#colBoxSponsor .colBoxInner {
	width:200px;
	}
}
/*---------------------------------------------------------------------*/
/* ホワイトペーパー */
/*---------------------------------------------------------------------*/
#wpList .colBox {
margin:0 0 40px;
}
#wpList ul {
margin:0;
padding:0;
list-style:none;
}
#wpList li {
position:relative;
text-align:justify;
width:50%;
float:left;
margin:0 0 12px;
font-size:15px;
line-height:21px;
}
#wpList li::before {
position:absolute;
top:5px;
left:18px;
width:0;
height:0;
border-width:5px 0 5px 6px;
border-style:solid;
border-color:transparent transparent transparent #333;
content:"";
}
#wpList li a {
padding:0 36px 0;
display:block;
}
#wpList li:nth-child(2n+1) {
clear:both;
}
@media screen and ( max-width:516px) {
	#wpList li {
	width:auto;
	float:none;
	}
}
/*---------------------------------------------------------------------*/
/* セミナー */
/*---------------------------------------------------------------------*/
#seminarList .colBox {
margin:0 0 40px;
}
#seminarList .colBoxOuter {
text-align:left;
}
#seminarList .colBoxIndex {
width:46%;
float:left;
padding:6px;
}
#seminarList .colBoxIndex:nth-child(2n) {
float:right;
}
#seminarList .colBoxTitle h3 {
font-size:18px;
line-height:24px;
text-align:justify;
margin:0 0 10px;
}
#seminarList .colBoxIcon {
float:left;
}
#seminarList .colBoxIcon img {
width:240px;
height:auto;
}
#seminarList .colBoxDescription {
padding-left:260px;
margin:0 0 20px;
text-align:justify;
}
#seminarList .colBoxApp {
text-align:right;
font-size:14px;
line-height:20px;
}
#seminarList .colBoxApp a {
padding:3px 12px;
background:#75a788;
border-radius:3px;
color:#fff;
transition:background 0.5s;
}
#seminarList .colBoxApp a:hover {
background:#496253;
transition:all 0.5s;
}
@media screen and ( max-width:899px) {
	#seminarList .colBoxIndex {
	width:auto;
	float:none;
	padding:6px;
	clear:both;
	margin:0 0 20px;
	overflow:hidden;
	}
	#seminarList .colBoxIndex:nth-child(2n) {
	float:none;
	}
}
@media screen and ( max-width:516px) {
	#seminarList .colBoxIcon img {
	width:120px;
	}
	#seminarList .colBoxDescription {
	padding-left:140px;
	}
}
/*---------------------------------------------------------------------*/
/* 共通フッタ（簡易版） */
/*---------------------------------------------------------------------*/
#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 (max-width:498px) { 
	.colBoxIndex {
	margin:0 auto 18px;
	float:none;
	}
}