@charset "utf-8";
@import url("destyle.css");
@import url("common.css");
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap'); */

/* ---------------------------------------------
	変数
---------------------------------------------*/

:root {
	/* --fonts2: "Annie Use Your Telescope", cursive; */
	--c-text-50: color-mix(in srgb, var(--c-text) 50%, transparent);
	--btn-border-W: 1px;
	--shadow: drop-shadow(0 0 0.2rem var(--black-75));
	--shadow2: drop-shadow(0 0 0.05rem var(--black-50));
	--font-s: clamp(1.02rem, 1.5cqw, 1.2rem);
}

/* ---------------------------------------------
	初期化・リセット
---------------------------------------------*/

* {
	font-family: "Quicksand", "Zen Maru Gothic", var(--fonts);
}

body {
	color: var(--c-text);
	background-color: var(--c-back);
	background-repeat: repeat;
	background-attachment: fixed;
	cursor: url("../img/Cursor_Pointer.png"), auto;
	font-size: var(--font-s);
}

mark {
	color: var(--c-text);
	background-color: var(--color3);

	&.another {
		background-color: var(--color4);
	}
}

table {
	white-space: nowrap;
}

.icon::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
}

/* ---------------------------------------------
	Bootstrap5 上書き
--------------------------------------------- */

.container {
	position: relative;
	container-type: inline-size;
	margin: 0 auto;
	padding: 0;

	.row {
		margin: 0 auto;
		padding: 0 1.5cqw;
		justify-content: center;
		align-items: center;
		align-self: center;
	}
}

.nav-item {
	font-size: inherit;
	line-height: 1.0;
	text-align: left;
}

.nav-link {
	display: inline-block;
	color: var(--c-text);
	background-color: transparent;

	&:hover,
	&:focus {
		color: var(--color1);
	}
}

.list-unstyled {
	font-size: inherit;
}

/* ボタン色：btn-primary */

button:not(:disabled) {
	cursor: url("../img/Cursor_Hand.png"), help;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
	min-width: 10.0cqw;
	/* width: auto; */
	/* max-width: 100%; */
	/* height: 36px; */
	/* margin: 0 4px; */
	/* padding: 0; */
	color: var(--c-text);
	background-color: var(--color1);
	border: 2px solid var(--color1);
	/* line-height: 32px; */
}

.btn-primary:hover {
	color: var(--c-text);
	background-color: var(--color2);
	border: 2px solid var(--color2);
	cursor: url("../img/Cursor_Hand.png"), help;
}

.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
	color: var(--c-text);
	background-color: var(--color2);
	border: 2px solid var(--color2);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
	color: var(--c-text);
	background-color: var(--color2);
	border: 2px solid var(--color2);
	box-shadow: 0 0 0 0.1rem rgba(100, 100, 100, 0.5);
}

/* ツールチップ */
.custom-tooltip {
	--bs-tooltip-color: var(--c-back);
	--bs-tooltip-bg: var(--c-text);
}

/* ---------------------------------------------
	Fancybox 上書き
--------------------------------------------- */

#myCarousel {
	--f-arrow-pos: 10px;
	--f-arrow-bg: color-mix(in srgb, var(--color1) 50%, transparent);
	--f-arrow-hover-bg: var(--color1);
	--f-arrow-color: var(--c-back);
	--f-arrow-width: 40px;
	--f-arrow-height: 40px;
	--f-arrow-svg-width: 20px;
	--f-arrow-svg-height: 20px;
	--f-arrow-svg-stroke-width: 2px;
	--f-arrow-border-radius: 50%;
}

#myCarousel .f-carousel__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

#myCarousel img {
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

/* ---------------------------------------------
	スクロールバー
---------------------------------------------*/

* {
	scrollbar-width: var(--scrollbar-W);
	scrollbar-color: var(--color1);
}

::-webkit-scrollbar {
	width: var(--scrollbar-W);
	height: var(--scrollbar-W);
}

::-webkit-scrollbar-track {
	background-color: var(--c-back);
}

::-webkit-scrollbar-thumb {
	background-color: var(--color1);
	border-radius: var(--scrollbar-W);
}

/* ---------------------------------------------
	ハイライト
---------------------------------------------*/

::selection {
	color: var(--c-back);
	background: var(--c-text);
	text-shadow: 0 0 0.25rem var(--c-back);
}

/* ---------------------------------------------
	アンカー
---------------------------------------------*/

a {
	color: var(--color2);

	&:hover,
	&:active {
		color: var(--color1);
		cursor: url("../img/Cursor_Hand.png"), help;
	}

	img {
		transition: 0.18s ease-in-out;

		&:hover {
			opacity: 0.5;
		}
	}
}


/* ---------------------------------------------
	注意アイコンつきテキスト
--------------------------------------------- */

.indent {
	margin: 1.0cqh 0 1.0cqh 1.5rem;
	padding: 0;

	&::before {
		display: inline-block;
		vertical-align: top;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f06a";
		text-indent: -1.5rem;
		color: var(--c-text);
	}
}

/* ぼやけ文字 */
.dim {
	color: transparent;
	text-shadow: 0 0 0.2rem var(--color2);
}

/* 非表示 */
.invisible,
.hide {
	display: none;
}

/* 全角ダッシュ用 */
.keisen {
	font-style: italic;
}

/* ---------------------------------------------
	攻略情報
--------------------------------------------- */

.hintbox {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 1.0cqw 0 1.0cqw 1.5cqw;
	background-color: var(--black-33);
	border-radius: 1.0rem;
	white-space: nowrap;
	transition: 0.18s ease-in-out;

	.hintbox {
		width: calc(100% - 1.5cqw);
		margin: 1.0cqw 0 1.0cqw 1.5cqw;
		transition: 0.18s ease-in-out;
	}

	&.color-1 {
		border: 1px solid color-mix(in srgb, var(--color1) 75%, transparent);
	}

	&.color-2 {
		border: 1px solid color-mix(in srgb, var(--color2) 75%, transparent);
	}

	/* 参考：https://turicco.com/box/ */
	.route {
		display: flex;
		gap: 0.25rem 0;
		flex-flow: row wrap;
		justify-content: flex-start;
		width: auto;
		margin: 0 0 0 -0.5cqw;
		padding: 0.5cqw 0;
		/* background-color: aqua; */
	}

	.bunki,
	.bunki-s {
		display: inline-block;
		color: var(--color2);
		background-color: var(--black-50);
		border-radius: 0.15rem;
		font-weight: 700;
		text-align: center;
		letter-spacing: 0.25em;
		text-indent: 0.25em;
	}

	.bunki {
		width: 6.6rem;

		&::before {
			font-family: "Font Awesome 6 Free";
			content: "\f138";
			margin-right: 0.25rem;
			font-weight: 900;
		}
	}

	.serifu {
		width: 100%;
		padding: 0 1.5rem;
		font-weight: 500;
	}

	.bunki-s {
		width: 3.6rem;
		margin-right: 0.25rem;
	}

	/* エンディングタイトル */
	.ending {
		padding: 0 0.25rem;
		color: var(--color1);
		font-weight: 700;
	}

	/* 右に矢印 */
	.right::after,
	.down::after {
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
	}

	.right::after {
		content: "\f101";
		margin: 0 0.5rem;
	}

	.right-wrap {
		margin: 0.25rem 0;
	}

	/* ホバーで動く */

	.a-wrap {
		display: flex;
		flex-flow: row nowrap;
		justify-items: center;
	}

	.down {
		position: relative;
		margin: 0.25cqw 0;

		&::after {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			transition: 0.3s;
			content: "\f078";
			display: inline-block;
			width: 1.0rem;
			height: 1.0rem;
			margin: 0 0 0 0.15rem;
			padding: 0;
			text-align: center;
			vertical-align: middle;
			line-height: 1.0rem;
		}

		&:hover::after {
			transform: translateY(-0.25rem);
		}

		&:hover,
		&:active,
		&:focus {
			color: var(--color2);
		}
	}
}

/* ---------------------------------------------
	年齢認証モーダル
--------------------------------------------- */
.modal {
	position: fixed;
	display: none;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-width: 480px;
	width: auto;
	max-width: 520px;
	min-height: 200px;
	height: auto;
	max-height: 420px;
	margin: auto;
	padding: 1.0rem 1.25rem;
	text-align: center;
	color: #ffffff;
	background-color: #000;
	border: #d9333f 3px solid;
}

.modal img {
	max-width: 96px;
	object-fit: cover;
	padding: 0.5rem 0;
}

.modal .yesorno {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	width: 100%;
	margin: auto;
}

.modal a {
	display: block;
	margin: 0.25rem 0;
	width: calc(calc(100% / 2) - 1.0rem);
	height: 40px;
	line-height: 37px;
	font-size: 1.5rem;
	color: #ffffff;
	background-color: #d9333f;
	border: #d9333f 2px solid;
	border-radius: 1.75rem;
	cursor: url("../img/Cursor_Hand.png"), help;
	font-family: 'Annie Use Your Telescope';
}

.modal a.close_modal {
	color: #fff;
	background-color: #000;
}

.modal a:hover,
.modal a.close_modal:hover {
	color: #000;
	background-color: #ffffff;
}

/* ---------------------------------------------
	テキスト：見出し
--------------------------------------------- */

h1 {
	inset: 0;
	/* top, right, bottom, left を一括指定 */
}

h2,
h2 span {
	position: relative;
}

h2 {
	text-align: right;
	margin-block: 5.0cqh;
	container-type: inline-size;

	span {
		top: 50%;
		right: 3.0cqw;
		display: inline-block;
		padding-inline: 0.5rem;
		font-family: var(--fonts2);
		font-size: min(6.0cqw, 2.1rem);
		color: var(--c-text);
		background-color: var(--c-back);
		letter-spacing: 0.1em;
		text-indent: 0.1em;
		vertical-align: middle;
	}

	&::before {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
		width: 100cqw;
		height: 3px;
		margin: 0;
		content: '';
		background-color: var(--color1);
		border-radius: 0.5rem;
	}
}

h3 {
	margin: 3.0cqh 0 0;
	height: 1.25rem;
	font-size: calc(var(--font-s) * 1.2);

	span {
		color: var(--c-text);
		vertical-align: middle;
	}

	&::before {
		display: inline-block;
		margin-right: 0.25rem;
		font-family: "Font Awesome 6 Free";
		content: "\f101";
		font-weight: 900;
		color: var(--color1);
		vertical-align: middle;
	}

}

h4 {
	margin: 1.5cqh 0 4.0cqh 1.75rem;
	font-size: calc(var(--font-s) * 0.84);
	color: var(--c-text-50);
	letter-spacing: 0.2em;
	text-indent: 0;
}

/* ---------------------------------------------
	ナビ（リスト：メニュー）
--------------------------------------------- */

nav {

	#tab,
	#tab li,
	#tab a {
		width: 100%;
		height: 100%;
	}

	#tab {
		display: grid;
		gap: 0;

		li {
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;
			align-content: center;
			font-family: var(--fonts2);
			transition: .24s ease-in-out;

			/* a {
				display:block OR flex（inline-flex）
			} */

			a,
			span {
				font-size: inherit;
				font-family: inherit;
				letter-spacing: 0.1em;
				text-indent: 0.1em;
			}
		}
	}
}

body[id="show"] {

	nav {
		#tab {

			li {
				cursor: url("../img/Cursor_Hand.png"), pointer;
			}
		}
	}
}

/* ---------------------------------------------
	リスト：キャラクター紹介
--------------------------------------------- */

.character {
	display: flex;
	flex-flow: row nowrap;
	gap: 2.0cqh 1.0cqw;

	li,
	li .face,
	li .text {
		position: relative;
	}

	li {
		width: calc(100% / 3);
		height: min(auto, 24.0rem);
		display: grid;
		gap: 0;
		grid-template-columns: unset;
		grid-template-rows: 27.0cqw 6.0rem auto;
		position: relative;
		color: var(--c-text);
		text-align: center;
		filter: var(--shadow2);
		transform: translateZ(0);

		.face {
			width: 100%;
			height: 100%;
			container-type: inline-size;
			/* background-color: blueviolet; */

			img {
				position: absolute;
				left: 50%;
				right: 50%;
				bottom: 0;
				transform: translate(-50%, 0);
				display: flex;
				flex-flow: column nowrap;
				width: min(72.0cqw, 15.0rem);
				object-fit: cover;
				background-color: var(--c-text);
				border-radius: 1.0rem;
				overflow: clip;
				filter: var(--shadow2);
				transition: 0.1s;

				&:nth-of-type(2):hover {
					opacity: 0;
				}
			}
		}

		.name {
			display: flex;
			flex-flow: column nowrap;
			justify-items: center;
			justify-content: center;
			align-items: center;
			align-content: center;
			gap: 1.0cqh;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding-block: 0;
			font-size: clamp(1.0rem, 9.0cqw, 1.32rem);
			/* background-color: aqua; */

			* {
				font-weight: 500;
			}

			small {
				font-size: min(6.0cqw, 1.08rem);
				color: var(--color2);
			}
		}


		.text {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: flex-start;
			width: 100%;
			height: 100%;
			margin: 0 auto;
			line-height: 1.5;
			font-size: clamp(0.84rem, 7.0cqw, 1.08rem);
			padding: 2.0rem 6.0cqw;
			/* background-color: aqua; */

			&::before {
				content: '';
				position: absolute;
				top: 0;
				display: inline-block;
				width: 3.0rem;
				height: 5px;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				background-color: var(--color1);
				border-radius: 5px;
			}
		}

		--shift : -3px;

		&::before {
			border-bottom: 30px solid transparent;
			border-left: 30px solid var(--color1);
			content: '';
			display: block;
			position: absolute;
			top: var(--shift);
			left: var(--shift);
		}

		&::after {
			border-left: 30px solid transparent;
			border-bottom: 30px solid var(--color1);
			content: '';
			display: block;
			position: absolute;
			bottom: var(--shift);
			right: var(--shift);
		}
	}
}

/* ---------------------------------------------
	リスト：ゲームダウンロード
--------------------------------------------- */

.play {
	display: grid;
	gap: 3.0cqw;
	grid-template-columns: repeat(auto-fill, minmax(9.0rem, 1fr));
	grid-template-rows: unset;

	li {
		display: grid;
		gap: 0;
		grid-template-columns: unset;
		grid-template-rows: auto 25% 30%;
		flex-flow: column nowrap;
		align-items: center;
		align-self: center;
		position: relative;
		background-color: transparent;
		background-image: linear-gradient(var(--color1) 65%, var(--c-back));
		border: var(--btn-border-W) solid var(--black);
		border-radius: 1.0rem;
		overflow: clip;
		filter: var(--shadow);
		transform: translateZ(0);
		transition: 0.18s ease-in-out;
		aspect-ratio: var(--aspect-1-1);
		border: none;

		a,
		div {
			width: 100%;
			height: 100%;
		}

		a {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		div {
			display: flex;
			flex-flow: column wrap;
			justify-content: center;
			justify-items: center;
			align-items: center;
			line-height: 1;
			font-size: clamp(1.12rem, 9.0cqw, 1.5rem);
		}

		.play-o,
		.play-d,
		.play-b {
			flex-flow: row nowrap;
			align-items: center;
		}

		.play-o {
			display: flex;
			flex-flow: column wrap;
			justify-content: flex-end;
			align-items: center;
			align-self: center;
			background-color: var(--color1);
			/* border-top: var(--btn-border-W) solid var(--black); */
			/* border-inline: var(--btn-border-W) solid var(--black); */
			/* border-radius: 1.0rem 1.0rem 0 0; */

			img {
				display: block;
				width: 30%;
				aspect-ratio: var(--aspect-1-1);
				object-fit: scale-down;
			}
		}

		.play-d {
			justify-content: center;
			align-items: center;
			background-color: var(--color1);
			font-weight: 600;
			/* border-inline: var(--btn-border-W) solid var(--black); */
		}

		.play-b {
			display: inline-flex;
			justify-content: center;
			/* border-bottom: var(--btn-border-W) solid var(--black); */
			/* border-inline: var(--btn-border-W) solid var(--black); */
			/* border-radius: 0 0 1.0rem 1.0rem; */

			span {
				font-family: var(--fonts);
				font-weight: 700;
				padding: 0 0 0 0.5rem;
			}
		}

		&:hover {
			/* opacity: 0.75; */
			transform: translateY(-0.5rem);
		}
	}
}

/* ---------------------------------------------
	リスト：翻訳版
--------------------------------------------- */

.trans {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	li {
		position: relative;
		width: 100%;
		height: 12.0rem;
		font-size: clamp(1.0rem, 2.0cqw, 1.5rem);
		overflow: clip;
		filter: var(--shadow);
		transform: translateZ(0);
		transition: 0.18s ease-in-out;
		border-radius: 0.5rem;

		a,
		.trans-b {
			width: 100%;
			height: 100%;
		}

		a {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		.trans-b {
			display: flex;
			flex-flow: column wrap;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			/* line-height: 1.5; */
			background-image: unset;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: cover;
			background-clip: content-box;

			p {
				z-index: 1;
				color: var(--white);
				margin: 0 0 0.5rem;
				padding: 0.25rem 1.0rem;
				background-color: var(--black-75);
			}
		}

		&:hover {
			transform: translateY(-0.5rem);
		}
	}
}

/* ---------------------------------------------
	リスト：ラベル表示
--------------------------------------------- */

.game-label {
	display: flex;
	gap: 1.0cqw;
	flex-flow: row wrap;
	justify-content: center;

	li {
		width: clamp(5.1rem, 21.0cqw, 6.0rem);
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		justify-items: center;
		align-items: center;
		aspect-ratio: var(--aspect-1-1);
		background-color: var(--black);
		border-radius: 50%;
		overflow: hidden;
		white-space: nowrap;
		container-type: unset;

		img {
			object-fit: cover;
		}
	}
}

/* ---------------------------------------------
	リスト：クレジット欄
--------------------------------------------- */

.credit {
	display: grid;
	gap: 2.0cqh 0.5cqw;
	grid-template-columns: repeat(auto-fill, minmax(12.0rem, 1fr));

	li {
		display: inline-flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		text-align: start;
		font-size: clamp(0.84rem, 6.0cqw, 1.0rem);

		a {
			display: block;
			letter-spacing: 0;
			text-indent: 0;

			&::before {
				display: inline-flex;
				justify-content: flex-start;
				align-items: flex-start;
				align-content: flex-start;
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				content: "\f35d";
				margin: 0 0.36rem 0 0;
				/* color: var(--my-text-color); */
				width: 1.0rem;
				height: 1.0rem;
			}
		}
	}
}

/* ---------------------------------------------
	テーブル：ゲーム情報
--------------------------------------------- */

.data {
	border-collapse: separate;
	border-spacing: 0 1.5cqh;
	position: relative;

	tr {
		height: max(3.0cqh, 2.4rem);

		th {
			width: max(8.0cqw, 8.4rem);
			padding-inline: 4.0cqw;
			font-weight: 700;
			border-right: 0.25rem solid var(--color1);
			position: sticky;
			left: 0;
			text-align: justify;
			text-align-last: justify;
		}

		td {
			width: auto;
			font-weight: 500;
			padding-inline: 1.0rem;
		}
	}
}

/* ---------------------------------------------
	テーブル：更新履歴
--------------------------------------------- */

.update {
	border-collapse: collapse;
	color: var(--c-text);

	tr {
		font-size: calc(var(--font-s) * 0.9);
		line-height: 1.8;

		&:nth-child(even) td {
			background-color: var(--color4);
		}

		th {
			width: 100%;
			background-color: var(--color1);
			text-align-last: center;
			letter-spacing: 0.3cqw;
			font-family: var(--fonts2);
			font-weight: 400;
		}

		td {
			background-color: transparent;
		}

		th,
		td {
			padding-block: 1.25cqh;
			padding-inline: 1.0rem;
		}

		.date,
		.version {
			width: 6.0cqw;
			max-width: 8.0rem;
			text-align-last: center;
		}
	}
}

/* ---------------------------------------------
	ページトップボタン
	参考：https://cotodama.co/pagetop/
--------------------------------------------- */

#page_top {
	--page-top: 6.0cqw;
	--max-width: 5.0rem;

	min-width: calc(var(--max-width) / 2);
	width: var(--page-top);
	max-width: var(--max-width);
	aspect-ratio: var(--aspect-1-1);
	position: fixed;
	right: calc(var(--page-top) - calc(var(--page-top) * 2));
	bottom: var(--page-top);
	background-color: var(--color1);
	z-index: 5;
	container-type: inline-size;
	transition: .12s ease-in-out;

	a {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		font-size: clamp(1.0rem, 50.0cqw, 4.0rem);

		&::before {
			font-family: 'Font Awesome 6 Free';
			font-weight: 900;
			content: '\f102';
			color: var(--white);
		}
	}

	&:hover {
		transform: translateY(-1.0rem);
	}
}

/* ---------------------------------------------
	ミニフッター
--------------------------------------------- */

.totop {
	width: 100%;
	height: clamp(3.0rem, 15.0cqh, 9.0rem);
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	justify-items: center;
	align-items: center;
	line-height: 1.0;
	font-size: min(6.0cqw, 2.1rem);

	a {
		display: inline-flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		width: 2.0rem;
		height: 2.0rem;
		transition: .1s ease-in-out;
		font-size: inherit;

		&:hover {
			transform: translateY(-0.5rem);
		}
	}
}

/* ---------------------------------------------
	ヘッダー＆フッター
---------------------------------------------*/

header,
footer {
	display: flex;
	height: min(25vh, 12.0rem);
}

header {
	flex-flow: row nowrap;
	align-items: flex-end;
}

footer {
	gap: 0.75rem;
	flex-flow: column nowrap;
	justify-content: center;
	justify-items: center;
	align-content: center;
	align-items: center;
	text-align: center;
	color: var(--c-text);
	/* padding-inline-end: 1.0rem; */
	/* padding-inline-start: 1.0rem; */

	a:hover {
		color: var(--c-back);
	}

	img {
		display: block;
		width: max(50.0cqw, 18.0rem);
		height: min(50.0cqh, 6.0rem);
		object-fit: scale-down;
	}
}

/* ---------------------------------------------
	アニメーション
		参考：https://moshashugyo.com/media/animate-on-scroll
		参考：https://b-risk.jp/blog/2021/01/anim-reference/
--------------------------------------------- */

.u-fade-type-up {
	opacity: 0;
}

.u-fade-type-up.is-active {

	.popup.is-animated {
		animation: popup 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	opacity: 1;
}

@keyframes popup {
	0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
	}

	100% {
		transform: translateY(0) scale(1.0);
	}

	80%,
	100% {
		opacity: 1;
	}
}

@keyframes fadeup {
	0% {
		transform: translateY(3.0rem);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ぬるっと文字 */
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
	display: block;
}

.matrix .bg-wrap {
	overflow: hidden;
	opacity: 0;
}

.matrix .bg-wrap+.bg-wrap {
	margin-top: 10px;
}

.matrix .bg-wrap .inn {
	opacity: 0;
	transform: matrix(1, 0, 0, 1, 0, 100);
	transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.is-animated .bg-wrap {
	opacity: 1;
}

.matrix.is-animated .bg-wrap .inn {
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
}

/* 上から登場 */
/* @keyframes fade-in1 {
	0% {
		opacity: 0;
		transform: translate3d(0, -3rem, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	0% {
		transform: translateY(30px);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
} */

/* ---------------------------------------------
	罫線
--------------------------------------------- */

/* 区切り線 */

.grayline {
	margin: 1.5rem 0;
	background-color: var(--color4);
	opacity: 0.5;
}

/* ギザギザ
	参考：https://coliss.com/articles/build-websites/operation/css/css-jagged-border-by-somestuffer.html */
.jagged-border {
	position: relative;
	width: 100%;
	height: 20px;
}

.jagged-border:before {
	content: "";
	display: block;
	position: absolute;
	top: -10px;
	width: 100%;
	height: 10px;
}

.lightgray-bg {
	background: var(--color1);
}

.lightgray-bg:before {
	background: -webkit-linear-gradient(45deg, transparent 33.333%, var(--color1) 33.333%, var(--color1) 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, var(--color1) 33.333%, var(--color1) 66.667%, transparent 66.667%);
	background: linear-gradient(45deg, transparent 33.333%, var(--color1) 33.333%, var(--color1) 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, var(--color1) 33.333%, var(--color1) 66.667%, transparent 66.667%);
	background-size: 20px 40px;
}

/* ---------------------------------------------
	スピナー：参考　https://code-sq.com/loading_screen/　https://epic-spinners.epicmax.co/#/）
--------------------------------------------- */

.loading {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background-color: rgb(0, 0, 0, 0.5);
	z-index: 9999;
	transition: all 0.2s linear;
}

.looping-rhombuses-spinner {
	width: calc(15px * 4);
	height: 15px;
	position: relative;
}

.looping-rhombuses-spinner .rhombus {
	height: 15px;
	width: 15px;
	background-color: var(--color1);
	left: calc(15px * 4);
	position: absolute;
	margin: 0 auto;
	border-radius: 2px;
	transform: translateY(0) rotate(45deg) scale(0);
	animation: looping-rhombuses-spinner-animation 2500ms linear infinite;
}

.looping-rhombuses-spinner .rhombus:nth-child(1) {
	animation-delay: calc(2500ms * 1 / -1.5);
}

.looping-rhombuses-spinner .rhombus:nth-child(2) {
	animation-delay: calc(2500ms * 2 / -1.5);
}

.looping-rhombuses-spinner .rhombus:nth-child(3) {
	animation-delay: calc(2500ms * 3 / -1.5);
}

@keyframes looping-rhombuses-spinner-animation {
	0% {
		transform: translateX(0) rotate(45deg) scale(0);
	}

	50% {
		transform: translateX(-233%) rotate(45deg) scale(1);
	}

	100% {
		transform: translateX(-466%) rotate(45deg) scale(0);
	}
}

/* ---------------------------------------------
	背景色別指定
--------------------------------------------- */

/* 明るい背景 */
body[class="style-light"] {

	div,
	p,
	ul,
	table {
		font-weight: 500;
	}

	.character {
		li {
			background-color: var(--white);
		}
	}

	.play {
		li {
			.play-b {
				background-color: var(--white);
			}
		}
	}

	.update {
		tr {
			&:nth-child(odd) td {
				background-color: color-mix(in srgb, var(--color4) 10%, transparent);
			}

		}
	}
}

/* 暗い背景 */
body[class="style-dark"] {

	div,
	div p,
	ul li {
		font-weight: 400;
	}

	.character {
		li {
			background-color: var(--color3);
		}
	}

	.play {
		li {
			.play-b {
				background-color: var(--color3);
			}
		}
	}

	.update {
		tr {
			&:nth-child(odd) td {
				background-color: color-mix(in srgb, var(--c-back) 75%, black);
			}
		}
	}
}