@charset "utf-8";



/*========= ページトップのためのCSS ===============*/

/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#fff;
  border-radius: 5px;
  border:1px solid #146C94;
  width: 60px;
  height: 60px;
  color: #146C94;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
}

#page-top a:hover{
  background: #D0E2FB;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}


/*========= レイアウトのためのCSS ===============*/

body{
  font-family: "Noto Sans JP", sans-serif;
  font-size:0.95rem;
  color:#2a2a2a;
  font-weight:500;
}

* {
  box-sizing: border-box;
}



/*▼▼ヘッダーのCSS▼▼*/

header{
  width:100%;
  position:fixed;
  height:128px;
  background:#fff;
  z-index: 3;
}

.header_nav{
  display:flex;
  align-items:center;
  padding:0 64px;
  font-size:1rem;
  height:128px;
  justify-content:center;
}

.header_nav01{
  width:25%;
}

.logo{
  width:100%;
  height:auto; 
}

.logo:hover{
  opacity:0.5;
}

.header_nav p{
  margin:2%;
  font-size:0.9rem;
}

.header_nav02{
  display:flex;
  justify-content: flex-end;
  width:75%;
  align-items:center;
}

.link:hover{
  opacity:0.5;
}

.link-btn-contact{
    box-sizing: border-box;
    display: block;
    width: 150%;
    margin: 0;
    padding: 20% 11%;
    background-color: #146C94;
    color: #ffffff !important;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
}

.link-btn-contact:hover{
    color: #146C94 !important;
    background-color: #D0E2FB;
}

/*▼▼▼▼トップページのCSS▼▼▼▼*/

/*▼メイン画像スライドショーのCSS▼*/

.img-frame{
   position: relative;
   width: 100%;
   height: 640px;
   overflow: hidden;
   margin: 0 auto;
}

.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}

.img-01{
   background-image: url('../image/main_image01.png');
   animation: slide-animation-01 24s infinite;
}

.img-02{
   background-image: url('../image/main_image02.png');
   animation: slide-animation-02 24s infinite;
}

.img-03{
   background-image: url('../image/main_image03.png');
   animation: slide-animation-03 24s infinite;
}

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}

@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}

/*▼メイン画像スライドショーのCSS終わり▼*/

a,a:hover,a:visited{
    color: inherit;
    text-decoration: none;
}

.top_image_copy{
    width: 38%;
    position: absolute;
    bottom: 5%;
    left: 5%;
}

.top_image_outer{
    position: relative;
}

.about{
    background-image:url(../image/about.png);
    background-repeat: no-repeat;
    background-size:50%;
    background-position:left 0 top 0;
    display:flex;
    margin-top:128px;
    margin-bottom:168px;
    align-items:center;
}

.about_leftside{
    width:53%;
    padding:0 80px;
}

.about_image{
    width:100%;
}

.toppage_subtitle{
    font-size:2rem;
    margin-bottom:32px;
    letter-spacing:0.05em;
}

.about_description{
    letter-spacing:0.05em;
}

.about_description p{
    margin-bottom:56px;
    line-height:290%;
}

.link-btn{
    box-sizing: border-box;
    display: block;
    width: 256px;
    margin: 0 auto;
    padding: 24px 8px;
    background-color: #146C94;
    border-radius: 6px;
    color: #fff;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    letter-spacing:0.15em;
    transition: all .3s;
}

.link-btn:hover{
    color: #1A60BF;
    background-color: #D0E2FB;
}

.service{
    background-image:url(../image/service.png);
    background-repeat: no-repeat;
    background-size:50%;
    background-position:right 0 top 0;
    display:flex;
    margin-bottom:168px;
    align-items:center;
}

.service_image{
    width:100%;
}

.service_rightside{
    width:53%;
    padding:0 112px;
}

.service_description{
    letter-spacing:0.05em;
}

.service_description p{
    margin-bottom:56px;
    line-height:290%;
}

.works{
    background-image:url(../image/works.png);
    background-repeat: no-repeat;
    background-size:50%;
    background-position:left 0 top 0;
    display:flex;
    margin-bottom:112px;
    align-items:center;
}

.works_leftside{
    width:53%;
    padding:0 80px;
}

.works_description{
    letter-spacing:0.05em;
}

.works_description p{
    margin-bottom:56px;
    line-height:290%;
}

.works_image{
    width:100%;
}

.about_description a,about_description a:hover,about_description a:visited{
    color: #fff;
}

.service_description a,service_description a:hover,service_description a:visited{
    color: #fff;
}

.works_description a,works_description a:hover,works_description a:visited{
    color: #fff;
}

.recruit a,.recruit a:hover,.recruit a:visited{
    color: #fff;
}



/*▼▼トップページのリクルートエリアCSS▼▼*/

.recruit{
    background-image:url(../image/recruit_backimage.png);
    background-repeat: no-repeat;
    padding-top:112px;
    padding-bottom:112px;
}

.recruit_inner{
    display: inline-block;
    padding:1.5% 2%;
    margin-left:10%;
    background:#fff;
}

.recruit_mincho{
    font-family:Georgia;
    font-size:2rem;
}

.recruit_person{
    width:70%;
    height:auto;
    padding: 0 3%;
    position: relative;
}

.recruit_person_list{
    display:flex;
    justify-content:center;
    padding-bottom:72px;
    padding-top:56px;
}

.recruit_person_list a{
    text-align:center;
    display: inline;
}

.recruit_person_list div{
    text-align: center;
}

.recruit_title{
    font-size:1.3rem;
    padding:2% 0 8% 0;
}

.recruit_comment{
    font-weight:100;
}

/*▼▼トップページのお知らせエリアCSS▼▼*/

.information{
    background-color: #D3DEF1;
    padding-top:112px;
    padding-bottom:112px;
}

.information_title{
    font-size:2rem;
    margin:0 0 56px 112px;
}

.information_article{
    border-bottom:1px solid #2a2a2a;
    margin-bottom:5%;
    letter-spacing:0.1em;
}

.information_article_group{
    padding:0 30% 0 30%;
}



/*▼▼▼▼石井建設工業についてのCSS▼▼▼▼*/


/*▼▼挨拶のエリアCSS▼▼*/

.main_area{
    padding-top:128px;
}

.page_visual{
    width:100%;
    position:relative;
}

.page_visual_inner{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:#fff;
    font-size:1.4rem;
    text-align:center;
}

.page_visual_en{
    font-style:italic;
    margin-top:8px;
    font-family:Arial;
}

.greeting_area{
    display:flex;
    margin:5% 10% 6% 10%;
}

.greeting_image{
    width:50%;
}

.greeting_comment{
    width:50%;
    background:#d3d3d3;
}

.greeting_comment_top{
    font-family:Yu Mincho;
    font-size:1.8rem;
    padding:8% 0 2% 8%;
}

.greeting_comment_bottom{
    font-family:Yu Mincho;
    font-size:1.8rem;
    padding:0 0 0 8%;
}

.greeting_text_inner{
    margin:0 20% 10% 20%;
    line-height: 2.4;
}

.greeting_text_inner p{
    line-height: 2.4;
    margin-bottom:3%;
}

.president_name{
    text-align:right;
}

/*▼▼▼▼会社概要のCSS▼▼▼▼*/


.jpn{
    text-align:center;
    font-size:2rem;
    margin-bottom:10px;
}

.eng{
    text-align:center;
    font-family:Arial;
    color:#008080;
}

.company-info-list{
    margin:80px auto 80px;
    width:60%;
}

.company-info-list li{
    display:flex;
    padding:25px 15px;
    border-bottom:2px solid #d3d3d3;
}

.company-info-list li span{
    display:block;
    width:14em;
}

iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.map{
  margin-top:32px;
}

.map_comment{
  margin:16px 0 64px 0;
}

/*▼▼▼▼事業内容のCSS▼▼▼▼*/


.service_summary{
    padding:108px 240px;
    line-height:2.4;
    font-size:1rem;
}

.service_title_jpn{
    font-size:2rem;
}

.service_title_eng{
    font-family:Arial;
    font-size:1.2rem;
    font-style:italic;
}

.architecture_image{
    width:45%;
    z-index:2;
    position:relative;
}

.service_area01{
    position:relative;
    height:600px;
}

.architecture_summary{
    position: absolute;
    top:10%;
    left: 40%;
    z-index:1;
    background:#AFD3E2;
    padding:80px 80px 80px 150px;
    line-height:2.4;
    width:60%;
}

.architecture_summary a{
    line-height:1;
    color: #fff;
}

.service_title{
    display:flex;
    align-items:center;
}

.service_title_jpn{
    margin-right:4%;
}

.service_title_eng{
    margin-top:5px;
    color:#146C94;
}

.service_text{
    margin-bottom:7%;
}

.service_area02{
    position:relative;
    margin-top:80px;
    height:600px;
}

.civil_engineering_summary{
    background:#AFD3E2;
    padding:80px 150px 80px 80px;
    line-height:2.4;
    width:60%;
    position: absolute;
    z-index:1;
    top:40px;
}

.civil_engineering_summary a{
    line-height:1;
    color: #fff;
}

.civil_engineering_image{
    width:45%;
    position:absolute;
    z-index:2;
    right:0%;
}

.service_area03{
    position:relative;
    margin-top:80px;
    height:600px;
}

.private_construction_image{
    width:45%;
    z-index:2;
    position:relative;
}

.private_construction_summary{
    position: absolute;
    top:10%;
    left: 40%;
    z-index:1;
    background:#AFD3E2;
    padding:80px 80px 80px 150px;
    line-height:2.4;
    width:60%;
}

.private_construction_summary a{
    line-height:1;
    color: #fff;
}

.contact_area{
    background:#AFD3E2;
    padding:10%;
    margin-top:10%;
}

.contact_area_inner{
    display:flex;
    text-align:center;
    justify-content:center;
    padding:10%;
    background:#ffffff;
}

.contact_jpn{
    font-size:1.6rem;
    padding:2% 0;
}

.contact_eng{
    font-family:Arial;
    font-size:1.2rem;
    font-style:italic;
    padding:4% 0 8% 0;
    color:#146C94;
}

.contact_comment{
    line-height:1.5;
}

.contact_text_area{
    padding:0 7%;
    border-right:solid 1px #2a2a2a;
}

.contact_btn_area{
    padding:0 7%;
}

.contact_btn_area a{
    color: #fff;
}

.tell_number{
    font-size:2rem;
    padding:3% 0 10% 0;
}

/*▼▼▼▼施工事例のCSS▼▼▼▼*/

.works_list{
    display:flex;
    flex-wrap:wrap;
    margin:10%;
    width:80%;
    justify-content:center;
}

.works_list img{
    width:380px;
    z-index:1;
    transition: all 0.2s ease-in-out;
}

.works_list img:hover{
    transform: scale(1.15);
}

.works_list_image{
    width:380px;
    height:264px;
    margin:20px 20px 100px 20px;
    overflow: hidden;
}

.works_public{
    color:#ffffff;
    padding:20px;
    background-color:#008080;
    position: absolute;
    z-index:2;
    top:20px;
    left:20px;
}

.works_private{
    color:#ffffff;
    padding:20px;
    background-color:#ffa500;
    position: absolute;
    z-index:2;
    top:20px;
    left:20px;
}


.works_list_inner{
    position:relative;
    margin-bottom:40px;
}

.works_date_public{
    position: absolute;
    z-index:2;
    top:264px;
    right:0;
    background-color:#ffffff;
    margin:0px 20px;
    padding:30px;
    line-height:1.8;
    border-bottom:3px solid #008080;
    width:300px;
}

.works_date_private{
    position: absolute;
    z-index:2;
    top:264px;
    right:0;
    background-color:#ffffff;
    margin:0px 30px;
    padding:30px;
    line-height:1.8;
    border-bottom:3px solid #ffa500;
    width:300px;
}

.detail_public{
    font-size:0.8rem;
    text-align:right;
}

.detail_public p:before{
    content: '';
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-color: #008080 #008080 transparent transparent;
    transform: rotate(45deg);
    display:inline-block;
    margin-right:7px;
}

.detail_private{
    font-size:0.8rem;
    text-align:right;
}

.detail_private p:before{
    content: '';
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-color: #ffa500 #ffa500 transparent transparent;
    transform: rotate(45deg);
    display:inline-block;
    margin-right:7px;
}


/*▼▼▼▼採用情報のCSS▼▼▼▼*/


.recruit_massage_area{
    background:#F8F8FF url(../image/backimage_recruit.png) no-repeat;
    background-size:65%;
    background-position:50% 90%;
}

.massage_title{
    font-family:Georgia;
    font-size:2.1rem;
    padding:10% 0 5% 0;
}

.massage_title_outer{
    text-align:center;
}


.massage_text{
    line-height:3;
    padding:0 10% 10% 10%;
}

.staff_interview_area{
    margin:0 10%;
}

.recruit_page_title{
    display:flex;
    align-items:center;
    margin:10% 0 3% 0;
}

.recruit_page_title_jpn{
    font-size:2rem;
    letter-spacing:0.03em;
    margin-right:1.3%;
}

.recruit_page_title_eng{
    margin-top:0.5%;
    color:#008080;
}

.staff_interview_comment{
    line-height:1.8;
}

.staff_image{
    text-align:center;
    margin:5% 0%;
    position:relative;
}

.staff_image img{
    width:65%;
}

.staff_name{
    position: absolute;
    bottom:17%;
    right:20%;
    background:#ffffff;
    padding:0.8% 1.2%;
    font-size:1.3rem;
}

.staff_affiliation{
    position: absolute;
    bottom:5%;
    right:20%;
    background:#ffffff;
    padding:0.8% 1.2%;
    font-size:1.1rem;
}

.recruit-info-list{
    margin:80px auto 80px;
    width:90%;
}

.recruit-info-list li{
    display:flex;
    padding:1% 3%;
    border-bottom:2px solid #d3d3d3;
}

.recruit-info-list li span{
    display:block;
    width:14em;
}

.job-description-list{
    padding:64px 32px;
    width:100%;
}

.job-description-list li{
    display:flex;
    padding:25px 8px;
    border-bottom:2px solid #d3d3d3;
}

.job-description-list span{
    display:block;
    width:14em;
}


/*▼アコーディオンのCSS▼*/
/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
  border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1.2rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}

.title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.interview_box {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
    margin:0 3% 3% 3%;
    padding: 3%;
    line-height:3;
}

/*▼▼▼▼お知らせエリアのCSS▼▼▼▼*/

.news_area{
    margin:10% 20%;
}

.news_title{
    font-size:1.5rem;
    margin:3% 0 5% 0;
}

.news_text{
    line-height:4;
}

/*▼▼▼▼コンタクトエリアのCSS▼▼▼▼*/

.contact_text{
    margin:10% 0 8% 0;
    text-align:center;
    font-size:1rem;
}

.tel_number_guidance{
    display:flex;
    padding:96px 56px;
    background-color:#D9E5FF;
    margin:0 20% 10% 20%;
    align-items:center;
    justify-content:center;
}

.tel_text{
    font-size:1.3rem;
    padding-right:5%;
}

.tel_number{
    padding-left:5%;
}

.tel_number_inner01{
    font-size:2rem;
    margin-bottom:5%;
    white-space: nowrap;
}

.form_guidance{
    text-align:center;
    margin-bottom:64px;
}

.form_guidance_title{
    font-size:1.2rem;
    margin-bottom:56px;
}

/*▼テーブルと送信ボタンのCSS▼*/

.contact_table{
    width:80%;
    margin:0 10% 5% 10%;
}

.contact_item,
.contact_body{
    padding:20px;
    border:1px solid #ccc;
}

.contact_item{
    text-align:left;
    width:30%;
    background-color:#eee;
    vertical-align: middle;
}

.contact_body{
    width:70%;
}

.form_text{
    width:100%;
    padding:10px;
    border-radius:5px;
    border:1px solid #ccc;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    max-width:400px;
}

.form_textarea{
    width:100%;
    padding:10px;
    height:200px;
    border-radius:5px;
    border:1px solid #ccc;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
}

.submit-link-btn{
    box-sizing: border-box;
    display: block;
    width: 248px;
    margin: 0 auto 10% auto;
    padding: 20px 8px;
    background-color: #146C94;
    border-radius: 6px;
    color: #fff;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    border:none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.submit-link-btn:hover{
    color: #146C94;
    background-color: #D0E2FB;
}


/*▼▼フッターエリアのCSS▼▼*/

.footer_inner{
    display:flex;
    padding:80px;
}

.footer_logo_area p{
    padding-top:32px;
}

.footer_logo{
  width:80%;
}

.footer_logo:hover{
  opacity:0.5;
}

.footer_nav_area a{
    text-decoration: none;
    display:block;
    margin-bottom:32px;
}

.footer_nav_area a:hover{
  opacity:0.5;
}

.footer_nav_area{
    display:flex;
    margin-left:auto;
    width:30%;
}

.footer_nav_area_left{
    margin-right:15%;
}

.copyright{
    text-align:center;
    padding-bottom:32px;
}

#footer{
    background-color: #146C94;
    color:#fff;
}



/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(25px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(25px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*▼▼レスポンシブ対応のCSS▼▼*/

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

/*▼レスポンシブ全体のページのCSS▼*/

body{
  font-family: "Noto Sans JP", sans-serif;
  font-size:0.85rem;
  color:#2a2a2a;
  font-weight:500;
}

.menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 4px;
    width: 45px;
    border-radius: 3px;
    background-color: #146C94;
    position: absolute;
}
.menu-btn span:before {
    bottom: 13px;
}
.menu-btn span:after {
    top: 13px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #ffffff;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: 2px dotted #146C94;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 17px;
    box-sizing: border-box;
    color:#146C94;
    text-decoration: none;
    padding: 17px 15px 18px 0;
    position: relative;
    font-weight:400;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #146C94;
    border-right: solid 2px #146C94;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 25px;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color:#D9E5FF;
    transition: all 0.5s;/*アニメーション設定*/
    opacity: 0.9;
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}


.header_nav{
    display:none;
}

.logo02{
    width:50%;
    margin:30px 0 0 20px;
}

/*▼レスポンシブトップページのCSS▼*/

.sp_top_image{
    width:100%;
}

.top_image{
    display:none;
}

.top_image_copy{
    width: 80%;
}

.img-01{
    background-position: -150px;
  }

.img-02{
    background-size:auto 500px;
    background-position: -140px;
  }

.img-03{
    background-position: -150px;
  }

.about{
    flex-direction: column;
    background-image:none;
    margin-bottom:0;
}

.about_rightside{
    order:1;
    width:100%;
}

.about_leftside{
    order:2;
    width:100%;
    padding:80px 32px;
    background-image:url(../image/about.png);
    background-repeat: no-repeat;
    background-size:70%;
    background-position:left 0 top 50px;
}

.service{
    display:block;
    background-image:none;
    margin-bottom:0;
}

.service_rightside{
    width: 100%;
    padding: 80px 32px;
    background-image:url(../image/service.png);
    background-repeat: no-repeat;
    background-size:70%;
    background-position:left 0 top 50px;
}

.works{
    flex-direction: column;
    background-image:none;
    margin-bottom:0;
}

.works_rightside{
    order:1;
    width:100%;
}

.works_leftside{
    order:2;
    width:100%;
    padding:80px 32px;
    background-image:url(../image/works.png);
    background-repeat: no-repeat;
    background-size:70%;
    background-position:left 0 top 50px;
}

.recruit_person_list{
    display:block;
}

.recruit_person_list div{
    text-align: center;
    margin-bottom:16px;
}

.information_article_group{
    padding:0 10%;
}

/*▼レスポンシブ事業内容のCSS▼*/


.service_summary{
    padding:64px 32px;
    line-height:2.4;
    font-size:0.85rem;
}

.service_area01{
    text-align:center;
    padding:0 32px;
    height:auto;
    margin-bottom:80px
}

.architecture_image{
    width:100%;
}

.architecture_summary{
    background:#ffffff;
    padding:32px 0 0 0;
    line-height:2.4;
    width:100%;
    position: static;
}

.service_area02{
    padding:0px 32px 0 32px;
    margin-bottom:80px;
    height:auto;
}

.civil_engineering_summary{
    background:#ffffff;
    padding:32px 0 0 0;
    line-height:2.4;
    width:100%;
    position: static;
}

.civil_engineering_image02{
    width:100%;
}

.civil_engineering_image{
    display:none;

}

.service_text{
    text-align:left;
}

.service_title{
    display:flex;
    align-items:center;
    justify-content:center;
}

.private_construction_image{
    width:100%;
}

.service_area03{
    height:auto;
    padding:0 32px;
    margin-bottom:80px;
}

.private_construction_summary{
    background:#ffffff;
    padding:32px 0 0 0;
    line-height:2.4;
    width:100%;
    position: static;
}

.contact_area_inner{
    text-align:center;
    padding:8% 5%;
    background:#ffffff;
    display:block;
}

.contact_text_area{
    padding:0 7%;
    border-right:solid 1px #ffffff;
}

.contact_btn_area a{
        box-sizing: border-box;
        display: block;
        width: 208px;
        margin: 0 auto;
        padding: 24px 8px;
        background-color: #146C94;
        border-radius: 6px;
        color: #fff;
        font-size: 0.95rem;
        text-align: center;
        text-decoration: none;
        letter-spacing:0.15em;
        transition: all .3s;
}

.contact_area{
    background:#AFD3E2;
    padding:12% 7%;
    margin-top:10%;
}

.contact_jpn{
    font-size:1.3rem;
    padding:2% 0;
}

/*▼レスポンシブ石井建設工業についてのCSS▼*/

.page_visual_jp{
    white-space:nowrap;
    font-size:1.1rem;
}

.page_visual_en{
    font-size:1.1rem;
}

.greeting_area{
    display:block;
    margin:64px 32px;
}

.greeting_image{
    width:100%;
}

.greeting_comment{
    width:100%;
    background:#d3d3d3;
}

.greeting_comment_bottom{
    font-family:Yu Mincho;
    font-size:1.6rem;
    padding:0 0 13% 10%;
}

.greeting_comment_top{
    font-family:Yu Mincho;
    font-size:1.6rem;
    padding:13% 0 3% 10%;
}

.greeting_text_inner{
    margin:0 32px 64px 32px;
    line-height: 2.4;
}

.greeting_text_inner p{
    width:100%;
}

.company-info-list{
    padding:0 32px 0 32px;
    width:100%;
}

.company-info-list li{
    display:block;
    padding: 20px 8px;
}

.company-info-list span{
    padding-bottom:8px;
}

/*▼レスポンシブ施工事例のCSS▼*/





/*▼レスポンシブ採用情報のCSS▼*/

.massage_title{
    font-size:1.8rem;
    padding:64px 0;
}

.recruit_massage_area{
    background:#F8F8FF url(../image/backimage_recruit.png) no-repeat;
    background-size:80%;
    background-position:50% 5%;
}

.recruit_page_title{
    margin:10% 0 8% 0;
}

.title {
    font-size:1rem;
}

.staff_image{
    margin:10% 0 5% 0;
}

.staff_image img{
    width:100%;
}

.staff_name{
    bottom:20%;
    right:5%;
    font-size:1.1rem;
}

.staff_affiliation{
    bottom:5%;
    right:5%;
    font-size:1rem;
}

.recruit_page_title{
    margin:20% 0 10% 0;
}

.job-description-list li{
    display:block;
    padding: 20px 8px;
}

.job-description-list span{
    padding-bottom:8px;
}

.recruit-info-list li{
    display:block;
    padding:1% 3%;
    border-bottom:2px solid #d3d3d3;
}

.recruit-info-list div{
    line-height: 1.5;
    margin:10px 0 10px 0;
}


/*▼レスポンシブお問い合わせのCSS▼*/


.contact_text {
    margin: 72px 32px 64px 32px;
    text-align: left;
    font-size: 0.95rem;
}

.tel_number_guidance{
    display:block;
    padding:40px;
    margin:0 32px 120px 32px;
    text-align:center;
}

.tel_text {
    font-size: 0.95rem;
    padding: 0 0 24px 0;
}

.tel_number_inner01 {
    font-size: 2.3rem;
    margin-bottom: 24px;
    white-space: nowrap;
}

.tel_number {
    padding-left: 0;
}

.contact_table{
    width:100%;
    margin:0 0 64px 0;
}

.submit-link-btn {
    margin-bottom:64px;
}


/*▼レスポンシブお知らせのCSS▼*/

.news_title {
    font-size: 1.5rem;
    margin: 8% 0 10% 0;
}

.news_text {
    line-height: 3;
}

.news_area {
    margin: 25% 20%;
}

/*▼レスポンシブフッターのCSS▼*/

.footer_nav_area{
    width:100%;
    display:block;
    margin-top:64px;
}

.footer_inner{
    display:block;
    padding:72px 32px;
}

.footer_logo_area p{
    padding-top:8px;
}

.footer_logo_area{
    margin-bottom:48px;
}

.footer_logo{
    width:256px;
    margin-bottom:8px;
}

.copyright{
    width:100%;
}


}

@media screen and (min-width:760px) {
.humburger_nav{
    display:none;
}

.civil_engineering_image02{
    display:none;
}

.sp_top_image{
    display:none;
}

}