@charset "utf-8";
/* CSS Document */

body, header, footer, h1, div, p, section, article{
    margin:0;
    padding:0;
}
body{
    font:13px/1.3 "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    background:#000;
    color:#FFF;
}
section:last-child{
    margin-top:2em;
    width:100%;
}
a{
    text-decoration:none;
    color:#FFF;
}
img{
    width:100%;
    display:block;
}
#site_logo{
    width: 40%;
    max-width:293px;
    position:absolute;
    z-index:1000;
}
#picup-sites, .inner span, .inner a{
    display:block;
    overflow:hidden;
}
#loading{
    text-align:center;
    font-size:1.5em;
}
#link_for_mobile{
    display:block;
    overflow:hidden;
    position:relative;
}
#link_for_mobile:before{
    content:"+";
    border-radius:50px;
    background:#39C;
    display:block;
    position:absolute;
    z-index:3000;
    font-size:1.5em;
    padding-left:30px;
    width:55px;
    height:60px;
    top:calc( 50% - 40px );
    right:-40px;
    padding-left:15px;
    line-height:60px;
}
#fukidashi{
    display:none;
}

#fukidashi a{
    display:block;
    margin:10px 20px;
}
#fukidashi a p{
    display:block;
    font-size:1.2em;
}
#fukidashi a p.camp {
    font-size:2em;
}
#fukidashi a p:after{
    display:block;
    text-align:right;
    content:"..... つづく。";
    color: #ff0;
    font-weight:bold;
}
#fukidashi a p.camp:after{
    content:"詳細はコチラ>>";
}
#fukidashi a h2{
    display:none;
    color:#666;
    margin:1.5em 1.5em 0;
    font-size:2em;
    line-height:1.2;
    padding:0 0 0.5em;
    margin-bottom:0;
}
#fukidashi a h2.camp {
    margin: 0;
    padding: 0;
    display:inline-block;
    color:#ff007f;
    font-size:3em;
}

.content-slider{
    list-style: none outside none;
    padding-left: 0;
    margin: 0 auto;
}
.content-slider li{
    color:#eee;
    display:inline-block;
    vertical-align:top;
    background:#000;
    border-radius:3px;
    box-sizing:border-box;
    margin:5px;
    width:calc(100% - 5px);
}
.inner h3{
    height: 3.7em;
    line-height:1.2;
    overflow:hidden;
    padding:10px 5px 0;
    margin:0;
    font-weight:normal;
}
.inner a{
    padding:5px 10px 0;
    border:1px solid #222;
}
.inner a:after{
    content:"詳細表示 +";
    color:#ff0;
    opacity:0.6;
    text-align:right;
    display:block;
    margin-bottom:10px;
}
.inner a:hover:after{
    opacity:1;
}
.release-date{
    font: 16px/1 'Jura', sans-serif;
    color:#999;
    padding:0 0 10px 0;
    text-align:right;
    font-weight:bold;
}
.release-date:before{
    content:"+ Release";
    padding-right:0.2em;
}
.thum{
    position:relative;
    min-height:100px;
}
.thum img{
    opacity:0.6;
}

.thum:hover img{
    opacity:1;
}
.thum:before{
    content:"▲";
    color:#FFF;
    background:#000;
    padding:5px 5px 0;
    width:20px;
    height:30px;
    border-radius:5px;
    transform: rotate(90deg);
    font-size:20px;
    opacity:0.7;
    position:absolute;
    z-index:2000;
    top:35%;
    left:40%;
}
.actress{
    color: #999;
}
.actress:before{
    content:"出演：";
    padding-left:0.3em;
}

.content-slider li.movieplay{
    display:none;
    background:#C03;
    position:relative;
}
.content-slider li.movieplay .thum img{
    opacity:1;
}
.content-slider li.movieplay .release-date, .content-slider li.movieplay .actress{
    color:#FFF;
}
.content-slider li.movieplay .thum:before{
    display:none;
}
.content-slider li.movieplay:before{
    content:"再生中";
    font-size:1.2em;
    display:block;
    position:absolute;
    background:#000;
    padding:5px;
    top:15px;
    z-index:1000;
}
@media screen and (min-width: 400px) {
    .content-slider li.movieplay{
        display:inline-block;
    }
    #fukidashi{
        display:block;
    }
    .content-slider li{
        width:calc(100% / 2 - 10px);
    }
}
@media screen and (min-width: 640px) {
    #link_for_mobile:before{
        width:72px;
        height:90px;
        top: calc(50% - 45px);
        right:-45px;
        font-size:2em;
        line-height:90px;
        padding-left:18px;
    }

    .content-slider li{
        width:calc(100% / 3 - 10px);
    }
}

@media screen and (min-width: 1200px) {
    body{
        overflow:hidden;
    }
    #link_for_mobile{
    position:inherit;
    }
    #link_for_mobile {
        /*position: relative;*/
        width: auto;
        height: auto;
    }
    .link_for_movie:before {
        content: "";
        display: block;
        padding-top: 100%; /* 1:1 */
    }
    video{
        position:absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
    }

    section{
        position:absolute;
        z-index:2000;
        width:100%;
    }
    #fukidashi{
        width: 450px;
        top: 80px;
    }
    #bottom{
        width:96%;
        left:2%;
        bottom:30px;
    }
    .content-slider li{
        width:auto;
        margin:0;
    }
    #fukidashi a{
        background:url(../img/ukidashi.png) no-repeat;
        width:450px;
        height:447px;
        position:relative;
        padding:30px 80px 0 90px;
        margin-top:10px;
        display:block;
        overflow:hidden;
    }
    #fukidashi a p{
        color:#000;
        display:block;
        font-size:1.5em;
        line-height:1.4;
    }
    #fukidashi a p.camp {
        color: #484848;
        font-size:2.9em;
    }
    #fukidashi a h2{
        display:block;
    }
    #fukidashi a h2.camp{
        margin: .6em .6em 0;
        font-size: 5.2em;
    }
    #fukidashi a p:after{
        font-size:1.3em;
        color: #0364F9;
        display:inline-block;
        text-align:left;
        padding-left:0.5em;
    }
    #fukidashi a{
        -webkit-animation: buruburu 700ms ease-out;
        -moz-animation: buruburu 700ms ease-out;
    }
    @-webkit-keyframes buruburu {
        100%, 15%, 40%, 75% {
            -webkit-transform-origin:center center
        }
        0%{
            opacity:0;
            margin-top:400px;
            -webkit-transform:scale(0, 0);
            -moz-transform:scale(0, 0);
        }
        15% {
            opacity:0.25;
            margin-top:300px;
            -webkit-transform:scale(0.25, 0.25);
            -moz-transform:scale(0.25, 0.25);
        }
        40% {
            opacity:0.5;
            margin-top:200px;
            -webkit-transform:scale(0.5, 0.5);
            -moz-transform:scale(0.5, 0.5);
        }
        75% {
            opacity:0.75;
            margin-top:100px;
            -webkit-transform:scale(0.75, 0.75);
            -moz-transform:scale(0.75, 0.75);
        }
        100% {
            opacity:1;
            margin-top:0;
            -webkit-transform:scale(1, 1);
            -moz-transform:scale(1, 1);
        }
    }
}

@media screen and (min-width: 1400px) {
    #bottom{
        width:80%;
        left:10%;
    }
}