/* =================================================================
 * c-site-footer — 共通フッター
 * Figma: 3321:74833 (FooterPc)
 *        5824:95706（Wireframe-18「フッター」canonical / 標準/簡易フッターの使い分け仕様の正）
 *
 * バリアント:
 *   - 標準フッター（既定・このCSS）: サイトマップ役割、回遊促進
 *   - 簡易フッター: お問い合わせフォーム等の離脱抑制用途
 *     → site-shell/pc/footer-compact.blade.php / site-shell-sp/footer-compact.blade.php
 *
 * 構成:
 *   上段 (.c-site-footer__main, bg #F5F2F0)
 *     行1: 縦長ロゴ + 5列ナビ
 *     行2: SNS（左, flex-1）/ 認証マーク・キャプション・SDGs（右, 固定幅）
 *   下段 (.c-site-footer__legal, bg #333)
 *     法務リンク7本 + コピーライト
 *
 * 注意:
 *   - PC 値は Figma 3321:74244 系を厳密反映。`pt: 270px` は直前の contact CTA
 *     カードがグレー上段に 156px オーバーラップする前提の余白（270 − 156 = 114px
 *     がカード下端〜NEWS列の間隔）。オーバーラップは contact-cta.css 側の
 *     `.c-contact-cta { margin-bottom: -156px; z-index }` で実現
 *   - SP（≤1023.98px）の Figma 仕様は未取得。縦積み＋ガター短縮で対応し、
 *     確定後に値を再調整する前提
 * =================================================================*/

.c-site-footer {
  width: 100%;
  position: relative;
  z-index: var(--footer-z);
}

/* ---------- 上段: 全体コンテナ ---------- */
.c-site-footer__main {
  background-color: var(--color-bg-02);
  padding: 270rem 70rem 16rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80rem;
}

/* ---------- 上段 行1: ロゴ + ナビ ---------- */
.c-site-footer__top-row {
  display: flex;
  width: 100%;
  max-width: var(--footer-content-max);
  gap: 80rem;
  align-items: flex-start;
}

.c-site-footer__logo {
  flex-shrink: 0;
  display: inline-flex;
  padding: 0 32rem;
  text-decoration: none;
}

.c-site-footer__logo-img {
  width: 160rem;
  height: 206rem;
  display: block;
}

/* ---------- 5列ナビ ---------- */
.c-site-footer__columns {
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  gap: 24rem;
}

.c-site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  min-width: 0;
}

.c-site-footer__column--stack {
  gap: 64rem;
}

.c-site-footer__column-head {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-bottom: 18rem;
}

.c-site-footer__column-title-ja {
  font-family: var(--font-jp);
  font-size: 12rem;
  font-weight: var(--fw-bold);
  line-height: normal;
  letter-spacing: 0.04em;
  color: var(--color-key);
}

.c-site-footer__column-title-en {
  font-family: var(--font-en-condensed);
  font-size: 22rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: 0.04em;
  color: var(--color-text-default);
}

.c-site-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

.c-site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  font-family: var(--font-jp);
  font-size: 14rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-loose);
  letter-spacing: 0.04em;
  color: var(--color-text-default);
  text-decoration: none;
  padding-bottom: 2rem;
  border-bottom: 2rem solid transparent;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default);
}

/* Figma navi_txt_link: hover=濃い下線(文字色は据え置き) / active・現在ページ=キーカラー文字 */
.c-site-footer__link:hover { border-bottom-color: var(--color-text-default); }
.c-site-footer__link:active,
.c-site-footer__link[aria-current="page"] { color: var(--color-key); }

/* Figma 3321:74334 blank icon: open-in-new(枠+矢印)をキーカラーで。
   形状は c-link と同じ link-external.svg を mask で流用し、色は bg で着色 */
.c-site-footer__link-external-icon {
  width: 13rem;
  height: 13rem;
  flex-shrink: 0;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
}

/* RECRUIT + TOUR の親（column--stack 内のサブグループ） */
.c-site-footer__sub-group {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

/* ---------- 上段 行2: SNS / 認証マーク ---------- */
.c-site-footer__bottom-row {
  display: flex;
  width: 100%;
  max-width: var(--footer-content-max);
  gap: 32rem;
  align-items: stretch;
  padding-top: 16rem;
  border-top: 1px solid rgba(217, 217, 217, 0.88);
}

/* SNS 側（左, flex-1） */
.c-site-footer__sns {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 24rem;
  min-width: 0;
  padding: 16rem 32rem;
  border-right: 1px solid rgba(217, 217, 217, 0.88);
}

.c-site-footer__sns-label {
  font-family: var(--font-en-condensed);
  font-size: 14rem;
  font-weight: var(--fw-medium);
  line-height: normal;
  letter-spacing: 0.04em;
  color: var(--color-text-default);
  flex-shrink: 0;
}

.c-site-footer__sns-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;       /* 幅が足りない時はアイコン側で折り返す（横方向は4px維持） */
  gap: 8rem 4rem;
}

.c-site-footer__sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48rem;
  height: 48rem;
  border-radius: 24rem;
  background: none;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.c-site-footer__sns-btn:hover {
  background-color: var(--color-light-orange-02);
}

.c-site-footer__sns-btn-icon {
  width: 27rem;
  height: 27rem;
  display: block;
}

.c-site-footer__sns-btn--x .c-site-footer__sns-btn-icon { width: 23rem; height: 23rem; }
.c-site-footer__sns-btn--youtube .c-site-footer__sns-btn-icon { width: 27rem; height: 19rem; }
.c-site-footer__sns-btn--eight { width: auto; padding: 0 14rem; }
.c-site-footer__sns-btn--eight .c-site-footer__sns-btn-icon { width: 86rem; height: 18rem; }

/* 認証マーク側（右, 固定幅 608px） */
.c-site-footer__certs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16rem 32rem;
  width: 608rem;
  flex-shrink: 0;
}

.c-site-footer__certs-inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 24rem;
}

/* 認証マーク（行）+ キャプション（下）の縦積み（Figma 3321:74359） */
.c-site-footer__cert-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rem;
}

.c-site-footer__cert-marks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;       /* 認証ブロック内で入らない時はロゴ側で折り返す */
  gap: 12rem 16rem;
}

.c-site-footer__cert-mark {
  height: 56rem;
  display: block;
  object-fit: contain;
}

.c-site-footer__cert-mark--iso9001 { width: 90rem; border: 1px solid var(--color-neutral-02); }
.c-site-footer__cert-mark--iso14001 { width: 160rem; }
.c-site-footer__cert-mark--jisq { width: 107rem; }

.c-site-footer__cert-caption {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text-default);
  white-space: nowrap;
}

.c-site-footer__sdgs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56rem;
  padding: 0 8rem;
  background-color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
}

.c-site-footer__sdgs-img {
  width: 110rem;
  height: 48rem;
  display: block;
  object-fit: contain;
}

/* ---------- 下段: 法務リンク + コピーライト ---------- */
.c-site-footer__legal {
  background-color: var(--color-text-default);
  padding: 40rem 70rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rem;
}

.c-site-footer__legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: var(--footer-content-max);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32rem;
}

.c-site-footer__legal-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-jp);
  font-size: 12rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-loose);
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}

.c-site-footer__legal-link--lg { font-size: 13rem; letter-spacing: 0.04em; }

.c-site-footer__legal-link:hover {
  color: var(--color-light-orange-01);
  border-bottom-color: var(--color-light-orange-01);
}

.c-site-footer__copyright {
  margin: 0;
  width: 100%;
  max-width: var(--footer-content-max);
  font-family: var(--font-jp);
  font-size: 12rem;
  font-weight: var(--fw-medium);
  line-height: normal;
  letter-spacing: 0.04em;
  color: var(--color-white);
  white-space: pre;
}

/* =================================================================
 * SP（≤1023.98px）— Figma 3321:92943（footer_SP）準拠
 *   上段グレー: ロゴ(縦) → ナビ2列ラップ → FOLLOW US(SNS) → 認証
 *   下段ダーク: 法務リンク縦並び + コピーライト中央
 *   pt:260px は contact CTA カードを 228px 重ねる前提
 *   （重なりは contact-cta.css SP の margin-bottom: -228px と対）
 * =================================================================*/
@media (max-width: 1023.98px) {

/* 上段グレー: Figma 3321:92944 = pt260 / px16 / pb40 / gap24
   （pt260 = contact CTA カードの 228px 重なり + ロゴまで 32px。
     重なりは contact-cta.css SP の margin-bottom: -228px で実現） */
.c-site-footer__main {
  padding: 260rem 16rem 40rem;
  gap: 24rem;
}

/* ロゴ(縦) + ナビ を縦に。ロゴは中央 */
.c-site-footer__top-row {
  flex-direction: column;
  gap: 32rem;
  align-items: center;
}

.c-site-footer__logo {
  padding: 0;
  align-self: center;
}

.c-site-footer__logo-img { width: 96rem; height: auto; }   /* Figma SP 96×124 */

/* ナビ: 2列ラップ（NEWS|SERVICE / ADVANTAGE|COMPANY / RECRUIT|TOUR） Figma 3321:92948 gap32/24 */
.c-site-footer__columns {
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32rem 24rem;
  width: 100%;
}

.c-site-footer__column {
  flex: 0 0 calc((100% - 24rem) / 2);   /* 1行2列。gap(24rem)と単位を揃える: pxだと流体ズームで広幅時に基準幅を超え1列化する */
}

/* RECRUIT+TOUR は最終行をフル幅で占有し、内部を横2分割 */
.c-site-footer__column--stack {
  flex: 0 0 100%;
  flex-direction: row;
  gap: 24rem;
}

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

.c-site-footer__column-head { padding-bottom: 0; }   /* 余白は列 gap(8px) で制御 */

.c-site-footer__column-title-en { font-size: 22rem; }

.c-site-footer__link-list { gap: 12rem; }             /* Figma SP 12px */

.c-site-footer__link {
  font-size: 12rem;
  white-space: normal;
}

/* SNS + 認証を縦積み（border は SNS ブロック側へ移す） */
.c-site-footer__bottom-row {
  flex-direction: column;
  gap: 24rem;
  padding-top: 0;
  border-top: 0;
}

/* FOLLOW US: 上下ボーダー / py24 / 縦並び Figma 3321:93047 */
.c-site-footer__sns {
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;
  padding: 24rem 0;
  border-right: 0;
  border-top: 1px solid rgba(217, 217, 217, 0.88);
  border-bottom: 1px solid rgba(217, 217, 217, 0.88);
}

.c-site-footer__sns-list { flex-wrap: wrap; gap: 4rem; width: 100%; }

.c-site-footer__sns-btn { width: 50rem; height: 50rem; border-radius: 24rem; }   /* Figma SP size50 p6 */
.c-site-footer__sns-btn-icon { width: 28rem; height: 28rem; }
.c-site-footer__sns-btn--x .c-site-footer__sns-btn-icon { width: 27rem; height: 28rem; }
.c-site-footer__sns-btn--youtube .c-site-footer__sns-btn-icon { width: 28rem; height: 19rem; }
.c-site-footer__sns-btn--eight { width: auto; padding: 0 6rem; }
.c-site-footer__sns-btn--eight .c-site-footer__sns-btn-icon { width: 92rem; height: 20rem; }

/* 認証マーク: 縦積み Figma 3321:93066 gap16 */
.c-site-footer__certs {
  padding: 0;
  width: 100%;
}

.c-site-footer__certs-inner {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16rem;
}

.c-site-footer__cert-block { align-items: flex-start; gap: 8rem; }

.c-site-footer__cert-marks { flex-wrap: wrap; gap: 6rem; }   /* Figma SP gap8。390px幅で3枚1行に収めるため6pxへ微調整 */

.c-site-footer__cert-mark { height: 54rem; }
.c-site-footer__cert-mark--iso9001 { width: 86rem; }
.c-site-footer__cert-mark--iso14001 { width: 154rem; }
.c-site-footer__cert-mark--jisq { width: 103rem; }

.c-site-footer__cert-caption { font-size: 9rem; white-space: normal; }   /* Figma SP 9px */

.c-site-footer__sdgs { height: 40rem; padding: 0; background: none; }
.c-site-footer__sdgs-img { width: 92rem; height: 40rem; }

/* 下段ダーク: Figma 3321:93102 = px24 py40 gap32 / リンク縦並び gap20 / コピーライト中央 */
.c-site-footer__legal {
  padding: 40rem 24rem;
  gap: 32rem;
  align-items: flex-start;
}

.c-site-footer__legal-list {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20rem;
}

.c-site-footer__copyright {
  text-align: center;
  white-space: normal;
}

} /* end @media (max-width: 1023.98px) */