@charset "UTF-8"; .singleBox{padding:0 4% 100px 4%;}
.singleBox .singleList{margin-bottom: 45px;}
.singleList{display: flex; flex-wrap: wrap; width:100%; max-width: 1080px; margin:0 auto;gap:45px;}
.singleList figure{ width: 100%; background: #fff; position: relative; overflow: hidden; border-radius: 6px; margin-bottom: 10px; }
.singleList.matching figure,.singleList.top figure{border: 1px solid #EEE;}
.singleList figure::before{ content: ""; padding-top: 100%; display: block; }
.singleList figure img{width: auto;  max-width: 240px;  height: 100%;  position: absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%);  object-fit: cover;  max-height: 240px;  display: block; }
.singleList.event li.end{position: relative;}
.singleList.event li.end::after{ content: "開催終了"; position: absolute; border-radius: 6px; background: #4D4F54; right: -10px; top: 10px; line-height: 1; padding:10px; font-size: 1.4rem; color: #FFF; }
.singleList.event li.end figure::after{ top: 0; content: ""; width: 100%; height: 100%; position: absolute; display: block; background-color: rgba(0,0,0,0.4); }

@media only screen and (min-width:813px){.singleList{gap:40px;}
.singleList li{width: calc((100% - 120px) / 4);}
}

@media only screen and (max-width:812px){
.singleList figure{margin-bottom: 0px; }
#top-page .singleList{gap:20px; flex-wrap: wrap;}
#top-page .singleList li{width: calc((100% - 20px) / 2);}
.singleList figure img{
    max-width: 343px;
    max-height: 343px;
  }
      #top-page .singleList figure img{
      max-width: 363px;
    max-height: 363px;     
      }
  }
  

.singleList li time{font-size: 1.4rem; color: #BACAEA; font-family: 'Poppins', sans-serif; font-weight:700; line-height: 1; /* 28px */ letter-spacing: 0.7px;}
.singleList li a > p{display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-align: justify;}
.singleList li span{font-size: 1.4rem; color: #BACAEA; font-weight:700; line-height: 1; /* 28px */letter-spacing: 0.7px;}
.singleList.top{margin-bottom: 80px;}

@media only screen and (min-width:813px){.singleList:not(.top) li {width: calc((100% - 120px) / 4);}}
@media only screen and (max-width:812px){.singleList.top{margin-bottom: calc(40px - 4%);}
.singleList li{width:calc(96% / 2); margin-bottom: 20px;}
main:not(#top-page) .singleList{gap:4%;}
.singleList.magazine li:not(:last-of-type),
.singleList.event li:not(:last-of-type){margin-bottom: 20px;}
.singleList:not(.magazine):not(.event) li a > p{font-size: 1.4rem;}
}