@charset "utf-8";
/* CSS Document */

.grad-btn {
	margin: 10px auto;
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-btn::before {
    font-family: "Font Awesome 5 Free";
    content: '\f107\00a0More';
	border-bottom:#01afa9 1px dotted;
    font-weight: 900;
    font-size: 1em;
    color: #01afa9;
    vertical-align: 20%;
	margin-left:45%;
}

.grad-btn::before::before {
	content: "";
    display: inline-block;
    width: 0;
    height: 0;
    left: 10px;
    top: 10px;
	border-left: 5px solid #0096ac;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
	padding-left:.5em;
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 0; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  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%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}