@charset "UTF-8";


.content #newsWrap{
    max-width: var(--width02);
    width: 90%;
    min-height: 150px;
    margin: 0 auto;
    padding: 0;
}
.content #newsWrap ul{
    border-bottom: 1px dashed var(--color01);
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 3%;
    padding: 0 0 2%;
}
.content #newsWrap ul li.up_ymd{
    width: 14%;
}
.content #newsWrap ul li.cat{
    font-size: 0.8em;
    width: 11%;
}
.content #newsWrap ul li.cat span{
    padding:0 5px;
}
.content #newsWrap ul.cat-0 li .catName{
    border: 1px solid var(--color03);
    color:var(--color03);
}
.content #newsWrap ul.cat-1 li .catName{
    border: 1px solid var(--color04);
    color:var(--color04);
}
.content #newsWrap ul li.title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 75%;
    padding: 0 3%;
}
.content #newsWrap ul li.title a{
    color:var(--color01);
    display: block;
    width: 100%;
    position: relative;
}
.content #newsWrap ul li.title:has(span.newMark) a{
    width: 95%;
    padding: 0 3%;
}
.content #newsWrap ul li.title span.newMark{
    background: var(--colorR);
    color:var(--colorW);
    font-size: 0.7rem;
    display: block;
    text-align: center;
    width: 5%;
    padding: 0 3px;
}
.content #newsWrap ul li.title a:hover{
    color: var(--color04);
}
.content #newsWrap ul li.title a:after{
    content:"";
    background: url(/images/icon_arrow1.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 20px;
    height: 15px;
    position: absolute;
    top:50%;
    right:-10px;
    transform: translate(0,-50%);
    transition:  all ease 0.5s;
}
.content #newsWrap ul li.title a:hover:after{
    right:-15px;
}
.content #newsWrap .pager{
    display: flex;
    justify-content: center;
    gap: 1%;
    margin: 8% auto;
}
.content #newsWrap .pager a{
    display: block;
    background: var(--color06);
    color:var(--colorW);
    text-align: center;
    padding: 3px 12px;
    transition: all ease 0.5s;
}
.content #newsWrap .pager a.current,
.content #newsWrap .pager a:hover{
    background:var(--color01);
}

/*----------------------------
* 詳細ページ
*----------------------------*/
#newsDetail.content{
    background: var(--color05);
    padding: 5% 0;
}
#newsDetail.content ul{
    border-bottom:none;
    gap:1%;
    margin: 0 0 1%;
    padding: 0;
}
#newsDetail.content ul li{
    background: var(--colorW);
    padding: 2%;
}
#newsDetail.content ul li#up_ymd{
    width: 24%;
}
#newsDetail.content ul li:has(.newMark).title p{
    width: 90%;
    padding: 0 0 0 3%;
}
#newsDetail.content #detail{
    background: var(--colorW);
    padding: 2%;
}
#newsDetail.content #detail .detailText{
    margin: 0 auto 5%;
}
#newsDetail.content #detail .backORcloseBtn{
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto 0;
}
#newsDetail.content #detail .backORcloseBtn a{
    background: var(--color06);
    color: var(--colorW);
    font-size: 0.8rem;
    padding: 0 5px;
}

@media all and (min-width:769px){

}
@media all and (max-width:768px){
    .content #newsWrap ul li.up_ymd{
        width: 75%;
        margin: 0 0 3%;
    }
    .content #newsWrap ul li.cat{
        width: 25%;
        margin: 0 0 3%;
    }
    .content #newsWrap ul li.title{
        width: 100%;
    }
    .content #newsWrap ul li.title span.newMark{
        width: 10%;
    }
    .content #newsWrap ul li.title:has(span.newMark) a{
        width: 90%;
    }
    /*----------------------------
    * 詳細ページ
    *----------------------------*/
    #newsDetail.content ul li{
        padding: 3%;
    }
    #newsDetail.content ul li#up_ymd{
        width: 100%;
        margin: 0 0 1%;
    }
    #newsDetail.content ul li.title{
        width: 100%;
        padding: 3%;
    }
    #newsDetail.content #detail{
        padding: 6% 3%;
    }
}