@charset "utf-8";
/*続きを読むを実装 */
.moreWrap {
  width: 100%;
  margin: 0.5em auto;
  padding: 0.5em;
  position: relative;
}
/*続きを読むボタン*/
.moreBtn {
  width: 10em;
  margin: auto;
  padding: 0.5em;
  background: #7E9374;
  border-radius: 10em;
  text-align: center;
  color: #fff;
  position: absolute;
  right: 0;
  bottom: 3em;
  left: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.2s ease;
  overflow: hidden;
  z-index: 2;
}
.moreBtn:hover {
  background: #0D3B2B;
  opacity: 0.8;
}
.moreBtn::after {
  content: "続きを読む";
}
.moreBtn::before {
  content: '';
  width: 130%;
  height: 100%;
  position: absolute;
  top: 0;
  right: -135%;
  z-index: -1;
  transform: skewX(-45deg);
}
/*アニメーション*/
@keyframes skew {
  100% {
    right: -10%;
  }
}
.moreBtn:hover::before {
  animation: skew 0.3s forwards;
}
.more {
  position: relative;
  overflow: hidden;
  /*通常時、表示できる高さを設定*/
  height: 16em;
}
.more::before {
  content: "";
  display: block;
  background-image: linear-gradient(rgba(229, 222, 203, 0)0%, rgba(229, 222, 203, 0.8)80%);
  width: 100%;
  height: 16em;
  position: absolute;
  bottom: 0;
  top: 0;
  transition: 0.6s;
}
/*チェックボタン*/
.moreTrigger {
  display: none;
}
.moreTrigger:checked ~ .moreBtn {
  bottom: -1.5em;
}
.moreTrigger:checked ~ .moreBtn::after {
  content: '閉じる';
}
.moreTrigger:checked ~ .more {
  height: auto;
}
.moreTrigger:checked ~ .more::before {
  display: none;
}