@charset "utf-8";



.onload_quick.up,
.reveal.up{opacity: 0; transform: translateY(60px); transition: 1.8s;}
.onload_quick.up.open,
.reveal.up.scroll_in{opacity: 1; transform: translateY(0);}


/* 共通 */
main{width:100%;padding: 0;}
main img{width:100%;}

.container{width:92%;max-width: 1000px;margin: 0 auto;}

.btn_01{color: #000;background-color: #ff0;display: block;width: 100%;margin: 0 auto;font-size: 18px;font-weight: bold;line-height: 1.5em;letter-spacing: 0.1em;padding: 1.5em 0;text-align: center;max-width: 500px;position: relative;transition: 0.2s ease;}
.btn_01:after{content:"\025b6";position: absolute;right: 1.3em;top: 50%;transform: translateY(-50%);color: #000;transition: 0.2s ease;}
.btn_01:hover{ color: #555; opacity: 1;}
.btn_01:hover:after{right: 1em;color: #000;transition: 0.2s ease;}

.tag{color: #fff;border: 1px solid #7e3dbf;background-color: #7e3dbf;font-size: 0.9em;line-height: 1.5em;padding: 0.1em 1.5em 0;margin-right: 0.7em;margin-bottom: 0.4em;display: inline-block;}
.tag.t_02{background-color: #fff;color: #7e3dbf;}
.tag.t_03{background-color: #cc9900;border-color: #cc9900;color: #fff;}

.youtube{position:relative;width:100%;margin-bottom: 1vw;display: block;line-height: 0;}
.youtube img{ transition: 0.2s ease;}
.youtube{position:relative;}
.youtube:hover{ opaxity:0.9; transition: 0.2s ease;}
.youtube .ro{position:absolute;visibility: hidden;opacity: 0;}
.youtube .ro{top: 50%;left: 50%;transform: translate(-50%,-50%);transition: 0.2s ease;width: 60px;}
.youtube:hover .ro{ visibility: visible; opacity: 1;}

.yt{position:relative;width:100%; margin:0 auto;padding-top:56.25%;}
.yt iframe{position:absolute;top:0;right:0;width:100%;height:100%;}

@media only screen and (max-width: 768px){
.youtube .ro{ opacity: 1; visibility: inherit;}
}



.pop_box{ background-color: #fff; padding: 3% 4%; color: #000; text-align: left; /*border: 10px solid #cc0001;*/}
.pop_box.important{ border: 10px solid #000;}
.pop_box .tit{ text-align: center; font-size: 20px; font-weight: bold; line-height: 1.4em; margin-bottom: 40px;}
.pop_box .txt_box{font-size: 16px; line-height: 1.7em; font-weight: 400; }
.pop_box .txt_box .prof_detail{margin-bottom: 1.2em;width: 50%;flex-grow: 1;}
.pop_box .txt_box p:last-child{ margin-bottom:0;}
.pop_box .txt_box p span{}
.pop_box .txt_box .name{font-size: 2em;font-weight: bold;line-height: 1.5em;margin-bottom: 0.5em;font-family: var(--font03);}
.pop_box .txt_box .prof_box{display: flex;justify-content: space-between;gap: 0 5%;}
.pop_box .txt_box figure{width: 45%;margin-bottom: 12px;line-height: 0;}
.pop_box .txt_box figure img{width: 100%;height: auto;pointer-events: none;}
.pop_box .txt_box .stit{ color: var(--keyc); font-weight: bold; line-height: 1em; margin-bottom: 0.5em; border-bottom: 1px solid var(--keyc); padding: 0.5em 0 0.5em 0;}

.pop_box .txt_box a{ word-break: break-word;}
.pop_box .txt_box ul{ list-style: disc; padding-left: 25px; margin-bottom: 24px;}
.pop_box .txt_box li{ font-size: 14px; line-height: 1.5em; margin-bottom: 8px;}
.pop_box .txt_box .note{ font-size: 12px; font-weight: bold; line-height: 1.5em; margin-bottom: 2em;}
.pop_box .comment_box{ border: 2px solid #cc0001; padding: 30px; background-color:#fff; margin-bottom: 20px;}
.pop_box .comment_box h4{ font-size: 20px; line-height: 1.5em; margin-bottom: 20px;}
.pop_box .comment_box p{ font-size: 16px; line-height: 1.5em; font-weight: 400; margin-bottom: 1.5em;}
.pop_box a{/* text-decoration: underline; */color: #f00;font-weight: bold;}


@media only screen and (max-width: 768px){
.pop_box{ /*border: 4px solid #cc0001;*/ padding: 20px;}
.pop_box.important{ border: 4px solid #000;}
.pop_box .tit{ text-align:left; font-size:17px; margin-bottom: 20px;}
    
.pop_box .txt_box .prof_box{ display: inherit; }
.pop_box .txt_box{font-size: 16px;margin-bottom: 1em;}
.pop_box .txt_box figure{ width: 100%;}
.pop_box .txt_box figure img{ }
.pop_box .txt_box .prof_detail{ width: 100%;}
.pop_box .txt_box ul{ padding-left: 18px; margin-bottom: 12px;}
.pop_box .txt_box li{ font-size: 13px; line-height: 1.4em;}
.pop_box .comment_box{ padding: 12px; margin-bottom:12px;}
.pop_box .comment_box h4{ font-size:16px; font-weight:bold; margin-bottom:12px;}
.pop_box .comment_box p{ font-size: 14px; margin-bottom: 1em; word-break: break-word;}
}



.page_tit{text-align: center;margin-bottom: 100px;color: var(--keyc);font-size: 50px;font-weight: 600;font-family: var(--font03);}
.page_tit .top_tit{position: relative;display: block;line-height: 1.5em;letter-spacing: 0.1em;margin-bottom: 0.3em;}
.page_tit .top_tit:after{position: absolute;content: "";background-image: url(../images/tit/line.png);background-position: center;background-size: contain;background-repeat: no-repeat;width: 440px;height: 57px;top: 72%;left: 50%;transform: translateX(-50%);z-index: -1;}
.page_tit .sub_tit{font-size: 0.4em;display: block;line-height: 1.5em;letter-spacing: 0.4em;font-weight: 900;}

.page_content{margin-top: min(200px,32vw);margin-bottom: 5vw;}

/* anime */
.page_tit{transform: scale(1.4); opacity: 0; transition: 1.8s cubic-bezier(0.25, 0.1, 0, 1.1);}
.page_tit.scroll_in,
.page_tit.open{transform: scale(1); opacity: 1;}

@media only screen and (max-width: 768px){
    .page_tit{font-size: 30px;margin-bottom: 40px;}
    .page_tit .top_tit.long{font-size: 0.8em;}
    .page_tit .top_tit:after{width: 70%;top: 43%;}
    .page_tit .sub_tit{}
}


/* in anime */
main .in_anime.in_slide{ top:10vw; opacity:0;}
main .pagetit.tit_anime{left:10vw; opacity:0;}



.nav_sns{ position: fixed; bottom: calc(1vw + 12px); left: calc(1vw + 12px); z-index: 100;}
.nav_sns ul{}
.nav_sns li{line-height: 0;width: 80%;margin-bottom: 0.4vw;}
.nav_sns li:last-child{ margin-bottom: 0;}
.nav_sns li a{ line-height: 0;}
.nav_sns li a img{ width: 100%; transition: 0.2s ease;}
.nav_sns li a:hover img{ transform: scale(1.05); opacity:1; transition: 0.2s ease;}

@media only screen and (max-width: 1000px){
    .nav_sns{ display:none;}
}

.cs{ margin: 30vw 0 10vw; font-size: 60px; font-weight: bold; font-family: 'Cormorant Garamond', serif; line-height: 1.5em;}


@media only screen and (max-width: 768px){
    main{ padding: 0px;}
    .container{width:90%;}
    .btn_01{width: 100%;font-size: 14px;}
    .line.tl,
    .line.tr,
    .line.bl,
    .line.br{ height: 16px; width: 16px;}
    .cs{ font-size: 34px; margin: 50vw 0 30vw;}
}


/********************** top *******************************/
#fv{position: relative;aspect-ratio: 16 / 9;margin-bottom: 20vw;}
#fv .main_tit{position: absolute;width: 18vw;top: 5vw;left: 21%;transform: translateX(-50%);}
#fv .kv{position: absolute;width: 46vw;top: -9vw;left: 50%;transform: translateX(-50%);}
#fv .kv img{pointer-events: none;}
#fv .txt_block{position: absolute;width: 20vw;top: 12vw;right: 6vw;}
#fv .txt_block .date{margin-bottom: 3vw;}
#fv .txt_block .place{width: 50%;margin: 0 auto 4vw;}
#fv .txt_block .cast{width: 90%;margin: 0 auto;}


@media only screen and (max-width: 768px){
    #fv{aspect-ratio: initial;margin-bottom: 34vw;display: flex;flex-direction: column;}
    #fv .main_tit{position: relative;width: 56vw;top: initial;left: initial;transform: initial;margin: 0 auto 12vw;}
    #fv .kv{position: relative;width: 106vw;top: -3vw;left: -1vw;transform: initial;}
    #fv .txt_block{position: relative;width: 90vw;top: initial;right: initial;margin: 0 auto;}
    #fv .txt_block .date{margin-bottom: 6vw;}
    #fv .txt_block .place{width: 50%;margin: 0 auto 12vw;}
    #fv .txt_block .cast{width: 70%;margin: 0 auto;}
}


.news_area.top{width: 100%;position: relative;}
.news_area.top .right{ width:100%; padding-left: 3%;}
.news_area ul{margin-bottom: 40px;}
.news_area li a{display:block;transition:0.2s;padding: 3% 0;}
.news_area li a:hover{background-color: #ffffff99;transition:0.2s;}
.news_area li{margin-bottom: 0;border-bottom: 1px solid #444;}
.news_area li p{color: #000;font-size: 16px;font-weight: bold;line-height: 1.4em;margin: 0;display: flex;justify-content: space-between;align-items: center;}
.news_area li p span.date{display: block;text-align: left;font-size: 16px;font-weight: bold;margin-bottom: 2px;color: #000;width: 7em;}
.news_area li p span.date span:first-child{ display: block; font-size: 0.8em; line-height: 1.5em;}
.news_area li p span.date span:last-child{font-size: 2em;line-height: 1.1em;}
.news_area li p span.content_tit{width: calc(100% - 7em);}

#top_news{margin-top: 0;margin-bottom: 220px;text-align:left;position:relative;background-image: url(../images/news_bg.jpg);background-position: center;background-size: auto;z-index: 1;}
#top_news:before,
#top_news:after{position: absolute;content: "";width: 100%;height: 100px;}
#top_news:before{background-image: url(../images/top_news_before.png);top: -100px;}
#top_news:after{background-image: url(../images/top_news_after.png);bottom: -99px;}
#top_news .page_tit{margin-bottom: min(40px, 6vw);}
#top_news .container{max-width: 1000px;position: relative;z-index: 2;}
#top_news .bg_box{position: absolute;width: 100%;height: 100%;top: 0;z-index: 1;pointer-events: none;}
#top_news .bg_box .ob_01{position: absolute;width: min(26%,400px);left: max(calc(220px * -1), calc(14vw * -1));top: max(calc(210px * -1), calc(16vw * -1));}
#top_news .bg_box .ob_02{position: absolute;width: min(260px,20%);right: max(calc(70px * -1), calc(16vw * -1));bottom: max(calc(240px * -1), calc(20vw * -1));}

/* anime */
/* #top_news.reveal{transform: scale(0.6); opacity: 0; transition: 1.2s;} */
#top_news.reveal .bg_box .ob_01 img{opacity: 0; transform: translateX(-30%); transition: 1.4s; }
#top_news.reveal .bg_box .ob_02 img{opacity: 0; transform: translateX(30%); transition: 1.4s; }

/* #top_news.scroll_in{transform: scale(1); opacity: 1; animation: tit_anime 1s ease forwards; animation-fill-mode: both;} */
#top_news.scroll_in .bg_box .ob_01 img{opacity: 1; transform: translateX(0);transition-delay: 0.6s;}
#top_news.scroll_in .bg_box .ob_02 img{opacity: 1; transform: translateX(0);transition-delay: 1s;}

#in_news{margin-bottom: 120px;}
#in_news .news_area{ width: 100%; text-align: left;}
#in_news .news_area li a{padding: 2% 0;}
#in_news .news_area li p{font-size: 18px;line-height: 1.5em;align-items: center;}
#in_news .news_area li p span{}

.twt_area{width: 46%;display: flex;}

.news_more{text-align: center;}
.news_more a{color: var(--keyc);padding: 0.8em;display: inline-block;width: 300px;font-size: 1.2em;font-weight: 400;transition: all 0.2s;position: relative;font-family: var(--font02);border: 1px solid var(--keyc);line-height: 1em;}
.news_more:hover{cursor: pointer;}
.news_more:hover a{ color: var(--keyc); transition:0.3s;}

@media only screen and (max-width: 768px){
    .top_main{margin-top: 60px;height: 147vw;margin-bottom: 40px;}
    .top_main figure{ top: 20px; left: 0; width: 100%;}
    .top_main .right{position: relative;width: 86%;top: 118vw;right: inherit;margin: -16vw auto 0;}

    .news_area.top{ width: 100%; margin-bottom: 60px;}
    .news_area.top .right{ padding-left: 0;}
    .news_area li a{padding: 20px 0;}
    .news_area li p{display: block;font-size: 16px;line-height: 1.5em;}
    .news_area li p span.date{
    width: 100%;
    margin-bottom: 12px;
}
    .news_area li p span.date span:first-child{}
    .news_area li p span.date span:last-child{font-size: 1.7em;}

    #top_news{display:inherit;margin-top:0;margin-bottom: 240px;}
    #top_news .container{ display: block;}
    #top_news .bg_box{}
    #top_news .bg_box .ob_01{width: 60%;left: -32%;top: -48vw;}
    #top_news .bg_box .ob_02{width: 40%;right: -14vw;bottom: -54vw;}

    #in_news{ margin-bottom: 0;}
    #in_news .news_area{ margin-bottom: 0;}
    .news_area ul{}
    #in_news .news_area li a{ padding: 4% 3%;}
    #in_news .news_area li p{font-size: 16px;}
    #in_news .news_area li p span{margin-bottom: 0.6em;}

    .twt_area{ width: 100%;}
    .twt_area iframe{ height: 240px !important;}

    .news_more{margin-bottom: 0;font-size: 16px;}
    .news_more a{padding: 1em;}
}



/********************** NEWS *******************************/
#in_news{}

.paging{text-align: center;}
.pagination {clear: both;padding: 20px 0;position: relative;font-size: 14px;line-height: 14px;text-align: center;display: inline-block;}
.pagination-box {display: inline-block;}
.pagination span, .pagination a {display: block;float: left;margin: 2px 12px 2px 0;padding: 10px 15px 10px 15px;text-decoration: none;width: auto;color: #555;background: transparent;position: relative;z-index: 1; color: #fff;}
.pagination span:after, .pagination a:after{content: "";position: absolute;background-color: #555;width: 34px;height: 34px;z-index: -1;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg); transition: 0.2s ease;}
.pagination a:after{background-color: transparent;}
.pagination a:hover{color: #fff;}
.pagination a:hover:after{background-color: #555; transition: 0.2s ease;}
.pagination .current{padding: 10px 15px 10px 15px;color: #fff;}

@media only screen and (max-width: 413px) {
    .pagination {font-size: 12px;line-height: 12px;}
    .pagination span, .pagination a {padding: 8px 10px 8px 10px;}
    .pagination a:hover{color: #555;}
    .pagination a:hover:after{background-color: transparent;}
    .pagination .current{padding: 8px 10px 8px 10px;}
}

/* SINGLE PARTS */
.single{text-align:left;overflow:hidden;position:relative;opacity:1;padding: 0 0 40px;/* color: #000; */}
.single .tit{text-align: left;font-size: 20px;font-weight: bold;line-height: 1.4em;opacity:1;margin-bottom: 30px;padding-bottom: 14px;border-bottom: 1px solid #ccc;}
.single .date{font-size: 0.8em;font-weight: 400;line-height: 1.5em;margin-bottom: 4px;}
.single .date span{ display: inline-block; font-size: 10px; line-height: 1em; vertical-align: middle; padding: 3px 10px; margin-right: 4px; position: relative; top: -2px;}
.single .date span:first-child{ margin-left: 8px; margin-right: 0px;}
.single .date span.new{ background-color:var(--keyc); color:#fff;}
.single .date span.tag{ background-color:#000; color:#fff;}
.single .date span.postpone{ background-color:#fff; color:#000; border:1px solid #000;}
.single .date span.cancell{ background-color:#000; color:#fff;}
.single .date span.tag a{ color:#fff;}
.single .date span.tag a:hover{ color: #7d7d7d;}

.single .txt_box{ border-bottom: 1px solid #ccc; padding-bottom: 30px; word-break: break-all;}
.single .txt_box .single_img{ line-height: 0; position: relative; padding-top: 36%; background-color: #fecedc; margin-bottom: 1em;}
.single .txt_box .single_img img{ position: absolute; width: auto; height: auto; max-width: 100%; max-height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0;}
.single .txt_box p{font-size: 16px;line-height: 1.8em;margin-bottom: 1.5em;}
.single .txt_box p strong{ font-size:1.4em; line-height: 1.5em;}
.single .txt_box .catch{ font-size: 18px; font-weight: bold; line-height: 1.5em; margin-bottom: 30px;}
.single .txt_box a{color: var(--keyc);text-decoration:underline;display: inline-block;margin-bottom:0;}
.single .txt_box a:hover{ opacity: 0.8; }
.single .txt_box img{ max-width:100%; width:auto; height:auto; display: block; margin-bottom:24px;}
.single .txt_box .btn_01{ display: block; max-width: inherit; padding: 1.5em 2.4em 1.5em 2em; color: #000; text-decoration: none; text-align: left; font-size: 15px;}
.single .txt_box .btn_01:hover{ color: #000;}

.single .txt_box blockquote{ background-color: #fff; color: #000; font-weight: bold;padding: 40px; margin-bottom: 40px;}
.single .txt_box blockquote .stit{ font-size: 20px; font-weight: bold; line-height: 1.5em;}
.single .txt_box blockquote .stit span{ font-size: 0.8em;}
.single .txt_box blockquote p{ font-weight: 500;}

.single .txt_box h1,
.single .txt_box h2,
.single .txt_box h3,
.single .txt_box h4,
.single .txt_box h5{ font-weight: bold; line-height: 1.4em; margin-bottom: 12px; letter-spacing: 0;}
.single .txt_box h1{ font-size: 26px;}
.single .txt_box h2{ font-size: 24px;}
.single .txt_box h3{ font-size: 22px;}
.single .txt_box h4{ font-size: 20px;}
.single .txt_box h5{ font-size: 18px;}

.single .txt_box hr{ margin: 2.5em 0; height: 1px; background-color: #ccc; border: none;}

.single_bottom{position: relative;}
.single_bottom a{/* margin: 0 5px; *//* color: #000; *//* font-family: 'Barlow Condensed', sans-serif; *//* letter-spacing: 0.1em; */}
.single_bottom a:hover{ opacity:0.8;}
.single_bottom .prev-link,
.single_bottom .next-link{ font-size: 20px; position: absolute; top: 50%; left: 50%;}
.single_bottom .prev-link:after,
.single_bottom .next-link:after{ content:""; position: absolute; background-size: 10px; background-repeat: no-repeat; width: 10px; height:14px; top: 5px; transition: 0.2s ease;}
.single_bottom .prev-link{ transform: translate(-150px,-50%);}
.single_bottom .next-link{ transform: translate(100px,-50%);}
.single_bottom .prev-link:after{ background-image: url("../images/a_prev.png"); left: -20px;}
.single_bottom .next-link:after{ background-image: url("../images/a_next.png"); right: -16px;}
.single_bottom .prev-link:hover:after{ left: -24px; transition: 0.2s ease;}
.single_bottom .next-link:hover:after{ right: -20px; transition: 0.2s ease;}
.single_bottom .back_btn{display: block;width: 60%;margin: 0 auto;font-family: 'Roboto', sans-serif;color: #555;border: 1px solid #555;font-size: 13px;font-weight: bold;line-height: 1.5em;padding: 10px 0;text-align: center;max-width: 200px;position: relative;}

.single_bottom .back_btn:after{content: ""; position: absolute; width: 24%; height: 8px; border-bottom: 1px solid #555; border-left: 1px solid #555; transform: translateY(-50%) skew(-45deg); left: -8%; top: 42%; transition: 0.2s ease;}
.single_bottom .back_btn:hover{ color: #555; opacity: 1;}
.single_bottom .back_btn:hover:after{ left: -12%; transition: 0.2s ease;}

@media only screen and (max-width: 768px){
    .single{padding: 0 0 24px;}
    .single .tit{font-size: 18px;margin-bottom: 20px;padding-bottom: 10px;}
    .single .date{}
    .single .txt_box{ padding-bottom: 12px;}
    .single .txt_box p{font-size: 16px;line-height: 1.8em;}
    .single .txt_box p strong{ font-size: 1.2em;}
    .single .txt_box .catch{ font-size: 16px; line-height: 1.5em;}
    .single .txt_box a{ font-size: 14px;}
    .single .txt_box .btn_01{ font-size: 13px; padding: 1.5em 2.5em 1.5em 1.5em;}

    .single .txt_box blockquote{ padding: 20px 12px; margin-bottom: 20px;}
    .single .txt_box blockquote .stit{ font-size: 16px;}

    .single .txt_box h1,
    .single .txt_box h2,
    .single .txt_box h3,
    .single .txt_box h4,
    .single .txt_box h5{ margin-bottom: 6px;}
    .single .txt_box h1{ font-size: 24px;}
    .single .txt_box h2{ font-size: 22px;}
    .single .txt_box h3{ font-size: 20px;}
    .single .txt_box h4{ font-size: 18px;}
    .single .txt_box h5{ font-size: 16px;}

    .single .txt_box hr{ margin: 2em 0;}

    .single_bottom{margin-bottom: 40px;}
    .single_bottom .prev-link,
    .single_bottom .next-link{ font-size: 14px;}
    .single_bottom .prev-link{ transform: translate(-120px,-50%);}
    .single_bottom .next-link{ transform: translate(80px,-50%);}
    .single_bottom .prev-link:after, 
    .single_bottom .next-link:after{ background-size: 8px; width: 8px; height: 12px;}
    .single_bottom .back_btn{ padding: 10px 0; font-size: 12px;}
}


/********************** INTRODUCTION *******************************/
#introduction{}
#introduction .block{position: relative;text-align: left;font-size: 1.4em;font-weight: bold;line-height: 2em;}
#introduction .block p{margin-bottom: 2em;}
#introduction .block p.lead{font-size: 1.7em;font-weight: 400;text-align: center;line-height: 2em;font-family: var(--font02);}

/* anime */
.char-span {display: inline-block;opacity: 0;transform: translateX(-20px) translateY(-20px);transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.char-span.animate {opacity: 1;transform: translateX(0) translateY(0);}

@media only screen and (max-width: 768px){
    #introduction .pagetit{top: 60px;}
    #introduction .block{padding: 0;font-size: 16px;line-height: 1.8em;}
    #introduction .block p.lead{font-size: 1.4em;}
	
}


/********************** STORY *******************************/
#story .block{position: relative;font-weight: 400;font-size: 18px;line-height: 3em;}
#story .block p{margin-bottom: 2em;}
#story .block p.lead{font-size: 2em;text-align: center;}

@media only screen and (max-width: 768px){
    #story .pagetit{top: 60px;}
    #story .block{ padding: 0; font-size: 14px; line-height: 1.8em;}
    #story .block .lead{ font-size: 1.3em;}
}

/********************** CAST *******************************/
#cast{}
#cast.page_content{margin-top: calc(70px + 11vw);}

#cast .cast_wrap{font-weight:bold;width: 80%;margin: 0 auto 12vw;}

#cast .cast_list{ margin-bottom: 6vw; display: flex; justify-content: center; flex-wrap: wrap;}
#cast .cast_list li{width: 33.33%;padding: 0 1.5%;}
#cast .cast_list li figure{ width:100%; line-height: 0; margin-bottom: 4px;}
#cast .cast_list li img{ width:100%; height: auto; pointer-events: none;}
#cast .cast_list li .cast_name{font-size: 1.1vw;font-weight: bold;line-height:1.5em;padding: 0.4em 0 0;margin: 0;color: var(--keyc);font-family: var(--font03);}
#cast .cast_list li .cast_name span{display:block;font-size:1.5em;line-height:1.5em;color: #000;padding-top: 0.1em;}
#cast .cast_list li .cast_name span.small{font-size: 1em;}
#cast .comment{ border: 1px solid #fff; width: 80%; display: inline-block; font-size: 1.2vw; line-height: 1.5em; padding: 0.2vw 0; color: #fff;}
#cast .comment.sp_only{ display:none !important;}

#cast .cast_02 li{ width:26%; }
#cast .cast_02 li .cast_name{font-size: 0.9vw;}

#cast .cast_03 li{ width:20%; }
#cast .cast_03 li .cast_name{font-size: 0.9vw;}

#cast .another_cast{ margin-bottom:80px; padding-top:30px;}
#cast .another_cast dt{ font-weight: bold; line-height:1.5em; display: inline-block; width: 50%; margin-bottom: 12px;}
#cast .another_cast dd{ font-size: 18px; line-height: 1.5em;}

#cast .staff_wrap{ max-width:1000px; width:100%; margin:0 auto 140px;}
#cast .staff_wrap h3{font-size: 50px;font-weight: bold;line-height:1em;margin-bottom:50px;font-family: var(--font03);}
#cast .staff_wrap p{font-size: 20px; line-height:1.5em;margin-bottom: 10px;}
#cast .staff_wrap span{font-size:14px;display: inline-block;vertical-align: text-top;font-weight:bold;}
#cast .staff_wrap span.colon{margin: 0 1px 0 6px;}
#cast .staff_wrap span:nth-child(3){text-align: left;font-size: 16px;}
#cast .staff_wrap span.txts{ color:#fff; font-size:12px; line-height:1.7em; display:block; padding-top:5px;}

#cast .cast_wrap2 { margin-bottom:150px;}
#cast .cast_wrap2 h3{ font-family:'Oswald'; font-size:60px; line-height:1em; margin-bottom:50px;}
#cast .cast_wrap2 ul{ margin-bottom:32px;}
#cast .cast_wrap2 li{ font-size:24px; line-height:1.9em;}
#cast .cast_wrap2 li span{  display: inline-block; margin-right:1em;  font-size:0.7em;}

#cast .prof_txt{margin: 20px auto 0;width: 100%;border: 1px solid var(--keyc);color: var(--keyc);position: relative;padding: 5px 0;font-size: 14px;line-height: 1.5em;}
#cast .staff_wrap .prof_txt{display: inline-block;width: 16%;margin: 0;margin-left: 0.5em;font-size: 0.6em;position: relative;top: -2px;}

#cast .ensemble{display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;font-size: 1.1em;font-weight: bold;line-height: 1.5em;margin-bottom: 120px;/* font-family: var(--font02); */}
#cast .ensemble .stit{width: 100%;font-size: 1.2em;font-weight: bold;margin-bottom: 1em;}
#cast .ensemble p{margin: 0;}


/* anime */
#cast .cast_list li{transform: scale(0.6); opacity: 0; transition: 1.4s;}
#cast .cast_list li.scroll_in,
#cast .cast_list li.open{transform: scale(1); opacity: 1;}
#cast .cast_list li.scroll_in img,
#cast .cast_list li.open img{animation: cast_anime 1s ease forwards; animation-fill-mode: both;}

@keyframes cast_anime { 
	0% { transform: rotate(2deg); }
	30% { transform: rotate(-2deg); }
	60% { transform: rotate(2deg); }
	90% { transform: scale(1.05); }
	100% { transform: scale(1); } 
}
/* animation: cast_anime 0.4s ease forwards; */


@media only screen and (max-width: 768px){
    #cast{}
    #cast.page_content{ margin-top: calc(70px + 14vw);}
    #cast .pagetit{top: 60px;}

    #cast p{font-size: 18px;}
    #cast p span{ font-size:16px;}

    #cast .cast_wrap{ margin-bottom: 80px;}
    #cast .cast_list{ margin-bottom: 60px;}
    #cast .cast_list li{width:80%;margin: 0 auto 30px;}
    #cast .cast_list li figure{ margin-bottom: 0;}
    #cast .cast_list li .cast_name{ font-size:14px; padding:5px 0 0;}
    #cast .cast_list li .cast_name span{font-size: 24px;line-height:1.5em;}
    #cast .cast_list.only-txt li{ margin: 0 auto 5vw;}
    #cast .cast_list.only-txt li.cast_br{ margin-bottom: 18vw;}
    #cast .cast_list.only-txt li.cast_br2{ margin-bottom: 12vw;}
    #cast .comment{ width: 90%; font-size: 12px;}
    #cast .comment.sp_only{ display:inline-block !important;}

    #cast .cast_02{ margin: 0 auto 14vw;}
    #cast .cast_02 li{ width: 50%;}
    #cast .cast_02 li .cast_name{ font-size:12px; margin-bottom:10px; line-height:1.4em;}
    #cast .cast_02 li .cast_name span{font-size:14px; line-height:1.5em;}
    

    #cast .cast_02.s_size li{ width: 50%;}
    #cast .cast_02.space{ margin-bottom: 20vw;}

    #cast .cast_02.last li{width:50%;/* padding:0; */}
    #cast .cast_02.last li .cast_name{ font-size:14px; padding:5px 0;}
    #cast .cast_02.last li .cast_name span{font-size:18px; line-height:1.5em;}

    #cast .cast_03 li{ width:50%; }
    #cast .cast_03 li .cast_name{font-size: 12px;}
    #cast .cast_03 li .cast_name span{font-size:14px; line-height:1.5em;}

    #cast .another_cast{ margin-bottom:40px;}
    #cast .another_cast dt{ width: 80%; font-size:16px; margin-bottom: 8px;}
    #cast .another_cast dd{ font-size: 13px; }	
	
    #cast .staff_wrap{ margin-bottom:60px;}
    #cast .staff_wrap h3{font-size: 30px;line-height:1em;margin-bottom: 40px;}
    #cast .staff_wrap p{font-size: 16px;line-height: 1.8em;position: relative;margin-bottom: 12px;}
    #cast .staff_wrap span{font-size: 16px;}
    #cast .staff_wrap span:nth-child(3){font-size: 16px;}

    #cast .cast_wrap2 li{ font-size: 20px;}

    #cast .prof_txt{margin: 5px auto 0;font-size: 14px;}
    #cast .staff_wrap .prof_txt{width: 34%;font-size: 0.7em;}

    #cast .ensemble{gap: 12px;font-size: 1.1em;margin-bottom: 80px;}
}


/********************** SCHEDULE *******************************/
#schedule{ margin-bottom: 50px;}

#schedule .t_nav{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 0 1.33%;margin-bottom: 120px;}
#schedule .t_nav a{display: block;width: 24%;background-color: #ffd500;padding: 1em 0;}

#schedule .sc_block{margin-bottom: 100px;margin-top: -100px;padding-top: 100px;}
#schedule .all_date{}
#schedule .all_date .strong{}

#schedule .venue{ font-size:20px; line-height:1.6em; margin-bottom:30px;}
#schedule .place{ color: var(--keyc); font-size: 42px; font-weight: bold; line-height: 1em; margin-bottom: 30px;}
#schedule .datetit{font-size: 30px;line-height: 1.8em;margin-bottom:0.4em;font-weight: bold;}
#schedule .datetit strong{font-size: 1.6em;}
#schedule .datetit .venue{ font-size: 0.9em;}
#schedule .datetit .venue img{width: auto;height: 60px;margin-top: 6px;}
#schedule .map{display:inline-block;color: #000;margin-left:15px;padding:4px 0;width: 120px;transition:0.2s;font-size: 14px;position:relative;top:-3px;border: 1px solid #000;background-color: #fff;}
#schedule .map:hover{opacity:0.7;}
#schedule .bar{ margin-bottom:16px;}
#schedule .bar img{ max-width: 735px; width: 100%;}

#schedule .note_box{width: 94%;max-width: 1000px;margin: 0 auto 40px;border: 1px solid #666;padding: 50px;font-size: 16px;line-height: 1.7em;background-color: rgba(0,0,0,0.3);}
#schedule .note_box .tit{font-size: 26px;font-weight: bold;line-height: 1.5em;margin-bottom: 1em;}


.schedule_table {margin-bottom: 40px;position:relative;}

.calendar01{ width:100%;  font-size:18px; line-height:1em; table-layout:fixed; }
.calendar01 th	{text-align: center;border: 1px solid #666;color: #000;padding:0.7em 0;font-size: 14px;font-weight: bold;background-color: #fff;}
.calendar01 th.wd{width: 6em;}
.calendar01 th.blue{background-color: rgb(51 102 153);color: #fff;}
.calendar01 th.red{background-color: rgb(204 51 51);color: #fff;}
.calendar01 td{text-align: center;color: #000;border: 1px solid #000;background-color: #fff;padding:1em 0;font-size: 14px;}
.calendar01 td.time{background-color: rgba(255,255,255,0.8);color: #000;}
.calendar01 td:first-child	{ text-align: center;}
.calendar01.pc_only{ display:table; margin-bottom: 6px;}

.i_red{color: #f00 !important;}
.i_yel{color: #cc3333 !important;}

#schedule .note{font-size: 14px;line-height: 2em;text-align: left;}

#schedule .btn_01{ max-width: 1000px;}
#schedule .btn_01 span{ font-size: 0.8em;}

.add_txt{ font-size: 24px; line-height: 1.5em; margin-bottom: 4em;}


@media only screen and (max-width: 768px) { 
    #schedule{ margin-bottom: 60px;}
    #schedule .t_nav{gap: 8px 2%;margin-bottom: 80px;}
    #schedule .t_nav a{width: 49%;}

    #schedule.page_content{ margin-top: calc(70px + 14vw);}
    #schedule .pagetit{top: 60px;}

    #schedule .all_date{ margin-bottom:38px;}
    #schedule .sc_block{ margin-bottom: 40px;}

    #schedule .venue{font-size: 14px;font-weight:bold;line-height: 1.6em;margin-bottom: 10px;text-align: left;position: relative;}
    #schedule .place{ font-size: 32px; margin-bottom: 20px;}
    #schedule .datetit{font-size: 18px;}
    #schedule .datetit .venue img{height: 40px;}
    #schedule .map{padding: 4px 15px;position: absolute;width: 20%;right: 0;text-align:center;font-size: 12px;top: inherit;bottom: 0;}

    #schedule .note_box{ padding: 20px 12px; font-size: 14px; text-align: left; margin: 0 auto 20px;width: 100%;}
    #schedule .note_box .tit{ font-size: 18px; text-align: center;}

    .schedule_table{margin-bottom: 20px;}

    .calendar01{ border-collapse: separate; font-size: 14px;}
    .calendar01 th.wd{width: 9em;}
    .calendar01 th{font-size: 14px;}
    .calendar01 td{padding: 9px 0;font-size: 16px;}
    .calendar01 td img{ max-width: 18px;}
    .calendar01.sp_only{ display:table; margin-bottom: 4px;}

    #schedule .note{ font-size: 12px; text-align: left;}

    .add_txt{ font-size: 18px;}
}


/********************** TICKETS *******************************/
#tickets{}
#tickets .price_wrap { margin-bottom: 120px;}
#tickets .price_wrap .stit{font-size: 30px; font-weight: bold; line-height: 1.5em; margin-bottom: 1em;}
#tickets .price_wrap .stit span{font-size: 0.5em;}
#tickets .price_wrap .sstit{font-size: 24px; font-weight: bold; line-height: 1.5em; width: 40%;}
#tickets .price_wrap .sstit span{font-size: 0.5em;}
#tickets .price_box{margin-bottom: 50px;display: flex;width: 100%;align-items: center;border-top: 1px solid #000;border-bottom: 1px solid #000;background-color: #ffffffb3;}
#tickets .price_box .in_box{ width: 60%;}
#tickets .price_box .in_box dl{display: flex;border-bottom: 1px solid #999;align-items: center;padding: 1em 12px ;}
#tickets .price_box .in_box dl:last-of-type{ border-bottom: none;}
#tickets .price_box .in_box dt{width: 50%;text-align: left;font-size: 18px;font-weight: bold;line-height: 1.5em;}
#tickets .price_box .in_box dd{width: 50%;text-align: right;font-size: 26px;font-weight: bold;line-height: 1.5em;}
#tickets .price_box .in_box dd span{font-size: 0.6em;padding-left: 6px;}

#tickets .block{background-color: #ffffffb3;border: 1px solid #000;text-align: left;font-size: 16px;font-weight: 400;line-height: 1.7em;margin-bottom: 20px;}
#tickets .block .stit{font-size: 22px;font-weight: bold;line-height: 1em;color: var(--keyc);margin-bottom: 1.5em;text-align: center;}
#tickets .block .in_box{ padding: 4%;}
#tickets .block ul{ list-style: disc; padding-left: 24px;}
#tickets .block li{}
#tickets .block strong{ font-size: 1.1em;}
#tickets .block img{ width: auto; max-width: 100%; border: 1px solid #fff;}


#tickets .ticket_area{ margin-bottom: 140px;}
#tickets .ticket_area .tit{font-size: 30px;font-weight: bold;line-height: 1.5em;margin-bottom: 1em; }

#tickets .ticket_link{ margin-bottom: 80px;}
#tickets .ticket_link a{ color:#7e4bb0; text-decoration: underline; }

#tickets .ticket_block{text-align: left;padding:0 5%;background-color: #fff;color: #000;margin-bottom: 15px;font-size: 18px;line-height: 1.7em;font-weight: bold;border: 1px solid #000000;}
#tickets .ticket_block .stit{font-weight: 900;font-size: 20px;color: #000;line-height: 1.7em;padding: 2.5% 0;}
#tickets .ticket_block .date{ margin: 0 0 0.5em;}
#tickets .ticket_block .date2{ padding: 0.75em 0; }
#tickets .ticket_block .date2.mgn{ margin-bottom: 1em;}
#tickets .ticket_block .date3{ margin: 0; }
#tickets .ticket_block .bdr{ border-bottom: 1px solid #ccc;}
#tickets .ticket_block .note{ font-size: 0.7em; line-height: 1.7em; margin: 0;}
#tickets .ticket_block .timg{ width: 200px; margin: 1em 0 0;}

#tickets .ticket_block .ticket_wrap{ display: flex; justify-content: space-between; align-items: center; padding: 0.8em 0; }
#tickets .ticket_block .ticket_wrap .date{ width: 60%; margin: 0;}
#tickets .ticket_block .ticket_r{ width: 35%;}
#tickets .ticket_block .ticket_r .t_btn{ text-align: center; background-color: var(--keyc); color: #fff; display: block; padding: 1em 0; text-decoration: none; }

#tickets .acc .stit{ position: relative;}
#tickets .acc .stit.active{ transition: 0.2s;}
#tickets .acc .stit:hover{ transition: 0.2s;cursor: pointer;}
#tickets .acc .stit:before,
#tickets .acc .stit:after{content: ""; position: absolute; right: 0px; top: 0; bottom: 0; margin: auto 0; background-color: var(--keyc); width: 20px; height: 2px; transition: all 0.3s;}
#tickets .acc .stit:after{ transform: rotate(90deg);}
#tickets .acc .stit.active:before{ transform: rotate(180deg);}
#tickets .acc .stit.active:after{ transform: rotate(180deg); opacity: 0;}
#tickets .acc .in_box{ display: none; padding-bottom: 3%;}


.text_area{background-color: #ffffffb3;border: 1px solid #000;text-align: left;font-size: 16px;font-weight: 400;line-height: 1.8em;margin-bottom: 40px;padding: 4%;}
.text_area .stit{text-align: center;color: var(--keyc);margin-bottom: 1.5em;font-size: 1.5em;font-weight: bold;line-height: 1em;}
.text_area .btn{display: block;background-color: var(--keyc);color: #fff;text-align: center;padding: 1em;font-size: 1.2em;margin-top: 0.6em;}
.text_area .btn.disabled{pointer-events: none; background-color: #d7d7d7;}
.text_area p{margin-bottom: 1.5em;}
.text_area figure{position: relative;line-height: 0;margin-bottom: 16px;height: 0;padding-bottom: 56.25%;background-color: #000;}
.text_area figure img{position: absolute;width: auto;height: auto;max-height: 100%;max-width: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.child{background-color: rgba(0,0,0,0.3);border: 1px solid #666;text-align: left;font-size: 16px;font-weight: 400;line-height: 1.7em; margin-bottom: 100px;  padding: 4%;}
.child .stit{ text-align: center; color: #fc0; margin-bottom: 1.5em; font-size: 20px; line-height: 1em;}
.child .price{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;padding: 1em 0 0.5em;margin-bottom: 1em;}
.child .price p{ margin-bottom: 0.5em;}
.child .c_tit{ border-left: 2px solid var(--keyc); color: var(--keyc); padding: 0.25em 0 0.25em 1em; font-weight: bold; margin: 2em 0 1em;}
.child a{ text-decoration: underline;}

/* 受付終了 */
#tickets .tit.end{color: #ccc;font-size: 24px;}
#tickets .ticket_block.end{background-color: #cfcfcf69;border: 1px solid #ccc;pointer-events: none;}
#tickets .ticket_block.end .stit{color: #ccc;font-size: 18px;}
#tickets .ticket_block.end .stit:before,
#tickets .ticket_block.end .stit:after{display: none;}
#tickets .ticket_block.end .stit .end_txt{background-color: #c30000;color: #fff;padding: 0.5em 1em;font-size: 0.8em;line-height: 1em;margin-left: 1em;display: inline-block;}

.child.end{background-color: #cfcfcf69;color: #ccc;border: 1px solid #ccc;}
.child.end .stit,
.child .c_tit{color: #ccc;border-color: #ccc;}
.child a{color: #ccc;pointer-events: none;}
.child img{filter: brightness(0.4);}
.child.end .stit .end_txt{background-color: #c30000;color: #fff;padding: 0.5em 1em;font-size: 0.7em;font-weight: bold;line-height: 1em;margin-left: 1em;display: inline-block;}

@media only screen and (max-width: 768px) { 

    #tickets .price_wrap{ margin-bottom: 80px;}
    #tickets .price_box{ margin-bottom: 30px; padding: 1em 0 0; display: inherit;}
    #tickets .price_box .sstit{ font-size: 20px; margin-bottom: 0.5em; width: 100%; border-bottom: 1px solid #999; line-height: 1em; padding-bottom: 0.75em; margin-bottom: 0.5em;}
    #tickets .price_box .in_box{ width: 100%;}    
    #tickets .price_box .in_box dl{ display: block; width: 100%; padding: 0.5em 0; border-bottom: 1px dashed #999;}
    #tickets .price_box .in_box dt{ width: 100%; font-size: 16px;}
    #tickets .price_box .in_box dd{ width: 100%; font-size: 20px;}

    #tickets .block{font-size: 16px;line-height: 1.8em;margin-bottom: 12px;}
    #tickets .block .stit{font-size: 20px;padding: 0;line-height: 1.4em;}
    #tickets .block .in_box{padding: 8% 5%;}
    #tickets .block ul{ padding-left: 22px;}
    
    #tickets .ticket_area{ margin-bottom: 80px;}
    #tickets .ticket_area .tit{ font-size: 20px; margin-bottom: 0.5em;}

    #tickets .ticket_link{ margin-bottom: 30px;}
    #tickets .ticket_block{ display: inherit;font-size: 16px; padding: 0 5%; line-height: 1.5em; margin-bottom: 10px;}
    
    #tickets .ticket_block .stit{ padding: 5% 5% 5% 0; font-size: 16px;}
    #tickets .ticket_block .ticket_wrap{ display: inherit;}
    #tickets .ticket_block .ticket_wrap .date{ width: 100%; margin: 0 0 0.5em; font-size: 16px;}
    #tickets .ticket_block .date2{ line-height: 1.5em;}
    #tickets .ticket_block .date3{ line-height: 1.5em; margin-bottom: 0.75em;}
    #tickets .ticket_block .ticket_r{ width: 100%; padding: 0;}
    #tickets .ticket_block .note{ font-size: 0.8em;}
    
    #tickets .acc .in_box{ padding-bottom: 5%;}
    
    #tickets .acc .stit:before,
    #tickets .acc .stit:after{ width: 10px; height: 2px; }
	
	.text_area,
	.child{font-size: 16px;line-height: 1.8em;padding: 8% 5%;margin-bottom: 20px;}
	.text_area .stit,
	.child .stit{font-size: 20px;}	

    /* 受付終了 */
    #tickets .ticket_block.end .stit{font-size: 14px;}
    #tickets .ticket_block.end .stit .end_txt{display: block;width: 12em;text-align: center;margin: 0.4em 0 0 0;font-size: 0.6em;}

    .child.end .stit .end_txt{margin: 0;margin-top: 0.6em;}
}


/********************** MOVIE *******************************/
#movie_in{}
#movie_in ul{max-width: 1400px;width: 94%;margin: 0 auto 60px;display: flex;flex-wrap: wrap;justify-content: space-between;}
#movie_in li{width: 48%;position: relative;margin-bottom: 3vw;}
#movie_in .youtube{position:relative;width:100%;margin-bottom: 12px;display: block;line-height: 0;}
#movie_in .youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}
#movie_in img{ width:100%; transition: 0.2s ease;}
#movie_in a{position:relative;}
#movie_in a:hover{ opaxity:0.9; transition: 0.2s ease;}
#movie_in a .ro{position:absolute;visibility: hidden;opacity: 0;}
#movie_in a .ro{top: 50%;left: 50%;transform: translate(-50%,-50%);transition: 0.2s ease;}
#movie_in a:hover .ro{ visibility: visible; opacity: 1;}
#movie_in .tit{font-size: 16px;font-weight: bold;line-height: 1.5em;position: relative;text-align: left;margin: 0;}

@media only screen and (max-width: 769px){
    #movie_in ul{}
    #movie_in .tit{ font-size: 12px;}
}




/********************** GUIDE *******************************/
#guide{ font-size: 17px; line-height: 1.8em;}
#guide .block{ padding: 40px 0; text-align: left;}
#guide .block .tit{ font-size: 30px; font-weight: bold; line-height: 1.3em; margin-bottom: 1.5em; text-align: center;}
#guide .block .tit1{ font-size: 42px; font-weight: bold; line-height: 1.5em; margin-bottom: 1.5em; text-align: center;}
#guide .block .stit1{ font-size: 24px; font-weight: bold; line-height: 1.5em; margin-bottom: 1em; margin-top: 3em;}
#guide .block .stit1:first-of-type{ margin-top: 0;}
#guide .block .stit2{ font-size: 20px; font-weight: bold; line-height: 1.5em; margin-bottom: 0.7em; margin-top: 2.5em;}

#guide .block a{ color: #e0125e;}

#guide .linkblock{ margin-bottom: 50px;}
#guide .guide_link{ display: block; border: 2px solid #1e1e1e; color: #1e1e1e!important; margin-bottom: 12px; font-size: 20px; line-height: 1.4em; padding: 20px 0; text-align: center;}
#guide .guide_list{ border-bottom: 1px solid #ccc;}
#guide .guide_list .linkbox{margin-bottom: 3em;}
#guide .guide_list ul{ list-style: disc; padding-left: 1em;}
#guide .guide_list li{ margin-bottom: 0.4em;}
#guide .guide_list li figure{ margin: 6px 0;}
#guide .guide_list li figure img{ width: auto; max-width: 100%;}
#guide .guide_list .list1 li{ margin-bottom: 1.5em;}
#guide .guide_list ul.alpha{ list-style: none; padding-left: 0; margin-bottom: 2em;}
#guide .guide_list ul.alpha li{text-indent: -1em;padding-left: 1em;}
#guide .guide_list dl{ }
#guide .guide_list dl:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
#guide .guide_list dt{ float: left;}
#guide .guide_list dd{ padding-left: 5em; margin-bottom: 0.5em;}
#guide .guide_list .youtube{}
#guide .red{ color: #F00;}
#guide .underline{ text-decoration: underline;}

.youtubefull{position:relative;width:100%; margin:0 auto;padding-top:56.25%;}

.youtubefull iframe{position:absolute;top:0;right:0;width:100%;height:100%;}

#guide .cs{ margin: 10vw 0;}
#guide .other_txt{ margin-bottom: 2em; color: #f00;}

@media only screen and (max-width: 768px){
    #guide{ font-size: 16px; line-height: 1.5em;}    
    #guide .block{ padding: 20px 0;}
    #guide .block .tit{ font-size: 24px; margin-bottom: 1em; text-align: left;}
    #guide .block .tit1{ font-size: 24px; text-align: left;}
    #guide .block .stit1{ font-size: 20px; margin-top: 2em;}
    #guide .block .stit2{ font-size: 18px; margin-top: 1.5em;}

    #guide .guide_link{ font-size: 14px; margin-bottom: 8px; padding: 14px 0; border-width: 1px;}
	
	#guide .other_txt{ margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em;}
}


/********************** GOODS *******************************/
#goods{}

#goods .goods_info{margin-bottom: 80px;font-size: 14px;line-height: 1.5em;text-align: left;padding: 40px;border: 1px dotted #ccc;border-radius: 8px;}
#goods .goods_info p{}
#goods .goods_info .tit{margin-bottom: 1em;color: var(--keyc_01);font-size: 1.5em;font-weight: 500;line-height: 1.5em;display: block;text-align: center;}
#goods .goods_info .note{ font-size: 0.9em; line-height: 1.5em;}
#goods .goods_info .g_block{ background-color: #eee; padding: 20px;}
#goods .goods_btn{display: block;background-color:  var(--keyc_01);color: #fff;width: 100%;margin: 40px auto 0px;padding: 30px 0;border-radius: 8px; font-size: 20px;line-height: 1.5em;transition: 0.2s;text-align: center;}
#goods .goods_btn:hover{ opacity: .8; transition: 0.2s;}

#goods .img{ line-height: 0; margin-bottom: 40px;}

#goods .tit{ font-size: 34px; line-height: 1.5em; margin-bottom: 0.3em;}
#goods .list{ margin-bottom: 60px;}
#goods .list li{display: table;width:100%;margin-bottom:20px;padding: 20px;position:relative;border: 1px solid #999;background-color: rgba(0,0,0,0.3);}
#goods .list li:nth-child(3n){ margin-right:0;}
#goods .list li figure{ display: table-cell; width: 40%;}
#goods .list li figure.new{ position:relative;}
#goods .list li figure.new:after{content: "NEW";position: absolute;background-color: #1d9a75;color: #fff;width: 70px;height: 70px;line-height: 4.5em;font-size: 16px;border-radius: 50px;top: -35px;left: -35px;transform: rotate(-20deg);}
#goods .list li figure img{ width:100%;}
#goods .list li .right{ display: table-cell; vertical-align: top; padding-left: 24px;}
#goods .list li h3{color: var(--keyc_01);font-size:20px;font-weight: 500;line-height:1.4em;margin-bottom:12px;text-align:left;color: var(--keyc);}
#goods .list li h3 span{ display: block; font-size: 0.8em; line-height: 1.7em;}
#goods .list li p.txt{font-size: 14px;font-weight: 400;line-height: 1.7em; text-align:left;}
#goods .list li p.price{font-size:18px;margin-top:14px;padding-top: 14px;text-align:right;margin-bottom: 0;border-top: 1px solid #535353;}

.date_box{ display: flex; margin-bottom: 60px;}
.date_box .blue{ background-color: #090091; color: #fff;}
.date_box .red{ background-color: #910000; color: #fff;}
.date_box .calendar01 th{ font-size: 16px;}
.date_box .calendar01 td{ font-size: 16px;}

@media only screen and (max-width: 768px) {
    #goods{}
    #goods .goods_info{ padding: 20px 12px; margin-bottom: 30px;}
    #goods .goods_info p{ font-size: 14px; line-height: 1.5em;}
    #goods .goods_info .tit{ font-size: 17px;}
    #goods .goods_info .note{ font-size: 0.8em;}
    #goods .goods_info .g_block{ padding: 20px 12px;}
    #goods .goods_btn{ width: 100%; font-size: 16px; padding: 16px 0; margin-top: 20px;}

    #goods .img{ margin-bottom: 12px;}

    #goods .tit{ font-size: 24px;}
    #goods .list{ margin-bottom: 30px;}
    #goods .list li{ float:none;width: 100%;margin: 0 auto 12px;padding: 12px;border: 2px solid #999;}
    #goods .list li:nth-child(3n){ margin-right:auto;}
    #goods .list li figure{ display: block; width: 100%; margin-bottom:0;}
    #goods .list li figure.new:after{ width: 40px; height: 40px; line-height: 3.5em; font-size: 12px; top: -25px; left: -25px;}
    #goods .list li .right{ display: block; width: 100%; padding-left: 0;}
    #goods .list li h3{ font-size:16px; line-height: 1.3em; margin-bottom: 6px;}
    #goods .list li h3 span{ font-size: 12px;}
    #goods .list li p.txt{ font-size:12px;}
    #goods .list li p.price{ font-size: 16px; margin-top: 7px; padding-top: 10px;}

    .date_box{ display: block; margin-bottom: 30px;}
    .date_box .calendar01 th{ font-size: 14px;}
    .date_box .calendar01 td{ font-size: 14px;}
    .date_box .sp_none{ display:none;}
}


/********************** SNS *******************************/
.sns{ text-align: center; margin-bottom: 4px;}
.sns li{ display: inline-block; vertical-align: middle; width: 26px; margin: 0 3px;}
.sns li img{ width: 100%;}





/********************** SPECIAL *******************************/
#special{margin-bottom: 120px;}
/* #special .container{max-width: 1000px;} */
#special .note_box{margin-bottom: 20px; padding: 50px; background-color: #fff; color: #000;text-align: left;}
#special .note_box .in_block{margin-bottom: 60px;}
#special .note_box .in_block:last-of-type{margin-bottom: 0;}
#special .note_box .tit{color: #7e3dbf;font-size: 30px;font-weight: bold;line-height: 1.5em;margin-bottom: 1em;text-align: center;}
#special .txt_block{margin-bottom: 60px;}
#special .note_box .catch{font-size: 1.1em;font-weight: bold;margin-bottom: 1em;}
#special .note_box p{ font-size: 16px;line-height: 1.7em;margin-bottom: 1.5em;}
#special .note_box strong{font-size: 1.1em;margin-right: 6px;line-height: 2em;color: #7e3dbf;}
#special .note_box figure{margin-bottom: 8px;}
#special .note_box figure.flex_img{display: flex;gap: 0 1%;}
#special .note_box figure.flex_img img{width: 49%;height: auto;}
#special .note_box img{width: auto; max-width: 100%;border: 1px solid #cc9900;}
#special .note_box a{ text-decoration: underline;}
#special .note_box ul{ list-style: disc; padding-left: 24px; margin-bottom: 1.5em;}
#special .note_box li{ line-height: 1.5em; margin-bottom: 0.5em;}
#special .note_box .attention{display: inline-block; background-color: #f00; color: #fff; padding: 0.1em 0.7em; font-size: 14px; line-height: 1.5em;}

#special .toc{ background-color: #2f6060; color: #fff; padding: 40px; margin-bottom: 20px; text-align: center;}
#special .toc p{ margin-bottom: 0; font-size: 20px; line-height: 2em;}
#special .toc p:last-child{ margin-bottom: 0;}

#special .b_box{ border: 1px solid #000; padding: 40px; text-align: center; margin-bottom: 30px;}
#special .b_box .stit{ font-size: 24px; margin-bottom: 1em;}
#special .b_box p:last-child{ margin:0;}

hr{border: none;width: 100%;height: 1px;background-color: #999;margin: 40px 0;}

@media only screen and (max-width: 768px){
    #special{margin-bottom: 40px;}
    #special .note_box{ padding: 20px 12px;}
    #special .note_box .in_block{margin-bottom: 40px;}
    #special .note_box .tit{font-size: 18px;margin-bottom: 1em;}
    #special .txt_block{margin-bottom: 40px;}
    #special .note_box .catch{ font-size: 1em; margin-bottom: 1.5em;}
    #special .note_box figure.flex_img{flex-direction: column; gap: 8px 0;}
    #special .note_box figure.flex_img img{width: 100%;}
    #special .note_box p{ font-size: 14px;}
    #special .note_box ul{ padding-left: 20px;}
    #special .note_box li{ font-size: 14px;}

    #special .toc{ padding: 20px;}

    #special .b_box{ padding: 20px 12px;}
    #special .b_box .stit{ font-size: 18px;}

    hr{margin: 20px 0;}
}




/********************** SWIPER *******************************/

.top_rotation{position: relative;padding: 50px 5vw;/* overflow: hidden; */background-color: rgba(0,0,0,0.4);}
.top_rotation .swiper-container{ overflow:visible; width:100%; padding-right:12vw; z-index: 20; margin-bottom: 30px;}
.top_rotation .youtube{ margin-bottom: 12px;}
.top_rotation figure{ line-height:0; margin-bottom:0.5vw; overflow: hidden; height: 0; position: relative;padding-top:56.25%;background-color: #fff;}
.top_rotation figure img{ max-height: 100%; max-width:100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 
.top_rotation .swiper-slide{padding-right: 1vw;transition:0.3s;position: relative;}

.top_rotation .swiper-container .swiper-slide iframe{ opacity:0; z-index: 5; transition:0.5s;}

.top_rotation .yt_cover{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:20;}

.top_rotation .swiper-slide a{display:block;text-align: left;}
.top_rotation .tit{font-weight:bold; line-height:1.4em; overflow: hidden;display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;}

.top_rotation .swiper-container .swiper-wrapper:hover .swiper-slide{ opacity:1;}

.top_rotation .txt,
.top_rotation img{transition:0.3s;line-height: 1em;margin-bottom: 12px;}
.top_rotation .swiper-container .swiper-wrapper:hover .swiper-slide .txt,
.top_rotation .swiper-container .swiper-wrapper:hover .swiper-slide img{ opacity:0.5;}
.top_rotation .swiper-container .swiper-wrapper:hover .swiper-slide figure{ background-color:transparent;}

.top_rotation .swiper-container .swiper-wrapper .swiper-slide:hover{ position:relative; z-index:20; opacity:1;}
.top_rotation .swiper-container .swiper-wrapper .swiper-slide:hover a{ background-color: rgba(0,0,0,0.025);}
.top_rotation .swiper-container .swiper-wrapper .swiper-slide:hover iframe.active{ opacity:1;}
.top_rotation .swiper-container .swiper-wrapper .swiper-slide:hover .txt,
.top_rotation .swiper-container .swiper-wrapper .swiper-slide:hover img{ opacity:1; }

.top_rotation .stit{font-size: 80px;font-weight: bold;line-height: 1.5em;text-align: left;font-family: 'Cormorant Garamond', serif;margin-top: -110px;}
.top_rotation .sstit{ color: #fff; font-size: 16px; line-height: 1.4em;}

.top_rotation .btn2{ position: absolute; top:100px; right:0; z-index: 40;}
.top_rotation .btn2 a{ font-family: 'Barlow Condensed', sans-serif; padding: 0 30px; font-size: 16px; font-weight: bold; line-height: 1em; letter-spacing: 0.1em; color: #7d7d7d; position: relative;}
.top_rotation .btn2 a:after{ border: 1px solid; content: ""; position: absolute; top: calc(50% - 2px); right: 1.1em; width: 3px; height: 3px; transform: rotate(-45deg); transition: 0.2s ease; border-color: transparent #7d7d7d #7d7d7d transparent;}
.top_rotation .btn2 a:hover{ color: #c0c0c0;}
.top_rotation .btn2 a:hover:after{ right: 1em; border-color: transparent #c0c0c0 #c0c0c0 transparent;}

@media only screen and (max-width: 768px){
    .top_rotation{ padding: 5%;}
    .top_rotation .swiper-container{ padding-right: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 6px;}
    .top_rotation.concert .swiper-container{ padding-right:0; margin-bottom:12px;}
    .top_rotation .swiper-slide{}
    .top_rotation .youtube{ margin-bottom: 6px;}
    .top_rotation figure{ margin-bottom: 6px;}
    .top_rotation .yt_cover{ display: none;}
    .top_rotation .swiper-container .swiper-wrapper:hover .swiper-slide .txt,
    .top_rotation .swiper-container .swiper-wrapper:hover .swiper-slide img{ opacity:1;}
    .top_rotation .swiper-container .swiper-wrapper .swiper-slide:hover{ transform:none; }
    .top_rotation .stit{ font-size: 40px; margin-top: -50px;}
    .top_rotation .sstit{ font-size: 14px; line-height: 1.5em;}
    .top_rotation .btn2{ top: 62px;}
    .top_rotation .btn2 a{ font-size: 12px;}
}



/*lightbox*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#102015;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#fff;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
    #cboxContent{ margin-right:0; margin-bottom:50px;}
    #cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}