.post-flow-top-bar {
    justify-content: space-between;
    margin-block-start: 20px;
  & .post-flow-top-bar-title {
    font-size: 2.2rem;
  }
}
.data-item-header > div {
  display: flex;
  align-items: center;
}
.data-item-header .icon {
  margin: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.data-item-header .icon:has(.unknown) {
  display: none;
}
.data-item-header .icon .svg-icon-bg {
  width: 22px;
  height: 22px;
}
.svg-icon-bg.pc {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 -0.04 71.723 71.723' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m 501.28156,-2.1735885 29.37917,-4.038097 V 22.139534 h -29.37718 l -0.002,-24.3131225 z m 29.37917,27.9414675 v 28.030604 l -29.37551,-4.032487 -0.002,-23.996814 h 29.37719 v -0.0013 z m 3.24988,-32.4253395 39.09352,-5.3737875 V 22.139534 H 533.91061 V -6.6574605 z M 573.00416,25.767879 V 59.612757 L 533.91061,54.244251 V 25.767879 h 39.09355 z' fill='%2300bcf2' transform='translate(-501.282 12.031)'/%3e%3c/svg%3e");
}
.svg-icon-bg.ps4, .svg-icon-bg.ps5 {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.69116 21.9548C-0.506476 22.7935 -0.284724 24.2384 2.44769 25.1419C5.18011 26.0455 8.35603 26.2323 11.1505 25.729C11.0707 25.729 11.3102 25.729 11.1505 25.729V22.8774L8.43588 23.8C7.39792 24.1355 6.35997 24.2194 5.32202 23.9677C4.5236 23.7161 4.68328 23.2129 5.64139 22.7935L11.1505 20.7806V17.6774L3.48565 20.4452C2.52754 20.7806 1.56943 21.2839 0.69116 21.9548ZM19.2146 9.37419V17.5097C22.4881 19.1871 25.0431 17.5097 25.0431 13.1484C25.0431 8.70323 23.5261 6.69032 19.1348 5.09677C16.8193 4.25806 14.4241 3.50323 12.0288 3V27.2387L17.6178 29V8.61935C17.6178 7.69677 17.6178 7.02581 18.2565 7.27742C19.1348 7.52903 19.2146 8.45161 19.2146 9.37419ZM29.5941 20.0258C27.2787 19.1871 24.8036 18.8516 22.4083 19.1032C21.0779 19.1906 19.8294 19.5869 18.5759 20.0258V23.2968L23.7656 21.2839C24.8036 20.9484 25.8415 20.8645 26.8795 21.1161C27.6779 21.3677 27.5182 21.871 26.5601 22.2903L18.5759 25.3935V28.5806L29.5941 24.3032C30.3925 23.9677 31.1111 23.5484 31.7499 22.8774C32.3088 22.0387 32.0692 20.8645 29.5941 20.0258Z' fill='%230070D1'/%3e%3c/svg%3e");
}
.svg-icon-bg.xbox, .svg-icon-bg.xboxone, .svg-icon-bg.xboxsx {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0,0,256,256'%3e%3cg fill='%23009103' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'%3e%3cg transform='scale(5.12,5.12)'%3e%3cpath d='M25,2c-4.291,0 -8.38144,1.20078 -11.77344,3.30078c-0.219,0.073 -0.59741,0.36102 -0.94141,0.66602c3.045,-2.419 10.08658,2.42614 12.14258,3.86914c0.346,0.243 0.80048,0.243 1.14648,0c2.056,-1.443 9.09758,-6.28914 12.14258,-3.86914c-0.344,-0.305 -0.72341,-0.59302 -0.94141,-0.66602c-3.393,-2.1 -7.48439,-3.30078 -11.77539,-3.30078zM11,8c-1.597,0 -2.76367,1.30078 -2.76367,1.30078c-3.792,4.1 -6.18555,9.59922 -6.18555,15.69922c0,12.7 10.27722,23 22.94922,23c6.685,0 12.77189,-2.9 16.96289,-7.5c0,0 -0.4988,-3.00039 -3.5918,-7.40039c-3.459,-5.217 -10.46598,-11.78769 -12.70898,-13.80469c-0.383,-0.344 -0.95398,-0.34214 -1.33398,0.00586c-1.69,1.547 -6.05072,5.877 -7.01172,7c-2.295,2.4 -8.68108,9.99883 -9.08008,14.29883c0,0 -1.39769,-3.39922 1.69531,-11.19922c1.925,-4.686 7.90373,-11.65241 10.80273,-14.69141c0.385,-0.403 0.37575,-1.03987 -0.03125,-1.42187c-0.96,-0.899 -3.19784,-2.4745 -5.21484,-3.6875c-1.396,-0.9 -2.99128,-1.49961 -4.48828,-1.59961zM38.68945,8c-0.653,0 -4.89538,1.34283 -9.35937,5.29883c-0.422,0.374 -0.43887,1.02664 -0.04687,1.43164c1.617,1.671 6.03945,5.95092 8.68945,10.16992c3.293,5.4 5.28784,9.69961 4.08984,15.59961c3.692,-4.1 5.98828,-9.5 5.98828,-15.5c-0.1,-6 -2.3955,-11.49961 -6.1875,-15.59961c-0.1,-0.1 -0.19983,-0.20078 -0.29883,-0.30078c-0.798,-0.9 -1.977,-1.09961 -2.875,-1.09961z'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}
.svg-icon-bg.switch, .svg-icon-bg.ds {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='%23de0112' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke-linecap='round' stroke-linejoin='round'/%3e%3cg id='SVGRepo_iconCarrier'%3e%3cpath d='M0 0.803h9.469l13.129 21.197v-21.197h9.401v30.395h-9.385l-13.203-21.197v21.197h-9.412v-30.395z'/%3e%3c/g%3e%3c/svg%3e");
}
.filter-list {
  display: flex;
  margin: 0;
  gap: 10px;
  & .header {
    font-size: 1.8rem;
    margin: 0 0 10px 10px;
    text-transform: uppercase;
  }
  & .item {
    font-size: 1.4rem;
    padding: 5px 10px;
    display: block;
    color: var(--text-primary);
    background-color: var(--bg-button-secondary);
    border: 1px solid  var(--border-base);
    border-radius: 5px;
    &:hover {
      background-color: var(--bg-accent);
    }
    &.active {
      background-color: var(--bg-accent);
      color: var(--text-on-primary)
    }
  }
}
.data-item {
  scroll-margin-top: 90px;
  background-color: var(--bg-accent);
  padding: 15px;
  margin: 20px 0;
  border-radius: 5px;
}
.data-item:first-of-type .detail-data-items {
  display: block;
}
.data-item:first-of-type .listing {
  display: none;
}
.data-item-header .svg-icon-bg.pc {
  transform: rotate(180deg);
}
.summary-data-items {
  padding: 0 20px 5px 20px;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.6rem;
  font-weight: bold;
  align-items: center;
  cursor: pointer;
  & .listing {
    font-weight: normal;
    flex-grow: 1;
    flex-basis: calc(100% / 3);
    & > div {
      background-color: var(--bg-card);
      padding: 8px 12px;
      line-height: 1;
      margin: 6px 0;
    }
  }
  & .data-item-header {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1;

    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & .btn {
      background-color: transparent;
      display: inline-block;
      padding: 2px 10px;
      & span {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18px' height='18px' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23494c4e' d='M2.39 6.49a1.5 1.5 0 0 1 2.12-.1L9 10.47l4.49-4.08a1.5 1.5 0 0 1 2.02 2.22L10 13.62A1.474 1.474 0 0 1 9 14a1.523 1.523 0 0 1-1-.38L2.49 8.61a1.5 1.5 0 0 1-.1-2.12z'/%3e%3c/svg%3e ");
      }
    }
    &.active .btn span {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18px' height='18px' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23494c4e' d='M2.49 10.39L8 5.38A1.524 1.524 0 0 1 9 5a1.474 1.474 0 0 1 1 .38l5.51 5.01a1.5 1.5 0 0 1-2.02 2.22L9 8.53l-4.49 4.08a1.5 1.5 0 0 1-2.02-2.22z'/%3e%3c/svg%3e");
    }
  }
  & > div:last-child {
    text-align: right;
    
    & > div {
      align-self: baseline;
      min-width: 100px
    }
  }
  & .poster {
    width: 150px;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: #ccc;
    display: none;
  }
  
}
.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin: 10px 0;
}
.detail-data-items {
  display: none;
  padding: 0 10px 10px;
  border-radius: 5px;
  & .type-item {
    background-color: var(--bg-card);
    padding: 10px 25px;
    margin: 0 0 20px 0;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

& .product-item {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--border-base);
  & > div {
    display: block;
  }
  & .poster {
    margin: 0 20px 0 0;
    width: 150px;
    height: 80px;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #333;
    flex-shrink: 0;
    & img {
      max-height: 100%;
    }
  }
  & .info {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
  }
  & .name {
    line-height: 1;
  }
  & .secondary {
    margin-inline-start: auto;
    margin-inline-end: 20px;
  }
  & .aside {
    display: flex;
    align-items: center;
    & .price {
      color: #007521;
      white-space: nowrap;
      position: relative;
      min-width: 80px;
      text-align: right;
      & .footnote::after {
        content: '*';
        position: absolute;
        color: #b31919;
        top: -4px;
      }
    }
    & .steam-btn {
      background: rgba(145,186,1,1);
      background: linear-gradient(180deg, rgb(157, 201, 0) 0%, rgba(145,186,1,1) 100%);
      color: #fff;
      padding: 2px 10px;
      border-radius: 6px;
      & .price {
        color: #fff;
      }
      & .footnote::after {
        color: #fff;
      }
    }
  }
  .discount {
    background-color: var(--main-color);
    color: #fff;
    white-space: nowrap;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 1.2rem;
    margin-inline-end: 20px;
  }
  &:hover {
    color: #b31919;
  }
  &:hover .price {
    color: #b31919
  }
  &.more {
    font-weight: bold;
    cursor: pointer;
    &::after{
      content: "\2026";
    }
  }
}


.shop-shelf-table .btn:hover {
  text-decoration: none;
}

.shop-shelf-table .table {
  margin-bottom: 0;
}

.market-shelf-table col.first {
  width: 55%;
}

.shop-shelf-table .btn-link {
  padding: 5px;
  color: #ccc;
  cursor: help;
}
.shop-shelf-table th.text-center,
.shop-shelf-table td.text-center {
  text-align: center;
}

.shop-shelf-table .icon-thumbs-up {
  color: #aaa;
  float: right;
  font-size: 1.6rem;
}

.shop-shelf-table .icon-thumbs-up {
  cursor: help;
}

.shop-shelf-table .shop-price a {
  color: var(--text-primary);
}


.market-shelf-table td {
  vertical-align: top;
}

.market-shelf-table .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.market-shelf-table .offer-description {
  padding: 0 0 10px 18px;
  display: none;
}
.market-shelf-table .offer-description img {
  max-width: 420px;
}

.shop-module .flexbox-container {
  flex-wrap: wrap;
  justify-content: space-around;
  gap: clamp(5px, 10px, 20px);
  padding: 20px 0;
}
.shop-module .item {
  font-size: clamp(1.4rem, 1.4rem + 0.25vw, 2rem);
  line-height: 1;
  text-align: center;
  padding: 0 0 20px 0;
  background-color: var(--bg-card);
  max-width: 200px;
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition-property: top, bottom;
  transition-duration: 0.25s;
}
.shop-module .item:hover {
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  position: relative;
  top: -5px;
  color: var(--main-color);
}
.shop-module .item .title {
  display: block;
  margin: 20px 10px 10px;
}
.shop-module .item .price {
  margin: auto 10px 0;
}

.shop-shelf-table .sale-offers {
  white-space: nowrap;
}

.shop-shelf-table .vendor {
  margin-left: 10px;
}
.sale-table {
  font-size: 1.6rem;
}
.sale-table th {
  font-size: 1.2rem;
}
.sale-table tbody td {
  background-color: var(--bg-card);
}
.sale-table tbody>tr>td {
  border-top: 16px solid var(--bg-column);
  vertical-align: middle;
}
.table>thead>tr>th.active {
    background-color: transparent
}
@media (width <= 480px) {
  .filter-list {
    display: none;
  }
  .summary-data-items {
    font-size: 1.2rem;
    padding-inline: 0;
    & .listing {
      flex-basis: auto;
    }
    & .data-item-header {
      font-size: 1.4rem;
      margin: 0;
    }
  }
  .section-title {
    font-size: 1.4rem;
  }
  .data-item {
    margin: 20px 0;
    padding-inline: 5px;
  }
  .detail-data-items {
    padding-inline: 0;
    & .type-item {
      padding-inline: 10px;
    }
  }
  .shop-module {
    padding: 0 10px; 
    &  .item {
      flex-basis: calc((100% / 3) - 10px);
    }
  }
  .post-flow-top-bar {
    margin: 10px;
    padding: 0;
    & .btn {
      padding: 2px 4px;
      margin: 2px;
    }
  }
  .shop-shelf-table{
    overflow: hidden;
    & .product-item {
      display: block;
      font-size: 1.3rem;
      & .name {
        font-weight: bold;
        margin-bottom: 5px;
      }
      & .aside {
        padding: 0;
        margin: 0;
        display: block;
        
      }
      & .discount {
        padding: 0;
        background-color: transparent;
        color: #b31919;
        font-weight: bold;
        margin-inline: 0;
      }
    }
  }  
}