/* ===============================
   ジモト人事リンクバナー CSS（安定スケール版）
   =============================== */

/* 外枠：角丸なし＋内側ライン（コンテナクエリ有効化） */
.jmj-link-wrap{
  display:inline-block; text-decoration:none;
  position:relative; overflow:hidden; background:#e9eef3;
  border:2px solid #fff; border-radius:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
  transform:translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  container-type: inline-size; /* ← 子要素のcqwスケールに使う */
}
.jmj-link-wrap:after{
  content:''; position:absolute; inset:8px;
  border:1.5px solid rgba(255,255,255,.92);
  pointer-events:none;
}

/* アスペクト比ボックス */
.jmj-link-inner{ display:block; position:relative; width:100%; height:0; overflow:hidden; }
.jmj-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  transition: transform .35s ease, filter .35s ease;
}

/* フェード */
.jmj-fade{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 40%, rgba(255,255,255,.9) 58%, rgba(255,255,255,0) 70%);
}

/* ロゴ：左寄せ＋サイズ最適化／白グロー継続 */
.jmj-content{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:flex-start;
  padding-left: clamp(8px, 2vw, 20px);
}
.jmj-logo{
  /* 大き過ぎ防止：少しだけ下げる（サイト全体の見え方に合わせる） */
  max-width:88%;
  height:auto; display:block;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 4px rgba(255,255,255,.98))
    drop-shadow(0 0 8px rgba(255,255,255,.90))
    drop-shadow(0 0 14px rgba(255,255,255,.75))
    drop-shadow(0 0 22px rgba(255,255,255,.60));
}

/* ===============================
   矢印：親円ごとスケール（cqw基準＋堅めの上下限）
   =============================== */
.jmj-arrow{
  position:absolute; top:50%;
  right: clamp(10px, 3cqw, 24px);     /* 右余白もコンテナ基準 */
  transform:translateY(-50%);
  /* 円のサイズ：最小36px〜最大60px。通常はコンテナ幅の6%前後で追従 */
  width:  clamp(36px, 6cqw, 60px);
  height: clamp(36px, 6cqw, 60px);
  aspect-ratio: 1 / 1;
  border-radius:50%;
  background:rgba(255,255,255,.75);
  display:grid; place-items:center;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  z-index:2;
}
.jmj-arrow:after{
  content:'';
  /* 円に対する相対（%）で中身の「>」サイズを決定 */
  width:30%; height:30%;
  /* 線の太さもコンテナ基準＋上下限で安定化 */
  border-right: clamp(2px, 0.45cqw, 4px) solid #6b7280;
  border-bottom: clamp(2px, 0.45cqw, 4px) solid #6b7280;
  transform:rotate(-45deg);
  margin-left:-8%;
}

/* cqw非対応ブラウザへのフォールバック（vw使用＋さらに低めの上限） */
@supports not (width: 1cqw){
  .jmj-arrow{
    right: clamp(10px, 2.5vw, 20px);
    width:  clamp(36px, 6.5vw, 56px);
    height: clamp(36px, 6.5vw, 56px);
  }
  .jmj-arrow:after{
    border-right: clamp(2px, 0.5vw, 4px) solid #6b7280;
    border-bottom: clamp(2px, 0.5vw, 4px) solid #6b7280;
  }
}

/* ホバー時の反応 */
.jmj-link-wrap:hover{
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06) inset;
  filter: brightness(1.03);
}
.jmj-link-wrap:hover .jmj-bg{
  transform: scale(1.04);
  filter: contrast(1.05) saturate(1.03);
}
.jmj-link-wrap:hover .jmj-arrow{
  transform: translateY(-50%) translateX(3%);
  background: #ffffffee;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

/* 一覧レイアウト */
.jmj-grid{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }

/* スマホ最適化（ロゴ上限を少し緩め） */
@media (max-width:480px){
  .jmj-logo{ max-width:92%; }
}

/* アニメ無効環境対応 */
@media (prefers-reduced-motion: reduce){
  .jmj-link-wrap, .jmj-bg, .jmj-arrow{ transition:none !important; }
}