@charset "UTF-8";

.grad-wrap {
  position: relative;
  margin-bottom: 50px;
}

.grad-wrap + .grad-wrap {
  margin-top: 40px;
}

.grad-btn {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 148px;
  margin: -2em auto;
  padding: 5px 0;
  border-radius: 2px;
  background: #f3a696;
  color: #000000;
  font-size: 1.3rem;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.grad-btn:hover {
  background: #fff;
  color: #f3a696;
}

.grad-btn .fa {
  margin-right: 0.5em;
}

.grad-btn::before {
	font: var(--fa-font-solid);
  content: "\f103　続きを読む";
}

.grad-item {
  position: relative;
  overflow: hidden;
  height: 200px; /*隠した状態の高さ*/
}

.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; /*グラデーションで隠す高さ*/
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 20%
  );
  content: "";
  z-index: 5;
}

.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}

.grad-trigger:checked ~ .grad-btn::before {
  font: var(--fa-font-solid);
  content:"\f102　閉じる";/*チェックされていたら、文言を変更する*/
}

.grad-trigger:checked ~ .grad-btn::before .fa {
  transform: rotate(180deg);
}

.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}

.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}