@charset "UTF-8";

/* ============================================================
   HUBRIDE Single Post (記事ページ)
   トップページのデザイン言語 (top.css) と統一：
   - 白ベース / --hb-* 設計トークン / Inter + Noto Sans JP UI
   - 全テキスト Inter + Noto Sans JP（明朝は FV のみ）
   - CTA は .hubride-btn 様式に統一（rgba + shadow + 12px radius）
   ============================================================ */

/* ---- 1. 記事ラッパ ---- */
.single .l-mainContent {
	background: #ffffff;
}
.single .l-mainContent__inner {
	padding-top: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.single #content,
.single main.l-mainContent {
	background: #ffffff;
}

/* ---- 2. パンくず ----
   背景・レイアウトは SWELL 既定（-bg-on のグレー帯 + l-container 幅）を
   そのまま使う。他ページと同じ見た目。タイポのみ HUBRIDE トーンに調整。 */
.single .p-breadcrumb {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: #999;
}
.single .p-breadcrumb a {
	color: var(--hb-text-sub, #666);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.single .p-breadcrumb a:hover { opacity: 0.65; }

/* ---- 3. アイキャッチ ---- */
.single .c-postThumb,
.single .p-singleContentHead__thumb {
	margin: 0 auto 2.5rem;
	max-width: 960px;
	border-radius: var(--hb-radius-lg, 24px);
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.single .c-postThumb img,
.single .p-singleContentHead__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- 4. タイトル & メタ（ゴシック・左寄せ） ---- */
.single .p-articleHead,
.single .c-postTitle {
	max-width: 960px;
	margin: 0 auto 1.5rem;
	padding: 0 1rem;
	text-align: left;
}
.single .c-postTitle,
.single .c-postTitle__ttl,
.single .p-singleContentHead__title,
.single .post_title {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(1rem, 1.6vw, 1.7rem) !important;
	letter-spacing: 0.05em;
	line-height: 1.6;
	text-align: left !important;
	margin: 0 0 1rem !important;
	color: var(--hb-text, #1a1a1a);
}
/* タイトル直下の更新日（時計アイコンつき "November 28, 2025"）を非表示。
   左側の縦型日付（.c-postTitle__date）は残してそちらを採用する */
.single .p-articleMetas__times,
.single .p-articleMetas .c-postTimes,
.single .p-articleMetas__times .c-postTimes__modified {
	display: none !important;
}
.single .c-postTitle__date {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-size: clamp(1rem, 1.6vw, 1.4rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: #999;
	text-align: left;
}
.single .c-postTitle__date .__y {
	font-size: 0.6em;
	letter-spacing: 0.08em;
	display: block;
}
.single .c-postTitle__date .__md {
	font-size: 1em;
	display: block;
}
.single .c-postTimes,
.single .p-singleContentHead__meta,
.single .p-articleMetas {
	text-align: left;
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: #999;
	margin-bottom: 2rem;
	max-width: 960px;
	padding: 0 1rem;
}
.single .c-postTimes time {
	margin: 0 0.5rem;
}
.single .c-postMeta__cats a,
.single .p-postList__cats a {
	background: transparent !important;
	border: 1px solid var(--hb-border, #e5e5e5) !important;
	color: var(--hb-text-sub, #666) !important;
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	padding: 0.28rem 0.9rem;
	border-radius: var(--hb-radius-pill, 999px);
	transition: background 0.2s ease, border-color 0.2s ease;
}
.single .c-postMeta__cats a:hover,
.single .p-postList__cats a:hover {
	background: var(--hb-bg-alt, #f7f7f7) !important;
	border-color: var(--hb-text, #1a1a1a) !important;
}

/* ---- 5. 本文（post_content） ---- */
.single .post_content {
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	font-weight: 500;
	line-height: 2;
	color: #2a2a2a;
	letter-spacing: 0.03em;
}
.single .post_content p {
	margin: 0 0 1.8em;
}
.single .post_content h2 {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(0.95rem, 1.4vw, 1.5rem) !important;
	letter-spacing: 0.05em;
	line-height: 1.6;
	color: var(--hb-text, #1a1a1a);
	padding: 2rem 0 0.8rem;
	margin: 3.5em 0 1.5em;
	border-top: 1px solid var(--hb-border, #e5e5e5);
	border-bottom: none !important;
	background: none !important;
	position: relative;
}
.single .post_content h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 48px;
	height: 1px;
	background: var(--hb-text, #1a1a1a);
}
.single .post_content h3 {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(0.9rem, 1.2vw, 1.25rem) !important;
	letter-spacing: 0.05em;
	line-height: 1.6;
	color: var(--hb-text, #1a1a1a);
	margin: 2.8em 0 1em;
	padding-left: 0.9rem;
	border-left: 3px solid var(--hb-text, #1a1a1a);
	background: none !important;
}
.single .post_content h4 {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(0.88rem, 1vw, 1.05rem) !important;
	letter-spacing: 0.05em;
	color: var(--hb-text, #1a1a1a);
	margin: 2.2em 0 0.8em;
}
.single .post_content a {
	color: var(--hb-text, #1a1a1a);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: opacity 0.2s ease;
}
.single .post_content a:hover {
	opacity: 0.55;
}
.single .post_content blockquote {
	border-left: 3px solid var(--hb-border, #e5e5e5);
	background: var(--hb-bg-alt, #f7f7f7);
	padding: 1.4em 1.6em;
	margin: 2em 0;
	font-style: normal;
	color: var(--hb-text-sub, #666);
	border-radius: 0;
}
.single .post_content blockquote p:last-child {
	margin-bottom: 0;
}
.single .post_content ul,
.single .post_content ol {
	margin: 0 0 1.8em;
	padding-left: 1.5em;
}
.single .post_content li {
	margin-bottom: 0.6em;
}
.single .post_content figure,
.single .post_content img {
	border-radius: var(--hb-radius, 16px);
	overflow: hidden;
}
.single .post_content figure {
	margin: 2.5em auto;
}
.single .post_content pre {
	background: var(--hb-bg-alt, #f7f7f7);
	border-radius: 12px;
	padding: 1.2em 1.4em;
	font-size: 0.88em;
	line-height: 1.7;
	border: 1px solid var(--hb-border, #e5e5e5);
}
.single .post_content code {
	background: var(--hb-bg-alt, #f7f7f7);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}
.single .post_content hr {
	border: none;
	border-top: 1px solid var(--hb-border, #e5e5e5);
	margin: 3em 0;
}
.single .post_content table {
	width: 100%;
	margin: 2em 0;
	border-collapse: collapse;
	font-size: 0.9em;
}
.single .post_content table th,
.single .post_content table td {
	padding: 0.9em 1em;
	border: 1px solid var(--hb-border, #e5e5e5);
	text-align: left;
	color: var(--hb-text, #1a1a1a);
}
.single .post_content table th {
	background: var(--hb-bg-alt, #f7f7f7);
	font-weight: 600;
	letter-spacing: 0.04em;
}
/* SWELL wp-block-table 特有の thead を明示的に上書き
   （SWELL親の border-bottom:3px solid や淡い見出し色を潰して視認性を確保） */
.single .post_content .wp-block-table thead,
.single .post_content figure.wp-block-table thead {
	border-bottom: 1px solid var(--hb-border, #e5e5e5) !important;
}
.single .post_content .wp-block-table thead th,
.single .post_content figure.wp-block-table thead th,
.single .post_content .wp-block-table table thead th {
	background: var(--hb-text, #1a1a1a) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 0.92em;
	letter-spacing: 0.08em;
	padding: 0.9em 1em;
	border-color: var(--hb-text, #1a1a1a) !important;
}
/* 行内 <th>（SWELL は各行先頭セルを th にしてる場合がある）はヘッダ行とは別扱い */
.single .post_content .wp-block-table tbody th,
.single .post_content figure.wp-block-table tbody th {
	background: var(--hb-bg-alt, #f7f7f7) !important;
	color: var(--hb-text, #1a1a1a) !important;
	font-weight: 600 !important;
}
/* SWELL アイコン付きセル（doubleCircle / circle / triangle / close 等）の背景が
   淡色で白文字と混ざる可能性があるので、セル内テキストは濃色を維持 */
.single .post_content .wp-block-table td[data-has-cell-bg] {
	color: var(--hb-text, #1a1a1a) !important;
}

/* ---- 6. 末尾 CTA ブロック（hubride-article-cta）
        トップの .hubride-cta-block / .hubride-btn と統一
        NOTE: this CTA is appended via `the_content` filter so it lives inside
        `.post_content`. SWELL親と自前の h3/a 装飾ルールが継承されるので、
        .post_content スコープで明示的に打ち消す必要がある。 ---- */
.single .post_content .hubride-article-cta,
.hubride-article-cta {
	max-width: 820px;
	margin: 5rem auto 2rem !important;
	padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--hb-bg-alt, #f7f7f7);
	border-radius: var(--hb-radius-lg, 24px);
	text-align: center;
	border: none !important;
}
.single .post_content .hubride-article-cta__label,
.hubride-article-cta__label {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: #999;
	text-transform: uppercase;
	margin: 0 0 0.8rem !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}
.single .post_content .hubride-article-cta__title,
.hubride-article-cta__title {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 700 !important;
	font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
	letter-spacing: 0.04em;
	line-height: 1.6 !important;
	color: var(--hb-text, #1a1a1a) !important;
	margin: 0 0 1rem !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	border-left: none !important;
	text-align: center !important;
}
/* SWELL親の .post_content h3::before（装飾下線）を打ち消し */
.single .post_content .hubride-article-cta__title::before,
.single .post_content .hubride-article-cta__title::after,
.hubride-article-cta__title::before,
.hubride-article-cta__title::after {
	content: none !important;
	display: none !important;
	background: none !important;
}
.single .post_content .hubride-article-cta__text,
.hubride-article-cta__text {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-size: clamp(0.9rem, 1vw, 1rem);
	font-weight: 500;
	line-height: 2;
	color: var(--hb-text-sub, #666);
	margin: 0 0 2.2rem !important;
}
.hubride-article-cta__buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.8rem;
	justify-content: center;
	max-width: 720px;
	margin: 0 auto;
}
/* ボタン: .post_content a の underline 継承を完全に打ち消す */
.single .post_content .hubride-article-cta__btn,
.hubride-article-cta__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 100%;
	padding: 1rem 1.2rem !important;
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-size: clamp(0.85rem, 1vw, 1rem);
	font-weight: 600 !important;
	letter-spacing: 0.08em;
	text-decoration: none !important;
	border-radius: 12px !important;
	background: #1a1a1a !important;
	color: #ffffff !important;
	border: 1px solid #1a1a1a !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
	opacity: 1 !important;
	border: none !important;
}
.single .post_content .hubride-article-cta__btn:hover,
.hubride-article-cta__btn:hover {
	background: #2a2a2a !important;
	color: #ffffff !important;
	opacity: 1 !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}
.single .post_content .hubride-article-cta__btn--line,
.hubride-article-cta__btn--line {
	background: #06c755 !important;
	color: #ffffff !important;
	border: none !important;
}
.single .post_content .hubride-article-cta__btn--line:hover,
.hubride-article-cta__btn--line:hover {
	background: #05b54b !important;
}
/* ghost（電話）は枠線を外して背景は薄いグレーで存在感を出す */
.single .post_content .hubride-article-cta__btn--ghost,
.hubride-article-cta__btn--ghost {
	background: var(--hb-bg-alt, #f7f7f7) !important;
	color: var(--hb-text, #1a1a1a) !important;
	border: none !important;
}
.single .post_content .hubride-article-cta__btn--ghost:hover,
.hubride-article-cta__btn--ghost:hover {
	background: #ececec !important;
	color: var(--hb-text, #1a1a1a) !important;
}

/* ---- 7. 関連記事（トップの blog カード風に） ---- */
.single .p-relatedPosts,
.single .w-relatedPosts,
.single .l-articleBottom__section.-related {
	max-width: 1040px;
	margin: 4rem auto 2rem;
	padding: 0 1.5rem;
}
.single .l-articleBottom__title,
.single .p-relatedPosts__title,
.single .w-relatedPosts__title {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(1rem, 1.5vw, 1.5rem) !important;
	letter-spacing: 0.05em;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 2rem;
	color: var(--hb-text, #1a1a1a);
	background: none !important;
	border: none !important;
	padding: 0 !important;
}
.single .l-articleBottom__title::before,
.single .l-articleBottom__title::after {
	display: none !important;
}
/* 関連記事カードグリッド（3列） */
.single .p-postList.p-relatedPosts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.single .p-postList.p-relatedPosts .p-postList__item {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}
.single .p-postList.p-relatedPosts .p-postList__item::before {
	display: none !important;
}
.single .p-postList__link {
	display: block !important;
	transition: opacity 0.3s ease;
	text-decoration: none !important;
	color: var(--hb-text, #1a1a1a) !important;
}
.single .p-postList__link:hover {
	opacity: 0.85;
}
/* サムネ枠 */
.single .p-postList__thumb,
.single .p-postList__figure,
.single .p-postList .c-postThumb,
.single .p-postList .c-postThumb__figure {
	border-radius: var(--hb-radius, 16px);
	overflow: hidden;
	margin: 0 0 1rem !important;
	aspect-ratio: 16 / 10;
	background: var(--hb-bg-alt, #f7f7f7);
}
.single .p-postList__thumb img,
.single .p-postList .c-postThumb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.single .p-postList__link:hover .p-postList__thumb img,
.single .p-postList__link:hover .c-postThumb__img {
	transform: scale(1.04);
}
/* SWELL のサムネ内カテゴリバッジ（黒×斜線）を消してすっきり */
.single .p-postList .c-postThumb__cat,
.single .p-relatedPosts .c-postThumb__cat {
	display: none !important;
}
/* カード本文 */
.single .p-postList__body {
	padding: 0 !important;
}
.single .p-postList__title {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 700 !important;
	font-size: clamp(0.9rem, 1.1vw, 1rem) !important;
	line-height: 1.7 !important;
	letter-spacing: 0.04em;
	color: var(--hb-text, #1a1a1a);
	margin: 0 0 0.4rem !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.single .p-postList__meta {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: #999;
}
.single .p-postList__date,
.single .p-postList__times,
.single .p-postList__times time {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-size: 0.75rem !important;
	letter-spacing: 0.08em !important;
	color: #999 !important;
	background: none !important;
}

/* SP時は2列 → 1列 */
@media (max-width: 820px) {
	.single .p-postList.p-relatedPosts {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
}
@media (max-width: 480px) {
	.single .p-postList.p-relatedPosts {
		grid-template-columns: 1fr;
	}
}

/* ---- 7b. 「この記事を書いた人」（著者ボックス）をトップのトーンに ---- */
.single .l-articleBottom__section.-author {
	max-width: 1040px;
	margin: 4rem auto 2rem;
	padding: 2.5rem 1.5rem;
	background: var(--hb-bg-alt, #f7f7f7);
	border-radius: var(--hb-radius-lg, 24px);
}
.single .l-articleBottom__section.-author .l-articleBottom__title {
	margin-bottom: 1.5rem;
}
.single .p-authorBox {
	max-width: 720px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 1.5rem;
	align-items: start;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}
.single .p-authorBox__l {
	width: 96px;
}
.single .p-authorBox__l img,
.single .p-authorBox .avatar {
	width: 96px !important;
	height: 96px !important;
	border-radius: 50% !important;
	object-fit: cover;
	display: block;
}
.single .p-authorBox__name {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	letter-spacing: 0.04em !important;
	color: var(--hb-text, #1a1a1a) !important;
	margin: 0.5rem 0 0 !important;
	display: inline-block;
}
.single .p-authorBox__desc {
	font-size: 0.85rem !important;
	line-height: 1.9 !important;
	color: var(--hb-text-sub, #666) !important;
	margin-top: 0.6rem !important;
}
@media (max-width: 600px) {
	.single .p-authorBox {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.single .p-authorBox__l {
		margin: 0 auto;
	}
}

/* ---- 7c. 前後記事ナビ（-prev / -next）をトップのトーンに ---- */
.single .p-pnLinks {
	max-width: 1040px;
	margin: 3rem auto;
	padding: 0 1.5rem;
}
.single .p-pnLinks__link {
	border: 1px solid var(--hb-border, #e5e5e5) !important;
	border-radius: var(--hb-radius, 16px) !important;
	background: #ffffff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.single .p-pnLinks__link:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.single .p-pnLinks__title {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* ---- 8. サイドバー（SWELL デフォルト widget を HUBRIDE トーンに） ---- */
.single .l-sidebar {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
}
.single .p-sideWidget,
.single .c-widget {
	background: transparent;
	padding: 0;
	margin-bottom: 2.5rem;
}
.single .c-widget__title,
.single .p-sideWidget__title {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-weight: 700 !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.2em !important;
	color: var(--hb-text, #1a1a1a) !important;
	text-transform: uppercase;
	padding: 0 0 0.8rem !important;
	margin-bottom: 1rem !important;
	border-bottom: 1px solid var(--hb-border, #e5e5e5) !important;
	background: none !important;
}
.single .c-widget__title::before,
.single .p-sideWidget__title::before {
	display: none !important;
}
.single .c-widget a,
.single .p-sideWidget a {
	color: var(--hb-text, #1a1a1a);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.single .c-widget a:hover,
.single .p-sideWidget a:hover {
	opacity: 0.6;
}
.single .c-widget__list li,
.single .p-sideWidget__list li {
	padding: 0.6rem 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 0.88rem;
	letter-spacing: 0.04em;
}

/* ---- 8b. HUBRIDE 自前サイドバーウィジェット（人気記事 / 新着記事）
        functions.php の dynamic_sidebar_after フックから出力される
        記事カード形レイアウト：小サムネ + ランキングバッジ + 日付 + タイトル ---- */
.hubride-sideWidget {
	margin: 0 0 2.8rem;
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
}
.hubride-sideWidget__title {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0 0 0.9rem;
	margin: 0 0 1.2rem;
	border-bottom: 1px solid var(--hb-border, #e5e5e5);
	background: none !important;
}
.hubride-sideWidget__title::before,
.hubride-sideWidget__title::after {
	display: none !important;
}
.hubride-sideWidget__kicker {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: #999;
	text-transform: uppercase;
}
.hubride-sideWidget__label {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--hb-text, #1a1a1a);
}
.hubride-sideList {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	counter-reset: hubride-side;
}
.hubride-sideList__item {
	margin: 0 0 1rem !important;
	padding: 0 !important;
	border: none !important;
}
.hubride-sideList__item::before {
	display: none !important;
}
.hubride-sideList__link {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 0.9rem;
	align-items: start;
	text-decoration: none !important;
	color: var(--hb-text, #1a1a1a);
	transition: opacity 0.3s ease;
}
.hubride-sideList__link:hover {
	opacity: 0.7;
}
.hubride-sideList__thumb {
	position: relative;
	margin: 0;
	padding: 0;
	aspect-ratio: 4 / 3;
	background: var(--hb-bg-alt, #f7f7f7);
	border-radius: 10px;
	overflow: hidden;
}
.hubride-sideList__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.hubride-sideList__link:hover .hubride-sideList__thumb img {
	transform: scale(1.06);
}
.hubride-sideList__rank {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding: 0 6px;
	height: 22px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(26, 26, 26, 0.85);
	border-bottom-right-radius: 8px;
	font-variant-numeric: tabular-nums;
}
.hubride-sideList__body {
	min-width: 0;
}
.hubride-sideList__date {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: #999;
	margin-bottom: 0.3rem;
}
.hubride-sideList__title {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	color: var(--hb-text, #1a1a1a);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- 8c. カテゴリー一覧サイドウィジェット
        functions.php から .hubride-sideWidget の3番目として出力される。
        カテゴリ名＋投稿数を一列で、hover で下線のミニマル表現。 ---- */
.hubride-sideCatList {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.hubride-sideCatList__item {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-bottom: 1px solid #f0f0f0;
}
.hubride-sideCatList__item::before {
	display: none !important;
}
.hubride-sideCatList__item:last-child {
	border-bottom: none;
}
.hubride-sideCatList__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.7rem 0.2rem;
	text-decoration: none !important;
	color: var(--hb-text, #1a1a1a);
	transition: color 0.2s ease, padding-left 0.25s ease;
}
.hubride-sideCatList__link:hover {
	color: var(--hb-text-sub, #666);
	padding-left: 0.4rem;
}
.hubride-sideCatList__name {
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.5;
}
.hubride-sideCatList__count {
	flex-shrink: 0;
	min-width: 28px;
	padding: 0.15em 0.55em;
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #999;
	background: var(--hb-bg-alt, #f7f7f7);
	border-radius: 999px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---- 9. SNS シェア・コメント・SNS誘導を完全非表示 ---- */
.single .c-shareBtns,
.single .c-shareBtns__list,
.single .p-shareBtns,
.single .p-snsBtns,
.single .p-snsCta,
.single .p-commentArea,
.single #comments,
.single .l-articleBottom__section.-comment,
.single .l-articleBottom__section.-sns {
	display: none !important;
}

/* ---- 10. 単一投稿サイドバー: HUBRIDE 自前ウィジェット以外を完全非表示
        WPブロック型/クラシック型どちらでも確実に効くよう、
        サイドバー直下の子要素を .hubride-sideWidget 以外すべて消す。
        #fix_sidebar（固定サイド帯）のみ例外で表示継続。 ---- */
.single #sidebar > *:not(.hubride-sideWidget):not(#fix_sidebar),
.single .l-sidebar > *:not(.hubride-sideWidget):not(#fix_sidebar) {
	display: none !important;
}

/* ---- 11. 微フェードイン（記事本体） ---- */
.single .c-postTitle,
.single .p-singleContentHead__title,
.single .post_title,
.single .c-postTimes,
.single .p-singleContentHead__meta,
.single .c-postThumb,
.single .p-singleContentHead__thumb {
	opacity: 0;
	transform: translateY(12px);
	animation: hubride-article-fadein 0.8s ease forwards;
}
.single .c-postTimes,
.single .p-singleContentHead__meta {
	animation-delay: 0.15s;
}
.single .c-postThumb,
.single .p-singleContentHead__thumb {
	animation-delay: 0.3s;
}
@keyframes hubride-article-fadein {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.single .c-postTitle,
	.single .p-singleContentHead__title,
	.single .post_title,
	.single .c-postTimes,
	.single .p-singleContentHead__meta,
	.single .c-postThumb,
	.single .p-singleContentHead__thumb {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ---- 12. Mobile ---- */
@media (max-width: 820px) {
	.single .l-mainContent__inner {
		padding-top: 1.5rem;
		padding-bottom: 2.5rem;
	}
	.single .c-postTitle,
	.single .p-singleContentHead__title,
	.single .post_title {
		margin-bottom: 1rem;
		padding: 0 1.25rem;
	}
	.single .c-postTimes,
	.single .p-singleContentHead__meta {
		margin-bottom: 2rem;
	}
	.single .c-postThumb,
	.single .p-singleContentHead__thumb {
		margin-bottom: 2rem;
		border-radius: var(--hb-radius, 16px);
	}
	.single .post_content {
		padding: 0 1.25rem;
	}
	.single .post_content h2 {
		margin: 2.8em 0 1em;
		padding-top: 1.4rem;
	}
	.single .post_content h3 {
		margin: 2.2em 0 0.8em;
	}
	.single .post_content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.hubride-article-cta {
		margin: 3.5rem 1rem 1.5rem;
		padding: 2.2rem 1.4rem;
	}
	/* SP: テキストは左寄せ（改行時の左端を揃える）、
	   inline-block で親の text-align:center に乗せてブロック位置は中央を維持 */
	.single .post_content .hubride-article-cta__text,
	.hubride-article-cta__text {
		display: inline-block;
		text-align: left;
		max-width: 100%;
	}
	.hubride-article-cta__buttons {
		grid-template-columns: 1fr;
	}
	.hubride-article-cta__btn {
		width: 100%;
		min-width: 0;
	}
}