@charset "UTF-8";
#wrap {
  width: 100%;
  min-height: 100vh;
}

#container {
  margin: 0 auto;
  width: 100%;
  height: auto;
  object-fit: cover;
}

img {
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}


/* ----------------------------------
    レスポンシブ
----------------------------------- */
/* --- 全体共通：画像がはみ出さない設定 --- */
/* --- 共通設定 --- */
img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- スマホ用 (700px以下) の設定 --- */
@media screen and (max-width: 700px) {
  .hide-sp {
    display: none !important; /* スマホの時だけ完全に消す */
  }
}

/* --- タブレット用 (701px〜1000px) の設定 --- */
/* ここで「タブレットの時は消さないで！」と強制します */
@media screen and (min-width: 701px) and (max-width: 1000px) {
  .hide-sp {
    display: block !important; /* タブレットでは強制的に表示させる */
  }
}

/* --- PC用 (1001px以上) の設定 --- */
@media screen and (min-width: 1001px) {
  .hide-sp {
    display: block !important; /* PCでも強制的に表示させる */
  }
}

/* ----------------------------------
    footer
----------------------------------- */
#footer {
  text-align: center;
  font-size: 1rem;
  background-color: #333;
  color: #fff;
  padding: 20px 0 20px;
}