@charset "utf-8";
/* Listoru 企業データベース - ログイン画面（2カラム） */

* { box-sizing: border-box; }
html, body {
	margin: 0; padding: 0; height: 100%;
	font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
	color: var(--lst-text, #15264a);
}
body {
	display: flex; align-items: center; justify-content: center;
	min-height: 100vh;
	background: radial-gradient(1200px 600px at 50% -10%, #e7edf8 0%, rgba(231,237,248,0) 60%), #eef1f7;
	padding: 24px;
}

.lst-login {
	width: 100%; max-width: 900px;
	min-height: 540px;
	display: flex;
	background: #fff;
	border: 0.5px solid rgba(20,40,77,0.08);
	border-radius: 20px;
	box-shadow: 0 18px 50px rgba(20,40,77,0.12);
	overflow: hidden;
}

/* 左：フォーム */
.lst-login-form { flex: 1; min-width: 0; padding: 30px 44px; display: flex; flex-direction: column; }
/* β版バッジはロゴの右横ではなく下に置くため縦並び */
.lst-login-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; }
.lst-login-brand img { height: 124px; width: auto; }
.lst-login-brand .lst-brand-beta {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 10px;
	background: linear-gradient(110deg,#2f5fa6,#4b82d6);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}
@media (max-width: 760px){ .lst-login-brand img { height: 96px; } }

.lst-login-center { margin: auto 0; padding: 12px 0; width: 100%; max-width: 320px; align-self: center; }
.lst-login-title { text-align: center; font-size: 23px; font-weight: 700; color: #15264a; margin: 0 0 6px; }
.lst-login-desc  { text-align: center; font-size: 12.5px; color: #9aa6bd; margin: 0 0 24px; }

.lst-login-error {
	display: none;
	background: #faece7; border: 0.5px solid #f0c4b3; color: #993c1d;
	font-size: 12.5px; border-radius: 10px; padding: 10px 12px; margin-bottom: 16px;
}

.lst-field { margin-bottom: 15px; }
.lst-field label { display: block; font-size: 12px; color: #5a6a88; margin-bottom: 6px; }
.lst-input-wrap { position: relative; display: flex; align-items: center; }
.lst-input-wrap > .ti-lead { position: absolute; left: 12px; color: #9aa6bd; font-size: 18px; pointer-events: none; }
.lst-input-wrap > .ti-eye { position: absolute; right: 12px; color: #9aa6bd; font-size: 18px; cursor: pointer; }
.lst-login input[type=text],
.lst-login input[type=password] {
	width: 100%; height: 44px; padding: 0 40px 0 38px;
	font-size: 14px; font-family: inherit; color: #15264a;
	background: #f7f9fc; border: 0.5px solid rgba(20,40,77,0.15);
	border-radius: 10px; outline: none;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.lst-login input[type=text]:focus,
.lst-login input[type=password]:focus {
	background: #fff; border-color: #3a6fc0;
	box-shadow: 0 0 0 3px rgba(58,111,192,0.15);
}
.lst-login input::placeholder { color: #aab4c9; }

.lst-login-btn {
	width: 100%; height: 46px; margin-top: 8px;
	border: none; border-radius: 10px;
	background: linear-gradient(110deg,#15264a 0%,#27457e 55%,#3a6fc0 100%);
	color: #fff; font-size: 14.5px; font-weight: 500; font-family: inherit; cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	transition: filter .15s, transform .05s;
}
.lst-login-btn:hover { filter: brightness(1.08); }
.lst-login-btn:active { transform: scale(0.99); }
.lst-login-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

/* 利用規約・プライバシーポリシー同意 */
.lst-login-agree { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 14px; }
.lst-login-agree input[type=checkbox] { width: 16px; height: 16px; margin-top: 1px; accent-color: #3a6fc0; cursor: pointer; flex-shrink: 0; }
.lst-login-agree label { font-size: 12.5px; color: #5a6a88; line-height: 1.5; cursor: pointer; }
.lst-login-agree a { color: #3a6fc0; text-decoration: none; }
.lst-login-agree a:hover { text-decoration: underline; }

.lst-login-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: #b3bccd; flex-wrap: wrap; }
.lst-login-foot a { color: #6a7a99; text-decoration: none; }
.lst-login-foot a:hover { color: #3a6fc0; text-decoration: underline; }
.lst-login-foot-copy { text-align: center; font-size: 11px; color: #b3bccd; margin-top: 8px; }

/* 右：ブランドパネル */
.lst-login-aside {
	width: 340px; flex-shrink: 0; position: relative; overflow: hidden;
	background: linear-gradient(150deg,#15264a 0%,#27457e 55%,#3a6fc0 100%);
	padding: 32px 28px; display: flex; flex-direction: column;
}
.lst-login-dots {
	position: absolute; top: 20px; right: 20px;
	display: grid; grid-template-columns: repeat(3, 4px); gap: 6px; opacity: 0.5;
}
.lst-login-dots span { width: 4px; height: 12px; background: #9fc0f0; border-radius: 2px; }

.lst-login-preview { background: #fff; border-radius: 14px; padding: 14px 16px; margin: 6px 0 auto; }
.lst-login-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lst-login-preview-head b { font-size: 12px; color: #15264a; }
.lst-login-preview-head span { font-size: 10px; color: #9aa6bd; }
.lst-login-prow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 0.5px solid #eef1f6; }
.lst-login-prow .ico { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.lst-login-prow .nm { font-size: 11px; color: #15264a; }
.lst-login-prow .ad { font-size: 9.5px; color: #9aa6bd; }
.lst-login-prow .tg { font-size: 9px; padding: 2px 7px; border-radius: 10px; }

.lst-login-copy-title { font-size: 19px; font-weight: 700; color: #fff; line-height: 1.45; margin-bottom: 8px; }
.lst-login-copy-sub   { font-size: 11.5px; color: #c3d3ef; line-height: 1.65; }

/* レスポンシブ：狭い画面では右パネルを隠す */
@media (max-width: 760px) {
	.lst-login-aside { display: none; }
	.lst-login-form { padding: 30px 28px; }
}

/* ============================================================
 * メッセージ画面（タイムアウト／お知らせ）─ ログインと同テイスト
 * ============================================================ */
.lst-msg-card {
	background: #fff;
	border: 0.5px solid rgba(20,40,77,0.08);
	border-radius: 20px;
	box-shadow: 0 18px 50px rgba(20,40,77,0.12);
	width: 100%; max-width: 430px;
	padding: 40px 36px; text-align: center;
}
.lst-msg-logo img { height: 84px; width: auto; }
.lst-msg-icon {
	width: 64px; height: 64px; border-radius: 50%;
	margin: 18px auto 0;
	display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.lst-msg-icon.warn { background: #fbeee0; color: #ba7517; }
.lst-msg-icon.info { background: #e7edf8; color: #2f5fa6; }
.lst-msg-title { font-size: 20px; font-weight: 700; color: #15264a; margin: 16px 0 8px; }
.lst-msg-desc { font-size: 13.5px; color: #5a6a88; line-height: 1.9; margin: 0 0 24px; word-break: break-word; }
.lst-msg-btn {
	display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
	height: 46px; padding: 0 28px; border-radius: 10px;
	background: linear-gradient(110deg,#15264a 0%,#27457e 55%,#3a6fc0 100%);
	color: #fff; font-size: 14.5px; font-weight: 500;
}
.lst-msg-btn:hover { filter: brightness(1.08); }
.lst-msg-btn .ti { font-size: 18px; }