body,html{
    width:100%;
    height:100%
}


body{
    -webkit-text-size-adjust:100%
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block
}
ol,ul{
    list-style:none
}


blockquote,q{
    quotes:none
}


blockquote:before,blockquote:after{
    content:'';
    content:none
}
q:before,q:after{
    content:'';
    content:none
}
table{
    border-collapse:collapse;
    border-spacing:0
}
em,address{
    font-style:normal
}
img{
    vertical-align:middle;
    border:none
}
em{
    font-style:normal
}
strong{
    font-weight:bold
}
address{
    font-style:normal
}


body{
    font-family: "Noto Sans JP", serif;
    color:#000;
    line-height:1.6;
    font-size:15px;
    overflow-x:hidden
}


a{
    color:#CC0000;
    text-decoration:underline
}

body {
    text-align: center;
    margin: 0;
    background-color: #f65058;
}
.wrapper {
    position: relative;
    width: 100%;
    max-width: 680px;
    padding: 0 0 20px;
    margin: auto;
}

#movie .wrapper{
    width: 100%;
    max-width: 960px;
    padding: 0 0 20px;
}

@media (max-width: 480px) {

    #login .wrapper{
        width: 90%;
        padding: 0 5% 20px;
    }    
    #movie .wrapper{
        max-width: 90%;
        padding: 0 5% 20px;
    }
}

.wrapper img {
    width: 100%;
}

.flatButton{
    -webkit-transition:all ease-out 0.3s;
    -moz-transition:all ease-out 0.3s;
    transition:all ease-out 0.3s;
    display:block;
    margin:0 auto 30px;
    padding:8px 18px !important;
    border: 2px solid #000;
    color: #000;
    background-color:transparent;
    text-align:center;
    letter-spacing:1px;
    cursor:pointer;
    -webkit-appearance:none;
    border-radius:0;
    text-decoration:none;
    width:100%;
    max-width:150px;
    margin:20px auto 0 !important;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

#movie .flatButton {
    width:200px;
    box-sizing: border-box;
    line-height: 1.66;
}
.flatButton:hover,.buttonMore:hover,.buttonNews:hover,.buttonSide:hover{
    background:#000;
    color: #FFF;
}

.table {
    text-align: center;
    padding:  0 0 30px;
}

.table .sub-title {
    margin-bottom: 30px;
    padding: 0 0 12px; 
} 

.table input {
    padding:10px 8px;
    border: 2px solid #707070;
    background: #000;
    color:#EEE;
    width: 150px;
    box-sizing: border-box;
}

.table label {
      display: block;
      font-weight: bold;
      margin-bottom: 10px;
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 600;
      font-style: normal;
      letter-spacing: 1px;
}



.btn{
    display: block;
    height: 42px;
    transition: all .3s ease-in ;
    opacity: 1;
}


.btn.big{
    width: 100%;
    height: auto;
}


a.btn:hover{
    opacity: .66;
}

.btn img {
    height: 100%;
    width: auto;
}

.btn.big img {
    height: auto;
    width: 100%;
}

.top-movie-contents .video-container{
    position:relative;
    display:inline-block;
    width:100%;
    max-width: 960px;
    aspect-ratio:16 / 9;
    overflow:hidden
}

.top-movie-contents .video-container.vertical{
    max-width:400px;
    aspect-ratio: 9 / 16;
}


.top-movie-contents video{
    width:100%;
    background:#000;
    object-fit:cover
}


.top-movie-contents .play-button{
    object-fit:cover;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:360px;
    height:250px;
    background:url("/assets/images/thumbCover.png") no-repeat center center;
    background-size:contain;
    cursor:pointer;
    opacity:0.8
}


.top-movie-contents .controls{
    margin:10px 0 25px;
    text-align:right
}


.top-movie-contents input,.top-movie-contents select{
    vertical-align:middle
}


.top-movie-contents select{
    padding:6px;
    font-size:15px;
    margin:0px
}


.top-movie-contents button{
    padding:3px 10px;
    font-size:15px;
    margin:0px
}



.errors li:before{
    content:"■";
    color:#e86106
}


.orange{
    color:#e86106
}


.green{
    color:#02B422
}


.black{
    color:#000
}


.red{
    color:#CD0000
}

.w90p{
    max-width: 760px;
    margin: auto;
}

.center{
    text-align:center !important
}

.left{
    text-align:left !important
}

.right{
    text-align:right !important
}


.bg-green{
    background-color:#02B422
}


.bg-black{
    background-color:#000
}


.center{
    text-align:center !important
}


.right{
    text-align:right !important
}


.font1{
    font-family:'Open Sans', sans-serif;
    font-weight:400
}


.font2{
    font-family:'Michroma', sans-serif;
    font-weight:400
}


.font3{
    font-family:"ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, sans-serif
}


.size4{
    font-size:4px !important
}


.size6{
    font-size:6px !important
}


.size8{
    font-size:8px !important
}

.size9{
    font-size:10px !important
}

.size10{
    font-size:10px !important
}


.size12{
    font-size:12px !important
}


.size14{
    font-size:14px !important
}


.size16{
    font-size:16px !important
}


.size18{
    font-size:18px !important
}


.size20{
    font-size:20px !important
}


.size22{
    font-size:22px !important
}


.size24{
    font-size:24px !important
}


.size26{
    font-size:26px !important
}


.size28{
    font-size:28px !important
}


.size30{
    font-size:30px !important
}


.size32{
    font-size:32px !important
}


.size34{
    font-size:34px !important
}


.size36{
    font-size:36px !important
}


.size38{
    font-size:38px !important
}


.size40{
    font-size:40px !important
}


.size42{
    font-size:42px !important
}


.size44{
    font-size:44px !important
}


.size46{
    font-size:46px !important
}


.size48{
    font-size:48px !important
}


.size50{
    font-size:50px !important
}


.mt1{
    margin-top:1px
}


.mb1{
    margin-bottom:1px
}


.pt1{
    padding-top:1px
}


.pb1{
    padding-bottom:1px
}


.mt2{
    margin-top:2px
}


.mb2{
    margin-bottom:2px
}


.pt2{
    padding-top:2px
}


.pb2{
    padding-bottom:2px
}


.mt3{
    margin-top:3px
}


.mb3{
    margin-bottom:3px
}


.pt3{
    padding-top:3px
}


.pb3{
    padding-bottom:3px
}


.mt4{
    margin-top:4px
}


.mb4{
    margin-bottom:4px
}


.pt4{
    padding-top:4px
}


.pb4{
    padding-bottom:4px
}


.mt5{
    margin-top:5px
}


.mb5{
    margin-bottom:5px
}


.pt5{
    padding-top:5px
}


.pb5{
    padding-bottom:5px
}


.mt6{
    margin-top:6px
}


.mb6{
    margin-bottom:6px
}


.pt6{
    padding-top:6px
}


.pb6{
    padding-bottom:6px
}


.mt7{
    margin-top:7px
}


.mb7{
    margin-bottom:7px
}


.pt7{
    padding-top:7px
}


.pb7{
    padding-bottom:7px
}


.mt8{
    margin-top:8px
}


.mb8{
    margin-bottom:8px
}


.pt8{
    padding-top:8px
}


.pb8{
    padding-bottom:8px
}


.mt9{
    margin-top:9px
}


.mb9{
    margin-bottom:9px
}


.pt9{
    padding-top:9px
}


.pb9{
    padding-bottom:9px
}


.mt10{
    margin-top:10px
}


.mb10{
    margin-bottom:10px
}


.pt10{
    padding-top:10px
}


.pb10{
    padding-bottom:10px
}


.mt11{
    margin-top:11px
}


.mb11{
    margin-bottom:11px
}


.pt11{
    padding-top:11px
}


.pb11{
    padding-bottom:11px
}


.mt12{
    margin-top:12px
}


.mb12{
    margin-bottom:12px
}


.pt12{
    padding-top:12px
}


.pb12{
    padding-bottom:12px
}


.mt13{
    margin-top:13px
}


.mb13{
    margin-bottom:13px
}


.pt13{
    padding-top:13px
}


.pb13{
    padding-bottom:13px
}


.mt14{
    margin-top:14px
}


.mb14{
    margin-bottom:14px
}


.pt14{
    padding-top:14px
}


.pb14{
    padding-bottom:14px
}


.mt15{
    margin-top:15px
}


.mb15{
    margin-bottom:15px
}


.pt15{
    padding-top:15px
}


.pb15{
    padding-bottom:15px
}


.mt16{
    margin-top:16px
}


.mb16{
    margin-bottom:16px
}


.pt16{
    padding-top:16px
}


.pb16{
    padding-bottom:16px
}


.mt17{
    margin-top:17px
}


.mb17{
    margin-bottom:17px
}


.pt17{
    padding-top:17px
}


.pb17{
    padding-bottom:17px
}


.mt18{
    margin-top:18px
}


.mb18{
    margin-bottom:18px
}


.pt18{
    padding-top:18px
}


.pb18{
    padding-bottom:18px
}


.mt19{
    margin-top:19px
}


.mb19{
    margin-bottom:19px
}


.pt19{
    padding-top:19px
}


.pb19{
    padding-bottom:19px
}


.mt20{
    margin-top:20px
}


.mb20{
    margin-bottom:20px
}


.pt20{
    padding-top:20px
}


.pb20{
    padding-bottom:20px
}


.mt21{
    margin-top:21px
}


.mb21{
    margin-bottom:21px
}


.pt21{
    padding-top:21px
}


.pb21{
    padding-bottom:21px
}


.mt22{
    margin-top:22px
}


.mb22{
    margin-bottom:22px
}


.pt22{
    padding-top:22px
}


.pb22{
    padding-bottom:22px
}


.mt23{
    margin-top:23px
}


.mb23{
    margin-bottom:23px
}


.pt23{
    padding-top:23px
}


.pb23{
    padding-bottom:23px
}


.mt24{
    margin-top:24px
}


.mb24{
    margin-bottom:24px
}


.pt24{
    padding-top:24px
}


.pb24{
    padding-bottom:24px
}


.mt25{
    margin-top:25px
}


.mb25{
    margin-bottom:25px
}


.pt25{
    padding-top:25px
}


.pb25{
    padding-bottom:25px
}


.mt26{
    margin-top:26px
}


.mb26{
    margin-bottom:26px
}


.pt26{
    padding-top:26px
}


.pb26{
    padding-bottom:26px
}


.mt27{
    margin-top:27px
}


.mb27{
    margin-bottom:27px
}


.pt27{
    padding-top:27px
}


.pb27{
    padding-bottom:27px
}


.mt28{
    margin-top:28px
}


.mb28{
    margin-bottom:28px
}


.pt28{
    padding-top:28px
}


.pb28{
    padding-bottom:28px
}


.mt29{
    margin-top:29px
}


.mb29{
    margin-bottom:29px
}


.pt29{
    padding-top:29px
}


.pb29{
    padding-bottom:29px
}


.mt30{
    margin-top:30px
}


.mb30{
    margin-bottom:30px
}


.pt30{
    padding-top:30px
}


.pb30{
    padding-bottom:30px
}


.mt40{
    margin-top:40px
}


.mb40{
    margin-bottom:40px
}


.pt40{
    padding-top:40px
}


.pb40{
    padding-bottom:40px
}


.mt50{
    margin-top:50px
}


.mb50{
    margin-bottom:50px
}


.pt50{
    padding-top:50px
}


.pb50{
    padding-bottom:50px
}


.mt80{
    margin-top:80px
}


.mb80{
    margin-bottom:80px
}


.pt80{
    padding-top:80px
}


.pb80{
    padding-bottom:80px
}


.clearfix{
    clear:both
}


.clearfix:after{
    content:"";
    display:block;
    clear:both
}


.small{
    font-size:75%
}


p.pager{
    text-align:center;
    margin:20px 0 10px 0;
    font-size:109%
}


p.pager a,p.pager em.current{
    display:inline-block;
    text-decoration:none;
    border:1px solid #000;
    margin:1px;
    padding:4px 5px;
    min-width:17px;
    color:#000
}


p.pager a:hover,p.pager em.current{
    background:#000;
    color:#fff
}


p.pager .prev,p.pager .next{
    position:relative
}


p.pager .prev:after,p.pager .next:after{
    display:block;
    content:"";
    position:absolute;
    display:block;
    border-top:1px solid #000;
    border-right:1px solid #000;
    width:6px;
    height:6px;
    top:10px
}


p.pager .prev{
    padding:4px 5px 4px 20px
}


p.pager .prev:after{
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(225deg);
    -ms-transform:rotate(225deg);
    transform:rotate(225deg);
    left:9px
}


p.pager .next{
    padding:4px 20px 4px 5px
}


p.pager .next:after{
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    right:9px
}


p.pager .next:hover:after{
    border-top:1px solid #fff;
    border-right:1px solid #fff
}


p.pager .prev:hover:after{
    border-top:1px solid #fff;
    border-right:1px solid #fff
}