/* -----------------------------------------------------------
    info
-------------------------------------------------------------- */

#info .inner {
	max-width: 1000px;
	min-width: 1000px;
	padding: 100px 0;
}

#info .inner .message-area {
	background: url("../img/img-info.png") no-repeat right top 0;
	padding: 0 330px 80px 0;
}

#info .inner .message-area p {
	padding: 0 0 20px;
}

#info .inner .message-area .name {
	padding: 10px 0 0;
}
#info .inner .message-area .name img {
	width: 100px;
}

#info .inner .info-area table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.6rem;
	line-height: 1.8;
	border-top: 1px #DDD solid;
}

#info .inner .info-area table th {
	padding: 30px 0 30px 65px;
	width: 250px;
    vertical-align: top;
	font-weight: bold;
	text-align: left;
	border-bottom: 1px #DDD solid;
}

#info .inner .info-area table td {
	padding: 30px 0 30px 50px;
	border-bottom: 1px #DDD solid;
}

#info .inner .info-area table td .btn-gr {
	display: inline-block;
	font-weight: bold;
	padding: 20px 0 0;
}

#info .inner .info-area table td .btn-gr a {
	background: #00b050;
	color: #fff;
    position: relative;
	padding: 5px 20px;
	border-radius: 20px;
	width: 100%;
}

#info .inner .info-area table td .btn-gr a:hover {
	box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
}

#info .inner .info-area table td .btn-gr a::before {
	content: "\f041";
    padding: 0 8px 0 0;
}


@media screen and (max-width: 768px){
	
	#info .inner {
		max-width: 100%;
		min-width: 100%;
		padding: 30px 20px 30px;
	}

	#info .inner .message-area {
		background: none;
		padding: 0 0 35px;
	}

	#info .inner .message-area .sp-photo {
		background: url("../img/img-info-sp01.png") no-repeat center top;
		background-size: auto 200px;
		padding: 220px 0 0;
	}

	#info .inner .message-area p {
		padding: 0 0 10px;
	}

	#info .inner .message-area .name {
		padding: 10px 0 0;
	}
	#info .inner .message-area .name img {
		width: 80px;
	}
	

	#info .inner .info-area table {
		border-top: none;
	}

	#info .inner .info-area table th {
		display: block;
		width: auto;
		padding: 10px 20px;
		text-align: left;
		vertical-align: middle;
		font-weight: bold;
		background: #E9ECEF;
		border-bottom: none;
	}

	#info .inner .info-area table td {
		display: block;
		width: 100%;
		border-top: none;
		border-bottom: none;
		padding: 15px 20px 25px 20px;
		text-align: left;
		vertical-align: top;
	}
	
	#info .inner .info-area table td iframe {
		width: 100%;
		height: 250px;
		margin: 20px 0 0;
	}

}