@charset "utf-8";
/* CSS Document */

/* フルードイメージ */
img{max-width:100%;height:auto;}

/* フォント */
@font-face {
    font-family: "游ゴシックmedium";
    src: url("/path/to/fonts/YuGothicMedium.woff2") format("woff2"),
         url("/path/to/fonts/YuGothicMedium.woff") format("woff");
}


#wrapper{
    background-color: #F3F0E8;
}

/* ============= 共通命令 ============ */

p{
    font-size: 14px;
    font-family: "ヒラギノ角ゴ ProN", "Helvetica Neue", "游ゴシックmedium","Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体","Arial",;
    letter-spacing: 0.1em;
    line-height: 1.785; /*25px*/
}

h1{
    font-size: 34px;
    /* font-family: "HelveticaNeueLTPro-Md", ; */
    font-family: 
    "Roboto", 
    "游ゴシックmedium", "Yu Gothic",
    "Noto Sans JP",
    "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "メイリオ", Meiryo,
    sans-serif;
    line-height: 1.2;
    font-weight: 400;
}

@media only screen and (max-width:880px){
    h1{
        font-size: 28px;
    }
}

h2{
    font-size: 22px;
    font-family: 
    "ヒラギノ角ゴ ProN", "Roboto", 
    "游ゴシックmedium", "Yu Gothic",
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "メイリオ", Meiryo,
    sans-serif;
    letter-spacing: 0.1em;
    /*line-height: 1.785; /*25px*/
    line-height: 1.136;
}

@media only screen and (max-width:880px){
    h2{
        font-size: 18px;
    }
}

h3{
    font-size: 16px;
    font-family: 
    "Roboto", 
    "游ゴシックmedium", "Yu Gothic",
    "Noto Sans JP",
    "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "メイリオ", Meiryo,
    sans-serif;
    letter-spacing: 0.2em;
    line-height: 1.25; /*25px*/
}

a{
    text-decoration: none;
    color: #fff;
    /* font-family: "Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体",; */
}

a:hover,
a:active{
    text-decoration: none;
    opacity:0.5;
    transition: 0.3s;
}

/* a img:hover{
    filter:grayscale(100%);
    transition: 0.3s;
} */

.hero_header{
    width: 100%;
    padding: 1vw 1vw 0 1vw;
    background-image: url(../img/01_firstview02.png);
    background-size:cover;
    background-position: center bottom;
    height: 100vh;
    margin-bottom: calc((200 / 1536)*100vw);
}

@media screen and (max-width: 880px) {
    .hero_header{
        background-position: right bottom;
    }

    .hero_header .copy_container{
        padding-bottom: 100px;
    }
}


.header,
.kasou_header{
    width: 100%;
    height: 120px;
    padding: 1vw 1vw 0 1vw;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.hero_header .copy_container{
    width: 50vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero_header .copy_container .copy{
    width: 100%;
    text-align: center;
    font-size:max(34px, 3.255vw);
    color: #fff;
    letter-spacing: 0.1em;
    /* font-style: italic; */
    font-family: 
    "Noto Serif JP Medium", "ヒラギノ角ゴ ProN", "Roboto", 
    "游ゴシックmedium", "Yu Gothic",
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "メイリオ", Meiryo,
    sans-serif;
    margin-bottom: calc((10 / 1536)*100vw);
}

.hero_header .sub_title{
    width: 100%;
    text-align: right;
    font-size:max(22px, 1.953vw);
    color: #fff;
    /* font-style: italic; */
    font-family:
    "ヒラギノ角ゴ ProN", "Roboto", 
    "游ゴシックmedium", "Yu Gothic",
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "メイリオ", Meiryo,
    sans-serif;
}

.header .global-nav,
.kasou_header .global-nav{
    width: 5%;
}

/* スマホ用のナビゲーションとボタンを非表示にする（初期状態はPCサイズを想定） */
.sp-nav,
.hamburger-menu-btn{
  display: none;
}

/* 768px以下の画面幅になったら以下のスタイルを適用（メディアクエリ） */
@media screen and (max-width: 768px) {
  /* PC用のナビゲーションを非表示に */
  .pc-nav,
  .header .shop,
  .kasou_header .shop{
    display: none;
  }
  
  /* スマホ用のナビゲーションとボタンを表示に */
  .sp-nav,
  .hamburger-menu-btn {
    display: block; /* もしくは flex, grid など */
  }
  
  /* スマホ用のナビゲーションを初期状態で非表示に設定 */
  .sp-nav {
    /* ハンバーガーメニューがクリックされるまで隠しておく */
    display: none;
    /* absoluteなどで画面上に配置し、アニメーションなどで表示・非表示を制御 */
    position: absolute;
    top: 60px;
    right: auto;
    width: 100%;
    /* その他のスタイル */
      /* margin-left: auto; */
  }

  .sp-nav.is-open {
  display: block; /* または visibility: visible; opacity: 1; など */
  /* flex-direction: column; */
    }

/* ... もしくは、アニメーションを伴って表示・非表示を切り替える場合 ... */
.sp-nav {
  /* 初期状態 */
  transform: translateX(100%); /* 画面外に隠す */
  transition: transform 0.3s ease;
}

.sp-nav.is-open {
  /* アクティブ状態 */
  transform: translateX(0); /* 画面内に表示 */
}

.hamburger-menu-btn {
  /* ボタン自体のサイズとスタイル */
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  display: flex; /* flexboxで子要素を配置 */
  flex-direction: column;
  justify-content: space-around; /* 3本の線を均等に配置 */
  padding: 8px 0;
  cursor: pointer;
  /* margin-left: auto; */
}

.hamburger-menu-btn span {
  /* 線のスタイル */
  display: block;
  width: 24px;
  height: 2px;
  background-color: #cccc;
  transition: all 0.3s ease; /* アニメーション用 */
}
}

.header .global-nav img,
.kasou_header .global-nav img{
    width: 90%;
    height: auto;
    display: block;
    margin-bottom: 5px;
}

.header .shop{
    height: 30px;
}

.header ul,
.kasou_header ul{
    list-style: none;
} 

.header ul li a{
    color: #fff;
    font-size: 15px;
    font-family: "ヒラギノ角ゴ ProN", "Helvetica Neue", "游ゴシックmedium","Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体","Arial",;
    letter-spacing: 0.1em;
}

.kasou_header ul li a{
    color: #000000;
    font-size: 15px;
    font-family: "ヒラギノ角ゴ ProN", "Helvetica Neue", "游ゴシックmedium","Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体","Arial",;
    letter-spacing: 0.1em;
}

/* スクロールしたら文字色変わる */
/* .hero_header .header.scroll_nav .shop{
    background-color: #fff;
} */

.hero_header .header.scroll_nav ul li a{
    color: #000;
}

/* スクロールしたら文字色変わる */
/* .hero_header .header.scroll_nav2 .shop{
    background-color: #000000;
} */

.hero_header .header.scroll_nav2 ul li a{
    color: #fff;
    border-bottom:#fff;
}


/* ================== フッター ==================== */

footer{
    height: auto;
    color: #fff;
    padding: 50px 50px 5px 50px;
}

footer ul li{
    list-style: none;
    font-size: 14px;
    font-family: "Helvetica Neue","游ゴシックmedium","Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体","Arial",;
    letter-spacing: 0.1em;
    line-height: 1.785; /*25px*/
}

footer ul li a,
footer p a{
    color: #fff;
    font-size: 15px;
    font-family: "ヒラギノ角ゴ ProN", "Helvetica Neue", "游ゴシックmedium","Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体","Arial",;
    letter-spacing: 0.1em;
}

footer .footer_container{
    display: flex;
    justify-content: space-between;
}

footer .footer_container .footer_logo{
    flex: 1;    
}

footer .footer_container .footer_logo img{
    width: 50%;
    height: auto;
    display: block;
}

footer .footer_container .footer_sangendyaya,
footer .footer_container .footer_ikejiri{
    flex: 1;
    display: flex;
    flex-direction: column;
    /* padding-bottom: 20px; */
}

footer .footer_container .footer_sangendyaya .tittle,
footer .footer_container .footer_ikejiri .tittle,
footer .footer_container .footer_sangendyaya .address,
footer .footer_container .footer_ikejiri .address,
footer .footer_container .footer_nav_container nav,
footer .footer_container .footer_nav_container .fotter_sns{
    margin-bottom: 20px;
}

footer .footer_container .footer_sangendyaya .contact,
footer .footer_container .footer_ikejiri .contact{
    margin-top: 40px;
}

footer .footer_container .footer_nav_container{
    flex: 2;
    display: flex;
    justify-content: end;
    /* align-items: center; */
    padding-right: 30px;
}

footer .cory p{
    text-align: right;
    margin-top: 30px;
}

/* ================== 01_top ==================== */

.top_main .more_button{
    /* font-size: 18px; */
    font-size: max(10px, 1.171vw); /*calc((18 / 1536)*100vw)*/
}

.top_main .scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(50px);
  opacity: 0;
}

.top_main .scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/* ----------- 01/02セクション ------------ */

.top_main{
    width: 100%;
}

.top_main .common_sec{
    padding: 0 10%;/* padding: 0 18.75vw; */
    margin-bottom: 13.020%;/* margin-bottom: 200px; */
}

.top_main .common_sec .tittle_container,
.products_main .first_sec .tittle_container,
.shop_main .first_sec .tittle_container,
.about_main .first_sec .tittle_container,
.event_main .first_sec .tittle_container,
.contact_main .first_sec .tittle_container{
    display: flex;
    justify-content: space-between;
    /* margin-bottom: 13.020vw; */
    margin-bottom: 200px;
}

.top_main .first_sec .tittle_container{
    margin-bottom: 100px;
}

.top_main .common_sec .tittle_container .right_box,
.products_main .first_sec .tittle_container .left_box,
.products_main .first_sec .tittle_container .right_box,
.shop_main .first_sec .tittle_container .left_box,
.shop_main .first_sec .tittle_container .right_box,
.about_main .first_sec .tittle_container .left_box,
.about_main .first_sec .tittle_container .right_box,
.event_main .first_sec .tittle_container .left_box,
.event_main .first_sec .tittle_container .right_box,
.contact_main .first_sec .tittle_container .left_box,
.contact_main .first_sec .tittle_container .right_box{
    width: 45%;
    display: flex;
    flex-direction: column;   
    gap: calc((30 / 1536)*100vw); /* gap:30px; */
}

.top_main .right{
    margin-left: auto;
}

.top_main .common_sec .tittle_container .left_box{
    /* justify-content: space-around; */
    width: 45%;
}

.top_main .margin{
    margin-bottom: calc((60 / 1536)*100vw);
}

.top_main .common_sec .products_container,
.products_main .first_sec .products_container{
    display: flex;
    flex-wrap: wrap;
    row-gap: calc((50 / 1536)*100vw);
    column-gap: calc((5 / 1536)*100vw);
    justify-content: center;
    width: clamp(100%, 100%, 1200px);
}

.top_main .common_sec .products_container a img:hover,
.products_main .first_sec .products_container a img:hover{
    filter:grayscale(100%);
    transition: 0.3s;
}

.top_main .common_sec .products_container .konbu_image,
.products_main .first_sec .products_container .konbu_image{
    width: 18.75vw;
    height: 26.04vw;
}

.top_main .common_sec .products_container .nametake_image,
.products_main .first_sec .products_container .nametake_image{
    width: calc((288 / 1536)*100vw);
    height: calc((360 / 1536)*100vw);
}

.top_main .common_sec .products_container .nori_image,
.products_main .first_sec .products_container .nori_image{
    width: calc((288 / 1536)*100vw);
    height: calc((390 / 1536)*100vw);
}

.top_main .common_sec .products_container .okaka_image,
.products_main .first_sec .products_container .okaka_image{
    width: calc((288 / 1536)*100vw);
    height: calc((400 / 1536)*100vw);
}

.top_main .common_sec .products_container .chirimen_image,
.products_main .first_sec .products_container .chirimen_image{
    width: calc((288 / 1536)*100vw);
    height: calc((370 / 1536)*100vw);
}

.top_main .common_sec .products_container .wakasagi_image,
.products_main .first_sec .products_container .wakasagi_image{
    width: calc((288 / 1536)*100vw);
    height: calc((400 / 1536)*100vw);
}

.top_main .common_sec .products_container .sake_image,
.products_main .first_sec .products_container .sake_image{
    width: calc((288 / 1536)*100vw);
    height: calc((370 / 1536)*100vw);
}

.top_main .common_sec .products_container .kurumi_image,
.products_main .first_sec .products_container .kurumi_image{
    width: calc((288 / 1536)*100vw);
    height: calc((390 / 1536)*100vw);
}


/* -------------02セクション ------------- */

.top_main .secound_sec .tittle_box{
    width: 100%;
    margin-bottom: 30px;
}

.top_main .secound_sec .secound_box{
    padding-left: 25vw;
    display: flex;
    flex-direction: column;   
    gap: calc((30 / 1536)*100vw);
}

.top_main .secound_sec .tittle_box .margin{
    margin-bottom: 20px;
}


/* -------------03セクション ------------- */

.top_main .third_sec{
    padding: 0 10%;
    display: flex;
    margin-bottom: 200px;
}

.top_main .third_sec .third_center_box{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.top_main .third_sec .third_right_box{
    width: 20%;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc((30 / 1536)*100vw);
}

.top_main .third_sec .third_left_box{
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: calc((30 / 1536)*100vw); */
}

/* -------------- 04セクション -------------- */

.top_main .four_sec p,
.top_main .four_sec h1,
.top_main .four_sec h2,
.top_main .fifth_sec p,
.top_main .fifth_sec h1,
.top_main .fifth_sec h2{
    color: #fff;
}

.back_color{
    background-color: #1F1F1F;

}

.top_main .event_container{
    width: 100%;
    margin-bottom: 13.020%;
}

.top_main .event_container .haikei{
    background-image: url(../img/01_event_background.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    display: flex;
    padding-top:calc((650 / 1920)*100%);
    padding-left: 15%;
    padding-right: 15%;
}

.top_main .event_container .haikei .event_text{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* gap: 30px; */
    gap: calc((30 / 1536)*100vw);
    margin: 0 5% 5% 0;
}

.top_main .event_container .haikei .event_text h1{
    margin-bottom: 10%;
}

.top_main .event_container .haikei .event_text .event_p{
    width: 80%;
}


/* --------------- ５セクション ------------------- */

.top_main .fifth_sec{
    padding-bottom: 150px;
}

.top_main .fifth_sec .shop_tittle{
    padding: 0 10%;
    margin-bottom: calc((30 / 1536)*100%);
}

.top_main .fifth_sec .shop_image{
    display: flex;
}

.top_main .fifth_sec .shop_image .sanngenncyaya{
    width: 50%;
    background-image: url(../img/01_shop_sangen.png);
    background-size: cover;
    height: 14.778vw; /* ((227 / 1536)*100)*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_main .fifth_sec .shop_image .ikeziriohashi{
    width: 50%;
    background-image: url(../img/01_shop_ikejiri.png);
    background-size: cover;
    height: 14.778vw;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ================== 02_product ==================== */

.products_main{
    /* width: 100%; */
    width: clamp(100%, 100% 1200px);
    padding: 0 10%;
    padding-bottom: 150px;
    margin-top: 150px;
}

/* ================== 03_product02 ==================== */

.products02_main .first_sec{
    width: 100%;
    padding: 0 7% 0 10%;
    display: flex;
    gap: 1%;
    margin-bottom: 150px;
    margin-top: 150px;
}

.products02_main .first_sec .image_sub{
    width: calc((120 / 1536)*100vw);
    padding-top: calc((50 / 1536)*100vw);
    /* padding-top: 50px; */
    height: 100vh;
    /* border: 1px solid #653eff; */
    position: sticky;
    top: 0;

}

.products02_main .first_sec .image_sub img{
    cursor: pointer;
    margin-bottom:10px ;
}

.products02_main .first_sec .image_area{
    width: 50%;
    padding-top: calc((50 / 1536)*100vw);
    height: 100vh;
    /* height: 700px; */
    /* border: 1px solid #f74a4a; */
    position: sticky;
    top: 0;
}

.products02_main .first_sec .text_area{
    width: 50%;
    /* border: 1px solid #f2ff7d; */
    padding: 5% 5%;
    gap: 20px;
    /*overflow-y: scroll; /* 垂直方向のスクロールを有効に */
}

.products02_main .first_sec .text_area .border_bottom{
    /* border-bottom:0.5px solid #bdbdbd; */
    border-bottom:0.5px solid #a9a9a9;
    margin-bottom: 30px;
}

.products02_main .first_sec .accordion .accordion_contents ul{
    margin: 20px 0;
}

.products02_main .first_sec .accordion .accordion_contents ul li,
.products02_main .first_sec .text_area .shousai ul li{
    list-style: none;
    font-size: 14px;
    font-family: "Helvetica Neue","游ゴシックmedium","Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体","Arial",;
    letter-spacing: 0.1em;
    line-height: 1.785;
    margin-bottom: 20px;
}

.products02_main .first_sec .text_area .accordion .accordion_contents ul li:last-child,
.products02_main .first_sec .text_area .shousai ul li:last-child{
    margin-bottom: 0;
}

.products02_main .first_sec .text_area .shousai{
    margin-top: 50px;
}

.products02_main .first_sec .text_area .shousai h3{
    margin-bottom: 30px;
}

/* ▼　アコーディオン　▼ */
.accordion  {
  margin-inline: 0;
  border-top: 0.5px solid #a9a9a9;
  border-bottom:0.5px solid #a9a9a9;
  margin:80px 0; 
}

.accordion_title {
  position: relative;
  border: none;
  display: block;
  list-style: none;
  width: 100%;
  cursor: pointer;
  padding: 1.4em 2em 1.4em 1.4em;
  line-height: 1.6em;
}

summary.accordion_title::-webkit-details-marker {
  display:none;
}

.accordion_title:after {
  content: "＋";
  position: absolute;
  top: calc(50% - 0.5em);
  right: 20px;
  line-height: 1;
  padding: 0;
  pointer-events: none;
}

.accordion::details-content {
  opacity: 0;
  block-size: 0;
  transition: .3s;
  transition-property: display, opacity, block-size, padding;
  transition-behavior: allow-discrete;
  line-height: 1.6em;
}

.accordion .accordion_content {
  padding: 0 2em 0 3em;
}

.accordion .accordion_content > *:first-of-type {
  margin-top: 0;
}

.accordion .accordion_content > *:last-of-type {
  margin-bottom: 0;
}

.accordion[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
}

.accordion[open] .accordion_content {
  padding: 0 2em 1.4em 3em;
}

.accordion[open] .accordion_title:after {
  content: "－";
}
/* ▲　アコーディオン　▲ */


/* ================== 04_about ==================== */

.about_main{
    width: 100%;
    margin-top: 150px;
}

.about_main .first_sec{
    padding: 0 10%;
}

.about_main .scound_sec{
    padding: 0 15%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 200px;
}

.about_main .scound_sec h1{
    margin-bottom: 30px;
}

.about_main .scound_sec .center_text{
    text-align: center;
}

.about_main .third_sec{
    width: 100%;
    padding: 0 3% 0 5%;
    margin-bottom: 200px;
}

.about_main .third_sec .third_sec_tittle{
    margin-bottom: 50px;
}

.about_main .third_sec .haikei{
    width: 92%;
    margin: 0 0 0 8%;
    background-image: url(../img/04_aziwai02.png);
    background-size: cover;
    /* background-position: right center; */
    height: calc((584 / 1536)*100vw);
    background-repeat: no-repeat;
    position: relative;
}

.about_main .third_sec .haikei .aziwai_text{
    width: 60%;
    padding: 2% 10% 5% 5%;
    background-color: #F3F0E8;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about_main .third_sec .haikei .absolute{
    background-color: #000;
    position: absolute;
    bottom: -40px;
    right: -30px;
    width: 90px;
    height: 90px;
    /* background-color: #F3F0E8; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.about_main .third_sec .haikei .absolute p{
    text-align: center;
    color: #fff;
}

.about_main .fourth_sec{
    width: 100%;
    padding: 0 5% 0 3%;
    margin-bottom: 150px;
}


.about_main .fourth_sec .fourth_sec_tittle{
    margin-bottom: 50px;
    display: flex;
    justify-content: right;
}

.about_main .fourth_sec .haikei{
    background-image: url(../img/04_sozai02.png);
    width: 92%;
    margin: 0 8% 0 0;
    background-size: cover;
    background-position: left center;
    height: calc((650 / 1536)*100vw);
    background-repeat: no-repeat;
    position: relative;
}

.about_main .fourth_sec .haikei .aziwai_text{
    width: 60%;
    padding: 2% 5% 5% 10%;
    background-color: #F3F0E8;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about_main .fourth_sec .haikei .absolute{
    background-color: #000;
    position: absolute;
    bottom: -40px;
    left: -30px;
    width: 90px;
    height: 90px;
    /* background-color: #F3F0E8; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.about_main .fourth_sec .haikei .absolute p{
    text-align: center;
    color: #fff;
}

/* ================== 05_event ==================== */

.event_main{
    width: 100%;
    padding: 0 10%;
    margin-top: 150px;
}

.event_main .scound_sec{
    display: flex;
    margin-bottom: 150px;
}

.event_main .scound_sec .left_box{
    width: 50%;
    height: 100vh;
    padding: 150px 70px 0 0;
    position: sticky;
    top:0;
}

.event_main .scound_sec .right_box{
    width: 50%;
    display: flex;
    flex-direction: column;
}

.event_main .scound_sec .right_box .syousai h2{
    margin-bottom: 20px;
}

.event_main .scound_sec .right_box .syousai p{
    margin-bottom: 30px;
}

.event_main .scound_sec .left_box h1,
.event_main .scound_sec .left_box h3{
    text-align: right;
}

.event_main .scound_sec .right_box > img:nth-child(1){
    margin-bottom: 50px;
}


.event_main .scound_sec .right_box > div:nth-child(2),
.event_main .scound_sec .right_box > div:nth-child(3){
    margin-bottom: 80px;
}

.event_main .scound_sec .right_box ul{
    list-style: none;
    font-size: 14px;
    font-family: "Helvetica Neue","游ゴシックmedium","Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体","Arial",;
    letter-spacing: 0.1em;
    line-height: 1.785;
}



/* ================== 06_shop ==================== */

.shop_main{
    width: 100%;
    padding: 0 10%;
    margin-top: 150px;
    margin-bottom: 150px;
}

.shop_main .first_sec .sangendyaya{
    margin-bottom: 200px;
}

.shop_main .first_sec .common_sec .sangendyaya_tittle h3{
    text-align: center;
    margin-bottom: 100px;
}

.shop_main .first_sec .common_sec .infomation_container{
    display: flex;
    margin-bottom: 50px;
}

.shop_main .first_sec .common_sec .infomation_container .imfo_area{
    width: 55%;
    padding-top: 70px;
}

.shop_main .first_sec .common_sec .infomation_container .map_area{
    width: 45%;
}

.shop_main .first_sec .common_sec .infomation_container .imfo_area ul li{
    list-style: none;
    font-size: 14px;
    font-family: "Helvetica Neue","游ゴシックmedium","Yu Gothic Medium", "游ゴシック", "YuGothic", "游ゴシック体","Arial",;
    letter-spacing: 0.1em;
    line-height: 1.785;
}

.shop_main .first_sec .common_sec .infomation_container .imfo_area ul li:last-child{
    margin-top: 50px;
}

.shop_main .first_sec .common_sec .google{
    text-align: right;
    
}

.shop_main .first_sec .common_sec .google a img{
    width: 15vw;
    height: auto;
}


/* ================== 07_contact ==================== */

.contact_main{
    width: 100%;
    margin: 150px 0;
    padding: 0 10%;
}

.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
@media screen and (max-width: 880px) {
  .Form {
    margin-top: 40px;
  }
}

.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 880px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-direction: column;
    /* flex-wrap: wrap; */
  }
}

.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}

.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  /* font-weight: bold; */
  font-size: 15px;
}
@media screen and (max-width: 880px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}

.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 880px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}

.Form-Item-Label-Required {
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  color: #940d0d;
  font-size: 12px;
}
@media screen and (max-width: 880px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 10px;
  }
}

.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #fcfcfc;
  font-size: 14px;
}
@media screen and (max-width: 880px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}

.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #fcfcfc;
  font-size: 18px;
}
@media screen and (max-width: 880px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}

.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 200px;
  display: block;
  letter-spacing: 0.05em;
  background: #0e0e0e;
  color: #fcfafa;
  font-weight: bold;
  font-size: 14px;
}
@media screen and (max-width: 880px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 14px;
  }
}

/* ================== 08_privacy ==================== */

.privacy_main{
    width: 100%;
    margin: 150px 0;
    padding: 0 10%;
}


.privacy_main .first .innner01{
  margin-top: 275px;
  margin-bottom: 100px;
}


.privacy_main .secound{
  padding: 0 25px 150px 25px;
}
 .privacy_main .secound .box .innner01{
  margin:50px 25px;
}

.privacy_main .secound .box .innner02{
  margin-left: 25px;
}

.privacy_main .secound .box .innner02_third_sec{
  margin-left: 40px;
}

.privacy_main .secound .box .innner02 .nakaguro,
.privacy_main .secound .box .innner02 .habahirome{
  list-style:none;
  margin-left: 0;
  padding-left: 0;
}

.privacy_main .secound .box .nakaguro_mail{
  margin-left: 40px;
} 


/* ================== メディアクエリ ==================== */

@media (width>1200px){
    .products_container{
        width: 1200px;
        margin: 0 auto;
    }
}


@media only screen and (max-width:767px){
    .top_main .common_sec .products_container .konbu_image,
    .top_main .common_sec .products_container .nametake_image,
    .top_main .common_sec .products_container .nori_image,
    .top_main .common_sec .products_container .okaka_image,
    .top_main .common_sec .products_container .chirimen_image,
    .top_main .common_sec .products_container .wakasagi_image,
    .top_main .common_sec .products_container .sake_image,
    .top_main .common_sec .products_container .kurumi_image,
    .products_main .first_sec .products_container .konbu_image,
    .products_main .first_sec .products_container .nametake_image,
    .products_main .first_sec .products_container .nori_image,
    .products_main .first_sec .products_container .okaka_image,
    .products_main .first_sec .products_container .chirimen_image,
    .products_main .first_sec .products_container .wakasagi_image,
    .products_main .first_sec .products_container .sake_image,
    .products_main .first_sec .products_container .kurumi_image{
        /* width: 288px; */
        width: calc((288 / 767)*100vw);
        height: auto;
    }
}

@media only screen and (max-width:880px){


    .hero_header .copy_container{
    width: 100%;
    padding-right: 20px;
    }

    .hero_header .copy_container .copy{
        font-size: 30px;
    }

    .hero_header .sub_title{
        font-size: 20px;
    }

    footer .footer_container{
        flex-direction: column;
    }

    footer .footer_container .footer_sangendyaya{
        margin: 70px 0; 
    }

    footer .footer_container .footer_nav_container{
        justify-content: flex-start;
        margin-top: 50px;
    }
    
    .hero_header,
    .top_main .first_sec,
    .top_main .secound_sec,
    .top_main .third_sec,
    .top_main .four_sec{
        margin-bottom: 26.040%;
    }
    
    .top_main .four_sec::before{
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
    }

    .top_main .common_sec .tittle_container,
    .top_main .third_sec,
    .products_main .first_sec .tittle_container,
    .shop_main .first_sec .tittle_container,
    .about_main .first_sec .tittle_container,
    .event_main .first_sec .tittle_container,
    .contact_main .first_sec .tittle_container{
        flex-direction: column;
        /* gap: 35px; */
        gap: calc((100 / 880)*100vw);
    }

    .top_main .common_sec .tittle_container .left_box,
    .top_main .common_sec .tittle_container .right_box,
    .products_main .first_sec .tittle_container .left_box,
    .products_main .first_sec .tittle_container .right_box,
    .top_main .third_sec .third_right_box,
    .top_main .third_sec .third_left_box,
    .top_main .third_sec .third_center_box,
    .shop_main .first_sec .tittle_container .right_box,
    .shop_main .first_sec .tittle_container .left_box,
    .shop_main .first_sec .common_sec .infomation_container .imfo_area,
    .shop_main .first_sec .common_sec .infomation_container .map_area,
    .about_main .first_sec .tittle_container .left_box,
    .about_main .first_sec .tittle_container .right_box,
    .event_main .first_sec .tittle_container .left_box,
    .event_main .first_sec .tittle_container .right_box,
    .contact_main .first_sec .tittle_container .left_box,
    .contact_main .first_sec .tittle_container .right_box{
        width: 100%;
        gap:15px;
    }

    /* .top_main .common_sec img{
        margin-top: 20px;
    } */

    .top_main .secound_sec{
        display: flex;
        flex-direction: column;
        gap: calc((100 / 880)*100vw);
    }

    .top_main .secound_sec .tittle_box{
        margin-bottom: 0;
    }

    .top_main .secound_sec .secound_box{
        padding: 0;
        gap:15px;
    }
    
    .top_main .third_sec .third_right_box{
        margin: 0;
    }

    .top_main .four_sec .haikei{
        flex-direction: column;
    }

    .top_main .four_sec .sp_right{
        margin-left: auto;
    }

    .top_main .four_sec .haikei .event_text,
    .top_main .four_sec .haikei .event_text .event_p{
        width: 100%;
    }

    .products02_main .first_sec,
    .event_main .scound_sec{
        flex-direction: column;
    }

    .products02_main .first_sec .image_sub,
    .products02_main .first_sec .image_area,
    .products02_main .first_sec .text_area,
    .event_main .scound_sec .left_box,
    .event_main .scound_sec .right_box{
         width: 100%;
         height: auto;
         position: static;
    }

    .products02_main .first_sec .image_area{
        order: -1;
    }

    .products02_main .first_sec .image_sub{
        text-align: right;
    }

    .shop_main .first_sec .infomation_container{
        flex-direction: column;
    }

    /* .shop_main{
        padding: 0 5%;
    } */

    .shop_main .first_sec .common_sec .infomation_container .map_area{
        order: -1;
    }

    .shop_main .first_sec .common_sec .google a img{
        width: auto;
    }

    .about_main .third_sec,
    .about_main .fourth_sec{
        padding: 0;
        height: auto;
        margin: 0;
    }

    .about_main .third_sec .haikei{
        width: 100%;
        margin: 0;
        background-size: 100%;
        background-position:center;
        padding-bottom: 670px;
    }

    .about_main .third_sec .haikei .aziwai_text{
        width: 100%;
        /* margin-bottom: 584px; */
    }

    .about_main .third_sec .haikei .absolute{
        right: 0;
        top: 420px;
    }

    .about_main .fourth_sec .fourth_sec_tittle{
        justify-content: left;
    }

    .about_main .fourth_sec .haikei{
            width: 100%;
            margin: 0;
            background-size: 100%;
            background-position:center;
            padding-bottom: 850px;
    }

    .about_main .fourth_sec .haikei .aziwai_text{
        width: 100%;
        padding: 2% 10% 5% 5%;
    }

    .about_main .fourth_sec .haikei .absolute{
        left: 0;
        top: 520px;
    }

    .about_main .fourth_sec .haikei .absolute p{
        text-align: center;
    }

    .event_main .scound_sec .left_box{
        padding: 5px;
        margin-bottom: 30px;
    }

     .event_main .scound_sec .left_box h3{
        font-size: 14px;
        text-align: center;
        margin-bottom: 10px;
     }

     .event_main .scound_sec .left_box h1{
        text-align: center;
     }


}