.grad-wrap {
  position: relative;
  box-sizing: border-box;
}
.grad-btn::before {
  content: "続きを読む"
}
.grad-item,.grad-item_judge {
  position: relative;
  overflow: hidden;
}
.grad-item::before,.grad-item_judge ::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item,
.grad-trigger:checked ~ .grad-item_judge  {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before,
.grad-trigger:checked ~ .grad-item_judge::before
{
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


@media all and (min-width: 768px) {
.grad-wrap {
    margin-bottom:40px;
    padding-bottom:50px;
  }
.grad-item {
    height: 65px;
  }
.grad-item_judge{
    height: 180px;
}
.grad-btn {font-size: 120%;
    padding: .5em 0;
    border-radius: 2px;
    border:solid 2px #ff00c0;
  }

}

@media all and (max-width: 767px)  {
  .grad-wrap {
    margin-bottom:2em;
    padding-bottom:2.5em;
  }
  .grad-item, .grad-item_judge{
    height: 60px;
  }
  .grad-btn {font-size: 100%;
    padding:.5em 0;
    border-radius: 2px;
    border:solid 1px #ff00c0;
  }

}

.grad-btn {
  z-index: 2;
  position: absolute;
  top:200;
  right: 0;
  bottom: 0;
  left: 0;
  width:auto;
  margin:0 auto;
  background: #fff;
  color: #ff00c0;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;s
}

#judge .grad-btn {
  background:rgba(64,147,244,0.4);
  color: #fff;
  border-color:#fff;
}