:root {
  --button-color: #7E7367;
  --button-color-hover: #464039;
  --button-color-active: #38332E;
  --button-color-disabled: #D8D4CF;
  --button-color-disabled-background: #F8F7F7;
  --button-color-secondary-background: #D8D4CF; }

.article-video-slider-card {
  font-family: "Ubuntu", sans-serif;
  background-color: #fff;
  border-radius: 8px; }
  .article-video-slider-card:not(.js-video-slider-card) {
    cursor: default; }
  .article-video-slider-card.article-video-slider-card--video .article-video-slider-card__text-title {
    font-size: 14px; }
  .article-video-slider-card__image img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height: 192px;
    object-fit: cover; }
  .article-video-slider-card__image .image-icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #464039;
    border-radius: 1000px;
    width: 32px;
    height: 32px; }
    .article-video-slider-card__image .image-icon--exclusive {
      top: 8px;
      left: 8px;
      transform: none; }
      .article-video-slider-card__image .image-icon--exclusive svg {
        background: #464039;
        width: 32px;
        height: 32px;
        padding: 6px; }
    .article-video-slider-card__image .image-icon--play svg {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 1000px;
      width: 16px;
      height: 16px; }
      .article-video-slider-card__image .image-icon--play svg path {
        fill: #464039; }
  .article-video-slider-card__image .image-time {
    background-color: #464039;
    font-size: 12px;
    font-weight: 500;
    line-height: 136%;
    bottom: 8px;
    left: 8px; }
  .article-video-slider-card__text {
    color: #464039;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 136%; }
  .article-video-slider-card__video {
    top: 0;
    left: 0;
    z-index: 1020; }
    @media (min-width: 768px) {
      .article-video-slider-card__video {
        background-color: #38332e66; } }
    .article-video-slider-card__video-card {
      padding: 24px; }
      @media (min-width: 768px) {
        .article-video-slider-card__video-card {
          max-width: 700px;
          max-height: 500px;
          border-radius: 16px;
          padding: 24px 40px 40px; } }
      .article-video-slider-card__video-card .video-close {
        position: absolute;
        cursor: pointer;
        width: fit-content;
        top: 24px;
        right: 24px;
        background: #F8F7F7;
        border-radius: 1000px;
        width: 44px;
        height: 44px; }
        @media (min-width: 768px) {
          .article-video-slider-card__video-card .video-close {
            position: relative;
            align-self: end;
            top: unset;
            right: unset; } }
        .article-video-slider-card__video-card .video-close svg {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
      .article-video-slider-card__video-card iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: auto; }

[data-pet-world="Dog"] .image-icon,
body[data-color-site="dogColor"] .image-icon {
  border-color: #936031; }
  [data-pet-world="Dog"] .image-icon--exclusive svg,
  body[data-color-site="dogColor"] .image-icon--exclusive svg {
    background: #936031; }
  [data-pet-world="Dog"] .image-icon.image-icon--play svg path,
  body[data-color-site="dogColor"] .image-icon.image-icon--play svg path {
    fill: #936031; }

[data-pet-world="Dog"] .image-time,
body[data-color-site="dogColor"] .image-time {
  background-color: #936031; }

[data-pet-world="Cat"] .image-icon,
body[data-color-site="catColor"] .image-icon {
  border-color: #4A773C; }
  [data-pet-world="Cat"] .image-icon--exclusive svg,
  body[data-color-site="catColor"] .image-icon--exclusive svg {
    background: #4A773C; }
  [data-pet-world="Cat"] .image-icon.image-icon--play svg path,
  body[data-color-site="catColor"] .image-icon.image-icon--play svg path {
    fill: #4A773C; }

[data-pet-world="Cat"] .image-time,
body[data-color-site="catColor"] .image-time {
  background-color: #4A773C; }

/*# sourceMappingURL=articleVideoSliderCard.css.map*/