@charset "UTF-8";

/*======================================================
色に関するcss
======================================================*/

/*----------------------------------------------------
ベースカラー
-----------------------------------------------------*/


/*----------------------------------------------------
背景色指定
-----------------------------------------------------*/

.bg-white{background: #fff;}
.bg-black{background: #333;}
.bg-red{background:#f00;}
.bg-yellow{background:#FFF9DD;}
.bg-light-yellow{background:#FFFDF4;}
.bg-dark-yellow{background:#F6D796;}
.bg-gray{background:#999;}
.bg-light-gray{background:#ccc;}
.bg-green{background:#21937D;}
.bg-pink{background:#E68B8B;}
.gt-light-green{background:#DEEFEB;}
.gt-light-orange{background:#FFF3EA;}
.gt-light-pink{background:#FFEDF1;}
.gt-light-purple{background:#E4E1E6;}
.gt-light-blue{background:#D2DCF7;}

/*----------------------------------------------------
ラインカラー
-----------------------------------------------------*/

/*----------------------------------------------------
フォントカラー
-----------------------------------------------------*/

.font-blue,a.font-blue:link,a.font-blue:visited{
    color:#3077BF;
}
.font-white{color:#fff;}
.font-black{color:#333;}
.font-gray{color:#999;}
.font-red{color:#ff0000;}
.font-green{color:#21937D;}
.font-pink{color:#E68B8B;}

/*======================================================
カテゴリー別色分け
======================================================*/

/*----------------------------------------------------
背景色
------------------------------------------------------*/
.bg-color-raito{ background:#657F28;} /*権利擁護・市民後見センター*/
.bg-color-vol{ background:#B75300;}/*ボランティア・市民活動センター */
.bg-color-senior{ background:#A45093;}/*北九州シニアネットワークアカデミー*/
.bg-color-other{ background:#107A92;}/*ウェルとばた → その他に変更*/
.bg-color-college{ background:#92302F;}/*認知症サポーター養成講座 → ボラ大に変更*/
.bg-color-kifu{ background:#6565C6;}/*民間社会福祉事業従事者 救済事業 → 寄付に変更*/
.bg-color-kouku{ background:#366EAD;}/*校(地)区 社会福祉協議会*/
.bg-color-puchibo{ background:#517A5F;}/*ぷちぼにっき*/


/*----------------------------------------------------
文字色
------------------------------------------------------*/
.font-raito{ color:#657F28;}/*権利擁護・市民後見センター*/
.font-vol{ color:#B75300;}/*ボランティア・市民活動センター */
.font-senior{ color:#A45093;}/*北九州シニアネットワークアカデミー*/
.font-other{ color:#107A92;}/*ウェルとばた → その他に変更*/
.font-college{ color:#92302F;}/*認知症サポーター養成講座 → ボラ大に変更*/
.font-kifu{ color:#6565C6;}/*民間社会福祉事業従事者 救済事業 → 寄付に変更*/
.font-kouku{ color:#366EAD;}/*校(地)区 社会福祉協議会*/
.font-puchibo{ color:#517A5F;}/*ぷちぼにっき*/

/*----------------------------------------------------
地域活動レポート　カテゴリー名の色分け
------------------------------------------------------*/
.c-card-wrapper .cat-report-raito{ background:#657F28;} /*権利擁護・市民後見センター*/
.c-card-wrapper .cat-report-vol{ background:#B75300;}/*ボランティア・市民活動センター */
.c-card-wrapper .cat-report-senior{ background:#A45093;}/*北九州シニアネットワークアカデミー*/
.c-card-wrapper .cat-report-etc{ background:#107A92;}/* その他に変更*/
.c-card-wrapper .cat-report-college{ background:#92302F;}/* ボラ大に変更*/
.c-card-wrapper .cat-report-kifu{ background:#6565C6;}/* 寄付に変更*/
.c-card-wrapper .cat-report-kouku{ background:#366EAD;}/*校(地)区 社会福祉協議会*/
.c-card-wrapper .cat-report-puchibo{ background:#517A5F;}/*ぷちぼにっき*/

/*======================================================
階層別色分け
======================================================*/

/*----------------------------------------------------
背景色
-----------------------------------------------------*/

.bg-color-about{background: #62B5B2;}/*社協って？*/
.bg-color-office{background: #7AC67B;}/*事業一覧*/
.bg-color-consul{background: #F3C517;}/*相談したい*/
.bg-color-active{background: #F4A580;}/*地域で活動したい*/
.bg-color-know{background: #F4B3C2;}/*知りたい*/
.bg-color-donation{background: #986FAD;}/*寄付したい*/
.bg-color-website{background: #3551A2;}/*社協HPについて*/
.bg-color-other{background: #3551A2;}/*その他*/


/*----------------------------------------------------
背景色　薄い色
-----------------------------------------------------*/

.bg-color-about-light{background: #DEEFEB;}/*社協って？*/
.bg-color-office-light{background: #C3E8C4;}/*事業一覧*/
.bg-color-consul-light{background: #FADC6B;}/*相談したい*/
.bg-color-active-light{background: #F8D9CA;}/*地域で活動したい*/
.bg-color-know-light{background: #FFDEE6;}/*知りたい*/
.bg-color-donation-light{background: #E1D0EA;}/*寄付したい*/
.bg-color-website-light{background: #D2DCF7;}/*社協HPについて*/
.bg-color-other-light{background: #D2DCF7;}/*その他*/



/*----------------------------------------------------
ボーダーの色
-----------------------------------------------------*/

.border-color-about{background: #62B5B2;}/*社協って？*/
.border-color-office{background: #7AC67B;}/*事業一覧*/
/*.border-color-consul{background: #FFF3EA;}相談したい*/
/*.border-color-active{background: #F4A580;}地域で活動したい*/
.border-color-know{background: #FFEDF1;}/*知りたい*/
.border-color-donation{background: #E1D0EA;}/*寄付したい*/
.border-color-other{background: #3551A2;}/*その他*/


/*======================================================
ボタンのホバーの色 <button>に指定
======================================================*/

.btn-hover a:hover{background:#D6EBE8;} /* デフォルト */
.btn-hover-silver a:hover{background:#82BAF2;} /* 高齢者に関すること */
.btn-hover-handicap a:hover{background:#6EB7A9;} /* 障害者に関すること */
.btn-hover-child a:hover{background:#F7BA8D;} /* 子どもに関すること */
.btn-hover-life a:hover{background:#F4C0C0;} /* 生活に関すること */

/*======================================================
新着情報カテゴリー色分け
======================================================*/

.cat-news-all{
    background-color: #1a7f97;
    color: #ececec;
}
.cat-news-event {
    background-color: #b75b05;
    color: #ececec;
}
.cat-news-joseikin {
    background-color: #A24C84;
    color: #ececec;
  }
.cat-news-recruit {
    background-color: #766FAD;
    color: #ececec;
} 
.cat-news-other {
    background-color: #4761AF;
    color: #ececec;
}

/*======================================================
アイコンの色だけ変えたい
======================================================*/

.ico-green:before,.ico-green:after{
    color:#21937D !important;
}

.ico-blue::before,.ico-blue::after{
    color:#1064BB !important;
}

.ico-gray::before,.ico-gray::after{
    color:#999 !important;
}

.ico-red::before,.ico-red::after{
    color:#FA5B5B !important;
}