@charset "utf-8";
/* バナー全体の位置を固定 */
.side-banner {
  position: fixed;       /* スクロールしても固定 */
  top: 50%;              /* 画面縦配置 */
  left: 0;              /* 端に固定 */
  transform: translateY(-50%); /* 上下中央に調整 */
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 10px;             /* ボタン同士の間隔 */
  z-index: 1000;         /* 他要素より前面に出す */
}

/* ボタン共通のスタイル */
.banner-button {
  display: flex;               /* 中央揃えのため flex に */
  align-items: center;         /* 縦中央 */
  justify-content: center;     /* 横中央 */
  width: 35px;                 /* 幅 */
  height: 150px;               /* 高さを大きくして縦長に */
  background-color: #333;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;         /* width の半分にすると縦丸に */
  font-weight: bold;
  transition: background-color 0.3s;
  writing-mode: vertical-rl; /* 縦書きにする */
  text-orientation: upright; /* 文字を縦向きに */
font-size: 15px; /*文字のサイズ*/
font-family: "Yu Gothic", "游ゴシック", sans-serif;
font-weight: bold;

}
/* ホバー時 */
.banner-button:hover {
  background-color: #ddd;
  color: #000; 
}

/* LINE専用色 */
.banner-button.line {
  background-color: #636463;
}

.banner-button.line:hover {
  background-color: #ddd;
  color: #000; 
}

@media (max-width: 768px) {
  .side-banner {
    display: none; /* スマホでは非表示 */
  }
}