/* ==========================================================================
   フッターの作り直し（2026-10-20・全ページ）
   --------------------------------------------------------------------------
   オーナー「フッターのサイトマップももう少し考えて欲しい」。
   手本 6 社を Windows で実測した結果（scratchpad/site/winref/比較表.md）:
     ・地は 6 社とも単色。濃い単色が 3 社（Goodpatch rgb(41,53,64) / レバレジーズ rgb(31,49,52) / SmartHR rgb(29,28,27)）
     ・Goodpatch はフッターの手前に青い Contact の帯、LayerX はフッターの頭に Contact
     ・スマホでは縦に積む（開閉は SmartHR だけ）
   ここでは:
     ・手前の帯 .foot-cta … 薄い青の地に、資料／お問い合わせの 2 枚。お問い合わせを紺で主にする
     ・本体 .footer--v2 … 紺の単色（#001f45 = --color-oki-red2）。左にロゴと所在地、右に 4 列
   色はサイトの紺 2 色と白だけ。グラデーションの面は使わない（手本どおり）。
   ========================================================================== */

/* ── 手前の帯 ─────────────────────────────────────────────────────────── */
.foot-cta {
  --u: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  position: relative;
  overflow: hidden;
  /* 直前の「関連するページ」が薄い青なので、帯はサイトの紺（本体の #001f45 より 1 段明るい）にして段を分ける */
  background-color: var(--color-oki-red);
  color: #fff;
  padding: calc(56 * var(--u)) 0;
}
/* 帯の右端に、Remind のマークの影を 1 つ（ページの背景の C 案と同じ形・白で薄く） */
.foot-cta::before {
  content: "";
  position: absolute;
  right: -80px;
  top: 50%;
  width: min(36vw, 520px);
  height: min(39vw, 560px);
  transform: translateY(-50%) rotate(-8deg);
  background-color: rgba(255, 255, 255, .08);
  -webkit-mask: url("../images/mark-hd.png") center / contain no-repeat;
          mask: url("../images/mark-hd.png") center / contain no-repeat;
  pointer-events: none;
}
.foot-cta__in { position: relative; display: grid; gap: calc(28 * var(--u)); }
.foot-cta__en {
  margin: 0;
  color: #9fd6cb;
  font-family: "Figtree", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: calc(15 * var(--u));
}
.foot-cta__h {
  margin: calc(8 * var(--u)) 0 0;
  color: #fff;
  font-weight: 800;
  font-size: calc(24 * var(--u));
  line-height: 1.45;
  letter-spacing: .02em;
}
.foot-cta__tel { margin: calc(14 * var(--u)) 0 0; color: rgba(255,255,255,.75); font-size: calc(14 * var(--u)); }
.foot-cta__tel a { color: #fff; font-weight: 700; text-decoration: none; }
.foot-cta__cards { display: grid; gap: calc(14 * var(--u)); }
.foot-cta__card {
  position: relative;
  display: grid;
  gap: calc(8 * var(--u));
  padding: calc(24 * var(--u)) calc(56 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
  border-radius: calc(10 * var(--u));
  background-color: #fff;
  color: var(--color-oki-black);
  text-decoration: none;
  box-shadow: 0 4px 40px rgba(0, 0, 0, .06);
  transition: background-color .3s cubic-bezier(.43,.05,.17,1);
}
.foot-cta__card[data-primary] { background-color: #1d7e6e; color: #fff; }
.foot-cta__k { font-weight: 800; font-size: calc(19 * var(--u)); line-height: 1.4; }
.foot-cta__t { font-size: calc(13 * var(--u)); line-height: 1.75; opacity: .85; }
.foot-cta__go {
  position: absolute;
  right: calc(22 * var(--u));
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  margin-top: calc(-18 * var(--u));
  border-radius: 50%;
  background-color: var(--color-oki-red);
  color: #fff;
}
.foot-cta__card[data-primary] .foot-cta__go { background-color: #fff; color: #1d7e6e; }
.foot-cta__go svg { transition: transform .3s cubic-bezier(.43,.05,.17,1); }
.foot-cta__card:hover .foot-cta__go svg { transform: translateX(3px); }
.foot-cta__card:hover { background-color: #f6f9fc; }
.foot-cta__card[data-primary]:hover { background-color: #186b5d; }

/* ── 本体 ─────────────────────────────────────────────────────────────── */
.footer.footer--v2 {
  --u: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  position: relative;
  top: auto;
  padding: calc(56 * var(--u)) 0 calc(24 * var(--u));
  background-color: var(--color-oki-red2);
  color: #fff;
}
.footer--v2 a { color: inherit; text-decoration: none; }
.footer--v2 .footer__main { display: grid; gap: calc(40 * var(--u)); }
.footer--v2 .footer__logo img { display: block; width: calc(137 * var(--u)); height: auto; }
.footer--v2 .footer__copy { margin: calc(22 * var(--u)) 0 0; font-weight: 800; font-size: calc(20 * var(--u)); line-height: 1.5; letter-spacing: .02em; }
.footer--v2 .footer__addr { margin: calc(20 * var(--u)) 0 0; color: rgba(255,255,255,.72); font-size: calc(13 * var(--u)); line-height: 1.8; }
.footer--v2 .footer__tel { margin: calc(4 * var(--u)) 0 0; font-weight: 700; font-size: calc(14 * var(--u)); }
.footer--v2 .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)) calc(20 * var(--u)); }
.footer--v2 .footer__h {
  margin: 0 0 calc(12 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid rgba(255,255,255,.22);
  font-weight: 700;
  font-size: calc(14 * var(--u));
  letter-spacing: .04em;
}
.footer--v2 .footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(2 * var(--u)); }
.footer--v2 .footer__col a {
  display: inline-block;
  padding: calc(5 * var(--u)) 0;
  color: rgba(255,255,255,.8);
  font-size: calc(13 * var(--u));
  line-height: 1.6;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .3s cubic-bezier(.43,.05,.17,1), color .3s;
}
.footer--v2 .footer__col a:hover { color: #fff; background-size: 100% 1px; }
.footer--v2 .footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u)) calc(24 * var(--u));
  margin-top: calc(44 * var(--u));
  padding-top: calc(18 * var(--u));
  border-top: 1px solid rgba(255,255,255,.18);
}
.footer--v2 .footer__legal { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(22 * var(--u)); margin: 0; padding: 0; list-style: none; }
.footer--v2 .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255,255,255,.72); font-size: calc(12 * var(--u)); }
.footer--v2 .footer__legal a:hover { color: #fff; }
.footer--v2 .footer__cr { margin: 0; color: rgba(255,255,255,.6); font-size: calc(12 * var(--u)); }
/* ページの先頭へ戻るボタンは、旧フッターと同じ JS（data-scroll-top）で出し入れする */
.footer--v2 .footer__bottom .button {
  position: absolute;
  right: 0;
  top: calc(-96 * var(--u));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  appearance: none;
  background-color: #fff;
  color: var(--color-oki-red2);
  cursor: pointer;
}
.footer--v2 .footer__bottom .button svg { width: 16px; height: 16px; }
.footer--v2 .footer__bottom .button[data-visible="false"] { opacity: 0; pointer-events: none; }

@media (min-width: 1024px) {
  .foot-cta { padding: calc(72 * var(--u)) 0; }
  .foot-cta__in { grid-template-columns: 1fr 1.25fr; align-items: center; gap: calc(48 * var(--u)); }
  .foot-cta__h { font-size: calc(30 * var(--u)); }
  .foot-cta__cards { grid-template-columns: 1fr 1fr; }
  .foot-cta__card { min-height: calc(150 * var(--u)); align-content: start; }

  .footer.footer--v2 { padding: calc(72 * var(--u)) 0 calc(28 * var(--u)); }
  .footer--v2 .footer__main { grid-template-columns: calc(var(--column-unit) * 12) 1fr; gap: calc(var(--column-unit) * 2); }
  .footer--v2 .footer__cols { grid-template-columns: repeat(4, 1fr); gap: calc(28 * var(--u)); }
  .footer--v2 .footer__copy { font-size: calc(22 * var(--u)); }
}