@charset "UTF-8";
/* ==========================================================================
//
// PC Small(1024px)
//
========================================================================== */
@media screen and (max-width:1024px) {
  /* ========================================================================
  // bn-recruit
  ======================================================================== */
  #bn-recruit{
    right: 10px;
  }
}
/* ==========================================================================
//
// TABLET & SMARTPHONE (768px)
//
========================================================================== */
@media screen and (max-width:768px) {
  /* ========================================================================
  // mainimg
  ======================================================================== */
  #mainimg .bg-mainimg{
    height: 580px;
  }
  #mainimg .bg-mainimg-newyear{
    height: 580px;
    background-image: url('/img/mainimg_newyear_tb_sp.jpg');
  }
  #mainimg .txt-wrap{
    justify-content: center;
  }
  #mainimg .txt-wrap img{
    width: 70%;
  }
  /* ========================================================================
  // area-info
  ======================================================================== */
  .area-info .ttl-area a{
    padding: 25px 20px;
  }
  /* ========================================================================
  // area-contents
  ======================================================================== */
  .area-contents .txt-lead{
    margin-bottom: 100px;
    line-height: 1.3;
  }
  .area-contents .txt-lead span img{
    height: 22px;
  }

  /* ttl */
  .area-contents .ttl-contents{
    font-size: 16px;
  }
  .area-contents .ttl-contents span{
    font-size: 34px;
  }
  /* sec-company
  -------------------------------------------------------- */
  .area-contents .sec-company{
    font-size: 16px;
  }
  .area-contents .sec-company .ttl img{
    height: 60px;
  }
  .area-contents .sec-company .ttl span{
    margin-top: 0;
  }
  .area-contents .sec-company .btn-basic{
    font-size: 16px;
  }

  /* sec-works & sec-fleet
  -------------------------------------------------------- */
  .area-contents .sec-works-fleet{
    display: block;
  }
  .area-contents .sec-works-fleet a{
    width: 100%;
    padding: 120px 0;
  }
  .area-contents .sec-works-fleet a + a{
    margin-top: 100px;
  }
  .area-contents .sec-works-fleet .ttl-contents{
    max-width: none;
  }

  /* ========================================================================
  //
  // 404
  //
  ======================================================================== */
  #id-error .area-error .list li{
    width: 45%;
  }
  #id-error .area-error .list li .btn-basic{
    width: 100%;
    font-size: 16px;
  }
}

/* ==========================================================================
//
// SMARTPHONE (480px)
//
========================================================================== */
@media screen and (max-width:480px) {
  /* ========================================================================
  // bn-recruit
  ======================================================================== */
  #bn-recruit{
    width: 105px;
  }
  /* ========================================================================
  // mainimg
  ======================================================================== */
  #mainimg .bg-mainimg{
    height: 400px;
  }
  #mainimg .bg-mainimg-newyear{
    padding: 5px;
    height: 400px;
  }
  #mainimg .txt-wrap img{
    width: 85%;
  }
  /* ========================================================================
  // area-info
  ======================================================================== */
  .area-info{
    margin-bottom: 50px;
  }
  .area-info .ttl-area{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #191d6a;
  }
  .area-info .ttl-area a{
    padding: 10px;
  }
  .area-info .list{
    display: block;
  }
  .area-info .list dt{
    padding-left: 15px;
  }
  .area-info .list dd{
    padding-left: 15px;
  }
  .area-info .article{
    padding: 5px 0;
  }
  /* ==========================================================================
  // area-contents
  ========================================================================== */
  .area-contents .txt-lead{
    margin-bottom: 50px;
  }
  .area-contents .txt-lead span img{
    height: 18px;
  }
  /* sec-company
  ---------------------------------------------------------- */
  .area-contents .sec-company{
    padding: 50px 0;
  }
  .area-contents .sec-company .ttl{
    margin-bottom: 20px;
  }
  .area-contents .sec-company .ttl img{
    height: 50px;
  }
  .area-contents .sec-company .inner{
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: 70px 10px;
    background: none;
  }
  .area-contents .sec-company .inner:before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #191d6a;
    z-index: -1;
    mix-blend-mode:multiply;
  }

  /* ========================================================================
  //
  // 404
  //
  ======================================================================== */
  #id-error .area-error{
    padding-top: 50px;
  }
  #id-error .area-error p{
    text-align: left;
  }
  #id-error .area-error .list li{
    width: 100%;
  }
  #id-error .area-error .list li + li{
    margin: 30px 0 0 0;
  }
}