@charset "UTF-8";

.mission .main_title {
  font-size: 30px;
  line-height: 1.3;
  width: 100%;
  max-width: 900px;
  margin: 50px auto 10px 100px;
}

.mission .main_catch {
  font-size: 30px;
  line-height: 1.3;
  width: 100%;
  max-width: 900px;
  margin: 30px auto 30px 100px;
}

.mission .sub_catch {
  font-size: 22px;
  line-height: 1.5;
  width: 100%;
  max-width: 900px;
  margin: 0px auto 100px 100px;
}

.mission .img01 {
  background: url("/resources/images/missions/index/president.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  float: right;
}

.mission .img02 {
  background: url("/resources/images/missions/index/member.jpg") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  float: left;
}

.mission .img03 {
  background: url("/resources/images/missions/index/local.jpg") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  float: right;
}

.mission .img04 {
  background: url("/resources/images/missions/index/urban.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  float: left;
}

.mission .btn_area {
 display: -webkit-box;  /*Android4.3*/
 display: -moz-box;     /*Firefox21*/
 display: -ms-flexbox;  /*IE10*/
 display: -webkit-flex; /*PC-Safari,iOS8.4*/
 display: flex;
 -webkit-box-pack: center;        /*Android4.3*/
 -moz-box-pack: center;           /*Firefox21*/
 -ms-flex-pack: center;           /*IE10*/
 -webkit-justify-content: center; /*PC-Safari,iOS8.4*/
 justify-content: center;
}

.mission .btn_area .btn {
 margin: 0 20px;
}

.mission .btn_area .btn a {
 font-size: 18px;
 font-weight: bold;
 text-align: center;
 width: 250px;
 padding: 15px 0;
 border-radius: 5px;
}

.mission .btn_area .ruby_contact a {
 width: 520px !important;
}

.mission .ruby_contact {
 padding: 30px;
}

.mission .blur {
  position: relative;
}

.mission .blur:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-shadow:
    inset 0 0 80px 5px #fff,
    inset 0 0 80px 5px #fff,
    inset 0 0 80px 5px #fff,
    inset 0 0 80px 5px #fff;
}

@media ( min-width: 721px ) {
  #customer, #engineer, #society {
    padding-top: 100px;
    margin-top: -100px;
  }
}

/* mobile */
@media (max-width: 720px) {
  .mission section {
    padding: 35px 10px !important;
  }

  .mission .main_title {
    font-size: 20px;
    color: #fff;
    width: 100%;
    background: #c8161d;
    padding: 10px;
    margin: 0px;
  }

  .mission .main_catch {
    font-size: 18px;
    width: 100%;
    padding: 20px 10px 10px 10px;
    margin: 0px;
    text-align: center;
  }

  .mission .sub_catch {
    font-size: 15px;
    width: 100%;
    padding: 10px 10px 10px 10px;
    margin: 0px;
    text-align: center;
  }

  .mission section .bg {
    display: none;
  }

  .mission section .textbox {
    position: static !important;
    transform: translate(0, 0) !important;
    -webkit-transform: translate(0, 0) !important;
    -moz-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
  }

  .mission section .textbox_inner {
    width: 100% !important;
  }

  .mission .ruby_contact {
   padding: 30px 0px;
  }

  .mission .btn_area .ruby_contact a {
   width: 320px !important;
  }

  .mission .blur:after {
    box-shadow:
      inset 0 0 20px 5px #fff,
      inset 0 0 20px 5px #fff,
      inset 0 0 20px 5px #fff,
      inset 0 0 20px 5px #fff;
  }

}