/* ===========================================================
   キャプション付きブロック（accept/capbox）
   フロント・ブロックエディターの両方で読み込む
   =========================================================== */

.acp-capbox {
	--acp-c: #001533;   /* 主色 */
	--acp-bg: #eef3fa;  /* 淡色 */
	margin: 24px 0;
	border-radius: 4px;
}

.acp-capbox--color2 {
	--acp-c: #3c73b4;
	--acp-bg: #eff5fc;
}

.acp-capbox--color3 {
	--acp-c: #b22222;
	--acp-bg: #fbf0f0;
}

/* 本文側の余白調整。
   サイト共通CSSの p / ul への余白指定より詳細度を高くしている。 */
.acp-capbox .acp-capbox__body > :first-child {
	margin-top: 0;
}

.acp-capbox .acp-capbox__body > :last-child {
	margin-bottom: 0;
}

/* --- 標準 --------------------------------------------------- */
.acp-capbox {
	border: 2px solid var(--acp-c);
	background: #fff;
}

.acp-capbox > .acp-capbox__ttl {
	background: var(--acp-c);
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
	padding: 10px 16px;
}

.acp-capbox > .acp-capbox__body {
	padding: 16px;
}

/* --- キャプション（小） ------------------------------------- */
.acp-capbox.is-style-small > .acp-capbox__ttl {
	font-size: 0.85em;
	padding: 6px 12px;
}

.acp-capbox.is-style-small > .acp-capbox__body {
	padding: 14px;
}

/* --- キャプション（枠上） ----------------------------------- */
.acp-capbox.is-style-onborder,
.acp-capbox.is-style-onborder2 {
	position: relative;
	margin-top: 32px;
	background: #fff;
}

.acp-capbox.is-style-onborder > .acp-capbox__ttl,
.acp-capbox.is-style-onborder2 > .acp-capbox__ttl {
	position: absolute;
	top: 0;
	background: #fff;
	color: var(--acp-c);
	padding: 0 10px;
	transform: translateY(-50%);
}

.acp-capbox.is-style-onborder > .acp-capbox__ttl {
	left: 16px;
}

.acp-capbox.is-style-onborder2 > .acp-capbox__ttl {
	left: 50%;
	transform: translate( -50%, -50% );
}

.acp-capbox.is-style-onborder > .acp-capbox__body,
.acp-capbox.is-style-onborder2 > .acp-capbox__body {
	padding: 22px 16px 16px;
}

/* --- キャプション（枠内） ----------------------------------- */
.acp-capbox.is-style-inner > .acp-capbox__ttl {
	display: inline-block;
	background: var(--acp-c);
	color: #fff;
	font-size: 0.85em;
	padding: 4px 12px;
	margin: 16px 16px 0;
	border-radius: 2px;
}

.acp-capbox.is-style-inner > .acp-capbox__body {
	padding: 12px 16px 16px;
}

/* --- キャプション（浮き出し） ------------------------------- */
.acp-capbox.is-style-shadow {
	position: relative;
	margin-top: 32px;
	border: none;
	background: var(--acp-bg);
	border-radius: 6px;
}

.acp-capbox.is-style-shadow > .acp-capbox__ttl {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate( -50%, -50% );
	background: var(--acp-c);
	color: #fff;
	padding: 6px 20px;
	border-radius: 20px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.2 );
	white-space: nowrap;
}

.acp-capbox.is-style-shadow > .acp-capbox__body {
	padding: 28px 20px 20px;
}

/* --- キャプション（内テキスト） ----------------------------- */
.acp-capbox.is-style-intext > .acp-capbox__ttl {
	background: none;
	color: var(--acp-c);
	font-weight: 700;
	border-bottom: 1px dashed var(--acp-c);
	padding: 16px 16px 8px;
}

.acp-capbox.is-style-intext > .acp-capbox__body {
	padding: 12px 16px 16px;
}

/* --- スマートフォン ----------------------------------------- */
@media ( max-width: 782px ) {
	.acp-capbox > .acp-capbox__ttl {
		padding: 8px 12px;
	}

	.acp-capbox > .acp-capbox__body {
		padding: 12px;
	}

	.acp-capbox.is-style-shadow > .acp-capbox__ttl {
		white-space: normal;
		width: calc( 100% - 32px );
		text-align: center;
	}
}