@charset "utf-8";

/**
 * members_login.css
 * 管理者ログイン画面用CSS（v5.4以降）
 */

#login {
	padding: 0;
	background-color: #ffffff;
}

.container {
	display: flex;
	padding: 0;
	width: 100%;
}

.login-area {
	flex: 1;
	height: 100vh;
	contain: layout;
	box-shadow: 0 5px 5px #999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 48px;
	overflow-y: auto;
	.login-wrapper {
		width: 100%;
		max-width: 455px;
		/* スクロール発生時に上部が切れないよう、余白がある時のみ中央寄せ */
		margin: auto 0;
	}
	.logo {
		padding: 20px 0 0;
		text-align: center;
	}
	.login-logo-img {
		width: 160px;
	}

	.panel-body {
		border-bottom: none;
		.ynotation {
			text-align: center;
			#ynt {
				margin: 0 0 10px;
				font-size: 18px;
				font-weight: bold;
			}
		}
		.panel-title {
			padding: 0 0 30px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			#comp,
			#mgmt {
				margin: 0;
				font-size: 18px;
				font-weight: bold;
			}
			#mgmt {
				margin-top: 5px;
			}
		}

		input.form-control {
			height: 40px;
			&:active,
			&:focus {
				background-color: #e3f2fd;
			}
		}

		.btn-box {
			padding: 10px 0;
			.btn-login {
				height: 40px;
				font-size: 1.4rem;
			}
		}
	}

	.panel-footer {
		padding: 0 15px;
		border-top: none;
		text-align: center;
		background-color: #ffffff;
		.panel-footer-inner {
			padding: 25px 0 5px;
			border-top: solid 1px #efefef;
		}
	}

	.footer-login {
		padding: 10px 0;
		margin-top: 20px;
		width: 100%;
		flex-shrink: 0;
		text-align: center;
		img {
			max-height: 13px;
		}
	}
}

.info-area {
	flex: 1;
	height: 100vh;
	background-color: #f7f8fc;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 48px;
	gap: 24px;
	overflow-y: auto;
	.info-wrapper {
		width: 100%;
		max-width: 600px;
		/* スクロール発生時に上部が切れないよう、余白がある時のみ中央寄せ */
		margin: auto 0;
	}

	.info-image {
		margin-bottom: 40px;
		img {
			width: 100%;
			display: block;
			border-radius: 5px;
			/* box-shadow: 0 2px 5px #999999; */
		}
	}
	.info-title {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		line-height: 1.6;
		color: #333333;
	}
	.panel-white {
		width: 100%;
		margin: 20px 0;
		font-size: 13px;
		.info-link a {
			font-size: 13px;
		}
		.panel-footer {
			border-top: none;
			text-align: center;
			background-color: #ffffff;
		}
	}
	.support-link {
		width: 100%;
		text-align: center;
		margin-top: 80px;
		a {
			display: inline-flex;
			align-items: center;
			padding: 10px 20px;
			font-size: 14px;
			img {
				width: 100px;
				margin-right: 8px;
			}
		}
	}

	/* スケルトンローディング */
	.skeleton {
		position: relative;
		overflow: hidden;
		background-color: #e0e0e0;
		border-radius: 5px;
	}
	.skeleton::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
		transform: translateX(-100%);
		animation: skeleton-shimmer 1.5s ease-in-out infinite;
	}
	@keyframes skeleton-shimmer {
		100% {
			transform: translateX(100%);
		}
	}
	.skeleton-image {
		width: 100%;
		aspect-ratio: 16 / 9;
		margin-bottom: 40px;
	}
	.skeleton-title {
		height: 18px;
		width: 70%;
		margin: 0 auto 24px;
	}
	.skeleton-text {
		height: 14px;
		margin: 0 0 12px;
	}
	.skeleton-text.short {
		width: 40%;
	}
}

/* 横幅800px以下ではお知らせエリアを非表示 */
@media (max-width: 800px) {
	.login-area .login-wrapper {
		margin: 0 auto;
	}
	.info-area {
		display: none;
	}
}