@charset "UTF-8";
/*
Theme Name: Tatara
Author: たたら
Description: 自作のクラシックテーマ。装飾はテーマが持たず、記事は標準ブロックで書く方針。theme.json でカラーだけ管理する。
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tatara
*/

/* ==========================================================================
   0. リセット（最小限）
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
	padding: 0;
}

ul, ol { list-style-position: outside; }

img, video, iframe, svg { max-width: 100%; height: auto; }

/* ==========================================================================
   1. トークン
   色は theme.json 側で定義する。ここには色を書かない。
   ========================================================================== */
:root {
	--content-width: 720px;
	--wide-width: 1100px;
	--gutter: 20px;

	--font-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", Meiryo, sans-serif;

	/* --- 配色 ---------------------------------------------------------
	   ネイビーを濃さで3段階に分け、青のアクセントを1色だけ差す構成。
	   色数を絞ると全体がまとまり、アクセントが効く。

	   注意：--wp--preset--color--sango-main は過去記事のインラインstyleが
	   直接参照しているので、テーマの色として使い回さないこと。
	   ここで使うのは --accent 系だけ。
	   ------------------------------------------------------------------ */
	--navy-900:  #152740;  /* ヘッダー・フッター */
	--navy-800:  #1d3350;  /* カテゴリータブ */
	--navy-700:  #24425f;  /* 見出しの線・強い文字 */

	--accent:      #2f6fae; /* リンク・ボタン。落ち着いた青 */
	--accent-deep: #1f4e79; /* 押した状態・濃いめの差し色 */
	--accent-soft: #eef4fa; /* 薄い背景 */

	--amber: #d98324;       /* 注意・CTAの補助色（使いすぎない） */

	--text:      #2c3441;
	--text-weak: #6b7686;
	--line:      #e2e6ec;
	--bg:        #fff;
	--bg-sub:    #f6f8fa;
	--link:      var(--accent);

	--radius: 8px;
}

/* ==========================================================================
   2. ベース
   ========================================================================== */
body {
	font-family: var(--font-base);
	font-size: 17px;
	line-height: 1.9;
	color: var(--text);
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
	word-break: break-word;
	overflow-wrap: anywhere;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   3. レイアウト
   ========================================================================== */
.l-container {
	width: 100%;
	max-width: calc(var(--content-width) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.l-main { padding-block: 2.5em 4em; }

/* ヘッダー */
.l-header {
	background: var(--navy-900);
	color: #fff;
}
.l-header a { color: #fff; }
.l-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	min-height: 64px;
}
.l-header__title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.l-header__title a { color: inherit; }
.l-header__desc { margin-top: .2em; font-size: .75rem; color: rgba(255, 255, 255, .62); }

/* グローバルナビ */
.l-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	list-style: none;
	font-size: .9rem;
}
.l-nav a { color: rgba(255, 255, 255, .82); }
.l-nav a:hover { color: #fff; }

/* フッター */
.l-footer {
	background: var(--navy-900);
	padding-block: 2.5em;
	font-size: .85rem;
	color: rgba(255, 255, 255, .6);
}
.l-footer a:hover { color: #fff; }
.l-footer ul { display: flex; flex-wrap: wrap; gap: 1.2em; list-style: none; margin-bottom: 1em; }
.l-footer a { color: inherit; }

/* ==========================================================================
   4. 記事本文
   ========================================================================== */
.p-entry__title {
	font-size: 1.7rem;
	line-height: 1.45;
	margin-bottom: .5em;
}

.p-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	font-size: .8rem;
	color: var(--text-weak);
	margin-bottom: 1.8em;
}

.p-entry__thumb { margin-bottom: 2em; }
.p-entry__thumb img { width: 100%; border-radius: var(--radius); display: block; }

.p-entry__body > * { margin-block: 1.4em; }
.p-entry__body > *:first-child { margin-top: 0; }

.p-entry__body h2 { font-size: 1.4rem; line-height: 1.5; margin-top: 2.2em; }
.p-entry__body h3 { font-size: 1.2rem; line-height: 1.5; margin-top: 2em; }
.p-entry__body h4 { font-size: 1.05rem; line-height: 1.6; margin-top: 1.8em; }

.p-entry__body ul,
.p-entry__body ol { padding-left: 1.5em; }
.p-entry__body li { margin-block: .4em; }

.p-entry__body blockquote {
	padding: 1em 1.3em;
	border-left: 4px solid var(--line);
	background: var(--bg-sub);
	color: var(--text-weak);
}

.p-entry__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92em;
}
.p-entry__body th,
.p-entry__body td {
	padding: .6em .8em;
	border: 1px solid var(--line);
	text-align: left;
}
.p-entry__body th { background: var(--bg-sub); font-weight: 700; }

/* 横スクロールできる表 */
.p-entry__body figure.wp-block-table { overflow-x: auto; }

.p-entry__body code {
	padding: .15em .4em;
	border-radius: 4px;
	background: var(--bg-sub);
	font-size: .9em;
}
.p-entry__body pre {
	padding: 1em 1.2em;
	border-radius: var(--radius);
	background: #2b2f36;
	color: #e6e6e6;
	overflow-x: auto;
	font-size: .85em;
	line-height: 1.7;
}
.p-entry__body pre code { background: none; padding: 0; color: inherit; }

.p-entry__body hr {
	border: none;
	border-top: 1px solid var(--line);
}

/* 幅指定ブロック */
.alignwide {
	width: 100vw;
	max-width: var(--wide-width);
	margin-inline: calc(50% - min(50vw, var(--wide-width) / 2));
}
.alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}
.alignleft  { float: left;  margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { margin-inline: auto; text-align: center; }

/* ==========================================================================
   5. 記事一覧
   ========================================================================== */
.p-archive__title {
	font-size: 1.3rem;
	margin-bottom: 1.5em;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--line);
}

.p-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em 1.6em;
}

.p-card {
	position: relative;
	min-width: 0;
}

.p-card__link {
	display: block;
	color: inherit;
}
.p-card__link:hover { text-decoration: none; }
.p-card__link:hover .p-card__title { text-decoration: underline; }
.p-card__link:hover .p-card__thumb img { transform: scale(1.03); }

.p-card__thumb {
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-sub);
}
.p-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.p-card__thumb--empty {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--bg-sub);
}

.p-card__body { padding-top: .8em; }

.p-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.p-card__excerpt {
	margin-top: .5em;
	font-size: .82rem;
	color: var(--text-weak);
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.p-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .8em;
	margin-top: .5em;
	font-size: .72rem;
	color: var(--text-weak);
}

/* カテゴリーラベルはサムネイルの上に重ねる */
.p-card > .p-cat {
	position: absolute;
	top: .6em;
	left: .6em;
	z-index: 2;
}

@media (max-width: 600px) {
	.p-cards { grid-template-columns: 1fr; gap: 1.8em; }
	.p-card__title { font-size: .95rem; }
}

/* ページャー */
.p-pager {
	margin-top: 3em;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	justify-content: center;
}
.p-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: .6em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: .9rem;
	color: var(--text);
}
.p-pager .page-numbers.current {
	background: var(--link);
	border-color: transparent;
	color: #fff;
}

/* ==========================================================================
   6. その他
   ========================================================================== */
.p-notfound { padding-block: 3em; text-align: center; }

.u-skip-link {
	position: absolute;
	left: -9999px;
}
.u-skip-link:focus {
	left: 1em;
	top: 1em;
	z-index: 100;
	padding: .6em 1em;
	background: #fff;
	border: 2px solid var(--link);
	border-radius: var(--radius);
}

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

/* ==========================================================================
   7. レスポンシブ
   ========================================================================== */
@media (max-width: 782px) {
	body { font-size: 16px; }
	.p-entry__title { font-size: 1.4rem; }
	.p-entry__body h2 { font-size: 1.25rem; }
	.p-entry__body h3 { font-size: 1.1rem; }
	.p-card__thumb { flex-basis: 96px; }
	.l-header__inner { flex-wrap: wrap; min-height: 0; padding-block: .8em; }
	.l-nav ul { gap: 1em; font-size: .85rem; }
}

/* ==========================================================================
   8. レイアウト（サイドバー対応）
   ウィジェットが空ならサイドバーは出力されず、1カラムのまま
   ========================================================================== */
.l-grid--sidebar {
	max-width: calc(var(--wide-width) + var(--gutter) * 2);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 3em;
	align-items: start;
}

.l-primary { min-width: 0; }

.l-sidebar {
	position: sticky;
	top: 1.5em;
	font-size: .9rem;
}

.p-widget { margin-bottom: 2.2em; }
.p-widget__title {
	font-size: .95rem;
	margin-bottom: .8em;
	padding-bottom: .4em;
	border-bottom: 2px solid var(--line);
}
.p-widget ul { list-style: none; }
.p-widget li { padding: .4em 0; border-bottom: 1px solid var(--line); }
.p-widget a { color: var(--text); }

@media (max-width: 900px) {
	.l-grid--sidebar {
		grid-template-columns: 1fr;
		gap: 3em;
	}
	.l-sidebar { position: static; }
}

/* ==========================================================================
   9. パンくず
   ========================================================================== */
.p-breadcrumb {
	margin-bottom: 1.5em;
	font-size: .75rem;
	color: var(--text-weak);
}
.p-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em;
	list-style: none;
}
.p-breadcrumb li + li::before {
	content: "›";
	margin-right: .4em;
	opacity: .6;
}
.p-breadcrumb a { color: inherit; }

/* ==========================================================================
   10. 目次
   ========================================================================== */
.p-toc {
	margin: 2.5em 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-sub);
	overflow: hidden;
}

.p-toc__toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.p-toc__head {
	display: block;
	position: relative;
	padding: .9em 2.8em .9em 1.2em;
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	user-select: none;
}

.p-toc__head::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.2em;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-135deg);
	opacity: .5;
	transition: transform .2s ease;
}

.p-toc__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}

.p-toc__toggle:checked ~ .p-toc__body {
	max-height: 300vh;
}

.p-toc__toggle:not(:checked) ~ .p-toc__head::after {
	transform: rotate(45deg);
	margin-top: -2px;
}

.p-toc__list {
	padding: 0 1.4em 1.2em 2.4em;
	font-size: .88rem;
	line-height: 1.7;
}
.p-toc__list li { margin: .45em 0; }
.p-toc__sub {
	padding-left: 1.3em;
	list-style: circle;
	font-size: .95em;
	opacity: .9;
}
.p-toc a { color: var(--text); }

/* 目次から飛んだとき、見出しが画面の上端に貼りつかないように */
.p-entry__body h2[id],
.p-entry__body h3[id] { scroll-margin-top: 1.5em; }

/* ==========================================================================
   11. 関連記事
   ========================================================================== */
.p-related { margin-top: 4em; }

.p-related__title {
	font-size: 1.1rem;
	margin-bottom: 1.2em;
	padding-bottom: .5em;
	border-bottom: 2px solid var(--line);
}

.p-related__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4em;
}

.p-related__item { color: inherit; }
.p-related__item:hover { text-decoration: none; }
.p-related__item:hover .p-related__name { text-decoration: underline; }

.p-related__thumb img,
.p-related__thumb--empty {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 5px;
	background: var(--bg-sub);
}

.p-related__name {
	display: block;
	margin-top: .6em;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.5;
}

@media (max-width: 782px) {
	.p-related__list { grid-template-columns: repeat(2, 1fr); gap: 1.1em; }
	.p-related__name { font-size: .8rem; }
}

/* ==========================================================================
   12. 検索フォーム・記事ナビ
   ========================================================================== */
.p-searchform { display: flex; gap: .5em; margin: 1.5em 0; }
.p-searchform input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .7em 1em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 16px; /* iOSで自動ズームさせない */
	font-family: inherit;
}
.p-searchform button {
	padding: .7em 1.4em;
	border: none;
	border-radius: var(--radius);
	background: var(--link);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

.post-navigation {
	margin-top: 3em;
	padding-top: 1.5em;
	border-top: 1px solid var(--line);
	font-size: .85rem;
}
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;
}
.post-navigation a { color: var(--text); }

.p-entry__tags {
	margin-top: 2.5em;
	font-size: .8rem;
	color: var(--text-weak);
}
.p-entry__tags a {
	display: inline-block;
	margin: .2em .3em .2em 0;
	padding: .2em .8em;
	border: 1px solid var(--line);
	border-radius: 40px;
	color: inherit;
}

/* ==========================================================================
   13. 広告枠
   ========================================================================== */
.p-ad {
	display: block;
	margin: 2.5em 0;
	text-align: center;
}

.p-ad__label {
	display: block;
	margin-bottom: .5em;
	font-size: .7rem;
	letter-spacing: .08em;
	color: var(--text-weak);
}

.p-ad__item { margin-bottom: 1em; }
.p-ad__item:last-child { margin-bottom: 0; }
.p-ad__item img { max-width: 100%; height: auto; }

/* ==========================================================================
   14. シェアボタン
   ========================================================================== */
.p-share { margin: 3em 0 0; }

.p-share__label {
	display: block;
	margin-bottom: .7em;
	font-size: .75rem;
	color: var(--text-weak);
	letter-spacing: .05em;
}

.p-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
}

.p-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 1.2em;
	border: none;
	border-radius: var(--radius);
	background: #6c7583;
	color: #fff;
	font-family: inherit;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: filter .15s ease;
}
.p-share__btn:hover { filter: brightness(1.1); text-decoration: none; color: #fff; }

.p-share__btn--x        { background: #000; }
.p-share__btn--facebook { background: #1877f2; }
.p-share__btn--hatena   { background: #00a4de; }
.p-share__btn--line     { background: #06c755; }
.p-share__btn--pocket   { background: #ef4056; }
.p-share__btn--copy     { background: var(--text-weak); }

@media (max-width: 480px) {
	.p-share__list { display: grid; grid-template-columns: repeat(3, 1fr); }
	.p-share__btn { width: 100%; padding: 0 .6em; font-size: .75rem; }
}

/* ==========================================================================
   15. 人気記事
   ========================================================================== */
.p-popular { list-style: none; counter-reset: none; }

.p-popular__item { border-bottom: 1px solid var(--line); }
.p-popular__item:last-child { border-bottom: none; }

.p-popular__item a {
	display: grid;
	grid-template-columns: auto 60px 1fr;
	align-items: center;
	gap: .7em;
	padding: .7em 0;
	color: var(--text);
}
.p-popular__item a:hover { text-decoration: none; }
.p-popular__item a:hover .p-popular__name { text-decoration: underline; }

.p-popular__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bg-sub);
	color: var(--text-weak);
	font-size: .7rem;
	font-weight: 700;
}
.p-popular__item:nth-child(1) .p-popular__rank,
.p-popular__item:nth-child(2) .p-popular__rank,
.p-popular__item:nth-child(3) .p-popular__rank {
	background: var(--link);
	color: #fff;
}

.p-popular__thumb img {
	width: 60px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.p-popular__name {
	font-size: .82rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   16. モバイル追従メニュー
   スマホ幅でだけ表示。PCでは完全に消える
   ========================================================================== */
html { scroll-behavior: smooth; }

.p-mobilenav { display: none; }

.p-mobilenav__state {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 782px) {

	.p-mobilenav { display: block; }

	/* バー本体 */
	.p-mobilenav__bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		border-top: 1px solid var(--line);
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(6px);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.p-mobilenav__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .15em;
		min-height: 54px;
		color: var(--text);
		font-size: .65rem;
		line-height: 1;
		cursor: pointer;
		user-select: none;
	}
	.p-mobilenav__btn:hover { text-decoration: none; }

	.p-mobilenav__icon { font-size: 1.15rem; line-height: 1; }

	/* 引き出し */
	.p-mobilenav__drawer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 61;
		max-height: 70vh;
		padding: 1.4em 1.2em calc(70px + env(safe-area-inset-bottom));
		border-radius: 14px 14px 0 0;
		background: #fff;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
		overflow-y: auto;
		transform: translateY(105%);
		transition: transform .25s ease;
	}

	#mobilenav-menu:checked   ~ .p-mobilenav__drawer--menu,
	#mobilenav-search:checked ~ .p-mobilenav__drawer--search {
		transform: translateY(0);
	}

	/* 背後を覆う膜。タップすると閉じる */
	.p-mobilenav__overlay {
		position: fixed;
		inset: 0;
		z-index: 59;
		background: rgba(0, 0, 0, .35);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
	}

	#mobilenav-menu:checked   ~ .p-mobilenav__overlay--menu,
	#mobilenav-search:checked ~ .p-mobilenav__overlay--search {
		opacity: 1;
		visibility: visible;
	}

	.p-mobilenav__list,
	.p-mobilenav__drawer ul {
		list-style: none;
		font-size: .95rem;
	}
	.p-mobilenav__drawer li {
		border-bottom: 1px solid var(--line);
	}
	.p-mobilenav__drawer li:last-child { border-bottom: none; }
	.p-mobilenav__drawer a {
		display: block;
		padding: .9em .2em;
		color: var(--text);
	}
	.p-mobilenav__drawer ul ul { padding-left: 1em; font-size: .9em; }
	.p-mobilenav__drawer .p-searchform { margin: 0; }

	/* バーの高さぶん、フッターに余白を足す */
	.l-footer { padding-bottom: calc(3.5em + env(safe-area-inset-bottom)); }
}

/* 「上へ」の飛び先 */
#top {
	display: block;
	position: absolute;
	top: 0;
}

/* 動きを減らす設定にしている人には効かせない */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.p-mobilenav__drawer,
	.p-mobilenav__overlay { transition: none; }
}

/* ==========================================================================
   17. カテゴリーラベル
   色は wp_head で出力される --cat-color から取る
   ========================================================================== */
.p-cat {
	display: inline-block;
	padding: .15em .8em;
	border-radius: 40px;
	background: var(--cat-color, #8b93a7);
	color: #fff !important;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .02em;
}
.p-cat:hover { text-decoration: none; filter: brightness(1.1); }

/* カテゴリーページの見出しに差し色 */
body[class*="cat-"] .p-archive__title {
	border-bottom-color: var(--cat-color, var(--line));
}

/* 記事ページの見出し。
   カテゴリーに関係なく常に同じ色にする（--cat-color は使わない）。 */
.p-entry__body h2 {
	padding: .5em 0 .5em .8em;
	border-left: 5px solid var(--accent);
	color: var(--navy-700);
}

.p-entry__body h3 {
	padding-bottom: .35em;
	border-bottom: 2px solid var(--line);
	color: var(--navy-700);
}

.p-entry__body h4 { color: var(--navy-700); }

/* ==========================================================================
   18. 読了時間
   ========================================================================== */
.p-entry__time::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-right: .35em;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	opacity: .6;
	vertical-align: -1px;
}

/* ==========================================================================
   19. 追従目次（PCのみ）
   ========================================================================== */
.p-stickytoc {
	margin-bottom: 2.2em;
	padding: 1.1em 1.2em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-sub);
	max-height: calc(100vh - 6em);
	overflow-y: auto;
}

.p-stickytoc__head {
	margin-bottom: .7em;
	font-size: .85rem;
	font-weight: 700;
}

.p-stickytoc__list {
	list-style: none;
	font-size: .78rem;
	line-height: 1.6;
}

.p-stickytoc__item { margin: .5em 0; }
.p-stickytoc__item--h3 { padding-left: 1em; font-size: .95em; opacity: .85; }
.p-stickytoc a {
	color: var(--text-weak);
	border-left: 2px solid transparent;
	padding-left: .6em;
	display: block;
}
.p-stickytoc a:hover {
	color: var(--text);
	border-left-color: var(--accent);
	text-decoration: none;
}

/* PCでは本文中の目次を隠し、サイドバー側だけにする */
@media (min-width: 901px) {
	.has-sticky-toc .p-toc { display: none; }
}
@media (max-width: 900px) {
	.p-stickytoc { display: none; }
}

/* ==========================================================================
   20. 前後の記事ナビ
   ========================================================================== */
.p-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	margin-top: 3em;
	padding-top: 2em;
	border-top: 1px solid var(--line);
}

.p-postnav__item {
	display: block;
	padding: .9em 1em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
}
.p-postnav__item:hover { text-decoration: none; border-color: var(--accent); }
.p-postnav__item--next { grid-column: 2; text-align: right; }

.p-postnav__label {
	display: block;
	margin-bottom: .5em;
	font-size: .7rem;
	color: var(--text-weak);
}

.p-postnav__inner { display: flex; gap: .7em; align-items: center; }
.p-postnav__item--next .p-postnav__inner { flex-direction: row-reverse; }

.p-postnav__thumb { flex: 0 0 52px; }
.p-postnav__thumb img {
	width: 52px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.p-postnav__title {
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: left;
}

@media (max-width: 600px) {
	.p-postnav { grid-template-columns: 1fr; }
	.p-postnav__item--next { grid-column: 1; text-align: left; }
	.p-postnav__item--next .p-postnav__inner { flex-direction: row; }
}

/* ==========================================================================
   21. ブロックパターン用のスタイル
   標準ブロックにクラスを付けているだけなので、テーマを変えると
   装飾だけが外れて、中身はそのまま残る
   ========================================================================== */
.p-box {
	margin: 2.2em 0;
	padding: 1.3em 1.5em;
	border-radius: var(--radius);
	background: var(--bg-sub);
	border: 1px solid var(--line);
}
.p-box > :first-child { margin-top: 0; }
.p-box > :last-child { margin-bottom: 0; }

.p-box__title {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: .7em !important;
}

.p-box__note {
	margin-top: 1em !important;
	font-size: .75rem !important;
	color: var(--text-weak);
	line-height: 1.7;
}

/* この記事でわかること */
.p-box--summary {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.p-box--summary .p-box__title { color: var(--accent-deep); }

/* CTA */
.p-box--cta {
	border: 2px solid var(--accent);
	background: #fff;
	text-align: left;
}
.p-box--cta .p-box__title { font-size: 1.1rem; color: var(--navy-700); }
.p-cta__button .wp-block-button__link {
	background: var(--accent);
	border-radius: 40px;
	padding: .85em 2.4em;
	font-weight: 700;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.p-cta__button .wp-block-button__link:hover { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }

/* 注意 */
.p-box--note {
	border-color: var(--amber);
	background: #fdf6ec;
}
.p-box--note .p-box__title { color: #a3620f; }

/* ポイント・まとめ */
.p-box--point {
	border-color: #3d8f68;
	background: #f2f9f5;
}
.p-box--point .p-box__title { color: #276b4b; }

/* Q&A */
.p-faq {
	margin: 2em 0;
	padding-bottom: 1.4em;
	border-bottom: 1px dashed var(--line);
}
.p-faq__q {
	font-weight: 700;
	font-size: 1.02rem;
	margin-bottom: .6em !important;
	padding-left: 1.8em;
	position: relative;
}
.p-faq__q::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4em;
	height: 1.4em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: .75em;
}
.p-faq__a { padding-left: 1.8em; }

/* 比較表 */
.p-compare table { font-size: .88em; }
.p-compare thead th { background: var(--bg-sub); text-align: center; }
.p-compare tbody td:first-child { background: var(--bg-sub); font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   22. コメント欄
   ========================================================================== */
.p-comments { margin-top: 4em; }

.p-comments__title {
	display: flex;
	align-items: center;
	gap: .6em;
	font-size: 1.1rem;
	margin-bottom: 1.2em;
	padding-bottom: .5em;
	border-bottom: 2px solid var(--line);
}

.p-comments__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding-inline: .5em;
	border-radius: 40px;
	background: var(--accent);
	color: #fff;
	font-size: .72rem;
}

/* --- 投稿済みのコメント --- */
.p-comments__list { list-style: none; }
.p-comments__list .children { list-style: none; padding-left: 1.6em; }

.p-comment { margin-bottom: 1.2em; }

.p-comment__inner {
	padding: 1.1em 1.3em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}

.children .p-comment__inner {
	background: var(--bg-sub);
	border-left: 3px solid var(--accent);
}

.p-comment__head {
	display: flex;
	align-items: center;
	gap: .7em;
	margin-bottom: .7em;
}

.p-comment__avatar img {
	border-radius: 50%;
	display: block;
}

.p-comment__meta {
	display: flex;
	flex-direction: column;
	gap: .15em;
	min-width: 0;
}

.p-comment__author {
	font-weight: 700;
	font-size: .9rem;
	color: var(--navy-700);
}

.p-comment__date {
	font-size: .72rem;
	color: var(--text-weak);
}

.p-comment__body {
	font-size: .92rem;
	line-height: 1.85;
}
.p-comment__body p { margin-bottom: .8em; }
.p-comment__body p:last-child { margin-bottom: 0; }

.p-comment__pending {
	padding: .5em .9em;
	border-radius: 5px;
	background: #fdf6ec;
	color: #a3620f;
	font-size: .8rem;
}

.p-comment__actions { margin-top: .8em; }

.p-comment__reply a {
	display: inline-block;
	padding: .25em 1em;
	border: 1px solid var(--line);
	border-radius: 40px;
	font-size: .75rem;
	color: var(--text-weak);
}
.p-comment__reply a:hover {
	border-color: var(--accent);
	color: var(--accent);
	text-decoration: none;
}

/* --- 入力フォーム ---
   ここからがフォームだと一目で分かるよう、枠で囲って背景を変える */
.comment-respond {
	margin-top: 2.5em;
	padding: 1.6em 1.8em 1.8em;
	border: 1px solid var(--line);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius);
	background: var(--bg-sub);
}

.p-commentform__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .8em;
	font-size: 1.05rem;
	color: var(--navy-700);
	margin-bottom: .3em;
}

.p-commentform__cancel a {
	font-size: .78rem;
	font-weight: 400;
	color: var(--text-weak);
}

.p-commentform__notes {
	margin-bottom: 1.4em;
	font-size: .78rem;
	color: var(--text-weak);
	line-height: 1.7;
}

.p-commentform__row { margin-bottom: 1.1em; }

.p-commentform__row label {
	display: block;
	margin-bottom: .35em;
	font-size: .82rem;
	font-weight: 700;
	color: var(--navy-700);
}

.p-comments__req {
	display: inline-block;
	margin-left: .5em;
	padding: .1em .55em;
	border-radius: 3px;
	background: var(--amber);
	color: #fff;
	font-size: .62rem;
	font-weight: 700;
	vertical-align: 1px;
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond textarea {
	width: 100%;
	padding: .75em 1em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.7;
}
.comment-respond input:focus,
.comment-respond textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(47, 111, 174, .15);
}

/* 名前とメールは横並び */
@media (min-width: 600px) {
	.comment-form-author,
	.comment-form-email {
		display: inline-block;
		width: calc(50% - .5em);
		vertical-align: top;
	}
	.comment-form-author { margin-right: .9em; }
}

/* チェックボックスの行だけラベルを横に */
.p-commentform__row--check {
	display: flex;
	align-items: flex-start;
	gap: .5em;
}
.p-commentform__row--check label {
	margin-bottom: 0;
	font-weight: 400;
	font-size: .78rem;
	color: var(--text-weak);
	line-height: 1.5;
}
.p-commentform__row--check input { margin-top: .2em; }

.form-submit { margin-bottom: 0; }

.p-commentform__submit {
	padding: .85em 2.6em;
	border: none;
	border-radius: 40px;
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: .92rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.p-commentform__submit:hover {
	background: var(--accent-deep);
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

.p-comments__closed {
	margin-top: 1.5em;
	padding: 1em;
	border-radius: var(--radius);
	background: var(--bg-sub);
	font-size: .85rem;
	color: var(--text-weak);
	text-align: center;
}

/* ==========================================================================
   23. ヘッダーのカテゴリータブ
   ========================================================================== */
.l-tabs {
	border-top: 1px solid rgba(255, 255, 255, .1);
	background: var(--navy-800);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.l-tabs::-webkit-scrollbar { display: none; }

.l-tabs__list {
	display: flex;
	gap: 0;
	list-style: none;
	width: max-content;
	min-width: 100%;
	max-width: calc(var(--wide-width) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.l-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .85em 1.1em;
	border-bottom: 3px solid transparent;
	color: rgba(255, 255, 255, .68);
	font-size: .82rem;
	font-weight: 700;
	white-space: nowrap;
}
.l-tabs__item:hover { color: #fff; text-decoration: none; }

.l-tabs__item.is-current {
	color: #fff;
	background: rgba(255, 255, 255, .07);
	border-bottom-color: var(--cat-color, #fff);
}

.l-tabs__count {
	font-size: .7em;
	font-weight: 400;
	opacity: .65;
}

@media (max-width: 782px) {
	.l-tabs__item { padding: .75em .9em; font-size: .78rem; }
}

/* ==========================================================================
   24. アーカイブの見出しエリア
   ========================================================================== */
.p-archivehead {
	margin-bottom: 2em;
	padding: 1.4em 1.6em;
	border-radius: var(--radius);
	background: var(--bg-sub);
	border-left: 5px solid var(--cat-color, var(--line));
}

.p-archivehead__title {
	font-size: 1.35rem;
	line-height: 1.4;
}

.p-archivehead__count {
	margin-top: .4em;
	font-size: .78rem;
	color: var(--text-weak);
}

.p-archivehead__filter {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	margin-left: .8em;
	padding: .15em .8em;
	border-radius: 40px;
	background: #fff;
	border: 1px solid var(--line);
}

.p-archivehead__desc {
	margin-top: .9em;
	font-size: .88rem;
	line-height: 1.8;
}
.p-archivehead__desc p:last-child { margin-bottom: 0; }

.p-archivehead__children {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-top: 1em;
	list-style: none;
}
.p-archivehead__children a {
	display: inline-block;
	padding: .25em .9em;
	border: 1px solid var(--line);
	border-radius: 40px;
	background: #fff;
	color: var(--text);
	font-size: .78rem;
}
.p-archivehead__children span { opacity: .6; font-size: .9em; }

/* ==========================================================================
   25. 検索フォーム（カテゴリー絞り込み付き）
   ========================================================================== */
.p-searchform__cat {
	flex: 0 0 auto;
	max-width: 40%;
	padding: .7em .8em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font-family: inherit;
	font-size: 16px;
}

@media (max-width: 600px) {
	.p-searchform { flex-wrap: wrap; }
	.p-searchform input[type="search"] { flex: 1 1 100%; }
	.p-searchform__cat { flex: 1 1 auto; max-width: none; }
}

/* ==========================================================================
   26. 404ページ
   ========================================================================== */
.p-404 { text-align: center; padding: 2em 0 1em; }

.p-404__code {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--line);
	letter-spacing: .05em;
}

.p-404__title { font-size: 1.3rem; margin-top: .3em; }

.p-404__lead {
	margin-top: .8em;
	font-size: .88rem;
	color: var(--text-weak);
	line-height: 1.9;
}

.p-404 .p-searchform { max-width: 520px; margin-inline: auto; }

.p-404__section { margin-top: 3em; }

.p-404__cats {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	list-style: none;
}

/* ==========================================================================
   27. 配色の仕上げ
   ========================================================================== */

/* 引用・コード・区切りをネイビー寄りに */
.p-entry__body blockquote {
	border-left-color: var(--accent);
	background: var(--accent-soft);
	color: var(--text);
}

.p-entry__body pre { background: var(--navy-900); }

/* 目次をアクセント寄りに */
.p-toc {
	border-color: var(--line);
	background: var(--accent-soft);
}
.p-toc__head { color: var(--navy-700); }

/* サイドバーの見出し */
.p-widget__title,
.p-stickytoc__head { color: var(--navy-700); }

/* ページャーの現在地 */
.p-pager .page-numbers.current { background: var(--accent); }

/* 一覧の見出しまわり */
.p-archivehead__title,
.p-related__title,
.p-comments__title,
.p-404__title { color: var(--navy-700); }

/* ボタン類 */
.p-searchform button { background: var(--accent); }
.p-searchform button:hover { background: var(--accent-deep); }

/* モバイル追従メニューをネイビーに合わせる */
@media (max-width: 782px) {
	.p-mobilenav__bar {
		background: rgba(21, 39, 64, .95);
		border-top-color: rgba(255, 255, 255, .12);
	}
	.p-mobilenav__btn { color: rgba(255, 255, 255, .85); }
	.l-footer { padding-bottom: calc(3.5em + env(safe-area-inset-bottom)); }
}

/* ヘッダーのロゴ画像が暗くて見えない場合の保険。
   白抜きロゴを使うか、この行を有効にする。
.l-header .custom-logo { filter: brightness(0) invert(1); }
*/

/* ==========================================================================
   28. PR表記
   ========================================================================== */
.p-pr {
	display: flex;
	align-items: center;
	gap: .7em;
	margin: 0 0 2em;
	padding: .6em 1em;
	border-radius: var(--radius);
	background: var(--bg-sub);
	font-size: .75rem;
	color: var(--text-weak);
}

.p-pr__mark {
	flex: 0 0 auto;
	padding: .15em .7em;
	border-radius: 3px;
	background: var(--text-weak);
	color: #fff;
	font-weight: 700;
	letter-spacing: .05em;
}

/* ==========================================================================
   29. 著者プロフィール
   ========================================================================== */
.p-author {
	display: flex;
	gap: 1.2em;
	margin-top: 3em;
	padding: 1.5em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-sub);
}

.p-author__avatar { flex: 0 0 72px; }
.p-author__avatar img { border-radius: 50%; display: block; }

.p-author__label {
	font-size: .7rem;
	color: var(--text-weak);
	letter-spacing: .05em;
}

.p-author__name {
	margin-top: .2em;
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy-700);
}

.p-author__bio {
	margin-top: .6em;
	font-size: .85rem;
	line-height: 1.8;
	color: var(--text);
}

.p-author__link { margin-top: .8em; font-size: .78rem; }

@media (max-width: 600px) {
	.p-author { flex-direction: column; gap: .9em; padding: 1.2em; }
	.p-author__avatar { flex: 0 0 auto; }
}

/* ==========================================================================
   30. ピックアップ
   ========================================================================== */
.p-pickup { margin-bottom: 3em; }

.p-pickup__title {
	font-size: 1rem;
	margin-bottom: 1em;
	padding-left: .6em;
	border-left: 4px solid var(--accent);
	color: var(--navy-700);
}

.p-pickup__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2em;
}

.p-pickup__item { position: relative; min-width: 0; }
.p-pickup__item > a { display: block; color: inherit; }
.p-pickup__item > a:hover { text-decoration: none; }
.p-pickup__item > a:hover .p-pickup__name { text-decoration: underline; }

.p-pickup__thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-sub);
}
.p-pickup__thumb img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.p-pickup__name {
	display: block;
	margin-top: .6em;
	font-size: .88rem;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.p-pickup__item > .p-cat { position: absolute; top: .5em; left: .5em; z-index: 2; }

@media (max-width: 600px) {
	.p-pickup__list { grid-template-columns: 1fr 1fr; gap: 1em; }
	.p-pickup__item:first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   31. バッジ
   ========================================================================== */
.p-badge {
	position: absolute;
	top: .6em;
	right: .6em;
	z-index: 2;
	padding: .15em .7em;
	border-radius: 3px;
	font-size: .65rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: .05em;
}
.p-badge--new     { background: #d94f4f; }
.p-badge--updated { background: var(--accent); }

/* ==========================================================================
   32. 読了進捗バー
   ========================================================================== */
.p-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 80;
	background: transparent;
	pointer-events: none;
}
.p-progress__fill {
	display: block;
	height: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* ==========================================================================
   33. パターン：吹き出し・ランキング
   ========================================================================== */
.p-say {
	display: flex;
	align-items: flex-start;
	gap: 1em;
	margin: 2em 0;
}
.p-say__avatar { flex: 0 0 64px; margin: 0 !important; text-align: center; }
.p-say__avatar img { border-radius: 50%; }
.p-say__avatar figcaption {
	margin-top: .3em !important;
	font-size: .68rem !important;
	color: var(--text-weak);
	line-height: 1.3;
}
.p-say__text {
	position: relative;
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 1em 1.2em;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	font-size: .92rem;
	line-height: 1.8;
}
.p-say__text::before,
.p-say__text::after {
	content: "";
	position: absolute;
	top: 1.1em;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 7px 10px 7px 0;
}
.p-say__text::before { left: -10px; border-right-color: var(--line); }
.p-say__text::after  { left: -9px;  border-right-color: #fff; }

@media (max-width: 600px) {
	.p-say__avatar { flex-basis: 48px; }
	.p-say__text { font-size: .88rem; padding: .85em 1em; }
}

/* ランキング */
.p-rank {
	position: relative;
	margin: 1.4em 0;
	padding: 1.3em 1.5em 1.3em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}
.p-rank > :first-child { margin-top: 0; }
.p-rank > :last-child { margin-bottom: 0; }

.p-rank__label {
	display: inline-block;
	margin-bottom: .5em !important;
	padding: .2em 1em;
	border-radius: 40px;
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
}
.p-rank--1 { border-color: #d4af37; }
.p-rank--1 .p-rank__label { background: #d4af37; }
.p-rank--2 { border-color: #9aa4b0; }
.p-rank--2 .p-rank__label { background: #9aa4b0; }
.p-rank--3 { border-color: #b4794a; }
.p-rank--3 .p-rank__label { background: #b4794a; }

.p-rank__name {
	font-size: 1.08rem !important;
	font-weight: 700;
	color: var(--navy-700);
	margin-bottom: .5em !important;
}

/* ==========================================================================
   34. ヘッダーカード（おすすめ記事）
   ========================================================================== */
.p-headcards {
	background: var(--navy-800);
	padding-block: 1.2em;
}

.p-headcards__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
}
.p-headcards--1 .p-headcards__inner { grid-template-columns: 1fr; }
.p-headcards--2 .p-headcards__inner { grid-template-columns: repeat(2, 1fr); }
.p-headcards--3 .p-headcards__inner { grid-template-columns: repeat(3, 1fr); }

.p-headcards__item {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: #fff;
	color: var(--text);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	transition: transform .2s ease, box-shadow .2s ease;
}
.p-headcards__item:hover {
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.p-headcards__thumb {
	display: block;
	background: var(--bg-sub);
}
.p-headcards__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.p-headcards__body { display: block; padding: .7em .9em .9em; }

.p-headcards__title {
	display: block;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--navy-700);
}

.p-headcards__desc {
	display: block;
	margin-top: .3em;
	font-size: .72rem;
	color: var(--text-weak);
	line-height: 1.6;
}

@media (max-width: 782px) {
	.p-headcards { padding-block: .9em; }
	.p-headcards__inner,
	.p-headcards--3 .p-headcards__inner,
	.p-headcards--4 .p-headcards__inner { grid-template-columns: repeat(2, 1fr); gap: .7em; }
	.p-headcards__title { font-size: .78rem; }
	.p-headcards__desc { display: none; }
}

/* ==========================================================================
   35. アニメーション
   JSが動いた場合だけ有効。動かなければ最初から表示される
   ========================================================================== */
.has-reveal .p-card,
.has-reveal .p-pickup__item,
.has-reveal .p-related__item,
.has-reveal .p-headcards__item {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s ease, transform .45s ease;
}

.has-reveal .p-card.is-shown,
.has-reveal .p-pickup__item.is-shown,
.has-reveal .p-related__item.is-shown,
.has-reveal .p-headcards__item.is-shown {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.has-reveal .p-card,
	.has-reveal .p-pickup__item,
	.has-reveal .p-related__item,
	.has-reveal .p-headcards__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   36. プロフィールのSNSリンク
   ========================================================================== */
.p-author__sns {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-top: .8em;
	list-style: none;
}
.p-author__sns a {
	display: inline-block;
	padding: .25em .9em;
	border: 1px solid var(--line);
	border-radius: 40px;
	background: #fff;
	font-size: .75rem;
	color: var(--text-weak);
}
.p-author__sns a:hover {
	border-color: var(--accent);
	color: var(--accent);
	text-decoration: none;
}

/* ==========================================================================
   37. 口コミ・評価
   ========================================================================== */
.p-voice {
	margin: 1.2em 0;
	padding: 1.1em 1.3em;
	border-left: 4px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--bg-sub);
}
.p-voice > :first-child { margin-top: 0; }
.p-voice > :last-child { margin-bottom: 0; }

.p-voice__meta {
	font-size: .78rem !important;
	color: var(--text-weak);
	margin-bottom: .5em !important;
	letter-spacing: .03em;
}
.p-voice__meta strong { color: var(--navy-700); }

.p-voice__text {
	font-size: .9rem !important;
	line-height: 1.85;
	margin-bottom: 0 !important;
}

.p-box--score {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.p-box--score .p-box__title { color: var(--accent-deep); }

.p-score table { background: #fff; }
.p-score td:first-child { width: 55%; font-weight: 700; }
.p-score td:last-child { letter-spacing: .1em; color: #d4922a; white-space: nowrap; }