/*
Theme Name: PLAYRELAY
Theme URI: https://playrelaymedia.com
Author: hyodorantaro
Description: PLAYRELAY（playrelaymedia.com）専用テーマ。暗色のグリッドレイアウトで、トップページは「特大の1本＋サブ＋TOPICS＋一覧」の4段構成。記事ページは目次・出典・関連記事・人気記事を備える。
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: playrelay
*/

/* ============================================================
   PLAYRELAY ─ 暗色・グリッドレイアウト
   記事の写真が主役になるよう、背景を暗くして
   コントラストで画像を浮かせる。角は小さめの矩形で統一。
   ============================================================ */
:root {
	--ink:    #e8eaf2;
	--sub:    #8a90a6;
	--line:   #262b3d;
	--bg:     #0d0f18;
	--card:   #161a28;
	--card2:  #1c2132;
	--mint:   #22d3a7;
	--pink:   #f0426e;
	--wrap:   1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--bg); color: var(--ink);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	font-size: 16px; line-height: 1.8; overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0 0 .6em; line-height: 1.4; }
p { margin: 0 0 1em; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.g-skip { position: absolute; left: -9999px; }
.g-skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--mint); color: #04160f; padding: 10px 16px; }
.g-wrap { display: block; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.t-right { text-align: right; }

/* ---------- ヘッダー ---------- */
.g-header {
	background: #0a0c14; border-bottom: 1px solid var(--line);
	position: sticky; top: 0; z-index: 30;
}
.g-header-inner { display: flex; align-items: center; gap: 22px; padding: 10px 22px; }
.g-brand {
	display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto;
	min-width: 0;
}
.g-brand-logo {
	display: block;
	height: 52px;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	object-fit: contain;
	aspect-ratio: 420 / 112;
}
.g-brand-mark { width: 38px; height: 38px; }
.g-brand-name { display: block; font-size: 20px; font-weight: 800; letter-spacing: .06em; }
.g-brand-sub {
	display: block;
	max-width: 14em;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .02em;
	color: var(--sub);
	white-space: normal;
}
.g-nav { flex: 1; min-width: 0; }
.g-nav ul { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.g-nav ul::-webkit-scrollbar { display: none; }
.g-nav a {
	display: block; white-space: nowrap; padding: 8px 14px; font-size: 13.5px; font-weight: 700;
	color: var(--sub); border-radius: 4px;
}
.g-nav a:hover { color: var(--ink); background: var(--card); }
.g-nav a.is-on { color: #05100c; background: var(--c, var(--mint)); }

/* カテゴリ名が長いとき、中幅では詰めて1行に収める */
@media (max-width: 1100px) and (min-width: 861px) {
	.g-header-inner { gap: 12px; }
	.g-brand-logo { height: 44px; }
	.g-brand-sub { display: none; }
	.g-nav a { padding: 7px 8px; font-size: 12px; }
	.c-search-input { width: 140px; }
}

.c-search { display: flex; }
.c-search-input {
	background: var(--card); border: 1px solid var(--line); border-right: none;
	color: var(--ink); padding: 7px 12px; width: 170px; border-radius: 4px 0 0 4px;
}
.c-search-input::placeholder { color: #5c6377; }
.c-search-btn {
	background: var(--mint); color: #04160f; border: 1px solid var(--mint);
	border-radius: 0 4px 4px 0; padding: 8px 12px; cursor: pointer; display: flex;
}

/* ---------- パンくず ---------- */
.c-crumbs { font-size: 12px; color: var(--sub); padding-top: 14px; }
.c-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.c-crumbs li + li::before { content: "›"; margin-right: 6px; color: #3a4056; }
.c-crumbs a:hover { color: var(--mint); }


/* ---------- セクション見出し ---------- */
.g-sec-title {
	font-size: 15px; letter-spacing: .18em; font-weight: 800; color: var(--sub);
	margin: 0 0 18px; display: flex; align-items: center; gap: 14px;
}
.g-sec-title span { flex: none; }
.g-sec-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- バッジ ---------- */
.c-badge {
	display: inline-block; background: var(--badge-color, var(--mint)); color: #05100c;
	font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 3px; letter-spacing: .04em;
}
.c-new { display: inline-block; background: var(--pink); color: #fff; font-size: 10px; font-weight: 900; padding: 3px 8px; border-radius: 3px; }

/* ---------- 一覧の外枠 ----------
   以前ここにあった .g-grid / .g-card 一式は、どのテンプレートからも
   使われていなかった（一覧は .g-rows / .g-row、トップは .g-lead 系）。
   使われるクラスだけを残している。 */
.g-latest { padding: 46px 0 64px; }
/* 記事ページの見出しの上で、カテゴリとNEWを横に並べる帯 */
.g-card-top { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 9px; }
.c-thumb-fallback {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	background: linear-gradient(140deg, var(--badge-color, #2b3352) 0%, #10131f 100%);
}
.c-thumb-fallback span { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.75); }

.c-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.c-chip {
	font-size: 11px; padding: 2px 8px; border-radius: 3px;
	border: 1px solid var(--line); color: var(--sub); background: #11141f;
}
.c-chip:hover { border-color: var(--mint); color: var(--mint); }
.c-chip-count { margin-left: 4px; opacity: .6; }

/* ---------- 一覧ページ ---------- */
.g-archive { padding: 30px 0 64px; }
.g-arc-head { margin-bottom: 26px; }
.g-arc-head h1 { font-size: 26px; font-weight: 900; }
.g-arc-head p { color: var(--sub); font-size: 14px; margin: 0; }
.c-count { font-size: 12px; color: var(--sub); margin-top: 8px; }
.g-empty {
	background: var(--card); border: 1px dashed var(--line); border-radius: 4px;
	padding: 44px 20px; text-align: center; color: var(--sub);
}
.g-pager { margin-top: 34px; }
.g-pager .page-numbers {
	display: inline-block; min-width: 38px; text-align: center; padding: 8px 12px;
	margin: 0 4px 6px 0; background: var(--card); border: 1px solid var(--line);
	border-radius: 3px; font-size: 13.5px; color: var(--sub);
}
.g-pager .page-numbers:hover { border-color: var(--mint); color: var(--mint); }
.g-pager .page-numbers.current { background: var(--mint); border-color: var(--mint); color: #04160f; font-weight: 800; }

/* ---------- 記事ページ ---------- */
.g-single-wrap { padding: 26px 0 64px; }
.g-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.g-single { min-width: 0; }
.g-single-head { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 24px; }
.g-single-head h1 { font-size: 31px; font-weight: 900; line-height: 1.4; margin: 12px 0 12px; }
.g-single-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--sub); margin-bottom: 10px; }
.g-single-thumb { margin: 0 0 26px; border-radius: 4px; overflow: hidden; }

.g-content {
	overflow-wrap: anywhere; font-size: 16px; line-height: 1.95; }
.g-content > * + * { margin-top: 1.1em; }
.g-content h2 {
	font-size: 21px; font-weight: 800; margin: 2em 0 .8em; padding: 0 0 10px 0;
	border-bottom: 2px solid var(--mint);
}
.g-content h3 { font-size: 17.5px; margin: 1.7em 0 .6em; color: #cdd3e6; }
.g-content ul li { list-style: disc; margin-left: 1.4em; margin-bottom: .4em; }
.g-content ol li { list-style: decimal; margin-left: 1.5em; margin-bottom: .4em; }
.g-content a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.g-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.g-content th, .g-content td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.g-content th { background: var(--card2); color: #b9c0d6; width: 32%; }
.g-content blockquote { border-left: 3px solid var(--pink); background: var(--card); padding: 12px 18px; color: var(--sub); margin: 1.4em 0; }
.g-content img { border-radius: 4px; }
.g-content code { background: #0a0c14; border: 1px solid var(--line); padding: 2px 6px; border-radius: 3px; font-size: .92em; }

.c-post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.c-source, .c-disclaimer {
	margin-top: 26px; padding: 15px 18px; border-radius: 4px;
	background: var(--card); border: 1px solid var(--line); font-size: 13px; color: var(--sub);
}
.c-source-title, .c-disclaimer-title {
	font-size: 11px; font-weight: 900; letter-spacing: .18em; color: var(--mint); margin: 0 0 7px;
}
.c-source a { color: var(--mint); text-decoration: underline; }
.c-source-note { margin: 8px 0 0; font-size: 11.5px; }
.c-source p:last-child, .c-disclaimer p:last-child { margin-bottom: 0; }

.c-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.c-share-label { font-size: 11px; font-weight: 900; letter-spacing: .16em; color: var(--sub); }
.c-share-btn { font-size: 12.5px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 3px; color: var(--sub); }
.c-share-btn:hover { background: var(--mint); border-color: var(--mint); color: #04160f; }

.g-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; font-size: 13px; }
.g-postnav a { display: block; padding: 13px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.g-postnav a:hover { border-color: var(--mint); color: var(--mint); }

.c-related { margin-top: 42px; }
.c-block-title { font-size: 15px; letter-spacing: .16em; color: var(--sub); font-weight: 800; margin-bottom: 16px; }
.c-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.c-related-item { background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.c-related-item:hover { border-color: var(--mint); }
.c-related-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.c-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-related-body { display: block; padding: 10px 12px 13px; }
.c-related-cat { display: block; font-size: 10.5px; color: var(--mint); font-weight: 800; margin-bottom: 4px; }
.c-related-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.5; }

.c-comments { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ---------- サイドバー（記事ページのみ） ---------- */
.g-side { display: flex; flex-direction: column; gap: 18px; }
.c-widget { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; }
.c-widget-title { font-size: 11.5px; letter-spacing: .18em; font-weight: 900; color: var(--mint); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.c-rank li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--line); font-size: 13px; }
.c-rank li:last-child { border-bottom: none; }
.c-rank-num { flex: none; width: 20px; height: 20px; border-radius: 3px; background: var(--mint); color: #04160f; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.c-rank a:hover { color: var(--mint); }
.c-cat-list li { padding: 8px 0; border-bottom: 1px dotted var(--line); }
.c-cat-list a { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; }
.c-cat-desc { display: block; font-size: 11px; color: var(--sub); }


/* ---------- レスポンシブ ---------- */
@media (max-width: 1080px) {
		.g-single-grid { grid-template-columns: 1fr; }
		.c-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	/* ヘッダーの折返しは 860px 側で制御する（ここでは触らない） */
	.c-search-input { width: 130px; }
	.c-related-grid, .g-postnav { grid-template-columns: 1fr; }
	.g-single-head h1 { font-size: 24px; }
	}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---------- 固定ページ・404（構造はコア共通、装飾はサイトごと） ---------- */
.c-page { padding: 34px 0 64px; }
.c-page-inner {
	max-width: 860px; margin: 0 auto; padding: 30px 34px 40px;
	background: var(--card); border: 1px solid var(--line); border-radius: 4px;
}
.c-page-title { font-size: 27px; font-weight: 900; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--mint); }
.c-page-body {
	overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.95; }
.c-page-body h2 { font-size: 19px; margin: 1.8em 0 .6em; color: var(--mint); }
.c-page-body ul li { list-style: disc; margin-left: 1.4em; margin-bottom: .35em; }
.c-page-body a { color: var(--mint); text-decoration: underline; }
.c-404 { text-align: center; }
.c-404-code { font-size: 70px; font-weight: 900; color: var(--mint); margin: 0; line-height: 1; }
.c-404 .c-search { justify-content: center; margin: 20px 0; }
.c-404-home { color: var(--mint); text-decoration: underline; font-weight: 700; }

/* ---------- 縦画面（スマホ）向けの調整 ---------- */
@media (max-width: 480px) {
	body { font-size: 15px; line-height: 1.75; }
	.g-wrap { padding: 0 14px; }

	.g-latest { padding: 30px 0 44px; }
	.g-sec-title { font-size: 13px; margin-bottom: 14px; }

	.g-single-wrap { padding: 18px 0 44px; }
	.g-single-head h1 { font-size: 21px; }
	.g-content { font-size: 15px; }
	.g-content h2 { font-size: 18px; }
	/* 本文中の表は横スクロールさせる（列を潰すと対応関係が読めなくなるため） */
	.g-content table { display: block; overflow-x: auto; white-space: nowrap; }

		
	.c-page-inner { padding: 20px 16px 26px; }
	.c-page-title { font-size: 21px; }
		}


/* ============================================================
   PLAYRELAY だけの要素
   ============================================================ */

/* 見出しティッカー（ヘッダー直下を1行で流れる） */
.g-ticker {
	display: flex; align-items: stretch; gap: 0;
	background: #05070f; border-bottom: 1px solid var(--line); overflow: hidden;
}
.g-ticker-label {
	flex: none; display: flex; align-items: center; padding: 0 16px;
	background: var(--mint); color: #04160f; font-size: 11px; font-weight: 900; letter-spacing: .18em;
}
.g-ticker-view { flex: 1; min-width: 0; overflow: hidden; }
.g-ticker-track {
	display: flex; width: max-content; align-items: center;
	animation: g-tick var(--tick-duration, 90s) linear infinite;
}
@keyframes g-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.g-ticker-view:hover .g-ticker-track { animation-play-state: paused; }
.g-ticker-track a {
	display: flex; align-items: center; gap: 10px; white-space: nowrap;
	padding: 9px 26px 9px 0; font-size: 13px; color: #9aa2b8;
}
.g-ticker-track a:hover { color: var(--ink); }

/* 数字は等幅にして、日付や件数が縦に揃うようにする */

@media (max-width: 760px) {
	.g-ticker-label { padding: 0 11px; font-size: 10px; }
	.g-ticker-track a { font-size: 12px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) { .g-ticker-track { animation: none; } }

/* 中幅ではキャッチを隠してナビの余地を確保する */
@media (max-width: 1200px) {
	.g-brand-sub { display: none; }
}

/* ---------- おすすめの記事（フッター上） ----------
   以前は同じ内容を2回並べて横に流し続ける帯だった。
   読みたい記事が通り過ぎてしまい、押すには流れを待つ必要があった。
   いまは4本を並べて止めている。 */
.c-flow { background: #05070f; border-top: 1px solid var(--line); padding: 34px 0 38px; }
.c-flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.c-flow-card {
	position: relative; background: var(--card); border: 1px solid var(--line);
	border-radius: 6px; overflow: hidden;
}
.c-flow-card:hover { border-color: var(--mint); }
.c-flow-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0c14; }
.c-flow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-flow-body { padding: 12px 14px 15px; }
.c-flow-top { margin-bottom: 8px; }
.c-flow-top a { position: relative; z-index: 2; }
.c-flow-card-title {
	font-size: 14.5px; font-weight: 800; line-height: 1.55; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.c-flow-card:hover .c-flow-card-title { color: var(--mint); }
@media (max-width: 1000px) { .c-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.c-flow { padding: 24px 0 26px; }
	.c-flow-grid { gap: 12px; }
	.c-flow-card-title { font-size: 13px; }
}

/* ---------- フッター（サイト名と著作権のみ） ---------- */
.g-footer { background: var(--footer-bg, #14161c); color: #b9bec9; padding: 26px 0; margin-top: 0; }
.g-footer a { color: #b9bec9; }
.g-footer a:hover { color: #fff; }
.g-footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.g-footer-brand { display: flex; flex-direction: column; gap: 4px; }
.g-footer-name { font-size: 15px; font-weight: 900; letter-spacing: .14em; color: #fff; margin: 0; }
.g-footer-copy { font-size: 12px; margin: 0; }
.g-totop { margin-left: auto; font-size: 12px; }
@media (max-width: 480px) {
	.g-footer { padding: 20px 0; }
	.g-footer-name { font-size: 14px; }
	.g-totop { margin-left: 0; }
}

:root { --footer-bg: #05070f; }

/* ---------- ヘッダー右側（検索＋メニュー） ---------- */
.g-header-tools { display: flex; align-items: center; gap: 10px; flex: none; }

/* ハンバーガーメニュー
   details/summary で作っているので JavaScript が無くても開閉する。
   PCではヘッダーのカテゴリナビとフッターに導線があるので出さない。 */
.g-menu { display: none; position: relative; }
.g-menu-btn {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
	width: 40px; height: 38px; border: 1px solid var(--line); border-radius: 4px; background: var(--card);
}
.g-menu-btn::-webkit-details-marker { display: none; }
.g-menu-btn:hover { border-color: var(--mint); }
.g-menu-bars { display: block; width: 18px; }
.g-menu-bars i { display: block; height: 2px; background: var(--ink); border-radius: 2px; margin: 3.5px 0; }
.g-menu[open] .g-menu-bars i:nth-child(2) { background: var(--mint); }
.g-menu-panel {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
	width: 300px; max-height: 70vh; overflow-y: auto;
	background: var(--card); border: 1px solid var(--line); border-radius: 6px;
	box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 16px 18px 18px;
}
.g-menu-title { font-size: 10.5px; font-weight: 900; letter-spacing: .2em; color: var(--sub); margin: 0 0 8px; }
.g-menu-title + * { margin-bottom: 18px; }
.g-menu-list a {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 8px 10px; border-left: 3px solid var(--c, var(--mint)); background: #11141f;
	margin-bottom: 4px; border-radius: 0 4px 4px 0; font-size: 14px; font-weight: 700;
}
.g-menu-list a:hover { background: var(--card2); color: var(--c, var(--mint)); }
.g-menu-list a.is-on { background: var(--card2); color: var(--c, var(--mint)); font-weight: 800; }
.g-menu-list a.is-on .g-menu-count { color: var(--c, var(--mint)); }
.g-menu-count { font-size: 11px; color: var(--sub); font-weight: 500; }
.g-menu-pages a { border-left-color: var(--line); font-weight: 500; font-size: 13px; }

/* ティッカーのカテゴリ名 */
.g-ticker-cat {
	font-size: 10.5px; font-weight: 800; color: var(--mint);
	border: 1px solid rgba(34,211,167,.4); border-radius: 3px; padding: 1px 7px;
}


/* ---------- よく読まれています（サムネイル入り） ---------- */
.c-rank li { align-items: flex-start; }
.c-rank-link { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; }
.c-rank-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: #0a0c14; }
.c-rank-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-rank-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #2b3352, #10131f); }
.c-rank-title {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 12.5px; line-height: 1.5;
}

@media (max-width: 760px) {
	.g-menu-panel { width: min(88vw, 300px); }
}

/* ---------- スマホのヘッダー ----------
   ロゴとハンバーガーだけを1行に保つ。
   カテゴリ・検索はメニュー内へ。長いカテゴリ名でも折り返せるようにする。 */
.g-menu-search { display: none; margin-bottom: 16px; }
.g-menu-search .c-search, .g-menu-search .c-search-input { width: 100%; }

@media (max-width: 860px) {
	.g-wrap.g-header-inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 14px;
	}
	.g-nav { display: none; }
	.g-header-search { display: none; }
	.g-header-tools { flex: 0 0 auto; margin-left: auto; }
	.g-menu { display: block; flex: 0 0 auto; }
	.g-menu-search { display: block; }
	.g-brand { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 56px); }
	.g-brand-logo {
		height: 42px;
		width: auto;
		max-width: min(240px, 100%);
		min-width: 132px;
		flex: 0 0 auto;
	}
	.g-brand-sub { display: none; }
	.g-menu-btn { width: 44px; height: 42px; }
	.g-menu-list a {
		align-items: flex-start;
		white-space: normal;
		line-height: 1.35;
		gap: 10px;
	}
	.g-menu-name { overflow-wrap: anywhere; }
	.g-menu-count { flex: none; padding-top: 1px; }
}
@media (max-width: 480px) {
	.g-wrap.g-header-inner { padding: 8px 14px; gap: 8px; }
	.g-brand-logo { height: 38px; min-width: 118px; }
	.g-menu-btn { width: 42px; height: 40px; }
	.g-ticker-label { padding: 0 10px; font-size: 9.5px; letter-spacing: .1em; }
	.g-ticker-track a { font-size: 12px; padding-right: 18px; gap: 7px; }
	.g-ticker-cat { font-size: 9.5px; padding: 1px 5px; }
	.g-menu-panel {
		width: min(92vw, 320px);
		max-height: min(76vh, calc(100dvh - 72px));
		right: -2px;
	}
	.g-footer-logo img { height: 42px; width: auto; max-width: 100%; }
}

/* ---------- 記事内の写真の扱い ----------
   小さな画像を横幅いっぱいに引き伸ばすとぼやけるので、
   元の大きさを上限にして中央に置く。 */
.g-content img { margin-left: auto; margin-right: auto; width: auto; max-width: 100%; height: auto; }
.g-content figure { text-align: center; }
.g-content figure img { margin: 0 auto; }
.g-single-thumb { background: var(--card, #f2f2f2); text-align: center; }
.g-single-thumb img { margin: 0 auto; }


/* ============================================================
   PLAYRELAY の個性 ─ ネオンの光
   暗い地なので、輪郭を光らせて画面を締める。
   写真の下側にだけ暗い膜をかけ、見出しの白が沈まないようにしている。
   ============================================================ */
body {
	background-image: radial-gradient(1100px 380px at 50% -60px, rgba(34,211,167,.13), transparent 72%);
	background-repeat: no-repeat;
}

/* 見出しの左に、ミントからピンクへ流れる棒を立てる */
.g-sec-title span { position: relative; padding-left: 16px; }
.g-sec-title span::before {
	content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 5px;
	background: linear-gradient(180deg, var(--mint), var(--pink));
}

/* バッジは写真の上に重なることがあるので、影で少し浮かせる */
.c-badge { box-shadow: 0 2px 10px rgba(0,0,0,.45); }

/* ============================================================
   仕上げの層 ─ 文字組み・動き・操作の手がかり
   サイトごとの色と形はそのままに、読み心地と操作感だけを底上げする。
   全サイトで同じ内容が入っている（生成元は _generator/newskins.py）。
   ============================================================ */
:root {
	--ease: cubic-bezier(.22, .68, .2, 1);
	--dur:  .26s;
}

/* ---------- 日本語の字組み ----------
   「」（）などの約物は左右に余白を持っているため、そのままだと
   見出しが間延びする。palt で詰めて、行頭・行末のそろいを良くする。 */
h1, h2, h3,
.c-badge, .c-new, .c-chip, .c-widget-title,
.c-rank-title, .c-related-title,
.g-content, .c-page-body {
	font-feature-settings: "palt" 1;
}
/* 見出しは行ごとの長さがそろうように折り返す */
h1, h2, h3 { text-wrap: balance; }
/* 本文は最後の1行が1文字だけ残らないようにする */
p, li, figcaption, .c-rank-title, .c-related-title { text-wrap: pretty; }
/* 日付・件数・順位の数字は幅をそろえて、縦に並べたときにずれないようにする */
time, .c-count, .c-rank-num, .c-cat-count, .c-chip-count, .g-pager .page-numbers {
	font-variant-numeric: tabular-nums;
}

/* ---------- 動き ----------
   速さと曲線を1か所にまとめ、サイト間でばらつかないようにする。 */
a, button, input, .c-chip, .c-badge {
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
main article {
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
		border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
main article:hover { transform: translateY(-3px); }
main article img { transition: transform .55s var(--ease); }

/* 画面に入ってきた記事を、下から少しだけ持ち上げて出す。
   transform ではなく translate を使うのは、ホバーの持ち上げと衝突させないため。 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		main article {
			animation: pol-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
		@keyframes pol-rise {
			from { opacity: 0; translate: 0 16px; }
			to   { opacity: 1; translate: none; }
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	main article, main article img, a, button { transition: none; }
	main article:hover { transform: none; }
}

/* ---------- 操作の手がかり ---------- */
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
::selection { background: var(--mint); color: #fff; }
.c-search-input:focus {
	outline: none; border-color: var(--mint); position: relative; z-index: 1;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 20%, transparent);
}
.c-search-btn:hover { filter: brightness(1.08); }

/* ---------- 写真 ----------
   白地の商品写真は輪郭が消えるので、内側に細い線を1本回す。 */
.c-rank-thumb, .c-related-thumb { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }

/* ---------- 読み物としての細部 ---------- */
.g-content a {
	text-decoration-thickness: 1px; text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, var(--mint) 45%, transparent);
	transition: text-decoration-color var(--dur) var(--ease);
}
.g-content a:hover { text-decoration-color: var(--mint); }
.g-content h2, .g-content h3 { letter-spacing: .005em; }
.g-content > p:first-of-type { font-size: 1.04em; }
.c-widget + .c-widget { margin-top: 0; }
.c-rank li { align-items: center; }
.c-rank-num { flex: none; }

/* ---------- ページ送り ----------
   指で押す前提で、当たり判定を大きく取る。 */
.g-pager .page-numbers {
	min-height: 42px; min-width: 42px;
	display: inline-flex; align-items: center; justify-content: center;
}
.g-pager .page-numbers:not(.current):hover { transform: translateY(-1px); }

@media (max-width: 560px) {
	.g-pager .page-numbers { min-height: 44px; min-width: 44px; }
	main article:hover { transform: none; }
}

/* ---------- 部品の形（このサイト固有） ---------- */
.c-badge {
	background: transparent; color: var(--ink); border-radius: 0; padding: 1px 0 1px 10px;
	border-left: 4px solid var(--badge-color, var(--mint)); letter-spacing: .06em;
}
.c-new { background: transparent; color: var(--sub); border-radius: 0; padding: 1px 0 1px 8px; border-left: 3px solid var(--sub); }

/* ============================================================
   トップページの編成 ─ 段ごとに役割と大きさを変える
   同じ大きさのカードを並べると、どれを先に読めばよいか分からない。
   1段目は特大の1本＋小さい2本（左右非対称）、
   2段目は写真だけ、3段目は文字を読ませる横長にして、
   下へ行くほど情報量が減る流れをつくっている。
   ============================================================ */

/* ---------- 1段目：編成 ---------- */
.g-stage { padding: 26px 0 34px; border-bottom: 1px solid var(--line); }
.g-stage-grid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 30px; align-items: start; }

.g-lead { position: relative; }
.g-lead-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--card2); border-radius: 6px; }
.g-lead-media img { width: 100%; height: 100%; object-fit: cover; }
.g-lead-body { padding-top: 18px; }
.g-lead-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.g-lead-top a { position: relative; z-index: 1; }
.g-lead-title {
	font-size: 34px; font-weight: 900; line-height: 1.36; letter-spacing: -.012em; margin: 0 0 14px;
}
/* カード全体を押せるようにする。
   タイトルのリンクから透明な板（::after）を出してカードを覆う。
   これで写真・余白・抜粋のどこを押しても記事に飛べる。
   カテゴリのバッジだけは別のリンクなので、板より上に出しておく。
   （見出しに position を付けると板が見出しの大きさになってしまうため、
     ここでは付けない。基準になるのは position: relative を持つ article。） */
.g-lead-title a::after,
.g-sub-title a::after,
.g-row-title a::after,
.g-topic-title a::after,
.c-flow-card-title a::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
}

.g-lead-top,
.g-sub-top,
.g-row-top,
.g-topic-top { position: relative; z-index: 2; }
.g-lead-ex { font-size: 14.5px; line-height: 1.95; color: var(--sub); margin: 0 0 14px; max-width: 58ch; }
.g-lead-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.g-lead-date { font-size: 12px; color: var(--sub); }
.g-lead:hover .g-lead-title { color: var(--mint); }

.g-subs { display: flex; flex-direction: column; gap: 20px; }
.g-sub { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; align-items: start; }
.g-sub-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card2); border-radius: 4px; }
.g-sub-media img { width: 100%; height: 100%; object-fit: cover; }
.g-sub-top { margin-bottom: 7px; }
.g-sub-top a { position: relative; z-index: 1; }
.g-sub-title { font-size: 15px; font-weight: 800; line-height: 1.6; margin: 0 0 10px; }
.g-sub:hover .g-sub-title { color: var(--mint); }

/* ---------- 2段目：TOPICS（写真だけ） ---------- */
.g-topics { padding: 34px 0 38px; background: #0a0c14; }
.g-sec-title-alt span::before { background: linear-gradient(180deg, var(--pink), var(--mint)); }
.g-topics-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-topic { position: relative; }
.g-topic-media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--card2); border-radius: 6px; }
.g-topic-media img { width: 100%; height: 100%; object-fit: cover; }
.g-topic-title {
	font-size: 14.5px; font-weight: 800; line-height: 1.6; margin: 12px 0 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g-topic:hover .g-topic-title { color: var(--pink); }

/* ---------- 3段目：一覧（文字を読ませる横長） ---------- */
.g-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
.g-row { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.g-row-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card2); border-radius: 4px; }
.g-row-media img { width: 100%; height: 100%; object-fit: cover; }
.g-row-body { min-width: 0; }
.g-row-top { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 8px; }
.g-row-top a { position: relative; z-index: 1; }
.g-row-title { font-size: 16px; font-weight: 800; line-height: 1.6; margin: 0 0 8px; }
.g-row-ex { font-size: 13px; color: var(--sub); line-height: 1.85; margin: 0 0 10px; }
.g-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g-row-date { font-size: 11.5px; color: var(--sub); }
.g-row:hover .g-row-title { color: var(--mint); }

@media (max-width: 1000px) {
	.g-stage-grid { grid-template-columns: 1fr; gap: 26px; }
	.g-subs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 18px;
		flex-direction: unset;
	}
	.g-sub { grid-template-columns: 1fr; }
	.g-sub + .g-sub { border-top: none; padding-top: 0; }
	.g-sub-media { aspect-ratio: 16 / 10; }
	.g-lead-title { font-size: 28px; }
}
@media (max-width: 760px) {
	.g-rows { grid-template-columns: 1fr; }
	.g-topics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.g-topic-title { font-size: 12.5px; }
}
@media (max-width: 560px) {
	.g-stage { padding: 16px 0 24px; }
	.g-lead-title { font-size: 23px; line-height: 1.42; }
	.g-lead-ex { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.g-subs {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 14px;
	}
	.g-sub { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
	.g-sub-media { aspect-ratio: 4 / 3; }
	.g-topics { padding: 22px 0 24px; }
	.g-topics-row { gap: 8px; }
	.g-row { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
	.g-row-ex { display: none; }
	.g-rows { gap: 16px; }
}


/* ============================================================
   追加した部品
   目次・広告枠・一覧のサイドバー・フッター。
   ここより上の層で決めた色（--mint / --card / --line）と
   余白の取り方をそのまま使い、新しい値は増やしていない。
   ============================================================ */

/* ---------- 目次 ----------
   本文の最初の段落の直後に入る。PHP側（inc/content.php）が
   HTMLとして書き出しているので、JavaScript が動かなくても出る。
   スマホでは畳めるようにして、本文までの距離を短くしている。 */
.c-toc {
	background: var(--card); border: 1px solid var(--line);
	border-left: 3px solid var(--mint); border-radius: 4px;
	padding: 15px 20px 16px; margin: 1.8em 0;
}
.c-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c-toc-title {
	font-size: 11.5px; font-weight: 900; letter-spacing: .2em; color: var(--mint); margin: 0;
}
.c-toc-toggle {
	background: none; border: 1px solid var(--line); color: var(--sub);
	font-size: 11.5px; padding: 3px 12px; border-radius: 3px; cursor: pointer;
}
.c-toc-toggle:hover { border-color: var(--mint); color: var(--mint); }
/* 目次は本文（.g-content）の中に入るため、本文用の ol の指定
   （list-style: decimal と左インデント）がそのまま効いてしまう。
   ブラウザの番号と、下で作る番号バッジの二重表示になるので打ち消す。
   .g-content ol li より強い指定にしておく必要がある。 */
.c-toc-list { margin: 11px 0 0; counter-reset: toc; }
.g-content .c-toc-list li,
.c-toc-list li { list-style: none; margin-left: 0; margin-bottom: 0; }
/* 既定は開いた状態。閉じたときだけ class が付く。 */
.c-toc.is-collapsed .c-toc-list { display: none; }
.c-toc-list li { position: relative; padding: 5px 0 5px 26px; font-size: 14px; line-height: 1.6; }
.c-toc-list li::before {
	counter-increment: toc; content: counter(toc);
	position: absolute; left: 0; top: 7px;
	width: 18px; height: 18px; border-radius: 3px;
	background: var(--card2); color: var(--sub);
	font-size: 10.5px; font-weight: 900;
	display: flex; align-items: center; justify-content: center;
}
.g-content .c-toc-list a,
.c-toc-list a { color: #c3c9dc; text-decoration: none; }
.g-content .c-toc-list a:hover,
.c-toc-list a:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.g-content .c-toc-list a.is-current,
.c-toc-list a.is-current { color: var(--mint); font-weight: 700; }
.c-toc-list li:has(a.is-current)::before { background: var(--mint); color: #04160f; }

/* ---------- 広告枠 ----------
   最低の高さを決めてある。広告が後から届いて本文を押し下げると、
   読んでいる位置がずれて誤タップの原因になる（CLS）。 */
.c-ad { margin: 2.2em 0; text-align: center; }
.c-ad-label {
	display: block; font-size: 10px; letter-spacing: .2em;
	color: #566; margin-bottom: 6px;
}
.c-ad-inline { min-height: 280px; }
.c-ad-bottom { min-height: 280px; margin-top: 34px; }

/* ---------- 一覧ページ（サイドバー付き） ---------- */
.g-archive-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.g-archive-main { min-width: 0; }
@media (max-width: 1080px) {
	.g-archive-grid { grid-template-columns: 1fr; gap: 28px; }
}
.g-arc-lead { color: #b3bacd; font-size: 14.5px; line-height: 1.85; margin: 0 0 6px; max-width: 62ch; }
.g-arc-sub { color: var(--sub); font-size: 13px; margin: 0; }
.g-nav-inline { margin-top: 18px; }
.g-nav-inline ul { flex-wrap: wrap; overflow: visible; }
.g-nav-count { margin-left: 6px; font-size: 11px; opacity: .6; font-weight: 500; }

/* ---------- 追従するサイドバー ----------
   記事が長いと、読み進めるうちに横が空白だけになる。
   ここを追従させると、読み終える前に次の記事へ移れる。
   中身が画面より高いと、下の項目が画面の外に出て押せなくなる。
   高さは画面内に収め、はみ出した分だけ中をスクロールする。 */
.g-side-sticky {
	position: sticky; top: 80px; display: flex; flex-direction: column; gap: 18px;
	max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
	overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.g-side-sticky::-webkit-scrollbar { width: 8px; }
.g-side-sticky::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ---------- 署名 ---------- */
.g-byline a { color: #a7aec4; border-bottom: 1px solid var(--line); }
.g-byline a:hover { color: var(--mint); border-bottom-color: currentColor; }
.g-single-meta .is-updated { color: var(--mint); }

/* ---------- 関連記事の見出し行 ---------- */
.c-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.c-block-head .c-block-title { margin-bottom: 16px; }
.c-block-more { font-size: 12.5px; font-weight: 700; color: var(--mint); }
.c-block-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 前後の記事 ---------- */
.g-postnav a { display: flex; flex-direction: column; gap: 5px; height: 100%; }
.g-postnav-label { font-size: 10.5px; font-weight: 900; letter-spacing: .16em; color: var(--sub); }
.g-postnav-title { font-size: 13.5px; font-weight: 700; line-height: 1.55; }
.g-postnav-next { text-align: right; }
.g-postnav-next a { align-items: flex-end; }

/* ---------- トップ：右の縦積み ----------
   左の特大記事のほうが縦に長く、右側に画面の高さぶんの空白ができていた。
   本数を増やし、余りを行間に分け、区切り線を入れて「並べた一覧」に見せる。 */
.g-stage-grid { align-items: stretch; }
.g-subs { justify-content: space-between; gap: 16px; }
.g-sub + .g-sub { border-top: 1px solid var(--line); padding-top: 16px; }
.g-sub { grid-template-columns: 124px minmax(0, 1fr); }
.g-sub-title {
	margin-bottom: 6px;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.g-sub-date { font-size: 11.5px; color: var(--sub); }

/* ---------- トップ：TOPICS（4本） ---------- */
.g-topics-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-topic-body { padding-top: 11px; }
.g-topic-top { margin-bottom: 7px; }
.g-topic-title { margin: 0; }

/* ---------- 見出しティッカーの停止ボタン ----------
   動き続ける文字が読みづらい場合に止められるようにする。 */
.c-marquee-toggle {
	flex: none; width: 34px; border: none; border-left: 1px solid var(--line);
	background: #05070f; color: var(--sub); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.c-marquee-toggle:hover { color: var(--mint); }
.c-marquee-play {
	display: block; width: 9px; height: 10px;
	border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.c-marquee-toggle[aria-pressed="true"] .c-marquee-play {
	width: 0; height: 0; border: none;
	border-left: 9px solid currentColor;
	border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.g-ticker.is-paused .g-ticker-track { animation-play-state: paused; }

/* ---------- フッター ---------- */
.g-footer-inner { display: block; }
.g-footer-brand { display: block; margin-bottom: 20px; }
.g-footer-logo {
	display: inline-flex; align-items: center; line-height: 0;
}
.g-footer-logo img {
	display: block; height: 52px; width: auto; max-width: min(280px, 100%);
	flex: 0 0 auto; object-fit: contain; aspect-ratio: 420 / 112;
}
.g-footer-lead { font-size: 12.5px; color: #8d93a3; margin: 10px 0 0; max-width: 56ch; line-height: 1.75; }
.g-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; max-width: 620px; }
.g-footer-h { font-size: 10.5px; font-weight: 900; letter-spacing: .2em; color: #6d7488; margin: 0 0 9px; }
.g-footer-col ul { display: flex; flex-direction: column; gap: 7px; }
.g-footer-col a { font-size: 13px; }
.g-footer-bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
}
.g-footer-copy { font-size: 12px; margin: 0; }
.g-totop { margin-left: 0; }

/* ---------- ページ送り（リスト形式） ----------
   paginate_links を type=list で出しているので、外側の ul にも
   .page-numbers が付く。ボタンの見た目が二重にならないよう外す。 */
.g-pager ul.page-numbers {
	display: flex; flex-wrap: wrap; gap: 6px;
	background: none; border: none; padding: 0; margin: 0;
	min-width: 0; min-height: 0;
}
.g-pager ul.page-numbers > li { margin: 0; }
.g-pager .page-numbers.dots { border-color: transparent; background: none; }

/* ---------- 記事の写真 ----------
   高さを抑える。縦に長い画像が1枚入るだけで画面が写真で埋まり、
   次の文章まで何度もスクロールすることになる。 */
.g-single-thumb img { max-height: 520px; }
.g-content img { max-height: 620px; }

/* ---------- 狭い画面 ---------- */
@media (max-width: 1080px) {
	.g-topics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
	.g-subs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: flex-start;
		gap: 16px 18px;
	}
	.g-sub + .g-sub { border-top: none; padding-top: 0; }
	.g-sub { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.c-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.g-subs {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 14px;
	}
	.g-sub { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
	.g-sub + .g-sub { border-top: 1px solid var(--line); padding-top: 14px; }
	.g-topics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.g-topic-title { font-size: 13px; }
	.c-related-grid { grid-template-columns: 1fr; }
	.c-toc { padding: 13px 15px 14px; margin: 1.5em 0; }
	.c-toc-list li { font-size: 13.5px; }
	.g-single-thumb img, .g-content img { max-height: 420px; }
	.c-ad-inline, .c-ad-bottom { min-height: 250px; }
}

/* スマホでは目次を畳んだ状態から始める（本文を先に見せる）。
   畳む処理は JavaScript 側で行う。JSが動かない環境では
   開いたまま表示されるので、内容が読めなくなることはない。 */

/* ---------- コメント欄 ----------
   新しい記事では既定で閉じているが、個別に開いたときに
   素の見た目にならないよう最低限だけ整えておく。 */
.c-comment-list { margin-top: 8px; }
.c-comment-list li { padding: 14px 0; border-bottom: 1px dotted var(--line); font-size: 14px; }
.c-comment-list .children { margin-left: 22px; }
.c-comments input[type="text"], .c-comments input[type="email"], .c-comments input[type="url"], .c-comments textarea {
	width: 100%; background: var(--card); border: 1px solid var(--line);
	color: var(--ink); padding: 9px 12px; border-radius: 4px;
}
.c-comments .submit {
	background: var(--mint); color: #04160f; border: none;
	padding: 10px 24px; border-radius: 4px; font-weight: 800; cursor: pointer;
}
.c-chip-tag { color: #9aa2b8; }