.readmore{
    position: relative;
    box-sizing: border-box;
    padding: 10px;}

.readmore-content{
  /*margin-top:-2.4em; */
    position: relative;
    overflow: hidden;
    height: 50px;
}
.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    height: 50px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
}
.readmore-label{
    display: table;
    bottom: 5px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0 auto;
    z-index: 2;
    padding: 0 10px;
    background: #196FDD;
    opacity: 0.8;
    font-size:14px;
    color: #ffffff;
}
.readmore-label:before{
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  content: '\f078  続きを読む';
}

/*input[type='checkbox']  ~.readmore-check {  display: none;  -webkit-appearance: none;}*/
.readmore-check{
 display: none;  
 -webkit-appearance: none;
  max-height: 0;
  padding: 0 20px;
  transition: max-height 0.6s, padding 0.6s; 
  overflow: hidden;
  &.is-open
    max-height: 100vh; 
    padding: 20px;
}

.readmore-check:checked ~ .readmore-label{
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}
.readmore-check:checked ~ .readmore-label:before{
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
    content: '\f077  閉じる';
}
.readmore-check:checked ~ .readmore-content{
    height: auto;
}
.readmore-check:checked ~ .readmore-content::before {
    display: none;
}