/* デザインA */

:root {
  --base-color1: #0068B7; /* ベースカラー1 */
  --base-color2: #3386C5; /* ベースカラー2 */
  --base-color3: #E5EFF8; /* ベースカラー3 */
  --base-color4: #043D69; /* ベースカラー4 */
}
/*グローバルメニュー　ブレイクポイント設定*/
@media (max-width: 1199px){
  .l_header__logo_image{
    max-width: 200px;
    height: 54px;
  }
  .l_header__navi_wrapper{
    background: #fff;
    width: 100%;
    text-align: center;
    display: none;
  }
  .navi_global__item a{
    padding: .5em .75em;
    border-top: 1px solid #e1e1e1;
  }
  .toggle_menu {
    display: block;
  }
}
@media (min-width: 1200px) {
  .l_header__inner {
    height: 80px;
  }
  .l_header__mobile_head_wrapper{
    float: left;
  }
  .l_header__logo_image{
    max-width: 300px;
    height: 80px;
  }
  .l_header__navi_wrapper{
    height: 100%;
    float: right;
    display: block !important;
  }
  .l_header__navi_list {
    height: 100%;
  }
  .navi_global__item {
    float: left;
    height: 100%;
  }
  .navi_global__item a{
    padding: 0 1.25em;
    line-height: 80px;
    border-left: 1px solid #e1e1e1;
  }
}
/*全体背景*/
body{
  background: #f2f3f4;
}
/*リンク色*/
a {
  color:var(--base-color1);
}
/*リンク色：ホバー時*/
a:hover,
a:active,
a:focus{
  color:var(--base-color2);
}
/*ナビゲーションメニュー開閉ボタン 文字色と背景*/
.toggle_menu {
  color: var(--base-color1);
  border-color: var(--base-color1);
}
/*ナビゲーションメニュー開閉ボタン 文字色と背景：開いたとき*/
.open .toggle_menu {
  background: var(--base-color1);
}
/*コンテンツブロックタイトル*/
.content__heading--lg {
  color: var(--base-color4);
  background: var(--base-color3);
}
/*コンテンツ下の矢印色*/
.content__box.arrow_on:after {
  border-top-color: var(--base-color1);
}
/*検索メニュー開閉ボタン 文字色と背景*/
.btn_menu span{
  color: var(--base-color1);
  border-color: var(--base-color1);
}
/*検索メニュー開閉ボタン 文字色と背景：開いたとき*/
.btn_menu.open span{
  background: var(--base-color1);
}
/*検索条件設定のタイトル虫眼鏡アイコン*/
  .search_form_wrapper--title:before{
    color: var(--base-color1);
  }
/*検索設定ボックスの項目背景*/
.dl_wrapper--search_form dl dt span{
  background: var(--base-color1);
}
/*チェックボックスのチェック色*/
label.checkbox_label:after {
  border-color: var(--base-color1);
}
/*検索結果の表示件数文字色*/
.count_box span.count_box__total_count{
  color: var(--base-color1);
}
/*求人一覧派遣型の職種文字色*/
.recruit__shokushu{
  color: var(--base-color1);
  border-color: var(--base-color1);
}
/*NEWアイコン色*//*default:#ff5252（＝応募フォームへのボタン色）*/
.ico_new{
  background: #ff5252;
}
/*Indeedタグ色*//*default:#ff5252（＝応募フォームへのボタン色）*/
.indeed-tag-box .indeed-tag-l {
  background-color: #ffffff;
  border: solid 1px var(--base-color1);
  color: var(--base-color1);
}


/*雇用形態の線色と文字色*//*default:#fa9f0c（＝ページ内遷移のボタン色）*/
.tag_list__item{
  color: #fa9f0c;
  border-color: #fa9f0c;
}
/*ボタン背景*//*default:#fffce6*/
.btn_area {
  background: #fffce6;
}
/*ページ内遷移のボタン色*//*default:#fa9f0c（＝雇用形態の線色と文字色）*/
.btn.btn_main {
  background: #fa9f0c;
}
/*ページ内遷移のボタン色：ホバー時*//*default:#fba925*/
.btn.btn_main:hover {
  background: #fba925;
}
/*応募フォームへのボタン色*//*default:#ff5252（＝NEWアイコン色）*/
.btn.btn_entry {
  background: #ff5252;
}
/*応募フォームへのボタン色：ホバー時*//*default:#ff6c6c*/
.btn.btn_entry:hover {
  background: #ff6c6c;
}
/* ----------------PC・タブレット・スマホ横------------ */
@media (min-width: 544px){
  /*ナビゲーションのカレントページとホバー時の文字色と背景*/
  .navi_global__item.is_current a,
  .navi_global__item a:hover{
    color: #fff;
    background: var(--base-color1);
  }
  /*ページタイトルの左ボーダー*/
  .content__heading--xl {
    border-color:var(--base-color1);
  }
  /*現在の検索設定背景*/
  .search_navigate{
    background: var(--base-color3);
  }
  /*ページャー　カレントページ文字色*/
  .page.current {
    color: var(--base-color1);
  }
  /*ページャー　カレントページ文字色：ホバー時*/
  .page.current:hover {
    color: var(--base-color2);
  }
  /*このページの先頭へ背景*/
  .pagetop {
    background: var(--base-color3);
  }
}
/* ----------------スマホ縦------------ */
@media (max-width: 543px){
  /*パンくずの背景*/
  .breadcrumbs{
    background: var(--base-color3);
  }
  /*ページタイトルの背景*/
  .content__heading--xl {
    background: var(--base-color1);
  }
  /*検索条件設定のタイトル背景*/
  .search_form_wrapper--title{
    background: var(--base-color3);
  }
  /*求人項目の背景*/
  .dl_wrapper_default dl dt span{
    background: var(--base-color1);
  }
  /*ページャー　カレントページ背景*/
  .page.current {
    background: var(--base-color1);
  }
  /*ページャー　カレントページ背景：ホバー時*/
  .page.current:hover {
    background: var(--base-color2);
  }
}