@charset "UTF-8";
/*=================
common 
=================*/
:root{
    --primary-green: #86C568;
    --primary-ligthGreen: #C4DEB8;
    --primary-pink: #F36D6D;
    --primary-yellow: #FCEDB1;
    --primary-white:#FFFFFF;
    --primary-brown: #4D321A;
    --primary-lightBrown: #CFB297;
}


html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    color: #4D321A;
    font-family: "Noto Sans JP",
    DM Sans,
    Crimson Text;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 3.6px;
    font-weight: 400;
    background-color: #F1F7ED;
    overflow-x: hidden; 
}

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

.navName{
    color: var(--primary-ligthGreen);
    font-family: "Crimson Text";
    font-size: 2.4rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: 4.32px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}


.title{
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 5.76px;
    position: relative;
    z-index: 200;
    margin-bottom: 30px;
}

.subTitle{
    font-size: 1.2rem;
    line-height: normal;
    letter-spacing: 2.88px;
    margin-bottom: 14px;
}

/* common pc */
@media screen and (min-width:769px){
    body{
        font-size: 1.6rem;
        line-height: 28px;
        letter-spacing: 4.8px;
        }

    .title{
        font-size: 3.6rem;
        line-height: 52px;
        letter-spacing: 8.64px;
        margin-bottom: 50px;
    }

    .subTitle{
        font-size: 1.6rem;
        letter-spacing: 3.84px;
        margin-bottom: 20px;
    }

    .spBr{
        display: none;
    }

    .navName{
        margin-bottom: 60px;
        font-size: 3.4rem;
        letter-spacing: 6.12px;
    }

}/* pc 769px */

/*=================
.splash-screen 1秒後に消える
=================*/
.splash-screen{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; 
    
}

.splash-screen img{
    width: 240px;
}


/*=================
.header 
=================*/
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.logoImg{
    width: 115px;
    height: 34px;
}

.nav{
    background: rgba(241,247,237, 0.9);
    transform: translateY(-100%);
    transition: transform 0.4s;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
}

.nav.is-open{
    transform: translateY(0%);
}

.nav__header{
    display: flex;
    padding: 10px;
    justify-content: flex-end;
}

.nav__list{
    padding: 60px 35px 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.nav__left{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 47px;
    transform: translateY(1px);
}

.nav__right{
    gap: 35px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.nav__nameSp{
    text-align: right;
    font-family: "Crimson Text";
    font-size: 1.2rem;
    line-height: 3;
    letter-spacing: 2.16px;
}

.nav__nameHp{
    display: none;
}

.nav__btnSp{
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 3;
    letter-spacing: 2.88px;
}

.nav__hp{
    display: none;
}

/* .header pc */
@media screen and (min-width:769px){

    .header{
        padding: 20px 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 98px;
    }

    .logoImg{
        width: 196px;
        height: 58px;
    }

    .nav__header{
        display: none;
    }

    .hamburger__btn{
        display: none;
    }

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

    .nav__list{
        flex-direction: column;
        padding: 0;
    }

    .nav__left{
        flex-direction: row;
    }

    .nav__nameSp{
        display: none;
    }

    .nav__nameHp{
        display: block;
        position: relative;
        font-size: 1.8rem;
        line-height: 30px;
        letter-spacing: 5.4px;
        font-family: "Crimson Text";
    }

    .nav__nameHp::after{
        content: "";
        display: block;
        width: 28px;
        height: 1px;
        background-color: var(--primary-brown);
        transform: rotate(-65deg);
        position: absolute;
        top: 15px;
        right: -34px;
    }

    .header .nav__nameHp:last-of-type::after{
        display: none;
    }
    
    .nav__btnSp{
        display: none;
    }

    /* nav 吹き出し表示 */
    .nav__right{
        flex-direction: row;
    }

    .nav__hp{
        display: block;
        position: relative;
    }

    .nav__right .nav__hp:first-of-type{
        display: none;
        position: absolute;
        top: 40px;
        left: -120px;
    }

    .nav__right .nav__hp:nth-of-type(2){
        display: none;
        position: absolute;
        top: 40px;
        left: -15px;
    }

    .nav__right .nav__hp:nth-of-type(3){
        display: none;
        position: absolute;
        top: 40px;
        left: 110px;
    }

    .nav__right .nav__hp:nth-of-type(4){
        display: none;
        position: absolute;
        top: 40px;
        left:245px;
    }

    .nav__right .nav__hp:nth-of-type(5){
        display: none;
        position: absolute;
        top: 40px;
        left: 380px;
    }

    .nav__right .nav__hp:last-of-type{
        display: none;
        position: absolute;
        top: 40px;
        left: 480px;
    }
    
    .nav__hp img{
        width: 195px;
    }

    .nav__btnHp{
        font-size: 1.4rem;
        line-height: 14px;
        letter-spacing: 4.2px;
        position: absolute;
        top: 15px;
        left: 40px;
        transform: translate(0%, 0%);
        width: 110px;
    }

    .nav__hp:nth-of-type(3) .nav__btnHp{
        left: 63px;
    }

    .nav__hp:nth-of-type(4) .nav__btnHp{
        left: 52px;
    }

    .nav__hp:nth-of-type(5) .nav__btnHp{
        left: 63px;
    }
}/* pc 769px */


/*=================
.main 
=================*/
.main__visual{
    background-image: url(../sp-main.jpg);
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 100;
}

.catchcopy{
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    text-align: center;
    transform: translate(-50%);
    white-space: nowrap;
    background: rgba(118, 189, 85, 0.70);
    padding: 38px;

    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 4.32px;
}

.catchcopy h1 {
    color: var(--primary-white);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Shippori Mincho";
    font-size: 3rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 8.4px;
    line-height: 38px;
    padding: 5px 0;
}

/* .main pc */
@media screen and (min-width:769px){
    .main__visual{
        background-image: url(../pc-main.jpg);
    }

    .catchcopy{
        height: 368px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        font-size: 2.4rem;
        line-height: 36px;
        letter-spacing: 5.76px;
    }

    .catchcopy h1{
        font-size: 3.6rem;
        letter-spacing: 10.08px;
        margin: 40px 0;
    }


}/* pc 769px */

/*=================
.article__main 
=================*/
.article__main{
    display: flex;
    justify-content: center;
    flex-direction: column;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.read{
    padding: 86px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 328px;
    position: relative;
    justify-content: center;
}

.sentence{
    background-color: var(--primary-white,0.6);
    padding: 13px 18px;
    width: 279px;
    z-index: 100;
    border-radius: 6px;

    font-size: 1.4rem;
    line-height: 30px;
    letter-spacing: 4.2px;
}

.read__big{
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 5.4px;
}

.read__bold{
    font-weight: 700;
}


.english1{
    position: absolute;
    top: -10px;
    left: -20px;
    width: 103px;
}

.english2{
    position: absolute;
    bottom: 60px;
    right: -30px;
    width: 123px;
}

.calotte{
    position: absolute;
    bottom: 60px;
    right: 30px;
    width: 60px;
    z-index: 100;
}

.english1,
.english2{
        animation: rotate 7s linear infinite;
}
@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg); 
    }
  }


.arrow01{
    width: 0;
    height: 52px;
    border-left: 1px solid var(--primary-brown);
    border-radius: 1.5px;
    position: relative;
    bottom: 0;
}

.arrow01::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -2.6px;
    width: 0;
    height: 12px;
    border-left: 1px solid var(--primary-brown);
    border-radius: 1.5px;
    transform: rotate(25deg);
}

/* .read pc */
@media screen and (min-width:769px){
    .read{
        width: 83%;
        max-width: 1200px;
        padding: 127px 30px;
    }

    .sentence{
        padding: 89px 135px;
        width: 100%;
        max-width: 1200px;
        z-index: 100;

        font-size: 1.8rem;
        line-height: 44px;
        letter-spacing: 5.4px;
    }

    .read__big{
        font-size: 2.4rem;
        line-height: 44px;
        letter-spacing: 7.2px;
    }

    .read__bold{
        font-weight: 700;
    }

    .english1{
        width: 205px;
        left: -100px;
    }

    .english2{
        width: 238px;
        right: -120px;
        bottom: -10px;
    }

    .calotte{
        width: 90px;
        right: 160px;
    }

}/* pc 769px */

/*=================
.why
=================*/
.why{
    padding: 100px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why .title:first-of-type{
    color: var(--primary-green);
}

.underline{
    width: 160px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    top: 192px;
}

.underline img{
    width: 100%;
    height: auto;
    transform: scale(3);
    transform-origin: left;
}

.bar01{
    width: 73%;
    height: 2px;
    background-color: var(--primary-ligthGreen);
    margin: 30px 0;
}

.point__item{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.point__content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.point .point__item:nth-child(2) .point__content{
    align-items: flex-end;
}


.point__title{
    width: 46px;
    margin: 0 59px;

}

.point__photo{
    width: 88%;
    padding-top: 43%;
    overflow: hidden;
    position: relative;
    margin: 20px 0 30px 0;
}

.pointImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.point__sentence{
    margin: 0 47px;
}

/* .read pc */
@media screen and (min-width:769px){
    .why{
        padding: 130px 0;
    }

    .why .title:first-of-type{
        margin-bottom: 20px;
    }

    .underline{
        width: 230px;
        top: 306px;
    }

    .bar01{
        margin: 80px 0;
    }

    .point__content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }


    .point__title{
        width: 59px;
        margin: 0 123px 0 34px;
    }

    .point__photo{
        width: 45%;
        padding-top: 20%;
        margin: 0;
    }

    .point__sentence{
        margin: 50px 27% 0;
        flex-basis: 100%;

        font-size: 1.6rem;
        line-height: 28px;
        letter-spacing: 4.8px;
    }

    .point .point__item:nth-child(2) .point__content{
        align-items: flex-start;
    }

    .point .point__item:nth-child(2) .point__title{
        order: 2;
        margin: 0 34px 0 123px;
    }

    .point .point__item:nth-child(2) .point__photo{
        order: 1;
    }

    .point .point__item:nth-child(2) .point__sentence{
        order: 3;
    }
}/* pc 769px */

/*=================
.trial
=================*/

.trial {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    border-radius: 500px;
    background-color: #FCEDB1;
    padding: 84px 0 94px;
}

.trial__hukidashi{
    width: 343px;
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
}

.trial__underline{
    width: 230px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    top: 208px;
    left: 50%;
    transform: translateX(-52%);
}

.trial__underline img{
    width: 100%;
    height: auto;
    transform: scale(2);
    transform-origin: left;
}

.trial .navName:first-of-type{
    color: var(--primary-lightBrown);
}

.trialSet {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trial__set{
    border-radius: 50px;
    background: var(--primary-white);
    width: 276px;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.trial__name{
    color: var(--primary-green);
    font-size: 1.4rem;
    font-weight: 700;
    /* line-height: 3.2; */
    letter-spacing: 1.4px;
}

.trial__name02{
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 1.2px;
}

.trialSet_item{
    margin-bottom: 40px;
}

.trialSet__begikkusu{
    background-image: url(../trial-1.jpg);
    width: 300px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.trialSet__kuchibue{
    background-image: url(../trial-2.jpg);
    width: 300px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.txt__begikkusu{
    background-color: #86C568;
    color: var(--primary-white);
    width: 100px;
    height: 32px;
    padding: 8px 9px;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 13px;
}

.txt__kuchibue{
    background-color: #86C568;
    color: var(--primary-white);
    width: 100px;
    height: 32px;
    padding: 8px 9px;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 13px;
}

.txt{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.priceSet{
    color: var(--primary-brown);
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.2px;
}

.price{
    font-family: "DM Sans";
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.place{
    color: var(--primary-brown);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.2px;
}

.trialBtn{
    background-color: var(--primary-pink);
    width: 297px;
    height: 66px;
    padding: 0 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    transition: color 0.3s;
    position: relative;
    z-index: 0;
}

.trialBtn__txt{
    color: var(--primary-white);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.8px;
    transition: color 0.3s;
    z-index: 1;
}

.trialBtn:hover .trialBtn__txt a {
    color: var(--primary-pink); 
}

/* ホバー時に変わる背景 */
.trialBtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: -3;
    width: 0;
    height: 103%;
    background-color: var(--primary-white);
    border-radius: 6px;
    transition: width 0.4s ease-in-out;
    z-index: 0;
}

/* ホバー時に横から色が変わる */
.trialBtn:hover::before {
    width: 101%;
}


.arrow02{
    width: 43px;
    height: 1px;
    background-color: var(--primary-white);
    border-radius: 1.5px;
    position: relative;
}

.arrow02::after {
    content: '';
    position: absolute;
    bottom: -3px;
    right: 4.4px;
    width: 0;
    height: 12px;
    border-left: 1px solid var(--primary-white);
    border-radius: 1.5px;
    transform: rotate(-60deg);
}

.trialBtn:hover .arrow02{
    background-color: var(--primary-pink);
}

.trialBtn:hover .arrow02::after{
    border-left: 1px solid var(--primary-pink);
}

/* .read pc */
@media screen and (min-width:769px){
    .trial{
        margin: 0 10px;
    }

    .trial__hukidashi{
        width: 508px;
        top: 180px;
    }

    .trial__underline{
        width: 570px;
        top: 253px;
        transform: translateX(-51%);
    }
    
    .trial__underline img{
        transform: scale(1);
    }

    .trial__set{
        width: 346px;
        height: 38px;
        margin-bottom: 51px;
    }

    .trial__name{
        font-size: 1.8rem;
        line-height: 32px;
        letter-spacing: 1.8px;
    }

    .trial__name02{
        font-size: 1.6rem;
        letter-spacing: 1.6px;
    }

    .trialSet__content{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: row;
        gap: 87px;
    }

    .trialSet__begikkusu{
        width: 360px;
        height: 260px;
        background-size: cover;
        background-position: center;
    }

    .trialSet__kuchibue{
        width: 360px;
        height: 260px;
        background-size: cover;
        background-position: center;
    }

    .txt__begikkusu{
        width: 118px;
        height: 42px;
        font-size: 1.6rem;
        letter-spacing: 1.6px;
    }

    .txt__kuchibue{
        width: 124px;
        height: 42px;
        font-size: 1.6rem;
        letter-spacing: 1.6px;
    }

    .txt{
        margin-top: 20px;
    }

    .priceSet{
        font-size: 1.4rem;
        letter-spacing: 1.4px;
    }

    .price{
        font-size: 2.6rem;
        letter-spacing: 2.6px;
    }

    .place{
        font-size: 1.4rem;
        letter-spacing: 1.4px;
    }

    .trialBtn{
        width: 406px;
        height: 75px;
    }

    .trialBtn__txt{
        font-size: 2.6rem;
        letter-spacing: 2.6px;
    }

}/* pc 769px */

/*=================
.farmers
=================*/
.farmers{
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.farmers .subTitle:first-of-type{
    color: var(--primary-green);
}

.farmers .title:first-of-type{
    color: var(--primary-green);
}

.farmers__hukidashi{
    position: absolute;
    top: 260px;
    left: 50%;
    transform: translateX(-50%);
    width: 336px;
}

.farmers__box{
    position: relative;
}

.farmers__list{
    background: var(--primary-white);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.25);
    margin: 30px 25px;
    padding: 48px 22px;
    position: relative;
}

.farmers__content{
    display: flex;
    flex-direction: column;
}

.farmers__title{
    color: var(--primary-brown);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 3.6px;
    margin-bottom: 16px;
}

.farmers__img{
    width: 281px;
    height: 251px;
    overflow: hidden;
}

.farmers__photo{
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: 74% 0%;
}

.txt__box{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name__box{
    width: 183px;
    border-radius: 22px;
    background-color: var(--primary-green);
    gap: 10px;
    padding: 8px;
    margin: 16px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.farmers__name{
    color: var(--primary-white);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1.92px;
    
}

.farmers__place{
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1.76px;
}

.farmers__txt{
    color: var(--primary-brown);
    font-size: 1.2rem;
    font-weight: 400;
    width: 254px;
}

.bar01__farmers{
    width: 281px;
    height: 2px;
    background-color: var(--primary-ligthGreen);
    margin: 20px 0;
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }

.spinach{
    width: 51px;
    position: absolute;
    top: 0px;
    left: 10px;
    transform: rotate(-8.812deg);
    animation: shake 0.8s ease-in-out infinite;
}

.tomato{
    width: 59px;
    position: absolute;
    top: 380px;
    right: 14px;
    transform: rotate(15.188deg);
    animation: shake 0.8s ease-in-out infinite;
}

.cabbage{
    width: 50px;
    position: absolute;
    bottom: 550px;
    right: 33px;
    transform: rotate(25deg);
    animation: shake 0.8s ease-in-out infinite;
}

.eggplant{
    width: 49px;
    position: absolute;
    bottom: 25px;
    left: 16px;
    animation: shake 0.8s ease-in-out infinite;
}

/* .farmers pc */
@media screen and (min-width:769px){
    .farmers{
        padding: 130px 0;
    }

    .farmers__hukidashi{
        top: 322px;
        width: 512px;
    }

    .farmers__list{
        margin: 100px 25px 30px;
        display: flex;
        flex-direction: row;
        /* width: 1030px; */
        justify-content: center;
        padding: 75px 9vw;
        position: relative;
    }

    .farmers__item {
        display: flex;
        flex-direction: row;
    }

    .farmers__title{
        font-size: 2.2rem;
        line-height: 28px;
        letter-spacing: 4.4px;
    }

    .farmers__name{
        font-size: 1.6rem;
        line-height: 22px;
        letter-spacing: 2.56px;
    }

    .farmers__place{
        font-size: 1.2rem;
        letter-spacing: 1.92px;
    }  
    
    .name__box{
        width: 209px;
    }

    .farmers__txt{
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 4.2px;
    }
    
    .bar01__farmers{
        width: 2px;
        height: 512px;
        margin: 50px 82px 0;
    }

    .spinach{
        width: 71px;
        top: 60px;
        left: 60px;
    }

    .tomato{
        width: 79px;
        top: 738px;
        left: -10px;
    }

    .cabbage{
        width: 70px;
        top: 220px;
        right: 13px;
    }

    .eggplant{
        width: 69px;
        bottom: 12px;
        left: 830px;
    }

}/* pc 769px */

/*=================
.voices
=================*/
.voices{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 18px 25px 100px;
}

.voices .subTitle:first-of-type{
    text-align: center;
}

.voices .title:first-of-type{
    line-height: 22px;
    letter-spacing: 2.4px;
}

.voices__underline{
    width: 210px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    top: 117px;
    left: 50%;
    transform: translateX(-82%);

}

.voices__underline img{
    width: 100%;
    height: auto;
    transform: scale(2);
    transform-origin: left;

}

.voices__hukidashi{
    width: 283px;
    position: absolute;
    top: 77px;
    left: 50%;
    transform: translateX(-51%);
}

.voices__list{
    gap: 24px;
    display: flex;
    flex-direction: column;
}

.voices__item{
    background-color: var(--primary-white);
    border: 4px solid var(--primary-lightBrown);
    padding: 20px 18px;
    /* width: 325px; */
    border-radius: 6px;
}

.voices__headline{
    position: relative;
}

.voices__decoration{
    width: 46px;
}

.voices__title{
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 1.6px;
}

.voices__name{
line-height: 22px;
letter-spacing: 1.2px;
margin-top: 7px;
}

.voices__txt{
    margin-top: 7px;
    font-style: normal;
}

.bar01__voices{
    width: 98%;
    height: 2px;
    background-color: var(--primary-lightBrown);
    margin-top: 7px;
}

.voices__great{
    width: 46px;
    position: absolute;
    top: -2px;
    right: 11px;
}

.voices__nice{
    width: 46px;
    position: absolute;
    top: -1px;
    right: 11px;
}

.voices__good{
    width: 39px;
    position: absolute;
    top: -1px;
    right: 4px;
}

/* .voices pc */
@media screen and (min-width:769px){
    .voices{
        padding: 0 40px 130px;
    }

    .voices__hukidashi{
        width: 515px;
        top: 100px;
    }

    .voices .title:first-of-type {
        line-height: 1.4;
        letter-spacing: 8.64px;
    }

    .voices__underline{
        width: 330px;
        top: 170px;
    }

    .voices__list{
        flex-direction: row;
        gap: 3.47vw;
        flex-wrap: wrap;
    }

    .voices__item{
        /* width: 356px; */
        flex: 1;
    }

    .bar01__voices{
        min-width: 319px;
    }

    .voices__title{
        font-size: 1.8rem;
        line-height: 1.2;
        letter-spacing: 1.8px;
    }

    .voices__name{
        font-size: 1.4rem;
        line-height: 1.5;
        letter-spacing: 1.4px;
    }

    .voices__txt{
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 4.2px;
    }

    .voices__great{
        right: 3px;
    }

    .voices__nice{
        right: 9px;
    }

    .voices__good{
        right: -2px;
    }

}/* pc 769px */

/*=================
.quality
=================*/

.quality{
    background-color: var(--primary-green);
    padding: 70px 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quality__underline{
    width: 290px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    top: 126px;
    left: 50%;
    transform: translateX(-50%);
}

.quality__underline img{
    width: 100%;
    height: auto;
    transform: scale(2);
    transform-origin: left;
}

.quality__read{
    color: var(--primary-white);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 2.88px;
    margin-top: 10px;
}

.bold{
    font-family: "Shippori Mincho";
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 5.4px;
}

.quality__txt{
    margin-top: 34px;
    font-size: 1.4rem;
    letter-spacing: 4.2px;
    width: 295px;
}

.box{
    width: 94%;
    height: 94%;
    border: 1px solid var(--primary-white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
}

/* .quality pc */
@media screen and (min-width:769px){
    .quality{
        padding: 130px 0;
    }

    .quality__underline{
        width: 390px;
        top: 256px;
    }

    .quality__read{
        font-size: 1.8rem;
        line-height: 1.8;
        letter-spacing: 5.4px;
    }

    .bold{
        font-size: 3.6rem;
        letter-spacing: 10.8px;
    }

    .quality__txt{
        margin-top: 60px;
        width: 920px;
        font-size: 1.6rem;
        line-height: 2;
        letter-spacing: 4.8px;
    }
}

/*=================
.q&a
=================*/

.questions{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 20px;
}

.navName__questions{
    font-family: "Crimson Text";
    font-size: 3.6rem;
    line-height: 26px;
    letter-spacing: 3.6px;
}

.title__questions{
    font-size: 1.4rem;
    line-height: 26px;
    letter-spacing: 4.2px;
    margin: 12px 0 30px;
}

.questions_content{
    width: 100%;
}

.question{
    display: flex;
    gap: 8vw;
    align-items: center;
}

.q{
    font-family: "Crimson Text";
    font-size: 2.4rem;
    line-height: 26px;
    letter-spacing: 2.4px;
}

.question__txt{
    font-size: 1.2rem;
    line-height: 26px;
    letter-spacing: 1.2px;
    width: 69%;
}

.answer{
    display: flex;
    gap: 8vw;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-out,opacity 0.4s ease-out,margin 0.4s;
}

.answer.open{
    margin: 20px 0 0;
    opacity: 1;
    max-height: 500px;
    transition: max-height 0.4s ease-in-out,opacity 0.4s ease-in;
}

.a{
    font-family: "Crimson Text";
    font-size: 2.4rem;
    line-height: 26px;
    letter-spacing: 2.4px;
}

.answer__txt{
    font-size: 1.2rem;
    line-height: 26px;
    letter-spacing: 1.2px;
    width: 69%;
}

.answer__bold{
    font-weight: 700;
}

.bar02{
    width: 100%;
    height: 2px;
    background-color: var(--primary-lightBrown);
    margin: 30px 0;
}

/* .questions pc */
@media screen and (min-width:769px){
    .questions{
        padding: 130px 0;
    }

    .navName__questions{
        font-size: 4.2rem;
        line-height: 1.5;
        letter-spacing: 4.2px;
    }

    .title__questions{
        font-size: 1.6rem;
        line-height: 1.6; /* 162.5% */
        letter-spacing: 4.8px;
        margin: 6px 0 50px;
    }


    .question{
        padding: 50px 240px;
    }

    .q{
        font-size: 2.4rem;
        line-height: 1.1;
        letter-spacing: 2.4px;
    }

    .question__txt{
        font-size: 1.6rem;
        line-height: 2; /* 175% */
        letter-spacing: 4.8px;
    }

    .answer{
        opacity: 0;
        padding: 0 240px;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out,opacity 0.3s ease-in,padding 0.3s ease-in-out;
    }

    .answer.open{
        opacity: 1;
        padding: 50px 240px;
        max-height: 500px;
        transition: max-height 0.3s ease-in-out,opacity 0.3s ease-in,padding 0.3s ease-in-out;
    }

    .a{
        font-size: 2.4rem;
        line-height: 1.1; /* 108.333% */
        letter-spacing: 2.4px;
    }

    .answer__txt{
        font-size: 1.6rem;
        line-height: 2; /* 175% */
        letter-spacing: 4.8px;
    }

}/* pc 769px */

/*=================
.footer
=================*/

.footer{
    background-image: url(../footer.jpg);
    width: 100%;
    height: 185px;
    margin-top: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.footer__background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); 
}

.footer__content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    text-align: center;
    padding: 30px 0;
}

.footer__logo{
    width: 115px;
}

.copy{
    font-family: "Crimson Text";
    font-size: 1.2rem;
    line-height: 26px; /* 216.667% */
    letter-spacing: 1.2px;
    margin-top: 30px;
}

/* .footer pc */
@media screen and (min-width:769px){
    .footer{
        margin-top: 240px;
        height: 437px;
    }

    .footer__logo{
        width: 174px;
    }

    .copy{
        font-size: 1.4rem;
        line-height: 1.9; /* 185.714% */
        letter-spacing: 1.4px;
        margin-top: 60px;
    }


}/* pc 769px */

/*=================
.moveBtn
=================*/
.moveBtn{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95px;
    position: fixed;
    bottom: 20px;
    right: 0;
    z-index: 1000;
}

.moveBtn__pop{
    color: var(--primary-brown);
    font-size: 1.1rem;
    line-height: 14px;
    letter-spacing: 1.1px;
    position: relative;
    margin-bottom: 4px;
}

.moveBtn__pop::before{
    content: "";
    display: block;
    width: 9px;
    height: 1px;
    background-color: var(--primary-brown);
    transform: rotate(65deg);
    position: absolute;
    left: -9px;
    bottom: 4px;
}

.moveBtn__pop::after{
    content: "";
    display: block;
    width: 9px;
    height: 1px;
    background-color: var(--primary-brown);
    transform: rotate(-65deg);
    position: absolute;
    right: -9px;
    bottom: 4px;
}

.moveBtn__btn{
    border-radius: 70px;
    background-color: #FFD9D9;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    width: 64px;
    height: 64px;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease,box-shadow 0.3s ease;
}

.moveBtn__btn:hover{
    transform: translateY(-4px);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
}

.moveBtn__txt{
    color: var(--primary-pink);
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 20px;
    letter-spacing: 1.3px;
}

.moveBtn__deco{
    width: 12px;
    transform: rotate(30deg);
    position: absolute;
    bottom: 0;
    right: 3px;
}

/* .moveBtn pc */
@media screen and (min-width:769px){
    .moveBtn{
        width: 144px;
        right: 20px;
    }

    .moveBtn__pop{
        font-size: 1.3rem;
        line-height: 1.1; /* 107.692% */
        letter-spacing: 1.3px;
        margin-bottom: 6px;
    }

    .moveBtn__pop::before{
        width: 11px;
        bottom: 5px;
        left: -12px;
    }

    .moveBtn__pop::after{
        width: 11px;
        bottom: 5px;
        right: -12px;
    }

    .moveBtn__btn{
        width: 144px;
        height: 94px;
    }

    .moveBtn__txt{
        font-size: 2rem;
        line-height: 1.4; /* 140% */
        letter-spacing: 2px;
        width: 66px;
    }

    .moveBtn__deco{
        width: 21px;
        right: 16px;
    }
}/* pc 769px */