/* CSS Document */
/* ====================================================================
contents
==================================================================== */
article h2.ttl{
height:0;
padding-top:33px;
margin-left:30px;
background:url(https://static.nexon.co.jp/nexon/ver2017/pc-game/ttl_pcgame_pc.png) no-repeat;
overflow:hidden;
}
article p.lead{
margin:20px 30px 0;
line-height:1.8;
}

article .list{
margin-top:28px;
padding:0 30px;
}
article .list ul{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left top;
}
article .list li{
position:relative;
min-height:217px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/img_dotline_gray.png) repeat-x left bottom;
}

article .list .bg{
position:absolute;
top:30px;
left:0px;
padding:10px;
background-color:#fff;
}
article .list .bg a{
display:block;
width:327px;
height:137px;
background-size:100%;
}
article .list .bg a::after{
position:absolute;
top:-6px;
right:-6px;
z-index:2;
display:block;
width:36px;
height:36px;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_gamelist_badge.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
article .list li.new .bg a::after{content:"新作";background-position:0 0;}
article .list li.obt .bg a::after{content:"OBT";background-position:0 -36px;}
article .list li.cbt .bg a::after{content:"CBT";background-position:0 -72px;}
article .list li.br .bg a::after{content:"事前登録";background-position:0 -108px;}

article .list .detail{
padding-left:365px;
}
article .list li .detail dl{
position:relative;
padding:52px 0 30px;
}
article .list li .detail dl dt{
font-size:20px;
font-weight:bold;
}
article .list li .detail dl dd{}

article .list li .detail dl dd.genre{
position:absolute;
top:30px;
left:0;
height:16px;
padding-left:23px;
font-size:11px;
}
article .list li .detail dl dd.genre{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_game_pc_g.png) no-repeat;
}

article .list li .detail dl dd.text{
margin-top:11px;
line-height:1.8;
}

article .list li .detail dl dd.official{
margin-top:20px;
}
article .list li .detail dl dd.official a{
display:block;
width:126px;
height:25px;
margin:0;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/btn_official_site_g.png) no-repeat;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}
article .list li .detail dl dd.official a:hover{
background-position:0 -25px;
}


@media screen and (max-width:1147px) and (min-width:808px){
article .list li{
padding-top:30px;
}
article .list .bg{
position:relative;
top:0;
left:0;
padding:10px;
background-color:#fff;
}
article .list .bg a{
display:block;
width:450px;
height:187px;
background-size:100%;
}
article .list .detail{
padding-left:0;
}

}

@media screen and (max-width:807px){
.right > article{
padding:7.6% 0 0;
}
article h2.ttl{
width:50.6%;
height:0;
padding-top:7.0%;
margin-left:4.1%;
background:url(https://static.nexon.co.jp/nexon/ver2017/pc-game/ttl_pcgame_sp.png) no-repeat;
background-size:contain;
overflow:hidden;
}
article p.lead{
margin:4.1% 4.1% 0;
padding-bottom:4.1%;
line-height:1.5;
font-size:3.3vw;
}

article .list{
margin:0;
padding:4.1% 0;
background-color:#e1e6eb;
}
article .list ul{
display:block;
padding:0;
background:none;
}
article .list li{
position:relative;
width:91.6%;
min-height:auto;
height:auto;
margin:0 auto;
padding:3% 0;
background:none;
background-color:#fff;
}

article .list li+li{
margin-top:4.1%;
}
article .list .bg a::after{
position:absolute;
top:0;
left:88.9%;
z-index:2;
display:block;
width:13.9%;
height:0;
padding-top:13.9%;
margin-top:-2.2%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_gamelist_badge_sp.png) no-repeat;
background-size:cover;
overflow:hidden;
}
article .list li.new .bg a::after{content:"新作";background-position:0 0;}
article .list li.obt .bg a::after{content:"OBT";background-position:0 33.3%;}
article .list li.cbt .bg a::after{content:"CBT";background-position:0 66.6%;}
article .list li.br .bg a::after{content:"事前登録";background-position:0 100%;}

article .list li .bg{
position:relative;
top:auto;
left:auto;
width:93.9%;
height:0;
padding:39.3% 0 0;
margin:0 auto;
}
article .list li div.bg a{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
background-position:0 0;
background-size:100%;
}

article .list li .detail{
position:static;
top:auto;
display:block;
width:100%;
height:auto;
padding-left:0;
}

article .list li .detail > div{
position:relative;
width:100%;
height:auto;
background-color:#fff;
}
article .list li.open .detail > div{
height:auto;
}
article .list li.open .detail::after{
display:none;
}


article .list li .detail dl{
position:relative;
width:93.9%;
left:auto;
padding:4.1% 0 0;
margin:4.2% auto 0;
color:#1e1e1e;
}
article .list li .detail dl dt{
padding-bottom:0;
background:none;
font-size:4.4vw;
font-weight:bold;
}
article .list li .detail dl dd{
font-size:3.3vw;
line-height:1.5;
}

article .list li .detail dl dd.genre{
position:absolute;
top:0;
left:0;
height:3.0vw;
margin-bottom:0.8%;
padding-left:5.1%;
font-size:2.5vw;
color:#6e6e6e;

}
article .list li .detail dl dd.genre{
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_game_pc_g.png) no-repeat;
background-size:auto 100%;
}

article .list li .detail dl dd.text{margin-top:0;}

article .list li .detail dl dd.official{margin-top:4.0%;}
article .list li .detail dl dd.official a{
position:relative;
display:block;
width:100%;
height:auto;
margin:0 auto;
padding:3.0% 0;
background:none;
background-color:#0aa0d2;
text-indent:0;
text-decoration:none;
text-align:center;
font-size:4.4vw;
font-weight:bold;
color:#fff;
}
article .list li .detail dl dd.official a:hover{
background-color:#0aaadc;
}
article .list li .detail dl dd.official a::after{
content:"";
position:absolute;
top:50%;
right:6.4%;
display:block;
width:3.2%;
height:0;
margin-top:-2.0%;
padding-top:4.3%;
background:url(https://static.nexon.co.jp/nexon/ver2017/common/icn_arrow_w.png) no-repeat;
background-size:contain;
}

}