/*アコーディオン全体*/


.accordion-area{
  list-style: none;
  width: 90%;
  margin:0 auto;
}


.accordion-li{
  margin: 1% 0;
}

/*アコーディオンタイトル*/
.title {
  position: relative;/*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-weight: normal;
  letter-spacing: 0.1em;
  border: 0.1vw solid #0b4f41;;
  padding: 3% 3% 3% 8%;
  transition: all .5s ease;
}

.accordion-li div{
  border: 0.1vw solid #0b4f41;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
  position: absolute;
  content:'';
  width: 1.5vw;
  height: 0.2vw;
  background-color: #333;
  
}
.title::before{
  top:48%;
  right: 5vw;
  transform: rotate(0deg);
  
}
.title::after{    
  top:48%;
  right: 5vw;
  transform: rotate(90deg);
}

.title.close{
  background-color: #0b4f41;
  color: white;
}

/*　closeというクラスがついたら形状変化　*/
.title.close::before{
transform: rotate(45deg);
background-color: white;
}

.title.close::after{
transform: rotate(-45deg);
background-color: white;
}

/*アコーディオンで現れるエリア*/
.accordion-li .box {
  display: none;/*はじめは非表示*/
  border: none;
  margin:0 3% 3% 3%;
  padding: 3%;
}