body {
font-family:Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
-webkit-text-size-adjust:none;
margin:0;
padding:0;
color:#FFF;
}
a:link {
text-decoration:none;
color:#FFF;
}
a:visited {
text-decoration:none;
color:#333;
}
a:hover {
text-decoration:underline;
color:#bebebe;
}
/*---------------------------------------------------------------------*/
/* レイアウト */
/*---------------------------------------------------------------------*/
#masterHeader {
padding-bottom:0;
background:#1a1c38;
color:#CCC;
}
#masterMain {
clear:both;
/* width:690px; */
}
#masterSub {
width:300px;
overflow:hidden;
}
#masterBody {
width:100%;
margin:0 auto;
background:#1a1c38;
}
#masterContents {
width:100%;
margin:0 auto;
padding:15px 0 20px;
background:#1a1c38;
}
/*
@media screen and (max-width:480px) { 
  #masterMain {
    width:300px;
    margin:0 auto 50px;
  }
  #masterSub {
    width:300px;
    margin:0 auto;
  }
}
*/
@media screen and (min-width:480px) and ( max-width:768px) {
  #masterMain {
/* width:480px; */
    margin:0 auto 30px;
  }
  #masterSub {
    width:480px;
    margin:0 auto;
  }
}
@media screen and (min-width:768px) and ( max-width:1000px) {
  #masterMain {
    margin:0 auto 30px;
  }
  #masterSub {
    width:690px;
    margin:0 auto;
  }
}
@media screen and (min-width:1000px) {
  #masterContents {
    width:1000px;
  }
  #masterMain {
    float:left;
  }
  #masterSub {
    width:300px;
    float:right;
  }
}
/*---------------------------------------------------------------------*/
/* カラムボックス */
/*---------------------------------------------------------------------*/
.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;
}

.colBoxHead {
position:relative;
border-bottom:1px solid #CCC;
margin:0 0 5px;
padding:0 0 3px;
}
.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;
}
.colBoxSubTitle {
margin:0 0 3px;
}
.colBoxSubTitle h5 {
font-size:12px;
line-height:16px;
margin:0;
color:#A73;
}
.colBoxTitle {
margin:0 0 15px;
}
.colBoxTitle h3 {
font-size:18px;
line-height:24px;
margin:0;
}
#masterSub .colBoxTitle h3 {
font-size:13px;
line-height:17px;
}
.colBoxDescription {
margin:0 0 3px;
}
.colBoxDescription p {
font-size:13px;
line-height:22px;
margin:0;
}
.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:0;
left:0;
display:block;
width:106px;
height:40px;
background:url(//image.itmedia.co.jp/topics/1801/connect/images/logo.png) no-repeat 0 0;
background-size:contain;
text-indent:-9999px;
}
@media screen and (max-width:768px) { 
  .logo-itmedia a {
    width:50px;
  }
}
@media screen and (min-width:1000px) {
  .logo-itmedia {
    width:1000px;
  }
}
@media screen and (max-width:480px) { 
  #topicsTitle h1 img {
    width:300px !important;
  }
}
/*---------------------------------------------------------------------*/
/* ヘッダー タイトル */
/*---------------------------------------------------------------------*/

/* 1801 */
.colBoxOuter {
max-width:1000px;
/*
padding:0 20px;
*/
margin:0 auto;
}
.partsBoxMainView {
padding-top:1px;
padding-bottom:69px;
}

.partsBoxMainView h1 {
text-align:center;
margin-bottom:40px;
}

/* /1801 */


#topicsTitle {
width:100%;
min-width:320px;
/* height:500px; */
margin:0 auto;
background-image:url(//image.itmedia.co.jp/topics/1801/connect/images/titleimage03.png);
background-size:cover;
background-position:left 0;
background-repeat:no-repeat;
background-color:#000;
}
/*
#topicsTitle h1 {
width:1000px;
height:500px;
margin:0 auto;
padding:0;
text-align:center;
text-indent:-9999px;
background:url(//image.itmedia.co.jp/topics/1801/connect/images/titleimage_fix03.png) no-repeat 0 bottom;
}


@media screen and (max-width:480px) { 
  #topicsTitle {
    height:109px;
  }
  #topicsTitle h1  {
    width:320px;
    height:109px;
    background-size:320px 96px;
  }
}
*/
@media screen and (min-width:480px) and ( max-width:768px) {
  #topicsTitle {}
  #topicsTitle h1  {
    /* width:480px; */
    height:164px;
    background-size:480px 143px;
  }
  #topicsTitle .partsBoxMainView p {
    padding:10px;
    font-size:13px;
}
}
@media screen and (max-width: 1006px) {
 #globalContents {
    width:645px;
    margin:0 auto;
}
.ArticleBoxIndex {
margin:0 20px 20px 0 !important;
}
}
@media screen and (max-width: 644px) {
 #globalContents {
    width:300px;
    margin:0 auto;
}
}
@media screen and (min-width: 1007px) {
.ArticleBoxIndex:nth-child(3n) {
margin:0px !important;
}
}
/*
@media screen and (min-width:768px) and ( max-width:1024px) {
  #topicsTitle {
    height:262px;
  }
  #topicsTitle h1  {
    width:768px;
    height:262px;
    background-size:768px 228px;
  }
}
*/
@media screen and (min-width:1024px) {
  #topicsTitle {
    overflow:hidden;
    max-width:100%;
  }
  #topicsTitle h1 {;
  }
}
/*---------------------------------------------------------------------*/
/* ヘッダー ABOUT */
/*---------------------------------------------------------------------*/
#topicsAboutButton {
display:table;
width:100%;
max-width:1000px;
margin:0 auto 10px;
text-align:right;
position:relative;
top:-32px;
}
@media screen and (max-width:680px) {
	#topicsAboutButton {
	top:10px;
	}
}

#topicsAboutButtonInner {
float:right;
width:100px;
margin:0 5px 0 0;
padding:3px 0;
text-align:center;
font-size:13px;
color:#EEE;
border:1px #122c3b solid;
cursor:pointer;
background:#264479;
}
#topicsAboutButtonInner:hover {
background:#444;
color:#AAA;
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:480px;
margin:auto;
padding:50px;
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:#444;
color:#AAA;
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;
  }
}
/*---------------------------------------------------------------------*/
/* ヘッダー PickUP 枠 */
/*---------------------------------------------------------------------*/
.colBoxPickUp {
width:98%;
margin:0 auto;
}
.colBoxPickUpCategory {
width:49%;
float:left;
}
.colBoxPickUpCategory:nth-child(2n) {
float:right;
}
.colBoxPickUp .colBoxOuter {
width:495px;
-webkit-overflow-scrolling:touch;
}
.colBoxPickUp .colBoxOuter > * {
  -webkit-transform:translateZ(0px);
}
.colBoxPickUp .colBoxHead {
position:relative;
padding:16px 0 0 0;
}
.colBoxPickUp .colBoxHead::before {
content:'PickUp';
position:absolute;
top:0;
right:0;
color:#9897a8;
font-size:30px;
}
.colBoxPickUp .colBoxIndex {
float:left;
width:240px;
height:220px;
margin:0 15px 15px 0;
background:#FFF;
overflow:hidden;
}
.colBoxPickUp .colBoxIndex:last-child {
margin:0 0 15px 0;
}
.colBoxPickUp .colBoxTitle {
margin:0;
}
.colBoxPickUp .colBoxTitle h3 {
font-size:13px;
line-height:20px;
margin:0;
padding:7px 10px;
}
.colBoxPickUp .colBoxTitle h3 a {
color:#333;
}
/* for タイトルカット */
.colBoxPickUp .colBoxTitle {
overflow:hidden;
height:50px;
}
.colBoxPickUp .colBoxTitle h3 {
position:relative;
overflow:hidden;
height:50px;
padding-right:11px;
}
.colBoxPickUp .colBoxTitle h3::before {
position:absolute;
content:"…";
top:31px;
right:10px;
font-size:10px;
color:#333;
}
.colBoxPickUp .colBoxTitle h3::after {
background:#fff;
position:absolute;
content:"";
height:100%;
width:100%;
}
.colBoxPickUp .colBoxIcon a {
display:block;
height:150px;
overflow:hidden;
}
.colBoxPickUp .colBoxIcon img {
width:240px;
height:180px;
}
@media screen and (min-width:480px) and (max-width:768px) {
  .colBoxPickUp .colBoxOuter {
    width:auto;
  }
  .colBoxPickUp .colBoxIndex:last-child,
  .colBoxPickUp .colBoxIndex {
    float:inherit;
    margin:0 auto 15px;
  }
}
@media screen and (max-width:480px) { 
  .colBoxPickUpCategory {
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .colBoxPickUp .colBoxOuter {
    width:510px;
  }
  .colBoxPickUp .colBoxHead::before {
    display:none;
  }
  .colBoxPickUp .colBoxIndex:last-child,
  .colBoxPickUp .colBoxIndex {
    float:left;
    margin:0 15px 15px 0;
  }
}
@media screen and (min-width:768px) and (max-width:1024px) {
  .colBoxPickUp .colBoxOuter {
    width:auto;
  }
  .colBoxPickUp .colBoxIndex {
    width:47%;
  }
  .colBoxPickUp .colBoxIcon img {
    width:100%;
    height:auto;
  }
}
@media screen and (min-width:1024px) {
  .colBoxPickUp {
    width:1000px;
  }
}
/*---------------------------------------------------------------------*/
/* メインカラム 新着記事枠 */
/*---------------------------------------------------------------------*/
/* 1801 */
.ArticleBoxIndex {
width:300px;
height:300px;
overflow:hidden;
float:left;
margin:0 50px 20px 0;
position:relative;
}
/*
.ArticleBoxIndex:nth-child(3n) {
margin:0px !important;
}
*/

.ArticleBoxHead {
position:absolute;
bottom:0;
left:0;
width:100%;
/*
background:-moz-linear-gradient(top, transparent %, rgba(0,0,0,1) 75%);
background:-webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,1) 75%);
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 75%);
*/
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}

.ArticleBoxHead h3 {
color:#FFF;
font-size:18px;
line-height:26px;
letter-spacing:1px;
padding:10px 20px;
margin:1px;
}

.ArticleBoxImage {
background:#000;
}

a:hover img {
opacity: 0.85;
}

#topicsTitle p {
font-size:16px;
line-height:1.75;
letter-spacing:1px;
text-align:justify;
color:#ffffff;
padding:39px 30px 40px;
background:rgba(16,38,56,0.64);
}

/* /1801 */

#colBoxArticlesNav {
position:relative;
margin:30px auto 50px auto;
padding:0 0 15px 0;
text-align:center;
}
#colBoxArticlesNav a {
position:relative;
width:160px;
margin:0 10px;
padding:10px;
color:#333;
text-decoration:none;
font-size:18px;
font-weight:bold;
}
#colBoxArticlesNav span {
position:absolute;
left:0;
bottom:0;
display:block;
width:50px;
height:5px;
background:#000;
}
#colBoxArticlesNav a:nth-child(2)::after {
content:'Business';
}
#colBoxArticlesNav a:nth-child(3)::after {
content:'Infrastructure';
}
#colBoxArticlesNav a:nth-child(2)::after,
#colBoxArticlesNav a:nth-child(3)::after {
position:absolute;
width:160px;
bottom:-5px;
right:0;
color:#9897a8;
font-weight:normal;
font-size:14px;
}
.colBoxArticles .colBoxHead {
display:none;
}
.colBoxArticles .colBoxIndex {
position:relative;
margin:0 0 20px;
}
.colBoxArticles .colBoxIndexLeft {
float:left;
width:100px;
}
.colBoxArticles .colBoxIndexRight {
float:right;
width:580px;
}
.colBoxArticles .colBoxArticleType {
float:left;
width:90px;
margin:0 10px 10px 0;
padding:2px 0;
background:#A01C1C;
color:#FFF;
font-size:12px;
text-align:center;
}
.colBoxArticles .type-interview .colBoxArticleType {
background:#1C57A0;
}
.colBoxArticles .type-casestudy .colBoxArticleType {
background:#1199AF;
}
.colBoxArticles .type-feature .colBoxArticleType {
background:#E0B61B;
}
.colBoxArticles .type-trend .colBoxArticleType {
background:#754478;
}
.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;
height:150px;
overflow:hidden;
}
.colBoxArticles .colBoxIcon img {
width:240px;
height:180px;
margin:0 15px 15px 0;
}
#ISTLC .colBoxOuter {
margin-bottom:20px;
border-bottom:1px #ddd solid;
}
#ISTLC .colBoxHead {
display:none;
}
#ISTLC .colBoxInner {
padding-top:30px;
border-top:1px #ddd solid;
}
#ISTLC .colBoxIndex {
position:relative;
}
#ISTLC .colBoxTitle::before {
content:'SPECIAL';
float:left;
width:90px;
margin:0 20px 10px 0;
padding:2px 0;
background:#27A208;
color:#FFF;
font-size:12px;
text-align:center;
}
#ISTLC .colBoxTitle::after {
content:'PR';
position:absolute;
top:0;
right:0;
color:#999;
font-size:12px;
font-weight:bold;
}
#ISTLC .colBoxIcon {
margin:0 0 0 110px;
}
#ISTLC .colBoxIcon a {
height:inherit;
}
#ISTLC .colBoxIcon img {
width:inherit;
height:inherit;
}
#ISTLC .colBoxNewtxt {
margin:0 0 0 7px;
font-size:16px;
}
@media screen and (max-width:480px) { 
  #colBoxArticlesNav {
    display:none;
  }
  .colBoxArticles .colBoxArticleType {
    float:none;
  }
  .colBoxArticles .colBoxIndexLeft {
    float:none;
    width:100px;
  }
  .colBoxArticles .colBoxIndexRight {
    float:none;
    width:300px;
  }
  .colBoxArticles .colBoxImage img {
    max-width:300px;
  }
  .colBoxArticles .colBoxIcon a {
    height:inherit;
  }
  .colBoxArticles .colBoxIcon img {
    width:80px;
    height:60px;
  }
  #ISTLC .colBoxIcon {
    margin:0;
  }
}
@media screen and (min-width:480px) and ( max-width:768px) {
  .colBoxArticles .colBoxIndexRight {
    width:380px;
  }
  .colBoxArticles .colBoxImage img {
    max-width:480px;
  }
  .colBoxArticles .colBoxIcon img {
    width:160px;
    height:120px;
  }
}
/*---------------------------------------------------------------------*/
/* サイドカラム レクタングル */
/*---------------------------------------------------------------------*/
#ITR {
margin:0 0 20px;
}
@media screen and (min-width:480px) and ( max-width:768px) {
  #ITR {
    width:300px;
    margin:0 auto 20px;
  }
}
@media screen and (min-width:768px) and ( max-width:1000px) {
  #ITR {
    width:300px;
    margin:0 20px 20px;
    float:left;
  }
}
/*---------------------------------------------------------------------*/
/* サイドカラム 関連記事 */
/*---------------------------------------------------------------------*/
.colBoxRecommend .colBoxIcon img {
margin:0 7px 10px 0;
}
@media screen and (min-width:768px) and ( max-width:1000px) {
  .colBoxRecommend {
    width:300px;
    margin:0 20px 10px;
    float:left;
  }
}
/*---------------------------------------------------------------------*/
/* サイドカラム スポンサー枠 */
/*---------------------------------------------------------------------*/
.colBoxSponsors .colBoxHead {
margin:0 0 10px;
}
.colBoxSponsors .colBoxUlist li {
margin:0 0 15px;
padding:0;
background:inherit;
border-bottom:none;
}
.colBoxSponsors .colBoxUlist li a {
display:block;
text-align:center;
}
.colBoxSponsors .colBoxUlist li img {
max-width:300px;
margin:0 auto;
}
@media screen and (min-width:768px) and ( max-width:1000px) {
  .colBoxSponsors {
    width:300px;
    margin:0 20px 10px;
    float:left;
  }
}
/*---------------------------------------------------------------------*/
/* 共通フッタ（簡易版） */
/*---------------------------------------------------------------------*/
#globalFooterLink {
width:100%;
margin:0 auto 10px;
padding:0;
font-size:10px;
line-height:14px;
text-align:right;
}
#globalFooter {
margin:10px !important;
}
#globalFooterCorp {
clear:both;
width:100%;
margin:0 auto 15px;
padding:10px 0 0;
border-top:1px solid #FFF;
}
#globalFooterCorpIn {
}
#globalFooterCorp p a:link,
#globalFooterCorp p a:visited {
}
#globalFooterCorpLogo {
position:relative;
display:block;
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:152px;
height:25px;
background:url(//image.itmedia.co.jp/topics/1801/connect/images/sponsor_logo.png) 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:1000px) {
  #globalFooterLink {
    width:1000px;
  }
  #globalFooterCorp {
    width:1000px;
  }
}