/*アコーディオンパネル全体のデザイン*/

.accodion_area{
    width: 90%;
    max-width: 900px;
    margin:0 auto 10px;

}

.accordion_area_li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:2px 30px;
    font-size: 3vw;
    background-color: #d1d1d1;
    border-radius: 4px;
    cursor: pointer;
    margin: 12px 0;
}

.accodion_area_li::-webkit-details-marker{
    display: none;
}

.accodion_area[open]{
    border: 2px solid #707070;
}



.accodion_area_li:hover,.accodion_area[open].accodion_area_li{
    background-color: #707070;
    color: #ffffff;
}


.accodion_area_li::after{
    content: '>';
    margin-left: 32px;
    color: #ffffff;
    font-size: 1.5em;
    transform: rotate(45deg);
    transition:transform .5s;
}

.accodion_area_li[open] summary::after{
    transform: rotate(-90deg);
}


.box{
    padding: 24px;
    color: #707070;
}

.accodion_area[open] .box{
    animation: fadein .5s ease;
}

@keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}




/*アコーディオンパネル　タイトル部分

.title{
    color: #707070;
    background-color: #d1d1d1;
    position:relative;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    padding:0.5em;
    transition: all.5s ease;
    border-radius: 4px;
}
*/


/*アコーディオンパネル　矢印*/

/*
.title::before{
    position: absolute;
    content: "<";
    top:48%;
    right: 15px;
    transform:rotate(45deg);
}


.title.close::before{
    transform:rotate(-45deg);
}

*/


/*アコーディオンパネル　開いたエリア
.box{
    display:none;
    padding: 1em;
    border: 2px solid #707070;
    border-radius: 4px;
}
*/