/*----------------------------------------
    top page
------------------------------------------*/
main{position: relative;z-index: 2;}
img{width: 100%;}

.cmn_h_outer{margin-bottom: 50px;}
.sec_h{
    img{max-height: 170px;
        @media screen and (max-width: 835px) {max-height: 90px;}
    }
}
/* fv
------------------------------------------*/
#fv{position: relative;height: 100dvh;display: flex;align-items: center;justify-content: center;z-index: 3;
    .catch{position: absolute;top: 0;right: 0;max-width: 16%;display: flex;flex-direction: row-reverse;height: 100%;align-items: baseline;max-height: 100vh;
        .text{margin-bottom: 0;
            img{}
            &.t02{
                img{transform: translateY(70%);display: block;}
            }
        }
    }
    .date{position: absolute;bottom: 0;left: 0;width: 38%;max-width: 550px;
        img{max-height: 30vh;object-fit: contain; object-position: 0;}
    }
    .logo{width: 60%;position: relative;max-width: 900px;
        img{max-height: 50vh;}
    }
    .ob_frame{position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);
        .ob{position: absolute;
            &.ob01{top: -27%;left: 0;width: 38%;
                @media screen and (max-width: 835px) {top: -22%;width: 88%;}
            }
            &.ob02{bottom: -35%;right: 0;width: 30%;
                @media screen and (max-width: 835px) {bottom: -26%;width: 60%;}
            }
        }
    }
}
@media screen and (max-width: 835px) {
    #fv{flex-direction: column;justify-content: start;height: auto;margin-bottom: 16vw;padding-top: 23vw;
        .catch{height: auto;width: 96%;flex-direction: column;max-width: initial;max-height: initial;align-items: flex-end;top:8%;position: relative;margin-bottom: 20vw;
            .text{
                img{height: 12vw;width: auto;}
                &.t02{
                    img{transform: initial;}
                }
            }
        }
        .logo{margin-bottom: 10vw;width: 90%;}
        .date{position: relative;width: 70%;}
    }
}



#credit{margin: -10vw 0 0 ;
    .credit_wrap{background: #000;padding: 20vw 0;mask-image: url(../images/svg/bg_black.svg); mask-repeat: no-repeat; mask-size: cover; mask-position: 0;
        ul{display: flex;justify-content: center;gap:clamp(30px,5vw,70px);
            &:not(:last-of-type){margin-bottom: 60px;}
            .credit{text-align: center;
                .part{display: inline-block;text-align: center;border: 1px solid #fff;padding: 3px 10px 4px;line-height: 1em;font-size: clamp(14px,1.7vw,22px);font-family: var(--f_serif);font-weight: 500;margin-bottom: .15em;}
                .name{font-size: clamp(20px,3vw,36px);line-height: 1.3em;font-weight: 500;letter-spacing: .1em;
                    span{display: block;font-size: .6em;line-height: 1.3em;letter-spacing: .05em;}
                }
            }
        }
    }
}
@media screen and (max-width: 835px) {
    #credit{    margin: -5vw 0 20vw;
        .credit_wrap{ padding: 30vw 0; mask-size: cover;mask-position: 0% -32px;}
    }
}



#cast{position: relative;margin-bottom: clamp(120px,10vw,200px);
    .cast_wrap{background: rgba(0, 0, 0, 0.751);padding:80px 40px;border: 1px solid #fff;border-top: none;position: relative;
        @media screen and (max-width: 835px) {padding: 60px 24px;}
        &:before{position: absolute;content: "";background: #fff;width: 240px;height: 1px;top: 0;left: 0;
            @media screen and (max-width: 835px) {width: calc((100% - 240px)/2);}
        }
        &:after{position: absolute;content: "";background: #fff;width: 240px;height: 1px;top: 0;right: 0;
            @media screen and (max-width: 835px) {width: calc((100% - 240px)/2);}
        }
        .cmn_h_outer{position: relative;text-align: center;margin-top: -165px;margin-bottom: 70px;
            @media screen and (max-width: 835px) {margin-top: -102px;margin-bottom: 40px;}
            .sec_h{display: inline-block;position: relative;}
        }
        ul{display: flex;flex-direction: column;align-items: center;gap:clamp(24px,4vw,40px);
            .cast{font-size: clamp(24px,3vw,34px);line-height: 1.3em;font-weight: 500;
                .part{font-size: .7em;line-height: 1.3em;}
            }
        }
        .list_blank{padding-bottom: clamp(50px,8vw,100px);}
    }
}

#news{margin-bottom: clamp(100px,10vw,200px);}
.bg_block{background: #000;padding: 60px;
    @media screen and (max-width: 835px) {padding: 50px 16px 30px;}
}

#officialX{margin-bottom: clamp(100px,10vw,200px);
    .officialX{transition:.2s;display: block;
        &:hover{transform: scale(1.05);transition:.2s;}
    }
}