@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);


/*-------------------------------------------------------------------
	main
-------------------------------------------------------------------*/

#header .main .mabox.voice {
	background: url("../image/voice/main_bg.jpg") center center no-repeat;
	background-size: cover;
}

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

#voice {
	width:830px;
}

#voice img {
	max-width: 100%;
}

#voice h3 {
	margin: 0 0 20px;
}

#voice .voice {
	margin: 100px 0 0;
	position: relative;
}

#voice .voice .story {
	border: 1px solid #2BAA38;
	margin: 0 0 40px;
}

#voice .voice .story dt {
	text-align: center;
	line-height: 1.0;
	background: #2BAA38;
	color: #fff;
	font-size: 1.6em;
	letter-spacing: 0.1em;
	padding: 7px 0 12px;
}

#voice .voice .story dd {
	overflow: hidden;
	zoom:1;
	padding: 10px 20px;
	line-height: 1.0;
}

#voice .voice .story dd .left {
	max-width: 49%;
	float: left;
	font-size: 0.9em;
}

#voice .voice .story dd .right {
	max-width: 49%;
	float: right;
	text-align: right;
	font-size: 0.8em;
}

#voice .voice .icon {
	position: absolute;
	top: 50px;
	left: -150px;
}

#voice .voice .read {
	margin: 0 0 30px;
}

#voice .voice .one {
	margin: 0 0 30px;
}

#voice .voice .two {
	margin: 0 0 30px;
	overflow: hidden;
	zoom:1;
	font-size: 0.95em;
}

#voice .voice .two li {
	float: left;
	width: 400px;
	text-align: justify;
	text-justify: inter-ideograph;
}

#voice .voice .two li:last-child {
	float: right;
}

#voice .voice h4 {
	background: url("../image/voice/voice_icon02.png") left top no-repeat;
	background-size:auto 100%;
	line-height: 1.0;
	font-size: 1.25em;
	font-weight: 500;
	margin: 0 0 25px;
	padding-left: 30px;
}

#voice .voice .message {
	overflow: hidden;
	zoom:1;
	font-size: 0.9em;
}

#voice .voice .message dt {
	float: left;
	width: 100px;
}

#voice .voice .message dt span {
	display: block;
	padding: 30px 12px;
	background: #8EC053;
	color: #fff;
	line-height: 1.4;
}


#voice .voice .message dd {
	margin-left: 120px;
	border-top: 1px solid #2BAA38;
	border-bottom: 1px solid #2BAA38;
	padding: 10px;
	
}



/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	/* voice */

	#voice {
		width:auto;
	}

	#voice .voice {
		margin: 70px 0 0;
		position: relative;
	}

	#voice .voice .story {
		margin: 0 0 30px;
	}


	#voice .voice .story dd .left {
		max-width: inherit;
		float: none;
	}	

	#voice .voice .story dd .right {
		max-width: inherit;
			float: none;
		margin: 10px 0 0;
	}

	#voice .voice .icon {
		position: static;
		margin: 0;
	}	
	
	#voice .voice .icon img {
		max-width: 20%;
	}

	#voice .voice .one {
		margin: 0 0 10px;
	}
	
	
	#voice .voice .two {
		margin: 0 0 30px;
		overflow: hidden;
		zoom:1;
		font-size: 0.95em;
	}

	#voice .voice .two li {
		float: none;
		width: auto;
		text-align: justify;
		text-justify: inter-ideograph;
		display: inline;
	}	

	#voice .voice .two li:last-child {
		float:none;
	}
	
	#voice .voice .two.imgs li {
		display: block;
	}
	
	#voice .voice .two.imgs li:last-child {
		margin: 10px 0 0;
	}

	#voice .voice h4 {
		background-size:auto 20px;	
		padding-left: 30px;
		font-size: 1.2em;
		line-height: 1.4;
	}

	#voice .voice .message dt {
		float: none;
		width: auto;
	}

	#voice .voice .message dt span {
		padding: 10px;
		text-align: center;
	}
	
	#voice .voice .message dt span br {
		display: none;
	}


	#voice .voice .message dd {
		border-top: none;
		padding: 10px;
		margin: 0;
	}
}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	#header .main .mabox.voice {
		background: url("../image/voice/main_bg.jpg") bottom center no-repeat;
		background-size: cover;
	}

}

/*===============================================
  画面の横幅が380px以下に適用
===============================================*/
@media screen and (max-width: 380px){
}