/* reading-flow property for Chrome and Edge */
@supports (reading-flow: auto) {
  :root {
    reading-flow: normal;
  }

  /* Flexboxコンテナの場合 */
  .flex-container {
    reading-flow: flex-visual;
  }

  /* グリッドコンテナの場合 */
  .grid-container {
    reading-flow: grid-order;
  }

  /* タブコンテナの場合 */
  [role='tablist'] {
    reading-flow: source-order;
  }
}

/* reading-flow property for other browsers */
@supports not (reading-flow: auto) {
  :root {
    /* Fallback for browsers that don't support reading-flow */
    reading-flow: normal;
  }
}