/* トップのヒーロー: カード全体を押せるようにする(main.css とは分けて置く)
   - .hero-link はカードに重ねた透明なリンク(行き先はプロフィール)
   - 予約ボタンと「プロフィールを見る」は上に重ねて、今まで通り押せる
   - 枠線・押したときの沈み・右上の矢印で「押せる物」に見せる */
.hero-card{position:relative}
.hero-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.hero-link::after{
  content:'→';position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  background:rgba(18,17,16,.62);color:var(--gold);font-size:16px;line-height:34px;text-align:center;
  border:1px solid rgba(214,192,143,.35);transition:background .2s,transform .2s;
}
.hero-cta-desktop,.hero-more{position:relative;z-index:2}

/* スマホ〜タブレット: 写真と文字をひとつの枠に収める */
@media (max-width:1023px){
  .hero-card{
    border:1px solid var(--line-soft);border-radius:22px;padding:6px 6px 18px;background:var(--card);
    transition:transform .15s,border-color .2s;
  }
  .hero-card:active{transform:scale(.985);border-color:var(--gold-deep)}
  .hero-photo{border-radius:17px}
  .hero-info{padding:16px 10px 0}
  .hero-link::after{top:18px;right:18px}
}

/* PC: 大きいカードは押すと開く。小さいカードは今まで通り、押すと大きく入れ替わる */
@media (min-width:1024px){
  .hero-slide:not(.is-main) .hero-link{display:none}
  .hero-slide.is-main .hero-card{cursor:pointer}
  .hero-slide.is-main .hero-photo img{transition:transform .35s}
  .hero-slide.is-main .hero-card:hover .hero-photo img{transform:scale(1.02)}
  .hero-slide.is-main .hero-card:hover .hero-link::after{background:var(--gold);color:var(--gold-ink)}
  /* 写真は右の列なので、矢印は写真の角に合わせる */
  .hero-slide.is-main .hero-link::after{top:14px;right:14px}
}