@charset 'UTF-8';
.character-about {
	*zoom : 1;
}
.character-about:after {
	content : ' ';
	display : table;
	clear : both;
}
.character-about .about-txt {
	overflow : hidden;
}
.character-about .about-txt > .m-txt-ttl3 {
	margin-top : 0;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-about .about-txt > .m-txt-ttl3 {
		margin-top : 20px;
	}
}
.character-about .about-txt dl {
	margin : 50px 0;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-about .about-txt dl {
		margin : 20px 0;
	}
}
.character-about .about-txt dl dt {
	float : left;
	padding-right : 20px;
	width : 170px;
	color : #2078b8;
	font-size : 35.2px;
	font-size : 2.2rem;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-about .about-txt dl dt {
		padding-right : 10px;
		width : 36%;
		font-size : 1.6rem;
	}
}
.character-about .about-txt dl dd {
	overflow : hidden;
	font-size : 35.2px;
	font-size : 2.2rem;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-about .about-txt dl dd {
		font-size : 1.6rem;
	}
}
.character-about .about-txt .txt-desc {
	font-size : 25.6px;
	font-size : 1.6rem;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-about .about-txt .txt-desc {
		font-size : 1.4rem;
	}
}
.character-about .about-img {
	float : right;
	width : 360px;
	margin-left : 100px;
	text-align : left;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-about .about-img {
		float : none;
		width : 100%;
		margin-left : 0;
		margin-bottom : 20px;
		text-align : center;
	}
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-about .about-img img {
		width : 180px;
	}
}

.character-image {
	margin-top : 60px;
	@include　child_mt (0);
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-image {
		margin-top : 30px;
	}
}

.character-video {
	position : relative;
	margin-top : 35px;
	text-align : center;
	z-index : 1;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video {
		margin-bottom : 10px;
	}
}
.character-video .video-poster {
	position : absolute;
	top : 0;
	left : 50%;
	-webkit-transform : translateX(-50%);
	    -ms-transform : translateX(-50%);
	        transform : translateX(-50%);
	width : 768px;
	height : 432px;
	z-index : 2;
	cursor : pointer;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video .video-poster {
		width : 100%;
		height : 100%;
		overflow : hidden;
	}
}
.character-video .video-poster img {
	width : 100%;
	height : auto;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video .video-poster img {
		position : absolute;
		top : 50%;
		left : 0;
		-webkit-transform : translateY(-50%);
		    -ms-transform : translateY(-50%);
		        transform : translateY(-50%);
	}
}
.character-video .video-poster:before {
	content : '';
	position : absolute;
	top : 50%;
	left : 50%;
	-webkit-transform : translate(-50%, -50%);
	    -ms-transform : translate(-50%, -50%);
	        transform : translate(-50%, -50%);
	width : 118px;
	height : 118px;
	border : 1px solid #fff;
	border-radius : 50%;
	background : rgba(255, 255, 255, 0.5);
	z-index : 2;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video .video-poster:before {
		width : 56px;
		height : 56px;
	}
}
.character-video .video-poster:after {
	content : '';
	position : absolute;
	top : 50%;
	left : 50%;
	-webkit-transform : translate(-50%, -50%);
	    -ms-transform : translate(-50%, -50%);
	        transform : translate(-50%, -50%);
	margin-left : 5px;
	width : 0;
	height : 0;
	border-style : solid;
	border-width : 18px 0 18px 36px;
	border-color : transparent transparent transparent #fff;
	z-index : 3;
	-webkit-transition : all 0.5s ease;
	        transition : all 0.5s ease;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video .video-poster:after {
		margin-left : 3px;
		border-width : 9px 0 9px 18px;
	}
}
.character-video .video-poster .poster-bg {
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : rgba(0, 0, 0, 0.3);
	z-index : 0;
	-webkit-transition : all 0.5s ease;
	        transition : all 0.5s ease;
}
.character-video .video-poster .poster-bg:after {
	content : '';
	position : absolute;
	top : 50%;
	left : 50%;
	-webkit-transform : translate(-50%, -50%) scale(0);
	    -ms-transform : translate(-50%, -50%) scale(0);
	        transform : translate(-50%, -50%) scale(0);
	width : 118px;
	height : 118px;
	background : #fff;
	border-radius : 50%;
	z-index : 1;
	opacity : 1;
	-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
	-webkit-transition : all 0.3s ease;
	        transition : all 0.3s ease;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video .video-poster .poster-bg:after {
		width : 56px;
		height : 56px;
	}
}
@media screen and (min-width: 1080px) {
	.character-video .video-poster:hover:after {
		border-color : transparent transparent transparent #1a78b8;
	}
	.character-video .video-poster:hover .poster-bg {
		background : transparent;
	}
	.character-video .video-poster:hover .poster-bg:after {
		-webkit-transform : translate(-50%, -50%) scale(1);
		    -ms-transform : translate(-50%, -50%) scale(1);
		        transform : translate(-50%, -50%) scale(1);
	}
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video > iframe {
		width : 100%;
		height : auto;
	}
}
.character-video .video-caption {
	font-size : 28.8px;
	font-size : 1.8rem;
	font-weight : bold;
	padding : 10px 0;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video .video-caption {
		position : absolute;
		bottom : -30px;
		width : 100%;
		font-size : 1.4rem;
		padding : 5px 0;
	}
}
.character-video.video-s .video-poster {
	width : 278px;
	height : 156px;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video.video-s .video-poster {
		width : 100%;
		height : 100%;
		overflow : hidden;
	}
}
.character-video.video-s .video-poster:before {
	width : 56px;
	height : 56px;
}
.character-video.video-s .video-poster:after {
	margin-left : 3px;
	border-width : 9px 0 9px 18px;
}
@media screen and (min-width: 0) and (max-width: 768px) {
	.character-video.video-s .video-poster:after {
		margin-left : 3px;
	}
}
.character-video.video-s .video-poster .poster-bg:after {
	width : 56px;
	height : 56px;
}
@media screen and (min-width: 1080px) {
	.character-video.video-s .video-poster:hover:after {
		border-color : transparent transparent transparent #1a78b8;
	}
	.character-video.video-s .video-poster:hover .poster-bg {
		background : transparent;
	}
	.character-video.video-s .video-poster:hover .poster-bg:after {
		-webkit-transform : translate(-50%, -50%) scale(1);
		    -ms-transform : translate(-50%, -50%) scale(1);
		        transform : translate(-50%, -50%) scale(1);
	}
}