img {
	vertical-align:middle;
}
.modal {
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	max-width:980px;
	margin-top:inherit !important;
	width:100%;
	background:transparent;
	z-index:10;
}
.videoModal {
	transform:translate(-50%,-50%);
}
.modalHead {
	display:-webkit-flex;
	display:flex;
	justify-content:space-between;
	-ms-align-items:center;
	align-items:center;
	padding:9px 31px 11px 39px;
	background-color:#202020;
}
.modalHead h3 span:first-child {
	margin-right:18px;
	font-size:24px;
	font-family:'Century Gothic';
	font-weight:bold;
	color:#999;
}
.modalHead h3 span {
	display:inline-block;
	font-size:14px;
	font-weight:bold;
	color:#999;
	vertical-align:middle;
}
.overlay {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	z-index:9;
}
.modalContent {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:row;
	flex-direction:row;
	padding:0;
}
.modalContent .trainerImage {
	display:-webkit-flex;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#000;
}
.modalContent .trainerImage img {
	vertical-align:middle;
}
.modal.active .modalHead ,
.modal.active .modalContent {
	display:none;
}
.modal .modalContent {
	display:-webkit-flex;
	display:flex;
}
.modalContent .trainerImage ,
.modalContent .trainerDetail {
	width:50%;
}
.modalContent ,
.modalHead {
	animation-name:modalshow;
	animation-duration:1s;
}
@keyframes modalshow {
	from {opacity: 0;}
	to {opacity: 1;}
}
.modalContent .trainerDetail {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:column;
	flex-direction:column;
}
.modalContent .trainerDetail .infoList {
	font-size:14px;
	color:#333;
	margin-top:35px;
}
.modalContent .trainerDetail .name {
	display:block;
	font-size:14px;
	color:#333;
	margin-top:65px;
	font-family:'Century Gothic';
}
.modalContent .trainerDetail .nameJapan {
	position:relative;
	margin-top:11px;
	display:block;
	font-size:52px;
	color:#333;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.modalContent .trainerDetail .nameJapan:after {
	content:"";
	position:absolute;
	bottom:-18px;
	left:0;
	width:15px;
	height:2px;
	background-color:#990014;
}
.modalContent .trainerDetail .top {
	display:block;
	min-height:270px;
	padding:10px 10px 10px 43px;
	background-color:#FFF;
}
.modalContent .trainerDetail .top > div {
	display:flex;
	flex-direction:column;
}
.modalContent .trainerDetail .bottom {
	display:block;
	min-height:390px;
	padding:10px 10px 10px 38px;
	background-color:#202020;
}
.bottom .messCard {
	display:inline-block;
	margin-top:30px;
	margin-bottom:15px;
	padding:5px 28px;
	background-color:#990014;
	color:#FFF;
	font-size:15px;
}
.bottom .messTitle {
	margin-bottom:35px;
	color:#EEE;
	font-size:20px;
	line-height:1.5;
}
.bottom .messSpecialty p {
	display:block;
	position:relative;
	margin-bottom:18px;
	font-size:15px;
	color:#FFF;
}
.bottom .messSpecialty p:after {
	position:absolute;
	left:0;
	bottom:-10px;
	height:2px;
	width:15px;
	background-color:#990014;
	content:'';
}
.bottom .messSpecialty ul {
	font-size:14px;
	color:#EEE;
	line-height:1.8;
}
.bottom .messSpecialty li {
	padding-left:1em;
	background:url(../img/common/icon_list_01.png) 0 11px no-repeat;
	color:#DDD;
}

@media screen and (max-width: 1199px) {
	.modalContent .specialDisplay {
		display:none;
	}
}
@media screen and (max-width: 1010px) {
	.modalContent {
		-webkit-flex-direction:column;
		flex-direction:column;
	}
	.modalContent .trainerImage p {
		text-align: center;
	}
	.modalContent .trainerImage img {
		width:50%;
	}
	.modalContent .trainerImage,
	.modalContent .trainerDetail {
		width:100%;
	}
	.modalContent .trainerDetail {
		-webkit-flex-direction:row;
		flex-direction:row;
	}
	.modalContent .trainerDetail .top,
	.modalContent .trainerDetail .bottom {
		justify-content:center;
		-ms-align-items:center;
		align-items:center;
		width:50%;
		height:inherit;
		min-height:inherit;
		padding:20px;
	}
	.modalContent .trainerDetail .name,
	.bottom .messCard {
		margin-top:0;
	}
	.bottom .messSpecialty p {
		padding-right:15px;
	}
	.bottom .messSpecialty ul {
		padding-left:15px;
	}
}
@media screen and (max-width: 736px) {
	.videoModal {
		width:90%;
	}
	.modalContent {
		-webkit-flex-direction:column;
		flex-direction:column;
	}
	.modalContent .trainerImage,
	.modalContent .trainerDetail {
		width:100%;
	}
	.modalContent .trainerDetail {
		-webkit-flex-direction:column;
		flex-direction:column;
	}
	.modalContent .trainerDetail .top,
	.modalContent .trainerDetail .bottom {
		justify-content:flex-start;
		-ms-align-items:center;
		align-items:center;
		width:100%;
		height:inherit;
		padding:10px;
	}
	.modalContent .trainerDetail .name {
		margin-top:0;
		font-size:12px;
	}
	.modalContent .trainerDetail .nameJapan {
		margin-top:5px;
		font-size:30px;
	}
	.modalContent .trainerDetail .nameJapan:after {
		bottom:-5px;
	}
	.modalContent .trainerDetail .infoList {
		margin-top:15px;
		font-size:14px;
	}
	.bottom .messCard {
		margin-top:0;
		margin-bottom:5px;
		padding:3px 15px;
		font-size:11px;
	}
	.modalHead h3 span:first-child {
		font-size:16px;
	}
	.modalHead h3 span {
		font-size:12px;
	}
	a.close img {
		width:50%;
	}
	.modalHead {
		padding:10px;
	}
	.bottom .messTitle {
		margin-bottom:10px;
		font-size:15px;
	}
	.bottom .messSpecialty p {
		font-size:12px;
		padding-right:10px;
	}
	.bottom .messSpecialty ul {
		padding-left:0;
		font-size:12px;
	}
	.modalContent .trainerDetail .top>div {
		padding-top:0;
	}
}