@charset "UTF-8";

:root {
    --scale: 1;
    --maxScaleY: 6.911392;
    --maxScaleX: 6.381875;
}

/*==================================
common
====================================*/

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

body {
    font-family:'Noto Sans';
    color: #967656;
}


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

.container {
    display: flex;
    width: 100%;
    height: auto;
    gap: 10vw;
    flex-direction: column;
    align-items: center;
}

.otameshibtn {
    display: flex;
    width: 47vw;
    position: fixed;
    top: 65%;
    right: 3%;
    z-index: 100;
    cursor: pointer;
    transition: .5s;
}

.otameshibtn.hide {
  transform:translateX(200%);
  transition: .5s;
}

@media screen and (min-width: 769px) {

    .container {
        gap: 7vw;
    }
    .otameshibtn {
        width: 25vw;
        bottom: 1%;
        right: 15%;
        top: unset;
        left: unset;
    }
}


/* nav */
nav {
    display: flex;
    width: 100%;
    height: auto;
    gap: 2vw;
    align-items: center;
    padding: 2vw;
    position: fixed;
    top: 0;
    z-index: 100;
    transition: 0.4s; 
    transform: translateY(-100%);
}

.nav__list {
    display: flex;
    width: 90%;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 5vw;
}

.nav__item {
    display: flex;
    width: 100%;
    height: 18vw;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #FAF1D6;
}

.nav__item a {
    color: #FA8202;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.3vw;
}

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

.btn-trigger {
    display: flex;
    position: fixed;
    top: 5vw;
    right: 2vw;
    width: 6vw;
    height: 30px;
    cursor: pointer;
    z-index: 100;
}

.btn-trigger span {
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #FA8202;
    border-radius: 4px;
}

.btn-trigger, .btn-trigger span {
    transition: all .5s;
    box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 20px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 17px;
}

#btn03.active {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
#btn03.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
}
#btn03.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
#btn03.active span:nth-of-type(3) {
  opacity: 0;
}

@media screen and (min-width: 769px) {
    .nav__item {
        height: 3vw;
        border-radius: 40px;
    }

    .nav__item a {
        font-size: 1.4rem;
        font-weight: 900;
    }

    .btn-trigger {
        top: 2vw;
        width: 3vw;
    }
}

/*==================================
main
====================================*/
.main {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    padding: 8vw;
}

.main__section {
    display: flex;
    width: 100%;
    height: 60vh;
    position: relative;
    justify-content: center;
    align-items: center;
}

.main__section video {
    display: flex;
    width: calc((1 + var(--scale) * var(--maxScaleX)) * 11%);
    height: calc((1 + var(--scale) * var(--maxScaleY)) * 11%);
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
}

.main__section img {
    display: flex;
    width: 30vw;
    position: absolute;
    top: 30%;
}

.main__section2 {
    display: flex;
    width: 100%;
    height: 60vh;
    align-items: center;
    flex-direction: column;
    padding: 0 5vw;
}

.maintxt {
    display: flex;
    width: 100%;
    height: 50vh;
    padding: 3vw 2vw;
    align-items: center;
}

.maintxt p {
    font-size: 1.2rem;
    line-height: 4.5vw;
    transition: opacity 1s ease, transform 0.5s ease;
}

.maintxt p span {
  opacity: 0;
}


.main__section2 img {
    display: flex;
    width: 135%;
    height: auto;
}

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

    .main__section {
        width: 80%;
        height: 75vh;
    }

    .main__section video {
        width: calc((1 + var(--scale) * var(--maxScaleX)) * 13.5%);
        height: calc((1 + var(--scale) * var(--maxScaleY)) * 12%);
    }

    .main__section img {
        width: 18vw;
    }

    .main__section2 {
        height: 80vh;
    }

    .maintxt {
        height: auto;
        justify-content: center;
    }

    .maintxt p {
        width: 60%;
        font-size: 1.8rem;
    }
}
/*==================================
about
====================================*/
.about {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 15vw;
    padding-bottom: 10vw;
}

.aboutmain {
    display: flex;
    width: 100%;
    height: 50vw;
    position: relative;
}

.maincatch1 {
    display: flex;
    width: 25vw;
    height: auto;
    position: absolute;
    top: 10vw;
    left: 10vw;
}
.maincatch2 {
    display: flex;
    width: 45vw;
    height: auto;
    position: absolute;
    top: 19vw;
    left: 25vw;
}
.maincatch3 {
    display: flex;
    width: 24vw;
    height: auto;
    position: absolute;
    top: 7vw;
    right: 12vw;
}
.maincatch4 {
    display: flex;
    width: 35vw;
    height: auto;
    position: absolute;
    top: 27vw;
    left: 10vw;
}
.maincatch5 {
    display: flex;
    width: 40vw;
    height: auto;
    position: absolute;
    top: 38vw;
    right: 10vw;
}

.aboutsection {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
}

.abouttitle {
    display: flex;
    padding: 5vw 10vw;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.abouttxtarea {
    display: flex;
    padding: 2vw;
    gap: 6vw;
    flex-direction: column;
}

.abouttxtbox {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    width: 100%;
    height: 100vw;
    padding: 7vw 25vw;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    gap: 3vw;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.inview1.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.inview2.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s;
}
.inview3.show {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1s;
}


.abouttxtbox:first-of-type {
    background-image: url(../image/aboutbox1.png);
}
.abouttxtbox:nth-of-type(2) {
    background-image: url(../image/aboutbox2.png);
}
.abouttxtbox:last-of-type {
    background-image: url(../image/aboutbox3.png);
}

.abouttxt {
    display: flex;
    width: 40vw;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 10vw;
}

.abouttxt p:first-child {
    color: #07700B;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 350;
    letter-spacing: 0.5vw;
}

.abouttxt p:last-child {
    font-size: 1.2rem;
    font-weight: 350;
    letter-spacing: 0.1vw;
}

@media screen and (min-width: 769px) {
    .about {
        padding-top: 10vw;
    }

    .abouttxtarea {
        display: flex;
        width: 100%;
        gap: 1vw;
        flex-direction: row;
    }

    .abouttxtbox {
        height: 40vw;
        padding: 0;
        align-items: flex-end;
        flex-direction: column;
        justify-content: center;
    }

    .abouttxt {
        width: 90%;
        padding: 5vw 4vw;
        gap: 4vw;
        justify-content: center;
    }

    .abouttxt p:first-child {
        font-size: 1.8rem;
    }

    .abouttxt p:last-child {
        font-size: 1.4rem;
        line-height: 1.8vw;
        letter-spacing: 0.2vw;

    }
}
/*==================================
otameshi
====================================*/
.otameshi {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    padding: 30vw 8vw;
    gap: 10vw;
    background: #967656;
}

.otameshititle {
    display: flex;
    height: auto;
    flex-direction: column;
    padding: 4vw;
    gap: 6vw;
}

.otameshititle img:first-of-type {
    height: 4vw;
}
.otameshititle img:nth-of-type(2) {
    height: 13vw;
}
.otameshititle img:last-of-type {
    height: 6vw;
}

.otameshisection {
    display: flex;
    width: 100%;
    height: auto;
    padding: 3vw;
    gap: 2vw;
    position: relative;
    align-items: center;
    border-radius: 360px;
    background: #B9A28C;
    box-shadow: 7px 7px 4px 0 rgba(0, 0, 0, 0.25);
}

.syun {
    position: absolute;
    width: 20vw;
    top: -6vw;
    left: -6vw;
}

.otameshi__item {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    position: relative;
}

.otameshiphoto1 {
    background-image: url(../image/otameshiphoto1.png);
    background-position: center;
    background-size: cover;
    display: flex;
    width: 33vw;
    height: 33vw;
}

.otameshiphoto2 {
    background-image: url(../image/otameshiphoto2.png);
    background-position: center;
    background-size: cover;
    display: flex;
    width: 33vw;
    height: 33vw;
}

.otameshi__item img {
    display: flex;
    width: 33vw;
    height: 11vw;
    position: absolute;
    bottom: 1vw;
}

.otameshitxt {
    display: flex;
    width: 90%;
    height: auto;
    gap: 3vw;
    flex-direction: column;
    justify-content: center;
}

.otameshitxt__list1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1vw;
}

.otameshitxt__list1 img {
    width: 20vw;
}

.otameshitxt__list2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1vw;
}

.otameshitxt__list3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1vw;
}

.otameshitxt__list3 p {
    color: #efd82b;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.2vw;
}

.otameshitxtbtn {
    display: flex;
    width: 23vw;
    height: 7vw;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #357144;
}

.otameshitxtbtn p {
    color: #FFF;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: 3px;
}

@media screen and (min-width: 769px) {
    .otameshi {
        padding: 10vw;
    }
    .otameshisection {
        padding: 4vw;
        transition: 0.5s;
        scale: 0.7;
    }

    .otameshisection:hover {
        scale: 1;
    }

    .otameshiphoto1 {
        width: 26vw;
        height: 26vw;
    }

    .otameshiphoto2 {
        width: 26vw;
        height: 26vw;
    }

    .otameshi__item img {
        width: 25vw;
        height: 6vw;
    }

    .otameshitxt {
        width: 80%;
    }

    .otameshitxt__list3 p {
        font-size: 2rem;
    }

    .otameshitxtbtn {
        display: flex;
        width: 13vw;
        height: 3vw;
        position: relative;
        transition: color 0.5s ease;
    }

    .otameshitxtbtn:hover {
        color: #FFF;
    }

    .otameshitxtbtn:hover::before {
        transform: scaleX(1);
        transform-origin: right;
    }
    .otameshitxtbtn::before {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50px;
        background: #FA8202;
        transform: scaleX(0);
        transform-origin: left;
        transition: all 0.5s ease;
        transition-property: transform;
    }
    
    .otameshitxtbtn p {
        font-size: 1.7rem;
        position: relative;
    }
}


/*==================================
organic
====================================*/
.organic {
    display: flex;
    width: 100%;
    height: auto;
    padding: 0 7vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10vw;
}

.organictitlearea {
    display: flex;
    width: 100%;
    height: 30vw;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.organictitlearea img:first-of-type {
    display: flex;
    width: 40%;
    height: 12vw;
    position: absolute;
    left: -2vw;
    top: 7vw;
}
.organictitlearea img:nth-of-type(2) {
    display: flex;
    width: 25%;
    height: 3vw;
    position: absolute;
    left: 5vw;
    top: 11.5vw;
}
.organictitlearea img:last-of-type {
    display: flex;
    width: 70%;
    height: 10vw;
    position: absolute;
    top: 17vw;
}

.organic__list {
    display: flex;
    width: 100%;
    height: auto;
    padding: 3vw;
    gap: 5vw;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #967656;
}

.organic__list:last-of-type {
    flex-direction: row-reverse;
}

.organicphoto1 {
    background-image: url(../image/organicphoto1.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    width: 30%;
    height: 30vw;
    border-radius: 50px;
}
.organicphoto2 {
    background-image: url(../image/organicphoto2.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    width: 30%;
    height: 30vw;
    border-radius: 50px;
}

.organictxt {
    display: flex;
    width: 50%;
    height: auto;
    padding: 0 2vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4vw;
}

.organictxt p {
    color: #967656;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.4vw;
}
.organictxt p:first-of-type{
    font-size: 1.6rem;
}

@media screen and (min-width: 769px) {
    .organic {
        gap: 5vw;
    }

    .organictxt p {
        font-size: 1.6rem;
        line-height: 3vw;
    }

    .organictxt p:first-of-type{
        font-size: 2rem;
        line-height: 3vw;
    }
}


/*==================================
review
====================================*/
.review {
    display: flex;
    width: 100%;
    height: auto;
    padding: 6vw;
    flex-direction: column;
    align-items: center;
}

.reviewtitlearea {
    display: flex;
    width: 100%;
    height: 30vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    position: relative;
}

.reviewtitlearea img:first-of-type {
    width: 9vw;
    height: 8vw;
    position: absolute;
    top: 7vw;
    left: 15vw;
}
.reviewtitlearea img:nth-of-type(2) {
    width: 45vw;
    height: 6vw;
    position: absolute;
    top: 13vw;
}
.reviewtitlearea img:last-of-type {
    width: 20vw;
    height: 4vw;
    position: absolute;
    top: 21vw;
}

.reviewsubtitle {
    display: flex;
    height: 6vw;
    justify-content: center;
    align-items: center;
}

.reviewsubtitle img {
    height: 3.5vw;
}

.reviewarea {
    display: flex;
    width: 100%;
    height: auto;
    padding: 10vw 0;
    flex-direction: column;
    justify-content: center;
    gap: 3vw;
}

.review__list {
    display: flex;
    width: 100%;
    height: auto;
    padding: 10vw 20vw;
    gap: 8vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 400px 400px 240px 240px;
    background: #FAF1D6;
}

.reviewitem-img1 {
    background-image: url(../image/reviewpeople1.png);
    background-position: center;
    background-size: cover;
    display: flex;
    width: 45%;
    height: 35vw;
}
.reviewitem-img2 {
    background-image: url(../image/reviewpeople2.png);
    background-position: center;
    background-size: cover;
    display: flex;
    width: 45%;
    height: 35vw;
}
.reviewitem-img3 {
    background-image: url(../image/reviewpeople3.png);
    background-position: center;
    background-size: cover;
    display: flex;
    width: 45%;
    height: 35vw;
}

.reviewitem-name {
    font-size: 1.3rem;
    line-height: 0.5vw;
    letter-spacing: 0.4vw;
}

.reviewitem-title {
    font-size: 1.5rem;
    letter-spacing: 0.1vw;
}

.reviewitem-txt {
    font-size: 1.2rem;
}



@media screen and (min-width: 769px)  {

    .reviewarea {
        display: flex;
        width: 100%;
        height: auto;
        padding: 10vw 0;
        flex-direction: row;
        justify-content: center;
        gap: 3vw;
    }

    .review__list {
        padding: 5vw 2vw;
        gap: 4vw;
    }

    .reviewitem-img1 {
        width: 32%;
        height: 12vw;
    }
    .reviewitem-img2 {
        width: 32%;
        height: 12vw;
    }
    .reviewitem-img3 {
        width: 32%;
        height: 12vw;
    }

    .reviewitem-txt {
        line-height: 2.2vw;
    }
}

/*==================================
quality
====================================*/
.quality {
    background-image: url(../image/qualitybackground.jpeg);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    width: 100%;
    height: auto;
    padding: 8vw 6vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.qualitytxt {
    display: flex;
    width: 100%;
    height: auto;
    padding: 6vw;
    flex-direction: column;
    align-items: center;
    gap: 9vw;
    border-radius: 60px;
    background: rgba(133, 104, 9, 0.70);
}

.qualitytxt p:first-of-type {
    color: #FFF;
    font-size: 1.6rem;
    line-height: 5vw;
    letter-spacing: 1.2vw;
}
.qualitytxt p:nth-of-type(2) {
    text-align: center;
    color: #FFF;
    font-size: 1.3rem;
    line-height: 5vw;
    letter-spacing: 0.2vw;
}

.qualitytxtsection {
    display: flex;
    flex-direction: column;
    gap: 5vw;
}
.qualitytxtsection p:first-of-type {
    text-align: center;
    color: #FFF;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.3vw;
}
.qualitytxtsection p:nth-of-type(2) {
    text-align: center;
    color: #FFF;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.3vw;
}
@media screen and (min-width: 769px) {
    .qualitytxt {
        padding: 7vw;
        gap: 5vw;
    }
    .qualitytxt p:first-of-type {
        font-size: 3rem;
        line-height: normal;
    }
    .qualitytxt p:nth-of-type(2) {
        font-size: 1.8rem;
    }
    .qualitytxtsection {
        gap: 3vw;
    }
    .qualitytxtsection p:first-of-type {
        font-size: 2.1rem;
        letter-spacing: 0.2vw;
    }
    .qualitytxtsection p:nth-of-type(2) {
        font-size: 1.3rem;
        letter-spacing: 0.2vw;
        line-height: normal;
    }
}

/*==================================
question
====================================*/

.question {
    display: flex;
    width: 100%;
    height: auto;
    padding: 10vw 0;
    flex-direction: column;
    align-items: center;
    gap: 15vw;
}

.questiontitlearea {
    display: flex;
    width: 100%;
    height: 10vw;
    align-items: center;
    position: relative;
}

.questiontitlearea img:first-of-type {
    width: 20%;
    height: 5vw;
    position: absolute;
    left: 15vw;
}
.questiontitlearea img:nth-of-type(2) {
    width: 30%;
    height: 8vw;
    position: absolute;
    right: 15vw;
}
.questiontitlearea img:last-of-type {
    width: 18%;
    height: 5vw;
    position: absolute;
    top: 0;
    right: 18vw;
}

.accordion {
    display: flex;
    width: 100%;
    height: auto;
    padding: 0 5vw;
    position: relative;
    flex-direction: column;
}

.accordion-item {
    display: flex;
    width: 100%;
    height: auto;
    gap: 10vw;
    flex-direction: column;
}

.accordion-title {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    gap: 6vw;
    justify-content: flex-end;
    cursor: pointer;
    mix-blend-mode: difference;
    z-index: 5;
}

.accordion-title img {
    width: 7vw;
    position: absolute;
    left: 5vw;
}

.accordion-title p {
    width: 71.7%;
    color: #07700B;
    text-align: start;
    font-size: 1.6rem;
    line-height: 5vw;
    letter-spacing: 0.8vw;
}

.accordion-title::after {
    border: solid 2px #FA8202;
    background: #FA8202;
    content: "";
    display: block;
    width: 3vw;
    height: 3vw;
    transform: rotate(90deg);
    transition: transform .5s ease-in-out, top .5s ease-in-out;

}

.accordion-title.open::after {
    border: solid 2px #FA8202;
    top: 35%;
    background: #FFF;
    transform: rotate(-45deg);
}

.answer__list {
    display: flex;
    width: 100%;
    height: auto;
    gap: 5vw;
    flex-direction: column;
}

.answer__item {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: flex-end;
    gap: 7vw;
}

.answer__item img {
    width: 7vw;
    position: absolute;
    left: 5vw;
}

.answer {
    width: 83%;
    color: #FA8202;
    text-align: start;
    font-size: 1.6rem;
    line-height: 5vw;
    letter-spacing: 0.8vw;
}

.answertxt {
    display: flex;
    width: 85.5%;
    height: auto;
    padding-left: 13.5vw;
    align-items: center;
}

.answertxt p {
    font-size: 1.3rem;
    line-height: 4.5vw;
    letter-spacing: 0.1vw;
}

/* accordion */

@media screen and (min-width: 769px) {
    .accordion-title img {
        width: 7vw;
    }

    .accordion-title p {
        font-size: 1.8rem;
        letter-spacing: 0.5vw;
    }

    .answer__item img {
        width: 7vw;
    }

    .answer {
        font-size: 1.8rem;
        letter-spacing: 0.5vw;
    }

    .answertxt p {
        font-size: 1.5rem;
        line-height: normal;
    }
}
/*==================================
footer
====================================*/
footer {
    display: flex;
    width: 100%;
    height: 6vw;
    padding: 0 2vw;
    justify-content: space-between;
}

footer img {
    width: 25%;
    height: 10vw;
}

.topbtn {
    width: 12vw;
    height: 10vw;
}

.copy {
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.5vw;
    mix-blend-mode: difference;
    writing-mode: vertical-rl;
    position: fixed;
    top: 30%;
    right: 2%;
    z-index: 10;
}

@media screen and (min-width: 769px) {
    footer img {
        width: 20%;
        height: 13vw;
    }

}