@charset "UTF-8";
/* CSS Document (新着情報CMS) */

/*===index.php(メイン)用==============================*/

#newsWrap{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    align-items: center; 
    background: #fff;
    border-radius: 10px;
    padding: 3%;
}
.news_titl{
width: 28%;   
}

#newsWrap ul#newsList{
display: block;
width: 70%;   
	overflow-y: scroll;
	max-height: 300px;    
}
#newsWrap ul#newsList a{
	display: block;
	width:100%;  
    border-top:1px solid #eee; 
    padding: 10px;
}
#newsWrap ul#newsList a:last-child{
    border-bottom:1px solid #eee; 
}
#newsWrap ul#newsList li{
	list-style-type: none;
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    width: 100%;
    
}
/*スクロールバー*/
#newsWrap ul#newsList::-webkit-scrollbar{
    overflow: hidden;
    width: 2px;
    background: #eee;
}
#newsWrap ul#newsList::-webkit-scrollbar-button {
    display: none;
}

#newsWrap ul#newsList::-webkit-scrollbar-thumb, #newsWrap ul#newsList::-webkit-scrollbar-corner {
   background: #0D407A;
}

/*サムネイル*/
.clearfix{
width: 20%;    
}
.thumbNailWrap{
width: 100%;
height: 150px;    
display: block;  
overflow: hidden;    
}
.thumbNailWrap img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
    transition: all 0.5s;	
    transform: scale(1);
}

#newsWrap ul#newsList a:hover .clearfix img{
	transform: scale(1.2);
}
.news-text{
width: 100%;    
padding: 10px; 
display: flex;    
flex-wrap:wrap;
justify-content:space-between;
align-items:center;  
}
/*日付*/
.news-text .up_ymd{
	display: block;
	letter-spacing: 0.05em;
	font-size: 1rem;
	padding: 1px 10px;
     font-family: "Josefin Sans", sans-serif;
    max-width: 200px;
    width: 100%;
    color: #1668C7;  
}

.news-text .title{
	display: block;
    font-size: 1rem;
    max-width:800px;
    width: 100%;
    color: #333;  
    text-align: left;
    margin: 0;
}
.news-text .comment{
    font-size: 0.8rem;
    color: #fff;
}
.php_k a{
    color: #fff!important;
}
@media (max-width: 690px){
.news_titl{
width: 100%; 
margin-bottom: 30px;    
}

#newsWrap ul#newsList{
display: block;
width: 100%;   

}
 .news-text .title{
    width: 100%; 
} 
}
@media (max-width: 450px){


}