/*
 * 湯にぞなす.熱湯 共通フッター
 * どトップ(public_html/index.html)と EC-CUBE の /unote/(Block/footer.twig)の両方がこの1枚を読む。
 * 見た目はここだけで決める。HTML は index.html と footer.twig を同じ形に保つ。
 * EC-CUBE の Bootstrap の既定(a の下線・li の点など)に左右されないよう、文字まわりは全部ここで指定する。
 */
.site-footer {
  --site-footer-ink: #1f2524;
  --site-footer-red: #d94d35;
  --site-footer-teal: #1e716c;
  margin: 0;
  padding: 0;
  color: #fff;
  background: var(--site-footer-ink);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  text-align: left;
}
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-footer a, .site-footer a:hover { text-decoration: none; }
.site-footer__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px 40px; width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 40px; }

.site-footer__brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; line-height: 1; white-space: nowrap; }
.site-footer__brand:hover { color: #fff; }
.site-footer__mark { display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; }
.site-footer__mark svg { width: 100%; height: 100%; }
.site-footer__mark circle { fill: var(--site-footer-teal); }
.site-footer__mark path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer__brand strong { font-size: 20px; font-weight: 800; letter-spacing: -.06em; }
.site-footer__brand b { margin-left: 4px; color: var(--site-footer-red); font-weight: 900; }

.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 28px; margin: 0; padding: 0; }
.site-footer__nav a { color: rgba(255, 255, 255, .74); font-size: 13px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.site-footer__nav a:hover { color: #fff; }

.site-footer__copy { display: block; grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .48); font-size: 11px; letter-spacing: .04em; }

@media (max-width: 760px) {
  .site-footer__inner { grid-template-columns: 1fr; justify-items: center; width: min(100% - 30px, 1200px); padding: 44px 0 34px; text-align: center; }
  .site-footer__nav { justify-content: center; gap: 10px 18px; }
  .site-footer__nav a { font-size: 12px; }
  .site-footer__copy { width: 100%; text-align: center; }
}