/*
 * 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: none;
}

.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だけ他の節と端が揃わないのを避ける」と定めている。
 * トップだけ1280pxなのはヘッダー/フッターと同じ2段構え（base-system.css の
 * body.home.tiptop-standard-system .site-header__inner 参照）。下層は購入者の
 * 「サイト幅」設定（--tiptop-site-width）にも追従する。
 *
 * 上の隙間は直前の節の 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;
}

body.home.tiptop-standard-system .tiptop-page-cta {
	width: var(--tt-width-wide);
}

/* 中央揃えの縦積みは共有の土台（このファイル上部の .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;
}

/* カードの内側だけスマホで詰める（モック 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) {
}