@charset "utf-8";
/* CSS Document */
.fs-l-main{padding: 0;}
/*スライドショーバナー*/   
/*TOPカルーセル*/
.top_carousel{width: 100%;position: relative;padding-bottom: 29.81949%;/* (826/2770)*100% */}
.sp_img {display: none !important;}
.pc_img {display: block !important;}
@media screen and (max-width: 767px) {
.top_carousel {width: 100%;position: relative;padding-bottom: 111.111111%;/* (1000/900)*100% */}
.sp_img {display: block !important;}
.pc_img {display: none !important;}}
.top_carousel img {animation: fade 9s infinite;/*合計時間*/-webkit-animation: fade 9s infinite;-moz-animation: fade 9s infinite;width: 100%;height: 100%;opacity: 0;position: absolute;top: 0;left: 0;}
@keyframes fade {
  0% {opacity: 0;}
  30% {opacity: 1;}
  35% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
@-webkit-keyframes fade {
  0% {opacity: 0;}
  30% {opacity: 1;}
  35% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
@-moz-keyframes fade {
  0% {opacity: 0;}
  30% {opacity: 1;}
  35% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
.top_carousel img:nth-of-type(1) {animation-delay: 0s;-webkit-animation-delay: 0s;-moz-animation-delay: 0s;}
.top_carousel img:nth-of-type(2) {animation-delay: 3s;-webkit-animation-delay: 3s;-moz-animation-delay: 3s;}
.top_carousel img:nth-of-type(3) {animation-delay: 6s;-webkit-animation-delay: 6s;-moz-animation-delay: 6s;}
.concept picture img {vertical-align: bottom;}   
/*画像バナー差し込み*/
.bg-image01{display: flex;justify-content: center;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);background-color: #B11919;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);background-color: #B11919;flex-direction: column;align-items: center;}}     

/*横幅設定共通*/ 
.section-common{max-width: 1462px;}

/*カリテレモンブランド説明*/    
.t-lead{text-align: center;font-size: var(--font-size-SM);line-height: 1.8;margin: 30px auto 30px auto;color: var(--font-color);} 
.t-lead p{padding-bottom: 2px;}    
.t-lead img{width: 40%;} 
/* 768px以上に適用されるCSS（PC用）*/ 
@media (min-width: 768px) {
.t-lead img{width: 20%;}
.t-lead{font-size: var(--font-size-L);line-height: 2.0;margin: 30px auto 50px auto;}
.t-lead p{padding-bottom: 5px;}}
/*各タイトル*/ 
/*TOPタイトル1*/
.top--inner-k{text-align: center;margin: 20px 0 10px 0;}
.top--title-k img{width: 40%}
.top--inner-k span{font-family: var(--serif);font-size: var(--font-size-M); letter-spacing: 0;color: #B11919;}
/* 768px以上のブレークポイント */
@media (min-width: 768px) {
.top--inner-k{text-align: center; margin: 60px 0 40px 0;}
.top--title-k img{width: 25%}
.top--inner-k span{font-size: var(--font-size-L);}}
/*TOPタイトル2*/
.top--title-k2 img{width: 23%}   
@media (min-width: 768px) {   
.top--title-k2 img{width: 15%}    
}

/*おすすめ商品*/ 
.kalite-rec-section{display: flex;flex-direction: column; margin: 0 auto;}   
@media screen and (min-width: 768px) {
.kalite-rec-section{display: flex;flex-direction: row;align-items: center;}}   
  
/*各セクション説明*/    
.kalite-exp-section{display: flex;flex-direction: column; margin: 0 auto;}
.kalite-exp-box{width: 100%;padding: 20px;}
.img-container img{width: 100%;height: auto;display: block;border-radius: 0px 80px 0px 80px;}
.txt-container{display: flex;flex-direction: column;justify-content: center;font-size: var(--font-size-SM);color:var(--font-color);text-align: center;line-height: 1.6;}   
/* 768px以上のブレークポイント */
@media screen and (min-width: 768px) {
.kalite-exp-section{display: flex;flex-direction: row;align-items: center;align-items: center;}
.kalite-exp-box{width: 50%;flex: 1 1 50%;}
.txt-container{font-size: var(--font-size-L);}     
}
/*各セクション説明・逆*/    
.kalite-exp-section-r{display: flex;flex-direction: column;margin: 0 auto;align-items: center;}
/* 768px以上のブレークポイント */
@media screen and (min-width: 768px) {
.kalite-exp-section-r{display: flex;flex-direction: row-reverse;}
}
/*各セクション商品アイテム4列*/  
.menu-list4{display: flex; overflow-x: auto; /* 横スクロール */-webkit-overflow-scrolling: touch; /* IOS横スクロール */scroll-snap-type: x mandatory; /* スナップポイントを設定 */padding: 10px 0;scrollbar-color: #B11919 #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: #B11919;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;border-radius: 150px;}
/* 商品名 */
.menu-name{height: 5em;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: center;color: #B11919;}
/* 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);}}   
   
/*各セクション商品アイテム3列*/  
.menu-list3{display: flex; overflow-x: auto; /* 横スクロール */-webkit-overflow-scrolling: touch; /* IOS横スクロール */scroll-snap-type: x mandatory; /* スナップポイントを設定 */padding: 10px 0;scrollbar-color: #B11919 #f0f0f0;scrollbar-width: thin;width: 100%;white-space: nowrap;}
/* WebKit系のブラウザ（Chrome, Safariなど）用 */
.menu-list3::-webkit-scrollbar {height: 10px;}
.menu-list3::-webkit-scrollbar-track {background: #f0f0f0; border-radius: 10px;}
.menu-list3::-webkit-scrollbar-thumb {background-color: #B11919;border-radius: 10px;}
/* 768px以上のブレークポイント */
@media (min-width: 768px) {
.menu-list3{display: grid; grid-template-columns: repeat(3, 1fr);gap: 20px; overflow-x: visible; /* 横スクロール無効 */justify-content: center;margin: 20px auto;padding: 0; max-width: 1462px;justify-items: center;}}   

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

/* 768px以上のブレークポイント */ 
@media (min-width: 768px) {
.button-wrapper-k1{padding: 25px 0;}
.product-button-k1{display: inline-block;padding: 10px 30px;font-size: var(--font-size-SM);color: #B11919;}
.product-text-k1,.product-arrow-k1{color: #B11919;}
.product-button-k1:hover{background-color: #B11919;color: #fff !important;}
/* ホバー時の文字色を白にする */
.product-button-k1:hover .product-text-k1,.product-button-k1:hover .product-arrow-k1 {
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(--font-color);line-height: 1.8;font-size: var(--font-size-M);}   
/* 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%}}
.bg-top-color{background-color: var(--bg-color);padding: 50px 0;}}