@charset "utf-8";
/* CSS Document */

.interview {
}

.interview_lists {
	.interview_list {
	}
	.interview_link {
		display: block;
		color: #454545;
	}
	.interview_title {
		color: var(--color_lightblue);
	}
	.interview_thumbnail {
		aspect-ratio: 4/3;
		overflow: hidden;
		position: relative;
		.interview_image {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.interview_text {
		line-height: 1.4;
	}
	.interview_message {
		line-height: 1.4;
		text-align: justify;
		border-radius: 10px;
		border: 1px solid #ccc;
		position: relative;
		&::before,
		&::after {
			content: "";
			position: absolute;
			border-style: solid;
			border-color: transparent;
		}
		&::before {
			bottom: 100%;
			border-bottom-color: #ccc;
		}
		&::after {
			bottom: 100%;
			border-bottom-color: #fff;
			z-index: 1;
		}
	}
	.interview_more {
		color: var(--color_lightblue);
		float: right;
	}
}


/* --------------------------------------------------
PC
-------------------------------------------------- */
@media screen and (min-width: 768px) {
	.interview {
	}

	.interview_lists {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		.interview_list {
			width: 48%;		
		}
		.interview_link {
		}
		.interview_link:hover {
			opacity: 0.7;
		}
		.interview_title {
			font-size: 24px;
		}
		.interview_thumbnail {
			.interview_image {
			}
		}
		.interview_text {
			padding: 5px;
		}
		.interview_message {
			font-size: 14px;
			margin: 0 4px;
			padding: 10px;
			&::before {
				right: 50px;
				border-width: 12px;
			}
			&::after {
				right: 52px;
				border-width: 10px;
			}
		}
		.interview_more {
		}
	}
}


/* --------------------------------------------------
スマホ
-------------------------------------------------- */
@media all and (max-width: 767px) {
	.interview {
	}

	.interview_lists {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.interview_list {
			width: 49%;
		}
		.interview_title {
			font-size: 4vw;
		}
		.interview_thumbnail {
			.interview_image {
			}
		}
		.interview_text {
			padding: 1vw;
		}
		.interview_message {
			font-size: 3.25vw;
			margin: 0 0.5vw;
			padding: 1.5vw;
			&::before {
				right: 10%;
				border-width: 12px;
			}
			&::after {
				right: calc(10% + 2px);
				border-width: 10px;
			}
		}
	}
}