@charset "UTF-8";
.SectionCompornentTop{
padding:0 0 2rem;
display:flex;
flex-direction: column;
gap: 3rem;
/*background-color: #666;*/
}

.VisionArea{
display: flex;
flex-direction: column;
gap: 16px;
border-bottom: 1px solid var(--border-color-light);
margin-bottom: 6rem;
line-height: 2;
}
.VisionArea h1{
font-size: var(--txt20);
text-align: center;
}

.NavigationArea{
display: flex;
flex-direction: column;
text-align: center;
gap: 2rem;
}
.NavigationArea ul{
display: flex;
flex-direction: column;
border-top: 1px solid var(--border-color-light);
}
.NavigationArea ul li{
border-bottom: 1px solid var(--border-color-light);
text-align: center;
padding: 1rem;
}

.NewsArea ul{
display: flex;
flex-direction: column;
gap: 1rem;
}
.NewsArea ul li span{
display: block;
}
.NewsArea ul li a{
display: block;
}


@media screen and (min-width: 768px) {
.SectionCompornentTop{
width: 75rem;
padding:4rem 0 0;
margin: 0 auto;
}
.VisionArea{
text-align: center;
margin-bottom: 8rem;
}
.NavigationArea ul{
flex-direction: row;
flex-wrap: wrap;
gap: 0 2rem;
border-top: none;
}
.NavigationArea ul li{
width:calc(50% - 1rem);
}
.NavigationArea ul li:nth-child(-n+2){
border-top: 1px solid var(--border-color-light);
}
.NewsArea ul li{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.NewsArea ul li span{
width: 128px;
}
}