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

/*ボックス全体*/
.accbox > { margin: 2em 0; padding: 0;}

/*ラベル*/
.accbox > label { display: block; position:relative; margin: 0 0 -2px 0; padding : 13px 12px 13px 3.5em; font-weight: bold; background: #fffdce; cursor :pointer; transition: all 0.5s; border:2px solid #000; }

/*アイコンを表示*/
.accbox > label:before { display:block; position:absolute; left:1em; top:1.5em; width:20px; height:10px; content: ''; background:rgba(0, 0, 0, 0) url("../../img/icon_arrow_down.png") no-repeat scroll center bottom / contain ; padding-right: 8px;}

/*ラベルホバー時*/
.accbox > label:hover { /*background :#ffe9a9;*/}

/*チェックは隠す*/
.accbox > input { display: none;}

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

/*クリックで中身表示*/
.cssacc:checked + label + .accshow { height: auto; padding: 5px; opacity: 1;}

.accbox .accshow p { margin: 2em}

/*アイコンを入れ替える*/
.cssacc:checked + label:before { background:rgba(0, 0, 0, 0) url("../../img/icon_arrow_up.png") no-repeat scroll center bottom / contain}