@charset "utf-8";
/*****************************************
  original.css
  企業固有のスタイルを指定
******************************************/

/**************************************
★カラー設定
☆トップページ
  ・テキストカラー #000 原則
  ・ボタン・背景色のあるエリア　 → テキストは白or黒
---
☆第２階層以降
---
★その他設定
  ロゴ画像の幅（px）
  ボタンの角丸など
**************************************/
:root {
  /* テキスト */
	--color_text: #000;
  /* メインカラー・ボタン */
  --color_theme: #FF4947;
  /* メインカラーのボタンのテキスト */
  --color_tmText: #FFF;

  /* リンク、メニュー開閉ボタン */
  --color_link: #383838;
  /* GPS */
  --color_gps: #FF4947;
  /* GPS・検索窓のテキスト・アイコン */
  --color_gpsText: #FFF;
  /* 検索窓 */
  --color_frw: #383838;
  /* 全件検索ボタン */
  --color_sch: #FBE05B;
  /* 全件検索ボタンのテキスト */
  --color_schText: #000;

  /* FAQ の[Q] */
  --color_faqQ: #E88383;
  /* FAQ の[A] */
  --color_faqA: #E88383;
  /* FAQ の背景色：メインカラーの10％ */
  --color_liteBg: #FFEBEB;
  /* フッター */
  --color_ft: #383838;
  /* フッターのテキスト */
  --color_ftText: #fff; /* または #fff */
  
  /* 第２階層以降 */
	--color_A: #FF4947;
  --color_B: #4d4d4d;
  --color_Btext: #fff;
  --color_C: #ff4500;
  --color_D: #eee;
  --color_E: #fff;
  --color_btnText: #fff;
  --color_btnText_on: #e30;
  --color_btnBg: #FF4947;
  --color_btnBg_on: #fff;
  
  /* ロゴ画像の幅（PCの表示サイズ） */
  --width_logo: 47px;

  /*--- ↓ 以下は修正不要 ---*/
  /* グレー */
    --color_grayDk: #909090;
    --color_grayLt: #E9E9E9;
  /* 背景色 */
	--color_page_bg: #fff;
  /* 黒 の RGB値 */
  --color_text_rgb: 0, 0, 0; /* color_text の RGB値 */
  /* 角丸 */
  --size_r1: 10px;
  --size_r2: 30px;
  --size_r2b: 35px;
  /* バーガーメニュー用 */
  --scrollbarwidth: calc(100vw - 100%);
  --innerwidth: calc(100vw - (100vw - 100%));
}
/* ★設定ここまで *********************/


/*******************************
 general
*******************************/
body#pagetop {
  -webkit-text-size-adjust: 100%;
  background-color: var(--color_page_bg) !important;
  font-size: 16px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: var(--color_text);
}
#header {                                      
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
@font-face {
  font-family: recop-iconfonts;
  font-display: swap;
  src: url("/jobfind-pc/original/css/option/font/recop-iconfont.eot?") format("eot"),
       url("/jobfind-pc/original/css/option/font/recop-iconfont.woff") format("woff"),
       url("/jobfind-pc/original/css/option/font/recop-iconfont.ttf") format("truetype");
}

a:link, a:active,
a:visited, a:hover {
  color: var(--color_link) !important;
}

#header, #footer,
#header *, #footer * { box-sizing: border-box; }

#header img,
#footer img { width: 100%; }
img { height: auto; }

/***** switch display *****/
@media (min-width: 768px) {
  .sp { display: none; }
}
@media (max-width: 767px) {
  .pc { display: none; }
}

/***** utility *****/
.inline { display: inline-block; }



/*******************************
 regular contents reset
 *******************************/
/* ▼common.css で固定幅(780px)指定あり */
#container,
#header, #header .content, #header .content .free,
#main, #main .content, #main .content .free,
#footer .content, #footer .content .free { width: auto; }
/***** #container *****/
div#container { width: 100%; }

/*******************************
 メインエリア
*******************************/
#main .content .free {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/*** 最小画面幅でSNSボタン起因の横スクロール防止 ***/
#bottomContent #social {
  overflow: hidden;
}

/*******************************
 ヘッダー
*******************************/
/* ベーシックプラン */
header #h_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 60px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
}
header img.logo {
  max-width: var(--width_logo);
}
header h1 {
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  text-align: right;
  width: calc(100% - var(--width_logo) - 20px); /* logo - margin10x2 */
  padding: 0 10px;
}
header h1 span {
  display: inline-block;
}
@media only screen and (max-width: 767px){
  header #h_wrapper {
    flex-direction: column;
    height: auto;
  }
  header h1 {
    width: 100%;
    font-size: 15px;
    text-align: center;
    padding: 0 0 20px;
  }
  /* header h1 span {
    display: block;
  } */
  header img.logo {
    max-width: var(--width_logo);
    margin: 10px auto;
  }
}

/*******************************
 フッター
*******************************/
#footer {
  height: 100px;
}
#footer .content .free {
  width : 100%;
}
#footer .free footer {
  background-color: var(--color_ft);
}
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
}
footer p {
  color: var(--color_ftText);
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
  padding-bottom: 0.3em;
}
footer a:link,
footer a:active,
footer a:visited,
footer a:hover {
  color: var(--color_ftText) !important;
}
@media only screen and (max-width: 767px){
  #footer { position: absolute; bottom: 0; }
  footer { height: 100px; text-align: center; }
}
/***** #bottomContent *****/
#main .space {
  padding-bottom: 150px; /* 174px ズレ4px */
  }
@media only screen and (max-width: 767px){
  #main .space {
    padding-bottom: 100px; /* 104px */
  }
}


/*******************************
 404エラー画面
*******************************/
#errorContent {
  max-width: 1000px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 10px;
}
@media only screen and (max-width: 767px){
  #errorContent { padding: 0 15px; }
}

/**/