/*
	Theme Name: poimame
	Version: 6.0.0
*/

:root {
	/* 色はライト／ダーク（OS の設定に追従）の2組。ダークは下の @media (prefers-color-scheme: dark) で同じ変数を上書きする。
	   ベースは2段＝地 --base（薄いベージュ）の上に白い面 --paper（カード・チップ・検索・記事本文・トップのカテゴリ） */
	color-scheme: light dark;
	--key: #ffff66; /* キーカラー（本文のマーカー・検索ボックスのフォーカス） */
	--key-ink: #1c1a17; /* 黄色の上の文字（ダークでも暗いまま） */
	--marker: var(--key); /* 本文の strong のマーカー */
	--base: #faf7f1; /* 地（画面背景・ヘッダー・プロフィール） */
	--head-bg: rgba(250, 247, 241, .85); /* 上部固定ヘッダー（地の色を少し透かす） */
	--paper: #fff; /* 白い面 */

	--ink: #1c1a17; /* テキスト */
	--sub: #666; /* サブテキスト（白・ベージュどちらでもコントラスト AA） */

	--line: #ddd6ca; /* 罫線 */
	--campaign: #cc0000; /* 期間限定キャンペーンの赤（バッジ・バナー共通） */
	--on-campaign: #fff; /* 赤の上の文字 */
	--btn-bg: var(--ink); /* 記事の PR ボタン（黒地に黄色文字） */
	--btn-fg: var(--key);
	--note: #fff9d9; /* 記事のボタン上の注記 */
	--note-line: #e6c85c;
	--line-brand: #06c755; /* LINE のブランドカラー（シェアボタンのロゴ） */
	--rank-gold: #e3b53c; /* トップの人気の記事の1〜3位（文字は --key-ink） */
	--rank-silver: #bcc2ca;
	--rank-bronze: #cf8d5c;

	/* 余白のスケール（7段・おおむね倍々）。margin / padding / gap は必ずこれか下の役割別の変数を使う（直書きしない）。
	   0〜2px の微調整（線・バッジ内）だけは例外。間の値が欲しくなったら近い段に寄せる（迷えば大きいほう＝ゆったり） */
	--sp-2xs: 4px;
	--sp-xs: 8px;
	--sp-s: 16px;
	--sp-m: 24px;
	--sp-l: 32px;
	--sp-xl: 48px;
	--sp-2xl: 64px;

	/* レイアウト（ヘッダー・フッター=全幅 / 本文=最大 --max-w で中央。PC は 768px〜で上書き） */
	--max-w: 1200px;
	--post-w: 720px; /* 記事本文カラムの最大幅 */
	--gutter: var(--sp-s); /* 画面端の余白（SP は本文幅を確保するため 16px のまま） */
	--block-gap: var(--sp-xl); /* セクション同士の間隔 */
	--head-h: 68px; /* 上部固定ヘッダーの高さ（SP：中の要素 40px＋天地 14px ずつ。PC は 768px〜で上書き） */
	--shadow: 0 5px 20px rgba(0, 0, 0, .18);

	--r-md: 14px;
	--r-sm: 10px;
	--r-xs: 5px;
	--r-pill: 999px;
	--section-pad: var(--sp-l); /* カード・本文ブロックの内側の余白 */

	/* 共有ボタン（記事末で使用） */
	--share-btn: 45px;
	--share-icon: 24px;

	/* 絵文字アイコンのサイズ（共有ボタン・バナー共通） */
	--emoji: 1.5rem;

	/* shine（hover時のキラーン光沢）の基調。グリッド・ボタン共通 */
	--shine-color: rgba(255, 255, 102, .65);
	--shine-angle: 115deg;
	--shine-dur: .7s;
	--shine-ease: ease;

	/* 文字サイズ（font-size は必ずこれを使う。直書きしない） */
	--fz-ss: .75rem; /* 最小（12px）。読者層の読みやすさのためこれより小さくしない */
	--fz-s: .85rem;
	--fz-m: 1rem;
	--fz-l: 1.12rem;
	--fz-ll: 1.35rem;
	--fz-xl: 1.75rem; /* ページの大見出し（PC の記事タイトル・一覧の h1） */

	/* 行間（line-height は必ずこれを使う。直書きしない）。例外はアイコン・バッジの中央揃えの 1、画像の下の隙間を消す 0、円形アイコンの px 指定だけ */
	--lh-tight: 1.3; /* 見出し・タイトル・バッジ・ボタン */
	--lh-ui: 1.6; /* カードのタイトル・目次・表など UI の文（body の既定） */
	--lh-sub: 1.7; /* 小さめの文（注記・プロフィール・リスト・引用・吹き出し） */
	--lh-body: 1.85; /* 記事本文 */
}

/* ダークモード（OS の設定に追従）。色の変数だけを上書きする */
@media (prefers-color-scheme: dark) {
	:root {
		--key: #f5ea5a;
		--marker: rgba(245, 234, 90, .6); /* 明るい文字に濃い黄色を重ねると読めないので少し透かす（線は文字の下寄りで細い） */
		--base: #1c1a17;
		--head-bg: rgba(28, 26, 23, .85);
		--paper: #282521;
		--ink: #f2efea;
		--sub: #aaa49a;
		--line: #46413b;
		--campaign: #e5484d;
		--btn-bg: var(--key); /* 黒地だと暗い背景に沈むので、黄色地に暗い文字へ反転 */
		--btn-fg: var(--key-ink);
		--shine-color: rgba(255, 255, 255, .9); /* 黄色地のボタンに黄色の光は見えないので白く */
		--note: #3a3420;
		--note-line: #8a7a3a;
		--rank-gold: #cfa233;
		--rank-silver: #a3aab3;
		--rank-bronze: #b97a4c;
	}
}


/* -- reset -------------------------------- */

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

body,
h1,
h2,
h3,
p,
ul,
ol {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

/* -- /reset -------------------------------- */

/* 文字サイズの基準（--fz-* はすべて rem＝ここに比例）。SP は少し大きく（17px）、PC（768px〜）は 100%（16px）。
   % で指定＝読者のブラウザの文字サイズ設定にも追従する。文字サイズを % で書くのはここだけ */
html {
	font-size: 106.25%;
}

body {
	font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
	font-size: var(--fz-m);
	line-height: var(--lh-ui);
	color: var(--ink);
	/* .wrap・フッターと同じ地の色＝フッターより下の空き（広告のアンカー分など）もフッターの延長に見せる */
	background: var(--base);
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

/* 見出し・UI は約物を詰めて引き締める（本文は可読性のため詰めない） */
h1,
h2,
h3,
.sitehead,
.sitenav,
.postgrid__title,
.catblock__text {
	font-feature-settings: "palt";
}

h1,
h2,
h3 {
	letter-spacing: .02em;
	text-wrap: pretty; /* 最終行が1〜2文字だけになる改行を防ぐ */
}

/* キーボード操作のフォーカス（マウス・タップでは出ない） */
:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

input,
textarea,
select,
button {
	font: inherit;
}

/* -- レイアウト -------------------------------- */

.icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--base);
}

.sitemain {
	flex: 1;
	width: 100%;
	max-width: calc(var(--max-w) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter) var(--block-gap);
}

/* セクション（見出し＋中身のまとまり） */
.block {
	margin-top: var(--block-gap);
}

.block__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2xs) var(--sp-xs);
	margin-bottom: var(--sp-m);
	font-size: var(--fz-ll);
	font-weight: 700;
	line-height: var(--lh-tight);
}

/* 見出しの上の英字ラベル（飾り・読み上げしない）。.block__title では1行を占有 */
.eyebrow {
	display: block;
	flex-basis: 100%;
	font-family: 'Inter', sans-serif;
	font-size: var(--fz-ss);
	font-weight: 700;
	letter-spacing: .16em;
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.block__title .icon {
	width: 20px;
	height: 20px;
}

/* 見出しの下の一言（トップの各節） */
.block__lead {
	margin: calc(var(--sp-s) * -1) 0 var(--sp-m);
	color: var(--sub);
	font-size: var(--fz-s);
	line-height: var(--lh-sub);
}

/* 横スクロール列（画面端まではみ出してスクロール） */
.hrow {
	display: flex;
	gap: var(--sp-s);
	overflow-x: auto;
	margin: 0 calc(var(--gutter) * -1);
	padding: 0 var(--gutter) var(--sp-2xs);
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hrow::-webkit-scrollbar {
	display: none;
}

.hrow > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.hrow--cards {
	padding-top: var(--sp-xs); /* 横スクロールの列は上下も切れるので、上へはみ出すバッジのぶん空ける */
}

.hrow--cards > * {
	width: calc((100% + var(--gutter) - var(--sp-s)) / 1.7); /* 1枚目と2枚目の7割が見える（列の幅＝画面幅－左右の --gutter） */
}

/* SP は横スクロールせず1列に縦積み（トップのトレンド・無料。768px〜は .hrow--cards のグリッド） */
.hrow--stack {
	display: grid;
	gap: var(--sp-m);
	overflow: visible;
	margin: 0;
	padding: 0;
}

.hrow--stack > * {
	width: auto;
}


/* -- ヘッダー sitehead（全幅・上部固定） ------------- */
.sitehead {
	position: sticky;
	top: 0;
	z-index: 40;
	/* 下をスクロールする本文がうっすら見えるよう少し透かし、ぼかして文字を読みやすく。
	   backdrop-filter は fixed の子の基準になるので、ヘッダーの中に position:fixed を置かない（メニュー .sitenav はヘッダーの外） */
	background: var(--head-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.sitehead__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-xs);
	max-width: calc(var(--max-w) + var(--gutter) * 2);
	height: var(--head-h);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.sitehead__brand {
	display: flex;
	align-items: center;
	gap: var(--sp-s);
	min-width: 0;
	margin-right: auto;
	padding-right: var(--sp-s);
	border-radius: var(--r-pill);
}

.sitehead__pic {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
}

.sitehead__name {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: var(--lh-tight);
}

.sitehead__title,
.sitehead__tagline {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sitehead__title {
	font-weight: 700;
	font-size: var(--fz-m);
}

/* キャッチコピー（設定＞一般のキャッチフレーズ）。初見で何のサイトかを伝える */
.sitehead__tagline {
	color: var(--sub);
	font-size: var(--fz-ss);
	line-height: var(--lh-sub); /* ブログ名との間を行間で空ける（余白の段では大きすぎるため） */
}

.sitehead .sitehead__search,
.sitehead__nav {
	display: none;
}

.sitehead__searchlink,
.sitehead__menu {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
}

/* SP は🔍だけ（「検索」の文字は PC の 1120px 未満で出す） */
.sitehead__searchlabel {
	display: none;
}

/* 期間限定の更新バッジ（赤丸・アイコン右上・タップで消え24時間後に復活。script.js） */
.campaign-badge {
	position: absolute;
	width: 9px;
	height: 9px;
	background: var(--campaign);
	border: 1.5px solid var(--paper);
	border-radius: 50%;
}

.campaign-badge[hidden] {
	display: none;
}

/* -- メニュー sitenav（SPのみ・ハンバーガーでヘッダー直下に全幅で開く。ヘッダーは出したまま） -- */
.sitenav {
	display: none;
}

.sitenav.is-open {
	position: fixed;
	top: var(--head-h);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: block;
	overflow-y: auto;
	background: rgba(0, 0, 0, .35);
}

/* 背面スクロール停止は html だけ（body にも付けると body がスクロール領域になり、スクロール済みの位置で開くと上部固定ヘッダーが消える） */
.is-menuopen {
	overflow: hidden;
}

.sitenav__card {
	padding: var(--sp-m) var(--gutter) var(--sp-l);
	background: var(--base); /* ヘッダーと同じ地の色（プロフィールも PC と同じ見え方になる） */
}

/* 開くときだけ背景フェード＋メニューを上から下ろす（閉じるのは即時） */
.sitenav.is-open {
	animation: fadein .2s ease;
}

.sitenav.is-open .sitenav__card {
	animation: sitenav-down .25s cubic-bezier(.2, .8, .2, 1);
}

@keyframes fadein {
	from {
		opacity: 0;
	}
}

@keyframes sitenav-down {
	from {
		transform: translateY(calc(var(--sp-s) * -1));
		opacity: 0;
	}
}

/* ハンバーガー ☰ ⇔ ×（aria-expanded で切替） */
.sitehead__menuclose,
.sitehead__menu[aria-expanded="true"] .sitehead__menuopen {
	display: none;
}

.sitehead__menu[aria-expanded="true"] .sitehead__menuclose {
	display: contents;
}

.sitehead__menuopen {
	display: contents;
}

/* プロフィール（author-section）をメニュー下部に */
.sitenav .author {
	margin-top: var(--sp-m);
	padding: var(--sp-s);
}

.sitenav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sitenav__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-s);
	padding: var(--sp-s);
	border-radius: var(--r-sm);
	font-size: var(--fz-m);
	white-space: nowrap;
}

.sitenav__item .campaign-badge {
	top: 7px;
	left: 30px;
}

/* 期間限定キャンペーン一覧（page-campaign） */
.campaign__title {
	margin: var(--section-pad) 0;
	line-height: var(--lh-tight);
	text-align: center;
	font-size: var(--fz-ll);
	font-weight: 700;
}

/* 検索ボックス（ヘッダー・トップ・検索結果共用。ピル型・背景は透明で focus で白い面に。focusで罫線を黒に＝入力欄の outline は消しているので代わりの目印） */
.searchbox {
	display: flex;
	align-items: center;
	gap: var(--sp-s);
	margin: 0;
	padding: 0 var(--sp-s);
	background: transparent;
	border: 2px solid var(--line);
	border-radius: var(--r-pill);
}

.searchbox .icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.searchbox input {
	flex: 1;
	min-width: 0;
	padding: var(--sp-s) 0;
	border: 0;
	outline: 0;
	color: inherit;
	background: transparent;
	/* 16px（--fz-m）未満だと iOS Safari でフォーカス時に画面がズームするため --fz-m 未満にしない */
	font-size: var(--fz-m);
}

.searchbox input::placeholder {
	color: var(--sub);
}

.searchbox:focus-within {
	background: var(--paper);
	border-color: var(--ink);
}

/* SNSアイコン（author・フッター共通） */
.author__links a,
.sitefooter__sns a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	color: var(--ink);
	border-radius: 50%;
}

.author__links svg,
.sitefooter__sns svg {
	width: var(--share-icon);
	height: var(--share-icon);
	fill: currentColor;
}

/* -- トップ ------------------------------- */

/* 上部：キャラ＋吹き出し → 検索ボックス＋チップ。SP は縦積み（768px〜の並びは下の @media） */
.tophero__intro {
	display: flex;
	flex-direction: column-reverse; /* SP は吹き出しが上・キャラが下 */
	align-items: center;
	gap: var(--sp-m);
	margin-top: var(--block-gap);
}

.tophero__chara {
	width: 120px;
	height: auto;
	animation: tophero-float 3s ease-in-out infinite;
}

@keyframes tophero-float {
	50% {
		transform: translateY(calc(var(--sp-xs) * -1));
	}
}

/* 吹き出し：SP はキャラの上なので下向きの▼（768px〜はキャラの右なので左向き） */
.tophero__fuki {
	position: relative;
	max-width: 400px;
	margin: 0;
	padding: var(--sp-s) var(--sp-m);
	background: var(--paper);
	border-radius: var(--r-md);
	font-size: var(--fz-s);
	line-height: var(--lh-sub);
}

.tophero__fuki::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: calc(var(--sp-xs) * -1);
	border: var(--sp-xs) solid transparent;
	border-top-color: var(--paper);
}

.tophero__more {
	display: block;
	width: fit-content;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tophero__find {
	margin-top: var(--block-gap);
}

.tophero__chips {
	margin-top: var(--sp-s);
}

/* ポイントサイト（5列）。スクロールしない */
.toppsites {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-2xs);
}

.psite__link {
	position: relative;
	display: block;
	padding: var(--sp-2xs);
	border-radius: 50%;
}

/* 正方形の画像を丸く切り抜く（ロゴの四隅は欠けてよい）。SP は列の幅いっぱい */
.psite__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: 50%;
}

/* カテゴリ（全カテゴリのチップ＋固定カテゴリの新着3件ブロック） */
.catchips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
}

.catchips__item {
	padding: var(--sp-xs) var(--sp-s); /* タップ領域 40px 前後 */
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: var(--fz-s);
	line-height: var(--lh-tight);
}

/* 今見ているカテゴリ（リンクにしない・白い面にせず文字を薄く） */
.catchips__item--current {
	color: var(--sub);
	background: none;
}

/* 横並びのサムネ＋タイトル（記事末の関連記事 related-posts.php） */
.catblock__item {
	display: flex;
	align-items: center;
	gap: var(--sp-s);
	margin: calc(var(--sp-2xs) * -1); /* hover 背景の余白ぶん外へ広げ、見た目の位置は変えない */
	padding: var(--sp-2xs);
	color: var(--ink);
	border-radius: var(--r-sm);
}

/* アイキャッチ（2:1）の中央の正方形＝サービス名の範囲 */
.catblock__img {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: var(--base);
	border-radius: 4px;
}

.catblock__text {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	font-size: var(--fz-s);
	line-height: var(--lh-ui);
}

/* トップの Pickup（front-page.php）。catblock__item を白いカードにして並べる（SP 1列・768px〜 2列・1120px〜 3列） */
.toppickup {
	display: grid;
	gap: var(--sp-xs);
}

.toppickup__item {
	margin: 0;
	padding: var(--sp-xs);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.toppickup__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2xs);
	min-width: 0;
}

/* 節の右下のリンク（トップの人気の記事の「記事一覧を見る」） */
.block__more {
	display: table;
	margin: var(--sp-s) 0 0 auto;
	padding: var(--sp-2xs) var(--sp-xs);
	color: var(--ink);
	border-radius: var(--r-pill);
	font-size: var(--fz-ss);
}

/* -- 記事カード postgrid（一覧・人気の記事・新着記事 共通） -- */
.postgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-s);
}

/* 左上の丸いバッジを上へはみ出させるので overflow で切らず、画像の上の角だけカードに合わせて丸める */
.postgrid__item {
	position: relative;
	display: flex;
	flex-direction: column;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.postgrid__img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	background: var(--base);
	border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; /* 罫線の内側 */
}

/* 遅延読込の画像は読み込めたらフェードイン（script.js が .is-loaded を付ける。読み込み前はグレーの枠のまま） */
.postgrid__img.is-loaded {
	animation: fadein .4s ease;
}

/* サムネなし記事のダミー枠 */
.postgrid__img--empty {
	display: grid;
	place-items: center;
	color: var(--sub);
}

.postgrid__img--empty svg {
	width: 28px;
	height: 28px;
}

.postgrid__title {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	margin: var(--sp-s) var(--sp-s) var(--sp-s);
	font-size: var(--fz-s);
	line-height: var(--lh-ui);
}

.postgrid__empty {
	padding: var(--section-pad);
	text-align: center;
}

/* カードのタイトルの上に期限（タイトルの【〜まで】を抜き出したもの・期限内だけ。期間限定のページと postgrid-item.php・トップの Pickup） */
.postgrid__deadline,
.toppickup__deadline {
	align-self: flex-start;
	margin: var(--sp-s) var(--sp-s) 0;
	padding: 2px var(--sp-xs);
	color: var(--on-campaign);
	background: var(--campaign);
	border-radius: var(--r-pill);
	font-size: var(--fz-ss);
	font-weight: 700;
	line-height: var(--lh-tight);
}

.postgrid__deadline + .postgrid__title {
	margin-top: var(--sp-xs);
}

.toppickup__deadline {
	margin: 0;
}

/* 画像の左上の丸いバッジ（postgrid-item.php の badge＝人気の記事の1〜3位／告知カードの Pick UP）。カードの上へ少しはみ出し、白い面の色の縁でカードと切り分ける */
.postgrid__badge {
	position: absolute;
	top: calc(var(--sp-xs) * -1);
	left: var(--sp-xs);
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 var(--sp-2xs);
	border: 2px solid var(--paper);
	border-radius: var(--r-pill);
	font-size: var(--fz-ss);
	font-weight: 700;
	line-height: 1;
}

/* 告知カード（promo-card.php）の「Pick UP」（文字が長いので左右を広く） */
.postgrid__badge--pick {
	padding: 0 var(--sp-s);
	color: var(--paper);
	background: var(--ink);
}

.postgrid__badge--rank1,
.postgrid__badge--rank2,
.postgrid__badge--rank3 {
	color: var(--key-ink);
}

.postgrid__badge--rank1 { background: var(--rank-gold); }
.postgrid__badge--rank2 { background: var(--rank-silver); }
.postgrid__badge--rank3 { background: var(--rank-bronze); }

/* グリッドのページ数表示（2 / 3） */
.gridpage {
	padding: 0 var(--section-pad) var(--section-pad);
	color: var(--sub);
	font-size: var(--fz-s);
	font-weight: 700;
	text-align: center;
}

/* グリッド下の前後ページ送り（黒線+白背景+角丸+hoverで黄色） */
.gridnav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-s);
	padding: var(--section-pad) 0;
}

.gridnav__side--next {
	margin-left: auto;
}

.gridnav a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 50%;
	font-size: var(--fz-m);
	font-weight: 700;
}

.gridnav__icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}


/* -- AdSense 広告ユニット（functions.php poimame_ad()。トップでも使うので style.css） ------------------------------- */
.postad {
	margin-top: var(--sp-xl);
}

/* 全ページのフッターの上（footer.php） */
.postad--multiplex {
	margin-top: var(--block-gap);
}

/* 全ページの上部（検索ページ・カテゴリ一覧・期間限定は .block の先頭。記事・固定ページの余白は style_single.css） */
.postad--header {
	margin-top: 0;
}

/* トップはヘッダー直下 */
.toppage > .postad--header {
	margin-top: var(--gutter);
}

/* -- postlist ------------------------------- */

.postlist {
	padding: var(--section-pad) 0;
}

.postlist h1 {
	text-align: center;
	font-weight: 700;
	margin: 0;
	font-size: var(--fz-ll);
	line-height: var(--lh-tight);
}

.postlist--search .searchbox {
	max-width: 480px;
	margin: var(--sp-s) auto 0;
}


/* -- sitefooter（全幅・中央揃え・背景は地の色のまま） -------------------------------- */
.sitefooter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-m);
	max-width: calc(var(--max-w) + var(--gutter) * 2);
	margin: 0 auto;
	padding: var(--sp-m) var(--gutter);
	text-align: center;
}

.sitefooter__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-xs);
	padding: var(--sp-xs) var(--sp-s);
	border-radius: var(--r-md);
}

.sitefooter__pic {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 50%;
}

.sitefooter__title {
	font-size: var(--fz-s);
	font-weight: 700;
}

.sitefooter__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2xs) var(--sp-xs);
	font-size: var(--fz-s);
}

.sitefooter__nav a {
	padding: var(--sp-xs); /* 375px でも4つが1行に収まる幅 */
	border-radius: var(--r-sm);
}

.sitefooter__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-s);
	padding-top: var(--sp-xs);
}

.sitefooter__sns {
	display: flex;
	gap: var(--sp-xs);
}

.sitefooter__copy {
	color: var(--sub);
	font-size: var(--fz-ss);
}

/* 著者プロフィール（トップPC・記事末。地の色＋罫線の角丸＝白い面（メニュー）の上でも欄に見え、押せるカードとは区別する） */
/* 左＝アイコン・SNS（縦積み）／右＝紹介文（ブログ名は紹介文の冒頭にあるので出さない）。メニュー・記事下・PC 記事の左カラム・トップ（768px〜）で同じ */
.author {
	display: flex;
	align-items: center;
	gap: var(--sp-s);
	padding: var(--sp-m);
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.author__pic {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 50%;
}

.author__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author__id {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2xs);
}

.author__links {
	display: flex;
	gap: var(--sp-2xs);
}

.author__links a {
	width: 32px;
	height: 32px;
}

.author__bio {
	min-width: 0;
	font-size: var(--fz-ss);
	line-height: var(--lh-sub);
}

.author__more {
	margin-left: var(--sp-2xs);
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 同一ウインドウ内部リンク遷移時のローディング表示 */
/* 1) タップした要素の即時フィードバック */
.is-navtap {
	opacity: .55;
}

/* 2) 上部プログレスバー（300ms超で表示・進捗不定のスライド） */
.navloading {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 3px;
	pointer-events: none;
	opacity: 0;
}

.navloading.is-active {
	opacity: 1;
}

.navloading.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 40%;
	background: var(--ink);
	animation: navloading-slide 1s ease-in-out infinite;
}

@keyframes navloading-slide {
	0% {
		left: -40%;
		width: 40%;
	}
	50% {
		width: 60%;
	}
	100% {
		left: 100%;
		width: 40%;
	}
}

/* hover ルール（テーマが出力するリンク・ボタンはすべて「色を変えず動きで反応」に統一。下線は使わない。
   画像のあるもの＝少し大きく（要素がカーソルの下から逃げないのでちらつかない）／文字だけのもの＝少し上に浮かす（小さい文字は拡大するとにじむ・隣とぶつかる）。
   動きを減らす設定の人には動かさない。例外は記事本文に手入力したリンク＝style_single.css。新しいリンクを作ったらここに足す） */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.sitehead__brand,
	.sitehead__link,
	.sitehead__searchlink,
	.sitehead__menu,
	.sitenav__item,
	.author__links a,
	.psite__link,
	a.catchips__item,
	.catblock__item,
	.block__more,
	.postgrid__item,
	.gridnav a,
	.sitefooter a {
		transition: transform .2s ease;
	}

	/* 画像のあるもの */
	.psite__link:hover,
	.catblock__item:hover,
	.postgrid__item:hover {
		transform: scale(1.03);
	}

	/* 文字だけのもの */
	.sitehead__brand:hover,
	.sitehead__link:hover,
	.sitehead__searchlink:hover,
	.sitehead__menu:hover,
	.sitenav__item:hover,
	.author__links a:hover,
	a.catchips__item:hover,
	.block__more:hover,
	.gridnav a:hover,
	.sitefooter a:hover {
		transform: translateY(-2px);
	}
}

/* プロフィール・トップの吹き出しの「もっと見る」は文中のテキストリンクなので、記事本文のリンクと同じく hover で下線を消す */
@media (hover: hover) and (pointer: fine) {
	.author__more:hover,
	.tophero__more:hover {
		text-decoration: none;
	}
}

/* -- PC（768px〜） ------------- */
@media (min-width: 768px) {
	:root {
		--gutter: var(--sp-l);
		--block-gap: var(--sp-2xl);
		--head-h: 72px;
	}

	html {
		font-size: 100%;
	}

	/* ヘッダー：ロゴ・検索ボックス・記事一覧/期間限定/招待コード/このブログ（ハンバーガー・メニューは使わない） */
	.sitehead__inner {
		gap: var(--sp-m);
	}

	.sitehead__brand {
		flex-shrink: 0; /* 狭い PC 幅では検索ボックスを縮める */
		margin-right: 0;
	}

	.sitehead__nav {
		display: flex;
		gap: var(--sp-2xs);
	}

	/* 1120px 未満は検索ボックスの幅が取れず潰れるので、検索ボックスの位置に「🔍検索」（検索ページへのリンク・ナビと同じ見た目） */
	.sitehead__searchlink {
		display: flex;
		align-items: center;
		gap: var(--sp-2xs);
		width: auto;
		height: auto;
		margin-left: auto;
		padding: var(--sp-xs);
		font-size: var(--fz-ss);
		white-space: nowrap;
	}

	.sitehead__searchlink .icon {
		width: 18px;
		height: 18px;
	}

	.sitehead__searchlabel {
		display: inline;
	}

	.sitehead__link {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--sp-2xs);
		padding: var(--sp-xs); /* 横を詰めないと 768px 付近でナビが画面からはみ出す（1120px〜は広げる） */
		border-radius: var(--r-sm);
		font-size: var(--fz-ss);
		white-space: nowrap;
	}

	.sitehead__link .icon {
		width: 18px;
		height: 18px;
	}

	.sitehead__link .campaign-badge {
		top: 3px;
		left: 21px;
	}

	.sitehead__menu,
	.sitenav,
	.sitenav.is-open {
		display: none;
	}

	/* 人気の記事・トレンドは 5列で全件表示（マウスでは横スクロールできず後半に届かないため） */
	.hrow--cards {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--sp-m) var(--sp-s);
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.hrow--cards > * {
		width: auto;
	}

	/* トップのポイントサイト｜カテゴリ */
	.topduo {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: var(--sp-xl);
		align-items: start;
		margin-top: var(--block-gap);
	}

	.topduo > .block {
		margin-top: 0;
	}

	.toppickup {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* トップ上部（768px〜）：キャラ｜吹き出し → 検索ボックス｜チップ（1行で中央） */
	.tophero__intro {
		flex-direction: row;
		justify-content: center;
		gap: var(--sp-xl);
	}

	.tophero__fuki::after {
		top: 50%;
		left: auto;
		right: 100%;
		margin: calc(var(--sp-xs) * -1) 0 0;
		border-top-color: transparent;
		border-right-color: var(--paper);
	}

	.tophero__find {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--sp-s);
	}

	.tophero__search {
		flex: 0 1 440px;
	}

	.tophero__chips {
		margin-top: 0;
	}

	.toppsites {
		gap: var(--sp-xs);
	}

	.postgrid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--sp-m) var(--sp-s);
	}

	.postlist h1,
	.campaign__title {
		font-size: var(--fz-xl);
	}

	.sitefooter__bottom {
		flex-direction: row;
		justify-content: center;
		gap: var(--sp-l);
	}
}

/* -- 広い PC（1120px〜） ------------- */
@media (min-width: 1120px) {
	.sitehead__link {
		padding: var(--sp-xs) var(--sp-s);
		font-size: var(--fz-s);
	}

	/* 検索ボックスは右側のナビと1つのグループに（ロゴとの間の空きは margin-left:auto で吸収） */
	.sitehead .sitehead__search {
		display: flex;
		flex: 0 1 280px;
		min-width: 0; /* 狭い幅で input の既定幅ぶん縮まずナビがはみ出すのを防ぐ */
		margin-left: auto;
	}

	/* ナビと同じ --fz-s（iOS のズーム防止の --fz-m は SP 向け。1120px〜は iPhone では出ない） */
	.sitehead__search input {
		padding: var(--sp-xs) 0;
		font-size: var(--fz-s);
	}

	.sitehead__searchlink {
		display: none;
	}

	.toppickup {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -- 画面遷移アニメ（View Transitions API） --------------------- */
/* ページ遷移をクロスフェード。非対応ブラウザは通常遷移にフォールバック。 */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .28s;
	animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root),
	.sitenav.is-open,
	.sitenav.is-open .sitenav__card,
	.postgrid__img.is-loaded,
	.tophero__chara {
		animation: none;
	}
}