/*
 * 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.
 *
 * Issue #1150：トークン定義（`:root` と `body.tiptop-standard-system`
 * の `--tt-*` ブロック）は assets/css/design-tokens.css へ分離した。このファイルは
 * 標準デザインの**見た目のルール**だけを持つ層で、子テーマが
 * `tiptop_theme_design_layer_enabled` を false にすると丸ごと外れる。
 */

/*
 * 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),
/* 選択肢（<select>）の上でもカーソルを指マークにする：
 * <select> はこの規約の対象なのに漏れていた。ブラウザ既定は default で、
 * 押せる場所だと分からない。無効時は下の :disabled ルール（not-allowed）が持つので
 * ここでは除外する。 */
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
	cursor: pointer;
}

/*
 * チェックボックス／ラジオは押せる範囲がラベルの文字まで広がる（クリックで
 * トグルする）ので、ラベル側にも指マークを出す。素の `label` 全体に当てると
 * テキスト入力欄のラベルまで指マークになってしまうため、対象は
 * 「チェックボックス／ラジオを伴うラベル」だけに限定する。
 * マークアップの型が2つあるので両方拾う：
 *   - CF7 の [acceptance]      → <label><input type="checkbox">…</label>（内包）
 *   - WordPress のコメント同意 → <input type="checkbox"><label for="…">…（兄弟）
 * cursor は継承するので、ラベルに当てれば中の文字とチェックボックスにも届く。
 */
label:has(input:is([type="checkbox"], [type="radio"]):not(:disabled)),
input:is([type="checkbox"], [type="radio"]):not(:disabled) + label {
	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: var(--tt-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, by design 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: var(--tt-shadow-card);
}

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

/* #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 {
	letter-spacing: 0.14em;
}
.tiptop-front-content h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-section);
	line-height: 1.48;
}

.tiptop-front-content .card > h3 {
	letter-spacing: 0.14em;
}

.tiptop-front-content .card > h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-card);
	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を戻す（意図した仕様）。
 * 以前に確定した「標準はhoverのtransitionを撤去し0秒で即時切替」を、モックの
 * 手触りに合わせる判断で意図的に上書きする（経緯は旧 docs/standard-immersive-contract.md。
 * 削除済みのためgit履歴を参照）。
 * 動かすのは色・枠線・下線だけで、レイアウトに影響するプロパティ（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);
}

/* グローバルナビの下線を文字のすぐ下へ（下線が文字から離れすぎていた）。
 * 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;
	/* 同じ元ルール（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);
	/* 行間もモックへ（上の 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));
}

/* グローバルナビの項目間隔をモックへ（**トレードオフを実測したうえで意匠上の判断として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-ui: 0s;
	}
}

/* ============================================================
   パン粉（モック移行で新設）
   出力は 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）へ追従させる。 */
	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;
}

/* ============================================================
   分類の絞り込みバー（承認済みモックへの移行）
   出力は 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;
}

/* ============================================================
   サイドバーのウィジェット（承認済みモックへの移行）
   実サイトは 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**になる（実測）。
	 * 実サイトは 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 で本文より目立ちすぎていた）。
 * 行間もモックへ。モックの .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。上の 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);
}

/* 行の罫線とpaddingは直下のliだけが持つ（モックの .sidebar-widget > ul > li と同じ）。
 * 子孫セレクタだと子カテゴリの li にも下線が付き、最後の子の線と親の線が並んで
 * 二重線になっていた。 */
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 {
	padding-block: 0;
}
body.tiptop-standard-system .tiptop-blog-recent:not(.tiptop-blog-categories-list) li:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	--tiptop-sidebar-row-link-padding: var(--tt-space-3);
	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;
}

/* ブログカードのカテゴリバッジ（承認済みモック）。
 * 出力は 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本（#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));
	/* 地と同系色なので accent の明度が上がるほど読めなくなる（Issue #1161）。
	 * 文字だけトークン経由にして、自由配色のときは可読性を保証した値が入る。
	 * 既定は accent なので標準12パレットの見え方は変わらない。
	 * フォールバックは data-tiptop-palette が付かない経路（プレビュー等）への保険。 */
	color: var(--tiptop-badge-text, var(--tiptop-accent));
	font-size: var(--tt-text-meta);
	font-weight: 500;
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	/* 行間をモックへ（Issue #1022 の (B)・意図した仕様）。1.9 だった。
	 * 承認済みモックの `.badge` は front / news / blog / works / news-single /
	 * work-single / blog-single の**7ファイルすべて 11.52px・行間19.584px（＝1.7倍）・
	 * 高さ23.69px**で完全に一致していた。
	 * このルールが7ページ・バッジ30個のうち**27個の勝者**（残る3個はトップの新着行で、
	 * front-page-adjustments-rules.css の詳細度31が同じ1.7を持って勝つ）。
	 * **トップ側の上書きは外せない**——base-system.css の詳細度30が
	 * `--tt-leading-base`(1.95) と `--tt-leading-tight`(1.35) を持っていて共通側より
	 * 強いため、外すと1.7ではなくそちらが当たる（CSSOMで所有者を確認済み。
	 * ai-agent-guide.md §2-2-17）。
	 * 倍率は直値でなく `--tt-leading-scale` を掛ける形にする——余白プリセットに
	 * 追従させるのが他の行間指定と揃った書き方（トップ側の上書きも同じ形）。 */
	line-height: calc(1.7 * var(--tt-leading-scale));
	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%）はブログ限定の上書きとして持っていたが、モックの
 * 全文脈で同じ値だったため上の共通契約へ引き上げてこの節から外した。 */
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));
}

/* メタ行（日付＋分類バッジ）の余白をモックへ（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));
}

/* サイドバーのリストのマーカー除去。
 * 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;
}

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

/* サイドバーの検索欄（実測突合）。
 * 高さ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のままだった真因（実測）。
 * フォームは 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」。
 * モックの2段見出しは小さい方がグレーだが、ここだけ #111 のままだった。
 * このページは h1 が長いキャッチコピーなので大小は入れ替えず、色だけ揃える。 */
body.tiptop-standard-system .tiptop-service-hero .tiptop-service-eyebrow {
	color: var(--tiptop-muted);
}


/* サイドバー検索欄のアクティブ表示。
 * 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）
 * を上書きしてしまっていた。既定値と同じ和文対応フォントに揃える。 */
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);
}