﻿/* ==========================================
  表示順の変更について

  ・li要素は order プロパティで表示順を制御しています
  ・order の数値を変更すると表示順が変わります
  ・order の数値は必ず他と被らないようにしてください
  ・このリストは flex（または grid）前提で動作します

  【重要】
  ・liの数が増減した場合は、必ずこのCSSも
    追加／削除して数を合わせてください
  ・HTMLの構造や display プロパティは変更しないでください
========================================== */

/* ▼ 表示順を変えたい場合は order の数字だけ変更してください ▼ */
/* ブランドリストclass */ /*                   元の順番                */ /*  表示順　*/
.block-dynamic-genre--body li:nth-child(1), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(1) { order: 1; }

.block-dynamic-genre--body li:nth-child(2), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(2) { order: 2; }

.block-dynamic-genre--body li:nth-child(3), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(3) { order: 3; }

.block-dynamic-genre--body li:nth-child(4), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(4) { order: 4; }

.block-dynamic-genre--body li:nth-child(5), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(5) { order: 5; }

.block-dynamic-genre--body li:nth-child(6), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(6) { order: 6; }

.block-dynamic-genre--body li:nth-child(7), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(7) { order: 7; }

.block-dynamic-genre--body li:nth-child(8), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(8) { order: 8; }

.block-dynamic-genre--body li:nth-child(9), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(9) { order: 9; }

.block-dynamic-genre--body li:nth-child(10), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(10) { order: 10; }

.block-dynamic-genre--body li:nth-child(11), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(11) { order: 11; }

.block-dynamic-genre--body li:nth-child(12), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(12) { order: 12; }

.block-dynamic-genre--body li:nth-child(13), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(13) { order: 13; }

.block-dynamic-genre--body li:nth-child(14), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(14) { order: 14; }

.block-dynamic-genre--body li:nth-child(15), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(15) { order: 15; }

.block-dynamic-genre--body li:nth-child(16), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(16) { order: 16; }

.block-dynamic-genre--body li:nth-child(17), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(17) { order: 17; }

.block-dynamic-genre--body li:nth-child(18), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(18) { order: 18; }

.block-dynamic-genre--body li:nth-child(19), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(19) { order: 19; }

.block-dynamic-genre--body li:nth-child(20), 
.block-genre--brand-list .block-genre-style--items-1 > li:nth-child(20) { order: 20; }

/* 消さないでください。 */
.block-genre-style--items-1 {
  display: flex!important;
  flex-direction: column!important;
}