@charset "utf-8";

/* ===========================================
	common
============================================== */
.article_area {
	padding-top: 6.4667rem;
	padding-bottom: 7.8rem;
}

.article_ttl_wrap {
	position: relative;
}

.post_date_wrap,
.post_cat_wrap {
	column-gap: 1.334rem;
}

.post_date_wrap {
	position: relative;
	align-items: center;
	margin-bottom: 3rem;
	z-index: 1;
}

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

.post_cat_wrap {
	flex-wrap: wrap;
	row-gap: 0.667rem;
}

.post_cat {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 8rem;
	height: 1.334rem;
	font-weight: 500;
	font-size: 0.8667rem;
	color: var(--white_color);
	line-height: 1;
	background-color: var(--navy_color);
}

.post_ttl_h1 {
	margin-bottom: 3rem;
	font-weight: 700;
	font-size: 2rem;
	color: var(--green_color);
	line-height: 1.5;
}

.article_ttl_wrap .taiko_img {
	top: -4.4667rem;
	right: -11.334rem;
}

.post_article {
	position: relative;
	z-index: 3;
}

.eye_catch_wrap {
	margin-bottom: 3.334rem;
	width: 100%;
}

.eye_catch_wrap > img {
	width: 100%;
	height: auto;
}

.post_article .yellow_logo1 {
	top: 0;
	left: -19.334rem;
}

.post_article .yellow_logo2 {
	bottom: 30rem;
	left: -20rem;
	z-index: -1;
}

.post_article .green_logo {
	top: 47.8rem;
	right: -20rem;
	z-index: -1;
}

/* ============
	responsive
================ */
@media screen and (max-width: 1439px) {
	.post_ttl_h1 {
		font-size: min(
			max(20px, calc(1.25rem + ((1vw - 3.75px) * 0.9398))),
			30px
		);
	}
}

@media screen and (max-width: 1024px) {
	.article_area {
		padding-top: 4rem;
		padding-bottom: 8rem;
	}

	.post_date_wrap,
	.post_cat_wrap {
		gap: 1rem;
	}

	.post_date_wrap,
	.post_ttl_h1 {
		margin-bottom: 2.667rem;
	}

	.post_date {
		font-size: 0.877rem;
	}

	.post_cat {
		height: 2rem;
	}

	.article_ttl_wrap .taiko_img,
	.post_article .yellow_logo {
		display: none;
	}

	.eye_catch_wrap {
		margin-bottom: 2.8rem;
	}

	.post_article .green_logo {
		top: calc(100% + 8.5rem);
		right: auto;
		left: -9rem;
		width: 10.2rem;
		height: 10.1334rem;
	}
}

@media screen and (max-width: 768px) {
	.article_area {
		padding-bottom: 5.4rem;
	}

	.post_date_wrap {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.667rem;
	}

	.post_article .green_logo {
		left: -7rem;
	}
}

@media screen and (max-width: 540px) {
	.post_cat_wrap {
		width: 100%;
	}

	.post_cat {
		width: calc(50% - 0.5rem);
	}
}

@media screen and (max-width: 480px) {
	.post_article .green_logo {
		left: -6.4rem;
	}
}

/* ===========================================
	post_nav_area
============================================== */
.post_nav_area {
	padding-top: 6rem;
}

.post_nav_inner {
	justify-content: center;
	align-items: center;
	column-gap: 4rem;
	width: 100%;
}

.post_prev_wrap,
.post_next_wrap {
	width: 7.9334rem;
}

.post_prev_wrap,
.home_back_wrap,
.post_next_wrap {
	position: relative;
}

.post_prev,
.home_back,
.post_next {
	justify-content: center;
	align-items: center;
	column-gap: 0.7334em;
	padding: 1rem;
	font-weight: 500;
	font-size: 0.9334rem;
	color: var(--navy_color);
}

.post_prev:hover,
.home_back:hover,
.post_next:hover {
	opacity: 0.6;
}

.post_prev {
	padding-left: 0;
}

.post_next {
	padding-right: 0;
}

.post_prev::before,
.post_next::after {
	position: absolute;
	top: 1rem;
	color: var(--green_color);
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 1rem;
}

.post_prev::before {
	content: '\f053';
	left: 0;
}

.post_next::after {
	content: '\f054';
	right: 0;
}

.home_back {
	text-align: center;
}

/* ============
	responsive
================ */
@media screen and (max-width: 1024px) {
	.post_nav_area {
		padding-top: 3.667rem;
	}

	.post_nav_inner {
		column-gap: 2.6rem;
	}

	.post_prev,
	.home_back,
	.post_next {
		column-gap: 7px;
		font-size: 0.8667rem;
	}

	.post_prev_wrap,
	.post_next_wrap {
		width: 6.334rem;
	}

	.post_prev {
		padding-right: 0;
	}

	.home_back {
		padding-right: 0;
		padding-left: 0;
	}

	.post_next {
		padding-left: 0;
	}
}

@media screen and (max-width: 480px) {
	.post_nav_inner {
		column-gap: 1rem;
	}
}

/* ===========================================
	player
============================================== */
.player_ttl_area {
	position: relative;
	padding-bottom: 6.667rem;
	z-index: 1;
}

.player_ttl_area::before {
	content: '';
	position: absolute;
	bottom: -9rem;
	left: 0;
	width: 100%;
	height: 46rem;
	background: linear-gradient(135deg, #c3e62d, #32d250 40%, #00a74d 80%);
	transform: skewY(-10deg);
	z-index: -1;
}

.player_ttl_wrap {
	position: relative;
	column-gap: 3.334rem;
	z-index: 2;
}

.player_photo_wrap {
	width: 33rem;
	height: 46.667rem;
}

.player_photo_wrap > img,
.uniform_number_wrap > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.player_article_cont {
	position: relative;
	align-items: flex-end;
	width: calc(100% - 33rem - 3.334rem);
}

.player_info_wrap {
	color: var(--white_color);
}

.uniform_number {
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-size: 10.667rem;
	color: var(--white_color);
}

.uniform_number::before {
	content: '';
}

.position_txt,
.name_sub_txt {
	font-size: 2rem;
}

.position_txt {
	margin-bottom: 1.8rem;
}

.name_txt {
	margin-bottom: 2.334rem;
	font-size: 4rem;
	text-align: left;
}

.name_sub_txt {
	margin-bottom: 4rem;
}

.player_insta_btn {
	align-items: center;
	column-gap: 1.334rem;
	margin-top: -2rem;
	font-size: 1.334rem;
	color: var(--white_color);
}

.player_insta_btn::before {
	content: '\f16d';
	font-family: 'Font Awesome 6 brands';
	font-weight: 900;
	font-size: 2rem;
}

.player_insta_btn:hover {
	opacity: 0.7;
}

.uniform_number_wrap {
	position: absolute;
	top: 10rem;
	right: 0;
	width: 16.1334rem;
	height: 16.667rem;
}

.player_ttl_area .green_logo {
	top: 12.7334rem;
	right: -12.1334rem;
	z-index: 1;
}

.profile_area {
	position: relative;
	padding-top: 4.5334rem;
	padding-bottom: 6.667rem;
	background-color: var(--white_color);
	z-index: 1;
}

.profile_area .green_logo {
	display: none;
}

.profile_inner {
	position: relative;
	justify-content: space-between;
	align-items: flex-start;
	z-index: 2;
}

.profile_table {
	width: calc(50% - 1.667rem);
}

.profile_table th,
.profile_table td {
	padding: 1.5rem 1.4rem;
	line-height: 2;
	text-align: left;
	border-bottom: solid 1px var(--black_color);
}

.profile_table td {
	font-weight: 500;
}

.profile_area .yellow_logo {
	top: 2.8rem;
	left: -11.4667rem;
	z-index: 1;
}

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

.related_news_ttl {
	margin-bottom: 3.334rem;
	font-size: 1.334rem;
	color: var(--green_color);
	letter-spacing: 0.05em;
	transform: skew(-10deg);
}

.related_news_area .post_wrap {
	margin-bottom: 0;
}

.related_news_area .green_logo {
	top: 4rem;
	right: -13.334rem;
	z-index: -1;
}

/* ============
	responsive
================ */
@media screen and (max-width: 1439px) {
	.player_photo_wrap {
		width: 34.4vw;
		height: 100%;
		aspect-ratio: 99 / 140;
	}

	.player_article_cont {
		width: calc(100% - 34.4vw - 3.334rem);
	}

	.uniform_number {
		font-size: min(
			max(100px, calc(6.25rem + ((1vw - 10.24px) * 14.4578))),
			160px
		);
	}

	.position_txt {
		font-size: min(
			max(15px, calc(0.9375rem + ((1vw - 10.24px) * 3.6145))),
			30px
		);
	}

	.name_txt {
		font-size: min(
			max(30px, calc(1.875rem + ((1vw - 10.24px) * 7.2289))),
			60px
		);
	}

	.name_sub_txt {
		font-size: min(
			max(13px, calc(0.8125rem + ((1vw - 10.24px) * 0.4819))),
			15px
		);
	}

	.player_insta_btn {
		column-gap: 0.9334rem;
		font-size: min(
			max(14px, calc(0.875rem + ((1vw - 10.24px) * 1.4458))),
			20px
		);
	}

	.player_insta_btn::before {
		font-size: 1.4rem;
	}

	.uniform_number_wrap {
		top: 13vw;
		width: 16.4vw;
		height: auto;
		aspect-ratio: 121 / 125;
	}
}

@media screen and (max-width: 1180px) {
	.player_ttl_area::before {
		height: 50vw;
	}

	.uniform_number {
		margin-bottom: 0;
	}

	.position_txt {
		margin-bottom: 0.9334rem;
	}

	.name_txt {
		margin-bottom: 1.4rem;
	}

	.name_sub_txt {
		margin-bottom: 2.667rem;
	}

	.player_insta_btn{
		margin-top: -1.267rem;
	}
}

@media screen and (max-width: 1024px) {
	.player_ttl_area {
		padding-bottom: 4rem;
	}

	.player_ttl_area::before {
		height: 30rem;
	}

	.player_ttl_wrap {
		align-items: flex-end;
	}

	.player_article_cont {
		width: calc(100% - 28vw - 3.334rem);
	}

	.player_photo_wrap {
		width: 28vw;
	}

	.player_article_cont {
		align-items: flex-start;
	}

	.uniform_number_wrap {
		position: static;
	}

	.player_ttl_area .green_logo {
		display: none;
	}

	.profile_area {
		padding-top: 2rem;
		padding-bottom: 8rem;
	}

	.profile_area .green_logo {
		display: block;
		top: -5rem;
		right: -5rem;
	}

	.profile_table th,
	.profile_table td {
		padding-right: 0;
		padding-left: 0;
		font-size: 0.9334rem;
	}

	.profile_table td {
		padding-right: 0.6rem;
		padding-left: 0.6rem;
	}

	.profile_area .yellow_logo {
		top: auto;
		bottom: -2.1334rem;
		left: -5.0667rem;
		width: 10.2rem;
		height: 10.1334rem;
	}
}

@media screen and (max-width: 840px) {
	.profile_inner {
		flex-direction: column;
	}

	.profile_table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0.667rem 0;
	}

	.profile_table th {
		width: 7.0667rem;
		text-align: center;
	}

	.profile_table th > .mb_br {
		display: block;
	}

	.profile_table td {
		width: calc(100% - 7.667rem);
	}
}

@media screen and (max-width: 768px) {
	.player_photo_wrap {
		width: 38vw;
	}

	.player_article_cont {
		width: calc(100% - 38vw - 3.334rem);
	}

	.related_news_ttl {
		margin-bottom: 2.8rem;
		text-align: center;
	}
}

@media screen and (max-width: 700px) {
	.player_ttl_area::before {
		height: 150vw;
	}

	.player_ttl_wrap {
		flex-direction: column;
		row-gap: 4rem;
	}

	.player_photo_wrap,
	.player_article_cont {
		width: 100%;
	}

	.player_article_cont {
		justify-content: space-between;
	}

	.player_info_wrap {
		width: 41.9vw;
	}

	.uniform_number_wrap {
		width: 32vw;
	}
}

@media screen and (max-width: 480px) {
	.player_ttl_area::before {
		height: 210vw;
	}
}