@charset "UTF-8";
.header{
  width : 100%;
  height: 14rem;
  position : fixed;
  z-index : 1000;
  background-color : rgba(255, 255, 255, 0.8);
}
.header_inner{
  padding: 1rem;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
  gap : 1rem;
}
.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:14rem;
}
.log_wrap{
  width : calc(100% - 4.2rem);
  max-width : 28rem;
  height: 50%;
  display:flex;
  align-items: center;
  justify-content: center;
}
.log_wrap a{
  width : 100%;
}
.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%;
  background-image : url(../img/lt_mark.svg);
  background-repeat : no-repeat;
  background-position : 1rem center;
  text-align : center;
}
.log_sp{
  display : none;
}
@media screen and (max-width:980px){
  .header_inner{
  position: fixed;
  top : 0;
  right: -100%;
  width: 100%;
  height: 100%;
  padding:0;
  transition: right 0.5s;
  z-index : 5000;
  backdrop-filter: blur(20px);
  pointer-events: auto;
  display:flex;
  align-content: flex-start;
  align-items: center;
  gap:3rem;
}
.header_inner.open{
  right: 0;
}
}
.hb_menu,.hb_menu_line b{
  display: none;
}
@media screen and (max-width:980px){
  .header,.sp{
  height: 7rem;
}

.hb_menu{
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  position : fixed;
  top : 1rem;
  right : 1rem;
  z-index : 6000;
}
.hb_menu_line{
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color : rgba(35, 24, 21, 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(35, 24, 21, 1);
  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);
}
.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;
  order: 3;
  margin:auto;
}
.log_sp{
  padding : 1rem;
  display:flex;
  margin:0;
}
}