@charset "UTF-8";
/*アコーディオン全体*/
.accordion-area {
  list-style: none;
  width: 96%;
  max-width: 900px;
  margin: 0 auto;
}

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

/*アコーディオンタイトル*/
.accordion_title_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.accordion_title {
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  position: relative;
  /*▼マークの位置基準とするためrelative指定*/
  cursor: pointer;
  padding: 2% 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* 逆三角矢印▼（画像）の大きさ調整 */
.spec_button {
  width: 37px;
  height: 33px;
}

.accordion_title_end {
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  position: relative;
  /*▲マークの位置基準とするためrelative指定*/
  cursor: pointer;
  padding: 3% 3%;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.accordion_title_end::before {
  position: absolute;
  content: "";
  width: 15px;
  height: 2px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  top: -30%;
  left: 48%;
  border: 18px solid transparent;
  border-top: 28px solid #555;
}

/*　closeというクラスがついたら▼は非表示　*/
.accordion_title.close::after {
  display: none;
}

/*　closeというクラスがついたら「閉じる」は非表示　*/
.accordion_title_end.colse {
  display: none;
}

/*　closeというクラスがついたら▲は非表示　*/
.accordion_title_end.close::before {
  display: none;
}

/*アコーディオンで現れるエリア*/
.accordion_box {
  display: none;
  /*はじめは非表示*/
  /* background: #f3f3f3; */
  padding: 7% 0;
}

/*==================== ↓メディアクエリによるレスポンシブここから↓ ==========================*/
/* レスポンシブ（1010px） */
@media (max-width: 1010px) {
  /* 三角矢印▲（疑似要素で作成）の位置調整 */
  .accordion_title_end::before {
    top: -34%;
    left: 47.5%;
  }
}
/* レスポンシブ（940px） */
@media (max-width: 940px) {
  /* 三角矢印▲（疑似要素で作成）の位置調整 */
  .accordion_title_end::before {
    top: -39%;
    left: 47%;
  }
}
/* レスポンシブ（860px） */
@media (max-width: 860px) {
  .accordion_title_end::before {
    top: -50%;
    left: 47%;
  }
}
/* レスポンシブ（768px） */
@media (max-width: 768px) {
  .accordion_box {
    display: none;
    /*はじめは非表示*/
    /* background: #f3f3f3; */
    padding: 14% 0;
  }
  .accordion_title_end::before {
    top: -56%;
    left: 47%;
  }
}
/* レスポンシブ（680px） */
@media (max-width: 680px) {
  .accordion_title_end::before {
    top: -60%;
    left: 47%;
  }
}
/* スマホ（570px）レスポンシブ ここから*/
@media (max-width: 570px) {
  .accordion_title_end::before {
    top: -73%;
    left: 46%;
  }
}
/* レスポンシブ（450px） */
@media (max-width: 450px) {
  /* 逆三角矢印▼（画像）の大きさ調整 */
  .spec_button {
    width: 30px;
    height: 26px;
  }
  .accordion_title_end::before {
    top: -64%;
    left: 46%;
    border: 15px solid transparent;
    border-top: 24px solid #555;
  }
}
/* レスポンシブ（400px） */
@media (max-width: 400px) {
  .accordion_title_end::before {
    top: -77%;
    left: 44.5%;
  }
}
/*# sourceMappingURL=accordion.css.map */