/* ==========================================================================
   site-footer.css — 共通フッター
   深い濃紺の面、整理されたナビゲーション、大きなブランド表現で締める。
   ========================================================================== */

/*
  ★★地・光・方眼の地紋・上辺の罫は、**この要素から site-outro.css へ移した**
    （三嶋指示「CTA とフッターは上下セットでグラデーションを繋げたい」）。
    ここに background を書き戻すと、CTA との境目にまた段差が出る。

  ★上辺の 1px 罫 rgba(255,255,255,0.16) は復活させないこと。
    «面が変わる» 手掛かりそのもので、つなげる目的と正面から衝突する。

  ★isolation: isolate は残す。.site-footer__glow（ロゴマーク）が z-index:-1 で、
    これが無いと親 .site-outro の地より後ろへ落ちて見えなくなる。
  ★--color-bg は .on-inverse の既定（navy-800）を、この中の部品が参照したときに
    実際の地（navy-950 側）に近づけるために残している。面の塗りには使っていない。
*/
.site-footer {
  --color-bg: var(--navy-950);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* ★下の余白を厚くした（三嶋指示）。var(--space-8) 固定（32px）→ 可変。
     1440px で 32 → 64.8px、375px で 32 → 40px。
     上は 115.2px あるので、下を増やしても «上下同じ» にはならない。
     フッターは上に重心があるほうが締まるので、上下は揃えない。
     ★この高さは .site-outro のグラデーションの基準（1440px 表示で 1227.5 →
       1260.3px）に効く。変えたら site-outro.css の表を測り直すこと。 */
  padding-block: clamp(4.5rem, 8vw, 7.5rem) clamp(var(--space-10), 4.5vw, var(--space-20));
  /* .on-inverse の background-color（navy-800 のベタ）を消す */
  background: transparent;
}

/*
  右上の装飾。グローカルのロゴマーク（三嶋指示）。
  ★以前は «細い円＋同心の光» だった。ブランドと関係のない図形だったので、
    自社のマークに差し替えた。位置と大きさの考え方は引き継いでいる。

  ★マークの渦は «左下» にある。右へ寄せすぎると渦が画面外に出て、
    ただの丸に見える。右のはみ出しは -6rem までに留めること（実測で調整）。

  ★★濃度 0.06 は計算で決めた上限。上げるときは必ず測り直すこと。

    このマークはフッターのナビ列（MENU / SUPPORT）の «背後» に重なる。
    白を重ねると地が明るくなり、その上の文字のコントラストが下がる。
    フッターの地（radial 2 枚＋linear のグラデーション）を CSS の定義どおり
    再現し、各文字の中心位置での実際の地の色から計算した結果：

      濃度 0.04  … SUPPORT（13px / navy-400）4.83:1  ○
      濃度 0.06  … 4.57:1  ○  ← 採用
      濃度 0.07  … 4.44:1  ✕

    ★位置を下げて大きさを 544 → 352px にしたぶん、文字と重なる面積が減り、
      上限が 0.04 → 0.06 に上がった。小さくして薄いままだと存在が消えるので、
      空いた余地ぶん濃くしている。★位置や大きさを変えたら必ず測り直すこと。

    いちばん弱いのは «SUPPORT» の見出し（13px の navy-400）。
    13px は本文扱いなので 4.5:1 が要る。0.05 で割る。

  ★差し替え前の «円＋同心の光» は border 0.1 ／ 光 0.025・0.018 だった。
    0.04 のベタはそれより «濃い» ので、装飾としては弱くなっていない。
*/
/*
  ★位置は «フッターの中に収まりきる» ことを条件に決めた（三嶋指示）。
    以前は 544px のマークを高さ 421px のフッターに置いていたため、
    上を 159px・右を 58px 切り落としていた。
    切り口がちょうど CTA との境目に来るので、境界に横一直線の縁が出ていた。
    ★«はみ出させて雰囲気を出す» のではなく «収める» 方針に変えている。
      大きさを変えるときは、フッターの高さに収まるか必ず測ること。
      フッターは電話行の削除で 721px → 421px に縮んでいる。高さは動く。
*/
.site-footer__glow {
  position: absolute;
  z-index: -1;
  top: clamp(2rem, 4vw, 3.5rem);
  right: clamp(1rem, 3vw, 3rem);
  width: clamp(14rem, 26vw, 22rem);
  height: auto;
  aspect-ratio: 1;
  opacity: 0.06;
  pointer-events: none;
}

.site-footer__inner {
  position: relative;
}

.site-footer__top {
  display: grid;
  gap: clamp(var(--space-12), 8vw, var(--space-24));
}

.site-footer__brand {
  display: grid;
  align-content: start;
  gap: var(--space-6);
}

.site-footer__home {
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
}

.site-footer__logo {
  color: var(--white);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

.site-footer__logo-img {
  width: auto;
  height: clamp(2rem, 3vw, 2.5rem);
}

.site-footer__statement {
  color: var(--white);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.site-footer__about {
  max-width: 31rem;
  color: var(--navy-200);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-6), 3vw, var(--space-12));
}

.site-footer__nav-title {
  color: var(--navy-400);
  font-family: var(--font-numeric);
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

.site-footer__nav-title {
  margin-bottom: var(--space-6);
}

.site-footer__nav-list,
.site-footer__service-list,
.site-footer__support-list {
  display: grid;
  gap: var(--space-4);
}

.site-footer__nav-list {
  grid-template-columns: 1fr;
}

.site-footer__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--navy-100);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  text-decoration: none;
  /* ★transform は消した。文字は動かさない（マークの出入りだけで伝える） */
  transition: color var(--duration-fast) var(--ease-out);
}

/*
  hover の合図をリンクマークにする（三嶋指示）。
  ★以前は «文字を右に 4px ずらす ＋ 左に短い罫を伸ばす» だった。
    文字そのものが動くと、隣の行との縦の揃いが崩れて «ずれた» ように見える。
    ★だからマークは «常に置いて、透明度だけ動かす»。
      枠の幅は最初から確保されるので、hover しても文字は 1px も動かない。
      （出したり消したりすると、その都度 <a> の幅が変わって文字が動く）

  ★マークは «別ファイルの画像» ではなく data URI にしている。
    デモを 1 枚の HTML に固めるビルド（scratchpad/pack/build.py）は
    «src="/assets/..."» しか素材として拾わず、CSS の url() は素通りするため、
    外部ファイルにすると Artifact 版だけマークが消える。
    data URI なら CSS の中で完結するので、この穴を踏まない。
  ★背景画像ではなく mask で置き、塗りは currentColor。
    リンクの色は通常 navy-100・hover で白と変わるので、
    背景画像だと色を 2 枚用意することになる。mask なら文字色に自動で従う。
  ★形は header の電話アイコンに合わせた（16 の枠・線幅 1.6・角と端は丸）。
    サイトの中でアイコンの «描き方» を 1 つに保つため。
*/
.site-footer__nav a::after {
  flex: none;
  width: 0.9em;
  height: 0.9em;
  content: "";
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 9.2v3.3a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3.3'/%3E%3Cpath d='M10.2 1.5h4.3v4.3'/%3E%3Cpath d='M7 9 14.5 1.5'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  opacity: 0;
  /* ★動くのはマークだけ。2px の «出てくる» 分で、点滅ではなく現れたと読ませる */
  transform: translateX(-2px);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--white);
}

.site-footer__nav a:hover::after,
.site-footer__nav a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.site-footer__bottom {
  display: flex;
  /* ★上の余白を厚くした（三嶋指示）。var(--space-8) 固定（32px）→ 可変。
     1440px で 32 → 64.8px、375px で 32 → 40px。
     ★フッター自身の下 padding と同じ式にしてある。最下行の上下が同じ空きになり、
       «帯として置かれている» と読める。上の並び（--top）とは罫線ではなく
       余白だけで切っているので、ここが薄いと最下行が並びの続きに見える。
     ★これも .site-outro の高さを動かす。変えたら site-outro.css の表を測り直すこと。 */
  padding-top: clamp(var(--space-10), 4.5vw, var(--space-20));
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  color: var(--navy-300);
  font-size: var(--text-caption);
  letter-spacing: var(--ls-body);
}

.site-footer__copyright {
  white-space: nowrap;
}

/* 規約類のリンク ＋ コピーライト（2026-10-02 今林）。文字の大きさと色は .site-footer__bottom を継ぐ */
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.site-footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding-top: var(--space-16);
  }

  /*
    ★以前ここにあった «right: 0 / width: 100%» は、差し替え前のリング
      （画面いっぱいに広げて縁だけ見せる作り）のための指定だった。
      ロゴマークに変えたあとも残っていて、SP でマークが画面幅いっぱいに
      なっていた。ベースの clamp をそのまま効かせるため、上書きをやめる。
    ★SP は画面が狭く、マークが本文と重なる面積が大きい。
      幅の下限（14rem = 224px）は本文の左端に届かない大きさとして選んでいる。
  */
  .site-footer__glow {
    right: var(--space-4);
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-10);
  }

  .site-footer__nav-group:nth-child(3) {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    display: grid;
    gap: var(--space-3);
  }
}

@media (max-width: 479px) {
  .site-footer__nav-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__nav a,
  .site-footer__nav a::after,
  .site-footer__legal a {
    transition: none;
  }
}