.hsp-notice-box {
	--hsp-notice-accent: #75d92f;
	--hsp-notice-shadow: rgba(113, 184, 0, 0.18);
	--hsp-notice-width: min(100%, calc(100vw - 20px));

	box-sizing: border-box;
	width: var(--hsp-notice-width);
	max-width: 100%;
	margin: 2em auto 2em 0;
	border: 1px solid var(--hsp-notice-accent);
	background: #fff;
	box-shadow: 0 0 18px var(--hsp-notice-shadow);
}

.hsp-notice-box--align-center {
	margin-left: calc((100% - var(--hsp-notice-width)) / 2);
}

.hsp-notice-box--align-right {
	margin-left: calc(100% - var(--hsp-notice-width));
}

.hsp-notice-box--blue {
	--hsp-notice-accent: #4b76c7;
	--hsp-notice-shadow: rgba(56, 103, 183, 0.16);
}

.hsp-notice-box--orange {
	--hsp-notice-accent: #ec920f;
	--hsp-notice-shadow: rgba(217, 120, 0, 0.16);
}

.hsp-notice-box--gray {
	--hsp-notice-accent: #7f8790;
	--hsp-notice-shadow: rgba(105, 112, 122, 0.14);
}

.hsp-notice-box--width-wide {
	--hsp-notice-width: min(920px, calc(100vw - 20px));

	max-width: calc(100vw - 20px);
}

.hsp-notice-box--width-medium {
	--hsp-notice-width: min(760px, 100%, calc(100vw - 20px));
}

.hsp-notice-box--width-narrow {
	--hsp-notice-width: min(600px, 100%, calc(100vw - 20px));
}

.hsp-notice-box--width-custom {
	--hsp-notice-width: min(var(--hsp-notice-custom-width, 776px), 100%, calc(100vw - 20px));
}

.hsp-notice-box--simple {
	--hsp-notice-simple-text: #27201e;
	--hsp-notice-simple-bg: #fffcf8;
	--hsp-notice-simple-border: #ffead9;

	border-color: var(--hsp-notice-simple-border);
	background: var(--hsp-notice-simple-bg);
	box-shadow: none;
	color: var(--hsp-notice-simple-text);
}

.hsp-notice-box--simple.hsp-notice-box--alert {
	--hsp-notice-simple-text: #4d4d49;
	--hsp-notice-simple-bg: #fffcef;
	--hsp-notice-simple-border: #faf1d2;
}

.hsp-notice-box--simple.hsp-notice-box--warning {
	--hsp-notice-simple-text: #444142;
	--hsp-notice-simple-bg: #fff6f9;
	--hsp-notice-simple-border: #fddee8;
}

.hsp-notice-box--simple.hsp-notice-box--ok {
	--hsp-notice-simple-text: #484a47;
	--hsp-notice-simple-bg: #fafff4;
	--hsp-notice-simple-border: #dff9cc;
}

.hsp-notice-box--simple.hsp-notice-box--memo {
	--hsp-notice-simple-text: #454545;
	--hsp-notice-simple-bg: #fbfbfb;
	--hsp-notice-simple-border: #e2e2e2;
}

.hsp-notice-box__heading {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 0.38em 0.9em 0.42em 0.7em;
	background: var(--hsp-notice-accent);
	color: #fff;
	column-gap: 0.5em;
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.35;
	vertical-align: top;
}

.hsp-notice-box__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 1em;
	height: 1em;
	--hsp-notice-icon-cutout: var(--hsp-notice-accent);
	color: #fff;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1;
}

.hsp-notice-box__icon--bulb::before {
	content: "";
	position: absolute;
	top: 0.08em;
	left: 0.24em;
	box-sizing: border-box;
	width: 0.52em;
	height: 0.58em;
	border: 0.16em solid currentColor;
	border-bottom-width: 0.11em;
	border-radius: 50% 50% 42% 42%;
}

.hsp-notice-box__icon--bulb::after {
	content: "";
	position: absolute;
	left: 0.34em;
	bottom: 0.08em;
	width: 0.32em;
	height: 0.2em;
	border-radius: 0.03em;
	background: currentColor;
	box-shadow: 0 -0.08em 0 -0.04em currentColor;
}

.hsp-notice-box__icon--warning::before {
	content: "";
	position: absolute;
	top: 0.09em;
	left: 0.06em;
	width: 0;
	height: 0;
	border-right: 0.44em solid transparent;
	border-bottom: 0.8em solid currentColor;
	border-left: 0.44em solid transparent;
}

.hsp-notice-box__icon--warning::after,
.hsp-notice-box__icon--alert::after {
	content: "!";
	position: absolute;
	left: 0;
	width: 100%;
	color: var(--hsp-notice-icon-cutout);
	font-size: 0.66em;
	font-weight: 900;
	line-height: 1;
	text-align: center;
}

.hsp-notice-box__icon--warning::after {
	top: 0.32em;
}

.hsp-notice-box__icon--alert::before {
	content: "";
	position: absolute;
	inset: 0.08em;
	border-radius: 50%;
	background: currentColor;
}

.hsp-notice-box__icon--alert::after {
	top: 0.2em;
}

.hsp-notice-box__icon--edit::before,
.hsp-notice-box__icon--edit::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 999px;
}

.hsp-notice-box__icon--edit::before {
	top: 0.08em;
	left: 0.48em;
	width: 0.18em;
	height: 0.78em;
	transform: rotate(20deg);
}

.hsp-notice-box__icon--edit::after {
	right: 0.1em;
	bottom: 0.08em;
	width: 0.62em;
	height: 0.13em;
}

.hsp-notice-box__title {
	min-width: 0;
	overflow-wrap: anywhere;
	white-space: normal;
}

.hsp-notice-box__body {
	padding: 2.25em 2.8em 2.45em;
	color: #333;
	font-size: 1rem;
	line-height: 1.9;
	overflow-wrap: anywhere;
	white-space: normal;
}

.hsp-notice-box--simple .hsp-notice-box__body {
	padding: 1.45em 1.55em 1.6em;
	color: inherit;
}

.hsp-notice-box__body:empty {
	display: none;
}

.hsp-notice-box__body > :first-child {
	margin-top: 0;
}

.hsp-notice-box__body > :last-child {
	margin-bottom: 0;
}

.hsp-notice-box__body a {
	color: #3867b7;
	font-weight: 700;
	overflow-wrap: anywhere;
	text-decoration: none;
	white-space: normal;
}

.hsp-notice-box__body a:hover {
	text-decoration: underline;
}

.hsp-notice-box__body ol,
.hsp-notice-box__body ul {
	padding-left: 1.6em;
}

.hsp-notice-box__body li {
	margin: 0.35em 0;
	white-space: normal;
}

.hsp-notice-box__body small {
	color: #757575;
}

.hsp-notice-box__body .wp-block-columns {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 1.5em;
	margin: 0 0 1em;
}

.hsp-notice-box__body .wp-block-columns:last-child {
	margin-bottom: 0;
}

.hsp-notice-box__body .wp-block-column {
	display: flex;
	flex: 1 1 0 !important;
	flex-basis: 0 !important;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.hsp-notice-box .hsp-notice-box__body .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
	flex-basis: 0 !important;
}

.hsp-notice-box .hsp-notice-box__body .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:last-child {
	flex: 0 1 auto !important;
	flex-basis: auto !important;
}

.hsp-notice-box__body .wp-block-column:first-child {
	text-align: left;
}

.hsp-notice-box__body .wp-block-column:last-child {
	flex: 0 1 auto !important;
	flex-basis: auto !important;
	width: max-content;
	max-width: 50%;
	text-align: right;
}

.hsp-notice-box__body .wp-block-column:first-child:last-child {
	flex: 1 1 0 !important;
	flex-basis: 0 !important;
	width: auto;
	max-width: none;
	text-align: left;
}

.hsp-notice-box__body .wp-block-column > :first-child {
	margin-top: 0;
}

.hsp-notice-box__body .wp-block-column > :last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.hsp-notice-box {
		max-width: calc(100vw - 20px);
		margin: 1.6em 0;
	}

	.hsp-notice-box__heading {
		padding: 0.38em 0.75em 0.42em 0.65em;
		font-size: 1rem;
	}

	.hsp-notice-box__body {
		padding: 1.45em 0.95em 1.6em;
	}

	.hsp-notice-box--simple .hsp-notice-box__body {
		padding: 1.15em 0.95em 1.3em;
	}

	.hsp-notice-box__body .wp-block-columns {
		gap: 0.75em;
	}
}