/* h1直後に出すキープボタン */

.hw-keepwrap{
  margin:8px 0 16px;
}

.hw-keepbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border:1px solid #dcdcdc;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-weight:700;
  white-space:nowrap;
}

.hw-keepbtn[aria-pressed="true"]{
  background:#fff6e5;
  border-color:#f0b400;
  color:#b87600;
}

.hw-favgrid{
  display:grid;
  grid-template-columns: 1fr;  /* 縦並び */
  gap:14px;
  margin-top:16px;
}
.hw-favcard{
  border:1px solid #e7e7e7;
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.hw-favcard__title{
  display:block;
  font-weight:700;
  text-decoration:none;
}
.hw-favcard__sub{
  margin-top:4px;
  font-size:12px;
  color:#666;
}

/* =========================
   キープUI（プロっぽく）
   ========================= */

.hw-keepwrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;                 /* スマホで折り返し */
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* キープボタン本体 */
.hw-keepbtn{
  appearance:none;
  border:1px solid rgba(0,0,0,.14);
  border-radius:10px;
  padding:9px 14px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  background:#fff;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.hw-keepbtn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.22);
}

.hw-keepbtn:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.hw-keepbtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,115,170,.18), 0 10px 22px rgba(0,0,0,.10);
}

/* ★ キープ済み状態（aria-pressed="true" を利用） */
.hw-keepbtn[aria-pressed="true"]{
  background:linear-gradient(180deg, rgba(255,215,0,.22), rgba(255,215,0,.06));
  border-color:rgba(255,193,7,.45);
}

/* 「キープした求人を見る」リンクをチップ化 */
.hw-keep-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
  text-decoration:none;           /* 下線やめてプロっぽく */
  font-size:13px;
  font-weight:600;
  color:inherit;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}

/* 先頭にアイコン（CSSだけで追加） */
.hw-keep-link::before{
  content:"🔖";
  font-size:14px;
  line-height:1;
}

.hw-keep-link:hover{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.18);
  transform:translateY(-1px);
}

.hw-keep-link:active{
  transform:translateY(0);
}

/* タイトル下／応募下で余白を少し統一したい場合 */
.hw-keepwrap--title{ margin:10px 0 18px !important; }
.hw-keepwrap--apply{ margin:18px 0 10px !important; }

/* スマホでも横並びを強制（最優先で当てる） */
@media (max-width: 480px){
  .hw-keepwrap{
    flex-wrap: nowrap !important;      /* 折り返し禁止 */
    gap: 8px !important;
  }

  .hw-keepwrap .hw-keepbtn{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .hw-keepwrap .hw-keep-link{
    flex: 0 1 auto;                    /* 伸び縮み許可 */
    display: inline-flex !important;    /* block化を潰す */
    width: auto !important;            /* 100%指定を潰す */
    white-space: nowrap;               /* テキスト折り返し禁止 */
    justify-content: center;
  }

  /* どうしても幅が足りない時は文字を少しだけ小さく */
  .hw-keepwrap .hw-keepbtn,
  .hw-keepwrap .hw-keep-link{
    font-size: 12px;
  }
}