@charset "UTF-8";

.mb0{ margin-bottom:0 !important; }
.mb8{ margin-bottom:2.13vw !important; }
.mb16{ margin-bottom:4.27vw !important; }
.mb24{ margin-bottom:6.40vw !important; }
.mb32{ margin-bottom:8.53vw !important; }
.mb40{ margin-bottom:10.67vw !important; }

.campus-life{
background:url(../../img/mv-campuslife-sp.jpg) no-repeat center / cover;
height:93.07vw;
}


.cl-navi{
padding:24.80vw 0 10.67vw;
width:80.80vw;
margin:0 auto;
display:flex;
flex-wrap:wrap;
gap:2.13vw;
}

.cl-navi li{
width:100%;
}

.cl-navi li a{
width: 100%;
height: 12.80vw;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 0 12.80vw 0;
text-align: center;
font-weight: bold;
position: relative;
border: 0.27vw solid #000;
border-radius: 6.40vw;
color: #000;
font-size: 3.73vw;
line-height: 1.25;
text-decoration: none;
}
.cl-navi li a::before {
content: '';
width: 8.53vw;
height: 8.53vw;
position: absolute;
top: 2.13vw;
right: 2.13vw;
background: #000;
border-radius: 50%;
}
.cl-navi li a::after{
content: '';
width: 4.90vw;
height: 3.09vw;
position: absolute;
top: 4.92vw;
right: 3.93vw;
background-color: #fff;
-webkit-mask: url(../../img/btn-link-arrow.svg) no-repeat center / contain;
mask: url(../../img/btn-link-arrow.svg) no-repeat center / contain;
}



@media (min-width: 768px) {

.mb0{ margin-bottom:0 !important; }
.mb8{ margin-bottom:8px !important; }
.mb16{ margin-bottom:16px !important; }
.mb24{ margin-bottom:24px !important; }
.mb32{ margin-bottom:32px !important; }
.mb40{ margin-bottom:40px !important; }
.mb80{ margin-bottom:80px !important; }

.campus-life{
background:url(../../img/mv-campuslife.jpg) no-repeat center / cover;
height:294px;
}

.cl-navi{
padding:114px 0 40px;
width:744px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
gap:24px 20px;
}

.cl-navi li{
width:calc((100% - 24px) / 2);
}

.cl-navi li a{
width: 100%;
height: 60px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 0 60px 0;
text-align: center;
font-weight: bold;
position: relative;
border: 1px solid #000;
border-radius: 30px;
color: #000;
font-size: 16px;
line-height: 1.25;
transition: all .2s;
text-decoration: none;
}
.cl-navi li a::before {
content: '';
width: 36px;
height: 36px;
position: absolute;
top: 12px;
right: 12px;
background: #000;
border-radius: 50%;
}
.cl-navi li a::after{
content: '';
width: 20px;
height: 13px;
position: absolute;
top: 23px;
right: 20px;
background-color: #fff;
-webkit-mask: url(../../img/btn-link-arrow.svg) no-repeat center / contain;
mask: url(../../img/btn-link-arrow.svg) no-repeat center / contain;
transition: all .2s;
}
.cl-navi li a:hover::after {
right: 18px;
}

/* END PC CSS */
}