/*
 * このテーマ独自の調整。
 * assets/css/app.css はオリジナル（Next.js版）のビルド成果物をそのまま置いているため、
 * 手を入れずにここで上書きする。
 */

/* ------------------------------------------------------------------
 * トップのヒーロー
 *
 * オリジナルは下揃え（align-items:flex-end）で、写真(234px)と
 * テキスト(161px)の高さの差 73px が見出しの上に余白として出ていた。
 * 上揃えにすると今度は同じ余白が下に移るだけなので、
 * 写真の高さをテキストに合わせて、上下とも余白が出ないようにする。
 * 1023px以下は1カラムなので対象外（スマホの見た目は変えない）。
 * ------------------------------------------------------------------ */
@media (min-width: 64rem) {
	.fc-hero-grid {
		align-items: stretch;
	}
	.fc-hero-media {
		aspect-ratio: auto !important;
		height: 100%;
		min-height: 11rem;
	}
}

/* ------------------------------------------------------------------
 * スマホでの表
 *
 * オリジナルは表に min-width を持たせ、入りきらない分を
 * 横スクロールで見せている（例：トップの「対応材質」は 44rem = 704px 必要）。
 * 768px 未満では、列見出しを各セルのラベルに振り替えてカード表示にする。
 * ラベル付けは JS（initTables）が data-label を付与して行い、
 * JSが動かない場合は従来どおり横スクロールに落ちる。
 * ------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {

	/* 横スクロールの原因になる最小幅を解除 */
	.fc-table {
		min-width: 0 !important;
	}

	/* 列見出しのある表はカードに積み替える */
	.fc-table-stack {
		display: block;
	}

	.fc-table-stack thead {
		display: none;
	}

	.fc-table-stack tbody {
		display: block;
	}

	.fc-table-stack tbody tr {
		display: block;
		border: 1px solid var(--fc-line);
	}

	.fc-table-stack tbody tr + tr {
		margin-top: 0.75rem;
	}

	.fc-table-stack tbody th,
	.fc-table-stack tbody td {
		display: block;
		border: 0;
		width: auto;
		text-align: left;
		white-space: normal;
		padding: 0.625rem 0.875rem;
	}

	/* 各行の先頭セルはカードの見出しとして扱う */
	.fc-table-stack tbody tr > :first-child {
		background: var(--fc-surface-2);
		border-bottom: 1px solid var(--fc-line);
		font-weight: 700;
	}

	.fc-table-stack tbody tr > :first-child::before {
		display: none;
	}

	/* 2つ目以降のセルには列見出しをラベルとして出す */
	.fc-table-stack tbody td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.1875rem;
		font-family: "IBM Plex Mono", ui-monospace, monospace;
		font-size: 0.6875rem;
		letter-spacing: 0.04em;
		color: var(--fc-muted);
	}

	/* 数値の右寄せはカードでは不要 */
	.fc-table-stack .num {
		text-align: left;
	}

	/* タップ後に hover が残って行が塗られるのを防ぐ */
	.fc-table-stack tbody tr:hover td {
		background: transparent;
	}
}

/* ------------------------------------------------------------------
 * 画像
 *
 * AVIF / WebP / JPEG を出し分けるため <img> を <picture> で包んでいる。
 * <picture> 自体はインライン要素なので、そのままだと親の余白計算に
 * 影響しうる。レイアウトには一切関与させない。
 * ------------------------------------------------------------------ */
.fc-pic {
	display: contents;
}