/* =========================================================
   Voice（お客様の声）
   Figma node 113:30480。くすみローズ背景＋白の筆記体見出し＋口コミカード（丸アバター＋一言＋撮影時期・地域＋本文抜粋）。
   トグル無し。下に「お客様の声をもっと見る」→ /voice/ アーカイブ。
   ※ 細部余白・レスポンシブは後でまとめて調整。まず構造優先。
   ========================================================= */

.voice {
	position: relative;
	width: 100%;
	background: var(--bg-reasons); /* #e0d6d1（くすみローズ。Reasonsと同色） */
	padding: 70px 0 72px;
	overflow: hidden;
}

.voice__inner {
	/* 幅は共通クラス .l-base（860px）。位置/重ね順のみ保持 */
	position: relative;
	z-index: 1;
}

/* 装飾線画（鶴。左下） */
.voice__deco-tsuru {
	position: absolute;
	left: 60px;
	bottom: 0;
	width: 189px;
	height: 215px;
	pointer-events: none;
	z-index: 0;
}

/* --- 見出し（白） --- */
.voice__header {
	text-align: center;
	margin-bottom: 40px;
}
.voice__title {
	margin: 0;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--bg-white); /* #fff */
}
.voice__sub {
	margin: 6px 0 0;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 16px;
	line-height: 30px;
	color: var(--bg-white); /* #fff */
}

/* =========================================================
   口コミカード（繰り返し）
   ========================================================= */
.voice__list {
	width: 100%; /* 親 .l-base(860) いっぱい */
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.voice-card {
	padding: 24px 0;
	border-bottom: 1px solid var(--color-border-card); /* 区切り線。※色はFigma画像線のため暫定 */
}
.voice-card:last-child {
	border-bottom: 0;
}
/* カード全体を個別ページへのリンクに（クリック領域＝カード全体） */
.voice-card__link {
	display: flex;
	align-items: flex-start;
	gap: 19px;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
}
.voice-card__link:hover {
	opacity: 0.7;
}

/* 丸アバター（影なし） */
.voice-card__avatar {
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
}
.voice-card__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* アバター未設定時のダミー丸 */
.voice-card__avatar--placeholder {
	display: block;
	background: var(--bg-tan);
}

/* テキスト群（本文色ルール：背景 #e0d6d1 は #CDC3B6 ではないため --color-text(#524635)） */
.voice-card__body {
	flex: 1 1 auto;
	min-width: 0;
}
.voice-card__heading {
	margin: 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0.8px;
	color: var(--color-text);
}
.voice-card__info {
	margin: 8px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.6px;
	color: var(--color-text);
}
.voice-card__text {
	margin: 8px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.7px;
	color: var(--color-text);
}

/* --- 「お客様の声をもっと見る」ボタン（アウトライン調。Figma未掲載・トグル集約） --- */
.voice__more {
	margin-top: 48px;
	text-align: center;
}
.voice__more-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	height: 50px;
	padding: 0 28px;
	background: var(--bg-white);
	border: 1px solid var(--color-btn-outline); /* #533f21 */
	color: var(--color-text);
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0.32px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.voice__more-button:hover {
	opacity: 0.75;
}

/* =========================================================
   スマホ（≤599px）：セクション余白・筆記体タイトル・サブ詰め・本文2行省略。タブレット/PC不変。
   ========================================================= */
@media (max-width: 599px) {
	.voice { padding: 60px 0 130px 0; }
	.voice__deco-tsuru { left: 0; bottom: -10px; width: 160px; }
	.voice__title { font-size: 60px; }
	.voice__sub { margin-top: 0; }
	/* 本文は2行で省略（…）。続きはカードのリンクで読める */
	.voice-card__text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* =========================================================
   個別ページ（single-voice.php）。トップカードのトーンを記事として展開。
   背景=淡い --bg-studio／中央 l-narrow 記事／本文(the_content)のブロックを整形。
   ========================================================= */
.voice-single {
	width: 100%;
	background: var(--bg-studio); /* #f5f4f1 */
	padding: 72px 0 96px;
}
.voice-single__inner {
	/* 幅は共通 .l-narrow（740＝読みやすい本文幅） */
}

/* --- ヘッダー（l-narrow・左揃え：小ラベル→タイトル→撮影情報） --- */
.voice-single__head {
	margin-bottom: 32px;
	text-align: left;
}
.voice-single__label {
	margin: 0 0 10px;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--color-subhead); /* #a3937c カテゴリラベル的 */
}
.voice-single__heading {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 32px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--color-text);
}
.voice-single__info {
	margin: 12px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--color-subhead);
}

/* --- アイキャッチ（article=l-wide 幅いっぱい・横長でドンと） --- */
.voice-single__eyecatch {
	margin: 0 0 48px;
	aspect-ratio: 3 / 2;   /* 横長ヒーロー（縦写真は中央クロップ） */
	overflow: hidden;
	border-radius: 0;
}
.voice-single__eyecatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 本文（the_content）：ブロックを読みやすく整形 --- */
.voice-single__body {
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: 0.4px;
	color: var(--color-text);
}
.voice-single__body > :first-child { margin-top: 0; }
.voice-single__body p { margin: 0 0 1.6em; }
.voice-single__body h2 {
	margin: 2.2em 0 0.8em;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.5;
	color: var(--color-text);
}
.voice-single__body h3 {
	margin: 1.8em 0 0.6em;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-text);
}
.voice-single__body img { max-width: 100%; height: auto; }
.voice-single__body figure { margin: 1.8em 0; }
.voice-single__body figure img { display: block; width: 100%; height: auto; }
.voice-single__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	text-align: center;
	color: var(--color-subhead);
}
.voice-single__body ul,
.voice-single__body ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.voice-single__body li { margin: 0.3em 0; }
.voice-single__body a {
	color: var(--color-btn-outline);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.voice-single__body blockquote {
	margin: 1.8em 0;
	padding: 12px 20px;
	border-left: 3px solid var(--color-border-olive);
	color: var(--color-text);
}

/* --- 一覧へ戻るリンク（l-narrow を body と同位置に：左右autoで中央寄せ＝margin打ち消し回避）。中身は中央 --- */
.voice-single__back {
	margin: 48px auto 0;
	text-align: center;
}
.voice-single__back a {
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.3px;
	color: var(--color-text);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.voice-single__back a:hover { opacity: 0.7; }

/* --- 前後の記事ナビ（l-narrow・左:前／右:次。両端は空スロットで位置保持） --- */
.voice-single__nav {
	margin-top: 56px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.voice-single__nav-slot {
	min-width: 0; /* line-clamp の省略を効かせるため */
}
.voice-single__nav-slot--prev { justify-self: start; text-align: left; }
.voice-single__nav-slot--next { justify-self: end;   text-align: right; }
.voice-single__nav-link {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
	text-decoration: none;
	color: var(--color-text);
	transition: opacity 0.2s ease;
}
.voice-single__nav-link:hover { opacity: 0.7; }
.voice-single__nav-dir {
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--color-subhead);
}
/* 矢印は擬似要素で。前=左向き〈をラベル左／次=右向き〉をラベル右に */
.voice-single__nav-slot--prev .voice-single__nav-dir::before {
	content: "〈";
	display: inline-block;
	vertical-align: middle;
	margin: -2px 10px 1px 0;
}
.voice-single__nav-slot--next .voice-single__nav-dir::after {
	content: "〉";
	display: inline-block;
	vertical-align: middle;
	margin: -2px 0 1px 10px;
}
/* 記事タイトルは非表示（ラベルのみ表示） */
.voice-single__nav-title {
	display: none;
}

/* スマホ（≤599px） */
@media (max-width: 599px) {
	.voice-single { padding: 40px 0 64px; }
	.voice-single__head { margin-bottom: 24px; }
	.voice-single__heading { font-size: 24px; }
	.voice-single__eyecatch { margin-bottom: 32px; }
	.voice-single__body h2 { font-size: 20px; }
	.voice-single__body h3 { font-size: 18px; }
	.voice-single__nav { margin-top: 40px; gap: 12px; }
	.voice-single__nav-dir { font-size: 12px; }
	.voice-single__nav-title { font-size: 13px; }
}