.frame{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;z-index: 9996;pointer-events: none;
    .deco{position: absolute;width: 80px;
        &.top_l{top: -8px;left: -10px;}
        &.top_r{top: -8px;right: -10px;transform: scale(-1, 1);}
        &.bottom_l{bottom: -8px;left: -10px;transform: scale(1, -1);}
        &.bottom_r{bottom: -8px;right: -10px;transform: scale(-1, -1);}
    }
    .border-top{border-top: 4px double #5a3d20;display: block;width: calc(100% - 120px);position: absolute;top: 1px;left: 50%;transform: translateX(-50%);}
    .border-bottom{border-bottom: 4px double #5a3d20;display: block;width: calc(100% - 120px);position: absolute;bottom: 1px;left: 50%;transform: translateX(-50%);}
    .border-left{border-left: 4px double #5a3d20;display: block;height: calc(100% - 120px);position: absolute;left: 0px;top: 50%;transform: translateY(-50%);}
    .border-right{border-right: 4px double #5a3d20;display: block;height: calc(100% - 120px);position: absolute;right: 0px;top: 50%;transform: translateY(-50%);}
}
    

/*----------------------------------------
    top page
------------------------------------------*/

.top_tit{font-family: var(--f_01);font-size: min(80px,16vw);font-weight: bold;line-height: 1.5em;margin-bottom: 0.5em;
    span{position: relative;
        &:before,
        &:after{position: absolute;content: "";background-image: url(../images/parts/h2_parts.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 26px;height: 61px;top: 50%;transform: translateY(-50%);}
        &:before{left: -40px;}
        &:after{right: -40px;transform: translateY(-50%) scale(-1,1);}
    }
}
.comment{display: block;width: min(100%,300px);color: #e6decd;border: 1px solid #e6decd;background-color: #15102da6;margin: 12px auto 0;font-size: 0.9em;padding: 0.5em;}

@media only screen and (max-width: 835px){
    .top_tit{
        &.long{font-size: 8vw;}
        span{
            &:before,
            &:after{width: 20px;height: 51px;}
            &:before{left: -34px;}
            &:after{right: -34px;}
        }
    }
}

/* fv */
.fv{position: relative;height: 100lvh;
    .inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
        .main_tit{margin-bottom: min(40px,8vw);
            img{width: 100%; height: auto;}
            }
        .catch{width: 80%;margin: 0 auto;
            img{width: 100%; height: auto;}
        }
    }
}

/* top date */
.top_date{background-color: #0504288c;padding: min(270px,18vw) 0;margin-bottom: min(160px, 16vw);-webkit-clip-path: polygon(0 12.28vw, 100% 0, 100% calc(100% - 12.28vw), 0 100%);clip-path: polygon(0 12.28vw, 100% 0, 100% calc(100% - 12.28vw), 0 100%);
    .flex{display: flex;gap: 0 2%;margin-bottom: min(60px, 10vw);
        p{margin: 0; width: 32%;
            img{width: 100%; height: auto;}
        }
    }
    .end{margin: 0 auto;width: min(740px,50vw);
        img{width: 100%; height: auto;}
    }
}
@media only screen and (max-width: 835px){
    .top_date{padding: 20vw 0;
        .flex{flex-direction: column;gap: 40px 0;margin-bottom: 60px;
            p{width: 76%;margin: 0 auto;}
        }
        .end{width: 80vw;}
    }
}

/* top staff */
.top_staff{margin-bottom: min(160px, 16vw);
    ul{display: flex;flex-direction: column;gap: 60px 0;
        li{
            .roles{margin: 0;}
            .name{margin: 0;font-size: 1.5em;line-height: 1.5em;}
        }
    }
}
@media only screen and (max-width: 835px){
    .top_staff{
        ul{gap: 30px 0;}
    }
}

/* top cast */
.top_cast{margin-bottom: min(160px, 16vw);}

.cast_list{display: flex; justify-content: center; flex-wrap: wrap; gap: 60px 2%; margin-bottom: 80px;
    li{width: 40%;
        .img_box{margin-bottom: 12px; position: relative; overflow: hidden;
            &.c_01{border: 2px solid #2f2d70;}
            &.c_02{border: 2px solid #824805;}
            &.c_03{border: 2px solid #633380;}
            img{width: 100%; height: auto;}
            .deco{width: 60px;
                &.tl{position: absolute;top: -5px;left: -5px;}
                &.tr{position: absolute;top: -5px;right: -5px;transform: scale(-1, 1);}
                &.bl{position: absolute;bottom: -5px;left: -5px;transform: scale(1, -1);}
                &.br{position: absolute;bottom: -5px;right: -5px;transform: scale(-1, -1);}
            }
        }
        .txt_area{
            .roles{margin: 0;}
            .name{margin: 0;font-size: 2em;font-weight: bold;line-height: 1.5em;}
            .comment{width: min(100%,600px);}
        }
    }
}
@media only screen and (max-width: 835px){
    .cast_list{margin-bottom: 40px;
        li{width: 100%;}
    }
}

/* top story */
.top_story{margin-bottom: min(80px,8vw);
    .txt_area{text-align: left;font-size: 18px;line-height: 2em;margin-bottom: 40px;
        p{margin-bottom: 1.5em;
            &:last-of-type{margin: 0;}
        }
    }
    .img_box{
        figure{margin-bottom: 12px;
            img{width: 100%; height: auto;}
        }
        p{margin: 0;}
    }
}
@media only screen and (max-width: 835px){
    .top_story{
        .txt_area{font-size: 16px;line-height: 1.8em;}
    }
}

/* about cats eye */
.contents_box{background-color: #0e0925a8;padding: 40px;}

.about_cats_eye{
    .flex{display: flex;gap: 0 5%;margin-bottom: 60px;
        a{text-decoration: underline;}
        &:last-of-type{margin: 0;}
        .left{width: 50%;
            figure{background-color: #000;}
        }
        .right{width: 50%; text-align: left;
            .tit{font-size: 1.2em;line-height: 1.5em;padding-bottom: 0.4em;margin-bottom: 1em;border-bottom: 1px solid #e6decd;}
            .txt_area{margin-bottom: 40px;
                &:last-of-type{margin: 0;}
                .stit{font-size: 1.6em;font-weight: bold;line-height: 1.5em;margin-bottom: 0.5em;}
            }
        }
        .mini_flex{display: flex;gap: 0 5%; justify-content: space-between;
            .left{width: 65%;
                .sstit{font-size: 1.2em;font-weight: bold;margin-bottom: 0.5em;}
            }
            .right{width: 30%;}
        }
    }
}
@media only screen and (max-width: 835px){
    .contents_box{ padding: 20px;}

    .about_cats_eye{
        .flex{flex-direction: column; gap: 20px 0; margin-bottom: 40px;
            .left{width: 100%;}
            .right{width: 100%;
                .tit{font-size: 1.2em;line-height: 1.5em;padding-bottom: 0.4em;margin-bottom: 1em;border-bottom: 1px solid #e6decd;}
                .txt_area{margin-bottom: 40px;
                    &:last-of-type{margin: 0;}
                    .stit{font-size: 1.6em;font-weight: bold;line-height: 1.5em;margin-bottom: 0.5em;}
                }
            }
        }
    }
}

.foot_outer{background-color: #05042861;padding: min(270px, 18vw) 0 0;margin-bottom: 0;-webkit-clip-path: polygon(0 12.28vw, 100% 0, 100% 100%, 0 100%);clip-path: polygon(0 12.28vw, 100% 0, 100% 100%, 0 100%);}