/* ========== Footer（Xボタンを自由に微調整できる版） ========== */
#footer{
  /* ▼ここで全体デフォルト。必要に応じて値だけ変えればOK */
  --x-size: 28px;          /* Xアイコンの見た目サイズ */
  --x-nudge-x: 0px;        /* 右(+)/左(-)へ微調整 */
  --x-nudge-y: 2px;        /* 下(+)/上(-)へ微調整 */
  --x-hit: 36px;           /* クリック領域（見た目より少し大きめ推奨） */

  background:#fff;
  border-top:1px solid #eee;
  padding: 44px 64px 56px;
}
#footer .footer-inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

/* 左：ロゴ */
#footer .footer-logo img{ height:82px; }

/* 右カラム */
#footer .footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
  text-align:right;
}

/* 右1段目：ナビ */
#footer .footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  list-style:none;
  margin:0; padding:0;
}

#footer .footer-nav a{
  display:inline-block;
  padding:6px 18px;
  font-family:"Outfit","Noto Sans JP",system-ui,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:16px;
  color:#111;
  text-decoration:none;
}
#footer .footer-nav a:hover{ opacity:.8; }

/* 右2段目：提供・問合せ・X */
#footer .footer-info{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:15px;
  color:#222;
}
#footer .footer-info img{ height:20px; }

#footer .footer-info .contact-link{
  color:#000; text-decoration:none;
}
#footer .footer-info .contact-link:hover{ text-decoration:underline; }

/* ▼Xボタン：見た目サイズと位置をCSS変数で調整 */
#footer .footer-info .x-link{
  display:inline-flex;                /* 中身を中央に */
  align-items:center;
  justify-content:center;
  width:var(--x-hit);
  height:var(--x-hit);
  /* 見た目サイズ：中の画像で制御 */
  position:relative;                  /* transformの基準は自身 */
  transform: translate(var(--x-nudge-x), var(--x-nudge-y));
}
#footer .footer-info .x-link img{
  width:var(--x-size);                /* ここでアイコンの実サイズ */
  height:auto;
  display:block;
}
#footer .footer-info .x-link:hover{ opacity:.85; }

/* 右3段目：コピーライト */
#footer .copyright{
  font-size:14px;
  color:#666;
  margin-top:6px;
}

/* ---- SP 調整 ---- */
@media (max-width: 720px){
  #footer{ padding:32px 20px 38px;
    /* モバイルだけ別の微調整をしたい時はここで上書き */
    --x-size: 26px;
    --x-nudge-x: 0px;
    --x-nudge-y: 0px;
    --x-hit: 34px;
  }
  #footer .footer-inner{ flex-direction:column; align-items:center; gap:18px; }
  #footer .footer-logo img{ height:70px; }
  #footer .footer-right{ align-items:center; text-align:center; }
  #footer .footer-nav a{ font-size:14px; padding:8px 8px; }
  #footer .footer-nav li + li::before{ transform: translate(-6px,-50%); width:6px; height:6px; }
  #footer .footer-info{ font-size:13px; display:flex; }
  #footer .copyright{ font-size:12px; }
}
@media (max-width: 400px){
  #footer{ padding:32px 20px 38px;
    /* モバイルだけ別の微調整をしたい時はここで上書き */
    --x-size: 26px;
    --x-nudge-x: 0px;
    --x-nudge-y: 0px;
    --x-hit: 34px;
  }
  #footer .footer-inner{ flex-direction:column; align-items:center; gap:18px; }
  #footer .footer-logo img{ height:70px; }
  #footer .footer-right{ align-items:center; text-align:center; }
  #footer .footer-nav a{ font-size:13px; padding:6px 6px; }
  #footer .footer-nav li + li::before{ transform: translate(-6px,-50%); width:6px; height:6px; }
  #footer .footer-info{ font-size:12px; }
  #footer .copyright{ font-size:11px; }
}