@charset "UTF-8";
header{
  width : 100%;
  height: 7rem;
  z-index : 1000;
  background-color : rgba(24, 24, 24, 0.7);
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.header_inner{
  position: fixed;
  top : 0;
  right: -100%;
  width : 100%;
  height: 100%;
  padding:1rem;
  transition: right 0.5s;
  z-index : 5000;
  backdrop-filter: blur(20px);
  pointer-events: auto;
  display:flex;
  flex-wrap:wrap;
  align-content: flex-start;
  align-items: center;
  gap:2rem;
}
.header_inner.open{
  right: 0;
}
header h1{
  height: auto;
}
h2.add{
  display:flex;
  align-items: center;
  justify-content: center;
  font-size : 1.1rem;
  letter-spacing : .5rem;
  padding-left : 0.5rem;
}
.sp{
  height:7rem;
}
.log_wrap{
  width : calc(100% - 5.2rem);
  max-width : 35rem;
  height: 50%;
  display:flex;
  align-items: center;
  justify-content: center;
}
.nav-sp{
  height: 50%;
}
.nav_box{
  width : calc(100% - 29rem);
}
.nav_box div.nav{
  height: 100%;
  display:flex;
  justify-content: flex-end;
  gap:1rem;
}
.nav_box div.nav a{
  height: 100%;
  display:flex;
  align-items: center;
  font-size : 1.5rem;
  font-weight : 700;
  border-bottom : 5px solid #c0c0c0;
}
.nav_box div.nav a.tel_box{
  margin : 0 0 0 1rem;
  padding: 0;
}
.nav_box div.nav a.office div{
  padding:0.5rem 0 0 2.8rem;
  background-image : url(../img/ico_office.png);
  background-repeat : no-repeat;
  background-position : left top;
  background-size : auto 2.4rem;
}
.nav_box div.nav a.tel_box div{
  font-size : 1.2rem;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  line-height : 1.1;
}
.nav_box div.nav a.tel_box div i{
  font-size : 2.2rem;
  padding:0.5rem 0 0 2.5rem;
}
i{
  background-image : url(../img/tel.svg);
  background-repeat : no-repeat;
  background-position : left top;
  background-size : auto 2.4rem;
}
.nav_box div.nav a:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  border-bottom : 5px solid #000000;
}
.nav_menu{
  width : 100%;
  display:flex;
  align-items: center;
  justify-content: center;
}
.nav_menu div.nav{
  width : 100%;
  height: 100%;
  display:flex;
  gap:1rem;
}
.nav_menu div.nav a{
  width :100%;
  height: 100%;
  font-size : 1.4rem;
  font-weight : 700;
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-image : linear-gradient(to bottom, #f3f3f3, #d9d9d9);
}
.nav_menu div.nav a div{
  width :100%;
  text-align : center;
}
.hb_con{
  display: flex;
  flex-wrap:wrap;
  align-content: center;
  justify-content: center;
  width: 3.2rem;
  height: 100%;
  margin: 0 1rem;
}
.hb_menu{
  display: flex;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
  cursor: pointer;
  z-index : 6000;
}
.hb_menu_line{
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color : rgba(255, 255, 255, 1);
  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 : rgba(255, 255, 255, 1);
  position: absolute;
  top: 0;
  left: 0;
  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);
}
.hb_menu.open .hb_menu_line::after{
  transform: rotate(-45deg);
}
.nav_menu{
  flex-direction: column;
  margin : 5rem 0 0 0;
  order: 1;
}
.nav-sp{
  height: auto;
}
.nav_box{
  width:100%;
  order: 2;
}
.nav_menu div.nav{
  height: auto;
  flex-direction: column;
  justify-content: center;
}
.nav_menu div.nav a{
  width :80%;
  margin : 0 auto;
  height: 4rem;
  background-image : linear-gradient(to bottom, #3e3e3e, #797979);
  color : #ffffff;
}
.nav_menu div.nav a div{
  background-image : url(../img/lt_mark2.svg);
}
.nav_box div.nav{
  height: auto;
  flex-direction: column;
  justify-content: center;
  gap:3rem;
}
.nav_box div.nav a{
  justify-content: center;
  border-bottom : 0px solid #c0c0c0;
}
.log_wrap{
  width:100%;
  height:auto;
  margin:auto;
}
.log_sp{
  padding : 0 1rem;
  display:flex;
  margin:0;
}
header ul{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items: center;
  width:90%;
  margin: auto;
  font-size: 1.7rem;
  font-weight: 900;
}
header ul li{
  width : 100%;
  border-radius: 1rem;
  border: 0.5rem double;
  position : relative;
  height : 5rem;
}
header ul li a{
  padding: 0 1rem;
  width : 100%;
  height : 100%;
  position : absolute;
}