.container-custom {
  max-width: 900px;
  margin: auto;
}

/* ボタン共通スタイル */
.escape-btn, .unescape-btn {
  width: 140px!important; /* ボタンの幅 */
  height: 50px; /* ボタンの高さ */
  border: none;
  padding: 0;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 10px;
}

/* エスケープボタン（右向き矢印 `⇒`） */
.escape-btn {
  background-color: #007bff;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}

/* アンエスケープボタン（左向き矢印 `⇐`） */
.unescape-btn {
  background-color: #6c757d;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
}

/* スマホ用（上下矢印） */
@media (max-width: 767px) {
  .btn-group-vertical {
    flex-direction: row;
    gap: 1rem;
  }

  .escape-btn {
      width: 120px;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px));
  } /* 下向き矢印 ⇓ */

  .unescape-btn {
      width: 120px;
      clip-path: polygon(0 15px, 50% 0, 100% 15px, 100% 100%, 0 100%);
  } /* 上向き矢印 ⇑ */
}