/* ************************************************************
メンバー
************************************************************ */

.card-img-member { position: relative; }

.member-index {
  padding-top: 50px;
  padding-bottom: 60px;
}

.parliament {
  margin-top: 60px;
}

/* ----- トップページの一覧 -------------------- */

.members-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 14px; row-gap: 30px;
	list-style: none; padding-left: 0; margin-bottom: 0;
}
.members-card-container img { width:100%; height:auto; border: 1px solid var(--color-border-soft); object-fit:cover; aspect-ratio: 1/1; }
/* IMG 直下の 10px 余白は .card-img-member 自身の margin-bottom に移して
   ホバーズーム時のクリップ枠（.card-img-member）と IMG 寸法を一致させる */
.members-card-container .card-img.card-img-member { margin-bottom: 10px; }
@media (max-width: 768px) {
	.members-container { grid-template-columns: repeat(2, 1fr); column-gap: 5px; row-gap: 20px; }
	}

/* ----- 一覧共通 -------------------- */

.member-list-position { font-size: 1em; line-height: 1.4em; margin-bottom: 0em; }
.module-members .member-list-position { font-size: 1em; letter-spacing: -.03em;}
.module-members .member-list-name { font-size: 1.8em; margin-bottom: .2em; }
.member-list-name {
	font-size: 2em;
	line-height: 1.3em;
	font-weight: 700;
	margin-top: 0em;
	margin-bottom: .25em;
}
.member-list-name-kana { font-size: .9em; line-height: 1em; margin-bottom: .5em; }
.member-list-career { font-size: 1em; margin-top: .25em; line-height: 1.6em; }

@media (max-width: 800px) {
	.member-list-position { font-size: 1em; line-height: 1.4em; }
	.module-members .member-list-position { letter-spacing: 0em; }
	.member-list-name { font-size: 1.6em; line-height: 1.5em; }
	.module-members .member-list-name { font-size: 1.3em; }
	.module-members .member-list-position { font-size: .9em; }
	.member .member-list-position { font-size: .9em; }
	.member .member-list-name { margin-bottom: 0; }
	.member-list-name-kana { font-size: .9em; line-height: 1em; margin-bottom: .5em; }
	.member-list-career { font-size: .9em; line-height: 1.3em; }
	}

/* ----- 一覧ページ -------------------- */

.member ul { list-style: none; padding-left: 0px; }
.member h2, .member .member-cat-title, .candidate h2 {
	font-size: 2em;
	line-height: 1.6em;
	font-weight: 900;
	overflow-wrap: anywhere;
	word-break: break-all;
	border-left: 10px solid var(--color-accent);
	padding-left: 10px;
	margin-top: 2em;
	}

@media (max-width: 800px) {
	.member h2, .member .member-cat-title, .candidate h2 { font-size: 1.6em; padding-top: 0; }
}

/* 議員カテゴリー見出し（h3）は h2（役員・メンバー）の下位。
   ウエイトと縦線を細くして、見た目でも階層差が分かるようにする */
.member .member-cat-title {
	font-weight: 700;
	border-left-width: 5px;
	}

/* 見出しと直後の人数表記（現職◯名／新人◯名）は一続きの情報なので、
   見出しの下マージン（ブラウザ既定の .83em）を半分に詰める。
   em 指定なので PC / SP どちらの見出しサイズでも半分になる。 */
.candidate h2:has(+ .candidate-count) { margin-bottom: .415em; }
.candidate-count { margin-top: 0; }
/* メンバー一覧の議員種別見出し（h3）と直後の人数（◯名）も同様に詰める。 */
.member .member-cat-title:has(+ .member-count) { margin-bottom: .415em; }
.member-count { margin-top: 0; }

.card-img.card-img-member img { background: var(--color-white); aspect-ratio: 1/1; width: 200px; }
/* サイトトップのメンバーセクションはカード幅に合わせて 100% */
.module-members .card-img.card-img-member img { width: 100%; }

/* SP は他アーカイブ（ブログ・お知らせ等）と同じ 100px 角サムネイルに揃える。
   汎用の .card-img img より詳細度が高いため、幅だけ 200px が残って
   高さ 100px との組み合わせで画像が潰れる。 */
@media (max-width: 768px) {
	.card-img.card-img-member img { width: 100px; }
}

/* ----- 個別ページ -------------------- */

/* メンバー単独ページの sub-header はパンくずしか入っていないため、
   グレー面がパンくずの直下で切れる。下に 1em 分の余白を足す */
.single-member .sub-header { padding-bottom: 1em; }

.entry-header-member { padding-top:60px; margin-bottom:40px; }
.entry-header-member h1 { font-size: 2.2em; line-height:1em; font-weight: 900; margin-top:.5em; margin-bottom:.2em; }
.member-titlepost { font-size: 1.4em; letter-spacing:.05em; font-weight: 700; }
.member-name-kana { font-size: 1em; letter-spacing:.2em; }
.member-catchphrase { font-size: 2em; line-height: 1.5em; font-weight: 700; margin-bottom:1em; }

.member-prof-img-single { display: flex; list-style:none; padding-left: 0em; }
.member-prof-img-single li { width: 50%; }
.member-prof-img-single li:first-child { width: 50%; margin-right:20px; background:var(--color-white); }
.member-prof-img-single img { width: 100%; border: 1px solid var(--color-border-soft); object-fit: cover; aspect-ratio: 1;}
.member-prof-spec { font-size:1em; }

@media (max-width: 768px) {
	.entry-header-member { padding-top:30px; margin-bottom:20px; }
	.entry-header-member h1 { font-size: 2em;  margin-top:.3em; margin-bottom:.1em;}
	.member-titlepost { font-size: 1.1em; }
	.member-name-kana { font-size: 1em; }
	.member-catchphrase { font-size: 1.4em; font-weight: 700; margin-top:1em; margin-bottom:1em; }
	.member-prof-img-single li:first-child { margin-right:10px; }
	}

.member-account-area { padding-top: 10px; }
.member-account-area ul { padding-left:0px; }

/* 下のアキを写真とのアキ（写真 ul の既定マージン 1em ＋ .member-account-area の padding-top）に揃える。
   次の要素（出馬情報の margin-top 1em／プロフィールは 0）とは相殺されるので、この値がそのまま空きになる */
.member-account-list { display: flex; list-style:none; margin-top: 10px; margin-bottom: calc(1em + 10px);}
.member-account-list-item { margin-right: 20px;}
.member-account-list-item:last-child { margin-right: 0;}
.member-sns-item-link { display: block; }
.member-account-icon {height: 50px; width: 50px;}

@media (max-width: 768px) {
	.member-account-area { padding-top: 0px; }
	.member-account-list { display: flex; list-style:none;  margin-top: 5px; margin-bottom: 1em;}
	.member-account-list-item { margin-right: 15px;}
	.member-sns-item-link { display: block; margin: 5px; }
	.member-account-icon {height: 40px; width: 40px;}
	}

.member-prof-spec ul  {
	list-style: none;
	padding-left: 1.3em;
}
.member-prof-spec ul li {
	font-size: 1em; 
	text-indent: -1.3em;
}
.member-prof-spec ul li::before { content: "●"; content: "●" / ""; color: var(--color-accent); margin-right: .3em; }

/* 経歴・特記事項（wysiwyg）で入力したリストは、一覧ページ用の .member ul リセットを
   打ち消して行頭記号を出す。インデントは付けず本文の左端に揃える */
.member .member-career ul,
.member .member-info-spacial ul { list-style: disc outside; padding-left: 1.2em; margin-left: 0; }
.member .member-career ol,
.member .member-info-spacial ol { list-style: decimal outside; padding-left: 1.6em; margin-left: 0; }

/* 所属委員会等：ラベル直下の余白を詰める（wysiwyg が出力する p / ul / ol の上マージンを消す） */
.member-prof-spec .member-aff > p,
.member-prof-spec .member-aff > ul,
.member-prof-spec .member-aff > ol { margin-top: 0; }

@media (max-width: 768px) {
	.member-prof-spec ul  {
	padding-left: 0em;
}
	.member-prof-spec ul li {
	padding-left: 1.3em;
	text-indent: -1.3em;
	}
}

/* 肩書（.member-titlepost）の直下に並べるため、字送りを揃えたうえで
   フォントサイズだけ .2em 小さくする。強調は背景色ではなく下線で行う */
.member-info-election-single {
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: .05em;
	text-decoration: underline; text-decoration-color: var(--color-accent);
	text-underline-offset: .3em; text-decoration-thickness: 3px;
	margin-top: .2em;
	}
.member-info-spacial {
	font-size: 1.2em; font-weight: 700; line-height: 1.8em;
	text-decoration: underline; text-decoration-color: var(--color-accent);
	text-underline-offset: .3em; text-decoration-thickness: 3px;
	}
@media (max-width: 768px) {
.member-info-election-single {
	font-size: .9em;
	line-height: 1.6em;
	margin-top: .25em;
	}
.member-info-spacial {
	font-size: 1em; line-height: 1.8em;
	}
}

.return-member { margin-top: 30px; }
.return-member-candidate { margin-top: 90px; }

/* 議席の塊（1行目＝議会名、続く行＝選挙区と当選回数・区域）。● は付けず、続く行も字下げしない */
.member-prof-block__head { font-weight: 700; }
.member-prof-block__line { display: block; }

/* 経歴の1行目に置く生年月日。その下を1行（行の高さ1つ分）あける。
   次の段落の上マージン（1em）とは相殺されるので、こちらの値がそのまま空きになる */
.member-career__birth { margin: 0 0 1.6em; margin-bottom: 1lh; }

/* 出馬情報（特別なセクション）。SNS の下にアクセントカラーの 2px 罫線で挟む */
.member-election {
	border-top: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
	padding: 1em 0; margin: 1em 0 1.2em;
	}
.member-election__title { font-weight: 700; }

/* 選挙区の区域が長いとき（衆議院の小選挙区など）は、選挙区の文字列を押して開閉する */
/* style.css の button 共通指定（inline-flex・幅100%・中央寄せ・太字）を打ち消し、文中の文字列として置く */
.member-area__toggle {
	display: inline; width: auto; gap: 0;
	padding: 0; border: 0; background: none; font: inherit; line-height: inherit; text-align: left;
	color: var(--color-primary); cursor: pointer;
	text-decoration: underline; text-underline-offset: .2em;
	}
/* style.css の button:hover（黄色の塗り・下線を消す。!important 付き）も打ち消す */
.member-area__toggle:hover { background: none; text-decoration: underline !important; text-decoration-thickness: 2px; }
.member-area__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.member-area__toggle::after {
	content: ""; display: inline-block; width: .45em; height: .45em; margin: 0 .3em 0 .5em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-.2em) rotate(45deg); transition: transform .35s ease;
	}
.member-area__toggle[aria-expanded="true"]::after { transform: translateY(.05em) rotate(-135deg); }
/* リストのぶら下げインデント（text-indent）を打ち消し、● の後ろの文字位置に揃える。
   開閉のアニメーションは .member-area__body の高さで行う（js/common.js）。
   高さを動かす要素に padding を持たせると 0 まで畳めず最後にがたつくので、
   余白は内側の .member-area__inner に置く */
.member-area__body { display: block; text-indent: 0; overflow: hidden; transition: height .35s ease; }
.member-area__body[hidden] { display: none; }
.member-area__inner { display: block; padding-top: .2em; }
@media (prefers-reduced-motion: reduce) {
	.member-area__body, .member-area__toggle::after { transition: none; }
	}