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


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

	Common

//////////////////////////////////////////////////////////////////////////////// */
html {
	scroll-behavior: smooth;
}

a[target="_blank"]:not([class])::after {
	display: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
ul { list-style: none;}

.anim {
	opacity: 0;
	transform: translateY(40px);
	transition: all .6s ease-out;
}
.anim.on {
	opacity: 1;
	transform: translateY(0);
}


body {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.8;
	letter-spacing: .05em;
	-webkit-text-size-adjust: 100%;
	background-color: #fff7be;
  color: #000;
}

.wrap {
	padding-top: 0 !important;
  position: relative;
  z-index: 2;
}
section {
	padding: min(10vw, 100px) 0;
}
section h2 {
	font-size: min(5.4vw, 26px);
	letter-spacing: 0.45em;
  text-indent: 0.45em;
	line-height: 1.6;
  text-align: center;
  margin-bottom: min(8vw, 60px);
}
.innerWrap {
	position: relative;
	max-width: 1080px;
	padding: 0 min(6vw, 64px);
	margin: 0 auto;
	z-index: 1;
}

.btnWrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: min(4vw, 24px);
}
.btnWrap a {
	width: 100%;
	max-width: 320px;
	min-width: fit-content;
	display: block;
	padding: min(3vw, 18px);
	font-size: min(3vw, 14px);
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: 100px;
}

.video {
  position: relative;
  width:100%;
  height: 100%;
  aspect-ratio: 16/9;
  padding: 0;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.listDisc,
.listAsterisk {
	list-style: none;
	padding-left: 1.2em;
	font-size: min(3vw, 14px);
}
.listDisc > li,
.listAsterisk > li {
	text-indent: -1.2em;
	font-weight: normal;
	line-height: 1.4;
}
.listDisc > li + li,
.listAsterisk > li + li {
	margin-top: 0.3em;
}
.listDisc > li:before,
.listAsterisk > li:before {
	margin-right: 0.2em;
}
.listDisc > li:before {
	content: "・";
}
.listAsterisk > li:before {
	content: "※";
}
.textRed {
	color: #ff3e3e;
}

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

	.pc-none { display: none !important;}

	a { transition: all 0.3s ease-out !important;}
	a:hover { opacity: 0.5;}

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

	.sp-none { display: none !important;}

	section h2 {
    letter-spacing: 0.3em;
    text-indent: 0.3em;
	}

	.fixedBnr a {
		line-height: 1.2;
	}
	.fixedBnr a img {
    width: 1.8em;
	}
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}



@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}


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



}


#footer {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding: min(4vw, 40px);
  z-index: 0;
}
#footer.v2 {
	min-height: 47vw;
}
#footer .footerBg {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 65vw;
	z-index: -2;
	mask-image: linear-gradient(180deg, transparent 3%, white 50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 3%, white 50%);

	opacity: 0;
	transition: opacity 1.5s ease;
}
#footer.on .footerBg {
	opacity: 1;
}
#footer .footerBg img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 5%;
}
footer .sns-nav {
	display: flex;
	gap: min(4vw, 20px);
	margin-bottom: 0;
}
footer .sns-nav li {
	margin: 0;
	vertical-align: bottom;
}
#footer .sns-nav a {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #231815;
	width: min(8.6vw, 40px);
	height: min(8.6vw, 40px);
	border-radius: 100%;
}
#footer .sns-nav a i {
	font-size: min(5.2vw, 22px);
}
footer .sns-nav a svg {
	width: min(5.4vw, 23px);
	height: min(5.4vw, 23px);
}
#footer .sns-nav a,
#footer .sns-nav a svg {
	color: #fff;
	fill: #fff;
}
#footer .sns-nav a img {
	width: 28px;
}
#footer .sns-nav a svg,
#footer .sns-nav a img,
.sns-nav a i {
	vertical-align: text-top;
}
#footer .copyright {
	color: #000;
	line-height: 1.2;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 0;
}

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

	#footer {
		flex-direction: column;
		justify-content: end;
		align-items: center;
	}
	#footer.v2 {
		min-height: 72vw;
	}
	#footer .footerBg {
		height: 87vw;
		-webkit-mask-image: linear-gradient(180deg, transparent 3%, white 40%);
		mask-image: linear-gradient(180deg, transparent 3%, white 40%);
	}
	#footer > div {
		flex-direction: column-reverse;
	}
	#footer .copyright {
		width: 100%;
		text-align: center;
		padding-top: min(4vw, 20px);
	}

}

.mainTitle {
  padding: min(16vw, 140px) min(6vw, 60px) min(16vw, 160px);
}
.mainTitle h1 {
  text-align: center;
  /* font-size: min(8vw, 72px); */
  font-size: min(5.2vw, 58px);
  line-height: 1.6;
  border-bottom: #000 solid 2px;
  width: fit-content;
  margin: 0 auto;
  letter-spacing: 0.16em;
}
/* .mainTitle .ttlEn {
  text-align: center;
  font-size: min(3.2vw, 24px);
  margin-top: min(3vw, 15px);
  letter-spacing: 0.16em;
} */

.thumbNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: min(4vw, 20px) 0;
  max-width: 980px;
  margin: min(14vw, 100px) auto 0;
}
.thumbNav li {
  width: 18.5%;
}
.thumbNav li a {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  border-radius: min(3vw, 15px);
}
.thumbNav li a span {
  position: absolute;
  bottom: min(1vw, 5px);
  left: min(2vw, 10px);
  color: #fff;
  font-size: min(4.2vw, 20px);
}
/* .thumbNav li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.thumbNav li a .navSlide .imgWrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.thumbNav li a .navSlide .imgWrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.floatNav {
  position: sticky;
  top: min(4vw, 60px);
  left: 0;
  width: fit-content;
  border: #000 solid 1px;
  border-radius: 100px;
  padding: min(2vw, 10px) min(6vw, 30px);
  margin: 0 auto;
	background-color: #fff7be;
  z-index: 100;
  backdrop-filter: blur(5px);
}
.floatNav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.floatNav ul li a {
  display: block;
  font-size: min(3.4vw, 16px);
  padding: min(1vw, 5px) min(3vw, 15px) min(1.2vw, 7px) min(3vw, 15px);
  line-height: 1;
  border-radius: 100px;
}
.floatNav ul li.on a {
  color: #fff;
  background-color: #000;
}


.historyBlock {
  max-width: 1200px;
  margin: auto;
  position: relative;
  padding: min(4vw, 20px) 0;
}
.historyBlock h2 {
  text-align: center;
  font-size: min(6vw, 64px);
  margin-bottom: min(8vw, 60px);
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.historyBlock .history {
  position: relative;
  display: flex;
  padding: min(8vw, 60px) 0;
}
.historyBlock .history::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 50%;
}

.historyBlock .history .historyMain {
  width: 50%;
}
.historyBlock .history .historyPcRight {
  width: 50%;
}

.historyBlock .history .item {
  position: relative;
}
.historyBlock .history .item:not(.mvLink) .itemInr {
  margin: 0 auto;
}
.historyBlock .history .item .itemInr {
  opacity: 0;
  transition: all 0.3s ease-out 0.8s;
}
.historyBlock .history .item.on .itemInr {
  opacity: 1;
}
.historyBlock .history .item .itemInr + .itemInr {
  margin-top: min(6vw, 60px);
}

.historyBlock .history .item.mvLink::before,
.historyBlock .history .item.release::before,
.historyBlock .history .item.live::before {
  content: "";
  display: block;
  position: absolute;
  /* top: calc(35% + 7px); */
  width: 28%;
  border-bottom: #000 dashed 1px;
  transition: all 0.6s ease-out 0.3s;
  z-index: -2;
}
.historyBlock .history .item.mvLink::before {
  top: 50%;
}
.historyBlock .history .item.release::before {
  top: min(10vw, 120px);
}
.historyBlock .history .item.live::before {
  top: min(3.6vw, 16.2px);
  width: 18%;
}
.historyBlock .history .item.live:has(.pic)::before {
  top: min(10vw, 123px);
}
.historyBlock .history .historyMain .item::before {
  right: 0;
  clip-path: inset(0 0 0 100%);
}
.historyBlock .history .historyPcRight .item::before {
  left: 0;
  clip-path: inset(0 100% 0 0);
}

.historyBlock .history .item.mvLink.on::before,
.historyBlock .history .item.release.on::before,
.historyBlock .history .item.live.on::before {
  clip-path: inset(0 0 0 0);
}

.historyBlock .history .item.mvLink::after,
.historyBlock .history .item.release::after,
.historyBlock .history .item.live::after {
  content: "";
  display: block;
  position: absolute;
  top: 35%;
  width: min( 3.2vw, 14px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: #000 solid 1px;
  background-color: #fff7be;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.historyBlock .history .item.mvLink::after {
  top:  calc(50% - 7px);
}
.historyBlock .history .item.release::after {
  top:  calc(min(10vw, 120px) - 7px);
}
.historyBlock .history .item.live::after {
  top:  calc(min(3.6vw, 16.2px) - 7px);
}
.historyBlock .history .item.live:has(.pic)::after {
  top:  calc(min(10vw, 123px) - 7px);
}
.historyBlock .history .historyMain .item::after {
  right: 0;
  transform: translateX(50%) scale(0.4);
}
.historyBlock .history .historyMain .item.on::after {
  transform: translateX(50%) scale(1);
  opacity: 1;
}
.historyBlock .history .historyPcRight .item::after {
  left: 0;
  transform: translateX(-50%) scale(0.4);
}
.historyBlock .history .historyPcRight .item.on::after {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}


.historyBlock .history .item.mvLink a {
  display: block;
  width: 40%;
  margin: 0 auto;
}
.historyBlock .history .item.mvLink .itemInr {
  position: relative;
  padding: min(1vw, 8px) min(3vw, 16px);
}
.historyBlock .history .historyMain .item.mvLink .itemInr {
  transform: translateX(max(-6vw, -40px));
}
.historyBlock .history .item.mvLink .itemInr::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + min(6vw, 40px));
  height: 100%;
  background-color: #fff;
  border: #000 solid 1px;
  border-radius: min(2vw, 10px);
  z-index: -1;
}
.historyBlock .history .item.mvLink .itemInr .arrow {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
  width: min(6vw, 32px);
  height: min(6vw, 32px);
  background-color: #000;
  border-radius: 100px;
  z-index: 1;
}
.historyBlock .history .item.mvLink .itemInr .arrow::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 1;
  clip-path: polygon(37% 37%, 37% 63%, 63% 50%);
}
.historyBlock .history .item.mvLink .releaseDate {
  font-size: min(3.4vw, 16px);
  margin-bottom: min(1vw, 4px);
}
.historyBlock .history .item.mvLink .title {
  font-feature-settings: "palt";
}


.historyBlock .history .item.release .itemInr {
  width: 40%;
  position: relative;
}
.historyBlock .history .item.release .itemInr::after {
  content: "Release";
  display: block;
  border: #000 solid 1px;
  background-color: rgba(237, 237, 238, 1);
  position: absolute;
  top: 0;
  right: 0;
  padding: min(2vw, 10px) min(4vw, 20px);
  border-radius: 50%;
  font-size: min(3.4vw, 16px);
  transform: translate(35%, -50%);
}
.historyBlock .history .item.release .pic {
  display: block;
  position: relative;
  line-height: 0;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: min(3vw, 15px);
  overflow: hidden;
  margin-bottom: min(3vw, 15px);
  overflow: hidden;
}
.historyBlock .history .item.release .pic.portrait {
  aspect-ratio: 320/437;
}
.historyBlock .history .item.release .pic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.historyBlock .history .item.release .releaseDate {
  font-size: min(3.4vw, 16px);
  margin-bottom: min(1vw, 4px);
}
.historyBlock .history .item.release .title {
  font-feature-settings: "palt";
}

/* .historyBlock .history .item.artistPhoto .itemInr {
  width: 80%;
  margin-right: 20%;
  position: relative;
}
.historyBlock .history .item.artistPhoto .itemInr .pic {
  line-height: 0;
  border-radius: 0 min(3vw, 15px) min(3vw, 15px) 0;
  overflow: hidden;
}
.historyBlock .history .item.artistPhoto .itemInr .baloon {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  padding: min(0.3vw, 2px) min(4vw, 20px);
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #fff;
  font-size: min(3.4vw, 16px);
  transform: translate(10%, -120%);
}
.historyBlock .history .item.artistPhoto .itemInr .baloon::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 40%;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #000 transparent transparent;
  translate: -50% 100%;
  transform: skew(-25deg);
  transform-origin: top;
}
.historyBlock .history .item.artistPhoto .itemInr .baloon::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 40%;
  border-style: solid;
  border-width: 17.6px 17.6px 0 0;
  border-color: #fff transparent transparent;
  translate: calc(-50% - 0.3px) 100%;
  transform: skew(-25deg);
  transform-origin: top;
} */
.historyBlock .history .item.artistPhoto .itemInr {
  width: 80%;
  position: relative;
}
.historyBlock .history .item.artistPhoto.portrait .itemInr {
  width: 60%;
}
.historyBlock .history .item.artistPhoto .itemInr .pic {
  line-height: 0;
  overflow: hidden;
}
/* .historyBlock .history .item.artistPhoto .itemInr .pic .picWrap {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
}
.historyBlock .history .item.artistPhoto .itemInr .pic .picWrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
} */
.historyBlock .history .item.artistPhoto .itemInr .baloon {
  position: absolute;
  top: 0;
  display: block;
  padding: min(0.3vw, 2px) min(4vw, 20px);
  border: 1px solid #000000;
  border-radius: 100px;
  background-color: #fff;
  font-size: min(3.4vw, 16px);
}
.historyBlock .history .item.artistPhoto .itemInr .baloon::before {
  content: "";
  position: absolute;
  bottom: 0;
  border-style: solid;
  border-color: #000 transparent transparent;
  translate: -50% 100%;
  transform-origin: top;
}
.historyBlock .history .item.artistPhoto .itemInr .baloon::after {
  content: "";
  position: absolute;
  bottom: 0.5px;
  border-style: solid;
  border-color: #fff transparent transparent;
  transform-origin: top;
}

.historyBlock .history .historyMain .item.artistPhoto .itemInr {
  margin-right: 20%;
}
.historyBlock .history .historyMain .item.artistPhoto.portrait .itemInr {
  margin-right: 40%;
}
.historyBlock .history .historyMain .item.artistPhoto .itemInr .pic {
  border-radius: 0 min(3vw, 15px) min(3vw, 15px) 0;
}
.historyBlock .history .historyMain .item.artistPhoto .itemInr .baloon {
  right: 0;
  transform: translate(10%, -120%);
}
.historyBlock .history .historyMain .item.artistPhoto .itemInr .baloon::before {
  left: 40%;
  translate: -50% 100%;
  border-width: 20px 20px 0 0;
  transform: skew(-25deg);
}
.historyBlock .history .historyMain .item.artistPhoto .itemInr .baloon::after {
  left: 40%;
  border-width: 17.6px 17.6px 0 0;
  translate: calc(-50% - 0.1px) 100%;
  transform: skew(-25deg);
}

.historyBlock .history .historyPcRight .item.artistPhoto .itemInr {
  margin-left: 20%;
}
.historyBlock .history .historyPcRight .item.artistPhoto.portrait .itemInr {
  margin-left: 40%;
}
.historyBlock .history .historyPcRight .item.artistPhoto .itemInr .pic {
  border-radius: min(3vw, 15px) 0 0 min(3vw, 15px);
}
.historyBlock .history .historyPcRight .item.artistPhoto .itemInr .baloon {
  left: 0;
  transform: translate(10%, -120%);
}
.historyBlock .history .historyPcRight .item.artistPhoto .itemInr .baloon::before {
  right: 40%;
  translate: 50% 100%;
  border-width: 20px 0 0 20px;
  transform: skew(25deg);
}
.historyBlock .history .historyPcRight .item.artistPhoto .itemInr .baloon::after {
  right: 40%;
  border-width: 17.6px 0 0 17.6px;
  translate: calc(50% + 0.1px) 100%;
  transform: skew(25deg);
}


.historyBlock .history .item.live .itemInr {
  width: 60%;
  position: relative;
}
.historyBlock .history .item.live .itemInr:has(.pic)::after {
  content: "Live";
  display: block;
  border: #000 solid 1px;
  background-color: #000;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  padding: min(2vw, 10px) min(6vw, 30px);
  border-radius: 50%;
  font-size: min(3.4vw, 16px);
  transform: translate(-5%, -5%);
}
.historyBlock .history .item.live .pic {
  display: block;
  position: relative;
  line-height: 0;
  width: 100%;
  border-radius: 100vw;
  aspect-ratio: 22/15;
  overflow: hidden;
  margin-bottom: min(6vw, 30px);
}
.historyBlock .history .item.live .pic.noImg {
  aspect-ratio: auto;
  height: min(8vw, 40px);
}
.historyBlock .history .item.live .pic img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.historyBlock .history .item.live .liveSchedule dt {
  background-color: #000;
  color: #fff;
  font-size: min(3.2vw, 14px);
  line-height: 1.6;
  padding: min(1vw, 5px) min(2vw, 10px);
}
.historyBlock .history .item.live .liveSchedule dd + dt {
  margin-top: min(6vw, 30px);
}
.historyBlock .history .item.live .liveSchedule dd {
  margin-top: min(2vw, 10px);
  line-height: 2;
}
.historyBlock .history .item.live .liveSchedule dd span {
  font-size: 0.75em;
}


@media screen and (min-width: 1281px) {
  .historyBlock .history .historyMain .item.artistPhoto .itemInr .pic,
  .historyBlock .history .historyPcRight .item.artistPhoto .itemInr .pic {
    border-radius: min(3vw, 15px);
  }
}
@media screen and (min-width: 996px) {
}
@media screen and (max-width: 995px) {

  .thumbNav li {
    width: 48%;
  }
  .thumbNav li a {
    aspect-ratio: 21 / 10;
  }
  .thumbNav li a .navSlide .imgWrap {
    position: relative;
    aspect-ratio: 21 / 10;
    width: 100%;
  }

  .floatNav {
    width: 95%;
    max-width: 520px;
    /* padding: min(1.5vw, 10px) min(10vw, 60px); */
    padding: min(1.5vw, 10px) min(7vw, 60px);
  }
  .floatNav ul {
    flex-wrap: wrap;
    gap: min(1vw, 5px) 0;
  }
  .floatNav ul li {
    /* width: 20%; */
    width: 15.8%;
    text-align: center;
  }

  .historyBlock h2 {
    padding: 0 min(6vw, 30px);
    text-align: left;
  }

  .historyBlock .history {
    justify-content: end;
  }
  .historyBlock .history::before {
    left: 8%;
  }

  .historyBlock .history .historyPcRight {
    width: 92%;
  }
  .historyBlock .history .historyMain {
    display: none;
  }
  .historyBlock .history .item {
    margin-top: 0 !important;
    margin-bottom: min(12vw, 80px);
  }
  .historyBlock .history .item:has(+ .artistPhoto) {
    margin-top: 0 !important;
    margin-bottom: min(20vw, 120px);
  }
  .historyBlock .history .item:has(+ .release) {
    margin-top: 0 !important;
    margin-bottom: min(16vw, 100px);
  }
  .historyBlock .history .item.mvLink::before,
  .historyBlock .history .item.release::before {
    width: 16%;
  }
  .historyBlock .history .item.release::before {
    top: min(22vw, 120px);
  }
  .historyBlock .history .item.release::after {
    top: calc(min(22vw, 120px) - 6px);
  }
  .historyBlock .history .item.live::before {
    width: 8.5%;
  }
  .historyBlock .history .item.live:has(.pic)::before {
    top: min(26vw, 120px);
  }
  .historyBlock .history .item.live:has(.pic)::after {
    top: calc(min(26vw, 120px) - 6px);
  }
  .historyBlock .history .item:not(.mvLink) .itemInr {
    margin-bottom: min(12vw, 80px);
  }
  .historyBlock .history .item.mvLink a,
  .historyBlock .history .item.release .itemInr {
    margin-left: 18%;
  }
  .historyBlock .history .item.mvLink a {
    width: 70%;
    max-width: 320px;
  }
  .historyBlock .history .item.mvLink .itemInr {
    padding-right: min(9vw, 60px);
  }
  .historyBlock .history .item.mvLink .itemInr::before {
    width: 100%;
  }
  .historyBlock .history .item.mvLink .itemInr .arrow {
    right: min(2vw, 16px);
    transform: translate(0, -50%);
  }
  .historyBlock .history .item.release .itemInr {
    width: 50%;
  }

  .historyBlock .history .item.live .itemInr {
    width: 80%;
  }
}