/* - - - - - - - */
/* ■ HEADER ■  */
/* - - - - - - - */


.scrollgress{
  z-index: 9999;/*他のposition指定しているエリアより前に出すためz-indexの数字を大きく*/
  top:60px!important;/* fixedで設置しているheaderの高さよりも下にバーを出す*/
}


h1{
    /* ▼改行を禁止した上で、はみ出る分量は「…」記号で省略 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background:#fff;
    border-bottom:1px solid #dfdfdf;
    color:#ccc;
    height:15px;
    margin:-50px 0px 0px 0px;
    padding1:2px 5px 2px 5px;
    text-align:left;
    z-index:1;
    font-size:9px;
    font-weight:normal;}
@media screen and (max-width: 960px) {
    h1{
        display1:none;}
}


.site-header{
    top:0;
    z-index:10010;
    position:fixed;
    overflow:hidden;
    width:100%;
    height:40px;
    height:60px;
    display1:block;
    border-bottom1:1px solid #efefef;
    border1:1px solid #f00;
    background:#f0f0f0;
    background:#111;
    background:#fff;
    box-shadow: 0px 0px 4px 0px #999;
    box-shadow: 0px 0px 4px 0px #ccc;
}
.site-header .site-title{
    display: block;
    text-align:center;
    border1:1px solid #f00;
    margin:20px 0px 0px 0px;
    color:#666;
    background1:#ccc;
    font-size:11px;
    font-weight:normal;}
.site-header .site-title a{
    cursor1:pointer;
    color:#7c7575;
    color:#aaa;
    color:#666;
    color:#333;
    text-decoration:none;
    font-size:13px;
    font-weight:normal;}
.site-header .site-title a:hover{
    color:#f36;}
.site-description{
    overflow:hidden;
    display: block;
    background:#f6f6f6;
    background:#FAEFCD;
    border-bottom1:1px solid #dfdfdf;
    color:#aaa;
    height1:25px;
    margin:92px 0px 0px 0px;
    padding:12px 0px;
    text-align:center;
    font-size:10px;
    font-weight:normal;}
.site-description span{
    display: block;
    color:#666;
    margin:0px auto;
    font-size:11px;
}
@media screen and (max-width: 960px) {
    .1site-description span{
        font-size:9px;
        animation: flowing 10s linear infinite;    /*アニメーション*/
        transform:translateX(100%);                /*最初の位置*/
    }
    @1keyframes flowing {
        100% {
            transform:translateX(-100%);    /*終了の位置*/
        }
    }
}


#header-contents:after{
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
}




/* - - - - - - - */
@media screen and (min-width: 960px) {
#header-contents{
        margin:0px auto;
        padding:0px 0px;
        width1:1080px;
        float:none;
        clear:both;
        display:block;}

}
/* - - - - - - - */











.search-form{
    border:0px solid #ff0;
    background1:#f0f0f0;
    background1:#fff;
    background:#e0e0e0;
    width1:140px;
    height:55px;
    margin:15px 0px 5px 0px;
    margin:110px 0px 5px 0px;
    padding:0px 0px 0px 0px;
    text-align:center;}
.search-form input[type="text"],
.search-form input[type="submit"],
.search-form input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
.search-form input[type="text"]::-webkit-search-decoration,
.search-form input[type="submit"]::-webkit-search-decoration,
.search-form input[type="button"]::-webkit-search-decoration {
  display: none;
}
.search-form input[type="text"]::focus,
.search-form input[type="submit"]::focus,
.search-form input[type="button"]::focus {
  outline-offset: -2px;
}
.search-form input.txt{
    float:left;
    font-size:9pt;
    border:1px solid #dfdfdf;
    border:1px solid #ccc;
    border-right:0px solid #fff;
    margin:0px 0px;
    padding:2px 2px;
    height:40px;
    width:178px;
    width:calc(85% - 2px);}
.search-form input.btn{
    float:right;
    color:#fff;
    background:#000;
    background:#7c7575;
    background:#333;
    display:block;
    font-size:12pt;
    border:1px solid #dfdfdf;
    padding:2px 2px;
    height:40px;
    width:180px;
    width:30%;
    width:calc(15% - 2px);}

.search-form input.txt{
    border:0px;
    background:#f9f9f9;
    font-size:10pt;
}
.search-form input.txt::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:#ccc;
}
.search-form input.txt:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#ccc;
}
.search-form input.txt::placeholder{ /* Others */
  color:#ccc;
}
.search-form input.btn:before{
    margin:0px 5px 0px 0px;
    font-family: 'Material Icons';
    content: "\E8B6";
    font-size:20pt;
    color:#f00;
}
.search-form input.btn{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size:10pt;
}


@media screen and (max-width: 960px) {
    .search-form{
        overflow: hidden;
        display:block;
        height:42px;
        margin:15px auto;
        margin:100px auto 15px auto;
        padding:5px 10px;
        text-align:center;}


}














.header-tag{
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    clear:both;
    float:none;}
.header-tag-tab{
    color1:#333333;
    margin:0px 0px 0px 0px;
    display:block;
    clear:both;
    float:none;}
.header-tag-tab ul{
    list-style-type:none;}
.header-tag-tab li{
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding:5px 14px 5px 0px;
    margin:10px 10px 10px 0px;
    float:left;}
.header-tag-tab li i{
    color:#3d84a8;
    color:#999;
    margin:0px 4px 0px 0px;}
.header-tag-tab li span{
    color:#3d84a8;
    color:#222;
    padding1:0px 0px 1px 0px;
    margin:0px 0px 0px 2px;
    font-size:9pt;}



.header-tag-box{
    float:none;
    clear:both;
    width:100%;
    width: calc(100% - 30px);
    display:block;
    text-align:left;
    padding:0px 0px 0px 0px;
    font-size:9pt;
    color:#666;}
.header-tag-box ul{
    float:none;
    clear:both;
    width:100%;
    display:block;
    margin: 0;
    padding: 0;
    list-style: none;}
.header-tag-box li{
    letter-spacing: normal;
    list-style-type:none;
    margin:0px 1px 4px 0px;
    padding:0px;
    line-height1:29pt;
    display:inline-block;
    float1:left;}
.header-tag-box li a{
    display:block;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#fff;
    border:1px solid #dfdfdf;
    color:#555;

    background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 47%, #f0f0f0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 47%,#f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 47%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */

    text-decoration:none;
    font-size:11px;
    margin:0px 2px 2px 0px;
    margin:0px;
    padding:10px 12px 10px 8px;}
.header-tag-box li a:hover{
    border:1px solid #999;
    color:#000;
    background:#fff;
    text-decoration:underline;}
.header-tag-box li i{
    color:#ccc;
    font-size:11px;
    margin:0px 2px 0px 0px;}


@media screen and (max-width: 960px) {
    .header-tag-box{
        width:100%;
    }
    .header-tag-box ul{
        display: flex;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    .header-tag-box li a{
        margin:0px 5px 5px 0px;
        white-space: nowrap;

    }

}














.header-series-box{
    float:none;
    clear:both;
    width:100%;
    width: calc(100% - 30px);
    display:block;
    text-align:left;
    padding:0px 0px 0px 0px;
    font-size:9pt;
    color:#666;}
.header-series-box ul{
    float:none;
    clear:both;
    width:100%;
    display:block;
    margin: 0;
    padding: 0;
    list-style: none;}
.header-series-box li{
    letter-spacing: normal;
    list-style-type:none;
    margin:0px 1px 4px 0px;
    padding:0px;
    line-height1:29pt;
    display:inline-block;
    float1:left;}
.header-series-box li a{
    display:block;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#fff;
    border:1px solid #dfdfdf;
    color:#555;
    background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 47%, #f0f0f0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 47%,#f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 47%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
    text-decoration:none;
    font-size:11px;
    margin:0px 2px 2px 0px;
    margin:0px;
    padding:10px 12px 10px 8px;}
.header-series-box li i{
    color:#ccc;
    font-size:11px;
    margin:0px 2px 0px 0px;}









.pickup-actress-tab{
    color1:#333333;
    margin:0px 0px 0px 0px;
    display:block;
    clear:both;
    float:none;}
.pickup-actress-tab ul{
    list-style-type:none;}
.pickup-actress-tab li{
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding:5px 14px 5px 0px;
    margin:10px 10px 10px 0px;
    float:left;}
.pickup-actress-tab li i{
    color:#3d84a8;
    color:#999;
    margin:0px 4px 0px 0px;}
.pickup-actress-tab li span{
    color:#3d84a8;
    color:#222;
    padding1:0px 0px 1px 0px;
    margin:0px 0px 0px 2px;
    font-size:9pt;}







.pickup-actress{
    border-bottom1:1px solid #ccc;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
}
.pickup-actress ul{
    margin:0px 10px;
    float:none;
    clear:both;
    list-style-type:none;
}
.pickup-actress li{
    padding:4px 0px;
    text-align:left;
    float:left;
    width:25%;
    width:20%;
}
.pickup-actress li a{
    font-size:9pt;
}
.pickup-actress .list1 li a{
    color:#f99;
}
.pickup-actress .list1 li a i{
    color:#f99;
}
.pickup-actress .list1 li a:hover{
    color:#f66;
}
.pickup-actress .list2 li a{
    color:#f69;
}
.pickup-actress .list2 li a i{
    color:#f99;
}
.pickup-actress .list2 li a:hover{
    color:#f36;
}

.pickup-actress i.fa{
    margin:0px 3px 0px 0px;
    font-size:9pt;
}
@media screen and (max-width: 600px) {
    .pickup-actress li{
        text-align:left;
        float:left;
        width:33%;
    }
}







/* -- actress-scroll-box -- */
.actress-scroll-box{
    width:calc(100% - 30px);
    width:calc(100% - 15px);
    color:#999;
    box-shadow1: 0 0 4px #dfdfdf;
    box-shadow1: 0 0 4px #ccc;
    box-shadow1: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-top-right-radius1: 0px;
    border-bottom-right-radius1:  0px;
    float:none;
    display:block;
    background:#fff;
    border:1px solid #fff;
    border1:1px solid #f00;
    padding:15px 0px 30px 0px;
    margin:15px 0px 30px 15px;

    border:1px solid #dfdfdf;
    border:2px solid #ccc;
    border:2px solid #dfdfdf;
    border-right1:1px solid #fff;
    display:block;
    float:none;
    clear:both;
    width:calc(100% - 335px);
    margin:10px 15px 30px 320px;}

@media screen and (max-width: 600px) {
    .actress-scroll-box{
        box-shadow1: 0 0 4px #dfdfdf;
        border-radius: 15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-top-right-radius1: 0px;
        border-bottom-right-radius1:  0px;
        width:80%;
        width:calc(100% - 15px);
        float:none;
        display:block;
        background:#fff;
        border:1px solid #fff;
        padding:15px 0px 15px 0px;
        margin:15px auto 15px 15px;

    border:2px solid #ccc;
    border:2px solid #dfdfdf;

    box-shadow: 0 0 8px #ccc;
    border:1px solid #ccc;

    width:calc(100% - 34px);
    margin:15px 15px 15px 15px;}
}

.actress-scroll-title{
    position: relative;
    z-index:99;
    font-weight: normal;
    background1:#333;
    color:#666;
    color:#333;
    border1:1px solid #ccc;
    margin:-15px 0px 12px 15px;
    text-align:left;
    font-weight:bold;
    font-size:14pt;}
.actress-scroll-title span.material-icons{
    position: relative;
    z-index:9;
    color:#f36;
    margin:15px 5px 0px 0px;
    font-size:26pt;

    display: inline-block;
    background: linear-gradient(45deg, #FA8BFF 16%, #2BD2FF 57%, #2BFF88 90%);
    background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8));
    background: -webkit-linear-gradient(45deg, #FA8BFF 16%, #2BD2FF 57%, #2BFF88 90%);
    background: -webkit-linear-gradient(45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8));
    background-size: 300% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientEffect 1.5s infinite alternate;
}

@keyframes gradientEffect {
    from {background-position: left}
    to {background-position: right}
}

.actress-scroll-title .setumei{
    display:block;
    margin:-12px 0px 0px 40px;
    font-size:10px;
    color:#999;
    font-weight:normal;
}







.actress-scroll-box .scroll-area{
    width:100%;
    overflow: hidden;
}
.actress-scroll-box .scroll-area ul{
    float:none;
    clear:both;
    display:block;
    margin: 0px 0px 0px 5px;
    padding: 0;
    list-style: none;
    width:100%;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;}
.actress-scroll-box .scroll-area li{
    border1:1px solid #f00;
    flex-basis: 100%;
    flex: 0 0 25%;
    flex: 0 0 12%;
    background:#fff;
    overflow:hidden;
    letter-spacing: normal;
    list-style-type:none;
    margin:0px 0px 10px 0px;
    padding:35px 2px 0px 2px;
    display:inline-block;
    float1:left;}
@media screen and (max-width: 600px) {
    .actress-scroll-box .scroll-area li{
        flex: 0 0 40%;
        flex: 0 0 30%;
        flex: 0 0 25%;
        flex: 0 0 19%;
        padding:35px 2px 5px 2px;
        margin:0px 0px 0px 0px;
    }
}
.actress-scroll-box .scroll-area li a{
    display1:block;
    color:#555;
    text-decoration:none;
    font-size:11px;
    white-space: nowrap;}
.actress-scroll-box .scroll-area li a img{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    display:block;
    margin:0px 0px 5px 0px;
    width:100%;}
.actress-scroll-box .scroll-area li .image-wrap{
    margin:-8px 0px 5px 0px;
    position: relative;
    overflow: hidden;
    padding-top: 100%;
}
.actress-scroll-box .scroll-area li .image-wrap img{
    border:1px solid #dfdfdf;
    border-radius: 100%;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    padding:1px;
    background:#fff;
}
.actress-scroll-box .scroll-area li .image-wrap a:hover img{
    border1:3px solid #999;
    padding:0px;
    width: 100%;
    height: 100%;
}
.actress-scroll-box .scroll-area li .actress{
    margin:5px 0px 0px 0px;
}
.actress-scroll-box .scroll-area li .actress a{
    font-size:11px;
    color:#f36;}
.actress-ranking li{
    position: relative;
}


.actress-scroll-box .scroll-area li .rank_cnt{
    position: absolute;
    top:0px;
    left:0px;
}
.actress-scroll-box .scroll-area li .rank_cnt b{
    margin:-18px 0px 0px 0px;
    font-size:40pt;
    font-size:38pt;
    font-weight:normal;
    color:#ccc;
    float:left;
}
.actress-scroll-box .scroll-area li .r1 b{
    color:#fb0;
}
.actress-scroll-box .scroll-area li .r2 b{
    color:#999;
}
.actress-scroll-box .scroll-area li .r3 b{
    color:#d98;
}
.actress-scroll-box .scroll-area li .rank_cnt span{
    margin:9px 0px 0px 0px;
    font-size:14pt;
    color:#ccc;
    float:left;
}


