/* CSS Document */

/* 共通 */
main section {
  width: 100%;
  margin: 120px auto 0 auto;
  text-align: center;
  clear: both;
}

main section p {
  line-height: 2rem;
}

main section h2,
main section h3 {
  margin-bottom: 20px;
  font-weight: bold;
}

main section article {
  width: 1000px;
  margin: 25px auto 120px auto;
}

main section .title {
  font-size: 30px;
  color: rgba(13, 86, 97, 1);
  text-align: center;
}

main section .title span {
  display: block;
  font-size: 14px;
}

main section .cont_title {
  font-size: 20px;
  color: rgba(13, 86, 97, 1);
  text-align: center;
}


.content_image {
  position: relative;
  margin: 60px 0 0;
  width: 100%;
  height: 461px;
  border-bottom: 1px solid rgba(13, 86, 97, 1);
  z-index: 10;
}

.content_image .top_line {
  position: absolute;
  width: calc(1000px + ((100% - 1000px) / 2));
  height: 100px;
  top: calc((460px - 100px) /2);
  left: 0;
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-right: 1px solid rgba(255, 255, 255, 1);
  border-top-right-radius: 10px;
  /* CSS3草案 */
  -webkit-border-top-right-radius: 10px;
  /* Safari,Google Chrome用 */
  -moz-border-top-right-radius: 10px;
  /* Firefox用 */
}

.content_image .bottom_line {
  position: absolute;
  height: 100px;
  width: calc(1000px + ((100% - 1000px) / 2));
  top: calc((460px - 100px) /2);
  right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-bottom-left-radius: 10px;
  /* CSS3草案 */
  -webkit-border-bottom-left-radius: : 10px;
  /* Safari,Google Chrome用 */
  -moz-border-bottom-left-radius: : 10px;
  /* Firefox用 */
}

.content_image .image {
  height: 460px;
}

.content_image .string {
  position: absolute;
  width: 1000px;
  height: 100px;
  top: calc((460px - 100px) / 2);
  left: calc((100% - 1000px) / 2);
  color: rgba(255, 255, 255, 1);
  font-size: 26px;
  display: table;
}

.content_image .string p {
  height: 100px;
  margin: 0;
  padding: 0;
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
}

.content_image .string p span {
  font-size: 14px;
  display: block;
  line-height: 14px;
  margin-top: 10px;
}

/* index */
#index {}

#index header {
  position: static;
  width: 100%;
  height: 60px;
}


#index .index_image {
  position: relative;
  width: 100%;
  height: calc(100% - 60px);
  background: url(/common/images/index/main_01.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}


#index .index_image .anime_string {
  position: absolute;
  display: table;
  width: 1000px;
  height: 100px;
  text-align: center;
  top: calc(((100% - 60px) - 100px) /2);
  left: calc((100% - 1000px) / 2);
  right: calc((100% - 1000px) / 2);
  color: rgba(255, 255, 255, 1);
}

#index .index_image .anime_string p {
  display: table-cell;
  height: 100px;
  vertical-align: middle;
  opacity: 0;
  font-size: 26px;
  line-height: 2.8rem;
}





.scroll {
  position: absolute;
  display: block;
  width: 80px;
  text-align: center;
  margin: 30px auto;
  color: rgba(255, 255, 255, 1);
  top: calc(((100% - 60px) + 40px) /2);
  left: calc((100% - 80px) / 2);
  right: calc((100% - 80px) / 2);
  opacity: 0;

}

.scroll img {
  margin-bottom: 5px;
}

#index main section .contents_image {
  width: 100%;
  background: rgba(13, 86, 97, .1);
}

#index main section .contents_image>div {
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  font-size: 0;
}

#index main section .contents_image>div .concept,
#index main section .contents_image>div .service,
#index main section .contents_image>div .works,
#index main section .contents_image>div .about {
  display: inline-block;
  width: calc((100% - 2px) / 2);
  height: 300px;
  font-size: 0;
}

#index main section .contents_image>div .concept {
  background: url(/common/images/index/index_banner_01.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  border-right: 1px solid rgba(255, 255, 255, 1);
}

#index main section .contents_image>div .service {
  background: url(/common/images/index/index_banner_02.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  border-left: 1px solid rgba(255, 255, 255, 1);
}

#index main section .contents_image>div .works {
  background: url(/common/images/index/index_banner_03.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-right: 1px solid rgba(255, 255, 255, 1);
}

#index main section .contents_image>div .about {
  background: url(/common/images/index/index_banner_04.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-left: 1px solid rgba(255, 255, 255, 1);
}


#index main section .contents_image>div .concept a,
#index main section .contents_image>div .service a,
#index main section .contents_image>div .works a,
#index main section .contents_image>div .about a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/*#index main section .contents_image > div .concept a:hover,
#index main section .contents_image > div .service a:hover,
#index main section .contents_image > div .works a:hover,
#index main section .contents_image > div .about a:hover{
	background: rgba( 13 , 86 , 97 , .7 );
}
*/
#index main section .contents_image>div>* a>div {
  position: absolute;
  top: 100px;
  left: 100px;
}

#index main section .contents_image>div>* a .title {
  font-size: 24px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
}

#index main section .contents_image>div>* a .title span {
  font-size: 14px;
}

#index main section .contents_image>div>* a p {
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  margin-top: 20px;
}

#index main section .jobs_image {
  position: relative;
  width: 100%;
  height: 600px;
  background: url(/common/images/index/index_jobs.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}

#index main section .jobs_image .top_line {
  position: absolute;
  width: calc(1000px + ((100% - 1000px) / 2));
  height: 100px;
  top: calc((600px - 100px) /2);
  left: 0;
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-right: 1px solid rgba(255, 255, 255, 1);
  border-radius: 10px;
  /* CSS3草案 */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;
  /* Firefox用 */
}

#index main section .jobs_image .bottom_line {
  position: absolute;
  height: 100px;
  width: calc(1000px + ((100% - 1000px) / 2));
  top: calc((600px - 100px) /2);
  right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-radius: 10px;
  /* CSS3草案 */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;
  /* Firefox用 */
}


#index main section .jobs_image .job_string {
  position: absolute;
  width: 1000px;
  height: 100px;
  top: calc((600px - 100px) / 2);
  left: calc((100% - 1000px) / 2);
  color: rgba(255, 255, 255, 1);
  font-size: 26px;
  display: table;
}

#index main section .jobs_image .job_string p {
  display: table-cell;
  vertical-align: middle;
  font-size: 26px;
  line-height: 2.8rem;
}


#index main section .jobs_image .job_btn {
  position: absolute;
  width: 200px;
  height: 50px;
  top: 450px;
  left: calc((100% - 200px) / 2);
  border: 1px solid rgba(255, 255, 255, 1);
  background: rgba(252, 238, 33, .8);
  font-size: 14px;
  line-height: 50px;
  border-radius: 25px;
  /* CSS3草案 */
  -webkit-border-radius: 25px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;
  /* Firefox用 */
}

/* 採用情報：jobs */
#jobs {}


#jobs .content_image .jobs {
  background: url(/common/images/jobs/main.jpg);
  background-position: center center;
  background-size: cover;
}

#jobs .jobs article {
  display: flex;
}

#jobs .jobs article>div:last-child {
  text-align: left;
  padding: 20px;
}

#jobs .jobs article>div:last-child .cont_title {
  text-align: left;
  margin-bottom: 10px;
}

#jobs .jobs_list {
  width: 1000px;
  margin-top: 15px;
  border-top: 1px solid rgba(13, 86, 97, 1);
  border-bottom: 1px solid rgba(13, 86, 97, 1);
}

#jobs .jobs_list dl {
  width: 100%;
  font-size: 0;
  box-sizing: border-box;
  padding: 15px 0;
  border-bottom: 1px solid rgba(13, 86, 97, .1);
}

#jobs .jobs_list dl::last-child {
  border-bottom: none;
}

#jobs .jobs_list dl dt,
#jobs .jobs_list dl dd {
  display: inline-block;
  font-size: 14px;
  text-align: left;
}

#jobs .jobs_list dl dt {
  width: 15%;
}

#jobs .jobs_list dl dd {
  width: 85%;
}

#jobs .jobs_btn {
  margin: 30px auto 0;
  display: block;
  width: 200px;
  height: 50px;
  top: 450px;
  left: calc((100% - 200px) / 2);
  border: 1px solid rgba(255, 255, 255, 1);
  background: rgba(13, 86, 97, 1);
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  line-height: 50px;
  border-radius: 25px;
  /* CSS3草案 */
  -webkit-border-radius: 25px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;
  /* Firefox用 */
}



/* 企業情報：company */
#company {}

#company .content_image .company {
  background: url(/common/images/company/main.jpg);
  background-position: center center;
  background-size: cover;
}

#company .company_list {
  width: 1000px;
  margin-top: 15px;
  border-top: 1px solid rgba(13, 86, 97, 1);
  border-bottom: 1px solid rgba(13, 86, 97, 1);
}

#company .company_list dl {
  width: 100%;
  font-size: 0;
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px solid rgba(13, 86, 97, .1);
}

#company .company_list dl::last-child {
  border-bottom: none;
}

#company .company_list dl dt,
#company .company_list dl dd {
  display: inline-block;
  font-size: 14px;
  text-align: left;
}

#company .company_list dl dt {
  width: 15%;
  vertical-align: top;
}

#company .company_list dl dd {
  width: 85%;
}

#company .company_list dl dd a {
  display: inline-block;
  width: 120px;
  height: 30px;
  margin-left: 30px;
  background: rgba(13, 86, 97, 1);
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  line-height: 30px;
  text-align: center;
  border-radius: 25px;
  /* CSS3草案 */
  -webkit-border-radius: 25px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;
  /* Firefox用 */
}

#company section .map {
  display: flex;
  width: 1000px;
}

#company section .map>div {}

/*#company section .map>div:first-child {
  margin-right: 50px;
}*/

#company section .map>div p {
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}

/* 業務案内：concept */
#concept {}

#concept .content_image .concept {
  background: url(/common/images/concept/main.jpg);
  background-position: center center;
  background-size: cover;
}

#concept section.number {
  margin: 0 auto;
  padding: 110px 0;
}

#concept section.number:nth-child(even) {
  background: rgba(13, 86, 97, .1);
}

#concept section.number article {
  margin: 0 auto;
  display: flex;
}

#concept section.number article>div {
  display: inline-block;
}

#concept .concept_title {
  position: relative;
  color: rgba(13, 86, 97, 1);
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  padding-left: 100px;
  margin-bottom: 15px;
}

#concept .concept_title span {
  position: absolute;
  width: 75px;
  height: 42px;
  font-size: 50px;
  left: 0;
  border-right: 1px solid rgba(13, 86, 97, 1);
  line-height: 0.8;
}

#concept .number p {
  text-align: left;
}

#concept .number .l_str,
#concept .number .r_str {
  width: calc((100% - 320px) - 80px);
}

#concept .number .l_str {
  margin-right: 80px;
}

#concept .number .r_str {
  margin-left: 80px;
}

#concept .number .l_img,
#concept .number .r_img {
  width: 320px;
}

#concept .number .l_img img,
#concept .number .r_img img {
  width: 100%;
}

.concept_btn {
  display: block;
  width: 200px;
  height: 50px;
  margin-top: 45px;
  background: rgba(13, 86, 97, 1);
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  /* CSS3草案 */
  -webkit-border-radius: 25px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;
  /* Firefox用 */
}

.concept_btn:hover {
  color: rgba(255, 255, 255, 1);
}

#concept .concept .concept_list {}

#concept .concept .concept_list .step {
  display: flex;
  background: rgba(13, 86, 97, .1);
  margin-bottom: 40px;
}

#concept .concept .concept_list .step>div {
  font-size: 0;
}

#concept .concept .concept_list .step>div.str .str_title {
  font-size: 20px;
  color: rgba(13, 86, 97, 1);
  margin-bottom: 25px;
}

#concept .concept .concept_list .step>div.str {
  font-size: 13px;
  text-align: left;
  width: calc(100% - 460px);
  box-sizing: border-box;
  padding: 50px 65px 0;
}

#concept .concept .concept_list .step>div.str div {
  line-height: 2rem;
}

/* 施工までの流れ：service */
#service .content_image .service {
  background: url(/common/images/service/main.jpg);
  background-position: center center;
  background-size: cover;
}


#service section .flow .step {
  display: table;
  overflow: hidden;
  width: 1000px;
  margin: 0 auto 30px;
  background: rgba(13, 86, 97, .1);
}

#service section .flow .step>div {
  padding: 40px 20px;
  text-align: left;
}

#service section .flow .step>div:first-child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 125px;
  border-right: 1px solid rgba(13, 86, 97, 1);
  font-size: 50px;
  color: rgba(13, 86, 97, 1);
}

#service section .flow .step>div:first-child span {
  display: block;
  font-size: 16px;
}

#service section .flow .step .flow_title {
  position: relative;
  color: rgba(13, 86, 97, 1);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

#service section .flow .step .flow_title .en {
  position: absolute;
  right: 0;
  font-weight: bold;
}

#service section .flow .step>div:last-child p {
  display: inline-block;
}

#service section .flow .step>div:last-child .flow_img {
  position: absolute;
  display: inline-block;
  width: 300px;
  right: -10px;
  top: -10px;
}

#service section.contact {
  width: 1000px;
  margin: 0 auto;
}

#service section.contact p {
  font-weight: bold;
  color: rgba(13, 86, 97, 1);
}

#service section.contact .contact_btn {
  display: block;
  width: 200px;
  height: 50px;
  margin: 15px auto 45px;
  background: rgba(13, 86, 97, 1);
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
}

/* 施工実績：works */
#works .content_image .works {
  background: url(/common/images/works/main.jpg);
  background-position: center center;
  background-size: cover;
}

#works main section.works_list {
  min-height: 1025px;
  padding: 30px 0;
  background: url(/common/images/works/area.svg) no-repeat;
  background-size: 790px 1025px;
  background-position: top center;
}

#works main section.works_list>div {
  display: flex;
  width: 1000px;
  margin: 0 auto 115px;
  border-bottom: 1px solid rgba(13, 86, 97, 1);
  border-top: 1px solid rgba(13, 86, 97, 1);

}

#works main section.works_list>div:last-child {
  margin-bottom: 0;
}

#works main section.works_list>div .title {
  display: inline-block;
  font-size: 20px;
  width: 365px;
  text-align: left;
  padding-top: 15px;
}

#works main section.works_list>div .list {
  display: inline-block;
  width: 635px;
  text-align: left;
}

#works main section.works_list>div .list dl {
  display: flex;
  border-bottom: 1px solid rgba(13, 86, 97, .1);
  padding: 15px 0;
  font-size: 13px;
}

#works main section.works_list>div .list dl:last-child {
  border-bottom: none;
}

#works main section.works_list>div .list dl dt {
  width: 20%;
}

#works main section.works_list>div .list dl dd {
  width: 80%;
  margin-left: 10px;
}


/* お問い合わせ：contact */
#contact .step_bar {
  background: rgba(13, 86, 97, .7);
  color: rgba(255, 255, 255, 1);
  position: relative;
  height: 60px;
}

#contact .step_bar ul {
  display: flex;
  text-align: center;
  position: absolute;
  width: 480px;
  left: calc(((100% - 1000px) / 2) + (1000px - 480px));
  height: 60px;
}

#contact .step_bar ul li {
  width: 160px;
  height: 60px;
  padding: 13px 0;
  border-right: 1px solid rgba(255, 255, 255, 1);
}

.step_bar ul li.cur {
  background: rgba(13, 86, 97, 1);
}

#contact section form {
  text-align: left;
}

#contact section form p {
  line-height: 1.2rem;
}

#contact section form span {
  color: rgba(193, 39, 45, 1);
  margin: 0 5px;
}

#contact section form dl {
  display: flex;
  margin: 30px 0;
}

#contact section form dl dt {
  width: 20%;
}

#contact section form dl dd {
  width: 80%;
}

#contact section form dl dd label {
  margin-right: 10px;
}

#contact section form dl dd input[type^="te"],
#contact section form dl dd input[type^="email"] {
  width: 80%;
}

#contact section form dl dd textarea {
  width: 80%;
  height: 200px;
}

#contact section form .contact_btn {
  text-align: center;

}

#contact section form .contact_btn input {
  border: none;
  width: 250px;
  height: 50px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  background: rgba(13, 86, 97, 1);
  border-radius: 25px;
  /* CSS3草案 */
  -webkit-border-radius: 25px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;
  /* Firefox用 */
}