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

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');

html, body {
	min-height:100%;
    overflow-x:hidden;
}
body {
	position: relative;
	background: #000;
	color: #f1f1f1;
	padding: 0;
	margin: 0;
	font-family: "BIZ UDPGothic", sans-serif;
	font-size: clamp(12px, 1.2vw, 14px);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.content {
	min-height:100vh;
}
.demo-1 {
	--color-text: #fff;
	--color-bg: #000;
	--color-link: #f9d77e;
	--color-link-hover: #fff;
	--color-info: #efc453;
	--glitch-width: 100vw;
	--glitch-height: 100vh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
	--time-anim: 6s;
	--delay-anim: 3s;
	--blend-mode-1: none;
	--blend-mode-2: none;
	--blend-mode-3: none;
	--blend-mode-4: overlay;
	--blend-mode-5: overlay;
	--blend-color-1: transparent;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: #72a0bc;
	--blend-color-5: #afa749;
}
.glitch__img {
	background: url(../images/background.jpg) no-repeat 50% 0;
}

/*  */
.contensContainer {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 auto;
  padding: 0 30px;
  overflow: auto;
  z-index: 10;
}
.mainimg {
	display: block;
	padding: 0;
	margin: 25px auto 0;
	width: 100%;
	max-width: 488px;
}
.mainimg img {
	width: 100%;
	height: auto;
}

.msg {
	border-top: 17px rgba(67, 91, 148, .6) solid;
	padding: 26px 0;
	margin: 0 auto 15px;
	max-width: 800px;
	font-size: clamp(14px, 1.4vw, 18px);
	line-height: 1.75;
	letter-spacing: 0.08em;
	text-align: left;
}

img.daytime {
	width: 100%;
	height: auto;
	max-width: 410px;
}

.members {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 65px auto 20px;
}
.members .list {
	flex: 0 0 280px;
	font-size: clamp(14px, 3vw, 26px);
	box-sizing: border-box;
}
/* 画像ラッパ */
.members .list .img,
.members .list .js-reveal-image {
  display: block;
  width: 100%;
}
.members .list .img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 280px;
}
.members .list .img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center top;
}
@media (max-width: 767px) {
  .members {
    gap: 12px;
  }
  .members .list {
    flex: 0 0 calc((100% - 12px) / 2);
  }

  img.daytime {
	max-width: 280px;
  }
}

.andmore {
	padding: 0 0 30px;
	font-size: clamp(10px, 1.2vw, 14px);
	color: #b8b8b8;
}
.andmore strong {
	display: block;
	font-size: clamp(20px, 3vw, 30px);
	color: #f1f1f1;
}

.ticketinfo {
	border-top: 17px rgba(67, 91, 148, .6) solid;
	border-bottom: 17px rgba(67, 91, 148, .6) solid;
	padding: 35px 0;
	font-size: clamp(12px, 1.4vw, 20px);
}
.ticketinfo a {
	display: inline-flex;
	margin: 10px auto;
	max-width: 600px;
	height: auto;
	transition: all .6s ease;
}
.goodsinfo a {
	display: inline-flex;
	margin: 35px auto 15px;
	max-width: 600px;
	height: auto;
	transition: all .6s ease;
}
.ticketinfo a img, .goodsinfo a img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.ticketinfo a:hover, .goodsinfo a:hover {
	transform: scale(1.04);
	transition: all .3s ease;
}

.cr {
	padding: 15px 0 40px;
	font-size: 10px;
	color: #a8a8a8;
	text-align: center;
}


/*  */
#loading {
	padding:20px;
	text-align:center;
}
.clear {
	clear:both;
}


.js-fadein {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(6px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(.22,1,.36,1),
    filter 1s ease;
  will-change: opacity, transform, filter;
}
.js-fadein.is-inview {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.js-fadein.delay-1 {
  transition-delay: 0.15s;
}
.js-fadein.delay-2 {
  transition-delay: 0.3s;
}
.js-fadein.delay-3 {
  transition-delay: 0.45s;
}

.js-reveal-image {
  position: relative;
  overflow: hidden;
}
.js-reveal-image img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(1.08);
  filter: blur(10px) brightness(0.9);
  transition:
    opacity 1.2s ease,
    transform 1.4s cubic-bezier(.22,1,.36,1),
    filter 1.2s ease;
  will-change: opacity, transform, filter;
}
/* 上から下に薄く開く感じ */
.js-reveal-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f3f3f3;
  transform: translateY(0);
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
  z-index: 2;
  pointer-events: none;
}
.js-reveal-image.is-inview::after {
  transform: translateY(102%);
}
.js-reveal-image.is-inview img {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) brightness(1);
}
@media (prefers-reduced-motion: reduce) {
  .js-fadein,
  .js-reveal-image img,
  .js-reveal-image::after {
    transition: none;
    transform: none;
    filter: none;
    opacity: 1;
  }

  .js-reveal-image::after {
    display: none;
  }
}