.frame{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;z-index: 9996;pointer-events: none;
    .deco{position: absolute;width: 80px;
        &.top_l{top: -8px;left: -10px;}
        &.top_r{top: -8px;right: -10px;transform: scale(-1, 1);}
        &.bottom_l{bottom: -8px;left: -10px;transform: scale(1, -1);}
        &.bottom_r{bottom: -8px;right: -10px;transform: scale(-1, -1);}
    }
    .border-top{border-top: 4px double #5a3d20;display: block;width: calc(100% - 120px);position: absolute;top: 1px;left: 50%;transform: translateX(-50%);}
    .border-bottom{border-bottom: 4px double #5a3d20;display: block;width: calc(100% - 120px);position: absolute;bottom: 1px;left: 50%;transform: translateX(-50%);}
    .border-left{border-left: 4px double #5a3d20;display: block;height: calc(100% - 120px);position: absolute;left: 0px;top: 50%;transform: translateY(-50%);}
    .border-right{border-right: 4px double #5a3d20;display: block;height: calc(100% - 120px);position: absolute;right: 0px;top: 50%;transform: translateY(-50%);}
}

.page_content{padding: 120px 0 160px;}
@media only screen and (max-width: 835px){
    .page_content{padding: 80px 0 100px;}
}

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

.top_tit{font-family: var(--f_01);font-size: min(120px,10vw);font-weight: bold;line-height: 1.5em;margin-bottom: 0.5em; text-align: center;
    &.long {font-size: min(100px,9vw);line-height: 1.5em;}
    &.second{font-size: min(80px,10vw);
        span{position: relative;
            &:before,
            &:after{position: absolute;content: "";background-image: url(../images/parts/h2_parts.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 26px;height: 61px;top: 50%;transform: translateY(-50%);}
            &:before{left: -40px;}
            &:after{right: -40px;transform: translateY(-50%) scale(-1,1);}
        }
    }
    span{position: relative;
        &:before,
        &:after{position: absolute;content: "";background-image: url(../images/parts/h2_parts.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 60px;height: 90px;top: 50%;transform: translateY(-50%);}
        &:before{left: -70px;}
        &:after{right: -70px;transform: translateY(-50%) scale(-1,1);}
    }
}

.comment{display: block;width: min(100%,300px);color: #e6decd;border: 1px solid #e6decd;background-color: #15102da6;margin: 12px auto 0;font-size: 0.9em;padding: 0.5em;}

@media only screen and (max-width: 835px){
    .top_tit{
        span{
            &:before,
            &:after{width: 20px;height: 38px;}
            &:before{left: -25px;}
            &:after{right: -25px;}
        }

        &.second{
        span{
            &:before,
            &:after{width: 20px;height: 40px;}
            &:before{left: -30px;}
            &:after{right: -30px;}
        }
        }
    }
}

/* fv */
.fv {
    .inner { margin-bottom: 8vw; position: relative; display: flex; line-height: 0; 
        .top_left { width: 42%; position: relative; }
        .top_right { width: 58%; line-height: 0; position: relative; height: 100vh; max-height: 58vw; display: flex; flex-direction: column; justify-content: center; align-items: center; 
            .main_tit { width: 85%; margin: 0 auto 2.5vw; padding-top: 3vw; }
            .catch { width: 75%; margin: 0 auto; }
            img {filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.6)); width: 100%; }
        }
    }
}

@media only screen and (max-width: 768px) {
.fv {
    .inner {flex-direction: column;
        .top_left { width: 100%; padding-top: 48px; }
        .top_right { width: 100%; display: block; height: auto; max-height: none; position: relative; z-index: 20; margin: -12vw 0 15vw;
            .top_right .main_tit { width: 90%; margin: 0 auto 6vw; padding: 0; }
            .top_right .catch { width: 90%; margin: 0 auto; }
        }
    }
}
}

/* movie */
#top_movie { width: 100%; margin-bottom: 8vw; position: relative; -webkit-transition: 0.4s; transition: 0.4s;
  .container {width: 90%; max-width: 1000px; margin: 0 auto;
    .you_tube { position: relative; width: 100%; margin: 0 auto; will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer;
      &::after { content: ''; position: absolute; inset: 0; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 0.35s ease; pointer-events: none;}
      &:hover { transform: translateY(-6px) scale(1.04);
        &::after { opacity: 1; }
        img { filter: brightness(1.12); cursor: pointer;}
      }
      img {width: 100%;}
      .playbutton{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32%; height: auto; pointer-events: none; }
    }
  }
}

/* ===== モーダル ===== */
#movieModal { display: none; position: fixed; inset: 0; z-index: 9999; }
#movieModal.is_open { display: block; }
#movieOverlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); cursor: pointer; }
#movieInner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(90vw, 900px); }
#movieClose { position: absolute; top: -4.5rem; right: 0; background: none; border: none; color: #fff; font-size: 4rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; }
#movieIframeWrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
#movieIframeWrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
@media only screen and (max-width: 835px){
    #movieClose {top: -2.5rem; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; }
}

/* top date */
.top_date{background-color: #0504288c;padding: min(120px,18vw) 0;margin-bottom: min(80px, 8vw);
    .flex{display: flex;gap: 0 2%;
        p{margin: 0; width: 32%;
            img{width: 100%; height: auto;}
        }
    }
    .end{margin: 0 auto;width: min(740px,50vw);
        img{width: 100%; height: auto; filter: brightness(1.5);}
    }
}
@media only screen and (max-width: 835px){
    .top_date{padding: 20vw 0;
        .flex{flex-direction: column;gap: 40px 0;;
            p{width: 76%;margin: 0 auto;}
        }
        .end{width: 80vw;}
    }
}

/* top staff */
.top_staff{
    ul{display: flex;flex-direction: column;gap: 60px 0;
        li{
            .roles{margin: 0;}
            .name{margin: 0;font-size: 1.5em;line-height: 1.5em;}
        }
    }
}
@media only screen and (max-width: 835px){
    .top_staff{
        ul{gap: 30px 0;}
    }
}

/* top story */
.top_story{padding-bottom: 80px;
    .txt_area{text-align: left;font-size: 18px;line-height: 2em;margin-bottom: 40px;
        p{margin-bottom: 1.5em;
            &:last-of-type{margin: 0;}
        }
    }
    .img_box{
        figure{margin-bottom: 12px;
            img{width: 100%; height: auto;}
        }
        p{margin: 0;}
    }
}
@media only screen and (max-width: 835px){
    .top_story{padding-bottom: 0;
        .txt_area{font-size: 16px;line-height: 1.8em;}
    }
}

.news_area.top{width: 100%;}
.news_area ul{ margin-bottom: 20px;}
.news_area li a{display:block;transition:0.2s;padding: 3% 5%;}
.news_area li a:hover{ background-color: rgba(0,0,0,0.2); transition:0.2s;}
.news_area li{margin-bottom: 0;border-bottom: 1px solid #444;}
.news_area li p{color: #fff;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: #fff;font-family: 'Crimson Text', serif;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: 120px; text-align:left;position:relative;z-index: 80;}
#top_news .container{max-width:1100px; margin: 0 auto;}
#top_news .right {flex-grow: 1;}
#top_news .stit{writing-mode: vertical-rl;font-size: 120px;font-weight: bold;line-height: 1em;font-family: 'Cormorant Garamond', serif;}
#top_news .news_area:after{position: absolute;background-size: contain;background-repeat: no-repeat;max-width: 510px;width: 100%;height: 25%;left: 50%;transform: translateX(-50%);}

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

.news_more{background-color: #000; opacity: 0.6; text-align: center;display: block;width: 14em;color: #fff;margin-left: auto;font-size: 14px;transition: all 0.2s;position:relative;font-family: 'Crimson Text', serif;border: 1px solid white; line-height: 1em;}
.news_more a{color:#fff;display: block;padding: 12px 16px; opacity: 1; font-weight: 700; font-size: 16px; line-height: 1.2em;}
.news_more:hover{cursor: pointer;}
.news_more:hover a{ background-color: rgba(0,0,0,0.2); transition:0.2s;}

@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: 8px;}
    .news_area li p{ display: block; font-size: 14px; line-height: 1.5em;}
    .news_area li p span.date{ display: flex; width: 100%; align-items: baseline;}
    .news_area li p span.date span:first-child{ margin-right: 6px;}
    .news_area li p span.date span:last-child{font-size: 1.2em;}

    #top_news{display:inherit;margin-top:0;margin-bottom: 60px; width: 90%; margin: 0 auto;}
    #top_news .container{ display: block;}
    #top_news .stit{ font-size: 40px; margin-left: -2%; margin-right: 3%;}

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

    .news_more{margin-bottom: 0;font-size: 12px;}
    .news_more a{padding: 8px;}
}


/* about cats eye */
.contents_box{background-color: #0e0925a8;padding: 40px;}

.about_cats_eye{
    .flex{display: flex;gap: 0 5%;margin-bottom: 60px;
        a{text-decoration: underline;}
        &:last-of-type{margin: 0;}
        .left{width: 50%;
            figure{background-color: #000;}
        }
        .right{width: 50%; text-align: left;
            .tit{font-size: 1.2em;line-height: 1.5em;padding-bottom: 0.4em;margin-bottom: 1em;border-bottom: 1px solid #e6decd;}
            .txt_area{margin-bottom: 40px;
                &:last-of-type{margin: 0;}
                .stit{font-size: 1.6em;font-weight: bold;line-height: 1.5em;margin-bottom: 0.5em;}
            }
        }
        .mini_flex{display: flex;gap: 0 5%; justify-content: space-between;
            .left{width: 65%;
                .sstit{font-size: 1.2em;font-weight: bold;margin-bottom: 0.5em;}
            }
            .right{width: 30%;}
        }
    }
}
@media only screen and (max-width: 835px){
    .contents_box{ padding: 20px;}

    .about_cats_eye{
        .flex{flex-direction: column; gap: 20px 0; margin-bottom: 40px;
            .left{width: 100%;}
            .right{width: 100%;
                .tit{font-size: 1.2em;line-height: 1.5em;padding-bottom: 0.4em;margin-bottom: 1em;border-bottom: 1px solid #e6decd;}
                .txt_area{margin-bottom: 40px;
                    &:last-of-type{margin: 0;}
                    .stit{font-size: 1.6em;font-weight: bold;line-height: 1.5em;margin-bottom: 0.5em;}
                }
            }
        }
    }
}

.foot_outer{padding-bottom: 120px;}

/********************** NEWS *******************************/
#in_news{}
#in_news .container {width: 92%; max-width: 1200px; margin: 0 auto;}

#in_news .news_list .content_tit { font-size: 16px; line-height: 1.8em; }

@media only screen and (max-width: 768px) {
    #in_news{}
    #in_news .top_tit{
            span{
                &:before,
                &:after{width: 40px;height: 50px;}
                &:before{left: -40px;}
                &:after{right: -40px;}
            }
        }
    #in_news .news_list li a { flex-direction: column; align-items: flex-start; gap: 4px 0; padding: 1.2em 0; }
    #in_news .news_list .date { font-size: 12px; }
    #in_news .news_list .content_tit { font-size: 14px; }
    #in_news .news_area li p span.date span:last-child{font-size: 1.2em;line-height: 1.1em;}
}

.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 */
#in_news .news_more {text-align: center; display: block; width: 14em; color: #fff; margin-left: auto; font-size: 14px; transition: all 0.2s; position: relative; font-family: 'Crimson Text', serif; border: 1px solid #fff; line-height: 1em;}
#in_news .news_more a{color: #fff; display: block; padding: 9px 16px;}
#in_news .single_bottom a {margin: 0 5px; color: #fff; letter-spacing: 0.1em; font-weight: 900;} 

.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;font-weight: 300;line-height: 1.7em;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: 14px;line-height: 1.5em;}
    .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{}
    .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.page_content{}
#introduction .txt_area {background-color: #05042861; padding: 40px;}
#introduction .pagetit{text-align: left; font-weight: bold; font-size: 10vw; letter-spacing: -0.03em; line-height: 1em; color: var(--keyc); opacity: 0.3 !important; position: absolute; top: 0; left: 0; z-index: -1; transition: 0.8s ease; margin-top: 0;}
#introduction .block{ position: relative; text-align: left;font-weight: 400;font-size: 18px;line-height: 2em;}
#introduction .block p{margin-bottom: 2em;}
#introduction .block p.lead{font-size: 2em;text-align: center; line-height: 1.4em;}

@media only screen and (max-width: 768px){
    #introduction.page_content{}
    #introduction .txt_area {padding: 20px;}
    #introduction .block{ padding: 0; font-size: 14px; line-height: 1.8em;}
    #introduction .block .lead{ font-size: 1.3em;}
	
}


/********************** STORY *******************************/
#story .txt_area {background-color: #05042861; padding: 40px;}
#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 .txt_area {padding: 20px;}
    #story .block{ padding: 0; font-size: 14px; line-height: 1.8em;}
    #story .block .lead{ font-size: 1.3em;}
}

/********************** CAST *******************************/
#cast{}
.cast_list{margin-bottom: 6vw; display: flex; justify-content: center; flex-wrap: wrap; gap: 60px 0%;
    li{width: 40%;
        .img_box{margin-bottom: 12px; position: relative; overflow: hidden;
            &.c_01{border: 2px solid #2f2d70;}
            &.c_02{border: 2px solid #824805;}
            &.c_03{border: 2px solid #633380;}
            img{width: 100%; height: auto;}
            .deco{width: 60px;
                &.tl{position: absolute;top: -5px;left: -5px;}
                &.tr{position: absolute;top: -5px;right: -5px;transform: scale(-1, 1);}
                &.bl{position: absolute;bottom: -5px;left: -5px;transform: scale(1, -1);}
                &.br{position: absolute;bottom: -5px;right: -5px;transform: scale(-1, -1);}
            }
        }
        .txt_area{
            .roles{margin: 0;}
            .name{margin: 0;font-size: 2em;font-weight: bold;line-height: 1.5em;}
            .comment{width: min(100%,600px);}
        }
    }
}


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

#cast .cast_list li{width: min(25%, 400px);padding: 0 1.5%; }
#cast .cast_list li figure{ width:100%; overflow: hidden; line-height: 0; margin-bottom: 12px;}
#cast .cast_list li img{}
#cast .cast_list li .cast_name{font-size: 1.1vw;line-height:1.5em;padding: 0.4em 0 0;margin: 0;color: var(--keyc);}
#cast .cast_list li .cast_name span{display:block;font-size:1.5em;line-height:1.5em;color: #fff; padding-top: 0.1em;}
#cast .comment,
#staff .comment { display: block; width: min(100%, 300px); color: #e6decd; border: 1px solid #e6decd; background-color: #15102da6; margin: 12px auto 0; font-size: 0.9em; padding: 0.5em; }
#cast .comment.sp_only,
#staff .comment.sp_only { display: none !important; }

#cast .cast_02 li{ width:26%; }
#cast .cast_02 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-family:'Oswald'; */font-size:60px;line-height:1em;margin-bottom:50px;}
#cast .staff_wrap p{font-size: 20px; line-height:1.5em;margin-bottom: 10px;}
#cast .staff_wrap span{color: #fff;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 .ensemble{display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; font-size: 1.1em; line-height: 1.5em; margin-bottom: 80px;}
#cast .ensemble .break {display: block; flex-basis: 100%; height: 0;}

#cast .prof_txt{ margin: 20px auto 0; width: 100%; border:1px solid #666; color: #fff; position: relative; padding: 5px 0; font-size: 14px; line-height: 1.5em;}

@media only screen and (max-width: 768px){
    #cast{}
    #cast .top_tit{
            span{
                &:before,
                &:after{width: 40px;height: 50px;}
                &:before{left: -40px;}
                &:after{right: -40px;}
            }
        }
    #cast.page_content{}
    #cast .pagetit{top: 0;}

    #cast p{ font-size:16px;}
    #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{}
    #cast .cast_list li .cast_name{ font-size:14px; padding:5px 0 0;}
    #cast .cast_list li .cast_name span{  font-size:18px; 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, 
    #staff .comment{ width: 100%; font-size: 12px;}
    #cast .comment.sp_only,
    #staff .comment.sp_only { display:inline-block !important;}

    #staff .staff_list {width: 80%; margin: 0 auto;}

    #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 .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:40px; line-height:1em; margin-bottom:20px;}
    #cast .staff_wrap p{ font-size: 14px; line-height: 1.5em; position: relative; margin-bottom: 16px;}
    #cast .staff_wrap span{ font-size: 14px;}
    #cast .staff_wrap span:nth-child(3){font-size: 14px;}

    #cast .cast_wrap2 li{ font-size: 20px;}
    
    #cast .ensemble{flex-direction: column; gap: 0;}

    #cast .prof_txt{ margin: 5px auto 0; font-size: 12px;}
}


/********************** SCHEDULE *******************************/
#schedule{ width: 80%; margin: 0 auto;}
#schedule.page_content{max-width: 1200px;}
#schedule .container {margin: 0 auto; margin-bottom: 120px;}

#schedule .sc_block{ margin-bottom: 120px;}
#schedule .all_date{}
#schedule .all_date .strong{}

#schedule .venue{color: #fff; font-size:20px; line-height:1.6em; margin-bottom:30px;}
#schedule .place{ color: #fff; font-size: 42px; font-weight: bold; line-height: 1em; margin-bottom: 30px;}
#schedule .datetit{color: #fff; font-size:36px; line-height:1.5em; margin-bottom:0.4em; font-weight:bold; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",  serif; }
#schedule .datetit strong{ font-size:1.8em;}
#schedule .place_img img {height: 50px;}
#schedule .map{display:inline-block;color:#fff;margin-left:15px;padding:4px 0;width: 120px;transition:0.2s;font-size: 14px;position:relative;top:-3px;font-family: 'Crimson Text', serif; border: 1px solid #999;}
#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: 30px;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: rgba(255,255,255,0.8);}
.calendar01 th.wd{width: 6em;}
.calendar01 th.blue{background-color: rgb(2 40 96 / 67%);color: #fff;}
.calendar01 th.red{background-color: rgb(142 30 30 / 67%);color: #fff;}
.calendar01 td{text-align: center;color: #fff;border: 1px solid #666;background-color:rgba(0,0,0,0.3);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: #ffcc00 !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{ width: 90%;}
    #schedule .top_tit{
            span{
                &:before,
                &:after{width: 30px;height: 45px;}
                &:before{left: -35px;}
                &:after{right: -35px;}
            }
        }
    #schedule.page_content{}
    #schedule .container {margin-bottom: 100px;}
    #schedule .pagetit{top: 0;}

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

    #schedule .venue{ font-size: 12px; 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:16px;}
    #schedule .datetit strong{ font-size:1.4em;}
    #schedule .place_img img {height: 30px;}
    #schedule .map{ padding: 4px 15px; position: absolute; width: 24%; right: 0; text-align:center; font-size: 12px;}

    #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:7em; }
    .calendar01 th{font-size: 12px;}
    .calendar01 td{ padding:5px 0; font-size:14px;}
    .calendar01 td img{ max-width: 18px;}
    .calendar01.sp_only{ display: table !important; margin-bottom: 4px;}

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

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


/********************** TICKETS *******************************/
#tickets{ width: 100%; margin: 0 auto;}
#tickets .container {max-width: 1200px; margin: 0 auto;}
#tickets .price_wrap .stit{font-size: 30px; font-weight: bold; line-height: 1.5em; margin-bottom: 0.5em;}
#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: 20px; display: flex; width: 100%; align-items: center; border-top: 1px solid #999;border-bottom: 1px solid #999; background-color: rgba(0,0,0,0.4);}
#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 5% ;}
#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: 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: 20px;}
#tickets .block .stit{font-size: 22px;font-weight: bold;line-height: 1em; color: var(--keyc); margin-bottom: 1em; 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{}
#tickets .ticket_link a{ color:#e6decd; text-decoration: underline; }
#tickets .ticket_link .tit_date{font-size: 30px;font-weight: bold;line-height: 1.5em; margin-bottom: 0.5em;}

#tickets .ticket_block{ width: 100%; margin: 0 auto; text-align: left; padding:0 5%; background-color: rgba(0, 0, 0, 0.7); color: #e6decd; margin-bottom: 60px;font-size: 18px; line-height: 1.7em; font-weight: bold;}
#tickets .ticket_block .stit{ font-weight: 900; font-size: 20px; color: #e6decd; line-height: 1.7em; padding: 3% 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; margin-bottom: 1.8em;}
#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: #e6decd; color: rgba(0, 0, 0, 0.8); 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: #e6decd; width: 20px; height: 2px; transition: all 0.3s;}
#tickets .acc .stit:after{ transform: rotate(90deg);}
#tickets .acc .stit.accordion_active:before { transform: rotate(180deg); }
#tickets .acc .stit.accordion_active:after { transform: rotate(180deg); opacity: 0; }
#tickets .acc .in_box{ height: 0; overflow: hidden; padding-bottom: 0;}


.aftertalk{background-color: rgba(0,0,0,0.3);border: 1px solid #cc9900;text-align: left;font-size: 16px;font-weight: 400;line-height: 1.7em; margin-bottom: 100px;  padding: 2.5% 4%;}
.aftertalk .stit{ text-align: center; color: #fc0; margin-bottom: 1em;font-size: 18px; line-height: 1em;}

.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 #666; border-bottom: 1px solid #666; 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;}

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

    #tickets{ width: 98%;}
    #tickets .price_wrap{ margin-bottom: 0}
    #tickets .price_box{ padding: 1em 0 0; display: inherit;}
    #tickets .price_box .sstit{ font-size: 20px; width: 100%; border-bottom: 1px solid #999; line-height: 1em; padding-bottom: 0.75em; margin-bottom: 0;}
    #tickets .price_box .in_box{ width: 100%;}    
    #tickets .price_box .in_box dl{ display: block; width: 100%; padding: 0.5em 5%; 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: 14px; line-height: 1.5em;  margin-bottom: 12px;}
    #tickets .block .stit{ font-size: 16px; padding: 0; line-height: 1.4em;}
    #tickets .block .in_box{ padding: 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_link .tit_date{font-size: 20px;font-weight: bold;line-height: 1.5em; margin-bottom: 0.5em;}
    #tickets .ticket_block{ width: 100%; 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; margin-bottom: 0;}
    #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: 0;}
    #tickets .acc .in_box.accordion_open { padding-bottom: 5%; }
    
    #tickets .acc .stit:before,
    #tickets .acc .stit:after{ width: 10px; height: 2px; }
	
	.aftertalk,
	.child{ font-size: 14px; line-height: 1.7em; padding: 5%; margin-bottom:70px; }
	.aftertalk .stit,
	.child .stit{ font-size: 16px;}	
}


/********************** 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: 4px 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 #ccc;}

.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 .note_box{margin-bottom: 120px; padding: 50px; background-color: #fff; color: #000;text-align: left;}
#special .note_box .tit{font-size: 34px; font-weight: bold; line-height: 1.5em; margin-bottom: 1em;text-align: center;}
#special .note_box .catch{font-size: 1.1em;font-weight: bold;margin-bottom: 2em;}
#special .note_box p{ font-size: 16px;line-height: 1.7em;margin-bottom: 1.5em;}
#special .note_box strong{font-size: 1.2em;margin-right: 6px;line-height: 1.5em;}
#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;}

@media only screen and (max-width: 768px){
    #special .note_box{ margin-bottom: 40px; padding: 20px 12px;}
    #special .note_box .tit{ font-size: 24px; margin-bottom: 0.5em;}
    #special .note_box .catch{ font-size: 1em; margin-bottom: 1.5em;}
    #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;}
}




/********************** 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;}
}