@charset "utf-8";
/* =====================================================================
   field-c.net 2026 リニューアル 共通フッタ（footer2026.tmpl）
   - 新しいページと、フッタだけ差し替えた既存ページの両方で読み込む（header2026.css の後に）。
     デザイントークンは header2026.css のものを使う。クラス名は gf_ で始める
   - レイアウトの切り替え（メディアクエリ）はファイル末尾に集約
   ===================================================================== */

/* ---------------------------------------------------------------------
   フッタ（footer2026.tmpl）
--------------------------------------------------------------------- */
/* 既存ページの fc_common.css が footer 要素に付けている幅・余白・重なり順を打ち消す */
.gf { position: static; width: auto; padding: 0; background: var(--c-footer); color: #fff; }
.gf_inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo nav"
    "info copy";
  gap: clamp(28px, 3vw, 52px) clamp(24px, 4vw, 80px);
  width: min(100% - var(--gutter) * 2, var(--w-wide));
  margin-inline: auto;
  padding-block: clamp(40px, 4vw, 64px) 110px;  /* 下は左下の電話ボタン（高さ 約80px）に重ならない高さ */
}
.gf_logo { grid-area: logo; width: clamp(150px, 8vw + 100px, 250px); }
.gf_logo img { display: block; width: 100%; height: auto; }  /* 既存ページの img 指定は高さが自動にならないため */
.gf_nav { grid-area: nav; display: flex; justify-content: flex-end; gap: clamp(16px, 4vw - 20px, 64px); }
.gf_nav dl { flex: none; white-space: nowrap; }
.gf_nav dt {
  margin-bottom: .7em;
  padding: 0 1em .4em;
  border-bottom: 2px solid #999;
  color: #ddd;
  font-size: var(--fs-m);
  line-height: 1.8;
}
.gf_nav dd a { display: block; padding: .1em 1em; color: #ddd; font-size: var(--fs-s); line-height: 1.85; transition: color .2s; }
.gf_info { grid-column: 1 / -1; grid-row: 2; justify-self: start; font-size: var(--fs-s); line-height: 1.7; font-style: normal; white-space: nowrap; }  /* address の既定の斜体を打ち消す */
.gf_info span { display: block; line-height: 1.7; }
.gf_copy { grid-column: 1 / -1; grid-row: 2; align-self: end; justify-self: end; font-size: var(--fs-xs); letter-spacing: .1em; line-height: 1.8; }

/* 住所の改行指定（fc2026.css を読まない既存ページでも効くように、ここでも持つ） */
.gf br.br-sp { display: none; }

/* =====================================================================
   メディアクエリ
   ===================================================================== */

/* ---- ホバー（マウス環境のみ） ---- */
@media (hover: hover) {
  .gf_nav dd a:hover { color: #fff; }
}

/* ---- タブレット ---- */
@media (max-width: 1024px) {
  /* フッタ：ロゴ＋住所を上段、ナビを下段に */
  .gf_inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo info"
      "nav  nav"
      "copy copy";
    align-items: center;
  }
  .gf_info { grid-area: info; }
  .gf_copy { grid-area: copy; }
  .gf_nav { justify-content: space-between; }
  .gf_nav dl { flex: 1; min-width: 0; }
}

/* ---- スマートフォン ---- */
@media (max-width: 767px) {
  .gf_inner { padding-bottom: 80px; }  /* 電話ボタン（高さ 約55px）に重ならない高さ */

  /* フッタ：ナビを省き、ロゴ・住所・コピーライトを縦積み中央 */
  .gf_inner {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "info" "copy";
    justify-items: center;
  }
  .gf_nav { display: none; }
  .gf_info { white-space: normal; }
  .gf_logo { width: 52%; max-width: 230px; }
  .gf_copy { justify-self: center; }
  .gf br.br-sp { display: inline; }
}