@charset "UTF-8";
/*----------------------------------------------------
    ☆Uniq
----------------------------------------------------*/

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

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

.vision{
    position: relative;
}

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

.vision:after{
    content: '';/
    display: block;
    width: 200px;
    height: 150px;
    background-image: url(../images/vision_index_02.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 45%;
    right: -5%;
    bottom: 0;
}


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

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

.vision h2{
    color:#fff;
    font-family: "Noto sans", sans-serif;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
}

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

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

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

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

/*===============================================
tab
=========================================*/
@media (min-width: 768px) {
    .vision:before{
        width: 193px;
        height: 115px;
        top: 35%;
        left: 3%;

    }

    .vision:after{
        width: 193px;
        height: 115px;
    }
    .vision .txtBox:before{
        width: 193px;
        height: 115px;
    }





}


/*===============================================
sp
=========================================*/
@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/vision_index_01_sp.png);
    display: block;
    position: absolute;
    top: 18%;
    left: 5%;
    z-index: 9999999999;
}
}

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


@media (max-width: 480px) {
.vision:after{
    content: url(../images/vision_index_02.png);
    display: block;
    position: absolute;
    top: 45%;
    right: 4%;
    bottom: 0;
    z-index: 9999999999;
}
}

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


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

@media (max-width: 480px) {
.vision .txtBox:before{
    content: url(../images/vision_index_03.png);
    display: block;
    position: absolute;
    top: 100px;
    left: 5%;
    z-index: 9999999999;
}
}

@media (max-width: 480px) {
.vision .txtBox:before{
    content: url(../images/vision_index_03.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;
}
}

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

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


/*
.vision p {
    color: #555555;
    font-size: 14px;
    font-weight: bold;
    line-height: 200px;
    text-align: center;
    letter-spacing: 2px;
    padding: 20px 0px;
}
.vision p.grn {
    color: #6cc85d;
    font-size: 18px;
    font-weight: normal;
    padding-top: 0px;
}
.vision p.txt1 {
    font-size: 18px;
    padding-top: 0px;
}
*/
/*
.vision ul.link li {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 50px;
}

.vision ul.link li a {
    display: block;
    transition: all 0.2s ease-in 0s;
    padding-bottom: 2px;
}

.vision ul.link li a:hover {
opacity: 0.8;
}
*/


/*

.foo img:last-child {
    display: none;
}
.foo:hover img:last-child {
    display: inline-block;
}
br.clear {
    clear: both;
    display: inline !important;
    line-height: 0;
}
.box {
    padding: 50px 0px;
}
.boxL {
    background: url(../images/bg01.png) no-repeat center center;
    float: left;
    width: 450px;
    margin-top: 100px;
    height: 400px;
}
.boxR {
    float: right;
    width: 400px;
}
.boxL ul li {
    position: relative;
    cursor: pointer;
}
.boxL ul li img {
    position: absolute;
}
.boxL ul li img.img01 {
    left: 195px;
    top: -50px;
}
.boxL ul li img.img02 {
    right: 50px;
    top: -10px;
}
.boxL ul li img.img03 {
    right: -20px;
    top: 120px;
}
.boxL ul li img.img04 {
    right: 0;
    top: 270px;
}
.boxL ul li img.img05 {
    right: 120px;
    top: 380px;
}
.boxL ul li img.img06 {
    left: 120px;
    top: 380px;
}
.boxL ul li img.img07 {
    left: 0;
    top: 270px;
}
.boxL ul li img.img08 {
    left: -20px;
    top: 140px;
}
.boxL ul li img.img09 {
    left: 50px;
    top: 0;
}
.boxL ul li img.pop01 {
    left: -40px;
    top: -160px;
}
.boxL ul li img.pop02 {
    right: 30px;
    top: -120px;
}
.boxL ul li img.pop03 {
    right: -40px;
    top: 10px;
}
.boxL ul li img.pop04 {
    right: -20px;
    top: 160px;
}
.boxL ul li img.pop05 {
    right: 100px;
    top: 270px;
    z-index: 999;
}
.boxL ul li img.pop06 {
    left: 100px;
    top: 270px;
}
.boxL ul li img.pop07 {
    left: -20px;
    top: 160px;
    z-index: 999;
}
.boxL ul li img.pop08 {
    left: -40px;
    top: 30px;
    z-index: 999;
}
.boxL ul li img.pop09 {
    left: 30px;
    top: -110px;
}

*/