@charset "UTF-8";

.link-interview {
	position: relative;
}

.occupation {
	height: 47px;
	position: absolute;
	z-index: 90;
}

.interview_career {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
	color: #fff;
	background: rgba(0,160,198,0.9);
	box-sizing: border-box;
}

.interview_name {
	display: block;
  min-width: 1em;
	margin: 0;
}

.interview_notes {
	text-align: right;
}

.interview_notes span {
	display: block;
}


@media screen and (min-width: 641px), print {
	/* ------------------  pc   ------------------   */
	
	.page_header img {
		width: 265px;
	}	

	.interview_area_wrap {
		padding-top: 3px;
		margin-bottom: 30px;
	}

	.link-interview {
		padding: 0 0 0 8px;		
	}
	
	.interview_photo {
		margin: 0 8px 8px 0;
		box-shadow: 8px 8px #eeeeee;
	}
	
	.link-interview:hover .interview_photo {
		opacity: 0.70;
		filter: alpha(opacity=70);
		-ms-filter: "alpha( opacity=70 )";
	}

	.link-interview:hover .interview_career {
		background: rgba(2,189,229,0.9);
	}
	
	.occupation {
		left: 0;
		top: -9px;
	}

	.interview_career {
		width: 206px;
		padding: 8px 13px 8px 19px;
		position: absolute;
		left: 8px;
		bottom: 13px;
	}
	
	.interview_name {
		padding: 3px 0 4px;
		font-size: 18px;
	}
	
	.interview_notes {
		font-size: 12px;
		line-height: 1.4;
	}
	
	
	
}


@media screen and (max-width: 640px){
	/* ------------------  smp   ------------------   */
	
	.interview_area_wrap {
		margin-bottom: 5px;
	}
	
	.page_header img {
		width: 265px;
	}		
	
	.interview_area_wrap:after {
		content: "";
		display: block;
		clear: both;
	}
	
	.sp-left .link-interview_wrap{
		float: right;
	}
	
	.sp-right .link-interview_wrap {
		float: left;
	}
	
	.link-interview_wrap {
		display: inline-block;
		margin: 9px 0 0 6px;
	}
	
	.interview_photo {
		line-height: 0;
		margin-bottom: 4px;
		box-shadow: 4px 4px #eeeeee;
	}	
	
	.occupation {
		left: -5px;
		top: -9px;
	}
	
	.occupation img {
		width: 70%;
	}
		
	.interview_career_wrap {
		display: block;
		width: 100%;
		position: absolute;
		bottom: 8px;
	}
	
	.interview_career_wrap:after {
		content: "";
		display: block;
		clear: both;
	}
	
	.interview_career {
		width: 100%;
		max-width: 210px;
		margin-right: 4px;
	}
	
	.interview_name {
		padding: 8px 0 8px 11px;
		font-size: 12px;
	}
	
	.interview_notes {
		padding: 5px 8px 3px 0;
		line-height: 1.4;
		font-size: 9px;
		font-weight: bold;
	}
		

}