@charset "utf-8";

/* アニメーション */
#loading {position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100vh; height: 100svh; background: #000;z-index: 20000;
	.logo {
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
		img {
			display: block; width: 100%; height: auto; max-width: 300px;
			opacity: 1;
		}
	}

	&.is_loaded {display: none;}
	&.load_open { animation: fade_out 1.4s forwards; pointer-events: none;}
}


@keyframes fade_out { 
	0% { opacity: 1;}
	100% { opacity: 0;} 
}

body#top{
    .top{filter: blur(40px);}

    &.load_open {
        .top{filter: blur(0); transition: 2s; transition-delay: 0.8s;}
    }
}





/* fix bg */
.fix_bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-image: url(../images/bg/fixed_bg.jpg);background-position: center;background-size: cover;background-repeat: no-repeat;z-index: -1;}

/* fix bnr */
.fix_bnr{display: block;width: min(160px, 16vw);position: fixed;right: 30px;bottom: 30px;z-index: 10;transition: 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);line-height: 0;}
.fix_bnr img{ width: 100%;}

body.intro_loader .fix_bnr{bottom: -180px;opacity: 0;transition-delay: 0.4s;transition-property:bottom;}
body.intro_on .fix_bnr{bottom: calc(4vw + 10px);opacity: 1;transition-delay: 0.4s;transition-property:bottom;}

@media only screen and (max-width: 768px){
.fix_bnr{width:20vw;right: calc(1vw + 14px);bottom: calc(6vw + 14px);}

body.intro_on .fix_bnr{bottom: calc(6vw + 14px);opacity: 1;}
}

/******* btn arrow *******/
.arrow{ position:relative;}
.arrow::after { content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 5px; height: 5px; border: 1px solid; border-color: transparent #fff #fff transparent; transform: rotate(-45deg); transition: 0.3s;
}
.arrow.red::after{
    border-color: transparent var(--keyc) var(--keyc) transparent;
}
/******* ボタン *******/
.btn{ display: block; background-color: var(--keyc); color: #fff; line-height: 1em; font-size: 20px; position: relative; text-align: center; padding: 1.5em 0; text-decoration: none;}
.btn::after { content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 4px; height: 4px; border: 1px solid; border-color: transparent #fff #fff transparent; transform: rotate(-45deg);}

.frame_all{pointer-events: none;}

.frame{z-index: 10;position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: 1vw 1vw auto auto;width: calc(100% - 6vw);height: calc(100% - 5vw);border-top: 1px solid #666;border-right: 1px solid #666;}
.frame2{z-index: 10;position: fixed;left: 0;right: 0;top: 0;bottom:0;margin: auto auto 1vw 1vw;width: calc(100% - 19vw);height: calc(100% - 6vw);border-bottom: 1px solid #666;border-left: 1px solid #666;}

.frame_line{position: fixed;width: 14vw;right: 1vw;bottom: 4vw;border-bottom: 1px solid #666;z-index: 10;}
.frame_line2{position: fixed;width: 4.3vw;right: 15vw;bottom: 4vw;border-bottom: 1px solid #666;transform:rotate(-45deg);transform-origin: 100% 50% 0;z-index: 10;}
.frame_line3{position: fixed;width: 5.7vw;left: 1vw;top: 5vw;border-bottom: 1px solid #666;transform: rotate(-45deg);transform-origin: 0% 0% 0;z-index: 10;}
.frame_arrow{content: "";background-image: url("../images/icon_arrow.png");display: block;position: fixed;right: 2vw;bottom: 1vw;width: 1.5vw;height: 1.5vw;background-size: contain;background-repeat: no-repeat;z-index: 10;}

@media only screen and (max-width: 768px){
    .frame{margin: 3vw 3vw auto auto;width: calc(100% - 12vw);height: calc(100% - 12vw);}
    .frame2{margin: auto auto 3vw 3vw;width: calc(100% - 32vw);height: calc(100% - 12vw);}
    .frame_line{  width: 20vw; right: 3vw; bottom: 9vw; }
    .frame_line2{ width: 8.8vw; right: 23vw; bottom: 9vw; }
    .frame_line3{ width: 8.8vw;left: 3vw;top: 9vw;}
    .frame_arrow{ right: 5vw;bottom: 3vw;width: 3.8vw;height: 3.8vw;}
    
    
    .btn{ padding: 1.2em 0; font-size: 16px;}
}

/******* 下層 *******/
.page_tit{padding: 10vw 0 4vw;}

@media only screen and (max-width: 768px){
    .page_tit{padding: 26vw 0 4vw;}
}

/********************** top *******************************/
main{}
main.in{margin-bottom: 4vw;}
main img{ max-width:100%;}

.container{ /*max-width:1200px; */width:90%; margin:0 auto;}
main.in .container{max-width: 1000px;}

.stit{color:var(--keyc);font-family:var(--font1);font-size: max(100px,6vw);font-weight: 400;line-height: 1em;position: relative;margin-bottom: 4vw;text-align: center;}
.stit span{ display: block; padding: 0.5em 0 0.5em; width: 23vw; font-size: 1vw; line-height: 1em; color:  var(--keyc); margin: 0 auto; font-weight: bold;}

.ssstit{color: var(--keyc);font-family: var(--font1);font-size: min(50px, 8vw);font-weight: 400;line-height: 1em;position: relative;margin-top: 1.5em;margin-bottom: 1em;text-align: center;}

@media only screen and (max-width: 768px){
    main{ height:100%;}
    .container{ width: 85%;}
    
    .stit{ font-size: 52px; margin-bottom: 10vw;}
    .stit span{ font-size: 10px; width: 150px; padding: 0.2em 0; margin-top: 2px;}
}

/******* mainimg *******/
.top{margin-bottom: min(200px,20vw);position: relative;line-height: 0;width: 100%;}
.top_l{ width: 40%;}

.top_r{width: 100%;line-height: 0;/*display: flex;align-items: center;*/position: relative;transition: 2s;}
.top_r .tit{width: 45%;margin: 5vw auto 3vw;}
.top_r .tit img{width: 100%;}
.top_r .date{width:92%;margin: 0 auto 3vw;}
.top_r .date img{ width: 100%;}
.top_r .bnr_area{display: flex;justify-content: center;flex-wrap: wrap;width: 94%;/* max-width: 1000px; */margin: 0 auto;line-height: 1.5em;font-size: 2vw;font-weight: bold;}
.top_r .bnr_area a{display: block;width: 48%;margin: 0 1%;background-color: #cc6667;color: #fff;border: 1px solid #fff;padding: 1em 0;}
.top_r .bnr_area a:hover{transform: translateY(-3px);}
.top_r .bnr_area a:nth-child(2n){background-color: var(--keyc);}

.top .swiper_outer {padding-top: calc(1.5vw + 60px);width: 100%;}
.top .swiper_outer .swiper-container {overflow: visible;width: 100%;}
.top .swiper_outer .swiper-container .swiper-wrapper .swiper-slide {width: 50%;overflow: hidden; transform:scale(0.9); transition: 0.3s;}
.top .swiper_outer .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;height: auto;}
.top .swiper_outer .swiper-container .swiper-wrapper .swiper-slide a img:hover{ opacity: 1;}

.top .swiper_outer .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active{ transform:scale(1); z-index: 10;}

.top .swiper_outer .swiper-container .swiper-pagination {position: relative;width: 50%;text-align: left;}
.top .swiper_outer .swiper-container .swiper-pagination .swiper-pagination-bullet {background: rgba(0, 0, 0, 0);border: 1px solid var(--keyc);opacity: 1;width: 12px;height: 12px;margin-right: 5px;transition: 0.2s;}
.top .swiper_outer .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: var(--keyc);}
.top .swiper_outer .swiper-container .swiper-pagination .swiper-pagination-bullet:hover {opacity: 0.8;background: #000;}


.swiper-option-box{position: relative;width: calc((100% - 80px) / 3);margin: 2vw auto 0;}

.top .swiper_outer .swiper-container .swiper-button-prev::after, .top .swiper_outer .swiper-container .swiper-button-next::after {content: "";}
.top .swiper_outer .swiper-container .swiper-button-prev, .top .swiper_outer .swiper-container .swiper-button-next {width: 3vw;height: 3vw;background: no-repeat center url("../images/arrow.svg");background-size: contain;top: inherit;right: inherit;bottom: inherit;left: inherit;transition: 0.2s;opacity: 1;cursor: pointer;pointer-events: inherit;}
.top .swiper_outer .swiper-container .swiper-button-prev {right: 3.5vw;}
.top .swiper_outer .swiper-container .swiper-button-next {right: 0;transform: rotateZ(180deg);}
.top .swiper_outer .swiper-container .swiper-button-prev:hover {transform: translateX(-3px);}
.top .swiper_outer .swiper-container .swiper-button-next:hover {transform: translateX(3px) rotateZ(180deg);}

@media only screen and (max-width: 768px){
    .top{display: inherit;/* margin-bottom: 0; */}
    
    .top_r{    padding: 5vw 0 30vw;}
    .top_r .top_tit{ margin-bottom: 0vw;}
    .top_r .tit{ width: 70%; margin: 5vw auto;}
    .top_r .date{ width: 80%;}
    .top_r .bnr_area{font-size: 18px;}
    .top_r .bnr_area a{width: 100%;font-size: 0.9em;margin: 0 0 2vw;}

    .swiper-option-box{width: 90%;margin: 4vw auto 0;}

    .top .swiper_outer{top: calc(1vw + 50px);}
    .top .swiper_outer .swiper-container .swiper-button-prev, .top .swiper_outer .swiper-container .swiper-button-next{width: 11vw;height: 11vw;}
    .top .swiper_outer .swiper-container .swiper-button-prev{right: 12vw;}
	.top .swiper_outer .swiper-container .swiper-wrapper .swiper-slide { transform:scale(0.95);}
	
	.top .swiper_outer .swiper-container .swiper-button-prev:hover {transform: translateX(0);}
	.top .swiper_outer .swiper-container .swiper-button-next:hover {transform: translateX(0) rotateZ(180deg);}
}

/******* date *******/
.top_date{margin-bottom: min(200px, 20vw);/* padding: 1em 0; */font-family: var(--font1);
    .container{
        .date{font-size: min(80px,10vw);/* font-weight: bold; */line-height: 1.5em;margin-bottom: 0.2em;
            span{font-size: 1.8em;margin: 0 0.1em;}
        }
        .place{font-size: min(60px,7vw);/* font-weight: bold; */line-height: 1em;margin-bottom: 0.4em;}
        .time{font-size: min(20px,3.4vw);/* font-weight: bold; */line-height: 1.5em;margin: 0;}
    }
}


/******* ABOUT *******/
.top_about{margin-bottom:25vw;font-size: min(30px,2vw);line-height: 2em;font-weight: bold;padding-top: 8vw;margin-top: -8vw;}
.top_about img{ width: 100%;}
.top_about .about_tit{ margin-bottom: 7vw;}
.top_about .about_catch{width: 60%;margin: 7vw auto 5vw;}

.top_about .messa_btn{display: block;width: 50%;background: linear-gradient(90deg, rgba(84, 186, 190, 1) 0%, rgba(192, 208, 157, 1) 50%, rgba(134, 247, 176, 1) 100%);color: #fff;font-size: 0.8em;font-weight: bold;line-height: 1em;padding: 1em 0;margin: 0 auto;border-radius: 100vw;}

@media only screen and (max-width: 768px){
    .top_about{ font-size: 4vw; margin-bottom: 30vw;}
    .top_about .about_tit{ margin-bottom: 10vw;}
    .top_about .about_catch{width: 100%;margin: 15vw auto 10vw;}

    .top_about .messa_btn{font-size: 1em; width: 100%;}
}

/******* MESSAGE *******/
.top_message{margin: -8vw auto 20vw;padding:8vw 0; background-color: rgba(255,255,255,0.3);}
.top_message .container{max-width: 1000px;}
.top_message .stit span{ width: 28vw;}
.top_message .txt_area{font-size: 1.1em;line-height: 1.8em;border: 1px solid #aaa;padding: 4vw ;text-align: left;}

@media only screen and (max-width: 768px){
    .top_message{margin-bottom: 20vw;}
	.top_message .stit span{ width: 184px;}
    .top_message .txt_area{font-size: 1em;padding: 6vw;}
}

/******* WHAT'S NEW *******/
.top_news{max-width: 1000px;margin: 0 auto;margin-bottom: min(200px,20vw);}
.top_news .stit span{ width: 37vw;}
.stit.news_tit span{ width: 37vw;}
.news_list{margin-bottom: 40px;}
.news_list li{text-align: left;border-bottom: 1px solid #aaa;}
.news_list li a{color: #fff;display: flex;align-items: center;padding: 2em 0;}
.news_list li a.disactive{pointer-events: none;}
.news_list li a:hover{background-color: #ffffff3b;}
.news_list li a .date{width: 8em;color: var(--keyc);font-weight: bold;}
.news_list li a .title{width: calc(100% - 8em);font-size: 1.1em;line-height: 1.5em;}
.news_btn{}
.news_btn a{display: block;width: 50%;background: #fff;color: #000;font-size: 1.2em;font-weight: bold;line-height: 1em;padding: 1em 0;margin: 0 auto 2vw;border-radius: 100vw;text-align: center;}
.news_btn a:hover{opacity: 0.8;}

.in_news{margin: 0 auto;}

@media only screen and (max-width: 768px){
    .top_news{}
	.top_news .stit{ margin-bottom: 3vw;}	
	.top_news .stit span{ width: 240px; }
    .news_list ul{margin-bottom: 20px;}
    .news_list li a{display: block;padding: 1em 0;}
    .news_list li a .date{width: 100%;font-size: 0.9em;}
    .news_list li a .title{width: 100%;font-size: 0.9em;}
    .news_btn a{width: 100%;font-size: 1em;}
}

/* single */
.single{text-align:left;position:relative;margin-bottom: 80px;}

.single .news_tit_outer{margin-bottom: 40px;padding-bottom: 20px;border-bottom: 1px solid #666;}
.single .news_tit_outer .container{display: flex;align-items: center;justify-content: space-between;}
.single .news_tit_outer .date{width: 100%;color: #44966c;font-weight: bold;}
.single .news_tit_outer .date .date_left{font-size: 1.5em;line-height: 1em;}
.single .news_tit_outer .date .date_left .year{display: block;font-size: 0.46em;line-height: 1em;}
.single .news_tit_outer .date .date_right{font-size: 2.8em;padding-left: 0.1em;line-height: 1.1em;}
.single .news_tit_outer .news_tit{text-align: left;font-size: 1.1em;font-weight: bold;line-height: 1.8em;width: calc(100% - 6em);}

.single .txt_box{word-break: break-all;}
.single .txt_box a{color: #44966c;text-decoration:underline;display: inline-block;margin-bottom: 1em;}
.single .txt_box img{ max-width:100%; width:auto; display: block; margin-bottom:24px;}

.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.8em;margin-bottom: 0.4em;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: 2em 0;height: 1px;background-color: #8f8f8f;border: none;}

@media only screen and (max-width: 768px){
    
    .single{margin-bottom: 20px;}
    
    .single .news_tit_outer{margin-bottom: 20px;padding-bottom: 12px;}
    .single .news_tit_outer .container{display: block;}
    .single .news_tit_outer .news_tit{ line-height: 1.6em;width: 100%;}
    
    .single .txt_box{}
    
    .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;}
    }


/******* TIME TABLE *******/
.timetable{margin-bottom: 25vw;padding-top: 8vw;margin-top: -8vw;}
.timetable .table_area{display: flex;justify-content: space-between;}
.timetable .table_area figure{width: 49%;line-height: 0;}
.timetable .table_area figure img{}

@media only screen and (max-width: 768px){
    .timetable{margin-bottom: 20vw;}
    .timetable .table_area{display: block;}
    .timetable .table_area figure{width: 100%;margin-bottom: 30px;}
}

/******* AREAMAP *******/
.areamap{margin-bottom: min(200px,20vw);}


.areamap .container{max-width: 1000px;}
.areamap .map_img{}
.areamap .map_img figure{line-height: 0;max-width: 600px;margin: 0 auto 0px;}
.areamap .map_img .area_btn{display: block;width: 50%;background: linear-gradient(90deg, rgba(84, 186, 190, 1) 0%, rgba(192, 208, 157, 1) 50%, rgba(134, 247, 176, 1) 100%);color: #fff;font-size: 1.2em;font-weight: bold;line-height: 1em;padding: 1em 0;margin: 0 auto;border-radius: 100vw;}

.areamap .access{display: flex;justify-content: space-between;align-items: center;}
.areamap .access .left{width: 50%;}
.areamap .access .left iframe{width: 100%;}
.areamap .access .right{width: 50%;padding-left: 40px;text-align: left;}
.areamap .access .right .stit{font-size: 1.5em;text-align: left;margin-bottom: 1.2em;}

@media only screen and (max-width: 768px){
    .areamap{margin-bottom: 20vw;}
    .areamap .map_img{}
    .areamap .map_img figure{}
    .areamap .map_img .area_btn{width: 100%;font-size: 1em;}

    .areamap .access{flex-direction: column;}
    .areamap .access .left{width: 100%;margin-bottom: 12px;}
    .areamap .access .left iframe{height: 90vw;}
    .areamap .access .right{width: 100%;padding-left: 0;}
    .areamap .access .right .stit{font-size: 1.2em;}
}

/******* food *******/
.top_food{margin: -8vw auto 20vw;padding: 8vw 0;}
.top_food .container{max-width: 1000px;}
.top_food .text{font-size: 1.5em;font-weight: bold;line-height: 1.6em;margin-bottom: 2em;}
.top_food .food_btn{display: block;width: 50%;background: linear-gradient(90deg, rgba(84, 186, 190, 1) 0%, rgba(192, 208, 157, 1) 50%, rgba(134, 247, 176, 1) 100%);color: #fff;font-size: 1.2em;font-weight: bold;line-height: 1em;padding: 1em 0;margin: 0 auto;border-radius: 100vw;}

.modal_box.food{}
.modal_box.food .block{margin-bottom: 80px;}
.modal_box.food .block:last-of-type{margin-bottom: 0;}
.modal_box.food .tit{color: var(--keyc);text-align: center;font-size: 1.5em;font-weight: bold;line-height: 1.5em;margin-bottom: 1em;}
.modal_box.food .lead{line-height: 1.7em;margin-bottom: 2em;}
.modal_box.food .food_list{display: flex; flex-wrap: wrap; justify-content: space-between;}
.modal_box.food .food_list li{width: 48%;}
.modal_box.food .food_list li .food_name{font-weight: bold;color: var(--keyc);margin-bottom: 0.5em;}
.modal_box.food .food_list li .price{font-weight: bold;margin-bottom: 1em;}
.modal_box.food .food_list li figure{border: none;margin-bottom: 20px;}
.modal_box.food .food_list li figure img{max-width: 100%;}
.modal_box.food .food_list li .txt_box{font-size: 0.9em;}
.modal_box.food .food_list li .txt_box hr{border: none;margin: 1.5em 0;width: 40px;height: 1px;background-color: var(--keyc);}

@media only screen and (max-width: 768px){
    .top_food{margin-bottom: 20vw;}
    .top_food .text{text-align: left;font-size: 1.2em;}
    .top_food .food_btn{width: 100%;font-size: 1em;}

    .modal_box.food .block{margin-bottom: 10vw;}
    .modal_box.food .tit{font-size: 1.2em;}
    .modal_box.food .lead{font-size: 0.8em;margin-bottom: 1.2em;}
    .modal_box.food .food_list{flex-direction: column;}
    .modal_box.food .food_list li{width: 94%;margin: 0 auto 8vw;}
    .modal_box.food .food_list li:last-of-type{margin-bottom: 0;}
    .modal_box.food .food_list li .txt_box{font-size: 0.8em;}
    .modal_box.food .food_list li .txt_box hr{margin: 1em 0;}
}

/******* LINE UP *******/
.top_lineup{margin-bottom: min(200px,20vw);}
.top_lineup .lineup_box{ width: 100%; margin: 0 auto 40px;}
.top_lineup .andmore{font-size: 2em;font-weight: bold;line-height: 1em;margin: 0;}
.top_lineup .andmore span{ font-size: 1.1em;}
.top_lineup .moretxt{ font-size: 16px; line-height: 1.7em;}
.top_lineup .moretxt .large{font-size: min(42px,3.4vw);font-weight: bold;line-height: 1.7em;color:#fff;}
.top_lineup .moretxt .large span{ background:linear-gradient(90deg, rgba(84,186,190,1) 0%, rgba(192,208,157,1) 50%, rgba(134,247,176,1) 100%); display: inline; padding: 0 0.5em;}

.top_lineup .lineup_box .contents{width: 100%;border: 1px solid #aaa;padding: 2vw;margin-bottom: 5vw;}
.top_lineup .lineup_box .contents .sstit{width: 100%;text-align: center;margin-bottom: 6vw;}
.top_lineup .lineup_box .contents .sstit img{width: min(240px,14vw);}
.top_lineup .lineup_box .contents .list{display: flex;flex-wrap: wrap;justify-content: center;}
.top_lineup .lineup_box .contents .list li{width: 25%;padding: 1.5%;position: relative;transition: 0.2s;}
.top_lineup .lineup_box .contents .list li:hover{cursor: pointer; transform: translateY(-5px); transition: 0.2s;}
.top_lineup .lineup_box .contents .list li figure{line-height: 0;position: relative;margin-bottom: 8px;}
.top_lineup .lineup_box .contents .list li figure img{transition: 0.2s;}
.top_lineup .lineup_box .contents .list li.new figure:before{content: "NEW";position: absolute;color: #44966c;font-size: 0.8em;font-weight: bold;line-height: 1.5em;padding: 0em 0.6em;top: 0;border: 1px solid;left: 0;z-index: 10;background-color: #000;}
.top_lineup .lineup_box .contents .list li .name{font-size: min(26px,2vw);line-height: 2em;font-weight: bold;line-height: 1.2em;display: block;position: relative;color: #fff;}
.top_lineup .lineup_box .contents .list li .name.headliner{position: relative;}
.top_lineup .lineup_box .contents .list li .name.headliner:after{position: relative;content:"HEAD LINER";color: #fff;background-color: var(--keyc);font-size: 0.45em;line-height: 1em;margin-left: 1em;padding: 0 0.5em;top: -1.8em;}
/*
.top_lineup .lineup_box .contents .list li.new .name span{filter: drop-shadow(2px 4px 6px #44966c);}
*/
.top_lineup .lineup_box .contents .list li .name.flag span{display: inline-flex; align-items: center;}
.top_lineup .lineup_box .contents .list li .name.flag span:before{content: ""; background-position: center 54%;background-repeat: no-repeat;background-size: contain;display: block;width: 20px;height: 2.2em; margin-right: 0.5em;}
.top_lineup .lineup_box .contents .list li .name.flag.ja span:before{background-image: url(../images/flag_j.png);}
.top_lineup .lineup_box .contents .list li .name.flag.kr span:before{background-image: url(../images/flag_k.png);}

.top_lineup .lineup_box .contents .list li .name.flag span.small{display: block;font-size: 0.5em;line-height: 1.2em;margin-top: -0.6em;}
.top_lineup .lineup_box .contents .list li .name.flag span.small:before{display: none;}

.top_lineup .lineup_box .contents .list.one{justify-content: center;margin-bottom: 4vw;}
.top_lineup .lineup_box .contents .list.one li{width: 50%;}
.top_lineup .lineup_box .contents .list.one li a{ color: #ccc;}

.top_lineup .lineup_box .contents .list.one.oa{}
.top_lineup .lineup_box .contents .list.one.oa li{width: 30%;}

.top_lineup .lineup_box .contents .list li.list_end{font-size: 1.2em;font-weight: bold;line-height: 1.5em;/*margin-top: 4vw;*/width: 100%;}
.top_lineup .lineup_box .contents .list li.list_end:hover{transform: translateY(0);cursor: inherit;}

.top_lineup .lineup_box .media-list{ display: flex; flex-wrap: wrap; justify-content: center; gap: 25px 2%; width: 100%;}
.top_lineup .lineup_box .media-list li {width: 49%;}


@media only screen and (max-width: 768px){
    .top_lineup{font-size: 6vw;margin-bottom: 20vw;}
    .top_lineup .lineup_box{ width: 100%; display: block; margin: 0 auto 20px;}
    .top_lineup .andmore{font-size: 1em;}
    .top_lineup .moretxt{ font-size: 3vw; }
    .top_lineup .moretxt .large{font-size: 5vw;}
    
    .top_lineup .andmore span{ font-size: 1.1em;line-height: 1.8em;display: block;}
    .top_lineup .lineup_box .contents{width: 100%;margin-bottom: 4.0vw;border: none;padding: 0;}
    .top_lineup .lineup_box .contents .sstit{margin-bottom: 20px;}
    .top_lineup .lineup_box .contents .sstit img{width: 24vw;}

    .top_lineup .lineup_box .contents .list li{width: 50%;/* padding: 0; */margin-bottom: 6vw;}
    .top_lineup .lineup_box .contents .list li:nth-child(2n){ margin-right: 0;}    
    .top_lineup .lineup_box .contents .list li.new figure:before{font-size: 0.3em;}
    .top_lineup .lineup_box .contents .list li .name{font-size: 4vw;line-height: 1.2em;}
    .top_lineup .lineup_box .contents .list li .name.txts{ font-size: 3.2vw;}
    
    .top_lineup .lineup_box .contents .list li .name.headliner:after{top: -0.3em;font-size: 0.5em;}
    .top_lineup .lineup_box .contents .list li .name.flag span:before{width: 14px;height: 14px;left:-16px;}

    .top_lineup .lineup_box .contents .list li .name.flag span.small{margin-top: 0.6em;}

    .top_lineup .lineup_box .contents .list.one li{width: 100%; padding:0 0 3%; margin: 0; }

    .top_lineup .lineup_box .contents .list.one.oa li{width: 50%;}

    .top_lineup .lineup_box .contents .list li.list_end{font-size: 0.5em;margin-top:0;}

    .top_lineup .lineup_box .media-list{ gap: 15px 2%;}
    .top_lineup .lineup_box .media-list li {width: 100%;}
}


/******* TICKETS *******/
.top_tickets{max-width:1000px;margin: 0 auto;margin-bottom: min(200px,20vw);padding-top: 8vw;}

.top_tickets .ticket_1{ margin-bottom: 5vw;font-weight: bold;}
.top_tickets .ticket_1 .date{font-size: min(120px,12vw);  line-height: 1em; margin: 0;font-family: var(--font1); font-weight: 400;}
.top_tickets .ticket_1 .date span{ font-size: 0.5em;}
.top_tickets .ticket_1 .venue{font-size: min(40px,4vw);  line-height: 1em; margin-bottom: 0.6em;}
.top_tickets .ticket_1 .start{ }

.top_tickets .andmore{ font-size: min(50px,3.5vw); line-height: 1.5em; font-weight: bold;}

.price{ margin-bottom: 6vw;text-align: left;}
.price .price_list{ border-top: 1px solid #777; font-weight: bold; margin-bottom: 20px;}
.price .price_list .block{ display: flex; width: 100%; border-bottom: 1px solid #777; justify-content: space-between; font-size: 24px; line-height: 1.5em; padding: 1.5em 1em; align-items: center;}
.price .price_list .block .right{ font-size: 1.2em;}
.price .price_list .block span{ font-size: 0.7em;}

.price .note{ font-size: 14px; line-height: 1.7em;}

.ticket_link{margin-bottom: 40px;}
.ticket_link .block{ display: flex; background-color: #fff; color: #000; border-radius: 6px; padding: 1em 1em 1em 1.7em; align-items: center; font-size: 20px; line-height: 1.7em; font-weight: 500; margin-bottom: 20px;}
.ticket_link .block .left{ text-align: left; width: 70%;}
.ticket_link .block .left .senkoutit{ font-weight: bold; font-size: 1.5em; line-height: 1.5em;}
.ticket_link .block .right{ text-align: center; width: 30%;}
.ticket_link .block .right .ticketbtn{display: block;background-color: #000;color: #fff;padding: 2em 0;border-radius: 6px;}
.ticket_link .block .right .ticketbtn:hover{ opacity: 0.8;}

.ticket_link .block.dis{ background-color: #666; font-size: 16px;}
.ticket_link .block.dis .right .ticketbtn{ pointer-events: none; background-color: #666; color: #666; padding: 1.3em 0;}

.en_tickets{max-width: 900px;margin: 0 auto;border: 1px solid #ccc;padding: 5vw 2%;width: 90%;}
.en_tickets .sstit{font-size: 2em;font-weight: bold;line-height: 1.5em;margin-bottom: 0.5em;}
.en_tickets .en_btn{background-color: #000;color: #fff;display: block;width: 70%;margin: 0 auto;font-size: 1.5em;font-weight: bold;line-height: 1.5em;padding: 1em;}
.en_tickets .en_btn:hover{opacity: 0.9;}

@media only screen and (max-width: 768px){
    .top_tickets{margin: -5vw auto 30vw;}
    
    .top_tickets .ticket_1 .date{ font-size: 15vw;}
    .top_tickets .ticket_1 .venue{ font-size: 5vw;}
    .top_tickets .ticket_1 .start{ font-size: 13px; line-height: 1.5em;}

    .top_tickets .andmore{ font-size: 7vw;}
    
    .price .price_list .block{ font-size: 16px; padding: 1.5em 0;}
    .price .price_list .block span{ font-size: 0.5em;}
    
    .ticket_link{margin-bottom: 12px;}
    .ticket_link .block{ font-size: 16px; padding: 1em; display: inherit; margin-bottom: 10px;}
    .ticket_link .block .left{ width: 100%; margin-bottom: 1em;}
    .ticket_link .block .right{ width: 100%;}
    .ticket_link .block .right .ticketbtn{ padding: 0.75em 0;}
    .ticket_link .block .left .senkoutit{ font-size: 1.2em;}
    
    .ticket_link .block.dis{ font-size: 13px;}
    .ticket_link .block.dis .right .ticketbtn{ padding: 0.5em 0;}

    .en_tickets{width: 85%;}
    .en_tickets .sstit{font-size: 1.2em;}
    .en_tickets .en_btn{width: 94%;font-size: 1.2em;}
}

.spo_area{ margin-bottom: 6vw;}
.spo_area .container{max-width: 900px;}


/* sponsor */
.sponsor{margin-bottom: 5vw;}
.sponsor ul{ display: flex; justify-content: center; flex-wrap: wrap;}
.sponsor .sponsor1{margin-bottom: 3vw;}
.sponsor .sponsor1 li{width: 20%;margin: 0 0.5%;}
.sponsor .sponsor2 li{ width: 18%; padding: 0 0.5%;}
.sponsor img{ width: 100%;}

@media only screen and (max-width: 768px){
	.sponsor{margin-bottom: 50px;}
	.sponsor .sponsor1{margin-bottom: 20px;}
	
	.sponsor .sponsor1 li{ width: 40%;}
	.sponsor .sponsor2 li{ width: 33.33%; padding: 0 0.5%;}
	
}

/* archive */
.top_archive{margin: -8vw auto 0;padding: 8vw 0;background-color: #00000080;
    .archive_list{margin-bottom: 4vw;}
}

.archive_list{display: flex; flex-wrap: wrap; gap: 40px 2%;
    li{width: 32%;
        a{display: block; text-align: left; color: #fff;
            figure{line-height: 0;height: 0;padding-bottom: 100%;position: relative; overflow: hidden;margin-bottom: min(12px);
                img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: auto;height: auto;max-width: 100%;max-height: 100%;}
            }
            .txt_area{
                .title{margin-bottom: 0.5em;}
                .date{margin: 0;}
                .place{margin: 0;}
            }
        }
    }
}
@media only screen and (max-width: 768px){
    .top_archive{
        .archive_list{flex-direction: initial; gap: 12px 2%;
            li{width: 32%;}
        }
    }

    .archive_list{flex-direction: column; gap: 20px 0;
        li{width: 100%;
            a{
                figure{margin-bottom: min(12px);}
                .txt_area{}
            }
        }
    }
}

/* archive single */
.archive-single{padding-top: 10vw;
    .single{
        .s_fv{margin-bottom: min(120px,12vw);
            figure{line-height: 0;margin-bottom: 12px;
                img{width: 100%; height: auto;}
            }
            .txt_area{
                .title{font-size: min(30px,5.6vw);line-height: 1.5em;margin-bottom: 0.2em;}
                .date{margin: 0;}
                .place{margin: 0;}
            }
        }
        .lineup{margin-bottom: min(120px,12vw);
            ul{display: flex; flex-wrap: wrap; gap: 20px 2%;
                li{width: 23.5%;
                    figure{line-height: 0;margin-bottom: 8px;
                        img{width: 100%; height: auto;}
                    }
                    .name{margin: 0; text-align: center;}
                }
            }
        }
        .photo{margin-bottom: min(120px,12vw);
            --grid_gap: 10px;
            ul{width: 100%;height: auto;display: grid;grid-template-columns:repeat(6, calc((100% - var(--grid_gap) / 2 * 5) / 6));grid-gap: calc(var(--grid_gap) / 2);margin-bottom: calc(var(--grid_gap) * 4);
                li{position: relative;width: 100%;border-radius: 5px;overflow: hidden;transition: .2s;aspect-ratio: 1 / 1;cursor: pointer;
                    img{width:100%;max-width: initial;height: 100% !important;-o-object-fit: cover;object-fit: cover;-o-object-position: 50% 50%;object-position: 50% 50%;transition: .3s;transform: scale(1);display: block;}
                    &:hover{
                        img{transform: scale(1.2);}
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 768px){
    .archive-single{padding-top: 16vw;
        .single{
            .s_fv{
                .txt_area{}
            }
            .lineup{
                ul{gap: 20px 2%;
                    li{width: 49%;
                        .name{margin: 0; text-align: center;}
                    }
                }
            }
            .photo{
                --grid_gap: 4px;
                ul{grid-template-columns: repeat(5, calc((100% - var(--grid_gap) / 2 * 4) / 5));
                    li{
                        img{}
                    }
                }
            }
        }
    }
}


/******* modal *******/
.modal_box{text-align: left;padding: 5%;}
.modal_box figure{line-height: 0;text-align: center;}
.modal_box figure img{ max-width: 60%;}
.modal_box .sstit{ font-size: 1.4em; border-left: 2px solid var(--keyc); padding: 0.25em 0 0.25em 1em; margin: 1.5em 0 1em; font-weight: bold;}
.modal_box .sstit .small{display: block;font-size: 0.6em;line-height: 1.5em;}
.modal_box .sns_list{display: flex;margin-bottom: 0;flex-wrap: wrap;}
.modal_box .sns_list li{width: 32%;margin-right: 2%;margin-bottom: 2%;}
.modal_box .sns_list li:nth-child(3n){margin-right: 0;}
.modal_box .sns_list li a{display: block;border: 1px solid;font-size: 0.8em;font-weight: bold;padding: 0.2em 1em;text-align: center;}
.modal_box .sns_list li a:hover{background-color: #72a98d38;}
.modal_box .txt_area{margin-bottom: 30px;}

.modal_box.guide{}
.modal_box.guide a{text-decoration: underline;}
.modal_box.guide p{margin-bottom: 1.5em;}
.modal_box.guide .tit{color: var(--keyc);text-align: center;font-size: 2em;font-weight: bold;line-height: 1.5em;margin-bottom: 1.5em;display: block;}
.modal_box.guide .sstit{font-size: 1.2em;margin: 0 0 0.5em;}
.modal_box.guide .block{margin-bottom: 40px;}
.modal_box.guide ul{list-style: disc;padding-left: 24px;margin-bottom: 20px;}
.modal_box.guide li{margin-bottom: 0.3em;}

.modal_box.guide .faq_tit{display: block;margin: 1em 0em 0em;color: var(--keyc);font-size: 1.1em;font-weight: bold;line-height: 1.8em;}

@media only screen and (max-width: 768px){
    .modal_box figure img{ max-width: 100%;}
    .modal_box .sstit{font-size: 1.2em;margin: 1em 0;}
    .modal_box .sns_list{margin-bottom: 12px;display: block;}
    .modal_box .sns_list li{width: 100%;margin-right: 2%;}
    .modal_box .sns_list li:nth-child(2n){margin-right: 0 !important;}
    .modal_box .sns_list li:nth-child(3n){margin-right: 2%;}
    .modal_box .sns_list li a{font-size: 0.7em;}
    .modal_box .txt_area{font-size: 0.8em;line-height: 1.8em;margin-bottom: 12px;}

    .modal_box.guide .tit{font-size: 1.4em;}
    .modal_box.guide .sstit{font-size: 1.1em;padding: 0.25em 0 0.25em 0.6em;}
    .modal_box.guide .block{margin-bottom: 30px;font-size: 0.9em;line-height: 1.6em;}
}


/******* modal gallery (photo) *******/
.modal_gallery .modal_inner{text-align: center;}
.modal_gallery .image_wrap{position: relative;display: inline-block;}
.modal_gallery .modal_image{display: block;margin: 0 auto;}
.modal_gallery .bottom_block{margin-top: 1em;color: #fff;}
.modal_gallery .bottom_block .caption{font-size: 0.9em;line-height: 1.6em;}
.modal_gallery .navigation{position: absolute;right: 10px;bottom: -60px;display: flex;gap: 10px;}
.modal_gallery .navigation .button{width: 50px;height: 50px;background: no-repeat center url("../images/svg/parts/icon_arrow_r.svg");background-size: contain;cursor: pointer;transition: 0.2s;}
.modal_gallery .navigation .button:hover{opacity: 0.6;}
.modal_gallery .navigation .button#prev{transform: rotate(180deg);}

@media only screen and (max-width: 768px){
    .modal_gallery .bottom_block .caption{font-size: 0.8em;}
    .modal_gallery .navigation{right: 6px;bottom: -40px;gap: 6px;}
    .modal_gallery .navigation .button{width: 30px;height: 30px;}
}


/* =colorbox
------------------------------------------------------------------------------------------*/
#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: #353535;}
#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: #000;position:relative;z-index:10000;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #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?0322) 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;}
}

.top_r {padding-top: 0;}
.en_tickets .en_btn.dis { background: #666; color: #000; pointer-events: none; }
@media screen and (max-width: 768px) {
    .top_r {}
    .top_r:first-of-type { padding-bottom: 0; }
    .top .swiper_outer { padding-top: calc(1vw + 40px); }
}