###### tags: `framework`,`abisu`,`css`
# 基本クラス

## レイアウト

### display (d)
| Class | Properties |
| ------------ | ---------------------- |
| .up-d-block | display: block; |
| .up-d-iblock | display: inline-block; |
| .up-d-flex | display: flex; |
| .up-d-none | display: none; |

<br>

### box-sizing (bz)
| Class | Properties |
| -------------- | ------------------------ |
| .up-bz-content | box-sizing: content-box; |

<br>

### clear
| Class | Properties |
| ------------------- | ----------------------------------------------- |
| .up-clear | clear: both; |
| .up-clearfix | display: block; |
| .up-clearfix:before | content: "";<br>display: block;<br>clear: both; |
| .up-clearfix:after | content: "";<br>display: block;<br>clear: both; |

<br>

### overflow (over)
| Class | Properties |
| --------------- | ----------------- |
| .up-over-hidden | overflow: hidden; |

<br>

### position (pos)
| Class | Properties |
| ----------- | ------------------- |
| .up-pos-rel | position: relative; |
| .up-pos-abs | position: absolute; |
| .up-pos-fix | position: fixed; |

<br>

### z-index (z)
-5~5 (1刻み)
| Class | Properties |
| -------- | ------------ |
| .up-z-n5 | z-index: -5; |
| .. | |
| .up-z-5 | z-index: 5; |

<br>
<br>

## 色

### color (c\)
| Class | Properties |
| ------------ | -------------- |
| .up-c-red | color: red; |
| .up-c-blue | color: blue; |
| .up-c-yellow | color: yellow; |
| .up-c-gray | color: gray; |
| .up-c-black | color: black; |
| .up-c-white | color: white; |

<br>

### background-color (bgc)
| Class | Properties |
| -------------- | ------------------------- |
| .up-bgc-red | background-color: red; |
| .up-bgc-blue | background-color: blue; |
| .up-bgc-yellow | background-color: yellow; |
| .up-bgc-gray | background-color: gray; |
| .up-bgc-black | background-color: black; |
| .up-bgc-white | background-color: white; |

<br>
<br>

## テキスト

### font-family(ff)
| Class | Properties |
| ---------- | --------------------------------- |
| .up-ff-gothic | font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; |
| .up-ff-mincho | font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; |
| .up-ff-meiryo | font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; |

<br>

### font-style (fs)
| Class | Properties |
| ------------- | ------------------- |
| .up-fs-italic | font-style: italic; |

<br>

### text-align (ta)
| Class | Properties |
| -------- | ------------------- |
| .up-ta-l | text-align: left; |
| .up-ta-c | text-align: center; |
| .up-ta-r | text-align: right; |

<br>

### text-decoration (td)
| Class | Properties |
| ------------ | --------------------------- |
| .up-td-under | text-decoration: underline; |

<br>

### list-style-type (lst)
| Class | Properties |
| --------------- | ------------------------- |
| .up-lst-disc | list-style-type: disc; |
| .up-lst-deci | list-style-type: decimal; |

<br>

### list-style-position (lsp)
| Class | Properties |
| ----------- | ----------------------------- |
| .up-lsp-in | list-style-position: inside; |
| .up-lsp-out | list-style-position: outside; |

<br>

### font-weight (fw)
| Class | Properties |
| -------------- | --------------------- |
| .up-fw-lighter | font-weight: lighter; |
| .up-fw-normal | font-weight: normal; |
| .up-fw-bold | font-weight: bold; |

<br>

### font-size (fz)

#### px
##### 10px~20px (1px刻み)
| Class | Properties |
| --------- | ---------------- |
| .up-fz-10 | font-size: 10px; |
| .up-fz-11 | font-size: 11px; |
| .. | |
| .up-fz-19 | font-size: 19px; |
| .up-fz-20 | font-size: 20px; |

##### 22px~70px (2px刻み)
| Class | Properties |
| --------- | ---------------- |
| .up-fz-22 | font-size: 22px; |
| .up-fz-24 | font-size: 24px; |
| .. | |
| .up-fz-68 | font-size: 68px; |
| .up-fz-70 | font-size: 70px; |

##### 80px~300px (20px刻み)
| Class | Properties |
| ---------- | ----------------- |
| .up-fz-80 | font-size: 80px; |
| .up-fz-100 | font-size: 100px; |
| .. | |
| .up-fz-280 | font-size: 280px; |
| .up-fz-300 | font-size: 300px; |

#### vw
##### 1vw~3vw (0.1刻み)
| Class | Properties |
| ------------ | ----------------- |
| .up-fz-1vw | font-size: 1vw; |
| .up-fz-1.1vw | font-size: 1.1vw; |
| .. | |
| .up-fz-2.9vw | font-size: 2.9vw; |
| .up-fz-3vw | font-size: 3vw; |

<br>

### line-height (lh)
##### 1~3 (0.1刻み)
| Class | Properties |
| ---------- | ----------------- |
| .up-lh-1 | line-height: 1; |
| .up-lh-1.1 | line-height: 1.1; |
| ... | |
| .up-lh-2.9 | line-height: 2.9; |
| .up-lh-3 | line-height: 3; |

<br>

### cursor (cur)
| Class | Properties |
| --------------- | ---------------- |
| .up-cur-pointer | cursor: pointer; |

<br>

### br
改行の有無
| Class | Properties |
| -------------- | ---------------- |
| .up-br br | display: inline; |
| .up-br-none br | display: none; |

<br>
<br>

## フレックス

| Class | Properties |
| ---------- | -------------- |
| .up-d-flex | display: flex; |

<br>

### flex-wrap (fxw)
| Class | Properties |
| ------------- | ------------------------ |
| .up-fxw-wrap | flex-wrap: wrap; |
| .up-fxw-wrapr | flex-wrap: wrap-reverse; |
| .up-fxw-nowrap | flex-wrap: nowrap; |

<br>

### flex-direction (fxd)
| Class | Properties |
| ----------- | ------------------------------- |
| .up-fxd-row | flex-direction: row; |
| .up-fxd-rowr | flex-direction: row-reverse; |
| .up-fxd-col | flex-direction: column; |
| .up-fxd-colr | flex-direction: column-reverse; |

偶数と奇数番目で左右反転
| Class | Properties |
| -------------------------------- | ---------------------------- |
| .up-fxd-even > \*:nth-child(even) | flex-direction: row-reverse; |
| .up-fxd-odd > \*:nth-child(odd) | flex-direction: row-reverse; |

<br>

### justify-content (jc)
| Class | Properties |
| --------- | ------------------------------- |
| .up-jc-fs | justify-content: flex-start; |
| .up-jc-fe | justify-content: flex-end; |
| .up-jc-c | justify-content: center; |
| .up-jc-sb | justify-content: space-between; |
| .up-jc-sa | justify-content: space-around; |
| .up-jc-se | justify-content: space-evenly; |

<br>

### align-items (ai)
| Class | Properties |
| --------- | ------------------------ |
| .up-ai-fs | align-items: flex-start; |
| .up-ai-fe | align-items: flex-end; |
| .up-ai-c | align-items: center; |
| .up-ai-b | align-items: baseline; |
| .up-ai-s | align-items: stretch; |

<br>

### align-content (ac)
| Class | Properties |
| --------- | ----------------------------- |
| .up-ac-fs | align-content: flex-start; |
| .up-ac-fe | align-content: flex-end; |
| .up-ac-c | align-content: center; |
| .up-ac-sb | align-content: space-between; |
| .up-ac-sa | align-content: space-around; |

<br>

### align-self (as)
| Class | Properties |
| --------- | ----------------------- |
| .up-as-fs | align-self: flex-start; |
| .up-as-fe | align-self: flex-end; |
| .up-as-c | align-self: center; |
| .up-as-s | align-self: stretch; |
| .up-as-auto | align-self: auto; |

<br>

### grow (fxg), shirnk (fxsh)
| Class | Properties |
| ---------- | --------------- |
| .up-fxg-0 | flex-grow: 0; |
| .up-fxg-1 | flex-grow: 1; |
| .up-fxsh-0 | flex-shrink: 0; |
| .up-fxsh-1 | flex-shrink: 1; |

<br>
<br>

## サイズ

### width (w)
| Class | Properties |
| --------- | ------------ |
| up-w-auto | width: auto; |

#### px
##### 0~10px (1px刻み)
| Class | Properties |
| ------- | ------------ |
| up-w-0 | width: 0; |
| up-w-1 | width: 1px; |
| .. | |
| up-w-9 | width: 9px; |
| up-w-10 | width: 10px; |

##### 20~300px (10px刻み)
| Class | Properties |
| -------- | ------------- |
| up-w-20 | width: 20px; |
| up-w-30 | width: 30px; |
| .. | |
| up-w-290 | width: 290px; |
| up-w-300 | width: 300px; |

##### 350~1000px (50px刻み)
| Class | Properties |
| --------- | -------------- |
| up-w-350 | width: 350px; |
| up-w-400 | width: 400px; |
| .. | |
| up-w-950 | width: 950px; |
| up-w-1000 | width: 1000px; |

#### %
| Class | Properties |
| --------- | ------------ |
| up-w-48% | width: 48%; |

##### 5~100% (5%刻み)
| Class | Properties |
| --------- | ------------ |
| up-w-5% | width: 5%; |
| up-w-10% | width: 10%; |
| .. | |
| up-w-95% | width: 95%; |
| up-w-100% | width: 100%; |

<br>

### min-width (minw)
#### px
##### 0~10px (1px刻み)
| Class | Properties |
| ---------- | ---------------- |
| up-minw-0 | min-width: 0; |
| up-minw-1 | min-width: 1px; |
| .. | |
| up-minw-9 | min-width: 9px; |
| up-minw-10 | min-width: 10px; |

##### 20~300px (10px刻み)
| Class | Properties |
| ----------- | ----------------- |
| up-minw-20 | min-width: 20px; |
| up-minw-30 | min-width: 30px; |
| .. | |
| up-minw-290 | min-width: 290px; |
| up-minw-300 | min-width: 300px; |

##### 350~1000px (50px刻み)
| Class | Properties |
| ------------ | ------------------ |
| up-minw-350 | min-width: 350px; |
| up-minw-400 | min-width: 400px; |
| .. | |
| up-minw-950 | min-width: 950px; |
| up-minw-1000 | min-width: 1000px; |

#### %
| Class | Properties |
| ----------- | --------------- |
| up-minw-48% | min-width: 48%; |

##### 5~100% (5%刻み)
| Class | Properties |
| ------------ | ---------------- |
| up-minw-5% | min-width: 5%; |
| up-minw-10% | min-width: 10%; |
| .. | |
| up-minw-95% | min-width: 95%; |
| up-minw-100% | min-width: 100%; |

<br>

### max-width (maxw)
#### px
##### 0~10px (1px刻み)
| Class | Properties |
| ---------- | ---------------- |
| up-maxw-0 | max-width: 0; |
| up-maxw-1 | max-width: 1px; |
| .. | |
| up-maxw-9 | max-width: 9px; |
| up-maxw-10 | max-width: 10px; |

##### 20~300px (10px刻み)
| Class | Properties |
| ----------- | ----------------- |
| up-maxw-20 | max-width: 20px; |
| up-maxw-30 | max-width: 30px; |
| .. | |
| up-maxw-290 | max-width: 290px; |
| up-maxw-300 | max-width: 300px; |

##### 350~1000px (50px刻み)
| Class | Properties |
| ------------ | ------------------ |
| up-maxw-350 | max-width: 350px; |
| up-maxw-400 | max-width: 400px; |
| .. | |
| up-maxw-950 | max-width: 950px; |
| up-maxw-1000 | max-width: 1000px; |

#### %
| Class | Properties |
| ----------- | --------------- |
| up-maxw-48% | max-width: 48%; |

##### 5~100% (5%刻み)
| Class | Properties |
| ------------ | ---------------- |
| up-maxw-5% | max-width: 5%; |
| up-maxw-10% | max-width: 10%; |
| .. | |
| up-maxw-95% | max-width: 95%; |
| up-maxw-100% | max-width: 100%; |

<br>

### height (h)
| Class | Properties |
| ----------- | ------------------------ |
| up-h-auto | height: auto; |
| up-h-auto-i | height: auto !important; |

#### px
##### 0~10px (1px刻み)
| Class | Properties |
| ------- | ------------- |
| up-h-0 | height: 0; |
| up-h-1 | height: 1px; |
| .. | |
| up-h-9 | height: 9px; |
| up-h-10 | height: 10px; |

##### 10~300px (10px刻み)
| Class | Properties |
| -------- | -------------- |
| up-h-10 | height: 10px; |
| up-h-20 | height: 20px; |
| .. | |
| up-h-290 | height: 290px; |
| up-h-300 | height: 300px; |

##### 300~1000px (50px刻み)
| Class | Properties |
| --------- | --------------- |
| up-h-350 | height: 350px; |
| up-h-400 | height: 400px; |
| .. | |
| up-h-950 | height: 950px; |
| up-h-1000 | height: 1000px; |

#### %
| Class | Properties |
| -------- | ------------ |
| up-h-48% | height: 48%; |

##### 5~100% (5%刻み)
| Class | Properties |
| --------- | ------------- |
| up-h-5% | height: 5%; |
| up-h-10% | height: 10%; |
| .. | |
| up-h-95% | height: 95%; |
| up-h-100% | height: 100%; |

<br>

### min-height (minh)
#### px
##### 0~10px (1px刻み)
| Class | Properties |
| ---------- | ----------------- |
| up-minh-0 | min-height: 0; |
| up-minh-1 | min-height: 1px; |
| .. | |
| up-minh-9 | min-height: 9px; |
| up-minh-10 | min-height: 10px; |

##### 10~300px (10px刻み)
| Class | Properties |
| ----------- | ------------------ |
| up-minh-10 | min-height: 10px; |
| up-minh-20 | min-height: 20px; |
| .. | |
| up-minh-290 | min-height: 290px; |
| up-minh-300 | min-height: 300px; |

##### 300~1000px (50px刻み)
| Class | Properties |
| ------------ | ------------------- |
| up-minh-350 | min-height: 350px; |
| up-minh-400 | min-height: 400px; |
| .. | |
| up-minh-950 | min-height: 950px; |
| up-minh-1000 | min-height: 1000px; |

#### %
| Class | Properties |
| ----------- | ---------------- |
| up-minh-48% | min-height: 48%; |

##### 5~100% (5%刻み)
| Class | Properties |
| ------------ | ----------------- |
| up-minh-5% | min-height: 5%; |
| up-minh-10% | min-height: 10%; |
| .. | |
| up-minh-95% | min-height: 95%; |
| up-minh-100% | min-height: 100%; |

<br>

### max-height (maxh)
#### px
##### 0~10px (1px刻み)
| Class | Properties |
| ---------- | ----------------- |
| up-maxh-0 | max-height: 0; |
| up-maxh-1 | max-height: 1px; |
| .. | |
| up-maxh-9 | max-height: 9px; |
| up-maxh-10 | max-height: 10px; |

##### 10~300px (10px刻み)
| Class | Properties |
| ----------- | ------------------ |
| up-maxh-10 | max-height: 10px; |
| up-maxh-20 | max-height: 20px; |
| .. | |
| up-maxh-290 | max-height: 290px; |
| up-maxh-300 | max-height: 300px; |

##### 300~1000px (50px刻み)
| Class | Properties |
| ------------ | ------------------- |
| up-maxh-350 | max-height: 350px; |
| up-maxh-400 | max-height: 400px; |
| .. | |
| up-maxh-950 | max-height: 950px; |
| up-maxh-1000 | max-height: 1000px; |

#### %
| Class | Properties |
| ----------- | ---------------- |
| up-maxh-48% | max-height: 48%; |

##### 5~100% (5%刻み)
| Class | Properties |
| ------------ | ----------------- |
| up-maxh-5% | max-height: 5%; |
| up-maxh-10% | max-height: 10%; |
| .. | |
| up-maxh-95% | max-height: 95%; |
| up-maxh-100% | max-height: 100%; |

<br>
<br>

## マージン (m)
| Class | Properties |
| ----------- | ------------------------------------------- |
| .up-m-auto | margin: auto; |
| .up-ml-auto | margin-left: auto; |
| .up-mr-auto | margin-right: auto; |
| .up-mx-auto | margin-left: auto; <br> margin-right: auto; |

### px
#### 0~10px (1px刻み)
| Class | Properties |
| --------- | ------------------------------------------- |
| .up-m-0 | margin: 0; |
| .up-mx-0 | margin-left: 0; <br> margin-right: 0; |
| .up-my-0 | margin-top: 0; <br> margin-bottom: 0; |
| .up-mt-0 | margin-top: 0; |
| .up-mr-0 | margin-right: 0; |
| .up-mb-0 | margin-bottom: 0; |
| .up-ml-0 | margin-left: 0; |
| .. | |
| .up-m-10 | margin: 10px; |
| .up-mx-10 | margin-left: 10px; <br> margin-right: 10px; |
| .up-my-10 | margin-top: 10px; <br> margin-bottom: 10px; |
| .up-mt-10 | margin-top: 10px; |
| .up-mr-10 | margin-right: 10px; |
| .up-mb-10 | margin-bottom: 10px; |
| .up-ml-10 | margin-left: 10px; |

#### 15~150px (5px刻み)
| Class | Properties |
| ---------- | --------------------------------------------- |
| .up-m-15 | margin: 15px; |
| .up-mx-15 | margin-left: 15px; <br> margin-right: 15px; |
| .up-my-15 | margin-top: 15px; <br> margin-bottom: 15px; |
| .up-mt-15 | margin-top: 15px; |
| .up-mr-15 | margin-right: 15px; |
| .up-mb-15 | margin-bottom: 15px; |
| .up-ml-15 | margin-left: 15px; |
| .. | |
| .up-m-150 | margin: 150px; |
| .up-mx-150 | margin-left: 150px; <br> margin-right: 150px; |
| .up-my-150 | margin-top: 150px; <br> margin-bottom: 150px; |
| .up-mt-150 | margin-top: 150px; |
| .up-mr-150 | margin-right: 150px; |
| .up-mb-150 | margin-bottom: 150px; |
| .up-ml-150 | margin-left: 150px; |

### %
#### 0.5%~10% (0.5%刻み)
| Class | Properties |
| ----------- | ------------------------------------------- |
| .up-m-0.5% | margin: 0.5%; |
| .up-mx-0.5% | margin-left: 0.5%; <br> margin-right: 0.5%; |
| .up-my-0.5% | margin-top: 0.5%; <br> margin-bottom: 0.5%; |
| .up-mt-0.5% | margin-top: 0.5%; |
| .up-mr-0.5% | margin-right: 0.5%; |
| .up-mb-0.5% | margin-bottom: 0.5%; |
| .up-ml-0.5% | margin-left: 0.5%; |
| .. | |
| .up-m-10% | margin: 10%; |
| .up-mx-10% | margin-left: 10%; <br> margin-right: 10%; |
| .up-my-10% | margin-top: 10%; <br> margin-bottom: 10%; |
| .up-mt-10% | margin-top: 10%; |
| .up-mr-10% | margin-right: 10%; |
| .up-mb-10% | margin-bottom: 10%; |
| .up-ml-10% | margin-left: 10%; |

<br>
<br>

## パディング (p\)

### px
#### 0~10px (1px刻み)
| Class | Properties |
| --------- | --------------------------------------------- |
| .up-p-0 | padding: 0; |
| .up-px-0 | padding-left: 0; <br> padding-right: 0; |
| .up-py-0 | padding-top: 0; <br> padding-bottom: 0; |
| .up-pt-0 | padding-top: 0; |
| .up-pr-0 | padding-right: 0; |
| .up-pb-0 | padding-bottom: 0; |
| .up-pl-0 | padding-left: 0; |
| .. | |
| .up-p-0 | padding: 10px; |
| .up-px-10 | padding-left: 10px; <br> padding-right: 10px; |
| .up-py-10 | padding-top: 10px; <br> padding-bottom: 10px; |
| .up-pt-10 | padding-top: 10px; |
| .up-pr-10 | padding-right: 10px; |
| .up-pb-10 | padding-bottom: 10px; |
| .up-pl-10 | padding-left: 10px; |

#### 15~150px (5px刻み)
| Class | Properties |
| ---------- | ----------------------------------------------- |
| .up-p-15 | padding: 15px; |
| .up-px-15 | padding-left: 15px; <br> padding-right: 15px; |
| .up-py-15 | padding-top: 15px; <br> padding-bottom: 15px; |
| .up-pt-15 | padding-top: 15px; |
| .up-pr-15 | padding-right: 15px; |
| .up-pb-15 | padding-bottom: 15px; |
| .up-pl-15 | padding-left: 15px; |
| .. | |
| .up-p-150 | padding: 150px; |
| .up-px-150 | padding-left: 150px; <br> padding-right: 150px; |
| .up-py-150 | padding-top: 150px; <br> padding-bottom: 150px; |
| .up-pt-150 | padding-top: 150px; |
| .up-pr-150 | padding-right: 150px; |
| .up-pb-150 | padding-bottom: 150px; |
| .up-pl-150 | padding-left: 150px; |

### %
#### 0.5%~10% (0.5%刻み)
| Class | Properties |
| ----------- | --------------------------------------------- |
| .up-p-0.5% | padding: 0.5%; |
| .up-px-0.5% | padding-left: 0.5%; <br> padding-right: 0.5%; |
| .up-py-0.5% | padding-top: 0.5%; <br> padding-bottom: 0.5%; |
| .up-pt-0.5% | padding-top: 0.5%; |
| .up-pr-0.5% | padding-right: 0.5%; |
| .up-pb-0.5% | padding-bottom: 0.5%; |
| .up-pl-0.5% | padding-left: 0.5%; |
| .. | |
| .up-p-10% | padding: 10%; |
| .up-px-10% | padding-left: 10%; <br> padding-right: 10%; |
| .up-py-10% | padding-top: 10%; <br> padding-bottom: 10%; |
| .up-pt-10% | padding-top: 10%; |
| .up-pr-10% | padding-right: 10%; |
| .up-pb-10% | padding-bottom: 10%; |
| .up-pl-10% | padding-left: 10%; |

<br>
<br>

## カラム

### col
並びの数を指定

| Class | Properties |
|-------------|------------------|
| .up-col-1<br>.up-col-2<br>.up-col-3<br>.up-col-4<br>.up-col-5<br>.up-col-6 | display: flex;<br>flex-wrap: wrap;|
| .up-col-1 > * | width: 100%; |
| .up-col-2 > * | width: 50%; |
| .up-col-3 > * | width: 33.333%; |
| .up-col-4 > * | width: 25%; |
| .up-col-5 > * | width: 20%; |
| .up-col-6 > * | width: 16.666%; |

<br>

### gap
並びの間のスペースを指定
上記のcolと組み合わせ

#### gapy
縦方向のスペース調整
##### px
###### 0~100px (10px刻み)
| Class | Properties |
| ---------------- | --------------------- |
| .up-gapy-0 > * | margin-bottom: 0; |
| .up-gapy-10 > * | margin-bottom: 10px; |
| .. | |
| .up-gapy-90 > * | margin-bottom: 90px; |
| .up-gapy-100 > * | margin-bottom: 100px; |

##### %
###### 1~10% (1%刻み)
| Class | Properties |
| ---------------- | ------------------- |
| .up-gapy-1% > * | margin-bottom: 1%; |
| .up-gapy-2% > * | margin-bottom: 2%; |
| .. | |
| .up-gapy-9% > * | margin-bottom: 9%; |
| .up-gapy-10% > * | margin-bottom: 10%; |

<br>

#### gapx
横方向のスペース調整
##### px
###### 0~100px (10px刻み)
| Class | Properties |
| ---------------- | --------------------------------------------- |
| .up-gapx-0 > * | margin-left: 0;<br>margin-right: 0; |
| .up-gapx-10 > * | margin-left: 2.5px;<br>margin-right: 2.5px; |
| .. | |
| .up-gapx-90 > * | margin-left: 12.5px;<br>margin-right: 12.5px; |
| .up-gapx-100 > * | margin-left: 15px;<br>margin-right: 15px; |

##### %
###### 1~10% (1%刻み)
| Class | Properties |
| ---------------- | ----------------------------------------- |
| .up-gapx-1% > * | margin-left: 0.5%;<br>margin-right: 0.5%; |
| .up-gapx-2% > * | margin-left: 1%;<br>margin-right: 1%; |
| .. | |
| .up-gapx-9% > * | margin-left: 4.5%;<br>margin-right: 4.5%; |
| .up-gapx-10% > * | margin-left: 5%;<br>margin-right: 5%; |

<br>
<br>

## オブジェクトフィット

### 画像アスペクト比固定
| Class | Properties |
|----------------------------|-----------------------------------------|
| [class*="up-ofi"] | position: relative; <br> display: block; <br> width: 100%;|
| [class*="up-ofi"]:after | content: ""; <br> display: block; |
| [class*="up-ofi"] img | position: absolute;<br>top: 0;<br>left: 0;<br>width: 100%;<br>height: 100%;<br>object-fit: cover;<br>object-position: cover; |

10~170%まで5%刻み
| Class | Properties |
| ----------------- | ------------------ |
| .up-ofi-10:after | padding-top: 10%; |
| .up-ofi-15:after | padding-top: 15%; |
| .. | |
| .up-ofi-165:after | padding-top: 165%; |
| .up-ofi-170:after | padding-top: 170%; |

<br>

### object-position
| Class | Properties |
| ------------- | ----------------------- |
| .up-obp-c img | object-positon: center; |
| .up-obp-t img | object-positon: top; |
| .up-obp-r img | object-positon: right; |
| .up-obp-b img | object-positon: bottom; |
| .up-obp-l img | object-positon: left; |

<br>

### object-fit
| Class | Properties |
| ------------------- | -------------------- |
| .up-obf-contain img | object-fit: contain; |

<br>
<br>

## 固有クラス

### inner
500~1500pxまで100px刻み
| Class | Properties |
| ---------- | ------------------ |
| .inner500 ~ .inner1500 <br> .inner | margin: 0 auto; |
| .inner500 ~ .inner900 <br> .inner | width: 92%; |
| .inner1100 ~ .inner1500 | width: 98%; |
| .inner500 | max-width: 500px; |
| .inner600 | max-width: 600px; |
| .inner700 | max-width: 700px; |
| .inner800 | max-width: 800px; |
| .inner900 | max-width: 900px; |
| .inner | max-width: 1000px; |
| .inner1100 | max-width: 1100px; |
| .inner1200 | max-width: 1200px; |
| .inner1300 | max-width: 1300px; |
| .inner1400 | max-width: 1400px; |
| .inner1500 | max-width: 1500px; |

#### responsive

@media (max-width: 1024px) {
  .inner,
  .inner500,
  .inner600,
  .inner700,
  .inner800,
  .inner900,
  .inner1100,
  .inner1200,
  .inner1300,
  .inner1400,
  .inner1500 {
    max-width: 768px;
    width: 96%;
  }
}

<br>

### 子要素にあるaタグをブロック化
| Class | Properties |
| --------- | --------------- |
| .up-adb a | display: block; |

<br>

### ３点リーダー（テキストトリミング）
#### １行
| Class | Properties |
|----------|----------------|
| .up-reader1 | overflow: hidden;<br>text-overflow: ellipsis; <br>white-space: nowrap; |

#### ２行、３行
| Class | Properties |
| ----------- | ---------- |
| .up-reader2 | jsで機能 |
| .up-reader3 | jsで機能 |

<br>

### 正円
| Class | Properties |
| ---------- | --------------- |
| .up-circle | overflow: hidden; <br> border-radius: 50%; |

<br>

### 表示・非表示
編集画面では「SP用項目」などの注書きが表示されます。
| Class | Properties |
| -------- | --------------- |
| .up-show | display: block; |
| .up-hide | display: none; |

<br>
<br>

## アニメーションクラス

### fead
| Class | Properties |
| ----------- | ----------------------------------------------------------------------------- |
| .fead-mv | opacity: 0; <br> transition: 0.5s ease-out; |
| .fead-up | opacity: 0; <br> transition: 0.5s ease-out; <br> transform: translateY(50px); |
| .fead-right | opacity: 0; <br> transition: 0.5s ease-out; <br> transform: translateX(-20%); |
| .fead-left | opacity: 0; <br> transition: 0.5s ease-out; <br> transform: translateX(20%); |
| .mv | opacity: 1; <br> transform: translate(0, 0); |

<br>
<br>

## A-BiSU編集画面でのみ働くクラス

### SP時のみ表示される項目に目印をつける
| Class | Properties |
|----------|----------------|
| <s>.up-spmark@edit</s><br>.up-spmark_edit| border: solid 1px #000; |
| <s>.up-spmark@edit:before</s><br>.up-spmark_edit:before | content: "スマホ時のみ表示"; <br> display: block; <br> position: relative; <br> z-index: 2; <br> font-size: 12px; <br> color: #fff; <br> background: #000; |

<style>
thead {
width: 100%;
}
.markdown-body table th {
font-weight: 500;
}
td:first-child {
width: 300px;
}
td:last-child {
width: 60%;
}
</style>