/*
	会員エリア・入会案内 専用スタイル（members.css）
	main.css（サイト共通・HTML5UP Editorial ベース）の上に読み込む追加スタイル。
	既存ページに影響しないよう、すべて mbr- プレフィックスのクラスに限定する。
	配色はサイト共通トーンに合わせる: アクセント #1a7a3c / 本文 #3d4449 / 補助 #7f888f
*/

/* 深緑（--deep-green）は colors.css の 1 行で決める（第152次）。@import は他の規則より前に置く */
@import url("colors.css");

/* ---- 会員エリア上部バー（トップ紙面のユーティリティバーと同トーン。第152次 AP1 で黒から深緑に） ---- */

.mbr-topbar {
	background: var(--deep-green);
	color: #eeeeee;
	font-size: 0.8em;   /* 可読性改修(2026-07-18): 0.75→0.8em(基準18px化と合わせ約14.4px) */
	line-height: 1.6;
	padding: 0.6em 1.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em 1.5em;
	flex-wrap: wrap;
}

.mbr-topbar a {
	color: #eeeeee;
	border-bottom: none;
	padding: 0.35em 0;   /* タップ領域の確保(可読性改修2026-07-18で拡大) */
}

.mbr-topbar a:hover {
	color: #ffffff !important;
	border-bottom: solid 1px #ffffff;
}

/* ---- お知らせ・状態表示ボックス ---- */

.mbr-notice {
	border: solid 1px rgba(210, 215, 217, 0.75);
	border-left-width: 6px;
	border-radius: 0.375em;
	padding: 0.9em 1.1em;
	margin: 0 0 1.5em 0;
	font-size: 0.9em;
	line-height: 1.75;
	background: #ffffff;
}

.mbr-notice strong {
	display: block;
	margin-bottom: 0.15em;
}

.mbr-notice--info {
	border-left-color: #1a7a3c;
	background: #f4faf1;
}

.mbr-notice--warn {
	border-left-color: #e0a800;
	background: #fdf8ec;
}

.mbr-notice--error {
	border-left-color: #d9534f;
	background: #fdf1f0;
}

.mbr-notice--error strong {
	color: #b94743;
}

/* ---- ログインカード ---- */

.mbr-login-wrap {
	max-width: 30em;
	margin: 0 auto;
}

.mbr-login-card {
	background: #ffffff;
	border: solid 1px rgba(210, 215, 217, 0.75);
	border-top: solid 4px #1a7a3c;
	border-radius: 0.375em;
	box-shadow: 0 0.125em 0.75em 0 rgba(61, 68, 73, 0.06);
	padding: 2em 2em 1.5em 2em;
	margin-bottom: 1.5em;
}

.mbr-login-card h2 {
	font-size: 1.1em;
	margin-bottom: 1em;
}

.mbr-login-card label {
	color: #3d4449;
	display: block;
	font-size: 0.9em;
	font-weight: bold;
	margin: 0 0 0.5em 0;
}

.mbr-login-card input[type="text"],
.mbr-login-card input[type="password"] {
	width: 100%;
	margin-bottom: 1.25em;
}

.mbr-login-card input[type="submit"] {
	width: 100%;
	background-color: #1a7a3c;
	color: #ffffff !important;
	box-shadow: none;
}

.mbr-login-card input[type="submit"]:hover {
	background-color: #14602f;
}

.mbr-login-help {
	font-size: 0.9em;   /* 可読性改修(2026-07-18): 0.85→0.9em */
	color: #7f888f;
	line-height: 1.75;
}

@media screen and (max-width: 480px) {
	.mbr-login-card {
		padding: 1.5em 1.25em 1.25em 1.25em;
	}
}

/* ---- 会員トップ: セクションカード ---- */

.mbr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
	gap: 1.25em;
	margin: 0 0 2em 0;
}

.mbr-card {
	background: #ffffff;
	border: solid 1px rgba(210, 215, 217, 0.75);
	border-radius: 0.375em;
	padding: 1.4em 1.4em 1.1em 1.4em;
	display: flex;
	flex-direction: column;
}

.mbr-card h3 {
	font-size: 1em;
	margin-bottom: 0.5em;
}

.mbr-card h3 a {
	border-bottom: none;
	color: #3d4449;
}

.mbr-card h3 a:hover {
	color: #1a7a3c;
}

.mbr-card p {
	font-size: 0.9em;   /* 可読性改修(2026-07-18): 0.85→0.9em */
	line-height: 1.75;
	margin-bottom: 1em;
	flex-grow: 1;
}

.mbr-card .mbr-card-link {
	font-size: 0.9em;
	font-weight: bold;
}

/* ---- 会員バー（ログイン中の組織名・ログアウト） ---- */

.mbr-userbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em 1em;
	border: solid 1px rgba(210, 215, 217, 0.75);
	border-radius: 0.375em;
	background: #f7f8f9;
	padding: 0.7em 1.1em;
	margin: 0 0 2em 0;
	font-size: 0.9em;
}

.mbr-userbar .mbr-userbar-org {
	color: #3d4449;
}

/* ---- 準備中バッジ ---- */

.mbr-tag {
	display: inline-block;
	font-size: 0.75em;   /* 可読性改修(2026-07-18): 0.7→0.75em */
	font-weight: bold;
	color: #7f888f;
	border: solid 1px rgba(210, 215, 217, 0.9);
	border-radius: 0.3em;
	padding: 0.1em 0.6em;
	margin-left: 0.6em;
	vertical-align: middle;
	white-space: nowrap;
}

.mbr-tag--new {
	color: #1a7a3c;
	border-color: #1a7a3c;
}

/* ---- 入会案内: 特長グリッド ---- */

.mbr-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
	gap: 1.25em;
	margin: 0 0 2em 0;
}

.mbr-feature {
	background: #ffffff;
	border: solid 1px rgba(210, 215, 217, 0.75);
	border-radius: 0.375em;
	padding: 1.4em;
}

.mbr-feature h4 {
	font-size: 0.95em;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: solid 2px #1a7a3c;
}

.mbr-feature p {
	font-size: 0.9em;   /* 可読性改修(2026-07-18): 0.85→0.9em */
	line-height: 1.75;
	margin-bottom: 0;
}

/* ---- 入会案内: 料金カード ---- */

.mbr-price-card {
	background: #ffffff;
	border: solid 2px #1a7a3c;
	border-radius: 0.375em;
	max-width: 26em;
	margin: 0 auto 2em auto;
	overflow: hidden;
	text-align: center;
}

.mbr-price-card .mbr-price-head {
	background: #1a7a3c;
	color: #ffffff;
	font-weight: bold;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	padding: 0.6em 1em;
}

.mbr-price-card .mbr-price-body {
	padding: 1.5em 1.5em 1.75em 1.5em;
}

.mbr-price-card .mbr-price-amount {
	font-size: 2em;
	font-weight: bold;
	color: #3d4449;
	line-height: 1.2;
}

.mbr-price-card .mbr-price-amount small {
	font-size: 0.45em;
	font-weight: normal;
	color: #7f888f;
}

.mbr-price-card ul {
	list-style: none;
	text-align: left;
	font-size: 0.9em;   /* 可読性改修(2026-07-18): 0.85→0.9em */
	margin: 1.25em 0 0 0;
	padding: 0;
}

.mbr-price-card ul li {
	padding: 0.45em 0 0.45em 1.5em;
	border-top: dotted 1px rgba(210, 215, 217, 0.9);
	position: relative;
}

.mbr-price-card ul li::before {
	content: "\2713";
	color: #1a7a3c;
	font-weight: bold;
	position: absolute;
	left: 0.2em;
}

/* ---- 入会案内: ご利用開始までの流れ ---- */

.mbr-steps {
	list-style: none;
	counter-reset: mbr-step;
	margin: 0 0 2em 0;
	padding: 0;
}

.mbr-steps li {
	counter-increment: mbr-step;
	position: relative;
	padding: 0 0 1.25em 3em;
	font-size: 0.9em;
	line-height: 1.75;
}

.mbr-steps li::before {
	content: counter(mbr-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 50%;
	background: #1a7a3c;
	color: #ffffff;
	font-weight: bold;
}

.mbr-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1em;
	top: 2.2em;
	bottom: 0.2em;
	border-left: solid 2px rgba(26, 122, 60, 0.35);
}

.mbr-steps li strong {
	display: block;
	color: #3d4449;
}

/* ---- ファイル一覧テーブルの補助 ---- */

.mbr-filelist td .mbr-filesize {
	color: #7f888f;
	font-size: 0.9em;
	white-space: nowrap;
}

/* ---- CTA（問い合わせ導線） ---- */

.mbr-cta {
	text-align: center;
	background: #f4faf1;
	border: solid 1px rgba(26, 122, 60, 0.4);
	border-radius: 0.375em;
	padding: 1.75em 1.5em;
	margin: 0 0 2em 0;
}

.mbr-cta p {
	margin-bottom: 1em;
}

.mbr-cta .button {
	background-color: #1a7a3c;
	color: #ffffff !important;
	box-shadow: none;
}

.mbr-cta .button:hover {
	background-color: #14602f;
}

/* -------------------------------------------------------------
   動画コーナー（会員側・config/video.json 駆動）
   トップ index-wsj-b.html の .video-* と同じ見え方に合わせる
------------------------------------------------------------- */
.mbr-video-list {
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
}

.mbr-video-item {
	margin: 0 0 2em;
	padding: 0 0 2em;
	border-bottom: 1px solid #d8d8d4;
}

.mbr-video-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.mbr-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #f4f4f0;
	border: 1px solid #d8d8d4;
}

.mbr-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mbr-video-title {
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.5;
	margin: 0.6em 0 0.2em;
}

.mbr-video-meta {
	font-size: 0.85em;
	color: #6b6b66;
	margin: 0 0 0.4em;
}

.mbr-video-summary {
	margin: 0;
}