.footer-clean{padding:50px 0;background-color:#fff;color:#4b4c4d}.footer-clean h3{margin-top:0;margin-bottom:12px;font-weight:700;font-size:16px}.footer-clean ul{padding:0;list-style:none;line-height:1.6;font-size:14px;margin-bottom:0}.footer-clean ul a{color:inherit;text-decoration:none;opacity:.8}.footer-clean ul a:hover{opacity:1}.footer-clean .item.social{text-align:right}.footer-clean .item.social>a{font-size:24px;width:40px;height:40px;line-height:40px;display:inline-block;text-align:center;border-radius:50%;border:1px solid #ccc;margin-left:10px;margin-top:22px;color:inherit;opacity:.75}.footer-clean .item.social>a:hover{opacity:.9}@media (max-width:991px){.footer-clean .item.social{text-align:center}.footer-clean .item.social>a{margin-top:40px}}@media (max-width:767px){.footer-clean .item{text-align:center;padding-bottom:20px}.footer-clean .item.social>a{margin-top:10px}}.footer-clean .copyright{margin-top:14px;margin-bottom:0;font-size:13px;opacity:.6}.footer-dark{padding:50px 0;color:#f0f9ff;background-color:#282d32}.footer-dark h3{margin-top:0;margin-bottom:12px;font-weight:700;font-size:16px}.footer-dark ul{padding:0;list-style:none;line-height:1.6;font-size:14px;margin-bottom:0}.footer-dark ul a{color:inherit;text-decoration:none;opacity:.6}.footer-dark ul a:hover{opacity:.8}.footer-dark .item.text{margin-bottom:36px}@media (max-width:767px){.footer-dark .item:not(.social){text-align:center;padding-bottom:20px}.footer-dark .item.text{margin-bottom:0}}.footer-dark .item.text p{opacity:.6;margin-bottom:0}.footer-dark .item.social{text-align:center}@media (max-width:991px){.footer-dark .item.social{text-align:center;margin-top:20px}}.footer-dark .item.social>a{font-size:20px;width:36px;height:36px;line-height:36px;display:inline-block;text-align:center;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.4);margin:0 8px;color:#fff;opacity:.75}.footer-dark .item.social>a:hover{opacity:.9}.footer-dark .copyright{text-align:center;padding-top:24px;opacity:.3;font-size:13px;margin-bottom:0}

html,
body {
  height: 100%;
  /* html と body 要素はパディングやマージンを持てません。*/
}

/* フッターを下部へ押しやるための、コンテンツのラッパー */
#wrap {
    min-height: 100%;
    height: auto;
    /* フッターの高さ分だけ、ネガティブインデントを指定 */
    margin: 0 auto -160px;
    /* フッターの高さ分だけ、パディングを指定 */
    padding: 0 0 160px;
  }

  /* ここでフッターの高さを指定 */
  #footer {
    padding-top: 20px;
    height: 220px;
    background-color: #f5f5f5;
  }