:root{
--icon-maru:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223px%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3C%2Fsvg%3E');
--icon-maru2:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222px%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%20%2F%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222px%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3C%2Fsvg%3E');
--icon-square:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpolygon%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223px%22%20points%3D%2211%202%202%2018%2020%2018%2011%202%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E');
--icon-batsu:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjNweCIgeDE9IjEiIHkxPSIxIiB4Mj0iMjAiIHkyPSIyMCIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjYyIgc3Ryb2tlLXdpZHRoPSIzcHgiIHgxPSIyMCIgeTE9IjEiIHgyPSIxIiB5Mj0iMjAiLz48L3N2Zz4=");
--marker-color:#ffffaa
}

.color-red {color:#ff533d;}
.color-pink {color:#fea680;}
.color-green {color:#01abaa;}
.color-orange {color:#ff8c00;}
.color-yellow {color:#f0db00;}
.color-blue {color:#286da8;}

a:has([class^="c-btn--"]){text-decoration: none;}
[class^="c-btn--"]{
	display: inline-block;padding: 8px 12px;border-radius: 50px;font-size: inherit;line-height: 1;font-weight: 700;width: 96%;margin: 0 auto;position: relative;
	&::after{position: absolute;content:"";box-sizing: border-box;top:calc( 50% - 5px );right: 13px;width: 10px;height: 10px;border-right: 3px solid #fff;border-bottom:3px solid #fff;transform: rotate(-45deg);}
}
.c-btn--red{color:#fff;background: #d30535;box-shadow: 0 3px 0 #840d29;}
.c-btn--blue{color:#fff;background: #d30535;box-shadow: 0 3px 0 #840d29;}
.c-btn--yellow{color:#fff;background: #d30535;box-shadow: 0 3px 0 #840d29;}
.c-btn--green{color:#fff;background: #d30535;box-shadow: 0 3px 0 #840d29;}

.text-shadow{text-shadow: #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px;}
.marker,[class^="marker-"]{font-weight: bold;padding: 0 5px 1px;background: linear-gradient(transparent 60%, var(--marker-color,#ffffaa) 40%);}
.marker-red{--marker-color:#ffa4a4;}
.marker-green{--marker-color:#b0ffce;}
.marker-pink {--marker-color:#ffd8d8;}
.marker-orange {--marker-color:#fceca8;}
.marker-yellow {--marker-color:#f0db00;}
.marker-blue {--marker-color:#afdfff;}

.bg {color:#fff;background:#ff533d;}
.bg-red{color:#fff;background:#fea680;font-weight: 700;padding: 1px 2px;}
.bg-green {color:#fff;background:#01abaa;font-weight: 700;padding: 1px 2px;}
.bg-orange {color:#fff;background:#ff8c00;font-weight: 700;padding: 1px 2px;}
.bg-yellow {color:#fff;background:#f0db00;font-weight: 700;padding: 1px 2px;}
.bg-blue {color:#fff;background:#286da8;font-weight: 700;padding: 1px 2px;}

.size-s{ font-size: 0.8em; }
.size-l{ font-size: 1.25em; }
.size-ll{ font-size: 1.5em; }
.size-lll{ font-size: 2.0em; }
.success{background: #c3d62d;background: #aebf25;}
.error{background: #b00020;}
.warning{background: #ff7022;background: #ff5c03;}
.safety{background: #4fd8b0;background: #36d2a5;}
.informational{background: #67d3e0;background: #4eccdb;}
.danger{background: #f41c20;background: #f5393d;}
.alert{background: #ffbc0b;background: #ebab00;}
.system{background: #5a5386;background: #4d4773;}
.disabled{}
.helper{}
.selected{}

[class^="icon-svg-"]{
position: relative;
	&::before{content: "";display: block;width: 32px;height: 32px;margin: 0 auto 3px;background: #ccc;mask-repeat: no-repeat;mask-size: 100% 100%;}
}
.icon-svg-maru::before{ mask-image: var(--icon-maru);background: #ffcca8;}
.icon-svg-maru2::before{ mask-image: var(--icon-maru2);background: #ffa8b8;}
.icon-svg-square::before{ mask-image: var(--icon-square);background: #59c159;}
.icon-svg-batsu::before{ mask-image: var(--icon-batsu);background: #ccc;}
[class^="icon-bg-"]{
	position: relative;z-index: 0;display: inline-flex;align-items: center;justify-content: center;
	&::before{content: "";position: absolute;left: calc( 50% - 16px);z-index: -1;top:calc( 50% - 16px);width: 32px;height: 32px;margin: 0 auto 6px;background: #ccc;mask-repeat: no-repeat;mask-size: 100% 100%;}
}
.icon-bg-maru::before{ mask-image: var(--icon-maru);background: #ffcca8;}
.icon-bg-maru2::before{ mask-image: var(--icon-maru2);background: #ffa8b8;}
.icon-bg-square::before{ mask-image: var(--icon-square);background: #59c159;}
.icon-bg-batsu::before{ mask-image: var(--icon-batsu);background: #ccc;}