@charset "UTF-8";

/* 厚生労働大臣が定める掲示事項
-------------------------------------------------------------------------*/


/*inputを非表示 & 閉じた時の位置調整*/
.open-box{
  position: relative;
  padding-bottom: 80px;
}
input[type="checkbox"].on-off{
  position: absolute;
  bottom: 0;
  display: block;
  opacity: 0;
}

/*ラベル（「開く」ボタン）*/
.open-label{
  margin: 0 1.5em;
  padding: 0.8em;
	max-width: 400px;
	margin: 0 auto;
  display: block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background: #3079ED;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}
/*ボタンっぽい効果*/
.open-label:active{
  box-shadow: 0 0 0 0;
}
.open-label:hover{
  background: -webkit-linear-gradient(bottom, #fff4e0 1%,#3079ED 80%);
  background: #3079ED;
}
/*ラベルに表示するテキスト*/
.open-label::after{
  content:'すべて表示する'; 
}
.on-off:checked ~ .open-label::after{
  content: '閉じる';
}
/*開閉エリア*/
.open{
  padding: 1em;
  border-radius: 8px;
  height: 200px;/*ちらっと見える部分の高さ*/
  overflow: hidden;
  transition: .5s;
  position: relative;
}
.on-off:checked ~ .open{
  height: auto;
}

/*開閉エリアにぼかしを乗せる*/
.open::before{
  content:'';
  background: linear-gradient(to bottom, transparent,rgba(255,255,255,1)100%);
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 3;
}
/*開いたらぼかしを消す*/
.on-off:checked ~ .open::before{
  background: none;
  z-index: -1;
}