@charset "UTF-8";
/* CSS Document */
#interactive-element-body .kf {
    --kf-font: 'Helvetica', 'Arial', sans-serif;
    --kf-red: #B82234;
    --kf-pink: #EF4062;
    --kf-grey: #F4F4F5;
    --kf-ink: #000000;
    --kf-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --kf-gap: 24px;
    font-family: var(--kf-font);
    color: var(--kf-ink);
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #interactive-element-body .kf *, #interactive-element-body .kf *::before, #interactive-element-body .kf *::after { box-sizing: border-box; }

  #interactive-element-body .kf__title {
    position1: relative;
    display: inline-block;
    margin: 0 0 22px;
    font-family: var(--kf-font);
    font-size: min(1.246vw, 19.936px);
    font-weight: bold;
    line-height: 1.2;
    color: var(--kf-red);
  }
  #interactive-element-body .kf__title span { display: inline-block; opacity: 0; transform: translateY(0.5em);
    transition: opacity 600ms var(--kf-ease), transform 600ms var(--kf-ease); }
  #interactive-element-body .kf__title::after {
    content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
    background: var(--kf-red); transform: scaleX(0); transform-origin: left;
    transition: transform 900ms var(--kf-ease) 200ms;
  }
  #interactive-element-body .kf.is-in .kf__title span { opacity: 1; transform: none; }
  #interactive-element-body .kf.is-in .kf__title::after { transform: scaleX(1); }

  #interactive-element-body .kf__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kf-gap);
    margin: 0; padding: 0; list-style: none;
  }

  #interactive-element-body .kf-card { position: relative; display: flex; min-height: 272px; }
  #interactive-element-body .kf-card__in {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
    overflow: hidden;
    background: var(--kf-grey);
    color: var(--kf-ink);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 900ms var(--kf-ease);
    transition-delay: var(--d, 0ms);
  }
  #interactive-element-body .kf-card:nth-child(even) .kf-card__in { clip-path: inset(0 0 0 100%); }
  #interactive-element-body .kf-card.--pink .kf-card__in { background: var(--kf-pink); color: #FFFFFF; }
  #interactive-element-body .kf-card.is-in .kf-card__in { clip-path: inset(0 0 0 0); }

  #interactive-element-body .kf-card__art {
    position: relative;
    flex: 0 0 46%;
    max-width: 218px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #interactive-element-body .kf-card__art img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 218px;
    clip-path: inset(100% 0 0 0);
    transform: translateY(24px) scale(0.96);
    transition: clip-path 1000ms var(--kf-ease), transform 1000ms var(--kf-ease);
    transition-delay: calc(var(--d, 0ms) + 250ms);
  }
  #interactive-element-body .kf-card.is-in .kf-card__art img {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
  #interactive-element-body .kf-card.is-idle .kf-card__art img {
    animation: kf-float 5s ease-in-out infinite;
    animation-delay: var(--f, 0s);
  }
  @keyframes kf-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  #interactive-element-body .kf-card__text {
    margin: 0;
    padding-left: 16px;
    font-family: var(--kf-font);
    font-size: clamp(17px, 2.2vw, 21px);
    font-weight: normal;
    line-height: 1.3;
    max-width: 16em;
  }
  #interactive-element-body .kf-card__text strong { font-weight: bold; }
  #interactive-element-body .kf-card__text .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.7em);
    transition: opacity 500ms var(--kf-ease), transform 700ms var(--kf-ease);
    transition-delay: calc(var(--d, 0ms) + 500ms + var(--i) * 28ms);
  }
  #interactive-element-body .kf-card.is-in .kf-card__text .w { opacity: 1; transform: none; }
  #interactive-element-body .kf-num { font-variant-numeric: tabular-nums; }

  #interactive-element-body .kf-card:focus-visible { outline: 2px solid var(--kf-red); outline-offset: 3px; }

  @media (max-width: 720px) {
    #interactive-element-body .kf__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #interactive-element-body .kf-card { min-height: 220px; }
    #interactive-element-body .kf-card:nth-child(even) .kf-card__in { clip-path: inset(0 100% 0 0); }
    #interactive-element-body .kf-card.is-in .kf-card__in { clip-path: inset(0 0 0 0); }
    #interactive-element-body .kf-card__art { flex-basis: 42%; }
  }

  @media (prefers-reduced-motion: reduce) {
    #interactive-element-body .kf *, #interactive-element-body .kf *::after { transition: none !important; animation: none !important; }
    #interactive-element-body .kf-card__in, #interactive-element-body .kf-card:nth-child(even) .kf-card__in, #interactive-element-body .kf-card__art img { clip-path: none !important; transform: none !important; }
    #interactive-element-body .kf-card__text .w, #interactive-element-body .kf__title span { opacity: 1 !important; transform: none !important; }
    #interactive-element-body .kf__title::after { transform: scaleX(1) !important; }
  }