@charset "UTF-8";

/* お知らせ用スタイル */

:root {
	--field: #37474f;
	--panel: #ffffff;
	--ink: #1f2937;
	--muted: #6b7280;
	--line: #d8dee5;
	--accent: #b91c1c;
	--pinned: #fff8e1;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background: #eef1f5;
	color: var(--ink);
	font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	line-height: 1.8;
}

.wrap {
	max-width: 800px;
	margin: 0 auto;
	padding: 1rem;
}

.site-header {
	padding: 1rem;
	margin: 0 0 1rem;
	background: var(--field);
	border-radius: 10px;
	color: #ffffff;
	text-align: center;
}

.site-header h1 {
	margin: 0;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
}

.site-header h1 a {
	color: #ffffff;
	text-decoration: none;
}

.site-header__sub {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	color: #cfd8dc;
}

.site-footer {
	padding: 0.5rem 0 2rem;
	font-size: 0.85rem;
	text-align: center;
}

.site-footer__note {
	margin: 0 0 0.5rem;
	color: var(--muted);
	text-align: left;
}

.panel {
	background: var(--panel);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin: 0 0 1rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.panel h2 {
	margin: 0 0 0.75rem;
	padding-bottom: 0.35rem;
	font-size: 1.15rem;
	border-bottom: 2px solid var(--field);
}

.lead {
	margin: 0 0 0.5rem;
}

.note {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--muted);
}

code {
	padding: 0 0.25rem;
	background: #f3f4f6;
	border-radius: 3px;
	font-size: 0.9em;
}

/* ---- お知らせ一覧 ---- */

.notice-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.notice {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--line);
}

.notice:first-child {
	padding-top: 0;
}

.notice:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* 固定のお知らせ。新しい順の並びから外れているので、見た目でも分かるようにする */
.notice--pinned {
	margin: 0 -0.75rem 0.5rem;
	padding: 0.75rem;
	background: var(--pinned);
	border: 1px solid #ffe082;
	border-radius: 8px;
}

.notice__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
}

.notice__date {
	font-variant-numeric: tabular-nums;
}

.notice__pin {
	color: #b45309;
	font-weight: bold;
}

.notice__title {
	margin: 0.1rem 0 0.3rem;
	font-size: 1.05rem;
}

/* 見出しのリンクは自分自身への目印。ふだんは本文と同じ見た目にしておく */
.notice__title a {
	color: inherit;
	text-decoration: none;
}

.notice__title a:hover,
.notice__title a:focus {
	text-decoration: underline;
}

.notice__body {
	margin: 0 0 0.4rem;
}

.notice__link {
	margin: 0.3rem 0 0;
	font-size: 0.9rem;
}

/* ---- 種別の札 ---- */

.tag {
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: #eceff1;
	color: #37474f;
	font-size: 0.75rem;
	white-space: nowrap;
}

.tag--update {
	background: #e3f2fd;
	color: #1565c0;
}

.tag--maintenance {
	background: #fff3e0;
	color: #ef6c00;
}

.tag--trouble {
	background: #ffebee;
	color: var(--accent);
}