/* ============================================================
   お知らせ一覧・詳細（テーマ内専用）
   header.css / subpage.css の後に読ませる前提
   ============================================================ */

/* 下層トークン（モック style.css の :root 代替） */
body.totop-news-page {
	--teal: #2cb8b7;
	--teal-ink: #17817f;
	--teal-light: #a6d9d8;
	--teal-pale: #ecf7f7;
	--ink: #363332;
	--ink-soft: #5c5856;
	--gray: #6e6a67;
	--line: #e3dfd7;
	--bg: #f7f5f1;
	--serif: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
	--head: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	--logo: "Jost", "Futura", "Inter", sans-serif;
	--sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--header-h: 72px;
	--totop-teal: var(--teal);
	--totop-teal-ink: var(--teal-ink);
	--totop-teal-light: var(--teal-light);
	--totop-line: var(--line);
	--totop-ink: var(--ink);
	--totop-ink-soft: var(--ink-soft);
	--totop-noise-cta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
	background: var(--bg);
	font-family: var(--sans);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.02em;
}

body.totop-news-page .totop-news .container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

body.totop-news-page .totop-news .sp-only {
	display: none;
}

@media (max-width: 767px) {
	body.totop-news-page .totop-news .sp-only {
		display: inline;
	}
}

/* ---------- 一覧 ---------- */
body.totop-news-page .news-list {
	max-width: 760px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

body.totop-news-page .news-list li {
	display: grid;
	grid-template-columns: 84px auto 1fr;
	gap: 20px;
	align-items: baseline;
	padding: 20px 8px;
	border-bottom: 1px solid var(--line);
}

body.totop-news-page .news-list time {
	font-family: var(--logo);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}

body.totop-news-page .news-cat {
	justify-self: start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--teal-ink);
	border: 1px solid var(--teal-light);
	border-radius: 999px;
	padding: 3px 12px;
	white-space: nowrap;
}

body.totop-news-page .news-title {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
}

body.totop-news-page .news-title a {
	color: inherit;
	text-decoration: none;
}

body.totop-news-page .news-title a:hover {
	color: var(--teal-ink);
}

@media (max-width: 767px) {
	body.totop-news-page .news-list li {
		grid-template-columns: auto auto;
		gap: 6px 14px;
		padding: 15px 4px;
	}

	body.totop-news-page .news-title {
		grid-column: 1 / -1;
		font-size: 14px;
	}
}

/* ---------- 詳細ヒーロー内の日付・タグ ---------- */
body.totop-news-page .news-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 14px;
}

body.totop-news-page .news-meta time {
	font-family: var(--logo);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}

body.totop-news-page .news-hero h1 {
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.5;
}

/* ---------- 記事本文 ---------- */
body.totop-news-page .news-body {
	max-width: 760px;
	font-size: 15.5px;
	line-height: 2;
}

body.totop-news-page .news-body p {
	margin: 0 0 1.6em;
}

body.totop-news-page .news-body h2 {
	position: relative;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.6;
	margin: 2.4em 0 1em;
	padding-left: 22px;
}

body.totop-news-page .news-body h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--teal);
}

body.totop-news-page .news-body h3 {
	font-size: 17px;
	font-weight: 700;
	margin: 2em 0 0.8em;
}

body.totop-news-page .news-body ul,
body.totop-news-page .news-body ol {
	margin: 0 0 1.6em;
	padding-left: 1.5em;
}

body.totop-news-page .news-body ul {
	list-style: disc;
}

body.totop-news-page .news-body ol {
	list-style: decimal;
}

body.totop-news-page .news-body li {
	margin-bottom: 0.4em;
}

body.totop-news-page .news-body a {
	color: var(--teal-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.totop-news-page .news-body a:hover {
	opacity: 0.75;
}

body.totop-news-page .news-body img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
	margin: 0.4em 0 1.6em;
}

body.totop-news-page .news-body blockquote {
	margin: 0 0 1.6em;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 2px solid var(--teal-light);
	color: var(--ink-soft);
}

body.totop-news-page .news-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.6em;
	font-size: 14.5px;
}

body.totop-news-page .news-body th,
body.totop-news-page .news-body td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

body.totop-news-page .news-body th {
	font-weight: 700;
	color: var(--ink-soft);
}

/* ---------- ページャー・戻る ---------- */
body.totop-news-page .news-pager {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	max-width: 760px;
	margin-top: 36px;
}

body.totop-news-page .news-pager a {
	color: var(--teal-ink);
	font-size: 14px;
}

body.totop-news-page .news-pager a:hover {
	opacity: 0.75;
}

body.totop-news-page .news-back {
	margin-top: 56px;
}

body.totop-news-page .news-empty {
	color: var(--ink-soft);
}

body.totop-news-page .btn-text {
	display: inline-block;
	position: relative;
	font-weight: 500;
	color: var(--teal-ink);
	padding: 4px 2px;
	cursor: pointer;
	text-decoration: none;
}

body.totop-news-page .btn-text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s var(--ease);
}

body.totop-news-page .btn-text:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ---------- CTA（フロントと同系統・ダークバンド） ---------- */
body.totop-news-page .totop-news .cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	background:
		var(--totop-noise-cta),
		linear-gradient(160deg, #27433e 0%, #1d3531 100%);
	color: #fff;
	padding: 104px 0;
}

body.totop-news-page .totop-news .cta-copy {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(28px, 4.2vw, 44px);
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin: 0 0 20px;
	color: #fff;
	font-feature-settings: "palt";
	word-break: auto-phrase;
}

body.totop-news-page .totop-news .cta-text {
	margin: 0 0 36px;
	font-size: 14.5px;
	line-height: 1.9;
	opacity: 0.78;
	color: #fff;
}

body.totop-news-page .totop-news .btn-primary {
	display: inline-block;
	background: var(--teal);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	padding: 15px 40px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
	border: 0;
}

body.totop-news-page .totop-news .btn-primary.large {
	padding: 18px 56px;
	font-size: 16px;
}

body.totop-news-page .totop-news .btn-primary:hover {
	background: #35c6c5;
	color: #fff;
}

@media (max-width: 767px) {
	body.totop-news-page .news-body {
		font-size: 15px;
	}

	body.totop-news-page .news-body h2 {
		font-size: 19px;
	}

	body.totop-news-page .totop-news .cta {
		padding: 64px 0;
	}
}