@charset "utf-8";

/* TOP BANNER
----------------------------------------------------------------------------- */
.top-banner{
    padding:0 10px;
    margin-bottom:30px;
}
.top-banner-slider{
    overflow:hidden;
    opacity: 0;
    transition: opacity .3s linear;
}
.top-banner-slider.slick-initialized{
    opacity: 1;
}
.top-banner-slider li{
    padding:0 10px;
}
.top-banner-slider li img{
    width:100%;
    max-width:700px !important;
    height:auto;
}

/* Controller */
.top-banner .btn-next,
.top-banner .btn-prev{
    position:absolute;
    z-index: 888;
    top:calc(50% - 25px);
    width:40px;
    height: 40px;
    background-color:rgba(255,255,255,0.8);
    font-size:15px;
}
.top-banner .btn-next{
    right:10px;
}
.top-banner .btn-prev{
    left:10px;
}
@media screen and (max-width:768px){
    .top-banner{
        padding:0;
        margin-bottom:10px;
    }
    .top-banner .btn-next,
    .top-banner .btn-prev{
        top:calc(50% - 20px);
        width:30px;
        height: 30px;
        font-size:13px;
    }
}

/* TOP SEARCH
----------------------------------------------------------------------------- */
.top-search{
    margin-bottom:20px;
    padding:10px 0px;
    text-align: center;
    vertical-align: middle;
    background-color:#f0f0f0;
    border-bottom:1px solid #ddd;
}
.top-search select,
.top-search input[type="text"]{
    width:auto;
    min-width:300px;
    display:inline-block;
    font-size:13px;
    height:50px;
    line-height: 50px;
    padding-top:0;
    padding-bottom: 0;
    margin-right: 0;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 3px 0px 0px 3px;
}
.top-search button{
    background-color:#333;
    color: #fff;
    position: absolute;
    width:50px;
    height:50px;
    line-height: 50px;
    font-size:18px;
    border-radius:0px 3px 3px 0px;
}
@media screen and (max-width:768px){
    .top-search{
        margin-bottom:10px;
    }
    .top-search select,
    .top-search input[type="text"]{
        min-width:100px;
        font-size:13px;
        height:35px;
        line-height: 35px;
        width: 240px;
    }
    .top-search button{
        width:35px;
        height:35px;
        line-height: 35px;
        font-size:16px;
    }
}

/* TOP RANKING
----------------------------------------------------------------------------- */
.top-ranking{
    
}
.top-ranking ul{
    padding:20px;
    padding-top:25px;
}
.top-ranking ul li{
    display: inline-block;
    float:left;
    width:calc(20% - 16px);
    margin: 0 20px 0 0;
    position:relative;
}
.top-ranking ul li a{
    text-decoration: none;
}
.top-ranking ul li a img{
    width:100%;
    max-width:147px;
    height:auto;
    display: block;
    margin:0 auto 10px;
}

.top-ranking ul li:nth-child(1) img{
    max-width:200px;
}

.top-ranking ul li:last-child{
    margin-right: 0;
}

.top-ranking ul li:nth-child(1)::before,
.top-ranking ul li:nth-child(2)::before,
.top-ranking ul li:nth-child(3)::before{
    content:"";
    width:100%;
    height:75.5px;
    background-size:auto 100%;
    background-repeat:no-repeat;
    background-position: center center;
    display: block;
    position:absolute;
    z-index:777;
    top:-30px;
    left:0;
}

.top-ranking ul li:nth-child(1)::before{
    background-image:url("/common/images/rank_01.png");
}
.top-ranking ul li:nth-child(2)::before{
    background-image:url("/common/images/rank_02.png");
}
.top-ranking ul li:nth-child(3)::before{
    background-image:url("/common/images/rank_03.png");
}

@media screen and (max-width:768px){
    .top-ranking ul{
        padding:0 20px 20px;
    }
    .top-ranking ul li{
        display: block;
        float:none;
        width:100%;
        margin: 0 0 20px;
        clear:both;
    }
    .top-ranking ul li a{
        
    }
    .top-ranking ul li a img{
        width:100%;
        max-width:60px;
        margin:0 10px 15px 0;
        float:left;
    }

    .top-ranking ul li:nth-child(1) img{
        max-width:80px;
    }

    .top-ranking ul li:nth-child(1)::before,
    .top-ranking ul li:nth-child(2)::before,
    .top-ranking ul li:nth-child(3)::before{
        content:"";
        height:40px;
        background-size:auto 100%;
        background-repeat:no-repeat;
        background-position: left center;
        display: block;
        position:absolute;
        z-index:777;
        top:-10px;
        left:-15px;
    }

    .top-ranking ul li:nth-child(1)::before{
        width:80px;
    }
    .top-ranking ul li:nth-child(2)::before{
        width:60px;
    }
    .top-ranking ul li:nth-child(3)::before{
        width:60px;
    }
    
    .top-ranking ul li .list-normal-ttl{
        text-align: left !important;
    }
}

/* TOP ABOUT
----------------------------------------------------------------------------- */
.sp-only.more {
    background: #ebebeb;
    padding: 9px;
    text-align: center;
    margin-bottom: 20px;
}
.sp-only.more a{
    text-decoration: none;
}