@charset "UTF-8";

/* ---------------------------------------- file info */
/* filename:training.css */
/* creation date:2016年9月1日 */
/* last updated:2016年9月6日 */
/* -------------------------------------------------- */

/* ----------------------------
	001-01.ttlBlock
----------------------------- */
#ttlSubPageBlock .inner h2 ,
#ttlPageBlock .inner h2 {
	color: #e50065;
}
#ttlSubPageBlock .inner small ,
#ttlPageBlock .inner small {
	color: #57b52f;
}

/* ----------------------------
	001-02. case
----------------------------- */
.mainContent section#case {
	width: 830px;
	padding-bottom: 25px;
	background: #58B52F;
	margin: 10px auto;
}
.mainContent section#case > header {
	text-align: center;
	padding: 35px 0 20px;
}
.mainContent section#case header h2 {
	color: #fff;
	font-size: 200%;
	line-height: 1.1;
	text-shadow: 0px 2px 0px rgba(85, 71, 58, 0.15);
}
.mainContent section#case header small {
	font-size: 93%;
	font-family: GB;
	color: #00459b;
}
.mainContent section#case .inner {
	width: 780px;
	background: #fff;
	padding: 30px;
	border-radius: 10px;
	margin: 0 auto;
	overflow: hidden;
}
.mainContent section#case .inner article figure {
	width: 330px;
	height: 220px;
	border: 4px solid #E50064;
	text-align: center;
	float: left;
	overflow: hidden;
}
.mainContent section#case .inner article figure img {
	width: 100%;
	height: auto;
}
.mainContent section#case .inner article .in {
	width: 360px;
	float: right;
}
.mainContent section#case .inner article .in h3 {
	font-size: 158%;
	line-height: 1.2;
	color: #00459b;
}
.mainContent section#case .inner article .in .time {
	color: #e50065;
}
.mainContent section#case .inner article .in .txt {
	padding: 10px 0;
}
.mainContent section#case .inner article .in .btn {
	text-align: center;
}
.mainContent section#case .inner article .in .btn a {
	width: 190px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: block;
	margin: 0 auto;
	border-radius: 5px;
	background: #E50064;
	color: #fff;
}
.mainContent section#case .inner article .in .btn a i {
	color: #00459b;
}
.mainContent section#case .inner article .in .btn a:hover {
	background: #58B52F;
}
.mainContent section#works {
	width: 400px;
	background: #fff;
	text-align: center;
	border-radius: 10px;
	padding-bottom: 25px;
	margin: 40px 10px 40px 70px;
	float: left;
}
.mainContent section#program {
	width: 400px;
	text-align: center;
	background: #fff;
	padding-bottom: 25px;
	border-radius: 10px;
	margin: 40px 70px 40px 10px;
	float: right;
}

.mainContent section#program header ,
.mainContent section#works header {
	padding: 35px 0 15px;
}
.mainContent section#program header h2 ,
.mainContent section#works header h2 {
	font-size: 189%;
	line-height: 1.2;
	color: #e50065;
	text-shadow: 0px 2px 0px rgba(85, 71, 58, 0.15);
}
.mainContent section#program header small ,
.mainContent section#works header small {
	color: #00459b;
	font-family: GB;
}
.mainContent section#program figure ,
.mainContent section#works figure {
	width: 360px;
	height: 110px;
	margin: 0 auto 15px;
	border: 3px solid #00479D;
	overflow: hidden;
}
.mainContent section#program figure img ,
.mainContent section#works figure img {
	width: 100%;
	height: auto;
}
.mainContent section#program p ,
.mainContent section#works p {
	font-size: 107%;
	min-height: 3.4em;
	margin: 0 20px 15px;
	text-align: left;
}
.mainContent section#program .btn a ,
.mainContent section#works .btn a {
	width: 190px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: block;
	margin: 0 auto;
	border-radius: 5px;
	background: #58B52F;
	color: #fff;
}
.mainContent section#program .btn a i ,
.mainContent section#works .btn a i {
	color: #00459b;
}
.mainContent section#program .btn a:hover ,
.mainContent section#works .btn a:hover {
	background: #E50064;
}

.mainContent aside.proguramBanner {
	clear: both;
	position: relative;
	z-index: 10;
}

.mainContent aside.proguramBanner a {
	width: 500px;
	height: 110px;
	font-family: GB;
	border-radius: 5px;
	font-size: 158%;
	line-height: 60px;
	color: #fff;
	background: #E50064;
	margin: 0 auto;
	display: block;
	padding: 25px 50px 25px 120px;
	position: relative;
	text-shadow: 0px 2px 0px rgba(85, 71, 58, 0.15);
}
.mainContent aside.proguramBanner a span {
	font-size: 79%;
	color: #fca628;
	margin: 0 12px;
}
.mainContent aside.proguramBanner a small {
	font-size: 50%;
	color: #00459b;
	margin-left: 5px;
}
.mainContent aside.proguramBanner a figure {
	position: absolute;
	left: 25px;
	top: 50%;
	margin-top: -40px;
	line-height: 80px;
}
.mainContent aside.proguramBanner a i {
	font-size: 84%;
	line-height: 2;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -1em;
}
.mainContent aside.proguramBanner a:hover {
	background: #1FB900;
}

.mainContent .entryBtn {
	width: 100%;
	position: absolute;
	text-align: center;
	bottom: -50px;
	left: 0;
	z-index: 10;
}


@media only screen and (min-width: 641px) {
}

@media only screen and (max-width: 640px) {
}


/* ----------------------------
	001-03. program
----------------------------- */
.mainContent .program {
	width: 850px;
	margin: 0 auto;
}
.mainContent .program > p {
	font-family: GB;
	font-size: 114%;
	color: #fff;
	padding-bottom: 20px;
}
.mainContent .program section {
	color: #fff;
	overflow: hidden;
	padding: 20px 0;
}
.mainContent .program section h4 {
	font-size: 171%;
}
.mainContent .program section h4 i {
	font-size: 150%;
	color: #00459b;
	position: relative;
	bottom: -4px;
}
.mainContent .program section .inner {
	padding: 10px 5px;
	overflow: hidden;
}
.mainContent .program section#result .inner h5 {
	width: 140px;
	text-align: center;
	font-size: 114%;
	line-height: 30px;
	border-radius: 15px;
	float: left;
	background: #E40264;
	margin-left: 25px;
}
.mainContent .program section#result .inner .in {
	width: 640px;
	float: right;
}
.mainContent .program section#result .inner .in h6 {
	font-size: 129%;
	color: #57b52f;
	padding-bottom: 10px;
}
.mainContent .program section#result .inner .in ul {
	padding-bottom: 30px;
}
.mainContent .program section#result .inner .in ul li {
	font-size: 114%;
	line-height: 1.5;
	position: relative;
	padding: 5px 5px 15px 20px;
}
.mainContent .program section#result .inner .in ul li:before {
	content: "●";
	color: #e50065;
	position: absolute;
	left: 0;
	top: 5px;
}

.mainContent .program section#process .inner .catch {
	text-align: center;
	padding: 20px 0 50px;
	font-size: 129%;
}
.mainContent .program section#process .inner .catch b {
	color: #fff;
	display: inline-block;
	padding: 20px 30px;
	border: 4px solid #E40264;
}
.mainContent .program section#process .inner table th ,
.mainContent .program section#process .inner table td {
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	padding: 6px;
}
.mainContent .program section#process .inner table th:nth-last-of-type(1) ,
.mainContent .program section#process .inner table td:nth-last-of-type(1) {
	border-right: none;
}
.mainContent .program section#process .inner table tr:nth-last-of-type(1) td {
	text-align: center;
	border-bottom: none;
}
.mainContent .program section#process .inner table td {
	padding: 15px;
}
.mainContent .program section#process .inner table tr td:nth-of-type(1) {
	color: #57b52f;
	letter-spacing: 0;
	text-align: center;
	vertical-align:middle;
}
.mainContent .program section#process .inner table th {
	width: 22%;
}
.mainContent .program section#process .inner table th:nth-of-type(1) {
	width: 12%;
}
.mainContent .program section#process .inner table th .step {
	background: #4F9029;
	color: #fff;
	line-height: 30px;
	margin-bottom: 2px;
	text-align: center;
}
.mainContent .program section#process .inner table th .box {
	font-size: 129%;
	height: 130px;
	line-height: 1.3;
	font-family: GB;
	background: #fff;
	color: #00459b;
	padding: 20px 0;
	text-align: center;
}
.mainContent .program section#process .inner table th .box span {
	font-size: 86%;
	color: #333;
	display: block;
}
.mainContent .program section#process .inner table th .box p {
	font-size: 71%;
	color: #e50065;
	padding-top: 8px;
}

.mainContent .program section#process .flow dl {
	width: 20%;
	float: left;
	text-align: center;
	position: relative;
	padding: 0 15px;
	overflow: visible;
}
.mainContent .program section#process .flow dl:after {
	width: 30px;
	text-align: center;
	content: "▶";
	position: absolute;
	right: -15px;
	top: 20px;
	color: #e50065;
}
.mainContent .program section#process .flow dl:nth-last-of-type(1):after {
	display: none;
}
.mainContent .program section#process .flow dl dt {
	font-size: 250%;
	letter-spacing: 0;
	text-align: center;
	padding-bottom: 20px;
}
.mainContent .program section#process .flow dl:nth-last-of-type(1) dt {
	color: #57b52f;
}

.mainContent .program section#example article {
	font-family: GB;
	height: 108px;
	color: #333;
	background: #fff;
	border: 4px solid #e50065;
	margin-bottom: 20px;
	position: relative;
	padding: 20px 160px 20px 20px;
}
.mainContent .program section#example article header {
	overflow: hidden;
	padding-bottom: 10px;
}
.mainContent .program section#example article header span {
	line-height: 24px;
	display: inline-block;
	float: left;
	background: #58B52F;
	color: #fff;
	border-radius: 12px;
	padding: 0 8px;
	margin-right: 10px;
}
.mainContent .program section#example article header h5 {
	font-size: 143%;
	line-height: 24px;
	color: #00459b;
}
.mainContent .program section#example article p {
	font-size: 114%;
}
.mainContent .program section#example article a {
	width: 160px;
	height: 100px;
	text-align: center;
	position: absolute;
	background: #e50065;
	padding: 10px 0 0;
	color: #fff;
	right: 0;
	top: 0;
}
.mainContent .program section#example article a img {
	padding-bottom: 10px;
}
.mainContent .program section#example article a i {
	color: #00459b;
}
.mainContent .program section#example article a:hover {
	background: #57b52f;
}
.mainContent .program section#example article a:hover i {
	color: #e50065;
}