@charset "UTF-8";

/*========================================
*
*	全ページ共通
*
*---------------------------------------*/
/*================================
**	全ページ共通
*-------------------------------*/
/*========================
**	全ページ共通
*/

#home #contents {
	padding: 126px 0 0 0;
}
.lower .linkPdf{
	margin: 20px 0 0;
}
.lower .linkPdf a {
	position: relative;
	background: url(../images/common/pdf-ico.svg) no-repeat right center;
	padding: 0 25px 0 0;
	margin: 20px 0 0;
	font-weight: 500;
}
/*================================
**	TOP
*-------------------------------*/
/*========================
**	共通
*/
#home h2 {
    text-align: center;
    margin: 0 0 26px;
}
/*========================
**	トップ　ナビ
*/
#homeMainImage {
    margin: 0;
}
#homeMainImageContainer {
	position: relative;
}
/* video 来たらimgと差し替え */
#homeMainImage iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#homeMainImage .videoContainer{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	/*padding-bottom: 37.4%;*/
	/*width: 66.5%;*/
}
#homeMainImage .videoOverlay {
    background-image: url("../images/common/bg-09.png");
    opacity: 0.4;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 0;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 56.3%;;
}
#home .mainCopy {
    margin: 0 0 2px;
}
#home #copyContainer .green {
    font-size: 3rem;
    background: #0A7A4C;
    color: #fff;
    font-weight: 700;
}
#home #copyContainer .subCopy {
    font-size: 2.2rem;
    font-weight: 700;
}
#home #copyContainer {
    position: absolute;
    bottom: 12%;
    right: 2%;
    z-index: 20;
}
#homeMainImage .videoContainer {
    position: relative;
    padding-bottom: 38.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
}
#contents > #copyContainer {
	position: relative;
	text-align: center;
}
#home #copyContainer {
    bottom: inherit;
    right: 0;
    left: 0;
    z-index: 20;
    margin: 0 auto 100px;
	padding: 26px 20px 22px;
	background: #E6E6E6;
}


/*========================
**	TOP NEWS
*/
#topNews {
    width: 900px;
    margin: 0 auto 120px; 
}
#topNews li {
    font-size: 1.4rem;
    margin: 30px;
}
#topNews li a {
    text-decoration: underline;
   	color: #0A7A4C;
}
#topNews li a:hover {
    text-decoration: none;
}
#topNews li span,
#topNews li img {
    margin: 0 14px 0 0;
}
#topNews .topNewsButton {
    position: relative;
}
#topNews .topNewsButton label {
    width: 210px;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 10px 0;
    border: solid 1px #0A7A4C;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0A7A4C;
    position: relative;
    -webkit-transition: all .3s;
  transition: all .3s;
}
#topNews .topNewsButton label:hover {
    background: #0A7A4C;
    color: #fff;
}
#topNews .topNewsButton label:before {
    content: "";
    background: url(../images/common/allow_bottom.svg) no-repeat center top;
        background-size: auto;
    background-size: contain;
    position: absolute;
    top: 18px;
    right: 26px;
    width: 16px;
    height: 20px;
}
/* リスト展開 */
#topNews input {
    display: none;
}
/*中身を非表示にしておく*/
#topNews .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.5s;
}
#topNews .hidden_show li:first-of-type {
    margin-top: 0;
}
/*クリックで中身表示*/
#topNews input:checked ~ .hidden_show {
    padding: 0;
    height: auto;
    opacity: 1;
}
/*========================
**	TOP 事業案内
*/
#topBussiness {
    margin: 0 0 120px;
    
}
#topBussiness .flexContainer {
    justify-content: center;
}
#topBussiness .flexContainer .flexBox {
    margin: 0 20px 0 0;
    position: relative;
}
#topBussiness .flexContainer:first-of-type {
    margin: 70px 0 80px;
}
#topBussiness .flexContainer h3 {
    color: #0A7A4C;
    font-size: 2.4rem;
    font-weight: 700;
    padding: 0 0 2px;
    border-bottom: solid 3px #0A7A4C;
    position: relative;
}
#topBussiness .flexContainer:last-of-type h3 {
    text-align: center;
}
#topBussiness .img_wrap{
  width: 250px;
  height: 189.75px;
    margin: 0 0 6px;
  overflow: hidden;
  cursor: pointer;
    position: relative;
}
#topBussiness .img_wrap img{
  width: 100%;
  transition-duration: 0.5s;
}
#topBussiness .img_wrap:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}
#topBussiness .flexContainer .bussiness01::before {
	content: "01";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness02::before {
	content: "02";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness03::before {
	content: "03";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness04::before {
	content: "04";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness05::before {
	content: "05";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness06::before {
	content: "06";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness07::before {
	content: "07";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness08::before {
	content: "08";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness09::before {
	content: "09";
    color: #0A7A4C;
    font-size: 5.6rem;
    font-weight: 900;
	position: absolute;
	left: -2px;
	top: -44px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness01 h3::after {
    content: "CIVIL ENGINEERING WORKS";
    color: #8B9791;
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    right: 0px;
    top: 10px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness02 h3::after {
    content: "ARCHITECTURE";
    color: #8B9791;
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    right: 46px;
    top: 10px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness03 h3::after {
    content: "PAVEMENT CONSTRUCTION";
    color: #8B9791;
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    right: 0;
    top: 10px;
    height: 50px;
    z-index: 30;
}
#topBussiness .flexContainer .bussiness04 h3::after {
    content: "DEMOLITION WORK";
    color: #8B9791;
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    right: 33px;
    top: 10px;
    height: 50px;
    z-index: 30;
}
/*========================
**	TOP 各種認定
*/
#topCertification {
    margin: 0 0 126px;
}
#topCertification .certificationInner {
    background: #EFEFEF;
}
#topCertification p {
    text-align: center;
    margin: 0 0 50px;
}
#topCertification .flexContainer {
    justify-content: center;
    background: #EFEFEF;
    padding: 30px 0;
    margin: 0 auto;
}
#topCertification .flexContainer .flexBox {
    margin: 0 50px 0 0;
        cursor: pointer;
}
#topCertification .flexContainer .flexBox:last-of-type {
    margin: 0;
}
#topCertification .flexContainer .flexBox img {
    transition: 0.2s;
}
#topCertification .flexContainer .flexBox img:hover {
	transform: scale(1.08, 1.08);
}

/* ポップアップ */
/*.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 800px;
  padding: 60px;
  background-color: #fff;
  z-index: 2;
  overflow-y: scroll;
}
.popup-inner a {
  display: block;
  width: 300px;
  margin: 0 auto;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.popup h4 {
    font-size: 2.2rem;
    letter-spacing: 0.6rem;
    margin: 0 0 30px;
}
.popup p{
    margin: 0 0 20px;
}
.popup p,
.popup h5,
.popup li {
    font-size: 1.6rem;
    line-height: 2;
}
.popup h5{
    font-weight: 500;
}
.popup ul {
    margin: 0 0 30px;
}
.popup li {
    margin: 0 0 0 40px;
    position: relative;
}
.popup li:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 23px;
    background: #0A7A4C;
    margin: auto;
    left: -34px;
    top: 16px;
}-*/

/*========================
**	TOP バナー
*/
#topBanner{
    margin: 0 auto 150px;
    width: 1300px;
}
#topBanner .flexContainer{
    justify-content: center;
}
#topBanner .flexContainer .flexBox {
    margin: 0 30px 0 0;
    position: relative;
}
#topBanner .flexContainer .flexBox img {
    width: 400px;
}
#topBanner .flexBoxInner {
    width: 340px;
    margin: 0 auto;
    position: absolute;
    bottom: 40px;
    right: 30px;
    color: #fff;
    text-align: center;
    z-index: 10;
}
#topBanner .flexBoxInner h3{
    font-size: 3rem;
    margin: 0 0 8px;
}
#topBanner .flexBoxInner p {
    line-height: 1.8;
}
#topBanner .img_wrap {
  width: 400px;
  height: 345.317px;
  overflow: hidden;
  cursor: pointer;
    position: relative;
    z-index: 0;
}
#topBanner .img_wrap img {
  width: 100%;
  transition-duration: 0.5s;
}
#topBanner .img_wrap:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}


/*========================
**	TOP モーダル
*/

#home .modal_area section,
#home .modal_area article {
    width: 100%;
}
#home .modal_area section .flexContainer {
    justify-content: flex-start;
}

#home .modal_inner a {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#home .modal_inner img {
  width: 100%;
}
#home .modal_inner h4 {
    font-size: 2.2rem;
    letter-spacing: 0.6rem;
    margin: 0 0 30px;
}
#home .modal_inner p{
    margin: 0 0 20px;
}
#home .modal_inner p,
#home .modal_inner h5,
#home .modal_inner li {
    font-size: 1.6rem;
    line-height: 2;
}
#home .modal_inner h5{
    font-weight: 500;
}
#home .modal_inner ul {
    margin: 0 0 30px;
}
#home .modal_inner li {
    margin: 0 0 0 40px;
    position: relative;
}
#home .modal_inner li:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 23px;
    background: #0A7A4C;
    margin: auto;
    left: -34px;
    top: 16px;
}



#home .top_modal_box_01,
#home .top_modal_box_02,
#home .top_modal_box_03 {
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

#home .top_modal_bg_01,
#home .top_modal_bg_02,
#home .top_modal_bg_03 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: -1;
  cursor: pointer;
}
#home .modal_area .top_modal_box_02 section .flexContainer,
#home .modal_area .top_modal_box_03 section .flexContainer {
  flex-wrap: wrap;
	width: 770px;
	margin: 50px auto;
	justify-content: center;
}
#home .top_modal_box_02 .flexContainer >div,
#home .top_modal_box_03 .flexContainer > div {
	margin: 0 6px 40px;
}

#home .top_modal_box_02 .modal_inner .modal_image_beside a,
#home .top_modal_box_03 .modal_inner .modal_image_beside a {
  width: 370px;
}
#home .top_modal_box_02 .modal_inner .modal_image_vertical a,
#home .top_modal_box_03 .modal_inner .modal_image_vertical a {
  width: 280px;
}

#home .modal_inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 1000px;
    height: 90%;
  padding: 60px;
  background-color: #fff;
  z-index: 2;
}

#home .modal_inner section {
  overflow-y: scroll;
  overflow-x: hidden;
    height: 100%;
}

#home .top_modal_close_01,
#home .top_modal_close_02,
#home .top_modal_close_03 {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 2rem;
}

@media screen and (max-width: 480px) {
#home .modal_trigger {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
#home .modal_trigger li {
    width: 47.5%;
    margin-top: 20px;
    max-width: inherit;
  }
#home .modal_trigger li + li {
    margin-left: 0;
  }
#home .modal_inner {
    width: 90%;
    padding: 25px;
  }
#home .modal_close {
    top: 5px;
    font-size: 2.2rem;
  }
}


@media screen and (max-width:1300px) {
#home #copyContainer .green {
    font-size: 3rem;
    background: #0A7A4C;
    color: #fff;
    font-weight: 700;
}
#home #copyContainer .subCopy {
    font-size: 2.2rem;
    font-weight: 700;
}
#topBussiness .img_wrap {
    width: 200px;
    height: 139.75px;
}
#topBussiness .flexContainer h3 {
    font-size: 2rem;
}
#topBussiness .flexContainer .bussiness01 h3::after,
#topBussiness .flexContainer .bussiness02 h3::after,
#topBussiness .flexContainer .bussiness03 h3::after,
#topBussiness .flexContainer .bussiness04 h3::after {
    font-size: 0.8rem;
}
#topBanner .img_wrap {
    width: 300px;
    height: 245.317px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    z-index: 0;
}
    #topBanner{
    margin: 0 auto 150px;
    width: 1000px;
}
    #topBanner .flexBoxInner {
    width: 250px;
    }
    #topBanner .flexBoxInner h3 {
    font-size: 2.6rem;
    margin: 0 0 8px;
}
#topBanner .flexContainer .flexBox img {
    width: 300px;
}
#topBanner .flexBoxInner p {
    font-size: 1.4rem;
}
    #footer .flexContainer .flexBox {
    margin: 0 30px 0 0;
}
#footer #footerLogo {
    width: 236px;
}
    #footer .footerInfo p {
    font-size: 1.2rem;
}
    
#footer .footerLink > a {
    font-size: 1.6rem;
    margin: 0 20px 0 0;
}
#footer #footerNav li {
    font-size: 1.4rem;
    margin: 0 0 8px 26px;
    position: relative;
}
}
/*================================
**	企業情報
*-------------------------------*/
/*========================
**	共通
*/
#company .photoBox img {
    width:100%;
}
#company #lowerTitle:after {
    background: url(../images/company/page-title.jpg) no-repeat;
    background-size: auto;
    background-size: cover;
}
#company .pageMenu,
#company section{
    width: 1200px;
    margin: 0 auto 130px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo;
}
#company .title {
    border-bottom: solid 6px #EFEFEF;
  position: relative;
    margin: 0 0 60px;
}
#company .title:after {
    content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 30%;
  border-bottom: 6px solid #0A7A4C;
}
#company .title h2 {
    position: relative;
    font-size: 4.8rem;
}
#company .pageMenu {
    font-size: 1.8rem;
    font-weight: 700;
    height: 70px;
    margin: 140px auto 120px;
    border-bottom: solid #0A7A4C 6px;
    position: relative;
}
#company .pageMenu li {
    margin: 0 60px 0 0;
    position: relative;
}
#company .pageMenu li:last-of-type {
    margin: 0;
}
#company .pageMenu li:before {
    content: "";
    background: url(../images/company/triangle-bottom.svg) no-repeat center top;
    background-size: auto;
    background-size: auto;
    background-size: contain;
    position: absolute;
    bottom: -18px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 17px;
    height: 9px;
}
#company .pageMenu li:hover:before {
    animation-name: triangle-bottom;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.5s;
}
@keyframes triangle-bottom {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,6px)
    }
}
#company .title h2:before {
    color: #8B9791;
    font-size: 2rem;
    font-weight: 700;
    position: absolute;
    height: 50px;
    top: 23px;
    z-index: 30;
    letter-spacing: 0.01rem;
        font-family: Roboto, "Helvetica Neue", HelveticaNeue,"Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
#company #companyGreeting .title h2:before {
    content: "GREETING";
    left: 306px;
}
#company #companyPolicy .title h2:before {
    content: "MANAGEMENT POLICY";
    left: 258px;
}
#company #companyPlofile .title h2:before {
    content: "COMPANY PROFILE";
    left: 255px;
}
#company #companyExecutive .title h2:before {
    content: "EXECUTIVE";
    left: 138px;
}
#company #companyHistory .title h2:before {
    content: "HISTORY";
    left: 143px;
}
#company #companyOffice .title h2:before {
    content: "OFFICE";
    left: 195px;
}
#company #companyGreeting .flexContainer .photoBox {
    width: 385px;
    margin: 0 70px 0 0;
}
#company #companyGreeting .flexContainer .photoBox p {
   margin: 12px 0 0;
}
#company #companyGreeting .flexContainer .textBox {
    width: 867px;
}
#company #companyGreeting .flexContainer .textBox p {
    font-size: 1.4rem;
    line-height: 2.5;
}
#company #companyGreeting .flexContainer .textBox .greetingName {
    margin: 20px 0 0;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    line-height: 2.6;
}
#company #companyGreeting .flexContainer .textBox .greetingName .textBig{
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.4rem
}
#company #companyPolicy .photoBox {
    width: 708px;
    margin: -120px 0 0;
    z-index: 100;
}
#company #companyPolicy .textBox {
    width: 736px;
    margin: 0 120px 0 0;
}
#company #companyPolicy .textBox li {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 28px 100px;
    position: relative;
    line-height: 2;
}
#company #companyPolicy .textBox li:before {
    content: "01";
    color: #0A7A4C;
    font-size: 2.6rem;
    font-weight: 900;
    position: absolute;
    left: -47px;
    top: -6px;
    height: 32px;
    z-index: 30;
    font-family: Roboto, "Helvetica Neue", HelveticaNeue,"Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
#company #companyPlofile table {
    width: 1100px;
    margin: 0 auto;
    font-size: 1.6rem;
}
#company #companyPlofile table tr {
    border-top: solid #D5D5D5 1px;
}
#company #companyPlofile table th{
    background: #EFEFEF;
    padding: 25px 0 25px 40px;
    width: 400px;
    text-align: left;
}
#company #companyPlofile table td{
    padding: 25px 0 25px 40px;
    letter-spacing: 0.08rem;
}
#company #companyPlofile table td ol li{
    list-style-type: decimal;
    margin: 0 0 6px 18px;
}
#company #companyPlofile table .flexContainer{
    justify-content: flex-start;
}
#company #companyPlofile table .flexContainer .flexBox:first-of-type {
    margin: 0 50px 0 0;
}
#company #companyPlofile table .flexContainer .flexBox li {
    margin: 0 0 8px;
}
#company #companyExecutive table {
    width: 1100px;
    margin: 0 auto;
    font-size: 1.6rem;
}
#company #companyExecutive table tr {
    border-top: solid #D5D5D5 1px;
    border-bottom: solid #D5D5D5 1px;
}
#company #companyExecutive table th{
    padding: 28px 0 28px 40px;
    width: 400px;
    text-align: left;
    font-size: 1.8rem;
    position: relative;
}
#company #companyExecutive table td{
    padding: 28px 0 28px 40px;
    letter-spacing: 0.08rem;
    font-weight: 700;
}
#company #companyExecutive table th:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 23px;
    background: #0A7A4C;
    margin: auto;
    left: 0;
    top: 40px;
}
#company #companyHistory table {
    width: 1180px;
    margin: 0 auto;
    font-size: 1.6rem;
}
#company #companyHistory table tr:nth-child(odd) {
	background: #EFEFEF;
}
#company #companyHistory table th {
    width: 280px;
    text-align: left;
    padding: 27px 0 27px 50px;
    color: #565757;
}
#company #companyHistory table td {
    padding: 27px 0 27px;
}
#company #companyOffice .flexContainer {
    width: 1150px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#company #companyOffice .flexBox {
    background: #F8F8F8;
    padding: 26px 0 0;
    margin: 0 34px 70px 0;
}
#company #companyOffice .flexBox:nth-of-type(3),
#company #companyOffice .flexBox:nth-of-type(6) {
    margin: 0 0 70px 0;
}
#company #companyOffice h3 {
    font-size: 2.6rem;
    color: #0A7A4C;
    margin: 0 0 6px;
}
#company #companyOffice .officeInfoBox {
    margin: 0 0 30px 24px;
    height: 130px;
}
#company #companyOffice .officeInfoBox p {
    line-height: 2;
    font-weight: 700;
    color: #505151;
}
#company #companyGreeting,
#company #companyPolicy,
#company #companyPlofile,
#company #companyExecutive,
#company #companyHistory,
#company #companyOffice {
    display: block;
    padding-top: 140px;
    margin-top: -140px;
}
/*================================
**	施工実績
*-------------------------------*/
/*========================
**	共通
*/
#works .photoBox img {
    width:100%;
}
#works #lowerTitle:after {
    background: url(../images/works/page-title.jpg) no-repeat;
    background-size: auto;
    background-size: cover;
}
#works .pageMenu,
#works section{
    width: 1200px;
    margin: 0 auto 90px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo;
}
#works .title {
    border-bottom: solid 6px #EFEFEF;
  position: relative;
    margin: 0 0 60px;
}
#works .title:after {
    content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 30%;
  border-bottom: 6px solid #0A7A4C;
}
#works .title h2 {
    position: relative;
    font-size: 4.8rem;
}
#works h3 {
    color: #0A7A4C;
    font-weight: 700;
    font-size: 2.6rem;
    margin: 0 0 30px;
}
#works p {
    line-height: 2.3;
}
#works .pageMenu {
    font-size: 1.8rem;
    font-weight: 700;
    height: 70px;
    margin: 140px auto 120px;
    border-bottom: solid #0A7A4C 6px;
    position: relative;
}
#works .pageMenu li {
    margin: 0 60px 0 0;
    position: relative;
}
#works .pageMenu li:last-of-type {
    margin: 0;
}
#works .pageMenu li:before {
    content: "";
    background: url(../images/company/triangle-bottom.svg) no-repeat center top;
    background-size: auto;
    background-size: auto;
    background-size: contain;
    position: absolute;
    bottom: -18px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 17px;
    height: 9px;
}
#works .pageMenu li:hover:before {
    animation-name: triangle-bottom;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.5s;
}
@keyframes triangle-bottom {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,6px)
    }
}
#works .title h2:before {
    color: #8B9791;
    font-size: 2rem;
    font-weight: 700;
    position: absolute;
    height: 50px;
    top: 23px;
    z-index: 30;
    letter-spacing: 0.01rem;
        font-family: Roboto, "Helvetica Neue", HelveticaNeue,"Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
#works #worksEngineering .title h2:before {
    content: "CIVIL ENGINEERING WORKS";
    left: 240px;
}
#works #worksArchitecture .title h2:before {
    content: "ARCHITECTURE";
    left: 240px;
}
#works #worksPavement .title h2:before {
    content: "PAVEMENT CONSTRUCTION";
    left: 240px;
}
#works #worksDemolition .title h2:before {
    content: "DEMOLITION WORK";
    left: 240px;
}

#works #worksEngineering,
#works #worksArchitecture,
#works #worksPavement,
#works #worksDemolition {
	position: relative;
    display: block;
    padding-top: 200px;
    margin-top: -200px;
    z-index: 10;
    
}
#works #worksGreeting {
	position: relative;
	z-index: 30;
}
#works #worksGreeting .linkPdf a {
	color: #0A7A4C;
	text-decoration: underline;
	font-size: 1.8rem;
	font-weight: 500;
}
#works #worksGreeting p {
    text-align: center;
    font-weight: 700;
    line-height: 2.6;
    font-size: 2rem;
}
#works .textBig {
    font-size: 2.6rem;
    
}
#works .lineGreen {
    border-bottom: 4px solid #0A7A4C;
}
#works .photoBox {
    width: 560px;
}
#works .photoBox figcaption {
    margin: 24px 0 0;
}
#works #worksDemolition .photoBox {
    margin: 0 0 0 40px;
}
#worksEngineering .flexContainer,
#worksArchitecture .flexContainer,
#worksPavement .flexContainer {
    flex-wrap: wrap;
    justify-content: flex-start;
}
#worksEngineering p,
#worksArchitecture p,
#worksPavement p,
#worksDemolition p {
    margin: 0 0 60px;
}
#worksEngineering .photoBox,
#worksPavement .photoBox,
#worksArchitecture .photoBox,
#worksDemolition .photoBox {
    margin: 0 20px 60px;
}
#works figcaption ul li,
#works figcaption ul li {
    position: relative;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 10px 20px;
}
#works figcaption ul li:before,
#works figcaption ul li:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 14px;
    background: #0A7A4C;
    margin: auto;
    left: -20px;
    top: 9px;
}
#works #worksDemolition {
    margin: -200px auto 180px;
}
/*================================
**	施設情報
*-------------------------------*/
/*========================
**	共通
*/
#facility .photoBox {
    margin: 0 0 60px;
}
#facility #contents a {
	color: #0A7A4C;
	text-decoration: underline;
}
#facility .photoBox img {
    width: 100%;
}
#facility #lowerTitle:after {
    background: url(../images/facility/page-title.jpg) no-repeat;
    background-size: auto;
    background-size: cover;
}
#facility .pageMenu,
#facility section{
    width: 1200px;
    margin: 0 auto 160px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo;
}
#facility .title {
    border-bottom: solid 6px #EFEFEF;
  position: relative;
    margin: 0 0 60px;
}
#facility .title:after {
    content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 30%;
  border-bottom: 6px solid #0A7A4C;
}
#facility .title h2 {
    position: relative;
    font-size: 4.4rem;
}
#facility .textBox {
    width: 580px;
}
#facility .textBox p,
#facility .infoBox p {
    line-height: 1.9;
}
#facility .textBox .flexContainer,
#facility .infoBox .flexContainer {
    justify-content: flex-start;
    margin: 0 0 20px;
    font-size: 1.5rem;
    font-weight: 600;
}
#facility .textBox .flexBox,
#facility .infoBox .flexBox {
    position: relative;
}
#facility .textBox .flexBox:first-of-type,
#facility .infoBox .flexBox:first-of-type {
    margin: 0 56px 0 20px;
    position: relative;
}
#facility .textBox .flexBox li,
#facility .infoBox .flexBox li {
    margin: 0 0 10px;
    position: relative;
}
#facility .textBox .flexBox li:before,
#facility .infoBox .flexBox li:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 14px;
    background: #0A7A4C;
    margin: auto;
    left: -20px;
    top: 9px;
}
#facility h4 {
    font-size: 2.8rem;
    margin: 0 0 20px;
}
#facility05 .textBox .flexBox:first-of-type {
    margin: 0 56px 30px 20px;
    font-size: 1.5rem;
    font-weight: 600;
}
#facility05 .textBox .flexBox:first-of-type {
    margin: 0 56px 30px 20px;
    font-size: 1.5rem;
    font-weight: 600;
}
#facility06 .flexBox {
    width: 570px;
}
#facility06 .flexBox:first-of-type {
    margin: 0 60px 0 0;
}
#facility #facility01,
#facility #facility02,
#facility #facility03,
#facility #facility04,
#facility #facility05,
#facility #facility06-1,
#facility #facility06-2 {
    display: block;
    padding-top: 160px;
    margin-top: -160px;
}
/*================================
**	関連企業
*-------------------------------*/
/*========================
**	共通
*/
#related article {
    width: 1160px;
    margin: 0 auto;
}
#related .SekiyuPhoto,
#related .tadatexPhoto {
    margin: 0 0 60px;
}
#related .SekiyuPhoto img,
#related .tadatexPhoto img{
    width: 100%;
}
#related .SekiyuPhoto,
#related .tadatexPhoto {
    width: 596px;
}
#related .SekiyuText,
#related .tadatexText {
    width: 610px;
    margin: 0 60px 0 0;
    position: relative;
}
#related .SekiyuText,
#related .tadatexText {
    line-height: 2;
} 
#related .SekiyuText p,
#related .tadatexText p{
    margin: 0 0 40px;
}
#related .SekiyuText h4,
#related .tadatexText h4 {
    font-size: 2.4rem;
    margin: 0 0 20px;
}
#related #lowerTitle:after {
    background: url(../images/related/page-title.jpg) no-repeat;
    background-size: auto;
    background-size: cover;
}
#related .pageMenu,
#related section{
    width: 1200px;
    margin: 0 auto 80px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo;
}
#related .title {
    border-bottom: solid 6px #EFEFEF;
  position: relative;
    margin: 0 0 60px;
}
#related .title:after {
    content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 30%;
  border-bottom: 6px solid #0A7A4C;
}
#related .title h2 {
    position: relative;
    font-size: 4.4rem;
}

#related .SekiyuText ul li,
#related .tadatexText ul li {
    position: relative;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0 20px;
}
#related .SekiyuText ul li:before,
#related .tadatexText ul li:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 14px;
    background: #0A7A4C;
    margin: auto;
    left: -20px;
    top: 12px;
}
#related #sekiyu01,
#related #relatedTadatex article {
    margin: 0 0 60px;
}
#related #sekiyu02 .flexContainer,
#related #tadatex05 .flexContainer{
    width: 1150px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#related #sekiyu02 .flexBox,
#related #tadatex05 .flexBox {
    background: #F8F8F8;
    padding: 26px 0 0;
    margin: 0 34px 70px 0;
}
#related #sekiyu02 h3,
#related #tadatex05 h3 {
    font-size: 2.6rem;
    color: #0A7A4C;
    margin: 0 0 6px;
}
#related #sekiyu02 .relatedInfoBox,
#related #tadatex05 .relatedInfoBox {
    margin: 0 0 30px 24px;
    height: 130px;
}
#related #sekiyu02 .relatedInfoBox p,
#related #tadatex05 .relatedInfoBox p {
    line-height: 2;
    font-weight: 700;
    color: #505151;
}
#related #relatedTadatex #tadatex02 h3,
#related #relatedTadatex #tadatex03 h3,
#related #relatedTadatex #tadatex04 h3 {
    font-size: 2.8rem;
    color: #0A7A4C;
}
#related #tadatex02 .imgFlow {
    margin: 0 0 60px;
}
#related #tadatex02 .imgFlow img {
    width: 100%;
}
#related #tadatex03 h3 {
    margin: 0 0 24px;
}
#related #tadatex03 table {
    width: 1160px;
    font-size: 1.5rem;
}
#related #tadatex03 table tr {
    border-top: solid #D5D5D5 1px;
    text-align: left;
}
#related #tadatex03 table th{
    background: #EFEFEF;
    padding: 14px;
    width: 400px;
}
#related #tadatex03 table tr:first-of-type{
    border-bottom: solid #8C9791 2px;
}
#related #tadatex03 table tr:first-of-type th{
    background: #fff;
    padding: 14px 0 14px 40px;

}
#related #tadatex03 table tr:first-of-type th:first-of-type {
    background: #EFEFEF;
}
#related #tadatex03 table tr th:first-of-type {
    width: 370px;
    padding: 14px 0 14px 40px;
}
#related #tadatex03 table tr:first-of-type th:nth-of-type(2) {
    width: 110px;
}
#related #tadatex03 table tr td:nth-of-type(2) {
    text-align: center;

}
#related #tadatex03 table tr:first-of-type th:nth-of-type(3) {
    width: 100px;
     padding: 14px 0 14px 57px;
}
#related #tadatex03 table td{
    padding: 14px 0 14px 40px;
    letter-spacing: 0.08rem;
}
#related #tadatex03 ol {
    margin: 20px 0 60px;
    font-size: 1.4rem;
    line-height: 2;
}
#related #tadatex04 p{
    text-align: center;
    padding: 36px;
    background: #EFEFEF;
    width: 900px;
    margin: 0 auto;
    line-height: 2.4;
    font-size: 1.6rem;
    font-weight: 600;
}
#related #tadatex04 .textGreen {
    color: #0A7A4C;
}

/*================================
**	採用情報
*-------------------------------*/
/*========================
**	共通
*/

#recruit article {
    width: 1160px;
    margin: 0 auto;
}
#recruit .photoBox {
    margin: 0 0 60px;
}
#recruit .photoBox img {
    width: 100%;
}
#recruit #recruitGreeting h3 {
    font-size: 4.2rem;
    text-align: center;
    color: #0A7A4C;
    margin: 0 0 50px;
}
#recruit #recruitGreeting .photoBox {
    width: 470px;
    margin: 0 0 50px;
}
#recruit #recruitGreeting .textBox {
    width: 530px;
    margin: 30px 0 0 50px;
    position: relative;
}
#recruit #recruitGreeting .textBox p {
    line-height: 2.5;
    font-size: 1.8rem;
}
#recruit #recruitGreeting > p {
    font-size: 2.4rem;
    letter-spacing: 0.1rem;
    font-weight: 700;
    text-align: center;
}
#recruit #recruitGreeting > p .lineGreen {
    border-bottom: 3px solid #0A7A4C;
}
#recruit #lowerTitle:after {
    background: url(../images/recruit/page-title.jpg) no-repeat;
    background-size: auto;
    background-size: cover;
}
#recruit .pageMenu,
#recruit section{
    width: 1200px;
    margin: 0 auto 110px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo;
}
#recruit .title {
    border-bottom: solid 6px #EFEFEF;
  position: relative;
    margin: 0 0 60px;
}
#recruit .title:after {
    content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 30%;
  border-bottom: 6px solid #0A7A4C;
}
#recruit .title h2 {
    position: relative;
    font-size: 4.4rem;
}

#recruit .title h2:before {
    color: #8B9791;
    font-size: 2rem;
    font-weight: 700;
    position: absolute;
    height: 50px;
    top: 18px;
    z-index: 30;
    letter-spacing: 0.01rem;
        font-family: Roboto, "Helvetica Neue", HelveticaNeue,"Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
#recruit #recruitVoice .title h2:before {
    content: "VOICE OF THE SENIOR";
    left: 240px;
}
#recruit #recruitInformation .title h2:before {
    content: "JOB INFORMATION";
    left: 240px;
}


#recruitVoice .flexContainer {
	flex-wrap: wrap;
    justify-content: flex-start;
    width: 1180px;
    margin: 0 auto;
}
#recruitVoice .flexContainer .flexBox {
    width: 280px;
    display: block;
    background: #EFEFEF;
    padding: 16px 0 0;
    margin: 0 14px 50px 0;
    border-bottom: solid 6px #0A7A4C;
    cursor: pointer;
    -webkit-transition: all .3s;
  transition: all .3s;
}
#recruitVoice .flexContainer .flexBox:hover{
    opacity: 0.6;
}
#recruitVoice .flexContainer .flexBox .photoBox {
    width: 250px;
    margin: 0 auto 30px;
}
#recruitVoice .flexContainer .flexBox img {
    width: 100%;
    display: inline-block;
}
#recruitVoice .flexContainer .flexBox h4 {
    font-size: 2rem;
    font-weight: 600;
    color: #0A7A4C;
    margin: 0 0 0 16px;
    width: 180px;
    height: 30px;
    border-right: solid 4px #0A7A4C;
    position: relative;
}
#recruitVoice .flexContainer .flexBox p {
    margin: 0 0 0 14px;
}
#recruitVoice .flexContainer .flexBox:nth-of-type(4) h4,
#recruitVoice .flexContainer .flexBox:nth-of-type(5) h4 {
    width: 140px;
}
#recruitVoice .flexContainer .flexBox:nth-of-type(9) h4 {
    width: 120px;
}
#recruitVoice .flexContainer .flexBox h4:before {
    color: #8B9791;
    font-size: 1.2rem;
    font-weight: 700;
    position: absolute;
    height: 50px;
    top: -20px;
    left: 0;
    z-index: 30;
    letter-spacing: 0.01rem;
    font-family: Roboto, "Helvetica Neue", HelveticaNeue,"Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
#recruitVoice .flexContainer .flexBox:nth-of-type(1) h4:before {
    content: "RYOHEI  YACHIDATE";
}
#recruitVoice .flexContainer .flexBox:nth-of-type(2) h4:before {
    content: "KENTA  YASUMI";
}
#recruitVoice .flexContainer .flexBox:nth-of-type(3) h4:before {
    content: "YU TAKAHASHI";
}
#recruitVoice .flexContainer .flexBox:nth-of-type(4) h4:before {
    content: "KAZUAKI SASAKI";
}
#recruitVoice .flexContainer .flexBox:nth-of-type(5) h4:before {
    content: "SEIICHI KATO";
}
/*
#recruitVoice .flexContainer .flexBox:nth-of-type(6) h4:before {
    content: "MISAKI  TAKEDA";
}
*/
#recruitVoice .flexContainer .flexBox:nth-of-type(6) h4:before {
    content: "RYOUSUKE NAKAMURA";
}
#recruitVoice .flexContainer .flexBox:nth-of-type(7) h4:before {
    content: "AYA ARAKI";
}
#recruitVoice .flexContainer .flexBox:nth-of-type(8) h4:before {
    content: "TAKUMI KUDOU";
}
#recruitVoice .flexContainer .flexBox:nth-of-type(9) h4:before {
    content: "RYO FURUDATE";
}


#recruit .modal_area section,
#recruit .modal_area article {
    width: 100%;
}
#recruit .modal_area section .flexContainer {
    justify-content: flex-start;
}
#recruit .modal_area #voiceInnerTop .photoBox {
    width: 380px;
}
#recruit .modal_area #voiceInnerTop .textBox {
    width: 486px;
    position: relative;
}
#recruit .modal_area .photoBox img,
#recruit .modal_area #voiceInnerContents .photoBox img{
    width: 100%;
}
#recruit .modal_area #voiceInnerTop .textBox .voiceCopy {
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 2.1;
    margin: 46px 0 30px 40px;
}
#recruit .modal_area #voiceInnerTop .textBox .voiceProfile {
    width: 100%;
    height: 166px;
    background: #EFEFEF;
    position: relative;
}
#recruit .modal_area #voiceInnerTop .textBox .voiceProfile h3 {
    font-size: 3.8rem;
    color: #0A7A4C;
    text-align: center;
    padding: 44px 0 0;
    letter-spacing: 0.3rem;
    position: relative;
}
#recruit .modal_area #voiceInnerTop .textBox .voiceProfile h3:before {
    color: #8B9791;
    font-size: 1.8rem;
    font-weight: 700;
    position: absolute;
    height: 50px;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 30;
    letter-spacing: 0.01rem;
    font-family: Roboto, "Helvetica Neue", HelveticaNeue,"Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
#recruit .modal_area .modal_box:nth-of-type(1) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "RYOHEI  YACHIDATE";
}
#recruit .modal_area .modal_box:nth-of-type(2) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "KENTA  YASUMI";
}
#recruit .modal_area .modal_box:nth-of-type(3) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "YU TAKAHASHI";
}
#recruit .modal_area .modal_box:nth-of-type(4) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "KAZUAKI SASAKI";
}
#recruit .modal_area .modal_box:nth-of-type(5) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "SEIICHI KATO";
}
/*
#recruit .modal_area .modal_box:nth-of-type(6) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "MISAKI  TAKEDA";
}
*/
#recruit .modal_area .modal_box:nth-of-type(6) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "RYOUSUKE NAKAMURA";
}
#recruit .modal_area .modal_box:nth-of-type(7) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "AYA ARAKI";
}
#recruit .modal_area .modal_box:nth-of-type(8) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "TAKUMI KUDOU";
}
#recruit .modal_area .modal_box:nth-of-type(9) #voiceInnerTop .textBox .voiceProfile h3:before {
    content: "RYO FURUDATE";
}
#recruit .modal_area #voiceInnerTop .textBox .voiceProfile p {
    text-align: center;
    margin: 10px 0 0;
    position: relative;
}
#recruit .modal_area #voiceInnerTop .textBox .voiceProfile p:before {
    content: "";
    position: absolute;
    height: 38px;
    width: 3px;
    background: #0A7A4C;
    margin: 0 auto;
    left: 36px;
    top: -4px;
    right: 0;
}
#recruit .modal_area .modal_box:nth-of-type(4) #voiceInnerTop .textBox .voiceProfile p:before,
#recruit .modal_area .modal_box:nth-of-type(5) #voiceInnerTop .textBox .voiceProfile p:before {
    left: -12px;
}
#recruit .modal_area .modal_box:nth-of-type(9) #voiceInnerTop .textBox .voiceProfile p:before {
    left: -27px;
}
#recruit .modal_area #voiceInnerContents {
    position: relative;
}
#recruit .modal_area #voiceInnerContents h4 {
    font-size: 1.5rem;
    font-weight: 600;
    position: relative;
    margin: 0 0 20px 20px;
}
#recruit .modal_area #voiceInnerContents p {
    margin: 0 0 46px;
    font-size: 1.4rem;
    line-height: 1.8;
}
#recruit .modal_area #voiceInnerContents h4:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 10px;
    background: #0A7A4C;
    margin: auto;
    left: -16px;
    top: 10px;
}
#recruit .modal_area #voiceInnerContents .flexContainer{
    padding: 30px 0 0;
}
#recruit .modal_area #voiceInnerContents .flexContainer .qBox {
    width: 700px;
}
#recruit .modal_area #voiceInnerContents .photoBox {
    width: 300px;
}
#recruit .modal_box {
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

#recruit .modal_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: -1;
  cursor: pointer;
}

#recruit .modal_inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 1000px;
    height: 90%;
  padding: 60px;
  background-color: #fff;
  z-index: 2;
}

#recruit .modal_inner section {
  overflow-y: scroll;
  overflow-x: hidden;
    height: 100%;
}

#recruit .modal_close {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 2rem;
}

@media screen and (max-width: 480px) {
#recruit .modal_trigger {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
#recruit .modal_trigger li {
    width: 47.5%;
    margin-top: 20px;
    max-width: inherit;
  }
#recruit .modal_trigger li + li {
    margin-left: 0;
  }
#recruit .modal_inner {
    width: 90%;
    padding: 25px;
  }
#recruit .modal_close {
    top: 5px;
    font-size: 2.2rem;
  }
}
#recruit #recruitInformation {
    margin: 0 auto 180px;
}
#recruit #recruitInformation table {
    width: 1160px;
    font-size: 1.5rem;
}
#recruit #recruitInformation table tr {
    border-top: solid #D5D5D5 1px;
    text-align: left;
}
#recruit #recruitInformation table tr:first-of-type {
    border-top: none;
}
#recruit #recruitInformation table th{
    background: #EFEFEF;
    padding: 18px;
    width: 380px;
}
#recruit #recruitInformation table tr th:first-of-type {
    width: 400px;
    padding: 18px 0 18px 20px;
}
#recruit #recruitInformation table td{
    padding: 18px 0 18px 40px;
    letter-spacing: 0.08rem;
}
#recruit #recruitInformation table td li{
    margin: 0 0 8px;
}
/*================================
**	CSR活動
*-------------------------------*/
/*========================
**	共通
*/
#csr-activities article {
    width: 1160px;
    margin: 0 auto;
}
#csr-activities #csrLocal .flexBox {
    margin: 0 0 60px;
}
#csr-activities .recoveryWorks img,
#csr-activities #csrLocal .flexBox img,
#csr-activities .sdgsWorks img {
    width: 100%;
}
#csr-activities .recoveryWorks,
#csr-activities #csrSdgs .sdgsWorks {
    width: 596px;
}
#csr-activities .recoveryText {
    width: 610px;
    margin: 0 60px 0 0;
    position: relative;
}
#csr-activities .sdgsText {
    width: 810px;
    margin: 0 0 0 40px;
    position: relative;
}
#csr-activities #lowerTitle:after {
    background: url(../images/csr-activities/page-title.jpg) no-repeat;
    background-size: auto;
    background-size: cover;
}
#csr-activities section{
    width: 1200px;
    margin: 0 auto 80px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo;
}
#csr-activities .title {
    border-bottom: solid 6px #EFEFEF;
  position: relative;
    margin: 0 0 60px;
}
#csr-activities .title:after {
    content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 30%;
  border-bottom: 6px solid #0A7A4C;
}
#csr-activities .title h2 {
    position: relative;
    font-size: 4.4rem;
}
#csr-activities h3 {
    color: #0A7A4C;
    font-weight: 700;
    font-size: 2.6rem;
    margin: 0 0 30px;
}
#csr-activities p {
    line-height: 2.3;
}
#csr-activities figcaption {
    margin: 24px 0 0;
}
#csr-activities figcaption ul li,
#csr-activities figcaption ul li {
    position: relative;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 10px 20px;
}
#csr-activities figcaption ul li:before,
#csr-activities figcaption ul li:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 14px;
    background: #0A7A4C;
    margin: auto;
    left: -20px;
    top: 9px;
}
#csr-activities #csrLocal h3 {
    text-align: center;
    margin: 0 0 60px;
}
#csr-activities #csrLocal .flexContainer {
    flex-wrap: wrap;
    justify-content: flex-start;
}
#csr-activities #csrLocal .flexBox {
    width: 284px;
    margin: 0 20px 60px 0;
}
#csr-activities #csrLocal .flexBox p {
    background: #EFEFEF;
    text-align: center;
    height: 80px;
    line-height: 1.6;
    padding: 14px;
}
#csr-activities #csrLocal .flexBox:nth-of-type(4),
#csr-activities #csrLocal .flexBox:nth-of-type(8) {
    margin: 0 0 60px 0;
}
#csr-activities #csrSdgs {
    margin: 0 auto 180px;
}
#csr-activities #csrSdgs .flexContainer {
    margin: 0 0 90px;
}
#csr-activities #csrSdgs table {
    width: 1160px;
    font-size: 1.5rem;
}
#csr-activities #csrSdgs table tr {
    border-top: solid #D5D5D5 1px;
    text-align: left;
}
#csr-activities #csrSdgs table tr:first-of-type {
    border-top: none;
}
#csr-activities #csrSdgs table th{
    background: #EFEFEF;
    padding: 18px;
    width: 400px;
}
#csr-activities #csrSdgs table th img{
    width: 110px;
    display: inline-block;
    margin: 0 20px 0 0;
}
#csr-activities #csrSdgs table tr th:first-of-type {
    width: 400px;
    padding: 18px 0 18px 40px;
}
#csr-activities #csrSdgs table td{
    padding: 18px 0 18px 40px;
    letter-spacing: 0.08rem;
}
#csr-activities #csrSdgs table td li{
    margin: 0 0 8px;
}
#csr-activities .title h2:before {
    color: #8B9791;
    font-size: 2rem;
    font-weight: 700;
    position: absolute;
    height: 50px;
    top: 18px;
    z-index: 30;
    letter-spacing: 0.01rem;
        font-family: Roboto, "Helvetica Neue", HelveticaNeue,"Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
#csr-activities #csrRecovery .title h2:before {
    content: "DISEASTER RECOVERY";
    left: 240px;
}
#csr-activities #csrLocal .title h2:before {
    content: "ACTIVITY IN LOCAL";
    left: 340px;
}
#csr-activities #csrSdgs .title h2:before {
    content: "APPROACH OF SDGS";
    left: 390px;
}
#csr-activities #csrSdgs {
    display: block;
    padding-top: 160px;
    margin-top: -160px;
}


/*================================
**	お問い合わせ
*-------------------------------*/
/*========================
**	共通
*/
#contact #lowerTitle:after {
    background: url(../images/contact/page-title.jpg) no-repeat;
    background-size: auto;
    background-size: cover;
}
#contact #formInput {
    width: 1100px;
    margin: 0 auto 180px;
}
#contact #formInput .title {
    border-bottom: solid 6px #EFEFEF;
  position: relative;
    margin: 0 0 50px;
}
#contact #formInput .title:after {
    content: "";
  display: block;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 30%;
  border-bottom: 6px solid #0A7A4C;
}
#contact #formInput h2 {
    font-size: 3.8rem;
    margin: 0 230px 14px 0;
    position: relative;
    letter-spacing: 0.2rem;
}
#contact #formInput p {
    position: relative;
}

#contact #formInput p::before {
    content: "CONTACT FORM";
    color: #8B9791;
    font-size: 1.8rem;
    font-weight: 700;
    position: absolute;
    left: -208px;
    top: -2px;
    height: 50px;
    z-index: 30;
    letter-spacing: 0.01rem;
}
#contact #formInput p {
    margin: 22px 0 0;
}
#contact #formInput .flexContainer {
    justify-content: flex-start;
}

#contact #formInput table {
    width: 1020px;
    margin: 0 auto 50px;
}
#contact #formInput table th,
#contact #formInput table td {
    padding: 28px 0;
}
#contact #formInput table tr {
    border-bottom: solid 1px #D5D5D5;
}
#contact #formInput table tr:last-of-type {
    border-bottom: none;
}
#contact #formInput table th {
    font-size: 1.8rem;
    text-align: left;
    width: 50%;
    position: relative;
}

#contact #formInput table td input,
#contact #formInput table td textarea {
    width: 400px;
    height: 42px;
    border: solid #C9C9C9 1.5px;
    background: #EFEFEF;
    padding: 10px;
    font-size: 1.6rem;
}

#contact #formInput table td textarea {
    min-height: 160px;
}
#contact #formInput table td input#tel,
#contact #formInput table td input#fax,
#contact #formInput table td input#zip {
    width: 270px;
}
#contact #formInput table th label {
    margin: 0 0 0 118px;
    position: relative;
}
#contact #formInput table th label::before {
    content: "";
    position: absolute;
    height: 3px;
    width: 23px;
    background: #0A7A4C;
    margin: auto;
    left: -44px;
    top: 12px;
}
#contact #formInput table .required {
    font-size: 1.4rem;
    color: #DF1C1C;
    margin: 0 0 0 32px;
}
#contact #formInput .privacy {
    background: #E8F2ED;
    width: 1020px;
    margin: 0 auto;
    padding: 40px 0 30px 0;
    font-size: 1.4rem;
}
#contact #formInput .privacy ol {
    width: 800px;
    margin: 0 auto;
    font-size: 1.4rem;
}
#contact #formInput .privacy ol li {
    line-height: 2.5;
}
#contact #formInput .privacy label {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0 10px;
}
#contact #formInput .privacy .privacyCheck input {
    border: solid 1px #C9C9C9;
}
#contact #formInput .privacy #privacyCheck {
    width: 220px;
    margin: 20px auto 10px;
}
#contact #formInput #formInputButton {
    width: 800px;
    margin: 50px auto;
    justify-content: center;
}
#contact #formInput #formResultButton {
    width: 800px;
    margin: 60px auto 0;
    justify-content: center;
}
#contact #formResultButton {
    position: relative;
}
#contact #formResultButton .button,
#contact #formInputButton .button{
    position: relative;
}
#contact #formResultButton .button input {
    width: 210px;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 14px 0;
    border: solid 1px #0A7A4C;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0A7A4C;
    position: relative;
    -webkit-transition: all .3s;
  transition: all .3s;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック";
}
#contact #formInputButton .button input{
    width: 460px;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 14px 0;
    border: solid 1px #0A7A4C;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0A7A4C;
    position: relative;
    -webkit-transition: all .3s;
  transition: all .3s;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック";
}
#contact #formResultButton .button:first-of-type {
    margin: 0 100px 0 0;
}
#contact #formResultButton .button input:hover,
#contact #formInputButton .button input:hover{
    background: #0A7A4C;
    color: #fff;
}
#contact #formResultButton .button:first-of-type:before {
    content: "";
    background: url(../images/common/allow_left.svg) no-repeat center top;
        background-size: auto;
    background-size: contain;
    position: absolute;
    top: 20px;
    left: 26px;
    width: 8px;
    height: 15px;
    z-index: 10;
}
#contact #formResultButton .button:last-of-type:before,
#contact #formInputButton .button:before {
    content: "";
    background: url(../images/common/allow_right.svg) no-repeat center top;
        background-size: auto;
    background-size: contain;
    position: absolute;
    top: 20px;
    right: 26px;
   width: 8px;
    height: 15px;
    z-index: 10;
}
#contact #formInput .error { /* ADD 200917 */
    font-size: 1.4rem;
    color: #DF1C1C;
}
#contact #formInput .privacy #agreeCheck { /* ADD 200917 */
    text-align: center;
}
#contact #formInput #confirm { /* ADD 200918 確認内容のフォント指定 */
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo;
    font-size: 1.6rem;
}
#contact #formInput h3 { /* ADD 200918 */
    text-align:center;
    color:#0A7A4C;
    font-size: 2.0rem;
    font-weight: bold;
}