/*------------------------------
theme name: common css
version: 171219
author: yamabatosha
author uri: http://yamabatosha.com
------------------------------*/

html {outline: none;}
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.f-left {float: left;}
.f-right {float: right;}
.f-center {display: block; margin: 0 auto;}
.block {display: block;}
.clear {clear: both;}
ul {margin: 0; padding: 0;}


/*------------------------------
font
------------------------------*/
.fs10 {font-size: 10px}
.fs11 {font-size: 11px}
.fs12 {font-size: 12px}
.fs13 {font-size: 13px}
.fs14 {font-size: 14px}
.fs15 {font-size: 15px}
.fs16 {font-size: 16px}
.fs17 {font-size: 17px}
.fs18 {font-size: 18px}
.fs19 {font-size: 19px}
.fs20 {font-size: 20px}
.fw400 {font-weight: 400}
.fw700 {font-weight: 700}
.small {font-size: 0.875em;}
.large {font-size: 1.125em;}
.normal {font-weight: normal; font-style: normal;}
.bold {font-weight: bold}
.italic {font-style: italic}
.indent {padding-left: 1.1em; text-indent: -1.1em;}

/*------------------------------
margin
------------------------------*/
.m1 {margin-top: 1.5em; margin-bottom: 1.5em;}
.m2 {margin-top: 3em; margin-bottom: 3em;}
.m3 {margin-top: 4.5em; margin-bottom: 4.5em;}
.m4 {margin-top: 6em; margin-bottom: 6em;}
.m5 {margin-top: 7.5em; margin-bottom: 7.5em;}

.mt1 {margin-top: 1.5em}
.mt2 {margin-top: 3em}
.mt3 {margin-top: 4.5em}
.mt4 {margin-top: 6em}
.mt5 {margin-top: 7.5em}

.mb1 {margin-bottom: 1.5em}
.mb2 {margin-bottom: 3em}
.mb3 {margin-bottom: 4.5em}
.mb4 {margin-bottom: 6em}
.mb5 {margin-bottom: 7.5em}

.m0 {margin-top: 0; margin-bottom: 0;}
.m10 {margin-top: 10px; margin-bottom: 10px;}
.m20 {margin-top: 20px; margin-bottom: 20px;}
.m30 {margin-top: 30px; margin-bottom: 30px;}
.m40 {margin-top: 40px; margin-bottom: 40px;}
.m50 {margin-top: 50px; margin-bottom: 50px;}
.m60 {margin-top: 60px; margin-bottom: 60px;}
.m70 {margin-top: 70px; margin-bottom: 70px;}
.m80 {margin-top: 80px; margin-bottom: 80px;}
.m90 {margin-top: 90px; margin-bottom: 90px;}
.m100 {margin-top: 100px; margin-bottom: 100px;}

.mt0 {margin-top: 0}
.mt10 {margin-top: 10px}
.mt20 {margin-top: 20px}
.mt30 {margin-top: 30px}
.mt40 {margin-top: 40px}
.mt50 {margin-top: 50px}
.mt60 {margin-top: 60px}
.mt70 {margin-top: 70px}
.mt80 {margin-top: 80px}
.mt90 {margin-top: 90px}
.mt100 {margin-top: 100px}

.mb0 {margin-bottom: 0}
.mb10 {margin-bottom: 10px}
.mb20 {margin-bottom: 20px}
.mb30 {margin-bottom: 30px}
.mb40 {margin-bottom: 40px}
.mb50 {margin-bottom: 50px}
.mb60 {margin-bottom: 60px}
.mb70 {margin-bottom: 70px}
.mb80 {margin-bottom: 80px}
.mb90 {margin-bottom: 90px}
.mb100 {margin-bottom: 100px}

/*------------------------------
padding
------------------------------*/
.p1 {padding-top: 1.5em; padding-bottom: 1.5em;}
.p2 {padding-top: 3em; padding-bottom: 3em;}
.p3 {padding-top: 4.5em; padding-bottom: 4.5em;}
.p4 {padding-top: 6em; padding-bottom: 6em;}
.p5 {padding-top: 7.5em; padding-bottom: 7.5em;}

.pt1 {padding-top: 1.5em}
.pt2 {padding-top: 3em}
.pt3 {padding-top: 4.5em}
.pt4 {padding-top: 6em}
.pt5 {padding-top: 7.5em}

.pb1 {padding-bottom: 1.5em}
.pb2 {padding-bottom: 3em}
.pb3 {padding-bottom: 4.5em}
.pb4 {padding-bottom: 6em}
.pb5 {padding-bottom: 7.5em}

.p0 {padding-top: 0; padding-bottom: 0;}
.p10 {padding-top: 10px; padding-bottom: 10px;}
.p20 {padding-top: 20px; padding-bottom: 20px;}
.p30 {padding-top: 30px; padding-bottom: 30px;}
.p40 {padding-top: 40px; padding-bottom: 40px;}
.p50 {padding-top: 50px; padding-bottom: 50px;}
.p60 {padding-top: 60px; padding-bottom: 60px;}
.p70 {padding-top: 70px; padding-bottom: 70px;}
.p80 {padding-top: 80px; padding-bottom: 80px;}
.p90 {padding-top: 90px; padding-bottom: 90px;}
.p100 {padding-top: 100px; padding-bottom: 100px;}

.pt0 {padding-top: 0px}
.pt10 {padding-top: 10px}
.pt20 {padding-top: 20px}
.pt30 {padding-top: 30px}
.pt40 {padding-top: 40px}
.pt50 {padding-top: 50px}
.pt60 {padding-top: 60px}
.pt70 {padding-top: 70px}
.pt80 {padding-top: 80px}
.pt90 {padding-top: 90px}
.pt100 {padding-top: 100px}

.pb0 {padding-bottom: 0px}
.pb10 {padding-bottom: 10px}
.pb20 {padding-bottom: 20px}
.pb30 {padding-bottom: 30px}
.pb40 {padding-bottom: 40px}
.pb50 {padding-bottom: 50px}
.pb60 {padding-bottom: 60px}
.pb70 {padding-bottom: 70px}
.pb80 {padding-bottom: 80px}
.pb90 {padding-bottom: 90px}
.pb100 {padding-bottom: 100px}

.w10 {width: 10%}
.w20 {width: 20%}
.w30 {width: 30%}
.w40 {width: 40%}
.w50 {width: 50%}
.w60 {width: 60%}
.w70 {width: 70%}
.w80 {width: 80%}
.w90 {width: 90%}
.w100 {width: 100%}

.w25 {width: 25%}
.w33 {width: 33.3333%}
.w75 {width: 75%}

/*------------------------------
icons
------------------------------*/
.arrow-left, .arrow-right, .arrow-up {
    position: relative;
    display: inline-block;
    padding: 0 0 0 15px;
    margin: 0 5px;
    vertical-align: middle;
    text-decoration: none;
}

.arrow-left::before, .arrow-left::after,
.arrow-right::before, .arrow-right::after,
.arrow-up::before, .arrow-up::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrow-left::before,
.arrow-right::before,
.arrow-up::before {
    width: 15px;
    height: 15px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}

.arrow-left::before {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.arrow-right::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.arrow-up::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}