/* page-service 専用CSS（旧: テンプレート<head>のインライン<style>・2026-07-30に外部化） */
		:root {
			--paper: #fff;
			--paper-2: #f5f4f1;
			--ink: #242220;
			--ink-soft: #514d47;
			--stone: #8f8b82;
			--line: #e7e4de;
			--dark: #26241f;
			--dark-2: #1e1c18;
			--brass: #a89878;
			--paper-on-dark: #ede8df;
			--serif-jp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif; /* フォント統一（オーナー指示 2026-07-28） */
			--serif-en:"Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
			--sans:"Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif; /* 旧: システムゴシック。フォント統一（オーナー指示 2026-07-28） */
			--svc-paper: #fff;
			--svc-ink: #242220;
			--svc-muted: #746f69;
			--svc-line: rgba(36, 34, 32, .14);
			--svc-ghost: rgba(36, 34, 32, .045);
			--gutter: max(clamp(24px, 5vw, 64px), calc((100vw - 1472px) / 2));
			--svc-serif: "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif; /* フォント統一（オーナー指示 2026-07-28） */
		}

		html,
		body {
			margin: 0;
			background: var(--svc-paper);
			color: var(--svc-ink);
		}

		.sg {
			overflow: clip;
			background: var(--svc-paper);
			font-family: var(--svc-serif);
			letter-spacing: .06em;
		}

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

		.svc-wrap {
			width: min(1200px, calc(100vw - (var(--gutter) * 2)));
			margin-inline: auto;
		}

		.svc-intro {
			position: relative;
			padding: clamp(110px, 13vw, 190px) 0 clamp(120px, 14vw, 210px);
			isolation: isolate;
		}

		.svc-intro__ghost {
			position: absolute;
			z-index: -1;
			top: clamp(42px, 5vw, 72px);
			left: 50%;
			color: var(--svc-ghost);
			/* 他ページのゴースト英字（.ghost-en = Cormorant）と書体を統一（オーナー指摘 2026-07-28）。
			   未指定だと和文明朝(--svc-serif)のラテン字形を継承して見た目が異なっていた */
			font-family: var(--serif-en);
			font-size: clamp(120px, 18vw, 280px);
			font-weight: 400;
			line-height: .82;
			letter-spacing: -.035em;
			white-space: nowrap;
			transform: translateX(-50%);
			pointer-events: none;
		}

		.svc-intro__inner {
			max-width: 940px;
		}

		.svc-detail__en {
			font-family: "Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif; /* フォント統一（オーナー指示 2026-07-28） */
		}

		.svc-intro h2 {
			max-width: 900px;
			margin: 0;
			font-size: clamp(30px, 4.2vw, 54px);
			font-weight: 400;
			line-height: 1.65;
			letter-spacing: .11em;
		}

		.svc-intro__text {
			max-width: 820px;
			margin: clamp(42px, 5vw, 70px) 0 0;
			color: #514d49;
			font-size: clamp(14px, 1.05vw, 16px);
			line-height: 2.35;
			letter-spacing: .09em;
		}

		.svc-lineup {
			padding-bottom: clamp(120px, 14vw, 210px);
		}

		.svc-row {
			position: relative; /* .svc-hit の基準 */
			display: grid;
			grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr);
			align-items: center;
			gap: clamp(54px, 8vw, 112px);
		}

		/* カード全面のヒットエリア（オーナー指示 2026-07-30）。
		   写真とView serviceだけがリンクで、見出し・本文の上では
		   ホバー演出が出るのに押せなかったため、行全体を押せるようにする。
		   読み上げは既存の2つのリンクが担うのでARIAからは除外 */
		.svc-hit {
			position: absolute;
			inset: 0;
			z-index: 3;
		}

		.svc-row + .svc-row {
			margin-top: clamp(110px, 14vw, 190px);
		}

		.svc-row.is-reverse .svc-media {
			order: 2;
		}

		.svc-row.is-reverse .svc-detail {
			order: 1;
		}

		/* 反転行は順番だけでなく列幅も入れ替える。順番だけの入替だと
		   写真が狭い列(0.78fr)に入り、行ごとにコンテンツの大きさが
		   揃わなかった（オーナー指摘 2026-07-28）。これで全行とも
		   写真=1.22fr / テキスト=0.78fr の同サイズになる */
		.svc-row.is-reverse {
			grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
		}

		.svc-media {
			position: relative;
			overflow: hidden;
			overflow: clip; /* hiddenのままだとview()の基準を奪う */
			aspect-ratio: 16 / 10;
			display: block;
		}

		/* スクロール連動視差: sg-scrollfx（sg-menu.php）が .svc-media に --py を
		   毎フレーム設定し、上下13%ブリードさせた内層imgがゆっくり動く
		   （works一覧の m-reveal-img::before と同じ振る舞い）。JS停止時は
		   --py=0 で静止画として成立 */
		.svc-media img {
			position: absolute;
			left: 0;
			top: -13%;
			width: 100%;
			height: 126%;
			object-fit: cover;
			display: block;
			translate: 0 var(--py, 0);
			will-change: transform;
		}

		/* スマホ視差: --pyはタッチでは書かれないためCSS scroll-drivenで代替（2026-08-07） */
		@supports (animation-timeline: view()) {
			@media (pointer: coarse) {
				.svc-media img{animation:sg-mplx-drift auto linear both;animation-timeline:view();}
			}
		}

		/* 上罫線＋番号（01〜04）の飾りはオーナー指示で削除（2026-07-28） */
		.svc-detail {
			position: relative;
		}

		.svc-detail__en {
			margin: 0 0 13px;
			color: #77716b;
			font-size: 14px;
			letter-spacing: .24em;
		}

		.svc-detail h3 {
			margin: 0;
			font-size: clamp(27px, 3vw, 42px);
			font-weight: 400;
			line-height: 1.55;
			letter-spacing: .1em;
		}

		.svc-detail__text {
			margin: 30px 0 0;
			color: #5c5752;
			font-size: 14px;
			line-height: 2.25;
			letter-spacing: .075em;
		}

		.svc-link {
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			gap: 60px;
			min-width: 210px;
			margin-top: 38px;
			padding: 15px 0;
			border-bottom: 1px solid var(--svc-ink);
			color: inherit;
			font-family: "Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif; /* フォント統一（オーナー指示 2026-07-28） */
			font-size: 14px;
			letter-spacing: .14em;
			text-decoration: none;
			transition: opacity .3s ease;
		}

		.svc-link::after {
			content: "→";
			font-size: 17px;
			transition: transform .3s ease;
		}

		/* ホバー時の反応は .svc-hit が最前面に乗るため行単位（.svc-row:hover）で
		   受ける。個別の .svc-link:hover は発火しないので置かない。
		   キーボード操作時はフォーカスリングで所在を示す */
		.svc-link:focus-visible::after {
			transform: translateX(7px);
		}

		/* ---------- ホバー演出（オーナー指示 2026-07-30）
		   写真だけでは「押せる」ことが伝わらないため、行全体をホバー対象にして
		   ①写真がゆっくり寄る ②光が少し差す ③View service の罫線が伸びて矢印が出る
		   の3点を同時に動かす。視差(--py)は translate、寄りは scale と別プロパティで
		   持たせているため競合しない。マウス環境のみ（タッチでは誤発火しない） ---------- */
		@media (hover: hover) and (pointer: fine) {
			.svc-media img {
				transition: scale 1.1s cubic-bezier(.165,.84,.44,1), filter 1.1s ease;
			}
			.svc-row:hover .svc-media img {
				scale: 1.055;
				filter: saturate(1.04) brightness(1.03);
			}

			/* 写真の上に、行ホバーで下から静かに現れる薄い墨のヴェール */
			.svc-media::after {
				content: "";
				position: absolute;
				inset: 0;
				z-index: 1;
				background: linear-gradient(to top, rgba(20, 19, 16, .3), transparent 62%);
				opacity: 0;
				transition: opacity .8s ease;
				pointer-events: none;
			}
			.svc-row:hover .svc-media::after {
				opacity: 1;
			}

			/* View service: 罫線が左から伸び、矢印が右へ滑る */
			.svc-link {
				position: relative;
				border-bottom-color: rgba(36, 34, 32, .22);
			}
			.svc-link::before {
				content: "";
				position: absolute;
				left: 0;
				bottom: -1px;
				width: 100%;
				height: 1px;
				background: var(--svc-ink);
				transform: scaleX(0);
				transform-origin: left;
				transition: transform .7s cubic-bezier(.165,.84,.44,1);
			}
			.svc-row:hover .svc-link::before {
				transform: scaleX(1);
			}
			.svc-row:hover .svc-link::after {
				transform: translateX(7px);
			}
		}

		@media (prefers-reduced-motion: reduce) {
			.svc-media img,
			.svc-media::after,
			.svc-link::before {
				transition: none;
			}
		}

		.sg-footer {
			padding: 72px 0 30px;
			background: #242220;
			color: #fff;
		}

		.sg-footer__top {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: 50px;
			padding-bottom: 48px;
			border-bottom: 1px solid rgba(255, 255, 255, .2);
		}

		.sg-footer__name {
			margin: 0;
			font-size: 22px;
			font-weight: 400;
			letter-spacing: .18em;
		}

		.sg-footer__nav {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			gap: 20px 34px;
		}

		.sg-footer__nav a {
			color: rgba(255, 255, 255, .78);
			font-size: 11px;
			letter-spacing: .14em;
			text-decoration: none;
			text-transform: uppercase;
		}

		.sg-footer__copy {
			margin-top: 26px;
			color: rgba(255, 255, 255, .48);
			font-size: 10px;
			letter-spacing: .12em;
		}

		html.m-on .m-reveal {
			opacity: 0;
			transform: translateY(28px);
			transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
		}

		html.m-on .m-group.is-visible .m-reveal {
			opacity: 1;
			transform: none;
		}

		@media (max-width: 860px) {
			.svc-intro {
				padding: 92px 0 120px;
			}

			.svc-intro__ghost {
				top: 42px;
				left: var(--gutter);
				font-size: clamp(84px, 28vw, 150px);
				transform: none;
			}

			.svc-intro h2 {
				font-size: clamp(27px, 7.7vw, 38px);
				line-height: 1.7;
			}

			.svc-intro__text {
				margin-top: 36px;
				line-height: 2.15;
			}

			.svc-row,
			.svc-row.is-reverse {
				grid-template-columns: 1fr;
				gap: 38px;
			}

			.svc-row + .svc-row {
				margin-top: 112px;
			}

			.svc-row.is-reverse .svc-media,
			.svc-row.is-reverse .svc-detail {
				order: initial;
			}

			.svc-media {
				aspect-ratio: 4 / 3;
			}


			.svc-detail h3 {
				font-size: clamp(27px, 8vw, 36px);
			}

			.svc-detail__text {
				margin-top: 22px;
				line-height: 2.15;
			}

			.svc-link {
				width: 100%;
				margin-top: 28px;
			}

			.sg-footer {
				padding-top: 56px;
			}

			.sg-footer__top {
				display: block;
			}

			.sg-footer__nav {
				justify-content: flex-start;
				margin-top: 38px;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			.svc-link,
			.svc-link::after,
			html.m-on .m-reveal {
				transition: none;
			}
		}
