/* @use 'variables' as *; */

.sec_mrg{margin-bottom: calc(var(--main_distance)*2) !important;}

.sec_cover{background-color: #971670b8;padding: calc(var(--main_distance)*2.5) 0;-webkit-clip-path: polygon(0 12.28vw, 100% 0, 100% calc(100% - 12.28vw), 0 100%);clip-path: polygon(0 12.28vw, 100% 0, 100% calc(100% - 12.28vw), 0 100%);
    &.c_02{background-color: #0083b3de;margin-top: -12.28vw;clip-path: polygon(0 12.28vw, 100% 0, 100% 100%, 0 100%);padding: calc(var(--main_distance)*2.5) 0 0;}
}

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


/* fv
------------------------------------------*/
#fv {position: relative;padding-top: calc(54px + 2vw);}
#fv .fv_flex {display: flex;gap: 0 4%;}
#fv .fv_flex .texts {position: relative;width: 52%;padding-top: min(80px,6vw);}
#fv .fv_flex .texts .logo {display: block;width: 100%;height: auto;margin-bottom: 6%;}
#fv .fv_flex .texts .logo img { display: block; width: 100%; }
#fv .fv_flex .texts .fv_dateplace {display: block;width: 80%;height: auto;margin: 0 auto;margin-bottom: 6%;}
#fv .fv_flex .texts .fv_dateplace img { display: block; width: 100%; }
#fv .fv_flex .texts .sub_catch{ margin-bottom: 3vw;}
#fv .fv_flex .texts .fv_credits {display: block;width: 100%;height: auto;margin: 0 auto;}
#fv .fv_flex .texts .fv_credits img { display: block; width: 100%; }
#fv .fv_flex .kv {position: relative;width: 44%;}
#fv .fv_flex .kv img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media only screen and (max-width: 835px) { 
    #fv {padding-top: 40px;margin-bottom: 4vw;}
    #fv .fv_flex { flex-direction: column; width: 100%; max-width: initial; }
    #fv .fv_flex .kv {width: 100%;margin-bottom: 6%;aspect-ratio: initial;}
    #fv .fv_flex .texts {width: 100%;z-index: 1;transform: initial;padding: 0;}
    #fv .fv_flex .texts .logo { margin-bottom: 6%; display: none;}
    #fv .fv_flex .texts .fv_dateplace {width: 80%;margin-bottom: 6%;}
    #fv .fv_flex .texts .fv_credits {width: 100%;} 
    #fv .fv_flex .texts .sub_catch{ margin-bottom: 10vw;}
}


/* movie
-------------------------------*/
.movie{ width: 90%; max-width: 640px; margin: 4vw auto 0;}

@media only screen and (max-width: 835px) { 
    .movie{ margin:8vw auto 0;}
}

/* catch
-------------------------------*/
#catch { position: relative; /*padding: calc(var(--main_distance)*1) 0;*/ }
#catch .catch_text { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: clamp(13px, 5vw, 28px); line-height: 3.0em; letter-spacing: 0.15em; transform: scale(0.9, 1); text-align: center; }
#catch .catch_text p { margin-bottom: 1.5em; font-weight: 400; }
#catch .catch_text p:last-of-type { margin-bottom: 0; }

@media only screen and (max-width: 835px) { 
    #catch { padding: calc(var(--main_distance)*2) 0 0; }
  #catch .catch_text { text-align: left; line-height: 3.5em; }
  #catch .catch_text p { writing-mode: vertical-rl; } }

/* news
-------------------------------*/
.cmn_news_list { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; text-align: left; margin-bottom: calc(var(--main_gap)*2); margin-top: -3em; }
.cmn_news_list li { position: relative; display: block; width: 100%; height: auto; }
.cmn_news_list li .news_rack { position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 1.0em; width: 100%; height: auto; color: #AFDCDD; border-bottom: 1px solid #AFDCDD; font-size: clamp(15px, 2vw, 18px); line-height: 1.8em; padding: 2.2em 0; padding-right: 3em; }
.cmn_news_list li .news_rack .date { position: relative; display: block; width: 4.5em; font-size: 2.2em; line-height: 1em; font-weight: 300; letter-spacing: 0.05em; margin-bottom: 0; white-space: nowrap; transition: 0.2s; }
.cmn_news_list li .news_rack .date span { font-size: 0.6em; }
.cmn_news_list li .news_rack .title { position: relative; display: block; width: calc(100% - 1.0em - 3em - 5em); transition: 0.2s; }
.cmn_news_list li .news_rack::after { position: absolute; display: block; content: ""; top: 50%; right: 0; width: 2em; height: 2em; background: no-repeat center url(../images/svg/icon_arrow_r.svg); background-size: contain; transform: translateY(-50%); transition: 0.2s; }
.cmn_news_list li .news_rack:hover { color: #fff; }
.cmn_news_list li .news_rack:hover::after { transform: translateY(-50%) translateX(10%); }

@media only screen and (max-width: 767px) { .cmn_news_list li .news_rack { flex-direction: column; align-items: flex-start; padding: 2.5em 0; padding-right: 0; gap: 0.5em; }
  .cmn_news_list li .news_rack .date { width: 100%; }
  .cmn_news_list li .news_rack .title { width: 100%; }
  .cmn_news_list li .news_rack::after { top: 2.5em; transform: translateY(0); }
  .cmn_news_list li .news_rack:hover::after { transform: initial; }
  .cmn_news_list.sp_mb { margin-bottom: calc(var(--main_distance)*0.4); } }

/* cast
-------------------------------*/
#cast .cast_list { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; font-size: min(30px, 5vw); gap: 1.5em; margin-bottom: calc(var(--main_gap)*3); }
#cast .cast_list.type_photo { gap: var(--main_gap); row-gap: calc(var(--main_gap)*2); }
#cast .cast_list.type_photo .cast_box { display: block; width: calc( (100% - (var(--main_gap) * 3)) / 4); filter: drop-shadow(min(9px,2vw) min(9px,2vw) 0px #9EB342);
    &:nth-child(2n){filter: drop-shadow(min(9px,2vw) min(9px,2vw) 0px #C96F3C);
        .photo .name{color: #C96F3C;}
    }
    &:nth-child(3n){filter: drop-shadow(min(9px,2vw) min(9px,2vw) 0px #1B99CC);
        .photo .name{color: #1B99CC;}
    }
    &:nth-child(4n){filter: drop-shadow(min(9px,2vw) min(9px,2vw) 0px #9D85B7);
        .photo .name{color: #9D85B7;}
    }
}
#cast .cast_list.type_photo .cast_box .photo { display: block; width: 100%; height: auto; margin-bottom: calc(var(--main_gap) * 0.5);}
#cast .cast_list.type_photo .cast_box .photo figure{border: 8px solid #1F2966;line-height: 0;font-size: 0; margin-bottom: 12px;}
#cast .cast_list.type_photo .cast_box .photo figure img { display: block; width: 100%; height: auto; margin-bottom: 0.6em;}
#cast .cast_list.type_photo .cast_box .photo .name {font-size: min(34px,6vw);font-weight: bold;line-height: 1em;text-align: center;margin: 0;color:#9EB342;background-color: #1f2966;padding: 0.3em 0;}

#cast .cast_list.type_txt .name { line-height: 1.4em; margin-bottom: 0em; font-size: 18px; }
#cast .cast_list.type_txt .name span { font-size: 0.8em; }

.staff_wrap{ padding-top: 3vw;}
.staff_wrap .s_name{font-size: 24px;line-height: 1.8em;margin-bottom: 1.5em;display: flex;flex-direction: column;}
.staff_wrap .s_name .role{display: inline-block;font-size: min(20px,4vw);font-weight: bold;line-height: 1.5em;}
.staff_wrap .s_name .name{display: inline-block;font-size: min(30px,6vw);font-weight: bold;line-height: 1.5em;
    .small{
    font-size: 0.4em;
}
}

@media only screen and (max-width: 835px) { #cast .cast_list.type_photo .cast_box { width: calc( (100% - (var(--main_gap) * 1)) / 2); }
  #cast .cast_list.type_txt { flex-direction: column; align-items: center; } }
/* introduction
-------------------------------*/
#introduction .intro_text {}
#introduction .intro_text p { margin-bottom: 1.5em; font-weight: 400; }
#introduction .intro_text p:last-of-type { margin-bottom: 0; }


#introduction .summary{ line-height: 2.2em; font-size: 18px;padding-top: 3em;}
#introduction .summary h3{ font-size: 30px; line-height: 1.7em; margin-bottom: 1em; text-align: center; color:#E4004F; font-weight: bold; }

@media only screen and (max-width: 835px) { 
    #introduction .summary{ font-size: 14px; line-height: 2em; text-align: left; padding: 0 1em;}
    #introduction .summary h3{ font-size:20px; }
    #introduction .intro_text { text-align: left; line-height: 2em; }

}
/* schedule
-------------------------------*/
#schedule .date { display: block; width: min(700px, 90%); height: auto; margin: 0 auto calc(var(--main_gap)*1.0); margin-bottom: 3em; }
#schedule .block{margin-bottom: min(80px,10vw);}
#schedule .block:last-of-type{margin-bottom: 0;}
#schedule .block .stit{font-size: min(80px,12vw);font-weight: 800;line-height: 1.5em;margin-bottom: 0.2em;color: #FFE000;}
#schedule .block .map{display: inline-block;font-size: min(28px,4vw);font-weight: 800;line-height: 1.5em;margin-bottom: 1.5em;color: #fff;position: relative;transition: 0.2s;
    span{position: relative;display: inline-block;border-bottom: 2px solid #fff;
        &::after{position: absolute;display: block;content: "";background-image: url(../images/icon_map.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 24px;height: 35px;left: -40px;bottom: 0;}
    }
    &:hover{opacity: 0.8;}
}
#schedule .block .hoshitori{ display: block; width: min(700px, 90%); height: auto; margin: 0 auto 1.5em; }

@media only screen and (max-width: 835px) { 
    #schedule .block .map{
        span{
            &::after{width: 14px;height: 23px;left: -26px;}
        }
    }
}

/* venue
-------------------------------*/
#venue .place { position: relative; display: inline-block; font-size: min(35px, 5.5vw); line-height: 1.4em; margin-bottom: 1.5em; color: #AFDCDD; transition: 0.2s; }
#venue .place::after { position: absolute; display: block; content: ""; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #AFDCDD; transition: 0.2s; }
#venue .place:hover { color: #fff; }
#venue .place:hover::after { background-color: #fff; }
#venue .stagemap { width: 100%; max-width: 600px; margin: 1em auto 0; }

@media only screen and (max-width: 835px) { 
    #venue .place { padding-bottom: 1em;}
}

/* tickets
-------------------------------*/
#tickets{}

#tickets .ticket_list { --ticket_frame_size:clamp(8px, 2vw , 8px); margin-bottom: calc(var(--main_distance)*0.5); }
#tickets .ticket_list .ticket_box {position: relative;display: block;margin: 0 auto calc(var(--main_gap)*1.5);width: 100%;height: auto;padding: calc(var(--ticket_frame_size)*2.5 + var(--main_gap)*1 );border: 6px solid #FFE000;background-color: #CE1867;}
#tickets .ticket_list .ticket_box .price{
    margin-bottom: 60px;
}
#tickets .ticket_list .ticket_box .price .flex{display: flex;justify-content: space-between;gap: calc(var(--main_gap)*1);border-bottom: 1px solid #fff;margin-bottom: 12px;}
#tickets .ticket_list .ticket_box .price .flex .left{font-size: 3em;font-weight: bold;line-height: 1.5em;
    p{margin: 0;}
}
#tickets .ticket_list .ticket_box .price .flex .right{font-size: 3em;font-weight: bold;line-height: 1.5em;
    p{margin: 0;
        span{
            font-size: 0.5em;
        }
    }
}
#tickets .ticket_list .ticket_box .price .note{text-align: left;}

#tickets .ticket_list .ticket_box .btn_area{margin-bottom: 60px;}
#tickets .ticket_list .ticket_box .btn_area .stit{color: #FFE000;font-size: 2.6em;font-weight: 800;line-height: 1.3em;margin-bottom: 0.7em;}
#tickets .ticket_list .ticket_box .btn_area .t_btn{position: relative;background-color: #FFE000;color: #1F2966;display: block;font-size: 2.4em;font-weight: 800;line-height: 1em;padding: 1em 0;border-radius: 100px;border: 6px solid #1F2966;
    &:after{position: absolute;display: block;content: "";top: 50%;right: 1.5em;width: 30px;height: 30px;background: no-repeat center url(../images/arrow.png);background-size: contain;transform: translateY(-50%);transition: 0.2s;}
    &:hover{
        &:after{right: 1.2em;}
    }
}

#tickets .ticket_list .ticket_box .ticket_title { font-size: clamp(16px, 3vw, 24px); line-height: 1.4em; font-weight: bold; margin-bottom: 0.6em; }
#tickets .ticket_list .ticket_box .period { font-size: clamp(14px, 2vw, 18px); line-height: 1.4em; font-weight: bold; }
#tickets .ticket_list .ticket_box .notes { border-top: 1px solid #E4004F; padding: 1em 0 0; margin-top: 1.5em; }
#tickets .ticket_list .ticket_box .notes p:last-of-type { margin-bottom: 0; }
#tickets .ticket_list .ticket_box.disactive { filter: grayscale(1) brightness(0.5); }

#tickets .ticket_list .ticket_box .wheelchair{text-align: left;border: 1px solid #F3F3F3;padding: 3%;font-size: 14px;line-height: 1.7em;}
#tickets .ticket_list .ticket_box .wheelchair strong{ margin-bottom: 1em; display: block; text-align: center;}
#tickets .ticket_list .ticket_box .wheelchair hr{border-color: #F3F3F3;margin: 1em 0;}

#tickets .tsuika{ text-align: left; padding: 3%; background-color: rgba(255,255,255,0.1); margin-top: 20px;}
#tickets .tsuika .date{ border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 1em 0;}

.haishin{ background-color: #000; margin-bottom: 100px; border: 2px solid #E4004F; padding: 3%;}
.haishin h3{ font-weight: bold; font-size: 24px; line-height: 1.5em; margin-bottom: 1em;}
.haishin .date{ font-size: 24px; line-height: 1.7em; margin-bottom: 0.5em;}
.haishin .btn{ background-color:#fff; color: #E4004F; display: block; padding: 1.5em; font-size: 18px; line-height: 1em; transition: 0.5s; margin-top: 1.5em;}
.haishin .btn:hover{ opacity: 0.8;}

@media only screen and (max-width: 835px) { 
    #tickets .ticket_list .ticket_box{padding: 5%;border: 4px solid #FFE000;}
    #tickets .ticket_list .ticket_box .wheelchair{ padding: 5%;}

    #tickets .ticket_list .ticket_box .price{margin-bottom: 30px;}
    #tickets .ticket_list .ticket_box .price .flex .left{font-size: 1.6em;}
    #tickets .ticket_list .ticket_box .price .flex .right{font-size: 1.6em;}

    #tickets .ticket_list .ticket_box .btn_area{margin-bottom: 40px;}
    #tickets .ticket_list .ticket_box .btn_area .stit{font-size: 1.2em;line-height: 1.5em;}
    #tickets .ticket_list .ticket_box .btn_area .t_btn{font-size: 1.3em;border: 3px solid #1F2966;
        &:after{width: 16px;height: 16px;}
    }
	
	.haishin{ padding: 5%; margin-bottom: 20px;}
	.haishin h3{ font-size: 20px;}	
	.haishin .date{ font-size: 20px;}
	.haishin .btn{ font-size: 16px; padding: 1.2em;}
}

/* goods
-------------------------------*/
#goods{}
#goods ul{ display: flex; flex-wrap: wrap;}
#goods li{ width:32%; text-align: left; margin-right: 2%; }
#goods li:nth-child(3n){ margin-right: 0;}

#goods li figure{ margin-bottom: 1em;}
#goods li .lead{ margin-bottom: 1em; border-bottom: 1px solid #6a8f90; padding-bottom: 1em;}
#goods li .lead strong{ display: block; font-weight: bold; font-size: 1.2em; margin-bottom: 0.5em;}
#goods li .txt{ font-size: 14px; line-height: 1.7em;}


@media only screen and (max-width: 835px) {
	#goods ul{ display: inherit;}
	#goods li{ width: 100%; margin-bottom: 2em;}
	#goods li .txt{ line-height: 1.5em;}
}

/* guide
-------------------------------*/
#guide .guide_block{ text-align: left; margin-bottom:1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #6a8f90; font-size: 14px; line-height: 1.7em;}
#guide .guide_block .gtit{ font-weight: bold; font-size: 1.2em; line-height: 1.5em; margin-bottom: 1em;}


/*---------------------------------------- in news
------------------------------------------*/
#in_news .news_article { margin-bottom: calc(var(--main_gap)*4); }

/* add */
.playguide ul { display: flex; justify-content: center; }

.playguide li { width: 33.33%; padding: 1%; }

.playguide li a { background-color: #fff; padding: 5%; display: block; color: #245b5d; transition: 0.3s; font-weight: bold; }
.playguide li a.sold{ color: #900; opacity: 0.7;}

.playguide li a:hover { opacity: 0.8; }

.playguide li figure { width: 80%; margin: 0 auto; max-width: 100px; }

@media only screen and (max-width: 835px) { 
  .playguide ul { display: inherit; }
  .playguide li { width: 100%; padding: 0; margin-bottom: 10px; }
  .playguide li a { display: flex; align-items: center; justify-content: flex-start; padding: 1% 5%; }
  .playguide li figure { width: 20%; margin: 0 10% 0 0; } }


.bnr_area{}
.bnr_area .stit{text-align: center;font-size: min(40px,8vw);font-weight: bold;line-height: 1em;margin-bottom: 1em;
    span{display: inline-block;background-color: #1F2966;padding: 0.1em;}
}
.bnr_area a{display: inline-block; transition: 0.2s;
    &:hover{opacity: 0.8;}
}
.bnr_area a img{}