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

* {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}
.fs30 {font-size: 30px}
.fs40 {font-size: 40px}
.fs50 {font-size: 50px}
.fs60 {font-size: 60px}
.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;}
.lh1 {line-height: 1}
.lh2 {line-height: 2}
.fa-lg {line-height: 0.2}

/*------------------------------
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;}
.m6 {margin-top: 9em; margin-bottom: 9em;}

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

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

.m0 {margin-top: 0; margin-bottom: 0;}
.mx0 {margin-left: 0; margin-right: 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!important}
.mt10 {margin-top: 10px}
.mt15 {margin-top: 15px}
.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}
.mb15 {margin-bottom: 15px}
.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;}
.p6 {padding-top: 9em; padding-bottom: 9em;}

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

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

.p0 {padding-top: 0; padding-bottom: 0;}
.px0 {padding-left: 0; padding-right: 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: 0!important}
.pt10 {padding-top: 10px}
.pt15 {padding-top: 15px}
.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}
.pb15 {padding-bottom: 15px}
.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%}


/*------------------------------
grid [max-width=ie11]
------------------------------*/
.grid {display: flex; flex-wrap: wrap;}
.grid-f, .grid-20, .grid-25, .grid-30, .grid-33, .grid-40,
.grid-50, .grid-60, .grid-66, .grid-70, .grid-80, .grid-100 {flex: 0 0 100%; max-width: 100%; padding: 0 0 30px 0;}
.grid-top {align-items: flex-start;}
.grid-middle {align-items: center;}
.grid-bottom {align-items: flex-end;}
.grid-left {justify-content: flex-start;}
.grid-center {justify-content: center;}
.grid-right {justify-content: flex-end;}

/* @768px
------------------------------*/
@media (min-width: 768px) {
    .grid {margin: -30px -15px 30px -15px;}    
    .grid-f, .grid-20, .grid-25, .grid-30, .grid-33, .grid-40,
    .grid-50, .grid-60, .grid-66, .grid-70, .grid-80, .grid-100 {padding: 30px 15px 0 15px;}
    .grid-f {flex: 1;}
    .grid-20 {flex: 0 0 20%; max-width: 20%;}
    .grid-25 {flex: 0 0 25%; max-width: 25%;}
    .grid-30 {flex: 0 0 30%; max-width: 30%;}
    .grid-33 {flex: 0 0 33.3333%; max-width: 33.3333%;}
    .grid-40 {flex: 0 0 40%; max-width: 40%;}
    .grid-50 {flex: 0 0 50%; max-width: 50%;}
    .grid-60 {flex: 0 0 60%; max-width: 60%;}
    .grid-66 {flex: 0 0 66.6666%; max-width: 66.6666%;}
    .grid-70 {flex: 0 0 70%; max-width: 70%;}
    .grid-80 {flex: 0 0 80%; max-width: 80%;}
    .grid-100 {flex: 0 0 100%; max-width: 100%;}
}

/* @992px
------------------------------*/
@media (min-width: 992px) {
    .grid {margin: -60px -30px 60px -30px;}
    .grid-f, .grid-20, .grid-25, .grid-30, .grid-33, .grid-40,
    .grid-50, .grid-60, .grid-66, .grid-70, .grid-80, .grid-100 {padding: 60px 30px 0 30px;}
}


/*------------------------------
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);
}

/*------------------------------
balloon
------------------------------*/

/* balloon-100
------------------------------*/
.balloon-100 {
    position: relative;
    display: inline-block;
    padding: 15px 25px;
    width: 100%;
    line-height: 2;
    text-align: center;
    background: #f1f1f1;
    z-index: 0;
}

/* balloon-bottom-100
------------------------------*/
.balloon-bottom-100 {
    position: relative;
    display: inline-block;
    padding: 15px 25px;
    width: 100%;
    line-height: 2;
    text-align: center;
    background: #f1f1f1;
    z-index: 0;
}

.balloon-bottom-100:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #f1f1f1 transparent transparent transparent;
}

/* balloon-bottom
------------------------------*/
.balloon-bottom {
    position: relative;
    display: inline-block;
    padding: 1em 2em;
    width: auto;
    line-height: 2;
    text-align: center;
    background: #f1f1f1;
    z-index: 0;
}

.balloon-bottom:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #f1f1f1 transparent transparent transparent;
}

/* balloon-top
------------------------------*/
.balloon-top {
    position: relative;
    display: inline-block;
    padding: 1em 2em;
    width: auto;
    line-height: 2;
    text-align: center;
    background: #f1f1f1;
    z-index: 0;
}

.balloon-top:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #f1f1f1 transparent;
}

/* balloon-left
------------------------------*/
.balloon-left {
    position: relative;
    display: inline-block;
    padding: 1em 2em;
    width: auto;
    line-height: 2;
    text-align: left;
    background: #f1f1f1;
    z-index: 0;
}

.balloon-left:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #f1f1f1 transparent transparent;
}

/* balloon-right
------------------------------*/
.balloon-right {
    position: relative;
    display: inline-block;
    padding: 1em 2em;
    width: auto;
    line-height: 2;
    text-align: left;
    background: #f1f1f1;
    z-index: 0;
}

.balloon-right:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #f1f1f1;
}