.mask_anime {overflow: hidden;position: relative;display: inline-block}
.mask_anime:after {position: absolute;content: "";width: 100%;height: 101%;background: var(--c_theme_color);top: 0;left: 0;transform: scale(0, 1)}
.mask_anime > div, .mask_anime > img {opacity: 0}
.mask_anime.scroll_in:after {-webkit-animation: mask_slide .7s both;animation: mask_slide .7s both}
.mask_anime.scroll_in > div, .mask_anime.scroll_in > img {-webkit-animation: mask_show .7s both;animation: mask_show .7s both}
.show_anime {filter: blur(30px);opacity: 0}
.show_anime.scroll_in {filter: blur(0px);opacity: 1;transition: 1s}

@-webkit-keyframes mask_slide {0% {  transform: scale(0, 1);  transform-origin: left}
  48% {  transform: scale(1, 1);  transform-origin: left}
  52% {  transform: scale(1, 1);  transform-origin: right}
  100% {  transform: scale(0, 1);  transform-origin: right}
}
@keyframes mask_slide {
    0% {  transform: scale(0, 1);  transform-origin: left}
  48% {  transform: scale(1, 1);  transform-origin: left}
  52% {  transform: scale(1, 1);  transform-origin: right}
  100% {  transform: scale(0, 1);  transform-origin: right}}
@-webkit-keyframes mask_show {0% {  opacity: 0}
  48% {  opacity: 0}
  52% {  opacity: 1}
  100% {  opacity: 1}}
@keyframes mask_show {0% {  opacity: 0}
  48% {  opacity: 0}
  52% {  opacity: 1}
  100% {  opacity: 1}}
@-webkit-keyframes show_logo {0% {  filter: blur(30px);  opacity: 0}
  10% {  transform: translateX(-4px)}
  30% {  transform: translateX(4px)}
  50% {  transform: translateX(-2px)}
  70% {  transform: translateX(2px)}
  100% {  filter: blur(0px);  opacity: 1}}
@keyframes show_logo {0% {  filter: blur(30px);  opacity: 0}
  10% {  transform: translateX(-4px)}
  30% {  transform: translateX(4px)}
  50% {  transform: translateX(-2px)}
  70% {  transform: translateX(2px)}
  100% {  filter: blur(0px);  opacity: 1}}
#loading .logo img {-webkit-animation: show_logo 1s both;animation: show_logo 1s both}
.body_top .fix_bg:after {scale: 1.1}
.body_top #fv .fv_inner .kv {filter: blur(30px);opacity: 0}
.body_top.intro_on .fix_bg:after {scale: 1;transition: 1.6s}
.body_top.intro_on #fv .fv_inner .kv {filter: blur(0px);opacity: 1;transition: 1.5s}
.body_top.intro_on #fv .mask_anime:after {-webkit-animation: mask_slide .6s both;animation: mask_slide .6s both;-webkit-animation-delay: .8s;animation-delay: .8s}
.body_top.intro_on #fv .mask_anime > div, .body_top.intro_on #fv .mask_anime > img {-webkit-animation: mask_show .6s both;animation: mask_show .6s both;-webkit-animation-delay: .8s;animation-delay: .8s}
.section_wrap:not(:last-of-type) {margin-bottom: 200px}
@media screen and (max-width: 835px) {.section_wrap:not(:last-of-type) {  margin-bottom: 100px}}
.h_outer {margin-bottom: 100px}
.h_outer .sec_h img {max-height: 19vw}
@media screen and (max-width: 835px) {.h_outer {  margin-bottom: 40px}
  .h_outer .sec_h img {  max-height: 24vw}}
main {margin-bottom: 200px}
@media screen and (max-width: 835px) {main {  margin-bottom: 80px}}
.fix_bg {position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;--bg_frame: clamp(10px, 2vw, 30px)}
.fix_bg:before {position: absolute;content: "";width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(../images/bg/bg_frame.webp) no-repeat center;background-size: cover;z-index: 1}
.fix_bg::after {position: absolute;content: "";width: calc(100% - var(--bg_frame)*2);height: calc(100% - var(--bg_frame)*2);top: 50%;left: 50%;translate: -50% -50%;background: url(../images/bg/bg_black.jpg) no-repeat center;background-size: cover;z-index: 2}
#fv {position: relative;--kv_img_w_num: 655;--kv_img_h_num: 926;--kv_tb_padding_num: 60;--kv_area_w_num: 47;--fv_flex_gap: 6%;--header_height_num: 30;margin-bottom: 200px}
#fv .fv_inner {position: relative;display: flex;align-items: center;justify-content: space-between;max-width: calc(100vh*var(--kv_img_w_num)/var(--kv_area_w_num)*100/(var(--kv_img_h_num) + var(--kv_tb_padding_num)*2 + var(--header_height_num)*2));width: 90%;margin: 0 auto}
#fv .fv_inner .kv {position: relative;display: block;width: calc(1%*var(--kv_area_w_num));aspect-ratio: var(--kv_img_w_num)/calc(var(--kv_img_h_num) + var(--kv_tb_padding_num) * 2 + var(--header_height_num) * 2)}
#fv .fv_inner .kv img {display: block;width: 100%;height: 100%;-o-object-fit: contain;object-fit: contain}
#fv .fv_inner .text_block {position: relative;width: calc(100% - 1%*var(--kv_area_w_num) - var(--fv_flex_gap));text-align: center;color: var(--c_lightgray)}
#fv .fv_inner .text_block .logo {margin: 0 auto min(1vh, 1vw);width: 90%}
#fv .fv_inner .text_block .credit {margin: 0 auto min(4vh, 1vw);width: 60%}
#fv .fv_inner .text_block .catch {font-size: min(2vw, 30px);line-height: 1.2em;margin: 0 auto min(2vh, 1.2vw);width: 90%}
#fv .fv_inner .text_block .sub_catch {font-size: min(1.4vw, 20px);line-height: 1.8em;margin: 0 auto min(2vh, 2vw);width: 84%}
#fv .fv_inner .text_block .dateplace {margin-bottom: 1.6vw}
#fv .fv_inner .text_block .dateplace img {max-height: 16vh}
#fv .fv_inner .text_block .fv_cast {width: 70%;margin: 0 auto}
#fv .fv_inner .text_block .fv_cast img {max-height: 6vh}
@media screen and (max-width: 835px) {#fv {  padding-top: 60px;  margin-bottom: 24vw}
  #fv .fv_inner {  flex-direction: column;  width: 84%;  gap: 8vw}
  #fv .fv_inner .kv {  width: 100%;  aspect-ratio: initial}
  #fv .fv_inner .text_block {  width: 100%}
  #fv .fv_inner .text_block .logo {  margin-bottom: 4vw}
  #fv .fv_inner .text_block .credit {  margin: 0 auto 4vw;  width: 70%}
  #fv .fv_inner .text_block .catch {  width: 100%;  margin-bottom: 3vw}
  #fv .fv_inner .text_block .sub_catch {  width: 100%;  margin-bottom: 6vw}
  #fv .fv_inner .text_block .fv_cast {  width: 78%}}
#introduction .intro_text .block:not(:last-of-type) {margin-bottom: 100px}
#introduction .intro_text .block p {font-size: clamp(14px, 1.6vw, 18px);line-height: 3em}
#introduction .intro_text .block p:not(:last-of-type) {margin-bottom: 2.2em}
#introduction .intro_text .block p .highlight {color: var(--c_theme_color);font-size: clamp(18px, 2vw, 28px);line-height: 1em;padding-inline: .3em}
#introduction .intro_text .block .tit {font-size: 36px;line-height: 1.2em;margin-bottom: .5em;color: var(--c_theme_color);font-weight: bold}
@media screen and (max-width: 835px) {#introduction .intro_text .block:not(:last-of-type) {  margin-bottom: 50px}
  #introduction .intro_text .block p {  line-height: 2.9em}
  #introduction .intro_text .block p:not(:last-of-type) {  margin-bottom: 1.8em}
  #introduction .intro_text .block .tit {  font-size: 28px;  line-height: 1.4em}}
#cast .cast .cast_img {aspect-ratio: 264/344;background: #ababab;margin-bottom: clamp(18px, 2.4vw, 30px)}
#cast .cast .name_block {text-align: center;font-size: clamp(18px, 2vw, 22px);line-height: 1.4em}
#cast .cast .name_block .part {color: var(--c_text_gray)}
#cast .cast_wrap {margin-bottom: 120px}
#cast .staff_list .tit {color: var(--c_theme_color);font-size: 36px;text-align: center;line-height: 1.2em;margin-bottom: 1em}
#cast .staff_list .list:not(:last-of-type) {margin-bottom: 60px}
#cast .staff_list .list li {display: flex;justify-content: center;align-items: center}
#cast .staff_list .list li .part {color: var(--c_text_gray);font-size: clamp(15px, 1.6vw, 18px);line-height: 1.3em;display: block;padding-right: .4em;letter-spacing: .1em}
#cast .staff_list .list li .name {font-size: clamp(18px, 2vw, 22px);line-height: 1.3em;margin-bottom: 0}
#cast .staff_list .list li:not(:last-of-type) {margin-bottom: 1.5em}
#cast .staff_list .comment {display: inline-block;border: 1px solid var(--c_theme_color);padding: 2px 34px;line-height: 1.3em;cursor: pointer;margin-left: 14px}
.comment_modal .modal_inner {width: min(90%, 1000px);border: 1px solid var(--c_text_gray)}
.comment_modal .comment_text {max-height: 84vh;overflow-y: scroll;padding: clamp(20px, 4vw, 40px);background: #000}
.comment_modal .comment_text .tit {font-weight: bold;font-size: clamp(18px, 2vw, 24px);line-height: 1.4em}
.comment_modal .comment_text .text p {font-size: clamp(15px, 1.4vw, 18px);line-height: 1.8em}
@media screen and (max-width: 835px) {#cast .cast .cast_img {  margin-bottom: 10px}
  #cast .cast .name_block {  font-size: 18px;  line-height: 1.4em}
  #cast .cast_wrap {  row-gap: 20px;  margin-bottom: 60px}
  #cast .staff_list .list li .part {  font-size: 14px;  line-height: 1.3em}
  #cast .staff_list .list li .name {  font-size: 18px;  line-height: 1.3em}}
#schedule .dateplace {text-align: center;margin-bottom: 70px}
#schedule .cmn_schedule_grid {margin-bottom: 20px}
#schedule .wrap_1100px.w_92 {width: 88%}
#schedule .star {color: var(--c_theme_color)}
@media screen and (max-width: 835px) {#schedule .dateplace {  margin-bottom: 4vw}}
#tickets .price_wrap {margin-bottom: 50px}
#tickets .price_wrap .note {text-align: right}
#tickets .price_list {border-top: 1px solid #fff;border-bottom: 1px solid #fff;padding: clamp(30px, 3vw, 50px) 0;margin-bottom: 10px}
#tickets .price_list dl {display: flex;justify-content: space-between;align-items: center}
#tickets .price_list dl dt {font-size: clamp(32px, 3vw, 40px);line-height: 1.4em;color: var(--c_theme_color)}
#tickets .price_list dl dt span {font-size: clamp(18px, 2vw, 24px);line-height: 1.2em;color: #fff;display: block}
#tickets .price_list dl dd {font-size: clamp(32px, 3vw, 40px);line-height: 1.4em;text-align: right}
#tickets .price_list dl dd .tit {display: inline-block;font-size: .75em;line-height: 1em}
#tickets .price_list dl dd span {font-size: clamp(18px, 2vw, 24px);line-height: 1em}
#tickets .tk_wrap:not(:last-of-type) {margin-bottom: 80px}
#tickets .tk_wrap .wrap_tit {text-align: center;font-weight: bold;font-size: 36px;line-height: 1.2em;margin-bottom: 30px}
#tickets .tk_wrap .tk_block {border: 1px solid #707070;background: rgba(0, 0, 0, .291);padding: clamp(30px, 3.6vw, 60px) clamp(20px, 2.2vw, 40px)}
#tickets .tk_wrap .tk_block:not(:last-of-type) {margin-bottom: 30px}
#tickets .tk_wrap .tk_block .main_content:has(.btn_wrap) {display: flex;justify-content: space-between;align-items: center;gap: 40px}
#tickets .tk_wrap .tk_block .main_content:has(.btn_wrap) .text_block {width: calc(100% - 320px)}
#tickets .tk_wrap .tk_block .main_content:has(.btn_wrap) .btn_wrap {width: 300px}
#tickets .tk_wrap .tk_block .main_content .tk_tit {font-size: clamp(20px, 2.4vw, 28px);line-height: 1.2em;color: var(--c_theme_color);margin-bottom: .5em}
#tickets .tk_wrap .tk_block .main_content .tk_text {font-size: clamp(16px, 1.8vw, 20px);line-height: 1.5em}
#tickets .tk_wrap .tk_block .main_content .tk_text p {margin-bottom: 0}
#tickets .tk_wrap .tk_block .main_content .tk_text p:not(:last-of-type) {margin-bottom: .4em}
#tickets .tk_wrap .tk_block .main_content .btn_wrap .btn_outer:not(:last-of-type) {margin-bottom: 10px}
#tickets .tk_wrap .tk_block .note_wrap {margin-top: 1.4em;font-size: 14px;line-height: 1.5em}
#tickets .tk_wrap .tk_block .note_wrap p {margin-bottom: 0}
#tickets .tk_wrap .tk_block .note_wrap p:not(:last-of-type) {margin-bottom: .4em}
#tickets .tk_outer_wrap {margin-bottom: 160px}
#tickets .contact_wrap {margin-bottom: 100px}
#tickets .contact_wrap .contact {border: 1px solid #707070;background: rgba(0, 0, 0, .291);padding: 28px 20px}
#tickets .contact_wrap .contact:not(:last-of-type) {margin-bottom: 30px}
#tickets .contact_wrap .contact .tit {font-size: 20px;line-height: 1.4em;padding-bottom: 18px;margin-bottom: 18px;border-bottom: 1px solid #ccc}
#tickets .contact_wrap .contact .text a {text-decoration: underline}
#tickets .caution_wrap .tit {font-size: 32px;line-height: 1.3em;text-align: center;margin-bottom: 30px}
#tickets .caution_wrap .cmn_write_box {border: 1px solid #707070;background: rgba(0, 0, 0, .291);padding: 28px 20px}

@media screen and (max-width: 835px) {
  #tickets .price_wrap .note {  text-align: left;  font-size: 12px;  line-height: 1.5em}
  #tickets .price_list {  padding: 16px 0;  margin-bottom: 10px}
  #tickets .price_list dl dt {  font-size: 16px;  line-height: 1.4em}
  #tickets .price_list dl dt span {  font-size: 10px;  line-height: 1.4em}
  #tickets .price_list dl dd {  font-size: 18px;  line-height: 1.4em}
  #tickets .price_list dl dd span {  font-size: 10px;  line-height: 1.4em;  display: inline-block}
  #tickets .tk_wrap:not(:last-of-type) {  margin-bottom: 40px}
  #tickets .tk_wrap .wrap_tit {  font-size: 24px;  line-height: 1.4em;  margin-bottom: 20px}
  #tickets .tk_wrap .tk_block {  padding: 18px 10px;  flex-direction: column;  gap: 10px}
  #tickets .tk_wrap .tk_block:not(:last-of-type) {  margin-bottom: 14px;}
  #tickets .tk_wrap .tk_block .main_content:has(.btn_wrap) { flex-direction: column;  gap: 20px;}
  #tickets .tk_wrap .tk_block .main_content:has(.btn_wrap) .text_block {  width: 100%;}
  #tickets .tk_wrap .tk_block .main_content:has(.btn_wrap) .btn_wrap {  width: 100%;}
  #tickets .tk_wrap .tk_block .main_content .tk_tit {  font-size: 18px;  line-height: 1.4em;  margin-bottom: .5em}
  #tickets .tk_wrap .tk_block .main_content .tk_text {  font-size: 14px;  line-height: 1.4em}
  #tickets .tk_wrap .btn_wrap {  width: 100%}
  #tickets .tk_wrap .btn_wrap .btn_outer .cmn_link_btn_a {  width: 100%}
  #tickets .tk_outer_wrap {  margin-bottom: 80px}
  #tickets .contact_wrap {  margin-bottom: 80px}
  #tickets .contact_wrap .contact {  padding: 20px 14px}
  #tickets .contact_wrap .contact:not(:last-of-type) {  margin-bottom: 10px}
  #tickets .contact_wrap .contact .tit {  font-size: 16px;  line-height: 1.3em;  padding-bottom: 10px;  margin-bottom: 14px}
  #tickets .contact_wrap .contact .text {  font-size: 14px;  line-height: 1.5em}
  #tickets .caution_wrap .tit {  font-size: 24px;  line-height: 1.4em}
  #tickets .caution_wrap .cmn_write_box {  padding: 20px 10px}
}

.txt_tit{ color: var(--c_theme_color); font-weight: bold; text-align: center; font-size: 5vw;}
.guide_txt{}

.guide_txt h3{ font-weight: 600; font-size: 1.3em; line-height: 1.5em; margin-bottom: 1em;color: #f33;}
.guide_txt h4{ font-weight: bold; font-size: 1.1em; line-height: 1.5em; margin-bottom: 0.5em;color: #f33; }
.guide_txt .block{ border-bottom: 1px solid #ccc; padding-bottom: 2em; margin-bottom: 2em; }
.guide_txt a{color: #f33;}


@media screen and (max-width: 835px) {
    .txt_tit{ font-size: 30px;}
}