/* ==========================================================================
   会員データページ（page-members.php）
   メインビジュアルと CTA は page-first.css を流用しているため、
   ここではこのページ固有のセクションだけを定義しています。
   - SP ファーストで記述し840px 以上を PC レイアウトとしています。
   ========================================================================== */

.p-members {
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   数値の丸＋装飾ウェーブ

   デザイン（1440px 基準）の寸法:
     帯の高さ 227px / 丸 228px / 丸の間隔 35px
     ウェーブは帯の上端から高さ 116px の位置に重なる

   ウェーブと丸を同じマス目に重ね、
   ウェーブは上寄せ、丸は帯いっぱいに配置している。
   -------------------------------------------------------------------------- */
.p-members__figures {
	background-color: var(--color-bg);
}

.p-members__band {
	position: relative;
	display: grid;
	/* 丸の大きさ。画面幅に応じて縮む */
	--circle-size: clamp(88px, 21vw, 228px);
	--circle-gap: clamp(8px, 2.4vw, 35px);
	min-height: var(--circle-size);
}

.p-members__band > * {
	grid-area: 1 / 1;
}

/* ウェーブは帯の上側に配置し、丸の後ろに回す */
.p-members__band-wave {
	align-self: start;
	z-index: 0;
	/* デザインでは帯の上端にウェーブが重なる */
	margin-top: 0;
}

/* 丸（画像）を横一列に並べる */
.p-members__circles {
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--circle-gap);
	margin: 0;
	padding: 0 var(--header-pad-sp);
	list-style: none;
}

.p-members__circle {
	flex: 0 0 auto;
	width: var(--circle-size);
}

/*
 * 丸の画像。未配置のあいだはグレーの丸を表示する。
 * 画像は円形に切り抜くので、四角いまま配置して構わない。
 */
.p-members__circle img,
.p-members__circle .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   PC（840px 以上）
   -------------------------------------------------------------------------- */
@media (min-width: 840px) {

	.p-members__band {
		--circle-size: 228px;
		--circle-gap: 35px;
		min-height: 227px;
	}

	.p-members__circles {
		padding-inline: var(--header-pad-pc);
	}
}

/* ==========================================================================
   以下、続きのセクション
   グラフは画像ではなく CSS で描いています。
   数値はテキストのまま残しているため、拡大・読み上げ・検索に対応できます。
   配色はデザイン（Figma）で確定しているものをそのまま使用しています。
   ========================================================================== */

.p-members {
	--m-cream: #fdf3ee;        /* パネルの背景 */
	--m-panel: #fef8f5;        /* 連盟ネットワークのパネル */
	--m-card-head: #FEF7F3;    /* カード見出しの帯 */
	--m-cyan: #00b5e2;         /* 男性・年収グラフ（面で使う色） */
	/*
	 * 文字に使う青。#00b5e2 は白背景だとコントラストが足りず
	 * 小さい文字が読みにくいため、文字だけ濃い色にしている。
	 */
	--m-cyan-ink: #0079a1;
	--m-gray: #d9d9d9;         /* 円グラフの残り */
	--m-track: #ececec;        /* 棒グラフの下地 */
	--m-line: #e6ded9;

	/*
	 * 年代・学歴グラフの配色（薄い→濃いの1色ランプ）。
	 * 年代も学歴も「順序のあるカテゴリ」なので、色相を変えず明度で段階をつけている。
	 * 明度の間隔をそろえ、いちばん薄い色でも白背景から見分けられる濃さにしてある
	 * （段階数が違うため、6段用と4段用を別に用意している）。
	 */
	--m-step-0: #FCEDE7;
	--m-step-1: #F9D9CB;
	--m-step-2: #F4B498;
	--m-step-3: #F19B75;
	--m-step-4: #EB723C;
	--m-step-5: #E54600;

	--m-edu-0: #FCEDE7;
	--m-edu-1: #F4B498;
	--m-edu-2: #F19B75;
	--m-edu-3: #E54600;
}

/* セクション共通のリード文 */
.p-members__lead {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 2;
	text-align: center;
	color: var(--color-text-body);
}

.p-cta__lead {
	text-align: left;
}

/* スマホは見出しが中央なので、下の一文も中央に揃える（会社概要ページと同じ指定） */
@media (max-width: 839px) {
	.p-cta__lead {
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   2. 連盟ネットワーク
   -------------------------------------------------------------------------- */
.p-members__network {
	padding: 48px 0;
	background-color: var(--color-bg);
}


/* 会員数の内訳 */
.p-members__counts {
	margin-top: 28px;
	padding: 24px 16px;
	border: 1px solid var(--color-primary);
	border-radius: 12px;
	text-align: center;
}

.p-members__counts-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.p-members__counts-title em {
	font-style: normal;
	color: var(--color-primary);
	font-family: var(--font-mincho);
	font-size: 1.5em;
	font-style: normal;
}

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

/* PC では点線で区切る */
.p-members__count + .p-members__count {
	padding-top: 20px;
	border-top: 3px dashed var(--m-line);
}

.p-members__count:nth-child(1) .p-members__count-badge {
	background-color: #FAA41D;
}
.p-members__count:nth-child(2) .p-members__count-badge {
	background-color: #F1801C;
}

.p-members__count:nth-child(1) .p-members__count-value {
	color: #FAA41D;
}

.p-members__count:nth-child(2) .p-members__count-value {
	color: #F1801C;
}

.p-members__count-badge {
	display: inline-block;
	min-width: 72px;
	padding: 3px 14px;
	border-radius: 999px;
	background-color: var(--color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.p-members__count-value {
	margin: 8px 0 0;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
}

.p-members__count-value span {
	margin-left: 2px;
	font-family: inherit;
	font-size: 0.7em;
	font-family: sans-serif;
	color: #1A1311;
	font-weight: 700;
}
.p-members__count-value {
	font-family: var(--font-mincho);
}

.p-members__count-note {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text-muted);
}

.p-members__counts-foot {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   3. 他社比較・複数連盟のメリット
   -------------------------------------------------------------------------- */
.p-members__compare {
	padding: 40px 0 0;
	background-color: var(--color-bg);
}

.p-members__compare-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 839px) {
	.p-members__compare-cards {
		max-width: 80vw;
		margin: 25px auto;
	}
}

.p-members__compare-card {
	border: 1px solid var(--color-primary);
	border-radius: 10px;
	overflow: hidden;
}

.p-members__compare-title {
	margin: 0;
	padding: 5px;
	background-color: var(--color-primary);
	color: #fff;
	font-family: var(--font-mincho);
	font-weight: 400;
	font-size: 19px;
	text-align: center;
}

.p-members__compare-body {
	display: grid;
	grid-template-columns: 1fr auto 1.4fr;
	align-items: end;
	gap: 8px;
	padding: 18px 12px;
}

.p-members__compare-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.p-members__compare-image {
	/* 親が align-items:center のため、明示しないと幅0につぶれる */
	align-self: stretch;
}

.p-members__compare-image img,
.p-members__compare-image .img-slot--empty {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 13;
	object-fit: contain;
}

.p-members__compare-side--ours .p-members__compare-image img,
.p-members__compare-side--ours .p-members__compare-image .img-slot--empty {
	aspect-ratio: 13 / 8;
}

.p-members__compare-num {
	margin: 10px 0 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.p-members__compare-num--other {
	color: var(--color-text);
}

.p-members__compare-num--ours {
	font-size: 34px;
	color: var(--color-primary);
}

.p-members__compare-prefix,
.p-members__compare-unit {
	font-size: .55em;
}

.p-members__compare-who {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.4;
}

.p-members__compare-who img,
.p-members__compare-who .img-slot--empty {
	width: 108px;
	height: auto;
	aspect-ratio: 60 / 11;
	object-fit: contain;
}

/* 中央の「<」 */
.p-members__compare-arrow {
	align-self: center;
	width: 14px;
	height: 26px;
	border-left: 4px solid var(--color-primary);
	border-bottom: 4px solid var(--color-primary);
	transform: rotate(45deg);
	margin-bottom: 28px;
}

/* --- 複数連盟のメリット --- */
.p-members__merits {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.p-members__merit {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* 追加 */
	padding: 20px 12px;
	text-align: center;
}

/* 背景のやわらかい丸 */
.p-members__merit::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: radial-gradient(circle, #fdeee7 0%, rgba(253, 238, 231, 0) 70%);
	pointer-events: none;
}

.p-members__merit > * {
	position: relative;
}

.p-members__merit-no {
	margin: 0;
	font-size: 14px;
	color: var(--color-text-muted);
}

.p-members__merit-title {
	margin: 6px 0 0;
	font-family: var(--font-mincho);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.5;
	color: var(--color-primary);
}

.p-members__merit-image {
	margin-top: 12px;
}

.p-members__merit-image img,
.p-members__merit-image .img-slot--empty {
	width: 180px;
	height: auto;
	aspect-ratio: 9 / 7;
	object-fit: contain;
}

.p-members__compare-image-full {
	margin: 20px 30px;
}

.p-members__compare-image-full img {
	display: block;
	width: 100%;
	height: auto;
}
/* 1セクション */
.question{
    padding-top: 20px;
}

.question p{
    text-align: center;
    color: #6C635F;
}

.table{
    border: 1px solid #E54600;
    border-radius: 10px;
    padding: 30px;
}

.question .table{
    margin-top: 50px;
}

.table p{
    font-size: 14px;
    text-align: center;
    color: #6C635F;
}

/* 2セクション */
.table-2{
    background-color: var(--cream);
    border-radius: 10px;
    padding: 30px;
	margin-top: 50px;
}

.data .table-2.first{
    margin-top: 40px;
}

.data .table-2{
    margin-top: 20px;
}

.data .table{
    margin-top: 20px;
}
.table-2_title{
    text-align: center;
    font-weight: bold;
    margin: 0;
    font-size: 23px;
}
.table-2_title .mincho{
    color: #E54600;
    font-size: 40px;
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}
.table-2_p{
    text-align: center;
    margin: 0 0 30px;
    color: #6D625E;
}

.table-2.first img {
	width: 100%;
	max-width: 700px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* 相談所ブランド一覧 */
.p-network__brands {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.p-network__brands img {
	width: 100%;
	max-width: 180px;
	height: auto;
	display: block;
}


@media (max-width: 839px) {

    .data .table-2.first{
        padding: 30px 20px;
    }
	.table-2{
		margin-top: 30px;
	}
    p{
        font-size: 16px;
    }
    .question{
        padding-top: 0px;
    }
    
    .table{
        border-radius: 5px;
        padding: 20px 10px 10px;
    }
    
    .question .table{
        margin-top: 30px;
    }
    
    .table p{
        font-size: 12px;
        margin-bottom: 0px;
        line-height: 1.5;
    }
    .table-2_title{
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    .table-2_title .mincho{
        line-height: 1;
    }
    .table-2_p{
        margin: 0 0 20px;
        font-size: 14px;
        line-height: 1.5;
    }

	.p-network__brands {
		grid-template-columns: repeat(2, minmax(0, 180px));
		width: 100%;
        display: grid;
        justify-content: center;
        gap: 5px;
	}

	.p-network__brands img {
		width: 100%;
		max-width: 180px;
	}
	
	/* 最後の1枚を中央へ */
	.p-network__brands img:last-child {
		grid-column: 1 / -1;
		justify-self: center;
	}
}


/* --------------------------------------------------------------------------
   4. 会員データ
   -------------------------------------------------------------------------- */
.p-members__data {
	padding: 48px 0;
	background-color: var(--color-bg);
}

.p-members__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 28px;
}

.p-members__card {
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
}

.p-members__card-title {
	margin: 0;
	padding: 10px 12px;
	background-color: var(--m-card-head);
	font-size: 15px;
	font-weight: 400;
	text-align: center;
}

.p-members__card-body {
	padding: 18px 12px;
}

/* --- 凡例 --- */
.p-members__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--color-text-body);
}

.p-members__legend li {
	display: flex;
	align-items: center;
	gap: 4px;
}

.p-members__swatch {
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

.p-members__swatch[data-step="0"] { background-color: var(--m-step-0); }
.p-members__swatch[data-step="1"] { background-color: var(--m-step-1); }
.p-members__swatch[data-step="2"] { background-color: var(--m-step-2); }
.p-members__swatch[data-step="3"] { background-color: var(--m-step-3); }
.p-members__swatch[data-step="4"] { background-color: var(--m-step-4); }
.p-members__swatch[data-step="5"] { background-color: var(--m-step-5); }

/* 学歴は4段階なので、4段用のランプに差し替える */
.p-members__legend--edu .p-members__swatch[data-step="0"] { background-color: var(--m-edu-0); }
.p-members__legend--edu .p-members__swatch[data-step="1"] { background-color: var(--m-edu-1); }
.p-members__legend--edu .p-members__swatch[data-step="2"] { background-color: var(--m-edu-2); }
.p-members__legend--edu .p-members__swatch[data-step="3"] { background-color: var(--m-edu-3); }

/* --- 積み上げ棒グラフ ---
 * SP では横棒にすると 5% 前後のセグメントが 15px ほどになり、
 * 中の数値が読めなくなってしまう。
 * そのため SP は縦積み（3本を横に並べる）、PC は横積みにしている。
 * どちらの向きでも数値はテキストのまま残る。
 */
.p-members__card--age .p-members__card-body,
.p-members__card--edu .p-members__card-body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.p-members__card--age .p-members__legend,
.p-members__card--edu .p-members__legend {
	grid-column: 1 / -1;
}

.p-members__bar-row {
	display: flex;
	/* ラベルを棒の下に置く */
	flex-direction: column-reverse;
	gap: 6px;
}

.p-members__bar-label {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.p-members__stack {
	display: flex;
	flex-direction: column;
	height: 260px;
	/* 区切りがわかるよう、セグメント間に背景色のすき間をあける */
	gap: 2px;
	overflow: hidden;
	border-radius: 3px;
}

.p-members__stack-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 100%;
	height: var(--w);
	min-height: 0;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}

/* 濃い段は白文字にして、中の数値が読めるようにする */
.p-members__stack-seg[data-step="0"] { background-color: var(--m-step-0); }
.p-members__stack-seg[data-step="1"] { background-color: var(--m-step-1); }
.p-members__stack-seg[data-step="2"] { background-color: var(--m-step-2); }
.p-members__stack-seg[data-step="3"] { background-color: var(--m-step-3); color: #fff; }
.p-members__stack-seg[data-step="4"] { background-color: var(--m-step-4); color: #fff; }
.p-members__stack-seg[data-step="5"] { background-color: var(--m-step-5); color: #fff; }

.p-members__stack--edu .p-members__stack-seg[data-step="0"] { background-color: var(--m-edu-0); color: var(--color-text); }
.p-members__stack--edu .p-members__stack-seg[data-step="1"] { background-color: var(--m-edu-1); color: var(--color-text); }
.p-members__stack--edu .p-members__stack-seg[data-step="2"] { background-color: var(--m-edu-2); color: #fff; }
.p-members__stack--edu .p-members__stack-seg[data-step="3"] { background-color: var(--m-edu-3); color: #fff; }

/* --- 円グラフ（conic-gradient で描画） --- */
.p-members__card--gender .p-members__card-body,
.p-members__card--marital .p-members__card-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* 円本体はマスクがかかるため、中央に置く内容は重ねて配置する */
.p-members__donut-wrap {
	position: relative;
	width: 190px;
	height: 190px;
}

.p-members__donut {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	/* 中央をくり抜いてドーナツにする */
	-webkit-mask: radial-gradient(circle, transparent 58%, #000 58.5%);
	mask: radial-gradient(circle, transparent 58%, #000 58.5%);
}

/* 男性51.6％・女性48.4％。12時から時計回りに女性→男性 */
.p-members__donut--gender {
	background: conic-gradient(var(--color-primary) 0 48.4%, var(--m-cyan) 48.4% 100%);
}

/* 初婚83.9％。グレーの欠けが下側に来るよう開始角度を調整 */
.p-members__donut--marital {
	background: conic-gradient(from 230deg, var(--color-primary) 0 83.9%, var(--m-gray) 83.9% 100%);
}

.p-members__donut-hole {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	pointer-events: none;
}

.p-members__donut-hole img,
.p-members__donut-hole .img-slot--empty {
	width: 85px;
	height: auto;
	aspect-ratio: 8 / 7;
	object-fit: contain;
}

.p-members__donut-label {
	font-size: 18px;
}

.p-members__donut-value {
	font-size: 30px;
	font-weight: 700;
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
}

.p-members__donut-tag {
	margin: 0;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
}

.p-members__donut-tag strong {
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.p-members__donut-tag--male {
	border: 1px solid var(--m-cyan);
	color: var(--m-cyan);
}

.p-members__donut-tag--female {
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

.p-members__donut-caption {
	margin: 0;
	padding: 5px 14px;
	border: 1px solid var(--m-gray);
	border-radius: 4px;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

/* --- 地域ごとの会員数 --- */
.p-members__area-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: center;
}

.p-members__area-map img,
.p-members__area-map .img-slot--empty {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	margin-inline: auto;
	aspect-ratio: 13 / 12;
	object-fit: contain;
}

.p-members__area-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 12px;
}

.p-members__area-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.p-members__area-label {
	flex: 0 0 auto;
	min-width: 80px;
	padding: 3px 2px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	color: #fff;
}

.p-members__area-item--main .p-members__area-label { background-color: var(--color-primary); }
.p-members__area-item--sub .p-members__area-label { background-color: #f5a623; }

.p-members__area-item--outline .p-members__area-label {
	border: 1px solid var(--color-primary);
	background-color: #fff;
	color: var(--color-primary);
}

.p-members__area-value {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.p-members__area-note {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--color-text-muted);
}


/* --- 職業の割合 --- */
.p-members__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.p-members__table th,
.p-members__table td {
	padding: 8px 6px;
	border-bottom: 1px dashed var(--m-line);
	text-align: center;
	white-space: nowrap;
}

.p-members__table thead th {
	border-bottom: 1px solid var(--m-line);
	font-weight: 700;
}

.p-members__table tbody th {
	font-weight: 700;
	text-align: left;
	white-space: normal;
}

.p-members__table .is-male { color: var(--m-cyan); }
.p-members__table .is-female { color: var(--color-primary); }

/* --- 年収（横棒グラフ） --- */
.p-members__hbar-row {
	display: grid;
	grid-template-columns: 96px 1fr 48px;
	align-items: center;
	gap: 8px;
}

.p-members__hbar-row + .p-members__hbar-row {
	margin-top: 8px;
}

.p-members__hbar-label {
	font-size: 14px;
	font-weight: 700;
}

.p-members__hbar-track {
	display: block;
	height: 14px;
	border-radius: 3px;
	background-color: var(--m-track);
}

.p-members__hbar-fill {
	display: block;
	width: var(--w);
	height: 100%;
	border-radius: 3px;
	background-color: var(--m-cyan);
}

.p-members__hbar-value {
	font-size: 14px;
	font-weight: 700;
	text-align: right;
	color: var(--m-cyan);
	font-variant-numeric: tabular-nums;
}

.p-members__income-total {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 700;
}

.p-members__income-total strong {
	font-size: 25px;
	color: var(--m-cyan);
	font-variant-numeric: tabular-nums;
}

.p-members__income-icon img,
.p-members__income-icon .img-slot--empty {
	width: 20px;
	height: auto;
	aspect-ratio: 3 / 5;
	object-fit: contain;
}

.p-members__data-foot {
	margin: 24px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   5. 加盟連盟のご紹介
   -------------------------------------------------------------------------- */
.p-members__unions {
	padding: 48px 0;
	background-color: var(--m-cream);
}

.p-members__union-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.p-members__union {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	gap: 12px;
	padding: 20px 16px;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
	text-align: center;
}

.p-members__union-logo img,
.p-members__union-logo .img-slot--empty {
	width: 120px;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: contain;
}

.p-members__union-name {
	margin: 0;
	font-size: 23px;
	font-weight: 500;
	line-height: 1.5;
}

.p-members__union-meta {
	margin: 4px 0 20px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--color-text-muted);
}

.p-members__union-text {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-body);
	text-align: left;
}

.p-members__union-text strong {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   PC（840px 以上）
   -------------------------------------------------------------------------- */
@media (min-width: 840px) {

	.p-members__lead {
		margin-top: 24px;
		font-size: 16px;
	}

	/* --- 2. 連盟ネットワーク --- */
	.p-members__network {
		padding: 80px 0 0;
	}

	.p-members__panel {
		margin-top: 48px;
		padding: 40px;
	}

	.p-members__panel-title {
		font-size: 19px;
	}

	.p-members__panel-title em {
		font-size: 23px;
	}

	.p-members__panel-sub {
		font-size: 13px;
	}

	.p-members__brands {
		grid-template-columns: repeat(5, 1fr);
		gap: 16px;
		margin-top: 28px;
	}

	.p-members__counts {
		margin-top: 48px;
		padding: 36px 40px;
	}

	.p-members__counts-title {
		font-size: 20px;
	}

	.p-members__count-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		margin-top: 28px;
	}

	.p-members__count + .p-members__count {
		padding-top: 0;
		padding-left: 24px;
		border-top: 0;
		border-left: 1px dashed var(--m-line);
	}

	.p-members__count-value {
		font-size: 44px;
	}

	.p-members__count-value span {
		font-size: 20px;
	}

	.p-members__counts-foot {
		margin-top: 28px;
		text-align: center;
		font-size: 14px;
	}

	/* --- 3. 他社比較 --- */
	.p-members__compare {
		padding: 80px 0 30px;
	}

	.p-members__compare-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		margin-top: 48px;
	}

	.p-members__compare-title {
		padding: 16px;
		font-size: 20px;
	}

	.p-members__compare-body {
		gap: 12px;
		padding: 28px 24px;
	}

	.p-members__compare-num {
		font-size: 24px;
	}

	.p-members__compare-num--ours {
		font-size: 38px;
	}

	.p-members__compare-arrow {
		width: 18px;
		height: 34px;
		border-width: 5px;
		margin-bottom: 36px;
	}

	.p-members__merits {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		margin-top: 80px;
	}

	.p-members__merit-title {
		font-size: 20px;
	}

	.p-members__merit-image img,
	.p-members__merit-image .img-slot--empty {
		width: 200px;
	}
	.p-members__merit-no {
		font-size: 16px;
	}
	.p-members__compare-image-full {
		margin: 50px;
	}

	.p-members__count-note {
		font-size: 16px;
		line-height: 1.5;
	}

	.p-members__count-badge {
		padding: 1px 14px;
		font-size: 16px;
	}

	.p-members__merit::before {
		width: 500px;
		height: 500px;
	}

	.p-members__merit-image img,
	.p-members__merit-image .img-slot--empty {
		width: 150px;
	}
	/* --- 4. 会員データ --- */
	.p-members__data {
		padding: 80px 0;
	}

	/* デザインどおりの並び：男女比＋年代／地域／職業＋結婚歴／年収＋学歴 */
	.p-members__grid {
		grid-template-columns: 1fr 1.7fr;
		gap: 24px;
		margin-top: 48px;
	}

	.p-members__card--area {
		grid-column: 1 / -1;
	}

	/*
	 * 左列＝円グラフ、右列＝表・棒グラフ、という並びにそろえる。
	 * 男女比／年代 → 地域（全幅） → 結婚歴／職業 → 年収／学歴
	 */
	.p-members__card--gender { order: 1; }
	.p-members__card--age { order: 2; }
	.p-members__card--area { order: 3; }
	.p-members__card--marital { order: 4; }
	.p-members__card--job { order: 5; }
	.p-members__card--income { order: 6; }
	.p-members__card--edu { order: 7; }

	.p-members__card-title {
		padding: 12px;
		font-size: 21px;
	}

	.p-members__card-body {
		padding: 24px 20px;
	}

	.p-members__legend {
		font-size: 14px;
		gap: 6px 16px;
	}

	/* PC は横積みに戻す */
	.p-members__card--age .p-members__card-body,
	.p-members__card--edu .p-members__card-body {
		display: block;
	}

	.p-members__bar-row {
		display: grid;
		grid-template-columns: 52px 1fr;
		align-items: center;
		gap: 12px;
	}

	.p-members__bar-row + .p-members__bar-row {
		margin-top: 10px;
	}

	.p-members__bar-label {
		font-size: 14px;
		text-align: right;
	}

	.p-members__stack {
		flex-direction: row;
		height: auto;
	}

	.p-members__stack-seg {
		width: var(--w);
		height: auto;
		min-width: 0;
		padding: 9px 0;
		font-size: 14px;
	}

	.p-members__donut-wrap {
		width: 210px;
		height: 210px;
	}

	.p-members__donut-value {
		font-size: 25px;
	}

	/* 男女比のラベルは円の左右に置く */
	.p-members__card--gender .p-members__card-body {
		padding-block: 32px;
	}

	.p-members__donut-tag {
		position: absolute;
		font-size: 14px;
	}

	.p-members__donut-tag--male {
		left: 8px;
		top: 42%;
	}

	.p-members__donut-tag--female {
		right: 8px;
		bottom: 34%;
	}

	.p-members__area-body {
		grid-template-columns: 280px auto;
		justify-content: center;
		gap: 100px;
	}

	.p-members__area-list {
		gap: 10px 100px;
		margin: 0 0 0 auto;
	}

	.p-members__area-label {
		min-width: 110px;
		padding: 5px 10px;
		font-size: 16px;
	}

	.p-members__area-value {
		font-size: 16px;
	}

	.p-members__area-note {
		font-size: 14px;
	}

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

	.p-members__table th,
	.p-members__table td {
		padding: 10px 8px;
	}

	.p-members__hbar-row {
		grid-template-columns: 110px 1fr 56px;
		gap: 12px;
	}

	.p-members__hbar-label,
	.p-members__hbar-value {
		font-size: 16px;
	}

	.p-members__hbar-track {
		height: 16px;
	}

	.p-members__income-total {
		font-size: 16px;
	}

	.p-members__income-total strong {
		font-size: 24px;
	}

	.p-members__data-foot {
		margin-top: 32px;
		font-size: 14px;
	}

	/* --- 5. 加盟連盟 --- */
	.p-members__unions {
		padding: 80px 0;
	}

	.p-members__union-list {
		gap: 24px;
		margin-top: 48px;
	}

	.p-members__union {
		grid-template-columns: 220px 1fr;
		justify-items: start;
		align-items: center;
		gap: 2px;
		padding: 28px 40px;
		text-align: left;
	}

	.p-members__union-logo img,
	.p-members__union-logo .img-slot--empty {
		width: 180px;
	}

	.p-members__union-name {
		font-size: 20px;
		line-height: 1.3;
	}

	.p-members__union-meta {
		font-size: 14px;
	}

	.p-members__union-text {
		font-size: 16px;
		line-height: 1.7;
	}
}