/*
    clearfix
*/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
    clear: both
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}


/*
    Module Reset
*/
#main {
    width: 100%!important;
}
.module--hot-trends {
    display: none;
}
#content-inner {
    width: 100%!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.module--tmpl{
    width: 100%;
}



/*
    Common
*/

#rank-area-1 h2,
#rank-area-2 h2,
#keywords h2{
    padding: 3px 0;
    padding-bottom: 0;
    border: none;
    margin: 0 20px 20px;
    height: 48px;
    font-size: 130%;
    position: relative;
}
#rank-area-1 h2 p,
#rank-area-2 h2 p,
#keywords h2 p{
    height: 42px;
    line-height: 42px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#rank-area-1 h2::before,
#rank-area-2 h2::before,
#keywords h2::before{
    content: "";
    position: absolute;
    width: 38px;
    height: 48px;
    top: 10px;
    left: -20px;
}
#rank-area-1 h2::after,
#rank-area-2 h2::after,
#keywords h2::after{
    content: "";
    position: absolute;
    width: 38px;
    height: 48px;
    top: 10px;
    right: -20px;
}



/*
    Main Containts
*/

#header-area{
    background: url(../images/bg-curtain.jpg) repeat;
    width: 100%;
    height: 240px;
    padding: 24px 0;
    margin-bottom: 20px;
}
    #header-area .title-area{
        height: 192px;
        background: #000 url(../images/bg-header-tns-moviepage.jpg) repeat-x center;
        background-size: auto 94%;
    }
        #header-area .title-area h1{
            background: url(../images/title-moviepage.png) no-repeat center;
            background-size: contain;
            max-width: 218px;
            margin: 0 auto;
            height: 100%;
            padding: 0;
            border: none;
            text-indent: -9999px;
        }
            #header-area .title-area h1 a{
                width: 100%;
                height: 100%;
                display: block;
            }


#movie-area{
    max-width: 1100px;
    margin: 0 auto 30px;
}
    #movie-area h2{
        border: none;
        text-align: center;
        font-size: 260%;
        padding: 0;
        margin-bottom: 0.5em;
        line-height: 1;
    }
        #movie-area h2 span{
            font-size: 50%;
            margin-bottom: 0.5em;
            display: block;
        }


    #movie-area .player-wrp2{
        max-width: 420px;
        margin: 0 auto;
        padding: 0 10px;
    }
        #movie-area .player-wrp2 .player-wrp{            
                position: relative;
                padding-bottom: 100%;
                overflow: hidden;
                height: 0;
            }
            #movie-area .player-wrp2 .player-wrp iframe{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

    #movie-area .nhk-snsbtn{
        margin: 20px 0 40px;
    }
        #movie-area .nhk-snsbtn .nhksns-guide{
            display: block !important;
            margin: 0 auto 0.3em !important;
            text-align: center;
        }
        #movie-area .nhk-snsbtn ul{
            text-align: center;
            display: block;
        }
        #movie-area .nhk-snsbtn li{
            padding: 0.5em;
            border: 1px solid #ddd;
            width: 230px;
            max-width: 45%;
            border-radius: 4px;
            margin: 0.3em !important;
        }
            #movie-area .nhk-snsbtn .nhksns-twitter{
                border-color: #55acee;
            }
            #movie-area .nhk-snsbtn .nhksns-facebook{
                border-color: #3b5998;
            }
                #movie-area .nhk-snsbtn li a{
                    display: block;
                }





#tns-area{
    padding: 20px 0;
    background: #eee;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
    #tns-area ul{
        overflow: hidden;
        letter-spacing: -.40em;
        text-align: center;
    }
    #tns-area li{
        width: 200px;
        height: 200px;
        overflow: hidden;
        position: relative;
        display: inline-block;
        letter-spacing: 0.1em;
        margin: 5px;
    }
    #tns-area li::before{
        content: "";
        display: block;
        width: 34px;
        height: 34px;
        position: absolute;
        bottom: 0;
        right: 0;
        border-radius: 6px 0 0 0;
        background: #df0101 url(../images/icn-movielink-wht.png) no-repeat center;
        background-size: 85%;
    }
    #tns-area li a{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        text-indent: -9999px;
        background: rgba(0,0,0,0);
        z-index: 1;
        top: 0;
        left: 0;
    }
        #tns-area li img{
            max-width: 100%;
            height: auto;
            border: 2px solid #df0101;
            border-radius: 3px;
        }


/*
Responsive
*/

@media screen and (max-width: 1090px){
    #tns-area{
    }
    #tns-area ul{
        width: 630px;
        margin: 0 auto;
    }
    #tns-area li{
    }
}
@media screen and (max-width: 600px){
    #content #main {
        padding: 0;
    }
    
    #header-area{
        height: 180px;
        padding: 20px 0;
    }
    #header-area .title-area{
        height: 140px;
    }
    #header-area .title-area h1{
        max-width: 50%;
    }
    
    #tns-area{
        padding: 10px 0;
    }
        #tns-area ul{
            text-align: left;
            width: 300px;
            margin: 0 auto;
        }
        #tns-area li{
            width: 140px;
            height: 140px;
        }
}