@charset "utf-8";

footer{
  background-color: #fff;
  margin-top: 5em;
}
footer .upper{
  padding: 3em 2em 2em 2em;
}
footer .lower{
  background-color: var(--c_main_orange);
  padding: 1em;
}
footer .lower a{
  margin: 0 1em;
  padding: 0 1em;
  position: relative;
}
footer .lower a + a::before{
  content: "";
  display: block;
  width: 1px;
  height: 1.4em;
  background-color: #000;
  position: absolute;
  left: -1em;
  top: 50%;
  transform: translate(0, -50%);
}
footer .copyright{
  padding: 2em 0 3em 0;
}
@media screen and (max-width: 520px){
  footer{
    background-color: #fff;
    margin-top: 3em;
  }
  footer .upper{
    padding: 1em 6vw 1.5em 6vw;
  }
  footer .upper .logo{
    width: 40vw;
    margin: 0 auto;
  }
  footer .lower{
    font-size: 3.2vw;
  }
  footer .copyright{
    padding: 1em 0 2em 0;
    font-size: 3vw;
    letter-spacing: 0;
  }
}


/*--------------------------------------------------------------------*/

@media screen and (max-width: 520px){
  footer ._cta{
    position: fixed;
    bottom: 4vw;
    width: 100%;
    z-index: 3;
    transform: translate(0, calc(50% + 4vw));
    opacity: 0;
    transition: transform .4s ease-out, opacity .6s;
    pointer-events: none;
    max-width: 70vw;
    margin: 0 auto;
    left: 0;
    right: 0;
  }
  body._scrolled footer ._cta{
    transform: translate(0, 0);
    opacity: 1;
    pointer-events: auto;
  }
  footer ._cta .button{
    transform: translate(0, 0%);
  }
  footer ._cta .button a .label{
    padding-top: .75em;
    padding-bottom: .75em;
    font-size: 3.8vw;
  }
  footer ._cta .button a .icon{
    padding: 0 2vw 0 3vw;
  }
  footer ._cta .button a .icon img{
    width: 5vw;
  }
}