@charset "utf-8";

.footer{
  padding: 5rem 0 4rem;
  background:#F9F8F4;
}

.footer-wrap{
  display: flex;
  justify-content: space-between;
  margin-bottom:4rem;
  align-items: flex-start;
}

.footer-left{
  width:300px;
}

.facebook{
  width:2.5rem;
  display:block;
  margin-top:1rem;
}

.footer-left > p{
  margin-top:8px;
}


.footer-right{
  width:calc(100% - 350px);
  max-width:700px;
  display: flex;
  gap:2.5rem;
  align-items: flex-start;
  justify-content: flex-end;
}

.footer-right-box{
  width:calc((100% - 2.5rem ) / 2);
}

.footer-right-item{
  padding: 14px 1rem;
  border-top: 1px solid #707070;
}

.footer-right-item:last-child{
  border-bottom: 1px solid #707070;
}

.footer-right-item .sub-menu{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.footer-right-item .sub-menu a{
  display: flex;
  align-items:center;
  gap:4px;
}

.footer-right-item .sub-menu a::before{
  content:"-";
}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-bottom .accent{
  font-size:clamp(3.25rem, 2.25rem + 3.33vw, 6.25rem);
  line-height: 1;
  margin-right: -5%;
}

.footer-bottom .accent strong{
  color:#FF7A59;
}

.copyright{
  font-size:14px;
}

@media (max-width: 1400px) {
  .footer-left {
    width: 230px;
  }
  .footer-right {
    width: calc(100% - 300px);
  }
}

@media (max-width: 1024px) {
  .footer-right {
    width: 100%;
    gap: 2rem;
    justify-content: space-between;
    max-width: none;
  }
  .footer-wrap {
    gap: 3.5rem;
    flex-direction: column;
  }
  .footer {
    padding: 5rem 0;
  }
  .footer-bottom{
    flex-direction: column-reverse;
    align-items: center;
    gap: 1rem;
  }
}

@media (max-width: 767px) {
  .footer{
    padding: 1.5rem 0 0.5rem;
  }
  .footer-right {
    flex-direction: column;
    gap: 0;
  }
  .footer-left {
    width: 245px;
  }
  .footer-right-box{
    width:100%;
  }
  .footer-wrap{
    align-items: center;
  }
  .footer-right-box:first-child .footer-right-item:last-child{
    border-bottom:none;
  }
  .footer-bottom .accent{
    margin-right: 0%;
    text-align: center;
  }
}