/* =========================================================
	RESET
========================================================= */
:root
{
	--header-height : 72px;
}

*
{
	box-sizing : border-box;
}

html
{
	scroll-behavior : smooth;
}

body
{
	margin : 0;
	padding : 0;
	background : #08090d;
	color : #ffffff;
	font-family : Arial, "Noto Sans JP", sans-serif;
	overflow-x : hidden;
}

/* =========================================================
	HEADER
========================================================= */
.header
{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : var(--header-height);
	z-index : 1000;
	background : rgba(5, 6, 10, 0.90);
	border-bottom : 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter : blur(10px);
}

/* ロゴ */
.logo
{
	position : absolute;
	left : 20px;
	top : 0px;
	height : 72px;
	width : auto;
	display : block;
}

/* メニュー */
.menu
{
	height : 100%;
	display : flex;
	justify-content : center;
	align-items : center;
	gap : 5px;
}

.menu a
{
	color : #ffffff;
	text-decoration : none;
	padding : 12px 18px;
	font-size : 14px;
	font-weight : bold;
	letter-spacing : 2px;
	transition : 0.2s;
}

.menu a:hover
{
	color : #e33;
	background : rgba(255, 255, 255, 0.06);
}

/* =========================================================
	SECTION
========================================================= */
.section
{
	width : 100%;
	max-width : 1200px;
	min-height : 100vh;
	margin : 0 auto;
	padding : 130px 30px 80px;
}

.section-title
{
	margin : 0 0 50px;
	padding-left : 20px;
	border-left : 6px solid #e22;
	font-size : clamp(30px, 5vw, 48px);
	letter-spacing : 4px;
}

/* =========================================================
	TOP
========================================================= */
#top
{
	width : 100%;
	height : 100vh;
	padding : 36px 0 0;
	display : flex;
	justify-content : center;
	align-items : center;
	overflow : hidden;
}

/* A4画像(横幅は画面に合わせて縮小。PCでは大きくなりすぎないよう最大幅を設定) */
.top-image
{
	display : block;
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : center;
	background: #fff;
}

@keyframes topAppear
{
	from
	{
		opacity : 0;
		transform : translateY(25px);
	}
	to
	{
		opacity : 1;
		transform : translateY(0);
	}
}

/* =========================================================
	CHARACTER
========================================================= */
.character-area
{
	display : grid;
	grid-template-columns : minmax(0, 1fr) minmax(0, 1fr);
	gap : 40px;
}

/* キャラクター立ち絵 */
.character-image-area
{
	width : 100%;
	min-height : 650px;
	display : flex;
	justify-content : center;
	align-items : flex-end;
	overflow : hidden;
	background : radial-gradient(
		circle at center,
		#24242d 0%,
		#101117 55%,
		#07080b 100%);
}

.character-image
{
	display : block;
	width : auto;
	max-width : 100%;
	height : 650px;
	object-fit : contain;
	animation : characterAppear 0.35s ease;
}

@keyframes characterAppear
{
	from
	{
		opacity : 0;
		transform : translateX(20px);
	}
	to
	{
		opacity : 1;
		transform : translateX(0);
	}
}

/* キャラクター情報 */
.character-info
{
	padding : 30px;
	background : #15161c;
}

.character-name
{
	margin : 0 0 5px;
	font-size : clamp(32px, 5vw, 48px);
}

.character-name-en
{
	margin-bottom : 35px;
	color : #888;
	letter-spacing : 4px;
}

.character-description
{
	line-height : 2;
	white-space : pre-line;
	color : #ddd;
}

/* 変身前後 */
.form-switch
{
	display : flex;
	flex-wrap : wrap;
	gap : 8px;
	margin-top : 35px;
}

.form-switch button
{
	padding : 10px 18px;
	border : 1px solid #555;
	background : #222;
	color : #fff;
	cursor : pointer;
	transition : 0.2s;
}

.form-switch button:hover
{
	border-color : #e22;
}

.form-switch button.active
{
	background : #d22;
	border-color : #d22;
}

/* キャラクターアイコン */
.character-list
{
	margin-top : 30px;
	display : grid;
	grid-template-columns : repeat(8, 1fr);
	gap : 10px;
}

.character-icon
{
	aspect-ratio : 1 / 1;
	border : 2px solid #333;
	background : #18191f;
	cursor : pointer;
	overflow : hidden;
	transition : 0.2s;
}

.character-icon:hover
{
	transform : translateY(-5px);
	border-color : #e22;
}

.character-icon.active
{
	border-color : #e22;
	box-shadow : 0 0 15px rgba(220,30,30,0.7);
}

.character-icon img
{
	width : 100%;
	height : 100%;
	object-fit : cover;
}

/* =========================================================
	STORY
========================================================= */
.story-synopsis
{
	margin-bottom : 60px;
	font-size : 18px;
	line-height : 2.2;
	color : #ddd;
	white-space: pre-line;
}

/* 話数 */
.episode-list
{
	display : grid;
	gap : 15px;
}

.episode
{
	display : block;
	width : 100%;
	padding : 25px 30px;
	background : #17181e;
	border-left : 4px solid #444;
	color : #fff;
	text-decoration : none;
	transition : 0.2s;
}

.episode:hover
{
	background : #22232b;
	border-left-color : #e22;
	transform : translateX(8px);
}

.episode-number
{
	display : inline-block;
	min-width : 120px;
	color : #e22;
	font-weight : bold;
}

/* =========================================================
	STORY VIEWER
========================================================= */
.story-viewer
{
	margin: 20px 0;
	padding: 20px;
	background: #000000;
}

.story-viewer.visible
{
	display : block;
}

.story-viewer-title
{
	margin : 0 0 30px;
	font-size : 32px;
}

.story-text
{
	color : #ddd;
	white-space : pre-wrap;
	line-height : 1.8;
}

.story-close
{
	cursor : pointer;
	margin-top : 20px;
	padding : 8px 16px;
}

/* =========================================================
	GAME
========================================================= */
.game-list
{
	display : grid;
	grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
	gap : 25px;
}

.game-card
{
	padding : 30px;
	background : #17181e;
	border : 1px solid #333;
	transition : 0.2s;
}

.game-card:hover
{
	transform : translateY(-5px);
	border-color : #e22;
}

.game-card a
{
	text-decoration : none;
}

.game-card h3
{
	margin-top : 0;
	font-size : 25px;
	color : #fff;
}

.game-card h4
{
	margin-top : 0;
	font-size : 15px;
	color : #ccc;
}

.game-card p
{
	line-height : 2;
	color : #ccc;
}

.game-card img
{
	display : block;
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : center;
	background: #000;
}

/* =========================================================
	STORE
========================================================= */
.store-area
{
	text-align : center;
	padding-top : 80px;
}

.store-button
{
	display : inline-block;
	padding : 18px 55px;
	background : #e22;
	color : #fff;
	text-decoration : none;
	font-size : 20px;
	font-weight : bold;
	transition : 0.2s;
}

.store-button:hover
{
	background : #f44;
	transform : scale(1.05);
}

/* =========================================================
	FOOTER
========================================================= */
.footer
{
	padding : 40px 20px;
	text-align : center;
	color : #666;
	border-top : 1px solid #222;
}

/* =========================================================
	MOBILE
========================================================= */
@media (max-width: 800px)
{
	/* ヘッダー */
	
	.header
	{
		height : 60px;
	}
	
	.logo
	{
		width : 150px;
		height : 60px;
		left : 10px;
		object-fit : cover;
		object-position : center;
	}
	
	.menu
	{
		margin-left: 160px;
		padding-left: 5px;
		padding-right : 5px;
		justify-content : flex-start;
		overflow-x : auto;
		gap : 0;
	}
	
	.menu a
	{
		flex : 0 0 auto;
		padding : 21px 10px;
		font-size : 11px;
		letter-spacing : 1px;
	}
	
	/* セクション */
	.section
	{
		padding : 100px 15px 60px;
	}
	
	.section-title
	{
		margin-bottom : 35px;
		padding-left : 12px;
		border-left-width : 4px;
	}
	
	/* TOP */
	#top
	{
		padding : 0px;
		min-height : auto;
	}
	
	.top-image
	{
		width : 100%;
	}
	
	/* CHARACTER */
	.character-area
	{
		grid-template-columns : 1fr;
		gap : 20px;
	}
	
	.character-image-area
	{
		min-height : 500px;
	}
	
	.character-image
	{
		height : 500px;
		max-width : 100%;
	}
	
	.character-info
	{
		padding : 25px 20px;
	}
	
	.character-list
	{
		grid-template-columns : repeat(5, 1fr);
		gap : 7px;
	}
	
	/* STORY */
	.story-summary
	{
		font-size : 16px;
	}
	
	.episode
	{
		padding : 20px;
	}
	
	.episode-number
	{
		display : block;
		min-width : 0;
		margin-bottom : 5px;
	}
	
	.story-viewer
	{
		padding : 25px 18px;
	}
	
	.story-viewer-title
	{
		font-size : 25px;
	}
	
	.story-text
	{
		font-size : 15px;
		line-height : 2;
	}
}