/*
Theme Name: Tabi Gallery Theme
Theme URI:
Author:
Author URI:
Description: 工務店・ハウスメーカーが建築事例を無料で投稿できるギャラリーサイト向けのブロックテーマ（FSE）。投稿→審査→承認のワークフロー、ブログ、お知らせに対応。
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tabi-gallery-theme
*/

/* ============================================
   トークン
   ============================================ */
:root {
	--tg-ink: #18181b;
	--tg-white: #ffffff;
	--tg-gray-50: #fafafa;
	--tg-gray-100: #f4f4f5;
	--tg-gray-200: #e4e4e7;
	--tg-gray-300: #d4d4d8;
	--tg-gray-400: #a1a1aa;
	--tg-gray-500: #71717a;
	--tg-gray-600: #52525b;
	--tg-gray-700: #3f3f46;
	--tg-stone-300: #d6d3d1;
	--tg-stone-500: #78716c;
	--tg-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
	--tg-display: 'Cormorant Garamond', 'Noto Serif JP', serif;
	--tg-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
}

body {
	font-family: var(--tg-sans);
	color: var(--tg-ink);
	background: var(--tg-white);
}

/* ============================================
   ページ遷移（View Transitions API）
   対応ブラウザではページ間がクロスフェードでつながる。
   非対応ブラウザは何もせず通常の遷移になる（プログレッシブエンハンスメント）。
   ============================================ */
@view-transition {
	navigation: auto;
}
::view-transition-old(root) {
	animation: tg-fade-out 200ms ease-out both;
}
::view-transition-new(root) {
	animation: tg-fade-in 320ms ease-out both;
}
@keyframes tg-fade-out {
	to { opacity: 0; }
}
@keyframes tg-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
/* prefers-reduced-motion のユーザーには即時切り替え（アニメーションなし）にする */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* View Transitions API（cross-document）は対応状況にばらつきがあり、
   環境によっては上記が発火しないことを確認したため、それに依存しない
   保険として、ページ本文の登場アニメーションを純CSSで必ず効かせる。
   JS不要（＝JS実行前でも確実に動く）、対応ブラウザなら100%効く。 */
main {
	animation: tg-main-enter 0.5s ease both;
}
@keyframes tg-main-enter {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	main { animation: none; }
}

/* [hidden] のUA既定 display:none は詳細度が低いため、
   同じ要素にクラスセレクタで display を指定すると上書きされてしまう。
   drawer-panel-tag / drawer-panel-category を JS の el.hidden で
   確実に切り替えられるよう明示的に優先させる。 */
[hidden] {
	display: none !important;
}

a {
	text-decoration: none;
	color: inherit;
}

ul, ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

button {
	font-family: inherit;
}

/* ============================================
   共通パーツ
   ============================================ */
.btn-outline,
.btn-dark {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	padding: 0.65rem 1.75rem;
	border: 1px solid var(--tg-gray-300);
	color: var(--tg-gray-700);
	background: var(--tg-white);
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.btn-outline:hover {
	background: var(--tg-ink);
	color: var(--tg-white);
	border-color: var(--tg-ink);
}
.btn-dark {
	background: var(--tg-ink);
	color: var(--tg-white);
	border-color: var(--tg-ink);
}
.btn-dark:hover {
	background: var(--tg-gray-700);
}

.tag-badge {
	font-family: var(--tg-display);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--tg-stone-500);
	border: 1px solid var(--tg-stone-300);
	padding: 0.1rem 0.5rem;
	white-space: nowrap;
}
.meta-dot {
	color: var(--tg-gray-200);
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}
.breadcrumb a {
	letter-spacing: 0.15em;
	transition: color 0.2s ease;
}
.breadcrumb a:hover {
	color: var(--tg-gray-700);
}
.breadcrumb-current {
	color: var(--tg-gray-600);
}

.page-title-serif {
	font-family: var(--tg-serif);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--tg-ink);
	margin: 0 0 0.75rem;
}

.listing-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 6rem 1.5rem;
	text-align: center;
}
.listing-empty i {
	font-size: 2rem;
	color: var(--tg-gray-300);
}
.listing-empty p {
	font-size: 0.875rem;
	color: var(--tg-gray-400);
	letter-spacing: 0.05em;
}

.listing-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 3rem 0;
}
.listing-pagination-count {
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	letter-spacing: 0.2em;
}
.listing-pagination-links {
	display: flex;
	gap: 0.75rem;
}

/* ============================================
   ヘッダー
   ============================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--tg-white);
	max-width: none !important;
}
.site-header-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	min-height: 4rem;
	align-items: center;
}
/* ロゴは太字＋レギュラーの2ウェイトを組み合わせたロックアップにする
   （単一ウェイト・均一トラッキングの欧文ロゴタイプとは異なるリズムを持たせるため） */
.site-logo-link .site-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	font-family: var(--tg-sans);
	text-transform: uppercase;
	color: var(--tg-ink);
}
.site-logo-primary {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}
.site-logo-secondary {
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	color: var(--tg-gray-500);
}
.site-header-inner > .site-header-right {
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	flex-grow: 1;
	gap: 0.75rem 2rem;
}
.site-nav {
	gap: 2rem;
	align-items: center;
}
.site-nav-link {
	font-family: var(--tg-display);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--tg-gray-500);
	padding-bottom: 0.15rem;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease;
	white-space: nowrap;
}
.site-nav-link:hover,
.site-nav-link.is-active {
	color: var(--tg-ink);
	border-color: var(--tg-ink);
}
.site-submit-cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--tg-display);
	font-size: 0.8rem;
	border: 1px solid var(--tg-gray-700);
	color: var(--tg-gray-700);
	padding: 0.35rem 1rem;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.site-submit-cta a:hover {
	background: var(--tg-ink);
	color: var(--tg-white);
}
.drawer-toggle {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
}
.drawer-toggle span {
	display: block;
	height: 1px;
	background: var(--tg-gray-800, #27272a);
	width: 1.5rem;
	transition: all 0.2s ease;
}
.drawer-toggle span:last-child {
	width: 1rem;
	align-self: flex-end;
}

/* ============================================
   ドロワーメニュー
   ============================================ */
.drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 60;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.drawer-panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 20rem;
	max-width: 88vw;
	background: var(--tg-white);
	z-index: 61;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}
html.drawer-open .drawer-overlay {
	opacity: 1;
	pointer-events: auto;
}
html.drawer-open .drawer-panel {
	transform: translateX(0);
}
html.drawer-open {
	overflow: hidden;
}
.drawer-close-row {
	display: flex;
	justify-content: flex-end;
	padding: 1.25rem;
}
.drawer-close {
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--tg-gray-600);
	font-size: 1.25rem;
}
.drawer-nav {
	display: flex;
	flex-direction: column;
	margin: 0 1.5rem 1.5rem;
	border-bottom: 1px solid var(--tg-gray-100);
}
.drawer-nav-link {
	font-family: var(--tg-display);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	color: var(--tg-gray-700);
	padding: 0.75rem 0;
	border-top: 1px solid var(--tg-gray-100);
}
.drawer-nav-link:first-child {
	border-top: none;
}
.drawer-submit-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0 1.5rem 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--tg-ink);
	color: var(--tg-white);
	font-family: var(--tg-display);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
}
.drawer-search {
	display: flex;
	align-items: center;
	margin: 0 1.5rem 1.5rem;
	border: 1px solid var(--tg-gray-200);
	padding: 0.5rem 1rem;
}
.drawer-search input {
	border: none;
	outline: none;
	flex: 1;
	font-size: 0.875rem;
}
.drawer-search button {
	background: none;
	border: none;
	color: var(--tg-gray-500);
	cursor: pointer;
}
.drawer-tabs {
	display: flex;
	margin: 0 1.5rem 1rem;
	border-bottom: 1px solid var(--tg-gray-200);
}
.drawer-tab {
	flex: 1;
	background: none;
	border: none;
	padding: 0.6rem 0;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	color: var(--tg-gray-400);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
}
.drawer-tab.is-active {
	color: var(--tg-ink);
	border-color: var(--tg-ink);
	font-weight: 500;
}
.drawer-panel-category {
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
}
.drawer-category-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--tg-gray-100);
	font-size: 0.875rem;
	color: var(--tg-gray-700);
}
.drawer-category-count {
	font-size: 0.75rem;
	color: var(--tg-gray-400);
}
.drawer-panel-tag {
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.drawer-tag-group-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--tg-gray-500);
	letter-spacing: 0.05em;
	margin: 0 0 0.75rem;
}
.drawer-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.drawer-tag-link {
	font-size: 0.75rem;
	border: 1px solid var(--tg-gray-300);
	padding: 0.25rem 0.75rem;
	color: var(--tg-gray-600);
}
.drawer-sns {
	margin-top: auto;
	padding: 1.5rem;
	display: flex;
	gap: 1rem;
}
.drawer-sns a {
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tg-gray-600);
}

/* ============================================
   ホーム：絞り込みバー
   ============================================ */
.gallery-filter-bar {
	position: sticky;
	top: 4rem;
	z-index: 40;
	background: var(--tg-white);
	border-bottom: 1px solid var(--tg-gray-100);
}
.filter-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	flex-wrap: wrap;
}
.filter-pill {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	padding: 0.4rem 1rem;
	border: 1px solid var(--tg-gray-200);
	color: var(--tg-gray-500);
	white-space: nowrap;
	transition: all 0.2s ease;
}
.filter-pill:hover {
	border-color: var(--tg-gray-500);
	color: var(--tg-gray-700);
}
.filter-pill.is-active {
	background: var(--tg-ink);
	color: var(--tg-white);
	border-color: var(--tg-ink);
}
.filter-spacer {
	flex: 1;
}
.filter-tag-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	padding: 0.4rem 1rem;
	border: 1px solid var(--tg-gray-200);
	background: var(--tg-white);
	color: var(--tg-gray-400);
	cursor: pointer;
	white-space: nowrap;
}
.filter-tag-count {
	background: var(--tg-ink);
	color: var(--tg-white);
	font-size: 0.625rem;
	width: 1rem;
	height: 1rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.filter-tag-panel {
	display: none;
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 2rem;
	width: min(640px, calc(100vw - 4rem));
	max-height: min(70vh, 640px);
	overflow-y: auto;
	background: var(--tg-white);
	border: 1px solid var(--tg-gray-100);
	border-radius: 14px;
	box-shadow: 0 24px 48px -16px rgba(24, 24, 27, 0.18), 0 4px 14px rgba(24, 24, 27, 0.06);
	padding: 0.5rem 1.25rem 1rem;
}
.filter-tag-panel.is-open {
	display: block;
	animation: tg-filter-panel-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tg-filter-panel-enter {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.filter-tag-panel.is-open {
		animation: none;
	}
}
@media (max-width: 640px) {
	.filter-tag-panel {
		position: fixed;
		left: 1rem;
		right: 1rem;
		top: auto;
		bottom: 1rem;
		width: auto;
		max-height: 75vh;
	}
}
.filter-tag-group {
	border-bottom: 1px solid var(--tg-gray-100);
}
.filter-tag-group:first-child {
	border-top: 1px solid var(--tg-gray-100);
	margin-top: 0.5rem;
}
.filter-tag-group-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	color: var(--tg-gray-500);
	letter-spacing: 0.1em;
	padding: 0.75rem 0.25rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.filter-tag-group-label::-webkit-details-marker {
	display: none;
}
.filter-tag-group-label::marker {
	content: "";
}
.filter-tag-group-label span:first-child {
	flex: 1;
}
.filter-tag-group-count {
	background: var(--tg-ink);
	color: var(--tg-white);
	font-size: 0.625rem;
	min-width: 1.1rem;
	height: 1.1rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.3rem;
}
.filter-tag-group-chevron {
	color: var(--tg-gray-400);
	transition: transform 0.2s ease;
}
.filter-tag-group[open] .filter-tag-group-chevron {
	transform: rotate(180deg);
}
.filter-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 0.25rem 1rem;
}
.filter-tag-choice {
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--tg-gray-200);
	color: var(--tg-gray-500);
	background: var(--tg-white);
}
.filter-tag-choice.is-active {
	background: var(--tg-gray-800, #27272a);
	color: var(--tg-white);
	border-color: var(--tg-gray-800, #27272a);
}
.filter-status-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 2rem;
	background: var(--tg-gray-50);
	border-top: 1px solid var(--tg-gray-100);
	font-size: 0.75rem;
	color: var(--tg-gray-500);
}
.filter-reset {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--tg-gray-400);
}
.filter-reset:hover {
	color: var(--tg-gray-700);
}

/* ============================================
   ギャラリーグリッド
   ============================================ */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.gallery-grid { grid-template-columns: 1fr; }
}
.gallery-card {
	position: relative;
	display: block;
	aspect-ratio: 10 / 7;
	overflow: hidden;
}
.gallery-card-image {
	display: block;
	width: 100%;
	height: 100%;
}
.gallery-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform 0.7s ease;
}
.gallery-card:hover .gallery-card-image img {
	transform: scale(1.05);
}
.gallery-card.is-featured {
	outline: 2px solid #b45309;
	outline-offset: -2px;
}
.gallery-card-pr-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: #b45309;
	color: var(--tg-white);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.2rem 0.55rem;
}
/* ホバー時：カード全体を覆う単色パネルではなく、下端から情報ドロワーが
   せり上がる形式（写真は常に見えたまま）。上端の細いラインをアクセントにする。 */
.gallery-card-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.6rem;
	padding: 1.25rem 1.25rem 1.4rem;
	background: var(--tg-ink);
	border-top: 2px solid rgba(255, 255, 255, 0.3);
	transform: translateY(100%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-card:hover .gallery-card-overlay {
	transform: translateY(0);
}
.gallery-card-category {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--tg-display);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.15em;
}
.gallery-card-title {
	color: var(--tg-white);
	font-family: var(--tg-serif);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.5;
}
.gallery-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.gallery-card-tag {
	font-size: 0.65rem;
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
}
.gallery-card-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
}
.gallery-card-date {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.5);
}
/* 展開アイコンはホバー時だけでなく常時、カード右上の丸バッジとして表示する
   （ドロワー内埋め込みではなく独立した固定バッジにすることで、視認性も上げる） */
.gallery-card-expand {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--tg-ink);
	font-size: 0.9rem;
	transform: scale(0.85);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease;
}
.gallery-card:hover .gallery-card-expand {
	opacity: 1;
	transform: scale(1);
}
.gallery-card:hover .gallery-card-expand:hover {
	background: var(--tg-white);
}

/* ============================================
   詳細ページ：ヒーロー
   ============================================ */
.detail-hero {
	position: relative;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
	background: var(--tg-gray-100);
	max-width: none !important;
}
.detail-hero--article {
	height: 56vh;
	min-height: 380px;
}
.detail-hero--news {
	height: 52vh;
	min-height: 360px;
}
.detail-hero-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.detail-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}
.detail-hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05) 55%, transparent);
	max-width: none !important;
	padding: 0 2.5rem 2.5rem;
}
.detail-hero-text {
	max-width: 800px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
.detail-hero-meta {
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.detail-hero-category .wp-block-post-terms,
.detail-hero-category {
	display: inline-block;
	font-family: var(--tg-display);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.85);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 0.15rem;
	margin-bottom: 0.75rem;
}
.detail-hero--article .detail-hero-category,
.detail-hero--news .detail-hero-category {
	border: 1px solid var(--tg-stone-300);
	background: rgba(255, 255, 255, 0.1);
	padding: 0.1rem 0.5rem;
	margin-bottom: 0;
}
.detail-hero-date,
.detail-hero-readtime {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.75rem;
}
.detail-hero-title {
	color: var(--tg-white);
	font-family: var(--tg-serif);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

/* ============================================
   詳細ページ：本文・詳細パーツ
   ============================================ */
.detail-body {
	margin: 0 auto;
	padding: 3rem 2rem;
}
.detail-description,
.detail-article-content {
	font-family: var(--tg-serif);
	font-size: 0.9375rem;
	line-height: 2;
	color: var(--tg-gray-700);
	margin-bottom: 2.5rem;
}
.detail-article-content h2 {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--tg-ink);
	padding-top: 1rem;
}
.detail-article-content blockquote {
	border-left: 2px solid var(--tg-stone-300);
	padding-left: 1.5rem;
	margin: 2rem 0;
	font-style: italic;
	color: var(--tg-gray-600);
}
.detail-date {
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	letter-spacing: 0.15em;
	margin-bottom: 1.5rem;
}
.detail-divider {
	border-top: 1px solid var(--tg-gray-100);
	margin: 0 0 2rem;
}
.detail-tags {
	margin-bottom: 2.5rem;
}
.detail-tags-label {
	font-family: var(--tg-display);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--tg-gray-400);
	margin: 0 0 1rem;
}
.detail-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.detail-tag {
	font-size: 0.875rem;
	color: var(--tg-gray-600);
	border: 1px solid var(--tg-gray-200);
	padding: 0.35rem 1rem;
}
.detail-photo-gallery {
	margin-bottom: 2.5rem;
}
.detail-photo-gallery-label {
	font-family: var(--tg-display);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--tg-gray-400);
	margin: 0 0 1rem;
}
/* 写真スライダー */
.photo-slider-viewport {
	position: relative;
	background: var(--tg-gray-100);
	overflow: hidden;
}
.photo-slider-track {
	display: flex;
	transition: transform 0.4s ease;
}
.photo-slider-slide {
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.photo-slider-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
}
.photo-slider-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	color: var(--tg-gray-700);
	cursor: pointer;
	font-size: 1.25rem;
	transition: background 0.2s ease;
}
.photo-slider-nav:hover {
	background: var(--tg-white);
}
.photo-slider-nav.prev {
	left: 0.75rem;
}
.photo-slider-nav.next {
	right: 0.75rem;
}
.photo-slider-zoom {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	color: var(--tg-gray-700);
	cursor: pointer;
	font-size: 1.1rem;
}
.photo-slider-zoom:hover {
	background: var(--tg-white);
}
.photo-slider-counter {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	background: rgba(0, 0, 0, 0.6);
	color: var(--tg-white);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	padding: 0.2rem 0.65rem;
}
.photo-slider-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding-top: 0.75rem;
}
.photo-slider-dot {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 999px;
	border: none;
	padding: 0;
	background: var(--tg-gray-300);
	cursor: pointer;
}
.photo-slider-dot.is-active {
	background: var(--tg-ink);
}

/* ライトボックス（拡大表示） */
html.lightbox-open {
	overflow: hidden;
}
.photo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
}
.photo-lightbox-image-wrap {
	max-width: 90vw;
	max-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.photo-lightbox-image-wrap img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
}
.photo-lightbox-close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--tg-white);
	font-size: 1.75rem;
	cursor: pointer;
}
.photo-lightbox-counter {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}
.photo-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: var(--tg-white);
	font-size: 1.75rem;
	cursor: pointer;
	transition: background 0.2s ease;
}
.photo-lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.2);
}
.photo-lightbox-nav.prev {
	left: 1rem;
}
.photo-lightbox-nav.next {
	right: 1rem;
}
@media (max-width: 560px) {
	.photo-lightbox-nav {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.25rem;
	}
}
.detail-company-link {
	margin-bottom: 2.5rem;
}
.detail-company-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--tg-gray-700);
	border-bottom: 1px solid var(--tg-gray-300);
	padding-bottom: 0.15rem;
}
.detail-prevnext {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 3rem;
}
.detail-prevnext-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	min-width: 0;
}
.detail-prevnext-link.is-next {
	justify-content: flex-end;
	text-align: right;
}
.detail-prevnext-arrow {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tg-gray-200);
	color: var(--tg-gray-500);
}
.detail-prevnext-link:hover .detail-prevnext-arrow {
	border-color: var(--tg-gray-400);
}
.detail-prevnext-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.detail-prevnext-label {
	font-size: 0.7rem;
	color: var(--tg-gray-400);
	letter-spacing: 0.15em;
	margin-bottom: 0.25rem;
}
.detail-prevnext-title {
	font-family: var(--tg-serif);
	font-size: 0.875rem;
	color: var(--tg-gray-700);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.detail-prevnext-all {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0 1.5rem;
	border: 1px solid var(--tg-gray-200);
	flex-shrink: 0;
	color: var(--tg-gray-400);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
}
.detail-related-label {
	font-family: var(--tg-display);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--tg-gray-400);
	margin: 0 0 1.5rem;
}
.detail-related-list {
	display: flex;
	flex-direction: column;
}
.detail-related-item {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--tg-gray-100);
}
.detail-related-thumb {
	flex-shrink: 0;
	width: 6rem;
	height: 4rem;
	overflow: hidden;
	background: var(--tg-gray-100);
}
.detail-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.detail-related-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.detail-related-date {
	font-size: 0.7rem;
	color: var(--tg-gray-400);
	letter-spacing: 0.1em;
}
.detail-related-title {
	font-family: var(--tg-serif);
	font-size: 0.875rem;
	color: var(--tg-gray-800, #27272a);
}
.detail-related-arrow {
	flex-shrink: 0;
	color: var(--tg-gray-400);
	font-size: 0.75rem;
}

/* ============================================
   一覧ページ共通ヘッダー（ブログ／お知らせ）
   ============================================ */
.archive-header {
	margin: 0 auto;
	padding: 4rem 2rem 2rem;
	border-bottom: 1px solid var(--tg-gray-100);
}
.archive-header-top {
	align-items: flex-end;
	margin-bottom: 2rem;
}
.archive-eyebrow {
	font-family: var(--tg-display);
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	color: var(--tg-gray-400);
	margin: 0 0 0.75rem;
}
.archive-title {
	font-family: var(--tg-display);
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin: 0;
}
.archive-subtitle {
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	letter-spacing: 0.1em;
	margin: 0.75rem 0 0;
}
.archive-category-tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.archive-tab {
	font-family: var(--tg-display);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	padding: 0.5rem 1rem;
	color: var(--tg-gray-400);
}
.archive-tab:hover {
	color: var(--tg-gray-700);
}
.archive-tab.is-active {
	background: var(--tg-ink);
	color: var(--tg-white);
}
.archive-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 24rem;
	border: 1px solid var(--tg-gray-200);
	padding: 0.6rem 1rem;
	margin-top: 1rem;
}
.archive-search i {
	color: var(--tg-gray-400);
}
.archive-search input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 0.875rem;
	font-family: var(--tg-serif);
}
.archive-search-clear {
	color: var(--tg-gray-400);
}
.archive-body {
	margin: 0 auto;
	padding: 3rem 2rem;
}

/* ============================================
   ブログ一覧
   ============================================ */
.blog-search-list {
	display: flex;
	flex-direction: column;
}
.blog-search-item {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--tg-gray-100);
}
.blog-search-thumb {
	flex-shrink: 0;
	width: 7rem;
	height: 5rem;
	overflow: hidden;
	background: var(--tg-gray-100);
}
.blog-search-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog-search-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.blog-search-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--tg-gray-400);
}
.blog-search-title {
	font-family: var(--tg-serif);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--tg-ink);
}
.blog-search-excerpt {
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
	margin-bottom: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--tg-gray-100);
}
.blog-featured-image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--tg-gray-100);
}
.blog-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.blog-featured:hover .blog-featured-image img {
	transform: scale(1.05);
}
.blog-featured-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.blog-featured-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--tg-gray-400);
}
.blog-featured-title {
	font-family: var(--tg-serif);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--tg-ink);
}
.blog-featured-excerpt {
	font-size: 0.875rem;
	color: var(--tg-gray-500);
	line-height: 1.9;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-featured-more {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	color: var(--tg-gray-500);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media (max-width: 900px) {
	.blog-featured { grid-template-columns: 1fr; }
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.blog-grid { grid-template-columns: 1fr; }
}
.blog-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.blog-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tg-gray-100);
	margin-bottom: 0.5rem;
}
.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.blog-card:hover .blog-card-image img {
	transform: scale(1.05);
}
.blog-card-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--tg-gray-400);
}
.blog-card-title {
	font-family: var(--tg-serif);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--tg-ink);
	line-height: 1.5;
}
.blog-card-excerpt {
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	line-height: 1.6;
}

/* ============================================
   お知らせ一覧
   ============================================ */
.news-list {
	display: flex;
	flex-direction: column;
}
.news-item {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
	padding: 2rem 0;
	border-top: 1px solid var(--tg-gray-100);
}
.news-item-meta {
	flex-shrink: 0;
	width: 9rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.news-item-date {
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	letter-spacing: 0.1em;
}
.news-item-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.news-item-title {
	font-family: var(--tg-serif);
	font-size: 1rem;
	font-weight: 500;
	color: var(--tg-ink);
	line-height: 1.6;
}
.news-item-excerpt {
	font-size: 0.875rem;
	color: var(--tg-gray-500);
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-item-arrow {
	flex-shrink: 0;
	color: var(--tg-gray-400);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.news-item:hover .news-item-arrow {
	opacity: 1;
}
@media (max-width: 560px) {
	.news-item {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}
	.news-item-meta {
		width: auto;
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}
	.news-item-arrow {
		display: none;
	}
}

/* ============================================
   投稿フォーム
   ============================================ */
.submit-page {
	max-width: 640px;
	margin: 0 auto;
}
.submit-header {
	padding: 3rem 1.5rem 2rem;
	border-bottom: 1px solid var(--tg-gray-100);
}
.submit-lead {
	font-size: 0.875rem;
	color: var(--tg-gray-500);
	line-height: 1.8;
}
.submit-success,
.submit-error {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 2.5rem 1.5rem 0;
	padding: 2rem;
	border: 1px solid var(--tg-gray-200);
	background: var(--tg-gray-50);
}
.submit-success i {
	font-size: 1.25rem;
	color: var(--tg-gray-700);
}
.submit-success-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--tg-ink);
	margin: 0 0 0.4rem;
}
.submit-success-text {
	font-size: 0.75rem;
	color: var(--tg-gray-500);
	line-height: 1.7;
	margin: 0 0 1rem;
}
.submit-error {
	background: var(--tg-white);
	align-items: center;
}
.submit-error p {
	font-size: 0.75rem;
	color: var(--tg-gray-600);
	margin: 0;
}
.submit-form {
	padding: 3rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
/* ハニーポット：人間の目には見えないが、DOM/AOMには存在させて
   自動入力するbotだけを検出する（display:noneだと無視するbotもいるため位置移動で隠す） */
.submit-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.submit-section-label {
	font-family: var(--tg-display);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--tg-gray-400);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--tg-gray-100);
	margin: 0 0 1.5rem;
}
.submit-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.submit-field:last-child {
	margin-bottom: 0;
}
.submit-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
@media (max-width: 560px) {
	.submit-field-row { grid-template-columns: 1fr; }
}
.submit-field label {
	font-size: 0.75rem;
	color: var(--tg-gray-600);
	letter-spacing: 0.05em;
}
.required {
	color: var(--tg-gray-400);
}
.submit-field-note {
	color: var(--tg-gray-400);
	font-weight: normal;
	letter-spacing: normal;
}
.submit-field input[type="text"],
.submit-field input[type="email"],
.submit-field input[type="url"],
.submit-field input[type="file"],
.submit-field select,
.submit-field textarea {
	width: 100%;
	border: 1px solid var(--tg-gray-200);
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: var(--tg-ink);
	font-family: inherit;
	background: var(--tg-white);
}
.submit-field input:focus,
.submit-field select:focus,
.submit-field textarea:focus {
	outline: none;
	border-color: var(--tg-gray-500);
}
.submit-field textarea {
	resize: vertical;
}
.submit-field-hint {
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	margin: 0;
}
.submit-tags-lead {
	font-size: 0.75rem;
	color: var(--tg-gray-500);
	margin: 0 0 1rem;
}
.submit-tags {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.submit-tag-group-label {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	color: var(--tg-gray-400);
	margin: 0 0 0.6rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--tg-gray-100);
}
.submit-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.submit-tag-choice {
	position: relative;
}
.submit-tag-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.submit-tag-choice span {
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--tg-gray-200);
	color: var(--tg-gray-600);
	cursor: pointer;
	transition: all 0.15s ease;
}
.submit-tag-choice input:checked + span {
	background: var(--tg-ink);
	color: var(--tg-white);
	border-color: var(--tg-ink);
}
.submit-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 2rem;
	border-top: 1px solid var(--tg-gray-100);
}
.submit-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	color: var(--tg-gray-500);
}
.submit-form button.btn-dark {
	border: none;
	padding: 0.85rem 2.5rem;
}

/* ============================================
   汎用固定ページ
   ============================================ */
.page-content {
	padding: 3rem 2rem;
	font-family: var(--tg-serif);
	line-height: 2;
}

/* ============================================
   フッター
   ============================================ */
.site-footer {
	background: var(--tg-gray-50);
	border-top: 1px solid var(--tg-gray-100);
	padding: 2.5rem 2rem;
	text-align: center;
}
.footer-nav a {
	font-size: 0.75rem;
	color: var(--tg-gray-500);
	letter-spacing: 0.05em;
}
.footer-nav a:hover {
	color: var(--tg-gray-800, #27272a);
}
.footer-sns {
	margin-top: 1.5rem;
	gap: 1.25rem;
}
.footer-sns a {
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tg-gray-500);
}
.footer-copyright {
	margin-top: 1rem;
	font-size: 0.75rem;
	color: var(--tg-gray-400);
	letter-spacing: 0.05em;
}

/* ============================================
   ページ読み込みバー（Linear/Notion等に倣った、細いトップバー方式）
   View Transitionsが効かないブラウザでも、クリックした瞬間に
   「反応している」ことが伝わるよう、遷移開始と同時に表示する。
   ============================================ */
.page-load-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--tg-ink);
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
   ローディング画面（全画面プリローダー）
   ページ最初の表示時に一瞬だけ出るロゴ演出。ページ読み込みバー（上の細いバー）とは
   別物で、こちらは初回描画の体験を整えるためのもの。
   退場時は単純なフェードではなく、上下2枚のパネルが左右ならぬ上下に割れて
   開くカーテン式のリビールにしている。 */
.site-preloader {
	position: fixed;
	inset: 0;
	z-index: 300;
	pointer-events: none;
}
.site-preloader-panel {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	background: var(--tg-ink);
	transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.site-preloader-panel-top {
	top: 0;
}
.site-preloader-panel-bottom {
	bottom: 0;
}
.site-preloader-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	font-family: var(--tg-sans);
	text-transform: uppercase;
	animation: tg-preloader-logo-enter 0.6s ease both;
	transition: opacity 0.3s ease;
}
.site-preloader-logo .site-logo-primary {
	font-size: 1.6rem;
	color: var(--tg-white);
}
.site-preloader-logo .site-logo-secondary {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.6);
}
@keyframes tg-preloader-logo-enter {
	from {
		opacity: 0;
		letter-spacing: 0.35em;
	}
	to {
		opacity: 1;
		letter-spacing: 0.06em;
	}
}
.site-preloader.is-end .site-preloader-panel-top {
	transform: translateY(-100%);
}
.site-preloader.is-end .site-preloader-panel-bottom {
	transform: translateY(100%);
}
.site-preloader.is-end .site-preloader-logo {
	/* 登場時の tg-preloader-logo-enter アニメーションが animation-fill-mode: both
	   により opacity を1に固定し続けるため、animation:none で解除してから
	   opacity:0 のtransitionを効かせる（そうしないと消える指定が無視される） */
	animation: none;
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.site-preloader-logo {
		animation: none;
	}
	.site-preloader-panel {
		transition: none;
	}
}

/* ============================================
   トップへ戻るボタン
   ============================================ */
.scroll-top-btn {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tg-white);
	border: 1px solid var(--tg-gray-300);
	color: var(--tg-gray-600);
	cursor: pointer;
	z-index: 40;
	opacity: 0;
	transform: translateY(1rem);
	pointer-events: none;
	transition: all 0.3s ease;
}
.scroll-top-btn.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.scroll-top-btn:hover {
	background: var(--tg-gray-50);
}

/* スマートフォン用「投稿する」追従ボタン（右下固定）。
   デスクトップではヘッダーの投稿CTAが常に見えているため、
   ヘッダーのnav/CTAが隠れる780px以下でのみ表示する。 */
.mobile-submit-fab {
	display: none;
}
@media (max-width: 780px) {
	.mobile-submit-fab {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		position: fixed;
		bottom: 1.25rem;
		right: 1.25rem;
		z-index: 45;
		padding: 0.85rem 1.25rem;
		border-radius: 999px;
		background: var(--tg-ink);
		color: var(--tg-white);
		font-family: var(--tg-display);
		font-size: 0.8rem;
		letter-spacing: 0.1em;
		box-shadow: 0 12px 24px -8px rgba(24, 24, 27, 0.35);
	}
	.scroll-top-btn {
		bottom: 5.25rem;
		background: var(--tg-white);
	}
}

/* ============================================
   404
   ============================================ */
.not-found {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8rem 2rem;
	gap: 0.5rem;
}
.not-found-code {
	font-family: var(--tg-display);
	font-size: 3rem;
	color: var(--tg-gray-300);
	margin: 0;
}
.not-found-title {
	font-family: var(--tg-serif);
	font-size: 1.25rem;
	margin: 0;
}
.not-found-text {
	font-size: 0.875rem;
	color: var(--tg-gray-500);
	margin: 0 0 1rem;
}
.not-found-back a {
	font-size: 0.75rem;
	border-bottom: 1px solid var(--tg-gray-300);
	padding-bottom: 0.15rem;
}

/* ============================================
   レスポンシブ：ヘッダー・ナビ
   ============================================ */
@media (max-width: 780px) {
	.site-nav,
	.site-submit-cta {
		display: none;
	}
	.site-header-inner {
		padding: 0 1.25rem;
	}
	.detail-hero-overlay,
	.filter-row,
	.filter-status-bar,
	.archive-header,
	.archive-body,
	.detail-body {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.filter-tag-panel {
		right: 1.25rem;
		width: min(640px, calc(100vw - 2.5rem));
	}
	.archive-header-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}