@charset "UTF-8";

.sovereign-web-html .site-footer {
  background:
    radial-gradient(60% 120% at 85% -10%, rgba(107, 70, 193, 0.45) 0%, rgba(107, 70, 193, 0) 60%),
    linear-gradient(135deg, #0c1022 0%, #171e36 58%, #1f2a4d 100%);
  color: #7dcfff;
  padding: 34px 0;
  font-size: 14px;
}

.sovereign-web-html .site-footer .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.sovereign-web-html .site-footer a {
  color: #f0eef8;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
}

.sovereign-web-html .site-footer a:hover {
  text-decoration-line: underline;
  text-decoration-color: #fff;
}

/* 別タブで開く外部リンク(fixer.co.jp)の目印アイコン。リンク文字の右へ 4px の余白で置く。
   サイズは 1em にしてリンク文字(16px)に揃える。 */
.sovereign-web-html .site-footer-external-icon {
  width: 1em;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.15em;
}

.sovereign-web-html .site-footer-copyright {
  color: #fff;
  margin-top: 12px;
}

.sovereign-web-html .site-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.sovereign-web-html .site-footer-logo {
  width: clamp(6.5rem, 30vw, 8rem);
  height: auto;
}

/* 運営会社行。nav行とlegal行の間に置く。社名はリンクではないので、
   note / copyright と同じ #fff の地の文として出し、隣の「企業情報」だけ
   リンク色にする。区切り "|" は付けない（リンク同士の並びではないため）。
   上の間隔だけ他の行間(20px / 12px)より広くとり、サイトnavの続きではなく
   運営会社情報の始まりとして読ませる。 */
.sovereign-web-html .site-footer-company {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
  color: #fff;
}

.sovereign-web-html .site-footer-links {
  display: flex;
  flex-direction: column;
}

.sovereign-web-html .site-footer-nav,
.sovereign-web-html .site-footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.sovereign-web-html .site-footer-nav a,
.sovereign-web-html .site-footer-legal a {
  margin: 0;
  padding: 0;
  border: 0;
}

.sovereign-web-html .site-footer-legal {
  margin-top: 20px;
}

.sovereign-web-html .site-footer-legal a,
.sovereign-web-html .site-footer-note {
  font-size: 16px;
}

/* 社名は「誰が提供しているか」を伝える情報なので、周囲のリンク(16px)より
   一段大きく・太くして、リンクの並びから浮かせる。
   Noto Sans JP の weight 700 は import.css で読み込み済み。 */
.sovereign-web-html .site-footer-company-name {
  font-size: 18px;
  font-weight: 700;
}

.sovereign-web-html .site-footer-note {
  color: #fff;
  margin-top: 12px;
}

/* Tablet: nav links form the left column, legal links form the right
   column, paired row by row. No "|" divider at this width.
   運営会社行は2カラムの下に1行として置く。横並びの2カラムでは
   nav行とlegal行の「間」という位置が存在しないため。 */
@media (640px <= width < 1024px) {
  .sovereign-web-html .site-footer-links {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 28px;
    justify-content: start;
  }

  .sovereign-web-html .site-footer-nav,
  .sovereign-web-html .site-footer-legal {
    grid-row: 1;
    gap: 10px;
  }

  .sovereign-web-html .site-footer-nav {
    grid-column: 1;
  }

  .sovereign-web-html .site-footer-legal {
    grid-column: 2;
    margin-top: 0;
  }

  .sovereign-web-html .site-footer-company {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Desktop: footer nav/legal links fit on a single row, divided by "|".
   ロゴは1行目だけに置き、2行目以降の各行は nav行と同じ左位置（2列目）へ揃える。
   `.site-footer-meta` / `.site-footer-links` は display: contents で箱を消し、
   中の各行を直接この grid の item として配置する（どちらも自前のstyleを
   持たないので箱を消しても失うものがない）。
   列は [ロゴ幅 / 可変 / copyright幅] の3列。行間は各行のmargin-topで従来どおり。 */
@media (1024px <= width) {
  .sovereign-web-html .site-footer-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 32px;
    row-gap: 0;
  }

  .sovereign-web-html .site-footer-meta,
  .sovereign-web-html .site-footer-links {
    display: contents;
  }

  .sovereign-web-html .site-footer-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .sovereign-web-html .site-footer-nav {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .sovereign-web-html .site-footer-company {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .sovereign-web-html .site-footer-legal {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  /* 最終行は note を左、copyright を右端に置く。 */
  .sovereign-web-html .site-footer-note {
    grid-column: 2;
    grid-row: 4;
  }

  .sovereign-web-html .site-footer-copyright {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
  }

  .sovereign-web-html .site-footer-nav,
  .sovereign-web-html .site-footer-legal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

  .sovereign-web-html .site-footer-nav a + a,
  .sovereign-web-html .site-footer-legal a + a {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.45);
  }
}