@charset "UTF-8";
/* CSS Document */

/*actor用スタイル*/
h3{
	text-align: center;
}
.main .content{
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
	background-color: initial;
}
.info{
	box-shadow: 2px 5px 10px rgba(0, 0, 0, .15);	
}
@media (min-width: 1500px) {
	.container{
		width:1575px;
	}
}

.modal-dialog{
	width:1150px;
	font-size:15px;
}
.modal-title{
	margin-bottom: 20px;
}
.modal-body{
	clear: both;
}
table{
	width:95%;	
}
.modal-text{
	clear: both;
}
table .tamidashi{
	text-align: center;
	background-color: #000;
	color:#fff;
}

.actor{
	margin:1em 0.5em;
}
.actor label {
	font-weight: bold;
	position: relative;
	display: block;
	width: 85%;
	margin: 0.2em auto 0;
	padding: 0.3em 1em;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	color: #FFF;
	border-radius: 3px;
	border-color: #000;
	background: #000;
}

.actor label:hover {
	transition: all 0.3s;
	color: #000;
	background: #FEF761;
}
.actor label::after {
/*	font-family: 'FontAwesome';
	content: '続きを見る \f067';*/
	color: #FEF761;
}
.actor label:hover::after {
	color: #ffffff;
}

.voice li{
width:22%;
height: 80px;
float:left;
border:1px solid #000;
box-sizing :border-box;
display: flex;
margin: 15px;      
}
figcaption{
	font-size:15px;
}
.voice figure1 { width: 90%; height: 20px;
        padding: 1px; margin-bottom: 1px; 
        text-align: center;
}
.voice audio {
	width: 90%;
	height: 25px;
	margin: 10px 20px;
    border: 2px solid;
    display:flex
 }
@media screen and (min-width:640px){
	.prof img{
		margin:0 30px;
		float: left;
	}
	iframe{
		width:200px;
		height:30px; 
	}
	.prof{
		margin-right:50px;
	}
}
@media screen and (max-width:1200px){
    .actor label {
        width: 80%;
		margin-bottom: 1em;
    }
	.modal-dialog{
		width:800px;
	}
	.voice li{
	width:45%;
	}
	img{
		width:100%;
	}
}

@media screen and (max-width:767px){
    .actor label {
        width: 80%;
		margin-bottom: 1em;
    }
	.modal-dialog{
		width:700px;
	}
	.voice li{
	width:45%;
	}
	th{
		width:60%;
	}
}

@media screen and (max-width:640px){
    .actor label {
		color: #fff;
		background: #000;
    }
	.modal-dialog{
		width:95%;
	}
	.voice li{
		width:40%;
	}
	.prof{
		text-align: center;
	}
	iframe{
		margin-left:15px;
		width:80%;
		height:40px; 
	}
	th{
		width:60%;
	}
}