@charset "UTF-8";

/* メインビジュアル */
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    overflow: hidden;
    
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;/* z-indexを明示的に設定 */
}

.video-container::before{
        /* overflow: hidden; */
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;/* z-indexを明示的に設定 */
    background-color: rgba(53, 63, 78, 0.6);
}

.video-container .group_name{
position: absolute;
top: 35%;
left: 35%;
z-index: 9999;/* z-indexを明示的に設定 */
width: 30%;
}

/* ３つのボタン */
.about_buttonarea{
    text-align: center;
    margin-top: 67px;
}
.about_buttonarea .button_area +.button_area{
    margin-left: 75px;
}

/* 公演情報 */
.new_perform{
    margin-top: 210px;
}
.new_perform_container{
    border-radius: 0;
    width: 100%;
    /* height: 355px; */
}
.new_perform_box{
    position: relative;
    /* width: 100%; */
    justify-content: flex-end;
}

.perform_text{
    /* padding-top: 48px; */
    /* padding-bottom: 80px; */
    /* デフォルト40px */
    padding-left: 0;
    padding-right: 0;
}

.next_perform_img {
    width: 32%;
    /* transform: none; */
    position: absolute;
    content: "";
top: -10%; 
/* top: 10%; */
    left: 0;
    height: 120%;
}

/* .next_perform_img img{
    aspect-ratio: 322 / 436;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */


/* 私たちについて */
.aboutus_section{
    background-color: #84A8EB;
    border-radius: 200px 0 0 0;
    margin: 140px 0 0 auto;
    width: calc(100% - 80px);
    padding: 50px 0 130px 82px;
}

.aboutus_box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.aboutus_titlle{
    transform: translate(-6%, -30%);
    line-height: 1.3;
}

.aboutus_section .section_title{
    font-size: 30px;
}

.aboutus_span{
    letter-spacing: .2em;
    font-size: clamp(2.5rem, 1.84rem + 2.82vw, 4.375rem);
}

.aboutus_left{
    width: 48%;
}

.aboutus_left p{
    line-height: 2.2;
}

.aboutus_right{
    width: 48%;
    position: relative;
}

.aboutus_right::before {
    overflow: hidden;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(53, 63, 78, 0.3);
}


/* SNSボタン */
.snsbutton_area{
    display: flex;
    justify-content: space-evenly;
    transform: translateY(-30%);
}
.snsbutton{
    display: flex;
}

.snsbutton_area a{
    background-image: url(../image/berry_button.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: clamp(8.125rem, 5.044rem + 13.15vw, 16.875rem);
    filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.1));
    text-align: center;
    padding: 54% 0 34%;
    /* font-size: 1.11vw; */
    font-size: clamp(0.75rem, 0.5739rem + 0.7512vw, 1.25rem);
    white-space: nowrap;
    text-transform: capitalize;
    position: relative;
}


.snsbutton_area a:hover {
    transform: scale(1.1, 1.1);
}

.snsbutton_area a::after {
    content: '';
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-right: 10px solid #fff;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: rotate(45deg);
    margin-right: 10px;
    position: absolute;
    top: 62%;
    left: 80%;
}

/* 過去の公演 */
.past_performance{
    position: relative;
}
.past_performance::before{
    background-color:#84A8EB ;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: calc(100% - 80px);
    height: 17%;
    border-radius: 0 0 0 200px;
    margin-left: 80px;
}

.past_performance_background{
        position: relative;
        /* height: 490px; */
        background-image: url(../../image/topics_back.png);
        /* margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw); */
            background-size: cover;
            background-repeat: no-repeat;
            padding-bottom: 100px;
            padding-top: 100px;
    }

        .past_performance_container{
            margin-top: 63px;
        }

    .past_perform_header{
        color: #516FAA;
        font-size: clamp(2.5rem, 1.84rem + 2.82vw, 4.375rem);
        font-weight: bold;
        letter-spacing: .2em;
    }

.past_perform_index{
    background-color: #9FB8E5;
padding: 20px;
/* width: 94%; */
margin: 0 auto;
}

.index_contents {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 2fr;
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    color: #fff;
}

.past_perform_image {
    grid-area: 1 / 1 / 3 / 2;
}

.tab_photo_box {
    grid-area: 1 / 2 / 2 / 3;
}

.past_perform_textbox {
    grid-area: 2 / 2 / 3 / 3;
}


.image_list{
display: flex;
flex-wrap: wrap;
}

.tab_photo_box{
    display: flex;
    gap: 5px;
}

.tab_image {
    width: 100%;
    object-fit: cover;
}

.tab_photo{
    width: 100%;
    aspect-ratio: 288 / 178;
}


.past_perform_headbox{
    color: #fff;
}

.past_perform_date{
    font-size: 14px;
}

.past_perform_titlle{
    font-size: clamp(1.875rem, 1.6549rem + 0.939vw, 2.5rem);
    line-height: 1.3;
}

.past_perform_titlle span{
font-size: .8em;
}

/* 768px以上では改行タグを無効に */
.sp_br {
    display: none;
}

.tab-container {
    width: 100%;
    /* margin: 0 auto; */
    overflow: hidden;
    /* margin-left: calc(50% - 50vw);
                margin-right: calc(50% - 50vw); */
                /* width: 100vw; */
}

.tab-content {
    display: none;
    /* opacity: 0;
    transition: opacity 0.5s ease-in-out; */
}

.tab-content:target {
    display: block;
    /* display: flex;
    flex-wrap: wrap; */
    /* opacity: 1; */
}

/* ページロード時にデフォルトでtab4を表示 */
.tab-container:not(:has(.tab-content:target)) #tab4,
.tab-content#tab4:target {
    display: block;
    display: flex;
        flex-wrap: wrap;
        /* opacity: 1; */
}

/* デフォルトで最初のタブコンテンツを表示 */
/* .tab-content#tab1 {
    display: block;
    opacity: 1;
} */

.tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.tab-link {
    padding: 15px 0;
    text-align: center;
    width: 15%;
    transition: .5s ease;
}

.tab-link img{
    aspect-ratio: 1/1;
    object-fit: cover;
}

.comment{
    color: #314850;
    /* width: 94%; */
    margin:35px 0 auto;
}
.comment_titlle{
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}


.comment_text{
    background-color: #fff;
    padding: .7em 1em;
}

.comment_text+.comment_text{
    margin-top: 10px;
}

.tabs_titlle{
    color: #314850;
    display: flex;
        align-items: center;
        justify-content: center;
        font-size:clamp(0.75rem, 0.706rem + 0.19vw, 0.875rem);
        margin-top: 20px;
}

.tabs_titlle:before,
.tabs_titlle:after {
    border-top: 1px solid #314850;
    content: "";
    width: 35%;
}

.tabs_titlle:before {
    margin-right: 10px;
}

.tabs_titlle:after {
    margin-left: 10px;
}


/* これまでの活動 */
.archives{
    position: relative;
}
.archives_text {
    display: inline-block;
    position: relative;
}

.archives .section_text {
    font-family: "Cantarell", "M PLUS Rounded 1c", " Noto Sans JP", "sans-serif";
    font-weight: bold;
    color: #A9C0E9;
    transform: translate(15%, 15%);
    font-size: clamp(3.125rem, 0.9243rem + 9.3897vw, 9.375rem);
    text-transform: uppercase;
}

.archives_header {
    writing-mode: vertical-rl;
    color: #516FAA;
    letter-spacing: .2em;
    font-size: clamp(2.188rem, 1.197rem + 4.23vw, 5rem);
    font-weight: bold;
    position: absolute;
    content: "";
    top: 48%;
    left: 0;
    white-space: nowrap;
}

dl.archives_list_box{
    /* width: 80%; */
    margin: 0 auto;
    padding-left: 16%;
    padding-bottom:clamp(3.75rem, 0.669rem + 13.1455vw, 12.5rem);
    /* 1440pxの時200px,375pxの時60px */
}

.archives_list{
    display: flex;
    align-items: center;
}

.archives_datecat{
    display: flex;
}

.archives_list+.archives_list{
    margin-top: 20px;
}

dt.archives_date {
    min-width: clamp(5.625rem, 3.763rem + 3.87vw, 7.25rem);
}

dd.archives_category{
    min-width: 90px;
    text-align: center;
    display: inline-block;
}

dd.archives_titlle {
    padding: 5px;
    width: 60%;
    margin-left: 10px;
}

dd.category1{
background-color: #FFA3A6;
}

dd.category2 {
    background-color: #fff;
    color: #FFA3A6;
}

dd.category3 {
    background-color: #fff;
    color: #84A8EB;
}
/* グッズ販売 */
.goods{
    margin: 0 auto 10%;
    position: relative;
}

/* .comingsoon{
    top: -13%;
    height: 125%;
} */



@media (max-width: 1000px) {
.aboutus_box{
flex-direction: column-reverse;
}

.aboutus_right{
    width: 100%;
}

.aboutus_left{
    width: 95%;
    margin-top: 17px;
}
}

/* ここからスマホ */
@media (max-width: 768px) {

.about_buttonarea {
display: none;
        }
/* 公演情報SP */
.new_perform{
    margin-top: 84px;
}
.next_perform_img{
    position: static;
    width: 70%;
    transform: translateY(-10%);
    }
    

/* .next_perform_img img{
    aspect-ratio: 210 / 290;
} */

.perform_text{
    padding-top: 0;
}

/* 私たちについてSP */
.aboutus_section{
    border-radius:0%;
    width: 100%;
    padding: 23px 0 0;
}

.aboutus_section .section_title{
    transform: translate(0, 0);
    font-size: 20px;
}

.aboutus_titlle{
    transform: translate(0);
    margin-left: 5%;
}


.aboutus_box{
flex-direction: column-reverse;
}

.aboutus_right{
    width: 100%;
    margin-top: 37px;
}

.aboutus_left{
    width: 90%;
    margin: 0 auto;
    margin-top: 17px;
}

.aboutus_left p{
font-size: 14px;
}
.snsbutton_area{
transform: translateY(-20%);
}

.snsbutton_area a::after{
    border-right:8px solid #fff;
    border-left: 8px solid transparent;
    border-bottom: 8px solid transparent;
    right: 0;
    top: 61.5%;
}

/* 過去の主催公演SP */
.past_performance::before{
    border-radius: 0;
    width: 100%;
    margin-left: 0;
}

.past_perform_header{
    font-size: 40px;
    letter-spacing: .1em;
}

.past_perform_date{
    font-size: 12px;
}

.past_perform_image img{
    aspect-ratio: 167/233;
}

.past_perform_index{
width: 100%;
}
/* ここからグリッド */
.index_contents {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: repeat(2, 1fr) 2fr; */
    grid-column-gap: 15px;
    grid-row-gap: 10px;
}

.past_perform_image {
    grid-area: 1 / 1 / 3 / 2;
}

.tab_photo_box {
    grid-area: 1 / 2 / 3 / 3;
}

.past_perform_textbox {
    grid-area: 3 / 1 / 4 / 3;
}
/* ここまでグリッド */

/* 768px未満で改行タグを有効に。 */
.sp_br {
    display: block; 
}

.past_perform_text{
    font-size: 14px;
}
.comment{
    width: 100%;
}

.comment_titlle{
    font-size: 22px;
}

.comment_text{
    font-size: 12px;
}

.past_performance_background{
    padding-bottom: 28px;
}

.photo_text_box{
    width: 37%;
}

.tab_photo_box{
    flex-direction: column;
    justify-content: center;
}

.tab_photo{
    aspect-ratio: 140/87;
}

.tab_photo3{
    display: none;
}

/* これまでの活動SP */
.archives_list{
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
}
.archives .section_text{
    transform: translate(0);
}
.archives_header{
writing-mode: horizontal-tb;
top: 60%;
}

dd.archives_titlle{
    width: 100%;
    margin-left: 0;
}

dd.archives_category{
    margin-left: 5px;
}

dl.archives_list_box{
    padding-left: 0;
    margin-top: 45px;
}
}


@media (max-width: 600px) {
.snsbutton_area a::after{
    left: 83%;
}}