@charset "UTF-8";

/* ==========================================================================
   株式会社さらち TOPページ専用CSS

   Stage 2   ：SWELLレイアウト調整 / 共通パーツ / FV
   Stage 3-1 ：FV直下4項目帯
   Stage 3-2 ：私達の想い
   Stage 3-3 ：安心には、理由がある
   Stage 3-4 ：近隣への配慮
   Stage 4   ：壊して、整えて、次へつなぐ。／ 詳細事業内容
   Stage 5   ：工事の流れ
   Stage 6   ：数字訴求帯 ／ 会社概要
   Stage 9   ：よくある質問 ／ 仕事と人
   Stage 10  ：Instagram ／ 公式LINE
   Stage 7   ：お客様の声
   Stage 8   ：ブログ・お知らせ
   Stage 11  ：CONTACT

   これで全16セクションのCSSが揃いました。
   仮スタイル（未実装セクション用）は不要になったため削除しています。

   CSS変数は assets/css/common.css へ移しました。
   このファイルは common.css の後に読み込まれます。

   B-1モックのCSSは制作過程で複数世代の上書きが積み重なっていたため、
   最終的に有効な値のみを算出して1回の指定へ平坦化しています。
   これにより、モック側で使われていた !important は不要になりました。
   ========================================================================== */


/* --------------------------------------------------------------------------
   SWELLレイアウトの調整（TOPページのみ）

   .sarachi-top は SWELL の #content.l-container の直下に出力される。
   このコンテナには最大幅と左右余白が指定されているため、FVを全幅で
   表示するには枠を解除する必要がある。

   要件書14章の「.sarachi-top 配下へ限定」の例外にあたるため方針を記録する。
   - top.css は is_front_page() のときしか読み込まれない
   - セレクタを .home で固定しているため他ページへは影響しない
   -------------------------------------------------------------------------- */

/**
 * フッター前に白い帯が出るのを防ぐため、背景をネイビーにしています。
 *
 * inc/footer.php の出力は get_footer フックで差し込むため、
 * SWELLの #content の内側に入ります（ソース上、.sarachi-footer の
 * 閉じタグの直後に #content の閉じタグがあります）。
 * #content の下端に余白が残ると、ネイビーのフッターとの間に
 * 白い帯として見えるため、背景色を合わせて目立たなくします。
 *
 * 上に .sarachi-top が全面に乗るので、この背景が見えるのは
 * フッター直前のわずかな隙間だけです。
 */
.home #content.l-container {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--sarachi-navy);
}

.home #content.l-container > *:last-child {
	margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   TOPページのルートスコープと共通パーツ
   -------------------------------------------------------------------------- */

.sarachi-top {
	background: var(--sarachi-bg-base);
	color: var(--sarachi-ink);
	font-family: var(--sarachi-font-body);
	line-height: 1.85;
}

.sarachi-top *,
.sarachi-top *::before,
.sarachi-top *::after {
	box-sizing: border-box;
}

.sarachi-top a {
	color: inherit;
	text-decoration: none;
}

.sarachi-wrap-wide {
	width: var(--sarachi-wide);
	margin-inline: auto;
}

/* 上より一段狭い内側の幅 */
.sarachi-wrap {
	width: var(--sarachi-body);
	margin-inline: auto;
}

/* ボタン（TOP全体の共通ベース） */
.sarachi-top .sarachi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 28px;
	border: 2px solid var(--sarachi-navy);
	background: var(--sarachi-navy);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .04em;
	transition: .25s ease;
}

.sarachi-top .sarachi-btn:hover {
	transform: translateY(-2px);
	background: var(--sarachi-accent);
	border-color: var(--sarachi-accent);
}

@media (max-width: 680px) {

	.sarachi-top .sarachi-btn {
		font-size: 15px;
	}
}

/* セクションの上下余白 */
.sarachi-top .sarachi-section {
	padding: 140px 0;
}

/* 小見出し（横線＋テキスト） */
.sarachi-top .sarachi-eyebrow {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 18px;
	color: var(--sarachi-accent);
	font-family: var(--sarachi-font-num), var(--sarachi-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.sarachi-top .sarachi-eyebrow::before {
	content: "";
	width: 40px;
	height: 3px;
	background: var(--sarachi-accent);
}

/* 大見出し */
.sarachi-top .sarachi-big-message {
	margin: 0;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-display);
	font-size: clamp(54px, 7.2vw, 116px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.055em;
	word-break: keep-all;
	overflow-wrap: normal;
}

/* セクション見出し（大見出しより一段小さい方） */
.sarachi-top .sarachi-section-title {
	margin: 0;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-display);
	font-size: clamp(46px, 5.6vw, 82px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -.045em;
	word-break: keep-all;
	overflow-wrap: normal;
}

/* セクションのリード文 */
.sarachi-top .sarachi-section-copy {
	margin: 28px 0 0;
	color: var(--sarachi-text-sub);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
}

/* 下線付きのテキストリンク */
.sarachi-top .sarachi-text-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--sarachi-accent);
	color: var(--sarachi-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .06em;
}

.sarachi-top .sarachi-text-link::after {
	content: "→";
	color: var(--sarachi-accent);
	font-size: 18px;
}

@media (max-width: 1180px) {

	.sarachi-top .sarachi-eyebrow {
		font-size: 13.5px;
	}
}

@media (max-width: 680px) {

	.sarachi-top .sarachi-section {
		padding: 92px 0;
	}

	.sarachi-top .sarachi-eyebrow {
		font-size: 13px;
	}

	.sarachi-top .sarachi-big-message {
		font-size: clamp(46px, 15vw, 72px);
	}

	.sarachi-top .sarachi-section-title {
		font-size: clamp(39px, 12vw, 58px);
	}

	.sarachi-top .sarachi-section-copy {
		font-size: 15px;
		line-height: 1.85;
	}
}

/* 大見出しの改行・分割禁止の制御 */
.sarachi-top .sarachi-copy-line {
	display: inline;
	white-space: nowrap;
}

.sarachi-top .sarachi-copy-small {
	display: inline-block;
	margin: 0;
	font-size: .70em;
	font-weight: 850;
	line-height: 1;
	letter-spacing: -.035em;
	vertical-align: .06em;
}

@media (max-width: 680px) {

	.sarachi-top .sarachi-copy-small {
		vertical-align: .04em;
	}
}

/* 大見出し内の小さめの一節 */
.sarachi-top .sarachi-copy-small-line {
	display: inline-block;
	font-size: .72em;
	font-weight: 850;
	line-height: 1.12;
	letter-spacing: -.035em;
}


/* ==========================================================================
   FV（ファーストビュー）

   モックはヘッダー高さ分として上部84pxを確保していましたが、
   SWELLのヘッダーを使用するため0にしています（案A）。
   ヘッダー実装のStageで、重ね表示にあわせて再調整します。
   ========================================================================== */

.sarachi-top .sarachi-hero {
	position: relative;
	min-height: clamp(780px, 92vh, 900px);
	background: var(--sarachi-navy);
	overflow: hidden;
}

.sarachi-top .sarachi-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* 背景いっぱいの現場写真 */
.sarachi-top .sarachi-hero__site {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: hidden;
}

.sarachi-top .sarachi-hero__site img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 46% center;
}

.sarachi-top .sarachi-hero__site::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			rgba(var(--sarachi-overlay), .92) 0%,
			rgba(var(--sarachi-overlay), .80) 34%,
			rgba(var(--sarachi-overlay), .56) 58%,
			rgba(var(--sarachi-overlay), .32) 100%),
		linear-gradient(180deg,
			rgba(var(--sarachi-overlay), .10),
			rgba(var(--sarachi-overlay), .24));
}

/* 右側に浮かせる人物写真 */
.sarachi-top .sarachi-hero__person {
	position: absolute;
	z-index: 3;
	right: clamp(48px, 6vw, 112px);
	top: 8%;
	bottom: 7%;
	width: clamp(420px, 34vw, 590px);
	overflow: hidden;
	border: 8px solid #fff;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 30px 70px rgba(var(--sarachi-overlay), .36);
}

.sarachi-top .sarachi-hero__person img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 28%;
}

.sarachi-top .sarachi-hero__person::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 70%, rgba(var(--sarachi-overlay), .08));
	pointer-events: none;
}

/* コピー */
.sarachi-top .sarachi-hero__content {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	min-height: clamp(780px, 92vh, 900px);
	padding: 70px 0 64px;
}

.sarachi-top .sarachi-hero__copy {
	width: min(760px, 53vw);
	color: #fff;
}

.sarachi-top .sarachi-hero__kicker {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 26px;
	font-family: var(--sarachi-font-num), var(--sarachi-font-body);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.sarachi-top .sarachi-hero__kicker::before {
	content: "";
	width: 54px;
	height: 4px;
	background: var(--sarachi-ivory);
}

.sarachi-top .sarachi-hero__title {
	margin: 0;
	font-family: var(--sarachi-font-display);
	font-size: clamp(64px, 7.6vw, 120px);
	font-weight: 900;
	line-height: 1.01;
	letter-spacing: -.065em;
	text-shadow: 0 6px 30px rgba(0, 0, 0, .22);
}

.sarachi-top .sarachi-hero__sub {
	margin: 30px 0 0;
	font-size: clamp(24px, 2.4vw, 38px);
	font-weight: 900;
	line-height: 1.55;
}

.sarachi-top .sarachi-hero__desc {
	max-width: 650px;
	margin: 21px 0 0;
	color: rgba(255, 255, 255, .87);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
}

/* FVのCTA */
.sarachi-top .sarachi-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 34px;
	margin-top: 44px;
}

.sarachi-top .sarachi-hero__actions .sarachi-btn {
	letter-spacing: .02em;
	line-height: 1;
	transition:
		transform .22s ease,
		box-shadow .22s ease,
		background-color .22s ease,
		color .22s ease,
		border-color .22s ease;
}

.sarachi-top .sarachi-btn--primary {
	display: grid;
	grid-template-columns: 1fr 38px;
	align-items: center;
	column-gap: 20px;
	min-width: 332px;
	min-height: 66px;
	padding: 0 14px 0 30px;
	border: 1px solid #fff;
	border-radius: 8px;
	background: #fff;
	color: var(--sarachi-navy);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .015em;
	text-align: left;
	box-shadow: 0 13px 30px rgba(0, 0, 0, .20);
}

.sarachi-top .sarachi-btn--primary::after {
	content: "→";
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: end;
	width: 38px;
	height: 38px;
	border: 1px solid var(--sarachi-accent);
	border-radius: 50%;
	background: var(--sarachi-accent);
	color: #fff;
	font-family: var(--sarachi-font-num);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	transition: transform .22s ease, background-color .22s ease;
}

.sarachi-top .sarachi-btn--primary:hover {
	background: #fff;
	border-color: #fff;
	color: var(--sarachi-navy);
	transform: translateY(-2px);
	box-shadow: 0 17px 34px rgba(0, 0, 0, .24);
}

.sarachi-top .sarachi-btn--primary:hover::after {
	transform: translateX(3px);
}

.sarachi-top .sarachi-btn--text {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	min-width: 0;
	min-height: 48px;
	padding: 0 2px 3px;
	border: 0;
	border-bottom: 2px solid rgba(255, 255, 255, .72);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	box-shadow: none;
}

.sarachi-top .sarachi-btn--text::after {
	content: "→";
	font-size: 19px;
	line-height: 1;
	transition: transform .22s ease;
}

.sarachi-top .sarachi-btn--text:hover {
	background: transparent;
	border-color: #fff;
	transform: none;
}

.sarachi-top .sarachi-btn--text:hover::after {
	transform: translateX(4px);
}


/* --- FV：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-hero__person {
		right: 3vw;
		top: 9%;
		bottom: 8%;
		width: 38%;
		border-width: 7px;
		border-radius: 20px;
	}
}


/* --- FV：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-hero {
		min-height: 820px;
	}

	.sarachi-top .sarachi-hero__site img {
		object-position: 44% center;
	}

	.sarachi-top .sarachi-hero__site::after {
		background: linear-gradient(180deg,
			rgba(var(--sarachi-overlay), .88) 0%,
			rgba(var(--sarachi-overlay), .72) 43%,
			rgba(var(--sarachi-overlay), .46) 68%,
			rgba(var(--sarachi-overlay), .24) 100%);
	}

	.sarachi-top .sarachi-hero__person {
		right: 18px;
		top: auto;
		bottom: 22px;
		width: min(64vw, 330px);
		height: 42%;
		border-width: 6px;
		border-radius: 18px;
		box-shadow: 0 20px 45px rgba(0, 26, 61, .38);
	}

	.sarachi-top .sarachi-hero__content {
		align-items: flex-start;
		min-height: 820px;
		padding: 50px 0 34px;
	}

	.sarachi-top .sarachi-hero__copy {
		width: 100%;
		max-width: 560px;
	}

	.sarachi-top .sarachi-hero__kicker {
		font-size: 13px;
	}

	.sarachi-top .sarachi-hero__title {
		font-size: clamp(48px, 12.8vw, 56px);
	}

	.sarachi-top .sarachi-hero__sub {
		font-size: 21px;
		margin-top: 19px;
	}

	.sarachi-top .sarachi-hero__desc {
		display: none;
	}

	.sarachi-top .sarachi-hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
		width: min(100%, 390px);
		margin-top: 30px;
	}

	.sarachi-top .sarachi-btn--primary {
		min-width: 0;
		width: 100%;
		min-height: 56px;
		padding-left: 24px;
		font-size: 16px;
	}

	.sarachi-top .sarachi-btn--text {
		width: max-content;
		font-size: 15px;
	}
}


/* ==========================================================================
   FV直下4項目帯

   モックでは背景色が #fff → #FBFAF8 → #FCFBF9 → #211F60 と4回上書き
   されていました。B-1で最終的に有効な #211F60（ネイビー・白文字）を採用します。

   罫線はモックからの変更点です。モックは列数が変わっても border-right が
   残る作りで、2列時は1行目の右端だけ、1列時は全項目の右端に線が出ていました。
   線の色が背景に対して見えづらかったため気付きにくい状態でしたが、
   列の区切りとして意図された線ではないため、列数に応じて必要な線だけを
   出すよう整理しています。
   ========================================================================== */

.sarachi-top .sarachi-reassurance {
	/* 帯の中でのみ使う罫線色。ネイビー背景に対する白の細線 */
	--sarachi-band-line: rgba(255, 255, 255, .24);

	background: var(--sarachi-accent);
	border-bottom: 1px solid #D8D5CF;
}

.sarachi-top .sarachi-reassurance__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	min-height: 108px;
}

.sarachi-top .sarachi-reassurance__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px;
	border-right: 1px solid var(--sarachi-band-line);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	text-align: center;
}

.sarachi-top .sarachi-reassurance__item:last-child {
	border-right: 0;
}

.sarachi-top .sarachi-reassurance__item b {
	color: #fff;
	font-family: var(--sarachi-font-num);
	font-size: 27px;
	line-height: 1;
	font-stretch: condensed;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}


/* --- 4項目帯：960px以下（2列） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-reassurance__inner {
		grid-template-columns: 1fr 1fr;
	}

	/* 各行の右端（2・4番目）は線を出さない */
	.sarachi-top .sarachi-reassurance__item:nth-child(2n) {
		border-right: 0;
	}

	/* 1行目の下に区切り線 */
	.sarachi-top .sarachi-reassurance__item:nth-child(-n+2) {
		border-bottom: 1px solid var(--sarachi-band-line);
	}
}


/* --- 4項目帯：680px以下（1列） --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-reassurance__inner {
		grid-template-columns: 1fr;
	}

	/* 1列なので縦線は不要 */
	.sarachi-top .sarachi-reassurance__item {
		border-right: 0;
	}

	.sarachi-top .sarachi-reassurance__item:nth-child(-n+3) {
		border-bottom: 1px solid var(--sarachi-band-line);
	}

	.sarachi-top .sarachi-reassurance__item:last-child {
		border-bottom: 0;
	}
}


/* ==========================================================================
   私達の想い
   ========================================================================== */

.sarachi-top .sarachi-philosophy {
	background: var(--sarachi-bg-base);
}

.sarachi-top .sarachi-philosophy__grid {
	display: grid;
	grid-template-columns: minmax(440px, .85fr) minmax(620px, 1.15fr);
	gap: 74px;
	align-items: center;
}

.sarachi-top .sarachi-philosophy__copy {
	padding-top: 20px;
}

.sarachi-top .sarachi-philosophy__copy .sarachi-big-message {
	font-size: clamp(60px, 7.6vw, 122px);
	line-height: 1.01;
}

.sarachi-top .sarachi-philosophy__lead {
	margin: 34px 0 0;
	color: var(--sarachi-navy);
	font-size: 27px;
	font-weight: 900;
	line-height: 1.65;
}

.sarachi-top .sarachi-philosophy__copy p:not(.sarachi-eyebrow):not(.sarachi-philosophy__lead) {
	margin: 22px 0 0;
	color: var(--sarachi-text-sub);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.95;
}

/* 写真3枚組 */
.sarachi-top .sarachi-philosophy__visual {
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	grid-template-rows: 370px 260px;
	gap: 16px;
}

.sarachi-top .sarachi-philosophy__visual figure {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.sarachi-top .sarachi-philosophy__visual figure:first-child {
	grid-row: 1 / 3;
}

.sarachi-top .sarachi-philosophy__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sarachi-top .sarachi-philosophy__visual figcaption {
	position: absolute;
	left: 14px;
	bottom: 12px;
	padding: 7px 10px;
	background: rgba(250, 249, 246, .92);
	color: var(--sarachi-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}


/* --- 私達の想い：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-philosophy__grid {
		grid-template-columns: .85fr 1.15fr;
		gap: 44px;
	}

	.sarachi-top .sarachi-philosophy__visual figcaption {
		font-size: 13px;
	}
}


/* --- 私達の想い：960px以下（1カラム） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-philosophy__grid {
		grid-template-columns: 1fr;
		gap: 58px;
	}

	.sarachi-top .sarachi-philosophy__visual {
		grid-template-rows: 360px 220px;
	}
}


/* --- 私達の想い：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-philosophy__copy .sarachi-big-message {
		font-size: clamp(48px, 14vw, 66px);
	}

	.sarachi-top .sarachi-philosophy__lead {
		font-size: 23px;
	}

	.sarachi-top .sarachi-philosophy__copy p:not(.sarachi-eyebrow):not(.sarachi-philosophy__lead) {
		font-size: 15px;
		line-height: 1.9;
	}

	.sarachi-top .sarachi-philosophy__visual {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 290px 180px;
	}

	.sarachi-top .sarachi-philosophy__visual figure:first-child {
		grid-row: 1;
		grid-column: 1 / 3;
	}

	.sarachi-top .sarachi-philosophy__visual figcaption {
		font-size: 12.5px;
	}
}


/* ==========================================================================
   安心には、理由がある

   モックからの変更点が3点あります（いずれも上書きの積み重ねによる崩れの修正）。
   1. 罫線色が項目ごとに異なっていたため #D3D6D8 に統一
   2. 960px以下で縦罫線が1本しか残らなかったため、左列（奇数番）に付け直し
   3. 写真の逃げ幅（padding）が縦横で二重に確保されていたため、
      写真の配置に応じた側だけを残すよう整理
   ========================================================================== */

.sarachi-top .sarachi-reasons {
	padding: 145px 0;
	background: #ECEAE6;
}

.sarachi-top .sarachi-reasons__head {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 82px;
}

.sarachi-top .sarachi-reasons__head .sarachi-section-copy {
	max-width: 600px;
	margin-left: auto;
}

.sarachi-top .sarachi-reason-list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: stretch;
	border-top: 3px solid var(--sarachi-navy);
}

/* 01〜03は2列分、04〜05は3列分を占める */
.sarachi-top .sarachi-reason {
	position: relative;
	grid-column: span 2;
	min-height: 430px;
	padding: 44px 40px 170px;
	border-right: 1px solid #D3D6D8;
	border-bottom: 1px solid #D3D6D8;
}

.sarachi-top .sarachi-reason:nth-child(n+4) {
	grid-column: span 3;
	min-height: 410px;
	padding: 46px 40px 170px;
}

/* 各行の右端は線を出さない */
.sarachi-top .sarachi-reason:nth-child(3),
.sarachi-top .sarachi-reason:nth-child(5) {
	border-right: 0;
}

.sarachi-top .sarachi-reason__no {
	display: block;
	color: var(--sarachi-accent);
	font-family: var(--sarachi-font-num);
	font-size: 22px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: .02em;
	font-stretch: condensed;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.sarachi-top .sarachi-reason h3 {
	margin: 26px 0 0;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-body);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
}

.sarachi-top .sarachi-reason p {
	max-width: 520px;
	margin: 20px 0 0;
	color: var(--sarachi-text-sub);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
}

.sarachi-top .sarachi-reason__photo {
	position: absolute;
	right: 38px;
	bottom: 34px;
	width: 168px;
	height: 118px;
	margin: 0;
	overflow: hidden;
}

.sarachi-top .sarachi-reason__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* --- 理由：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-reason__no {
		line-height: 1;
	}

	.sarachi-top .sarachi-reason h3 {
		font-size: 20px;
		font-weight: 600;
	}

	/* 下段は横幅に余裕があるため写真を大きくする */
	.sarachi-top .sarachi-reason:nth-child(n+4) {
		padding-bottom: 190px;
	}

	.sarachi-top .sarachi-reason:nth-child(n+4) .sarachi-reason__photo {
		right: 42px;
		bottom: 36px;
		width: 196px;
		height: 138px;
	}
}


/* --- 理由：960px以下（2列・写真は本文の右横） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-reasons__head {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-reasons__head .sarachi-section-copy {
		margin-left: 0;
	}

	.sarachi-top .sarachi-reason-list {
		grid-template-columns: 1fr 1fr;
	}

	.sarachi-top .sarachi-reason,
	.sarachi-top .sarachi-reason:nth-child(n+4) {
		grid-column: auto;
		min-height: 340px;
		padding: 44px 162px 38px 40px;
	}

	/* 左列に縦罫線、右列は出さない */
	.sarachi-top .sarachi-reason:nth-child(odd) {
		border-right: 1px solid #D3D6D8;
	}

	.sarachi-top .sarachi-reason:nth-child(even) {
		border-right: 0;
	}

	.sarachi-top .sarachi-reason__photo,
	.sarachi-top .sarachi-reason:nth-child(n+4) .sarachi-reason__photo {
		right: 24px;
		bottom: 24px;
		width: 118px;
		height: 94px;
	}
}


/* --- 理由：680px以下（1列・写真は本文の下） --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-reason-list {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-reason,
	.sarachi-top .sarachi-reason:nth-child(n+4) {
		min-height: auto;
		padding: 36px 0;
	}

	.sarachi-top .sarachi-reason:nth-child(odd),
	.sarachi-top .sarachi-reason:nth-child(even) {
		border-right: 0;
	}

	.sarachi-top .sarachi-reason h3 {
		font-size: 19px;
	}

	.sarachi-top .sarachi-reason__photo,
	.sarachi-top .sarachi-reason:nth-child(n+4) .sarachi-reason__photo {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		height: 190px;
		margin-top: 24px;
	}
}


/* ==========================================================================
   近隣への配慮

   写真の上にネイビーのグラデーションを重ね、左側にコピーを置く帯です。
   FVと似た構造ですが、グラデーションは1枚のみで、高さも固定値です。
   ========================================================================== */

.sarachi-top .sarachi-care {
	position: relative;
	min-height: 680px;
	background: var(--sarachi-navy);
	color: #fff;
	overflow: hidden;
}

.sarachi-top .sarachi-care__bg {
	position: absolute;
	inset: 0;
}

.sarachi-top .sarachi-care__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 52%;
}

.sarachi-top .sarachi-care__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(0, 26, 61, .97) 0%,
		rgba(0, 26, 61, .91) 46%,
		rgba(0, 26, 61, .56) 73%,
		rgba(0, 26, 61, .25) 100%);
}

.sarachi-top .sarachi-care__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 680px;
	padding: 80px 0;
}

.sarachi-top .sarachi-care__message {
	max-width: 930px;
	color: #fff;
}

/* ネイビー背景のため、小見出しの文字色だけ明るくする */
.sarachi-top .sarachi-care__message .sarachi-eyebrow {
	color: #F5F4F1;
}

.sarachi-top .sarachi-care .sarachi-big-message {
	color: #fff;
	text-shadow: 0 4px 26px rgba(0, 0, 0, .42);
}

.sarachi-top .sarachi-care__message p {
	max-width: 640px;
	margin: 32px 0 0;
	color: rgba(255, 255, 255, .84);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
}


/* --- 近隣への配慮：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-care {
		min-height: 600px;
	}

	.sarachi-top .sarachi-care__bg img {
		object-position: 64% center;
	}

	.sarachi-top .sarachi-care__inner {
		min-height: 600px;
	}

	/* flexアイテムが内容の幅で押し広げられないようにする */
	.sarachi-top .sarachi-care__message {
		min-width: 0;
	}

	.sarachi-top .sarachi-care .sarachi-big-message {
		font-size: clamp(40px, 10.8vw, 44px);
	}

	.sarachi-top .sarachi-care__message p {
		font-size: 15px;
	}
}


/* ==========================================================================
   事業内容（壊して、整えて、次へつなぐ。／ 詳細事業内容）

   モックでは1つの <section> の前半・後半でしたが、要件書4章により
   前半（見出し＋2枚組）と後半（6枚カード）を個別にON/OFFできるよう
   出し分けています。セクションの枠と余白は共通です。
   ========================================================================== */

.sarachi-top .sarachi-services {
	padding-bottom: 150px;
	background: #FCFBF9;
}

/* 見出しとリード文 */
.sarachi-top .sarachi-services__head {
	display: grid;
	grid-template-columns: 1fr .75fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 68px;
}

.sarachi-top .sarachi-services__head .sarachi-section-copy {
	max-width: 560px;
	margin-left: auto;
}

/* 大見出しの改行位置を固定するための単位 */
.sarachi-top .sarachi-copy-keep {
	display: inline-block;
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
}


/* --- 壊す／整える の2枚組 --- */

.sarachi-top .sarachi-service-duo {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 30px;
	align-items: start;
}

.sarachi-top .sarachi-service-block {
	position: relative;
	min-height: 690px;
	background: var(--sarachi-navy);
	color: #fff;
	overflow: hidden;
}

/* 左右で高さと帯の位置をずらす */
.sarachi-top .sarachi-service-block:first-child {
	min-height: 720px;
	border-bottom: 7px solid var(--sarachi-accent);
}

.sarachi-top .sarachi-service-block:nth-child(2) {
	min-height: 650px;
	margin-top: 48px;
	border-top: 7px solid var(--sarachi-accent);
}

.sarachi-top .sarachi-service-block::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0, 26, 61, .05) 15%,
		rgba(0, 26, 61, .88) 76%,
		rgba(0, 26, 61, .98) 100%);
}

.sarachi-top .sarachi-service-block img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .65s ease;
}

.sarachi-top .sarachi-service-block:hover img {
	transform: scale(1.025);
}

.sarachi-top .sarachi-service-block__overlay {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 46px 46px 42px;
}

.sarachi-top .sarachi-service-word {
	margin: 0;
	font-family: var(--sarachi-font-display);
	font-size: clamp(78px, 8vw, 132px);
	font-weight: 900;
	line-height: .8;
	letter-spacing: -.065em;
}

.sarachi-top .sarachi-service-en {
	display: block;
	margin-top: 18px;
	color: #F1F0EC;
	font-family: var(--sarachi-font-num), var(--sarachi-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sarachi-top .sarachi-service-block__overlay p {
	margin: 20px 0 0;
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.85;
}

.sarachi-top .sarachi-service-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 22px;
}

.sarachi-top .sarachi-service-tags span {
	padding: 7px 10px;
	border: 1px solid rgba(255, 255, 255, .38);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}


/* --- 6枚のカード（全幅） --- */

.sarachi-top .sarachi-service-catalog {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	margin: 96px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

/* 前半がOFFのときは上の余白を詰める */
.sarachi-top .sarachi-service-catalog:first-child {
	margin-top: 0;
}

.sarachi-top .sarachi-service-card {
	min-width: 0;
	background: var(--sarachi-navy);
	color: #fff;
	border-right: 1px solid rgba(255, 255, 255, .18);
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	overflow: hidden;
}

.sarachi-top .sarachi-service-card:nth-child(3n) {
	border-right: 0;
}

.sarachi-top .sarachi-service-card__photo {
	height: clamp(330px, 26vw, 430px);
	margin: 0;
	background: #D9D9D5;
	overflow: hidden;
}

.sarachi-top .sarachi-service-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.sarachi-top .sarachi-service-card:hover .sarachi-service-card__photo img {
	transform: scale(1.018);
}

.sarachi-top .sarachi-service-card__info {
	display: flex;
	flex-direction: column;
	min-height: 310px;
	padding: 38px 42px 36px;
	background: var(--sarachi-navy);
}

.sarachi-top .sarachi-service-card__no {
	display: block;
	color: rgba(255, 255, 255, .68);
	font-family: var(--sarachi-font-num);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .05em;
	font-stretch: condensed;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.sarachi-top .sarachi-service-card__info h3 {
	margin: 17px 0 0;
	color: #fff;
	font-family: var(--sarachi-font-body);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
}

.sarachi-top .sarachi-service-card__info p {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .80);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
}

.sarachi-top .sarachi-service-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	width: max-content;
	min-width: 156px;
	min-height: 48px;
	margin-top: auto;
	padding: 13px 16px;
	background: var(--sarachi-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.sarachi-top .sarachi-service-card__link span {
	font-family: var(--sarachi-font-num);
	font-size: 18px;
	transition: transform .2s ease;
}

.sarachi-top .sarachi-service-card__link:hover span {
	transform: translateX(3px);
}


/* --- 事業内容：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-service-block:nth-child(2) {
		margin-top: 36px;
	}

	.sarachi-top .sarachi-service-tags span {
		font-size: 13px;
	}

	/* カードを2列へ。右端は3n番目ではなく2n番目になる */
	.sarachi-top .sarachi-service-catalog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sarachi-top .sarachi-service-card:nth-child(3n) {
		border-right: 1px solid rgba(255, 255, 255, .18);
	}

	.sarachi-top .sarachi-service-card:nth-child(2n) {
		border-right: 0;
	}

	.sarachi-top .sarachi-service-card__photo {
		height: 300px;
	}
}


/* --- 事業内容：960px以下 --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-services__head {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-services__head .sarachi-section-copy {
		margin-left: 0;
	}

	.sarachi-top .sarachi-service-duo {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}

	/* 左右のずらしをやめて高さを揃える */
	.sarachi-top .sarachi-service-block,
	.sarachi-top .sarachi-service-block:first-child,
	.sarachi-top .sarachi-service-block:nth-child(2) {
		min-height: 590px;
		margin-top: 0;
	}
}


/* --- 事業内容：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-service-duo {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-service-block,
	.sarachi-top .sarachi-service-block:first-child,
	.sarachi-top .sarachi-service-block:nth-child(2) {
		min-height: 520px;
	}

	.sarachi-top .sarachi-service-block__overlay {
		padding: 34px 25px;
	}

	.sarachi-top .sarachi-service-word {
		font-size: 84px;
	}

	.sarachi-top .sarachi-service-block__overlay p {
		font-size: 15px;
		line-height: 1.8;
	}

	.sarachi-top .sarachi-service-catalog {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-service-card,
	.sarachi-top .sarachi-service-card:nth-child(2n),
	.sarachi-top .sarachi-service-card:nth-child(3n) {
		border-right: 0;
	}

	.sarachi-top .sarachi-service-card__photo {
		height: 250px;
	}

	.sarachi-top .sarachi-service-card__info {
		min-height: 280px;
		padding: 30px 26px 26px;
	}

	.sarachi-top .sarachi-service-card__info h3 {
		font-size: 20px;
	}

	.sarachi-top .sarachi-service-card__link {
		min-height: 46px;
	}
}


/* ==========================================================================
   工事の流れ

   モックには旧バージョンの残骸（.flow-list / .flow-item / .flow-point /
   .flow-route / .flow-infographic）が残っていましたが、現在のHTMLには
   存在しないクラスのため移植していません。
   ========================================================================== */

.sarachi-top .sarachi-flow {
	background: var(--sarachi-bg-base);
}

.sarachi-top .sarachi-flow__head {
	display: grid;
	grid-template-columns: 1fr .7fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 68px;
}

.sarachi-top .sarachi-flow__head .sarachi-section-title {
	font-family: var(--sarachi-font-body);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.025em;
}

.sarachi-top .sarachi-flow__diagram {
	width: min(1360px, calc(100vw - 80px));
	margin-inline: auto;
}

/* 6ステップ。背景のネイビー帯と矢印は擬似要素で描く */
.sarachi-top .sarachi-flow__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	isolation: isolate;
}

.sarachi-top .sarachi-flow__steps::before {
	content: "";
	position: absolute;
	z-index: -2;
	left: 0;
	right: 0;
	top: 76px;
	height: 132px;
	background: var(--sarachi-navy);
}

.sarachi-top .sarachi-flow__steps::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 4.2%;
	right: 4.2%;
	top: 141px;
	height: 2px;
	background: rgba(255, 255, 255, .46);
}

.sarachi-top .sarachi-flow__step {
	position: relative;
	display: grid;
	grid-template-rows: 76px 132px auto;
	min-width: 0;
	padding: 0 20px 6px;
}

.sarachi-top .sarachi-flow__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 96px;
	right: 0;
	width: 1px;
	height: 92px;
	background: rgba(255, 255, 255, .14);
}

.sarachi-top .sarachi-flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 3;
	right: -5px;
	top: 136px;
	width: 10px;
	height: 10px;
	border-top: 2px solid rgba(255, 255, 255, .72);
	border-right: 2px solid rgba(255, 255, 255, .72);
	transform: rotate(45deg);
}

.sarachi-top .sarachi-flow__number {
	display: block;
	align-self: end;
	padding-bottom: 14px;
	color: var(--sarachi-accent);
	font-family: var(--sarachi-font-num);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	font-variant-numeric: lining-nums tabular-nums;
}

.sarachi-top .sarachi-flow__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 132px;
	color: #fff;
}

.sarachi-top .sarachi-flow__icon::after {
	content: "";
	position: absolute;
	left: 30px;
	top: 50%;
	width: 9px;
	height: 9px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--sarachi-navy);
	transform: translate(-50%, -50%);
}

.sarachi-top .sarachi-flow__icon svg {
	position: relative;
	z-index: 2;
	width: 58px;
	height: 58px;
	margin-left: 58px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.15;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sarachi-top .sarachi-flow__copy {
	min-height: 132px;
	padding: 25px 2px 0;
}

.sarachi-top .sarachi-flow__copy h3 {
	position: relative;
	margin: 0;
	padding-bottom: 13px;
	color: var(--sarachi-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.42;
	letter-spacing: .01em;
}

.sarachi-top .sarachi-flow__copy h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	background: var(--sarachi-accent);
}

.sarachi-top .sarachi-flow__copy p {
	margin: 15px 0 0;
	color: var(--sarachi-muted);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
}


/* --- 工事の流れ：1199px以下（モック側は min-width:1200px で切り替え） --- */

@media (max-width: 1199px) {

	.sarachi-top .sarachi-flow__head .sarachi-section-title {
		font-size: 32px;
		line-height: 1.45;
	}
}


/* --- 工事の流れ：1100px以下（3列・帯なし） --- */

@media (max-width: 1100px) {

	.sarachi-top .sarachi-flow__diagram {
		width: min(100%, 960px);
	}

	.sarachi-top .sarachi-flow__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 54px;
	}

	.sarachi-top .sarachi-flow__steps::before,
	.sarachi-top .sarachi-flow__steps::after,
	.sarachi-top .sarachi-flow__step:not(:last-child)::before,
	.sarachi-top .sarachi-flow__step:not(:last-child)::after {
		display: none;
	}

	.sarachi-top .sarachi-flow__step {
		grid-template-rows: 56px 92px auto;
		padding: 0 28px 24px;
		border-bottom: 1px solid var(--sarachi-line);
	}

	.sarachi-top .sarachi-flow__number {
		padding-bottom: 10px;
		font-size: 30px;
	}

	/* 帯がなくなるため、アイコン側に背景を持たせる */
	.sarachi-top .sarachi-flow__icon {
		height: 92px;
		padding: 0 22px;
		background: var(--sarachi-navy);
	}

	.sarachi-top .sarachi-flow__icon::after {
		left: 22px;
	}

	.sarachi-top .sarachi-flow__icon svg {
		width: 50px;
		height: 50px;
		margin-left: 44px;
	}

	.sarachi-top .sarachi-flow__copy {
		min-height: 0;
		padding-top: 20px;
	}
}


/* --- 工事の流れ：960px以下（見出しを1カラムへ） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-flow__head {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-flow__head .sarachi-section-title {
		font-size: 30px;
	}
}


/* --- 工事の流れ：680px以下（縦並び・左に帯） --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-flow__head .sarachi-section-title {
		font-size: 28px;
	}

	.sarachi-top .sarachi-flow__diagram {
		width: 100%;
	}

	.sarachi-top .sarachi-flow__steps {
		display: block;
		padding-left: 74px;
	}

	.sarachi-top .sarachi-flow__steps::before {
		display: block;
		left: 0;
		right: auto;
		top: 0;
		bottom: 0;
		width: 60px;
		height: auto;
	}

	.sarachi-top .sarachi-flow__steps::after {
		display: block;
		left: 29px;
		right: auto;
		top: 30px;
		bottom: 30px;
		width: 2px;
		height: auto;
		background: rgba(255, 255, 255, .48);
	}

	.sarachi-top .sarachi-flow__step {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		grid-template-rows: auto;
		column-gap: 10px;
		align-items: start;
		min-height: 0;
		padding: 17px 0 18px 14px;
	}

	.sarachi-top .sarachi-flow__step:not(:last-child)::after {
		display: block;
		left: -50px;
		right: auto;
		top: 49px;
		width: 8px;
		height: 8px;
		border-top: 2px solid rgba(255, 255, 255, .8);
		border-right: 2px solid rgba(255, 255, 255, .8);
		transform: rotate(135deg);
	}

	.sarachi-top .sarachi-flow__number {
		align-self: start;
		grid-column: 1;
		grid-row: 1;
		padding: 1px 0 0;
		font-size: 24px;
		line-height: 1.35;
		letter-spacing: -.03em;
	}

	.sarachi-top .sarachi-flow__icon {
		position: absolute;
		left: -67px;
		top: 27px;
		width: 46px;
		height: 46px;
		padding: 0;
		background: transparent;
	}

	.sarachi-top .sarachi-flow__icon::after {
		display: none;
	}

	.sarachi-top .sarachi-flow__icon svg {
		width: 34px;
		height: 34px;
		margin: auto;
	}

	.sarachi-top .sarachi-flow__copy {
		grid-column: 2;
		grid-row: 1;
		padding: 0;
	}

	.sarachi-top .sarachi-flow__copy h3 {
		padding: 0 0 8px;
		font-size: 19px;
		line-height: 1.35;
		white-space: nowrap;
	}

	.sarachi-top .sarachi-flow__copy h3::after {
		width: 28px;
		height: 2px;
	}

	.sarachi-top .sarachi-flow__copy p {
		margin: 10px 0 0;
		font-size: 14px;
		line-height: 1.65;
	}
}


/* ==========================================================================
   数字訴求帯

   罫線の色はモックでは縦が .24、横が .32 と食い違っていたため .24 へ統一。
   列数が変わったときに右端へ線が残る問題も、理由セクションと同様に整理。
   ========================================================================== */

.sarachi-top .sarachi-metrics {
	position: relative;
	background: var(--sarachi-navy);
	color: #fff;
}

.sarachi-top .sarachi-metrics::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 7px;
	background: var(--sarachi-accent);
}

.sarachi-top .sarachi-metrics__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.sarachi-top .sarachi-metric {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 300px;
	padding: 58px 38px;
	border-right: 1px solid rgba(255, 255, 255, .24);
}

.sarachi-top .sarachi-metric:last-child {
	border-right: 0;
}

.sarachi-top .sarachi-metric strong {
	display: block;
	color: #fff;
	font-family: var(--sarachi-font-num), var(--sarachi-font-body);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	white-space: nowrap;
	font-stretch: condensed;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.sarachi-top .sarachi-metric span {
	display: block;
	margin-top: 15px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.sarachi-top .sarachi-metric small {
	display: block;
	margin-top: 11px;
	color: #D5DCE3;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}


/* --- 数字訴求帯：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-metric strong {
		font-size: 32px;
	}
}


/* --- 数字訴求帯：960px以下（2列） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-metrics__inner {
		grid-template-columns: 1fr 1fr;
	}

	.sarachi-top .sarachi-metric:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, .24);
	}

	.sarachi-top .sarachi-metric:nth-child(even) {
		border-right: 0;
	}

	.sarachi-top .sarachi-metric:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, .24);
	}
}


/* --- 数字訴求帯：680px以下（1列） --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-metrics__inner {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-metric,
	.sarachi-top .sarachi-metric:nth-child(odd),
	.sarachi-top .sarachi-metric:nth-child(even) {
		border-right: 0;
	}

	.sarachi-top .sarachi-metric:nth-child(-n+3) {
		border-bottom: 1px solid rgba(255, 255, 255, .24);
	}

	.sarachi-top .sarachi-metric:last-child {
		border-bottom: 0;
	}

	.sarachi-top .sarachi-metric strong {
		font-size: 30px;
	}

	.sarachi-top .sarachi-metric span {
		font-size: 15px;
	}
}


/* ==========================================================================
   会社概要

   写真に重なる「顔が見える会社です。」は、モックでは CSS の content で
   出力されていました。選択もコピーもできず検索にも拾われないため、
   実際のテキスト要素として出力しています（見た目は同じです）。
   ========================================================================== */

.sarachi-top .sarachi-company {
	background: #F0F1F1;
}

.sarachi-top .sarachi-company__grid {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	align-items: stretch;
	background: #F0F1F1;
	border-top: 1px solid #D6D8D8;
	border-bottom: 1px solid #D6D8D8;
}

.sarachi-top .sarachi-company__photo {
	position: relative;
	min-height: 720px;
	overflow: hidden;
}

.sarachi-top .sarachi-company__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sarachi-top .sarachi-company__caption {
	position: absolute;
	left: 36px;
	bottom: 34px;
	max-width: 680px;
	margin: 0;
	color: #fff;
	font-family: var(--sarachi-font-display);
	font-size: clamp(48px, 5.5vw, 82px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.05em;
	text-shadow: 0 4px 25px rgba(0, 0, 0, .35);
	word-break: keep-all;
	overflow-wrap: normal;
}

.sarachi-top .sarachi-company__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 68px 64px;
	background: #F0F1F1;
}

.sarachi-top .sarachi-company__copy .sarachi-section-title {
	font-family: var(--sarachi-font-body);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.02em;
}

.sarachi-top .sarachi-company__copy .sarachi-section-copy {
	color: var(--sarachi-text-sub);
	font-size: 16px;
	line-height: 1.9;
}

.sarachi-top .sarachi-company__data {
	margin-top: 38px;
	border-top: 3px solid var(--sarachi-navy);
}

.sarachi-top .sarachi-company__data div {
	display: grid;
	grid-template-columns: 115px 1fr;
	gap: 24px;
	padding: 18px 0;
	border-bottom: 1px solid var(--sarachi-line);
	font-size: 14px;
	line-height: 1.7;
}

.sarachi-top .sarachi-company__data dt {
	color: var(--sarachi-accent);
	font-size: 14px;
	font-weight: 500;
}

.sarachi-top .sarachi-company__data dd {
	margin: 0;
	color: var(--sarachi-text-sub);
	font-family: var(--sarachi-font-num), var(--sarachi-font-body);
	font-size: 15px;
	font-weight: 400;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}


/* --- 会社概要：1199px以下（モック側は min-width:1200px で切り替え） --- */

@media (max-width: 1199px) {

	.sarachi-top .sarachi-company__copy .sarachi-section-title {
		font-weight: 700;
	}
}


/* --- 会社概要：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-company__copy {
		padding: 55px 45px;
	}
}


/* --- 会社概要：960px以下（縦積み） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-company__grid {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-company__photo {
		min-height: 580px;
	}
}


/* --- 会社概要：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-company__photo {
		min-height: 430px;
	}

	.sarachi-top .sarachi-company__caption {
		left: 20px;
		bottom: 22px;
		font-size: 48px;
	}

	.sarachi-top .sarachi-company__copy {
		padding: 42px 22px;
	}

	.sarachi-top .sarachi-company__copy .sarachi-section-title {
		font-size: 24px;
	}

	.sarachi-top .sarachi-company__copy .sarachi-section-copy {
		font-size: 15px;
	}

	.sarachi-top .sarachi-company__data div {
		grid-template-columns: 92px 1fr;
		gap: 15px;
	}
}


/* ==========================================================================
   よくある質問

   モックでは見出しへ4世代分の指定が重なり、最終的に効いていたのは
   最も詳細度の高い1件のみでした。その値へ平坦化しています。
   ========================================================================== */

.sarachi-top .sarachi-faq {
	background: #FCFBF9;
}

.sarachi-top .sarachi-faq__grid {
	display: grid;
	grid-template-columns: minmax(455px, 38%) minmax(0, 1fr);
	gap: 90px;
	column-gap: clamp(76px, 6vw, 104px);
	align-items: start;
}

/* 左側は追従させる */
.sarachi-top .sarachi-faq__intro {
	position: sticky;
	top: 120px;
	align-self: start;
	width: 100%;
	max-width: 470px;
	min-width: 0;
}

.sarachi-top .sarachi-faq__intro .sarachi-section-copy {
	font-size: 16px;
}

.sarachi-top .sarachi-faq__title {
	max-width: 470px;
	font-family: var(--sarachi-font-body);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.02em;
	white-space: normal;
}

.sarachi-top .sarachi-faq__title span {
	display: inline-block;
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
}

.sarachi-top .sarachi-faq__list {
	width: 100%;
	min-width: 0;
	border-top: 3px solid var(--sarachi-navy);
}

.sarachi-top .sarachi-faq__item {
	border-bottom: 1px solid #D7D7D4;
}

.sarachi-top .sarachi-faq__item summary {
	display: grid;
	grid-template-columns: 44px 1fr 30px;
	gap: 20px;
	align-items: center;
	min-height: 100px;
	padding: 20px 4px;
	list-style: none;
	cursor: pointer;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
}

.sarachi-top .sarachi-faq__item summary::-webkit-details-marker {
	display: none;
}

.sarachi-top .sarachi-faq__q {
	color: var(--sarachi-accent);
	font-family: var(--sarachi-font-num);
	font-size: 16px;
	font-weight: 700;
}

/* ＋ と − の切り替え */
.sarachi-top .sarachi-faq__plus {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.sarachi-top .sarachi-faq__plus::before,
.sarachi-top .sarachi-faq__plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 17px;
	height: 2px;
	background: var(--sarachi-navy);
	transform: translate(-50%, -50%);
}

.sarachi-top .sarachi-faq__plus::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.sarachi-top .sarachi-faq__item[open] .sarachi-faq__plus::after {
	display: none;
}

.sarachi-top .sarachi-faq__answer {
	padding: 0 60px 28px 64px;
	color: var(--sarachi-text-sub);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
}


/* --- よくある質問：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-faq__grid {
		grid-template-columns: minmax(330px, 34%) minmax(0, 1fr);
		column-gap: clamp(74px, 7vw, 112px);
	}

	.sarachi-top .sarachi-faq__intro {
		max-width: 410px;
	}

	.sarachi-top .sarachi-faq__title {
		max-width: 420px;
		font-size: 30px;
		line-height: 1.45;
	}

	.sarachi-top .sarachi-faq__plus {
		width: 28px;
		height: 28px;
	}
}


/* --- よくある質問：960px以下（縦積み・追従を解除） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-faq__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.sarachi-top .sarachi-faq__intro {
		position: static;
		max-width: 620px;
	}
}


/* --- よくある質問：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-faq__title {
		max-width: none;
		font-size: 28px;
	}

	.sarachi-top .sarachi-faq__item summary {
		grid-template-columns: 34px 1fr 26px;
		gap: 10px;
	}

	.sarachi-top .sarachi-faq__answer {
		padding: 0 28px 25px 44px;
	}
}


/* ==========================================================================
   仕事と人
   ========================================================================== */

.sarachi-top .sarachi-people {
	padding: 130px 0 0;
	background: var(--sarachi-navy);
	color: #fff;
}

.sarachi-top .sarachi-people__head {
	display: grid;
	grid-template-columns: 1fr .8fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 60px;
}

.sarachi-top .sarachi-people__head > * {
	min-width: 0;
}

/* ネイビー背景のため、小見出しと大見出しの文字色を明るくする */
.sarachi-top .sarachi-people .sarachi-eyebrow {
	color: #F5F4F1;
}

.sarachi-top .sarachi-people .sarachi-big-message {
	color: #fff;
}

.sarachi-top .sarachi-people__head p {
	max-width: 600px;
	margin: 0;
	color: rgba(255, 255, 255, .74);
	font-size: 16px;
	line-height: 1.85;
}

/* 5枚のモザイク（全幅） */
.sarachi-top .sarachi-people__mosaic {
	display: grid;
	grid-template-columns: 1.45fr .8fr .8fr 1fr;
	grid-template-rows: 310px 260px;
	gap: 10px;
	width: 100%;
}

.sarachi-top .sarachi-people__photo {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.sarachi-top .sarachi-people__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sarachi-top .sarachi-people__photo:nth-child(1) {
	grid-row: 1 / 3;
}

.sarachi-top .sarachi-people__photo:nth-child(2) {
	grid-column: 2 / 4;
}

.sarachi-top .sarachi-people__photo:nth-child(5) {
	grid-column: 3 / 5;
}

.sarachi-top .sarachi-people__photo figcaption {
	position: absolute;
	left: 12px;
	bottom: 10px;
	padding: 5px 8px;
	background: var(--sarachi-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}


/* --- 仕事と人：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-people__photo figcaption {
		font-size: 13px;
	}
}


/* --- 仕事と人：960px以下 --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-people__head {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-people__mosaic {
		grid-template-columns: 1.2fr .8fr .8fr;
		grid-template-rows: 280px 230px;
	}

	.sarachi-top .sarachi-people__photo:nth-child(5) {
		grid-column: 2 / 4;
	}
}


/* --- 仕事と人：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-people {
		padding-top: 90px;
	}

	.sarachi-top .sarachi-people .sarachi-big-message {
		font-size: clamp(40px, 10.8vw, 44px);
	}

	.sarachi-top .sarachi-people__head p {
		font-size: 15px;
	}

	.sarachi-top .sarachi-people__mosaic {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 250px 190px 190px;
	}

	.sarachi-top .sarachi-people__photo:nth-child(1) {
		grid-row: 1;
		grid-column: 1 / 3;
	}

	.sarachi-top .sarachi-people__photo:nth-child(2) {
		grid-column: 1;
	}

	.sarachi-top .sarachi-people__photo:nth-child(5) {
		grid-column: 1 / 3;
	}

	.sarachi-top .sarachi-people__photo figcaption {
		font-size: 12.5px;
	}
}


/* ==========================================================================
   Instagram ／ 公式LINE

   モックでは1つの <section> の左右でしたが、要件書4章により個別に
   ON/OFFできる出し分けにしています。片方だけ表示するときは PHP 側で
   --single が付き、1カラムへ切り替わります。
   ========================================================================== */

.sarachi-top .sarachi-social {
	padding: 98px 0 106px;
	background: var(--sarachi-bg-base);
}

.sarachi-top .sarachi-social__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.35fr) minmax(310px, .85fr);
	gap: 58px;
	align-items: stretch;
}

.sarachi-top .sarachi-social__grid--single {
	grid-template-columns: minmax(0, 1fr);
}


/* --- Instagram --- */

/* グリッドの子要素が内容の幅で押し広げられないようにする */
.sarachi-top .sarachi-instagram {
	min-width: 0;
}

.sarachi-top .sarachi-instagram__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 40px;
	margin-bottom: 24px;
}

.sarachi-top .sarachi-instagram__head .sarachi-eyebrow {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
}

.sarachi-top .sarachi-instagram__head h2 {
	margin: 0;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.sarachi-top .sarachi-instagram__head p {
	max-width: 430px;
	margin: 0;
	color: var(--sarachi-text-sub);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
}

.sarachi-top .sarachi-instagram__feed {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.sarachi-top .sarachi-instagram__post {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.sarachi-top .sarachi-instagram__post img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.sarachi-top .sarachi-instagram__post:hover img {
	transform: scale(1.035);
}

.sarachi-top .sarachi-instagram__post::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(44, 44, 49, .12);
	pointer-events: none;
}

.sarachi-top .sarachi-instagram__link {
	margin-top: 18px;
	font-size: 15px;
	font-weight: 600;
}


/* --- 公式LINE --- */

.sarachi-top .sarachi-line {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px 38px;
	border-top: 5px solid var(--sarachi-accent);
	background: #FCFBF9;
}

.sarachi-top .sarachi-line__kicker {
	margin: 0;
	color: #06C755;
	font-family: var(--sarachi-font-num), var(--sarachi-font-body);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sarachi-top .sarachi-line h3 {
	margin: 15px 0 0;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.sarachi-top .sarachi-line p:not(.sarachi-line__kicker) {
	margin: 18px 0 0;
	color: var(--sarachi-text-sub);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
}

.sarachi-top .sarachi-line__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 24px;
	padding: 0 16px;
	border: 1px solid #D7DAD8;
	background: #fff;
	color: var(--sarachi-navy);
	font-size: 15px;
	font-weight: 600;
	transition: border-color .2s ease, transform .2s ease;
}

.sarachi-top .sarachi-line__btn:hover {
	border-color: #06C755;
	transform: translateY(-1px);
}

.sarachi-top .sarachi-line__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 7px;
	border-radius: 4px;
	background: #06C755;
	color: #fff;
	font-size: 11px;
}


/* --- Instagram／LINE：960px以下 --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-line {
		max-width: 500px;
	}
}


/* --- Instagram／LINE：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-social__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.sarachi-top .sarachi-instagram__head {
		display: block;
	}

	.sarachi-top .sarachi-instagram__head p {
		margin-top: 13px;
	}

	.sarachi-top .sarachi-instagram__feed {
		grid-template-columns: 1fr 1fr;
	}

	.sarachi-top .sarachi-line {
		padding: 34px 26px;
	}

	.sarachi-top .sarachi-line__kicker {
		font-size: 13px;
	}
}


/* ==========================================================================
   お客様の声

   モックでは .prepared-section により非表示になっていたセクションです。
   投稿タイプ sarachi_voice から直近6件を出力します。
   ========================================================================== */

.sarachi-top .sarachi-voice {
	background: #FCFBF9;
}

.sarachi-top .sarachi-voice__grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 70px;
}

.sarachi-top .sarachi-voice__intro figure {
	height: 250px;
	margin: 30px 0 0;
	overflow: hidden;
}

.sarachi-top .sarachi-voice__intro figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 見出しを指定位置で改行させる */
.sarachi-top .sarachi-heading-keep span {
	display: inline-block;
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
}

.sarachi-top .sarachi-voice__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 2px solid var(--sarachi-navy);
}

.sarachi-top .sarachi-voice-item {
	min-height: 205px;
	padding: 30px 24px 28px 0;
	border-bottom: 1px solid var(--sarachi-line);
}

.sarachi-top .sarachi-voice-item:nth-child(odd) {
	padding-right: 30px;
	border-right: 1px solid var(--sarachi-line);
}

.sarachi-top .sarachi-voice-item:nth-child(even) {
	padding-left: 30px;
}

.sarachi-top .sarachi-voice-item__category {
	margin: 0;
	color: var(--sarachi-accent);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .06em;
}

.sarachi-top .sarachi-voice-item h3 {
	margin: 12px 0 0;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
}

.sarachi-top .sarachi-voice-item__client {
	margin: 10px 0 0;
	color: #7A7B80;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.sarachi-top .sarachi-voice-item__text {
	margin: 12px 0 0;
	color: var(--sarachi-text-sub);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
}


/* --- お客様の声：960px以下（縦積み・紹介欄は2カラム） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-voice__grid {
		grid-template-columns: 1fr;
		gap: 46px;
	}

	.sarachi-top .sarachi-voice__intro {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}

	.sarachi-top .sarachi-voice__intro figure {
		margin: 0;
	}
}


/* --- お客様の声：680px以下（1列） --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-voice__intro {
		display: block;
	}

	.sarachi-top .sarachi-voice__intro figure {
		margin-top: 24px;
	}

	.sarachi-top .sarachi-voice__list {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-voice-item:nth-child(odd) {
		padding-right: 0;
		border-right: 0;
	}

	.sarachi-top .sarachi-voice-item:nth-child(even) {
		padding-left: 0;
	}
}


/* ==========================================================================
   ブログ・お知らせ

   モックでは .prepared-section により非表示になっていたセクションです。
   WordPress標準の投稿から直近6件を出力します。
   ========================================================================== */

.sarachi-top .sarachi-blog {
	background: #ECEAE6;
}

.sarachi-top .sarachi-blog__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 50px;
	margin-bottom: 42px;
}

.sarachi-top .sarachi-blog__head .sarachi-section-title {
	font-family: var(--sarachi-font-body);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.02em;
}

.sarachi-top .sarachi-blog__head p {
	max-width: 520px;
	margin: 0;
	color: var(--sarachi-text-sub);
	font-size: 15px;
	line-height: 1.8;
}

.sarachi-top .sarachi-blog__list {
	border-top: 2px solid var(--sarachi-navy);
}

.sarachi-top .sarachi-blog-row {
	display: grid;
	grid-template-columns: 130px 155px 1fr 30px;
	gap: 20px;
	align-items: center;
	min-height: 80px;
	border-bottom: 1px solid var(--sarachi-line);
}

.sarachi-top .sarachi-blog-row time {
	color: #7A7B80;
	font-family: var(--sarachi-font-num);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	font-stretch: condensed;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.sarachi-top .sarachi-blog-row__category {
	color: var(--sarachi-accent);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.sarachi-top .sarachi-blog-row h3 {
	margin: 0;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

.sarachi-top .sarachi-blog-row__arrow {
	text-align: right;
	font-size: 18px;
	transition: transform .2s ease;
}

.sarachi-top .sarachi-blog-row:hover h3,
.sarachi-top .sarachi-blog-row:hover .sarachi-blog-row__arrow {
	color: var(--sarachi-accent);
}

.sarachi-top .sarachi-blog-row:hover .sarachi-blog-row__arrow {
	transform: translateX(3px);
}


/* --- ブログ・お知らせ：680px以下（日付を左に、2段組みへ） --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-blog__head {
		display: block;
	}

	.sarachi-top .sarachi-blog__head .sarachi-section-title {
		font-size: 26px;
	}

	.sarachi-top .sarachi-blog__head p {
		margin-top: 16px;
		font-size: 14.5px;
	}

	.sarachi-top .sarachi-blog-row {
		grid-template-columns: 95px 1fr 22px;
		gap: 10px;
	}

	.sarachi-top .sarachi-blog-row time {
		grid-row: 1 / 3;
	}

	.sarachi-top .sarachi-blog-row__category {
		grid-column: 2;
	}

	.sarachi-top .sarachi-blog-row h3 {
		grid-column: 2;
		grid-row: 2;
	}

	.sarachi-top .sarachi-blog-row__arrow {
		grid-column: 3;
		grid-row: 1 / 3;
	}
}


/* ==========================================================================
   CONTACT

   フォームの入力欄は Contact Form 7 が出力します。
   囲みのレイアウトは独自クラスで指定し、入力要素は要素セレクタで
   掴んでいます。Contact Form 7 固有のクラスを使うのは、自前で作れない
   エラー表示と送信結果の2箇所だけです。プラグイン更新やフォーム
   プラグインの差し替えで崩れる範囲を限定するためです。

   モックからの変更点が2点あります。
   1. @media(min-width:1200px) の調整が1199px以下へ反映されておらず、
      1200pxを境に見出しが20px→30pxへ拡大するなどの逆転がありました。
      最終世代である1200px以上の値へ統一しています。
   2. 送信ボタンは <input> として出力されるため擬似要素を付けられません。
      矢印はボタン右端に配置しています（モックは文字と矢印が中央並び）。
   ========================================================================== */

.sarachi-top .sarachi-contact {
	padding: 130px 0 110px;
	background: var(--sarachi-navy);
	color: #fff;
}

.sarachi-top .sarachi-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 52fr);
	gap: 75px;
	column-gap: 6%;
	align-items: start;
}

.sarachi-top .sarachi-contact__copy {
	min-width: 0;
	width: 100%;
}

/* ネイビー背景のため、小見出しと大見出しの文字色を明るくする */
.sarachi-top .sarachi-contact__copy .sarachi-eyebrow {
	color: #F5F4F1;
}

.sarachi-top .sarachi-contact__copy .sarachi-big-message {
	color: #fff;
	font-size: clamp(58px, 5.4vw, 82px);
	line-height: 1.05;
	letter-spacing: -.05em;
}

.sarachi-top .sarachi-contact__copy .sarachi-big-message > span {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
}

/* 大見出しの中で一段小さくする行 */
.sarachi-top .sarachi-copy-medium-line {
	display: inline-block;
	white-space: nowrap;
	word-break: keep-all;
	font-size: .75em;
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -.055em;
}

.sarachi-top .sarachi-contact__copy > p {
	max-width: 560px;
	margin: 30px 0 0;
	color: #D4D9DE;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
}

.sarachi-top .sarachi-contact__info {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, .25);
}

.sarachi-top .sarachi-contact__phone small {
	display: block;
	color: #B6BEC6;
	font-family: var(--sarachi-font-num), var(--sarachi-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .14em;
}

.sarachi-top .sarachi-contact__phone strong {
	display: block;
	margin-top: 7px;
	font-family: var(--sarachi-font-num);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .02em;
	font-stretch: condensed;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.sarachi-top .sarachi-contact__meta {
	display: grid;
	gap: 7px;
	margin-top: 20px;
	color: #D4D9DE;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
}


/* --- フォームの枠 --- */

.sarachi-top .sarachi-contact__form {
	min-width: 0;
	width: 100%;
	padding: 48px 50px;
	background: var(--sarachi-bg-base);
	color: var(--sarachi-ink);
}

.sarachi-top .sarachi-contact__form h3 {
	margin: 0;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;
}

.sarachi-top .sarachi-contact__form > p {
	margin: 7px 0 28px;
	color: var(--sarachi-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}


/* --- 入力欄（Contact Form 7 のフォーム定義内で使うクラス） --- */

.sarachi-top .sarachi-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.sarachi-top .sarachi-form__field {
	margin-top: 18px;
}

.sarachi-top .sarachi-form__row .sarachi-form__field,
.sarachi-top .sarachi-form > .sarachi-form__field:first-child {
	margin-top: 0;
}

.sarachi-top .sarachi-form__field label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--sarachi-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.sarachi-top .sarachi-form__req {
	color: var(--sarachi-accent);
	font-size: 14px;
	font-weight: 700;
}

.sarachi-top .sarachi-form__field input,
.sarachi-top .sarachi-form__field select,
.sarachi-top .sarachi-form__field textarea {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 1px solid #C9C8C4;
	border-radius: 0;
	background: #fff;
	color: var(--sarachi-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	outline: none;
}

.sarachi-top .sarachi-form__field textarea {
	height: 150px;
	padding: 13px 14px;
	resize: vertical;
}

.sarachi-top .sarachi-form__field input:focus,
.sarachi-top .sarachi-form__field select:focus,
.sarachi-top .sarachi-form__field textarea:focus {
	border-color: var(--sarachi-accent);
	box-shadow: 0 0 0 3px #E7E5EC;
}

.sarachi-top .sarachi-form__field input::placeholder,
.sarachi-top .sarachi-form__field textarea::placeholder {
	font-size: 16px;
}

/* Contact Form 7 は入力欄を span で包むため、幅を親に合わせる */
.sarachi-top .sarachi-form__field .wpcf7-form-control-wrap {
	display: block;
}


/* --- 同意チェックと送信ボタン --- */

.sarachi-top .sarachi-form__privacy {
	margin: 19px 0;
	color: var(--sarachi-muted);
	font-size: 14px;
	line-height: 1.6;
}

.sarachi-top .sarachi-form__privacy .wpcf7-list-item {
	margin: 0;
}

.sarachi-top .sarachi-form__privacy label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.sarachi-top .sarachi-form__privacy input[type="checkbox"] {
	margin-top: 3px;
}

.sarachi-top .sarachi-form__privacy a {
	text-decoration: underline;
}


/* --- 個人情報の取り扱い（開閉式） --- */

.sarachi-top .sarachi-form__policy {
	margin-top: 10px;
	border: 1px solid #C9C8C4;
	background: #fff;
}

.sarachi-top .sarachi-form__policy summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	list-style: none;
	cursor: pointer;
	color: var(--sarachi-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.sarachi-top .sarachi-form__policy summary::-webkit-details-marker {
	display: none;
}

/* 開閉を示す三角。開くと下向きになる */
.sarachi-top .sarachi-form__policy summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid var(--sarachi-accent);
	transition: transform .2s ease;
}

.sarachi-top .sarachi-form__policy[open] summary::before {
	transform: rotate(90deg);
}

.sarachi-top .sarachi-form__policy-body {
	max-height: 260px;
	padding: 0 14px 14px;
	overflow-y: auto;
	color: var(--sarachi-text-sub);
	font-size: 13px;
	line-height: 1.75;
}

.sarachi-top .sarachi-form__policy-body h4 {
	margin: 14px 0 4px;
	color: var(--sarachi-navy);
	font-family: var(--sarachi-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

.sarachi-top .sarachi-form__policy-body h4:first-child {
	margin-top: 0;
}

.sarachi-top .sarachi-form__policy-body p {
	margin: 0;
}

.sarachi-top .sarachi-form__policy-body ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.sarachi-top .sarachi-form__policy-body li {
	margin: 0;
}

/**
 * 送信ボタン
 *
 * Contact Form 7 は送信ボタンの直後に読み込み中アイコンを出力します。
 * そのままだと包む要素がボタンより高くなり、矢印の垂直位置がずれるため、
 * アイコンを絶対配置で流れの外に出しています。
 * あわせて flex にして <input> のベースライン分の隙間も消しています。
 */
.sarachi-top .sarachi-form__submit-wrap {
	position: relative;
	display: flex;
}

.sarachi-top .sarachi-form__submit {
	flex: 1 1 auto;
	width: 100%;
	min-height: 56px;
	padding: 0 46px;
	border: 2px solid var(--sarachi-accent);
	border-radius: 0;
	background: var(--sarachi-accent);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.sarachi-top .sarachi-form__submit:hover {
	background: var(--sarachi-navy);
	border-color: var(--sarachi-navy);
	transform: translateY(-2px);
}

/* <input> には擬似要素を付けられないため、包む要素側で矢印を描く */
.sarachi-top .sarachi-form__submit-wrap::after {
	content: "→";
	position: absolute;
	right: 24px;
	top: 50%;
	color: #fff;
	font-family: var(--sarachi-font-num);
	font-size: 20px;
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
}


/* --- Contact Form 7 が出力する通知 --- */

.sarachi-top .sarachi-contact__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #B3261E;
	font-size: 13px;
	line-height: 1.5;
}

.sarachi-top .sarachi-contact__form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 14px;
	border: 1px solid #C9C8C4;
	font-size: 14px;
	line-height: 1.6;
}

.sarachi-top .sarachi-contact__form .wpcf7-spinner {
	display: block;
	margin: 12px auto 0;
}

/* 送信ボタンの枠内では、高さに影響させないよう流れの外へ出す */
.sarachi-top .sarachi-form__submit-wrap .wpcf7-spinner {
	position: absolute;
	left: 50%;
	top: calc(100% + 12px);
	margin: 0;
	transform: translateX(-50%);
}


/* --- CONTACT：1180px以下 --- */

@media (max-width: 1180px) {

	.sarachi-top .sarachi-contact__grid {
		grid-template-columns: minmax(0, 41fr) minmax(0, 53fr);
		gap: 45px;
		column-gap: 6%;
	}

	.sarachi-top .sarachi-contact__copy .sarachi-big-message {
		font-size: clamp(54px, 5.8vw, 68px);
	}

	.sarachi-top .sarachi-copy-medium-line {
		font-size: .72em;
	}
}


/* --- CONTACT：960px以下（縦積み） --- */

@media (max-width: 960px) {

	.sarachi-top .sarachi-contact__grid {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-contact__copy .sarachi-big-message {
		font-size: clamp(53px, 6.1vw, 94px);
	}

	.sarachi-top .sarachi-contact__form {
		padding: 42px;
	}
}


/* --- CONTACT：680px以下 --- */

@media (max-width: 680px) {

	.sarachi-top .sarachi-contact {
		padding: 92px 0 80px;
	}

	.sarachi-top .sarachi-contact__copy .sarachi-big-message {
		font-size: clamp(40px, 10.8vw, 44px);
	}

	.sarachi-top .sarachi-copy-medium-line {
		font-size: .78em;
	}

	.sarachi-top .sarachi-contact__phone strong {
		font-size: 28px;
	}

	.sarachi-top .sarachi-contact__form {
		padding: 32px 20px;
	}

	.sarachi-top .sarachi-form__row {
		grid-template-columns: 1fr;
	}

	.sarachi-top .sarachi-form__policy-body {
		max-height: 200px;
	}
}