@charset "utf-8";

/* ============  一覧ページ ==============*/
.player {
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
}

.player-list {
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, 32%);
	grid-gap: 1%;
}

.player-list li {
	width: 100%;
	box-sizing: border-box;
}

.player-list li h3 a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	line-height: 1.34;
	padding: 0.75rem 0;
	font-size: 120%;
	font-weight: bold;
}

.player-list li h3 a span {
	font-size: 70%;
	font-weight: 900;
}

.image a {
	width: 100%;
	display: block;
}

.image img {
	width: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 4;
}

.player-list .image {
	width: 100%;
	/* position: relative; */
	box-sizing: border-box;
	display: flex;
	background-color: #fff;
	filter: drop-shadow(1px 1px 6px #ccc);
	/* padding-left: 10%; */
}

.player-list .image span {
	/* position: absolute; */
	left: 0;
	display: block;
	/* width: 146%; */
	border-right: 2px solid;
	border-image: linear-gradient(34deg, #003dff 0%, #f9ff00 50%, #ff0000 100%);
	border-image-slice: 1;
	text-transform: uppercase;
	background: #fff;
	text-align: right;
	font-size: 0.6rem;
	font-weight: bolder;
	line-height: 1.1;
	writing-mode: vertical-rl;
	transform: scalex(1.25);
	margin-left: 5%;
	/* transform-origin: left top; */
	/* transform: rotate(90deg) translate(-100%, -100%); */
}

@media screen and (min-width: 640px) {
	.player-list {
		grid-template-columns: repeat(auto-fit, 24%);
	}

	.player-list .image span {
		font-size: 1rem;
	}
}

/* ============  プロフページ ==============*/
.prof-content {
	margin: 1rem 0 2rem;
	padding: 0 1rem;
}

.k-dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

.k-dl li {
	background: #fff;
	border-radius: 0.75rem;
	width: 44%;
	padding: 1.5rem 0.5rem;
	filter: drop-shadow(4px 4px 1px #eee) drop-shadow(-2px -1px 1px #eee);
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.25;
	font-weight: bolder;
	margin-top: 0.75rem;
}

.small {
	font-size: 90%;
	display: block;
	padding-top: 0.5rem;
}

.result-list {
	width: 100%;
	font-size: 0.75rem;
}

.result-disc {
	margin-top: 2rem;
}

.result-list dt,
.result-list .result-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #fff;
}

.result-list dt {
	font-weight: bold;
	border-bottom: 1px solid #fff;
	text-align: center;
}

.result-row {
	text-align: center;
}

.day-flex span {
	display: flex;
	justify-content: center;
}

.inner_page {
	width: 100%;
}

.result {
	background: linear-gradient(to top, #d9e2ff 0%, #e8eefa 50%, #fafbff 100%);
	margin-top: 10%;
	padding: 0 1rem;
	padding-bottom: 10%;
	margin-top: 10%;
}

.result-name {
	display: flex;
	text-align: center;
	flex-direction: column;
	line-height: 1.4;
	font-weight: 600;
}

.result-name span {
	font-size: 1.5rem;
}

.result-head {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 2px solid;
	border-image: linear-gradient(34deg, #003dff 0%, #f9ff00 50%, #ff0000 100%);
	border-image-slice: 1;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.point {
	display: flex;
	text-align: center;
	flex-direction: column;
	line-height: 1.3;
	font-size: 1.5rem;
	font-weight: bold;
}

.point span {
	font-size: 0.75rem;
}

.result-head img {
	width: 5rem;
}

.player-single {
	width: 100%;
	box-sizing: border-box;
	padding: 0 1rem;
}

.player-box {
	display: flex;
	justify-content: space-between;
	line-height: 1.4;
}

.player-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.player-box .image {
	width: 36.5%;
}

.disc h1 span {
	font-size: 1.25rem;
	font-weight: bold;
	margin-left: 0.25rem;
}

.player-box .disc {
	width: 60%;
}

.prof-catch {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 0.5rem;
	filter: drop-shadow(4px 4px 1px #eee) drop-shadow(-2px -1px 1px #eee);
	padding: 0.5rem 0.5rem 0.75rem 1rem;
	font-size: 125%;
	line-height: 1.3;
	font-weight: bold;
}

.country {
	display: flex;
	align-items: center;
	font-size: 1rem;
	padding: 1rem 0 0.5rem;
}

.country img {
	width: 38%;
	margin-right: 0.5rem;
	border: 1px solid #bbb;
}

.romaji {
	display: block;
	font-weight: bold;
}

.nickname {
	display: block;
	font-size: 110%;
}

.bold {
	font-size: 1rem !important;
	font-weight: 800;
	margin-bottom: 0.25rem;
	padding-top: 0.5rem;
}

/* ======== リンクバナーエリア修正(選手ページのみ) =============*/

.gBanner {
	width: 100%;
	box-sizing: border-box;
	padding: 0 1rem;
}

.link-wrap p {
	font-size: 10px;
	font-weight: bolder;
}

.gBanner ul,
.SlBanner ul,
.GeBanner ul {
	display: grid;
	justify-content: space-between;
	grid-gap: 10px;
}

.gBanner li,
.SlBanner li,
.GeBanner li {
	width: fit-content;
	margin: auto;
}

/* Gold Sponsor（gBanner） */

.gBanner ul {
	grid-template-columns: repeat(auto-fit, 48%);
}

.gBanner ul img {
	width: 100%;
	object-fit: contain;
}

.gDummy {
	width: 44vw;
	height: 44vw;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px dotted #333;
}

/* Silver Sponsor（SlBanner） */

.SlBanner ul {
	grid-template-columns: repeat(auto-fit, 29%);
}

.SlBanner ul img {
	width: 25vw;
	height: 25vw;
	object-fit: contain;
}

.SlDummy {
	width: 27vw;
	height: 27vw;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px dotted #333;
}

/* General Sponsor（GeBanner） */

.GeBanner ul {
	grid-template-columns: repeat(auto-fit, 48%);
}

.GeBanner ul img {
	width: 80%;
	height: auto;
}

@media screen and (min-width: 720px) {
	.gBanner {
		margin: 0 auto;
	}

	.gDummy {
		width: 34vw;
		height: 34vw;
	}
}

@media screen and (min-width: 980px) {
	.SlBanner {
		width: 88%;
		margin: 0 auto;
	}

	.SlDummy {
		width: 250px;
		height: 250px;
	}

	.GeBanner {
		width: 68%;
		margin: 0 auto;
	}
}

@media screen and (min-width: 640px) {
	.gBanner {
		margin: 0 auto;
		max-width: 900px;
		padding: 0;
		box-sizing: border-box;
	}

	.gBanner ul {
		grid-template-columns: repeat(auto-fit, 28%);
		grid-gap: 4rem;
		padding: 0 1rem;
	}

	.gBanner ul img {
		width: 100%;
		height: unset;
	}

	.gDummy {
		width: 100%;
		height: unset;
	}

	.link-wrap p {
		font-size: 0.75rem;
		font-weight: bolder;
	}
}

.player-box {
	background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%), url(../img/logo-bg.png);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (min-width: 640px) {
	.player-box {
		background-size: 75%;
		background-position: top 10% center;
	}
}

.player .ranking_text {
	margin-top: 2rem;
}

.waku {
	width: 50%;
	margin: 2rem auto;
	text-align: center;
	background: linear-gradient(90deg, #edcf22 0%, #fff3b8 50%, #bfa22e 100%);
	color: #fff;
	font-size: 2rem;
}

.waku-b {
	background: #fff;
	border: 2px solid;
	border-image: linear-gradient(66.48deg, rgba(255, 0, 0, 0.47) 30.32%, rgba(255, 187, 0, 0.47) 35.34%, rgba(244, 255, 39, 0.47) 41.2%, rgba(127, 255, 0, 0.47) 46.9%, rgba(21, 255, 0, 0.47) 52.76%, rgba(0, 77, 255, 0.47) 58.89%, rgba(205, 0, 236, 0.47) 64.33%, rgba(255, 0, 187, 0.47) 69.68%);
	border-image-slice: 1;
	color: #000;
}

.ent-under {
	margin: 3rem auto 0rem !important;
}

.sougou {
	padding: 0 1rem;
	width: 100%;
	max-width: fit-content;
	/* margin: 0 auto; */
	margin-left: auto;
}

.player-list.player-list-special {
	display: flex;
	grid-gap: 6%;
}

.sensyu-insta a {
	display: flex;
	font-size: 2.7vw;
	align-items: center;
	text-decoration: underline;
	line-height: 3;
}

.sensyu-insta img {
	margin: 0 0.5rem;
	width: 20%;

}

@media screen and (min-width: 640px) {
	.country img {
		width: 8%;
	}

	.player-list.player-list-special {
		grid-template-columns: repeat(auto-fit, 24%);
		max-width: 500px;
		margin: 0 auto;
	}

	.sougou {
		padding: 0 8rem;
	}

	.sensyu-insta a {
		font-size: 1.0vw;
	}

	.sensyu-insta img {
		margin: 0 0.5rem;
		width: 20%;
		max-width: 2.25rem;
	}


}


.player-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, 32%);
	grid-gap: 1%;
	grid-auto-rows: auto;
	padding-bottom: 2rem;
}

h2.cont_titile-sBanner {
	display: none;
}

@media screen and (max-width: 640px) {
	.player {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 1%;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 5rem;
	}
}