<!-- ========================================  
  グラデーションで隠して「もっと見る」で開閉 02 
========================================  -->
<section id="accordion-02">

  <div class="accordion-area">
    <div class="accordion-btn accordion-02__Trigger"><span></span></div><!-- js-Trigger -->

    <h3>アコーディオンタイトル</h3>
    <p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキスト<br>
    </p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキスト<br>
    </p>
    <img src="img/accordion01.jpg" alt="アコーディオン1">
    <img src="img/accordion02.jpg" alt="アコーディオン2">
  </div>

</section>

/* =================================== */
/*   グラデーションで隠して「もっと見る」で開閉02  */
/* =================================== */
#accordion-02 .accordion-area{
  position: relative;
  width: 100%;
  max-width: 820px;
  height: 350px;
  margin: 0 auto;
  padding: 60px 20px 120px;
  background-color: #ebf9fa;
  border: solid 1px #333;
  overflow: hidden; /* 高さ指定で表示を隠す */
  /* heightをjsで設定 */
}

/* ボタンの装飾 */
#accordion-02 .accordion-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 55%;
  margin: 0 auto;
  background: linear-gradient(rgba(255,255,255,0) 20%,rgba(255,255,255,0.7) 40% , rgba(255,255,255,1) 60% );
}
#accordion-02 .accordion-btn span {
  position: absolute;
  display: block;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 320px;
  margin: 0 auto;
  background-color: #FFF;
  border: solid 1px #333;
  color: #333;
  font-size: 18px;
}
#accordion-02 .accordion-btn span::before {
  content: "もっと見る";
  padding-right: 1em;
  line-height: 60px;
}
#accordion-02 .accordion-btn span::after {
  content: "＋";
}

/* クリックされた時の動作 */
#accordion-02 .accordion-btn.is-open {
  background: none;
}
#accordion-02 .accordion-btn.is-open span::before {
  content: "閉じる";
}
#accordion-02 .accordion-btn.is-open span::after {
  content: "ー";
}


/* 装飾用 */
#accordion-02 {
  padding: 0 20px;
}
#accordion-02 .accordion-area h3 {
  margin-bottom: 40px;
  font-size: 24px;
}
#accordion-02 .accordion-area p {
  margin-bottom: 60px;
  font-size: 16px;
  line-height: 1.8;
}
#accordion-02 .accordion-area img {
  width: 100%;
  max-width: 430px;
  margin: 0 auto 40px;
}

// ==========================================
//  グラデーションで隠して「もっと見る」で開閉 02
// ==========================================

$('.accordion-02__Trigger').click(function(){
  if ($(this).hasClass("is-open")) {
    $(this).removeClass("is-open")
    $(".accordion-area").animate({ height: 350 }, 500)
  }
  else {
    $(this).addClass("is-open")
    $(".accordion-area").animate({ height: 1560 }, 500)
  }
  });