@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.1.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   swell-tech-blog デザインシステム
   コンセプト: 「クラウド構成図（ブループリント）の上に組んだブログ」
   - 紙面: 方眼ペーパー / カード: リソースノード / ヘッダー: コンソール
   ========================================================================== */

:root {
	/* パレット */
	--tb-ink: #0e1526;        /* 深藍: ヘッダー・フッター・本文テキスト */
	--tb-ink-2: #16203a;      /* 深藍の一段明るい面 */
	--tb-paper: #f3f6fa;      /* 方眼紙の地 */
	--tb-grid: #e3e9f3;       /* 方眼線 */
	--tb-node: #ffffff;       /* カード地 */
	--tb-line: #ccd7e8;       /* 図の線・罫線 */
	--tb-violet: #6d5ae6;     /* 回路バイオレット: リンク・アクセント */
	--tb-violet-thin: #efecfd;
	--tb-teal: #14b8a6;       /* ステータスティール: ラベル・状態表示 */
	--tb-teal-bright: #3ddbc0;/* ダーク面上のティール */
	--tb-slate: #5a6b85;      /* 補助テキスト */

	/* 書体 */
	--tb-font-display: "M PLUS 1 Code", "IBM Plex Sans JP", sans-serif;
	--tb-font-body: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	--tb-font-mono: "IBM Plex Mono", "M PLUS 1 Code", monospace;

	--tb-radius: 10px;

	/* SWELLのテーマ変数を上書きして全体に波及させる */
	--color_main: var(--tb-violet);
	--color_deep: var(--tb-ink);
	--color_link: var(--tb-violet);
	--color_border: var(--tb-line);
	--color_content_bg: var(--tb-node);
}

/* ==========================================================================
   1. ベース: 方眼紙の紙面と本文書体
   ========================================================================== */

body {
	font-family: var(--tb-font-body);
	color: var(--tb-ink);
	background-color: var(--tb-paper) !important;
	background-image:
		linear-gradient(var(--tb-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--tb-grid) 1px, transparent 1px) !important;
	background-size: 24px 24px !important;
}

a {
	color: var(--tb-violet);
}

::selection {
	background: var(--tb-violet);
	color: #fff;
}

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--tb-violet);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   2. ヘッダー: コンソールバー
   ========================================================================== */

.l-header,
.l-fixHeader {
	background: var(--tb-ink) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: none;
}

.l-header__inner,
.l-fixHeader__inner,
.l-fixHeader__gnav {
	background: transparent !important;
}

/* SWELLは::beforeを不透明度付きの背景レイヤーに使っている */
.l-fixHeader::before {
	background-color: var(--tb-ink) !important;
}

.l-header__bar {
	background: #0a0f1d;
	color: #c7d4ea;
}

/* ロゴ: ターミナルプロンプト */
.l-header .c-headLogo,
.l-fixHeader .c-headLogo {
	font-family: var(--tb-font-mono);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.l-header .c-headLogo.-txt a,
.l-fixHeader .c-headLogo.-txt a {
	color: #f4f7fc;
}

.l-header .c-headLogo.-txt a::before,
.l-fixHeader .c-headLogo.-txt a::before {
	content: "❯ ";
	color: var(--tb-teal-bright);
	font-family: var(--tb-font-mono);
}

/* グローバルナビ: ディレクトリ風ラベル */
.l-header .c-gnav > li > a,
.l-fixHeader .c-gnav > li > a {
	color: rgba(244, 247, 252, 0.88);
	font-family: var(--tb-font-mono);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.l-header .c-gnav > li > a:hover,
.l-fixHeader .c-gnav > li > a:hover {
	color: var(--tb-teal-bright);
}

/* GitHubリンク: アイコン表示（テキストはスクリーンリーダー向けに残る） */
.c-gnav .gnav-github > a .ttl {
	display: inline-block;
	width: 20px;
	height: 20px;
	overflow: hidden;
	font-size: 0;
	background-color: rgba(244, 247, 252, 0.88);
	vertical-align: middle;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.c-gnav .gnav-github > a:hover .ttl {
	background-color: var(--tb-teal-bright);
}

/* SPドロワー内メニューもディレクトリ風に */
.p-spMenu__nav .menu-item a {
	font-family: var(--tb-font-mono);
	font-size: 13.5px;
}

.l-header__customBtn,
.l-header__menuBtn,
.l-header .c-iconBtn,
.l-header__bar a {
	color: #e8eef8 !important;
}

.c-catchphrase {
	color: rgba(199, 212, 234, 0.75);
	font-family: var(--tb-font-mono);
	font-size: 11px;
}

/* ==========================================================================
   3. ヒーロー: 生きた構成図
   ========================================================================== */

.tb-hero {
	background-color: var(--tb-ink);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 24px 24px;
	color: #f4f7fc;
	border-bottom: 1px solid var(--tb-line);
}

.tb-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding-top: 64px;
	padding-bottom: 64px;
}

.tb-hero__eyebrow {
	font-family: var(--tb-font-mono);
	font-size: 13px;
	color: #8fa3c4;
	margin-bottom: 20px;
}

.tb-hero__prompt {
	color: var(--tb-teal-bright);
	margin-right: 0.5em;
}

.tb-hero__title {
	font-family: var(--tb-font-display);
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 46px);
	line-height: 1.35;
	letter-spacing: 0.02em;
	margin: 0 0 20px;
}

.tb-hero__cursor {
	display: inline-block;
	width: 0.55em;
	height: 1em;
	margin-left: 0.15em;
	vertical-align: text-bottom;
	background: var(--tb-teal-bright);
	animation: tb-blink 1.1s steps(1) infinite;
}

@keyframes tb-blink {
	50% { opacity: 0; }
}

.tb-hero__lead {
	font-size: 15px;
	line-height: 2;
	color: #c2cee4;
	max-width: 34em;
	margin-bottom: 28px;
}

/* カテゴリーのディレクトリツリー */
.tb-hero__tree {
	font-family: var(--tb-font-mono);
	font-size: 13.5px;
	line-height: 1.9;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tb-hero__treeRoot {
	color: #8fa3c4;
}

.tb-hero__tree li:not(.tb-hero__treeRoot)::before {
	content: "├── ";
	color: #55688c;
}

.tb-hero__tree li:not(.tb-hero__treeRoot):last-child::before {
	content: "└── ";
}

.tb-hero__tree a {
	color: #e8eef8;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.tb-hero__tree a:hover {
	color: var(--tb-teal-bright);
	border-bottom-color: var(--tb-teal-bright);
}

/* 構成図SVG */
.tb-hero__diagram svg {
	width: 100%;
	height: auto;
	display: block;
}

.tb-hero__caption {
	font-family: var(--tb-font-mono);
	font-size: 11px;
	color: #71849f;
	text-align: center;
	margin-top: 10px;
}

.tb-dg__you {
	fill: none;
	stroke: var(--tb-teal-bright);
	stroke-width: 1.5;
}

.tb-dg__vpc {
	fill: rgba(255, 255, 255, 0.02);
	stroke: #405577;
	stroke-width: 1.2;
	stroke-dasharray: 6 5;
}

.tb-dg__vpcLabel {
	fill: var(--tb-teal-bright);
	font-family: var(--tb-font-mono);
	font-size: 11px;
}

.tb-dg__node {
	fill: var(--tb-ink-2);
	stroke: #46587c;
	stroke-width: 1.2;
}

.tb-dg__label {
	fill: #b9c8e2;
	font-family: var(--tb-font-mono);
	font-size: 11px;
}

.tb-dg__wire {
	fill: none;
	stroke: #4c5f82;
	stroke-width: 1.2;
}

.tb-dg__flow {
	fill: none;
	stroke: var(--tb-teal-bright);
	stroke-width: 1.4;
	stroke-dasharray: 5 6;
	animation: tb-flow 1.6s linear infinite;
}

@keyframes tb-flow {
	to { stroke-dashoffset: -22; }
}

.tb-dg__dot {
	fill: var(--tb-teal-bright);
}

.tb-dg__pulse {
	fill: none;
	stroke: var(--tb-teal-bright);
	stroke-width: 1.5;
	animation: tb-pulse 2.2s ease-out infinite;
}

@keyframes tb-pulse {
	0% { r: 3; opacity: 0.9; }
	70% { r: 12; opacity: 0; }
	100% { r: 12; opacity: 0; }
}

/* ==========================================================================
   4. 記事カード: リソースノード
   ========================================================================== */

.p-postList.-type-card .p-postList__item {
	background: none;
}

.p-postList.-type-card .p-postList__link {
	position: relative;
	background: var(--tb-node);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-radius);
	box-shadow: 0 1px 2px rgba(14, 21, 38, 0.05);
	overflow: visible;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.p-postList.-type-card .p-postList__link:hover {
	transform: translateY(-3px);
	border-color: var(--tb-violet);
	box-shadow: 0 10px 24px rgba(14, 21, 38, 0.12);
}

/* 図面のクロップマーク（四隅） */
.p-postList.-type-card .p-postList__link::after {
	content: "";
	position: absolute;
	inset: -6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	background-image:
		linear-gradient(var(--tb-violet), var(--tb-violet)),
		linear-gradient(var(--tb-violet), var(--tb-violet)),
		linear-gradient(var(--tb-violet), var(--tb-violet)),
		linear-gradient(var(--tb-violet), var(--tb-violet)),
		linear-gradient(var(--tb-violet), var(--tb-violet)),
		linear-gradient(var(--tb-violet), var(--tb-violet)),
		linear-gradient(var(--tb-violet), var(--tb-violet)),
		linear-gradient(var(--tb-violet), var(--tb-violet));
	background-repeat: no-repeat;
	background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
}

.p-postList.-type-card .p-postList__link:hover::after,
.p-postList.-type-card .p-postList__link:focus-visible::after {
	opacity: 1;
}

/* サムネイルはカード上部にフラットに */
.p-postList.-type-card .p-postList__thumb {
	border-radius: calc(var(--tb-radius) - 1px) calc(var(--tb-radius) - 1px) 0 0;
	overflow: hidden;
}

/* カードを等高にし、日付(メタ)を常に左下へ固定する */
.p-postList.-type-card .p-postList__item {
	display: flex;
}

.p-postList.-type-card .p-postList__link {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.p-postList.-type-card .p-postList__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* 日付は右下・濃色ではっきりと */
.p-postList.-type-card .p-postList__meta {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	justify-content: flex-end;
}

.p-postList__title {
	font-family: var(--tb-font-display);
	font-weight: 700;
	line-height: 1.6;
}

.p-postList__excerpt {
	color: var(--tb-slate);
	font-size: 12.5px;
	line-height: 1.8;
}

/* カード型一覧は抜粋を出さずタイトル+日付のみ（縦長対策） */
.p-postList.-type-card .p-postList__excerpt {
	display: none;
}

/* キーワードタグ（子テーマ独自テンプレートで出力）: ピル型 */
.p-postList__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.p-postList__tag {
	font-family: var(--tb-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	color: #5443c9;
	background: var(--tb-violet-thin);
	border: 1px solid #d5cdf8;
	border-radius: 999px;
	padding: 2px 10px;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

/* 日付をモノスペースに（カード上でも読める濃さで） */
.p-postList__times,
.c-postTimes,
.c-postTimes__date {
	font-family: var(--tb-font-mono);
	font-size: 11px;
	font-weight: 500;
	color: #33415c;
}

/* カテゴリバッジ: [ label ] 形式のリソースタグ */
.c-postThumb__cat {
	background: var(--tb-ink) !important;
	color: var(--tb-teal-bright) !important;
	font-family: var(--tb-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: 4px;
	padding: 3px 8px;
}

.c-postThumb__cat.icon-folder::before {
	content: "[ ";
	font-family: var(--tb-font-mono);
	margin: 0;
}

.c-postThumb__cat.icon-folder::after {
	content: " ]";
	font-family: var(--tb-font-mono);
}

/* ==========================================================================
   5. サイドバー: 計器パネル
   ========================================================================== */

.l-sidebar .c-widget {
	background: var(--tb-node);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-radius);
	padding: 20px 18px;
	box-shadow: 0 1px 2px rgba(14, 21, 38, 0.05);
}

.l-sidebar .c-widget + .c-widget {
	margin-top: 28px;
}

/* ウィジェット見出し: ## 記法 */
.l-sidebar .c-widget__title,
.l-sidebar .wp-block-heading {
	font-family: var(--tb-font-display);
	font-weight: 700;
	font-size: 15px;
	color: var(--tb-ink);
	background: none;
	border: none;
	border-bottom: 1px solid var(--tb-line);
	padding: 0 0 10px;
	margin-bottom: 14px;
}

.l-sidebar .c-widget__title::before,
.l-sidebar .wp-block-heading::before {
	content: "## ";
	color: var(--tb-teal);
	font-family: var(--tb-font-mono);
	font-weight: 600;
}

/* カテゴリー: ディレクトリツリー */
.wp-block-categories-list {
	list-style: none;
	padding-left: 0;
	font-size: 13.5px;
}

.wp-block-categories-list .cat-item {
	border: none !important;
	padding: 3px 0;
}

.wp-block-categories-list .cat-item a {
	color: var(--tb-ink);
	text-decoration: none;
	border: none !important;
	padding: 2px 0;
}

.wp-block-categories-list .cat-item a:hover {
	color: var(--tb-violet);
}

/* SWELLのフォルダアイコン(absolute配置)をツリー記号に置き換える */
.wp-block-categories-list .cat-item a::before {
	content: "├── " !important;
	position: static !important;
	display: inline !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
	font-family: var(--tb-font-mono) !important;
	color: var(--tb-teal);
	font-size: 12px;
	margin: 0 !important;
}

.wp-block-categories-list .cat-item:last-child a::before {
	content: "└── " !important;
}

/* 最新記事リスト */
.wp-block-latest-posts__list li {
	padding: 8px 0;
	border-bottom: 1px dashed var(--tb-grid);
}

.wp-block-latest-posts__list li:last-child {
	border-bottom: none;
}

.wp-block-latest-posts__post-title {
	font-size: 13px;
	line-height: 1.7;
	color: var(--tb-ink) !important;
	text-decoration: none;
}

.wp-block-latest-posts__post-title:hover {
	color: var(--tb-violet) !important;
}

/* プロフィール: ノード化したアバター */
.p-profileBox__icon .p-profileBox__iconImg {
	border: 2px solid var(--tb-violet);
	padding: 3px;
	background: #fff;
}

.p-profileBox__name {
	font-family: var(--tb-font-mono);
	font-weight: 600;
}

.p-profileBox__text {
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--tb-slate);
}

/* 検索フォーム */
.wp-block-search__input {
	font-family: var(--tb-font-mono);
	border: 1px solid var(--tb-line) !important;
	border-radius: 6px;
	background: var(--tb-paper);
}

.wp-block-search__button {
	background: var(--tb-ink) !important;
	color: #fff !important;
	border: none;
	border-radius: 6px;
	font-family: var(--tb-font-body);
	transition: background 0.2s;
}

.wp-block-search__button:hover {
	background: var(--tb-violet) !important;
}

/* ==========================================================================
   6. 記事ページ: 見出しはマークダウン記法
   ========================================================================== */

.c-postTitle__ttl {
	font-family: var(--tb-font-display);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.01em;
}

.c-postTitle__date {
	font-family: var(--tb-font-mono);
	color: var(--tb-slate);
}

.p-articleThumb {
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-radius);
	overflow: hidden;
}

.post_content {
	line-height: 2;
}

/* h2: セクションノード */
.post_content h2 {
	font-family: var(--tb-font-display);
	font-weight: 700;
	background: var(--tb-node) !important;
	color: var(--tb-ink) !important;
	border: 1px solid var(--tb-line) !important;
	border-left: 4px solid var(--tb-violet) !important;
	border-radius: 8px;
	padding: 0.6em 0.9em !important;
}

.post_content h2::before {
	/* SWELL側は::beforeを装飾オーバーレイ(absolute)に使うため、通常のインライン文字に戻す */
	content: "## " !important;
	position: static !important;
	display: inline !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	border: none !important;
	transform: none !important;
	color: var(--tb-teal);
	font-family: var(--tb-font-mono);
	font-weight: 600;
}

.post_content h2::after,
.post_content h3::after {
	content: none !important;
}

/* h3: ### 記法 + 下線 */
.post_content h3 {
	font-family: var(--tb-font-display);
	font-weight: 700;
	background: none !important;
	border: none !important;
	border-bottom: 1px solid var(--tb-line) !important;
	padding: 0 0 0.4em !important;
	color: var(--tb-ink) !important;
}

.post_content h3::before {
	/* h2と同様、SWELLの装飾用::before(absolute)をインライン文字に戻す */
	content: "### " !important;
	position: static !important;
	display: inline !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	border: none !important;
	transform: none !important;
	color: var(--tb-teal);
	font-family: var(--tb-font-mono);
	font-weight: 600;
}

.post_content h4 {
	font-family: var(--tb-font-display);
	font-weight: 700;
	background: none !important;
	border: none !important;
	padding-left: 0.7em !important;
	border-left: 3px solid var(--tb-teal) !important;
	color: var(--tb-ink) !important;
}

/* コードブロック: コンソール面 */
.post_content pre {
	background: #0b1120 !important;
	color: #d6e2f5;
	border: 1px solid #24304a;
	border-radius: var(--tb-radius);
	font-family: var(--tb-font-mono) !important;
	font-size: 13px;
	line-height: 1.8;
}

.post_content pre code {
	background: none !important;
	color: inherit;
	font-family: var(--tb-font-mono) !important;
}

/* インラインコード */
.post_content :not(pre) > code {
	font-family: var(--tb-font-mono);
	background: var(--tb-violet-thin);
	color: #5443c9;
	border-radius: 4px;
	padding: 0.15em 0.45em;
	font-size: 0.88em;
}

/* 引用: 方眼紙の切り抜き */
.post_content blockquote {
	background-color: var(--tb-paper);
	background-image:
		linear-gradient(var(--tb-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--tb-grid) 1px, transparent 1px);
	background-size: 24px 24px;
	border: 1px solid var(--tb-line);
	border-left: 4px solid var(--tb-violet);
	border-radius: 8px;
	color: var(--tb-slate);
}

/* テーブル */
.post_content table th {
	background: var(--tb-ink);
	color: #fff;
	border-color: var(--tb-ink-2);
	font-weight: 600;
}

.post_content table td {
	border-color: var(--tb-line);
	background: var(--tb-node);
}

/* 目次パネル */
.p-toc {
	background: var(--tb-node);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-radius);
}

.p-toc__ttl {
	font-family: var(--tb-font-display);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.p-toc__ttl::before {
	content: "/* ";
	color: var(--tb-teal);
	font-family: var(--tb-font-mono);
}

.p-toc__ttl::after {
	content: " */";
	color: var(--tb-teal);
	font-family: var(--tb-font-mono);
}

.p-toc ol {
	font-family: var(--tb-font-body);
}

.p-toc li::marker {
	font-family: var(--tb-font-mono);
	color: var(--tb-violet);
}

/* 著者ボックス: サイドバーのプロフィールと意匠を揃える */
.p-authorBox {
	background: var(--tb-node);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-radius);
}

.p-authorBox .avatar {
	border: 2px solid var(--tb-violet);
	padding: 3px;
	background: #fff;
	border-radius: 50%;
}

.p-authorBox__name {
	font-family: var(--tb-font-mono);
	font-weight: 600;
}

.p-authorBox__desc {
	color: var(--tb-slate);
	line-height: 1.9;
}

/* シェアボタン: モノクロームの計器ボタン */
.c-shareBtns__btn {
	background: var(--tb-node) !important;
	color: var(--tb-ink) !important;
	border: 1px solid var(--tb-line) !important;
	border-radius: 8px !important;
	transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.c-shareBtns__btn:hover {
	border-color: var(--tb-violet) !important;
	color: var(--tb-violet) !important;
	transform: translateY(-2px);
}

/* アイコン色はボタンの文字色に追従させる（SWELLは白固定） */
.c-shareBtns__btn .c-shareBtns__icon {
	color: inherit !important;
}

/* トップへ戻るボタン */
.p-fixBtnWrap .c-fixBtn,
#go_to_top {
	background: var(--tb-ink) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
}

/* ==========================================================================
   7. ページネーション・ボタン・フッター
   ========================================================================== */

.c-pagination .page-numbers {
	font-family: var(--tb-font-mono);
	border: 1px solid var(--tb-line);
	border-radius: 6px;
	background: var(--tb-node);
	color: var(--tb-ink);
	box-shadow: none;
	transition: border-color 0.2s, color 0.2s;
}

.c-pagination .page-numbers:hover {
	border-color: var(--tb-violet);
	color: var(--tb-violet);
}

.c-pagination .page-numbers.current {
	background: var(--tb-ink);
	border-color: var(--tb-ink);
	color: #fff;
}

/* トップへ戻るボタン */
#fix_bottom_menu,
.p-fixBtnWrap .c-fixBtn {
	font-family: var(--tb-font-mono);
}

/* フッター: コンソールの終端 */
.l-footer {
	background-color: var(--tb-ink) !important;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	color: #c2cee4;
	border-top: 1px solid var(--tb-line);
}

.l-footer a {
	color: #c2cee4;
}

.l-footer .copyright {
	font-family: var(--tb-font-mono);
	font-size: 11px;
	color: #71849f;
}

/* お問い合わせフォーム (Contact Form 7) */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	border: 1px solid var(--tb-line);
	border-radius: 6px;
	background: var(--tb-node);
	padding: 0.6em 0.8em;
	font-family: var(--tb-font-body);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--tb-violet);
	outline: 1px solid var(--tb-violet);
}

.wpcf7 input[type="submit"] {
	background: var(--tb-ink);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.7em 2.4em;
	font-family: var(--tb-font-mono);
	cursor: pointer;
	transition: background 0.2s;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--tb-violet);
}

/* ==========================================================================
   8. SPメニュー・検索モーダル
   ========================================================================== */

.p-spMenu__inner {
	background: var(--tb-paper);
}

.p-searchModal__inner .c-searchForm__input,
.c-searchForm__input {
	font-family: var(--tb-font-mono);
}

/* ==========================================================================
   9. レスポンシブ・アクセシビリティ
   ========================================================================== */

@media (max-width: 959px) {
	.tb-hero__inner {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.tb-hero__diagram {
		max-width: 440px;
		margin: 0 auto;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tb-hero__cursor,
	.tb-dg__flow,
	.tb-dg__pulse {
		animation: none;
	}

	.tb-dg__pulse {
		display: none;
	}

	.p-postList.-type-card .p-postList__link,
	.c-shareBtns__btn {
		transition: none;
	}

	.p-postList.-type-card .p-postList__link:hover {
		transform: none;
	}
}