/*------------------------------
theme name: base
version: 201010
author: yamabatosha
author uri: https://yamabatosha.com
------------------------------*/

/*------------------------------
base
------------------------------*/

* {outline: none;}
html {overflow-x: hidden;}
.left {text-align: left!important;}
.right {text-align: right!important;}
.center {text-align: center!important;}
.fleft {float: left;}
.fright {float: right;}
.fcenter {display: block; margin: 0 auto;}
.top {vertical-align: top;}
.middle {vertical-align: middle;}
.bottom {vertical-align: bottom;}
.z1 {z-index: 1;}
.clear {clear: both;}
.clearfix {overflow: hidden;}
/*.clearfix::after {clear: both; content: ''; display: block;}*/
.border {border: 0; border-bottom: 1px solid;}
.solid {border: 0; border-bottom: 1px solid;}
.dashed {border: 0; border-bottom: 1px dashed;}
.dotted {border: 0; border-bottom: 1px dotted;}
.nowrap {white-space: nowrap;}
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}
.block {display: block;}
.inline {display: inline;}
.inline-block {display: inline-block;}
ol, ul {margin: 0; padding: 0;}

/*------------------------------
font
------------------------------*/

.fs10 {font-size: 10px!important;}
.fs11 {font-size: 11px!important;}
.fs12 {font-size: 12px!important;}
.fs13 {font-size: 13px!important;}
.fs14 {font-size: 14px!important;}
.fs15 {font-size: 15px!important;}
.fs16 {font-size: 16px!important;}
.fs17 {font-size: 17px!important;}
.fs18 {font-size: 18px!important;}
.fs19 {font-size: 19px!important;}
.fs20 {font-size: 20px!important;}
.fs21 {font-size: 21px!important;}
.fs22 {font-size: 22px!important;}
.fs23 {font-size: 23px!important;}
.fs24 {font-size: 24px!important;}
.fs25 {font-size: 25px!important;}
.fs26 {font-size: 26px!important;}
.fs27 {font-size: 27px!important;}
.fs28 {font-size: 28px!important;}
.fs29 {font-size: 29px!important;}
.fs30 {font-size: 30px!important;}
.fs32 {font-size: 32px!important;}
.fs34 {font-size: 34px!important;}
.fs36 {font-size: 36px!important;}
.fs38 {font-size: 38px!important;}
.fs40 {font-size: 40px!important;}
.fs50 {font-size: 50px!important;}
.fs60 {font-size: 60px!important;}

.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.normal {font-weight: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.sm {font-size: 0.95em;}
.lg {font-size: 1.15em;}
.indent {padding-left: 1.1em; text-indent: -1.1em;}
.lh10 {line-height: 1!important;}
.lh15 {line-height: 1.5!important;}
.lh2 {line-height: 2!important;}
.ls0 {letter-spacing: 0!important;}
.ls05 {letter-spacing: .05em!important;}
.ls1 {letter-spacing: .1em!important;}
.ls15 {letter-spacing: .15em!important;}
.ls2 {letter-spacing: .2em!important;}
.black, a.black {color: #333!important;}
.gray, a.gray {color: #999!important;}
.white, a.white {color: #fff!important;}
.red, a.red {color: #f00!important;}

/*------------------------------
adjustment
------------------------------*/

.m0 {margin-top: 0!important; margin-bottom: 0!important;}
.m10 {margin-top: 10px!important; margin-bottom: 10px!important;}
.m15 {margin-top: 15px!important; margin-bottom: 15px!important;}
.m20 {margin-top: 20px!important; margin-bottom: 20px!important;}
.m30 {margin-top: 30px!important; margin-bottom: 30px!important;}
.m40 {margin-top: 40px!important; margin-bottom: 40px!important;}
.m50 {margin-top: 50px!important; margin-bottom: 50px!important;}
.m60 {margin-top: 60px!important; margin-bottom: 60px!important;}
.m70 {margin-top: 70px!important; margin-bottom: 70px!important;}
.m80 {margin-top: 80px!important; margin-bottom: 80px!important;}
.m90 {margin-top: 90px!important; margin-bottom: 90px!important;}
.m100 {margin-top: 100px!important; margin-bottom: 100px!important;}
.m110 {margin-top: 110px!important; margin-bottom: 110px!important;}
.m120 {margin-top: 120px!important; margin-bottom: 120px!important;}
.m130 {margin-top: 130px!important; margin-bottom: 130px!important;}
.m140 {margin-top: 140px!important; margin-bottom: 140px!important;}
.m150 {margin-top: 150px!important; margin-bottom: 150px!important;}
.m160 {margin-top: 160px!important; margin-bottom: 160px!important;}
.m170 {margin-top: 170px!important; margin-bottom: 170px!important;}
.m180 {margin-top: 180px!important; margin-bottom: 180px!important;}
.m190 {margin-top: 190px!important; margin-bottom: 190px!important;}
.m200 {margin-top: 200px!important; margin-bottom: 200px!important;}

.mt0 {margin-top: 0!important;}
.mt10 {margin-top: 10px!important;}
.mt15 {margin-top: 15px!important;}
.mt20 {margin-top: 20px!important;}
.mt30 {margin-top: 30px!important;}
.mt40 {margin-top: 40px!important;}
.mt50 {margin-top: 50px!important;}
.mt60 {margin-top: 60px!important;}
.mt70 {margin-top: 70px!important;}
.mt80 {margin-top: 80px!important;}
.mt90 {margin-top: 90px!important;}
.mt100 {margin-top: 100px!important;}
.mt110 {margin-top: 110px!important;}
.mt120 {margin-top: 120px!important;}
.mt130 {margin-top: 130px!important;}
.mt140 {margin-top: 140px!important;}
.mt150 {margin-top: 150px!important;}
.mt160 {margin-top: 160px!important;}
.mt170 {margin-top: 170px!important;}
.mt180 {margin-top: 180px!important;}
.mt190 {margin-top: 190px!important;}
.mt200 {margin-top: 200px!important;}

.mt-10 {margin-top: -10px!important;}
.mt-15 {margin-top: -15px!important;}
.mt-20 {margin-top: -20px!important;}
.mt-30 {margin-top: -30px!important;}
.mt-40 {margin-top: -40px!important;}
.mt-50 {margin-top: -50px!important;}
.mt-60 {margin-top: -60px!important;}

.p0 {padding-top: 0!important; padding-bottom: 0!important;}
.p10 {padding-top: 10px!important; padding-bottom: 10px!important;}
.p15 {padding-top: 15px!important; padding-bottom: 15px!important;}
.p20 {padding-top: 20px!important; padding-bottom: 20px!important;}
.p30 {padding-top: 30px!important; padding-bottom: 30px!important;}
.p40 {padding-top: 40px!important; padding-bottom: 40px!important;}
.p50 {padding-top: 50px!important; padding-bottom: 50px!important;}
.p60 {padding-top: 60px!important; padding-bottom: 60px!important;}
.p70 {padding-top: 70px!important; padding-bottom: 70px!important;}
.p80 {padding-top: 80px!important; padding-bottom: 80px!important;}
.p90 {padding-top: 90px!important; padding-bottom: 90px!important;}
.p100 {padding-top: 100px!important; padding-bottom: 100px!important;}
.p110 {padding-top: 110px!important; padding-bottom: 110px!important;}
.p120 {padding-top: 120px!important; padding-bottom: 120px!important;}
.p130 {padding-top: 130px!important; padding-bottom: 130px!important;}
.p140 {padding-top: 140px!important; padding-bottom: 140px!important;}
.p150 {padding-top: 150px!important; padding-bottom: 150px!important;}
.p160 {padding-top: 160px!important; padding-bottom: 160px!important;}
.p170 {padding-top: 170px!important; padding-bottom: 170px!important;}
.p180 {padding-top: 180px!important; padding-bottom: 180px!important;}
.p190 {padding-top: 190px!important; padding-bottom: 190px!important;}
.p200 {padding-top: 200px!important; padding-bottom: 200px!important;}

.pt0 {padding-top: 0px!important;}
.pt10 {padding-top: 10px!important;}
.pt15 {padding-top: 15px!important;}
.pt20 {padding-top: 20px!important;}
.pt30 {padding-top: 30px!important;}
.pt40 {padding-top: 40px!important;}
.pt50 {padding-top: 50px!important;}
.pt60 {padding-top: 60px!important;}
.pt70 {padding-top: 70px!important;}
.pt80 {padding-top: 80px!important;}
.pt90 {padding-top: 90px!important;}
.pt100 {padding-top: 100px!important;}
.pt110 {padding-top: 110px!important;}
.pt120 {padding-top: 120px!important;}
.pt130 {padding-top: 130px!important;}
.pt140 {padding-top: 140px!important;}
.pt150 {padding-top: 150px!important;}
.pt160 {padding-top: 160px!important;}
.pt170 {padding-top: 170px!important;}
.pt180 {padding-top: 180px!important;}
.pt190 {padding-top: 190px!important;}
.pt200 {padding-top: 200px!important;}

/*------------------------------
size
------------------------------*/

.w10 {width: 10%; height: auto;}
.w20 {width: 20%; height: auto;}
.w25 {width: 25%; height: auto;}
.w30 {width: 30%; height: auto;}
.w33 {width: 33.3333%; height: auto;}
.w40 {width: 40%; height: auto;}
.w50 {width: 50%; height: auto;}
.w60 {width: 60%; height: auto;}
.w66 {width: 66.6666%; height: auto;}
.w70 {width: 70%; height: auto;}
.w75 {width: 75%; height: auto;}
.w80 {width: 80%; height: auto;}
.w90 {width: 90%; height: auto;}
.w100 {width: 100%; height: auto;}

/*------------------------------
grid
------------------------------*/

.col-center, .col-1, .col-2, .col-3, .col-4, .col-1-2, .col-2-1 {
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 30px;
    margin-top: 60px;
    align-items: start;
}

.col-3, .col-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px 20px;
    margin-top: 60px;
}

.gap-0 {grid-gap: 0; margin-top: 60px;}
.gap-10 {grid-gap: 10px; margin-top: 60px;}

/* min-width 768px
------------------------------*/

@media (min-width: 768px) {
    .col-center {
        grid-template-columns: 708px;
        justify-content: center;
    }
    .col-2 {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 120px;
        margin-top: 90px;
    }
    .col-3, .col-4 {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40px 40px;
        margin-top: 90px;
    }
    .col-1-2 {
        grid-template-columns: 1fr 2fr;
        grid-gap: 60px 120px;
        margin-top: 90px;
    }
    .col-2-1 {
        grid-template-columns: 4fr 1fr;
        grid-gap: 60px 120px;
        margin-top: 90px;
    }
    .order-1 {order: 1;}
    .order-2 {order: 2;}
    .order-3 {order: 3;}
    .order-4 {order: 4;}
    .ml-200 {margin: 0 0 0 -200px; z-index: -1}
    .mr-200 {margin: 0 -200px 0 0;}
}

/* min-width 992px
------------------------------*/

@media (min-width: 992px) {
    .col-2 {grid-template-columns: repeat(2, 1fr);}
    .col-3 {grid-template-columns: repeat(3, 1fr);}
    .col-4 {grid-template-columns: repeat(4, 1fr);}
}

/*arrow-right
------------------------------*/

.arrow-right {
    position: relative;
    padding-right: 10px;
    transition: .15s;
}

.arrow-right::after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 0;
    margin-top: -5px;
}

/*arrow-left
------------------------------*/

.arrow-left {
    position: relative;
    padding-right: 10px;
    transition: .15s;
}

.arrow-left::after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    top: 50%;
    right: 0;
    margin-top: -5px;
}