@charset "utf-8";

/* メンバー情報の開閉ボタン */
.member-info-toggle-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  /* position: relative; */
  display: inline-flex;
  align-items: center;
  gap: .4em;
  /* 右側に矢印ぶんの余白 */
  background: transparent;
  /* 親要素の背景に馴染ませる */
  border: none;
  color: inherit;
  /* 親の文字色を継承 */
  font: inherit;
  /* 親と同じフォント */
  cursor: pointer;
}

/* 文字の右側に > 風の山形アイコンを描く */
.member-info-toggle-btn::after {
  --chev-size: .8em;
  /* 矢印サイズ調整用 */

  content: "";
  width: var(--chev-size);
  height: var(--chev-size);

  margin-top: -2px;
  margin-left: 6px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(45deg) translateY(-1px);
  /* ▼（下向き） */
  transform-origin: 50% 50%;
  transition: transform .22s ease;
}

/* 開いた状態では ▲（上向き）にする */
/* JS側で .is-open クラスを付け替える想定 */
.member-info-toggle-btn.is-open::after {
  transform: rotate(-135deg) translateY(1px);
  margin-top: 2px;
}

/* キーボード操作時の見え方（任意） */
.member-info-toggle-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


@media screen and (max-width:1199px) and (min-width:750px) {

  /* 文字の右側に > 風の山形アイコンを描く */
  .member-info-toggle-btn::after {
    --chev-size: .6em;
    /* 矢印サイズ調整用 */
  }
}

@media screen and (max-width:749px) {

  /* 文字の右側に > 風の山形アイコンを描く */
  .member-info-toggle-btn::after {
    --chev-size: .5em;
    /* 矢印サイズ調整用 */
  }

}