@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght,GRAD@0,17..18,700,200;1,17..18,700,200&display=swap');



.league-gothic {
    font-family: "League Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.statement {
    /*background-color: rgb(202, 244, 244);*/
    margin-left: 0;

    padding: 0;
}

.brown {
    filter: brightness(0) saturate(100%) invert(23%) sepia(33%) saturate(753%) hue-rotate(359deg) brightness(92%) contrast(93%);
}

.blue {
    filter: brightness(0) saturate(100%) invert(16%) sepia(37%) saturate(1095%) hue-rotate(203deg) brightness(92%) contrast(96%);
}

.concept {
    display: flex;
    padding-top: 100px;
}

.conceptillust {
    width: 50%;
    /*background-color: rgb(235, 235, 255);*/

}

.concepttext {
    width: 25%;
    /*background-color: rgb(255, 138, 226);*/
    text-align: center;
}



.concepttext img {

    width: 35%;
}

.ctleft {
    margin-top: 300px;
}

.ctright {
    margin-top: 100px;
}

.atownis {
    width: 400px;
    margin-left: 60%;
    margin-bottom: 300px;
}




.ja h3 {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

.en h3 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    font-size: 20px;
    letter-spacing: 0.025em;

}

/*------------------------------whenpeople-------------------------------------*/
.whenpeople {
    margin: 0;
    padding: 0;
    margin-bottom: 0px;
    /*background-color: antiquewhite;*/

}

.whenpeople img {
    width: 300px;
}

.figures {
    margin-left: 30px;
    margin-right: 30px;
    /*background-color: aliceblue;*/
}

.flexboxleft {
    display: flex;
    /*background-color: aquamarine;*/
}

.whenpeopleen {
    margin-left: auto;
    /*background-color: rgb(197, 255, 236);*/
}

.whenpeopleen h3 {

    width: 300px;
    text-align: right;

}

.whenpeopleja {
    width: 300px;
    margin-right: 30px;
    margin-left: auto;
}




/*----------------------------------------forlife-------------------------------------*/
.forlife {
    margin: 0;
    padding: 30px;

}

.vase {
    width: 300px;
    height: auto;
}

.forlifetitle {
    width: 500px;
}

.flexboxright {
    display: flex;
}

.forlifeja {
    width: 300px;
    margin-top: 100px;
}



.forlifeen {
    width: 300px;
    margin-left: auto;
    margin-top: 200px;
}



.bycicle {
    width: 400px;
    margin-left: 150px;
    margin-right: 100px;
}

/*-------------------------------high quality----------------------------*/
.highquality {
    margin: 0;
    margin-top: 200px;
    padding: 0;
    padding-left: 30px;
    padding-right: 30px;
    /*background-color: antiquewhite;*/
}

.highqualitytitle {
    width: 500px;
    margin: 50px;
}

.flexbox {
    display: flex;

}

.highqualityja {
    width: 300px;
}

.highqualityja h3 {}

.highqualityen {
    width: 300px;
    text-align: right;
    margin-left: auto;
    margin-right: 20px;
    padding-top: 300px;
    /*background-color: aliceblue;*/
}

.highqualityen h3 {}

.circles {
    width: 250px;
}

/*-------------------------------environment----------------------------*/
.environment {
    margin: 0;
    margin-top: 200px;
    padding: 30px;
}

.environmenttitle {
    width: 500px;
}

.environmentja {
    width: 300px;
    /* background-color: rgb(249, 182, 94);*/
    margin-left: auto;
    padding-top: 400px;
}

.environmentja h3 {}

.blush {
    width: 600px;
    transform: rotate(-10deg);
    /*background-color: antiquewhite;*/
    margin-top: -100px;
}

.environmenten {
    width: 180px;
    /*background-color: rgb(207, 207, 255);*/
    margin-left: auto;
    margin-top: -100px;
    margin-right: 30px;
}

/*-------------------------------beauty----------------------------*/
.beauty {
    margin: 30px;
    margin-top: 200px;

}

.beautytitle {
    width: 500px;
    margin-bottom: 30px;
}

.house {
    width: 500px;
    /*background-color: blue;*/
}

.beautyja {
    width: 300px;
    margin-left: auto;
    padding-top: 200px;
}

.beautyen {
    width: 300px;
    margin-top: 300px;
    margin-left: 40%;
}

/*-------------------------------community----------------------------*/
.community {
    margin: 0;
    padding: 30px;
    margin-top: 300px;
}

.communitytitle {
    width: 500px;
    margin-left: 30%;
}

.communityja {
    width: 300px;
    margin-left: auto;
}

.communityen {
    width: 600px;
    margin-top: 50px;

}

.blots {
    width: 300px;
    margin-left: auto;
}


/*-------------------------------agriculture----------------------------*/

.agriculture {
    margin-top: 300px;
    padding: 30px;
}

.agriculturetitle {
    width: 500px;
}

.inflexbox1 {
    width: 70%;
}

.inflexbox2 {
    width: 30%;
    padding-left: 30px;
}

.farmer1 {
    width: 900px;
}

.farmer2 {
    width: 300px;
}

.agricultureja {
    margin-top: 30px;
    width: 300px;
}

.agricultureen {
    width: 200px;
}

.goat {
    width: 500px;
    margin-left: auto;
    margin-top: 300px;
    margin-right: 30px;
}


/*-------------------------------oikawasan----------------------------*/

.oikawasan {
    margin: 0;
    padding: 30px;
    margin-top: 300px;
    /*background-color: blanchedalmond;*/
    margin-bottom: 300px;
}

.flexbox4 {
    display: flex;
    /*background-color: aqua;*/
}

.oikawasanillust {
    /* background-color: aqua;*/
    width: 400px;
}

.oikawasannamae {
    /* background-color: aqua;*/
    width: 300px;
    margin: 0;
    padding: 0;
    margin-bottom: 50px;
}

.oikawasanen {
    width: 500px;
    margin-top: 30px;
}

.oikwasanja {
    width: 500px;
}

.inflexbox3 {
    width: 70%;
    padding-left: 70px;
    /* background-color: azure;*/
}

.viewmorepoint {
    width: 100px;
    margin-left: auto;
}



@media screen and (max-width:768px) {
    .gallery-wrapper {
        /*background-color: rgb(86, 130, 168);*/
    }

    .conceptillust {
        width: 80%;
        /*background-color: rgb(235, 235, 255);*/

    }

    .concepttext {
        width: 10%;
        /*background-color: rgb(255, 138, 226);*/
        text-align: center;
    }



    .concepttext img {
        width: 100%;

    }


    .ctleft {
        margin-top: 200px;
    }

    .ctright {
        margin-top: 0px;
    }

    .atownis {
        width: 400px;
        margin-left: 0;
        margin-left: 60px;
        margin-bottom: 300px;
    }

    /*------------------------------whenpeople-------------------------------------*/
    .whenpeople {
        margin: 0;
        padding: 0;
        margin-bottom: 0px;
        /*background-color: antiquewhite;*/

    }

    .whenpeople img {
        width: 300px;
    }

    .figures {
        margin-left: 30px;
        margin-right: 30px;
        /*background-color: aliceblue;*/
    }

    .flexboxleft {
        display: flex;
        /*background-color: aquamarine;*/
    }

    .whenpeopleen {
        margin-left: auto;
        /*background-color: rgb(197, 255, 236);*/
    }

    .whenpeopleen h3 {
        width: 200px;
        text-align: right;

    }

    .whenpeopleja {
        width: 300px;
        margin-right: 30px;
        margin-left: auto;
    }




    /*----------------------------------------forlife-------------------------------------*/
    .forlife {
        margin: 0;
        padding: 30px;

    }

    .vase {
        width: 300px;
        height: auto;
        margin-top: 100px;
    }

    .forlifetitle {
        width: 500px;
        margin-top: 50px;
    }

    .flexboxright {
        display: block;
        margin-right: 30px;
    }

    .forlifeja {
        width: 300px;
        margin-top: 100px;
    }



    .forlifeen {
        width: 300px;
        margin-left: auto;
        margin-top: 100px;
    }

    .bycicle {
        width: 300px;
        margin-left: 30px;
        margin-left: auto;
    }

    /*-------------------------------high quality----------------------------*/
    .highquality {
        margin: 0;
        margin-top: 200px;
        padding: 0;
        padding-left: 30px;
        padding-right: 30px;
        /*background-color: antiquewhite;*/
    }

    .highqualitytitle {
        width: 500px;
        margin: 0;
        margin-bottom: 50px;
    }

    .flexbox {
        display: block;
        width: 100%;
    }

    .highqualityja {
        width: 300px;
    }

    .highqualityja h3 {
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        font-size: 12px;
        letter-spacing: 0.1em;
        line-height: 1.6;

    }

    .highqualityen {
        width: 300px;
        text-align: right;
        margin-left: auto;
        margin-right: 20px;
        padding-top: 50px;
        /*background-color: aliceblue;*/
    }

    .highqualityen h3 {
        font-family: "League Gothic", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings:
            "wdth" 100;
        font-size: 20px;
    }

    .circles {
        margin-top: 50px;
        width: 200px;
    }


    /*-------------------------------environment----------------------------*/
    .environment {
        margin: 0;
        margin-top: 200px;
        padding: 30px;
    }

    .flexboxright {
        display: block;
    }

    .environmenttitle {
        width: 500px;
    }

    .environmentja {
        width: 300px;
        /* background-color: rgb(249, 182, 94);*/
        margin-left: auto;
        padding-top: 100px;
    }

    .environmentja h3 {}

    .blush {
        width: 600px;
        transform: rotate(-10deg);
        /*background-color: antiquewhite;*/
        margin-top: 0px;
    }

    .environmenten {
        width: 180px;
        /*background-color: rgb(207, 207, 255);*/
        margin-left: 0;
        margin-top: -100px;
        margin-right: 30px;
    }

    /*-------------------------------beauty----------------------------*/
    .beauty {
        margin: 30px;
        margin-top: 200px;

    }

    .beautytitle {
        width: 500px;
        margin-bottom: 30px;
    }

    .house {
        width: 500px;
        /*background-color: blue;*/
    }

    .beautyja {
        width: 300px;
        margin-left: auto;
        padding-top: 50px;
    }

    .beautyen {
        width: 300px;
        margin-top: 300px;
        margin-left: 25%;
    }

    /*-------------------------------community----------------------------*/

    .community {
        margin: 0;
        padding: 30px;
        margin-top: 300px;
    }

    .communitytitle {
        width: 500px;
        margin-left: 0;
    }

    .communityja {
        width: 300px;
        margin-left: auto;
        margin-top: 30px;
    }

    .communityen {
        width: 600px;
        margin-top: 100px;

    }

    .blots {
        width: 300px;
        margin-left: auto;
        margin-top: 50px;
    }


    /*-------------------------------agriculture----------------------------*/

    .agriculture {
        margin-top: 300px;
        padding: 30px;
    }

    .agriculturetitle {
        width: 300px;
    }

    .inflexbox1 {
        width: 100%;
    }

    .inflexbox2 {
        width: 100%;
    }

    .farmer1 {
        margin-top: 50px;
        width: 900px;
    }

    .farmer2 {
        width: 300px;
    }

    .agricultureja {
        margin-top: 30px;
        width: 300px;
    }

    .agricultureen {
        width: 200px;
        margin-left: auto;
    }

    .goat {
        width: 300px;
        margin-left: auto;
        margin-top: 300px;
        margin-right: 30px;
    }


    /*-------------------------------oikawasan----------------------------*/

    .oikawasan {
        margin: 0;
        padding: 30px;
        margin-top: 300px;
        /*background-color: blanchedalmond;*/
        margin-bottom: 300px;
    }

    .flexbox4 {
        display: flex;
        /*background-color: aqua;*/
    }

    .oikawasanillust {
        /* background-color: aqua;*/
        width: 400px;
    }

    .oikawasannamae {
        /*background-color: aqua;*/
        width: 300px;
        margin: 0;
        padding: 0;
        margin-bottom: 50px;
    }

    .oikawasanen {
        width: 500px;
        margin-top: 100px;
    }

    .oikwasanja {
        width: 500px;
    }

    .inflexbox3 {
        width: 70%;
        padding-left: 70px;
        /*background-color: azure;*/
    }

}

@media screen and (max-width:550px) {
    .gallery-wrapper {
        /* background-color: bisque;*/
    }

    .gallery-wrapper {
        /*background-color: rgb(86, 130, 168);*/
    }

    .conceptillust {
        width: 80%;
        /*background-color: rgb(235, 235, 255);*/

    }

    .concepttext {
        width: 10%;
        /*background-color: rgb(255, 138, 226);*/
        text-align: center;
    }



    .concepttext img {
        width: 100%;

    }


    .ctleft {
        margin-top: 200px;
    }

    .ctright {
        margin-top: 0px;
    }

    .atownis {
        width: 400px;
        margin-left: 0;
        margin-left: 60px;
        margin-bottom: 300px;
    }

    /*------------------------------whenpeople-------------------------------------*/
    .whenpeople {
        margin: 30px;
        padding: 0;
        margin-bottom: 0px;
        /*background-color: antiquewhite;*/


    }

    .whenpeople img {
        width: 300px;
    }

    .figures {
        margin-top: 50px;
        margin-left: 30px;
        margin-right: 30px;
        width: 400px;
        /*background-color: aliceblue;*/
    }

    .flexboxleft {
        display: block;
        /*background-color: aquamarine;*/
    }

    .whenpeopleen {
        margin-left: auto;
        /*background-color: rgb(197, 255, 236);*/
    }

    .whenpeopleen h3 {
        width: 200px;
        text-align: right;

    }

    .whenpeopleja {
        width: 100%;
        margin-right: 30px;
        margin-left: 0;
    }




    /*----------------------------------------forlife-------------------------------------*/
    .forlife {
        margin: 0;
        padding: 30px;
        width: 100%;
    }

    .vase {
        width: 200px;
        height: auto;
        margin-top: 100px;
    }

    .forlifetitle {
        width: 500px;
        margin-top: 50px;
    }

    .flexboxright {
        display: block;
        margin-right: 30px;
        width: 100%;
    }


    .forlifeja {
        width: 100%;
        margin-top: 100px;
    }



    .forlifeen {
        width: 300px;
        margin-left: auto;
        margin-top: 100px;
    }

    .bycicle {
        width: 300px;
        margin-top: 50px;
        margin-left: 30px;
        margin-left: auto;
    }

    /*-------------------------------high quality----------------------------*/
    .highquality {
        margin: 0;
        margin-top: 200px;
        padding: 0;
        padding-left: 30px;
        padding-right: 30px;
        /*background-color: antiquewhite;*/
    }

    .highqualitytitle {
        width: 250px;
        margin: 0;
        margin-bottom: 50px;
    }

    .flexbox {
        display: block;
        width: 100%;
    }



    .highqualityja {
        width: 100%;
    }

    .highqualityja h3 {
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        font-size: 12px;
        letter-spacing: 0.1em;
        line-height: 1.6;

    }

    .highqualityen {
        width: 300px;
        text-align: right;
        margin-left: auto;
        margin-right: 20px;
        padding-top: 0px;
        margin-top: 100px;
        /*background-color: aliceblue;*/
    }

    .highqualityen h3 {
        font-family: "League Gothic", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings:
            "wdth" 100;
        font-size: 20px;
    }

    .circles {
        margin-top: 50px;
        width: 200px;
    }


    /*-------------------------------environment----------------------------*/
    .environment {
        margin: 0;
        margin-top: 200px;
        padding: 30px;
    }

    .flexboxright {
        display: block;
    }

    .environmenttitle {
        width: 250px;
    }

    .environmentja {
        width: 100%;
        /* background-color: rgb(249, 182, 94);*/
        margin-left: 0;
        padding-top: 50px;
    }

    .environmentja h3 {}

    .blush {
        width: 600px;
        transform: rotate(-10deg);
        /*background-color: antiquewhite;*/
        margin-top: 0px;
        margin-bottom: 100px;
    }

    .environmenten {
        width: 180px;
        /*background-color: rgb(207, 207, 255);*/
        margin-left: 0;
        margin-top: -100px;
        margin-right: 30px;
    }

    /*-------------------------------beauty----------------------------*/
    .beauty {
        margin: 30px;
        margin-top: 200px;

    }

    .beautytitle {
        width: 300px;
        margin-bottom: 30px;
    }

    .house {
        width: 500px;
        /*background-color: blue;*/
    }

    .beautyja {
        width: 300px;
        margin-left: auto;
        padding-top: 50px;
    }

    .beautyen {
        width: 300px;
        margin-top: 300px;
        margin-left: 0;
    }

    /*-------------------------------community----------------------------*/

    .community {
        margin: 0;
        padding: 30px;
        margin-top: 300px;
    }

    .communitytitle {
        width: 300px;
        margin-left: 0;
    }

    .communityja {
        width: 300px;
        margin-left: auto;
        margin-top: 30px;
    }

    .communityen {
        width: 600px;
        margin-top: 100px;

    }

    .blots {
        width: 300px;
        margin-left: auto;
        margin-top: 50px;
    }


    /*-------------------------------agriculture----------------------------*/

    .agriculture {
        margin-top: 300px;
        padding: 30px;
    }

    .agriculturetitle {
        width: 250px;
    }

    .inflexbox1 {
        width: 100%;
    }

    .inflexbox2 {
        width: 100%;
    }

    .farmer1 {
        margin-top: 50px;
        width: 900px;
    }

    .farmer2 {
        margin-top: 50px;
        width: 300px;
    }

    .agricultureja {
        margin-top: 30px;
        width: 100%;
    }

    .agricultureen {
        width: 200px;
        margin-left: auto;
    }

    .goat {
        width: 200px;
        margin-left: auto;
        margin-top: 300px;
        margin-right: 30px;
    }


    /*-------------------------------oikawasan----------------------------*/

    .oikawasan {
        margin: 0;
        padding: 30px;
        margin-top: 300px;
        /*background-color: blanchedalmond;*/
        margin-bottom: 300px;
        width: 100%;
    }

    .flexbox4 {
        display: block;
        /*background-color: aqua;*/
    }

    .oikawasanillust {
        /* background-color: aqua;*/
        width: 400px;
    }

    .oikawasannamae {
        /*background-color: aqua;*/
        width: 300px;
        margin: 0;
        padding: 0;
        margin-bottom: 50px;
    }

    .oikawasanen {
        width: 500px;
        margin-top: 100px;
    }

    .oikwasanja {
        width: 100%;
    }

    .inflexbox3 {
        width: 100%;
        padding-left: 0px;
        /*background-color: azure;*/
    }

}