/** * Flexbox * @version v3.1 2022.4.27 * @copyright Maven Inc. ---------------------------------------------------------------- 汎用レイアウトクラス。 基本分割数、モバイル時の分割数を設定する。 モバイル分割数を設定しない場合、自動で分割解除されて１カラムになる。 モバイル時に同じ分割数を維持したい場合、.-keepオプションをつける。 :rootの特定カスタムプロパティに依存。 ---------------------------------------------------------------- 基本 flex 分割 --1 --2 --3 --4 --5 --6 --7 --8 --9 --2-1 --1-2 --3-1 --1-3 --3-2 --2-3 --1-p --p-1 --1-1-2 --1-2-1 --2-1-1 モバイル分割 -to1 -to2 -to3 -to4 -to5 -to6 -to7 -to8 -to9 -to2-1 -to1-2 -to3-1 -to1-3 -to3-2 -to2-3 -to1-p -top-1 -to1-1-2 -to1-2-1 -to2-1-1 方向 -reverse -col -alternate 余白 -nogap -nowrap -halfgap -halfwrap 配置 -left -right -center -top -bottom -middle その他 -keep -early ---------------------------------------------------------------- flex 基本クラス --* 分割数 -to* モバイル時の分割数 -reverse 方向を逆転 -col 縦方向に変更(heightを記載のこと) -alternate 不均等分割時の交互配置 -nogap 内側の余白(gap)を無くす -nowrap 外側の余白(margin)を無くす -halfgap 内側の余白を半分にする -halfwrap 外側の余白を半分にする -via* タブレット時の分割数(未実装) -keep モバイル時に自動分割解除しない -early モバイル時ではなくタブレット時に自動分割解除 ----------------------------------------------------------------*/ /* 初期設定がされていない場合は以下のコメントを外す */ /* :root{ --bp-sp:520; --gap-base:40; --gap:clamp( calc(1px * var(--gap-base) / 2), calc(var(--gap-base) / var(--bp-sp) * 100vw), calc(1px * var(--gap-base)) ); --gap-half:calc(1px * var(--gap-base) / 2); --border:rgb(204,204,204); } */ /* 全体 */ .flex{ /* 【全体幅】余白分を差し引いた有効幅 */ --basis:calc(100% - var(--gap) * (var(--split) - 1)); --split:1; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; gap:var(--gap); box-sizing:border-box; margin:var(--gap); } .flex > :nth-child(n){ flex-basis:calc(var(--basis) / var(--split)); box-sizing:border-box; position:relative; min-width:0; overflow-wrap:break-word; } /* 余白 */ .flex.-nogap{ --basis:100%; gap:0; } .flex.-nowrap{ margin:0; } .flex.-halfgap{ gap:var(--gap-half) var(--gap); } .flex.-halfwrap{ margin:var(--gap-half) var(--gap); } /* 方向 */ .flex.-reverse { flex-direction:row-reverse; } .flex.-col { flex-direction:column; } .flex.-col.-reverse { flex-direction:column-reverse; } /* 水平配置 */ .flex.-left { justify-content:flex-start; } .flex.-right { justify-content:flex-end; } .flex.-center { justify-content:center; } /* 垂直配置 */ .flex.-top { align-items:flex-start; } .flex.-bottom { align-items:flex-end; } .flex.-middle { align-items:center; } /* 分割数 */ .flex.--1{ --split:1; } .flex.--2{ --split:2; } .flex.--3{ --split:3; } .flex.--4{ --split:4; } .flex.--5{ --split:5; } .flex.--6{ --split:6; } .flex.--7{ --split:7; } .flex.--8{ --split:8; } .flex.--9{ --split:9; } .flex.--1-p, .flex.--p-1{ --split:2; --units:2.618; } .flex.--1-2, .flex.--2-1{ --split:2; --units:3; } .flex.--1-3, .flex.--3-1{ --split:2; --units:4; } .flex.--2-3, .flex.--3-2{ --split:2; --units:5; } .flex.--1-1-2, .flex.--1-2-1, .flex.--2-1-1{ --split:3; --units:4; } /* 不均等分割の比率 */ .flex.--1-p > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--1-p > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1.618); } .flex.--p-1 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1.618); } .flex.--p-1 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--1-2 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--1-2 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--2-1 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--2-1 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--1-3 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--1-3 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.--3-1 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.--3-1 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--2-3 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--2-3 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.--3-2 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.--3-2 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--1-1-2 > :nth-child(3n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--1-1-2 > :nth-child(3n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--1-1-2 > :nth-child(3n + 3){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--1-2-1 > :nth-child(3n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--1-2-1 > :nth-child(3n + 2){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--1-2-1 > :nth-child(3n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--2-1-1 > :nth-child(3n + 1){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--2-1-1 > :nth-child(3n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--2-1-1 > :nth-child(3n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } /* 不均等分割の比率(交互配置) */ .flex.--1-p.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1.618); } .flex.--1-p.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--p-1.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--p-1.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 1.618); } .flex.--1-2.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--1-2.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--2-1.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--2-1.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--1-3.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.--1-3.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--3-1.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.--3-1.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.--2-3.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.--2-3.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--3-2.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.--3-2.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 3); } @media screen and (max-width: 960px){ /* 継承しない場合で早期解除の場合は横幅を1カラム化 */ .flex:not(.-keep).-early > :nth-child(n){ flex-basis:100%; } } @media screen and (max-width: 768px){ /* 継承しない場合は横幅を1カラム化 */ .flex:not(.-keep) > :nth-child(n){ flex-basis:100%; } /* モバイル分割がある場合は横幅を再計算 */ .flex[class*="-to"] > :nth-child(n){ flex-basis:calc(var(--basis) / var(--split)); } /* 分割数(SP) */ .flex.-to2{ --split:2; } .flex.-to1{ --split:1; } .flex.-to2{ --split:2; } .flex.-to3{ --split:3; } .flex.-to4{ --split:4; } .flex.-to5{ --split:5; } .flex.-to6{ --split:6; } .flex.-to7{ --split:7; } .flex.-to8{ --split:8; } .flex.-to9{ --split:9; } .flex.-to1-p, .flex.-top-1{ --split:2; --units:2.618; } .flex.-to1-2, .flex.-to2-1{ --split:2; --units:3; } .flex.-to1-3, .flex.-to3-1{ --split:2; --units:4; } .flex.-to2-3, .flex.-to3-2{ --split:2; --units:5; } .flex.-to1-1-2, .flex.-to1-2-1, .flex.-to2-1-1{ --split:3; --units:4; } /* 不均等分割の比率(SP) */ .flex.-to1-p > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to1-p > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1.618); } .flex.-top-1 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1.618); } .flex.-top-1 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to1-2 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to1-2 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to2-1 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to2-1 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to1-3 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to1-3 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.-to3-1 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.-to3-1 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to2-3 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to2-3 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.-to3-2 > :nth-child(2n + 1){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.-to3-2 > :nth-child(2n + 2){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to1-1-2 > :nth-child(3n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to1-1-2 > :nth-child(3n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to1-1-2 > :nth-child(3n + 3){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to1-2-1 > :nth-child(3n + 1){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to1-2-1 > :nth-child(3n + 2){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to1-2-1 > :nth-child(3n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to2-1-1 > :nth-child(3n + 1){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to2-1-1 > :nth-child(3n + 2){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to2-1-1 > :nth-child(3n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } /* 不均等分割の比率(SP・交互配置) */ .flex.-to1-p.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1.618); } .flex.-to1-p.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-top-1.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-top-1.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 1.618); } .flex.-to1-2.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to1-2.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to2-1.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to2-1.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to1-3.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.-to1-3.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to3-1.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 1); } .flex.-to3-1.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.-to2-3.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 3); } .flex.-to2-3.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to3-2.-alternate > :nth-child(4n + 3){ flex-basis:calc(var(--basis) / var(--units) * 2); } .flex.-to3-2.-alternate > :nth-child(4n + 4){ flex-basis:calc(var(--basis) / var(--units) * 3); } } /** * Flexbox 罫線プラグイン * @version v3.0 2022.3.21 * @copyright Maven Inc. ----------------------------------------------------------------*/ .flex.-border > *::before, .flex.-border > *::after{ content:''; position:absolute; } .flex.-border > ::before{ --vline:none; --top:calc(var(--gap) / -2); --bottom:calc(var(--gap) / -2); display:var(--vline); top:var(--top); bottom:var(--bottom); right:calc(var(--gap) / -2); border-right:1px solid var(--border); } .flex.-border > ::after{ --hline:none; --left:calc(var(--gap) / -2); --right:calc(var(--gap) / -2); display:var(--hline); left:var(--left); right:var(--right); bottom:calc(var(--gap) / -2); border-bottom:1px solid var(--border); } /* 右罫線 - 最右列以外表示 */ .flex.-border.--2 > :not(:nth-child(2n))::before, .flex.-border.--1-p > :not(:nth-child(2n))::before, .flex.-border.--p-1 > :not(:nth-child(2n))::before, .flex.-border.--1-2 > :not(:nth-child(2n))::before, .flex.-border.--2-1 > :not(:nth-child(2n))::before, .flex.-border.--1-3 > :not(:nth-child(2n))::before, .flex.-border.--3-1 > :not(:nth-child(2n))::before, .flex.-border.--2-3 > :not(:nth-child(2n))::before, .flex.-border.--3-2 > :not(:nth-child(2n))::before, .flex.-border.--3 > :not(:nth-child(3n))::before, .flex.-border.--1-1-2 > :not(:nth-child(3n))::before, .flex.-border.--1-2-1 > :not(:nth-child(3n))::before, .flex.-border.--2-1-1 > :not(:nth-child(3n))::before, .flex.-border.--4 > :not(:nth-child(4n))::before, .flex.-border.--5 > :not(:nth-child(5n))::before, .flex.-border.--6 > :not(:nth-child(6n))::before, .flex.-border.--7 > :not(:nth-child(7n))::before, .flex.-border.--8 > :not(:nth-child(8n))::before, .flex.-border.--9 > :not(:nth-child(9n))::before{ --vline:block; } /* 右罫線 - 最上段の縦罫線短縮 - 最初のx個 */ .flex.-border.--2 > :nth-child(-n + 2)::before, .flex.-border.--1-p > :nth-child(-n + 2)::before, .flex.-border.--p-1 > :nth-child(-n + 2)::before, .flex.-border.--1-2 > :nth-child(-n + 2)::before, .flex.-border.--2-1 > :nth-child(-n + 2)::before, .flex.-border.--1-3 > :nth-child(-n + 2)::before, .flex.-border.--3-1 > :nth-child(-n + 2)::before, .flex.-border.--2-3 > :nth-child(-n + 2)::before, .flex.-border.--3-2 > :nth-child(-n + 2)::before, .flex.-border.--3 > :nth-child(-n + 3)::before, .flex.-border.--1-1-2 > :nth-child(-n + 3)::before, .flex.-border.--1-2-1 > :nth-child(-n + 3)::before, .flex.-border.--2-1-1 > :nth-child(-n + 3)::before, .flex.-border.--4 > :nth-child(-n + 4)::before, .flex.-border.--5 > :nth-child(-n + 5)::before, .flex.-border.--6 > :nth-child(-n + 6)::before, .flex.-border.--7 > :nth-child(-n + 7)::before, .flex.-border.--8 > :nth-child(-n + 8)::before, .flex.-border.--9 > :nth-child(-n + 9)::before{ --top:0; } /* 右罫線 - 最下段の縦罫線短縮 - 最下段(最左列かつ最後のx個+最左列かつ最後のx個以降) */ .flex.-border.--2 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--2 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--1-p > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--1-p > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--p-1 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--p-1 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--1-2 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--1-2 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--2-1 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--2-1 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--1-3 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--1-3 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--3-1 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--3-1 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--2-3 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--2-3 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--3-2 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.--3-2 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.--3 > :nth-child(3n - 2):nth-last-child(-n + 3)::before, .flex.-border.--3 > :nth-child(3n - 2):nth-last-child(-n + 3) ~ ::before, .flex.-border.--1-1-2 > :nth-child(3n - 2):nth-last-child(-n + 3)::before, .flex.-border.--1-1-2 > :nth-child(3n - 2):nth-last-child(-n + 3) ~ ::before, .flex.-border.--1-2-1 > :nth-child(3n - 2):nth-last-child(-n + 3)::before, .flex.-border.--1-2-1 > :nth-child(3n - 2):nth-last-child(-n + 3) ~ ::before, .flex.-border.--2-1-1 > :nth-child(3n - 2):nth-last-child(-n + 3)::before, .flex.-border.--2-1-1 > :nth-child(3n - 2):nth-last-child(-n + 3) ~ ::before, .flex.-border.--4 > :nth-child(4n - 3):nth-last-child(-n + 4)::before, .flex.-border.--4 > :nth-child(4n - 3):nth-last-child(-n + 4) ~ ::before, .flex.-border.--5 > :nth-child(5n - 4):nth-last-child(-n + 5)::before, .flex.-border.--5 > :nth-child(5n - 4):nth-last-child(-n + 5) ~ ::before, .flex.-border.--6 > :nth-child(6n - 5):nth-last-child(-n + 6)::before, .flex.-border.--6 > :nth-child(6n - 5):nth-last-child(-n + 6) ~ ::before, .flex.-border.--7 > :nth-child(7n - 6):nth-last-child(-n + 7)::before, .flex.-border.--7 > :nth-child(7n - 6):nth-last-child(-n + 7) ~ ::before, .flex.-border.--8 > :nth-child(8n - 7):nth-last-child(-n + 8)::before, .flex.-border.--8 > :nth-child(8n - 7):nth-last-child(-n + 8) ~ ::before, .flex.-border.--9 > :nth-child(9n - 8):nth-last-child(-n + 9)::before, .flex.-border.--9 > :nth-child(9n - 8):nth-last-child(-n + 9) ~ ::before{ --bottom:0; } /* 下罫線 - 最下段(最左列かつ最後のx個+最左列かつ最後のx個以降)以外表示 */ .flex.-border.--1 > :not(:last-child)::after, .flex.-border.--2 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--1-p > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--p-1 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--1-2 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--2-1 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--1-3 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--3-1 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--2-3 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--3-2 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.--3 > :not(:nth-child(3n - 2):nth-last-child(-n + 3)):not(:nth-child(3n - 2):nth-last-child(-n + 3) ~ *)::after, .flex.-border.--1-1-2 > :not(:nth-child(3n - 2):nth-last-child(-n + 3)):not(:nth-child(3n - 2):nth-last-child(-n + 3) ~ *)::after, .flex.-border.--1-2-1 > :not(:nth-child(3n - 2):nth-last-child(-n + 3)):not(:nth-child(3n - 2):nth-last-child(-n + 3) ~ *)::after, .flex.-border.--2-1-1 > :not(:nth-child(3n - 2):nth-last-child(-n + 3)):not(:nth-child(3n - 2):nth-last-child(-n + 3) ~ *)::after, .flex.-border.--4 > :not(:nth-child(4n - 3):nth-last-child(-n + 4)):not(:nth-child(4n - 3):nth-last-child(-n + 4) ~ *)::after, .flex.-border.--5 > :not(:nth-child(5n - 4):nth-last-child(-n + 5)):not(:nth-child(5n - 4):nth-last-child(-n + 5) ~ *)::after, .flex.-border.--6 > :not(:nth-child(6n - 5):nth-last-child(-n + 6)):not(:nth-child(6n - 5):nth-last-child(-n + 6) ~ *)::after, .flex.-border.--7 > :not(:nth-child(7n - 6):nth-last-child(-n + 7)):not(:nth-child(7n - 6):nth-last-child(-n + 7) ~ *)::after, .flex.-border.--8 > :not(:nth-child(8n - 7):nth-last-child(-n + 8)):not(:nth-child(8n - 7):nth-last-child(-n + 8) ~ *)::after, .flex.-border.--9 > :not(:nth-child(9n - 8):nth-last-child(-n + 9)):not(:nth-child(9n - 8):nth-last-child(-n + 9) ~ *)::after{ --hline:block; } /* 下罫線 - 最左列の罫線短縮 */ .flex.-border.--1 > ::after, .flex.-border.--2 > :nth-child(2n + 1)::after, .flex.-border.--1-p > :nth-child(2n + 1)::after, .flex.-border.--p-1 > :nth-child(2n + 1)::after, .flex.-border.--1-2 > :nth-child(2n + 1)::after, .flex.-border.--2-1 > :nth-child(2n + 1)::after, .flex.-border.--1-3 > :nth-child(2n + 1)::after, .flex.-border.--3-1 > :nth-child(2n + 1)::after, .flex.-border.--2-3 > :nth-child(2n + 1)::after, .flex.-border.--3-2 > :nth-child(2n + 1)::after, .flex.-border.--3 > :nth-child(3n + 1)::after, .flex.-border.--1-1-2 > :nth-child(3n + 1)::after, .flex.-border.--1-2-1 > :nth-child(3n + 1)::after, .flex.-border.--2-1-1 > :nth-child(3n + 1)::after, .flex.-border.--4 > :nth-child(4n + 1)::after, .flex.-border.--5 > :nth-child(5n + 1)::after, .flex.-border.--6 > :nth-child(6n + 1)::after, .flex.-border.--7 > :nth-child(7n + 1)::after, .flex.-border.--8 > :nth-child(8n + 1)::after, .flex.-border.--9 > :nth-child(9n + 1)::after{ --left:0; } /* 下罫線 - 最右列の罫線短縮 */ .flex.-border.--1 > ::after, .flex.-border.--2 > :nth-child(2n)::after, .flex.-border.--1-p > :nth-child(2n)::after, .flex.-border.--p-1 > :nth-child(2n)::after, .flex.-border.--1-2 > :nth-child(2n)::after, .flex.-border.--2-1 > :nth-child(2n)::after, .flex.-border.--1-3 > :nth-child(2n)::after, .flex.-border.--3-1 > :nth-child(2n)::after, .flex.-border.--2-3 > :nth-child(2n)::after, .flex.-border.--3-2 > :nth-child(2n)::after, .flex.-border.--3 > :nth-child(3n)::after, .flex.-border.--1-1-2 > :nth-child(3n)::after, .flex.-border.--1-2-1 > :nth-child(3n)::after, .flex.-border.--2-1-1 > :nth-child(3n)::after, .flex.-border.--4 > :nth-child(4n)::after, .flex.-border.--5 > :nth-child(5n)::after, .flex.-border.--6 > :nth-child(6n)::after, .flex.-border.--7 > :nth-child(7n)::after, .flex.-border.--8 > :nth-child(8n)::after, .flex.-border.--9 > :nth-child(9n)::after{ --right:0; } @media screen and (max-width: 768px){ /* 未継承 - 1カラム化 */ :not(.-keep):not([class*="-to"]).flex.-border > ::after, :not(.-keep):not([class*="-to"]).flex.-border > ::before{ display:none; } :not(.-keep):not([class*="-to"]).flex.-border > :not(:last-child)::after{ display:block; } :not(.-keep):not([class*="-to"]).flex.-border > ::after{ left:0; right:0; } /* モバイル分割 - 罫線を一度初期化 */ .flex.-border[class*="-to"] > ::before, .flex.-border[class*="-to"] > ::after{ display:none; } .flex.-border[class*="-to"] > ::before{ top:calc(var(--gap) / -2); bottom:calc(var(--gap) / -2); } .flex.-border[class*="-to"] > ::after{ right:calc(var(--gap) / -2); left:calc(var(--gap) / -2); } /* 右罫線 - 最右列以外表示 */ .flex.-border.-to2 > :not(:nth-child(2n))::before, .flex.-border.-to1-p > :not(:nth-child(2n))::before, .flex.-border.-top-1 > :not(:nth-child(2n))::before, .flex.-border.-to1-2 > :not(:nth-child(2n))::before, .flex.-border.-to2-1 > :not(:nth-child(2n))::before, .flex.-border.-to1-3 > :not(:nth-child(2n))::before, .flex.-border.-to3-1 > :not(:nth-child(2n))::before, .flex.-border.-to2-3 > :not(:nth-child(2n))::before, .flex.-border.-to3-2 > :not(:nth-child(2n))::before, .flex.-border.-to3 > :not(:nth-child(3n))::before, .flex.-border.-to1-1-2 > :not(:nth-child(3n))::before, .flex.-border.-to1-2-1 > :not(:nth-child(3n))::before, .flex.-border.-to2-1-1 > :not(:nth-child(3n))::before, .flex.-border.-to4 > :not(:nth-child(4n))::before, .flex.-border.-to5 > :not(:nth-child(5n))::before, .flex.-border.-to6 > :not(:nth-child(6n))::before, .flex.-border.-to7 > :not(:nth-child(7n))::before, .flex.-border.-to8 > :not(:nth-child(8n))::before, .flex.-border.-to9 > :not(:nth-child(9n))::before{ display:block; } /* 右罫線 - 最上段の縦罫線短縮 - 最初のx個 */ .flex.-border.-to2 > :nth-child(-n + 2)::before, .flex.-border.-to1-p > :nth-child(-n + 2)::before, .flex.-border.-top-1 > :nth-child(-n + 2)::before, .flex.-border.-to1-2 > :nth-child(-n + 2)::before, .flex.-border.-to2-1 > :nth-child(-n + 2)::before, .flex.-border.-to1-3 > :nth-child(-n + 2)::before, .flex.-border.-to3-1 > :nth-child(-n + 2)::before, .flex.-border.-to2-3 > :nth-child(-n + 2)::before, .flex.-border.-to3-2 > :nth-child(-n + 2)::before, .flex.-border.-to3 > :nth-child(-n + 3)::before, .flex.-border.-to1-1-2 > :nth-child(-n + 3)::before, .flex.-border.-to1-2-1 > :nth-child(-n + 3)::before, .flex.-border.-to2-1-1 > :nth-child(-n + 3)::before, .flex.-border.-to4 > :nth-child(-n + 4)::before, .flex.-border.-to5 > :nth-child(-n + 5)::before, .flex.-border.-to6 > :nth-child(-n + 6)::before, .flex.-border.-to7 > :nth-child(-n + 7)::before, .flex.-border.-to8 > :nth-child(-n + 8)::before, .flex.-border.-to9 > :nth-child(-n + 9)::before{ top:0; } /* 右罫線 - 最下段の縦罫線短縮 - 最下段(最左列かつ最後のx個+最左列かつ最後のx個以降) */ .flex.-border.-to2 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-to2 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-to1-p > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-to1-p > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-top-1 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-top-1 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-to1-2 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-to1-2 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-to2-1 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-to2-1 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-to1-3 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-to1-3 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-to3-1 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-to3-1 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-to2-3 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-to2-3 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-to3-2 > :nth-child(2n - 1):nth-last-child(-n + 2)::before, .flex.-border.-to3-2 > :nth-child(2n - 1):nth-last-child(-n + 2) ~ ::before, .flex.-border.-to3 > :nth-child(3n - 2):nth-last-child(-n + 3)::before, .flex.-border.-to3 > :nth-child(3n - 2):nth-last-child(-n + 3) ~ ::before, .flex.-border.-to1-1-2 > :nth-child(3n - 2):nth-last-child(-n + 3)::before, .flex.-border.-to1-1-2 > :nth-child(3n - 2):nth-last-child(-n + 3) ~ ::before, .flex.-border.-to1-2-1 > :nth-child(3n - 2):nth-last-child(-n + 3)::before, .flex.-border.-to1-2-1 > :nth-child(3n - 2):nth-last-child(-n + 3) ~ ::before, .flex.-border.-to2-1-1 > :nth-child(3n - 2):nth-last-child(-n + 3)::before, .flex.-border.-to2-1-1 > :nth-child(3n - 2):nth-last-child(-n + 3) ~ ::before, .flex.-border.-to4 > :nth-child(4n - 3):nth-last-child(-n + 4)::before, .flex.-border.-to4 > :nth-child(4n - 3):nth-last-child(-n + 4) ~ ::before, .flex.-border.-to5 > :nth-child(5n - 4):nth-last-child(-n + 5)::before, .flex.-border.-to5 > :nth-child(5n - 4):nth-last-child(-n + 5) ~ ::before, .flex.-border.-to6 > :nth-child(6n - 5):nth-last-child(-n + 6)::before, .flex.-border.-to6 > :nth-child(6n - 5):nth-last-child(-n + 6) ~ ::before, .flex.-border.-to7 > :nth-child(7n - 6):nth-last-child(-n + 7)::before, .flex.-border.-to7 > :nth-child(7n - 6):nth-last-child(-n + 7) ~ ::before, .flex.-border.-to8 > :nth-child(8n - 7):nth-last-child(-n + 8)::before, .flex.-border.-to8 > :nth-child(8n - 7):nth-last-child(-n + 8) ~ ::before, .flex.-border.-to9 > :nth-child(9n - 8):nth-last-child(-n + 9)::before, .flex.-border.-to9 > :nth-child(9n - 8):nth-last-child(-n + 9) ~ ::before{ bottom:0; } /* 下罫線 - 最下段(最左列かつ最後のx個+最左列かつ最後のx個以降)以外表示 */ .flex.-border.-to1 > :not(:last-child)::after, .flex.-border.-to2 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-to1-p > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-top-1 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-to1-2 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-to2-1 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-to1-3 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-to3-1 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-to2-3 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-to3-2 > :not(:nth-child(2n - 1):nth-last-child(-n + 2)):not(:nth-child(2n - 1):nth-last-child(-n + 2) ~ *)::after, .flex.-border.-to3 > :not(:nth-child(3n - 2):nth-last-child(-n + 3)):not(:nth-child(3n - 2):nth-last-child(-n + 3) ~ *)::after, .flex.-border.-to1-1-2 > :not(:nth-child(3n - 2):nth-last-child(-n + 3)):not(:nth-child(3n - 2):nth-last-child(-n + 3) ~ *)::after, .flex.-border.-to1-2-1 > :not(:nth-child(3n - 2):nth-last-child(-n + 3)):not(:nth-child(3n - 2):nth-last-child(-n + 3) ~ *)::after, .flex.-border.-to2-1-1 > :not(:nth-child(3n - 2):nth-last-child(-n + 3)):not(:nth-child(3n - 2):nth-last-child(-n + 3) ~ *)::after, .flex.-border.-to4 > :not(:nth-child(4n - 3):nth-last-child(-n + 4)):not(:nth-child(4n - 3):nth-last-child(-n + 4) ~ *)::after, .flex.-border.-to5 > :not(:nth-child(5n - 4):nth-last-child(-n + 5)):not(:nth-child(5n - 4):nth-last-child(-n + 5) ~ *)::after, .flex.-border.-to6 > :not(:nth-child(6n - 5):nth-last-child(-n + 6)):not(:nth-child(6n - 5):nth-last-child(-n + 6) ~ *)::after, .flex.-border.-to7 > :not(:nth-child(7n - 6):nth-last-child(-n + 7)):not(:nth-child(7n - 6):nth-last-child(-n + 7) ~ *)::after, .flex.-border.-to8 > :not(:nth-child(8n - 7):nth-last-child(-n + 8)):not(:nth-child(8n - 7):nth-last-child(-n + 8) ~ *)::after, .flex.-border.-to9 > :not(:nth-child(9n - 8):nth-last-child(-n + 9)):not(:nth-child(9n - 8):nth-last-child(-n + 9) ~ *)::after{ display:block; } /* 下罫線 - 最左列の罫線短縮 */ .flex.-border.-to1 > ::after, .flex.-border.-to2 > :nth-child(2n + 1)::after, .flex.-border.-to1-p > :nth-child(2n + 1)::after, .flex.-border.-top-1 > :nth-child(2n + 1)::after, .flex.-border.-to1-2 > :nth-child(2n + 1)::after, .flex.-border.-to2-1 > :nth-child(2n + 1)::after, .flex.-border.-to1-3 > :nth-child(2n + 1)::after, .flex.-border.-to3-1 > :nth-child(2n + 1)::after, .flex.-border.-to2-3 > :nth-child(2n + 1)::after, .flex.-border.-to3-2 > :nth-child(2n + 1)::after, .flex.-border.-to3 > :nth-child(3n + 1)::after, .flex.-border.-to1-1-2 > :nth-child(3n + 1)::after, .flex.-border.-to1-2-1 > :nth-child(3n + 1)::after, .flex.-border.-to2-1-1 > :nth-child(3n + 1)::after, .flex.-border.-to4 > :nth-child(4n + 1)::after, .flex.-border.-to5 > :nth-child(5n + 1)::after, .flex.-border.-to6 > :nth-child(6n + 1)::after, .flex.-border.-to7 > :nth-child(7n + 1)::after, .flex.-border.-to8 > :nth-child(8n + 1)::after, .flex.-border.-to9 > :nth-child(9n + 1)::after{ left:0; } /* 下罫線 - 最右列の罫線短縮 */ .flex.-border.-to1 > ::after, .flex.-border.-to2 > :nth-child(2n)::after, .flex.-border.-to1-p > :nth-child(2n)::after, .flex.-border.-top-1 > :nth-child(2n)::after, .flex.-border.-to1-2 > :nth-child(2n)::after, .flex.-border.-to2-1 > :nth-child(2n)::after, .flex.-border.-to1-3 > :nth-child(2n)::after, .flex.-border.-to3-1 > :nth-child(2n)::after, .flex.-border.-to2-3 > :nth-child(2n)::after, .flex.-border.-to3-2 > :nth-child(2n)::after, .flex.-border.-to3 > :nth-child(3n)::after, .flex.-border.-to1-1-2 > :nth-child(3n)::after, .flex.-border.-to1-2-1 > :nth-child(3n)::after, .flex.-border.-to2-1-1 > :nth-child(3n)::after, .flex.-border.-to4 > :nth-child(4n)::after, .flex.-border.-to5 > :nth-child(5n)::after, .flex.-border.-to6 > :nth-child(6n)::after, .flex.-border.-to7 > :nth-child(7n)::after, .flex.-border.-to8 > :nth-child(8n)::after, .flex.-border.-to9 > :nth-child(9n)::after{ right:0; } }