@charset "UTF-8";

/*
 * 会員ログインページ（page-login.php）のスタイル。
 *
 * メインビジュアルは page-first.css を流用しているため、
 * functions.php で 'first' を extends に指定している。
 *
 * モバイルファースト。PC は 840px 以上。
 */

.p-login {
	--lg-cream: #fdf5f1;
	--lg-line: #e7ded9;
}

/* --------------------------------------------------------------------------
   1. メインビジュアル
   背景の写真を入れないぶん、文字だけが左に寄る形になる。
   -------------------------------------------------------------------------- */
.p-login__mv {
	padding: 40px 0;
	background-color: var(--lg-cream);
}

.p-login__mv .p-legal__head {
	text-align: center;
}

.p-login__mv .p-legal__title {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   2. 各連盟のログイン画面へのボタン
   -------------------------------------------------------------------------- */
.p-login__main {
	padding: 40px 0 56px;
	background-color: var(--color-bg);
}

.p-login__lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	text-align: center;
	color: var(--color-text-body);
}

.p-login__services {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.p-login__service {
	text-align: center;
}

/* ボタンは3つとも同じ幅・同じ高さ */
.p-login__button {
	width: 100%;
	min-height: 60px;
	border-radius: 10px;
	font-size: 17px;
}

.p-login__service-name {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--color-text-muted);
}

/* --- 注意書き --- */
.p-login__note {
	margin-top: 36px;
	padding: 20px;
	border-radius: 12px;
	background-color: var(--lg-cream);
}

.p-login__note p {
	margin: 0;
	font-size: 12px;
	line-height: 1.9;
	color: var(--color-text-body);
}

.p-login__tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-top: 14px !important;
	padding-top: 14px;
	border-top: 1px solid var(--lg-line);
}

.p-login__tel-label {
	font-size: 11px;
	color: var(--color-text-muted);
}

.p-login__tel-number {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PC（840px 以上）
   ========================================================================== */
@media (min-width: 840px) {
	.p-login__mv .p-legal__title {
		font-size: 37px;
		letter-spacing: .1em;
	}

	.p-login__mv {
		padding-bottom: 48px;
	}

	.p-login__main {
		padding: 72px 0 100px;
	}

	.p-login__lead {
		font-size: 16px;
	}

	/* ボタンは3つ横並び */
	.p-login__services {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		margin-top: 48px;
	}

	.p-login__button {
		min-height: 72px;
		font-size: 16px;
	}

	.p-login__service-name {
		margin-top: 12px;
		font-size: 13px;
	}

	.p-login__note {
		margin-top: 56px;
		padding: 28px 40px;
		text-align: center;
	}

	.p-login__note p {
		font-size: 13px;
	}

	.p-login__tel {
		margin-top: 20px !important;
		padding-top: 20px;
	}

	.p-login__tel-number {
		font-size: 24px;
	}
}

/* ロゴと連盟名をまとめ、カード全体からログインできる。 */
.p-login__card{display:flex;flex-direction:column;align-items:center;height:100%;padding:28px 20px 20px;background:#fff;border:1px solid var(--lg-line);border-radius:8px;color:var(--color-text-body);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.p-login__logo{display:flex;align-items:center;justify-content:center;width:100%;height:88px;margin-bottom:20px}
.p-login__logo img{display:block;max-width:100%;width:auto;height:auto;max-height:76px;object-fit:contain}
.p-login__service-name{display:block;min-height:3.4em;margin:0 0 16px;line-height:1.7;font-size:12px}
.p-login__card .p-login__button{margin-top:auto;min-height:52px;border-radius:5px;font-size:14px;padding:12px 14px;line-height:1.6}
.p-login__card:hover{border-color:var(--color-primary);box-shadow:0 6px 20px rgba(26,19,17,.08)}
.p-login__card:hover .p-login__button{background:var(--color-primary-dark)}
.p-login__card:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}
@media(min-width:840px){.p-login__card{padding:32px 20px 24px}.p-login__service-name{margin:0 0 20px;font-size:12px}.p-login__services{align-items:stretch}}
@media(prefers-reduced-motion:reduce){.p-login__card{transition:none}}