@charset "utf-8";
/* CSS Document */

/* ==============================================
   見出し（ALL JOBS / EXPERIENCE）
============================================== */
.midasi_h2 {
  text-align: center;
  font-weight: 900;
  margin-left: auto;
  margin-right: auto;
}
.midasi_h2 img {
  vertical-align: -5px;
  margin-right: 10px;
}

/* --- レスポンシブ切り替え --- */
@media (min-width: 481px) {
  /* PC用 */
  .midasi_h2 {
    font-size: 32px;
  }
}
@media (max-width: 480px) {
  /* スマホ用 */
  .midasi_h2 {
    font-size: 24px;
  }
}


/* ==============================================
   サイト説明文エリア (#explain_bx_tppg_bg)
============================================== */
#explain_bx_tppg_bg {
  width: 100%;
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  background-image: url("/images/index/back2.jpg");
  padding-top: 28px;
  padding-bottom: 20px;
  background-size: cover;
  color: #333;
}
#explain_bx_tppg {
  max-width: 1050px;
  margin-right: auto;
  margin-left: auto;
}
#explain_bx_tppg .h {
  margin-left: auto;
  margin-right: auto;
  padding-right: 10px;
  padding-left: 10px;
  color: #FFF;
}
#explain_bx_tppg .txt {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  padding-right: 10px;
  padding-left: 10px;
  color: #FFF;
}

/* --- レスポンシブ切り替え --- */
@media (min-width: 481px) {
  /* PC用 */
  #explain_bx_tppg_bg {
    margin-top: 100px;
  }
  #explain_bx_tppg .h {
    max-width: 1050px;
    font-size: 32px;
  }
  #explain_bx_tppg .txt {
    max-width: 630px;
    margin-top: 40px;
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  /* スマホ用 */
  #explain_bx_tppg_bg {
    margin-top: 20px;
  }
  #explain_bx_tppg .h {
    max-width: 100%;
    font-size: medium;
  }
  #explain_bx_tppg .txt {
    max-width: 100%;
    margin-top: 20px;
    font-size: x-small;
  }
}


/* ==============================================
   職業カテゴリ一覧部分 (.adjust_bx)
============================================== */
.adjust_bx {
  position: relative;
}
.adjust_bx p {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: white;
  background: #0070FF;
  line-height: 1;
  padding: 2%;
}

/* --- レスポンシブ切り替え --- */
@media (min-width: 481px) {
  /* PC用 */
  .adjust_bx p {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  /* スマホ用 */
  .adjust_bx p {
    font-size: 10px;
  }
  .sub_title {
    font-size: small;
  }
}


/* ==============================================
   インタビュー一覧部分 (.interview_adjust_bx)
============================================== */
.interview_adjust_bx {
  position: relative;
}
.interview_adjust_bx p.shokugyou_name {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: white;
  background: #28A746;
  line-height: 1;
  padding: 2%;
}
.interview_adjust_bx p.date {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  color: white;
  line-height: 1;
  padding: 2%;
}
.interview_adjust_bx .name {
  color: #666;
  margin-right: 5px;
}

/* --- レスポンシブ切り替え --- */
@media (min-width: 481px) {
  /* PC用 */
  .interview_adjust_bx p.shokugyou_name {
    font-size: 12px;
  }
  .interview_adjust_bx p.date {
    font-size: 12px;
  }
  .interview_adjust_bx .name {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  /* スマホ用 */
  .interview_adjust_bx p.shokugyou_name {
    font-size: 10px;
  }
  .interview_adjust_bx p.date {
    font-size: 10px;
  }
  .interview_adjust_bx .name {
    text-align: center;
    font-size: 10px;
  }
}

/* ==============================================
   スマホサイズ（画面幅575px以下）の時の設定
============================================== */
@media (max-width: 575px) {
  /* 親枠（row）が画面外にはみ出すのを防ぎ、左右の余白を整える */
  .overflow_hidden.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2列にする設定と、各アイテムの隙間の調整 */
  .overflow_hidden.row > .col-sm-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 5px !important;  /* 中央と画面端の余白（左） */
    padding-right: 5px !important; /* 中央と画面端の余白（右） */
    margin-bottom: 10px; /* 上下の隙間 */
  }
}

/* ==============================================
   五十音順・カテゴリ別ボタンの中央揃え（全画面サイズ共通）
============================================== */
.mx-auto .row {
  /* Flexboxで横並びにし、はみ出たら折り返す */
  display: flex;
  flex-wrap: wrap;
  /* 中央揃えにする */
  justify-content: center;
  /* 余計なはみ出しを防ぐ */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-auto .row p {
  /* ボタンとボタンの間に適度な隙間を作る（上0、右2px、下10px、左2px） */
  margin: 0 2px 10px 2px;
}

/* ==============================================
   スマホサイズ（画面幅575px以下）の時のボタン調整
============================================== */
@media (max-width: 575px) {
  .mx-auto .row .btn {
    /* スマホ画面でボタンが大きすぎて崩れないように少し縮小 */
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ボタン同士の隙間（PC・スマホ共通） */
.btn_wrap {
  padding: 2px;
}

/* ==============================================
   スマホサイズ（画面幅575px以下）の時の設定
============================================== */
@media (max-width: 575px) {
  /* 五十音ボタンを「5個」で折り返すための幅制限（スマホのみ） */

  .gojuon_bx {
    max-width: 100%;
    padding: 0 10px; /* 画面端からの少しの余白 */
  }

  /* 1つのボタンの枠を強制的に「20%（5等分）」にする */
  .gojuon_bx .btn_wrap {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 2px;
  }
  
  /* ボタンを枠いっぱいに広げて綺麗に揃える */
  .gojuon_bx .btn {
    width: 100%;
    padding: 6px 0;
    font-size: 12px;
    text-align: center;
  }
  
  /* カテゴリボタンのサイズ調整（スマホのみ） */
  .category_bx .btn {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* PC用の背景画像（デフォルト） */
.top_main_bg {
  background-image: url('/images/index/index_title.jpg');
}

/* スマホ用の背景画像と高さ設定 */
@media (max-width: 575px) {
  .top_main_bg {
    background-image: url('/images/index/index_title_m.jpg') !important;
  }
  
  /* ↓ これを追加！ スマホ画像の縦横比に合わせて高さを出す ↓ */
  .index_img_bx .img_bx::after {
    padding-top: 100% !important; 
    /* 
     * ※ 100% だと「正方形」の高さになります。
     * 画像がもっと縦長の場合は 120% や 130% に、
     * 少し横長の場合は 80% や 90% に数値を変更して、
     * ピッタリ全体が表示されるように調整してください！
     */
  }
}