@charset "utf-8";
/* ------------------------------------------------------------ common */
.btn{ transition: color 0.8s; position: relative; display: flex; justify-content: center; align-items: center; width: 450px; color: #fff!important; background: #db000b; font-size: 18px; line-height: 150%; border: 1px solid #db000b; border-radius: 50px; font-family: 'Noto-Sans-KR-Bold', Arial; }
.btn:hover{ transition: color 0.8s; color: #db000b!important; background: #fff; }
.btn:after{ position: absolute; content: ""; top: 50%; right: 20px; transform: translate(0,-50%) rotate(45deg); width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; }

.sec-ttl{ font-size: 20px; letter-spacing: 0.1em; font-family: 'Noto-Sans-KR-Medium'; text-align: center; }
.sec-ttl .en{ display: block; padding: 0 0 13px; font-family: "josefin-sans", sans-serif; font-style: normal; font-size: 70px; color: #33952e; letter-spacing: 0.08em; }

.sec-ttl02{ text-align: center; }
.sec-ttl02 .item{ display: block; padding: 0 0 45px; }
.sec-ttl02 .brackets{ padding: 0 30px; background: url(../images/brackL.png) left center/20px no-repeat, url(../images/brackR.png) right center/20px no-repeat; font-size: 24px; letter-spacing: 0.1em; font-family: 'Noto-Sans-KR-Medium'; }


/* ------------------------------------------------------------ fv */
#fv{ position: relative; overflow: hidden; padding: 0 0 95px; min-height: 800px; }
#fv .fv_inner{ padding: 0 12%; }

#fv .fv_slider_box{ padding: 33vw 0 10vw; }
#fv .item{ width: 20%; height: auto; margin: 0 0 25px 60px; }

#fv .fv_slider_01{ background: url(../images/fv_slider/pic_01.jpg) center/cover no-repeat; }
#fv .fv_slider_02{ background: url(../images/fv_slider/pic_02.jpg) center/cover no-repeat; }
#fv .fv_slider_03{ background: url(../images/fv_slider/pic_03.jpg) center/cover no-repeat; }
#fv .fv_slider_04{ background: url(../images/fv_slider/pic_04.jpg) center/cover no-repeat; }

#fv .fv_ttl{ width: 30%; position: absolute; top: 20%; left: 12%; z-index: 10; }
#fv .fv_ttl p{ width: 520px; }
#fv .fv_ttl p span{ display: inline-block; margin: 0 0 10px; padding: 10px 20px 10px 20px; color: #fff; background: #000; font-size: 35px; font-family: 'Noto-Sans-KR-Medium'; }

#fv .slider-sp{ display: none!important; }

#fv .menu{ position: relative; width: 340px; margin: 0 0 0 auto; padding: 30px; border-radius: 10px; background: #fff; filter: drop-shadow(5px 5px 0px #2a8100); text-align: right; border: 1px solid #2a8100; transform: translateZ(0); }
#fv .menu:before{ position: absolute; content: ""; top: 0; left: 20px; width: 32px; height: 34px; background: url(../images/icn_flag.png) center/cover no-repeat; }
#fv .menu dl{ padding: 10px 0; color: #33952e; text-align: left; }
#fv .menu dt{ position: absolute; top: 10px; left: 70px; display: flex; align-items: center; justify-content: flex-start; padding: 0 0 5px; font-size: 18px; }
#fv .menu dt .num{ display: inline-block; margin: 0 0 0 5px; padding: 2px 10px; vertical-align: middle; font-size: 15px; color: #fff; background: #000; border-radius: 50px; }
#fv .menu dd{ font-family: 'Noto-Sans-KR-Medium'; font-size: 30px; line-height: 160%; color: #000; }
#fv .menu a{ display: inline-block; padding: 0 0 6px; color: #33952e; font-size: 14px; font-family: 'Jost', sans-serif; font-family: 'Noto-Sans-KR-Medium'; border-bottom: 1px solid #33952e; }

#fv .sv{ position: relative; margin-top: -10vw; }
#fv .bg_carve{ position: absolute; content: ""; width: 100vw; height: 11vw; background: url(../images/bg_fv.png) center top/cover no-repeat; top: 3vw; left: 0; }


.text-roop{ width: 100%; height: 106px; background: url(../images/roop_lineup.png); background-repeat: repeat-x; background-position: 0 0; animation: bgroop 50s linear infinite; -webkit-animation: bgroop 30s linear infinite; position: relative; z-index: 5; }
@keyframes bgroop{ 
	from{ background-position: 0 0;}
	to{ background-position: -2136px 0;}
}
@-webkit-keyframes bgroop{ 
	from{ background-position: 0 0;}
	to{ background-position: -2136px 0;}
}

.text-roop.fast{ animation: bgroopFast 40s linear infinite; -webkit-animation: bgroop 20s linear infinite; }
@keyframes bgroopFast{ 
	from{ background-position: 0 0;}
	to{ background-position: -2136px 0;}
}
@-webkit-keyframes bgroopFast{ 
	from{ background-position: 0 0;}
	to{ background-position: -2136px 0;}
}

#fv .fv_dish{ position: absolute; top: 0; z-index: 50; width: 100%; padding: 30px 0; }

/* slider */
.slider{ display: flex; align-items: center; transition-timing-function: linear; }
#fv .slider_item{ width: 269px!important; }
#fv .slide-arrow{ z-index: 50; position: absolute; top: 50%; width: 30px; height: 30px; border-top: 1px solid #fff; }
#fv .next-arrow{ transform: rotate(45deg); right: 5%; border-right: 1px solid #fff; }
#fv .prev-arrow{ transform: rotate(-45deg); left: 5%; border-left: 1px solid #fff; }


.grobal-nav{ width: 80%; margin: 0 auto; padding: 100px 0 50px; }
.grobal-nav ul{ display: flex; align-items: center; justify-content: center; gap: 7%; }
.grobal-nav a{ position: relative; padding: 0 25px; font-family: 'Noto-Sans-KR-Bold'; font-size: 20px; }
.grobal-nav a:after{ position: absolute; transform: rotate(45deg) translate(0,-50%); right: 0; top: 50%; content: ""; width: 10px; height: 10px; border-bottom: 1px solid #B98503; border-right: 1px solid #B98503; }


/* ------------------------------------------------------------ company */
#about{ position: relative; margin: 150px 0 130px; }
#about:before{ position: absolute; content: "ABOUT"; width: 70%; white-space: nowrap; height: 300px; top: -130px; left: 50%; translate: -50% 0; font-size: 340px; letter-spacing: 0.07em; color: #f0f0f0; font-family: 'Jost', sans-serif; font-weight: 700; }
#about:after{ position: absolute; content: ""; top: 25px; left: 0; width: 100%; height: 110%; background: url(../images/bg_repeat_lattice.png) center/30px; }

#about .flex{ position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; }
#about .txt{ width: 600px; }
#about .txt .sec-ttl{ padding: 0 0 60px; text-align: left; }
#about .txt .sec-ttl img{ width: 270px; height: auto; }
#about .txt h3{ padding: 0 0 50px; line-height: 150%; font-size: 40px; font-family: 'Noto-Sans-KR-Medium'; }
#about .txt p{ font-size: 18px; line-height: 200%; padding: 0 0 30px;}
#about .txt small{ display: block; padding: 0 0 30px; font-size: 13px; line-height: 180%; }

#about .example{ width: 310px; margin: 0 50px 0 0; }
#about .example li{ margin: 0 0 60px; text-align: center; }
#about .example li:last-of-type{ margin: 0; }
#about .example li p{ padding: 20px 0 0; font-size: 15px; line-height: 160%; }

#about .btn{ z-index: 10; margin: 60px auto 0; padding: 25px 10px; }


/* ------------------------------------------------------------ tips */
#tips{ position: relative; }
#tips:before,
#tips:after{ position: absolute; content: ""; }
#tips:before{ top: 20px; left: 50%; transform: translate(-50%,0); width: 1447px; height: 247px; background: url(../images/bg_tips.png) center/cover no-repeat; text-align: center; }
#tips:after{ bottom: -50px; left: calc(50% + 300px); width: 208px; height: 213px; background: url(../images/bg_tips02.png) center/cover no-repeat; }

#tips .bg{ padding: 75px 0 0; }
#tips .tips_box{ overflow: hidden; background: #f7f6f0; padding: 200px 0 120px; }
#tips .sec-ttl02{ position: absolute; top: 0px; left: 50%; transform: translate(-50%,0); }

#tips .tips_slider{ overflow: hidden; background: url(../images/bg_tips_slider.jpg) center/100% no-repeat; }
#tips .tips_slider_box{ position: relative; padding: 0 30px; transform: scale(.8); transition: all 0.5s; }
#tips .tips_slider_box .view{ position: absolute; bottom: 0; right: 0; }
#tips .slick-center{ transform: scale(1); }

#tips [data-slick-index="3"] .view{ bottom: 5%; right: -10%; }


/* mordal */
.no_scroll{  }
#overlay{ display: none; z-index: 150; position: fixed; top: 0; width: 100%; height: 100%; left: 0; background: #f7f6f0; }

#tips .modal-window{ display: none; z-index: 200; position: fixed; top: 0; width: 100%; height: 100%; }
#tips .modal-window .modal-box{ position: relative; height: 100%; }
#tips .modal-window .num{ z-index: 200; position: absolute; top: 60px; left: 50%; transform: translate(-50%,0); font-size: 70px; letter-spacing: 0.06em; font-family: 'Jost', sans-serif; }

#tips .modal-window .w_box{ z-index: 150; position: relative; top: 100px; left: 50%; transform: translate(-50%,0); overflow-y: scroll; padding: 70px 30px 60px; background: #fff; background: #fff; width: 590px; height: 85vh; min-height: 700px; border: 1px solid #000; border-radius: 50px; }
#tips .modal-window li{ padding: 0 0 50px; }
#tips .modal-window li:last-of-type{ padding: 0; }

#tips .modal-window h4{ margin: 0 0 20px; }
#tips .modal-window h4 span{ display: inline-block; margin: 0 0 10px; padding: 5px 10px; font-size: 25px; font-family: 'Noto-Sans-KR-Medium'; color: #fff; background: #000; }
#tips .modal-window figure img{ width: 100%; height: auto; margin: 0 0 10px; }
#tips .modal-window figcaption{ font-size: 18px; line-height: 180%; }

#tips .modal-window .button-close{ position: absolute; top: 60px; right: 150px; left: calc(50% + 200px); z-index: 200; width: 100px; }


/* ------------------------------------------------------------ products */
.jan{ display: table; width: 100%; }
.jan th,
.jan td{ padding: 10px 20px; border: 1px solid #c9c9c9; }
.jan th{ width: 40%; background: #eeeeee; }
.jan td{ text-align: right; }

#products{ padding: 70px 0 0; background: url(../images/bg_repeat_lattice02.png) center/30px; }
#products .sec-ttl{ padding: 0 0 50px; text-align: center; }

#products .products_item{ z-index: 10; position: relative; display: flex; align-items: center; justify-content: space-around; width: 830px; margin: 0 auto; padding: 0 0 60px; }
#products .products_item figure{ position: relative; width: 50%; height: auto; text-align: center; }
#products .products_item h3{ padding: 30px 0 0; font-size: 30px; line-height: 150%; text-align: center; }

#products .feature-area{ position: relative; padding: 0 0 130px; background: #fff; }
#products .feature-area .bg_carve{ position: absolute; content: ""; width: 100vw; height: 16vw; background: url(../images/bg_fv.png) center top/cover no-repeat; top: -16vw; left: 0; }

.feature{ width: 830px; margin: 0 auto; padding: 50px; border: 1px solid #000; border-radius: 30px; }
.feature-box:not(:last-of-type){ padding: 0 0 50px; }
.feature-box h4{ margin: 0 0 30px; padding: 10px; background: #000; font-size: 24px; text-align: center; color: #fff; border-radius: 50px; }
.feature-box li{ display: flex; align-items: center; justify-content: space-between; margin: 0 0 50px; }
.feature-box li:last-of-type{ margin: 0; }
.feature-box li img{ width: 165px; }
.feature-box li .text{ width: calc(100% - 200px); }
.feature-box li h5{ font-size: 21px; }
.feature-box li h5 span{ padding: 0 0 5px; border-bottom: 3px dotted #000; font-family: 'Noto-Sans-KR-Medium'; line-height: 200%; }
.feature-box li .name{ display: inline-block; padding: 4px 10px; color: #fff; text-align: center; }
.feature-box li .name01{ background: #2F9547; }
.feature-box li .name02{ background: #B9A720; }
.feature-box li p{ padding: 18px 0 0; line-height: 180%; }


/* ------------------------------------------------------------ recipes */
.recipes-area{ display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 60px 0 0; }
.recipes-area li{ margin-right: 40px; margin-bottom: 60px; }
.recipes-area li:nth-of-type(4n){ margin-right: 0; }
.recipes-area figure{ margin: 0 0 25px; border-radius: 20px; }
.recipes-area .txt h3{ padding: 0 0 10px; font-size: 20px; line-height: 160%; }
.recipes-area .txt dl{ display: flex; align-items: center; }
.recipes-area .txt dd{ display: flex; align-items: center; padding: 0 10px; color: #b6b292; }
.recipes-area .txt dd:first-of-type{ padding-left: 0; }
.recipes-area .txt dd:not(:last-of-type){ border-right: 1px solid #b6b292; }
.recipes-area .txt dd img{ margin: 0 10px 0 0; }

.hover-efect li figure{ width: 100%; overflow: hidden; border-radius: 20px; will-change: transform; }
.hover-efect li figure img{ transition: 0.4s; }
.hover-efect li:hover figure img{ transform: scale(1.2); transition: 0.4s; }

.tab-group{ display: flex; align-items: flex-start; justify-content: center; margin: 70px 0 0; }
.tab-group .tab{ position: relative; width: 530px; margin: 0 1%; padding: 25px 10px 26px; background: #fff; border-radius: 10px 10px 0 0; }
.tab-group .tab p{ font-size: 30px; letter-spacing: 0.1em; text-align: center; font-family: 'Noto-Sans-KR-Medium'; cursor: pointer; }
.tab-group .tab img{ position: absolute; top: -20px; left: 20px; }
.tab-group .tab.is-active{ background: #2e9547; }
.tab-group .tab.is-active p{ color: #fff; }

.panel-group{ border-top: 10px solid #33952e; }
.panel{ display: none; }
.panel.is-show{ display: block; }


#recipes{ z-index: 2; position: relative; padding: 130px 0 60px; }
#recipes:before{ z-index: -1; position: absolute; top: 0; left: 0; content: ""; width: 90%; height: 1850px; background: #f7f6f0; border-radius: 0 100px 100px 0; }
#recipes .ttl-box p{ padding: 10px 0 0; font-size: 18px; line-height: 180%; }

#recipes .top-recipes{ }
#recipes .top-recipes .item{ position: relative; bottom: -320px; width: 780px; }
#recipes .recipes-area li{ width: 520px; margin-right: 30px; }

#recipes .recipes_wrapper{ padding: 90px 0 40px; position: relative; background: url(../images/pic_19.png) calc(50% + 300px) center no-repeat; }
#recipes .tab-B .recipes_wrapper{ background-image: url(../images/pic_05.png); }

#recipes .roop-area{ z-index: -1; position: relative; top: -60px; }
#recipes .text-roop{ height: 91px; margin: 0 0 30px; background: url(../images/roop_meat.png); }


/* ------------------------------------------------------------ other */
#recipes  .other{ position: relative; padding: 120px 0 60px; }
#recipes  .other:before{ z-index: -1; position: absolute; top: 0; right: 0; content: ""; width: 78%; height: 1220px; background: #f7f6f0; border-radius: 100px 0 0 100px; }
#recipes  .other .sec-ttl{ text-align: center; }

#recipes  .other .recipes-area li{ width: 245px; }
#recipes  .other .btn{ position: relative; display: block; width: 450px; margin: 0 auto; padding: 37px 10px 36px; border-radius: 100px; color: #fff; background: #db000b; font-size: 20px; text-align: center; }


/* ------------------------------------------------------------ lineup */
#lineup{ position: relative; margin: 80px 0 0; padding: 0 0 70px; }
#lineup .sec-ttl{ padding: 0 0 50px; text-align: center; }

.lineup{ padding: 100px 5%; background: #fcfbf2; border-radius: 100px; font-family: 'Noto-Sans-KR-Medium'; }
.lineup .btn{ width: 270px; margin: 0 auto; padding: 16px 10px 18px; font-size: 16px; font-family: 'Noto-Sans-KR-Medium';  }
.wasabi-list{ display: flex; justify-content: space-around; }
.wasabi-list li{ width: 47%; text-align: center; }
.wasabi-list li figure{ padding: 0 0 30px; }
.wasabi-list li figcaption{ padding: 25px 0 0; font-size: 20px; font-family: 'Noto-Sans-KR-Medium'; }

.lineup .tube{ padding: 80px 0 0; }
.lineup .tube p{ padding: 30px 0 40px; font-size: 25px; text-align: center; font-family: 'Noto-Sans-KR-Medium'; line-height: 150%; }

.lineup_product{ display: block; width: 120px; margin: 0 auto; padding: 20px 0 5px; text-align: center; font-size: 14px; color: #B98601!important; border-bottom: 1px solid #B98601; }
.lineup_product:hover{ opacity: 0.7; }



/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

/* ------------------------------------------------------------ common */
	.btn{ width: 85%; }
	
	.sec-ttl{ font-size: 15px; }
	.sec-ttl .en{ padding: 0 0 12px; font-size: 45px; }
	
	.sec-ttl02 .item{ padding: 0 0 20px; }
	.sec-ttl02 .brackets{ width: 100%; padding: 20px; font-size: 15px; background-size: 15px; }



/* ------------------------------------------------------------ fv */
	.text-roop{ height: 80px; background: url(../images/roop_lineup-sp.png); }
	
	#fv{ padding: 0 0 40px; background-size: 20px; }
	#fv .fv_inner{ position: relative; display: flex; align-items: flex-end; padding: 0 5% 5px; }
	#fv .fv_inner:after{ position: absolute; z-index: -1; top: 47vw; left: 0; content: ""; width: 100%; height: 10vw; background: url(../images/bg_fv.png) center/115% no-repeat; }
	
	#fv .fv_dish{ top: 20px; padding: 0; }
	#fv .fv_dish.SP{ display: flex; top: 120px; }
	
	#fv .fv_slider_box{ z-index: 100; position: relative; padding: 62vw 0 50vw; }
	
	#fv .fv_slider_01{ background: url(../images/fv_slider/pic_01-sp.jpg) center top/100% no-repeat; }
	#fv .fv_slider_02{ background: url(../images/fv_slider/pic_02-sp.jpg) center top/100% no-repeat; }
	#fv .fv_slider_03{ background: url(../images/fv_slider/pic_03-sp.jpg) center top/100% no-repeat; }
	#fv .fv_slider_04{ background: url(../images/fv_slider/pic_04-sp.jpg) center top/100% no-repeat; }
	
	#fv .item{ width: 56px; margin: 0 20px 0 0; max-height: 364px; max-width: 90px;}
	#fv .fv_ttl{ width: 100%; display: flex; flex-staralign-items: flex-start; top: 300px; left: 5%; bottom: inherit; }
	#fv .fv_ttl h3{ width: 100%; padding: 0 0 15px; }
	#fv .fv_ttl h3 span{ margin: 0 0 5px; padding: 5px 4px 8px 15px; font-size: 24px; }
	#fv .fv_ttl p{ width: 73%; }
	#fv .fv_ttl p span{ margin: 0 0 5px; padding: 10px; font-size: 24px; }
	
	#fv .slider-sp{ top: 120px; display: flex!important; }
	
	#fv .menu{ position: relative; top: 180px; left: 23%; width: 78%; margin: 0; padding: 12px 25px; border-radius: 10px; filter: drop-shadow(2px 2px 0px #2a8100); }
	#fv .menu::before{ width: 22px; height: 24px; }
	#fv .menu dl{ padding: 0 0 2px; }
	#fv .menu dt{ left: 55px; font-size: 12px; }
	#fv .menu dt .num{ padding: 2px 8px; font-size: 11px; }
	#fv .menu dd{ padding: 30px 0 0; font-size: 20px; }
	#fv .menu a{  padding: 0 0 1px; font-size: 10px; }
	
	#fv .slide-arrow{ display: none; }
	#fv .slider_item{ width: 110px!important; }
	
	#fv .bg_carve{ z-index: 1; top: 80vw; }
	#fv .sv{ margin-top: 30px; }
  	
  	.grobal-nav{ width: 100%; padding: 50px 0 0; }
  	.grobal-nav ul{ justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
  	.grobal-nav li{ width: calc(100% / 2 - 10px); }
  	.grobal-nav a{ display: block; padding: 15px 0; font-size: 14px; border-bottom: 1px dashed #B98503; }
  	.grobal-nav a::after{ right: 20px; }
  	
  	

	/* ------------------------------------------------------------ company */
	#about{ margin: 10px 0 70px; }
	#about::before{ width: 100%; height: 190vw; top: -20px; border-radius: 0 50px 50px 0; background-size: 20px; font-size: 100px; font-weight: 600; }
	#about::after{ height: 105%; }
	#about .flex{ padding: 80px 0 0; flex-direction: column; }
	#about .txt{ width: 100%; padding: 0 0 50px; }
	#about .txt .sec-ttl{ padding: 0 0 25px; }
	#about .txt .sec-ttl img{ width: 170px; }
	#about .txt .sec-ttl .en{ padding: 0 0 8px; }
	
	#about .txt h3{ padding: 0 0 20px; font-size: 23px; }
	#about .txt h4{ padding: 0 0 20px; font-size: 25px; }
	#about .txt p{ padding: 0 0 10px; font-size: 13px; }
	#about .txt small{ padding: 15px 0 0; font-size: 10px; }
	
	#about .example{ display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; }
	#about .example li{ margin: 0; display: flex; justify-content: space-between; align-items: center; }
	#about .example li p{ width: 62%; padding: 15px 0 0; font-size: 13px; text-align: left; }

	#about .example li img{ height: auto; margin: 0 auto; }
	#about .example li:first-of-type img{ width: 60px; }
	#about .example li:nth-of-type(2) img{ width: 140px; }
	#about .example li:last-of-type img{ width: 70px; }
	
	#about .btn{ margin: 30px auto 0; padding: 15px 10px; width: 100%; }


/* ------------------------------------------------------------ tips */
	#tips:before{ width: 100%; max-width: 100%; height: 170px; top: 0; background: url(../images/bg_tips-sp.png) center/100% no-repeat; }
	#tips:after{ bottom: -20px; left: initial; right: 0; width: 22%; height: 100px; background: url(../images/bg_tips02.png) left center/cover no-repeat; }
	#tips .bg{ padding: 60px 0 0;}
	
	#tips .sec-ttl02{ top: 30px; }
	#tips .tips_box{ padding: 120px 0 70px; }
	#tips .tips_slider{ background: url(../images/bg_tips_slider.jpg) center/auto 30% no-repeat; }
	#tips .tips_slider_box{ padding: 0 0 40px; }
	#tips .tips_slider_box .view{ width: 90px; height: 90px; right: -12%; top: 0%; }
	#tips [data-slick-index="3"] .view{ right: -12%; top: 0%; }
	
	
	/* mordal */
	#tips .modal-window .num{ top: 50px; font-size: 40px; }
	#tips .modal-window .w_box{ top: 70px; padding: 40px 15px 30px; width: 90%; height: 70vh; min-height: 300px; border-radius: 25px; }
	#tips .modal-window h4{ margin: 0 0 10px; }
	#tips .modal-window h4 span{ font-size: 14px; }
	#tips .modal-window figure img{ margin: 0 0 15px; }
	#tips .modal-window figcaption{ font-size: 13px; }
	
	#tips .modal-window .button-close{ top: 10vw; left: initial; right: 10px; width: 80px; }


/* ------------------------------------------------------------ procucts */
	.jan th,
	.jan td{ padding: 8px 9px; font-size: 12px; }
	
	#products{ padding: 70px 0 0; margin: 0 0 20px; background: url(../images/bg_repeat_lattice02.png) center/18px; }
	#products .sec-ttl{ position: relative; z-index: 1; padding: 0 0 25px; }
	
	#products .products_item{ margin: 0 auto; padding: 0; width: 100%; }
	#products .products_item figure{ width: 50%; margin: 0 auto 20px; padding: 0; }
	#products .products_item figure img{ position: relative; z-index: 2; width: 70px; height: auto; }
	#products .products_item h3{ padding: 20px 0 17px; font-size: 18px; text-align: center; }
	
	.products{ position: relative; background: #fff; }
	.products .bg_carve{ position: absolute; width: 100vw; height: 11vw; background: url(../images/bg_fv.png) center top/cover no-repeat; top: -11vw; left: 0; }
	
	.feature{ width: 100%; padding: 40px 5%; border-radius: 20px; }
	.feature-box:not(:last-of-type){ padding: 0 0 25px; }
	.feature-box h4{ margin: 0 0 20px; font-size: 20px; }
	.feature-box li{ display: block; margin: 0 0 25px; }
	.feature-box li img{ width: 200px; margin: 0 auto 12px; display: block; }
	.feature-box li .text{ width: 100%; }
	.feature-box li h5{ font-size: 20px; }
	.feature-box li h5 span{ padding: 0 0 2px; border-width: 2px; line-height: 190%; }
	.feature-box li p{ padding: 15px 0 0; font-size: 12px; }
	

/* ------------------------------------------------------------ recipes */
	.recipes-area{ padding: 30px 0 0; }
	.recipes-area li{ margin-right: 20px; margin-bottom: 15px; }
	.recipes-area figure{ margin: 0 0 10px; }
	.recipes-area .txt h3{ font-size: 16px; }
	.recipes-area .txt h4{ font-size: 17px; }
	.recipes-area .txt dd{ font-size: 10px; }
	.recipes-area .txt dd img{ width: auto; height: 20px; }
	
	.tab-group{ margin: 50px 0 0; }
	.tab-group .tab{ width: 45%; padding: 22px 10px 14px; border-radius: 5px 5px 0 0; }
	.tab-group .tab p{ font-size: 15px; }
	.tab-group .tab img{ top: -20px; left: 50%; width: 55px; height: auto; translate: -50% 0; }
	
	.panel-group{ border-width: 5px; }
	
	#recipes{ padding: 65px 0 30px; }
	#recipes:before{ width: 97%; height: 1680px; border-radius: 0 30px 30px 0; }
	
	#recipes .ttl-box{ display: block; }
	#recipes .sec-ttl{ width: 100%; padding: 0 0 15px; }
	#recipes .ttl-box p{ font-size: 13px; line-height: 200%; }
	
	#recipes .top-recipes{ position: relative; padding: 0; background: none; }
	#recipes .top-recipes .meet{ width: 100%; }
	#recipes .top-recipes .item{ position: absolute; bottom: -50px; width: 65%; }
	
	#recipes .roop-area{ top: 50px; left: 50%; transform: translate(-50%,0); }
	#recipes .recipes-area li{ width: 100%; margin-right: 0; }
	
    #recipes .top-recipes{ position: absolute; }
    #recipes .recipes_wrapper{ padding: 30px 0 46vw; background: none; }
    #recipes .tab-B .recipes_wrapper{ background: none; }
	#recipes .text-roop{ height: 40px; margin: 0 0 20px; background: url(../images/roop_meat-sp.png); }
	
	#products .feature-area{ padding: 0 0 50px; }
	

/* ------------------------------------------------------------ other */
	#recipes  .other{ padding: 60px 0 60px; }
	#recipes  .other:before{ border-radius: 30px 0 0 30px; width: 96%; height: 1360px; }
	#recipes  .other .sec-ttl{ padding: 0; }
	#recipes  .other .sec-ttl .en{ font-size: 33px; }
	
	#recipes  .other .recipes-area{ padding: 30px 5% 0; }
	#recipes  .other .recipes-area li{ width: 48%; margin-right: 4%; }
	#recipes  .other .recipes-area li:nth-of-type(2n){ margin-right: 0; }
	#recipes  .other .btn{ width: 90%; padding: 17px 10px 16px; font-size: 15px; }


/* ------------------------------------------------------------ lineup */
	.lineup{ padding: 50px 5%; border-radius: 30px; }
	.lineup .btn{ width: 100%; padding: 13px 10px 15px; font-size: 13px; }
	.lineup .c-link a{ width: calc(100% / 3 - 3px); }
	
	.lineup .tube{ padding: 20px 0 0; }
	.lineup .tube p{ padding: 0 0 30px; font-size: 16px; }
	
	.wasabi-list{ display: block; }
	.wasabi-list li{ width: 100%; margin: 0 0 40px; }
	.wasabi-list li figure{ padding: 0; }
	.wasabi-list li figure img{ width: 55%; height: auto; }
	.wasabi-list li figcaption{ padding: 19px 0 25px; }
	
	.wasabi-list02 li figcaption{ padding-bottom: 0; }

	#lineup{ margin: 0; padding: 0 0 60px; }
	#lineup::before{ top: 30px; width: 95%; height: 325vw; background-size: 20px; }
	#lineup .sec-ttl{ padding: 0 0 40px; }




}