20201124のCSSに関する記事は13件です。

要素を非表示にするCSSプロパティ3つ

要素を隠すときによく使うのが、display:noneかなと思いますが、ほかにもいくつか要素を隠す方法があるのでご紹介します。

201126.png

こちらの記事を参考にしました。(https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

コーディング作業短縮化プラグイン『Emmet』をベースにCSSにしてみました

コーディング作業短縮化プラグイン『Emmet』をベースにしたCSS

『Emmet』とは入力補完機能によりHTML、CSS等を素早く編集できる、
テキストエディタ用のプラグインのことです。

記述法や練習だったりでわかりやすいページはこのあたり

Emmetの使い方を覚えてHTML/CSSの高速コーディングを身に付けよう
https://webdesign-trends.net/entry/10748

Emmet入門
https://dotinstall.com/lessons/basic_emmet_v3

それで、これはいいなとタッチタイピングの練習をしていたのですけど、かんたんな調整用CSSとしても共通認識と入力の手間的にいいんじゃないかと思ったのでCSSにしてみました。

primer-emmet(emmet文法に合わせた調整用CSS)

/* primer-emmet
  (emmet文法に合わせた調整用CSS設定)
===================================================================
# 目次
  - visual Formatting
  - box Sizing
  - font
  - text
  - background
  - border
  - list
=================================================================== */

/* Visual Formatting
------------------------------------------------------------------- */
.pos--s { position: static; }

.pos--a { position: absolute; }

.pos--r { position: relative; }

.pos--f { position: fixed; }

.t--a   { top: auto; }

.r--a   { right: auto; }

.b--a   { bottom: auto; }

.l--a   { left: auto; }

.z--a   { z-index: auto; }

.fl--n  { float: none; }

.fl--l  { float: left; }

.fl--r  { float: right; }

.cl--n  { clear: none; }

.cl--l  { clear: left; }

.cl--r  { clear: right; }

.cl--b  { clear: both; }

.d--n   { display: none; }

.d--b   { display: block; }

.d--f   { display: flex; }

.d--if  { display: inline-flex; }

.d--i   { display: inline; }

.d--ib  { display: inline-block; }

.d--li  { display: list-item; }

.d--tb  { display: table; }

.d--itb { display: inline-table; }

.d--tbcp    { display: table-caption; }

.d--tbcl    { display: table-column; }

.d--tbclg   { display: table-column-group; }

.d--tbhg    { display: table-header-group; }

.d--tbfg    { display: table-footer-group; }

.d--tbr { display: table-row; }

.d--tbrg    { display: table-row-group; }

.d--tbc { display: table-cell; }

.d--rb  { display: ruby; }

.d--rbb { display: ruby-base; }

.d--rbt { display: ruby-text; }

.v--v   { visibility: visible; }

.v--h   { visibility: hidden; }

.v--c   { visibility: collapse; }

.ov--v  { overflow: visible; }

.ov--h  { overflow: hidden; }

.ov--s  { overflow: scroll; }

.ov--a  { overflow: auto; }

.ovx--v { overflow-x: visible; }

.ovx--h { overflow-x: hidden; }

.ovx--s { overflow-x: scroll; }

.ovx--a { overflow-x: auto; }

.ovy--v { overflow-y: visible; }

.ovy--h { overflow-y: hidden; }

.ovy--s { overflow-y: scroll; }

.ovy--a { overflow-y: auto; }

.rsz--n { resize: none; }

.rsz--b { resize: both; }

.rsz--h { resize: horizontal; }

.rsz--v { resize: vertical; }

/* Box Sizing
------------------------------------------------------------------- */

.bxz--cb { box-sizing: content-box; }

.bxz--bb { box-sizing: border-box; }

.bxsh--n { box-shadow: none; }

/* Font
------------------------------------------------------------------- */

.fw--n { font-weight: normal; }

.fw--b { font-weight: bold; }

.fw--br { font-weight: bolder; }

.fw--lr { font-weight: lighter; }

.fs--n { font-style: normal; }

.fs--i { font-style: italic; }

.fs--o { font-style: oblique; }

.fst--n { font-stretch: normal; }

.fst--uc { font-stretch: ultra-condensed; }

.fst--ec { font-stretch: extra-condensed; }

.fst--c { font-stretch: condensed; }

.fst--sc { font-stretch: semi-condensed; }

.fst--se { font-stretch: semi-expanded; }

.fst--e { font-stretch: expanded; }

.fst--ee { font-stretch: extra-expanded; }

.fst--ue { font-stretch: ultra-expanded; }


/* text
------------------------------------------------------------------- */

.va--sup { vertical-align: super; }

.va--t { vertical-align: top; }

.va--tt { vertical-align: text-top; }

.va--m { vertical-align: middle; }

.va--bl { vertical-align: baseline; }

.va--b { vertical-align: bottom; }

.va--tb { vertical-align: text-bottom; }

.va--sub { vertical-align: sub; }

.ta--l { text-align: left; }

.ta--c { text-align: center; }

.ta--r { text-align: right; }

.ta--j { text-align: justify; }

.tal--a { text-align-last: auto; }

.tal--l { text-align-last: left; }

.tal--c { text-align-last: center; }

.tal--r { text-align-last: right; }

.td--n { text-decoration: none; }

.td--u { text-decoration: underline; }

.td--o { text-decoration: overline; }

.td--l { text-decoration: line-through; }

.te--n { text-emphasis: none; }

.te--ac { text-emphasis: accent; }

.te--dt { text-emphasis: dot; }

.te--c { text-emphasis: circle; }

.te--ds { text-emphasis: disc; }

.te--b { text-emphasis: before; }

.te--a { text-emphasis: after; }

.tt--n { text-transform: none; }

.tt--c { text-transform: capitalize; }

.tt--u { text-transform: uppercase; }

.tt--l { text-transform: lowercase; }

.tsh--n { text-shadow: none; }

.whs--n { white-space: normal; }

.whs--p { white-space: pre; }

.whs--nw { white-space: nowrap; }

.whs--pw { white-space: pre-wrap; }

.whs--pl { white-space: pre-line; }

.wob--n { word-break: normal; }

.wob--k { word-break: keep-all; }

.wob--ba { word-break: break-all; }

.wow--nm { word-wrap: normal; }

.wow--n { word-wrap: none; }

.wow--u { word-wrap: unrestricted; }

.wow--s { word-wrap: suppress; }

.wow--b { word-wrap: break-word; }

/* background
------------------------------------------------------------------- */

.bg--n { background: none; }

.bgc--t { background-color: transparent; }

.bgi--n { background-image: none; }

.bgr--n { background-repeat: no-repeat; }

.bgr--x { background-repeat: repeat-x; }

.bgr--y { background-repeat: repeat-y; }

.bgr--sp { background-repeat: space; }

.bgr--rd { background-repeat: round; }

.bga--f { background-attachment: fixed; }

.bga--s { background-attachment: scroll; }

.bgsz--a { background-size: auto; }

.bgsz--ct { background-size: contain; }

.bgsz--cv { background-size: cover; }

/* outline
------------------------------------------------------------------- */

.olw--tn {
    outline-style: none;    
}

.ols--dt {
    outline-style: dotted;
}

.ols--ds {
    outline-style: dashed;
}

.ols--s {
    outline-style: solid;
}

.ols--db {
    outline-style: double;
} 

.ols--g {
    outline-style: groove;
}

.ols--r {
    outline-style: ridge;
}

.ols--i {
    outline-style: inset;
}

.ols--o {
    outline-style: outset;
}

.tbl--a {
    table-layout: auto;
}

/* table
------------------------------------------------------------------- */

.tbl--a {
    table-layout: auto;
}

.tbl--f {
    table-layout: fixed;
}

.cps--t {
    caption-side: top;
}

.cps--b {
    caption-side: bottom;
}

.es--s {
    empty-cells: show;
}

.es--h {
    empty-cells: hide;
}

/* border
------------------------------------------------------------------- */

.bd--n {
    border: none;
}

.bdcl--c {
    border-collapse: collapse;
}

.bdcl--s {
    border-collapse: separate;
}

.bds--n {
    border-style: none;
}

.bds--h {
    border-style: hidden;
}

.bds--dt {
    border-style: dotted;
}

.bds--ds {
    border-style: dashed;
}

.bds--s {
    border-style: solid;
}

.bds--db {
    border-style: double;
}

.bds--dtds {
    border-style: dot-dash;
}

.bds--dtdtds {
    border-style: dot-dot-dash;
}

.bds--w {
    border-style: wave;
}

.bds--g {
    border-style: groove;
}

.bds--r {
    border-style: ridge;
}

.bds--i {
    border-style: inset;
}

.bds--o {
    border-style: outset;
}

/* border-top
------------------------------------------------------------------- */

.bdt--n {
    border-top: none;
}

.bdts--n    {
    border-top-style: none;
}

.bdts--h {
    border-top-style: hidden;
}

.bdts--dt {
    border-top-style: dotted;
}

.bdts--ds {
    border-top-style: dashed;
}

.bdts--s {
    border-top-style: solid;
}

.bdts--db {
    border-top-style: double;
}

.bdts--dtds {
    border-top-style: dot-dash;
}

.bdts--dtdtds {
    border-top-style: dot-dot-dash;
}

.bdts--w {
    border-top-style: wave;
}

.bdts--g {
    border-top-style: groove;
}

.bdts--r {
    border-top-style: ridge;
}

.bdts--i    {
    border-top-style: inset;
}

.bdts--o {
    border-top-style: outset;
}

/* border-right
------------------------------------------------------------------- */

.bdr--n {
    border-right: none;
}

.bdrs--n    {
    border-right-style: none;
}

.bdrs--h {
    border-right-style: hidden;
}

.bdrs--dt {
    border-right-style: dotted;
}

.bdrs--ds {
    border-right-style: dashed;
}

.bdrs--s {
    border-right-style: solid;
}

.bdrs--db {
    border-right-style: double;
}

.bdrs--dtds {
    border-right-style: dot-dash;
}

.bdrs--dtdtds {
    border-right-style: dot-dot-dash;
}

.bdrs--w {
    border-right-style: wave;
}

.bdrs--g {
    border-right-style: groove;
}

.bdrs--r {
    border-right-style: ridge;
}

.bdrs--i    {
    border-right-style: inset;
}

.bdrs--o {
    border-right-style: outset;
}

/* border-bottom
------------------------------------------------------------------- */

.bdb--n {
    border-bottom: none;
}

.bdbs--n    {
    border-bottom-style: none;
}

.bdbs--h {
    border-bottom-style: hidden;
}

.bdbs--dt {
    border-bottom-style: dotted;
}

.bdbs--ds {
    border-bottom-style: dashed;
}

.bdbs--s {
    border-bottom-style: solid;
}

.bdbs--db {
    border-bottom-style: double;
}

.bdbs--dtds {
    border-bottom-style: dot-dash;
}

.bdbs--dtdtds {
    border-bottom-style: dot-dot-dash;
}

.bdbs--w {
    border-bottom-style: wave;
}

.bdbs--g {
    border-bottom-style: groove;
}

.bdbs--r {
    border-bottom-style: ridge;
}

.bdbs--i    {
    border-bottom-style: inset;
}

.bdbs--o {
    border-bottom-style: outset;
}

/* border-left
------------------------------------------------------------------- */

.bdl--n {
    border-left: none;
}

.bdls--n    {
    border-left-style: none;
}

.bdls--h {
    border-left-style: hidden;
}

.bdls--dt {
    border-left-style: dotted;
}

.bdls--ds {
    border-left-style: dashed;
}

.bdls--s {
    border-left-style: solid;
}

.bdls--db {
    border-left-style: double;
}

.bdls--dtds {
    border-left-style: dot-dash;
}

.bdls--dtdtds {
    border-left-style: dot-dot-dash;
}

.bdls--w {
    border-left-style: wave;
}

.bdls--g {
    border-left-style: groove;
}

.bdls--r {
    border-left-style: ridge;
}

.bdls--i    {
    border-left-style: inset;
}

.bdls--o {
    border-left-style: outset;
}

/* list
------------------------------------------------------------------- */

.lisp--i {
    list-style-position: inside;
}

.lisp--o {
    list-style-position: outside;
}

.list--n {
    list-style-type: none;
}

.list--d {
    list-style-type: disc;
}

.list--c {
    list-style-type: circle;
}

.list--s {
    list-style-type: square;
}

.list--dc {
    list-style-type: disc;
}

.list--lr {
    list-style-type: lower-roman;
}

.list--ur {
    list-style-type: upper-roman;
}

/*ƒ –––––––––––––––––––––––––––––––––––––––––––––––––– primer-emmet */

primer-emmet-parameter(emmet文法に合わせた調整用CSS。値が固定値でないもの)

/* scss/_primer-emmet-parameter.scss
    (emmet文法に合わせた調整用CSS。値が固定値でないもの)
===================================================================
# 目次
  - margin
    - padding
    - top, right, bottom, left
    - width, height
    - text-indent
    - word-spacing
    - opacity
    - border-width
=================================================================== */

/* margin
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.m--a,
.m--auto {
    margin: auto;
}

.m--a-0,
.m--auto-0 {
    margin: auto 0;
}

.m--0 {
    margin: 0;
}

.m--0-auto {
    margin: 0 auto;
}

/* em */

.m--d25e {
    margin: 0.25em;
}

.m--d50e {
    margin: 0.50em;
}

.m--d75e {
    margin: 0.75em;
}

.m--1e {
    margin: 1em;
}

.m--2e {
    margin: 2em;
}

.m--3e {
    margin: 3em;
}

.m--4e {
    margin: 4em;
}

.m--5e {
    margin: 5em;
}

.m--6e {
    margin: 6em;
}

.m--7e {
    margin: 7em;
}

.m--8e {
    margin: 8em;
}

.m--9e {
    margin: 9em;
}

.m--10e {
    margin: 10em;
}

/* rem */

.m--d25r {
    margin: 0.25rem;
}

.m--d50r {
    margin: 0.50rem;
}

.m--d75r {
    margin: 0.75rem;
}

.m--1r {
    margin: 1rem;
}

.m--2r {
    margin: 2rem;
}

.m--3r {
    margin: 3rem;
}

.m--4r {
    margin: 4rem;
}

.m--5r {
    margin: 5rem;
}

.m--6r {
    margin: 6rem;
}

.m--7r {
    margin: 7rem;
}

.m--8r {
    margin: 8rem;
}

.m--9r {
    margin: 9rem;
}

.m--10r {
    margin: 10rem;
}

/* % */

.m--25p {
    margin: 25%;
}

.m--50p {
    margin: 50%;
}

.m--75p {
    margin: 75%;
}

.m--10p {
    margin: 10%;
}

.m--20p {
    margin: 20%;
}

.m--30p {
    margin: 30%;
}

.m--40p {
    margin: 40%;
}

.m--60p {
    margin: 60%;
}

.m--70p {
    margin: 70%;
}

.m--80p {
    margin: 80%;
}

.m--90p {
    margin: 90%;
}

.m--100p {
    margin: 100%;
}

/* vw */

.m--25vw {
    margin: 25vw;
}

.m--50vw {
    margin: 50vw;
}

.m--75vw {
    margin: 75vw;
}

.m--10vw {
    margin: 10vw;
}

.m--20vw {
    margin: 20vw;
}

.m--30vw {
    margin: 30vw;
}

.m--40vw {
    margin: 40vw;
}

.m--60vw {
    margin: 60vw;
}

.m--70vw {
    margin: 70vw;
}

.m--80vw {
    margin: 80vw;
}

.m--90vw {
    margin: 90vw;
}

.m--100vw {
    margin: 100vw;
}

/* vh */

.m--25vh {
    margin: 25vh;
}

.m--50vh {
    margin: 50vh;
}

.m--75vh {
    margin: 75vh;
}

.m--10vh {
    margin: 10vh;
}

.m--20vh {
    margin: 20vh;
}

.m--30vh {
    margin: 30vh;
}

.m--40vh {
    margin: 40vh;
}

.m--60vh {
    margin: 60vh;
}

.m--70vh {
    margin: 70vh;
}

.m--80vh {
    margin: 80vh;
}

.m--90vh {
    margin: 90vh;
}

.m--100vh {
    margin: 100vh;
}

/* px */

.m--1px {
    margin: 1px;
}

.m--2px {
    margin: 2px;
}

.m--3px {
    margin: 3px;
}

.m--4px {
    margin: 4px;
}

.m--5px {
    margin: 5px;
}

.m--6px {
    margin: 6px;
}

.m--7px {
    margin: 7px;
}

.m--8px {
    margin: 8px;
}

.m--9px {
    margin: 9px;
}

.m--10px {
    margin: 10px;
}

.m--20px {
    margin: 20px;
}

.m--30px {
    margin: 30px;
}

.m--40px {
    margin: 40px;
}

.m--50px {
    margin: 50px;
}

.m--60px {
    margin: 60px;
}

.m--70px {
    margin: 70px;
}

.m--80px {
    margin: 80px;
}

.m--90px {
    margin: 90px;
}

.m--100px {
    margin: 100px;
}

.m--150px {
    margin: 150px;
}

.m--200px {
    margin: 200px;
}

.m--250px {
    margin: 250px;
}

.m--300px {
    margin: 300px;
}

/* margin-top
------------------------------------------------------------------- */

.mt--a,
.mt--auto {
    margin-top: auto;
}

.mt--0 {
    margin-top: 0;
}

/* em */

.mt--d25e {
    margin-top: 0.25em;
}

.mt--d50e {
    margin-top: 0.50em;
}

.mt--d75e {
    margin-top: 0.75em;
}

.mt--1e {
    margin-top: 1em;
}

.mt--2e {
    margin-top: 2em;
}

.mt--3e {
    margin-top: 3em;
}

.mt--4e {
    margin-top: 4em;
}

.mt--5e {
    margin-top: 5em;
}

.mt--6e {
    margin-top: 6em;
}

.mt--7e {
    margin-top: 7em;
}

.mt--8e {
    margin-top: 8em;
}

.mt--9e {
    margin-top: 9em;
}

.mt--10e {
    margin-top: 10em;
}

/* rem */

.mt--d25r {
    margin-top: 0.25rem;
}

.mt--d50r {
    margin-top: 0.50rem;
}

.mt--d75r {
    margin-top: 0.75rem;
}

.mt--1r {
    margin-top: 1rem;
}

.mt--2r {
    margin-top: 2rem;
}

.mt--3r {
    margin-top: 3rem;
}

.mt--4r {
    margin-top: 4rem;
}

.mt--5r {
    margin-top: 5rem;
}

.mt--6r {
    margin-top: 6rem;
}

.mt--7r {
    margin-top: 7rem;
}

.mt--8r {
    margin-top: 8rem;
}

.mt--9r {
    margin-top: 9rem;
}

.mt--10r {
    margin-top: 10rem;
}

/* % */

.mt--25p {
    margin-top: 25%;
}

.mt--50p {
    margin-top: 50%;
}

.mt--75p {
    margin-top: 75%;
}

.mt--10p {
    margin-top: 10%;
}

.mt--20p {
    margin-top: 20%;
}

.mt--30p {
    margin-top: 30%;
}

.mt--40p {
    margin-top: 40%;
}

.mt--60p {
    margin-top: 60%;
}

.mt--70p {
    margin-top: 70%;
}

.mt--80p {
    margin-top: 80%;
}

.mt--90p {
    margin-top: 90%;
}

.mt--100p {
    margin-top: 100%;
}

/* vw */

.mt--25vw {
    margin-top: 25vw;
}

.mt--50vw {
    margin-top: 50vw;
}

.mt--75vw {
    margin-top: 75vw;
}

.mt--10vw {
    margin-top: 10vw;
}

.mt--20vw {
    margin-top: 20vw;
}

.mt--30vw {
    margin-top: 30vw;
}

.mt--40vw {
    margin-top: 40vw;
}

.mt--60vw {
    margin-top: 60vw;
}

.mt--70vw {
    margin-top: 70vw;
}

.mt--80vw {
    margin-top: 80vw;
}

.mt--90vw {
    margin-top: 90vw;
}

.mt--100vw {
    margin-top: 100vw;
}

/* vh */

.mt--25vh {
    margin-top: 25vh;
}

.mt--50vh {
    margin-top: 50vh;
}

.mt--75vh {
    margin-top: 75vh;
}

.mt--10vh {
    margin-top: 10vh;
}

.mt--20vh {
    margin-top: 20vh;
}

.mt--30vh {
    margin-top: 30vh;
}

.mt--40vh {
    margin-top: 40vh;
}

.mt--60vh {
    margin-top: 60vh;
}

.mt--70vh {
    margin-top: 70vh;
}

.mt--80vh {
    margin-top: 80vh;
}

.mt--90vh {
    margin-top: 90vh;
}

.mt--100vh {
    margin-top: 100vh;
}

/* px */

.mt--1px {
    margin-top: 1px;
}

.mt--2px {
    margin-top: 2px;
}

.mt--3px {
    margin-top: 3px;
}

.mt--4px {
    margin-top: 4px;
}

.mt--5px {
    margin-top: 5px;
}

.mt--6px {
    margin-top: 6px;
}

.mt--7px {
    margin-top: 7px;
}

.mt--8px {
    margin-top: 8px;
}

.mt--9px {
    margin-top: 9px;
}

.mt--10px {
    margin-top: 10px;
}

.mt--20px {
    margin-top: 20px;
}

.mt--30px {
    margin-top: 30px;
}

.mt--40px {
    margin-top: 40px;
}

.mt--50px {
    margin-top: 50px;
}

.mt--60px {
    margin-top: 60px;
}

.mt--70px {
    margin-top: 70px;
}

.mt--80px {
    margin-top: 80px;
}

.mt--90px {
    margin-top: 90px;
}

.mt--100px {
    margin-top: 100px;
}

.mt--150px {
    margin-top: 150px;
}

.mt--200px {
    margin-top: 200px;
}

.mt--250px {
    margin-top: 250px;
}

.mt--300px {
    margin-top: 300px;
}

/* margin-right
------------------------------------------------------------------- */

.mr--a,
.mr--auto {
    margin-right: auto;
}

.mr--0 {
    margin-right: 0;
}

/* em */

.mr--d25e {
    margin-right: 0.25em;
}

.mr--d50e {
    margin-right: 0.50em;
}

.mr--d75e {
    margin-right: 0.75em;
}

.mr--1e {
    margin-right: 1em;
}

.mr--2e {
    margin-right: 2em;
}

.mr--3e {
    margin-right: 3em;
}

.mr--4e {
    margin-right: 4em;
}

.mr--5e {
    margin-right: 5em;
}

.mr--6e {
    margin-right: 6em;
}

.mr--7e {
    margin-right: 7em;
}

.mr--8e {
    margin-right: 8em;
}

.mr--9e {
    margin-right: 9em;
}

.mr--10e {
    margin-right: 10em;
}

/* rem */

.mr--d25r {
    margin-right: 0.25rem;
}

.mr--d50r {
    margin-right: 0.50rem;
}

.mr--d75r {
    margin-right: 0.75rem;
}

.mr--1r {
    margin-right: 1rem;
}

.mr--2r {
    margin-right: 2rem;
}

.mr--3r {
    margin-right: 3rem;
}

.mr--4r {
    margin-right: 4rem;
}

.mr--5r {
    margin-right: 5rem;
}

.mr--6r {
    margin-right: 6rem;
}

.mr--7r {
    margin-right: 7rem;
}

.mr--8r {
    margin-right: 8rem;
}

.mr--9r {
    margin-right: 9rem;
}

.mr--10r {
    margin-right: 10rem;
}

/* % */

.mr--25p {
    margin-right: 25%;
}

.mr--50p {
    margin-right: 50%;
}

.mr--75p {
    margin-right: 75%;
}

.mr--10p {
    margin-right: 10%;
}

.mr--20p {
    margin-right: 20%;
}

.mr--30p {
    margin-right: 30%;
}

.mr--40p {
    margin-right: 40%;
}

.mr--60p {
    margin-right: 60%;
}

.mr--70p {
    margin-right: 70%;
}

.mr--80p {
    margin-right: 80%;
}

.mr--90p {
    margin-right: 90%;
}

.mr--100p {
    margin-right: 100%;
}

/* vw */

.mr--25vw {
    margin-right: 25vw;
}

.mr--50vw {
    margin-right: 50vw;
}

.mr--75vw {
    margin-right: 75vw;
}

.mr--10vw {
    margin-right: 10vw;
}

.mr--20vw {
    margin-right: 20vw;
}

.mr--30vw {
    margin-right: 30vw;
}

.mr--40vw {
    margin-right: 40vw;
}

.mr--60vw {
    margin-right: 60vw;
}

.mr--70vw {
    margin-right: 70vw;
}

.mr--80vw {
    margin-right: 80vw;
}

.mr--90vw {
    margin-right: 90vw;
}

.mr--100vw {
    margin-right: 100vw;
}

/* vh */

.mr--25vh {
    margin-right: 25vh;
}

.mr--50vh {
    margin-right: 50vh;
}

.mr--75vh {
    margin-right: 75vh;
}

.mr--10vh {
    margin-right: 10vh;
}

.mr--20vh {
    margin-right: 20vh;
}

.mr--30vh {
    margin-right: 30vh;
}

.mr--40vh {
    margin-right: 40vh;
}

.mr--60vh {
    margin-right: 60vh;
}

.mr--70vh {
    margin-right: 70vh;
}

.mr--80vh {
    margin-right: 80vh;
}

.mr--90vh {
    margin-right: 90vh;
}

.mr--100vh {
    margin-right: 100vh;
}

/* px */

.mr--1px {
    margin-right: 1px;
}

.mr--2px {
    margin-right: 2px;
}

.mr--3px {
    margin-right: 3px;
}

.mr--4px {
    margin-right: 4px;
}

.mr--5px {
    margin-right: 5px;
}

.mr--6px {
    margin-right: 6px;
}

.mr--7px {
    margin-right: 7px;
}

.mr--8px {
    margin-right: 8px;
}

.mr--9px {
    margin-right: 9px;
}

.mr--10px {
    margin-right: 10px;
}

.mr--20px {
    margin-right: 20px;
}

.mr--30px {
    margin-right: 30px;
}

.mr--40px {
    margin-right: 40px;
}

.mr--50px {
    margin-right: 50px;
}

.mr--60px {
    margin-right: 60px;
}

.mr--70px {
    margin-right: 70px;
}

.mr--80px {
    margin-right: 80px;
}

.mr--90px {
    margin-right: 90px;
}

.mr--100px {
    margin-right: 100px;
}

.mr--150px {
    margin-right: 150px;
}

.mr--200px {
    margin-right: 200px;
}

.mr--250px {
    margin-right: 250px;
}

.mr--300px {
    margin-right: 300px;
}

/* margin-bottom
------------------------------------------------------------------- */

.mb--a,
.mb--auto {
    margin-bottom: auto;
}

.mb--0 {
    margin-bottom: 0;
}

/* em */

.mb--d25e {
    margin-bottom: 0.25em;
}

.mb--d50e {
    margin-bottom: 0.50em;
}

.mb--d75e {
    margin-bottom: 0.75em;
}

.mb--1e {
    margin-bottom: 1em;
}

.mb--2e {
    margin-bottom: 2em;
}

.mb--3e {
    margin-bottom: 3em;
}

.mb--4e {
    margin-bottom: 4em;
}

.mb--5e {
    margin-bottom: 5em;
}

.mb--6e {
    margin-bottom: 6em;
}

.mb--7e {
    margin-bottom: 7em;
}

.mb--8e {
    margin-bottom: 8em;
}

.mb--9e {
    margin-bottom: 9em;
}

.mb--10e {
    margin-bottom: 10em;
}

/* rem */

.mb--d25r {
    margin-bottom: 0.25rem;
}

.mb--d50r {
    margin-bottom: 0.50rem;
}

.mb--d75r {
    margin-bottom: 0.75rem;
}

.mb--1r {
    margin-bottom: 1rem;
}

.mb--2r {
    margin-bottom: 2rem;
}

.mb--3r {
    margin-bottom: 3rem;
}

.mb--4r {
    margin-bottom: 4rem;
}

.mb--5r {
    margin-bottom: 5rem;
}

.mb--6r {
    margin-bottom: 6rem;
}

.mb--7r {
    margin-bottom: 7rem;
}

.mb--8r {
    margin-bottom: 8rem;
}

.mb--9r {
    margin-bottom: 9rem;
}

.mb--10r {
    margin-bottom: 10rem;
}

/* % */

.mb--25p {
    margin-bottom: 25%;
}

.mb--50p {
    margin-bottom: 50%;
}

.mb--75p {
    margin-bottom: 75%;
}

.mb--10p {
    margin-bottom: 10%;
}

.mb--20p {
    margin-bottom: 20%;
}

.mb--30p {
    margin-bottom: 30%;
}

.mb--40p {
    margin-bottom: 40%;
}

.mb--60p {
    margin-bottom: 60%;
}

.mb--70p {
    margin-bottom: 70%;
}

.mb--80p {
    margin-bottom: 80%;
}

.mb--90p {
    margin-bottom: 90%;
}

.mb--100p {
    margin-bottom: 100%;
}

/* vw */

.mb--25vw {
    margin-bottom: 25vw;
}

.mb--50vw {
    margin-bottom: 50vw;
}

.mb--75vw {
    margin-bottom: 75vw;
}

.mb--10vw {
    margin-bottom: 10vw;
}

.mb--20vw {
    margin-bottom: 20vw;
}

.mb--30vw {
    margin-bottom: 30vw;
}

.mb--40vw {
    margin-bottom: 40vw;
}

.mb--60vw {
    margin-bottom: 60vw;
}

.mb--70vw {
    margin-bottom: 70vw;
}

.mb--80vw {
    margin-bottom: 80vw;
}

.mb--90vw {
    margin-bottom: 90vw;
}

.mb--100vw {
    margin-bottom: 100vw;
}

/* vh */

.mb--25vh {
    margin-bottom: 25vh;
}

.mb--50vh {
    margin-bottom: 50vh;
}

.mb--75vh {
    margin-bottom: 75vh;
}

.mb--10vh {
    margin-bottom: 10vh;
}

.mb--20vh {
    margin-bottom: 20vh;
}

.mb--30vh {
    margin-bottom: 30vh;
}

.mb--40vh {
    margin-bottom: 40vh;
}

.mb--60vh {
    margin-bottom: 60vh;
}

.mb--70vh {
    margin-bottom: 70vh;
}

.mb--80vh {
    margin-bottom: 80vh;
}

.mb--90vh {
    margin-bottom: 90vh;
}

.mb--100vh {
    margin-bottom: 100vh;
}

/* px */

.mb--1px {
    margin-bottom: 1px;
}

.mb--2px {
    margin-bottom: 2px;
}

.mb--3px {
    margin-bottom: 3px;
}

.mb--4px {
    margin-bottom: 4px;
}

.mb--5px {
    margin-bottom: 5px;
}

.mb--6px {
    margin-bottom: 6px;
}

.mb--7px {
    margin-bottom: 7px;
}

.mb--8px {
    margin-bottom: 8px;
}

.mb--9px {
    margin-bottom: 9px;
}

.mb--10px {
    margin-bottom: 10px;
}

.mb--20px {
    margin-bottom: 20px;
}

.mb--30px {
    margin-bottom: 30px;
}

.mb--40px {
    margin-bottom: 40px;
}

.mb--50px {
    margin-bottom: 50px;
}

.mb--60px {
    margin-bottom: 60px;
}

.mb--70px {
    margin-bottom: 70px;
}

.mb--80px {
    margin-bottom: 80px;
}

.mb--90px {
    margin-bottom: 90px;
}

.mb--100px {
    margin-bottom: 100px;
}

.mb--150px {
    margin-bottom: 150px;
}

.mb--200px {
    margin-bottom: 200px;
}

.mb--250px {
    margin-bottom: 250px;
}

.mb--300px {
    margin-bottom: 300px;
}

/* margin-left
------------------------------------------------------------------- */

.ml--a,
.ml--auto {
    margin-left: auto;
}

.ml--0 {
    margin-left: 0;
}

/* em */

.ml--d25e {
    margin-left: 0.25em;
}

.ml--d50e {
    margin-left: 0.50em;
}

.ml--d75e {
    margin-left: 0.75em;
}

.ml--1e {
    margin-left: 1em;
}

.ml--2e {
    margin-left: 2em;
}

.ml--3e {
    margin-left: 3em;
}

.ml--4e {
    margin-left: 4em;
}

.ml--5e {
    margin-left: 5em;
}

.ml--6e {
    margin-left: 6em;
}

.ml--7e {
    margin-left: 7em;
}

.ml--8e {
    margin-left: 8em;
}

.ml--9e {
    margin-left: 9em;
}

.ml--10e {
    margin-left: 10em;
}

/* rem */

.ml--d25r {
    margin-left: 0.25rem;
}

.ml--d50r {
    margin-left: 0.50rem;
}

.ml--d75r {
    margin-left: 0.75rem;
}

.ml--1r {
    margin-left: 1rem;
}

.ml--2r {
    margin-left: 2rem;
}

.ml--3r {
    margin-left: 3rem;
}

.ml--4r {
    margin-left: 4rem;
}

.ml--5r {
    margin-left: 5rem;
}

.ml--6r {
    margin-left: 6rem;
}

.ml--7r {
    margin-left: 7rem;
}

.ml--8r {
    margin-left: 8rem;
}

.ml--9r {
    margin-left: 9rem;
}

.ml--10r {
    margin-left: 10rem;
}

/* % */

.ml--25p {
    margin-left: 25%;
}

.ml--50p {
    margin-left: 50%;
}

.ml--75p {
    margin-left: 75%;
}

.ml--10p {
    margin-left: 10%;
}

.ml--20p {
    margin-left: 20%;
}

.ml--30p {
    margin-left: 30%;
}

.ml--40p {
    margin-left: 40%;
}

.ml--60p {
    margin-left: 60%;
}

.ml--70p {
    margin-left: 70%;
}

.ml--80p {
    margin-left: 80%;
}

.ml--90p {
    margin-left: 90%;
}

.ml--100p {
    margin-left: 100%;
}

/* vw */

.ml--25vw {
    margin-left: 25vw;
}

.ml--50vw {
    margin-left: 50vw;
}

.ml--75vw {
    margin-left: 75vw;
}

.ml--10vw {
    margin-left: 10vw;
}

.ml--20vw {
    margin-left: 20vw;
}

.ml--30vw {
    margin-left: 30vw;
}

.ml--40vw {
    margin-left: 40vw;
}

.ml--60vw {
    margin-left: 60vw;
}

.ml--70vw {
    margin-left: 70vw;
}

.ml--80vw {
    margin-left: 80vw;
}

.ml--90vw {
    margin-left: 90vw;
}

.ml--100vw {
    margin-left: 100vw;
}

/* vh */

.ml--25vh {
    margin-left: 25vh;
}

.ml--50vh {
    margin-left: 50vh;
}

.ml--75vh {
    margin-left: 75vh;
}

.ml--10vh {
    margin-left: 10vh;
}

.ml--20vh {
    margin-left: 20vh;
}

.ml--30vh {
    margin-left: 30vh;
}

.ml--40vh {
    margin-left: 40vh;
}

.ml--60vh {
    margin-left: 60vh;
}

.ml--70vh {
    margin-left: 70vh;
}

.ml--80vh {
    margin-left: 80vh;
}

.ml--90vh {
    margin-left: 90vh;
}

.ml--100vh {
    margin-left: 100vh;
}

/* px */

.ml--1px {
    margin-left: 1px;
}

.ml--2px {
    margin-left: 2px;
}

.ml--3px {
    margin-left: 3px;
}

.ml--4px {
    margin-left: 4px;
}

.ml--5px {
    margin-left: 5px;
}

.ml--6px {
    margin-left: 6px;
}

.ml--7px {
    margin-left: 7px;
}

.ml--8px {
    margin-left: 8px;
}

.ml--9px {
    margin-left: 9px;
}

.ml--10px {
    margin-left: 10px;
}

.ml--20px {
    margin-left: 20px;
}

.ml--30px {
    margin-left: 30px;
}

.ml--40px {
    margin-left: 40px;
}

.ml--50px {
    margin-left: 50px;
}

.ml--60px {
    margin-left: 60px;
}

.ml--70px {
    margin-left: 70px;
}

.ml--80px {
    margin-left: 80px;
}

.ml--90px {
    margin-left: 90px;
}

.ml--100px {
    margin-left: 100px;
}

.ml--150px {
    margin-left: 150px;
}

.ml--200px {
    margin-left: 200px;
}

.ml--250px {
    margin-left: 250px;
}

.ml--300px {
    margin-left: 300px;
}

/* margin-top-bottom
------------------------------------------------------------------- */

.mtb--a,
.mtb--auto {
    margin-top: auto;
    margin-bottom: auto;
}

.mtb--0 {
    margin-top: 0;
    margin-bottom: 0;
}

/* em */

.mtb--d25e {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.mtb--d50e {
    margin-top: 0.50em;
    margin-bottom: 0.50em;
}

.mtb--d75e {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    margin: 1rem 1rem;
}

.mtb--1e {
    margin-top: 1em;
    margin-bottom: 1em;
}

.mtb--2e {
    margin-top: 2em;
    margin-bottom: 2em;
}

.mtb--3e {
    margin-top: 3em;
    margin-bottom: 3em;
}

.mtb--4e {
    margin-top: 4em;
    margin-bottom: 4em;
}

.mtb--5e {
    margin-top: 5em;
    margin-bottom: 5em;
}

.mtb--6e {
    margin-top: 6em;
    margin-bottom: 6em;
}

.mtb--7e {
    margin-top: 7em;
    margin-bottom: 7em;
}

.mtb--8e {
    margin-top: 8em;
    margin-bottom: 8em;
}

.mtb--9e {
    margin-top: 9em;
    margin-bottom: 9em;
}

.mtb--10e {
    margin-top: 10em;
    margin-bottom: 10em;
}

/* rem */

.mtb--d25r {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.mtb--d50r {
    margin-top: 0.50rem;
    margin-bottom: 0.50rem;
}

.mtb--d75r {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.mtb--1r {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mtb--2r {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mtb--3r {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.mtb--4r {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.mtb--5r {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.mtb--6r {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.mtb--7r {
    margin-top: 7rem;
    margin-bottom: 7rem;
}

.mtb--8r {
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.mtb--9r {
    margin-top: 9rem;
    margin-bottom: 9rem;
}

.mtb--10r {
    margin-top: 10rem;
    margin-bottom: 10rem;
}

/* % */

.mtb--25p {
    margin-top: 25%;
    margin-bottom: 25%;
}

.mtb--50p {
    margin-top: 50%;
    margin-bottom: 50%;
}

.mtb--75p {
    margin-top: 75%;
    margin-bottom: 75%;
}

.mtb--10p {
    margin-top: 10%;
    margin-bottom: 10%;
}

.mtb--20p {
    margin-top: 20%;
    margin-bottom: 20%;
}

.mtb--30p {
    margin-top: 30%;
    margin-bottom: 30%;
}

.mtb--40p {
    margin-top: 40%;
    margin-bottom: 40%;
}

.mtb--60p {
    margin-top: 60%;
    margin-bottom: 60%;
}

.mtb--70p {
    margin-top: 70%;
    margin-bottom: 70%;
}

.mtb--80p {
    margin-top: 80%;
    margin-bottom: 80%;
}

.mtb--90p {
    margin-top: 90%;
    margin-bottom: 90%;
}

.mtb--100p {
    margin-top: 100%;
    margin-bottom: 100%;
}

/* vw */

.mtb--25vw {
    margin-top: 25vw;
    margin-bottom: 25vw;
}

.mtb--50vw {
    margin-top: 50vw;
    margin-bottom: 50vw;
}

.mtb--75vw {
    margin-top: 75vw;
    margin-bottom: 75vw;
}

.mtb--10vw {
    margin-top: 10vw;
    margin-bottom: 10vw;
}

.mtb--20vw {
    margin-top: 20vw;
    margin-bottom: 20vw;
}

.mtb--30vw {
    margin-top: 30vw;
    margin-bottom: 30vw;
}

.mtb--40vw {
    margin-top: 40vw;
    margin-bottom: 40vw;
}

.mtb--60vw {
    margin-top: 60vw;
    margin-bottom: 60vw;
}

.mtb--70vw {
    margin-top: 70vw;
    margin-bottom: 70vw;
    m:1r1r  ;
}

.mtb--80vw {
    margin-top: 80vw;
    margin-bottom: 80vw;
}

.mtb--90vw {
    margin-top: 90vw;
    margin-bottom: 90vw;
}

.mtb--100vw {
    margin-top: 100vw;
    margin-bottom: 100vw;
}

/* vh */

.mtb--25vh {
    margin-top: 25vh;
    margin-bottom: 25vh;
}

.mtb--50vh {
    margin-top: 50vh;
    margin-bottom: 50vh;
}

.mtb--75vh {
    margin-top: 75vh;
    margin-bottom: 75vh;
}

.mtb--10vh {
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.mtb--20vh {
    margin-top: 20vh;
    margin-bottom: 20vh;
}

.mtb--30vh {
    margin-top: 30vh;
    margin-bottom: 30vh;
}

.mtb--40vh {
    margin-top: 40vh;
    margin-bottom: 40vh;
}

.mtb--60vh {
    margin-top: 60vh;
    margin-bottom: 60vh;
}

.mtb--70vh {
    margin-top: 70vh;
    margin-bottom: 70vh;
}

.mtb--80vh {
    margin-top: 80vh;
    margin-bottom: 80vh;
}

.mtb--90vh {
    margin-top: 90vh;
    margin-t: 90vh;
}

.mtb--100vh {
    margin-top: 100vh;
    margin-bottom: 100vh;
}

/* px */

.mtb--1px {
    margin-top: 1px;
    margin-bottom: 1px;
}

.mtb--2px {
    margin-top: 2px;
    margin-bottom: 2px;
}

.mtb--3px {
    margin-top: 3px;
    margin-bottom: 3px;
}

.mtb--4px {
    margin-top: 4px;
    margin-bottom: 4px;
}

.mtb--5px {
    margin-top: 5px;
    margin-bottom: 5px;
}

.mtb--6px {
    margin-top: 6px;
    margin-bottom: 6px;
}

.mtb--7px {
    margin-top: 7px;
    margin-bottom: 7px;
}

.mtb--8px {
    margin-top: 8px;
    margin-bottom: 8px;
}

.mtb--9px {
    margin-top: 9px;
    margin-bottom: 9px;
}

.mtb--10px {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mtb--20px {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mtb--30px {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mtb--40px {
    margin-top: 40px;
    margin-bottom: 40px;
}

.mtb--50px {
    margin-top: 50px;
    margin-bottom: 50px;
}

.mtb--60px {
    margin-top: 60px;
    margin-bottom: 60px;
}

.mtb--70px {
    margin-top: 70px;
    margin-bottom: 70px;
}

.mtb--80px {
    margin-top: 80px;
    margin-bottom: 80px;
}

.mtb--90px {
    margin-top: 90px;
    margin-bottom: 90px;
}

.mtb--100px {
    margin-top: 100px;
    margin-bottom: 100px;
}

.mtb--150px {
    margin-top: 150px;
    margin-bottom: 150px;
}

.mtb--200px {
    margin-top: 200px;
    margin-bottom: 200px;
}

.mtb--250px {
    margin-top: 250px;
    margin-bottom: 250px;
}

.mtb--300px {
    margin-top: 300px;
    margin-bottom: 300px;
}

/* margin-right-left
------------------------------------------------------------------- */

.mrl--a,
.mrl--auto {
    margin-right: auto;
    margin-left: auto;
}

.mrl--0 {
    margin-right: 0;
    margin-left: 0;
}

/* em */

.mrl--d25e {
    margin-right: 0.25em;
    margin-left: 0.25em;
}

.mrl--d50e {
    margin-right: 0.50em;
    margin-left: 0.50em;
}

.mrl--d75e {
    margin-right: 0.75em;
    margin-left: 0.75em;
    margin: 1rem 1rem;
}

.mrl--1e {
    margin-right: 1em;
    margin-left: 1em;
}

.mrl--2e {
    margin-right: 2em;
    margin-left: 2em;
}

.mrl--3e {
    margin-right: 3em;
    margin-left: 3em;
}

.mrl--4e {
    margin-right: 4em;
    margin-left: 4em;
}

.mrl--5e {
    margin-right: 5em;
    margin-left: 5em;
}

.mrl--6e {
    margin-right: 6em;
    margin-left: 6em;
}

.mrl--7e {
    margin-right: 7em;
    margin-left: 7em;
}

.mrl--8e {
    margin-right: 8em;
    margin-left: 8em;
}

.mrl--9e {
    margin-right: 9em;
    margin-left: 9em;
}

.mrl--10e {
    margin-right: 10em;
    margin-left: 10em;
}

/* rem */

.mrl--d25r {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}

.mrl--d50r {
    margin-right: 0.50rem;
    margin-left: 0.50rem;
}

.mrl--d75r {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

.mrl--1r {
    margin-right: 1rem;
    margin-left: 1rem;
}

.mrl--2r {
    margin-right: 2rem;
    margin-left: 2rem;
}

.mrl--3r {
    margin-right: 3rem;
    margin-left: 3rem;
}

.mrl--4r {
    margin-right: 4rem;
    margin-left: 4rem;
}

.mrl--5r {
    margin-right: 5rem;
    margin-left: 5rem;
}

.mrl--6r {
    margin-right: 6rem;
    margin-left: 6rem;
}

.mrl--7r {
    margin-right: 7rem;
    margin-left: 7rem;
}

.mrl--8r {
    margin-right: 8rem;
    margin-left: 8rem;
}

.mrl--9r {
    margin-right: 9rem;
    margin-left: 9rem;
}

.mrl--10r {
    margin-right: 10rem;
    margin-left: 10rem;
}

/* % */

.mrl--25p {
    margin-right: 25%;
    margin-left: 25%;
}

.mrl--50p {
    margin-right: 50%;
    margin-left: 50%;
}

.mrl--75p {
    margin-right: 75%;
    margin-left: 75%;
}

.mrl--10p {
    margin-right: 10%;
    margin-left: 10%;
}

.mrl--20p {
    margin-right: 20%;
    margin-left: 20%;
}

.mrl--30p {
    margin-right: 30%;
    margin-left: 30%;
}

.mrl--40p {
    margin-right: 40%;
    margin-left: 40%;
}

.mrl--60p {
    margin-right: 60%;
    margin-left: 60%;
}

.mrl--70p {
    margin-right: 70%;
    margin-left: 70%;
}

.mrl--80p {
    margin-right: 80%;
    margin-left: 80%;
}

.mrl--90p {
    margin-right: 90%;
    margin-left: 90%;
}

.mrl--100p {
    margin-right: 100%;
    margin-left: 100%;
}

/* vw */

.mrl--25vw {
    margin-right: 25vw;
    margin-left: 25vw;
}

.mrl--50vw {
    margin-right: 50vw;
    margin-left: 50vw;
}

.mrl--75vw {
    margin-right: 75vw;
    margin-left: 75vw;
}

.mrl--10vw {
    margin-right: 10vw;
    margin-left: 10vw;
}

.mrl--20vw {
    margin-right: 20vw;
    margin-left: 20vw;
}

.mrl--30vw {
    margin-right: 30vw;
    margin-left: 30vw;
}

.mrl--40vw {
    margin-right: 40vw;
    margin-left: 40vw;
}

.mrl--60vw {
    margin-right: 60vw;
    margin-left: 60vw;
}

.mrl--70vw {
    margin-right: 70vw;
    margin-left: 70vw;
    m:1r1r  ;
}

.mrl--80vw {
    margin-right: 80vw;
    margin-left: 80vw;
}

.mrl--90vw {
    margin-right: 90vw;
    margin-left: 90vw;
}

.mrl--100vw {
    margin-right: 100vw;
    margin-left: 100vw;
}

/* vh */

.mrl--25vh {
    margin-right: 25vh;
    margin-left: 25vh;
}

.mrl--50vh {
    margin-right: 50vh;
    margin-left: 50vh;
}

.mrl--75vh {
    margin-right: 75vh;
    margin-left: 75vh;
}

.mrl--10vh {
    margin-right: 10vh;
    margin-left: 10vh;
}

.mrl--20vh {
    margin-right: 20vh;
    margin-left: 20vh;
}

.mrl--30vh {
    margin-right: 30vh;
    margin-left: 30vh;
}

.mrl--40vh {
    margin-right: 40vh;
    margin-left: 40vh;
}

.mrl--60vh {
    margin-right: 60vh;
    margin-left: 60vh;
}

.mrl--70vh {
    margin-right: 70vh;
    margin-left: 70vh;
}

.mrl--80vh {
    margin-right: 80vh;
    margin-left: 80vh;
}

.mrl--90vh {
    margin-right: 90vh;
    margin-left: 90vh;
}

.mrl--100vh {
    margin-right: 100vh;
    margin-left: 100vh;
}

/* px */

.mrl--1px {
    margin-right: 1px;
    margin-left: 1px;
}

.mrl--2px {
    margin-right: 2px;
    margin-left: 2px;
}

.mrl--3px {
    margin-right: 3px;
    margin-left: 3px;
}

.mrl--4px {
    margin-right: 4px;
    margin-left: 4px;
}

.mrl--5px {
    margin-right: 5px;
    margin-left: 5px;
}

.mrl--6px {
    margin-right: 6px;
    margin-left: 6px;
}

.mrl--7px {
    margin-right: 7px;
    margin-left: 7px;
}

.mrl--8px {
    margin-right: 8px;
    margin-left: 8px;
}

.mrl--9px {
    margin-right: 9px;
    margin-left: 9px;
}

.mrl--10px {
    margin-right: 10px;
    margin-left: 10px;
}

.mrl--20px {
    margin-right: 20px;
    margin-left: 20px;
}

.mrl--30px {
    margin-right: 30px;
    margin-left: 30px;
}

.mrl--40px {
    margin-right: 40px;
    margin-left: 40px;
}

.mrl--50px {
    margin-right: 50px;
    margin-left: 50px;
}

.mrl--60px {
    margin-right: 60px;
    margin-left: 60px;
}

.mrl--70px {
    margin-right: 70px;
    margin-left: 70px;
}

.mrl--80px {
    margin-right: 80px;
    margin-left: 80px;
}

.mrl--90px {
    margin-right: 90px;
    margin-left: 90px;
}

.mrl--100px {
    margin-right: 100px;
    margin-left: 100px;
}

.mrl--150px {
    margin-right: 150px;
    margin-left: 150px;
}

.mrl--200px {
    margin-right: 200px;
    margin-left: 200px;
}

.mrl--250px {
    margin-right: 250px;
    margin-left: 250px;
}

.mrl--300px {
    margin-right: 300px;
    margin-left: 300px;
}

/*ƒ –––––––––––––––––––––––––––––––––––––––––––––––––––––––– margin */

/* padding
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.p--0 {
    padding: 0;
}

/* em */

.p--d25e {
    padding: 0.25em;
}

.p--d50e {
    padding: 0.50em;
}

.p--d75e {
    padding: 0.75em;
}

.p--1e {
    padding: 1em;
}

.p--2e {
    padding: 2em;
}

.p--3e {
    padding: 3em;
}

.p--4e {
    padding: 4em;
}

.p--5e {
    padding: 5em;
}

.p--6e {
    padding: 6em;
}

.p--7e {
    padding: 7em;
}

.p--8e {
    padding: 8em;
}

.p--9e {
    padding: 9em;
}

.p--10e {
    padding: 10em;
}

/* rem */

.p--d25r {
    padding: 0.25rem;
}

.p--d50r {
    padding: 0.50rem;
}

.p--d75r {
    padding: 0.75rem;
}

.p--1r {
    padding: 1rem;
}

.p--2r {
    padding: 2rem;
}

.p--3r {
    padding: 3rem;
}

.p--4r {
    padding: 4rem;
}

.p--5r {
    padding: 5rem;
}

.p--6r {
    padding: 6rem;
}

.p--7r {
    padding: 7rem;
}

.p--8r {
    padding: 8rem;
}

.p--9r {
    padding: 9rem;
}

.p--10r {
    padding: 10rem;
}

/* % */

.p--25p {
    padding: 25%;
}

.p--50p {
    padding: 50%;
}

.p--75p {
    padding: 75%;
}

.p--10p {
    padding: 10%;
}

.p--20p {
    padding: 20%;
}

.p--30p {
    padding: 30%;
}

.p--40p {
    padding: 40%;
}

.p--60p {
    padding: 60%;
}

.p--70p {
    padding: 70%;
}

.p--80p {
    padding: 80%;
}

.p--90p {
    padding: 90%;
}

.p--100p {
    padding: 100%;
}

/* vw */

.p--25vw {
    padding: 25vw;
}

.p--50vw {
    padding: 50vw;
}

.p--75vw {
    padding: 75vw;
}

.p--10vw {
    padding: 10vw;
}

.p--20vw {
    padding: 20vw;
}

.p--30vw {
    padding: 30vw;
}

.p--40vw {
    padding: 40vw;
}

.p--60vw {
    padding: 60vw;
}

.p--70vw {
    padding: 70vw;
}

.p--80vw {
    padding: 80vw;
}

.p--90vw {
    padding: 90vw;
}

.p--100vw {
    padding: 100vw;
}

/* vh */

.p--25vh {
    padding: 25vh;
}

.p--50vh {
    padding: 50vh;
}

.p--75vh {
    padding: 75vh;
}

.p--10vh {
    padding: 10vh;
}

.p--20vh {
    padding: 20vh;
}

.p--30vh {
    padding: 30vh;
}

.p--40vh {
    padding: 40vh;
}

.p--60vh {
    padding: 60vh;
}

.p--70vh {
    padding: 70vh;
}

.p--80vh {
    padding: 80vh;
}

.p--90vh {
    padding: 90vh;
}

.p--100vh {
    padding: 100vh;
}

/* px */

.p--1px {
    padding: 1px;
}

.p--2px {
    padding: 2px;
}

.p--3px {
    padding: 3px;
}

.p--4px {
    padding: 4px;
}

.p--5px {
    padding: 5px;
}

.p--6px {
    padding: 6px;
}

.p--7px {
    padding: 7px;
}

.p--8px {
    padding: 8px;
}

.p--9px {
    padding: 9px;
}

.p--10px {
    padding: 10px;
}

.p--20px {
    padding: 20px;
}

.p--30px {
    padding: 30px;
}

.p--40px {
    padding: 40px;
}

.p--50px {
    padding: 50px;
}

.p--60px {
    padding: 60px;
}

.p--70px {
    padding: 70px;
}

.p--80px {
    padding: 80px;
}

.p--90px {
    padding: 90px;
}

.p--100px {
    padding: 100px;
}

.p--150px {
    padding: 150px;
}

.p--200px {
    padding: 200px;
}

.p--250px {
    padding: 250px;
}

.p--300px {
    padding: 300px;
}

/* padding-top
------------------------------------------------------------------- */

.pt--0 {
    padding-top: 0;
}

/* em */

.pt--d25e {
    padding-top: 0.25em;
}

.pt--d50e {
    padding-top: 0.50em;
}

.pt--d75e {
    padding-top: 0.75em;
}

.pt--1e {
    padding-top: 1em;
}

.pt--2e {
    padding-top: 2em;
}

.pt--3e {
    padding-top: 3em;
}

.pt--4e {
    padding-top: 4em;
}

.pt--5e {
    padding-top: 5em;
}

.pt--6e {
    padding-top: 6em;
}

.pt--7e {
    padding-top: 7em;
}

.pt--8e {
    padding-top: 8em;
}

.pt--9e {
    padding-top: 9em;
}

.pt--10e {
    padding-top: 10em;
}

/* rem */

.pt--d25r {
    padding-top: 0.25rem;
}

.pt--d50r {
    padding-top: 0.50rem;
}

.pt--d75r {
    padding-top: 0.75rem;
}

.pt--1r {
    padding-top: 1rem;
}

.pt--2r {
    padding-top: 2rem;
}

.pt--3r {
    padding-top: 3rem;
}

.pt--4r {
    padding-top: 4rem;
}

.pt--5r {
    padding-top: 5rem;
}

.pt--6r {
    padding-top: 6rem;
}

.pt--7r {
    padding-top: 7rem;
}

.pt--8r {
    padding-top: 8rem;
}

.pt--9r {
    padding-top: 9rem;
}

.pt--10r {
    padding-top: 10rem;
}

/* % */

.pt--25p {
    padding-top: 25%;
}

.pt--50p {
    padding-top: 50%;
}

.pt--75p {
    padding-top: 75%;
}

.pt--10p {
    padding-top: 10%;
}

.pt--20p {
    padding-top: 20%;
}

.pt--30p {
    padding-top: 30%;
}

.pt--40p {
    padding-top: 40%;
}

.pt--60p {
    padding-top: 60%;
}

.pt--70p {
    padding-top: 70%;
}

.pt--80p {
    padding-top: 80%;
}

.pt--90p {
    padding-top: 90%;
}

.pt--100p {
    padding-top: 100%;
}

/* vw */

.pt--25vw {
    padding-top: 25vw;
}

.pt--50vw {
    padding-top: 50vw;
}

.pt--75vw {
    padding-top: 75vw;
}

.pt--10vw {
    padding-top: 10vw;
}

.pt--20vw {
    padding-top: 20vw;
}

.pt--30vw {
    padding-top: 30vw;
}

.pt--40vw {
    padding-top: 40vw;
}

.pt--60vw {
    padding-top: 60vw;
}

.pt--70vw {
    padding-top: 70vw;
}

.pt--80vw {
    padding-top: 80vw;
}

.pt--90vw {
    padding-top: 90vw;
}

.pt--100vw {
    padding-top: 100vw;
}

/* vh */

.pt--25vh {
    padding-top: 25vh;
}

.pt--50vh {
    padding-top: 50vh;
}

.pt--75vh {
    padding-top: 75vh;
}

.pt--10vh {
    padding-top: 10vh;
}

.pt--20vh {
    padding-top: 20vh;
}

.pt--30vh {
    padding-top: 30vh;
}

.pt--40vh {
    padding-top: 40vh;
}

.pt--60vh {
    padding-top: 60vh;
}

.pt--70vh {
    padding-top: 70vh;
}

.pt--80vh {
    padding-top: 80vh;
}

.pt--90vh {
    padding-top: 90vh;
}

.pt--100vh {
    padding-top: 100vh;
}

/* px */

.pt--1px {
    padding-top: 1px;
}

.pt--2px {
    padding-top: 2px;
}

.pt--3px {
    padding-top: 3px;
}

.pt--4px {
    padding-top: 4px;
}

.pt--5px {
    padding-top: 5px;
}

.pt--6px {
    padding-top: 6px;
}

.pt--7px {
    padding-top: 7px;
}

.pt--8px {
    padding-top: 8px;
}

.pt--9px {
    padding-top: 9px;
}

.pt--10px {
    padding-top: 10px;
}

.pt--20px {
    padding-top: 20px;
}

.pt--30px {
    padding-top: 30px;
}

.pt--40px {
    padding-top: 40px;
}

.pt--50px {
    padding-top: 50px;
}

.pt--60px {
    padding-top: 60px;
}

.pt--70px {
    padding-top: 70px;
}

.pt--80px {
    padding-top: 80px;
}

.pt--90px {
    padding-top: 90px;
}

.pt--100px {
    padding-top: 100px;
}

.pt--150px {
    padding-top: 150px;
}

.pt--200px {
    padding-top: 200px;
}

.pt--250px {
    padding-top: 250px;
}

.pt--300px {
    padding-top: 300px;
}

/* padding-right
------------------------------------------------------------------- */

.pr--0 {
    padding-right: 0;
}

/* em */

.pr--d25e {
    padding-right: 0.25em;
}

.pr--d50e {
    padding-right: 0.50em;
}

.pr--d75e {
    padding-right: 0.75em;
}

.pr--1e {
    padding-right: 1em;
}

.pr--2e {
    padding-right: 2em;
}

.pr--3e {
    padding-right: 3em;
}

.pr--4e {
    padding-right: 4em;
}

.pr--5e {
    padding-right: 5em;
}

.pr--6e {
    padding-right: 6em;
}

.pr--7e {
    padding-right: 7em;
}

.pr--8e {
    padding-right: 8em;
}

.pr--9e {
    padding-right: 9em;
}

.pr--10e {
    padding-right: 10em;
}

/* rem */

.pr--d25r {
    padding-right: 0.25rem;
}

.pr--d50r {
    padding-right: 0.50rem;
}

.pr--d75r {
    padding-right: 0.75rem;
}

.pr--1r {
    padding-right: 1rem;
}

.pr--2r {
    padding-right: 2rem;
}

.pr--3r {
    padding-right: 3rem;
}

.pr--4r {
    padding-right: 4rem;
}

.pr--5r {
    padding-right: 5rem;
}

.pr--6r {
    padding-right: 6rem;
}

.pr--7r {
    padding-right: 7rem;
}

.pr--8r {
    padding-right: 8rem;
}

.pr--9r {
    padding-right: 9rem;
}

.pr--10r {
    padding-right: 10rem;
}

/* % */

.pr--25p {
    padding-right: 25%;
}

.pr--50p {
    padding-right: 50%;
}

.pr--75p {
    padding-right: 75%;
}

.pr--10p {
    padding-right: 10%;
}

.pr--20p {
    padding-right: 20%;
}

.pr--30p {
    padding-right: 30%;
}

.pr--40p {
    padding-right: 40%;
}

.pr--60p {
    padding-right: 60%;
}

.pr--70p {
    padding-right: 70%;
}

.pr--80p {
    padding-right: 80%;
}

.pr--90p {
    padding-right: 90%;
}

.pr--100p {
    padding-right: 100%;
}

/* vw */

.pr--25vw {
    padding-right: 25vw;
}

.pr--50vw {
    padding-right: 50vw;
}

.pr--75vw {
    padding-right: 75vw;
}

.pr--10vw {
    padding-right: 10vw;
}

.pr--20vw {
    padding-right: 20vw;
}

.pr--30vw {
    padding-right: 30vw;
}

.pr--40vw {
    padding-right: 40vw;
}

.pr--60vw {
    padding-right: 60vw;
}

.pr--70vw {
    padding-right: 70vw;
}

.pr--80vw {
    padding-right: 80vw;
}

.pr--90vw {
    padding-right: 90vw;
}

.pr--100vw {
    padding-right: 100vw;
}

/* vh */

.pr--25vh {
    padding-right: 25vh;
}

.pr--50vh {
    padding-right: 50vh;
}

.pr--75vh {
    padding-right: 75vh;
}

.pr--10vh {
    padding-right: 10vh;
}

.pr--20vh {
    padding-right: 20vh;
}

.pr--30vh {
    padding-right: 30vh;
}

.pr--40vh {
    padding-right: 40vh;
}

.pr--60vh {
    padding-right: 60vh;
}

.pr--70vh {
    padding-right: 70vh;
}

.pr--80vh {
    padding-right: 80vh;
}

.pr--90vh {
    padding-right: 90vh;
}

.pr--100vh {
    padding-right: 100vh;
}

/* px */

.pr--1px {
    padding-right: 1px;
}

.pr--2px {
    padding-right: 2px;
}

.pr--3px {
    padding-right: 3px;
}

.pr--4px {
    padding-right: 4px;
}

.pr--5px {
    padding-right: 5px;
}

.pr--6px {
    padding-right: 6px;
}

.pr--7px {
    padding-right: 7px;
}

.pr--8px {
    padding-right: 8px;
}

.pr--9px {
    padding-right: 9px;
}

.pr--10px {
    padding-right: 10px;
}

.pr--20px {
    padding-right: 20px;
}

.pr--30px {
    padding-right: 30px;
}

.pr--40px {
    padding-right: 40px;
}

.pr--50px {
    padding-right: 50px;
}

.pr--60px {
    padding-right: 60px;
}

.pr--70px {
    padding-right: 70px;
}

.pr--80px {
    padding-right: 80px;
}

.pr--90px {
    padding-right: 90px;
}

.pr--100px {
    padding-right: 100px;
}

.pr--150px {
    padding-right: 150px;
}

.pr--200px {
    padding-right: 200px;
}

.pr--250px {
    padding-right: 250px;
}

.pr--300px {
    padding-right: 300px;
}

/* padding-bottom
------------------------------------------------------------------- */

.pb--0 {
    padding-bottom: 0;
}

/* em */

.pb--d25e {
    padding-bottom: 0.25em;
}

.pb--d50e {
    padding-bottom: 0.50em;
}

.pb--d75e {
    padding-bottom: 0.75em;
}

.pb--1e {
    padding-bottom: 1em;
}

.pb--2e {
    padding-bottom: 2em;
}

.pb--3e {
    padding-bottom: 3em;
}

.pb--4e {
    padding-bottom: 4em;
}

.pb--5e {
    padding-bottom: 5em;
}

.pb--6e {
    padding-bottom: 6em;
}

.pb--7e {
    padding-bottom: 7em;
}

.pb--8e {
    padding-bottom: 8em;
}

.pb--9e {
    padding-bottom: 9em;
}

.pb--10e {
    padding-bottom: 10em;
}

/* rem */

.pb--d25r {
    padding-bottom: 0.25rem;
}

.pb--d50r {
    padding-bottom: 0.50rem;
}

.pb--d75r {
    padding-bottom: 0.75rem;
}

.pb--1r {
    padding-bottom: 1rem;
}

.pb--2r {
    padding-bottom: 2rem;
}

.pb--3r {
    padding-bottom: 3rem;
}

.pb--4r {
    padding-bottom: 4rem;
}

.pb--5r {
    padding-bottom: 5rem;
}

.pb--6r {
    padding-bottom: 6rem;
}

.pb--7r {
    padding-bottom: 7rem;
}

.pb--8r {
    padding-bottom: 8rem;
}

.pb--9r {
    padding-bottom: 9rem;
}

.pb--10r {
    padding-bottom: 10rem;
}

/* % */

.pb--25p {
    padding-bottom: 25%;
}

.pb--50p {
    padding-bottom: 50%;
}

.pb--75p {
    padding-bottom: 75%;
}

.pb--10p {
    padding-bottom: 10%;
}

.pb--20p {
    padding-bottom: 20%;
}

.pb--30p {
    padding-bottom: 30%;
}

.pb--40p {
    padding-bottom: 40%;
}

.pb--60p {
    padding-bottom: 60%;
}

.pb--70p {
    padding-bottom: 70%;
}

.pb--80p {
    padding-bottom: 80%;
}

.pb--90p {
    padding-bottom: 90%;
}

.pb--100p {
    padding-bottom: 100%;
}

/* vw */

.pb--25vw {
    padding-bottom: 25vw;
}

.pb--50vw {
    padding-bottom: 50vw;
}

.pb--75vw {
    padding-bottom: 75vw;
}

.pb--10vw {
    padding-bottom: 10vw;
}

.pb--20vw {
    padding-bottom: 20vw;
}

.pb--30vw {
    padding-bottom: 30vw;
}

.pb--40vw {
    padding-bottom: 40vw;
}

.pb--60vw {
    padding-bottom: 60vw;
}

.pb--70vw {
    padding-bottom: 70vw;
}

.pb--80vw {
    padding-bottom: 80vw;
}

.pb--90vw {
    padding-bottom: 90vw;
}

.pb--100vw {
    padding-bottom: 100vw;
}

/* vh */

.pb--25vh {
    padding-bottom: 25vh;
}

.pb--50vh {
    padding-bottom: 50vh;
}

.pb--75vh {
    padding-bottom: 75vh;
}

.pb--10vh {
    padding-bottom: 10vh;
}

.pb--20vh {
    padding-bottom: 20vh;
}

.pb--30vh {
    padding-bottom: 30vh;
}

.pb--40vh {
    padding-bottom: 40vh;
}

.pb--60vh {
    padding-bottom: 60vh;
}

.pb--70vh {
    padding-bottom: 70vh;
}

.pb--80vh {
    padding-bottom: 80vh;
}

.pb--90vh {
    padding-bottom: 90vh;
}

.pb--100vh {
    padding-bottom: 100vh;
}

/* px */

.pb--1px {
    padding-bottom: 1px;
}

.pb--2px {
    padding-bottom: 2px;
}

.pb--3px {
    padding-bottom: 3px;
}

.pb--4px {
    padding-bottom: 4px;
}

.pb--5px {
    padding-bottom: 5px;
}

.pb--6px {
    padding-bottom: 6px;
}

.pb--7px {
    padding-bottom: 7px;
}

.pb--8px {
    padding-bottom: 8px;
}

.pb--9px {
    padding-bottom: 9px;
}

.pb--10px {
    padding-bottom: 10px;
}

.pb--20px {
    padding-bottom: 20px;
}

.pb--30px {
    padding-bottom: 30px;
}

.pb--40px {
    padding-bottom: 40px;
}

.pb--50px {
    padding-bottom: 50px;
}

.pb--60px {
    padding-bottom: 60px;
}

.pb--70px {
    padding-bottom: 70px;
}

.pb--80px {
    padding-bottom: 80px;
}

.pb--90px {
    padding-bottom: 90px;
}

.pb--100px {
    padding-bottom: 100px;
}

.pb--150px {
    padding-bottom: 150px;
}

.pb--200px {
    padding-bottom: 200px;
}

.pb--250px {
    padding-bottom: 250px;
}

.pb--300px {
    padding-bottom: 300px;
}

/* padding-left
------------------------------------------------------------------- */

.pl--0 {
    padding-left: 0;
}

/* em */

.pl--d25e {
    padding-left: 0.25em;
}

.pl--d50e {
    padding-left: 0.50em;
}

.pl--d75e {
    padding-left: 0.75em;
}

.pl--1e {
    padding-left: 1em;
}

.pl--2e {
    padding-left: 2em;
}

.pl--3e {
    padding-left: 3em;
}

.pl--4e {
    padding-left: 4em;
}

.pl--5e {
    padding-left: 5em;
}

.pl--6e {
    padding-left: 6em;
}

.pl--7e {
    padding-left: 7em;
}

.pl--8e {
    padding-left: 8em;
}

.pl--9e {
    padding-left: 9em;
}

.pl--10e {
    padding-left: 10em;
}

/* rem */

.pl--d25r {
    padding-left: 0.25rem;
}

.pl--d50r {
    padding-left: 0.50rem;
}

.pl--d75r {
    padding-left: 0.75rem;
}

.pl--1r {
    padding-left: 1rem;
}

.pl--2r {
    padding-left: 2rem;
}

.pl--3r {
    padding-left: 3rem;
}

.pl--4r {
    padding-left: 4rem;
}

.pl--5r {
    padding-left: 5rem;
}

.pl--6r {
    padding-left: 6rem;
}

.pl--7r {
    padding-left: 7rem;
}

.pl--8r {
    padding-left: 8rem;
}

.pl--9r {
    padding-left: 9rem;
}

.pl--10r {
    padding-left: 10rem;
}

/* % */

.pl--25p {
    padding-left: 25%;
}

.pl--50p {
    padding-left: 50%;
}

.pl--75p {
    padding-left: 75%;
}

.pl--10p {
    padding-left: 10%;
}

.pl--20p {
    padding-left: 20%;
}

.pl--30p {
    padding-left: 30%;
}

.pl--40p {
    padding-left: 40%;
}

.pl--60p {
    padding-left: 60%;
}

.pl--70p {
    padding-left: 70%;
}

.pl--80p {
    padding-left: 80%;
}

.pl--90p {
    padding-left: 90%;
}

.pl--100p {
    padding-left: 100%;
}

/* vw */

.pl--25vw {
    padding-left: 25vw;
}

.pl--50vw {
    padding-left: 50vw;
}

.pl--75vw {
    padding-left: 75vw;
}

.pl--10vw {
    padding-left: 10vw;
}

.pl--20vw {
    padding-left: 20vw;
}

.pl--30vw {
    padding-left: 30vw;
}

.pl--40vw {
    padding-left: 40vw;
}

.pl--60vw {
    padding-left: 60vw;
}

.pl--70vw {
    padding-left: 70vw;
}

.pl--80vw {
    padding-left: 80vw;
}

.pl--90vw {
    padding-left: 90vw;
}

.pl--100vw {
    padding-left: 100vw;
}

/* vh */

.pl--25vh {
    padding-left: 25vh;
}

.pl--50vh {
    padding-left: 50vh;
}

.pl--75vh {
    padding-left: 75vh;
}

.pl--10vh {
    padding-left: 10vh;
}

.pl--20vh {
    padding-left: 20vh;
}

.pl--30vh {
    padding-left: 30vh;
}

.pl--40vh {
    padding-left: 40vh;
}

.pl--60vh {
    padding-left: 60vh;
}

.pl--70vh {
    padding-left: 70vh;
}

.pl--80vh {
    padding-left: 80vh;
}

.pl--90vh {
    padding-left: 90vh;
}

.pl--100vh {
    padding-left: 100vh;
}

/* px */

.pl--1px {
    padding-left: 1px;
}

.pl--2px {
    padding-left: 2px;
}

.pl--3px {
    padding-left: 3px;
}

.pl--4px {
    padding-left: 4px;
}

.pl--5px {
    padding-left: 5px;
}

.pl--6px {
    padding-left: 6px;
}

.pl--7px {
    padding-left: 7px;
}

.pl--8px {
    padding-left: 8px;
}

.pl--9px {
    padding-left: 9px;
}

.pl--10px {
    padding-left: 10px;
}

.pl--20px {
    padding-left: 20px;
}

.pl--30px {
    padding-left: 30px;
}

.pl--40px {
    padding-left: 40px;
}

.pl--50px {
    padding-left: 50px;
}

.pl--60px {
    padding-left: 60px;
}

.pl--70px {
    padding-left: 70px;
}

.pl--80px {
    padding-left: 80px;
}

.pl--90px {
    padding-left: 90px;
}

.pl--100px {
    padding-left: 100px;
}

.pl--150px {
    padding-left: 150px;
}

.pl--200px {
    padding-left: 200px;
}

.pl--250px {
    padding-left: 250px;
}

.pl--300px {
    padding-left: 300px;
}

/* padding-top-bottom
------------------------------------------------------------------- */

.ptb--0 {
    padding-top: 0;
    padding-bottom: 0;
}

/* em */

.ptb--d25e {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.ptb--d50e {
    padding-top: 0.50em;
    padding-bottom: 0.50em;
}

.ptb--d75e {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    padding: 1rem 1rem;
}

.ptb--1e {
    padding-top: 1em;
    padding-bottom: 1em;
}

.ptb--2e {
    padding-top: 2em;
    padding-bottom: 2em;
}

.ptb--3e {
    padding-top: 3em;
    padding-bottom: 3em;
}

.ptb--4e {
    padding-top: 4em;
    padding-bottom: 4em;
}

.ptb--5e {
    padding-top: 5em;
    padding-bottom: 5em;
}

.ptb--6e {
    padding-top: 6em;
    padding-bottom: 6em;
}

.ptb--7e {
    padding-top: 7em;
    padding-bottom: 7em;
}

.ptb--8e {
    padding-top: 8em;
    padding-bottom: 8em;
}

.ptb--9e {
    padding-top: 9em;
    padding-bottom: 9em;
}

.ptb--10e {
    padding-top: 10em;
    padding-bottom: 10em;
}

/* rem */

.ptb--d25r {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.ptb--d50r {
    padding-top: 0.50rem;
    padding-bottom: 0.50rem;
}

.ptb--d75r {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.ptb--1r {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.ptb--2r {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.ptb--3r {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.ptb--4r {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.ptb--5r {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.ptb--6r {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.ptb--7r {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.ptb--8r {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.ptb--9r {
    padding-top: 9rem;
    padding-bottom: 9rem;
}

.ptb--10r {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

/* % */

.ptb--25p {
    padding-top: 25%;
    padding-bottom: 25%;
}

.ptb--50p {
    padding-top: 50%;
    padding-bottom: 50%;
}

.ptb--75p {
    padding-top: 75%;
    padding-bottom: 75%;
}

.ptb--10p {
    padding-top: 10%;
    padding-bottom: 10%;
}

.ptb--20p {
    padding-top: 20%;
    padding-bottom: 20%;
}

.ptb--30p {
    padding-top: 30%;
    padding-bottom: 30%;
}

.ptb--40p {
    padding-top: 40%;
    padding-bottom: 40%;
}

.ptb--60p {
    padding-top: 60%;
    padding-bottom: 60%;
}

.ptb--70p {
    padding-top: 70%;
    padding-bottom: 70%;
}

.ptb--80p {
    padding-top: 80%;
    padding-bottom: 80%;
}

.ptb--90p {
    padding-top: 90%;
    padding-bottom: 90%;
}

.ptb--100p {
    padding-top: 100%;
    padding-bottom: 100%;
}

/* vw */

.ptb--25vw {
    padding-top: 25vw;
    padding-bottom: 25vw;
}

.ptb--50vw {
    padding-top: 50vw;
    padding-bottom: 50vw;
}

.ptb--75vw {
    padding-top: 75vw;
    padding-bottom: 75vw;
}

.ptb--10vw {
    padding-top: 10vw;
    padding-bottom: 10vw;
}

.ptb--20vw {
    padding-top: 20vw;
    padding-bottom: 20vw;
}

.ptb--30vw {
    padding-top: 30vw;
    padding-bottom: 30vw;
}

.ptb--40vw {
    padding-top: 40vw;
    padding-bottom: 40vw;
}

.ptb--60vw {
    padding-top: 60vw;
    padding-bottom: 60vw;
}

.ptb--70vw {
    padding-top: 70vw;
    padding-bottom: 70vw;
    m:1r1r  ;
}

.ptb--80vw {
    padding-top: 80vw;
    padding-bottom: 80vw;
}

.ptb--90vw {
    padding-top: 90vw;
    padding-bottom: 90vw;
}

.ptb--100vw {
    padding-top: 100vw;
    padding-bottom: 100vw;
}

/* vh */

.ptb--25vh {
    padding-top: 25vh;
    padding-bottom: 25vh;
}

.ptb--50vh {
    padding-top: 50vh;
    padding-bottom: 50vh;
}

.ptb--75vh {
    padding-top: 75vh;
    padding-bottom: 75vh;
}

.ptb--10vh {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.ptb--20vh {
    padding-top: 20vh;
    padding-bottom: 20vh;
}

.ptb--30vh {
    padding-top: 30vh;
    padding-bottom: 30vh;
}

.ptb--40vh {
    padding-top: 40vh;
    padding-bottom: 40vh;
}

.ptb--60vh {
    padding-top: 60vh;
    padding-bottom: 60vh;
}

.ptb--70vh {
    padding-top: 70vh;
    padding-bottom: 70vh;
}

.ptb--80vh {
    padding-top: 80vh;
    padding-bottom: 80vh;
}

.ptb--90vh {
    padding-top: 90vh;
    padding-t: 90vh;
}

.ptb--100vh {
    padding-top: 100vh;
    padding-bottom: 100vh;
}

/* px */

.ptb--1px {
    padding-top: 1px;
    padding-bottom: 1px;
}

.ptb--2px {
    padding-top: 2px;
    padding-bottom: 2px;
}

.ptb--3px {
    padding-top: 3px;
    padding-bottom: 3px;
}

.ptb--4px {
    padding-top: 4px;
    padding-bottom: 4px;
}

.ptb--5px {
    padding-top: 5px;
    padding-bottom: 5px;
}

.ptb--6px {
    padding-top: 6px;
    padding-bottom: 6px;
}

.ptb--7px {
    padding-top: 7px;
    padding-bottom: 7px;
}

.ptb--8px {
    padding-top: 8px;
    padding-bottom: 8px;
}

.ptb--9px {
    padding-top: 9px;
    padding-bottom: 9px;
}

.ptb--10px {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ptb--20px {
    padding-top: 20px;
    padding-bottom: 20px;
}

.ptb--30px {
    padding-top: 30px;
    padding-bottom: 30px;
}

.ptb--40px {
    padding-top: 40px;
    padding-bottom: 40px;
}

.ptb--50px {
    padding-top: 50px;
    padding-bottom: 50px;
}

.ptb--60px {
    padding-top: 60px;
    padding-bottom: 60px;
}

.ptb--70px {
    padding-top: 70px;
    padding-bottom: 70px;
}

.ptb--80px {
    padding-top: 80px;
    padding-bottom: 80px;
}

.ptb--90px {
    padding-top: 90px;
    padding-bottom: 90px;
}

.ptb--100px {
    padding-top: 100px;
    padding-bottom: 100px;
}

.ptb--150px {
    padding-top: 150px;
    padding-bottom: 150px;
}

.ptb--200px {
    padding-top: 200px;
    padding-bottom: 200px;
}

.ptb--250px {
    padding-top: 250px;
    padding-bottom: 250px;
}

.ptb--300px {
    padding-top: 300px;
    padding-bottom: 300px;
}

/* padding-right-left
------------------------------------------------------------------- */

.prl--0 {
    padding-right: 0;
    padding-left: 0;
}

/* em */

.prl--d25e {
    padding-right: 0.25em;
    padding-left: 0.25em;
}

.prl--d50e {
    padding-right: 0.50em;
    padding-left: 0.50em;
}

.prl--d75e {
    padding-right: 0.75em;
    padding-left: 0.75em;
    padding: 1rem 1rem;
}

.prl--1e {
    padding-right: 1em;
    padding-left: 1em;
}

.prl--2e {
    padding-right: 2em;
    padding-left: 2em;
}

.prl--3e {
    padding-right: 3em;
    padding-left: 3em;
}

.prl--4e {
    padding-right: 4em;
    padding-left: 4em;
}

.prl--5e {
    padding-right: 5em;
    padding-left: 5em;
}

.prl--6e {
    padding-right: 6em;
    padding-left: 6em;
}

.prl--7e {
    padding-right: 7em;
    padding-left: 7em;
}

.prl--8e {
    padding-right: 8em;
    padding-left: 8em;
}

.prl--9e {
    padding-right: 9em;
    padding-left: 9em;
}

.prl--10e {
    padding-right: 10em;
    padding-left: 10em;
}

/* rem */

.prl--d25r {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}

.prl--d50r {
    padding-right: 0.50rem;
    padding-left: 0.50rem;
}

.prl--d75r {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.prl--1r {
    padding-right: 1rem;
    padding-left: 1rem;
}

.prl--2r {
    padding-right: 2rem;
    padding-left: 2rem;
}

.prl--3r {
    padding-right: 3rem;
    padding-left: 3rem;
}

.prl--4r {
    padding-right: 4rem;
    padding-left: 4rem;
}

.prl--5r {
    padding-right: 5rem;
    padding-left: 5rem;
}

.prl--6r {
    padding-right: 6rem;
    padding-left: 6rem;
}

.prl--7r {
    padding-right: 7rem;
    padding-left: 7rem;
}

.prl--8r {
    padding-right: 8rem;
    padding-left: 8rem;
}

.prl--9r {
    padding-right: 9rem;
    padding-left: 9rem;
}

.prl--10r {
    padding-right: 10rem;
    padding-left: 10rem;
}

/* % */

.prl--25p {
    padding-right: 25%;
    padding-left: 25%;
}

.prl--50p {
    padding-right: 50%;
    padding-left: 50%;
}

.prl--75p {
    padding-right: 75%;
    padding-left: 75%;
}

.prl--10p {
    padding-right: 10%;
    padding-left: 10%;
}

.prl--20p {
    padding-right: 20%;
    padding-left: 20%;
}

.prl--30p {
    padding-right: 30%;
    padding-left: 30%;
}

.prl--40p {
    padding-right: 40%;
    padding-left: 40%;
}

.prl--60p {
    padding-right: 60%;
    padding-left: 60%;
}

.prl--70p {
    padding-right: 70%;
    padding-left: 70%;
}

.prl--80p {
    padding-right: 80%;
    padding-left: 80%;
}

.prl--90p {
    padding-right: 90%;
    padding-left: 90%;
}

.prl--100p {
    padding-right: 100%;
    padding-left: 100%;
}

/* vw */

.prl--25vw {
    padding-right: 25vw;
    padding-left: 25vw;
}

.prl--50vw {
    padding-right: 50vw;
    padding-left: 50vw;
}

.prl--75vw {
    padding-right: 75vw;
    padding-left: 75vw;
}

.prl--10vw {
    padding-right: 10vw;
    padding-left: 10vw;
}

.prl--20vw {
    padding-right: 20vw;
    padding-left: 20vw;
}

.prl--30vw {
    padding-right: 30vw;
    padding-left: 30vw;
}

.prl--40vw {
    padding-right: 40vw;
    padding-left: 40vw;
}

.prl--60vw {
    padding-right: 60vw;
    padding-left: 60vw;
}

.prl--70vw {
    padding-right: 70vw;
    padding-left: 70vw;
    m:1r1r  ;
}

.prl--80vw {
    padding-right: 80vw;
    padding-left: 80vw;
}

.prl--90vw {
    padding-right: 90vw;
    padding-left: 90vw;
}

.prl--100vw {
    padding-right: 100vw;
    padding-left: 100vw;
}

/* vh */

.prl--25vh {
    padding-right: 25vh;
    padding-left: 25vh;
}

.prl--50vh {
    padding-right: 50vh;
    padding-left: 50vh;
}

.prl--75vh {
    padding-right: 75vh;
    padding-left: 75vh;
}

.prl--10vh {
    padding-right: 10vh;
    padding-left: 10vh;
}

.prl--20vh {
    padding-right: 20vh;
    padding-left: 20vh;
}

.prl--30vh {
    padding-right: 30vh;
    padding-left: 30vh;
}

.prl--40vh {
    padding-right: 40vh;
    padding-left: 40vh;
}

.prl--60vh {
    padding-right: 60vh;
    padding-left: 60vh;
}

.prl--70vh {
    padding-right: 70vh;
    padding-left: 70vh;
}

.prl--80vh {
    padding-right: 80vh;
    padding-left: 80vh;
}

.prl--90vh {
    padding-right: 90vh;
    padding-t: 90vh;
}

.prl--100vh {
    padding-right: 100vh;
    padding-left: 100vh;
}

/* px */

.prl--1px {
    padding-right: 1px;
    padding-left: 1px;
}

.prl--2px {
    padding-right: 2px;
    padding-left: 2px;
}

.prl--3px {
    padding-right: 3px;
    padding-left: 3px;
}

.prl--4px {
    padding-right: 4px;
    padding-left: 4px;
}

.prl--5px {
    padding-right: 5px;
    padding-left: 5px;
}

.prl--6px {
    padding-right: 6px;
    padding-left: 6px;
}

.prl--7px {
    padding-right: 7px;
    padding-left: 7px;
}

.prl--8px {
    padding-right: 8px;
    padding-left: 8px;
}

.prl--9px {
    padding-right: 9px;
    padding-left: 9px;
}

.prl--10px {
    padding-right: 10px;
    padding-left: 10px;
}

.prl--20px {
    padding-right: 20px;
    padding-left: 20px;
}

.prl--30px {
    padding-right: 30px;
    padding-left: 30px;
}

.prl--40px {
    padding-right: 40px;
    padding-left: 40px;
}

.prl--50px {
    padding-right: 50px;
    padding-left: 50px;
}

.prl--60px {
    padding-right: 60px;
    padding-left: 60px;
}

.prl--70px {
    padding-right: 70px;
    padding-left: 70px;
}

.prl--80px {
    padding-right: 80px;
    padding-left: 80px;
}

.prl--90px {
    padding-right: 90px;
    padding-left: 90px;
}

.prl--100px {
    padding-right: 100px;
    padding-left: 100px;
}

.prl--150px {
    padding-right: 150px;
    padding-left: 150px;
}

.prl--200px {
    padding-right: 200px;
    padding-left: 200px;
}

.prl--250px {
    padding-right: 250px;
    padding-left: 250px;
}

.prl--300px {
    padding-right: 300px;
    padding-left: 300px;
}

/*ƒ ––––––––––––––––––––––––––––––––––––––––––––––––––––––– padding */


/* top, right, bottom, left
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* top
------------------------------------------------------------------- */

.t--a,
.t--auto {
    top: auto;
}

.t--0 {
    top: 0;
}

/* em */

.t--d25e {
    top: 0.25em;
}

.t--d50e {
    top: 0.50em;
}

.t--d75e {
    top: 0.75em;
}

.t--1e {
    top: 1em;
}

.t--2e {
    top: 2em;
}

.t--3e {
    top: 3em;
}

.t--4e {
    top: 4em;
}

.t--5e {
    top: 5em;
}

.t--6e {
    top: 6em;
}

.t--7e {
    top: 7em;
}

.t--8e {
    top: 8em;
}

.t--9e {
    top: 9em;
}

.t--10e {
    top: 10em;
}

/* rem */

.t--d25r {
    top: 0.25rem;
}

.t--d50r {
    top: 0.50rem;
}

.t--d75r {
    top: 0.75rem;
}

.t--1r {
    top: 1rem;
}

.t--2r {
    top: 2rem;
}

.t--3r {
    top: 3rem;
}

.t--4r {
    top: 4rem;
}

.t--5r {
    top: 5rem;
}

.t--6r {
    top: 6rem;
}

.t--7r {
    top: 7rem;
}

.t--8r {
    top: 8rem;
}

.t--9r {
    top: 9rem;
}

.t--10r {
    top: 10rem;
}

/* % */

.t--25p {
    top: 25%;
}

.t--50p {
    top: 50%;
}

.t--75p {
    top: 75%;
}

.t--10p {
    top: 10%;
}

.t--20p {
    top: 20%;
}

.t--30p {
    top: 30%;
}

.t--40p {
    top: 40%;
}

.t--60p {
    top: 60%;
}

.t--70p {
    top: 70%;
}

.t--80p {
    top: 80%;
}

.t--90p {
    top: 90%;
}

.t--100p {
    top: 100%;
}

/* vw */

.t--25vw {
    top: 25vw;
}

.t--50vw {
    top: 50vw;
}

.t--75vw {
    top: 75vw;
}

.t--10vw {
    top: 10vw;
}

.t--20vw {
    top: 20vw;
}

.t--30vw {
    top: 30vw;
}

.t--40vw {
    top: 40vw;
}

.t--60vw {
    top: 60vw;
}

.t--70vw {
    top: 70vw;
}

.t--80vw {
    top: 80vw;
}

.t--90vw {
    top: 90vw;
}

.t--100vw {
    top: 100vw;
}

/* vh */

.t--25vh {
    top: 25vh;
}

.t--50vh {
    top: 50vh;
}

.t--75vh {
    top: 75vh;
}

.t--10vh {
    top: 10vh;
}

.t--20vh {
    top: 20vh;
}

.t--30vh {
    top: 30vh;
}

.t--40vh {
    top: 40vh;
}

.t--60vh {
    top: 60vh;
}

.t--70vh {
    top: 70vh;
}

.t--80vh {
    top: 80vh;
}

.t--90vh {
    top: 90vh;
}

.t--100vh {
    top: 100vh;
}

/* px */

.t--1px {
    top: 1px;
}

.t--2px {
    top: 2px;
}

.t--3px {
    top: 3px;
}

.t--4px {
    top: 4px;
}

.t--5px {
    top: 5px;
}

.t--6px {
    top: 6px;
}

.t--7px {
    top: 7px;
}

.t--8px {
    top: 8px;
}

.t--9px {
    top: 9px;
}

.t--10px {
    top: 10px;
}

.t--20px {
    top: 20px;
}

.t--30px {
    top: 30px;
}

.t--40px {
    top: 40px;
}

.t--50px {
    top: 50px;
}

.t--60px {
    top: 60px;
}

.t--70px {
    top: 70px;
}

.t--80px {
    top: 80px;
}

.t--90px {
    top: 90px;
}

.t--100px {
    top: 100px;
}

.t--150px {
    top: 150px;
}

.t--200px {
    top: 200px;
}

.t--250px {
    top: 250px;
}

.t--300px {
    top: 300px;
}

/* right
------------------------------------------------------------------- */

.r--a,
.r--auto {
    right: auto;
}

.r--0 {
    right: 0;
}

/* em */

.r--d25e {
    right: 0.25em;
}

.r--d50e {
    right: 0.50em;
}

.r--d75e {
    right: 0.75em;
}

.r--1e {
    right: 1em;
}

.r--2e {
    right: 2em;
}

.r--3e {
    right: 3em;
}

.r--4e {
    right: 4em;
}

.r--5e {
    right: 5em;
}

.r--6e {
    right: 6em;
}

.r--7e {
    right: 7em;
}

.r--8e {
    right: 8em;
}

.r--9e {
    right: 9em;
}

.r--10e {
    right: 10em;
}

/* rem */

.r--d25r {
    right: 0.25rem;
}

.r--d50r {
    right: 0.50rem;
}

.r--d75r {
    right: 0.75rem;
}

.r--1r {
    right: 1rem;
}

.r--2r {
    right: 2rem;
}

.r--3r {
    right: 3rem;
}

.r--4r {
    right: 4rem;
}

.r--5r {
    right: 5rem;
}

.r--6r {
    right: 6rem;
}

.r--7r {
    right: 7rem;
}

.r--8r {
    right: 8rem;
}

.r--9r {
    right: 9rem;
}

.r--10r {
    right: 10rem;
}

/* % */

.r--25p {
    right: 25%;
}

.r--50p {
    right: 50%;
}

.r--75p {
    right: 75%;
}

.r--10p {
    right: 10%;
}

.r--20p {
    right: 20%;
}

.r--30p {
    right: 30%;
}

.r--40p {
    right: 40%;
}

.r--60p {
    right: 60%;
}

.r--70p {
    right: 70%;
}

.r--80p {
    right: 80%;
}

.r--90p {
    right: 90%;
}

.r--100p {
    right: 100%;
}

/* vw */

.r--25vw {
    right: 25vw;
}

.r--50vw {
    right: 50vw;
}

.r--75vw {
    right: 75vw;
}

.r--10vw {
    right: 10vw;
}

.r--20vw {
    right: 20vw;
}

.r--30vw {
    right: 30vw;
}

.r--40vw {
    right: 40vw;
}

.r--60vw {
    right: 60vw;
}

.r--70vw {
    right: 70vw;
}

.r--80vw {
    right: 80vw;
}

.r--90vw {
    right: 90vw;
}

.r--100vw {
    right: 100vw;
}

/* vh */

.r--25vh {
    right: 25vh;
}

.r--50vh {
    right: 50vh;
}

.r--75vh {
    right: 75vh;
}

.r--10vh {
    right: 10vh;
}

.r--20vh {
    right: 20vh;
}

.r--30vh {
    right: 30vh;
}

.r--40vh {
    right: 40vh;
}

.r--60vh {
    right: 60vh;
}

.r--70vh {
    right: 70vh;
}

.r--80vh {
    right: 80vh;
}

.r--90vh {
    right: 90vh;
}

.r--100vh {
    right: 100vh;
}

/* px */

.r--1px {
    right: 1px;
}

.r--2px {
    right: 2px;
}

.r--3px {
    right: 3px;
}

.r--4px {
    right: 4px;
}

.r--5px {
    right: 5px;
}

.r--6px {
    right: 6px;
}

.r--7px {
    right: 7px;
}

.r--8px {
    right: 8px;
}

.r--9px {
    right: 9px;
}

.r--10px {
    right: 10px;
}

.r--20px {
    right: 20px;
}

.r--30px {
    right: 30px;
}

.r--40px {
    right: 40px;
}

.r--50px {
    right: 50px;
}

.r--60px {
    right: 60px;
}

.r--70px {
    right: 70px;
}

.r--80px {
    right: 80px;
}

.r--90px {
    right: 90px;
}

.r--100px {
    right: 100px;
}

.r--150px {
    right: 150px;
}

.r--200px {
    right: 200px;
}

.r--250px {
    right: 250px;
}

.r--300px {
    right: 300px;
}

/* bottom
------------------------------------------------------------------- */

.b--a,
.b--auto {
    bottom: auto;
}

.b--0 {
    bottom: 0;
}

/* em */

.b--d25e {
    bottom: 0.25em;
}

.b--d50e {
    bottom: 0.50em;
}

.b--d75e {
    bottom: 0.75em;
}

.b--1e {
    bottom: 1em;
}

.b--2e {
    bottom: 2em;
}

.b--3e {
    bottom: 3em;
}

.b--4e {
    bottom: 4em;
}

.b--5e {
    bottom: 5em;
}

.b--6e {
    bottom: 6em;
}

.b--7e {
    bottom: 7em;
}

.b--8e {
    bottom: 8em;
}

.b--9e {
    bottom: 9em;
}

.b--10e {
    bottom: 10em;
}

/* rem */

.b--d25r {
    bottom: 0.25rem;
}

.b--d50r {
    bottom: 0.50rem;
}

.b--d75r {
    bottom: 0.75rem;
}

.b--1r {
    bottom: 1rem;
}

.b--2r {
    bottom: 2rem;
}

.b--3r {
    bottom: 3rem;
}

.b--4r {
    bottom: 4rem;
}

.b--5r {
    bottom: 5rem;
}

.b--6r {
    bottom: 6rem;
}

.b--7r {
    bottom: 7rem;
}

.b--8r {
    bottom: 8rem;
}

.b--9r {
    bottom: 9rem;
}

.b--10r {
    bottom: 10rem;
}

/* % */

.b--25p {
    bottom: 25%;
}

.b--50p {
    bottom: 50%;
}

.b--75p {
    bottom: 75%;
}

.b--10p {
    bottom: 10%;
}

.b--20p {
    bottom: 20%;
}

.b--30p {
    bottom: 30%;
}

.b--40p {
    bottom: 40%;
}

.b--60p {
    bottom: 60%;
}

.b--70p {
    bottom: 70%;
}

.b--80p {
    bottom: 80%;
}

.b--90p {
    bottom: 90%;
}

.b--100p {
    bottom: 100%;
}

/* vw */

.b--25vw {
    bottom: 25vw;
}

.b--50vw {
    bottom: 50vw;
}

.b--75vw {
    bottom: 75vw;
}

.b--10vw {
    bottom: 10vw;
}

.b--20vw {
    bottom: 20vw;
}

.b--30vw {
    bottom: 30vw;
}

.b--40vw {
    bottom: 40vw;
}

.b--60vw {
    bottom: 60vw;
}

.b--70vw {
    bottom: 70vw;
}

.b--80vw {
    bottom: 80vw;
}

.b--90vw {
    bottom: 90vw;
}

.b--100vw {
    bottom: 100vw;
}

/* vh */

.b--25vh {
    bottom: 25vh;
}

.b--50vh {
    bottom: 50vh;
}

.b--75vh {
    bottom: 75vh;
}

.b--10vh {
    bottom: 10vh;
}

.b--20vh {
    bottom: 20vh;
}

.b--30vh {
    bottom: 30vh;
}

.b--40vh {
    bottom: 40vh;
}

.b--60vh {
    bottom: 60vh;
}

.b--70vh {
    bottom: 70vh;
}

.b--80vh {
    bottom: 80vh;
}

.b--90vh {
    bottom: 90vh;
}

.b--100vh {
    bottom: 100vh;
}

/* px */

.b--1px {
    bottom: 1px;
}

.b--2px {
    bottom: 2px;
}

.b--3px {
    bottom: 3px;
}

.b--4px {
    bottom: 4px;
}

.b--5px {
    bottom: 5px;
}

.b--6px {
    bottom: 6px;
}

.b--7px {
    bottom: 7px;
}

.b--8px {
    bottom: 8px;
}

.b--9px {
    bottom: 9px;
}

.b--10px {
    bottom: 10px;
}

.b--20px {
    bottom: 20px;
}

.b--30px {
    bottom: 30px;
}

.b--40px {
    bottom: 40px;
}

.b--50px {
    bottom: 50px;
}

.b--60px {
    bottom: 60px;
}

.b--70px {
    bottom: 70px;
}

.b--80px {
    bottom: 80px;
}

.b--90px {
    bottom: 90px;
}

.b--100px {
    bottom: 100px;
}

.b--150px {
    bottom: 150px;
}

.b--200px {
    bottom: 200px;
}

.b--250px {
    bottom: 250px;
}

.b--300px {
    bottom: 300px;
}

/* left
------------------------------------------------------------------- */

.l--a,
.l--auto {
    left: auto;
}

.l--0 {
    left: 0;
}

/* em */

.l--d25e {
    left: 0.25em;
}

.l--d50e {
    left: 0.50em;
}

.l--d75e {
    left: 0.75em;
}

.l--1e {
    left: 1em;
}

.l--2e {
    left: 2em;
}

.l--3e {
    left: 3em;
}

.l--4e {
    left: 4em;
}

.l--5e {
    left: 5em;
}

.l--6e {
    left: 6em;
}

.l--7e {
    left: 7em;
}

.l--8e {
    left: 8em;
}

.l--9e {
    left: 9em;
}

.l--10e {
    left: 10em;
}

/* rem */

.l--d25r {
    left: 0.25rem;
}

.l--d50r {
    left: 0.50rem;
}

.l--d75r {
    left: 0.75rem;
}

.l--1r {
    left: 1rem;
}

.l--2r {
    left: 2rem;
}

.l--3r {
    left: 3rem;
}

.l--4r {
    left: 4rem;
}

.l--5r {
    left: 5rem;
}

.l--6r {
    left: 6rem;
}

.l--7r {
    left: 7rem;
}

.l--8r {
    left: 8rem;
}

.l--9r {
    left: 9rem;
}

.l--10r {
    left: 10rem;
}

/* % */

.l--25p {
    left: 25%;
}

.l--50p {
    left: 50%;
}

.l--75p {
    left: 75%;
}

.l--10p {
    left: 10%;
}

.l--20p {
    left: 20%;
}

.l--30p {
    left: 30%;
}

.l--40p {
    left: 40%;
}

.l--60p {
    left: 60%;
}

.l--70p {
    left: 70%;
}

.l--80p {
    left: 80%;
}

.l--90p {
    left: 90%;
}

.l--100p {
    left: 100%;
}

/* vw */

.l--25vw {
    left: 25vw;
}

.l--50vw {
    left: 50vw;
}

.l--75vw {
    left: 75vw;
}

.l--10vw {
    left: 10vw;
}

.l--20vw {
    left: 20vw;
}

.l--30vw {
    left: 30vw;
}

.l--40vw {
    left: 40vw;
}

.l--60vw {
    left: 60vw;
}

.l--70vw {
    left: 70vw;
}

.l--80vw {
    left: 80vw;
}

.l--90vw {
    left: 90vw;
}

.l--100vw {
    left: 100vw;
}

/* vh */

.l--25vh {
    left: 25vh;
}

.l--50vh {
    left: 50vh;
}

.l--75vh {
    left: 75vh;
}

.l--10vh {
    left: 10vh;
}

.l--20vh {
    left: 20vh;
}

.l--30vh {
    left: 30vh;
}

.l--40vh {
    left: 40vh;
}

.l--60vh {
    left: 60vh;
}

.l--70vh {
    left: 70vh;
}

.l--80vh {
    left: 80vh;
}

.l--90vh {
    left: 90vh;
}

.l--100vh {
    left: 100vh;
}

/* px */

.l--1px {
    left: 1px;
}

.l--2px {
    left: 2px;
}

.l--3px {
    left: 3px;
}

.l--4px {
    left: 4px;
}

.l--5px {
    left: 5px;
}

.l--6px {
    left: 6px;
}

.l--7px {
    left: 7px;
}

.l--8px {
    left: 8px;
}

.l--9px {
    left: 9px;
}

.l--10px {
    left: 10px;
}

.l--20px {
    left: 20px;
}

.l--30px {
    left: 30px;
}

.l--40px {
    left: 40px;
}

.l--50px {
    left: 50px;
}

.l--60px {
    left: 60px;
}

.l--70px {
    left: 70px;
}

.l--80px {
    left: 80px;
}

.l--90px {
    left: 90px;
}

.l--100px {
    left: 100px;
}

.l--150px {
    left: 150px;
}

.l--200px {
    left: 200px;
}

.l--250px {
    left: 250px;
}

.l--300px {
    left: 300px;
}

/*ƒ –––––––––––––––––––––––––––––––––––––– top, right, bottom, left */

/* top, right, bottom, left
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* width, height
------------------------------------------------------------------- */

.w--a,
.w--auto {
    width: auto;
}

.w--0 {
    width: 0;
}

/* em */

.w--d25e {
    width: 0.25em;
}

.w--d50e {
    width: 0.50em;
}

.w--d75e {
    width: 0.75em;
}

.w--1e {
    width: 1em;
}

.w--2e {
    width: 2em;
}

.w--3e {
    width: 3em;
}

.w--4e {
    width: 4em;
}

.w--5e {
    width: 5em;
}

.w--6e {
    width: 6em;
}

.w--7e {
    width: 7em;
}

.w--8e {
    width: 8em;
}

.w--9e {
    width: 9em;
}

.w--10e {
    width: 10em;
}

/* rem */

.w--d25r {
    width: 0.25rem;
}

.w--d50r {
    width: 0.50rem;
}

.w--d75r {
    width: 0.75rem;
}

.w--1r {
    width: 1rem;
}

.w--2r {
    width: 2rem;
}

.w--3r {
    width: 3rem;
}

.w--4r {
    width: 4rem;
}

.w--5r {
    width: 5rem;
}

.w--6r {
    width: 6rem;
}

.w--7r {
    width: 7rem;
}

.w--8r {
    width: 8rem;
}

.w--9r {
    width: 9rem;
}

.w--10r {
    width: 10rem;
}

/* % */

.w--25p {
    width: 25%;
}

.w--50p {
    width: 50%;
}

.w--75p {
    width: 75%;
}

.w--10p {
    width: 10%;
}

.w--20p {
    width: 20%;
}

.w--30p {
    width: 30%;
}

.w--40p {
    width: 40%;
}

.w--60p {
    width: 60%;
}

.w--70p {
    width: 70%;
}

.w--80p {
    width: 80%;
}

.w--90p {
    width: 90%;
}

.w--100p {
    width: 100%;
}

/* vw */

.w--25vw {
    width: 25vw;
}

.w--50vw {
    width: 50vw;
}

.w--75vw {
    width: 75vw;
}

.w--10vw {
    width: 10vw;
}

.w--20vw {
    width: 20vw;
}

.w--30vw {
    width: 30vw;
}

.w--40vw {
    width: 40vw;
}

.w--60vw {
    width: 60vw;
}

.w--70vw {
    width: 70vw;
}

.w--80vw {
    width: 80vw;
}

.w--90vw {
    width: 90vw;
}

.w--100vw {
    width: 100vw;
}

/* vh */

.w--25vh {
    width: 25vh;
}

.w--50vh {
    width: 50vh;
}

.w--75vh {
    width: 75vh;
}

.w--10vh {
    width: 10vh;
}

.w--20vh {
    width: 20vh;
}

.w--30vh {
    width: 30vh;
}

.w--40vh {
    width: 40vh;
}

.w--60vh {
    width: 60vh;
}

.w--70vh {
    width: 70vh;
}

.w--80vh {
    width: 80vh;
}

.w--90vh {
    width: 90vh;
}

.w--100vh {
    width: 100vh;
}

/* px */

.w--1px {
    width: 1px;
}

.w--2px {
    width: 2px;
}

.w--3px {
    width: 3px;
}

.w--4px {
    width: 4px;
}

.w--5px {
    width: 5px;
}

.w--6px {
    width: 6px;
}

.w--7px {
    width: 7px;
}

.w--8px {
    width: 8px;
}

.w--9px {
    width: 9px;
}

.w--10px {
    width: 10px;
}

.w--20px {
    width: 20px;
}

.w--30px {
    width: 30px;
}

.w--40px {
    width: 40px;
}

.w--50px {
    width: 50px;
}

.w--60px {
    width: 60px;
}

.w--70px {
    width: 70px;
}

.w--80px {
    width: 80px;
}

.w--90px {
    width: 90px;
}

.w--100px {
    width: 100px;
}

.w--150px {
    width: 150px;
}

.w--200px {
    width: 200px;
}

.w--250px {
    width: 250px;
}

.w--300px {
    width: 300px;
}

/* height
------------------------------------------------------------------- */

.h--a,
.h--auto {
    height: auto;
}

.h--0 {
    height: 0;
}

/* em */

.h--d25e {
    height: 0.25em;
}

.h--d50e {
    height: 0.50em;
}

.h--d75e {
    height: 0.75em;
}

.h--1e {
    height: 1em;
}

.h--2e {
    height: 2em;
}

.h--3e {
    height: 3em;
}

.h--4e {
    height: 4em;
}

.h--5e {
    height: 5em;
}

.h--6e {
    height: 6em;
}

.h--7e {
    height: 7em;
}

.h--8e {
    height: 8em;
}

.h--9e {
    height: 9em;
}

.h--10e {
    height: 10em;
}

/* rem */

.h--d25r {
    height: 0.25rem;
}

.h--d50r {
    height: 0.50rem;
}

.h--d75r {
    height: 0.75rem;
}

.h--1r {
    height: 1rem;
}

.h--2r {
    height: 2rem;
}

.h--3r {
    height: 3rem;
}

.h--4r {
    height: 4rem;
}

.h--5r {
    height: 5rem;
}

.h--6r {
    height: 6rem;
}

.h--7r {
    height: 7rem;
}

.h--8r {
    height: 8rem;
}

.h--9r {
    height: 9rem;
}

.h--10r {
    height: 10rem;
}

/* % */

.h--25p {
    height: 25%;
}

.h--50p {
    height: 50%;
}

.h--75p {
    height: 75%;
}

.h--10p {
    height: 10%;
}

.h--20p {
    height: 20%;
}

.h--30p {
    height: 30%;
}

.h--40p {
    height: 40%;
}

.h--60p {
    height: 60%;
}

.h--70p {
    height: 70%;
}

.h--80p {
    height: 80%;
}

.h--90p {
    height: 90%;
}

.h--100p {
    height: 100%;
}

/* vw */

.h--25vw {
    height: 25vw;
}

.h--50vw {
    height: 50vw;
}

.h--75vw {
    height: 75vw;
}

.h--10vw {
    height: 10vw;
}

.h--20vw {
    height: 20vw;
}

.h--30vw {
    height: 30vw;
}

.h--40vw {
    height: 40vw;
}

.h--60vw {
    height: 60vw;
}

.h--70vw {
    height: 70vw;
}

.h--80vw {
    height: 80vw;
}

.h--90vw {
    height: 90vw;
}

.h--100vw {
    height: 100vw;
}

/* vh */

.h--25vh {
    height: 25vh;
}

.h--50vh {
    height: 50vh;
}

.h--75vh {
    height: 75vh;
}

.h--10vh {
    height: 10vh;
}

.h--20vh {
    height: 20vh;
}

.h--30vh {
    height: 30vh;
}

.h--40vh {
    height: 40vh;
}

.h--60vh {
    height: 60vh;
}

.h--70vh {
    height: 70vh;
}

.h--80vh {
    height: 80vh;
}

.h--90vh {
    height: 90vh;
}

.h--100vh {
    height: 100vh;
}

/* px */

.h--1px {
    height: 1px;
}

.h--2px {
    height: 2px;
}

.h--3px {
    height: 3px;
}

.h--4px {
    height: 4px;
}

.h--5px {
    height: 5px;
}

.h--6px {
    height: 6px;
}

.h--7px {
    height: 7px;
}

.h--8px {
    height: 8px;
}

.h--9px {
    height: 9px;
}

.h--10px {
    height: 10px;
}

.h--20px {
    height: 20px;
}

.h--30px {
    height: 30px;
}

.h--40px {
    height: 40px;
}

.h--50px {
    height: 50px;
}

.h--60px {
    height: 60px;
}

.h--70px {
    height: 70px;
}

.h--80px {
    height: 80px;
}

.h--90px {
    height: 90px;
}

.h--100px {
    height: 100px;
}

.h--150px {
    height: 150px;
}

.h--200px {
    height: 200px;
}

.h--250px {
    height: 250px;
}

.h--300px {
    height: 300px;
}

/*ƒ ––––––––––––––––––––––––––––––––––––––––––––––––– width, height */

/* text-indent
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.ti--0 {
    text-indent: 0;
}

.ti--n {
    text-indent: -9999px;
}

/* em */

.ti--d25e {
    text-indent: 0.25em;
}

.ti--d50e {
    text-indent: 0.50em;
}

.ti--d75e {
    text-indent: 0.75em;
}

.ti--1e {
    text-indent: 1em;
}

.ti--2e {
    text-indent: 2em;
}

.ti--3e {
    text-indent: 3em;
}

.ti--4e {
    text-indent: 4em;
}

.ti--5e {
    text-indent: 5em;
}

.ti--6e {
    text-indent: 6em;
}

.ti--7e {
    text-indent: 7em;
}

.ti--8e {
    text-indent: 8em;
}

.ti--9e {
    text-indent: 9em;
}

.ti--10e {
    text-indent: 10em;
}

.ti--nd25e {
    text-indent: -0.25em;
}

.ti--nd50e {
    text-indent: -0.50em;
}

.ti--nd75e {
    text-indent: -0.75em;
}

.ti--n1e {
    text-indent: -1em;
}

.ti--n2e {
    text-indent: -2em;
}

.ti--n3e {
    text-indent: -3em;
}

.ti--n4e {
    text-indent: -4em;
}

.ti--n5e {
    text-indent: -5em;
}

.ti--n6e {
    text-indent: -6em;
}

.ti--n7e {
    text-indent: -7em;
}

.ti--n8e {
    text-indent: -8em;
}

.ti--n9e {
    text-indent: -9em;
}

.ti--n10e {
    text-indent: -10em;
}
/*ƒ ––––––––––––––––––––––––––––––––––––––––––––––––––– text-indent */

/* word-spacing
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.wos--0 {
    word-spacing: 0;
}

.wos--n {
    word-spacing: -9999px;
}

/* em */

.wos--d25e {
    word-spacing: 0.25em;
}

.wos--d50e {
    word-spacing: 0.50em;
}

.wos--d75e {
    word-spacing: 0.75em;
}

.wos--1e {
    word-spacing: 1em;
}

.wos--2e {
    word-spacing: 2em;
}

.wos--3e {
    word-spacing: 3em;
}

.wos--4e {
    word-spacing: 4em;
}

.wos--5e {
    word-spacing: 5em;
}

.wos--6e {
    word-spacing: 6em;
}

.wos--7e {
    word-spacing: 7em;
}

.wos--8e {
    word-spacing: 8em;
}

.wos--9e {
    word-spacing: 9em;
}

.wos--10e {
    word-spacing: 10em;
}

.wos--nd25e {
    word-spacing: -0.25em;
}

.wos--nd50e {
    word-spacing: -0.50em;
}

.wos--nd75e {
    word-spacing: -0.75em;
}

.wos--n1e {
    word-spacing: -1em;
}

.wos--n2e {
    word-spacing: -2em;
}

.wos--n3e {
    word-spacing: -3em;
}

.wos--n4e {
    word-spacing: -4em;
}

.wos--n5e {
    word-spacing: -5em;
}

.wos--n6e {
    word-spacing: -6em;
}

.wos--n7e {
    word-spacing: -7em;
}

.wos--n8e {
    word-spacing: -8em;
}

.wos--n9e {
    word-spacing: -9em;
}

.wos--n10e {
    word-spacing: -10em;
}
/*ƒ –––––––––––––––––––––––––––––––––––––––––––––––––– word-spacing */

/* oppacity
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.op--0 {
    opacity: 0;
}

.op--d1 {
    opacity: 0.1;
}

.op-d2 {
    opacity: 0.2;
}

.op--d3 {
    opacity: 0.3;
}

.op--d4 {
    opacity: 0.4;
}

.op--d5 {
    opacity: 0.5;
}

.op--d6 {
    opacity: 0.6;
}

.op--d7 {
    opacity: 0.7;
}

.op--d8 {
    opacity: 0.8;
}

.op--d9 {
    opacity: 0.9;
}

.op--1 {
    opacity: 1;
}

/*ƒ –––––––––––––––––––––––––––––––––––––––––––––––––––––– oppacity */

/* border-width
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* px */

.bdw--1px {
    border-width: 1px;
}

.bdw--2px {
    border-width: 2px;
}

.bdw--3px {
    border-width: 3px;
}

.bdw--4px {
    border-width: 4px;
}

.bdw--5px {
    border-width: 5px;
}

.bdw--6px {
    border-width: 6px;
}

.bdw--7px {
    border-width: 7px;
}

.bdw--8px {
    border-width: 8px;
}

.bdw--9px {
    border-width: 9px;
}

.bdw--10px {
    border-width: 10px;
}

.bdw--20px {
    border-width: 20px;
}

.bdw--30px {
    border-width: 30px;
}

.bdw--40px {
    border-width: 40px;
}

.bdw--50px {
    border-width: 50px;
}

.bdw--60px {
    border-width: 60px;
}

.bdw--70px {
    border-width: 70px;
}

.bdw--80px {
    border-width: 80px;
}

.bdw--90px {
    border-width: 90px;
}

.bdw--100px {
    border-width: 100px;
}

.bdw--150px {
    border-width: 150px;
}

.bdw--200px {
    border-width: 200px;
}

.bdw--250px {
    border-width: 250px;
}

.bdw--300px {
    border-width: 300px;
}

.bdtw--1px {
    border-top-width: 1px;
}

/* border-top-width
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* px */

.bdtw--1px {
    border-top-width: 1px;
}

.bdtw--2px {
    border-top-width: 2px;
}

.bdtw--3px {
    border-top-width: 3px;
}

.bdtw--4px {
    border-top-width: 4px;
}

.bdtw--5px {
    border-top-width: 5px;
}

.bdtw--6px {
    border-top-width: 6px;
}

.bdtw--7px {
    border-top-width: 7px;
}

.bdtw--8px {
    border-top-width: 8px;
}

.bdtw--9px {
    border-top-width: 9px;
}

.bdtw--10px {
    border-top-width: 10px;
}

.bdtw--20px {
    border-top-width: 20px;
}

.bdtw--30px {
    border-top-width: 30px;
}

.bdtw--40px {
    border-top-width: 40px;
}

.bdtw--50px {
    border-top-width: 50px;
}

.bdtw--60px {
    border-top-width: 60px;
}

.bdtw--70px {
    border-top-width: 70px;
}

.bdtw--80px {
    border-top-width: 80px;
}

.bdtw--90px {
    border-top-width: 90px;
}

.bdtw--100px {
    border-top-width: 100px;
}

.bdtw--150px {
    border-top-width: 150px;
}

.bdtw--200px {
    border-top-width: 200px;
}

.bdtw--250px {
    border-top-width: 250px;
}

.bdtw--300px {
    border-top-width: 300px;
}

/* border-right-width
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* px */

.bdrw--1px {
    border-right-width: 1px;
}

.bdrw--2px {
    border-right-width: 2px;
}

.bdrw--3px {
    border-right-width: 3px;
}

.bdrw--4px {
    border-right-width: 4px;
}

.bdrw--5px {
    border-right-width: 5px;
}

.bdrw--6px {
    border-right-width: 6px;
}

.bdrw--7px {
    border-right-width: 7px;
}

.bdrw--8px {
    border-right-width: 8px;
}

.bdrw--9px {
    border-right-width: 9px;
}

.bdrw--10px {
    border-right-width: 10px;
}

.bdrw--20px {
    border-right-width: 20px;
}

.bdrw--30px {
    border-right-width: 30px;
}

.bdrw--40px {
    border-right-width: 40px;
}

.bdrw--50px {
    border-right-width: 50px;
}

.bdrw--60px {
    border-right-width: 60px;
}

.bdrw--70px {
    border-right-width: 70px;
}

.bdrw--80px {
    border-right-width: 80px;
}

.bdrw--90px {
    border-right-width: 90px;
}

.bdrw--100px {
    border-right-width: 100px;
}

.bdrw--150px {
    border-right-width: 150px;
}

.bdrw--200px {
    border-right-width: 200px;
}

.bdrw--250px {
    border-right-width: 250px;
}

.bdrw--300px {
    border-right-width: 300px;
}

/* border-bottom-width
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* px */

.bdbw--1px {
    border-bottom-width: 1px;
}

.bdbw--2px {
    border-bottom-width: 2px;
}

.bdbw--3px {
    border-bottom-width: 3px;
}

.bdbw--4px {
    border-bottom-width: 4px;
}

.bdbw--5px {
    border-bottom-width: 5px;
}

.bdbw--6px {
    border-bottom-width: 6px;
}

.bdbw--7px {
    border-bottom-width: 7px;
}

.bdbw--8px {
    border-bottom-width: 8px;
}

.bdbw--9px {
    border-bottom-width: 9px;
}

.bdbw--10px {
    border-bottom-width: 10px;
}

.bdbw--20px {
    border-bottom-width: 20px;
}

.bdbw--30px {
    border-bottom-width: 30px;
}

.bdbw--40px {
    border-bottom-width: 40px;
}

.bdbw--50px {
    border-bottom-width: 50px;
}

.bdbw--60px {
    border-bottom-width: 60px;
}

.bdbw--70px {
    border-bottom-width: 70px;
}

.bdbw--80px {
    border-bottom-width: 80px;
}

.bdbw--90px {
    border-bottom-width: 90px;
}

.bdbw--100px {
    border-bottom-width: 100px;
}

.bdbw--150px {
    border-bottom-width: 150px;
}

.bdbw--200px {
    border-bottom-width: 200px;
}

.bdbw--250px {
    border-bottom-width: 250px;
}

.bdbw--300px {
    border-bottom-width: 300px;
}

/* border-left-width
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* px */

.bdlw--1px {
    border-left-width: 1px;
}

.bdlw--2px {
    border-left-width: 2px;
}

.bdlw--3px {
    border-left-width: 3px;
}

.bdlw--4px {
    border-left-width: 4px;
}

.bdlw--5px {
    border-left-width: 5px;
}

.bdlw--6px {
    border-left-width: 6px;
}

.bdlw--7px {
    border-left-width: 7px;
}

.bdlw--8px {
    border-left-width: 8px;
}

.bdlw--9px {
    border-left-width: 9px;
}

.bdlw--10px {
    border-left-width: 10px;
}

.bdlw--20px {
    border-left-width: 20px;
}

.bdlw--30px {
    border-left-width: 30px;
}

.bdlw--40px {
    border-left-width: 40px;
}

.bdlw--50px {
    border-left-width: 50px;
}

.bdlw--60px {
    border-left-width: 60px;
}

.bdlw--70px {
    border-left-width: 70px;
}

.bdlw--80px {
    border-left-width: 80px;
}

.bdlw--90px {
    border-left-width: 90px;
}

.bdlw--100px {
    border-left-width: 100px;
}

.bdlw--150px {
    border-left-width: 150px;
}

.bdlw--200px {
    border-left-width: 200px;
}

.bdlw--250px {
    border-left-width: 250px;
}

.bdlw--300px {
    border-left-width: 300px;
}

/*ƒ –––––––––––––––––––––––––––––––––––––––– primer-emmet-parameter */

-- (double-hiphen)にしているのは、一応競合防止と、
(※例えば『Bootstrap』のm-0margin: 0;で、
 『Emmet』なら競合しても大きく問題出ないような気がしますが)

自分の場合は若干コードをわかりやすくするために、

element .class-property(※種類・属性。主に .(dot) の代わり) と、
element .class--value(※値。主に : (colon) 、= (equal) の代わり)

で分類しようとしているのが理由です。以上です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WEBサイトで「乗算」を再現?IE非対応でいいならCSSできるよ

どうも7noteです。忌々しい乗算に悩まされない日が近づいています。

WEBデザインで一番困るといっても過言ではない「乗算」。
現状全てのブラウザに対応するための一般的な方法は存在しません。

そのためコーダーは透明度や色合いなどで微調整するしかなかったのですが、
実はIEを無視すれば乗算に対応することができます!

見本(右のみCSSで乗算にした結果)
sample.png

このように、薄い背景であれば白背景付きのロゴ画像でも色付きの場所になじませて配置することが可能なんです。

ソース

index.html
<div class="bg">
  <img src="logo.png">
  <img src="logo.png" class="mbm">
</div>
style.css
.bg {
  background: #fdd;
  padding: 10px;
}

.bg .mbm {
  mix-blend-mode: multiply;      /* 「乗算」する */
}

解説

本日の主役「mix-blend-mode: multiply;」です。
何度も言いますがmix-blend-modeはIEに非対応です。

https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode#Browser_compatibility

ですがそれさえ無視すれば、乗算にしたい要素にmix-blend-mode: multiply;を記述するだけなので非常に簡単に実装することができます。
mix-blend-modeは他にもさまざまな加工ができるので使ってみてください。

あぁ。IEさえいなければ・・・

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Font Awesome 5以降のバージョンでWebフォントを使用する方法

概要

Font Awesomeを<i class="fa fa-hoge"><i>のようなクラス指定以外での方法で使用する方法について調べたので、
備忘録としてこちらにまとめます。

クラス指定以外での使用方法では、CSS3(またはSCSS)の擬似要素::afterまたはbeforeを用います。

擬似要素を用いてFont Awesomeを使う

まず、Webページ上でFont AwesomeのCSSを読み込ませます。

Rails等でFontAwesomeのGemを導入する手順を実行済みの場合は下記の手順は不要です

FontAwesomeを使用したページのhead内に記述する
<head>
  <title>FontAwesome5の使い方</title>
  <!-- 使用するFontAwesomeのバージョンに合わせ、"release/v5.○.○"/cssの数値を変えてください -->
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  <!-- 以下省略 -->
</head>

これでFont Awesomeが使えるようになりましたので、

サンプルとして、下記のHTMLに擬似クラスでFontAwesomeを使用してみましょう。

サンプルのHTML
<body>
  <p class="sample">サンプルテキスト</p>
</body>
適当なCSSファイル内に記述。sampleクラスのpタグ内に、擬似クラスでFontAwesomeのアイコンを表示させる
p.sample::after {
  content: "\f304"
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

これで、サンプルテキストの文字列直後にペンのFontAwesomeアイコンが表示されるようになるはずです。

その際のポイントは下記の通り。

  • ::after(またはbefore)で対象の要素内を指定する
  • content: "\f○○○"で使いたいアイコンを指定する(アイコンコードはFontAwesome公式サイト参照
    • その際、"\(バックスラッシュ)"をコードの先頭につけること
  • font-familyで"Font Awesome 5 Free"(有料版はFreeではなくPro、BrandsならBrands)と記述
    • ※FontAwesomeのバージョンが5になる以前はfont-family: FontAwesome;の指定だけでOKでした
  • font-weightでアイコンの種類(solidかregularなど)を指定

また、font-weightで指定するアイコンの種類の数値はこちら

  • font-weight: 900; <= Solid
  • font-weight: 400; <= Regular
  • font-weight: 400; <= Brands
  • font-weight: 300; <= Light (Pro)

アイコンではなく四角い枠が表示されてしまう場合

FontAwesomeのCSSかfont-familyまたはアイコンコードの指定が間違っている可能性が考えられます。

記事の内容に間違いがございましたら、コメントの方にてご報告いただけると幸いです

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

レスポンシブ画像のテンプレートを作ろう

はじめに

img レスポンシブというようなワードでimgタグによって出力される画像をレスポンシブ対応させようとしたことはないでしょうか?
いろいろな記事を参考にしてるとどれが正解のコードなのか分からなくなってしまいます。
デザインに正解はないから見た目が整っていればいいんだよという人もいれば、これはHTMLのルールに則っていないからダメだという人もいます。
初学者は何を参考にすればいいのか分からず頭を抱えてしまうので、テンプレートを基にコードを書いて貰えばいいのでは?と思ったので、今回はimgタグのレスポンシブのレンプレートを作ります:innocent:

前置き

以下の知識は知っているものとして話を進めていきます。

  • ブロックレベル要素
  • インライン要素
  • imgタグはインライン要素
  • width
  • max-width

画像をレスポンシブ対応していく

早速レスポンシブ対応にしていきたいところなのですが、imgタグはブロックレベル要素の子要素にして扱うということを知っておいてください。
HTMLの配置ルールではブロックレベル要素の中にインライン要素を配置するという考え方があるのでそれに則り、imgタグはブロックレベル要素の中に配置していきます。

imgタグの親要素は何タグにするべき?

HTMLは文脈を意識してマークアップする必要があるので、その画像がどのような扱われ方をしているかに注目します。
と言われましても。。。という方は少なくないはず。
まずはimgタグの親になるタグを知っておく必要があります。
以下の三種類がimgの親になることが多いです。

  • p
  • figure
  • div どのよう時にpタグ、figureタグ、divタグを使いわかればいいのか次で紹介します。

pタグ

  • imgタグにalt属性がある時
  • 画像がないとその文脈が分からない時

figureタグ

  • 文脈が画像を参照している時

divタグ

  • pタグ、figureタグどちらにも当てはまらない時
  • 見た目だけを整えたい時

テンプレートを作る

style.css
img {
  max-width: 100%;
}

もしくはこちらでも大丈夫です。

style.css
img{
  width: 100%;
}

imgのheightは初期値がautoなので、わざわざheight: auto;を書かなくても大丈夫です。

テンプレートを使用した例

今回は見た目だけ整えたかったのでimgタグの親にはdivタグを用いています。
異なるwidthでもちゃんと比率を保持してくれるようになっています。


See the Pen
responsive-lecture
by Daichi Nabeshima (@nabeshi)
on CodePen.


参考サイト

画像をp要素にするかfigure要素にするか

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

背景色を透過するCSS (opacityとrgba)

はじめに

Railsでオリジナルアプリ制作中、サイドバー部分を実装しました。

sample.html.erb(抜粋)
<div class="side-bar-upper">
 <h2><%= current_user.nickname %></h2>
</div>
sample.css(抜粋)
.side-bar-upper {
  width: 90%;
  height: 50px;
  margin: 5px auto;
  padding: 5px;
  background-color: #fff;
}

sample

サイドバー背景には、個人的にお気に入りのキレイな画像を使用しました。
せっかくなので、重ねた要素は透過して背景画像を生かしたいと思います。

開発環境

Ruby 2.6.5
Rails 6.0.3.4
MySQL
Visual Studio Code
(GoogleChrome)

検証

まず背景の透過といえば…opacityプロパティが挙げられます。

opacity
要素の透明度を指定できます。

.sample {
  /* 透明度50% */
  opacity: 0.5;
}

透明度は0.0~1.0内の小数点で指定します。
(0.5であれば、50%の透過率ということです)

こちらをCSSに反映してみます。

sample.css(抜粋/修正)
.side-bar-upper {
  width: 90%;
  height: 50px;
  margin: 5px auto;
  padding: 5px;
  background-color: #fff;
  opacity: 0.5;
}

sample.opacity

要素の透過が出来ました…が
sampleの文字も薄い…一緒に透過されているのが分かります。

opacityプロパティはその子孫要素にも透明度が適用される点に注意が必要です…!

〜文字はそのまま、背景のみ透過したい!!〜

そんな時は…rgba()を使用します!

rgba
CSS3で追加された、RGBAカラーモデルでカラーと透明度を指定出来る値です。

.sample{
 color: rgba(0, 0, 0, 0.5);
}

ここで注意が必要なのが、rgbaそのものはプロパティではなく、あくまで値ということです。
background-colorbox-shadowなどのカラー指定の出来るプロパティに、値として使用ができます。
そのため、カラーはカラーコードではなく、10進数で指定する必要があります。
各値は、Red, Green, Blue(ここまでがカラー値), alpha(透明度)の順で指定します。
今回使用している#ffffffは、10進数ですと255, 255, 255になります。

それでは、こちらをCSSに反映してみます。

sample.css(抜粋/修正2)
.side-bar-upper {
  width: 90%;
  height: 50px;
  margin: 5px auto;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.5);
}

sample.rgba

文字はそのままで、無事に背景の透過が出来ました!

終わりに

背景色透過のプロパティはアプリ制作で多用すると思い、今回記事にまとめてみました。

初学者で拙い記事ですが、少しでもお役に立てると嬉しく思います。
最後まで読んでいただき、誠にありがとうございました。

参考記事

要素の透明度の指定(opacity)
カラーの透明度の値(rgba, transparent)
【CSS3リファレンス】opacity
【CSS3リファレンス】rgba()
カラーコードの一覧表(色を調べる/色を作る)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

overflow autoについて

overflowとは

CSSのプロパティの1つで、要素のボックスからはみ出た部分をどう扱うかを指定する。

visible:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden :はみ出た部分が隠れる。
scroll :はみ出た部分が隠れてスクロールできる状態になる。
auto :ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。

auto

はみ出た部分の処理をブラウザに委ねることになる。ほとんどの場合はscrollと同じくスクロールに。

<!-- html -->
<p class="menu">あいうえおあいうえおあいうえお</p>

/* css */
.menu {
    width: 50px;
    height: 50px;
    overflow: auto;
    background: rgb(242, 173, 173);
}

スクリーンショット 2020-11-24 9.24.33.png スクリーンショット 2020-11-24 9.25.59.png

参考元はこちら
(https://saruwakakun.com/html-css/basic/overflow)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

overflow scrollについて

overflowとは

CSSのプロパティの1つで、要素のボックスからはみ出た部分をどう扱うかを指定する。

visible:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden :はみ出た部分が隠れる。
scroll :はみ出た部分が隠れてスクロールできる状態になる。
auto :ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。

scroll

はみ出た部分が非表示になるが、スクロールにより表示することができるようになる。

white-space:nowrap;を指定することで、横向きにスクロールできるようにすることも可能。

<!-- html -->
<p class="menu">あいうえおあいうえおあいうえお</p>

/* css */
.menu {
    width: 50px;
    height: 50px;
    overflow: scroll;
    background: rgb(242, 173, 173);
}

スクリーンショット 2020-11-24 9.24.33.png スクリーンショット 2020-11-24 9.25.59.png

参考元はこちら
(https://saruwakakun.com/html-css/basic/overflow)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

overflow hiddenについて

overflowとは

CSSのプロパティの1つで、要素のボックスからはみ出た部分をどう扱うかを指定する。

visible:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden :はみ出た部分が隠れる。
scroll :はみ出た部分が隠れてスクロールできる状態になる。
auto :ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。

hidden

要素のボックスからはみ出てしまった部分を非表示にする。

<!-- html -->
<p class="menu">あいうえおあいうえおあいうえお</p>

/* css */
.menu {
    width: 50px;
    height: 50px;
    overflow: hidden;
    background: rgb(242, 173, 173);
}

スクリーンショット 2020-11-24 9.13.57.png

参考元はこちら
(https://saruwakakun.com/html-css/basic/overflow)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

overflow visibleについて

overflowとは

CSSのプロパティの1つで、要素のボックスからはみ出た部分をどう扱うかを指定する。

visible:初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden :はみ出た部分が隠れる。
scroll :はみ出た部分が隠れてスクロールできる状態になる。
auto :ブラウザにより表示が変わる(基本的にはスクロールできる状態に)。

visible

<!-- html -->
<p class="menu">あいうえおあいうえお</p>

/* css */
.menu {
    width: 50px;
    height: 50px; /*  heightを指定しなければはみ出ない。 */
    overflow: visible; /* visibleは初期値の為、書かれていなくても同じ表示になる。 */
    background: rgb(242, 173, 173);
}

スクリーンショット 2020-11-24 8.59.48.png

white-space: nowrap;

heightを指定せずに、white-space: nowrap;を指定することで、横にはみ出るようになる。
white-space = 行の折り返しを決めるプロパティ
nowrap = 自動的に改行しない
normal = 右端で折り返す

<!-- html -->
<p class="menu">あいうえおあいうえお</p>

/* css */
.menu {
    white-space: nowrap;
    width: 50px;
    overflow: visible; /* visibleは初期値の為、書かれていなくても同じ表示になる。 */
    background: rgb(242, 173, 173);
}

スクリーンショット 2020-11-24 9.11.52.png

参考元はこちら
(https://saruwakakun.com/html-css/basic/overflow)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【HTML・CSS】ゲーミングな文字を作ります

ゲーミングPCが欲しい・・・でも高すぎる・・・そんな風に考えたことはありませんか?
雰囲気だけでもゲーミング感を味わいたい・・・そんな私のために、HTMLとCSSでゲーミング風=虹色に光る文字を作ります。
実用性はあまりないので、ネタとしてご覧ください。

作り方

作り方としては、大きく分けて2段階あります。

  1. 背景を文字で切り抜く
  2. 背景に虹色を適用する

以上の順で、作成していきます。

背景を文字で切り抜く

背景を文字で切り取るには、CSSのbackground-clipを使います。
これは背景を適用する範囲を決めるプロパティです。(参考
使用できる値には以下があります。

  • border-box : 境界の外側の辺まで背景を表示する
  • padding-box : パディングの外側の辺まで背景を表示する
  • content-box : コンテンツのみ背景を表示する
  • text : テキスト部分のみ背景を表示する

このうち、textを使うことで、背景を文字にすることができるようになります。
また、文字の色を透明にすることを忘れないようにしましょう。切り取った背景が文字で見えなくなってしまいます。

style.css
.gaming{
    color: transparent;             /*文字を透明にする*/
    background-clip: text;          /*背景を文字で切り抜く*/
    background-image : hogehoge     /*文字にしたい背景を入れる*/
}

背景に虹色を適用する

背景を虹色にするにはグラデーションを使います。(参考
background-imageプロパティにlinear-gradientを使うことでグラデーションを作ることができます。
ここで注意しないといけないのが、backgroundでも背景をグラデーションにできます。
が、background-clipbackgroundで指定した背景を切り取ることができません。必ずbackground-imageプロパティに指定しましょう。

style.css
.gaming{
    color: transparent;             /*文字を透明にする*/
    background-clip: text;          /*背景を文字で切り抜く*/
    background-image : linear-gradient(45deg,
        red,
        orange,
        yellow,
        green,
        aqua,
        blue,
        purple);
}

これで文字が虹色になりました。
さらにアニメーションをつけてゲーミング感をアップさせます。
animationプロパティで、アニメーションをつけることができます。
詳細はこちらを参照してください。
下の例では、4秒で左右に無限回往復移動するアニメーションになっています。

style.css
.gaming{
    font-size: 36px;
    color: transparent;             /*文字を透明にする*/
    background-clip: text;          /*背景を文字で切り抜く*/
    background-image: linear-gradient(45deg,
        red,
        orange,
        yellow,
        green,
        aqua,
        blue,
        purple);
    background-size: 1200%; 
    animation: 4s linear 0s infinite alternate slide;    /* slideアニメーションを4秒で往復の線形移動を無限回行う */
}

@keyframes slide { 
    from { background-position: 0% 0%; } 
    to { background-position: 100% 0%; }    /* 右から左へ移動するアニメーション */
}

これで、gamingクラスを適用した箇所が、色が変わりながら光る文字ようになります。
ぜひ試してみてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ドラッグで移動できるdialogタグをざっくりと作る

<dialog>タグとは

<dialog>: ダイアログ要素 - MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

まともに動くのはChromeとChromeベースのEdgeだけですね。
使いどころが難しいですが、社内システムとかで使う分には良いかなーって感じですね。

まずはダイアログを表示するコード

<dialog id="dialog">
  <h1>hello</h1>
</dialog>
<button id="show">show</button>

<script>
const showBtn = document.querySelector('#show');
const dlg = document.querySelector('#dialog');

showBtn.addEventListener('click', () => {
  dlg.showModal()
});
</script>

dialog要素はデフォルト非表示になります。
画面にはshowボタンしか表示されてませんね。

FireShot Capture 020 - Document - wsl.main.com.png

FireShot Capture 023 - Document - wsl.main.com.png

dialog要素はjsと共に使用され、dialog要素.showModal()で表示できます。

モーダルの枠線とかはデフォルトです。
モーダルの背景が若干灰色になってますね。
次はスタイルをいじってみましょう。

スタイルをいじる

<style>
/* モーダル */
dialog {
  border: none;
  border-radius: 10px;
}

/* モーダルの背景 */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

FireShot Capture 026 - Document - wsl.main.com.png

枠線を消して、角丸を入れてみました。
dialog::backdropはモーダルの背景の疑似要素です。半透明の黒を設定してみました。

ドラッグできるようにする

<style>
/* モーダル */
dialog {
  border: none;
  border-radius: 10px;
}

/* モーダルの背景 */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* モーダル内のテキストとかを選択不可にする */
dialog * {
  user-select: none;
}
</style>
<dialog id="dialog" draggable="true">
  <h1>hello</h1>
</dialog>
<button id="show">show</button>
<script>
const showBtn = document.querySelector('#show');
const dlg = document.querySelector('#dialog');

showBtn.addEventListener('click', () => {
  dlg.showModal()
});

/**
 * モーダルのどこをつかんで移動を開始したか保存する用
 */
let mouse = {
  x: 0,
  y: 0,
};

/**
 * モーダルのどこをつかんで移動を開始したか保存する
 * ドラッグ時についてくる半透明の要素を空のdivにして消す
 */
dlg.addEventListener('dragstart', evt => {
  mouse.y = dlg.offsetTop-evt.pageY;
  mouse.x = dlg.offsetLeft-evt.pageX;
  evt.dataTransfer.setDragImage(document.createElement('div'), 0, 0);
});

/**
 * ドラッグ時の座標を
 */
dlg.addEventListener('drag', evt => {
  if (evt.x === 0 && evt.y === 0) return;
  const top = evt.pageY + mouse.y;
  const left = evt.pageX + mouse.x;
  const right = window.outerWidth - evt.pageX;
  dlg.style.top = top + 'px';
  dlg.style.left = left + 'px';
  dlg.style.right = right + 'px';
});

/**
 * モーダルのどこをつかんで移動を開始したかをリセットする
 */
dlg.addEventListener('dragend', evt => {
  mouse = {
    x: 0,
    y: 0,
  };
});
</script>

FireShot Capture 029 - Document - wsl.main.com.png

こんな感じで移動できます。
ドラッグ開始したマウスの位置を設定しないと、マウスの位置がモーダルの左上となります。

また、dialog要素はデフォルトで

dialog {
  left: 0;
  right: 0;
  position: absolute;
  ...他
}

が入ってるのでleftとrightの両方を設定します。

evt.dataTransfer.setDragImage(document.createElement('div'), 0, 0);は無くても良いですが、半透明の要素がくっついてきます。

おしまい

ライブラリも何もなしにモーダル表示できるのは楽ですね。
ちなみにdialog要素form要素を内包して使うことが多いです。

<dialog>
  <form method="dialog">
    <button value="ok">OK</button>
  </form>
</dialog>
<script>
document.querySelector('dialog').addEventListener('close', () => {
  console.log(
    document.querySelector('dialog').returnValue
  );
});
</script>

method="dialog"を設定してsubmitするとモーダルが非表示になります。
OKのボタンが押されるとokという文字列をjsで受け取ることもできます。

皆さんも使ってみてはいかがでしょうか?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

text-overflow: ellipsis を使うのに width を指定したくない

やりたいこと

パンくずリストの構造化データで
- 枠で囲んでいる中のテキストが長いときは三点リーダーをつけたい
- 枠の長さを可変にしたい(widthを指定したくない)
- 短いときはそのまま表示したい

スクリーンショット 2020-11-23 23.38.29.png

実装

パンくずリストのhtmlは下記と同じようにしています。(記事内では長くなるのでmicrodataは省略しています。)
パンくずリスト  |  Google 検索セントラル  |  Google Developers

<ol>
  <li><a><span>TOP</span></a></li><li><a><span>Category1</span></a></li><li><a><span>Category2</span></a></li><li><a><span>すごくながいたいとるすごくながいたいとるすごくながいたいとるすごくながいたいとる</span></a></li>
</ol>

cssも一部抜粋です。構造はすごくシンプルでoldisplay: flex;で横並びにしているだけです。

/* 横並びにする */
ol {
  display: flex;
}

/* 最後のliのテキストが長いとき省略する */
li:last-child {
   overflow: hidden;
 }
li:last-child span {
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }

表示はここから確認できます
https://jsfiddle.net/Lb8podhk/

なんでこうなるの?

はっきりと原因がわかってないのですが lioverflow: hidden; が必要なのは下記の記事と同じっぽいです。
flexbox内でtext-overflowが効かない | cly7796.net

対応方法としては、text-overflowの要素が入っている.flex-itemに対して、min-width: 0;を指定するといいようです。
もしくは、.flex-itemにoverflow: hidden;を指定でも対応できます。

span の方は text-overflowoverflow の適用対象がインライン要素ではないっぽいので display: block; などを追加してあげないとダメなのかな?と思っています。

text-overflow - CSS: カスケーディングスタイルシート | MDN

適用対象 ブロックコンテナー要素

overflow - CSS: カスケーディングスタイルシート | MDN

適用対象 ブロックコンテナー, フレックスコンテナー, グリッドコンテナー

余談

すごいニッチな悩みだと思うのですが解消するのに地味に時間かかったので共有です。
こんなんすぐ実装できるやろ〜と思っていたのに時間かかってしまったかなしみと
text-overflow: ellipsis使うときはwidthが指定してあるサンプルが多くてでも欲しいのはそうじゃない…という気持ちで書きました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む