/* =========================================================
   footer.css — サイト共通フッター（footer.php 対応）

   目的：
     - ダーク地 × 高コントラストの文字色で可読性を確保
     - 3カラム（左=ロゴ / 中央=ナビ / 右=コピーライト）
     - モバイルでは縦積み＆中央寄せ
     - 「TOPへ」ボタンはボーダー→ホバーで塗り（サイトのCTA流儀を踏襲）
     - focus-visible/低モーション/プリント配慮
     - ★PC/SPとも「↑TOP」を“フッター上境界から半分はみ出す”演出で右上に固定
       └ さらに“もっと右”＝ビューポート右端寄せ
       └ 丸枠ボタン。初期は白塗り＋#333、ホバーで#333が下からスライドインし文字を反転
       └ ★アイコンは「＞（全角）」を -90deg 回転して“上向きの＞”に変更
       └ ★NEW: アイコンの“幾何学中心”配置＆微調整変数を追加（ズレ根絶）
   備考：
     - 余白は index 系で使っている --aboutPadX / --aboutPadTop を尊重しつつフォールバック
     - 角丸は 0（サイト基調）
   ========================================================= */

/* ============= デザイントークン（フッター専用） ============= */
:root{
  --ftBg: #333;                 /* 背景（ダーク） */
  --ftText: #e6e5df;            /* 本文文字色（薄ベージュ寄りで柔らかく） */
  --ftMuted: #bdbbb4;           /* 補助文字（薄め） */
  --ftLink: #f1f0ea;            /* リンク通常色 */
  --ftLinkHover: #ffffff;       /* リンクhover色 */
  --ftBorder: rgba(255,255,255,.14); /* うっすらボーダー */

  --ftMaxW: 1200px;             /* インナー最大幅（中央寄せ） */
  --ftPadY: clamp(28px, 4vw, 64px);
  --ftPadX: var(--aboutPadX, 40px);

  --ftGap: 20px;                /* 要素間ギャップ */
  --ftMenuGap: clamp(12px, 2vw, 22px);
  --ftRadius: 0;                /* 角丸はゼロで統一 */

  /* 「↑TOP」ボタン（丸枠↑アイコン用） */
  --topBtnBorder: rgba(255,255,255,.45);
  --topBtnColor: #333;               /* 文字色（初期）→ 白塗り上の#333 */
  --topBtnFill: #ffffff;             /* 初期の塗り：白 */
  --topBtnFillHover: #333;           /* ホバー時に下からスライドインする塗り：#333 */
  --topBtnSize: clamp(44px, 6vw, 56px);      /* 丸ボタンの直径 */
  --topIconSize: calc(var(--topBtnSize) * .48); /* アイコン（＞）のサイズ */

  /* ビューポート右端寄せ（“もっと右に”＝画面端基準） */
  --topBtnEdgeMargin: clamp(10px, 2.6vw, 24px);

  /* ★NEW: フォント差による“わずかなズレ”を吸収する微調整オフセット */
  --topIconAdjustX: 1px;   /* +右 / -左 へ微調整（通常は 0px のままでOK） */
  --topIconAdjustY: 1px;  /* +下  / -上 へ微調整（やや上げが綺麗なため既定 -1px） */
}

/* ============= ベース ============= */
.site-footer{
  background: var(--ftBg);
  color: var(--ftText);
  border-top: 1px solid var(--ftBorder);
  position: relative;   /* ← “半分はみ出し”用の配置基準になる */
  overflow-x: clip;     /* 横方向のみクリップ（上方向のはみ出しは許可） */
  overflow-y: visible;  /* ← 上方向へボタンがはみ出しても見えるように */
  z-index: 10;
}

.site-footer .footer-inner{
  max-width: var(--ftMaxW);
  margin: 0 auto;
  padding: var(--ftPadY) var(--ftPadX);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ftGap);
}

/* ============= 左：ロゴ/サイト名 ============= */
.footer-logo{
  justify-self: start;
  text-decoration: none;
  color: var(--ftLink);
  line-height: 1;
}
.footer-title{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(1rem, .6vw + .9rem, 1.15rem);
  display: inline-block;
}
.footer-logo:hover,
.footer-logo:focus-visible{
  color: var(--ftLinkHover);
  outline: none;
}

/* ============= 中央：フッターナビ ============= */
.footer-nav{
  justify-self: center;
}
.footer-menu{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--ftMenuGap);
}
.footer-menu > li > a{
  color: var(--ftLink);
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .06em;
  line-height: 1.2;
  position: relative;
  padding: 2px 0;

  /* 下線アニメ（左→右）。背景グラデで細い線を作る */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .25s ease, color .25s ease;
}
.footer-menu > li > a:hover,
.footer-menu > li > a:focus-visible{
  color: var(--ftLinkHover);
  background-size: 100% 1px;
  outline: none;
}

/* ============= 右：コピーライト ============= */
.footer-meta{
  justify-self: end;
  text-align: right;
}
.footer-meta small{
  color: var(--ftMuted);
  letter-spacing: .02em;
  font-size: .9rem;
}

/* ============= 「↑TOP」ボタン（footer.php内の .to-top） =============

   要件反映：
   - 丸枠ボタン（初期：白塗り + #333）
   - アイコンは「＞（全角）」を -90deg 回転して“上向きの＞”に
   - ホバーで #333 が下からスライドインして塗り替え、文字を白へ反転
   - PC/SPとも“フッター上境界から半分はみ出し”、画面右端寄せ
   - ★NEW: アイコンを幾何学的中心に正確配置（translate(-50%,-50%) 基準）し、
            端末差は --topIconAdjustX/Y で吸収
   --------------------------------------------------------------- */
.to-top{
  appearance: none;
  -webkit-appearance: none;

  /* ▼ 丸ボタン基本形（初期：白塗り＋#333） */
  width: var(--topBtnSize);
  height: var(--topBtnSize);
  border-radius: 9999px;
  border: 1px solid var(--topBtnBorder);
  background: var(--topBtnFill);
  color: var(--topBtnColor);

  /* テキストは視覚的に非表示。アイコンは擬似要素で描画 */
  font-size: 0;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;

  display: inline-grid;      /* 中央配置（ボタン自体の基準） */
  place-items: center;

  /* ▼ はみ出し固定用：どの幅でも右上の境界に半分出す */
  position: absolute;
  top: 0;                                /* フッターの上境界（border-top）基準 */
  right: var(--topBtnEdgeMargin);        /* 画面右端寄せ（ビューポート基準） */
  transform: translateY(-50%);           /* 半分はみ出し */
  z-index: 2;                            /* 境界線よりも前面 */

  isolation: isolate;                    /* 擬似要素を内側に閉じ込める */
  overflow: hidden;                      /* スライド塗りを内側でクリップ */
}

/* ★アイコン（＞を上向きに）：
   - 全角「＞」の“見た目中心”を、擬似要素を絶対配置して丸の幾何学中心に合わせる
   - translate(-50%,-50%) で 50%/50% に載せてから rotate(-90deg)
   - 仕上げは --topIconAdjustX/Y で微調整（フォント差対策）
*/
.to-top::before{
  content: "＞";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  font-size: var(--topIconSize);
  line-height: 1;
  color: currentColor;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)          /* 幾何学中心へ配置 */
    rotate(-90deg)                 /* 右向き＞を上向きに */
    translate(var(--topIconAdjustX), var(--topIconAdjustY)); /* 仕上げの微調整 */
  /* にじみ抑制（任意） */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* 下からスライドインする“濃い塗り”（#333） */
.to-top::after{
  content: "";
  position: absolute; inset: 0;
  background: var(--topBtnFillHover);    /* #333 */
  transform: translateY(101%);           /* 初期は下に潜らせる（1%余分でにじみ防止） */
  transition: transform .28s ease;
  z-index: -1;                           /* アイコン（＞）の背面で塗る */
  pointer-events: none;
}

/* ホバー／フォーカス：#333を下からスライドイン→アイコン色は白へ反転 */
.to-top:hover,
.to-top:focus-visible{
  color: #fff;               /* 反転（背景が#333に変わるので白） */
  outline: none;
}
.to-top:hover::after,
.to-top:focus-visible::after{
  transform: translateY(0);
}

/* 低モーション配慮：トランジションをオフに */
@media (prefers-reduced-motion: reduce){
  .footer-menu > li > a,
  .to-top::after{
    transition: none !important;
  }
}

/* ============= フォーカスリング（アクセシビリティ） ============= */
.site-footer a:focus-visible,
.to-top:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;   /* 境界線上でもリングが欠けにくい */
}

/* ============= レスポンシブ ============= */
/* 900px 未満：縦積み＋中央寄せ（※「＞ボタン」は右上固定のままに仕様変更） */
@media (max-width: 900px){
  .site-footer .footer-inner{
    grid-template-columns: 1fr;
    row-gap: 18px;
    text-align: center;
  }
  .footer-logo{ justify-self: center; }
  .footer-nav{ justify-self: center; }
  .footer-meta{
    justify-self: center;
    text-align: center;
  }
}

/* 360px 付近：メニュー詰まり対策（ボタンは右上固定継続） */
@media (max-width: 380px){
  .footer-menu{ gap: 12px 16px; }
}

/* ============= オプション：常時右下固定にしたい場合（任意） =============

   HTML側で <button class="to-top is-fixed">TOP</button> として使う。
   footer 内にあっても position:fixed で画面右下に固定表示。

.to-top.is-fixed{
  position: fixed;
  right: clamp(12px, 3vw, 22px);
  bottom: clamp(12px, 3vw, 22px);
  z-index: 999;
}

@media print{
  .to-top.is-fixed{ display: none !important; }
}
*/