/* footer.css — フッター（Figma: 1976:10045 / Footer03）
   実値: 本体 #004C98 py 80 内側1200px / ロゴマーク+社名 25.6px Bold
         住所 16px Medium lh 1.8 / SNS 32px gap 32 / ナビ 16px ExtraBold
         下部バー #0078CF py 8 / 14.22px・12.8px */

.site-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.site-footer__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-80) 0;
  background: var(--color-primary-dark);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: var(--layout-max);
}

.site-footer__info {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-32);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  color: var(--color-white);
  text-decoration: none;
}

.site-footer__brand img {
  display: block;
  width: 2.875rem;
  height: 4rem;
}

.site-footer__brand-name {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.site-footer__address {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  font-style: normal;
}

.site-footer__sub {
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: 33.75rem;
  flex-direction: column;
  gap: var(--space-48);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* アイコンは高さ32px基準。Xは32x32正方形、YouTubeは横長（41.4x29）のため
   ボックス幅で出し分け、img は width:100% / height:auto で比率維持する。 */
.site-footer__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
}

.site-footer__social-icon--youtube {
  width: 2.5875rem; /* 41.4px（Figma実値）。高さは比率で29pxになる */
}

.site-footer__social-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__social-text {
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  white-space: nowrap;
}

/* hover: ドロワーのSNSアイコン（.global-menu__social a）と同じ薄め方 */
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  opacity: 0.7;
}

.site-footer__nav {
  display: flex;
  gap: var(--space-48);
}

/* 2列目以降をまとめるラッパー。PCでは透過して従来どおり横並び3列を保つ */
.site-footer__nav-group {
  display: contents;
}

.site-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-body);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* hover: SNSリンク（.site-footer__social-link）と同じ薄め方 */
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  opacity: 0.7;
}

/* 「業務改善・業務変革」配下の下層ページ。先頭にダッシュを添えて字下げ表示 */
.site-footer__nav-item--sub a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  font-weight: var(--font-weight-medium);
}

.site-footer__nav-item--sub a::before {
  content: "ー";
  flex-shrink: 0;
}

.site-footer__bottom {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0;
  background: var(--color-primary);
}

.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--layout-max);
}

.site-footer__privacy {
  color: var(--color-white);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  text-decoration: none;
}

.site-footer__copyright {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
}

/* --- SP: 縦積み ---------------------------------------------------------- */
@media (max-width: 767px) {
  .site-footer__main {
    padding: var(--space-48) 0;
  }
  .site-footer__inner {
    flex-direction: column;
    gap: var(--space-40);
    padding-inline: var(--space-24);
  }
  .site-footer__sub {
    max-width: 100%;
    width: 100%; /* 縦積み時に内容幅へ縮ませず全幅に広げる（フッターナビの2カラム等分の前提） */
    gap: var(--space-32);
  }
  /* SNSはX・YouTubeを縦積み */
  .site-footer__social {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }
  /* 縦積み時はアイコンの幅を32pxに揃え（YouTubeは比率で高さが縮む）、
     左寄せにして2行のアイコン左端・テキスト左端を合わせる。 */
  .site-footer__social-icon {
    width: 2rem;
    justify-content: flex-start;
  }
  .site-footer__social-icon img {
    width: 2rem;
  }
  /* SPは2カラム。1列目＋（2列目以降を縦積みした）グループを横並びにし、
     画面幅に対して左右50%ずつの等幅にする */
  .site-footer__nav {
    gap: var(--space-32);
  }
  .site-footer__nav > .site-footer__nav-col,
  .site-footer__nav-group {
    flex: 1 1 0;
    min-width: 0;
  }
  .site-footer__nav-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-24);
    text-align: center;
  }
}