@charset "utf-8";
/**
 * お客様の声セクション共通スタイル（voice.css）
 *
 * 概要: 全サービスページで共有するインタビューカードのスタイル
 * 仕様: カラーはfoundation.cssのCSS変数で制御
 * 制限: voice-sec-inner（manufacturing固有）、other-support-area、
 *       renewal-point-area 等はページ固有のため含まない
 */


/* === セクション基本 ===
-----------------------------------------------------------*/
.voice-sec { position: relative; margin-top: 0; }


/* === インタビューカード ===
-----------------------------------------------------------*/
.interview-list-item {
	width: calc(92% / 3);
	background-color: var(--voice-card-bg);
	box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
	transition: transform var(--base-duration) var(--base-easing);
}
.interview-list-item:not(:nth-child(-n+3)) { margin-top: 4%; }
.interview-list-item:nth-child(3n-1) { margin-right: 4%; margin-left: 4%; }

.interview-image-wrap { overflow: hidden; }
.interview-list-item .interview-logo {
	width: 120px; height: auto; position: absolute;
	bottom: 0; right: 0; z-index: 2;
	background-color: #fff; padding: 8px;
}
.interview-image {
	width: 100%; height: auto;
	transition: transform var(--base-duration) var(--base-easing);
}

.interview-item-body { padding: 16px 24px; }

.archive-tag-list { font-size: 12px; height: 70px; overflow: hidden; }
.archive-tag-list li {
	color: var(--text-color); display: inline-block; font-weight: 900;
	margin-right: 8px; margin-bottom: 8px; padding: 8px 12px;
	line-height: 1; background-color: var(--yellow-color-tertiary);
	border-radius: 40px;
}
.archive-tag-list:last-child { margin-right: 0px; }

.interview-title {
	color: var(--voice-title-color); font-weight: 900;
	line-height: 1.4; font-size: 110%; margin-top: 8px;
}
.interview-item-body .company-name {
	color: var(--voice-company-color);
	font-size: 80%; margin-top: 16px;
}


/* === ホバー・アクティブ ===
-----------------------------------------------------------*/
.interview-list-item:active { transform: translateY(-8px); }
.interview-link:active .interview-image { transform: rotate(-4deg) scale(1.1); }

@media (hover: hover) and (pointer: fine) {
	.interview-list-item:hover { transform: translateY(-8px); }
	.interview-link:hover .interview-image { transform: rotate(-4deg) scale(1.1); }
}


/* === レスポンシブ ===
-----------------------------------------------------------*/
@media (max-width: 767px) {
	.interview-list-item:not(:nth-child(-n+1)) { margin-top: 6.4%; }
	.interview-list-item { width: 100%; }
	.interview-list-item:nth-child(3n-1) { margin-right: 0%; margin-left: 0%; }
	.interview-list-item:nth-child(2n-1) { margin-right: 0%; }
	.interview-list-item:nth-child(2n) { margin-left: 0%; }
}