/*
 * tiptop visual system layer.
 *
 * This file is intentionally loaded after main.css.
 * Design System v2 makes the front-end token entry point monochrome first,
 * while keeping page-specific layout changes out of this layer.
 */

:root {
	/* Monochrome base tokens. design-system.css loads after main.css, so these
	 * values intentionally override older warm accent defaults without deleting
	 * legacy page CSS in this phase. */
	--tiptop-primary: #111111;
	--tiptop-accent: #111111;
	--tiptop-contrast: #111111;
	--tiptop-text: #222222;
	--tiptop-muted: #707070;
	--tiptop-base: #ffffff;
	--tiptop-surface: #f7f7f7;
	--tiptop-surface-alt: #f2f2f2;
	--tiptop-border: #e4e4e4;
	--tiptop-shadow: none;

	/* Color aliases */
	--tt-color-brand: var(--tiptop-primary);
	--tt-color-accent: var(--tiptop-accent);
	--tt-color-accent-label: var(--tiptop-muted);
	--tt-color-text: var(--tiptop-text);
	--tt-color-heading: var(--tiptop-contrast);
	--tt-color-muted: var(--tiptop-muted);
	--tt-color-base: var(--tiptop-base);
	--tt-color-surface: var(--tiptop-surface);
	--tt-color-surface-alt: var(--tiptop-surface-alt);
	--tt-color-border: var(--tiptop-border);
	--tt-color-action: var(--tiptop-primary);
	--tt-color-success: #237a4b;
	--tt-color-warning: #9f6b00;
	--tt-color-danger: #b3261e;

	/* Typography aliases */
	--tt-font-body: var(--tiptop-font-body, sans-serif);
	--tt-font-heading: var(--tt-font-body);
	--tt-font-admin: "Noto Sans JP", "Noto Sans", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
	--tt-text-xs: 0.72rem;
	--tt-text-sm: 0.82rem;
	--tt-text-md: 0.92rem;
	--tt-text-lg: 1.18rem;
	/* モックの段（docs/typography-scale.md §3 が正本）。 */
	--tt-text-hero: clamp(1.9rem, 4.4vw, 2.8rem);
	--tt-text-title: clamp(1.5rem, 2.6vw, 2.2rem);
	--tt-text-section: clamp(1.5rem, 3.4vw, 2.3rem);
	/* フッター直前の共通CTAの見出しだけ、節見出し（36.8px）より1段小さい。
	 * 和文の1文なので同じ大きさだと大きすぎた（2026-08-16・あやちゃん判断・Issue #956）。
	 * 役割が1つしか無いのでコンポーネント側に生値を書かず、段としてここに持つ。 */
	--tt-text-cta: clamp(1.35rem, 3vw, 2rem);
	--tt-text-card: 0.94rem;
	--tt-text-heading: 1.16rem;
	--tt-text-subheading: 1rem;
	--tt-text-note: 0.84rem;
	--tt-text-label: 0.78rem;
	--tt-text-logo: 1.5rem;
	--tt-text-numeral: clamp(2.2rem, 4.5vw, 3.4rem);
	--tt-text-numeral-xl: clamp(4rem, 14vw, 8rem);
	--tt-leading-tight: 1.35;
	--tt-leading-base: 1.95;
	--tt-leading-loose: 2.05;
	--tt-letter-heading: 0.08em;
	--tt-letter-label: 0.12em;

	/* Layout aliases */
	--tt-width-narrow: var(--tiptop-text-width);
	--tt-width-default: var(--tiptop-site-width);
	/* #418: matches --tt-width-base-wide's formula exactly (this token
	 * had zero consumers before, so copying it here is risk-free) so that
	 * token can become a pure alias instead of holding its own literal. */
	--tt-width-wide: min(1280px, calc(100vw - clamp(40px, 8vw, 144px)));
	--tt-width-full: 100%;
	--tt-gutter-desktop: 44px;
	--tt-gutter-tablet: 32px;
	--tt-gutter-mobile: 20px;

	/* Breakpoint aliases for documentation and media-query parity. */
	--tt-breakpoint-mobile: 640px;
	--tt-breakpoint-tablet: 820px;
	--tt-breakpoint-desktop: 900px;
	--tt-breakpoint-wide: 1160px;

	/* Spacing scale */
	--tt-space-1: 4px;
	--tt-space-2: 8px;
	--tt-space-3: 12px;
	--tt-space-4: 16px;
	--tt-space-5: 24px;
	--tt-space-6: 32px;
	--tt-space-7: 48px;
	--tt-space-8: 64px;
	--tt-space-section: clamp(68px, 8vw, 112px);
	--tt-space-section-compact: clamp(56px, 7vw, 88px);
	--tt-space-card: var(--tt-space-5);
	--tt-space-form-row: var(--tt-space-4);
	--tt-space-button-x: 1.35rem;
	--tt-space-button-y: 0.72rem;

	/* Shape and elevation aliases */
	--tt-radius-none: 0;
	--tt-radius-xs: 0;
	--tt-radius-sm: 0;
	--tt-radius-md: 0;
	--tt-radius-pill: 999px;
	--tt-radius-button: var(--tt-radius-none);
	--tt-shadow-none: none;
	--tt-shadow-card: none;
	--tt-shadow-floating: none;

	/* Layer aliases */
	--tt-z-header: 20;
	--tt-z-floating: 9998;
	--tt-z-toolbar: 9999;

	/* Motion aliases */
	--tt-motion-duration-fast: 0.2s;
	--tt-motion-duration: 0.35s;
	--tt-motion-duration-slow: 0.65s;
	--tt-motion-easing-standard: ease;
	--tt-motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);

	/* Scene veil fallback. immersive-system.css always reassigns this per
	 * palette tone, so this value only matters if that reassignment is
	 * somehow skipped — kept as the single fallback source instead of
	 * repeating "2 10 17" inline at each call site. */
	--tt-scene-veil: 2 10 17;

	/* #416: subtle ink/contrast/action/primary tint scale — replaces a dozen+
	 * one-off color-mix percentages (4/5/6/8% / 10/12/14/18% / 28/30%) with
	 * 3 named steps. --tt-tint-emphasis is a documented exception, not a 4th
	 * step: interactive-control borders (buttons/inputs/pills) that need more
	 * contrast than a decorative tint keep their own value here instead of
	 * scattering the magic number "45%" across files. */
	--tt-tint-faint: 6%;
	--tt-tint-soft: 16%;
	--tt-tint-strong: 30%;
	--tt-tint-emphasis: 45%;
}

/* 本実装（2026-08-07）：標準モードのみ角丸方針を反転（0→丸みあり）。イマーシブは
 * この:rootの既定値0をそのまま使う（イマーシブ側での上書きルールは追加しない）。 */
body.tiptop-standard-system {
	--tt-radius-sm: 8px;
	--tt-radius-md: 14px;
	--tt-radius-button: var(--tt-radius-pill);
	/* 下層ページの節リズムをトップと同じ112pxに揃える。
	 * base-system.css の既定 clamp(104px, 13vw, 190px) はワイド画面で190pxまで開き、
	 * トップ（--tt-space-section＝112px）と別のリズムになっていた。
	 * :root(0,1,0)よりこちらが詳細度で勝つため、読み込み順に依存しない。
	 * base-system.css の781px以下 :root 上書き（clamp(72px, 18vw, 110px)）にも勝つので、
	 * モバイルも 110px → --tt-space-section（781px時68px）へ揃う。これも意図通り
	 * （モバイルのトップが68pxリズムなので、下層だけ110pxで開くのを解消する）。 */
	--tt-base-section-space: var(--tt-space-section);
	/* 下層ページのヒーローは節（112px）より少し詰める。モック `--tt-space-hero` と同値。
	 * 一覧ヒーローがcompactという #405 の役割差はそのまま踏襲している。 */
	--tt-space-hero-standard: clamp(56px, 7vw, 88px);
	/* 読み物の測度（2026-08-09）。承認済みモックは全ページ共通で本文の `max-width: 42em`＝
	 * 本文0.92rem基準の618px。**em を各要素に書くと「その要素が継承したfont-size」で
	 * 解決されて同じ42emでも値が割れる**（ニュース詳細でヘッダー672px／本文618pxに
	 * 割れた実例あり）ので、42文字ぶんをpxに解決したトークン1つで持つ。
	 * 実サイトの --tiptop-text-width は720pxで、モックより1行あたり5文字ほど長い。 */
	--tt-measure-reading: calc(42 * 0.92rem);
}

/*
 * Site-wide convention: every clickable link/button/form-control shows a
 * pointer cursor on hover. Browsers already do this for <a href>, but native
 * <button>/<input> controls are inconsistent across engines (Safari defaults
 * to a non-pointer cursor for <button>), so it's asserted explicitly here.
 * Disabled controls are excluded — see the :disabled cursor:not-allowed rules below.
 */
a[href],
button:not(:disabled):not([aria-disabled="true"]),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
	cursor: pointer;
}

.site-header__cta,
.site-mobile-panel__cta,
.button,
.wp-block-button__link,
button,
input[type="button"],
input[type="submit"] {
	border-radius: var(--tt-radius-button);
	transition-duration: var(--tt-motion-duration-fast);
	transition-property: background-color, border-color, color, opacity, transform;
	transition-timing-function: var(--tt-motion-easing-standard);
}

.site-header__cta,
.site-mobile-panel__cta,
.button,
.wp-block-button__link {
	border: 1px solid var(--tiptop-button-bg, var(--tiptop-primary));
	background: var(--tiptop-button-bg, var(--tiptop-primary));
	box-shadow: none;
	color: var(--tiptop-button-text, var(--tiptop-base));
}

.site-header__cta:hover,
.site-header__cta:focus-visible,
.site-mobile-panel__cta:hover,
.site-mobile-panel__cta:focus-visible,
.button:hover,
.button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	border-color: var(--tiptop-button-hover-bg, var(--tiptop-contrast));
	background: var(--tiptop-button-hover-bg, var(--tiptop-base));
	color: var(--tiptop-button-hover-text, var(--tiptop-contrast));
}

/*
 * Button variants — secondary (outline) shares its shape with .tiptop-outline-action
 * (View All) and its color/hover with MoreLink (fills solid with --tiptop-button-bg
 * on hover — same component, same tokens, per 2026-07-23 decision).
 * Issue #645 Phase A-2: shared dimensions live here (single owner); border color,
 * letter-spacing and display stay per-selector because .button--secondary always
 * pairs with .button (inherits display/align-items/justify-content from main.css)
 * while .tiptop-outline-action is standalone and its letter-spacing includes the
 * font-preset compensation --tt-letter-add that .button--secondary does not use.
 */
.button--secondary,
.tiptop-outline-action {
	min-width: 150px;
	min-height: 46px;
	padding: 10px 20px;
	font-size: var(--tt-text-label);
}

.button--secondary {
	gap: 0.72em;
	border: 1px solid currentColor;
	background: transparent;
	letter-spacing: 0.08em;
}

/*
 * Disabled state — any Button variant, via the native `disabled` attribute or
 * `aria-disabled="true"` on a non-form element (e.g. an <a> standing in for a
 * button). Dims and kills interaction; does not repaint per-variant colors,
 * so it reads as "disabled" under every palette without extra tokens.
 */
.button:disabled,
.button[aria-disabled="true"],
.button--secondary:disabled,
.button--secondary[aria-disabled="true"],
.wp-block-button__link:disabled,
.wp-block-button__link[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.more {
	margin-top: var(--tt-space-5);
	text-align: right;
}

.more p {
	margin: 0;
}

.more a {
	display: inline-flex;
	align-items: center;
	gap: 0.72em;
	min-width: 150px;
	min-height: 46px;
	justify-content: center;
	padding: 10px 20px;
	border: 1px solid var(--tiptop-button-bg, var(--tiptop-primary));
	background: var(--tiptop-button-bg, var(--tiptop-primary));
	color: var(--tiptop-button-text, var(--tiptop-base));
	font-size: var(--tt-text-meta);
	letter-spacing: 0.08em;
	text-decoration: none;
}

.more a:hover,
.more a:focus-visible {
	border-color: var(--tiptop-button-hover-bg, var(--tiptop-contrast));
	background: var(--tiptop-button-hover-bg, var(--tiptop-base));
	color: var(--tiptop-button-hover-text, var(--tiptop-contrast));
}

.contact-page-intro {
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tt-width-narrow));
	margin: clamp(48px, 7vw, 84px) auto var(--tt-space-5);
	text-align: center;
}

.contact-page-intro h1 {
	margin: 0 0 var(--tt-space-3);
	color: var(--tt-color-heading);
}

.contact-page-intro p {
	max-width: 680px;
	margin-inline: auto;
	color: var(--tt-color-muted);
}

.wpcf7 {
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tt-width-narrow));
	max-width: var(--tt-width-narrow);
	margin: 0 auto var(--tt-space-section);
	padding: clamp(20px, 4vw, 40px);
	border: 1px solid var(--tt-color-border);
	border-radius: var(--tt-radius-none);
	background: var(--tt-color-base);
	box-shadow: none;
}

.tiptop-contact-form {
	max-width: none;
	margin: 0;
	border-top: 0;
	padding-top: 0;
	gap: var(--tt-space-4);
}

.tiptop-contact-form label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tt-space-2);
	font-size: var(--tt-text-card);
	letter-spacing: 0.02em;
}

.tiptop-contact-form label > .wpcf7-form-control-wrap {
	flex: 0 0 100%;
}

.tiptop-contact-form .required {
	border: 1px solid var(--tt-color-heading);
	border-radius: var(--tt-radius-none);
	box-shadow: none;
	background: var(--tt-color-base);
	color: var(--tt-color-heading);
}

/* 箱型の入力欄は --tt-radius-sm（標準モード8px／イマーシブ0）に揃える。
 * コメントフォームと同じ契約。下線型の検索欄（border:0・背景透明）は対象外。 */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea {
	min-height: 50px;
	border: 1px solid var(--tt-color-border);
	border-radius: var(--tt-radius-sm);
	background: var(--tt-color-base);
}

.wpcf7 textarea {
	min-height: 160px;
}

.wpcf7 input[type="submit"] {
	min-height: 50px;
	padding-inline: var(--tt-space-6);
	border: 1px solid var(--tiptop-button-bg, var(--tiptop-primary));
	border-radius: var(--tt-radius-button);
	background: var(--tiptop-button-bg, var(--tiptop-primary));
	box-shadow: none;
	color: var(--tiptop-button-text, var(--tiptop-base));
	transition:
		background var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		border-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	border-color: var(--tiptop-button-hover-bg, var(--tiptop-contrast));
	background: var(--tiptop-button-hover-bg, var(--tiptop-base));
	color: var(--tiptop-button-hover-text, var(--tiptop-contrast));
	opacity: 1;
}

.wpcf7 input[type="submit"]:disabled {
	cursor: not-allowed;
	opacity: 0.58;
	transform: none;
	pointer-events: none;
}

.wpcf7-not-valid-tip {
	color: var(--tt-color-danger);
}

.wpcf7-response-output {
	border-color: var(--tt-color-border);
	color: var(--tt-color-text);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--tt-color-success);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--tt-color-warning);
}

.has-js .reveal-on-scroll {
	transition-duration: var(--tt-motion-duration-slow);
	transition-timing-function: var(--tt-motion-easing-standard);
}

/* #17 Phase 1: front page spacing and CTA alignment. */
.tiptop-front-content .intro-services,
.tiptop-front-content .intro3,
.tiptop-front-content .intro4,
.tiptop-front-content .intro-news {
	padding-block: clamp(84px, 9vw, 128px);
}

.tiptop-front-content .website > .wp-block-group,
.tiptop-front-content .siryou > .wp-block-group {
	align-items: center;
	min-height: min(560px, calc(100svh - 180px));
}

.tiptop-front-content .website,
.tiptop-front-content .siryou {
	flex-direction: column;
}

.tiptop-front-content .front-content-card-list-wrap {
	width: 100%;
	margin-top: clamp(32px, 5vw, 56px);
}

.tiptop-front-content .front-content-card-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 0;
}

.tiptop-front-content .front-content-card-list--scroll {
	display: flex;
	gap: clamp(var(--tt-space-4), 2.6vw, var(--tt-space-6));
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tt-width-default));
	margin-inline: auto;
	padding: 0 0 var(--tt-space-4);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-padding-inline: var(--tt-space-1);
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.tiptop-front-content .front-content-card-list--scroll:focus-visible {
	outline: 2px solid var(--tt-color-heading);
	outline-offset: 3px;
}

.tiptop-front-content .front-content-card-list--scroll .front-content-card {
	flex: 0 0 clamp(260px, 30vw, 340px);
	scroll-snap-align: start;
}

/* aspect-ratio: 4/3 の重複宣言はfront-layout-fixes.cssに残す（同一セレクタ・
 * 同一値の完全重複、後段ロードのfront-layout-fixes.css側が実際の勝者）。 */
.tiptop-front-content .front-content-card .post-card__image:focus-visible,
.tiptop-front-content .front-content-card__terms a:focus-visible {
	outline: 2px solid var(--tt-color-heading);
	outline-offset: 3px;
}

.tiptop-front-content .front-content-card .post-card__title a:focus-visible{
	outline: 2px solid var(--tt-color-heading);
	outline-offset: 3px;
}

.tiptop-front-content .front-content-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tt-space-2);
	margin: 0 0 var(--tt-space-3);
	color: var(--tt-color-muted);
}

.tiptop-front-content .front-content-card__terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tiptop-front-content .website-in,
.tiptop-front-content .siryou-in,
.tiptop-front-content .blog-in {
	align-self: center;
}

.tiptop-front-content .website-in > p,
.tiptop-front-content .siryou-in > p,
.tiptop-front-content .blog-in > p {
	max-width: 36rem;
	margin-block: 0;
}

.tiptop-front-content .website-in .more,
.tiptop-front-content .siryou-in .more,
.tiptop-front-content .blog-in .more,
.tiptop-front-content .intro-news .more {
	text-align: right;
}

.tiptop-front-content .more a span[aria-hidden="true"] {
	display: inline-flex;
	align-items: center;
}

/* #17 Phase 2: front blog badges and headline rhythm. */
/* 節見出しとカード見出しは役割が異なるため、文字サイズの段を分ける。 */
.tiptop-front-content h2 {
	font-size: var(--tt-text-section);
	letter-spacing: 0.14em;
	line-height: 1.48;
}

.tiptop-front-content .card > h3 {
	font-size: var(--tt-text-card);
	letter-spacing: 0.14em;
	line-height: 1.48;
}

.tiptop-front-content h2 {
	font-weight: 400;
}

.tiptop-front-content .card > h3 {
	font-weight: 700;
}
.tiptop-front-content .eachTextAnime,
.tiptop-front-content .front-blog-card__meta,
.tiptop-front-content .news-item__date {
	font-size: var(--tt-text-meta, 0.72rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.45;
	text-transform: uppercase;
}

.tiptop-front-content .front-blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tt-space-2);
	margin: 0 0 var(--tt-space-3);
	color: var(--tt-color-muted);
}


@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	html.has-front-paging .tiptop-front-content .intro-services,
	html.has-front-paging .tiptop-front-content .intro3,
	html.has-front-paging .tiptop-front-content .intro4,
	html.has-front-paging .tiptop-front-content .intro-news {
		display: flex;
		align-items: center;
	}
}

@media (max-width: 820px) {
	.tiptop-front-content .intro-services,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4,
	.tiptop-front-content .intro-news {
		padding-block: clamp(68px, 14vw, 88px);
	}

	.tiptop-front-content .website > .wp-block-group,
	.tiptop-front-content .siryou > .wp-block-group {
		min-height: 0;
	}

	.tiptop-front-content .front-content-card-list {
		grid-template-columns: 1fr;
	}

	.tiptop-front-content .front-content-card-list--scroll {
		width: min(calc(100% - var(--tt-gutter-tablet)), var(--tt-width-default));
		scroll-padding-inline: 0;
	}

	.tiptop-front-content .front-content-card-list--scroll .front-content-card {
		flex-basis: min(78vw, 320px);
	}

	.tiptop-front-content .more,
	.tiptop-front-content .website-in .more,
	.tiptop-front-content .siryou-in .more,
	.tiptop-front-content .blog-in .more,
	.tiptop-front-content .intro-news .more {
		text-align: center;
	}
}

@media (max-width: 640px) {
	.contact-page-intro,
	.wpcf7 {
		width: min(calc(100% - var(--tt-gutter-mobile)), var(--tt-width-narrow));
	}

	.wpcf7 {
		padding: var(--tt-space-5);
	}

	.wpcf7 input[type="submit"] {
		width: 100%;
	}
}

/*
 * #414: shared badge component (NEW status marker). #458 adds the category/tag
 * pill variant below: the #414 audit's "immersive-system.css alone owns the
 * live shape" note only held for shape (padding/font-size/etc) — re-checked
 * for #458 with real computed styles, front-accent-usage.css's Group B
 * (loaded last via priority 30 in inc/accent-usage.php) actually wins
 * border-color/background on every page, and color-palettes.css's copy never
 * wins at all (loaded earliest of the tied-specificity rules). All three are
 * folded into .tiptop-badge--category below with the values that were
 * actually winning, so this is a zero-diff consolidation, not a redesign.
 */
.tiptop-badge {
	display: inline-flex;
	align-items: center;
	border-radius: var(--tt-radius-pill);
	text-decoration: none;
}

/* 標準モードのhoverに短いtransitionを戻す（2026-08-07・オーナー確定）。
 * 2026-08-04に確定した「標準はhoverのtransitionを撤去し0秒で即時切替」を、モックの
 * 手触りに合わせる判断で意図的に上書きする（経緯は docs/standard-immersive-contract.md）。
 * 動かすのは色・枠線・下線だけで、レイアウトに影響するプロパティ（padding/width等）は
 * 含めない——それらをアニメさせるとreflowで「カクつく」既知の落とし穴があるため。
 * 既存トークン --tt-motion-duration-fast（0.2s／カタログ上も「ボタン・リンクのhover色変化」用）
 * を再利用する。新しい持続時間トークンは増やさない。reduced-motion時は下のブロックで
 * このトークンが0sへ落ちるため個別の打ち消しは不要。
 * 配置について：このファイルに置くのは意図的で、scripts/check-standard-scope.js が
 * 監視するのは base-system.css だけ。あちらに書くと「標準に動きを入れるな」という
 * #675由来のチェックに正しく弾かれるため、契約の所有者である design-system.css 側へ置く。 */
body.tiptop-standard-system .site-nav a,
body.tiptop-standard-system .site-footer__nav a,
body.tiptop-standard-system .post-card__title a,
body.tiptop-standard-system .news-item__title a,
body.tiptop-standard-system .sidebar-list a,
body.tiptop-standard-system .tiptop-outline-action {
	transition-duration: var(--tt-motion-duration-fast);
	transition-property: color, border-color, background-color, text-decoration-color;
	transition-timing-function: var(--tt-motion-easing-standard);
}

/* グローバルナビの下線を文字のすぐ下へ（2026-08-09・オーナー指摘「下線が離れすぎ」）。
 * main.css:120-128 の共通ルールが padding 0.35rem（上下5.6px）と min-height 42px を
 * 持つため、文字と下線が11px以上離れて見えていた。モック（_mockup/tiptop-shared.css:111）は
 * padding も min-height も持たず、border-bottom は 1px。
 * 元ルールはイマーシブ（クリック領域を確保する設計）が依存しうるので残し、標準だけ上書きする。 */
body.tiptop-standard-system .site-nav a {
	min-height: 0;
	padding-block: 0;
	border-bottom-width: 1px;
	font-weight: 500;
	/* 2026-08-11：同じ元ルール（main.css:120-128）の残り2つを潰す。上の対応で
	 * min-height と padding は消したが、**display と font-size が残っていた**。
	 * モックの `.site-nav a`（_mockup/tiptop-shared.css:111）は display を持たず＝inline、
	 * サイズは 0.8rem。実サイトは inline-flex / 0.82rem のままだった。
	 * inline に戻すと下線（border-bottom）が行ボックスではなく文字のすぐ下へ来るので、
	 * 上のコメントにあるオーナー指摘「下線が離れすぎ」の延長線上の修正になる。
	 * 元ルールはイマーシブが依存しうるので残し、標準だけ上書きする方針も同じ。 */
	display: inline;
	font-size: var(--tt-text-label);
	/* 行間もモックへ（2026-08-11・上の display 修正のあと突合ツールで測り直して発覚）。
	 * **display を inline に揃えた結果、今度は行間の差が表に出た**——モックの
	 * `.site-nav a` は line-height を持たず body から継承していて、**モックの body は 2.0**。
	 * 実サイトのトークン `--tt-leading-base` は **1.95** なので 25.6px 対 24.96px になり、
	 * 全12ページ×4リンク＝48件の差分として報告され続けていた。
	 * 0.64px なので見た目には出ないが、次の調査を邪魔するノイズなので潰す。
	 *
	 * `--tt-leading-base` そのものを 2.0 にするのは**全サイトに波及するので採らない**。
	 * 固有値は typography-spacing.css の規約どおり `calc(<固有値> * var(--tt-leading-scale))`
	 * で書き、文字余白プリセット（normal / wide / xwide）への追従を保つ。 */
	line-height: calc(2 * var(--tt-leading-scale));
}

/* グローバルナビの項目間隔をモックへ（2026-08-11・**トレードオフを実測したうえでオーナーが32pxを選択**）。
 * モックの `.site-nav` は gap 32px（`--tt-space-6`）、実サイトは nav > ul.site-nav__menu の
 * 構造で main.css:98-106 が gap 18px を持っていた。所有者はモード非限定の main.css なので、
 * 同じ選択子リストに同居するフッターメニューとイマーシブへ影響させないよう標準スコープで受ける。
 *
 * ⚠ 承知のうえで払っているコスト：モックの32pxは**メニュー4項目前提**。
 * 実測A/B（トップ・メニュー9項目・ヘッダーは height 69px 固定）：
 *   gap 32px → 1366px:1行 / **1280px:2行** / 1100px:3行
 *   gap 18px → 1366px:1行 /   1280px:1行   / 1100px:2行
 * つまり**折返しが始まる幅が 1100px から 1280px へ上がる**＝購入者がメニューを
 * 増やしたときの耐性が落ちる。2行になると文字が途中で折り返して破綻するのは
 * 18pxでも同じで、差は「何項目まで耐えるか」だけ。折返しそのものへの対策
 * （省略・横スクロール・ヘッダー高さの可変化・早めのハンバーガー化）は未実装。
 * 項目数の多いメニューを想定するならそちらを別途設計すること。 */
body.tiptop-standard-system .site-nav__menu {
	gap: var(--tt-space-6);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--tt-motion-duration-fast: 0s;
		--tt-motion-duration: 0s;
		--tt-motion-duration-slow: 0s;
		--tt-motion-duration-ui: 0s;
	}
}

/* ============================================================
   パン粉（2026-08-08・モック移行であやちゃん承認のうえ新設）
   出力は inc/breadcrumb.php 側で標準デザインのみに絞っているため、
   セレクタにモードスコープは付けない（イマーシブではDOMごと出ない）。
   base-system.css ではなくここに置くのは、hoverのtransitionを含むため
   （scripts/check-standard-scope.js が base-system.css の非イマーシブな
   transitionを禁止している）。
   ============================================================ */

.tiptop-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tt-space-2);
	margin: 0 0 var(--tt-space-5);
	padding: 0;
	list-style: none;
	color: var(--tiptop-muted);
	font-family: var(--tt-font-heading);
	font-size: var(--tt-text-meta);
	letter-spacing: 0.06em;
	/* 承認済みモックのパン粉は本文と同じ2.0の行間（_mockup/tiptop-shared.css は
	 * line-height を指定せず body の 2 を継承する）。1.9 だと11.52pxに対して
	 * 21.888pxとなり、モックの23.04pxより1px詰まっていた。あわせて素の倍率から
	 * calc() へ変え、「文字の余白」設定（--tt-leading-scale）へ追従させる（2026-08-09）。 */
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--tt-space-2);
	min-width: 0;
}

.tiptop-breadcrumb__item + .tiptop-breadcrumb__item::before {
	content: "/";
	color: var(--tiptop-border);
}

/* リンクの色と下線は色パレット側の共通ルール（html[data-tiptop-palette] a、詳細度0,1,2）に
 * 取られる。パン粉はナビゲーションで本文リンクではないため、色は親から継承させ下線も出さない。
 * クラスを2つ重ねて詳細度(0,2,1)にして勝たせている（!importantは使わない）。 */
.tiptop-breadcrumb .tiptop-breadcrumb__item a {
	color: inherit;
	text-decoration: none;
	transition: color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

.tiptop-breadcrumb .tiptop-breadcrumb__item a:hover,
.tiptop-breadcrumb .tiptop-breadcrumb__item a:focus-visible {
	color: var(--tiptop-accent);
	text-decoration: none;
}

/* 現在地は折り返さず省略する（長い記事タイトルで行が崩れるのを防ぐ） */
.tiptop-breadcrumb__item:last-child span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 32em;
}

/* ============================================================
   分類の絞り込みバー（2026-08-08・承認済みモックへの移行であやちゃん承認）
   出力は template-parts/filter-nav.php 側で標準デザインのみに絞っているため、
   セレクタにモードスコープは付けない（イマーシブではDOMごと出ない）。
   hoverのtransitionを含むので base-system.css ではなくここに置く。
   ============================================================ */

.tiptop-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-space-2);
	margin-bottom: var(--tt-space-7);
	padding-bottom: var(--tt-space-5);
	border-bottom: 1px solid var(--tiptop-border);
}

.tiptop-filter-bar__item {
	padding: 0.3em 1em;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-pill);
	color: var(--tiptop-muted);
	/* ブラウザ既定の下線を消す。ピル型のボタンなので下線は要らない。 */
	text-decoration: none;
	font-size: var(--tt-text-label);
	transition:
		border-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		background-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

.tiptop-filter-bar__item:hover,
.tiptop-filter-bar__item:focus-visible {
	border-color: var(--tiptop-contrast);
	color: var(--tiptop-contrast);
}

.tiptop-filter-bar__item.is-current {
	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));
}

/* サイドバーのウィジェットリンク（最近の記事/実績・カテゴリ・アーカイブ）は
 * ブラウザ既定の下線が残っていた。承認済みモックのサイドバーは下線を使わず
 * hoverの色変化だけなので、標準モードで下線を外す（イマーシブは現状維持）。
 * 本文中のリンクは対象外＝読み物の下線は残す。 */
body.tiptop-standard-system .tiptop-blog-widget a {
	text-decoration: none;
}

/* ============================================================
   サイドバーのウィジェット（2026-08-09・承認済みモックへの移行）
   実サイトは 1px枠＋22pxパディングの白カードだったが、モックは面を作らず
   「見出し＋罫線」だけで区切る。標準モード限定（イマーシブは現状維持）。
   所有者は blog-page.css の .tiptop-blog-widget（0,1,0）なので、
   body スコープを足した (0,2,0) で上書きしている。
   ============================================================ */

body.tiptop-standard-system .tiptop-blog-widget {
	/* モックの `.tiptop-blog-widget` は grid（row-gap 12px）で、見出しと中身の間隔は
	 * 「見出しの margin-bottom 16px ＋ row-gap 12px」＝**28px**になる（2026-08-11・実測）。
	 * 実サイトは block のままで見出しの12pxだけ＝**12px**と16px詰まっていた。
	 * 機構ごと合わせる（距離だけ合わせて margin を28pxにすると、突合ツールの
	 * プロパティ比較で新しい差分が出るうえモックの構造から離れる）。
	 * この差分は**隣接距離パスで初めて見つかった**（PR #872 で道具に足した項目）。 */
	display: grid;
	row-gap: var(--tt-space-3);
	padding: 0;
	border: 0;
	background: transparent;
}

body.tiptop-standard-system .tiptop-blog-sidebar__widgets {
	gap: var(--tt-space-7);
}

/* 見出しはモックの 0.92rem / 700（実サイトは 18.88px / 800 で本文より目立ちすぎていた）。
 * 行間もモックへ（2026-08-09）。モックの .sidebar-widget__title は line-height を指定せず
 * body の 2 を継承して 29.44px になるが、実サイトは main.css:682 の
 * calc(1.5 * ...) が漏れてきて 22.08px と7px以上詰まっていた。標準モードの所有は
 * このブロックなので、main.css へは触らずここで受ける。 */
body.tiptop-standard-system .tiptop-blog-widget__title {
	/* 下余白はモックの16px（2026-08-11）。上の row-gap 12px と合わせて28pxになる。 */
	margin-bottom: var(--tt-space-4);
	font-size: var(--tt-text-body);
	line-height: calc(2 * var(--tt-leading-scale));
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* 記事リストは上下の罫線で行を区切る。記事行はPHP側でサムネイル・日付・タイトルを
 * 1つのリンクにまとめているため、そのリンク自身をカードのレイアウト面にする。
 * カテゴリ・タグ・アーカイブは tiptop-blog-categories-list を持つテキストリンクのまま。 */
body.tiptop-standard-system .tiptop-blog-recent {
	border-top: 1px solid var(--tiptop-border);
}

body.tiptop-standard-system .tiptop-blog-recent li {
	padding-block: var(--tt-space-3);
	border-top: 0;
	border-bottom: 1px solid var(--tiptop-border);
}

body.tiptop-standard-system .tiptop-blog-recent li:first-child {
	padding-top: var(--tt-space-3);
}

body.tiptop-standard-system .tiptop-blog-recent a {
	display: grid;
	grid-template-columns: var(--tiptop-sidebar-row-columns, minmax(0, 1fr));
	gap: var(--tt-space-1) var(--tt-space-3);
	align-items: start;
	width: 100%;
	padding-block: var(--tiptop-sidebar-row-link-padding, 0);
	font-size: inherit;
	font-weight: 500;
	line-height: 1.7;
}

/* 記事行はリンク側へ上下paddingを移して、サムネイル・日付・タイトルを含む
 * 行全体をクリック領域にする。DOM順も日付→タイトルなので視覚順の反転は不要。 */
body.tiptop-standard-system .tiptop-blog-recent:not(.tiptop-blog-categories-list) li {
	--tiptop-sidebar-row-link-padding: var(--tt-space-3);
	padding-block: 0;
	font-size: var(--tt-text-note);
}

body.tiptop-standard-system .tiptop-blog-recent time {
	display: block;
	margin: 0 0 var(--tt-space-1);
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-meta);
	font-weight: 400;
}

/* サムネイルがある記事行は、リンクをモックと同じ「64px＋本文」の2カラムにする。
 * PHP側で本文（日付＋タイトル）を1つのラッパーへまとめたため、grid-rowの跨ぎや
 * position:absolute でサムネイルを逃がす迂回は不要になった。サムネイルが無い行は
 * --tiptop-sidebar-row-columns の既定1カラムでそのまま成立する。 */
body.tiptop-standard-system .tiptop-blog-recent:not(.tiptop-blog-categories-list) li:has(.tiptop-blog-recent__media) {
	--tiptop-sidebar-row-columns: 64px minmax(0, 1fr);
}

body.tiptop-standard-system .tiptop-blog-recent__media {
	position: static;
	display: block;
	width: 64px;
	height: 64px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--tt-radius-sm);
	background: var(--tiptop-surface-alt);
}

body.tiptop-standard-system .tiptop-blog-recent__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ブログカードのカテゴリバッジ（2026-08-09・承認済みモック）。
 * 出力は template-parts/content.php。日付と横並びにして、色はニュースの
 * 分類タグと同じ「アクセントの薄塗り・枠線なし」に揃える。 */
body.tiptop-standard-system .post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tt-space-3);
}

/* 標準デザインの分類バッジの契約はここ1本（2026-08-10・#853項目2 ／ #771項目1）。
 * 正解値は承認済みモックの .badge（_mockup/tiptop-shared.css:287）で、実測すると
 * ブログ一覧カードの実装だけが既に全項目一致していた。新しい値は決めず、その値へ
 * 残りの文脈（実績一覧・新着一覧の行・新着詳細・実績詳細）を寄せる。
 * 寄せる前は同じ「カテゴリバッジ」が5通りに分かれていた（1920pxで実測）：
 *   モック          padding 2.07/9.22・枠線なし・accent 10%・w500・行間21.888・高26.0
 *   ブログ一覧      同上（一致）
 *   実績一覧        塗りだけ 16%
 *   新着一覧        padding 4/12・1px枠・16%・高31.88
 *   新着詳細        padding 1.92/8.32・1px枠・16%・字間0.08em・大文字化・行間15.552
 *   実績詳細        **1つも当たっていない**（素のリンク・padding 0・角丸0・白地・#111）
 * letter-spacing / text-transform / min-height を明示するのは、新着詳細の
 * news-page.css:111（0,1,1）が持つ大文字化・0.08em・min-height 24px を、このセレクタ
 * （0,2,0）で確実に上書きするため。**イマーシブは1pxも動かさない**——このルールは
 * 標準スコープなので、news-page.css / immersive-content-pages.css の勝敗は変えない。
 * 塗りの 10% は承認済みモックの実値。共通の tint スケールは 6/16/30% しか持たず、
 * #767 で「ここだけのトークンは増やさない」と判断済みなので直値のまま置く。 */
body.tiptop-standard-system .post-card__terms--plain,
body.tiptop-standard-system .post-card__terms a,
body.tiptop-standard-system .tiptop-news-item__terms,
body.tiptop-standard-system .tiptop-news-detail__terms a,
body.tiptop-standard-system .tiptop-work-detail__terms a {
	display: inline-flex;
	align-items: center;
	min-height: 0;
	padding: 0.18em 0.8em;
	border: 0;
	border-radius: var(--tt-radius-pill);
	background: color-mix(in srgb, var(--tiptop-accent) 10%, var(--tiptop-base));
	color: var(--tiptop-accent);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	line-height: 1.9;
	text-decoration: none;
	text-transform: none;
}

body.tiptop-standard-system .post-card__terms a:hover,
body.tiptop-standard-system .post-card__terms a:focus-visible,
body.tiptop-standard-system .tiptop-news-detail__terms a:hover,
body.tiptop-standard-system .tiptop-news-detail__terms a:focus-visible,
body.tiptop-standard-system .tiptop-work-detail__terms a:hover,
body.tiptop-standard-system .tiptop-work-detail__terms a:focus-visible {
	background: var(--tiptop-accent);
	color: var(--tiptop-base);
}

/* Issue #767: standard blog cards use the approved mock's compact type scale.
 * Keep this scoped to blog surfaces so Works/Search retain their own card roles.
 * バッジの塗り（accent 10%）はブログ限定の上書きとして持っていたが、モックの
 * 全文脈で同じ値だったため 2026-08-10 に上の共通契約へ引き上げてこの節から外した。 */
body.tiptop-standard-system .tiptop-blog-page .post-card__title {
	font-size: var(--tt-text-card);
	line-height: calc(1.7 * var(--tt-leading-scale));
}

/* メタ行（日付＋分類バッジ）の余白をモックへ（2026-08-11・Issue #868 のB-4）。
 * モックの `.card__meta` は `margin: 0 0 8px` で、**バッジとタイトルの間が8px**。
 * 実サイトは `blog-page.css:136` が `margin: 10px 0 0`（上10px・下0）で、
 * バッジとタイトルが**0px**でくっついていた。
 * **距離パスで見つけた差分**——メタもタイトルも margin 0 の要素どうしを比べても出ない型。
 * 相手はモード非限定で、カテゴリ/タグ/日付アーカイブも同じ選択子リストに含まれる
 * （同じカード部品なのでモックのブログ一覧を正として同じ値にする）。 */
body.tiptop-standard-system .tiptop-blog-page .post-card__meta,
body.tiptop-standard-system .category .post-card__meta,
body.tiptop-standard-system .tag .post-card__meta,
body.tiptop-standard-system .date .post-card__meta {
	margin: 0 0 var(--tt-space-2);
}

body.tiptop-standard-system .tiptop-blog-page .post-card__excerpt {
	font-size: var(--tt-text-note);
	font-weight: 400;
	line-height: calc(1.95 * var(--tt-leading-scale));
}

/* サイドバーのリストのマーカー除去（2026-08-09）。
 * list-style: none は blog-page.css が持っているが、あのファイルはブログ系ページ
 * でしかenqueueされないため、実績/ニュースのサイドバーでは「・」が出ていた。
 * 全ページ共通ロードのこのファイルで担保する。 */
body.tiptop-standard-system .tiptop-blog-recent {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 実績一覧のカードはモックが「画像＋タイトル＋分類バッジ」の3点構成。
 * 日付は詳細ページの概要リスト（Year）に持たせているので一覧では出さず、
 * 抜粋もモックに無いので出さない（情報を減らす変更＝モック準拠の意図的判断）。 */
body.tiptop-standard-system .tiptop-works-page .post-card__meta time,
body.tiptop-standard-system .tiptop-works-page .post-card__excerpt {
	display: none;
}

/* サイドバーのテキストリンク系リストの基準サイズ（2026-08-09・実測突合）。
 * 記事カード行は上のより具体的な:not(.tiptop-blog-categories-list)で0.8remへ落とす。 */
body.tiptop-standard-system .tiptop-blog-recent li {
	font-size: var(--tt-text-note);
	line-height: 1.7;
}

/* サイドバーの検索欄（2026-08-09・実測突合）。
 * 高さ52px固定＋右padding12pxで、モック（高さ41px・padding 0.7em 0.2em・0.88rem）より
 * 一段大きかった。focus時に下線が濃くなる挙動自体は :focus-within で効いている。
 * 高さの所有者が (0,3,0) なので、フォームを1段挟んで (0,4,0) で上書きする。 */
body.tiptop-standard-system .tiptop-blog-widget--search .search-form .search-field,
body.tiptop-standard-system .tiptop-blog-widget--search form[role="search"] .search-field {
	height: auto;
	min-height: 0;
	padding: 0.7em 0.2em;
	font-size: var(--tt-text-body);
	/* 高さが52pxのままだったのは height ではなく行間の継承（2.3）が原因。
	 * padding 9.86px×2 ＋ 行間32.38px ＝ 52px。モックは line-height: normal で41px。 */
	line-height: normal;
}

/* ↑の line-height 修正だけでは高さが52pxのままだった真因（2026-08-09・実測）。
 * フォームは display: grid ＋ align-items: stretch で、**同じ行にいる送信ボタンが
 * 52×52 固定**（blog-page.css）。行の高さがボタン側で決まるため、
 * 入力欄に height: auto を書いてもストレッチで52pxに戻されていた。
 * モックはボタン列44px・アイコン17px・高さは入力欄の内容任せ（41px）なので、
 * ボタンの固定高さを外して列幅とアイコンをモック値へ揃える。
 * 教訓：grid/flexの子の高さが動かないときは、同じ行の兄弟の固有高さを見る。
 *
 * このファイルは全ページ共通ロードなので、.tiptop-blog-page が付かない
 * 実績/ニュースのサイドバーにも同じ寸法が届く（あちらは52px固定が元々効いていない）。 */
body.tiptop-standard-system .tiptop-blog-widget--search form.search-form {
	grid-template-columns: minmax(0, 1fr) 44px;
}

body.tiptop-standard-system .tiptop-blog-widget--search .search-form .search-submit,
body.tiptop-standard-system .tiptop-blog-widget--search form[role="search"] .search-submit {
	width: 44px;
	min-width: 44px;
	height: auto;
	min-height: 0;
}

body.tiptop-standard-system .tiptop-blog-widget--search .search-form .search-submit svg,
body.tiptop-standard-system .tiptop-blog-widget--search form[role="search"] .search-submit svg {
	width: 17px;
	height: 17px;
}

/* サービスページの小ラベル「Service」（2026-08-09）。
 * モックの2段見出しは小さい方がグレーだが、ここだけ #111 のままだった。
 * このページは h1 が長いキャッチコピーなので大小は入れ替えず、色だけ揃える。 */
body.tiptop-standard-system .tiptop-service-hero .tiptop-service-eyebrow {
	color: var(--tiptop-muted);
}


/* サイドバー検索欄のアクティブ表示（2026-08-09）。
 * front-component-unification.css の共通フォームfocus契約が、下線型のこの検索欄にも
 * offset 3px の実線 outline を当てていて、入力欄の全周に黒い太枠が出ていた。
 * モック（_mockup/tiptop-shared.css）は outline を消して「下線の色が濃くなる」だけ。
 *
 * 実測メモ：この検索欄の下線は input ではなく親の <form> の border-bottom が描いている
 * （input 側は border-width が全辺0）。モックは input に border-bottom を持たせているので、
 * モックから border-bottom-color を写しても空振りする。実サイトでは blog-page.css の
 * :focus-within が form の下線を #e4e4e4 → --tiptop-contrast(#111) に変えており、
 * これがフォーカスの可視性を担保している（実測で確認済み）。だからここは outline を
 * 消すだけでモックと同じ見え方になる。 */
body.tiptop-standard-system .tiptop-blog-widget--search .search-form .search-field:focus,
body.tiptop-standard-system .tiptop-blog-widget--search .search-form .search-field:focus-visible,
body.tiptop-standard-system .tiptop-blog-widget--search form[role="search"] .search-field:focus,
body.tiptop-standard-system .tiptop-blog-widget--search form[role="search"] .search-field:focus-visible {
	outline: none;
}

/* Issue #765: standard-mode Latin elements must follow the active font preset.
 * Dates share one mock contract; 404 code and the contact submit keep their
 * existing size/weight and only switch font family. */
body.tiptop-standard-system .tiptop-blog-page .post-card__meta time,
body.tiptop-standard-system .tiptop-news-page .tiptop-news-item__date,
body.tiptop-standard-system .tiptop-works-page .post-card__meta time,
body.tiptop-standard-system .tiptop-search-card time {
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-meta);
	font-weight: 400;
	line-height: 2;
}

body.tiptop-standard-system .tiptop-404-page__code {
	font-family: var(--tiptop-font-latin);
}

/* 送信ボタンの実ラベルは購入者のCF7設定次第で和文になる（既定「送信する」）。
 * font-family: var(--tiptop-font-latin) だと和文グリフが無く、front-font-presets.css
 * の input[type="submit"] 既定値 var(--tiptop-font-ui)（和文対応の --tiptop-font-mixed）
 * を上書きしてしまっていた。既定値と同じ和文対応フォントに揃える（2026-08-13 修正）。 */
body.tiptop-standard-system .tiptop-contact-page .tiptop-contact-entry__content .wpcf7 .wpcf7-form :is(input[type="submit"], button[type="submit"]) {
	font-family: var(--tiptop-font-ui);
}