/* =========================================================
   フォトグラファー紹介
   Figma node 113:30474。縦ストライプ背景＋見出し＋円形写真＋名前＋紹介文（横並び・人数可変）。
   ※ 細部余白は後でまとめて調整。まず構造優先。モバイルは後回し。
   ========================================================= */

.photographer {
	width: 100%;
	padding: 60px 0; /* 外側：縞帯を隣接セクション(Flow/Style Gallery)から上下に離す（白地） */
	background: var(--bg-white); /* セクション全体は白。ストライプは中央パネルのみ */
}

/* 中央の幅740pxパネルにだけ縦ストライプ（#F5F4F1 と #fff の交互）。
   ※ PC幅で740px固定。レスポンシブ（可変）は後でまとめて対応。 */
.photographer__inner {
	/* 幅は共通クラス .l-narrow（740px・左右padding20px）。縞背景＋縦の内側余白。
	   縦paddingは縞パネル自身に持たせ、縞の地ごと上下に広げて中身にゆとりを出す。
	   ※ longhandで指定し l-narrow の padding:0 20px の左右は維持。 */
	padding-top: 60px;
	padding-bottom: 80px;
	background-image: repeating-linear-gradient(
		to right,
		var(--bg-white)  0 13px,    /* #fff */
		var(--bg-studio) 13px 20px  /* #f5f4f1（薄いベージュ） */
	);
}

.photographer__title {
	margin: 0 0 48px;
	text-align: center;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0.48px;
	color: var(--color-btn-outline); /* #533f21（濃いブラウン。本文 #524635 とは別） */
}

/* --- 紹介リスト（横並び・人数可変） --- */
.photographer__list {
	display: flex;
	justify-content: center;
	gap: 64px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.photographer-card {
	flex: 0 1 28%;
	text-align: center;
}

/* 円形にトリミングした写真（影なし） */
.photographer-card__photo {
	width: 170px;
	height: 170px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.photographer-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 名前・紹介文 */
.photographer-card__name {
	margin: 20px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0.32px;
	color: var(--color-text);
}
.photographer-card__intro {
	margin: 6px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.32px;
	line-height: 1.6;
	color: var(--color-text);
}

/* =========================================================
   スマホ（≤599px）：余白・タイトル・list間隔・写真サイズ調整。タブレット/PC不変。
   ========================================================= */
@media (max-width: 599px) {
	.photographer { padding: 60px 20px; width: auto; }
	.photographer__inner { padding-top: 40px; padding-bottom: 40px; }
	.photographer__title { font-size: 22px; }
	.photographer__list { gap: 25px; }
	.photographer-card { flex: 0 1 100%; }
	.photographer-card__photo { width: 120px; height: 120px; }
}