/* main.scssにおまとめください。 */
/* サイドバナー */
.sdbn {
  z-index: 10;
  position: fixed;
  right: 0;
  top: 50%;
  background-color: #ef9091;
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: #fff;
  width: 60px;
  height: 200px;
  border-radius: 10px 0 0 10px; }
  .sdbn a {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    writing-mode: vertical-rl;
    letter-spacing: .15em;
    white-space: nowrap;
    padding-top: 40px; }
    .sdbn a::before {
      position: absolute;
      content: "";
      width: 37px;
      height: 32px;
      background-image: url(../img/common/icn-sdbn.png);
      background-repeat: no-repeat;
      background-size: contain;
      top: 0;
      left: 50%;
      transform: translateX(-50%); }

@media screen and (max-width: 800px) {
  .sdbn {
    top: auto;
    bottom: 0;
    width: 50vw;
    height: 20vw;
    font-size: 4vw;
    border-radius: 10px 0 0 0; }
    .sdbn a {
      padding-top: 0;
      writing-mode: horizontal-tb;
      padding-left: 7vw; }
      .sdbn a::before {
        width: 5vw;
        height: 4vw;
        top: 50%;
        left: 0;
        transform: translateX(0) translateY(-50%); } }