@charset "UTF-8";
/**
 * flex css
 * @version 23.05.26
 * @version 24.06.18 justify-content / align-itemsの種類を変更
 * @version 24.11.05 justify-contentのクラス名をfromto-boxと統一
 */

.flex { display: flex; flex-wrap: wrap; }
.flex.nowrap { flex-wrap: nowrap; }
.flex.in-flex { display: inline-flex; flex-wrap: nowrap; }

.flex.jc-sa, .flex.s-a { justify-content: space-around; }
.flex.jc-sb, .flex.s-b { justify-content: space-between; }
.flex.jc-c { justify-content: center; }
.flex:is(.jc-st, .jc-l) { justify-content: flex-start; }
.flex:is(.jc-ed, .jc-r) { justify-content: flex-end; }

.flex.al-bs { align-items: baseline; }
.flex.al-ce { align-items: center; }
.flex.al-st { align-items: flex-start; }
.flex.al-en { align-items: flex-end; }

/* 横並び */
.flex.side { gap: 0 12px; align-items: center; }

/* リスト <ul class="flex s-a">or<ul class="flex s-b">で不足分のliを自動生成する */
ul.flex { flex-wrap: wrap; gap: 12px 12px; }

/* 分割 */
.flex[class*="sep"] { justify-content: space-between; }
.flex.sep2 > * { width: 45%; }
.flex.sep3 > * { width: 30%; }
.flex.sep4 > * { width: 20%; }