/* 12タイプ共通のモチーフキャラクター表示
   ― 五行の漢字（orb）を主役にし、背景透過したマスコットを
     漢字に重ならない右下に小さく浮かせるアクセントとして添える。 */

/* ============ 一覧カード ============ */
.card .type-mark{
  position:relative;width:88px;height:88px;margin:0 auto 18px;
}
/* 漢字オーブが主役（中央・通常サイズ） */
.card .type-mark .orb{
  position:relative;z-index:1;width:88px;height:88px;min-height:0;margin:0;font-size:46px;
}
/* マスコットは透過素材を右下に浮かせる（白フチなし） */
.card .type-mark .card-mascot{
  position:absolute;z-index:2;right:-16px;bottom:-14px;width:58px;height:58px;margin:0;
  border:0;background:none;border-radius:0;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.28));
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-mascot{transform:translateY(-3px) rotate(3deg) scale(1.06)}

/* ============ 詳細ページのヒーロー ============ */
.hero-grid .detail-type-mark{
  position:relative;width:200px;height:200px;
  display:grid;place-items:center;flex-shrink:0;
  animation:float 6s ease-in-out infinite;
}
/* 漢字オーブが主役（200px のまま中央に） */
.hero-grid .detail-type-mark .orb-big{
  position:relative;z-index:1;margin:0;animation:none;
}
/* マスコットは透過素材を右下に浮かせる */
.hero-grid .detail-mascot{
  position:absolute;z-index:2;right:-40px;bottom:-26px;width:138px;height:138px;margin:0;
  border:0;background:none;border-radius:0;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.32));
}

@media(max-width:720px){
  .hero-grid .detail-type-mark{width:150px;height:150px;margin:0 auto}
  .hero-grid .detail-type-mark .orb-big{width:150px;height:150px;font-size:78px}
  .hero-grid .detail-mascot{width:104px;height:104px;right:-28px;bottom:-18px}
}

@media(max-width:520px){
  .card .type-mark{width:72px;height:72px;margin-bottom:14px}
  .card .type-mark .orb{width:72px;height:72px;font-size:38px}
  .card .type-mark .card-mascot{width:48px;height:48px;right:-13px;bottom:-12px}
}

@media(prefers-reduced-motion:reduce){
  .card .card-mascot,.hero-grid .detail-type-mark{transition:none;animation:none}
}