@charset "UTF-8";
/**
 * voice.css — /voice（利用者の声）
 *
 * 一次資料: 設計ツリー specs/pageviews/f3f1c567-e5d5-4f21-8b8d-673403182266.json
 * 値はすべて設計ツリーの style から逐語。丸めや「だいたい同じ」で置き換えない。
 * 設計ツリーに書かれていない余白・線・装飾は足していない。
 *
 * ブレークポイント（全ページ共通・base.css の規約 R1〜R4 に従う）:
 *   ベース 1280px / small ~1140px / tablet ~840px / mobile ~540px / mini ~320px
 *   ソース順は 1140 → 840 → 540 → 320。display の切替は狭い側にも明示的に書く（R2）。
 *
 * ★ データ（2026-09-14）: 現行サイトは CMS「利用者の声」を10件描画している（page-voice.php の
 *   docblock 参照）。同じ10件をローカルに投入して 375/430/768/1440 で実測し、カード（.vo-card 以下）
 *   の y/h・section 高さは設計ツリー逐語の CSS のまま現行と一致した（2872 / 2805 / 1838 / 1463）。
 *   2026-09-14 の表示品質精査で足した補正は各所に「2026-09-14・voice-NN」付きのコメントで残してある
 *   （原文に無い値は現行の実測か、このファイル／tokens.css に既にある値からしか取っていない）。
 * ★ モーダル（.vo-dialog 以下）は設計ツリーに無い（モーダルのページビューは specs/ に未収録）。
 *   値はすべて現行モーダルの実測（2026-09-14・scratchpad polish/voice/live_modal_measure2.json）。
 *   2026-09-15 に **parts.css §7** へ移設した（/reblue と共通のコンポーネントになったため。
 *   §5 の注記参照）。このファイルに残っているのはカード（.vo-card 以下）だけ。
 *
 * ★ 1件ごとに変わる色は CSS 変数で受ける（page-voice.php が inline style で渡す）:
 *   --vo-accent   … {{W4QRsCAh.FUycX_G5}} バッジ地色・アバター地色・「詳しく見る」文字色
 *   --vo-headline … {{color.value}}       声の見出しの文字色
 */

/* ============================================================
 * 1. ページ土台
 * ============================================================ */

.vo-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/*
 * 設計ツリー: Section "voice"
 *   width:1080px / height:auto / flex:none / gap:50px
 *   margin:88px 0px 0px 0px / padding:0px 0px 50px 0px
 *   align-items:flex-start / align-content:flex-start / justify-content:flex-start
 *   background:transparent
 * flex-direction の指定は無い。STUDIO の Section 既定は縦積みなので column。
 * 1080px は @small 以下でも上書きが無いため、max-width:100% だけで受ける
 * （width を 100% に書き換えると同じ結果になるが、原文の 1080px を残す）。
 */
.vo-voice {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 50px;
	width: 1080px;
	max-width: 100%;
	height: auto;
	margin: 88px 0 0;
	padding: 0 0 50px;
	background: transparent;
}

/* ============================================================
 * 2. 見出し「利用者の声」
 *    設計ツリー: <group> width:100% / margin:50px 0 0 0 / padding:0
 *                align-items:center / justify-content:center / column
 * ============================================================ */

.vo-head {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 50px 0 0;
	padding: 0;
}

/*
 * 36px / 700 / letter-spacing .08em / line-height normal（設計ツリー実値）。
 * line-height は "normal" が原文。1.4 等に推定して置き換えない。
 * text-align:left も原文。width:auto で内容幅に縮むため、
 * 親の align-items:center によって見た目は中央に来る。
 */
.vo-head__title {
	width: auto;
	height: auto;
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 36px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.08em;
	text-align: left;
}

/* ============================================================
 * 3. リード文
 *    設計ツリー: <group> width:100% / margin:0 / padding:0（見出し群と同形で margin だけ違う）
 * ============================================================ */

.vo-lead {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/* 15px / 400 / letter-spacing .08em / line-height normal（設計ツリー実値） */
.vo-lead__text {
	width: auto;
	height: auto;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 15px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: normal;
	letter-spacing: 0.08em;
	text-align: left;
}

/* ============================================================
 * 4. カード一覧（List）
 *    設計ツリー: ul flex-direction:row / flex-wrap:wrap / gap:30px / padding:10px
 *                width:100% / overflow-x:hidden / overflow-y:hidden
 *                align-items:flex-start / justify-content:flex-start
 * ============================================================ */

.vo-list {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 30px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	overflow-x: hidden;
	overflow-y: hidden;
	list-style: none;
}

/* ------------------------------------------------------------
 * カード
 *   設計ツリー: li width:33% / height:270px / gap:10px
 *               padding:20px 15px 30px / background:#fbf6f6ff
 *               border-radius:16px / box-shadow:3px 3px 5px rgba(0,0,0,0.2)
 *               justify-content:space-between / align-items:flex-start / column
 *               :hover { scale: 1.05 1.05 }
 *
 * ★ 幅は STUDIO の実式 calc(p% - gap × (1 - p)) で出す（2026-09-14・voice-07）
 *   設計ツリーの % をそのまま書くと、% x 枚数 ＋ gap が枠幅を超えて1枚少なく折り返す
 *   （flex の wrap は「縮小」より「折り返し」が先に効くため、flex-shrink では直らない）。
 *   2026-09-13 は「gap を引いた等分」calc((100% - 60px) / 3) = 333.33px で受けていたが、
 *   現行サイトの実測は 329.688px（1440・列 x 190 / 550 / 909）で、これは
 *   33% - 30px × (1 - 0.33) = 349.8 - 20.1 = 329.7px。@tablet の 36% も
 *   36% - 15px × (1 - 0.36) = 245.4px で現行の 245px と一致する。現行の式に揃える。
 * ---------------------------------------------------------- */

.vo-card {
	position: relative;  /* .vo-card__btn（カード全面の押下領域）の基準。2026-09-14・voice-04 */
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: space-between;
	gap: 10px;
	width: calc(33% - 30px * 0.67);
	height: 270px;
	padding: 20px 15px 30px;
	background: #fbf6f6ff;
	border-radius: 16px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
	/* transition は原文に無い。characters.css の :hover と同じ扱いで補っている（下の reduce も同様） */
	transition: scale 0.2s ease;
}

.vo-card:hover,
.vo-card:focus-within {
	scale: 1.05 1.05;
}

/* prefers-reduced-motion を尊重する（原文には無いがアクセシビリティ上必要） */
@media (prefers-reduced-motion: reduce) {

	.vo-card {
		transition: none;
	}

	.vo-card:hover,
	.vo-card:focus-within {
		scale: 1 1;
	}
}

/*
 * カード上半分のまとまり。
 * 設計ツリー: <group> column / gap:8px / padding:0 / align-items:flex-start
 *             width の指定は base に無い（＝内容幅）。@mobile でだけ 100%。
 */
.vo-card__main {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 8px;
	padding: 0;
}

/* 設計ツリー: <group> column / gap:5px / width:100% / align-items:center / margin:0 / padding:0 */
.vo-card__service {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	gap: 5px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*
 * サービスの小見出し。11px / 500 / line-height 1.4。
 * display は STUDIO の Text 既定＝flex。@mobile / @mini で none（R2 に従い全断面に明記）。
 */
.vo-card__service-note {
	display: flex;
	width: auto;
	height: auto;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 11px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/* サービス名バッジ。設計ツリー: Box 125x30 / border-radius:20.5px / 地色は1件ごと */
.vo-card__badge {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 125px;
	height: 30px;
	margin: 0;
	background: var(--vo-accent, transparent);
	border-radius: 20.5px;
}

/* 12px / 700 / line-height 1.4 */
.vo-card__badge-text {
	width: auto;
	height: auto;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

/* 設計ツリー: <group> 938424a7 column / gap:3px / padding:0 / align-items:center */
.vo-card__person {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 3px;
	padding: 0;
}

/* 設計ツリー: <group> 08c02a07 row / gap:10px / padding:0 / align-items:center（1階層残す） */
.vo-card__person-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 10px;
	padding: 0;
}

/*
 * アバター。設計ツリー: 50x50 / border-radius:64px / background は1件ごと（画像未読込時の下地）。
 * object-fit は原文に無いが、STUDIO の Image 既定が cover なので合わせる
 * （幅高さ固定のため、指定しないと非正方形の画像が潰れる）。
 */
.vo-card__avatar {
	display: block;
	flex: none;
	width: 50px;
	height: 50px;
	background: var(--vo-accent, transparent);
	border-radius: 64px;
	object-fit: cover;
}

/* 設計ツリー: <group> 18565ca4 column / gap:10px / padding:0 / align-items:flex-start */
.vo-card__names {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 10px;
	padding: 0;
}

/* 利用者名。16px / 700 / letter-spacing .1em / line-height 1.4 / text-align:center */
.vo-card__name {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 属性。11px / 700 / #082b34b3（8桁 HEX は原文どおり落とさない）/ width:100% */
.vo-card__attr {
	flex: none;
	width: 100%;
	height: auto;
	margin: 0;
	color: #082b34b3;
	font-family: var(--s-font-f88553ee);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-align: left;
}

/*
 * 声のテキスト。
 * 設計ツリー: <group> b109dd15 gap:5px / width:100% / padding:0 / background:transparent
 *             border-radius:0 / align-items:flex-start / justify-content:center
 *             transition-duration:300ms / delay:300ms / timing:ease-in-out
 * flex-direction の指定は無い（STUDIO 既定＝column）。
 * transition-property の指定も無いので all。見た目に効く要素は今のところ無いが原文どおり残す。
 */
.vo-card__text {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 5px;
	width: 100%;
	padding: 0;
	background: transparent;
	border-radius: 0;
	transition: all 300ms ease-in-out 300ms;
}

/* 声の見出し。24px / 700 / letter-spacing .1em / line-height 1.4 / 文字色は1件ごと */
.vo-card__headline {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	color: var(--vo-headline, #082b34);
	font-family: var(--s-font-f88553ee);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-align: left;
	/*
	 * text-wrap:balance は原文に無い補い（2026-09-14・voice-03）。
	 * 原文のままだと「貴重な経験になりまし／た！」のように末尾1〜2文字だけが2行目に落ちる
	 * （現行 audit orphans: 375=2件 / 430=1件 / 768=3件 / 1440=2件。箱幅 303px に 12文字×24px×1.1em=316px）。
	 * balance で 6文字/6文字のように均等に割れ、1行に収まるものは1行のまま。未対応ブラウザは無視するだけ。
	 */
	text-wrap: balance;
}

/*
 * 本文。16px / 500 / #082b34cb / letter-spacing .15em / margin-top:10px。
 * ★ display は原文では base:none / @small:none / @tablet:flex / @mobile:none / @mini:none
 *   （＝ 541〜840px の帯でだけ表示）。ただし @tablet では li の固定高 307px（@small）と同時に
 *   効き、本文（118〜233字）が箱から溢れて次の行のカードに重なる（現行サイトでも同じ。
 *   2026-09-14 実測: 768 で overflowsBox 10件・overlaps 32件・clippedChildren 10件）。
 *   2026-09-14 に @tablet も none にし、本文はモーダル（§5）で読ませる（voice-02）。
 *   R2 に従って全断面に明記する。
 */
.vo-card__body {
	display: none;
	flex: none;
	width: auto;
	height: auto;
	margin: 10px 0 0;
	color: #082b34cb;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	letter-spacing: 0.15em;
	text-align: left;
}

/*
 * 「詳しく見る」。
 * 設計ツリー: Box width:100% / height:auto / background:transparent
 *             align-items:flex-end / justify-content:flex-start（flex-direction 指定なし＝column）
 *             → column ＋ align-items:flex-end なので右端に寄る。
 */
.vo-card__more {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
	align-content: flex-end;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	background: transparent;
}

/*
 * 14px / 400 / line-height 1.4。
 * 文字色はバッジと同じ {{W4QRsCAh.FUycX_G5}} で、原文が filter で暗く濃くしている。
 * mix-blend-mode:normal も原文の明示指定。
 *
 * ★2026-09-15 コントラスト調整（CEO決定「直してOK」）
 *   原文の filter:brightness(75%) saturate(185%) を外し、同じ役割（アクセント色を
 *   暗く濃くして文字にする）を color 側の派生で行うようにした。
 *   なぜ filter をやめたか: filter は描画時にだけ効くので CSS の color と実際の
 *   描画色が食い違い、コントラストの検証も自動監査もできない
 *   （検証済みの実描画色: #ffb1b1→#e67a7a 比 2.64 ／ #cbe9ef→#89b3bb 比 2.13 ／
 *    #b7f4b2→#6ec267 比 2.05。いずれも 14px＝要 4.5 に届いていなかった）。
 *   アクセント色は inc/voices.php が style="--vo-accent:…" で1件ごとに流し込む
 *   3色。色相そのままに黒方向へ混ぜた固定値を、インラインstyleの値そのものを
 *   セレクタにして当てる（PHP のデータは触らない。color-mix と :nth-child を
 *   使わない理由は front.css の同じ注記に書いてある）。カード地 #fbf6f6 に対して:
 *     #ffb1b1 → 43%暗 #916565（1.61 → 4.61）
 *     #cbe9ef → 51%暗 #637275（1.19 → 4.68）
 *     #b7f4b2 → 51%暗 #5a7857（1.18 → 4.61）
 *   未登録のアクセント色が来たときは既定の #082b34（ネイビー）に落ちる＝読める側に倒れる。
 *
 * ★★ 2026-09-15 移設: --vo-accent-d を決める3行は **parts.css §7-0** へ移した。
 *   なぜ: 同じ派生色をモーダルの「閉じる」（.vo-dialog__close）も使っており、
 *     そのモーダルが /reblue と共通化されて parts.css へ出たため
 *     （/voice でしか読まれない voice.css に置いておくと /reblue で色が落ちる）。
 *   値は1文字も変えていない。parts.css は voice.css より先に読み込まれ
 *     （inc/enqueue.php: ordinary-parts=priority 20 → ordinary-page-voice=priority 30）、
 *     --vo-accent-d を書くルールは他に無いので、/voice の描画結果は移設前と同一。
 *     実測でも移設前後で「詳しく見る」の color は rgb(145,101,101) のまま変わらない。
 */
.vo-card__more-text {
	width: auto;
	height: auto;
	color: var(--vo-accent-d, #082b34);
	font-family: var(--s-font-f88553ee);
	font-size: 14px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
	mix-blend-mode: normal;
}

/*
 * カード全面の押下領域（2026-09-14・voice-04）。
 * 原文はカード自体が <button>（studio-modal://x8zYTAlF/{{slug}}）で、押すとモーダル（§5）が開く。
 * li の flex を崩さないよう、中身を包まずに absolute の透明ボタンを li に重ねる
 * （@mobile の li は gap:20px / height:auto なので、通常フローに置くと1枚につき +20px 伸びる。
 *   2026-09-14 実測: 375 で section 3072px → absolute にして現行と同じ 2872px）。
 * 背景・枠・padding・cursor は base.css の button リセット、フォーカスリングは base.css の :focus-visible。
 * border-radius はリングをカードの角に沿わせるためで、li と同じ 16px。
 */
.vo-card__btn {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	border-radius: 16px;
}

/* ============================================================
 * 5. モーダル（利用者の声の詳細）→ parts.css §7 へ移設（2026-09-15）
 *
 *    ここにあった .vo-dialog 系31ルールは **parts.css の §7** に移した。
 *    なぜ: 原文 STUDIO では /voice のカードも /reblue #voice-1 のカードも同一のモーダル
 *      `studio-modal://x8zYTAlF/{{slug}}` を開く。CEO指示（2026-09-15）で /reblue のカードも
 *      モーダルにしたため、/voice でしか読まれない voice.css では共有できなくなった。
 *      reblue.css に写すと同じ値が2ファイルに増えて必ずずれるので、共通CSSへ1本化した。
 *    値: 移設前後で宣言は同一（セレクタ31本・宣言を機械照合。差分は .vo-dialog__body の
 *      margin のみで、これは現行実測に合わせた意図的な修正。理由は parts.css §7 の
 *      .vo-dialog__body のコメント参照）。
 *    マークアップ: template-parts/voice-modal.php（/voice・/reblue 共通）
 *    JS:          assets/js/voice-modal.js（inc/enqueue.php で両ページに読ませる）
 * ============================================================ */

/* ============================================================
 * 6. レスポンシブ
 *    R1: 1140 → 840 → 540 → 320 の順。設計ツリーの @small / @tablet / @mobile / @mini 逐語。
 *    値が base と同じだけの上書き（例: @mobile の .vo-head { flex:none }、
 *    @mobile の .vo-card__names、@tablet の position:relative）は書いていない。
 *    モーダル（§5）の上書きも R3 に従い、ここの各ブロックの末尾にまとめて置く。
 * ============================================================ */

/* ---- @small（~1140px） ---- */
@media screen and (max-width: 1140px) {

	/*
	 * 設計ツリー: padding:0px 20px（base の下 50px は消える）。
	 * ★ 下 50px は 2026-09-14 に補った（voice-05）。原文どおりだと 541〜1140px 帯では最終行の
	 *   カード下端からフッターまで ul の padding 10px しか無く、カードがフッターに張り付く
	 *   （現行 768 実測: 最終カード下端 1916 / ul 下端 1926 = フッター上端 1926。現行も同じ）。
	 *   1440 は 50+10=60px、≤540 は 50px あるので、この帯だけ現行より +50px 高くなる意図的な逸脱。
	 */
	.vo-voice {
		padding: 0 20px 50px;
	}

	.vo-card {
		height: 307px;
	}

	.vo-card__service-note {
		display: flex;
	}

	.vo-card__body {
		display: none;
	}
}

/* ---- @tablet（~840px） ---- */
@media screen and (max-width: 840px) {

	.vo-list {
		gap: 15px;
	}

	.vo-card {
		flex: none;
		align-items: center;
		align-content: center;
		justify-content: space-between;
		width: calc(36% - 15px * 0.64);  /* 原文 36%。STUDIO の実式に揃える（2026-09-14・voice-07。§4 のコメント参照） */
	}

	.vo-card__main {
		align-items: flex-start;
		align-content: flex-start;
		justify-content: space-between;
	}

	.vo-card__service {
		align-items: center;
		align-content: center;
		justify-content: space-between;
	}

	.vo-card__service-note {
		display: flex;
	}

	/*
	 * 原文はこの帯でだけ本文が出る（display:flex / 13px）が、固定高 307px の箱から溢れて
	 * 次の行のカードに重なるため none にした（2026-09-14・voice-02。§4 のコメント参照）。
	 * font-size は原文の記録として残す。
	 */
	.vo-card__body {
		display: none;
		font-size: 13px;
	}

	/* ---- モーダルの @tablet 上書きは parts.css §7 へ移設（2026-09-15・§5 の注記参照） ---- */
}

/* ---- @mobile（~540px） ---- */
@media screen and (max-width: 540px) {

	.vo-voice {
		flex: none;
		height: auto;
		padding: 50px 30px;
	}

	.vo-list {
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 0;
		overflow-x: visible;
		overflow-y: visible;
	}

	.vo-card {
		flex: none;
		gap: 20px;
		width: 100%;
		height: auto;
		padding: 20px 20px 20px;
	}

	.vo-card__main {
		flex: none;
		width: 100%;
	}

	.vo-card__service-note {
		display: none;
	}

	.vo-card__person {
		align-items: flex-start;
		align-content: flex-start;
		justify-content: center;
	}

	.vo-card__avatar {
		flex: none;
		width: 60px;
		height: 60px;
	}

	.vo-card__text {
		flex: none;
		width: 100%;
	}

	.vo-card__headline {
		font-size: 24px;
		letter-spacing: normal;
	}

	.vo-card__body {
		display: none;
		font-size: 12px;
		font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	}

	.vo-card__more-text {
		font-weight: 700;
	}

	/* ---- モーダルの @mobile 上書きは parts.css §7 へ移設（2026-09-15・§5 の注記参照） ---- */
}

/* ---- @mini（~320px） ---- */
@media screen and (max-width: 320px) {

	.vo-card__service-note {
		display: none;
	}

	.vo-card__person {
		align-items: flex-start;
		align-content: flex-start;
		justify-content: center;
	}

	.vo-card__text {
		padding: 1px;
	}

	.vo-card__headline {
		font-size: 18px;
	}

	.vo-card__body {
		display: none;
	}
}