@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tac+One&display=swap');
/* MODERN RESET
--------------------------------------------------- */
@layer{*,*::after,*::before{box-sizing:border-box}:focus-visible{outline-offset:3px}html{-webkit-text-size-adjust:none;text-size-adjust:none}html{line-height:1.5}html{scrollbar-gutter:stable}h1{font-size:2em;margin-block:.67em}abbr[title]{cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media (forced-colors:active){mark{color:HighlightText;background-color:Highlight}}audio,iframe,img,svg,video{max-block-size:100%;max-inline-size:100%}fieldset{min-inline-size:0}label:has(+input:not([type="radio"],[type="checkbox"]),select,textarea){display:block}textarea:not([rows]){min-block-size:6em}button,input,select,textarea{font-family:inherit;font-size:inherit}[type="search"]{-webkit-appearance:textfield}@supports (-webkit-touch-callout:none){[type="search"]{border:1px solid -apple-system-secondary-label;background-color:canvas}}input:where([type="tel"],[type="url"],[type="email"],[type="number"]):not(:placeholder-shown){direction:ltr}table{border-collapse:collapse;border:1px solid}th,td{border:1px solid;padding:.25em .5em;vertical-align:top}::backdrop{background:oklch(0% 0 0 / .3)}dialog,[popover],dialog::backdrop{opacity:0;transition:opacity 150ms ease-out,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog[open],:popover-open,dialog[open]::backdrop{opacity:1}@starting-style{dialog[open],:popover-open,dialog[open]::backdrop{opacity:0}}[hidden]:not([hidden="until-found"]){display:none!important}img{display:block}summary{cursor:default}iframe{border:none}@supports(position-area:block-end span-inline-end){[popover]{margin:0;position-area:block-end span-inline-end}}}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,li{margin:0;padding:0;}
ul,ol{list-style:none;}
html:focus-within{scroll-behavior:smooth;}
body{min-height:100dvh;text-rendering:optimizeSpeed;line-height:1.5;position: relative;}
a:not([class]){text-decoration-skip-ink:auto;}
img,picture,svg,video{max-inline-size: 100%; block-size: auto;display: block;}
input,button,textarea,select{font:inherit;}
@media(prefers-reduced-motion:reduce){
	html:focus-within{scroll-behavior:auto;}
	*,
	*::before,
	*::after{animation-duration:.01ms !important;
			animation-iteration-count:1 !important;
			transition-duration:.01ms !important;
			scroll-behavior:auto !important;}
	}
html {font-size: 62.5%;}
table,th,td{border-width: 0!important;}
.contents > :is(h1,h2,h3,h4,h5){ font-size: 100%;}
* { min-height: 0; min-height: 0; }

/* VARIABLES
--------------------------------------------------- */
:root {
	--font-sans: "Noto Sans JP", "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	--font-serif: "Noto Sans JP", '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	--font-display: "Tac One", sans-serif;
	--color-text: #FFF;
	--color-link: #d2273a;
	--color-link-sub: #CCC;
	--color-primary: #d2273a;
	--color-secondary: #eee951;
	--color-accent: #20ccd4;
	--color-accent-sub: #f9e927;
	--color-box-bg: rgba(22, 2, 1, .85);
	--color-sub: #CCC;
	--color-red: #f00;
	--corner-radius: .5em;
	--txt-lineheight: 1.6;
	--transition-base: 0.3s ease;
	--opacity-clear: 0.75;
	--btn-color: #d2273a;
	--btn-hover: #b50218;
	--btn-text-color: #FFF;
	--btn-radius: 2em;
	--btn-padding-y: 0.5em;
	--btn-padding-x: 1em;
	--btn-font-size: 90%;
	--btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	--btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35);
	--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.6);
}

/* FADE IN — @keyframes はネスト不可のためグローバルに定義
--------------------------------------------------- */
@keyframes fadein {
	0% {
		transform: translateY(100px) scale(0.8);
		opacity: 0;
	}
	80%, 100% {
		opacity: 1;
	}
	100% {
		transform: translateY(0) scale(1.0);
	}
}

/* CONTENTS
--------------------------------------------------- */
.contents {
	width: 100%;
	max-inline-size: 1200px;
	min-inline-size: 320px;
	margin-inline: auto;
	background: linear-gradient(135deg, #000, #482a66);
	background-attachment: fixed;
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: clamp(1.2rem, 0.909rem + 1.45vw, 2rem);
	font-weight: normal;
	line-height: 1.8;
	position: relative;
	text-align: center;
	z-index: 1;

	/* COMMON
	--------------------------------------------------- */
	& a {
		display: inline-block;
		color: var(--color-link);
		text-decoration: none;
		transition: opacity var(--transition-base);

		&:visited { color: var(--color-link); text-decoration: none; }
		&:hover { opacity: var(--opacity-clear); text-decoration: underline; }

		&.link {
			display: inline-block;
			padding-left: 1em;
			font-weight: 600;
			text-indent: -1em;
			word-break: break-all;

			&::before,
			&:hover::before {
				content: '';
				display: inline-block;
				width: 0;
				height: 0;
				margin: 0 0 0 5px;
				padding: 0 5px 0 0;
				border-style: solid;
				border-width: 5px 0 5px 5px;
				border-color: transparent transparent transparent var(--color-link);
			}
			&::after {
				content: '';
				display: inline-block;
				width: .8em;
				height: .8em;
				mask-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%3E%20%3Cpath%20d%3D%22M432%2C320h-32c-8.84%2C0-16%2C7.16-16%2C16v112H64V128h144c8.84%2C0%2C16-7.16%2C16-16v-32c0-8.84-7.16-16-16-16H48C21.49%2C64%2C0%2C85.49%2C0%2C112v352c0%2C26.51%2C21.49%2C48%2C48%2C48h352c26.51%2C0%2C48-21.49%2C48-48h0v-128c0-8.84-7.16-16-16-16ZM488%2C0h-128c-21.37%2C0-32.05%2C25.91-17%2C41l35.73%2C35.73-243.73%2C243.64c-9.39%2C9.36-9.42%2C24.55-.06%2C33.94.02.02.04.04.06.06l22.67%2C22.63c9.36%2C9.39%2C24.55%2C9.42%2C33.94.06.02-.02.04-.04.06-.06l243.61-243.68%2C35.72%2C35.68c15%2C15%2C41%2C4.5%2C41-17V24c0-13.25-10.75-24-24-24Z%22%2F%3E%3C%2Fsvg%3E');
				margin: 0 0 0 .25em;
				background: var(--color-link);
			}

			@media (max-width: 768px) {
				&::before,
				&:hover::before {
					border-width: 3px 0 3px 3px;
				}
			}
		}

		/* BUTTON BASE
		--------------------------------------------------- */
		&.btn-ticket {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.4rem;
			min-height: 44px;
			margin: 0 auto;
			padding: var(--btn-padding-y) var(--btn-padding-x);
			border-radius: var(--btn-radius);
			cursor: pointer;
			font-size: var(--btn-font-size);
			font-weight: 600;
			text-decoration: none;
			transition:
				background-color 0.18s ease-out,
				box-shadow 0.18s ease-out,
				transform 0.12s ease-out;
			white-space: nowrap;

			&[disabled],
			&[aria-disabled="true"] {
				opacity: 0.25;
				cursor: not-allowed;
				pointer-events: none;
				box-shadow: none;
				transform: none;
			}
		}
	}

	/* --PRIMARY BUTTON-- */
	& a.btn-ticket-primary {
		max-width: 600px;
		background: var(--btn-color);
		color: var(--btn-text-color);
		box-shadow: var(--btn-shadow);
		position: relative;

		&:visited { background: var(--btn-color); color: var(--btn-text-color); }

		& span::before {
			content: '';
			width: 1.4em;
			height: 1.4em;
			background: #FFF;
			border-radius: 50%;
			position: absolute;
			top: 0;
			bottom: 0;
			right: .8em;
			margin: auto;
		}
		& span::after {
			content: '';
			width: .5em;
			height: .5em;
			border-top: 3px solid var(--btn-color);
			border-right: 3px solid var(--btn-color);
			transform: rotate(45deg);
			position: absolute;
			top: 0;
			bottom: 0;
			right: 1.3em;
			margin: auto;
		}
		&:hover {
			background: var(--btn-hover);
			box-shadow: var(--btn-shadow-hover);
			transform: translateY(-1px);

			& span::after {
				content: '';
				border-top: 3px solid var(--btn-hover);
				border-right: 3px solid var(--btn-hover);
			}
		}
		&:active {
			box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
			transform: translateY(0);
		}
		&:focus-visible {
			outline: none;
			box-shadow: var(--btn-shadow-hover), var(--focus-ring);
		}
	}

	/* --SECONDARY BUTTON-- */
	& a.btn-ticket-secondary {
		max-width: 480px;
		background: var(--color-secondary);
		border: 2px solid var(--btn-color);
		color: #000;

		&:hover {
			background: var(--btn-color);
			border: 2px solid var(--color-secondary);
			color: #FFF;
			transform: translateY(-1px);
		}
		&:active {
			opacity: .6;
			transform: translateY(0);
		}
		&:focus-visible {
			outline: none;
			box-shadow: var(--focus-ring);
		}
	}

	/* --TERTIARY BUTTON-- */
	& a.btn-ticket-tertiary {
		color: var(--btn-color);
		text-decoration: underline !important;

		&:hover {
			opacity: .6;
			transform: translateY(-1px);
		}
	}

	& .no-pc {
		display: none;
		@media (max-width: 768px) { display: block; }
	}
	& br.no-pc {
		display: none;
		@media (max-width: 768px) { display: inline; }
	}
	& .no-sp {
		display: block;
		@media (max-width: 768px) { display: none; }
	}
	& .tax { padding: 0 0 0 .15em; color: #CCC; font-size: 80%; font-weight: normal; }
	& .red { color: var(--color-red) !important; }
	& em { color: var(--color-accent); font-style: normal; font-weight: bold; }
	& strong { font-style: normal; font-size: 120%; font-weight: bold; line-height: 150%; }
	& .strikethrough { color: var(--color-sub); text-decoration: line-through; }
	& .txt-l { text-align: left !important; }
	& .txt-r { text-align: right !important; }
	& .txt-80 { font-size: 80%; }
	& .txt-90 { font-size: 90%; }
	& .txt-120 { font-size: 120%; }

	& .caution {
		display: block;
		color: var(--color-sub);
		margin: .5em 0 0 1em;
		font-size: 80%;
		font-weight: normal;
		line-height: 1.4;
		text-indent: -1em;

		&::before { content: "※"; color: #DDD; }

		@media (max-width: 499px) {
			padding: .25em 0 0 1em;
		}
	}

	& .copyright {
		color: #999;
		font-size: 80%;
		position: absolute;
		right: 12px;
		bottom: 10%;
		z-index: 1;

		@media (max-width: 768px) {
			right: 8px;
			bottom: 16px;
		}
	}

	& p + p {
		margin-top: .5em;

		@media (max-width: 768px) {
			margin-top: .25em;
		}
	}

	/* HEADING
	--------------------------------------------------- */
	& h2 {
		color: var(--color-secondary);
		font-feature-settings: "palt";
		font-optical-sizing: auto;
		font-family: var(--font-display);
		font-size: 600%;
		font-style: normal;
		font-weight: 400;
		line-height: 1;
		text-align: center;
		position: relative;

		& span {
			display: block;
			color: #FFF;
			font-size: 2rem;
			font-weight: 400;
			letter-spacing: 0.5em;
			line-height: 1;
			text-align: center;
			text-indent: 0.5em;
		}

		@media (max-width: 480px) {
			font-size: 400%;
		}
	}

	& h3 {
		display: inline-block;
		width: 100%;
		margin: 0 auto 1em;
		padding: .5em 2em;
		background: linear-gradient(to right, #f97316, #f9e927);
		border-top: 2px solid #FFF;
		border-bottom: 2px solid #FFF;
		color: #000;
		font-size: 90%;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 1;
		text-indent: 0;
		transform: skewX(-10deg);

		& span {
			display: inline-block;
			transform: skewX(10deg);
		}
	}

	/* SCHEDULE
	--------------------------------------------------- */
	& .shedule-status {
		display: inline-block;
		margin: 0 8px 0 0;
		padding: 8px 1em;
		border-radius: 2px;
		font-size: 90%;
		font-weight: bold;
		line-height: 1;
		position: relative;
		text-align: center;
	}
	& .advance { background: #d2273a; color: #000; }
	& .public { background: #CCC; color: #000; }
	& .soldend { background: #000; color: #666; }

	/* FADE IN
	--------------------------------------------------- */
	& .fadein {
		animation: fadein 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	/* LAYOUT
	--------------------------------------------------- */
	& .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding-block: clamp(2rem, 5vw, 6rem);
		gap: clamp(3rem, 2.28rem + 3vw, 6rem);
	}

	& .content-item {
		display: grid;
		width: 100%;
		margin: 0 auto;
		padding-inline: max(1.6rem, calc((100% - 800px) / 2));
		position: relative;
		gap: clamp(3.2rem, 2.4rem + 2vw, 4.8rem);

		@media (max-width: 768px) {
			padding-inline: clamp(1.6rem, 5vw, 4rem);
		}
	}

	/* HERO
	--------------------------------------------------- */
	& .hero {
		position: relative;
		z-index: 0;
		background: #d2273a url("../images/bg.gif") center center no-repeat;
		background-attachment: fixed;
	}

	& .mv {
		max-width: 600px;
		width: 100%;
		margin: 0 auto;

		@media (max-width: 768px) {
			max-inline-size: 100%;
		}
	}

	/* ABOUT
	--------------------------------------------------- */
	& .about-box {
		padding: 0 1em;
		text-align: left;
	}

	& .shedule-list {
		display: grid;
		gap: 1.6em;

		& div + div {
			border-top: 1px dotted #999;
			padding-top: 1.6em;
		}
	}

	& .shedule-title {
		color: var(--color-accent-sub);
		font-size: 120%;
	}

	& p.inner-wrap {
		text-align: left;

		&::first-line { text-align: center; }
	}

	/* FLOW
	--------------------------------------------------- */
	& .flow {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		gap: clamp(1rem, 0.1rem + 2.4vw, 3rem);

		& > li {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 0 auto;
			padding: clamp(1em, 0.8em + 0.6vw, 1.5em)
			         clamp(2em, 1.5em + 1.2vw, 3em);
			background: linear-gradient(135deg, #000, #482a66);
			border: 1px solid #666;
			text-align: left;
			position: relative;
			gap: 1em;

			&::after {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 20px 30px 0 30px;
				border-color: #999 transparent transparent transparent;
				position: absolute;
				left: 46%;
				bottom: -20px;
				display: block;
			}
			&:last-child::after { content: none; }

			@media (max-width: 768px) {
				padding-inline: 1em;

				&::after {
					border-width: 10px 20px 0 20px;
					bottom: -10px;
				}
			}
		}
	}

	& .flow-title {
		display: grid;
		grid-template-columns: 80px 1fr;

		@media (max-width: 499px) {
			grid-template-columns: 70px 1fr;
		}
	}

	& .square {
		display: grid;
		margin: 0 1em 0 0;
		padding: 2px 0;
		background: var(--color-secondary);
		border-radius: 3px;
		color: #000;
		font-size: 80%;
		font-weight: bold;
		line-height: 100%;
		place-items: center;
		position: relative;
	}

	& .step-att {
		line-height: 1.35;
		font-weight: 600;

		@media (max-width: 499px) {
			font-size: 90%;
		}
	}

	& .watch {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		gap: 5px;

		& li {
			width: calc(calc(100% - 10px) / 3);
		}
	}

	& .caution.flow-caution {
		display: block !important;
		color: var(--color-secondary) !important;

		&::before { content: "※"; color: var(--color-secondary); }
	}

	/* NOTES
	--------------------------------------------------- */
	& .notes {
		width: 100%;
		margin: 0 auto;

		& li {
			margin: 0;
			padding: 0 0 0 1em;
			background: transparent;
			color: var(--color-sub);
			font-size: 90%;
			line-height: 1.5;
			text-indent: -1em;
			text-align: left;

			&::before { content: "※"; }
			& a { text-indent: 0; }
			& + li { margin: .5em 0 0; }
		}
	}

	/* BUTTON AREA
	--------------------------------------------------- */
	& .btn-area {
		display: grid;
		justify-items: center;
		align-items: start;
		width: 100%;
		margin: 0 auto;
		padding: 1em;
		background: linear-gradient(135deg, #000, #482a66);
		border: 2px solid var(--color-secondary);
		gap: 1em;

		& > div {
			width: 100%;
			max-width: 600px;
		}
	}

	/* CONTACT
	--------------------------------------------------- */
	& .contact {
		& li {
			width: 100%;
			color: var(--color-sub);
			font-size: 90%;
			line-height: 1.4;
			text-align: left;

			& + li { margin-top: 1em; }
		}
	}
}