﻿@charset "utf-8";



/* キービジュアルエリア
------------------------------------------------------------*/
/* Vol.1 */
div.kvarea{
height:560px;
position:relative;
}
div.kvarea + time{
display:block;
margin:10px 10px 20px 10px;
color:#666;
font-size:0.75rem;
text-align:right;
}
div.kvarea p.label{
position:absolute;
top:32px;
left:9%;
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:before{
content:normal;
}
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:0.75rem;
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:0.75rem;
font-family:meiryo UI;
text-align:right;
line-height:1.3;
position:absolute;
top:190px;
left:56%;
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{
margin-left:80px;
float:left;
}
div.kvarea02 h2{
width:625px;
float:left;
}
div.kvarea02 h2:before{
content:normal;
}
div.kvarea02 h2 img{
}
div.kvarea02 h3{
margin:0;
text-align:center;
border:none;
clear:both;
}

/* キーワードエリア */
div.keyword{
padding:20px;
font-size:92%;
background:#f7feff;
clear:both;
}
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;
}



/* ===========================================================

   スマートフォン

=========================================================== */
@media screen and (max-width: 400px){

/* キービジュアルエリア
------------------------------------------------------------*/
/* Vol.1 */
div.kvarea{
height:18em;
}
div.kvarea p.label{
top:-2%;
left:0;
font-size:0.625rem;
}
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:45%;
margin-top:20px;
left:0;
}
div.kvarea img + p + p{
width:45%;
margin-top:20px;
text-align:right;
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;
}

div.kvarea02 h2{
margin:0;
}
div.kvarea02 h2 img{
width:100%;
}

/* 対談用エリア
------------------------------------------------------------*/
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{
margin:0 auto 30px auto;
padding:10px;
color:#fff;
font-size:75%;
line-height:1.5;
background:#444;
clear:both;
position:static;
top:auto;
right:auto;
}
article section dl.talk.right230 dt.introduction.shoulder + dd{
width:auto;
}
article section dl.talk.right230 dd.width100{
width:auto;
margin:0 0 20px 0;
}
article section dl.talk.right230 dt.introduction + dd + dd,
article section dl.talk.right230 dt.introduction + dd + dd + dd{
margin-left:0;
}
article section dl.talk.right230 dt.introduction.top55 + dd{
width:auto;
top: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;
}

}
