*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif; /* 中国風を意識した明朝体ベース */
	margin: 0;
	padding: 0;
	background-color: #f9f6ef; /* 温かみのある生成り・和紙系の色 */
	color: #2c2c2c;
	position: relative; /* 疑似要素の基準点とする */
	z-index: 1;
}

/* 背景テクスチャを疑似要素として追加 */
body::before {
	content: '';
	position: fixed; /* 画面に固定 */
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url('../images/background_texture.webp');
	opacity: 0.3; /* ご提案通り、少し薄めて表示 */
	z-index: -1; /* コンテンツの背面に配置 */
}

.header {
	text-align: center;
	background-color: #fff;
	margin-bottom: 40px;
}

.header__main-visual {
	width: 100%;
	height: 400px;
	overflow: hidden;
}

@media (max-width: 768px) {
	.header__main-visual {
		height: 250px;
	}
}

.header__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: top;
}

@media (min-width: 769px) {
	.header__image {
		height: calc(100% + 100px);
		margin-top: -100px;
	}
}

.header__title {
	margin: 0;
	padding: 30px 0 30px;
	font-size: 2.2rem;
	letter-spacing: 0.15em;
	font-family: 'Cinzel', 'Times New Roman', serif; /* タイトルは英語の雰囲気を保つセリフ体 */
}

.main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 40px;
}

.section-title {
	margin: 0 0 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.section-title__main {
	font-size: 1.8rem;
	font-family: 'Cinzel', 'Times New Roman', serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
}

.section-title__main::before,
.section-title__main::after {
	content: "";
	display: inline-block;
	width: 40px;
	height: 1px;
	background-color: #555;
	margin: 0 15px;
}

.section-title__sub {
	font-size: 0.9rem;
	color: #777;
	margin-top: 8px;
	letter-spacing: 0.3em;
	font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
}

.agents__list {
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: stretch; /* スライドの高さを揃えるために追加 */
}

.agents__item {
	container-type: inline-size;
	transition: transform 0.3s ease, opacity 0.3s ease;
	opacity: 0.5;
	transform: scale(0.95);
}

.agents__item.swiper-slide-active {
	/* アニメーション後の最終的な状態。他より少し大きくする */
	opacity: 1;
	transform: scale(1);
}

.agent-card {
	background: #fff;
	border-radius: 4px; /* 丸みを抑えて少しシャープな印象に */
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	height: auto; /* Swiperデフォルトのheight: 100%を上書きして高さを揃える */
}

.agent-card__image-wrapper {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #ddd; /* 画像がない場合の仮背景色 */
	flex-shrink: 0; /* Flexbox内で画像領域が潰れるのを防ぐ */
}

.agent-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.agent-card__info {
	padding: 15px;
	flex-grow: 1;
}

.agent-card__name {
	margin: 0 0 10px;
	font-size: 1.4rem;
	font-family: 'Cinzel', 'Times New Roman', 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
	letter-spacing: 0.05em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.agent-card__name small {
	font-size: 0.8rem;
	font-weight: normal;
	margin-left: 0;
	margin-top: 4px;
	color: #888;
	font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
	letter-spacing: 0.1em;
}

.agent-card__description {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #555;
}

/* フルードなコンポーネントの例（コンテナサイズに応じた調整） */
@container (max-width: 220px) {
	.agent-card__info {
		padding: 10px;
	}
	.agent-card__name {
		font-size: 1.1rem;
	}
}

/* キャラクターごとのテーマカラー調整とボーダー装飾 */
.agent-card--green { border-top: 5px solid #2e7d32; }
.agent-card--green .agent-card__name { color: #2e7d32; }

.agent-card--yellow { border-top: 5px solid #f9a825; }
.agent-card--yellow .agent-card__name { color: #f9a825; }

.agent-card--red { border-top: 5px solid #c62828; }
.agent-card--red .agent-card__name { color: #c62828; }

.agent-card--blue { border-top: 5px solid #1565c0; }
.agent-card--blue .agent-card__name { color: #1565c0; }

.agent-card--white { border-top: 5px solid #424242; }
.agent-card--white .agent-card__name { color: #424242; }

/* フッター */
.footer {
	text-align: center;
	padding: 40px 20px 20px;
	margin-top: 40px;
}

.footer__copyright {
	margin: 0;
	font-size: 0.9rem;
	color: #777;
}

/* Swiper UI カラー調整 */
.swiper-button-prev,
.swiper-button-next {
	color: #555;
}

.swiper-pagination {
	position: static; /* デフォルトのabsoluteを解除してmarginを有効にする */
	margin-top: 25px;
}

.swiper-pagination-bullet-active {
	background: #555;
}

/* スマートフォンではナビゲーション矢印を非表示にする */
@media (max-width: 768px) {
	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}
}

/* 敵キャラクターセクション */
.enemies {
	margin-top: 80px;
}

.enemies__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
}

.enemies__item {
	width: 100%;
	max-width: 340px;
}

.enemy-card {
	background: #1a1a1a;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	border-top: 5px solid #5c0f0f; /* ボスらしい禍々しいダークレッド */
}

.enemy-card__image-wrapper {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #111;
	flex-shrink: 0; /* Flexbox内で画像領域が潰れるのを防ぐ */
}

.enemy-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.enemy-card__info {
	padding: 20px;
	color: #f9f6ef;
	text-align: center;
}

.enemy-card__name {
	margin: 0 0 10px;
	font-size: 1.5rem;
	font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
	letter-spacing: 0.05em;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.2;
}

.enemy-card__name small {
	font-size: 0.85rem;
	font-weight: normal;
	margin-top: 6px;
	color: #888;
	letter-spacing: 0.15em;
}

.enemy-card__description {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #aaa;
}