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

/*---施工実績バナー用-------*/
.beforeafter-banner {
	background-color: #E9EBF9;
	padding-bottom: 80px;
}

.beforeafter-banner a {
	text-decoration: none;
}

.beforeafter-banner .inner {
	background-image: url("../img/sbm_ba_banner.png");
	height: 143px;
	margin: 0 auto;
	width: 1100px;
	background-size: cover;
}

.beforeafter-banner .inner p {
	font-size: 46px;
	color: #fff;
	display: flex;
  	justify-content: center;
  	align-items: center;
	height: 143px;
	font-weight: bold;
	letter-spacing: 5px;
}

.beforeafter-banner_2 {
	padding-bottom: 30px;
}

.beforeafter-banner_2 a {
	text-decoration: none;
}

.beforeafter-banner_2 .inner {
	background-image: url("../img/sbm_ba_banner.png");
	height: 143px;
	margin: 0 auto;
	width: 100%;
	background-size: cover;
	border-radius: 12px;
}

.beforeafter-banner_2 .inner p {
	font-size: 46px;
	color: #fff;
	display: flex;
  	justify-content: center;
  	align-items: center;
	height: 143px;
	font-weight: bold;
	letter-spacing: 5px;
}


@media screen and (max-width: 767px) {
	.beforeafter-banner {
		padding: 0 30px 30px 30px;
	}
	
	.beforeafter-banner .inner {
		width: 100%;
		background-image: url("../img/sbm_ba_banner_sp.png");
		border-radius: 12px;
	}
	
	.beforeafter-banner .inner p {
		font-size: 24px;
		
	}
	
	.beforeafter-banner_2 {
		padding: 0 30px 30px 30px;
	}
	
	.beforeafter-banner_2 .inner {
		width: 100%;
		background-image: url("../img/sbm_ba_banner_sp.png");
		border-radius: 12px;
	}
	
	.beforeafter-banner_2 .inner p {
		font-size: 20px;
		
	}
}
/*---施工実績バナー用-------*/


.beforeafter-float {
	position: fixed;
	right: 0;
	bottom: 280px;
	opacity: 0.9;
	z-index: 9999;
}

#footer .tier_mini li a {
    font-size: 12px;
}



/*---リクルート情報用-------*/
#recruit_form #page-header {
  background-image: url("../../img/contact/bg_head.jpg")
}
@media screen and (max-width: 767px) {
#recruit_form #page-header {
    background-image: url("../../img/contact/bg_head_sp.jpg")
  }
}


#container {
    width: 100%;
    padding: 20px;
    max-width: 960px;
    margin: 96px auto 0 auto;
}


#container .heading {
    text-align: center;
}

#container .heading h3 {
    color: #FF9900;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.8;
}

#container .lead {
    text-align: center;
}

#container .lead h3 {
    color: #4B62A5;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.8;
}



/*-------------------------------------------
募集要項のテーブル
-------------------------------------------*/
.requirements {
    margin-top: 96px;
}
.requirements table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 45px;
    font-size: 16px;
    position: relative;
}

.requirements table th {
	width: 20%;
	text-align: left;
	background-color: #F7F7F7;
    font-size: 16px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-weight: normal;
}

.requirements table th,
.requirements table td {
	border: solid 1px #d5d5d5;
	border-left: none;
	border-right: none;
	padding: 15px;
}

.requirements table td {
	width: 80%;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    padding: 24px;
}

.requirements table td img.name {
	padding-bottom: 6px;
}

.requirements table tr.salary dd {
    margin-bottom: 8px;
}
.requirements table tr.salary dd:first-of-type,
.requirements table tr.salary dd:last-of-type{
    margin-bottom: 0;
}

.requirements table .occupation_list .occupation_item {
    margin-bottom: 24px;
    border-bottom: 1px solid #008D95;
    padding-bottom: 24px;
}
.requirements table .occupation_list .occupation_item:last-of-type {
    margin-bottom: 0;
    border-bottom: none;
}

.requirements table .occupation_list .occupation_item .occupation_title {
    margin-bottom: 8px;
    font-size: 22px;
    color: #008D95;
    display: flex;
    align-items: center;
    font-weight: bold;
    /*font-family: "Covered By Your Grace", serif;*/
}
.requirements table .occupation_list .occupation_item .occupation_title::before {
    content: "";
    height: 1px;
    width: 24px;
    margin-right: 12px;
    background-color: #008D95;
}

.requirements table .occupation_list .occupation_item .occupation_detail .detail_heading {
    margin-bottom: 8px;
}

.requirements table .occupation_list .occupation_item .occupation_detail .detail_flex {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.requirements table .occupation_list .occupation_item .occupation_detail .detail_matter {
    font-size: 16px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    margin-right: 12px;
    display: flex;
    align-items: center;
}
.requirements table .occupation_list .occupation_item .occupation_detail .detail_matter span {
    color: #008D95;
    margin-right: 2px;
}
.requirements table .occupation_list .occupation_item .occupation_detail .detail_matter::after {
    content: "";
    height: 1px;
    width: 16px;
    margin-left: 12px;
    background-color: #008D95;
}

.requirements table .occupation_list .occupation_item .occupation_detail .detail_subject {
    font-weight: bold;
    color: #008D95;
    font-size: 20px;
    /*font-family: "Covered By Your Grace", serif;*/
}

.requirements table .occupation_list .occupation_item .occupation_detail .detail_text {
    margin-left: 16px;
}

@media screen and (max-width: 1024px) {
    .requirements table .occupation_list .occupation_item .occupation_detail .detail_subject {
        font-size: 18px;
    }
}

@media screen and (max-width: 767px) {
	.requirements table tr {
		display: flex;
		flex-direction: column;
		margin-bottom: 15px;
	}
	.requirements table th {
		width: 100%;
		background-color: #008D95;
		color: #fff;
		height: 40px;
		display: flex;
		align-items: center;
		border-top-left-radius: 15px;
	}

	.requirements table td {
		width: 100%;
		background-color: #F7F7F7;
		border-bottom-right-radius: 15px;
        padding: 16px;
	}
	
	.requirements table th,
	.requirements table td {
		border: none;
	}

    .requirements table .occupation_list .occupation_item .occupation_title {
        font-size: 18px;
    }
    .requirements table .occupation_list .occupation_item .occupation_title::before {
        /*width: 16px;
        margin-right: 8px;*/
        display: none;
    }
    .requirements table .occupation_list .occupation_item .occupation_detail .detail_flex {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .requirements table .occupation_list .occupation_item .occupation_detail .detail_matter {
        font-size: 14px;
    }
    .requirements table .occupation_list .occupation_item .occupation_detail .detail_matter::after {
        display: none;
    }

    .requirements table .occupation_list .occupation_item .occupation_detail .detail_subject {
        font-size: 16px;
        margin-left: 16px;
    }

}


/*-------------------------------------------
応募フォームの体裁
-------------------------------------------*/
form#mailformpro dl dt {
	float: left;
	width: 190px;
	clear: both;
	font-size: 16px;
	padding: 10px 0px;
	/*text-align: right;*/
	border-top: solid 1px #CCC;
	margin: 0px;
}

@media screen and (max-width: 767px) {
    form#mailformpro dl dt {
        width: inherit;
        font-size: 14px;
        border-top: none;
    }
}

/*-------------------------------------------
サンクスページ
-------------------------------------------*/
.thanks_message {
    margin: 64px 0;
}

.thanks_message h3 {
    font-weight: bold;
    font-size: 24px;
    color: #008D95;
}

.thanks_message ul {
    padding: 16px 0;
}

.thanks_message ul li {
    list-style: circle;
    margin-left: 24px;
    color: #D50003
}


/*-------------------------------------------
リクルートフォームへのリンク設置
-------------------------------------------*/
#header__info .recruit a {
  color: #4b62a5;
  padding-left: 55px;
  position: relative;
  display: block;
  line-height: 25px;
    background-color: #E9EBF9;
}

#header__info .recruit a:before {
  content: "";
  position: absolute;
  left: 25px;
  display: block;
  width: 18px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

#header__info .recruit a:before {
  background-image: url("../img/icon_recruit.svg")
}

@media screen and (max-width: 767px) {
    #header__info .recruit a {
      display: none;
    }
}

#drawer__info .recruit a {
  background: #E9EBF9;
  color: #4b62a5;
  display: block;
  line-height: 25px
}
#drawer__info .recruit a:before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  margin-right: .5em;
  vertical-align: middle;
  margin-bottom: .3em
}
#drawer__info .recruit a:before {
  background-image: url("../img/icon_recruit.svg")
}