.footer {
  white-space: normal;
  display: flex;
  justify-content: center;
  background-color: #e8e8e8;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}



.info {
  padding: 20px;
  padding-left: 80px;
}

.info img {
  width: 200px;
}

.info a {
  color: black;
}

.info a:hover {
  color: orange;
}

.f1 ul {
  list-style: none;
  display: flex;
  /* justify-content:space-between; */
 
}


.f1 ul li {
    /* border-right:3px solid #ccc; */
    padding: 3px;
    margin: 3px;
  }

#i1 {
  margin: 50px;
}
#i1 a {
  color: black;
  text-decoration: none;
}
#i1 a:hover {
  color: orange;
}
#title {
  font-size: clamp(15px, 1vw, 20px);
}

.f2 {
  text-align: center;
  padding: 10px;
  /* background-color: #afb3cb; */
}

.tunoru {
  padding: 5px;
  background-color: white;
}

#name {
  padding-top: 30px;
}

#policy {
  padding-top: 30px;
}

#policy a {
  color: black;
}

#policy a:hover {
  color: orange;
}

@media (max-width: 768px) {
  .footer {
    display: flex;
    justify-content: center;
  }

  .info {
    /* padding: 10px;
    padding-left: 0; */
  }

  .info img {
    width: 150px; /* 画像のサイズを小さくする */
  }

  .f1 ul {
    flex-direction: row; /* 行に並べる */
    flex-wrap: wrap; /* 複数行にする */
    justify-content: space-between; /* 左右にスペースを均等に */
  }

  .f1 ul li {
    padding: 5px; /* パディングを減らす */
    margin: 5px 0; /* マージンを上下に調整 */
  }

  #title {
    font-size: 16px; /* フォントサイズを小さくする */
  }

  .tunoru {
    width: 50%; /* 幅を50%に */
  }

  #policy {
    padding-top: 15px; /* 上のパディングを減らす */
  }
}