@keyframes mist_flow {from {transform: translateX(0);} to {transform: translateX(calc(-100cqh * 2520 / 855));}}


/* section
-------------------------------*/
.sec_wrap{padding-bottom: 10vw;}
@media only screen and (max-width: 835px){
    .sec_wrap{padding-bottom: 25vw;}
}
.in_page{padding: 10vw 0;}
@media only screen and (max-width: 835px){
    .in_page{padding: 25vw 0;}
}
.main_tit{height: 74px;}
.sec_tit {margin-bottom: clamp(42px, 5.2vw, 86px);
    img{display: block; margin: 0 auto;}
    img[src$="ttl_line.svg"]{width: 100%; height: 1px;}
    &.ancher{    margin-top: -150px;
    padding-top: 150px;}
}
@media only screen and (max-width: 835px){
    .main_tit{height: 42px;}
    .sub_tit{height: 16px;}
    #about .main_tit{margin-bottom: 6px;}
}

/* fv
-------------------------------*/
.fv {position: relative; min-height: 100dvh;
    background: url(../images/fv/sky.webp) center / cover no-repeat;
    .fv_bg{position: absolute; inset: 0; overflow: hidden; pointer-events: none;
        .fv_thunder{position: absolute; top: 0; left: 50%; display: block; width: 140%; height: auto; transform: translateX(-50%);}
        &::after{content: ""; position: absolute; inset: 0; background: url(../images/fv/wall.webp) center / cover no-repeat;}
    }
    .fv_mist{position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size;
        &::before{content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% + 100cqh * 2520 / 855); height: 100%; background: url(../images/fv/mist.webp) left bottom / auto 100% repeat-x; animation: mist_flow 100s linear infinite;}
    }
    .kv_outer{position: absolute; z-index: 2; width: 90%; margin: 0 auto; padding: 8vw 0 4vw; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .kv_wrap{width: 100%; padding-bottom: 2px;
        .kv_box{
            &.disactive{pointer-events: none;}
            .kv_inner{
                .kv_img{position: relative; margin-bottom: 0.5em; aspect-ratio: 557 / 782;
                    .kv_img_layer{position: absolute; inset: 0; overflow: hidden; transform-origin: 0 0;}
                    img{position: absolute; inset: 0; display: block; width: 100%; height: 100%;}
                    .kv_img_main{object-fit: contain;}
                    .kv_img_bg{object-fit: cover; filter: blur(16px) brightness(0.85); transform: scale(1.15);}
                }
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .fv{background-size: auto calc(100% / 3); background-position: center top; min-height: auto;
        .fv_bg::after{background-size: 190% auto; background-position: center top 14vw;}
        &::after{bottom: auto; top: calc(14vw + 190vw * 1080 / 1920); transform: translateY(-50%);}
        .fv_mist{bottom: auto; height: calc(14vw + 190vw * 1080 / 1920);}
        .kv_outer{position: relative; z-index: 2; width: 100%; margin: 0 auto; padding: 30vw 0 4vw; top: 0; left: 0; transform: translate(0, 0);}
    }
}

/* kv text (TOP / stage-info 共通)
-------------------------------*/
.kv_txt{position: relative; border-top: 1px solid #C4C2B8; border-bottom: 1px solid #C4C2B8; font-size: min(1.2vw, 16px);color: #fff;
    .kv_badge{position: absolute; bottom: 100%; left: 0; width: 7em; height: auto;}
    .top_box{--slash_w: 0.4em; --slash_gap: 0.8em; display: flex; border-bottom: 1px solid #C4C2B8; text-align: left;
        .date, 
        .place{margin-bottom: 0; min-width: 0;}
        .date{flex: 0 0 auto; white-space: nowrap; padding: 0.1em var(--slash_gap) 0.1em 1em; line-height: 1.4em; align-content: center;}
        .place{flex: 0 1 auto; position: relative; padding: 0.1em 1em 0.1em calc(var(--slash_w) + var(--slash_gap)); align-content: center; line-height: 1.4em;
            &::before{position: absolute; display: block; content: ""; top: 0; bottom: 0; left: 0; width: var(--slash_w); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cline x1='0' y1='1' x2='1' y2='0' stroke='%23C4C2B8' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;}
        }
    }
    .kv_tit{text-align: left; line-height: 1.4em; padding: 0.15em 1em 0.15em;}
}
@media only screen and (max-width: 835px){
    .kv_txt{font-size: 14px;
        .top_box{flex-direction: column;
            .date{line-height: 1.4em; padding: 0.3em 0.3em 0.1em;}
            .place{line-height: 1.4em; padding: 0 0.3em 0.3em;
                &::before{width: 0;}
            }
        }
        .kv_tit{text-align: left; line-height: 1.4em; padding: 0.3em 0.3em;}
    }
}

.fv::after {content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: clamp(150px, 25vw, 400px); transform: translateY(50%); background: linear-gradient(to bottom, transparent, #151515E5, transparent); pointer-events: none;}


.kv_swiper_pos {position: relative;}

.kv_swiper {
    .swiper-wrapper {transition-timing-function: var(--easeInOutCubic, ease);}
    .swiper-slide {
        .kv_img, .kv_txt {opacity: 0.4; transition: opacity 0.75s var(--easeInOutCubic, ease);}
    }
    .swiper-slide-active {
        .kv_img, .kv_txt {opacity: 1;}
    }
}

.kv_swiper-swiper-button-prev, .kv_swiper-swiper-button-next {position: absolute; top: 58%; width: min(96px, 4.2vw); height: auto; margin: 0; z-index: 20; transform: translateY(-50%); transition: opacity 0.3s var(--easeOutCubic, ease); opacity: 0.85;
    &::after {content: none;}
    &:hover {opacity: 1;}
    img {display: block; width: 100%; height: 100%; object-fit: contain;}
}
.kv_swiper-swiper-button-prev {left: -4.5%;}
.kv_swiper-swiper-button-next {right: -4.5%;
    img {transform: scaleX(-1);}
}
@media only screen and (max-width: 835px){
    .kv_swiper-swiper-button-prev, .kv_swiper-swiper-button-next {top: 45%; width: min(96px, 9.5vw);}
    .kv_swiper-swiper-button-prev {left: 1.5%;}
    .kv_swiper-swiper-button-next {right: 1.5%;}
}

.kv_swiper-swiper-pagination {position: static; margin-top: 1.5vw; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    .swiper-pagination-bullet {width: 10px; height: 10px; margin: 0; border-radius: 0; background: no-repeat center / contain url(../images/parts/dot.svg); opacity: 1; transition: 0.3s var(--easeOutCubic, ease);}
    .swiper-pagination-bullet-active {background-image: url(../images/parts/dot_active.svg);}
}
@media only screen and (max-width: 835px){
    .kv_swiper-swiper-pagination {margin-top: 3.5vw;}
}


/* top-news, archive-news
-------------------------------*/
#news.sec_wrap{margin-top: 10vw;}
#news {
    .news_list{display: flex; flex-direction: column; gap: calc(var(--base_gap)*1.5);
        li{display: block;
            a{display: block; background-color: #FFFFFF1A; text-decoration: none; transition: 0.2s; color: var(--c_font_color);
                &:hover{background-color: #FFFFFF26;}
                &.disactive{pointer-events: none;}
            }
        }
    }
    .news_box{display: flex; align-items: stretch; margin-bottom: 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5em; letter-spacing: 0.05em; text-align: left;
        .date , .content_tit{display: flex; align-items: center; padding-top: 2em; padding-bottom: 2em;}
        .date{flex-shrink: 0; padding-left: 3.2em; padding-right: 3.5em; white-space: nowrap;}
        .content_tit{position: relative; flex: 1; padding-left: 3em; padding-right: 2em;
            &::before{position: absolute; display: block; content: ""; top: -2%; left: 0; width: 1px; height: 104%; background-color: #C4C2B8; transform: rotate(15deg);}
        }
    }
    .btn{display: flex; justify-content: flex-end; margin-top: calc(var(--base_gap)*1.5);
        a{display: block; width: clamp(220px, 16vw, 265px); transition: 0.2s;
            &:hover{opacity: 0.7;}
        }
        .btn_box{margin-bottom: 0;
            img{display: block; width: 100%;}
        }
    }
}
@media only screen and (max-width: 835px){
    #news.sec_wrap{margin-top: 18vw;}
    #news {
        .news_box{font-size: 14px;
            .date , .content_tit{padding-top: 1.4em; padding-bottom: 1.4em;}
            .date{padding-left: 0.8em; padding-right: 1em;}
            .content_tit{padding-left: 1em; padding-right: 0.8em;}
        }
        .btn{
            a{width: min(220px, 42vw);}
        }
    }
}

/* single-news
-------------------------------*/
#news.in_page {
    .title_block{background-color: #FFFFFF1A; border-bottom: 1px solid var(--c_font_color);}
    .news_content{background-color: #FFFFFF1A; padding: 3.2em 4.5em; text-align: left;
        h3{font-size: clamp(16px , 2.5vw , 20px); font-weight: 700; margin-bottom: 0.7em; margin-top: 3em; border-bottom: 1px dashed #84837f; padding-left: 1.2em; position: relative;
            &::before { position: absolute; display: block; content: "■"; left: 0;}
            &:first-of-type{margin-top: 0;}
        }
        h4{border: 1px solid #84837f; font-weight: 700; display: inline-block; padding: 0 0.5em; margin-top: 1em; margin-bottom: 0.5em;}
        p + h4{margin-top: 0.2em;}
        h5{padding-left: 1.1em; margin-top: 1em; margin-bottom: 0.2em; position: relative; font-weight: 700;
            &::before { position: absolute; display: block; content: "▶︎"; left: 0; width: 0.4em; height: 0.2em;}
        }
        strong{font-weight: 800; color: var(--c_link_color);}
        a{background-color: transparent; font-weight: 700; text-decoration: underline; color: var(--c_link_color);}
    }
    .btn{justify-content: center; margin-top: calc(var(--base_gap) * 3);}
}
@media only screen and (max-width: 835px){
    #news.in_page{
        .title_block{font-size: 16px; padding: 1em 1.5em;
            .news_box{font-size: inherit; flex-direction: column;
                .date , .content_tit{padding: 0;}
                .date{margin-bottom: 0.5em;}
                .content_tit::before{content: none;}
            }
        }
        .news_content{padding: 1.5em 1.5em;}
        .btn{
            a{width: min(240px, 50vw);}
        }
    }
}

/* about
-------------------------------*/
#about {
    .about_text{text-align: left; font-size: clamp(15px, 1.35vw, 20px); line-height: 2em;
        .about_stit{font-size: clamp(20px, 2vw, 30px); line-height: 1.7em; font-weight: 700; padding-bottom: 0.2em; margin-bottom: 0.5em; margin-top: 1.5em; border-bottom: solid 1px #75746f;
            &:first-of-type{margin-top: 0;}
        }
        .big_letter {font-size: calc(46em / 26); line-height: 1.4em;}
    }
}
@media only screen and (max-width: 835px){
    #about{
        .about_text{line-height: 1.7em;}
    }
}

/* gallery
-------------------------------*/
#gallery {--gallery_h: 30vw; --gallery_angle: -3.02deg; --sword_top: calc(100vw * 50.5 / 1922);
    padding-top: 11.5vw;
    background: url(../images/gallery/gallery_bg.webp) center / 100% 100% no-repeat;
    .gallery_stage{position: relative;}
    .gallery_slider{position: relative; width: 110%; margin-left: -5%; height: var(--gallery_h); overflow: hidden; transform: rotate(var(--gallery_angle)); touch-action: pan-y; user-select: none; cursor: grab;
        &.is_dragging{cursor: grabbing;}
    }
    .gallery_track{display: flex; width: max-content; height: 100%; will-change: transform;
        img{display: block; width: auto; height: 100%; max-width: none; pointer-events: none; -webkit-user-drag: none;}
    }
    .gallery_sword{position: relative; display: block; width: 101%; max-width: 101%; height: auto; margin-top: calc(var(--sword_top) * -1 - 1px); pointer-events: none;}
    .gallery_btns{position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 0.8vw; margin-top: -2.6vw; padding-right: 4.2vw;
        a , button{display: block; padding: 0; border: none; background: none; cursor: pointer; transition: 0.2s;
            &:hover{opacity: 0.7;}
            img{display: block; width: 100%; height: auto;}
        }
        .gallery_arrow{width: clamp(52px, 3.8vw, 68px);
            &.prev img{transform: scaleX(-1);}
        }
        .gallery_more{width: clamp(160px, 12vw, 210px);}
    }
}
@media only screen and (max-width: 835px){
    #gallery.sec_wrap{padding-bottom: 12vw;}
    #gallery {--gallery_h: 56vw;
        padding-top: 18vw;
        .gallery_btns{gap: 14px; margin-top: 2vw; justify-content: center; padding-right: 0;}
        .gallery_btns{
            .gallery_arrow{width: min(52px, 9.2vw);}
            .gallery_more{width: min(160px, 30vw);}
        }
    }
}

/* sns
-------------------------------*/
#sns.sec_wrap{padding-top: 10vw;}
#sns {
    .sns_list{display: flex; justify-content: center; align-items: center; gap: 1.25vw;
        li{width: clamp(56px, 5.2vw, 100px);
            a{display: block; transition: 0.2s;
                &:hover{opacity: 0.7;}
                img{display: block; width: 100%; height: auto;}
            }
        }
    }
}
@media only screen and (max-width: 835px){
    #sns.sec_wrap{padding-top: 25vw;}
    #sns {
        .sns_list{gap: 12px;
            li{width: 60px;}
        }
    }
}
/* banner
-------------------------------*/
#banner {
    .banner_list{display: flex; justify-content: center; align-items: center; gap: 3.5vw;
        li{width: 18vw; max-width: 350px; min-width: 200px;
            a{display: block; transition: 0.2s;
                &:hover{opacity: 0.7;}
                img{display: block; width: 100%; height: auto;}
            }
        }
    }
}
@media only screen and (max-width: 835px){
    #banner.sec_wrap { padding-bottom: 12vw; }
    #banner {
        .banner_list{flex-direction: column; gap: 16px;
            li{width: 80%; max-width:220px;}
        }
    }
}


/*-------------------------------
    stage-info, gallery
-------------------------------*/
#grid-page {
    .grid_list{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw 3.9%;
        li{display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; text-align: left;
            img{display: block; grid-area: 1 / 1;}
            img[src$="info_bg.svg"]{width: 100%; height: auto; aspect-ratio: 1 / 1;}
            .kv_txt{grid-area: 2 / 1; margin-top: 1em;}
            img:not([src$="info_bg.svg"]){position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;}
            .grid_caption{grid-area: 2 / 1; margin: 0.7em 0 0; font-size: clamp(13px, 1.1vw, 18px); line-height: 1.5em; letter-spacing: 0.02em; color: var(--c_font_color);}
        }
    }
}
@media only screen and (max-width: 835px){
    #grid-page {
        .grid_list{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8vw 4vw;
            li{
                .grid_caption{font-size: clamp(11px, 3.2vw, 14px);}
            }
        }
    }
}

/*-------------------------------
    gallery
-------------------------------*/
#grid-page .grid_list li:has(img[src*="images/gallery/"]){cursor: pointer;}
.gallery_modal {
    .modal_inner img{display: block; max-width: min(1200px, 80vw); max-height: min(70vh, calc(100svh - 180px));}
    .modal_close_btn{top: auto; bottom: 100%; right: 0; background: none;
        &::before, &::after{content: ""; position: absolute; top: 50%; left: 50%; width: 70%; height: 4px; background-color: #fff;}
        &::before{transform: translate(-50%, -50%) rotate(45deg);}
        &::after{transform: translate(-50%, -50%) rotate(-45deg);}
    }
}
@media only screen and (max-width: 835px){
    .gallery_modal {
        .modal_inner img{max-width: 94vw;}
    }
}

/*-------------------------------
    stage-info
-------------------------------*/
@media only screen and (max-width: 835px){
    #grid-page.stage_info {
        .grid_list{grid-template-columns: repeat(1, minmax(0, 1fr));}
    }
}