/* ============================================================
   HOB-IN Custom Blocks – 共通デザインCSS
   フロントエンド(.c-postContent)とエディタ(.editor-styles-wrapper)
   の両方に同じ見た目を適用します。
   ============================================================ */

/* ------------------------------------------------------------
   0. 変数フォールバック(子テーマの --hb-* が無い画面でも崩れないように)
   ------------------------------------------------------------ */
.c-postContent,
.editor-styles-wrapper {
	--hobin-fallback-accent: #a8763c;
	--hobin-fallback-border: #e8e8e8;
	--hobin-fallback-text-sub: #666666;
	--hobin-fallback-bg-sub: #f6f7f9;
	--hobin-fallback-radius: 12px;
}

/* ------------------------------------------------------------
   1. 見出しデザイン (H2 > H3 > H4 で強弱)
   ------------------------------------------------------------ */
.c-postContent h2,
.editor-styles-wrapper h2 {
	position: relative;
	margin: 2.75em 0 1.25em;
	padding: 0.7em 1em 0.7em 1.15em;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hb-text, #222222);
	background: color-mix(in srgb, currentColor 10%, var(--hb-bg, #fff));
	border-left: 6px solid currentColor;
	border-radius: 0 10px 10px 0;
}
.c-postContent h2:first-child,
.editor-styles-wrapper h2:first-child {
	margin-top: 0;
}

.c-postContent h3,
.editor-styles-wrapper h3 {
	position: relative;
	margin: 2.25em 0 1em;
	padding: 0 0 0.5em 0;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hb-text, #000000);
	border-bottom: 3px solid currentColor;
}

.c-postContent h4,
.editor-styles-wrapper h4 {
	margin: 1.85em 0 0.75em;
	padding-left: 0.8em;
	font-size: 1.08em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hb-text, #111);
	border-left: 3px solid currentColor;
}

/* ------------------------------------------------------------
   2. キャプション(画像の説明文)を本文より小さく
   ------------------------------------------------------------ */
.c-postContent .wp-block-image figcaption,
.c-postContent figcaption,
.editor-styles-wrapper .wp-block-image figcaption,
.editor-styles-wrapper figcaption {
	font-size: 0.8em;
	line-height: 1.6;
	color: var(--hb-text-sub, var(--hobin-fallback-text-sub));
	margin-top: 0.5em;
}

/* ------------------------------------------------------------
   3. ボタンのデザインバリエーション
   ------------------------------------------------------------ */

/* 3-1. リボン(両端に切り込み) */
.wp-block-button.is-style-hobin-ribbon .wp-block-button__link {
	position: relative;
	border-radius: 0;
	clip-path: polygon(0% 0%, 100% 0%, 92% 50%, 100% 100%, 0% 100%, 8% 50%);
	padding-left: 1.6em;
	padding-right: 1.6em;
	background-color: var(--hb-accent, #a8763c);
}

/* 3-2. 下線(フラット・アンダーライン強調) */
.wp-block-button.is-style-hobin-underline .wp-block-button__link {
	background-color: transparent;
	color: var(--hb-accent-dark, #7a5527);
	border-radius: 0;
	border-bottom: 3px solid currentColor;
	padding-left: 0.2em;
	padding-right: 0.2em;
	font-weight: 700;
}
.wp-block-button.is-style-hobin-underline .wp-block-button__link::after {
	content: '›';
	margin-left: 0.4em;
}

/* 3-3. 立体(押せる感じの3D) */
.wp-block-button.is-style-hobin-3d .wp-block-button__link {
	background-color: var(--hb-accent, #a8763c);
	border-radius: 8px;
	box-shadow: 0 4px 0 color-mix(in srgb, currentColor 60%, #000);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.wp-block-button.is-style-hobin-3d .wp-block-button__link:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 color-mix(in srgb, currentColor 60%, #000);
}

/* 3-4. 点線枠 */
.wp-block-button.is-style-hobin-dashed .wp-block-button__link {
	background-color: transparent;
	color: var(--hb-accent-dark, #7a5527);
	border: 2px dashed currentColor;
	border-radius: 999px;
}

/* 3-5. 矢印付きピル */
.wp-block-button.is-style-hobin-arrow .wp-block-button__link {
	background-color: var(--hb-accent, #a8763c);
	border-radius: 999px;
	padding-right: 1.2em;
}
.wp-block-button.is-style-hobin-arrow .wp-block-button__link::after {
	content: '→';
	display: inline-block;
	margin-left: 0.6em;
	transition: transform 0.15s ease;
}
.wp-block-button.is-style-hobin-arrow .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* 3-6. バッジ風(小さめ・上に帯) */
.wp-block-button.is-style-hobin-badge .wp-block-button__link {
	position: relative;
	background-color: #fff;
	color: var(--hb-accent-dark, #7a5527);
	border: 1px solid var(--hb-border, var(--hobin-fallback-border));
	border-radius: 6px;
	font-size: 0.9em;
	font-weight: 700;
	padding-top: 1em;
}
.wp-block-button.is-style-hobin-badge .wp-block-button__link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--hb-accent, #a8763c);
	border-radius: 6px 6px 0 0;
}

/* 3-7 / 3-8. アフィリエイト用プリセットカラー(色は変更可) */
.wp-block-button.is-style-hobin-amazon .wp-block-button__link {
	background-color: #ff9900;
	color: #111;
	border-radius: 6px;
	font-weight: 700;
}
.wp-block-button.is-style-hobin-rakuten .wp-block-button__link {
	background-color: #bf0000;
	color: #fff;
	border-radius: 6px;
	font-weight: 700;
}

/* ------------------------------------------------------------
   4. POINTボックス
   ------------------------------------------------------------ */
.hobin-point-box {
	position: relative;
	margin: 2em 0;
	padding: 1.7em 1.4em 1.3em;
	border: 2px solid var(--hobin-color, var(--hb-accent, var(--hobin-fallback-accent)));
	border-radius: var(--hb-radius, var(--hobin-fallback-radius));
	background: color-mix(in srgb, var(--hobin-color, var(--hb-accent, var(--hobin-fallback-accent))) 10%, var(--hb-bg, #fff));
}
.hobin-point-box__label {
	position: absolute;
	top: -0.9em;
	left: 1.2em;
	display: inline-block;
	padding: 0.3em 1em;
	background: var(--hobin-color, var(--hb-accent, var(--hobin-fallback-accent)));
	color: #fff;
	font-weight: 700;
	font-size: 0.85em;
	letter-spacing: 0.05em;
	border-radius: 999px;
	line-height: 1.4;
}
.hobin-point-box__body {
	margin-top: 0.4em;
}
.hobin-point-box__body > *:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   5. ふきだし(会話)ブロック
   ------------------------------------------------------------ */
.hobin-bubble {
	display: flex;
	align-items: flex-start;
	gap: 0.9em;
	margin: 1.85em 0;
}
.hobin-bubble--right {
	flex-direction: row-reverse;
}
.hobin-bubble__person {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 64px;
}
.hobin-bubble__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--hb-border, var(--hobin-fallback-border));
	background: var(--hb-bg-sub, var(--hobin-fallback-bg-sub));
	display: block;
}
.hobin-bubble__name {
	display: block;
	margin-top: 0.35em;
	font-size: 0.75em;
	color: var(--hb-text-sub, var(--hobin-fallback-text-sub));
	text-align: center;
	line-height: 1.3;
	word-break: break-word;
}
.hobin-bubble__balloon {
	position: relative;
	max-width: calc(100% - 90px);
	padding: 0.85em 1.1em;
	border-radius: var(--hb-radius, var(--hobin-fallback-radius));
	background: var(--hobin-bubble-bg, var(--hb-bg-sub, var(--hobin-fallback-bg-sub)));
	color: var(--hobin-bubble-text, var(--hb-text, #111));
	box-shadow: var(--hb-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.06));
}
.hobin-bubble__balloon p {
	margin: 0;
}
.hobin-bubble--left .hobin-bubble__balloon::before {
	content: '';
	position: absolute;
	top: 18px;
	left: -8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 10px 8px 0;
	border-color: transparent var(--hobin-bubble-bg, var(--hb-bg-sub, var(--hobin-fallback-bg-sub))) transparent
		transparent;
}
.hobin-bubble--right .hobin-bubble__balloon::before {
	content: '';
	position: absolute;
	top: 18px;
	right: -8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent
		var(--hobin-bubble-bg, var(--hb-bg-sub, var(--hobin-fallback-bg-sub)));
}
@media (max-width: 480px) {
	.hobin-bubble__person {
		width: 52px;
	}
	.hobin-bubble__avatar {
		width: 44px;
		height: 44px;
	}
	.hobin-bubble__balloon {
		max-width: calc(100% - 76px);
	}
}

/* ------------------------------------------------------------
   6. 評価ボックス
   ------------------------------------------------------------ */
.hobin-rating {
	margin: 1.85em 0;
	padding: 1.4em 1.5em;
	border: 1px solid var(--hb-border, var(--hobin-fallback-border));
	border-radius: var(--hb-radius, var(--hobin-fallback-radius));
	background: var(--hb-bg-sub, var(--hobin-fallback-bg-sub));
}
.hobin-rating__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65em;
}
.hobin-rating__item {
	display: flex;
	align-items: center;
	gap: 0.9em;
}
.hobin-rating__label {
	flex: 0 0 7em;
	font-weight: 600;
	font-size: 0.92em;
	color: var(--hb-text, #111);
}
.hobin-rating__stars {
	color: var(--hb-border, var(--hobin-fallback-border));
	letter-spacing: 2px;
	font-size: 1.15em;
	line-height: 1;
}
.hobin-rating__star.is-filled {
	color: var(--hobin-rating-color, var(--hb-accent, var(--hobin-fallback-accent)));
}
.hobin-rating__bar {
	position: relative;
	flex: 1 1 auto;
	height: 10px;
	border-radius: 999px;
	background: var(--hb-border, #e5e5e5);
	overflow: hidden;
}
.hobin-rating__bar-fill {
	position: absolute;
	inset: 0;
	width: 0;
	border-radius: 999px;
	background: var(--hobin-rating-color, var(--hb-accent, var(--hobin-fallback-accent)));
}
.hobin-rating__value {
	flex: 0 0 3em;
	text-align: right;
	font-size: 0.85em;
	color: var(--hb-text-sub, var(--hobin-fallback-text-sub));
}
.hobin-rating__comment {
	margin: 1em 0 0;
	padding-top: 1em;
	border-top: 1px dashed var(--hb-border, var(--hobin-fallback-border));
	font-size: 0.95em;
	color: var(--hb-text-sub, var(--hobin-fallback-text-sub));
}

/* ------------------------------------------------------------
   7. 目次(TOC)ブロック
   ------------------------------------------------------------ */
.hobin-toc {
	position: relative;
	width: 45%;
	min-width: 260px;
	max-width: 420px;
	margin: 1.8em auto;
	border-radius: 10px;
	background: var(--hobin-toc-bg, #f5f5f5);
	color: var(--hobin-toc-text, #000000);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
@media (max-width: 640px) {
	.hobin-toc {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
}
.hobin-toc::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--hb-accent, var(--hobin-fallback-accent)),
		color-mix(in srgb, var(--hb-accent, var(--hobin-fallback-accent)) 25%, transparent)
	);
}
.hobin-toc__details {
	padding: 0.9em 1.1em 1em;
}
.hobin-toc__title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.6em;
	padding: 0;
	font-weight: 700;
	font-size: 0.92em;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	color: inherit;
}
.hobin-toc__title::before {
	content: '\2261';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	border-radius: 6px;
	background: color-mix(in srgb, currentColor 12%, transparent);
	font-size: 0.8em;
}
.hobin-toc summary.hobin-toc__title::-webkit-details-marker {
	display: none;
}
.hobin-toc summary.hobin-toc__title::after {
	content: '▾';
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 0.9em;
	transition: transform 0.15s ease;
}
.hobin-toc details:not([open]) summary.hobin-toc__title::after {
	transform: rotate(-90deg);
}
.hobin-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	counter-reset: hobin-toc-counter;
}
.hobin-toc__item {
	line-height: 1.45;
	font-size: 0.88em;
}
.hobin-toc__item a,
.hobin-toc__item span {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
.hobin-toc__item a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hobin-toc__item--h2 {
	font-weight: 600;
	counter-increment: hobin-toc-counter;
}
.hobin-toc__item--h2 > a,
.hobin-toc__item--h2 > span {
	gap: 0.5em;
}
.hobin-toc__item--h2 > a::before,
.hobin-toc__item--h2 > span::before {
	content: counter(hobin-toc-counter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 12%, transparent);
	font-size: 0.68em;
	font-weight: 700;
}
.hobin-toc__item--h3 {
	padding-left: 1.8em;
	opacity: 0.85;
}
.hobin-toc__item--h3 > a::before,
.hobin-toc__item--h3 > span::before {
	content: '\2013';
	margin-right: 0.55em;
	opacity: 0.6;
}
.hobin-toc__item--h4 {
	padding-left: 2.7em;
	opacity: 0.72;
}
.hobin-toc__item--h4 > a::before,
.hobin-toc__item--h4 > span::before {
	content: '\00B7';
	margin-right: 0.55em;
	opacity: 0.6;
}
.hobin-toc__empty {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.6;
}


/* ===== 関連記事まとめブロック(フロント) ===== */
.hobin-related { display: grid; gap: 2.2rem 1.8rem; margin: 2rem 0; }
.hobin-related--cols1 { grid-template-columns: 1fr; }
.hobin-related--cols2 { grid-template-columns: repeat(2, 1fr); }
.hobin-related--cols3 { grid-template-columns: repeat(3, 1fr); }
.hobin-related--cols4 { grid-template-columns: repeat(4, 1fr); }
.hobin-related__item { min-width: 0; }
.hobin-related__title { margin: 0 0 .8rem !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.hobin-related__title::before, .hobin-related__title::after { content: none !important; }
.hobin-related__title a { color: inherit; text-decoration: none; }
.hobin-related__title a:hover { text-decoration: underline; }
.hobin-related__thumb { display: block; margin-bottom: .7rem; overflow: hidden; }
.hobin-related__thumb img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; transition: transform .3s; }
.hobin-related__thumb:hover img { transform: scale(1.03); }
.hobin-related__cat { margin: 0 0 .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; opacity: .7; }
.hobin-related__excerpt { margin: 0; font-size: .85rem; line-height: 1.8; opacity: .75; }
@media (max-width: 900px) {
	.hobin-related--cols3, .hobin-related--cols4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.hobin-related { grid-template-columns: 1fr !important; }
}

/* タイトルの行数が違っても、タイトル・画像・本文の位置を横一列で揃える(サブグリッド) */
.hobin-related__thumb--none { display: block; aspect-ratio: 5 / 3; background: rgba(128,128,128,.12); margin-bottom: .7rem; }
@supports (grid-template-rows: subgrid) {
	.hobin-related { row-gap: 0; }
	.hobin-related__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 2.2rem; }
}
@supports not (grid-template-rows: subgrid) {
	.hobin-related__title { min-height: 3em; }
}


/* ===== ライター紹介ブロック ===== */
.hobin-writer { display: flex; align-items: flex-start; gap: 1.4rem; margin: 2.4rem 0; padding: 1.5rem 1.6rem; border: 1px solid rgba(168,118,60,.35); border-top: 3px solid #a8763c; background: var(--hb-bg-card, #fff); color: inherit; }
[data-theme="dark"] .hobin-writer { border-color: rgba(227,201,148,.35); border-top-color: #e3c994; }
.hobin-writer__avatar { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: rgba(128,128,128,.15); }
.hobin-writer__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hobin-writer__body { flex: 1 1 auto; min-width: 0; }
.hobin-writer__label { margin: 0 0 .3rem !important; font-size: .72rem; letter-spacing: .15em; color: #a8763c; }
[data-theme="dark"] .hobin-writer__label { color: #e3c994; }
.hobin-writer__name { margin: 0 !important; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.hobin-writer__role { margin: .15rem 0 0 !important; font-size: .8rem; opacity: .7; }
.hobin-writer__bio { margin: .8rem 0 0 !important; font-size: .88rem; line-height: 1.85; opacity: .85; }
.hobin-writer__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.hobin-writer__links a { display: inline-block; padding: .2rem .8rem; font-size: .72rem; letter-spacing: .08em; text-decoration: none; color: inherit; border: 1px solid rgba(168,118,60,.5); transition: background .2s, color .2s; }
.hobin-writer__links a:hover { background: #a8763c; color: #fff; }
@media (max-width: 560px) {
	.hobin-writer { flex-direction: column; align-items: center; text-align: center; }
	.hobin-writer__links { justify-content: center; }
}