/* アコーディオン全体の設定 */
.accordion {
  width: 98%;
  margin: auto;
  line-height: normal;
}

/* 各質問＋回答ブロック */
.accordion-item {
  margin: 5px 0;
}

/* 質問の見出し部分 */
.accordion-open {
  display: block;
  padding: 10px 80px 10px 2.5em; /* 左に余白をとってQマークが被らないように */
  background: #E8E8E8;
  color: #555;
  cursor: pointer;
  position: relative;
  font-size: 14px;
}

/* ＋記号の縦棒と横棒を ::before と ::after で作る */
.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #555;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* 横棒（ー）を90度回転して縦棒に見せて＋マークにする */
.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アクティブ状態：クリックされたら横棒（ー）だけにする */
.accordion-item.active .accordion-open::after {
  transform: translateY(-50%) rotate(0);
}

/* 回答部分（初期状態：非表示） */
.accordion-inner {
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s; /* スムーズな開閉 */
  font-size: 14px;
}

/* 回答部分（表示状態） */
.accordion-item.active .accordion-inner {
  height: auto;
  opacity: 1;
  padding: 10px 10px 10px 2.5em;
}

/* Q・Aのラベルスタイル */
.accordion_qa .Q,
.accordion_qa .A {
  position: relative;
}

/* Q. と A. の表示設定 */
.accordion_qa .Q::before,
.accordion_qa .A::before {
  font-size: 14px;
  display: block;
  position: absolute;
  top: -0.3em;
  left: -1.3em;
}

/* Qラベルに "Q." を表示 */
.accordion_qa .Q::before {
  content: 'Q.';
}

/* Aラベルに "A." を表示 */
.accordion_qa .A::before {
  content: 'A.';
}

/* Q&A追加ここまで */


/* 中にいろいろ入れたいとき */
.accordion-box {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 1s;
}

.accordion-hidden:checked+.accordion-open+.accordion-box {
  height: auto;
  opacity: 1;
  padding: 10px;
}



/*カテゴリーもアコーディオンにする場合*/
.accordion-category-open {
  display: block;
  cursor: pointer;
  font-weight: bold;
	
	color: #FFF;
font-size: 16px;
font-size: 1.6rem;
padding: 7px 10px 5px 10px;
margin: 0px 0px 0px 0px;
line-height: 150%;
border: 0px solid #C56D8E;
background: linear-gradient(to right, rgba(201, 95, 130),rgba(205, 113, 146));
border-radius: 6px;
	position: relative; 
}

.accordion-category-inner {
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}

.accordion-category-item.active .accordion-category-inner {
  height: auto;
  padding: 5px 0;
}

/* カテゴリーの＋／－ */
/* ＋記号の縦棒と横棒を ::before と ::after で作る */
.accordion-category-open::before,
.accordion-category-open::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* 横棒（ー）を90度回転して縦棒に見せて＋マークにする */
.accordion-category-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アクティブ状態：クリックされたら横棒（ー）だけにする */
.accordion-category-item.active .accordion-category-open::after {
  transform: translateY(-50%) rotate(0);
}