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

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

.content_wrapper.project .block {
	width: 80%;
	margin: 50px 10%;
	padding: 0;
	float: left;
}

.content_wrapper.project .block .intro {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

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

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

.content_wrapper.project .block .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.project .block .intro dl dd {
	width: 90%;
	margin: 0;
	padding: 5px 5%;
	float: left;
}

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


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

.content_wrapper.project .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.project .readmore1 .content_more {
  display: none;
}

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

.content_wrapper.project 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.project h3 {
	width: 90%;
	height: 40px;
	margin: 20px 3%;
	padding: 0 2%;
	background-image: url("../../image/recruit/common/ico_ square.png");
	background-repeat: no-repeat;
	background-position: center left;
	float: left;
}


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

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

.content_wrapper.project .block {
	width: 100%;
	margin: 30px 0 0px;
}

.content_wrapper.project .block .intro .photo { width: 100%;text-align: center; }
.content_wrapper.project .block .intro .photo img { margin: 0 auto; }
.content_wrapper.project .block .intro dl { width: 100%; }


}