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

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

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

/* ==================== [ new face ] */
.sect-newface {
    margin: 0 0 40px;
    text-align: center;
}
.sect-newface h1 {
    margin: 0 0 5px;
    font-size: 1.75em;
    font-family: Open Sans;
}
.sect-newface h1::before,
.sect-newface h1::after {
    content: '★';
    color: #f3f;
}
.sect-newface p img {
    margin-bottom: 5px;
}

/* ==================== [ pickup list ] */
.sect-pickup-list h1 {
    padding: 0 0 10px;
    line-height: 1;
    border-bottom: 3px #f3f solid;
    font-size: 1.5em;
}
.sect-pickup-list ul {
    width: 972px;
    margin: 0 0 40px -11px;
    overflow: hidden;
}
.sect-pickup-list ul li {
    position: relative;
    float: left;
    width: 221px;
    height: 269px;
    margin: 20px 11px 0 11px;
    overflow: hidden;
}
.sect-pickup-list ul li a img {
    position: absolute;
    top: 0;
    left: 0;
}
.sect-pickup-list ul li a p {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 191px;
    padding: 10px 16px;
    color: #fff;
    background: url(/images/common/bg_opacity_pnk.png);
    font-size: 1.5em;
}
.sect-pickup-list ul li a p small {
    display: block;
    margin: -5px 0 0;
    text-transform: uppercase;
    font-size: .5em;
}
/* ==================== [ pickup detail ] */
/* ===== nav-pickup */
#nav-pickup {
    position: relative;
    width: 100%;
    min-width: 980px;
    height: 60px;
    background: #000;
    overflow: hidden;
    z-index: 100;
}
#nav-pickup div {
    width: 950px;
    height: 60px;
    margin: 0 auto;
    padding: 0 15px;
    overflow: hidden;
}
#nav-pickup div p {
    float: left;
    color: #fff;
    line-height: 60px;
    font-size: 1.875em;
    font-weight: bold;
}
#nav-pickup div p::before {
    content: '★';
    color: #f3f;
}
#nav-pickup div p small {
    display: inline-block;
    margin-left: 15px;
    color: #aaa;
    text-transform: uppercase;
    font-size: .4em;
    font-weight: normal;
    font-family: Open Sans;
    vertical-align: middle;
}
#nav-pickup div ul {
    float: right;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
}
#nav-pickup div ul li {
    float: left;
    position: relative;
    margin-left: 36px;
}
#nav-pickup div ul li a {
    color: #fff;
}
#nav-pickup div ul li a:hover,
#nav-pickup div ul li.active a {
    font-weight: bold;
    text-decoration: none;
}
#nav-pickup div ul li.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -4px;
    display: inline-block;
    width: 0;
    height: 0;
    border-color: #f3f transparent transparent transparent;
    border-width: 8px 4px;
    border-style: solid;
}
[id^='sect-'] {
    padding-top: 60px;
    margin-top: -60px !important;
}
/* ===== head-pickup */
#head-pickup {
    min-width: 980px;
    height: 650px;
    margin: 0 0 40px;
    overflow: hidden;
}
#head-pickup #sect-profile {
    width: 433px;
    height: 650px;
    margin: 0 auto;
    padding-left: 517px;
}
#sect-profile div {
    height: 600px;
    padding: 25px 30px;
    background: url(/images/pickup_gal/bg_profile.png);
}
#sect-profile div h1 {
    margin: 0 0 20px;
}
#sect-profile div dl {
    margin: 0 0 15px;
    font-size: .875em;
    overflow: hidden;
}
#sect-profile div dl dt {
    float: left;
    width: 100px;
}
#sect-profile div dl dd::before {
    content: '：';
}
#sect-profile div .bx-relation {
    margin: 0 0 25px;
    overflow: hidden;
}
#sect-profile div .bx-relation li {
    float: left;
    margin-right: 20px;
}
#sect-profile div .bx-movie h1 {
    margin: 0 0 10px;
    font-size: 1.125em;
}
#sect-profile div .bx-movie h1::before {
    content: '\2764';
    display: inline-block;
    margin-right: 5px;
    color: #f3f;
}
#sect-profile div .bx-movie .movie {
    padding: 0;
    width: 371px;
    height: 213px;
    border: 2px #000 solid;
}
#sect-profile div .bx-movie .movie a {
    display: block;
    position: relative;
}
#sect-profile div .bx-movie .movie a::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -31px 0 0 -52px;
    width: 104px;
    height: 63px;
    background: url(/images/common/btn_play.png) -144px 0 no-repeat;
}
#sect-profile div .bx-movie .movie a:hover {
    opacity: 0.8;
}
/* ===== capt-pickup */
#wrap-pickup {
    margin-bottom: 30px;
}
h1.capt-pickup {
    position: relative;
    background: #fd249b url(/images/common/bg_leopard_pnk.png) 50% 50%;
    color: #fff;
}
h1.capt-pickup small {
    display: block;
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 16px;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    letter-spacing: normal;
    line-height: 44px;
}
/* ===== new arrival */
#sect-new-arrival .bx-package {
    margin: 0 0 60px;
    text-align: center;
}

/* ===== sample movie */
.pickup-sampleMovie {
    background: #000;
    margin: 0px 0 0 -8px !important;
    padding: 0;
    display: block;
    width: 570px;
    height: 460px;
    overflow: hidden !important;
    z-index: 5;
    top: -10px;
    left: -3px;
    position: absolute;
}
#sect-movie .bx-movie {
    position: relative;
    margin: 20px 0;
    height: 360px;
    border: #ccc 1px solid;
    overflow: hidden;
}
#sect-movie .bx-movie .area-movie {
    position: relative;
    top: 0;
    left: 0;
    width: 560px;
    height: 360px;
}
.area-movie a:before {
    content: '';
    left: 50%;
    top: 50%;
    display: block;
    z-index: 2;
    position: absolute;
    margin: -45px 0 0 -72px;
    width: 144px;
    height: 90px;
    cursor: pointer;
    opacity: 1;
    background: url(/images/common/btn_play.png) 0 0 no-repeat;
}
#sect-movie .bx-movie .area-select {
    position: absolute;
    top: 0;
    right: 0px;
    width: 387px;
    height: 360px;
    border-left: #ccc 1px solid;
    overflow: auto;
    z-index: 5;
}
#sect-movie .bx-movie .area-select li {
    border-bottom: #ccc 1px solid;
    font-size: .8125em;
    display: block;
    padding: 10px;
    color: #000;
    overflow: hidden;
    background: #fff;
}
#sect-movie .bx-movie .area-select li img {
    float: left;
    margin-right: 10px;
}
#sect-movie .bx-movie .area-select li.active,
#sect-movie .bx-movie .area-select li:hover {
    background: #f0f0f0;
    cursor: pointer;
}
#sect-movie .bx-title::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    clear:both;
}
#sect-movie .bx-title .title {
    float: left;
    width: 675px;
    min-height: 50px;
    padding-left: 85px;
    background: url(/images/pickup_gal/ico_playnow.png) 0 0 no-repeat;
    font-weight: bold;
    font-size: 1.25em;
    line-height: 1.2;
}
#sect-movie .bx-title .title .sub {
    font-weight: normal;
    font-size: .75em;
}
#sect-movie .bx-title a {
    display: block;
    float: right;
    padding: 15px 20px;
    color: #fff;
    background: #09f;
    border-color: #09f;
    -webkit-text-shadow: 1px 1px 0 #005d9f;
    text-shadow: 1px 1px 0 #005d9f;
    line-height: 1;
}
#sect-movie .bx-title a::before {
    content: url(../images/common/ico_btn_arrow.png);
}
#sect-movie .bx-title a:hover {
    background: #1af;
    border-color: #1af;
}

/* ===== pickup-link */
.bx-pickup-link {
    margin: 40px 0;
    text-align: center;
    font-size: .875em;
    font-weight: bold;
}
.bx-pickup-link a::after {
    content: url(/images/common/ico_arrow.png);
    display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 10px;
}

#sample-movie-content .sample-movie-content__button {
    display: table;
    height: auto;
    width: 100%;
    text-align: center;
}
#sample-movie-content .sample-movie-content__button__anchor {
    display: table-cell;
    vertical-align: middle;
}
#sample-movie-content .sample-movie-content__button__inner {
    margin: 5px auto;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    background-color: #555;
}
#sample-movie-content .sample-movie-content__button__inner__text {
    color: #fff;
}
#sample-movie-content .sample-movie-content__button .sample-movie-content__button__anchor,
#sample-movie-content .sample-movie-content__button .sample-movie-content__button__anchor:visited {
    text-decoration: none;
}