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

   目的：
     - ダーク地 × 高コントラストの文字色で可読性を確保
     - 3カラム（左=ロゴ / 中央=ナビ / 右=コピーライト）
     - モバイルでは縦積み＆中央寄せ
     - 「TOPへ」ボタンはボーダー→ホバーで塗り（サイトのCTA流儀を踏襲）
     - focus-visible/低モーション/プリント配慮
     - ★提案B：旧「↑TOP」（フッター内 .to-top）は廃止し、
       フローティングFAB（.to-top-fab）に一本化
       └ 丸枠ボタン。初期は白塗り＋#333、ホバーで#333が下からスライドインし文字を反転
       └ ★アイコンは「テキストではなく」正方形の角（2 辺）を回転させた図形
       └ ★方向は変数で制御（今回：上向きから“右へ45°回転”）
       └ ★アイコンの“幾何学中心”配置＆微調整変数を保持（ズレ根絶）
   備考：
     - 余白は 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へ」ボタン（提案B：フローティングFABへ一本化）
     ---------------------------------------------------------
     - 旧：フッター内 .to-top は廃止（footer.php から削除済み）
     - 新：.to-top-fab が常用の導線
     ========================================================= */

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

  /* ▼アイコンを“少し小さく”
     旧: 0.48 → 新: 0.42（気持ち小さめ。お好みで 0.40〜0.45 程度に） */
  --topIconSize: calc(var(--topBtnSize) * .30);

  /* 図形アイコンの見た目（角の線太さ・回転角） */
  --topIconStroke: 3px;              /* 角の線の太さ */

  /* ▼向きを“右に45°回転”
     旧: -90deg（真上） → 新: -45deg（真上から時計回りに45°） */
  --topIconRotate: -45deg;

  /* アイコン微調整（必要時だけ触る） */
  --topIconAdjustX: -4px;
  --topIconAdjustY: 4px;

  /* =========================================================
     ▼提案B：フローティング「上に戻る」ボタン用
     ---------------------------------------------------------
     目的：
       - フッターまで行かなくても押せる “上に戻る” ボタンを提供
       - スクロール開始で下から出現（.is-visible）
       - フッター侵入時に被らないよう底上げ（JSが --fab-offset を更新）

     ポリシー：
       - 既存 .to-top の“意匠”を流用して統一感を維持
       - 位置調整はCSS変数で吸収（SNS固定バー等の干渉回避もしやすく）
     ========================================================= */

  /* 右端寄せ：SNS固定バー等と干渉する場合はここを増やす（例：80px） */
  --fab-right: clamp(10px, 2.6vw, 24px);

  /* 通常時の下余白（右下に常駐する位置） */
  --fab-base: clamp(12px, 3vw, 22px);

  /* フッター回避ぶんの追加底上げ（JSが px をセット：例 "120px"） */
  --fab-offset: 0px;

  /* 表示開始の “せり上がり” 量（非表示時に画面外へ隠すため） */
  --fabHiddenTranslateY: 140%;
}

/* ============= ベース ============= */
.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;
}

/* =========================================================
   ▼提案B：フローティング「上に戻る」ボタン（.to-top-fab）
   ---------------------------------------------------------
   DOM：
     - footer.php の </footer> 直後に #to-top-fab.to-top-fab を追加済み想定

   役割：
     - スクロール開始で表示（JSが .is-visible を付与）
     - フッター侵入時に底上げ（JSが --fab-offset を更新）

   デザイン：
     - 旧 .to-top の “丸枠・塗り・スライド塗り・角アイコン” を流用して統一
     - 位置は fixed（右下）
   ========================================================= */
.to-top-fab{
  appearance: none;
  -webkit-appearance: none;

  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;
  cursor: pointer;

  display: inline-grid;
  place-items: center;

  /* 右下固定：bottom は “通常余白＋フッター回避ぶん” */
  position: fixed;
  right: var(--fab-right);
  bottom: calc(var(--fab-base) + var(--fab-offset));
  z-index: 999;

  /* 初期は非表示：下に隠してクリック不可（JSで .is-visible 付与） */
  opacity: 0;
  transform: translateY(var(--fabHiddenTranslateY));
  pointer-events: none;

  /* 表示アニメ（最小限） */
  transition: opacity .25s ease, transform .25s ease;

  /* “塗りスライド” を成立させるため */
  isolation: isolate;
  overflow: hidden;
}

/* 視覚ラベル（必要なら使う）
   - デフォルトは見せない（font-size:0）
   - 表示したい場合はここで font-size を与えて運用します */
.to-top-fab__label{
  font-size: 0;
}

/* 表示状態：下からせり上がる */
.to-top-fab.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 図形アイコン（正方形の角＝2辺だけ描く） */
.to-top-fab::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--topIconSize);
  height: var(--topIconSize);
  box-sizing: border-box;
  border-style: solid;
  border-width: var(--topIconStroke);
  border-color: transparent;
  border-top-color: currentColor;   /* 上辺 */
  border-right-color: currentColor; /* 右辺 */

  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--topIconRotate))
    translate(var(--topIconAdjustX), var(--topIconAdjustY));

  will-change: transform;
}

/* 下からの塗りスライド */
.to-top-fab::after{
  content: "";
  position: absolute; inset: 0;
  background: var(--topBtnFillHover);
  transform: translateY(101%);
  transition: transform .28s ease;
  z-index: -1;
  pointer-events: none;
}

/* ホバー／フォーカス */
.to-top-fab:hover,
.to-top-fab:focus-visible{
  color: #fff;
  outline: none;
}
.to-top-fab:hover::after,
.to-top-fab:focus-visible::after{
  transform: translateY(0);
}

/* フッター回避中（JSが付与する想定）
   - 現状は見た目を変えず、クラスだけ受け口として用意 */
.to-top-fab.is-over-footer{
  /* no-op */
}

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .footer-menu > li > a,
  .to-top-fab{
    transition: none !important;
  }

  /* せり上がりも抑制（必要なら “transform維持” に変更可） */
  .to-top-fab{
    transform: none !important;
  }

  .to-top-fab::after{
    transition: none !important;
  }
}

/* フォーカスリング（フッター内リンク & FAB） */
.site-footer a:focus-visible,
.to-top-fab:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 印刷時は非表示（固定UIは不要） */
@media print{
  .to-top-fab{ display: none !important; }
}

/* レスポンシブ：タブレット以下でフッター本体を縦積み中央寄せに */
@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;
  }
}

@media (max-width: 380px){
  .footer-menu{ gap: 12px 16px; }
}