/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 100%;
    max-width: 800px;
    margin:0 auto;
}

.accordion-area li{
    margin: 0 0 30px 0;
}

.accordion-area section {
	padding: 0;
    margin: 0;
}






/*切り替え*/
.bopen {
    font-size: 10px;
    cursor: pointer;
   background-color: #fff;   
}

.bopen.touch {
   background-color: #ccc;   
}




/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 0;
    margin: 0 0 3px 0;
    transition: all .5s ease;
}


.youyaku {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 1rem;
    font-weight: normal;
    padding: 3% 3% 3% 70px;
    transition: all .5s ease;
}


/*アイコンの＋と×*/
.youyaku::before,
.youyaku::after {
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}

.youyaku::before {
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}

.youyaku::after {    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

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

.youyaku.close::after {
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
	margin: 0 0 3px 0;
    padding: 2px 20px;
}

.ybox {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
	margin:0 3% 3% 3%;
    padding: 3%;
}