@charset "utf-8";

/*--------------------------------
reset
------------------------------- */

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
}

ul,ol{
    list-style-type: none;
}

a{
    color: inherit; 
    text-decoration: none;
}

button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}


/* ---------------------------------------
css variable
-------------------------------------- */
:root{
    --color-main  :#026E00;
    --color-sub  :#FF91A0;
    --color-bg  :#FDFAF3;

    --font-gothic:"Zen maru Gothic","Noto Sans JP", system-ui;
}    


/* ---------------------------------------
base
-------------------------------------- */
body{
    background-color: var(--color-bg);
    color: var(--color-main);
    font-family: var(--font-gothic);
    overflow-x: hidden;
}


/* ---------------------------------------
animation
-------------------------------------- */
.pikopiko{
    animation: move 1.5s steps(2, jump-none) infinite;
  }
  
  .pikopiko_reverse{
    animation: move 2s steps(2, jump-none) infinite reverse;
    animation-delay: 0.3s;
  }
@keyframes move {
    from { transform: rotate(-5deg); }
    to   { transform: rotate(5deg); }
}
/* ---------------------------------------
header
-------------------------------------- */
header{
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    align-items: center;
    position: fixed;
    z-index: 10000;
    width: 100%;
}

.header_logo_a{
    width: 300px;
    margin-left: 40px;
}
.header_logo_img{
    width: 100%;
}

.header_link_button_sns_wrapper{
    display: flex;
    margin-right: 40px;
    gap: 50px;
    align-items: center;
}

.header_link_wrapper{
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
}
.header_link_a{
    font-size: 16px;
    font-weight: 700;
    height: 100%;
    padding: 2px 6px;
    background-color: var(--color-bg);
    border-radius: 5px;
}
.header_link_a:hover{
    background-color: #53bc52;
    color: var(--color-bg);
    transition: 0.3s;
}

.header_button_a,
.sitemap_button_a{
    display: block;
    width: fit-content;
    height: fit-content;
}

.header_button_button{
    background-color: var(--color-main);
    padding: 10px 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-radius: 5px;
}
.header_button_a:hover .header_button_button{
    background-color: #53bc52;
    transform: translateY(-4px);
    transition: 0.3s;
}
.header_button_icon{
    width: 22px;
    height: 22px;
}
.header_button_text{
    font-family: var(--font-gothic);
    font-size: 16px;
    color: var(--color-bg);
}

.header_sns,
.sitemap_sns{
    display: flex;
    gap: 30px;
}
.header_sns_a{
    width: 32px;
}
.header_sns_a:hover .header_sns_img{
    transform: translateY(-4px);
    transition: 0.3s;
}
.header_sns_img{
    width: 100%;
}
@media screen and (max-width: 1300px){
    .header_logo_a{
        width: 180px;
    }
    .header_link_a{
        font-size: 12px;
    }
    .header_link_wrapper{
        gap: 10px;
    }
    .header_button_text{
        font-size: 12px;
    }
    .header_button_icon{
        width: 18px;
        height: 18px;
    }
    .header_sns_a{
        width: 24px;
    }
    .header_link_button_sns_wrapper{
        gap: 30px;
    }
}
@media screen and (max-width: 900px){
    .header_link_wrapper,
    .header_sns{
        display: none;
    }
}
@media screen and (max-width: 530px){
    .header_button_icon{
        display: none;
    }
    .header_logo_a{
        margin-left: 20px;
    }
    .header_link_button_sns_wrapper{
        margin-right: 20px;
    }
    .header_link_button_sns_wrapper{
        gap: 16px;
    }
}
@media screen and (max-width: 400px){
    .header_button_a{
        display: none;
    }
}


/* ---------------------------------------
 hamburger
-------------------------------------- */
.header__menu{
    position: relative;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: var( --color-bg );
    border: solid 1px var(--color-main);
}
  
.header__menu span{
    display: block;
    width: 30px;
    height: 1px;
    background-color: var( --color-main );
    transition: 500ms ease;
}

.header__menu.is-open span:nth-of-type(2){
    opacity: 0;
}

.header__menu.is-open span:nth-of-type(1){
    transform: translateY(7px) rotate(45deg);
}

.header__menu.is-open span:nth-of-type(3){
    transform: translateY(-7px) rotate(-45deg);
}
@media screen and (min-width: 901px){
    .header__menu{
        display: none;
    }
}
@media screen and (max-width: 900px){
    .header__menu{
        display: flex;
    }
}


/* ---------------------------------------
sitemap
------------------------------------------ */
.sitemap{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: var(--color-bg);
    color: var(--color-main);
    padding: 100px;
    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    transition: 500ms ease;
}
.sitemap__list{
    margin-bottom: 60px;
}
.sitemap__list li{
    border-bottom: solid 1px #e3ded1;
}
.sitemap__list li:hover{
    background-color: #f4f2ea;
    transition: 0.3s;
}
.sitemap__list li a{
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sitemap__list__arrow{
    width: 35px;
}
.sitemap_sns{
    margin-top: 70px;
    justify-content: center;
}
.sitemap_button_a{
    margin: 0 auto;
}
.sitemap_copy{
    margin-top: 80px;
    color: #bbb7ad;
    display: block;
    text-align: center;
}
.sitemap.is-open{
    opacity: 1;
    visibility: visible;
}
.sitemap.is-open + header{
    border-bottom: none;
}

.sitemap__bg{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: 500ms ease;
}

.sitemap__bg.is-open{
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 530px){
    .sitemap{
        padding: 120px 50px;
    }
    .sitemap__list li{
        padding: 10px 0;
    }
    .sitemap__list__text{
        font-size: 12px;
    }
    .sitemap_sns{
        margin-top: 30px;
    }
    .sitemap__list{
        margin-bottom: 60px;
    }
    .sitemap_copy{
        font-size: 8px;
    }
}
@media screen and (min-width: 400px){
    .sitemap_button_a{
        display: none;
    }
}
@media screen and (max-width: 400px){
    .sitemap_button_a{
        display: block;
    }
}


/* ---------------------------------------
FV
------------------------------------------ */
.FV{
    position: relative;
    width: 100vw;
    height: 150vh;
    overflow: hidden;
}
.watermark_fv{
    position: absolute;
    width: 400px;
}
.watermark_fv_1{
    top: -10vh;
    left: 10vw;
}
.watermark_fv_2{
    top: 30vh;
    left: -3vw;
}
@media screen and (max-width: 1300px){
    .watermark_fv{
        width: 350px;
    }
    .watermark_fv_1{
        top: -5vh;
    }
}
@media screen and (max-width: 900px){
    .watermark_fv_1{
        left: 5vw;
    }
    .watermark_fv_2{
        top: 30vh;
        left: -20vw;
    }
}
@media screen and (max-width: 530px){
    .watermark_fv{
        width: 400px;
    }
    .watermark_fv_1{
        top: -15vh;
        left: -10vw;
    }
    .watermark_fv_2{
        top: 40vh;
        left: -40vw;
    }
}


/* ---------------------------------------
FV slider
------------------------------------------ */
.slider_fv{
    width: 80vw;
    height: 127vh;
    position: absolute;
    bottom: 100px;
    right: 0;
    border-radius: 200px 0 0 0;
    overflow: hidden;
    z-index: 100;
}
.slick-list,
.slick-track,
.slick-slide {
    height: 100%;
}

.slider_fv img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 900px){
    .slider_fv{
        width: 90vw;
    }
    .slider_fv_img_1{
        object-position: 28%;
    }
    .slider_fv_img_3{
        object-position: 50%;
    }
    .slider_fv_img_4{
        object-position: 40%;
    }
}

/* ---------------------------------------
FV catch
------------------------------------------ */
.FV_catch{
    position: absolute;
    bottom: 58vh;
    left: 9.5vw;
    z-index: 900;
}
.FV_catch_p{
    font-size: 42px;
    background-color: #fff;
    width: fit-content;
    padding: 5px 10px;
    letter-spacing: 0.1em;
}
.FV_catch_p:nth-of-type(2),
.FV_catch_p:nth-of-type(3),
.FV_catch_p:nth-of-type(4){
    margin-top: 20px;
}
@media screen and (max-width: 900px){
    .FV_catch{
        left: 7vw;
        bottom: 58vh
    }
    .FV_catch_p{
        font-size: 35px;
    }
    .FV_catch_p:nth-of-type(2),
.FV_catch_p:nth-of-type(3),
.FV_catch_p:nth-of-type(4){
    margin-top: 15px;
}
}
@media screen and (max-width: 530px){
    .FV_catch_p{
        font-size: 25px;
    }
}


/* ---------------------------------------
FV scroll
------------------------------------------ */
/* スクロールダウンの位置 */
.scroll {
    position: absolute;
    left: 3vw;
    bottom: 70vh;
    writing-mode: vertical-rl;
  }
  /* 線のアニメーション部分 */
  .scroll::before {
    animation: scroll 3s infinite;
    background-color: var(--color-main);
    bottom: -165px;
    content: "";
    height: 150px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
    z-index: 2;
  }
  /* 線の背景色 */
  .scroll::after {
    background-color: rgb(213, 226, 212);
    bottom: -165px;
    content: "";
    height: 150px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
  }
  /* 線のアニメーション */
  @keyframes scroll {
    0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
    }
    50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
    }
    51% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
    }
    100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
    }
  }
  @media screen and (max-width: 900px){
      .scroll span{
          font-size: 14px;
        }
    }
    @media screen and (max-width: 530px){
      .scroll {
          left: 1vw;
      }
    .scroll span{
        font-size: 10px;
    }
}


/* ---------------------------------------
member_fixed
------------------------------------------ */
.membar_fixed{
    width: 25vw;
    min-width: 300px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    border-radius: 30px;
    z-index: 800;
}
.membar_fixed:hover{
    animation: rotate 0.7s ease-in-out both;
}

.member_fixed_img{
    display: block;
    width: 100%;
}

@keyframes rotate {
    0% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }
    25% {
      transform: rotate(3deg) translate3d(0, 0, 0);
    }
    50% {
      transform: rotate(-3deg) translate3d(0, 0, 0);
    }
    75% {
      transform: rotate(1deg) translate3d(0, 0, 0);
    }
    100% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }
  }
  @media screen and (max-width: 900px){
    .membar_fixed{
        display: none;
    }
}


/* ---------------------------------------
about
------------------------------------------ */
.about{
    position: relative;
    top: -50vh;
    z-index: 110;
    padding-bottom: 10vw;
    background-image: url(../images/white_back.png);
    background-size: 110%;
    background-repeat: no-repeat;
    overflow-x: hidden;
}

@media screen and (max-width: 900px){
    .about{
    padding-bottom: 60vw;
    }
}

/* ---------------------------------------
about_text
------------------------------------------ */
.about_text{
    width: min(63vw,1050px);
    margin: 0 auto;
    padding-top: 24vw;
}
.hukidasi_wrapper{
    display: flex;
    justify-content: space-between;
}
.hukidasi_img{
    width: 47%;
    height: 100%;
}
.hukidasi_img:last-of-type{
    margin-top: 30px;
}
.sonnnanzyanaiyo{
    width: 100%;
}
.about_text_p{
    font-size: clamp(12px,1vw,18px);
    letter-spacing: 0.1em;
    line-height: 3em;
    width: 88%;
    margin: 0 auto;
    margin-top: 80px;
}
.about_text_p span{
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-sub);
}

.fade_box{
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0,1.2,1.0,1.0);
}

.fade_box.ready{
    opacity: 1;
    transform: translateY(0px);
}

@media screen and (max-width: 1300px){
    .about_text_p{
        margin-top: 30px;
    }
}
@media screen and (max-width: 900px){
    .about_text{
        width: 90%;
    }
    .about_text_p{
        margin-top: 40px;
    }
}


/* ---------------------------------------
about_ningen
------------------------------------------ */
.about_ningen{
    position: absolute;
    width: clamp(100px, 15vw, 300px);
}
.about_ningen_1{
    top: 22vw;
    left: 3vw;
}
.about_ningen_2{
    top: 40vw;
    right: 3vw;
}
@media screen and (max-width: 900px){
    .about_ningen{
        width: clamp(100px, 35vw, 300px);
    }
    .about_ningen_1{
        top: auto;
        bottom: 30px;
        left: 9vw;
    }
    .about_ningen_2{
        top: auto;
        bottom: 50px;
        right: 13vw;
    }
}


/* ---------------------------------------
member
-------------------------------------- */
.member{
    position: relative;
    top: -60vh;
    z-index: 120;
    /* padding-bottom: 50vh; */
    padding: 20vw clamp(10px, 11vw, 300px) 400px;
    overflow-x: hidden;
    background-image: url(../images/green_back.png);
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: top center;
}
.member_h2{
    font-size: clamp(34px, 4vw, 100px);
    font-weight: 700;
    color: var(--color-bg);
}
.member_h2 span{
    font-size: 0.5em;
    margin-left: 20px;
}
.member_h2_p{
    font-size: clamp(16px, 2vw, 45px);
    letter-spacing: 0.1em;
    color: #ffae2d;
    font-weight: 700;
}

.member_wrapper{
    display: flex;
    gap: 30px;
    height: fit-content;
    margin-top: 50px;
}

.member_box{
    color: var(--color-bg);
}

.member_box_dl{
    background-color: var(--color-main);
    padding: clamp(25px, 2vw, 50px);
    border-radius: 10px;
}

.member_img{
    border-radius: 10px;
    width: 100%;
}

.member_farm,
.member_from,
.member_fruits{
    font-size: clamp(12px, 1vw, 22px);
}
.member_farm{
    background-color: var(--color-bg);
    color: var(--color-main);
    font-weight: 700;
    width: fit-content;
    padding: 2px 16px;
    border-radius: 40px;
    margin-top: 14px;
}

.member_name{
    font-size: clamp(30px, 2vw, 45px);
    font-weight: 700;
    margin-top: 5px;
}
.member_from{
    margin-top: 30px;
}
.member_fruits{
    margin-top: 10px;
    line-height: 1.8em;
}
.member_sns_a_wrapper{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.member_Instagram,
.member_X{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    border-radius: 50px;
    background-color: var(--color-bg);
    color: var(--color-main);
    width: 200px;
    padding: 10px 20px;
    justify-content: space-between;
    margin-top: 14px;
}
.member_Instagram:hover,
.member_X:hover{
    opacity: 0.8;
    transition: 0.3s;
}
.member_sns_wrapper{
    display: flex;
    height: fit-content;
    gap: 10px;
    align-items: center;
}
.member_sns_p{
    font-size: 16px;
    font-weight: 700;
}
.member_sns{
    width: clamp(32px, 1.3vw, 40px);
    height: 100%;
}
.member_arrow{
    width: 10px;
    height: auto;
}
@media screen and (max-width: 1100px){
    .member_wrapper{
        display: block;
    }
    .member_box{
        padding-bottom: 100px;
    }
}


/* ---------------------------------------
katudou
-------------------------------------- */
.katudou{
    position: relative;
    z-index: 120;
    background-image: url(../images/white_back.png);
    background-size: 110%;
    background-repeat: no-repeat;
    overflow-x: hidden;
    height: fit-content;
    padding: 25vw clamp(10px, 11vw, 300px) 200px;
    margin-top: -90vh;
}
.katudou_h2{
    font-size: clamp(34px, 4vw, 100px);
    font-weight: 700;
}
.katudou_p{
    font-size: clamp(16px, 1.5vw, 45px);
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #ffae2d;
}
.katudou_ul{
    padding: 50px 0;
}
.katudou_li{
    font-size: clamp(12px, 1vw, 22px);
    padding: 20px 0;
    border-top: solid 1px #4daa4c;
}
.katudou_li span{
    margin-right: 30px;
}
.katudou_li:last-of-type{
    border-bottom: solid 1px #4daa4c;
}
@media screen and (max-width: 900px){
    .katudou_li span{
        display: block;
        padding-bottom: 10px;
    }
}

/* ---------------------------------------
footer
-------------------------------------- */
footer{
    background-color: var(--color-main);
    height: clamp(50px, 20vw, 200px);
    position: relative;
}
footer small{
    color: var(--color-bg);
    display: block;
    text-align: center;
    padding-top: clamp(12px, 5vw, 50px);
}