/* アコーディオンメニュー全体のサイズ・位置 */
.ac {
  width: 100%;
  margin: 0 auto;
}

/* クリック領域 */
.ac-parent {
  position: relative;  /* 追加 */
  border-bottom: 1px solid #fff;
  text-align: center;
  line-height: 3;
  cursor: pointer;
}

/* 擬似要素で下三角形を作成 */
.ac-parent:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 45%;
  right: 30px;
  width: 10px;
  height: 10px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  transition: .3s;
}

/* オープン時にopenクラスを付与 */
.ac-parent.open:after {
  transform: rotate(225deg);
}
/* クリックしたら表示される領域 */
.ac-child {
  display: none;
  text-align: center;
}
.ac-child:first-of-type {
  display: block;
}
.ac-child li {
    border: 1px solid #ccc;
    line-height: 3;
    border-top: none;
}
.ac-child li a {
    text-decoration: none;
    transition: all .3s 0s ease;
    display: block;
}
.ac-child li a:hover {
    opacity: .8;
    background:rgba(255,255,255,0.2);
}