/* 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: "Tac One", sans-serif;font-size: min(178px,9vw);font-weight: 400;line-height: 1em;position: relative;top: 46%;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; filter: brightness(2);}
    }

    /* 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: 26vw;line-height: 1em;
            .long{font-size: 15vw;line-height: 2.5em;}
        }
        .anime_txt{
            img{height: 28vw;max-width: inherit;}
        }
    }
}

/* container */
.container{margin-top: var(--base_distance);}
@media only screen and (max-width: 835px){
    .container{margin-top: calc(var(--base_distance) * 2); }
}

/* btn */
.btn{margin-bottom: 0; border-bottom: 1px solid #38D530; transition: 0.2s; width: fit-content; margin: 0 auto;
    p{margin: 0;}
    a{display: block; transition: 0.2s; padding: 0.1em; color: #38D530; font-size: min(50px, 3.5vw); font-weight: 400; line-height: 1.0em; font-family: "Tac One", sans-serif;
        &:hover{filter: brightness(1.3);}
        .btn_box{ margin: 0; display: flex; justify-content: flex-start; align-items: center; gap: 0.4em;
            .btn_txt{display: block; text-align: left; white-space: nowrap;}
            .btn_arrow{width: 0.2em; display: flex; align-items: center; flex-shrink: 0;}
        }
        .arrow_left{text-align: right;
            .btn_arrow{
                img{transform: rotate(180deg);}
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .btn{
        a{font-size: min(60px, 11vw); line-height: 1.0em;}
    }
}


/* 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.5);
    .inner{display: flex;gap: 0 2%;width: 90%;margin: 0 auto;
        .main_tit{width: 42%;
            img{width: 100%; height: auto;}
            }
        .fv_right{width: 56%; max-height: 55.2vw; position: relative;
            .fv_right_inner{position: absolute;width: 100%;top: 55%;transform: translate(0, -50%);
                .catch_outer{
                    .catch{
                        img{width: 100%; height: auto;}
                    }
                }
                .fv_date{display: flex; gap: 4%; justify-content: center; width: 80%; margin: 0 auto min(24px, 3vw); 
                    img{width: 48%; height: auto;}
                }
                .fv_staff{width: 60%; margin: 0 auto;
                    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;
            .main_tit{width: 100%;margin-bottom: 4vw;}
            .fv_right{width: 100%; max-height: none; margin: 0 auto;
                .fv_right_inner{position: relative; top: 0;transform: translate(0, 0);
                    .catch_outer{width: 100%; height: inherit; max-height: inherit; margin-bottom: 8vw;
                        .catch{position: relative;top: inherit;transform: inherit;}
                    }
                    .fv_date{flex-direction: column; gap: 2em; width: 80%; margin-bottom: 8vw;
                        img{width: 100%;}
                    }
                    .fv_staff{width:70%;}
                }
            }
        }
    }
}


/* news  topページnewsページ共通*/
#news{
    ul{margin-bottom: 4vw;
        li{margin-bottom: 0; border-bottom: 1px solid #9F9F9F; background-color: #00000066; transition: 0.2s;
            &:hover{background-color: #000;}
            a{display: block; transition: 0.2s; padding: 4% 3%;
                &.disactive{pointer-events: none;
                    .news_box{
                        .arrow{display: none;}
                    }
                }
                .news_box{color: #fff; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 0 3%;
                    .date{font-size: min(24px, 1.8vw); line-height: 1.4em; font-weight: 400; display: block; text-align: left; margin-bottom: 2px; width: 7em;}
                    .content_tit{font-size: min(18px, 1.6vw); line-height: 1.4em; font-weight: bold; width: calc(100% - 4em); text-align: left;}
                    .arrow{width: 1em;}
                }
            }
        }
    }
}
@media only screen and (max-width: 835px){
    #news{
        ul{
            li{
                a{
                    .news_box{flex-direction: column;
                        .date{font-size: min(30px, 6vw); width: 100%; text-align: left;}
                        .content_tit{font-size: min(20px, 3.8vw); line-height: 1.4em; width: 100%;}
                        .arrow{display: none;}
                    }
                }
            }
        }
    }
}

/*----------------------------------------
    news page
------------------------------------------*/
.news{
    .pagination {display: flex; justify-content: center; gap: 3%; margin-top: 20px; font-size: min(24px, 1.8vw); line-height: 1.0em; font-weight: 400; margin-bottom: 4vw;
        a {display: inline-block; padding: 10px 20px; border: 1px solid #FFFFFF99; background-color: #00000066; color: #FFEB01;
            &:hover{background-color: #000;}
        }
    }
}
@media only screen and (max-width: 835px){
    .news{
        .pagination {font-size: min(18px, 3.8vw); line-height: 1.0em;}
    }
}

/*----------------------------------------
    in-news page
------------------------------------------*/
.in_news{
    .news_wrap{background-color: #00000066; border-top: 1px solid #9F9F9F; border-bottom: 1px solid #9F9F9F; padding: 5% 7%; margin-bottom: 4vw;
        .title_box{border-bottom: 1px solid #9F9F9F; padding-bottom: 1em; margin-bottom: 2em;
            .date{font-size: min(20px, 1.6vw); line-height: 2.5em; font-weight: 400;}
            .box_title{font-size: min(24px, 1.8vw); line-height: 1.5em; font-weight: bold;}
        }
        .txt_box{font-size: min(18px, 1.3vw); line-height: 2.5em; font-weight: 400;}
    }
}
@media only screen and (max-width: 835px){
    .in_news{
        .news_wrap{padding: 5% 6%; margin-bottom: 4vw;
            .title_box{border-bottom: 1px solid #9F9F9F; padding-bottom: 1em; margin-bottom: 2em;
                .date{font-size: min(24px, 6vw); line-height: 2.5em;}
                .box_title{font-size: min(20px, 4.2vw); line-height: 1.5em;}
            }
            .txt_box{font-size: min(16px, 3.6vw); line-height: 2.5em;}
        }
    }
}

/*----------------------------------------
    introduction page
------------------------------------------*/
.introduction{
    .txt_box{background-color: #00000066; border-top: 1px solid #9F9F9F; border-bottom: 1px solid #9F9F9F; padding: 7% 8% calc(7% - 1.5em);
        .box_tit{font-size: min(56px, 2.8vw); line-height: 1.0em; font-weight: bold; color: #FFEB01;}
        .box_txt{font-size: min(22px, 1.8vw); line-height: 2.0em; font-weight: bold;}
    }
    .mid_box{margin-bottom: calc(var(--base_distance) * 1.5);}
}
@media only screen and (max-width: 835px){
    .introduction{
        .txt_box{
            p{margin-bottom: 0.5em;}
            .box_tit{font-size: min(36px, 5.8vw); line-height: 1.0em;}
            .box_txt{font-size: min(16px, 3.6vw); line-height: 2.0em;}
        }
    }
}

/*----------------------------------------
    cast page
------------------------------------------*/
.cast{width: 100%;
    .cast_inner{width: 90%; margin: 0 auto calc(var(--base_distance) * 1.5);
        .cast_block{font-size: 40px;line-height: 1.5em;margin-bottom: 5vw; width: 100%;
            
            .cast_list{width: 85%; margin: 0 auto; display: flex; gap: 60px 3%; flex-wrap: wrap; justify-content: center;
                li{width: 31%;
                    figure{line-height: unset;margin-bottom: 10px;
                        img{ width: 100%;}
                    }
                    .cast_img_width{width:100%;
                    &.disactive{pointer-events: none;}}
                }
            }
            .name_block{
                .part{font-size: min(18px, 2vw); line-height: 1.5em; font-weight: 400;
                    span{font-size: min(18px, 2vw); line-height: 1.5em; font-weight: 400; color: #38D530;}
                }
                .other_part{font-size: min(28px, 3.4vw); line-height: 2.5em; font-weight: 400;}
                .name{font-size: min(26px, 2.3vw); line-height: 2em; font-weight: bold;}
            }
            .big{width: 100%;}
        }
    }

    .staff{
        .staff_list{
            .staff_txt{font-size: min(28px, 2.4vw); line-height: 1.5em; font-weight: bold; margin-bottom: .7em;
                span{font-size: min(20px, 2.2vw); line-height: 2.5em; font-weight: 400; color: #38D530;}
                .staff_img{width: 16%;}
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .cast{width: 100%;
        .cast_inner{width: 90%;
            .cast_block{margin-bottom: 12vw;
                .cast_list{flex-direction: column; gap: 0;
                    li{width: 100%; margin-bottom: 8vw;
                        figure{
                            img{ width: 100%;}
                        }
                    }
                }
                .name_block{
                    .part{font-size: min(21px, 5vw); line-height: 1.5em; font-weight: 600;
                        span{font-size: min(21px, 5vw); line-height: 1.5em; font-weight: 600;}
                    }
                    .other_part{font-size: min(30px, 6vw); line-height: 2.5em; font-weight: 600;}
                    .name{font-size: min(28px, 6vw); line-height: 2em; font-weight: 600;}
                }
            }
        }
        .staff{
            .staff_list{
                .staff_txt{font-size: min(20px, 4.4vw); line-height: 1.5em; font-weight: bold; margin-bottom: 0;
                    span{font-size: min(18px, 4.2vw); line-height: 2.5em; font-weight: 400; color: #38D530;}
                    .staff_img{width: 30%;}
                }
            }
        }
    }
}

/*----------------------------------------
    ticket page
------------------------------------------*/
.schedule{
    .sche_inner{width: 90%; margin: 0 auto calc(var(--base_distance) * 1.5);
        .sche_box{overflow: hidden; margin-bottom: 4vw;
            .sche_date{display: flex; gap: 2%; margin-bottom: 1em;
                img{width: 80%;}
                a{margin-top: auto;
                .map{font-size: min(18px, 2vw); line-height: 1.0em; font-weight: bold; color: #000; background-color: #fff; padding: 4px 16px; margin: 0;
                    &:hover{color: #fff; background-color: #000;}
                }
                }
            }
            .osaka{
                img{width: 40%;}
            }
        }
    }

    .ticket{
        .price_wrap{margin-bottom: calc(var(--base_distance) * 0.5);
            .ticket_list{margin-bottom: 1em;}
            .price_box{background-color: #000;
                p{margin-bottom: 8px;}
                .price_tit{font-size: min(38px, 2.8vw); line-height: 1.0em; font-weight: bold; padding: 5% 4%; text-align: left;
                    span{font-size: min(18px, 2vw); line-height: 1.0em; font-weight: 400;}
                }
                .price_txt{padding: 5% 4%; display: flex; justify-content: space-between; border-top: 1px solid #9F9F9F99;
                    p{margin-bottom: 0;}
                    .p_left{font-size: min(32px, 2.5vw); line-height: 1.0em; font-weight: bold;}
                    .p_right{font-size: min(32px, 2.5vw); line-height: 1.0em; font-weight: bold;
                        span{font-size: min(20px, 2.2vw); line-height: 1.0em; font-weight: bold;}
                    }
                }
            }
        }

        .content_wrap{background-color: #00000066; border-top: 1px solid #9F9F9F99; border-bottom: 1px solid #9F9F9F99; padding: 5% 4% 3%; text-align: left; margin-bottom: calc(var(--base_distance) * 0.5);
          .content_tit{font-size: min(38px, 2.8vw); line-height: 1.5em; font-weight: bold; margin-bottom: 1em;}
          .content_box{background-color: #000; padding: 4% 3%; margin-bottom: 2vw;}
        }
        .box_tit{text-align: left; font-size: min(32px, 2.5vw); line-height: 1.5em; font-weight: bold; color: #38D530; margin-bottom: 0.5em; padding-left: 1.5em;
            &::before{content: "■"; display: inline-block; transform: rotate(45deg);margin-left: -1.5em; margin-right: 0.3em;}
        }
        .box_stit{font-size: min(26px, 2.3vw); line-height: 1.5em; font-weight: bold;
            &::before{content: "・";}
        }
        .box_txt{line-height: 1.8em;}
        .content_list{text-align: left; margin-bottom: 18px;
            li{line-height: 1.5em;}
        }
        .content_btn{width: 100%; text-align: center; margin-bottom: 18px;
            a{display: block; background-color: #000; border: 1px solid #FFEB01; padding: 25px 32px; color: #FFEB01; font-size: min(20px, 2.2vw); line-height: 1.0em; font-weight: 400;
                &:hover{background-color: #FFEB01; border: 1px solid #000; color: #000;}
            }
        }
        a{color: #FFEB01;}
        .important_list{
            li{line-height: 1.6em; margin-bottom: 8px;}
        }
    }
}
@media only screen and (max-width: 835px){
.schedule{
    .sche_inner{width:100%;
        .sche_box{margin-bottom: 8vw;
            .sche_date{flex-direction: column;
                img{width: 100%; margin-bottom: 2vw;}
                a{
                    .map{font-size: min(24px, 4vw); line-height: 1.0em;}
                }
            }
            .osaka{
                img{width: 100%;}
            }
        }
    }

    .ticket{
        .price_wrap{
            .ticket_list{margin-bottom: 0.5em;}
            .price_box{
                .price_tit{font-size: min(28px, 5.2vw); line-height: 1.0em;
                    span{font-size: min(20px, 3.6vw); line-height: 1.0em;}
                }
                .price_txt{
                    .p_left{font-size: min(26px, 4.6vw); line-height: 1.0em;}
                    .p_right{font-size: min(26px, 4.6vw); line-height: 1.0em;
                        span{font-size: min(20px, 3.2vw); line-height: 1.0em;}
                    }
                }
            }
        }
        .content_wrap{
          .content_tit{font-size: min(38px, 5.8vw); line-height: 1.5em; margin-bottom: 0.5em;}
          .content_box{margin-bottom: 4vw;}
        }
        .box_tit{font-size: min(26px, 5vw); line-height: 1.5em;}
        .box_stit{font-size: min(26px, 5vw); line-height: 1.5em; }
        .content_btn{
            a{padding: 3% 4%; font-size: min(20px, 4.2vw); line-height: 1.5em;}
        }
    }
}
}