@charset "utf-8";

/*============================
       DMM Style Sheet
==============================*/


/* ==================================================================== [ #page ] */
#page {
    min-width: 730px;
    padding-bottom: 30px;
}
#page,
table td {
    line-height: 1.7;
}
.rst * {
    margin: 0;
    padding: 0;
    list-style: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#page.page-color-w { background-color: #fff; }
#page.page-color-b { background-color: #222; }
/* ==================================================================== [ #head ] */
#head { margin-bottom: 30px; }
#head .bx-img { height: 300px; }
#head > p.bx-txt {
    width: 97%;
    margin: 0 auto;
    padding-top: 15px;
}
#head > p.bx-txt.txt-color {
    font-size: 16px;
    font-weight: bold;
}
#head > p.bx-txt + p.bx-txt { padding-top: 6px; }
/* ==================================================================== [ #content ] */
#content {
    width: 97%;
    margin: 0 auto;
    padding-bottom: 30px;
}
#content .capt {
    margin-bottom: 20px;
    padding: 8px 15px;
    border-radius: 6px 6px 0 0;
    color: #fff;
    letter-spacing: 0.2em;
    font-size: 18px;
    font-weight: bold;
}
#content .area-pt-la { margin-bottom: 50px; }
#content .area-pt-me,
#content .area-pt-sm { margin-bottom: 30px; }
#content div[class^="area-pt"] a:hover > img { opacity: 0.8; }
/* ==================================================================== [ .area-pt-la ] */
#content .area-pt-la {
    padding: 20px;
    border-radius: 6px;
}
#content .area-pt-la .cont-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 8px #b8b8b8;
    box-shadow: 0px 0px 8px #b8b8b8;
}
#content .area-pt-la .txt-slogan {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
}
/* ========================= .pack-wrap */
#content .area-pt-la .pack-wrap { margin-bottom: 20px; }
#content .area-pt-la .pack-wrap img[src$="pl.jpg"] {
    float: left;
    margin-right: 20px;
    -ms-filter: "alpha(opacity=0)";
    opacity: 0;
}
#content .area-pt-la .pack-wrap a + div { overflow: hidden; }
#content .area-pt-la .pack-wrap .title-work {
    line-height: 1.4;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
}
/* ========================= .pack-wrap .bx-btlist */
#content .area-pt-la .pack-wrap ul.bx-btlist { width: 100%; }
#content .area-pt-la .pack-wrap ul.bx-btlist li {
    float: left;
    width: 33%;
    padding: 5px;
}
#content .area-pt-la .pack-wrap ul.bx-btlist li > a {
    display: block;
    height: 52px;
    border-top: #dedede 1px solid;
    border-left: #c4c4c4 1px solid;
    border-right: #c4c4c4 1px solid;
    border-bottom: #9e9e9e 1px solid;
    border-radius: 3px;
    background: #e8e8e8 url(http://p.dmm.com/p/dc/feature/template/pcgame/brand/bg_btlist.gif) repeat-x left top;
}
#content .area-pt-la .pack-wrap ul.bx-btlist li > a:hover { opacity: 0.8; }
#content .area-pt-la .pack-wrap ul.bx-btlist li > a > span {
    display: block;
    width: 73px;
    height: 52px;
    margin: 0 auto;
    background: url(http://p.dmm.com/p/dc/feature/template/pcgame/brand/ico_btlist.png) no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#content .area-pt-la .pack-wrap ul.bx-btlist li.bt-chara > a > span { background-position: center 4px; }
#content .area-pt-la .pack-wrap ul.bx-btlist li.bt-trial > a > span { background-position: center -56px; }
#content .area-pt-la .pack-wrap ul.bx-btlist li.bt-movie > a > span { background-position: center -116px; }
/* ========================= .pack-wrap .bx-basket */
#content .area-pt-la .pack-wrap .bx-basket {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: #dddddd 1px solid;
    border-radius: 3px;
}
#content .area-pt-la .pack-wrap .bx-basket li { text-align: center; }
#content .area-pt-la .pack-wrap .bx-basket li.txt-price {
    color: #c00;
    font-size: 16px;
    font-weight: bold;
}
#content .area-pt-la .pack-wrap .bx-basket li.txt-price .tx-lt {
    font-size: 14px !important;
    color: #555 !important;
    text-decoration: line-through;
}
#content .area-pt-la .pack-wrap .bx-basket li + li { margin-top: 3px; }
#content .area-pt-la .pack-wrap .bx-basket li.txt-spec {
    position: relative;
    margin-top: 6px;
}
#content .area-pt-la .pack-wrap .bx-basket li.txt-spec > span { color: #005fc0; }
#content .area-pt-la .pack-wrap .bx-basket li.txt-spec > span:hover { cursor: pointer; }
#content .area-pt-la .pack-wrap .bx-basket li.txt-spec > span:before {
    content: "▼";
    display: inline-block;
    margin-right: 3px;
}
#content .area-pt-la .pack-wrap .bx-basket li.txt-spec > span.on:before {
    content: "▲";
    display: inline-block;
    margin-right: 3px;
}
#content .area-pt-la .pack-wrap .bx-basket .bx-spec {
    display: none;
    margin-top: 15px;
    padding: 10px;
    background-color: #eee;
}
#content .area-pt-la .pack-wrap .bx-basket .bx-spec dt,
#content .area-pt-la .pack-wrap .bx-basket .bx-spec dd { text-align: left; }
#content .area-pt-la .pack-wrap .bx-basket .bx-spec dt~dt { margin-top: 6px; }
#content .area-pt-la .pack-wrap .bx-basket .bx-spec dt { font-weight: bold; }
/* ========================= .intro-wrap */
#content .area-pt-la .intro-wrap { font-size: 14px; }
#content .area-pt-la .intro-wrap + .intro-wrap { margin-top: 30px; }
#content .area-pt-la .intro-wrap p.item-capt {
    margin-top: 0;
    font-size: 18px;
    font-weight: bold;
}
#content .area-pt-la .intro-wrap p { margin-top: 1em; }
#content .area-pt-la .intro-wrap .movie-st {
    float: right;
    margin: 0 0 20px 20px;
}
#content .area-pt-la .intro-wrap ul.bx-sample { margin-top: 15px; }
#content .area-pt-la .intro-wrap ul.bx-sample li {
    float: left;
    width: 25%;
    text-align: center;
}
#content .area-pt-la .intro-wrap ul.bx-sample li + li + li + li + li { margin-top: 10px; }
/* ========================= .workinfo-wrap */
#content .area-pt-la table.workinfo-wrap {
    width: 100%;
    margin-top: 30px;
    background-color: #eee;
}
#content .area-pt-la table.workinfo-wrap th {
    width: 20%;
    background-color: #ddd;
    text-align: right;
}
#content .area-pt-la table.workinfo-wrap tr + tr th { border-top: #eee 1px solid; }
#content .area-pt-la table.workinfo-wrap th,
#content .area-pt-la table.workinfo-wrap td {
    padding: 10px;
    vertical-align: top;
}
#content .area-pt-la table.workinfo-wrap td { width: 30%; }
/* ==================================================================== [ .area-pt-me ] */
#page.page-color-w #content .area-pt-me .bx-cont {
    padding: 15px 15px 0;
    background: url(http://p.dmm.com/p/dc/feature/template/pcgame/brand/bg_plcontent_w.gif) repeat-x left top;
}
#content .area-pt-me .bx-cont + .bx-cont { margin-top: 30px; }
#content .area-pt-me a.package {
    float: left;
    display: block;
    width: 145px;
    margin-right: 20px;
    padding: 10px 0;
    border: #ddd 1px solid;
    border-radius: 6px;
    background-color: #fff;
    text-align: center;
}
#content .area-pt-me a.package > img {
    display: block;
    margin: 0 auto 6px;
}
#content .area-pt-me dl.intro { overflow: hidden; }
#content .area-pt-me dl.intro dt {
    margin-bottom: 10px;
    padding: 3px 0 3px 10px;
    border-width: 0 0 0 5px;
    border-style: solid;
}
#content .area-pt-me dl.intro dt span.tx10 {
    padding-left: 2px;
    font-size: 11px !important;
    font-weight: normal;
}
#content .area-pt-me dl.intro dd p.price {
    margin-bottom: 10px;
    font-size: 14px;
}
#content .area-pt-me dl.intro dd p.price + ul { margin-bottom: 10px; }
#content .area-pt-me dl.intro dd p.price + ul li { display: inline; }
#content .area-pt-me dl.intro dd p.price + ul li + li { padding-left: 6px; }
#content .area-pt-me dl.intro dd p.txt-os { margin-top: 10px; }
/* ==================================================================== [ .area-pt-sm ] */
#content .area-pt-sm td {
    padding: 20px 10px 20px 0;
    border-bottom: #ddd 1px solid;
}
#content .area-pt-sm td + td { padding: 20px 0 20px 10px; }
#content .area-pt-sm tr:first-child td { padding-top: 0; }
#content .area-pt-sm a.package {
    float: left;
    display: block;
    width: 110px;
    margin-right: 20px;
    padding: 10px 0;
    border: #ddd 1px solid;
    border-radius: 6px;
    background-color: #fff;
    text-align: center;
}
#content .area-pt-sm a.package > img {
    display: block;
    margin: 0 auto 6px;
}
#content .area-pt-sm dl.intro { overflow: hidden; }
#content .area-pt-sm dl.intro dt {
    margin-bottom: 10px;
    padding: 3px 0 3px 10px;
    border-width: 0 0 0 5px;
    border-style: solid;
}
#content .area-pt-sm dl.intro dt span.tx10 {
    padding-left: 2px;
    font-size: 11px !important;
    font-weight: normal;
}
#content .area-pt-sm dl.intro dd p.price {
    margin-bottom: 6px;
    font-size: 14px;
}
#content .area-pt-sm dl.intro dd p.txt-os { margin-top: 6px; }
/* ==================================================================== [ .tx-attention ] */
#content .tx-attention {
    margin-bottom: 20px;
    text-align: right;
}
/* ==================================================================== [ .more-list ] */
#content .more-list {
    border-radius: 6px;
    text-align: center;
    font-size: 18px;
}
#content .more-list a {
    display: block;
    padding: 8px;
}
#content .more-list a:hover { opacity: 0.8; }
/* ==================================================================== [ #f-navi ] */
#f-navi {
    padding-right: 20px; 
    text-align: right;
}
/* ==================================================================== [ .bnr468 ] */
.bnr468 {
    margin-top: 20px; 
    text-align: center;
}






/* ==================================================================== [ .area-gameinfo ] */
#content .area-gameinfo .cont-wrap02 {
    margin-top: 50px;
}
.area-gameinfo .title-work {
    line-height: 1.4;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
}
#content .area-gameinfo {
    overflow: hidden;
}
#content .area-gameinfo .pack-wrap img[src$="pl.jpg"] {
    display: block;
    max-width: 400px;
}
#content .area-gameinfo .gameinfo-wrap {
    float: right;
    width: 51%;
}
#content .area-gameinfo .gameinfo-wrap .movie-st {
    width: 320px;
    margin: 0 auto 5px;
}
#content .area-gameinfo .gameinfo-wrap .movie-st p {
    background: #eee url(http://p.dmm.com/p/dc/feature/template/pcgame/brand/ico_movienone.png) no-repeat 50% 50%;
    width: 320px;
    height: 285px;
}
#content .area-gameinfo .gameinfo-wrap .movie-st p span {
    position: relative;
    z-index: -1;
}
#content .area-gameinfo .gameinfo-wrap ul.bx-btlist li {
    float: left;
    width: 50%;
    padding: 5px;
}
#content .area-gameinfo .gameinfo-wrap ul.list-single {
    width: 50%;
    margin: 0 auto;
}
#content .area-gameinfo .gameinfo-wrap ul.list-single li {
    width: 100%;
}
#content .area-gameinfo .intro-wrap ul.bx-sample {
    overflow: hidden;
}
#content .area-gameinfo .intro-wrap ul.bx-sample li {
}
#content .area-gameinfo .intro-wrap ul.bx-sample li img {
    width: 95%;
}
#content .area-gameinfo .workinfo-wrap {
     margin-bottom: 20px;
}
#content .area-gameinfo .intro-wrap [class^="txt-gamedetail"] {
    background-color: #fffcdb;
    margin-top: 30px;
    margin-bottom: 15px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
#content .area-gameinfo .intro-wrap [class^="txt-gamedetail"] > span {
    display: block;
    padding: 8px;
    color: #005fc0;
}
#content .area-gameinfo .intro-wrap [class^="txt-gamedetail"] > span:hover { cursor: pointer; }
#content .area-gameinfo .intro-wrap [class^="txt-gamedetail"] > span:before {
    content: "▼";
    display: inline-block;
    margin-right: 3px;
}
#content .area-gameinfo .intro-wrap [class^="txt-gamedetail"] > span.on:before {
    content: "▲";
    display: inline-block;
    margin-right: 3px;
}
#content .area-gameinfo .intro-wrap [class^="bx-gamedetail"] {
    display: none;
}

/* ==================================================================== [ .area-otherinfo ] */
#content .area-otherinfo a.package {
    width: 120px;
    padding: 0;
}
#content .area-otherinfo a.package > img {
    width: 100px;
}
#content .area-otherinfo dl.intro dt {
    border: none;
    padding-left: 0;
}
#content .area-otherinfo dl.intro dd ul {
    margin-bottom: 10px;
}
#content .area-otherinfo dl.intro dd ul li {
    display: inline;
}
#content .area-otherinfo dl.intro dd ul li + li {
    padding-left: 6px;
}
#content .area-otherinfo dl.intro dd p {
    margin-top: 10px;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
}
#content .area-otherinfo dl.intro dd p a {
    color: #005fc0;
}