@charset "UTF-8";
/* CSS Document */

.contents.common.recruit.page .main.skill {
	background-image: url("../../image/recruit/skill/main_img.webp");
}

.content_wrapper.skill .intro h2,
.content_wrapper.skill .intro h2{
	font-size: 18px;
	line-height: 30px;
	padding: 0 0 0 1em;
	margin: 30px 0;
	background-image: url("../../image/common/cub_orange.png");
	background-repeat: repeat-y;
	background-position: left;
}

.content_wrapper.skill h3 {
	width: 90%;
	height: 40px;
	line-height: 40px;
	margin: 20px 2%;
	padding: 0 3%;
	background-image: url("../../image/recruit/common/ico_ square.png");
	background-repeat: no-repeat;
	background-position: center left;
	float: left;
}

.content_wrapper.skill .intro .message {
	width: 80%;
	margin: 50px 10%;
	font-size: 18px;
	font-weight: 700;
	float: left;
	line-height: 40px;
}

.content_wrapper.skill .training table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 10px;
	border: none;
}

.content_wrapper.skill .training table td {
	background-color: rgba(87,161,242,0.20);
	padding: 1em;
	border-radius: 10px;
	border: none;
}

.content_wrapper.skill .training table td:nth-of-type(1) {
	width: 160px;
	text-align: center;
	color: #FFF;
	font-weight: 700;
}

.content_wrapper.skill .training .step01 table td:nth-of-type(1),
.content_wrapper.skill .training table.step01 td:nth-of-type(1) { background-color: #75c4ff; }

.content_wrapper.skill .training .step02 table td:nth-of-type(1),
.content_wrapper.skill .training table.step02 td:nth-of-type(1) { background-color: #589fef; }

.content_wrapper.skill .training .step03 table td:nth-of-type(1),
.content_wrapper.skill .training table.step03 td:nth-of-type(1) { background-color: #0071bc; }

.content_wrapper.skill .training .step04 table td:nth-of-type(1),
.content_wrapper.skill .training table.step04 td:nth-of-type(1) { background-color: #00468b; }

.content_wrapper.skill .training .step05 table td:nth-of-type(1),
.content_wrapper.skill .training table.step05 td:nth-of-type(1) { background-color: #00215d; }


.content_wrapper.skill .voice .intro {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.content_wrapper.skill .voice .intro .photo,
.content_wrapper.skill .voice .intro dl {
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;
}

.content_wrapper.skill .voice .photo img {
	width: 90%;
	max-width: 300px;
	margin: 0 auto;
}

.content_wrapper.skill .voice .intro dl dt {
	width: 90%;
	margin: 0 0 1em;
	padding: 5px 5%;
	float: left;
	font-weight: 700;
	font-size: 18px;
	border-bottom: #ed6c00 1px solid;
}

.content_wrapper.skill .voice .intro dl dd {
	width: 90%;
	margin: 0;
	padding: 5px 5%;
	float: left;
}

.content_wrapper.skill .voice .readmore1 {
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	float: left;
}


.content_wrapper.skill .voice .readmore1 .btn:after { content: "　▼"; }

.content_wrapper.skill .voice .readmore1 .btn {
  cursor: pointer;
  border: #ed6c00 1px solid;
  background-color: #ed6c00;
  color: #FFF;
  padding: 0.5em 0;
  margin: 1em 10%;
  width: 80%;
  text-align: center;
  transition:all .2s ease;
  font-weight: 700;
}

.content_wrapper.skill .voice .readmore1 .content_more {
  display: none;
}

.content_wrapper.skill .voice .detail_box {
	width: 100%;
	margin: 50px 0;
	padding: 0;
	float: left;
}

.content_wrapper.skill .path {
	width: 100%;
	margin: 50px 0;
	padding: 0;
	float: left;
}

.training_plan {
	width: 90%;
	margin: 0 10% 0 0;
	padding: 0;
	float: left;
}


/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:580px          */
/* *********************************************************************** */

@media screen and (max-width:580px) {

.content_wrapper.skill .training table td,
.content_wrapper.skill .training table td:nth-of-type(1) { width: 100%;float: left; }

.training_plan {
	width: 100%;
	margin: 0;
}

.training_plan p {
	width: 100%;
	margin: 10px 0;
	padding: 0;
	float: left;
}

.content_wrapper.skill .voice .intro .photo,
.content_wrapper.skill .voice .intro dl {
	width: 100%;
}

.content_wrapper.skill .voice .intro .photo { text-align: center; }
.content_wrapper.skill .voice .intro .photo img { margin: 0 auto; }


}