@charset "utf-8";

/* 共通 ================================================== */
:root {
	--white: #fff;
	--blue-1: #2074FE;
	--blue-2: #00E4FF;	

	--fs-b: 23px;
	--fs-m: 20px;
	--fs-s: 15px;
	--fs-ss: 13px;

	--hover-t: all 0.3s ease;
}

/* ヘッダー画像 ================================================== */
main h2 {
	background: url(../interview/title_bg_pc.jpg) no-repeat center #2f9afe;
	& br { display: none; }
	}


#main { 
	display: flex;
	flex-wrap: wrap;
	gap: 4rem 0;
	justify-content: space-between;
	& .profile { width: 48%; }
}

/* 先輩社員インタビュー 一覧 ================================================== */
/* 先輩社員 画像 */
.profile .img {
	position: relative;
	& img {
		border-radius: 15px;
		display: block;
		width: 100%;
	}
	&::before, &::after {
		content: "";
		position: absolute;
		transition: var(--hover-t);
	}
	&::before {
		background: url(../interview/arrow.svg) no-repeat right 15px center / 8px;
		background-color: var(--blue-1);
		border-radius: 50%;
		right: -10px;
		bottom: -10px;
		width: 40px;
		height: 40px;
		z-index: 1;
	}
	&::after {
		background: var(--blue-2);
		border-radius: 15px;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
}

.profile a:hover {
	opacity: 0.7;
	& .img {
		&::before { transform: rotate(90deg); }
		&::after  { opacity: 0.2; }
	}
}

/* 先輩社員 キャリア採用 */
.profile  .career {
	background: linear-gradient(145deg, var(--blue-1) 10%, var(--blue-2) 90%);
	border-radius: .5rem 2rem 2rem .5rem;
	color: var(--white);
	display: inline-block;
	font-size: var(--fs-ss);
	font-weight: 600;
	margin: 1rem 0 .5rem;
	padding: .2rem 1rem;
}

/* 先輩社員 テキスト */
.profile .txt {
	& h3 {
		color: var(--blue-1);
		font-size: var(--fs-m);
		margin-bottom: .5rem;
		line-height: 2rem;
		letter-spacing: .05em;
	}
	& p {
		color: var(--blue-1);
		font-size: var(--fs-s);	
		font-weight: 600;
		width: 100%;
		& span { font-size: var(--fs-m); }
	}
	& .line {
		border-top: solid;
		display: block;
		margin-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}

/* 新入社員 =============================================== */
.new { width: 100%;}

.new a {
	box-sizing: border-box; 
	display: flex;
	align-items: end;
	gap: 8%;
	justify-content: center;
	position: relative;
	margin-bottom: 3rem;
	text-align: center;
	transition: var(--hover-t);
	width: 100%;
	&::before {
		content: "";
		background: linear-gradient(145deg, var(--blue-1) 10%, var(--blue-2) 90%);
		border-radius: 10px;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100px;
		z-index: -1;
	}
}

.new a:hover { opacity: 0.7; }

/* 新入社員 画像 */
.new a picture { display: flex; }

/* 新入社員 テキスト */
.new a p {
	color: var(--white);
	font-size: var(--fs-m);
	font-weight: 600;
	letter-spacing: 0.1rem;
	margin-bottom: 1.3rem;
	position: relative;
	& span {
		display: block;
		margin-bottom: 0.25rem;
		font-size:   var(--fs-ss);
		line-height: var(--fs-ss);
	}
	&::before, &::after {
		content: "";
		background: url(../interview/new-3.svg) no-repeat center / contain;
		position: absolute;
		bottom: 0;
		width: 30px;
		height: 60px;
	}
	&::before {
		left: -3rem;
	}
	&::after {
		transform: scale(-1,1);
		right: -3rem;
	}
}

/** ======================================================================
タブレット
====================================================================== */
@media screen and (max-width: 900px){
	/* ヘッダー画像 ================================================== */
	main h2 {background-size: cover;}

	#main { 
		gap: 3rem 0;
		& .profile { width: 100%; }
	}

	/* 先輩社員インタビュー 一覧 ================================================== */
	.profile {
		margin: auto;
		max-width: 500px;
	}
	/* 先輩社員 テキスト */
	.profile .txt {
		& h3 {
			font-size: 18px;
			line-height: 1.7rem;
		}
	}


}
/** ==========================================================================================
スマートフォン 
=============================================================================================*/
@media screen and (max-width: 768px){
	/* ヘッダー画像 ================================================== */
	main h2 {
		height: 125px;
		line-height: 1.2em;
		background: url(../interview/title_bg_sp.jpg) no-repeat center #2f9afe;
		background-size: 100%;
		& span {
			padding: 30px 0 0;
			display: block;
		}
		& br {display: block;}
	}

	#main {  gap: 2rem 0;	}

	#main .title {
		background: url(../interview/interview_bg.jpg) no-repeat center  #2f9afe;
		padding:  15px;
		width: 100vw;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	/* 新入社員 =============================================== */
	/* 新入社員 画像 */
	.new a picture img { width: 120px; }

}

/** ==========================================================================================
スマートフォン 500px
=============================================================================================*/
@media screen and (max-width: 500px){
	/* 新入社員 =============================================== */
	.new a {
		background: linear-gradient(145deg, var(--blue-1) 10%, var(--blue-2) 90%);
		border-radius: 10px;
		gap: 8%;
		flex-wrap: wrap;
		margin-bottom: 1rem;
		padding: 1.5rem 1rem 0;
		&::before {
			content: none;
		}
	}
	/* 新入社員 テキスト */
	.new a p {
		margin-bottom: 0.5rem;
		width: 65%;
		order: -1;
		&::before, &::after {
			content: "";
			background: url(../interview/new-3.svg) no-repeat center / contain;
			position: absolute;
			bottom: 0;
			width: 30px;
			height: 60px;
		}
		&::before { left: 0; }
		&::after  { right: 0; }
	}

}