/*
Theme Name: Mandalink Theme
Theme URI: https://mandalink.net/
Author: mandalink
Author URI: https://mandalink.net/
Description: mandalink.net リニューアル用オリジナルテーマ
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: mandalink-theme
*/

/* ============================================================
   カラー変数
   ============================================================ */

:root {
	--color-primary: #3b5bdb;   /* 現行サイトの青 */
	--color-accent:  #17a598;   /* 現行サイトのティール */
	--color-text:    #222;
	--color-muted:   #6b7280;
	--color-line:    #e5e7eb;
	--color-bg-soft: #f5f7fa;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	line-height: 1.7;
	color: var(--color-text);
	background: var(--color-bg-soft);
}

a { color: inherit; }

/* 見た目には出さないが、検索エンジン・スクリーンリーダーには読ませたいテキスト用
   （TOPページのh1をサイト名にする場合など） */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

img { max-width: 100%; height: auto; }

/* スマホ（600px以下）のときだけ改行させたい場所で使う。
   例：<br class="sp">　PC・タブレットでは何も起こらず、スマホでだけ改行する */
br.sp { display: none; }

@media (max-width: 600px) {
	br.sp { display: inline; }
}

.container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 32px; /* 記事が画面の端に寄りすぎないよう左右に余白をとる */
}

/* ============================================================
   ヘッダー ＋ カテゴリのホバードロップダウン
   ============================================================ */

.site-header {
	background: var(--color-primary);
	color: #fff;
	position: relative;
	z-index: 10;
}

.site-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	min-height: 64px;
}

.site-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
}

.site-title a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ロゴ画像を設定していない場合に、サイト名の前に出す簡易アイコン（積み上がる棒グラフ） */
.site-title__icon {
	width: 22px;
	height: 22px;
	flex: none;
	fill: currentColor;
	stroke: none;
}

/* --- ハンバーガーボタン（スマホのみ表示） --- */
.menu-toggle {
	display: none; /* PCでは隠す。900px以下で表示する */
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	padding: 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
}

.menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* --- ドロアーの背景の黒幕（スマホのみ） --- */
.drawer-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s;
	z-index: 50;
}

.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* --- ドロアーを閉じる×ボタン（スマホのみ表示） --- */
.drawer-close {
	display: none;
	position: absolute;
	top: 10px;
	right: 12px;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: var(--color-muted);
	cursor: pointer;
}

/* --- ドロアー内の検索窓（スマホのみ表示） --- */
.drawer-search { display: none; }

/* --- グローバルナビ --- */
.global-nav > ul {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}

.global-nav a {
	display: block;
	padding: 20px 16px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.global-nav > ul > li { position: relative; }

.global-nav > ul > li:hover > a,
.global-nav > ul > li:focus-within > a {
	background: rgba(255, 255, 255, 0.15);
}

/* 子を持つ項目には▼を付けて、ホバーで開くことを示す */
.global-nav .has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 6px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	transform: translateY(2px);
}

/* --- サブカテゴリ（ホバーで表示） --- */
.sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #fff;
	color: var(--color-text);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

	/* 通常は隠す。visibility+opacityで切り替えるとフェードできる */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.global-nav > ul > li:hover > .sub-menu,
.global-nav > ul > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sub-menu a {
	padding: 10px 18px;
	font-weight: 500;
	color: var(--color-text);
}

.sub-menu a:hover { background: var(--color-bg-soft); color: var(--color-primary); }

.sub-menu .count { color: var(--color-muted); font-size: 12px; margin-left: 4px; }

/* ============================================================
   ヘッダー下：自動スライド（ピックアップ記事）
   ============================================================ */

.pickup-slider {
	background: #fff;
	border-bottom: 1px solid var(--color-line);
	padding: 28px 0;
}

.pickup-slider__title {
	margin: 0 0 16px;
	font-size: 18px;
	border-left: 4px solid var(--color-primary);
	padding-left: 10px;
}

/* 矢印をスライダーの左右に置くため、外側を基準にする */
.pickup-slider__body {
	position: relative;
}

.pickup-slider__viewport {
	overflow: hidden;
	position: relative;
}

.pickup-slider__track {
	display: flex;
	gap: 16px;
	transition: transform .5s ease;
	will-change: transform;
}

.pickup-slider__item {
	flex: 0 0 calc((100% - 48px) / 4); /* 4枚見せ（PC） */
	text-decoration: none;
}

.pickup-slider__thumb {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	padding: 8px;
}

.pickup-slider__label {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	/* タイトルは2行で省略して高さを揃える */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pickup-slider__item:hover .pickup-slider__label { color: var(--color-primary); }

.pickup-slider__item .post-meta { margin-top: 6px; }

/* 前後ボタン（スライダーの左右に重ねて配置） */
.pickup-slider__btn {
	position: absolute;
	top: calc((100% - 44px) / 2); /* サムネ部分の中央。タイトル2行分を除いた高さで計算 */
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	background: #fff;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--color-muted);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pickup-slider__btn--prev { left: -18px; }
.pickup-slider__btn--next { right: -18px; }

.pickup-slider__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ============================================================
   本文エリア（左：記事一覧／右：サイドバー）
   ============================================================ */

.site-content {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	padding: 32px 0 56px;
	align-items: start;
}

/* セクション見出し（h2）。記事本文の見出しと同じ配色で統一する */
.section-title {
	font-size: 18px;
	margin: 0 0 16px;
	padding: 8px 14px;
	background: var(--color-bg-soft);
	border-left: 4px solid var(--color-primary);
	border-radius: 0 6px 6px 0;
}

/* TOPページの「新着記事」見出しだけ、少し大きく・太く見せる */
.section-title--lg {
	font-size: 22px;
	font-weight: 700;
	padding: 10px 16px;
	border-left-width: 5px;
}

/* --- 記事一覧の共通ラッパ --- */
.post-list { margin-bottom: 40px; }

/* --- カード形式：横2個 --- */
.post-list--card .post-list__items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

/* .post-card は記事一覧（カード形式）だけでなく、関連記事セクションなど
   カード表示を使うすべての場所で共通の見た目にする */
.post-card {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	text-decoration: none;
	display: block;
	transition: transform .2s ease, box-shadow .2s ease;
}

.post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

.post-card__thumb {
	aspect-ratio: var( --archive-thumb-ratio, 4 / 3 ); /* 「TOPページ」タブで比率を選べる */
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	padding: 10px;
	overflow: hidden;
}

/* サムネイル画像・関連画像は、枠いっぱいにトリミングして表示する */
.post-card__thumb img,
.post-item__thumb img,
.pickup-slider__thumb img,
.entry__thumb img,
.cta__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* アイキャッチ未設定の記事に出す「準備中」プレースホルダー */
.thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-soft);
	color: var(--color-muted);
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
}

.thumb-placeholder svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.post-card__body { padding: 14px 16px 18px; }

.post-card__title {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- リスト形式：横1個 --- */
.post-list--list .post-list__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.post-list--list .post-item {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 18px;
	padding: 14px;
	text-decoration: none;
	transition: box-shadow .2s ease;
}

.post-item:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }

.post-list--list .post-item__thumb {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	padding: 8px;
}

.post-list--list .post-item__title { margin: 6px 0 8px; font-size: 17px; line-height: 1.6; }

.post-list--list .post-item__excerpt {
	margin: 0;
	font-size: 14px;
	color: var(--color-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- 記事メタ（カテゴリ・日付） --- */
.post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 12px;
	color: var(--color-muted);
}

.post-cat {
	background: var(--color-accent);
	color: #fff;
	border-radius: 4px;
	padding: 2px 8px;
	font-weight: 600;
	text-decoration: none;
}

.post-cat:hover { background: #128a80; }

/* タグ（記事ページでカテゴリの右に表示。背景は黒っぽい灰色・文字は白） */
.post-tag {
	background: #4b5563;
	color: #fff;
	border-radius: 4px;
	padding: 2px 8px;
	font-weight: 600;
	text-decoration: none;
}

.post-tag:hover { background: #374151; }

/* 時計アイコン＝登録日、更新アイコン＝更新日 */
.post-date { display: inline-flex; align-items: center; gap: 4px; }

.icon {
	width: 13px;
	height: 13px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- ページャー --- */
.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.pagination a,
.pagination span {
	min-width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--color-line);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ============================================================
   サイドバー（現行サイト踏襲の仮デザイン）
   ============================================================ */

.widget {
	background: #fff;
	border-radius: 10px;
	margin-bottom: 20px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.widget__title {
	margin: 0;
	background: var(--color-primary);
	color: #fff;
	font-size: 14px;
	padding: 10px 14px;
}

.widget__body { padding: 16px; }

.widget__body form { display: flex; gap: 8px; }

.widget__body input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
}

.widget__body button {
	padding: 8px 14px;
	border: none;
	border-radius: 8px;
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.widget__list { list-style: none; margin: 0; padding: 0; }

.widget__list li { border-bottom: 1px solid var(--color-line); }

.widget__list li:last-child { border-bottom: none; }

.widget__list a {
	display: flex;
	justify-content: space-between;
	padding: 10px 14px;
	text-decoration: none;
	font-size: 14px;
}

.widget__list a:hover { color: var(--color-primary); background: var(--color-bg-soft); }

.widget__list .child a { padding-left: 30px; color: var(--color-muted); }

/* ============================================================
   WordPress標準ウィジェット（アーカイブ・カテゴリー・最近の投稿など）用の保険
   これらは独自ウィジェットと違い .widget__body という入れ物を持たず、中身を
   直接出力するため、そのままでは余白がなく詰まって見える。
   中身の要素そのものに余白を付けると <select> の枠まで太ってしまうので、
   .widget 自体に余白を持たせ、横いっぱいに出したいタイトルだけを
   負のマージンで余白の外に出す。
   ============================================================ */
.widget:not(:has(> .widget__body)) { padding: 0 16px 16px; }

.widget:not(:has(> .widget__body)) > .widget__title { margin: 0 -16px 16px; }

.widget select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: var(--color-text);
}

/* 標準ウィジェットのリスト（カテゴリー・最近の投稿など）。
   カテゴリーの件数「(18)」はリンクの外にある「ただの文字」なので、
   リンクを display:block にすると件数だけ次の行に落ちてしまう。ここでは行に余白を持たせる。 */
.widget > ul { list-style: none; margin: 0; padding: 0; }

.widget > ul li { font-size: 14px; }

.widget > ul > li {
	border-bottom: 1px solid var(--color-line);
	padding: 10px 0;
	color: var(--color-muted);
}

.widget > ul > li:last-child { border-bottom: none; }

/* 子カテゴリーは字下げして親と区別する */
.widget > ul .children {
	list-style: none;
	margin: 8px 0 0;
	padding-left: 14px;
}

.widget > ul .children li { padding: 6px 0; }

.widget a { text-decoration: none; }

.widget a:hover { color: var(--color-primary); }

.widget__list .count { color: var(--color-muted); font-size: 12px; }

/* ============================================================
   外部リンク（フッター直前）
   ============================================================ */

.external-links {
	background: #fff;
	border-top: 1px solid var(--color-line);
	padding: 28px 0;
	text-align: center;
}

.external-links__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

.external-links__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.external-links__items a { font-size: 14px; text-decoration: none; color: var(--color-primary); }

.external-links__items a:hover { text-decoration: underline; }

/* ============================================================
   フッター
   ============================================================ */

.site-footer { background: #1e293b; color: #cbd5e1; text-align: center; padding: 24px; font-size: 13px; }

/* ============================================================
   トップへ戻るボタン（右下固定。スクロールすると出てくる）
   ============================================================ */
.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;

	/* 普段は隠しておき、一定量スクロールしたら表示する */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.back-to-top:hover { background: #2c46b0; }

/* 矢印は塗りつぶしの三角ではなく、細い線の山形（不等号を上に向けたような形） */
.back-to-top svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;

	/* ボタンの上で浮いているように、常にゆっくり上下する */
	animation: backToTopFloat 1.6s ease-in-out infinite;
}

@keyframes backToTopFloat {
	0%, 100% { transform: translateY(1px); }
	50%      { transform: translateY(-3px); }
}

/* 動きを減らす設定にしている人には動かさない（酔い・めまい対策） */
@media (prefers-reduced-motion: reduce) {
	.back-to-top svg { animation: none; }
}

@media (max-width: 600px) {
	.back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; font-size: 18px; }
}

.footer-nav { list-style: none; display: flex; justify-content: center; gap: 20px; margin: 0 0 12px; padding: 0; }

.footer-nav a { text-decoration: none; font-size: 13px; }

.footer-nav a:hover { color: #fff; }

.site-info { margin: 0; }

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 900px) {
	.site-content { grid-template-columns: 1fr; }
	.pickup-slider__item { flex-basis: calc((100% - 16px) / 2); } /* 2枚見せ */

	/* ▼ ここからスマホのドロアーメニュー ▼ */
	.menu-toggle { display: flex; }
	.drawer-backdrop { display: block; }
	.drawer-close { display: block; }

	/* ヘッダーの重なり順（z-index:10）を解除する。
	   これがあるとヘッダーの中身がひとまとまりで「10番目」として扱われ、
	   中のドロアー（60）が黒幕（50）より上に出られず、メニューまで暗くなる */
	.site-header { position: static; z-index: auto; }

	/* ナビ全体を、右から出てくる引き出しに変える */
	.global-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(300px, 82%);
		background: #fff;
		color: var(--color-text);
		z-index: 60;
		padding: 60px 0 24px;
		overflow-y: auto;
		box-shadow: -6px 0 24px rgba(0, 0, 0, .18);

		/* 普段は画面の外（右）に隠しておく */
		transform: translateX(100%);
		transition: transform .3s ease;
	}

	.global-nav.is-open { transform: translateX(0); }

	.global-nav > ul { flex-direction: column; }

	.global-nav a {
		padding: 14px 20px;
		color: var(--color-text);
		border-bottom: 1px solid var(--color-line);
		font-size: 15px;
	}

	.global-nav > ul > li:hover > a,
	.global-nav > ul > li:focus-within > a { background: var(--color-bg-soft); }

	/* スマホではホバーできないので、サブカテゴリは最初から開いて見せる */
	.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		min-width: 0;
		background: var(--color-bg-soft);
	}

	.sub-menu a { padding-left: 36px; font-size: 14px; }

	/* ドロアー内では▼が誤解を招くので消す */
	.global-nav .has-children > a::after { display: none; }

	/* メニューの一番上に検索窓を置く */
	.drawer-search {
		display: flex;
		gap: 8px;
		padding: 0 20px 14px;
		border-bottom: 1px solid var(--color-line);
		margin-bottom: 2px;
	}

	.drawer-search input[type="search"] {
		flex: 1;
		min-width: 0;
		padding: 9px 12px;
		border: 1px solid #cbd5e1;
		border-radius: 8px;
		font-size: 14px;
	}

	.drawer-search button {
		padding: 9px 14px;
		border: none;
		border-radius: 8px;
		background: var(--color-primary);
		color: #fff;
		font-weight: 600;
		font-size: 14px;
		cursor: pointer;
	}
}

@media (max-width: 600px) {
	.container { padding: 0 24px; }
	.post-list--card .post-list__items { grid-template-columns: 1fr; }
	.post-list--list .post-item { grid-template-columns: 120px 1fr; gap: 12px; }

	/* スマホは1記事を中央に大きく見せ、左右に前後の記事をチラ見せする。
	   トラックの左右に13%の余白を作ることで、真ん中の記事が中央にそろう */
	.pickup-slider__item { flex-basis: 74%; }
	.pickup-slider__track { padding: 0 13%; }

	/* 矢印が中央の記事に重ならないよう、チラ見せ部分の上に置く */
	.pickup-slider__btn--prev { left: 2px; }
	.pickup-slider__btn--next { right: 2px; }
	.pickup-slider__btn { width: 34px; height: 34px; font-size: 16px; }
}

/* ============================================================
   404ページ（テーマ本体の style.css と同じ内容）
   ============================================================ */

.error-404 {
	max-width: 720px;
	margin: 0 auto;
	padding: 64px 20px 96px;
	text-align: center;
}

.error-404__code {
	margin: 0;
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary);
	letter-spacing: 0.05em;
}

.error-404__title { margin: 16px 0 12px; font-size: 24px; }

.error-404__text { color: #555; margin-bottom: 32px; }

.error-404__search { max-width: 420px; margin: 0 auto 24px; }

.error-404__search form { display: flex; gap: 8px; }

.error-404__search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 15px;
}

.error-404__search button {
	padding: 10px 18px;
	border: none;
	border-radius: 8px;
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.error-404__home-link {
	display: inline-block;
	padding: 12px 32px;
	border-radius: 999px;
	background: var(--color-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.error-404__home-link:hover { background: #128b80; }

.error-404__recent { margin-top: 56px; text-align: left; }

.error-404__recent h2 {
	font-size: 18px;
	border-left: 4px solid var(--color-primary);
	padding-left: 10px;
}

.error-404__recent ul { list-style: none; padding: 0; margin: 0; }

.error-404__recent li { border-bottom: 1px solid var(--color-line); }

.error-404__recent li a { display: block; padding: 12px 4px; text-decoration: none; }

.error-404__recent li a:hover { color: var(--color-primary); }

/* ============================================================
   パンくずリスト（記事一覧・記事詳細・固定ページで使用）
   ============================================================ */

.breadcrumb { background: #fff; border-bottom: 1px solid var(--color-line); }

.breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--color-muted);
}

.breadcrumb a { text-decoration: none; }

.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }

/* 項目のあいだに「›」を自動で入れる */
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: #b6bcc7; }

.breadcrumb li:last-child { color: var(--color-text); font-weight: 600; }

/* ============================================================
   ページ見出し（記事一覧のカテゴリ名など）
   ============================================================ */

.page-head { padding: 28px 0 4px; }

/* TOP・記事一覧・検索結果などのページ見出し（h1）。記事本文の見出しと同じ配色で統一する */
.page-head__title {
	margin: 0;
	font-size: 24px;
	padding: 12px 18px;
	background: var(--color-bg-soft);
	border-left: 5px solid var(--color-primary);
	border-radius: 0 8px 8px 0;
}

.page-head__title .count { font-size: 14px; color: var(--color-muted); font-weight: 500; margin-left: 8px; }

.page-head__desc { margin: 12px 0 0; color: var(--color-muted); font-size: 14px; }

/* カテゴリー説明文（管理画面で入力）にh2〜h4を書いた場合も、記事本文と同じ見た目にする */
.page-head__desc h2,
.page-head__desc h3,
.page-head__desc h4 {
	font-size: 16px;
	margin: 1em 0 .5em;
}

/* ============================================================
   記事詳細・固定ページの本体
   ============================================================ */

.entry {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	overflow: hidden;
	margin-bottom: 24px;
}

/* タイトル・日付の下、本文の上に表示。entry__inner の内側にあるが、
   左右いっぱいに見せたいので entry__inner の余白ぶんを打ち消す */
.entry__thumb {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	text-align: center;
	padding: 12px;
	margin: 0 -28px 24px;
}

.entry__inner { padding: 24px 28px 32px; }

.entry__title { margin: 10px 0 12px; font-size: 26px; line-height: 1.5; }

.entry__meta { padding-bottom: 14px; }

/* タイトル下の注意書き（【PR】広告を含む…など。「広告」タブで設定） */
.entry__disclosure {
	margin: -4px 0 16px;
	font-size: 12px;
	color: var(--color-muted);
	line-height: 1.5;
}

/* --- 本文の見た目（記事詳細・固定ページ共通） --- */
.entry__content { font-size: 16px; }

.entry__content > *:first-child { margin-top: 0; }

.entry__content p { margin: 0 0 1.6em; }

.entry__content h2 {
	font-size: 21px;
	margin: 2em 0 .9em;
	padding: 10px 14px;
	background: var(--color-bg-soft);
	border-left: 5px solid var(--color-primary);
	border-radius: 0 6px 6px 0;
}

.entry__content h3 {
	font-size: 18px;
	margin: 1.8em 0 .7em;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--color-primary);
}

.entry__content h4 {
	font-size: 18px; /* h3と同じ大きさ */
	margin: 1.6em 0 .6em;
	padding: 8px 12px;
	background: var(--color-bg-soft); /* h2と同じ背景色 */
	border-left: 3px solid #8b95a8; /* グレー系 */
}

.entry__content h5 {
	font-size: 18px; /* h3と同じ大きさ */
	margin: 1.5em 0 .5em;
	color: #444;
}

/* h5は見出しらしさが弱いので、行頭に印を付ける */
.entry__content h5::before {
	content: "■";
	color: #8b95a8; /* グレー系 */
	margin-right: 6px;
	font-size: 12px;
}

.entry__content ul,
.entry__content ol { margin: 0 0 1.6em; padding-left: 1.4em; }

.entry__content li { margin-bottom: .5em; }

.entry__content a { color: var(--color-primary); }

.entry__content blockquote {
	margin: 0 0 0.1em;
	padding: 14px 18px;
	background: var(--color-bg-soft);
	border-left: 4px solid #cbd5e1;
	color: #444;
	font-size: 15px;
}

.entry__content blockquote p:last-child { margin-bottom: 0; }

/* 画像引用用のblockquote。使い方：
   <blockquote class="quote-img"><img src="..." alt="..." /></blockquote>
   の直後に <p class="st-share">出典：...</p> を置く */
.entry__content blockquote.quote-img {
	padding: 12px;
	text-align: center;
}

.entry__content blockquote.quote-img img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}

.entry__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.6em;
	font-size: 14px;
}

.entry__content th,
.entry__content td { border: 1px solid var(--color-line); padding: 10px 12px; text-align: left; }

.entry__content th { background: var(--color-primary); color: #fff; font-weight: 700; }

/* 表は横に長くなりがちなので、はみ出す分はスクロールさせる */
.table-scroll { overflow-x: auto; margin: 0 0 1.6em; }

.table-scroll table { margin-bottom: 0; }

/* 注意書きボックス（メモボックス） */
.entry__content .note {
	background: #fff8e1;
	border: 1px solid #f0d98c;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0 0 1.6em;
	font-size: 15px;
}

.entry__content .note p:last-child { margin-bottom: 0; }

/* 「注意：」のように <strong> で書かれた見出し部分は、太字ではなくラベル（バッジ）として見せる。
   既存の記事もこのCSSだけで見た目が変わるので、本文側の書き方を変える必要はない */
.entry__content .note strong:first-child {
	display: block;
	width: fit-content;
	background: #f0d98c;
	color: #7a5b00;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 8px;
}

/* ============================================================
   アコーディオン（クイックタグ「アコーディオン」用）
   使い方：<details class="accordion"><summary>見出し</summary><div class="accordion__body">本文</div></details>
   ブラウザ標準の <details>/<summary> を使うので、JavaScriptなしで開閉できる
   ============================================================ */
.entry__content .accordion {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 10px;
	margin: 0 0 1.6em;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ヘッダー部分を色で塗って「押せる場所」だとひと目でわかるようにする */
.entry__content .accordion summary {
	list-style: none; /* ブラウザ標準の三角マークを消して、自前の＋アイコンに差し替える */
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 50px 14px 18px;
	font-weight: 700;
	font-size: 15px;
	background: var(--color-primary);
	color: #fff;
	position: relative;
	transition: background .15s ease;
}

.entry__content .accordion summary:hover { background: #2c46b0; }

.entry__content .accordion summary::-webkit-details-marker { display: none; }

/* 右端の＋アイコン。開いているときは－に変わる（丸で囲んで押せる場所だと強調する） */
.entry__content .accordion summary::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	transform: translateY(-50%);
}

.entry__content .accordion__icon {
	position: absolute;
	right: 16px;
	top: 50%;
	width: 26px;
	height: 26px;
	transform: translateY(-50%);
	pointer-events: none;
}

.entry__content .accordion__icon::before,
.entry__content .accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	transition: transform .2s ease;
}

.entry__content .accordion__icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.entry__content .accordion__icon::after  { width: 2px; height: 12px; transform: translate(-50%, -50%); }

.entry__content .accordion[open] .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }

.entry__content .accordion__body {
	padding: 18px;
	background: #fffdf5;
	border-top: none;
}

.entry__content .accordion__body > *:last-child { margin-bottom: 0; }

/* ============================================================
   AIプロンプトボックス（クイックタグ「AIプロンプト」用）
   使い方：<div class="ai-prompt"><p class="ai-prompt__label">ラベル文</p><pre>プロンプト本文</pre></div>
   ============================================================ */
.entry__content .ai-prompt {
	background: #1e1e2e;
	border-radius: 8px;
	margin: 0 0 1.6em;
	overflow: hidden;
}

.entry__content .ai-prompt__label {
	margin: 0;
	background: #2d2d44;
	color: #b8c0ff;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 16px;
}

.entry__content .ai-prompt pre {
	margin: 0;
	padding: 16px;
	color: #e4e4f0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-x: auto;
}

/* ============================================================
   段組みボックス（クイックタグ「2カラム」「3カラム」用）
   使い方：<div class="grid-2col"><div>1つ目</div><div>2つ目</div></div>
   中の要素はいくつでも入れられる（3カラムなら3の倍数で使うときれいに並ぶ）
   ============================================================ */
.entry__content .grid-2col,
.entry__content .grid-3col {
	display: grid;
	gap: 16px;
	margin: 0 0 1.6em;
}

.entry__content .grid-2col { grid-template-columns: repeat(2, 1fr); }
.entry__content .grid-3col { grid-template-columns: repeat(3, 1fr); }

.entry__content .grid-2col > *,
.entry__content .grid-3col > * {
	background: var(--color-bg-soft);
	border: 1px solid var(--color-line);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0;
}

/* スマホでは2カラム・3カラムとも1列に積む */
@media (max-width: 600px) {
	.entry__content .grid-2col,
	.entry__content .grid-3col {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   ナンバーリスト（丸数字を色付きで見せる）
   ============================================================ */
.entry__content ol.num-list {
	list-style: none;
	counter-reset: num;
	padding: 16px 16px 16px 0;
	margin-bottom: 1.8em;
	border: 2px solid var(--color-primary);
	border-radius: 8px;
}

.entry__content ol.num-list > li {
	position: relative;
	counter-increment: num;
	padding: 4px 0 4px 44px;
	margin: 0 0 8px 16px;
	min-height: 32px;
}

.entry__content ol.num-list > li:last-child { margin-bottom: 0; }

.entry__content ol.num-list > li::before {
	content: counter(num);
	position: absolute;
	left: 0;
	top: 2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   チェックリスト（青枠＋青背景。チェック印は白）
   ============================================================ */
.entry__content ul.check-list {
	list-style: none;
	padding: 16px 16px 16px 0;
	margin-bottom: 1.8em;
	background: #eaf0fd; /* 薄い青背景 */
	border: 2px solid var(--color-primary);
	border-radius: 8px;
}

.entry__content ul.check-list > li {
	position: relative;
	padding: 4px 0 4px 34px;
	margin: 0 0 8px 16px;
}

.entry__content ul.check-list > li:last-child { margin-bottom: 0; }

.entry__content ul.check-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: var(--color-primary);
	/* 白いチェックマークを背景画像で描く */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 15px;
	background-position: center;
	background-repeat: no-repeat;
}

/* ============================================================
   メモボックス（見出し付きの囲み）
   ============================================================ */
.entry__content .memo-box {
	border: 2px solid var(--color-primary);
	border-radius: 8px;
	margin: 0 0 1.8em;
	overflow: hidden;
}

.entry__content .memo-box__title {
	background: var(--color-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 8px 16px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.entry__content .memo-box__title::before { content: "📝"; }

.entry__content .memo-box__body { padding: 14px 18px; }

.entry__content .memo-box__body > *:last-child { margin-bottom: 0; }

/* ============================================================
   引用（テキスト・画像）＋ 出典（サイト名とURL）
   ============================================================ */
.entry__content .quote-box {
	background: var(--color-bg-soft);
	border: 1px solid var(--color-line);
	border-left: 4px solid #cbd5e1;
	border-radius: 0 8px 8px 0;
	padding: 16px 18px 12px;
	margin: 0 0 1.8em;
}

.entry__content .quote-box__body { margin: 0; color: #444; }

.entry__content .quote-box__body > *:last-child { margin-bottom: 0; }

/* 画像引用のとき、中の画像に軽く枠を付ける */
.entry__content .quote-box img { border-radius: 6px; display: block; }

/* 出典表示（サイト名 → リンク） */
.entry__content .quote-box__cite {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	color: var(--color-muted);
	text-align: right;
	font-style: normal;
}

.entry__content .quote-box__cite::before { content: "出典："; }

.entry__content .quote-box__cite a { color: var(--color-primary); word-break: break-all; }

/* ============================================================
   黄色マーカー・赤字（文字の一部を強調する）
   ============================================================ */
.entry__content .ymarker {
	background: linear-gradient(transparent 60%, #fff176 60%);
	padding: 0 1px;
}

.entry__content .text-red { color: #d63638; font-weight: 700; }

/* ボタンリンク（背景みどり・文字白）。記事本文だけでなくカテゴリー説明文などでも使えるよう、
   .entry__content に限定しない汎用クラスにしてある。
   クイックタグで <a class="link-btn" href="URL">文字</a> のように使う */
.link-btn {
	display: inline-block;
	background: #17a598;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 6px;
}

.link-btn:hover { background: #128a80; color: #fff; }

/* CTAボックス（角丸カード＋黄色マーカー＋ボタン一覧）。本文中に直接HTMLを貼り付けて使う
   構成：.custom-cta-box > .ymarker（黄色マーカー） / .custom-cta-text（📌の一言） / .custom-cta-button（ボタン複数） */
.custom-cta-box {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.custom-cta-box .ymarker {
	background: linear-gradient(transparent 65%, #fff59d 65%);
	font-weight: 700;
}

.custom-cta-box .custom-cta-text {
	font-weight: 700;
	margin: 0 0 12px;
}

.custom-cta-box .custom-cta-button {
	display: inline-block;
	background: #2ea8c4;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	text-align: center;
	padding: 10px 16px;
	border-radius: 8px;
	margin: 0 8px 8px 0;
}

.custom-cta-box .custom-cta-button:hover { background: #248aa1; color: #fff; }

/* 参考リンク（別タブで開く外部・関連ページへの誘導）。本文中に貼り付けて使う
   使い方：<a class="ref-link" href="URL" target="_blank" rel="noopener">参考ページ：日本政策金利の推移(JPY)</a>
   末尾に別タブを示す ↗ アイコンが自動で付く */
.ref-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0;
	background: #f4f8fb;
	border: 1px solid #d6e2ec;
	border-left: 4px solid #2ea8c4;
	border-radius: 6px;
	padding: 10px 14px;
	color: #1a5a6e;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.4;
}

.ref-link::before {
	content: "\1f517"; /* 🔗 リンクアイコン */
	font-size: 0.95em;
}

.ref-link::after {
	content: "\2197"; /* ↗ 別タブで開くことを示す */
	font-weight: 700;
	color: #2ea8c4;
}

.ref-link:hover {
	background: #e9f2f7;
	color: #123f4d;
	text-decoration: none;
}

/* 出典表記（本文末や引用元の控えめなクレジット）。使い方：
   <p class="st-share">出典：<a href="URL" target="_blank" rel="noopener">サイト名</a></p> */
.st-share {
	font-size: 0.85em;
	color: #888;
	margin: 8px 0;
}

.st-share a {
	color: #2ea8c4;
	text-decoration: underline;
}

.st-share a:hover { color: #248aa1; }

/* ============================================================
   関連記事リンク（[related_link id="123"] ショートコードの出力。本文中に埋め込む）
   サムネイルは表示せず、ラベル＋タイトルを横並びにするだけのシンプルな形
   ============================================================ */
.entry__content .related-link {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--color-bg-soft);
	border: 1px solid var(--color-line);
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 1.8em;
	text-decoration: none;
	color: var(--color-text);
}

.entry__content .related-link:hover { border-color: var(--color-primary); background: #eef1fb; }

.entry__content .related-link__label {
	flex: none;
	display: inline-block;
	background: var(--color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
	padding: 2px 8px;
}

.entry__content .related-link__title {
	font-weight: 600;
	font-size: 14px;
	text-decoration: none; /* 下線は付けない */
	line-height: 1.5;
}

/* ============================================================
   会話ふきだし（ショートコードで本文に入れる）
   例：[talk icon="1" side="left"]テキスト[/talk]
   ============================================================ */

.talk {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 1.8em;
}

/* side="right" のときは左右を入れ替える */
.talk--right { flex-direction: row-reverse; }

.talk__speaker { flex: none; width: 64px; text-align: center; }

.talk__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}

.talk__name {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--color-muted);
	line-height: 1.3;
}

.talk__bubble {
	position: relative;
	background: var(--color-bg-soft);
	border: 1px solid var(--color-line);
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 15px;
	max-width: 85%;
}

.talk__bubble p { margin: 0 0 .8em; }

.talk__bubble p:last-child { margin-bottom: 0; }

/* ふきだしの三角。枠線を出すため、少しずらして2枚重ねる */
.talk__bubble::before,
.talk__bubble::after {
	content: "";
	position: absolute;
	top: 20px;
	border: 9px solid transparent;
}

.talk--left .talk__bubble::before {
	left: -18px;
	border-right-color: var(--color-line);
}

.talk--left .talk__bubble::after {
	left: -16px;
	border-right-color: var(--color-bg-soft);
}

.talk--right .talk__bubble::before {
	right: -18px;
	border-left-color: var(--color-line);
}

.talk--right .talk__bubble::after {
	right: -16px;
	border-left-color: var(--color-bg-soft);
}

/* 「会話アイコンを動かす」がONのときだけ、水滴のように「ぷるるん」と揺れる（AFFINGERの会話アイコン風） */
.talk--animate .talk__icon {
	animation: talkJelly 1.8s ease-in-out infinite;
	transform-origin: center bottom;
}

@keyframes talkJelly {
	0%, 100% { transform: scale(1, 1); }
	10%      { transform: scale(0.92, 1.1); }
	20%      { transform: scale(1.08, 0.9); }
	30%      { transform: scale(0.96, 1.05); }
	40%      { transform: scale(1.02, 0.98); }
	50%      { transform: scale(1, 1); }
}

/* 動きを減らす設定にしている人には動かさない（酔い・めまい対策） */
@media (prefers-reduced-motion: reduce) {
	.talk--animate .talk__icon { animation: none; }
}

/* ============================================================
   広告枠（H2見出しの手前に自動で入る）
   ============================================================ */

.ad-slot {
	margin: 0 0 1.8em;
	padding: 14px;
	background: #fff;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	text-align: center;
}

.ad-slot__label {
	display: block;
	font-size: 11px;
	color: var(--color-muted);
	margin-bottom: 8px;
}

.ad-slot__box {
	background: var(--color-bg-soft);
	border-radius: 6px;
	padding: 28px 10px;
	font-size: 13px;
	color: var(--color-muted);
}

/* --- 目次 --- */
.toc {
	background: var(--color-bg-soft);
	border: 1px solid var(--color-line);
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 2em;
}

/* 見出しと「閉じる」ボタンを横並びにする */
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.toc__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }

.toc__head .toc__title { margin: 0; }

.toc__toggle {
	border: 1px solid var(--color-line);
	background: #fff;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-muted);
	cursor: pointer;
	white-space: nowrap;
}

.toc__toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

.toc__body { margin-top: 8px; }

/* 閉じたときは中身だけ隠す（見出しとボタンは残す） */
.toc.is-collapsed .toc__body { display: none; }

.toc ol { margin: 0; padding-left: 1.3em; font-size: 14px; }

.toc li { margin-bottom: 6px; }

.toc a { text-decoration: none; }

.toc a:hover { color: var(--color-primary); text-decoration: underline; }

.toc ol ol { margin-top: 6px; color: var(--color-muted); }

/* ============================================================
   CTA（シェアボタンの下。管理画面「記事ページ」タブで編集）
   ============================================================ */

.cta {
	margin-top: 28px;
	border: 2px solid var(--color-accent);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.cta__head {
	background: var(--color-accent);
	color: #fff;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 700;
	margin: 0;
}

.cta__body { padding: 18px; display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }

.cta__thumb {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	padding: 8px;
}

.cta__title { margin: 0 0 6px; font-size: 17px; }

.cta__text { margin: 0 0 14px; font-size: 14px; color: var(--color-muted); }

.cta__btn {
	display: inline-block;
	background: var(--color-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: 11px 28px;
	border-radius: 999px;
	font-size: 15px;
}

.cta__btn:hover { background: #128b80; }

/* --- シェアボタン --- */
.share { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

.share__btn {
	flex: 1;
	min-width: 120px;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
}

.share__btn--x { background: #111; }
.share__btn--fb { background: #1877f2; }
.share__btn--line { background: #06c755; }
.share__btn--copy { background: var(--color-muted); }

/* --- 著者ボックス --- */
.author-box {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	padding: 20px;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 16px;
	align-items: start;
	margin-bottom: 24px;
}

.author-box__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea, #764ba2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
	text-align: center;
}

.author-box__name { margin: 0 0 6px; font-size: 16px; }

.author-box__text { margin: 0; font-size: 13px; color: var(--color-muted); }

/* --- 前後の記事 --- */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 32px;
}

.post-nav__item {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	padding: 14px 18px;
	text-decoration: none;
	transition: box-shadow .2s ease;
}

.post-nav__item:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }

.post-nav__label { font-size: 12px; color: var(--color-muted); }

.post-nav__title {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-nav__item--next { text-align: right; }

/* --- 関連記事 --- */
.related { margin-bottom: 32px; }

.related__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ============================================================
   サイドバーのプロフィール
   ============================================================ */

/* --- サイドバーの目次（スクロールすると画面に張り付いて追従する） --- */

/* サイドバーを記事と同じ高さまで伸ばす。これがないと目次が追従できない */
.sidebar { align-self: stretch; }

.widget--sticky {
	position: sticky;
	top: 16px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
}

/* 目次が長いときは、目次の中だけスクロールさせる */
.widget--sticky .widget__body { overflow-y: auto; }

.toc-list { margin: 0; padding-left: 1.2em; font-size: 13px; }

.toc-list li { margin-bottom: 7px; }

.toc-list li:last-child { margin-bottom: 0; }

.toc-list a { text-decoration: none; }

.toc-list a:hover { color: var(--color-primary); text-decoration: underline; }

.toc-list ol { margin-top: 7px; padding-left: 1.2em; color: var(--color-muted); }

.profile { text-align: center; }

.profile__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin: 0 auto 10px;
	background: linear-gradient(135deg, #667eea, #764ba2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
	text-align: center;
}

.profile__name { margin: 0 0 8px; font-size: 16px; }

.profile__text { margin: 0; font-size: 13px; color: var(--color-muted); text-align: left; }

/* プロフィール欄のSNSリンク（「全体」タブで設定。空欄のものは表示されません） */
.profile__sns {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.profile__sns a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	transition: opacity .15s ease;
}

.profile__sns a:hover { opacity: .8; }

.profile__sns svg { width: 16px; height: 16px; fill: currentColor; }

/* 各SNSの公式カラー */
.profile__sns .icon-x-link      { background: #000; }
.profile__sns .icon-instagram-link {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.profile__sns .icon-youtube-link { background: #ff0000; }

/* お問い合わせボタン（SNSアイコンの下。「全体」タブでリンク先を設定） */
.profile__contact {
	display: block;
	margin-top: 14px;
	padding: 10px 16px;
	background: #17a598;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	border-radius: 999px;
}

.profile__contact:hover { background: #128a80; }

/* ============================================================
   新しいページ用のレスポンシブ
   ============================================================ */

@media (max-width: 900px) {
	.related__items { grid-template-columns: repeat(2, 1fr); }

	/* スマホは1列になり、サイドバーが記事の下に来るため追従はさせない */
	.widget--sticky { position: static; max-height: none; display: block; }
	.widget--sticky .widget__body { overflow-y: visible; }
}

@media (max-width: 600px) {
	.entry__inner { padding: 20px 18px 26px; }
	.entry__thumb { margin: 0 -18px 20px; }
	.entry__title { font-size: 21px; }
	.entry__content h2 { font-size: 18px; }
	.entry__content h3,
	.entry__content h4,
	.entry__content h5 { font-size: 16px; }
	.related__items { grid-template-columns: 1fr; }
	.post-nav { grid-template-columns: 1fr; }
	.post-nav__item--next { text-align: left; }
	.author-box { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.author-box__text { text-align: left; }
	.cta__body { grid-template-columns: 1fr; text-align: center; }
	.cta__thumb { aspect-ratio: 16 / 9; }
	.cta__btn { display: block; }
}