/*
Theme Name: OUTSIDEKIT
Theme URI: https://outsidekit.com
Author: hyodorantaro
Description: OUTSIDEKIT（outsidekit.com）専用テーマ。アースカラーの丸みのあるレイアウトに、季節から記事を辿るシーズン切り替えを組み合わせている。
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: outsidekit
*/

/* ============================================================
   ソトネル ─ アースカラー・角丸
   紙のガイドブックのような読み心地を狙って、
   背景を生成り色にし、見出しは明朝体、角は大きめに丸める。
   ============================================================ */
:root {
	--ink:   #2e2a22;
	--sub:   #7d7565;
	--line:  #ddd5c4;
	--bg:    #f6f2e8;
	--card:  #fffdf8;
	--green: #5f7a3a;
	--brown: #c26a2e;
	--dark:  #2e2a22;
	--wrap:  1160px;
	--mincho: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

*, *::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.9; 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 .5em; line-height: 1.45; font-family: var(--mincho); }
p { margin: 0 0 1em; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.o-skip { position: absolute; left: -9999px; }
.o-skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 8px; }
.o-wrap { display: block; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.t-right { text-align: right; }

/* ---------- ヘッダー ---------- */
.o-header { background: var(--card); border-bottom: 1px solid var(--line); }
.o-header-inner {
	display: flex; align-items: center; gap: 16px 20px;
	padding-top: 14px; padding-bottom: 14px;
}
.o-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.o-brand-logo { display: block; margin: 0; line-height: 0; }
.o-brand-logo img { display: block; width: 200px; height: auto; }
.o-brand-mark { width: 44px; height: 44px; }
.o-brand-name { display: block; font-family: var(--mincho); font-size: 24px; font-weight: 700; letter-spacing: .1em; margin: 0; }
.o-brand h1.o-brand-name { font-size: 24px; font-weight: 700; line-height: inherit; }
.o-brand-sub { display: block; font-size: 11.5px; color: var(--sub); }

/* カテゴリ（横並びの丸いタグ） */
.o-nav { min-width: 0; flex: 1; }
.o-nav ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.o-nav ul::-webkit-scrollbar { display: none; }
.o-nav a {
	display: block; white-space: nowrap; padding: 6px 15px; border-radius: 999px;
	font-size: 13.5px; font-weight: 700; color: var(--sub); border: 1px solid var(--line);
	background: var(--bg);
}
.o-nav a:hover { border-color: var(--green); color: var(--green); background: #fff; }
.o-nav a.is-on { background: var(--green); border-color: var(--green); color: #fff; }

.o-header-search { margin-left: auto; flex: none; }
.o-picker { display: none; }

.c-search { display: flex; }
.c-search-input {
	background: var(--bg); border: 1px solid var(--line); border-right: none;
	border-radius: 999px 0 0 999px; padding: 8px 16px; width: 165px; font-size: 14px; color: var(--ink);
}
.c-search-btn { background: var(--green); border: 1px solid var(--green); color: #fff; border-radius: 0 999px 999px 0; padding: 9px 15px; cursor: pointer; display: flex; }

.c-crumbs { font-size: 12px; color: var(--sub); padding-top: 16px; }
.c-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.c-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--line); }
.c-crumbs a:hover { color: var(--green); }

/* ---------- ヒーロー ---------- */
.o-hero { padding: 30px 0 0; }
.o-hero-card {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
	background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
}
.o-hero-card:hover { box-shadow: 0 14px 34px rgba(60,50,30,.10); }
.o-hero-media { display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.o-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.o-hero-noimg, .o-hero-media .c-thumb-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(140deg, #c9d2b4, #8a9a6a); }
.o-hero-body { display: flex; flex-direction: column; justify-content: center; padding: 34px 36px; }
.o-hero-cat { align-self: flex-start; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.o-hero-title { display: block; font-family: var(--mincho); font-size: 27px; font-weight: 700; line-height: 1.5; margin-bottom: 12px; }
.o-hero-ex { display: block; font-size: 13.5px; color: var(--sub); }


/* ---------- 見出し ---------- */
.o-sec { font-family: var(--mincho); font-size: 21px; font-weight: 700; letter-spacing: .1em; margin: 0 0 20px; padding-left: 16px; position: relative; }
.o-sec::before { content: ""; position: absolute; left: 0; top: .32em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---------- 2列カード ---------- */
.o-latest { padding: 32px 0 56px; }
.o-archive { padding: 24px 0 56px; }
.o-arc-head { margin-bottom: 20px; }
.o-arc-head h1 { font-size: 24px; }
.o-arc-head p { color: var(--sub); font-size: 13.5px; margin: 0; }
.c-count { font-size: 12px; color: var(--sub); margin-top: 8px; }

.o-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.o-card > a { display: block; }

.o-card-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #e6e0d0; }
.o-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.o-card-body { display: block; padding: 12px 14px 14px; }
.o-card-top { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.o-card-title { display: block; font-family: var(--mincho); font-size: 15px; font-weight: 700; line-height: 1.45; margin-bottom: 6px; }

.o-card-ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--sub); margin-bottom: 8px; line-height: 1.55; }
.o-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--sub); padding-top: 8px; border-top: 1px dotted var(--line); }

.c-badge { display: inline-block; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 11px; border-radius: 999px; }
.c-new { display: inline-block; background: var(--brown); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.c-thumb-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(140deg, var(--badge-color, #8a9a6a), #4d5a34); }
.c-thumb-fallback span { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.c-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.c-chip { font-size: 11px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--sub); background: var(--bg); }
.c-chip:hover { border-color: var(--green); color: var(--green); }
.c-chip-count { margin-left: 4px; opacity: .6; }
.o-empty { background: var(--card); border: 1px dashed var(--line); border-radius: 20px; padding: 44px 20px; text-align: center; color: var(--sub); }

.o-pager { margin-top: 34px; }
.o-pager .page-numbers { display: inline-block; min-width: 40px; text-align: center; padding: 8px 13px; margin: 0 4px 6px 0; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
.o-pager .page-numbers:hover { border-color: var(--green); color: var(--green); }
.o-pager .page-numbers.current { background: var(--green); border-color: var(--green); color: #fff; font-weight: 800; }

/* ---------- 記事ページ ---------- */
.o-single-wrap { padding: 28px 0 66px; }
.o-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; }
.o-single { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 34px 40px 42px; overflow-wrap: anywhere; }
.o-single-head { margin-bottom: 24px; }
.o-single-head h1 { font-size: 30px; line-height: 1.5; margin: 12px 0 12px; }
.o-single-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--sub); margin-bottom: 12px; }
.o-single-thumb { margin: 0 0 28px; border-radius: 18px; overflow: hidden; }
.o-safety {
	background: #fdf3e6; border: 1px solid #e8cfa8; border-radius: 14px;
	padding: 13px 18px; font-size: 13px; color: #7a5520; margin: 0 0 24px;
}

.o-content {
	overflow-wrap: anywhere; font-size: 16px; line-height: 2; }
.o-content > * + * { margin-top: 1.1em; }
.o-content h2 { font-size: 21px; margin: 2em 0 .7em; padding: 0 0 10px 0; border-bottom: 2px solid var(--line); }
.o-content h3 { font-size: 18px; margin: 1.7em 0 .5em; color: var(--green); }
.o-content ul li { list-style: disc; margin-left: 1.5em; margin-bottom: .4em; }
.o-content ol li { list-style: decimal; margin-left: 1.6em; margin-bottom: .4em; }
.o-content a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; word-break: break-all; }
.o-content img, .o-content figure { border-radius: 14px; margin: 1.5em 0; }
.o-content figcaption { font-size: 12px; color: var(--sub); margin-top: 8px; }
.o-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.o-content th, .o-content td { border: 1px solid var(--line); padding: 10px 13px; text-align: left; }
.o-content th { background: var(--bg); width: 30%; }
.o-content blockquote { border-left: 4px solid var(--brown); background: var(--bg); padding: 12px 18px; border-radius: 0 12px 12px 0; color: var(--sub); }
.o-content code { background: var(--bg); border: 1px solid var(--line); padding: 2px 6px; border-radius: 5px; font-size: .92em; }

.c-post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.c-disclaimer { margin-top: 26px; padding: 15px 19px; background: var(--bg); border-radius: 14px; font-size: 12.5px; color: var(--sub); }
.c-disclaimer-title { font-size: 11.5px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.c-disclaimer p:last-child { margin-bottom: 0; }
.c-ai-cite { margin-top: 22px; padding: 16px 19px; border: 1px solid var(--line); border-radius: 14px; font-size: 13px; color: var(--sub); overflow-wrap: anywhere; }
.c-ai-cite-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
.c-ai-cite p { margin: 0 0 6px; }
.c-ai-cite-meta span { color: var(--ink); font-weight: 700; }
.c-ai-cite-url a { display: block; margin-top: 4px; overflow-wrap: anywhere; word-break: break-all; }
.c-ai-cite-links { margin-top: 10px !important; font-size: 12.5px; }
.c-ai-cite a { text-decoration: underline; text-underline-offset: 2px; }
.c-source { margin-top: 22px; padding: 16px 19px; background: var(--bg); border-radius: 14px; font-size: 13px; color: var(--sub); overflow-wrap: anywhere; }
.c-source-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink); }
.c-source a { overflow-wrap: anywhere; word-break: break-all; }
.c-source-note { margin: 8px 0 0; font-size: 12px; }
.c-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.c-share-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--sub); }
.c-share-btn { font-size: 12.5px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; }
.c-share-btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.o-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; font-size: 13px; }
.o-postnav a { display: block; padding: 14px 18px; background: var(--bg); border-radius: 14px; }
.o-postnav a:hover { color: var(--green); }
.c-related { margin-top: 42px; }
.c-block-title { font-family: var(--mincho); font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.c-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.c-related-item { display: block; background: var(--bg); border-radius: 14px; overflow: hidden; }
.c-related-item:hover { background: #efeadb; }
.c-related-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.c-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-related-body { display: block; padding: 11px 13px 14px; }
.c-related-cat { display: block; font-size: 10.5px; color: var(--green); font-weight: 800; margin-bottom: 3px; }
.c-related-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.5; }
.c-comments { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- サイドバー ---------- */
.o-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; align-items: start; padding-top: 20px; padding-bottom: 56px; }
.o-home-main { min-width: 0; }
.o-home .o-latest { padding: 28px 0 0; }
.o-home-main .o-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.o-side { display: flex; flex-direction: column; gap: 20px; }
.c-widget { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px 22px 22px; }
.c-widget-title { font-family: var(--mincho); font-size: 15px; font-weight: 700; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); letter-spacing: .06em; }
.c-rank-cat { font-family: var(--mincho); font-size: 13.5px; font-weight: 700; margin: 16px 0 6px; }
.c-rank-cat:first-of-type { margin-top: 0; }
.c-rank-cat a { color: var(--ink); letter-spacing: .08em; }
.c-rank-cat a:hover { text-decoration: underline; }
.c-widget-rank .c-rank { margin-bottom: 6px; }
.c-rank li {
	display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px;
	align-items: center; padding: 10px 0; border-bottom: 1px dotted var(--line);
}
.c-rank li:last-child { border-bottom: none; }
.c-rank-num {
	flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff;
	font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.c-rank a:hover { color: var(--green); }
.c-rank-link {
	display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0;
}
.c-rank-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #e6e0d0; }
.c-rank-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-rank-noimg { display: block; width: 100%; height: 100%; background: #e6e0d0; border-radius: 10px; }
.c-rank-title {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 13.5px; line-height: 1.5; font-weight: 700;
}
.c-cat-list li { padding: 8px 0; border-bottom: 1px dotted var(--line); }
.c-cat-list li:last-child { border-bottom: none; }
.c-cat-list a { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; }
.c-cat-list a:hover { color: var(--green); }
.c-cat-count { font-size: 11px; color: var(--sub); font-weight: 400; }
.c-cat-desc { display: block; font-size: 11px; color: var(--sub); }



/* ---------- 固定ページ・404 ---------- */
.c-page { padding: 34px 0 66px; }
.c-page-inner { max-width: 800px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 34px 40px 42px; }
.c-page-title { font-size: 28px; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.c-page-body {
	overflow-wrap: anywhere; font-size: 15.5px; line-height: 2; }
.c-page-body h2 { font-size: 19px; margin: 1.8em 0 .5em; color: var(--green); }
.c-page-body ul li { list-style: disc; margin-left: 1.5em; margin-bottom: .3em; }
.c-page-body a { color: var(--green); text-decoration: underline; }
.c-404 { text-align: center; }
.c-404-code { font-size: 68px; color: var(--green); margin: 0; line-height: 1; font-family: var(--mincho); }
.c-404 .c-search { justify-content: center; margin: 20px 0; }
.c-404-home { color: var(--green); text-decoration: underline; font-weight: 700; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1020px) {
	.o-single-grid { grid-template-columns: 1fr; gap: 32px; }
	.o-home-grid { grid-template-columns: 1fr; gap: 32px; }
	.o-home-main .o-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.o-hero-card { grid-template-columns: 1fr; }
	.c-related-grid { grid-template-columns: 1fr 1fr; }
	.o-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	}
@media (max-width: 760px) {
	.o-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.o-card-ex { display: none; }
	.o-single { padding: 24px 22px 30px; }
	.o-single-head h1 { font-size: 24px; }
	.o-postnav, .c-related-grid { grid-template-columns: 1fr; }
	.c-page-inner { padding: 24px 20px 30px; }
}
/* ---------- 縦画面（スマホ）向けの調整 ---------- */
@media (max-width: 480px) {
	body { font-size: 15px; }
	.o-wrap { padding: 0 14px; }
	.o-brand-mark { width: 38px; height: 38px; }
	.o-brand-name { font-size: 20px; }
	.o-brand-sub { display: none; }
	.o-hero { padding-top: 18px; }
	.o-hero-body { padding: 22px 20px 26px; }
	.o-hero-title { font-size: 20px; }
	.o-hero-ex { display: none; }
			.o-latest { padding: 28px 0 44px; }
	.o-card-title { font-size: 13.5px; }
	.o-card-ex { display: none; }
	.o-card-body { padding: 10px 11px 12px; }
	.o-single { padding: 20px 16px 26px; border-radius: 18px; }
	.o-single-head h1 { font-size: 21px; }
	.o-content { font-size: 15px; }
	.o-content h2 { font-size: 18px; }
	/* 本文の表は横スクロール（列を潰すと項目と値の対応が読めなくなるため） */
	.o-content table { display: block; overflow-x: auto; white-space: nowrap; }
		.c-page-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	}

/* ---------- カードのリンク範囲 ----------
   カード全体を <a> で囲むとカテゴリバッジ（<a>）がリンクの入れ子になり
   HTMLが壊れるため、タイトルのリンクを疑似要素でカード全面に広げている。
   バッジやチップは z-index を上げて、個別のリンクとして残す。            */
.o-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.o-card:hover { box-shadow: 0 8px 20px rgba(60,50,30,.08); }
.o-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.o-card-top a, .o-card-foot a { position: relative; z-index: 1; }
.o-card-title, .o-card-ex { margin: 0; }
.o-card-title { margin-bottom: 6px; }
.o-card-ex { margin-bottom: 8px; }
.o-card:hover .o-card-title { color: var(--green); }


/* ============================================================
   OUTSIDEKIT だけの要素 ─ 段差のある2列
   カードの高さを交互に変え、右列を少し下げることで
   紙のガイドブックを開いたような不揃いさを出す。
   縦画面では1列に落として、段差も解除する。
   ============================================================ */
@media (min-width: 761px) {
	.o-grid { align-items: start; }
}
.o-card-thumb { transition: none; }
.o-card-title { position: relative; }
.o-card-body { padding-top: 12px; }

/* スマホ〜タブレット:
   1段目 ロゴ + 検索
   2段目 カテゴリ横スクロール */
@media (max-width: 900px) {
	.o-header-inner {
		flex-wrap: wrap; gap: 10px 12px;
		padding-top: 12px; padding-bottom: 12px;
	}
	.o-brand { order: 1; }
	.o-brand-logo img { width: 160px; }
	.o-header-search { order: 2; margin-left: auto; flex: 1; min-width: 140px; max-width: 240px; }
	.c-search { width: 100%; }
	.c-search-input { width: 100%; min-width: 0; }
	.o-nav { order: 3; flex: 1 1 100%; width: 100%; margin: 2px -4px 0; }
	.o-nav ul { gap: 8px; padding: 0 4px 2px; }
	.o-nav a { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 560px) {
	.o-header-search { flex: 1 1 100%; max-width: none; margin-left: 0; order: 3; }
	.o-nav { order: 2; margin-top: 0; }
	.o-brand-logo img { width: 148px; }
	.o-nav a { padding: 7px 12px; font-size: 12.5px; }
}

/* ---------- 注目記事の帯（直近30日PV順） ---------- */
.c-flow { background: #efe9da; border-bottom: 1px solid var(--line); padding: 16px 0 20px; overflow: hidden; }
.c-flow-head { margin-bottom: 12px; }
.c-flow-label {
	margin: 0; font-family: var(--mincho); font-size: 15px; font-weight: 700;
	letter-spacing: .18em; color: var(--ink);
}
.c-flow-viewport { overflow: hidden; }
.c-flow-track { display: flex; gap: 12px; width: max-content; animation: o-flow var(--flow-duration, 40s) linear infinite; }
@keyframes o-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.c-flow-viewport:hover .c-flow-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.c-flow-track { animation: none; }
}
.c-flow-card { display: block; width: 200px; flex: none; background: var(--card); border-radius: 12px; overflow: hidden; }
.c-flow-card:hover { background: #efeadb; }
.c-flow-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.c-flow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-flow-card-title {
	display: block; font-family: var(--mincho); font-size: 12.5px; font-weight: 700; line-height: 1.45; padding: 8px 10px 10px;
}
.c-flow-card-titletext { display: block; overflow: hidden; height: 2.9em; }
@media (max-width: 760px) {
	.c-flow { padding: 12px 0 15px; }
	.c-flow-head { margin-bottom: 10px; }
	.c-flow-label { font-size: 13.5px; letter-spacing: .14em; }
	.c-flow-card { width: 168px; }
	.c-flow-card-title { font-size: 12px; padding: 8px 10px 10px; }
}

/* ---------- フッター ---------- */
.o-footer { background: var(--footer-bg, #14161c); color: #b9bec9; padding: 26px 0; margin-top: 0; }
.o-footer a { color: #b9bec9; }
.o-footer a:hover { color: #fff; }
.o-footer-inner { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px 28px; }
.o-footer-brand { display: grid; gap: 8px; max-width: 36em; }
.o-footer-logo { display: block; line-height: 0; width: fit-content; }
.o-footer-logo img { display: block; width: 168px; height: auto; }
.o-footer-name { font-size: 15px; font-weight: 900; letter-spacing: .14em; color: #fff; margin: 0; }
.o-footer-concept { font-size: 13px; line-height: 1.65; color: #c5cad3; margin: 0; }
.o-footer-copy { font-size: 12px; margin: 0; }
.o-footer-ai { font-size: 12px; margin: 2px 0 0; line-height: 1.55; color: #9aa1ad; }
.o-footer-ai a { color: #d7dbe3; text-decoration: underline; text-underline-offset: 2px; }
.o-footer-nav ul { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.o-footer-nav a { font-size: 13px; }
.o-totop { margin-left: auto; font-size: 12px; align-self: center; }
@media (max-width: 480px) {
	.o-footer { padding: 20px 0; }
	.o-footer-name { font-size: 14px; }
	.o-totop { margin-left: 0; }
}

:root { --footer-bg: #2e2a22; }



/* ---------- ランキング（サイドバー） ---------- */
@media (max-width: 1020px) {
	.c-widget-rank { padding: 16px 16px 18px; }
	.c-rank li {
		grid-template-columns: 32px minmax(0, 1fr); gap: 12px;
		padding: 12px 0; align-items: center;
	}
	.c-rank-num { width: 32px; height: 32px; font-size: 13px; }
	.c-rank-link { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
	.c-rank-thumb { border-radius: 12px; aspect-ratio: 16 / 10; }
	.c-rank-title { font-size: 14.5px; line-height: 1.45; -webkit-line-clamp: 3; }
	.c-rank-cat { font-size: 14.5px; margin: 18px 0 8px; }
}
@media (max-width: 560px) {
	.c-rank-link { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
	.c-rank-title { font-size: 14px; }
}

@media (max-width: 900px) { .o-catbar ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .o-catbar ul { grid-template-columns: 1fr 1fr; gap: 8px; } .o-catbar-desc { display: none; } .o-catbar-name { font-size: 14px; } }

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


/* ============================================================
   OUTSIDEKIT の個性 ─ 野帳（フィールドノート）
   紙のガイドブックらしく、地に薄い横罫を敷き、
   カードの上に地図のピンのような点を置く。
   ============================================================ */
body {
	background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(120,105,80,.055) 27px 28px);
}

/* 見出しの左に、方位磁針のような二重丸 */
.o-sec { position: relative; padding-left: 26px; }
.o-sec::before {
	content: ""; position: absolute; left: 0; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
	border: 3px solid var(--brown); border-radius: 50%;
}
.o-sec::after {
	content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px;
	background: var(--green); border-radius: 50%;
}

/* カードの上端に、地図のピンのような点を置く */
.o-card { border-style: dashed; }
.o-card::before {
	content: ""; position: absolute; left: 20px; top: -7px; z-index: 2; pointer-events: none;
	width: 13px; height: 13px; border-radius: 50%;
	background: var(--brown); box-shadow: 0 0 0 4px var(--bg);
}
.o-card:hover { border-style: solid; border-color: var(--green); }
.o-hero-card { border: 1px dashed var(--line); }

@media (max-width: 480px) {
	.o-card::before { left: 14px; width: 11px; height: 11px; top: -6px; }
}

/* ============================================================
   仕上げの層 ─ 文字組み・動き・操作の手がかり
   サイトごとの色と形はそのままに、読み心地と操作感だけを底上げする。
   全サイトで同じ内容が入っている（生成元は _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,
.o-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, .o-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(--green); outline-offset: 3px; }
::selection { background: var(--green); color: #fff; }
.c-search-input:focus {
	outline: none; border-color: var(--green); position: relative; z-index: 1;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 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); }

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

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

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

/* ---------- 部品の形（このサイト固有） ---------- */
.c-badge {
	background: transparent; color: var(--green);
	box-shadow: inset 0 0 0 1.5px var(--green); padding: 3px 11px;
}
.c-new { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ============================================================
   トップページの編成 ─ 形をそろえない3本
   持ち物を並べるように、横長・縦長・文字だけの3つを組み合わせる。
   同じ形を繰り返さないことで、上から順に読ませる流れをつくっている。
   ============================================================ */
.o-kit { padding: 20px 0 8px; }
.o-kit-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }

.o-lead { position: relative; background: var(--card); border: 1px dashed var(--line); border-radius: 16px; overflow: hidden; }
.o-lead-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line); }
.o-lead-media img { width: 100%; height: 100%; object-fit: cover; }
.o-lead-body { padding: 14px 18px 16px; }
.o-lead-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.o-lead-top a { position: relative; z-index: 1; }
.o-lead-title { font-family: var(--mincho); font-size: 20px; font-weight: 700; line-height: 1.5; margin: 0 0 8px; }
.o-lead-title a::after { content: ""; position: absolute; inset: 0; }
.o-lead-ex { font-size: 13px; line-height: 1.7; color: var(--sub); margin: 0 0 8px; }
.o-lead-date { font-size: 12px; color: var(--sub); }
.o-lead:hover { border-style: solid; border-color: var(--green); }
.o-lead:hover .o-lead-title { color: var(--green); }

.o-side-stack { display: flex; flex-direction: column; gap: 14px; }

/* 縦長のカード。持ち物の写真は縦のほうが収まりが良い */
.o-tall { position: relative; background: var(--card); border: 1px dashed var(--line); border-radius: 16px; overflow: hidden; }
.o-tall-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.o-tall-media img { width: 100%; height: 100%; object-fit: cover; }
.o-tall-body { padding: 10px 14px 14px; }
.o-tall-top { margin-bottom: 6px; }
.o-tall-top a { position: relative; z-index: 1; }
.o-tall-title { font-family: var(--mincho); font-size: 14.5px; font-weight: 700; line-height: 1.5; margin: 0; }
.o-tall-title a::after { content: ""; position: absolute; inset: 0; }
.o-tall:hover { border-style: solid; border-color: var(--brown); }
.o-tall:hover .o-tall-title { color: var(--brown); }

/* 写真を使わない1本。同じ形が続かないようにするための段 */
.o-note { position: relative; border-left: 4px solid var(--brown); padding: 2px 0 2px 14px; }
.o-note-top { margin-bottom: 6px; }
.o-note-top a { position: relative; z-index: 1; }
.o-note-title { font-family: var(--mincho); font-size: 14.5px; font-weight: 700; line-height: 1.5; margin: 0 0 6px; }
.o-note-title a::after { content: ""; position: absolute; inset: 0; }
.o-note-ex { font-size: 12px; line-height: 1.7; color: var(--sub); margin: 0; }
.o-note:hover .o-note-title { color: var(--brown); }

@media (max-width: 1000px) {
	.o-kit-grid { grid-template-columns: 1fr; gap: 22px; }
	.o-side-stack { flex-direction: row; align-items: flex-start; }
	.o-tall { flex: 1; }
	.o-tall-media { aspect-ratio: 4 / 3; }
	.o-note { flex: 1; }
	.o-lead-title { font-size: 18px; }
}
@media (max-width: 620px) {
	.o-kit { padding: 16px 0 4px; }
	.o-side-stack { flex-direction: column; gap: 16px; }
	.o-lead-body { padding: 14px 17px 18px; }
	.o-lead-title { font-size: 19px; }
	.o-lead-ex { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.o-tall-media { aspect-ratio: 16 / 10; }
}