@charset "UTF-8";
/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px), print {
  #event .system-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  #event .system-list li a {
  }

  #event .system-list li a {
    display: grid;
    gap: 0 3.2%;
    grid-template-columns: 24.3% minmax(0, 1fr);
    align-items: flex-end;
  }

  #event .system-list li .icon {
    color: #181c62;
    display: grid;
    font-size: 14px;
    font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
    font-weight: 700;
    left: -38px;
    left: clamp(-38px, -1.2153vw - 14.667px, -24px);
    line-height: 1;
    margin-bottom: -43px;
    place-items: center;
    position: relative;
    top: 0;
    z-index: 1;
  }

  #event .system-list li .icon.icon01 {
    background: url(../images/event/event_icon01_bg.svg) no-repeat center
      center/contain;
    height: 90px;
    height: clamp(4rem, 2.917rem + 2.26vw, 5.625rem);
    width: 90px;
    width: clamp(4rem, 2.917rem + 2.26vw, 5.625rem);
  }

  #event .system-list li .icon.icon02 {
    background: url(../images/event/event_icon02_bg.svg) no-repeat center
      center/contain;
    left: -19px;
    color: #ffffff;
    height: 68px;
    width: 68px;
    margin-bottom: -37px;
  }

  #event .system-list li .system-pic {
    background: #fff;
    border: 2px solid #181c62;
    padding: 8px;
    padding: clamp(0.25rem, 0.083rem + 0.35vw, 0.5rem);
    height: 145px;
    height: clamp(6.25rem, 4.375rem + 3.91vw, 9.063rem);
    margin-bottom: 0;
  }

  #event .system-list li .system-pic img {
    height: 100%;
    width: 100%;
  }

  #event .system-list li .system-pic.is-ended {
    position: relative;
  }

  #event .system-list li .system-pic.is-ended img {
    filter: grayscale(100%);
  }

  #event .system-list li .system-pic.is-ended::after {
    background: #d9d9d9;
    content: "";
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
  }

  #event .system-list li .system-ttl {
    border-bottom: 2px solid #bdb8ad;
    font-size: 16px;
    font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.625;
    margin-bottom: 10px;
    padding-block: 0 11px;
  }

  #event .system-list li .system-date {
    display: grid;
    gap: 0 15px;
    grid-template-columns: 60px minmax(0, 1fr);
  }

  #event .system-list li .date-ttl {
    color: #181c62;
    font-size: 14px;
    font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 2.1428571429;
  }

  #event .system-list li .start_text {
    font-size: 14px;
    font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 2.1428571429;
  }

  /* =================================================
  詳細ページ (is-single)
================================================= */
  #event main.is-single {
  }
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  #event .system-list {
    color: #040404;
    gap: 6vw;
  }

  #event .system-list li {

  }

  #event .system-list li a {

  }

  #event .system-list li a .icon {
    color: #181c62;
    display: grid;
    font-size: 3.623vw;
    font-weight: 700;
    left: -4.246vw;
    line-height: 1;
    margin-bottom: -9.729vw;
    place-items: center;
    position: relative;
    top: 1vw;
    z-index: 1;
  }

  #event .system-list .icon.icon01 {
    background: url(../images/event/event_icon01_bg.svg) no-repeat center
      center/contain;
    height: 22.6vw;
    width: 22.6vw;
  }

  #event .system-list .icon.icon02 {
    background: url(../images/event/event_icon02_bg.svg) no-repeat center
      center/contain;
    color: #ffffff;
    height: 22.6vw;
    width: 22.6vw;
  }

  #event .system-list .system-pic {
    background: #fff;
    border: 2px solid #181c62;
    margin-bottom: 1.932vw;
    padding: 2vw;
  }

  #event .system-list li a .system-pic img {
    height: 38vw;
    width: 100%;
  }

  #event .system-list li .system-pic.is-ended {
    position: relative;
  }

  #event .system-list li .system-pic.is-ended img {
    filter: grayscale(100%);
  }

  #event .system-list li .system-pic.is-ended::after {
    background: #d9d9d9;
    content: "";
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
  }

  #event .system-list li .system-ttl {
    border-bottom: 2px solid #bdb8ad;
    font-size: 3.865vw;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.625;
    margin-bottom: 2.415vw;
    padding-block: 0 3.14vw;
  }

  #event .system-list li .system-date {
    display: grid;
    gap: 0 3.623vw;
    grid-template-columns: 14.4vw minmax(0, 1fr);
    margin-bottom: -1vw;
  }

  #event .system-list li .date-ttl {
    color: #181c62;
    font-size: 3.382vw;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 2.1428571429;
  }

  #event .system-list li .start_text {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.8;
  }

  /* =================================================
  詳細ページ (is-single)
================================================= */
}