/* ログインスクリーンCSS */

/*-------------------------------------*/
/* ヘッダー */
.hp__header a {
	text-decoration:none;
	margin-left:15px;
	margin-top:4px;
}
.hp__header { /*position: sticky; top: 0;*/ z-index: 50; background-color: rgba(255, 255, 255, 0.95); border-bottom: 1px solid #e5e7eb; backdrop-filter: blur(8px); }
.hp__header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.hp__logo { font-size: 1.25rem; font-weight: 700; color: #2563eb; }
.hp__nav { display: none; }
@media (min-width: 1024px) {
	.hp__nav { /*display: flex;*/ 
align-items: center; gap: 2rem; }
}
/*-------------------------------------*/


/* リセット・ベース設定 */
* {
	box-sizing: border-box;
}
body { 
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
	background-color: #fcfdfe; 
	margin: 0; 
	padding: 0;
	width: 100%;
}

/* 全体を囲むラッパー */
.general_container {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fff;
}

/* メイン */
.cms__main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1rem;
}

.cms__container { 
	width: 100%; 
	max-width: 28rem; 
	padding: 0; 
	margin: 0 auto;
}

/* スマホ時：シャドウなし、余白も最小限にスッキリさせる */
.cms__card { 
	background: #ffffff; 
	padding: 1rem; 
	border-radius: 0;
	box-shadow: none;
	margin-top:-180px !important;
	display:block;
}

/* パソコン時 (550px以上)：カードのシャドウと角丸、パディングを有効化 */
@media screen and (min-width: 550px) {
	.cms__card { 
		padding: 2rem; 
		border-radius: 0.5rem;
		box-shadow: 
			0   4px 6px -1px rgba(0, 0, 0, 0.14),   /* 下側：メインシャドー（数値を0.1 -> 0.14へ少し濃く調整） */
			0   2px 4px -1px rgba(0, 0, 0, 0.08),  /* 下側：アクセントシャドー（数値を0.06 -> 0.08へ少し濃く調整） */
			0  -3px 4px -1px rgba(0, 0, 0, 0.07),  /* 上側：少し狭く（-3px / 4px）、少し薄く（0.07） */
			0  -1px 2px -1px rgba(0, 0, 0, 0.04);  /* 上側：さらに狭く（-1px / 2px）、もっと薄く（0.04） */
		margin-top:-50px !important;
	}
	.cms__card.register { /*cms_registerのみ。bottomが効かない。*/
		margin-top:20px !important;
		margin-bottom:50px !important;
	}
	/* ★ パソコン時のみ、登録画面のときだけ下部に余白を持たせる（数値はお好みで調整してください） */
	.cms__card.register {
		margin-bottom: 40px !important;
	}
}


/* 大画面モニター向け (1500px以上) */
@media screen and (min-width: 1500px) {
	.general_container {
		box-shadow:
			-3px 0 3px -2px rgba(0, 0, 0, 0.25), 
			10px 0 10px -5px rgba(0, 0, 0, 0.2); 
	}
}

.cms__title { font-size: 1.5rem; font-weight: 700; text-align: center; color: #1f2937; margin-bottom: 1.5rem; }
.cms__form-group { margin-bottom: 1rem; }
.cms__label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.375rem; }
.cms__input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; outline: none; transition: border-color 0.15s; }
.cms__input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.cms__btn { width: 100%; background-color: #2563eb; color: #ffffff; font-weight: 600; padding: 0.625rem; border: none; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; margin-top: 1rem; }
.cms__btn:hover { background-color: #1d4ed8; }
.cms__error { background-color: #fee2e2; color: #b91c1c; padding: 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; margin-bottom: 1rem; }
.cms__link { text-align: center; margin-top: 1rem; font-size: 0.875rem; color: #4b5563; }
.cms__link a { color: #2563eb; text-decoration: none; }
.cms__link a:hover { text-decoration: underline; }