@charset "utf-8";
/*==============================================================
  ■ category(SP)
==============================================================*/
.category-content {
  margin: 0 0 7.8vw;
}
.category-content .subject-block {
  margin: 6.3vw auto 4.7vw;
  text-align: center;
}
.category-content .subject-block .title {
  margin-bottom: 1.6vw;
  font-size: 5vw;
  font-weight: inherit;
  color: bold;
}
.category-content .subject-block .sub {
  display:none;
  font-size: 3.4vw;
}
.category-content .result-block {
  margin-bottom: 3.1vw;
  padding: 0 3.1vw;
}
.category-content .result-block .navHeader {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 7.8vw;
  padding: 0 1.6vw 2.2vw;
  border-bottom: 0.3vw solid #ddd;
}
.category-content .result-block .navHeader .title {
  display: none;
}
.category-content .result-block .navHeader .pageInfo {
  width: 100%;
  text-align: right;
  font-size: 3.7vw;
}
.category-content .result-block .list-container {
  margin-bottom: 6.3vw;
}
.category-content .result-block .list-container .item-list > li {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: 38.4vw;
  margin-bottom: 7.8vw;
  border: 0.3vw solid #ddd;
}
.category-content .result-block .list-container .item-list > li:last-child {
  margin-bottom: 0px;
}
.category-content .result-block .list-container .item-list > li[data-new="true"]:before {
  position: absolute;
  left: 0.9vw;
  top: 0.9vw;
  z-index: 10;
  content: "";
  width: 46px;
  height: 46px;
  background-image: url("../../common/img/ico_new.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 9999px;
  overflow: hidden;
  white-space: nowrap;
  width: 9.4vw;
  height: 9.4vw;
  pointer-events: none;
}
.category-content .result-block .list-container .item-list > li[data-new="true"]:before a {
  display: block;
  width: 100%;
  height: 100%;
}
.category-content .result-block .list-container .item-list > li[data-status="enrolled"]:after {
  position: absolute;
  right: 57%;
  top: 0px;
  z-index: 11;
  content: "";
  width: 99px;
  height: 100px;
  background-image: url("../../common/img/ico_enrolled.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 9999px;
  overflow: hidden;
  white-space: nowrap;
  width: 15.6vw;
  height: 15.6vw;
  pointer-events: none;
}
.category-content .result-block .list-container .item-list > li[data-status="enrolled"]:after a {
  display: block;
  width: 100%;
  height: 100%;
}
.category-content .result-block .list-container .item-list > li[data-status="graduated"]:after {
  position: absolute;
  right: 57%;
  top: 0px;
  z-index: 12;
  content: "";
  width: 99px;
  height: 100px;
  background-image: url("../../common/img/ico_graduated.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 9999px;
  overflow: hidden;
  white-space: nowrap;
  width: 15.6vw;
  height: 15.6vw;
  pointer-events: none;
}
.category-content .result-block .list-container .item-list > li[data-status="graduated"]:after a {
  display: block;
  width: 100%;
  height: 100%;
}
.category-content .result-block .list-container .item-list > li.is-empty {
  padding-top: 3.1vw;
  font-size: 5vw;
  border: none;
}
.category-content .result-block .list-container .item-list > li .overlay {
  display: none;
}
.category-content .result-block .list-container .item-list > li .image {
  width: 43%;
}
.category-content .result-block .list-container .item-list > li .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover';
  max-height: 38.4vw;
}
.category-content .result-block .list-container .item-list > li .text {
  width: 57%;
  padding: 2.2vw 2.2vw 0 2.2vw;
  overflow-y: hidden;
}
.category-content .result-block .list-container .item-list > li .text .genre-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.category-content .result-block .list-container .item-list > li .text .genre-list li {
  margin: 0 1.6vw 1.6vw 0;
  background: #eee url("../../common/img/ico_tag.svg") no-repeat left 1.6vw center;
  background-size: 3.4vw 3.4vw;
}
.category-content .result-block .list-container .item-list > li .text .genre-list li:hover {
  background-color: #ddd;
}
.category-content .result-block .list-container .item-list > li .text .genre-list li a {
  display: block;
  padding: 1.3vw 1.9vw 1.3vw 5.9vw;
  text-decoration: none;
  font-weight: bold;
  color: #555;
  font-size: 3.1vw;
}
.category-content .result-block .list-container .item-list > li .text .title {
  line-height: 1.2;
  font-size: 4.4vw;
  font-weight: bold;
  color: #000;
 /* max-height: 2.5em;*/
  overflow: hidden;
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.category-content .result-block .list-container .item-list > li .text .title a {
  color: #000;
  text-decoration: none;
}
.category-content .result-block .list-container .item-list > li .text .title a:hover {
  text-decoration: underline;
}
.category-content .result-block .list-container .item-list > li .text .subtitle {
  margin-top: 0.9vw;
  line-height: 1.2;
  font-size: 3.7vw;
  overflow: hidden;
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.category-content .result-block .list-container .item-list > li .text .profile {
  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  width: 43%;
  padding: 0.9vw 0;
  line-height: 1.3;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 2.8vw;
  color: #fff;
  pointer-events: none;
}
.category-content .result-block .list-container .item-list > li .text .update {
  position: absolute;
  left: 0px;
  top: -5vw;
  z-index: auto;
  line-height: 4.1vw;
  padding-left: 4.7vw;
  background: url("../../common/img/ico_time.svg") no-repeat left center;
  background-size: 4.1vw 4.1vw;
  font-size: 3.4vw;
  font-weight: bold;
  pointer-events: none;
}
.category-content .result-block .navFooter .pageButton-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.category-content .result-block .navFooter .pageButton-list li {
  margin: 0 1.6vw 3.1vw;
}
.category-content .result-block .navFooter .pageButton-list li a {
  display: block;
  line-height: 9.4vw;
  padding: 0 3.7vw;
  border: 1px solid #ccc;
  text-align: center;
  text-decoration: none;
  font-size: 4.1vw;
  color: #000;
}
.category-content .result-block .navFooter .pageButton-list li.prev-btn {
  margin-left: 0px;
}
.category-content .result-block .navFooter .pageButton-list li.prev-btn a {
  background: url("../../common/img/arrow_02.svg") no-repeat center center;
  background-size: 3.7vw 3.7vw;
}
.category-content .result-block .navFooter .pageButton-list li.prev-btn a:before {
  content: "<";
  visibility: hidden;
}
.category-content .result-block .navFooter .pageButton-list li.next-btn {
  margin-right: 0px;
}
.category-content .result-block .navFooter .pageButton-list li.next-btn a {
  background: url("../../common/img/arrow_01.svg") no-repeat center center;
  background-size: 3.7vw 3.7vw;
}
.category-content .result-block .navFooter .pageButton-list li.next-btn a:before {
  content: ">";
  visibility: hidden;
}
.category-content .result-block .navFooter .pageButton-list li.cur a {
  background-color: #333;
  border: 1px solid #333;
  color: #fff;
  pointer-events: none;
}
.category-content .result-block .navFooter .pageButton-list li.is-not-active a {
  display: none;
}
.category-content .result-block .navFooter .pageInfo {
  text-align: center;
  font-size: 3.7vw;
}