/* 

フッター

*/

#footer {
  background-color: var(--color-dark-gray);
  color: var(--color-white);
}

#footer .container {
  padding: 100px 100px 10px 100px;
}

#footer .container p.title {
  font-size: 32px;
  font-family: var(--font-family-montserrat);
}

#footer .wrapper .footer-menu {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 60px;
}

#footer .wrapper .footer-menu ul li {
  font-family: var(--font-family-montserrat);
  margin-bottom: 12px;
}

#footer .wrapper .footer-menu ul li a {
  color: var(--color-white);
  text-decoration: none;
  transition: text-shadow 0.3s ease;
}

#footer .wrapper .footer-menu ul li.jp a {
  font-family: var(--font-family-noto-serif-jp);
}

/* Why Soft Skills? と Why Work with Me? だけMontserratフォントに */
#footer .wrapper .footer-menu ul li.jp a[href*="why-soft-skills"],
#footer .wrapper .footer-menu ul li.jp a[href*="why-work-with-me"] {
  font-family: var(--font-family-montserrat);
}

#footer .wrapper .footer-menu ul li a:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.7);
}

#footer .copy-right {
  text-align: center;
  font-family: var(--font-family-montserrat);
}

@media (max-width: 767px) {
  #footer .container {
    padding: 50px 16px 10px 16px;
  }

  #footer .container p.title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }

  #footer .copy-right {
    font-size: 12px;
}
}