@charset "utf-8";

.l-content .side-bar {
 position: fixed;
 bottom: 0;
 text-align: center;
 z-index: 1000;
 background-color: #ffcc00;
 padding: 10px;
 left: 0;
 width: 100%;
}

.l-content .side-bar--width {
 display: flex;
 align-items: center;
 column-gap: 10px;
 max-width: 91%;
 flex-wrap: wrap;
}

.l-content .side-bar .h-side-bar {
 padding: 10px;
 font-size: 18px;
 font-weight: bold;
}

.l-content .side-bar .item {
 background-color: #000000;
 padding: 7px 10px 7px 10px;
 border: 1px solid #e2e2e2;
 border-width: 0 0 1px 0;
 font-weight: bold;
 cursor: pointer;
 margin: 3px 0;
 border-radius: 5px;
 font-size: 14px;
}

.l-content .side-bar .item a {
 text-decoration: none;
}

.l-content .side-bar .item a {
 color: #ffffff;
}

.l-content .side-bar .item:hover {
 opacity: 0.8;
}

@media screen and (max-width: 1400px) {
 .l-content .side-bar .h-side-bar {
  display: flex;
  align-items: center;
 }

 .l-content .side-bar .item {
  display: flex;
  align-items: center;
 }
}

@media screen and (max-width: 992px) {
 .l-content .side-bar--width {
  max-width: 90%;
 }
}

@media screen and (max-width: 767px) {
 .l-content .side-bar {
  display: none;
 }
}