@charset "utf-8";


/* main ------------- */
#about { position:relative; margin-top:0; padding-bottom:55px; }
#about::before { content:""; position:absolute; z-index:-1; width:100%; height:calc(100% - 300px); left:0; bottom:0; background-color:#f5f2f0; }
#slide { margin-bottom:40px; }
#slide .slick-list { padding:30px!important; }
#slide img { margin:0 30px; box-shadow:0px 0px 20px rgba(0,0,0,0.2); }
.slick-prev, .slick-next { display:none!important; }

.vertical_box .con_ttl { display:inline-block; margin-top:30px; }
#about_area .con_ttl { min-height:210px; }
#repair .con_ttl { min-height:150px; }
.work_box > .img { position:relative; width:62%; min-height:435px; margin-right:6%; overflow:hidden; background-size:cover; background-repeat:no-repeat; background-position:center; }
.work_box > .syouhei { background-image:url(../img/top/syouhei_img.jpg); }
.work_box > .tenjou { background-image:url(../img/top/tenjou_img.jpg); }
.work_box > .img figcaption { right:45px; bottom:0; }
.work_box + .work_box { margin-top:100px; }
.work_box .txt_box { width:32%; margin-top:30px; margin-bottom:50px; padding-right:80px; }
.work_box.img-r > .img { margin-right:0; }
.work_box.img-r > .img figcaption { right:auto; left:45px; }
.work_box.img-r > .txt_box { margin-left:6%; }

.result_box { position:relative; }
.result_box .title { position:absolute; max-width:770px; bottom:0; left:50%; margin-left:-385px; }
.result_box .title .vertical_txt { height:212px; padding:38px 23px; font-size:24px; background-color:#FFF;}
#result .txt_box { max-width:770px; margin:80px auto 0; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {


}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  #slide { margin-bottom:10px; }
  #slide img { margin:0 20px; height:400px; }
  #about { padding-bottom:50px; }
  .work_box .txt_box { padding-right:50px; }
  .work_box > .img { min-height:400px; }
  #result .txt_box { margin-top:70px; padding-left:20px; padding-right:20px; }
  .result_box .title { left:45px; margin-left:0; }

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  #slide img { height:200px; margin:0 8px; box-shadow:0px 0px 10px rgba(0,0,0,0.2); }
  #about::before { height:calc(100% - 100px); }

  .vertical_box .con_ttl { margin-top:33px; }
  .work_box > .img { width:100%; min-height:250px; margin-right:0; }
  .work_box > .img figcaption { left:20px; right:auto; }
  .work_box.img-r > .img figcaption { left:20px; }
  .work_box .txt_box { width:100%; margin:20px 0; padding-left:20px; padding-right:20px; }
  .work_box.img-r .txt_box { order:2; }
  .work_box + .work_box { margin-top:40px; }
  .work_box.img-r > .txt_box { margin-left:0; margin-bottom:0; }
  .result_box .title { left:20px; }
  #result .txt_box { margin-top:60px; }
  #result_slider img { height:250px; }
  .result_box .title .vertical_txt { height:180px; padding:35px 20px; font-size:22px; }
}