/* accordion more */
@media screen and (min-width: 769px) {
  .js-accordion-more-btn {
    display: none !important;
  }
}

.ui-accordion-more {
  position: relative;
}
/* ボタン */
.ui-accordion-more__btn {
  background-color: #666;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  line-height: 36px;
  vertical-align: middle;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  left: auto;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
  transition: all .2s;
  z-index: 1;
}
/* 続きを読むボタンの表記 */
.ui-accordion-more__btn::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 30px;
    content: '\e313';
}
/* ボタンhover時のスタイル */
.ui-accordion-more__btn:hover {

}

.ui-accordion-more__contents {
  overflow: hidden;
  max-height: 100px; /* 初期高さ */
  transition: max-height 0.4s ease;
  position: relative;
}
/* 最初に見えてるテキストエリアの高さ */
.ui-accordion-more__contents.is-hide {
  max-height: 100px; /* 閉じ状態の高さ */
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
/* テキストをグラデーションで隠す */
.ui-accordion-more__contents::before {
  bottom: 0;
  content: "";
  height: 60px; /* グラデーションで隠す高さ */
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  width: 100%;
}
/* 閉じるボタンの位置 */
.ui-accordion-more__btn.is-show {
  bottom: 0;
}
/* 閉じるボタンの表記 */
.ui-accordion-more__btn.is-show::after {
  font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 30px;
    content: '\e316';
}
/* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
.ui-accordion-more__btn.is-show + .ui-accordion-more__contents::before {
  display: none;
}