@charset "UTF-8";
/*
Theme Name: Machaqa
Theme URI: https://www.seowptemplate.com/
Author: Algorism Inc. and ETNET Co., Ltd.
Author URI: https://www.algorism.co.jp/
Description: .
Requires at least: 5.3
Tested up to: 6.3.2
Requires PHP: 7.0
Version: 0.7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: machaqa
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Machaqa is distributed under the terms of the GNU GPL.
*/
/* This CSS was designed and built by Algorism Inc.
 * You are not allowed to delete comment lines here. */

/* to critical-css.php */
/* general - header - main-menu - breadcrumb - swiper - page info card - hamburger-menu - headerbar - footerbar - archive top style - archive top style / related-posts for legacy - nav-links */

/* contents (1) (without box design, more-button, icon, heading) */
.internal-card-x {
	display: flex;
	flex-direction: column-reverse;
	margin: 2rem 0 4rem; }
.internal-card-x .internal-boxes {
	display: flex;
	flex-direction: column; }
:is(.internal-card-x, .internal-card-y) .image-box img {
	box-shadow: var(--material-box-second); }
:is(.internal-card-x, .internal-card-y) :is(h2, h2 a) {
	margin: 0;
	font-size: var(--size-h2sprwd); }
:is(.internal-card-x, .internal-card-y) p {
	font-size: var(--size-p); }
#contents .heading h3 {
	min-width: 100%;
	font-size: var(--size-h3sprwd);
	text-align: center;
	margin: 0;
	padding: 0;
	color: var(--button-text);
	background: var(--button-bg); }
.distance-header { letter-spacing: -0.1rem; }
.distance-header-more { letter-spacing: -0.2rem; }
.before-space {
	margin-top: 2rem; }
.after-space {
	margin-bottom: 5rem; }
#contents .circle.aspect1-1 img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999.9rem; }
#contents .square.aspect4-3 img {
	aspect-ratio: 4 / 3;
	width: 30rem;
	height: 30rem;
	object-fit: cover; }
#contents :is(.square, .rectangle) {
	border-radius: 0; }
.internal-card-x .text-box {
	padding: 1rem 0 0 2vw; }
.text-box a, h2 a, .contents a,
a { text-decoration: none;
	color: var(--contents-link); }
.flex-mass-related a:not(.inline-compel),
.contents :not([class*="wsp-"], .nav-links) :not(ul, ol, li) a:not(.inline-compel, .page-numbers) {
	display: block;
	width: auto;
	height: auto; }
.contents a.inline-compel {
	display: inline-block; }
.author-post li a {
	display: inherit; }
/* contents (2) (box design without more-button, icon, heading) */
.contents .outer-box {
	width: 100%;
	padding: 1.2rem;
	background: var(--box-outer-bg);}
.contents .outer-box .inner-box {
	background: var(--box-inner-bg);}
.inner-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: var(--material-box-inner); 	
	/*box-shadow: var(--material-box);*/ 	
	margin: 0;
	padding: 1.5rem; }
.inner-box .image-box {
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1rem;
	order: 1; }
.inner-box .writing-box {
	gap: 1rem;
	order: 2; }
.inner-box .image-box span { display: inline-block; }
.inner-box .image-box span[class*="material-"] {
	color: var(--box-inner-text);
	font-size: var(--size-content-gmi); }
.radius-rim.inner-box,
.radius-rim .inner-box { border-radius: 1.5rem; }
#contents section.average-text .inner-box .text-box h2 {
	text-align: center;
	font-size: var(--size-h2dtrwd); }
#contents section.average-text .inner-box .text-box h3 {
	text-align: center;
	font-size: var(--size-h3sprwd); }
#contents section.average-text .inner-box .text-box h4 {
	text-align: center;
	font-size: var(--size-h6); }
#contents .heading.bottom .outer-box,
#contents .boxes-suspend.heading.bottom .outer-box {
	display: flex;
	flex-direction: column-reverse; }
#contents .heading :is(.boxes-suspend, .boxes-extend),
#contents :is(.boxes-suspend, .boxes-extend).heading {
	display: flex;
	flex-direction: column; }
.flex-pack .general :is(.boxes-suspend, .boxes-extend),
.general .flex-pack :is(.boxes-suspend, .boxes-extend) {
	display: flex;
	flex-direction: column; }
.boxes-extend .outer-box {
	order: 2; }
#contents .heading .boxes-suspend.upper,
#contents .heading.upper .boxes-suspend,
#contents .boxes-suspend.heading.upper {
	align-items: center;
	justify-content: center; }
#contents .heading:is(.upper, .lower) h3 {
	width: 100%;
	text-align: center;
    font-size: var(--size-h3sprwd);
	margin: 0;
	padding: 1.0rem 1.0rem; }
#contents .radius-rim.heading:is(.upper, .lower) h3,
#contents .radius-rim .heading:is(.upper, .lower) h3 {
	padding: 1.0rem 2.0rem;
	border-radius: 999.9rem; }
#contents .heading:is(.bottom, .top, .lower, .upper) .outer-box {
	width: 100%;
	background: var(--button-bg);
	box-shadow: var(--material-box); }
#contents .heading .radius-rim .outer-box,
#contents .radius-rim.heading .outer-box,
#contents .radius-rim .heading .outer-box {
	background: var(--button-bg);
	border-radius: 2.5rem; }
#contents .heading:is(.bottom, .top, .lower, .upper) .inner-box {
	width: 100%;
	background: var(--color-white);
	box-shadow: var(--material-box-inset-zero); }
#contents .heading.top .radius-rim .inner-box,
#contents .radius-rim.heading.top .inner-box,
#contents .radius-rim .heading.top .inner-box { border-radius: 0 0 1.5rem 1.5rem; }
#contents .heading.bottom .radius-rim .inner-box,
#contents .radius-rim.heading.bottom .inner-box,
#contents .radius-rim .heading.bottom .inner-box { border-radius: 1.5rem 1.5rem 0 0; }
#contents .heading.radius-rim .upper .inner-box,
#contents .radius-rim.heading.upper .inner-box,
#contents .radius-rim .heading.upper .inner-box { border-radius: 1.5rem; }
#contents .heading.radius-rim .lower .inner-box,
#contents .radius-rim.heading.lower .inner-box,
#contents .radius-rim .heading.lower .inner-box { border-radius: 1.5rem; }
#contents .radius-rim .heading.bottom .outer-box { z-index: 1; }
#contents .heading .image-box {
	margin: 0.1rem 0.1rem 0.3rem;
	padding:0; }
#contents .heading .outer-box { padding: 1.0rem; }
#contents .heading.lower .boxes-suspend,
#contents .boxes-suspend.heading.lower {
	display: flex;
	flex-direction: column-reverse;
	align-items: center; }
#contents .general .boxes-suspend.heading:is(.upper, .lower) .heading-box {
	min-width: 76%;
	padding: 0.0rem 0 0.0rem; }
#contents .general .boxes-suspend.radius-rim .heading-box {
	text-shadow: none;
	box-shadow: none;
	filter: none;
	z-index: 2; }
#contents .general .boxes-suspend.radius-rim .heading-box h3 {
	text-shadow: none;
	box-shadow: none;
	filter: none;
	border-radius: 999.9rem;
	z-index: 2; }
#contents .general .boxes-suspend.upper .heading-box,
#contents .general .boxes-suspend.radius-rim.upper .heading-box { margin-bottom: -1.0rem; }
#contents .general .boxes-suspend.lower .heading-box,
#contents .general .boxes-suspend.radius-rim.lower .heading-box { margin-top: -1.0rem; }
#contents .general .heading h3 { margin: 0; }
#contents .general .image-box { z-index: 2; }
#contents .general .heading .outer-box { box-shadow: none; }
#contents .boxes-extend.heading.top .heading-box,
#contents .general .boxes-extend.heading.top .heading-box h3{ padding: 0.2rem 0 0.7rem; }
#contents .boxes-extend.heading.bottom .heading-box,
#contents .general .boxes-extend.heading.bottom .heading-box h3{ padding: 0.7rem 0 0.2rem; }
#contents .general .boxes-suspend.heading.upper .heading-box h3 { padding: 1.4rem 0 1.5rem; }
#contents .general .boxes-suspend.heading.lower .heading-box h3 { padding: 1.5rem 0 1.4rem; }
.contents .outer-box .text-box { color: var(--box-inner-text); }
.inner-box .text-box { order: 2; }
#contents .flex-pack .heading .outer-box .text-box { margin: 0.5rem auto; }
#contents .heading .text-box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 8rem;
	min-width: 70%;
	margin-bottom: -0.6rem;
	z-index: 2; }
#contents .heading:is(.upper, .lower) .inner-box .text-box { margin-top: 0; }
#contents .radius-rim.heading:is(.upper, .lower) .text-box,
#contents .radius-rim .heading:is(.upper, .lower) .text-box {
	min-width: 75%;
	border-radius: 999.9rem;	}
#contents .general .text-box {
	height: auto;
	margin: 0;
	padding: 0;
	z-index: 0 !important; }
#contents .general .text-box p { margin-left: 0; }
#contents .heading .top .text-box,
#contents .heading.top .text-box { padding: 0 0 0.8rem; }
#contents .heading .bottom .text-box,
#contents .heading.bottom .text-box { padding: 0.8rem 0 0; }
#contents .heading.upper .text-box {
	margin-top: 0.0rem;
	margin-bottom: -1.3rem; }
#contents .heading.lower .text-box {
	margin-bottom: 0.0rem;
	margin-top: -1.3rem; }
#contents .general .heading.upper .text-box { margin-bottom: 0.0rem; }
#contents .general .heading.lower .text-box { margin-top: 0.0rem; }
/* contents (3) (box decoration & heading without more-button, icon) */
.surf-x .outer-box { padding: 1.2rem 0.4rem;	}
:is(.drip-x, .wave-x) .outer-box { padding: 1.2rem 0.8rem;	}
:is(.drip-x, .wave-x, .surf-x, .zigzag-l-x) .inner-box { padding: 1.5rem 2.0rem; }
:is(.wave-bottom, .wave-y, .wave-xy, .wave-top, .arc-top) .inner-box { padding-bottom: 2.5rem; }
:is(.surf-y, .surf-xy, .surf-bottom, .zigzag-bottom, .zigzag-xy, .zigzag-y, .zigzag-l-bottom, .zigzag-l-xy, .zigzag-l-y, .zigzag-m-bottom, .zigzag-m-xy, .zigzag-m-y, .zigzag-s-bottom, .zigzag-s-xy, .zigzag-s-y, .zigzag-ss-bottom, .zigzag-ss-xy, .zigzag-ss-y, .arc-bottom, .arc-top-bottom, .wave-xy) .inner-box {
	padding-bottom: 3.0rem; }
:is(.drip-y, .drip-xy, .drip-bottom) .inner-box { padding-bottom: 3.5rem; }
.surf-y .inner-box {
	--mask: radial-gradient(1.0rem at 50% 1.0rem,#0000 97%,#000) 50% -1.0rem/ 1.85rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.surf-x .inner-box {
	--mask: radial-gradient(1.0rem at 1.0rem 50%,#0000 97%,#000) -1.0rem/ 100% 1.85rem;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.surf-xy .inner-box {
	--mask: 
		linear-gradient(#000 0 0) 50%/calc(100% - 1.6rem) calc(100% - 1.6rem) no-repeat,
		radial-gradient(0.8rem,#0000 98%,#000) 0 -0.8rem/1.48rem 1.6rem round no-repeat,
		radial-gradient(0.8rem,#0000 98%,#000) 0 calc(100% + 0.8rem)/1.48rem 1.6rem round no-repeat,
		radial-gradient(0.8rem,#0000 98%,#000) -0.8rem 0/1.6rem 1.48rem no-repeat round,
		radial-gradient(0.8rem,#0000 98%,#000) calc(100% + 0.8rem) 0/1.6rem 1.48rem no-repeat round;
		clip-path: polygon(1.6rem 0,calc(100% - 1.6rem) 0,100% 1.6rem,100% calc(100% - 1.6rem),calc(100% - 1.6rem) 100%,1.6rem 100%,0 calc(100% - 1.6rem),0 1.6rem);
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.surf-top .inner-box {
	--mask: radial-gradient(1.0rem at top,#0000 97%,#000) 50% / 1.85rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.surf-bottom .inner-box {
	--mask: radial-gradient(1.0rem at bottom,#0000 97%,#000) 50% / 1.85rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.wave-y .inner-box {
	--mask: 
		linear-gradient(0deg,#0000 1.6rem,#000 0) 0 0.8rem,
		radial-gradient(0.8rem,#000 98%,#0000) 50%/1.48rem 1.6rem repeat space;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.wave-x .inner-box {
	--mask: 
		linear-gradient(-90deg,#0000 1.6rem,#000 0) 0.8rem,
		radial-gradient(0.8rem,#000 98%,#0000) 50%/1.6rem 1.48rem space repeat;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.wave-xy .inner-box {
	--mask: 
		linear-gradient(#000 0 0) 50%/calc(100% - 1.48rem) calc(100% - 1.48rem) no-repeat,
		radial-gradient(farthest-side,#000 98%,#0000) 0 0/1.6rem 1.6rem round;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.wave-top .inner-box {
	--mask: 
		linear-gradient(to bottom,#0000 0.8rem,#000 0),
		radial-gradient(0.8rem,#000 98%,#0000) top/1.48rem 1.6rem;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.wave-bottom .inner-box {
	--mask: 
		linear-gradient(to top,#0000 0.8rem,#000 0),
		radial-gradient(0.8rem,#000 98%,#0000) bottom/1.48rem 1.6rem;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.drip-y .inner-box {
	--mask: 
		radial-gradient(0.7rem at 25% 0   ,#0000 98%,#000) 50% 0.7rem/2.8rem 51% repeat-x,
		radial-gradient(0.7rem at 75% 50% ,#000 99%,#0000 101%) top/2.8rem 1.4rem repeat-x,
		radial-gradient(0.7rem at 75% 100%,#0000 98%,#000) 50% calc(100% - 0.7rem)/2.8rem 51% repeat-x,
		radial-gradient(0.7rem at 25% 50% ,#000 99%,#0000 101%) bottom/2.8rem 1.4rem repeat-x;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.drip-x .inner-box {
	--mask: 
		radial-gradient(0.7rem at 0    75%,#0000 98%,#000) 0.7rem 50%/51% 2.8rem repeat-y,
		radial-gradient(0.7rem at 50%  25%,#000 99%,#0000 101%) left/1.4rem 2.8rem repeat-y,
		radial-gradient(0.7rem at 100% 25%,#0000 98%,#000) calc(100% - 0.7rem) 50%/51% 2.8rem repeat-y,
		radial-gradient(0.7rem at 50%  75%,#000 99%,#0000 101%) right/1.4rem 2.8rem repeat-y;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.drip-top .inner-box {
	--mask: 
		radial-gradient(0.7rem at 25% 0,#0000 98%,#000) 50% 0.7rem/2.8rem 100% repeat-x,
		radial-gradient(0.7rem at 75% 50%,#000 99%,#0000 101%) top/2.8rem 1.4rem repeat-x;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.drip-bottom .inner-box {
	--mask: 
		radial-gradient(0.7rem at 75% 100%,#0000 98%,#000) 50% calc(100% - 0.7rem)/2.8rem 100% repeat-x,
		radial-gradient(0.7rem at 25% 50%,#000 99%,#0000 101%) bottom/2.8rem 1.4rem repeat-x;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-y .inner-box {
	--mask: 
		conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/2.80rem 51% repeat-x,
		conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/2.80rem 51% repeat-x;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-x .inner-box {
	--mask: 
		conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg) left/51% 2.80rem repeat-y,
		conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) right/51% 2.80rem repeat-y;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-xy .inner-box {
	--mask: 
		linear-gradient(#000 0 0) center/calc(100% - 2.8rem) calc(100% - 2.8rem) no-repeat,
		conic-gradient(from  135deg at top   ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /2.8rem 1.4rem space no-repeat,
		conic-gradient(from  -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/2.8rem 1.4rem space no-repeat,
		conic-gradient(from   45deg at left  ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /1.4rem 2.8rem no-repeat space,
		conic-gradient(from -135deg at right ,#0000,#000 1deg 89deg,#0000 90deg) 100% 0/1.4rem 2.8rem no-repeat space;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-top .inner-box {
	--mask: conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/2.00rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-bottom .inner-box {
	--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/2.00rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-ss-y .inner-box {
	--mask: 
		conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/1.40rem 51% repeat-x,
		conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/1.40rem 51% repeat-x;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-ss-x .inner-box {
	--mask: 
		conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg) left/51% 1.40rem repeat-y,
		conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) right/51% 1.40rem repeat-y;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-ss-xy .inner-box {
	--mask: 
		linear-gradient(#000 0 0) center/calc(100% - 1.4rem) calc(100% - 1.4rem) no-repeat,
		conic-gradient(from  135deg at top   ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /1.4rem 0.7rem space no-repeat,
		conic-gradient(from  -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/1.4rem 0.7rem space no-repeat,
		conic-gradient(from   45deg at left  ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /0.7rem 1.4rem no-repeat space,
		conic-gradient(from -135deg at right ,#0000,#000 1deg 89deg,#0000 90deg) 100% 0/0.7rem 1.4rem no-repeat space;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-ss-top .inner-box {
	--mask: conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/1.40rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-ss-bottom .inner-box {
	--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/1.40rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-s-y .inner-box {
	--mask: 
		conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/2.00rem 51% repeat-x,
		conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/2.00rem 51% repeat-x;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-s-x .inner-box {
	--mask: 
		conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg) left/51% 2.00rem repeat-y,
		conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) right/51% 2.00rem repeat-y;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-s-xy .inner-box {
	--mask: 
		linear-gradient(#000 0 0) center/calc(100% - 2rem) calc(100% - 2rem) no-repeat,
		conic-gradient(from  135deg at top   ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /2rem 1rem space no-repeat,
		conic-gradient(from  -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/2rem 1rem space no-repeat,
		conic-gradient(from   45deg at left  ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /1rem 2rem no-repeat space,
		conic-gradient(from -135deg at right ,#0000,#000 1deg 89deg,#0000 90deg) 100% 0/1rem 2rem no-repeat space;
	-webkit-mask: var(--mask);
			mask: var(--mask);
	border-radius: 0;
	box-shadow: none;
	padding: 2.0rem; }
.zigzag-s-top .inner-box {
	--mask: conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/2.00rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-s-bottom .inner-box {
	--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/2.00rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-m-y .inner-box {
	--mask: 
		conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/2.80rem 51% repeat-x,
		conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/2.80rem 51% repeat-x;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-m-x .inner-box {
	--mask: 
		conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg) left/51% 2.80rem repeat-y,
		conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) right/51% 2.80rem repeat-y;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-m-xy .inner-box {
	--mask: 
		linear-gradient(#000 0 0) center/calc(100% - 2.8rem) calc(100% - 2.8rem) no-repeat,
		conic-gradient(from  135deg at top   ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /2.8rem 1.4rem space no-repeat,
		conic-gradient(from  -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/2.8rem 1.4rem space no-repeat,
		conic-gradient(from   45deg at left  ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /1.4rem 2.8rem no-repeat space,
		conic-gradient(from -135deg at right ,#0000,#000 1deg 89deg,#0000 90deg) 100% 0/1.4rem 2.8rem no-repeat space;
	-webkit-mask: var(--mask);
			mask: var(--mask);
	border-radius: 0;
	box-shadow: none;
	padding: 2.4rem; }
.zigzag-m-top .inner-box {
	--mask: conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/2.80rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-m-bottom .inner-box {
	--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/2.80rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-l-y .inner-box {
	--mask: 
		conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/3.60rem 51% repeat-x,
		conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/3.60rem 51% repeat-x;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-l-x .inner-box {
	--mask: 
		conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg) left/51% 3.60rem repeat-y,
		conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) right/51% 3.60rem repeat-y;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-l-xy .inner-box {
	--mask: 
		linear-gradient(#000 0 0) center/calc(100% - 3.6rem) calc(100% - 3.6rem) no-repeat,
		conic-gradient(from  135deg at top   ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /3.6rem 1.8rem space no-repeat,
		conic-gradient(from  -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/3.6rem 1.8rem space no-repeat,
		conic-gradient(from   45deg at left  ,#0000,#000 1deg 89deg,#0000 90deg) 0 0   /1.8rem 3.6rem no-repeat space,
		conic-gradient(from -135deg at right ,#0000,#000 1deg 89deg,#0000 90deg) 100% 0/1.8rem 3.6rem no-repeat space;
	-webkit-mask: var(--mask);
			mask: var(--mask);
	border-radius: 0;
	box-shadow: none;
	padding: 2.8rem; }
.zigzag-l-top .inner-box {
	--mask: conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/3.60rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.zigzag-l-bottom .inner-box {
	--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/3.60rem 100%;
	-webkit-mask: var(--mask);
			mask: var(--mask); }
.arc-top .outer-box {
	border-radius: 100% 100% 0 0 / 25% 25% 0 0;	}
.arc-top .inner-box {
	border-radius: 100% 100% 0 0 / 23% 23% 0 0;	}
.arc-top .text-box {
	border-radius: 100% 100% 0 0 / 20% 20% 0 0;	}
.arc-bottom .outer-box {
	border-radius: 0 0 100% 100% / 0 0 25% 25%;	}
.arc-bottom .inner-box {
	padding-bottom: 3rem;
	border-radius: 0 0 100% 100% / 0 0 23% 23%;	}
.arc-bottom .text-box {
	border-radius: 0 0 100% 100% / 0 0 20% 20%;	}
.arc-top-bottom .outer-box {
	border-radius: 100% 100% 100% 100% / 25% 25% 25% 25%; }
.arc-top-bottom .inner-box {
	padding-bottom: 3rem;
	border-radius: 100% 100% 100% 100% / 23% 23% 23% 23%; }
.arc-top-bottom .text-box {
	border-radius: 100% 100% 100% 100% / 20% 20% 20% 20%; }
.simple-heading {
	--simple-heading-size: 20rem;
	width: var(--simple-heading-size);
	height: var(--simple-heading-size);
	border-radius: calc(var(--simple-heading-size) / 2);
	margin: 2rem auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--material-box-inset-first);
	color: var(--button-text);
	background-color: var(--button-bg); }
.simple-heading h2 {
	transform: rotate(-15deg);
	font-size: var(--size-h2dtrwd); }
.conic-heading {
	--conic-heading-size: 20rem;
	width: var(--conic-heading-size);
	height: var(--conic-heading-size);
	border-radius: calc(var(--conic-heading-size) / 2);
	margin: 2rem auto;
	padding: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--button-bg);
	background-color: var(--box-outer-bg);
	transform: rotate(15deg); }
.conic-heading h2 {
	transform: rotate(-25deg);
	font-size: var(--size-h2dtrwd); }
.conic-heading {
	border-radius: 999.9rem;
	text-shadow: var(--material-text);
	box-shadow: var(--material-box-inset-second);
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
		conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--header-bg) 60% 75%, var(--button-bg) 75% 100%); }
.conic-heading:is(.colorful, .g4) { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg,
		rgba(66, 133, 244, 1.0) 0% 30%,	rgba(52, 168, 83, 1.0) 30% 60%,	rgba(251, 188, 5, 1.0) 60% 75%,	rgba(234, 67, 53, 1.0) 75% 100%); }
.conic-heading.accent { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-accent) 75% 100%); }
.conic-heading.gold { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-gold) 75% 100%); }

.conic-heading.red { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-red) 75% 100%); }
.conic-heading.blue { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-blue) 75% 100%); }
.conic-heading.green { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-green) 75% 100%); }
.conic-heading.yellow { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-yellow) 75% 100%); }
.conic-heading.cyan { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-cyan) 75% 100%); }
.conic-heading.magenta { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-magenta) 75% 100%); }
.conic-heading.gray { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-gray) 75% 100%); }
.conic-heading.violet { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-violet) 75% 100%); }
.conic-heading.black { background-image:
	radial-gradient(rgba(255, 255, 255, 0.8) 0% 50%, transparent 55% 100%),
	conic-gradient(from 15deg, var(--box-outer-bg) 0% 30%, var(--sidebar-header-bg) 30% 60%, var(--button-bg) 60% 75%, var(--color-black) 75% 100%); }
.heapup-heading {
	width: 100%;
	margin: 5.0rem auto 4.0rem;
	padding: 0.2rem;
	--heapup-heading-size: 32rem;
	height: 10rem;
	border-radius: 3.0rem;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	color: var(--color-accent);
	background-color: var(--box-outer-bg);
	transform: rotate(0deg); }
.heapup-heading h2 {
	margin: 0;
    padding: 0;
	font-size: var(--size-h2dtrwd);	
	text-shadow: var(--material-text-second);
	transform: rotate(-8deg); }
.heapup-heading h2.horizontal,
.heapup-heading.horizontal h2 {
	transform: rotate(0deg); }
.heapup-heading {
	box-shadow: var(--material-box-inset-heap);
	background-image:
		radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
		repeating-conic-gradient(from -100deg at 60% 70%, var(--color-accent) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading:is(.colorful, .g4) { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, 
		rgba(234, 67, 53, 1.0) 0deg 45deg, rgba(66, 133, 244, 1.0) 55deg 80deg,	rgba(52, 168, 83, 1.0) 90deg 120deg, rgba(251, 188, 5, 1.0) 130deg 170deg) }
.heapup-heading.accent { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-accent) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.gold { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-gold) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.red { 	background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-red) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.blue { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-blue) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.green { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),

	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-green) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.yellow { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-yellow) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.cyan { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-cyan) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.magenta { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-magenta) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.gray { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-gray) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.violet { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-violet) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.black { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from -100deg at 60% 70%, var(--color-black) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-accent) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading:is(.colorful, .g4).shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%,
		rgba(234, 67, 53, 1.0) 0deg 45deg, rgba(66, 133, 244, 1.0) 55deg 80deg, rgba(52, 168, 83, 1.0) 90deg 120deg, rgba(251, 188, 5, 1.0) 130deg 170deg); }
.heapup-heading.accent.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-accent) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.gold.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-gold) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.red.shift { 	background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-red) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.green.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-green) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.blue.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-blue) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.yellow.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-yellow) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.magenta.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-magenta) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.cyan.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-cyan) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.gray.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-gray) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.violet.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-violet) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.heapup-heading.black.shift { background-image:
	radial-gradient(rgba(237, 237, 237, 0.8) 0% 50%, transparent 60% 100%),
	repeating-conic-gradient(from 75deg at 40% 70%, var(--color-black) 0deg 45deg, var(--box-outer-bg) 55deg 80deg, var(--box-inner-bg) 90deg 120deg, var(--button-bg) 130deg 170deg); }
.gradation-heading {
	width: 100%;
	height: 10rem;
	margin: 5.0rem auto 4.0rem;
	padding: 1.6rem 0 1.4rem;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	border-radius: 3.0rem; }
.gradation-heading h2 {
	margin: 0;
	font-size: var(--size-h2dtrwd);	
	color: var(--box-inner-bg);
	text-shadow: var(--material-text-second); }
.gradation-heading {
	box-shadow: var(--material-box-inset-forth);
	background:	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-accent) 80%, var(--box-outer-bg) 100%); }
.gradation-heading:is(.colorful, .g4) { background:
	linear-gradient(-45deg,
		rgba(234, 67, 53, 1.0) 15%,	rgba(66, 133, 244, 1.0) 50%, rgba(52, 168, 83, 1.0) 80%, rgba(251, 188, 5, 1.0) 100%); }
.gradation-heading.accent { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-accent) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.gold { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-gold) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.red { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-red) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.blue { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-blue) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.green { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-green) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.yellow { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-yellow) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.cyan { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-cyan) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.magenta { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-magenta) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.gray { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-gray) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.black { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-black) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.violet { background:
	linear-gradient(-45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-violet) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.mirror { background:
	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-accent) 80%, var(--box-outer-bg) 100%);
	box-shadow: var(--material-box-inset-forth); }
.gradation-heading:is(.colorful, .g4).mirror { background:
	linear-gradient(45deg,
		rgba(234, 67, 53, 1.0) 15%,	rgba(66, 133, 244, 1.0) 50%, rgba(52, 168, 83, 1.0) 80%, rgba(251, 188, 5, 1.0) 100%); }
.gradation-heading.accent.mirror {
	background:	linear-gradient(45deg,var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-green) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.gold.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-gold) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.red.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-red) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.blue.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-blue) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.green.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-green) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.yellow.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-yellow) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.cyan.mirror {
	background:	linear-gradient(45deg,var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-cyan) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.magenta.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-magenta) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.gray.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-gray) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.violet.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-violet) 80%, var(--box-outer-bg) 100%); }
.gradation-heading.black.mirror {
	background:	linear-gradient(45deg, var(--box-inner-bg) 10%, var(--button-bg) 45%, var(--color-black) 80%, var(--box-outer-bg) 100%); }
.mesh-heading {
	width: 100%;
	margin: 5.0rem auto 4.0rem;
	padding: 2.0rem 0;
	--mesh-heading-size: 32rem;
	height: 10rem;
	border-radius: 3rem;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	box-shadow: var(--material-box-inset-second); }
.mesh-heading h2 {
	margin: 1.0rem;
	font-size: var(--size-h2dtrwd);
	color: var(--color-wax);
	text-shadow: var(--material-text-third); }
.mesh-heading.default,
.mesh-heading {
	background-image:
		radial-gradient(at 0 0, rgba(0, 121, 255, 1) 0, transparent 50%),
		radial-gradient(at 100% 100%, rgba(255, 0, 0, 1), transparent 40%),
		radial-gradient(at 70% 30%, rgba(0, 223, 162, 1) 0, transparent 40%),
		radial-gradient(at 50% 100%, rgba(246, 250, 112, 1) 0, transparent 100%); }
.mesh-heading.yellow {
	background-color: rgba(187, 255, 255, 1);
	background-image:
		radial-gradient(at 0% 0%, rgba(0, 255, 255, 1) 30%, transparent 50%),
		radial-gradient(at 100% 10%, rgba(96, 201, 142, 1) 0, transparent 60%),
		radial-gradient(at 60% 100%, rgba(255, 255, 0, 1) 30%, transparent 50%); }
.mesh-heading.blue {
	background-image:
		radial-gradient(at 80% -20%, rgba(255, 255, 255, 1) 10%, transparent 40%),
		radial-gradient(at 0% 70%, rgba(255, 255, 255, 1), transparent 50%),
		radial-gradient(at 0% 0%, rgba(0, 255, 255, 1), transparent),
		radial-gradient(at 80% 40%, rgba(255, 255, 153, 1), transparent 40%),
		radial-gradient(at 100% 100%, rgba(103, 94, 227, 1), transparent);}
.mesh-heading.orange {
	background-image:
		radial-gradient(at 0 0, rgba(255, 255, 153, 1) 20%, transparent 70%),
		radial-gradient(at 110% 20%, rgba(255, 136, 0, 1) 20%, transparent 40%),
		radial-gradient(at 20% 40%, rgba(255, 0, 136, 1) 10%, transparent 60%),
		radial-gradient(at 80% 60%, rgba(189, 41, 208, 1), transparent);}
.mesh-heading.white {
	background-image:
		radial-gradient(at 50% 40%, rgba(255, 255, 255, 1), transparent 80%),
		radial-gradient(at 50% -50%, rgba(0, 221, 255, 1), transparent 80%),
		radial-gradient(at 100% 0, rgba(189, 41, 208, 1) 0, transparent 30%),
		radial-gradient(at 100% 100%, rgba(255, 170, 170, 1), transparent),
		radial-gradient(at 0 100%, rgba(255, 255, 0, 1), transparent);}
.mesh-heading.illusion {
	background-image:
		radial-gradient(at 0% 10%, rgba(255, 0, 255, 1), transparent 60%),
		radial-gradient(at 0% 90%, rgba(0, 255, 255, 1), transparent 60%),
		radial-gradient(at 100% 10%, rgba(255, 255, 0, 1), transparent 60%),
		radial-gradient(at 100% 90%, rgba(255, 0, 0, 1), transparent 60%); }
.mesh-heading.g4 {
	background-image:
		radial-gradient(at 0% 0%, rgba(66, 133, 244, 1.0), transparent 50%),
		radial-gradient(at 100% 0%, rgba(52, 168, 83, 1.0), transparent 50%),
		radial-gradient(at 100% 100%, rgba(251, 188, 5, 1.0), transparent 50%),
		radial-gradient(at 0% 100%, rgba(234, 67, 53, 1.0), transparent 50%); }
.mesh-heading.gaudy {
	background-image:
		radial-gradient(at 90% 20%, rgba(255, 0, 0, 1), transparent 40%),
		radial-gradient(at 0% 100%, rgba(0, 255, 0, 1) 0, transparent 50%),
		radial-gradient(at 0 0, rgba(0, 0, 255, 1) 0, transparent 50%),
		radial-gradient(at 100% 100%, rgba(255, 255, 0, 1) 0, transparent 80%); }
:is(.simple-heading, .heapup-heading, .mesh-heading).radius {
	border-radius: 6rem; }
.conic-heading.radius {
	border-radius: 6rem;
	transform: none; }
.simple-heading.rectangle {
	width: 100%;
	border-radius: 0; }
.simple-heading.radius.rectangle {
	width: 100%;
	border-radius: 6rem !important; }
:is(.conic-heading, .gradation-heading, .heapup-heading, .mesh-heading).rectangle {
	width: 100%;
	transform: none;
	border-radius: 0; }
.gradation-heading:not(.square, .rectangle).circle {
	--gradation-heading-size: 20rem;
	width: var(--gradation-heading-size);
	height: var(--gradation-heading-size);
	border-radius: 999.9rem; }
.gradation-heading.circle h2 {
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap; }
.heapup-heading:not(.square, .rectangle).circle {
	border-radius: 999.9rem; }
.mesh-heading:not(.square, .rectangle).circle {
	--mesh-heading-size: 20rem;
	width: var(--mesh-heading-size);
	height: var(--mesh-heading-size);
	border-radius: 999.9rem; }
:is(.heapup-heading, .gradation-heading, .simple-heading).square {
	border-radius: 0; }
.conic-heading.square {
	border-radius: 0;
	transform: none; }
.gradation-heading.square h2 {
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap; }
.mesh-heading.square {
	--mesh-heading-size: 20rem;
	width: var(--mesh-heading-size);
	height: var(--mesh-heading-size);
	border-radius: 0; }
.mesh-heading.square h2 {
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap; }
.simple-heading.half-circle-side {
	width: 100%;
	border-radius: 999.9rem; }
:is(.conic-heading, .heapup-heading).half-circle-side {
	width: 100% !important;
	transform: none;
	border-radius: 999.9rem; }
:is(.gradation-heading, .mesh-heading).half-circle-side {
	border-radius: 999.9rem; }
.conic-heading.radius.rectangle {
	width: 100%;
	transform: none;
	border-radius: 6rem !important; }
.heapup-heading.square.rectangle {
	width: 100%;
	border-radius: 0; }
#contents .boxes-suspend .inner-box .heapup-heading.warp,
#contents .warp img,
#contents :is(.conic-heading, .simple-heading, .gradation-heading, .heapup-heading, .mesh-heading, .camouflage-heading).warp {
	transform: none;
	border-radius: 29.0vw 4.4vw 29.0vw 4.0vw / 4.0vw 29.6vw 4.2vw 30.0vw;
	/*border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
	/*border-radius: 35% 45% 40% 30% / 35% 40% 35% 50%;*/
}
.no-top-space .boxes-suspend .inner-box,
.boxes-suspend.no-top-space .inner-box {
	padding-top: 0; }
.grid-xxx .gradation-heading {
    max-width: calc(100% - 2vw);
	margin: 0 auto; }
:is(.grid-xxx, .flex-yxx) :is(.heapup-heading, .gradation-heading, .mesh-heading) {
    max-width: calc(100% - 2vw);
    margin: 0 auto; }
.boxes-suspend .gradation-heading:is(.warp, .circle, .square, .rectangle, .half-circle-side ),
.boxes-suspend .gradation-heading {
	margin: 2rem auto;
	height: 20rem !important; }
.boxes-suspend .mesh-heading:is(.warp, .circle, .square, .rectangle, .half-circle-side ),
.boxes-suspend .mesh-heading {
	height: 20rem !important;
	margin: 2rem auto;
	padding: 6.0rem 0; }
.boxes-suspend .gradation-heading.square {
	--gradation-heading-size: 20rem;
	width: var(--gradation-heading-size);
	height: var(--gradation-heading-size);
	border-radius: 0; }
.boxes-suspend .mesh-heading.warp.square {
	height: 20rem !important;
	margin: 2rem auto;
	padding: 8.0rem 0; }
.boxes-suspend {
	min-width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative;	}
.boxes-suspend .inner-box {
	--boxes-suspend-inner-box-padding-top: 3.0rem;
	padding-top: var(--boxes-suspend-inner-box-padding-top); }
.boxes-suspend .inner-box .heapup-heading {
	--heapup-heading-size: 20rem;
	height: var(--heapup-heading-size);
	width: var(--heapup-heading-size);
	margin: 2rem auto; }
.boxes-suspend .inner-box .heapup-heading.rectangle {
	min-width: 100%; }
.boxes-suspend .gradation-heading {
	width: 100%; }
.boxes-suspend .gradation-heading h2 {
	transform: rotate(-10deg); }
.boxes-suspend .mesh-heading h2 {
	transform: rotate(-10deg); }
#contents :is(.internal-card-x, .internal-card-y) .image-box:is(.circle, .warp),
#contents :is(.internal-card-x, .internal-card-y) :is(.circle, .warp) .image-box {
	padding-left: 2vw;
	padding-right: 2vw;
	height: auto; }
.flex-pac :not(.boxes-suspend, .boxes-extend) .text-box .heapup-heading {
	--heapup-heading-size: 100%;
	height: calc(var(--heapup-heading-size) / 4);
	width: calc(var(--heapup-heading-size));
	border-radius: 2.0rem; }
.flex-pac :not(.boxes-suspend, .boxes-extend) .text-box .heapup-heading.half-circle-side {
	border-radius: 999.9rem; }
.boxes-suspend :is(.simple-heading, .heapup-heading, .mesh-heading).radius {
	width: 20rem;
	height: 20rem;
	border-radius: 6rem; }
.camouflage-heading {
	height: 10rem;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	border-radius:2.0rem;
	box-shadow: var(--material-box-inset-third);
	background: url(https://www.seo009.com/wp-content/uploads/camouflage-grayscale.png.webp) top left repeat; }
.camouflage-heading.grayscale {
	background: url(https://www.seo009.com/wp-content/uploads/camouflage-grayscale.png.webp) top left repeat; }
.camouflage-heading.red {
	background: url(https://www.seo009.com/wp-content/uploads/camouflage-red.png.webp) top left repeat; }
.camouflage-heading.green {
	background: url(https://www.seo009.com/wp-content/uploads/camouflage-green.png.webp) top left repeat; }
.camouflage-heading.blue {
	background: url(https://www.seo009.com/wp-content/uploads/camouflage-blue.png.webp) top left repeat; }
.camouflage-heading.brown {
	background: url(https://www.seo009.com/wp-content/uploads/camouflage-brown.png.webp) top left repeat; }
.camouflage-heading.magenta {
	background: url(https://www.seo009.com/wp-content/uploads/camouflage-magenta.png.webp) top left repeat; }
.camouflage-heading.violet {
	background: url(https://www.seo009.com/wp-content/uploads/camouflage-violet.png.webp) top left repeat; }
.camouflage-heading h2 {
	margin: 1rem;
	padding: 1rem 2rem;
	border-radius: 2.5rem;
	color: var(--contents-text);
	background-color: rgba(255, 255, 255, 0.666);
	font-size: var(--size-h2dtrwd);	
	text-shadow: var(--material-text-second); }
/* contents (4) (icon without box design, more-button, heading) - contents (5) (flexbox / grid setting) - contents (6) */
/* leftsidebar / rightsidebar */
.colorful .sidebar ul li:before { color: var(--sidebar-link); }
.grid-layout [class*="sidebar"] :is(.boxes-extend, .boxes-suspend)  {
	max-width: 40rem;
	margin: 2.0rem 0;
	padding: 0; }
.grid-layout [class*="sidebar"] .outer-box {
	width: 100%;
	padding: 0.6rem;
	box-shadow: none;
    background: var(--button-bg);
    box-shadow: var(--material-box);
    border-radius: 0.0rem; }
.grid-layout [class*="sidebar"] .radius-rim .outer-box,
.grid-layout [class*="sidebar"] .outer-box.radius-rim {
    border-radius: 2.0rem; }
:is(.leftsidebar, .rightsidebar) .radius-rim .more-button {
	border-radius: 1.2rem; }
.grid-layout [class*="sidebar"] .square .outer-box { border-radius: 0; }
.grid-layout [class*="sidebar"] .inner-box {
	display: flex;
    flex-direction: column; }	
.grid-layout [class*="sidebar"] .inner-box .text-box {
	order: 2; }
.grid-layout [class*="sidebar"] .inner-box .image-box  {
	order: 1; }
.grid-layout [class*="sidebar"] .inner-box .text-box p {
	font-size: var(--size-p);
	line-height: 1.4;
	text-align: left;
	font-weight: normal; }
.grid-layout [class*="sidebar"] .inner-box {
	width: 100%;
	height: auto;
	padding: 1.5rem;
	box-shadow: var(--material-box-inset-zero);
    background: var(--color-white); }
.grid-layout [class*="sidebar"] .sticky :is(picture, img) {
	padding-top: 0;
	margin-top: 0; }
.grid-layout [class*="sidebar"] .boxes-suspend .inner-box { border-radius: 1.5rem; }
.grid-layout [class*="sidebar"] .boxes-extend .inner-box  { border-radius: 0 0 1.5rem 1.5rem; }
.grid-layout [class*="sidebar"] .square .inner-box { border-radius: 0; }
.grid-layout [class*="sidebar"] .image-box {
	text-align: center;
	vertical-align:middle;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	filter: var(--material-imgage-filter); }
.grid-layout [class*="sidebar"] .heading-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8.0rem;
	text-align: center;
	border-radius: 999.9rem;
    color: var(--button-text);
    background: var(--button-bg);
    z-index: 2; }
.grid-layout [class*="sidebar"] .boxes-suspend .heading-box {
	width: 90%;
    margin: 0 auto -0.8rem auto; }
.grid-layout [class*="sidebar"] .square .heading-box {
	width: 80%;
    border-radius: 0; }
.grid-layout [class*="sidebar"] .boxes-extend .heading-box {
	width: 100%;
    margin: -0.6rem auto -0.8rem auto; }
.grid-layout [class*="sidebar"] .heading-box h3 {
    font-size: var(--size-h3sprwd);
	display: flex;
	justify-content: center;
	align-content: center;
    margin: 0;
    padding: 0;
	height: 6rem;
	line-height: 1.5;
    color: var(--button-text);
    background: var(--button-bg);
	border-radius: 0 ;
	box-shadow: none; }
.grid-layout [class*="sidebar"] .inner-box,
.grid-layout [class*="sidebar"] .inner-box .text-box,
:is(.general, .heading) .inner-box,
:is(.general, .heading) .inner-box .text-box:not([class*="pack"]) {
	background-color: var(--color-white); }
.grid-layout [class*="sidebar"] .inner-box .text-box p,
:is(.general, .heading) .inner-box .text-box p { color: var(--color-black); }
.sidebar div.ex {
	margin: 2rem 0;
	padding: 1rem;
	text-align: center;
	border: solid 0.2rem var(--border-line);
	border-radius: 999.9rem;
	box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem rgba(240, 240, 242, 1); }
/* more-button with button */
.more-button {
	margin: auto auto 0 auto;
	border-radius: 0.6rem;
	border: solid 0.3rem var(--button-bg);
	background-color: var(--button-bg);
	box-shadow: var(--material-box); 	
	-webkit-appearance: none; }
.more-button p {
	margin: 0 !important;
	border-radius: 0.6rem; }
.more-button a {
	display: inline-block;
	width: auto;
	color: var(--button-text);
	font-size: var(--size-p);
	padding: 0.5rem 2.5rem;
	border-radius: 0.6rem; }
:is(.square, .rectangle) .more-button,
.more-button:is(.square, .rectangle) { border-radius: 0; }
.internal-card-y .more-button { margin: 0 auto; }
.internal-card-x .more-button {
	margin: auto 1rem 0 auto;
	align-self: self-end;
	order: 3; }
.inner-box .more-button {
	margin: auto 0.5rem 0.5rem 0;
	align-self: center;
	order: 3; }
#contents .flex-pac :not(.boxes-suspend, .boxes-extend) .text-box .more-button {
	margin: auto auto 0 auto;
	align-self:  self-end; }
.archive-top-wrap .grid-xxx:is(.st, .lg) article > div .more-button {
	margin: auto 1.5rem 0.5rem auto;
	align-self: self-end;
	order: 3; }
.inner-box .more-button.shortcut span { transform: scaleY(-1); }
.more-button span.scaley { transform: scaleY(-1); }
.inner-box .more-button.finger span {
	padding: 0 0 0 0;
	font-size: 4.0rem;
	font-weight: lighter; }
.inner-box .more-button.reply span {
	padding: 0 0.4rem 0.1rem 0;
	transform: rotate(180deg); }
.more-button span.rotate180 { transform: rotate(180deg); }
.more-button span.finger.rotate90 { transform: rotate(90deg);
	padding: 0 0.4rem 0.4rem 0;
	font-size: 3.6rem;
	font-weight: lighter; }
span[class*="material-"].rotate90 { transform: rotate(90deg); }
span[class*="material-"].rotate180 { transform: rotate(180deg); }
span[class*="material-"].rotate90rev { transform: rotate(-90deg); }
.inner-box .more-button span[class*="material-icon"] { padding: 0 0 0 0.2rem; }
.inner-box .more-button a span {
	font-size: 3rem;
	font-weight: bold; }
.inner-box .more-button.arrow a span {
	font-size: 2.8rem; }
.inner-box .more-button.icon a span {
	font-size: 4rem;
	padding: 0 0 0 0.4rem;
	font-weight: normal; }
.inner-box .more-button.double-arrow a span {
	font-size: 4rem;
	padding: 0 0 0 0.4rem;
	font-weight: normal; }
.inner-box .more-button:is(.icon, .shortcut, .finger, .arrow, .double-arrow, .reply) {
	color: var(--box-inner-text);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5.0rem;
	height: 5.0rem;
	border-radius: 999rem; }
.inner-box .more-button:is(.icon, .shortcut, .finger, .arrow, .double-arrow, .reply) a {
	padding: 0; }
.archive-top-wrap .more-button,
.archive-top-wrap input[type="submit"] {
	box-shadow: var(--material-box); }
:is(.leftsidebar, .rightsidebar) .more-button a {
	padding: 0.1rem 2.5rem; }
.flex-mass-related.st .more-button {
	margin: auto 0.5rem 0.5rem 0;
	border-radius: 0.6rem;
	align-self: self-end;
	order: 3; }
.square .flex-mass-related.st .more-button,
.flex-mass-related.st.square .more-button,
.flex-mass-related.st .more-button.square { border-radius: 0; }
.flex-mass-related.st .more-button p a {
	padding: 0.5rem 1.5rem;
	letter-spacing: 0.1rem;
	color: var(--button-text); }
.flex-mass-related.st .more-button,
.respond input[type="submit"] { box-shadow: var(--material-box); }
.half-circle-side .more-button,
.half-circle-side.more-button {
	margin: auto auto 0.5rem auto;
	border-radius: 999.9rem; }
.half-circle-side :is(.internal-card-x, .internal-card-y, .inner-box) .more-button a,
:is(.internal-card-y, .internal-card-x).half-circle-side .more-button a,
:is(.internal-card-x, .inner-box) .more-button.half-circle-side a {
	margin: 0 2rem; }
.internal-card-x.half-circle-side .more-button p,
.internal-card-x .more-button.half-circle-side p,
.half-circle-side :is(.internal-card-x, .inner-box) .more-button p,
.half-circle-side .flex-mass-related.st .more-button p {
	margin-left: 0 !important;
	text-align: center; }
.half-circle-side .flex-mass-related.st .more-button,
.flex-mass-related.st .more-button.half-circle-side,
.flex-mass-related.st.half-circle-side .more-button {
	border-radius: 999.9rem; }
.half-circle-side .flex-mass-related.st .more-button p,
.flex-mass-related.st .more-button.half-circle-side p,
.flex-mass-related.st.half-circle-side .more-button p {
	padding: 0.0rem 0.0rem;
	margin: 0 0.0rem; }
.half-circle-side .flex-mass-related.st .more-button a,
.flex-mass-related.st .more-button.half-circle-side a,
.flex-mass-related.st.half-circle-side .more-button a {
	padding: 0.5rem 1.0rem;
	margin: 0 2.5rem; }
.button {
	display: inline-block;
	cursor: auto;
	margin: 1rem 0 1rem 0;
	padding: 1rem 2rem;
	width: auto;
	height: auto;
	font-size: var(--size-p);
	color: var(--button-text);
	background-color: var(--button-bg);
	border: solid 0.2rem var(--button-bg);
	border-radius: 0.8rem;
	box-shadow: var(--material-box); 	
	-webkit-appearance: none; }
.button a { color: var(--button-text); }
:is(.square, .rectangle) .button,
.button:is(.square, .rectangle) { border-radius: 0; }
.footer .search-widget-footer,
.sidebar :is(#searchform, .search-widget) {
	margin: 3.0rem 0;
	padding: 0; }
.footer .search-widget-footer {
	margin: 0.5rem 0 1.5rem;
	padding: 0; }
:is(.sidebar, .footer) form div {
	width: 100%;
	margin: 0;
	padding: 0 0.5rem;
	height: 10.0rem;
	display: inline-flex;
	flex-direction: column;
	position: relative; }
.footer .search-widget-footer input[type="text"],
.sidebar :is(#searchform, .search-widget) input[type="text"] {
	display: inline-block;
	width: 100%;
	height: 3.7rem;
	border-radius: 0.4rem;
	border: solid 0.1rem rgba(0, 112, 192, 1); }
.footer .search-widget-footer div::before,
.sidebar :is(#searchform, .search-widget) div::before {
	position: absolute;
	top: -1.3rem;
	right: 0.8rem;
    color: rgba(0, 112, 192, 1);
	font-size: 3.2rem;
    font-family: 'Material Icons';
	content: "search"; }
input[type="submit"] {
	margin: 2rem 0 3rem 0;
	padding: 1rem 2rem;
	display: inline-block;
	cursor: pointer;
	width: auto;
	height: auto;
	font-size: var(--size-p);
	color: var(--button-text);
	background-color: var(--button-bg);
	border: solid 0.2rem var(--button-bg);
	border-radius: 0.8rem;
	box-shadow: var(--material-box); 	
	-webkit-appearance: none; }
input[type="reset"] {
	margin: 2rem 0 3rem 0;
	padding: 1.2rem 2rem;
	display: inline-block;
	cursor: pointer;
	width: auto;
	height: auto;
	font-size: var(--size-pdown);
	color: var(--button-bg);
	background-color: var(--contents-bg);
	border: solid 0.2rem var(--button-bg);
	border-radius: 0.8rem;
	/*box-shadow: var(--material-box);*/ 	
	-webkit-appearance: none; }
:is(textarea, input):focus-within {
  background-color: var(--box-inner-bg); }
.black-base input[type="reset"] {
	color: var(--color-black);
	background-color: var(--color-white); }
.footer .search-widget-footer input:is([type="submit"], [type="reset"]),
.sidebar :is(#searchform, .search-widget) input:is([type="submit"], [type="reset"]) {
	margin: 1rem 0.0rem 0 auto;
	padding: 0.8rem 2rem; }
:is(.square, .rectangle) input:is([type="submit"], [type="reset"]),
input:is([type="submit"], [type="reset"]):is(.square, .rectangle) {
	border-radius: 0; }
.button.half-circle-side,
.half-circle-side .button,
.half-circle-side input:is([type="submit"], [type="reset"]) {
	padding: 1rem 2.5rem;
	border-radius: 999.9rem; }
.grid-layout #contents .archive-top-wrap :is(.st) .more-button,
.grid-layout #contents .archive-top-wrap :is(.st) .more-button p,
.grid-layout #contents .archive-top-wrap :is(.st) .more-button a {
	line-height: 2.2;
	font-size: var(--size-p); }
.grid-layout #contents .archive-top-wrap :is(.lg) .more-button,
.grid-layout #contents .archive-top-wrap :is(.lg) .more-button p,
.grid-layout #contents .archive-top-wrap :is(.lg) .more-button a {
	line-height: 1.8;
	font-size: var(--size-p); }
.grid-layout #contents .archive-top-wrap .more-button a {
	line-height: 2.2;
	font-size: var(--size-p); }
.grid-layout .related-posts .more-button a {
	line-height: 2.2;
	font-size: var(--size-p); }
.grid-xxx.st .more-button a {
	line-height: 2.2;
	padding: 0.1rem 1.8rem; }
form .flex-button {
	display: flex;
	justify-content: center;
	gap: 3.0rem; }
/* more-button turnover */
.turnover .more-button,
.more-button.turnover {
	color: var(--button-bg);
	background-color: var(--button-text);
	border: solid 0.3rem var(--button-bg); }
.turnover .more-button a,
.more-button.turnover a {
	font-weight: 600;
	color: var(--button-bg); }
:is(.related-posts, .archive-top-wrap) .turnover .more-button p a,
:is(.related-posts, .archive-top-wrap) .more-button.turnover p a{
	color: var(--button-bg); }
#contents .half-circle-side .button a,
#contents .turnover .more-button a {
	padding: 0.5rem 2.5rem; }
#contents .turnover .button a {
	line-height: 3.0rem; }
:is(.archive-top-wrap, .flex-mass-related).turnover .grid-xxx:is(.st, .lg) article > div .more-button,
:is(.archive-top-wrap, .flex-mass-related) .grid-xxx:is(.st, .lg).turnover article > div .more-button,
:is(.archive-top-wrap, .flex-mass-related) .grid-xxx:is(.st, .lg) article > div .more-button.turnover {
	border: solid 0.3rem var(--button-bg); }
.turnover .flex-mass-related:is(.st, .lg) article > div .more-button :is(p, p a),
.flex-mass-related:is(.st, .lg).turnover article > div .more-button :is(p, p a),

.flex-mass-related:is(.st, .lg) article > div .more-button.turnover :is(p, p a) {
	color: var(--button-bg); }
.turnover .button,
.button.turnover {
	color: var(--button-bg);
	background-color: var(--button-text);
	border: solid 0.3rem var(--button-bg); }
.turnover .button a,
.button.turnover a {
	font-weight: 600;
	color: var(--button-bg);
	background-color: var(--button-text); }
.turnover input[type="submit"] {
	font-weight: 600;
	color: var(--button-bg);
	background-color: var(--button-text);
	border: solid 0.3rem var(--button-bg); }
.footer .search-widget-footer input[type="submit"],
.sidebar.turnover :is(#searchform, .search-widget) input[type="submit"],
.turnover .sidebar :is(#searchform, .search-widget) input[type="submit"] {
	color: var(--button-bg);
	background-color: var(--button-text);
	border: solid 0.2rem var(--button-bg); }
/* FAQ (details / summary) */
details > summary {
	display: block;
	cursor: pointer; }
details > summary::-webkit-details-marker {
	display: none; }
details {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0; }
summary::after {
	position: absolute;
	top: 2.8rem;
	right: 1vw;
	transform: translateY(-25%);
	transition: transform 0.5s;
	font-size: 3.0rem;
    font-family: 'Material Icons';
	content: "expand_more"; }
details[open] summary::after {
	transform: translateY(-25%) rotate(-180deg); }
/*FAQ*/
#faq { /*padding: 2.5rem 2vw;*/ }
#faq section.average-text h2 {
	font-size: var(--size-h3); }
#faq section.average-text h3 {
	font-size: var(--size-h4); }
#faq section.average-text p {
	font-size: var(--size-p);
	padding-left: 4.5rem; }
#faq section {
	border-bottom: 0.1rem solid rgba(224,224,224,0.8); }
#faq section.average-text {
	margin: 0;
	padding: 0.1rem 2vw; }
/*FAQ*/
/* table fake */
.flex-mass-table-fake {
	width: 100%; }
.flex-mass-table-fake dl  {
	width: 100%;
	border: none; }
.flex-mass-table-fake dt {
	margin: 0;
	padding: 1.0rem 1.5rem;
	font-size: var(--size-p);
	border-radius: 0.4rem;
	color: var(--button-text);
	background-color: var(--button-bg); }
.flex-mass-table-fake dd {
	margin: 0 1.0rem 0 3.0rem;
	padding: 1.5rem 1.0rem 1.5rem 0.0rem;
	line-height: 1.8;
	/*color: var(--button-bg);
	background-color: var(--button-text);*/ }
.flex-mass-table-fake dl input[type="checkbox"] {
	transform: scale(1.4);
	margin: 0 1.0rem 0 0.5rem; }
.flex-mass-table-fake dl input[type="text"] {
	width: 100%;
	padding: 0.1rem;
	font-size: 1.6rem;
	line-height: 2.0; }
.flex-mass-table-fake dl select:not(#pref) {
	padding: 0.8rem 0.5rem;
	font-size: 1.6rem;
	-webkit-border-radius : 0.4rem; }
.flex-mass-table-fake dl select:not(#pref) option {
	padding: 0.8rem 0.5rem;
	font-size: 1.6rem; }
.flex-mass-table-fake dl select#pref {
	font-size: 1.6rem;
	-webkit-border-radius : 0.4rem; }
.flex-mass-table-fake dl .required {
	display: inline-block;
	margin-left: 0.8rem;
	padding: 0.2rem 0.5rem;
	font-size: 1.4rem;
	border-radius: 0.4rem;
	box-shadow: var(--material-box);
	background-color: var(--color-required-bg);
	color: var(--color-white); }
.flex-mass-table-fake dl textarea {
	width:100%; }
/* etc. */
blockquote {
	border-left: 1rem solid var(--quote-border);
	/*background-color: var(--box-inner-bg);*/
	box-shadow: var(--material-box-inner); 	
	margin: 2rem 0 2rem 0.0rem;
	padding: 0.01rem 0;
	text-align: left; }
blockquote p { margin-left: 1.5rem !important; color: var(--quote-text); }
hr { border: 0; height: 0.2rem; margin:1.0rem 0;
	background-image:
	linear-gradient(to right, rgba(52, 168, 83, 0.3), rgba(238, 103, 92, 0.75), rgba(78, 205, 230, 0.9), rgba(251, 188, 4, 0.75), rgba(102, 157, 246, 0.3)); }
.grid-xxx.sect::after,
section.grid-xxx::after {
	display: block;
	content: "";
	height: 0.0rem; }
/*a:visited,*/
.flex-mass-related h2 a:visited {
	/*color: rgba(255, 179, 208, 1) !important;*/ }
:is(.light-pink, .orange-party, .noblesse-purple, .cyber-neon, .red-gown, .crimson-glory, .orange-tulips) .related-posts h2 a:visited {
	color: rgba(165, 165, 165, 1) !important; }
.sidebar a:visited { color: var(--sidebar-link); }
.sidebar .more-button a:visited { color: var(--button-text); }
.sidebar .more-button.turnover  a:visited { color: var(--button-bg); }
.sidebar .turnover .more-button a:visited { color: var(--button-bg); }
.main-menu a:visited { color: var(--color-mainmenu-text); }
.hamburger-menu a:visited { color: var(--hamburger-text); }
.button a:visited { color: var(--button-text); }
.turnover .button a:visited,
.button.turnover a:visited {
	font-weight: 600;
	color: var(--button-bg); }
.screen-reader-text{
	clip:rect(1px, 1px, 1px, 1px);
	word-wrap:normal !important;
	border:0;
	-webkit-clip-path:inset(50%);
	clip-path:inset(50%);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px; }
.searchform input[type="text"] {
	padding-left: 0.5rem;
	font-size: var(--size-p);
	color: rgba(0, 112, 192, 1);
	border: none; }
.author-post .li-high li {
	border-bottom: none;
	list-style: none;
	text-decoration: none; }
.author-post .li-high li,
.author-post .li-high li a {
	display: inline; }
.author-post .li-high div {
	text-align: right;
	line-height: 1.0;
	margin: 0.0rem 0 1.0rem; }
[class*="wsp-"] li,
[class*="wsp-"] li a {
	/*display: inline-block;*/
	line-height: 1.8; }
.author-bio {
	display: none; }
/* comment */
#comments .comment-form-cookies-consent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	margin-top: 1.5rem; }
#comments .comment-form-cookies-consent input {
	margin-right: 1.0rem;
	width: var(--size-tap-target);
	height: var(--size-tap-target); }
/* LuckyWP Table of Contents */
.mytoc {
	font-size: var(--size-p);
	width: 100%; }
.lwptoc_header {
	font-size: var(--size-h4); }
.lwptoc_header::before {
	font-family: 'Material Icons Outlined';
	content: "toc";
	vertical-align: middle;
	color: var(--color-accent);	
	font-size: var(--size-gmisbig); }
.mytoc ul {
	padding-top: 0.5rem;
	margin-top: 0;
	padding-left: 0.5rem; }
.mytoc ul ul {
	padding-left: 1.5rem; }
.mytoc li {
	list-style: none;
	line-height: 1.8; }
.black-base .page-info-card .mytoc .lwptoc_toggle a,
.black-base .page-info-card .mytoc li a {
	color: var(--header-bg);	}
.mytoc li::before {
	font-family: 'Material Icons';
	content: "play_arrow";
	font-size: 1.6rem;
	color: var(--color-accent);	}
.mytoc ul ul li::before {
	font-family: 'Material Icons Outlined';
	content: "fiber_manual_record";
	font-size: 1.0rem;	}
:is(.mytoc, .lwptoc, .lwptoc-transparent .lwptoc_i) {
	border: none;
	background-color: var(--box-inner-bg); }
span.lwptoc_toggle {
	font-size: var(--size-p); }
.page-info-card .mytoc .lwptoc{
	margin-bottom: 0; }
.lwptoc_i {
	padding: 1.4rem 0.2rem 1.8rem; }
#contents .mytoc {
	margin: 0 auto;
	padding: 1rem 2rem;
	width: 80%; }
/* LuckyWP Table of Contents */
/* archive explanation */
section.archive-upper {
	width: auto;
	margin: 1.0rem;
	padding: 1.0rem;
	font-size: var(--size-p);
	line-height: 1.6;
	border: solid 0.1rem var(--header-bg); }
section.archive-lower {
	width: auto;
	margin: 1.0rem;
	padding: 1.0rem;
	font-size: var(--size-p);
	line-height: 1.6;
	border: solid 0.1rem var(--footer-bg); }
.author-post .li-high li a {
	display: inline !important; }
#contents ul li,
#contents ul li a {
	word-break: break-all;
	padding-right: 2vw; }

.emphasis {
	border-left: 1rem solid var(--mainmenu-bg);
	background-color: var(--breadcrumb-bg);
	/*border-left: 1rem solid var(--box-outer-bg);
	background-color: var(--box-inner-bg);*/
	margin: 2rem 0 2rem 0.5rem;
	padding: 0.5rem 0.8rem 0.5rem 0.0rem;
	text-align: left; }
.emphasis p {
	color: var(--contents-text); }

@media screen and (max-width: 600px) {
	@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
	.grid-layout #swiper{
		display: none; } }	
	@-moz-document url-prefix() {
	.grid-layout #swiper{
		display: block; } }	
	_::-webkit-full-page-media, _:future, :root .grid-layout #swiper {
	 display: block; }
}
@media screen and (min-width: 600px) and (max-width: 960px) {
/* contents (600 - 960) */
blockquote {
	margin: 2rem 0 2rem 0.5rem; }
section.grid-xxx {
	background: var(--contents-bg); }
.radius-rim.outer-box,
.radius-rim .outer-box {
	border-radius: 2.5rem; }
.radius-rim.inner-box,
.radius-rim .inner-box {
	border-radius: 1.5rem; }
.zigzag-s-xy.inner-box,
.zigzag-s-xy .inner-box {
	border-radius: 0;
	box-shadow: none;
	padding: 2.0rem; }
.zigzag-m-xy.inner-box,
.zigzag-m-xy .inner-box {
    border-radius: 0;
	box-shadow: none;
	padding: 2.4rem; }
.zigzag-l-xy.inner-box,
.zigzag-l-xy .inner-box {
    border-radius: 0;
	box-shadow: none;
	padding: 2.8rem; }
section.average-text.nest.grid-xxx.sp1.tb2.dt3 {
	margin-bottom: 1.0rem; }
:is(.internal-card-y, .internal-card-x) .image-box img {
	border-radius: 1.2rem; }
:is(.internal-card-y, .internal-card-x):is(.square, .rectangle) .image-box img,
:is(.square, .rectangle) :is(.internal-card-y, .internal-card-x) .image-box img,
:is(.internal-card-y, .internal-card-x) :is(.square, .rectangle) .image-box img {
	border-radius: 0; }
#contents :is(.internal-card-y, .internal-card-x):is(.circle, .warp) .image-box,	
#contents :is(.internal-card-y, .internal-card-x) .image-box:is(.circle, .warp),
#contents :is(.internal-card-y, .internal-card-x) :is(.circle, .warp) .image-box {
	padding-left: 2vmin;
	padding-right: 0;
	height: auto; }
.internal-card-y .text-box.col-rev {
	margin: -1.5rem auto 3rem; }
:is(.heapup-heading, .gradation-heading, .mesh-heading) {
	padding-left: 3rem;
	padding-right: 3rem; }
.internal-card-y .text-box {
	width: 80%;
	margin: -1.5rem auto 0rem;
	padding: 0.5rem 2rem 0;
	display: flex;
	flex-direction: column;
	background: var(--contents-bg);
	box-shadow: var(--material-box-third); 	
	border-radius: 1.5rem;
	z-index: 2; }
.black-base .internal-card-y .text-box {
	box-shadow: var(--material-box-turnover); }
:is(.square, .rectangle) .internal-card-y .text-box,
.internal-card-y:is(.square, .rectangle) .text-box,
.internal-card-y :is(.square, .rectangle) .text-box {
	border-radius: 0; }
.wsp-container ul li a,
.wsp-container ul li {
	display: inline-block; }
ul:is(.wsp-categories-list, .wsp-pages-list, ) {
	display: grid;
	grid-template-columns: repeat(2, calc( (100% - var(--list-gap)) / 2));
	--list-gap: 0rem;
	gap: var(--list-gap); }
/* contents flexbox / grid setting (600 - 960) */
/* table fake (600 - 960) */
.flex-mass-table-fake dl  {
	display: flex;
	flex-wrap: wrap;; }
.flex-mass-table-fake dt {
	width: 32%;
	border-radius: 0;
	border-bottom: solid 0.1rem var(--button-text); }
.flex-mass-table-fake dd {
	width: 65%;
	margin: 0;
	padding: 1.5rem 1rem 1.5rem 1.0rem;
	border-top: solid 0.1rem var(--button-bg);
	border-right: solid 0.1rem var(--button-bg); }
.flex-mass-table-fake  dd:last-of-type {
	border-bottom: solid 0.1rem var(--button-bg); }
.flex-mass-table-fake dl input[type="text"],
.flex-mass-table-fake dl textarea {
	width:100%; }
.flex-mass-table-fake dl input[type="text"],
.flex-mass-table-fake dl select,
.flex-mass-table-fake dl textarea {
	border: solid 0.1rem var(--color-accent);
	border-radius: 0.4rem; }
.flex-mass-table-fake dl input[type="email"] {
	width: 100%;
	padding: 0.1rem;
	font-size: 1.6rem;
	line-height: 2.0;
	border: solid 0.1rem var(--color-accent);
	border-radius: 0.4rem; }
/* etc. (600 - 960) */
.author-post .li-high li,
.author-post .li-high li a {
	display: inline-block; }
.author-post .li-high {
	display: grid;
	grid-template-columns: repeat(2, calc( (100% - var(--list-gap)) / 2));
	--list-gap: 5.5rem;
	gap: var(--list-gap); }
ul.wsp-posts-list ul.wsp-posts-list li {
	margin-right: 5rem; }
}