.footer { margin-top: 150px; padding: 80px var(--gut) 40px; background: var(--dark); color: var(--on-dark); }
.footer__inner { display: grid; grid-template-columns: 256px 1fr 256px; align-items: center; max-width: 1280px; margin: 0 auto; }
.footer__logo { display: flex; flex-direction: column; align-items: center; justify-self: center; font-family: var(--ff-mincho); font-size: 22px; line-height: 1.4; letter-spacing: .3em; text-indent: .3em; }
.footer__mark { width: 64px; height: 80px; }
.footer__logo span { margin-top: 10px; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; font-size: 15px; line-height: 19px; }
.footer__nav a, .footer__sns { transition: opacity .3s; }
.footer__nav a:hover, .footer__sns:hover { opacity: .6; }
.footer__tel { display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark-accent); }
.footer__sns { display: flex; justify-self: end; margin-right: 60px; }
.footer__note { margin-top: 50px; font-size: 12px; line-height: 2; text-align: center; }
.footer__note a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1099px) {
  .footer__inner { grid-template-columns: 160px 1fr 80px; }
  .footer__sns { margin-right: 0; }
}
@media (max-width: 899px) {
  .footer { padding: 80px 30px 40px; }
  .footer__inner { display: block; }
  .footer__logo { width: max-content; margin: 0 auto; }
  .footer__nav { margin-top: 30px; }
  .footer__sns { width: max-content; margin: 30px auto 0; }
  .footer__note { margin-top: 40px; }
}