.-frame {
  width: 100%; }

.container {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 8px; }
  .container[class*="scrollable"] {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    overflow-y: scroll; }
  .container-full {
    position: relative;
    width: 100%;
    padding: 8px; }
    .container-full[class*="scrollable"] {
      position: relative;
      width: 100%;
      height: 100%;
      max-height: 100vh;
      padding: 8px;
      overflow-y: scroll; }

@media (min-width: 1440px) {
  .container {
    position: relative;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px; } }

@media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
  .container {
    max-width: 1680px; } }

.edge-horizontal {
  width: 100%;
  flex-direction: row;
  display: flex; }

.edge-vertical {
  height: 100%;
  flex-direction: column;
  display: flex; }

.edge-top {
  position: sticky;
  width: 100%;
  top: 0;
  left: 0;
  flex-direction: row;
  display: flex; }

.edge-left {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  flex-direction: column;
  display: flex; }

.edge-right {
  position: fixed;
  height: 100%;
  top: 0;
  right: 0;
  flex-direction: column;
  display: flex; }

.edge-bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  flex-direction: row;
  display: flex; }

[class*="frame"] > .group > .container > .edge-top {
  margin-top: -8px; }

@media (max-width: 1440px) {
  [class*="frame"] > .group > .edge-left, [class*="frame"] > .group > .edge-right {
    position: sticky; } }

.sub-edge-top {
  position: fixed;
  width: 100%;
  height: 100%;
  flex-direction: row;
  display: flex; }

.sub-edge-left {
  position: fixed;
  width: 100%;
  height: 100%;
  flex-direction: column;
  display: flex; }

.sub-edge-right {
  position: fixed;
  width: 100%;
  height: 100%;
  flex-direction: column;
  display: flex; }

.sub-edge-bottom {
  position: fixed;
  width: 100%;
  height: 100%;
  flex-direction: row;
  display: flex; }

@media (min-width: 1440px) {
  .sub-edge-top, .sub-edge-bottom {
    min-height: 300px;
    height: 25vh; }
  .sub-edge-left, .sub-edge-right {
    min-width: 300px;
    width: 25vw; } }

.masonry {
  column-count: 1;
  column-gap: 0; }
  @media (min-width: 600px) {
    .masonry {
      column-count: 2; } }
  @media (min-width: 1440px) {
    .masonry {
      column-count: 4; } }
  .masonry > * {
    break-inside: avoid;
    counter-increment: item-counter; }
  .masonry-2 {
    column-count: 1;
    column-gap: 0; }
    @media (min-width: 600px) {
      .masonry-2 {
        column-count: 2; } }
    @media (min-width: 1440px) {
      .masonry-2 {
        column-count: 2; } }
    .masonry-2 > * {
      break-inside: avoid;
      counter-increment: item-counter; }
  .masonry-3 {
    column-count: 1;
    column-gap: 0; }
    @media (min-width: 600px) {
      .masonry-3 {
        column-count: 2; } }
    @media (min-width: 1440px) {
      .masonry-3 {
        column-count: 3; } }
    .masonry-3 > * {
      break-inside: avoid;
      counter-increment: item-counter; }
  .masonry-4 {
    column-count: 1;
    column-gap: 0; }
    @media (min-width: 600px) {
      .masonry-4 {
        column-count: 2; } }
    @media (min-width: 1440px) {
      .masonry-4 {
        column-count: 4; } }
    .masonry-4 > * {
      break-inside: avoid;
      counter-increment: item-counter; }
  .masonry-5 {
    column-count: 1;
    column-gap: 0; }
    @media (min-width: 600px) {
      .masonry-5 {
        column-count: 2; } }
    @media (min-width: 1440px) {
      .masonry-5 {
        column-count: 5; } }
    .masonry-5 > * {
      break-inside: avoid;
      counter-increment: item-counter; }

.group {
  display: flex; }
  @media (min-width: 600px) {
    .group-tablet {
      display: flex; } }
  @media (min-width: 1024px) {
    .group-tablet-pc {
      display: flex; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .group-tablet-pc {
      display: flex; } }
  @media (min-width: 1440px) {
    .group-pc {
      display: flex; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .group-ultrawide {
      display: flex; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .group-super-ultrawide {
      display: flex; } }

.row {
  flex-direction: row; }
  @media (min-width: 600px) {
    .row-tablet {
      flex-direction: row; } }
  @media (min-width: 1024px) {
    .row-tablet-pc {
      flex-direction: row; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .row-tablet-pc {
      flex-direction: row; } }
  @media (min-width: 1440px) {
    .row-pc {
      flex-direction: row; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .row-ultrawide {
      flex-direction: row; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .row-super-ultrawide {
      flex-direction: row; } }

.row-reverse {
  flex-direction: row-reverse; }
  @media (min-width: 600px) {
    .row-reverse-tablet {
      flex-direction: row-reverse; } }
  @media (min-width: 1024px) {
    .row-reverse-tablet-pc {
      flex-direction: row-reverse; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .row-reverse-tablet-pc {
      flex-direction: row-reverse; } }
  @media (min-width: 1440px) {
    .row-reverse-pc {
      flex-direction: row-reverse; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .row-reverse-ultrawide {
      flex-direction: row-reverse; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .row-reverse-super-ultrawide {
      flex-direction: row-reverse; } }

.column {
  flex-direction: column; }
  @media (min-width: 600px) {
    .column-tablet {
      flex-direction: column; } }
  @media (min-width: 1024px) {
    .column-tablet-pc {
      flex-direction: column; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .column-tablet-pc {
      flex-direction: column; } }
  @media (min-width: 1440px) {
    .column-pc {
      flex-direction: column; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .column-ultrawide {
      flex-direction: column; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .column-super-ultrawide {
      flex-direction: column; } }

.column-reverse {
  flex-direction: column-reverse; }
  @media (min-width: 600px) {
    .column-reverse-tablet {
      flex-direction: column-reverse; } }
  @media (min-width: 1024px) {
    .column-reverse-tablet-pc {
      flex-direction: column-reverse; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .column-reverse-tablet-pc {
      flex-direction: column-reverse; } }
  @media (min-width: 1440px) {
    .column-reverse-pc {
      flex-direction: column-reverse; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .column-reverse-ultrawide {
      flex-direction: column-reverse; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .column-reverse-super-ultrawide {
      flex-direction: column-reverse; } }

.no-wrap {
  flex-wrap: nowrap; }
  @media (min-width: 600px) {
    .no-wrap-tablet {
      flex-wrap: nowrap; } }
  @media (min-width: 1024px) {
    .no-wrap-tablet-pc {
      flex-wrap: nowrap; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .no-wrap-tablet-pc {
      flex-wrap: nowrap; } }
  @media (min-width: 1440px) {
    .no-wrap-pc {
      flex-wrap: nowrap; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .no-wrap-ultrawide {
      flex-wrap: nowrap; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .no-wrap-super-ultrawide {
      flex-wrap: nowrap; } }

.wrap {
  flex-wrap: wrap; }
  @media (min-width: 600px) {
    .wrap-tablet {
      flex-wrap: wrap; } }
  @media (min-width: 1024px) {
    .wrap-tablet-pc {
      flex-wrap: wrap; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .wrap-tablet-pc {
      flex-wrap: wrap; } }
  @media (min-width: 1440px) {
    .wrap-pc {
      flex-wrap: wrap; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .wrap-ultrawide {
      flex-wrap: wrap; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .wrap-super-ultrawide {
      flex-wrap: wrap; } }

.wrap-reverse {
  flex-wrap: wrap-reverse; }
  @media (min-width: 600px) {
    .wrap-reverse-tablet {
      flex-wrap: wrap-reverse; } }
  @media (min-width: 1024px) {
    .wrap-reverse-tablet-pc {
      flex-wrap: wrap-reverse; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .wrap-reverse-tablet-pc {
      flex-wrap: wrap-reverse; } }
  @media (min-width: 1440px) {
    .wrap-reverse-pc {
      flex-wrap: wrap-reverse; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .wrap-reverse-ultrawide {
      flex-wrap: wrap-reverse; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .wrap-reverse-super-ultrawide {
      flex-wrap: wrap-reverse; } }

.all-center {
  justify-content: center;
  align-items: center; }
  @media (min-width: 600px) {
    .all-center-tablet {
      justify-content: center;
      align-items: center; } }
  @media (min-width: 1024px) {
    .all-center-tablet-pc {
      justify-content: center;
      align-items: center; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .all-center-tablet-pc {
      justify-content: center;
      align-items: center; } }
  @media (min-width: 1440px) {
    .all-center-pc {
      justify-content: center;
      align-items: center; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .all-center-ultrawide {
      justify-content: center;
      align-items: center; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .all-center-super-ultrawide {
      justify-content: center;
      align-items: center; } }

.group.horizontal-left {
  justify-content: flex-start; }

.group.horizontal-center {
  justify-content: center; }

.group.horizontal-right {
  justify-content: flex-end; }

.group.horizontal-between {
  justify-content: space-between; }

.group.horizontal-around {
  justify-content: space-around; }

.group.horizontal-evenly {
  justify-content: space-evenly; }

@media (min-width: 600px) {
  .group.horizontal-tablet-left {
    justify-content: flex-start; }
  .group.horizontal-tablet-center {
    justify-content: center; }
  .group.horizontal-tablet-right {
    justify-content: flex-end; }
  .group.horizontal-tablet-between {
    justify-content: space-between; }
  .group.horizontal-tablet-around {
    justify-content: space-around; }
  .group.horizontal-tablet-evenly {
    justify-content: space-evenly; } }

@media (min-width: 1024px) {
  .group.horizontal-tablet-pc-left {
    justify-content: flex-start; }
  .group.horizontal-tablet-pc-center {
    justify-content: center; }
  .group.horizontal-tablet-pc-right {
    justify-content: flex-end; }
  .group.horizontal-tablet-pc-between {
    justify-content: space-between; }
  .group.horizontal-tablet-pc-around {
    justify-content: space-around; }
  .group.horizontal-tablet-pc-evenly {
    justify-content: space-evenly; } }

@media (min-width: 1024px) and ((pointer: coarse)) {
  .group.horizontal-tablet-pc-left {
    justify-content: flex-start; }
  .group.horizontal-tablet-pc-center {
    justify-content: center; }
  .group.horizontal-tablet-pc-right {
    justify-content: flex-end; }
  .group.horizontal-tablet-pc-between {
    justify-content: space-between; }
  .group.horizontal-tablet-pc-around {
    justify-content: space-around; }
  .group.horizontal-tablet-pc-evenly {
    justify-content: space-evenly; } }

@media (min-width: 1440px) {
  .group.horizontal-pc-left {
    justify-content: flex-start; }
  .group.horizontal-pc-center {
    justify-content: center; }
  .group.horizontal-pc-right {
    justify-content: flex-end; }
  .group.horizontal-pc-between {
    justify-content: space-between; }
  .group.horizontal-pc-around {
    justify-content: space-around; }
  .group.horizontal-pc-evenly {
    justify-content: space-evenly; } }

@media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
  .group.horizontal-ultrawide-left {
    justify-content: flex-start; }
  .group.horizontal-ultrawide-center {
    justify-content: center; }
  .group.horizontal-ultrawide-right {
    justify-content: flex-end; }
  .group.horizontal-ultrawide-between {
    justify-content: space-between; }
  .group.horizontal-ultrawide-around {
    justify-content: space-around; }
  .group.horizontal-ultrawide-evenly {
    justify-content: space-evenly; } }

@media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
  .group.horizontal-super-ultrawide-left {
    justify-content: flex-start; }
  .group.horizontal-super-ultrawide-center {
    justify-content: center; }
  .group.horizontal-super-ultrawide-right {
    justify-content: flex-end; }
  .group.horizontal-super-ultrawide-between {
    justify-content: space-between; }
  .group.horizontal-super-ultrawide-around {
    justify-content: space-around; }
  .group.horizontal-super-ultrawide-evenly {
    justify-content: space-evenly; } }

.group.vertical-top {
  align-items: flex-start; }

.group.vertical-center {
  align-items: center; }

.group.vertical-bottom {
  align-items: flex-end; }

@media (min-width: 600px) {
  .group.vertical-tablet-top {
    align-items: flex-start; }
  .group.vertical-tablet-center {
    align-items: center; }
  .group.vertical-tablet-bottom {
    align-items: flex-end; } }

@media (min-width: 1024px) {
  .group.vertical-tablet-pc-top {
    align-items: flex-start; }
  .group.vertical-tablet-pc-center {
    align-items: center; }
  .group.vertical-tablet-pc-bottom {
    align-items: flex-end; } }

@media (min-width: 1024px) and ((pointer: coarse)) {
  .group.vertical-tablet-pc-top {
    align-items: flex-start; }
  .group.vertical-tablet-pc-center {
    align-items: center; }
  .group.vertical-tablet-pc-bottom {
    align-items: flex-end; } }

@media (min-width: 1440px) {
  .group.vertical-pc-top {
    align-items: flex-start; }
  .group.vertical-pc-center {
    align-items: center; }
  .group.vertical-pc-bottom {
    align-items: flex-end; } }

@media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
  .group.vertical-ultrawide-top {
    align-items: flex-start; }
  .group.vertical-ultrawide-center {
    align-items: center; }
  .group.vertical-ultrawide-bottom {
    align-items: flex-end; } }

@media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
  .group.vertical-super-ultrawide-top {
    align-items: flex-start; }
  .group.vertical-super-ultrawide-center {
    align-items: center; }
  .group.vertical-super-ultrawide-bottom {
    align-items: flex-end; } }

.column.horizontal-top {
  align-items: flex-start; }

.column.horizontal-center {
  align-items: center; }

.column.horizontal-bottom {
  align-items: flex-end; }

@media (min-width: 600px) {
  .column.horizontal-tablet-top {
    align-items: flex-start; }
  .column.horizontal-tablet-center {
    align-items: center; }
  .column.horizontal-tablet-bottom {
    align-items: flex-end; } }

@media (min-width: 1024px) {
  .column.horizontal-tablet-pc-top {
    align-items: flex-start; }
  .column.horizontal-tablet-pc-center {
    align-items: center; }
  .column.horizontal-tablet-pc-bottom {
    align-items: flex-end; } }

@media (min-width: 1024px) and ((pointer: coarse)) {
  .column.horizontal-tablet-pc-top {
    align-items: flex-start; }
  .column.horizontal-tablet-pc-center {
    align-items: center; }
  .column.horizontal-tablet-pc-bottom {
    align-items: flex-end; } }

@media (min-width: 1440px) {
  .column.horizontal-pc-top {
    align-items: flex-start; }
  .column.horizontal-pc-center {
    align-items: center; }
  .column.horizontal-pc-bottom {
    align-items: flex-end; } }

@media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
  .column.horizontal-ultrawide-top {
    align-items: flex-start; }
  .column.horizontal-ultrawide-center {
    align-items: center; }
  .column.horizontal-ultrawide-bottom {
    align-items: flex-end; } }

@media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
  .column.horizontal-super-ultrawide-top {
    align-items: flex-start; }
  .column.horizontal-super-ultrawide-center {
    align-items: center; }
  .column.horizontal-super-ultrawide-bottom {
    align-items: flex-end; } }

.column.vertical-left {
  justify-content: flex-start; }

.column.vertical-center {
  justify-content: center; }

.column.vertical-right {
  justify-content: flex-end; }

.column.vertical-between {
  justify-content: space-between; }

.column.vertical-around {
  justify-content: space-around; }

.column.vertical-evenly {
  justify-content: space-evenly; }

@media (min-width: 600px) {
  .column.vertical-tablet-left {
    justify-content: flex-start; }
  .column.vertical-tablet-center {
    justify-content: center; }
  .column.vertical-tablet-right {
    justify-content: flex-end; }
  .column.vertical-tablet-between {
    justify-content: space-between; }
  .column.vertical-tablet-around {
    justify-content: space-around; }
  .column.vertical-tablet-evenly {
    justify-content: space-evenly; } }

@media (min-width: 1024px) {
  .column.vertical-tablet-pc-left {
    justify-content: flex-start; }
  .column.vertical-tablet-pc-center {
    justify-content: center; }
  .column.vertical-tablet-pc-right {
    justify-content: flex-end; }
  .column.vertical-tablet-pc-between {
    justify-content: space-between; }
  .column.vertical-tablet-pc-around {
    justify-content: space-around; }
  .column.vertical-tablet-pc-evenly {
    justify-content: space-evenly; } }

@media (min-width: 1024px) and ((pointer: coarse)) {
  .column.vertical-tablet-pc-left {
    justify-content: flex-start; }
  .column.vertical-tablet-pc-center {
    justify-content: center; }
  .column.vertical-tablet-pc-right {
    justify-content: flex-end; }
  .column.vertical-tablet-pc-between {
    justify-content: space-between; }
  .column.vertical-tablet-pc-around {
    justify-content: space-around; }
  .column.vertical-tablet-pc-evenly {
    justify-content: space-evenly; } }

@media (min-width: 1440px) {
  .column.vertical-pc-left {
    justify-content: flex-start; }
  .column.vertical-pc-center {
    justify-content: center; }
  .column.vertical-pc-right {
    justify-content: flex-end; }
  .column.vertical-pc-between {
    justify-content: space-between; }
  .column.vertical-pc-around {
    justify-content: space-around; }
  .column.vertical-pc-evenly {
    justify-content: space-evenly; } }

@media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
  .column.vertical-ultrawide-left {
    justify-content: flex-start; }
  .column.vertical-ultrawide-center {
    justify-content: center; }
  .column.vertical-ultrawide-right {
    justify-content: flex-end; }
  .column.vertical-ultrawide-between {
    justify-content: space-between; }
  .column.vertical-ultrawide-around {
    justify-content: space-around; }
  .column.vertical-ultrawide-evenly {
    justify-content: space-evenly; } }

@media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
  .column.vertical-super-ultrawide-left {
    justify-content: flex-start; }
  .column.vertical-super-ultrawide-center {
    justify-content: center; }
  .column.vertical-super-ultrawide-right {
    justify-content: flex-end; }
  .column.vertical-super-ultrawide-between {
    justify-content: space-between; }
  .column.vertical-super-ultrawide-around {
    justify-content: space-around; }
  .column.vertical-super-ultrawide-evenly {
    justify-content: space-evenly; } }

.left {
  margin-left: auto; }
  @media (min-width: 600px) {
    .left-tablet {
      margin-left: auto; } }
  @media (min-width: 1024px) {
    .left-tablet-pc {
      margin-left: auto; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .left-tablet-pc {
      margin-left: auto; } }
  @media (min-width: 1440px) {
    .left-pc {
      margin-left: auto; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .left-ultrawide {
      margin-left: auto; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .left-super-ultrawide {
      margin-left: auto; } }

.center {
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 600px) {
    .center-tablet {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 1024px) {
    .center-tablet-pc {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .center-tablet-pc {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 1440px) {
    .center-pc {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .center-ultrawide {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .center-super-ultrawide {
      margin-left: auto;
      margin-right: auto; } }

.right {
  margin-right: auto; }
  @media (min-width: 600px) {
    .right-tablet {
      margin-right: auto; } }
  @media (min-width: 1024px) {
    .right-tablet-pc {
      margin-right: auto; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .right-tablet-pc {
      margin-right: auto; } }
  @media (min-width: 1440px) {
    .right-pc {
      margin-right: auto; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .right-ultrawide {
      margin-right: auto; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .right-super-ultrawide {
      margin-right: auto; } }

.group > .left {
  margin-left: 0;
  margin-right: auto; }
  @media (min-width: 600px) {
    .group > .left-tablet {
      margin-left: 0;
      margin-right: auto; } }
  @media (min-width: 1024px) {
    .group > .left-tablet-pc {
      margin-left: 0;
      margin-right: auto; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .group > .left-tablet-pc {
      margin-left: 0;
      margin-right: auto; } }
  @media (min-width: 1440px) {
    .group > .left-pc {
      margin-left: 0;
      margin-right: auto; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .group > .left-ultrawide {
      margin-left: 0;
      margin-right: auto; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .group > .left-super-ultrawide {
      margin-left: 0;
      margin-right: auto; } }

.group > .center {
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 600px) {
    .group > .center-tablet {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 1024px) {
    .group > .center-tablet-pc {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .group > .center-tablet-pc {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 1440px) {
    .group > .center-pc {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .group > .center-ultrawide {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .group > .center-super-ultrawide {
      margin-left: auto;
      margin-right: auto; } }

.group > .right {
  margin-left: auto;
  margin-right: 0; }
  @media (min-width: 600px) {
    .group > .right-tablet {
      margin-left: auto;
      margin-right: 0; } }
  @media (min-width: 1024px) {
    .group > .right-tablet-pc {
      margin-left: auto;
      margin-right: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .group > .right-tablet-pc {
      margin-left: auto;
      margin-right: 0; } }
  @media (min-width: 1440px) {
    .group > .right-pc {
      margin-left: auto;
      margin-right: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .group > .right-ultrawide {
      margin-left: auto;
      margin-right: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .group > .right-super-ultrawide {
      margin-left: auto;
      margin-right: 0; } }

.full {
  width: 100%;
  padding: 8px; }
  .full > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .full-tablet {
      width: 100%;
      padding: 8px; }
      .full-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .full-tablet-pc {
      width: 100%;
      padding: 8px; }
      .full-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .full-tablet-pc {
      width: 100%;
      padding: 8px; }
      .full-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .full-pc {
      width: 100%;
      padding: 8px; }
      .full-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .full-ultrawide {
      width: 100%;
      padding: 8px; }
      .full-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .full-super-ultrawide {
      width: 100%;
      padding: 8px; }
      .full-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.seven-eighths {
  width: 87.5%;
  padding: 8px; }
  .seven-eighths > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .seven-eighths-tablet {
      width: 87.5%;
      padding: 8px; }
      .seven-eighths-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .seven-eighths-tablet-pc {
      width: 87.5%;
      padding: 8px; }
      .seven-eighths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .seven-eighths-tablet-pc {
      width: 87.5%;
      padding: 8px; }
      .seven-eighths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .seven-eighths-pc {
      width: 87.5%;
      padding: 8px; }
      .seven-eighths-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .seven-eighths-ultrawide {
      width: 87.5%;
      padding: 8px; }
      .seven-eighths-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .seven-eighths-super-ultrawide {
      width: 87.5%;
      padding: 8px; }
      .seven-eighths-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.five-sixths {
  width: calc((100% / 6) * 5);
  padding: 8px; }
  .five-sixths > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .five-sixths-tablet {
      width: calc((100% / 6) * 5);
      padding: 8px; }
      .five-sixths-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .five-sixths-tablet-pc {
      width: calc((100% / 6) * 5);
      padding: 8px; }
      .five-sixths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .five-sixths-tablet-pc {
      width: calc((100% / 6) * 5);
      padding: 8px; }
      .five-sixths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .five-sixths-pc {
      width: calc((100% / 6) * 5);
      padding: 8px; }
      .five-sixths-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .five-sixths-ultrawide {
      width: calc((100% / 6) * 5);
      padding: 8px; }
      .five-sixths-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .five-sixths-super-ultrawide {
      width: calc((100% / 6) * 5);
      padding: 8px; }
      .five-sixths-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.four-fifths {
  width: 80%;
  padding: 8px; }
  .four-fifths > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .four-fifths-tablet {
      width: 80%;
      padding: 8px; }
      .four-fifths-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .four-fifths-tablet-pc {
      width: 80%;
      padding: 8px; }
      .four-fifths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .four-fifths-tablet-pc {
      width: 80%;
      padding: 8px; }
      .four-fifths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .four-fifths-pc {
      width: 80%;
      padding: 8px; }
      .four-fifths-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .four-fifths-ultrawide {
      width: 80%;
      padding: 8px; }
      .four-fifths-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .four-fifths-super-ultrawide {
      width: 80%;
      padding: 8px; }
      .four-fifths-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.three-quaters {
  width: 75%;
  padding: 8px; }
  .three-quaters > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .three-quaters-tablet {
      width: 75%;
      padding: 8px; }
      .three-quaters-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .three-quaters-tablet-pc {
      width: 75%;
      padding: 8px; }
      .three-quaters-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .three-quaters-tablet-pc {
      width: 75%;
      padding: 8px; }
      .three-quaters-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .three-quaters-pc {
      width: 75%;
      padding: 8px; }
      .three-quaters-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .three-quaters-ultrawide {
      width: 75%;
      padding: 8px; }
      .three-quaters-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .three-quaters-super-ultrawide {
      width: 75%;
      padding: 8px; }
      .three-quaters-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.two-thirds {
  width: calc((100% / 3) * 2);
  padding: 8px; }
  .two-thirds > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .two-thirds-tablet {
      width: calc((100% / 3) * 2);
      padding: 8px; }
      .two-thirds-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .two-thirds-tablet-pc {
      width: calc((100% / 3) * 2);
      padding: 8px; }
      .two-thirds-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .two-thirds-tablet-pc {
      width: calc((100% / 3) * 2);
      padding: 8px; }
      .two-thirds-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .two-thirds-pc {
      width: calc((100% / 3) * 2);
      padding: 8px; }
      .two-thirds-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .two-thirds-ultrawide {
      width: calc((100% / 3) * 2);
      padding: 8px; }
      .two-thirds-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .two-thirds-super-ultrawide {
      width: calc((100% / 3) * 2);
      padding: 8px; }
      .two-thirds-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.five-eighths {
  width: 62.5%;
  padding: 8px; }
  .five-eighths > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .five-eighths-tablet {
      width: 62.5%;
      padding: 8px; }
      .five-eighths-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .five-eighths-tablet-pc {
      width: 62.5%;
      padding: 8px; }
      .five-eighths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .five-eighths-tablet-pc {
      width: 62.5%;
      padding: 8px; }
      .five-eighths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .five-eighths-pc {
      width: 62.5%;
      padding: 8px; }
      .five-eighths-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .five-eighths-ultrawide {
      width: 62.5%;
      padding: 8px; }
      .five-eighths-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .five-eighths-super-ultrawide {
      width: 62.5%;
      padding: 8px; }
      .five-eighths-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.three-fifths {
  width: 60%;
  padding: 8px; }
  .three-fifths > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .three-fifths-tablet {
      width: 60%;
      padding: 8px; }
      .three-fifths-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .three-fifths-tablet-pc {
      width: 60%;
      padding: 8px; }
      .three-fifths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .three-fifths-tablet-pc {
      width: 60%;
      padding: 8px; }
      .three-fifths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .three-fifths-pc {
      width: 60%;
      padding: 8px; }
      .three-fifths-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .three-fifths-ultrawide {
      width: 60%;
      padding: 8px; }
      .three-fifths-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .three-fifths-super-ultrawide {
      width: 60%;
      padding: 8px; }
      .three-fifths-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.half {
  width: 50%;
  padding: 8px; }
  .half > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .half-tablet {
      width: 50%;
      padding: 8px; }
      .half-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .half-tablet-pc {
      width: 50%;
      padding: 8px; }
      .half-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .half-tablet-pc {
      width: 50%;
      padding: 8px; }
      .half-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .half-pc {
      width: 50%;
      padding: 8px; }
      .half-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .half-ultrawide {
      width: 50%;
      padding: 8px; }
      .half-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .half-super-ultrawide {
      width: 50%;
      padding: 8px; }
      .half-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.three-sixths {
  width: calc((100% / 6) * 3);
  padding: 8px; }
  .three-sixths > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .three-sixths-tablet {
      width: calc((100% / 6) * 3);
      padding: 8px; }
      .three-sixths-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .three-sixths-tablet-pc {
      width: calc((100% / 6) * 3);
      padding: 8px; }
      .three-sixths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .three-sixths-tablet-pc {
      width: calc((100% / 6) * 3);
      padding: 8px; }
      .three-sixths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .three-sixths-pc {
      width: calc((100% / 6) * 3);
      padding: 8px; }
      .three-sixths-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .three-sixths-ultrawide {
      width: calc((100% / 6) * 3);
      padding: 8px; }
      .three-sixths-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .three-sixths-super-ultrawide {
      width: calc((100% / 6) * 3);
      padding: 8px; }
      .three-sixths-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.two-fifths {
  width: 40%;
  padding: 8px; }
  .two-fifths > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .two-fifths-tablet {
      width: 40%;
      padding: 8px; }
      .two-fifths-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .two-fifths-tablet-pc {
      width: 40%;
      padding: 8px; }
      .two-fifths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .two-fifths-tablet-pc {
      width: 40%;
      padding: 8px; }
      .two-fifths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .two-fifths-pc {
      width: 40%;
      padding: 8px; }
      .two-fifths-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .two-fifths-ultrawide {
      width: 40%;
      padding: 8px; }
      .two-fifths-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .two-fifths-super-ultrawide {
      width: 40%;
      padding: 8px; }
      .two-fifths-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.three-eighths {
  width: 37.5%;
  padding: 8px; }
  .three-eighths > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .three-eighths-tablet {
      width: 37.5%;
      padding: 8px; }
      .three-eighths-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .three-eighths-tablet-pc {
      width: 37.5%;
      padding: 8px; }
      .three-eighths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .three-eighths-tablet-pc {
      width: 37.5%;
      padding: 8px; }
      .three-eighths-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .three-eighths-pc {
      width: 37.5%;
      padding: 8px; }
      .three-eighths-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .three-eighths-ultrawide {
      width: 37.5%;
      padding: 8px; }
      .three-eighths-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .three-eighths-super-ultrawide {
      width: 37.5%;
      padding: 8px; }
      .three-eighths-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.third {
  width: calc(100% / 3);
  padding: 8px; }
  .third > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .third-tablet {
      width: calc(100% / 3);
      padding: 8px; }
      .third-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .third-tablet-pc {
      width: calc(100% / 3);
      padding: 8px; }
      .third-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .third-tablet-pc {
      width: calc(100% / 3);
      padding: 8px; }
      .third-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .third-pc {
      width: calc(100% / 3);
      padding: 8px; }
      .third-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .third-ultrawide {
      width: calc(100% / 3);
      padding: 8px; }
      .third-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .third-super-ultrawide {
      width: calc(100% / 3);
      padding: 8px; }
      .third-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.quater {
  width: 25%;
  padding: 8px; }
  .quater > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .quater-tablet {
      width: 25%;
      padding: 8px; }
      .quater-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .quater-tablet-pc {
      width: 25%;
      padding: 8px; }
      .quater-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .quater-tablet-pc {
      width: 25%;
      padding: 8px; }
      .quater-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .quater-pc {
      width: 25%;
      padding: 8px; }
      .quater-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .quater-ultrawide {
      width: 25%;
      padding: 8px; }
      .quater-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .quater-super-ultrawide {
      width: 25%;
      padding: 8px; }
      .quater-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.fifth {
  width: 20%;
  padding: 8px; }
  .fifth > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .fifth-tablet {
      width: 20%;
      padding: 8px; }
      .fifth-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .fifth-tablet-pc {
      width: 20%;
      padding: 8px; }
      .fifth-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .fifth-tablet-pc {
      width: 20%;
      padding: 8px; }
      .fifth-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .fifth-pc {
      width: 20%;
      padding: 8px; }
      .fifth-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .fifth-ultrawide {
      width: 20%;
      padding: 8px; }
      .fifth-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .fifth-super-ultrawide {
      width: 20%;
      padding: 8px; }
      .fifth-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.sixth {
  width: calc(100% / 6);
  padding: 8px; }
  .sixth > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .sixth-tablet {
      width: calc(100% / 6);
      padding: 8px; }
      .sixth-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .sixth-tablet-pc {
      width: calc(100% / 6);
      padding: 8px; }
      .sixth-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .sixth-tablet-pc {
      width: calc(100% / 6);
      padding: 8px; }
      .sixth-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .sixth-pc {
      width: calc(100% / 6);
      padding: 8px; }
      .sixth-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .sixth-ultrawide {
      width: calc(100% / 6);
      padding: 8px; }
      .sixth-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .sixth-super-ultrawide {
      width: calc(100% / 6);
      padding: 8px; }
      .sixth-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.eighth {
  width: 12.5%;
  padding: 8px; }
  .eighth > * {
    width: 100%;
    margin: 0; }
  @media (min-width: 600px) {
    .eighth-tablet {
      width: 12.5%;
      padding: 8px; }
      .eighth-tablet > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) {
    .eighth-tablet-pc {
      width: 12.5%;
      padding: 8px; }
      .eighth-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .eighth-tablet-pc {
      width: 12.5%;
      padding: 8px; }
      .eighth-tablet-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-width: 1440px) {
    .eighth-pc {
      width: 12.5%;
      padding: 8px; }
      .eighth-pc > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .eighth-ultrawide {
      width: 12.5%;
      padding: 8px; }
      .eighth-ultrawide > * {
        width: 100%;
        margin: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .eighth-super-ultrawide {
      width: 12.5%;
      padding: 8px; }
      .eighth-super-ultrawide > * {
        width: 100%;
        margin: 0; } }

.no-shrink {
  flex-shrink: 0; }
  @media (min-width: 600px) {
    .no-shrink-tablet {
      flex-shrink: 0; } }
  @media (min-width: 1024px) {
    .no-shrink-tablet-pc {
      flex-shrink: 0; } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .no-shrink-tablet-pc {
      flex-shrink: 0; } }
  @media (min-width: 1440px) {
    .no-shrink-pc {
      flex-shrink: 0; } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .no-shrink-ultrawide {
      flex-shrink: 0; } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .no-shrink-super-ultrawide {
      flex-shrink: 0; } }

.space {
  width: 100%;
  height: calc($standardSize * 8); }
  @media (min-width: 600px) {
    .space-tablet {
      width: 100%;
      height: calc($standardSize * 8); } }
  @media (min-width: 1024px) {
    .space-tablet-pc {
      width: 100%;
      height: calc($standardSize * 8); } }
  @media (min-width: 1024px) and ((pointer: coarse)) {
    .space-tablet-pc {
      width: 100%;
      height: calc($standardSize * 8); } }
  @media (min-width: 1440px) {
    .space-pc {
      width: 100%;
      height: calc($standardSize * 8); } }
  @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
    .space-ultrawide {
      width: 100%;
      height: calc($standardSize * 8); } }
  @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
    .space-super-ultrawide {
      width: 100%;
      height: calc($standardSize * 8); } }
  .space-xxs {
    width: 100%;
    height: calc($xxs * 8); }
    @media (min-width: 600px) {
      .space-xxs-tablet {
        width: 100%;
        height: calc($xxs * 8); } }
    @media (min-width: 1024px) {
      .space-xxs-tablet-pc {
        width: 100%;
        height: calc($xxs * 8); } }
    @media (min-width: 1024px) and ((pointer: coarse)) {
      .space-xxs-tablet-pc {
        width: 100%;
        height: calc($xxs * 8); } }
    @media (min-width: 1440px) {
      .space-xxs-pc {
        width: 100%;
        height: calc($xxs * 8); } }
    @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
      .space-xxs-ultrawide {
        width: 100%;
        height: calc($xxs * 8); } }
    @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
      .space-xxs-super-ultrawide {
        width: 100%;
        height: calc($xxs * 8); } }
  .space-xs {
    width: 100%;
    height: calc($xs * 8); }
    @media (min-width: 600px) {
      .space-xs-tablet {
        width: 100%;
        height: calc($xs * 8); } }
    @media (min-width: 1024px) {
      .space-xs-tablet-pc {
        width: 100%;
        height: calc($xs * 8); } }
    @media (min-width: 1024px) and ((pointer: coarse)) {
      .space-xs-tablet-pc {
        width: 100%;
        height: calc($xs * 8); } }
    @media (min-width: 1440px) {
      .space-xs-pc {
        width: 100%;
        height: calc($xs * 8); } }
    @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
      .space-xs-ultrawide {
        width: 100%;
        height: calc($xs * 8); } }
    @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
      .space-xs-super-ultrawide {
        width: 100%;
        height: calc($xs * 8); } }
  .space-sm {
    width: 100%;
    height: calc($sm * 8); }
    @media (min-width: 600px) {
      .space-sm-tablet {
        width: 100%;
        height: calc($sm * 8); } }
    @media (min-width: 1024px) {
      .space-sm-tablet-pc {
        width: 100%;
        height: calc($sm * 8); } }
    @media (min-width: 1024px) and ((pointer: coarse)) {
      .space-sm-tablet-pc {
        width: 100%;
        height: calc($sm * 8); } }
    @media (min-width: 1440px) {
      .space-sm-pc {
        width: 100%;
        height: calc($sm * 8); } }
    @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
      .space-sm-ultrawide {
        width: 100%;
        height: calc($sm * 8); } }
    @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
      .space-sm-super-ultrawide {
        width: 100%;
        height: calc($sm * 8); } }
  .space-md {
    width: 100%;
    height: calc($md * 8); }
    @media (min-width: 600px) {
      .space-md-tablet {
        width: 100%;
        height: calc($md * 8); } }
    @media (min-width: 1024px) {
      .space-md-tablet-pc {
        width: 100%;
        height: calc($md * 8); } }
    @media (min-width: 1024px) and ((pointer: coarse)) {
      .space-md-tablet-pc {
        width: 100%;
        height: calc($md * 8); } }
    @media (min-width: 1440px) {
      .space-md-pc {
        width: 100%;
        height: calc($md * 8); } }
    @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
      .space-md-ultrawide {
        width: 100%;
        height: calc($md * 8); } }
    @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
      .space-md-super-ultrawide {
        width: 100%;
        height: calc($md * 8); } }
  .space-lg {
    width: 100%;
    height: calc($lg * 8); }
    @media (min-width: 600px) {
      .space-lg-tablet {
        width: 100%;
        height: calc($lg * 8); } }
    @media (min-width: 1024px) {
      .space-lg-tablet-pc {
        width: 100%;
        height: calc($lg * 8); } }
    @media (min-width: 1024px) and ((pointer: coarse)) {
      .space-lg-tablet-pc {
        width: 100%;
        height: calc($lg * 8); } }
    @media (min-width: 1440px) {
      .space-lg-pc {
        width: 100%;
        height: calc($lg * 8); } }
    @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
      .space-lg-ultrawide {
        width: 100%;
        height: calc($lg * 8); } }
    @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
      .space-lg-super-ultrawide {
        width: 100%;
        height: calc($lg * 8); } }
  .space-xl {
    width: 100%;
    height: calc($xl * 8); }
    @media (min-width: 600px) {
      .space-xl-tablet {
        width: 100%;
        height: calc($xl * 8); } }
    @media (min-width: 1024px) {
      .space-xl-tablet-pc {
        width: 100%;
        height: calc($xl * 8); } }
    @media (min-width: 1024px) and ((pointer: coarse)) {
      .space-xl-tablet-pc {
        width: 100%;
        height: calc($xl * 8); } }
    @media (min-width: 1440px) {
      .space-xl-pc {
        width: 100%;
        height: calc($xl * 8); } }
    @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
      .space-xl-ultrawide {
        width: 100%;
        height: calc($xl * 8); } }
    @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
      .space-xl-super-ultrawide {
        width: 100%;
        height: calc($xl * 8); } }
  .space-xxl {
    width: 100%;
    height: calc($xxl * 8); }
    @media (min-width: 600px) {
      .space-xxl-tablet {
        width: 100%;
        height: calc($xxl * 8); } }
    @media (min-width: 1024px) {
      .space-xxl-tablet-pc {
        width: 100%;
        height: calc($xxl * 8); } }
    @media (min-width: 1024px) and ((pointer: coarse)) {
      .space-xxl-tablet-pc {
        width: 100%;
        height: calc($xxl * 8); } }
    @media (min-width: 1440px) {
      .space-xxl-pc {
        width: 100%;
        height: calc($xxl * 8); } }
    @media (min-aspect-ratio: 21 / 9) and (min-width: 1921px) {
      .space-xxl-ultrawide {
        width: 100%;
        height: calc($xxl * 8); } }
    @media (min-aspect-ratio: 32 / 9) and (min-width: 1921px) {
      .space-xxl-super-ultrawide {
        width: 100%;
        height: calc($xxl * 8); } }