/**
 * フッター：左に白抜きのロゴと運営会社、右にフッターメニュー
 */

.site-footer {
  padding: 40px var(--sh-gutter) 48px;
  border-top: 1px solid var(--sh-line-dark); /* 問い合わせの帯との境目 */
  background: var(--sh-black);
  color: #fff;
}

.site-footer .region--footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px 48px;
}

.block--footer-branding {
  grid-column: 1;
}

.block--footer-contact {
  grid-column: 1;
  color: var(--sh-muted-on-dark);
  font-size: 13px;
}

.block--footer-contact p {
  margin: 0;
}

/* ブランドの一文は会社概要へのリンク。まわりの文字と同じ色で、マウスを乗せると白く下線 */
.block--footer-contact a {
  color: inherit;
  text-decoration: none;
}

.block--footer-contact a:hover,
.block--footer-contact a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.block--footer-menu {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.site-footer ul:not(.site-nav__sub) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
}

.site-footer a {
  text-decoration: none;
}

/* 今いる場所（そのページか、その下のページ）。ヘッダーと同じ目印。templates/navigation/menu--main.html.twig
   黒い背景の上なので、ヘッダーの赤茶（#B4502E、黒との差 3.9:1）ではなく、明るい赤茶にする（7.0:1） */
.block--footer-menu :is(a, .site-nav__label).is-active-trail {
  color: #e08a6a;
}

/* ナビはヘッダーと同じメニュー（2026-10-08）。「セキュリティ診断」は ▼ で4つの診断の小さいリストを開く。
   形はヘッダー（header.css の .site-nav__…）のまま。フッターはページの一番下なので、パネルは上に向かって開く */
@media (min-width: 768px) {
  .block--footer-menu .site-nav__item--has-sub::after {
    top: auto;
    bottom: 100%;
  }

  .block--footer-menu .site-nav__sub {
    top: auto;
    bottom: calc(100% + 12px);
    left: -24px;
    border-top: 1px solid var(--sh-line-header);
    border-bottom: 2px solid var(--sh-accent);
  }

  /* 白いパネルの中は、ほかと同じ赤茶 */
  .block--footer-menu .site-nav__sub a.is-active-trail {
    color: var(--sh-accent);
  }
}

/* 一番下の小さいリンク（情報セキュリティ基本方針・プライバシーポリシー）と、ログインしている人だけに出るメニュー */
.site-footer .region--footer-bottom {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--sh-line-dark);
}

.site-footer .region--footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.site-footer .region--footer-bottom ul {
  color: var(--sh-muted-on-dark);
  font-size: 12px;
  font-weight: 400;
}

/* 1279px 以下は、メニュー（ヘッダーと同じ長い名前。2026-10-08）が横に入りきらないので、ロゴと運営会社の下に回す */
@media (max-width: 1279px) {
  .site-footer .region--footer {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .block--footer-menu {
    grid-row: auto;
    grid-column: 1;
    margin-top: 20px;
  }
}

/* タブレット：ヘッダーと同じく、6つを1行に収めるため、文字と間を少し小さく */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer .block--footer-menu > ul {
    gap: 12px 16px;
    font-size: 13px;
  }
}

/* スマホ：ロゴ → メニュー（縦1列） → 運営会社 の順 */
@media (max-width: 767px) {
  .site-footer {
    padding: 32px 20px 40px;
  }

  .site-footer .region--footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .site-footer .site-logo img {
    height: 24px;
  }

  .block--footer-menu {
    order: 2;
    margin-top: 0;
  }

  .block--footer-contact {
    order: 3;
    font-size: 12px;
  }

  /* ヘッダーのハンバーガーの中と同じ縦1列。セキュリティ診断の ▼ を押すと、その下に4つの診断が字下げして開く
     （形は header.css のスマホの .site-nav__…） */
  .site-footer .block--footer-menu > ul {
    flex-direction: column;
    gap: 0;
  }

  .block--footer-menu > ul > li > a,
  .block--footer-menu .site-nav__label {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--sh-line-dark);
  }

  .block--footer-menu .site-nav__sub a {
    border-bottom: 1px solid var(--sh-line-dark);
  }
}