@charset "utf-8";

/*****************************************************************
カスタム　特別求人サイトテンプレート用レイアウト
*****************************************************************/

/*==========================================
/
/ 0■color
/
==========================================*/

/*****************************************************************
  必須項目：下記3カラーの設定を変更することで以降のCSSに反映されます
*****************************************************************/
:root {
    /* メインカラー （ボタン枠 カテゴリ検索枠などに反映される） */
    --color-main: #37bef0;
    /* アクセントカラー （カテゴリアイコン お気に入り 応募ボタンなどに反映される） */
    --color-accent: #f7c51e;

    /* サブカラー （ボックス枠 グローバルナビゲーション枠 サイドナビゲーション枠などに反映される） */
    --color-sub: #bfbfbf;
    /* バックグラウンドカラー */
    --color-bg: #e1f5fd;
    /* 特集ラベルカラー */
    --color-label: #D93E3E;

    /* お気に入りカラー ※アクセントカラーと別の色にする場合は変更する */
    --color-fav:var(--color-accent);
    /* 応募ボタンカラー ※アクセントカラーと別の色にする場合は変更する */
    --color-apply:var(--color-accent);
}

/*****************************************************************
  任意項目：更に細かく変更する場合は直接変更してOKです
*****************************************************************/
/* メインカラー */
.main-color{ color:var(--color-main);}
.head-gnav-list li.current, .head-gnav-list li:hover, .main-bg-color, .main-bg-color-bf::before, .main-bg-color-af::after, #under-nav .on , .main-bg-hover:hover{ background-color:var(--color-main);}/*背景色*/
.main-border-color, .main-border-color-bf::before, .main-border-color-af::after{border-color:var(--color-main)}/*ボーダー*/
.main-shadow-color, .main-shadow-color-bf::before, .main-shadow-color-af::after{box-shadow:var(--color-main);}/*ボックスシャドウ*/
.main-arrow-color-af::after , .list-arrow-text::after{ border-right-color:var(--color-main); border-bottom-color: var(--color-main);}
.main-arrow02-color-af::before , .list-arrow-text::after{border-top-color:var(--color-main); border-right-color:var(--color-main);}
.main-arrow03-color-af::before{border-left-color:var(--color-main);}
a:hover .main-arrow03-color-af::before,li.on .main-arrow03-color-af::before{border-left-color:#fff;}
.main-icon-color{ fill:var(--color-accent);}
.main-font-color{ color:var(--color-main);}
#paging .prevBox span a, #paging .currentBox span a, #paging .nextBox span a{color:var(--color-main);}

/* サブカラー */
.sub-color{ color:var(--color-sub);}
.sub-bg-color{ background-color:var(--color-sub);}/*背景色*/
.sub-border-color{border-color:#37bef0;}/*ボーダー*/
.sub-shadow-color{box-shadow:var(--color-sub);}/*ボックスシャドウ*/

/* バックグラウンドカラー */
.background-color{ background-color:var(--color-bg);}

/* お気に入りカラー */
.hart-color{fill:var(--color-fav);}
.actionList_item .btn.btn-added .btnKeep-ic, .actionList_item.active .btnKeep-ic{
    fill:var(--color-fav) !important;
}
.active a .status.status-pc .num,
nav#gnav ul li.menu-favorite.active a .status .num{
    color:var(--color-fav);
    }

/* 特集ラベルカラー */
.feature,.feature-ic-category{background-color:var(--color-label); color: #fff;}

/* lpアクセントカラー */
.lp-bg-color{background-color:var(--color-accent); color: #fff;}
.lp-color, .web-tips .num-box__num{color:var(--color-accent);}
.lp-box-flow-items .lp-box-flow-ttl .lp-box-flow-ttl-txt::after {
  background-color:var(--color-main);
}
.lp-box-flow-items .lp-box-flow-ttl.lp-border-color{border-color:var(--color-main);}
#lp .lp-ttl-l::after, .lp-ttl-m::before, .lp-ttl-m::after, .lp-list-link a{background:var(--color-accent);}
.lp-ttl-s{border-bottom-color:var(--color-accent);}

/* 応募ボタンカラー 必要に応じて変えてください */
.apply-bg-color{background-color:var(--color-apply);}
.catch-color{color:var(--color-apply);}