/* カラー定義エリア。共通スタイルはここで管理します。 */
/* Dreamweaver側のCSS解析が新しめの構文に対応していない可能性があるため、警告が出る場合がある */
:root {
	/* 背景 */
	--page-max-width: 1024px;
	--page-min-width: 320px;
	--page-side-bg: url("../img/bg-side.jpg");
	/* 無彩色白 */
	--color-white: #ffffff;
	--color-white-alpha-1: #ffffffbf;
	--color-white-alpha-2: #ffffff80;
	--color-white-alpha-3: #ffffff40;
	--color-white-alpha-4: #ffffff0d;
	--color-white-alpha-5: #ffffff00;
	/* 無彩色黒 */
	--color-black: #000000;
	--color-black-alpha-1: #000000bf;
	--color-black-alpha-2: #00000080;
	--color-black-alpha-3: #00000040;
	--color-black-alpha-4: #00000000;

	/* 有彩色明系 */
	--color-light: #e5c9b8;
	/* 有彩色中暗系 */
	--color-dark-soft: #1f1b19;
	--color-dark-soft-alpha-1: #1f1b19bf;
	--color-dark-soft-alpha-2: #1f1b1980;
	/* 有彩色暗系 */
	--color-dark: #1a1614;
	--color-dark-alpha-1: #1a1614bf;
	--color-dark-alpha-2: #1a161480;
	--color-dark-alpha-3: #1a161440;
	--color-dark-alpha-4: #1a161400;

	/* アクセント系明 */
	--color-accent-soft: #ffe100;
	--color-accent-soft-alpha-1: #ffe100bf;
	--color-accent-soft-alpha-2: #ffe10080;
	/* アクセント系 */
	--color-accent: #ffb800;
	--color-accent-alpha-1: #ffb800bf;
	--color-accent-alpha-2: #ffb80080;
	--color-accent-alpha-3: #ffb80040;
	/* アクセント系暗 */
	--color-accent-dark: #ff6e00;
	--color-accent-dark-alpha-1: #ff6e00bf;
	--color-accent-dark-alpha-2: #ff6e0080;
	--color-accent-dark-alpha-3: #ff6e0040;

	/* 赤系 */
	--color-red: #d9483b;
	--color-red-alpha-1: #d9483bbf;
	--color-red-alpha-2: #d9483b80;
	--color-red-alpha-3: #d9483b40;
	/* 赤系追加 */
	--color-red-alpha-4: #ff6759;
	--color-red-alpha-5: #ff3f2ebf;
	--color-red-alpha-6: #b52b1fbf;

	/* フォント */
	--font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;

	/* 角丸 */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	background-color: var(--color-dark);
	background-image: var(--page-side-bg);
	background-repeat: repeat;
	background-position: center top;
	background-size: 768px auto;
	scroll-behavior: smooth;
	scroll-padding-top: 76px; /* アンカー移動時のヘッダー被り対策 */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	width: 100%;
	max-width: var(--page-max-width);
	min-width: var(--page-min-width);
	min-height: 100%;
	margin: 0 auto;
	background: var(--color-dark);
	color: var(--color-white);
	font-family: var(--font-serif);
	line-height: 1.8;
	overflow-x: hidden;
	box-shadow:
		0 0 1px var(--color-white-alpha-2),
		0 0 16px var(--color-black-alpha-2),
		0 0 64px var(--color-black-alpha-2);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a.is-coming-soon,
a.is-ended {
	position: relative;
	cursor: default;
	pointer-events: none;
}

a.is-coming-soon > img,
a.is-ended > img {
	filter: grayscale(100%);
	opacity: 0.45;
}

.button.is-coming-soon,
.button.is-ended {
	border-color: var(--color-white-alpha-3);
	background: var(--color-black-alpha-2);
	color: var(--color-white-alpha-3);
}

.button.is-coming-soon:hover,
.button.is-coming-soon:active,
.button.is-ended:hover,
.button.is-ended:active {
	transform: none;
}

a.is-coming-soon::after,
a.is-ended::after {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	padding: 5px 12px;
	border-radius: var(--radius-sm);
	background: var(--color-dark-soft-alpha-1);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

a.is-coming-soon::after {
	content: "準備中";
}

a.is-ended::after {
	content: "終了";
}

button {
	font: inherit;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-dark-soft-alpha-2);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--color-white-alpha-3);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 32px);
	margin: 0 auto;
	padding: 8px 0;
}

.site-header__logo {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 1 auto;
	width: 72px;
	min-width: 0;
	font-weight: 800;
	line-height: 1.05;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translateX(-8px);
}

.site-header__logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.site-nav {
	display: flex;
	flex: 0 0 auto;
	gap: 14px;
	align-items: center;
	font-size: 0.8rem;
	color: var(--color-light);
	white-space: nowrap;
	font-family: var(--font-sans);
}

.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	line-height: 1;
}

.site-nav__cta {
	position: relative;
	border-radius: var(--radius-sm);
	background:
		linear-gradient(var(--color-accent), var(--color-accent-dark-alpha-2)) padding-box,
		linear-gradient(
			180deg,
			var(--color-accent-soft),
			var(--color-accent-dark)
		) border-box;
	border: 1.5px solid transparent;
	color: var(--color-dark-soft);
	padding: 6px 12px;
	font-weight: 800;
}

.section {
	padding: 50px 0;
}

.section--dark {
	background: var(--color-dark-soft);
}

.section__inner {
	width: calc(100% - 32px);
	margin: 0 auto;
}

.section__head {
	margin-bottom: 28px;
}

.section__head::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 8px;
	background: linear-gradient(
		90deg,
		var(--color-accent),
		var(--color-accent-alpha-3),
		transparent
	);
}

.section--links .section__head::after {
	display: none;
}

.section__label {
	margin: 0 5px 3px;
	color: var(--color-accent);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-family: var(--font-sans);
}

.section__title {
	margin: 0;
	font-size: clamp(1.7rem, 1.2rem + 2.4%, 3rem);
	line-height: 1.25;
}

.section__text {
	margin: 1em 0.5em;
	color: var(--color-white-alpha-1);
}

.is-motion-enabled .js-scroll-reveal {
	opacity: 0;
	transform: translateX(-20px);
	transition:
		opacity 1s ease,
		transform 1s ease;
}

.is-motion-enabled .js-scroll-reveal.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.section__more {
	margin-top: 28px;
	text-align: center;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 285px;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid var(--color-accent-alpha-2);
	border-radius: var(--radius-md);
	color: var(--color-white);
	font-weight: 700;
	text-align: center;
	transition: transform 0.2s ease;
}

.button:hover {
	transform: scale(1.04);
}

.button:active {
	transform: scale(0.98);
}

.button--ghost {
	border-color: var(--color-white-alpha-2);
	color: var(--color-white);
}

.text-link {
	color: var(--color-accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.text-glow {
	text-shadow:
		0 0 8px var(--color-white-alpha-1),
		0 0 16px var(--color-red-alpha-1),
		0 0 24px var(--color-red-alpha-2),
		0 0 32px var(--color-red-alpha-3);
	animation: heroCatchGlowHeartbeat 1.8s ease-in-out infinite;
}

.site-footer {
	border-top: 1px solid var(--color-white-alpha-3);
	background: var(--color-dark);
	font-family: var(--font-sans);
}

.site-footer__inner {
	width: calc(100% - 32px);
	margin: 0 auto;
	padding: 28px 0;
}

.site-footer__text {
	margin: 0;
	color: var(--color-light);
	font-size: 0.75rem;
}

.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin: 20px 0;
	color: var(--color-light);
	font-size: 0.8rem;
	font-weight: bold;
}

.site-footer__spec {
	display: grid;
	gap: 8px;
	margin: 0 0 20px;
	color: var(--color-light);
	font-size: 0.8rem;
}

/* Dreamweaver側のCSS解析が新しめの構文に対応していない可能性があるため、警告が出る場合がある */
.site-footer__spec div {
	display: grid;
	grid-template-columns: 5em 28px 1fr;
	gap: 10px;
	align-items: center;
}

.site-footer__spec dt {
	color: var(--color-white);
	font-weight: 700;
	white-space: nowrap;
}

.site-footer__spec dd {
	display: contents;
}

.site-footer__spec dd::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--color-white-alpha-3);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background: var(--color-dark);
	animation: pageFadeCover 0.7s ease-out forwards;
	will-change: opacity;
}

body.page-top::before {
	animation-duration: 1.5s;
	animation-timing-function: ease-in;
}

@keyframes heroCatchGlowHeartbeat {
	0%,
	100% {
		text-shadow:
			0 0 8px var(--color-white-alpha-1),
			0 0 16px var(--color-red-alpha-1),
			0 0 24px var(--color-red-alpha-2),
			0 0 32px var(--color-red-alpha-3);
	}

	12% {
		text-shadow:
			0 0 12px var(--color-white),
			0 0 24px var(--color-red-alpha-4),
			0 0 40px var(--color-red-alpha-5),
			0 0 58px var(--color-red-alpha-6);
	}

	22% {
		text-shadow:
			0 0 8px var(--color-white-alpha-1),
			0 0 16px var(--color-red-alpha-1),
			0 0 24px var(--color-red-alpha-2),
			0 0 32px var(--color-red-alpha-3);
	}

	34% {
		text-shadow:
			0 0 10px var(--color-white-alpha-1),
			0 0 20px var(--color-red-alpha-4),
			0 0 32px var(--color-red-alpha-5),
			0 0 46px var(--color-red-alpha-6);
	}

	46% {
		text-shadow:
			0 0 8px var(--color-white-alpha-1),
			0 0 16px var(--color-red-alpha-1),
			0 0 24px var(--color-red-alpha-2),
			0 0 32px var(--color-red-alpha-3);
	}
}

@keyframes pageFadeCover {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}