/** ▼demo.css
***************************************/
/* メッシュグラデーション用プロパティ */
@property --x-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 85%;
}

@property --y-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 80%;
}

@property --c-0 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(60, 20%, 100%, 0.3);
}

@property --x-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 20%;
}

@property --y-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 30%;
}

@property --c-1 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(60, 20%, 100%, 0.3);
}

@property --x-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 70%;
}

@property --y-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 60%;
}

@property --c-2 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(256, 50%, 100%, 0.2);
}

@property --x-3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 40%;
}

@property --y-3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 90%;
}

@property --c-3 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(238, 16%, 100%, 0.25);
}

/* メッシュグラデーションアニメーション */
@keyframes meshFlowVkaA {
	0% {
		--x-0: 85%;
		--y-0: 80%;
		--c-0: hsla(60, 20%, 100%, 0.3);
		--x-1: 20%;
		--y-1: 30%;
		--c-1: hsla(60, 20%, 100%, 0.3);
		--x-2: 70%;
		--y-2: 60%;
		--c-2: hsla(256, 50%, 100%, 0.2);
		--x-3: 40%;
		--y-3: 90%;
		--c-3: hsla(238, 16%, 100%, 0.25);
	}

	25% {
		--x-0: 30%;
		--y-0: 20%;
		--c-0: hsla(70, 43%, 100%, 0.2);
		--x-1: 90%;
		--y-1: 70%;
		--c-1: hsla(70, 43%, 95%, 0.2);
		--x-2: 10%;
		--y-2: 50%;
		--c-2: hsla(253, 30%, 40%, 0.25);
		--x-3: 60%;
		--y-3: 10%;
		--c-3: hsla(256, 50%, 29%, 0.2);
	}

	50% {
		--x-0: 10%;
		--y-0: 90%;
		--c-0: hsla(100, 2%, 100%, 0.25);
		--x-1: 50%;
		--y-1: 50%;
		--c-1: hsla(100, 2%, 73%, 0.25);
		--x-2: 95%;
		--y-2: 20%;
		--c-2: hsla(238, 16%, 52%, 0.225);
		--x-3: 20%;
		--y-3: 70%;
		--c-3: hsla(253, 30%, 40%, 0.25);
	}

	75% {
		--x-0: 60%;
		--y-0: 40%;
		--c-0: hsla(60, 20%, 100%, 0.35);
		--x-1: 5%;
		--y-1: 85%;
		--c-1: hsla(60, 20%, 99%, 0.35);
		--x-2: 50%;
		--y-2: 95%;
		--c-2: hsla(236, 13%, 50%, 0.2);
		--x-3: 85%;
		--y-3: 30%;
		--c-3: hsla(70, 43%, 95%, 0.15);
	}

	100% {
		--x-0: 85%;
		--y-0: 80%;
		--c-0: hsla(60, 20%, 100%, 0.3);
		--x-1: 20%;
		--y-1: 30%;
		--c-1: hsla(60, 20%, 100%, 0.3);
		--x-2: 70%;
		--y-2: 60%;
		--c-2: hsla(256, 50%, 100%, 0.2);
		--x-3: 40%;
		--y-3: 90%;
		--c-3: hsla(238, 16%, 100%, 0.25);
	}
}

/* メインコンテナ */
.pg-saracnvtvkaa {
	position: relative;
	background-color: hsla(243, 33%, 100%, 1);
	background-image:
		radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 5%, transparent 45%),
		radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 8%, transparent 55%),
		radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 10%, transparent 50%),
		radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 12%, transparent 60%),
		linear-gradient(313deg,
			hsla(243, 33%, 100%, 0.9) 0%,
			hsla(243, 33%, 96%, 0.7) 25%,
			hsla(238, 16%, 88%, 0.6) 50%,
			hsla(243, 33%, 96%, 0.8) 75%,
			hsla(243, 33%, 100%, 0.95) 100%);
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 350% 350%;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
	animation:
		meshFlowVkaA 30s cubic-bezier(0.4, 0.0, 0.6, 1.0) infinite,
		mainGlitchVkaA 3s linear infinite;
	will-change: background-position, transform;
	transform: translateZ(0);
}

/* ::before用のグリッチ */
@keyframes beforeGlitchVkaA {
	0%,
	98.5%,
	100% {
		transform: translate(0) scale(1);
		filter: brightness(1) contrast(1);
	}

	98.8% {
		transform: translate(20px, -2px) scale(1.01);
		filter: brightness(1.02) contrast(1.5);
	}

	99% {
		transform: translate(-30px, 1px) scale(0.99);
		filter: brightness(0.98) contrast(1.3);
	}

	99.2% {
		transform: translate(10px, 3px) scale(1.005);
		filter: brightness(1.01) contrast(1.2);
	}

	99.4% {
		transform: translate(-10px, -2px) scale(1.002);
		filter: brightness(0.99) contrast(1.1);
	}

	99.7% {
		transform: translate(20px, 0) scale(0.998);
		filter: brightness(1.03) contrast(1.15);
	}
}

/* テクスチャとパターン層 */
.pg-saracnvtvkaa::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background:
		url('https://i.gyazo.com/fbd860a7417f6b2b62ba86aa68a681ea.png'),
		url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="5"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.02"/></svg>'),
		repeating-linear-gradient(45deg,
			transparent,
			transparent 3px,
			hsla(253, 30%, 40%, 0.02) 3px,
			hsla(253, 30%, 40%, 0.02) 6px),
		repeating-radial-gradient(circle at 50% 50%,
			transparent 0,
			transparent 20px,
			hsla(238, 16%, 52%, 0.01) 20px,
			hsla(238, 16%, 52%, 0.01) 21px);
	background-size: 800px 600px, 300px 300px, 50px 50px, 100px 100px;
	background-repeat: repeat;
	opacity: 0.06;
	mix-blend-mode: multiply;
	animation: beforeGlitchVkaA 9s linear infinite;
	will-change: transform, opacity;
	transform: translateZ(0);
}

/* サブピクセルノイズ用のプロパティ */
@property --noise-lines {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.00008px;
}

@property --noise-shift {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.00012px;
}

/* ノイズアニメーション */
@keyframes noiseDistVkaA {
	0% {
		--noise-lines: 0.00008px;
		--noise-shift: 0.00012px;
	}

	12.5% {
		--noise-lines: 0.00010px;
		--noise-shift: 0.00014px;
	}

	25% {
		--noise-lines: 0.00009px;
		--noise-shift: 0.00011px;
	}

	37.5% {
		--noise-lines: 0.00011px;
		--noise-shift: 0.00013px;
	}

	50% {
		--noise-lines: 0.00007px;
		--noise-shift: 0.00015px;
	}

	62.5% {
		--noise-lines: 0.00012px;
		--noise-shift: 0.00010px;
	}

	75% {
		--noise-lines: 0.00009px;
		--noise-shift: 0.00013px;
	}

	87.5% {
		--noise-lines: 0.00010px;
		--noise-shift: 0.00011px;
	}

	100% {
		--noise-lines: 0.00008px;
		--noise-shift: 0.00012px;
	}
}

/* ノイズの色変化 */
@keyframes noiseColorVkaA {

	0%,
	100% {
		background-position: 0 0, 0% 0%, 0 0;
	}

	25% {
		background-position: 0 0, 50% 50%, 0 -2px;
	}

	50% {
		background-position: 0 0, 100% 100%, 0 -4px;
	}

	75% {
		background-position: 0 0, 50% 50%, 0 -2px;
	}
}

/* ::after用のグリッチ */
@keyframes afterGlitchVkaA {

	0%,
	98.5%,
	100% {
		transform: translate(0) scale(1);
		filter: contrast(1.2);
	}

	98.7% {
		transform: translate(-20px, 2px) scale(1.02);
		filter: contrast(2);
	}

	98.9% {
		transform: translate(30px, -1px) scale(0.98);
		filter: contrast(0.8);
	}

	99.1% {
		transform: translate(-10px, -3px) scale(1.01);
		filter: contrast(1.5);
	}

	99.3% {
		transform: translate(20px, 1px) scale(0.99);
		filter: contrast(1.8);
	}

	99.5% {
		transform: translate(-30px, 0) scale(1.005);
		filter: contrast(1.1);
	}

	99.6% {
		transform: translate(10px, -2px) scale(1);
		filter: contrast(1.3);
	}
}

/* サブピクセルノイズ層 - STEINS;GATE風 */
.pg-saracnvtvkaa::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: -25%;
	left: -25%;
	width: 100%;
	height: 100%;
	pointer-events: none;

	/* サブピクセルノイズマスク */
	mask: repeating-radial-gradient(circle at center,
			#000,
			var(--noise-lines),
			#000,
			0,
			#0000,
			calc(var(--noise-lines) * 2),
			#0000 0);

	background:
		url('https://i.gyazo.com/24c670e79e2ca28a060f210caaeb93cc.jpg'),
		/* グラデーション */
		linear-gradient(135deg,
			hsla(253, 30%, 40%, 0.8) 0%,
			hsla(256, 50%, 29%, 0.6) 25%,
			hsla(238, 16%, 52%, 0.7) 50%,
			hsla(236, 13%, 50%, 0.6) 75%,
			hsla(253, 30%, 40%, 0.8) 100%),
		/* 追加のスキャンライン */
		repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			hsla(256, 50%, 29%, 0.1) 2px,
			hsla(256, 50%, 29%, 0.1) 3px);
	background-size: 800px 600px, 200% 200%, 100% 4px;
	background-position: 0 0, 0 0, 0 0;

	/* アニメーション */
	animation:
		noiseDistVkaA 45s linear infinite,
		noiseColorVkaA 20s ease-in-out infinite,
		afterGlitchVkaA 9s linear infinite;

	mix-blend-mode: overlay;
	opacity: 0.1;
	filter: contrast(1.2);
}

@media (prefers-reduced-motion: reduce) {

	.pg-saracnvtvkaa,
	.pg-saracnvtvkaa::before,
	.pg-saracnvtvkaa::after {
		animation-duration: 60s;
	}
}




/* Component
====================================== */
/* Icon（Material Symbols） */
.pg-saracnvtvkaa .icon {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2.5pc;
	height: 2.5pc;
	font-size: 2.5pc;
	margin: auto;
}

.pg-saracnvtvkaa .icon::before {
	position: relative;
	top: 1px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 0;
	height: 0;
	font-size: 133.3%;
	/* Material Symbols */
	font-family: 'Material Symbols Sharp';
	font-variation-settings:
		'FILL' 0,
		'wght' 300;
}




/* Layout
====================================== */
/* .mezzala（余白調整：page上） */
.adj-cnvtVkaA-mezzalaA {
	width: 100%;
	height: 0pc;
	background: var(--c-base, hsl(223, 6%, 100%));
}

/* .mediano（余白調整：page下） */
.adj-cnvtVkaA-medianoA {
	width: 100%;
	height: calc(var(--⅝fem) * 0);
	background: var(--c-base, hsl(223, 6%, 100%));
}

/* .section, .inner */
[class^="sect-cnvtVkaA"] .search-container,
[class^="sect-cnvtVkaA"] .section__intainer {
	width: 1320px;
	max-width: 92.5vw;
	height: auto;
}




/* .section, .division
====================================== */
/* .section
-------------------------------------- */
.pg-saracnvtvkaa .sect-cnvtVkaA-Intro {
	/* padding: 上  横  下 */
	padding: calc(var(--⅝fem) * 0) 0px 0pc;
}


/* .section
-------------------------------------- */
.pg-saracnvtvkaa .sect-cnvtVkaA-Icons {
	/* padding: 上  横  下 */
	padding: calc(var(--⅝fem) * 3) 0px 0pc;
}

/* .cards-wrapper（カード）
------------------------------------- */
.pg-saracnvtvkaa .cards-container {
	position: relative;
	width: 1320px;
	max-width: 92.5vw;
	height: auto;
}

.pg-saracnvtvkaa [class^="cards-wrapper"] {
	width: 100%;
	height: 100%;
}

.pg-saracnvtvkaa [class^="cards-wrapper"]>:is(li, dd) {
	position: relative;
	width: 100%;
}

/* .cards-wrapper（SP） */
@media screen and (max-width: 743.9px) {
	.pg-saracnvtvkaa .cards-wrapper {
		/* Flex */
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.pg-saracnvtvkaa .cards-wrapper>:is(li, dd) {
		margin-bottom: 1pc;
	}
}

@media print,
screen and (min-width: 744px) {
	.pg-saracnvtvkaa .cards-wrapper {
		/* Flex */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pg-saracnvtvkaa .cards-wrapper>:is(li, dd) {
		width: 6.3%;
		min-width: 78px;
		margin-bottom: 1pc;
	}
}


/* .card（カード型／縦）
------------------------------------- */
.pg-saracnvtvkaa .card {
	position: relative;
	display: flex;
	padding: 0;
	overflow: visible;
}

.pg-saracnvtvkaa .card .card-ifield {
	/* Flex */
	display: inline-flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	border: 1px solid var(--c-text-200, hsl(223, 6%, 84%));
	background: var(--c-base, hsl(223, 6%, 100%));
	color: var(--c-text, hsl(223, 6%, 13%));
	overflow: hidden;
}

/* flexboxで順番並び替え */
.pg-saracnvtvkaa .card .card-thumbnail {
	order: 6;
}

.pg-saracnvtvkaa .card .card-title {
	order: 7;
}

.pg-saracnvtvkaa .card .card-content {
	order: 8;
}

/* .card-thumbnail */
.pg-saracnvtvkaa .card .card-thumbnail {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding-top: 1.1pc;
}

/* タイトル（h1～h6） */
.pg-saracnvtvkaa .card .card-title {
	display: block;
	position: relative;
	width: 90% !important;
	overflow: hidden;
	font-weight: 500 !important;
	/* margin: 上  横  下 */
	margin: 0.5pc auto 0 !important;
}

.pg-saracnvtvkaa .card .card-title {
	height: auto;
	height: 2.5em;
	max-height: 2.5em;
	line-height: 1.11;
}

.pg-saracnvtvkaa .card .card-title>a {
	width: 100%;
	height: 100%;
}

.pg-saracnvtvkaa .card h4.card-title {
	font-size: 11px;
}

/* .card-content */
.pg-saracnvtvkaa .cardsView-grid .card .card-content {
	width: 100%;
	display: flex;
}

.pg-saracnvtvkaa .cardsView-grid .card .card-content .button {
	width: 50%;
	height: 27px;
	/* padding: 上  横  下 */
	padding: 1px 0 0;
	font-size: 11px;
}

.pg-saracnvtvkaa .cardsView-grid .card .card-content .button .ma-open_in_new::before {
	position: relative;
	top: 0px;
	display: inline-flex;
	place-content: center;
	place-items: center;
	width: 0;
	height: 0;
	font-size: 133.3%;
	/* Material Symbols */
	font-family: 'Material Symbols Sharp';
	font-variation-settings:
		'FILL' 0,
		'wght' 500;
}