:root {
  --blue:        #005AAB;
  --blue-dark:   #368AD5;
  --blue-deeper: #003F78;
  --white:       #ffffff;
  --transition:  0.18s ease;
  --sans: "Gen Interface JP", Helvetica, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

@font-face { font-family: "Gen Interface JP"; src: url("/fonts/gen-interface-jp/GenInterfaceJP-Regular.woff2") format("woff2"), local("Gen Interface JP"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gen Interface JP-Bold"; src: url("/fonts/gen-interface-jp/GenInterfaceJP-Bold.woff2") format("woff2"), local("Gen Interface JP-Bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "LINE Seed JP"; src: url("/fonts/line-seed-jp/LINESeedJP-Regular.woff2") format("woff2"), local("LINE Seed JP"); font-weight: 400; font-display: swap; }

a { text-decoration: none; color: inherit; }

html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

.footer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px; padding: 120px 0 40px;
  background-color: var(--blue);
  color: rgba(255,255,255,0.92);
}
.footer .inner { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 40px; }
.footer__body { display: flex; flex-direction: column; gap: 120px; width: 100%; }
.footer__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px; width: 100%; }

.footer-logo { display: inline-flex; flex-direction: row; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.footer-logo-mark {
  width: 87.5px; height: 56px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}
.footer-logo-text { font-family: var(--sans); font-weight: 700; font-size: 24px; color: #fff; line-height: 1.8; }

.footer-nav-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; }
.footer-nav-col { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-nav-col__title { font-family: var(--sans); font-weight: 400; font-size: 18px; color: #fff; line-height: 1.8; white-space: nowrap; }
.footer-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.footer-nav-item { display: flex; align-items: flex-start; }
.footer-nav-item__bullet { font-family: "LINE Seed JP", var(--sans); font-size: 16px; color: #fff; line-height: 1.8; }
.footer-nav-item a { font-family: var(--sans); font-weight: 400; font-size: 16px; color: #fff; line-height: 1.8; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; transition: opacity var(--transition); }
.footer-nav-item a:hover { opacity: 0.75; }
.footer-nav-item__external-icon { font-size: 14px; color: #fff; }

.footer__copy-row { display: inline-flex; align-items: flex-start; justify-content: center; width: 100%; }
.footer-copy { font-family: var(--sans); font-weight: 400; font-size: 16px; color: #fff; text-align: center; }

@media (max-width: 768px) {
  .footer { padding: 56px 20px 24px; gap: 32px; }
  .footer .inner { padding: 0; }
  .footer__body { gap: 32px; }
  .footer__row:first-child { flex-direction: column; align-items: center; text-align: center; gap: 24px; width: 100%; }
  .footer-logo { flex-direction: column; align-items: center; gap: 12px; }
  .footer-nav-cols { flex-wrap: wrap; gap: 24px 72px; width: 100%; text-align: left; }
  .footer-copy { font-size: 12px; }
}