@charset "UTF-8";

/* ========================================
   footer.css
   共通フッターのスタイル
   Figma: 教育制度ページ内 Component / Footer (54:26163, 1920px設計) /
          Component / Footer Mobile 640px (54:36955)
   ・黄帯(#fde268)の上角丸カード。帯の上 40px は透過で、
     ページ側の背景(通常 #fffdf4)がそのまま見える。
   ・寸法は clamp(最小, vw(=px/19.2), Figma実寸) の流体スケール。
   ・767px 以下はスマホ設計(640px)へ切替。
======================================== */

.l-footer {
  position: relative;
  width: 100%;
  /* 旧: background-color: var(--color-secondary)(黒)。
     デザイン確定に伴い黄帯カード方式へ変更(帯の外は透過) */
  background: transparent;
  color: var(--color-text);
  /* 帯の上に露出する余白(Figma 40px)。TOP ボタンはこの領域に跨る */
  padding-top: clamp(20px, 2.084vw, 40px);
}

/* ---- 黄帯本体 ---- */
.l-footer-band {
  background-color: #fde268;
  border-radius: clamp(48px, 6.25vw, 120px) clamp(48px, 6.25vw, 120px) 0 0;
  /* Figma: 帯上端(40)→ロゴ上端(140) = 100px */
  padding: clamp(48px, 5.21vw, 100px) 0 clamp(20px, 1.35vw, 26px);
}
.l-footer-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3.13vw, 60px);
  width: min(1606px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---- 左カラム(ロゴ + ENTRY) ---- */
.l-footer-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3.7vw, 71px);          /* Figma: ロゴ下端(272)→ENTRY(277)…約71px(recruit site 分含む) */
}
.l-footer-logo {
  display: block;
  line-height: 0;
}
.l-footer-logo img {
  width: clamp(220px, 23.25vw, 446px);    /* Figma 446px(recruit site 表記込みのロゴ画像) */
  height: auto;
}
.l-footer-entry {
  display: block;
  line-height: 0;
  transition: opacity 0.2s;
}
.l-footer-entry:hover {
  opacity: 0.8;
}
.l-footer-entry img {
  width: clamp(150px, 13.85vw, 266px);    /* Figma 266px */
  height: auto;
}

/* ---- ナビ(4カテゴリ) ---- */
.l-footer-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.2vw, 23px);          /* カテゴリ間(Figma: 群間おおよそ 20〜25px) */
}
.l-footer-group {
  display: grid;
  grid-template-columns: clamp(120px, 10.16vw, 195px) 1fr;  /* Figma: 見出し664→リンク859 = 195px */
  align-items: start;
  column-gap: 0;
}
.l-footer-group-title {
  margin: 0;
  color: #212121;
  font-size: clamp(1.8rem, 1.82vw, 3.5rem);   /* Figma 35px */
  letter-spacing: 0.05em;
  line-height: 1.6;
}
.l-footer-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* Figma: 2列(859 / 1233) */
  gap: clamp(8px, 0.78vw, 15px) clamp(12px, 1.56vw, 30px);
  margin: 0;
  padding: clamp(4px, 0.52vw, 10px) 0 0;              /* 見出しとの天地合わせ */
  list-style: none;
}
/* 「北モの営業をもっと知る」は長いので1行全幅 */
.l-footer-menu-item--wide {
  grid-column: 1 / -1;
}
.l-footer-menu-link {
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(6px, 0.52vw, 10px);
  color: #212121;
  font-size: clamp(1.4rem, 1.303vw, 2.5rem);  /* Figma 25px */
  line-height: 1.35;
  text-decoration: none;
}
.l-footer-menu-link:hover {
  text-decoration: underline;
}

/* ★2026-08-17 D-1: 現在地の印（跡田さん選択＝案②「文字を赤に」）。
   ホバーは下線なので、色の変化とは見分けが付く */
.l-footer-menu-link.is-current {
  color: #E7352B;
}
/* 赤丸▶アイコン(支給画像 footer-button.png) */
.l-footer-menu-link::before {
  content: "";
  flex-shrink: 0;
  width: clamp(22px, 2.084vw, 40px);          /* Figma 40px */
  height: clamp(22px, 2.084vw, 40px);
  margin-top: -0.1em;
  background: url("../../images/common/footer-button.webp") no-repeat center / contain;
}

/* ---- コピーライト ---- */
.l-footer-copy {
  margin: clamp(24px, 2.6vw, 50px) 0 0;
  color: #212121;
  /* ★2026-08-07 C-6: 下限 1rem(10px)→1.2rem(12px)。1440pxでも11.3pxまで下がっていた（跡田さん判断）*/
  font-size: clamp(1.2rem, 0.782vw, 1.5rem);  /* Figma 15px */
  text-align: center;
}

/* ---- TOP(ページ上部へ)。黄帯の上端に跨る ---- */
.l-footer-top {
  position: absolute;
  top: 0;
  right: clamp(24px, 9.84vw, 189px);          /* Figma: x1621(帯右端から約190px) */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
/* 白い上向き矢印(黒フチ)。Figma 矢印(80×149)の SVG を data-URI で描画 */
.l-footer-top-arrow {
  display: block;
  width: clamp(40px, 4.17vw, 80px);
  aspect-ratio: 80 / 149;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 149"><path d="M78 71.2188H51.6172V147H29.2344V71.2188H2L40 4.2L78 71.2188Z" fill="white" stroke="%23212121" stroke-width="2"/></svg>') no-repeat center / 100% 100%;
}
.l-footer-top-label {
  margin-top: clamp(2px, 0.2vw, 4px);
  color: #fff;
  font-family: var(--font-family-en);
  font-size: clamp(2rem, 2.6vw, 5rem);        /* Figma 50px */
  letter-spacing: 0.05em;
  line-height: 1;
}
.l-footer-top:hover .l-footer-top-arrow {
  transform: translateY(-4px);
}

/* ============================================================
   レスポンシブ
============================================================ */
/* 中間幅: ナビが窮屈になったら縦積み(ロゴ列を上へ) */
@media (max-width: 1024px) {
  .l-footer-inner {
    flex-direction: column;
    align-items: center;
  }
  .l-footer-left {
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 4vw, 40px);
  }
  .l-footer-nav {
    width: 100%;
    max-width: 640px;
  }
}
/* スマホ(Figma 640px設計) */
@media (max-width: 767px) {
  .l-footer {
    padding-top: 36px;                        /* Figma 36.5px */
  }
  .l-footer-band {
    border-radius: min(12.5vw, 80px) min(12.5vw, 80px) 0 0;  /* Figma 80px@640 */
    padding: 36px 0 20px;                     /* 帯上端→ロゴ = 約36px */
  }
  .l-footer-inner {
    width: calc(100% - 40px);
    gap: 28px;
  }
  .l-footer-left {
    flex-direction: column;
    gap: 20px;                                /* Figma: ロゴ(109)→ENTRY(147) */
  }
  /* ★2026-08-03 寸法体系を公式コンポーネント(54:34895/54:34573)の実測値に全面刷新。
     旧値は「教育制度ページ内の旧コンポーネント(54:36955)」基準で、文字・アイコンが小さく
     行間が詰まり、公式と並べると別物に見えていた(跡田さん指摘) */
  .l-footer-logo img {
    width: min(258px, 68.8vw);                /* 公式375実測258px */
  }
  .l-footer-entry img {
    width: 155px;                             /* 公式375実測: 赤部148+縁 ≒155px */
  }
  .l-footer-nav {
    gap: 14px;
  }
  .l-footer-group {
    grid-template-columns: 1fr;               /* 見出しの下にリンクを積む */
    row-gap: 10px;
  }
  .l-footer-group-title {
    font-size: 2.1rem;                        /* 公式実測 約21px */
  }
  .l-footer-menu {
    /* 640帯は公式54:34573準拠の2カラム。375帯(≤480px)の1カラム化は下のブロックで */
    /* ★2026-08-14 E-4: 行の空き 16→18px。下の ::after で押せる範囲を上下に11.5px広げるため、
       リンクどうしが重ならないだけの空き(23px以上)を確保する。見た目の間隔は2px広がるだけ */
    gap: 18px 18px;                           /* 公式実測: 行ピッチ38-40px相当 */
  }
  .l-footer-menu-link {
    position: relative;                       /* ★2026-08-14 E-4: ::after の基準 */
    font-size: 1.5rem;                        /* 公式実測 約15px */
    line-height: 1.4;
  }
  /* ★2026-08-14 E-4: 指で押せる範囲を44pxに広げる(跡田さん選択)。
     文字の高さは21pxしかなく、指で押す目安の44pxを大きく下回っていた。
     文字を大きくしたり余白を足すと公式の寸法から外れるため、
     「見た目は変えずに当たり判定だけ広げる」方法をとる。
     上下11.5px張り出して 21+23=44px。行の空きは18+leading≒24pxあるので隣とは重ならない */
  .l-footer-menu-link::after {
    content: "";
    position: absolute;
    top: -11.5px;
    right: 0;
    bottom: -11.5px;
    left: 0;
  }
  .l-footer-menu-link::before {
    width: 20px;                              /* 公式実測 約20px */
    height: 20px;
  }
  .l-footer-copy {
    margin-top: 28px;
    font-size: 1.2rem;                        /* ★2026-08-07 C-6: 10→12px */
  }
  .l-footer-top {
    right: 24px;                              /* Figma: x535@640 */
  }
  .l-footer-top-arrow {
    width: 28px;                              /* Figma 27px@640 */
  }
  .l-footer-top-label {
    font-size: 1.6rem;                        /* Figma 23px@640 → 視認性優先で少し小さめ */
  }
}

/* ★2026-08-02 狭幅スマホ: Figma公式 Footer Mobile 375(54:34895)準拠。
   リンクは1カラム縦積み。「環境を知る」のみ短い項目を2列
   (1件目「北モの営業をもっと知る」は --wide で全幅のまま)。
   ★2026-08-03 ナビに公式実測の左インセットを追加(公式375: 見出し左=画面から64px。
   inner の左20pxに +44px。旧は左端に張り付いていた)。長いリンクは公式同様2行に自然折返し */
@media (max-width: 480px) {
  .l-footer-nav {
    padding-left: 44px;
    box-sizing: border-box;
  }
  .l-footer-menu {
    grid-template-columns: 1fr;
  }
  .l-footer-menu--env {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  /* 長いリンクの折返し位置を公式に一致(「テクニカルアドバイザー・」の後で折る) */
  .l-footer-menu-item--wide .l-footer-menu-link {
    max-width: calc(12em + 28px);   /* アイコン20+gap8 + 12文字 */
  }
}
/* ============================================================
   非表示にしたページを「押せないグレー表示」で残す場合の見た目
   （★2026-08-30 コンソールの表示/非表示。mode が gray のとき）

   ヘッダー(PCナビ・SPドロワー)とフッターで共通に使う。
   header.css より後に読まれるこのファイルに置いているのは、
   リンクの指定と詳細度が並んだ時にこちらを勝たせるため。

   リンクではなく span で出しているので押しても遷移しない。
   pointer-events を切っているのはホバーの見た目を出さないため。
============================================================ */
.is-nav-off {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}