@charset "UTF-8";
/* # =================================================================
   # Global selectors
   # ================================================================= */

.sp {
  display: none;
}

img {
  height: auto;
}

.longlive-index .cate-list {
  margin-bottom: 60px;
}

.longlive-index .main-area > a {
  display: flex;
  padding: 45px 84px;
  border-top: 1px solid #c9c9c9;
  justify-content: space-between;
}

.longlive-index .main-area > a:last-of-type {
  border-bottom: 1px solid #c9c9c9;
}

.longlive-index .main-area > a > figure {
  width: 240px;
  text-align: center;
}

.longlive-index .main-area > a > figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 224px;
}

.longlive-index .main-area > a .text-area {
  width: calc(100% - 275px);
}

.longlive-index .main-area > a .text-area .info-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.longlive-index .main-area > a .text-area .info-area time {
  font-size: 1.8rem;
  font-weight: 500;
}

.longlive-index .main-area > a .text-area .info-area .cate {
  display: inline-block;
  padding: 2px 20px;
  background: #9f0c13;
  color: #fff;
  font-weight: 700;
  margin-left: 12px;
}

.longlive-index .main-area > a .text-area .text-main h3 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.6;
}

.wrapper-pagenavi {
  margin-top: 76px;
}




@media only screen and (max-width: 1500px) {

}

@media only screen and (max-width: 1400px) {

}

@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 1080px) {

}

@media only screen and (max-width: 980px) {

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .longlive-index .cate-list {
    margin-bottom: 34px;
  }

  .longlive-index .main-area > a {
    display: block;
    padding: 30px 15px;
  }

  .longlive-index .main-area > a > figure {
    margin: 0 auto; 
  }  

  .longlive-index .main-area > a .text-area {
    width: 100%;
    margin-top: 20px;
  }

  .longlive-index .main-area > a .text-area .info-area {
    margin-bottom: 16px;
  }

  .longlive-index .main-area > a .text-area .info-area time {
    font-size: 1.6rem;
  }

  .longlive-index .main-area > a .text-area .info-area .cate {
    padding: 2px 15px;
  }
  
  .longlive-index .main-area > a .text-area .text-main h3 {
    font-size: 1.6rem;
  }
  
  .wrapper-pagenavi {
      margin-top: 40px;
  }

}

@media only screen and (max-width: 360px) {


}