/* =========================================================
 * りぷらい！ メンバーページ（member_list）
 * --mc は member-page.php が ACF color_1 から出力する
 * Elementor の要素ごとの設定に勝つため、一部 !important を使用
 * ======================================================= */

:root {
	--mc: #F4C6CB;
	--mc-soft: color-mix(in srgb, var(--mc) 22%, #fff);
	--mc-mid: color-mix(in srgb, var(--mc) 55%, #fff);
	--mc-pale: color-mix(in srgb, var(--mc) 8%, #fff);
	--mc-deep: color-mix(in oklab, var(--mc) 45%, #4a2b3c);
	--mc-line: color-mix(in srgb, var(--mc) 78%, #4a3a44);
	--mp-ink: #4a3a44;
	--mp-en: "Poppins", sans-serif;
}

.mp-catch,
.mp-prof,
.mp-visual,
.mp-chat,
.mp-vc {
	box-sizing: border-box;
}

/* ---------- 画像の保存対策（ドラッグ保存・iOS長押し保存を防ぐ） ---------- */
.mp-visual img,
.mp-illust img,
.mp-logo img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	user-select: none;
	pointer-events: none;
}

/* ---------- ページ背景 ---------- */
body.single-member_list {
	background:
		radial-gradient(circle, color-mix(in srgb, var(--mc) 70%, #fff) 2px, transparent 2.5px) 0 0 / 22px 22px,
		var(--mc-soft) !important;
}

/* ---------- カード（Elementor コンテナに mp-card） ---------- */
.e-con.mp-card {
	background: #fff !important;
	border: 3px solid var(--mc) !important;
	border-radius: 32px !important;
	box-shadow: 12px 12px 0 var(--mc-mid) !important;
	overflow: hidden;
}

/* ---------- 名前（ネーム画像・見出し） ---------- */
.mp-logo {
	margin-top: 28px !important;
}
.mp-logo img {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin: 0 auto;
}
.mp-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* ---------- SNS ---------- */
.mp-sns {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mp-sns a {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 2px solid var(--mc);
	border-radius: 50%;
	background: #fff;
	color: var(--mp-ink);
	transition: background-color .2s, transform .2s;
}
.mp-sns a:hover {
	background: var(--mc);
	transform: translateY(-3px);
}
.mp-sns svg {
	display: block;
	width: 20px;
	height: 20px;
}
.mp-sns .mp-sns__yt { color: #ff0033; }
.mp-sns .mp-sns__tw { color: #9146ff; }

/* ---------- 一言コメント（テキストエディタに mp-catch） ---------- */
.mp-catch {
	position: relative;
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	padding: 24px 28px !important;
	border-radius: 20px;
	background: var(--mc-soft);
	color: var(--mp-ink);
	font-weight: 700;
	line-height: 2;
	text-align: center;
}
.mp-catch::before {
	content: "“";
	position: absolute;
	top: -18px;
	left: 18px;
	color: var(--mc);
	font: 800 64px/1 var(--mp-en);
}
.mp-catch p {
	margin: 0;
}

/* ---------- プロフィール ---------- */
.mp-prof {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	padding: 0;
	color: var(--mp-ink);
}
.mp-prof > div {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	column-gap: 24px;
	padding: 11px 4px;
	border-bottom: 2px dotted var(--mc-mid);
	font-size: 15px;
	font-weight: 700;
}
.mp-prof > div.is-note dd {
	grid-column: 1 / -1;
}
.mp-prof dt {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mc-deep);
	white-space: nowrap;
}
.mp-prof dt::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mc);
}
.mp-prof dd {
	margin: 0;
}

/* ---------- ビジュアル [member_visual] ---------- */
.mp-visual {
	position: relative;
	width: 100%;
	min-height: 640px;
}
/* 中身がすべて absolute で幅を持たないため、
   中央揃えのフレックスコンテナ内でウィジェットが幅0に縮むのを防ぐ */
.elementor-widget:has(.mp-visual) {
	align-self: stretch;
	width: 100%;
	flex: 1 1 100%;
}
.mp-blob,
.mp-loop {
	position: absolute;
	top: 48%;
	left: 50%;
	aspect-ratio: 1;
	translate: -50% -50%;
}
.mp-blob {
	width: min(88%, 480px);
	border-radius: 50%;
	background:
		radial-gradient(circle, #fff 2px, transparent 2.5px) 0 0 / 18px 18px,
		var(--mc);
}
.mp-loop {
	width: min(104%, 570px);
	overflow: visible;
}
.mp-loop__arc {
	fill: none;
	stroke: var(--mc-line);
	stroke-width: 2.2;
	stroke-linecap: round;
}
.mp-loop__head {
	fill: var(--mc-line);
}
.mp-star {
	position: absolute;
	color: var(--mc);
	font-size: 26px;
	line-height: 1;
}
.mp-star--1 { top: 12%; left: 6%; }
.mp-star--2 { top: 58%; right: 3%; }
.mp-star--3 { top: 46%; left: 16%; font-size: 18px; }
.mp-visual .mp-tachie {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: auto;
	max-width: none;
	height: 100%;
	max-height: 660px;
	translate: -50% 0;
	filter: drop-shadow(0 10px 18px #0000001f);
}
.mp-visual .mp-sd {
	position: absolute;
	z-index: 3;
	bottom: 2%;
	left: -2%;
	width: 30%;
	height: auto;
	rotate: -8deg;
	filter:
		drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
		drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
		drop-shadow(0 6px 10px #0002);
}
.mp-visual .mp-mini {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 4%;
	width: 26%;
	height: auto;
}

/* ---------- 紹介イラスト（画像ウィジェットに mp-illust） ---------- */
.mp-illust {
	position: relative;
	rotate: -2deg;
}
.mp-illust img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	border: 6px solid #fff;
	border-radius: 24px;
	box-shadow: 0 10px 24px #0000001a;
}
/* 台紙 */
.mp-illust::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border-radius: 24px;
	background:
		radial-gradient(circle, #fff 2px, transparent 2.5px) 0 0 / 16px 16px,
		var(--mc);
}
/* マスキングテープ（上・右下） */
.mp-illust::after,
.mp-illust .elementor-widget-container::after {
	content: "";
	position: absolute;
	z-index: 2;
	opacity: .92;
	clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 12.5%, 100% 25%, calc(100% - 5px) 37.5%, 100% 50%, calc(100% - 5px) 62.5%, 100% 75%, calc(100% - 5px) 87.5%, 100% 100%, 0 100%, 5px 87.5%, 0 75%, 5px 62.5%, 0 50%, 5px 37.5%, 0 25%, 5px 12.5%);
}
.mp-illust::after {
	top: -16px;
	left: 50%;
	width: 132px;
	height: 34px;
	translate: -50% 0;
	rotate: -7deg;
	background:
		repeating-linear-gradient(-45deg, #ffffff66 0 5px, transparent 5px 11px),
		color-mix(in srgb, var(--mc) 80%, #fff);
	box-shadow: 0 2px 3px #0000000d;
}
.mp-illust .elementor-widget-container::after {
	right: -30px;
	bottom: 22px;
	width: 96px;
	height: 28px;
	rotate: -50deg;
	background:
		repeating-linear-gradient(90deg, #ffffff88 0 3px, transparent 3px 9px),
		color-mix(in srgb, var(--mc) 55%, #fff);
}

/* ---------- 英字見出し [mp_title] ---------- */
.mp-sec-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}
.mp-sec-title.is-center {
	justify-content: center;
}
.mp-sec-title b {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mc-deep);
	font: 800 34px/1 var(--mp-en);
	letter-spacing: .06em;
}
.mp-sec-title span {
	color: var(--mc-deep);
	font-size: 14px;
	font-weight: 700;
	opacity: .8;
}
.mp-ico-loop {
	display: block;
	width: .72em;
	height: .72em;
	color: var(--mc);
}

/* ---------- 名前の小見出し（見出しウィジェットに mp-name） ---------- */
.mp-name .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px !important;
	color: var(--mp-ink) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
}
.mp-name .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--mc);
	box-shadow: 0 0 0 5px var(--mc-soft);
}

/* ---------- 紹介文（テキストエディタに mp-lead） ---------- */
.mp-lead {
	color: var(--mp-ink);
	font-size: 15px;
	line-height: 2.1;
}
.mp-lead p {
	margin: 0 0 1.3em;
}
.mp-lead p:last-child {
	margin: 0;
}

/* ---------- リスナーさんの声 [member_voices] ---------- */
.mp-voice {
	margin-top: 72px;
	padding-top: 60px;
	border-top: 2px dashed var(--mc-mid);
}
.mp-voice .mp-sec-title {
	margin-bottom: 40px;
}
.mp-chat {
	max-width: 760px;
	margin: 0 auto;
	overflow: hidden;
	border: 3px solid var(--mc);
	border-radius: 22px;
	background: #fff;
	box-shadow: 8px 8px 0 var(--mc-soft);
}
/* 文字なし（既定）のときは飾りの帯として細めに */
.mp-chat__head:empty {
	height: 24px;
	padding: 0;
}
.mp-chat__head {
	padding: 14px 22px;
	background: var(--mc);
	color: var(--mc-deep);
	font: 700 13px/1 var(--mp-en);
	letter-spacing: .18em;
}
.mp-chat__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mp-vc {
	position: relative;
	min-height: 82px;
	margin: 0;
	padding: 20px 24px 20px 82px;
	background: #fff;
	color: var(--mp-ink);
}
.mp-vc + .mp-vc {
	border-top: 1px dashed var(--mc-mid);
}
.mp-vc:nth-child(even) {
	background: var(--mc-pale);
}
.mp-vc::before {
	content: "♡";
	position: absolute;
	top: 20px;
	left: 24px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--mc);
	color: #fff;
	font-size: 18px;
}
.mp-vc h3 {
	margin: 0 0 4px !important;
	color: var(--mc-deep) !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.6 !important;
}
.mp-vc p {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.95;
}

/* ---------- スマホ（Elementor のモバイル幅） ---------- */
@media (max-width: 767px) {
	.e-con.mp-card {
		border-radius: 24px !important;
		box-shadow: 6px 6px 0 var(--mc-mid) !important;
	}
	.mp-visual {
		min-height: 520px;
	}
	.mp-visual .mp-tachie {
		max-height: 520px;
	}
	.mp-catch {
		padding: 28px 16px !important;
		font-size: 14px;
	}
	.mp-prof > div {
		column-gap: 10px;
		padding: 11px 0;
		font-size: 13px;
	}
	.mp-prof dt {
		gap: 6px;
	}
	.mp-illust {
		margin-right: 14px;
	}
	.mp-sec-title b {
		font-size: 28px;
	}
	.mp-voice {
		margin-top: 56px;
		padding-top: 48px;
	}
	.mp-vc {
		padding: 18px 16px 18px 64px;
	}
	.mp-vc::before {
		top: 18px;
		left: 16px;
		width: 36px;
		height: 36px;
		font-size: 15px;
	}
}