@charset "UTF-8";
/*=====================
common
======================*/

html{
    font-size: 62.5%;
}

body{
    font-family: 
        "fot-tsukuardgothic-std", 
        sans-serif;
    color: #000;
    background-color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

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

.wrapper {
    max-width: 91.4%;
    margin: 0 auto;
}

/*=====================
header
======================*/
.header__wrapper {
    padding: 16px 4.2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo img {
    width: 150px;
    cursor: pointer;
}

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

.nav__header {
    padding: 16px 4.2%;
    display: flex;
    justify-content: space-between;
}

.nav__logo img {
    width: 150px;
    cursor: pointer;
}

.nav__btn {
    cursor: pointer;
}

.nav__wrapper {
    padding: 57px 4.2% 0 4.2%;
}

.nav__item {
    font-family: 'roma', sans-serif;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1; 
    margin-bottom: 36px;
}

.header__item__small {
    color: #000;
    font-family: 'fot-tsukuardgothic-std', sans-serif;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1; 
    margin-top: 8px;
}

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

.header__btn {
    display: block;
    width: 25px;
    height: 15px;
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: 6.4%;
}

/* header pc */
@media screen and (min-width: 769px){
    .header {
        width: 100%;
        height: 120px;
    }

    .header__wrapper {
        align-items: center;        
        max-width: 1160px;            
        margin: 0 auto;  
        padding: 18px 0;
    }

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

    .nav__wrapper {
        padding: 0;
        display: flex;
        align-items: center;
    }

    .nav__item {
        margin: 0;
        text-align: center;
        margin-left: 64px;
        font-size: 2.0rem;  
    }

    .header__item__small {
        display: inline-block;
        margin-top: 10px;
    }

    .nav__header {
        display: none;
    }
    
    .nav__logo img {
        display: none;
    }

    .header__btn {
        display: none;
    }
}/* pc 769px */

/*=====================
main
======================*/
.topImg .mainVisual_pc {
    display: none;
}
/* main pc */
@media screen and (min-width: 769px){
    .topImg .mainVisual_pc {
        display: block;
    }

    .topImg .mainVisual_sp {
        display: none;
    }
}/* pc 769px */

/* About */
.title__about {
    width: 63.6%;
    max-width: 430px;
    height: auto;
    margin: 60px auto 0;
}

.about__txt {
    font-size: 1.6rem;
    line-height: 2.1; 
    margin-top: 49px;
}

.about__txt span {
    border-bottom: solid 3.2px #FFF88C;
}

.btn__about {
    width: 94.7%;
    max-width: 701px;
    height: auto;
    margin: 32px auto 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn__about:hover {
    transform: scale(1.05); 
}

/* About pc */
@media screen and (min-width: 769px){
    .wrapper {
        max-width: 1160px;
    }

    .about__txt {
        font-size: 1.8rem;
        text-align: center;
        margin-top: 60px;
    }

    .btn__about {
        margin-top: 60px;
    }
}/* pc 769px */

/* Reason */
.section--reason {
    background-color: #DCDCDC;
    margin-top: 32px;
    padding-bottom: 160px;
}

.title__reason {
    width: 64%;
    max-width: 423px;
    height: auto;
    margin: 0 auto;
    padding-top: 72px;
}

.reason__point {
    margin-top: 42px;
}

.reason__point:first-of-type {
    margin-top: 32px;
}

.reason__pointImg {
    position: relative;
}

.reasonImg {
    position: relative;
}

.separate__pointImg {
    position: relative;
}

.reason__pointImg::before {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #FFFFFF;
}

.separate__pointImg::before {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: #FFFFFF;
}

.reason__content {
    background-color:#FFFFFF ;
}

.separate__content {
    background-color: #FFFFFF;
}

.reason__firstnm {
    position: relative;
    padding-top: 20px;
    text-align: center;
}

.reason__firstnm::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 18px;
    width: 34.8px;
    height: 33px;
    background: url(../images/point01.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.reason__secondnm {
    position: relative;
    padding-top: 20px;
    text-align: center;
}

.reason__secondnm::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 18px;
    width: 34.8px;
    height: 33px;
    background: url(../images/point02.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.reason__thirdnm {
    position: relative;
    padding-top: 21px;
    text-align: center;
}

.reason__thirdnm::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 14px;
    width: 34.8px;
    height: 33px;
    background: url(../images/point03.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.reason__title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
}

.reason__title .red {
    color: #CB2222;
}

.reason__title .green {
    color: #569360;
}

.reason__title .orange {
    color: #FF601F;
}

.reason__txt {
    font-size: 1.4rem;
    padding: 34px 16px 73px 16px;
}

/* Reason pc */
@media screen and (min-width: 769px){
    .section--reason {
        margin-top: 120px;
        padding-bottom: 190px;
}

    .title__reason {
        padding-top: 120px;
    }

    .reason__point {
        margin-top: 64px;
        display: flex;
        align-items: center;
        gap: 65px;
    }

    .reason__point:first-of-type {
        margin-top: 64px;
    }

    .reasonImg {
        max-width: 350px;
    }

    .reason__pointImg::before {
        display: none;
    }

    .separate__pointImg::before {
        display: none;
    }

    .reason__pointImg {
        order: 2;
    }

    .reason__content {
        order: 1;
        border-radius: 20px;
    }

    .separate__content {
        border-radius: 20px;
    }

    .reason__firstnm {
        padding: 41px 0 0 119px;
        text-align: left;
    }

    .reason__firstnm::before {
        width: 55px;
        height: 52px;
        top: 25px;
        left: 30px;
    }

    .reason__secondnm {
        padding: 37px 0 0 114px;
        text-align: left;
    }

    .reason__secondnm::before {
        width: 55px;
        height: 52px;
        top: 20px;
        left: 25px;
    }

    .reason__thirdnm {
        padding: 33px 0 0 119px;
        text-align: left;
    }

    .reason__thirdnm::before {
        width: 55px;
        height: 52px;
        top: 16px;
        left: 25px;
    }

    .reason__title {
        font-size: 2.4rem;
        letter-spacing: normal;
    }

    .reason__txt  {
        font-size: 1.6rem;
        padding: 16px 119px 31px;
    }

    .separate__content .reason__txt {
        padding: 14px 123px 37px 115px;
    }

    .reason__content .reason__txt:nth-child(2){
        padding: 14px 119px 41px;
    }
}/* pc 769px */

/* Trial */
.trial__wrapper {
    max-width: 91.4%;
    margin: 0 auto;
    position: relative;
}

.trial__wrapper::before {
    content: '';
    position: absolute;
    top: 2%;
    left: -5%;
    width: 110%;
    height: 40%;
    background-image: url(../images/background-sp.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.trial__wrapper::after {
    content: '';
    position: absolute;
    bottom:-10%;
    left: -2%;
    width: 106%;
    height: 10%;
    background-image: url(../images/background-sp2.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section--trial {
    background-color: #519F79;
    padding-bottom: 120px;
}

.title__trial {
    width: 63.5%;
    max-width: 430px;
    height: auto;
    margin: 0 auto;
    padding-top: 120px;
}

.trial__subTitle {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 48px;
    background-image: url(../images/background_trial01.jpeg);
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
}

.trial__subTitle img {
    width: 65px;
    padding: 16px 0 0 6px;
}

.trial__content {
    padding: 37px 12px 28px 0;
}

.trial__txt {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1; 
}

.trial__price {
    color: #FF601F;
    font-size: 4.4rem;
    font-weight: 700;
    padding: 10px 0 0 10px;
}

.trial__price span {
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    padding-left: 8px;
}

.trial__list {
    position: relative;
}

.ribbon-pc {
    display: none;
}

.ribbon-sp {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 96.6%;
    transform: translateX(-50%);
    z-index: 2;
}

.trial__item {
    background-image: url(../images/background_trial02.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 97px;
}

.item__vegix {
    display: block;
    margin: 0 auto;
    width: 85.5%;
    max-width: 500px;
    height: auto;
    padding-top: 20px;
}

.trial__itemTxt {
    margin: 0 auto;
    width: 11.8%;
    max-width: 63px;
    height: auto;
    margin-top: 22px;
}

.item__kuchibue {
    display: block;
    margin: 0 auto;
    width: 85.5%;
    max-width: 500px;
    height: auto;
    padding: 31px 0 20px 0;
}

.trial__btn {
    position: relative;
    width: 94.7%;
    max-width: 701px;
    height: auto;
    margin: 40px auto 0;
}

.trial__btn img {
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 2;
}

.trial__btn img:hover {
    transform: scale(1.05);
}

/* Trial pc */
@media screen and (min-width: 769px){
    .trial__wrapper {
        max-width: 1160px;
    }

    .trial__wrapper::before {
        content: '';
        position: absolute;
        top: 2%;
        left: -5%;
        width: 114%;
        height: 40%;
        background-image: url(../images/background.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

.trial__wrapper::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 81%;
        height: 18%;
        background-image: url(../images/background2.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .section--trial {
        padding-bottom: 120px;
    }

    .title__trial {
        padding-top: 120px;
    }

    .trial__subTitle {
        margin: 100px auto 0;
        gap: 32px;
        padding: 32px;
        width: fit-content;
    }

    .trial__subTitle img {
        width: 120px;
        padding: 0;
    }

    .trial__content {
        padding: 0;
    }   

    .trial__txt {
        font-size: 2.4rem;
    }

    .trial__price {
        font-size: 6.4rem;
        padding: 0;
    }

    .trial__price span {
        font-size: 1.4rem;
    }

    .ribbon-pc {
        display: block;
        position: absolute;
        top: -70px;
        left: 50%;
        width: 60.3%;
        transform: translateX(-50%);
        z-index: 2;
    }

    .ribbon-sp {
        display: none;
    }

    .trial__item {
        margin-top: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item__vegix {
        margin: 60px 38px 59px 11px;
        padding: 0;
    }

    .trial__itemTxt {
        margin: 0;
    }

    .item__kuchibue {
        margin: 64px 11px 64px 36px;
        padding: 0;
    }

    .trial__btn {
        margin: 93px auto 0;
    }
}/* pc 769px */

/* Quality */
.section--quality {
    background-image: url(../images/quality.jpeg);
    background-size: cover;
    background-position: center;
    opacity: 0.8;
    padding-bottom: 120px;
}

.title__quality {
    width: 72.5%;
    max-width: 471px;
    height: auto;
    margin: 0 auto;
    padding-top: 72px;
}

.quality__content {
    background-color: rgba(255, 255, 255, 0.80);
    margin-top: 49px;
    padding: 19px 10px 24px 10px;
}

.quality__subtitle {
    padding-left: 7px;
}

.subtitle__txt {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1; 
    background-color: rgba(64, 186, 141, 0.50);
    padding: 9px 10px 15px 7px;
    position: relative;
    display: inline-block;
    z-index: 1;
}

.subtitle__txt::before {
    content: '';
    position: absolute;
    top: -9px;
    left: -7px;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    z-index: -1;
}

.subtitle__txt span {
    display: block;
    margin-top: 6px;
}

.quality__txt {
    font-size: 1.4rem;
    margin-top: 24px;
}

.quality__txt span {
    color: #CB2222;
    font-weight: 700;
    border-bottom: dotted 2.8px #FFF88C;
}

/* Quality pc */
@media screen and (min-width: 769px){
    .section--quality {
        padding-bottom: 247px;
    }

    .title__quality {
        padding-top: 120px;
    }

    .quality__item {
        margin-top: 78px;
    }

    .quality__content {
        margin: 0;
        padding: 42px 0 80px 0;
    }

    .quality__subtitle {
        max-width: 700px;
        margin: 0 auto;
    }

    .subtitle__txt {
        font-size: 2.4rem;
        padding: 21px 80px 37px 16px;
    }

    .subtitle__txt::before {
        top: -12px;
        left: -15px;
        width: 100%;
        height: 100%;
        border: 2px solid #000;
    }

    .subtitle__txt span {
        margin: 16px 0 0 60px;
    }

    .quality__txt {
        font-size: 1.6rem;
        margin: 74px auto 0;
        max-width: 650px;
    }
}/* pc 769px */

/* Farmer */
.section--farmer {
    background-color: #FCF9F0;
    padding-bottom: 72px;
    position: relative;
}

.section--farmer::before {
    content: "";
    position: absolute;
    top: -10vw;
    left: 0;
    width: 100%;
    height: 50%;
    background: url(../images/wave01.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.title__farmer {
    width: 79%;
    max-width: 502px;
    height: auto;
    margin: 0 auto;
    padding-top: 72px;
}

.farmer__subtitle {
    width: 100%;
    max-width: 702px;
    height: auto;
    margin: 0 auto;
    margin-top: 48px;
}

.farmer__content {
    background-color: #FFF;
    margin-top: 48px;
}

.content__sp {
    display: block;
    width: 94.8%;
    height: auto;
    margin: 0 auto;
    padding-top: 17px;
    position: relative;
    z-index: 2;  
}

.firstContent__pc,
.secondContent__pc {
    display: none;
}

.firstFarmer,
.secondFarmer {
    display: block;
    width: 94.5%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    margin-top: -23px;
    z-index: 1;
}

.farmer__name {
    font-size: 1.6rem;
    line-height: 1.5; 
    letter-spacing: 0.1rem;
    margin-top: 22px;
}

.farm,
.spBr {
    display: block;
    border-bottom: dotted 3.2px #006B3E;
    width: fit-content;
    margin: 0 auto;
}

.content__txt {
    font-size: 1.4rem;
    padding: 20px 16px 43px 17px;
}

/* Farmer pc */
@media screen and (min-width: 769px){
    .section--farmer {
        padding-bottom: 120px;
    }

    .section--farmer::before {
        top: -8vw;
        background: url(../images/wave01-pc.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .title__farmer {
        padding-top: 120px;  
    }   

    .farmer__subtitle {
        margin-top: 72px;
    }

    .farmer__content {
        display: flex;
        margin-top: 72px;
    }

    .farmer__content:last-of-type {
        margin-top: 62px;
    }

    .content__sp {
        display: none;
    }

    .firstContent__pc {
        display: block;
        margin: 78px 59px 0 0;
        width: 90.5%;
    }

    .secondContent__pc {
        display: block;
        margin: 78px 0 0 30px;
        width: 95%;
    }

    .firstFarmer {
        margin: 78px 90px 47px 48px;
    }

    .secondFarmer {
        margin: 78px 58px 47px 110px;
        order: 2;
    }

    .second__txt {
        order: 1;
    }

    .firstTxt__group {
        margin: 15px 70px 71px 24px;
    }

    .secondTxt__group {
        margin: 15px 12px 69px 53px;
    }

    .farmer__name {
        font-size: 1.8rem;
        border-bottom: dotted 3.2px #006B3E;
        width: fit-content;
        margin: 0;
    }

    .content__txt {
        font-size: 1.6rem;
        padding: 0;
        margin-top: 12px;
    }

    .farm, 
    .spBr{
        display: inline;
        border-bottom: none;
    }
}/* pc 769px */

/* Voice */
.section--voice {
    padding-bottom: 72px;
    position: relative;
}

.section--voice::before {
    content: "";
    position: absolute;
    top: -5vw;
    left: 0;
    width: 100%;
    height: 50%;
    background: url(../images/wave02.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.title__voice {
    width: 87.7%;
    max-width: 542px;
    height: auto;
    margin: 0 auto;
    padding-top: 104px;
}

.voice__content {
    background-image: url(../images/background_voice.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 48px;
    border-radius: 20px;
}

.voiceImg {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 365px;
    border-radius: 20px 20px 0 0;
}

.voice__num {
    color: #FF601F;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1; 
    letter-spacing: 0.1rem;
    padding: 14px 0 0 20px;
}

.voice__subtitle {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1; 
    margin-top: 27px;
}

.name {
    display: block;
    margin-top: 14px;
}

.voice__txt {
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 27px 16px 44px 16px;
}

/* Voice pc */
@media screen and (min-width: 769px){
    .section--voice {
        padding-bottom: 120px;
    }

    .section--voice::before {
        top: -2vw;
        background: url(../images/wave02-pc.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .title__voice {
        padding-top: 200px;
    }

    .voice__list {
        margin-top: 72px;
        display: flex;
        justify-content: center;
        gap: 33px;
    }

    .voice__content {
        flex: 1;
        margin: 0;
    }
    
    .voice__num {
        font-size: 1.8rem;
        padding: 13px 0 0 20px;
    }

    .voice__subtitle {
        font-size: 1.8rem;
        margin-top: 25px;
    }

    .name {
        margin-top: 12px;
    }

    .voice__txt {
        font-size: 1.6rem;
        padding: 26px 27px 31px 27px;
    }
}/* pc 769px */

/* Faq */
.section--faq {
    position: relative;
    padding-bottom: 150px;
    z-index: 1;
}

.section--faq::before {
    content: "";
    position: absolute;
    inset: 0; 
    background-image: url(../images/background_faq.jpeg);
    background-size: cover;
    background-position: center;
    opacity: 0.3; 
    z-index: -1;
}

.title__faq {
    width: 72.8%;
    max-width: 408px;
    height: auto;
    margin: 0 auto;
    padding-top: 72px;
}

.accordion__container {
    margin-top: 48px;
}

.according__item {
    width: 100%;
    height: auto;
    max-width: 1160px;
    background-color: rgba(255, 255, 255, 0.80);
}

.according__title {
    position: relative;
    border: solid 1px #000;
    cursor: pointer;
}

.according__title::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 90px;
    right: 5px;
    background-image: url(../images/arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.according__title.active::after {
    transform: translateY(-50%) rotate(-180deg); 
}

.titleImg {
    width: 10.9%;
    max-width: 78px;
    margin-left: 6px;
}

.first__content {
    font-size: 1.6rem;
    padding: 8px 18px 18px 21px;
}

.second__content {
    font-size: 1.6rem;
    padding: 8px 21px 42px 21px;
}

.according__content {
    border: solid 1px #000;
    border-top: none;
    display: none;
}

.content__mainTxt {
    font-size: 1.6rem;
    font-weight: 700;
    padding: 8px 11px 0 21px;
}

.content__firstTxt {
    font-size: 1.4rem;
    padding: 7px 11px 19px 21px;
}

.content__secondTxt {
    font-size: 1.4rem;
    padding: 7px 11px 31px 21px;
}

/* Faq pc */
@media screen and (min-width: 769px){
    .section--faq {
        padding-bottom: 263px;
    }

    .title__faq {
        padding-top: 120px;
    }

    .accordion__container {
        margin-top: 64px;
    }

    .according__title {
        display: flex;
        align-items: center;
        gap: 33px;
    }

    .according__title::after {
        width: 24px;
        height: 24px;
        top: 55px;
        right: 40px;
    }

    .titleImg {
        width: auto;
        margin: 11px 0 5px 21px;
    }

    .first__content,
    .second__content {
        font-size: 2.0rem;
        line-height: 1;
        padding: 46px 0 45px 0;
    }

    .according__content {
        gap: 34px;
    }

    .content__mainTxt {
        font-size: 2.0rem;
        padding: 0;
        padding-top: 43px;
    }

    .content__firstTxt,
    .content__secondTxt{
        font-size: 1.6rem;
        padding: 20px 0 92px 0;
    }
}/* pc 769px */

/* Trial */
.section--secondTrial {
    background-color: #519F79;
    padding-bottom: 120px;
}

.trial__wrapper {
     max-width: 91.4%;
     margin: 0 auto;
     position: relative;
}

/* Trial pc */
@media screen and (min-width: 769px){
    .section--secondTrial {
        padding-bottom: 120px;
    }

    .trial__wrapper {
        max-width: 1160px;
    }

    .trial__wrapper::before {
        content: '';
        position: absolute;
        top: 2%;
        left: -5%;
        width: 114%;
        height: 40%;
        background-image: url(../images/background.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .trial__wrapper::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 81%;
        height: 18%;
        background-image: url(../images/background2.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}/* pc 769px */

/* Footer */
.footer__logo {
    width: 150px;
    display: block;
    margin: 48px auto 0;
}

.copy {
    text-align: center;
    font-size: 1.0rem;
    padding: 24px 0 24px 0;
}

/* Footer pc */
@media screen and (min-width: 769px){
    .footer__wrapper {
        max-width: 1160px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    } 
    
    .footer__logo {
        margin: 37px 0 37px 0;
    }

    .copy {
        text-align: start;
        padding: 0;
    }
}/* pc 769px */