/*
 * 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 と同じ考え方）。 */
/* 段リズムをモックへ合わせ、ヒーローだけ他の段(--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）に倣って中央へ寄せる。
 * 寄せる対象を ::after から eyebrow自身へ移した。下線をモックへ揃える
 * （front-gradient-system.css）ために eyebrow を width:fit-content にしたので、
 * ::after 側の margin-inline:auto では中央に寄らなくなったため。 */
.tiptop-standard-hero--no-image .hero__eyebrow {
	margin-inline: auto;
}

/* モックと完全一致させるため、サイズ・行間をモックの実値に合わせた。
 * ⚠ 行間はここだけ文字間隔プリセット（--tt-leading-scale）に追従しない。
 * プリセットxwideでは行間1.83になり、モック（1.6）から大きく外れて見出しが間延びして
 * いたため、モックの見た目を正としてプリセット追従を外した。
 * プリセットを変えて行間も動かしたい場合はここを calc(...) 形に戻す。
 *
 * 字間は Issue #969 でトークン参照へ戻した。生値 0.06em を書いていたが、
 * それは elegant プリセットの値で、standard は 0.04em＝**別プリセットの値を写していた**。
 * モックの `.page-hero__title`（_mockup/standard/css/shared.css:197）も
 * `var(--tiptop-letter-spacing-heading)` で書かれていて、そのすぐ上のコメントが
 * 「ここで固定すると、購入者が書体を切り替えても見出しの印象だけ取り残される」と
 * 明示している。値ではなく参照そのものがモックの意図。下層ヒーローは Issue #1000
 * （PR #1002）で同じ直しを済ませている。 */
.tiptop-standard-hero h1 {
	margin: 0;
	font-weight: 400;
	letter-spacing: var(--tiptop-letter-spacing-heading);
}
.tiptop-standard-hero h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-hero);
	line-height: 1.6;
}

/* splitは見出しの箱が全幅の約半分になる（1920pxで653px・1200pxで558px）。全幅ヒーロー用の
 * --tt-text-hero（中間 4.4vw）をそのまま当てると、箱だけ縮んで字が縮まず、1000〜1280pxで
 * 入力者の明示改行（<br>）がさらに折り返す＝3行のつもりが5〜6行になる（実測）。
 * 箱幅に見合う係数へ落とす。上限は段のままなので 1440px以上は同値。
 *
 * ⚠ 600px以下ではこのルールは効かない。このファイル下部の @media (max-width: 600px) にある
 *   .tiptop-standard-hero h1（Issue #961。<br> を display:none にして
 *   clamp(1.55rem, 7vw, 1.9rem) を当てる）が **同じ詳細度 (0,1,1) で後に書かれている**ため
 *   後勝ちする。スマホの組みはそちらが正本なので、ここを触ってもスマホは動かない。
 *
 * ⚠ トークン側（--tt-text-hero）を下げる手は採らない。4.4vw は節見出し --tt-text-section
 *   （3.4vw）と中間幅で大小が逆転しないための差で、docs/typography-scale.md の
 *   「960px前後でページ見出しと節見出しが同じ大きさ」を直したときの産物。下げると再発し、
 *   さらに箱が全幅で折り返していないアーカイブヒーローまで巻き添えで小さくなる。
 *   代償として **921〜1115px ではトップのヒーロー見出しが節見出しより最大1px小さい**が、
 *   折り返し5行の方が明らかに悪い、という意匠上の判断。 */
.tiptop-standard-hero--split h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: clamp(1.9rem, 3.3vw, 2.8rem);
}

.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;
}

/* ヒーローの最新のお知らせ（Issue #1168・「新着情報の最新1件を表示」）。
 * 承認済みモックに無い要素なので、文章の下に1行で並べるだけにする。写真の上へ重ねる
 * 位置決めは子テーマに任せる（7つの型すべてで崩れない重ね位置を本体が決められないため）。
 * inline-flex にしているのは、中央寄せの型では親の text-align に従って中央に、
 * 左寄せの型では左に並ばせるため。 */
.tiptop-standard-hero__news {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--tt-space-2) var(--tt-space-4);
	max-width: 100%;
	margin: 32px 0 0;
	color: var(--tiptop-muted);
	font-size: var(--tt-text-note);
}

.tiptop-standard-hero__news-label {
	font-weight: var(--tiptop-font-weight-heading);
}

/* 本文リンクの色（html[data-tiptop-palette] a・0,1,1）を外して、行の文字色に合わせる。 */
.tiptop-standard-hero .tiptop-standard-hero__news-title {
	color: inherit;
	text-underline-offset: 0.18em;
}

.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;
}

/* モバイルのヒーローを承認済みモックへ揃える。
 * 実サイトは中央揃えで、画像を order: -1 でテキストの上へ出し、280pxの正方形に
 * 切っていた。モックは左揃えのまま、テキストの下にコンテナ幅いっぱいの 4:5 の
 * 画像を置く。375px幅で並べて見比べて確認している。
 * 中央寄せの指定は margin: 0 auto / margin-inline: auto として各所に散っていたので
 * まとめて外す。 */
/* ヒーローの1カラム化は 960px から（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: --tt-width-base-wide }` は
 * #1260 で削除した。この2要素はトップページにしか出力されず（front-page.php /
 * template-parts/front-page-guide.php）、幅は front-page-adjustments-rules.css の (0,3,1) が
 * 当初から一貫して持っていたため、(0,1,0) のこの規則は一度も採用されていない。
 * 中央寄せ（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;
}

/* 画像未設定のときは画像用トラック（clamp(140px,18vw,230px)）だけが残り、
 * 本文がそこへ詰まって幅狭く見える。1カラムへ切り替えて
 * 中央寄せにする。既存の「no-image」（.profile-contents--no-image）と
 * 同じ考え方（1frへ・本文側は前提の読み幅トークンで頭打ち＋auto中央）。 */
.tiptop-about-summary__profile--no-image {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}

.tiptop-about-summary__profile--no-image .tiptop-about-summary__body {
	width: min(100%, var(--tiptop-front-lead-width, 40rem));
	margin-inline: auto;
}

.tiptop-about-summary__image {
	overflow: hidden;
	width: 100%;
	margin: 0;
	border-radius: var(--tt-radius-circle);
	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*` の見た目はここには置かない（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);
}

.tiptop-about-list--custom .tiptop-career-card p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	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」ボタンに矢印があるので冗長）。 */

.tiptop-works-showcase__action,
.tiptop-news-action,
.topics__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 から（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;
}

/* 画像機構由来の背景を剥がす。`!important` を外した（Issue #1174 の
 * 前段・`docs/` の !important 監査の分類C）。実画面で4ケース×4幅帯＝16通り
 * 測って computed が1つも動かないことを確認済み＝この宣言は詳細度だけで勝てていた。
 * 子テーマがヒーローを色帯にしたいとき、`!important` 合わせが要らなくなる。 */
.tiptop-compact-hero.archive-hero.has-no-hero-image {
	background: none;
}

.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: var(--tt-radius-circle);
	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;
}

.tiptop-service-point__heading h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	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);
}

.tiptop-service-point > p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	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);
}

/* フッターロゴはパレット/トーンに関わらず元の色のまま表示する（意図した仕様）。
 * 以前は `filter: brightness(0) invert(1)` で常時白反転させていたが、これは
 * 「濃色・透過PNGのシンプルなロゴ」だけを前提にした処理で、不透明な丸アイコン風
 * ロゴ等では色情報が全部潰れて真っ白な塗りつぶしに見える不具合があった。 */

/* 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アイコンに乗る不一致を防ぐ）。
 * #1203 でフェードを外したため、上記 ink-fade の記述は変更前の経緯として残す。 */
body.tiptop-standard-system .site-footer a:not(.site-social-links__link):not(.button):not(.wp-block-button__link):not(.site-footer__logo-link):not(.site-footer__nav a):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):not(.site-footer__nav a):focus-visible {
	text-decoration: underline;
}

/* フッターナビは ink-fade（上）の対象外にして、モックどおり「hoverで前面へ」にする
 * （Issue #1185）。除外を上流でやるのは、詳細度の積み上げを避けるため——
 * 上のルールは :not() が5つ乗って約 0-8-2 になり、勝つには案件側も !important が必要になる。
 * 案件が触れない領域を広げないのが方針（子テーマで作った案件からの要望）。
 *
 * ⚠ opacity も一緒に戻すこと。実効の明るさは color のアルファ × opacity の掛け算で、
 * 色を 100% にしても opacity 0.62 が残ると **通常（72%）より暗くなる**。
 * 案件側で実際にこれが起きた（docs/aa-contrast-check.md の落とし穴④）。 */
html[data-tiptop-palette] body.tiptop-standard-system .site-footer__nav a:hover,
html[data-tiptop-palette] body.tiptop-standard-system .site-footer__nav a:focus-visible {
	color: var(--tiptop-base);
	opacity: 1;
}

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-weight: 400;
	letter-spacing: calc(0.12em + var(--tt-letter-add));
}

body[class*="tiptop-front-hero-type-"] .site-main--front .top .main-txt h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: clamp(2rem, min(4vw, 6vh), 4.5rem);
	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-weight: 400;
	letter-spacing: calc(0.12em + var(--tt-letter-add));
}

.tiptop-scene-copy h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-section);
	line-height: calc(1.55 * var(--tt-leading-scale));
}

.tiptop-scene-copy > p:not(.hero__eyebrow) {
	color: var(--tt-base-paper-soft);
}

.tiptop-scene-copy > p:not(.hero__eyebrow):not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	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;
}

/* 標準モードの新着情報を詰める（意匠上の判断）。
 * 上の共有ルールは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（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)まで届かず左寄りに見えていた
	 * （実測：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;
}

/* 背景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);
}

/* 標準モードのニュースタグをアクセントの薄塗りへ。アーカイブ側は
 * immersive-content-pages.css の同名クラスへ同じ配色を当てているが、トップページは
 * 上の (0,3,0) ルールが勝つため、そこを越える詳細度でここに置く。
 * 形状もここで受ける。上の (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`）
 * ので、消すのではなく形を合わせる。
 * ⚠訂正（Issue #868）：上の「承認済みモック」が**別ファイルの取り違え**だった。
 * `_mockup/tiptop-current.css` は**現状再現**用で、トップの承認済みモックは
 * `_mockup/standard/front.html`。そちらのタグは `.news-row__tag` ではなく `.badge` で、
 * 実測は padding 0.18em 0.8em（2.0736/9.216px）・塗り accent 10%・min-height 0 で
 * 高さ23.69px。この3つの上書きが現状再現の値を固定していたので削除した——
 * design-system.css の共通バッジルール（詳細度21）が同じ値を既に持っている
 * （そこの 10% は「承認済みモックの実値」と明記されている）。
 * **`border: 0` と `color` は残す**：同ファイルの詳細度30のルールが
 * `border: 1px solid var(--tt-base-line)` と別の色を持っていて共通側より強いため、
 * このルールを丸ごと消すと1px枠が復活する（CSSOMで所有者を確認済み）。
 * **padding も同じ理由でここに残す**：詳細度30のルールが
 * `var(--tt-space-1) var(--tt-space-3)`（＝4px 12px）を持っていて共通側より強いので、
 * 宣言を落とすと 2px 12px から 4px 12px に増えて逆に遠ざかる（実測で確認）。
 * 値はモックの `0.18em 0.8em` をそのまま書く——文字サイズに追従する指定なので、
 * 文字が段で変わっても比率が保たれる。 */
body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__terms {
	padding: 0.18em 0.8em;
	border: 0;
	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);
	}
}

/* 新着の行を畳むのは 781px（承認済みモック `_mockup/standard/css/shared.css` の
 * `@media (max-width: 781px)` と同じ点。ヘッダーのナビが畳まれるのも 781px＝`main.css`）。
 * 以前は 700px だったため 700〜781px の帯でモックとズレていた（Issue #958）。
 * 分類バッジはこの幅から下では出さない（PCのみ表示）。矢印はモックどおり出したままにする。
 * 抜粋は `template-parts/content-news-row.php` が出力しないので、旧 "excerpt" 行は撤去した。
 *
 * **セレクタの `body.tiptop-standard-system` を外さないこと。** メディアクエリは詳細度を
 * 上げないので、この前置きが無いと (0,3,0) になり、上の :630 `grid-template-columns:
 * 98px 104px …`・:639 `__title { grid-column: 3 }`・:644 `__arrow { grid-column: 4 }`
 * （いずれも (0,4,1)）に負ける。実際に外した状態で実測したところ、320pxでタイトル列が
 * 6pxまで潰れた。(0,4,1) で揃え、それらより後ろに置くことで勝たせている。 */
@media (max-width: 781px) {
	body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__link {
		grid-template-areas:
			"date arrow"
			"title title";
		grid-template-columns: minmax(0, 1fr) 24px;
		gap: var(--tt-space-3) var(--tt-space-4);
		min-height: 0;
		padding: var(--tt-space-5) var(--tt-space-4);
	}

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

	body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__terms {
		display: none;
	}

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

	body.tiptop-standard-system .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);
	letter-spacing: calc(0.16em + var(--tt-letter-add));
}

.tiptop-next-work p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-meta);
}

.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-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);
}

/* 標準モードの詳細ページは、タイトル・メタと本文の間を罫線で区切る（
 * 承認済みモック _mockup/tiptop-single.css:178）。実サイトは余白だけで離しており、
 * 本文の手前に罫線が無かった。
 * 実績詳細は標準モードだとヒーロー画像がヘッダーの中にあり（single-work.php:48-50）、
 * 罫線が画像の直下に来て意味が変わるため対象外にする。 */
/* 新着詳細を除外した（新着詳細のサムネの上に余分な罫線が出ていた）。
 * ブログ詳細は承認済みモック（_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);
}

/* ヘッダーの相談ボタンとフッターのコピーライトを承認済みモックへ（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));
	/* 高さもモックへ（相談ボタンの縦幅がモックより太かった＝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;
}

/* ボタンの寸法もモックへ。モックは 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;
}

/* ヘッダー/フッターの内側幅は全ページ共通＝「サイト幅」設定の1本（Issue #1257・
 * 意匠上の判断）。ここにあった「トップだけ 1280px」（`body.home` スコープの上書き）は廃止した。
 * ・モックのトップはヘッダーも節も同じ `.wrap` で揃っていて、「ヘッダーが本文より狭い」意図は
 *   元から無かった（1280px は描いた時の名残）。
 * ・以前の「トップの段幅はサイト幅設定を唯一の正とする」判断を、まずヘッダー/フッター/
 *   共通CTAに通した。⚠ トップの節はこの撤去時の実測でサイト幅に追従していない
 *   （1280 / 1040 の固定）。節は後続 Issue で揃える。
 * ・#1204 は同じ上書きに `min()` でサイト幅の上限を足した回で、この撤去に含まれる。
 * 削除後の幅は `main.css:58`（ヘッダー/フッター内側）と下の著作権行の
 * `min(calc(100% - gutter), var(--tiptop-site-width))` に落ちる＝下層と同じ。 */

/* モバイルでも相談ボタンをヘッダーに残す（375px幅でモックと突合）。
 * main.css が .site-nav / .site-header__cta / .site-social をまとめて隠しており、
 * 狭い画面では相談への導線がハンバーガーを開くまで見えなかった。承認済みモックは
 * 781px 以下で .site-nav と .site-social だけを隠し、CTAはヘッダーに残している。
 * モック側はハンバーガーを持たない静的HTMLなので「ロゴ＋CTA」だが、実サイトは
 * メニュー開閉が要るため「ロゴ＋CTA＋ハンバーガー」の並びになる。
 * 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;
	}
}

/* コピーライト行をフッターのコンテナへ入れる（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 {
	/* 幅は「サイト幅」設定に追従する（`--tiptop-site-width`）。トップだけ1280pxへ絞る上書きは
	 * Issue #1257 で廃止したので、全ページこの1本。 */
	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` と同じ段階で切り替える。
 * `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));
	}
}

/* フッターの下余白をモックへ（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);
}

/* 一覧ページの字間を承認済みモックへ（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;
}

/* ニュース一覧の行も同じ考え方で揃える（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));
}

/* 絞り込みチップの文字色をモックへ（実績一覧のカテゴリバッジの
 * 文字色がモックと違っていた）。モック（_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アイコンの色をモックへ（ヘッダーの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)` で並び、あちらが後ロードなので必ず負ける**（実測で確認済み）。
 * モード名を増やすのではなく既存の中間クラスで上げる作法に合わせる。 */
/* 寸法もモックへ（モックを正とする）。
 * モックはリンク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も、ヘッダーと同じインク扱いにする（パネル内の
 * 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;
}

/* フッターメニューの太さ・行間・字間をモックへ（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,
 * same pattern as .tiptop-blog-card__link/.front-blog-card__link — see the former
 * standard-immersive-contract.md, since deleted; use git history). */
.tiptop-post-navigation a {
	color: inherit;
	text-decoration: none;
}

/* ホバーが1つも指定されておらず、色も下線も変わらなかった（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;
}

/* 狭い画面の縦積み（Issue #842 の781px上書き）は廃止した。
 * 承認済みモックが「スマホも横並び1行＝基本形のまま」に確定した
 * ため（_mockup/standard/css/shared.css の781px段のコメントが正本・Issue #1081）。
 * #842 を根拠に縦積みへ戻す変更を入れないこと。長いタイトルが半分幅で折り返す
 * のは許容と決めてある。実績詳細（works-page.css）の同上書きも同時に対で削除。 */

/* 新着詳細の前後ナビを承認済みモックの .post-nav へ揃える（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);
}

/* 標準モードの節リズム統一。
 * ニュース（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;
}

/* 検索フォームの寸法をモックへ（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;
}

/* 寄せる対象を ::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-weight: 400;
}

.tiptop-404-page h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-title);
}

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

/* 標準モードの404（モック移行）。
 * 標準モードではこのページは既に白・画像なし・波紋レイヤーなしで描かれているため
 * （実測確認済み）、以前の「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-weight: 700;
	color: var(--tiptop-contrast);
}

body.tiptop-standard-system .tiptop-404-page h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-title);
}

/* 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:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
		/* 承認済みモックは可変を段の 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;
}
body[class*="tiptop-front-hero-type-"] .site-main--front .top .main-txt h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-hero);
}


.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) {
}

/* ============================================================
   標準モードの下層ページ本文（承認済みモックへの移行）
   ブロックエディタで書いた本文が、見出し・箇条書き・表・引用・囲みまで
   同じ言語で出るようにする。面は増やさず罫線と余白で構造を示す。
   固定ページ・サービス・新着詳細・実績詳細で同じ本文型を共有する。
   本文のタイポグラフィと部品は .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);
	font-weight: 700;
}
body.tiptop-standard-system .tiptop-page-entry .entry__content h2:not(:where(.tiptop-own-color, .tiptop-own-color *)),
body.tiptop-standard-system .tiptop-news-detail__body h2:not(:where(.tiptop-own-color, .tiptop-own-color *)),
body.tiptop-standard-system .tiptop-work-detail__body h2:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-contrast);
}
body.tiptop-standard-system .tiptop-page-entry .entry__content h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
body.tiptop-standard-system .tiptop-news-detail__body h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
body.tiptop-standard-system .tiptop-work-detail__body h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-heading);
	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-weight: 700;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
body.tiptop-standard-system .tiptop-news-detail__body h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
body.tiptop-standard-system .tiptop-work-detail__body h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-subheading);
	/* モックの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;
}

/* 本文の測度（--tt-measure-reading）は、ここでは器（.entry__content）にかぶせない。
 * 固定ページ本文は下で器を開けて各ブロックに幅を持たせ、ニュース詳細と実績詳細は
 * news-page.css / works-page.css が幅の持ち主。
 *
 * ⚠ このファイルはページ別CSSより後に読まれるので、同詳細度ならここが勝つ。ページ別CSSが
 * 幅を外している要素をここで縛らないこと（ニュース詳細で news-page.css の `max-width: none`
 * をここが上書きし、本文だけ618pxに取り残されたことがある）。 */

/* 固定ページ本文だけ、測度の持ち主を「器」から「中身」へ移す（Issue #1163）。
 *
 * それまでは器（.entry__content）が 618px で帽子をかぶっていたため、
 * add_theme_support('align-wide')（inc/setup.php）が入っているのに
 * **alignwide / alignfull がブロック単位で広がれなかった**。ランディング型の
 * 固定ページ（トップページを固定ページ本文で組む構成を含む）でカード群や
 * セクション帯を置けない、という詰まりの正体がこれ。
 *
 * 直し方は WordPress の標準どおり「器は開けて、読み物幅は各ブロックが持つ」。
 * 段落・見出し等の**見た目の位置は変わらない**——器の中で中央寄せされていた
 * 618px の箱が、そのまま各ブロックの 618px 中央寄せになるだけ。
 *
 * ⚠ .tiptop-page-entry の中身は実質 .entry__content だけ（タイトルはヒーロー側が
 * 出す。tiptop_theme_render_page_hero が無い環境のみ .entry__title が出る）。
 * そのフォールバック経路のタイトルが器いっぱいに伸びないよう、下で明示的に測度を戻す。 */
body.tiptop-standard-system .tiptop-page-standard__content {
	max-width: var(--tiptop-site-width);
}

body.tiptop-standard-system .tiptop-page-entry > .entry__title {
	max-width: var(--tiptop-text-width);
	margin-inline: auto;
}

body.tiptop-standard-system .tiptop-page-entry .entry__content {
	max-width: none;
}

/* 本文ブロックの幅を1000pxへ（意匠上の判断）。
 * 直前まで読み物の測度（--tt-measure-reading＝42文字の618px）だったが、
 * 汎用固定ページは読み物というより案内ページとして使われていて、器（1040px）に対して
 * 本文が細すぎた。1行は約68文字になり読み物としては長いが、それを承知の上での判断。
 * 詳細ページ（ニュース・ワークス・ブログ）は測度のままなので、ここだけの差し替え。 */
body.tiptop-standard-system .tiptop-page-entry .entry__content > * {
	max-width: var(--tt-page-content-width);
	margin-inline: auto;
}

/* ここが本題。「幅広」「全幅」を選んだブロックだけ器いっぱいまで伸びる。
 * 全幅は器の外まで出したくなるが、器の外側にはページ余白（--tt-gutter-*）しか
 * 無いので、ここでは器いっぱい＝サイト幅に揃える（ビューポート幅で突き抜けさせると
 * スクロールバー幅ぶん横スクロールが出る）。 */
body.tiptop-standard-system .tiptop-page-entry .entry__content > :is(.alignwide, .alignfull) {
	max-width: none;
}

/* ページ単位で本文全体をサイト幅にするスイッチ（Issue #1163）。
 * 本文まるごとがランディングで、ブロック1つずつに「幅広」を付けて回るのが
 * 現実的でない構成のための逃げ道。テンプレート側は
 * `tiptop_theme_page_entry_full_width` フィルタで付け外しする。
 * 既定は false＝読み物幅のままなので、既存サイトの見た目は変わらない。 */
body.tiptop-standard-system .tiptop-page-entry--full-width .entry__content > * {
	max-width: none;
}

/* 汎用固定ページの表を器いっぱいに伸ばす（上の1000px化とセット）。
 *
 * responsive-fixes.css の `.entry__content table { display: block; overflow-x: auto; }` は
 * 狭い画面で表を横スクロールさせるためのもの。ただし副作用があって、**display:block の
 * table は中身の幅まで縮む**——行グループ（tbody）が作る無名の表の箱が中身にぴったり
 * 合う大きさになり、外側のブロック箱の幅を使わないため。
 * 実例（tiptop.local /request/・1920px）：本文ブロックを1000pxにしても、その中の
 * 料金表は tbody が412pxのまま。器だけ広がって中身が細い、という見え方になっていた。
 *
 * ⚠ `.tiptop-page-entry` は page.php だけでなく **page-service.php** も付けている
 * （inc/setup.php:193 と page-service.php:36）。Serviceの料金表まで巻き込むと頼まれて
 * いないページの見た目が変わるので、page.php 側の main が出す `.tiptop-page` を
 * 前に足して絞る（front-page.php:22 の「固定ページ本文でトップを組む」経路も同じ器）。
 *
 * PC幅では表として組み直して幅いっぱいに。狭い画面は横スクロールのまま残す。
 * width:100% は front-generic-page-content.css が既に持っているのでここでは書かない。
 * 詳細度 (0,4,1) が responsive-fixes.css の (0,1,1) に勝つので !important は不要。
 * 781px は本文の型が1カラムへ落ちる境目（ヘッダーのナビが畳まれるのと同じ・main.css）。 */
body.tiptop-standard-system .tiptop-page .tiptop-page-entry .entry__content table {
	display: table;
}

/* 汎用固定ページのタイトル行を本文と揃える（意匠上の判断）。
 *
 * ヒーローの中身（パンくず・見出し・リード）は main.css:1443 の
 * `.archive-hero__content { max-width: var(--tiptop-text-width) }` で720pxの箱になり、
 * 器の左端に置かれている。いっぽう本文ブロックは1000pxの中央寄せ。そのため
 * **タイトルが左端22px、本文が213px開始**という食い違いが見えていた（1440px幅で実測）。
 *
 * 本文と同じ --tt-page-content-width で縛り、中央寄せも揃える。値を変えたときに
 * タイトルと本文が一緒に動くようにトークンを共有している。
 *
 * ⚠ ヒーローは tiptop_theme_render_page_hero() の共用部品で、ニュース・ワークス・
 * サービス・お問い合わせ・一覧ページも同じ入れ物を使う。頼まれていないページを
 * 動かさないよう `.tiptop-page`（page.php の main）で絞る。
 * 同じ食い違いはニュース詳細などにも残っている（タイトル720px左端 vs 本文618px中央）。
 *
 * ヒーローの配置は管理画面の「hero-align」オプションでも切り替わる
 * （front-component-unification.css:364 が中央寄せのとき margin-inline: auto を当てる）。
 * ここで同じ値を書いても衝突しない——あちらは max-width を触らず、margin-inline も同値。
 * 詳細度 (0,3,0) が main.css の (0,1,0) に勝つので !important は不要。 */
body.tiptop-standard-system .tiptop-page .page-hero__content {
	max-width: var(--tt-page-content-width);
	margin-inline: auto;
}

@media (max-width: 781px) {
	body.tiptop-standard-system .tiptop-page .tiptop-page-entry .entry__content table {
		display: block;
		overflow-x: auto;
	}
}

/* main.css と投稿種別CSSの段落への直接指定を打ち消し、本文コンテナの値を継承する。
 * 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:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
body.tiptop-standard-system .tiptop-news-detail__body p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
body.tiptop-standard-system .tiptop-work-detail__body p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
/* ⚠ `.single-post` は**body自身に付くクラス**なので、スペースを入れて子孫として書くと
 * 一致しない（最初そう書いて空振りした）。標準スコープのクラスと**複合**（スペース無しで
 * 連結）して書くのが正しい——同ファイルの他のブログ詳細ルールと同じ形。 */
body.tiptop-standard-system.single-post .tiptop-post-detail__body p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: inherit;
	line-height: inherit;
}

/* 詳細articleの縦余白（実測）。標準モードは外側の節が
 * 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);
}

/* 記事内引用のスタイルがモックと違っていた：**ブログ詳細だけこの契約から
 * 漏れていた。** ブログ本文は `.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（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の行き先（モックへ）。
 * モックは「検索欄 → トップへ戻るボタン」の順で、検索欄は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));
}

/* 検索結果カードの本文。抜粋が本文色＋行間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;
}

/* トップページの残差（総当たり実測）。
 * モックとの完全一致を目指して作り込んだつもりだったが、当時も代表要素しか
 * 見ていなかったため行間と字間が残っていた。 */

/* ヒーローのリード：行間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）と同じ調子に揃える。
 * ⚠訂正（Issue #868）：この「モックの 500/1.8」が誤り。モックの
 * `.news-row__title` を iframe で実測すると **15.04px / w700 / 行間25.568px（＝1.7倍）**。
 * 太さはトークン `--tiptop-font-weight-heading`（既定プリセット700）へ寄せる——
 * 正本 docs/typography-scale.md §カード見出しも「bold / leading title / 字間normal」で、
 * front-typography-roles.css の役割定義も同じトークンを指している。700直書きにしないのは
 * 書体プリセットで700/500と切り替わる設計（front-font-presets.css）だから。
 * 行間はこのルールから declaration を落とす：同じセレクタ（詳細度41）で
 * front-page-adjustments-rules.css が既に 1.7倍を指定していて、**後ろに積まれる
 * このファイルが黙って上書きしていた**（Issue #784 の修正が効いていなかった）。
 * 内側の `__title-text` は #784 で 1.7倍になっており、h2 側だけ 1.8 が残っていた。 */
body.tiptop-standard-system .site-main--front .intro-news .tiptop-news-item__title {
	font-size: var(--tt-text-card);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: normal;
}

/* 一覧へ戻るボタンの文字を承認済みモックへ（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));
	/* 余白もモックのボタンと同じに。モックは高さ45px。実サイトは
	 * padding 10px/20px で48pxあった。.button クラスを持たないので個別に指定する。 */
	padding: 0.546rem 1.248rem;
}

/* 本文の強調を承認済みモックの太さへ（意匠上の判断）。
 * モックの 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: var(--tt-radius-none);
}

.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);
}

.tiptop-standard-hero--minimal_background .tiptop-standard-hero__news {
	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: var(--tt-shadow-hero-offset);
}

/* リードの下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;
	}
}

/* ============================================================
   スマホ実機の幅（〜600px）のヒーロー（Issue #961〜#964）

   781pxはタブレット縦も含む段なので、指1本で持つ幅の調整はここに分ける。
   601〜960px（タブレット）は上の @media 群のまま＝この段では変更しない。

   ファイル末尾に置いているのは source order のため。ここで上書きする
   プロパティはどれも既存ルールと詳細度が同じ（メディアクエリは詳細度を
   上げない）ので、**後に書くことでしか勝てない**。
   L0の結果：h1 / __lead / __figure に触るのは base-system.css だけで、
   後読みの responsive-fixes.css は .tiptop-standard-hero に触っていない。
   ============================================================ */
@media (max-width: 600px) {
	/* --- 見出しの折り返し（Issue #961） ---------------------------------
	   390pxで見出しが5〜6行に割れ、2〜3文字だけの行ができていた。原因は2つ。
	     1) <br> はデスクトップの3行組み用で、1行あたり13文字ある
	     2) --tt-text-hero の下限30.4pxだと .wrap の350px幅に11文字しか入らない
	   <br> を無効化して折り返しを自然任せに戻し、同時に1行あたりの文字数を稼ぐ。

	   <br> に class を付けて出し分けないのは、この本文が
	   tiptop_theme_render_hero_html() 経由でユーザー入力から生成されるため
	   （front-page.php）。入力文にclassを書かせる前提にはできない。

	   上限の 1.9rem は --tt-text-hero の下限と同値。600pxちょうどで両者が
	   30.4pxになり、境界で文字の大きさが飛ばない。 */
	.tiptop-standard-hero h1 br {
		display: none;
	}

	.tiptop-standard-hero h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
		font-size: clamp(1.55rem, 7vw, 1.9rem);
	}

	/* --- 画像の比率とブリード（Issue #962） -----------------------------
	   縦積みにすると「左に文章／右に写真」「中央に写真」という横の釣り合いが
	   消え、左右20pxの余白＋角丸のせいで「独立した箱が2つ並んだだけ」に見える。
	   写真だけ .wrap の外へ出して断ち切る。

	   負マージンの値は .wrap の余白そのもの。--tt-width-wide が
	   `min(1280px, calc(100vw - clamp(40px, 8vw, 144px)))` なので、その半分が
	   片側の余白になる。**100vw を使って書かないこと**——幅を食う classic
	   スクロールバーがあるデスクトップでは 100vw > clientWidth になり、
	   横スクロールバーが出る（実測で踏んだ）。

	   4/5 のままだと390pxで画像だけ438px＝画面の半分超。4/3（350×263px）が上限。
	   601px以上へ広げないのは、960pxで画像662px・ヒーロー1281pxまで伸びるため。 */
	.tiptop-standard-hero__figure {
		/* ★width: auto が必須。上の @media (max-width: 781px) が width: 100% を
		   効かせており、幅が固定された要素は負マージンでは伸びない（margin box が
		   ずれるだけで border box は 350px のまま left:20 に留まる。実測で発覚）。 */
		width: auto;
		aspect-ratio: 4 / 3;
		margin-right: calc(clamp(40px, 8vw, 144px) / -2);
		border-radius: var(--tt-radius-md) 0 0 var(--tt-radius-md);
	}

	/* center は中央揃えなので左右とも抜く（片側だけだと中央の軸がズレる）。
	   width: min(100%, 640px) の絞りごと解除する。 */
	.tiptop-standard-hero--center .tiptop-standard-hero__figure {
		width: auto;
		margin-inline: calc(clamp(40px, 8vw, 144px) / -2);
		border-radius: var(--tt-radius-none);
	}

	/* --- offset：全面背景＋白カード中央（Issue #963） -------------------
	   幅350pxに「大きな写真」と「その上に乗る箱」を両立させる余地が無い。
	   重なりを画像の35%まで深くすると写真の帯が172pxまで痩せ、浅くすると
	   「画像の下にカードが並んでいるだけ」に見える（モックで実測して却下）。
	   写真を重ねる相手ではなく背景に回せば両方の問題が同時に消える。

	   ★白塗り・枠線・角丸・影は残す。箱ごと消すと minimal_background と
	   同じ見た目になり、2つの型の区別が付かなくなる（意匠上の判断）。
	   外すのは位置まわりだけ。文字色も触らない（白い箱の上なので既定色で読める）。

	   デスクトップ（961px以上）の重ねカードと、601〜960pxの縦積みは無変更。 */
	.tiptop-standard-hero--offset {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		min-height: clamp(480px, 62svh, 680px);
		/* inset:0 は padding box までなので、下罫線を残すと写真の下に1pxの
		   継ぎ目が出る（front-page-adjustments-rules.css が付けている）。 */
		border-bottom: 0;
	}

	/* figure は __inner（＝.wrap）の中にあるので、__inner が position:relative の
	   ままだと inset:0 が .wrap の幅までしか広がらない。基準をセクションへ移す。 */
	.tiptop-standard-hero--offset .tiptop-standard-hero__inner {
		position: static;
		text-align: center;
	}

	.tiptop-standard-hero--offset .tiptop-standard-hero__figure {
		position: absolute;
		inset: 0;
		z-index: -1;
		width: auto;
		margin: 0;
		aspect-ratio: auto;
		border-radius: var(--tt-radius-none);
	}

	/* 暗幕。値は minimal_background と同じ（見た目を揃えるため）。 */
	.tiptop-standard-hero--offset .tiptop-standard-hero__figure::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, color-mix(in srgb, var(--tiptop-contrast) 25%, transparent), color-mix(in srgb, var(--tiptop-contrast) 60%, transparent));
	}

	/* ★static ではなく relative。static のままだと、カードの白い背景は
	   「ブロックの背景」の段で描かれるのに対し、画像は <img>＝インライン相当で
	   もっと後の段に描かれるため、**画像がカードの背景の上に乗って**
	   カードが透け、文字だけが画像の上に浮く。詳細は ai-agent-guide §2-2-13。 */
	.tiptop-standard-hero--offset .tiptop-standard-hero__content {
		position: relative;
		margin: 0;
		padding: var(--tt-space-5);
	}

	/* eyebrow は width:fit-content なので text-align では中央に来ない。 */
	.tiptop-standard-hero--offset .hero__eyebrow {
		margin-inline: auto;
	}

	/* --- offset・framed のテキスト間を詰める（Issue #964） ---------------
	   この2つは「箱の中に文章を収める」型で、テキストの外側に枠の padding が
	   さらに乗るぶん、既定の 16/24/48px だと箱の中が間延びして見える。
	   箱を持たない他の型は据え置き（余白がそのままページの呼吸になっている）。

	   ★h1 は margin:0 なので「見出し→リード」は __lead の margin-top が作る。
	   ★__action の margin-top も下げないと、__lead との**マージン相殺**で
	     max(24, 32) = 32px のまま止まる（390pxの実DOMで実測して確認）。

	   この段は上の offset ブロックより後に置くこと。eyebrow の指定が
	   同じ詳細度(0,2,0)なので、後勝ちでないと margin-bottom が効かない。 */
	.tiptop-standard-hero--offset .hero__eyebrow,
	.tiptop-standard-hero--framed .hero__eyebrow {
		margin-bottom: var(--tt-space-3);
	}

	.tiptop-standard-hero--offset .tiptop-standard-hero__lead,
	.tiptop-standard-hero--framed .tiptop-standard-hero__lead {
		margin-top: var(--tt-space-4);
		margin-bottom: var(--tt-space-5);
	}

	.tiptop-standard-hero--offset .tiptop-standard-hero__action,
	.tiptop-standard-hero--framed .tiptop-standard-hero__action {
		margin-top: var(--tt-space-5);
	}

	/* framed の枠の内側。clamp の下限40pxに張り付いたままで、文字が入る幅が
	   270pxしか無かった（素の .wrap は350px）。
	   ★枠（padding + border）を持っているのは __inner ではなく __content。
	   モックは .page-hero__inner 側に枠があるので、そのまま移植すると
	   効かないうえ __inner に余計な余白が付いて文字幅がさらに狭くなる
	   （222pxまで悪化するのを実測で確認した）。 */
	.tiptop-standard-hero--framed .tiptop-standard-hero__content {
		padding: var(--tt-space-5);
	}
}