/*------------------------------------------------------*
 * login.css  ログイン画面
 * ブランド基調 : 黒 x イエロー(ロゴ準拠) / サロン調
 * スマホ・タブレット対応
 *------------------------------------------------------*/

:root{
	--bk-black:  #3f3a34;
	--bk-black2: #4b453d;
	--bk-yellow: #b08d4f;
	--bk-cream:  #f4f1ec;
	--bk-line:   #e2dcd2;
	--bk-text:   #33302b;
	--bk-sub:    #8c8478;
}

*{ box-sizing:border-box; }

html,body{
	margin:0; padding:0;
	min-height:100vh;
	font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
	color:var(--bk-text);
	/* サロンの夜の店内 : 黒地に淡い光 */
	background:
		radial-gradient(600px 400px at 85% 10%, rgba(176,141,79,.14), transparent 60%),
		radial-gradient(500px 380px at 10% 90%, rgba(176,141,79,.08), transparent 60%),
		var(--bk-black);
	-webkit-text-size-adjust:100%;
}

.lg-stage{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:24px 14px;
}

.lg-card{
	width:100%;
	max-width:400px;
	background:var(--bk-cream);
	border-radius:22px;
	padding:30px 26px 26px;
	box-shadow:0 18px 50px rgba(0,0,0,.55);
	border-top:5px solid var(--bk-yellow);
}

.lg-brand{ text-align:center; margin-bottom:14px; }
.lg-brand img{
	max-width:170px; height:auto;
	border-radius:10px;
}
.lg-tag{
	margin:10px 0 0;
	font-size:11px;
	letter-spacing:.42em;
	color:var(--bk-sub);
}

.lg-msg{
	min-height:18px;
	margin:6px 0 10px;
	text-align:center;
	font-size:13px;
	color:#b0392e;
	white-space:pre-line;
}

.lg-form{ display:flex; flex-direction:column; }

.lg-label{
	font-size:12px;
	font-weight:700;
	color:var(--bk-sub);
	letter-spacing:.12em;
	margin:10px 2px 6px;
}

.lg-field{
	display:flex;
	align-items:center;
	background:#fff;
	border:1px solid var(--bk-line);
	border-radius:12px;
	padding:0 12px;
	transition:border-color .15s, box-shadow .15s;
}
.lg-field:focus-within{
	border-color:var(--bk-black);
	box-shadow:0 0 0 3px rgba(176,141,79,.45);
}
.lg-ficon{
	display:flex;
	color:var(--bk-sub);
	margin-right:8px;
}
.lg-field input{
	flex:1;
	border:none;
	outline:none;
	background:transparent;
	font-size:16px;              /* iOSズーム防止 */
	padding:13px 0;
	min-width:0;
	color:var(--bk-text);
}

.lg-btn{
	margin-top:20px;
	width:100%;
	min-height:50px;
	border:none;
	border-radius:26px;
	background:var(--bk-black);
	color:var(--bk-yellow);
	font-size:16px;
	font-weight:700;
	letter-spacing:.28em;
	cursor:pointer;
	box-shadow:0 6px 16px rgba(0,0,0,.25);
	transition:transform .12s, box-shadow .12s;
}
.lg-btn:hover{ transform:translateY(-1px); box-shadow:0 9px 20px rgba(0,0,0,.3); }
.lg-btn:active{ transform:translateY(0); }

.lg-btn.sub{
	margin-top:12px;
	background:transparent;
	color:var(--bk-sub);
	border:1px solid var(--bk-line);
	box-shadow:none;
	font-size:13px;
	font-weight:600;
	letter-spacing:.05em;
	min-height:44px;
}
.lg-btn.sub:hover{ background:#fff; color:var(--bk-text); }

.lg-foot{
	margin-top:22px;
	font-size:11px;
	letter-spacing:.32em;
	color:rgba(176,141,79,.55);
}

@media (max-width:380px){
	.lg-card{ padding:24px 18px 20px; }
}

/* 初回パスワード設定フォーム(追加) */
.lg-wrap{ max-width:420px; margin:40px auto; padding:0 16px; }
.lg-title{ font-size:20px; font-weight:800; color:#3f3a34; margin:0 0 12px; text-align:center; }
.lg-note{ font-size:13px; color:#8c8478; line-height:1.7; margin:0 0 18px; text-align:center; }
.lg-fld{ margin-bottom:14px; }
.lg-fld label{ display:block; font-size:12px; font-weight:700; color:#8c8478; margin:0 2px 6px; letter-spacing:.06em; }
.lg-fld input{ width:100%; font-size:16px; padding:10px 12px; border:1px solid #e2dcd2; border-radius:10px; background:#fff; color:#33302b; min-height:44px; box-sizing:border-box; }
.lg-fld input:focus{ outline:none; border-color:#3f3a34; box-shadow:0 0 0 3px rgba(176,141,79,.35); }
.lg-btnbar{ display:flex; gap:10px; margin-top:20px; }
.lg-btn{ flex:1; font-size:15px; padding:12px 20px; min-height:48px; border:none; border-radius:8px; cursor:pointer; font-weight:700; }
.lg-btn.main{ background:#b08d4f; color:#fff; }
.lg-btn.main:hover{ background:#94733a; }
.lg-btn.ghost{ background:#fff; color:#33302b; border:1px solid #e2dcd2; }
.lg-btn.ghost:hover{ background:#f4f1ec; }