/* frame */
.frame{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;z-index: 9996;pointer-events: none;
    .deco{position: absolute;width: min(200px,20vw);height: min(280px,28vh);background-image: url(../images/bg/parts_frame.svg);background-repeat: no-repeat;background-size: contain;background-position: left top;
        &.top_l{top: 0;left: 0;}
        &.top_r{top: 0;right: 0;transform: scale(-1, 1);}
        &.bottom_l{bottom: 0;left: 0;transform: scale(1, -1);}
        &.bottom_r{bottom: 0;right: 0;transform: scale(-1, -1);}
    }
    .border-top{background-image: url(../images/bg/frame_center.svg);background-position: center;background-repeat: no-repeat;background-size: contain;display: block;width: min(540px,54vw);height: min(34px,6vw);position: absolute;top: -4px;left: 50%;transform: translateX(-50%);}
    .border-bottom{background-image: url(../images/bg/frame_center.svg);background-position: center;background-repeat: no-repeat;background-size: contain;display: block;width: min(540px,54vw);height: min(34px,6vw);position: absolute;bottom: -4px;left: 50%;transform: translateX(-50%) scale(1,-1);}
    .border-left{display: block;height: calc(100% - min(620px,62vh));width: 2px;position: absolute;left: min(14px,1.5vh);top: 50%;transform: translateY(-50%);border-left: 1px solid #172A88;
        &:after{position: absolute;content: "";background-image: url(../images/bg/frame_side_ornament02.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(14px);height: min(150px,15vh);left: -7px;top: 50%;transform: translateY(-50%);}
        .b_deco{position: absolute;display: block;width: 100%;height: 100%;
            &:before,
            &:after{position: absolute;content: "";background-image: url(../images/bg/frame_side_ornament01.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(14px);height: min(80px,7.8vh);}
            &:before{left: -7px;top: -15px;}
            &:after{left: -7px;bottom: -15px;transform: scale(1,-1);}
        }
    }
    .border-right{display: block;height: calc(100% - min(620px,62vh));width: 2px;position: absolute;right: min(14px,1.5vh);top: 50%;transform: translateY(-50%);border-right: 1px solid #172A88;
        &:after{position: absolute;content: "";background-image: url(../images/bg/frame_side_ornament02.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(14px);height: min(150px,15vh);right: -7px;top: 50%;transform: translateY(-50%);}
        .b_deco{position: absolute;display: block;width: 100%;height: 100%;
            &:before,
            &:after{position: absolute;content: "";background-image: url(../images/bg/frame_side_ornament01.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(14px);height: min(80px,7.8vh);}
            &:before{right: -7px;top: -15px;}
            &:after{right: -7px;bottom: -15px;transform: scale(1,-1);}
        }
    }
}
@media only screen and (max-width: 835px){
    .frame{
        .deco{width: 23vw;height: 28vw;}
        .border-top{top: -1.5vw;width: 54vw;}
        .border-bottom{bottom: -1.5vw;width: 50vw;}
        .border-left{height: calc(100% - 62vw);left: 1.5vw;
            &:after{height: 22vw;}
            .b_deco{
                &:before,
                &:after{width: 2vw;height: 10vw;left: -1vw;}
                &:before{top: 0;}
                &:after{bottom: 0;}
            }
        }
        .border-right{height: calc(100% - 62vw);right: 1.5vw;
            &:after{height: 22vw;}
            .b_deco{
                &:before,
                &:after{width: 2vw;height: 10vw;right: -1vw;}
                &:before{top: 0;}
                &:after{bottom: 0;}
            }
        }
    }
}

/* lily bg */
.lily_bg{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;z-index: -1;pointer-events: none;
    .lily{position: absolute;width: min(380px,32vw);height: min(270px,23vw);background-image: url(../images/bg/corner-lily.webp);background-repeat: no-repeat;background-size: contain;
        &.left{bottom: max(-30px,-3vw);left: max(-30px,-3vw);}
        &.right{bottom: max(-30px,-3vw);right: max(-30px,-3vw);transform: scale(-1,1);}
    }
}    



/*----------------------------------------
    anime
------------------------------------------*/
.top_page{
    &:before{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.4);}
    .frame{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.2);}
    .lily_bg{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.2);}
    .fv{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.4);}

    &.load_open{
        &:before{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 0.4s;}
        .frame{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 0.8s;}
        .lily_bg{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 1.2s;}
        .fv{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.8s var(--easeOutCubic); transition-delay: 0.8s;}
    }
}

.anime{opacity: 0; visibility: hidden; transform: translateY(min(40px,4vw)); transition: 1.2s var(--easeOutCubic); transition-delay: 0.05s;
    &.scroll_in{opacity: 1; visibility: visible; transform: translateY(0);}
}


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

.top_tit{font-family: var(--f_01);font-size: min(100px,14vw);font-weight: 100;line-height: 1.5em;margin-bottom: 0.8em;color: #172a88;position: relative;
    span{position: relative;
        &:after{position: absolute;content: "";background-image: url(../images/parts/tit_deco.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(320px);height: min(30px);bottom: -16px;left: 50%;transform: translateX(-50%);}
    }
}
.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;}

.c_01{color: #8A0000 !important;}

@media only screen and (max-width: 835px){
    .top_tit{
        &.long{font-size: 8vw;}
        span{
            &:after{
    width: 50vw;
    height: 5vw;
}
        }
    }
}

/* fv */
.fv{position: relative;height: 100dvh;margin-bottom: calc(var(--base_distance)*0.5);
    .inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
        .main_tit{width: 80%;margin: 0 auto min(60px, 6vw);
            img{width: 100%; height: auto;}
            }
        .date{width: 100%;margin: 0 auto;display: flex;gap: 0 8%;justify-content: center;
            p{margin: 0;width: 46%;text-align: center;
                img{width: 100%; height: auto;}
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .fv{
        .inner{
            .main_tit{width: min(100%,500px);margin: 0 auto min(40px, 10vw);}
            .date{width: min(86%,400px);flex-direction: column;gap: min(40px,8vw) 0;
                p{width: 100%;}
            }
        }
    }
}


/* top cast */
.top_cast{margin-bottom: calc(var(--base_distance)*1);
    .cast_block{margin-bottom: calc(var(--base_distance)*1);
        &:last-of-type{margin: 0;}
        .list_block{margin-bottom: calc(var(--base_distance)*0.75);
            &:last-of-type{margin: 0;}
            .stit{margin-bottom: 2.6em;
                img{width: auto; height: auto;}
            }
            .sstit{margin-bottom: 2em;font-size: 22px;font-weight: bold;color: #172A88;}
            .list{display: flex;flex-wrap: wrap;justify-content: center;gap: calc(var(--base_distance)*0.18) 50px;margin-bottom: calc(var(--base_distance)*0.35);
                &.first{margin-bottom: calc(var(--base_distance)*0.75);}
                &.column{flex-direction: column;gap: calc(var(--base_distance)*0.2) 0;}
                &:last-of-type{margin: 0;}
                li{width: auto;
                    &.one{width: 100%;}
                    p{font-size: clamp(20px,4vw,30px);font-weight: 600;line-height: 1.5em;margin: 0; 
                        .small{color: #172a88;display: block;font-size: 0.7em;line-height: 1.2em;}
                        .small2{font-size: 0.7em;}
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .top_cast{
        .cast_block{
            .list_block{margin-bottom: calc(var(--base_distance)*1);
                .stit{margin-bottom: 2em;
                    img{width: min(120px,30vw);}
                }
                .sstit{font-size: 16px;}
                .list{gap: calc(var(--base_distance)*0.3) 0;flex-direction: column;margin-bottom: calc(var(--base_distance)*0.35);
                    &.first{margin-bottom: calc(var(--base_distance)*1);}
                    &.column{gap: calc(var(--base_distance)*0.3) 0;}
                    li{
                        p{font-size: 5.6vw;
                            .small{line-height: 1.4em;}
                        }
                    }
                }
            }
        }
    }
}

/* top about */
.top_about{position: relative;padding: calc(var(--base_distance)*0.5) 0;margin-bottom: calc(var(--base_distance)*1);
    .about_tit{margin: 0 auto 40px;width: 50%;
        img{width: 100%; height: auto;}
    }
    .about_block{
        p{font-size: min(24px,1.6vw);font-weight: 600;line-height: 3em;margin-bottom: 1.5em;margin: 0;}
    }
    .bg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;
        span{position: absolute;display: block;width: 100%;height: 1px;background-color: #172A88;
            &.top{top: 0;left: 0;}
            &.bottom{bottom: 0;left: 0;}
            &:before,
            &:after{position: absolute;content: "";background-image: url(../images/parts/ornament-divider.svg);width: 14px;height: 15px;}
            &:before{left: -10px;top: -7px;transform: scale(-1,1);}
            &:after{right: -10px;top: -7px;}
        }
    }
}
@media only screen and (max-width: 835px){
    .top_about{
        .about_tit{width: 90%;}
        .about_block{
            p{font-size: 3.8vw;}
        }
    }
}

/* btn sec */
.btn_sec{margin: 0 auto calc(var(--base_distance)*1); text-align: center;
    a{display: block; width: 60%; margin: 0 auto; transition: 0.2s;
        &:hover{transform: translateY(-3px); filter: brightness(1.1);}
        img{width: 100%; height: auto;}
    }
}
@media only screen and (max-width: 835px){
    .btn_sec{
        a{width: 80%;}
    }
}