/*! bundle-source: assets/css/main.css */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--tiptop-contrast);
	font-family: var(--tiptop-font-body, var(--tt-font-body, sans-serif));
	/* 生値 16px はモック（--tt-text-body = 0.92rem = 14.72px）と食い違っていた（Issue #947）。
	 * 実測では、明示的に --tt-text-* を当てている要素はモックと一致しており、差が出るのは
	 * body から素で継承している文字だけ＝全10ページで15件（固定ページの <strong> 13件・
	 * 検索の件数表示1件・404の説明文1件）。その15件を揃えるためにトークン参照へ戻す。
	 * 2026-08-18・Issue #947。 */
	font-size: var(--tt-text-body);
	line-height: calc(1.95 * var(--tt-leading-scale));
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	color: var(--tiptop-primary);
	text-underline-offset: 0.18em;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
}

.content-area,
.site-header__inner,
.site-footer__inner {
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tiptop-site-width));
	margin-inline: auto;
}

.narrow {
	max-width: var(--tiptop-text-width);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid rgba(23, 23, 23, 0.1);
}

/* 地を外したヘッダーは、見えていない帯がクリックを吸う。.site-header は
 * position:sticky で画面上端に居座るので、地が無いと「ロゴとハンバーガー以外は
 * 素通しに見えるのに押せない」帯が、ページのどこにいてもできる。エラーも出ず
 * 目視でも分からない（Issue #1283）。
 *
 * 標準デザインは base-system.css が .site-header に地を敷いているので既定では
 * 何もしない。逆に一律で抜くと、地のある帯で「隠れて見えない裏のリンクが押せる」
 * 事故になる。地を外した案件が body に tiptop-header-transparent を付ける。
 *
 * ⚠ 器（.site-header__inner）も抜くこと。inner は中央寄せでも高さいっぱいを
 * 占めるので、帯だけ抜いても inner の矩形が吸ったままになる。 */
body.tiptop-header-transparent .site-header,
body.tiptop-header-transparent .site-header .site-header__inner {
	pointer-events: none;
}

body.tiptop-header-transparent .site-header > :not(.site-header__inner),
body.tiptop-header-transparent .site-header .site-header__inner > * {
	pointer-events: auto;
}

.site-header__inner {
	min-height: 78px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.site-branding {
	flex: 0 0 auto;
}

.site-branding__title {
	color: var(--tiptop-contrast);
	font-weight: 500;
	font-size: var(--tt-text-logo);
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	text-decoration: none;
}

.custom-logo {
	max-width: 220px;
	height: auto;
}

.site-nav {
	flex: 1 1 auto;
}

.site-nav__menu,
.site-footer__menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.site-nav__menu {
	justify-content: flex-end;
}

.site-nav a:not(:where(.tiptop-own-color, .tiptop-own-color *)),
.site-footer a:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-contrast);
}

/* load-bearing: .site-footer a の font-weight/text-decoration は immersive が再宣言せず実サイトで生存。フッター監査で消さない（M2 S4・base層）。 */
.site-nav a,
.site-footer a {
	font-weight: 700;
	text-decoration: none;
}

.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	font-size: var(--tt-text-label);
	font-weight: 600;
}

.site-nav .is-current > a,
.site-nav a:hover {
	border-bottom-color: var(--tiptop-primary);
	color: var(--tiptop-primary);
}

.site-social-links {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.site-social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
	border-radius: var(--tt-radius-pill);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-social-links__link:hover,
.site-social-links__link:focus-visible {
	border-color: var(--tiptop-contrast);
	color: var(--tiptop-contrast);
	transform: translateY(-1px);
}

.site-social-links__link svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
	stroke: none;
}

.site-header__cta,
.site-mobile-panel__cta,
.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.72rem 1.35rem;
	font-weight: 700;
	font-size: var(--tt-text-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

/* ハンバーガー：標準デザインは面も枠も作らないので線3本だけ。
 * margin-right の -11px は、44px角の中で線が22pxしかない分の右余りを
 * 打ち消して線の右端をコンテナの端へ光学的に揃えるため。 */
.site-menu-toggle {
	--tt-menu-line-width: 1.5px;
	--tt-menu-line-gap: 5px;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--tt-menu-line-gap);
	flex: none;
	width: 44px;
	height: 44px;
	margin-right: -11px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tiptop-contrast);
	cursor: pointer;
}

.site-menu-toggle__line {
	display: block;
	width: 22px;
	height: var(--tt-menu-line-width);
	background: currentColor;
	transition: transform var(--tt-motion-duration-fast) ease, opacity var(--tt-motion-duration-fast) ease;
}

/* 開いたら3本を × に組み替える。動かす量は隣り合う線の中心どうしの間隔＝
 * 線の間隔 ＋ 線の太さ。--tt-menu-line-gap / --tt-menu-line-width を子テーマで
 * 変えても2本が中心で交わる（既定値では 5px + 1.5px = 6.5px で従来と同じ）。
 * .is-open は assets/js/main.js が付ける。 */
.site-menu-toggle.is-open .site-menu-toggle__line:nth-child(1) {
	transform: translateY(calc(var(--tt-menu-line-gap) + var(--tt-menu-line-width))) rotate(45deg);
}

.site-menu-toggle.is-open .site-menu-toggle__line:nth-child(2) {
	opacity: 0;
}

.site-menu-toggle.is-open .site-menu-toggle__line:nth-child(3) {
	transform: translateY(calc(-1 * (var(--tt-menu-line-gap) + var(--tt-menu-line-width)))) rotate(-45deg);
}

.site-mobile-panel {
	display: none;
}

.site-mobile-panel[hidden] {
	display: none !important;
}

/* 開いたときフォーカスを受けるのは枠自身（JSが tabindex="-1" を付ける）。
 * 読み上げの起点にするためだけなので輪郭は出さない。 */
.site-mobile-panel:focus {
	outline: none;
}

@keyframes tt-mobile-panel-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* パネルを開いている間は背面を動かさない。クラスは assets/js/main.js が
 * html と body の両方へ付ける。ここで body ではなく html を対象にするのは、
 * body に overflow:hidden を当てると .site-header の position:sticky が効かなく
 * なり、スクロール中に開いたときヘッダーが画面外へ飛ぶため（実測で確認）。 */
html.has-mobile-menu-open {
	overflow: hidden;
}

/* パネルは aria-modal="true" のダイアログなので、背面のフローティング
 * ボタンを重ねない。.back-to-top は z-index:9998 でパネル(1)より上に出る
 * ため、詳細度(0,2,0)で打ち消す。 */
html.has-mobile-menu-open .back-to-top {
	display: none;
}

.site-mobile-nav__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--tiptop-border);
}

.site-mobile-nav__menu li {
	border-bottom: 1px solid var(--tiptop-border);
}

.site-mobile-nav__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tt-space-4);
	min-height: 56px;
	padding-block: var(--tt-space-3);
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-card);
	font-weight: var(--tiptop-font-weight-heading);
	line-height: 1.7;
	text-decoration: none;
	transition: color var(--tt-motion-duration-fast) ease;
}

/* 現在地は面を塗らずに文字色だけ変える。 */
.site-mobile-nav__menu .is-current > a {
	color: var(--tiptop-accent);
}

/* 右端の「>」。SVGを項目の数だけ置く代わりに罫線2本で作る。 */
.site-mobile-nav__menu a::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--tiptop-muted);
	border-right: 1px solid var(--tiptop-muted);
	transform: rotate(45deg);
}

.site-mobile-social {
	display: flex;
	gap: var(--tt-space-3);
	margin-top: var(--tt-space-6);
}

/* タップ領域を44px角へ。罫線色と文字色は color-palettes.css の
 * html[data-tiptop-palette] .site-mobile-panel .site-social-links__link が持つので触らない。 */
.site-mobile-social__link {
	width: 44px;
	height: 44px;
}

/* 2026-08-10：下余白を12px→16pxへ。承認済みモックの .eyebrow
 * （_mockup/tiptop-shared.css:189）は margin: 0 0 var(--tt-space-4)＝16px。
 * 拡張したモック突合ツール（scripts/mock-diff.js）が margin を比較項目へ入れて
 * 初めて見えた差分。旧ツールは7項目しか見ておらず margin が対象外だったため、
 * 「eyebrowの下線をモックへ揃えた」PR #835 の時点でも残差として残っていた。 */
.hero__eyebrow,
.section__eyebrow {
	margin: 0 0 16px;
}

.process-list span {
	color: var(--tiptop-primary);
	font-size: var(--tt-text-label);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	text-transform: uppercase;
}



.archive-hero {
	padding: 88px 0 78px;
}

.archive-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
	gap: 56px;
	align-items: center;
}

.archive-hero__inner.has-no-hero-image {
	display: block;
	max-width: 820px;
}

.archive-hero__eyebrow {
	margin: 0 0 10px;
}

.archive-hero__title {
	margin: 0;
}

.archive-hero__lead {
	max-width: 680px;
	margin: 22px 0 0;
	color: var(--tiptop-muted);
}

.archive-hero__image {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--tiptop-surface);
}

.archive-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section {
	padding: 96px 0;
}

.section--intro {
	padding: 0 0 96px;
	background: transparent;
}

.entry__title {
	margin-top: 0;
}


.section h2{
	margin-top: 0;
}

.section h2 {
	max-width: 760px;
}

.section-heading-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.section-heading-row h2 {
	margin-bottom: 0;
}

.section-action {
	margin: 34px 0 0;
}

.content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 54px;
	align-items: start;
}

.content-layout:not(.has-sidebar) {
	grid-template-columns: minmax(0, 1fr);
}

.content-primary {
	min-width: 0;
}

.card-grid,
.post-list,
.legacy-new-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-top: 42px;
}

/* 件数で切り替える列モディファイア（#1138・モック shared.css の .card-grid--3 / --4 が正本）。
 * `.card-grid` を重ねて詳細度を 0,2,0 にしているのは、responsive-fixes.css が 820px以下で
 * `.card-grid { grid-template-columns: 1fr }` を当てており、0,1,0 だと 781〜820px の帯で
 * 後勝ちされてモックの段（960px→2列 / 781px→1列）が再現できないため。!important は使わない。
 * `--2` はモックに無いテーマ側の追加。モックの `.card-grid` は既定2列だが、テーマの
 * `.card-grid` は既定3列なので、2件のときも明示のモディファイアが要る。 */
.card-grid.card-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.card-grid.card-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {
	.card-grid.card-grid--3,
	.card-grid.card-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.card-grid.card-grid--2,
	.card-grid.card-grid--3,
	.card-grid.card-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.content-layout .post-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card h3 {
	margin-top: 0;
}

.post-card {
	overflow: hidden;
}

.post-card__image {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--tiptop-surface);
}

.post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__body {
	padding: 24px;
}

.post-card__title a {
	color: var(--tiptop-contrast);
	text-decoration: none;
}

.entry__meta,
.site-footer__copyright {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-body);
}

.term-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.news-list {
	margin-top: 42px;
	border-top: 1px solid var(--tiptop-border);
}

.news-item {
	display: grid;
	align-items: start;
	border-bottom: 1px solid var(--tiptop-border);
}

.news-item__meta {
	display: grid;
	gap: 8px;
}

.section--process {
	background: var(--tiptop-contrast);
	color: var(--tiptop-base);
}

.section--process h2 {
	color: var(--tiptop-base);
}

.process-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 42px;
}

.process-list article {
	min-height: 220px;
	padding: 28px;
	border: 1px solid var(--tiptop-contrast-surface-border);
	border-radius: var(--tt-radius-none);
	background: color-mix(in srgb, var(--tiptop-base) var(--tt-tint-faint), transparent);
}

.process-list h3 {
	margin: 18px 0 12px;
}

.process-list h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-card);
}

.process-list p {
	margin: 0;
	color: var(--tiptop-contrast-surface-muted, color-mix(in srgb, var(--tiptop-base) 72%, transparent));
}

.service-detail-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.service-detail {
	padding: 30px;
	border: 1px solid rgba(23, 23, 23, 0.1);
	border-radius: var(--tt-radius-none);
	background: var(--tiptop-base);
}

.service-detail span {
	color: var(--tiptop-primary);
	font-size: var(--tt-text-note);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

.service-detail h2 {
	margin: 14px 0;
}

.service-detail h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-section);
}

.service-detail p {
	color: var(--tiptop-muted);
}

.service-detail ul {
	display: grid;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.service-detail li {
	position: relative;
	padding-left: 18px;
	font-weight: 700;
}

.service-flow {
	max-width: 940px;
}

.service-flow__list {
	display: grid;
	gap: 14px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: service-flow;
}

.service-flow__list li {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding: 24px;
	border: 1px solid rgba(23, 23, 23, 0.1);
	border-radius: var(--tt-radius-none);
	background: color-mix(in srgb, var(--tiptop-base) 78%, transparent);
	counter-increment: service-flow;
}

.service-flow__list li::before {
	color: var(--tiptop-primary);
	font-weight: 700;
	content: "STEP " counter(service-flow);
}

.service-flow__list strong,
.service-flow__list span {
	display: block;
}

.service-flow__list span {
	color: var(--tiptop-muted);
}

.news-item__title {
	margin: 0;
	font-size: var(--tt-text-card);
	line-height: calc(1.6 * var(--tt-leading-scale));
}

.news-item__title a {
	color: var(--tiptop-contrast);
	text-decoration: none;
}

.entry {
	padding: 86px 0;
}

.entry--front {
	padding: 0;
}

.content-layout .entry {
	padding-top: 72px;
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.entry__image {
	margin: 0 0 40px;
}

.entry__image img {
	width: 100%;
	border-radius: var(--tt-radius-none);
}

.entry__content > * {
	margin-block-start: 0;
	margin-block-end: 1.75rem;
}

.tiptop-front-content > *:last-child,
.tiptop-page-content > *:last-child {
	margin-bottom: 0;
}

.contact-page-intro {
	max-width: 760px;
	margin: 0 auto 34px;
	text-align: center;
}

.tiptop-contact-form {
	display: grid;
	gap: 18px;
}

.tiptop-contact-form label {
	display: grid;
	gap: 8px;
	color: var(--tiptop-contrast);
	font-weight: 700;
}

.tiptop-contact-form .required {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 22px;
	padding: 0.08rem 0.46rem;
	border-radius: var(--tt-radius-pill);
	background: rgba(207, 63, 46, 0.1);
	color: var(--tiptop-primary);
	font-size: var(--tt-text-meta);
	line-height: calc(1.3 * var(--tt-leading-scale));
}

.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	padding: 0.78rem 0.9rem;
	color: var(--tiptop-contrast);
	font: inherit;
}

.wpcf7 textarea {
	resize: vertical;
}

.wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 48px;
	padding: 0.78rem 1.6rem;
	border: 0;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.wpcf7-list-item {
	margin-left: 0;
}

.wpcf7-not-valid-tip,
.wpcf7-response-output {
	font-size: var(--tt-text-note);
}

.blog-comments {
	margin: 56px 0 76px;
	padding-top: 40px;
	border-top: 1px solid var(--tiptop-border);
}

.site-sidebar {
	position: sticky;
	top: 102px;
	padding: 72px 0 86px;
}

.sidebar-section {
	padding: 24px;
	border: 1px solid rgba(23, 23, 23, 0.1);
	border-radius: var(--tt-radius-none);
	background: color-mix(in srgb, var(--tiptop-base) 86%, transparent);
}

.sidebar-section + .sidebar-section {
	margin-top: 18px;
}

.tiptop-sidebar-widget__title {
	margin: 0 0 16px;
	font-size: var(--tt-text-card);
	font-weight: 700;
	letter-spacing: calc(0.06em + var(--tt-letter-add));
	line-height: calc(1.5 * var(--tt-leading-scale));
}

.sidebar-section .search-form {
	display: grid;
	gap: 10px;
}

.sidebar-section .search-field {
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-none);
	background: var(--tiptop-base);
	font: inherit;
}

.sidebar-list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-list li {
	margin: 0;
}

.sidebar-list a {
	display: inline-block;
	color: var(--tiptop-contrast);
	font-weight: 700;
	line-height: calc(1.55 * var(--tt-leading-scale));
	text-decoration: none;
}

.sidebar-list a:hover {
	color: var(--tiptop-primary);
}

.sidebar-list time {
	display: block;
	margin-top: 4px;
	color: var(--tiptop-muted);
	font-size: var(--tt-text-meta);
	line-height: calc(1.4 * var(--tt-leading-scale));
}

.sidebar-list--compact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sidebar-list--compact a {
	padding: 0.32rem 0.62rem;
	border: 1px solid rgba(20, 108, 112, 0.22);
	border-radius: var(--tt-radius-pill);
	color: var(--tiptop-accent);
	font-size: var(--tt-text-note);
}

.sidebar-section--accent {
	background: var(--tiptop-contrast);
	color: var(--tiptop-base);
}

.sidebar-section--accent p {
	margin: 0 0 14px;
	color: var(--tiptop-contrast-surface-muted, color-mix(in srgb, var(--tiptop-base) 72%, transparent));
}

.sidebar-section--accent p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-body);
}

.sidebar-section--accent .sidebar-section__title {
	color: var(--tiptop-base);
}

/* 節見出しと返信フォーム見出しは役割が異なるため、文字サイズの段を分ける。 */
.blog-comments__title {
	margin-top: 0;
	font-size: var(--tt-text-section);
}

.comment-reply-title {
	margin-top: 0;
	font-size: var(--tt-text-card);
}

.blog-comments__list {
	margin: 0 0 32px;
	padding-left: 1.25rem;
}

.blog-comments .comment {
	margin-bottom: 20px;
}

.blog-comments .comment-meta,
.blog-comments .comment-metadata,
.blog-comments .reply {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-meta);
}

.blog-comments input:not([type="submit"]),
.blog-comments textarea {
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-none);
	font: inherit;
}

.blog-comments input[type="submit"] {
	border: 0;
	cursor: pointer;
}

.tiptop-front-toolbar-shell {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	height: 68px;
	color: var(--tiptop-contrast);
}

.tiptop-front-toolbar {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	display: grid;
	gap: 10px;
	width: min(360px, calc(100vw - 24px));
	max-height: min(80svh, 560px);
	padding: 14px;
	overflow-y: auto;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-top: 3px solid var(--tiptop-primary);
	border-radius: 12px;
	background: #171717;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.tiptop-front-toolbar[hidden],
.tiptop-front-toolbar-toggle[hidden] {
	display: none !important;
}

.tiptop-front-toolbar__label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tiptop-front-toolbar__label strong {
	color: #ffffff;
	font-size: var(--tt-text-label);
	letter-spacing: var(--tt-letter-label, 0.12em);
	line-height: calc(1.35 * var(--tt-leading-scale));
}

.tiptop-front-toolbar__status,
.tiptop-front-toolbar__pv {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #9c9c9c;
	font-size: var(--tt-text-meta);
	line-height: calc(1.35 * var(--tt-leading-scale));
}

.tiptop-front-toolbar__status-dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3ecf6e;
}

.tiptop-front-toolbar__pv svg {
	flex-shrink: 0;
	opacity: 0.7;
}

.tiptop-front-toolbar__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.tiptop-front-toolbar__divider {
	grid-column: 1 / -1;
	height: 1px;
	margin: 2px 0;
	background: rgba(255, 255, 255, 0.14);
}

.tiptop-front-toolbar__links a,
.tiptop-front-toolbar-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0.5rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 9px;
	background: #f2f2f0;
	color: #171717;
	font: inherit;
	font-size: var(--tt-text-label);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	word-break: keep-all;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tiptop-front-toolbar__links a:hover,
.tiptop-front-toolbar-toggle:hover {
	border-color: #171717;
	background: #ffffff;
	color: #171717;
	transform: none;
}

.tiptop-front-toolbar__link-icon {
	flex-shrink: 0;
}

.tiptop-front-toolbar-toggle {
	width: 26px;
	height: 42px;
	padding: 0;
	border: 0;
}

.tiptop-front-toolbar-toggle__icon {
	display: inline-flex;
}

/* フッター base層：本体の色/背景/グリッドは immersive-system.css が上書き(正本)。immersive が再宣言しない宣言のみ実サイトで生存。M2 S4(2026-07-18)で base層として意図的に保持＝フッター監査での一括削除禁止。 */
.site-footer {
	margin-top: auto;
	padding: 64px 0;
	background: var(--tiptop-contrast);
	color: var(--tiptop-base);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	align-items: start;
	gap: 64px;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
}

.site-footer__title {
	margin: 0 0 24px;
	font-weight: 400;
	font-size: var(--tt-text-logo);
	letter-spacing: calc(0.24em + var(--tt-letter-add));
	line-height: 1;
}

.site-footer__lead {
	max-width: 30em;
	margin: 0;
	color: var(--tiptop-contrast-surface-muted, color-mix(in srgb, var(--tiptop-base) 72%, transparent));
	line-height: calc(1.9 * var(--tt-leading-scale));
}

.site-footer__copyright {
	margin: 40px 0 0;
	color: var(--tiptop-contrast-surface-muted, color-mix(in srgb, var(--tiptop-base) 50%, transparent));
	font-size: var(--tt-text-meta);
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	text-align: center;
}

.site-footer a:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-base);
}

.site-footer__aside {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	gap: 28px;
}

.site-footer__menu {
	justify-content: flex-end;
}

.site-footer-social {
	display: flex;
	justify-content: flex-end;
	gap: 14px;
}

.site-footer-social .site-social-links__link {
	width: 52px;
	height: 52px;
}

.site-footer-social .site-social-links__link svg {
	width: 20px;
	height: 20px;
}

.nav-links {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 40px 0;
}

.tiptop-no-sidebar .sidebar,
.tiptop-no-sidebar .widget-area,
.tiptop-no-sidebar aside[role="complementary"] {
	display: none !important;
}

@media (max-width: 820px) {
	body {
		/* モックと同じ 0.92rem。main.css には body ルールが4つあり、後勝ちで効くのはここ（Issue #947）。 */
		font-size: var(--tt-text-body);
		line-height: calc(1.9 * var(--tt-leading-scale));
	}

	.content-area,
	.site-header__inner,
	.site-footer__inner {
		width: min(calc(100% - var(--tt-gutter-tablet)), var(--tiptop-site-width));
	}

	.site-header__inner {
		min-height: 64px;
		align-items: center;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 40px;
	}

	.site-footer__menu {
		justify-content: flex-start;
	}

	.site-footer-social {
		justify-content: flex-start;
	}

	.site-footer__menu {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.section-heading-row {
		align-items: flex-start;
		flex-direction: column;
	}

	.content-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.content-layout .entry {
		padding-top: 58px;
	}

	.site-sidebar {
		position: static;
		padding: 0 0 68px;
	}

	.card-grid,
	.post-list,
	.legacy-new-list {
		grid-template-columns: 1fr;
	}

	.service-detail-grid {
		grid-template-columns: 1fr;
	}

	.service-flow__list li {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.archive-hero__inner,
	.archive-hero__inner.has-no-hero-image {
		display: block;
	}

	.archive-hero__image {
		margin-top: 32px;
	}

	.news-item {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.archive-hero,
	.section {
		padding: 68px 0;
	}

	.process-list {
		grid-template-columns: 1fr;
	}

	.tiptop-front-toolbar {
		border-radius: 12px;
	}

	.tiptop-front-toolbar__label {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
		text-align: left;
	}

	.tiptop-front-toolbar__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* ヘッダーのナビ／SNSをハンバーガーへ切り替える境界（2026-08-10・Issue #834）。
 * 上の 820px ブロックから切り出して 781px へ下げた。承認済みモック
 * （_mockup/tiptop-current.css:783・_mockup/tiptop-shared.css:704）は 781px以下で
 * .site-nav と .site-social を隠すが、実サイトは 820px以下で隠しており、
 * 782〜820px の39pxの帯だけ実サイトがハンバーガーになっていた。
 *
 * ⚠ 820pxブロックはナビ以外（body の font-size / 各種コンテナ幅 / フッターの
 * 縦積み / .content-layout / .card-grid など）も持っているので、**ブロックごと
 * 動かさない**。ここへ持ってくるのは表示切替の2ルールだけ。
 *
 * ⚠ .site-mobile-panel 系の宣言は 820px に残してある。782〜820px ではハンバーガーが
 * 出ないのでパネルは開けず無害だが、イマーシブは独自に ≤1000px でハンバーガーを
 * 出しているため、こちらを動かすとイマーシブのパネルの見た目が 782〜820px で変わる。
 *
 * イマーシブへの影響はない：base-system.css:2636 の @media (max-width: 1000px) に
 * モードスコープ付き（詳細度が上）の同じ切替があり、782〜820px でもそちらが
 * ナビを隠してハンバーガーを出す。つまりイマーシブの実効境界は元から 1000px。 */
@media (max-width: 781px) {
	.site-nav,
	.site-header__cta,
	.site-social {
		display: none;
	}

	.site-menu-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	/* ヘッダーの「相談する」を右端へ（2026-08-16・オーナー指摘）。承認済みモックは
	 * .site-header__inner > .button に margin-left:auto を持たせ、ロゴは左、
	 * ボタンとハンバーガーが右にまとまる形。実サイトはハンバーガー側だけに auto が
	 * あったため、ボタンがロゴの直後に残っていた（実測：モックは内側右から49pxの
	 * ところ実サイトは266.6px）。2つ目のルールは、flexで auto マージンが2つあると
	 * 余白を分け合ってボタンが中央へ寄ってしまうのを防ぐための打ち消し。 */
	.site-header__cta {
		margin-left: auto;
	}

	.site-header__cta ~ .site-menu-toggle {
		margin-left: 0;
	}

	/* パネルはヘッダーの下を全面で覆う。.site-header は position:sticky /
	 * z-index:20 なので、その中に置いた fixed の子はヘッダーと同じ層に載る
	 * ＝本文より前に出る。header.php の要素の並びを変えないこと。
	 *
	 * 上端と左右余白は assets/js/main.js が開くたびに実測して
	 * --tt-panel-top / --tt-panel-inline に入れる。固定値にできないのは、
	 * 配布テーマで .custom-logo に max-height が無く客先のロゴ画像で
	 * ヘッダー高が変わること、そしてコンテナ幅がサイト幅のユーザー設定
	 * （960〜1440px）と 100% - --tt-gutter-desktop の min() で決まること
	 * による。フォールバックは 63px（min-height 62px ＋ 罫線1px）と 16px。 */
	.site-mobile-panel:not([hidden]) {
		display: block;
		position: fixed;
		inset: var(--tt-panel-top, 63px) 0 0;
		z-index: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--tt-space-6) var(--tt-panel-inline, 16px) var(--tt-space-8);
		background: var(--tiptop-base);
		animation: tt-mobile-panel-in var(--tt-motion-duration-fast) ease;
	}

	.site-mobile-panel__cta {
		width: 100%;
		min-height: 44px;
		margin-top: var(--tt-space-7);
	}

	/* パネルの中にも全幅のCTAが入るので、開いている間はヘッダー側を隠す。
	 * display:none にすると × が左へ飛ぶので visibility で場所は残す。
	 * base-system.css が ≤820px で .site-header__cta を display:inline-flex に
	 * 戻しているが、こちらは visibility なので競合しない。 */
	body.has-mobile-menu-open .site-header__cta {
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.site-social-links__link,
	.site-header__cta,
	.site-mobile-panel__cta,
	.button,
	.wp-block-button__link {
		transition: none;
	}

	.site-social-links__link:hover,
	.site-social-links__link:focus-visible {
		transform: none;
	}

	/* 既存の transition 停止だけではパネルのフェード（animation）が残る。 */
	.site-mobile-panel:not([hidden]) {
		animation: none;
	}
}

/* Template monochrome layer.
 * 色トークンの正本は design-system.css :root（main.css の直後にロードされ
 * 同値で上書きしていたため、重複10キーは 2026-07-18 の浄化で削除）。
 * ここに残すのは design-system に無い幅トークンのみ。--tiptop-site-width は
 * enqueue.php の wp_add_inline_style('tiptop-main') がユーザー設定値で
 * 上書きする（inline は main.css 直後＝design-system より前に出るため、
 * この2つを design-system.css へ移すと設定値が潰れる。移動禁止）。 */
:root {
	--tiptop-site-width: 1040px;
	--tiptop-text-width: 720px;
}

html {
	letter-spacing: 0;
}

body {
	background: var(--tiptop-base);
	color: var(--tiptop-text);
	/* モックと同じ 0.92rem。main.css には body ルールが4つあり、後勝ちで効くのはここ（Issue #947）。 */
	font-size: var(--tt-text-body);
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.28em;
}

.site-header {
	border-bottom: 1px solid var(--tiptop-border);
	box-shadow: var(--tt-shadow-floating);
}

.site-header__inner {
	min-height: 68px;
}

/* load-bearing: .site-footer__menu a の typography(font-size/weight/letter-spacing/text-transform) は immersive に __menu a 規則が無く実サイトで生存。監査で消さない（M2 S4・base層）。 */
.site-footer__menu a {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-label);
	font-weight: 600;
	letter-spacing: calc(0.03em + var(--tt-letter-add));
	text-transform: none;
}

.site-branding__description,
.section-heading-row__lead,
.entry__meta,
.news-item__date {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-meta);
	letter-spacing: calc(0.04em + var(--tt-letter-add));
}

.site-header__cta {
	padding: 10px 16px;
}

.archive-hero,
.section,
.content-layout .entry {
	padding-top: 96px;
	padding-bottom: 96px;
}

.section:nth-of-type(even),
.section--surface,
.section--process {
	background: var(--tiptop-surface);
}

.archive-hero__inner {
	gap: 72px;
}

.archive-hero__content,
.entry__content,
.contact-page-intro {
	max-width: var(--tiptop-text-width);
}
.entry__title{
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-title);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	line-height: calc(1.35 * var(--tt-leading-scale));
	text-transform: uppercase;
}


.archive-hero__title,
.section h2,
.section-heading-row h2 {
	color: var(--tiptop-contrast);
}

.entry__title {
	text-transform: none;
}

.archive-hero__lead:not(:where(.tiptop-own-color, .tiptop-own-color *)),
.entry__content:not(:where(.tiptop-own-color, .tiptop-own-color *)),
.entry__content p:not([class*="__eyebrow"]):not(:where(.tiptop-own-color, .tiptop-own-color *)),
.card p:not(:where(.tiptop-own-color, .tiptop-own-color *)),
.post-card__excerpt:not(:where(.tiptop-own-color, .tiptop-own-color *)),
.news-item__excerpt:not(:where(.tiptop-own-color, .tiptop-own-color *)),
.contact-page-intro p:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-text);
}

.archive-hero__lead,
.entry__content,
.entry__content p:not([class*="__eyebrow"]):not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.card p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.post-card__excerpt,
.news-item__excerpt,
.contact-page-intro p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-body);
	line-height: calc(2.05 * var(--tt-leading-scale));
}

.excerpt-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-label);
	font-weight: 700;
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	text-decoration: none;
}

.excerpt-more span {
	display: inline-flex;
	align-items: center;
	font-size: 0.86rem;
	line-height: 1;
}

.archive-hero__image,
.card,
.post-card,
.news-item,
.service-flow__list li,
.legacy-new-list li,
.site-sidebar__section {
	border: 0;
	border-radius: var(--tt-radius-none);
	background: transparent;
	box-shadow: var(--tt-shadow-card);
}

.post-card,
.card,
.news-item,
.legacy-new-list li {
	padding: 0;
}

.post-card__image,
.card__image,
.archive-hero__image {
	overflow: hidden;
	border-radius: var(--tt-radius-md, 0);
	background: var(--tiptop-surface-alt);
}

.post-card__body,
.card__body {
	padding: 18px 0 0;
}
.site-sidebar h2 {
	color: var(--tiptop-contrast);
	font-weight: 700;
	letter-spacing: calc(0.03em + var(--tt-letter-add));
}

.site-sidebar h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-body);
	line-height: calc(1.6 * var(--tt-leading-scale));
}


.post-card__title,
.card h3{
	color: var(--tiptop-contrast);
}

.card-grid,
.post-list,
.legacy-new-list {
	gap: 42px 28px;
}

.news-item {
	grid-template-columns: 150px 1fr;
	gap: 28px;
	padding: 24px 0;
}

.entry__meta,
.post-card__meta,
.news-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.entry {
	background: var(--tiptop-base);
}

.has-js .entry {
	opacity: 1;
	transform: none;
}
.entry__content h3,
.entry__content h4 {
	margin-top: 3.2em;
	color: var(--tiptop-contrast);
	letter-spacing: calc(0.04em + var(--tt-letter-add));
}


.entry__content h2{
	margin-top: 3.2em;
	color: var(--tiptop-contrast);
}

.entry__content img {
	border-radius: var(--tt-radius-none);
	box-shadow: var(--tt-shadow-card);
}

.entry__content blockquote {
	border-left: 2px solid var(--tiptop-contrast);
	background: var(--tiptop-surface);
}

.contact-page-intro {
	margin: 0 auto 48px;
	text-align: center;
}

.tiptop-contact-form {
	max-width: var(--tt-width-narrow);
	margin: 0 auto;
	border-top: 1px solid var(--tiptop-border);
}

.tiptop-contact-form__row {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 24px;
	align-items: start;
	padding: 22px 0;
	border-bottom: 1px solid var(--tiptop-border);
}

.tiptop-contact-form label {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-note);
	font-weight: 700;
	line-height: calc(1.7 * var(--tt-leading-scale));
}

.tiptop-contact-form .required {
	display: inline-flex;
	margin-left: 8px;
	padding: 2px 7px;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-pill);
	color: var(--tiptop-muted);
	font-size: var(--tt-text-meta);
	font-weight: 700;
	line-height: calc(1.3 * var(--tt-leading-scale));
}

.tiptop-contact-form input[type="text"],
.tiptop-contact-form input[type="email"],
.tiptop-contact-form select,
.tiptop-contact-form textarea,
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
	width: 100%;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-none);
	background: var(--tiptop-base);
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-text);
	font-size: var(--tt-text-body);
	line-height: calc(1.7 * var(--tt-leading-scale));
	padding: 12px 14px;
}

.tiptop-contact-form textarea {
	min-height: 180px;
	resize: vertical;
}

.tiptop-contact-form__consent {
	padding: 22px 0 8px;
	color: var(--tiptop-muted);
	font-size: var(--tt-text-note);
}

.tiptop-contact-form__submit {
	padding-top: 24px;
	text-align: center;
}

.tiptop-contact-form__submit input {
	min-width: 180px;
}

.site-footer {
	background: var(--tiptop-contrast);
	color: var(--tiptop-base);
}

.site-footer a:not(:where(.tiptop-own-color, .tiptop-own-color *)),
.site-footer__copy:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-base);
}

.tiptop-front-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	html.has-front-paging {
		scroll-behavior: auto;
		overscroll-behavior-y: contain;
	}

	html.has-front-paging .tiptop-front-section {
		min-height: calc(100svh - 78px);
		scroll-margin-top: 78px;
	}

	html.is-front-paging body {
		pointer-events: none;
	}
}

.tiptop-front-content .wp-block-group {
	box-sizing: border-box;
}

.tiptop-front-content .top,
.tiptop-front-content .intro2,
.tiptop-front-content .intro3,
.tiptop-front-content .intro4,
.tiptop-front-content .intro-services,
.tiptop-front-content .intro-news {
	margin: 0;
	padding: 112px 0;
}

.tiptop-front-content .top {
	padding-top: 128px;
	padding-bottom: 128px;
	text-align: center;
}

/* 2026-09-10・#1260：全幅ぬきの2行（`width: 100vw` ＋ `margin-left: calc(50% - 50vw)`）を外した。
 * 幅の側は `front-home-lp-source.css:24`（`.site-main--front .tiptop-front-section { width: 100% }`・
 * 同じ詳細度で後ろのファイル）に負けて一度も採用されておらず、残っていたのは負のmarginだけ。
 * 結果この帯だけがスクロールバー幅の半分（1920pxで7.5px）左へずれ、中の内側が
 * ヘッダーと揃わなかった（実測：blog 305px / news 425px 対 ヘッダー 232.5px 基準）。
 * `.intro2/.intro4/.intro-news` はテンプレートが必ず `tiptop-front-section` を併記するので
 * （`.intro2` は出力元が無い）、幅の行を消しても採用値は1バイトも動かない。 */
.tiptop-front-content .intro2,
.tiptop-front-content .intro4,
.tiptop-front-content .intro-news {
	background: var(--tiptop-surface);
}

.tiptop-front-content .top-in,
.tiptop-front-content .intro2-in,
.tiptop-front-content .intro3,
.tiptop-front-content .intro4 > .wp-block-group {
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tiptop-site-width));
	max-width: var(--tiptop-site-width);
	margin-right: auto;
	margin-left: auto;
}

.tiptop-front-content .title,
.tiptop-front-content .main-img,
.tiptop-front-content .main-txt {
	max-width: var(--tiptop-text-width);
	margin-right: auto;
	margin-left: auto;
}

.tiptop-front-content .main-img img {
	width: min(320px, 72vw);
	margin: 0 auto 34px;
}

.tiptop-front-content .main-txt h1 {
	margin: 0;
	color: var(--tiptop-contrast);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

.tiptop-front-content .main-txt h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-hero);
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-front-content .profile-contents,
.tiptop-front-content .website > .wp-block-group,
.tiptop-front-content .siryou > .wp-block-group,
.tiptop-front-content .intro4 > .wp-block-group > .wp-block-group {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 72px;
	align-items: center;
}

.tiptop-front-content .siryou > .wp-block-group {
	grid-template-columns: minmax(0, 1fr) 320px;
}

.tiptop-front-content .siryou .wp-block-image {
	order: 2;
}

.tiptop-front-content .profile-contents .wp-block-image img {
	width: 220px;
	aspect-ratio: 1;
	border-radius: var(--tt-radius-circle);
	object-fit: cover;
}

.tiptop-front-content .website img,
.tiptop-front-content .siryou img,
.tiptop-front-content .intro4 img {
	width: 100%;
	border-radius: var(--tt-radius-none);
	object-fit: cover;
}

/* 節見出しの h2 とカード見出しの h3 は役割が異なるため、文字サイズの段を分ける。 */
.tiptop-front-content h2 {
	margin: 0 0 24px;
	color: var(--tiptop-contrast);
	letter-spacing: calc(0.1em + var(--tt-letter-add));
	text-transform: uppercase;
}
.tiptop-front-content h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-section);
	line-height: calc(1.5 * var(--tt-leading-scale));
}

.tiptop-front-content h3 {
	margin: 0 0 24px;
	color: var(--tiptop-contrast);
	letter-spacing: calc(0.1em + var(--tt-letter-add));
	text-transform: uppercase;
}

.tiptop-front-content h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-card);
	line-height: calc(1.5 * var(--tt-leading-scale));
}

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

.tiptop-front-content h3 {
	font-weight: 700;
}

.tiptop-front-content .intro-services {
	text-align: center;
}
.tiptop-front-content .intro-services .tiptop-services-aside__title,
.tiptop-front-content .intro-news .intro-news__title {
	text-align: center;
}


.tiptop-front-content .intro-services .hero__eyebrow{
	text-align: center;
}

.tiptop-front-content .intro-services .card-grid {
	margin-top: 52px;
	text-align: left;
}

.tiptop-front-content .intro-news .content-area {
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tiptop-site-width));
}

.tiptop-front-content .intro-news .news-list {
	margin-top: 48px;
}

.tiptop-front-content .intro-news .more {
	text-align: center;
}

.tiptop-front-content p:not([class*="__eyebrow"]),
.tiptop-front-content li {
	color: var(--tiptop-text);
}

.tiptop-front-content p:not([class*="__eyebrow"]):not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.tiptop-front-content li:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-body);
	line-height: calc(2.05 * var(--tt-leading-scale));
}

.tiptop-front-content .more {
	margin-top: 28px;
}

/* Shape/typography/hover for .tiptop-front-content .more a moved to
 * front-page-adjustments-rules.css (Issue #645 Phase A-3, single owner).
 * That file's `.site-main--front .tiptop-front-content .more a` selector
 * (0,3,0) already won by specificity over this block (0,2,0) for every
 * shared property, so removing this made no visual difference. */

.tiptop-front-content .legacy-new-list {
	margin: 0;
	padding: 0;
}

@media (max-width: 820px) {
	body {
		/* モックと同じ 0.92rem。main.css には body ルールが4つあり、後勝ちで効くのはここ（Issue #947）。 */
		font-size: var(--tt-text-body);
		line-height: calc(2 * var(--tt-leading-scale));
	}

	.archive-hero,
	.section,
	.content-layout .entry {
		padding-top: 72px;
		padding-bottom: 72px;
	}
	/* 承認済みモックは段の clamp() で可変にするため、記事タイトルのモバイル専用サイズは置かない。 */

	.news-item,
	.tiptop-contact-form__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.card-grid,
	.post-list,
	.legacy-new-list {
		gap: 34px;
	}

	.tiptop-front-content .top,
	.tiptop-front-content .intro2,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4,
	.tiptop-front-content .intro-services,
	.tiptop-front-content .intro-news {
		padding: 76px 0;
	}

	.tiptop-front-content .main-txt h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
		font-size: var(--tt-text-subheading);
	}

	.tiptop-front-content .profile-contents,
	.tiptop-front-content .website > .wp-block-group,
	.tiptop-front-content .siryou > .wp-block-group,
	.tiptop-front-content .intro4 > .wp-block-group > .wp-block-group {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tiptop-front-content .siryou .wp-block-image {
		order: 0;
	}

}

/*! bundle-source: assets/css/design-tokens.css */
/*
 * tiptop design tokens.
 *
 * `--tiptop-*` / `--tt-*` のトークン定義だけを持つ層。2026-09-06（Issue #1150）に
 * design-system.css から分離した。
 *
 * 分離した理由：design-system.css は「トークン定義」と「標準デザインの見た目」を
 * 1ファイルで兼ねていたため、子テーマが標準の見た目を外そうとするとトークンごと
 * 消え、main.css / base-system.css の var() が全滅していた。トークンはどのデザイン
 * システムでも土台として必要なので、この層は `tiptop_theme_design_layer_enabled` を
 * false にしても外れない（inc/design-layer.php）。
 *
 * ロード順は main.css の直後・design-system.css の直前＝分離前と同じ位置。
 * 宣言の並びも分離前のまま（カスケードの勝敗を変えないため）。
 */

: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;
	/* 真円（アバター・丸トリミングの画像・ドット）。pill(999px) と使い分ける：
	 * pill は「両端が半円の角丸」、circle は正方形を真円にする用途。 */
	--tt-radius-circle: 50%;
	--tt-radius-button: var(--tt-radius-none);
	/* 影の役割は3つ（2026-09-06・Issue #1151 で全 box-shadow をここへ寄せた）。
	 * 既定は全て none ＝ 標準デザインはフラット。子テーマがこの3つを上書きすれば、
	 * 該当する面すべてに一斉に効く（以前は box-shadow が58箇所へ直書きされていて、
	 * トークンを上書きしても何も起きなかった）。
	 *   none     … ネイティブUIのリセット・「ここには影を出さない」の明示
	 *   card     … カード／パネル／画像など、面として置かれるもの
	 *   floating … ヘッダー・トップへ戻るボタンなど、浮いているもの */
	--tt-shadow-none: none;
	--tt-shadow-card: none;
	--tt-shadow-floating: none;
	/* 標準デザインで唯一、実体のある影。オフセット型ヒーローの本文カードが
	 * 画像に重なるため、境界を出すのに使っている（base-system.css）。役割が1つしか
	 * 無いので card/floating には混ぜず、独立したトークンとして持つ。 */
	--tt-shadow-hero-offset: 0 24px 48px -20px color-mix(in srgb, var(--tiptop-contrast) 22%, transparent);

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

	/* Motion aliases */
	--tt-motion-duration-fast: 0.2s;
	--tt-motion-easing-standard: ease;

	/* 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);
	/* 日本語の読み物は1行35〜45文字が標準で、42文字が --tt-measure-reading。
	 * 52文字はやや長いが読める範囲の上限。サイドバーのある詳細ページで、
	 * 広い画面のときに右の余白が目立つのを減らすために足した（2026-09-10・Issue #1243・オーナー判断）。
	 * max-width なので、カラムがこれより狭い画面では自動的にカラム幅いっぱいになる。
	 * 1440px 前後のノートでは余白がほぼ出ない。1行72文字（カラム幅いっぱい）は採らなかった。 */
	--tt-measure-reading-wide: calc(52 * 0.92rem);
	/* 読み物の測度で絞らないページの幅（2026-09-14・オーナー判断）。
	 * 使い先は汎用固定ページ（page.php）の本文ブロックとタイトル行、
	 * それにニュース詳細（news-page.css の .tiptop-news-detail）。
	 * これは読み物の測度ではなく**置き場所の幅**。上2つと違って1行の文字数から
	 * 決めた値ではないので、測度トークン（上2つ）と混ぜて使わないこと。
	 * 器はサイト幅（--tiptop-site-width）で、CSS既定は1040pxだが**管理画面で変えられる**
	 * （inc/enqueue.php が :root へ実値を差し込む。ローカル検証環境は1440pxだった）。
	 * つまり器と本文の余白差は案件ごとに変わる。min() にしてあるのは、サイト幅を
	 * 1000px未満へ絞った案件ではみ出さないようにするため。 */
	--tt-page-content-width: min(1000px, 100%);
}

/*! bundle-source: assets/css/design-system.css */
/*
 * 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.
 *
 * 2026-09-06（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),
/* 2026-08-20（オーナー指摘「選択肢の上にあるときカーソルは指マークがいい」）：
 * <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, 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: 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を戻す（2026-08-07・オーナー確定）。
 * 2026-08-04に確定した「標準はhoverのtransitionを撤去し0秒で即時切替」を、モックの
 * 手触りに合わせる判断で意図的に上書きする（経緯は旧 docs/standard-immersive-contract.md。
 * 2026-08-13に削除済みのためgit履歴を参照）。
 * 動かすのは色・枠線・下線だけで、レイアウトに影響するプロパティ（padding/width等）は
 * 含めない——それらをアニメさせるとreflowで「カクつく」既知の落とし穴があるため。
 * 既存トークン --tt-motion-duration-fast（0.2s／カタログ上も「ボタン・リンクのhover色変化」用）
 * を再利用する。新しい持続時間トークンは増やさない。reduced-motion時は下のブロックで
 * このトークンが0sへ落ちるため個別の打ち消しは不要。
 * 配置について：このファイルに置くのは意図的。当時 scripts/check-standard-scope.js
 * （2026-08-13のイマーシブ削除で削除済み）が 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-ui: 0s;
	}
}

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

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

/* 行の罫線とpaddingは直下のliだけが持つ（モックの .sidebar-widget > ul > li と同じ）。
 * 子孫セレクタだと子カテゴリの li にも下線が付き、最後の子の線と親の線が並んで
 * 二重線になっていた（2026-08-18）。 */
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;
}

/* ブログカードのカテゴリバッジ（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));
	/* 地と同系色なので 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));
	/* 行間をモックへ（2026-08-19・Issue #1022 の (B)・オーナーGO済み）。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%）はブログ限定の上書きとして持っていたが、モックの
 * 全文脈で同じ値だったため 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:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	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);
}

/*! bundle-source: assets/css/front-ds-legacy-cleanup.css */
/*
 * #196: Front Design System v2 legacy cleanup layer.
 *
 * main.css still contains older warm color, rounded-card, and shadow
 * declarations as the low-level theme base. This file is intentionally loaded
 * after design-system.css and before page-specific CSS so DS v2 tokens win
 * without changing templates, saved options, or page-specific layout files.
 */

body {
	background: var(--tt-color-base);
	color: var(--tt-color-text);
}

.site-header {
	border-bottom-color: var(--tt-color-border);
}

.site-header:has(.site-mobile-panel:not([hidden])) {
	box-shadow: var(--tt-shadow-floating);
}

.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);
	background: var(--tiptop-button-hover-bg);
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-button-hover-text);
}

.site-nav .is-current > a,
.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--tiptop-link);
}


.site-nav .is-current > a,
.site-nav a:hover,
.site-nav a:focus-visible {
	border-bottom-color: var(--tiptop-link);
}

.archive-hero,
.section--surface {
	background: var(--tt-color-base);
}

/* 本実装（2026-08-07）：標準モードの角丸方針転換に合わせ、カード/画像系と構造ブロック系を分離。
 * 構造ブロック（process-list/service-detail/sidebar-section）は今回のスコープ外として角丸0を維持。 */
.archive-hero__image,
.card,
.post-card,
.entry__image img {
	border-radius: var(--tt-radius-md, 0);
	box-shadow: var(--tt-shadow-card);
}

.process-list article,
.service-detail,
.service-flow__list li,
.sidebar-section {
	border-radius: var(--tt-radius-none);
	box-shadow: var(--tt-shadow-card);
}

.site-menu-toggle {
	border-radius: var(--tiptop-utility-control-radius);
	box-shadow: var(--tt-shadow-none);
}

.site-social-links__link,
.site-menu-toggle,
.card,
.post-card,
.service-detail,
.service-flow__list li,
.sidebar-section {
	border-color: var(--tt-color-border);
}

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

.card::before,
.service-detail li::before {
	border-radius: var(--tt-radius-none);
	background: var(--tiptop-primary);
}

.process-list span,
.service-detail span,
.archive-hero__eyebrow,
.section__eyebrow,
.tiptop-service-eyebrow,
.service-flow__list li::before {
	color: var(--tiptop-primary);
}


/*! bundle-source: assets/css/brand-settings.css */
/* Header brand display variants. */

.site-branding {
	flex: 0 1 auto;
	min-width: 0;
}

.site-header__inner {
	gap: clamp(18px, 2.2vw, 24px);
}

.site-branding__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-height: 40px;
	color: var(--tiptop-contrast);
	line-height: 1;
	text-decoration: none;
}

.site-branding__link:hover,
.site-branding__link:focus {
	color: var(--tiptop-contrast);
}

.site-branding__link .site-branding__title {
	min-width: 0;
	color: currentColor;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-branding__icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: var(--tt-radius-sm);
	object-fit: cover;
}

.site-branding__logo {
	display: block;
	max-width: min(100px, 24vw);
	max-height: 30px;
	width: auto;
	height: auto;
	object-fit: contain;
	transform: none;
}

@media (max-width: 820px) {
	.site-header__inner {
		gap: 12px;
	}

	.site-branding__link {
		gap: 6px;
		min-height: 36px;
	}

	.site-branding__logo {
		max-width: min(100px, 24vw);
		max-height: 28px;
		transform: none;
	}

	.site-branding__icon {
		width: 28px;
		height: 28px;
	}
}
/*! bundle-source: assets/css/back-to-top-settings.css */
/* Back to top display variants.
 *
 * 6種の形は承認済みモック `_mockup/standard/blocks.html` の
 * 「トップへ戻るボタン（6種）」（CSSは同 css/shared.css の .pagetop--*）が正本。
 * 対応は arrow=chevron / compact=circle / label=label / minimal=outline /
 * vertical=vertical / side=tab。option key は保存済みデータがあるので改名しない。
 *
 * このファイルは**形だけ**（寸法・余白・角丸・並び方向・書字方向）を持つ。
 * 色は後ロードの front-utility-control-states.css（`html[data-tiptop-palette]`＝
 * 詳細度0,2,1）が担当するので、ここには background/color/border-color を書かない。
 * 例外は「面も枠も持たない」ことを表す background: transparent と border: 0 だけ。
 */

.back-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tt-space-2);
	padding: 0;
	border-width: 1px;
	border-style: solid;
	box-shadow: var(--tt-shadow-floating);
	backdrop-filter: none;
	cursor: pointer;
	/* モックの .pagetop--* は色だけを遷移させ、hoverで浮かせない。
	 * 旧実装の transform: translateY(-2px) はモックに無いので廃止した。 */
	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);
}

.back-to-top[hidden] {
	display: none !important;
}

.back-to-top svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.back-to-top__label {
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-label);
	font-weight: var(--tt-weight-medium);
	/* モックは 0.08em 固定。--tt-letter-add は文字余白プリセット(typography-spacing.css)
	 * への追従分で、normal では 0em ＝モックと同値になる。 */
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	line-height: 1;
}

/* アイコンのみの3種。ラベルは読み上げ用に残す。 */
.back-to-top--arrow .back-to-top__label,
.back-to-top--compact .back-to-top__label,
.back-to-top--minimal .back-to-top__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* arrow ＝ モック .pagetop--chevron（矢印だけ。面も枠も無い） */
.back-to-top--arrow {
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
}

.back-to-top--arrow svg {
	width: 26px;
	height: 26px;
}

/* compact ＝ モック .pagetop--circle（塗りの円） */
.back-to-top--compact {
	width: 52px;
	height: 52px;
	border-radius: var(--tt-radius-pill);
}

.back-to-top--compact svg {
	width: 20px;
	height: 20px;
}

/* label ＝ モック .pagetop--label（角丸四角＋アイコン＋TOP） */
.back-to-top--label {
	width: auto;
	height: auto;
	padding: 0.7em 1.4em;
	border-radius: var(--tt-radius-md);
}

.back-to-top--label svg {
	width: 16px;
	height: 16px;
}

/* minimal ＝ モック .pagetop--outline（枠線のみ。枠は待機状態から見える＝
 * 色側の front-utility-control-states.css で border-color を当てている） */
.back-to-top--minimal {
	width: 48px;
	height: 48px;
	border-radius: var(--tt-radius-pill);
	background: transparent;
}

.back-to-top--minimal svg {
	width: 16px;
	height: 16px;
}

/* vertical ＝ モック .pagetop--vertical（アイコンを上、テキストだけ縦書き）。
 * 旧実装はボタン全体に writing-mode を掛けていたが、モックは flex-direction:
 * column ＋ ラベルのみ vertical-rl。 */
.back-to-top--vertical {
	width: auto;
	height: auto;
	flex-direction: column;
	border: 0;
	background: transparent;
}

.back-to-top--vertical svg {
	width: 14px;
	height: 14px;
}

.back-to-top--vertical .back-to-top__label {
	font-size: var(--tt-text-meta);
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* side ＝ モック .pagetop--tab（右端に張り付くタブ。上下中央）。
 * border-right は shorthand ではなく width だけ 0 にする。shorthand だと
 * border-style: none まで落ちて、下の820px以下で幅を戻しても線が出ないため。 */
.back-to-top--side {
	top: 50%;
	right: 0;
	bottom: auto;
	width: auto;
	height: auto;
	flex-direction: column;
	gap: var(--tt-space-1);
	padding: var(--tt-space-3) var(--tt-space-2);
	border-right-width: 0;
	border-radius: var(--tt-radius-sm) 0 0 var(--tt-radius-sm);
	transform: translateY(-50%);
}

.back-to-top--side svg {
	width: 16px;
	height: 16px;
}

.back-to-top--side .back-to-top__label {
	font-size: var(--tt-text-meta);
}

/* モックは固定表示しない見本なのでスマホ時の答えを持たない＝ここは実装側の判断。
 * 既存の挙動（サイズを詰める／タブは浮くボタンへ／縦書きは横組みへ）を踏襲する。 */
@media (max-width: 820px) {
	.back-to-top {
		right: 12px;
		bottom: 12px;
	}

	.back-to-top--arrow,
	.back-to-top--compact,
	.back-to-top--minimal {
		width: 44px;
		height: 44px;
	}

	.back-to-top--side {
		top: auto;
		right: 12px;
		bottom: 12px;
		width: 44px;
		height: 44px;
		flex-direction: row;
		padding: 0;
		border-right-width: 1px;
		border-radius: var(--tt-radius-pill);
		transform: none;
	}

	.back-to-top--side .back-to-top__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	.back-to-top--vertical {
		flex-direction: row;
		padding: 6px 10px;
	}

	.back-to-top--vertical .back-to-top__label {
		writing-mode: horizontal-tb;
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: none;
	}
}

/*! bundle-source: assets/css/front-layout-fixes.css */
/*
 * Front page CTA, footer CTA, and front work-card display fixes.
 * Loaded after the main design layers so these rules stay small and reversible.
 */

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(24px, 5vw, 64px);
	row-gap: var(--tt-space-4);
}

.site-footer__inner > :first-child {
	grid-column: 1;
	grid-row: 1 / span 2;
}

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

.tiptop-front-content .website > .front-content-hero--no-image,
.tiptop-front-content .siryou > .front-content-hero--no-image {
	display: block;
	width: 100%;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.tiptop-front-content .website > .front-content-hero--no-image .website-in,
.tiptop-front-content .siryou > .front-content-hero--no-image .siryou-in {
	width: min(100%, var(--tt-width-default));
	max-width: var(--tt-width-default);
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.tiptop-front-content .website > .front-content-hero--no-image h2,
.tiptop-front-content .siryou > .front-content-hero--no-image h2 {
	max-width: none;
	text-align: center;
}

.tiptop-front-content .website > .front-content-hero--no-image .website-in > p,
.tiptop-front-content .siryou > .front-content-hero--no-image .siryou-in > p {
	max-width: var(--tt-width-default);
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.tiptop-front-content .website > .front-content-hero--no-image .more,
.tiptop-front-content .siryou > .front-content-hero--no-image .more {
	text-align: center;
}

.tiptop-front-content .website > .front-content-hero--no-image .more p,
.tiptop-front-content .siryou > .front-content-hero--no-image .more p {
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.tiptop-front-content .website > .front-content-hero--no-image .more a,
.tiptop-front-content .siryou > .front-content-hero--no-image .more a {
	margin-right: auto;
	margin-left: auto;
}

.tiptop-front-content .front-content-card-list-wrap {
	margin-top: clamp(20px, 3vw, 36px);
}

.tiptop-front-content .front-content-card-list--scroll {
	padding-bottom: var(--tt-space-3);
}

.tiptop-front-content .front-content-card {
	background: transparent;
	box-shadow: var(--tt-shadow-card);
}

.tiptop-front-content .front-content-card .post-card__image {
	aspect-ratio: 4 / 3;
}

.tiptop-front-content .front-content-card .post-card__body {
	display: none;
}

/* 本実装：トップの実績ショーケースも実績アーカイブと同じbentoのリズムを共有する。
 * ここは画像のみ表示するカード契約（post-card__bodyは非表示のまま）なので、
 * 変えるのは列幅の広狭だけ。front-content-card-listはcontent_1/content_2の
 * 関連投稿でも使われる共有クラスのため、works-showcase配下にだけ限定する。
 *
 * bento化の境界は 961px から（2026-08-10・Issue #833）。承認済みモック
 * （_mockup/tiptop-current.css:764）は 960px以下で .works-grid を2列に落とし、
 * span も解除する。旧値の 821px では 821〜960px が6列のままで、1枚あたり
 * 110px前後まで潰れていた（900px幅で実測）。 */
@media (min-width: 961px) {
	body.tiptop-standard-system .site-main--front .tiptop-works-showcase .front-content-card-list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		/* モックのworks-gridと同じ24px（--tt-space-5）。旧値は縦42px/横28pxでモックより広かった。 */
		gap: var(--tt-space-5);
	}

	body.tiptop-standard-system .site-main--front .tiptop-works-showcase .front-content-card-list .front-content-card:nth-child(4n + 1),
	body.tiptop-standard-system .site-main--front .tiptop-works-showcase .front-content-card-list .front-content-card:nth-child(4n + 4) {
		grid-column: span 4;
	}

	body.tiptop-standard-system .site-main--front .tiptop-works-showcase .front-content-card-list .front-content-card:nth-child(4n + 2),
	body.tiptop-standard-system .site-main--front .tiptop-works-showcase .front-content-card-list .front-content-card:nth-child(4n + 3) {
		grid-column: span 2;
	}
}

/* タブレット帯（782〜960px）は2列（2026-08-10・Issue #833）。
 * この帯を明示的に上書きするのが要るのは、design-system.css:558 の
 * @media (max-width: 820px) が .tiptop-front-content .front-content-card-list を
 * 1列にしているため。あちらのブロックはナビの820px帯（Issue #834）と同じ
 * ブロックなので動かさず、ここで詳細度（0,4,1 対 0,2,0）で上書きする。
 * span はここに書かない＝上のbentoブロックの外なので既定の span 1 に戻る。 */
@media (min-width: 782px) and (max-width: 960px) {
	body.tiptop-standard-system .site-main--front .tiptop-works-showcase .front-content-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tt-space-5);
	}
}

/* #405: Shared hero frame. Image-led and quiet variants keep intentional role differences. */
.archive-hero,
.page-hero,
.tiptop-service-hero {
	--tiptop-hero-space-block: var(--tt-space-section);
	position: relative;
	padding-block: var(--tiptop-hero-space-block);
	isolation: isolate;
}

/* #405調査(2026-07-25)で削除: この veil は --tiptop-hero-overlay を参照するが、
 * この変数はテーマ全体で一度も設定されず常に既定値0=完全無効。実際の veil は
 * immersive-content-pages.css / front-component-unification.css / service-page.css
 * 側の高詳細度(または後読み込み)ルールが常に勝つため、このルールは一度も描画されない。 */

.archive-hero--news,
.archive-hero--works,
.page-hero--quiet {
	--tiptop-hero-space-block: var(--tt-space-section-compact, clamp(56px, 7vw, 88px));
}

/* 2026-08-01: 標準デザインは --tiptop-page-cta-image を無視していたため、管理画面で設定した
 * フッターCTA背景画像が反映されなかった（イマーシブは既に対応済み）。標準デザインは
 * イマーシブのシーン風グラデーションveilではなく、フラットな単色scrimで表示する
 * （オーナー判断）。画像未設定時は従来と同じ単色塗りのまま変化しない。 */
.tiptop-page-cta {
	position: relative;
	padding-block: var(--tt-space-section);
	background:
		linear-gradient(color-mix(in srgb, var(--tt-color-surface-alt) 78%, transparent), color-mix(in srgb, var(--tt-color-surface-alt) 78%, transparent)),
		var(--tiptop-page-cta-image, linear-gradient(var(--tt-color-surface-alt), var(--tt-color-surface-alt))) center / cover no-repeat;
	color: var(--tt-color-text);
	isolation: isolate;
}

.tiptop-page-cta > * {
	position: relative;
	z-index: 1;
}

.tiptop-page-cta__inner {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.tiptop-page-cta__copy,
.tiptop-page-cta__title {
	margin-inline: auto;
	text-align: center;
}

.tiptop-page-cta__button {
	margin-inline: auto;
}

/* 標準モードのCTAはモックの「黒い丸角カード」1種類（2026-08-16・Issue #956）。
 * 2026-08-07にカード化し、Issue #752で下層だけ「見出し左・ボタン右」、Issue #832で
 * トップだけ --front variant で中央へ戻す、という打ち消しの往復になっていた。
 * あやちゃん判断で**正本はトップの中央カード**に一本化し、variant ごと畳んだ。
 * 背景画像が設定されている場合はその上に濃いscrimが乗る形で、2026-08-01に決めた
 * 「標準はグラデーションveilではなくフラットな単色scrim」という判断は維持する。
 * 文字色は反転面派生トークンを使う——このカードは暗背景なので、明色系の
 * --tiptop-contrast-surface-* 系が正しい写像になる。ボタンの色も同じ理由で
 * 反転面トークンへ分岐させた（このファイル下部のreverse契約ブロック参照）。
 *
 * 幅は `.content-area`（main.css:52-56）と同じ式にして、各ページで本文と端を揃える。
 * モック `_mockup/standard/css/shared.css` の共通CTA節が「幅はカード自身に書かず
 * 各ページの .wrap に従わせる＝CTAだけ他の節と端が揃わないのを避ける」と定めている。
 * 全ページ同じ1本で、購入者の「サイト幅」設定（--tiptop-site-width）に追従する。
 * トップだけ 1280px（--tt-width-wide）へ広げる上書きは 2026-09-10・Issue #1257 の
 * オーナー判断で廃止した——ヘッダー/フッターと同じで、モックのトップは節もヘッダーも
 * 同じ `.wrap` で揃っていて「トップだけ別幅」という意図は無かった。
 *
 * 上の隙間は直前の節の padding-bottom（--tt-space-section）が持つので margin-top は 0。
 * ここでも足すと二重になる——2026-08-16にモックで実測したら下層だけ224px、トップは
 * 112pxだった。下マージンは自分で持つ（フッターに密着するため。2026-08-13の
 * 「前の節の背景色に頼ると継ぎ目が消える」問題はこれで解決したまま）。 */
body.tiptop-standard-system .tiptop-page-cta {
	width: min(calc(100% - var(--tt-gutter-desktop)), var(--tiptop-site-width));
	margin-inline: auto;
	margin-block: 0 var(--tt-space-section);
	padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 72px);
	border-radius: var(--tt-radius-md, 0);
	background:
		linear-gradient(color-mix(in srgb, var(--tiptop-contrast-surface-bg) 88%, transparent), color-mix(in srgb, var(--tiptop-contrast-surface-bg) 88%, transparent)),
		var(--tiptop-page-cta-image, linear-gradient(var(--tiptop-contrast-surface-bg), var(--tiptop-contrast-surface-bg))) center / cover no-repeat;
	color: var(--tiptop-contrast-surface-text);
	overflow: hidden;
}

/* 中央揃えの縦積みは共有の土台（このファイル上部の .tiptop-page-cta__inner）が持つ。
 * ここで足すのは3つだけ：__inner は `.content-area` を兼ねているのでカードの中では
 * 幅の制約を外し（width/max-width）、見出しとボタンの間隔をモックの --tt-space-7 にする。 */
body.tiptop-standard-system .tiptop-page-cta .tiptop-page-cta__inner {
	width: 100%;
	max-width: none;
	gap: var(--tt-space-7);
}

/* 書体は和文。節見出しと同じ欧文（Jost）を当てると**和文グリフが無くブラウザの
 * フォールバックで描かれる**＝字面だけ変わって「サイズが違う」ように見える
 * （2026-08-10にトップのCTAで実測。統一後は全ページが和文の1文なので全ページで正しい）。
 * サイズは節見出し（36.8px）ではなく専用の段 --tt-text-cta（32px）。和文の1文だと
 * 節見出しと同じ大きさは大きすぎた（2026-08-16・あやちゃん判断）。
 * 太さ・字間は他の見出しと同じくプリセットのトークンに追従させる（モック準拠）。 */
body.tiptop-standard-system .tiptop-page-cta .tiptop-page-cta__title {
	max-width: 24em;
	margin: 0;
	margin-inline: auto;
	color: var(--tiptop-contrast-surface-text);
	font-family: var(--tiptop-font-jp);
	font-size: var(--tt-text-cta);
	font-weight: var(--tiptop-font-weight-display);
	letter-spacing: var(--tiptop-letter-spacing-heading);
	line-height: calc(1.7 * var(--tt-leading-scale));
	text-align: center;
}

body.tiptop-standard-system .tiptop-page-cta .tiptop-page-cta__lead {
	max-width: 34em;
	margin: var(--tt-space-5) auto 0;
	color: var(--tiptop-contrast-surface-muted);
	font-family: var(--tiptop-font-jp);
	font-size: var(--tt-text-note);
	font-weight: 400;
	line-height: calc(2 * var(--tt-leading-scale));
	text-align: center;
}

/* カードの内側だけスマホで詰める（モック shared.css の @media (max-width: 781px)）。
 * 左右の余白は上の width が持つので margin-inline は書かない。 */
@media (max-width: 781px) {
	body.tiptop-standard-system .tiptop-page-cta {
		padding-inline: var(--tt-space-5);
	}
}

/* Standard section rhythm. Compact exceptions must opt in explicitly. */
/* .tiptop-blog-layout is excluded: blog-page.css already owns its own
   padding-bottom, and a shared padding-block here only ever overrode
   padding-top, leaving a stray 112px gap above the article grid
   (Issue reported 2026-08-01, root cause traced to #408 b0a4058). */
.section,
.tiptop-works-page__content,
.tiptop-news-page__content,
.tiptop-service-section,
.tiptop-contact-page__content {
	padding-block: var(--tt-space-section);
}

.tiptop-section--compact,
.tiptop-front-content .intro-news {
	padding-block: var(--tt-space-section-compact, clamp(56px, 7vw, 88px));
}

@media (max-width: 820px) {
	.site-footer__inner {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.site-footer__nav {
		width: 100%;
	}

	.site-footer__menu {
		justify-content: flex-start;
	}
}

body.tiptop-standard-system .tiptop-page-cta .tiptop-page-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tt-space-7);
	min-width: min(250px, 100%);
	min-height: 64px;
	padding: var(--tt-space-4) var(--tt-space-5);
	text-decoration: none;
	transform: none;
}

/* 行間はモックの2.0倍（2026-08-10・Issue #784）。モックの `.button` は line-height を
 * 指定せず body の 2 を継承するが、実サイトの body は `main.css:14` で 1.95倍のため
 * 24.336px になり、モックの 24.96px と合っていなかった（**全8ページのページ末CTAで同じ差**）。
 * bodyの基準を2.0へ上げる案は実験して却下した：標準スコープで body を 2.0 にすると
 * トップの行間差分が 3→6件・差分合計 16→20件、一覧系も 1→4件と**悪化する**（1920pxで実測）。
 * 既に個別の行間を持つ要素が多数あり、その多くが「1.95を継承した状態でモックと一致」して
 * いるため。Issue #784 の「body を触っても直らない」は現SHAでも正しい。
 * `--tt-leading-scale`（購入者の「文字の余白」設定）は掛けたまま維持する。 */
body.tiptop-standard-system .tiptop-page-cta .tiptop-page-cta__button {
	justify-content: center;
	/* 中央寄せは親 .tiptop-page-cta__inner の align-items: center が持つ。
	 * ここを auto にすると computed が `0px 538px` になり、モック（0px）と
	 * 機械比較で差分になる（見た目は同じ。2026-08-16 mock-diff で検出）。 */
	margin-inline: 0;
	min-width: 220px;
	min-height: 56px;
	padding: 0.7em 1.6em;
	border-color: var(--tiptop-contrast-surface-button-bg);
	background: var(--tiptop-contrast-surface-button-bg);
	color: var(--tiptop-contrast-surface-button-text);
	font-weight: 600;
	line-height: calc(2 * var(--tt-leading-scale));
}

/* 標準も同じ「塗り→アウトライン化」の方向を保つが、濃色カード上で読める反転面トークンで。 */
body.tiptop-standard-system .tiptop-page-cta .tiptop-page-cta__button:hover,
body.tiptop-standard-system .tiptop-page-cta .tiptop-page-cta__button:focus-visible {
	border-color: var(--tiptop-contrast-surface-button-hover-border);
	background: var(--tiptop-contrast-surface-button-hover-bg);
	color: var(--tiptop-contrast-surface-button-hover-text);
	transform: none;
}

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

@media (prefers-reduced-motion: reduce) {
}

/*! bundle-source: assets/css/blog-page.css */
/* Blog index/detail redesign based on tiptop Blog.html. */

.tiptop-blog-page,
.single-post,
.category,
.tag,
.date {
	--tiptop-blog-accent: var(--tiptop-primary);
	--tiptop-blog-ink: var(--tiptop-contrast);
	--tiptop-blog-muted: var(--tiptop-muted);
	--tiptop-blog-border: var(--tiptop-border);
	--tiptop-blog-surface: var(--tiptop-surface);
	--tiptop-post-detail-page-bg: var(--tiptop-base);
	--tiptop-post-detail-surface: var(--tiptop-blog-surface);
	--tiptop-post-detail-text: var(--tiptop-blog-ink);
	--tiptop-post-detail-muted: var(--tiptop-blog-muted);
	--tiptop-post-detail-border: var(--tiptop-blog-border);
	background: var(--tiptop-base);
	color: var(--tiptop-blog-ink);
}

/* Unlike .tiptop-works-page__content/.tiptop-news-page__content/.tiptop-contact-page__content,
 * this wrapper was never added to front-layout-fixes.css's shared section-rhythm padding-block
 * rule, so the standard design's blog toolbar sat flush against the hero with no gap (reported
 * 2026-08-01). Match siblings' top gap; bottom stays owned by .tiptop-blog-layout below. */
.tiptop-blog-page__content {
	padding-top: var(--tt-space-section);
}

.tiptop-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	padding-bottom: clamp(48px, 6vw, 80px);
}

.tiptop-blog-layout:not(.has-sidebar) {
	grid-template-columns: minmax(0, 1fr);
}

/* Issue #767: the approved standard mock keeps 64px between the article grid
 * and the 320px sidebar. Change only the column gap: the primary column must
 * continue to absorb the remaining width, and immersive keeps its own layout. */
body.tiptop-standard-system .tiptop-blog-page .tiptop-blog-layout.has-sidebar,
body.tiptop-standard-system .tiptop-blog-page .content-layout.has-sidebar {
	column-gap: var(--tt-space-8);
}

/* 一覧のタイトル行を記事の列と揃える（2026-09-14・オーナー判断）。
 * ヒーローの中身は main.css:1443 の720pxの箱で器の左端（22→742）、記事の列は
 * サイドバー320pxと段間を引いた残り（1440px幅の実測で22→1019の997px）。
 * 同じ引き算をヒーローにも当てる。⚠ 320px は上の .tiptop-blog-layout の
 * grid-template-columns と同じ値。**片方を変えたらもう片方も変えること。**
 *
 * ヒーローは記事の列の外側（別のsection）にあるのでグリッドを共有できず、
 * 幅を書き写すしかない。 */
body.tiptop-standard-system .tiptop-blog-page .archive-hero__content {
	max-width: calc(100% - 320px - var(--tt-space-8));
}

/* サイドバーを出さない設定のときは列が全幅になるので、ヒーローも戻す。 */
body.tiptop-standard-system.tiptop-no-sidebar .tiptop-blog-page .archive-hero__content {
	max-width: none;
}

/* 1100px以下で一覧が1列に落ちる（下の @media 参照）。そこから先は引き算しない。 */
@media (max-width: 1100px) {
	body.tiptop-standard-system .tiptop-blog-page .archive-hero__content {
		max-width: none;
	}
}

.tiptop-blog-posts {
	display: block;
}

.tiptop-blog-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.tiptop-blog-column {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.tiptop-blog-posts .navigation.pagination {
	grid-column: 1 / -1;
}

.tiptop-blog-page .post-card,
.category .post-card,
.tag .post-card,
.date .post-card {
	display: block;
	border: 0;
	border-radius: var(--tt-radius-none);
	background: transparent;
	box-shadow: var(--tt-shadow-card);
	overflow: visible;
}

/* The whole card is one <a class="tiptop-blog-card__link"> (content-front-blog-card.php),
 * so without an explicit reset the browser's default underlined-link style paints through
 * the title/meta/excerpt text underneath it. immersive-content-pages.css already resets this
 * for the immersive design's scoped variant of this selector; standard never got the
 * equivalent (reported 2026-08-01 — see the former standard-immersive-contract.md,
 * deleted 2026-08-13; use git history). */
.tiptop-blog-page .post-card .tiptop-blog-card__link,
.category .post-card .tiptop-blog-card__link,
.tag .post-card .tiptop-blog-card__link,
.date .post-card .tiptop-blog-card__link {
	color: inherit;
	text-decoration: none;
}

.tiptop-blog-page .post-card__image,
.category .post-card__image,
.tag .post-card__image,
.date .post-card__image {
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 16px;
	background: var(--tiptop-blog-surface);
	overflow: hidden;
}

.tiptop-blog-page .post-card__image img,
.category .post-card__image img,
.tag .post-card__image img,
.date .post-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.tiptop-blog-page .post-card__body,
.category .post-card__body,
.tag .post-card__body,
.date .post-card__body {
	display: block;
	padding: 0;
}

.tiptop-blog-page .post-card__title,
.category .post-card__title,
.tag .post-card__title,
.date .post-card__title {
	margin: 0;
	color: var(--tiptop-blog-ink);
}

.tiptop-blog-page .post-card__meta,
.category .post-card__meta,
.tag .post-card__meta,
.date .post-card__meta {
	margin: 10px 0 0;
	color: var(--tiptop-blog-muted);
}

.tiptop-blog-page .post-card__excerpt,
.category .post-card__excerpt,
.tag .post-card__excerpt,
.date .post-card__excerpt {
	margin-top: 14px;
	color: var(--tiptop-text, var(--tt-color-text));
	font-size: var(--tt-text-note);
	font-weight: 500;
	line-height: calc(1.95 * var(--tt-leading-scale));
}

.tiptop-blog-page .post-card__excerpt p,
.category .post-card__excerpt p,
.tag .post-card__excerpt p,
.date .post-card__excerpt p {
	margin: 0;
}

.tiptop-blog-page .post-card__more,
.category .post-card__more,
.tag .post-card__more,
.date .post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-label);
	font-weight: 600;
	letter-spacing: calc(0.06em + var(--tt-letter-add));
	line-height: calc(1.5 * var(--tt-leading-scale));
	text-decoration: none;
}

.tiptop-blog-page .post-card__more span,
.category .post-card__more span,
.tag .post-card__more span,
.date .post-card__more span {
	color: var(--tiptop-blog-accent);
	font-size: 1.1em;
	line-height: 1;
}

.tiptop-blog-page .post-card__more:hover,
.tiptop-blog-page .post-card__more:focus,
.category .post-card__more:hover,
.category .post-card__more:focus,
.tag .post-card__more:hover,
.tag .post-card__more:focus,
.date .post-card__more:hover,
.date .post-card__more:focus {
	color: var(--tiptop-blog-muted);
}

.tiptop-blog-sidebar {
	display: flex;
	align-self: start;
	flex-direction: column;
	gap: 24px;
}

/* 目次がある詳細ページだけ外側を記事列の高さまで伸ばす。
 * 一覧・目次なし詳細は従来どおり中身の高さで止める。 */
.tiptop-blog-sidebar[data-tiptop-sidebar-has-track] {
	align-self: stretch;
	min-height: 0;
}

/* このトラックを記事列内で伸ばし、sticky/pin の終了位置を
 * 下段ウィジェットの直前に揃えて両者の重なりを防ぐ。 */
.tiptop-blog-sidebar > .tiptop-blog-sidebar__track {
	flex: 1 1 auto;
	min-height: 0;
}

.tiptop-blog-sidebar__sticky {
	position: sticky;
	top: 88px;
}

/* GSAPがpin要素へ焼くheightとは分離し、実際の目次だけを画面高で制限する。
 * 短い目次は自然高、長い目次だけ内部スクロールになる。 */
.tiptop-blog-sidebar__sticky > .tiptop-blog-toc {
	max-height: calc(100vh - 112px);
	overflow-y: auto;
}

.tiptop-blog-sidebar__widgets {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tiptop-blog-toc__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tiptop-blog-toc__item {
	margin: 0;
}

.tiptop-blog-toc__item--level-3 {
	padding-left: 1em;
}

.tiptop-blog-toc__item a {
	display: block;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-label);
	line-height: calc(1.7 * var(--tt-leading-scale));
	text-decoration: none;
}

.tiptop-blog-toc__item a:hover,
.tiptop-blog-toc__item a:focus-visible {
	color: var(--tiptop-blog-muted);
}

.tiptop-blog-widget,
.single-post .sidebar-section,
.category .sidebar-section,
.tag .sidebar-section,
.date .sidebar-section {
	border: 1px solid var(--tiptop-blog-border);
	border-radius: var(--tt-radius-none);
	padding: 22px;
	background: var(--tiptop-base);
	box-shadow: var(--tt-shadow-card);
}

.tiptop-blog-widget .button {
	width: 100%;
	justify-content: center;
	white-space: normal;
}

.tiptop-blog-widget.tiptop-blog-profile {
	display: grid;
	gap: var(--tt-space-4);
	text-align: center;
}

.tiptop-blog-widget.tiptop-blog-profile > .tiptop-blog-profile__image {
	width: min(100%, calc(var(--tt-space-8) * 2));
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--tt-radius-circle);
	aspect-ratio: 1;
}

.tiptop-blog-widget.tiptop-blog-profile > .tiptop-blog-profile__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tiptop-blog-widget.tiptop-blog-profile > .tiptop-blog-profile__name {
	margin: 0;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-card);
	line-height: calc(1.5 * var(--tt-leading-scale));
}

.tiptop-blog-profile__text {
	color: var(--tiptop-blog-muted);
	font-size: var(--tt-text-note);
	line-height: calc(1.8 * var(--tt-leading-scale));
	text-align: left;
}

.tiptop-blog-profile__text p {
	margin: 0;
}

.tiptop-blog-widget.tiptop-blog-profile .site-social-links {
	justify-content: center;
}

.tiptop-blog-widget__title,
.single-post .sidebar-section__title,
.category .sidebar-section__title,
.tag .sidebar-section__title,
.date .sidebar-section__title {
	color: var(--tiptop-blog-ink);
}

.tiptop-blog-recent {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tiptop-blog-recent > li {
	padding: 12px 0;
	border-top: 1px solid var(--tiptop-blog-border);
}

.tiptop-blog-recent > li:first-child {
	padding-top: 0;
	border-top: 0;
}

/* 子カテゴリ：親と同じ罫線を重ねると子の数だけ線が増えて崩れるため、
 * インデントだけで階層を示す（モック _mockup/standard/blog.html に合わせる。2026-08-13）。 */
.tiptop-blog-categories-list .children {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0 0 0 16px;
	list-style: none;
}

.tiptop-blog-categories-list .children li {
	padding: 0;
	border-top: 0;
	/* 下線も明示的に消す（モック .sidebar-widget__children li と同じ契約）。
	 * デザイン別CSSが下線側で行を区切る場合に子へ漏れるのを防ぐ。 */
	border-bottom: 0;
}

.tiptop-blog-recent a {
	display: block;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-note);
	font-weight: 700;
	line-height: calc(1.6 * var(--tt-leading-scale));
	text-decoration: none;
	transition: opacity var(--tt-motion-duration-ui) ease;
}

/* このウィジェットだけhoverの視覚フィードバックが皆無だった不整合を解消
 * （ナビ等と同じink-fade機構に合わせる。2026-07-21監査）。 */
.tiptop-blog-recent a:hover,
.tiptop-blog-recent a:focus-visible {
	opacity: 0.7;
}

.tiptop-blog-recent time {
	display: block;
	margin-top: 6px;
	color: var(--tiptop-blog-muted);
	font-size: var(--tt-text-meta, 0.72rem);
	letter-spacing: calc(0.05em + var(--tt-letter-add));
}

.tiptop-blog-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tiptop-blog-categories ul,
.tiptop-blog-categories li {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tiptop-blog-categories a,
.single-post .sidebar-list--compact a,
.category .sidebar-list--compact a,
.tag .sidebar-list--compact a,
.date .sidebar-list--compact a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0.16rem 0.58rem;
	border: 1px solid var(--tiptop-blog-border);
	border-radius: var(--tt-radius-pill);
	background: var(--tiptop-base);
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-meta, 0.72rem);
	font-weight: 700;
	line-height: calc(1.35 * var(--tt-leading-scale));
	text-decoration: none;
}

.single-post .sidebar-section--accent,
.category .sidebar-section--accent,
.tag .sidebar-section--accent,
.date .sidebar-section--accent {
	border: 0;
	background: var(--tiptop-contrast-surface-bg, var(--tiptop-button-bg, var(--tiptop-blog-ink)));
	color: var(--tiptop-contrast-surface-text, var(--tiptop-button-text, var(--tiptop-base)));
}

.single-post .sidebar-section--accent .sidebar-section__title,
.category .sidebar-section--accent .sidebar-section__title,
.tag .sidebar-section--accent .sidebar-section__title,
.date .sidebar-section--accent .sidebar-section__title {
	color: var(--tiptop-contrast-surface-text, var(--tiptop-button-text, var(--tiptop-base)));
}

.single-post .sidebar-section--accent p,
.category .sidebar-section--accent p,
.tag .sidebar-section--accent p,
.date .sidebar-section--accent p {
	margin: 0 0 16px;
	color: var(--tiptop-contrast-surface-muted, color-mix(in srgb, var(--tiptop-contrast-surface-text, var(--tiptop-button-text, var(--tiptop-base))) 72%, transparent));
}

.single-post .sidebar-section--accent p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.category .sidebar-section--accent p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.tag .sidebar-section--accent p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.date .sidebar-section--accent p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-note);
	line-height: calc(1.9 * var(--tt-leading-scale));
}

.single-post .sidebar-section--accent a,
.category .sidebar-section--accent a,
.tag .sidebar-section--accent a,
.date .sidebar-section--accent a {
	color: var(--tiptop-contrast-surface-text, var(--tiptop-button-text, var(--tiptop-base)));
	font-size: var(--tt-text-note);
	font-weight: 700;
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	text-underline-offset: 0.3em;
}

.single-post .content-layout {
	padding-top: var(--tt-space-section-compact);
	padding-bottom: var(--tt-space-section-compact);
}

.single-post .entry {
	padding: 0;
}

.single-post .entry__title {
	margin: 0;
	color: var(--tiptop-blog-ink);
	font-size: var(--tt-text-title);
	font-weight: 700;
	letter-spacing: calc(0.04em + var(--tt-letter-add));
	line-height: calc(1.45 * var(--tt-leading-scale));
}

/* 日付の下に32pxの余白が余っていた（2026-08-12・Issue #913・オーナー指摘
 * 「ブログ詳細の日付下の余白が広い」）。実測ではメタ下端→ヘッダー下端が
 * 実65px／モック33pxで、差はこの margin-bottom そのものだった。モックのメタは
 * 上下マージンを持たず、ヘッダーの padding-bottom 32px だけで下を作っている。
 *
 * font-size はここを触らないこと。モックはこの箱を 0.92rem にしているが、中身の
 * 日付とバッジが自分で 0.72rem を持つので**箱の値は表に出ない**。実サイトは
 * バッジ（.term-list）が箱から継承するため、0.92rem に上げるとバッジだけ
 * 大きくなってモックから離れる（2026-08-12に一度やって実測で気づいた）。 */
.single-post .entry__meta {
	margin: 0;
	color: var(--tiptop-blog-muted);
	font-size: var(--tt-text-meta, 0.72rem);
	letter-spacing: calc(0.04em + var(--tt-letter-add));
}

.single-post .entry__image {
	margin: 0 0 40px;
	background: var(--tiptop-blog-surface);
}

.single-post .entry__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
}

.single-post .entry__content {
	max-width: var(--tiptop-text-width);
}

.single-post .entry__content p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-body);
	line-height: calc(2.05 * var(--tt-leading-scale));
}

@media (max-width: 960px) {
	.tiptop-blog-sidebar[data-tiptop-sidebar-has-track] {
		align-self: start;
		min-height: auto;
	}

	.tiptop-blog-sidebar > .tiptop-blog-sidebar__track {
		flex: 0 0 auto;
		min-height: auto;
	}

	.tiptop-blog-sidebar__sticky {
		position: static;
	}

	.tiptop-blog-sidebar__sticky > .tiptop-blog-toc {
		max-height: none;
		overflow-y: visible;
	}

	/* サイドバーが本文の下へ回り込むと、検索フォームの width: 100% に上限が無く
	 * サイドバーいっぱい（900pxで856px）まで伸びていた。モックは全幅の帯でも
	 * 383px で止まる（2026-08-12・Issue #913）。max-width だけを足すので、
	 * 375px など親が383pxより狭い画面では従来どおり親幅に従う。
	 * 新しいブレークポイントは作らず既存の960px帯の中で完結させている
	 * （820px＝ナビ・781px＝イマーシブ標準値と兼用の値があり、増やすと埋もれる）。 */
	body.tiptop-standard-system.single-post .tiptop-blog-widget--search form.search-form {
		max-width: 383px;
	}

	.tiptop-blog-hero__inner,
	.tiptop-blog-layout,
	.single-post .content-layout,
	.category .content-layout,
	.tag .content-layout,
	.date .content-layout {
		grid-template-columns: 1fr;
	}
}

/* 一覧（ブログ／カテゴリー／タグ／日付）の「本文＋サイドバー」は 1100px で1列へ
 * （2026-08-10・Issue #833）。承認済みモック _mockup/tiptop-pages.css:563 は
 * 1100px以下で .blog-layout を1列に落とすが、実サイトは上の 960px ブロックだけで
 * 折り返していたため 961〜1100px が2カラムのままで、本文が痩せていた。
 *
 * 上の960pxブロックは**そのまま残す**（境界を動かさない）。理由は2つ：
 * ①記事詳細（`.single-post .content-layout`）はモックも 960px 境界
 * （_mockup/tiptop-single.css:608）なので一覧とは分ける必要がある。
 * ②上のブロックはモード非限定で、`.category/.tag/.date .content-layout` には
 * イマーシブ側の上書きが無い。境界を動かすとイマーシブの一覧も一緒に変わる。
 * そのためここは標準スコープに閉じ、961〜1100px の帯だけ足す。 */
@media (max-width: 1100px) {
	body.tiptop-standard-system .tiptop-blog-layout,
	body.tiptop-standard-system .category .content-layout,
	body.tiptop-standard-system .tag .content-layout,
	body.tiptop-standard-system .date .content-layout {
		grid-template-columns: 1fr;
	}

	/* Issue #917：下層の外枠は base-system.css でモックの左右22pxへ固定する。
	 * この入れ子だけは下の760pxルールでtabletガターをもう一度差し引くため、
	 * 標準では親幅いっぱいへ戻して二重ガターを防ぐ。 */
	body.tiptop-standard-system .tiptop-blog-layout {
		width: 100%;
	}

	/* Issue #837: the archive modifier is emitted only for the standard Blog list.
	 * Once the layout stacks, stop following with the same 1100px boundary. */
	.tiptop-blog-sidebar--archive-sticky .tiptop-blog-sidebar__sticky {
		position: static;
		top: auto;
	}
}

@media (max-width: 760px) {
	.tiptop-blog-hero__inner,
	.tiptop-blog-layout,
	.single-post .content-layout,
	.category .content-layout,
	.tag .content-layout,
	.date .content-layout {
		width: min(calc(100% - var(--tt-gutter-tablet)), var(--tt-width-default));
	}

	.tiptop-blog-list,
	.category .post-list,
	.tag .post-list,
	.date .post-list {
		grid-template-columns: 1fr;
	}

	.tiptop-blog-column {
		gap: 36px;
	}
}

/* ============================================================
   ここから下は blog-page-adjustments.css を吸収したもの
   （2026-08-11・Issue #645 Phase B）。

   このファイルと調整ファイルは inc/enqueue.php の鎖で完全に隣接して
   おり（間に何も挟まらない）、調整ファイルは常に直後に読まれていた。
   3本目の blog-comment-submit-accent.css はさらに後ろなので、吸収後も
   「base → 調整 → コメント送信」の相対順序は変わらない。
   よって末尾へそのまま連結すればカスケード順は変わらない。
   宣言の中身は1文字も変えていない（cat で連結）。

   ⚠ 下のブロックは「後に書いてある方が勝つ」ことに依存している。
   同じセレクタを2回書いている組が22ある（コメント欄・フォーム・
   サイドバー・ページ送りのフォーカス表示などに集中。3回以上のものは無い）。
   順序を入れ替えたり、重複を「片方だけ残す」形で整理すると見た目が
   変わる。整理するならセレクタごとに最終的に効いている宣言の集合を
   作ってからにすること。

   ============================================================ */

/* Final small adjustments for blog HTML alignment. */

.tiptop-blog-page .post-card__excerpt .excerpt-more,
.category .post-card__excerpt .excerpt-more,
.tag .post-card__excerpt .excerpt-more,
.date .post-card__excerpt .excerpt-more {
	display: none !important;
}

/*
 * Issue #694: the blog toolbar owned the standard search decoration, so moving the
 * form into the sidebar would otherwise leave standard mode unstyled. Keep the
 * cataloged underline + transparent icon contract in the wired --search context.
 * The old toolbar selectors stay in front-intro-list-unstyled.css until B-1c.
 * Widget framing and title typography are owned by design-system.css in standard
 * mode; the old 22px padding and 0.82rem/800 title overrides were dead/conflicting.
 */
.tiptop-blog-page .tiptop-blog-widget--search .search-form,
.tiptop-blog-page .tiptop-blog-widget--search form[role="search"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 52px;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-bottom: 1px solid var(--tiptop-blog-border);
	border-radius: var(--tt-radius-none);
	background: transparent;
	box-shadow: var(--tt-shadow-none);
	gap: 0;
}

.tiptop-blog-page .tiptop-blog-widget--search .search-form label,
.tiptop-blog-page .tiptop-blog-widget--search form[role="search"] label {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.tiptop-blog-page .tiptop-blog-widget--search .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.tiptop-blog-page .tiptop-blog-widget--search .search-field {
	display: block;
	width: 100%;
	min-width: 0;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 var(--tt-space-3) 0 0;
	border: 0;
	border-radius: var(--tt-radius-none);
	background: transparent;
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-blog-ink);
	font: inherit;
	font-size: var(--tt-text-body);
}

.tiptop-blog-page .tiptop-blog-widget--search .search-submit {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	min-width: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--tt-radius-none);
	background: transparent;
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-blog-muted);
	transform: none;
}

.tiptop-blog-page .tiptop-blog-widget--search .search-submit svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tiptop-blog-page .tiptop-blog-widget--search :is(.search-form, form[role="search"]):focus-within {
	border-bottom-color: var(--tiptop-blog-ink);
}

.tiptop-blog-page .tiptop-blog-widget--search .search-submit:hover,
.tiptop-blog-page .tiptop-blog-widget--search .search-submit:focus-visible {
	background: transparent;
	color: var(--tiptop-blog-ink);
}

.tiptop-blog-page .tiptop-blog-widget--search .search-submit:focus-visible {
	outline: var(--tiptop-field-focus-width) solid var(--tt-form-focus-color, var(--tiptop-blog-ink));
	outline-offset: 3px;
}

.tiptop-blog-categories-list .current-cat > a {
	font-weight: 700;
}

/* #184: Blog v2 minimal alignment. Keep template/PHP structure unchanged. */
.tiptop-blog-page .tiptop-blog-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
	gap: clamp(28px, 5vw, 40px);
	align-items: center;
}

.tiptop-blog-page .tiptop-blog-hero__art {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 8;
	border: 1px solid var(--tiptop-blog-border);
	background: var(--tiptop-blog-surface);
	overflow: hidden;
}

.tiptop-blog-page .tiptop-blog-hero__art img {
	display: block;
	width: min(62%, 220px);
	height: auto;
	max-height: 72%;
	object-fit: contain;
	opacity: 0.9;
}

.tiptop-blog-page .tiptop-blog-hero__art span {
	color: var(--tiptop-blog-ink);
	font-size: clamp(1rem, 3vw, 1.6rem);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

/* main.css の .post-card__image（トークン参照）より詳細度が高いため、ここが角丸の実質的な
 * 決定点になる。0のハードコードだと標準モードの角丸方針が一覧ページだけ効かないので
 * トークン参照にする（イマーシブは --tt-radius-md が0のまま＝現状維持）。 */
.tiptop-blog-page .post-card__image,
.category .post-card__image,
.tag .post-card__image,
.date .post-card__image,
.single-post .entry__image,
.single-post .entry__image img {
	border-radius: var(--tt-radius-md, 0);
	box-shadow: var(--tt-shadow-card);
}

.sidebar-list--compact a:hover,
.sidebar-list--compact a:focus-visible {
	border-color: var(--tiptop-button-bg);
	background: var(--tiptop-button-bg);
	color: var(--tiptop-button-text);
}

.tiptop-blog-page .page-numbers:hover,
.tiptop-blog-page .page-numbers:focus-visible,
.category .page-numbers:hover,
.category .page-numbers:focus-visible,
.tag .page-numbers:hover,
.tag .page-numbers:focus-visible,
.date .page-numbers:hover,
.date .page-numbers:focus-visible {
	color: var(--tiptop-blog-ink);
}

/* news/worksアーカイブにはあった:focus-visibleのアウトラインがblogだけ
 * 抜けていた不整合を解消（2026-07-21監査）。 */
.tiptop-blog-page .page-numbers:focus-visible,
.category .page-numbers:focus-visible,
.tag .page-numbers:focus-visible,
.date .page-numbers:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--tiptop-blog-ink) 20%, transparent);
	outline-offset: 3px;
}

.single-post .entry__meta a {
	color: var(--tiptop-blog-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.24em;
}

.single-post .entry__meta a:hover,
.single-post .entry__meta a:focus-visible {
	color: var(--tiptop-blog-muted);
}

.single-post .entry__meta a.tiptop-badge--category {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 2px 10px;
	border: 1px solid var(--tiptop-blog-accent);
	border-radius: var(--tt-radius-pill);
	background: color-mix(in srgb, var(--tiptop-blog-accent) var(--tt-tint-soft), transparent);
	color: var(--tiptop-blog-accent);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	text-decoration: none;
	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),
		opacity var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

.single-post .entry__meta a.tiptop-badge--category:hover,
.single-post .entry__meta a.tiptop-badge--category:focus-visible {
	border-color: var(--tiptop-blog-accent);
	background: color-mix(in srgb, var(--tiptop-blog-accent) var(--tt-tint-strong), transparent);
	color: var(--tiptop-blog-accent);
}

.single-post .entry__meta a.tiptop-badge--category:hover {
	opacity: 0.62;
}

/* #304: WordPress comments, restyled without replacing native behavior. */
.single-post .blog-comments {
	--tiptop-comment-surface: var(--tiptop-contrast-surface-bg);
	--tiptop-comment-text: var(--tiptop-contrast-surface-text);
	--tiptop-comment-muted: var(--tiptop-contrast-surface-muted);
	--tiptop-comment-border: var(--tiptop-contrast-surface-border);
	/* 2026-07-23: accentはButton/ghost/SocialLinkのhover doctrineから撤去した（露出過多のため）。
	 * コメント面のアクション色（Reply hover・編集ペン・パーマリンクhover）はmutedへ揃える。 */
	--tiptop-comment-action: var(--tiptop-muted);
	margin-top: clamp(64px, 9vw, 112px);
	padding: clamp(32px, 5vw, 64px);
	border: 1px solid var(--tiptop-comment-border);
	background: var(--tiptop-comment-surface);
	color: var(--tiptop-comment-text);
}

.single-post .blog-comments__title {
	display: inline-flex;
	gap: var(--tt-space-2);
	align-items: center;
	margin: 0 0 clamp(28px, 4vw, 44px);
	color: var(--tiptop-comment-text);
	font-size: var(--tt-text-section);
	font-weight: 600;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

.single-post .blog-comments__title-icon {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 1px solid var(--tiptop-comment-border);
	border-radius: var(--tt-radius-pill);
	font-size: var(--tt-text-meta);
}

.single-post .blog-comments__list,
.single-post .blog-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-post .blog-comments__list .children {
	margin-left: clamp(24px, 5vw, 72px);
}

.single-post .blog-comment {
	margin: 0;
	padding: clamp(28px, 4vw, 44px) 0;
	border-top: 1px solid var(--tiptop-comment-border);
}

.single-post .blog-comments__list > .blog-comment:first-child {
	border-top: 0;
	padding-top: 0;
}

.single-post .blog-comment__body {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: clamp(16px, 3vw, 28px);
}

.single-post .blog-comment__avatar-image {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--tt-radius-pill);
	object-fit: cover;
}

/* Gravatar 無効時のローカル・フォールバックアバター（コメント面トークンで可読・線画で統一）。 */
.single-post .blog-comment__avatar-fallback {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--tiptop-comment-border);
	border-radius: var(--tt-radius-pill);
	background: color-mix(in srgb, var(--tiptop-comment-text) var(--tt-tint-faint), transparent);
	color: var(--tiptop-comment-text);
}

.single-post .blog-comment__header {
	display: flex;
	gap: var(--tt-space-4);
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--tt-space-3);
}

.single-post .blog-comment__identity {
	display: grid;
	gap: 4px;
}

.single-post .blog-comment__author,
.single-post .blog-comment__author a {
	color: var(--tiptop-comment-text);
	font-weight: 700;
	text-decoration: none;
}

.single-post .blog-comment__permalink {
	color: var(--tiptop-comment-muted);
	font-size: var(--tt-text-meta);
	text-decoration: none;
}

.single-post .blog-comment__permalink:hover,
.single-post .blog-comment__permalink:focus-visible {
	color: var(--tiptop-comment-action);
}

/* 編集ペン（自分/権限者のコメント・ヘッダー右上）。 */
.single-post .blog-comment__edit {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--tiptop-comment-action);
	transition: color var(--tt-motion-duration-ui) ease;
}

.single-post .blog-comment__edit:hover,
.single-post .blog-comment__edit:focus-visible {
	color: var(--tiptop-comment-text);
}

/* Reply はコメント本文の下・戻る矢印付き・本文色（画像①準拠）。 */
.single-post .blog-comment__actions {
	margin-top: var(--tt-space-3);
}

.single-post .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tiptop-comment-text);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	text-decoration: none;
}

.single-post .comment-reply-link > span {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.single-post .blog-comment__reply-icon {
	flex: 0 0 auto;
}

.single-post .comment-reply-link:hover,
.single-post .comment-reply-link:focus-visible {
	color: var(--tiptop-comment-action);
}

.single-post .blog-comment__text,
.single-post .blog-comment__text p {
	color: var(--tiptop-comment-text);
}

.single-post .blog-comment__text,
.single-post .blog-comment__text p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	line-height: var(--tt-leading-base);
}

.single-post .blog-comment__text p:last-child {
	margin-bottom: 0;
}

.single-post .blog-comment__moderation {
	margin: 0 0 var(--tt-space-3);
	color: var(--tiptop-comment-muted);
	font-style: italic;
}

/* コメントの一覧と入力欄の間に1本だけ引く（2026-09-10・Issue #1243・オーナー判断）。
 * ⚠ 以前はここと「最後のコメントの下」で線が2本重なっていた。下側は1本にして、
 * 一覧の上（1件目の上）には引かない。記事とコメント欄の境（.blog-comments の
 * border-top）は別に残してある。 */
.single-post .comment-respond {
	margin-top: clamp(40px, 6vw, 72px);
	padding-top: clamp(32px, 5vw, 56px);
	border-top: 1px solid var(--tiptop-comment-border);
}

.single-post .comment-reply-title {
	margin: 0 0 var(--tt-space-5);
	color: var(--tiptop-comment-text);
	font-size: var(--tt-text-card);
	font-weight: 400;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

.single-post .comment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tt-space-4);
}

.single-post .comment-form > p {
	margin: 0;
}

.single-post .comment-form-comment,
.single-post .comment-form-url,
.single-post .logged-in-as,
.single-post .comment-notes,
.single-post .form-submit {
	grid-column: 1 / -1;
}

.single-post .comment-form label:not(.screen-reader-text) {
	display: block;
	margin-bottom: var(--tt-space-2);
	color: var(--tiptop-comment-muted);
	font-size: var(--tt-text-label);
}

.single-post .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.single-post .comment-form textarea {
	width: 100%;
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-comment-text);
	font: inherit;
}

.single-post .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	min-height: 48px;
	padding: 10px 12px;
}

.single-post .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.single-post .comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 2px;
}

.single-post .comment-form-cookies-consent label {
	margin-bottom: 0;
}

.single-post .comment-form textarea {
	min-height: 180px;
	padding: clamp(16px, 3vw, 24px);
	resize: vertical;
}

.single-post .comment-form input::placeholder,
.single-post .comment-form textarea::placeholder {
	color: var(--tiptop-comment-muted);
	opacity: 1;
}

.single-post .comment-form .form-submit {
	display: flex;
	justify-content: flex-end;
}

.single-post .comment-form .submit svg {
	display: block;
}

/* ログイン行：名前（左）＋プロフィール/ログアウトのアイコン（右）＝画像①準拠。 */
.single-post .logged-in-as {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tt-space-3);
}

.single-post .logged-in-as__name {
	color: var(--tiptop-comment-text);
	font-weight: 700;
}

.single-post .logged-in-as__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--tt-space-3);
}

.single-post .logged-in-as__icon {
	display: inline-flex;
	color: var(--tiptop-comment-muted);
	transition: color var(--tt-motion-duration-ui) ease;
}

.single-post .logged-in-as__icon:hover,
.single-post .logged-in-as__icon:focus-visible {
	color: var(--tiptop-comment-text);
}

.single-post .blog-comments__notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: var(--tt-space-5) 0 0;
	color: var(--tiptop-comment-muted);
	font-size: var(--tt-text-meta);
	line-height: calc(1.7 * var(--tt-leading-scale));
}

.single-post .blog-comments__notice-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px;
}

.single-post .comment-form .required,
.single-post .comment-form .required-field-message,
.single-post .comment-form .logged-in-as {
	color: var(--tiptop-comment-muted);
}

.single-post .comment-form .error,
.single-post .comment-form [aria-invalid="true"] {
	border-color: var(--tt-color-danger);
}

@media (prefers-reduced-motion: no-preference) {
}

@media (max-width: 960px) {
	.tiptop-blog-page .tiptop-blog-hero__inner {
		grid-template-columns: 1fr;
	}

	.tiptop-blog-page .tiptop-blog-hero__art {
		display: none;
	}
}

@media (max-width: 640px) {
	.single-post .blog-comments {
		padding: 28px 20px;
	}

	.single-post .blog-comments__list .children {
		margin-left: 18px;
	}

	.single-post .blog-comment__body {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 14px;
	}

	.single-post .blog-comment__avatar-image {
		width: 42px;
		height: 42px;
	}

	.single-post .blog-comment__header {
		flex-wrap: wrap;
	}

	.single-post .comment-form {
		grid-template-columns: 1fr;
	}

	.single-post .comment-form-author,
	.single-post .comment-form-email {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   標準モードのブログ詳細をモック（tiptop-single）へ合わせる
   （2026-08-07・オーナー承認）
   方針はトップのNEWSと同じ「面を反転させず、罫線と余白で区切る」。
   イマーシブは既存の見た目（濃色パネルのコメント欄）を維持する。
   ============================================================ */

/* --- コメント欄：黒帯をやめて白面＋上罫線に --- */
/* .blog-comments は --tiptop-comment-* の4トークンで面と文字色を作っているので、
 * トークンを差し替えるだけで見出し・罫線・本文・Reply等が一括で追従する。 */
body.tiptop-standard-system.single-post .blog-comments {
	--tiptop-comment-surface: transparent;
	--tiptop-comment-text: var(--tiptop-text);
	--tiptop-comment-muted: var(--tiptop-muted);
	--tiptop-comment-border: var(--tiptop-border);
	padding: clamp(32px, 5vw, 48px) 0 0;
	border: 0;
	border-top: 1px solid var(--tiptop-border);
}

/* 見出しは丸枠アイコンをやめて素のアイコン＋件数に */
body.tiptop-standard-system.single-post .blog-comments__title-icon {
	width: auto;
	height: auto;
	border: 0;
	border-radius: var(--tt-radius-none);
	color: var(--tiptop-muted);
}

/* アバターは40pxの円形（カタログのcircular契約） */
body.tiptop-standard-system.single-post .blog-comment__body {
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--tt-space-4);
}

body.tiptop-standard-system.single-post .blog-comment__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--tt-radius-circle);
	overflow: hidden;
	background: var(--tiptop-surface);
	color: var(--tiptop-muted);
}

/* 返信は左1本の縦罫でぶら下げる（インデントの余白だけに頼らない） */
body.tiptop-standard-system.single-post .blog-comments__list .children {
	margin-left: 0;
	padding-left: var(--tt-space-5);
	border-left: 1px solid var(--tiptop-border);
}

/* --- カテゴリバッジ：トップのニュースタグと同じアクセントの薄塗り・枠線なし --- */
/* --tiptop-blog-accent は --tiptop-primary(=黒)由来で他6箇所からも参照されるため、
 * トークンごと差し替えず、このバッジだけを上書きする。
 * 2026-08-12・Issue #917：モックの実測値は 11.52px / line-height 1.7 /
 * padding 0.18em 0.8em / min-height 24px。背景はアクセント10%をbaseへ混ぜた色で、
 * mono-editorial の生値は持たない。既存の --tt-tint-soft(16%) はこの役割には濃すぎる。
 * 上のモード非限定ルールはイマーシブにも効くため、そちらは動かさず標準だけ上書きする。 */
body.tiptop-standard-system.single-post .entry__meta > time {
	font-size: var(--tt-text-meta);
}

body.tiptop-standard-system.single-post .entry__meta a.tiptop-badge--category {
	min-height: 24px;
	padding: 0.18em 0.8em;
	border: 0;
	background: color-mix(in srgb, var(--tiptop-accent) 10%, var(--tiptop-base));
	color: var(--tiptop-accent);
	line-height: calc(1.7 * var(--tt-leading-scale));
}

body.tiptop-standard-system.single-post .entry__meta a.tiptop-badge--category:hover,
body.tiptop-standard-system.single-post .entry__meta a.tiptop-badge--category:focus-visible {
	border-color: var(--tiptop-accent);
	background: var(--tiptop-accent);
	color: var(--tiptop-base);
	opacity: 1;
}

/* --- 入力欄：角丸0の取り残しを sm(8px) へ --- */
body.tiptop-standard-system.single-post .comment-form input[type="text"],
body.tiptop-standard-system.single-post .comment-form input[type="email"],
body.tiptop-standard-system.single-post .comment-form input[type="url"],
body.tiptop-standard-system.single-post .comment-form textarea {
	border-radius: var(--tt-radius-sm);
}

/* --- ヒーロー画像：16:9＋トップの画像と同じ角丸 ---
 * .tiptop-post-detail__hero はニュース詳細とも共有するクラスだが、このファイルは
 * ブログ系ページでしかenqueueされないため、ニュース詳細側は news-page.css
 * で同じ角丸を当てている（このファイルを広げても届かない）。 */
body.tiptop-standard-system.single-post .tiptop-post-detail__hero {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--tt-radius-md);
	/* 記事は1本の柱として中央に置く。ヒーローも本文と同じ幅で揃える
	 * （2026-09-10・Issue #1243・オーナー判断）。⚠ 高さは aspect-ratio が
	 * 決めるので、幅が縮めば高さも比率どおりに縮むだけ——切り取られ方は変わらない。
	 * 画像は full サイズを width:100% で流し込んでいるため、枠が小さくなるぶん
	 * 密度は上がる。 */
	max-width: var(--tt-measure-reading-wide);
	margin-inline: auto;
}

body.tiptop-standard-system.single-post .tiptop-post-detail__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 本文の測度：持ち主を器から中身へ移す（2026-09-10・Issue #1243） ---
 * 固定ページで Issue #1163 が入れたのと同じ形。器に max-width の帽子があると、
 * 記事で「幅広」「全幅」を指定してもブロックは広がらない。
 * 42em の直書きもやめてトークンで持つ。em は各要素が継承した font-size で
 * 解決されるため、同じ 42em でも要素ごとに値が割れる
 * （design-tokens.css の --tt-measure-reading の解説を参照）。
 * 幅は --tt-measure-reading-wide（52文字）。広い画面で右に余白が残るのを
 * 抑えるため、他の詳細ページ（42文字）より1段広くした（#1243・オーナー判断）。
 * 中央寄せは意図的に付けない（オーナー判断で保留・Issue #1243）。
 * 付けると見た目が変わり、承認済みモック _mockup/standard/blog-single.css も
 * 直す必要がある。 */
body.tiptop-standard-system.single-post .tiptop-post-detail__body {
	max-width: none;
}

body.tiptop-standard-system.single-post .tiptop-post-detail__body > * {
	max-width: var(--tt-measure-reading-wide);
	margin-inline: auto;
}

/* 日付・カテゴリ・タイトルも本文と同じ幅で中央に置く（2026-09-10・Issue #1243・オーナー判断）。
 * 本文だけ中央に寄せるとタイトルの左端と145pxズレる——それは Issue #730 で
 * オーナーが却下した見え方なので、文字の塊はまとめて同じ幅・同じ位置にする。
 * ⚠ ヒーロー画像も同じ幅で中央に置く（上のヒーローの規則を参照）。記事全体を
 * 1本の柱として揃えるため。 */
body.tiptop-standard-system.single-post .tiptop-post-detail__header {
	max-width: var(--tt-measure-reading-wide);
	margin-inline: auto;
}

/* 記事の下に続くコメント欄も同じ柱に載せる（2026-09-10・Issue #1243・オーナー判断）。
 * この節は背景と罫を持つカードなので、幅を絞ると面ごと記事に揃う。 */
body.tiptop-standard-system.single-post .blog-comments {
	max-width: var(--tt-measure-reading-wide);
	margin-inline: auto;
}

body.tiptop-standard-system.single-post .tiptop-post-detail__body > :is(.alignwide, .alignfull) {
	max-width: none;
}

/* --- 送信ボタン：標準モードは文字ラベル入りのpillボタンにする --- */
/* comments.php 側で出力を分岐し、標準は <span>コメントを送信</span> を持つ。
 * 上の .single-post .comment-form .submit は 58×58px 固定＋padding:0 !important で
 * アイコン専用の寸法を作っているため、標準ではそれを解除する。
 * ⚠ padding は相手が !important のため同じ手段でしか上書きできない
 * （このプロジェクトは !important を避ける方針だが、!important を打ち消すには
 *  !important が必要という例外。詳細度だけでは勝てない）。 */
body.tiptop-standard-system.single-post .comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 44px;
	padding: 0.7em 1.6em !important;
	letter-spacing: 0.08em !important;
	border-radius: var(--tt-radius-pill);
	/* 行間はモックと同じ normal（2026-08-10・Issue #784）。モックの送信ボタンは
	 * `.button` に line-height の指定が無く、`<button>` は既定で body の行間を継承しない
	 * ため normal になる。実サイトは 1.6 で 19.968px だった。
	 * **見た目は変わらない**：この要素は min-height 44px と inline-flex + align-items:center で
	 * 高さも文字の縦位置も決まっており、行間19.968px→normal(約15px)でも 44px のまま
	 * （padding 0.7em×2＋文字で 44px に届かないため min-height が支配する）。 */
	line-height: normal;
}

/* 標準モードのブログ一覧カード間隔（2026-08-08・モック移行）。
 * blog-page.css の 40px は数値直書きでトークン外だったため、標準モードだけ
 * トップのブログ節と同じ --tt-space-6（32px）へ揃える。イマーシブは40pxのまま。 */
body.tiptop-standard-system .tiptop-blog-list {
	gap: var(--tt-space-6);
}

/* ブログ詳細のタイトル（2026-08-09・モックへ）。
 * 実サイトは 39.2px / 800 でモック（clamp(1.5rem, 2.6vw, 2.2rem)＝1440pxで35.2px / 700）より
 * 一段強かった。他の詳細ページ（実績・ニュース）と同じ調子に揃える。 */
body.tiptop-standard-system.single-post .entry__title {
	font-size: var(--tt-text-title);
	font-weight: 700;
	/* 和文なので字間を足さない（2026-08-12・Issue #913）。実績詳細・新着詳細も同じ。 */
	letter-spacing: normal;
	/* タイトル直下の余白。2026-08-11（Issue #900）に「モックは24px」として
	 * --tt-space-5 を入れたが、実測するとモックは **32px** で、24px は誤りだった
	 * （2026-08-12・Issue #913。モックは 2026-08-11 に組み直されている）。
	 * 同時に .entry__meta の margin-top: 18px を 0 にしたので、隣接マージンの
	 * 相殺を当てにする書き方もやめてここだけで距離を作る。 */
	margin-bottom: var(--tt-space-6);
}

/* ============================================================
   ブログ詳細の残差をモックへ（2026-08-09・スクショ＋全要素の実測突合）
   前回「一通り完了」と判断したが、目次・本文タイポ・コメントの基準サイズが
   まとめてズレていた。モックとの実測差分をそのまま埋める。
   ============================================================ */

/* --- 目次：面＋罫線＋角丸のカード（実サイトは面も罫線も無かった） --- */
body.tiptop-standard-system .tiptop-blog-toc {
	padding: var(--tt-space-5);
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-md);
	background: var(--tiptop-surface);
	font-size: var(--tt-text-body);
	line-height: 2;
	/* モックの目次は `.tiptop-blog-toc` 単独＝ウィジェットではないので block（2026-08-11・Issue #900）。
	 * 実サイトのマークアップは nav に `tiptop-blog-widget` を兼ねさせているため、
	 * design-system.css の標準モード用ウィジェット規則（`.tiptop-blog-widget`）が持つ
	 * `display: grid; row-gap: 12px` まで乗り、見出し→最初の項目が
	 * **モック16px に対し 28px**（16px の margin に row-gap 12px が上乗せ）になっていた。
	 * 同詳細度(0,2,1)でこのファイルが後勝ちするので、ここで block へ戻す。 */
	display: block;
}

body.tiptop-standard-system .tiptop-blog-toc ol {
	padding-left: 1.2em;
}

/* 項目の間隔もモックへ（2026-08-11・Issue #900）。モックの `.tiptop-blog-toc ol` は 8px、
 * 実サイトは基底 `.tiptop-blog-toc__list`(0,1,0) の 10px のままだった。
 * イマーシブ側は immersive-content-pages.css が同じリストへ別の gap を持つので影響しない。 */
body.tiptop-standard-system .tiptop-blog-toc__list {
	gap: var(--tt-space-2);
}

body.tiptop-standard-system .tiptop-blog-toc a {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-note);
	line-height: 1.8;
}

body.tiptop-standard-system .tiptop-blog-toc a:hover,
body.tiptop-standard-system .tiptop-blog-toc a:focus-visible {
	color: var(--tiptop-contrast);
}

/* --- 本文：行間2.42→2.0、h2は33.6px→1.25remで上罫線つき --- */
body.tiptop-standard-system.single-post .tiptop-post-detail__body {
	line-height: 2;
}

body.tiptop-standard-system.single-post .tiptop-post-detail__body h2 {
	margin-top: var(--tt-space-8);
	margin-bottom: var(--tt-space-4);
	padding-top: var(--tt-space-5);
	border-top: 1px solid var(--tiptop-border);
	font-weight: 700;
}

body.tiptop-standard-system.single-post .tiptop-post-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.single-post .tiptop-post-detail__body h3 {
	margin-top: var(--tt-space-7);
	margin-bottom: var(--tt-space-3);
	font-weight: 700;
}

body.tiptop-standard-system.single-post .tiptop-post-detail__body h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-subheading);
	line-height: 1.7;
}

/* --- コメント：基準フォントが16px/行間36.8pxのままだった --- */
body.tiptop-standard-system.single-post .blog-comments,
body.tiptop-standard-system.single-post .comment-form {
	font-size: var(--tt-text-body);
	line-height: 2;
}

body.tiptop-standard-system.single-post .blog-comments__title {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-section);
	font-weight: 500;
	line-height: 2;
	/* 見出し下の余白（2026-08-11・Issue #900）。モックは 32px、実サイトは
	 * `.single-post .blog-comments__title`(0,2,1) の clamp(28px, 4vw, 44px) が
	 * 1920px で上限に張り付いて **44px** だった。
	 * この差は突合ツールが報告しない（モック「2」／実サイト「コメント数 2」と
	 * 文言が違い対応が取れないため）＝要素を直接並べて見つけたもの。 */
	margin-bottom: var(--tt-space-6);
	/* 書体・字間・アイコンとの間隔をモックへ（2026-08-11・PR #904 の新パスが検出）。
	 * モック（_mockup/tiptop-single.css:283-291）は `font-family: var(--font-latin)`＝Jost、
	 * 字間 0.04em、gap 12px。実サイトは書体の指定が無く和文（Zen Kaku Gothic New）を継承し、
	 * 字間は `.single-post .blog-comments__title` の 0.08em＝モックの2倍だった。
	 *
	 * 日本語を欧文書体で描く心配は無い：この見出しで**目に見えるのはアイコンと数字だけ**で、
	 * 「コメント数」は `<span class="screen-reader-text">`（comments.php:89）＝読み上げ専用。
	 * 突合ツールが「コメント数 2」というキーを作っていたのは textContent が
	 * 読み上げ専用テキストも拾うためで、画面には出ていない。
	 *
	 * このファイル下方の `.comment-reply-title` へ入れた同じ是正と同型＝
	 * **共通ルール漏れが隣の要素にも残っていた**実例。 */
	display: flex;
	gap: var(--tt-space-3);
	font-family: var(--tiptop-font-latin);
	letter-spacing: calc(0.04em + var(--tt-letter-add));
}

body.tiptop-standard-system.single-post .comment-reply-title {
	font-size: var(--tt-text-subheading);
	font-weight: 700;
	line-height: 1.8;
}

/* コメントフォームの細部（2026-08-09・実測突合の2周目）。
 * ラベル・返信見出し・textareaのパディング・注意書きがモックとズレていた。 */
body.tiptop-standard-system.single-post .comment-reply-title {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-card);
	font-weight: 500;
	line-height: 2;
}

body.tiptop-standard-system.single-post .comment-form label:not(.screen-reader-text) {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-label);
	font-weight: 500;
	line-height: 2;
}

body.tiptop-standard-system.single-post .comment-form textarea {
	padding: 0.7em 0.9em;
	font-size: var(--tt-text-body);
	line-height: 1.9;
}

body.tiptop-standard-system.single-post .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	font-size: var(--tt-text-body);
	line-height: 1.9;
}

body.tiptop-standard-system.single-post .blog-comments__notice {
	/* コメント一覧との間隔もモックへ（2026-08-10）。モックの同名クラスは margin-top 32px、
	 * 実サイトは `.single-post .blog-comments__notice`（0,2,1）の 24px だった。
	 * サイズ（12.16px）は既に一致。 */
	margin-top: var(--tt-space-6);
	font-size: var(--tt-text-meta);
	line-height: 2;
}

/* 目次は番号付きリスト（モックは ol の既定マーカーが見える）。
 * 実サイトは list-style: none が効いて番号が消えていた。 */
body.tiptop-standard-system .tiptop-blog-toc ol {
	list-style: decimal;
}

/* 本文中の画像もカードと同じ角丸に揃える（モックの .entry-body figure img と同じ）。 */
body.tiptop-standard-system.single-post .tiptop-post-detail__body img,
body.tiptop-standard-system.single-post .tiptop-post-detail__body figure img {
	border-radius: var(--tt-radius-md);
}

/* コメント欄のアイコンとボタン（2026-08-09・実測突合の3周目）。
 * あやちゃんの「アイコンやボタンもまだ全然違う」への対応。 */

/* コメント数は見出しの主役ではないのでグレーで控えめに（実サイトは#111・行高42px）。 */
body.tiptop-standard-system.single-post .blog-comments__count {
	color: var(--tiptop-muted);
	line-height: 2;
}

/* ログイン中の表示名は本文色（実サイトはグレーで沈んでいた）。 */
body.tiptop-standard-system.single-post .logged-in-as {
	color: var(--tiptop-text);
}

/* プロフィール編集／ログアウトは32pxの丸いアウトラインボタン
 * （実サイトは18pxの素のアイコンで、枠も丸みも無かった）。 */
body.tiptop-standard-system.single-post .logged-in-as__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-pill);
	color: var(--tiptop-muted);
}

body.tiptop-standard-system.single-post .logged-in-as__icon svg {
	width: 14px;
	height: 14px;
}

body.tiptop-standard-system.single-post .logged-in-as__icon:hover,
body.tiptop-standard-system.single-post .logged-in-as__icon:focus-visible {
	border-color: var(--tiptop-contrast);
	color: var(--tiptop-contrast);
}

/* 送信ボタンは左寄せ（モックは .form-submit が block。実サイトは flex-end で右端にいた）。 */
body.tiptop-standard-system.single-post .comment-form .form-submit {
	display: block;
}

/* 注意書きのアイコンはモックと同じ13px（実サイトは16pxで文字より目立っていた）。 */
body.tiptop-standard-system.single-post .blog-comments__notice-icon svg {
	width: 13px;
	height: 13px;
}

/* ============================================================
   投稿済みコメントを承認済みモックへ合わせる（2026-08-09）
   イマーシブの濃色コメント面は維持し、標準だけを罫線中心の一覧へ整える。
   ============================================================ */

/* リスト上罫線と各コメントの下罫線で区切るため、項目自身の上罫線は持たせない。 */
body.tiptop-standard-system.single-post .blog-comments__list {
	margin-bottom: var(--tt-space-7);
}

body.tiptop-standard-system.single-post .blog-comment {
	padding: var(--tt-space-5) 0;
	border-top: 0;
	border-bottom: 1px solid var(--tiptop-border);
}

/* 一覧の最後だけ下の罫線を消す（2026-09-10・Issue #1243・オーナー判断）。
 * 区切り線はコメントとコメントの「間」にだけ置き、一覧を上下から挟まない。
 * ⚠ 直下の子だけを対象にする。返信（.children）の中の最後のコメントは
 * 親の一覧の途中なので、線を残す。 */
body.tiptop-standard-system.single-post .blog-comments__list > .blog-comment:last-child {
	border-bottom: 0;
}

/* 既存ルールが先頭だけ上余白を0にするため、モックの24pxへ明示的に戻す。 */
body.tiptop-standard-system.single-post .blog-comments__list > .blog-comment:first-child {
	padding-top: var(--tt-space-5);
}

body.tiptop-standard-system.single-post .blog-comment__body {
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--tt-space-4);
	align-items: start;
}

body.tiptop-standard-system.single-post .blog-comment__avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
}

/* 56px前提の旧アバター要素を枠へ追従させ、二重の枠線と面を作らない。 */
body.tiptop-standard-system.single-post .blog-comment__avatar-image,
body.tiptop-standard-system.single-post .blog-comment__avatar-fallback {
	width: 100%;
	height: 100%;
}

body.tiptop-standard-system.single-post .blog-comment__avatar-fallback {
	border: 0;
	background: transparent;
	color: var(--tiptop-muted);
}

body.tiptop-standard-system.single-post .blog-comment__avatar-fallback svg {
	width: 18px;
	height: 18px;
}

body.tiptop-standard-system.single-post .blog-comment__content {
	min-width: 0;
}

/* 編集リンクは右端に残し、著者名と日時だけをモックどおり横並びにする。 */
body.tiptop-standard-system.single-post .blog-comment__identity {
	display: flex;
	align-items: baseline;
	gap: var(--tt-space-3);
}

body.tiptop-standard-system.single-post .blog-comment__header {
	align-items: baseline;
	margin-bottom: var(--tt-space-2);
}

body.tiptop-standard-system.single-post .blog-comment__author,
body.tiptop-standard-system.single-post .blog-comment__author a {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-body);
	font-weight: 700;
}

body.tiptop-standard-system.single-post .blog-comment__permalink {
	color: var(--tiptop-text);
}

body.tiptop-standard-system.single-post .blog-comment__permalink time {
	color: var(--tiptop-muted);
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-meta);
	letter-spacing: 0.06em;
}

body.tiptop-standard-system.single-post .blog-comment__text,
body.tiptop-standard-system.single-post .blog-comment__text p {
	color: var(--tiptop-text);
}

body.tiptop-standard-system.single-post .blog-comment__text,
body.tiptop-standard-system.single-post .blog-comment__text p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-note);
	line-height: 2;
}

body.tiptop-standard-system.single-post .blog-comment__text p {
	margin: 0;
}

body.tiptop-standard-system.single-post .comment-reply-link {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-label);
	font-weight: 500;
}

body.tiptop-standard-system.single-post .comment-reply-link > span {
	text-decoration: none;
}

body.tiptop-standard-system.single-post .comment-reply-link:hover,
body.tiptop-standard-system.single-post .comment-reply-link:focus-visible {
	color: var(--tiptop-contrast);
}

body.tiptop-standard-system.single-post .blog-comment__reply-icon svg {
	width: 13px;
	height: 13px;
}

/* 返信は左罫線からぶら下げ、親コメントとの間だけ24px空ける。 */
body.tiptop-standard-system.single-post .blog-comment .children {
	margin: var(--tt-space-5) 0 0;
	padding-left: var(--tt-space-5);
	border-left: 1px solid var(--tiptop-border);
	list-style: none;
}

body.tiptop-standard-system.single-post .blog-comment .children .blog-comment {
	padding-bottom: 0;
	border-bottom: 0;
}

/* 返信アバターは親コメントより一段控えめな32pxにする。 */
body.tiptop-standard-system.single-post .blog-comment .children .blog-comment__body {
	grid-template-columns: 32px minmax(0, 1fr);
	gap: var(--tt-space-3);
}

body.tiptop-standard-system.single-post .blog-comment .children .blog-comment__avatar {
	width: 32px;
	height: 32px;
}

@media (max-width: 781px) {
	body.tiptop-standard-system.single-post .blog-comment__body {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: var(--tt-space-3);
	}

	body.tiptop-standard-system.single-post .blog-comment__avatar {
		width: 32px;
		height: 32px;
	}

	body.tiptop-standard-system.single-post .blog-comment__header {
		flex-wrap: wrap;
		gap: var(--tt-space-2);
	}
}

/* コメントフォームのアクティブ表示をモックへ（2026-08-09）。
 * モック（_mockup/tiptop-single.css）は
 *   border-color: アクセント / outline: 2px アクセント30%の半透明 / offset 1px
 * で、しかも `:focus`＝**クリックでも見た目が変わる**。
 * 実サイトは front-component-unification.css が `:focus-visible` に
 * `--tt-form-focus-color` の実線 outline ＋ offset 3px を当てていて、
 * 色も太さもオフセットも違い、さらにマウスクリックでは何も変わらなかった。
 * ここでは :focus と :focus-visible の両方を当てて、どちらの操作でも
 * モックと同じ見え方にする（キーボード利用者の視認性は保つ）。 */
body.tiptop-standard-system.single-post .comment-form :is(
	input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	textarea,
	select
):focus,
body.tiptop-standard-system.single-post .comment-form :is(
	input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	textarea,
	select
):focus-visible {
	border-color: var(--tiptop-accent);
	outline: 2px solid color-mix(in srgb, var(--tiptop-accent) 30%, transparent);
	outline-offset: 1px;
}

/* 記事詳細の文字を承認済みモックへ（2026-08-09・Issue #784・#768）。
 * モックは「大きい見出しほど字間を締める」設計で、本文まわりの字間は 0.02em。
 * 実サイトは共通の 0.04em が一律に乗って、タイトルと見出しで開きすぎていた。 */
body.tiptop-standard-system .entry__title {
	/* 行間もモックの1.6倍へ（実サイトは1.45倍で詰まっていた）。 */
	line-height: calc(1.6 * var(--tt-leading-scale));
	letter-spacing: 0.02em;
}

body.tiptop-standard-system .entry__content .wp-block-heading {
	letter-spacing: 0.02em;
}

/* 詳細のメタ（カテゴリのバッジと日付）。モックはバッジ11.52px/w700、日付12.48px、
 * どちらも行間2.0倍。実サイトは10.56px/w500・11.52pxで、行間も1.95倍だった。 */
body.tiptop-standard-system .tiptop-post-detail__header .tiptop-badge {
	font-size: var(--tt-text-meta);
	font-weight: 700;
	line-height: calc(2 * var(--tt-leading-scale));
}

body.tiptop-standard-system .tiptop-post-detail__header time {
	font-size: var(--tt-text-label);
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: 0.06em;
}

/* コメント件数はモックだと欧文書体の14.4px。実サイトは和文書体の20.8pxで
 * 見出しのように大きく出ていた。 */
body.tiptop-standard-system .blog-comments__count {
	font-family: var( --tiptop-font-latin );
	font-size: var(--tt-text-body);
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: 0.06em;
}

/* サイドバーのリンクを承認済みモックへ（2026-08-09・Issue #784）。
 * モックは w400 の細字で行間2.0倍。実サイトは w500・行間1.7倍で、
 * 本文より主張が強く行間も詰まっていた。記事リンクとカテゴリの両方が対象。
 *
 * 2026-08-11（Issue #900）：目次を除外した。実サイトの目次 nav は
 * `tiptop-blog-toc tiptop-blog-widget` と両方を持つため、このルールが
 * 同詳細度(0,2,2)・後勝ちで上の目次リンク規則（`.tiptop-blog-toc a`・
 * モックと完全に一致している方）を潰しており、目次リンクの色が
 * **モック #707070 に対し #222**、行間が **23.04px に対し 26.24px** になっていた。
 * モックの目次リンクはこのサイドバー共通ルールの対象外なので、狙いどおり除外する。 */
body.tiptop-standard-system .tiptop-blog-widget:not(.tiptop-blog-toc) a {
	font-weight: 400;
	line-height: calc(2 * var(--tt-leading-scale));
	/* 色もモックの本文色へ（実サイトは見出し色で、サイドバーとしては強すぎた）。 */
	color: var(--tiptop-text);
}

/* コメントの送信ボタン。モックは 12.48px / w600 で、404の戻るボタンと同じ寸法。
 * 実サイトは 10.72px / w700 と小さく太かった。
 * 2026-08-10：ここにあった `line-height: calc(2 * ...)` を削除した。**そもそも死んでいた**
 * ——同ファイル上方の `.single-post` を含むルール (0,4,1) が 1.6 を当てており、この (0,3,1)
 * では届いていなかった（実測 19.968px＝1.6倍）。そしてモックの正解は 2.0 ではなく normal
 * だったので、値ごと上のルール側へ寄せた（Issue #784）。 */
body.tiptop-standard-system .comment-form .submit {
	font-size: var(--tt-text-label);
	font-weight: 600;
}

/* コメント欄と返信リンクの字間をモックへ（2026-08-10）。
 * モックは見出しが0.06em、返信リンクは字間なし。実サイトはどちらも0.08emで、
 * 共通の見出し字間が一律に乗っていた。 */
/* 2026-08-10（オーナー指摘「Commentが細字？」）：ラベルが「Comment」という
 * ラテン文字なのに和文書体（Zen Kaku Gothic New）で描かれていた。モックは
 * 欧文書体（Jost）。サイズ16.8px・太さ500・行間33.6px・字間0.06emは既に一致して
 * いたので、書体だけ欧文トークンへ寄せる（書体名は直書きしない）。 */
body.tiptop-standard-system .comment-reply-title {
	font-family: var(--tiptop-font-latin);
	letter-spacing: 0.06em;
}

body.tiptop-standard-system .comment-reply-link {
	letter-spacing: normal;
}

/* サイドバーの記事リンクのサイズ（2026-08-10）。モックは 0.82rem、実サイトは 0.8rem。
 * li へ書くとリンク側の指定に負けるため、リンク自身に当てる。
 *
 * 2026-08-11（Issue #900）：目次を除外した。目次 nav も `tiptop-blog-widget` を
 * 兼ねるため (0,2,3) のこのルールが目次リンクにも当たり、**モック 12.8px に対し
 * 13.12px** になっていた。モックの目次リンクは 0.8rem。 */
body.tiptop-standard-system .tiptop-blog-widget:not(.tiptop-blog-toc) li:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
body.tiptop-standard-system .tiptop-blog-widget:not(.tiptop-blog-toc) li a {
	font-size: var(--tt-text-note);
}

/*! bundle-source: assets/css/blog-comment-submit-accent.css */
/* Issue #347: neutralize native button chrome for the comment submit control.
 * The accent-fill design this file used to draw is retired (2026-07-22, owner
 * decision) — the button now follows the same generic immersive button
 * treatment as any other native <button>/<input type="submit">. Only the
 * appearance reset survives here since nothing else in the codebase sets it
 * for this element. */
body.tiptop-standard-system.single-post .comment-respond .comment-form .form-submit .submit {
	appearance: none;
}

/* Issue #459: keep comment icon dimensions in CSS instead of SVG markup. */
.blog-comment__avatar-fallback svg {
	width: 26px;
	height: 26px;
}

.blog-comment__edit svg,
.blog-comments__title-icon svg,
.logged-in-as__icon svg {
	width: 18px;
	height: 18px;
}

.blog-comment__reply-icon {
	width: 15px;
	height: 15px;
}

.comment-form .form-submit .submit svg {
	width: 22px;
	height: 22px;
}

.blog-comments__notice-icon svg {
	width: 16px;
	height: 16px;
}

/*! bundle-source: assets/css/front-ds-page-cleanup.css */
/*
 * #196: Page-specific Design System v2 cleanup layer.
 *
 * Loaded after the active page-specific stylesheet and before responsive fixes.
 * This keeps late page CSS from reintroducing rounded pill badges or legacy
 * label shapes while preserving intentional content-specific layout rules.
 */

.single-post .sidebar-list--compact a,
.category .sidebar-list--compact a,
.tag .sidebar-list--compact a,
.date .sidebar-list--compact a,
.tiptop-work-detail__meta a,
.tiptop-contact-form .required {
	border-radius: var(--tt-radius-none);
}

.single-post .sidebar-list--compact a,
.category .sidebar-list--compact a,
.tag .sidebar-list--compact a,
.date .sidebar-list--compact a,
.tiptop-work-detail__meta a {
	background: var(--tt-color-base);
	color: var(--tt-color-heading);
}

.tiptop-contact-form .required {
	background: transparent;
	color: var(--tt-color-muted);
}

/* #404: Content preview cards share one motion and meta contract. */
.post-card,
.work-card,
.front-blog-card,
.front-content-card,
.tiptop-blog-card {
	--tiptop-card-hover-y: 0px;
	--tiptop-card-image-hover-scale: 1;
	transition: transform var(--tt-motion-duration-reveal) var(--tt-motion-easing-immersive);
}

.post-card:hover,
.post-card:focus-within,
.post-card:focus-visible,
.work-card:hover,
.work-card:focus-within,
.work-card:focus-visible,
.front-blog-card:hover,
.front-blog-card:focus-within,
.front-blog-card:focus-visible,
.front-content-card:hover,
.front-content-card:focus-within,
.front-content-card:focus-visible,
.tiptop-blog-card:hover,
.tiptop-blog-card:focus-within,
.tiptop-blog-card:focus-visible {
	/* 承認済みモックに合わせ、カード画像のhover拡大率を1.025倍に統一。 */
	--tiptop-card-image-hover-scale: 1.025;
}

/* #644: Whole-card anchors share one additive class instead of coupling the
 * reset contract to three page-specific class systems. Focus-visible remains
 * owned by the existing page-level rules, which already win by specificity and
 * enqueue order. Front-content cards keep their valid multi-link markup, so the
 * title link stretches across only the otherwise-empty card area while nested
 * image/category links stay above it. */
.tiptop-card-link,
.front-content-card .post-card__title a {
	color: inherit;
	text-decoration: none;
}

.front-content-card {
	position: relative;
}

.front-content-card .post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.front-content-card .post-card__image,
.front-content-card .front-content-card__terms a {
	position: relative;
	z-index: 1;
}

/* Arrow behavior remains an intentional page-level exception: News keeps its
 * non-nudging row arrow, while Works hides the redundant front-content arrow. */

/* Front cards keep scroll-stack transforms while consuming the shared hover variable. */
.front-blog-card {
	position: relative;
	transform:
		translateX(var(--tiptop-card-offset, 0px))
		translateY(calc(var(--tiptop-card-stack-y, 0px) + var(--tiptop-card-hover-y)))
		rotate(var(--tiptop-card-rotate, 0deg))
		scale(var(--tiptop-card-scale, 1));
	transform-origin: center;
	transition:
		opacity var(--tt-motion-duration-ui) ease,
		transform var(--tt-motion-duration-reveal) var(--tt-motion-easing-immersive);
	will-change: transform;
}

.front-blog-card:hover,
.front-blog-card:focus-within {
	transform:
		translateX(var(--tiptop-card-offset, 0px))
		translateY(calc(var(--tiptop-card-stack-y, 0px) + var(--tiptop-card-hover-y)))
		rotate(var(--tiptop-card-rotate, 0deg))
		scale(var(--tiptop-card-scale, 1));
}

.post-card__image img,
.front-blog-card .post-card__image img,
.front-content-card .post-card__image img,
.tiptop-blog-card .post-card__image img {
	transform: scale(var(--tiptop-card-image-hover-scale));
	transition: transform 0.4s ease;
}/* botanistofficial.com/special/10th_anniversary/ 参考：タイトル下線が左から伸びるhover。
 * .tiptop-blog-cardはタイトルにリンクを持たず(front-intro-list-unstyled.cssに既存の
 * 同種実装あり)のため対象外。 */
.post-card__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.4s ease;
}

.post-card:hover .post-card__title a,
.post-card:focus-within .post-card__title a,
.post-card:focus-visible .post-card__title a {
	background-size: 100% 1px;
}

/* .front-blog-cardはカード全体が1つのリンクでタイトル自体にaを持たず、タイトルは
 * ellipsis省略(base-system.css)の前提でwidth:fit-contentにできないため、省略担当の
 * h3(.post-card__title)とは別に、中の文字だけを包むinline要素(span)へ下線を掛ける。
 * inlineはbackground-sizeの100%が「テキスト自身の幅」になるため、fit-content指定は不要。 */
.front-blog-card__title-text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.4s ease;
}

.front-blog-card:hover .front-blog-card__title-text,
.front-blog-card:focus-within .front-blog-card__title-text {
	background-size: 100% 1px;
}

/* Newsも front-blog-card と同じ「カード全体が1つのリンク、タイトルは別要素」構造
 * (template-parts/content-news-row.php) のため、同じinline span下線パターンを適用
 * （2026-07-28、トップのリンクホバーをBlogと統一）。 */
.tiptop-news-item__title-text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.4s ease;
}

.tiptop-news-item:hover .tiptop-news-item__title-text,
.tiptop-news-item:focus-within .tiptop-news-item__title-text {
	background-size: 100% 1px;
}

/* ============================================================
   標準モードはタイトル下線hoverを持たない（2026-08-07・オーナー確定「一覧も止める」）
   モックのhoverは実質「ナビの下線／実績カードの画像ズーム／ニュース行の背景＋矢印／
   ボタンの塗り替え」だけで、カードのタイトル下線は無い。トップだけ止めると一覧と
   挙動が割れるため、標準モードでは全ページ一律に止める。
   実測で標準モードに下線が生きていたのは、ニュース一覧・実績一覧・トップの3箇所
   （ブログ一覧の下線はイマーシブ限定スコープで、もともと標準には出ていなかった）。
   イマーシブは下線hoverを維持する＝ここはモード差分。
   ============================================================ */
body.tiptop-standard-system .post-card:hover .post-card__title a,
body.tiptop-standard-system .post-card:focus-within .post-card__title a,
body.tiptop-standard-system .post-card:focus-visible .post-card__title a,
body.tiptop-standard-system .front-blog-card:hover .front-blog-card__title-text,
body.tiptop-standard-system .front-blog-card:focus-within .front-blog-card__title-text,
body.tiptop-standard-system .tiptop-news-item:hover .tiptop-news-item__title-text,
body.tiptop-standard-system .tiptop-news-item:focus-within .tiptop-news-item__title-text {
	background-size: 0% 1px;
}

.post-card__meta,
.front-blog-card .post-card__meta,
.front-content-card .post-card__meta,
.tiptop-blog-card .post-card__meta,
.tiptop-news-item__date,
.tiptop-news-item__terms {
	color: var(--tt-color-muted);
	font-size: var(--tt-text-meta);
	font-weight: 500;
	letter-spacing: calc(0.05em + var(--tt-letter-add));
	line-height: var(--tt-leading-tight, 1.4);
}

/* #404: work-card meta holds an optional category span alongside the date;
 * lay them out with a gap instead of a literal separator character. */
.work-card .post-card__meta {
	display: flex;
	align-items: baseline;
	gap: var(--tt-space-2);
}

@media (prefers-reduced-motion: reduce) {
	.post-card,
	.work-card,
	.front-blog-card,
	.front-content-card,
	.tiptop-blog-card,
	.post-card__image img,
	.front-blog-card .post-card__image img,
	.front-content-card .post-card__image img,
	.tiptop-blog-card .post-card__image img {
		transition: none;
	}

	.post-card:hover,
	.post-card:focus-within,
	.work-card:hover,
	.work-card:focus-within,
	.front-blog-card:hover,
	.front-blog-card:focus-within,
	.front-content-card:hover,
	.front-content-card:focus-within,
	.tiptop-blog-card:hover,
	.tiptop-blog-card:focus-within {
		transform: none;
	}
}

/*! bundle-source: assets/css/responsive-fixes.css */
/* Mobile and narrow-width safety fixes. */

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

.site,
.site-main,
.tiptop-page-content,
.entry__content,
.wp-site-blocks {
	min-width: 0;
}

.entry__content iframe,
.entry__content embed,
.entry__content object,
.entry__content video,
.tiptop-page-content iframe,
.tiptop-page-content embed,
.tiptop-page-content object,
.tiptop-page-content video {
	max-width: 100%;
}

.entry__content table,
.tiptop-page-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry__content pre,
.tiptop-page-content pre {
	max-width: 100%;
	overflow-x: auto;
}

.tiptop-front-toolbar-toggle {
	width: 26px;
	height: 42px;
	min-width: 26px;
	min-height: 42px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	line-height: 1;
}

.tiptop-front-toolbar-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 820px) {
	body {
		/* main.css の body と同値の再掲。あちらをトークン参照へ戻したので
		 * ここも合わせる（Issue #947）。 */
		font-size: var(--tt-text-body);
		line-height: calc(1.95 * var(--tt-leading-scale));
	}

	.content-area,
	.site-header__inner,
	.site-footer__inner,
	.tiptop-front-content .top-in,
	.tiptop-front-content .intro2-in,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4 > .wp-block-group,
	.tiptop-front-content .intro-news .content-area {
		width: min(calc(100% - 32px), var(--tiptop-site-width));
	}

	.site-header {
		position: sticky;
		top: 0;
	}

	/* gap をモックに合わせる（2026-08-16・オーナー指示「揃える」）。モックは
	 * shared.css:1846 で --tt-space-4（16px）。実サイトは14pxで、ヘッダーの
	 * 「相談する」とハンバーガーの間隔が2px狭く、ボタンの右端位置がモックの
	 * 内側右から49pxに対して47pxになっていた（実測）。 */
	.site-header__inner {
		gap: var(--tt-space-4);
		min-height: 62px;
	}

	.site-branding,
	.site-branding__title {
		min-width: 0;
	}

	.site-branding__title {
		display: block;
		overflow: hidden;
		max-width: 62vw;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.custom-logo {
		max-width: min(180px, 56vw);
	}

	.archive-hero,
	.section,
	.content-layout .entry,
	.tiptop-front-content .top,
	.tiptop-front-content .intro2,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4,
	.tiptop-front-content .intro-services,
	.tiptop-front-content .intro-news {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.entry__title{
		/* 承認済みモックは段の clamp() で可変にするため、ここでは文字サイズを上書きしない。 */
		line-height: calc(1.45 * var(--tt-leading-scale));
		letter-spacing: calc(0.04em + var(--tt-letter-add));
		word-break: keep-all;
		overflow-wrap: anywhere;
	}


	.archive-hero__title,
	.section h2,
	.section-heading-row h2 {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.archive-hero__lead,
	.entry__content,
	.entry__content p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
	.card p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
	.post-card__excerpt,
	.news-item__excerpt,
	.contact-page-intro p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
	.tiptop-front-content p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
	.tiptop-front-content li:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
		/* 役割ごとの段を継承させるため、複数役割を束ねたモバイル専用サイズは置かない。 */
		line-height: calc(1.95 * var(--tt-leading-scale));
	}

	.card-grid,
	.post-list,
	.content-layout .post-list {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.post-card__body {
		padding-top: 16px;
	}

	.news-item,
	.tiptop-contact-form__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.term-list,
	.entry__meta,
	.post-card__meta,
	.news-item__meta {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.term-list a,
	.entry__meta a,
	.post-card__meta a,
	.news-item__meta a,
	.tag-links a,
	.wp-block-post-terms a {
		max-width: 100%;
		white-space: normal;
	}

	.tiptop-front-content .profile-contents,
	.tiptop-front-content .website > .wp-block-group,
	.tiptop-front-content .siryou > .wp-block-group,
	.tiptop-front-content .intro4 > .wp-block-group > .wp-block-group {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tiptop-front-content .siryou .wp-block-image {
		order: 0;
	}

	.tiptop-front-content .profile-contents .wp-block-image,
	.tiptop-front-content .website .wp-block-image,
	.tiptop-front-content .siryou .wp-block-image,
	.tiptop-front-content .intro4 .wp-block-image {
		margin-right: auto;
		margin-left: auto;
	}

	.front-content-card-list-wrap,
	.front-content-card-list--scroll {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.front-content-card-list--scroll {
		scroll-snap-type: x proximity;
	}

	.front-content-card-list--scroll .post-card,
	.front-content-card-list--scroll .front-content-card {
		scroll-snap-align: start;
	}

	.wpcf7,
	.tiptop-contact-form {
		width: 100%;
		max-width: 100%;
	}

	.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	.wpcf7 select,
	.wpcf7 textarea,
	.tiptop-contact-form input[type="text"],
	.tiptop-contact-form input[type="email"],
	.tiptop-contact-form select,
	.tiptop-contact-form textarea,
	.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
		max-width: 100%;
		font-size: var(--tt-text-subheading);
	}

	.wpcf7 input[type="submit"],
	.tiptop-contact-form__submit input {
		width: 100%;
	}

	.site-footer__inner {
		gap: 18px;
	}

	.site-footer__menu {
		width: 100%;
	}

	/* サイト自身のハンバーガーボタン(右上)と重なるため、スマホは画面下中央のフローティングボタンに切り替える。 */
	.tiptop-front-toolbar-shell {
		top: auto;
		right: auto;
		bottom: 18px;
		left: 50%;
		height: auto;
		transform: translateX(-50%);
	}

	.tiptop-front-toolbar {
		top: auto;
		left: 50%;
		right: auto;
		bottom: calc(100% + 8px);
		transform: translateX(-50%);
		width: min(360px, calc(100vw - 24px));
		max-height: min(80svh, 560px);
		overflow-y: auto;
		padding: 12px;
	}

	.tiptop-front-toolbar__label {
		width: 100%;
		padding: 0 0 8px;
		text-align: left;
	}

	.tiptop-front-toolbar__links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		gap: 8px;
	}

	.tiptop-front-toolbar__links a {
		justify-content: center;
		min-width: 0;
		min-height: 34px;
		padding: 0.5rem 0.65rem;
		font-size: var(--tt-text-label);
	}

	/* front-utility-control-states.css の共通コントラクト(transparent surface / 26x42 / border:0)は
	 * このファイルより後に読まれ、素のクラス1個(0,1,0)では同詳細度で後勝ちされる。
	 * 丸いフローティングボタンの形も色も、シェル込み(0,2,0)で当てて勝たせる。
	 * ⚠ 形だけ勝たせて色を落とすと、背景 #171717 にアイコン色 currentColor
	 * (= シェルの var(--tiptop-contrast)。12パレット中9つが #111111〜#2e3038 の暗色)が
	 * 重なって真っ黒な塊になる(2026-08-17 実測)。background と color は必ず一組で指定する。 */
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 999px;
		background: #171717;
		color: #f2f2f0;
	}

	/* 共通コントラクトの hover / 展開中 / focus-visible は 0,2,0 かつ後読みなので、
	 * シェル込み(0,3,0)で暗い面と明るいアイコンを維持する。 */
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle:hover,
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle[aria-expanded="true"],
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle:focus-visible {
		border-color: rgba(255, 255, 255, 0.55);
		background: #2b2b2b;
		color: #ffffff;
	}

	/* outline は暗い面の外側(ページ背景の上)に出るため、currentColor(明色)では消える。 */
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle:focus-visible {
		outline: 2px solid #171717;
		outline-offset: 3px;
	}

}

@media (max-width: 430px) {
	.content-area,
	.site-header__inner,
	.site-footer__inner,
	.tiptop-front-content .top-in,
	.tiptop-front-content .intro2-in,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4 > .wp-block-group,
	.tiptop-front-content .intro-news .content-area {
		width: min(calc(100% - var(--tt-gutter-mobile)), var(--tiptop-site-width));
	}

	.archive-hero,
	.section,
	.content-layout .entry,
	.tiptop-front-content .top,
	.tiptop-front-content .intro2,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4,
	.tiptop-front-content .intro-services,
	.tiptop-front-content .intro-news {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.card,
	.service-detail {
		padding: 22px 18px;
	}

	.tiptop-front-toolbar__links a {
		white-space: normal;
		text-align: center;
		line-height: 1.2;
	}
}

/* Shared hero alignment using existing design tokens. */

.archive-hero,
.page-hero,
.tiptop-service-hero,
.tiptop-news-page .archive-hero,
.tiptop-works-page .archive-hero {
	padding-top: var(--tt-space-section);
	padding-bottom: var(--tt-space-7);
}

.archive-hero__inner,
.page-hero__inner,
.tiptop-news-page .archive-hero__inner,
.tiptop-works-page .archive-hero__inner {
	gap: var(--tt-space-8);
}

.archive-hero__inner.has-no-hero-image,
.page-hero__inner.has-no-hero-image,
.tiptop-news-page .archive-hero__inner.has-no-hero-image,
.tiptop-works-page .archive-hero__inner.has-no-hero-image {
	max-width: var(--tt-width-default);
}

.archive-hero__eyebrow,
.page-hero__eyebrow,
.tiptop-service-eyebrow,
.tiptop-news-detail__eyebrow,
.tiptop-work-detail__eyebrow,
.tiptop-news-page .archive-hero__eyebrow,
.tiptop-works-page .archive-hero__eyebrow {
	margin: 0 0 var(--tt-space-3);
}
.page-hero__title{
	margin-top: 0;
	font-size: var(--tt-text-hero);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--tt-leading-tight);
	word-break: keep-all;
	overflow-wrap: anywhere;
}


.archive-hero__title,
.tiptop-service-hero h1,
.tiptop-news-detail__title,
.tiptop-work-detail__title,
.tiptop-news-page .archive-hero__title,
.tiptop-works-page .archive-hero__title {
	margin-top: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 一覧ヒーローのリードの行間をモックへ（2026-08-19・Issue #1022）。
 * `--tt-leading-base`（1.95）だったが、承認済みモックの `.page-hero__lead` は
 * **2.0倍**で、news / blog / works / service の4ファイルすべて同じ値だった
 * （13.44px に対し 26.88px）。**このルールが勝者**——`main.css` と `news-page.css` は
 * どちらも 2.05倍 を指定しているが、同じ詳細度でこのファイルが後に積まれるため
 * 効いていない（3ファイルが3つの値を主張している状態。整理は別途）。
 * モバイル（≤820px）の 1.95倍 は既存の意図として残す。 */
.archive-hero__lead,
.tiptop-news-page .archive-hero__lead,
.tiptop-works-page .archive-hero__lead {
	max-width: var(--tt-width-narrow);
	margin: var(--tt-space-5) 0 0;
	font-size: var(--tt-text-note);
	font-weight: 500;
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-news-detail__meta,
.tiptop-work-detail__meta {
	margin-top: var(--tt-space-5);
}

@media (max-width: 640px) {
	.archive-hero,
	.page-hero,
	.tiptop-service-hero,
	.tiptop-news-page .archive-hero,
	.tiptop-works-page .archive-hero {
		padding-top: var(--tt-space-7);
		padding-bottom: var(--tt-space-6);
	}

	.archive-hero__inner,
	.page-hero__inner,
	.tiptop-news-page .archive-hero__inner,
	.tiptop-works-page .archive-hero__inner {
		gap: var(--tt-space-6);
	}
}

/*! bundle-source: assets/css/color-palettes.css */
/*
 * Site color palette: derived tokens + component rules.
 *
 * ⚠ パレットごとの色トークンの正本は color-palettes-button-states.css（ロード順で後勝ち）と
 *   inc/color-palettes.php（レジストリ）。以前ここにあった per-palette の色キー定義は
 *   button-states.css と完全な二重定義（死宣言）だったため削除した（2026-07-20・前後computed同値実証済み）。
 * このファイルが持つのは: contrast-surface 派生トークン / リンクの役割トークン /
 *   body背景・リンク等のコンポーネント規則。選択パレットは inc/color-palettes.php が html/body に付与。
 */

html[data-tiptop-palette] {
	--tiptop-contrast-surface-bg: var(--tiptop-contrast);
	--tiptop-contrast-surface-text: var(--tiptop-base);
	--tiptop-contrast-surface-muted: color-mix(in srgb, var(--tiptop-contrast-surface-text) 72%, transparent);
	--tiptop-contrast-surface-border: color-mix(in srgb, var(--tiptop-contrast-surface-text) var(--tt-tint-soft), transparent);
	--tiptop-contrast-surface-button-bg: var(--tiptop-contrast-surface-text);
	--tiptop-contrast-surface-button-text: var(--tiptop-contrast-surface-bg);
	--tiptop-contrast-surface-button-border: var(--tiptop-contrast-surface-text);
	--tiptop-contrast-surface-button-hover-bg: transparent;
	--tiptop-contrast-surface-button-hover-text: var(--tiptop-contrast-surface-text);
	--tiptop-contrast-surface-button-hover-border: var(--tiptop-contrast-surface-text);
}

html[data-tiptop-palette] {
	--tiptop-link: var(--tiptop-contrast);
	--tiptop-link-hover: var(--tiptop-contrast);
	/* Issue #748: 本文インラインリンクだけをaccentへ戻す。カードタイトルも消費する
	 * --tiptop-link-hoverはcontrastのまま維持し、本文専用トークンへ分離して波及を防ぐ。 */
	--tiptop-body-link: var(--tiptop-accent);
	--tiptop-body-link-hover: var(--tiptop-accent);
	/* 分類バッジの文字色（2026-09-06・Issue #1161・あやちゃん判断）。
	 * 地が accent 10%・文字が accent だと**同系色なので原理的に低コントラスト**で、
	 * accent の明度が上がるほど必ず読めなくなる（既定12パレット中7件が実測でAA未達）。
	 * 文字だけ text に寄せると3面最小 8.45 まで上がり、**地は accent 10% のままなので
	 * アクセントの気配は残る**。本文リンクの色（2026-08-10 に現状維持と判断された
	 * 「リンクの色の個性」）とは副作用の重さが違うため、バッジだけ直す判断になった。
	 * トークンにしているのは子テーマが役割ごとに差し替えられるようにするため。 */
	--tiptop-badge-text: var(--tiptop-text);
	/* 本文リンクの下線は承認済みモックに合わせて文字色そのまま（currentColor）にする
	 * （2026-08-10・オーナー判断）。専用トークンは持たせない。
	 *
	 * 2026-08-09 は「文字色＝パレットの個性／下線＝リンクだと分かる手がかり」と役割を
	 * 分ける狙いで、下線だけ contrast 由来（--tiptop-body-link-border）にしていた。
	 * そのとき「モックの下線は accent の40%濃度」と記録していたが、モックへ実際に
	 * リンクを挿して計測すると text-decoration-color の指定が無く、下線は
	 * currentColor＝accent の100%だった。40%という前提自体が誤っていた。
	 * モックとの差分をなくす方針に従い、専用トークンを廃してモックへ揃える。
	 *
	 * 2026-08-10 追記：この形で12パレットすべての見え方を確認し、現状維持でよいという
	 * オーナー判断が出ている。同じ検討を繰り返さないため経緯を残す。
	 * 白背景に対する本文リンクのコントラスト比は
	 *   plum-noir 9.47 / luxe-night 6.76 / mono-editorial 6.31 / sumi-shu 6.06 /
	 *   violet-noir 5.28 / tech-blue 3.21 / warm-craft 3.08 / cobalt-press 2.48 /
	 *   pop-bright 1.93 / ryokan-cha 1.82 / deep-forest 1.68 / navy-blush 1.64
	 * で、accent が淡いパレットではリンクが地の文に近づく。
	 * 下線だけ contrast 由来へ戻す案も検討したが、暗色パレット（luxe-night /
	 * plum-noir / violet-noir）は contrast が背景と同じ側の色のため下線が完全に沈み
	 * （比 1.00〜1.08）、明色を直す代わりに暗色を壊すことになる。
	 * 既定は mono-editorial（6.31）でモック準拠のまま成立しているため、現状を正とする。
	 *
	 * **2026-09-06 再確認・現状維持（Issue #1165）。** 上の実測は白背景1面のものだったので、
	 * base / surface / surface_alt の**3面**で測り直し、あわせて分類バッジも調べた。
	 * 本文リンクは3面でも同じ7パレット（navy-blush 1.64 / deep-forest 1.68 /
	 * ryokan-cha 1.82 / pop-bright 1.93 / cobalt-press 2.48 / warm-craft 3.08 /
	 * tech-blue 3.21）が未達だが、**2026-08-10 の判断を覆す新情報にはならない**ため
	 * 現状維持とした。検討した代案も実測済みで、`--tiptop-primary` へ寄せる案は
	 * **未達が 7→8 パレットへ悪化する**（primary が淡い装飾色のパレットが多いため）。
	 * 全12パレットで通るのは「文字色＋下線」（3面最小 7.53）か「accent 25%＋文字色 75%」
	 * （同 4.71）だが、どちらもリンクの色の個性が実質消える。
	 *
	 * **可読性が要件の案件は自由配色（custom）を使う。** #1161 で自由配色だけは
	 * `--tiptop-body-link` に AA 保証が入った（`inc/color-palettes.php` の
	 * `tiptop_theme_ensure_readable_color()`）。既定プリセットは意匠優先・AA が要るなら
	 * custom、という使い分けが成立している＝**未達を放置したのではなく逃げ道がある**。
	 *
	 * 分類バッジは同日に文字色を `--tiptop-badge-text`（既定 `--tiptop-text`）へ変えて
	 * 全12パレット通過済み（Issue #1161）。同じ調査を三度繰り返さないためここに残す。 */
	/* ナビ専用の別トークン（2026-08-07新設）。hoverで実際に変化が要るナビ系だけを
	 * 別系統として分離する。既定は従来どおり「通常時=hover時=contrast」で変化なし＝
	 * 他パレット・イマーシブの見た目は不変。 */
	--tiptop-nav-link: var(--tiptop-contrast);
	--tiptop-nav-link-hover: var(--tiptop-contrast);
}

/* 標準モードだけ、通常時をmutedに落としてhoverでcontrastへ上げる（モックに合わせた
 * オーナー確定・2026-08-07）。イマーシブは上の既定値のまま＝変化なしを維持。 */
html[data-tiptop-palette] body.tiptop-standard-system {
	--tiptop-nav-link: var(--tiptop-muted);
	--tiptop-nav-link-hover: var(--tiptop-contrast);
}

/* Hero veil color follows the palette tone: black on dark palettes, white on light ones. Intensity follows the darkness slider (--tiptop-scene-overlay); 0 clears it in every direction. */
html:not([data-tiptop-palette-tone="dark"]) {
	--tt-scene-veil: 255 255 255;
}
html[data-tiptop-palette-tone="dark"] {
	--tt-scene-veil: 2 10 17;
}

body[class*="tiptop-palette-"] {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-faint), transparent) 1px, transparent 1px),
		linear-gradient(180deg, var(--tiptop-surface) 0, var(--tiptop-base) 360px);
	background-size: 72px 72px, auto;
	color: var(--tiptop-text);
}

html[data-tiptop-palette-tone="dark"] body,
body.tiptop-palette-dark {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-faint), transparent) 1px, transparent 1px),
		linear-gradient(180deg, var(--tiptop-surface-alt) 0, var(--tiptop-base) 420px);
	background-size: 72px 72px, auto;
}

/* 標準モードのbodyは無地にする（2026-08-07・オーナー指摘「CTAの下に縦線ボーダーが
 * たくさんあるのはなに？」）。上の2ルールは72px間隔の縦罫線グリッド＋上部グラデーションを
 * body背景に敷いている。従来は各セクションの背景色が全面を覆っていて見えなかったが、
 * CTAをカード化して下に余白を作った結果、フッターとの隙間でbody背景が露出して初めて見えた。
 * モックのbodyは無地（var(--tiptop-base)）なので、標準モードは装飾グリッドも上部
 * グラデーションも持たない素の面にする。イマーシブは既存の見た目を維持。 */
body.tiptop-standard-system[class*="tiptop-palette-"],
html[data-tiptop-palette-tone="dark"] body.tiptop-standard-system,
body.tiptop-standard-system.tiptop-palette-dark {
	background: var(--tiptop-base);
	background-size: auto;
}

/* var(--tt-color-danger)は固定の暗い赤（#b3261e）で暗色パレット背景ではコントラスト不足になるため、
   暗色パレットに限りtoken由来のまま明度だけ上げる（Issue #361検証時に発見） */
html[data-tiptop-palette-tone="dark"] body .wpcf7-not-valid-tip,
body.tiptop-palette-dark .wpcf7-not-valid-tip,
html[data-tiptop-palette-tone="dark"] body .tiptop-contact-form .wpcf7-acceptance a,
body.tiptop-palette-dark .tiptop-contact-form .wpcf7-acceptance a {
	color: color-mix(in srgb, var(--tt-color-danger) 55%, white 45%);
}

html[data-tiptop-palette-tone="dark"] body .wpcf7-not-valid,
body.tiptop-palette-dark .wpcf7-not-valid {
	border-color: color-mix(in srgb, var(--tt-color-danger) 55%, white 45%);
}

html[data-tiptop-palette] .site,
html[data-tiptop-palette] .site-main,
html[data-tiptop-palette] .tiptop-smooth-wrapper,
html[data-tiptop-palette] .tiptop-smooth-content,
html[data-tiptop-palette] .content-area,
html[data-tiptop-palette] .entry-content,
html[data-tiptop-palette] .tiptop-front-content {
	color: var(--tiptop-text);
}

html[data-tiptop-palette] h1:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] h2:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] h3:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] h4:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] h5:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] h6:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .site-branding__title:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .entry-title:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .page-title:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .post-card__title:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .news-item__title:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] a:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-link);
}

/* 下線の引き方も承認済みモックへ揃える（2026-08-10・オーナー判断）。
 * モックは text-decoration: underline に text-underline-offset: 0.2em で、
 * 文字の下端からわずかに離した下線。実サイトは border-bottom で引いていたため、
 * 行ボックスの底に付いて位置が違っていた。
 * 下線色と太さはモックが指定を持たない（currentColor / auto）ので、こちらも
 * 指定しない。モックへリンクを挿して計測し、下線が accent の100%であることを
 * 確認したうえで合わせている。 */
html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text),
html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text),
html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text),
html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text) {
	border-bottom: 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-body-link);
}

/* フッターの反転背景では、広域リンク色より反転面の文字色を優先する。 */
html[data-tiptop-palette] .site-footer a:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .site-footer .site-social-links__link:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .site-footer__logo-link:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-base);
}

/* フッター内の見出しも反転面の文字色にする（2026-09-07・renaiup 案件で発覚）。
 * 上の `html[data-tiptop-palette] h1〜h6`（0-1-2）は反転面を考えていないので、
 * フッターに見出しを置くと `--tiptop-contrast`（暗色）が当たって**13パレット全部で
 * コントラスト比 1.00＝完全に見えなくなる**（実測）。本体のフッターには見出しが
 * 0個なので今日は表面化しないが、子テーマやブロックが置いた瞬間に出る。
 * 子テーマ側のクラス1つ（0-1-0）では勝てないので、本体で直す。
 *
 * ⚠ トークンは `--tiptop-contrast-surface-text` ではなく `--tiptop-base`。
 * 前者だと luxe-night / plum-noir / violet-noir の3つで**背景と同色（1.00）のまま**
 * 残る——あの3パレットはフッターの実背景が明るいのにトークンも明るく解決される。
 * `--tiptop-base` は上の `.site-footer a` と同じ＝フッターの実際の文字色で、
 * 13パレット実測でAA未達 0件（最小 9.12・最大 21）。
 *
 * 淡くしたい案件は子テーマ側で不透明度を落とすことになるが、そのときのAAは案件が
 * 測る（本体は安全側＝全強度で当てる）。詳細は docs/css-effectiveness-check.md。 */
html[data-tiptop-palette] .site-footer :is(h1, h2, h3, h4, h5, h6):not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	color: var(--tiptop-base);
}

html[data-tiptop-palette] body.tiptop-standard-system .site-footer .site-social-links__link:hover,
html[data-tiptop-palette] body.tiptop-standard-system .site-footer .site-social-links__link:focus-visible {
	border-color: var(--tiptop-base);
	color: var(--tiptop-base);
}

/* フッターナビにもナビと同じ「通常時は控えめ→hoverで前面へ」の手応えを持たせる
 * （モックに合わせたオーナー確定・2026-08-07）。ただしフッターは反転面なので
 * contrast系（暗色）ではなく反転面派生トークンを使う——暗背景でcontrastを使うと
 * 文字が沈んで読めなくなる（scripts/check-footer-inversion.js が禁じているのも同じ理由）。 */
/* 二次テキストの控えめさは「面」で持つ（Issue #1185・2026-09-08）。
 *
 * ⚠ 以前ここは `.site-footer__nav a` へ `--tiptop-contrast-surface-muted` を当てていたが、
 * **暗色パレット3種（luxe-night / plum-noir / violet-noir）でコントラスト比 1.73〜1.87 に
 * なっていた**。あの3つは `is_dark` でフッター背景が `--tiptop-contrast`＝明色になるのに、
 * `-surface-*` 系も明色に解決されるため向きが逆になる。`--tiptop-base` 系へ寄せて 0/13 未達。
 *
 * ⚠ 当て先を「リンク」でなく「面」にしているのも意図。要素セレクタで色を当てると、
 * 同じ行に並ぶ `<a>` 以外の文字（`<p>` / `<span>` / `<time>`）が取り残される。
 * 面に置いて継承させれば、子テーマが差し込んだ要素も自動で揃う。 */
html[data-tiptop-palette] body.tiptop-standard-system :is(.site-footer__nav, .site-footer__tagline, .site-footer__copyright) {
	color: color-mix(in srgb, var(--tiptop-base) 72%, transparent);
}

/* リンクは面から継承する（非aと同じ色になる）。hover は base-system.css 側で 100% へ。 */
html[data-tiptop-palette] body.tiptop-standard-system .site-footer__nav a {
	color: inherit;
}

html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):hover:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):focus-visible:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):hover:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):focus-visible:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):hover:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):focus-visible:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):hover:not(:where(.tiptop-own-color, .tiptop-own-color *)),
html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):focus-visible:not(:where(.tiptop-own-color, .tiptop-own-color *)) {
	/* 通常時を border-bottom から text-decoration へ変えたので、hover側の
	 * border-bottom-color も外す（2026-08-10）。下線は currentColor なので文字色に
	 * 追従する。承認済みモックは本文リンクに hover ルールを持たず、
	 * --tiptop-body-link-hover は既定で --tiptop-body-link と同値なので、
	 * 結果としてモックどおり hover で見た目が変わらない。 */
	color: var(--tiptop-body-link-hover);
}

/* ナビだけ --tiptop-nav-link を使う（標準では通常時muted→hoverでcontrast）。
 * カードタイトル/ニュース見出し/サイドバーは通常時から contrast のままにする——
 * モックでもタイトルは黒で、hoverの手応えは画像のズーム側が担っている。 */
html[data-tiptop-palette] .site-nav a {
	color: var(--tiptop-nav-link);
}

html[data-tiptop-palette] .post-card__title a,
html[data-tiptop-palette] .front-content-card .post-card__title a,
html[data-tiptop-palette] .news-item__title a,
html[data-tiptop-palette] .sidebar-list a {
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .site-nav .is-current > a,
html[data-tiptop-palette] .site-nav a:hover,
html[data-tiptop-palette] .site-nav a:focus-visible {
	border-bottom-color: var(--tiptop-nav-link-hover);
	color: var(--tiptop-nav-link-hover);
}

html[data-tiptop-palette] .post-card__title a:hover,
html[data-tiptop-palette] .post-card__title a:focus-visible,
html[data-tiptop-palette] .front-content-card .post-card__title a:hover,
html[data-tiptop-palette] .front-content-card .post-card__title a:focus-visible,
html[data-tiptop-palette] .news-item__title a:hover,
html[data-tiptop-palette] .news-item__title a:focus-visible,
html[data-tiptop-palette] .sidebar-list a:hover,
html[data-tiptop-palette] .sidebar-list a:focus-visible {
	border-bottom-color: var(--tiptop-link-hover);
	color: var(--tiptop-link-hover);
}

html[data-tiptop-palette] .site-header {
	border-bottom-color: color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-soft), transparent);
}

html[data-tiptop-palette] .site-mobile-panel {
	border-color: var(--tiptop-border);
	background: var(--tiptop-base);
	color: var(--tiptop-text);
}

html[data-tiptop-palette] .site-header .site-social-links__link,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link,
html[data-tiptop-palette] .site-menu-toggle {
	border-color: color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-soft), transparent);
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .site-header .site-social-links__link:hover,
html[data-tiptop-palette] .site-header .site-social-links__link:focus-visible,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link:hover,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link:focus-visible {
	border-color: var(--tiptop-contrast);
	background: transparent;
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .site-header__cta,
html[data-tiptop-palette] .site-mobile-panel__cta,
html[data-tiptop-palette] .button,
html[data-tiptop-palette] .wp-block-button__link,
html[data-tiptop-palette] .wpcf7 input[type="submit"] {
	border-color: var(--tiptop-button-bg);
	background: var(--tiptop-button-bg);
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-button-text);
}

html[data-tiptop-palette] .site-header__cta:hover,
html[data-tiptop-palette] .site-header__cta:focus-visible,
html[data-tiptop-palette] .site-mobile-panel__cta:hover,
html[data-tiptop-palette] .site-mobile-panel__cta:focus-visible,
html[data-tiptop-palette] .button:hover,
html[data-tiptop-palette] .button:focus-visible,
html[data-tiptop-palette] .wp-block-button__link:hover,
html[data-tiptop-palette] .wp-block-button__link:focus-visible,
html[data-tiptop-palette] .wpcf7 input[type="submit"]:hover,
html[data-tiptop-palette] .wpcf7 input[type="submit"]:focus-visible {
	border-color: var(--tiptop-button-hover-bg);
	background: var(--tiptop-button-hover-bg);
	color: var(--tiptop-button-hover-text);
}

html[data-tiptop-palette] .site-footer .button,
html[data-tiptop-palette] .site-footer a.button,
html[data-tiptop-palette] .site-footer .wp-block-button__link {
	border-color: var(--tiptop-contrast-surface-button-border);
	background: var(--tiptop-contrast-surface-button-bg);
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-contrast-surface-button-text);
}

html[data-tiptop-palette] .site-footer .button:hover,
html[data-tiptop-palette] .site-footer .button:focus-visible,
html[data-tiptop-palette] .site-footer a.button:hover,
html[data-tiptop-palette] .site-footer a.button:focus-visible,
html[data-tiptop-palette] .site-footer .wp-block-button__link:hover,
html[data-tiptop-palette] .site-footer .wp-block-button__link:focus-visible {
	border-color: var(--tiptop-contrast-surface-button-hover-border);
	background: var(--tiptop-contrast-surface-button-hover-bg);
	color: var(--tiptop-contrast-surface-button-hover-text);
}

html[data-tiptop-palette] .wpcf7,
html[data-tiptop-palette] .post-card,
html[data-tiptop-palette] .front-content-card,
html[data-tiptop-palette] .front-blog-card,
html[data-tiptop-palette] .news-item,
html[data-tiptop-palette] .work-card,
html[data-tiptop-palette] .card,
html[data-tiptop-palette] .sidebar-section,
html[data-tiptop-palette] .sidebar-widget,
html[data-tiptop-palette] .page-header,
html[data-tiptop-palette] .entry-header,
html[data-tiptop-palette] .service-detail,
html[data-tiptop-palette] .service-flow__list li,
html[data-tiptop-palette] .hero__visual-card {
	border-color: var(--tiptop-border);
	background: var(--tiptop-base);
	box-shadow: var(--tt-shadow-card);
	color: var(--tiptop-text);
}

html[data-tiptop-palette] .hero__visual-card--main,
html[data-tiptop-palette] .section--process,
html[data-tiptop-palette] .sidebar-section--accent {
	border-color: var(--tiptop-contrast-surface-border);
	background: var(--tiptop-contrast-surface-bg);
	color: var(--tiptop-contrast-surface-text);
}

html[data-tiptop-palette] .hero__visual-card--main span,
html[data-tiptop-palette] .hero__visual-card--main em,
html[data-tiptop-palette] .section--process p,
html[data-tiptop-palette] .sidebar-section--accent p {
	color: var(--tiptop-contrast-surface-muted);
}

html[data-tiptop-palette] .section--process h2,
html[data-tiptop-palette] .sidebar-section--accent .sidebar-section__title {
	color: var(--tiptop-contrast-surface-text);
}

/* #458: term-list/tag-links/wp-block-post-terms/entry__meta/post-card__meta/
 * news-item__meta/front-content-card__terms分は削除。(0,2,2)で
 * front-accent-usage.css・immersive-system.cssと詳細度同点かつロード順が
 * 常に最先（enqueue優先度で裏取り済み）のため、border-color/background/color
 * いずれも一度も勝てず実質デッドだった。.sidebar-list--compact a
 * （サイドバーウィジェット、別コンポーネント）のみ残す。 */
html[data-tiptop-palette] .sidebar-list--compact a {
	border-color: color-mix(in srgb, var(--tiptop-primary) var(--tt-tint-strong), transparent);
	background: color-mix(in srgb, var(--tiptop-primary) var(--tt-tint-faint), var(--tiptop-base));
	color: var(--tiptop-primary);
}

html[data-tiptop-palette] .sidebar-list--compact a:hover {
	border-color: var(--tiptop-primary);
	background: var(--tiptop-primary);
	color: var(--tiptop-button-text);
}

html[data-tiptop-palette] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not(.search-field):not(.wp-block-search__input):not(:where(.tiptop-contact-form input, .comment-form input, .wpcf7-form-control)),
html[data-tiptop-palette] select,
html[data-tiptop-palette] textarea {
	border-color: var(--tiptop-border);
	background: var(--tiptop-base);
	color: var(--tiptop-text);
}

html[data-tiptop-palette] ::placeholder {
	color: var(--tiptop-muted);
}

/*! bundle-source: assets/css/color-palettes-button-states.css */
/*
 * Normalize button states, home section surfaces, and palette token mapping.
 * Loaded after color-palettes.css so these rules can reconcile kit-derived palette values
 * without increasing conflicts in the base palette file.
 */

html[data-tiptop-palette="mono-editorial"] {
	--tiptop-primary: #111111;
	--tiptop-accent: #3450dc;
	--tiptop-contrast: #111111;
	--tiptop-text: #222222;
	--tiptop-muted: #707070;
	--tiptop-base: #ffffff;
	--tiptop-surface: #f7f7f7;
	--tiptop-surface-alt: #f2f2f2;
	--tiptop-border: #e4e4e4;
	--tiptop-link: #111111;
	--tiptop-button-bg: #111111;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #3450dc;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="warm-craft"] {
	--tiptop-primary: #bf0000;
	--tiptop-accent: #b28a14;
	--tiptop-contrast: #222222;
	--tiptop-text: #222222;
	--tiptop-muted: #71685d;
	--tiptop-base: #fbfaf8;
	--tiptop-surface: #f3eee7;
	--tiptop-surface-alt: #efe8dd;
	--tiptop-border: #ddd1c4;
	--tiptop-link: #bf0000;
	--tiptop-button-bg: #bf0000;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #222222;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="tech-blue"] {
	--tiptop-primary: #005aff;
	--tiptop-accent: #ff3c1e;
	--tiptop-contrast: #1f2933;
	--tiptop-text: #333333;
	--tiptop-muted: #66707a;
	--tiptop-base: #f1f4f6;
	--tiptop-surface: #ffffff;
	--tiptop-surface-alt: #dfe4ea;
	--tiptop-border: #d0d0d0;
	--tiptop-link: #005aff;
	--tiptop-button-bg: #005aff;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #1f2933;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="pop-bright"] {
	--tiptop-primary: #1ba3fb;
	--tiptop-accent: #f6ad17;
	--tiptop-contrast: #000000;
	--tiptop-text: #000000;
	--tiptop-muted: #626262;
	--tiptop-base: #ffffff;
	--tiptop-surface: #fff7dc;
	--tiptop-surface-alt: #eef8cc;
	--tiptop-border: #e3e3e3;
	--tiptop-link: #006fba;
	--tiptop-button-bg: #000000;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #1ba3fb;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="luxe-night"] {
	/* primary は accent（#8c92a4 青みグレー）の同系。2026-08-11 まで #007bff
	 * だったが、黒＋グレー＋白でまとめたこのパレットで唯一の原色として浮いており、
	 * ボタン hover の白文字が 3.98:1 で読みにくかった。色相を保って暗くし、
	 * 白文字 5.10:1 ／ 黒背景 4.12:1 の両立点へ。 */
	--tiptop-primary: #696e7b;
	--tiptop-accent: #8c92a4;
	--tiptop-contrast: #ffffff;
	--tiptop-text: #ffffff;
	--tiptop-muted: #c1c5d0;
	--tiptop-base: #000000;
	--tiptop-surface: #181c20;
	--tiptop-surface-alt: #292d39;
	--tiptop-border: #373c4b;
	--tiptop-link: #ffffff;
	--tiptop-button-bg: #ffffff;
	--tiptop-button-text: #000000;
	--tiptop-button-hover-bg: #696e7b;
	--tiptop-button-hover-text: #ffffff;
	--tiptop-contrast-surface-bg: #181c20;
	--tiptop-contrast-surface-text: #ffffff;
	--tiptop-contrast-surface-muted: #c1c5d0;
	--tiptop-contrast-surface-border: #373c4b;
	--tiptop-contrast-surface-button-bg: #ffffff;
	--tiptop-contrast-surface-button-text: #181c20;
	--tiptop-contrast-surface-button-border: #ffffff;
	--tiptop-contrast-surface-button-hover-bg: transparent;
	--tiptop-contrast-surface-button-hover-text: #ffffff;
	--tiptop-contrast-surface-button-hover-border: #ffffff;
}

html[data-tiptop-palette="plum-noir"] {
	--tiptop-primary: #c14f7d;
	--tiptop-accent: #d9a7c0;
	--tiptop-contrast: #f7eef3;
	--tiptop-text: #f7eef3;
	--tiptop-muted: #c7aab8;
	--tiptop-base: #160910;
	--tiptop-surface: #241019;
	--tiptop-surface-alt: #331723;
	--tiptop-border: #422334;
	--tiptop-link: #f7eef3;
	--tiptop-button-bg: #f7eef3;
	--tiptop-button-text: #160910;
	--tiptop-button-hover-bg: #c14f7d;
	--tiptop-button-hover-text: #f7eef3;
	--tiptop-contrast-surface-bg: #241019;
	--tiptop-contrast-surface-text: #f7eef3;
	--tiptop-contrast-surface-muted: #c7aab8;
	--tiptop-contrast-surface-border: #422334;
	--tiptop-contrast-surface-button-bg: #f7eef3;
	--tiptop-contrast-surface-button-text: #241019;
	--tiptop-contrast-surface-button-border: #f7eef3;
	--tiptop-contrast-surface-button-hover-bg: transparent;
	--tiptop-contrast-surface-button-hover-text: #f7eef3;
	--tiptop-contrast-surface-button-hover-border: #f7eef3;
}

html[data-tiptop-palette="ryokan-cha"] {
	--tiptop-primary: #8a6e4e;
	--tiptop-accent: #c9b89a;
	--tiptop-contrast: #2e3038;
	--tiptop-text: #3e4048;
	--tiptop-muted: #70685a;
	--tiptop-base: #faf7f1;
	--tiptop-surface: #ede9e0;
	--tiptop-surface-alt: #e3dccc;
	--tiptop-border: #dcd3c2;
	--tiptop-link: #8a6e4e;
	--tiptop-button-bg: #8a6e4e;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #3e4048;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="sumi-shu"] {
	--tiptop-primary: #8a3e2e;
	--tiptop-accent: #6e5a42;
	--tiptop-contrast: #000000;
	--tiptop-text: #333333;
	--tiptop-muted: #6e5a42;
	--tiptop-base: #f7f6f3;
	--tiptop-surface: #f1f1f1;
	--tiptop-surface-alt: #e7e5df;
	--tiptop-border: #dbd8d1;
	--tiptop-link: #8a3e2e;
	--tiptop-button-bg: #8a3e2e;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #000000;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="navy-blush"] {
	--tiptop-primary: #ce8aa0;
	--tiptop-accent: #e7b7a6;
	--tiptop-contrast: #1b3345;
	--tiptop-text: #1b3345;
	--tiptop-muted: #5e6a75;
	--tiptop-base: #f3f5f6;
	--tiptop-surface: #e6e9eb;
	--tiptop-surface-alt: #d9dee1;
	--tiptop-border: #d0d6da;
	--tiptop-link: #1b3345;
	--tiptop-button-bg: #1b3345;
	--tiptop-button-text: #f3f5f6;
	--tiptop-button-hover-bg: #b26a82;
	--tiptop-button-hover-text: #111111;
}

html[data-tiptop-palette="cobalt-press"] {
	--tiptop-primary: #f2909e;
	--tiptop-accent: #c88ab8;
	--tiptop-contrast: #4a4049;
	--tiptop-text: #4a4049;
	--tiptop-muted: #73676e;
	--tiptop-base: #fdf3f7;
	--tiptop-surface: #f2e8ed;
	--tiptop-surface-alt: #e8dee2;
	--tiptop-border: #e0d6db;
	--tiptop-link: #4a4049;
	--tiptop-button-bg: #4a4049;
	--tiptop-button-text: #fdf3f7;
	--tiptop-button-hover-bg: #d95f73;
	--tiptop-button-hover-text: #111111;
}

html[data-tiptop-palette="deep-forest"] {
	--tiptop-primary: #76ab9f;
	--tiptop-accent: #e9b7bc;
	--tiptop-contrast: #2e4a44;
	--tiptop-text: #33413e;
	--tiptop-muted: #50736b;
	--tiptop-base: #f6fbf9;
	--tiptop-surface: #eaf0ee;
	--tiptop-surface-alt: #dee6e3;
	--tiptop-border: #d6dfdc;
	--tiptop-link: #2e4a44;
	--tiptop-button-bg: #2e4a44;
	--tiptop-button-text: #f6fbf9;
	--tiptop-button-hover-bg: #c77e8c;
	--tiptop-button-hover-text: #111111;
}

/* allur（キット・ダーク／茶×錆on黒）を violet-noir スロットへ recolor（Phase 2 試作の1パレット）。
 * このスロットが現在サイトに適用中（data-tiptop-palette="violet-noir"）＝実画面で即目視できる。
 * キーは violet_noir のまま値だけ差し替え。--tiptop-link-hover は案B（curated 可読アクセント）＝
 * 暗背景で沈まない明るい錆（生primary #8a3a20 は黒に沈む＝2.71ゆえ直接ホバー不可）。 */
html[data-tiptop-palette="violet-noir"] {
	--tiptop-primary: #8a3a20;
	--tiptop-accent: #c4653f;
	--tiptop-contrast: #ede4d6;
	--tiptop-text: #ede4d6;
	--tiptop-muted: #b7a99a;
	--tiptop-base: #000000;
	--tiptop-surface: #17110d;
	--tiptop-surface-alt: #2a2019;
	--tiptop-border: #3a2e25;
	--tiptop-link: #ede4d6;
	--tiptop-button-bg: #ede4d6;
	--tiptop-button-text: #000000;
	--tiptop-button-hover-bg: #d9773f;
	--tiptop-button-hover-text: #000000;
	--tiptop-contrast-surface-bg: #17110d;
	--tiptop-contrast-surface-text: #ede4d6;
	--tiptop-contrast-surface-muted: #b7a99a;
	--tiptop-contrast-surface-border: #3a2e25;
	--tiptop-contrast-surface-button-bg: #ede4d6;
	--tiptop-contrast-surface-button-text: #17110d;
	--tiptop-contrast-surface-button-border: #ede4d6;
	--tiptop-contrast-surface-button-hover-bg: transparent;
	--tiptop-contrast-surface-button-hover-text: #ede4d6;
	--tiptop-contrast-surface-button-hover-border: #ede4d6;
}

html[data-tiptop-palette] {
	--tiptop-button-border: var(--tiptop-button-bg);
	--tiptop-button-hover-border: var(--tiptop-button-hover-bg);
	--tiptop-button-outline-border: var(--tiptop-button-bg);
	--tiptop-button-outline-text: var(--tiptop-button-bg);
	--tiptop-button-outline-hover-bg: var(--tiptop-button-bg);
	--tiptop-button-outline-hover-text: var(--tiptop-button-text);
	--tiptop-home-section-base: var(--tiptop-base);
	--tiptop-home-section-surface: var(--tiptop-surface);
	--tiptop-home-section-alt: var(--tiptop-surface-alt);
	--tiptop-home-section-contrast-bg: var(--tiptop-contrast-surface-bg);
	--tiptop-home-section-contrast-text: var(--tiptop-contrast-surface-text);
	--tiptop-home-section-contrast-muted: var(--tiptop-contrast-surface-muted);
	--tiptop-home-section-contrast-border: var(--tiptop-contrast-surface-border);
}

/* アウトライン（白抜き）ボタンの文字と枠を3面でAAへ寄せる
 * （Issue #1174・2026-09-08 オーナー承認）。
 *
 * 既定は上の汎用エイリアス `--tiptop-button-outline-text: var(--tiptop-button-bg)`
 * ＝**塗りボタン（CTA）の色がそのまま白抜きボタンの文字色になる**。12プリセットのうち
 * 2つが3面（base / surface / surface_alt）のどこかでAAを割っていた：
 *
 *   ryokan-cha  primary #8a6e4e  最小 3.48（surface_alt） → #6f5e4c で 4.55
 *   tech-blue   primary #005aff  最小 4.20（surface_alt） → #0556eb で 4.64
 *
 * 値は自由配色と同じアルゴリズム（`tiptop_theme_ensure_readable_color`＝text へ
 * 5%刻みで混色し、3面すべてで目標比を満たす最初の値）で算出して焼き込んでいる。
 * **塗り（hover時の地）は primary のまま**なので色の個性は保たれる。
 *
 * ⚠ **この宣言は上の汎用ブロックより後に置く必要がある。** パレット別ブロック
 * （`html[data-tiptop-palette="ryokan-cha"]` 等）は汎用ブロックより**前**にあり、
 * 詳細度はどちらも 0-1-1 で同じなので、パレット別ブロックへ書くと**汎用の
 * エイリアスに後から上書きされて効かない**（2026-09-08 に実際に踏んだ）。
 *
 * ⚠ 以前ここには「既定12プリセットは11/12が通っている」と書いてあったが、
 * それは base と surface の2面しか測っていなかった。**3面で測ると 2/12 が未達。** */
html[data-tiptop-palette="ryokan-cha"] {
	--tiptop-button-outline-text: #6f5e4c;
	--tiptop-button-outline-border: #6f5e4c;
}

html[data-tiptop-palette="tech-blue"] {
	--tiptop-button-outline-text: #0556eb;
	--tiptop-button-outline-border: #0556eb;
}

html[data-tiptop-palette] .site-main--front {
	--tiptop-front-action: var(--tiptop-button-outline-text);
	--tiptop-front-action-hover-bg: var(--tiptop-button-outline-hover-bg);
	--tiptop-front-action-hover-text: var(--tiptop-button-outline-hover-text);
}

html[data-tiptop-palette] .site-header__cta,
html[data-tiptop-palette] .site-mobile-panel__cta,
html[data-tiptop-palette] .button,
html[data-tiptop-palette] .wp-block-button__link,
html[data-tiptop-palette] .wpcf7 input[type="submit"] {
	border-color: var(--tiptop-button-border);
	border-radius: var(--tt-radius-button, var(--tt-radius-none));
	background: var(--tiptop-button-bg);
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-button-text);
	cursor: pointer;
}

html[data-tiptop-palette] .site-header__cta:hover,
html[data-tiptop-palette] .site-header__cta:focus-visible,
html[data-tiptop-palette] .site-mobile-panel__cta:hover,
html[data-tiptop-palette] .site-mobile-panel__cta:focus-visible,
html[data-tiptop-palette] .button:hover,
html[data-tiptop-palette] .button:focus-visible,
html[data-tiptop-palette] .wp-block-button__link:hover,
html[data-tiptop-palette] .wp-block-button__link:focus-visible,
html[data-tiptop-palette] .wpcf7 input[type="submit"]:hover,
html[data-tiptop-palette] .wpcf7 input[type="submit"]:focus-visible {
	border-color: var(--tiptop-button-hover-border);
	background: var(--tiptop-button-hover-bg);
	color: var(--tiptop-button-hover-text);
}

html[data-tiptop-palette] .more a,
html[data-tiptop-palette] .post-card__more,
html[data-tiptop-palette] .excerpt-more,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .more a,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .post-card__more,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .excerpt-more,
html[data-tiptop-palette] .button.button--secondary,
html[data-tiptop-palette] .tiptop-outline-action {
	border-color: var(--tiptop-button-outline-border);
	border-radius: var(--tt-radius-button, var(--tt-radius-none));
	background: transparent;
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-button-outline-text);
}

html[data-tiptop-palette] .more a:hover,
html[data-tiptop-palette] .more a:focus-visible,
html[data-tiptop-palette] .post-card__more:hover,
html[data-tiptop-palette] .post-card__more:focus-visible,
html[data-tiptop-palette] .excerpt-more:hover,
html[data-tiptop-palette] .excerpt-more:focus-visible,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .more a:hover,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .more a:focus-visible,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .post-card__more:hover,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .post-card__more:focus-visible,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .excerpt-more:hover,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .excerpt-more:focus-visible,
html[data-tiptop-palette] .button.button--secondary:hover,
html[data-tiptop-palette] .button.button--secondary:focus-visible,
html[data-tiptop-palette] .tiptop-outline-action:hover,
html[data-tiptop-palette] .tiptop-outline-action:focus-visible {
	border-color: var(--tiptop-button-outline-hover-bg);
	background: var(--tiptop-button-outline-hover-bg);
	color: var(--tiptop-button-outline-hover-text);
}

/* 詳細ページの「一覧へ戻る」だけ、承認済みモックと同じ「ホバーでアクセント色」にする
 * （2026-08-12・Issue #913・オーナー指摘）。モックの .button--ghost は静止時の3宣言しか
 * 持たず、ホバーは .button:hover をそのまま継承して --tiptop-button-hover-bg（アクセント）に
 * なる。実サイトは専用の --tiptop-button-outline-hover-bg を当てており、これは
 * var(--tiptop-button-bg) から導出＝黒。静止時は完全一致でホバーの色だけ違っていた。
 *
 * トークンの値そのものを変えないのは、--tiptop-button-outline-hover-bg を
 * .post-card__more / .excerpt-more / .button--secondary と共有しているため。
 * モックではそれらは .text-action（枠なしの文字リンク）で背景を持たないので、
 * 値を変えると青い背景がついてモックからさらに離れる。
 *
 * .tiptop-front-view-all を除くのは、トップの「View All」が同じクラスを
 * 使っているため。モックではそこは枠なしの文字リンクで、ボタンとして扱うこと自体が
 * 別の差分（#868 の管轄）なので、この修正では巻き込まない。 */
html[data-tiptop-palette] .tiptop-outline-action:not(.tiptop-front-view-all):hover,
html[data-tiptop-palette] .tiptop-outline-action:not(.tiptop-front-view-all):focus-visible {
	border-color: var(--tiptop-button-hover-bg);
	background: var(--tiptop-button-hover-bg);
	color: var(--tiptop-button-hover-text);
}

html[data-tiptop-palette] .site-footer .button,
html[data-tiptop-palette] .site-footer a.button,
html[data-tiptop-palette] .site-footer .wp-block-button__link,
html[data-tiptop-palette] .sec--ink .button,
html[data-tiptop-palette] .sec--ink a.button,
html[data-tiptop-palette] .section--ink .button,
html[data-tiptop-palette] .section--ink a.button,
html[data-tiptop-palette] .tiptop-front-section--contrast .button,
html[data-tiptop-palette] .tiptop-front-section--contrast a.button {
	border-color: var(--tiptop-contrast-surface-button-border);
	border-radius: var(--tt-radius-button, var(--tt-radius-none));
	background: var(--tiptop-contrast-surface-button-bg);
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-contrast-surface-button-text);
}

html[data-tiptop-palette] .site-footer .button:hover,
html[data-tiptop-palette] .site-footer .button:focus-visible,
html[data-tiptop-palette] .site-footer a.button:hover,
html[data-tiptop-palette] .site-footer a.button:focus-visible,
html[data-tiptop-palette] .site-footer .wp-block-button__link:hover,
html[data-tiptop-palette] .site-footer .wp-block-button__link:focus-visible,
html[data-tiptop-palette] .sec--ink .button:hover,
html[data-tiptop-palette] .sec--ink .button:focus-visible,
html[data-tiptop-palette] .section--ink .button:hover,
html[data-tiptop-palette] .section--ink .button:focus-visible,
html[data-tiptop-palette] .tiptop-front-section--contrast .button:hover,
html[data-tiptop-palette] .tiptop-front-section--contrast .button:focus-visible {
	border-color: var(--tiptop-contrast-surface-button-hover-border);
	background: var(--tiptop-contrast-surface-button-hover-bg);
	color: var(--tiptop-contrast-surface-button-hover-text);
}

html[data-tiptop-palette] .site-footer .more a,
html[data-tiptop-palette] .sec--ink .more a,
html[data-tiptop-palette] .sec--ink .post-card__more,
html[data-tiptop-palette] .section--ink .more a,
html[data-tiptop-palette] .section--ink .post-card__more,
html[data-tiptop-palette] .tiptop-front-section--contrast .more a,
html[data-tiptop-palette] .tiptop-front-section--contrast .post-card__more {
	border-color: var(--tiptop-contrast-surface-button-border);
	background: transparent;
	color: var(--tiptop-contrast-surface-button-border);
}

html[data-tiptop-palette] .site-footer .more a:hover,
html[data-tiptop-palette] .site-footer .more a:focus-visible,
html[data-tiptop-palette] .sec--ink .more a:hover,
html[data-tiptop-palette] .sec--ink .more a:focus-visible,
html[data-tiptop-palette] .sec--ink .post-card__more:hover,
html[data-tiptop-palette] .sec--ink .post-card__more:focus-visible,
html[data-tiptop-palette] .section--ink .more a:hover,
html[data-tiptop-palette] .section--ink .more a:focus-visible,
html[data-tiptop-palette] .section--ink .post-card__more:hover,
html[data-tiptop-palette] .section--ink .post-card__more:focus-visible,
html[data-tiptop-palette] .tiptop-front-section--contrast .more a:hover,
html[data-tiptop-palette] .tiptop-front-section--contrast .more a:focus-visible,
html[data-tiptop-palette] .tiptop-front-section--contrast .post-card__more:hover,
html[data-tiptop-palette] .tiptop-front-section--contrast .post-card__more:focus-visible {
	border-color: var(--tiptop-contrast-surface-button-border);
	background: var(--tiptop-contrast-surface-button-bg);
	color: var(--tiptop-contrast-surface-button-text);
}

html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro-services,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .siryou,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro-news {
	background: var(--tiptop-home-section-base);
	color: var(--tiptop-text);
}

html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro2,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .website,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro4 {
	background: var(--tiptop-home-section-surface);
	color: var(--tiptop-text);
}

html[data-tiptop-palette] .hero__visual-card--main,
html[data-tiptop-palette] .section--process,
html[data-tiptop-palette] .sidebar-section--accent,
html[data-tiptop-palette] .sec--ink,
html[data-tiptop-palette] .section--ink,
html[data-tiptop-palette] .tiptop-front-section--contrast {
	border-color: var(--tiptop-home-section-contrast-border);
	background: var(--tiptop-home-section-contrast-bg);
	color: var(--tiptop-home-section-contrast-text);
}

html[data-tiptop-palette] .hero__visual-card--main span,
html[data-tiptop-palette] .hero__visual-card--main em,
html[data-tiptop-palette] .section--process p,
html[data-tiptop-palette] .sidebar-section--accent p,
html[data-tiptop-palette] .sec--ink p,
html[data-tiptop-palette] .section--ink p,
html[data-tiptop-palette] .tiptop-front-section--contrast p {
	color: var(--tiptop-home-section-contrast-muted);
}

html[data-tiptop-palette] .section--process h2,
html[data-tiptop-palette] .sidebar-section--accent .sidebar-section__title,
html[data-tiptop-palette] .sec--ink h2,
html[data-tiptop-palette] .section--ink h2,
html[data-tiptop-palette] .tiptop-front-section--contrast h2 {
	color: var(--tiptop-home-section-contrast-text);
}

html[data-tiptop-palette] .sec--ink a:not(.button),
html[data-tiptop-palette] .section--ink a:not(.button),
html[data-tiptop-palette] .tiptop-front-section--contrast a:not(.button) {
	color: var(--tiptop-home-section-contrast-text);
}

/*
 * Button variants — secondary (outline) is now folded directly into the MoreLink
 * selector list above: same component, same tokens (--tiptop-button-outline-*),
 * per 2026-07-23 decision to unify "詳しく見る"/View All Works with MoreLink's
 * fill-on-hover behavior instead of a separate accent-recolor-only treatment.
 */

html[data-tiptop-palette] .sec--ink .front-content-card,
html[data-tiptop-palette] .sec--ink .front-blog-card,
html[data-tiptop-palette] .sec--ink .news-item,
html[data-tiptop-palette] .section--ink .front-content-card,
html[data-tiptop-palette] .section--ink .front-blog-card,
html[data-tiptop-palette] .section--ink .news-item,
html[data-tiptop-palette] .tiptop-front-section--contrast .front-content-card,
html[data-tiptop-palette] .tiptop-front-section--contrast .front-blog-card,
html[data-tiptop-palette] .tiptop-front-section--contrast .news-item {
	border-color: var(--tiptop-home-section-contrast-border);
	background: color-mix(in srgb, var(--tiptop-home-section-contrast-text) var(--tt-tint-faint), transparent);
	color: var(--tiptop-home-section-contrast-text);
}

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

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



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

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

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

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

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

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

/* 2026-08-07：モックと完全一致させるため、サイズ・行間をモックの実値に合わせた。
 * ⚠ 行間はここだけ文字間隔プリセット（--tt-leading-scale）に追従しない。
 * プリセットxwideでは行間1.83になり、モック（1.6）から大きく外れて見出しが間延びして
 * いたため、モックの見た目を正としてプリセット追従を外した。
 * プリセットを変えて行間も動かしたい場合はここを calc(...) 形に戻す。
 *
 * 字間は 2026-08-18（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行になる（2026-08-17実測）。
 * 箱幅に見合う係数へ落とす。上限は段のままなので 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行の方が明らかに悪い、というオーナー判断（2026-08-17）。 */
.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;
}

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

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

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

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

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

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

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

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

/* `.tiptop-about-summary__inner, .tiptop-works-showcase__inner { width: --tt-width-base-wide }` は
 * 2026-09-10・#1260 で削除した。この2要素はトップページにしか出力されず（front-page.php /
 * template-parts/front-page-guide.php）、幅は front-page-adjustments-rules.css の (0,3,1) が
 * 2026-08-07 から一貫して持っていたため、(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)）だけが残り、
 * 本文がそこへ詰まって幅狭く見える（2026-09-06指摘）。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*` の見た目はここには置かない（2026-08-11・Issue #868 のA）。
 * 経歴は中身も見た目もクライアントごとに違う一点物なので、テーマ本体ではなく
 * 「トップページ編集＞経歴」に貼るHTML自身が `<style>` で持つ（この欄は unfiltered_html を
 * 持つ管理者の入力を素通しする＝旧デフォルトの `.tiptop-career-strip` も同じ形だった）。
 * 貼り付け用の正本は `docs/career-markup-sample.html`。 */
.tiptop-about-list--custom .tiptop-career-strip {
	width: 100%;
	overflow: hidden;
}

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

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

.tiptop-about-list--custom .tiptop-career-card p {
	margin: 0;
	color: var(--tt-base-muted);
}

.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」ボタンに矢印があるので冗長。2026-07-21指摘）。 */

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

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

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

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

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

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

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

}

@supports (height: 100svh) {
}

@supports (height: 100dvh) {
}

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

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

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

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

/* 画像機構由来の背景を剥がす。2026-09-07 に `!important` を外した（Issue #1174 の
 * 前段・`docs/important-audit-2026-09-06.md` 分類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);
}

/* フッターロゴはパレット/トーンに関わらず元の色のまま表示する（2026-09-06オーナー指示）。
 * 以前は `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アイコンに乗る不一致を防ぐ）。
 * 2026-09-09・#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・2026-09-08）。除外を上流でやるのは、詳細度の積み上げを避けるため——
 * 上のルールは :not() が5つ乗って約 0-8-2 になり、勝つには案件側も !important が必要になる。
 * 案件が触れない領域を広げないのが方針（renaiup 案件からの要望）。
 *
 * ⚠ opacity も一緒に戻すこと。実効の明るさは color のアルファ × opacity の掛け算で、
 * 色を 100% にしても opacity 0.62 が残ると **通常（72%）より暗くなる**。
 * 2026-09-08 に案件側で実際にこれが起きた（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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 標準モードのニュースタグをアクセントの薄塗りへ（2026-08-07）。アーカイブ側は
 * immersive-content-pages.css の同名クラスへ同じ配色を当てているが、トップページは
 * 上の (0,3,0) ルールが勝つため、そこを越える詳細度でここに置く。
 * 2026-08-10：形状もここで受ける。上の (0,3,0) ルールはモード非限定でイマーシブの
 * 中立アウトライン（1px枠）も担っているため、境界を動かさず標準だけ上書きする。
 * 承認済みモック（_mockup/tiptop-current.css の .news-row__tag）の実測は
 * padding 2px 12px・枠線なし・min-height 24px で高さ27.03px。実サイトは padding 4px 12px
 * ＋1px枠で33.03pxと6px高かった。**モックのトップにも分類タグはある**（`.news-row__tag`）
 * ので、消すのではなく形を合わせる。
 * ⚠2026-08-19訂正（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まで潰れた（2026-08-16）。(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);
}

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

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

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

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

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

/* コピーライト行をフッターのコンテナへ入れる（2026-08-10・Issue #781の①）。
 * モックは footer > .wrap > .site-footer__bottom の3層で、コピーライト行は
 * **他のフッター要素と同じコンテナ幅**に収まり、上に細い罫線が付く。
 * 実サイトはこの行だけ .site-footer__inner の外に置かれていて（footer.php:39）、
 * 幅の指定が無いため**全幅1905pxまで伸びていた**（1920px幅で実測。モックはトップ1280px）。
 * 幅の式は main.css:54 の .site-footer__inner と同じ形にして、標準の幅トークンを使う
 * ——`width` 直値だと狭い画面で画面外へはみ出すため。
 * 罫線は暗い面に乗る細い明色線なので、パレットに追従する color-mix で持つ
 * （モックの実測は rgba(255,255,255,0.16)。`--tiptop-contrast-surface-border` は
 *  パレットごとの不透明色で、フッターの背景 `--tiptop-contrast` とは別系統なので使わない）。 */
body.tiptop-standard-system .site-footer__copyright {
	/* 幅は「サイト幅」設定に追従する（`--tiptop-site-width`）。トップだけ1280pxへ絞る上書きは
	 * 2026-09-10・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` と同じ段階で切り替える
 * （2026-08-11）。`main.css`／`responsive-fixes.css` はコンテナ幅を3段階（44px→32px→20px）で
 * 持っているが、それらの選択子リストはモード非限定でイマーシブのコピーライト（全幅のまま）も
 * 巻き込むため、**同じ段階を標準スコープで写す**。写さないと 820px以下でフッター本体と
 * 12px、430px以下で24pxずれる（実測：700pxで 668 対 656）。 */
@media (max-width: 820px) {
	body.tiptop-standard-system .site-footer__copyright {
		width: min(calc(100% - var(--tt-gutter-tablet)), var(--tiptop-site-width));
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.tiptop-standard-system .tiptop-404-page h1 {
	font-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) {
}

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

body.tiptop-standard-system .tiptop-page-entry .entry__content h2,
body.tiptop-standard-system .tiptop-news-detail__body h2,
body.tiptop-standard-system .tiptop-work-detail__body h2 {
	margin-top: var(--tt-space-8);
	margin-bottom: var(--tt-space-4);
	padding-bottom: var(--tt-space-3);
	border-bottom: 1px solid var(--tiptop-border);
	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;
}

/* 測度をモックへ（2026-08-09）。実サイトは --tiptop-text-width の720pxで、
 * モック（本文0.92remの42文字＝618px）より1行あたり5文字ほど長かった。
 * 42emを直接書かずトークンを使うのは、em が継承font-sizeで解決されて
 * 要素ごとに値が割れるのを避けるため（--tt-measure-reading の定義参照）。
 *
 * ⚠ ニュース詳細の本文はこの並びから外した（2026-09-14）。あちらは article 1枚が
 * 幅を持つ方針で、news-page.css が本文に `max-width: none` を当てて外している。
 * ところが**同詳細度で後から読まれるここが勝って**いて、その宣言は無視されていた。
 * 記事も本文もどちらも618pxだった間は結果が同じで表に出なかったが、記事を1000pxに
 * したとたん本文だけ618pxで取り残された。固定ページ本文も下で max-width: none に
 * するので、ここに残すのは実質ワークス詳細だけ。 */
 * ⚠ 実績詳細の本文もここから外した（2026-09-14）。あちらは枠を1000pxへ揃えたので、
 * 本文は枠（概要リストがある投稿ではグリッドの列）いっぱいに伸ばす。
 * 幅の持ち主は works-page.css 側。 */
body.tiptop-standard-system .tiptop-page-entry .entry__content {
	max-width: var(--tt-measure-reading);
	margin-inline: auto;
}

/* 固定ページ本文だけ、測度の持ち主を「器」から「中身」へ移す（2026-09-06・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へ（2026-09-14・オーナー判断）。
 * 直前まで読み物の測度（--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;
}

/* 汎用固定ページの表を器いっぱいに伸ばす（2026-09-14・オーナー判断・上の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;
}

/* 汎用固定ページのタイトル行を本文と揃える（2026-09-14・オーナー判断）。
 *
 * ヒーローの中身（パンくず・見出し・リード）は 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の段落への直接指定を打ち消し、本文コンテナの値を継承する。
 * 2026-08-11（Issue #768）：**ブログ詳細を4種目として追加**した。#740 で3種を直したとき
 * ブログ詳細（`.single-post .tiptop-post-detail__body`）だけ対象外にしていた残り。
 * 実測は段落だけ 15.2px / 行間31.16px で、**同じ本文コンテナが 14.72px / 29.44px**という
 * ねじれた状態だった（モックは段落もコンテナと同値）。原因は `blog-page.css:489` の
 * `.single-post .entry__content p` が 0.95rem を直接当てていること。
 * ブログ詳細のコンテナ自身は既にモックと一致しているので、**継承させるだけで揃う**。
 * h2の「上罫線」契約と本文測度（618.24px）は #768 の指示どおり触らない。 */
body.tiptop-standard-system .tiptop-page-entry .entry__content p: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の縦余白（2026-08-09・実測）。標準モードは外側の節が
 * 112pxの縦リズムを持つため、旧 `.entry` 由来の86pxと
 * `.content-layout .entry` 由来の96pxを対象ページだけで打ち消す。
 * ブログ詳細と実績詳細は対象外。 */
body.tiptop-standard-system .tiptop-page-entry,
body.tiptop-standard-system .tiptop-contact-entry,
body.tiptop-standard-system .tiptop-news-detail {
	padding-block: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* トップのNEWS行タイトル：16px/400/行間2.3 → モックの 0.94rem/500/1.8。
 * 一覧ページ側（news-page.css）と同じ調子に揃える。
 * ⚠2026-08-19訂正（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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tiptop-standard-hero--minimal_background .tiptop-standard-hero__figure {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	aspect-ratio: auto;
	border-radius: 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);
}

/* 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・2026-08-16）

   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 になり、
	   横スクロールバーが出る（2026-08-16に実測で踏んだ）。

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

/*! bundle-source: assets/css/lower-page-content.css */


.tiptop-news-page__content,
.tiptop-news-detail-page__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 54px;
}

.tiptop-news-page__content.has-sidebar,
.tiptop-news-detail-page__content.has-sidebar {
	grid-template-columns: var(--tiptop-news-sidebar-columns, minmax(0, 1fr) 320px);
}

/* 2026-07-28：32px角の矢印アイコンが動くと「行全体」が動いて見えるとの指摘で撤去
 * （front-blog-heading > a の88px矢印と同じ理由、あやちゃん指摘）。 */

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

@media (max-width: 960px) {
	.tiptop-news-page__content.has-sidebar,
	.tiptop-news-detail-page__content.has-sidebar {
		grid-template-columns: 1fr;
	}
}

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

@media (hover: none) {
}

@media (prefers-reduced-motion: reduce) {
}

/*! bundle-source: assets/css/front-intro-list-unstyled.css */
/*
 * Terminal front-end normalization layer.
 * Keep shared cross-page contracts here so page-specific legacy CSS cannot
 * reintroduce inconsistent controls, spacing or delayed card visibility.
 */

.tiptop-about-stats {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}

.tiptop-about-stats > div {
	display: block;
	min-height: 0;
	border: 0;
	text-align: inherit;
}

.tiptop-about-stats dt,
.tiptop-about-stats dd {
	margin: revert;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

.tiptop-about-stats dd {
	order: initial;
}

.tiptop-about-list--custom {
	max-width: none;
	margin: 0;
}

.tiptop-about-list--custom .tiptop-career-strip {
	width: auto;
	overflow: visible;
}

.tiptop-about-list--custom .tiptop-career-strip__track {
	display: block !important;
	width: auto;
	max-width: none;
	animation: none;
	will-change: auto;
}

.tiptop-about-list--custom .tiptop-career-card {
	width: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
}

.tiptop-about-list--custom .tiptop-career-card time,
.tiptop-about-list--custom .tiptop-career-card p {
	margin: revert;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

.tiptop-about-list--custom .tiptop-career-card time,
.tiptop-about-list--custom .tiptop-career-card p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	line-height: inherit;
}

/* 2026-08-01: .tiptop-news-item:first-child .tiptop-news-item__link の 1px box border
 * （immersive-content-pages.cssの共通契約、標準デザインにも掛かる）を打ち消す下記2行が
 * イマーシブ限定スコープだったため、標準デザインの一覧ページだけ1件目が
 * 枠で囲まれた箱に見えていた。標準/イマーシブ共通の見た目契約として無条件に効かせる。 */
/* 2026-08-07：上記の復活ルールがトップページについてはイマーシブ限定だったため、
 * 標準トップだけ1件目の下線が消え、行と行のあいだの罫線が抜けて見えていた
 * （base-system.cssの `.tiptop-news-item:first-child { border-bottom: 0 }` が
 * 打ち消されないまま残っていた）。罫線の有無はモードで変わるべきものではないので
 * トップページ側のスコープを外し、標準/イマーシブ共通の契約にする。
 * イマーシブは既にこの線が出ていたため見た目は変わらない。 */
.tiptop-news-page .tiptop-news-item:first-child,
.site-main--front .intro-news .tiptop-news-item:first-child {
	border-bottom: 1px solid var(--tt-base-line);
}

.tiptop-news-item:first-child .tiptop-news-item__link {
	border: 0;
}

@media (max-width: 700px) {

}

/*! bundle-source: assets/css/front-font-presets.css */
:root,
.tiptop-font-preview-card {
	/* Preset未選択時のフォールバック。standardと同じ既存値を正とする。 */
	--tiptop-font-latin: "Jost", "Arial", sans-serif;
	--tiptop-font-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
	--tiptop-font-body: var(--tiptop-font-jp);
	--tiptop-font-heading: var(--tiptop-font-jp);
	--tiptop-font-mixed: "Jost", var(--tiptop-font-jp);
	--tiptop-font-ui: var(--tiptop-font-mixed);
	--tiptop-font-label: var(--tiptop-font-latin);
	--tiptop-font-accent: var(--tiptop-font-latin);
	--tiptop-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	/* 見出しの太さは2系統ある（2026-08-11に分離）。
	 * --tiptop-font-weight-heading … カード見出し・本文の見出し・eyebrow。和文が主。
	 * --tiptop-font-weight-display  … ページ見出しと節見出し。欧文の大きい字。
	 * standard だけこの2つが違う（display=400 / heading=700）。他の5プリセットは同値なので、
	 * 各ブロックに同じ値を素で2行書く。var() で片方を参照させると、プリセット値を持つ body と
	 * 定義場所がズレて解決に失敗する（このファイル冒頭の alias 注記と同じ罠）。 */
	--tiptop-font-weight-heading: 700;
	--tiptop-font-weight-display: 700;
	--tiptop-letter-spacing-heading: var(--tt-letter-heading, 0.08em);
	--tiptop-font-feature-settings: normal;
}

body.tiptop-font-preset-standard,
.tiptop-font-preview-card--standard {
	--tiptop-font-latin: "Jost", "Arial", sans-serif;
	--tiptop-font-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
	--tiptop-font-body: var(--tiptop-font-jp);
	--tiptop-font-heading: var(--tiptop-font-jp);
	--tiptop-font-mixed: "Jost", var(--tiptop-font-jp);
	--tiptop-font-ui: var(--tiptop-font-mixed);
	--tiptop-font-label: var(--tiptop-font-latin);
	--tiptop-font-accent: var(--tiptop-font-latin);
	/* ページ見出し・節見出しだけ細身（2026-08-11にオーナー判断で 700 → 400）。
	 * 標準デザインは「動きゼロ・装飾ゼロの素の土台」で、Jost の抜け感を活かす。
	 * 承認済みモックが 400 で組まれており、そちらを正とした。
	 * カード見出し・本文の見出しは 700 のまま——同じ 400 を当てると和文が細くて沈む
	 * （docs/typography-scale.md §4 の表）。他のプリセットは 2つとも同値。 */
	--tiptop-font-weight-heading: 700;
	--tiptop-font-weight-display: 400;
	--tiptop-letter-spacing-heading: 0.04em;
}

body.tiptop-font-preset-elegant,
.tiptop-font-preview-card--elegant {
	--tiptop-font-latin: "Cormorant Garamond", Georgia, serif;
	--tiptop-font-jp: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--tiptop-font-body: var(--tiptop-font-jp);
	--tiptop-font-heading: var(--tiptop-font-jp);
	--tiptop-font-mixed: "Cormorant Garamond", var(--tiptop-font-jp);
	--tiptop-font-ui: var(--tiptop-font-mixed);
	--tiptop-font-label: var(--tiptop-font-latin);
	--tiptop-font-accent: var(--tiptop-font-latin);
	--tiptop-font-weight-heading: 500;
	--tiptop-font-weight-display: 500;
	--tiptop-letter-spacing-heading: 0.06em;
	--tiptop-font-feature-settings: "palt" 1;
}

body.tiptop-font-preset-classic,
.tiptop-font-preview-card--classic {
	--tiptop-font-latin: "Playfair Display", Georgia, serif;
	--tiptop-font-jp: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--tiptop-font-body: var(--tiptop-font-jp);
	--tiptop-font-heading: var(--tiptop-font-jp);
	--tiptop-font-mixed: "Playfair Display", var(--tiptop-font-jp);
	--tiptop-font-ui: var(--tiptop-font-mixed);
	--tiptop-font-label: var(--tiptop-font-latin);
	--tiptop-font-accent: var(--tiptop-font-latin);
	--tiptop-font-weight-heading: 700;
	--tiptop-font-weight-display: 700;
	--tiptop-letter-spacing-heading: 0.05em;
	--tiptop-font-feature-settings: "palt" 1;
}

body.tiptop-font-preset-pop,
.tiptop-font-preview-card--pop {
	--tiptop-font-latin: "Poppins", "Arial", sans-serif;
	--tiptop-font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
	--tiptop-font-body: var(--tiptop-font-jp);
	--tiptop-font-heading: var(--tiptop-font-mixed);
	--tiptop-font-mixed: "Poppins", var(--tiptop-font-jp);
	--tiptop-font-ui: var(--tiptop-font-mixed);
	--tiptop-font-label: var(--tiptop-font-latin);
	--tiptop-font-accent: var(--tiptop-font-latin);
	--tiptop-font-weight-heading: 700;
	--tiptop-font-weight-display: 700;
	--tiptop-letter-spacing-heading: 0.02em;
}

body.tiptop-font-preset-soft,
.tiptop-font-preview-card--soft {
	--tiptop-font-latin: "Fredoka", "Arial Rounded MT Bold", "Arial", sans-serif;
	--tiptop-font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--tiptop-font-body: var(--tiptop-font-jp);
	--tiptop-font-heading: var(--tiptop-font-jp);
	--tiptop-font-mixed: "Fredoka", var(--tiptop-font-jp);
	--tiptop-font-ui: var(--tiptop-font-mixed);
	--tiptop-font-label: var(--tiptop-font-latin);
	--tiptop-font-accent: var(--tiptop-font-latin);
	--tiptop-font-weight-heading: 700;
	--tiptop-font-weight-display: 700;
	--tiptop-letter-spacing-heading: 0.04em;
}

body.tiptop-font-preset-japanese,
.tiptop-font-preview-card--japanese {
	--tiptop-font-latin: "Marcellus", Georgia, serif;
	--tiptop-font-jp: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--tiptop-font-body: var(--tiptop-font-jp);
	--tiptop-font-heading: var(--tiptop-font-jp);
	--tiptop-font-mixed: "Marcellus", var(--tiptop-font-jp);
	--tiptop-font-ui: var(--tiptop-font-mixed);
	--tiptop-font-label: var(--tiptop-font-latin);
	--tiptop-font-accent: var(--tiptop-font-latin);
	--tiptop-font-weight-heading: 500;
	--tiptop-font-weight-display: 500;
	--tiptop-letter-spacing-heading: 0.08em;
	--tiptop-font-feature-settings: "palt" 1;
}

/* Aliases must resolve on the same element that owns the active preset values. */
body,
.tiptop-font-preview-card {
	--tt-font-body: var(--tiptop-font-body);
	--tt-font-heading: var(--tiptop-font-heading);
	--tt-font-display: var(--tiptop-font-heading);
}

body {
	font-family: var(--tiptop-font-body);
}

.site-main--front,
.site-main--front .tiptop-front-content,
.site-main--front .tiptop-front-section,
.site-main--front .top .main-txt,
.site-main--front .prof-txt,
.site-main--front .front-content-card,
.site-main--front .front-content-hero,
.site-main--front .card-grid,
.site-main--front .wp-block-group {
	font-family: var(--tiptop-font-body);
}

/* 見出しの書体・字間は全部まとめて当てる。太さだけ2系統に分かれるので、
 * 下の2ブロックで書き分ける（standard 以外は同値なので見た目は変わらない）。 */
h1,
h2,
h3,
h4,
h5,
h6,
.hero__title,
.section__title,
.entry-title,
.archive-title,
.page-title,
.site-main--front .top .main-txt h1,
.site-main--front .tiptop-front-content h2,
.site-main--front .tiptop-front-content h3,
.site-main--front .post-card__title {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings, normal);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: var(--tiptop-letter-spacing-heading);
}

/* ページ見出し・節見出し＝欧文の大きい字だけ display の太さ。
 * front-typography-roles.css の同じ役割のブロックにも同じトークンを当ててあるので、
 * 2ファイルのロード順がどちらでも結果は同じになる。 */
.hero__title,
.section__title,
.archive-title,
.page-title,
.site-main--front .top .main-txt h1,
.site-main--front .tiptop-front-content h2 {
	font-weight: var(--tiptop-font-weight-display);
}

.site-branding__title,
.site-nav a,
.site-footer a,
.site-mobile-nav__menu a,
.site-header__cta,
.site-mobile-panel__cta,
.button,
a.button,
.wp-element-button,
.wp-block-button__link,
.more a,
.term-list a,
.tag-links a,
.wp-block-post-terms a,
.site-main--front .eachTextAnime {
	font-family: var(--tiptop-font-ui);
}

.hero__eyebrow,
.section__eyebrow,
.site-main--front .hero__eyebrow,
.site-main--front .section__eyebrow {
	font-family: var(--tiptop-font-label);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.site-header a.site-header__cta,
.site-mobile-panel a.site-mobile-panel__cta,
.site-main--front .more a,
.wp-block-buttons .wp-block-button__link,
.wp-block-button .wp-block-button__link {
	font-family: var(--tiptop-font-ui);
}

.wp-block-code,
code,
kbd,
pre {
	font-family: var(--tiptop-font-mono);
}

.post-card__meta,
.front-content-card__meta,
.front-blog-card__meta,
.news-item__date,
.news-item__meta,
.entry__meta,
.archive-description {
	font-family: var(--tiptop-font-body);
}

/* Issue #782: モックの機械比較で実測した役割ごとに書体を割り当てる。
 * 文字種から一律に推測しない。「実績一覧へ戻る」は和文でも欧文ロールが正なので、
 * 各コンポーネントを個別に指定する。フッターメニューはIssue #772の担当範囲。 */
.site-nav a {
	font-family: var(--tiptop-font-jp);
}

.tiptop-breadcrumb,
.site-main--front .tiptop-about-list--custom .tiptop-career-card time,
.tiptop-contact-page .tiptop-contact-note :is(strong, dt),
.tiptop-work-detail-back .tiptop-outline-action,
.tiptop-blog-detail-page .entry__meta time {
	font-family: var(--tiptop-font-latin);
}

.tiptop-blog-detail-page .entry__meta .term-list a {
	font-family: var(--tiptop-font-jp);
}

/* 分類バッジは和文書体（2026-08-10・#853項目2）。上の .term-list a はUI書体（欧文）を
 * 当てるが、承認済みモックの .badge は書体指定を持たず本文の和文書体を継承する。
 * 一覧カードのバッジは<span>で .term-list a に当たらず既に和文だったため、<a>で出る
 * 詳細ページ2つだけが Jost になっていた（実測：一覧=Zen Kaku Gothic New／詳細=Jost）。
 * ブログ詳細には上の例外が既にあるので、同じ扱いを新着詳細・実績詳細へ広げる。
 * **標準スコープ限定**にするのは、上の .term-list a（0,1,1）がイマーシブにも効いており、
 * モード非限定で上書きするとイマーシブの書体まで変わってしまうため。 */
body.tiptop-standard-system .tiptop-news-detail__terms a,
body.tiptop-standard-system .tiptop-work-detail__terms a {
	font-family: var(--tiptop-font-jp);
}

.button *,
a.button *,
.site-header__cta *,
.site-mobile-panel__cta *,
.wp-element-button *,
.wp-block-button__link * {
	font-family: inherit;
}

/*
 * 見出しだけ別の書体にする（2026-09-06・Issue #1170）。
 *
 * 「見出し明朝＋本文ゴシック」は和文サイトの定番だが、プリセットは jp 書体を1つしか
 * 持たないので組めなかった。組み合わせをプリセットに足す方式は**掛け算で増える**
 * （Shippori+Zen Kaku、Zen Old+Noto Sans、… と案件ごとに1つずつ増える）ので、
 * **既存6プリセットの和文スタックを見出しへ差せる**形にした。
 *
 * ここは各プリセットの `--tiptop-font-jp` と**同じ値の写し**。プリセット側の宣言は
 * 1行も変えていないので、見出しを別に選ばない限り出力は完全に不変。
 *
 * ⚠ 値を変えるときは下の `body.tiptop-font-preset-*` 側と**両方**直すこと。
 *   写しにしている理由：プリセット側の値は `body` スコープにあり、`:root` から
 *   `var()` で参照すると解決できない（このファイルの「alias 注記」と同じ罠）。
 *   逆向き（:root → body）は継承で解決するので、下の見出し用ルールは var() で書ける。
 */
:root,
.tiptop-font-preview-card {
	--tiptop-font-jp-standard: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
	--tiptop-font-jp-elegant: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--tiptop-font-jp-classic: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--tiptop-font-jp-pop: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
	--tiptop-font-jp-soft: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--tiptop-font-jp-japanese: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* 見出しだけ差し替える。`body.tiptop-font-preset-*` と同じ (0,2,0) だが、
 * このファイル内で後ろに置いてあるのでソース順で勝つ。
 * 本文（--tiptop-font-body）と欧文（--tiptop-font-latin）は触らない＝
 * eyebrow やラベルの字はプリセットの identity を保つ。 */
body.tiptop-font-heading-standard { --tiptop-font-heading: var(--tiptop-font-jp-standard); }
body.tiptop-font-heading-elegant { --tiptop-font-heading: var(--tiptop-font-jp-elegant); }
body.tiptop-font-heading-classic { --tiptop-font-heading: var(--tiptop-font-jp-classic); }
body.tiptop-font-heading-pop { --tiptop-font-heading: var(--tiptop-font-jp-pop); }
body.tiptop-font-heading-soft { --tiptop-font-heading: var(--tiptop-font-jp-soft); }
body.tiptop-font-heading-japanese { --tiptop-font-heading: var(--tiptop-font-jp-japanese); }

/*! bundle-source: assets/css/typography-spacing.css */
/*
 * Typography spacing presets (文字の余白).
 *
 * body.tiptop-spacing-{normal|wide|xwide} が余白トークンを3段で再定義する。
 * 連動は2経路（どちらも normal で既定と一致＝見た目を変えない）：
 *  (a) 意味トークンを使う箇所 … var(--tt-leading-base/-loose/-tight) / var(--tt-letter-heading/-label/-body)
 *  (b) 固有値を持つ箇所 … 既定値を保ったまま calc で連動させる：
 *        letter-spacing: calc(<固有値> + var(--tt-letter-add));   （add: normal 0）
 *        line-height:    calc(<固有値> * var(--tt-leading-scale)); （scale: normal 1）
 * (b)は元の値を残すので normal は完全に元のまま、wide/xwide で全体が比例して広がる。
 */

:root {
	--tt-letter-body: 0;
	--tt-letter-add: 0em;
	--tt-leading-scale: 1;
}

body.tiptop-spacing-normal {
	--tt-leading-tight: 1.35;
	--tt-leading-base: 1.95;
	--tt-leading-loose: 2.05;
	--tt-letter-body: 0;
	--tt-letter-heading: 0.08em;
	--tt-letter-label: 0.12em;
	--tt-letter-add: 0em;
	--tt-leading-scale: 1;
}

body.tiptop-spacing-wide {
	--tt-leading-tight: 1.45;
	--tt-leading-base: 2.1;
	--tt-leading-loose: 2.2;
	--tt-letter-body: 0.06em;
	--tt-letter-heading: 0.14em;
	--tt-letter-label: 0.16em;
	--tt-letter-add: 0.04em;
	--tt-leading-scale: 1.08;
}

body.tiptop-spacing-xwide {
	--tt-leading-tight: 1.55;
	--tt-leading-base: 2.3;
	--tt-leading-loose: 2.4;
	--tt-letter-body: 0.14em;
	--tt-letter-heading: 0.24em;
	--tt-letter-label: 0.22em;
	--tt-letter-add: 0.08em;
	--tt-leading-scale: 1.18;
}

body {
	line-height: var(--tt-leading-base);
	letter-spacing: var(--tt-letter-body);
}

body :where(p, li, dd, blockquote, figcaption, .entry-content, .archive-description, .site-main--front .tiptop-front-content) {
	letter-spacing: var(--tt-letter-body);
}

/*! bundle-source: assets/css/front-utility-control-states.css */
/*
 * Shared palette-aware states for front-end actions and compact utility controls.
 * Text links and navigation links intentionally remain outside this contract.
 * back-to-top keeps its own dedicated design (tab/pill shape from back-to-top-settings.css)
 * and is excluded from this shared contract so its width/height/border-radius survive.
 */

/* Utility control contract: icon-only controls share one transparent surface. */
:root {
	--tiptop-utility-control-size: 52px;
	--tiptop-utility-control-radius: 8px;
	--tiptop-utility-control-padding: 0;
	--tiptop-utility-control-border: color-mix(in srgb, currentColor var(--tt-tint-strong), transparent);
	--tiptop-utility-control-hover-bg: color-mix(in srgb, currentColor var(--tt-tint-soft), transparent);
}

.tiptop-front-toolbar-toggle {
	display: inline-grid;
	place-items: center;
	width: var(--tiptop-utility-control-size);
	height: var(--tiptop-utility-control-size);
	min-width: var(--tiptop-utility-control-size);
	min-height: var(--tiptop-utility-control-size);
	padding: var(--tiptop-utility-control-padding);
	border: 1px solid var(--tiptop-utility-control-border);
	border-radius: var(--tiptop-utility-control-radius);
	background: transparent;
	box-shadow: none;
	color: currentColor;
	transform: none;
}

.tiptop-front-toolbar-toggle:hover,
.tiptop-front-toolbar-toggle[aria-expanded="true"],
.tiptop-front-toolbar-toggle:focus-visible {
	border-color: currentColor;
	background: var(--tiptop-utility-control-hover-bg);
	box-shadow: none;
	color: currentColor;
	transform: none;
}

.tiptop-front-toolbar-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}/* #454: search submit is a borderless square icon everywhere (blog toolbar's
 * original shape) — no more bordered/radius variant for 404/search-results/sidebar. */
html[data-tiptop-palette] body.tiptop-standard-system .site-header .search-form .search-submit,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-404-page .search-form .search-submit,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-search-hero__inner .search-form .search-submit,
html[data-tiptop-palette] body.tiptop-standard-system .site-header .wp-block-search .wp-block-search__button,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-404-page .wp-block-search .wp-block-search__button,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search .wp-block-search__button {
	display: inline-grid;
	place-items: center;
	width: var(--tiptop-utility-control-size);
	height: var(--tiptop-utility-control-size);
	min-width: var(--tiptop-utility-control-size);
	min-height: var(--tiptop-utility-control-size);
	padding: var(--tiptop-utility-control-padding);
	border: 0;
	border-radius: var(--tt-radius-none);
	background: transparent;
	box-shadow: var(--tt-shadow-none);
	color: currentColor;
	transform: none;
}

html[data-tiptop-palette] body.tiptop-standard-system .site-header .search-form .search-submit:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-404-page .search-form .search-submit:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-search-hero__inner .search-form .search-submit:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .site-header .wp-block-search .wp-block-search__button:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-404-page .wp-block-search .wp-block-search__button:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search .wp-block-search__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Admin toolbar toggle: no border (standalone control), slimmer width, sits flush at the header's top-right corner. */
.tiptop-front-toolbar-toggle {
	width: 26px;
	height: 42px;
	min-width: 26px;
	min-height: 42px;
	border: 0;
}

/* back-to-top の色（形は back-to-top-settings.css）。
 * 承認済みモック `_mockup/standard/blocks.html` の .pagetop--* が正本で、
 * 塗り3種(compact/label/side)＝.pagetop--circle/--label/--tab、
 * 枠のみ(minimal)＝.pagetop--outline、面も枠も無い2種(arrow/vertical)＝
 * .pagetop--chevron/--vertical に対応する。
 *
 * モックが使う `--tiptop-button-bg` / `--tiptop-border` / `--tiptop-muted` /
 * `--tiptop-contrast` はどれもパレット12色ぶん定義済みなので、そのまま使えば
 * パレット追従も保てる。汎用ゴーストボタンの `--tiptop-button-outline-*` は
 * hoverで面が塗り潰れる契約でモックと別物なので、ここでは使わない。 */
html[data-tiptop-palette] .back-to-top {
	border-color: var(--tiptop-button-border);
	background: var(--tiptop-button-bg);
	box-shadow: var(--tt-shadow-floating);
	color: var(--tiptop-button-text);
}

html[data-tiptop-palette] .back-to-top:hover,
html[data-tiptop-palette] .back-to-top:focus-visible {
	border-color: var(--tiptop-button-hover-border);
	background: var(--tiptop-button-hover-bg);
	box-shadow: var(--tt-shadow-floating);
	color: var(--tiptop-button-hover-text);
}

/* minimal は待機状態から薄い枠が見える（旧実装は hover まで枠が出なかった）。 */
html[data-tiptop-palette] .back-to-top--minimal {
	border-color: var(--tiptop-border);
	background: transparent;
	color: var(--tiptop-muted);
}

html[data-tiptop-palette] .back-to-top--arrow,
html[data-tiptop-palette] .back-to-top--vertical {
	border-color: transparent;
	background: transparent;
	color: var(--tiptop-muted);
}

/* 枠なし3種は hover でも面を持たない。上の `.back-to-top:hover` と同詳細度
 * (0,2,1) なので、打ち消したい background / border-color を名指しで宣言し、
 * かつ必ずこの位置（後ろ）に置くこと。 */
html[data-tiptop-palette] .back-to-top--minimal:hover,
html[data-tiptop-palette] .back-to-top--minimal:focus-visible {
	border-color: var(--tiptop-contrast);
	background: transparent;
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .back-to-top--arrow:hover,
html[data-tiptop-palette] .back-to-top--arrow:focus-visible,
html[data-tiptop-palette] .back-to-top--vertical:hover,
html[data-tiptop-palette] .back-to-top--vertical:focus-visible {
	border-color: transparent;
	background: transparent;
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .posts-navigation a,
html[data-tiptop-palette] .post-navigation a {
	border-color: var(--tiptop-button-outline-border);
	background: transparent;
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-button-outline-text);
}

/* SNSアイコンはフッター(.site-footer-social)のインク扱いを正とし、
   ヘッダー/モバイルパネルもパレット下で同じトークンに揃える。 */
html[data-tiptop-palette] .site-header .site-social-links__link,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link {
	border-color: color-mix(in srgb, var(--tt-base-ink) var(--tt-tint-strong), transparent);
	background: transparent;
	box-shadow: var(--tt-shadow-none);
	color: var(--tt-base-ink);
}

html[data-tiptop-palette] .posts-navigation a:hover,
html[data-tiptop-palette] .posts-navigation a:focus-visible,
html[data-tiptop-palette] .post-navigation a:hover,
html[data-tiptop-palette] .post-navigation a:focus-visible {
	border-color: var(--tiptop-button-outline-hover-bg);
	background: var(--tiptop-button-outline-hover-bg);
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-button-outline-hover-text);
}

html[data-tiptop-palette] .site-header .site-social-links__link:hover,
html[data-tiptop-palette] .site-header .site-social-links__link:focus-visible,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link:hover,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link:focus-visible {
	border-color: var(--tiptop-contrast);
	background: transparent;
	box-shadow: var(--tt-shadow-none);
	color: var(--tiptop-contrast);
}

body.tiptop-standard-system .site-header .search-form,
body.tiptop-standard-system .tiptop-404-page .search-form,
body.tiptop-standard-system .tiptop-search-hero__inner .search-form,
body.tiptop-standard-system .site-header .wp-block-search__inside-wrapper,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__inside-wrapper,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__inside-wrapper {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 52px !important;
	align-items: stretch !important;
	overflow: visible !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tt-base-line) !important;
	border-radius: var(--tt-radius-none) !important;
	background: transparent !important;
	box-shadow: var(--tt-shadow-none) !important;
}/* Shared transparent search field inside the underline form contract. */
body.tiptop-standard-system .site-header .search-field,
body.tiptop-standard-system .tiptop-404-page .search-field,
body.tiptop-standard-system .tiptop-search-hero__inner .search-field,
body.tiptop-standard-system .site-header .wp-block-search__input,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__input,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__input {
	height: 52px !important;
	min-height: 52px !important;
	border: 0 !important;
	border-radius: var(--tt-radius-none) !important;
	background: transparent !important;
	box-shadow: var(--tt-shadow-none) !important;
}

/* 検索フォームのフォーカス可視化（2026-08-09・#732 のフォーム調査）。
 * 実測では、この検索欄の下線を描いているのは input ではなく親 <form> の
 * border-bottom（input 側は上の共有ルールで border:0）。そのため input に
 * border-bottom-color を当てても空振りする。サイドバー検索は
 * blog-page.css の .tiptop-blog-widget--search 配下にある検索フォームの
 * :focus-within ルールが下線を濃くしており、
 * その型をヘッダー・404・検索結果へ横展開する。
 * **!important を付けているのは、上の共有ルールが border-bottom を !important で
 * 敷いており、詳細度を上げても勝てないため**（このファイルは既に106箇所で
 * !important を使う契約になっている）。 */
body.tiptop-standard-system .site-header .search-form:focus-within,
body.tiptop-standard-system .tiptop-404-page .search-form:focus-within,
body.tiptop-standard-system .tiptop-search-hero__inner .search-form:focus-within,
body.tiptop-standard-system .site-header .wp-block-search__inside-wrapper:focus-within,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__inside-wrapper:focus-within,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__inside-wrapper:focus-within {
	border-bottom-color: var(--tiptop-contrast) !important;
}

/* 上で下線がフォーカスを示すので、input 側の UA 既定リング（入力ボックス全周の
 * 黒い矩形・実測548px幅）は消す。design-system.css:1036 のサイドバー検索と同じ扱い。
 * **下線での可視化が効いていることが前提**なので、上のルールと必ずセットで維持する。 */
body.tiptop-standard-system .site-header .search-field:focus-visible,
body.tiptop-standard-system .tiptop-404-page .search-field:focus-visible,
body.tiptop-standard-system .tiptop-search-hero__inner .search-field:focus-visible,
body.tiptop-standard-system .site-header .wp-block-search__input:focus-visible,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__input:focus-visible,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__input:focus-visible {
	outline: none;
}

/* 入力文字がサイト書体を継承していなかった（実測 Arial 13.333px #000 ＝UA既定）。
 * モックは 0.88rem・本文色・サイト書体。イマーシブは既存のままにしたいので
 * 標準スコープだけに当てる。 */
body.tiptop-standard-system .site-header .search-field,
body.tiptop-standard-system .tiptop-404-page .search-field,
body.tiptop-standard-system .tiptop-search-hero__inner .search-field,
body.tiptop-standard-system .site-header .wp-block-search__input,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__input,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__input {
	color: var(--tiptop-text);
	font-family: inherit;
	font-size: var(--tt-text-body);
}

body.tiptop-standard-system .site-header .search-submit,
body.tiptop-standard-system .tiptop-404-page .search-submit,
body.tiptop-standard-system .tiptop-search-hero__inner .search-submit,
body.tiptop-standard-system .site-header .wp-block-search__button,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__button,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__button {
	color: var(--tt-base-ink);
}

body.tiptop-standard-system .site-header .search-submit svg,
body.tiptop-standard-system .tiptop-404-page .search-submit svg,
body.tiptop-standard-system .tiptop-search-hero__inner .search-submit svg,
body.tiptop-standard-system .site-header .wp-block-search__button svg,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__button svg,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__button svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: auto !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

/* #644の下線型はイマーシブだけに残す。ページ別スコープは
 * ink/muted/margin-top の接続だけを担当し、構造と状態はここで共有する。 */
.tiptop-blog-page,
.category,
.tag,
.date {
	--tiptop-pagination-ink: var(--tiptop-blog-ink);
	--tiptop-pagination-muted: var(--tiptop-blog-muted);
}

.tiptop-works-page {
	--tiptop-pagination-ink: var(--tiptop-works-ink);
	--tiptop-pagination-muted: var(--tiptop-works-muted);
}

.tiptop-news-page,
.tax-news_category {
	--tiptop-pagination-ink: var(--tiptop-news-ink);
	--tiptop-pagination-muted: var(--tiptop-news-muted);
}

/* 投稿内の改ページ（<!--nextpage-->）も一覧と同じページ送り部品を使う。
 * 上の種別ごとのトークンは祖先（.tiptop-blog-page 等）に付くので、ページ種別で
 * 色が変わってしまう。nav自身に置いて4テンプレートを同じ見た目にする。 */
.pagination--post {
	--tiptop-pagination-ink: var(--tiptop-contrast);
	--tiptop-pagination-muted: var(--tiptop-muted);
	--tiptop-pagination-margin-top: var(--tt-space-7);
}

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

/* ============================================================
   標準モードのページ送り（2026-08-09・承認済みモックへ／あやちゃん指示）
   このファイルの上にある一覧ページのページ送り契約は、`.pagination .page-numbers`
   から枠線・角丸・パディング・最小サイズを **すべて !important で剥がして**
   「素のテキスト＋現在地は下線」にしていた（詳細度ではなく !important が原因で、
   後ろから上書きしようとしても勝てない）。
   モックは「枠線1pxのピル・40px・グレー文字、現在地だけ黒塗り」なので、
   上の契約群のスコープをイマーシブ側だけに絞り、標準モードはここで組み直す。
   剥がしルールが標準に当たらなくなるため !important は不要。
   色・罫線・角丸はモックと同じ役割の既存トークンへ直接接続する。
   ============================================================ */

body.tiptop-standard-system .navigation.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: var(--tiptop-pagination-margin-top, var(--tt-space-8)) 0 0;
}

body.tiptop-standard-system .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tt-space-2);
	width: 100%;
	margin: 0;
}

body.tiptop-standard-system .pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.6em;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-pill);
	background: transparent;
	color: var(--tiptop-muted);
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-label);
	line-height: 2;
	text-decoration: none;
	transition: border-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		background var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

body.tiptop-standard-system .pagination .page-numbers.current {
	border-color: var(--tiptop-contrast);
	background: var(--tiptop-contrast);
	color: var(--tiptop-base);
}

/* 省略記号は枠を持たない（モックの .is-dots と同じ扱い）。 */
body.tiptop-standard-system .pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

body.tiptop-standard-system .pagination .page-numbers:not(.dots):not(.current):hover,
body.tiptop-standard-system .pagination .page-numbers:not(.dots):not(.current):focus-visible {
	border-color: var(--tiptop-contrast);
	color: var(--tiptop-contrast);
}

/*! bundle-source: assets/css/front-component-unification.css */
/*
 * Issue #353: terminal contracts for standard card hover and form controls.
 * Intentional showcase interactions (the Works archive bento reveal) remain outside this layer.
 *
 * Issue #382: the shared post-detail body contract is also finalized here so
 * blog, news, and works cannot drift through page-specific cascade rules.
 *
 * Issue #385: blog, news, and works share one uncropped post-detail hero.
 *
 * Issue #387: fixed pages keep their background-image overlay hero structure,
 * but share one visual tone across the common page hero and service hero.
 *
 * Issue #392: standard and story fixed pages share the immersive-wide outer
 * frame while their normal prose keeps the existing readable text measure.
 *
 * Issue #362: standard empty states share one structural and visual contract.
 */

:root {
	--tiptop-field-focus-width: 2px;
	--tiptop-card-image-hover-scale: 1.025;
}

/* Shared standard empty state. The 404 page intentionally keeps its own branded layout. */
.empty-state {
	display: grid;
	justify-items: start;
	gap: var(--tt-space-3);
	padding-block: var(--tt-space-section);
}

.empty-state__title,
.empty-state__description {
	margin: 0;
}

.empty-state__title {
	font-size: var(--tt-text-section);
	line-height: var(--tt-leading-tight);
}

.empty-state__description {
	max-width: var(--tt-width-narrow);
	color: var(--tt-color-muted);
}

.empty-state__actions {
	margin-top: var(--tt-space-2);
}

/* 検索結果の0件表示はモックの `.search-empty`（_mockup/tiptop-pages.css:478）へ揃える
 * （2026-08-11・Issue #769）。モックは**上罫線1px・上下64px・中央寄せ・muted**で、
 * 共有の `.empty-state`（左寄せ・節の縦リズム）とは見た目の役割が違う。
 * 検索ページだけに閉じるのは、他の呼び出し元（アーカイブの「投稿がありません」）が
 * 左寄せの既存契約を保つため。 */
body.tiptop-standard-system.search .empty-state {
	justify-items: center;
	padding-block: var(--tt-space-8);
	border-top: 1px solid var(--tiptop-border);
	color: var(--tiptop-muted);
	text-align: center;
}

/* 文言のサイズもモックへ（モックの `.search-empty p` は body の 0.92rem を継承して
 * 14.72px。実サイトは16pxだった）。 */
body.tiptop-standard-system.search .empty-state__description {
	font-size: var(--tt-text-body);
	/* 行間もモックの2.0倍（実サイトは1.95倍で0.7px詰まっていた）。 */
	line-height: calc(2 * var(--tt-leading-scale));
}

/*
 * Fixed-page hero contract (Issue #387, option A): preserve the existing
 * background-image + overlay DOM and saved hero fields, while matching the
 * immersive content-page hero's height, gutters, veil, and heading scale.
 * contact/service used to share this "full hero" contract too, but they're
 * now unconditionally compact (.tiptop-compact-hero below) — .tiptop-page
 * is the only caller left that still toggles between full and compact
 * depending on whether an image resolves.
 */
html body .tiptop-page > .page-hero {
	position: relative;
	display: grid;
	isolation: isolate;
	align-items: end;
	min-height: clamp(520px, 72svh, 700px);
	padding: clamp(112px, 15vh, 174px) 0 clamp(64px, 9vh, 104px);
	border-bottom: 1px solid var(--tt-base-line);
	background-position: center;
	background-size: cover;
}

/*
 * page-hero__inner shares .archive-hero__inner (main.css), whose two-column
 * grid reserves a minmax(240px, 420px) track for an inline hero image. Current
 * page and archive hero renderers paint a full-bleed background without that
 * image element, so the reserved column is dead space that squeezes the text
 * column. Collapse the affected hero render paths to a single column.
 */
html body .tiptop-page > .page-hero .page-hero__inner,
html body .tiptop-contact-page > .page-hero .page-hero__inner,
html body .tiptop-blog-page > .archive-hero .archive-hero__inner {
	display: block;
}/*
 * #419: the compact hero component. No forced large min-height, no
 * image-oriented divider, title stays the visual anchor but doesn't need
 * hero-scale type. A short accent bar draws in under the title after it
 * reveals. Background image and veil visibility are independent from this
 * compact shape and follow the shared has-hero-image/has-no-hero-image
 * contract in base-system.css.
 *
 * `.tiptop-compact-hero` is added to markup by three independent render
 * paths, always paired with the pre-existing `.archive-hero` class so this
 * selector's specificity reliably beats the older per-template rules it
 * replaces (immersive-content-pages.css's archive-hero padding, the base
 * veil ::before, etc. — see docs/design-system-minimization.md):
 *   - inc/page-hero-settings.php `tiptop_theme_render_page_hero()`:
 *     page.php only when no image resolves (`.has-no-hero-image`);
 *     page-contact.php unconditionally.
 *   - inc/archive-hero-settings.php `tiptop_theme_render_archive_hero()`:
 *     blog/news/works archives, unconditionally.
 *   - page-service.php: unconditionally.
 * The title element carries `.archive-hero__title` in all six cases (native
 * to page.php/contact/archives; added directly to service's bare h1) so one
 * selector covers the title/bar styling and motion everywhere too.
 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero {
	min-height: 0;
	padding: clamp(64px, 9vh, 96px) 0;
	border-bottom: none;
}

html body.tiptop-standard-system .tiptop-compact-hero.archive-hero .archive-hero__title {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
}

html body.tiptop-standard-system .tiptop-compact-hero.archive-hero .archive-hero__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 24px;
	background: var(--tiptop-accent);
}

/* 下層ヒーロー見出しのトークン（2026-09-10・Issue #1237）。
 * 役割で持つ——`primary` が大きいほう、`secondary` が小さいほう。eyebrow / title という
 * 要素名で持たないのは、購入者が選ぶ「組み方」で**どちらの要素が大きいかが入れ替わる**ため。
 *
 * 既定値は下の規則が今持っている宣言を1つずつ写した。生値ではなく参照のまま写すのは、
 * 購入者が書体・配色・文字余白を切り替えたときに見出しだけ取り残されないようにするため
 * （160行のコメントに書いてある2026-08-11／2026-08-18の判断をそのまま引き継ぐ）。
 *
 * ⚠ `:where()` で詳細度を 0-0-0 に落としてある。子テーマが
 * `body.tiptop-standard-system { --tt-hero-primary-size: 2rem }`（0-1-1）で
 * **同点ではなく勝てる**ようにするため。`body.tiptop-hero-order-latin`（0-1-1）で
 * 定義すると同点＋ソース順の勝負になり、「同点でしか勝てないなら !important」という
 * 子テーマ側の逃げ道を呼び戻してしまう。
 *
 * ⚠ `:root` には置けない。`--tiptop-font-*` は `body` で解決されるので、
 * `:root` から `var()` で参照しても解決に失敗する（docs/extension-points.md §5 の罠）。 */
:where(body.tiptop-hero-order-latin) {
	--tt-hero-primary-font: var(--tiptop-font-label);
	--tt-hero-primary-size: var(--tt-text-hero);
	--tt-hero-primary-weight: var(--tiptop-font-weight-display);
	--tt-hero-primary-tracking: var(--tiptop-letter-spacing-heading);
	--tt-hero-primary-leading: 1.6;
	--tt-hero-primary-color: var(--tiptop-contrast);
	--tt-hero-secondary-font: var(--tiptop-font-heading);
	--tt-hero-secondary-size: var(--tt-text-note);
	--tt-hero-secondary-weight: 500;
	--tt-hero-secondary-tracking: 0.08em;
	--tt-hero-secondary-leading: calc(2 * var(--tt-leading-scale));
	--tt-hero-secondary-color: var(--tiptop-muted);
}

/* 日本語を大きくする組み方。**入れ替わるのは「どちらが大きいか」だけ**と説明できる形に
 * したいので、小さいほう（secondary）は latin と同じ値の鏡にしてある。
 * 違うのは大きいほうの書体で、日本語が主役になるぶん見出し書体を当てる。 */
:where(body.tiptop-hero-order-jp) {
	--tt-hero-primary-font: var(--tiptop-font-heading);
	--tt-hero-primary-size: var(--tt-text-hero);
	--tt-hero-primary-weight: var(--tiptop-font-weight-display);
	--tt-hero-primary-tracking: var(--tiptop-letter-spacing-heading);
	--tt-hero-primary-leading: 1.6;
	--tt-hero-primary-color: var(--tiptop-contrast);
	--tt-hero-secondary-font: var(--tiptop-font-heading);
	--tt-hero-secondary-size: var(--tt-text-note);
	--tt-hero-secondary-weight: 500;
	--tt-hero-secondary-tracking: 0.08em;
	--tt-hero-secondary-leading: calc(2 * var(--tt-leading-scale));
	--tt-hero-secondary-color: var(--tiptop-muted);
}

/* 標準モードの下層ヒーロー（2026-08-08・承認済みモックへの移行／あやちゃん承認）。
 * 画像が無いとき（.has-no-hero-image）だけ、モックの
 * 「白 ＋ テキスト ＋ 下1本の罫線」にする。画像が設定されているときは上のcompact契約の
 * ままなので、2026-08-01の「管理画面で設定した画像を標準モードでも尊重する」判断は壊さない。
 * ここで言う画像は「そのページ自身に設定した画像」だけ＝トップページのヒーロー画像を流用する
 * フォールバック（tiptop_subpage_hero_fallback）は2026-08-17に廃止した。
 * イマーシブは対象外（未依頼）。
 * paddingに !important を付けているのは、すぐ上の compact 契約が !important 付きの
 * 所有者で、詳細度では勝てないため（所有者が同一ファイルの直上なので追跡はしやすい）。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image {
	padding: var(--tt-space-hero-standard) 0;
	border-bottom: 1px solid var(--tiptop-border);
}

/* ここは「大きいほうの見出し」の宣言一式なので primary のトークンで書く（#1237）。
 * 太さを生値の 400 でなくトークン参照にした理由（2026-08-11）と、字間を
 * `--tiptop-letter-spacing-heading` にした理由（2026-08-18・Issue #1000）は、
 * トークンの既定値としてそのまま生きている——生値 0.06em は elegant プリセットの値で、
 * standard は 0.04em＝**別プリセットの値を写していた**という取り違えの是正だった。
 * モックの `.page-hero__title`（_mockup/standard/css/shared.css:197）も
 * `var(--tiptop-letter-spacing-heading)` で書かれていて、すぐ上のコメントが
 * 「ここで固定すると、購入者が書体を切り替えても見出しの印象だけ取り残される」と
 * 明示している。値ではなく参照そのものがモックの意図。
 *
 * ⚠ 書体だけは latin の primary（＝eyebrow の `--tiptop-font-label`）と食い違う。
 * eyebrow が空のページ（page-hero・service は任意項目）では title がそのまま
 * 大きいほうになるが、その title は今 `--tiptop-font-heading` で出ている。
 * ここへ latin の primary-font を当てると**そのページだけ書体が変わってしまう**ので、
 * latin では下の「latin の title は常に小さいほう側の書体」で上書きして現状を守る。
 * jp では title が大きいほうなので、この参照がそのまま当たる。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title {
	color: var(--tt-hero-primary-color);
	font-family: var(--tt-hero-primary-font);
	font-size: var(--tt-hero-primary-size);
	font-weight: var(--tt-hero-primary-weight);
	letter-spacing: var(--tt-hero-primary-tracking);
	line-height: var(--tt-hero-primary-leading);
}

/* latin では大きいほうが eyebrow なので、title の書体は eyebrow の有無にかかわらず
 * 小さいほう側（＝これまでどおり `--tiptop-font-heading`）に固定する。
 * `:not()` を使わないのは、除外の中身が詳細度に加算されるうえ、外れるのが
 * 宣言ブロック全体になるため（2026-09-08 と 2026-09-09 に1件ずつ踏んだ）。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title {
	font-family: var(--tt-hero-secondary-font);
}

/* モックはタイトル下のアクセントバーを使わない（区切りはヒーロー下の罫線1本に集約する）。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title::after {
	content: none;
}

/* モックの見出しは「Latin（大） ＋ 日本語（小・グレー）」の2段。
 * 実サイトは eyebrow 欄にLatin（例 Works）、タイトル欄に日本語（例 実績）が入っていて
 * 大小が逆なので、**管理画面の入力を入れ替えずに大小だけ交換**して同じ見え方にする。
 * DOM順（eyebrow → h1）は視覚順と一致したままで、h1のテキストは日本語のまま＝意味論も崩れない。
 * eyebrowが空のページ（page-hero・service は任意項目）では h1 を大きいままにしたいので、
 * :has() で「eyebrowに文字があるときだけ」に限定している。
 *
 * この交換は「英語を大きく」を選んだときの組み方なので、セレクタ先頭へ
 * `.tiptop-hero-order-latin` を足してある（#1237）。既定は latin なので今までと同じ勝敗。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__eyebrow {
	margin-bottom: 0;
	color: var(--tt-hero-primary-color);
	/* 書体は front-typography-roles.css の eyebrow 契約（--tiptop-font-label）を
	 * トークン既定として引き取る。ここで参照に起こしておかないと、案件が
	 * 「大きいほうだけ書体を変える」を上書きで表現できない。 */
	font-family: var(--tt-hero-primary-font);
	font-size: var(--tt-hero-primary-size);
	font-weight: var(--tt-hero-primary-weight);
	letter-spacing: var(--tt-hero-primary-tracking);
	line-height: var(--tt-hero-primary-leading);
}

/* eyebrowの52×2pxの下線もモックには無い。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__eyebrow::after {
	content: none;
}

/* 字間はモックの `.page-hero__title-jp` が使う --tt-tracking-label と同値の 0.08em。
 * ⚠ 実サイトにも同名の `--tt-tracking-label` があるが **0.04em で別値**なので、
 * `--tt-hero-secondary-tracking` の既定は生値の 0.08em で持たせてある
 * （2026-08-18・Issue #1000 で確認）。
 * 行間はモックの `.page-hero__title-jp` ＝ --tt-leading-body（2.0）。ここには 1.6 が
 * 入っていたが、それは **大きいほうの --tt-leading-hero の値** で、小さいほうへ
 * 写し間違えていた（同）。トークン `--tt-leading-base`（1.95）を 2.0 にするのは
 * 全サイトに波及するので採らず、design-system.css:695 の前例どおり固有値 ×
 * --tt-leading-scale で書いて文字余白プリセットへの追従を保つ。検索ヒーロー側も同じ。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__title {
	margin-top: var(--tt-space-2);
	color: var(--tt-hero-secondary-color);
	font-family: var(--tt-hero-secondary-font);
	font-size: var(--tt-hero-secondary-size);
	font-weight: var(--tt-hero-secondary-weight);
	letter-spacing: var(--tt-hero-secondary-tracking);
	line-height: var(--tt-hero-secondary-leading);
}

/* 「日本語を大きく」を選んだときは、鏡の関係で eyebrow が小さいほうになる（#1237）。
 * 上の latin の階段と**同じ詳細度**（クラス6個＋:has()）で書いて、勝敗が
 * ソース順ではなく body のクラスだけで決まるようにしてある。
 * 上下の余白は latin の title 側 `margin-top: var(--tt-space-2)` の鏡で、
 * eyebrow の下に同じ間隔を置く。下線を出さないのも latin と揃える。 */
html body.tiptop-standard-system.tiptop-hero-order-jp .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__eyebrow {
	margin-bottom: var(--tt-space-2);
	color: var(--tt-hero-secondary-color);
	font-family: var(--tt-hero-secondary-font);
	font-size: var(--tt-hero-secondary-size);
	font-weight: var(--tt-hero-secondary-weight);
	letter-spacing: var(--tt-hero-secondary-tracking);
	line-height: var(--tt-hero-secondary-leading);
}

html body.tiptop-standard-system.tiptop-hero-order-jp .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__eyebrow::after {
	content: none;
}

/* 分類・タグ・日付のアーカイブでは、小さいほうの見出し（＝分類名）を本文色にする
 * （2026-08-18・Issue #996・オーナー判断で案B）。
 *
 * index.php / archive.php / taxonomy-*.php は「どの分類を見ているのか分からない」という
 * 理由で分類名を h1 へ流している（index.php のコメント参照）。ところが上の大小交換で
 * その h1 は 13.44px の muted に落ち、大きく出るのは全分類で共通の eyebrow（例 Blog）に
 * なるため、せっかく渡した分類名が読み取りにくかった。
 *
 * 「Latin（大）＋日本語（小）」の原則は崩さず、色だけ muted → 本文色にして可読性を上げる。
 * 検索結果ヒーローも同じ原則で組んである（同ファイル下部）ので、そちらは対象外＝
 * 検索語は eyebrow「Search」の下という位置で意味が取れる。
 *
 * 一覧のトップ（body.blog / .post-type-archive-news / .post-type-archive-work）には
 * 当てない。あちらの h1 はサイト設定の固定文言（例「読みもの」）で、強調する必要がない。
 * body クラスで分岐できることは実測で確認済み（category / tag / date / tax-news_category /
 * tax-work_category は分類ページにだけ付き、一覧トップには付かない）。
 *
 * この画面は承認済みモック13ページに含まれていない＝モックに正解が無いケースなので、
 * mock-diff の対象外。
 *
 * 「英語を大きく」にだけ当てる（#1237）。「日本語を大きく」では分類名の h1 が
 * そのまま大きいほうなので、#996 の読み取りにくさは起きない。
 * 値はここだけの判断なのでトークンにせず生値で据え置く。 */
html body.tiptop-standard-system.tiptop-hero-order-latin:is(.category, .tag, .date, .tax-news_category, .tax-work_category) .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__title {
	color: var(--tiptop-text);
}

/* front-gradient-system.css が全ヒーローの ::after に3層のグラデーション
 * （--tiptop-gradient-hero＝radial×2＋linear）を敷いている。標準デザインは
 * 「動きゼロ・装飾ゼロの素の土台」なので、白ヒーローではこれを出さない。
 * 画像が設定されているヒーローは対象外にして従来の見た目を保つ。 */
html body.tiptop-standard-system .archive-hero.has-no-hero-image::after {
	content: none;
}

/* リードの測度と字間。実サイトは720pxまで伸び、字間も共通の --tt-letter-add 分（2.24px）
 * 開いていたが、モックは34em（約544px）＋字間なし。ヒーロー見出しで字間トークンを
 * 意図的に外したのと同じ判断（2026-08-07）を、リードにも適用する。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__lead {
	max-width: 34em;
	letter-spacing: normal;
}

/* 下層ヒーローの中央寄せ（2026-09-10・Issue #1237）。購入者向けの2択なので
 * トークンではなく body class の規則で持つ。**「左寄せ」側は1行も書かない**——
 * 何も足さない状態が今の見え方で、既定で計算値が動かないことを最優先にする。
 *
 * ⚠ `text-align: center` だけでは中央にならない。`.archive-hero__content` は
 * 幅の決まった箱が左に置かれているので `margin-inline: auto` が要る。
 * eyebrow も `[class*="__eyebrow"] { width: fit-content }`（front-gradient-system.css:67）
 * で内容幅の箱になっているため個別に要る。リードは `max-width: 34em` で同じ事情。
 * 案件1件目の子テーマ（custom-design.css:796-805）が実測でこの3箇所を必要としていた。 */
html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content {
	margin-inline: auto;
	text-align: center;
}

html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__eyebrow,
html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__lead {
	margin-inline: auto;
}

/* 検索結果ページ（search.php）は `.archive-hero__content` でなく
 * `.tiptop-search-hero__inner` ＋ `.section__eyebrow` の別の組み立てなので個別に要る
 * （2026-09-10 実測で左のまま残っていた）。`.tiptop-search-hero__inner` は
 * `.content-area` で既に左右 margin が auto（実測 232.5px）なので margin-inline は足さない。 */
html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .tiptop-search-hero__inner {
	text-align: center;
}

html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow {
	margin-inline: auto;
}

/*
 * あやちゃん指摘：serviceページだけタイトル直下に罫線が見える。ヒーローが
 * 圧縮された今、直後に来る最初の.tiptop-service-blockのborder-top（他の
 * サービスブロック同士を区切るための線）が、ヒーローの一部のように見えて
 * しまっていた。ヒーローに隣接する最初のブロックだけ罫線を外す。
 * padding-topも同様の理由で縮小：.tiptop-service-blockは全ブロック共通で
 * 本文用フルサイズ(--tt-base-section-space、最大190px)を使っており、
 * ヒーロー自身の余白と合わさって最初のブロックだけ頭が過大だった
 * （news content wrapperで見つけたのと同型のバグ）。blog/works同様の
 * 縮小値に統一。ブロック同士の間隔（2つ目以降のpadding-top）は対象外。
 */
html body.tiptop-standard-system .tiptop-service-hero + .tiptop-service-block {
	border-top: none;
	padding-top: clamp(52px, 7vw, 92px);
}

/* Issue #401: one shared state contract for contact, comment, and blog search controls. */
.tiptop-contact-form,
.single-post .blog-comments,
.tiptop-blog-page .tiptop-blog-widget--search {
	--tt-form-focus-color: var(--tiptop-contrast);
	--tt-form-control-accent: var(--tiptop-contrast);
	--tt-form-disabled-foreground: var(--tiptop-muted, var(--tt-color-muted));
	--tt-form-disabled-background: var(--tiptop-surface, var(--tt-color-surface));
	--tt-form-disabled-border: var(--tiptop-border, var(--tt-color-border));
}

.tiptop-contact-form {
	--tt-form-focus-color: var(--tiptop-contact-ink);
	--tt-form-control-accent: var(--tiptop-contact-ink);
	--tt-form-disabled-foreground: var(--tiptop-contact-muted);
	--tt-form-disabled-background: var(--tiptop-contact-surface);
	--tt-form-disabled-border: var(--tiptop-contact-border);
}

.single-post .blog-comments {
	--tt-form-focus-color: var(--tiptop-comment-text);
	--tt-form-control-accent: var(--tiptop-comment-text);
	--tt-form-disabled-foreground: var(--tiptop-comment-muted);
	--tt-form-disabled-background: var(--tiptop-comment-surface);
	--tt-form-disabled-border: var(--tiptop-comment-border);
}

.tiptop-blog-page .tiptop-blog-widget--search {
	--tt-form-focus-color: var(--tiptop-blog-ink);
	--tt-form-control-accent: var(--tiptop-blog-ink);
	--tt-form-disabled-foreground: var(--tiptop-blog-muted);
	--tt-form-disabled-background: var(--tiptop-blog-surface);
	--tt-form-disabled-border: var(--tiptop-blog-border);
}

.tiptop-contact-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):focus-visible,
.single-post .comment-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):focus-visible,
.tiptop-blog-page .tiptop-blog-widget--search .search-field:focus-visible {
	border-color: var(--tt-form-focus-color);
	outline: var(--tiptop-field-focus-width) solid var(--tt-form-focus-color);
	outline-offset: 3px;
}

.tiptop-contact-form :is(input[type="checkbox"], input[type="radio"]),
.single-post .comment-form :is(input[type="checkbox"], input[type="radio"]) {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--tt-form-control-accent);
	cursor: pointer;
}

.tiptop-contact-form :is(input[type="checkbox"], input[type="radio"]):hover:not(:disabled),
.single-post .comment-form :is(input[type="checkbox"], input[type="radio"]):hover:not(:disabled) {
	opacity: 0.82;
}

.tiptop-contact-form :is(input[type="checkbox"], input[type="radio"]):checked,
.single-post .comment-form :is(input[type="checkbox"], input[type="radio"]):checked {
	accent-color: var(--tt-form-control-accent);
}

.tiptop-contact-form :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.single-post .comment-form :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.tiptop-contact-form :is(input[type="submit"], .wpcf7-acceptance a):focus-visible,
.single-post :is(.comment-form .submit, .comment-reply-link, .blog-comment__permalink):focus-visible {
	outline: var(--tiptop-field-focus-width) solid var(--tt-form-focus-color);
	outline-offset: 3px;
}

.tiptop-contact-form :is(input:not([type="submit"]):not([type="hidden"]), textarea, select):disabled,
.single-post .comment-form :is(input:not([type="submit"]):not([type="hidden"]), textarea, select):disabled,
.tiptop-blog-page .tiptop-blog-widget--search .search-field:disabled {
	border-color: color-mix(in srgb, var(--tt-form-disabled-border) 58%, transparent);
	background: color-mix(in srgb, var(--tt-form-disabled-background) 58%, transparent);
	color: var(--tt-form-disabled-foreground);
	cursor: not-allowed;
	opacity: 0.58;
}

.tiptop-contact-form input[type="submit"]:disabled,
.single-post .comment-form .submit:disabled,
.tiptop-blog-page .tiptop-blog-widget--search .search-submit:disabled {
	border-color: color-mix(in srgb, var(--tt-form-focus-color) 20%, transparent);
	background: color-mix(in srgb, var(--tt-form-focus-color) 38%, transparent);
	color: var(--tt-form-disabled-foreground);
	cursor: not-allowed;
	opacity: 0.58;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
}

/* 検索結果ヒーローも他の一覧ヒーローと同じ2段（大きいラテン＋小さい日本語）に揃える
 * （2026-08-09）。上の大小交換ルールは `.archive-hero__content` ＋ `.archive-hero__eyebrow`
 * に限定していて、検索だけ `.tiptop-search-hero__inner` ＋ `.section__eyebrow` という
 * 別のクラス構成なので届いておらず、**「Search」が12.5pxの太字＋52×2pxの下線バー、
 * 検索語のh1が49.6pxの太字**という、サイト内で唯一違う組み方のまま残っていた。
 * モックは「Search」を大きいラテン、検索語は結果セクション側の小さい行に置く扱いなので、
 * ここも eyebrow を主役にして h1（検索語）を小さいサブ行にする。
 *
 * セレクタに compact/archive/has-no-hero-image を足しているのは、同ファイル上方の
 * `.tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title`（クラス5個）が
 * font-size だけを持っていて、クラス3個では**色とウェイトだけ効いてサイズだけ負ける**
 * という状態になったため。「一部の宣言だけ効く」のは詳細度負けのサインなので、
 * 所有者と同じクラス数まで上げて揃えた。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow {
	margin-bottom: 0;
	color: var(--tt-hero-primary-color);
	font-family: var(--tt-hero-primary-font);
	font-size: var(--tt-hero-primary-size);
	font-weight: var(--tt-hero-primary-weight);
	letter-spacing: var(--tt-hero-primary-tracking);
	line-height: var(--tt-hero-primary-leading);
}

html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow::after {
	content: none;
}

html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title {
	margin-top: var(--tt-space-2);
	color: var(--tt-hero-secondary-color);
	font-family: var(--tt-hero-secondary-font);
	font-size: var(--tt-hero-secondary-size);
	font-weight: var(--tt-hero-secondary-weight);
	letter-spacing: var(--tt-hero-secondary-tracking);
	line-height: var(--tt-hero-secondary-leading);
}

/* 「日本語を大きく」の検索ヒーロー（#1237）。ここも eyebrow が小さいほうになる。
 * 検索語の h1 は上の `.archive-hero__title` の primary 規則がそのまま当たるので、
 * 足すのは eyebrow の1本だけ（余白と下線の扱いは一覧側の jp と同じ）。 */
html body.tiptop-standard-system.tiptop-hero-order-jp .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow {
	margin-bottom: var(--tt-space-2);
	color: var(--tt-hero-secondary-color);
	font-family: var(--tt-hero-secondary-font);
	font-size: var(--tt-hero-secondary-size);
	font-weight: var(--tt-hero-secondary-weight);
	letter-spacing: var(--tt-hero-secondary-tracking);
	line-height: var(--tt-hero-secondary-leading);
}

html body.tiptop-standard-system.tiptop-hero-order-jp .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow::after {
	content: none;
}

/* 一覧ヒーローの説明文の太さを承認済みモックへ（2026-08-10・オーナー指摘
 * 「トップ以外のヒーロー部分の説明文のカラーとサイズが違う」）。
 * モックは 14.72px / w400 / muted。サイズと色は既に一致していて、太さだけ500だった。
 *
 * ⚠ 実効値を持っているのは responsive-fixes.css:412-419 の
 * `.archive-hero__lead, .tiptop-news-page …, .tiptop-works-page …`（w500）。
 * news-page.css / works-page.css 側にも同じ (0,2,0) の指定があるが
 * responsive-fixes.css が後読みなので同点で後勝ちしている。**あちらを直接書き換えると
 * モード非限定でイマーシブにも波及する**ため、このファイル（responsive-fixes より
 * 後に読まれる共通コンポーネント契約の所有ファイル）で標準スコープだけ上書きする。
 * 色は各ページ側（news-page.css の muted / blog-page.css の是正）が
 * 持っている。
 *
 * 追記（2026-08-18）：その各ページ側の是正が blog / news / works の3系統にしか
 * 入っておらず、同じ `.archive-hero__lead` を使う page-hero 系（service・説明文を
 * 入れた固定ページ）だけ main.css の `--tiptop-text`（#222222）のまま残っていた。
 * 12ページを iframe で横断計測して確認（service だけ #222222、他は全部 #707070）。
 * 太さと同じ理由でここに色も持たせ、系統に関係なく muted へ揃える。
 * 詳細度 (0,2,2) で所有者の main.css `.archive-hero__lead` (0,1,0) に勝つので
 * !important は不要。各ページ側の既存指定は同値なので競合しない。 */
html body.tiptop-standard-system .archive-hero__lead {
	color: var(--tiptop-muted);
	font-weight: 400;
}

/*! bundle-source: assets/css/front-gradient-system.css */
/*
 * Palette-following gradient system.
 *
 * The twelve compositions are derived from the active palette's primary and
 * accent colors. They intentionally describe reusable geometry rather than
 * preserving the motion-template-kit source colors.
 */

:root {
	--tiptop-gradient-primary-soft: color-mix(in srgb, var(--tiptop-primary) 20%, transparent);
	--tiptop-gradient-primary-faint: color-mix(in srgb, var(--tiptop-primary) 8%, transparent);
	--tiptop-gradient-accent-soft: color-mix(in srgb, var(--tiptop-accent) 22%, transparent);
	--tiptop-gradient-accent-faint: color-mix(in srgb, var(--tiptop-accent) 8%, transparent);
	--tiptop-gradient-surface: color-mix(in srgb, var(--tiptop-surface) 88%, transparent);

	/* motion-template-kit の実測12種から、角度・種別・stop構成だけを一般化。 */
	--tiptop-gradient-01: linear-gradient(135deg, var(--tiptop-gradient-primary-soft) 0%, var(--tiptop-gradient-accent-soft) 100%);
	--tiptop-gradient-02: linear-gradient(120deg, var(--tiptop-gradient-primary-soft) 0%, transparent 48%, var(--tiptop-gradient-accent-soft) 100%);
	--tiptop-gradient-03: linear-gradient(180deg, var(--tiptop-gradient-primary-faint) 0%, var(--tiptop-gradient-accent-soft) 58%, transparent 100%);
	--tiptop-gradient-04: linear-gradient(90deg, var(--tiptop-gradient-primary-soft) 0%, var(--tiptop-gradient-surface) 52%, var(--tiptop-gradient-accent-soft) 100%);
	--tiptop-gradient-05: radial-gradient(circle at 18% 24%, var(--tiptop-gradient-primary-soft) 0%, transparent 58%);
	--tiptop-gradient-06: radial-gradient(circle at 82% 20%, var(--tiptop-gradient-accent-soft) 0%, transparent 60%);
	--tiptop-gradient-07: radial-gradient(ellipse at center, var(--tiptop-gradient-primary-faint) 0%, var(--tiptop-gradient-accent-faint) 52%, transparent 76%);
	--tiptop-gradient-08: radial-gradient(circle at 25% 80%, var(--tiptop-gradient-accent-soft) 0%, transparent 48%), radial-gradient(circle at 82% 18%, var(--tiptop-gradient-primary-soft) 0%, transparent 54%);
	--tiptop-gradient-09: conic-gradient(from 210deg at 50% 50%, var(--tiptop-gradient-primary-soft), transparent 32%, var(--tiptop-gradient-accent-soft) 66%, var(--tiptop-gradient-primary-soft));
	--tiptop-gradient-10: conic-gradient(from 90deg at 75% 25%, transparent 0 22%, var(--tiptop-gradient-accent-soft) 38%, transparent 58%, var(--tiptop-gradient-primary-soft) 78%, transparent 100%);
	--tiptop-gradient-11: linear-gradient(150deg, var(--tiptop-gradient-primary-soft) 0 28%, transparent 28% 64%, var(--tiptop-gradient-accent-soft) 64% 100%);
	--tiptop-gradient-12: radial-gradient(circle at 12% 18%, var(--tiptop-gradient-primary-soft) 0%, transparent 38%), radial-gradient(circle at 88% 82%, var(--tiptop-gradient-accent-soft) 0%, transparent 42%), linear-gradient(135deg, var(--tiptop-gradient-primary-faint), var(--tiptop-gradient-accent-faint));

	/* 初回導入で使う役割トークン。構図の差し替えを利用側から分離する。 */
	--tiptop-gradient-hero: var(--tiptop-gradient-12);
	--tiptop-gradient-heading-accent: var(--tiptop-gradient-01);
}

/*
 * Hero trial layer: the negative stacking level keeps the gradient below an
 * existing ::before veil while leaving configured media and text untouched.
 */
.archive-hero,
.tiptop-service-hero {
	position: relative;
	isolation: isolate;
}

.archive-hero::after,
.tiptop-service-hero::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--tiptop-gradient-hero);
	content: "";
	pointer-events: none;
}

/* Small heading accents only; text color and readable contrast stay unchanged.
 * width:fit-content は下線をラベルの幅に合わせるために要る（2026-08-10）。実サイトの
 * eyebrowはどれも幅いっぱいのブロック（トップのWorksで1280px）なので、これが無いと
 * 下の width:100% が「コンテナ幅の下線」になってしまう。承認済みモックも
 * _mockup/tiptop-shared.css:183 の .eyebrow で同じ指定を持つ。
 * 実測(1920px)では全ページのeyebrowが左揃え・margin-inline:0 なので、
 * fit-content にしても中央寄せが崩れる箇所は無い。 */
.archive-hero__eyebrow,
.section__eyebrow,
.tiptop-service-eyebrow,
.tiptop-work-detail__eyebrow,
.tiptop-news-detail__eyebrow,
[class*="__eyebrow"] {
	position: relative;
	width: fit-content;
}

/* 下線は承認済みモック（_mockup/tiptop-shared.css:196）へ揃える（2026-08-10）。
 * 旧実装は「幅52px固定・2px・黒20%→青#3450dc 22%のグラデ」で、モックの
 * 「ラベル幅・1px・単色 --tiptop-contrast」と色/太さ/幅/余白の4点すべて違っていた。
 * グラデを外すので、ここは --tiptop-gradient-heading-accent の唯一の参照だった。
 * 変数自体は front-gradient-system.css:32 に残す（他の gradient と同じ体系で、
 * 将来の参照先が無いと断定しない）。 */
.archive-hero__eyebrow::after,
.section__eyebrow::after,
.tiptop-service-eyebrow::after,
.tiptop-work-detail__eyebrow::after,
.tiptop-news-detail__eyebrow::after,
[class*="__eyebrow"]::after {
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 6px;
	background: var(--tiptop-contrast);
	content: "";
}

@media (prefers-reduced-motion: reduce) {
	.archive-hero::after,
	.tiptop-service-hero::after {
		transition: none;
	}
}

/*! bundle-source: assets/css/front-typography-roles.css */
/*
 * Canonical front-end typography roles.
 *
 * Sizes and line-height are shared by component role. Font family, weight,
 * heading tracking, and feature settings continue to come from the selected
 * font preset so each preset keeps its intended character.
 */

/*
 * front-gradient-system.css は 2026-08-10（Issue #839）に @import から
 * 通常の enqueue へ移した（functions.php の 'tiptop-front-gradient-system'）。
 * @import のURLにはバージョンクエリが付かず編集がキャッシュで反映されない／
 * enqueue にも link にも出ないので所有ファイル探しが空振りする、の2点が理由。
 * ロード順は依存関係で従来と同じ「component-unification → gradient-system →
 * このファイル」を維持している。ここに @import を戻さないこと。
 */

:root {
	--tt-text-subhead: var(--tt-text-lg);
	--tt-text-lead: var(--tt-text-md);
	--tt-text-body: var(--tt-text-md);
	--tt-text-meta: var(--tt-text-xs);
	--tt-line-eyebrow: 1.35;
	--tt-line-hero-title: 1.15;
	--tt-line-section-title: 1.35;
	/* 2026-08-19（Issue #1022）：1.6 → 1.7。承認済みモックのカード・行の見出しは
	 * どちらのページでも 1.7倍（`.news-row__title` の実測 25.568px ÷ 15.04px）。
	 * 1.6 はモックの `--tt-leading-hero` の値で、**役割を取り違えていた**
	 * （docs/typography-scale.md の行間表は hero 1.6 / title 1.7 / body 2）。
	 * 変更時点でこの値はどの要素でも勝っていなかった（news の行見出しは
	 * トップが 1.7・一覧が 1.8 の個別指定に負けていた）ので、見た目は動かない。 */
	--tt-line-card-title: 1.7;
	--tt-tracking-eyebrow: 0.14em;
	--tt-tracking-heading: 0.1em;
	--tt-tracking-label: 0.04em;
	--tt-weight-regular: 400;
	--tt-weight-medium: 500;
	--tt-weight-bold: 700;
	--tt-weight-heavy: 800;
}

.hero__eyebrow,
.archive-hero__eyebrow,
.section__eyebrow,
.tiptop-blog-hero__eyebrow,
.tiptop-service-eyebrow,
.tiptop-works-page .archive-hero__eyebrow,
.tiptop-work-detail__eyebrow,
.tiptop-news-page .archive-hero__eyebrow,
.tiptop-news-detail__eyebrow,
[class*="__eyebrow"] {
	font-family: var(--tiptop-font-label);
	font-size: var(--tt-text-label);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: calc(var(--tt-tracking-eyebrow) + var(--tt-letter-add));
	line-height: calc(var(--tt-line-eyebrow) * var(--tt-leading-scale));
	text-transform: none;
}

.tiptop-service-block__num {
	font-family: var(--tiptop-font-label);
	font-size: var(--tt-text-numeral);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: calc(var(--tt-tracking-eyebrow) + var(--tt-letter-add));
	line-height: calc(var(--tt-line-eyebrow) * var(--tt-leading-scale));
	text-transform: none;
}

.hero__title,
.archive-hero__title,
.tiptop-blog-hero__title,
.tiptop-service-hero h1,
.tiptop-works-page .archive-hero__title,
.tiptop-news-page .archive-hero__title,
.contact-page-intro h1 {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	/* ページ見出しは display の太さ（standard=400／他プリセットは heading と同値）。
	 * 分離の理由は front-font-presets.css の冒頭を参照。 */
	font-weight: var(--tiptop-font-weight-display);
	letter-spacing: var(--tiptop-letter-spacing-heading);
	text-transform: none;
}

.hero__title,
.archive-hero__title,
.tiptop-blog-hero__title,
.tiptop-service-hero h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.tiptop-works-page .archive-hero__title,
.tiptop-news-page .archive-hero__title,
.contact-page-intro h1:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-hero);
	line-height: calc(var(--tt-line-hero-title) * var(--tt-leading-scale));
}

.tiptop-work-detail__title,
.tiptop-news-detail__title {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-size: var(--tt-text-title);
	font-weight: var(--tiptop-font-weight-display);
	letter-spacing: var(--tiptop-letter-spacing-heading);
	line-height: calc(var(--tt-line-hero-title) * var(--tt-leading-scale));
	text-transform: none;
}

.section__title,
.section h2,
.section-heading-row h2,
.tiptop-service-block__head h2 {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: var(--tiptop-letter-spacing-heading);
}

.section__title,
.section h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.section-heading-row h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.tiptop-service-block__head h2:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
	font-size: var(--tt-text-section);
	line-height: calc(var(--tt-line-section-title) * var(--tt-leading-scale));
}

.entry__content h2 {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: var(--tiptop-letter-spacing-heading);
}

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

/* 節見出しだけ display の太さにする。`.entry__content h2` は上に残す——
 * あれは記事本文の見出しで、モックでは 18.56px の太字（節見出しではない）。
 * 今回、節見出しのグループから分けて heading 段へ寄せた。 */
.section__title,
.section h2,
.section-heading-row h2,
.tiptop-service-block__head h2 {
	font-weight: var(--tiptop-font-weight-display);
}

/* Issue #912：標準トップの節見出しはモックと同じ欧文ロールへ。
 * Services の中間ラッパーや News のDOM構造に依存せず、既存の標準トップ節見出し
 * （クラスなしh2）と同じ実要素を狙う。書体名は固定せずプリセットへ追従させる。
 * 2026-08-13：About/Services/Blog/Newsの4見出しに役割クラスを付けたため
 * :not([class]) だけでは掴めなくなった。4クラスを明示的に追加して同じ対象を維持する
 * （website_title/material_title は今もクラス無しのままなので :not([class]) 側で継続して掴む）。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content h2:not([class]),
body.tiptop-standard-system .site-main--front .tiptop-front-content .tiptop-about-summary__title,
body.tiptop-standard-system .site-main--front .tiptop-front-content .tiptop-services-aside__title,
body.tiptop-standard-system .site-main--front .tiptop-front-content .front-blog-heading__title,
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news__title {
	font-family: var(--tiptop-font-latin);
}

.post-card__title,
.card h3,
.tiptop-blog-page .post-card__title,
.category .post-card__title,
.tag .post-card__title,
.date .post-card__title,
.tiptop-works-page .post-card__title,
.tiptop-news-item__title,
.front-blog-card .post-card__title {
	font-family: var(--tiptop-font-heading);
	font-feature-settings: var(--tiptop-font-feature-settings);
	font-weight: var(--tiptop-font-weight-heading);
	letter-spacing: var(--tiptop-letter-spacing-heading);
}

.post-card__title,
.card h3:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
.tiptop-blog-page .post-card__title,
.category .post-card__title,
.tag .post-card__title,
.date .post-card__title,
.tiptop-works-page .post-card__title,
.tiptop-news-item__title,
.front-blog-card .post-card__title {
	font-size: var(--tt-text-card);
	line-height: calc(var(--tt-line-card-title) * var(--tt-leading-scale));
}

/* Issue #912：引用そのものの muted 指定は正しい。main.css の広域段落ルールが
 * 子の p で var(--tiptop-text) を再解決して黒へ戻すため、引用の内側だけ同トークンを
 * muted へ束縛する。広域段落セレクタやカード／抜粋の色契約は変更しない。 */
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 {
	--tiptop-text: var(--tiptop-muted);
}

/*! bundle-source: assets/css/front-accent-usage.css */
/*
 * Front-end accent usage map.
 *
 * Keep accent on small surfaces, non-text marks, and interaction states so
 * pastel palettes remain readable. Extend this file by the approved groups in
 * Issue #349 instead of scattering late overrides across page stylesheets.
 */

/* Group A: status badges (pagination current-page marker).
 * NEW badge (.tiptop-badge--status) was removed entirely — the mock never had
 * it and it read as a stray dot next to News items (2026-08-14).
 * Nav current-location marker (accent dot) was removed; .is-current
 * now reuses the existing color/opacity current-page treatment in
 * main.css/color-palettes.css/front-ds-legacy-cleanup.css/immersive-system.css. */
.page-numbers.current {
	border-color: var(--tiptop-accent);
	background: var(--tiptop-accent);
	color: var(--tiptop-comment-surface, var(--tiptop-base));
}

/* Group B（タクソノミーチップ）は#458で design-system.css の
 * .tiptop-badge--category へ統合（このファイルが優先度30で最後にロードされ
 * border-color/backgroundの実際の勝者だったため、その値をそのまま移設）。 */

/* Group C（見出し先頭ドット）は2026-07-21に一度適用したが、実見た目でトップページの
 * ヒーロー/About/Works/Services全eyebrowに同一ドットが連続して見えたためオーナー判断で撤去
 * （PR #377の内容を取り消し）。 */

.section h2,
.section-heading-row h2 {
	position: relative;
}

.section h2::after,
.section-heading-row h2::after {
	content: "";
	display: block;
	width: clamp(32px, 5vw, 56px);
	height: 2px;
	margin-top: var(--tt-space-3);
	background: var(--tiptop-accent);
}

/* 2026-08-01: front-page.phpのブログティザーカードはデザインモード分岐なしで
 * 標準デザインにもレンダリングされるため、キーボードフォーカスのアウトラインを無条件に効かせる。 */
.site-main--front .front-blog-card__link:focus-visible {
	outline-width: 2px;
	outline-style: solid;
	outline-color: currentColor;
}

/* カードhoverのaccent枠は不採用（2026-07-21オーナー判断・画像scaleのみの
 * 控えめな演出に対して主張が強すぎるため）。 */

/*! bundle-source: assets/css/footer-brand-display.css */
.site-footer__brand-mark {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--tt-space-3);
	margin-bottom: var(--tt-space-3);
}

.site-footer__logo-link {
	display: inline-flex;
	align-items: center;
}

.site-footer__logo {
	display: block;
	width: auto;
	max-width: min(140px, 40vw);
	max-height: 48px;
	object-fit: contain;
}

.site-footer__brand-mark .site-footer__title {
	margin: 0;
}

/* Footerのキャッチ（2026-08-10・オーナー指摘「フッターにキャッチが出てない」）。
 * 値は承認済みモックの .site-footer__tagline の実測（1920px）：12.48px / w400 /
 * 行間2.0倍 / 字間なし / 白72% / 幅上限30em。
 * `margin: 0` にしてブランド名との間隔は上の .site-footer__brand-mark の
 * margin-bottom（12px）に任せる——モックの実測も12pxで、二重に持たせると24pxになる。
 * 濃色面の前景なので白は `--tiptop-base` 側で表す（main.css:911 のフッター文字色と同じ
 * 機構。暗いパレットでは base=黒／contrast=白へ写るので反転が成立する）。
 * モード非限定にするのは意図的：この要素は今回新規に出るのでイマーシブ側にも
 * 「維持すべき既存の見た目」が無い。イマーシブ専用の値が要るなら別途決める。 */
.site-footer__tagline {
	max-width: 30em;
	margin: 0;
	color: color-mix(in srgb, var(--tiptop-base) 72%, transparent);
	font-size: var(--tt-text-label);
	font-weight: 400;
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: normal;
}

/* Issue #772: the approved standard mock uses the compact 22.4px wordmark.
 * Immersive keeps its intentionally oversized wordmark, so this title rule is
 * limited to the standard design. There is no matching reusable type-size token,
 * therefore the measured 1.4rem value stays local instead of adding a one-off token. */
body.tiptop-standard-system .site-footer .site-footer__title {
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-logo);
	font-weight: 400;
}

/* Footer navigation labels are Japanese copy. Keep this correction shared so
 * both designs use the selected Japanese font instead of relying on Latin-font
 * fallback glyphs. Size, color and interaction rules remain owned elsewhere. */
body .site-footer .site-footer__menu a {
	font-family: var(--tiptop-font-jp);
	font-weight: 400;
}

/* フッターのSNSアイコンを承認済みモックへ（2026-08-10・オーナー指摘「下部のSNS大きさが
 * おかしい」）。モック（_mockup/tiptop-current.css:163-180 の .site-social）は
 * リンクが32×32・SVGが14×14。実サイトは52×52・20×20で、実測で1.6倍近く大きかった。
 * main.css:965-973 の指定はモード非限定でイマーシブにも効いているため、そちらは
 * 動かさず標準スコープの上書きとして足す（イマーシブは現状維持）。
 * このファイルはフッターの所有ファイルで両デザイン層より後に読まれるので、
 * 詳細度を1段足すだけで !important なしに勝てる。 */
/* 2026-08-10：枠線とアイコンの濃さもモックへ（オーナー判断「モックが正」）。
 * モック（`_mockup/tiptop-current.html` のフッターSNS）は**枠線が白32%・アイコンが白72%**で、
 * 実サイトは枠線が `--tiptop-border`（rgb(228,228,228)の実線）・アイコンが白100%だった。
 * 濃色面の前景は `--tiptop-base` 側で表す（`main.css:911` のフッター文字色と同じ機構。
 * 暗いパレットでは base=黒／contrast=白へ写るので、この式のままで反転が成立する）。
 * 寸法はモックと同じ32×32／14×14で既に一致していた。 */
body.tiptop-standard-system .site-footer-social .site-social-links__link {
	width: 32px;
	height: 32px;
	border-color: color-mix(in srgb, var(--tiptop-base) 32%, transparent);
	color: color-mix(in srgb, var(--tiptop-base) 72%, transparent);
}

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