/* =========================================================
 * footer.css — RACINE.LAB フッター（安全なフル幅対応）
 * ======================================================= */

/* ------------------------------
   共通（PC / SP）
-------------------------------- */
.site-footer{
  width: 100%;
  overflow-x: hidden; /* ← 横崩れ防止の要 */
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN",
               "Hiragino Sans","Yu Gothic Medium","Yu Gothic",
               Meiryo,sans-serif;
}

/* =========================================================
   上段：フル幅背景 + 中央コンテンツ
========================================================= */
.footer-upper{
  width: 100vw;                 /* ★ フルスクリーン */
  margin-left: calc(50% - 50vw);/* ★ 画面中央基準に補正 */
  background-color: #a48362;
  padding: 60px 0;
  color: #fff;
}

.footer-cols{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 0px;              /* ← すでに0（SP余白なし） */
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer-col{
  min-width: 200px;
}

.footer-col-title{
  font-size: 14px;
  margin-bottom: 16px;
  letter-spacing: .08em;
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li{
  font-size: 13px;
  margin-bottom: 8px;
}

.footer-links a{
  color: #fff;
  text-decoration: none;
}

.footer-links a:hover{
  opacity: .7;
}

/* =========================================================
   中段：ロゴ＋情報（白背景）
========================================================= */
.footer-middle{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #fff;
  padding: 60px 0 40px;
  text-align: center;
}

.footer-middle-inner{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 0px;              /* ← すでに0（SP余白なし） */
  color: #a48362;
}

.footer-logo{
  font-size: 32px;
  letter-spacing: .4em;
  margin-bottom: 24px;
}

.footer-address,
.footer-hours{
  font-size: 13px;
  line-height: 1.9;
}

/* =========================================================
   下段：コピーライト
========================================================= */
.footer-lower{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(164,131,98,.85);
  text-align: center;
  padding: 15px 0;
}

.footer-copy{
  font-size: 11px;
  color: #fff;
  letter-spacing: .06em;
}

/* =========================================================
   SP（〜768px）
========================================================= */
@media (max-width: 768px){

  .footer-cols{
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }

  .footer-col{
    min-width: auto;
  }

  .footer-logo{
    font-size: 26px;
    letter-spacing: .25em;
  }

  /* =========================================================
     ★追加：SP時の左右“1〜数px”白縁対策（100vwズレ回避）
     100vw + calc(50%-50vw) の微差を、SPでは 100% に固定する
  ========================================================= */
  .site-footer .footer-upper,
  .site-footer .footer-middle,
  .site-footer .footer-lower{
    width: 100% !important;
    margin-left: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  /* 念のため：内側余白も完全ゼロ（すでに0だが保険） */
  .site-footer .footer-cols,
  .site-footer .footer-middle-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* =========================================================
   PC：フッターを強制フルスクリーン（コンテナ拘束を解除）
   ========================================================= */
@media (min-width: 769px){

  /* フッター親が max-width で潰されるケースを解除 */
  footer.site-footer,
  .site-footer{
    max-width: none !important;
    width: 100% !important;
  }

  /* 各段を「画面幅(100vw)」に強制して中央へ戻す */
  .site-footer .footer-upper,
  .site-footer .footer-middle,
  .site-footer .footer-lower{
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* =========================================================
   SP：親コンテナの左右余白を無視してフッターを画面幅にする
========================================================= */
@media (max-width: 768px){

  /* ① フッター“自体”を画面幅(100vw)にして中央へ戻す */
  footer.site-footer,
  .site-footer{
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ② 中の段は 100% でOK（親拘束は①で解除済み） */
  .site-footer .footer-upper,
  .site-footer .footer-middle,
  .site-footer .footer-lower{
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    left: auto !important;
  }

  /* ③ 念のため：横スクロールを抑止（1pxズレ保険） */
  html, body{
    overflow-x: hidden !important;
  }
}