@charset "utf-8";
@import url("root.css");

/***************************************
------------- news -------------
***************************************/

#news{}


#news dl{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: 2px dotted #dddddd;
margin: 0 auto;
}

#news dt{
width: 12%;
text-align: left;
padding:20px 0;
box-sizing: border-box;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
color: var(--base-title_01);
white-space: nowrap;
overflow: hidden;  
text-overflow: ellipsis; 
}

#news dt i{
font-size:90%;
padding: 0 5px 0 0;
}

#news dd{
width:16%;
text-align: left;
padding: 20px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;  
text-overflow: ellipsis; 
}
#news dd:nth-of-type(2n){
width:72%;
text-align: left;
padding: 20px 0;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;  
text-overflow: ellipsis; 

}

#news dd .cate{
display: inline-block;
color: var(--base-color03);
background-color: var(--base-color04);
font-size: 14px;
text-align: center;
margin: 0 auto;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
padding: 0 20px;
}

#news dd a{transition: .25s ease;font-size: 18px;color: var(--base-title_01);}
#news dd a:hover{color: var(--base-color01);}

#news dd .cate01{background-color: var(--base-color01);}
#news dd .cate02{background-color: #00C495;}
#news dd .cate03{background-color: #0086AE}


#news h3{
    font-size: 24px;
    font-weight: 600;
    border-bottom: 2px solid var(--base-color_bg_a);
    color: var(--base-color_bg_a);
    margin: 0 auto 15px;
    padding: 0 0 8px 0;
	background-color: var(--base-color03);
	text-align: left;
	border-radius: 0;
}

#news .data{
display: block;
width: 100%;
text-align: right;
}

#news .data i{
padding: 0 5px 0 0;
}

#news .txt{
margin: 30px auto;
}

#news img{
max-width: 100%;
margin: 20px auto;
text-align: center;
}


@media screen and (max-width: 1024px) {
#news{}


#news dl{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: 2px dotted #dddddd;
margin: 0 auto;
}

#news dt{
flex: 0 0 auto; 
min-width:120px;
text-align: left;
padding:10px 0 5px 0;
box-sizing: border-box;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
text-align:left;
}

#news dt i{}

#news dd{
flex: 1 1 auto; 
text-align: left;
padding:10px 0 5px 0;
box-sizing: border-box;
}
#news dd:nth-of-type(2n){
width:100%;
text-align: left;
padding:0 0 10px 0;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;  
text-overflow: ellipsis; 
}

#news h3{
font-size: 20px;
        font-weight: 600;
        border-bottom: 2px solid var(--base-color_bg_a);
        color: var(--base-color_bg_a);
        margin: 0 auto 15px;
        padding: 0 0 8px 0;
}

#news .data{

}

#news .data i{
padding: 0 5px 0 0;
}

#news .txt{
margin: 20px auto;
}

#news img{
max-width: 100%;
margin: 10px auto;
text-align: center;
}


}