@charset "UTF-8";
/* ======================
common
====================== */
html {
    font-size: 62.5%;
}

body {
    font-family: 
     'Noto Sans JP',
     sans-serif;
    font-style: normal;
    background-color: #F2F8ED;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #202524;
}

@media screen and (min-width:769px) {
    body {
        font-size: 1.6rem;
    }
}

img {
    max-width: 100%;
    height: auto;
}

.section__topic {
    font-size: 2.8rem;
    font-weight: bold;
    color: #164233;
    text-align: center;
}

/* h3 {
    font-size: 2.4rem;
    font-weight: 400;
} */

.Br__pc {
    display: none;
}

/* Br pc */
@media screen and (min-width:769px) {
    .Br__pc {
        display: block;
    }
    .Br__sp {
        display: none;
    }
}

/* topic pc */
@media screen and (min-width:769px) {
    .section__topic {
        font-size: 4.0rem;
    }

    /* h3 {
        font-size: 4.5rem;
        font-weight: 400;
    } */
}

/* set btn */

/* .btn__item {
    font-size: 1.2rem;
    font-weight: bold;
    color:#A89968 ;
    text-align: center;
    background-color: #FFF;
    width:45px ;
    height: 45px;
    border-radius: 50%;
    margin: 7px;
    
} */
.btn__itemPc {
    display: none;
}

.btn {
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #A89968;
    width: 250px;
    height: 59px;
    margin: 0 auto;
    border-radius: 50px;
    position: relative;
    transition: 0.4s;
}

.btn::after {
    content: url(../images/Vector.svg);
    position: absolute;
    top: 20px;
    right: 15px;
}

.btn__txt {
    color: #FFF;
    font-size: 1.6rem;
    font-weight: bold;
    margin-right: 30px;
}

.btn:hover {
    background-color: #164233;
}

/* btn pc */
@media screen and (min-width:769px) {
    .btn__itemPc {
        display: block;
    }

    .btn__itemSp {
        display: none;
    }

    .btn {
        width: 451px;
        height: 106px;
    }

    .btn__txt {
        font-size: 2.4rem;
        margin-left: 70px;
    }

    .btn::after {
        top: auto;
        right: 30px;
    }

    .btn__itemPc {
        position: absolute;
        left: 17px;
    }
}

/* ======================
header
====================== */

/* nav初期表示 */
.nav {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
}

.nav__list {
    list-style: "ー";
    margin: 111px 22%;
}

.nav__item {
    font-size: 1.4rem;
    margin-bottom: 40px;
    padding-left: 14px;
}

.nav__btn {
    display: flex;
    justify-content: flex-end;
    margin: 17px 6%;
}

.nav.active {
    transform: translateX(0);
}

.header__btn {
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin: 17px 6%
}

/* header pc */
@media screen and (min-width:769px) {
    .nav__btn {
        display: none;
    }

    .header__btn {
        display: none;
    }

    .nav {
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        position: static;
        transform: translate(0);
        transition: none;
    }

    .nav__list {
        display: flex;
        list-style: none;
        gap: 7%;
        justify-content: center;
        margin: 25px 0;
    }

    .nav__item {
        margin: 0;
    }
}
/* pc 769px */

/* ======================
main
====================== */

.mainImg__pc {
    display: none;
}

/* mainImg pc */
@media screen and (min-width:769px) {
    .mainImg__pc {
        display: block;
        width: 100%;
    }
    .mainImg__sp {
        display: none;
    }
}
/* pc 769px */

/* about */
.section--about {
    background-color: #FFF;
    border-radius: 30px;
    width: 88%;
    margin: 43px auto;
    padding:40px 0 60px ;
}

.about__list {
    text-align: center;
    font-size: 2.0rem;
    font-weight: bold;
}

.about__item {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-size: 155px;
    
}
.about__item:first-of-type {
    background-image: url(../images/veg1.png);
    padding: 26px 0 19px;
    margin: 24px;
}
.about__item:nth-of-type(2) {
    background-image: url(../images/veg2.png);
    padding: 42px 0;
    margin: 26px;
}
.about__item:last-of-type {
    background-image: url(../images/veg3.png);
    padding: 30px 0;
    margin: 26px;
}

.about__txt {
    text-align: left;
    width: 255px;
    margin: 61px auto 102px;
}

/* about pc */
@media screen and (min-width:769px) {
    .section--about {
        border-radius: 45px;
        padding: 94px 0 120px;
        margin: 229px auto;
    }

    .section__topic--about {
        margin-bottom: 100px;
    }

    .about__list {
        display: flex;
        justify-content: center;
    }

    .about__item {
        width: 230px;
    }

    .about__txt {
        width: 88%;
        text-align: center;
        margin-top: 123px;
    }

    .btn {
        margin-top: 154px;
    }
}
/* pc 769px */

/* reason */
.section--reason {
    margin-top: 144px;
}

.section__topic--reason {
    margin-bottom: 34px;
}

.three {
    font-size: 3.6rem;
    color:#E88A46 ;
}

.reasonImg {
    text-align: center;
}

.reason__number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #FFF;
    background-color: #E88A46;
    text-align: center;
    font-size: 3.6rem;
    font-weight: bold;
    margin: 0 auto;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.reason__title {
    font-size: 2.4rem;
    text-align: center;
}

.Reason {
    font-size: 2.8rem;
    font-weight: bold;
}

.reason__txt {
    width: 88%;
    background-color: #FFF;
    margin: 48px auto;
    position: relative;
    padding: 49px 38px;
}

.reason__detail {
    /* width: 255px; */
    margin: 20px auto 0;
}

.reasonImg:first-of-type {
    margin-top: 0;
}

/* reason pc */
@media screen and (min-width:769px) {
    .three {
        font-size: 6.4rem;
    }

    .reasonImg {
        width: 50%;
        margin-top: 0;
    }

    .reasonImg img {
        width: 100%;
        
    }

    .reason__item {
        display: flex;
        align-items: center;
    }

    .reason__txt {
        width: 43%;
        margin: 48px auto 0;
    }

    .reason__number {
        width: 112px;
        height: 112px;
        font-size: 6.0rem;
        align-items: center;
        top: -50px;
    }

    .reason__title {
        font-size: 3.4rem;
        margin-top: 50px;
    }

    .Reason {
        font-size: 4.0rem;
        font-weight: bold;
    }

    .reason__detail {
        line-height: 2.2;
    }

    .reason__item:nth-of-type(2) {
        flex-direction: row-reverse;
    }

}
/* pc 769px */

/* trial */
.section--trial {
    margin: 144px auto 0;
    text-align: center;
    background-color: #FFF;
    width: 330px;
    padding: 36px 0;
    border-radius: 30px;
}

.trial__txt {
    margin: 27px auto 46px;
    width: 255px;
}

.set__name {
    font-size: 2.0rem;
    text-align: center;
}

.set__price {
    font-size: 3.6rem;
    font-weight: bold;
    text-align: center;
}


.yen {
    font-size: 2.0rem;
}

.set__option {
    text-align: center;
}

.set__Img {
    width: 200px;
    margin: 60px auto 0;
}

.set__farm {
    font-size: 2.0rem;
    margin-top: 15px;
}

.set__detail {
    margin-top: 29px;
    margin-bottom: 60px;
    text-align: center;
}

/* trial pc */
@media screen and (min-width:769px) {
    .section--trial {
        width: 88%;
        border-radius: 45px;
        padding: 76px 0 110px;
    }

    .trial__txt {
        width: 769px;
        margin-top: 100px;
    }

    .set__title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        margin-top: 107px;
    }

    .set__name {
        font-size: 2.4rem;
    }

    .set__price {
        font-size: 4.8rem;
        position: relative;
    }

    .yen {
        font-size: 2.4rem;
    }

    .set__option {
        display: none;
    }

    .set__price::after {
        content: '（税込 / 送料別）';
        position: absolute;
        width: 177px;
        bottom: -26px;
        right: -37px;
        font-size: 1.6rem;
        font-weight: 400;
    }

    .set__Img {
        width: 250px;
        margin: 0;
        margin-right: 30px;
    }


    .set__detail {
        text-align: start;
        margin: 0;
    }

    .set__farm {
        font-size: 2.4rem;
    }

    .set__item {
        display: flex;
        align-items: center;
    }

    .set__list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 76px;
    }
}
/* pc 769px */

/* option */
.section--option {
    width: 330px;
    border: dotted;
    border-color: #202524;
    padding: 33px 0;
    margin: 62px auto 0;
}

.option__lead {
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center;
    margin: 31px 0;
}

.option__txt {
    width: 300px;
    margin: 0 auto;
}

/* option pc */
@media screen and (min-width:769px) {
    .section--option {
        width: 88%;
        margin-top: 109px;
        padding: 42px 0;
    }

    .option__txt {
        width: 88%;
        text-align: center;
        margin: 0 auto;
    }

    .option__lead {
        margin: 20px 0;
    }
}
/* pc 769px */

/* farmer */
.section__topic--farmer {
    font-size: 2.4rem;
    font-weight: 400;
    color: #202524;
    position: relative;
    margin-top: 130px;
    
}

.section__topic--farmer::before {
    content: url(../images/Line1.svg);
    /* background-image: url(../images/Line1.svg); */
    position: absolute;
    left: 5px;
    bottom: 0px;
}

.section__topic--farmer::after {
    content: url(../images/Line2.svg);
    position: absolute;
    right: 5px;
    bottom: 0px;
}

.farmer__content {
    background-color: #FFF;
    border-radius: 12px;
    width: 330px;
    /* height: 544px; */
    padding: 10px 0;
    margin: 45px auto;
}

.farmer__Img {
    width: 304px;
    height: 214px;
    margin: 0 auto;
}

.farmer__Img img {
    border-radius: 10px;
}

.farmer__title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 22px;
}

.farmer__name {
    font-size: 1.6rem;
    text-align: center;
    margin: 22px auto 0;
}

.farmer__txt {
    width: 255px;
    margin: 22px auto;
}

/* famer pc */
@media screen and (min-width:769px) {
    .section__topic--farmer {
        font-size: 4.5rem;
        padding-top: 20px;
    }

    .section__topic--farmer::before {
        left: 25px;
    }
    .section__topic--farmer::after {
        right: 25px;
    }

    .farmer__list {
        display: flex;
        width: 88%;
        margin: 0 auto;
        gap: 20px;
    }

    .farmer__content {
        width: 535px;
        border-radius: 15px;
    }

    .farmer__Img {
        width: 489px;
        height: 303px;
    }

    .farmer__title {
        padding-top: 23px;
        font-size: 2.4rem;
    }

    .farmer__name {
        font-size: 2.0rem;
    }

    .farmer__txt {
        width: 415px;
        margin-top: 23px;
    }
}
/* pc 769px */

/* voice */
.section__topic--voice {
    font-size: 2.4rem;
    font-weight: 400;
    color: #202524;
    position: relative;
    margin-bottom: 40px;
    margin-top: 155px;
    
}
.section__topic--voice::before {
    content: url(../images/Line1.svg);
    /* background-image: url(../images/Line1.svg); */
    position: absolute;
    left: 5px;
    bottom: 0px;
}
.section__topic--voice::after {
    content: url(../images/Line2.svg);
    position: absolute;
    right: 5px;
    bottom: 0px;
}

.voice__Img img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

.voice__customer {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.voice__content {
    width: 300px;
    margin: 0 auto 95px;
}

.voice__name {
    font-size: 1.6rem;
}

.voice__title {
    font-size: 2.0rem;
    font-weight: bold;
    margin: 26px auto;
    text-align: center;
}

/* voice pc */
@media screen and (min-width:769px) {
    .section__topic--voice::before {
        left: 25px;
    }
    .section__topic--voice::after {
        right: 25px;
    }

    .section__topic--voice {
        font-size: 4.5rem;
    }

    .voice__list {
        display: flex;
        margin: 57px auto 48px;
        gap: 93px;
        max-width: 1156px;
    }

    .voice__Img {
        width: 185px;
        height: 185px;
    }

    .voice__name {
        font-size: 2.0rem;
    }

    .voice__title {
        font-size: 2.4rem;
        margin: 37px 0;
    }

    .voice__content {
        width: 33.3333%;
    }
}
/* pc 769px */

/* trial2 */
.section--trial2 {
    background-color: #FFF;
    width: 330px;
    margin: 0 auto;
    border-radius: 30px;
    padding: 60px 0;
}

.section__topic--trial2 {
    margin-bottom: 48px;
}

/* trial2 pc */
@media screen and (min-width:769px) {
    .section--trial2 {
        width: 88%;
        padding: 100px 0 120px;
        border-radius: 45px;
    }
}
/* pc 769px */

/* Q&A */
.section--QA {
    margin-top: 140px;
}

.section__topic--QA {
    margin-bottom: 46px;
}

.question {
    font-size: 1.6rem;
    background-image: url(../images/question.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    width: 330px;
    padding-left: 72px;
    margin: 0 auto;
    height: 58px;
    align-items: center;
}

.answer {
    background-image: url(../images/answer.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 330px;
    padding-left: 72px;
    margin: 24px auto 0;
    height: 58px;
}

.answer__topic {
    font-size: 1.6rem;
    font-weight: bold;
    
    /* background-image: url(../images/answer.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 310px;
    padding-left: 72px;
    width: 250px;
    min-height: 58px; */
}

.answer__txt {
    margin-top: 7px;
}

.answer:first-of-type {
    margin-bottom: 210px;
}

.answer:last-of-type {
    margin-bottom: 310px;
}

/* QA pc */
@media screen and (min-width:769px) {
    .section--QA {
        margin-top: 272px;
    }

    .question {
        width: 88%;
        height: 100px;
        font-size: 2.4rem;
        padding-left: 125px;
        margin-top: 102px;
    }

    .answer {
        width: 88%;
        height: 100px;
        padding-left: 125px;
    }

    .answer__topic {
        font-size: 2.4rem;
    }
}
/* pc 769px */

/* footer */
.footer {
    background-color: #FFF;
    padding-bottom: 16px;
    margin-top: 100px;
    width: 100%;
}

.logo {
    margin: 10px auto 0;
    text-align: center;
}

.logo img {
    width: 140px;
    margin-top: 10px;
    text-align: center;
}

.copy {
    margin-top: 15px;
    text-align: center;
}

/* footer pc */
@media screen and (min-width:769px) {
    .logo {
        width: 240px;
        margin: 41px 0 32px;
    }

    .footer {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding-right: 43px;
        width: 100vw;
        margin: 0 auto;
    }
}