/*
Theme Name: モノクト
Description: monoct.work の表示用テーマ。データは monoct-core プラグインから取得し、課題・技術・材料・設備・業界・企業・企業活動の関係を表示する。
Version: 0.3.0
Requires PHP: 8.0
Text Domain: monoct
*/

:root {
	--c-text: #1d2329;
	--c-muted: #5b6670;
	--c-line: #dde2e6;
	--c-bg: #ffffff;
	--c-bg-soft: #f4f6f8;
	--c-accent: #0b5e8a;
	--c-accent-soft: #e6f1f7;
	--c-warn-bg: #fff6e0;
	--c-warn-line: #e8c46a;
	--radius: 6px;
	--wrap: 960px;
	--font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

a { color: var(--c-accent); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 16px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 8px; top: -48px;
	padding: 8px 12px;
	background: var(--c-text);
	color: #fff;
	z-index: 10;
}
.skip-link:focus { top: 8px; }

/* ヘッダー */
.site-header { border-bottom: 1px solid var(--c-line); }
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding-top: 12px;
	padding-bottom: 8px;
}
.site-title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--c-text);
	text-decoration: none;
	letter-spacing: .04em;
}
.site-header .search-form { flex: 1 1 260px; max-width: 360px; }

.global-nav ul {
	display: flex;
	gap: 4px;
	margin: 0 auto;
	padding-bottom: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.global-nav a {
	display: block;
	padding: 8px 10px;
	color: var(--c-text);
	font-size: .9375rem;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}
.global-nav a:hover { color: var(--c-accent); }
.global-nav a[aria-current="page"] { border-bottom-color: var(--c-accent); font-weight: 700; }

/* 検索 */
.search-form { display: flex; gap: 0; width: 100%; }
.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	font: inherit;
	font-size: 1rem;
	border: 1px solid #9aa5ae;
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
}
.search-form button {
	padding: 8px 16px;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--c-accent);
	border: 1px solid var(--c-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	cursor: pointer;
}

/* 本文 */
.site-main { padding-top: 16px; padding-bottom: 48px; }

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	color: var(--c-muted);
}
.breadcrumb li + li::before { content: "›"; margin: 0 6px; }
.breadcrumb a { color: var(--c-muted); }

.page-head { margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: 1.75rem; line-height: 1.4; }
.page-head__type {
	display: inline-block;
	margin: 0 0 6px;
	padding: 0 8px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--c-accent);
	background: var(--c-accent-soft);
	border-radius: 999px;
}
.page-head__reading { margin: 2px 0 0; color: var(--c-muted); font-size: .9375rem; }
.page-head__terms { margin: 6px 0 0; font-size: .875rem; }
.page-head .search-form { margin-top: 12px; max-width: 480px; }
.lead { color: var(--c-muted); margin: 8px 0 0; }

.block { margin: 0 0 32px; }
.block h2 {
	margin: 0 0 12px;
	padding-bottom: 6px;
	font-size: 1.25rem;
	line-height: 1.5;
	border-bottom: 2px solid var(--c-line);
}
.block h3 { margin: 16px 0 6px; font-size: 1rem; }
.block p { margin: 0 0 12px; }
.block ul,
.block ol { margin: 0 0 12px; padding-left: 1.5em; }
.block--summary {
	padding: 16px;
	background: var(--c-bg-soft);
	border-radius: var(--radius);
}
.block--summary h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; font-size: 1rem; color: var(--c-muted); }
.block--summary p:last-child { margin-bottom: 0; }

.count {
	font-size: .8125rem;
	font-weight: 400;
	color: var(--c-muted);
}

/* 関係の一覧 */
.block ul.entities,
ul.entities {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 8px;
}
.entity {
	padding: 10px 12px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
}
.entity__title { font-weight: 700; }
.entity__excerpt {
	display: block;
	margin-top: 2px;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--c-muted);
}
.src-mark {
	font-size: .75rem;
	color: var(--c-muted);
	vertical-align: 1px;
}
.role {
	font-size: .875rem !important;
	color: var(--c-muted);
}

.block ul.activities,
ul.activities { margin: 0; padding: 0; list-style: none; }
.activity {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--c-line);
}
.activity__date { font-size: .875rem; color: var(--c-muted); white-space: nowrap; }
.activity .tag { justify-self: start; }
.activity__title { grid-column: 1 / -1; font-weight: 700; }
.activity__company { grid-column: 1 / -1; font-size: .8125rem; color: var(--c-muted); }
.tag {
	padding: 0 8px;
	font-size: .75rem;
	line-height: 1.8;
	color: var(--c-accent);
	background: var(--c-accent-soft);
	border-radius: 999px;
	align-self: center;
}

/* 基本情報 */
table.info { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.info th,
table.info td {
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--c-line);
}
table.info th { width: 9em; background: var(--c-bg-soft); font-weight: 700; }

/* 出典 */
.block--sources { font-size: .875rem; }
.block--sources .sources li { margin-bottom: 8px; }
.src-meta,
.src-note { display: block; color: var(--c-muted); font-size: .8125rem; }
.block--sources ul.rel-sources { padding-left: 0; list-style: none; }
.rel-sources > li { margin-bottom: 12px; }
.rel-sources > li:target { background: var(--c-warn-bg); }
.rel-name { font-weight: 700; }
.rel-sources .sources { margin-top: 4px; }

.review {
	margin: 24px 0 0;
	padding: 12px 16px;
	font-size: .875rem;
	background: var(--c-bg-soft);
	border-radius: var(--radius);
}

/* 企業の絞り込み */
.filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px 16px;
	align-items: end;
	margin: 0 0 20px;
	padding: 16px;
	background: var(--c-bg-soft);
	border-radius: var(--radius);
}
.filters__item label { display: block; margin-bottom: 4px; font-size: .875rem; font-weight: 700; }
.filters select {
	width: 100%;
	padding: 8px 10px;
	font: inherit;
	font-size: 1rem;
	background: #fff;
	border: 1px solid #9aa5ae;
	border-radius: var(--radius);
}
.filters__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: .9375rem; }
.filters button {
	padding: 9px 18px;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--c-accent);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}
.result-count { margin: 0 0 16px; font-weight: 700; }
.entity__meta { display: block; margin-top: 2px; font-size: .8125rem; color: var(--c-text); }

/* 一覧ページの目次 */
.toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
}

/* トップ */
.hero {
	margin: 8px 0 40px;
	padding: 32px 24px;
	background: var(--c-bg-soft);
	border-radius: var(--radius);
}
.hero__title { margin: 0 0 8px; font-size: 1.625rem; line-height: 1.45; }
.hero__lead { margin: 0 0 20px; color: var(--c-muted); }
.hero .search-form { max-width: 560px; }
.hero .search-form input[type="search"] { padding: 12px 14px; }

.entry { margin-bottom: 40px; }
.entry h2 { margin: 0 0 4px; font-size: 1.25rem; }
.entry__lead { margin: 0 0 12px; color: var(--c-muted); font-size: .9375rem; }
.entry__more { margin: 12px 0 0; font-size: .9375rem; }
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.chips a {
	display: block;
	padding: 6px 14px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}
.chips a:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }

/* 固定ページ等 */
.prose { max-width: 720px; }

.nav-links { display: flex; gap: 12px; margin-top: 24px; }

/* フッター */
.site-footer {
	padding: 24px 0 32px;
	font-size: .8125rem;
	color: var(--c-muted);
	background: var(--c-bg-soft);
	border-top: 1px solid var(--c-line);
}
.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font-size: .875rem;
}
.site-footer__note { margin: 0 0 8px; }
.site-footer__copy { margin: 0; }

@media (max-width: 600px) {
	.page-head h1 { font-size: 1.4375rem; }
	.hero { padding: 20px 16px; }
	.hero__title { font-size: 1.3125rem; }
	.site-header .search-form { max-width: none; }
	table.info th { width: 7em; }
}