.nav_base{
  position : absolute;
  top : 2rem;
  z-index : 100;
  background-color: rgba(240, 240, 240, 0.5);
  backdrop-filter: blur(10px);
}
.nav_fix.fixed{
  position: fixed;
  top: 0;
}
.nav_base,nav.nav-sp,hr.header,nav.fixed{
  width : 100%;
  height : 5rem;
}
nav.nav-sp{
  position : absolute;
  top : 2rem;
  right : 0;
  width : calc(100% - 24.6rem);
  padding-right : .1rem;
  z-index : 110;
}
hr.header{
  position : fixed;
  top : .2rem;
  z-index : 10;
  border-bottom : 2px solid #00489d;
}
.nav_base .home{
  position : fixed;
  top : 1.5rem;
  left : .9rem;
  z-index : 6000;
}
.home a{
  display: flex;
  align-items: center;
  gap : .5rem;
}
.nav_base .logo_c{
  height : 2rem;
}
.nav_base .logo_n{
  height : 1.6rem;
}
.hb_menu,.hb_menu_line b{
  display: none;
}
nav.nav-sp ul{
  height : 100%;
  font-size: 1.6rem;
  display: flex;
  justify-content: flex-end;
  gap : .1rem;
  list-style-type : none;
  font-weight : 600;
}
nav.nav-sp li{
  height:100%;
  position : relative;
}
nav.nav-sp li.home{
  display : none;
}
nav.nav-sp li span{
  display : block;
}
nav.nav-sp li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding : 0 1.5rem;
  width : 100%;
  height:100%;
  color : #00489d;
  background-image : linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(171, 171, 171, 0.05));
}
nav.nav-sp li a:hover{
  color : #fff;
  filter:alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  background-image : linear-gradient(to bottom, rgba(0, 72, 157, 0.5), rgba(0, 72, 157, 0.65));
}
nav.nav-sp .res{
  display : none;
}
nav.nav-sp .tel_box{
  color : #ffffff;
  flex-direction: column;
}
@media screen and (max-width:920px){
  .hb_menu{
  display: flex;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
  cursor: pointer;
  position : fixed;
  top : 2.9rem;
  right : .9rem;
  z-index : 6000;
}
.hb_menu.nav_fix.fixed{
  position: fixed;
  top: .8rem;
}
.hb_menu_line{
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color : #00489d;
  position: relative;
  transition: all 0.5s;
}
.hb_menu_line::before,
.hb_menu_line::after{
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color : #00489d;
  position: absolute;
  transition: all 0.5s;
}
.hb_menu_line::before{
  transform: translateY(-12px);
}
.hb_menu_line::after{
  transform: translateY(12px);
}
.hb_menu.open .hb_menu_line{
  background-color: transparent;
}
.hb_menu.open .hb_menu_line::before{
  transform: rotate(45deg);
  background-color : #fff;
}
.hb_menu.open .hb_menu_line::after{
  transform: rotate(-45deg);
  background-color : #fff;
}
nav.nav-sp{
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  padding : 7rem 1rem 1rem;
  transition: all 0.4s;
  background-color: rgba(0, 72, 157, 0.5);
  backdrop-filter: blur(10px);
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-content: flex-start;
  gap : 3rem;
}
nav.nav-sp.open{
  right: 0;
}
nav.nav-sp ul{
  width: 100%;
  height:auto;
  flex-wrap:wrap;
  justify-content: center;
  align-content: flex-start;
  gap : 1rem;
}
nav.nav-sp li,nav.nav-sp li.home{
  width : 27vw;
  max-width : 13rem;
  height : auto;
  aspect-ratio : 1/1;
  display: block;
}
nav.nav-sp li a{
  color : #fff;
  background-image : linear-gradient(to bottom, rgba(171, 171, 171, 0.15), rgba(255, 255, 255, 0.2));
  padding : 0 .5rem;
  line-height : 1.4;
  border-radius : 1rem;
}
nav.nav-sp .res{
  display : block;
  margin : 0 auto;
}
nav.nav-sp .tel_box{
  display: flex;
}
nav.nav-sp .ico_box{
  display: flex;
}
}