/*
Theme Name: ぐどにゅ〜
Description: 心が明るくなるニュースだけを集めるニュースサイト用テーマ。ランキング（WordPress Popular Posts）、Yoast SEO、Google AdSense の広告枠に対応。
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: good-news
*/

:root {
	--gn-bg: #fffaf2;
	--gn-card: #ffffff;
	--gn-text: #0f172a;
	--gn-text-sub: #374151;
	--gn-muted: #64748b;
	--gn-faint: #94a3b8;
	--gn-border: #f3e8da;
	--gn-line: #f8efe4;
	--gn-primary: #ea580c;
	--gn-primary-dark: #c2410c;
	--gn-primary-soft: #fff4e6;
	--gn-primary-text: #9a3412;
	--gn-chip: #fff1e0;
	--gn-yellow: #fbbf24;
	--gn-pink: #fb7185;
		--gn-radius: 16px;
	--gn-shadow: 0 1px 3px rgba(120, 53, 15, .06);
	--gn-max: 1152px;
}

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

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

body {
	margin: 0;
	background: var(--gn-bg);
	color: var(--gn-text);
	font-family: 'Inter', 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Sans', sans-serif;
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

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

.gn-container { width: 100%; max-width: var(--gn-max); margin: 0 auto; padding: 0 16px; }
.gn-site-main { flex: 1; }

/* ───────── ヘッダー ───────── */
.gn-header {
	position: sticky; top: 0; z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--gn-border);
	box-shadow: var(--gn-shadow);
}
.admin-bar .gn-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gn-header { top: 0; position: relative; } }

.gn-header__inner { height: 56px; display: flex; align-items: center; gap: 24px; }
.gn-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-weight: 700; font-size: 18px; color: var(--gn-text); }
.gn-logo img { height: 28px; width: auto; }
.gn-logo__mark { width: 28px; height: 28px; border-radius: 8px; background: var(--gn-primary); color: #fff; display: grid; place-items: center; }

.gn-nav { display: none; flex: 1; justify-content: center; min-width: 0; }
.gn-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.gn-nav a { font-size: 14px; font-weight: 500; color: var(--gn-text-sub); white-space: nowrap; transition: color .15s; }
.gn-nav a:hover, .gn-nav .current-menu-item > a, .gn-nav .current-cat > a { color: var(--gn-primary); }

.gn-search { display: none; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.gn-search__field { position: relative; }
.gn-search__field svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gn-faint); pointer-events: none; }
.gn-search input[type="search"] {
	padding: 6px 12px 6px 30px; font-size: 12px; width: 160px;
	border: 1px solid var(--gn-border); border-radius: 8px; background: var(--gn-bg); color: var(--gn-text-sub); outline: none;
}
.gn-search input[type="search"]:focus { border-color: var(--gn-primary); }
.gn-btn {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 6px 12px; border: 0; border-radius: 8px;
	background: var(--gn-primary); color: #fff; font-size: 12px; font-weight: 600;
	transition: opacity .15s;
}
.gn-btn:hover { opacity: .88; }

.gn-burger { margin-left: auto; padding: 8px; border: 0; background: none; color: var(--gn-text-sub); border-radius: 8px; }
.gn-mobile-menu { display: none; border-top: 1px solid var(--gn-border); background: #fff; padding: 16px; }
.gn-mobile-menu.is-open { display: block; }
.gn-mobile-menu .gn-search { display: flex; margin: 0 0 12px; }
.gn-mobile-menu .gn-search__field { flex: 1; }
.gn-mobile-menu .gn-search input[type="search"] { width: 100%; font-size: 14px; padding: 8px 12px 8px 30px; }
.gn-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.gn-mobile-menu li a { display: block; padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--gn-text-sub); }

@media (min-width: 768px) {
	.gn-nav, .gn-search { display: flex; }
	.gn-burger, .gn-mobile-menu, .gn-mobile-menu.is-open { display: none; }
}

/* ───────── ランキング ───────── */
.gn-ranking { background: #fff; border-bottom: 1px solid var(--gn-border); }
.gn-ranking__head { display: flex; align-items: center; gap: 4px; padding-top: 16px; }
.gn-ranking__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.gn-ranking__spacer { flex: 1; }
.gn-tab { display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; flex-shrink: 0; }
.gn-tab span {
	padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--gn-muted);
	white-space: nowrap; transition: background .2s, color .2s;
}
.gn-tab::after {
	content: ''; width: 0; height: 0; margin-top: 3px;
	border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid transparent;
}
.gn-tab[aria-selected="true"] span { background: var(--gn-primary); color: #fff; }
.gn-tab[aria-selected="true"]::after { border-top-color: var(--gn-primary); }
.gn-tab .gn-tab__pc { display: none; }

.gn-ranking__panel { padding: 20px 0 16px; overflow-x: auto; }
.gn-ranking__panel[hidden] { display: none; }
.gn-ranking__cards { display: flex; gap: 16px; min-width: max-content; }
.gn-rank-card {
	width: 180px; flex-shrink: 0; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--gn-line); border-radius: var(--gn-radius);
	overflow: hidden; box-shadow: var(--gn-shadow); transition: box-shadow .2s;
}
.gn-rank-card:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.gn-rank-card__img { position: relative; height: 112px; overflow: hidden; }
.gn-rank-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gn-rank-card:hover .gn-rank-card__img img { transform: scale(1.05); }
.gn-rank-badge {
	position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%;
	display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--gn-faint);
}
.gn-rank-badge.is-top { background: var(--gn-primary); }
.gn-rank-card__body { padding: 10px; flex: 1; display: flex; flex-direction: column; }
.gn-rank-card__title { margin: 0 0 auto; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--gn-text); }
.gn-rank-card:hover .gn-rank-card__title { color: var(--gn-primary-dark); }
.gn-rank-card__meta { margin: 8px 0 0; font-size: 12px; color: var(--gn-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-ranking__note { margin: 0 0 10px; font-size: 11px; color: var(--gn-faint); }
.gn-ranking__empty { text-align: center; font-size: 14px; color: var(--gn-faint); padding: 16px 0; }

@media (min-width: 768px) {
	.gn-ranking__head { justify-content: center; }
	.gn-ranking__spacer { display: block; }
	.gn-tab span { padding: 6px 16px; font-size: 14px; }
	.gn-tab::after { border-left-width: 6px; border-right-width: 6px; border-top-width: 6px; }
	.gn-tab .gn-tab__pc { display: inline; padding: 0; background: none; color: inherit; }
	.gn-tab .gn-tab__sp { display: none; }
}

/* ───────── 画像のない記事のプレースホルダー ───────── */
.gn-noimg {
	width: 100%; height: 100%; display: grid; place-items: center;
	background: linear-gradient(135deg, #ffedd5, #fef3c7 60%, #fce7f3); color: #fdba74;
}

/* ───────── 2カラムレイアウト ───────── */
.gn-layout { display: flex; gap: 32px; padding-top: 32px; padding-bottom: 40px; align-items: flex-start; }
.gn-layout__main { flex: 1; min-width: 0; }
.gn-sidebar { display: none; width: 300px; flex-shrink: 0; }
@media (min-width: 1024px) { .gn-sidebar { display: block; } }

.gn-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.gn-section-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--gn-text); }
.gn-section-sub { margin: 2px 0 0; font-size: 12px; color: var(--gn-faint); }
.gn-more { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--gn-primary); }

/* チップ（カテゴリ・タグ） */
.gn-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: none; }
.gn-chip {
	flex-shrink: 0; white-space: nowrap; padding: 6px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 500; background: #fff; color: var(--gn-text-sub); border: 1px solid var(--gn-border);
	transition: background .15s, color .15s;
}
.gn-chip.is-active { background: var(--gn-primary); color: #fff; border-color: var(--gn-primary); }
.gn-tag {
	display: inline-block; flex-shrink: 0; white-space: nowrap; padding: 4px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 500; background: var(--gn-chip); color: var(--gn-muted); transition: background .15s, color .15s;
}
.gn-tag:hover, .gn-chip:not(.is-active):hover { background: var(--gn-primary-soft); color: var(--gn-primary-dark); }
@media (min-width: 1024px) { .gn-only-sp { display: none; } }

/* ───────── 記事リスト ───────── */
.gn-list { background: #fff; border: 1px solid var(--gn-line); border-radius: var(--gn-radius); overflow: hidden; }
.gn-list__row { border-bottom: 1px solid var(--gn-line); }
.gn-list__row:last-child { border-bottom: 0; }
.gn-item {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
	padding: 16px; transition: background .15s;
}
.gn-item + .gn-item { border-top: 1px solid var(--gn-line); }
.gn-item:hover { background: var(--gn-primary-soft); }
.gn-item__body { flex: 1; min-width: 0; }
.gn-item__cat {
	display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 999px;
	font-size: 12px; font-weight: 500; background: var(--gn-primary-soft); color: var(--gn-primary-dark);
}
.gn-item__title {
	margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.65; color: var(--gn-text);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gn-item:hover .gn-item__title { color: var(--gn-primary-dark); }
.gn-item__meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gn-faint); }
.gn-item__source { margin: 2px 0 0; font-size: 12px; color: var(--gn-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-item__thumb { width: 80px; height: 64px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--gn-chip); }
.gn-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
	.gn-list__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gn-item + .gn-item { border-top: 0; border-left: 1px solid var(--gn-line); }
	.gn-item__title { font-size: 13px; }
	.gn-item__thumb { width: 96px; height: 72px; }
}

.gn-empty { background: #fff; border: 1px solid var(--gn-line); border-radius: var(--gn-radius); text-align: center; padding: 64px 16px; color: var(--gn-faint); font-size: 14px; }

/* ページネーション */
.gn-pagination { margin-top: 24px; }
.gn-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gn-pagination .page-numbers {
	min-width: 36px; height: 36px; padding: 0 10px; display: grid; place-items: center;
	border-radius: 8px; background: #fff; border: 1px solid var(--gn-border); font-size: 13px; color: var(--gn-text-sub);
}
.gn-pagination .page-numbers.current { background: var(--gn-primary); border-color: var(--gn-primary); color: #fff; }
.gn-pagination a.page-numbers:hover { border-color: var(--gn-primary); color: var(--gn-primary); }

/* ───────── サイドバー ───────── */
.gn-box { background: #fff; border: 1px solid var(--gn-line); border-radius: var(--gn-radius); padding: 20px; box-shadow: var(--gn-shadow); margin-bottom: 24px; }
.gn-box__title { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--gn-text); }
.gn-box ul { list-style: none; margin: 0; padding: 0; }
.gn-catlink { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; font-size: 12px; color: var(--gn-text-sub); transition: background .15s; }
.gn-catlink:hover { background: var(--gn-primary-soft); color: var(--gn-primary-dark); }
.gn-catlink svg { color: var(--gn-faint); }
.gn-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.gn-minirank li + li { border-top: 1px solid var(--gn-line); }
.gn-minirank a { display: flex; gap: 10px; padding: 10px 0; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--gn-text); }
.gn-minirank a:hover { color: var(--gn-primary-dark); }
.gn-minirank__no { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--gn-faint); }
.gn-minirank li:nth-child(-n+3) .gn-minirank__no { background: var(--gn-primary); }
.gn-sidebar__sticky { position: sticky; top: 80px; }

/* ───────── 記事詳細 ───────── */
.gn-article { background: #fff; border: 1px solid var(--gn-line); border-radius: var(--gn-radius); padding: 28px 20px 24px; }
@media (min-width: 768px) { .gn-article { padding: 36px 40px 32px; } }
.gn-breadcrumb { font-size: 12px; color: #9ca3af; margin-bottom: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-breadcrumb a:hover { text-decoration: underline; }
.gn-breadcrumb .gn-sep { margin: 0 6px; }
.gn-article__cat { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; background: var(--gn-primary-soft); color: var(--gn-primary-text); }
.gn-article__title { margin: 0 0 20px; font-size: 24px; font-weight: 700; line-height: 1.45; color: #111827; }
@media (min-width: 768px) { .gn-article__title { font-size: 28px; } }
.gn-article__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--gn-border); }
.gn-article__dates { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #9ca3af; }
.gn-article__dates span { display: inline-flex; align-items: center; gap: 4px; }
.gn-article__eyecatch { margin: 0 0 28px; }
.gn-article__eyecatch img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 8px; }
.gn-article__eyecatch figcaption { margin-top: 6px; font-size: 11px; color: var(--gn-faint); text-align: right; }

.gn-content { font-size: 16px; line-height: 1.95; color: var(--gn-text-sub); overflow-wrap: anywhere; }
.gn-content > * { margin-top: 0; margin-bottom: 1.4em; }
.gn-content h2 { margin: 2.2em 0 .9em; padding: 10px 14px; font-size: 20px; line-height: 1.5; color: var(--gn-text); background: var(--gn-primary-soft); border-left: 4px solid var(--gn-primary); border-radius: 0 6px 6px 0; }
.gn-content h3 { margin: 1.8em 0 .8em; padding-bottom: 6px; font-size: 17px; color: var(--gn-text); border-bottom: 2px solid var(--gn-line); }
.gn-content a { color: var(--gn-primary); text-decoration: underline; text-underline-offset: 3px; }
.gn-content ul, .gn-content ol { padding-left: 1.4em; }
.gn-content blockquote { margin-left: 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--gn-border); color: var(--gn-muted); }
.gn-content img { border-radius: 8px; }
.gn-content figure { margin-left: 0; margin-right: 0; }
.gn-content figcaption { font-size: 12px; color: var(--gn-faint); }
.gn-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gn-content th, .gn-content td { border: 1px solid var(--gn-border); padding: 8px 12px; text-align: left; }
.gn-content th { background: var(--gn-primary-soft); }

/* 出典ボックス */
.gn-source { margin: 28px 0 0; padding: 16px 18px; border: 1px solid var(--gn-border); border-radius: 10px; background: var(--gn-bg); font-size: 13px; }
.gn-source__label { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--gn-muted); }
.gn-source a { display: inline-flex; align-items: center; gap: 4px; color: var(--gn-primary); font-weight: 600; word-break: break-all; }
.gn-source__note { margin: 8px 0 0; font-size: 11px; color: var(--gn-faint); }

.gn-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--gn-border); }
.gn-article__share { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gn-border); font-size: 12px; color: #9ca3af; }

/* シェアボタン */
.gn-share { display: flex; align-items: center; gap: 6px; }
.gn-share a, .gn-share button {
	width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
	color: #fff; border: 0; transition: opacity .15s;
}
.gn-share a:hover, .gn-share button:hover { opacity: .8; }
.gn-share .is-x { background: #000; }
.gn-share .is-fb { background: #1877f2; }
.gn-share .is-line { background: #06c755; }
.gn-share .is-hatena { background: #00a4de; font-weight: 700; font-size: 13px; }
.gn-share .is-copy { background: #fff; border: 1px solid #d1d5db; color: #6b7280; }
.gn-share .is-copy.is-done { background: var(--gn-primary-soft); border-color: #fdba74; color: var(--gn-primary); }

/* 関連記事 */
.gn-related { margin-top: 24px; background: #fff; border: 1px solid var(--gn-line); border-radius: var(--gn-radius); padding: 24px 20px; }
.gn-related__title { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--gn-text-sub); }
.gn-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
@media (min-width: 768px) { .gn-related__grid { grid-template-columns: repeat(3, 1fr); } }
.gn-related__card { display: block; }
.gn-related__img { height: 104px; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.gn-related__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gn-related__card:hover .gn-related__img img { transform: scale(1.05); }
.gn-related__card p { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.5; color: #111827; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gn-related__card:hover p { text-decoration: underline; }
.gn-related__card time { display: block; margin-top: 4px; font-size: 11px; color: #9ca3af; }

/* 固定ページ */
.gn-page { max-width: 820px; margin: 32px auto 48px; }
.gn-page .gn-article__title { font-size: 24px; }

/* ───────── 広告枠 ───────── */
.gn-ad { margin: 24px auto; text-align: center; overflow: hidden; }
.gn-ad__label { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .08em; color: var(--gn-faint); }
.gn-ad ins { display: block; }
.gn-ad--header { margin: 16px auto; min-height: 100px; max-width: var(--gn-max); padding: 0 16px; }
.gn-ad--infeed { margin: 0; padding: 16px; border-bottom: 1px solid var(--gn-line); min-height: 120px; }
.gn-ad--sidebar_top, .gn-ad--sidebar_sticky { margin: 0 0 24px; min-height: 250px; }
.gn-ad--single_top, .gn-ad--single_incontent { min-height: 280px; }
.gn-ad--single_bottom { min-height: 280px; }
.gn-ad__ph {
	display: grid; place-items: center; min-height: inherit; height: 100%;
	border: 2px dashed #cbd5e1; border-radius: 8px; background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);
	color: var(--gn-muted); font-size: 12px; padding: 12px;
}
.gn-ad--header .gn-ad__ph { min-height: 90px; }
.gn-ad--infeed .gn-ad__ph { min-height: 100px; }
.gn-ad--sidebar_top .gn-ad__ph, .gn-ad--sidebar_sticky .gn-ad__ph { min-height: 250px; }
.gn-ad--single_top .gn-ad__ph, .gn-ad--single_incontent .gn-ad__ph, .gn-ad--single_bottom .gn-ad__ph { min-height: 250px; }

/* ───────── フッター ───────── */
.gn-footer { margin-top: auto; background: #fff; border-top: 1px solid var(--gn-border); }
.gn-footer__inner { padding-top: 32px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 24px; }
.gn-footer__desc { margin: 8px 0 0; font-size: 12px; color: var(--gn-faint); max-width: 280px; }
.gn-footer__cols { display: flex; gap: 40px; flex-wrap: wrap; }
.gn-footer__col p { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--gn-muted); }
.gn-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gn-footer__col a { font-size: 12px; color: var(--gn-faint); transition: color .15s; }
.gn-footer__col a:hover { color: var(--gn-primary); }
.gn-footer__copy { border-top: 1px solid var(--gn-line); padding: 16px; text-align: center; font-size: 12px; color: var(--gn-faint); }
@media (min-width: 768px) {
	.gn-footer__inner { flex-direction: row; justify-content: space-between; }
}

/* 404 */
.gn-404 { text-align: center; padding: 80px 16px; }
.gn-404 h1 { font-size: 22px; margin: 0 0 8px; }
.gn-404 p { color: var(--gn-muted); font-size: 14px; }

/* ═════════ エディトリアル調の仕上げ ═════════
   参考：Apple Newsroom / Stripe Newsroom / Prezly（Snøhetta）/ IDEAS FOR GOOD
   - 英字ラベル + 日本語見出しの 2 段構成
   - 影や塗りではなく細い線と余白で区切る
   - 「カテゴリ · 日付」の小さなメタ情報、画像が主役のカード
*/
:root {
	--gn-font-display: 'Outfit', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
	--gn-font-head: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
	--gn-hair: #efe6da;
}
body { background: var(--gn-bg); letter-spacing: .02em; }

/* ヘッダー */
.gn-header { border-bottom: 1px solid var(--gn-hair); box-shadow: none; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); }
.gn-header__inner { height: 64px; }
.gn-logo { font-family: var(--gn-font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.gn-logo__mark { width: 30px; height: 30px; border-radius: 50%; background: var(--gn-primary); }
.gn-nav ul { gap: 28px; }
.gn-nav a { font-family: var(--gn-font-head); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.gn-btn { border-radius: 999px; padding: 7px 16px; letter-spacing: .08em; }
.gn-search input[type="search"] { border-radius: 999px; background: #faf6f0; border-color: transparent; }

/* 英字ラベル（data-en 属性を見出しの上に表示） */
[data-en]::before {
	content: attr(data-en); display: block; margin-bottom: 4px;
	font-family: var(--gn-font-display); font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--gn-primary);
}

/* ランキング：下線タブ + 画像主役のカード */
.gn-ranking { background: #fff; border-bottom: 1px solid var(--gn-hair); }
.gn-ranking__head { padding-top: 28px; border-bottom: 1px solid var(--gn-hair); gap: 0; justify-content: flex-start; }
.gn-ranking__head[data-en]::before { margin: 0 32px 12px 0; align-self: center; font-size: 13px; }
.gn-ranking__tabs { gap: 0; }
.gn-tab::after { display: none; }
.gn-tab span { padding: 10px 16px 12px; border-radius: 0; font-family: var(--gn-font-head); font-weight: 700; letter-spacing: .04em; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--gn-faint); }
.gn-tab[aria-selected="true"] span { background: none; color: var(--gn-text); border-bottom-color: var(--gn-primary); }
.gn-tab:hover span { color: var(--gn-text); }
.gn-tab .gn-tab__pc, .gn-tab .gn-tab__sp { padding: 0; border: 0; margin: 0; }
.gn-ranking__note { margin: 0 0 14px; }
.gn-ranking__panel { padding: 24px 0 32px; }
.gn-ranking__cards { gap: 24px; }
.gn-rank-card { width: 200px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.gn-rank-card:hover { box-shadow: none; transform: none; }
.gn-rank-card__img { height: 125px; border-radius: 10px; overflow: hidden; }
.gn-rank-badge {
	top: auto; bottom: 0; left: 0; width: auto; height: auto; padding: 6px 12px 4px 10px; border: 0; border-radius: 0 10px 0 0;
	background: #fff !important; color: var(--gn-text); box-shadow: none;
	font-family: var(--gn-font-display); font-size: 22px; font-weight: 700; line-height: 1;
}
.gn-rank-badge.is-top { color: var(--gn-primary); }
.gn-rank-card__body { padding: 12px 2px 0; }
.gn-rank-card__title { font-family: var(--gn-font-head); font-size: 13px; font-weight: 700; line-height: 1.6; }
.gn-rank-card:hover .gn-rank-card__title { color: var(--gn-text); text-decoration: underline; text-decoration-color: var(--gn-primary); text-underline-offset: 4px; }
.gn-rank-card__meta { font-size: 11px; letter-spacing: .04em; }

/* セクション見出し */
.gn-section-head { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--gn-hair); }
.gn-section-title { font-family: var(--gn-font-head); font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.gn-section-sub { font-family: var(--gn-font-display); letter-spacing: .08em; }

/* 記事リスト：塗りの箱をやめて細い線で区切る */
.gn-list { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.gn-list__row { border-bottom: 1px solid var(--gn-hair); }
.gn-item { padding: 22px 4px; gap: 20px; }
.gn-item + .gn-item { border-color: var(--gn-hair); }
.gn-item:hover { background: transparent; }
.gn-item__cat {
	background: none !important; padding: 0; border-radius: 0; margin-bottom: 8px;
	font-family: var(--gn-font-head); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--c, var(--gn-primary)) !important;
}
.gn-item__cat::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.gn-item__title { font-family: var(--gn-font-head); font-weight: 700; font-size: 15px; line-height: 1.65; margin-bottom: 10px; transition: color .2s; }
.gn-item:hover .gn-item__title { color: var(--gn-text); text-decoration: underline; text-decoration-color: var(--gn-primary); text-underline-offset: 4px; }
.gn-item__meta, .gn-item__source { font-family: var(--gn-font-display); font-size: 11px; letter-spacing: .06em; }
.gn-item__meta svg { display: none; }
.gn-item__thumb { width: 120px; height: 80px; border-radius: 8px; }
.gn-item__thumb img { transition: transform .5s ease; }
.gn-item:hover .gn-item__thumb img { transform: scale(1.05); }
@media (min-width: 768px) {
	.gn-item { padding: 24px 20px 24px 0; }
	.gn-item + .gn-item { padding-left: 20px; padding-right: 0; }
	.gn-item__title { font-size: 14px; }
	.gn-item__thumb { width: 112px; height: 80px; }
}
.gn-ad--infeed { border-bottom: 1px solid var(--gn-hair); }

/* チップ・タグ */
.gn-chip { border-radius: 999px; font-family: var(--gn-font-head); font-weight: 700; letter-spacing: .04em; border-color: var(--gn-hair); }
.gn-chip.is-active { background: var(--gn-text); border-color: var(--gn-text); }
.gn-tag { background: transparent; border: 1px solid var(--gn-hair); font-family: var(--gn-font-display); letter-spacing: .04em; }
.gn-tag:hover { border-color: var(--gn-primary); background: transparent; color: var(--gn-primary); }

/* カテゴリ色 */
.gn-c { --c: var(--gn-primary); --cs: var(--gn-primary-soft); }
.gn-c--animals { --c: #c2410c; --cs: #fff1e6; }
.gn-c--science { --c: #0369a1; --cs: #eef7fc; }
.gn-c--local   { --c: #15803d; --cs: #effaf2; }
.gn-c--kids    { --c: #be185d; --cs: #fdf0f6; }
.gn-c--food    { --c: #b91c1c; --cs: #fdf1f1; }
.gn-c--people  { --c: #a16207; --cs: #fdf8e8; }
.gn-c--culture { --c: #6d28d9; --cs: #f4f1fd; }
.gn-catlink.gn-c::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); margin-right: 10px; flex-shrink: 0; }
.gn-catlink.gn-c span { flex: 1; }

/* サイドバー：箱をやめて線で区切る */
.gn-box { background: transparent; border: 0; border-top: 2px solid var(--gn-text); border-radius: 0; box-shadow: none; padding: 16px 0 8px; }
.gn-box__title { font-family: var(--gn-font-head); font-size: 15px; letter-spacing: .06em; }
.gn-catlink { padding: 11px 2px; border-radius: 0; border-bottom: 1px solid var(--gn-hair); font-family: var(--gn-font-head); font-weight: 700; font-size: 13px; }
.gn-catlink:hover { background: transparent; color: var(--gn-primary); }
.gn-minirank a { font-family: var(--gn-font-head); }
.gn-minirank__no { background: none !important; color: var(--gn-faint); font-family: var(--gn-font-display); font-size: 18px; font-weight: 700; width: 24px; }
.gn-minirank li:nth-child(-n+3) .gn-minirank__no { color: var(--gn-primary); }

/* 記事詳細 */
.gn-article { border: 0; box-shadow: none; border-radius: 0; background: #fff; }
@media (min-width: 768px) { .gn-article { padding: 48px 56px 40px; } }
.gn-article__cat { background: none !important; padding: 0; border-radius: 0; font-family: var(--gn-font-head); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--c, var(--gn-primary)) !important; }
.gn-article__cat::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.gn-article__title { font-family: var(--gn-font-head); font-weight: 700; font-size: 26px; line-height: 1.55; letter-spacing: .03em; }
@media (min-width: 768px) { .gn-article__title { font-size: 32px; } }
.gn-article__meta { border-bottom-color: var(--gn-hair); }
.gn-article__dates { font-family: var(--gn-font-display); letter-spacing: .06em; }
.gn-article__eyecatch img { border-radius: 4px; }
.gn-content { font-size: 16px; line-height: 2.05; letter-spacing: .04em; }
.gn-content h2 {
	margin-top: 2.6em; padding: 0 0 12px; background: none; border: 0; border-bottom: 1px solid var(--gn-hair); border-radius: 0;
	font-family: var(--gn-font-head); font-size: 21px; letter-spacing: .04em; position: relative;
}
.gn-content h2::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--gn-primary); }
.gn-content h2[data-hokkori] { background: none; }
.gn-content h2[data-hokkori]::after { background: #f472b6; }
.gn-content h2[data-hokkori]::before { content: 'HOKKORI POINT'; display: block; margin-bottom: 4px; font-family: var(--gn-font-display); font-size: 11px; font-weight: 600; letter-spacing: .22em; color: #db2777; }
.gn-content h3 { border-bottom: 0; font-family: var(--gn-font-head); }
.gn-content h3::before { content: ''; display: inline-block; width: 12px; height: 2px; background: var(--gn-primary); margin-right: 10px; vertical-align: middle; }
.gn-content blockquote { border-left: 2px solid var(--gn-primary); background: none; }
.gn-content mark { background: linear-gradient(transparent 65%, #fde68a 65%); color: inherit; }
.gn-source { border: 0; border-top: 1px solid var(--gn-hair); border-bottom: 0; border-radius: 0; background: none; padding: 18px 0; }
.gn-source__label { font-family: var(--gn-font-display); letter-spacing: .2em; color: var(--gn-primary); }
.gn-article__tags { border-top: 0; padding-top: 0; margin-top: 20px; }
.gn-article__share { border-top-color: var(--gn-hair); }
.gn-related { border: 0; box-shadow: none; border-radius: 0; background: #fff; }
@media (min-width: 768px) { .gn-related { padding: 32px 56px 40px; } }
.gn-related__title { font-family: var(--gn-font-head); font-size: 17px; color: var(--gn-text); }
.gn-related__img { border-radius: 8px; height: 120px; }
.gn-related__card p { font-family: var(--gn-font-head); font-size: 13px; }
.gn-related__card:hover p { text-decoration-color: var(--gn-primary); text-underline-offset: 4px; }
.gn-related__card time { font-family: var(--gn-font-display); letter-spacing: .06em; }

/* 固定ページ・パンくず */
.gn-breadcrumb { font-family: var(--gn-font-head); letter-spacing: .04em; }

/* ランキング・チップの横スクロールバーを隠す（スワイプ・トラックパッドでのスクロールは可能） */
.gn-ranking__panel, .gn-ranking__tabs, .gn-chips { scrollbar-width: none; -ms-overflow-style: none; }
.gn-ranking__panel::-webkit-scrollbar, .gn-ranking__tabs::-webkit-scrollbar, .gn-chips::-webkit-scrollbar { display: none; }

/* フッター：オレンジ */
.gn-footer { background: var(--gn-primary); border-top: 0; color: #fff; }
.gn-footer .gn-logo { color: #fff; }
.gn-footer__col p { font-family: var(--gn-font-display); letter-spacing: .2em; font-size: 11px; }
.gn-footer .gn-logo__mark { background: #fff; color: var(--gn-primary); }
.gn-footer__desc { color: rgba(255, 255, 255, .9); }
.gn-footer__col p { color: #fff; font-weight: 700; }
.gn-footer__col a { color: rgba(255, 255, 255, .92); }
.gn-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gn-footer__copy { background: var(--gn-primary-dark); border-top: 0; color: rgba(255, 255, 255, .9); }
.gn-footer__follow { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; transition: background .15s, color .15s; }
.gn-footer__follow:hover { background: #fff; color: var(--gn-primary); }
.gn-game-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 16px 8px 8px; border-radius: 12px; background: var(--gn-primary); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.35; box-shadow: 0 3px 0 var(--gn-primary-text); transition: transform .15s; }
.gn-game-link:hover { transform: translateY(-2px); }
.gn-game-link small { display: block; font-size: 10px; font-weight: 600; color: #fde68a; letter-spacing: .08em; }
.gn-game-link__mascot { flex-shrink: 0; padding: 5px 4px; border-radius: 8px; background: var(--gn-primary-soft); }
/* フッターはオレンジ地なので、一段濃いオレンジで区別する */
.gn-footer .gn-game-link { background: var(--gn-primary-dark); box-shadow: 0 3px 0 rgba(124, 45, 18, .45); }
.gn-sidebar__game { margin-bottom: 24px; }
.gn-sidebar__game .gn-game-link { display: flex; margin-top: 0; padding: 12px 16px; }
.gn-content .gn-game-list { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 12px; }
.gn-content .gn-game-list .gn-game-link { display: flex; margin-top: 0; padding: 12px 18px 12px 12px; font-size: 15px; color: #fff; text-decoration: none; }

/* ページネーション */
.gn-pagination .page-numbers { border-radius: 999px; font-family: var(--gn-font-display); border-color: var(--gn-hair); }
.gn-pagination .page-numbers.current { background: var(--gn-text); border-color: var(--gn-text); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* Shared header/footer brand image. */
.gn-header .custom-logo-link,
.gn-footer .custom-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; max-width: 100%; }
.gn-header .custom-logo,
.gn-footer .custom-logo { display: block; width: 168px; height: auto; }
.gn-footer .custom-logo { filter: brightness(0) invert(1); }
@media (max-width: 767px) {
	.gn-header .custom-logo { width: 144px; }
}

/* ───────── お問い合わせフォーム ───────── */
.gn-contact { margin-top: 28px; }
.gn-contact__lead { margin: 0 0 16px; font-size: 15px; color: var(--gn-text-sub); }

.gn-steps, .gn-content .gn-steps { display: flex; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.gn-steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border-radius: 8px; background: var(--gn-bg); border: 1px solid var(--gn-border); font-size: 13px; font-weight: 600; color: var(--gn-faint); }
.gn-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--gn-border); color: var(--gn-muted); }
.gn-steps li.is-done { color: var(--gn-primary-text); }
.gn-steps li.is-done span { background: var(--gn-primary-soft); color: var(--gn-primary-dark); }
.gn-steps li.is-current { background: var(--gn-primary-soft); border-color: #fdba74; color: var(--gn-primary-dark); }
.gn-steps li.is-current span { background: var(--gn-primary); color: #fff; }

.gn-form__alert { margin: 0 0 20px; padding: 12px 16px; border-radius: 10px; background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; font-size: 14px; }
.gn-form__row { margin-bottom: 22px; }
.gn-form__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--gn-text); }
.gn-form__req, .gn-form__opt { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.gn-form__req { background: var(--gn-primary); color: #fff; }
.gn-form__opt { background: var(--gn-chip); color: var(--gn-muted); }
.gn-form input[type="text"], .gn-form input[type="email"], .gn-form input[type="url"], .gn-form select, .gn-form textarea {
	width: 100%; padding: 11px 14px; border: 1px solid var(--gn-border); border-radius: 10px;
	background: var(--gn-bg); color: var(--gn-text); font: inherit; font-size: 16px; line-height: 1.6; outline: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.gn-form textarea { min-height: 200px; resize: vertical; }
.gn-form input:focus, .gn-form select:focus, .gn-form textarea:focus { border-color: var(--gn-primary); background: #fff; box-shadow: 0 0 0 3px rgba(234, 88, 12, .15); }
.gn-form [aria-invalid="true"] { border-color: #f43f5e; background: #fff; }
.gn-form__help { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--gn-muted); }
.gn-form__error { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #e11d48; }
.gn-form__check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gn-text-sub); cursor: pointer; }
.gn-form__check input { width: 18px; height: 18px; accent-color: var(--gn-primary); }
.gn-form__check a { color: var(--gn-primary); text-decoration: underline; text-underline-offset: 3px; }
.gn-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gn-form__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.gn-form.is-sending .gn-btn { opacity: .6; pointer-events: none; }

.gn-btn--primary, .gn-btn--ghost { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; padding: 13px 28px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.gn-btn--primary { background: var(--gn-primary); color: #fff; }
.gn-btn--primary:hover { background: var(--gn-primary-dark); color: #fff; }
.gn-btn--ghost { background: #fff; border-color: var(--gn-border); color: var(--gn-text-sub); }
.gn-btn--ghost:hover { border-color: var(--gn-primary); color: var(--gn-primary); }
.gn-content .gn-btn { text-decoration: none; }
.gn-content .gn-btn--primary { color: #fff; }
.gn-content .gn-btn--ghost { color: var(--gn-text-sub); }
.gn-content .gn-btn--ghost:hover { color: var(--gn-primary); }

.gn-confirm { margin: 0; border: 1px solid var(--gn-border); border-radius: 12px; overflow: hidden; }
.gn-confirm dt { padding: 10px 16px; background: var(--gn-primary-soft); font-size: 13px; font-weight: 700; color: var(--gn-primary-text); }
.gn-confirm dd { margin: 0; padding: 12px 16px 16px; font-size: 15px; line-height: 1.8; color: var(--gn-text); overflow-wrap: anywhere; }
.gn-confirm dd + dt { border-top: 1px solid var(--gn-border); }

.gn-done { text-align: center; padding: 12px 0 8px; }
.gn-done__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--gn-primary-soft); color: var(--gn-primary); }
.gn-done__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--gn-text); }
.gn-done__receipt { margin: 0 0 16px; font-size: 14px; color: var(--gn-muted); }
.gn-done__receipt strong { color: var(--gn-text); letter-spacing: .04em; }
.gn-done p { font-size: 15px; }
.gn-done__note { margin: 0 0 24px; font-size: 13px !important; color: var(--gn-muted); }

@media (max-width: 767px) {
	.gn-steps li { font-size: 12px; }
	.gn-form__actions { flex-direction: column-reverse; }
	.gn-form__actions .gn-btn { width: 100%; }
}

/* 目次（コラム） */
.gn-content .gn-toc { margin: 2em 0; padding: 18px 22px; border: 1px solid var(--gn-hair); border-radius: 4px; background: var(--gn-bg); }
.gn-content .gn-toc > * { margin-bottom: 0; }
.gn-content .gn-toc__title { margin: 0 0 8px; font-family: var(--gn-font-head); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--gn-text); }
.gn-content .gn-toc ol { margin: 0; padding-left: 1.4em; font-size: 15px; line-height: 1.8; }
.gn-content .gn-toc li { margin: 2px 0; }
.gn-content .gn-toc a { color: var(--gn-text-sub); text-decoration: none; }
.gn-content .gn-toc a:hover { color: var(--gn-primary); text-decoration: underline; }
.gn-content h2[id] { scroll-margin-top: 72px; }
html { scroll-behavior: smooth; }