@charset "utf-8";
/* ==========================================
/includes2010/school_info_nav.inc
/includes2010/utf8/school_info_nav.inc
========================================== */
.school_info_nav{
  background-color: rgba(28, 35, 109, .1);
}
.school_info_nav .inner{
  width: 86.95%;
  max-width: 1000px;
  margin: auto;
  padding: 60px 0 10px;
}

.school_info_nav .group{
  margin-bottom: 80px;
}
.school_info_nav .group .ttl{
  color: #1c2569;
  font-size: 24px;
  font-weight: bold;
  text-align-last: left;
  margin-bottom: 1em;
}
.school_info_nav .group .info_list a{
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  padding: 16px 16px 16px 30px;
  transition: all .3s;
}
.school_info_nav .group .info_list a::after{
  content: "";
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_4042%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%204042%22%20transform%3D%22translate(-488%20-1789)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_33%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2033%22%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%2211%22%20transform%3D%22translate(488%201789)%22%20fill%3D%22%2333469b%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_105810%22%20data-name%3D%22%E3%83%91%E3%82%B9%20105810%22%20d%3D%22M1898.766%2C9250.814l4.016%2C4.017-4.016%2C4.016%22%20transform%3D%22translate(-1401%20-7454.831)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') center/contain no-repeat;
  width: 22px;
  padding-top: 22px;
}
.school_info_nav .group .info_list a.on,
.school_info_nav .group .info_list a:hover{
  background-color: #33469b;
  color: #fff;
  text-decoration: none;
}
.school_info_nav .group .info_list a.on::after,
.school_info_nav .group .info_list a:hover::after{
  content: none;
}
@media screen and (min-width: 600px){
  .school_info_nav .group .info_list ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media screen and (min-width: 600px) and (max-width: 899px){
  .school_info_nav .group .info_list ul{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 599px){
  .school_info_nav .group{
    margin-bottom: 60px;
  }  
  .school_info_nav .group .info_list li + li{
    margin-top: 10px;
  }
}