@charset "UTF-8";

/* ---------------------------------------------------
	article
---------------------------------------------------- */
.article {
	margin-bottom: 10em;
	text-align: center;
}

.article__title {
	max-width: 853px;
	width: 66.7%;
	margin: 0 auto;
	margin-top: -1em;
	margin-bottom: 0.5em;
	position: relative;
}

.article__lead {
	margin-bottom: 4em;
}

.article__lead p.text {
	margin: 0;
	font-size: 18px;
}

@media screen and (max-width: 768px) {
	.article {
		margin-bottom: 3em;
	}
	.article__title {
		width: 90%;
		margin: 0 auto;
		margin-top: -0.5em;
		margin-bottom: 0.5em;
	}
	.article__lead {
		padding: 0 4.8vw;
		margin-bottom: 3em;
	}
	.article__lead p.text {
		font-size: 3.77777vw;
	}
}

/*
	slide
------------------------------ */
.article__slide {
	padding-top: 4em;
}

.event__slide {
	padding-top: 2.5em;
}

.article__slide--item,
.article__slide--itemB {
	width: 24%;
	padding: 0 9px;
	cursor: pointer;
	position: relative;
	color: var(--wht);
}

.article__slide--item .images,
.article__slide--itemB .images {
	margin-bottom: 1.5em;
	position: relative;
	overflow: hidden;
}

.article__slide--item .images::before {
	background: rgba(var(--wht), 0);
}

.article__slide--item:hover .images::before,
.article__slide--itemB:hover .images::before {
	background: rgba(var(--wht), 0.25);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
}

.article__slide--item .images img,
.article__slide--itemB .images img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1.2s ease;
	transform-origin: center center;
}

.article__slide--item .images:hover img,
.article__slide--itemB .images:hover img {
	transform: scale(1.1);
	opacity: 0.7;
}

.article__slide--item .category,
.article__slide--itemB .category {
	margin-bottom: 0;
	display: inline-block;
	position: relative;
	font-size: min(2rem, 1.563vw);
	line-height: 1.3;
}

.article__slide--item .details__title,
.article__slide--itemB .details__title {
	margin-bottom: 0.25em;
	line-height: 1.5;
	font-size: min(1.6rem, 1.25vw);
}

.article__slide--item .details__text,
.article__slide--itemB .details__text {
	background: #80BDAF;
	display: inline-block;
	padding: 0 10px;
	line-height: 1.5;
	font-size: min(1.6rem, 1.25vw);
}

.newyear .article__slide--item .details__text,
.newyear .article__slide--itemB .details__text {
	background: #EF686A;
}

@media screen and (max-width: 768px) {
	.article__slide {
		padding-top: 9.6vw;
	}
	.event__slide {
		padding-top: 9.6vw;
	}
	.article__slide--item,
	.article__slide--itemB {
		width: 50%;
		padding: 0 0.5em;
	}
	.article__slide--item .images {
		margin-bottom: 1em;
	}
	.article__slide--item .category,
	.article__slide--itemB .category {
		font-size: min(1.2rem, 3.429vw);
		margin-bottom: 0.5em;
	}
	.article__slide--item .details__title {
		font-size: min(1rem, 2.857vw);
	}
	.article__slide--item .details__text,
	.article__slide--itemB .details__text {
		font-size: min(1rem, 2.857vw);
	}
	.article__slide--item .details {
		line-height: 1;
	}
	.slick-initialized .slick-slide {
		padding: 0 5px;
	}
}

/* slick-dots */
.article__slide .slick-dots,
.event__slide .slick-dots {
	display: flex;
	top: 0;
	bottom: auto;
}

.article__slide .slick-dots li,
.event__slide .slick-dots li {
	margin: 0 5px;
	width: auto;
	height: auto;
}

.article__slide .slick-dots li button,
.event__slide .slick-dots li button {
	width: 40px;
	height: 6px;
	padding: 0;
	border-radius: 40px;
	text-indent: -9999px;
}

.article__slide .slick-dots li button {
	background: rgb(var(--wht));
}

.event__slide .slick-dots li button {
	background: #EF686A;
	opacity: 0.3;
}

@media screen and (max-width: 768px) {
	.article__slide .slick-dots li,
	.event__slide .slick-dots li {
		margin: 0 1.33333vw;
	}
	.article__slide .slick-dots li button,
	.event__slide .slick-dots li button {
		width: 30px;
		height: 5px;
	}
}

/*
	modal
------------------------------ */
.modal {
	background: rgb(var(--wht));
	padding: 4em 0;
	max-width: 950px;
	width: 95%;
	max-height: 90dvh;
	color: rgb(var(--gray));
	border-radius: 24px;
	overflow-y: auto;
	display: block;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility .25s ease;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
	font-size: min(1.8rem, 1.406vw);
}

.modal__inner {
	margin: 0 auto;
	max-width: 750px;
	text-align: left;
}

.modal__category {
	margin-bottom: 2em;
	display: inline-block;
	position: relative;
	background: #80BDAF;
	padding: 0 10px;
	font-size: min(1.8rem, 1.406vw);
}

.modal__category::before {
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	content: "";
}

.modal__title {
	line-height: 1.5;
	font-size: min(3.1rem, 2.422vw);
	font-weight: 400;
	margin-bottom: 10px;
}

.modal__title span {
	display: block;
	font-size: min(1.8rem, 1.406vw);
	line-height: 1.6;
}

.modal__text {
	margin-bottom: 2em;
}

.modal__date {
	margin-bottom: 2em;
	font-size: min(1.8rem, 1.406vw);
}

.modal__place {
	margin-bottom: 0;
	font-size: min(1.8rem, 1.406vw);
}

.modal__images {
	margin-bottom: 1.5em;
}

.modal__images.multiple {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.modal__images.multiple figure {
	margin-bottom: 0.75em;
	width: 100%;
}

.modal__price {
	text-align: left;
}

.modal__price .prace__list--title {
	font-weight: bold;
}

.modal .linkBtn {
	margin-top: 2em;
}

.prace__list {
	margin-bottom: 0.5em;
}

.prace__list .prace__list--title {
	color: #CA893A;
	font-weight: 500;
}

.prace__list .prace__list--title::before {
	content: '●';
}

.prace__list--text .area_data .data {
	display: flex;
}

.prace__list--text .area_data .data p {
	margin-bottom: 0;
}

.prace__list--text .area_data .data p:first-child {
	width: 160px;
}


@media screen and (max-width: 768px) {
	.modal {
		padding: 16vw 4.8vw 8vw;
		border-radius: 4.8vw;
	}
	.modal__inner {
		max-width: 100%;
	}
	.modal__title {
		font-size: 5.6vw;
	}
	.modal__title span {
		font-size: min(1.4rem, 4vw);
	}
	.modal__category,
	.modal__text,
	.modal__date,
	.modal__place,
	.modal__price {
		font-size: 3.73333vw;
	}
	.prace__list .prace__list--title,
	.prace__list .prace__list--text {
		font-size: min(1.4rem, 4vw);
	}
	.prace__list--text .area_data .data p:first-child {
		width: 130px;
	}
}

/* profile */
.modal .profile {
	margin-top: 2em;
	padding-top: 2em;
	text-align: left;
	border-top: solid 1px rgba(113, 112, 113, 0.75);
	display: flex;
	justify-content: space-between;
}

.modal .profile.rev {
	flex-direction: row-reverse;
}

.profile__images {
	width: 33.70518%;
	text-align: center;
}

.profile__images .logo {
	margin-top: 1.5em;
}

.profile__images .logo img {
	width: 83.66407%;
	width: 70%;
}

.profile__contents {
	width: 62.56045%;
}

.profile__name {
	margin-bottom: 1em;
	font-size: min(2rem, 1.563vw);
	font-weight: 500;
}

.profile__name span {
	font-size: min(2.5rem, 1.953vw);
}

.profile__name.eventName {
	margin-bottom: 0;
	color: rgb(var(--red));
}

.profile__details {
	margin-bottom: 1em;
}

@media screen and (max-width: 768px) {
	.modal .profile {
		display: block;
	}
	.profile__images {
		margin: 0 auto 1.5em;
		width: 50%;
	}
	.profile__contents {
		width: 100%;
	}
	.profile__name {
		font-size: 4.26667vw;
		text-align: center;
	}
	.profile__details,
	.profile__work {
		font-size: 3.73333vw;
	}
	.profile__name span {
		font-size: min(2.3rem, 6.571vw);
	}
}

/* close-btn */
.close-btn {
	width: 36px;
	height: 36px;
	text-indent: -9999px;
	border: none;
	position: absolute;
	top: 24px;
	right: 24px;
	cursor: pointer;
}

.close-btn span {
	height: 100%;
	display: block;
	position: relative;
}

.close-btn span::before,
.close-btn span::after {
	background: rgb(var(--blk));
	width: 100%;
	height: 1px;
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	content: "";
}

.close-btn span::before {
	transform: rotate(45deg);
}

.close-btn span::after {
	transform: rotate(-45deg);
}

/* etc */
.modalOpen {
	overflow: hidden;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.overlay {
  background: rgba(var(--blk), 0.75);
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------------------------------------------------
	etc
---------------------------------------------------- */
.etc {
	margin: 0 auto 5em;
	padding: 0 50px;
}

.etc .container {
	max-width: 1000px;
}

@media screen and (max-width: 768px) {
	.etc {
		margin-bottom: 6em;
		padding: 0;
	}
	.etc .container {
		padding: 0 10px;
	}

}

/* ---------------------------------------------------
	parallax
---------------------------------------------------- */
.parallax.typeA {
	background: url(../img/parallax_bgA.webp) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	height: 360px;
}

.parallax.typeB {
	background: url(../img/parallax_bgB.webp) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	height: 360px;
}

.parallax .inner {
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 768px) {
	.parallax.typeA {
		background: url(../img/parallax_bgA.webp) no-repeat top center;
		background-size: cover;
		background-attachment: fixed;
		height: 180px;
	}
	.parallax.typeB {
		background: url(../img/parallax_bgB.webp) no-repeat top center;
		background-size: cover;
		background-attachment: fixed;
		height: 180px;
	}
}

/* ---------------------------------------------------
	lead
---------------------------------------------------- */
.lead {
	margin-bottom: 5em;
	font-size: 18px;
	text-align: center;
}

p.lead__text {
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	.lead {
		margin-bottom: 3em;
		padding: 0 4.8vw;
		font-size: 4.26667vw;
		text-align: left;
		letter-spacing: -0.005em;
	}
}

/* ---------------------------------------------------
	gnav
---------------------------------------------------- */
.gnav {
	margin-bottom: 10em;
}

.gnav__list {
	margin-bottom: 5em;
	width: 100%;
	display: flex;
	justify-content: center;
}

.gnav__list--item {
	width: 50%;
}

.gnav__list--link {
	line-height: 1.25;
	font-family: var(--orpheuspro);
	font-size: 38px;
	font-weight: 400;
	text-decoration: none;
}

.gnav__list--item.gnav1 .gnav__list--link {
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(../img/gnav1_bg-a.webp) no-repeat;
	background-size: 100%;
	width: 100%;
	height: 21.3vw;
}

.gnav__list--item.gnav1 .gnav__list--link:hover {
	background: url(../img/gnav1_bg-b.webp) no-repeat;
	background-size: 100%;
	opacity: 1;
}

.gnav__list--item.gnav2 .gnav__list--link {
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(../img/gnav2_bg-a.webp) no-repeat;
	background-size: 100%;
	width: 100%;
	height: 272px;
	height: 21.3vw;
}

.gnav__list--item.gnav2 .gnav__list--link:hover {
	background: url(../img/gnav2_bg-b.webp) no-repeat;
	background-size: 100%;
	opacity: 1;
}

.gnav__list--link figure {
	text-align: center;
	display: flex;
	flex-direction: column-reverse;
}

.gnav__list--link figure figcaption {
	margin-bottom: 0.25em;
}

.gnav__banner {
	margin: 0 auto;
	max-width: 594px;
	width: 100%;
}

@media screen and (max-width: 768px) {
	.gnav {
		margin-bottom: 6em;
	}
	.gnav__list {
		display: block;
		margin-bottom: 5em;
	}
	.gnav__list--item {
		width: 100%;
	}
	.gnav__list--link {
		font-size: 4.8vw;
	}
	.gnav__list--item.gnav1 .gnav__list--link,
	.gnav__list--item.gnav2 .gnav__list--link {
		width: 100%;
		height: 42.3vw;
	}
	.gnav__list--link figure {
		width: 80%;
	}
	.gnav__banner {
		width: 90%;
	}

}

/* ---------------------------------------------------
	christmas
---------------------------------------------------- */
.christmas .article__title,
.christmas .article__slide--item,
.christmas .article__slide--itemB,
.christmas .modal__category,
.christmas .modal__title,
.christmas .modal__text,
.christmas .modal__date,
.christmas .modal__place,
.christmas .modal .linkBtn a:hover,
.christmas ul.type1 li::before,
.christmas .modal__price .prace__list--title {
	color: rgb(var(--wht));
}

.christmas .modal__title,
.christmas .modal__text,
.christmas .modal__date,
.christmas .modal__place,
.christmas .modal .linkBtn a:hover {
	color: rgb(var(--gray));
}

.christmas .modal .linkBtn a:hover {
	background: rgb(var(--wht));
}

.christmas .modal .linkBtn a:hover svg {
	stroke: rgb(var(--gray));
}

/* ---------------------------------------------------
	newyear
---------------------------------------------------- */
.newyear .article__title,
.newyear .article__slide--item,
.newyear .article__slide--itemB,
.newyear .modal__category,
.newyear .modal__title,
.newyear .modal__text,
.newyear .modal__date,
.newyear .modal__place,
.newyear .modal .linkBtn a:hover,
.newyear ul.type1 li::before {
	color: rgb(var(--wht));
}

.newyear .modal__category,
.newyear .modal__title,
.newyear .modal__text,
.newyear .modal__date,
.newyear .modal__place,
.newyear .modal .linkBtn a:hover {
	color: rgb(var(--gray));
}

.newyear .event__slide .slick-dots li.slick-active button {
	background: #EF686A;
	opacity: 1;
}

.newyear .modal .linkBtn a:hover {
	background: rgb(var(--wht));
}

.newyear .modal .linkBtn a {
	background: #EF686A;
}

.newyear .modal .linkBtn a:hover svg {
	stroke: rgb(var(--gray));
}

.newyear .modal__category {
	background: #EF686A;
	color: rgb(var(--wht));
}

/* ---------------------------------------------------
	gmno
---------------------------------------------------- */
.gmno .container {
	background: url(../img/gmnoBg.webp) no-repeat;
	background-size: cover;
	padding: 5em 5.85em;
	line-height: 1.5;
	color: rgb(var(--darkRed));
	font-weight: bold;
	text-align: center;
}

.gmno__inner {
	margin: 0 auto;
	max-width: 1000px;
}

.gmno__logo {
	margin-bottom: 1em;
}

.gmno__logo img {
	max-width: 171px;
}

.gmno__title {
	margin-bottom: 1em;
}

.gmno__title img {
	max-width: 848px;
}

.gmno__date {
	margin-bottom: 1em;
}

.gmno__date--title {
	color: #34426B;
	line-height: 1.5;
	font-family: var(--barlowcondensed);
	font-size: min(5.6rem, 4.375vw);
	font-weight: 500;
}

.gmno__date--title small {
	font-size: 0.8em;
	display: block;
}

.gmno__date--images {
	margin: 0 auto 2em;
	width: 100%;
}

.gmno__date--details {
	background: #34426B;
	color: #fff;
	font-family: var(--barlowcondensed);
	font-size: min(3.2rem, 2.5vw);
	font-weight: 400;
}

.gmno__date.typeB .gmno__date--title {
	color: #8E3249;
	line-height: 1.2;
	margin-bottom: 0.5em;
}

.gmno__date.typeB .gmno__date--details {
	background: #8E3249;
}

.gmno__artist {
	margin-bottom: 2em;
	padding-bottom: 2em;
	font-size: 20px;
}

.gmno__artist--images {
	padding: 0 1em;
	display: flex;
	justify-content: center;
}

.gmno__artist--images .inner {
	width: 256px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 26px;
	font-family: var(--barlowcondensed);
	font-weight: 400;
	text-align: left;
}

.gmno__artist--images .inner.column2 {
	width: calc(414px + 1em);
}

.gmno__artist--images .inner__date {
	color: #34426B;
	margin-bottom: 0.25em;
	width: 100%;
	font-family: var(--barlowcondensed);
	font-size: min(3.1rem, 2.422vw);
	font-weight: 500;
	line-height: 1;
}

.gmno__artist--images .inner .images {
	width: 256px;
	text-align: center;
	display: flex;
	flex-direction: column-reverse;
}

.gmno__artist--images .inner .images figcaption {
	color: #34426B;
	font-size: min(4.2rem, 3.281vw);
	font-weight: 500;
	text-align: left;
	line-height: 1;
	margin-bottom: 0.25em;
}

.gmno__countdown p.text {
	color: #505558;
	margin-bottom: 0;
	line-height: 1.8;
	font-size: min(1.7rem, 1.328vw);
	font-weight: 400;
}

.gmno__countdown p.text.en {
	letter-spacing: -0.005em;
}

.gmno .linkBtn {
	margin-top: 2em;
}

.gmno .linkBtn a {
	background: rgb(var(--wht));
	color: #505558;
	border-style: none;
}

.gmno .linkBtn a:hover {
	background: #34426B;
	color: rgb(var(--wht));
}

.gmno .linkBtn a svg {
	stroke: #505558;
}

.gmno .linkBtn a:hover svg {
	stroke: rgb(var(--wht));
}

@media screen and (max-width: 880px) {
	.gmno__artist--images .inner {
		width: 23.52273vw;
		font-size: 1.81818vw;
	}

	.gmno__artist--images .inner.column2 {
		width: calc(23.52273vw * 2 + 1em);
	}

	.gmno__artist--images .inner .images {
		width: 23.52273vw;
	}
}

@media screen and (max-width: 768px) {
	.gmno .container {
		background: url(../img/gmnoBg_sp.webp) no-repeat;
		background-size: 100%;
	}
	.gmno .container {
		padding: 9.6vw 4.8vw 20vw;
	}
	.gmno__logo img {
		max-width: 45%;
	}
	.gmno__title {
		margin-bottom: 1em;
	}
	.gmno__date--title,
	.gmno__date--title small {
		font-size: min(4rem, 11.429vw);
	}
	.gmno__date--details {
		font-size: min(2.7rem, 7.714vw);
	}
	.gmno__artist {
		font-size: 3.73333vw;
	}
	.gmno__artist--title {
		margin-bottom: 0.5em;
	}
	.gmno__artist--list {
		margin-bottom: 1.5em;
	}
	.gmno__artist--item:not(:last-of-type) {
		margin-bottom: 0.5em;
	}
	.gmno__artist--images {
		justify-content: space-between;
		padding: 0;
	}
	.gmno__artist--images .inner {
		width: 48%;
		margin: 0;
	}
	.gmno__artist--images .inner.column2 {
		width: calc(50vw + 0.5em);
	}
	.gmno__artist--images .inner__date {
		font-size: min(2.3rem, 6.571vw);
	}
	.gmno__artist--images .inner .images {
		width: 100%;
	}
	.gmno__artist--images .inner .images figcaption {
		font-size: min(3.1rem, 8.857vw);
	}
	.gmno__date--images {
		margin: 0 auto 1em;
	}
	.gmno__countdown p.text {
		font-size: 3.73333vw;
		text-align: left;
	}
	.gmno .linkBtn a {
		width: 80%;
	}

}

/* ---------------------------------------------------
	about
---------------------------------------------------- */
.about {
	text-align: center;
}

.about__title {
	margin-bottom: 1em;
	line-height: 1.5;
	font-size: 18px;
}

.about__banner {
	margin: 0 auto;
	max-width: 663px;
}

.about .box {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	margin-top: 86px;
}

.about .box .img {
	width: 30%;
}

.about .box .text {
	width: 66%;
}

.about .box .text {
	font-size: min(1.7rem, 1.328vw);
	text-align: left;
}

.about .box .text h2 {
	font-size: min(2rem, 1.563vw);
	font-weight: 400;
	margin-bottom: 10px;
}

.about .box .text .wrap {
	display: flex;
	justify-content: space-between;
}

.about .box .text .wrap p {
	width: 49%;
	font-size: min(1.6rem, 1.25vw);
}

@media screen and (max-width: 768px) {
	.about {
		margin-bottom: 4em;
	}
	.about__title {
		font-size: 4.26667vw;
	}
	.about .box {
		display: block;
		padding: 0 10px;
		margin-top: 86px;
	}
	.about .box .img {
		width: 50%;
		margin: 0 auto;
	}
	.about .box .text {
		width: 100%;
		font-size: min(1.4rem, 4vw);
		text-align: left;
	}
	.about .box .text h2 {
		font-size: min(1.7rem, 4.857vw);
		text-align: center;
		margin: 10px 0;
	}
	.about .box .text .wrap {
		display: block;
	}
	.about .box .text .wrap p {
		width: 100%;
		font-size: min(1.4rem, 4vw);
	}


}

/* ---------------------------------------------------
	notes
---------------------------------------------------- */
.notes .list li a {
	color: rgb(var(--gray));
}

@media screen and (max-width: 768px) {
	.notes .list:not(:last-of-type) {
		margin-bottom: 1em;
	}
}

/* ---------------------------------------------------
	article_contents
---------------------------------------------------- */
.article_contents {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.article_contents_txt {
	position: absolute;
	top: 20px;
	left: 20px;
	text-align: left;
}

@media screen and (max-width: 768px) {
	.article_contents_txt {
		top: 5px;
	}
	.article_contents_txt.typeB {
		top: 14px;
	}
}