.acbox{
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:0px 10px 100px; /* ボックス全体の位置調整 */
}


.acbox label{
  background: #fff;
  padding: 14px 20px 14px 180px ;
  border: 1px solid #b4b4b4;
  color: #828172;
}

.acbox label:hover{
  background: #fff899;
  color: #828172;
  border: 1px solid #fff899;
  opacity: 0.8;
  -moz-opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  zoom: 1;
  transition: all  0.3s ease;
}

.acbox input{
  display: none;
}

.acbox label:after{
  content:"\f107"; /* ラベルのアイコン */
  font-family: "FontAwesome";
  display: table-cell;
  vertical-align: middle;
  width: 10%;
  text-align: right;
}

.acbox input:checked ~ label::after {
  content:"\f106"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
  height: auto;
  padding: 40px 0 0px 0; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #fff; /* 開いた部分の背景色 */
  opacity: 1;
}

.acbox-under{
  font-size: 12px; /* 開いた部分の文字サイズ */
  color: #555555; /* 開いた部分の文字色 */
}