/* ===============================
   Footer (Full-Bleed + Dark)
   - 親の max-width 制限を受けずに 100vw で広げる
================================= */
.footer {
  /* ここでフルブリード（画面幅いっぱい）化 */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  /* 見た目 */
  background: #1e1e1f;          /* 濃いグレー */
  color: #f3f4f6;               /* 白系 */
  padding: 44px 20px 22px;
  border-top: 1px solid rgba(255,255,255,.08);

   /* ここを追加 👇 */
  margin-top: 60px;  /* 好きな数値に調整（例: 40px, 80px） */
}

/* 内側は通常の最大幅で整える */
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

/* 見出し */
.footer-heading {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(255,255,255,.2);
}

/* テキスト／リンク（白系で統一） */
.footer p,
.footer a,
.footer small {
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
}
.footer a:hover { text-decoration: underline; }

/* ボタン（濃グレー×白系） */
.btn {
  display: inline-block;
  margin: 8px 6px 0 0;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  /*background: #2b2b2d;*/
  color: #f9fafb;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { background: #363638; }
.btn:active { transform: translateY(1px); }

.btn-outline {
  background: transparent;
  color: #f3f4f6;
  border: 1px solid rgba(255,255,255,.35);
}
.btn-outline:hover {
  background: rgba(255,255,255,.06);
}

/* 下段コピーライト */
.footer-bottom {
  max-width: 1100px;
  margin: 28px auto 0;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 14px;
  text-align: center;
  color: #cbd5e1;
  font-size: 12px;
}

/* PCでは3カラム */
@media (min-width: 800px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr 1fr;
  }
}