@charset "Shift_JIS";
/* ==================================================================
CSS information
style info :INDEX—p
================================================================== */


@media screen and (min-width: 641px) {
#pageTop { padding-bottom:1px; background: url(../../_img/common/underline_pagetop.png) center bottom repeat-x; margin-top: 30px;}
#pageTop { margin-bottom: 10px;}
}
/* --------------------------------------------------------
#container
-------------------------------------------------------- */
#container { /*min-height:720px;*/ }

/**/
#mainLogo , #catchcopy , #infoBox , #twBox , #hard , #copyright_text1 , #flashBox_inner img , #bgvideo , #bnr_01 { visibility: hidden;}


.sp { display:none; }
@media screen and (max-width: 640px) {
.sp { display:block; }
.pc { display:none; }
}

/* --------------------------------------------------------
#mainvisualBlock
-------------------------------------------------------- */
#mainvisualBlock { position:relative; width:100%; padding:56.25% 0 0; overflow:hidden; }
#mainvisualBlock img { width:100%; height:auto;}
@media screen and (max-width: 640px) {
#mainvisualBlock { padding:0; }
}

#bgvideo { position:absolute; left:0; top:0; width:100%; height:auto; min-width:100%; min-height:auto;}

#flashBox { z-index:1; }
#flashBox #flashBox_inner { position:absolute; top:0; left:0; width:100%; height:100%;}
#flashBox #flashBox_inner_sp { display:none;}
#flashBox object , #flashBox embed { vertical-align:top; width:100%; height:100%;}
@media screen and (max-width: 640px) {
#bgvideo { display:none; }
#flashBox #flashBox_inner { visibility:hidden; }/**/
#flashBox #flashBox_inner_sp { display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
}


#mainvisualBlock .contentBlock { z-index:10; position:absolute; top:0; left:0; width:100%; height:100%;}
@media screen and (max-width: 640px) {
#mainvisualBlock .contentBlock { position:relative; text-align:center; height:auto; }
}

#mainvisualBlock #mainLogo { position:relative; padding-top:4%; margin-left:16px; width:47.785%; height:auto; z-index:100;}
#mainvisualBlock #mainLogo img { max-width:100%; height:auto;}
@media screen and (max-width: 640px) {
#mainvisualBlock #mainLogo { position:relative; padding-top:87%; margin-left:0; width:100%; height:auto; }
#mainvisualBlock #mainLogo img { width:80%; height:auto;}
}

#catchcopy { position:absolute; /*right:2.857%;*/right:49.857%; bottom:16.8%; width:43.785%; height:auto; text-align:left; }
#catchcopy img { max-width:100%; height:auto; max-width:592px;}
@media screen and (max-width: 640px) {
#catchcopy { position:absolute; right:0%; bottom:0; width:100%; height:auto; text-align:center; top:2.0%; left:0;}
#catchcopy img { width:94%; height:auto;}
}


#twBox { position:absolute; left:4.285%; top:54%; width:20.928%; }
#twBox img { max-width:100%; height:auto;}
@media screen and (max-width: 640px) {
#twBox { position: relative; left:0px; width:100%; padding:10px 10px 0; }
#twBox img { width:100%; height:auto;}
}


#infoBox { position:relative; width:100%; padding:10px 10px 0; }
#infoBox .ti img { width:100%; height:auto;}
#infoBox .inner { background:url(../../_img/pc/index/info_bg.png) no-repeat left bottom; background-size:cover; position:relative; padding:10px 15px; }

#infoBox .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { max-height:100px; overflow-y:auto;}

@media screen and (min-width: 641px) {
#infoBox { position:absolute; left:3.0%; bottom:3.3%; max-width:519px; width:44.071%; padding-top:0px;}
#infoBox .inner { background:url(../../_img/pc/index/info_bg.png) no-repeat left bottom; background-size:cover; }
#infoBox .inner:after { padding-top:13%; display:block; content:""; }
#infoBox .inner > #newsList { position:absolute; top:0px; left:3.468%; bottom:10px; right:3.468%; }

#infoBox .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { max-height:auto; overflow-y:auto;}
}


#infoBox #newsList { overflow:hidden; color:#FFF; }
#infoBox #newsList li { list-style:none; }
#infoBox #newsList li dl { position:relative; font-size:93%; margin-bottom:5px; text-align:left; }
#infoBox #newsList li dt { position:absolute; top:0; left:0; line-height:1.41; }
#infoBox #newsList li dd { position:relative; margin-left:90px; line-height:1.41; }
#infoBox #newsList li dd a { color:#ffc000; text-decoration:underline; filter: "alpha(opacity=80)"; -ms-filter: "alpha(opacity=80)"; opacity:0.8; }
#infoBox #newsList li dd a:hover { filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; opacity:1; }
#infoBox #newsList li dd .new { color:#F00; }

@media screen and (max-width: 640px) {
#infoBox #newsList li dl { font-size:85%; margin-bottom:10px; }
#infoBox #newsList li dt { position: relative; color:#b4b4b4; }
#infoBox #newsList li dd { margin-left:0px; }
}

#hard { position:absolute; left:0; top:0; width:360px; max-width:35.714%; z-index:10; }
#hard img { max-width:100%; height:auto;}
@media screen and (max-width: 640px) {
#hard { position:absolute; right:0; left:auto; top:0; width:100%; max-width:35.714%; z-index:10; text-align:right; }
}

#copyright_text1 { position:absolute; left:3.8%; bottom:1.1%; width:93%; z-index:12; }
#copyright_text1 .copyright-a { width:45%; height:auto; max-width:578px; float:left;}
#copyright_text1 .copyright-b { width:41%; height:auto; max-width:537px; float:right; }
@media screen and (max-width: 640px) {
#copyright_text1 { position:relative; left:auto; bottom:auto; width:100%; padding:3% 10px 2%; border-bottom:1px solid #333; }
}

#shadow { position:absolute; right:0; bottom:0; width:100%; z-index:2; }


.bnr-TypeA { margin: 10px 0 0;}

#bnr_01 { position:absolute; right:3.550%; bottom:15.90%; width:47.5%; height:auto; text-align:right; }
#bnr_01 a { display: block; width: 100%; height: auto; position: absolute; top: 0; left: 0;}
#bnr_01 a:before { content: ""; display: block; padding-top: 14.286%;}
#bnr_01 a span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#bnr_01 img { max-width:100%; height:auto;}
@media screen and (max-width: 640px) {
#bnr_01 { position: relative; right:0; bottom:0; width:100%; height:auto; text-align:center; padding:0 10px; }
#bnr_01 div { position: relative; top:0; left:0; width:100%; height:auto; }
#bnr_01 div:before { content: ""; display: block; padding-top: 24.333%; }

#bnr_01 img { width:100%; height:auto;}
}



/* --------------------------------------------------------
#gnavBlock
-------------------------------------------------------- */
#gnavBlock { margin-top:30px; }
#gnavBlock img { max-width:100%; height:auto;}
#gnavBlock #logo { width:14%; max-width:200px; position:absolute; top:-25%; left:10px; }

@media screen and (max-width: 640px) {
#gnavBlock { display: block !important; }
#gnavBlock { padding-bottom:0px; }

#gnavBlock #logo { display:none;}

#gnavBlock { position: relative; background:none; margin-top:0px; padding-top:10px; }
#gnavBlock.scl { padding-top:0%;}
#gnavBlock h1 { width:60%; max-width:340px; position: relative; top:0%; left:0px; margin:0 auto; }

#gnavBlock ul { letter-spacing:normal; position:relative; text-align:center; max-width:640px; margin:10px auto; }
#gnavBlock ul li { display:block; width:100%; margin:0 0 10px; 
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#gnavBlock ul li span { display:block; margin:0 2%;}
#gnavBlock ul li:last-child { margin-bottom:0;}
}


/* --------------------------------------------------------
#bgBlock
-------------------------------------------------------- */
#bgBlock { border-top: 1px solid #3c3c3c; background: url(../../_img/pc/index/bg.jpg) no-repeat center top; background-size:100% auto; padding:30px 10px 10px;}
@media screen and (max-width: 640px) {
#bgBlock { padding: 10px 10px 10px;}
}


/* --------------------------------------------------------
.frameBlock
-------------------------------------------------------- */
.frameBlock { position:relative; width:100%; max-width:1000px; height:auto; background:url(../../_img/pc/index/bg_frame.jpg) no-repeat 0 0; background-size:100% auto; }

.frameBlock-inner:before { content: ""; display:block; width:100%; height:0; padding-top:3.5%;
background:url(../../_img/pc/index/bg_frame_top.png) no-repeat 0 0; background-size:100% auto; }
.frameBlock-inner:after { content: ""; display:block; width:100%; height:0; padding-top:3.5%;
background:url(../../_img/pc/index/bg_frame_btm.png) no-repeat 0 0; background-size:100% auto; }
.frameBlock-inner-m { background:url(../../_img/pc/index/bg_frame_mdl.png) repeat-y 0 0; background-size:100% auto; padding:0 0%;}
@media screen and (max-width: 640px) {
}


/* --------------------------------------------------------
#specBlock
-------------------------------------------------------- */
#specBlock { margin:0 auto; }/* w:940*/
#specBlock .frameBlock-inner-m { }
#specBlock img { max-width:100%; height:auto;}

#specBlock .pkg-box:after { content: ""; display: block; clear: both; }
#specBlock .pkg-box { zoom:1; }
#specBlock .posa-box:after { content: ""; display: block; clear: both; }
#specBlock .posa-box { zoom:1; }
#specBlock .posa-box { clear: both; border-top: 1px solid #142950; margin-top: 10px; padding-top: 20px; }

#specBlock h2 { float: left; width: 36.7%; margin-left: 3%; margin-bottom: 10px; }
#specBlock .soft_ps4 { float: left; width: 26.3%; margin-left: 2%; }
#specBlock .soft_ps3 { float: left; width: 26.3%; margin-left: 2%;}
#specBlock .posa_ps4 { float: left; width: 26.3%; margin-left: 2%; }
#specBlock .posa_ps3 { float: left; width: 26.3%; margin-left: 2%;}
#specBlock .posa_store { clear: both; float: left; width: 23.4%; margin-left: 3%; padding-top: 10px; }
#specBlock .posa_readme { float: left; width: 46.8%; margin-left: 15%;}

#specBlock .staff { clear: both; width:94%; margin-left: 3%; padding-top: 1%; margin-bottom: -10px; }

@media screen and (max-width: 640px) {
#specBlock { }
#specBlock .frameBlock-inner-m { padding:0 15px;}

#specBlock .posa-box { margin-top: 10px; padding-top: 10px; }

#specBlock h2 { float: none; width: 100%; margin-left: 0%; margin-bottom: 15px; }
#specBlock .soft_ps4 { float: left; width: 50%; margin-left: 0%; padding-right:5px; }
#specBlock .soft_ps3 { float: left; width: 50%; margin-left: 0%; padding-left:5px;}
#specBlock .posa_ps4 { float: left; width: 50%; margin-left: 0%; padding-right:5px; }
#specBlock .posa_ps3 { float: left; width: 50%; margin-left: 0%; padding-left:5px;}
#specBlock .posa_store { float: none; width: 100%; margin-left: 0%; padding-top: 20px; }
#specBlock .posa_readme { float: none; width: 100%; margin-left: 0%; padding-top: 20px;}

#specBlock .staff { clear: both; width:100%; margin-left: 0%; padding-top: 4%; margin-bottom: 0px; }
}


/* --------------------------------------------------------
#featuresBlock
-------------------------------------------------------- */
#featuresBlock { width: 100%; max-width: 1000px; height:auto; margin:30px auto 0;}
#featuresBlock h3 { margin-bottom:10px;}
#featuresBlock table th { border: 1px solid #4e4e4e; padding: 10px; text-align: center; }
#featuresBlock table .th1 { width: 20%;}
#featuresBlock table .th2 { width: 40%;}
#featuresBlock table .th3 { width: 40%;}
#featuresBlock table td { border: 1px solid #4e4e4e; color: #FFF; font-size: 93%; line-height: 1.41; padding: 10px; vertical-align: top;}
#featuresBlock table td img { width: 100%; height: auto;}
#featuresBlock table .td1 { white-space:nowrap; font-size: 108%;}
#featuresBlock .fs { font-size:85%; color:#8e9396;}
@media screen and (max-width: 640px) {
#featuresBlock { width: 100%; max-width: 100%; height:auto; margin:10px auto 0;}
#featuresBlock img { max-width:100%; height:auto;}
#featuresBlock h3 { margin-bottom:5px; width: 60%;}

#featuresBlock table th { padding: 5px 10px; }
#featuresBlock table .th1 { width: 24%;}
#featuresBlock table .th2 { width: 38%;}
#featuresBlock table .th3 { width: 38%;}
#featuresBlock table td { font-size: 85%; padding: 5px;}
#featuresBlock table .td1 { white-space: normal; font-size: 85%;}
}


/* --------------------------------------------------------
#privilegeBlock
-------------------------------------------------------- */
#privilegeBlock { width: 100%; max-width: 1000px; height:auto; margin:30px auto 0; text-align: left;}
#privilegeBlock .frameBlock-inner-m { }
#privilegeBlock .block { margin: 0 3% 0%; clear:both; padding: -2% 0 2%; }
#privilegeBlock .block:first-child { margin-bottom: 14%;}
#privilegeBlock img { width:100%; height:auto;}

#privilegeBlock h3 { margin-bottom: 10px; width: 9.25%;}
#privilegeBlock .block:first-child h3 { margin-bottom: 0;}
#privilegeBlock .notes-Text { font-size:77%; color: #bebebe; padding-top: 5px;}

#privilegeBlock .bl1-1 { float: left; margin-top: 1%; margin-right: 1%; width: 45.525%; max-width:428px;}
#privilegeBlock .bl1-2 { float: left; margin-top: 1%; margin-right: 1%; width: 6.27%; max-width:58px;}
#privilegeBlock .bl1-3 { float: left; margin-top: -5%; width: 45.525%; max-width:427px;}

#privilegeBlock .bl2-1 { float: left; margin-right: 2%; width: 45.625%; max-width:428px;}
#privilegeBlock .bl2-2 { float: left; margin-top: -4.4%; width: 22.234%; max-width:209px; display: block;}
#privilegeBlock .bl2-3 { float: left; width: 100%; padding: 15px 0 0 0; }
#privilegeBlock .bl2-3 img { float: left;}
#privilegeBlock .bl2-3 img:nth-child(odd) { width:31.0%; max-width: 285px; height:auto;}
#privilegeBlock .bl2-3 img:nth-child(even) { width:3.5%; max-width: 36px; height:auto;  }

#privilegeBlock .notes-list { font-size:77%; color: #8e9396; padding-left:1em; padding-top: 20px; clear:both; }
#privilegeBlock .notes-list li { line-height: 1.41; text-indent:-1em;}
@media screen and (max-width: 640px) {
#privilegeBlock { width: 100%; max-width: 100%; height:auto; margin:10px auto 0;}
#privilegeBlock .block { margin: 0 0% 0%; padding: 0 10px;}
#privilegeBlock .block:first-child { margin-bottom: 20px;}

#privilegeBlock h3 { margin-bottom: 10px; width: auto; max-width: 18%;}
#privilegeBlock .block:first-child h3 { margin-bottom: 10px;}

#privilegeBlock .bl1-1 { float: none; margin-top: 0; margin-right: 0; width: 100%; max-width: none;}
#privilegeBlock .bl1-2 { float: none; margin-top: 0; margin-right: 0; width: 100%; max-width: none;}
#privilegeBlock .bl1-3 { float: none; margin-top: -7%; width: 100%; max-width: none;}

#privilegeBlock .bl2-1 { float: none; margin-right: 0%; width: 100%; max-width: none;}
#privilegeBlock .bl2-3 { float: none; width: 100%; padding-top: 0; }
#privilegeBlock .bl2-3 img { float: none;}
#privilegeBlock .bl2-3 img:nth-child(odd) { width:100%; max-width: none; height:auto;}
#privilegeBlock .bl2-3 img:nth-child(even) { width:100%; max-width: none; height:auto;  }


}



/* --------------------------------------------------------
#shopPrivilegeBlock
-------------------------------------------------------- */
#shopPrivilegeBlock { width: 100%; max-width: 1000px; height:auto; margin:30px auto 30px; text-align: left;}
#shopPrivilegeBlock .frameBlock-inner-m { }
#shopPrivilegeBlock .block { margin: 0 3% 0%; clear:both; padding: 0; }

#shopPrivilegeBlock h3 { margin-bottom: 15px; width: auto; max-width: 15%;}
#shopPrivilegeBlock .text-Box { color: #FFF; font-size: 93%; margin-bottom: 20px; line-height: 1.41; }

#shopPrivilegeBlock .shop-list { background: #fff; letter-spacing: -.45em; padding: 2.127% 0 2.127% 2.127%; 
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
#shopPrivilegeBlock .shop-list img { width:100%; height:auto;}
#shopPrivilegeBlock .shop-list li { letter-spacing: normal; display: inline-block; width:31.7%; max-width:285px; margin-bottom: 2%; margin-right:1.6%; }
#shopPrivilegeBlock .shop-list li:nth-child(4) { margin-bottom: 0%; }
#shopPrivilegeBlock .shop-list li:nth-child(5) { margin-bottom: 0%;}

#shopPrivilegeBlock .notes-list { font-size:77%; color: #8e9396; padding-left:1em; padding-top: 10px; clear:both; }
#shopPrivilegeBlock .notes-list li { line-height: 1.41; text-indent:-1em;}

@media screen and (max-width: 640px) {
#shopPrivilegeBlock { width: 100%; max-width: 100%; height:auto; margin:10px auto 10px;}
#shopPrivilegeBlock .block { margin: 0 0% 0%; padding: 0 10px;}
#shopPrivilegeBlock img { width:100%; height:auto;}

#shopPrivilegeBlock h3 { margin-bottom: 10px; width: auto; max-width: 80%;}
#shopPrivilegeBlock .text-Box { margin-bottom: 15px; }

#shopPrivilegeBlock .shop-list { padding: 10px; }
#shopPrivilegeBlock .shop-list li { display: block; width:100%; max-width: none; margin-bottom: 15px; margin-right: 0; }
#shopPrivilegeBlock .shop-list li:nth-child(2) { margin: 0 0 15px;}
#shopPrivilegeBlock .shop-list li:nth-child(4) { margin: 0 0 15px;}
#shopPrivilegeBlock .shop-list li:nth-child(5) { margin: 0 0 0px;}

#shopPrivilegeBlock .notes-list { font-size:77%; color: #8e9396; padding-left:1em; padding-top: 10px; clear:both; }
#shopPrivilegeBlock .notes-list li { line-height: 1.41; text-indent:-1em;}

}


/* --------------------------------------------------------
#movieBlock
-------------------------------------------------------- */
#movieBlock { width: 100%; max-width: 1000px; height:auto; margin:0 auto; }
#movieBlock { border-top: 1px solid #4e4e4e; text-align:center; padding:30px 0 25px;}
#movieBlock img { width:100%; height:auto;}

/*#movieList { letter-spacing:-.45em; margin-left: -2.0%; }
#movieList li { letter-spacing:normal; display:inline-block; margin:0px 0 0 2.0%; width: 31.0%; max-width:316px; height: auto; vertical-align: top; }
#movieList li img { max-width:316px; height:auto;}
@media screen and (max-width: 640px) {
#movieBlock { padding:10px 0; }
}*/


#ytBox { position:relative; }
#ytBox:after { padding-top:56.25%; display:block; content:""; }
#ytBox > #player { position:absolute; top:0px; left:0; bottom:0; right:0; }

@media screen and (max-width: 640px) {
#movieBlock { text-align:center; padding:10px 0; }
}



/* --------------------------------------------------------
#hardedBlock
-------------------------------------------------------- */
#hardedBlock { background: #000; padding:5px 0px 0;}
#hardedBlock img { width: 100%; max-width: 1000px; height:auto; }
#hardedBlock h3 { max-width:100%; height:auto; text-align:center;}
#hardedBlock  a:hover img { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; }
@media screen and (max-width: 640px) {
#hardedBlock img { max-width: 100%; height:auto; }
}


/* --------------------------------------------------------
#bnrBlock
-------------------------------------------------------- */
#bnrBlock { background: #000; }
#bnrBlock ul { text-align:center; padding:30px 10px 0; }
#bnrBlock .bnr { display:inline-block; padding:0 5px; max-width:17.428%; }
#bnrBlock .bnr a { display:block; border:2px solid #505050; }
#bnrBlock .bnr a:hover img { filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; }
#bnrBlock img { max-width:100%; height:auto;}

@media screen and (max-width: 640px) {
#bnrBlock { }
#bnrBlock ul { padding:10px 0px; }
#bnrBlock .bnr { padding:0 0 6px 0; max-width:49%; }
#bnrBlock .bnr:nth-child(odd) { padding-right:3px; }
#bnrBlock .bnr:nth-child(even) { padding-left:3px; }
}





/* --------------------------------------------------------
2015/03/11
-------------------------------------------------------- */
.btn_guidelines { text-align: center; padding: 0px 10px 30px; }
.btn_guidelines a { display: inline-block; padding: 10px 20px; text-align: center; font-size: 93%; background: #000; border: 1px solid #F00; color: #F00; line-height: 1.41; }
.btn_guidelines a:hover { filter: "alpha(opacity=70)"; -ms-filter: "alpha(opacity=70)"; opacity:0.7; text-decoration: none; }
@media screen and (max-width: 640px) {
.btn_guidelines { padding: 0 0 10px; }
.btn_guidelines a { padding: 5px; font-size: 85%; }
}


.add_Bnr { width: 100%; max-width: 1000px; height:auto; margin: 0px auto 40px;}
.add_Bnr ul { letter-spacing: -.45em;}
.add_Bnr li { letter-spacing: normal; display: inline-block; width: 50%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.add_Bnr li:first-child { padding-right: 2%;}
.add_Bnr li:last-child { padding-left: 2%;}
.add_Bnr li img { width: 100%; height: auto;}
@media screen and (max-width: 640px) {
.add_Bnr { margin: 0px auto 0px; padding: 20px 10px 0;}
.add_Bnr li { display: block; width: 100%; margin-bottom: 10px;}
.add_Bnr li:first-child { padding-right: 0px;}
.add_Bnr li:last-child { padding-left: 0px; margin-bottom: 0;}
}



/* --------------------------------------------------------
#2016/04/28
#uh-area
-------------------------------------------------------- */
#uh-area { position: relative; background: url(http://cache.www.dragonquest.jp/heroes/_img/uh/bg_sp.jpg) center top no-repeat; background-size: 100%; } 
#uh-area { margin: 0 -10px 5%; } 
#uh-area img { width: 100%; height: auto;}
#uh-area .uh-area-inner { padding-bottom: 2%; } 
@media screen and (min-width: 641px) {
#uh-area { background: url(http://cache.www.dragonquest.jp/heroes/_img/uh/bg_r_pc.jpg) center top repeat-x; background-size: auto; } 
#uh-area .uh-area-inner-wrap { position: relative; background: url(http://cache.www.dragonquest.jp/heroes/_img/uh/bg_pc.jpg) center top no-repeat; } 
}

#uh-area .ttl { text-align: center;}
#uh-area .pkgList { letter-spacing: -.45em; font-size: 10px; vertical-align: top; text-align: center; margin-bottom: 4%; }
#uh-area .pkgList li { letter-spacing: normal; vertical-align: top; display: inline-block; position: relative; width: 50%; }
#uh-area .pkgList li .pl_btn { display: block; width: 70.625%; max-width: 226px; margin-bottom: 4%; opacity: 0.3; }
#uh-area .pkgList li a.pl_btn { opacity: 1; }
#uh-area .pkgList li.ps4 .pl_btn { margin-left: 16.5%;}
#uh-area .pkgList li.ps3 .pl_btn { margin-left: 12.5%;}

#uh-area .pkgList li .cs { display: block; width: 70.625%; max-width: 226px; margin-bottom: 4%; opacity:0.3; }
#uh-area .pkgList li.ps4 .cs { margin-left: 16.5%;}
#uh-area .pkgList li.ps3 .cs { margin-left: 12.5%;}

#uh-area .dlc { margin: 0 auto 2%;}

@media screen and (min-width: 641px) {
#uh-area { margin: 0 -10px 1%; } 
#uh-area .uh-area-inner-wrap { width: 100%; padding: 0 3.0612%;}
#uh-area .uh-area-inner { width: 100%; max-width: 980px; margin: 0 auto; padding-bottom: 2%; } 

#uh-area .ttl { text-align: center; max-width: 900px; margin: 0 auto;}
#uh-area .pkgList { max-width: 900px; margin: 0 auto 0; }
#uh-area .pkgList li { max-width: 450px; }
#uh-area .pkgList li .pl_btn { width: 37.55556%; max-width: 169px; position: absolute;}
#uh-area .pkgList li.ps4 .btn_estore { top: 58%; left: 49.5%;}
#uh-area .pkgList li.ps4 .btn_pss { top: 76%; left: 49.5%;}
#uh-area .pkgList li.ps3 .btn_estore { top: 58%; left: 53.5%;}
#uh-area .pkgList li.ps3 .btn_pss { top: 76%; left: 53.5%;}
#uh-area .pkgList li.ps4 .pl_btn ,
#uh-area .pkgList li.ps3 .pl_btn { margin-left: 0;}

#uh-area .pkgList li .cs { width: 37.55556%; max-width: 169px; position: absolute;}
#uh-area .pkgList li.ps4 .cs { top: 76%; left: 49.5%;}
#uh-area .pkgList li.ps3 .cs { top: 76%; left: 53.5%;}
#uh-area .pkgList li.ps4 .cs ,
#uh-area .pkgList li.ps3 .cs { margin-left: 0;}

#uh-area .dlc { text-align: center; max-width: 1000px; margin: 0 -10px 2%; border: 1px solid #8f8f8f; }
#uh-area .dlc img { width: 100%; max-width: 900px;}
#uh-area .staff { text-align: center; max-width: 1000px; margin: 0 -10px 1%; background: #142950;}
#uh-area .staff img { width: 100%; max-width: 934px;}

}
@media screen and (min-width: 641px) and (max-width: 980px) {
#uh-area ,
#uh-area .uh-area-inner-wrap { background-size: 142.85715%;}
}