@charset "utf-8";
/* --------------
    common
-------------- */
:root {
    --primaryorange:#FBE06C;
    --primarydeeporange:#EFB147;
    --primarybase:#F5F5F5;
    --textcolor:#333;
}
html {
    font-size: 62.5%;
}
body  {
    font-family: 
    'Noto Serif JP',
    serif;
    font-style: normal;
    color: #333333;
    background-color:var(--primarybase);
    line-height: 1.5;
  }

.title {
    position: relative;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    background: linear-gradient(transparent 0%,var(--primarydeeporange) 0%);
    background-repeat: no-repeat;
    background-size: 4rem 0.2rem;
    background-position: bottom;
    padding-bottom: 20px;
}

.highlight__sp {
    background: linear-gradient(transparent 30%, var(--primaryorange) 30%);
}
.reverse {
    flex-direction: row-reverse;
}
/* ↓pc↓ */
@media screen and (min-width:769px) {
    .title__pc {
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 1.5;
        background: linear-gradient(transparent 0%,var(--primarydeeporange) 0%);
        background-repeat: no-repeat;
        background-size: 7.2rem 0.2rem;
        background-position: bottom;
        padding-bottom: 20px;
        }
    .highlight__pc {
        background: linear-gradient(transparent 40%, var(--primaryorange) 40%);   
    }
}
/* ↑pc↑ */

/* --------------
    header
-------------- */
.header {
    display: flex;
    height: 64px;
    padding: 20px 16px;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: 8%;
    margin-right: 8%;
}
.header__topic {
    width: 128px;
    height: 38px;
}

.nav {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: var(--primarybase);
    z-index: 10;
    transform: translateX(-100%);
    transition: transform 0.4s;
}
.nav.active {
    transform: translateX(0);
}
.nav__list {
    display: flex;
    margin-top: 150px;
    flex-direction: column;
    gap: 30px;
}
.nav__item a{
    padding: 8px;
    font-size: 16px;
    color: var(--textcolor);
    background-color: var(--primarybase);
    display: block;
    text-align: center;
    text-decoration: none;
}
.hamburger {
    position: absolute;
    top: 32px;
    right:32px;
    cursor: pointer;
    width: 32px;
    height: 24px;
    z-index: 10;
    top: 50%;
    transform: translate(0,-50%);
}
.hamburger span {
    transition: all .3s;
    position: absolute;
    height: 2px;
    background-color: #333;
    width:100%;
    z-index: 10;
}
.hamburger span:nth-of-type(1) {
    top: 4px;
}
.hamburger span:nth-of-type(2) {
    top: 12px;
}
.hamburger span:nth-of-type(3) {
    top: 20px;
}
.hamburger.open span:nth-of-type(1) {
    top: 10px;
    transform: translateY(6px) rotate(-33deg);
}
.hamburger.open span:nth-of-type(2) {
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    top: 22px;
    transform: translateY(-6px) rotate(33deg);
}
/* ↓pc↓ */
@media screen and (min-width:769px) {
    .header {
        max-width: 1440px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav {
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        position: static;
        transform: translateX(0);
        justify-content: space-between;
    }
    .nav__list {
        margin-top: 0;
        flex-direction: row;
    }
    .nav__item {
        font-size: 1.6rem;
        line-height: 1.3;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.5;
        gap: 25px;
    }
    .nav__item a {
        padding: 0px;
    }
    
    .hamburger {
        display: none;
    }
}
/* ↑pc↑ */

/* --------------
    main
-------------- */

/* main image */
.mainImage__leftPcSp {
    display: flex;
    height: 750px;
    flex-direction: column;
    align-items: center;
    /* background-color: rgba( 255, 255, 255, 0.5 ); */
    background-image: url(../images/background_mainImage_sp.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.mainImage__catchCopy {
    display: flex;
    width: 341px;
    padding: 160px 0px 80px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}
.mainImage__titleTxt {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.8;
}
.mainHighlight__beige {
        background: linear-gradient(transparent 20%, #D7D1BC 30%);
}
.mainHighlight__pink {
        background: linear-gradient(transparent 20%, #E2B6C2 30%);
}
.mainHighlight__green {
        background: linear-gradient(transparent 20%, #7ABA77 30%);
}
.mainImage_txt_pc {
    display: none;
}
.mainImage__points {
    display: flex;
    padding: 28px 0px;
    align-items: center;
    gap: 10px;
}
.mainImage__points img {
    width: 110px;
}
.fixBtn__sp{
    position:fixed;
    z-index:1;
    padding:20px 0;
    right:20px;
    bottom:20px;
  }
.fixBtn__pc {
    display: none;
}
/* ↓pc↓ */
@media screen and (min-width:769px) {
    .mainImage__bg {
        display: flex;
    }
    .mainImage__leftPcSp {
        width: 50%;
        background-image: none;
        background-color: var(--primarybase);
    }
    .mainImage__rightPc {
        width: 50%;
        background-image:url(../images/background_mainImage_pc.png);
        background-size: cover;
    }
    .mainImage__catchCopy {
        width: 100%;
        padding-left: 8%;
    }
    /*  */
    .mainImage__pointsWrap {
        align-items: center;
    }
    .mainImage_txt_pc {
        display: flex;
        position: relative;
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.5;
    }
    .mainImage_txt_pc img {
        position: absolute;
        width: 30px;
        top: -50%;
        left: 65%;
    }
    .mainImage_txt_pc p {
        padding-left: 15%;
    }
    .mainImage__titleTxt {
        font-size: 4rem;
        font-weight: 700;
        line-height: 1.8;
        margin-left: 8%;
    }
    .mainHighlight__beige {
        background: linear-gradient(transparent 70%, #D7D1BC 70%);
    }
    .mainHighlight__pink {
        background: linear-gradient(transparent 70%, #E2B6C2 70%);
    }
    .mainHighlight__green {
        background: linear-gradient(transparent 70%, #7ABA77 70%);
    }
    .mainImage__points {
        gap: 13px;
    }
    .mainImage__points img{
        width: 142px;
    }
    .fixBtn__pc {
        width: 268px;
        height: 259px;
        display: flex;
        position:fixed;
        z-index:1;
        padding:20px 0;
        right:20px;
        bottom:20px;
    }
    .fixBtn__sp {
        display: none;
    }
}
/* ↑pc↑ */
    
/* about */
.about {
    padding: 64px 10px;
}
.about__title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.5;
}
.about__txt {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.5;
    margin-top: 20px;
}

/* ↓pc↓ */
@media screen and (min-width:769px) {
    .about {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .about__title__pc {
        text-align: center;
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 1.5;
    }
    .about__txt__pc {
        text-align: center;
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 30px;
        }
    .spBr {
        display: none;
    }
}    

/* ↑pc↑ */
/* reason */
.reason {
    padding: 64px 0px;
}

.reason__title {
    display: flex;
    flex-direction: row-reverse;
    justify-content: right;
    align-items: flex-start;
    gap: 7px;
}

.reason__title span {
    font-size: 2.4rem;
    font-weight: 900;
    writing-mode: vertical-rl;
    background: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
    padding: 0.2em;
    display: inline-block;
}

.reason__topics {
    padding-top: 48px;
}

.reason__txt {
    position: relative;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2;
    margin: 40px 16px auto 14px;
}
.reason__titleWrap {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.reason__txt p {
    margin-top: 30px;
}
.reason__point img {
    width: 110px;
}

/* ↓pc↓ */
@media screen and (min-width:769px) {
    .reason {
        padding: 50px 5%;
    }
    .reason__topics {
        margin-left: 5%;
        margin-right: 5%;
    }
    .reason__items {
        display: flex;
        height: 437px;
        padding: 33px 6px 33px 0px;
    }
    .reason__titleWrap {
        padding-right: 65%;
    }
    .reason__titleWrap__mid {
        padding-right: 0;
        padding-left: 65%;
    }
    .reason__photo img {
        max-width: none;
        height: auto;
    }
    .reason__items p {
        margin: 10% 22% 0 5%;
    }
    .reason__items__mid p{
        margin: 10% 5% 0 22%;
    } 
    .reason__point img{
        width: 142PX;
    }
}    
/* ↑pc↑ */

/* farmer */
.farmer {
    padding: 64px 16px;
    background-image: url(../images/farmer_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.7);
    background-blend-mode:lighten;
}
.farmer__topics {
    color: #308916;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 48px;
}
.farmer__txt {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.5;
    margin-top: 30px;
}

.farmer__introduceWrap {
    position: relative;
}
.farmer__introduceWrap img {
    position: absolute;
    top: -70%;
    left:80%
}
.farmer__introduce {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 81px;
}
.farmer__photo {
    padding-top: 10px;
    padding-left: 30px;
    z-index: 10;
}
.farmer__photo img {
    width: 266px;
}
.farmer__1,.farmer__2 {
    margin-top: 48px;
}
.farmer__name {
    position: relative;
    display: inline-block;
    height: 68px;
    width: 184px;
    padding-top: 14px;
    padding-left: 16px;
    background-color:rgba(239, 177, 71, 0.80);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}
.farmer__name::after {
    position: absolute;
    top: 0;
    width: 0px;
    height: 0px;
    border-color:rgba(239, 177, 71, 0.80) transparent;
    border-style: solid;
    content: '';
}
.farmer__name::after {
    right: -18px;
    border-width: 34px 18px 34px 0px;
}
.farmer__comment {
    display: flex;
    padding: 30px;
    margin-top: -12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #FBE06C;  
}
.farmer__comment h5 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
}
.farmer__comment p {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
}
/* ↓pc↓ */
@media screen and (min-width:769px) {
    .farmer__topics {
        color: #308916;
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 1.5;
        margin-top: 20px;
    }
    .farmer__topics__pc {
        font-size: 4.8rem;
        font-weight: 700;
        line-height: 1.5;
    }
    .farmer__txt {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2;
        padding: 0% 17%;
        margin-top: 50px;
    }
    .farmer__introduceWrap img {
        position: absolute;
        width: 30px;
        top: -70%;
        left:67%
    }
    .spBr {
        display: none;
    }
    .farmer__photoWrap {
        padding-left: 164px;
        padding-right: 164px;
        display: flex;
    }
    .farmer__photo {
        text-align: right;
    }
    .farmer__photo img {
        width: 310px;
    }
    .farmer__1,.farmer__2 {
        position: relative;
    }
    .farmer__name {
        position: absolute;
        font-size: 1.6rem;
        width: 238px;
        padding-top: 12px;
        padding-left: 38px;
        top: -20px;
    }

    .farmer__comment {
        width: 472px;
        gap: 10px;
        padding: 30px;
    }
    .farmer__comment h5 {
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.5;
    }
    .farmer__comment p {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.5;
    }
    .farmer__2 {
        margin-left: 120px;
    }
}    

/* ↑pc↑ */

/* review */
.review {
    padding: 64px 16px;
}
.review__items {
    margin-top: 56px;
    text-align: center;
}

.review__comment {
    position: relative;
    display: inline-block;
    margin: 18px 0;
    padding: 20px 12px;
    min-width: 120px;
    max-width: 100%;
    color: #000;
    background:var(--primarybase);
    border: solid 1px #000;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: left;
}
.review__comment:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid var(--primarybase);
    z-index: 2;
}
.review__comment:after {
    content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #000;
    z-index: 1;
}

.review__titleTxt {
    color: var(--textcolor);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
}
.review__txt {
    color: var(--textcolor);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 10px;
}

/* ↓pc↓ */
@media screen and (min-width:769px) {
    .review__items {
        display: flex;
        margin-top: 76px;
        text-align: left;
    }
    .review__comment {
        margin-left: 85px;
    }
    .review__items div {
        margin-top: auto;
        margin-bottom: auto;
    }
    .review__comment:nth-child(1) {
        margin-left: 133px;
    }
    .review__list {
        margin-left: 100px;
        margin-right: auto;
    }
    .review__comment {
        display: flex;
        width: 766px;
        padding: 20px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        flex-shrink: 0;
    }
    .review__comment:before {
        transform: rotate(270deg);
        top: 80px;
        left: -1.2%;
    }
    .review__comment:after {
        transform: rotate(270deg);
        top: 78px;
        left: -1.5%;
    }
}    

/* ↑pc↑ */

/* trial set */
.trialSet__bg {
    padding: 64px 16px;
    background-image: url(../images/trialSet_bg_sp.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.trialSet {
    height: 1139px;
    border-radius: 30px;
    background: #FFF;
}
.trialSet__title__bg {
    width: 344px;
    height: 46px;
    background: #EFB147;
    display: flex;
    align-items: center;
}
.trialSet__titleWrap {
    position: relative;
}
.trialSet__six {
    width: 87px;
    position: absolute;
    top: 40%;
    z-index:1;
}
.trialSet__car{
    width: 86px;
    /* display: flex; */
    flex-direction: row-reverse;
    padding-top: 20px;
    margin-left: auto;
}
.trialSet__title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-indent: 10rem;
}
.trialSet__details {
    text-align: center;
}
.trialSet__titleTxt {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 36px;
}
.trialSet__txt {
    margin-top: 12px;
}
.trialSet__txt:nth-child(2) {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5; 
}
.trialSet__txt:nth-child(3) {
    color: #EFB147;
    -webkit-text-stroke: #896529 1px;
    font-family: "Noto Sans JP";
    font-size: 6.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
}
.trialSet__txt:nth-child(4) {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    padding-left: 164px;
}
.trialSet__txt span {
    background: linear-gradient(transparent 70%, #308916 30%);
}
.trialSet__price img {
    margin: 6px 17px 0px 17px;
}
.setImg {
    margin: 30px 10px 0px 20px;
}
.trialSet__setTitleTxt {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 14px;
}
.trialSet__setTxt {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 10px;
}


/* ↓pc↓ */
@media screen and (min-width:769px) {
    .trialSet {
        height: auto;
        padding-top: 26px;
    }
    .trialSet__bg {
        background-image: url(../images/trialSet_bg_pc.png);
        padding: 36px 9%;
    }
    .trialSet__title__bg {
        width: 70%;
        height: 79px;
        margin: 0 auto;
    }
    .trialSet__six {
        width: 123px;
        top: -30%;
        left: 10%;
    }
    .trialSet__car {
        position: absolute;
        top: -36%;
        left: 70%;
        width: 187px;
    }
    .trialSet__title {
        text-align: center;
        font-size: 4.8rem;
        font-weight: 700;
        line-height: 1.5;
    }
    .trialSet__details {
        display: flex;
        gap: 30px;
        padding-bottom: 66px;
    }
    .trialSet__price img {
        max-width: none;
        height: auto;
        margin-top: 24px;
    }
    .setImg {
        height: 226px;
    }
    .trialSet__txt:nth-child(2) {
        margin-top: 24px;
    }
    .trialSet__txt:nth-child(3){
        margin-top: 20px;
    }
    .trialSet__txt:nth-child(4) {
        margin-top: 0px;
        text-align: right;
    }
    .trialSetA {
        order: 1;
    }
    .trialSetB {
        order: 2;
    }
    .trialSet__price {
        order: 3;
    }
}    

/* ↑pc↑ */

/* quality */
.quality {
    padding: 64px 16px;
    text-align: center;
}
.quality__topics {
    color: #308916;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
}
.quality__topics span {
    font-size: 2rem;
}
.quality__farmer {   
    width: 180px;
    height: 260px;
}
.quality_vegetables{
    width: 343px;
    height: 238px;
}
.quality__topics {
    margin-top: 30px;
}
.quality__items {
    margin-top: 30px;
}

.quality__items p {
    margin-top: 30px;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2;
}

/* ↓pc↓ */
@media screen and (min-width:769px) {
    .quality__topics span {
        color: #308916;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.5;
        margin-top: 60px;
    }
    .quality__topics__pc {
        font-size: 4.8rem;
    }
    .spBr {
        display: none;
    }
    .quality__list {
        margin-left: 22%;
        margin-right: 22%;
    }
    .quality__items {
        display: flex;
        flex-direction: row;
        gap: 80px;
        margin-top: 60px;
    }
    .quality__items:nth-child(2) {
        flex-direction: row-reverse;
        gap: 80px;
    }
    .quality__items p {
        width: 71%;
    }
}    

/* ↑pc↑ */
/* faq */
.faq {
    padding: 64px 16px;
}
.faq_titleTxt {
    color: #308916;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
}
.faq__txt {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
}
.faq__txt span {
    font-weight: bold;
}

/* accordion */
.faq__txt {
    display: none;
}
.faq_titleTxt {
    background-color: #FFF;
    padding: 12px 45px 10px 20px;
    margin-top: 30px;
    transition: background .3s ease;
    cursor: pointer;
    position: relative;
  }
  
  .faq_titleTxt::before,
  .faq_titleTxt::after{
    position:absolute;
    content:'';
    top:1px;
    right:20px;
    bottom:0;
    width:12px;
    height:2px;
    margin:auto;
    background:#308916;
  }
  .faq_titleTxt::after{
    transform:rotate(-90deg);
    transition:transform 0.3s;
  }
  .faq_titleTxt.active::after{transform:rotate(0deg);}
  
  .faq__txt {
    background-color: #FFF;
    padding: 12px 20px 10px;
  }

  
  /* ↓pc↓ */
@media screen and (min-width:769px) {
    .faq__list {
        margin-top: 57px;
        margin-left: 20%;
        margin-right: 20%;
    }
}    

/* ↑pc↑ */

/* footer */
.copy {
    margin: 40px auto;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5;
}