/*-------------------- pc --------------------*/
/*---------- base > width:1440px ----------*/
.first_area{
	margin-bottom:144px;
}
.first_wrap{
	max-width:1120px;
	margin:0 auto;
	padding:0 20px;
	box-sizing:content-box;

	.headline{
		display:flex;
		justify-content:space-between;
		margin-bottom:26px;

		.left{
			display:flex;
			align-items:center;
			gap:16px;
			
			.voice{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:500;
				font-size:16px;
				line-height:18px;
				color:#c50018;
			}
			.user{
				padding-left:15px;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:500;
				font-size:16px;
				line-height:18px;
				color:#6b6f75;
				background:url(../images/top/customer_icon.svg) center left 0 / 9px no-repeat;
			}
		}
		.right{
			dl{
				display:flex;
				align-items:center;
				gap:8px;
				margin:0;

				dt{
					padding:3px 8px 2px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:14px;
					line-height:20px;
					background-color:#dfe2e5;
					border-radius:2px;
				}
				dd{
					margin:0;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:14px;
					line-height:20px;
				}
			}
		}
	}
	h1{
		margin-bottom:32px;
		padding-bottom:22px;
		font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:32px;
		line-height:48px;
		border-bottom:1px solid #cccfd1;
	}
	.container{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		gap:40px;
		margin-bottom:64px;

		.img{
			img{
				width:100%;
			}
		}
		.box{
			display:grid;
			gap:24px;

			dl{
				display:grid;
				grid-template-columns:120px 1fr;
				position:relative;
				margin:0;

				dt{
					padding-bottom:12px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:16px;
					line-height:24px;
					border-bottom:2px solid #c50018;
				}
				dd{
					margin:0;
					padding:0 0 13px 20px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:16px;
					line-height:24px;
					border-bottom:1px solid #cccfd1;
				}
			}
		}
	}
	.text{
		max-width:800px;
		margin:0 auto;

		p{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:16px;
			line-height:28px;
		}
	}
}

.voice_area{

}
.voice_wrap{
	max-width:1120px;
	margin:0 auto;
	padding:0 20px;
	box-sizing:content-box;
}
.voice_box{
	margin-top:56px;

	&:first-child{
		margin:0;
	}
	.text{
		max-width:800px;
		margin:48px auto 0;

		p{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:16px;
			line-height:28px;
		}
		.right{
			margin-top:37px;
			font-size:14px;
			line-height:21px;
			text-align:right;
			color:#6b6f75;
		}
	}
}
.voice_banner{
	position:relative;
	max-width:800px;
	margin:120px auto 0;

	.img{
		img{
			width:100%;
		}
	}
	.text{
		position:absolute;
		top:50%;
		width:100%;
		transform:translateY(-50%);
		text-align:center;

		p{
			position:relative;
			margin-bottom:6px;
			padding-bottom:7px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:26px;

			&:before{
				content:'';
				position:absolute;
				bottom:0;
				left:50%;
				transform:translateX(-50%);
				width:300px;
				height:8px;
				background:url(../images/voice/banner_border_red.png) center / cover no-repeat;
			}
		}
		h3{
			margin-bottom:10px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:32px;
			line-height:48px;
			color:#c50018;
		}
		.link{
			display:block;
			width:100%;
			max-width:320px;
			margin:0 auto;
			padding:13px 53px 11px 27px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:24px;
			text-align:center;
			color:#ffffff;
			background:url(../images/common/white_circle_red_arrow.png) center right 12px / 24px no-repeat;
			background-color:#c50018;
			border-radius:32px;
			transition:0.3s;

			&:hover{
				opacity:0.7;
			}
		}
	}
}
.comment_container{
	display:grid;
	grid-template-columns:160px 1fr;
	gap:0 40px;
	margin-top:48px;
	padding:61px 80px 56px;
	background-color:#ffffff;
	border-radius:4px;

	img{
		grid-column:1;
		grid-row:1/3;
		width:100%;
	}
	.head{
		.department{
			margin-bottom:9px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:14px;
			line-height:21px;
			color:#6b6f75;
		}
		.name{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:20px;
			line-height:30px;
		}
	}
	p{
		margin-top:13px;
		padding-top:20px;
		font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:500;
		font-size:16px;
		line-height:24px;
		border-top:1px solid #cccfd1;
	}
}





/*-------------------- pc-spの間 --------------------*/
/*---------- base > width:1440px ----------*/
@media(max-width:1439px) and (min-width:769px){
	.first_area{
		margin-bottom:10vw;
	}
	.first_wrap{
		/* max-width:77.778vw; */
		margin:0 auto;
		padding:0 1.389vw;
		box-sizing:content-box;
	
		.headline{
			display:flex;
			justify-content:space-between;
			margin-bottom:1.806vw;
	
			.left{
				display:flex;
				align-items:center;
				gap:1.111vw;
				
				.voice{
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:1.111vw;
					line-height:1.25vw;
					color:#c50018;
				}
				.user{
					padding-left:1.042vw;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:1.111vw;
					line-height:1.25vw;
					color:#6b6f75;
					background:url(../images/top/customer_icon.svg) center left 0 / 0.625vw no-repeat;
				}
			}
			.right{
				dl{
					display:flex;
					align-items:center;
					gap:0.556vw;
					margin:0;
	
					dt{
						padding:0.208vw 0.556vw 0.139vw;
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:500;
						font-size:0.972vw;
						line-height:1.389vw;
						background-color:#dfe2e5;
						border-radius:0.139vw;
					}
					dd{
						margin:0;
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:500;
						font-size:0.972vw;
						line-height:1.389vw;
					}
				}
			}
		}
		h1{
			margin-bottom:2.222vw;
			padding-bottom:1.528vw;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:2.222vw;
			line-height:3.333vw;
			border-bottom:0.069vw solid #cccfd1;
		}
		.container{
			display:grid;
			grid-template-columns:repeat(2, 1fr);
			gap:2.778vw;
			margin-bottom:4.444vw;
	
			.img{
				img{
					width:100%;
				}
			}
			.box{
				display:grid;
				gap:1.667vw;
	
				dl{
					display:grid;
					grid-template-columns:8.333vw 1fr;
					position:relative;
					margin:0;
	
					dt{
						padding-bottom:0.833vw;
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:600;
						font-size:1.111vw;
						line-height:1.667vw;
						border-bottom:0.139vw solid #c50018;
					}
					dd{
						margin:0;
						padding:0 0 0.903vw 1.389vw;
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:500;
						font-size:1.111vw;
						line-height:1.667vw;
						border-bottom:0.069vw solid #cccfd1;
					}
				}
			}
		}
		.text{
			/* max-width:55.556vw; */
			margin:0 auto;
	
			p{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:500;
				font-size:1.111vw;
				line-height:1.944vw;
			}
		}
	}
	
	.voice_area{
	
	}
	.voice_wrap{
		/* max-width:77.778vw; */
		margin:0 auto;
		padding:0 1.389vw;
		box-sizing:content-box;
	}
	.voice_box{
		margin-top:3.889vw;
	
		&:first-child{
			margin:0;
		}
		.text{
			/* max-width:55.556vw; */
			margin:3.333vw auto 0;
	
			p{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:500;
				font-size:1.111vw;
				line-height:1.944vw;
			}
			.right{
				margin-top:2.569vw;
				font-size:0.972vw;
				line-height:1.458vw;
				text-align:right;
				color:#6b6f75;
			}
		}
	}
	.voice_banner{
		position:relative;
		/* max-width:55.556vw; */
		margin:8.333vw auto 0;
	
		.img{
			img{
				width:100%;
			}
		}
		.text{
			position:absolute;
			top:50%;
			width:100%;
			transform:translateY(-50%);
			text-align:center;
	
			p{
				position:relative;
				margin-bottom:0.417vw;
				padding-bottom:0.486vw;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:1.111vw;
				line-height:1.806vw;
	
				&:before{
					content:'';
					position:absolute;
					bottom:0;
					left:50%;
					transform:translateX(-50%);
					width:20.833vw;
					height:0.556vw;
					background:url(../images/voice/banner_border_red.png) center / cover no-repeat;
				}
			}
			h3{
				margin-bottom:0.694vw;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:2.222vw;
				line-height:3.333vw;
				color:#c50018;
			}
			.link{
				display:block;
				width:100%;
				/* max-width:22.222vw; */
				margin:0 auto;
				padding:0.903vw 3.681vw 0.764vw 1.875vw;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:1.111vw;
				line-height:1.667vw;
				text-align:center;
				color:#ffffff;
				background:url(../images/common/white_circle_red_arrow.png) center right 0.833vw / 1.667vw no-repeat;
				background-color:#c50018;
				border-radius:2.222vw;
				transition:0.3s;
	
				&:hover{
					opacity:0.7;
				}
			}
		}
	}
	.comment_container{
		display:grid;
		grid-template-columns:11.111vw 1fr;
		gap:0 2.778vw;
		margin-top:3.333vw;
		padding:4.236vw 5.556vw 3.889vw;
		background-color:#ffffff;
		border-radius:0.278vw;
	
		img{
			grid-column:1;
			grid-row:1/3;
			width:100%;
		}
		.head{
			.department{
				margin-bottom:0.625vw;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:500;
				font-size:0.972vw;
				line-height:1.458vw;
				color:#6b6f75;
			}
			.name{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:500;
				font-size:1.389vw;
				line-height:2.083vw;
			}
		}
		p{
			margin-top:0.903vw;
			padding-top:1.389vw;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:1.111vw;
			line-height:1.667vw;
			border-top:0.069vw solid #cccfd1;
		}
	}
}





/*-------------------- sp --------------------*/
/*---------- デザインベースはwidth:375px ----------*/
@media(max-width:768px){
	.first_area{
		margin-bottom:15.2vw;
	}
	.first_wrap{
		padding:0 4.267vw;
	
		.headline{
			margin-bottom:6.4vw;
	
			.left{
				gap:3.2vw;
				
				.voice{
					font-size:3.2vw;
					line-height:4.8vw;
				}
				.user{
					padding-left:2.933vw;
					font-size:3.2vw;
					line-height:4.8vw;
					background:url(../images/top/customer_icon.svg) center left 0 / 1.867vw no-repeat;
				}
			}
			.right{
				dl{
					gap:2.133vw;
					
					dt{
						padding:1.067vw 2.133vw 0.533vw;
						font-size:3.2vw;
						line-height:4.8vw;
					}
					dd{
						font-size:3.2vw;
						line-height:4.8vw;
					}
				}
			}
		}
		h1{
			margin-bottom:6.4vw;
			padding-bottom:3.467vw;
			font-size:5.867vw;
			line-height:8.8vw;
		}
		.container{
			grid-template-columns:1fr;
			gap:8.533vw;
			margin-bottom:8.533vw;
	
			.box{
				gap:5.333vw;
	
				dl{
					grid-template-columns:26.667vw 1fr;
					
					dt{
						padding-bottom:2.4vw;
						font-size:3.733vw;
						line-height:5.333vw;
					}
					dd{
						padding:0 0 2.4vw 4.533vw;
						font-size:3.733vw;
						line-height:5.333vw;
					}
				}
			}
		}
		.text{
			p{
				font-size:3.733vw;
				line-height:6.4vw;
			}
		}
	}
	
	.voice_wrap{
		padding:0 4.267vw;
	}
	.voice_box{
		margin-top:14.933vw;
	
		.text{
			margin:8.533vw auto 0;
	
			p{
				font-size:4.267vw;
				line-height:7.467vw;
			}
			.right{
				margin-top:5.867vw;
				font-size:3.2vw;
				line-height:4.8vw;
			}
		}
	}
	.voice_banner{
		margin:16vw auto 0;
	
		.text{
			p{
				margin-bottom:1.6vw;
				padding-bottom:1.867vw;
				font-size:3.2vw;
				line-height:4.8vw;
	
				&:before{
					width:60vw;
					height:1.867vw;
				}
			}
			h3{
				margin-bottom:3.467vw;
				font-size:5.867vw;
				line-height:8vw;
			}
			.link{
				max-width:74.667vw;
				padding:3.733vw 12.267vw 3.467vw 6.4vw;
				font-size:3.733vw;
				line-height:5.6vw;
				background:url(../images/common/white_circle_red_arrow.png) center right 3.2vw / 6.4vw no-repeat;
				background-color:#c50018;
			}
		}
	}
	.comment_container{
		grid-template-columns:26.667vw 1fr;
		align-items:center;
		gap:0 4.267vw;
		margin-top:8.533vw;
		padding:6.4vw 4.267vw 4.533vw;
		
		img{
			grid-column:1;
			grid-row:1;
		}
		.head{
			grid-column:2;
	
			.department{
				margin-bottom:1.6vw;
				font-size:3.2vw;
				line-height:4.8vw;
			}
			.name{
				font-size:4.8vw;
				line-height:7.467vw;
			}
		}
		p{
			grid-row:2;
			grid-column:1/3;
			margin-top:4.267vw;
			padding-top:4.267vw;
			font-size:3.733vw;
			line-height:6.4vw;
		}
	}
	
	/* .first_area{
		margin-bottom:57px;
	}
	.first_wrap{
		padding:0 16px;
	
		.headline{
			margin-bottom:24px;
	
			.left{
				gap:12px;
				
				.voice{
					font-size:12px;
					line-height:18px;
				}
				.user{
					padding-left:11px;
					font-size:12px;
					line-height:18px;
					background:url(../images/top/customer_icon.svg) center left 0 / 7px no-repeat;
				}
			}
			.right{
				dl{
					gap:8px;
					
					dt{
						padding:4px 8px 2px;
						font-size:12px;
						line-height:18px;
					}
					dd{
						font-size:12px;
						line-height:18px;
					}
				}
			}
		}
		h1{
			margin-bottom:24px;
			padding-bottom:13px;
			font-size:22px;
			line-height:33px;
		}
		.container{
			grid-template-columns:1fr;
			gap:32px;
			margin-bottom:32px;
	
			.box{
				gap:20px;
	
				dl{
					grid-template-columns:100px 1fr;
					
					dt{
						padding-bottom:9px;
						font-size:14px;
						line-height:20px;
					}
					dd{
						padding:0 0 9px 17px;
						font-size:14px;
						line-height:20px;
					}
				}
			}
		}
		.text{
			p{
				font-size:14px;
				line-height:24px;
			}
		}
	}
	
	.voice_wrap{
		padding:0 16px;
	}
	.voice_box{
		margin-top:56px;

		.text{
			margin:32px auto 0;
	
			p{
				font-size:16px;
				line-height:28px;
			}
			.right{
				margin-top:22px;
				font-size:12px;
				line-height:18px;
			}
		}
	}
	.voice_banner{
		margin:60px auto 0;
	
		.text{
			p{
				margin-bottom:6px;
				padding-bottom:7px;
				font-size:12px;
				line-height:18px;
	
				&:before{
					width:225px;
					height:7px;
				}
			}
			h3{
				margin-bottom:13px;
				font-size:22px;
				line-height:30px;
			}
			.link{
				max-width:280px;
				padding:14px 46px 13px 24px;
				font-size:14px;
				line-height:21px;
				background:url(../images/common/white_circle_red_arrow.png) center right 12px / 24px no-repeat;
				background-color:#c50018;
			}
		}
	}
	.comment_container{
		grid-template-columns:100px 1fr;
		align-items:center;
		gap:0 16px;
		margin-top:32px;
		padding:24px 16px 17px;
		
		img{
			grid-column:1;
			grid-row:1;
		}
		.head{
			grid-column:2;

			.department{
				margin-bottom:6px;
				font-size:12px;
				line-height:18px;
			}
			.name{
				font-size:18px;
				line-height:28px;
			}
		}
		p{
			grid-row:2;
			grid-column:1/3;
			margin-top:16px;
			padding-top:16px;
			font-size:14px;
			line-height:24px;
		}
	} */
}