/* トップのヒーローをスマホで一回り小さくする(2026-11-10)
   - 写真の縦横比(4:5)は変えず、カードの横幅を 86% → 78% に細くして高さも縮める
   - 下の予約バーが出ていても、カード全体(出勤時間・新人割・デビュー日数)が1画面に収まるように
   - 「プロフィールを見る →」はカード全体が押せるので見た目だけ消す(読み上げには残す)
   - サイト設定「スマホのヒーローの大きさ」で出し分ける(inc/options.php rbc_hero_compact) */
@media (max-width:767px){
  /* 横だけに動かす。縦にはみ出す物があっても、指で触ったときに枠が上下に揺れないように */
  .hero-track{overflow-y:hidden}
  /* 見出し(H1)の下の小さい文字は「店名」と「場所・出張」で行を分ける(途中の変な折り返しを防ぐ) */
  .hero-h1{padding-top:18px}
  .hero-h1 small{margin-top:3px}
  .hero-h1 .h1-l{display:block}
  .hero-h1 .h1-sep{display:none}
  .hero-h1 + .hero-eyebrow{padding-top:12px}
  .hero-slide{min-width:78%}
  /* 最後の1枚も同じカード幅にそろえる(main.css では 100%) */
  .hero-slide:last-child{min-width:calc(78% + var(--gutter) - 10px)}
  .hero-card{padding-bottom:14px}
  .hero-info{padding:12px 8px 0}
  .hero-name{font-size:26px}
  .hero-copy{font-size:14px;margin-top:4px}
  .hero-card .chips{margin-top:10px;gap:6px}
  .hero-card .chip{font-size:11px;padding:5px 11px}
  /* 見た目だけ消す。カードの左上に置き、カードの外(下)へはみ出さないようにする */
  .hero-more{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}