@charset "utf-8";


.footer{
  padding: 5rem 0 20px;
  position:relative;
  background:#424242;
  color:#fff;
}

.footer .black{
  display:none;
}

.footer a{
  color:#fff;
  text-align: left;
}

.footer-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width:1090px;
  width:80%;
  margin:0 auto 7.5rem;
}

.footer-left{
  width:210px;
}

.footer-logo{
  width:96px;
  margin-bottom:1.5rem;
}

.footer-logo + p{
  margin-bottom:1.5rem;
  font-size:14px;
}

.footer-sns{
  margin-top:2rem;
}

.footer-sns a{
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:14px;
  margin-top:1rem;
}

.footer-sns a img{
  width:2rem;
}

.footer-right{
  width:calc(100% - 300px);
  max-width:620px;
}

.footer-right .header_menu{
  flex-wrap:wrap;
  align-items: flex-start;
}

.footer-right .header_menu .accent{
  color:#BABABA;
  justify-content: flex-start;
}

.footer-right .parent{
  width:calc((100% - 120px ) / 3);
}

.footer-right .header_menu-item a,
.footer-right .header_menu-item a .shippori{
  font-size:1rem;
}

.footer-right .header_menu-item a .shippori{
  margin-top:8px;
}

.footer-right .header_menu-item a::after,
.footer-right .parent .accent::after{
  display:none;
}

.footer-sub{
  margin-top:2rem;
}

.footer-sub a{
  display:block;
  width:100%;
  max-width: 140px;
}

.footer-sub a:nth-child(2) {
  margin-top:1.5rem;
}

.footer-sub a .shippori{
  font-size:14px !important;
  padding-bottom:10px;
  border-bottom:0.5px solid #BABABA;
}

.copyright{
  text-align:center;
  font-size:12px;
}


@media (max-width: 1024px) {
  .footer-wrap{
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    margin: 0 auto 5rem;
  }
  .footer-right {
    width: 100%;
    max-width: none;
  }
  .footer-left {
    width: 100%
  }
  .footer-right .header_menu{
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .footer{
    padding: 2.5rem 0 1.5rem;
  }
  .footer-logo{
    margin: 0 auto 1.5rem;
    display: block;
  }
  .footer-right .parent ,
  .footer-right .header_menu-item{
    width: calc((100% - 20px) / 2);
  }
  .footer-right .header_menu{
    gap:2rem 20px;
  }
  .footer-wrap{
    width: 90%;
  }
  .footer-left{
    width: fit-content;
    margin: 0 auto;
  }
  .footer-logo + p {
    margin-bottom: 1rem;
  }
}