/*
|-------------------------------------------------------------------------------
|   css vars
|-------------------------------------------------------------------------------
*/

:root {
	--pi: 3.1415926535898;
	--ga: 1.6180339887499;

	--font-size-html: 16;

	--line-height-em: calc(1em * var(--line-height,1.6));

	--padding-input: .6em;

	--hsl-logo-line: 120,100%,36%;
	--color-logo-line: hsla(var(--hsl-logo-line), var(--a-logo-line,1));

	--color-logo-twitter: #1da1f2;
	--color-logo-github: #24292e;

	--width-icon: 1.25em;
}

body {
	--height-wpadminbar: 0;
}

body.admin-bar {
	--height-wpadminbar: 32;
}

@media (max-width: 782px) {
	body.admin-bar {
		--height-wpadminbar: 46;
	}
}

@media (max-width: 600px) {
	body.admin-bar {
		--height-wpadminbar: 0;
	}
}

body {
	--height-wpadminbar-px: calc(1px * var(--height-wpadminbar));
}

/*
|-------------------------------------------------------------------------------
|   reset
|-------------------------------------------------------------------------------
*/

*::before,
*::after,
* {
	--hs-txt: var(--h-txt),var(--s-txt);
	--hsl-txt: var(--hs-txt),calc(var(--l-txt) + var(--l-txt-,0%));
	--color-txt: hsla(
		var(--hs-txt),
		calc(var(--l-txt) + var(--l-txt-,0%)),
		var(--a-txt,1)
	);

	--hs-link: var(--h-link),var(--s-link);
	--hsl-link: var(--hs-link),calc(var(--l-link) + var(--l-link-,0%));
	--color-link: hsla(
		var(--hs-link),
		calc(var(--l-link) + var(--l-link-,0%)),
		var(--a-link,1)
	);

	--hs-accent: var(--h-accent),var(--s-accent);
	--hsl-accent: var(--hs-accent),calc(var(--l-accent) + var(--l-accent-,0%));
	--color-accent: hsla(
		var(--hs-accent),
		calc(var(--l-accent) + var(--l-accent-,0%)),
		var(--a-accent,1)
	);

	--hs-bg: var(--h-bg),var(--s-bg);
	--hsl-bg: var(--hs-bg),calc(var(--l-bg) + var(--l-bg-,0%));
	--color-bg: hsla(
		var(--hs-bg),
		calc(var(--l-bg) + var(--l-bg-,0%)),
		var(--a-bg,1)
	);

	--hs-bd: var(--h-bd,0),var(--s-bd,0%);
	--hsl-bd: var(--hs-bd),var(--l-bd,0%);
	--color-bd: hsla(var(--hsl-bd),var(--a-bd,.15));

	margin: 0;
	padding: 0;
	font-family: inherit;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	-webkit-tap-highlight-color: hsla(var(--hsl-txt),0);

	background-repeat: no-repeat;
	background-clip: padding-box;
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: var(--color-bd);

	/* animation-name: var(--ani-name,none); */
	animation-duration: var(--ani-dura,var(--tran-dura));
	animation-timing-function: var(--ani-timing-function,linear);
	animation-fill-mode: var(--ani-fill-mode,forwards);
}

* {
	font-weight: inherit;
	vertical-align: top;
}

*::before,
*::after,
[disabled],
svg.icon,
.click-through,
.out-going-arrow,
a .favicon {
	pointer-events: none;
	user-select: none;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background-color: var(--color-bg);
}

body {
	scroll-behavior: smooth;
	line-height: var(--line-height,1.6);
}

a,
object, embed,
input::-moz-focus-inner {
	outline: 0;
}

/* Hide Arrows From Input Number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

a {
	position: relative;
	text-decoration: none;
}

a[target="_blank"]::after {
	content: '\2197';
}

abbr {
	position: relative;
}

abbr::before,
abbr::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
  transform-origin: bottom;
  transform: translate3d(-50%,.618em,0) scale(.85);
	opacity: 0;
}

abbr::before {
	content: attr(data-title);
	bottom: calc(100% + .5em);
	padding: .35em .7em;
	white-space: nowrap;
	border-radius: .35em;
}

abbr::after {
	border-width: .5em;
	border-bottom-width: 0;
	border-color: transparent;
}

abbr:hover::before,
abbr:hover::after,
abbr.bottom:hover::before,
abbr.bottom:hover::after {
  transform: translate3d(-50%,0,0);
	opacity: 1;
}

abbr.bottom::before,
abbr.bottom::after {
	top: 100%;
	bottom: auto;
	transform-origin: top;
	transform: translate3d(-50%,-.618em,0) scale(.5);
}

abbr.bottom::before {
	top: calc(100% + .5em - 1px);
}

abbr.bottom::after {
	border-width: .5em;
	border-top-width: 0;
}

b {
	vertical-align: baseline;
}

button, input, optgroup, select, textarea {
	-webkit-appearance: none;
  -moz-appearance: none;
	appearance: none;
  outline: none;
	line-height: inherit;
}

select::-ms-expand { display: none; }

[onclick]:not(body) {
	cursor: pointer;
}

input, select, textarea {
	padding: var(--padding-input) calc(var(--padding-input) * 2);
	cursor: text;
}

button, input[type="button"], input[type="radio"], input[type="submit"], select, label {
	cursor: pointer;
	border-width: 0;
	box-shadow: none;
}

input[type="radio"] {
	display: none;
}

input[type="color"] {
	cursor: pointer;
}

input:not([type="radio"]), select, textarea {
	width: 100%;
	border-radius: var(--radius-btn, 0);
}

textarea {
	resize: vertical;
}

h1, h2, h3 {
	margin-top: .4em;
	margin-bottom: .4em;
}

hr {
	--height-hr: 2em;
	--weight-hr: 1px;
	--top: var(--line-height-em);
	--right: 0;
	border: 0;
	position: relative;
	margin: var(--top) var(--right) var(--bottom,var(--top)) var(--left,var(--right));
	width: calc(100% - var(--right) var(--left));
	height: var(--height-hr);
	background-image:
		linear-gradient(to right, var(--color-bd), var(--color-bd)),
		linear-gradient(to left, var(--color-bd), var(--color-bd));
	background-position: left center;
	background-size: 100% var(--weight-hr), 0 0;
}

hr.dashed {
	background-image:
		repeating-linear-gradient(to right, var(--color-bd) 0em, var(--color-bd) .6em, transparent .6em, transparent 1.2em),
		repeating-linear-gradient(to left, var(--color-bd) 0em, var(--color-bd) .6em, transparent .6em, transparent 1.2em);
}

hr.weight-2px {
	--weight-hr: 2px;
}

hr[class*="content"] {
	--font-weight: 400;
	--width-content: 5em;
	background-size: calc(50% - var(--width-content) / 2) var(--weight-hr);
	background-position: left center, right center;
}

hr[class*="content"]::before {
	font-weight: var(--font-weight);
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	transform: translate(-50%,-50%);
}

hr.content-quotedblright::before {
	content: '\201d'; /* ” */
	top: 98%;
}

hr.content-or::before {
	content: 'OR';
}

[lang="ja"] hr.content-or::before {
	content: 'または';
}

[lang="zh"] hr.content-or::before {
	content: '或者';
}

img {
	--tran-orig: center;
	width: 100%;
	height: auto;
	background-color: transparent;
}

.image-wrap > img {
	min-width: 100%;
	min-height: 100%;
}

img.portrait {
	width: auto;
	height: 100%;
}

label {
	display: inline-block;
}

ol, ul {
	list-style: none;
	list-style-type: none;
	padding-left: 2.2em;
}

ol {
	counter-reset: number;
}

ol ol			{ padding-left: 3em; }
ol ol	ol	{ padding-left: 3.8em; }

ul.menu {
	padding-left: 0;
}

li {
	position: relative;
}

li::before {
	position: absolute;
	right: calc(100% + .4em);
}

ol > li::before {
	counter-increment: number;
	content: counters(number, '-') '.';
	font-feature-settings: 'tnum';
	white-space: nowrap;
}

ul:not(.menu) > li:not([style*="--aspect-ratio"])::before		{ content: '\2022'; }
ul:not(.menu) ul > li:not([style*="--aspect-ratio"])::before	{ content: '\25aa'; }

p {
	margin: 0;
	margin-bottom: var(--line-height-em, 1.6em);
}

p:last-of-type {
	margin-bottom: 0;
}

blockquote {
	position: relative;
	margin: 0;
	padding-left: 2em;
}

blockquote::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom:0;
	width: .2em;
	height: 100%;
	background-color: currentColor;
	opacity: .25;
}

ruby,
small {
	vertical-align: baseline;
}

small {
	display: inline-block;
}

p > small {
	display: inline;
}

sup             { vertical-align: super; }
sub             { vertical-align: sub; }
sup,
sub	            { margin: 0 .2em;}
sup:first-child,
sub:first-child { margin-left: 0; }
sup:last-child,
sub:last-child  { margin-right: 0; }

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

/*
|-------------------------------------------------------------------------------
|   font family
|-------------------------------------------------------------------------------
*/

body {
	font-family: var(--font-ascii), var(--font-cjk,''), var(--font-fallback,sans-serif);
}

code,
kbd,
pre,
samp,
.mono {
	font-family: var(--font-mono, 'JetBrains Mono'), var(--font-cjk,''), var(--font-fallback,sans-serif);
}

/*
|-------------------------------------------------------------------------------
|   font size
|-------------------------------------------------------------------------------
*/

html	{ font-size: calc(1px * var(--font-size-html)); }
body	{ font-size: 1rem; }

.font-size-x0-4			{ font-size: .4em }
.font-size-x0-45		{ font-size: .45em }
.font-size-x0-5			{ font-size: .5em }
ruby > rt,
.font-size-x0-6			{ font-size: .6em }
.font-size-x0-7			{ font-size: .7em }
small,
sup,
sub,
.font-size-x0-75		{ font-size: .75em }
.badge,
.font-size-x0-8			{ font-size: .8em }
.font-size-x0-9			{ font-size: .9em }
*,
.font-size-x1				{ font-size: 1em; }
.font-size-x1-1			{ font-size: 1.1em; }
.font-size-x1-2			{ font-size: 1.2em; }
h3,
.font-size-x1-25		{ font-size: 1.25em; }
.font-size-x1-3			{ font-size: 1.3em; }
.font-size-x1-4			{ font-size: 1.4em; }
.font-size-x1-5			{ font-size: 1.5em; }
h2,
.font-size-x1-6			{ font-size: 1.6em; }
.font-size-x1-75		{ font-size: 1.75em; }
h1,
.font-size-x2				{ font-size: 2em; }
.font-size-x2-1			{ font-size: 2.1em; }
.font-size-x2-2			{ font-size: 2.2em; }
.font-size-x2-5			{ font-size: 2.5em; }
.font-size-x3-75		{ font-size: 3.75em; }
hr.content-size-x4::before,
.font-size-x4				{ font-size: 4em; }
.font-size-x8				{ font-size: 8em; }

/*
|-------------------------------------------------------------------------------
|   font color
|-------------------------------------------------------------------------------
*/

*									{ color: inherit; }
body, p, *:link,
option						{ color: var(--color-txt); }

.font-color-unset	{ color: unset; }

/* ::-webkit-input-placeholder	{ opacity: .8; } */
::-webkit-input-placeholder	{ opacity: .4; }
::-moz-placeholder					{ opacity: .25; }
:-ms-input-placeholder			{ opacity: .4; }
:-moz-placeholder						{ opacity: .25; }

option[disabled]	{ --a-txt: .4; }

/*
|-------------------------------------------------------------------------------
|   font weight
|-------------------------------------------------------------------------------
*/

*									{ font-weight: inherit; }

*::before,
*::after,
.font-weight-400	{ font-weight: 400; }

.font-weight-100	{ font-weight: 100; }
.font-weight-200	{ font-weight: 200; }
.font-weight-300	{ font-weight: 300; }
.font-weight-500	{ font-weight: 500; }
.font-weight-600	{ font-weight: 600; }
h1, h2, h3, h4,
b, strong, .bold,
.font-weight-700	{ font-weight: 700; }
.font-weight-800	{ font-weight: 800; }
.font-weight-900	{ font-weight: 900; }

/*
|-------------------------------------------------------------------------------
|   font style
|-------------------------------------------------------------------------------
*/

.font-style-normal	{ font-style: normal; }
i, .italic,
.font-style-italic	{ font-style: italic; }

/*
|-------------------------------------------------------------------------------
|   guo du
|-------------------------------------------------------------------------------
*/

*::before,
*::after,
* {
	--tran-prop: color, background-position, background-size, background-color, border-color, fill, width, height, box-shadow, filter, text-shadow, opacity, transform, border-radius, backdrop-filter, -webkit-backdrop-filter, stroke-dashoffset;
	--tran-dura: .2s;
	--tran-timi: ease-in-out;
	transition-property: var(--tran-prop);
  transition-duration: var(--tran-dura);
  transition-timing-function: var(--tran-timi);
}

.rellax {
	transition: none;
}

/*
|-------------------------------------------------------------------------------
|	animation
|-------------------------------------------------------------------------------
*/

@keyframes rotate {
	to	{ transform: rotate(360deg); }
}

/*
|-------------------------------------------------------------------------------
|   svg
|-------------------------------------------------------------------------------
*/

i[name],
svg {
	width: 100%;
}

svg.icon {
	position: relative;
	display: inline-block;
	width: var(--width-icon);
	height: var(--width-icon);
}

svg.icon {
	vertical-align: text-top;
	transform-origin: center;
	transform: translate3d(0,0,0);
}

svg.icon.prefix {
	margin-right: .25em;
}

svg.icon.middle {
	margin-left: .25em;
	margin-right: .25em;
}

svg.icon.suffix {
	margin-left: .25em;
}

svg.icon.duotone [class*="fill"] {
	fill: currentColor;
	fill-opacity: 1;
}

svg.icon.duotone [class*="stroke"] {
	stroke: currentColor;
	stroke-opacity: 1;
}

svg.icon.duotone .fill-2 {
	fill-opacity: var(--opacity-duotone,.3);
}

svg.icon.duotone .stroke-2 {
	stroke-opacity: var(--opacity-duotone,.3);
}

svg.icon.duotone {
	--stroke-width: 0;
}

svg.icon.duotone.ion-image,
svg.icon.duotone.ion-person-circle,
svg.icon.duotone.ion-responsive,
svg.icon.duotone.ion-speedometer {
	--opacity-duotone: .2;
}

svg.icon.duotone.ion-trending-up {
	--opacity-duotone: .4;
}

/*
|-------------------------------------------------------------------------------
|   browser / feature specific
|-------------------------------------------------------------------------------
*/

/*	firefox	*/
/* .firefox select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--color-txt);
}

.firefox option:not(:checked) {
    color: black;
} */

@supports ((backdrop-filter: initial) or (-webkit-backdrop-filter: initial)) {
	.backdropfilter-blur {
		-webkit-backdrop-filter: blur(calc(1px * var(--font-size-html)));
		backdrop-filter: blur(calc(1px * var(--font-size-html)));
	}
}

/*
|-------------------------------------------------------------------------------
|   hidden element
|-------------------------------------------------------------------------------
*/

nav li::before	{ display: none; }

/*
|-------------------------------------------------------------------------------
|   custom classes
|-------------------------------------------------------------------------------
*/

.skip-link,
.screen-reader-text {
	position: absolute;
  margin: -1px;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  overflow: hidden;
  word-wrap: normal !important;
	border: 0;
}

.badge {
	margin: 0 .6em;
	padding: 0 .5em;
	display: inline-block;
	vertical-align: text-bottom;
	border-radius: .15em;
}

.badge.outline {
	background-color: transparent;
	border-width: .125em;
	border-radius: .275em;
}

.submit-wrap::before,
.button {
	--hs-btn-bg: var(--hs-link);
	--l-btn-bg: 52%;
	--l-btn-bg-: 12%;
	--color-btn-bg: hsl(var(--hs-btn-bg),var(--l-btn-bg));
	--color-btn-txt: #fff;
	--bg-width: 100%;
	--bg-height: 300%;
	--bg-pos-x: left;
	--bg-pos-y: center;
	color: var(--color-btn-txt);
	position: relative;
	padding: .5em 1em;
	white-space: nowrap;
	background-image: linear-gradient(to bottom right,
		hsl(var(--hs-btn-bg),calc(var(--l-btn-bg) + var(--l-btn-bg-))),
		hsl(var(--hs-btn-bg),calc(var(--l-btn-bg) - var(--l-btn-bg-)))
	);
	background-size: var(--bg-width) var(--bg-height);
	background-position: var(--bg-pos-x) var(--bg-pos-y);
	border-radius: var(--radius-btn);
}

.submit-wrap:hover::before,
.button:hover {
	--bg-pos-y: top;
}

.submit-wrap:active::before,
.submit-wrap:active:hover::before,
.button:active,
.button:active:hover {
	--bg-pos-y: bottom;
}

.button.width-1 {
	padding-left: 1em;
	padding-right: 1em;
}

.button.width-2 {
	padding-left: 2em;
	padding-right: 2em;
}

a .favicon {
	color: transparent;
	margin-right: .1em;
	display: inline-block;
	width: var(--width-icon);
	height: var(--width-icon);
	overflow: hidden;
	vertical-align: text-top;
	text-align: center;
	line-height: var(--width-icon);
}

/*	https://css-tricks.com/snippets/css/a-guide-to-flexbox/	*/

.shape {
	--shape: var(--shape-sub-circle);
	--dir-gradi: to bottom right;
	--color-stop-1: transparent;
	--color-stop-2: transparent;
	width: var(--width-shape, var(--width-icon));
	height: var(--height-shape, var(--width-shape, var(--width-icon)));
	-webkit-mask-image: var(--shape);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: cover;
	mask-image: var(--shape);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: cover;
	background-color: var(--color-bg);
	background-image: linear-gradient(var(--dir-gradi), var(--color-stop-1), var(--color-stop-2));
}

.multi-columns:not(.wp-block-group),
.multi-columns.wp-block-group > .wp-block-group__inner-container {
	column-count: var(--num-col);
	column-gap: var(--gap,var(--line-height-em));
}

.multi-columns:not(.wp-block-group) > *,
.multi-columns.wp-block-group > .wp-block-group__inner-container > * {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

.sticky {
	--offset-top: var(--height-wpadminbar-px,0);
	position: sticky !important;
	position: -webkit-sticky !important;
	top: -1px;
	margin-top: calc(0px - var(--offset-top));
	padding-top: var(--offset-top);
}

.flex:not(.wp-block-group),
.flex.wp-block-group > .wp-block-group__inner-container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: flex;
}

.flex.inline:not(.wp-block-group),
.flex.inline.wp-block-group > .wp-block-group__inner-container {
	display: inline-flex;
}

.flex.wrap:not(.wp-block-group),
.flex.wrap.wp-block-group > .wp-block-group__inner-container {
	flex-wrap: wrap;
}

.flex.column:not(.wp-block-group),
.flex.column.wp-block-group > .wp-block-group__inner-container {
	flex-direction: column;
}

.flex.column:not(.wp-block-group) > *,
.flex.column.wp-block-group > .wp-block-group__inner-container > * {
	width: calc((100% - var(--gap,2rem) * (var(--num-col,1) - 1)) / var(--num-col,1));
}

.flex.column:not(.wp-block-group) > .button,
.flex.column.wp-block-group > .wp-block-group__inner-container > .button {
	width: auto;
}

.flex-1:not(.wp-block-group),
.flex-1.wp-block-group > .wp-block-group__inner-container {
	flex: 1;
}

.flex:not(.wp-block-group) > .order-1,
.flex.wp-block-group > .wp-block-group__inner-container > .order-1	{ order: 1; }
.flex:not(.wp-block-group) > .order-2,
.flex.wp-block-group > .wp-block-group__inner-container > .order-2	{ order: 2; }
.flex:not(.wp-block-group) > .order-3,
.flex.wp-block-group > .wp-block-group__inner-container > .order-3	{ order: 3; }
.flex:not(.wp-block-group) > .order-4,
.flex.wp-block-group > .wp-block-group__inner-container > .order-4	{ order: 4; }
.flex:not(.wp-block-group) > .order-5,
.flex.wp-block-group > .wp-block-group__inner-container > .order-5	{ order: 5; }
.flex:not(.wp-block-group) > .order-6,
.flex.wp-block-group > .wp-block-group__inner-container > .order-6	{ order: 6; }
.flex:not(.wp-block-group) > .order-7,
.flex.wp-block-group > .wp-block-group__inner-container > .order-7	{ order: 7; }
.flex:not(.wp-block-group) > .order-8,
.flex.wp-block-group > .wp-block-group__inner-container > .order-8	{ order: 8; }
.flex:not(.wp-block-group) > .order-9,
.flex.wp-block-group > .wp-block-group__inner-container > .order-9	{ order: 9; }
.flex:not(.wp-block-group) > .order-10,
.flex.wp-block-group > .wp-block-group__inner-container > .order-10	{ order: 10; }

.flex.swiper-wrapper {
	display: inline-flex;
	flex-wrap: nowrap;
	width: auto;
	max-width: 100vw;
}

/*	align horizontal single line	*/

.flex:not(.wp-block-group).justify-start,
.flex.wp-block-group.justify-start > .wp-block-group__inner-container {
	justify-content: flex-start;
}

.flex:not(.wp-block-group).justify-end,
.flex.wp-block-group.justify-end > .wp-block-group__inner-container {
	justify-content: flex-end;
}

.flex:not(.wp-block-group).justify-center,
.flex.wp-block-group.justify-center > .wp-block-group__inner-container {
	justify-content: center;
}

.flex:not(.wp-block-group).justify-space-between,
.flex.wp-block-group.justify-space-between > .wp-block-group__inner-container {
	justify-content: space-between;
}

.flex:not(.wp-block-group).justify-space-around,
.flex.wp-block-group.justify-space-around > .wp-block-group__inner-container {
	justify-content: space-around;
}

.flex:not(.wp-block-group).justify-space-evenly,
.flex.wp-block-group.justify-space-evenly > .wp-block-group__inner-container {
	justify-content: space-evenly;
}

/*	align vertical single line	*/

.flex:not(.wp-block-group).align-items-start,
.flex.wp-block-group.align-items-start > .wp-block-group__inner-container {
	align-items: flex-start;
}

.flex:not(.wp-block-group).align-items-baseline,
.flex.wp-block-group.align-items-baseline > .wp-block-group__inner-container {
	align-items: baseline;
}

.flex:not(.wp-block-group).align-items-center,
.flex.wp-block-group.align-items-center > .wp-block-group__inner-container {
	align-items: center;
}

.flex:not(.wp-block-group).align-items-stretch,
.flex.wp-block-group.align-items-stretch > .wp-block-group__inner-container {
	align-items: stretch;
}

.flex:not(.wp-block-group).align-items-end,
.flex.wp-block-group.align-items-end > .wp-block-group__inner-container {
	align-items: flex-end;
}

/*	align vertical multi line	*/

.flex:not(.wp-block-group).align-content-start,
.flex.wp-block-group.align-content-start > .wp-block-group__inner-container {
	align-content: flex-start;
}

.flex:not(.wp-block-group).align-content-center,
.flex.wp-block-group.align-content-center > .wp-block-group__inner-container {
	align-content: center;
}

.flex:not(.wp-block-group).align-content-stretch,
.flex.wp-block-group.align-content-stretch > .wp-block-group__inner-container {
	align-content: stretch;
}

.flex:not(.wp-block-group).align-content-space-between,
.flex.wp-block-group.align-content-space-between > .wp-block-group__inner-container {
	align-content: space-between;
}

.flex:not(.wp-block-group).align-content-space-around,
.flex.wp-block-group.align-content-space-around > .wp-block-group__inner-container {
	align-content: space-around;
}

.has-overlay,
[style*="--aspect-ratio"] {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.has-overlay::before,
[style*="--aspect-ratio"]::before,
[style*="--aspect-ratio"] > iframe {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

[style*="--aspect-ratio"] > img {
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%,-50%);
}

[style*="--aspect-ratio"]::before {
	position: relative;
	padding-bottom: calc(100% / (var(--aspect-ratio,4/3)));
	display: block;
	z-index: 1;
}

.image-wrap[style*="--bg-color"]::before {
	background-color: var(--bg-color,hsla(var(--hsl-txt),.07));
}

.image-wrap.loaded[style*="--bg-color"]::before {
	background-color: transparent;
}

.image-body.overlay-black-0-5::before	{ background-color: hsla(0,0%,0%,.5); }

.inline-block-box > * {
	display: inline-block;
}

.line-height-1		{ line-height: calc(1 / 1.6 * var(--line-height, 1.6)); }
.line-height-1-2	{ line-height: calc(1.2 / 1.6 * var(--line-height, 1.6)); }
.line-height-1-4	{ line-height: calc(1.4 / 1.6 * var(--line-height, 1.6)); }
.line-height-1-5	{ line-height: calc(1.5 / 1.6 * var(--line-height, 1.6)); }
.line-height-2		{ line-height: calc(2 / 1.6 * var(--line-height, 1.6)); }

.opacity-0-25	{ opacity: .25; }
.opacity-0-4	{ opacity: .4; }
.opacity-0-5	{ opacity: .5; }
.opacity-0-6	{ opacity: .6; }
.opacity-0-8	{ opacity: .8; }

.shadow-border {
	box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.17);
}

.border-by-pseudo-class {
	position: relative;
}

.border-by-pseudo-class::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-width: 1px;
	border-color: hsla(0,0%,0%,.17);
}

p, ol, ul,
.has-text-align-left,
.text-align-left		{ text-align: left; }
.badge,
.button,
.wp-block-image,
.has-text-align-center,
.text-align-center	{ text-align: center; }
.text-align-just		{ text-align: justify; }
.has-text-align-right,
.text-align-right		{ text-align: right; }

.vertical-rl {
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.upper-case	{ text-transform: uppercase; }
.delline		{ text-decoration-line: line-through; }
.underline	{ text-decoration-line: underline; }

/*
|-------------------------------------------------------------------------------
|   layout
|-------------------------------------------------------------------------------
*/

.inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: calc(1rem / var(--font-size-html) * var(--max-width-content));
}

/*
|-------------------------------------------------------------------------------
|   header
|-------------------------------------------------------------------------------
*/

ul.menu[class*="columns-"] > .placeholder {
	flex: auto;
}

ul.menu.columns-3 > .placeholder:nth-of-type(1) {
	order: 10;
}

ul.menu.columns-3 > li.menu-item.align-center {
	order: 20;
}

ul.menu.columns-3 > .placeholder:nth-of-type(2) {
	order: 30;
}

ul.menu.columns-3 > li.menu-item.align-right {
	order: 40;
}

/*
|-------------------------------------------------------------------------------
|   new-feature-dialog
|-------------------------------------------------------------------------------
*/
#new-feature-dialog {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: Arial, sans-serif;
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 20px;
	z-index: 1000;
}
#new-feature-dialog button {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
}
#new-feature-dialog button:hover {
    background-color: #005f8d;
}