/*
 * tiptop shared base system
 *
 * Layout, color, typography and component contracts shared by the standard
 * and immersive front-end systems. Extracted from immersive-system.css
 * (Issue #464) — motion/scene-only rules stayed there.
 */

:root {
	--tt-base-navy: var(--tiptop-base);
	--tt-base-charcoal: var(--tiptop-surface);
	--tt-base-charcoal-soft: var(--tiptop-surface-alt);
	--tt-base-black: var(--tiptop-base);
	--tt-base-paper: var(--tiptop-contrast);
	--tt-base-paper-soft: var(--tiptop-muted);
	--tt-base-ink: var(--tiptop-contrast);
	--tt-base-muted: var(--tiptop-muted);
	--tt-base-line: color-mix(in srgb, var(--tiptop-border) 58%, transparent);
	--tt-base-line-strong: color-mix(in srgb, var(--tiptop-border) 88%, transparent);
	--tt-base-overlay: linear-gradient(180deg, rgb(var(--tt-scene-veil) / 0.22), rgb(var(--tt-scene-veil) / 0.72));
	/* #418: alias — design-system.css's --tt-width-wide now holds this exact
	 * formula (it had zero consumers before, so redefining it there was
	 * risk-free). Single source of truth, same resulting value. */
	--tt-width-base-wide: var(--tt-width-wide);
	--tt-width-base-normal: min(1040px, calc(100vw - clamp(40px, 8vw, 144px)));
	--tt-width-base-narrow: min(720px, calc(100vw - 40px));
	--tt-base-section-space: clamp(104px, 13vw, 190px);
	--tt-base-hero-min: min(860px, 100svh);
	--tt-base-image-ratio: 1.35;
	--tt-motion-duration-ui: 0.24s;
	--tiptop-post-detail-page-bg: var(--tiptop-surface-alt);
	--tiptop-post-detail-surface: var(--tiptop-surface);
	--tiptop-post-detail-text: var(--tiptop-text);
	--tiptop-post-detail-muted: var(--tiptop-muted);
	--tiptop-post-detail-border: color-mix(in srgb, var(--tiptop-border) 58%, transparent);
	--tiptop-post-detail-frame: min(1040px, calc(100vw - 40px));
	--tiptop-post-detail-measure: min(720px, calc(100vw - 72px));
}



/* Issue #678: standard mode renders one plain hero from the saved hero scene copy only.
 * 本実装（標準モードのデフォルトルック更新）でテキスト列＋画像列の分割レイアウトへ変更。
 * hero scene に image_id が無い場合は tiptop-standard-hero--no-image 修飾で単一カラムへ
 * フォールバックする（既存の front-content-hero--no-image と同じ考え方）。 */
/* 2026-08-07：段リズムをモックへ合わせ、ヒーローだけ他の段(--tt-space-section=112px)より
 * 少し詰めた96pxにする。旧値の --tt-base-section-space はイマーシブ用の
 * clamp(104px,13vw,190px) で、標準では上下190pxとなり他の段の1.7倍あった。
 * ヒーローは min-height も別に持つため、paddingを絞っても高さは確保される。 */
.tiptop-standard-hero {
	padding: clamp(56px, 7vw, 96px) 0;
	background: var(--tiptop-base);
	color: var(--tiptop-contrast);
}

.tiptop-standard-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(32px, 6vw, 72px);
	min-height: clamp(480px, 60svh, 640px);
}

.tiptop-standard-hero--no-image .tiptop-standard-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	min-height: clamp(520px, 70svh, 720px);
	text-align: center;
}

.tiptop-standard-hero__content {
	margin: 0;
}

.tiptop-standard-hero--no-image .tiptop-standard-hero__content {
	margin: 0 auto;
}

/* eyebrowの下線は block/static のため text-align では動かない。分割レイアウトは左寄せの
 * ため既定では中央寄せしない。no-image時（中央寄せ）だけ標準Servicesの同型対応
 * （front-page-adjustments-rules.css）に倣って中央へ寄せる。
 * 2026-08-10：寄せる対象を ::after から eyebrow自身へ移した。下線をモックへ揃える
 * （front-gradient-system.css）ために eyebrow を width:fit-content にしたので、
 * ::after 側の margin-inline:auto では中央に寄らなくなったため。 */
.tiptop-standard-hero--no-image .hero__eyebrow {
	margin-inline: auto;
}

/* 2026-08-07：モックと完全一致させるため、サイズ・字間・行間をモックの実値に合わせた。
 * ⚠ 字間/行間はここだけ文字間隔プリセット（--tt-letter-add / --tt-leading-scale）に
 * 追従しない。プリセットxwideでは字間0.16em・行間1.83になり、モック（0.06em・1.6）から
 * 大きく外れて見出しが間延びしていたため、モックの見た目を正としてプリセット追従を外した。
 * プリセットを変えて見出しも動かしたい場合はここを calc(...) 形に戻す。 */
.tiptop-standard-hero h1 {
	margin: 0;
	font-size: var(--tt-text-hero);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.6;
}

.tiptop-standard-hero__lead {
	max-width: 34em;
	margin: 24px 0 0;
	color: var(--tiptop-muted);
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-standard-hero--no-image .tiptop-standard-hero__lead {
	max-width: 900px;
	margin: 24px auto 0;
}

.tiptop-standard-hero__action {
	margin: 32px 0 0;
}

.tiptop-standard-hero__figure {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--tt-radius-md, 0);
}

.tiptop-standard-hero__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* モバイルのヒーローを承認済みモックへ揃える（2026-08-10）。
 * 実サイトは中央揃えで、画像を order: -1 でテキストの上へ出し、280pxの正方形に
 * 切っていた。モックは左揃えのまま、テキストの下にコンテナ幅いっぱいの 4:5 の
 * 画像を置く。375px幅で並べて見比べて確認している。
 * 中央寄せの指定は margin: 0 auto / margin-inline: auto として各所に散っていたので
 * まとめて外す。 */
/* ヒーローの1カラム化は 960px から（2026-08-10・800px幅でモックと突合）。
 * 承認済みモックは 960px 以下で .hero__inner を1カラムに落とす。実サイトは 781px
 * 以下でしか落としておらず、780〜960px の帯で2カラムのままだった。タブレットでは
 * テキスト側が狭くなり、見出しが1行につき2〜3語で折り返していた。 */
@media (max-width: 960px) {
	.tiptop-standard-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: auto;
	}
}

@media (max-width: 781px) {
	.tiptop-standard-hero {
		padding: clamp(88px, 18vw, 120px) 0;
	}

	.tiptop-standard-hero__content {
		margin: 0;
	}

	.tiptop-standard-hero .hero__eyebrow {
		margin-inline: 0;
	}

	.tiptop-standard-hero__lead {
		margin-inline: 0;
	}

	.tiptop-standard-hero__figure {
		width: 100%;
		margin-inline: 0;
	}
}

.tiptop-about-summary__inner,
.tiptop-works-showcase__inner {
	width: var(--tt-width-base-wide);
	margin-inline: auto;
}

.tiptop-works-showcase__title {
	max-width: 760px;
	margin: 12px 0 0;
	font-size: var(--tt-text-section);
	font-weight: 400;
	line-height: calc(1.6 * var(--tt-leading-scale));
}

.tiptop-works-showcase__lead {
	max-width: 640px;
	margin: 12px 0 0;
	color: var(--tt-base-paper-soft);
	line-height: calc(1.8 * var(--tt-leading-scale));
}

.tiptop-about-summary__profile {
	display: grid;
	grid-template-columns: clamp(140px, 18vw, 230px) minmax(0, 1fr);
	gap: clamp(34px, 6vw, 86px);
	align-items: center;
	max-width: 1040px;
	margin-inline: auto;
}

.tiptop-about-summary__image {
	overflow: hidden;
	width: 100%;
	margin: 0;
	border-radius: 50%;
	aspect-ratio: 1;
}

.tiptop-about-summary__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tiptop-about-summary__profile .tiptop-about-summary__title {
	max-width: 760px;
	margin: 12px 0 18px;
	font-size: var(--tt-text-section);
	font-weight: 400;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	line-height: calc(1.6 * var(--tt-leading-scale));
}

.tiptop-about-summary__profile p:last-child {
	max-width: 760px;
	margin: 0;
	color: var(--tt-base-paper-soft);
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-about-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	max-width: var(--tt-width-default);
	margin: clamp(48px, 7vw, 80px) auto 0;
	padding: 0;
}

.tiptop-about-list--custom {
	max-width: var(--tt-width-default);
	margin: clamp(48px, 7vw, 80px) auto 0;
}

/* CAREER（経歴）の `.career*` の見た目はここには置かない（2026-08-11・Issue #868 のA）。
 * 経歴は中身も見た目もクライアントごとに違う一点物なので、テーマ本体ではなく
 * 「トップページ編集＞経歴」に貼るHTML自身が `<style>` で持つ（この欄は unfiltered_html を
 * 持つ管理者の入力を素通しする＝旧デフォルトの `.tiptop-career-strip` も同じ形だった）。
 * 貼り付け用の正本は `docs/career-markup-sample.html`。 */
.tiptop-about-list--custom .tiptop-career-strip {
	width: 100%;
	overflow: hidden;
}

.tiptop-about-list--custom .tiptop-career-card {
	flex: 0 0 clamp(260px, 24vw, 330px);
	width: clamp(260px, 24vw, 330px);
	min-height: 136px;
	padding: 22px 24px;
	border: 1px solid var(--tt-base-line);
	background: var(--tt-base-charcoal-soft);
}

.tiptop-about-list--custom .tiptop-career-card time {
	display: block;
	margin-bottom: 12px;
	color: var(--tt-base-ink);
	font-size: var(--tt-text-body);
	font-weight: 700;
	letter-spacing: calc(0.12em + var(--tt-letter-add));
}

.tiptop-about-list--custom .tiptop-career-card p {
	margin: 0;
	color: var(--tt-base-muted);
	font-size: var(--tt-text-label);
	line-height: calc(1.8 * var(--tt-leading-scale));
}


.tiptop-about-stats > div {
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-items: center;
	justify-content: center;
	min-height: 104px;
	border-right: 1px solid var(--tt-base-line);
	text-align: center;
}

.tiptop-about-stats > div:last-child { border-right: 0; }

.tiptop-about-stats dt {
	color: var(--tt-base-muted);
	font-size: var(--tt-text-meta);
	letter-spacing: calc(0.1em + var(--tt-letter-add));
}

.tiptop-about-stats dd {
	order: -1;
	margin: 0;
	font-family: var(--tt-font-heading);
	font-size: var(--tt-text-numeral);
	font-weight: 400;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

.tiptop-about-stats small {
	margin-left: 4px;
	font-size: 0.34em;
}

.front-content-card__arrow {
	display: none;
}

/* 実績カードは画像+短いタイトルのみの薄い構成で、単独の矢印だけが浮いて見えるため非表示にする
 * （セクション末尾の「View All Works」ボタンに矢印があるので冗長。2026-07-21指摘）。 */

.tiptop-works-showcase__action,
.tiptop-news-action {
	margin: clamp(42px, 6vw, 68px) 0 0;
	text-align: center;
}

.front-blog-heading {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}

.front-blog-heading .front-blog-heading__title { margin: 0; }

.front-blog-heading > a {
	font-size: var(--tt-text-meta);
	letter-spacing: calc(0.06em + var(--tt-letter-add));
	text-decoration: none;
}

/* Aboutの1カラム化は 960px から（2026-08-10・オーナー指摘「Aboutの画像折り返し
 * メディアクエリが違う？」）。承認済みモックは _mockup/tiptop-current.css:764 の
 * @media (max-width: 960px) で .about__inner を1カラムに落とし、写真を
 * min(180px, 46vw) に縮める。実サイトは下の 781px でしか落としておらず、
 * 782〜960px（タブレット縦・小さめのノートPC）で2カラムのままだった——実測では
 * 900px幅で写真162px＋本文612pxまで痩せていた。PR #828 でヒーローを 960px へ
 * 直したのと同型の取りこぼし。781px 以下は既存の値（170px / 54vw・gap 28px）が
 * 後勝ちで残る。 */
@media (max-width: 960px) {
	.tiptop-about-summary__profile {
		grid-template-columns: 1fr;
	}

	.tiptop-about-summary__image {
		width: min(180px, 46vw);
	}
}

@media (max-width: 781px) {.tiptop-about-summary__profile,
.tiptop-about-stats {
		grid-template-columns: 1fr;
	}

	.tiptop-about-summary__profile {
		gap: 28px;
	}

	.tiptop-about-summary__image {
		width: min(170px, 54vw);
	}

	.tiptop-about-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tiptop-about-stats > div {
		min-height: 84px;
	}

}

@supports (height: 100svh) {
}

@supports (height: 100dvh) {
}

@media (max-width: 781px), (prefers-reduced-motion: reduce) {
}

/* Shared lower-page hero background owns the full section, never a duplicate image card. */
.archive-hero,
.page-hero,
.tiptop-service-hero {
	background-color: var(--tt-base-navy);
	background-position: center;
	background-size: cover;
}

/* Hero media contract: the veil exists only when a background image resolves. */
.archive-hero.has-hero-image::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(var(--tt-scene-veil) / calc(var(--tiptop-scene-overlay, .5) / .5 * 0.08)), rgb(var(--tt-scene-veil) / calc(var(--tiptop-scene-overlay, .5) / .5 * 0.68)));
}

.archive-hero.has-hero-image > * {
	position: relative;
	z-index: 1;
}

.tiptop-compact-hero.archive-hero.has-no-hero-image {
	background: none !important;
}

.tiptop-service-point__heading {
	display: grid;
	grid-template-columns: 38px auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

body.tiptop-standard-system .tiptop-service-point__mark {
	display: none;
}

.tiptop-service-point__mark {
	position: relative;
	display: block;
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
	border-radius: 44% 56% 51% 49%;
	opacity: .72;
	transform: rotate(11deg);
}

.tiptop-service-point__mark::before,
.tiptop-service-point__mark::after,
.tiptop-service-point__mark i {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid currentColor;
	border-radius: 58% 42% 46% 54%;
}

.tiptop-service-point__mark::after {
	inset: 10px 4px;
	border-width: 1px 0;
	border-radius: 50%;
	transform: rotate(58deg);
}

.tiptop-service-point__mark i {
	inset: 4px 11px;
	border-width: 0 1px;
	transform: rotate(-37deg);
}

.tiptop-service-point__number {
	font-family: var(--tt-font-display);
	font-size: var(--tt-text-numeral);
	line-height: 1;
	letter-spacing: calc(.04em + var(--tt-letter-add));
}

.tiptop-service-point__heading h3 {
	margin: 0;
	font-size: var(--tt-text-card);
	line-height: calc(1.65 * var(--tt-leading-scale));
}

.tiptop-service-point > p {
	margin: 0;
	color: var(--tt-base-muted);
	font-size: var(--tt-text-note);
	line-height: calc(2 * var(--tt-leading-scale));
}

@media (max-width: 781px) {
}

/* Header */
body.tiptop-standard-system .site-header {
	background: var(--tiptop-base);
}

html:not([data-tiptop-palette-tone="dark"]) .site-branding .custom-logo,
html:not([data-tiptop-palette-tone="dark"]) .site-branding__logo {
	filter: none;
}

html[data-tiptop-palette-tone="dark"] .site-branding .custom-logo,
html[data-tiptop-palette-tone="dark"] .site-branding__logo {
	filter: brightness(0) invert(1);
}

html:not([data-tiptop-palette-tone="dark"]) .site-footer__logo {
	filter: brightness(0) invert(1);
}

html[data-tiptop-palette-tone="dark"] .site-footer__logo {
	filter: none;
}/* P0b: フッターの「テキストリンク」hoverをヘッダーナビと同型（ink-fade）へ統一。
 * これが無いと color-palettes.css の generic .site-footer a:hover（link-hover）に落ち、
 * イマーシブのヘッダー(ink)とフッター(彩色)でホバー機構が食い違う（#4/#5/#6 の一因）。
 * SNSリンク(.site-social-links__link)とボタンは除外＝専用の共通ホバー(border/bg ink・opacityなし)を
 * 維持し、ヘッダーSNSと一致させる（opacity 0.62 がSNSアイコンに乗る不一致を防ぐ）。 */
body.tiptop-standard-system .site-footer a:not(.site-social-links__link):not(.button):not(.wp-block-button__link):not(.site-footer__logo-link):hover,
body.tiptop-standard-system .site-footer a:not(.site-social-links__link):not(.button):not(.wp-block-button__link):not(.site-footer__logo-link):focus-visible {
	color: inherit;
	opacity: 0.62;
}

body.tiptop-standard-system .site-branding__link:hover,
body.tiptop-standard-system .site-branding__link:focus-visible,
body.tiptop-standard-system .site-footer__logo-link:hover,
body.tiptop-standard-system .site-footer__logo-link:focus-visible {
	opacity: 0.62;
}

body[class*="tiptop-front-hero-type-"] .site-main--front .top .main-txt {
	position: relative;
	z-index: 2;
	width: var(--tt-width-base-normal);
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(120px, 18vh, 190px) 0 100px;
	background: transparent !important;
	color: var(--tt-base-ink) !important;
	text-align: center;
	animation: none !important;
}

body[class*="tiptop-front-hero-type-"] .site-main--front .top .main-txt h1 {
	max-width: 720px;
	margin: clamp(20px, 3vh, 34px) auto;
	font-size: clamp(2rem, min(4vw, 6vh), 4.5rem);
	font-weight: 400;
	letter-spacing: calc(0.12em + var(--tt-letter-add));
	line-height: calc(1.62 * var(--tt-leading-scale));
}

.tiptop-scene__action {
	margin-top: clamp(28px, 5vh, 52px);
}

/* Shared dimensions (min-width/min-height/padding/font-size) moved to
 * design-system.css's .button--secondary, .tiptop-outline-action rule
 * (Issue #645 Phase A-2). This rule keeps only what's specific to the
 * standalone (non-.button) usage. */
.tiptop-outline-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--tt-base-ink) var(--tt-tint-emphasis), transparent);
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	text-decoration: none;
}

.tiptop-scene-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: var(--tt-width-base-normal);
	min-height: 100svh;
	margin: 0 auto;
	padding: 120px 0;
}

.tiptop-scene-copy h2 {
	margin: 22px 0;
	font-size: var(--tt-text-section);
	font-weight: 400;
	letter-spacing: calc(0.12em + var(--tt-letter-add));
	line-height: calc(1.55 * var(--tt-leading-scale));
}

.tiptop-scene-copy > p:not(.hero__eyebrow) {
	color: var(--tt-base-paper-soft);
	line-height: calc(2.25 * var(--tt-leading-scale));
}

.site-main--front .intro-news .tiptop-news-item {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--tt-base-line);
	background: transparent;
}

.site-main--front .intro-news .tiptop-news-item:first-child {
	border-bottom: 0;
}

.site-main--front .intro-news .tiptop-news-item::after {
	content: none;
}

.site-main--front .intro-news .tiptop-news-item:hover {
	transform: none;
}

.site-main--front .intro-news .tiptop-news-item__link {
	display: grid;
	grid-template-columns: minmax(98px, 0.55fr) minmax(92px, 0.5fr) minmax(220px, 1.35fr) minmax(260px, 1.7fr) 32px;
	gap: var(--tt-space-5);
	align-items: center;
	min-height: 104px;
	padding: var(--tt-space-5) var(--tt-space-6);
	color: var(--tt-base-ink);
	text-decoration: none;
}

/* 標準モードの新着情報を詰める（2026-08-07・オーナー確定）。
 * 上の共有ルールは6カラムで、4列目と5列目にタイトルを跨がせている。5列目
 * （minmax(260px, 1.7fr)）がタイトルの短い行では丸ごと空白になり、横1200px級に
 * 引き伸ばされた原因だった（実測で501pxの空列）。標準はタイトルを1列に収め、
 * 残り幅を全部タイトルへ渡す。イマーシブはcontent-areaがnarrow(720px)で
 * 引き伸ばしが起きないため共有ルールのまま触らない。
 * 各行が別々のgridコンテナなので、日付/タグ/バッジ列はauto等の内容依存にせず
 * 固定幅にする——内容依存にすると行ごとに列幅が変わって左端が揃わなくなる。 */
body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__link {
	grid-template-columns: 98px 104px minmax(0, 1fr) 24px;
	min-height: 0;
	padding: var(--tt-space-5) var(--tt-space-2);
}

/* タイトルは列いっぱいの幅を持つが、別ルールのtext-align:centerが効いていて
 * 文字だけが列の中央に浮いていた（実機で列403px〜1086px幅に対し文字が813pxから開始）。
 * 日付・タグの直後から読み始められるよう左へ寄せる。 */
body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__title {
	grid-column: 3;
	text-align: left;
}

body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__arrow {
	grid-column: 4;
}

/* 見出し行：h2を左、「View All」を右上へ。Blogの.front-blog-headingと同じ型に
 * 揃える（実サイトはBlogが上の右寄せリンク・Newsが下の中央ボタンで型が割れていた）。
 * PHPは変更せず、content-areaのgrid配置だけで並べ替える——マークアップを動かすと
 * イマーシブ側の.tiptop-news-action（幅normal＋中央寄せ）にも影響するため。 */
body.tiptop-standard-system .site-main--front .intro-news .content-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"head action"
		"list list";
	/* 行間（見出し帯→リスト）はモックの48px（2026-08-11・Issue #868 のB-4）。
	 * モックは `.section-head` と `.news__list` の間が48pxで、実サイトはこのグリッドの
	 * row-gap 32px がそのまま距離になっていた（16px狭い）。列の24pxは変えない。
	 * **距離パスで見つけた差分**——見出しとリストはどちらも margin 0 なので、
	 * プロパティ比較では出ない型（`News → 日付` の距離として検出）。
	 * 全節のeyebrow実距離を測った時にこの節が漏れたのは、News節のラベルが
	 * `[class*="eyebrow"]` ではなく素の `<h2>` だったため（クラス名決め打ちの穴）。 */
	gap: var(--tt-space-7) var(--tt-space-5);
	align-items: end;
}

body.tiptop-standard-system .site-main--front .intro-news .content-area > .intro-news__title {
	grid-area: head;
	margin: 0;
	text-align: left;
}

body.tiptop-standard-system .site-main--front .intro-news .news-list {
	grid-area: list;
	/* front-home-lp-source.css の旧幅制限（860px固定）が head/action グリッド化後も
	 * 残っていて、リストだけ見出し・View All Newsの右端(1040px)まで届かず左寄りに見えていた
	 * （2026-08-14実測：list右端1285px、content-area右端1465px）。グリッドセルいっぱいに戻す。 */
	width: auto;
	margin: 0;
}

body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-action {
	grid-area: action;
	margin: 0;
	text-align: right;
}

/* Optional terms may be absent, so every child owns a fixed grid column. */
.site-main--front .intro-news .tiptop-news-item__date {
	grid-column: 1;
}

.site-main--front .intro-news .tiptop-news-item__terms {
	grid-column: 2;
}

.site-main--front .intro-news .tiptop-news-item__title {
	grid-column: 3 / 5;
}

.site-main--front .intro-news .tiptop-news-item__arrow {
	grid-column: 5;
}

/* 2026-07-28：背景tint hoverを撤去し、front-blog-cardと同じ下線hoverへ統一
 * （タイトルの下線はfront-ds-page-cleanup.cssの.tiptop-news-item__title-text）。 */
.site-main--front .intro-news .tiptop-news-item__link:focus-visible {
	outline: 2px solid var(--tt-base-paper);
	outline-offset: 3px;
}

.site-main--front .intro-news .tiptop-news-item__date,
.site-main--front .intro-news .tiptop-news-item__terms {
	color: var(--tt-base-muted);
	font-size: var(--tt-text-meta);
	line-height: var(--tt-leading-base);
}

.site-main--front .intro-news .tiptop-news-item__date {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.site-main--front .intro-news .tiptop-news-item__terms {
	display: inline-flex;
	justify-self: start;
	margin: 0;
	padding: var(--tt-space-1) var(--tt-space-3);
	border: 1px solid var(--tt-base-line);
	border-radius: var(--tt-radius-pill);
	color: var(--tt-base-paper-soft);
	line-height: var(--tt-leading-tight);
}

/* 標準モードのニュースタグをアクセントの薄塗りへ（2026-08-07）。アーカイブ側は
 * immersive-content-pages.css の同名クラスへ同じ配色を当てているが、トップページは
 * 上の (0,3,0) ルールが勝つため、そこを越える詳細度でここに置く。
 * 2026-08-10：形状もここで受ける。上の (0,3,0) ルールはモード非限定でイマーシブの
 * 中立アウトライン（1px枠）も担っているため、境界を動かさず標準だけ上書きする。
 * 承認済みモック（_mockup/tiptop-current.css の .news-row__tag）の実測は
 * padding 2px 12px・枠線なし・min-height 24px で高さ27.03px。実サイトは padding 4px 12px
 * ＋1px枠で33.03pxと6px高かった。**モックのトップにも分類タグはある**（`.news-row__tag`）
 * ので、消すのではなく形を合わせる。 */
body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__terms {
	min-height: 24px;
	padding: 2px 12px;
	border: 0;
	background: color-mix(in srgb, var(--tiptop-accent) var(--tt-tint-soft), var(--tiptop-base));
	color: var(--tiptop-accent);
}

.site-main--front .intro-news .tiptop-news-item__title,
.site-main--front .intro-news .news-item__title.tiptop-news-item__title {
	/* Beat later shared flex/stretch rules so clamping works without shifting one-line titles. */
	display: -webkit-box !important;
	overflow: hidden;
	align-self: center !important;
	min-height: 0 !important;
	margin: 0;
	color: var(--tt-base-ink);
	font-size: var(--tt-text-card);
	font-weight: 400;
	line-height: var(--tt-leading-base);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


@media (max-width: 1000px) {
	.site-main--front .intro-news .tiptop-news-item__link {
		grid-template-columns: 110px 96px minmax(180px, 1fr) 32px;
		gap: var(--tt-space-4);
	}
}

@media (max-width: 700px) {
	.site-main--front .intro-news .tiptop-news-item__link {
		grid-template-areas:
			"date terms terms"
			"title title arrow"
			"excerpt excerpt excerpt";
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--tt-space-3) var(--tt-space-4);
		min-height: 0;
		padding: var(--tt-space-5) var(--tt-space-4);
	}

	.site-main--front .intro-news .tiptop-news-item__date {
		grid-area: date;
	}

	.site-main--front .intro-news .tiptop-news-item__terms {
		grid-area: terms;
	}

	.site-main--front .intro-news .tiptop-news-item__title {
		grid-area: title;
	}

	.site-main--front .intro-news .tiptop-news-item__arrow {
		grid-area: arrow;
	}
}

.tiptop-work-detail__image {
	width: var(--tt-width-base-wide);
	margin: 0 auto clamp(48px, 7vw, 90px);
	overflow: hidden;
}

.tiptop-work-detail__image img {
	display: block;
	width: 100%;
	height: auto;
}

.tiptop-work-detail__header {
	width: var(--tt-width-base-wide);
	margin: 0 auto clamp(48px, 7vw, 90px);
	padding: clamp(72px, 10vw, 120px) 0 0;
}

.tiptop-work-detail__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 32px;
	color: var(--tt-base-paper-soft);
}

.tiptop-work-detail__body {
	width: var(--tiptop-post-detail-frame);
	max-width: none;
	margin: 0 auto;
	padding: clamp(48px, 7vw, 82px);
	background: var(--tiptop-post-detail-surface);
}

.tiptop-next-work {
	width: var(--tt-width-base-wide);
	margin: 0 auto;
	padding: clamp(60px, 9vw, 110px) 0;
	border-top: 1px solid var(--tiptop-post-detail-border);
}

.tiptop-next-work p {
	color: var(--tiptop-post-detail-muted);
	font-size: var(--tt-text-meta);
	letter-spacing: calc(0.16em + var(--tt-letter-add));
}

.tiptop-next-work a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	color: var(--tiptop-post-detail-text);
	font-size: var(--tt-text-note);
	text-decoration: none;
}

.tiptop-blog-featured {
	margin-bottom: clamp(70px, 9vw, 120px);
}

.tiptop-blog-featured .post-card {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.85fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: end;
}

.tiptop-blog-featured .post-card__image {
	aspect-ratio: 16 / 10;
}

.tiptop-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(52px, 7vw, 88px) clamp(24px, 4vw, 54px);
}

body.tiptop-standard-system .tiptop-post-detail-layout:not(.has-sidebar) {
	grid-template-columns: minmax(0, 1fr);
}

.tiptop-post-detail__header {
	width: 100%;
	/* タイトル/メタの左右幅をサムネ(.entry__image)・本文(__body)と同じ frame に揃える */
	max-width: var(--tiptop-post-detail-frame);
	margin: 0 auto clamp(48px, 7vw, 90px);
}

.tiptop-work-detail__header.tiptop-post-detail__header {
	width: var(--tt-width-base-wide);
	max-width: none;
	margin: 0 auto clamp(48px, 7vw, 90px);
}

/* 標準モードの詳細ページは、タイトル・メタと本文の間を罫線で区切る（2026-08-09・
 * 承認済みモック _mockup/tiptop-single.css:178）。実サイトは余白だけで離しており、
 * オーナー指摘「本文手前に罫線がない」の対象だった。
 * 実績詳細は標準モードだとヒーロー画像がヘッダーの中にあり（single-work.php:48-50）、
 * 罫線が画像の直下に来て意味が変わるため対象外にする。 */
/* 2026-08-10：新着詳細を除外した（オーナー指摘「新着詳細のサムネ上になぞの罫線がある」）。
 * ブログ詳細は承認済みモック（_mockup/tiptop-single.html の
 * .tiptop-post-detail__header）に罫線があるので**残す**。新着詳細のモック
 * （_mockup/tiptop-news-single.html）は .news-detail__meta に罫線を持たないので、
 * 実サイトだけサムネの上に1本余分に出ていた。実測で確認：ブログ詳細のモックは
 * bb=1px、新着詳細のモックは bb=0px。 */
body.tiptop-standard-system .tiptop-post-detail__header:not(.tiptop-work-detail__header):not(.tiptop-news-detail__header) {
	padding-bottom: var(--tt-space-6);
	border-bottom: 1px solid var(--tiptop-border);
	margin-bottom: var(--tt-space-7);
}

/* ヘッダーの相談ボタンとフッターのコピーライトを承認済みモックへ（2026-08-09・Issue #784）。
 * どちらも全ページ共通の部品なので、トップ限定でロードされる
 * front-page-adjustments-rules.css（inc/enqueue.php:67 の is_front_page() 配下）ではなく
 * ここに置く。最初はトップ側へ書いてしまい、ブログ一覧で効かないことを実測で見つけた。 */
body.tiptop-standard-system .site-header__cta {
	/* モックは 11.52px / w600 / 行間2.0倍。実サイトは 12.48px / w700 で大きく太かった。 */
	font-size: var(--tt-text-meta);
	font-weight: 600;
	line-height: calc(2 * var(--tt-leading-scale));
	/* 高さもモックへ（2026-08-10・オーナー指摘「相談ボタンの縦幅が太い」＝Issue #774）。
	 * モックは padding 0.36rem 0.864rem で高さ37px。実サイトは main.css:179 の
	 * min-height: 46px と padding 0.72rem 1.35rem で46pxあり、明らかに太かった。
	 * なおモックのこの寸法はタップ領域の推奨（44px）を下回る。モック準拠を優先した
	 * 結果なので、スマホで押しにくいと感じたらここを戻す。 */
	min-height: 0;
	padding: 0.36rem 0.864rem;
}

/* ボタンの寸法もモックへ（2026-08-10）。モックは padding 0.546rem 1.248rem で
 * 高さ45px。実サイトは min-height: 46px と padding 0.72rem 1.35rem で51pxだった。
 * 対象は .button のみ——.wp-block-button__link と .site-mobile-panel__cta は
 * モックに対応する要素がなく、比較で裏が取れないため触らない。 */
body.tiptop-standard-system .button {
	min-height: 0;
	padding: 0.546rem 1.248rem;
}

/* ヘッダーとフッターの内側幅をモックへ（2026-08-10・オーナー判断／2026-08-11に**トップ限定へ修正**）。
 * 当初「モックはどちらも1280px」と書いて全ページへ当てたが、**それはトップだけの値だった**。
 * 11ページ分のモックを機械的に測ると契約は2段階（1920pxで実測）：
 *   トップ（tiptop-current.html）    ヘッダー/フッター **1280px**
 *   下層10ページすべて              ヘッダー/本文/フッター **1440px**
 * 実サイトは `main.css:52-56` の `--tiptop-site-width`（1440px）が既に下層の
 * `.content-area` を1440pxにしており**そこは一致していた**のに、このルールが全ページの
 * ヘッダー/フッターだけを1280pxへ絞っていたため、下層で本文だけ160px広い状態になっていた。
 * `body.home` を足してトップだけに閉じる＝下層は `main.css` の1440pxがそのまま通る。
 * コピーライト行も同じ2段階に従わせる（既定は下の1440px側、トップはここで1280px）。 */
body.home.tiptop-standard-system .site-header__inner,
body.home.tiptop-standard-system .site-footer__inner,
body.home.tiptop-standard-system .site-footer__copyright {
	width: var(--tt-width-wide);
}

/* モバイルでも相談ボタンをヘッダーに残す（2026-08-10・375px幅でモックと突合）。
 * main.css が .site-nav / .site-header__cta / .site-social をまとめて隠しており、
 * 狭い画面では相談への導線がハンバーガーを開くまで見えなかった。承認済みモックは
 * 781px 以下で .site-nav と .site-social だけを隠し、CTAはヘッダーに残している。
 * モック側はハンバーガーを持たない静的HTMLなので「ロゴ＋CTA」だが、実サイトは
 * メニュー開閉が要るため「ロゴ＋CTA＋ハンバーガー」の並びになる。
 * 2026-08-10（Issue #834）：main.css 側の切替が 820px → 781px へ下がったので、
 * このルールが実際に効くのも 781px 以下だけになった（782〜820px では
 * そもそも隠されない）。上限は 820px のまま据え置く——ここを 781px に狭めても
 * 挙動は同じで、他の 820px ブロックとの見た目の対応が取りづらくなるだけ。 */
@media (max-width: 820px) {
	body.tiptop-standard-system .site-header__cta {
		display: inline-flex;
	}
}

/* コピーライト行をフッターのコンテナへ入れる（2026-08-10・Issue #781の①）。
 * モックは footer > .wrap > .site-footer__bottom の3層で、コピーライト行は
 * **他のフッター要素と同じコンテナ幅**に収まり、上に細い罫線が付く。
 * 実サイトはこの行だけ .site-footer__inner の外に置かれていて（footer.php:39）、
 * 幅の指定が無いため**全幅1905pxまで伸びていた**（1920px幅で実測。モックはトップ1280px）。
 * 幅の式は main.css:54 の .site-footer__inner と同じ形にして、標準の幅トークンを使う
 * ——`width` 直値だと狭い画面で画面外へはみ出すため。
 * 罫線は暗い面に乗る細い明色線なので、パレットに追従する color-mix で持つ
 * （モックの実測は rgba(255,255,255,0.16)。`--tiptop-contrast-surface-border` は
 *  パレットごとの不透明色で、フッターの背景 `--tiptop-contrast` とは別系統なので使わない）。 */
body.tiptop-standard-system .site-footer__copyright {
	/* 既定は下層の1440px側（`--tiptop-site-width`）。トップだけ上のルールが1280pxへ絞る
	 * ——モックの契約が2段階だから（2026-08-11に修正。当初は全ページ1280pxにしていた）。 */
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tiptop-site-width));
	margin-block: var(--tt-space-8) 0;
	margin-inline: auto;
	padding-top: var(--tt-space-5);
	border-top: 1px solid color-mix(in srgb, var(--tiptop-base) 16%, transparent);
	/* モックは欧文書体・11.52px・行間2.0倍・字間なし。実サイトは和文書体で
	 * 13.6px・行間2.3倍・字間0.04emと、大きく間延びしていた。 */
	font-family: var( --tiptop-font-latin );
	font-size: var(--tt-text-meta);
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: normal;
}

/* コピーライト行の左右余白は、狭い画面でも `.site-footer__inner` と同じ段階で切り替える
 * （2026-08-11）。`main.css`／`responsive-fixes.css` はコンテナ幅を3段階（44px→32px→20px）で
 * 持っているが、それらの選択子リストはモード非限定でイマーシブのコピーライト（全幅のまま）も
 * 巻き込むため、**同じ段階を標準スコープで写す**。写さないと 820px以下でフッター本体と
 * 12px、430px以下で24pxずれる（実測：700pxで 668 対 656）。 */
@media (max-width: 820px) {
	body.tiptop-standard-system .site-footer__copyright {
		width: min(calc(100% - var(--tt-gutter-tablet)), var(--tiptop-site-width));
	}
}

@media (max-width: 430px) {
	body.tiptop-standard-system .site-footer__copyright {
		width: min(calc(100% - var(--tt-gutter-mobile)), var(--tiptop-site-width));
	}
}

/* フッターの下余白をモックへ（2026-08-10・Issue #781の①）。モックは footer の
 * padding が 64px 0 24px で、コピーライト行の下は24px。実サイトは main.css:909 の
 * `padding: 64px 0` で下も64pxあり、40px余っていた。main.css 側はモード非限定で
 * イマーシブのフッターも持っているため、境界を動かさず標準だけ上書きする。 */
body.tiptop-standard-system .site-footer {
	padding-bottom: var(--tt-space-5);
}

/* 一覧ページの字間を承認済みモックへ（2026-08-09・Issue #784）。
 * モックはパンくずと日付が 0.06em、カテゴリのバッジが 0.04em。実サイトはパンくずが
 * 字間なし、日付とバッジが一律 0.05em で、モックの強弱と噛み合っていなかった。
 * 一覧はブログ・ニュース・実績・検索で同じ部品を使うので共通スコープに置く。 */
body.tiptop-standard-system .tiptop-breadcrumb__item {
	letter-spacing: 0.06em;
}

body.tiptop-standard-system .post-card__meta time {
	/* サイズもモックの 11.84px へ（実サイトは 11.52px）。 */
	font-size: var(--tt-text-meta);
	letter-spacing: 0.06em;
}

body.tiptop-standard-system .post-card__terms {
	letter-spacing: 0.04em;
}

body.tiptop-standard-system .post-card__title {
	/* モックのカードタイトルは字間なし。実サイトは 0.0392em が乗っていた。 */
	letter-spacing: normal;
}

/* ニュース一覧の行も同じ考え方で揃える（2026-08-09・Issue #784）。
 * ニュースはカードではなく行のレイアウトで、カードとは別クラスを使っている。 */
body.tiptop-standard-system .tiptop-news-item__title-text {
	letter-spacing: normal;
}

body.tiptop-standard-system .tiptop-news-item__date {
	letter-spacing: 0.06em;
}

body.tiptop-standard-system .tiptop-filter-bar__item {
	/* モックの行間は 2.0倍。実サイトは 1.95倍だった。 */
	line-height: calc(2 * var(--tt-leading-scale));
}

/* 絞り込みチップの文字色をモックへ（2026-08-10・オーナー指摘「実績一覧のカテゴリバッジの
 * テキストcolorが違う」）。モック（_mockup/tiptop-pages.css:67 の .filter-bar a）は
 * `--tiptop-muted`＝rgb(112,112,112) のグレーで、実サイトは rgb(17,17,17) の黒だった。
 * 枠線・padding・サイズ・行間は既に一致している（1920pxで実測）。
 * `:not(.is-current)` が要る：選択中のチップは黒地に白文字（design-system.css:826 が
 * `(0,2,0)` で持つ）で、こちらの `(0,2,1)` が同点以上に勝ってしまい白文字を潰すため。 */
body.tiptop-standard-system .tiptop-filter-bar__item:not(.is-current) {
	color: var(--tiptop-muted);
}

/* ヘッダーのSNSアイコンの色をモックへ（2026-08-10・オーナー指摘「ヘッダーのSNS
 * アイコン色が違う」）。モックはアイコンが `--tiptop-muted`、枠線が `--tiptop-border`
 * （rgb(228,228,228)）。実サイトはアイコンが rgb(17,17,17) で、枠線は
 * `main.css:148` の `color-mix(currentColor 38%)` により黒30%相当になっていた。
 * **ヘッダーに限定する**：`.site-social-links__link` はフッターにも実在し、あちらは
 * 濃色面で白系を保つ契約（footer反転ルール）。モード非限定やサイト全体に広げると
 * フッターのアイコンがグレーに落ちて背景へ溶ける。
 * ⚠ `.site-header__inner` を1つ挟んで `(0,4,1)` にしてある。挟まないと
 * `color-palettes.css:247` の `html[data-tiptop-palette] .site-header .site-social-links__link`
 * と**同じ `(0,3,1)` で並び、あちらが後ロードなので必ず負ける**（実測で確認済み）。
 * モード名を増やすのではなく既存の中間クラスで上げる作法に合わせる。 */
/* 寸法もモックへ（2026-08-10・オーナー判断「モックに寄せる。モックが正」）。
 * モックはリンク32×32・アイコン14×14。実サイトは `main.css:146` が36×36、
 * `main.css:162` が17×17で一段大きかった。**フッターは既に同じ値へ寄せてあり**
 * （`footer-brand-display.css:51-60`）、ヘッダーだけ取り残されていた形。 */
body.tiptop-standard-system .site-header .site-header__inner .site-social-links__link {
	width: 32px;
	height: 32px;
	border-color: var(--tiptop-border);
	color: var(--tiptop-muted);
}

body.tiptop-standard-system .site-header .site-header__inner .site-social-links__link svg {
	width: 14px;
	height: 14px;
}

/* スマホメニューのパネル内SNSも、ヘッダーと同じインク扱いにする（2026-08-16・
 * オーナー指摘「SNSの色が違反」）。モックは色が --tiptop-muted、枠線が
 * --tiptop-border。実サイトは front-utility-control-states.css の
 * html[data-tiptop-palette] .site-mobile-panel .site-social-links__link が
 * --tt-base-ink（#111111）を当てており、ヘッダーだけ正しくパネルが濃かった。
 * ⚠ 上のヘッダー用と同じ理由で .site-header を1つ挟んで (0,4,1) にしてある。
 * 挟まないと上記ルールと同詳細度で並び、あちらが後ロードなので必ず負ける。 */
body.tiptop-standard-system .site-header .site-mobile-panel .site-social-links__link {
	border-color: var(--tiptop-border);
	color: var(--tiptop-muted);
}

body.tiptop-standard-system .site-header .site-mobile-panel .site-social-links__link svg {
	width: 16px;
	height: 16px;
}

/* フッターメニューの太さ・行間・字間をモックへ（2026-08-09・Issue #772 / #784）。
 * オーナー指摘「フッターメニューが太字になってる」の対象。モックは w400 の細字で
 * 行間2.0倍・字間なし。実サイトは w600 で行間1.95倍・字間0.03emだった。
 * サイズ（12.48px）と色（白72%）は既にモックと一致しているので触らない。 */
body.tiptop-standard-system .site-footer .menu-item a {
	font-weight: 400;
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: normal;
}

/* #603項目12: Newsは他のpost-detail系より詰めた見出し下余白が正本
 * （news-page.cssのclamp(32px,5vw,48px)）。汎用ルールと同じ
 * 詳細度(0,1,0)だと読み込み順で汎用側が後勝ちしてしまうため、複合クラス
 * セレクタ(0,2,0)で確実に上書きする。width/max-widthは汎用ルールのまま。 */
.tiptop-news-detail__header.tiptop-post-detail__header {
	margin-bottom: clamp(32px, 5vw, 48px);
}

.tiptop-related-posts {
	width: 100%;
	max-width: var(--tiptop-post-detail-frame);
	margin: var(--tt-base-section-space) auto 0;
}

.tiptop-related-posts .tiptop-blog-list {
	display: grid;
	gap: var(--tt-space-4);
}

.tiptop-post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: clamp(70px, 9vw, 110px);
	padding-top: 28px;
	border-top: 1px solid var(--tiptop-post-detail-border);
}

/* No text-decoration reset existed anywhere for this (single-news.php's prev/next nav),
 * so the browser default underline painted through the link text (reported 2026-08-01,
 * same pattern as .tiptop-blog-card__link/.front-blog-card__link — see
 * standard-immersive-contract.md). */
.tiptop-post-navigation a {
	color: inherit;
	text-decoration: none;
}

/* ホバーが1つも指定されておらず、色も下線も変わらなかった（2026-08-12・Issue #913・
 * オーナー指摘）。承認済みモックは `.post-nav a:hover { color: var(--tiptop-accent) }`。
 * ラベル（← PREV）は自前で muted を持つのでモック同様そのまま。
 * 実績詳細の同じ役割（.tiptop-work-detail-nav__link）も同じ寄せ先に揃えてある。 */
.tiptop-post-navigation a:hover,
.tiptop-post-navigation a:focus-visible,
.tiptop-post-navigation a:hover .tiptop-post-navigation__title,
.tiptop-post-navigation a:focus-visible .tiptop-post-navigation__title {
	color: var(--tiptop-accent);
}

.tiptop-post-navigation > div:last-child {
	text-align: right;
}

/* 狭い画面ではページ送りを縦積みにする（2026-08-10・Issue #842）。
 * 承認済みモック _mockup/tiptop-shared.css:704 は 781px以下で .post-nav を
 * flex-direction: column にし、.post-nav__next の右寄せも解除する。実サイトは
 * 全幅で2列のままで、狭い画面では前後の記事タイトルが半分の幅に押し込まれていた。
 * gridをflexに作り替える必要はない——1列になれば同じ組みになる。
 * 上の2ルールはモード非限定でイマーシブにも効いているため、境界を足すのではなく
 * 標準スコープの上書きとして書く（イマーシブは現状維持）。 */
@media (max-width: 781px) {
	body.tiptop-standard-system .tiptop-post-navigation {
		grid-template-columns: minmax(0, 1fr);
	}

	body.tiptop-standard-system .tiptop-post-navigation > div:last-child {
		text-align: left;
	}
}

/* 新着詳細の前後ナビを承認済みモックの .post-nav へ揃える（2026-08-10・Issue #773）。
 * モック（_mockup/tiptop-shared.css:619）の実測は、外枠が margin-top 64px・
 * padding-top 24px・罫線 1px --tiptop-border・gap 24px・基準 0.84rem、
 * リンクが grid（gap 4px・max-width 22em）、ラベルが Jost 0.7rem w400 字間0.1em muted、
 * タイトルが和文 0.84rem w400 行間2.0倍。**実績詳細（works-page.css の .post-nav 相当）と
 * 同じ契約**だが、あちらは works ページ限定のCSSなのでここには書けない（enqueueが別）。
 * 値を変えるときは両方を同時に直すこと。
 * 上の3ルール（外枠・リンクの下線消し・右寄せ）はモード非限定でイマーシブにも効いて
 * いるため、境界を動かさず標準スコープの上書きとして書く（イマーシブは現状維持）。
 * なお**マークアップの変更（文字ラベル化）は両モードに出る**——single-news.php は
 * モードで分岐していない。実績詳細も同じ扱いで先にラベル化されている。 */
body.tiptop-standard-system .tiptop-post-navigation {
	gap: var(--tt-space-5);
	margin-top: var(--tt-space-8);
	padding-top: var(--tt-space-5);
	border-top-color: var(--tiptop-border);
	font-size: var(--tt-text-note);
}

body.tiptop-standard-system .tiptop-post-navigation a {
	display: grid;
	gap: var(--tt-space-1);
	max-width: 22em;
}

body.tiptop-standard-system .tiptop-post-navigation > div:last-child a {
	margin-left: auto;
}

body.tiptop-standard-system .tiptop-post-navigation__label {
	color: var(--tiptop-muted);
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-meta);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: calc(2 * var(--tt-leading-scale));
}

body.tiptop-standard-system .tiptop-post-navigation__title {
	font-weight: 400;
	line-height: calc(2 * var(--tt-leading-scale));
}/* Fixed pages and contact */
body.tiptop-standard-system .tiptop-page--standard > .content-area {
	padding-top: var(--tt-base-section-space);
	padding-bottom: var(--tt-base-section-space);
}

/* 標準モードの節リズム統一（2026-08-07）。
 * ニュース（news-page.css）と検索結果（同ファイル .tiptop-search-results）は
 * 「ヒーロー直後だけ頭の余白を詰める」旧方針で上下非対称だった（news 72/120・search 92/112）。
 * 承認済みモックはヒーロー96px＋以降112pxの一定リズムなので、標準モードは詰めずに揃える。
 * イマーシブは既存値のまま（このルールは標準モード限定）。 */
body.tiptop-standard-system .tiptop-news-page__content,
body.tiptop-standard-system .tiptop-news-detail-page__content,
body.tiptop-standard-system .tiptop-search-results {
	padding-top: var(--tt-space-section);
	padding-bottom: var(--tt-space-section);
}

body.tiptop-standard-system .tiptop-archive-page > .content-area {
	padding-top: var(--tt-base-section-space);
	padding-bottom: var(--tt-base-section-space);
}

/* Search and 404 */
.tiptop-search-hero__inner .search-form {
	max-width: 600px;
	margin-top: 40px;
}

/* 検索フォームの寸法をモックへ（2026-08-11・Issue #769）。モックの契約は
 * `_mockup/tiptop-shared.css:412` の `.search-form`（グリッドの右列 **44px**・
 * 入力欄 padding `0.7em 0.2em`・アイコン17px）＋ `tiptop-pages.css:468` の
 * `.search-hero__form`（**max-width 30em**＝441.6px・margin-top 24px）。
 * 実サイトは右列52px・入力欄が高さ52px固定・アイコン20px・幅600px・上余白40pxだった。
 * 上のルールと `front-utility-control-states.css` の共有ルールはどちらも
 * モード非限定またはイマーシブを含む選択子リストなので、**ヘッダーの検索（モックに存在
 * しない）とイマーシブを動かさないよう、モックがある検索結果と404だけに閉じて上書きする**。
 * ⚠ `!important` は共有ルール側が `grid-template-columns` と `height` を !important で
 * 敷いているため、それを打ち消す用途に限って使う（詳細度だけでは勝てない既知の例外）。 */
/* ⚠ 中間クラス（`.tiptop-search-hero` / `.tiptop-404-page__inner`）を1つ挟んで `(0,4,1)` に
 * してある。挟まないと共有ルール側と**同じ `(0,3,1)` かつ両方 !important** になり、
 * 後ロードの `front-utility-control-states.css` に必ず負ける（実測で確認）。
 * `max-width` を `em` で持つので**フォーム自身の font-size をモックへ揃える**のも必須：
 * モックのフォームは body の 0.92rem（14.72px）を継承し 30em＝441.6px になるが、
 * 実サイトは 16px のままで 30em＝480px と38px広くなる（今日ページ送りでも踏んだ同型）。 */
body.tiptop-standard-system .tiptop-search-hero .tiptop-search-hero__inner .search-form {
	max-width: 30em;
	margin-top: var(--tt-space-5);
	font-size: var(--tt-text-body);
}

body.tiptop-standard-system .tiptop-search-hero .tiptop-search-hero__inner .search-form,
body.tiptop-standard-system .tiptop-404-page .tiptop-404-page__inner .search-form {
	grid-template-columns: minmax(0, 1fr) 44px !important;
}

body.tiptop-standard-system .tiptop-search-hero .tiptop-search-hero__inner .search-field,
body.tiptop-standard-system .tiptop-404-page .tiptop-404-page__inner .search-field {
	height: auto !important;
	min-height: 0 !important;
	padding: 0.7em 0.2em;
}

/* ボタンの寸法も解除する。**フォームの高さを決めているのはボタン**で、52px固定のままだと
 * 入力欄を `height: auto` にしてもグリッドの `align-items: stretch` で52pxへ引き伸ばされる
 * （モックは40.7px）。モックのボタンは幅がグリッドの列（44px）・高さは行に合わせ・
 * padding は `1px 6px`。 */
body.tiptop-standard-system .tiptop-search-hero .tiptop-search-hero__inner .search-submit,
body.tiptop-standard-system .tiptop-404-page .tiptop-404-page__inner .search-submit {
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 1px 6px !important;
}

body.tiptop-standard-system .tiptop-search-hero .tiptop-search-hero__inner .search-submit svg,
body.tiptop-standard-system .tiptop-404-page .tiptop-404-page__inner .search-submit svg {
	width: 17px !important;
	height: 17px !important;
}

.tiptop-search-results {
	/* 常にヒーロー直後に来る唯一の用途（search.php）のため、本文用フルサイズ
	 * ではなくblog/works同様の縮小値を使う（news/serviceで見つけたのと同型の
	 * 「ヒーロー直後だけ頭の余白が過大」バグの予防）。 */
	padding-top: clamp(52px, 7vw, 92px);
	padding-bottom: var(--tt-base-section-space);
}

.tiptop-search-grid {
	/* blog/worksの一覧カードと同じ2列に統一（あやちゃん指摘：検索結果だけ
	 * 3列で密度が違い、一覧と別物に見えていた）。 */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(52px, 7vw, 92px) clamp(24px, 4vw, 54px);
}

.tiptop-search-card .post-card__title,
.tiptop-search-card .post-card__title a,
.tiptop-search-card .post-card__excerpt {
	color: var(--tt-base-ink);
}

/* あやちゃん指摘：検索結果カードだけ専用の画像比率指定がなく、main.css
 * の素の基定値(16/9)へ偶然フォールバックしていただけだった。front-blog-card
 * と同じ16/9を明示化し、基定値が将来変わっても検索結果だけ意図せず
 * 追従してしまわないようにする。 */
.tiptop-search-card .post-card__image {
	aspect-ratio: 16 / 9;
}

.tiptop-404-page {
	position: relative;
	display: grid;
	place-items: center;
	min-height: calc(100svh - 68px);
	background: var(--tiptop-base);
	text-align: center;
}

/* 2026-08-10：寄せる対象を ::after から eyebrow自身へ移した（上のヒーローと同じ理由。
 * eyebrow が width:fit-content になったので ::after 側では中央に寄らない）。 */
body.tiptop-standard-system .tiptop-404-page .section__eyebrow {
	margin-inline: auto;
}

.tiptop-404-page::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(var(--tt-scene-veil) / calc(var(--tiptop-scene-overlay, .5) / .5 * 0.08)), rgb(var(--tt-scene-veil) / calc(var(--tiptop-scene-overlay, .5) / .5 * 0.68)));
}

.tiptop-404-page__inner {
	position: relative;
	z-index: 1;
	width: var(--tt-width-base-narrow);
	padding: 120px 0 90px;
}

.tiptop-404-page__code {
	margin: 0;
	color: color-mix(in srgb, var(--tt-base-ink) 16%, transparent);
	font-family: var(--tt-font-heading);
	font-size: var(--tt-text-numeral-xl);
	font-weight: 400;
	letter-spacing: calc(-0.08em + var(--tt-letter-add));
	line-height: 0.72;
}

.tiptop-404-page h1 {
	color: var(--tt-base-ink);
	font-size: var(--tt-text-title);
	font-weight: 400;
}

.tiptop-404-page__search {
	margin-top: 46px;
}

/* 標準モードの404（2026-08-08・モック移行）。
 * 標準モードではこのページは既に白・画像なし・波紋レイヤーなしで描かれているため
 * （実測確認済み）、2026-07-29の「404のヒーローは波紋を出す」判断＝イマーシブ側の話とは
 * 衝突しない。数字は主役にせず薄いグレーの見出しとして置き、行き先は検索欄とボタンの2つに絞る。 */
body.tiptop-standard-system .tiptop-404-page__inner {
	padding-block: var(--tt-space-section);
}

body.tiptop-standard-system .tiptop-404-page__code {
	color: color-mix(in srgb, var(--tiptop-contrast) 18%, var(--tiptop-base));
	font-size: var(--tt-text-numeral-xl);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1;
}

body.tiptop-standard-system .tiptop-404-page h1 {
	font-size: var(--tt-text-title);
	font-weight: 700;
	color: var(--tiptop-contrast);
}

/* eyebrowの「Lost in the blue」は紺背景を前提にした文言なので、白い標準モードでは出さない
 * （文言そのものを変えるならPHPのモード分岐が必要。今回はCSSで隠すだけに留めている）。 */
body.tiptop-standard-system .tiptop-404-page .section__eyebrow {
	display: none;
}


@media (max-width: 1000px) {
}

@media (max-width: 781px) {
	:root {
		--tt-width-base-wide: min(100% - var(--tt-gutter-tablet), 1280px);
		--tt-width-base-normal: min(100% - var(--tt-gutter-tablet), 1040px);
		--tt-width-base-narrow: min(100% - var(--tt-gutter-tablet), 720px);
		--tt-base-section-space: clamp(72px, 18vw, 110px);
	}

.tiptop-scene-copy {
		min-height: auto;
	}

body[class*="tiptop-front-hero-type-"] .site-main--front .top .main-txt {
		width: min(100% - 40px, 680px);
		padding: 128px 0 96px;
	}

	body[class*="tiptop-front-hero-type-"] .site-main--front .top .main-txt h1 {
		/* 承認済みモックは可変を段の clamp() に集約するため、モバイル専用の文字サイズ上書きは置かない。 */
		line-height: calc(1.65 * var(--tt-leading-scale));
	}

	.tiptop-scene-copy {
		width: min(100% - 40px, 680px);
		padding: 110px 0;
	}

.tiptop-blog-grid,
.tiptop-search-grid {
		grid-template-columns: 1fr !important;
	}

	.tiptop-work-detail__body,
	.tiptop-work-detail__header,
	.tiptop-work-detail__image,
	.tiptop-next-work {
		width: min(100% - var(--tt-gutter-tablet), 1040px);
	}
}


/* Keep the approved front-page layer last in the cascade. */
body[class*="tiptop-front-hero-type-"] .site-main--front .top .main-txt h1 {
	max-width: 760px;
	font-size: var(--tt-text-hero);
}

.archive-hero,
.page-hero,
.tiptop-service-hero {
	background-color: var(--tt-base-navy) !important;
	background-position: center !important;
	background-size: cover !important;
}

.site-main--front .intro-services .card-grid {
	width: 100%;
	border-top: 1px solid var(--tt-base-line);
}

.site-main--front .intro-services .tiptop-service-point {
	min-height: 220px;
	padding: 30px clamp(24px, 3vw, 48px) 8px;
	border-right: 0;
}

.site-main--front .intro-services .tiptop-service-point + .tiptop-service-point {
	border-left: 1px solid var(--tt-base-line);
}

.site-main--front .intro-services .tiptop-service-point::before {
	display: none;
}

@media (max-width: 781px) {
}

/* ============================================================
   標準モードの下層ページ本文（2026-08-08・承認済みモックへの移行）
   ブロックエディタで書いた本文が、見出し・箇条書き・表・引用・囲みまで
   同じ言語で出るようにする。面は増やさず罫線と余白で構造を示す。
   固定ページ・サービス・新着詳細・実績詳細で同じ本文型を共有する。
   本文のタイポグラフィと部品は .tiptop-contact-entry（お問い合わせ）を
   対象外にして、フォームの体裁を壊さない。
   イマーシブは対象外（未依頼）。
   ============================================================ */

body.tiptop-standard-system .tiptop-page-entry .entry__content h2,
body.tiptop-standard-system .tiptop-news-detail__body h2,
body.tiptop-standard-system .tiptop-work-detail__body h2 {
	margin-top: var(--tt-space-8);
	margin-bottom: var(--tt-space-4);
	padding-bottom: var(--tt-space-3);
	border-bottom: 1px solid var(--tiptop-border);
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-heading);
	font-weight: 700;
	line-height: 1.7;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content h3,
body.tiptop-standard-system .tiptop-news-detail__body h3,
body.tiptop-standard-system .tiptop-work-detail__body h3 {
	margin-top: var(--tt-space-7);
	margin-bottom: var(--tt-space-3);
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-subheading);
	font-weight: 700;
	/* モックのh3は行間を本文と同じ2.05のまま使う（実サイトは1.5で詰まっていた）。 */
	line-height: 2.05;
}

/* 本文の文字サイズと行間を下層型で統一する。 */
body.tiptop-standard-system .tiptop-page-entry .entry__content,
body.tiptop-standard-system .tiptop-news-detail__body,
body.tiptop-standard-system .tiptop-work-detail__body {
	font-size: var(--tt-text-body);
	line-height: 2.05;
	/* 測度をモックへ（2026-08-09）。実サイトは --tiptop-text-width の720pxで、
	 * モック（本文0.92remの42文字＝618px）より1行あたり5文字ほど長かった。
	 * 42emを直接書かずトークンを使うのは、em が継承font-sizeで解決されて
	 * 要素ごとに値が割れるのを避けるため（--tt-measure-reading の定義参照）。 */
	max-width: var(--tt-measure-reading);
	margin-inline: auto;
}

/* main.css と投稿種別CSSの段落への直接指定を打ち消し、本文コンテナの値を継承する。
 * 2026-08-11（Issue #768）：**ブログ詳細を4種目として追加**した。#740 で3種を直したとき
 * ブログ詳細（`.single-post .tiptop-post-detail__body`）だけ対象外にしていた残り。
 * 実測は段落だけ 15.2px / 行間31.16px で、**同じ本文コンテナが 14.72px / 29.44px**という
 * ねじれた状態だった（モックは段落もコンテナと同値）。原因は `blog-page.css:489` の
 * `.single-post .entry__content p` が 0.95rem を直接当てていること。
 * ブログ詳細のコンテナ自身は既にモックと一致しているので、**継承させるだけで揃う**。
 * h2の「上罫線」契約と本文測度（618.24px）は #768 の指示どおり触らない。 */
body.tiptop-standard-system .tiptop-page-entry .entry__content p,
body.tiptop-standard-system .tiptop-news-detail__body p,
body.tiptop-standard-system .tiptop-work-detail__body p,
/* ⚠ `.single-post` は**body自身に付くクラス**なので、スペースを入れて子孫として書くと
 * 一致しない（最初そう書いて空振りした）。標準スコープのクラスと**複合**（スペース無しで
 * 連結）して書くのが正しい——同ファイルの他のブログ詳細ルールと同じ形。 */
body.tiptop-standard-system.single-post .tiptop-post-detail__body p {
	font-size: inherit;
	line-height: inherit;
}

/* 詳細articleの縦余白（2026-08-09・実測）。標準モードは外側の節が
 * 112pxの縦リズムを持つため、旧 `.entry` 由来の86pxと
 * `.content-layout .entry` 由来の96pxを対象ページだけで打ち消す。
 * ブログ詳細と実績詳細は対象外。 */
body.tiptop-standard-system .tiptop-page-entry,
body.tiptop-standard-system .tiptop-contact-entry,
body.tiptop-standard-system .tiptop-news-detail {
	padding-block: 0;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content > :first-child,
body.tiptop-standard-system .tiptop-news-detail__body > :first-child,
body.tiptop-standard-system .tiptop-work-detail__body > :first-child {
	margin-top: 0;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content > :last-child,
body.tiptop-standard-system .tiptop-news-detail__body > :last-child,
body.tiptop-standard-system .tiptop-work-detail__body > :last-child {
	margin-bottom: 0;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content ul,
body.tiptop-standard-system .tiptop-page-entry .entry__content ol,
body.tiptop-standard-system .tiptop-news-detail__body ul,
body.tiptop-standard-system .tiptop-news-detail__body ol,
body.tiptop-standard-system .tiptop-work-detail__body ul,
body.tiptop-standard-system .tiptop-work-detail__body ol {
	padding-left: 1.35em;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content li + li,
body.tiptop-standard-system .tiptop-news-detail__body li + li,
body.tiptop-standard-system .tiptop-work-detail__body li + li {
	margin-top: var(--tt-space-2);
}

/* 2026-08-10（オーナー指摘「記事内引用のスタイルが違う」）：**ブログ詳細だけこの契約から
 * 漏れていた。** ブログ本文は `.tiptop-post-detail__body` で、ここに無かったため
 * `main.css:1395` の `.entry__content blockquote`（枠線が黒2px＋背景が薄グレー面）が
 * 当たっていた。モック（`_mockup/tiptop-shared.css:544` の `.entry-body blockquote`）は
 * **枠線が `--tiptop-border` の2px・背景なし・文字は muted・0.88rem** で、この契約と同値。
 * 背景は明示的に消す必要がある——`main.css` 側が `background: var(--tiptop-surface)` を
 * 当てており、この契約は背景を宣言していなかったため残ってしまう。 */
body.tiptop-standard-system .tiptop-page-entry .entry__content blockquote,
body.tiptop-standard-system .tiptop-post-detail__body blockquote,
body.tiptop-standard-system .tiptop-news-detail__body blockquote,
body.tiptop-standard-system .tiptop-work-detail__body blockquote {
	margin-inline: 0;
	padding-left: var(--tt-space-5);
	border-left: 2px solid var(--tiptop-border);
	background: none;
	color: var(--tiptop-muted);
	font-size: var(--tt-text-note);
}

body.tiptop-standard-system .tiptop-page-entry .entry__content table,
body.tiptop-standard-system .tiptop-news-detail__body table,
body.tiptop-standard-system .tiptop-work-detail__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--tt-text-note);
}

body.tiptop-standard-system .tiptop-page-entry .entry__content th,
body.tiptop-standard-system .tiptop-page-entry .entry__content td,
body.tiptop-standard-system .tiptop-news-detail__body th,
body.tiptop-standard-system .tiptop-news-detail__body td,
body.tiptop-standard-system .tiptop-work-detail__body th,
body.tiptop-standard-system .tiptop-work-detail__body td {
	padding: var(--tt-space-3) var(--tt-space-4);
	border-bottom: 1px solid var(--tiptop-border);
	text-align: left;
	vertical-align: top;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content thead th,
body.tiptop-standard-system .tiptop-news-detail__body thead th,
body.tiptop-standard-system .tiptop-work-detail__body thead th {
	border-bottom: 1px solid var(--tiptop-contrast);
	color: var(--tiptop-contrast);
	font-weight: 700;
	white-space: nowrap;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content figure img,
body.tiptop-standard-system .tiptop-news-detail__body figure img,
body.tiptop-standard-system .tiptop-work-detail__body figure img {
	border-radius: var(--tt-radius-md);
}

body.tiptop-standard-system .tiptop-page-entry .entry__content figcaption,
body.tiptop-standard-system .tiptop-news-detail__body figcaption,
body.tiptop-standard-system .tiptop-work-detail__body figcaption {
	margin-top: var(--tt-space-2);
	color: var(--tiptop-muted);
	font-size: var(--tt-text-meta);
}

/* 検索結果の種別（投稿タイプ名）は、他ページの分類バッジと同じ薄いピルにする。
 * 検索結果は種別が混ざるので、アクセント色ではなく中立のグレーを使う。 */
body.tiptop-standard-system .tiptop-search-card .post-card__meta > span:first-child {
	display: inline-flex;
	align-items: center;
	padding: 0.18em 0.8em;
	border-radius: var(--tt-radius-pill);
	background: var(--tiptop-surface);
	color: var(--tiptop-muted);
	font-size: var(--tt-text-meta);
	/* 字間はモックの 0.04em（2026-08-10・Issue #784）。モック側の実体は
	 * `.badge badge--quiet`（`_mockup/tiptop-search.html:60`）で、`.badge` の 0.04em を持つ。
	 * 実サイトはこの span に指定が無く、`.post-card__meta` の 0.05em を継承して
	 * 0.576px になっていた（モックは 0.4608px）。他の項目は既に全部一致している。 */
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	line-height: 1.9;
}

/* 標準モード404の行き先（2026-08-09・モックへ）。
 * モックは「検索欄 → トップへ戻るボタン」の順で、検索欄は26em幅、ボタンは塗り。
 * 実サイトは順序が逆・検索欄が590pxまで伸び・ボタンがアウトラインだった。
 * ボタンを塗りにするのは .button--secondary のアウトライン契約を404だけ上書きする
 * **意図的な例外**：このページではトップへ戻る導線が主役なので主ボタン扱いにする。 */
body.tiptop-standard-system .tiptop-404-page__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.tiptop-standard-system .tiptop-404-page__search {
	order: 1;
	width: min(26em, 100%);
	margin-top: var(--tt-space-7);
}

body.tiptop-standard-system .tiptop-404-page__inner > p:last-of-type {
	order: 2;
	margin-top: var(--tt-space-6);
}

body.tiptop-standard-system .tiptop-404-page .button--secondary {
	border-color: var(--tiptop-button-bg, var(--tiptop-contrast));
	background: var(--tiptop-button-bg, var(--tiptop-contrast));
	color: var(--tiptop-button-text, var(--tiptop-base));
}

body.tiptop-standard-system .tiptop-404-page .button--secondary:hover,
body.tiptop-standard-system .tiptop-404-page .button--secondary:focus-visible {
	border-color: var(--tiptop-button-hover-bg, var(--tiptop-accent));
	background: var(--tiptop-button-hover-bg, var(--tiptop-accent));
	color: var(--tiptop-button-hover-text, var(--tiptop-base));
}

/* 検索結果カードの本文（2026-08-09）。抜粋が本文色＋行間2.42で重かった。 */
body.tiptop-standard-system .tiptop-search-grid {
	font-size: var(--tt-text-body);
	line-height: 2;
}

body.tiptop-standard-system .tiptop-search-card .post-card__title {
	font-size: var(--tt-text-card);
	line-height: 1.7;
}

body.tiptop-standard-system .tiptop-search-card .post-card__excerpt {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-note);
	line-height: 2;
}

body.tiptop-standard-system .tiptop-search-card time {
	font-weight: 400;
	line-height: 2;
}

/* トップページの残差（2026-08-09・総当たり実測）。
 * 「完全にモックと同じにして」で作り込んだつもりだったが、当時も代表要素しか
 * 見ていなかったため行間と字間が残っていた。 */

/* ヒーローのリード：行間2.36→2.0、字間は共通の --tt-letter-add 分を外す
 * （見出しで字間トークンを外したのと同じ判断）。 */
body.tiptop-standard-system .tiptop-standard-hero__lead {
	letter-spacing: normal;
	line-height: 2;
}

/* トップのNEWS行タイトル：16px/400/行間2.3 → モックの 0.94rem/500/1.8。
 * 一覧ページ側（news-page.css）と同じ調子に揃える。 */
body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__title {
	font-size: var(--tt-text-card);
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.8;
}

/* 一覧へ戻るボタンの文字を承認済みモックへ（2026-08-09・Issue #784）。
 * モックは 12.48px / w600 / 行間2.0倍で、404の戻るボタンと同じ寸法。
 * 実サイトは 10.72px / w400 / 1.95倍と小さかった。書体は触らない——モック側の
 * ボタンは英字ラベルで欧文が当たっているだけで、実サイトのラベルは和文のため。 */
body.tiptop-standard-system .tiptop-outline-action {
	font-size: var(--tt-text-label);
	font-weight: 600;
	line-height: calc(2 * var(--tt-leading-scale));
	/* 余白もモックのボタンと同じに（2026-08-10）。モックは高さ45px。実サイトは
	 * padding 10px/20px で48pxあった。.button クラスを持たないので個別に指定する。 */
	padding: 0.546rem 1.248rem;
}

/* 本文の強調を承認済みモックの太さへ（2026-08-10・オーナー判断）。
 * モックの strong はすべて w700。実サイトは w900 で、これはモックが一度も使って
 * いない太さだった（12ページを突合したとき、実サイトにだけある太さとして
 * 300 / 650 / 800 / 900 を洗い出している）。
 * なお機械比較はこの箇所で「w400へ」と出していたが誤検出だった——モック側は
 * リンク（a）で、実サイトは見出し内の strong。テキストが同じだけの別要素で、
 * そのまま従っていたら強調が消えていた。 */
body.tiptop-standard-system .entry__content strong,
body.tiptop-standard-system .tiptop-page-content strong {
	font-weight: 700;
}

/* Issue #917：標準の下層ページはモックの .wrap と同じ44px総ガターを全幅で使う。
 * tablet/mobileトークン自体は他用途があるため変更せず、下層の外枠だけdesktopへ固定する。
 * トップは body.home で除外し、既存の clamp(40px, 8vw, 144px) 契約を維持する。 */
body.tiptop-standard-system:not(.home) .site :where(
	.site-header__inner,
	.site-footer__inner,
	.site-footer__copyright,
	.site-main .content-area,
	.site-main .tiptop-service-wrap
) {
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tiptop-site-width));
}

/* center: 画像を上に、文章を中央寄せ */
.tiptop-standard-hero--center .tiptop-standard-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.tiptop-standard-hero--center .tiptop-standard-hero__figure {
	order: -1;
	width: min(100%, 640px);
	aspect-ratio: 4 / 3;
	margin: 0 0 32px;
}

.tiptop-standard-hero--center .tiptop-standard-hero__content {
	margin: 0 auto;
}

.tiptop-standard-hero--center .hero__eyebrow {
	margin-inline: auto;
}

.tiptop-standard-hero--center .tiptop-standard-hero__lead {
	margin-inline: auto;
}

/* minimal: 画像を出さず、余白と見出しだけ */
.tiptop-standard-hero--minimal .tiptop-standard-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	min-height: clamp(480px, 60svh, 680px);
}

.tiptop-standard-hero--minimal .tiptop-standard-hero__figure {
	display: none;
}

.tiptop-standard-hero--minimal .tiptop-standard-hero__content {
	margin: 0 auto;
	text-align: center;
	max-width: 920px;
}

.tiptop-standard-hero--minimal .hero__eyebrow {
	margin-inline: auto;
}

.tiptop-standard-hero--minimal .tiptop-standard-hero__lead {
	margin: 24px auto 0;
}

/* minimal_background: minimalと同じ余白レイアウトに、画像を全面背景として敷く */
.tiptop-standard-hero--minimal_background {
	position: relative;
	isolation: isolate;
}

.tiptop-standard-hero--minimal_background .tiptop-standard-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	min-height: clamp(480px, 62svh, 680px);
	align-items: center;
}

.tiptop-standard-hero--minimal_background .tiptop-standard-hero__figure {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.tiptop-standard-hero--minimal_background .tiptop-standard-hero__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tiptop-standard-hero--minimal_background .tiptop-standard-hero__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(34, 34, 34, calc(var(--tiptop-hero-overlay, 0.46) * 0.6)), rgba(34, 34, 34, calc(var(--tiptop-hero-overlay, 0.46) * 1.3)));
}

.tiptop-standard-hero--minimal_background .tiptop-standard-hero__content {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	text-align: center;
	max-width: 920px;
}

/* html[data-tiptop-palette] h1（color-palettes.css）の詳細度(0,1,2)に、
   同じ (0,1,1) の .tiptop-standard-hero--minimal_background h1 だけでは勝てず
   黒文字のまま埋もれていた（実機確認で発覚）。同じ属性セレクタを重ねて詳細度で上回る。 */
html[data-tiptop-palette] .tiptop-standard-hero--minimal_background h1 {
	color: #ffffff;
}

/* .hero__eyebrow は front-page-adjustments-rules.css の
   body.tiptop-standard-system .site-main--front .tiptop-front-content .hero__eyebrow
   （詳細度 0,4,1）がさらに強いため、同じ祖先チェーンを重ねて詳細度で上回る
   （実機確認で発覚。この codebase の既存の詳細度回避パターンを踏襲）。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .tiptop-standard-hero--minimal_background .hero__eyebrow {
	color: #ffffff;
}

.tiptop-standard-hero--minimal_background .hero__eyebrow {
	margin-inline: auto;
}

.tiptop-standard-hero--minimal_background .hero__eyebrow::after {
	background: #ffffff;
}

.tiptop-standard-hero--minimal_background .tiptop-standard-hero__lead {
	margin: 24px auto 0;
	color: rgba(255, 255, 255, 0.82);
}

/* band: 画像なし。全幅を淡色の帯にして、上に罫線を引く（モック .page-hero--band 準拠） */
.tiptop-standard-hero--band {
	background: var(--tiptop-surface);
	border-top: 1px solid var(--tiptop-border);
}

.tiptop-standard-hero--band .tiptop-standard-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	text-align: center;
}

.tiptop-standard-hero--band .tiptop-standard-hero__figure {
	display: none;
}

.tiptop-standard-hero--band .tiptop-standard-hero__content {
	max-width: 760px;
	margin-inline: auto;
}

.tiptop-standard-hero--band .hero__eyebrow {
	margin-inline: auto;
}

/* リードは中央寄せ＋下48px（モック .page-hero--band .page-hero__lead の
   `margin: 0 auto var(--tt-space-7)` 相当）。実サイトは上マージンをリード側で
   持っているため、上24px／下48px と書く。下は .tiptop-standard-hero__action の
   上32pxと相殺され、モックと同じ48pxの間隔になる。 */
.tiptop-standard-hero--band .tiptop-standard-hero__lead {
	margin: 24px auto 48px;
}

/* offset: 画像あり。画像を大きなカードにして、文章カードを左下に重ねる（モック .page-hero--offset 準拠） */
.tiptop-standard-hero--offset .tiptop-standard-hero__inner {
	position: relative;
	display: block;
	min-height: 0;
	padding-bottom: clamp(64px, 11vw, 128px);
}

.tiptop-standard-hero--offset .tiptop-standard-hero__figure {
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--tt-radius-md);
}

.tiptop-standard-hero--offset .tiptop-standard-hero__content {
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(800px, 90%);
	margin: 0;
	padding: clamp(28px, 4vw, 44px);
	background: var(--tiptop-base);
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-md);
	box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--tiptop-contrast) 22%, transparent);
}

/* リードの下48px（モック .page-hero--offset .page-hero__lead 相当）。offset は左寄せの
   カードなので band/framed と違い margin-inline は auto にしない。画像未設定時に効く
   .tiptop-standard-hero--no-image …（同詳細度・上方）を後勝ちで打ち消す位置に置く。 */
.tiptop-standard-hero--offset .tiptop-standard-hero__lead {
	margin: 24px 0 48px;
}

/* offset は画像が必須の型。未設定時は --no-image が付いて figure 自体が出力されないため、絶対配置のままだと文章カードだけが空の器の底に貼りつく。通常フローへ戻して中央に置く。 */
.tiptop-standard-hero--offset.tiptop-standard-hero--no-image .tiptop-standard-hero__inner {
	padding-bottom: 0;
}

.tiptop-standard-hero--offset.tiptop-standard-hero--no-image .tiptop-standard-hero__content {
	position: static;
	width: min(800px, 100%);
	margin-inline: auto;
}

/* framed: 画像なし。文章を罫線の箱に収め、余白の中に浮かせる（モック .page-hero--framed 準拠） */
.tiptop-standard-hero--framed .tiptop-standard-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

.tiptop-standard-hero--framed .tiptop-standard-hero__figure {
	display: none;
}

.tiptop-standard-hero--framed .tiptop-standard-hero__content {
	max-width: 840px;
	margin-inline: auto;
	padding: clamp(40px, 6vw, 64px);
	text-align: center;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-md);
}

.tiptop-standard-hero--framed .hero__eyebrow {
	margin-inline: auto;
}

/* リードは中央寄せ＋下48px（モック .page-hero--framed .page-hero__lead 相当）。
   band と同じ理由で上24px／下48px。 */
.tiptop-standard-hero--framed .tiptop-standard-hero__lead {
	margin: 24px auto 48px;
}

/* offset は 960px 以下で重ねをやめる。カードが画像より高くなり、絶対配置のままだと
   セクションの上端を突き抜けてヘッダーへ重なるため（375px幅の実測で334pxはみ出し）。
   モバイルは他のヒーローと同じ「文章 → 画像」の縦積みへ戻す。 */
@media (max-width: 960px) {
	.tiptop-standard-hero--offset .tiptop-standard-hero__inner {
		padding-bottom: 0;
	}

	.tiptop-standard-hero--offset .tiptop-standard-hero__content {
		position: static;
		width: 100%;
		margin-bottom: 24px;
	}
}