<footer class="footer">

    <!-- footerリスト -->
    <ul class="footer-list">
      <li class="footer-list-item"><a href="./company_overview.html">会社概要</a></li>
      <li class="footer-list-item"><a href="./index.html">サイトマップ</a></li>
      <li class="footer-list-item"><a href="./privacy_policy.html">プライバシーポリシー</a></li>
    </ul>

    <!-- コピーライト -->
    <p class="copyright">© 2024 たぬちべプログラミング</p>
  </footer>

  @charset "UTF-8"; /* 文字コード指定 */

/* ページ全体のスタイル ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
body {
  /* どのフォントを使用しますか */
  font-family: "Noto Sans JP", sans-serif;
  /* 文字の大きさ */
  font-size: 18px;
  /* 文字の色 */
  color: #333;
  /* 文字の折り返し */
  text-wrap: nowrap;
  /* 高さ、幅 */
  max-width: 100%;   /* コンテナの最大幅 要素サイズ */
  /* 背景色 /
  background-color: azure;
  /* 行の高さ */
  line-height: 1.75;
  /* 枠線を要素の大きさ */
  box-sizing: border-box;        /* (★) borderも要素の大きさの中に含める */
}

a {
  /* 文字の色 */
  color: #333;
  /* 線 */
  text-decoration: none;         /* 線無し */
}

a:hover {
  /* 色 */
  color: deepskyblue;
  background-color: rgba(176, 223, 239, 0.731);
  /* 線 */
  text-decoration: none;         /* 線無し */
}

img {
  /* 画面幅が伸縮したときに自動でサイズを可変セット */
  max-width: 100%;         /* 横幅画面サイズまでに限定 */

  /* 画像の基準位置 */
  vertical-align: bottom;     /* 画像の隙間(下)を無くす */
}


/* ここからfooter css///////////////////////////////////////////////////////////////// *

.footer {
  /* 境界、余白 */
  padding: 2rem;
  /* 文字の設定 */
  font-size: 1rem;
  /* 色 */
  color: #333;
  background-color: mistyrose;
}

.footer a {
  /* 色 */
  color: #333;
  /* 文字の装飾 */
  text-decoration: none;
}

.footer a:hover {
  /* 色 */
  color: #333;
}

.footer ul {
  /* リストデザイン */
  list-style: none;
  /* 境界、余白 */
  padding: 0;
}

@media (min-width: 768px) {/* PC */
  .footer {
    /* 表示設定 */
    display: flex;
    justify-content: space-between;
  }

  .footer-list {
    /* 表示設定 */
    display: flex;
  }

  .footer-list li + li{
    /* 境界、余白 */
    margin-left: 1rem;
  }
}