@charset "UTF-8";
/* ポイント隠すボタン */
.btnKakusu {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 1em;
  text-decoration: none;
  border-left: solid 4px DeepPink;
  border-right: solid 4px DeepPink;
  color: DeepPink;
  background: Pink;
  transition: .4s;
}

.btnKakusu:hover {
  background: DeepPink;
  color: #FFF;
}

/* ↓↓↓ CSSでの表示・非表示　↓↓↓ */
/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
  background: #fa2;
  color: #fff;
  cursor: pointer;
  width: 200px;
  padding: 10px;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #a0522d;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
} 

/* ↑↑↑ CSSでの表示・非表示　↑↑↑ */