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


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

	Common

//////////////////////////////////////////////////////////////////////////////// */
html {
	scroll-behavior: smooth;
  height: 100%;
}
body {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
	font-size: min(3.2vw, 14px);
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
  height: 100%;
}

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

.anim {
	opacity: 0;
	transition: all .6s ease-out;
}
.anim.on {
	opacity: 1;
}

#op {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
  pointer-events: none;
}
#op .opLogo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#op .opLogo div {
  line-height: 0;
  width: 82%;
  max-width: 600px;
  margin-bottom: min(4vw, 20px);
}
#op .opLogo p {
  text-align: center;
  font-size: min(3.8vw, 24px);
  letter-spacing: 0.1em;
  font-weight: 600;
}

#menuBtn {
  position: fixed;
  top: min(6vw, 30px);
  right: min(6vw, 30px);
  z-index: 1000;
  background-color: #fff;
  padding: min(2vw, 7px);
  border-radius: 4px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}
#menuBtn a {
  display: flex;
  flex-wrap: wrap;
  width: min(5vw, 24px);
  height: min(5vw, 24px);
  gap: calc((100% - 23% * 3) / 2);
}
#menuBtn a:hover {
  transform: scale(1.2);
}
#menuBtn span {
  display: block;
  background-color: #000;
  width: 23%;
  aspect-ratio: 1/1;
  border-radius: 1px;
  transition: all 0.3s ease-out;
}

#menuBtn.on span:nth-child(2) {
  transform: translate(-80%, 80%);
}
#menuBtn.on span:nth-child(4) {
  transform: translate(80%, 80%);
}
#menuBtn.on span:nth-child(6) {
  transform: translate(-80%, -80%);
}
#menuBtn.on span:nth-child(8) {
  transform: translate(80%, -80%);
}

#menu {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: #fff;
  z-index: 10;
  width: 600px;
  max-width: calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: auto;
  display: none;
  border-radius: 8px;
}
#menu .menuInr {
  padding: min(14vw, 11vh) min(6vw, 6vh) min(8vw, 6vh);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#menu h1 {
  line-height: 0;
  width: min(50vw, 260px);
  margin-bottom: min(6vw, 30px);
}
#menu .mainMenu li a {
  color: #000;
  text-decoration: none;
  font-size: min(5.8vw, 3vh);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

#menu .menuBot {
  padding-top: min(6vw, 4vh);
  margin-top: min(6vw, 4vh);
  border-top: #000 solid 1px;
}
#menu .menuBot ul {
  margin-bottom: min(6vw, 30px);
}
#menu .menuBot ul li a {
  color: #000;
  text-decoration: none;
  font-size: min(3.6vw, 2vh);
  font-weight: 600;
  letter-spacing: 0.06em;
}
#menu .menuBot .copyright {
  font-size: min(2.8vw, 1.4vh);
}


@media screen and (min-width: 821px) {
	
	.sp { display: none;}
	
	a { transition: all 0.3s ease-out;}
	#menu a:hover { opacity: 0.5;}
	
}
@media screen and (max-width: 820px) {
	
	.pc { display: none;}
  
  
  #menu ul li .menuTitle {
    padding: min(3vw, 15px) min(11vw, 110px);
  }
	
}

#fieldWrap {
  position: relative;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}
#field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5); /* 初期縮小 */
  transform-origin: center center;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 1456 / 816;
  background: url("../images/field.jpg") no-repeat center center;
  background-size: cover;
  transition: transform 0.7s cubic-bezier(0.83, 0, 0.17, 1);
  overflow: hidden;
  z-index: 0;
}
#field img {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
}



#field .hotel {
  position: absolute;
  bottom: 20.9%;
  left: 39%;
  width: 20.4%;
  z-index: 1;
  overflow: hidden;
}
#field .hotel a {
  display: block;
  transform-origin: center bottom;
}
#field .hotel a:hover {
  transform: scale(1.03);
  overflow: hidden;
}

#field .hotel img {
  width: 100%;
  height: auto;
}

#field .neonSign {
  position: absolute;
  top: 27%;
  left: 10%;
  width: 58%;
  z-index: 2;
}
#field .neonSign img {
  position: absolute;
  top: 0;
  left: 0;
}


#field .neonBoard {
  position: absolute;
  top: 55.3%;
  left: 42.7%;
  z-index: 2;
  width: 14.1%;
}
#field .neonBoard img {
  width: 100%;
}


#field .titleBoard {
  position: absolute;
  top: 16%;
  left: 49%;
  z-index: 2;
  width: 45%;
}

#field .parts01 {
  line-height: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
  width: 47%;
  pointer-events: none;
}
#field .parts02 {
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 35.8%;
  pointer-events: none;
}
#field .parts01 img,
#field .parts02 img {
  width: 100%;
}


#fieldWrap .chara {
  position: absolute;
  line-height: 0;
  transform: translateX(-50%);
  z-index: 4;
}
#fieldWrap #field .chara {
  height: 10%;
}
#fieldWrap #lobby .chara {
  height: 16%;
}
#fieldWrap .chara a {
  height: 100%;
  display: block;
  transform-origin: center bottom;
  transition: all 0.5s cubic-bezier(0.83, 0, 0.17, 1);
}
#fieldWrap #field .chara a:hover {
  transform: scale(1.4);
}
#fieldWrap #lobby .chara a:hover {
  transform: scale(1.1);
}
#fieldWrap .chara img {
  height: 100%;
  width: auto;
}
#fieldWrap #lobby .chara01 { bottom: 14%; left: 71%;}
#fieldWrap #lobby .chara02 { bottom: 54%; left: 52%; height: 15%;}
#fieldWrap #lobby .chara03 { bottom: 51%; left: 25%; height: 17%;}
#fieldWrap #lobby .chara04 { bottom: 14%; left: 23%;}
#fieldWrap #lobby .chara05 { bottom: 50.8%; left: 67%; z-index: 2; clip-path: polygon(0 -10%, 100% -10%, 100% 75.3%, 0 58.9%); height: 15%;}
#fieldWrap #lobby .chara06 { bottom: 40%; left: 38%;}
#fieldWrap #lobby .chara07 { bottom: 27%; left: 80%;}
#fieldWrap #lobby .chara08 { bottom: 8%; left: 46%; height: 17%;}
#fieldWrap #lobby .chara09 { bottom: 28%; left: 56%;}
    

#field .car01 {
  position: absolute;
  width: 4%;
  height: auto;
  z-index: 2;
  opacity: 1;
}
#field .car01 img {
  width: 100%;
  height: auto;
}

#field .car02 {
  position: absolute;
  width: 4%;
  height: auto;
  z-index: 2;
  opacity: 1;
}
#field .car02 img {
  width: 100%;
  height: auto;
}


#field .post {
  position: absolute;
  top: 63%;
  left: 30.8%;
  z-index: 2;
  width: 1.9%;
}
#field .sign {
  position: absolute;
  top: 84%;
  left: 49%;
  z-index: 3;
  width: 2%;
}


.profile {
  display: flex;
  justify-content: space-between;
}
.profile .txt {
  width: 40%;
}
.profile .txt h4 {
  font-size: min(6vw, 46px);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: min(4vw, 30px);
  letter-spacing: 0.1em;
}
.profile .txt h4 span {
  font-size: 0.4em;
  font-weight: 400;
  display: block;
  letter-spacing: 0.1em;
}
.profile .txt p {
  font-size: min(3.2vw, 18px);
}

.profile .pic {
  width: 50%;
}


#cboxOverlay {
  transition: all 1s ease-out;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
}
#cboxOverlay.show {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}
#cboxLoadedContent {
  border-radius: min(3vw, 6px);
}
#cboxClose {
  display: none;
  background-color: #000;
  border-radius: 50% 0 0 50%;
  top: min(4vw, 20px);
  right: 0;
  width: min(11vw, 60px);
  height: min(11vw, 60px);
  opacity: 0;
  transform-origin: right center;
}
.show #cboxClose {
  opacity: 1;
}
#cboxClose:before,
#cboxClose:after {
  width: 60%;
  height: 1px;
}

.modal {
  background-color: #fff;
  padding: min(8vw, 80px);
}

.modal .yt {
  width: 100%;
  aspect-ratio: 100/56.25;
  line-height: 0;
}
.modal .yt + .yt {
  margin-top: min(6vw, 30px);
}
.modal .yt iframe {
  width: 100%;
  height: 100%;
}
.modal .slick-prev,
.modal .slick-next {
  width: 30px;
  height: 30px;
}
.modal .slick-prev {
  left: -30px;
}
.modal .slick-next {
  right: -30px;
}
.modal .slick-prev:before,
.modal .slick-next:before {
  content: "";
  transform: rotate(45deg);
  display: block;
  width: 100%;
  height: 100%;
}
.modal .slick-prev:before {
  border-bottom: #000 solid 1px;
  border-left: #000 solid 1px;
}
.modal .slick-next:before {
  border-top: #000 solid 1px;
  border-right: #000 solid 1px;
}
.modal .slick-dots li.slick-active button {
  background-color: #000;
}

@media screen and (max-width: 820px) {
  
  .profile {
    flex-direction: column;
    gap: min(6vw, 30px);
  }
  .profile .txt,
  .profile .pic {
    width: 100%;
  }
  .profile .txt h4 span {
    display: inline-block;
  }
  
}


#lobby {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-height: 100%;
  min-width: 100%;
  aspect-ratio: 1456/816;
  background: url("../images/lobby.jpg") no-repeat center center;
  background-size: cover;
  z-index: 1;
  
  transition: all 0.7s cubic-bezier(0.83, 0, 0.17, 1);
  clip-path: circle(0% at 49% 62%);
}
#lobby.open {
  clip-path: circle(101.4% at 66% 41%);
}

#lobby .btn01 {  
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
#lobby .btn01 a {
  display: block;
  position: relative;
  text-decoration: none;
}
#lobby .btn01 p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  text-align: center;
  color: #fff;
  background-color: #000;
  border-radius: 100px;
  padding: 0em min(6vw, 50px);
  font-size: 2vw;
  letter-spacing: 0.1em;
  transition: all 0.4s cubic-bezier(0.83, 0, 0.17, 1);
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.3);
  line-height: 2;
}
#lobby .btn01 a:hover p {
  transform: translate(0, -40%);
  opacity: 1;
}

.modal .btn {
  width: min(60%, 280px);
  margin: min(6vw, 30px) auto 0;
}
.modal .btn a {
  background-color: #000;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.06em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: min(3vw, 14px);
  padding: min(3vw, 15px);
  box-sizing: border-box;
  border-radius: 999px;
  transition: 0.4s;
}

#lobby .lobbyParts {
  position: absolute;
  line-height: 0;
}
#lobby .lobbyParts img {
  width: 100%;
  height: auto;
}
#lobby .lobbyParts a::after {
  content: "";
  display: block;
  width: min(8vw, 5vh);
  aspect-ratio: 1/1;
  position: absolute;
  animation: arrow 0.8s ease-out infinite alternate;
}
@keyframes arrow {
  0% { transform: scale(1);}
  100% { transform: scale(1.2);}
}
#lobby .lobbyParts.arrowLeft a::after {
  background: url("../images/lobby_arrow_left.png") no-repeat center center;
  background-size: contain;
}
#lobby .lobbyParts.arrowRight a::after {
  background: url("../images/lobby_arrow_right.png") no-repeat center center;
  background-size: contain;
}


#lobby .neon {
  top: 17%;
  left: 66.2%;
  width: 11%;
}

#lobby .neon a::after {
  bottom: -10%;
  right: -6%;
}
#lobby .neon a {
  display: block;
}

#lobby .carry {
  top: 48%;
  left: 70%;
  width: 3.6%;
}
#lobby .carry a::after {
  bottom: -8%;
  left: -40%;
}

#lobby .headphone {
  top: 65%;
  left: 62%;
  width: 3.4%;
}
#lobby .headphone a::after {
  bottom: -41%;
  right: -50%;
}
#lobby .tv {
  top: 22%;
  left: 11.5%;
  width: 8.9%;
}
#lobby .tv a::after {
  bottom: 0%;
  right: -10%;
}
#lobby .uchiwa {
  bottom: 46%;
  left: 28.2%;
  width: 2.4%;
}
#lobby .uchiwa a::after {
  bottom: -14%;
  left: -81%;
}
#lobby .book {
  top: 55%;
  left: 85.1%;
  width: 5.3%;
}
#lobby .book a::after {
  bottom: -28%;
  right: -14%;
}

#lobby .camera {
  top: 56%;
  left: 27%;
  width: 3.2%;
}
#lobby .camera a::after {
  bottom: -58%;
  left: -48%;
}

#lobby .sign {
  position: absolute;
  line-height: 0;
  top: 45.6%;
  left: 67%;
  width: 2.8%;
}
#lobby .notepc {
  position: absolute;
  line-height: 0;
  top: 36.8%;
  left: 58.3%;
  width: 3.8%;
}
#lobby .candy {
  position: absolute;
  line-height: 0;
  top: 39.8%;
  left: 80.9%;
  width: 2%;
}

#lobby .board {
  top: 28%;
  left: 44.4%;
  width: 5%;
}
#lobby .board a::after {
  bottom: 22%;
  right: -13%;
}

#lobby .directed {
  position: absolute;
  top: 40.8%;
  left: 63%;
  width: 4%;
  z-index: 3;
}

#lobby .exit {
  position: absolute;
  top: 12.5%;
  left: 37%;
  width: 4.5%;
  height: 21%;
}
#lobby .exit a {
  display: block;
}

.instaList {
  display: flex;
  flex-wrap: wrap;
  gap: min(5vw, 30px) calc((100% - 32% * 3) / 2);
}
.instaList li {
  width: 32%;
}
.instaList li iframe {
  width: 100% !important;
  min-width: auto !important;
}

@media screen and (min-width: 821px) {
  
  #lobby .lobbyParts a,
  #lobby .exit a {
    display: block;
    transition: all 0.4s cubic-bezier(0.83, 0, 0.17, 1);
  }
  #lobby .lobbyParts a:hover,
  #lobby .exit a:hover {
    transform: scale(1.1);
    opacity: 1;
  }
  
}
@media screen and (max-width: 820px) {
  
  .instaList li {
    width: 100%;
  }
  
}


@keyframes light {
  0% { opacity: 1;}
  20% { opacity: 1;}
  100% { opacity: 0;}
}

.modal h3 {
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: min(6.4vw, 28px);
  text-align: center;
  margin-bottom: min(6vw, 30px);
}
#event .modalTxt {
  text-align: center;
}
#event .modalTxt p {
  font-size: min(3vw, 16px);
}
#event .modalTxt p + p {
  margin-top: min(4vw, 20px);
}

.benefitList {
  display: flex;
  flex-wrap: wrap;
  gap: min(12vw, 50px) calc((100% - 30% * 3) / 2);
}
.benefitList > li {
  width: 30%;
}
.benefitList > li .thumb {
  line-height: 0;
  border: #ccc solid 1px;
  margin-bottom: min(4vw, 20px);
}
.benefitList > li h4 {
  font-size: min(3.8vw, 14px);
  line-height: 1.6;
  margin-bottom: min(3vw, 15px);
}
.benefitList > li h4 span {
  font-size: min(3vw, 12px);
}
.benefitList > li p {
  font-size: min(3vw, 12px);
  line-height: 1.6;
  margin-bottom: min(3vw, 15px);
}
.benefitList > li ul {
  font-size: min(3vw, 12px);
  line-height: 1.6;
  list-style: disc;
  padding-left: min(3.2vw, 12px);
  margin-bottom: min(3vw, 15px);
}
.benefitList > li ul li + li {
  margin-top: min(2vw, 10px);
}
.benefitList > li .note {
  font-size: min(2.8vw, 10px);
}
.benefitList > li .btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(1vw, 5px);
  margin: min(4vw, 20px) auto 0;
}
.benefitList > li .btn a {
  font-size: min(3vw, 10px);
  padding: min(3vw, 12px);
}


@media screen and (max-width: 820px) {
  
  #lobby.open {
    transform: translate(-67.1%, -50%);
  }
  
  .benefitList {
    gap: min(12vw, 50px) 0;
  }
  .benefitList > li {
    width: 100%;
  }
  .benefitList > li .btn a {
    font-size: min(3.8vw, 12px);
  }

}

.discList {
  margin-bottom: min(8vw, 60px);
}
.discList > li {
  padding-bottom: min(7vw, 50px);
  margin-bottom: min(7vw, 50px);
  border-bottom: #ccc solid 1px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.discList > li:last-child {
  margin-bottom: 0;
}
.discList li .jacketImg {
  width: 40%;
  line-height: 0;
}
.discList li .discContent {
  width: 55%;
}
.discContent h4 {
  display: flex;
  align-items: center;
  gap: min(4vw, 20px);
}
.discContent h4 span:nth-of-type(1) {
  font-size: min(5.2vw, 26px);
  font-weight: 400;
  line-height: 1;
}
.discContent h4 span:nth-of-type(2) {
  font-size: min(2.8vw, 13px);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.2em 1em;
  min-width: 6em;
  text-align: center;
  background-color: #b59557;
  color: #fff;
}
.discContent h4.solo {
  align-items: flex-start;
  flex-direction: column;
  gap: min(2vw, 10px);
}
.discContent h4.solo span:nth-of-type(1) {
  line-height: 1.4;
}

.discContent .price {
    font-size: min(3.4vw, 16px);
    margin-top: min(3vw, 12px);
}
.discContent .detail {
  font-size: min(3.4vw, 16px);
  padding-top: min(4vw, 24px);
  border-top: #b59557 solid 1px;
  margin-top: min(4vw, 20px);
}
.discContent .detail h5 {
  position: relative;
  font-size: min(3.8vw, 16px);
  font-weight: 400;
  padding-left: 0.8em;
}
.discContent .detail h5::before {
  display: block;
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  background-color: #ccc;
  width: 0.2em;
  height: 1.3em;
}
.discContent .detail p {
  margin-top: 0.4em;
  font-size: min(3.2vw, 14px);
  font-feature-settings: "palt";
}
.listAsterisk,
.listDisk {
  list-style: none;
  padding-left: 1.5em;
  font-size: min(3vw, 12px);
  line-height: 1.6;
  margin-top: 1em;
  font-feature-settings: "palt";
}
.listAsterisk > li,
.listDisk > li {
  text-indent: -1.5em;
  margin-bottom: 0.4em;
}
.listDisk {
  padding-left: 0.8em;
}
.listDisk > li {
  text-indent: -0.8em;
}
.listAsterisk > li::before {
  content: "※";
  margin-right: 0.2em;
}
.listDisk > li::before {
  content: "・";
  margin-right: 0.2em;
}

.gridWrap {
  display: flex;
  flex-wrap: wrap;
  gap: min(8vw, 60px) calc((100% - 32% * 3) / 2);
  margin: min(6vw, 30px) 0;
}
.gridWrap .item {
  width: 32%;
}
.gridWrap .item .jacket {
  line-height: 0;
  margin-bottom: min(2vw, 20px);
}
.gridWrap p {
  text-align: center;
  font-size: min(3.4vw, 16px);
}
.gridWrap p span {
  display: block;
  font-size: 0.8em;
}

.discContent .detail .listTitle {
  margin-top: min(4vw, 20px);
}

#about .modalTxt p {
  font-size: min(3.2vw, 14px);
}
#about .modalTxt p + p {
  margin-top: min(3vw, 15px);
}

.comingsoon {
  text-align: center;
  padding: min(8vw, 80px);
  font-size: min(4.2vw, 24px);
}

@media screen and (max-width: 820px) {
  
  .discList > li {
    flex-direction: column;
    gap: min(6vw, 40px);
  }
  .discList li .jacketImg,
  .discList li .discContent {
    width: 100%;
  }
  
  .gridWrap {
    gap: min(8vw, 60px) 0;
    justify-content: space-between;
  }
  .gridWrap .item {
    width: 48%;
  }
  
  
}