/* ====================================================================================
HOME
==================================================================================== */
.p-home-mv {
	& .splide__slide {
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			/* 全面に広げる */
			background: rgba(0, 0, 0, 0.7);
			/* 半透明の黒 */
			pointer-events: none;
			/* クリックを邪魔しない */
			transition: opacity 0.1s;
		}

		&.is-active::after {
			opacity: 0;
		}
	}

	& .splide__pagination {
		position: relative;
		background-color: var(--wp--preset--color--primary);
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		top: 0;

		@media screen and (max-width: 782px) {
			gap: 10px;
			padding-block: 9px;
		}

		@media screen and (min-width: 783px) {
			gap: 15px;
			padding-block: 14px;
		}
	}

	& .splide__pagination li {
		display: inline-flex;
	}

	& .splide__pagination__page {
		opacity: 1;
		border-radius: 0;
		margin: 0;
		transition: background 0.3s;
		background-color: #4a6961;

		@media screen and (max-width: 782px) {
			width: 40px;
			height: 6px;
		}

		@media screen and (min-width: 783px) {
			width: 60px;
			height: 8px;
		}

		&.is-active {
			transform: scale(1);
			background-color: var(--wp--preset--color--secondary);
		}
	}
}

.p-home-news {
	@media screen and (max-width: 782px) {
		padding-inline: calc(10 / 375 * 100%) !important;
	}
}

.p-home-executive {
	& .__body {
		position: relative;
		display: flex;
		align-items: center;

		&::before {
			z-index: 10;
			content: "";
			position: absolute;
			background: var(--wp--preset--color--secondary);

			@media screen and (max-width: 782px) {
				clip-path: polygon(100% 0,
						100% 0,
						100% 100%,
						0 100%,
						0 75%
						/* 左上下にずらす */
					);
				width: 100%;
				height: 12%;
				top: -12%;
				left: 0;
			}

			@media screen and (min-width: 783px) {
				clip-path: polygon(0 0, 100% 0, 0 110%);
				width: 33%;
				height: 100%;
				top: 0;
				right: -33%;
				bottom: auto;
			}
		}

		&::after {
			z-index: 10;
			content: "";
			position: absolute;
			background: var(--wp--preset--color--primary);

			@media screen and (max-width: 782px) {
				clip-path: polygon(100% 100%, 100% 0, 0 100%);
				width: 100%;
				height: 10%;
				top: -9.9%;
				left: 0;
			}

			@media screen and (min-width: 783px) {
				clip-path: polygon(0 0, 100% 0, 0 100%);
				width: 30%;
				height: 100%;
				top: -0.1%;
				right: -29.9%;
				bottom: auto;
			}
		}
	}

	& .__img {
		width: 100%;

		& img {
			width: 100%;
		}
	}
}

.p-home-loop-txt {
	overflow: hidden;

	& .__track {
		@media screen and (max-width: 782px) {
			animation: sp-scroll-legend 50s linear infinite;
		}

		@media screen and (min-width: 783px) {
			animation: pc-scroll-legend 50s linear infinite;
		}
	}

	& .__slide {
		flex: 0 0 auto;
		width: 800px;
		margin-left: 20px;

		@media screen and (min-width: 783px) {
			width: 1520px;
			margin-left: 40px;
		}
	}

	& .__slide img {
		width: 800px;

		@media screen and (min-width: 783px) {
			width: 1520px;
		}
	}

	/* トラック全体のアニメーション用 */
	&::before,
	&::after {
		content: "";
		flex: 0 0 auto;
	}
}

/* アニメーション */
@keyframes sp-scroll-legend {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-1640px);
	}
}

@keyframes pc-scroll-legend {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-3120px);
	}
}

.p-home-club {
	@media screen and (max-width: 782px) {
		padding-right: var(--wp--preset--spacing--160) !important;
		padding-left: var(--wp--preset--spacing--160) !important;
	}

	& .wp-block-cover__image-background {
		@media screen and (max-width: 782px) {
			object-position: 70% 0% !important;
		}
	}
}

.p-home-member {
	@media screen and (max-width: 782px) {
		padding-right: var(--wp--preset--spacing--160) !important;
		padding-left: var(--wp--preset--spacing--160) !important;
	}
}

/* ====================================================================================
クラブ概要
==================================================================================== */
@media screen and (max-width: 782px) {
	.p-club-uniform {
		gap: var(--wp--preset--spacing--30);

		& .__item {
			padding: var(--wp--preset--spacing--40) !important;
		}
	}
}

@media screen and (max-width: 782px) {
	#p-club-slogan.p-club-slogan {
		min-height: 300px;
		width: 100vw;
		/* ビューポート幅いっぱいに広げる */
		margin-left: 50% !important;
		/* 左基準を中央に */
		transform: translateX(-50%);
		/* 中央から全幅に引き延ばす */
	}
}

/* ====================================================================================
エグゼクティブディレクター
==================================================================================== */
.p-executive-mv {
	& .__title-ja {
		@media screen and (max-width: 782px) {
			font-size: var(--wp--preset--font-size--x-2-s) !important;
		}
	}

	& .__name-ja {
		text-indent: -0.1em;
	}

	& .__title-en {
		white-space: nowrap;
	}

	& .__name-en,
	& .__affiliation {
		@media screen and (max-width: 782px) {
			font-size: var(--wp--preset--font-size--x-2-s) !important;
		}
	}

	& .__affiliation {
		text-indent: -0.6em;
	}
}

.p-executive-history {
	& .__table {
		@media screen and (max-width: 782px) {
			padding-block: var(--wp--preset--spacing--120) !important;
			padding-inline: var(--wp--preset--spacing--130) !important;
		}
	}

	& .__summary {
		@media screen and (max-width: 782px) {
			padding-block: var(--wp--preset--spacing--100) !important;
			padding-inline: var(--wp--preset--spacing--130) !important;
		}
	}
}

.p-executive-history {
	@media screen and (max-width: 782px) {
		background-size: 130% !important;
	}

	@media screen and (min-width: 783px) {
		background-size: contain !important;
	}
}

.p-executive-head01 {
	position: relative;
	padding-left: 0.8em;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 5px;
		height: 5px;
		background-color: currentColor;
	}
}

.p-executive-message {
	background: url("../img/executive_message_bg.png"),
		linear-gradient(to bottom, #ffe300, #f5b839) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* ====================================================================================
選手募集
==================================================================================== */
.p-recruit-anchor {
	& .__item {
		border-radius: 5px;
		overflow: hidden;
		transition: 0.35s;

		&:hover {
			box-shadow: none !important;
		}
	}

	& .__link {
		transition: 0.35s;

		&:hover {
			color: var(--wp--preset--color--secondary) !important;
			opacity: .9;

			& p::after {
				mask: url("../img/icon_anchor_btn.svg") no-repeat center / contain !important;
				-webkit-mask: url("../img/icon_anchor_btn.svg") no-repeat center / contain !important;
			}
		}
	}

	& .__link p {
		@media screen and (max-width: 782px) {
			font-size: var(--wp--preset--font-size--sm) !important;
		}

		&::after {
			content: "";
			display: inline-block;
			vertical-align: middle;
			background-color: currentColor;
			/* ← テキストの色を継承 */
			mask: url("../img/icon_anchor_btn.svg") no-repeat center / contain;
			-webkit-mask: url("../img/icon_anchor_btn.svg") no-repeat center / contain;

			@media screen and (min-width: 783px) {
				width: 17px;
				height: 17px;
				margin-left: 8px;
				margin-bottom: 3px;
			}

			@media screen and (max-width: 782px) {
				width: 13px;
				height: 13px;
				margin-left: 5px;
				margin-bottom: 3px;
			}
		}
	}
}

.p-recruit-job {
	@media screen and (max-width: 782px) {
		padding-inline: var(--wp--preset--spacing--50) !important;
	}

	& .__txt {
		@media screen and (max-width: 782px) {
			font-size: var(--wp--preset--font-size--md) !important;
		}
	}
}

/* ====================================================================================
プライバシーポリシー
==================================================================================== */
.p-privacy {
	@media screen and (max-width: 782px) {
		padding-inline: var(--wp--preset--spacing--30) !important;
	}

	& .__content {
		margin-inline: auto !important;

		@media screen and (max-width: 782px) {
			padding-inline: var(--wp--preset--spacing--90) !important;
			padding-block: var(--wp--preset--spacing--120) !important;
			border-radius: 10px !important;
		}
	}
}