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

  kira☆kira  / list.css / www.kirakira-av.com

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


/* ==================== [ WORKS ] */
/* ===== package-list */
ul.area-works-package {
    width: 972px;
    margin: 0 0 0 -11px;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
ul.area-works-package li.bx-works {
    float: left;
    width: 221px;
    margin: 0 11px 12px;
}
ul.area-works-package li.bx-works a div.package {
    position: relative;
    width: 221px;
    height: 309px;
    margin-bottom: 10px;
    overflow: hidden;
}
ul.area-works-package li.bx-works a div.package span.ttl {
    position: absolute;
    z-index: 1;
    left: 0;
    display: block;
    width: 199px;
    padding: 11px;
    background: url(/images/common/bg_opacity_pnk.png);
    color: #fff;
}
ul.area-works-package li.bx-works span.none{
    display:block;
    height: 40px;
}
/* ===== package + text list */
ul.area-works-list {
    margin: 0 0 30px;
}
ul.area-works-list li.bx-works {
    margin: 0 0 -1px;
    padding: 20px 0;
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    overflow: hidden;
}
ul.area-works-list li.bx-works:hover {
    background-color: #efefef;
    cursor: pointer;
}
ul.area-works-list li.bx-works a {
    text-decoration: none;
}
ul.area-works-list li.bx-works .package {
    float: left;
    margin-right: 20px;
}
ul.area-works-list li.bx-works p {
    margin: 0 0 10px;
    font-size:1.375em ;
    font-weight: bold;
}
ul.area-works-list li.bx-works p small {
    display: block;
    font-size: .6em;
    font-weight: normal;
}
/* ===== actress name & data */
.sect-detail .bx-data dd ul li,
li.bx-works ul.actress li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    margin: 0 5px 10px 0;
    border: 1px solid #ccc;
    border-radius: 15px;
    background-color: #e9e9e9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: .875em;  
}
.sect-detail .bx-data dd ul li a,
li.bx-works ul.actress li a {
    display: inline-block;
    height: 28px;
    margin: 0 -12px;
    padding: 0 11px;
    color: #000;
    text-decoration: none;
    background-color: #fff;
    border-radius: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.sect-detail .bx-data dd > a {
    display: inline-block;
    height: 30px;
    padding: 0 12px;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 15px;
    line-height: 30px;
}
.sect-detail .bx-data dd a:hover,
li.bx-works ul.actress li a:hover {
    background: #fb2af2;
    color: #fff;
    text-decoration: none;
} 

/* ==================== [ area-console ] */
.area-console {
    margin:0 0 30px;
    overflow: hidden;
}
.area-console p {
    margin: 0 0 10px;
}
/* ===== list-format */
.area-console .bx-format {
    float: left;
}
.area-console .bx-format dt {
    float: left;
    font-weight: bold;
    margin-right: 5px;
    line-height: 30px;
}
.area-console .bx-format dd {
    float: left;
    width: 27px;
    height: 27px;
    margin-right: 10px;
}
.area-console .bx-format dd a {
    display: block;
    width: 27px;
    height: 27px;
    background: #fff url(/images/works/parts/ico_format.png) no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: #aaa 1px solid;
    border-radius: 3px;
}
.area-console .bx-format dd.type-package a {
    background-position: 0 -27px;
}
.area-console .bx-format dd.type-list a {
    background-position: 0 0;
}
.area-console .bx-format dd a:hover,
.area-console .bx-format dd.active a {
    background-color: #ff0;
}

/* ===== pagination */
.area-console .bx-pagination {
    float: right;
    margin-right: -10px;
}
.area-console .bx-pagination li {
    float: left;
    margin-right: 10px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border: #aaa 1px solid;
    text-align: center;
    font-family: Inconsolata;
    font-size: 1.2em;
}
.area-console .bx-pagination li a {
    display: block;
    width: 28px;
    height: 28px;
}
.area-console .bx-pagination li.tx-dot {
    border: none;
}
.area-console .bx-pagination li.btn-next,
.area-console .bx-pagination li.btn-prev {
    width: 70px;
}
.area-console .bx-pagination li.btn-next a,
.area-console .bx-pagination li.btn-prev a {
    width: 70px;
}
.area-console .bx-pagination li.btn-prev .btn::before,
.area-console .bx-pagination li.btn-next .btn::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
}
.area-console .bx-pagination li.btn-prev .btn::before {
    margin-right: 5px;
    border-color: transparent #000 transparent transparent;
}
.area-console .bx-pagination li.btn-next .btn::after {
    margin-left: 5px;
    border-color: transparent transparent transparent #000;
}
.area-console .bx-pagination li a {
    color: #000;
}
.area-console .bx-pagination li a:hover {
    background-color: #ff0;
    text-decoration: none;
}
.area-console .bx-pagination li.active {
    font-weight: bold;
    background-color: #ff0;
}
.area-console .bx-pagination li.disabled {
    background-color: #eee;
}