/* =====================================================================
   ページ: 採用情報（Saiyo）  Figma 76:30361
   MV=components/mv.css(.c-mv) / 見出し=c-heading / ボタン=c-btn を共通利用。
   各セクションは Figma 実寸に合わせて再構築。
   ===================================================================== */

/* base.css の section{margin-block:48} を打ち消す（余白は各セクションのpaddingで管理）。
   未リセットだと波(.saiyo-wave)やセクション境界に48pxのbody背景余白が出てflushにならない。 */
.saiyo section { margin-block: 0; }

/* --- セクション背景テクスチャ ユーティリティ -------------------------
   テクスチャ規約に準拠：色を焼き込んだ紙テクスチャ画像を 346.8×327.8px の
   タイルで直接フィルする（multiply は使わない＝区切りと継ぎ目を出さない）。
   tex-yellow  = 背景色_ライトイエロー面 / tex-offwhite = 背景色_オフホワイト面。 */
.saiyo-tex-yellow {
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
}
.saiyo-tex-offwhite {
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
}

/* --- MV：採用ページ専用の調整（オーバーレイ＝セージ系、左右の子どもイラスト）--- */
.saiyo .c-mv__tint { background-color: rgba(153, 195, 188, 0.25); }
.saiyo-mv__fig { position: absolute; bottom: 0; height: auto; z-index: 3; pointer-events: none; }
.saiyo-mv__fig--left  { left: 8.3%;  width: min(18.3%, 264px); bottom: 6%; }
.saiyo-mv__fig--right { right: 11.6%; width: clamp(56px, 6.7%, 96px); bottom: 5%; }
@media (max-width: 768px) {
	/* SP では左右の子どもイラストは非表示（MV内のスペースを確保） */
	.saiyo-mv__fig { display: none; }
}

/* --- セクション間の波形ディバイダー -----------------------------------
   Figma 各セクション境界の Rectangle 39（波形・高さ78px）。波線より上＝上セクション面、
   下＝下セクション面。両面とも隣接セクションと同じテクスチャを継ぎ、継ぎ目を出さない。
   ・下面 … 要素自身の background（帯全面）。
   ・上面 … ::after を波形上部のみにマスク表示（波線は Figma の Rectangle 39 と同形）。
   面の指定は modifier で：--t-* が上面、--b-* が下面（white / off=オフホワイト / yellow=ライトイエロー）。 */
.saiyo-wave {
	position: relative;
	width: 100%;
	height: 78px;
	line-height: 0;
}
.saiyo-wave::after {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 95' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V52.6603L1232.5 14.5052L903 29.4593L514.5 0L244 0L0 52.6603Z' fill='%23fff'/%3E%3C/svg%3E") top left / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 95' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V52.6603L1232.5 14.5052L903 29.4593L514.5 0L244 0L0 52.6603Z' fill='%23fff'/%3E%3C/svg%3E") top left / 100% 100% no-repeat;
}

/* 下面（波線より下＝次セクション） */
.saiyo-wave--b-white  { background-color: var(--color-white); }
.saiyo-wave--b-off    { background-color: var(--color-bg-offwhite);     background-image: url("../../images/common/tex-offwhite.webp"); background-position: top left; background-size: 346.8px 327.8px; background-repeat: repeat; }
.saiyo-wave--b-yellow { background-color: var(--color-bg-light-yellow); background-image: url("../../images/common/tex-yellow.webp");   background-position: top left; background-size: 346.8px 327.8px; background-repeat: repeat; }

/* 上面（波線より上＝前セクション） */
.saiyo-wave--t-white::after  { background-color: var(--color-white); }
.saiyo-wave--t-off::after    { background-color: var(--color-bg-offwhite);     background-image: url("../../images/common/tex-offwhite.webp"); background-position: top left; background-size: 346.8px 327.8px; background-repeat: repeat; }
.saiyo-wave--t-yellow::after { background-color: var(--color-bg-light-yellow); background-image: url("../../images/common/tex-yellow.webp");   background-position: top left; background-size: 346.8px 327.8px; background-repeat: repeat; }

@media (max-width: 768px) {
	.saiyo-wave {
		height: 40px;
	}
}

/* ==========================================================================
   採用ページ [intro] その子の一歩に ＋ インタビュー動画  (Figma 76:30426)
   ========================================================================== */
.saiyo-intro {
	/* 背景：ライトイエローのテクスチャ（Figma 76:30426） */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-64);
}

.saiyo-intro__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	/* Figma: container px 80px。狭い画面は 24px に縮める */
	padding-inline: var(--space-24);
	/* 見出し行 ⇄ 動画 の縦間隔（Figma gap 64px） */
	display: flex;
	flex-direction: column;
	gap: var(--space-64);
}

/* --- 上段：左見出し / 右本文（Figma row gap 56px, 1:1） ----------------- */
.saiyo-intro__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: start;
}

.saiyo-intro__title {
	margin: 0;
	/* Figma: 32px / ExtraBold(800) / 1.6 / letter-spacing 1.6px(=0.05em) */
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-wider);
	color: var(--color-brown-text);
}

.saiyo-intro__title-line {
	display: block;
}

.saiyo-intro__text {
	display: flex;
	flex-direction: column;
	/* 段落間（Figma は本文中の空行 1 行ぶん ≒ 1.8em。24px で近似） */
	gap: var(--space-24);
}

.saiyo-intro__text p {
	margin: 0;
	/* Figma: 18.29px / SemiBold(600) / 1.8 / ls 0 */
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-body);
	color: var(--color-brown-text);
}

/* --- インタビュー動画（YouTube 埋め込み・Figma aspect 1450:820, radius 16px） --- */
.saiyo-intro__video {
	border-radius: var(--radius-md);
	overflow: hidden;
	/* iframe には固有の縦横比がないため、ラッパー側で比率を確保する */
	aspect-ratio: 1450 / 820;
}

.saiyo-intro__video-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- レスポンシブ：PC は左右 1:1 の2カラム ----------------------------- */
@media (min-width: 768px) {
	.saiyo-intro {
		padding-block: var(--space-64);
	}

	.saiyo-intro__inner {
		padding-inline: var(--space-80);
	}

	.saiyo-intro__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-56);
	}
}

/* --- SP（〜768px）：Figma 76:31783。見出し・本文を中央寄せ＋縮小（1カラム）--- */
@media (max-width: 768px) {
	.saiyo-intro {
		padding-block: var(--space-24);
	}

	.saiyo-intro__inner {
		gap: var(--space-32);
	}

	/* 上段は1カラムのまま中央寄せ（見出し→本文の縦並び） */
	.saiyo-intro__top {
		gap: var(--space-24);
		text-align: center;
	}

	.saiyo-intro__title {
		/* 32px → 21.33px */
		font-size: var(--font-size-h3);
	}

	.saiyo-intro__text {
		gap: var(--space-16);
		text-align: left;
	}

	.saiyo-intro__text p {
		/* 18.29px → 16px */
		font-size: var(--font-size-h6);
	}
}
/* ==========================================================================
   採用ページ [stats] 数字で分かるippo  (Figma 76:30470)
   ========================================================================== */
.saiyo-stats {
	/* 背景：オフホワイトのテクスチャ（Figma 76:30470）。intro とは波形で区切られる。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: 0 var(--space-80);
}

.saiyo-stats__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-24);
	/* 見出し ⇄ カード（Figma gap 48px） */
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.saiyo-stats__lettering { text-align: center; }

/* --- SP（〜768px）：Figma 76:31783 -----------------------------------------
   トップの実績カウンターは SP で1カラムの枠付きカードだが、採用の「数字で分かる
   ippo」は SP でも 3カラムを維持し、枠なし・余白なしのコンパクト表示にする。
   共通コンポーネント（components/counter.css）の SP 既定を .saiyo-stats 配下のみ上書き。
   （セレクタ詳細度 0,2,0 > 0,1,0 で counter.css の SP 規則に確実に勝つ）*/
@media (max-width: 768px) {
	.saiyo-stats {
		padding-bottom: var(--space-56);
	}

	.saiyo-stats__inner {
		gap: var(--space-32);
		padding-inline: var(--space-16);
	}

	/* 3カラム維持・列間は詰める */
	.saiyo-stats .c-counter__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-8);
	}

	/* カードはトップの c-counter__card と同じ見た目に揃える：手描き枠（card-border_sp.png・
	   白背景は共通コンポーネント counter.css から継承）＋上にはみ出すアイコン。
	   余白もトップ（pt24 / pb16）に合わせ、浮かせたアイコンと本文が重ならないようにする。 */
	.saiyo-stats .c-counter__card {
		padding: var(--space-24) var(--space-4) var(--space-16);
		/* 数値の nowrap が 1fr トラックを押し広げて3カラムが画面を超えるのを防ぐ */
		min-width: 0;
	}

	/* アイコンはトップ同様カード上端から飛び出す絶対配置（43×43px・contain）。
	   各カードのインライン style（PC用 icon_h/icon_y 調整）を上書きするため !important。 */
	.saiyo-stats .c-counter__icon {
		width: 43px !important;
		height: 43px !important;
		top: -6px !important;
		object-fit: contain;
	}

	.saiyo-stats .c-counter__eyebrow {
		margin-bottom: var(--space-4);
		font-size: var(--font-size-2xs);
	}

	/* 数値ブロックの最小高さ（PC=110px）を解除して詰める */
	.saiyo-stats .c-counter__num {
		min-height: 0;
		margin: 0;
		font-size: var(--font-size-h3-lg); /* 64px → 21.33px */
	}
	.saiyo-stats .c-counter__num small { font-size: var(--font-size-h3); }      /* ％ */
	.saiyo-stats .c-counter__num small.c-counter__unit--sm { font-size: var(--font-size-h6); } /* 回+/教室 */

	.saiyo-stats .c-counter__label {
		margin-top: var(--space-4);
		font-size: var(--font-size-2xs);
	}

	/* カード内の長い注記（※1日10人…）は SP の3カラムでは非表示にして列幅を保つ。
	   PC（児発…の計算根拠）では引き続き表示される。 */
	.saiyo-stats .c-counter__card-note {
		display: none;
	}
}

/* =====================================================================
   採用ページ [benefits] ippoで働くメリット  Figma 76:30513
   白い角丸カードのジグザグ（4行・写真左右交互）。
   各行は反対側に 80px のインセットを持ち、階段状にずらして配置。
   カード = 白地 + 3px の淡いウォームボーダー + 角丸16px。
   写真 = 420×260 の角丸。見出しは黄土色の下線アクセント付き。
   tokens / base / components に依存。クラス接頭辞は .saiyo-benefits。
   ===================================================================== */

.saiyo-benefits {
	position: relative;
	/* 背景：ライトイエローのテクスチャ（Figma 76:30513） */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-120) var(--space-80); /* Figma: pt120 / pb80（上は積み木イラストの重なり分） */
}

/* セクション冒頭の「IPPO 積み木」イラスト（Figma 76:30588）。
   上端をまたいで上方向へはみ出して中央配置（自身の高さの約59%が上にはみ出す）。 */
.saiyo-benefits__illust {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -59%);
	width: min(639px, 86vw);
	height: auto;
	z-index: 2;
	pointer-events: none;
}

.saiyo-benefits__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--layout-medium);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
}

/* ジグザグのリスト（行間 32px） */
.saiyo-benefits__list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}

/* 1行 = 反対側へのインセットを持つラッパー（モバイルではインセットなし） */
.saiyo-benefits__row {
	width: 100%;
}

/* 白い角丸カード（モバイル：写真上 / テキスト下） */
.saiyo-benefits__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-24) var(--space-32);
	/* 手描き（クレヨン）の枠を border-image で適用（.top-kagai__card と共通の
	   top/top-concern-border.webp）。中身は白塗り（border 内側＝padding-box まで）。 */
	background-color: var(--color-white);
	background-clip: padding-box;               /* 枠線の外側に白がはみ出さないように */
	border-image: url("../../images/top/top-concern-border.webp") 44 / 20px round;
	border-radius: var(--radius-md);            /* fallback 用 */
	overflow: hidden;
}

/* 写真：420×260 の角丸（PC で原寸） */
.saiyo-benefits__media {
	width: 100%;
	flex-shrink: 0;
}

.saiyo-benefits__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 420 / 260;
	object-fit: cover;
}

/* テキスト列 */
.saiyo-benefits__body {
	flex: 1 1 0;
	min-width: 0;
	max-width: 35rem; /* 560px */
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	color: var(--color-brown-text);
}

/* 見出し：21.33px ExtraBold。Figma 通り2行に分け、各行に手描きの下線
   （common/underline.png・文字幅いっぱい・6px）を敷く。行間 8px。 */
.saiyo-benefits__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	font-size: var(--font-size-h3-lg);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-brown-text);
}
.saiyo-benefits__title-line {
	padding-bottom: var(--space-4);
	background: url("../../images/common/underline.png") left bottom / 100% 4px no-repeat;
}

/* 1行を SP で複数行に割るグループ。既定＝縦並び（各行に下線）＝SP。PC では横一列に上書きして1行にする。 */
.saiyo-benefits__title-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
}

/* 本文：16px Medium / 行間 1.8 */
.saiyo-benefits__text {
	margin: 0;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body);
	color: var(--color-brown-text);
}

/* ===== タブレット以上：横並び＋階段状インセット ===== */
@media (min-width: 769px) {
	.saiyo-benefits {
		padding-block: var(--space-80) var(--space-40);
	}
	/* 写真左の行 = 左を 80px インセット / 写真右(flip)の行 = 右を 80px インセット */
	.saiyo-benefits__row {
		padding-left: var(--space-80);
	}

	.saiyo-benefits__row--flip {
		padding-left: 0;
		padding-right: var(--space-80);
	}

	.saiyo-benefits__card {
		flex-direction: row;
		align-items: center;
		gap: var(--space-56);
		padding: var(--space-24) var(--space-32);
	}

	/* flip 行は写真を右へ */
	.saiyo-benefits__row--flip .saiyo-benefits__card {
		flex-direction: row-reverse;
	}

	/* 写真は 420×260 で固定 */
	.saiyo-benefits__media {
		width: 26.25rem; /* 420px */
		height: 16.25rem; /* 260px */
	}

	.saiyo-benefits__photo {
		height: 100%;
	}

	/* 見出しブロックを左寄せ（各行の下線は title-line 側が文字幅で持つ） */
	.saiyo-benefits__title {
		align-self: flex-start;
	}

	/* PC は2ピースを横一列に並べ、元どおり1行に（下線は各ピースが連続して引く）。 */
	.saiyo-benefits__title-group {
		flex-direction: row;
		align-items: flex-start;
		gap: 0;
	}
}

/* ===== 狭めの画面でインセットを縮める ===== */
@media (min-width: 769px) and (max-width: 1024px) {
	.saiyo-benefits__row {
		padding-left: var(--space-40);
	}

	.saiyo-benefits__row--flip {
		padding-right: var(--space-40);
	}

	.saiyo-benefits__media {
		width: 20rem; /* 320px */
	}
}

@media (max-width: 768px) {
	.saiyo-benefits {
		padding-block: var(--space-24) var(--space-40);
	}
	/* 下線素材は SP=2px に揃える（PC は 4px）。 */
	.saiyo-benefits__title-line { background-size: 100% 2px; }
	.saiyo-benefits__illust {
		transform: translate(-50%, -100%);
	}
	.saiyo-benefits__inner {
		gap: var(--space-24);
		padding-inline: var(--space-16);
	}

	/* SP は .top-concern と同じレイアウト：1カラムで積み、写真を左に float、
	   見出しは写真の右に回り込み、本文は写真の下へ回り込む（clear）。 */
	.saiyo-benefits__list {
		flex-direction: column;
		gap: var(--space-12);
	}
	.saiyo-benefits__card {
		display: block;          /* flex を解除＝写真を float し本文を回り込ませる */
		padding: var(--space-12);
		text-align: left;
	}
	.saiyo-benefits__media {
		float: left;
		width: 33%;
		margin: 0 var(--space-12) var(--space-8) 0;
	}
	.saiyo-benefits__photo {
		width: 100%;
	}
	.saiyo-benefits__body {
		display: block;          /* float を回り込ませるため block に */
		max-width: none;
	}
	/* 見出しは写真の右・左寄せ・h5（.top-concern__title と同サイズ感）。 */
	.saiyo-benefits__title {
		align-items: flex-start;
		font-size: var(--font-size-h5);
		gap: var(--space-4);
		margin: var(--space-4) 0 var(--space-8);
	}
	.saiyo-benefits__title-group {
		gap: 0;
	}
	/* 本文は写真の下へ回り込む（clear）・h6（.top-concern__text と同サイズ）。 */
	.saiyo-benefits__text {
		font-size: var(--font-size-h6);
		line-height: var(--line-height-base);
		clear: both;
	}
}

/* ==========================================================================
   採用ページ [persona] こんな方におすすめ（4枚の円形カード）
   Figma: 76:30591
   ========================================================================== */
.saiyo-persona {
	background-color: var(--color-white);
	padding-block: var(--space-24) var(--space-64);
}


.saiyo-persona__inner {
	max-width: var(--layout-medium);
	margin-inline: auto;
	padding-inline: var(--space-24);
}

.saiyo-persona__list {
	list-style: none;
	margin: var(--space-32) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-40) var(--space-24);
}

.saiyo-persona__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	text-align: center;
}

/* --- 円形（ブロブ）写真＋アイコンイラスト --------------------------------- */
.saiyo-persona__media {
	position: relative;
	width: 100%;
	max-width: 14.75rem; /* 236px */
	aspect-ratio: 1 / 1;
}

.saiyo-persona__photo {
	display: block;
	width: 100%;
	height: 100%;
	/* ブロブ形と向きは PNG のアルファに焼き込み済み（Figma の Vector マスク + 回転） */
	object-fit: contain;
}

/* 各写真の右下に重なる色付きイラスト（新芽/握手/虫眼鏡/階段）。
   位置・サイズは Figma 実寸（236px メディア基準の %）。 */
.saiyo-persona__icon {
	position: absolute;
	display: block;
	height: auto;
	object-fit: contain;
}
.saiyo-persona__item:nth-child(1) .saiyo-persona__icon { left: 61.4%; top: 72.0%; width: 33.0%; }
.saiyo-persona__item:nth-child(2) .saiyo-persona__icon { left: 65.7%; top: 74.9%; width: 30.3%; }
.saiyo-persona__item:nth-child(3) .saiyo-persona__icon { left: 74.6%; top: 69.0%; width: 17.8%; }
.saiyo-persona__item:nth-child(4) .saiyo-persona__icon { left: 70.3%; top: 72.4%; width: 20.7%; }

/* --- キャプション ----------------------------------------------------- */
.saiyo-persona__caption {
	margin: 0;
	font-size: 1.143rem; /* 18.29px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
	color: var(--color-brown-text);
}

.saiyo-persona__caption-line {
	display: block;
}

/* --- レスポンシブ：PC は 4カラム横並び -------------------------------- */
@media (min-width: 768px) {
	.saiyo-persona {
		padding-block: var(--space-40) var(--space-80);
	}

	.saiyo-persona__list {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-32);
	}
}

@media (max-width: 768px) {
	.saiyo-persona {
		padding-block: var(--space-8) var(--space-24);
	}
	.saiyo-persona__list {
		margin-top: var(--space-24);
		gap: var(--space-12);
	}
	.saiyo-persona__item {
		gap: var(--space-4);
	}
	.saiyo-persona__caption {
		font-size: var(--font-size-h6);
	}
}
/* ==========================================================================
   採用ページ [career] キャリアアップ制度（STEP1-4 階段図）
   Figma: 76:30638
   ========================================================================== */
.saiyo-career {
	/* 背景：ライトイエローのテクスチャ（Figma 76:30638） */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-40) var(--space-120);
}

.saiyo-career__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-24);
}

/* --- 本文リード：Figma は最大 640px・左寄せ -------------------------- */
.saiyo-career .c-heading__lead {
	max-width: 640px;
	margin-inline: auto;
	text-align: left;
}

/* --- STEP階段図：Figma から1枚画像として書き出して配置 --------------- */
.saiyo-career__steps-img {
	display: block;
	width: 100%;
	max-width: 1040px;
	height: auto;
	margin: var(--space-40) auto 0;
}

@media (max-width: 768px) {
	.saiyo-career {
		padding-top: var(--space-16);
		padding-bottom: var(--space-40);
	}
	.saiyo-career__steps-img {
		margin-top: var(--space-24);
	}
}
/* ==========================================================================
   採用ページ [voice] 先輩スタッフの声（5枚の横スクロールカルーセル）
   JSなし：scroll-snap による横スクロール。Figma 76:30699 にピクセル準拠。
   ・カード幅 288px / 8px角丸 / クリーム色6px枠 / カード間 40px
   ・写真は正方形(1:1)
   ・役割ピル＝左上に重ね、右下角だけ角丸。白文字 ExtraBold。
   ・本文：氏名 18.29px bold / コメント 14.22px medium
   ・ボタン：全幅ピル(100px)・ブラウン1.5px枠・右丸矢印
   ========================================================================== */
.saiyo-voice {
	background-color: var(--color-white);
	padding-block: var(--space-40) var(--space-120);
	overflow-x: clip; /* フルブリードのトラックがページ横スクロールを生まないよう抑止 */
}

.saiyo-voice__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-24);
}

/* --- カルーセル全体（矢印＋トラック） ---------------------------------
   Figma 76:30699 準拠：トラックは画面幅いっぱい（フルブリード）で、
   カード群を中央基準にオーバーフローさせ左右を見切れさせる。
   中央スタートは voice-modal.js が scrollLeft を設定（PCのみ）。 */
.saiyo-voice__carousel {
	position: relative;
	margin-top: var(--space-48);
	width: 100vw;
	margin-inline: calc(50% - 50vw); /* 親(1200/24pad)から画面端まで展開 */
}

/* ビューポート：SPは Swiper のコンテナ（.swiper が overflow クリップを付与）。PCは素通し。 */
.saiyo-voice__viewport {
	width: 100%;
}

/* ページネーションドットは PC では非表示（SPの中央スナップ・カルーセルのみ）。 */
.saiyo-voice__dots {
	display: none;
}

/* --- スクロールトラック ----------------------------------------------- */
.saiyo-voice__track {
	list-style: none;
	margin: 0;
	padding: 0 var(--space-24);
	display: flex;
	gap: var(--space-40);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--space-24);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.saiyo-voice__track::-webkit-scrollbar {
	display: none;
}

.saiyo-voice__item {
	flex: 0 0 80vw;
	max-width: 18rem; /* 288px */
	scroll-snap-align: start;
}

/* --- カード（手描き枠＋8px角丸） ------------------------------------- */
.saiyo-voice__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* 背景：.saiyo-career と同じライトイエローのテクスチャ（tex-yellow・346.8×327.8px タイル）。 */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	/* 手描きの枠を border-image で適用（.c-support__card と共通の
	   top/top-support-card-border.webp・662×644・透過）。 */
	border-image: url("../../images/top/top-support-card-border.webp") 20 / 10px round;
	border-radius: var(--radius-sm); /* 8px・fallback 用 */
	overflow: hidden;
}

.saiyo-voice__media {
	position: relative;
}

.saiyo-voice__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ratio-square); /* 1:1 */
	object-fit: cover;
}

/* --- 役割ピル（左上に重ね・右下角のみ角丸／テクスチャ付き水色） ------- */
.saiyo-voice__role {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden; /* 角丸でクリップ */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-24);
	border-bottom-right-radius: var(--radius-sm); /* 8px */
	font-size: var(--font-size-body); /* 16px */
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-base);
	letter-spacing: 0.1em; /* 1.6px */
	color: var(--color-white);
	white-space: nowrap;
	background-color: var(--color-accent-blue);
}

/* 役割ピルは全カード共通の水色（Figma 76:30699 準拠） */
.saiyo-voice__role--blue,
.saiyo-voice__role--green,
.saiyo-voice__role--yellow,
.saiyo-voice__role--pink { background-color: var(--color-accent-blue); }

/* --- カード本文 ------------------------------------------------------- */
.saiyo-voice__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--space-16);
	padding: var(--space-24);
}

.saiyo-voice__meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	color: var(--color-brown-text);
}

.saiyo-voice__name {
	margin: 0;
	font-size: var(--font-size-h3); /* 18.29px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
}

.saiyo-voice__comment {
	margin: 0;
	font-size: var(--font-size-h5); /* 14.22px */
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-base);
}

/* --- 「インタビューはこちら」全幅ピルボタン（モーダル起動 <button>） -- */
.saiyo-voice__link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	margin-top: auto;
	padding: var(--space-10) var(--space-16);
	border: 1.5px solid var(--color-brown-text);
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: var(--font-size-h6); /* 12.8px */
	font-weight: var(--font-weight-bold);
	line-height: 1.5;
	color: var(--color-brown-text);
	text-align: left;
	text-decoration: none;
	background-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.saiyo-voice__link-text {
	flex: 1 1 0;
	text-align: center;
}

.saiyo-voice__link-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-24);
	height: var(--space-24);
	border-radius: 50%;
	background-color: var(--color-brown-text);
}

.saiyo-voice__link-icon::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-top: 2px solid var(--color-white);
	border-right: 2px solid var(--color-white);
	transform: rotate(45deg);
	margin-left: -0.12rem;
}

.saiyo-voice__link:hover {
	background-color: var(--color-white);
}

/* --- レスポンシブ：PC ------------------------------------------------- */
@media (min-width: 768px) {
	.saiyo-voice__item {
		flex-basis: 18rem; /* 288px 固定（JS未読込時のフォールバック） */
		scroll-snap-align: center; /* PCはカード中央でスナップ（中央オーバーフロー） */
	}
}

/* --- Swiper 有効時（PC・SP共通） --------------------------------------
   カルーセルは rooms-carousel.js（＝Swiper）が全ブレークポイントで担う。
   ネイティブの横スクロール機構（overflow/scroll-snap/gap）は Swiper に
   明け渡す。カード幅はここで指定し、slidesPerView:'auto' が参照する。 */
.saiyo-voice__track.swiper-wrapper {
	gap: 0; /* カード間は Swiper の spaceBetween が担う（PC=40 / SP=12） */
	padding-inline: 0;
	overflow: visible;
	scroll-snap-type: none;
}
.saiyo-voice__item.swiper-slide {
	flex: 0 0 18rem; /* PC: 288px */
	width: 18rem;
	max-width: none;
	height: auto;
}

@media (max-width: 768px) {
	.saiyo-voice {
		padding-top: var(--space-8);
		padding-bottom: var(--space-40);
	}
	.saiyo-voice__carousel {
		margin-top: var(--space-24);
	}

	/* SP は 180px・中央・ループ（矢印なし・ドットあり）。トラック機構の解除・カード高さ
	   揃えは Swiper 有効時の共通ルール（.swiper-wrapper / .swiper-slide）が担う。
	   ここではSPのカード幅（180px）だけ上書きする。 */
	.saiyo-voice__item.swiper-slide {
		flex-basis: 180px; /* ベースの 18rem を上書き。幅180px固定（slidesPerView:'auto'が参照） */
		width: 180px;
	}

	/* ページネーションドット（PHP出力の<button>。JS が is-active を同期。c-rooms__dots と同仕様）。 */
	.saiyo-voice__dots {
		display: flex;
		justify-content: center;
		gap: var(--space-8);
		margin-top: var(--space-24);
	}
	.saiyo-voice__dots button {
		width: var(--space-8);
		height: var(--space-8);
		padding: 0;
		border: none;
		cursor: pointer;
		border-radius: var(--radius-pill);
		background: var(--color-gray-pale); /* 不活性ドット #e7e2de */
		transition: background-color 0.2s ease;
	}
	.saiyo-voice__dots .is-active {
		background: var(--color-brown-sub); /* 活性ドット #89705b */
	}
	.saiyo-voice__role {
		font-size: var(--font-size-h6);
	}
	.saiyo-voice__body {
		padding: var(--space-12);
	}
	.saiyo-voice__name {
		font-size: var(--font-size-h5);
	}
	.saiyo-voice__comment {
		font-size: var(--font-size-xs);
	}
	.saiyo-voice__link {
		font-size: var(--font-size-3xs);
	}
	.saiyo-voice__link-icon {
		width: var(--space-16);
		height: var(--space-16);
	}
	.saiyo-voice__link-icon::before {
		width: 0.3rem;
		height: 0.3rem;
		border-width: 1px;
	}
}
/* ==========================================================================
   先輩スタッフの声 インタビューモーダル（ネイティブ <dialog>）
   Figma 76:20741 にピクセル準拠。
   ・カード＝白地・16px角丸・強めの浮き影。幅 min(1024px, 92vw)・最大高90vh で縦スクロール
   ・上部に横長写真（1397:786）／本文ブロックは最大640px・上下padding 64px
   ・メタ行＝役割14.22 / 氏名18.29bold / 入社14.22（すべて brown-text）
   ・見出し 21.33 bold（letter-spacing 2%）／本文 16px medium・行間1.8
   ・右上に白い角丸40pxの × 閉じるボタン
   ========================================================================== */
/* dialog はUA既定で閉時 display:none。開時のみ flex 化する（基底に display を置かない）。 */
.voice-modal[open] {
	display: flex;
	flex-direction: column;
}

.voice-modal {
	width: min(64rem, 92vw); /* 1024px */
	max-width: 64rem;
	max-height: 90vh;
	margin: auto;
	padding: 0;
	border: none;
	border-radius: var(--radius-md); /* 16px */
	/* 背景：ライトイエローのクレヨン紙テクスチャ（Figma 76:20622。色は焼き込み済み＝乗算しない）。 */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	box-shadow: var(--shadow-modal);
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--color-brown-text);
}

.voice-modal::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

/* --- 上部の横長メディア ---------------------------------------------- */
.voice-modal__media {
	width: 100%;
}

.voice-modal__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1397 / 786;
	object-fit: cover;
}

/* インタビュー動画（YouTube埋め込み）。iframe は固有比率を持たないためラッパーで16:9を確保。 */
.voice-modal__video {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--color-brown-text);
}

.voice-modal__video-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- 本文（中央寄せ・最大640px） ------------------------------------- */
.voice-modal__body {
	max-width: 40rem; /* 640px */
	margin-inline: auto;
	padding: var(--space-64) var(--space-24);
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

/* --- メタ行（役割・氏名・入社時期） ---------------------------------- */
.voice-modal__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-16);
	line-height: var(--line-height-base);
}

.voice-modal__role {
	font-size: var(--font-size-h5); /* 14.22px */
	font-weight: var(--font-weight-medium);
}

.voice-modal__name {
	font-size: var(--font-size-h3); /* 18.29px */
	font-weight: var(--font-weight-bold);
}

.voice-modal__join {
	font-size: var(--font-size-h5); /* 14.22px */
	font-weight: var(--font-weight-medium);
}

/* --- 見出し（コメント） ---------------------------------------------- */
.voice-modal__title {
	margin: 0;
	font-size: var(--font-size-h3-lg); /* 21.33px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
	letter-spacing: 0.02em;
}

/* --- 本文段落 -------------------------------------------------------- */
.voice-modal__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.voice-modal__text p {
	margin: 0;
	font-size: var(--font-size-body); /* 16px */
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body); /* 1.8 */
}

/* --- 閉じる帯（高さ0の sticky）。媒体を押し下げず×を常時上部に重ねる ---- */
.voice-modal__topbar {
	position: sticky;
	top: 0;
	z-index: 2;
	align-self: stretch;     /* 縦flex内で全幅に */
	height: 0;               /* 高さ0＝後続メディアを dialog 最上部(y=0)から始める */
	display: flex;
	justify-content: flex-end;
	pointer-events: none;    /* 0高さ帯はクリック透過。ボタンのみ有効化 */
}

/* --- 閉じるボタン（右上・白い角丸40px・top16/right16 で本文上に重なる） -- */
.voice-modal__close {
	pointer-events: auto;
	margin: var(--space-16); /* Figma: 上16 / 右16 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-40);
	height: var(--space-40);
	padding: 0;
	border: none;
	border-radius: var(--radius-sm); /* 8px */
	background-color: var(--color-white);
	/* Figma（76:20643）は影なしの白角丸。× は SVG（currentColor）で描画。 */
	color: var(--color-black);
	cursor: pointer;
}

.voice-modal__close:hover {
	background-color: var(--color-bg-light-yellow);
}

/* スクロールロック（JSが body に付与） */
body.is-modal-open {
	overflow: hidden;
}

/* --- レスポンシブ：SP（Figma 76:20622 にピクセル準拠） ----------------- */
@media (max-width: 768px) {
	.voice-modal {
		width: 92vw;
	}

	/* 本文ブロック：Figma パディング 上下24 / 左12 / 右28（右はスクロール帯ぶん広め）。
	   28px は 8グリッド外のため 16+12 のトークン合成で表現する。gap は 16。 */
	.voice-modal__body {
		padding: var(--space-24) var(--space-16);
		gap: var(--space-16);
	}

	/* 見出し：Figma SP は 16px ExtraBold（PC の 21.33px から縮小）。 */
	.voice-modal__title {
		font-size: var(--font-size-body); /* 16px */
		font-weight: var(--font-weight-extrabold);
	}

	/* 本文段落：Figma SP は 12.8px（PC の 16px から縮小）・行間 1.8 は据え置き。 */
	.voice-modal__text p {
		font-size: var(--font-size-h6); /* 12.8px */
	}
}
/* ==========================================================================
   採用ページ [flow] 応募の流れ（01-05 縦並びステップ）
   Figma 76:30802 にピクセル準拠。
   ・カード＝クリーム地・20px角丸・padding 24/32・バッジと本文を横並び(gap16)
   ・番号バッジ＝40px・brown-text(#674428)塗り・白文字 18.29px bold
   ・タイトル 18.29px bold / 本文 16px medium / 行間1.8
   ・ステップ間に下向きシェブロンのコネクタ
   ・Step01 のみ：白地・ブラウン枠・影付きの2ボタン（LINE / メール）
   ・本文ブロック最大幅 720px
   ========================================================================== */
.saiyo-flow {
	/* 背景：オフホワイトのテクスチャ（Figma 76:30802） */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-40) var(--space-80);
}

.saiyo-flow__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-24);
}

/* --- ステップ一覧（中央寄せ・最大720px） ----------------------------- */
.saiyo-flow__steps {
	list-style: none;
	margin: var(--space-40) auto 0;
	padding: 0;
	max-width: 45rem; /* 720px */
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.saiyo-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24); /* カード⇄コネクタ間（Figma: body gap 24px。コネクタ前後とも24px） */
}

/* --- カード（イエローのクレヨン紙テクスチャ・20px角丸） ---------------- */
.saiyo-flow__card {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
	/* Figma: 背景色_イエロー地のテクスチャ（imgItem＝tex-yellow-deep と同一色）を
	   346.8×327.8px タイルで直接フィル。フラット塗りではなくテクスチャ付き。 */
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	border-radius: 1.25rem; /* 20px */
	padding: var(--space-24) var(--space-32);
}

/* --- 番号バッジ ------------------------------------------------------- */
.saiyo-flow__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-40);
	height: var(--space-40);
	border-radius: 1.25rem; /* 20px（Figma: 角丸20px・正方形） */
	background-color: var(--color-brown-text);
	color: var(--color-white);
	font-size: var(--font-size-h3); /* 18.29px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
}

/* --- 右側コンテンツ --------------------------------------------------- */
.saiyo-flow__main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-top: var(--space-4);
}

.saiyo-flow__title {
	margin: 0;
	font-size: var(--font-size-h3); /* 18.29px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
	color: var(--color-brown-text);
}

.saiyo-flow__desc {
	margin: 0;
	font-size: var(--font-size-body); /* 16px */
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body); /* 1.8 */
	color: var(--color-brown-text);
}

/* --- ステップ間の下向きシェブロン ------------------------------------ */
/* ステップ間のコネクタ矢印。Figma（76:31590 Vector259）の手描きの茶色いV字矢印画像。
   旧実装の CSS シェブロン（黄土色）から差し替え。 */
.saiyo-flow__connector {
	display: block;
	width: 57px;
	height: 22px; /* 矢印の自然比 58×22 */
	background: url("../../images/saiyo/flow-connector.webp") center / contain no-repeat;
}

/* --- ステップ01のLINEボタン ------------------------------------------ */
.saiyo-flow__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

/* 白地・ブラウン枠・影付きカードボタン */
.saiyo-flow__btn {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	background-color: var(--color-white);
	border: 1px solid var(--color-brown-text);
	border-radius: var(--radius-sm); /* 8px */
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
	color: var(--color-brown-text);
	text-decoration: none;
	font-size: var(--font-size-h5); /* 14.22px */
	font-weight: var(--font-weight-extrabold);
	line-height: 1.25;
	transition: transform 0.2s ease;
}

.saiyo-flow__btn:hover {
	transform: translateY(-2px);
}

/* LINEボタン：左にLINEロゴ。Figma（76:31555）= アイコン枠の p20 で余白を作り、
   カードは右 padding 24px のみ。要素間 gap は持たない（ロゴ枠内余白＋ラベル伸長で配置）。 */
.saiyo-flow__btn--line {
	gap: 0;
	padding-right: var(--space-24);
}

.saiyo-flow__btn-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-20);
	width: var(--space-40);
	height: var(--space-40);
	box-sizing: content-box;
}

.saiyo-flow__btn-icon img {
	display: block;
	width: var(--space-40);
	height: var(--space-40);
}

.saiyo-flow__btn--line .saiyo-flow__btn-label {
	flex: 1 1 auto;
}
/* SP は「LINEから」で改行（2行）、PC（≥768px）は1行に流す。 */
.saiyo-flow__btn-line {
	display: block;
}

/* 右端の丸矢印 */
.saiyo-flow__btn-arrow {
	flex: 0 0 auto;
	width: var(--space-24);
	height: var(--space-24);
	border-radius: 50%;
	background-color: var(--color-brown-text);
	position: relative;
}

.saiyo-flow__btn-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.4rem;
	height: 0.4rem;
	border-top: 2px solid var(--color-white);
	border-right: 2px solid var(--color-white);
	transform: translate(-60%, -50%) rotate(45deg);
}

/* --- レスポンシブ：PC ------------------------------------------------- */
@media (min-width: 768px) {
	.saiyo-flow {
		padding-block: var(--space-40) var(--space-80);
	}

	.saiyo-flow__connector {
		margin-block: 0;
	}

	.saiyo-flow__actions {
		flex-direction: row;
		align-items: stretch;
	}

	.saiyo-flow__btn--line {
		flex: 1 1 0;
		min-width: 0;
	}

	.saiyo-flow__btn--line .saiyo-flow__btn-line {
		display: inline;
	}
}

/* --- レスポンシブ：SP（〜768px）— カードを flow.css の .flow-steps__card と同じデザインに揃える。
   PCは上の基本値（角丸20px・角丸スクエアのバッジ・padding24/32・本文16px）を維持。 --- */
@media (max-width: 768px) {
	.saiyo-flow {
		padding-block: 0 var(--space-24);
	}
	.saiyo-flow__steps {
		margin-top: var(--space-24);
		gap: var(--space-16);
	}
	.saiyo-flow__step {
		gap: var(--space-16);
	}
	.saiyo-flow__connector {
		width: 24px;
		height: 7px;
	}
	.saiyo-flow__main {
		gap: var(--space-8);
	}
	.saiyo-flow__card {
		padding: var(--space-16) var(--space-16) var(--space-24);
		border-radius: var(--radius-lg); /* 24px（flow-steps__card と同じ） */
	}
	/* 番号バッジは円形に（flow-steps__no と同じ） */
	.saiyo-flow__badge {
		border-radius: var(--radius-pill);
	}
	/* 本文は 12.8px に（flow-steps__text と同じ） */
	.saiyo-flow__desc {
		font-size: var(--font-size-h6);
	}

	/* ボタン群は本文（右カラム）の左インデントを打ち消し、カード内容から左右24px
	   インセットの位置に出して左へはみ出させる（Figma 76:32575）。
	   本文の左インデント＝バッジ(40)＋gap(16)=56。そこから24インセットへ＝-32px。 */
	.saiyo-flow__actions {
		margin-left: calc(var(--space-24) - var(--space-40) - var(--space-24)); /* -32px */
		margin-right: var(--space-16);
	}

	/* ボタン（Figma 76:32086）：右paddingは16pxに揃える。 */
	.saiyo-flow__btn--line {
		padding-right: var(--space-16);
	}
}
/* ==========================================================================
   採用ページ [faq] よくあるご質問  Figma 76:30924
   テクスチャ地。ネイティブ <details> を白カード（角丸10px・padding16px）に。
   Q：黄丸バッジ(40px)＋質問(16px medium)＋右端の ＋/− マーカー（[open]で反転）。
   A：白丸バッジ(40px・文字は黄)＋本文(line-height 1.8)。JS不要。
   ========================================================================== */
.saiyo-faq {
  /* 背景：ライトイエローのテクスチャ（Figma 76:30924） */
  background-color: var(--color-bg-light-yellow);
  background-image: url("../../images/common/tex-yellow.webp");
  background-position: top left;
  background-size: 346.8px 327.8px;
  background-repeat: repeat;
  padding-block: var(--space-80);
}
.saiyo-faq .saiyo-inner {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--space-80);
}

.saiyo-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
	margin-top: var(--space-48);
}

/* details 全体はオフホワイトのテクスチャカード。Q（summary）の白カードが上に重なり、
   開いたとき A はこのオフホワイトテクスチャ地の上に表示される（Figma 76:30931）。 */
.saiyo-faq__item {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-position: top left;
  background-size: 346.8px 327.8px;
  background-repeat: repeat;
  border-radius: 0.625rem; /* 10px */
}

/* 共通：丸バッジ 40px */
.saiyo-faq__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;  /* 40px */
  height: 2.5rem; /* 40px */
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-black);
  line-height: 1;
}
.saiyo-faq__badge--q {
  background-color: var(--color-accent-yellow);
  background-image: url("../../images/saiyo/q_bg.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--color-white);
}
.saiyo-faq__badge--a {
  background: var(--color-white);
  color: var(--color-accent-yellow);
}

/* 質問行（summary）＝白カード */
.saiyo-faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--color-white);
  border-radius: 0.625rem; /* 10px */
  cursor: pointer;
  list-style: none;
}
.saiyo-faq__q::-webkit-details-marker {
  display: none;
}

.saiyo-faq__qtext {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-brown-text);
}

/* ＋/− マーカー（横棒＋縦棒、[open]で縦棒を消す） */
.saiyo-faq__marker {
  position: relative;
  flex: 0 0 auto;
  width: var(--space-16);
  height: var(--space-16);
  margin-left: var(--space-8);
}
.saiyo-faq__marker::before,
.saiyo-faq__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-brown-text);
}
.saiyo-faq__marker::before {
  width: var(--space-16);
  height: 2px;
}
.saiyo-faq__marker::after {
  width: 2px;
  height: var(--space-16);
}
.saiyo-faq__item[open] .saiyo-faq__marker::after {
  opacity: 0;
}

/* 回答（item のオフホワイトテクスチャ地に乗る）。A バッジは上下中央。 */
.saiyo-faq__a {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-16) var(--space-16);
}
.saiyo-faq__atext {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-brown-text);
}

@media (max-width: 768px) {
  .saiyo-faq {
    padding-block: var(--space-8) var(--space-24);
  }
	.saiyo-faq__list {
		margin-top: var(--space-24);
	}
  .saiyo-faq .saiyo-inner {
    padding-inline: var(--space-24);
  }
  .saiyo-faq__badge {
    width: 2rem;  /* 32px */
    height: 2rem; /* 32px */
  }
	.saiyo-faq__qtext {
		font-size: var(--font-size-h5);
	}
	.saiyo-faq__atext {
		font-size: var(--font-size-h5);
	}
}

/* 外部からのアンカーリンク（#recruit / #interview / #jobs / #recruit-faq）のスクロール先が
   固定ヘッダーに隠れないよう余白を確保。 */
.saiyo-mv,
.saiyo-voice,
.saiyo-faq { scroll-margin-top: var(--space-96); }