@charset "UTF-8";
/* ===============================================
#擬似要素中央配置 mixin
=============================================== */
/* ===============================================
# navigation
=============================================== */
:root {--key_color: #d1202d;--ac_color: #d1202d;--button-color:#000;--button-text-color:#fff;--flex-gap:30px;}

/* ===============================================
# SNSカラー
=============================================== */
.fix_bg {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: -1;pointer-events: none;}
.fix_bg:before {position: absolute;content: "";background-image: url(../images/bg/bg.webp);background-repeat: no-repeat;background-size: cover;background-position: center;width: 100%;height: 100%;top: 0;left: 0;}
.fix_bg .deco {position: absolute;background-position: center;background-repeat: no-repeat;background-size: contain;}
.fix_bg .deco.d_tl {background-image: url(../images/bg/kv_tl.svg);top: 0;left: 0;width: min(600px, 34vw);height: min(136px, 7.9vw);}
.fix_bg .deco.d_tr {background-image: url(../images/bg/kv_tr.svg);top: 0;right: 0;width: min(225px, 16vw);height: min(327px, 23vw);}
.fix_bg .deco.d_bl {background-image: url(../images/bg/kv_bl.svg);bottom: 0;left: 0;width: min(243px, 12.8vw);height: min(403px, 21vw);}
.fix_bg .deco.d_br {background-image: url(../images/bg/kv_br.svg);bottom: 0;right: 0;width: min(990px, 30vw);height: min(223px, 13.7vw); background-position: bottom right;}

.h_outer {text-align: center;margin-bottom: 60px;}

.sec_h {display: inline-block;position: relative;font-family: var(--font01);color: var(--keyc01);}
.sec_h .top {display: block;font-weight: 900;font-size: min(84px, 16vw);line-height: 1.2em;}
.sec_h .bottom {font-size: min(16px, 3.6vw);font-weight: 900;position: relative;}
.sec_h .bottom:before, .sec_h .bottom:after {position: absolute;content: "";width: 50px;height: 2px;background-color: var(--keyc01);top: 50%;transform: translateY(-50%);}
.sec_h .bottom:before {left: -60px;}
.sec_h .bottom:after {right: -60px;}
.sec_h.c_01 {color: #fff;}
.sec_h.c_01 .bottom:before, .sec_h.c_01 .bottom:after {background-color: #fff;}

.white_wrap {background: rgba(255, 255, 255, 0.590196);padding: min(240px, 24vw) 0 min(240px, 12vw);}
.white_wrap.in {padding: 0 0 min(240px, 12vw);}

.body_in .container {padding-top: min(140px, 24vw);}

@media screen and (max-width: 768px) {
	.h_outer {  margin-bottom: 30px;}
}

#fv {position: relative; /*aspect-ratio: 16/7.5;*/ margin-bottom: min(120px, 6vw); padding-top: 45px;}
#fv .fv_inner {    position: relative; height: calc(100vh - 45px); margin: 0 auto; width: 88%; max-height: 50vw; min-height: 40vw;}
#fv .fv_inner .text_block {position: absolute;width: 48%;transform: translate(-50%, -50%);top: 50%;left: 25%;}
#fv .fv_inner .img_block {position: absolute;width: 45%;transform: translate(-50%, -50%);top: 50%;left: 75%;}
#fv .fv_inner .img_block .catch {margin-bottom: 2vw;}
#fv .bg_txt {position: absolute;bottom: max(-120px, -6vw);left: 0;display: flex;overflow: hidden;}
#fv .bg_txt img {-webkit-animation: hor_move_l 60s linear infinite; animation: hor_move_l 60s linear infinite;}

@-webkit-keyframes hor_move_l {
	0% {  transform: translateX(0%);}
  100% {  transform: translateX(-100%);}
}

@keyframes hor_move_l {
	0% {  transform: translateX(0%);}
  100% {  transform: translateX(-100%);}
}
/* animation: hor_move_l 60s linear infinite; */
@-webkit-keyframes hor_move_r {
	0% {  transform: translateX(-100%);}
  100% {  transform: translateX(0%);}
}
@keyframes hor_move_r {
	0% {  transform: translateX(-100%);}
  100% {  transform: translateX(0%);}
}
/* animation: hor_move_r 60s linear infinite; */

@media screen and (max-width: 768px) {
	#fv {  aspect-ratio: initial;  padding: 70px 0; }
	
	#fv .fv_inner{ position: inherit; height: inherit; max-height: inherit; min-height: inherit;}
  	#fv .fv_inner .text_block {  width: 100%;  left: 0;  top: 0;   position: inherit; transform: none; margin: 0 auto 20px;}
  	#fv .fv_inner .img_block {  width: 100%; left: 0; top: 0; position: inherit; transform: none; margin: 0 auto;}
}

#news {margin-bottom: 0 !important;}
#news .button {width: min(300px, 70vw);}
#news .button a {border-radius: 50px;font-family: var(--font01);color: var(--keyc01);background-color: #fff;border: 2px solid var(--keyc02);font-size: min(24px, 6vw);}
#news .button a:hover {background-color: var(--keyc02);color: #fff;}

#about .sec_h:before {width: 140%;letter-spacing: 0.3em;}
#about .text_block {color: var(--keyc02);}
#about .text_block .catch {font-size: 32px;line-height: 1.6em;font-weight: 900;text-align: center;margin-bottom: 40px;}
#about .text_block .text {text-align: center;line-height: 2em;}

@media screen and (max-width: 768px) {
	#about .sec_h:before {  font-size: 12px;  line-height: 1.2em;}
  	#about .text_block {  width: 92%;  margin: 0 auto;}
  	#about .text_block .catch {  font-size: 20px;  line-height: 1.6em;  text-align: left;  margin-bottom: 20px;}
  	#about .text_block .text {  width: 100%;  text-align: left;}
}

#schedule .date_block {margin-bottom: 60px;}
#schedule .date_block .date {width: min(565px, 80vw);margin: 0 auto;}
#schedule .date_block .date_text {font-weight: 900;font-size: 26px;line-height: 1.4em;text-align: center;}
#schedule .date_block .date_text span {display: inline-block;}
#schedule .date_tab {display: flex;gap: 0 2px;}
#schedule .date_tab .tab {flex: 1;display: flex;align-items: center;justify-content: center;gap: 4px;padding: 16px 8px;font-size: 16px;font-weight: 900;line-height: 1;background-color: var(--keyc02);color: #fff;cursor: pointer;transition: opacity 0.2s;}
#schedule .date_tab .tab:hover {opacity: 0.8;}
#schedule .date_tab .tab .tag {font-size: 12px;font-weight: 900;display: inline-block;background-color: #fff;color: var(--keyc02);padding: 0.2em;transform: translateY(1px);}
#schedule .date_tab .tab.is-active {background-color: #e3e3e3;color: var(--keyc02);cursor: default;}
#schedule .date_tab .tab.is-active .tag {background-color: var(--keyc02);color: #fff;}
#schedule .date_tab .tab.is-active:hover {opacity: 1;}
#schedule .stage_tab {margin-bottom: 60px;}
#schedule .stage_tab .schedule-grid {display: grid;grid-template-columns: 90px 1fr 1fr;background-color: #E3E3E3;padding: 20px;}
#schedule .stage_tab .schedule-grid .sg-blank,
#schedule .stage_tab .schedule-grid .sg-head,
#schedule .stage_tab .schedule-grid .sg-time,
#schedule .stage_tab .schedule-grid .sg-cell {border-right: 1px solid #E3E3E3;border-bottom: 1px solid #E3E3E3;}
#schedule .stage_tab .schedule-grid .sg-blank {background: transparent;}
#schedule .stage_tab .schedule-grid .sg-head {padding: 12px 8px;text-align: center;font-size: 14px;font-weight: 900;letter-spacing: 0.08em;color: var(--keyc02);background: #fff;}
#schedule .stage_tab .schedule-grid .sg-time {display: flex;align-items: center;justify-content: center;text-align: center;font-size: 12px;font-weight: 700;line-height: 1.5;padding: 10px 6px;background: #fff;color: #868686;}
#schedule .stage_tab .schedule-grid .sg-time span {display: block;}
#schedule .stage_tab .schedule-grid .sg-cell {padding: 20px 16px;vertical-align: top;background-color: #fff;display: flex;flex-direction: column;justify-content: center;}
#schedule .stage_tab .schedule-grid .sg-cell .sg-time-sp {display: none;}
#schedule .stage_tab .schedule-grid .sg-cell .sg-title {margin-bottom: 14px;font-size: 15px;font-weight: 700;line-height: 1.5;color: var(--keyc02);}
#schedule .stage_tab .schedule-grid .sg-cell .sg-artists {display: grid;gap: 3px;margin-bottom: 10px;}
#schedule .stage_tab .schedule-grid .sg-cell .sg-artists.sg-artists--5col {grid-template-columns: repeat(5, 1fr);}
#schedule .stage_tab .schedule-grid .sg-cell .sg-artists.sg-artists--4col {grid-template-columns: repeat(4, 1fr);}
#schedule .stage_tab .schedule-grid .sg-cell .sg-artists.sg-artists--3col {grid-template-columns: repeat(3, 1fr);}
#schedule .stage_tab .schedule-grid .sg-cell .sg-artists .sg-artist {aspect-ratio: 1/1;overflow: hidden;}
#schedule .stage_tab .schedule-grid .sg-cell .sg-artists .sg-artist img {width: 100%;height: 100%;-o-object-fit: cover;   object-fit: cover;display: block;}
#schedule .stage_tab .schedule-grid .sg-cell .sg-performers {font-size: 11px;line-height: 1.7;margin-bottom: 10px;}
#schedule .stage_tab .schedule-grid .sg-cell .sg-desc {font-size: 11px;line-height: 1.8;color: #555;}
#schedule .stage_tab .schedule-grid .sg-cell.sg-cell--empty {background-color: #f0f0f0;}
#schedule .area_map .stit {color: var(--keyc02);font-family: var(--font01);font-size: 34px;font-weight: 900;text-align: center;line-height: 1.5em;margin-bottom: 1em;}
#schedule .area_map .map {display: flex;gap: 0 2%;justify-content: center;}
#schedule .area_map .map img {width: 49%;}

@media screen and (max-width: 768px) {
	#schedule .date_block {  margin-bottom: 30px;}
  	#schedule .date_tab .tab {  flex-direction: column;  text-align: center;  gap: 4px 0;  padding: 6px 0;  font-size: 14px;}
  	#schedule .stage_tab {  margin-bottom: 40px;}
  	#schedule .stage_tab .schedule-grid {  display: flex;  flex-direction: column;  border-top: none;  border-left: none;  padding: 12px;}
  	#schedule .stage_tab .schedule-grid .sg-blank {  display: none;}
  	#schedule .stage_tab .schedule-grid .sg-time {  display: none;}
  	#schedule .stage_tab .schedule-grid .sg-cell--empty {  display: none;}
  	#schedule .stage_tab .schedule-grid .sg-head {  border-right: none;  border-bottom: none;  border-top: 2px solid #1EB9EE;  padding: 14px 4%;  text-align: left;  font-size: 13px;  background: #f7f7f7;}
  	#schedule .stage_tab .schedule-grid .sg-cell {  border-right: none;  border-left: none;  border-top: none;  border-bottom: 1px solid #ddd;  padding: 20px 4%;}
  	#schedule .stage_tab .schedule-grid .sg-cell .sg-time-sp {  display: inline-block;  font-size: 12px;  font-weight: 700;  margin-bottom: 14px;  padding: 4px 10px;  border: 1px solid #ddd;}
  	#schedule .stage_tab .schedule-grid .sg-cell .sg-title {  font-size: 16px;}
  	#schedule .stage_tab .schedule-grid .sg-cell .sg-artists.sg-artists--5col {  grid-template-columns: repeat(5, 1fr);}
  	#schedule .stage_tab .schedule-grid .sg-cell .sg-artists.sg-artists--3col {  grid-template-columns: repeat(3, 1fr);}
  	#schedule .stage_tab .schedule-grid .sg-cell .sg-performers {  font-size: 12px;}
  	#schedule .stage_tab .schedule-grid .sg-cell .sg-desc {  font-size: 12px;}
  	#schedule .stage_tab .schedule-grid .sg-head.sg-col-1 {  order: 1;}
  	#schedule .stage_tab .schedule-grid .sg-cell.sg-col-1 {  order: 2;}
  	#schedule .stage_tab .schedule-grid .sg-head.sg-col-2 {  order: 10;}
  	#schedule .stage_tab .schedule-grid .sg-cell.sg-col-2 {  order: 11;}
  	#schedule .stage_tab .schedule-grid .sg-head.sg-col-3 {  order: 20;}
  	#schedule .stage_tab .schedule-grid .sg-cell.sg-col-3 {  order: 21;}
  	#schedule .area_map .stit {  font-size: 26px;}
  	#schedule .area_map .map {  flex-direction: column;  gap: 20px 0;}
  	#schedule .area_map .map img {  width: 100%;}
}

#artist .artist_wrap {display: flex;flex-wrap: wrap;gap: 60px 2%;}
#artist .artist_wrap li {width: 32%;text-align: center;}
#artist .artist_wrap li figure {border: 2px solid var(--keyc02);margin-bottom: 8px;}
#artist .artist_wrap li .name {color: var(--keyc02);}
#artist .content_wrap {width: 92%;margin: 0 auto;}

@media screen and (max-width: 768px) {
	#artist .artist_wrap {  flex-direction: column;  gap: 6vw 0;}
  	#artist .artist_wrap li {  width: 100%;}
}

#tickets .date_block {margin-bottom: 120px;}
#tickets .date_block .date {width: min(565px, 80vw);margin: 0 auto 50px;}
#tickets .date_block .date_text {font-weight: 900;font-size: 26px;line-height: 1.4em;text-align: center;}
#tickets .date_block .date_text span {display: inline-block;}
#tickets .tk_list {border-top: 2px solid var(--keyc02);border-bottom: 2px solid var(--keyc02);margin-bottom: 30px;color: var(--keyc02);}
#tickets .tk_list dl {display: flex;padding: 30px 0;justify-content: space-between;font-size: 28px;line-height: 1.6em;font-weight: 900;}
#tickets .tk_list dl:not(:last-of-type) {border-bottom: 2px solid var(--keyc02);}
#tickets .tk_list dl .small {font-size: 0.6em;}
#tickets .tk_button_wrap {border: 2px solid var(--keyc02);padding: 50px 40px;border-radius: 10px;text-align: center;background-color: rgba(255, 229, 21, 0.8);}
#tickets .tk_button_wrap .tk_text {margin-bottom: 20px;padding-bottom: 24px;border-bottom: 3px dotted #b5a844;}
#tickets .tk_button_wrap .tk_text .tit {font-size: 24px;font-weight: 900;line-height: 1.4em;margin-bottom: 0.2em;color: #20557B;}
#tickets .tk_button_wrap .tk_text .text {font-size: 18px;line-height: 1.5em;margin-bottom: 0;font-weight: 700;color: var(--keyc02);}
#tickets .button a {font-size: 26px;line-height: 1.6em;padding: 20px;position: relative;}
#tickets .button a:hover {filter: brightness(1.2);}

@media screen and (max-width: 768px) {
	#tickets .date_block {  margin-bottom: 40px;}
  	#tickets .date_block .date {  margin: 0 auto 30px;}
  	#tickets .date_block .date_text {  font-size: 20px;}
  	#tickets .tk_list dl {  display: block;  padding: 20px 10px;  font-size: 20px;  line-height: 1.6em;}
  	#tickets .tk_button_wrap {  padding: 30px 20px;}
  	#tickets .tk_button_wrap .tk_text {margin-bottom: 12px;padding-bottom: 12px;text-align: left;}
  	#tickets .tk_button_wrap .tk_text .tit {  font-size: 18px;  line-height: 1.4em;}
  	#tickets .tk_button_wrap .tk_text .text {font-size: 14px;line-height: 1.6em;margin-bottom: 0.3em;}
  	#tickets .button a {  font-size: 20px;  line-height: 1.6em;}
  	#tickets .note_wrap p {  font-size: 14px;  line-height: 1.8em;}
}

#access .content_wrap {width: min(800px, 100%);margin: 0 auto;}
#access .top_box {text-align: center;margin-bottom: 60px;}
#access .top_box a {color: var(--keyc02);text-decoration: underline;}

@media screen and (max-width: 768px) {
	#access .top_box {  margin-bottom: 20px;}
}

.cs {font-size: 60px;text-align: center;font-weight: bold;line-height: 1.2em;font-style: italic;}

@media screen and (max-width: 768px) {
	.cs {  font-size: 34px;}
}

/* ================================= footer =================================== */
.footer {background: #00A7D5;color: #fff;padding: 60px 0;}
.footer .sec_inner {width: 86%;margin: 0 auto;max-width: 1000px;}
.footer .sec_inner .cre_list {list-style: none;margin-bottom: 40px;}
.footer .sec_inner .cre_list li {display: flex;margin-bottom: 20px;line-height: 2em;font-size: 14px;}
.footer .sec_inner .cre_list li .left {min-width: 80px;margin-right: 20px;}
.footer .sec_inner .cre_list li .right {flex: 1;}
.footer .sec_inner .copyright {text-align: center;display: block;font-size: 12px;margin-bottom: 3em;}
.footer .sec_inner .bnr_list {display: flex;justify-content: center;gap: 0 1.25%;}
.footer .sec_inner .bnr_list li {width: 100px;}
.footer .sec_inner .bnr_list li a {display: block;}
.footer .sec_inner .bnr_list li a img {width: 100%;height: auto;}

@media screen and (max-width: 768px) {
	.footer {  padding: 40px 0;}
  	.footer .sec_inner .cre_list li {  flex-direction: column;}
  	.footer .sec_inner .cre_list li .left {  width: 100%;  font-size: 14px;  line-height: 2em;}
  	.footer .sec_inner .cre_list li .right {  font-size: 12px;}
  	.footer .sec_inner .bnr_list {  gap: 12px 2%;}
  	.footer .sec_inner .bnr_list li {  }
}

@media print {
	#fv .fv_inner .img_block .artist_img img {  display: none;}
  	#artist .artist_wrap .artist img {  display: none;}
}

/*# sourceMappingURL=style.css.map */



/* exhibition */
#exhibition{
	.sec_inner{max-width: 900px;}
	.content_wrap{
		.lead{display:flex; justify-content: space-between; margin-bottom: 40px;
			.left{width: 30%;}
			.right{	width: 68%;text-align: left;font-size: 1.1em;line-height: 1.7em;}
		}
		.img_box{margin-bottom: 12px;
			figure{
				img{width: 100%;height: auto;}
			}
		}
		.note{text-align: right;font-size: 0.9em;line-height: 1.7em;}
	}
}

@media screen and (max-width: 768px) {
	#exhibition{
		.content_wrap{
			.lead{flex-direction: column-reverse;margin-bottom: 12px;
				.left{width: 100%;}
				.right{	width: 100%;font-size: 1.0em;line-height: 1.7em;margin-bottom: 20px;}
			}
			.img_box{margin-bottom: 8px;}
			.note{font-size: 0.8em;line-height: 1.7em;}
		}
	}
}