@charset "UTF-8";

.report-container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.report-container .report-box {
    width: calc(25% - 23px);
}

@media(max-width:961px) {
    .report-container .report-box {
        width: calc(33% - 18px);
    }

}

@media(max-width:767px) {
    .report-container .report-box {
        width: calc(50% - 15px);
    }
}

@media(max-width:640px) {
    .report-container .report-box {
        width: calc(100% - 15px);
    }
}


.report-thumb-box {
    border-radius: 20px;
    text-align: center;
    height: 180px;
    overflow: hidden;
}

.report-thumb-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;
}

@media(max-width:640px) {
    .report-thumb-box {
        width: 240px;
        height: 180px;
        margin: 0 auto 10px;
    }
}

@media(min-width:768px) {
    .report-thumb-box img {
        min-width: 277px;
        min-height: 180px;
        width: auto;
        height: auto;
        position: relative;
    }
}

.report-thumb-box img.noimage {
    max-width: 105%;
    position: relative;
    left: -2.5%;
}

@media(max-width:767px) {
    .report-thumb-box img {
        min-width: 110%;
        min-height: 180px;
    }
}

.report-thumb-box a:hover {
    transition: transform .3s;
    overflow: hidden;
}

.report-thumb-box a:hover img {
    transform: scale(1.1);
    border-radius: 20px;
}

.report-cat-box {
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    border-radius: 8px;
    margin-top: 0.8em;
    padding: 4px 0;
    background: #ccc;
}

/*権利擁護・市民後見センター*/
.report-cat-box.cat-report-raito {
    background: #657F28;
}

/*ボランティア・市民活動センター */
.report-cat-box.cat-report-vol {
    background: #B75300;
}

/*北九州シニアネットワークアカデミー*/
.report-cat-box.cat-report-senior {
    background: #A45093;
}

/*ウェルとばた*/
.report-cat-box.cat-report-etc {
    background: #107A92;
}

/*認知症サポーター養成講座*/
.report-cat-box.cat-report-college {
    background: #92302F;
}

/*民間社会福祉事業従事者 救済事業*/
.report-cat-box.cat-report-kifu {
    background: #6565C6;
}

/*校(地)区 社会福祉協議会*/
.report-cat-box.cat-report-kouku {
    background: #366EAD;
}

/*ぷちぼにっき*/
.report-cat-box.cat-report-puchibo {
    background: #517A5F;
}

.report-cat-box a {
    display: block;
    color:#fff;
    text-decoration: none;
}

.puchiboico{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media(max-width:640px) {
.puchiboico{
  margin-bottom: 25px;
}

.puchiboico figure{
  padding: 50px 5px 0 70px;
  background-repeat: no-repeat;
  background-position: center;
}
.puchiico{
background-image: url(//kitaq-shakyo.or.jp/kt9skyo22/wp-content/uploads/puchiboico3.jpg);
}
.momoico{
background-image: url(//kitaq-shakyo.or.jp/kt9skyo22/wp-content/uploads/momomaruico3.jpg);
}
}
@media(min-width:640px) {

.puchiboico figure{
  padding: 70px 5px 0 100px;
  background-repeat: no-repeat;
  background-position: center;
}
.puchiico{
background-image: url(//kitaq-shakyo.or.jp/kt9skyo22/wp-content/uploads/puchiboico4.jpg);
}
.momoico{
background-image: url(//kitaq-shakyo.or.jp/kt9skyo22/wp-content/uploads/momomaruico4.jpg);
}
}


.puchiboico-p{
    position: relative;
    width: calc(100% - 50px);
    align-items: center;
    margin-bottom: 0 !important;
    padding: 16px;
    border-radius: 5px;
    color: #fff;
    background-color: #40a430;
}
.momoico-p{
    position: relative;
    width: calc(100% - 50px);
    align-items: center;
    margin-bottom: 0 !important;
    padding: 16px;
    border-radius: 5px;
    color: #000;
    background-color: #94badf;
}

.puchiboico-p::before{
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    margin-top: -15px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: rgba(0,0,0,0) #40a430 rgba(0,0,0,0) rgba(0,0,0,0);
}
.momoico-p::before{
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    margin-top: -15px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: rgba(0,0,0,0) #94badf rgba(0,0,0,0) rgba(0,0,0,0);
}