@charset "utf-8";
.peoplePage {
	background: var(--Blue-3);
	padding: 11.7rem 0 16.5rem;
	@media (width > 767px) {/* PC */
		overflow: hidden;
	}
	@media (width <= 767px) {/* SP */
		padding: 4.7rem 0 5.5rem;
	}
	.pageHead{
		position: relative;
		margin: 0 auto;
		
		z-index: 1;
		@media (width > 767px) {/* PC */
			width: 104rem;
		}
		.pageTtl{
			position: absolute;
			left: 0;
			top: -2.4rem;
			@media (width <= 767px) {/* SP */
				left: 3rem;
			}
		}
		img{
			width: 4.45rem;
			@media (width <= 767px) {/* SP */
				width: 1.75rem;
			}
		}
	}
	.kv{
		position: relative;
		margin-bottom: 6rem;
		@media (width <= 767px) {/* SP */
			margin-bottom: 3rem;
		}
		.kv__img{
			width: 100%;
		}
		.kv__txtarea{
			box-sizing: border-box;
			color: #fff;
			position: absolute;
			line-height: 1;
			
			@media (width > 767px) {/* PC */
				white-space: nowrap;
				left: 50%;
				transform: translateX(-50%);
				width: 91rem;
				top: 5.5rem;
    		padding-left: 63.5rem;
				&.-l{
					padding-left:8rem;
				}
				&.-act03{
					padding-left: 71rem;
				}
			}
			@media (width <= 767px) {/* SP */
				top:2.5rem;
				left: 22.7rem;
				&.-l{
					left: 6.5rem;
				}
			}
			.ttl{
				font-weight: 700;
				font-size: 1.4rem;
				margin-bottom: 1.2rem;
				@media (width > 767px) {/* PC */
					font-size: 2.5rem;
				}
			}
			.txt1{
				line-height: 1.5;
				font-size: 1.2rem;
				margin-bottom: .4rem;
				@media (width > 767px) {/* PC */
					font-size: 1.8rem;
					margin-bottom: 1.5rem;
				}
			}
			.name{
				font-size: 1.5rem;
				@media (width > 767px) {/* PC */
					font-size: 3.4rem;
				}
			}
			.txt2{
				margin-top: .8rem;
				font-size: 1.2rem;
				@media (width > 767px) {/* PC */
					font-size: 1.8rem;
				}
			}
		}
		.career{
			line-height: 1;
			color: #fff;
			margin-top: 5rem;
			@media (width > 767px) {/* PC */
				margin-top: 2.5rem;
			}
			@media (width <= 767px) {/* SP */
				margin: 2.5rem auto 0;
				width: 31rem;
			}
			dt{
				letter-spacing: .1em;
				font-weight: 700;
				font-size: 1.2rem;
				@media (width > 767px) {/* PC */
					font-size: 2rem;
				}
			}
			dd{
				line-height: normal;
				font-size: 1rem;
				margin-top: .5rem;
				@media (width > 767px) {/* PC */
					font-size: 1.8rem;
				}
			}
		}
	}

	.l-cntW{
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			width: 91rem;
			position: relative;
    	left: 6rem;
		}
		@media (width <= 767px) {/* SP */
			width: 29.5rem;
		}
	}
	.ttlBlock{
		margin-bottom: 5.5rem;
		@media (width <= 767px) {/* SP */
			margin-bottom: 2rem;
		}
		.ttlImg{
			img{
				margin: 0 auto;
			}
			/* 画像幅 */
			.act1-ttl-1{
				width: 27.7rem;
				@media (width <= 767px) {/* SP */
					width: 18.45rem;
				}
			}
			.act1-ttl-2{
				width: 29.65rem;
				@media (width <= 767px) {/* SP */
					width: 19.9rem;
				}
			}
			.act1-ttl-3{
				width: 21.15rem;
				@media (width <= 767px) {/* SP */
					width: 14.2rem;
				}
			}

			.act2-ttl-1{
				width: 43.1rem;
				@media (width <= 767px) {/* SP */
					width: 28.9rem;
				}
			}
			.act2-ttl-2{
				width: 32.4rem;
				@media (width <= 767px) {/* SP */
					width: 21.7rem;
				}
			}

			.act3-ttl-1{
				width: 29.9rem;
				@media (width <= 767px) {/* SP */
					width: 20.1rem;
				}
			}
			.act3-ttl-2{
				width: 26.3rem;
				@media (width <= 767px) {/* SP */
					width: 17.7rem;
				}
			}

			.act4-ttl-1{
				width: 28.9rem;
				@media (width <= 767px) {/* SP */
					width: 19.4rem;
				}
			}
			.act4-ttl-2{
				width: 24.6rem;
				@media (width <= 767px) {/* SP */
					width: 16.5rem;
				}
			}
		}
		.txtCopy{
			text-align: center;
			letter-spacing: .1em;
			font-weight: 700;
			line-height: 1;
			margin-top: 3rem;
			@media (width > 767px) {/* PC */
				font-size: 3rem;
			}
			@media (width <= 767px) {/* SP */
				font-size: 1.4rem;
				margin-top: 2rem;
			}
		}
	}
	.introTxt{
		letter-spacing: .05em;
		font-weight: 700;
		line-height: 2.1;
		font-size: 1.4rem;
		@media (width > 767px) {/* PC */
			line-height: 1.9;
			font-size: 2rem;
			margin-bottom: 7.7rem;
		}
		@media (width <= 767px) {/* SP */
			line-height: 2.07;
			margin-bottom: 3rem;
		}
	}
	.cntBlock{
		color: #fff;
		display: flex;
		flex-direction: column;
		/* gap: 8rem; */
		gap: 5.5rem;
	
		@media (width <= 767px) {/* SP */
			gap: 3rem;
		}
		.txtItem{
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 2.3rem;
			@media (width <= 767px) {/* SP */
				gap: 1.3rem;
			}
			.ttl{
				position: relative;
				z-index: 2;
				letter-spacing: .03em;
				font-weight: 700;
				line-height: 1.5;
				font-size: 2rem;
				@media (width > 767px) {/* PC */
					font-size: 3rem;
				}
			}
			.txt{
				position: relative;
				z-index: 2;
				letter-spacing: .05em;
				line-height: 2.1;
				font-size: 1.4rem;
				@media (width > 767px) {/* PC */
					line-height: 1.85;
					font-size: 2rem;
				}
			}
		}
		.imgItem{
			position: relative;
			img{
				position: relative;
				z-index: 2;
			}
			@media (width > 767px) {/* PC */
				
			}
			&.-act3top{
				margin-top: -3rem;
				@media (width <= 767px) {/* SP */
					margin: -0.5rem 0 1rem;
				}
				img{
					margin: 0 auto;
					width: 39.4rem;
					@media (width <= 767px) {/* SP */
						width: 24.7rem;
					}
				}
			}
		}

		.-act1-pcimg-1{
			mix-blend-mode: multiply;
			position: absolute !important;
			z-index: 1 !important;
			width: 44.5rem;
	
			left: -40.5rem;
			top: -20.8rem;
		}
		.-act1-pcimg-2{
			mix-blend-mode: multiply;
			position: absolute !important;
			z-index: 1 !important;
			width: 44.5rem;
	
			right: -28.5rem;
			top: 20.3rem;
		}
		.-act1-pcimg-3{
			mix-blend-mode: multiply;
			position: absolute !important;
			z-index: 1 !important;
			width: 44.5rem;
	
			left: -41.5rem;
			top: 0rem;
		}
		.-act1-pcimg-4{
			mix-blend-mode: multiply;
			position: absolute !important;
			z-index: 1 !important;
			width: 44.5rem;
	
			right: -28.5rem;
			top: 0rem;
		}
	}
	
	.-act2-pcimg-1{
		mix-blend-mode: multiply;
		position: absolute !important;
		z-index: 1 !important;
		width: 44.5rem;

		right: -28.5rem;
		top: -20.8rem;
	}
	.-act2-pcimg-2{
		mix-blend-mode: multiply;
		position: absolute !important;
		z-index: 1 !important;
		width: 44.5rem;

		left: -40.5rem;
		top: 20.3rem;
	}

	.-act3-pcimg-1{
		mix-blend-mode: multiply;
		position: absolute !important;
		z-index: 1 !important;
		width: 44.5rem;

		left: -40.5rem;
		top: -18rem;
	}
	.-act3-pcimg-2{
		mix-blend-mode: multiply;
		position: absolute !important;
		z-index: 1 !important;
		width: 44.5rem;

		right: -28.5rem;
		top: 20.3rem;
	}

	.-act4-pcimg-1{
		mix-blend-mode: multiply;
		position: absolute !important;
		z-index: 1 !important;
		width: 44.5rem;

		right: -28.5rem;
		top: -20.8rem;
	}
	.-act4-pcimg-2{
		mix-blend-mode: multiply;
		position: absolute !important;
		z-index: 1 !important;
		width: 44.5rem;

		left: -40.5rem;
		top: 20.3rem;
	}

	.bottomBlock{
		position: relative;
		z-index: 2;
		border-top: solid 1px #fff;
		border-bottom: solid 1px #fff;
		margin-top: 5rem;
		padding: 5rem 0 3.5rem;
		@media (width <= 767px) {/* SP */
			margin-top: 3.5rem;
			padding: 4rem 0 3.5rem;
		}
		.txt{
			letter-spacing: .06em;
			margin-top: -.5rem;
			line-height: 2.1;
			font-size: 1.4rem;
			@media (width > 767px) {/* PC */
				font-size: 2rem;
				line-height: 1.9;
			}
			@media (width <= 767px) {/* SP */
				margin-top: 3rem;
			}
		}
	}
	.trainerBlock{
		padding-top: 9.2rem;
		padding-bottom: 3.8rem;
		@media (width <= 767px) {/* SP */
			padding-top: 5.2rem;
			padding-bottom: 0rem;
		}
		.trainerBlock__ttl{
			margin-bottom: 5rem;
			@media (width <= 767px) {/* SP */
				margin-bottom: 2.5rem;
			}
			img{
				margin: 0 auto;
				width: 42.35rem;
				@media (width <= 767px) {/* SP */
					width: 28.1rem;
				}
			}
		}
	}

	.cntNav{
		margin: 8rem auto 0;
		display: flex;
		justify-content: space-between;
		@media (width > 767px) {/* PC */
			width: 108rem;
			position: relative;
    	left: 6rem;
		}
		@media (width <= 767px) {/* SP */
			margin-top: 5rem;
			width: 25.8rem;
			flex-direction: column;
			gap: 2.8rem;
		}
		a{
			@media(hover) {
				& {
					transition: 0.2s;
				}
				&:hover {
					opacity: 0.6;
				}
			}
		}
		.item{
			width: 25.8rem;
			.item__img{
				img{
					width: 100%;
				}
			}
			.item__txtarea{
				display: flex;
				flex-direction: column;
				line-height: 1;
				color: #fff;
				margin-top: 1.3rem;
				gap: .6rem;

				.txtBlock{
					display: flex;
					flex-direction: column;
					gap: .5rem;
				}
				.txt1{
					font-size: 1.2rem;
					@media (width > 767px) {/* PC */
						font-size: 1.6rem;
					}
				}
				.txt2{
					font-size: 1.5rem;
					@media (width > 767px) {/* PC */
						font-size: 2rem;
					}
					.-sml{
						margin-left: .8em;
						font-size: 1.2rem;
						@media (width > 767px) {/* PC */
							font-size: 1.6rem;
						}
					}
				}
			}
		}
	}
}


.xxxxxxxxx {
	/* scroll-margin-top: 0; */

	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
	}
	@media(hover) {
		& {
			transition: 0.2s;
		}
		&:hover {
			opacity: 0.6;
		}
	}
}