/*********************************************************共通*********/
/*
    顶边距60px
    底边距100px
                */
body{
    background-color:black;
}
.wrapper-head{
    width:100%;
    margin:0 auto;
    background-color:black;
}
.wrapper-main{
    width:960px;
    margin:0 auto;
    margin-bottom:20px;
    background-color:black;
}
.head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}
.title{
    margin:auto;
}
.other{
    display:flex;
    align-items:flex-end;

    position:sticky;
}

/*top写真サイズ*/
.logo img{
    height:40px;
    width:103%;
    margin:0 0 15px 30px;
}
.title img{
    height:180px;
    margin:13px 0 15px 0;
}
.other img{
    width:35px;
    height:35px;
    margin:0 30px 15px 0;
}

/*button*/
.button{
    margin:20px auto;
}
.button ul{
    margin:auto;
    display:flex;
    justify-content:space-between;
    padding:0;/*居中*/
}
.button ul li{
    list-style:none;
    margin:auto;
    font-size:18px;
    font-weight:bold;
}
.button ul li a{
    margin:auto;
    color:white;
    text-decoration:none;
}
.button ul li a:hover{
    color:rgba(139, 123, 30, 0.739);
    transition:0.3s;
}

/*footer*/
.footer-img{
    display:flex;
    justify-content:center;
}
.footer-img img{
    height:50px;
    margin-top:30px;
}
.copyright{
    color:white;
    display:flex;
    justify-content:center;
    margin:30px auto;
}

nav.sticky{
    position:fixed;
    margin:20px auto;
    display:center;
    justify-content:space-between;
}
/*********************************************************HOME*********/
.video{
    display:flex;
    justify-content:center;
    margin:60px 0 40px 0;
}
.video iframe{
    width:960px;
    height:540px;
}
.text{
    color:white;
    display:flex;
    justify-content:center; 
    margin-bottom:40px;
    font-size:24px;
    font-weight:bold;
    font-family:"Times New Roman",Times,serif;
}
/*info*//*gallery*/
.info-title,.posters{
    color:white;
    font-size:24px;
    margin-top:20px;
}
.info{
    color:white;
    display:flex;
    justify-content:space-between;
    margin-top:40px;
    margin-bottom:60px; 
}
.info-1,.info-2{
    margin:0 10px 20px 10px;
    font-family:"Times New Roman",Times,serif;
    line-height:28px;
    font-size:18px;
}
.posters-img{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:100px;
}
.posters-img a{ 
    margin-top:40px;
}
.posters-img a img{
    width:270px;
    height:348px;
}
.posters-img a img:hover{  
    opacity:0.6;
    transition:0.3s;
}
/*********************************************************STORY********/
.pic{
    display:flex;
    justify-content:center;
}
.pic img{
    width:767px;
    height:455px;
    margin:40px 0 40px 0;
}
.story{
    color:white;
    line-height:30px;
    font-size:18px;
    font-weight:400;
    margin-bottom:40px;
}
.story-end{
    color:white;
    line-height:30px;
    font-size:18px;
    font-weight:400;
    margin-bottom:100px;  
}
/*********************************************************FILMS*********/
.films{
    width:960px;
    margin:60px 0 100px 0;
}
.fm{
    position:relative;
    width:960px;
    height:708.5px;
    margin-bottom:100px;
}
.fm img{
    width:960px;
    height:708.5px;
}
.mask{
    position:absolute;    
    width:960px;
    height:708.5px;
    
}
.mask img{
    width:100%;
    height:100%;
    opacity:0;
}
.mask a img:hover{
    opacity:0.8;
    transition:0.5s;
}
/*********************************************************spectre******/
.films-img{
    width:960px;
    height:708.5;
    display:flex;
    overflow:hidden;
}
.films-radio{
    display:flex;
    justify-content:center;
    margin-top:10px;
}
.films-top{
    margin-top:60px;
    width:5760px;
    height:708.5;
}
.films-img img{
    width:960px;
    height:708.5;
}
/* #img1:checked~.films-img{
    margin-left:0;
}
#img2:checked~.films-img{
    margin-left:-960px;
} */

.films-text{
    margin:60px 0 100px 0;
    display:flex;
    justify-content:space-between;
}
.films-text1{
    width:480px;
    color:white;
    line-height:30px;
    font-size:18px;
    font-weight:400;
    margin-right:20px;
}
.films-text2{
    width:480px;
    color:white;
    line-height:30px;
    font-size:18px;
    font-weight:400;
    margin-left:20px;
}