/* site-footer.css — フッター
   Figma: 1606:50781「Footer」1440×562。上線は高さに含まれないため padding-top から線幅を引く */

.site-footer {
  --site-footer-card-width: calc(325 / 16 * 1rem);
  --site-footer-col-width: calc(157 / 16 * 1rem);
  --site-footer-col2-width: calc(178 / 16 * 1rem);
  --site-footer-logo-mark: calc(130.625 / 16 * 1rem);
  --site-footer-logo-type-width: calc(180.077 / 16 * 1rem);
  --site-footer-logo-type-height: calc(98.5085 / 16 * 1rem);
  --site-footer-logo-type-left: calc(144.923 / 16 * 1rem);
  --site-footer-logo-type-top: calc(16.07 / 16 * 1rem);

  padding: calc(var(--space-80) - var(--border-width)) var(--space-120) var(--space-64);
  border-top: var(--border-width) solid var(--color-white);
  background: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 100%;
  max-width: var(--width-site);
  margin-inline: auto;
}

.site-footer__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.site-footer__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  width: var(--site-footer-card-width);
}

.site-footer__logo {
  position: relative;
  display: block;
  width: 100%;
  height: var(--site-footer-logo-mark);
}

.site-footer__logo-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--site-footer-logo-mark);
  height: var(--site-footer-logo-mark);
}

.site-footer__logo-type {
  position: absolute;
  top: var(--site-footer-logo-type-top);
  left: var(--site-footer-logo-type-left);
  width: var(--site-footer-logo-type-width);
  height: var(--site-footer-logo-type-height);
}

.site-footer__company {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  font-style: normal;
}

.site-footer__company p {
  margin: 0;
}

.site-footer__company a {
  color: inherit;
  text-decoration: none;
}

.site-footer__nav {
  display: flex;
  align-items: flex-start;
  gap: var(--space-64);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  width: var(--site-footer-col-width);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list--sub {
  gap: var(--space-10);
  width: var(--site-footer-col2-width);
}

.site-footer__list--external {
  gap: var(--space-10);
  width: auto;
}

.site-footer__list > li {
  display: flex;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-hover);
}

.site-footer__link:hover,
.site-footer__link:focus-visible,
.site-footer__company a:hover,
.site-footer__company a:focus-visible {
  opacity: var(--hover-dim);
}

.site-footer__company a {
  transition: opacity var(--duration-fast) var(--ease-hover);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 100%;
  padding-top: calc(var(--space-40) - var(--border-width)); /* Figma の線は高さに含まれない */
  border-top: var(--border-width) solid var(--color-white);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-double);
  text-align: right;
}

/* 1200px 以下：左右余白をメイン列に揃え、幅が足りなければ折り返す（ロゴ・会社情報 → メニュー）*/
@media (max-width: 1200px) {
  .site-footer {
    padding-inline: var(--space-24);
  }

  .site-footer__main {
    flex-wrap: wrap;
    gap: var(--space-40);
  }

  .site-footer__card {
    flex-shrink: 0;
    max-width: 100%;
  }

  .site-footer__nav {
    flex-wrap: wrap;
    gap: var(--space-40) var(--space-64);
  }
}

/* 767px 以下（SP）：ロゴをヘッダーのSPロゴと同じ大きさに（マーク 64px、比率は維持）
   ⚠ SPデザイン未確定のため仮の値。site-nav.css の --site-nav-logo-scale と揃えること */
@media (max-width: 767px) {
  .site-footer {
    --site-footer-logo-scale: calc(64 / 99.6768);
    --site-footer-logo-mark: calc(99.6768 / 16 * 1rem * var(--site-footer-logo-scale));
    --site-footer-logo-type-width: calc(137.412 / 16 * 1rem * var(--site-footer-logo-scale));
    --site-footer-logo-type-height: calc(75.1652 / 16 * 1rem * var(--site-footer-logo-scale));
    --site-footer-logo-type-left: calc(110.59 / 16 * 1rem * var(--site-footer-logo-scale));
    --site-footer-logo-type-top: calc(12.26 / 16 * 1rem * var(--site-footer-logo-scale));
  }
}