/*voice*/

#topVoice {
width: 1000px;
margin: 0 auto;
padding: 80px 0 120px;
}

#topVoice .inner {
display: flex;
}

#topVoice h2 {
float: left;
margin-right: 40px;
width: 52px;
}

#topVoice .voiceList {
width: calc( 100% - 92px );
}

.voiceBox {
margin: 0 0 20px;
padding: 20px 20px 20px 40px;
display: flex;
background-color: #FAF5E2;
}

.voiceBox .info {
width: 80px;
margin-right: 40px;
text-align: center;
}

.voiceBox .info img {
display: block;
}

.voiceBox .text {
width: calc( 100% - 120px);
}

#topVoice .btn a {
	display: block;
	margin: 0 auto;
	padding: 0 16px;
	width: 280px;
	height: 48px;
	border: 1px solid #C6A522;
	text-decoration: none;
	color: #000;
	line-height: 48px;
	background: url(../image/arrow-01.png) #C6A522 no-repeat 94% center;
	background-size: 30px;
}

#topVoice .btn a:hover, #topVoice .btn a:active {
	background: url(../image/arrow-02.png) #C6A522 no-repeat 96% center;
	background-size: 30px;
}

.voiceBox .text .cat {
display: inline-block;
width: 100px;
color: #FFF;
text-align: center;
margin: 0 0 4px;
}

.voiceBox .text .cat01 {
background-color: #AFC777;
}

.voiceBox .text .cat02 {
background-color: #77AFC7;
}

.voiceBox .text .cat03 {
background-color: #C78BB5;
}

.voiceBox .text p {
margin: 0 0 10px;
}

.voiceBox .text dl {
display: flex;
justify-content: end;
}

.voiceBox .text dl dt {
margin-right: 10px;
}

/**/
#secondTitle.voice {
	background: url(../../wn/image/wn_back.jpg) no-repeat center center;
	background-size: cover;
}

.secondVoice {
}

.secondVoice .nav {
display: flex;
margin: 0 0 20px;
padding: 0;
list-style: none;
border-bottom: 1px solid #CCC;
}

.secondVoice .nav li {
margin: 0 2px;
padding: 0;
border: 1px solid #CCC;
border-bottom: none;
cursor: pointer;
display: block;
padding: 4px 20px;
text-align: center;
}

.secondVoice .nav li.current {
background-color: #2f315b;
color: #FFF;
}

.secondVoice .nodisplay {
display: none;
}


@media screen and (max-width: 768px) {

#topVoice {
width: calc( 100% - 40px );
margin: 0 20px;
padding: 60px 0;
}

#topVoice .inner {
display: block;
}

#topVoice h2 {
float: none;
margin: 0 0 20px;
}

.voiceBox {
display: block;
padding: 20px;
}

.voiceBox .info {
margin: 0 0 10px;
text-align: center;
}

.voiceBox .info img {
display: block;
margin: 0 auto 
}

.secondVoice section {
margin: 0;
padding: 0;
}

.secondVoice .nav {
margin: 40px 0 20px;
font-size: 13px;
}

.secondVoice .nav li {
padding: 4px 10px;
}

.secondVoice {
padding: 60px 20px 0;
}

.voiceBox .info {
width: 100%;
}

.voiceBox .text {
width: 100%;
}

#topVoice h2 {
width: auto;
}

#topVoice .voiceList {
width: 100%;
}

}
