@charset "utf-8";
/* common
------------------------------- */
:root {
	--headerHeight: 60px;
	--innerXL: 1680px;
	--innerL: 1440px;
	--innerM: 1200px;
	--innerS: 960px;
	--radius: 12px;
	--color-txt: #333;
}
@media screen and (min-width: 960px) {
	:root {
		--headerHeight: 80px;
	}
}

body {
	background-color: #000;
	font-family: "LINE Seed JP", sans-serif;
	font-optical-sizing: auto;
}



/* component
------------------------------- */
.inner {
	width: 90%;
	margin: 0 auto;
}

/* sec */
.sec__title {
	margin-top: 40px;
	margin-bottom: 40px;
	text-align: center;
}
.sec__title {
	text-align: center;
	font-size: min(14vw, 80px);
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}
.txt__anime {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-transform: uppercase;
}
.txt__anime.is-active {
	--skewX: 0deg;
	--x: 0;
}
.text01,
.text02,
.text03 {
	transition: transform 0.4s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.text02,
.text03 {
	position: absolute;
}
.text01 {
	mask-image: linear-gradient(to bottom, #000 33.3%, transparent 33.3%);
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}
.text02 {
	mask-image: linear-gradient(to bottom, transparent 33.3%, #000 33.3%, #000 66.6%, transparent 66.6%);
	transform: translateX(var(--x, 110%)) skewX(var(--skewX, -40deg));
}
.text03 {
	mask-image: linear-gradient(to bottom, transparent 66.6%, #000 66.6%);
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}

/* link */
.anc__point {
	margin-top: calc(var(--headerHeight) * -1 + 40px);
	padding-top: var(--headerHeight);
}

/* inview */
.js-inview {
	opacity: 0;
	transition: opacity 1.4s 0s ease;
}
.js-inview.fadein {
	opacity: 1;
}


/* header
------------------------------- */
.header__logo a {
	padding: 8px 0;
}
.header__logo img {
	width: auto;
}

/* l-gnav
------------------------------- */
.gnav__link {
	font-weight: 700;
}
@media screen and (max-width: 1365px) {
	.soltandpepper .gnav__link {
		font-size: 28px;
	}
}


/* bg */
.bg__contents {
	position: fixed;
	top: var(--headerHeight);
	left: 0;
	z-index: -2;
	width: 100vw;
	height: calc(100vh - var(--headerHeight));
	background-color: #000;
	background-image: url(../img/2026/bg_port.webp);
	background-repeat: no-repeat;
	background-size: cover;
	isolation: isolate;
	animation: hue 18s linear infinite;
}
.bg__contents::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}
.color__gradient {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	background-color:hsla(0,100%,50%,0);
	background-image:
		radial-gradient(at 100% 50%, hsla(289,46%,37%,1) 0px, transparent 50%),
		radial-gradient(at 0% 50%, hsla(37,100%,47%,1) 0px, transparent 50%),
		radial-gradient(at 0% 0%, hsla(355,100%,45%,1) 0px, transparent 50%),
		radial-gradient(at 100% 0%, hsla(144,100%,30%,1) 0px, transparent 50%),
		radial-gradient(at 100% 100%, hsla(215,82%,34%,1) 0px, transparent 50%),
		radial-gradient(at 0% 100%, hsla(53,100%,50%,1) 0px, transparent 50%);
	mix-blend-mode: color;
}
@media screen and (orientation: landscape) {
	.bg__contents {
		background-image: url(../img/2026/bg_land.webp);
	}
	.bg__contents::before {
		background-color: rgba(0, 0, 0, 0.65);
	}
}
@keyframes hue {
to { filter: hue-rotate(360deg); }
}

/* l-main
------------------------------- */
.l-main {
	display: flex;
	flex-direction: column;
	row-gap: 64px;
	margin: 60px auto 64px;
}
@media screen and (min-width: 960px) {
	.l-main {
		margin: 80px auto 80px;
		row-gap: 80px;
	}
}

/* title
------------------------------- */
.title__wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100svh - var(--headerHeight));
}
.title__img {
	width: 80%;
	max-width: var(--innerM);
	margin-left: auto;
	margin-right: auto;
}
.title__img figure {
	display: none;
}
@media screen and (orientation: portrait) {
	.title__img .port {
		display: block;
	}
}
@media screen and (orientation: landscape) {
	.title__img .land {
		display: block;
	}
}
.title__img svg {
	width: 100%;
}
.svg__txt {
	stroke:#fff;
	stroke-dasharray: 2000;
	stroke-dashoffset: 0;
	stroke-width: 1;
	fill:#fff;
	animation: showTxt 2s ease-in-out 0.6s both;
}
.svg__line {
	stroke:#fff;
	stroke-dasharray: 2000;
	stroke-dashoffset: 0;
	stroke-width: 2;
	animation: showLine 2s ease-in-out 0.6s both;
}
@keyframes showTxt {
	0% {
		stroke-dashoffset: 2000;
		fill: transparent;
	}
	50% {
		stroke-opacity: 1;
		fill: transparent;
	}
	100% {
		stroke-dashoffset: 0;
		stroke-opacity: 0;
		fill: #fff;
	}
}
@keyframes showLine {
	0% {
		stroke-dashoffset: 2000;
		stroke-width: 1;
	}
	50% {
		stroke-width: 1;
	}
	100% {
		stroke-dashoffset: 0;
		stroke-width: 2;
	}
}



/* artist
------------------------------- */
.artist__wrap {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: var(--innerXL);
	margin-left: auto;
	margin-right: auto;
}
.artist__list {
	display: flex;
	flex-direction: column;
	row-gap: 8vh;
}
.artist__img {
	overflow: hidden;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--radius);
}
.artist__name {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.artist__title {
	transform: skewX(-20deg) rotate(-5deg) scale(1.1);
	margin-top: -16px;
	padding: 8px 0;
	background: linear-gradient(45deg, #ffe200, #f29600, #e50012, #7f318e, #0f4b9f, #009b3e, #ffe200);
	background-size: 200% 200%;
	animation: bg-gradient 30s ease infinite;
	font-size: min(7vw, 40px);
	text-align: center;
	line-height: 1.4;
	font-weight: 800;
}
@keyframes bg-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.artist__title span {
	font-size: min(5vw, 24px);
}
.band__member {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 8px;
	transform: skewX(-20deg) rotate(-5deg);
	margin-top: 16px;
	margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
	.artist__wrap {
		overflow: hidden;
	}
	.band__member {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (min-width: 768px) {
	.artist__wrap {
		padding-left: 3%;
		padding-right: 3%;
	}
	.artist__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 2%;
	}
	.artist__listitem:nth-of-type(even) {
		padding-top: 100px;
	}
	.artist__title {
		transform: skewX(-20deg) rotate(-5deg) scale(1);
		margin-top: -40px;
		font-size: min(3.5vw, 36px);
	}
	.artist__title span {
		font-size: min(4vw, 24px);
	}
}




/* info
------------------------------- */
.info__wrap {
	max-width: var(--innerM);
	margin-left: auto;
	margin-right: auto;
}
.info__sec {
	display: flex;
	flex-direction: column;
	row-gap: 40px;
}
.info__contents{
	width: 100%;
	padding: 32px 5% 32px;
	background-color: var(--color-wht);
	border-radius: var(--radius);
	color: var(--color-txt);
}
.info__title {
	margin-bottom: 24px;
	text-align: center;
	font-size: 18px;
}
.info__detail {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}
.info__list {
	display: flex;
	width: 100%;
}
.info__dt {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 88px;
	padding: 0.2em 0;
	border: 1px solid var(--color-txt);
	text-align: center;
}
.info__dd {
	align-self: center;
	padding-left: 16px;
}
.info__dd span {
	display: block;
}
.info__dd a {
	color: var(--color-txt);
}
.info__dd a[target=_blank] {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.info__dd a[target=_blank]::after {
	display: inline-block;
	content: "→";
	transform: rotate(-45deg);
	margin-left: 4px;
}
@media screen and (min-width: 960px) {
	.info__wrap .info__sec{
		display: flex;
		flex-direction: row;
		-moz-column-gap: 2.5%;
			column-gap: 2.5%;
	}
	.info__dd span {
		display: inline;
	}
}


/* access
------------------------------- */
.access__wrap {
	max-width: var(--innerM);
	margin-left: auto;
	margin-right: auto;
}
.access__contents {
	display: flex;
	flex-direction: column;
	row-gap: 40px;
}
.access__contents > * {
	width: 100%;
}
.map__wrap {
	margin-bottom: 0;
}
@media screen and (min-width: 960px) {
	.access__contents {
		flex-direction: row;
		-moz-column-gap: 2.5%;
			column-gap: 2.5%;
	}
	.map__wrap {
		height: auto;
		min-height: 280px;
	}
}


/* caution
------------------------------- */
.caution__wrap .sec__title {
	margin-bottom: 0;
}
.sec__subtitle {
	margin-bottom: 40px;
	text-align: center;
	font-size: clamp(18px, 4vw, 21px);
	font-weight: 700;
}
.caution__sec {
	display: flex;
	flex-direction: column;
	row-gap: 40px;
	max-width: var(--innerM);
	margin-left: auto;
	margin-right: auto;
}
.caution__contents {
	width: 100%;
	padding: 32px 5%;
	background-color: var(--color-wht);
	border-radius: var(--radius);
	color: var(--color-txt);
}
.caution__title {
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 24px;
}
.caution__list {
	list-style-type: none;
}
.caution__list li {
	padding: 24px 0;
	border-top: 1px solid #ccc;
}
.caution__list p {
	padding: 8px 0;
}
.caution__list p:first-of-type,
.caution__list li:first-of-type {
	padding-top: 0;
	border: none;
}

.caution__list p:last-of-type,
.caution__list li:last-of-type {
	padding-bottom: 0;
}
.step__arrow {
	position: relative;
}
.step__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 1px;
	background-color: #ccc;
}
.step__arrow span {
	display: inline-block;
	position: relative;
	z-index: 1;
	margin-left: 1em;
	background-color: var(--color-wht);
}


/* reserve
------------------------------- */
.reserve__wrap {
	max-width: var(--innerM);
	margin-left: auto;
	margin-right: auto;
}
.reserve__contenst {
	padding: 40px 5%;
	background-color: #fff;
	border-radius: var(--radius);
	color: var(--color-txt);
}
.reserve__wrap .form__txt {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
	list-style-type: disc;
	margin-bottom: 40px;
	margin-left: 1em;
}
.reserve__wrap .form__txt a {
	color: var(--color-txt);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.reserve__wrap textarea,
.reserve__wrap input {
	border: 1px solid #aaa;
	border-radius: 6px;
}
.reserve__wrap textarea:focus,
.reserve__wrap input:focus {
	border: 1px solid #008AE4;
}
.reserve__wrap input[type=submit] {
	border: none;
}
.reserve__wrap .c-checkbox input:focus + .wpcf7-list-item-label::before,
.reserve__wrap .c-agree__check input:focus::before {
	border-color: #008AE4;
}
body:not(.page-template-page-form) .grecaptcha-badge {
	visibility: hidden;
	opacity: 0;
	z-index: initial;
	transition: all 0.3s !important;
}
body:not(.page-template-page-form) .grecaptcha-badge.visible {
	visibility: visible;
	opacity: 1;
}
.reserve__wrap h3 strong {
	font-weight: 700;
}
.reserve__wrap a {
	color: initial;
	text-decoration: underline;
}


/* thanks
------------------------------- */
.reserve__wrap .p-thanks__title {
	padding-left: 0;
	border-left: navajowhite;
}
.reserve__wrap .c-btn--yel {
	max-width: 800px;
	border-radius: 6px;
	text-decoration: none;
}