@charset "UTF-8";
/* CSS Document */
body.organic_page {
}
header:not(.scrolled) .header_name,
header:not(.scrolled) .h_link,
header:not(.scrolled) .h_menu_logo,
header:not(.scrolled) .humb_btn{
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}
header {
}
main ,body {
color: #000;
line-height: 1.5;
}
main {
  padding-top: 0;
  text-align: center;
}
.gothic {
    font-family: "Helvetica Neue", "Helvetica", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
/* 文字サイズ
--------------------------------------------- */
.size_36{
  font-size: 1.625rem;
  font-size: clamp(1.625rem, 1.3557692307692308rem + 1.0769230769230769vw, 2.5rem);
  margin-bottom: 40px;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.size_28{
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 0.9807692307692308rem + 1.0769230769230769vw, 2.125rem);
}
.size_70{
font-size: 3.75rem;
font-size: clamp(3.75rem, 3.269230769230769rem + 1.9230769230769231vw, 5.3125rem);
}
.size_p {
  font-size: 1rem;
  font-size: clamp(1rem, 0.9038461538461539rem + 0.38461538461538464vw, 1.3125rem);
}
.txtbox p{
    margin-bottom: 1em;
}
.txtbox {
    line-height: 2.2;
}
.btn_buy {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 0.04166666666666674rem + 1.6666666666666667vw, 1.8125rem);
}

@media screen and (max-width:1400px) {
    .size_ttl{

    }
    .size_p {
        font-size: 0.9375rem;
        font-size: clamp(0.9375rem, 0.8625rem + 0.3vw, 1.125rem);
    }
    .btn_buy {
        font-size: 1.375rem;
        font-size: clamp(1.375rem, 1.325rem + 0.2vw, 1.5rem);
    }
}
@media screen and (max-width:900px) {
    .btn_buy {
        text-align: center;
    }
}

/* レイアウト
--------------------------------------------- */
.ly_960 {
    max-width: clamp(60rem, 1.6666666666666572rem + 66.66666666666667vw, 72.5rem);
    margin: 0 auto;
}
.ly_1100 {
  max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.ly_1000 {
  max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* FV
--------------------------------------------- */
.sec_fv {
  height: calc(100vh - 80px);
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 80px;
}
.box_video_fv {
  right: 0;
  position: absolute;
  width: clamp(17.125rem, 12.675rem + 17.8vw, 28.25rem);
  height: clamp(17.125rem, 12.675rem + 17.8vw, 28.25rem);
  aspect-ratio: 1/1;
  overflow: hidden;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  z-index: -1;
}
.video_fv {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.wrap_fv {
    max-width: 1055px;
    width: 85%;
    margin: 0 auto;
    text-align: left;
    position: relative;
}
.ttl_fv {
  font-size: 5.625rem;
  font-size: clamp(5.625rem, 5.125rem + 2vw, 6.875rem);
  font-family: "Cinzel", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  position: relative;
  z-index: 3;
  margin-left: -10px;
  letter-spacing: 0.05em;
}
.fv_txt {
  font-size: 1.1625rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  z-index: 3;
  position: relative;
}
.fv_txt p {
  margin-bottom: 1em;
}
.fv_txt2 {
  font-size: 0.7rem;
}
picture {
  display: block;
}
.bottle_gaina {
  position: absolute;
  left: 50%;
  top: 59%;
  height: auto;
  transform: translate(-50%, -50%);
  width: 100%;
 max-width: clamp(5rem, 3.5rem + 6vw, 8.75rem);
}

@media screen and (max-width:800px) {
    .sec_fv {
        height: auto;
        max-height: 100%;
        display: block;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .wrap_fv {
        text-align: center;
    }
    .bottle_gaina {
        position: static;
        transform:inherit;
        margin: 0 auto 30px auto;
    }
    .bottle_gaina img{
        margin: 0 auto;
    }
    .ttl_fv {
        margin-left: 0px;
    }
    .fv_txt {
        width: clamp(17.125rem, 12.675rem + 17.8vw, 28.25rem);
        text-align: left;
        margin-left: auto;
        margin-right: auto;
    }
    .blk_fv_img_video {
        position: relative;
    }
    .box_video_fv {
        top: 30%;
    }
}

@media screen and (max-width:640px) {
    .fv_txt {
        width: 100%;
    }
}

/* fude
--------------------------------------------- */
.sec_fude {
    padding-top: 50px;
    padding-bottom: 100px;
}
.wrap_fude {
  width: 90%;
  max-width: 850px;
  margin: 0 auto;
}

/* about
--------------------------------------------- */
.sec_about {
    padding-top: 100px;
    padding-bottom: 50px;
    position: relative;
}
.wrap_about {

}
.sec_about::before {
    content: '';
    background-image: url(../img/gaina/bg_gaina_sugoisake.gif);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
}

/* corabo
--------------------------------------------- */
.sec_corabo {
  padding-top: 50px;
  padding-bottom: 50px;
}
.wrap_corabo {
  width: 85%;
  display: flex;
  flex-wrap: wrap;
  flex-flow: row-reverse;
  justify-content: space-between;
}
.s_corabo {
  font-size: 0.9rem;
  display: block;
  line-height: 1.7;
  padding-top: 30px;
}
.txtbox_corabo {
  text-align: left;
  width: 50%;
  margin-top: 100px;
}
.pic_corabo {
    width: 50%;
}
.txtbox_corabo {
    max-width: 470px;
    margin-left: auto;
}
.txt_corabo {
    max-width: 400px;
    margin-right: auto;
}

@media screen and (max-width:1100px){
    .wrap_corabo {
    width: 90%;
    margin-right: 0;
    }
    .txtbox_corabo {
    margin-top: 0px;
    }
}
@media screen and (max-width:900px){
    .ttl_corabo .sp {
        display: block !important;
    }
}
@media screen and (max-width:800px){
    .wrap_corabo {
        width: 85%;
        margin-right: auto;
        display:block;
    }
    .txtbox_corabo {
    max-width: 100%;
    }
    .txt_corabo {
        max-width: 100%;
    }
    .txtbox_corabo {
        width: 100%;
        margin-top: 0px;
    }
    .ttl_corabo .sp {
        display: none !important;
    }
    .pic_corabo {
        width: 90%;
        margin: 0 auto;
    }
}
@media screen and (max-width:640px){
    .ttl_corabo .sp {
        display: block !important;
    }
}


/* pic
--------------------------------------------- */
.sec_pic {
    padding-top: 150px;
    padding-bottom: 50px;
}
.wrap_pic {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* 左を広めに（実画像比に合わせて） */
  grid-template-rows: auto auto;
  grid-template-areas:
    "pic_hourei pic_shikomi"
    "pic_shubo  pic_shikomi";
  gap: 40px; /* 画像の雰囲気に近い大きめ余白 */
  margin: 0 auto;
  position: relative;
}

/* area 割り当て */
.pic_hourei { grid-area: pic_hourei; }
.pic_shikomi { grid-area: pic_shikomi; }
.pic_shubo { grid-area: pic_shubo; }

/* picture の基本調整 */
.pic_gaina {
  width: 100%;
  display: block;
}
.pic_gaina img {
  width: 100%;
  height: auto;
  display: block;
}
.pic_shikomi {
    width: 80%;
    margin-left: auto;
    margin-top: 100px;
}
.pic_shubo {
    width: 80%;
    margin-left: auto;
    margin-top: 60px;
}
.box_video_pic {
  right: 0;
  position: absolute;
  width: clamp(17.125rem, 12.675rem + 17.8vw, 28.25rem);
  height: clamp(17.125rem, 12.675rem + 17.8vw, 28.25rem);
  aspect-ratio: 1/1;
  overflow: hidden;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  z-index: -1;
}
.video_pic {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* SP（縦並び） */
@media (max-width: 640px){
  .wrap_pic {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pic_hourei"
      "pic_shikomi"
      "pic_shubo";
    gap: 20px;
  }
    .pic_shubo {
        margin-left: 0;
        margin-top: 40px;
    }
    .pic_shikomi {
    margin-top: 40px;
    }
    .video_pic {
        display: none;
    }
}


/* ラインナップ
--------------------------------------------- */

.sec_lineup {
    text-align: center;
    padding-top: 150px;
    padding-bottom: 150px;
}
.wrap_lineup {
    width: 85%;
}
.img_lineup {
    margin: 0 auto;
}
.img_lineup img {
    width: 85% !important;
    margin-right: auto;
}
.lineup_btn_shop {
    background-color: #5c5d5e;
    border-radius: 100px;
    padding: 0.7em 1.5em;
    color: #fff;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 335px;
    border: 1px solid #5c5d5e;
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
}
.lineup_btn_shop:visited,.lineup_btn_shop:focus,.lineup_btn_shop:active{
    color: #fff;
}
.lineup_btn_shop:hover {
    color: #5c5d5e;
    background-color: #fff;
}
.li_lineup {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 50px;
}
.ttl_lineup {
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}
.txt_linup {
    padding-top: 30px;
    margin-bottom: 50px;
    line-height: 1.7;
    text-align: left;
}
.txtbox_lineup {
    margin-bottom: 100px;
}
.txtbox .ttl_linup_p {
    margin-bottom: 0.5em;
}
.txtbox .txt_linup_gen {
    margin-bottom: 2em;
}

@media screen and (max-width:1000px) {
    .ttl_linup_name .sp,.ttl_linup_p .sp {
        display: block !important;
    }   
}
@media screen and (max-width:800px) {
    .li_lineup {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .txtbox_lineup {
        text-align: center;
    }
    .ttl_lineup {
        display: block;
        text-align: center;
    }
    .ttl_linup_name .sp,.ttl_linup_p .sp {
        display: none !important;
    }
    .lineup_btn_shop {
        margin: 0 auto;
    }
    .img_lineup img {
        max-width: 420px;
    }
}
@media screen and (max-width:400px) {
    .ttl_linup_name .sp,.ttl_linup_p .sp {
        display: block !important;
    }   
    .lineup_btn_shop {
        width: 100%;
    }
}

/* 生産者の声
--------------------------------------------- */
.sec_voice {
    background-color: #A48B77;
     position: relative;
     text-align: center;
}
.wrap_voice {
    padding-top: 120px;
    padding-bottom: 100px;
    position: relative;
}
.ttl_voice {
    margin-bottom: 30px;
    font-size: 2em;
}
.sec_voice::before{
    content: '';
    position: absolute;
    left: 2.5%;
    bottom: 5%;
    width: 95%;
    background-color: #fff;
    height: 95%;
}  
.txtbox_voice {
    margin-bottom: 80px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}
/* flex をリセット */
.slick-slide div,
.slick-slide div > * {
  display: block !important;      /* flex から通常ブロックに戻す */
  flex-direction: initial !important;
  flex-grow: 0 !important;
  align-items: initial !important;
  justify-content: initial !important;
}
.slide-item {
    margin: 20px;
    text-align: left;
    border: 1px solid #A48B77;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
}
.slide-item::before {
    content: '';
    background-image: url(../img/organic-junmai/deco_ojs_label.svg);
    background-repeat: no-repeat;
    z-index: 1;
    position: absolute;
    background-size: 100%;
    left: 23px;
    top: -26px;
    width: 32px;
    height: 70px;
}
.slide-title {
    color: #7A9543;
    margin-bottom: 20px;
}
.pic_voice {
    display: block;
}
.slick-slide .txt_voice {
    width: 79%;
    flex-grow: inherit;
    display: block !important;
}
.slick-slide .flex_voice {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between!important;;
    padding: 30px 7% 40px 7%;
}
.slick-slide .bottle_voice {
    width: 15%;
    flex-grow: inherit;
    margin-top: -50px;
}
.bottle_voice img {
    object-fit: contain;
    object-position: top;
}
.bottle_voice
.slick-slide .flex_voice{
   flex-direction: row;
    flex-wrap: wrap;
    flex-grow: inherit;
}
/* slick が付与する .slick-slide をフレックス化して高さ揃え */
.slide_voice .slick-slide {
  display: flex !important;
  height: auto !important;        /* 高さを自動調整 */
}

/* 画像部分は横幅100%、高さは画像に合わせる */
.slide_voice .pic_voice img {
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
/* タイトルを上に、本文を下に */
.slide_voice .slide-title {
  font-size: 1.3em;
}
.slide_voice .slide-text {
  margin-top: auto;
  line-height: 1.7;
  text-align: justify;
}
/* スライド1つ1つの影 */
.slide_voice .slide-item {
  box-shadow: 10px 10px 0px #F7F2EF; /* X方向10px、Y方向10px、ぼかし0px、色F7F2EF */
  border-radius: 8px; /* 必要に応じて角丸 */
  background: #fff;   /* 影が見やすいように背景白 */

}

@media screen and (max-width:640px) {
    .slick-slide .txt_voice {
        font-size: 0.9rem;
    }
    .slick-slide .flex_voice {
    padding: 20px 7% 30px 7%;
    }
    .flex_voice {
        position: relative;
    }
    .slick-slide .txt_voice {
        width: 75%;
    }
    .slick-slide .bottle_voice {
        position: absolute;
        top: 0;
        right:7%;
        z-index: 2;
        height: 100%;
    }
}
@media screen and (max-width:420px) {
    .slick-slide .txt_voice {
        width: 100%;
    }
    .slick-slide .bottle_voice {
        margin-top: -67px;
    }
    .slide_voice .slide-title {
        width: 80%;
    }  
}



/*---------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------*/

.move {
    transition: all ease 300ms;
    transition-delay: 200ms;
    opacity: 0;
    transform: translateY(30px);
}
.moved {
    opacity: 1;
    transform: translateY(0);
}


/*---------------------------------------------------------------------------------------------
       fv_btn_shop_wrap
--------------------------------------------------------------------------------------------*/
.fv_btn_shop_wrap {
    position: fixed;
    right: 5vw;
    bottom: 5vh;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    padding: 1px;
    z-index: 10;
    transition: transform 200ms ease;
}
.fv_btn_shop {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-align: center;
    font-size: min(4vw, 24px);
    line-height: 140%;
    aspect-ratio: 1 / 1;
    width: min(25vw,160px);
    padding-top: min(2vw,10px);
    position: relative;
}
.fv_btn_shop:hover {
    transform: scale(1.2);
}
.fv_btn_shop::after {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: min(0.8vw,5px) dotted;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    animation: infinity-roll 10s infinite linear both;
}
@keyframes infinity-roll{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.goal_footer .fv_btn_shop_wrap{
    transform: scale(0);    
}