.marquee{
  display: none;
}

#message{
  width: 460px;
  line-height: 45px;
  height: 45px;
  padding-left: 64px;
  /* background: url(../images/message_sp.png) left 0px center no-repeat #B93127; */
  margin: 0 auto 20px auto;
  overflow: hidden;
  position: absolute;
  right: 287px;
  top: 12px;
  color: #FFF;
  margin-bottom: -0px;
  filter: drop-shadow(0px 3px 6px #540000);
  z-index: 8;
}
#message .message_left {
  background: url(../images/message_left_pc.png) left 0px center no-repeat;
  width: 73px;
  height: 45px;
  position: absolute;
  left: 0;
}
#message li{
  font-weight: bold;
  font-size: 18px;
}
#message ul.marquee {
  display: block;
  padding: 0;
  list-style: none;
  line-height: 1;
  line-height: 42px;
  position: relative;
  overflow: hidden;
  width: 430px;
  height: 45px;
  margin-top: 0px;
  margin-bottom: 0px;
}
#message ul.marquee li {
  /* required styles */
  position: absolute;
  top: -999em;
  left: 0px;
  display: block;
  white-space: nowrap; /* keep all text on a single line */
  /* optional styles for appearance */
}
#message ul.marquee li span{
  color: #FFE005;
  margin-right: 15px;
  font-size: 20px;
}

/***********************************************************************
  「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
  **********************************************************************/
@media all and (min-width: 751px) {
  .pc_non {
    display: none;
  }

#message {
  filter: drop-shadow(0px 3px 6px #540000);
}
#message::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px; /* ←傾ける方向と角度に合わせて調整 */
  width: calc(100% + -30px); /* ←傾けても端が途切れないように幅を拡張 */
  height: 100%;
  background: url(../images/message_sp.png) left center no-repeat #B93127;
  background-size: cover;
  transform: skewX(-17deg);
  transform-origin: left;
  z-index: -1;
  border: 1px solid #FFF8B9;
  box-sizing: border-box;
}
#message ul {
  padding: 0 !important;
  padding-inline-start: 0 !important;
}
#message ul.marquee li {
  /* required styles */
  position: absolute;
  top: -999em;
  left: 0px;
  display: block;
  white-space: nowrap; /* keep all text on a single line */
  /* optional styles for appearance */
  margin-top: 0;
}

}

/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
**********************************************************************/
@media only all and (max-width: 750px) { 

  #message{
    width: 100%;
    overflow: hidden;
    position: relative;
    top: -21px;
    left: 0;
  }
#message {
  padding-left: 85px;
  background: url(../images/message_sp.png) left 0px center no-repeat #B93127;
  line-height: 60px !important;
  height: 60px !important;
  /*visuとの上下空き*/
  margin: 0 auto;
  border-top: 1px solid #FFF8B9;
  border-bottom: 1px solid #FFF8B9;
}
#message .message_left {
  background: url(../images/message_left_sp.png) left 0px center no-repeat;
  width: 85px;
  height: 60px;
  position: absolute;
  left: 0;
}
#message ul.marquee{
  width: 670px;
  line-height: 60px;
  height: 60px;
}
#message li{
  font-weight: bold;
  font-size: 26px;
}
#message ul.marquee li span{
  color: #FFE005;
  margin-right: 15px;
  font-size: 26px;
}
#message ul.marquee li {
  margin-top: 0;
}

}