/*右上／ペンタフの安全対策*/
.side-panel_2 {
width: 400px;
/*height: 226px;*/
position: absolute;
/*position: fixed;*/
right: 0px;
top: 9%;
transform: translateY(-9%);
z-index: 20;
transform: translateX(0);  /* 初期状態：表示 */
transition: transform 0.4s ease; /* アニメーション */
}

/* 非表示状態 */
.side-panel_2.hidden {
  transform: translateX(100%); /* 右にスライドして消える */
}

.side-panel_2 video {
width: 400px;
height: 196px;
}
.side-panel_2 video,
.side-panel_2 img {
  vertical-align: bottom; /* または top, middle */
}
.bannerclose-btn {
width: 400px;
/*  border: none;*/
  color: #fff;
  font-size: 180%;
  line-height: 1.2!important;
  width: 1.5em;
  cursor: pointer;
  background-color: rgba(0,0,0,0.8);
  display: flex;  /* 1. Flexboxを有効にする */
  justify-content: center;  /* 2. 主軸（デフォルトは水平方向）で中央に配置 */
  align-items: center;  /* 3. 交差軸（垂直方向）で中央に配置 */
  border-bottom: 1px solid #888;
  border-top: none;
  border-right: none;
  border-left: none;
  margin-left: auto;
}
.bannerclose-btn:hover {
color: #36afee!important;
}

/* OPENボタン：右端中央に縦長 */
.s_open-btn {
  position: fixed;
  top: 20%;
  right: 0;
  transform: translateY(-20%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  padding: 1rem 0.5rem 1rem 0.7rem;
/*  writing-mode: vertical-rl;  /* 縦書きにする */
/*text-orientation: mixed;*/
  cursor: pointer;
  font-size: 1rem;
  z-index: 9998;
  display: none; /* 初期状態は非表示 */
  border-radius: 4px 0 0 4px;
}

.s_open-btn:hover {
color: #1b95d4!important;
/*  opacity: 0.6;*/
}

/* パネルが閉じているときにOPENボタン表示 */
.side-panel_2.hidden ~ .s_open-btn {
  display: block;
}