@charset "utf-8";


article > h2 + p{
padding:10px 10px 0 10px;
}


/* キービジュアルエリア
------------------------------------------------------------*/
/* Vol.1 */
div.kvarea{
height:500px;
position:relative;
}
div.kvarea p.label{
position:absolute;
top:25px;
left:0;
z-index:1;
}
div.kvarea h2{
width:100%;
margin:0;
padding:0;
text-align:center;
position:absolute;
top:25px;
left:0;
z-index:1;
}
div.kvarea h2 img{
width:625px;
}
div.kvarea h3{
width:100%;
margin:0;
padding:0;
text-align:center;
border:none;
position:absolute;
top:125px;
left:0;
z-index:1;
}
div.kvarea h3 + img{
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
}
div.kvarea img + p{
margin:0;
padding:0;
color:#444;
font-size:62%;
font-family:meiryo UI;
line-height:1.3;
position:absolute;
top:190px;
left:24%;
z-index:1;
}
div.kvarea img + p + p{
margin:0;
padding:0;
color:#444;
font-size:62%;
font-family:meiryo UI;
text-align:right;
line-height:1.3;
position:absolute;
top:190px;
left:54%;
z-index:1;
}

div.kvarea02{
margin:0 0 30px 0;
padding:20px 0 10px 0;
background:#a8daeb url(/bestengine/feature/vol01/img/img_dialog01a_00.jpg) no-repeat 50% 10%;
background-size:180%;
overflow:hidden;
}
div.kvarea02 p.label{
float:left;
}
div.kvarea02 h2{
width:625px;
float:left;
}
div.kvarea02 h2 img{
}
div.kvarea02 h3{
margin:0;
text-align:center;
border:none;
clear:both;
}

/* Vol2 */
div.kvarea_vol2{
margin:0 0 40px 0;
position:relative;
}
div.kvarea_vol2 + time{
display:block;
margin:10px 10px 20px 10px;
color:#666;
font-size:0.75rem;
text-align:right;
}

div.kvarea_vol2 h2{
width:55px;
height:20px;
margin:0;
padding:50px 10px 10px 10px;
color:#fff;
font-size:0.9rem;
text-align:right;
background:#005cca;
position:absolute;
top:55px;
left:35px;
z-index:4;
}
div.kvarea_vol2 h2:before{
content:normal;
}
div.kvarea_vol2 h3{
width:38%;
margin:0 0 0 2%;
padding:2% 1% 1% 13%;
color:#fff;
font-size:1.5rem;
line-height:1.5;
border:none;
background:rgba(21,59,103,0.8);
position:absolute;
top:55px;
left:0;
z-index:3;
}
div.kvarea_vol2 > p{
width:48%;
margin:0 0 0 2%;
padding:1% 2% 3%;
color:#fff;
font-size:0.72rem;
line-height:1.5;
background:rgba(21,59,103,0.8);
position:absolute;
top:152px;
left:0;
}
div.kvarea_vol2 img{
width:100%;
}
div.kvarea_vol2 > div{
width:100%;
height:85px;
background:rgba(255,255,255,0.9);
overflow:hidden;
position:absolute;
bottom:50px;
left:0;
}
div.kvarea_vol2 div > div{
font-size:0.7rem;
position:absolute;
z-index:5;
}
div.kvarea_vol2 div > div:nth-of-type(1){
width:34%;
padding:2.5% 1% 1% 1%;
line-height:1;
text-align:center;
left:27%;
}
div.kvarea_vol2 div > div:nth-of-type(2){
width:25%;
padding:1% 1% 1% 1%;
text-align:right;
left:0;
}
div.kvarea_vol2 div > div:nth-of-type(3){
width:35%;
padding:1% 1% 0 1%;
text-align:left;
left:64%;
}
div.kvarea_vol2 div > div p{
margin:0 5px 3px 5px;
padding:0;
line-height:1.5;
}

div.kvarea_vol2_inner{
margin:0 0 50px 0;
/*padding:10px;*/
background:#dae4ea;
overflow:hidden;
}
div.kvarea_vol2_inner p:first-child{
width:55px;
margin:0;
padding:20px;
color:#fff;
font-size:0.9rem;
text-align:center;
background:#005cca;
float:left;
}
div.kvarea_vol2_inner h2{
margin:8px 0 0 20px;
padding:10px;
color:#333;
font-size:1.5rem;
font-weight:normal;
line-height:1.5;
float:left;
}
div.kvarea_vol2_inner h2 + p{
width:auto;
margin:46px 0 0 0;
padding:0 10px;
font-size:0.8rem;
line-height:1;
text-align:right;
float:right;
}

/* キーワードエリア */
div.keyword{
padding:20px;
font-size:92%;
background:#f7feff;
}
div.keyword h3{
padding-bottom:5px;
color:#429ab7;
font-size:140%;
border-bottom:3px #429ab7 solid;
border-left:none;
}
div.keyword h4{
margin:0;
padding:0;
background:none;
}
div.keyword h4:before{
content:none;
}
div.keyword h4 + p{
margin-top:0;
padding-left:25px;
}
article section h4.mt30{
margin-top:30px;
}


/* ===========================================================

   スマートフォン

=========================================================== */
@media screen and (max-width: 480px){

/* キービジュアルエリア
------------------------------------------------------------*/
/* Vol.1 */
div.kvarea{
height:18em;
}
div.kvarea p.label{
top:-2%;
font-size:50%;
}
div.kvarea h2{
top:5%;
}
div.kvarea h2 img{
width:70%;
}
div.kvarea h3{
font-size:50%;
top:24%;
}
div.kvarea h3 + img{
}
div.kvarea img + p{
width:30%;
margin-top:2em;
left:0;
}
div.kvarea img + p + p{
width:30%;
margin-top:2em;
text-align:left;
right:0;
left:auto;
}

/* kv02 */
div.kvarea02{
margin:0 0 30px 0;
padding:0 0 10px 0;
background:#a8daeb;
overflow:hidden;
}
div.kvarea02 p.label{
margin:10px;
float:none;
}
div.kvarea02 h2{
width:auto;
padding:0 20px;
float:none;
}
div.kvarea02 h3{
padding:0;
font-size:97%;
font-weight:normal;
}

/* Vol2 */
div.kvarea_vol2{
margin:0 0 30px 0;
position:static;
}
div.kvarea_vol2 h2{
width:auto;
height:auto;
margin:0;
padding:10px;
text-align:left;
position:static;
}
div.kvarea_vol2 h3{
width:auto;
margin:0;
padding:10px;
position:static;
}
div.kvarea_vol2 > p{
width:auto;
margin:0;
padding:0 10px 10px 10px;
color:#fff;
font-size:0.7rem;
line-height:1.5;
background:rgba(21,59,103,0.8);
position:static;
top:152px;
left:0;
}
div.kvarea_vol2 > div{
width:auto;
height:auto;
position:static;
}
div.kvarea_vol2 div > div{
font-size:0.5rem;
position:static;
}
div.kvarea_vol2 div > div:nth-of-type(1){
width:90%;
padding:2.5% 1% 1% 1%;
}
div.kvarea_vol2 div > div:nth-of-type(2){
width:48%;
padding:1% 2% 1% 0;
text-align:right;
float:left;
}
div.kvarea_vol2 div > div:nth-of-type(3){
width:48%;
padding:1% 0 1% 2%;
text-align:left;
float:left;
}
div.kvarea_vol2 div > div p{
margin:0 5px 3px 5px;
padding:0;
line-height:1.5;
}
div.kvarea_vol2 div > div strong{
font-size:1.2rem;
}

div.kvarea_vol2_inner{
margin:0 0 30px 0;
padding:0;
}
div.kvarea_vol2_inner p:first-child{
width:auto;
padding:5px 10px;
text-align:left;
float:none;
}
div.kvarea_vol2_inner h2{
margin:12px 0 0 0;
padding:0;
color:#333;
font-size:1rem;
text-align:center;
float:none;
}
div.kvarea_vol2_inner h2 + p{
width:auto;
margin:10px 10px 15px 10px;
float:none;
}

/* 対談用エリア
------------------------------------------------------------*/
article section dl.talk dt{
width:20%;
margin:0 20px 0 0;
padding:0;
text-align:center;
background:#ff6;
}
article section dl.talk dt.name_one{
background:#ff6;
}
article section dl.talk dt.name_two{
background:#cff;
}
article section dl.talk dt.name_three{
background:#fcf;
}
article section dl.talk dd{
width:100%;
margin:0 0 20px 0;
padding:0;
text-align:left;
float:none;
}
article section dl.talk dd > img{
width:100%;
}
article section dl.talk dt.name_zero{
display:none;
}
article section dl.talk dt.name_zero + dd{
width:100%;
float:none;
}
article section dl.talk dt.name_zero + dd:before{
content:"──";
}

/* 対談者概要　右エリア */	
article section dl.talk.right230{
position:static;
}
article section dl.talk.right230 dd{
width:auto;
float:none;
}
article section dl.talk.right230 dt.introduction{
width:100%;
margin:0 auto;
float:none;
position:static;
top:auto;
right:auto;
}
article section dl.talk.right230 dt.introduction img{
display:block;
width:100%;
margin:0 0 10px -10px;
}
article section dl.talk.right230 dt.introduction + dd{
width:94%;
margin:0 auto 30px auto;
padding:3%;
color:#fff;
font-size:75%;
line-height:1.5;
background:#444;
clear:both;
position:static;
top:auto;
right:auto;
}

article section dl.talk.right230 dd.width100{
width:auto;
margin:0 0 20px 0;
}
article section dl.talk.right230 dt.introduction + dd + dd{
margin-left:0;
}

/* キーワードエリア */
div.keyword{
padding:10px;
}
div.keyword h4{
margin-bottom:10px;
}
div.keyword h4 + p{
padding-left:0;
}

/* グレー背景リスト */
article section dl.talk div.gr_list{
margin:0px 0px 20px 0;
padding:0;
background:#f3f3f3;
}
article section dl.talk div.gr_list dl{
margin:0;
padding:0;
}
article section dl.talk div.gr_list dl dt{
width:auto;
margin:0;
padding:0.5em 1em 0 1em;
font-size:88%;
font-weight:bold;
text-align:left;
border-top:3px #fff solid;
background:none;
}
article section dl.talk div.gr_list dl dd{
width:auto;
margin:0;
padding:0 1em 0.5em 1em;
font-size:82%;
line-height:1.5;
}
article section dl.talk div.gr_list dl dd:first-child{
padding:0;
}

h4.m146{
margin:0;
}


/* pager */
article > nav.pager ul li.prev,
article > nav.pager ul li.prev a,
article > nav.pager ul li.next,
article > nav.pager ul li.next a{
font-size:0.75rem;
}


}