@charset "UTF-8";
/* E-club */

.btnCommon, .btnCommon:hover{
	color: #FFFFFF !important;
	font-weight: bold;
}

.btnCommon {
	width: 60%;
	margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
	.btnCommon {
		width: 100%;
	}
}

/* ========================================================================
   組織・概要「委員会構成及び委員」(.committeeOrg) の表を整える。
   素の <table> だと th{text-align:right;width:15%} によりラベルと氏名が離れ
   散漫になるため、役員/理事会/委員会それぞれに合わせて列幅・配置を調整する。
   モバイル(<=768px)は共通の縦積みテーブル表示に委ねる (色のアクセントのみ適用)。
   ======================================================================== */

/* 見出しに Rotary ブルーのアクセントバー */
.committeeOrg h2 {
	margin: 30px 0 10px;
	padding: 4px 0 4px 12px;
	border-left: 5px solid #005DAA;
	font-size: 1.8rem;
	line-height: 1.4;
	color: #333;
}

.committeeOrg > p.mgb20 {
	color: #555;
}

.committeeOrg table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 10px;
}

.committeeOrg th,
.committeeOrg td {
	padding: 12px 14px;
	vertical-align: middle;
}

/* 役員・特別代表: ラベル(th)を Rotary ブルーの太字に */
.committeeOrg .officers th,
.committeeOrg .special th {
	color: #005DAA;
	font-weight: bold;
}

/* 委員会: 委員会名(th 先頭列)を青ラベル、先頭行を青帯ヘッダーに */
.committeeOrg .committees th:first-child {
	color: #005DAA;
	font-weight: bold;
}

/* ヘッダー行はべた塗りの青帯だと強すぎるため、薄グレー地＋青文字＋細い下線の
   落ち着いたトーンにする。 */
.committeeOrg .committees tr:first-child th {
	background: #eef2f6;
	color: #005DAA;
	font-weight: bold;
	border-bottom: 2px solid #cdd9e5;
	white-space: nowrap;
}

@media screen and (min-width: 769px) {
	/* 特別代表: ラベル(th)を右寄せ、氏名は左寄せ (補佐3名は横並び) */
	.committeeOrg .special th {
		width: 22%;
		text-align: right;
		white-space: nowrap;
	}
	.committeeOrg .special td {
		text-align: left;
	}

	/* 役員: [ラベル20% 氏名30%] を2組で1行。ラベルは右寄せで氏名に寄せる */
	.committeeOrg .officers th {
		width: 20%;
		text-align: right;
		white-space: nowrap;
	}
	.committeeOrg .officers td {
		width: 30%;
		text-align: left;
	}

	/* 理事会: 氏名を3列均等の中央寄せにして均整をとる */
	.committeeOrg .board td {
		width: 33.33%;
		text-align: center;
		white-space: nowrap;
	}

	/* 委員会: 委員会名列は右寄せで委員長名に寄せ、委員長/副委員長は左寄せ */
	.committeeOrg .committees th:first-child {
		width: 22%;
		text-align: right;
		white-space: nowrap;
		padding-right: 1.4em;
	}
	.committeeOrg .committees td {
		width: 39%;
		text-align: left;
	}
	/* 先頭行の「委員会」ヘッダーも列に合わせて右寄せ (色はヘッダー共通の青文字) */
	.committeeOrg .committees tr:first-child th:first-child {
		text-align: right;
	}
}

@media screen and (max-width: 768px) {
	/* 委員会は縦積みにすると委員長/副委員長の区別が失われ青帯も分断されるため、
	   モバイルでも 3 列テーブルを維持する (共通の縦積みルールを上書き)。 */
	.committeeOrg .committees tr {
		display: table-row;
	}
	.committeeOrg .committees th,
	.committeeOrg .committees td {
		display: table-cell;
		width: auto;
		padding: 8px 6px;
		font-size: 1.2rem;
	}
	.committeeOrg .committees th:first-child {
		text-align: right;
		background: transparent;
		padding-right: 0.6em;
		white-space: nowrap;
	}
	.committeeOrg .committees tr:first-child th {
		background: #eef2f6;
	}
}