@charset "utf-8";

.se-recommend-with-big-dots .slick-dots li button::before {
  font-size: 12px;
}

.se-recommend-with-big-dots li.slick-active button::before {
  color: #e83820 !important;
  opacity: 1 !important;
}

.se-recommend-wrap__items {
  margin: 20px 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.se-recommend-wrap__item {
  margin-right: 16px;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (max-width: 599px) {
  .se-recommend-wrap__items {
    margin-left: 0;
    margin-right: 0;
  }

  .se-recommend-wrap__item {
    width: calc(100% / 3 - 16px * (3 - 1) / 3);
  }

  /*レコメンドは6個表示*/
  .se-recommend-wrap__item:nth-child(n+7) {
    display: none;
  }

  .se-recommend-wrap__item:nth-child(3n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 600px) and (max-width: 840px) {
  .se-recommend-wrap__items {
    margin-left: 0;
    margin-right: 0;
  }

  .se-recommend-wrap__item {
    width: calc(100% / 4 - 16px * (4 - 1) / 4);
  }

  /* レコメンドは8個表示 */
  .se-recommend-wrap__item:nth-child(n+9) {
    display: none;
  }

  .se-recommend-wrap__item:nth-child(4n) {
    margin-right: 0;
  }
}

@media only screen and (min-width: 841px) {
  .se-recommend-wrap__item {
    width: calc(100% / 6 - 16px * (6 - 1) / 6);
  }

  .se-recommend-wrap__item:nth-child(6n) {
    margin-right: 0;
  }
}

.se-recommend-wrap__item-template {
  display: none;
}

.se-recommend-wrap__item-top {
  min-height: 1px;  /* IE11で「flex-direction: column」を使うと余分なスペースが入ってしまうバグ（？）に対応しました。 */
}

.se-recommend-wrap__item-link {

}

.se-recommend-wrap__item-image {
  display: block;
  width: 100%;
}

.se-recommend-wrap__item-title {
  margin-top: 5px;
  color: #61a411;
  font-size: 1.2rem;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: block;
}

.se-recommend-wrap__item-title:hover {
  color: #61a411;
}

.se-recommend-wrap__author {
  font-size: 1.2rem;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.se-recommend-slider .slick-track {
  display:inline-flex;
  align-items: flex-end;
}

.se-recommend-slider__item-image {
  width: 90%;
  height: auto;
  vertical-align: bottom;
}

.se-recommend-slider__item-title {
  margin-top: 5px;
  color: #61a411;
  font-size: 1.2rem;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: block;
}

.se-recommend-slider__item-title:hover {
  color: #61a411;
}

.se-recommend-slider__author {
  margin: 0 !important;;
  padding: 0 !important;
  font-size: 1.2rem;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  color: #333 !important;
}
