/* ========================================
   Base
======================================== */

* {
	box-sizing: border-box;
}

/* アプリ固有アイコン・ブランド書体 */
.login-symbol {
	border: 0;
	background: transparent;
	transform: none;
	box-shadow: none;
}

.login-symbol img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.login-subtitle {
	font-family:
		"Yu Gothic",
		"Hiragino Kaku Gothic ProN",
		Meiryo,
		sans-serif;
	font-weight: 400;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
}

body {
	font-family:
		"Noto Sans JP",
		"Yu Gothic",
		"Hiragino Kaku Gothic ProN",
		Meiryo,
		sans-serif;

	color: #eeeeee;

	background:
		radial-gradient(circle at 50% 35%,
			rgba(120, 20, 20, 0.12),
			transparent 35%),
		linear-gradient(135deg,
			#080808 0%,
			#111111 50%,
			#080808 100%);

	min-height: 100vh;

	display: flex;
	flex-direction: column;
}


/* ========================================
   Header
======================================== */

.header {
	height: 72px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0 42px;

	border-bottom: 1px solid rgba(255, 255, 255, 0.08);

	background: rgba(8, 8, 8, 0.75);

	backdrop-filter: blur(10px);
}


.logo {
	display: flex;
	align-items: center;
	gap: 14px;
}


.logo-mark {
	width: 34px;
	height: 34px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: #ffffff;

	border: 1px solid rgba(220, 50, 50, 0.7);

	background:
		linear-gradient(135deg,
			rgba(150, 20, 20, 0.8),
			rgba(50, 5, 5, 0.8));

	transform: rotate(45deg);
}


.logo-mark span {
	transform: rotate(-45deg);

	font-size: 14px;
	font-weight: bold;
}


.logo-text {
	font-size: 14px;

	letter-spacing: 0.2em;

	font-weight: 600;

	color: #eeeeee;
}


.header-version {
	font-size: 11px;

	letter-spacing: 0.12em;

	color: #666666;
}


/* ========================================
   Main
======================================== */

.main {
	flex: 1;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 60px 20px;

	position: relative;

	overflow: hidden;
}


/* Background decoration */

.main::before {
	content: "";

	position: absolute;

	width: 600px;
	height: 600px;

	border: 1px solid rgba(255, 255, 255, 0.025);

	border-radius: 50%;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
}


.main::after {
	content: "";

	position: absolute;

	width: 450px;
	height: 450px;

	border: 1px solid rgba(150, 20, 20, 0.06);

	border-radius: 50%;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
}


/* ========================================
   Login Container
======================================== */

.login-wrapper {
	width: 100%;
	max-width: 420px;

	position: relative;

	z-index: 2;
}


.login-header {
	text-align: center;

	margin-bottom: 30px;
}


.login-symbol {
	width: 58px;
	height: 58px;

	margin: 0 auto 24px;

	display: flex;
	align-items: center;
	justify-content: center;

	border: 1px solid rgba(220, 50, 50, 0.6);

	background:
		linear-gradient(135deg,
			rgba(100, 15, 15, 0.5),
			rgba(20, 5, 5, 0.7));

	transform: rotate(45deg);

	box-shadow:
		0 0 30px rgba(160, 20, 20, 0.08);
}


.login-symbol span {
	transform: rotate(-45deg);

	font-size: 22px;

	color: #eeeeee;
}


.login-title {
	margin: 0;

	font-size: 28px;

	font-weight: 500;

	letter-spacing: 0.12em;

	color: #ffffff;
}


.login-subtitle {
	margin-top: 12px;

	font-size: 11px;

	letter-spacing: 0.2em;

	color: #777777;
}


/* ========================================
   Login Card
======================================== */

.login-card {
	padding: 42px 40px;

	background:
		linear-gradient(145deg,
			rgba(28, 28, 28, 0.96),
			rgba(14, 14, 14, 0.98));

	border: 1px solid rgba(255, 255, 255, 0.08);

	box-shadow:
		0 25px 80px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.03);
}


/* ========================================
   Form
======================================== */

.form-group {
	margin-bottom: 22px;
}


.form-label {
	display: block;

	margin-bottom: 9px;

	font-size: 11px;

	letter-spacing: 0.12em;

	color: #999999;
}


.form-input {
	width: 100%;

	height: 48px;

	padding: 0 15px;

	color: #eeeeee;

	font-size: 14px;

	background: #0c0c0c;

	border: 1px solid #303030;

	outline: none;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}


.form-input::placeholder {
	color: #555555;
}


.form-input:focus {
	border-color: rgba(190, 40, 40, 0.8);

	background: #101010;

	box-shadow:
		0 0 0 3px rgba(150, 20, 20, 0.08);
}


/* ========================================
   Options
======================================== */

.form-options {
	display: flex;

	align-items: center;

	justify-content: space-between;

	margin-top: 4px;

	margin-bottom: 28px;
}


.remember {
	display: flex;

	align-items: center;

	gap: 8px;

	font-size: 11px;

	color: #777777;

	cursor: pointer;
}


.remember input {
	accent-color: #a52b2b;
}


.forgot-link {
	color: #888888;

	font-size: 11px;

	text-decoration: none;

	transition: color 0.2s ease;
}


.forgot-link:hover {
	color: #d14a4a;
}


/* ========================================
   Login Button
======================================== */

.login-button {
	width: 100%;

	height: 50px;

	border: 1px solid #8f2424;

	background:
		linear-gradient(135deg,
			#7d2020,
			#4e1111);

	color: #ffffff;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: 0.2em;

	cursor: pointer;

	transition:
		background 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}


.login-button:hover {
	background:
		linear-gradient(135deg,
			#9c2929,
			#681717);

	box-shadow:
		0 8px 25px rgba(120, 20, 20, 0.2);

	transform: translateY(-1px);
}


.login-button:active {
	transform: translateY(0);
}


/* ========================================
   Register
======================================== */

.register-area {
	margin-top: 26px;

	padding-top: 24px;

	border-top: 1px solid rgba(255, 255, 255, 0.06);

	text-align: center;
}


.register-text {
	font-size: 11px;

	color: #666666;

	margin-right: 8px;
}


.register-link {
	color: #b83a3a;

	font-size: 11px;

	text-decoration: none;

	transition: color 0.2s ease;
}


.register-link:hover {
	color: #e15b5b;
}


/* ========================================
   Footer
======================================== */

.footer {
	height: 60px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-top: 1px solid rgba(255, 255, 255, 0.05);

	color: #444444;

	font-size: 10px;

	letter-spacing: 0.12em;
}


/* ========================================
   Responsive
======================================== */

@media (max-width: 600px) {

	.header {
		height: 60px;

		padding: 0 20px;
	}


	.header-version {
		display: none;
	}


	.main {
		padding: 40px 20px;
	}


	.login-card {
		padding: 34px 24px;
	}


	.login-title {
		font-size: 23px;
	}

}

/* 最終上書き：アプリ固有アイコン・ブランド書体 */
.login-symbol {
	border: 0;
	background: transparent;
	transform: none;
	box-shadow: none;
}

.login-symbol img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.login-subtitle {
	font-family:
		"Yu Gothic",
		"Hiragino Kaku Gothic ProN",
		Meiryo,
		sans-serif;
	font-weight: 400;
}