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

/***************************************
------------- news -------------
***************************************/
#news{}
#news .box{
width: 860px;
}

#news dl{
width:1200px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#news dt{
width: 150px;
text-align: left;
border-bottom: 2px dotted var(--base-color04);
padding: 20px 0;
box-sizing: border-box;
}

#news dd{
width:130px;
text-align: left;
border-bottom: 2px dotted var(--base-color04);
padding: 20px 0 20px 0;
box-sizing: border-box;
}
#news dd:nth-of-type(2n){
width:920px;
text-align: left;
border-bottom: 2px dotted var(--base-color04);
padding: 20px 0;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

#news dd span{
display: block;
width: 110px;
text-align: center;
padding: 0 0;
box-sizing: border-box;
margin: 0 20px 0 0;
background-color: var(--base-color01);
color: var(--base-color03);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

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

#news h3{
font-size: 24px;
font-weight: 600;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
border-bottom: 3px solid var(--base-color01);
padding: 0 0 15px 0;
}

#news h3 span{
width: 110px;
text-align: center;
padding: 0 0;
box-sizing: border-box;
margin: 0 20px 0 0;
background-color: var(--base-color01);
color: var(--base-color03);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

#news img{
margin: 0 auto 40px;
max-width: 100%;
}

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


@media screen and (max-width: 900px) {
#news{}
#news .box{width:90%;}

#news dl{
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px dotted var(--base-color04);
margin: 20px auto 40px;
}

#news dt{
width:25%;
text-align: left;
border-bottom: 1px dotted var(--base-color04);
padding: 15px 0;
box-sizing: border-box;
border-bottom: 1px dotted var(--base-color04);
}

#news dd{
width:75%;
text-align: left;
border-bottom: 1px dotted var(--base-color04);
padding: 15px 0;
}
#news dd:nth-of-type(2n){
width:100%;
text-align: left;
border-bottom: 1px dotted var(--base-color04);
padding: 15px 0;
}


#news dd span{
display: block;
width: 110px;
text-align: center;
padding: 0 0;
box-sizing: border-box;
margin: 0 20px 0 0;
background-color: var(--base-color01);
color: var(--base-color03);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

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

#news h3{
font-size:18px;
font-weight: 600;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
border-bottom: 3px solid var(--base-color01);
padding: 0 0 5px 0;
margin: 0 auto;
width: 90%;
}

#news h3 span{
width: 110px;
text-align: center;
padding: 0 0;
box-sizing: border-box;
margin: 0 20px 0 0;
background-color: var(--base-color01);
color: var(--base-color03);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

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

#news .txt_box {
margin: 0 auto;
width: 90%;
padding: 40px 0 40px 0;
    }

}