/* ==========================================================
   トップページ「やりたいことから探す」の右にある、選んで探すメニュー
   JavaScript を使わず、<details> で開閉します
   ========================================================== */
.hm-purpose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.hm-purpose-head h2 { margin: 0; }

.hm-pick { position: relative; }

.hm-pick-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 16rem;
  padding: 9px 14px;
  border: 1px solid #cbd7e4;
  border-radius: 10px;
  background: #fff;
  color: #1f3352;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.hm-pick-button::-webkit-details-marker { display: none; }
.hm-pick-button:hover { border-color: #0a86c9; color: #0a86c9; }
.hm-pick[open] .hm-pick-button { border-color: #0a86c9; color: #0a86c9; }
.hm-pick-caret { color: #6b7a8d; font-size: 12px; }
.hm-pick[open] .hm-pick-caret { transform: rotate(180deg); }

.hm-pick-menu {
  position: absolute;
  right: 0;
  z-index: 20;
  width: min(23rem, calc(100vw - 32px));
  max-height: 22rem;
  overflow-y: auto;
  margin-top: 6px;
  padding: 10px 14px 12px;
  border: 1px solid #dde5ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 34, 63, 0.14);
}

.hm-pick-group + .hm-pick-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef3f8; }

.hm-pick-group-name {
  margin: 0 0 4px;
  color: #6b7a8d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hm-pick-group ul { list-style: none; margin: 0; padding: 0; }

.hm-pick-item {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: #1f3352;
  text-decoration: none;
  font-size: 14.5px;
}

.hm-pick-item:hover { background: #eaf5fd; color: #086a9f; }

.hm-pick-foot { margin: 10px 0 0; color: #6b7a8d; font-size: 12px; }

@media (max-width: 720px) {
  .hm-pick, .hm-pick-button { width: 100%; }
  .hm-pick-menu { right: auto; left: 0; width: 100%; }
}