/* -----------------------------------------------------------------------

 css file for CNET Japan extra setteng

--------------------------------------------------------------------------*/

.extra-header {
width: 1240px;
height:250px;
margin: 0 auto 15px;
font-size: 24px;
text-align: center;
line-height: 1.3;
color: #fff;
}


#page-wrap h1.adspecial {
width: 60%;
margin: 0 auto;
padding-top: 30px;}

#page-wrap h1.adspecial span.bg-blue {
display: block;
width: 50%;
margin: 0 auto 20px;
padding: 5px;
font-size: 18px;
background-color: #25618c;
}
#page-wrap h1.adspecial span.subtitle {
display: block;
margin-top: 15px;
font-size: 18px;
}

/* 左カラム設定 --------------------------------------------------------------------------*/

#leaf-column .article_body p{
    margin-bottom: 20px;
    font-size: 18px;
    color: #252525;
    line-height: 1.6;
    letter-spacing: 0.08em;
}
#leaf-column .article_body p small {font-size: 12px;}

    
#leaf-column h2.adspecial {
position: relative;
margin-bottom: 30px;
padding: 20px 0;
color: #26618D;
font-size: 20px;
text-align: center;
}
#leaf-column h2.adspecial::before,
#leaf-column h2.adspecial::after {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
height: 5px;
width: 70%;
background-color: #26B7D4;
transform: skewX(-45deg);
}
#leaf-column h2.adspecial::after {
top: auto;
left: auto;
bottom: 0;
right: 0;
}


#leaf-column h3.adspecial,
#leaf-column h4.adspecial,
#rightside-column h5.adspecial
{
text-align:left;
padding:2%;
}

#leaf-column h3.adspecial{
    background-color:#f5f5f5;
    font-size:140% !important;
    font-weight:normal !important;
    line-height:1.4em;
    margin:15px 0;
position:relative;
}



#leaf-column h4.adspecial{
    background-color:#f5f5f5;
    font-size:120%;
    font-weight:normal;
    border:none;
    margin:15px 0;
}

#leaf-column .left{
    margin-left:10px;
    margin-right:15px;
    float:left;
}

#leaf-column .right{
    margin-left:15px;
    float:right;
}

#leaf-column .center{
    text-align:center;
margin-bottom:15px;
}


#leaf-column .left,
#leaf-column .right,
#leaf-column .center
{
font-size:85%;
color:#666;
line-height:1.4;
}

#leaf-column .left img,
#leaf-column .right img,
#leaf-column .center img
{
max-width:100%;
}


#leaf-column .article_body ul{
font-size:16px;
margin:10px;
border:1px solid #ccc;
padding:15px 10px 15px 30px;
background-color:#f5f5f5;
list-style-type:circle;
clear:both;
}


#leaf-column .bottomwp{
text-align:center;
}


#leaf-column .article_leaf_paging_word a{/*次ページへのリンク設定*/
background-color:#151515;
color:#fff;
text-align:center;
width:95%;
margin:2% auto;
padding:1.5% 0;
display:block;
}


/* 左カラムWP誘導CSS設定 --------------------------------------------------------------------------------*/

#leaf-column .block_wp {
	margin-bottom:20px;
}

#leaf-column .bottomwp {
	border-bottom:1px dotted #999999;
	margin-bottom:10px;
	margin-left:25px;
	margin-right:25px;
	padding-bottom:10px;
}
#leaf-column .bottomwp.last {
	border:medium none;
}
#leaf-column .bottomwp a:hover img{
	opacity:0.7;
}
#leaf-column .bottomwp a:hover{
	text-decoration:none;
}
#leaf-column .bottomwp a:hover h4{
	text-decoration:underline;
}
#leaf-column .bottomwp h4{
	border:none;
	font-size:12px;
	font-weight:normal;
	margin-top:2px;
}


/* 右カラム設定 --------------------------------------------------------------------------*/

#rightside-column h5.adspecial {
position: relative;
	padding:3px 5px;
	font-size:12px;
	color:#26B7D4;
	font-weight:bold;
	height:auto;
	margin-bottom:10px;
	zoom:1;
	text-shadow:none;
border-top: 3px solid #26B7D4;
background-color :#26618D;
color: #fff;
}

.block_sponsored{
    clear: both;
    border: 1px solid #ccc;
margin-bottom:35px;
    padding:10px;
text-align:center !important;
}








/* 右カラムホワイトペーパーCSS設定--------------------------------------------------------------------------------*/

#rightside-column .block_right_wp {
	margin-bottom:20px;
}
#rightside-column .block_right_wp .wp {
clear: both;
overflow: hidden;
border-bottom: 1px dotted #ccc;
	margin-bottom:10px;
}
#rightside-column .block_right_wp .wp a img {
	margin:0 10px 10px 5px;
	float:left;
	vertical-align:top;
	border:1px solid #999;
}
#rightside-column .block_right_wp .wp a:hover img {
	opacity:0.7;
}
#rightside-column .block_right_wp .wp a:hover img {
	opacity:0.7;
}
#rightside-column .block_right_wp .wp a h6.title {
	border-bottom:none;
	font-size:16px;
	display:inline;
        font-weight: normal;
}

#rightside-column .block_right_wp .summary{
font-size:12px;
margin-bottom:15px;
}

#rightside-column .block_right_wp .wp p {
	margin-top:10px;
}



#rightside-column .block_right_wp .wp a:hover h6.title {
	text-decoration:underline;
}



/* 右カラムインフォメーションCSS設定--------------------------------------------------------------------------------*/

#rightside-column .block_right_info{
	margin-bottom:20px;
text-align: center;
}
#rightside-column .block_right_info .info{
	margin-bottom:20px;
border-bottom:1px dotted #aaa;
}
#rightside-column .block_right_info .info p strong a {
display: inline-block;
min-width: 250px;
margin: 15px 0;
padding: 10px 30px;
background-color: #26B7D4;
color: #fff;
font-size: 16px;
}

#rightside-column .block_right_info .info:last-child{
border-bottom:none;
}


#rightside-column .block_right_info .info a img{
	margin:0 auto 10px;
	display:block;
}
#rightside-column .block_right_info .info a:hover img{
	opacity:0.7;
}

#rightside-column .block_right_info .info p{
	font-size:12px;
}

#rightside-column .block_right_info .info a .caption{
	font-size:14px;
	margin-bottom:15px;
	display:block;
}

#rightside-column .block_right_info .info a:hover .caption{
	text-decoration:underline;
}


/* 右カラムPageLink CSS設定 -------------------------------------------------------------------------------- */

/* 右カラムPageLink CSS設定 -------------------------------------------------------------------------------- */

#rightside-column .block_right_plink{
	margin-bottom:20px;
}

#rightside-column .block_right_plink a, #rightside-column .block_right_plink a:hover{
transition:none !important;
}

#rightside-column .block_right_plink ul li {
	width: 380px;
	padding-bottom:0px;
	height:70px;
	margin-bottom: 5px;
}
#rightside-column .block_right_plink ul li a {
	display:block;
	height:70px;
	margin-bottom:5px;
	overflow:hidden;
	text-indent:-9999px;
	width:380px;
	background-repeat: no-repeat;
}

#rightside-column .block_right_plink ul li.plink1 a{
	background-position: 0 0;
}
#rightside-column .block_right_plink ul li.plink1 a:hover,
#rightside-column .block_right_plink ul#on1 li.plink1 a {
	background-position: -380px 0;
}

#rightside-column .block_right_plink ul li.plink2 a{
	background-position: 0 -70px;
}
#rightside-column .block_right_plink ul li.plink2 a:hover,
#rightside-column .block_right_plink ul#on2 li.plink2 a {
	background-position: -380px -70px;
}


#rightside-column .block_right_plink ul li.plink3 a{
	background-position: 0 -140px;
}
#rightside-column .block_right_plink ul li.plink3 a:hover,
.adspecial_type1 .block_right_plink ul#on3 li.plink3 a {
	background-position: -380px -140px;
}


#rightside-column .block_right_plink ul li.plink4 a{
	background-position: 0 -210px;
}
#rightside-column .block_right_plink ul li.plink4 a:hover,
#rightside-column .block_right_plink ul#on4 li.plink4 a {
	background-position: -380px -210px;
}

#rightside-column .block_right_plink ul li.plink5 a{
	background-position: 0 -280px;
}
#rightside-column .block_right_plink ul li.plink5 a:hover,
#rightside-column .block_right_plink ul#on5 li.plink5 a {
	background-position: -380px -280px;
}





/* -----------------------------------------------------------------------

responsive setteing

--------------------------------------------------------------------------*/

@media screen and (max-width: 960px) {

body{
width:100% !important;
min-width:100%;
}

#page-wrap{
width:100% !important;
}

.extra-header {
width: 100%;
background-position: bottom right !important;
background-size: cover;
text-align: left;
}

#page-wrap h1.adspecial{
margin: 0 0 0 30px;
font-size: 24px;
}
#page-wrap h1.adspecial span.bg-blue {margin-left: 0;}
#page-wrap h1.adspecial span.subtitle {margin-top: 0; font-size: 14px; font-weight: normal;}


#column-content-block{
-webkit-flex-direction: column;
flex-direction: column;
}

/* 左カラム設定 --------------------------------------------------------------------------*/


#leaf-column{
width:100%;
order:0;
margin:0;
}


html > body .article_body{
padding:0 1.5% !important;
}
#leaf-colum .article_body{
padding:0 1.5% !important;
}


#leaf-column h2.adspecial{
font-size:100%;
margin-bottom: 30px;
}

#leaf-column h3.adspecial{
width:96%;
text-align:center;
font-size:120% !important;
}

#leaf-column h4.adspecial{
width:96%;
text-align:left;
font-size:100%;
}

#leaf-column .bottomwp img{
max-width:95%;
text-align:center;
}


#leaf-column .article_leaf_paging_word a{/*次ページへのリンク設定*/
padding:3% 0;
}


#leaf-column .movie{/*動画埋め込み用のスタイル*/
  position:relative;
  width:100%;
  padding-top:56.25%;
text-align:center;
}

#leaf-column .movie iframe{
  position:absolute;
  top:0;
  right:0;
  width:100% !important;
  height:100% !important;
}


/* 右カラム設定 --------------------------------------------------------------------------*/

#rightside-column{
width:100%;
order:0;
margin:0;
}

#rightside-column h5.adspecial{
font-size:100%;
text-align:center;
}

#rightside-column .block_right_plink{
display:none;
}

#rightside-column .block_right_info .info a .caption,
#rightside-column .block_right_info .info p{
	font-size:16px;
	text-align:center;
}

#leaf-column .center
{
width: 100% !important;
font-size:90%;
float:none;
margin:0 auto 2%;
text-align: center;
}
#leaf-column .center img {
max-width: 100%;}


}

@media screen and (max-width: 480px) {
.extra-header {position: relative;}
#page-wrap h1.adspecial span.bg-blue {display: none;}
#page-wrap h1.adspecial span.subtitle {margin-top: 0; font-size: 14px; font-weight: normal;}
#page-wrap h1.adspecial  {
position: absolute;
bottom: 0;
left: 0;
width: auto;
margin: 0;
padding: 10px 15px;
background-color: rgba(0,0,0,0.7);
}

#leaf-column h3.adspecial{
font-size:100% !important;
clear:both !important;
} 

#leaf-column .left,
#leaf-column .right,
#leaf-column .center
{
width: 100% !important;
font-size:90%;
float:none;
margin:0 auto 2%;
text-align: center;
}
#leaf-column .left img,
#leaf-column .right img,
#leaf-column .center img {
max-width: 100%;}


#rightside-column .block_right_info .info a img {
max-width:98%;
text-align:center;
}


}

/*pagination*/

#pagination { 
clear: both;
font-size: 14px;
margin-bottom: 20px;
position: static;
width: 100%;
text-align: center;
}

#pagination ul {
position: static;
left:0;
float:none;
/*left: 50%;*/
/*float: left;*/
background: none;
display: inline-block;
margin: 0 auto;
text-align: center;
}

#pagination li {
height: 22px;
line-height: 16px;
float: left;
margin: 0 3px !important;
padding: 0;
text-align: center;
position:static;
/*position: relative;
left: -50%;*/
background: none;
border: none;
list-style: none
}
#pagination li a {
border: 1px solid #CCC; 
display: block; 
padding: 5px; 
font-weight: bold; 
text-decoration: none; 
color: black;
}
#pagination li.thispage {
height: auto; 
border: 1px solid #151515; 
color: #fff; 
display: block; 
font-weight: bold; 
padding: 5px; 
text-decoration: none; 
background-color: #151515;
}
#pagination li.thispage a {
border: 1px solid #CCC;
color: black;
display: block;
font-weight: bold;
padding: 2px 5px;
text-decoration: none;
background-color: #A4AEB7;
}
#pagination .pre, #pagination .next { border: none; }
#pagination .pre a, #pagination .next a {
background:#909090;
padding: 6px 15px;
border: none;
color:#fff;
position:relative;
}
#pagination .pre a, #pagination .next a::after{
  content: "";
  position: absolute;
  top: 0;
  right: -9px;
  border-left: 14px solid #909090;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform-origin: right top;
  transform: scaleX(.7);
}


.lead {
margin: 0 0 30px !important;
padding: 30px;
border: 2px dashed #FEBD00;
overflow: hidden;
}
.lead p {margin: 0 !important;}
.login-area {
position: relative;
    margin-bottom: 30px;
    padding: 15px 15px 40px;
    text-align: center;
border-top: 1px solid #26B7D4;
border-bottom: 1px solid #26B7D4;
}

.login-area::before,
.login-area::after {
position: absolute;
top: 0;
left: -3px;
content: "";
display: block;
height: 5px;
width: 70%;
background-color: #26B7D4;
transform: skewX(-45deg);
}
.login-area::after {
top: auto;
left: auto;
bottom: 0;
right: -3px;
}


.login-area a {
    display: inline-block;
    padding: 10px 50px;
    border-radius: 5px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    background-color: #26618D;
}
.login-area a:hover {
    background-color: #26B7D4;
    text-decoration: none;
}