/**
 * Note that these styles are loaded *before* editor styles, so that
 * editor-specific styles using the same selectors will take precedence.
 */
 
 .wp-block-compost-compost-card {
    background-color: var( --post-background-color );
    padding: 0 0 30px;
	font-family: "80kb";
	max-width: 570px;
	font-size: 17px;
	overflow: hidden;
	max-height: 0;
}

.compost-card-head {
	height: 53px;
	margin: 0 15px;
	padding: 12px 0;
	border-bottom: 1px solid var( --post-text-color );
	display: flex;
	justify-content: center;
}

.compost-card-head .compost-card-serial {
	width: 30px; height: 30px;
	border-radius: 30px;
	line-height: 1.8;
	text-align: center;
	font-weight: bold;
	background-color: var( --post-text-color );
	color: var( --post-background-color );
}

.compost-card-body {
    /* display: flex; */
	margin: 25px 15px 0;
}

.compost-card-body .wp-block-image .alignright {
	margin-top: .2em;
	margin-right: 0;
	margin-left: 1em;
	margin-bottom: 0;
}

.compost-card-body .wp-block-image .alignleft {
	margin-top: .2em;
	margin-left: 0;
	margin-right: 1em;
	margin-bottom: 0;
}

.compost-card-body .wp-block-image figcaption {
	font-size: 0.8em;
}

h4.compost-card-title {
    margin: 0 !important;
}

.compost-card-image {
    flex: 0 0 180px;
	margin-left: 14px;
}

.entry-content > .wp-block-compost-image-map {
	padding: 0;
	margin-left: 45px;
}

.wp-block-compost-image-map {
	position: relative;
}

.compost-image-map-head {
	position: relative;
	margin: 0 auto;
}

.wp-block-compost-image-map img.compost-image-map-image {
	width: 100%;
	display: block;
}

.compost-image-map-head .zoom-button,
.compost-image-map-head .hotspot {
	position: absolute;
	top: 0; left: 0;
	width: 30px; height: 30px;
	border-radius: 30px;
	border: 2px solid var( --post-background-color );
	color: var( --post-background-color );
	font-family: "80kb";
	font-weight: bold;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
}

.compost-image-map-head .zoom-button {
	top: 15px; left: auto; right: 15px;
	border: none; border-radius: 0;
	width: auto; height: auto;
	font-size: 28px;
}

.compost-image-map-head .zoom-button:before {
	content: "[+]";
}

.compost-image-map-head .hotspot.active,
.has-hover .compost-image-map-head .hotspot:hover,
.has-hover .compost-image-map-head .zoom-button:hover {
	background-color: var( --post-background-color );
	color: var( --post-text-color );
}

.has-hover .compost-image-map-head .zoom-button:hover {
	background-color: transparent;
}

.compost-image-map-body {
	top: 0; left: 0; width: 100%; height: 100%;
}

.compost-image-map-body .wp-block-compost-compost-card {
	position: absolute;
	top: 10%; left: 50%;
	margin-left: -285px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 250ms;
}

.compost-image-map-body .wp-block-compost-compost-card.show {
	opacity: 1;
	pointer-events: all;
	max-height: 8000px;
}

.wp-block-compost-compost-card h4 {
	clear: none;
}

@media screen and ( max-width: 720px ) {
	.compost-image-map-body .wp-block-compost-compost-card {
		position: static;
		margin: 0;
		opacity: 1;
		max-height: 0;
		padding: 0;
		overflow: hidden;
		transition: max-height 250ms, padding 250ms;
	}
	.compost-image-map-body .wp-block-compost-compost-card.show {
		max-height: 2500px;
		padding-bottom: 30px;
		pointer-events: all;
	}
	.compost-card-body {
		display: block;
	}
	.compost-card-image {
		margin: 0 0 14px;
	}
	.compost-image-map-head .zoom-button {
		display: none;
	}
}

@media screen and ( max-width: 480px ) {
	.entry-content > .wp-block-compost-image-map {
		margin: 0;
	}
}