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

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

.accordion-area section {
  margin: 0 0 40px 0;
  border: 2px solid #0c199d;
  border-radius: 5px;
  box-shadow: 0 0 10px rgb(197, 197, 197);
  background-color: #ffffff;
}

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

/*アイコンの＋と×*/
.title::before,
.title::after {
  position: absolute;
  width: 15px;
  height: 2px;
  background-color: #333333;
  content: "";
}
.title::before {
  top: 48%;
  left: 15px;
  transform: rotate(0deg);
}
.title::after {
  top: 48%;
  left: 15px;
  transform: rotate(90deg);
}

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

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

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

/*アコーディオンで現れるエリア*/
.box {
  display: none; /*はじめは非表示*/
  margin: 0 3% 3% 3%;
  padding: 3% 3% 0 3%;
  background: #f9f9f9;
}
/********************
Q&A　テキストエリア
***********************/

.qa-002 dt,
.qa-002 dd {
  display: flex;
  align-items: normal;
  position: relative;
  margin: 5px 5px 0 0;
  padding: 0 0.6em 0 3.1em;
  color: #333333;
}

.qa-002 dt {
  font-weight: 600;
}

.qa-002 dd + dt {
  margin-top: 0.1em;
}

.qa-002 dt::before,
.qa-002 dd::before {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.2em;
  line-height: 30px;
  text-align: center;
}

.qa-002 dt::before {
  background-color: #0068b7;
  content: "Q";
}

.qa-002 dd::before {
  background-color: #bd0202;
  content: "A";
}

.q-text {
  font-weight: bold;
  font-size: 22px;
  line-height: 1.6em;

  font-feature-settings: "palt";
}

.a-text {
  font-weight: normal;
  font-size: 18px;
  line-height: 1.6em;

  font-feature-settings: "palt";
}

@media screen and (max-width: 800px) {
  .accordion-area {
    width: 96%;
  }
  .accordion-area section {
    margin: 0 0 20px 0;
    border: 2px solid #004190;
    border-radius: 5px;
    box-shadow: 0 0 5px rgb(197, 197, 197);
    background-color: #ffffff;
  }
  .qa-002 dt::before,
  .qa-002 dd::before {
    font-size: 1em;
  }
  .q-text {
    font-size: 18px;
    line-height: 1.6em;
  }
  .a-text {
    font-size: 18px;
    line-height: 1.7em;
  }
}