body {
font-family:Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
-webkit-text-size-adjust:none;
margin:0;
padding:0;
}
a:link {
text-decoration:none;
color:#333;
}
a:visited {
text-decoration:none;
color:#333;
}
a:hover {
text-decoration:underline;
color:#C00;
}
/*---------------------------------------------------------------------*/
/* レイアウト */
/*---------------------------------------------------------------------*/
#globalContents {
position:relative;
}
#masterHeader {
background:#FFF;
color:#CCC;
padding:0;
}
#masterHeader a:link,
#masterHeader a:visited,
#masterHeader a:hover {
text-decoration:none;
color:#FFF;
}
#masterMain {
clear:both;
width:680px;
margin:0 auto;
}
#masterSub {
position:relative;
width:300px;
}
#masterBody {
width:100%;
margin:0 auto;
background:#FFF;
}
#masterContents {
width:100%;
margin:0 auto;
padding:20px 0;
background:#FFF;
clear:both;
}
#masterHeaderTop {
overflow:hidden;
line-height:0;
background:url(//image.itmedia.co.jp/topics/1707/eos/images/eosbackground.jpg) no-repeat center center;
background-size:cover;
}

@media screen and (max-width:480px) { 
	#masterMain {
	width:90%;
	margin:0 auto 50px;
	}
	#masterSub {
	width:300px;
	margin:0 auto;
	}
}
@media screen and (min-width:480px) and ( max-width:768px) {
	#masterMain {
	width:90%;
	margin:0 auto 50px;
	}
	#masterSub {
	width:480px;
	margin:0 auto;
	}
}
@media screen and (min-width:768px) and ( max-width:1029px) {
	#masterMain {
	width:90%;
	margin:0 auto 50px;
	}
	#masterSub {
	width:90%;
	margin:0 auto;
	}
}
@media screen and (min-width:1030px) {
	#masterContents {
	width:1010px;
	}
	#masterMain {
	float:left;
	}
	#masterSub {
	width:300px;
	float:right;
	}
	#masterSubFix {
	width:300px;
	}
}
/*---------------------------------------------------------------------*/
/* カラムボックス */
/*---------------------------------------------------------------------*/
.colBox {
margin-bottom:10px;
width:auto;
box-sizing:border-box;
}
.colBox a:link,
.colBox a:visited {
text-decoration:none;
}
.colBox a:hover {
text-decoration:underline;
color:#C00;
}
.colBoxOuter {}
.colBoxHead {
position:relative;
border-bottom:3px solid #000;
margin:0 0 10px;
padding:3px 0;
}
.colBoxHeadSubtxt {
position:absolute;
top:3px;
right:0;
font-size:10px;
line-height:14px;
}
.colBoxNewtxt {
font-weight:bold;
color:#C00;
}
.colBoxHead h2 {
font-size:18px;
line-height:22px;
margin:0;
}
#masterSub .colBoxHead h2 {
font-size:14px;
line-height:18px;
margin:0;
}
.colBoxSubhead {
background:#EEE;
margin:0 0 5px;
padding:3px;
}
.colBoxSubhead h4 {
font-size:12px;
line-height:16px;
margin:0;
}
.colBoxIcon {
display:inline;
}
.colBoxIcon img {
margin:0;
border:none;
}
.colBoxSubTitle {
margin:0 0 3px;
}
.colBoxSubTitle h5 {
font-size:12px;
line-height:16px;
margin:0;
color:#A73;
}
.colBoxTitle {
margin:0 0 10px;
overflow:hidden;
}
.colBoxTitle h3 {
font-size:18px;
line-height:24px;
margin:0;
letter-spacing:2px;
word-wrap:break-word;
}
#masterSub .colBoxTitle h3 {
font-size:13px;
line-height:17px;
word-wrap:break-word;
}
.colBoxDescription {
margin:0 0 3px;
}
.colBoxDate {
text-align:left;
}
.colBoxDescription p,
.colBoxDate span {
font-size:13px;
line-height:22px;
margin:0;
word-wrap:break-word;
}
.colBoxButton {
width:150px;
margin:0 auto;
border:1px solid #CCC;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
}
.colBoxButton a {
display:block;
padding:5px;
font-size:14px;
font-weight:bold;
text-align:center;
}
.colBoxButton a:link,
.colBoxButton a:visited,
.colBoxButton a:hover {
color:#777;
text-decoration:none;
}
.colBoxButton a:hover {
background:#eee;
}
.colBoxIndex .linkset {
clear:both;
margin:0 0 3px;
padding:0;
list-style-type:none;
}
.colBoxIndex .linkset li {
font-size:12px;
line-height:16px;
margin:0;
padding:0 0 3px 12px;
background:url(//image.itmedia.co.jp/images/ulli_book0.gif) no-repeat 0 2px;
}
.colBoxInfo {
margin:0 10px;
font-size:10px;
color:#777;
text-align:right;
}
.colBoxInfo::before {
content:"- ";
}
.colBoxInfo a {
color:#777;
}
.colBoxInfo .colBoxDate {
font-size:10px;
line-height:14px;
}
.colBoxInfo .colBoxLinktxt {
font-size:12px;
line-height:16px;
}
.colBoxClear {
font-size:0;
line-height:0;
height:0;
clear:both;
}
.colBoxUlist {}
.colBoxUlist ul {
clear:both;
font-size:12px;
line-height:16px;
margin:0;
padding:0;
list-style-type:none;
}
.colBoxUlist ul li {
margin:0 0 3px;
padding:0 0 3px 14px;
background:url(//image.itmedia.co.jp/images/ulli_book0.gif) no-repeat 0 2px;
border-bottom:1px dotted #CCC;
}
/*---------------------------------------------------------------------*/
/* ITmedia ロゴ */
/*---------------------------------------------------------------------*/
.logo-itmedia {
position:relative;
margin:0 auto;
z-index:1;
}
.logo-itmedia a {
position:absolute;
top:17px;
left:17px;
display:block;
width:80px;
height:20px;
background:url(//image.itmedia.co.jp/topics/1707/eos/images/logo_itm_w.png) no-repeat 0 0;
background-size:contain;
text-indent:-9999px;
}
@media screen and (max-width:820px) {
	.logo-itmedia {
	padding:10px 10px 0;
	}
	.logo-itmedia a {
	width:75px;
	position:static;
	}
}
@media screen and (min-width:1030px) {
	.logo-itmedia {
	width:1010px;
	}
}
/*---------------------------------------------------------------------*/
/* ヘッダー タイトル */
/*---------------------------------------------------------------------*/
#topicsTitle {
width:100%;
min-width:320px;
margin:0 auto;
}
#topicsTitle h1 {
width:100%;
margin:0;
padding:0;
text-align:center;
color:#999;
}
#topicsTitle img {
margin:8px 0;
}
@media screen and (max-width:820px) {
	#topicsTitle img {
	width:80%;
	}
	.colBoxBanner img {
	width:100%;
	}
}

/*---------------------------------------------------------------------*/
/* ArticleListTop */
/*---------------------------------------------------------------------*/
#ArticleListTop {
margin:0;
overflow:hidden;
}
#ArticleListTop .colBoxTitle h3 {
font-size:16px;
line-height:22px;
letter-spacing:0;
}
#ArticleListTop .colBoxIndex {
position:relative;
width:25%;
float:left;
height:220px;
overflow:hidden;
}
#ArticleListTop .colBoxIndex:hover {
opacity:0.7;
}
#ArticleListTop .colBoxIcon a {
display:inline-block;
width:100%;
height:220px;
background:#000;
}
#ArticleListTop .colBoxIcon img {
width:100%;
height:auto;
}
.colBoxArticledata {
overflow:hidden;
}
#ArticleListTop .colBoxArticledata {
width:100%;
background-color:rgba(0,0,0,0.7);
position:absolute;
bottom:0;
left:0;
height:83px;
}
#ArticleListTop .colBoxTitle {
margin:10px 15px;
padding:0;
height:44px;
overflow:hidden;
}
#ArticleListTop a:link,
#ArticleListTop a:visited {
color:#FFF;
}
@media screen and (max-width:520px) {
	#ArticleListTop .colBoxIndex,
	#ArticleListTop .colBoxIcon a {
	height:180px;
	}
	#ArticleListTop .colBoxIcon img {
	width:100%;
	height:auto;
	}
	#ArticleListTop .colBoxIndex {
	width:100%;
	float:none;
	}
}
@media screen and (min-width:521px) and (max-width:820px) {
	#ArticleListTop .colBoxIndex {
	width:50%;
	}
}
@media screen and (min-width:821px) and (max-width:960px) {
	#ArticleListTop .colBoxIndex,
	#ArticleListTop .colBoxIcon a {
	height:180px;
	}
	#ArticleListTop .colBoxIcon img {
	width:auto;
	height:100%;
	}
	#ArticleListTop .colBoxTitle {
	height:40px;
	}
	#ArticleListTop .colBoxTitle h3 {
	font-size:14px;
	line-height:20px;
	}
}
@media screen and (min-width:961px) and (max-width:1100px) {
	#ArticleListTop .colBoxIndex,
	#ArticleListTop .colBoxIcon a {
	height:180px;
	}
}

/*---------------------------------------------------------------------*/
/* menulist */
/*---------------------------------------------------------------------*/
#menulist {
margin:0 0 10px;
}
#menulist ul {
list-style:none;
padding:0;
margin:0;
text-align:center;
}
#menulist li {
display:inline;
margin:0 15px;
font-size:14px;
line-height:18px;
}
#menulist li a {
white-space:nowrap;
}
#menulist.taball .menu01,
#menulist.tabrisc .menu02,
#menulist.tabwin .menu03,
#menulist.tabintro .menu04,
#menulist.tabdevice .menu05,
#menulist.tabwork .menu06 {
border-bottom:1px solid #FFF;
}


@media screen and (max-width:480px) {
	#topicsTitle {
	margin:10px 0;
	}
}
@media screen and (max-width:700px) {
	#menulist li {
	margin:0 10px;
	font-size:13px;
	}
}

/*---------------------------------------------------------------------*/
/* メインカラム Banner枠 */
/*---------------------------------------------------------------------*/
.colBoxArticles #topBanner {
margin:0 auto 30px;
max-width:660px;
}
.colBoxArticles #topBanner .colBoxHead {
display:block;
border-bottom:none;
}

/*---------------------------------------------------------------------*/
/* メインカラム 新着記事枠 */
/*---------------------------------------------------------------------*/
.colBoxArticles .colBoxHead {
display:none;
}
.colBoxArticles .colBoxIndex {
position:relative;
margin:0 0 30px;
overflow:hidden;
padding:10px;
}
.colBoxArticles .colBoxIndex:hover {
background:#F5F5F5;
}
.colBoxArticles .colBoxImage {
text-align:center;
}
.colBoxArticles .colBoxImage img {
max-width:600px;
height:auto;
margin:0 auto;
}
.colBoxArticles .colBoxIcon {
float:left;
}
.colBoxArticles .colBoxIcon a {
display:block;
overflow:hidden;
}
.colBoxArticles .colBoxIcon img {
width:240px;
height:180px;
margin:0 19px 0 0;
}
#ArticleList .colBoxCategory,
#leftSpecial .colBoxCategory {
margin-bottom:9px;
}
#ArticleListTop .CategoryArea {
height:19px;
overflow:hidden;
}
.CategoryArea {
line-height:0;
}
.colBoxCategory span {
display:inline-block;
background:#000;
padding:3px 12px 2px;
font-size:11px;
line-height:14px;
color:#FFF;
margin:0 5px 2px 0;
white-space:nowrap;
}
@media screen and (max-width:480px) {
	.colBoxArticles .colBoxImage img {
	max-width:300px;
	}
	.colBoxArticles .colBoxIcon a {
	height:inherit;
	}
	.colBoxArticles .colBoxIcon img {
	width:80px;
	height:60px;
	}
}
@media screen and (min-width:480px) and ( max-width:768px) {
	.colBoxArticles .colBoxImage img {
	max-width:480px;
	}
	.colBoxArticles .colBoxIcon img {
	width:160px;
	height:120px;
	}
}
/*---------------------------------------------------------------------*/
/* サブカラム */
/*---------------------------------------------------------------------*/
@media screen and (max-height:699px) and (min-width:1030px) {
	#globalContents {
	}
	#masterSub {
	}
}
@media screen and (min-height:700px) and (min-width:1030px) {
	#globalContents {
	}
	#masterSub {
	}
}
@media all and (-ms-high-contrast:none){
	#globalContents {
	}
}
#masterSub .colBoxIndex {
position:relative;
margin:0 0 20px 0;
min-height:60px;
}
#masterSub .colBoxIcon {
float:left;
margin:0 10px 0 0;
}
#masterSub .colBoxIcon a {
display:block;
width:80px;
height:60px;
}
#masterSub .colBoxIcon img {
width:80px;
height:60px;
}
#masterSub .colBoxTitle p {
margin:0;
font-size:14px;
line-height:20px;
word-wrap:break-word;
}
#colBoxRanking .colBoxRank {
line-height:0;
position:absolute;
top:0;
left:0;
}
#colBoxRanking .colBoxRank span {
font-size:11px;
line-height:19px;
color:#FFF;
background:#000;
padding:0;
display:block;
width:18px;
height:18px;
text-align:center;
}

/*---------------------------------------------------------------------*/
/* 共通フッタ（簡易版） */
/*---------------------------------------------------------------------*/
#masterFooter {
width:96%;
margin:0 auto;
}
#globalFooterLink {
width:100%;
margin:0 auto 10px;
padding:0;
font-size:10px;
line-height:14px;
text-align:right;
}
#globalFooterCorp {
clear:both;
width:100%;
margin:0 auto 15px;
padding:10px 0 0;
border-top:1px solid #DDD;
}
#globalFooterCorpIn {
}
#globalFooterCorp p a:link,
#globalFooterCorp p a:visited {
}
#globalFooterCorpLogo {
position:relative;
display:block;
height:1%;
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:480px) { 
	#globalFooterLink {
	text-align:left;
	}
}
@media screen and (min-width:1010px) {
	#globalFooterLink {
	width:970px;
	}
	#globalFooterCorp {
	width:970px;
	}
}

#moreList .moreButton {
background:#4d4d4d;
color:#FFF;
padding:5px 20px;
font-size:16px;
line-height:18px;
cursor:pointer;
display:block;
margin:0 auto;
width:150px;
text-align:center;
}

#bottom_pagetop {
display:none;
}
.pagetop {
padding:20px 0 0;
text-align:right;
opacity:0.7;
cursor:pointer;
bottom:0;
}

#moreList .moreButton:hover,
.pagetop:hover {
opacity:0.5;
}
@media screen and (max-width:1029px) {
	#bottom_pagetop.pagetop {
	display:block;
	position:-webkit-sticky;
	position:sticky;
	bottom:0;
	}
	#bottom_pagetop.pagetop img {
	width:24px;
	height:24px;
	}
	#right_pagetop.pagetop {
	display:none;
	}
}