@charset "utf-8";

/*-- animationSet --*/

.hide{
    opacity: 0;
}
.moreAnimationKey99,
.moreAnimationKey0{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-fill-mode: forwards;
}
.moreAnimationKey1{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .1s;
    animation-fill-mode: forwards;
}
.moreAnimationKey2{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
}
.moreAnimationKey3{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .3s;
    animation-fill-mode: forwards;
}
.moreAnimationKey4{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .4s;
    animation-fill-mode: forwards;
}
.moreAnimationKey5{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}
.moreAnimationKey6{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .6s;
    animation-fill-mode: forwards;
}
.moreAnimationKey7{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .7s;
    animation-fill-mode: forwards;
}
.moreAnimationKey8{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .8s;
    animation-fill-mode: forwards;
}
.moreAnimationKey9{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: .9s;
    animation-fill-mode: forwards;
}
.moreAnimationKey10{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.0s;
    animation-fill-mode: forwards;
}
.moreAnimationKey11{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.1s;
    animation-fill-mode: forwards;
}
.moreAnimationKey12{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
}
.moreAnimationKey13{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.3s;
    animation-fill-mode: forwards;
}
.moreAnimationKey14{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.4s;
    animation-fill-mode: forwards;
}
.moreAnimationKey15{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
.moreAnimationKey16{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.6s;
    animation-fill-mode: forwards;
}
.moreAnimationKey17{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.7s;
    animation-fill-mode: forwards;
}
.moreAnimationKey18{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.8s;
    animation-fill-mode: forwards;
}
.moreAnimationKey19{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 1.9s;
    animation-fill-mode: forwards;
}
.moreAnimationKey20{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 2.0s;
    animation-fill-mode: forwards;
}
.moreAnimationKey21{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 2.1s;
    animation-fill-mode: forwards;
}
.moreAnimationKey22{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 2.2s;
    animation-fill-mode: forwards;
}
.moreAnimationKey23{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 2.3s;
    animation-fill-mode: forwards;
}
.moreAnimationKey24{
    animation-name: moreAnimation;
    animation-duration: .1s;
    animation-delay: 2.4s;
    animation-fill-mode: forwards;
}
@keyframes moreAnimation {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* -- 共通--*/
.scrollLock{
     overflow: hidden;
}

/*-- 以下PC 581px 以上 --*/
@media (min-width:581px){
    .movieList li.more_disp{
        display: none;
    }
    #Contents{
        font-size: 14px;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    }
    #movieHtmlWrap .movieList{
        -js-display: flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
    }
    #suggestContents .movieList{
        display: block;
        width: auto;
        min-width: 933px;
        overflow-x: auto;
    }
    #suggestContents .movieList{
        display: block;
    }
    .movieList li{
        display: block;
        width: 236px;
        border-bottom: #E60027 solid 1px;
        background-color: #454545;
        margin-bottom: 20px;
        margin-left: 4px;
        margin-right: 1px;
    }
    #suggestContents .movieList li{
        width: 229px;
        float: left;
        margin-left: 0;
        margin-right: 4px;
        margin-bottom: 0;
    }
    #suggestContents .movieList li:last-child{
        margin-right: 0;
    }
    .movieList li .listParts{
        cursor: pointer;
    }
    .movieList li .listParts:hover{
        opacity: 0.65;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }
    .movieList li .thumb{
        display: block;
        height: 132px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #000;
    }
    #suggestContents .movieList li .thumb{
        height: 128px;
    }
    .movieList li .thumb{
        display: block;
        height: 132px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .movieList li .textWrap{
        display: block;
        padding: 6px 12px 8px 12px;
        box-sizing: border-box;
        min-height: 70px;
        color: #FFF;
        line-height: 120%;
    }
    .movieList li .textWrap .category{
        display: block;
        font-size: 10px;
    }
    .movieList li .textWrap strong{
        display: block;
        color: #FFF;
        font-size: 12px;
    }
    #topMovieBg{
        display: block;
        width: 100%;
        height: 801px;
        overflow: hidden;
        position: relative;
        background-color: #000;
    }
    .PC #bgMovie{
        display: block;
        width: 100%;
        height: 100%;
        background-color: #000;
    }
    .PC #myPlayerID{
        display: block;
        width: 100%;
        height: 100%;
    }
    .PC #bgMovie .video-js .vjs-control-bar{
        display: none;
    }
    .PC #bgMovie .vjs-loading-spinner{
        opacity: 0;
    }
    .PC #bgMovie .video-js .vjs-tech{
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        min-width: 1424px !important;        
    }
    .SP #topMovieBg{
		display: block;
        width: 100%;
        background: url(/assets/image/jp/ja/company/movie.png) no-repeat center center / cover;
    }
    .SP #bgMovie{
        display: none;
    }
    #topMovieArea{
        display: block;
        width: 100%;
        height: 801px;
        background: url(/image/jp/movie/index_01.png) rgba(0,0,0,0.3) repeat left top / 6px auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    #topMovieHov{
        display: block;
        width: 100%;
        z-index: 2;
        position: relative;
    }
    #pageTitle{
        display: block;
        width: 100%;
        max-width: 965px;
        margin: 0 auto;
        padding: 195px 0 162px 0;
        text-align: center;
        color: #FFF;
        box-sizing: border-box;
    }
    #pageTitle strong{
        display: block;
        margin-bottom: 10px;
    }
    #pageTitle strong img{
        max-width: 100%;
    }
    #pageTitle h1{
        display: inline-block;
        margin: 0 auto;
        padding: 6px 1.8em 7px 1.8em;
        line-height: 100%;
        font-weight: bold;
        font-size:14px;
        background: #E60027;
        letter-spacing: -0.05em;
    }
    #suggestAllWrap{
        display: block;
        width: 100%;
        max-width: 965px;
        margin: 0 auto;
    }
    #suggestTab{
        display: block;
        width: 364px;
        margin: 0 auto;
    }
    #suggestTab ul{
        -js-display: flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: 48px;
    }
    #suggestTab ul li{
        display: block;
        width: 180px;
        height: 39px;
        line-height: 100%;
        margin-top: 9px;
        background: #F2F2F2;
        border-radius: 5px 5px 0 0;
        padding: 14px 0 0 0 ;
        text-align: center;
        color: #575757;
        font-weight: bold;
        box-sizing: border-box;
        cursor: pointer;
        position: relative;
    }
    #suggestTab ul li:nth-child(1){
        margin-right: 4px;
    }
    #suggestTab ul li:hover,
    #suggestTab ul li.active{
        height: 48px;
        background: #E60027;
        color: #FFF;
        margin-top: 0;
        padding: 16px 0 0 0;
    }
    #suggestTab ul li.active span{
        display: block;
        width: 16px;
        height: 16px;
        background: #E60027;
        position: absolute;
        left: 82px;
        bottom: -7px;
        transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
    }
    #suggestContents{
        display: block;
        width: 100%;
        height: 250px;
        padding: 24px 18px 14px 18px;
        background: rgba(51,51,51,0.8);
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
    }
    #suggestContents ul li:nth-child(n+5){
        display: none;
    }
    #suggestContents ul li .textWrap strong{
        max-height: 3.2em;
        overflow-y: hidden;
    }
    #bigCategoryTabArea{
        display: block;
        width: 100%;
        padding:  22px 0 17px 0;
        background:
        url(/image/jp/movie/index_03.png) repeat-x left top,
        url(/image/jp/movie/index_02.png) #DCDCDC repeat-x left top;
        border-bottom: #E60027 solid 2px;
    }
    #bigCategorySpTItle{
        display: none;
    }
    #bigCategoryTabArea ul{
        -js-display: flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 965px;
        margin: 0 auto;
    }
    #bigCategoryTabArea li{
        display: inline-block;
        height: 28px;
        margin-bottom: 6px;
        padding: 8px 20px 0 20px;
        color: #FFF;
        line-height: 100%;
        background-color: #454545;
        background-position: center bottom 7px;
        background-repeat: no-repeat;
        background-image: url(/image/jp/movie/index_04.png);
        cursor: pointer;
        margin-right: 8px;
        border:#FFF solid 1px;
    }
    #bigCategoryTabArea li:nth-child(1){ background-image: url(/image/jp/movie/index_04.png); }
    #bigCategoryTabArea li:nth-child(2){ background-image: url(/image/jp/movie/index_05.png); }
    #bigCategoryTabArea li:nth-child(3){ background-image: url(/image/jp/movie/index_06.png); }
    #bigCategoryTabArea li:nth-child(4){ background-image: url(/image/jp/movie/index_07.png); }
    #bigCategoryTabArea li:nth-child(5){ background-image: url(/image/jp/movie/index_08.png); }
    #bigCategoryTabArea li:nth-child(6){ background-image: url(/image/jp/movie/index_09.png); }
    #bigCategoryTabArea li:nth-child(7){ background-image: url(/image/jp/movie/index_10.png); }
    #bigCategoryTabArea li:nth-child(8){ background-image: url(/image/jp/movie/index_11.png); }
    #bigCategoryTabArea li:nth-child(9){ background-image: url(/image/jp/movie/index_12.png); }
    #bigCategoryTabArea li:nth-child(10){ background-image: url(/image/jp/movie/index_13.png); }
    #bigCategoryTabArea li:nth-child(11){ background-image: url(/image/jp/movie/index_14.png); }
    #bigCategoryTabArea li:nth-child(12){ background-image: url(/image/jp/movie/index_15.png); }
    #bigCategoryTabArea li:nth-child(13){ background-image: url(/image/jp/movie/index_16.png); }
    #bigCategoryTabArea li:nth-child(14){ background-image: url(/image/jp/movie/index_17.png); }
    #bigCategoryTabArea li:nth-child(15){ background-image: url(/image/jp/movie/index_18.png); }
    #bigCategoryTabArea li.active{ 
        background-image: url(/image/jp/movie/index_04.png);
        color: #FFFFFF;
        cursor: default;
    }
    #bigCategoryTabArea li:nth-child(1).active{ background-color: #E60027;}
    #bigCategoryTabArea li:nth-child(2).active{ background-color: #01624F;}
    #bigCategoryTabArea li:nth-child(3).active{ background-color: #F08C00;}
    #bigCategoryTabArea li:nth-child(4).active{ background-color: #44AF35;}
    #bigCategoryTabArea li:nth-child(5).active{ background-color: #006FA4;}
    #bigCategoryTabArea li:nth-child(6).active{ background-color: #A34BC4;}
    #bigCategoryTabArea li:nth-child(7).active{ background-color: #A86B42;}
    #bigCategoryTabArea li:nth-child(8).active{ background-color: #E05338;}
    #bigCategoryTabArea li:nth-child(9).active{ background-color: #F1688D;}
    #bigCategoryTabArea li:nth-child(10).active{ background-color: #2CA590;}
    #bigCategoryTabArea li:nth-child(11).active{ background-color: #E33D4D;}
    #bigCategoryTabArea li:nth-child(12).active{ background-color: #7B2E61;}
    #bigCategoryTabArea li:nth-child(13).active{ background-color: #A4B233;}
    #bigCategoryTabArea li:nth-child(14).active{ background-color: #2B94DF;}
    #bigCategoryTabArea li:nth-child(15).active{ background-color: #55731D;}
    #bigCategoryTabArea li:last-child{
        margin-right: 0;
    }
    #bigCategoryHidden{
        display: none;
    }
    #bigCategoryTabArea li:not(.active):hover{
        opacity: 0.65;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }
    #movieAllWrap{
        display: block;
        width: 100%;
        padding: 20px 0 40px 0;
        box-sizing: border-box;
        background: #F4F4F4;
        border-bottom: #E2E2E2 solid 1px;
    }
    #movieSortSelect{
        -js-display: flex;
        display: flex;
        justify-content: flex-end;
        padding-bottom: 20px;
        max-width: 965px;
        margin: 0 auto;
    }
    #movieSortSelectInner{
        -js-display: inline-flex;
        display: inline-flex;
        background: #FFF;
        padding: 8px 15px 8px 15px;
        border: #CCC solid 1px;
    }
    #movieSortSelectInner p{
        padding-left: 26px;
        padding-right: 20px;
        background: url(/image/jp/movie/index_19.png) no-repeat left center / 15px auto;
    }
    #movieHtmlWrap{
        display: block;
        width: 100%;
        max-width: 965px;
        margin: 0 auto;
    }
    #movieSortKey li{
        display: inline-block;
        min-height: 15px;
        padding-left: 22px;
        padding-right: 16px;
        background: url(/image/jp/movie/index_20.png) no-repeat left center / 15px auto;
        cursor: pointer;
    }
    #movieSortKey li:hover{
        color: #E60027;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }
    #movieSortKey li.active{
        background-image: url(/image/jp/movie/index_21.png);
        cursor: default;
    }
    #movieSortKey li:last-child{
        padding-right: 0;
    }
    #movieHtmlWrap li.subCategoryTitle{
        display: block;
        width: 100%;
        background: url(/image/jp/movie/index_22.png) no-repeat #FFF left 15px center / 20px auto;
        padding: 10px 10px 10px 45px;
        box-sizing: border-box;
        box-shadow: 1px 0 5px rgba(0,0,0,0.3);
        border-bottom: none;
        color: #E60027;
        font-weight: bold;
        font-size: 20px;
        margin-top: 40px;
        margin-right: 0;
        margin-bottom: 20px;
    }
    #movieHtmlWrap .moreSmallKey{
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: right;
        color: #E60027;
        font-weight: bold;
        font-size: 16px;
    }
    #movieHtmlWrap .moreSmallKey span{
        display: inline-block;
        background: url(/image/jp/movie/index_23.png) no-repeat left center / 22px auto;
        padding: 0 0 0 30px;
        box-sizing: border-box;
        cursor: pointer;
    }
    #movieHtmlWrap .moreSmallKey span:hover{
        opacity: 0.65;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }
    #movieHtmlWrap li.subCategoryTitle.more_disp{
        display: none;
    }
    #movieHtmlWrap li.subCategoryTitle h2{
        margin: 0;
        padding: 0;
        font-weight: bold;
        background: none;
    }
    #moreBtn{
        display: block;
        width: 100%;
        height: 70px;
        padding: 0 0 0 0;
        position: relative;
    }
    #moreBtn span{
        display: block;
        width: 300px;
        height: 300px;
        color: #E60027;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        background: url(/image/jp/movie/index_23.png) no-repeat center top;
        padding: 54px 0 0 0;
        position: absolute;
        top: -23px;
        left: 50%;
        margin-left: -150px;
        cursor: pointer;
    }
    #moreBtn span:hover{
        opacity: 0.65;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }
    .modal{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .modalBg{
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3);
        z-index: 1;
        cursor: pointer;
    }
    .modalInner{
        display: block;
        background: #FFF;
        width: 96%;
        max-width: 964px;
        max-height: 90%;
        overflow-y: scroll;
        overflow-x: hidden;
        position: absolute;
        top: 5%;
        left: 50%;
        -webkit-transform:translateX(-50%);
        -moz-transform:translateX(-50%);
        transform:translateX(-50%);
        padding: 26px 39px 20px 39px;
        z-index: 2;
        box-sizing: border-box;
        border: #000 solid 1px;
    }
    .modalInner .linkThumb{
        display: block;
        text-align: center;
        position: relative;
    }
    .modalInner .linkThumb::after{
        content: "この動画は別タブで開きます";
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 15em;
        font-size: 12px;
        color: #FFF;
        background: #E60027;
        line-height: 100%;
        padding: 5px 1em 6px 1em;
    }
    .modalInner .linkThumb img{
        display: block;
        width: 100%;
        margin: 0 auto;
        position: relative;
    }
    .modalInner .title{
        display: block;
        padding-top: 18px;
        font-size: 18px;
        font-weight: bold;
    }
    .modalInner .ligDesc{
        display: block;
        padding: 18px 20px;
        background: #F1F1F1;
        border-radius: 3px;
        margin-top: 10px;
    }
    .modalInner .link{
        display: block;
        margin-top: 15px;
    }
    .modalInner .link a{
        color: #000;
        text-decoration: underline;
    }
    .modalInner .link a:hover{
        text-decoration: none;
    }
    .modalInner .category{
        display: block;
        margin-top: 18px;
    }
    .modalInner .category{
        display: block;
        margin-top: 16px;
    }
    .modalInner .category strong{
        display: inline-block;
        margin-right: 12px;
        color: #454545;
        font-weight: normal;
        background: #CFCFCF;
        list-style-image: 100%;
        padding: 3px 15px;
        border-radius: 3px;
    }
    .modalInner .category .bigCategory:hover{
        color: #E60027;
    }
    .modalInner .category .subCategory b{
        display: inline-block;
        margin-right: 1em;
        font-weight: normal;
        cursor: pointer;
    }
    .modalInner .category .subCategory b:hover{
        color: #E60027;
    }
    .modalInner .category .subCategory::before{
        content:">";
        display: inline-block;
        margin-left: 10px;
        margin-right: 8px;
    }
    .modalInner .category .subCategory:empty{
        display: none;
    }
    .modalInner .category span.bigCategory{
        cursor: pointer;
    }
    .modalInner .category span.bigCategory:hover{
        color: #E60027;
    }
    .modalInner .closeBtn{
        display: block;
        width: 100%;
        max-width: 180px;
        color: #FFF;
        font-weight: bold;
        font-size: 16px;
        padding: 7px 0;
        text-align: center;
        background: #E60027;
        margin: 20px auto;
        cursor: pointer;
    }
    .movieList li .category.type1 span{ color: #01624F; }
    .movieList li .category.type2 span{ color: #f08c00; }
    .movieList li .category.type3 span{ color: #44af35; }
    .movieList li .category.type4 span{ color: #006fa4; }
    .movieList li .category.type5 span{ color: #a34bc4; }
    .movieList li .category.type6 span{ color: #a86b42; }
    .movieList li .category.type7 span{ color: #e05338; }
    .movieList li .category.type8 span{ color: #f1688d; }
    .movieList li .category.type9 span{ color: #2ca590; }
    .movieList li .category.type10 span{ color: #e33d4d; }
    .movieList li .category.type11 span{ color: #7b2e61; }
    .movieList li .category.type12 span{ color: #a4b233; }
    .movieList li .category.type13 span{ color: #2b94df; }
    .movieList li .category.type14 span{ color: #55731d; }
    #popularityWrap{
        display: none;
    }
    .modalInner .closeBtn:hover{
        opacity: 0.65;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }
}

/*-- 以下スマートフォン --*/
@media (max-width:580px){
    .movieList li.more_disp{
        display: none !important;
    }
    #Contents{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #topMovieBg{
        display: block;
        width: 100%;
        height: 517px;
        background: url(/assets/image/jp/ja/company/movie.png) no-repeat center center / cover;
        position: relative;
    }
    #bgMovie{
        display: none;
    }
    #topMovieArea{
        display: block;
        width: 100%;
        height: 517px;
        background: url(/image/jp/movie/index_01.png) rgba(0,0,0,0.3) repeat left top / 6px auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    #topMovieHov{
        display: block;
        width: 100%;
        height: 517px;
        z-index: 2;
        position: relative;
    }
    #pageTitle{
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 110px 0 0 0;
        text-align: center;
        color: #FFF;
        box-sizing: border-box;
    }
    #pageTitle strong{
        display: block;
        margin-bottom: 3px;
    }
    #pageTitle strong img{
        max-width: 100%;
    }
    #pageTitle h1{
        display: inline-block;
        margin: 0 auto;
        padding: 5px 1.2em 5px 1.2em;
        line-height: 100%;
        font-weight: bold;
        font-size:12px;
        background: #E60027;
        letter-spacing: -0.05em;
    }
    #suggestAllWrap{
        display: block;
        width: 100%;
        max-width: 965px;
        margin: 0 auto;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    #suggestTab{
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    #suggestTab ul{
        -js-display: flex;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        width: 100%;
        height: 48px;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
    }
    #suggestTab ul li{
        display: block;
        width: 48%;
        height: 39px;
        line-height: 100%;
        margin-top: 9px;
        background: #F2F2F2;
        border-radius: 5px 5px 0 0;
        padding: 14px 0 0 0 ;
        text-align: center;
        color: #575757;
        font-weight: bold;
        box-sizing: border-box;
        position: relative;
    }
    #suggestTab ul li:nth-child(1){
        margin-right: 4px;
    }
    #suggestTab ul li.active{
        height: 48px;
        background: #E60027;
        color: #FFF;
        margin-top: 0;
        padding: 16px 0 0 0;
    }
    #suggestTab ul li.active span{
        display: block;
        width: 16px;
        height: 16px;
        background: #E60027;
        position: absolute;
        left: 45%;
        bottom: -7px;
        transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
    }
    #suggestContents{
        display: block;
        width: 100%;
        height: 200px;
        padding: 24px 8px 14px 8px;
        background: #333;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
    }
    #suggestContents .movieList{
        display: block;
        width: auto;
        min-width: 680px;
        overflow-x: auto;
    }
    #suggestContents .movieList li{
        width: 160px;
        float: left;
        margin-right: 10px;
        margin-bottom: 0;
    }
    #suggestContents .movieList li:nth-child(4){
        margin-right: 0;
    }
    #suggestContents .movieList li:nth-child(n+5){
        display: none;
    }
    #suggestContents .movieList li .thumb{
        display: block;
        height: 90px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #000;
    }
    #suggestContents .movieList li .textWrap{
        display: block;
        padding: 6px 0 8px 0;
        box-sizing: border-box;
        min-height: 70px;
        color: #FFF;
        line-height: 110%;
    }
    #suggestContents .movieList li .textWrap .category{
        display: block;
        font-size: 10px;
    }
    #suggestContents .movieList li .textWrap strong{
        color: #FFF;
        font-size: 12px;
    }
    #bigCategoryTabArea{
        -js-display: flex;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 15px 8px 15px 8px;
        background:
        url(/image/jp/movie/index_03.png) repeat-x left top,
        url(/image/jp/movie/index_02.png) #DCDCDC repeat-x left top;
        border-bottom: #E60027 solid 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    #bigCategoryTabArea #bigCategorySpTItle{
        display: block;
        font-weight: bold;
        font-size: 15px;
        line-height: 120%;
    }
    #bigCategoryTabArea #bigCategorySpTItle span{
        display: block;
        font-size: 12px;
    }
    #bigCategoryTabArea ul{
        display: none;
    }
    #bigCategoryTabArea li{
        display: none;
    }
    #bigCategoryHiddenKey{
        display: block;
        width: 45px;
        height: 40px;
        background: url(/image/jp/movie/index_25.png) #FFF no-repeat center center / 15px auto;
        border-radius: 3px;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        overflow: hidden;
    }
    #bigCategoryHidden{
        display: block;
        width: 45px;
        height: 40px;
        opacity: 0;
    }
    #movieSortSelect{
        -js-display: flex;
        display: flex;
        justify-content: flex-end;
        padding-bottom: 15px;
        margin-right: 8px;
        font-size: 12px;
    }
    #movieSortSelect p span{
        display: none;
    }
    #movieSortSelectInner{
        -js-display: inline-flex;
        display: inline-flex;
        background: #FFF;
        padding: 8px 15px 8px 15px;
        border: #CCC solid 1px;
    }
    #movieSortSelectInner p{
        padding-left: 26px;
        padding-right: 10px;
        background: url(/image/jp/movie/index_19.png) no-repeat left center / 15px auto;
    }
    #movieSortKey li{
        display: inline-block;
        min-height: 15px;
        padding-left: 20px;
        padding-right: 8px;
        background: url(/image/jp/movie/index_20.png) no-repeat left center / 15px auto;
    }
    #movieSortKey li.active{
        background-image: url(/image/jp/movie/index_21.png);
    }
    #movieSortKey li:last-child{
        padding-right: 0;
    }
    #movieAllWrap{
        display: block;
        width: 100%;
        padding: 15px 0 0 0;
        box-sizing: border-box;
        background: #F4F4F4;
    }
    #movieHtmlWrap .movieList{
        border-top: #CCC solid 1px;
    }
    #movieHtmlWrap .movieList li{
        display: block;
        width: 100%;
        padding: 10px 8px;
        border-bottom: #CCC solid 1px;
        box-sizing: border-box;
    }
    #movieHtmlWrap .movieList li .listParts{
        width: 100%;
        -js-display: flex;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    #movieHtmlWrap .movieList li .modalKey{
        cursor: pointer;
    }
    #movieHtmlWrap .movieList li .thumb{
        display: block;
        width: 115px;
        height: 62px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    #movieHtmlWrap .movieList li .textWrap{
        display: block;
        width:60%;
        width:-webkit-calc(100% - 120px);
        width:-moz-calc(100% - 120px);
        width:calc(100% - 120px);
        padding: 0 0 0 9px;
        box-sizing: border-box;
        line-height: 120%;
    }
    #movieHtmlWrap .movieList li .textWrap .category{
        display: block;
        color: #454545;
        font-size: 10px;
    }
    #movieHtmlWrap .movieList li .textWrap strong{
        color: #121212;
        font-size: 12px;
    }
    #movieHtmlWrap li.subCategoryTitle{
        display: block;
        width: 100%;
        background: url(/image/jp/movie/index_22.png) no-repeat #FFF left 8px center / 20px auto;
        padding: 10px 10px 10px 46px;
        box-sizing: border-box;
        border-top: #e60027 solid 2px;
        border-bottom: #e60027 solid 2px;
        color: #E60027;
        font-weight: bold;
        font-size: 18px;
        margin-top: 30px;
    }
    #movieHtmlWrap li.subCategoryTitle h2{
        margin-bottom: 0;
        padding: 0;
        font-weight: bold;
        width: 100%;
        box-sizing: border-box;
        background: none;
    }
    #movieHtmlWrap .moreSmallKey{
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: right;
        color: #E60027;
        font-weight: bold;
        font-size: 14px;
        padding-top: 12px;
        padding-right: 16px;
    }
    #movieHtmlWrap .moreSmallKey span{
        display: inline-block;
        background: url(/image/jp/movie/index_23.png) no-repeat left center / 16px auto;
        padding: 0 0 0 24px;
        box-sizing: border-box;
        cursor: pointer;
    }
    #moreBtn{
        display: block;
        width: 100%;
        position: relative;
    }
    #moreBtn span{
        display: block;
        width: 100%;
        color: #E60027;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        background: url(/image/jp/movie/index_23.png) no-repeat center top 15px / 24px auto;
        padding: 44px 0 10px 0;
    }
    .modal{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .modalBg{
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3);
        z-index: 1;
    }
    .modalInner{
        display: block;
        background: #FFF;
        width: 96%;
        max-width: 965px;
        max-height: 90%;
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        top: 5%;
        left: 50%;
        -webkit-transform:translateX(-50%);
        -moz-transform:translateX(-50%);
        transform:translateX(-50%);
        padding: 16px;
        z-index: 2;
        box-sizing: border-box;
        border: #000 solid 1px;
    }
    .modalInner .linkThumb{
        display: block;
        text-align: center;
        position: relative;
    }
    .modalInner .linkThumb::after{
        content: "この動画は別タブで開きます";
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 15em;
        font-size: 10px;
        color: #FFF;
        background: #E60027;
        line-height: 100%;
        padding: 5px 1em 6px 1em;
    }
    .modalInner .linkThumb img{
        display: block;
        max-width: 100%;
        position: relative;
    }
    .modalInner .title{
        display: block;
        padding-top: 12px;
        font-size: 14px;
        font-weight: bold;
    }
    .modalInner .ligDesc{
        display: block;
        font-size: 13px;
        padding: 8px 12px;
        background: #F1F1F1;
        border-radius: 3px;
        margin-top: 10px;
    }
    .modalInner .link{
        display: block;
        margin-top: 15px;
    }
    .modalInner .link a{
        color: #000;
        text-decoration: underline;
        font-size: 12px;
    }
    .modalInner .category{
        display: block;
        margin-top: 18px;
    }
    .modalInner .category{
        display: block;
        margin-top: 16px;
        font-size: 11px;
    }
    .modalInner .category strong{
        display: inline-block;
        margin-right: 4px;
        color: #454545;
        font-weight: normal;
        background: #CFCFCF;
        list-style-image: 100%;
        padding: 1px 8px;
        border-radius: 3px;
    }
    .modalInner .category .subCategory b{
        display: inline-block;
        margin-right: 1em;
        font-weight: normal;
        cursor: pointer;
    }
    .modalInner .category .subCategory::before{
        content:">";
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
    }
    .modalInner .category .subCategory:empty{
        display: none;
    }
    .modalInner .closeBtn{
        display: block;
        width: 100%;
        max-width: 160px;
        color: #FFF;
        font-weight: bold;
        font-size: 14px;
        padding: 5px 0;
        text-align: center;
        background: #E60027;
        margin: 20px auto 10px auto;
    }
    .movieList li .category.type1 span{ color: #01624F; }
    .movieList li .category.type2 span{ color: #f08c00; }
    .movieList li .category.type3 span{ color: #44af35; }
    .movieList li .category.type4 span{ color: #006fa4; }
    .movieList li .category.type5 span{ color: #a34bc4; }
    .movieList li .category.type6 span{ color: #a86b42; }
    .movieList li .category.type7 span{ color: #e05338; }
    .movieList li .category.type8 span{ color: #f1688d; }
    .movieList li .category.type9 span{ color: #2ca590; }
    .movieList li .category.type10 span{ color: #e33d4d; }
    .movieList li .category.type11 span{ color: #7b2e61; }
    .movieList li .category.type12 span{ color: #a4b233; }
    .movieList li .category.type13 span{ color: #2b94df; }
    .movieList li .category.type14 span{ color: #55731d; }
    #popularityWrap{
        display: none;
    }
}