/* =========================================================
 * 会員限定機能 用スタイル
 * テーマの色に合わせて下の変数だけ変更してください
 * ======================================================= */
:root {
	--km-primary: #104C87;      /* メインカラー（サイトの紺色） */
	--km-primary-text: #fff;
	--km-text: #222;
	--km-muted: #666;
	--km-border: #ddd;
	--km-bg: #fafafa;
	--km-radius: 8px;
}

/* ---------- 会員限定の案内ボックス ---------- */
.km-gate {
	position: relative;
	margin: 2.5em 0;
	padding: 2em 1.5em;
	text-align: center;
	background: var(--km-bg);
	border: 1px solid var(--km-border);
	border-radius: var(--km-radius);
}
.km-gate::before { /* 直前の本文をフェードアウトさせる */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 80px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}
.km-gate__title {
	margin: 0 0 .5em;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--km-text);
}
.km-gate__text {
	margin: 0 0 1.25em;
	font-size: .95em;
	color: var(--km-muted);
}
.km-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
	justify-content: center;
}

/* ---------- ボタン ---------- */
.km-btn {
	display: inline-block;
	padding: .8em 1.6em;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--km-primary);
	border-radius: var(--km-radius);
	cursor: pointer;
	transition: opacity .2s;
}
.km-btn--primary,
.km-btn--primary:link,
.km-btn--primary:visited { background: var(--km-primary); color: var(--km-primary-text); }
.km-btn--ghost,
.km-btn--ghost:link,
.km-btn--ghost:visited { background: #fff; color: var(--km-primary); }
/* テーマの a:hover（文字色を紺に固定・下線を消す）を打ち消す */
.km-btn:hover,
.km-btn:focus {
	border-color: var(--km-primary);
	border-bottom-color: var(--km-primary);
	text-decoration: none;
}
.km-btn--primary:hover,
.km-btn--primary:focus {
	background: #0b3a68;
	color: #fff !important;
}
.km-btn--ghost:hover,
.km-btn--ghost:focus {
	background: var(--km-primary);
	color: #fff !important;
}
.km-btn--block { display: block; width: 100%; }

/* ---------- フォーム ---------- */
.km-form {
	max-width: 480px;
	margin: 0 auto 2em;
}
.km-form__heading {
	margin: 1.5em 0 1em;
	font-size: 1.1em;
}
.km-field {
	display: block;
	margin-bottom: 1.1em;
}
.km-field span {
	display: block;
	margin-bottom: .35em;
	font-size: .9em;
	font-weight: 700;
	color: var(--km-text);
}
.km-field input {
	box-sizing: border-box;
	width: 100%;
	padding: .75em .9em;
	font-size: 16px; /* iPhoneのズーム防止 */
	border: 1px solid var(--km-border);
	border-radius: var(--km-radius);
	background: #fff;
}
.km-field input:focus {
	outline: none;
	border-color: var(--km-primary);
	box-shadow: 0 0 0 3px rgba(16, 76, 135, .15);
}
.km-check {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 1.4em;
	font-size: .9em;
}
.km-form__note,
.km-form__sub {
	font-size: .85em;
	color: var(--km-muted);
}
.km-form__sub {
	margin-top: 1.2em;
	text-align: center;
	line-height: 1.9;
}
.km-hp { /* スパム対策用（人には見えない） */
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- お知らせ ---------- */
.km-notice {
	max-width: 480px;
	margin: 0 auto 1.5em;
	padding: .9em 1.1em;
	font-size: .9em;
	border-radius: var(--km-radius);
}
.km-notice ul { margin: 0; padding-left: 1.2em; }
.km-notice--error { background: #fdecec; color: #a12020; border: 1px solid #f5c2c2; }
.km-notice--success { background: #eaf7ee; color: #1d6b35; border: 1px solid #bfe5cb; }

/* ---------- マイページ ---------- */
.km-mypage {
	max-width: 480px;
	margin: 0 auto;
}
.km-mypage__hello {
	font-size: 1.1em;
	font-weight: 700;
}
.km-mypage__info {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5em 1em;
	margin: 1em 0 2em;
	padding: 1em 1.2em;
	font-size: .92em;
	background: var(--km-bg);
	border-radius: var(--km-radius);
}
.km-mypage__info dt { font-weight: 700; color: var(--km-muted); }
.km-mypage__info dd { margin: 0; word-break: break-all; }
.km-mypage__logout { text-align: center; }

/* =========================================================
 * 会員登録・ログイン・プロフィール（WP-Members）のフォーム
 * ※ WP-Members のCSSより後に効くよう body から指定
 * ======================================================= */
body .km-member-page {
	background: #fff;
}
body .km-member-page .inner {
	padding: 4em 5% 6em;
	background: none;
}
.km-lead {
	max-width: 480px;
	margin: 0 auto 2.5em;
	font-size: .95em;
	line-height: 1.8;
	color: var(--km-muted);
}
body #wpmem_reg,
body #wpmem_login,
body #wpmem_msg,
body .wpmem_msg {
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
}
/* 記事ページ内に表示されたときの余白 */
body .news-content #wpmem_login,
body .news-content #wpmem_reg {
	margin: 2.5em auto;
}
body .news-content .wpmem_msg,
body .news-content #wpmem_msg {
	margin: 2.5em auto 0;
}
body #wpmem_reg fieldset,
body #wpmem_login fieldset {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}
body #wpmem_reg legend,
body #wpmem_login legend {
	display: none;
}
body #wpmem_reg label,
body #wpmem_login label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 .5em;
	padding: 0;
	font-size: .9em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--km-text);
	text-align: left;
}
body :is(#wpmem_reg, #wpmem_login) .req {
	margin-left: .2em;
	color: #ca353b;
}
body #wpmem_reg .div_text,
body #wpmem_login .div_text {
	float: none;
	width: 100%;
	margin: 0 0 1.6em;
	padding: 0;
}
body #wpmem_reg input[type=text],
body #wpmem_reg input[type=email],
body #wpmem_reg input[type=password],
body #wpmem_login input[type=text],
body #wpmem_login input[type=password] {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0;
	padding: .9em 1em;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: normal;
	color: var(--km-text);
	background: #fff;
	border: 1px solid #c8ccd2;
	border-radius: 4px;
	transition: border-color .2s, box-shadow .2s;
}
body #wpmem_reg input:focus,
body #wpmem_login input:focus {
	outline: none;
	border-color: var(--km-primary);
	box-shadow: 0 0 0 3px rgba(16, 76, 135, .15);
}
body :is(#wpmem_reg, #wpmem_login) .button_div {
	float: none;
	width: 100%;
	margin: .4em 0 0;
	padding: 0;
	text-align: left;
}
body #wpmem_login .button_div input[type=checkbox] {
	margin: 0 .4em 0 0;
	vertical-align: middle;
}
body #wpmem_login .button_div label[for=rememberme] {
	display: inline;
	margin: 0;
	font-weight: normal;
	vertical-align: middle;
}
body :is(#wpmem_reg, #wpmem_login) input[type=submit] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 1.6em 0 0;
	padding: 1.1em;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: .1em;
	color: #fff;
	background: var(--km-primary);
	border: none;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	transition: opacity .2s;
	-webkit-appearance: none;
}
body :is(#wpmem_reg, #wpmem_login) input[type=submit]:hover {
	opacity: .85;
}
body :is(#wpmem_reg, #wpmem_login) .req-text,
body :is(#wpmem_reg, #wpmem_login) .link-text {
	float: none;
	width: 100%;
	margin: 1.4em 0 0;
	font-size: .85em;
	line-height: 1.6;
	color: var(--km-muted);
	text-align: center;
}
body :is(#wpmem_reg, #wpmem_login) .link-text + .link-text {
	margin-top: .5em;
}
body :is(#wpmem_reg, #wpmem_login) .link-text a {
	color: var(--km-primary);
	text-decoration: underline;
}
/* エラー・完了メッセージ */
body #wpmem_msg,
body .wpmem_msg {
	box-sizing: border-box;
	margin-bottom: 2em;
	padding: 1em 1.2em;
	font-size: .9em;
	text-align: center;
	background: #eef3f9;
	color: #104C87;
	border: 1px solid #c9d8ea;
	border-radius: 4px;
}
/* プロフィールページのリンク一覧 */
.km-member-page .inner > ul,
#wpmem_profile ul {
	max-width: 480px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	list-style: none;
	border-top: 1px solid #ddd;
}
.km-member-page .inner > ul li,
#wpmem_profile ul li {
	padding: 1em .5em;
	border-bottom: 1px solid #ddd;
}

@media (max-width: 519px) {
	body .km-member-page .inner {
		padding: 3em 6% 4em;
	}
}
.km-switch {
	margin: 2em 0 0;
	font-size: .9em;
	color: var(--km-muted);
}
.km-switch a {
	color: var(--km-primary);
	text-decoration: underline;
}

/* 姓・名（PCは横並び） */
.km-name {
	display: flex;
	gap: 1.2em;
}
.km-name__col {
	flex: 1;
	min-width: 0;
}
@media (max-width: 519px) {
	.km-name {
		display: block;
	}
}
/* 完了メッセージ（エラー以外）は紺系 */
.wpmem_msg p {
	margin: .3em 0;
}