header {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
    margin: 0;
    background-color: rgb(243, 243, 243);
    padding: 0;
}

.kanbanbox {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  height: 200px;           /* 任意の高さを設定してください */
}

/*.back {
  width: 100%;
  height: auto;
  display: block;
}
*/
.kanban {
  display: block;
  width: 750px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.kaitori-banner {
  text-align: center;
  margin-top: 0px;
}

.kaitori-banner img {
  max-width: 100%;
  height: auto;
}

.kaitori-note {
  text-align: center;
  margin: 20px 0;
}

.kaitori-note p {
  font-size: 22px;      /* やや大きめ */
  font-weight: bold;    /* 太字 */
  color: #d33;          /* 注意書きらしい赤色（任意） */
}


.kaitori-images {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center;     /* 中央寄せ */
  gap: 20px;               /* 画像間隔 */
  margin-top: 20px;
}

.kaitori-images img {
  width: 80%;              /* 幅を画面の80%に設定 */
  max-width: 750px;        /* 最大幅を制限 */
  height: auto;
  border-radius: 8px;      /* 角を丸く */
}


/* フッター共通 */
.footer {
  background-color: #333;
  color: white;
  padding: 60px 0;
  margin-top: auto;
}

.footer-inner {
  width: 750px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 40px;
}

.footer-text p {
  margin: 0;
  font-size: 22px;
}

.footer-images img {
  height: 80px;
  width: auto;
}

.footer-icons a {
  color: white;
  font-size: 50px;
  text-decoration: none;
}

.footer-icons-text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.footer-icons a:hover {
  opacity: 0.7;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .back {
    display: none;
  }

  .kanbanbox {
    height: auto;
  }

  /* ヘッダー看板画像のみ表示 */
  .kanban {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: auto;
    border: none;
  }

  .footer-inner {
    width: 90%;
    flex-direction: column;
    align-items: center;
  }

  .footer-images img {
    width: 100%;
    height: auto;
  }

  .footer-icons-text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
  }

  .footer-icons-text .footer-icons a {
    font-size: 40px;
  }

  .footer-text p {
    margin: 0 0 0 10px;
    font-size: 18px;
  }

  .footer-text {
    text-align: left;
  }
}