/* ============================
   Credit Header
   ============================ */
.credit-header {
	position: relative;
	width: 100%;
	height: calc(176px * var(--scale-factor));
	padding: calc(24px * var(--scale-factor)) 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.header-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.header-container {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: start;
	height: calc(128px * var(--scale-factor));
}

.header-logo {
	height: 100%;
}

.header-logo a {
	display: block;
	height: 100%;
}

.header-logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

/* ============================
   Credit Section
   ============================ */
.credit-section {
	position: relative;
	width: 100%;
	background-color: var(--color-brown);
}

.credit-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.credit-bg img:first-child {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.credit-bg img:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: sepia(1) saturate(3) hue-rotate(10deg) brightness(0.8);
}

.credit-container {
	position: relative;
	z-index: 1;
	padding-top: calc(87px * var(--scale-factor));
	padding-bottom: calc(87px * var(--scale-factor));
}

.credit-content {
	display: flex;
	flex-direction: column;
	gap: calc(80px * var(--scale-factor));
}

.credit-title {
	overflow: hidden;
}

.credit-title h1 {
	font-family: var(--font-secondary);
	font-size: calc(var(--font-size-heading-2) * var(--scale-factor));
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: white;
	margin: 0;
}

.credit-item {
	display: flex;
	flex-direction: column;
	gap: calc(24px * var(--scale-factor));
}

.credit-role {
	display: flex;
	gap: calc(24px * var(--scale-factor));
	align-items: flex-start;
}

.credit-role-bar {
	width: calc(20px * var(--scale-factor));
	height: calc(50px * var(--scale-factor));
	background-color: var(--color-brown);
	flex-shrink: 0;
}

.credit-role h2 {
	font-family: var(--font-primary);
	font-size: calc(var(--font-size-body-medium-large) * var(--scale-factor));
	line-height: 1.3;
	color: white;
	margin: 0;
	margin-top: calc(8px * var(--scale-factor));
	white-space: nowrap;
}

.credit-name {
	padding-left: calc(56px * var(--scale-factor));
}

.credit-name p {
	font-family: var(--font-primary);
	font-size: calc(var(--font-size-body-medium) * var(--scale-factor));
	line-height: 1.5;
	color: white;
	margin: 0;
}

.credit-note {
	margin-top: calc(-40px * var(--scale-factor));
}

.credit-note p {
	font-family: var(--font-primary);
	font-size: calc(32px * var(--scale-factor));
	line-height: 1.5;
	color: white;
	margin: 0;
}

.credit-images {
	position: relative;
	height: calc(410px * var(--scale-factor));
	width: 100%;
}

.credit-character-5 {
	position: absolute;
	right: 0;
	top: calc(-40px * var(--scale-factor));
	width: calc(320px * var(--scale-factor));
	height: calc(320px * var(--scale-factor));
	object-fit: cover;
	transform: rotate(10deg);
}

.credit-character-1 {
	position: absolute;
	right: calc(220px * var(--scale-factor));
	top: 0;
	width: calc(240px * var(--scale-factor));
	height: calc(240px * var(--scale-factor));
	object-fit: cover;
}

/* ============================
   Mobile Responsive (600px以下)
   ============================ */
@media (max-width: 600px) {
	.credit-header {
		height: calc(120px * var(--scale-factor));
		padding: calc(16px * var(--scale-factor)) 0;
	}

	.header-container {
		height: calc(88px * var(--scale-factor));
	}

	.credit-container {
		padding-top: calc(60px * var(--scale-factor));
		padding-bottom: calc(60px * var(--scale-factor));
	}

	.credit-content {
		gap: calc(64px * var(--scale-factor));
	}

	.credit-title h1 {
		font-size: calc(var(--font-size-heading-4) * var(--scale-factor));
	}

	.credit-item {
		gap: calc(16px * var(--scale-factor));
	}

	.credit-role {
		gap: calc(16px * var(--scale-factor));
	}

	.credit-role h2 {
		font-size: calc(var(--font-size-body-large) * var(--scale-factor));
		white-space: normal;
		margin-top: calc(6px * var(--scale-factor));
	}

	.credit-role-bar {
		width: calc(16px * var(--scale-factor));
		height: calc(42px * var(--scale-factor));
	}

	.credit-name {
		padding-left: calc(40px * var(--scale-factor));
	}

	.credit-name p {
		font-size: calc(var(--font-size-body-large) * var(--scale-factor));
	}

	.credit-note p {
		font-size: calc(var(--font-size-body-medium-large) * var(--scale-factor));
	}

	.credit-images {
		height: calc(300px * var(--scale-factor));
	}

	.credit-character-5 {
		right: 0;
		top: calc(-36px * var(--scale-factor));
		width: calc(280px * var(--scale-factor));
		height: calc(280px * var(--scale-factor));
	}

	.credit-character-1 {
		right: calc(196px * var(--scale-factor));
		width: calc(200px * var(--scale-factor));
		height: calc(200px * var(--scale-factor));
	}
}