@charset "UTF-8";

/*======================================================
「知りたい」の設定
======================================================*/

@charset "UTF-8";

p{margin-bottom:1em;}

@media(min-width:768px){
.w50per{
    width:50%;
}
.w80per{
    width:80%;
}
}

/* レスポンシブテーブルでスマホのときだけグレー背景にしたい場合 */
@media(max-width:767px){
    .ta-bg-gray{
        background: #f5f5f5;
    }
}

/* タイトルアイコンの色変え */

.ico-circle-before::before{
    color:#f4b3c2;
}

/* ダウンロードボタンの色変え */

.btn-radius10 a{
    border-color:#f4b3c2;
}

.btn-radius10 a:hover{
    background-color:#f4b3c2;
}

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




/******************* 発刊物一覧 *******************/

.paper-list{
    justify-content: center;
}

.paper-list li{
    flex-basis:80%;
    max-width:260px;
    margin-bottom:30px;
}

/* ここからPCでの表示 */
@media(min-width:600px){
    .paper-list::after{
        content:'';
        width:100%;
    }
    
    .paper-list li:nth-child(n+2){
        order:1;
    }    
    
    /* 1番目のみ大きめに表示 */
    .paper-list li:first-of-type {
        width:260px;
        margin:0 auto 20px;
        flex-wrap:wrap;
    }

    /*　２〜６番目は５等分表示　*/
    .paper-list li:not(li:first-of-type){
        flex-basis:20%;
        padding:10px;
    }

    .paper-list li:first-of-type .img-box img {
        width:95%;
        display: block;
        margin-bottom:10px;
    }
    .paper-list li:not(li:first-of-type) .img-box img {
        /* height:220px; */
        width:auto;
        display: block;
        margin:0 auto 10px;
    }
}

@media(min-width:1000px){
    /*　小さいPCでは２〜６番目の幅を狭く　*/
    .paper-list li:not(li:first-of-type){
        padding:20px;
    }
}

/* PCでの表示ここまで */

.paper-title-box {
    text-align: center;
    font-size:1.4rem;
    font-weight: bold;
}

.paper-list li:first-of-type .paper-title-box::after {
    content: "NEW";
    padding:3px 4px;
    margin-left:10px;
    font-size:1.2rem;
    color:#f5f5f5;
    background-color:#ff5b81;
}

/* 区社協だより */

.kushakyodayori-wrapper a::before{
    content:"\f0da";
    font-family:"Font Awesome 6 Pro";
    color:#E68B8B;
    margin-left:0.5em;
    font-weight: bold; 
    margin-right:10px;   
}

.kushakyodayori-wrapper > div{
    margin-bottom:1em;
}


/******************* 発刊物　種類別ページ *******************/

.paper-container ul {
    display: flex;
    flex-wrap: wrap;
    gap:20px;
    max-width:1100px;
    margin:auto;
    justify-content: space-between;
}

.paper-container ul li {
    width:calc(20% - 16px);
    margin-bottom:20px;
}

@media(max-width:767px){
    .paper-container ul li {
        width:calc(45% - 16px);
        margin-bottom:20px;
    }    
}

/* @media(max-width:480px){
    .paper-container ul li {
        width:100%;
        margin-bottom:20px;
    }    
} */

.paper-container ul li img {
    max-width:100%;
    max-height:200px;
    display: block;
    margin:0 auto 10px;
}

@media(max-width:767px){
    .paper-container ul li img {
        max-height:400px;
        max-width:100%;
}
}

.paper-title-box {
    text-align: center;
}

.paper-award-list{
    flex-basis:29%;
    margin:20px;
    box-shadow:4px 4px 4px 4px rgba(204, 204, 204, 0.4);
    padding:25px;
    border-radius: 4px;
}

@media(max-width:1000px){
    .paper-award-list{
        flex-basis:45%;
    }
}

@media(max-width:767px){
    .paper-award-list{
        flex-basis:100%;
    }
}

.paper-award-list li{
    margin-bottom:0.5em;
}

.paper-award-list li::before{
    content:"\f0da";
    font-family:"Font Awesome 6 Pro";
    color:#E68B8B;
    margin-left:0.5em;
    font-weight: bold; 
    margin-right:10px;     
}

.paper-award-list h4{
    text-align: center;
    margin-bottom:1em;
    font-size:1.8rem;
}

.paper-award-list span.ico-circle-before::before{
    left:0;
}

/******************* 発刊物　市社協だより *******************/

.shishakyodayori-box{
    text-align: center;
    font-size:1.4rem;
}

@media(max-width:480px){
    .shishakyodayori-box{
        text-align: center;
        font-size:1.2rem;
    }    
}

.shishakyodayori-box .title-box::before{
    content:"\f0da";
    font-family:"Font Awesome 6 Pro";
    color:#E68B8B;
    margin-left:0.5em;
    font-weight: bold; 
    margin-right:10px; 

}