@font-face{
  font-family: IBMPlexSansJP;
  src: url("font/IBMPlexSansJP-Regular.otf") format("opentype");
  font-display: swap;
}

body{
  background: #e0e0e0; /* IBM Gray 020 */
  font-family: IBMPlexSansJP;
  padding-top: 3.5rem;
}

h5{
  margin-bottom: 0;
}

hr{
  margin: 0;
}

div.list-group > a > small{
  font-size: 0.75em;
}

a.works_card{
  text-decoration: none;
  color: #000;
}

a:hover .top_banner{
  filter: brightness(1.1);
  transition: filter 0.3s ease;
}

a:hover > .card > .card-img-top{
  filter: brightness(1.15);
  transition: filter 0.3s ease;
}

.badge{
  position: relative;
  top: -2px;
}

.bg-ibmblue070{
  background: #0043CE;
  color: #fff;
}

.bg-ibmgray070{
  background: #525252;
  color: #fff;
}

.bg-ibmgray010{
  background: #f4f4f4;
}

.bg-ibmmagenta060{
  background-color: #d02670; /* IBM Magenta 60 */
  color: #fff;
}

.bg-ibmteal060{
  background-color: #007d79; /* IBM Teal 60 */
  color: #fff;
}

.h-44{
  height: 44px;
}

.h-22{
  height: 22px;
}

.mb-22{
  margin-bottom: 22px;
}

.row {
  --bs-gutter-x: 10px;
}

.cardthumb_yt{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.lead > div.btn-group > .btn{
  padding: 0.15rem .75rem;
}

@media (min-width: 576px) {
  .fixed-top{
    right: calc((100% - 540px) / 2);
    left: calc((100% - 540px) / 2);
  }
}
@media (min-width: 768px) {
  .fixed-top{
    right: calc((100% - 720px) / 2);
    left: calc((100% - 720px) / 2);
  }
}
@media (min-width: 992px) {
  .fixed-top{
    right: calc((100% - 960px) / 2);
    left: calc((100% - 960px) / 2);
  }
}
@media (min-width: 1200px) {
  .fixed-top{
    right: calc((100% - 1140px) / 2);
    left: calc((100% - 1140px) / 2);
  }
}
@media (min-width: 1400px) {
  .fixed-top{
    right: calc((100% - 1320px) / 2);
    left: calc((100% - 1320px) / 2);
  }
}