/* ===========================================================
   [prototype] hero-mini 親カテゴリラベル
   - 下層ページのヒーロー h1 の上に「LOGISTICS 物流」等の親カテゴリを pill 表示
   - 「今どの親カテゴリの中にいるか」を大タイトルより上位で明示
   - 親カテゴリのトップページ (business-logistics.html) 自体には配置しない
   =========================================================== */

.hero-mini .parent-cat{
  display:inline-flex;align-items:center;
  gap:0;
  padding:9px 20px;
  border-radius:999px;
  background:var(--green-l);
  text-decoration:none;
  margin-bottom:20px;
  transition:transform .15s ease, background .15s ease;
}
.hero-mini .parent-cat:hover{
  background:var(--green);
  transform:translateY(-1px);
}
.hero-mini .parent-cat-en{
  font-family:"Bebas Neue","Anton",sans-serif;font-weight:400;
  font-size:20px;letter-spacing:.06em;line-height:1;
  color:var(--green-d);
  text-transform:uppercase;
  transition:color .15s ease;
}
.hero-mini .parent-cat-ja{
  font-family:"Noto Sans JP",sans-serif;font-weight:900;
  font-size:13px;letter-spacing:.02em;line-height:1;
  color:var(--ink);
  padding-left:12px;margin-left:12px;
  border-left:1px solid rgba(20,72,35,.22);
  transition:color .15s ease, border-color .15s ease;
}
.hero-mini .parent-cat:hover .parent-cat-en,
.hero-mini .parent-cat:hover .parent-cat-ja{color:#fff}
.hero-mini .parent-cat:hover .parent-cat-ja{border-color:rgba(255,255,255,.4)}

/* is-centered ヒーロー内では中央配置 */
.hero-mini.is-centered .inner{display:flex;flex-direction:column;align-items:center}
.hero-mini.is-centered .parent-cat{align-self:center}

@media (max-width:820px){
  .hero-mini .parent-cat{
    padding:7px 16px;margin-bottom:14px;
  }
  .hero-mini .parent-cat-en{font-size:17px}
  .hero-mini .parent-cat-ja{
    font-size:12px;
    padding-left:10px;margin-left:10px;
  }
}