@import url("surroundings.css");


@media(min-width: 1001px) {
    .surroundings.terroir .surrounBox {
        padding-left: 40px;
        padding-bottom: 9.9vw;
    }

    .section.terroir .subTitle {
        margin-bottom: 5.4vh;
    }
    .surroundings.terroir .surroundingsBg {
        margin-right: 2.1vw;
        margin-bottom: 1.7vw;
    }

    .lower.terroir-01 .sectionContent .lowerFram {
        width: 1281px;
    }

    .lower.terroir-01 .sectionContent .frameWrap {
        flex-direction: column-reverse;
        justify-content: flex-end;
        padding: 15.3vh 0 0;
    }

    .lower.terroir-01 .sectionContent .frameWrap .faramePhotoSub {
        margin-bottom: 7vh;
    }

    .lower.terroir-01 .sectionContent .frameWrap .homeSub {
        margin-bottom: 0;
    }

    .lower.terroir-01 .sectionContent .lowerWrap {
        width: 480px;
    }

    .lower.terroir-01 .sectionContent .lowerWrap .lowerBg {
        width: auto;
        height: 66.7vh;
    }

    .lower.terroir-01 .sectionContent .lowerWrap .lowerBg~.lowerBg {
        height: 29.6vh;
        margin-top: 3.7vh;
    }
    .lower .sectionContent .lowerBg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: top;
    }

    .lower.terroir-02 .sectionContent {
        align-items: center;
        flex-wrap: wrap;
    }

    .lower.terroir-02 .sectionContent .lowerFram {
        height: 100vh;
        padding: 16.7vh 0 16vh;
        align-items: flex-start;
        justify-content: space-between;
    }

    .lower.terroir-02 .sectionContent .frameWrap {
        width: 510px;
        height: 100%;
        justify-content: flex-start;
        padding: 0;
        margin-top: -5px;
    }

    .lower.terroir-02 .sectionContent .frameWrap .homeSub {
        margin-bottom: 17.6vh;
    }

    .lower.terroir-02 .sectionContent .lowerWrap .lowerBg {
        width: 37.5vw;
        min-width: 550px;
        height: auto;
        margin: auto;
    }

    .lower.terroir-03 .sectionContent .lowerFram {
        width: 1517px;
        padding-left: 40px;
    }

    .lower.terroir-03 .sectionContent .frameWrap {
        justify-content: flex-start;
        width: 600px;
        height: auto;
        padding: 14.8vh 0 4.3vw;
    }
    .lower.terroir-03 .sectionContent .frameWrap .homeSub {
        margin-bottom: 0;
    }

    .lower.terroir-03 .sectionContent .frameWrap .faramePhotoSub {
        margin-bottom: 8vw;
    }

    .lower.terroir-03 .sectionContent .lowerBg {
        height: auto;
    }

    .lower.terroir-03 .sectionContent .lowerBg~.lowerBg {
        width: 480px;
        margin-top: 4.2vw;
    }
}

@media(max-width: 1000px) {
    #pageContainer .pageContent .section.lower {
        margin-bottom: 60px;
    }
	.lower.terroir-01 .sectionContent .lowerFram .frameWrap {
		align-items: end;
	}
    .lower.terroir-01 .sectionContent .lowerFram .lowerBg {
        width: 66.7%;
        margin: 0 0 0 0.7%;
    }
    .lower.terroir-01 .sectionContent .lowerFram .lowerBg ~ .lowerBg {
        float: right;
        margin: 49px -7.2% 0 0;
        width: 82.2%;
    }
    #pageContainer .pageContent .section.lower.terroir-02 {
        margin-bottom: 64px;
    }
    .lower.terroir-02 .sectionContent .lowerFram .frameWrap {
        flex-direction: column;
        margin-bottom: 48px;
    }
    .section.terroir-02 .homeSub {
        margin-bottom: 14.7%;
    }
    .lower.terroir-02 .sectionContent .lowerFram .frameWrap .faramePhotoSub {
        margin-left: -7.2%;
        margin-bottom: 0;
    }
    .lower.terroir-02 .sectionContent .lowerFram .lowerWrap .lowerBg {
        width: 100%;
        margin: 0 auto;
    }
    #pageContainer .pageContent .section.lower.terroir-03 {
        margin-bottom: 0;
    }
    .lower.terroir-03 .sectionContent .lowerFram .frameWrap {
        flex-direction: column;
        align-items: end;
    }
    .lower.terroir-03 .sectionContent .lowerFram .frameWrap .faramePhotoSub {
        margin-right: -7.2%;
    }
    .lower.terroir-03 .sectionContent .lowerFram .lowerBg {
        width: 100%;
        margin: 0 0 0 -7.2%;
    }
    .lower.terroir-03 .sectionContent .lowerFram .lowerBg ~.lowerBg {
        float: right;
        width: 82.7%;
        margin: 48px 0 0;
    }
}