@charset "utf-8";

/* -----------------------------------------------------------
page-mv-area
-------------------------------------------------------------- */
.page-mv-area .img-wrap {
	flex-shrink: 0;
}

.page-mv-area .ttl-l {
	letter-spacing: 0.08em;
}

.page-mv-area .txt {
	letter-spacing: 0.09em;
}


/* -----------------------------------------------------------
profile-area
-------------------------------------------------------------- */
.profile-area {
	padding: 150px 0 0;
}

.profile-area .profile-box {
	position: relative;
	padding: 32px;
	border: solid 1px var(--gray02);
	border-radius: 10px;
}

.profile-area .profile-box .deco-ttl {
	position: absolute;
	top: -14px;
	left: 20px;
	padding: 0 12px;
	color: #888;
	font-size: 2.6rem;
	font-family: var(--Montserrat);
	font-weight: 700;
	background: #fff;
}

.profile-area .profile-box .profile-ttl {
	margin-bottom: 8px;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

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

	.profile-area {
		padding: 40px 0 0;
	}

	.profile-area .profile-box {
		padding: 24px 20px 20px;
	}

	.profile-area .profile-box .deco-ttl {
		top: -7px;
		left: 10px;
		padding: 0 12px;
		font-size: 1.6rem;
	}

	.profile-area .profile-box .profile-ttl {
		font-size: 1.8rem;
	}

}


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

.interview-area .interview-intro-area {
	margin: 150px 0 0;
	height: 600px;
}

.interview-area .interview-intro-area.bg01 {
	background: url(../img/interview_interview-intro-area_bg01.jpg) no-repeat center;
	background-size: cover;
}
.interview-area .interview-intro-area.bg02 {
	background: url(../img/interview_interview-intro-area_bg02_pc.jpg) no-repeat center;
	background-size: cover;
}
.interview-area .interview-intro-area.bg03 {
	background: url(../img/interview_interview-intro-area_bg03_pc.jpg) no-repeat center;
	background-size: cover;
}
.interview-area .interview-intro-area.bg04 {
	background: url(../img/interview_interview-intro-area_bg04_pc.jpg) no-repeat center;
	background-size: cover;
}

.interview-area .interview-intro-area .inner {
	position: relative;
	height: 100%;
}

.interview-area .interview-intro-area .vertical-ttl {
	position: absolute;
	top: -80px;
	right: 0;
	color: #fff;
	font-size: 4rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	writing-mode: vertical-rl;
}
.interview-area .interview-intro-area .vertical-ttl .ttl-bg {
	padding: 16px 4px;
	background: var(--green);
}

.interview-area .interview-intro-area .vertical-ttl.orange .ttl-bg {
	background: var(--orange);
}

.interview-area .interview-intro-area .main-ttl {
	position: absolute;
	bottom: 64px;
	color: #fff;
	font-size: 6rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 微調整 */
.interview-area .interview-intro-area .vertical-ttl .txt-custom01 {
	display: inline-block;
	height: 20px;
}
.interview-area .interview-intro-area .vertical-ttl .txt-custom02 {
	position: relative;
	right: -10px;
}
.interview-area .interview-intro-area .vertical-ttl .txt-custom03 {
	display: inline-block;
	margin-top: -20px;
	height: 120px;
}

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

	.interview-area {
		margin: 80px 0 40px;
	}

	.interview-area .interview-intro-area {
		margin: 100px 0 0;
		height: 400px;
	}

	.interview-area .interview-intro-area.bg02 {
		background: url(../img/interview_interview-intro-area_bg02_sp.jpg) no-repeat center;
		background-size: cover;
	}
	.interview-area .interview-intro-area.bg03 {
		background: url(../img/interview_interview-intro-area_bg03_sp.jpg) no-repeat center;
		background-size: cover;
	}
	.interview-area .interview-intro-area.bg04 {
		background: url(../img/interview_interview-intro-area_bg04_sp.jpg) no-repeat center;
		background-size: cover;
	}

	.interview-area .interview-intro-area .vertical-ttl {
		top: -40px;
		right: 20px;
		font-size: 1.6rem;
		line-height: 2.5;
	}
	.interview-area .interview-intro-area .vertical-ttl .ttl-bg {
		padding: 10px 4px;
	}

	.interview-area .interview-intro-area .main-ttl {
		bottom: 20px;
		font-size: 2.4rem;
		line-height: 1.5;
	}

	/* 微調整 */
	.interview-area .interview-intro-area .vertical-ttl .txt-custom01 {
		height: 10px;
	}
	.interview-area .interview-intro-area .vertical-ttl .txt-custom02 {
		right: -4px;
	}
	.interview-area .interview-intro-area .vertical-ttl .txt-custom03 {
		margin-top: -10px;
		height: 45px;
	}

}


/* インタビューレイアウトベース */
.interview-area .interview-box {
	margin: 100px 0 0;
}

.interview-area .interview-box .txt-box {
	display: flex;
	gap: 32px;
	margin: 40px 0 0;
}

.interview-area .interview-box .txt-box .icon-img {
	width: 80px;
	height: 80px;
	background: url(../img/interview_icon-img.jpg) no-repeat center center;
	background-size: cover;
	border-radius: 50%;
	flex-shrink: 0;
}

.interview-area .interview-box .txt-box .speech-bubble {
	position: relative;
	padding: 32px;
	background: #EBF7F5;
	border-radius: 10px;
}
.interview-area .interview-box .txt-box .speech-bubble:before {
	content: "";
	position: absolute;
	left: -30px;
	margin-top: -5px;
	border: 15px solid transparent;
	border-right: 15px solid #EBF7F5;
}

.interview-area .interview-box .txt-box .speech-bubble .custom-txt {
	letter-spacing: 0.09em;
}

/* 画像右側レイアウト */
.interview-area .interview-box.right-img .txt-box {
	flex-direction: row-reverse;
}
.interview-area .interview-box.right-img .txt-box .speech-bubble:before {
	content: "";
	position: absolute;
	left: 100%;
	margin-top: -5px;
	border: 15px solid transparent;
	border-left: 15px solid #EBF7F5;
}

/* 吹き出しオレンジ色 */
.interview-area .interview-box .txt-box .speech-bubble.light-orange {
	background: var(--light-orange);
}
.interview-area .interview-box .txt-box .speech-bubble.light-orange:before {
	content: "";
	position: absolute;
	left: -30px;
	margin-top: -5px;
	border: 15px solid transparent;
	border-right: 15px solid var(--light-orange);
}
.interview-area .interview-box.right-img .txt-box .speech-bubble.light-orange:before {
	content: "";
	position: absolute;
	left: 100%;
	margin-top: -5px;
	border: 15px solid transparent;
	border-left: 15px solid var(--light-orange);
}

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

	.interview-area .interview-box {
		margin: 40px 0 0;
	}

	.interview-area .interview-box .txt-box {
		gap: 28px;
		margin: 20px 0 0;
	}

	.interview-area .interview-box .txt-box .icon-img {
		width: 60px;
		height: 60px;
	}

	.interview-area .interview-box .txt-box .speech-bubble {
		padding: 20px;
	}

	.interview-area .interview-box .txt-box .speech-bubble .custom-txt {
		letter-spacing: 0.1em;
	}

}


/* -----------------------------------------------------------
credit-area
-------------------------------------------------------------- */
.credit-area {
	margin: 100px 0 0;
	color: #888;
}

.credit-area .txt {
	margin-top: unset;
}

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

	.credit-area {
		margin: 40px 0 0;
	}

}