@charset "UTF-8";

/* === イナズマイレブン キャラリスト(3 columns) === */
.inazuma_char_li { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post_cont .inazuma_char_li { padding: 0; }

/* Card */
.inazuma_char_li li{ margin: 0; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease; }
.inazuma_char_li li:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.10); }

/* Image */
.inazuma_char_li_img{ position: relative; aspect-ratio: 16/9; background: #f4f6f9; overflow: hidden; }
.inazuma_char_li_img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.inazuma_char_li_img .ulf_post_img { margin: 0; }

/* Content */
.inazuma_char_li_cont{ padding: 12px 12px 14px; display: grid; gap: 6px; }
.inazuma_char_li_name{ font-size: 16px; font-weight: 800; line-height: 1.3; color: #111; letter-spacing: .02em; }
.inazuma_char_li_build{ font-size: 13px; line-height: 1.35; color: rgba(0,0,0,.68); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.04); width: fit-content; }
.inazuma_char_li_type{ font-size: 13px; line-height: 1.35; color: rgba(0,0,0,.68); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.04); width: fit-content; }
/* .inazuma_char_li_build::before { content:":"; }
.inazuma_char_li_type::before{  } */
.inazuma_char_li_build::before { content: "ビルド："; }
.rarity_legendary .inazuma_char_li_build::before { content: "出やすいビルド："; }
.inazuma_char_li_type::before { content: "属性："; }

/* キャラレアリティ */
.rarity_legendary .inazuma_char_li_img  { background-color: #ff8d1e; background-image: linear-gradient(45deg, #fda20a80 25%, transparent 25%, transparent 75%, #fda20a80 75%), linear-gradient(45deg, #fda20a80 25%, transparent 25%, transparent 75%, #fda20a80 75%); background-position: 10px 10px, 20px 20px; background-size: 20px 20px; }
.rarity_hero_w .inazuma_char_li_img  { background-color: #c5ccd1; background-image: linear-gradient(45deg, #b6c0cb80 25%, transparent 25%, transparent 75%, #b6c0cb80 75%), linear-gradient(45deg, #b6c0cb80 25%, transparent 25%, transparent 75%, #b6c0cb80 75%); background-position: 10px 10px, 20px 20px; background-size: 20px 20px; }
.rarity_hero_r .inazuma_char_li_img {  background-color: #e66c68; background-image: linear-gradient(45deg, #904a4780 25%, transparent 25%, transparent 75%, #904a4780 75%), linear-gradient(45deg, #904a4780 25%, transparent 25%, transparent 75%, #904a4780 75%); background-position: 10px 10px, 20px 20px; background-size: 20px 20px; }
.rarity_hero_p .inazuma_char_li_img { background-color: #ee9cff; background-image: linear-gradient(45deg, #b6f7ff80 25%, transparent 25%, transparent 75%, #b6f7ff80 75%), linear-gradient(45deg, #b6f7ff80 25%, transparent 25%, transparent 75%, #b6f7ff80 75%); background-position: 10px 10px, 20px 20px; background-size: 20px 20px; }

/* Responsive */
@media (max-width: 980px){
  .inazuma_char_li { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .inazuma_char_li { grid-template-columns: 1fr; }
  .inazuma_char_li_name{ font-size: 15px; }
}

/* ===== イナズマイレブン・ドロップキャラカード(3 columns) ===== */
.inazuma-card-grid{ margin: 18px 0 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.inazuma-card{ background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease; }
.inazuma-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.10); }

/* Image */
.inazuma-card__img{ background: #f4f6f9; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.inazuma-card__img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.inazuma-card__img .ulf_post_img { margin: 0; }
/* Body */
.inazuma-card__body{ padding: 12px 12px 14px; }
.inazuma-card__name{ margin: 0 0 10px; font-size: 16px; font-weight: 800; line-height: 1.35; color: #111; letter-spacing: .02em; }
.inazuma-card__name span{ font-weight: 600; font-size: 13px; color: rgba(0,0,0,.55); }
/* Meta list */
.inazuma-card__meta{ margin: 0; display: grid; gap: 10px; }
.inazuma-card__meta div{ display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; }
.inazuma-card__meta dt{ font-size: 12px; font-weight: 800; color: rgba(0,0,0,.65); background: rgba(0,0,0,.04); padding: 6px 10px; border-radius: 999px; width: fit-content; }
.inazuma-card__meta dd{ margin: 0; font-size: 13px; line-height: 1.45; color: rgba(0,0,0,.78); word-break: break-word; }

/* Responsive */
@media (max-width: 980px){
  .inazuma-card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .inazuma-card-grid{ grid-template-columns: 1fr; }
  .inazuma-card__meta div{ grid-template-columns: 78px 1fr; }
}