@charset "UTF-8";
/*-----------------------------------------------------------------*/
/*PC版トップページ設定*/
/*キービジュアル(main)／募集職種（fNav）*/
/*-----------------------------------------------------------------*/
/*メイン画像*/
main {
  width: min(1024px, 100%);
  aspect-ratio: 1200 / 764;
  background: url(../_image/main.png) no-repeat center top / 100% auto;
  margin: 12px auto 0;
}

/*-----------------------------------------------------------------*/
/*フッターナビゲーションのレイアウト*/
.fNav {
  width: 100%;
  background-image: url('../_image/bg_fNav.png');
  background-repeat: no-repeat;
  background-position: center bottom 20px;
  background-size: cover;
  margin: 0 auto 0;
}
/*-----------------------------------------------------------------*/
ul.navi {
}
/*募集職種*/
.topNavi {
  position: relative;
  width: min(980px, 96%);
  margin: 0 auto;
  padding: 70px 0 0;
  list-style: none;
  font-size: 17px;
  text-align: center;
  z-index: 2;
}
/*募集職種*/
.topNavi li:nth-of-type(1) {
  display: inline-block;
  width: 100%;
  padding: 0 0 12px;
  border: none;
  background-color: transparent;
}
.topNavi li:nth-of-type(1) img {
  max-width: 20%;
}
/*リスト基本*/
.topNavi li {
  position: relative;
  display: inline-block;
  width: 48%;
  height: auto;
  background: #fff;
  font-weight: bold;
  margin: 0.5%;
  padding: 18px;
  vertical-align: top;
  text-align: left;
  box-sizing: border-box;
  border: 1px solid #dbdbdb;
}
/*--------------------------------------------------------その他設定*/
/*---------------------------------------ボックス全体をリンク領域に変更*/
/*ボックス全体をリンク領域に変更*/
.topNavi a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -99999px;
}
.topNavi li {
  transition: all 0.5s;
}
.topNavi li:hover {
  transform: translateX(6px);
  opacity: 0.8;
}
.topNavi li:nth-of-type(1):hover {
  transform: translateX(0);
  opacity: 1;
}
/*---------------------------------------------スマホ用ページ用設定*/
@media screen and (max-width: 767px) {
  /*-----------------------------------------------------------------*/
  /*トップページ設定*/
  /*-----------------------------------------------------------------*/
  /*-----------------------------------------------------------------*/
  /*フッターナビゲーションのレイアウト*/
  .fNav {
    margin: 0px auto 0;
    background-position: left -500px bottom -20px;
  }

  /*-----------------------------------------------------------------*/
  /*インタビュー選択*/
  .topNavi {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 60px 0;
    list-style: none;
    text-align: center;
    z-index: 2;
    font-size: 14px;
    font-weight: bold;
  }
  /*募集職種帯*/
  .topNavi li:nth-of-type(1) {
    width: 100%;
    height: auto;
    padding: 12px 0 6px 0;
    text-align: center;
  }
  /*募集職種帯*/
  .topNavi li:nth-of-type(1) img {
    display: block;
    max-width: 24%;
    margin: 0 auto;
  }

  /*リスト基本*/
  .topNavi li {
    width: 100%;
    background-color: transparent;
    margin: 0;
    padding: 20px;
    border: none;
    border-bottom: 1px solid #dbdbdb;
  }
  /*リスト基本*/
  .topNavi li:last-child {
  }
  /*-----------------------------------------------------------------*/
  /*-------------------------------------------------------end@media*/
}
/*---------------------------------------------------iPhone5用設定*/
@media screen and (max-width: 374px) {
  /*iPhone5用設定*/
  /*-------------------------------------------------------end@media*/
}
/*-------------------------------------------------------*/
/*ratio対応 スマホ用*/
@media screen and (max-width: 767px) {
  main {
    width: 100%;
    height: auto;
    background: url('../_image/mainSP.png') no-repeat center top / 100% auto;
    margin: 0 auto 0;
    padding-bottom: calc(100% * 796 / 768);
  }
  /*--------------------------------------------------------end@media*/
}