/* frame */
.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: 0;left: 0;transform: scale(-1, 1);}
        &.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);}
    }
}

/* bg circle */
.bg_circle{position: fixed; top: 50%; left: 50%; transform: scale(1) translate(-50%,-50%); width: max(1400px,100vw); z-index: -1; pointer-events: none;
    img{width: 100%; height: auto; animation: rotation 80s linear infinite;}
}
@media only screen and (max-width: 835px){
    .bg_circle{width: 174vw;}
}

/* bg video */
#bgvid {position: fixed;min-width: 100%;min-height: 100%;z-index: -2;opacity: 1;top: 50%;right: 50%;transform: translate(50%, -50%); pointer-events: none;}


/* top tit */
.top_tit_box{position: relative; margin-bottom: calc(var(--base_distance)*0.5);width: 100%;height: min(156px,14vw); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1); filter: blur(20px); transition: 1.2s;
    .top_tit{display: inline-block;font-family: var(--f_01);font-size: min(74px,7vw);font-weight: 400;line-height: 1em;background-color: #000;padding: 0.1em 0.2em;position: relative;top: 50%;transform: translateY(-50%);}
    .anime_txt{display: flex;gap: 0 2%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);margin: 0;z-index: -1; opacity: 0.6;
        img{animation: hor_move_l 60s linear infinite;}
    }

    /* animation */
    &.scroll_in {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        filter: blur(0px);
    }
}
@media only screen and (max-width: 835px){
    .top_tit_box{margin-bottom: calc(var(--base_distance)*1);height: 28vw;
        .top_tit{font-size: 9vw;padding: 0.3em 0.7em 0.4em;}
        .anime_txt{
            img{height: 28vw;max-width: inherit;}
        }
    }
}

/* content */
.content{background-color: #000;background-image: url(../images/bg/bg_staff.svg);background-position: center;background-repeat: repeat;background-size: 70%;padding: calc(var(--base_distance) * 0.4);text-align: left;border: 1px solid #666; clip-path: polygon(0% 0%, -5% 0%, -5% 100%, 0% 100%); filter: blur(20px); transition: 1.2s; transform: translateY(20px);

    /* 基礎設定 */
    .part{margin-bottom: 1.6em;
        img{width: auto; height: min(18px,4vw);}
    }
    .name{margin-bottom: 3em;
        img{width: auto; height: min(50px,12vw);}
    }
    .txt_area{
        .stit{color: #38D530;display: block;margin-top: 2em;margin-bottom: 0.2em;}
    }

    /* animation */
    .part,
    .name,
    .txt_area {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    filter: blur(8px);
    transition:
        clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        filter    0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    &.scroll_in {
        animation: wavy-reveal 0.6s cubic-bezier(0.42, 0.41, 0.17, 0.2) forwards;
        filter: blur(0px);
        transform: translateY(0px);

        .part {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            filter: blur(0px);
            transition-delay: 0.2s;
        }
        .name {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            filter: blur(0px);
            transition-delay: 0.3s;
        }
        .txt_area {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            filter: blur(0px);
            transition-delay: 0.4s;
        }
    }
}
@media only screen and (max-width: 835px){
    .content{background-size: 200%;
        .part{}
        .name{}
        .txt_area{
            .stit{color: #38D530;display: block;margin-top: 2em;margin-bottom: 0.2em;}
        }
    }
}


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

/* fv */
.fv{position: relative; margin-bottom: calc(var(--base_distance)*1);
    .inner{display: flex;gap: 0 2%;width: 94%;margin: 0 auto;
        .main_tit{width: 42%;
            img{width: 100%; height: auto;}
            }
        .catch_outer{width: 56%; height: 100lvh; max-height: 55.2vw; position: relative;
            .catch{position: absolute;width: 100%;top: 50%;transform: translate(0, -50%);
                img{width: 100%; height: auto;}
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .fv{margin-bottom: calc(var(--base_distance)*1.4); padding-top: calc(var(--base_distance)*1);
        .inner{flex-direction: column; gap: 2vw 0;width: 90%;margin: 0 auto;
            .main_tit{width: 100%;margin-bottom: 4vw;}
            .catch_outer{width: 100%; height: inherit; max-height: inherit;
                .catch{position: relative;top: inherit;transform: inherit;}
            }
        }
    }
}


/* top staff */
.top_staff{
    ul{display: flex;flex-direction: column;gap: calc(var(--base_distance)*0.3) 0;
        li{width: min(912px,90%);
            &:nth-child(2n){margin-left: auto;}
        }
    }
}
@media only screen and (max-width: 835px){
    .top_staff{
        ul{
            li{width: 100%;}
        }
    }
}