@charset "utf-8";

:root {

}

@media screen and (max-width:480px) {
	:root {

	}
}

@media screen and (min-width:481px) and (max-width: 768px) {
	:root {

	}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

	}
}

@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

	}
}

@media screen and (min-width:1440px) {
	:root {

	}
}




div#system p,
div#system ul {
	margin: 0 0 var(--Size_24);
	padding: var(--Size_12);
	width: 100%;
	background: var(--Color_1D040);
	border: 1px var(--Color_A020) solid;
	border-radius: var(--Border-radius_S);
	backdrop-filter: blur(12px);
}

div#system p sup {
	padding-right: var(--Size_06);
}





/* コンテンツ カテゴリー */

p.wel strong {
	display: inline-block;
	margin: var(--Size_02) var(--Size_06) var(--Size_02) 0;
	padding: var(--Size_04) var(--Size_08);
	font-size: var(--Size_08);
	color: var(--Color_5A);
	line-height: 1;
	background-color: var(--Color_A);
	border-radius: var(--Size_40);
}

p.wel strong::before {
	content: '# ';
}


ul.category {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: row;
	gap: var(--Size_10);
	margin: 0 0 var(--Size_12);
}

ul.category li {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--Size_02) var(--Size_08);
	color: var(--Color_1D);
	background: var(--Color_A);
	border-radius: var(--Border-radius_L);
}





/* 注意事項 */

ul.mamotte {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	gap: var(--Size_06);
}

ul.mamotte li {
	position: relative;
	margin: 0 0 0 var(--Size_18);
}

ul.mamotte li::before {
	content: 'J';
	position: absolute;
	top: .2rem;
	left: -1.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: var(--Size_12);
	height: var(--Size_12);
	color: var(--Color_1D060);
	font-size: var(--Size_08);
	line-height: 1;
	background: var(--Color_A100);
	border-radius: var(--Border-radius_L);
}














/* コンテンツ テーブル */

div#system table {
	margin: 0 0 var(--Size_12);
	width: 100%;
	border-radius: var(--Border-radius_S);
	backdrop-filter: blur(12px);
}

div#system table tbody tr th {
	padding: var(--Size_06);
	text-align: left;
	vertical-align: middle;
	background: var(--Color_1D040);
	border: 1px var(--Color_A020) solid;
}

div#system table tbody tr th sup {
	padding-left: var(--Size_06);
}

div#system table tbody tr td {
	padding: var(--Size_06);
	text-align: right;
	vertical-align: middle;
	background: var(--Color_1D040);
	border: 1px var(--Color_A020) solid;
}

@media screen and (max-width: 768px) {
	div#system table tbody tr {
		display: flex;
		justify-content: space-between;
		margin: 0 0 1vw;
		background: var(--Color_1D040);
		border: 1px var(--Color_A020) solid;
	}
	div#system table thead tr {
		display: none;
	}
	
	div#system table tbody tr th,
	div#system table tbody tr td {
		padding: var(--Size_06);
		background: var(--Color_1D000);
		border: none;
	}
}