/*
 * Late override layer for sites with strong theme / block CSS.
 * Keep this file focused on SWELL decoration classes to avoid taking over the
 * host theme's ordinary layout.
 */

body :is(.swell-block-button, .swell-block-capbox, .swell-block-accordion, .swell-block-step, .swell-block-tab, .swell-block-dl, .swell-styleBox, .cap_box, .c-balloon, .p-blogCard),
body :is(.swell-block-button, .swell-block-capbox, .swell-block-accordion, .swell-block-step, .swell-block-tab, .swell-block-dl, .swell-styleBox, .cap_box, .c-balloon, .p-blogCard) * {
	box-sizing: border-box !important;
}

body :is(
	.swell-styleBox,
	.is-style-border_sg,
	.is-style-border_dg,
	.is-style-border_sm,
	.is-style-border_dm,
	.is-style-bg_main,
	.is-style-bg_main_thin,
	.is-style-bg_gray,
	.is-style-bg_stripe,
	.is-style-bg_grid,
	.is-style-crease,
	.is-style-stitch,
	.is-style-kakko_box,
	.is-style-big_kakko_box,
	.is-style-dent_box,
	.is-style-emboss_box,
	.is-style-border_left,
	.is-style-sticky_box,
	.is-style-balloon_box,
	.is-style-balloon_box2,
	.is-style-icon_good,
	.is-style-icon_bad,
	.is-style-icon_info,
	.is-style-icon_announce,
	.is-style-icon_pen,
	.is-style-icon_book,
	.is-style-big_icon_point,
	.is-style-big_icon_good,
	.is-style-big_icon_bad,
	.is-style-big_icon_hatena,
	.is-style-big_icon_caution,
	.is-style-big_icon_memo
) {
	box-sizing: border-box !important;
	margin: 1.8em 0 !important;
	padding: var(--swl-box_padding) !important;
	position: relative !important;
}

body .is-style-border_sg {
	border: 1px solid var(--color_border) !important;
}

body .is-style-border_dg {
	border: 4px double var(--color_border) !important;
}

body .is-style-border_sm {
	border: 1px solid var(--color_main) !important;
}

body .is-style-border_dm {
	border: 4px double var(--color_main) !important;
}

body .is-style-bg_main {
	background: var(--color_main) !important;
	color: #fff !important;
}

body .is-style-bg_main_thin {
	background: var(--color_main_thin) !important;
}

body .is-style-bg_gray {
	background: var(--color_gray) !important;
}

body .is-style-bg_stripe {
	background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .04) 0 4px, transparent 4px 10px) !important;
}

body .is-style-bg_grid {
	background-color: rgba(0, 0, 0, .025) !important;
	background-image: linear-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .045) 1px, transparent 1px) !important;
	background-size: 18px 18px !important;
}

body .is-style-crease {
	background: #fff !important;
	box-shadow: var(--swl-box_shadow) !important;
}

body .is-style-stitch {
	background: var(--color_gray) !important;
	border: 2px dashed #fff !important;
	box-shadow: 0 0 0 4px var(--color_gray) !important;
}

body .is-style-dent_box {
	background: var(--color_gray) !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .12) !important;
}

body .is-style-emboss_box {
	background: #fff !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--swl-box_shadow) !important;
}

body .is-style-border_left {
	background: var(--color_main_thin) !important;
	border-left: 5px solid var(--color_main) !important;
}

body .is-style-sticky_box {
	background: #fff8b8 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
	transform: rotate(-.3deg) !important;
}

body .is-style-balloon_box,
body .is-style-balloon_box2 {
	background: var(--color_main_thin) !important;
}

body .is-style-kakko_box::before,
body .is-style-kakko_box::after,
body .is-style-big_kakko_box::before,
body .is-style-big_kakko_box::after {
	border-color: var(--color_main) !important;
	border-style: solid !important;
	content: "" !important;
	display: block !important;
	position: absolute !important;
}

body .is-style-kakko_box::before,
body .is-style-big_kakko_box::before {
	border-width: 2px 0 0 2px !important;
	left: 0 !important;
	top: 0 !important;
}

body .is-style-kakko_box::after,
body .is-style-big_kakko_box::after {
	border-width: 0 2px 2px 0 !important;
	bottom: 0 !important;
	right: 0 !important;
}

body .is-style-kakko_box::before,
body .is-style-kakko_box::after {
	height: 1.3em !important;
	width: 1.3em !important;
}

body .is-style-big_kakko_box::before,
body .is-style-big_kakko_box::after {
	height: 2em !important;
	width: 2em !important;
}

body .cap_box {
	--capbox-color: var(--color_main);
	--capbox-color--bg: transparent;
	--the-icon-size: 1.1em;
	box-sizing: border-box !important;
	margin: 2em 0 !important;
	position: relative !important;
}

body .cap_box_ttl {
	align-items: center !important;
	background-color: var(--capbox-color) !important;
	color: #fff !important;
	display: flex !important;
	gap: .5em !important;
	justify-content: center !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	padding: .5em !important;
	position: relative !important;
	text-align: center !important;
	z-index: 1 !important;
}

body .cap_box_content {
	background-color: var(--capbox-color--bg) !important;
	border: 1px solid var(--capbox-color) !important;
	clear: both !important;
	margin-top: -2px !important;
	padding: 1.25em !important;
	position: relative !important;
	z-index: 0 !important;
}

body .cap_box_content > :first-child {
	margin-top: 0 !important;
}

body .cap_box_content > :last-child {
	margin-bottom: 0 !important;
}

body .cap_box.is-style-small_ttl .cap_box_ttl {
	float: left !important;
	font-size: .85em !important;
	padding: .25em .75em !important;
	top: 1px !important;
}

body .cap_box.is-style-onborder_ttl > .cap_box_ttl,
body .cap_box.is-style-onborder_ttl2 > .cap_box_ttl {
	display: inline-flex !important;
	font-size: .85em !important;
	left: 1em !important;
	line-height: 1 !important;
	padding: .5em .75em !important;
	top: 1em !important;
}

body .cap_box.is-style-onborder_ttl > .cap_box_ttl {
	background-color: var(--color_content_bg) !important;
	color: var(--capbox-color) !important;
}

body .cap_box.is-style-onborder_ttl > .cap_box_content,
body .cap_box.is-style-onborder_ttl2 > .cap_box_content {
	padding-top: 1.5em !important;
}

body .cap_box.is-style-shadow {
	box-shadow: var(--swl-box_shadow) !important;
	overflow: hidden !important;
}

body .cap_box.is-style-shadow > .cap_box_content {
	border: none !important;
}

body .cap_box.is-style-intext {
	border: 1px solid var(--capbox-color) !important;
	padding: 1.5em !important;
}

body .cap_box.is-style-intext > .cap_box_ttl {
	background: none !important;
	color: var(--capbox-color) !important;
	justify-content: flex-start !important;
	padding: 0 !important;
	text-align: left !important;
}

body .cap_box.is-style-intext > .cap_box_content {
	background: none !important;
	border: none !important;
	margin-top: 1em !important;
	padding: 0 !important;
}

body :is(ul, ol).is-style-bad_list,
body :is(ul, ol).is-style-check_list,
body :is(ul, ol).is-style-good_list,
body :is(ul, ol).is-style-index,
body :is(ul, ol).is-style-note_list,
body :is(ul, ol).is-style-num_circle,
body :is(ul, ol).is-style-triangle_list,
body .wp-block-group:is(.is-style-bad_list, .is-style-check_list, .is-style-good_list, .is-style-index, .is-style-note_list, .is-style-num_circle, .is-style-triangle_list) :is(ul, ol) {
	list-style: none !important;
	padding-left: 0 !important;
}

body :is(.is-style-bad_list, .is-style-check_list, .is-style-good_list, .is-style-triangle_list) li {
	margin: .45em 0 !important;
	padding-left: 1.5em !important;
	position: relative !important;
}

body :is(.is-style-bad_list, .is-style-check_list, .is-style-good_list, .is-style-triangle_list) li::before {
	background: none !important;
	border: none !important;
	display: block !important;
	font-weight: 700 !important;
	left: 0 !important;
	line-height: 1.5 !important;
	position: absolute !important;
	top: 0 !important;
	width: 1em !important;
}

body .is-style-check_list li::before {
	color: var(--color_list_check) !important;
	content: "\2713" !important;
}

body .is-style-good_list li::before {
	color: var(--color_list_good) !important;
	content: "\25cb" !important;
}

body .is-style-triangle_list li::before {
	color: var(--color_list_triangle) !important;
	content: "\25b3" !important;
}

body .is-style-bad_list li::before {
	color: var(--color_list_bad) !important;
	content: "\00d7" !important;
}

body .is-style-note_list li {
	margin: .5em 0 !important;
	padding-left: 1.25em !important;
	position: relative !important;
}

body .is-style-note_list li::before {
	background: none !important;
	border: none !important;
	content: "\203b" !important;
	left: 0 !important;
	position: absolute !important;
	top: 0 !important;
	transform: scale(.85) !important;
	transform-origin: 0 50% !important;
}

body :is(ol.is-style-num_circle, .wp-block-group.is-style-num_circle ol) {
	counter-reset: swl-num-circle !important;
}

body :is(ol.is-style-num_circle, .wp-block-group.is-style-num_circle ol) > li {
	margin: .45em 0 !important;
	padding-left: 2em !important;
	position: relative !important;
}

body :is(ol.is-style-num_circle, .wp-block-group.is-style-num_circle ol) > li::before {
	align-items: center !important;
	background: var(--color_list_num) !important;
	border-radius: 50% !important;
	color: #fff !important;
	content: counter(swl-num-circle) !important;
	counter-increment: swl-num-circle !important;
	display: inline-flex !important;
	font-size: .78em !important;
	font-weight: 700 !important;
	height: 1.45em !important;
	justify-content: center !important;
	left: 0 !important;
	line-height: 1 !important;
	position: absolute !important;
	top: .1em !important;
	width: 1.45em !important;
}

body :is([class*="is-style-btn_"], .swell-block-button) a,
body a:is(.is-style-btn_normal, .is-style-btn_solid, .is-style-btn_shiny) {
	align-items: center !important;
	background: var(--the-btn-bg, var(--the-btn-color, var(--color_main))) !important;
	border-radius: var(--the-btn-radius, 4px) !important;
	color: #fff !important;
	display: inline-flex !important;
	font-weight: 700 !important;
	gap: .45em !important;
	justify-content: center !important;
	line-height: 1.5 !important;
	padding: var(--the-padding, .75em 1.5em) !important;
	text-decoration: none !important;
}

body :is([class*="is-style-btn_"], .swell-block-button).is-style-btn_solid a,
body a.is-style-btn_solid {
	box-shadow: var(--swl-btn_shadow) !important;
}

body :is(.wp-block-image.is-style-shadow img, .wp-block-video.is-style-shadow video, img.shadow) {
	box-shadow: var(--swl-img_shadow) !important;
}

body :is(.wp-block-image.is-style-border img, .wp-block-video.is-style-border video, img.border) {
	border: 1px solid var(--color_border) !important;
}

body :is(.wp-block-image.is-style-photo_frame img, .wp-block-video.is-style-photo_frame video, img.photo_frame) {
	background: #fff !important;
	border: 6px solid #fff !important;
	box-shadow: var(--swl-img_shadow) !important;
	padding: 0 !important;
}
