/*
 * recruit-responsive.css
 * recruit.alivecast.co.jp レスポンシブ対応
 * ブレークポイント: 768px以下をスマートフォン対応
 */

/* ===========================
   共通修正（全幅）
=========================== */

/* インタビューページ: member_img を dd の幅(60px)に収める */
.page_interview .interview_box .interview_box_inner dl dd img.member_img {
  width: 60px;
  height: auto;
  display: block;
}

/* 名前ラベル（職種名・氏名）のフロートクリア */
.page_interview .interview_box .interview_box_inner dl .member_name {
  clear: both;
}

@media screen and (max-width: 768px) {

  /* ===========================
     基本レイアウト
  =========================== */
  html, body {
    overflow-x: hidden;
  }

  .cont_inner {
    width: auto !important;
    margin: 0 20px !important;
    padding: 0 !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* ===========================
     ヘッダー
  =========================== */
  #header .logo {
    top: 16px;
    left: 16px;
  }

  #header .logo img {
    width: 80px;
  }

  #header .logo .txt {
    font-size: 1.0rem;
    padding-left: 8px;
    margin-top: 0.2em;
  }

  /* ===========================
     トップ キービジュアル
  =========================== */
  .page_top .page_top_header {
    height: 280px;
  }

  .page_top .page_top_header .txt_box {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
  }

  .page_top .page_top_header .txt_box .txt_tl {
    font-size: 2.0rem;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }

  .page_top .page_top_header .txt_box .txt {
    font-size: 1.2rem;
    margin-top: 8px;
  }

  .page_top .page_top_header .txt_box .txt strong {
    font-size: 1.4rem;
  }

  .page_top .page_top_header .txt_box .txt_jobs {
    display: block;
    font-size: 1.1rem;
  }

  .page_top .page_top_header .txt_box .txt_btn {
    margin-top: 16px;
    font-size: 1.8rem;
  }

  /* ===========================
     AliveCastについて（2カラム→1カラム）
  =========================== */
  .about_top_box .about_top_box_inner {
    overflow: hidden;
  }

  .about_top_box .about_top_box_inner .img_box {
    width: 100% !important;
    height: auto !important;
    float: none !important;
  }

  .about_top_box .about_top_box_inner .img_box img {
    width: 100%;
    height: auto;
  }

  .about_top_box .about_top_box_inner .about_intro {
    width: 100% !important;
    display: block !important;
    position: static !important;
  }

  .about_top_box .about_top_box_inner .about_intro .about_intro_inner {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    padding: 20px 20px 24px !important;
    box-sizing: border-box;
  }

  .about_top_box .about_top_box_inner .about_intro .about_intro_inner .base_tl_txt {
    font-size: 1.6rem !important;
  }

  .about_top_box .about_top_box_inner .about_intro .about_intro_inner .txt {
    font-size: 1.4rem !important;
    margin-top: 16px;
  }

  /* recruit_intro（3カラム→1カラム） */
  .about_top_box .recruit_intro {
    height: auto !important;
  }

  .about_top_box .recruit_intro .recruit_intro_inner {
    height: auto !important;
  }

  .about_top_box .recruit_intro ul {
    position: static !important;
    height: auto !important;
    padding: 20px 0;
  }

  .about_top_box .recruit_intro .intro_list {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    padding: 20px 20px !important;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }

  .about_top_box .recruit_intro .intro_list .intro_list_inner {
    padding: 0 !important;
  }

  .about_top_box .recruit_intro .intro_list .recruit_intro_tl {
    font-size: 1.8rem !important;
    padding-top: 70px;
    background-size: 50px !important;
  }

  .about_top_box .recruit_intro .intro_list .txt_box {
    width: 100% !important;
    font-size: 1.4rem;
  }

  .about_top_box .recruit_intro .intro_box01 .growth,
  .about_top_box .recruit_intro .intro_box02 .innovators,
  .about_top_box .recruit_intro .intro_box03 .chance {
    padding-top: 70px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===========================
     メリットセクション（absoluteレイアウト解除）
  =========================== */
  .merit_top_box {
    padding: 40px 0;
  }

  .merit_top_box .merit_box_inner {
    padding: 0 20px !important;
  }

  .merit_top_box .merit_box_inner .merit_box01,
  .merit_top_box .merit_box_inner .merit_box02,
  .merit_top_box .merit_box_inner .merit_box03 {
    position: static !important;
    height: auto !important;
    padding-bottom: 24px;
    margin-bottom: 40px;
  }

  .merit_top_box .merit_box_inner .merit_list .img_box {
    position: static !important;
    width: 100% !important;
  }

  .merit_top_box .merit_box_inner .merit_list .img_box img {
    width: 100% !important;
    height: auto !important;
  }

  .merit_top_box .merit_box_inner .merit_list .txt_box {
    position: static !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 20px 0 16px !important;
    background: #fff;
    box-sizing: border-box;
  }

  .merit_top_box .txt_box .merit_number {
    width: 50px !important;
    margin-top: -20px !important;
  }

  .merit_top_box .txt_box .merit_tl {
    font-size: 1.6rem !important;
    margin-bottom: 16px !important;
  }

  .merit_top_box .txt_box .txt {
    font-size: 1.4rem !important;
    text-align: left;
    margin: 0 16px !important;
  }

  /* ===========================
     ギャラリー
  =========================== */
  .gallery_top_box .box_tl {
    font-size: 1.8rem;
    padding: 20px 0;
  }

  /* ===========================
     メッセージ
  =========================== */
  .messege_top_box {
    padding: 30px 20px;
  }

  .messege_top_box .box_tl {
    font-size: 1.8rem;
    padding: 8px 0;
    margin: 20px auto;
  }

  /* ===========================
     求人カテゴリ（3カラム→1カラム）
  =========================== */
  .recruit_category .content_box {
    width: auto !important;
    margin: 0 20px !important;
  }

  .recruit_category li {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 16px;
  }

  .recruit_category li img {
    width: 100%;
    height: auto;
  }

  /* ===========================
     ブログ（採用コンテンツ）
  =========================== */
  .knowhow_area .cont_inner {
    width: auto !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
  }

  .knowhow_main .knowhow_main_list {
    display: block !important;
  }

  .knowhow_main .knowhow_main_list .knowhow_main_item {
    width: 100% !important;
    margin-bottom: 24px;
  }

  /* ===========================
     求人詳細ページ（job.php）
  =========================== */
  .cont_page .page_top_header {
    height: 200px;
  }

  .cont_page .page_top_header .txt_box span {
    font-size: 2.0rem;
  }

  .cont_page .page_top_header .txt_box em {
    font-size: 1.3rem;
  }

  .page_planner .content_desc .content_desc_main,
  .page_hacker .content_desc .content_desc_main,
  .page_creator .content_desc .content_desc_main,
  .page_front .content_desc .content_desc_main,
  .page_agent .content_desc .content_desc_main {
    width: 100% !important;
    font-size: 1.4rem;
  }

  .page_planner .content_recruitment,
  .page_hacker .content_recruitment,
  .page_creator .content_recruitment,
  .page_front .content_recruitment,
  .page_agent .content_recruitment {
    width: 100% !important;
    margin: 20px 0 !important;
    box-sizing: border-box;
  }

  /* 募集要項テーブル */
  .content_recruitment dl dt {
    font-size: 1.3rem !important;
    padding: 10px 12px !important;
  }

  .content_recruitment dl dd {
    font-size: 1.3rem !important;
    padding: 10px 12px 10px 12px !important;
  }

  /* 社員の声セクション */
  .base_voice_box .voice_box_inner .box_tl {
    font-size: 1.8rem;
  }

  /* ===========================
     インタビューページ
  =========================== */
  .page_interview .interview_box .interview_box_inner dl dd {
    width: 50px;
  }

  .page_interview .interview_box .interview_box_inner dl dt {
    padding: 16px 0 0 66px;
  }

  /* ===========================
     応募フォームページ
  =========================== */
  .recruit-apply-wrap {
    padding: 24px 16px 60px !important;
  }

  .recruit-apply-wrap h1 {
    font-size: 2.0rem !important;
  }

  /* ===========================
     確認画面・完了画面
  =========================== */
  .recruit-confirm-box {
    padding: 24px 16px !important;
  }

  .recruit-confirm-head h2 {
    font-size: 2.0rem !important;
  }

  .recruit-thanks-box {
    padding: 32px 16px !important;
  }

  .recruit-thanks-box h2 {
    font-size: 2.2rem !important;
  }

  /* ===========================
     フッター
  =========================== */
  #footer {
    padding: 20px 16px;
  }

  #footer .copyright {
    font-size: 1.0rem;
  }

  /* ===========================
     トップへ戻るボタン
  =========================== */
  #pagetop {
    bottom: 16px;
    right: 16px;
  }

  #pagetop a img {
    width: 44px;
  }

} /* end @media 768px */