@charset "utf-8";

.worklifePage {
	background: var(--cc-Grey);
	.pageHead{
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			width: 103rem;
			padding: 11rem 0 8rem;
		}
		@media (width <= 767px) {/* SP */
			width: 29.5rem;
			padding: 4rem 0 4.5rem;
		}
		img{
			@media (width > 767px) {/* PC */
				width: 79rem;
			}
			@media (width <= 767px) {/* SP */
				width: 22.6rem;
			}
		}
	}

	.pageCnt{
		position: relative;
		font-weight: 700;
		margin: 0 auto;
		padding-bottom: 16rem;
		line-height: 1.9;
		font-size: 2rem;
		@media (width > 767px) {/* PC */
			width: 103rem;
		}
		@media (width <= 767px) {/* SP */
			width: 31.5rem;
			line-height: 2.1;
			font-size: 1.4rem;
			padding-bottom: 6.4rem;
		}
		.kvBlock{
			position: relative;
			margin-bottom: 5rem;
			width: 91rem;
			margin-left: auto;
			@media (width <= 767px) {/* SP */
				left: -3rem;
				width: 37.5rem;
				margin-bottom: 4rem;
			}
			.kvImg{
				@media (width > 767px) {/* PC */
					width: 91rem;
				}
				@media (width <= 767px) {/* SP */
					width: 29.6rem;
					margin-left: auto;
				}
			}
			.kvBtn{
				@media (width > 767px) {/* PC */
					margin: 4.6rem auto 0;
				}
				@media (width <= 767px) {/* SP */
					width: 33.5rem;
					margin: 3.7rem 0 0;
				}
				a{
					position: relative;
					text-align: center;
					display: block;
					font-size: 1.7rem;
					letter-spacing: 0.04em;
					color: #fff;
					background: var(--cc-black-A);
					line-height: 1;
					border-radius: 0 2rem 2rem 0;
					padding: 1.2rem 0 1.2rem 3rem;
					background: url(../images/worklife/btn_icon.png) center right .5rem / 2.7rem 2.7rem var(--cc-black-A) no-repeat;
					@media (width <= 767px) {/* SP */
						text-align: left;
						border-radius: 0 1.6rem 1.6rem 0;
						padding: .9rem 0 .9rem 4.6rem;
						font-size: 1.4rem;
						line-height: 1.6;
						background-size: 2.3rem 2.3rem;
						background-position: center right 1.8rem;
					}
				}
			}
		}
		.pageTtl{
			position: absolute;
			left: 0;
			top: 0;
			@media (width > 767px) {/* PC */
				width: 7.6rem;
				left: -12rem;
			}
			@media (width <= 767px) {/* SP */
				width: 3.2rem;
				top: -1.7rem;
				left: 3rem;
			}
			img{
				width: 100%;
			}
		}
		.pageCnt__in{
			letter-spacing: .07em;
			@media (width > 767px) {/* PC */
				width: 100%
				margin-left: auto;
			}
		}
		.cntTtl_wrap {
			@media (width <= 767px) {/* SP */
				width: 100%;
				margin-left: 0;
			}
		}
		.cntTtl{
			text-align: center;
			font-size: 4.5rem;
			font-weight: 700;
			line-height: 120%; /* 54px */
			margin-left: 4rem;
			@media (width <= 767px) {/* SP */
				font-size: 3.4rem;
				margin-left: 0;
			}
		}
		.cntTtl_catch {
			margin-top: 4rem;
			letter-spacing: -0.04em;
			line-height: 1.8;
			@media (width <= 767px) {/* SP */
				margin-top: 2rem;
				line-height: 2.1;
			}

		}
		.pList{
			margin: 6rem auto 8rem;
			display: flex;
			@media (width > 767px) {/* PC */
				margin-left: 8rem;
				justify-content: center;
				gap:4.3rem;
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				margin: 3rem auto 4.5rem;
				gap: 1.4rem;
				width: 29.3rem;
			}
			li{
				@media (width <= 767px) {/* SP */
					display: flex;
					align-items: center;
					gap: 1.6rem;
				}
			}
			.p-ico{
				width: 12.7rem;
				@media (width > 767px) {/* PC */
					margin: 0 auto 1.6rem;
				}
				@media (width <= 767px) {/* SP */
					width: 8.8rem;
					margin-left: 1rem;
				}
			}
			.txtarea{
				text-align: center;
				font-size: 1.6rem;
				font-weight: 700;
				line-height: 130%; /* 20.8px */
				@media (width <= 767px) {/* SP */
					white-space: nowrap;
					text-align: left;
					font-size: 1.2rem;
					display: flex;
					flex-direction: column;
					letter-spacing: 0.01em;
				}
				.name{
					font-size: 2.1rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.5rem;
					}
				}
				p {
					+ p {
						margin-top: 1rem;
					}
				}
			}
		}

		.talkSecWrp{
			display: flex;
			flex-direction: column;
			gap: 8rem;
			@media (width <= 767px) {/* SP */
				gap: 5.5rem;
			}
		}
		.talkSec{
			.talkSec__ttl{
				margin-bottom: 3rem;
				margin-left: 11rem;
				&.type01{
					@media (width > 767px) {/* PC */
						margin-bottom: 4rem;
					}
				}

				@media (width <= 767px) {/* SP */
					margin-bottom: 2.2rem;
					margin-left: 0;
				}
				img{
					margin: 0 auto;
				}
				.-ttl-1{
					@media (width > 767px) {/* PC */
						width: 64.2rem;
					}
					@media (width <= 767px) {/* SP */
						width: 25.5rem;
					}
				}
				.-ttl-2{
					@media (width > 767px) {/* PC */
						width: 54.2rem;
					}
					@media (width <= 767px) {/* SP */
						width: 19.7rem;
					}
				}
				.-ttl-3{
					@media (width > 767px) {/* PC */
						width: 43.3rem;
					}
					@media (width <= 767px) {/* SP */
						width: 29.8rem;
					}
				}
				.-ttl-4{
					@media (width > 767px) {/* PC */
						width: 24.2rem;
					}
					@media (width <= 767px) {/* SP */
						width: 17.1rem;
					}
				}
			}
			.talkSec__cnt{
				@media (width <= 767px) {/* SP */
					margin: 0 auto;
					width: 29.5rem;
				}
				.col{
					display: flex;
					flex-direction: column;
					gap: 2rem;
					@media (width <= 767px) {/* SP */
						gap: 1.6rem;
					}
				}
				.tBox{
					@media (width > 767px) {/* PC */
						display: flex;
					}
					img{
						width: 8.5rem;
						height: 8.5rem;
						margin-right: 1.8rem;
						@media (width <= 767px) {/* SP */
							width: 5.9rem;
							height: 5.9rem;
							margin-right: 1rem;
							float: left;
						}
					}
					p{
						text-align: justify;
						letter-spacing: 0.05em;
						font-size: 1.9rem;
						font-weight: 600;
						line-height: 200%; /* 30px */
						padding-top: 2.2rem;
						@media (width <= 767px) {/* SP */
							letter-spacing: 0.02em;
							line-height: 220%;
							font-size: 1.2rem;
							padding-top: 1.3rem;
						}
						.name{
							&.col_i {
								color: #bea61f;
							}
							&.col_m {
								color: #009fe6;
							}
							&.col_o {
								color: #6d1781;
							}
						}
					}
					.line-pc1-sp2 {
							padding-top: 2.2rem;
							@media (width <= 767px) {/* SP */
								padding-top: 0.2rem;
							}
					}
					.line-pc2 {
							padding-top: 0.2rem;
					}
				}
			}
		}
	}

	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
	}
}