/* CoCoRo CTA — フロント表示スタイル */

.cocoro-cta {
	--cocoro-cta-accent: #d83a3a;
	--cocoro-cta-accent-dark: #be2a2a;
	--cocoro-cta-text: #1c1c1c;
	--cocoro-cta-bg-soft: #fff5f5;
	--cocoro-cta-border: #f3d3d3;
	--cocoro-cta-radius: 10px;
	--cocoro-cta-shadow: 0 6px 24px rgba(28, 28, 28, 0.14);
	/* レイアウト系トークン（管理画面のデザインカスタマイズで上書き）。
	   density はパディングの倍率、font は基準フォントサイズ。 */
	--cocoro-cta-density: 1;
	--cocoro-cta-font: 16px;
	box-sizing: border-box;
	color: var(--cocoro-cta-text);
	font-family: inherit;
	/* コンポーネントを自己完結させる: テーマのルート(html=62.5%/10px)や
	   #postContentのletter-spacing継承に左右されないよう基準を明示する。
	   子要素のフォントサイズはこの基準値を元にem指定する。 */
	font-size: var(--cocoro-cta-font, 16px);
	line-height: 1.6;
	letter-spacing: normal;
}

.cocoro-cta *,
.cocoro-cta *::before,
.cocoro-cta *::after {
	box-sizing: border-box;
}

/* ---- 共通カード ---- */

.cocoro-cta__card {
	position: relative;
	display: flex;
	gap: 20px;
	align-items: center;
	background: var(--cocoro-cta-bg-soft);
	border: 1px var(--cocoro-cta-border-style, solid) var(--cocoro-cta-border);
	border-radius: var(--cocoro-cta-radius);
	padding: calc(24px * var(--cocoro-cta-density));
}

.cocoro-cta__media {
	flex: 0 0 180px;
}

.cocoro-cta__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.cocoro-cta__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cocoro-cta__heading {
	margin: 0 0 8px;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.45;
}

.cocoro-cta__description {
	margin: 0 0 16px;
	font-size: 0.92em;
}

/* テーマの `body.single-post a{color:inherit}` 等に勝つよう親クラス付きで
   specificityを上げる（埋め込み先テーマのリンク色・下線に左右されないため）。 */
.cocoro-cta .cocoro-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--cocoro-cta-button-bg, var(--cocoro-cta-accent));
	color: #ffffff;
	font-weight: 700;
	font-size: 1em;
	text-decoration: none;
	border-radius: var(--cocoro-cta-button-radius, 999px);
	padding: 13px 32px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cocoro-cta .cocoro-cta__button:hover,
.cocoro-cta .cocoro-cta__button:focus-visible {
	background: var(--cocoro-cta-button-bg-dark, var(--cocoro-cta-accent-dark));
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
}

.cocoro-cta__button:focus-visible {
	outline: 2px solid var(--cocoro-cta-accent-dark);
	outline-offset: 2px;
}

.cocoro-cta__arrow {
	font-size: 0.9em;
	transition: transform 0.2s ease;
}

.cocoro-cta__button:hover .cocoro-cta__arrow {
	transform: translateX(3px);
}

/* ---- アクション群（マイクロコピー＋ボタン／デュアルCTA） ---- */

.cocoro-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: flex-end;
}

.cocoro-cta__action {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cocoro-cta__microcopy {
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cocoro-cta-accent);
}

/* セカンダリボタン（2つ目の訴求）はアウトライン調で主従を付ける。 */
.cocoro-cta .cocoro-cta__button--secondary {
	background: #ffffff;
	color: var(--cocoro-cta-accent);
	border: 2px solid var(--cocoro-cta-accent);
	padding: 11px 30px;
}

.cocoro-cta .cocoro-cta__button--secondary:hover,
.cocoro-cta .cocoro-cta__button--secondary:focus-visible {
	background: var(--cocoro-cta-bg-soft);
	color: var(--cocoro-cta-accent-dark);
	border-color: var(--cocoro-cta-accent-dark);
}

/* 縦並びにする枠（モーダル・右下/左下カード）ではボタンを全幅・マイクロコピー中央に。 */
.cocoro-cta--modal .cocoro-cta__actions,
.cocoro-cta--pos-bottom_right .cocoro-cta__actions,
.cocoro-cta--pos-bottom_left .cocoro-cta__actions {
	flex-direction: column;
	align-items: stretch;
}

.cocoro-cta--modal .cocoro-cta__microcopy,
.cocoro-cta--pos-bottom_right .cocoro-cta__microcopy,
.cocoro-cta--pos-bottom_left .cocoro-cta__microcopy {
	text-align: center;
}

/* 下部固定バナーは2ボタンを横並びに。マイクロコピーはボタン上に小さく中央表示。 */
.cocoro-cta--pos-bottom_bar .cocoro-cta__actions {
	flex-wrap: nowrap;
	gap: 10px;
}

.cocoro-cta--pos-bottom_bar .cocoro-cta__microcopy {
	font-size: 0.72em;
	text-align: center;
}

.cocoro-cta__close {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--cocoro-cta-text);
	color: #ffffff;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

/* ---- 記事内・ショートコード ---- */

.cocoro-cta--inline,
.cocoro-cta--shortcode {
	max-width: 700px;
	margin: 2.2em auto;
}

/* ---- フローティング共通 ---- */

.cocoro-cta--floating {
	position: fixed;
	z-index: 9990;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.cocoro-cta--floating.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* フローティング・モーダルのカード標準背景は白。
   色カスタマイズ時は要素のインライン --cocoro-cta-bg-soft が上書きする
   （インラインstyle > クラス指定）。カード側で背景をハードコードすると
   カスタム色が効かなくなるため、必ずこの変数経由で塗る。 */
.cocoro-cta--floating,
.cocoro-cta--modal {
	--cocoro-cta-bg-soft: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.cocoro-cta--floating,
	.cocoro-cta__button,
	.cocoro-cta__arrow {
		transition: none;
	}
}

/* 右下・左下カード（共通スタイル） */

.cocoro-cta--pos-bottom_right,
.cocoro-cta--pos-bottom_left {
	bottom: 20px;
	width: min(320px, calc(100vw - 32px));
}

.cocoro-cta--pos-bottom_right {
	right: 20px;
}

.cocoro-cta--pos-bottom_left {
	left: 20px;
}

.cocoro-cta--pos-bottom_right .cocoro-cta__card,
.cocoro-cta--pos-bottom_left .cocoro-cta__card {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	box-shadow: var(--cocoro-cta-shadow);
	padding: calc(20px * var(--cocoro-cta-density));
}

.cocoro-cta--pos-bottom_right .cocoro-cta__media,
.cocoro-cta--pos-bottom_left .cocoro-cta__media {
	flex-basis: auto;
}

.cocoro-cta--pos-bottom_right .cocoro-cta__heading,
.cocoro-cta--pos-bottom_left .cocoro-cta__heading {
	font-size: 1em;
}

.cocoro-cta--pos-bottom_right .cocoro-cta__description,
.cocoro-cta--pos-bottom_left .cocoro-cta__description {
	font-size: 0.85em;
	margin-bottom: 12px;
}

.cocoro-cta--pos-bottom_right .cocoro-cta__button,
.cocoro-cta--pos-bottom_left .cocoro-cta__button {
	width: 100%;
	padding: 12px 16px;
	font-size: 0.95em;
}

/* 下部固定バナー */

.cocoro-cta--pos-bottom_bar {
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY(100%);
}

.cocoro-cta--pos-bottom_bar.is-visible {
	transform: translateY(0);
}

.cocoro-cta--pos-bottom_bar .cocoro-cta__card {
	border-radius: 0;
	border: none;
	border-top: 2px solid var(--cocoro-cta-accent);
	box-shadow: 0 -4px 16px rgba(28, 28, 28, 0.12);
	padding: calc(12px * var(--cocoro-cta-density)) clamp(16px, 4vw, 40px);
	padding-bottom: calc(12px * var(--cocoro-cta-density) + env(safe-area-inset-bottom));
	justify-content: center;
	gap: clamp(12px, 3vw, 32px);
}

.cocoro-cta--pos-bottom_bar .cocoro-cta__body {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 3vw, 32px);
	flex: 0 1 auto;
}

.cocoro-cta--pos-bottom_bar .cocoro-cta__heading {
	margin: 0;
	font-size: clamp(0.85em, 2.4vw, 1.05em);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cocoro-cta--pos-bottom_bar .cocoro-cta__button {
	flex-shrink: 0;
	padding: 10px 24px;
	font-size: clamp(0.85em, 2.4vw, 0.95em);
	white-space: nowrap;
}

.cocoro-cta--pos-bottom_bar .cocoro-cta__close {
	position: static;
	order: 3;
	flex-shrink: 0;
	background: transparent;
	color: var(--cocoro-cta-text);
	font-size: 14px;
}

/* ---- モーダル ---- */

.cocoro-cta--modal {
	border: none;
	padding: 0;
	background: transparent;
	width: min(480px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	overflow: visible;
}

.cocoro-cta--modal::backdrop {
	background: rgba(28, 28, 28, 0.55);
}

/* 開いた時にダイアログへ移したフォーカスのリングは出さない（コンテナのため）。
   閉じるボタン等のキーボードフォーカス時のリングは維持される。 */
.cocoro-cta--modal:focus,
.cocoro-cta--modal:focus-visible {
	outline: none;
}

.cocoro-cta--modal[open] {
	animation: cocoro-cta-modal-in 0.3s ease both;
}

@keyframes cocoro-cta-modal-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cocoro-cta--modal[open] {
		animation: none;
	}
}

.cocoro-cta--modal .cocoro-cta__card {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	border: none;
	box-shadow: var(--cocoro-cta-shadow);
	padding: calc(28px * var(--cocoro-cta-density));
	text-align: center;
}

.cocoro-cta--modal .cocoro-cta__media {
	flex-basis: auto;
}

.cocoro-cta--modal .cocoro-cta__heading {
	font-size: 1.2em;
}

.cocoro-cta--modal .cocoro-cta__button {
	width: 100%;
}

/* モーダルの閉じるボタンはフローティングと同じデザイン（濃色の丸バッジ＋白×）に
   揃えるため、ここでの上書きは行わない（共通の .cocoro-cta__close を使用）。 */

/* SPではボトムシート表示 */
@media (max-width: 767px) {
	.cocoro-cta--modal {
		margin: auto 0 0;
		width: 100vw;
		max-width: 100vw;
	}

	.cocoro-cta--modal .cocoro-cta__card {
		border-radius: 16px 16px 0 0;
		padding: 24px 20px;
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
	}
}

/* ---- デバイス出し分け（ページキャッシュ対応のためCSSで制御） ---- */

@media (max-width: 767px) {
	.cocoro-cta--device-pc {
		display: none !important;
	}

	.cocoro-cta__card {
		flex-direction: column;
		align-items: stretch;
		padding: 20px 16px;
	}

	.cocoro-cta__media {
		flex-basis: auto;
	}

	.cocoro-cta__button {
		width: 100%;
	}

	/* デュアルCTAはSPで縦積み・全幅にする。 */
	.cocoro-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* 下部固定バナーだけは横並びを維持。 */
	.cocoro-cta--pos-bottom_bar .cocoro-cta__actions {
		flex-direction: row;
	}

	.cocoro-cta__description {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.cocoro-cta--pos-bottom_bar .cocoro-cta__card {
		flex-direction: row;
		align-items: center;
		/* マイクロコピー有無で高さが変わるため上限は固定せず、内容に追従させる。 */
	}

	.cocoro-cta--pos-bottom_bar .cocoro-cta__body {
		gap: 10px;
		min-width: 0;
	}

	.cocoro-cta--pos-bottom_bar .cocoro-cta__heading {
		font-size: 0.78em;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.cocoro-cta--pos-bottom_bar .cocoro-cta__button {
		width: auto;
		padding: 9px 16px;
	}
}

@media (min-width: 768px) {
	.cocoro-cta--device-sp {
		display: none !important;
	}
}

/* ===== デザインカスタマイズ: レイアウト系ユーティリティ =====
   管理画面の選択値（空＝タイプ標準）に応じてレンダラがクラスを付与する。 */

/* 余白・密度（パディング倍率） */
.cocoro-cta--density-compact { --cocoro-cta-density: 0.7; }
.cocoro-cta--density-normal { --cocoro-cta-density: 1; }
.cocoro-cta--density-comfortable { --cocoro-cta-density: 1.35; }

/* 文字サイズ（基準フォント。子要素はem連動） */
.cocoro-cta--font-sm { --cocoro-cta-font: 14px; }
.cocoro-cta--font-md { --cocoro-cta-font: 16px; }
.cocoro-cta--font-lg { --cocoro-cta-font: 18px; }

/* 影の強さ（カードのドロップシャドウ。タイプ別の標準影を上書き） */
.cocoro-cta--shadow-none .cocoro-cta__card { box-shadow: none; }
.cocoro-cta--shadow-sm .cocoro-cta__card { box-shadow: 0 2px 8px rgba(28, 28, 28, 0.10); }
.cocoro-cta--shadow-md .cocoro-cta__card { box-shadow: 0 6px 24px rgba(28, 28, 28, 0.14); }
.cocoro-cta--shadow-lg .cocoro-cta__card { box-shadow: 0 14px 40px rgba(28, 28, 28, 0.22); }

/* テキスト配置（本文＋アクション） */
.cocoro-cta--align-left .cocoro-cta__body { text-align: left; }
.cocoro-cta--align-left .cocoro-cta__actions { justify-content: flex-start; }
.cocoro-cta--align-left .cocoro-cta__microcopy { text-align: left; }

.cocoro-cta--align-center .cocoro-cta__body { text-align: center; }
.cocoro-cta--align-center .cocoro-cta__actions { justify-content: center; }
.cocoro-cta--align-center .cocoro-cta__microcopy { text-align: center; }