@charset "utf-8";

/*######################################################
入会について（2026リニューアル）
Figma 292:319「260902_デザイン_入会について」
######################################################*/

/* ==============================
S1 ロータリークラブの目的（番号付きカード3枚）
============================== */
.join-purpose {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 25px;
	list-style: none;
	padding-left: 0;
}

.join-purpose__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 36px 32px 40px;
	border-radius: var(--radius-card);
	background-image: linear-gradient(160deg, #ffffff 0%, #FBFDFF 100%);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

/* 右上の大きな番号（ゴールド20%） */
.join-purpose__num {
	position: absolute;
	top: -16px;
	right: 32px;
	font-family: var(--f-en);
	font-weight: 500;
	font-size: 95px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--c-gold-500);
	opacity: 0.2;
	pointer-events: none;
}

.join-purpose__title {
	position: relative;
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.6;
	color: var(--c-navy-900);
}

.join-purpose__rule {
	display: block;
	width: 28px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--c-gold-500);
}

.join-purpose__sub {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--c-navy-700);
}

.join-purpose__text {
	font-size: 16px;
	line-height: 2.05;
	color: var(--c-ink-muted);
}


/* ==============================
S3 入会の流れ（写真＋本文のステップ、間に▼）
============================== */
.join-flow {
	display: flex;
	flex-direction: column;
	gap: 73px;
	list-style: none;
	padding-left: 0;
}

.join-flow__step {
	position: relative;
	display: flex;
	min-height: 270px;
	border-radius: var(--radius-card);
	background-image: linear-gradient(160deg, #ffffff 0%, #FBFDFF 100%);
	box-shadow: 0 2px 8px rgba(35, 64, 101, 0.06), 0 12px 28px rgba(35, 64, 101, 0.08);
}

/* ステップ間の下向き三角（149×32） */
.join-flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(100% + 20px);
	left: 50%;
	width: 149px;
	height: 32px;
	background-color: #244166;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
}

.join-flow__img {
	flex: none;
	width: 360px;
	border-radius: var(--radius-card) 0 0 var(--radius-card);
	overflow: hidden;
}

.join-flow__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.join-flow__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 36px 40px;
}

.join-flow__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.6;
	color: var(--c-navy-900);
}

.join-flow__num {
	font-family: var(--f-en);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: var(--c-gold-500);
}

.join-flow__text {
	font-size: 16px;
	line-height: 2;
	color: var(--c-ink);
}

.join-flow__note {
	font-size: 14px;
	line-height: 1.95;
	color: var(--c-ink-muted);
}


/* ==============================
S5 会員の声
============================== */
.join-voice {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 25px;
	list-style: none;
	padding-left: 0;
}

.join-voice__card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-card);
	background-image: linear-gradient(160deg, #ffffff 0%, #FBFDFF 100%);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

/* 写真が未入稿の間は淡い色面 */
.join-voice__img {
	aspect-ratio: 343 / 257;
	background-image: linear-gradient(160deg, var(--c-navy-100) 0%, #CBD8E8 100%);
}

.join-voice__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.join-voice__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 28px 28px;
}

.join-voice__name {
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.6;
	color: var(--c-navy-900);
}

.join-voice__meta {
	font-size: 13px;
	line-height: 1.8;
	color: var(--c-navy-300);
}

.join-voice__text {
	font-size: 15px;
	line-height: 2;
	color: var(--c-ink-muted);
}


/* ==============================
タブレット
============================== */
@media (max-width: 1024px) {

	.join-purpose,
	.join-voice {
		grid-template-columns: minmax(0, 1fr);
	}

	.join-flow__img {
		width: 40%;
	}
}


/* ==============================
SP
============================== */
@media (max-width: 767px) {
	.join-purpose {
		gap: 16px;
	}

	.join-purpose__card {
		padding: 28px 24px 30px;
	}

	.join-purpose__num {
		top: 18px;
		right: 24px;
		font-size: 64px;
		line-height: 1.1;
		letter-spacing: 0;
	}

	.join-purpose__title {
		font-size: 22px;
	}

	.join-purpose__text {
		line-height: 2;
	}

	.join-flow {
		gap: 65px;
	}

	.join-flow__step {
		flex-direction: column;
		min-height: 0;
		box-shadow: 0 2px 8px rgba(18, 35, 61, 0.06), 0 14px 32px rgba(18, 35, 61, 0.09);
	}

	.join-flow__step:not(:last-child)::after {
		width: 99px;
		height: 25px;
	}

	.join-flow__img {
		width: 100%;
		aspect-ratio: 335 / 251;
		border-radius: var(--radius-card) var(--radius-card) 0 0;
	}

	.join-flow__body {
		gap: 10px;
		padding: 24px 22px 26px;
	}

	/* STEP番号を見出しの上の行に */
	.join-flow__title {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 10px;
		font-size: 20px;
	}

	.join-flow__num {
		font-size: 18px;
		line-height: 1.2;
	}

	.join-flow__text {
		line-height: 1.95;
	}

	.join-flow__note {
		line-height: 1.9;
	}

	.join-voice {
		gap: 20px;
	}

	.join-voice__img {
		aspect-ratio: 335 / 251;
	}

	.join-voice__body {
		padding: 24px 22px 26px;
	}
}