@charset "UTF-8";
/*----------------------------------------------------
背景色-元
-----------------------------------------------------*/

.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-other {
    background: #3551A2;
}

/*その他*/
/*----------------------------------------------------
背景色　薄い色-修正
-----------------------------------------------------*/

.bg-color-about-light {
    background: #DEEFEB;
}

/*社協って？*/
.bg-color-office-light {
    background: #C3E8C4;
}

/*事業一覧*/
.bg-color-consul-light {
    background: #FADC6B;
}

/*相談したい*/
.bg-color-consul-sil-light {
    background: #BAD6F2;
}

/*相談したい（高齢者）*/
.bg-color-consul-han-light {
    background: #98CBC1;
}

/*相談したい（障害者）*/
.bg-color-consul-chi-light {
    background: #F7BA8D;
}

/*相談したい（子ども）*/
.bg-color-consul-lif-light {
    background: #F4C0C0;
}

/*相談したい（生活）*/
.bg-color-active-light {
    background: #F8D9CA;
}

/*地域で活動したい*/
.bg-color-know-light {
    background: #FFDEE6;
}

/*知りたい*/
.bg-color-donation-light {
    background: #E1D0EA;
}

/*寄付したい*/
.bg-color-other-light {
    background: #D2DCF7;
}

/*その他*/

/*======================================================
「相談したい」の設定
======================================================*/

/* 第二階層 */

/*------------------------------------------------------
●印
------------------------------------------------------*/

/* ●高齢者 */

.title-bg-eld {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #EFEFEF;
    padding: 0.7em;
    border-top: 4px solid #3077BF;
    line-height: 1.5;
}

/*
.title-bg-eld-nonelink {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #EFEFEF;
    padding: 0.5em;
    border-top: 4px solid #3077BF;
} */

.title-bg-eld2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #3077BF;
    padding: 0.5em;
    color: #fff;
    line-height: 1.5;
}

.ico-circle-before-eld {
    position: relative;
    padding-left: 3em;
}

.ico-circle-before-eld::before {
    content: url('../img/consul/ico-eld.png');
    font-size: 50%;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
}

/*
.ico-circle-before-eld::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f101";
    margin-left: 0.5em;
    font-weight: 400;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */

/* アイコン 末に>>　*/

.ico-arrowdouble::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f101";
    margin-left: 0.5em;
    font-weight: 400;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ico-circle-before-eld2 {
    position: relative;
    padding-left: 3em;
}

.ico-circle-before-eld2::before {
    content: url('../img/consul/ico-eld.png');
    font-size: 50%;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
}

/* ●障害のある人 */

.title-bg-hndc {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #EFEFEF;
    padding: 0.7em;
    border-top: 4px solid #278976;
    line-height: 1.5;
}

.title-bg-hndc2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #278976;
    padding: 0.7em;
    color: #fff;
    line-height: 1.5;
}


.ico-circle-before-hndc {
    position: relative;
    padding-left: 3em;
}

.ico-circle-before-hndc::before {
    content: url('../img/consul/ico-hndc.png');
    font-size: 50%;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
}

/*
.ico-circle-before-hndc::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f101";
    margin-left: 0.5em;
    font-weight: 400;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */

.ico-circle-before-hndc2 {
    position: relative;
    padding-left: 3em;
}

.ico-circle-before-hndc2::before {
    content: url('../img/consul/ico-hndc.png');
    font-size: 50%;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
}

/* ●子ども */

.title-bg-kids {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #EFEFEF;
    padding: 0.7em;
    border-top: 4px solid #F7BA8D;
}


.ico-circle-before-kids {
    position: relative;
    padding-left: 3em;
}

.ico-circle-before-kids::before {
    content: url('../img/consul/ico-kids.png');
    font-size: 50%;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
}

/* 
.ico-circle-before-kids::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f101";
    margin-left: 0.5em;
    font-weight: 400;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */

/* ●生活 */

.title-bg-lifeimg {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #EFEFEF;
    padding: 0.7em;
    border-top: 4px solid #FF8E8E;
}

.ico-circle-before-lifeimg {
    position: relative;
    padding-left: 3em;
}

.ico-circle-before-lifeimg::before {
    content: url('../img/consul/ico-life.png');
    font-size: 50%;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
}

/* 
.ico-circle-before-life::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f101";
    margin-left: 0.5em;
    font-weight: 400;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */

/*------------------------------------------------------
リスト
------------------------------------------------------*/

ul.consul-box {
    margin-left: 3em;
    line-height: 180%;
}

/*------------------------------------------------------
枠
------------------------------------------------------*/

.box-line {
    border: 1px solid #999;
}

.box-line-excepttop {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
}

.box-line-left {
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 10px solid #F3C517;
    padding: 6px;
}


.min180 {
    min-height: 180px;
}

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

.page-top-wrapper-eld {
    background: #F4F9FF;
    margin-bottom: 2em;
}

.page-top-wrapper-handi {
    background: #F0F7EF;
    margin-bottom: 2em;
}

.page-top-wrapper-child {
    background: #FFF3EA;
    margin-bottom: 2em;
}

.page-top-wrapper-life {
    background: #FFF8F8;
    margin-bottom: 2em;
}

/*------------------------------------------------------
ボタン
------------------------------------------------------*/

/* hover時 */
.btn-radius-corner a:hover:before {
    //background:#82BAF2;
    color: #333;
}

.btn-hover-silver a:hover:before {
    //background:#82BAF2;
    color: #333;
}

.button-center {
    max-width: 500px;
    margin: 0 auto;
}

/* ダウンロードアイコン */
.btn-radius-corner-dl {
    text-align: center;
    border: transparent;
    background: transparent;
    outline: none;
    display: block;
    width: 100%;
}

.btn-radius-corner-dl a {
    display: block;
    display: flex;
    align-items: center;
    padding: 1.5em 1em;
    /* padding:10px 20px; */
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 3px 3px 3px rgba(3, 3, 3, 0.2);
    background: #fff;
    font-size: 1.6rem;
}

.btn-radius-corner-dl a:hover {
    //background:#D6EBE8;
    color: #333;
}

.btn-radius-corner-dl a::before {
    font-family: "Font Awesome 6 Pro";
    content: "\e094";
    margin-right: 0.5em;
    font-weight: 400;
    color: #1064BB;
}

.btn-radius-corner-dl a:hover:before {
    //background:#D6EBE8;
    color: #333;
}


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

.btn-hover-gray a:hover {
    background: #f2f2f2;
}

/* 灰色 */



/*======================================================
ボタン　水色角10pxボタンの設定
======================================================*/
.btn-radius10 a {
    border-color: #82BAF2;
}

.btn-radius10 a:hover {
    background: #82BAF2;
}


/*------------------------------------------------------
見出し
------------------------------------------------------*/

.title-border-consul {
    margin-bottom: 1em;
}

/* 
h3.page-title-consul {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #FADC6B;
    padding: 0.5em 1em;
    line-height: 1.5;
}
/* ↓h3.page-title-consulのやり直し */
.title-bgy-consul {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #FADC6B;
    padding: 0.5em 1em;
    line-height: 1.5;
}

h2.page-title-consul {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #FADC6B;
    padding: 0.5em 1em;
    line-height: 1.5;
}

.title-underline-consul {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    padding: 0.5em;
    border-bottom: 4px solid #F3C517;
    line-height: 1.5;
}

h3.title-bg-consul {
    background: #F5F5F5;
}


.page-title-silver {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #BAD6F2;
    padding: 0.5em 1em;
    line-height: 1.5;
}

.title-underline-silver {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    padding: 0.5em;
    border-bottom: 4px solid #82BAF2;
}

h3.title-bg-silver {
    background: #F5F5F5;
    margin-bottom: 1.6em;
}

.page-title-handicap {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #98CBC1;
    padding: 0.5em 1em;
    line-height: 1.5;
}

.title-underline-handicap {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    padding: 0.5em;
    border-bottom: 4px solid #6EB7A9;
}

h3.title-bg-handicap {
    background: #F5F5F5;
    margin-bottom: 1.6em;
}

.page-title-child {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #FDD7BB;
    padding: 0.5em 1em;
    line-height: 1.5;
}

.title-underline-child {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    padding: 0.5em;
    border-bottom: 4px solid #F7BA8D;
}

h3.title-bg-child {
    background: #F5F5F5;
    margin-bottom: 1.6em;
}

.page-title-life {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #F4C0C0;
    padding: 0.5em 1em;
    line-height: 1.5;
}

.title-underline-life {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    padding: 0.5em;
    border-bottom: 4px solid #FF8E8E;
}

h3.title-bg-life {
    background: #F5F5F5;
    margin-bottom: 1.6em;
}


h5.lefttriangle {
    font-weight: bold;
    font-size: 1.64rem;
    margin-bottom: 20px;
}

h6 {
    font-size: 1.6rem;
}


/*------------------------------------------------------
●印
------------------------------------------------------*/

.ico-circle-before-consul {
    position: relative;
    padding-left: 1.5em;
}

.ico-circle-before-consul::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f111";
    color: #F3C517;
    font-size: 80%;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.ico-circle-before {
    position: relative;
    padding-left: 1.5em;
}

.ico-circle-before::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f111";
    color: #82BAF2;
    font-size: 80%;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.ico-circle-before-handicap {
    position: relative;
    padding-left: 1.5em;
}

.ico-circle-before-handicap::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f111";
    color: #6EB7A9;
    font-size: 80%;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.ico-circle-before-child {
    position: relative;
    padding-left: 1.5em;
}

.ico-circle-before-child::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f111";
    color: #F7BA8D;
    font-size: 80%;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.ico-circle-before-life {
    position: relative;
    padding-left: 1.5em;
}

.ico-circle-before-life::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f111";
    color: #FF8E8E;
    ;
    font-size: 80%;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}



/*------------------------------------------------------
腕自慢おまかせサービス
------------------------------------------------------*/

.ude-flowbox {
    background: #FFECA3;
    border-radius: 30px;
    padding: 1rem 2rem;
    font-weight: bold;
    margin: 10px 0;
}

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 20px solid #F4A580;
    border-bottom: 0;
    margin: 0 auto;
}

/*------------------------------------------------------
生活福祉資金（生活に関すること）
------------------------------------------------------*/

table.bordernone {
    border: none;
    margin: 20px 0;
    text-align: left;
}

table.bordernone td {
    padding-left: 2rem;
}

/* 下線あり */
table.border-bottom {
    border: none;
    margin: 20px 0;
    text-align: left;
    border-bottom: 1px solid #ccc;
    /*border-top: 1px solid #ccc;*/
}

table.border-bottom th {
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
}

table.border-bottom td {
    padding-left: 2rem;
    border-bottom: 1px solid #ccc;
}

.border-bottom thead {
    border-top: 1px solid #ccc;
}


/*------------------------------------------------------
目次
------------------------------------------------------*/

.c-accordion_txt li.deconone::before {
    content: none;
}

.c-accordion_txt li.deconone {
    //padding-left: 1rem;
}

/*------------------------------------------------------
地域福祉権利擁護事業のQ&A
------------------------------------------------------*/
.qabox {
    padding: 6px;
    border-bottom: 1px dashed #999;
    margin-bottom: 10px;
}

.qabox:last-child {
    margin-bottom: 0;
}

.qaboxQ {
    background: #657F28;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    padding: 5px 2rem;
    margin-right: 1rem;
}

.qaboxQtx {
    font-weight: bold;
}

.qaboxA {
    background: #B75300;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    padding: 5px 2rem;
    margin-right: 1rem;
}

.qaboxin {
    display: flex;
    //align-items: center;
    align-items: baseline;
    line-height: 1.5;
}


/*------------------------------------------------------
地域福祉権利擁護事業活動事例
------------------------------------------------------*/

.bg-light-gray2 {
    background: #F5F5F5;
}

/*------------------------------------------------------
権利擁護・市民後見センター　コラム
------------------------------------------------------*/

.columbox{
    padding: 12px 6px ;
    border-bottom: 1px dashed #999;
}

.columbox:last-child {
    margin-bottom: none;
}

.columtag {
    background: #657F28;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-size: 1.1rem;
    border-radius: 20px;
}

.ico-arrow-simple-left-before::before {
    content: "\f0d9";
    font-family: "Font Awesome 6 Pro";
    color: #333;
    margin-right: 0.5em;
    font-weight: bold;
}

h3.colum {
    font-weight: bold;
    color: #657F28;
}

/*------------------------------------------------------
⺠⽣委員・児童委員
------------------------------------------------------*/

.fl-wrap {
    display: flex;
    flex-wrap: wrap;
}


/*------------------------------------------------------
共通
------------------------------------------------------*/

@media screen and (max-width:768px){    
    /*スマホのみ*/

    .title-bg{
    line-height: 1.5;}

}



/*------------------------------------------------------
画像サイズ
------------------------------------------------------*/

.img700 img {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.img600 img {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.img550 img {
    max-width: 550px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.img500 img {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.img400 img {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.img300 img {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.img200 img {
    max-width: 200px;
    width: 100%;
    margin: 0 auto;
    display: block;
}