@charset "UTF-8";
/*----------------------------------------------------
☆Uniq vision=future.html work=work.html location=location.html
----------------------------------------------------*/

#contents {
    background-color: #4bb936;
    width: 100%;
}

#contents .contentsInr {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 4%;
}

.vision,
.work,
.location {
    position: relative;
}

.vision:before {
    content: '';/ display: block;
    width: 200px;
    height: 150px;
    background-image: url(../../images/mdl_future_02.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 69%;
    left: 3%;
}

.work:before {
    content: '';/ display: block;
    width: 420px;
    height: 360px;
    background-image: url(../../images/modal_work.before.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 33%;
    left: 4%;

}

.vision:after {
    content: '';/ display: block;
    width: 262px;
    height: 148px;
    background-image: url(../../images/mdl_future_01.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 45%;
    right: 3%;
    bottom: 0;

}

.work:after {
    content: '';/ display: block;
    width: 420px;
    height: 360px;
    background-image: url(../../images/modal_work_after.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 36%;
    right: -26%;
    bottom: 0;

}


.location h2:after {
    content: '';/ display: block;
    width: 200px;
    height: 150px;
    background-image: url(../images/modal_loca_01.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 24%;
    right: 4%;
    bottom: 0;

}

.vision .txtBox,
.work .txtBox {
    margin-top: 8%;
}

.location {
    margin-bottom: 5%;
}

.vision h2,
.work h2,
.location h2 {
    color: #fff;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
}

.vision .subTitle,
.work .subTitle,
.location .subTitle {
    color: #fff;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    position: relative;
}

.vision .subTitle:after,
.work .subTitle:after,
.location .subTitle:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #fff;
    top: 50px;
    width: 100%;
}

.vision .center,
.work .center,
.location .center {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: bold;
    color: #fff;
    margin-top: 5%;
    line-height: 231%;
}

.vision .center .highlight,
.work .center .highlight {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 18px;
    background: linear-gradient(transparent 70%, #8ced7a 0%);
}

.shoplist {
    width: 1000px;
    margin: 0 auto;
}

.shoplist ul li {
    float: left;
    width: calc(97%/2);
    margin: 0 auto;
    text-align: center;
    margin-right: 3%;
    margin-bottom: 9%;
}

.shoplist ul li:nth-child(2) {
    margin-right: 0;
}


.shoplist ul li .shop {

    padding: 45px 20px 40px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .4);
    position: relative;
}

.shoplist ul li .shop h2 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: bold;
    color: #4bb936;
    font-size: 16px;
    background-color: #fff;
    border-radius: 35px;
    width: 75%;
    margin: 0 auto;
    padding: 5px 0;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);

}


.shoplist ul li .shop .btnTxt {
    display: inline-block;
    /*    background-color: #152c12;*/
    text-align: center;
    width: 180px;
    /*
    border-radius: 20px;
    margin-right: 10px;
*/
}

.shoplist ul li .shop .rightMargin {
    margin-right: 0px;
}

.shoplist ul li .shop .btnTxt a {
    text-decoration: none;
}

.shoplist ul li .shop .btnTxt .smlTxt {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    padding: 15px 0px;
    display: inline-block;
    background-color: #152c12;
    text-align: center;
    width: 180px;
    border-radius: 20px;
    margin-right: 10px;
}

.shoplist ul li .shop .btnTxt .smlTxt .icon-window {
    padding-left: 4%;
}



/*======================================================
tab
=========================================================*/
@media (max-width: 768px) {
    .vision:before {
        display: none;

    }

    .work:before {
        display: none;
    }

    .vision:after {
        display: none;
    }

    .work:after {
        display: none;
    }


    .location h2:after {
        display: none;
    }

    #contents .contentsInr {
        max-width: 768px;
        margin: 0 auto;
        padding-top: 4%;
    }

    .shoplist {
        width: 98%;
        margin: 0 auto;
    }

    .shoplist ul li {
        float: none;
        display: block;
        margin-right: 0%;
        width: 100%;
        margin-top: 15%;
    }

    .shoplist ul li .shop{
        padding: 45px 20px 23px;
    }


    .shoplist ul li .shop .btnTxt {
        display: block;
        width: 100%;
        margin-bottom: 3%;
    }


    .shoplist ul li .shop .btnTxt a {
        text-decoration: none;
    }

}

/*======================================================
sp future
=========================================================*/

@media (min-width: 481px) {
    .br-pc { display:block; }
    .br-sp { display:none; }
}

@media (max-width: 480px) {
    .br-pc { display:none; }
    .br-sp { display:block; }
}

@media (max-width: 480px) {
    #contents .contentsInr {
        max-width: 560px;
        margin: 0 auto;
        padding-top: 4%;
    }
}

@media (max-width: 480px) {
    .vision {
        position: relative;
    }
}


@media (max-width: 480px) {
    .vision:before {
        content: url(../../images/mdl_future_02.png);
        display: none;
    }
}


@media (max-width: 480px) {
    .vision:after {
        content: url(../../images/mdl_future_01.png);
        display: none;
    }
}


@media (min-width:320px) {
    .vision h2 {
        color: #fff;
        font-family: "Noto sans", sans-serif;
        font-size: 35px;
        font-weight: bold;
        text-align: center;
        margin-top: 5%;
    }
}

@media (max-width: 480px) {
    .vision .subTitle {
        color: #fff;
        font-family: "Noto sans", sans-serif;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        position: relative;
    }
}

@media (max-width: 480px) {
    .vision .subTitle:after {
        position: absolute;
        content: " ";
        display: block;
        border-bottom: solid 3px #fff;
        top: 50px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .vision .txtBox {
        margin-top: 20%;
        padding-bottom: 20%;
    }
}

@media (max-width: 480px) {
    .vision .center {
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
        font-weight: bold;
        color: #fff;
        margin-top: 7%;
        line-height: 226%;
        font-size: 11px;
    }
}

/*======================================================
sp work
=========================================================*/

@media (max-width: 480px) {
    #contents .contentsInr {
        max-width: 560px;
        margin: 0 auto;
        padding-top: 4%;
    }
}

@media (max-width: 480px) {
    .work {
        position: relative;
    }
}


@media (max-width: 480px) {
    .work:before {
        content: url(../../images/modal_work.before.png);
        display: none;
    }
}


@media (max-width: 480px) {
    .work:after {
        content: url(../../images//modal_work_after.png);
        display: none;
    }
}



@media (min-width:320px) {
    .work h2 {
        color: #fff;
        font-family: "Noto sans", sans-serif;
        font-size: 35px;
        font-weight: bold;
        text-align: center;
        margin-top: 5%;
    }
}

@media (max-width: 480px) {
    .work .subTitle {
        color: #fff;
        font-family: "Noto sans", sans-serif;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        position: relative;
    }
}

@media (max-width: 480px) {
    .work .subTitle:after {
        position: absolute;
        content: " ";
        display: block;
        border-bottom: solid 3px #fff;
        top: 50px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .work .txtBox {
        margin-top: 20%;
        padding-bottom: 60%;
    }
}

@media (max-width: 480px) {
    .work .center {
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
        font-weight: bold;
        color: #fff;
        margin-top: 7%;
        line-height: 226%;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .work .center .highlight {
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
        font-weight: bold;
        color: #000;
        font-size: 14px;
        background: linear-gradient(transparent 70%, #8ced7a 0%);
    }
}


/*======================================================
sp location
=========================================================*/

@media (max-width: 768px) {
    #contents .contentsInr {
        max-width: 478px;
        margin: 0 auto;
        padding-top: 4%;
    }


    .location h2 {
        font-size: 24px;
    }

    .location h2:after {
        display: none;
    }


    .location .txtBox .center {
        margin-top: 16%;
    }


    .shoplist {
        width: 98%;
        margin: 0 auto;
    }

    .shoplist ul li {
        float: none;
        display: block;
        margin-right: 0%;
        width: 100%;
        margin-top: 15%;
    }

    .shoplist ul li .shop h2{
        font-size: 14px;
    }


    .shoplist ul li .shop .btnTxt {
        display: block;
        width: 100%;
        margin-bottom: 3%;
    }

    .shoplist ul li .shop .btnTxt a {
        text-decoration: none;
    }

    .shoplist ul li .shop .btnTxt .smlTxt {
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
        font-weight: bold;
        color: #fff;
        font-size: 16px;
    }

}


}