*{
    padding:0px;
    margin:0px;
}
body{
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size:15px;
    letter-spacing:0;
    color:#FFF;
    background: #060407;
}
a{
    text-emphasis:none;
    color:#FFF;
}
a:hover{opacity:0.6;transition: .4s;}
img{
    display:inline-block;
    vertical-align:bottom;
    width:100%;
}
.pc-br{display:block;}
.sp-br{display:none;}

header{background: #060407;}
h1{
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-align: center;
    padding:10px 0px;
}
.container{background: #FAFAFA;}
.main{
    width:100%;
    max-width: 800px;
    margin:auto;
}
.contents{
    display: flex;
    padding: 30px 0px 0px 0px;
    gap: 40px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    max-width: 800px;
    margin:auto;
}
.cast{
    width:90%;
    max-width:640px;
    margin:auto;
}
p{
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}
.line{max-height: 200px;}
.line img{
    height:100%;
    max-height:200px;
    width:100%;
}
.detail{
    display:flex;
    background: #060407;
    padding:0px 0px 40px 0px;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    background-image: url(./images/bg.jpg);
    background-repeat: no-repeat;
    background-size: 1000px auto;
    background-position:top center;
}
.detail .contents{align-items: flex-start;}
.detail h2{
    width:90%;
    max-width:600px;
}
.lead{
    display: flex;
    padding: 0px 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}
.lead h3{
    width:90%;
    max-width: 500px;
}
.lead p{
    width:90%;
    max-width: 480px;
}
.credit{
    width:90%;
    max-width: 580px;
    margin:auto;
}
footer{
    background: #060407;
    display:flex;
    padding: 0px 0px 80px 0px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap:15px;
}
footer h2{
    color:#FFF;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1.7px;
    line-height:24px;
}
footer > a{
    display: block;
    width:380px;
    margin:auto;
}
footer .bottom-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
footer .bottom-link > div{
    width:150px;
    aspect-ratio: 25/3;
}

@media screen and (max-width: 768px){
    .pc-br{display:none;}
    .sp-br{display:block;}

    header{padding:10px;}
    h1{
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        padding:0;
    }
    .contents{
        padding:20px 0px;
        gap:20px;
    }
    h2{
        font-size:16px;
        font-weight: 500;
        line-height:26px;
    }
    p{
        font-size:14px;
        font-weight: 600;
        line-height:22px;
    }
    .line{max-height:80px;}
    .line img{max-height: 80px;}
    .detail{
        align-items:center;
        padding:0px;
        background-position: bottom 25px center;
    }
    .detail .contents{padding:0px;}
    .detail h2{margin:auto;}
    .lead{padding:0px 20px;}
    .lead h3{
        width:100%;
        max-width:420px;
        margin:auto;
    }
    .lead p{
        width:100%;
        max-width:420px;
        margin:auto;
    }
    .cast{
        width:calc(100% - 40px);
        margin:auto;
    }
    footer{
        padding:20px 0px 40px 0px;
        gap:10px
    }
    footer h2{
        font-size: 13px;
        font-weight:600;
        line-height:18px;
        letter-spacing:1.3px;
    }
    footer > a{
        width:260px;
        padding:0px;
    }
    footer .bottom-link{
        flex-wrap: wrap;
        gap:10px
    }
    footer .bottom-link > div{
        width:100%;
        aspect-ratio:unset
    }
    footer .bottom-link > div a{
        display: block;
        width:100%;
        max-width:133px;
        margin:auto;
    }

}