/* アコーディオンレイアウト (四角)*/


/* アコーディオンボックス */
.ac-box{
    border: 1px solid #999;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* アコーディオンスイッチ+名前 */
.ac-title{
    padding: 12px 0;
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: background-color 0.1s;
}

.ac-title a{
    text-decoration: none;
}
.ac-title:hover{
    background-color: #eee;
}

.opened, .ac-title:active{
    background-color: rgb(198, 239, 255)!important;
}


.ac-title img{
    margin-left:1rem;
    vertical-align: top;
}

.cls{
    display: none;
}


/*アコーディオン要素*/
.ac-content{
    overflow: hidden;
    transition: all 0.3s;
}

/* 要素の高さ取得用 */
.ac-height{
    padding-bottom: 0;
}


.off{
    height: 0px !important;
    padding-bottom: 0 !important;
}

@media screen and (max-width: 768px){
    .ac-box .ac-title{
        font-size: 16px;
        padding: 8px 0;
    }

    .ac-box .ac-title img {
        height: 20px;
        width: 20px;
    }
}


/* 使い方の例

    <div class="ac-box">
        <p class="ac-title toggle closed">
            <img  class="ac-icon cls" src="./../images/on.svg" width="24">
            <img class="ac-icon" src="./../images/off.svg" width="24">
            <span>スイッチ</span>
        </p>
        <div class="ac-content off">
            <div class="ac-height">
                <textarea rows="8" placeholder="メモを残すことができます。"></textarea>
            </div>
        </div>
    </div>

*/