@charset "UTF-8";
body,h1,h2,h3,h4,h5,h6,p,table,tr,th,td,ul,ol,li,form,blockquote,dt,dd,dl,pre{margin:0;padding:0;line-height:1em;font-weight:normal;text-align:left;}
table{border-collapse:collapse;}
th,td{vertical-align:top;}
ul,ol{list-style-type:none;}
sub{vertical-align:-0.3em;font-size:70%;line-height:1em;}
sup{vertical-align:0.55em;font-size:70%;line-height:1em;}

a{color:#1e63ad;text-decoration:none;overflow:hidden;}
a:visited{color:#1e63ad;}
a:hover{color:#1e63ad;text-decoration:underline;}
a img{border:none;}

body{font-family:"Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Arial;color:#333;}

#North{background:url(/images/idg/ciomagazine/common/North_bg.png) repeat-x;}
#Contentia{width:900px;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:20px;}
#Contentia:after{content:"";display:block;clear:both;}
#South{border-top:solid 1px #052445;border-bottom:solid 10px #acb4d7;}

#mainContent{width:560px;float:left;}
#sideContent{width:300px;float:right;padding-right:20px;}

.pageup{width:1000px;text-align:right;margin-bottom:10px;}
#header{width:1000px;margin-left:auto;margin-right:auto;}
#head_content{height:80px;}
#head_content h1{padding-left:45px;}

#hnav{width:900px;margin-left:auto;margin-right:auto;height:45px;}
#hnav ul{}
#hnav ul li{float:left;}
#rectangle{margin-bottom:14px;}

.mostread{border:solid 1px #d9d9d9;margin-bottom:14px;}
.mostread ul{padding:2px 10px 10px 10px;width:280px;overflow:hidden;}
.mostread ul li{width:280px;float:left;overflow:hidden;padding-top:10px;margin-top:10px;border-top:dotted 1px #999;}
.mostread ul li:first-child{border-top:none;margin-top:0;}
.mostread ul li p.rank{width:30px;float:left;}
.mostread ul li p.title{width:248px;padding-right:2px;float:left;}
.mostread ul li p.title a{font-size:84%;line-height:1.33;}

#facebook{margin-bottom:14px;}
#footer{width:970px;margin-left:auto;margin-right:auto;padding-top:30px;}
#fnav{border-bottom:solid 1px #afafaf;padding-bottom:13px;}
#fnav p{font-size:12px;text-align:center;line-height:1.7;}

#fcredit{width:900px;margin-left:auto;margin-right:auto;overflow:hidden;padding-top:14px;padding-bottom:18px;}
#fcredit .bplogo{width:150px;text-align:left;float:left;padding-top:13px;}
#fcredit .idglogo{width:130px;text-align:right;float:right;}
#fcredit .copyright{width:600px;float:left;}
#fcredit .copyright p{font-size:11px;line-height:1.4;margin-bottom:4px;}
.index_box{margin-bottom:15px;background:#fff;}
.index_box h2{background:url(/images/idg/ciomagazine/index/index_box_head.png) left top no-repeat;color:#be171d;font-weight:bold;font-size:16px;padding:13px 0 12px 22px;}

.index_box .pad{padding:12px;border:solid 2px #dbdbdb;border-top:none;}

.index_box h3{margin-bottom:6px;font-size:15px;line-height:24px;font-weight:bold;}
.index_box h3 a{font-size:15px;line-height:24px;font-weight:bold;}
.index_box .summary{font-size:13px;line-height:22px;}

.index_box .pickup{width:530px;overflow:hidden;}
.index_box .pickup .east{width:120px;float:right;}
.index_box .pickup .west{width:400px;float:left;}

.index_box .pubdate{color:#999}

.index_box#special{background:#f2f9ff;}
.index_box#special h2{background:url(/images/idg/ciomagazine/index/index_box_head_special.png) left top no-repeat;}
.index_box#special .pickup .east{width:180px;float:right;}
.index_box#special .pickup .west{width:340px;float:left;}
.index_box#special .pickup .image{margin-bottom:8px;}
.index_box#special .pickup .series_link{}
.index_box#special .pickup .series_link li{font-size:13px;margin-top:2px;line-height:1.4;}
.index_box#special .pickup .series_link li.past{}
.index_box#special .pickup .series_link li.past a{text-decoration:underline;}
.index_box#special .pickup .series_link li.this{font-weight:bold;color:#036;}
.index_box#special .pickup .series_link li.plan{}
.index_box#special .pickup .more{margin-top:10px;padding-right:10px;text-align:right;}
.index_box#special .pickup .more a{padding-left:12px;background:url(/images/idg/ciomagazine/common/bullet1.png) left center no-repeat;font-size:13px;}




.index_box ul.line_index{margin-top:16px;}
.index_box ul.line_index li{font-size:13px;line-height:20px;margin-bottom:2px;}
.index_box ul.line_index li a{padding-left:16px;background:url(/images/idg/ciomagazine/common/bullet1.png) 2px 6px no-repeat;font-size:13px;line-height:20px;}

.index_box ul.visual_index{width:530px;overflow:hidden;}
.index_box ul.visual_index li{width:255px;padding-left:5px;padding-right:5px;float:left;overflow:hidden;margin-bottom:20px;}
.index_box ul.visual_index li .image{width:80px;float:left;}
.index_box ul.visual_index li .title{width:165px;float:right;}
.index_box ul.visual_index li .title a{font-size:13px;line-height:20px;}

.index_box#backnumber .pad{padding-top:16px;padding-bottom:0;}

.index_box .category_index{}
.index_box .category_index .category{width:530px;overflow:hidden;margin-bottom:15px;}
.index_box .category_index .category h3{width:100px;float:left;margin-bottom:0;}
.index_box .category_index .category h3 img{vertical-align:bottom;}
.index_box .category_index .category ul.line_index{margin-top:0;width:420px;float:right;}

.index_box#category .pad{padding-bottom:0;}

.topic_path{margin-bottom:10px;font-size:12px;}
.category_head{margin-bottom:0px;}


.article_index{width:540px;overflow:hidden;margin-top:20px;}
.article_index li{width:540px;float:left;overflow:hidden;padding-top:24px;margin-bottom:14px;border-top:dotted 1px #999999;}
.article_index li:first-child{padding-top:0px;border-top:none;}
.article_index li .image{width:122px;float:left;}
.article_index li .image img{border:solid 1px #dedede;}
.article_index li .data{width:386px;padding-left:16px;padding-right:16px;float:left;}
.article_index li .data .category{margin-bottom:4px;}
.article_index li .data h3{font-size:14px;line-height:1.36;font-weight:bold;margin-bottom:4px;}
.article_index li .data .summary{font-size:12px;line-height:1.6;}
.article_index li .data .summary a{float:right;padding:2px 4px 2px 10px;background:url(/images/idg/ciomagazine/common/bullet1.png) left center no-repeat;white-space:nowrap;color:#1e63ad;}


.head_category_link{text-align:right;font-size:14px;padding-right:1px;margin-top:20px;}
.bottom_category_link{text-align:right;margin-top:12px;}
#kiji_header{margin-top:18px;border-bottom:dotted 1px #ccc;padding-bottom:8px;}
#kiji_header h2{font-size:24px;font-weight:bold;color:#036;line-height:1.33;}
#kiji_header .subtitle{margin-top:7px;font-size:16px;color:#036;line-height:1.5;}
#kiji_header .data{width:540px;margin-top:16px;overflow:hidden;font-size:13px;}
#kiji_header .data .pubdate{width:100px;float:left;line-height:1.4;}
#kiji_header .data #author{clear:left; width:440px;float:left;line-height:1.4;}
h2.style_sample_topic{clear:both;padding:100px 0 8px 10px;margin-bottom:30px;border-bottom:dashed 1px;font-weight:bold;font-size:30px;color:#333; font-family:serif;}

/*#mainContent #kiji{padding-top:10px;padding-bottom:50px;background:url(/images/idg/ciomagazine/common/kiji_btm.png) left bottom repeat-x;}*/
#mainContent #kiji { padding-top: 10px;padding-bottom: 50px;}

#naviBottom{padding-top:50px;clear:both;}

.nextPagePreview{padding:8px 12px 6px 12px;width:500px;margin-left:auto;margin-right:auto;margin-bottom:30px;line-height:1.4;background:#ededed;font-weight:bold;text-align:center;}
.nextPagePreview a{color:#1752b7;}
.nextPagePreview a:hover{}

#pager{margin-top:30px;}
#pager .pages{text-align:center;}
#pager .pages a{font-size:14px; line-height:19px; font-weight:bold; color:#666666; text-align:center; display:inline-block; margin:0px 2px; overflow:hidden; background:url(/images/idg/ciomagazine/common/pager_off.png) left top no-repeat; width:27px; height:22px;padding-top:5px;}
#pager a:hover{color:#fff; background:url(/images/idg/ciomagazine/common/pager_on.png) left top no-repeat; text-decoration:none;}
#pager a:visited{}
#pager a:visited:hover{color:white}
* html #pager .pages a{}

#pager .pages a.tonext{width:30px; padding-left:10px; background:#fff; color:#666; text-align:left;}
#pager .pages a:hover.tonext{color:#aaa;}
#pager .pages a.now{background:url(/images/idg/ciomagazine/common/pager_on.png) left top no-repeat; color:#fff;}
/*
#pager .pages a.now:hover,
#pager .pages a.now:visited,
#pager .pages a.tonext:visited{color:#fff;}
*/

/* リード（灰色） */
#mainContent #kiji .bplead{
  margin-top: 12px; margin-bottom:18px;
  font-size:17px;
  font-weight: bold;
  color: #333;
  line-height:1.66;
}

#mainContent #kiji p{
  line-height:1.66;
  margin-bottom:0.8em;
}
#mainContent #kiji ul{
  list-style-type:disc;
  margin-left:25px;
  margin-bottom:20px;
}
#mainContent #kiji li{
  line-height:150%;
}
/* 質問 */
#mainContent #kiji .bpquestion{
    font-weight: bold;
    color: #006633;
    line-height: 130%;
    text-indent: 30px;
    background: url(/images/idg/ciomagazine/common/icn_line_green.gif) no-repeat;
    background-position: 4px 5px;
}

/* 質問への回答 */
#mainContent #kiji .bpanswer{
    font-weight: bold;
    color: #660000;
    line-height: 130%;
    text-indent: 30px;
    background: url(/images/idg/ciomagazine/common/icn_line_brown.gif) no-repeat;
    background-position: 4px 5px;
}

/* 小見出し */
#mainContent #kiji h4{
  clear:both;
  margin:15px 0;
  padding: 4px 0 6px 7px;
  font-weight: bold;
  color: #000000;
  font-size:15px;line-height:1.4;
  border-bottom: 2px solid #c83535;
}

/* 中見出し */
#mainContent #kiji h3 {
  clear:both;
  margin:15px 0;
  padding: 8px 8px 5px 12px;
  font-weight: bold;
  line-height:1.4;
  color: #000000;
  border: 1px solid #c42f2f;
  border-bottom: 3px solid #c42f2f;
  background-color: #fac3c3;
}

/* 画像の枠 */
#mainContent #kiji .bpimage_image img{
  border:1px solid #666;
}

/* 画像のキャプション */
#mainContent #kiji .bpimage_title{
  margin-bottom:4px;
  text-align:left;
  line-height: 1.3;
  font-weight: bold;
  font-size: 14px;
  clear:both;
}
#mainContent #kiji .bpimage_caption{
  padding:6px 0 0 0;
  text-align:left;
  line-height: 1.3;
  font-size: 12px;
  clear:both;
}
#mainContent #kiji .bpimage_click{
  text-align:left;
  color: #006699;
  line-height: 130%;
  font-size: 8pt;
  clear:both;
}


/* 図（回り込み：左）右配置 */
#mainContent #kiji .bpimage_right{
  float:right;
  margin:4px 0 10px 16px;
}

/* 図（回り込み：右）左配置 */
#mainContent #kiji .bpimage_left{
  float:left;
  margin:10px 10px 10px 0;
}

/* 図（スタンダード）中央配置 */
#mainContent #kiji .bpbox_center{
  text-align:center;
}
#mainContent #kiji .bpimage_center{
  width:500px;
  margin:10px auto;
  text-align:left;
}

/* 図（エトキ右配置） */
#mainContent #kiji .bpimage_caption_right{
}
#mainContent #kiji .bpimage_caption_right .bpimage_title{
  padding:10px 0 0 0;
}

/* 図（二つ並び） */
#mainContent #kiji .bpimage_double{
  width:500px;
  margin:10px auto;
  text-align:center;
}
#mainContent #kiji .bpimage_double .bpimage_left{
  margin:0 0 6px 0;
}
#mainContent #kiji .bpimage_double .bpimage_right{
  margin:0 0 6px 0;
}


/* 図（三つ並び） */
#mainContent #kiji .bpimage_triple{
  width:500px;
  margin:10px auto;
  text-align:center;
}
#mainContent #kiji .bpimage_triple .bpimage_wrap{
  margin:0;
  float:left;
}
#mainContent #kiji .bpimage_triple .bpimage_left{
  margin:0 0 6px 0;
}
#mainContent #kiji .bpimage_triple .bpimage_center{
  float:right;
  margin:0 0 6px 0;
}
#mainContent #kiji .bpimage_triple .bpimage_right{
  margin:0 0 6px 0;
}

/* 図（縦積み） */
#mainContent #kiji .bpbox_left{
  float:left;
  margin:10px 10px 10px 0;
}
#mainContent #kiji .bpbox_right{
  float:right;
  margin:10px 0 10px 10px;
}
#mainContent #kiji .bpimage_set{
  margin:0 0 10px 0;
}

/* 表 */
#mainContent #kiji .bptable{
  margin:10px 0;
}
#mainContent #kiji .bptable_title{
  margin-bottom:6px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: bold;
  text-align: left;
}
#mainContent #kiji .bptable_caption{
  margin-bottom:6px;
  line-height: 1.4;
  font-size: 12px;
  text-align: left;
}
#mainContent #kiji .bptable table{
  border-collapse: collapse;
  font-size:10pt;
  border:1px solid #666;
}
#mainContent #kiji .bptable table th{
  padding:7px 4px 5px 6px;
  font-size:13px;
  font-weight:bold;
  background-color:#D1EAD4;
  border:1px solid #666;
}
#mainContent #kiji .bptable table td{
  padding:7px 4px 5px 6px;
  font-size:13px;
  background-color:#fff;
  border:1px solid #666;
}

/* 表の配置（左・右・真ん中） */
#mainContent #kiji .bptable_left{
  clear:both;
  float:left;
}
#mainContent #kiji .bptable_right{
  clear:both;
  float:right;
}
#mainContent #kiji .bptable_center{
  margin: auto;
  clear:both;
  text-align:center;
}
#mainContent #kiji .bptable_center .bptable{
  margin: auto;
}

/* プロフィール */
#mainContent #kiji .bpprofile,
#mainContent #kiji .bpprofile_photo{
  margin:1em 0;
  width:390px;
  border:1px solid #333333;
}
#mainContent #kiji .bpprofile .bpprofile_profile{
  font-weight: bold;
  color: #000000;
  border-bottom: 3px solid #4D61BA;
  background: url(/images/idg/ciomagazine/common/writer.jpg) no-repeat #B5CDE5;
  background-position: 5px center;
  text-align: left;
  padding:8px 0 4px 38px;
  vertical-align: bottom;
}
#mainContent #kiji .bpprofile_name {
  font-size:15px;
  
}
#mainContent #kiji .bpprofile_position {
  font-weight: bold;
  font-size:13px;
  line-height:1.5;
}
#mainContent #kiji .bpprofile_text {
  color: #000000;
  text-align: left;
  padding: 10px 10px;
  font-size:12px;
  line-height:1.5;
}

/* プロフィール（顔写真付） */
#mainContent #kiji .bpprofile_photo .bpprofile_profile{
  font-weight: bold;
  color: #000000;
  border-bottom: 3px solid #4D61BA;
  background: #B5CDE5;
  text-align: left;
  padding:5px 0 3px 10px;
  vertical-align: bottom;
  line-height:1.5;
}
#mainContent #kiji .bpprofile_photo .bpprofile_text img{
  padding:2px 10px 3px 0;
  float:left;
}

/*--インタビュープロフィール用--*/
#mainContent #kiji .bpinterview{
  margin:1em 0;
  width:390px;
  border:1px solid #333;
}
#mainContent #kiji .bpinterview_profile {
  border-bottom: 3px solid #006666;
  background: url(/images/idg/ciomagazine/common/profile.jpg) no-repeat #AEDDA6;
  background-position: 5px center;
  padding:5px 0 5px 38px;
  text-align: left;
  vertical-align:middle;
}
#mainContent #kiji .bpinterview_position {
  font-weight: bold;
  font-size:14px;
  line-height:1.5;
}
#mainContent #kiji .bpinterview_name {
  font-size:12px;
}
#mainContent #kiji .bpinterview_text {
  color: #000000;
  text-align: left;
  padding: 10px 10px;
  font-size:12px;
  line-height:1.5;
}

/* 囲み1 */
#mainContent #kiji .bpbox {
  margin:1em 0 0 20px;
  width:500px;
  border: 1px solid #000000;
  background-color: #E8EAC3;
  text-align: left;
}
#mainContent #kiji .bpbox .bpbox_title {
  margin:15px 25px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 5px solid #815400;
  padding-bottom: 8px;
}
#mainContent #kiji .bpbox .bpbox_text {
  margin:15px 25px;
  text-align: left;
  line-height: 1.5;
  color: #000000;
  padding: 10px;
}

/* 囲み2 */
#mainContent #kiji .bpbox2 {
  margin:1em 0 0 20px;
  width:500px;
  border: 1px solid #000000;
  background-color: #A9CDBF;
  text-align: center;
}
#mainContent #kiji .bpbox2 .bpbox_title {
  margin:6px 8px 4px 8px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 16px 8px 16px;
}
#mainContent #kiji .bpbox2 .bpbox_text {
  margin:0px 8px 8px 8px;
  text-align: left;
  line-height: 1.5;
  color: #000000;
  padding: 8px 25px 10px 25px;
  background-color: #FFFFFF;
}

/* 囲み3 */
#mainContent #kiji .bpbox3 {
  margin:1em 0 0 20px;
  width:500px;
  background-color: #BABBD7;
  text-align: center;
  border-bottom: 5px solid #7a82b3;
}
#mainContent #kiji .bpbox3 .bpbox_title {
  margin:6px 0 0 0;
  text-align: left;
  font-size: 17px;
  line-height: 1.5;
  font-weight: bold;
  padding: 8px 16px 6px 16px;

  border-bottom: 5px solid #7a82b3;
}
#mainContent #kiji .bpbox3 .bpbox_text {
  text-align: left;
  line-height: 1.5;
  color: #000000;
  padding:8px 16px 6px 16px;
  background-color: #E2E3F5;
  border-top: 5px solid #fff;
  border-bottom: 5px solid #fff;
}

/* 囲み4 */
#mainContent #kiji .bpbox4,
#mainContent #kiji .bpframe {
  margin:1em 0 0 20px;
  width:500px;
  border: 1px solid #000000;
  background-color: #CBCDED;
  text-align: center;
}
#mainContent #kiji .bpbox4 .bpbox_title,
#mainContent #kiji .bpframe .bpbox_title {
  margin:6px 3px 0 3px;
  text-align: left;
  font-size: 17px;
  line-height: 1.5;
  font-weight: bold;
  padding: 3px 8px 6px 8px;
}
#mainContent #kiji .bpbox4 .bpbox_text,
#mainContent #kiji .bpframe .bpbox_text{
  margin:0 3px 3px 3px;
  padding:6px 10px 5px 10px;
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
  color: #000000;
  background-color: #FFFFFF;
}
#mainContent #kiji .bpframe .bpbox_text{
  margin:3px;
}

/* コードリスト */
#mainContent #kiji .bpcode {
  margin:1em auto;
  width: 530px;
  background-color: #E4E4E6;
  border: 1px solid #666666;
  line-height: 1.4;
  color: #000000;
  text-align: left;
}

#mainContent #kiji .bpcode pre{
  margin: 10px 14px;
  font-size: smaller;
  line-height:1.4;
}

#mainContent #kiji .bpcode pre code{
  margin: 0px;
  font-size: 100%;
}
/* コードリスト2 */
#mainContent #kiji .bpcode2 {
  margin:1em auto;
  width: 530px;
  background-color: #C5E4D5;
  border: 1px solid #666666;
  line-height: 1.4;
  color: #000000;
  text-align: left;
}
#mainContent #kiji .bpcode2 pre{
  margin: 10px 14px;
  font-size: smaller;
  line-height:1.4;
}

#mainContent #kiji .bpcode2 pre code{
  margin: 0px;
  font-size: 100%;
}

/* 訂正文 */
#mainContent #kiji .bpteisei_box {
  margin:1em 0;
  text-align:right;
}
#mainContent #kiji .bpteisei {
  margin-left:auto; margin-right:auto;
  width: 480px;
  padding: 5px;
  line-height: 1.5;
  color: #000000;
  text-align: left;
  font-size:13px;
}

/* 用語解説用 */
#mainContent #kiji .bpword{
  border-top:2px dotted #ccc;
  padding:8px 5px 5px 5px;
  font-size: 13px;
  line-height: 1.5;
}
#mainContent #kiji .bpword b{
  color:#000;
}

/* 注釈用 */
#mainContent #kiji .bpannotation{
  width:480px;
  padding-left: 30px;
  font-size: 13px;
  line-height: 1.4;
  color:#666;
}

/* 参考文献用 */
#mainContent #kiji .bpreference{
  border:1px dotted #ccc;
  padding:8px 14px;
  font-size: 13px;
  line-height: 1.6;
}

/* clearfix */
.clearfix,
#mainContent #kiji .bpprofile_photo .bpprofile_text, 
#mainContent #kiji .bpimage_caption_right{
    zoom:1;/*for IE 5.5-7*/
}
.clearfix:after,
#mainContent #kiji .bpimage_caption_right:after,
#mainContent #kiji .bpimage_double:after,
#mainContent #kiji .bpprofile_photo .bpprofile_text:after,
#mainContent #kiji .bpimage_triple:after {
    display: block;
    clear: both;
    height: 0.1em;
    line-height: 0.1em;
    visibility: hidden;
    content: ".";
}

#kiji_header .socialBtnArea{
  display:block;
  float:right;
  vertical-align:top;
}
#kiji_header .socialBtnArea ul{
  margin:2px 0 0 15px;
  padding:0;
}
#kiji_header .socialBtnArea li{
  overflow:hidden;
  float:left;
  margin:0 5px 0 0;
  padding:0;
  vertical-align:middle;
}
#kiji_header .socialBtnArea li iframe.twitter-share-button{
  margin:2px 0 0 0;
  *margin:0;
width: 100px!important;
}
#kiji_header .socialBtnArea li .fb-like span{
  *vertical-align:top;
}

#twitter{
  overflow:hidden;
  width:298px;
  border:solid 1px #aaaaaa;
  margin-bottom:14px;
}
#twitter h3{
  background:url(/images/it/itpro/2013/sub_ct_twitter.gif) left top no-repeat;
  color:#fff;
  font-size:13px;
  font-weight:normal;
  line-height:31px;
  height:31px;
  padding:0 0 0 8px;
}
#twitter .logo{
  float:left;
  margin:6px 0 0 12px;
}
#twitter ul{
  float:right;
  margin:6px 10px 0 10px;
  font-size:70%;
  line-height:120%;
}
#twitter li{
  border-top:1px solid #e4e4e4;
  padding:3px 16px;
}
#twitter li.first{
  border:none;
}
#twitter li span{
  font-weight:bold;
  color:#000;
  display:inline-block;
  margin:0 1ex 0 0;
  font-size:120%;
  line-height:120%;
}
#twitter .btn{
  clear:both;
  display:block;
  margin:0;
  padding:5px 0 10px 50px;
}