@charset "UTF-8";
/*制作作業用colortank
メイン：#1e64aa
セカンド：#0096be
最薄線：#e5e5e5
*/

/*IE8以下のための新要素のブロック要素への変換*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display:block;
}

figure{
margin:0;
}

/*reset*/
html,body,dl,dt,dd,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
line-height: 1;
}
ul,ol{
margin: 0;
padding: 0;
list-style:none;
}
small{
font-size:100%;
}
body{
font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#333;
font-size:13px;
-webkit-text-size-adjust: 100%;	/*スマホで文字を拡大縮小させない*/
}
a{
color:#333;
text-decoration:none;
}
a:hover{
color:#878787;
text-decoration:underline;
}
a:visited{
color:#878787;
text-decoration:none;
}
		#pageHeader a:visited,
		#pageFooter a:visited{
		color:#333;
		text-decoration:none;
		}
		#pageHeader a:hover,
		#pageFooter a:hover{
		color:#878787;
		text-decoration:underline;
		}

img{
vertical-align:bottom;
border:none;
}
input{
vertical-align:middle;
}
input[type="radio"], input[type="checkbox"]{
margin:0 5px 0 1px;
}
/*clearfixハック*/
/* モダンブラウザ（Firefox Opera Safari）対策 */
.clearfix:after{
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}

/* Win版IE7とMac版IE5対策 */
.clearfix{
display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html .clearfix{
height:1px;
}

.clearfix{
display:block;
}
/* End hide from IE-mac */


/*==============================================
ヘッダ
==============================================*/
header#pageHeader{
width:1000px;
margin:0 auto 20px;/*30px*/
overflow:hidden; zoom:1;
}

#headerBlock{
overflow:hidden; zoom:1;
margin:11px 0 0;
}

#headerLogo{
width:127px;
height:57px;
float:left;
margin:0 0px 12px 16px;
}

#headerRight{
overflow:hidden; zoom:1;
padding:0 0 0 22px;
}


/*--------------------------
会員登録とSNSボタン
----------------------------*/

#headerShoulder{
text-align:right;
}

ul#headerEntry,ul#headerLink{
display:inline-block;
margin:3px 10px 8px 0;
vertical-align:top;
}

ul#headerSNS{
display:inline-block;
margin:0 10px 8px 0;
vertical-align:top;
}

ul#headerEntry li,ul#headerLink li{
display:inline-block;
font-size:11px;
height:18px;
padding-top:5px;
margin:0 0 0 14px;
}
	#hEmember{
	padding-left:20px;
	background:url(/images/n/itpro/2016/headerEntry_member.png) no-repeat;
	}
	#hElogin{
	padding-left:18px;
	background:url(/images/n/itpro/2016/headerEntry_login.png) no-repeat;
	}
	#hEmail{
	padding-left:24px;
	background:url(/images/n/itpro/2016/headerEntry_mail.png) no-repeat;
	}

ul#headerSNS li{
text-align:left;
display:inline-block;
text-indent:-9999px;
width:26px;
height:26px;
margin:0 0 0 5px;
}
	#hSfb{ background:url(/images/n/itpro/2016/headerSNS_fb.png) no-repeat;}
	#hStw{ background:url(/images/n/itpro/2016/headerSNS_tw.png) no-repeat;}
	#hSrss{ background:url(/images/n/itpro/2016/headerSNS_rss.png) no-repeat;}

ul#headerSNS li a{
display:block;
width:26px;
height:26px;
}
ul#headerSNS li:hover{
opacity:0.7;
filter: "alpha(opacity=70)";
}

/* ITP追加*/
ul#headerMedia{
display:inline-block;
margin:0 10px 8px 0;
vertical-align:top;
}

/* ITP追加*/
ul#headerMedia li{
text-align:left;
display:inline-block;
text-indent:-9999px;
width:74px;
height:26px;
margin:0 0 0 5px;
background:url(/images/n/itpro/2016/ITPPLogo.png) no-repeat;
}

/* ITP追加*/
ul#headerMedia li a{
display:block;
width:74px;
height:26px;
}

/* ITP追加*/
ul#headerMedia li:hover{
opacity:0.7;
filter: "alpha(opacity=70)";
}

/*--------------------------
お知らせ
----------------------------*/
#headerInfo{
border-top:1px solid #a5c1dd;
border-bottom:1px solid #a5c1dd;
overflow:hidden; zoom:1;
margin:0 0 6px;
}

#headerInfo h3{
float:left;
font-size:11px;
border-right:1px solid #a5c1dd;
margin: 4px 10px 0 0;
padding: 4px 10px 2px 5px;
}
#headerInfo ul{
overflow:hidden; zoom:1;
padding:4px 0 3px;
}
#headerInfo li{
display:inline-block;
font-size:12px;
margin:0 10px 0 0;
padding:2px 0 0 16px;
background:url(/images/n/itpro/2016/headerInfo.png) no-repeat;
height:14px;
}
#headerInfo li,
#headerInfo li a{
color:#1e64aa;
}


/*--------------------------
ローカルナビ
----------------------------*/
#localNavi{
overflow:hidden; zoom:1;
background:#1e64aa;
border-radius:4px;
}


#localNavi ul{
float:left;
margin:0 0 0 10px;
}
#headSearch{
float:right;
margin:5px 14px 5px 10px;
}


#localNavi li{
display:inline-block;
font-size:12px;
margin:0 6px;
}

#localNavi li a{
color:#fff;
display:block;
padding:9px 3px;
}

#localNavi li a:hover{
color:#fff;
text-decoration:none;
background:#5096d2;
}

#localNavi li a:visited{
color:#fff;
}


#headSearch input[type="text"]{
border:none;
font-size:12px;
height:20px;
padding:0 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius:3px 0 0 3px;
}

#headSearch input[type="text"]:placeholder-shown { color: 666; }
#headSearch input[type="text"]::-webkit-input-placeholder { color: 666; }
#headSearch input[type="text"]:-moz-input-placeholder { color: 666; }
#headSearch input[type="text"]::-moz-input-placeholder { color: 666; }
#headSearch input[type="text"]:-ms-input-placeholder { color: 666; }


#headSearch input[type="submit"]{
text-indent:-9999px;
width:26px;
height:20px;
border:none;
border-radius:0 3px 3px 0;
background:url(/images/n/itpro/2016/headerSearch.png) no-repeat 50% 50% #aaa;
}

#headSearch .detailLink{
font-size:12px;
margin:0 0 0 10px;
}

#headSearch .detailLink a{
color:#fff;
}


/*--------------------------
トピックナビ
----------------------------*/
#topicNavi{
padding:9px 0 8px;
border-bottom:1px solid #a5c1dd;
}

#topicNavi li{
display:inline-block;
font-size:12px;
margin:0 0 0 15px;
padding:0 0 0 16px;
background:url(/images/n/itpro/2016/topicNavi.png) no-repeat 0 50%;
}


/*--------------------------
特設サイトナビ
----------------------------*/
#siteNavi{
background:#e6eef5;
padding:6px 0;
border-radius:0 0 4px 4px;
margin-top:-1px;
}

#siteNavi li{
display:inline-block;
margin:0 0 0 11px;
}

#siteNavi li a{
font-size:12px;
display:block;
background:#fafcff;
border:1px solid #becde6;
padding:3px 7px 2px;
border-radius:3px;
}


/*--------------------------
スーパーバナー
----------------------------*/
#headerSuperBanner{
margin:20px auto 0;
text-align:center;			/*制作作業用。実際には有効ではないので最終的に不要*/
}


/*==============================================
フッタ
==============================================*/

#pageFooter{
width:1000px;
margin:0 auto;
overflow:hidden; zoom:1;
}


#footerBlock{
background:#f0f5f5;
margin:0 0 15px;
padding:20px 0;
border-radius:3px;
}


/*--------------------------
フッターリンク集
----------------------------*/
#footerNav{
width:950px;
margin:0 auto;
overflow:hidden; zoom:1;
}

#footerSitemap{
float:left;
width:344px;
}

#footerSitemap ul{
float:left;
width:50%;
}

#footerSpecialSite,
#footerRelativeSite,
#footerRelativeMagSite
{
float:left;
width:186px;
margin:14px 0 0 16px;
}

#footerSpecialSite h3,
#footerRelativeSite h3,
#footerRelativeMagSite h3
{
font-size:12px;
line-height:16px;
color:#464646;
margin:0 0 10px;
padding:0 0 5px;
border-bottom:1px solid #1e64aa;
}

#footerSitemap li,
#footerSpecialSite li,
#footerRelativeSite li,
#footerRelativeMagSite li
{
font-size:12px;
line-height:16px;
margin:2px 0;
}


/*--------------------------
ロゴとパソコン版、スマホ版
----------------------------*/
#footerLogo{
overflow:hidden; zoom:1;
margin: 0 0 15px;
}

#footerLogo h2{
float:left;
}

#footerLogo p {
padding: 11px 0 0 24px;
overflow: hidden; zoom: 1;
}

#footerLogo p span{
display:inline-block;
width:70px;
border-radius:3px;
border:1px solid #1e64aa;
font-size:12px;
text-align:center;
margin-left:2px;
padding:2px 0;
}

		#footerLogo p a,
		#footerLogo p a:visited{
		color:#333;
		display:block;
		}
		#footerLogo p span.active{
		color:#fff;
		background:#1e64aa;
		}
		#footerLogo p a:hover{
		color:#1e64aa;
		text-decoration:none;
		}



/*--------------------------
雑誌表紙
----------------------------*/
#footerRelativeMag{
width:950px;
margin:18px auto 0;
padding:18px 0 0;
border-top:1px solid #dce1e6;
}

#footerRelativeMag li{
display:inline-block;
vertical-align:top;
width:20%;
padding:6px 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#footerRelativeMag .icon img{
width:60px;
height:80px;
}

#footerRelativeMag .icon{
margin-right:7px;
}

#footerRelativeMag .text h4{
font-size:12px;
line-height:16px;
font-weight:normal;
margin:0 0 5px;
}

#footerRelativeMag .text p{
font-size:10px;
line-height:12px;
}


/*--------------------------
関連リンク
----------------------------*/
#footerSubLink{
overflow:hidden; zoom:1;
margin:0 0 15px;
}

#footerSubLink li{
display:inline-block;
font-size:12px;
line-height:18px;
}

#footerSubLink li::after,
#footerSubLink li:first-child::before{
content:'｜';
}


/*--------------------------
コピーライト表記
----------------------------*/
#footerCopyright{
overflow:hidden; zoom:1;
border-top:1px solid #ccc;
padding:10px 0 20px;
}

#footerCopyright strong{
display:block;
float:left;
margin:4px 0 0 5px;
}

#footerCopyright small{
overflow:hidden; zoom:1;
display:block;
font-size:10px;
line-height:13px;
padding:0 0 0 30px;
}


/*==============================================
コンテンツエリア
==============================================*/
#content{
width:1000px;
margin:0 auto 40px;
overflow:hidden; zoom:1;
}

#mainContent{
width:640px;
float:left;
}

#sideContent{
width:300px;
float:right;
}


/*==============================================
一覧系ページ　共通デザイン
==============================================*/
.listBlock{
margin:0 0 30px;
}
	#articleList .listBlock{
	margin:0 0 50px;
	}
	#sideContent .listBlock{
	margin:0 0 50px;
	}

.icon{
background:#fff;
border:1px solid #ccc;
padding:1px;
float:left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position:relative;
}

.icon img:hover{
opacity:0.7;
filter: "alpha(opacity=70)";
}

.adImg .icon img,
.adImg.icon img{
width:80px;
height:auto;
}

.text{
overflow:hidden; zoom:1;
padding-left:1px;	/*左アイコン、右テキストのリストを、アイコンの横位置ハラキリによってテキストを下に回すのに必要*/
text-align:left;
}

.date{
font-size:12px;
line-height:12px;
display:inline-block;
margin:0 0 0 5px;
font-weight:normal;
color:#666;
}

.pr_ico{
display:inline-block;
background:#999;
color:#fff;
margin:0 5px;
padding:2px 4px 0px;
border-radius:2px;
font-weight:normal;
font-size:12px;
line-height:12px;
}

.icon .pr_ico{
position:absolute;
top:5px;
right:0;
}

.roundText .text{
overflow:visible;
}

.ad-rectangle{
text-align:center;
}
.ad-rectangle > div > div{
margin:0 0 20px; /*40px*/
}
.ad-rectangle > div{
display:inline-block;
}
.ad-rectangle li + li{
margin-top:20px;
}
/*ITP追加*/
.ad-rectangle > ul{
margin:0 0 40px;
}

.more{
font-size:12px!important;
line-height:1em!important;
text-align:right;
margin:15px 0 0;
padding:0 20px 0 0;
background:url(/images/n/itpro/2016/more.png) right 1px no-repeat;
}

#page-top{
cursor: pointer;
width:45px;
height:45px;
border-radius:23px;
background:url(/images/n/itpro/2016/page-top.png) 50% 50% no-repeat #0096be;
position: fixed;
bottom: 30px;
right: 30px;
}

/*--------------------------
タイトル肩の特集や連載名
----------------------------*/
.listShoulder{
font-weight:normal;
display:block;
color:#0096be;
font-size:12px;
line-height:15px;
}
.listShoulder a,
.listShoulder a:visited{
color:#0096be;
}
.listShoulder a:hover{
color:#0096be;
text-decoration:underline;
}

/*--------------------------
タイトルA
----------------------------*/
.title_A{
position:relative;
font-size:18px;
line-height:23px;
border-top:1px solid #999;
margin:3px 0 10px;/*20px*/
padding:15px 0 0 14px;
}
.title_A::before{
position:absolute;
top:-3px;
left:0;
content:'';
width:200px;
height:5px;
background:#1e64aa;
}
.title_A .pr_ico{
position:absolute;
right:0;
top:15px;
}
.title_A a:visited{
color:#333;
}

/*--------------------------
タイトルB
----------------------------*/
.title_B{
position:relative;
font-size:15px;
line-height:19px;
color:#1e64aa;
border-top:3px solid #1e64aa;
margin:0 0 10px;
padding:10px 0 0 24px;
background:url(/images/n/itpro/2016/title_B.png) 4px 12px no-repeat;
}

.title_B .pr_ico{
position:absolute;
right:0;
top:10px;
}

/*--------------------------
タイトルC
----------------------------*/
.title_C{
position:relative;
margin:0 0 8px;
}
.title_C span{
font-size:14px;
color:#1e64aa;
display:inline-block;
background:#fff;
padding-right:10px;	
position:relative;
z-index:2;
}
.title_C::before{
content:'';
border-top:1px dotted #6192c3;	
position: absolute;
top: 50%;
left: 0;
width: 100%;
z-index: 1;
}

ul + .title_C{
margin-top:14px;
}

/*--------------------------
パネルタイプA
----------------------------*/
.panel_A{
overflow:hidden; zoom:1;
}
.panel_A li{
display:inline-block;
vertical-align:top;
width:33.3%;
margin:0 0 10px;
padding:0 8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.panel_A .icon{
float:none;
width:196px;
margin:0 auto 7px;
}
.panel_A .icon img{
width:192px;
height:auto;
}
.panel_A .text h3{
font-size:14px;
line-height:21px;
font-weight:normal;
}

/*--------------------------
パネルタイプB
----------------------------*/
.panel_B{
overflow:hidden; zoom:1;
}
.panel_B li{
display:inline-block;
vertical-align:top;
width:25%;
margin:0 0 10px;
padding:0 8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.panel_B .icon{
float:none;
width:140px;
margin:0 auto 7px;
}
.panel_B .icon img{
width:136px;
height:auto;
}
.panel_B .text h3{
font-size:14px;
line-height:21px;
font-weight:normal;
}

/*--------------------------
パネルタイプC
----------------------------*/
.panel_C{
overflow:hidden; zoom:1;
}
.panel_C li{
display:inline-block;
vertical-align:top;
width:20%;
margin:0 0 10px;
padding:0 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.panel_C .icon{
float:none;
width:116px;
margin:0 auto 7px;
}
.panel_C .icon img{
width:112px;
height:auto;
}
.panel_C .text h3{
font-size:12px;
line-height:18px;
font-weight:normal;
}


/*--------------------------
トップリスト
----------------------------*/
.topList{
margin:0 0 30px;
overflow:hidden; zoom:1;
}

.topList .list_A h3{
font-size:30px;
line-height:40px;
}
.topList .list_A .text p{
font-size:16px;
line-height:26px;
}
.topList .list_A .icon img{
width:192px;
height:auto;
}

.topList .list_B{
float:left;
width:319px;
border-right:1px solid #e5e5e5;
margin-bottom:20px;
}

.topList .list_B .text{
margin-bottom:0;
}
.topList .list_C .text{
margin-bottom:10px;
}

.topList .list_C{
float:left;
width:319px;
padding-left:15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-left:1px solid #e5e5e5;
margin-left:-1px;
margin-bottom:20px;
}
		.topList .list_B li:nth-child(n),
		.topList .list_C li:nth-child(n){
		margin-right:0;
		margin-left:0;
		}


/*--------------------------
リストタイプA
----------------------------*/
.list_A li{
overflow:hidden; zoom:1;
border-bottom:1px solid #e5e5e5;
font-size:13px!important;
line-height:1em!important;
margin:0 0 20px!important;
text-indent:0!important;
}
.list_A li::before{
content:none!important;
}
.list_A .icon{
margin:5px 20px 20px 0;
}
.list_A .icon img{
width:120px;
height:auto;
}
.list_A .text{
margin:5px 0 20px;
}
.list_A h3{
font-size:24px;
line-height:30px;
margin-bottom:10px;
}
.list_A strong + h3{
margin-top:5px;
}
.list_A .text p{
font-size:14px;
line-height:24px;
color:#4B4B4B;
}
.list_A li h4 {
    margin: 8px 0 3px;
}

/*--------------------------
リストタイプB
----------------------------*/
.list_B li{
overflow:hidden; zoom:1;
display:inline-block;
width:305px;
vertical-align:top;
}
		.list_B li:nth-child(2n+1){
		margin-right:15px;
		}
		.list_B li:nth-child(2n){
		margin-left:15px;
		}
.list_B .icon{
float:right;
margin:5px 0 10px 15px;
}
.list_B .icon img{
width:120px;
height:auto;
}
.list_B .text{
overflow:visible;
margin:5px 0 20px;
}
.list_B h3{
font-size:24px;
line-height:30px;
margin-bottom:10px;
}
.list_B strong + h3{
margin-top:5px;
}
.list_B .text p{
font-size:14px;
line-height:24px;
color:#4B4B4B;
}

/*--------------------------
リストタイプC
----------------------------*/
.list_C li{
overflow:hidden; zoom:1;
display:inline-block;
width:305px;
vertical-align:top;
}
		.list_C li:nth-child(2n+1){
		margin-right:15px;
		}
		.list_C li:nth-child(2n){
		margin-left:15px;
		}
.list_C .icon{
float:right;
margin:5px 0 10px 15px;
}
.list_C .icon img{
width:90px;
height:auto;
}
.list_C .text{
margin:5px 0 15px;
}
.list_C .text h3{
font-size:18px;
line-height:24px;
}

/*--------------------------
リストタイプD
----------------------------*/
.list_D li{
overflow:hidden; zoom:1;
width:50%;
display:inline-block;
vertical-align:top;
}
.list_D .text{
margin:1px 0;
}
.list_D .text h4{
font-size:14px;
line-height:21px;
font-weight:normal;
padding:0 0 0 14px;
background:url(/images/n/itpro/2016/list_D.png) 4px 7px no-repeat;
}


/*--------------------------
リストタイプE
----------------------------*/
.list_E li{
overflow:hidden; zoom:1;
border-top:1px solid #e5e5e5;
width:305px;
display:inline-block;
vertical-align:top;
}
		.list_E li:first-child,
		.list_E li:nth-child(2){
		border-top:none;
		}
		.list_E li:nth-child(2n+1){
		margin-right:15px;
		}
		.list_E li:nth-child(2n){
		margin-left:15px;
		}
.list_E .icon{
margin:10px 18px 10px 5px;
}
.list_E .text{
margin:10px 0;
}
.list_E .text h3{
font-size:14px;
line-height:21px;
}
.list_E .text p{
font-size:12px;
line-height:18px;
color:#4B4B4B;
margin-top:3px;
}
.list_E .text p + p{
margin-top:10px;
}



/*--------------------------
リストタイプF
----------------------------*/
.list_F li{
overflow:hidden; zoom:1;
border-bottom:1px solid #e5e5e5;
}
.list_F .icon{
margin:10px 18px 10px 5px;
}
.list_F .text{
margin:10px 0;
}
.list_F .text h3{
font-size:14px;
line-height:21px;
}
.list_F .text p{
font-size:12px;
line-height:18px;
color:#4B4B4B;
margin-top:3px;
}
.list_F .text p + p{
margin-top:10px;
}

/*--------------------------
リストタイプG
----------------------------*/
.list_G li{
overflow:hidden; zoom:1;
}
.list_G .text h3{
font-size:14px;
line-height:21px;
margin:2px 0 1px;
font-weight:normal;
}

.topList .list_C + .list_G{
clear:both;
display:block;
margin-top:20px;
}

.panel_A + .list_G,
.panel_B + .list_G,
.panel_C + .list_G,
.list_B + .list_G,
.list_C + .list_G,
.list_D + .list_G,
.list_E + .list_G{
margin-bottom:20px;
padding:8px 0;
border-top:1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5;
}

.list_D + .list_G{
margin-top:10px;
margin-bottom:10px;
padding:8px 0;
border-top:1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5;
}

.list_A + .list_G{
margin-top:-20px;
margin-bottom:20px;
padding:8px 0;
border-bottom:1px solid #e5e5e5;
}

.list_F + .list_G,
.list_rank + .list_G{
margin-bottom:20px;
padding:8px 0;
border-bottom:1px solid #e5e5e5;
}

.more + .list_G{
margin-top:20px;
padding:8px 0;
border-top:1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5;
}

#mainContent > .list_G {
padding:8px 0;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
margin-bottom:20px;
}

/*--------------------------
ランキングリスト
----------------------------*/
.list_rank li{
overflow:hidden; zoom:1;
border-bottom:1px solid #e5e5e5;
}

.list_rank .rank_ico_top3,
.list_rank .rank_ico{
float:left;
font-size:12px;
color:#fff;
padding-top:4px;
width:20px;
height:20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
border-radius:10px;
margin:10px 6px 10px 3px;
}
	.list_rank .rank_ico_top3{
	background:#0096be;
	}
	.list_rank .rank_ico{
	background:#66c0d8;
	}

.list_rank .text{
margin:10px 0;
}
.list_rank .text h3{
font-size:14px;
line-height:21px;
}
.list_rank .text p{
font-size:12px;
line-height:18px;
color:#4B4B4B;
}
.list_rank .text p + p{
margin-top:10px;
}


.rankContent{
margin:0 0 50px;
}
.rankContent .list_rank .text{
margin:15px 0;
}
.rankContent .list_rank .text strong + h3{
margin-top:5px;
}
.rankContent .list_rank .text h3{
font-size:18px;
line-height:24px;
}

.rankContent .list_rank .rank_ico_top3,
.rankContent .list_rank .rank_ico{
font-size:24px;
padding-top:10px;
width:40px;
height:40px;
border-radius:20px;
margin:15px 18px 15px 3px;
}

/*--------------------------
リストバナー
----------------------------*/
.list_banner li{
margin:0 0 15px;
text-align:center;
}
.list_banner li:last-child{
margin-bottom:0;
}


/*--------------------------
パネルタイプBとリストタイプCを使った広告での左右間隔調整
----------------------------*/
.panel_B.PR_horizontal{
text-align: center;
}
.panel_B.PR_horizontal li{
margin-left: -2px;
margin-right: -2px;
}
.list_C.PR_horizontal li:nth-child(2n+1){
margin-right:12px;
margin-bottom:15px; /*ITP追加*/
}
.list_C.PR_horizontal li:nth-child(2n){
margin-left:12px;
margin-bottom:15px; /*ITP追加*/
}

/*--------------------------
CXENSE内の特定のパネルで画像の高さを固定
ITP追加
----------------------------*/

#cxenseActBiz > .panel_B .icon {
height: 106px;
overflow: hidden;
}
#cxenseEditor .list_F .icon, #cxenseActBiz .list_F .icon, #cxenseTechon .list_F .icon {
	margin: 4px 18px 4px 5px;
}

#cxenseEditor .list_F img, #cxenseActBiz .list_F img, #cxenseTechon .list_F img  {
	width: 80px;
}

/*--------------------------
特定の広告の対処　ITP追加
----------------------------*/

div[id*="theme_textad"] {
	display: inline;
}

/*--------------------------
Google広告の高さ調整（このセレクタは削除してもおそらく問題なし；削除）
.list_F li iframe[id*="pickup"]{
height:94px!important;
}
----------------------------*/

/*ITP追加*/
.list_C li iframe[id*="infeed2x2"]{
height:100px!important;
}


/*--------------------------
list_Fなどの記事間の区切り線を消す
----------------------------*/
.list_F.noborder li {
border: none;
}


/*--------------------------
タブ切り替え
----------------------------*/
.tab{
overflow:hidden; zoom:1;
position:relative;
margin:0 0 20px;
}
		#sideContent .tab{
		margin:15px 0 5px;
		}

.tab li{
font-size:12px;
float:left;
cursor: pointer;
padding:7px 7px 6px;
border:1px solid transparent;
}
		#sideContent .tab li{
				padding:7px 15px 6px;
		}

.tab li:hover{
color:#878787;
}
.tab li.active{
border-top:1px solid #b4b4b4;
border-left:1px solid #b4b4b4;
border-right:1px solid #b4b4b4;
border-bottom:1px solid #fff;
border-radius:3px 3px 0 0;
color:#1e64aa;
font-weight:bold;
}
.tab::after{
content:'';
display:block;
width:100%;
height:1px;
background:#b4b4b4;
position:absolute;
left:0; bottom:0;
z-index:-1;
}

.tabContent {display:none;}
.show {display:block;}




/*--------------------------
カテゴリ見出し
----------------------------*/
#categoryHeader {
border-top:1px solid #1e64aa;
margin:0 0 20px;
padding:17px 0 13px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf0f0+0,ffffff+50 */
background: #ebf0f0; /* Old browsers */
background: -moz-linear-gradient(top,  #ebf0f0 0%, #ffffff 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ebf0f0 0%,#ffffff 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ebf0f0 0%,#ffffff 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf0f0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
position:relative;
}

#categoryHeader h1{
font-size:24px;
color:#1e64aa;
border-left:7px solid #8eb1d4;
margin:0 0 0 10px;
padding:0 0 0 12px;
}
#categoryHeader h1::before{
content:"";
display:block;
width:100%;
height:2px;
background:#fff;
position:absolute;
top:0; left:0;
}

/*--------------------------
パンくず
----------------------------*/
.breadcrumb{
margin-bottom:10px;
}
.breadcrumb span{
font-size:12px;
display:inline-block;
vertical-align: bottom;
}
.breadcrumb span a{
display:inline-block;
height:13px;
}
.breadcrumb span + span::before{
content:' > ';
}
.breadcrumb span.home_ico{
text-indent:-9999px;
width:16px;
height:13px;
background:url(/images/n/itpro/2016/home_ico.png) no-repeat;
}
.breadcrumb span.home_ico a{
text-indent:-9999px;
display:block;
}

/*--------------------------
検索設定エリア
----------------------------*/
.searchBlock{
margin:0 0 50px;
padding:25px 20px 15px;
background:#f7faff;
border:1px solid #b9c3d7;
}
.searchBlock fieldset{
border:none;
}



.searchBasic input[type="text"]{
border:1px solid #bebebe;
border-radius:3px;
width:465px;
height:30px;
padding:0 10px 0 28px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size:14px;
margin-right:3px;
background:url(/images/n/itpro/2016/search.png) 5px 50% no-repeat #fff;
}
.searchBasic input[type="submit"]{
font-size:18px;
color:#fff;
background:#1e64aa;
border:none;
border-radius:3px;
width:88px;
height:30px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.displayOption,
.hideOption{
font-size:12px;
display:inline-block;
margin:10px 0 0;
padding:0 0 0 15px;
cursor: pointer;
}
	.displayOption{
	background:url(/images/n/itpro/2016/closed.png) no-repeat;
	}
	.hideOption{
	background:url(/images/n/itpro/2016/opened.png) no-repeat;
	}

/*開いている状態*/
.searchBlock.opened .displayOption{
display:none;
}
.searchBlock.opened .hideOption{
display:inline-block;
}
.searchBlock.opened .optionBlock{
display:block;
}

/*閉じている状態*/
.searchBlock .displayOption{
display:inline-block;
}
.searchBlock .hideOption,
.searchBlock .optionBlock{
display:none;
}

.optionBlock{
overflow:hidden; zoom:1;
margin:0 0 10px;
}
.option_L{
float:left;
width:155px;
}
.option_R{
float:right;
width:415px;
}


.optionBlock > div > fieldset{
margin:15px 0 0;
}

.optionBlock > div > fieldset > legend{
color:#1e64aa;
border-bottom:1px solid #1e64aa;
display:block;
width:100%;
font-size:14px;
font-weight:bold;
margin:0 0 10px;
padding:2px 0 4px;
}

.optionBlock label{
font-size:12px;
line-height:1.3em;
}

.selectGenre li{
margin:0 0 5px;
padding:1px;
}

.seachTargeting label{
margin-right:15px;
}

.dateNarrow p{
font-size:12px;
line-height:1.3em;
margin:-5px 0 10px;
}
.dateSetting{
font-size:12px;
line-height:1.3em;
}
.dateSetting input{
border:1px solid #bebebe;
border-radius:3px;
width:35px;
height:24px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
font-size:14px;
margin-right:3px;
}
.dateSetting input.yearSetting{
width:55px;
}

.optionSetting fieldset{
overflow:hidden; zoom:1;
}
.optionSetting fieldset + fieldset{
margin-top:5px;
}
.optionSetting fieldset legend{
float:left;
width:130px;
font-size:12px;
line-height:1.3em;
}
.optionSetting fieldset label{
margin-right:10px;
}

/*--------------------------
検索結果リスト
----------------------------*/
.searchResult{
position:absolute;
top:20px;
right:5px;
display:inline-block;
font-weight:normal;
font-size:14px;
line-height:14px;

}
.list_search li{
overflow:hidden; zoom:1;
border-bottom:1px solid #e5e5e5;
margin:0 0 15px;
}
.list_search .text{
margin:5px 0 15px;
}
.list_search h3{
font-size:18px;
line-height:24px;
margin-bottom:10px;
}
.list_search strong + h3{
margin-top:5px;
}
.list_search .text p{
font-size:12px;
line-height:18px;
color:#4B4B4B;
}


/*--------------------------
ページャー
----------------------------*/
.pager{
overflow:hidden; zoom:1;
text-align:center;
margin:15px 0;
}
.pager li{
display:inline-block;
font-size:20px;
margin:0 2px;
padding:6px 8px;
}
.pager li.now{
background:#1e64aa;
color:#fff;
}
.pager li.now a,
.pager li.now a:hover,
.pager li.now a:visited{
color:#fff;
text-decoration:none;
}
.pager li.prev,
.pager li.next{
font-size:16px;
padding-top:6px;
padding-bottom:6px;
}
.pager li.prev{
padding-left:20px;
background:url(/images/n/itpro/2016/more_left.png) left 9px no-repeat;
}
.pager li.next{
padding-right:20px;
background:url(/images/n/itpro/2016/more.png) right 9px no-repeat;
}




/*==============================================
リーフ記事ページ
==============================================*/

/*--------------------------
記事基本
----------------------------*/
#article{
margin:0 auto 25px;/*50px*/
}
#articleBody{
overflow:hidden; zoom:1;
margin:40px auto 50px;
word-wrap:break-word;
overflow-wrap:break-word;
}
#articleBody a {
color: #0096be;
text-decoration: underline;
}
#articleBody .listBlock a {
color: #333;
text-decoration: none;
}
#articleBody .listBlock a:hover{
color:#878787;
text-decoration:underline;
}
#articleBody .listBlock a:visited{
color:#878787;
text-decoration:none;
}

/*--------------------------
記事ヘッダ
----------------------------*/
.articleHeaderTop{
border-top:5px solid #1e64aa;
padding:15px 5px 12px;/*15px 5px 24px*/
}
.articleHeaderTop h1{
font-size:30px;
line-height:40px;
}
.articleHeaderTop strong + h1{
margin-top:7px;
}
.articleHeaderTop h2{
font-size:16px;
line-height:24px;
font-weight:normal;
}
.articleHeaderTop h1 + h2{
margin-top:7px;
}


.articleHeaderMiddle, .articleHeaderBottom{
overflow:hidden; zoom:1;
margin:5px auto;
}
.articleHeaderMiddle{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
padding:9px 0;
width:100%;
min-height:30px;
}


.articleHeaderMiddle span{
display:table-cell;
vertical-align:middle;
width:100%;
padding:0 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
	.articleHeaderMiddle span.author{ width:60%; }
		.articleHeaderMiddle span.author a, 
		.articleHeaderMiddle span.author a:visited{ color:#0096be; }
	.articleHeaderMiddle span.date{ width:15%; color:#333; text-align:center; border-left:1px solid #ccc; }
	.articleHeaderMiddle span.media{ width:25%; text-align:center; border-left:1px solid #ccc; padding:0 5px; }
		.articleHeaderMiddle span.media img{ max-height:30px; max-width:140px; }



.articleHeaderBottom span{
display:block;
}
.articleHeaderBottom .source{
float:left;
font-size:12px;
line-height:1.5em;
}
.articleHeaderBottom .contentList{
float:right;
font-size:12px;
text-align:right;
margin:6px 0 0;
padding:0 20px 0 0;
background:url(/images/n/itpro/2016/more.png) right 1px no-repeat;
}




/*--------------------------
SNSボタンなど
----------------------------*/
.tools{
overflow:hidden; zoom:1;
margin:22px 0;
}
.tools li{
display:inline-block;
vertical-align:middle;
margin:0 3px;
}

.tools .sns{
overflow:hidden; zoom:1;
float:left;
}

.tools .mail_print{
overflow:hidden; zoom:1;
float:right;
}
.tools .mail_print img{
margin:0 2px;
}



/*--------------------------
次ページ誘導
----------------------------*/
.nextPage{
overflow:hidden; zoom:1;
background:#e4ecf5;
padding:16px 20px;
border-radius:3px;
}
.nextPage span{
display:block;
}
.nextPage_L{
float:left;
margin:0 15px 0 0;
padding:6px 30px 4px 10px;
font-size:14px;
color:#fff;
border-radius:6px;
background:url(/images/n/itpro/2016/more_white.png) right 6px no-repeat #1e64aa;
}

.nextPage_R{
font-size:16px;
line-height:1.3em;
font-weight:bold;
margin:3px 0 0;
white-space: nowrap;
overflow:hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}



/*--------------------------
挿入広告A
----------------------------*/
.insertAd_A{
background:#fff5d7;
overflow:hidden; zoom:1;
padding:15px 25px 15px 15px;
border-radius:6px;
margin:0 0 25px;
}
.insertAd_A .icon{
margin:0 18px 0 0;
}
.insertAd_A .text{
padding:8px 8px 0 8px;
}
.insertAd_A .text h3{
font-size:18px;
line-height:24px;
margin:0 0 10px;
padding:0 10px 5px;
border-bottom:1px solid #0096be;
position:relative;
}

.insertAd_A .text h3::before,
.insertAd_A .text h3::after{
content:'';
display:block;
background:#0096be;
width:6px; height:6px;
border-radius:3px;
position:absolute;
bottom:-3px;
}
	.insertAd_A .text h3::before{ left:-8px; }
	.insertAd_A .text h3::after{ right:-8px; }

.insertAd_A .text p{
font-size:13px;
line-height:20px;
color:#4B4B4B;
margin-top:3px;
}
.insertAd_A .text p + p{
margin-top:10px;
}

/*--------------------------
挿入広告B
----------------------------*/
.insertAd_B{
background:#fff5d7;
overflow:hidden; zoom:1;
padding:7px 10px;
border-radius:6px;
margin:0 0 25px;
}

.insertAd_B h3{
font-size:14px;
font-weight:normal;
}

.flag{
display:inline-block;
background:#DC9646;
color:#fff;
margin:0 5px 0 0;
padding:2px 4px 0px;
border-radius:2px;
font-weight:normal;
font-size:12px;
line-height:12px;
}

/*--------------------------
新規登録・ログイン
----------------------------*/
.induction{
position:relative;
margin:50px 0;
}
.induction::before{
position:absolute;
content:'';
display:block;
width:100%;
height:200px;
top:-250px;
left:0;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

.induction h3{
font-size:20px;
line-height:1.3em;
text-align:center;
margin:0 0 23px;
}
.induction ul{
overflow:hidden; zoom:1;
text-align:center;
}
.induction li{
display:inline-block;
text-align:center;
margin:0 15px!important;
padding-top:45px;
position:relative;
font-size:13px!important;
line-height:1em!important;
text-indent:0!important;
}
.induction li::before{
content:none!important;
}
.induction li a{
display:block;
width:225px;
height:108px;
padding-top:15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius:6px;
text-decoration:none!important;
}
		.induction li.login a{
		background:#f5faff;
		border:1px solid #b4c5e5;
		}
		.induction li.entry a{
		background:#fffaf5;
		border:1px solid #d2beb4;
		}
.induction li a:hover{
text-decoration:none;
color:#333;
}
		.induction li.login a:hover{
		background:#ebf5ff;
		}
		.induction li.entry a:hover{
		background:#fff5eb;
		}
.induction li a:visited{
color:#333;
}

.induction li a > span{
display:block;
font-size:14px;
line-height:1em;
margin:0 0 8px;
padding:0 0 25px;
}
		.induction li.login a > span{
		color: #333;
		background:url(/images/n/itpro/2016/induction_login.png) 50% bottom no-repeat;
		}
		.induction li.entry a > span{
		color: #333;
		background:url(/images/n/itpro/2016/induction_entry.png) 50% bottom no-repeat;
		}
.induction li a > strong{
display:block;
font-size:28px;
line-height:1em;
font-weight:normal;
}
		.induction li.login a > strong{
		color:#333351;
		}
		.induction li.entry a > strong{
		color:#882d28;
		}
.induction li a > strong > span{
font-size:14px;
line-height:1em;
}

.induction li .entry_ballon{
background:#b42319;
color:#fff;
font-size:12px;
line-height:1.5em;
padding:8px 14px;
border-radius:12px;
position:absolute;
top:0;
right:-75px;
}

.induction li .entry_ballon > strong{
font-weight:bold;
font-size:14px;
}

.induction li .entry_ballon::after{
content:'';
border-top:10px solid #b42319;
border-right:10px solid transparent;
position:absolute;
bottom:-9px;
left:50%;
}



/* ================================================
■標準CSS（ITpro用）
================================================  */

/* ------------------------------ *
	リード
 * ------------------------------ */
#articleBody .bplead {
font-size: 16px;
line-height: 2em;
font-weight: bold;
margin-bottom: 30px;
}

/* ------------------------------ *
	中見出し
 * ------------------------------ */
#articleBody > h3 {
margin: 50px 0 30px;
padding: 0 0 8px;
font-size: 20px;
line-height: 28px;
border-bottom: 3px solid #8eb1d4;
clear: both;
}

/* ------------------------------ *
	小見出し
 * ------------------------------ */
#articleBody > h4 {
margin: 20px 0;
font-size: 16px;
line-height: 2em;
color: #1e64aa;
clear: both;
}

/* ------------------------------ *
	地の文
 * ------------------------------ */
#articleBody > p {
font-size: 16px;
line-height: 2em;
margin:0 0 20px;
}

/* ------------------------------ *
	箇条書き
 * ------------------------------ */
#articleBody ul {
    margin-top: 20px;
    margin-bottom: 20px;
}
#articleBody li {
    font-size: 16px;
    line-height: 1.5em;
    margin: 0 0 10px 30px;
    text-indent: -16px;
}
#articleBody ul li:before {
    content: '';
    width: 6px;
    height: 6px;
    background: #999;
    display: inline-block;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 10px;
}
#articleBody ol>li{
list-style-type:decimal;
text-indent: 0;
}

/* ------------------------------ *
	質問
 * ------------------------------ */
#articleBody .bpquestion{
font-size: 16px;
line-height: 2em;
font-weight: bold;
margin:0 0 10px;
}
	 #articleBody .bpquestion::before{
	content:'—';
	}
/* ------------------------------ *
	質問への回答
 * ------------------------------ */
#articleBody .bpanswer {
font-size: 16px;
line-height: 2em;
}

/* ------------------------------ *
	画像
 * ------------------------------ */
#articleBody .bpimage_image {
margin-bottom:10px;
}
#articleBody .bpimage_title + .bpimage_image {
margin-top:5px;
}

/* ------------------------------ *
	画像のキャプション
 * ------------------------------ */
#articleBody .bpimage_title {
font-size: 13px;
line-height: 1.5em;
font-weight: bold;
}
#articleBody .bpimage_caption {
font-size: 12px;
line-height: 1.5em;
}
#articleBody .bpimage_click {
font-size: 12px;
line-height: 1.5em;
color:#0096be;
}

/* ------------------------------ *
	図（回り込み：左）右配置
 * ------------------------------ */
#articleBody .bpimage_right {
float: right;
margin: 10px 0 15px 30px;
}

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

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


/* ------------------------------ *
	図（二つ並び）
 * ------------------------------ */
#articleBody .bpimage_double {
width: 500px;
margin: 10px auto 30px;
overflow: hidden;
}
#articleBody .bpimage_double .bpimage_left{
margin:0;
}
#articleBody .bpimage_double .bpimage_right {
margin: 0;
}


/* ------------------------------ *
	図（三つ並び）
 * ------------------------------ */
#articleBody .bpimage_triple {
width: 500px;
margin: 10px auto 30px;
overflow: hidden;
}
#articleBody .bpimage_triple .bpimage_wrap {
margin: 0;
float: left;
overflow: hidden;
}
#articleBody .bpimage_triple .bpimage_left {
margin: 0;
}
#articleBody .bpimage_triple .bpimage_center{ 
float:right; 
margin:0; 
}
#articleBody .bpimage_triple .bpimage_right{ 
margin:0; 
}



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



/* ------------------------------ *
	図（エトキ右配置）
 * ------------------------------ */
#articleBody .bpimage_caption_right {
margin: 0 auto 20px;
overflow:hidden; zoom:1;
}
	#articleBody .bpimage_caption_right .bpimage_left {
	margin-bottom:0;
	}
#articleBody .bpimage_caption_right .bpimage_title{ 
padding:10px 0 0; 
clear:none; 
}
#articleBody .bpimage_caption_right .bpimage_caption{ 
clear:none; 
}


/* ------------------------------ *
	プロフィール
 * ------------------------------ */
#articleBody .bpprofile, 
#articleBody .bpprofile_photo {
width: auto;
clear: both;
border-top: 3px solid #999;
margin: 50px 0 50px;
padding: 18px 5px 0;
overflow: hidden; zoom: 1;
}
#articleBody .bpprofile_profile{
margin:0 0 15px;
}

#articleBody .bpprofile_position {
font-size: 14px;
line-height: 1.3em;
display: inline-block;
margin: 5px 0 0;
}

#articleBody .bpprofile_name {
font-size: 16px;
line-height: 1.3em;
font-weight: bold;
display: inline-block;
margin: 0;
}
#articleBody .bpprofile_text {
font-size: 12px;
line-height: 21px;
margin:15px 0 0;
}

/* ------------------------------ *
	プロフィール（顔写真付）
 * ------------------------------ */
#articleBody .bpprofile_photo .bpprofile_text img {
float: right;
margin: 0 0 0 30px;
padding: 0;
}

/* ------------------------------ *
	インタビュープロフィール用
 * ------------------------------ */
#articleBody .bpinterview {
width: auto;
margin: 30px 0;
padding:15px;
border: 1px solid #ccc;
}
#articleBody .bpinterview_profile {
margin: 0 0 15px;
}
#articleBody .bpinterview_position {
font-size: 14px;
line-height: 1.3em;
display: inline-block;
margin: 0 0 5px;
}
#articleBody .bpinterview_name {
font-size: 16px;
line-height: 1.3em;
font-weight: bold;
display: inline-block;
}
#articleBody .bpinterview_text{ 
font-size: 12px;
line-height: 21px;
margin: 15px 0 0;
}

/* ------------------------------ *
	囲み共通
 * ------------------------------ */
#articleBody .bpbox,
#articleBody .bpbox2,
#articleBody .bpbox3,
#articleBody .bpbox4,
#articleBody .bpframe {
width: auto;
clear: both;
margin: 30px 0;
padding: 20px 30px;
}
#articleBody .bpbox_title {
font-size: 16px;
line-height: 1.3em;
font-weight: bold;
margin: 0 0 15px;
padding:0 0 5px;
}
#articleBody .bpbox_text h3 {
    font-size: 16px;
    line-height: 1.3em;
    margin-bottom: 10px;
}
#articleBody .bpbox_text h4 {
    font-size: 14px;
    line-height: 1.7em;
    margin-bottom: 10px;
}
#articleBody .bpbox_text p + h3 ,
#articleBody .bpbox_text p + h4 {
    margin-top: 20px;
}
#articleBody .bpbox_text,
#articleBody .bpbox_text p {
font-size: 14px;
line-height: 1.7em;
margin: 0;
overflow:hidden;
}
#articleBody .bpbox_text .bpimage_left{margin: 0 15px 0 0;}

#articleBody .bpbox_text p + p {
margin-top: 15px;
}
#articleBody .bpbox_text li {
    font-size: 14px;
    line-height: 1.5em;
    margin: 0 0 8px 30px;
    text-indent: -14px;
}

/* ------------------------------ *
	囲み1
 * ------------------------------ */
#articleBody .bpbox {
border: 1px solid #b9c3d7;
background: #f7faff;
}
#articleBody .bpbox .bpbox_title {
color:#1e64aa;
border-bottom:1px solid #1e64aa;
}
#articleBody .bpbox .bpbox_text h3 {
color:#1e64aa;
}

/* ------------------------------ *
	囲み2
 * ------------------------------ */
#articleBody .bpbox2 {
border: 1px solid #b4c8c8;
background: #f5fafa;
}
#articleBody .bpbox2 .bpbox_title {
color:#3c6478;
border-bottom:1px solid #3c6478;
}
#articleBody .bpbox2 .bpbox_text h3 {
color:#3c6478;
}

/* ------------------------------ *
	囲み3
 * ------------------------------ */
#articleBody .bpbox3 {
border: 1px solid #ccccaa;
background: #fffae6;
}
#articleBody .bpbox3 .bpbox_title {
color:#be6400;
border-bottom:1px solid #be6400;
}
#articleBody .bpbox3 .bpbox_text h3 {
color:#be6400;
}

/* ------------------------------ *
	囲み4
 * ------------------------------ */
#articleBody .bpbox4 {
border: 1px solid #ccb4cc;
background: #fff7fa;
}
#articleBody .bpbox4 .bpbox_title {
color:#503c8c;
border-bottom:1px solid #503c8c;
}
#articleBody .bpbox4 .bpbox_text h3 {
color:#503c8c;
}

/* ------------------------------ *
	シンプル囲み
 * ------------------------------ */
 #articleBody .bpframe {
border: 1px solid #ccc;
background: #fafafa;
}
#articleBody .bpframe .bpbox_title {
color:#333;
border-bottom:1px solid #333;
}
#articleBody .bpframe .bpbox_text h3 {
color:#333;
}

/* ------------------------------ *
	コードリスト共通
 * ------------------------------ */
#articleBody .bpcode,
#articleBody .bpcode2 {
width: auto;
clear: both;
margin: 30px 0;
padding: 15px;
overflow: auto; /*ITP追加*/
}
#articleBody .bpcode pre,
#articleBody .bpcode2 pre {
line-height: 1.5em;
font-size: 14px;
}
/* ------------------------------ *
	コードリスト（灰色）
 * ------------------------------ */
#articleBody .bpcode {
background: #fafafa;
border: 1px solid #ccc;
}
/* ------------------------------ *
	コードリスト（緑色）
 * ------------------------------ */
#articleBody .bpcode2 {
background: #f5fafa;
border: 1px solid #b4c8c8;
}

/* ------------------------------ *
	訂正
 * ------------------------------ */
#articleBody div.bpteisei_box {
width: auto;
clear: both;
margin: 30px 0;
padding: 15px 20px;
background: #ebf0f0;
border-radius: 3px;
}
#articleBody div.bpteisei_box .bpteisei{
font-size:12px;
line-height:1.5em;
}
#articleBody div.bpteisei_box .bpteisei b{
color:#1e64aa;
margin:0 0 5px;
}

/* ------------------------------ *
	用語解説
 * ------------------------------ */
#articleBody div.bpword {
font-size: 16px;
line-height: 2em;
padding: 0;
margin: 30px 0;
}

/* ------------------------------ *
	アンケートなどdl
 * ------------------------------ */
/*
この以下2つのinputとlabelのセレクタは、よりレイアウトをキレイにするもの。
不可欠ではない。
他とコンフリクトするようであれば、セレクタで狭めるなど対処する。
*/
#articleBody input[type="radio"], input[type="checkbox"] {
    float: left;
    margin-top:5px;
}
#articleBody label {
    display: block;
    overflow: hidden;
}

#articleBody dt {
font-size: 16px;
font-weight:bold;
line-height: 1.7em;
padding: 0;
margin: 30px 0 15px;
/*アンケート用により整形したいときは
padding: 0 0 0 45px;
text-indent: -45px;*/
}
#articleBody dd {
font-size: 16px;
line-height: 1.7em;
padding: 0;
margin: 15px 0 30px;
display:block;
}
#articleBody dd label::after {
content: "\A" ;
/*white-space: pre ;*/
display:block;
}
#articleBody input[type="text"]{
border:1px solid #bebebe;
border-radius:3px;
width:100%;
height:30px;
padding:0 10px 0 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size:14px;
-webkit-box-shadow:inset 0px 1px 5px rgba(0, 0, 0, 0.15);
box-shadow:inset 0px 1px 5px rgba(0, 0, 0, 0.15);
}
#articleBody textarea{
border:1px solid #bebebe;
border-radius:3px;
width:100%;
height:160px;
padding:10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size:14px;
-webkit-box-shadow:inset 0px 1px 5px rgba(0, 0, 0, 0.15);
box-shadow:inset 0px 1px 5px rgba(0, 0, 0, 0.15);
}
#articleBody input[type="submit"]{
font-size:18px;
color:#fff;
background:#1e64aa;
border:none;
border-radius:3px;
width:300px;
height:30px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display:block;
margin:0 auto 30px;
}

/* ------------------------------ *
	注釈
 * ------------------------------ */
#articleBody div.bpannotation {
font-size: 14px;
line-height: 1.5em;
margin: 30px 0;
}

/* ------------------------------ *
	参考文献
 * ------------------------------ */
#articleBody div.bpreference {
font-size: 12px;
line-height: 1.5em;
border-top: 1px solid #ccc;
padding: 15px 20px;
}

/* ------------------------------ *
	テーブル基本
 * ------------------------------ */
#articleBody .bptable{
width:600px;
margin:10px auto 30px;
overflow:auto;
}
#articleBody .bptable table{
width:600px;
border-collapse:collapse;
}

#articleBody .bptable th,
#articleBody .bptable td{
border:1px solid #bebebe;
padding:9px;
font-size:13px;
line-height:1.3em;
}
#articleBody .bptable th{
text-align:left;
background:#e4ecf5;
}

#articleBody .bptable_title {
font-size: 13px;
line-height: 1.5em;
font-weight: bold;
}
#articleBody .bptable_caption {
font-size: 12px;
line-height: 1.5em;
}
#articleBody .bptable_title + table,
#articleBody .bptable_caption + table{
margin-top:10px;
}

/* ------------------------------ *
	テーブル（イ）表左寄せ
 * ------------------------------ */
#articleBody .bptable_left{
float:left;
clear:both;
margin:0 30px 10px 0;
}
/* ------------------------------ *
	テーブル（ウ）表右寄せ
 * ------------------------------ */
#articleBody .bptable_right{
float:right;
clear:both;
margin:0 0 10px 30px;
}
/* ------------------------------ *
	テーブル（エ）表中央
 * ------------------------------ */
#articleBody .bptable_center{
clear:both;
}