/* ================================================================================================

　BOX：Q&A

=================================================================================================== */

/* ▼ Q&A -------- */

/* ↓ ボックス全体*/
.qa-list dl {
  margin: 20px 0px 0px ;/*余白：上　左右　下 */
  cursor: pointer;/* 要素にマウスを乗せたときに、カーソルがポインターに変化 */
  position: relative;/* 位置指定：基準*/
  }
.qa-list dl:first-child {margin-top: 0;}/* 最初のボックスだけ上の余白0px*/

/*-----------------------------------------------------------*/  

/* ▼  質問 -------- */

/* ↓ 質問:枠 */
.qa-list dl dt {
  background: #898989;/*背景の色*/
  padding: 20px 70px;/*BOX内の余白：上下 左右*/
  position: relative;/* 位置指定：基準*/
  }

/* ↓ 質問:文字 */
.q_text{
  color: #FFFFFF;/*色*/
  font-size: 18px;/*「サイズ*/
  font-weight: bold;/*文字の太さ*/
  text-align: left;
  }

/* ↓ 質問：「Q」 */
.q_text:before {
  content: 'Q.';
  color: #DEB971;/*「Q」の色*/
  font-size: 25px;/*「Q」のサイズ*/
  position: absolute;/* 位置指定：要素の配置方法を指定*/
  top: 15px;/*上からの位置*/
  left:20px;/*左からの位置*/
  }

/* ↓ 質問：「V」 */
.qa-list dl:after {
  content: '';
  width: 15px;/*「V」の横幅*/
  height: 15px;/*「V」の縦幅*/
  transform: rotate(135deg);/*135°回転*/
  border-top: 3px solid #DEB971;/*「V」の線の太さと色*/
  border-right: 3px solid #DEB971;/*「V」の線の太さと色*/
  position: absolute;/* 位置指定：要素の配置方法を指定*/
  top: 20px;/*上からの位置*/
  right: 20px;/*右からの位置*/
  display: block;
  }
.qa-list .open::after {
  transform: rotate(-45deg);
  top: 30px;/*上からの位置*/
  }

/*-----------------------------------------------------------*/  

/* ▼  回答 -------- */

/* ↓ 回答：枠*/
.qa-list dl dd {
  background: #FFFFFF;/*背景の色*/
  padding: 20px 70px;/*BOX内の余白：上下 左右*/
  position: relative;/* 位置指定：基準*/
  }

/* ↓ 回答：文字*/
.a_text{
  color: #0E0000;/*文字の色*/
  font-size: 16px;/*文字のサイズ*/
  font-weight: bold;/*文字の太さ*/
  margin: 0px;/*余白*/
  }

/* ↓ 回答：「A」*/
.a_text::before {
  content: 'A.';
  color: #B81C2B;/*「A」の色*/
  font-size: 25px;/*「A」のサイズ*/
  font-weight: bold;/*「A」の太さ*/
  position: absolute;/* 位置指定：要素の配置方法を指定*/
  top: 15px;/*上からの位置*/
  left: 20px;/*左からの位置*/
  }


/* ***************************************************************************************
レスポンシブ設定
****************************************************************************************** */

/* ▼ スマホ：760px以下の幅の場合に適応される////////////////////////////////*/
@media screen and (max-width:760px){

/* ▼ Q&A -------- */

/* ↓ ボックス全体*/
.qa-list dl {margin: 20px 0px 0px ;/*余白：上　左右　下 */}

/*-----------------------------------------------------------*/  

/* ▼  質問 -------- */

/* ↓ 質問:枠 */
.qa-list dl dt {padding: 10px 50px;/*BOX内の余白：上下 左右*/}

/* ↓ 質問:文字 */
.q_text{
  font-size: 15px;/*「サイズ*/
  text-align: center;
  }

/* ↓ 質問：「Q」 */
.q_text:before {
  font-size: 20px;/*「Q」のサイズ*/
  top: 18px;/*上からの位置*/
  left:15px;/*左からの位置*/
  }

/* ↓ 質問：「V」 */
.qa-list dl:after {
  width: 10px;/*「V」の横幅*/
  height: 10px;/*「V」の縦幅*/
  top:28px;/*上からの位置*/
  right: 15px;/*右からの位置*/
  }

/*-----------------------------------------------------------*/  

/* ▼  回答 -------- */

/* ↓ 回答：枠*/
.qa-list dl dd {padding: 10px 15px 10px 50px ;/*BOX内の余白：上下 左右*/}

/* ↓ 回答：文字*/
.a_text{
  font-size: 14px;/*文字のサイズ*/
  text-align: left;
  }
  

/* ↓ 回答：「A」*/
.a_text::before {
  font-size: 20px;/*「A」のサイズ*/
  top: 18px;/*上からの位置*/
  left: 15px;/*左からの位置*/
  }

}/*//////////////////////////////////////////////////////////////////////*/


/* ▼ タブレット：760pxから1280pxまでの幅の場合に適応される///////////////////*/
@media screen and (min-width:761px) and (max-width:1280px){

}/*//////////////////////////////////////////////////////////////////////*/


/* ▼ パソコン：1281pxから1600pxの幅の場合に適応される///////////////////////*/
@media screen and (min-width:1281px) and (max-width:1600px){

}/*//////////////////////////////////////////////////////////////////////*/