@charset "utf-8";

/* ===========================================
	home
============================================== */
.under_ttl_inner {
	justify-content: space-between;
	align-items: center;
}

.cat_ttl {
	font-weight: 500;
	font-size: 1rem;
	color: var(--navy_color);
}

.under_cont_wrap {
	position: relative;
	z-index: 1;
}

.under_cont_wrap,
.cat_wrap {
	align-items: center;
	column-gap: 2.667rem;
}

.cat_inner,
.archive_wrap {
	align-items: center;
	column-gap: 1.334rem;
}

.select_wrap {
	position: relative;
}

.select_wrap::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0.667rem;
	bottom: 0.45rem;
	margin: auto;
	width: 0.7334rem;
	height: 0.7334rem;
	border-right: solid 1px var(--white_color);
	border-bottom: solid 1px var(--white_color);
	transform: rotate(45deg);
	z-index: -1;
}

.select_wrap::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--navy_color);
	z-index: -2;
}

.select_wrap > select {
	padding-right: 0.8rem;
	padding-left: 1rem;
	width: 10rem;
	height: 2.5rem;
	color: var(--white_color);
}

.article_area {
	position: relative;
}

.article_area .green_logo {
	top: 8.8rem;
	right: -13.4667rem;
}

.article_area .yellow_logo {
	bottom: 8.1334rem;
	left: -11.4667rem;
}

/* ============
	responsive
================ */
@media screen and (max-width: 1439px) {
	.under_ttl {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 1180px) {
	.under_ttl_inner {
		flex-direction: column;
		row-gap: 4rem;
	}

	.under_cont_wrap {
		width: 100%;
		justify-content: flex-end;
	}
}

@media screen and (max-width: 1024px) {
	.under_cont_wrap,
	.cat_wrap,
	.cat_inner,
	.archive_wrap {
		gap: 1rem;
	}

	.cat_ttl,
	.select_wrap > select {
		font-size: 0.8667rem;
	}

	.article_area .green_logo {
		top: -11.6rem;
		right: -6.7334rem;
		width: 13.5334rem;
		height: 13.4667rem;
		z-index: 0;
	}

	.article_area .yellow_logo {
		bottom: -2rem;
		left: -5.0667rem;
		width: 10.2rem;
		height: 10.1334rem;
	}
}

@media screen and (max-width: 940px) {
	.under_cont_wrap {
		justify-content: center;
		align-items: flex-start;
	}

	.cat_wrap,
	.archive_wrap {
		flex-direction: column;
		align-items: flex-start;
		width: calc(100% - 0.334rem);
	}

	.cat_inner {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.select_wrap,
	.select_wrap > select {
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.under_cont_wrap {
		margin-bottom: 2.667rem;
	}
}

/* ===========================================
	member
============================================== */
.under_ttl_area {
	position: relative;
}

.under_ttl_area .yellow_logo,
.under_ttl_area .green_logo,
.under_ttl_area .taiko_img {
	z-index: 1;
}

.under_ttl_area .yellow_logo {
	top: 10.667rem;
	right: 38.5334rem;
}

.under_ttl_area .green_logo {
	top: 1.8rem;
	right: 17.7334rem;
}

.under_ttl_area .taiko_img {
	top: 10.667rem;
	right: -9.4667rem;
}

.player_area,
.staff_area {
	position: relative;
}

.player_ttl_wrap {
	margin-left: -6.667rem;
	padding-top: 6.667rem;
	padding-bottom: 6.667rem;
	padding-left: 6.667rem;
	width: calc(100% - 5rem);
	border-radius: 0 3.2rem 3.2rem 0;
}

.player_ttl_h2 {
	color: var(--white_color);
	transform: skew(-10deg);
}

.post-type-archive-member .post_wrap {
	position: relative;
	gap: 3.334rem;
	margin-top: -3.334rem;
	margin-bottom: 6.667rem;
	z-index: 2;
}

.player_link,
.post-type-archive-member .no_post {
	aspect-ratio: 313 / 455;
}

.player_link{
	width: 100%;
	height: 100%;
}

.player_link > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-type-archive-member .no_post {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--white_color);
	border: solid 1px var(--green_color);
}

.post-type-archive-member .no_post > p {
	font-weight: 700;
	font-size: 1.334rem;
}

.player_area .green_logo {
	display: none;
}

.player_area .yellow_logo {
	bottom: 9.667rem;
	left: -18rem;
}

.staff_area .player_cont_wrap {
	padding-top: 3.4667rem;
}

.staff_area .green_logo {
	top: 13.7334rem;
	right: -20rem;
}

/* ============
	responsive
================ */
@media screen and (max-width: 1439px) {
	.player_ttl_wrap {
		margin-left: calc(50% - 50vw + 4rem);
		padding-left: calc(50vw - 50% - 4rem);
	}
}

@media screen and (max-width: 1180px) {
	.under_ttl_area .yellow_logo,
	.under_ttl_area .green_logo {
		display: none;
	}
}

@media screen and (max-width: 1024px) {
	.under_ttl_area .taiko_img {
		top: 6.5334rem;
		right: -2.8rem;
		width: 13.7334rem;
		height: 9.9rem;
	}

	.player_ttl_wrap {
		padding-top: 2.667rem;
		padding-left: 0;
		padding-bottom: 8rem;
		width: calc(100vw - 8rem);
		border-radius: 1.2667rem 1.2667rem 0 0;
		background: linear-gradient(135deg, #00a74d, #32d250 40%, #c3e62d 95%);
	}

	.player_ttl_h2 {
		text-align: center;
	}

	.post-type-archive-member .post_wrap {
		margin-top: -5.334rem;
		margin-bottom: 5.334rem;
	}

	.player_area .green_logo {
		display: block;
		top: auto;
		right: -6.667rem;
		bottom: 4.667rem;
	}

	.player_area .yellow_logo {
		right: 4rem;
		bottom: -2.667rem;
		left: auto;
	}

	.staff_area .green_logo {
		top: auto;
		right: auto;
		bottom: -7.4rem;
		left: -6.5334rem;
		width: 10.2rem;
		height: 10.1334rem;
	}
}

@media screen and (max-width: 768px) {
	.post-type-archive-member .under_ttl_inner {
		padding-bottom: 4rem;
	}

	.player_ttl_wrap {
		margin-left: calc(50% - 50vw + 2rem);
		width: calc(100vw - 4rem);
	}

	.post-type-archive-member .post_wrap {
		gap: 1.334rem 0.6rem;
	}
}

@media screen and (max-width: 640px) {
	.post-type-archive-member .post_wrap {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.player_ttl_wrap {
		margin-left: calc(50% - 50vw + 1.334rem);
		width: calc(100vw - 2.667rem);
	}
}