@charset "utf-8"; 
/* アコーディオンA */
.ac-box{
width: auto;
margin: 20px 5px 0 120px;
}

/*ラベル*/
.ac-box label{
/*max-width: 385px;*/
font-size: 16px;
/*font-weight: bold;*/
/*text-align: center;*/
background: none;
/*margin: auto;*/
line-height: 40px;
position: relative;
display: block;
height: 40px;
border-radius: 8px;
cursor: pointer;
color: #333;
transition: all 0.5s;
}

/*ラベルホバー時*/
.ac-box label:hover{
/*background: rgba( 240, 86, 137, 0.55 );*/
    color:#666;
    opacity: .7;

-webkit-transition: all .3s;
transition: all .3s;
}

/*チェックを隠す*/
.ac-box input{
display: none;
}

/*チェックのアイコン（↓）*/
.ac-box label:after{
color: #333;
font-family:"FontAwesome";
content:" \f078";
}

/*チェックのアイコン（↑）*/
.ac-box input:checked ~ label::after {
color: #333;
font-family:"FontAwesome";
content:" \f077";
}

/*中身を非表示にしておく*/
.ac-box div{
height: 0px;
padding: 0 20px 0;
overflow: hidden;
opacity: 0;
transition: 0.5s;
        visibility: hidden;
}

/*クリックで中身を表示*/
.ac-box input:checked ~ div{
height: auto;
padding: 10px 20px 20px;
background: #f6f6f6;
opacity: 1;
    visibility: visible;    
-webkit-transition: all .5s;
transition: all .5s;
}

/*表示内容の調整*/
.ac-box div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 10px 10px 0;
/*text-align: justify;*/
}

.ac-small p{
margin-bottom: 0px;
}


@media screen and (max-width: 768px){

    .ac-box {
    margin: 20px 5px 0 0;
    clear: both;
    }
}