@charset "UTF-8";

.footer {
  /* position: absolute;
  bottom: 0;
  left: 0; */
  width: 100%;
  padding: 0;
}

footer {
  padding: 2rem 1.5rem;
}

.footer-menu-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

footer .icon {
  font-size: 1.5rem;
  margin-right: 10px;
}

footer a:hover {
  opacity: 0.8;
}

footer li {
  display: inline;
  width: 20%;
}

footer .copyright-container {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
}

@media (max-width: 768px) {
  .footer {
    display: flex; /* Flexboxを有効化 */
    justify-content: center; /* 水平方向に中央寄せ */
    align-items: center; /* 垂直方向に中央寄せ */
    height: 12vh; /* 親要素に明確な高さを設定 */
  }

  .footer .container {
    margin: 0 auto; /* 子要素を中央寄せ */
  }

  .footer-menu-container {
    display: none; /* メニューリンクを非表示 */
  }

  .copyright-container {
    display: block; /* コピーライトのみ表示 */
    font-size: 0.8rem;
    margin: 0 auto; /* 子要素を中央寄せ */
  }
}