@charset "UTF-8";

@media (min-width: 768px) {
  html {
    font-size: 0.7320644217vw;
  }
}
@media (max-width: 767px) {
  html {
    font-size: 2.6666666667vw;
  }
}
@media (min-width: 1680px) {
  html {
    font-size: 12.3px;
  }
}
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
  background: #000;
}

#container {
	overflow: unset;
	opacity:0;
}
footer#h-footer {
  position: relative;
}
.wow{
  visibility: hidden;
}
.nw {
  display: inline-block;
}
.loading {
  background: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10002;
  top: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading h2{
	font-size:calc(1.6 * 1.8rem);
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 0.7rem;
	animation-name: loadingh2-sp;
	animation-duration:8s;
	animation-delay: 0s;
	animation-fill-mode: backwards;
}
@media only screen and (min-width: 750px) {
	.loading h2{
		font-size: calc(1.6 * 3rem);
		animation-name: loadingh2;
		animation-duration:8s;
		animation-delay: 0s;
		animation-fill-mode: backwards;
	  }
	}
.loading h2 span{
	font-size: 60%;
	display:block;
}
/*
@media only screen and (max-width: 750px) {
	.loading h2{
	writing-mode: vertical-rl;
	}
}
*/
body.fix .loading{
	animation-name: loadCover;
	animation-duration:0.8s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

@keyframes loadCover{
  from {
	opacity: 1;
  }

  to {
	opacity: 0;
	display:none;
  }
}
@keyframes loadingh2{
  0% {
	transform: scale(1);
	opacity: 0;
  }
  40% {
	opacity: 1;
  }
  100% {
	transform: scale(1.3);
  }
}
@keyframes loadingh2-sp{
  0% {
	transform: scale(0.8);
	opacity: 0;
  }
  40% {
	opacity: 1;
  }
  100% {
	transform: scale(1.2);
  }
}




.p__fv__inner {
	position: relative;
	width: 100%;
	aspect-ratio: 8 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 50px;
}

.fv_movie {
  width: 100%;
  height:100%;
	aspect-ratio: 8 / 10;
  position: absolute;
      position: fixed;
  top: 0px;
  left: 0;
  overflow: hidden;
  opacity: 1;
  z-index: 2;
  transition: opacity;
  transition-duration: .3s;
  transition-timing-function: linear;
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}

.fv_movie_video {
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-position: top;
}
body.scroll .fv_movie:after{
	content: "";
	background: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	animation-name: movieCover;
	animation-duration:0.8s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

@keyframes movieCover{
  from {
	opacity: 0;
  }

  to {
	opacity: 0.6;
  }
}

.p__fv .el__detail{
	z-index: 2;
	color: #fff;
	opacity: 0;
	text-align: center;
	display: none;
	transition: all 0.4s;
}
body.scroll .p__fv .el__detail{
	animation-name: fvdetail;
	animation-duration:0.8s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
	  display:block;
}
@keyframes fvdetail{
  from {
	opacity: 0;
  }

  to {
	opacity: 1;
  }
}

.p__fv h2{
	font-size:calc(1.6 * 1.8rem);
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 0.7rem;
	z-index:2;
	color:#fff;
	transition: all 0.4s;
}
body.scroll .p__fv h2{
	animation-name: fvh2!important;
	animation-duration:1.5s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
	display:block;
}
.p__fv h2 span{
	font-size: 50%;
	display:block;
text-shadow: #000 0 0 5px;
}


@keyframes fvh2{
  from {
	opacity: 1;
  }

  to {
	opacity: 0;
  }
}


@media only screen and (min-width: 750px) {
	.p__fv__inner {
		aspect-ratio: 16 / 8;
	}
	.fv_movie {
		aspect-ratio: 16 / 8;
	}
	.p__fv h2{
	    font-size: calc(1.6 * 4rem);
	  }
}

@media screen and (max-width: 736px) {
  .fv_movie_video {
  }
.fv_movie {
  top: 125px;
}
body.scroll .fv_movie {
  top: 60px;
}

}



.p__body {
  position: relative;
}

.p__inner {
  padding: 6rem 20px;
  text-align: center;
  position: relative;
}
.el__sticky {
  position: sticky;
  top: 0;
}

.p__cover{
}
.p__cover .p__body {
}
.p__term{
	color: #fff;
	position: relative;
}


.p__term h1{
	font-size:calc(1.6 * 1.6rem);
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 0.7rem;
	z-index:2;
	color:#fff;
	transition: all 0.4s;
	opacity: 0;
}
.p__term span{
	display:block;
	text-shadow: #000 0 0 5px;
}
body.scroll .p__term h1{
	animation-name: termh2!important;
	animation-duration:1.8s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	display:block;
}

@keyframes termh2{
  from {
	opacity: 0;
  }

  to {
	opacity: 1;
  }
}

@media only screen and (min-width: 750px) {
	.p__term h1{
	    font-size: calc(1.6 * 2.8rem);
	  }
}



.p__spot{
	color: #fff;
	position: relative;
	background-image: url(../img/index/bg.jpg);
}

.p__spot:before{
	content:"";
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	background: #000
}
@keyframes ttlheader {
  100% {
    filter: hue-rotate(90deg);
  }
}


.p__term .p__body,
.p__spot .p__body {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.p__term .p__body  h2{
	font-size:calc(1.6 * 1.8rem);
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 0.7rem;
	z-index:2;
	color:#fff;
	transition: all 0.4s;
	margin-top:calc(1.6 * 1.8rem);
}
.p__term .p__body  p,
.p__spot .p__body  p{
	font-size:calc(1.6 * 1rem);
}




@media screen and (max-width: 736px) {
	.p__cover .p__body {
		aspect-ratio: 8 / 12;
	}
}
@media only screen and (min-width: 750px) {
	.p__term .p__body  h2{
		font-size:calc(1.6 * 2.8rem);
	}
}


.el__detail dl{
	display: grid;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	position: relative;
	gap: 10px;
	grid-template-columns: auto auto;
	margin-bottom:15px;
	justify-items: start;
	margin: 0 auto;
	color: #fff;
	z-index: 2;
}
.el__detail dl dt{
	width: 100px;
	display: block;
	background: #1e1c1c;
	color: #fff;
	border-radius: 5px;
	margin-right: 10px;
	padding: 3px 10px;
	line-height: 1.2;
	text-align: center;
	font-size: 80%;
}


.el__nav {
	display: flex;
	position: relative;
	gap: 50px;
}

.el__nav a{
	display: flex;
	width: 100%;
	position: relative;
	aspect-ratio: 1 / 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.el__nav__img {
  width: 100%;
  position: absolute;
  transition: 0.6s all;
}
.el__nav__img:after {
	content: "";
	background: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 9999px;
	top: 0;
	left: 0;
	opacity: 0.6;
  transition: 0.6s all;
}
.el__nav__img img {
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  outline: solid 1px lightgreen;
  outline-offset: 4px;
  object-fit: cover;
  transition: 0.6s all;
}

a.fireworks .el__nav__img img {
	outline-color:#d9e021;
}
a.show .el__nav__img img {
	outline-color:#93278f
}
a.music .el__nav__img img {
	outline-color:#fbb03b;
}

.el__nav a:hover .el__nav__img img{
  transform:scale(1.1,1.1);
}
.el__nav a:hover .el__nav__img:after {
  transform:scale(1.1,1.1);
	opacity: 0;
}

.el__nav__img-txt {
	position: relative;
	color: #fff;
	padding: 0 10px;
	  white-space: nowrap;
}

.el_spot {
	display: grid;
	grid-template-columns: 2fr 1fr auto;
	margin-top: 8rem;
	max-width:1300px;
}
.el_spot:last-child {
	margin-bottom: 4rem;
}
.el_spot-ttl {
  position: relative;
  writing-mode: vertical-rl;
  color: #d9e021;
}

.el_spot-ttl h3{
  font-size: calc(1.6* 2.8rem);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.2rem;
  transition: all 0.4s;
}
.el_spot-ttls h3 {
  font-size: calc(1.6* 2rem);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.2rem;
  transition: all 0.4s;
  line-height: 1.4;
}

.el_spot-ttl p {
	margin: 0;
	position: relative;
	display: flex;
	align-items: center;
}
.el_spot-ttl p:after {
	content: "";
	background: #fff;
	background: linear-gradient(180deg, #d9e021 0%, rgba(0,0,0,0) 100%);
	width: 2px;
	height: 200px;
	display: block;
	margin-top: 15px;
}

.el_spot__txt{
position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 1.5rem 2rem 4rem;

}

.el_spot__txt h4 {
  font-size: calc(1.6* 1.1rem);
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.4s;
}
.el_spot__txt p {
  font-size: calc(1.6* 0.8rem)!important;
}

.el_spot__txt  .btn__basic {
  background: #d9e021;
  color: #000 !important;
  font-size: calc(1.6* 0.9rem)!important;
}
.el_spot__txt  .btn__basic.btn__icon:after {
  color: #000 !important;
}

.el_spot__img  {
  position: relative;
}

.el_spot__img img{
  border-radius: 0 200px 0 0;
 	aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: 0.6s all;
}

.el_spot.reverse {
grid-template-columns: auto 1fr 2fr;
}
.el_spot.reverse .el_spot-ttl {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.el_spot.reverse .el_spot-ttl > div{
  display: flex;
  flex-direction: column-reverse;
}


	.el_spot.reverse .el_spot__txt {
	  grid-row: 1 / 2;
	  grid-column: 2 / 3;
	    padding: 0 4rem 2rem 1.5rem;
	}
	.el_spot.reverse .el_spot__img  {
	  grid-row: 1 / 2;
	  grid-column: 3 / 4;
	}


.el_spot.reverse .el_spot__img  img{
  border-radius:200px 0 0 0;
}

/*

#show .el_spot-ttl {
  color: #93278f;
}
#show .el_spot-ttl p:after {
  background: linear-gradient(180deg, #93278f 0%, rgba(0, 0, 0, 0) 100%);
}

#music .el_spot-ttl {
  color: #fbb03b;
}
#music  .el_spot-ttl p:after {
  background: linear-gradient(180deg, #fbb03b 0%, rgba(0, 0, 0, 0) 100%);
}
*/


@media screen and (min-width: 736px) {
	.el_spot__img {
	  grid-row: 1 / 3;
	  grid-column: 1 / 3;
	}
	.el_spot__txt {
		grid-row: 3 / 3;
		grid-column: 2 / 3;
		padding: 1rem;
		background: rgb(0 0 0 / 65%);
		margin-top: -10%;
		width: 110%;
	}
	.el_spot.reverse .el_spot__img {
	  grid-row: 1 / 3;
	  grid-column: 2 / 4;
	}
	.el_spot.reverse .el_spot__txt {
	  grid-row: 3 / 3;
	  grid-column: 2 / 2;
		padding: 1rem;
		  margin-left: -20%;
	}
}

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

	.p__inner {
	  padding: 3rem 20px;
	}
	
	.el__nav {
	  gap: 20px;
	}
	.el__nav__img-txt {
	  padding: 0 5px;
	}
	.el__nav__img-txt p{
	 font-size: calc(1.6* 0.55rem) !important;
	}

	.el_spot-ttl h3{
	  font-size: calc(1.6* 1.8rem);
	}
	.el_spot-ttls h3 {
	  font-size: calc(1.6* 1.6rem);
	}
	.el_spot__img {
	  grid-row: 1 / 3;
	  grid-column: 1 / 3;
	    width: 110%;
	}
	.el_spot__txt {
		  grid-row: 2 / 3;
		  grid-column: 2 / 4;
		  padding: 1rem;
		  background: rgb(0 0 0 / 65%);
	}
	.el_spot.reverse .el_spot__img {
	  grid-row: 1 / 3;
	  grid-column: 2 / 4;
	  margin-left: -10%;
	}
	.el_spot.reverse .el_spot__txt {
	  grid-row: 2 / 3;
	  grid-column: 1 / 3;
	      padding: 1rem;
	}
	.el_spot__img:after {
		content:"";
	    background: rgb(0, 0, 0);
	    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 1) 100%);
	    width: 100%;
	    left: 0;
	    height: 100%;
	    position: absolute;
	    top: 0;
	}
	.el_spot.reverse  .el_spot__img:after {
	    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 1) 100%);
	}
	.el_spot-ttl p:after {
	  height: 250px;
	}

	.el_spot__txt h4 {
	  font-size: calc(1.6* 0.8rem);
	}
	.el_spot__txt p {
		font-size: calc(1.6* 0.6rem) !important;
		margin-top: calc(1.6* 0.6rem) !important;
	}
	.el_spot__txt .btn__basic {
	  font-size: calc(1.6* 0.5rem) !important;
	  padding: 10px 15px;
	}
	.el_spot__txt  .btn__basic.btn__icon:after {
	  right: 5px;
	  width: max(6px, 8px);
	  height: max(6px, 8px);
	}
	.el_spot__img img {
	  border-radius: 0 0 150px 0;
	  aspect-ratio: 9 / 11;
	  object-position: 70%;
	}

	#show .el_spot__img img {
	    object-position: 85%;
	  }

	.el_spot.reverse .el_spot__img img {
	  border-radius: 0 0 0 150px;
	}
	#music .el_spot__img img{
		aspect-ratio: 9 / 11;
		object-position: 60%;
	}

}



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

fancybox 

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


.modal {
  display: none;
    max-width: 800px !important;
}
.modal p{
}
.modal img{
	border: 1px #000 solid;
}

.fancybox-slide--html .modal .fancybox-close-small {
  color: currentColor;
  padding: 5px;
  right: 10px;
  top: 10px;
  border: 1px #000 solid;
  border-radius: 9999px;
}


@media screen and (max-width: 736px) {
	.modal {
	    max-width:90%!important;
	}
	.fancybox-slide--html .modal .fancybox-close-small {
	}

}