@charset "utf-8";

/* -----------------------------------------------------------
    インタビュー詳細
-------------------------------------------------------------- */
/* -----------------------------------------------------------
    intro-area
-------------------------------------------------------------- */
.intro-area {
	margin: 80px 0 0;
}

.intro-area .intro-data {
	align-items: center;
	gap: 20px;
	display: flex;
	margin: 15px 0 0;
}

.intro-area .intro-catch {
	font-size: 2.6rem;
	font-weight: bold;
	width: calc(100% - 120px);
	padding: 0 0 0 25px;
	float: left;
	letter-spacing: .03em;
	line-height: 1.6;
}

.intro-area .intro-profile {
	align-items: center;
	display: flex;
	float: left;
	font-size: 1.7rem;
	gap: 10px;
	width: calc(100% - 120px);
	padding: 0 0 0 25px;
	margin: 20px 0 0;
}

.intro-area .intro-icon {
	width: 110px;
	float: left;
}

.intro-area .intro-icon img {
	aspect-ratio: 1/1;
	width: 100%;
}

.intro-area .intro-profile p {
	color: var(--gray);
	font-size: 1.8rem;
	line-height: 1.2;
}

.intro-area .intro-profile .area {
	font-weight: 500;
	position: relative;
	padding: 0 0 0 21px;
}

.intro-area .intro-profile .area::before {
	content: "";
	background: url("../img/gray-pin.svg")center/contain no-repeat;
	position: absolute;
	top: 54%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 19px;
	height: 23px;
	left: 0;
}

.intro-area .intro-profile .name {
	display: flex;
	font-weight: bold;
	flex-wrap: wrap;
}

.intro-area .intro-profile .name span {
	font-weight: 500;
}

.intro-area .intro-ba {
	display: flex;
	float: left;
	flex-grow: 1;
	gap: 20px;
	width: 100%;
	margin: 35px 0 0;
}

.intro-area .intro-ba dl {
	align-items: center;
	border-radius: 5px;
	background-color: #fff;
	display: flex;
	font-size: 1.6rem;
	width: calc((100% - 15px) / 2);
	letter-spacing: 0.02em;
	position: relative;
	padding: 22px 20px 20px;
}

.intro-area .intro-ba .before {
	border: solid 2px #e6e8eb;
}

.intro-area .intro-ba .after {
	border: solid 2px var(--main);
}

.intro-area .intro-ba dt {
	color: #fff;
	border-radius: 30px;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.05em;
	text-align: center;
	top: -13px;
	left: 15px;
	padding: 2px 12px 3px;
	position: absolute;
}

.intro-area .intro-ba .before dt {
	background-color: #bcbfc4;
}

.intro-area .intro-ba .after dt {
	background-color: var(--main);
}

.intro-area .intro-ba dd {
	line-height: 1.6;
}

.intro-area .intro-ba .before dd {
	font-weight: 500;
}

.intro-area .intro-ba .after dd {
	color: var(--main);
	font-size: 1.8rem;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.intro-area {
		margin: 30px 0 0;
	}

	.intro-top {
		display: flex;
		flex-wrap: wrap;
	}

	.intro-area .intro-icon {
		width: 80px;
		order: 2;
	}

	.intro-area .intro-catch {
		font-size: 2.2rem;
		width: 100%;
		order: 1;
		padding: 0;
		margin: 0 0 20px;
	}

	.intro-area .intro-profile {
		align-items: flex-start;
		font-size: 1.5rem;
		gap: 8px;
		width: calc(100% - 80px);
		padding: 0 0 0 20px;
		order: 3;
		flex-direction: column;
		justify-content: center;
		margin: 0;
	}

	.intro-area .intro-profile p {
		font-size: 1.7rem;
	}

	.intro-area .intro-ba {
		flex-direction: column;
		gap: 25px;
		order: 4;
	}

	.intro-area .intro-ba dl {
		width: 100%;
		min-width: unset;
		max-width: unset;
		padding: 23px 15px 15px 15px;
	}

	.intro-area .intro-ba dt {
		font-size: 1.4rem;
		padding: 1px 10px 2px;
	}

	.intro-area .intro-ba .before {
		font-size: 1.5rem;
	}

	.intro-area .intro-ba .after dd {
		font-size: 1.7rem;
	}
}

/* -----------------------------------------------------------
    interview-area
-------------------------------------------------------------- */
.interview-area {
	background: var(--cmnbg2);
	margin: 70px 0 0;
	position: relative;
	padding: 70px 0;
}

.interview-area .ptn-graph {
	opacity: .3;
}

.interview-area .interview-inner {
	background: #fff;
	border-radius: 5px;
	margin: 50px 0 0;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.interview-header {
	background: var(--sub2);
	color: #fff;
	font-weight: bold;
	font-size: 2.4rem;
	line-height: 1.5;
	letter-spacing: .05em;
	padding: 16px 22px 17px;
	width: 100%;
}

.interview-body {
	padding: 10px 30px 50px;
}

.interview-area [class^="interview-voice"] {
	align-items: center;
	display: flex;
	gap: 25px;
	margin: 35px 0 0;
}

.interview-area .interview-voice-seeker {
	flex-direction: row-reverse;
}

.interview-area [class^="interview-voice"] dt {
	flex-shrink: 0;
}

.interview-area .interview-voice-staff dt {
	width: 60px;
}

.interview-area .interview-voice-seeker dt {
	width: 90px;
}

.interview-area [class^="interview-voice"] img {
	aspect-ratio: 1/1;
	width: 100%;
}

.interview-area [class^="interview-voice"] dd {
	border-radius: 8px;
	padding: 30px;
	position: relative;
	line-height: 2;
	letter-spacing: .05em;
	width: 740px;
}

.interview-voice-staff dd {
	background: #f1f3f8;
}

.interview-voice-seeker dd {
	background: #edf5ef;
}

.interview-area [class^="interview-voice"] dd::before {
	content: "";
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.interview-area .interview-voice-staff dd::before {
	left: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-right: 15px solid #f1f3f8;
	border-left: 0;
}

.interview-area .interview-voice-seeker dd::before {
	right: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 15px solid #edf5ef;
	border-right: 0;
}

@media screen and (max-width: 768px) {
	.interview-area {
		margin: 40px 0 0;
		padding: 40px 20px;
	}

	.interview-area .interview-inner {
		border: none;
		margin: 30px 0 0;
	}

	.interview-header {
		font-size: 1.9rem;
		padding: 14px 20px 16px;
	}

	.interview-body {
		padding: 0 20px 20px;
	}

	.interview-area [class^="interview-voice"] {
		border-radius: 5px;
		display: block;
		padding: 20px;
		margin: 25px 0 0;
	}

	.interview-area .interview-voice-staff {
		background: var(--cmnbg);
		padding: 15px;
		color: var(--sub2);
	}

	.interview-area .interview-voice-seeker {
		padding: 0;
	}

	.interview-area .interview-voice-staff dt {
		width: 40px;
		top: -20px;
		float: left;
		margin: 0 10px 8px 0;
	}

	.interview-area .interview-voice-seeker dt {
		width: 50px;
		top: -30px;
		float: right;
		margin: 0 0 8px 8px;
	}

	.interview-area [class^="interview-voice"] dd {
		background: transparent;
		border-radius: 0;
		font-size: 1.6rem;
		width: 100%;
		padding: 0;
	}

	.interview-area .interview-voice-staff dd {
		font-weight: 500;
	}

	.interview-area .interview-voice-seeker dd {
		line-height: 2.3;
	}

	.interview-area [class^="interview-voice"] dd::before {
		display: none;
	}
}

/* -----------------------------------------------------------
    comment-area
-------------------------------------------------------------- */
.comment-area {
	margin: 70px 0 0;
	position: relative;
}

.comment-area .ptn-graph {
	opacity: .3;
}

.comment-area .comment-box {
	align-items: center;
	background: #fff;
	border-radius: 15px;
	border: 10px solid #dcf4df;
	display: flex;
	gap: 30px;
	padding: 40px;
	position: relative;
	z-index: 2;
}

.comment-area .comment-img {
	flex-shrink: 0;
	width: 88px;
}

.comment-area .comment-img img {
	aspect-ratio: 88/103;
	width: 100%;
}

.comment-area .comment-ttl {
	font-size: 1.9rem;
	color: var(--main);
	font-weight: bold;
}

.comment-area .comment-txt {
	margin: 15px 0 0;
}

@media screen and (max-width: 768px) {
	.comment-area {
		margin: 40px 0 0;
	}

	.comment-area .comment-img {
		display: none;
	}

	.comment-area .comment-box {
		border-radius: 5px;
		padding: 35px 20px 30px 20px;
		border-width: 5px;
	}

	.comment-area .comment-ttl {
		font-size: 1.8rem;
		position: relative;
		padding: 0 0 0 55px;
		width: fit-content;
		margin: 0 auto;
	}

	.comment-area .comment-ttl::before {
		position: absolute;
		left: 0;
		content: '';
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 50px;
		height: 50px;
		background: url(../img/illust-staff01.png) center/contain no-repeat;
	}

	.comment-area .comment-txt {
		font-size: 1.6rem;
		margin: 28px 0 0;
		line-height: 2.3;
	}
}

/* -----------------------------------------------------------
    rel-area
-------------------------------------------------------------- */
.rel-area {
	margin: 80px 0 0;
}

.rel-area-header {
	text-align: center;
	font-size: 3.5rem;
	font-weight: bold;
}

.rel-area .interview-rel-list {
	margin-top: 50px;
}

#interview-detail .nicms-back {
	margin: 30px 0 0;
}

@media screen and (max-width: 768px) {
	.rel-area {
		margin: 50px 0 0;
	}

	.rel-area-header {
		font-size: 2.2rem;
	}

	.rel-area .interview-rel-list {
		margin-top: 30px;
	}

	#interview-detail .nicms-back {
		margin: 30px 0 0;
	}
}




/* -----------------------------------------------------------
    footer_service
-------------------------------------------------------------- */
#interview-detail .footer_service {
	background: var(--cmnbg2);
	padding: 80px 0;
}

@media screen and (max-width: 768px) {
	#interview-detail .footer_service {
		padding: 40px 0;
	}
}