@charset "utf-8";

/***********************
*
* 汎用クラス
*
*  01.margin
*  02.padding
*  03.width
*  04.float
*  05.display
*  06.text-align
*  07.font-size
*  08.font-weight
*  09.white-space
*  10.text-overflow
*
***********************/


/* 余白の変数
-----------------------*/

$space-xsmall:10px;
$space-small:20px;
$space-normal:30px;
$space-large:60px;
$space-xlarge:100px;


/* 01.margin
-----------------------*/

.m-none{margin:0}
.m-xsmall{margin:$space-xsmall}
.m-small{margin:$space-small}
.m{margin:$space-normal}
.m-large{margin:$space-large}
.m-xlarge{margin:$space-xlarge}

.mt-none{margin-top:0}
.mt-xsmall{margin-top:$space-xsmall}
.mt-small{margin-top:$space-small}
.mt{margin-top:$space-normal}
.mt-large{margin-top:$space-large}
.mt-xlarge{margin-top:$space-xlarge}

.mr-none{margin-right:0}
.mr-xsmall{margin-right:$space-xsmall}
.mr-small{margin-right:$space-small}
.mr{margin-right:$space-normal}
.mr-large{margin-right:$space-large}
.mr-xlarge{margin-right:$space-xlarge}

.mb-none{margin-bottom:0}
.mb-xsmall{margin-bottom:$space-xsmall}
.mb-small{margin-bottom:$space-small}
.mb{margin-bottom:$space-normal}
.mb-large{margin-bottom:$space-large}
.mb-xlarge{margin-bottom:$space-xlarge}

.ml-none{margin-left:0}
.ml-xsmall{margin-left:$space-xsmall}
.ml-small{margin-left:$space-small}
.ml{margin-left:$space-normal}
.ml-large{margin-left:$space-large}
.ml-xlarge{margin-left:$space-xlarge}


/* 02.padding
-----------------------*/

.p-none{padding:0}
.p-xsmall{padding:$space-xsmall}
.p-small{padding:$space-small}
.p{padding:$space-normal}
.p-large{padding:$space-large}
.p-xlarge{padding:$space-xlarge}

.pt-none{padding-top:0}
.pt-xsmall{padding-top:$space-xsmall}
.pt-small{padding-top:$space-small}
.pt{padding-top:$space-normal}
.pt-large{padding-top:$space-large}
.pt-xlarge{padding-top:$space-xlarge}

.pr-none{padding-right:0}
.pr-xsmall{padding-right:$space-xsmall}
.pr-small{padding-right:$space-small}
.pr{padding-right:$space-normal}
.pr-large{padding-right:$space-large}
.pr-xlarge{padding-right:$space-xlarge}

.pb-none{padding-bottom:0}
.pb-xsmall{padding-bottom:$space-xsmall}
.pb-small{padding-bottom:$space-small}
.pb{padding-bottom:$space-normal}
.pb-large{padding-bottom:$space-large}
.pb-xlarge{padding-bottom:$space-xlarge}

.pl-none{padding-left:0}
.pl-xsmall{padding-left:$space-xsmall}
.pl-small{padding-left:$space-small}
.pl{padding-left:$space-normal}
.pl-large{padding-left:$space-large}
.pl-xlarge{padding-left:$space-xlarge}


/* 03.width
-----------------------*/

.w-100p{width:100%}
.w-50p{width:50%}
.w-33p{width:33%}
.w-25p{width:25%}
.w-20p{width:20%}
.w-auto{width:auto}


/* 04.float
-----------------------*/

.float-l{float:left!important}
.float-r{float:right!important}
.clear-l{clear:left!important}
.clear-r{clear:right!important}
.clear-b{clear:both!important}
.clearfix{@include clearfix}


/* 05.display
-----------------------*/

.display-block{display:block!important}
.display-inline-block{display:inline-block!important}
.display-inline{display:inline!important}
.display-table{display:table!important}
.display-table-cell{display:table-cell!important}


/* 06.text-align
-----------------------*/

.text-l{text-align:left!important}
.text-r{text-align:right!important}
.text-c{text-align:center!important}
.text-t{vertical-align:top!important}
.text-m{vertical-align:middle!important}
.text-b{vertical-align:bottom!important}


/* 07.font-size
-----------------------*/

.font-xsmall{font-size:.6rem!important}
.font-small{font-size:.8rem!important}
.font-normal{font-size:1rem!important}
.font-large{font-size:1.5rem!important}
.font-xlarge{font-size:2rem!important}

/* 08.font-weight
-----------------------*/

.font-weight-n{font-weight:normal!important}
.font-weight-b{font-weight:bold!important}


/* 09.white-space
-----------------------*/

.white-space-nowrap{white-space:nowrap!important}
.white-space-normal{white-space:normal!important}


/* 10.text-overflow
-----------------------*/

.text-overflow-ellipsis{text-overflow:ellipsis!important}
.text-overflow-clip{text-overflow:clip!important}