/* =========================================================
 * 戦記ガチャ - 会員まわり(登録・ログイン・ポイントのマイページ)
 * 旧版のクラス名(alb-)はそのまま、配色だけ戦記の色に合わせた。
 * ======================================================= */

.alb-form-wrap,
.alb-mypage,
.alb-notice {
	--alb-ink: #14161c;
	--alb-panel: #1b1e25;
	--alb-rule: #343944;
	--alb-parch: #d8cfc0;
	--alb-dim: #9d9588;
	--alb-blood: #8c2f2a;
	--alb-gold: #b98a3c;
	--alb-arcane: #7fa8d8;
	max-width: 560px;
	margin: 0 auto;
	box-sizing: border-box;
	color: var(--alb-parch);
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	line-height: 1.8;
}

.alb-form-wrap *,
.alb-form-wrap *::before,
.alb-form-wrap *::after,
.alb-mypage *,
.alb-mypage *::before,
.alb-mypage *::after { box-sizing: border-box; }

/* ---- 通知 ---- */
.alb-notice,
.alb-form-wrap .alb-error {
	padding: 12px 16px;
	border: 1px solid #343944;
	background: #1b1e25;
	color: #d8cfc0;
	font-size: 14px;
}
.alb-form-wrap .alb-error { border-color: #8c2f2a; margin-bottom: 14px; }
.alb-notice a { color: #b98a3c; }

/* ---- フォーム ---- */
.alb-form-wrap .alb-form {
	padding: 24px 20px;
	background: var(--alb-panel);
	border: 1px solid var(--alb-rule);
}
.alb-form .alb-field { margin: 0 0 16px; }
.alb-form label { display: block; font-size: 13px; color: var(--alb-dim); margin-bottom: 4px; }
.alb-form input[type="text"],
.alb-form input[type="email"],
.alb-form input[type="password"] {
	width: 100%;
	padding: 11px 12px;
	font-size: 16px;
	color: var(--alb-parch);
	background: var(--alb-ink);
	border: 1px solid var(--alb-rule);
	border-radius: 2px;
}
.alb-form input:focus { outline: 2px solid var(--alb-arcane); outline-offset: 1px; border-color: var(--alb-arcane); }
.alb-form .alb-submit button {
	width: 100%;
	padding: 13px;
	font-size: 16px;
	font-family: inherit;
	letter-spacing: .08em;
	color: #f1e9da;
	background: var(--alb-blood);
	border: 1px solid #b0453e;
	border-radius: 2px;
	cursor: pointer;
}
.alb-form .alb-submit button:hover { background: #9f3831; }
.alb-form .alb-submit button:focus-visible { outline: 2px solid var(--alb-arcane); outline-offset: 2px; }
.alb-form .alb-lostpass { text-align: center; font-size: 13px; margin: 12px 0 0; }
.alb-form .alb-lostpass a { color: var(--alb-dim); }

/* ---- 残高カード ---- */
.alb-mypage .alb-balance-card {
	position: relative;
	padding: 22px 20px 18px;
	background: var(--alb-panel);
	border: 1px solid var(--alb-gold);
	box-shadow: inset 0 0 0 3px var(--alb-ink), inset 0 0 0 4px #5c4a2c;
	text-align: center;
}
.alb-mypage .alb-balance-name { font-size: 14px; color: var(--alb-dim); }
.alb-mypage .alb-balance-label { font-size: 12px; color: var(--alb-dim); margin-top: 6px; }
.alb-mypage .alb-balance-points { font-size: 44px; line-height: 1.2; color: var(--alb-parch); font-feature-settings: "tnum"; }
.alb-mypage .alb-balance-points span { font-size: 18px; margin-left: 4px; color: var(--alb-gold); }
.alb-mypage .alb-balance-yen { font-size: 13px; color: var(--alb-dim); }
.alb-mypage .alb-balance-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--alb-dim); }

/* ---- 利用上限 ---- */
.alb-mypage .alb-usable { margin: 18px 0 8px; padding: 14px 16px; border: 1px solid var(--alb-rule); background: var(--alb-panel); }
.alb-mypage .alb-usable-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.alb-mypage .alb-usable-label { font-size: 13px; color: var(--alb-dim); }
.alb-mypage .alb-usable-value { font-size: 24px; color: var(--alb-parch); font-feature-settings: "tnum"; }
.alb-mypage .alb-usable-value em { font-style: normal; font-size: 13px; margin-left: 2px; }
.alb-mypage .alb-usable-bar { height: 4px; margin: 10px 0 8px; background: var(--alb-ink); }
.alb-mypage .alb-usable-bar span { display: block; height: 100%; background: var(--alb-gold); transition: width .6s ease; }
.alb-mypage .alb-usable-note { font-size: 12px; color: var(--alb-dim); margin: 0; line-height: 1.7; }
.alb-mypage .alb-redeem-note { font-size: 12px; color: var(--alb-dim); margin: 10px 0 18px; }

/* ---- タブ ---- */
.alb-mypage .alb-tabs { display: flex; border-bottom: 1px solid var(--alb-rule); margin: 18px 0 12px; }
.alb-mypage .alb-tab {
	flex: 1 1 0;
	padding: 10px 4px;
	text-align: center;
	font-size: 13px;
	color: var(--alb-dim);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.alb-mypage .alb-tab.is-active { color: var(--alb-parch); border-bottom-color: var(--alb-blood); }
.alb-mypage .alb-tab:focus-visible { outline: 2px solid var(--alb-arcane); }
.alb-mypage .alb-tab-count { font-size: 11px; color: var(--alb-gold); }

/* ---- 履歴 ---- */
.alb-mypage .alb-history-table { width: 100%; border-collapse: collapse; font-size: 13px; border: 0; }
.alb-mypage .alb-history-table td { padding: 9px 6px; border: 0; border-bottom: 1px solid var(--alb-rule); background: transparent; color: var(--alb-parch); vertical-align: top; }
.alb-mypage .alb-h-date { width: 3.6em; color: var(--alb-dim); white-space: nowrap; }
.alb-mypage .alb-h-bal { display: block; font-size: 11px; color: var(--alb-dim); }
.alb-mypage .alb-h-pt { text-align: right; white-space: nowrap; font-feature-settings: "tnum"; }
.alb-mypage .alb-plus { color: var(--alb-gold); }
.alb-mypage .alb-minus { color: #c9837a; }
.alb-mypage .alb-empty { color: var(--alb-dim); font-size: 13px; text-align: center; padding: 20px 0; }
.alb-mypage .alb-pager { display: flex; justify-content: center; gap: 16px; margin-top: 12px; font-size: 13px; }
.alb-mypage .alb-pager a { color: var(--alb-gold); }

/* ---- ログアウト・退会 ---- */
.alb-mypage .alb-logout,
.alb-mypage .alb-withdraw-link { text-align: center; font-size: 12px; margin: 16px 0 0; }
.alb-mypage .alb-logout a,
.alb-mypage .alb-withdraw-link a { color: var(--alb-dim); }
.alb-mypage .alb-withdraw-box { padding: 22px 20px; border: 1px solid var(--alb-blood); background: var(--alb-panel); }
.alb-mypage .alb-withdraw-title { font-size: 18px; margin-bottom: 8px; }
.alb-mypage .alb-withdraw-list p { margin: 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--alb-rule); font-size: 13px; }
.alb-mypage .alb-withdraw-warn { color: #d99a8f; font-size: 13px; }
.alb-mypage .alb-withdraw-btn {
	width: 100%;
	padding: 12px;
	font-family: inherit;
	color: #f1e9da;
	background: var(--alb-blood);
	border: 1px solid #b0453e;
	cursor: pointer;
}
.alb-mypage .alb-withdraw-back { text-align: center; font-size: 13px; }
.alb-mypage .alb-withdraw-back a { color: var(--alb-dim); }

/* マイページ内に入る戦記ガチャの部品は幅を合わせる */
.alb-mypage .vg-scope { max-width: none; margin-top: 18px; }