@charset "utf-8";
/* CSS Document */
html, body {height: 100%;margin: 0;padding: 0;}
.fs-l-pageMain{margin: 0 auto;}
.fs-l-main{padding: 0px;max-width: none;
background-image: url(https://ginnomori.itembox.design/item/morinoshokutaku/morinoshokutaku_bg.jpg);background-repeat: repeat;background-position: center center;margin: 0 auto;text-align: center;background-attachment: fixed;min-height: 100vh;} 
    
/*TOPカルーセル*/
.top_carousel{width: 100%;position: relative;}
.sp_img {display: none !important;}
.pc_img {display: block !important;}
/* 768px以上に適用されるCSS（PC用）*/ 
@media screen and (max-width: 767px) {
.top_carousel {width: 100%;position:}
.sp_img {display: block !important;}
.pc_img {display: none !important;}}
/*画像バナー差し込み*/
.bg-image01{display: flex;justify-content: center;/*margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);*/margin-top: 0px;flex-direction: column;align-items: center;}
/* 768px以上に適用されるCSS（PC用）*/ 
@media screen and (min-width: 768px) {
.bg-image01{display: flex;justify-content: center;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);flex-direction: column;align-items: center;}} 
 /*横幅設定共通*/ 
.section-common{max-width: 1462px;}   
    
 /*TOPタイトル*/
.top--inner-m{text-align: center;margin: 40px 0 10px 0;color: var(--main-white);}
.top--title-m{font-family: var(--title);font-weight: 500;letter-spacing: 0.08em;margin-bottom: 10px;font-size: var(--font-size-L);}
.top--inner-m span{font-family: var(--serif);font-size: var(--font-size-M); letter-spacing: 0;}
@media (min-width: 768px) {
.top--inner-m{text-align: center;margin: 60px 0 20px 0;}
.top--title-m{font-size: var(--font-size-LL);}
.top--inner-m span{font-size: var(--font-size-L);}}   

/*ブランドストーリー*/    
.m-lead{text-align: center;font-size: var(--font-size-SM);line-height: 1.8;margin: 0 auto;color: var(--main-white);font-family: var(--serif);} 
.m-lead p{padding-bottom: 2px;}    
/* 768px以上に適用されるCSS（PC用）*/ 
@media (min-width: 768px) {
.m-lead{font-size: var(--font-size-L);line-height: 2.0;margin: 30px auto 50px auto;}
.m-lead p{padding-bottom: 5px;}}

/*調理方法*/ 
.m-content{border: 1px solid #fff;padding: 30px 20px;margin: 0px 15px;color: var(--main-white);}
.m-section-title{font-family: var(--serif);font-size: var(--font-size-M);letter-spacing: 0.2em;}
.m-section-desc{font-family: var(--serif);font-size: var(--font-size-SM);}
/* 768px以上のブレークポイント */
@media (min-width: 768px) {
.m-content{margin: 0px 40px;}
.m-section-title{font-size: var(--font-size-L);letter-spacing: 0.4em;}    
.m-section-desc{font-size: var(--font-size-L);}   
} 
/*森の食卓専用背景設定*/ 
.section-bg-container{;background-image:url(https://ginnomori.itembox.design/item/morinoshokutaku/bg.jpg);background-size: cover; background-position: center;background-repeat: no-repeat;padding: 20px 0;/*margin-top: 60px;*/} 

/*各セクション商品アイテム4列*/  
.menu-list4{display: flex; overflow-x: auto; /* 横スクロール */-webkit-overflow-scrolling: touch; /* IOS横スクロール */scroll-snap-type: x mandatory; /* スナップポイントを設定 */padding: 10px 0;scrollbar-color: #fff #f0f0f0;scrollbar-width: thin;width: 100%;white-space: nowrap;}
/* WebKit系のブラウザ（Chrome, Safariなど）用 */
.menu-list4::-webkit-scrollbar {height: 10px;}
.menu-list4::-webkit-scrollbar-track {background: #f0f0f0; border-radius: 10px;}
.menu-list4::-webkit-scrollbar-thumb {background-color: #fff;border-radius: 10px;}
.menu-item{flex: 0 0 auto;width: 40%;max-width: 200px; /* 最大幅 */margin: 0 5px; text-align: center;padding: 2px;position: relative;scroll-snap-align: start; /* スクロール開始位置 */flex-shrink: 0;}
.menu-item img{max-width: 100%;height: auto;display: block;margin: 0 auto 10px;}
/* 商品名 */
.menu-name{height: 3em;display: -webkit-box;-webkit-line-clamp: 4; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;margin-bottom: 5px;font-size: var(--font-size-S);text-align: start;color: #FFF;font-family: var(--serif);}
/* 価格 */
.menu-price{font-weight: bold;color:var( --main-white);text-align: right;font-size: var(--font-size-S);font-family: var(--serif);}
/* 税込 */
.menu-price small{font-weight: normal;font-size: var(--font-size-SS);font-family: var(--serif);}
/* ホバーした時 */
.menu-item a:hover img{opacity: 0.8;}
/* 768px以上のブレークポイント */
@media (min-width: 768px) {
.menu-list4{display: grid; grid-template-columns: repeat(4, 1fr);gap: 20px; overflow-x: visible; /* 横スクロール無効 */justify-content: center;margin: 20px auto;padding: 0; max-width: 1462px;}
.menu-item{width: auto;margin: 0;flex: unset;max-width: 300px; /* 最大幅を設定 */}
/* 商品名 */
.menu-name{height: 3em;display: -webkit-box;-webkit-line-clamp: 2;font-size: var(--font-size-M);}
/* 価格 */
.menu-price{font-weight: bold;text-align: right;font-size: var(--font-size-M);}
/* 税込 */
.menu-price small{font-weight: normal;font-size: var(--font-size-S);}}

/*セット一覧*/   
.m-product-list{display: flex;flex-direction: column;justify-content: center; align-items: center;padding: 20px;}
.m-product-item{flex: 0 0 30%;text-align: center; margin: 0 1%;margin-bottom: 20px;color: var(--main-white);font-family: var(--serif);}
.m-product-item img{width: 100%; height: auto;display: block; margin-bottom: 20px;}
/*バナーホバー時*/ 
.m-product-item a:hover img{opacity: 0.8;}
/* 768px以上のブレークポイント */
@media (min-width: 768px) {
.m-product-list{display: flex;flex-direction: row;justify-content: center; align-items: center;padding: 20px;}   
.m-product-item{margin-bottom: 20px;}}   
  
 
/*パスタソース/店舗説明*/    
.morinoshoku-exp-section{display: flex;flex-direction: column; margin: 0 auto;margin-bottom: 30px;}
.morinoshoku-exp-box{width: 100%;padding: 20px;}
.img-container img{width: 100%;height: auto;display: block;}
.txt-container{display: flex;flex-direction: column;justify-content: center;font-size: var(--font-size-SM);color:var(--main-white);text-align: center;line-height: 1.6;font-family: var(--serif);} 
.txt-container02{display: flex;flex-direction: column;justify-content: center;font-size: var(--font-size-M);color:var(--main-white);text-align: start;line-height: 1.6;font-family: var(--serif);}
/* 768px以上のブレークポイント */
@media screen and (min-width: 768px) {
.morinoshoku-exp-section{display: flex;flex-direction: row;align-items: center;}
.morinoshoku-exp-box{width: 50%;flex: 1 1 50%;}
.txt-container,.txt-container02{font-size: var(--font-size-M);text-align: start;}     
}

/*遷移ボタン*/
.button-wrapper-m1{padding: 25px 0;}    
.product-button-m1{display: inline-block;padding: 10px 20px;border: 1px solid #fff;color: #fff !important;text-decoration: none;font-size: var(--font-size-SM);line-height: 1.5;
transition: all 0.3s ease;margin: 10px 0;font-family: var(--serif);} 
/* 矢印部分 */    
.product-arrow-m1{margin-left: 8px;display: inline-block;transition: transform 0.3s ease;}
/* ホバー時の文字色を白にする */
.product-button-m1:hover{background-color: #B11919;color: var(--main-white);border: 1px solid #B11919;} 
.product-button-m1:hover .product-arrow-m1{transform: translateX(3px);}
.product-button-m1:hover .product-text-m1,.product-button-m1:hover .product-arrow-m1 {color: #fff !important;}

/* 768px以上のブレークポイント */ 
@media (min-width: 768px) {
.product-button-m1{/*display: inline-block;*/padding: 10px 30px;font-size: var(--font-size-SM);border: 2px solid #fff;}
.product-text-m1,.product-arrow-m1{color: var(--main-white);}
.product-button-m1:hover{background-color: #B11919;color: #fff !important;border: 2px solid #B11919;}
/* ホバー時の文字色を白にする */
.product-button-m1:hover .product-text-m1,.product-button-m1:hover .product-arrow-m1 {
color: #fff !important;}}   
    
.store-button{display: inline-block;background-color: #B11919;padding: 10px 40px;transition: background-color 0.3s;margin-top: 15px;color: var(--main-white);}
.store-button a:hover{background-color: #004d00;text-decoration: none;}
.store-button:after{content: ".";color: rgba(199, 1117, 193, 0);text-align: center;display: inline-block;width: 15px;height: auto;margin-left: 6px;background-position: center;background-image: url(https://ginnomori.itembox.design/item/top_img/icon_externallink.svg);background-size: contain;background-repeat: no-repeat;border: none;}
.store-button span {color: var(--main-white) !important;}
/* 768px以上のブレークポイント */
@media (min-width: 768px) {
.store-button{padding: 20px 40px; width: auto;min-width: 150px;text-align: center;color: var(--main-white);}} 
     
/* 店舗案内 */
.sec-store{display: flex;flex-direction: column;align-items: center;gap: 40px;justify-content: center;} 
.store-block-img{width: 80%}
.store-block-img,.store-block-txt{flex-grow:1;}
.store-block-txt{color: var(--main-white);line-height: 1.8;font-size: var(--font-size-M);text-align: start;}   
/* PC（768px以上）用のスタイル */
@media screen and (min-width: 768px) { 
.sec-store{display: flex;flex-direction: row;gap: 40px;align-items: center;justify-content: center;} 
.store-block-img{width: 30%}}