@charset "UTF-8";

.grad-wrap {
  position: relative;
}

.grad-trigger {
  color: #FF0800;
  z-index: 2;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -1rem;
  bottom: -2.5rem;
  margin: auto;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.grad-trigger::after {
  content: "[ 続きを見る ]";
}
.grad-trigger.is-show::after {
  content: "[ 表示を少なくする ]";
}

.grad-item {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width:768px) {
  .grad-item.is-hide {
    /* height: 3.35rem; */
    height: 17em;
  }
}
@media screen and (max-width:767px) {
  .grad-item.is-hide {
    /* height: 3.35rem; */
    height: 22em;
  }
}

.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  /* height: 30px; */
  height: 0;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
}

.grad-item.is-hide::before {
  height: 50px;
}