:root {
	--main: #EA4974;
	--sub: #ffffff;
	--text: #3c3c42;
	--back: #f0f0f0;
}

html {
	font-size: 16px;
	font-family: "Cal Sans", "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.1rem;
	font-feature-settings: "palt";
	background:
		/* グラデーション（手前） */
		linear-gradient(176deg, #de2a35 0%, #950d14 14%, transparent 14.1%, transparent 100%),
		linear-gradient(176deg, transparent 0%, transparent 86%, #de2a35 86.1%, #950d14 100%),
		/* ドットパターン（背後） */
		radial-gradient(circle, #888 1px, transparent 1.1px);
	background-size: 100% 100%, 100% 100%, 20px 20px;
	background-repeat: no-repeat, no-repeat, repeat;
	background-attachment: fixed, fixed, fixed;
	background-color: #f5f5f5;
}

body {
	margin: 0;
	padding: 0;
	color: var(--text);
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	width: 100%;
	height: 120px;
	filter: drop-shadow(4px 4px 4px rgba(0, 17, 114, 0.2));
}

.header_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 860px;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 12px 16px;
	margin-top: 12px;
}

.header_inner a {
	height: 100%;
}

.header_inner img {
	height: 100%;
}

.header .titleimg {
	margin: 0 !important;
}



@media screen and (max-width: 970px) {
	.main {
		width: 645px;
	}
}

.main {
	box-sizing: border-box;
	padding: 140px 0 16px 0;
	margin: 0 auto 0 auto;
	max-width: 1132px;
}

.player_list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.player_box {
	position: relative;
	font-size: 1.2rem;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.player_box a.mainlink {
	position: absolute;
	width: 320px;
	transition: .2s;
	cursor: pointer;
}
.player_box img.avator {
	width: 100%;
	filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.24));
}

.player_box.hover a.mainlink {
	width: 340px;
}


.live {
	position: absolute;
	left: 2px;
	top: 0px;
	color: white;
	padding: 2px 8px;
	filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.24));
}

.live::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 8px;
	background: #de2a35;
	transform: skewX(-15deg);
}

.player_bottom {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 240px;
	padding-bottom: 16px;
	z-index: 100;
	filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.24));
}

.player_bottom img.icon {
	position: absolute;
	box-sizing: border-box;
	width: 90px;
	border-radius: 16px;
	/* border: 8px solid #bb1313; */
}

.name_box {
	position: relative;
	width: 154px;
	padding: 2px 14px 4px 10px;
	padding-left: calc(90px + 6px);
	border-radius: 8px;
}

.name_box::before {
	content: "";
	position: absolute;
	margin-left: 20px;
	inset: 0;
	z-index: -1;
	border-radius: 8px;
	background: linear-gradient(to bottom,
			#de2a35 0%,
			#de2a35 60%,
			#ffffff 60%,
			#ffffff 100%);
	transform: skewX(-15deg);
}

.name {
	color: white;
	text-wrap: nowrap;
}

.inner_bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.jimusho {
	font-size: 0.9rem;
	font-weight: 500;
}

.sns {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
}

.sns_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #363232;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s cubic-bezier(.34, 1.56, .64, 1);
}

.sns_btn:hover {
	transform: scale(1.12);
}

.sns_btn svg {
	width: 16px;
	height: 16px;
	fill: rgba(255, 255, 255, 0.8);
	transition: fill 0.2s ease;
}

.sns_btn:hover svg {
	fill: #fff;
}


.footer {
	width: 100%;
	height: 160px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: 500;
	z-index: 100;

	bottom: 0;
	image-rendering: pixelated;
	image-rendering: -webkit-crisp-edges;
	image-rendering: -moz-crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}

.footer_inner {
	margin-top: 60px;
}

.footer a {
	display: inline-block;
	color: white;
}