/* footer（通常DOM・FLOCSS）。後日 PHP でコンポーネント化する範囲 */

.c-site-footer {
  position: relative;
  background-color: var(--color-bg);
  padding: var(--space-y-100) var(--space-side) var(--space-y-48);
  overflow: hidden;
}
.c-site-footer__burst {
  position: absolute;
  inset: 0;
  background-image: url("../../img/texture.jpg");
  background-repeat: repeat;
  background-size: var(--texture-size);
  opacity: 0.03;
  pointer-events: none;
}

.c-site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-y-80) var(--space-x-80);
}

/* --- 上段 --------------------------------------------------------------- */
.c-site-footer__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-y-60) var(--space-x-60);
}

/* Figma のブロック幅は398pxだが、固定するとナビ列を押し出して1092pxで潰す。
   左揃えのブロックなので箱の右端が動いても見た目は変わらない（実測でPC全幅とも
   左端・高さ・ロゴ・右ブロックの座標は一致）。縮み分はここで吸収する */
.c-site-footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-40) var(--space-x-40);
  width: auto;
  min-width: 0;
}
.c-site-footer__logo { display: block; width: 280px; }

/* Figma: ロゴ→住所ブロック 40px、住所テキストと Google Maps の間 16px。
   会社名と住所の 2 行の間はギャップなし（line-height 2 のみ） */
.c-site-footer__addr {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-16) var(--space-x-16);
}
.c-site-footer__addr-text {
  display: flex;
  flex-direction: column;
}
.c-site-footer__addr p {
  font-family: var(--font-jp);
  font-size: var(--fs-14);
  line-height: 2;
  letter-spacing: 0.15em;
  /* 幅が足りるうちは1行に流れる。--info が可変なので nowrap で溢れさせる必要がない */
  color: var(--color-text-muted);
  font-feature-settings: "palt" 1;
}
.c-site-footer__company { font-weight: 500; }
.c-site-footer__map a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-y-6) var(--space-x-6);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-15);
  letter-spacing: 0.08em;
  color: var(--color-brand);
}
/* 文字の頭に付く丸なので em（Figma 6px / 親は 15px）。チップ・about のリンクと
   同じ書き方に揃えてある（components.css の .c-chip::before を参照） */
.c-site-footer__map a::before {
  content: "";
  flex-shrink: 0;
  width: calc(6em / 15);
  height: calc(6em / 15);
  border-radius: 50%;
  background-color: var(--color-brand);
}

/* 縮ませない。ここが縮むと会社情報と取り合いになり、ナビ列の文字が切れる */
.c-site-footer__right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-y-96) var(--space-x-96);
  flex-shrink: 0;
}
.c-site-footer__nav {
  display: flex;
  gap: var(--space-y-96) var(--space-x-96);
}
.c-site-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-32) var(--space-x-32);
}
.c-site-footer__nav-col a {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-brand);
  font-feature-settings: "palt" 1;
}

.c-site-footer__banners {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-20) var(--space-x-20);
  width: 220px;
  flex-shrink: 0;
}
/* max-width は全帯共通の頭打ち。__banners が 220px 幅を持つ PC では効かず、
   幅いっぱいに伸ばす SP でだけ働く。MV・GNAVのバナーと同じ 240px。
   変えるときは3箇所を一緒に動かす（由来は index.css の .p-index-mv__banner）*/
.c-site-footer__banner {
  display: block;
  max-width: 240px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 8px 8px 6px rgba(56, 125, 206, 0.15);
}
.c-site-footer__banner img { width: 100%; height: auto; }

/* --- 下段 --------------------------------------------------------------- */
/* リードの文字を「取れる幅」から決めるためのコンテナ。幅は親が決めるので
   inline-size の封じ込めを入れても自身の寸法は変わらない（下の
   .c-site-footer__lead を併せて見ること）*/
.c-site-footer__bottom {
  container-type: inline-size;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-y-40) var(--space-x-40);
}
/* 文字は「取れる幅」で頭打ちにする。<br> で2行だが、768〜888px では横並びの
   取り分が足りず3〜4行へ割れるため（実測：768pxで取り分365pxに対し1行433px必要）。

     1行の幅 = font-size × 9.39（1920pxで563/60、1023pxで433/46.11。
                letter-spacing .15em と palt 込みの実測値。文言を変えたら測り直す）
     取れる幅 = 100cqw − バッジ枠 − 列間

   バッジ枠はこの帯で276〜328pxなので、大きい側の328pxで引いて安全側に倒す。
   888px付近でトークンの値に追いつき、そこから上は min() がトークンを採る
   ＝この式は効かなくなるので、PC帯の見た目は変わらない。

   vw ではなく cqw なのは、スクロールバーぶんの差を持ち込まないため。
   コンテナは .c-site-footer__bottom。

   SPでは非表示にしている（下のSPブロック）*/
.c-site-footer__lead {
  font-family: var(--font-mincho-r);
  font-size: min(var(--fs-60), calc((100cqw - 328px - var(--space-x-40)) / 9.39));
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: var(--color-text-faint);
  font-feature-settings: "palt" 1;
}
.c-site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-y-16) var(--space-x-16);
  padding-bottom: var(--space-y-16);  /* gnav ポリシーと同じ視覚補正 */
}
.c-site-footer__badges {
  display: flex;
  align-items: center;
  gap: var(--space-y-12) var(--space-x-12);
  padding: var(--space-y-12) var(--space-x-18);
  margin-bottom: calc(var(--space-y-20) - var(--space-y-16));
  border: 1px solid var(--color-text-faint);
  border-radius: 4px;
}
.c-site-footer__badges p {
  /* 文字基準。--fs-12 が12pxの1920pxで174px（従来の固定172px相当）。
     箱が文字と一緒に縮むので、1行あたりの文字数がどの幅でも変わらない */
  width: 14.5em;
  font-family: var(--font-jp);
  font-size: var(--fs-12);
  line-height: 1.6;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  font-feature-settings: "palt" 1;
}
.c-site-footer__badge { width: 60px; height: 60px; object-fit: contain; }
.c-site-footer__badge--eruboshi { width: 52px; }

.c-site-footer__policy {
  display: flex;
  gap: var(--space-y-32) var(--space-x-32);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.c-site-footer__copyright {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: var(--fs-12);
  letter-spacing: 0.13em;
  color: var(--color-text-muted);
}

/* ホバーは base.css の a / a:hover が担当（footer 固有の上書きは無し） */

/* --- 中間層 + SP 共通（max-width: 1023px）---------------------------------
   上段を縦へ落とす。横並びのままだと920px以下で会社情報が痩せ、
   ロゴ280pxがブロックから溢れる（調査は docs/tablet-audit.md の V-2）。
   ナビとバナーの横並び（__right）は中間層では維持し、SPだけ縦へ落とす。
   並び順は中間層とSPで違うので、それぞれのブロックで指定する。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .c-site-footer__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-y-48) var(--space-x-48);
  }
}

/* --- 中間層だけ（768〜1023px）---------------------------------------------
   __right が全幅になるので、PCの右寄せ（justify-content: flex-end）のままだと
   ナビごと右端へ寄ってしまう。左にナビ、右にバナーで配り直す。

   並び順はSPと違い、ナビ+バナー → 罫線 → 会社情報。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .c-site-footer__right {
    order: -1;
    justify-content: space-between;
  }

  /* PCには無い罫線。ブロックの上辺として持たせる。
     線は他と同じ共通の破線（--line-dash-x）を使う */
  .c-site-footer__info {
    padding-top: var(--space-y-48);
    border-top: 1px solid transparent;
    background-image: var(--line-dash-x);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }
}

/* --- SP（Figma 431:3033） -------------------------------------------------
   Figmaの並びは ロゴ → 住所 → Google Maps → リード → 罫線 → ナビ → バナー →
   バッジ → ポリシー → コピーライト。HTMLはリードが会社情報とナビより後ろに
   あるので、DOMは動かさず `order` で入れ替える（PC・SPで同じマークアップを
   使うため）。__row と __bottom をまたいで挟み込む並びなので、この2つは
   display: contents で解き、4ブロックを __inner の直下へ出す。
   __bottom の container-type も一緒に消えるが、SPのリードは下で
   ビューポート基準へ差し替えているので影響しない。

   罫線はFigma 1033:2869。PCには無いのでSPだけナビ+バナーの上辺に持たせる。

   PCで固定幅を持つ3ブロック（会社情報398px、バナー220px、バッジ行）は
   375pxの内幅291px…SPでは335.8pxを超えるため、いずれも幅指定を解いて
   コンテンツ幅へ追従させる（docs/sp-css-audit.md 3節の溢れの一部）。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .c-site-footer {
    padding-top: var(--space-y-60);
  }

  .c-site-footer__row,
  .c-site-footer__bottom {
    display: contents;
  }

  /* ブロック間はFigma 20px（=--space-y-24）を基準にし、40pxが要る2箇所へ
     同じ幅の margin を足す。__right は罫線ぶんを padding で持つ */
  .c-site-footer__inner {
    gap: var(--space-y-24) var(--space-x-24);
  }
  .c-site-footer__info { order: 1; }
  .c-site-footer__right { order: 2; }
  .c-site-footer__meta  { order: 3; }

  /* 中間層と違い、ナビとバナーも縦に積む */
  .c-site-footer__right {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-y-48) var(--space-x-48);
    margin-top: var(--space-y-24);
    padding-top: var(--space-y-48);
    border-top: 1px solid transparent;
    background-image: var(--line-dash-x);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .c-site-footer__lead {
    display: none;
  }

  /* 列幅はPC・中間層と同じく成り行き。等分（flex: 1 1 0）にすると
     文字数の違いが出ず、右列だけ余白が大きく空いて見える */
  .c-site-footer__nav-col {
    gap: var(--space-y-24) var(--space-x-24);
  }

  .c-site-footer__banners {
    flex-direction: row;
    gap: var(--space-y-16) var(--space-x-16);
    width: 100%;
  }

  .c-site-footer__banner {
    flex: 1 1 0;
    min-width: 0;
  }

  /* SPはバナーが細る（Figma 170px）ので、影も PC の 240px 基準から縮める（×170/240 を丸めた値）。
     MV・GNAV・フッターの3箇所で同じ値。変えるときは一緒に動かす */
  .c-site-footer__banner {
    box-shadow: 6px 6px 4px rgba(56, 125, 206, 0.15);
  }

  .c-site-footer__info {
    gap: var(--space-y-24) var(--space-x-24);
  }

  .c-site-footer__logo {
    width: 240px;
  }

  .c-site-footer__addr {
    gap: var(--space-y-20) var(--space-x-20);
  }

  /* 縦積みなので align-items で左揃えへ。幅は fit-content になり取れる幅を
     超えないので、頭打ちの指定は要らない */
  .c-site-footer__meta {
    align-items: flex-start;
    gap: var(--space-y-16) var(--space-x-20);
    margin-top: var(--space-y-24);
    padding-bottom: 0;
  }

  /* 幅は持たせない。文字が基本形の 14.5em を保つので、箱は内容ぶんで止まる
     （767px・430pxとも343.2px）。取れる幅がそれを下回る375px以下では、
     はみ出す代わりに flex の縮小が働く（375pxで335.8px、320pxで280.8px）。
     SPでも文字幅を解かない。解くと箱が取れる幅まで伸びて
     767pxで728pxまで育つため */
  .c-site-footer__badges {
    gap: var(--space-y-18) var(--space-x-18);
    padding: var(--space-y-16) var(--space-x-24);
  }

  /* --fs-12（SP実寸11.76px）＋ letter-spacing .1em では1行に収まらない */
  .c-site-footer__copyright {
    font-size: var(--fs-11);
  }
}