@charset "utf-8";
/* ******************************************************************
 *	File name		: voice.css
 *	Summary			: css style
 * ******************************************************************
 */

/* 940 */

:root {
	--text-color: #04447C;
	--odd-color:  #B3D798;
	--even-color: #FEDC4C;
}

section{
	position:relative;
	left:-10px;
	width:calc(100% + 20px);
	max-width:calc(100% + 20px);
	margin-top:-50px;
	padding:35px 35px;
	background:rgba(255, 255, 255, 0.863);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.4);
	border-radius: 5px;
	z-index:100;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	section{
		margin-top:-7px;
		padding:20px 20px;
	}
}


/* ----------------------------------------------------------------------
   voice
---------------------------------------------------------------------- */

.voice_box{
	position:relative;
	margin-bottom:80px;
	}
	.voice_box::after{
		content:" ";
		position:absolute;
		left:calc(50%);
		bottom:-30px;
		width:740px;
		max-width:90%;
		height:1px;
		border-bottom:5px dotted #FEDC4C;
		transform:translate(-50%,0);
}

/* --- responsive --- */
@media screen and (max-width:767px){
}

/* ----------------------------------------------------------------------
   voice_head
---------------------------------------------------------------------- */

.voice_head{
	position:relative;
	width:100%;
	margin:0 0 20px;
}

/* ----------------------------------------------------------------------
   figure
---------------------------------------------------------------------- */

.voice_box figure{
	position:relative;
	width:calc(100% - 175px);
	height:auto;
	z-index:0;
	}
	.voice_box figure img{
		width:100%;
		height:auto;
}
.voice_box:nth-child(odd) figure{
	margin-left:175px;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	.voice_box figure{
		width:100%;
	}
	.voice_box:nth-child(odd) figure{
		margin-left:0px;
	}
}

/* ----------------------------------------------------------------------
   name
---------------------------------------------------------------------- */

.voice_name{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:calc(50% - 73px);
	width:307px;
	height:146px;
	background:rgba(255,255,255,0.9);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	z-index:5;
}
.voice_box:nth-child(odd) .voice_name{
	left:0px;
}
.voice_box:nth-child(even) .voice_name{
	right:0px;
}
.voice_name > div{
	display:inline-block;
	text-align:center;
	}
	.voice_name > div *{
		color:var(--text-color);
	}
	.voice_name > div h3{
		display:inline-block;
		margin:0px !important;
		font-weight:bold !important;
		font-size:1.9rem !important;
		text-align:center;
	}
	.voice_name > div h3 span{
		font-weight:normal;
		font-size:1.4rem;
	}
	.voice_name > div p{
		display:inline-block;
		margin:0px !important;
		font-weight:normal;
		font-size:1.4rem !important;
		text-align:center;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	.voice_name{
		position:relative;
		top:-10px;
		width:350px;
		max-width:90%;
		height:80px;
		margin:0 auto;
	}
	.voice_name > div h3{
		font-size:1.4rem !important;
	}
	.voice_name > div h3 span,
	.voice_name > div p{
		font-size:1.0rem !important;
	}
}

/* ----------------------------------------------------------------------
   dl
---------------------------------------------------------------------- */

.voice_box dl{
	position:relative;
	}
	.voice_box dl::after{
	    content:" ";
	    display:block;
	    clear:both;
	}
	.voice_box dl dt,
	.voice_box dl dd{
		position:relative;
		margin-bottom:20px;
		font-size:0.87rem;
	}
	.voice_box dl dt{
		float:left;
	    clear:both;
		top:3px;
		width:260px;
		padding:7px 10px;
		font-weight:bold;
		background:var(--odd-color);
		color:var(--text-color);
		line-height:1.2;
	}
	.voice_box dl dd{
		float:right;
		width:calc(100% - 285px);
		color:#333;
}

.voice_box:nth-child(even) dl dt{
	background:var(--even-color);
}

/* --- responsive --- */
@media screen and (max-width:767px){
	.voice_box dl dt{
		float:none;
		top:0px;
		width:100%;
		margin-bottom:7px;
		padding:7px 10px;
	}
	.voice_box dl dd{
		float:none;
		width:100%;
	}
}