code_note

<!-- ========================================  
  アコーディオンメニュー 
========================================  -->
<section id="accordion-Nml">

  <div class="wrapper">
    <dl class="list">
      <dt class="list_q accordion-Nml__trigger">よくある質問０１</dt>
      <dd class="list_a">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd>
    </dl>
    <dl class="list">
      <dt class="list_q accordion-Nml__trigger">よくある質問０２
      </dt>
      <dd class="list_a">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd>
    </dl>
  </div>

</section>


/* =================================== */
/*   アコーディオンメニュー  */
/* =================================== */
#accordion-Nml .wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}
#accordion-Nml .list {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  border-bottom: 1px solid #CBCBCB;
}

/* アコーディオントリガーエリア */
#accordion-Nml .list_q {
  display: flex;
  align-items: center;
  padding: 10px 0 10px 2em;
  color: #EE847D;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  cursor: pointer;
}
#accordion-Nml .list_q::before {
  content: "";
  position: absolute;
  left: 0 ;
  width: 30px;
  height: 30px;
  background-image: url(img/icon_q.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
/* 矢印の動き */
#accordion-Nml .list_q::after {
  content: "";
  position: absolute;
  right: 30px;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #EE847D;
	border-left: 2px solid #EE847D;
  transform: rotate(-45deg);
  transition: all .5s ease;
}
  /* .closeが付いたら形状変化 */
#accordion-Nml .list_q.close::after {
  transform: rotate(135deg);
}

/* アコーディオンで現れるエリア */
#accordion-Nml .list_a {
  display: none;  /*はじめは非表示*/
  position: relative;
  padding: 10px 0 10px 2.5em;
  font-size: 1.6rem;
  line-height: 1.5;
}
#accordion-Nml .list_a::before {
  content: "";
  position: absolute;
  left: 0 ;
  width: 30px;
  height: 30px;
  background-image: url(img/icon_a.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

// ==========================================
//  アコーディオンメニュー 
// ==========================================
//アコーディオンをクリックした時の動作
$('.accordion-Nml__trigger').on('click', function() {//タイトル要素をクリックしたら
  var findElm = $(this).next(".list_a");//直後のアコーディオンを行うエリアを取得し
  $(findElm).slideToggle();//アコーディオンの上下動作
    
  if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
    $(this).removeClass('close');//クラス名を除去し
  }else{//それ以外は
    $(this).addClass('close');//クラス名closeを付与
  }
});

アコーディオンエリア