@charset "utf-8";

/* -----------------------------
	intro-area
-------------------------------- */
.intro-area {
	padding: 60px 0;
}

.intro-area .inner {
	position: relative;
}
.intro-area .catch {
	margin: 0 0 20px;
	color: var(--cmn-color);
}
.intro-area .img {
	position: absolute;
	right: 0;
	top: -30px;
}
.intro-area .img img {
	width: 400px;
}


@media screen and (max-width: 768px){

	.intro-area {
		padding: 40px 20px;
	}
	.intro-area .catch {
		margin: 0 0 15px;
	}
	.intro-area .img {
		right: -30px;
		top: -125px;
	}
	.intro-area .img img {
		width: 210px;
	}

}

/* -----------------------------
	staff-area
-------------------------------- */
.staff-area {
	padding: 0 0 120px;
}

.staff-area .staff-block {
	display: flex;
	align-items: center;
	gap: 50px;
	padding: 40px;
	border: solid 1px #D1D1D1;
	border-radius: 15px;
}
.staff-area .staff-block:not(:first-of-type) {
	margin: 30px 0 0;
}

.staff-area .staff-block .img-wrap {
	width: 422px;
	flex-shrink: 0;
	border-radius: 15px;
}
.staff-area .staff-block .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #ccc;
	border-radius: 15px;
}

.staff-area .staff-block .txt-box {
	width: 100%;
}

.staff-area .staff-block .txt-box .staff-name .staff-name-color {
	margin: 0 15px 0 0;
	color: var(--blue);
	font-size: 1.6rem;
}
.staff-area .staff-block .txt-box .staff-name {
	font-size: 2.4rem;
	font-weight: 600;
}

.staff-area .staff-block .txt-box .staff-catch {
	margin: 15px 0 25px;
	font-size: 3rem;
	line-height: 1.5;
}

.staff-area .staff-block .txt-box .staff-txt {
	position: relative;
	margin: 0 0 20px;
}
.staff-area .staff-block .txt-box .staff-txt::before {
	position: absolute;
	top: -20px;
	left: -16px;
	content: "“";
	color: #F1F1F1;
	font-family: var(--font-jp);
	font-size: 4rem;
}
.staff-area .staff-block .txt-box .staff-txt::after {
	position: absolute;
	bottom: -20px;
	right: -16px;
	content: "”";
	color: #F1F1F1;
	font-family: var(--font-jp);
	font-size: 4rem;
}

.staff-area .staff-block .txt-box .others tr {
	line-height: 1.7;
}
.staff-area .staff-block .txt-box .others th {
	width: 120px;
	color: var(--blue);
	font-weight: 500;
	text-align: left;
}

.staff-area .staff-block .txt-box .message {
	margin: 34px 0 0;
}
.staff-area .staff-block .txt-box .message .message-ttl {
	display: inline-block;
	margin: 0 0 0 20px;
	padding: 0 20px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 600;
	background: #0B70B8;
	border-radius: 18px;
}
.staff-area .staff-block .txt-box .message .message-txt {
	margin: -18px 0 0;
	padding: 35px 30px 25px;
	background: #F1F4F6;
	border-radius: 8px;
}

@media screen and (max-width: 768px){

	.staff-area {
		padding: 0 20px 40px;
	}

	.staff-area .staff-block {
		flex-direction: column;
		gap: 20px;
		padding: 20px;
	}
	.staff-area .staff-block:not(:first-of-type) {
		margin: 20px 0 0;
	}

	.staff-area .staff-block .img-wrap {
		width: 100%;
		height: 200px;
	}

	.staff-area .staff-block .txt-box .staff-name .staff-name-color {
		margin: 0;
		display: block;
	}
	.staff-area .staff-block .txt-box .staff-name {
		font-size: 2.2rem;
		text-align: center;
		line-height: 1.4;
	}

	.staff-area .staff-block .txt-box .staff-catch {
		margin: 15px 0 25px;
		font-size: 2.4rem;
	}
	
	
	.staff-area .staff-block .txt-box .others th {
		display: flex;
	}

	.staff-area .staff-block .txt-box .message {
		margin: 20px 0 0;
	}
	.staff-area .staff-block .txt-box .message .message-txt {
		padding: 30px 20px 20px;
		line-height: 1.8;
	}

}

/* -----------------------------
	サービス導線
-------------------------------- */
#staff .service-area{
		padding: 0 0 120px;
	}
@media screen and (max-width: 768px){
	#staff .service-area{
		padding: 0 20px 50px;
	}
}