@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */
html {
	scroll-behavior: smooth;
}
body {
	font-family: "shippori-mincho", serif;
	font-size: min(3.4vw, 16px);
	line-height: 1.8;
	letter-spacing: 0.06em;
	-webkit-text-size-adjust: 100%;
	background-color: #090d1c;
	color: #fff;
}

img {
	max-width: 100%;
	height: auto;
}
ul { list-style: none;}

.anim {
	opacity: 0;
	transform: translateY(40px);
	transition: all .8s cubic-bezier(0.45, 0, 0.55, 1);
}
.anim.on {
	opacity: 1;
	transform: translateY(0px);
}

section {
	max-width: 1040px;
	margin: 0 auto;
	padding: min(10vw, 80px) min(6vw, 60px);
}
section h2 {
	font-family: "the-seasons", serif;
	text-align: center;
	font-size: min(7.8vw, 56px);
	font-weight: 400;
	letter-spacing: 0.08em;
    line-height: 1.4;
	margin-bottom: min(6vw, 30px);
}
section h2 span {
	color: #008880;
}

@media screen and (min-width: 821px) {
	
	.sp { display: none;}
	
	a { transition: all 0.3s ease-out;}
	a:hover { opacity: 0.5;}
	
}
@media screen and (max-width: 820px) {
	
	.pc { display: none;}
	
}


#mainVisual {
	width: 100%;
	height: 100vh;
	background: url("../images/mv_bg.jpg") no-repeat center center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#mainVisual .title {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58vh;
    z-index: 10;
}

#mainVisual .butterfly {
    width: 18vh;
    line-height: 0;
    position: absolute;
    bottom: 22vh;
    right: 10vw;
	animation: float 3s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite;
    z-index: 5;
}
#mainVisual .clock {
    line-height: 0;
    position: absolute;
    width: 50vh;
    top: 12vh;
    right: 3vw;
	animation: float 3s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite;
}

#mainVisual .cup {
    line-height: 0;
    position: absolute;
    width: 18vh;
    bottom: 23vh;
    left: 7vw;
	animation: float 3s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite;
    z-index: 5;
}
#mainVisual .cup .steam {
    position: absolute;
    top: -145%;
    left: 28%;
    width: 200%;
	animation: steam 6s linear 0s infinite;
	transform-origin: center bottom;
	opacity: 0;
}

#mainVisual .key {
    line-height: 0;
    position: absolute;
    width: 20vh;
    top: 20vh;
    left: 9vw;
	animation: float 3s cubic-bezier(0.45, 0, 0.55, 1) 1.5s infinite;
}

#mainVisual .pot {
    line-height: 0;
    position: absolute;
    width: 14vh;
    top: 6vh;
    right: 10vw;
	z-index: 3;
	animation: float 3s cubic-bezier(0.45, 0, 0.55, 1) 1.5s infinite;
}

#mainVisual .trump01 {
    line-height: 0;
    position: absolute;
    bottom: 4.5vh;
    left: 23%;
    width: 34%;
	z-index: 3;
}
#mainVisual .trump02 {
    line-height: 0;
    position: absolute;
    bottom: 8vh;
    left: 26%;
    width: 48%;
	z-index: 1;
}

#mainVisual .ribbon01 {
    line-height: 0;
    position: absolute;
	top: 0;
	right: 0;
    width: 80vh;
    z-index: 2;
}

#mainVisual .ribbon02 {
    line-height: 0;
    position: absolute;
    bottom: 8vh;
    left: 0;
    width: 100%;
	z-index: 2;
}
#mainVisual .ribbon03 {
    line-height: 0;
    position: absolute;
    bottom: -11vh;
    left: 0;
    width: 40%;
	z-index: 4;
}

#mainVisual .star {
    line-height: 0;
    position: absolute;
}
#mainVisual .star.star01 {
	width: 3.6%;
    top: 4%;
    left: 12%;
    animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0s infinite;
}
#mainVisual .star.star02 {
    width: 2%;
    top: 7.5%;
    left: 10.5%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.5s infinite;
}
#mainVisual .star.star03 {
	width: 1.1%;
    top: 8.5%;
    left: 15%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 1s infinite;
}
#mainVisual .star.star04 {
	width: 0.9%;
    top: 4%;
    left: 11.5%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.8s infinite;
}
#mainVisual .star.star05 {
	width: 1.2%;
    top: 11%;
    left: 8.5%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.2s infinite;
}
#mainVisual .star.star06 {
    width: 2%;
    top: 12%;
    left: 25%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.8s infinite;
}
#mainVisual .star.star07 {
	width: 1.2%;
    top: 10%;
    left: 28%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.2s infinite;
}

#mainVisual .star.star08 {
	width: 3.6%;
    bottom: 4%;
    right: 12%;
    animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0s infinite;
}
#mainVisual .star.star09 {
    width: 2%;
    bottom: 7.5%;
    right: 10.5%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.5s infinite;
}
#mainVisual .star.star10 {
	width: 1.1%;
    bottom: 8.5%;
    right: 15%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 1s infinite;
}
#mainVisual .star.star11 {
	width: 0.9%;
    bottom: 4%;
    right: 11.5%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.8s infinite;
}
#mainVisual .star.star12 {
	width: 1.2%;
    bottom: 11%;
    right: 8.5%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.2s infinite;
}
#mainVisual .star.star13 {
    width: 2%;
    bottom: 12%;
    right: 25%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.8s infinite;
}
#mainVisual .star.star14 {
	width: 1.2%;
    bottom: 10%;
    right: 28%;
	animation: star 1.8s cubic-bezier(0, 0.55, 0.45, 1) 0.2s infinite;
}


@keyframes float {
	0% { transform: translateY(0);}
	50% { transform: translateY(8%);}
	100% { transform: translateY(0);}
}
@keyframes steam {
	0% { opacity: 0; transform: scale(0.4); filter: blur(20px);}
	50% { opacity: 1; transform: scale(1.2); filter: blur(10px);}
	100% { opacity: 0; transform: scale(1.8); filter: blur(40px);}
}
@keyframes star {
	0% { opacity: 1;}
	50% { opacity: 0;}
	100% { opacity: 1;}
}


/* ////// OP ////// */

#mainVisual {
	opacity: 0;
	animation: opFade 1s linear 0s forwards;
}

#mainVisual .title .catch {
	opacity: 0;
	animation: opSlideIn 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
#mainVisual .title h1 {
	opacity: 0;
	animation: opScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}
#mainVisual .clock > div {
	opacity: 0;
	animation: opFade 1s linear 4.2s forwards;
}
#mainVisual .butterfly > div {
	opacity: 0;
	animation: opFade 1s linear 4.4s forwards;
}
#mainVisual .cup > div {
	opacity: 0;
	animation: opFade 1s linear 4.6s forwards;
}
#mainVisual .key > div {
	opacity: 0;
	animation: opFade 1s linear 4.8s forwards;
}
#mainVisual .pot > div {
	opacity: 0;
	animation: opFade 1s linear 5s forwards;
}


#mainVisual .trump01 {
	opacity: 0;
	animation: opSlideIn 0.6s cubic-bezier(0.83, 0, 0.17, 1) 3.5s forwards;
}
#mainVisual .trump02 {
	opacity: 0;
	animation: opSlideIn 0.6s cubic-bezier(0.83, 0, 0.17, 1) 3.7s forwards;
}

#mainVisual .ribbon01,
#mainVisual .ribbon02,
#mainVisual .ribbon03 {
	opacity: 0;
	animation: opFade 1s linear 2.8s forwards;
}



@keyframes opFade {
	0% { opacity: 0;}
	100% { opacity: 1;}
}
@keyframes opSlideIn {
	0% { opacity: 0; transform: translateY(30px);}
	100% { opacity: 1; transform: translateY(0px);}
}
@keyframes opScaleIn {
	0% { opacity: 0; transform: scale(0.3);}
	100% { opacity: 1; transform: scale(1);}
}

@media screen and (max-width: 820px) {
	
	
	#mainVisual {
		background: url("../images/mv_bg_sp.jpg") no-repeat center center;
		background-size: cover;
	}
	#mainVisual .title {
		top: 39%;
		width: 88vw;
	}
	
	#mainVisual .butterfly {
		width: 26vw;
		bottom: 18vh;
		right: 12vw;
	}
	#mainVisual .clock {
		width: 68vw;
		top: 17vh;
		right: 3vw;
	}
	#mainVisual .cup {
		width: 30vw;
		bottom: 3vh;
		left: 7vw;
	}
	#mainVisual .key {
		width: 28vw;
		top: 14vh;
		left: 5vw;
	}
	#mainVisual .pot {
		width: 20vw;
		top: 4vh;
		right: 10vw;
	}
	
	#mainVisual .trump01 {
		width: 74%;
		bottom: 14vh;
		left: -6%;
	}
	#mainVisual .trump02 {
		bottom: 16.5vh;
		left: 2%;
		width: 106%;
	}
	
	#mainVisual .ribbon01 {
		right: -19vw;
		width: 120vw;
	}
	#mainVisual .ribbon02 {
		bottom: 17vh;
		left: -56%;
		width: 222%;
	}
	#mainVisual .ribbon03 {
		bottom: -10vh;
		left: -13%;
		width: 96%;
	}
	
	
	#mainVisual .star.star01 {
		width: 6%;
		top: 5%;
		left: 12%;
	}
	#mainVisual .star.star02 {
		width: 3%;
		top: 8%;
		left: 10.5%;
	}
	#mainVisual .star.star03 {
		width: 2%;
		top: 8%;
		left: 17%;
	}
	#mainVisual .star.star04 {
		width: 2%;
		top: 4%;
		left: 11%;
	}
	#mainVisual .star.star05 {
		width: 4%;
		top: 9%;
		left: 31%;
	}
	#mainVisual .star.star06 {
		width: 2%;
		top: 12%;
		left: 25%;
	}
	#mainVisual .star.star07 {
		width: 3%;
		top: 7%;
		left: 36%;
	}

	#mainVisual .star.star08 {
		width: 6%;
		bottom: 11%;
		right: 8%;
	}
	#mainVisual .star.star09 {
		width: 4%;
		bottom: 9%;
		right: 5%;
	}
	#mainVisual .star.star10 {
		width: 3%;
		bottom: 9%;
		right: 13%;
	}
	#mainVisual .star.star11 {
		width: 2%;
		bottom: 7%;
		right: 4%;
	}
	#mainVisual .star.star12 {
		width: 2.2%;
		bottom: 14%;
		right: 7%;
	}
	#mainVisual .star.star13 {
		width: 4%;
		bottom: 5%;
		right: 28%;
	}
	#mainVisual .star.star14 {
		width: 3%;
		bottom: 6%;
		right: 35%;
	}
}

#topDate {
	padding-top: 0;
	text-align: center;
}
#topDate .date {
	font-size: min(5.6vw, 36px);
	font-weight: normal;
	letter-spacing: 0.1em;
	margin-bottom: min(3vw, 20px);
}
#topDate .date strong {
	font-size: 1.4em;
}
#topDate .date .month {
	color: #a60909;
}
#topDate .date .day {
	color: #008880;
}
#topDate .date .week {
	font-size: 0.7em;
}

#topDate .location {
	font-size: min(4.6vw, 26px);
    line-height: 1.6;
}
#topDate .location span {
	font-size: 0.62em;
    line-height: 1.8;
    display: inline-block;
    margin-top: min(2vw, 10px);
}


.DateBox {
	display: flex;
	justify-content: space-between;
}
.DateBox li {
	width: 48%;
	border: #fff solid 1px;
	text-align: center;
	padding: min(5vw, 30px);
}
.DateBox li h3 {
	font-size: min(4.6vw, 20px);
	letter-spacing: 0.14em;
	line-height: 1.4;
	margin-bottom: min(4vw, 20px);
	position: relative;
	padding-bottom: min(2vw, 10px);
}
.DateBox li h3::after {
	content: "";
	display: block;
	width: min(5vw, 25px);
	height: 1px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.DateBox li p {
	font-size: min(4vw, 18px);
}
.DateBox li p a {
	color: #fff;
	text-decoration: underline;
}
.DateBox li p a:hover {
	text-decoration: none;
}
.DateBox li p span {
	font-size: 0.84em;
    line-height: 1.8;
    display: inline-block;
}


.kv_img {
    line-height: 0;
}

.aboutCatch {
	text-align: center;
	font-size: min(4.6vw, 36px);
	letter-spacing: 0.1em;
	font-weight: normal;
	margin-bottom: min(6vw, 40px);
	color: #008880;
}


.ticketBox {
	background-color: #0e1428;
    padding: min(6vw, 30px) min(6vw, 30px);
	border-radius: 8px;
	margin-bottom: min(6vw, 30px);
}

#ticket h3 {
	font-size: min(4.6vw, 20px);
	margin-bottom: min(2vw, 10px);
	color: #008880;
}
#ticket .ticketInfo + h3 {
	margin-top: min(8vw, 60px);
}
.ticketInfo {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: min(6vw, 40px);
}
.ticketInfo dt {
	width: 20%;
	padding: min(4vw, 15px) 0;
	border-bottom: #fff solid 1px;
}
.ticketInfo dd {
	width: 80%;
	padding: min(4vw, 15px) 0;
	border-bottom: #fff solid 1px;
}
.ticketInfo dd p + .notes {
	margin-top: min(3vw, 15px);
}
p.ticketInfo {
	padding: 0 0 min(4vw, 15px);
	border-bottom: #fff solid 1px;
}

.ticketInfo .notes {
	margin-top: min(6vw, 30px);
}

.notes li {
	text-indent: -1em;
	padding-left: 1em;
	font-size: min(3.2vw, 14px);
}

.buyBtn {
	margin-top: min(6vw, 40px);
}

.buyBtn + .buyBtn {
    margin-top: min(4vw, 25px);
}

.btn_desc {
    font-size: 0.85em;
    text-align: center;
    padding-top: 1.5em;
}

#onSale {
	display: none;
}
.buyBtn a {
	display: block;
	background-color: #7f0000;
	color: #fff;
	text-decoration: none;
	text-align: center;
	width: 400px;
	max-width: 85%;
	border-radius: 6px;
	margin: 0 auto;
	padding: min(3vw, 15px);
	font-family: "the-seasons", serif;
	font-size: min(4.6vw, 28px);
	letter-spacing: 0.14em;
}
.buyBtn a span,
.buyBtn p span {
	font-family: "shippori-mincho", serif;
	font-size: 0.6em;
	letter-spacing: 0.06em;
}

.buyBtn.hide a {
    background: #858585;
}

.buyBtn p {
	display: block;
    background-color: #333;
    color: #777;
	text-decoration: none;
	text-align: center;
	width: 400px;
	max-width: 80%;
	border-radius: 6px;
	margin: 0 auto;
	padding: min(3vw, 15px);
	font-family: "the-seasons", serif;
	font-size: min(4.6vw, 28px);
	letter-spacing: 0.14em;
}


.ticketInfo_box {
    background: #ffffff12;
    padding: 20px 35px 30px;
    margin-bottom: 25px;
    border-radius: 12px;
}
.ticketInfo_box:last-child {
    margin-bottom: 0;
}

.comingsoon {
	background-color: #0e1428;
	text-align: center;
	padding: min(20vw, 140px) min(6vw, 30px);
	border-radius: 8px;
}
.comingsoon h3 {
	font-size: min(4.6vw, 28px);
	margin-bottom: min(6vw, 30px);
}


.attentionWrap h3 {
	font-size: min(4vw, 22px);
	text-align: center;
	margin-bottom: min(4vw, 20px);
}
.attentionWrap h4 {
	font-size: min(4vw, 18px);
}
.attentionWrap .notes + h4 {
    padding-top: min(6vw, 30px);
    border-top: #444 solid 1px;
}
.attentionWrap h5 {
	font-size: min(3.7vw, 15px);
	margin-bottom: min(2vw, 10px);
}
.attentionWrap .notes {
	margin-bottom: min(6vw, 40px);
}

.attentionList {
	border-bottom: #fff solid 1px;
}
.attentionList dt {
	border-top: #fff solid 1px;
	padding: min(4vw, 20px) 60px min(4vw, 20px) min(4vw, 20px);
	position: relative;
	cursor: pointer;
}
.attentionList dt::before,
.attentionList dt::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	background-color: #fff;
	transform: translate(-50%, -50%);
}
.attentionList dt::before {
	right: 0;
	width: 29px;
	height: 1px;
}
.attentionList dt::after {
	right: 28px;
	width: 1px;
	height: 29px;
	transition: all 0.3s ease-out;
}
.attentionList dt.on::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.attentionList dd {
	display: none;
	padding: min(3vw, 15px) min(3vw, 20px);
}

@media screen and (max-width: 820px) {
	
	.DateBox {
		flex-direction: column;
		gap: min(4vw, 20px) 0;
	}
	.DateBox li {
		width: 100%;
		padding: min(5vw, 30px);
	}
	
	.ticketInfo {
		flex-direction: column;
	}
	.ticketInfo dt {
		width: 100%;
		border-bottom: none;
		padding-bottom: 0;
	}
	.ticketInfo dd {
		width: 100%;
		padding-top: 5px;
	}
	
	.attentionList dt {
		padding: min(4vw, 20px) 50px min(4vw, 20px) min(3vw, 20px);
	}
	.attentionList dt::before {
		right: 0;
		width: 23px;
		height: 1px;
	}
	.attentionList dt::after {
		right: 22px;
		width: 1px;
		height: 23px;
		transition: all 0.3s ease-out;
	}

	.buyBtn a span, .buyBtn p span {
	    font-size: 0.7em;
	}

	.ticketInfo_box {
	    padding: 2px 15px 20px;
	    margin-bottom: 20px;
	    border-radius: 8px;
	}

}




.goods_img {
    line-height: 0;
    margin-bottom: 40px;
}

.goods_txt {
    text-align: center;
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
}

.goods_txt a {
    color: #fff;
}

.goods_txt:last-child {
    margin-bottom: 0;
}


@media screen and (max-width: 820px) {
	
.goods_img {
    margin-bottom: 25px;
}	

.goods_txt {
    text-align: left;
    font-size: 14px;
    margin-bottom: 10px;
}
	
}


#contents {
    padding-bottom: 0;
}

.contents_box {
    position: relative;
}

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

.contents_list:last-child {
    margin-bottom: 0;
}

.contents_list > li {
    width: 50px;
    height: 50px;
    background: linear-gradient(180deg, #ffffff 60%, #d8dbdf 100%);
    text-align: center;
    color: #090d1c;
    border-radius: 50%;
    font-weight: 600;
    box-shadow: 0 3px 0 #a7a7a7;
    position: relative;
    line-height: 50px;
    font-size: 20px;
    font-family: "the-seasons", serif;
    position: absolute;
    top: 14%;
    right: 27%;
}

.contents_list > li a {
    color: #090d1c;
    text-decoration: none;
}


.contents_list > li:nth-child(2) {
    right: 13%;
}
.contents_list > li:nth-child(3) {
    right: 13%;
    top: 41%;
}
.contents_list > li:nth-child(4) {
    right: 14%;
    top: 63%;
}
.contents_list > li:nth-child(5) {
    right: 36%;
    top: 83%;
}
.contents_list > li:nth-child(6) {
    right: 60%;
    top: 84%;
}
.contents_list > li:nth-child(7) {
    right: 81%;
    top: 74%;
}

.contents_desc {
    position: absolute;
    width: 30%;
    background: linear-gradient(90deg, #cf79c0, #ab539c);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 27px;
    top: 10%;
    left: 14%;
    line-height: 1.3;
    font-family: "the-seasons", serif;
    border-radius: 7px;
}

.contents_desc::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: #ab539c;
    right: -9px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}



.contents_num {
    font-family: "the-seasons", serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
    background: url(../images/bg_ribon_num.png) no-repeat center bottom;
    background-size: 47%;
    padding-bottom: 2px;
    margin-bottom: 10px;
}

.contents_tit {
    margin-bottom: 10px;
    line-height: 1.35;
}

.contents_tit .sml {
    font-size: 0.78em;
}

.contents_link a {
    background: linear-gradient(180deg, #5b92c8 0%, #183756 100%);
    color: #fff;
    display: inline-block;
    text-decoration: none;
    padding: 0.1em 2.5em;
    border-radius: 2em;
    font-family: "the-seasons", serif;
    font-weight: 400;
}




.contents_list:nth-of-type(2) {
    flex-flow: row-reverse;
}

.contents_list:nth-of-type(2) > li:not(:last-child)::before {
    right: auto;
    left: -30%;
}


.popup {
    color: #090d1c;
    padding: 50px;
    width: 600px;
}

.popup h3 {
    margin-bottom: 10px;
    color: #27847b;
}

.popup h3 .sml {
    font-size: 0.8em;
}

.popup_txt {
    font-size: 15px;
    font-weight: 600;
}

.popup_inner.pop_flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.popup_inner.pop_flex .popup_txt {
    width: 55%;
}

.popup_inner.pop_flex .popup_img {
    width: 40%;
    line-height: 0;
}

#cboxContent {
    border-radius: 15px !important;
    background: linear-gradient(180deg, #ffffff 60%, #d8dbdf 100%) !important;
    box-shadow: 0 3px 0 #a7a7a7;
}

.ar_box {
    padding: 55px 80px;
    background: #5b5b5b;
    border-radius: 10px;
}


.ar_box_app {
    background: #0e1428;
    padding: 40px;
    border-radius: 8px;
}

.ar_app_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.66%;
}
.ar_app_list > li {
    width: 23%;
    line-height: 0;
}

.ar_app_tit {
    text-align: center;
    margin-bottom: 35px;
}

.ar_tit_in {
    display: inline-block;
    font-size: 37px;
    font-family: "the-seasons", serif;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #008880;
    line-height: 1.5;
}

.music_tit {
    font-size: 20px;
    text-align: center;
    margin-bottom: 35px;
}

.music_txt {
    margin-bottom: 35px;
}

.music_desc {
    background-color: #0e1428;
    padding: min(6vw, 35px) min(6vw, 35px);
    border-radius: 8px;
}

.music_desc_tit {
    border-bottom: 1px solid #008880;
    margin-bottom: 20px;
    padding-bottom: 9px;
    font-size: 1.1em;
    color: #008880;
    font-weight: bold;
}

.music_desc_txt {
    font-size: 0.95em;
    line-height: 1.9;
}

footer {
	text-align: center;
	padding: min(12vw, 80px) min(6vw, 60px);
}
footer .credit {
	font-size: min(3.2vw, 14px);
	margin-bottom: min(6vw, 30px);
}
footer .copyright {
	font-size: min(2.6vw, 10px);
}


@media screen and (min-width: 820px) {

}


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

.ticketInfo_box .buyBtn a {
    max-width: 100%;
}

.contents_list > li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

.contents_list {
    margin-bottom: 30px;
}

.contents_list > li:last-child {
    margin-bottom: 0;
}

.contents_num {
    font-size: 39px;
    background-size: 112px;
    margin-bottom: 12px;
}

.contents_tit {
    font-size: 17px;
    margin-bottom: 12px;
}

.contents_link a {
    font-size: 18px;
}

.contents_list:last-child > li:last-child::after {
    display: none;
}

.contents_desc {
    top: 7%;
    left: 0;
    width: 42%;
    font-size: 4vw;
    padding: 4vw;
}

.popup {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.popup_inner .popup_txt {
    font-size: 12px;
    margin-bottom: 15px;
}

.popup_inner.pop_flex .popup_txt {
    width: 100%;
}

.popup_inner.pop_flex .popup_img {
    width: 100%;
}

.ar_box {
    padding: 20px;
}

.ar_box_app {
    padding: 25px 20px;
}

.ar_tit_in {
    font-size: 21px;
}

.ar_app_tit {
    margin-bottom: 30px;
}

.ar_app_list > li {
    width: 47%;
}

.ar_app_list {
    gap: 6%;
}

.ar_box_app .buyBtn {
    margin: 0 auto;
}

.music_tit {
    font-size: 1.2em;
    text-align: left;
    margin-bottom: 20px;
}

.music_txt {
    margin-bottom: 20px;
}

.music_desc_tit {
    padding-bottom: 5px;
    margin-bottom: 15px;
}

	
	
}