@charset "UTF-8";
/* Shared smartphone compact cards: top, schedule, roster.
 * Markup: presentation/standard-v1/components/sp-compact-card.php.
 * Only data labels vary by page. No top/schedule/roster appearance overrides. */

.compact-cast-region:where([data-ui-component="compact"]) {
  width: 100%;
  margin: 0;
  padding: 0;
}
.compact-cast-list:where([data-ui-component="compact"], [data-ui-component="compact"] *) {
  --_cc-width: clamp(96.6184px,30.1932vw,125px);
  --_cc-gap: clamp(6.1836px,1.9324vw,8px);
  display: grid;
  grid-template-columns: repeat(3, calc(var(--_cc-width) + 2px));
  column-gap: var(--_cc-gap);
  row-gap: clamp(11.5942px,3.6232vw,15px);
  align-items: start;
  width: 100%;
  margin: 0;
  padding: clamp(11.5942px,3.6232vw,15px) 0 30px calc(var(--_cc-gap) + 1px);
  box-sizing: border-box;
  background: var(--_sp-cast-list-surface, var(--ui-sp-cast-list-background, var(--ui-sp-main-profile-bg-variant-21, var(--ui-sp-profile-bg-variant-21))));
  box-shadow: none;
}
.compact-cast-list > .clear { display: none; }
.compact-cast-list > .natural-empty-message { grid-column: 1 / -1; }
.compact-cast-card {
  position: relative;
  overflow: hidden;
  box-sizing: content-box;
  width: var(--_cc-width);
  height: 231px;
  margin: 0;
  border: 1px solid var(--ui-sp-main-base-border-variant-5, var(--ui-sp-base-border-variant-5));
  border-bottom: 3px solid var(--ui-sp-cast-compact-edge, var(--ui-sp-main-base-border-variant-6, var(--ui-sp-base-border-variant-6)));
  border-radius: 0;
  background: linear-gradient(180deg, var(--ui-sp-main-base-bg-variant-11, var(--ui-sp-base-bg-variant-11)), var(--ui-sp-main-base-bg-variant-16, var(--ui-sp-base-bg-variant-16)));
  box-shadow: var(--ui-sp-cast-compact-shadow, 0 4px 10px var(--ui-sp-main-base-shadow-variant-7, var(--ui-sp-base-shadow-variant-7)), inset 0 -1px 0 var(--ui-sp-main-base-shadow-variant-8, var(--ui-sp-base-shadow-variant-8)));
}
.compact-cast-time {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: clamp(13.1401px,4.1063vw,17px);
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--ui-sp-cast-compact-time-background, linear-gradient(100deg, var(--ui-sp-main-base-bg-variant-17, var(--ui-sp-base-bg-variant-17)), var(--ui-sp-main-base-bg-variant-18, var(--ui-sp-base-bg-variant-18))));
  color: var(--ui-sp-cast-compact-time-foreground, var(--ui-sp-main-base-text-variant-3, var(--ui-sp-base-text-variant-3)));
  font-size: clamp(9.2754px,2.8986vw,12px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 1px var(--ui-sp-main-base-text-shadow, var(--ui-sp-base-text-shadow));
}
.compact-cast-time > span {
  display: block;
  transform: translateY(clamp(.773px,.2415vw,1px));
  letter-spacing: clamp(.9px, calc(.5596px + .1064vw),1px);
}
.compact-cast-photo, .compact-cast-photo > a {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: var(--ui-sp-main-profile-bg-variant-17, var(--ui-sp-profile-bg-variant-17));
}
.compact-cast-image {
  display: block;
  width: 100%;
  height: clamp(140.6763px,43.9614vw,182px);
}
.compact-cast-full {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132%;
  max-width: none;
  height: auto;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.compact-cast-name, .compact-cast-size {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 0;
  white-space: nowrap;
}
.compact-cast-name {
  top: 9px;
  color: var(--ui-sp-main-base-text-variant-8, var(--ui-sp-base-text-variant-8));
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Meiryo, serif;
  font-size: clamp(8.5px,2.657vw,11px);
  font-weight: 700;
  text-shadow: 0 1px 0 var(--ui-sp-main-base-text-shadow-variant-2, var(--ui-sp-base-text-shadow-variant-2));
}
.compact-cast-divider {
  position: relative;
  top: 17px;
  left: clamp(2.3188px,.7246vw,3px);
  width: clamp(91.9807px,28.744vw,119px);
  height: 1px;
  background: var(--ui-sp-cast-compact-line, linear-gradient(90deg, transparent 0%, var(--ui-sp-main-base-bg-variant-15, var(--ui-sp-base-bg-variant-15)) 18%, var(--ui-sp-main-base-bg-variant-15, var(--ui-sp-base-bg-variant-15)) 82%, transparent 100%));
}
.compact-cast-size {
  top: 24px;
  color: var(--ui-sp-main-base-text-variant-7, var(--ui-sp-base-text-variant-7));
  font-family: Meiryo, "Yu Gothic", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -.2px;
}
@media screen and (max-width:413px) {
  .compact-cast-card { height: calc(clamp(178.5507px,55.7971vw,231px) + 2px); }
}
@media screen and (max-width:320px) {
  .compact-cast-size { font-size: 7px; }
}