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

@media screen and (max-width:736px) {
	html, body {
		min-width: 0;
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust : 100%;
	}
	
	img {
		max-width: 100% !important;
		height: auto;
	}
	
	.sp_only {
		display: inherit!important;
	}
		.pc_only {
		display: none!important;
	}
	
	.main-contents {
	  padding: 0 2%;
		width: 100%;
		box-sizing: border-box;
	}
	.other img.main-bg {
	 height: 350px;
	 object-fit: cover;
		}
		
		
		.tab-area table {
	line-height: 2em;
	width: 100%;
	box-sizing: border-box;
	table-layout: fixed;
	line-break: anywhere;
		word-break: keep-all;}
		
		#brand-area .tab-area table tr > td {
	  padding: 1rem 1rem 3rem;
	}
	/*-----------------------------
	
	recruit
	
	------------------------------*/
	
	.favorites-bg,.Search-bg {
	
	  width: 100%;
	  padding: 0 2%;
	  flex-direction: column;}
	
	.favorites-bg > div:nth-child(1) {
	
	  width: 100%;
	}
	
	.favorites-bg > div:nth-child(1) > img:nth-child(1) {
	  width: 70%;
	}
	.favorites-bg div.search-box {
	  width: 100%;
	  margin-top: 2rem;
	}
	.recipe-list ul li {
	  width: 100%!important;
	}
	
	/*
	.recipe-list ul li a {
	  display: flex;
	}
	*/
	
	.recipe-list-img img {
	  height: auto;
	}
	
	.recipe-list-img {
	  width: 40%;
	  margin-right: 1rem;
	}
	
	
	.recipe-text {
	  width: 60%;
	}
	
	/*-----------------------------
	
	
	contact
	
	------------------------------*/
	.contact-innfo_area > div > div {
	
	  width: 100%;
	  margin-bottom: 2rem;
	}
	
	.contact-innfo_area div {
	  flex-direction: column;
	}
	
	.contact-innfo_area > h2:nth-child(1) {
	  margin-bottom: 2rem;
	}
	
	.contact-form_area #mw_wp_form_mw-wp-form-816 > form:nth-child(1) > div dl {
	  width: 100%;
	}
	
	.contact-form_area #mw_wp_form_mw-wp-form-816 > form:nth-child(1) > div {
	  flex-direction: column;
	}
	#submit {
	  margin-top: 2rem;
	}
		.confbtn {
	  margin:  0; 
	}
	.backbtn {
	  margin-bottom: 1rem;
		 margin-right: 0rem;
	}
	/*-----------------------------

faq

------------------------------*/
	
	.faq-bg img {
  width: 32%;
}
	
	.faq-area dl > dt.questions::before,.faq-area dl > dt.questions::after {
right: 0%;
}
	dl > dt.questions {
		height: 80px;
	padding-right: 5rem;
}
	/*-----------------------------
	
	Search
	
	------------------------------*/
		
	
	.result {
	  width: 65%;
	}
	.Search-bg img {
	
	  width: 50%;
	}
	
	/*-----------------------------
	
	onlineｎ
	------------------------------*/
	
	#mian-visual-02.online-bg img {
	  width: 75%;
	}
	#online-area .main-contents > img:nth-child(1) {
	  width: 100%;
	}
	#online-area .main-contents > div:nth-child(2) {
	  width: 90%;
	}
	#online-area .main-contents > div:nth-child(2) > img:nth-child(2) {
	  margin: 2rem 0;
	}
	/*-----------------------------
	
	recruit
	
	------------------------------*/
	.mian-visual_box {
	  width: 95%;
	  bottom: -107%;
	}
	#recruit-area .main-contents {
	  margin-top: 40rem;
	}
	.Target_block {
	  flex-direction: column;
	}
	.Target_block > div {
	  width: 100%;
	}
	.Recruitment_area .tab_class {
	  width: calc(100%/2);
	}
	
	div.job > dl > div {
	  margin-bottom: 20px;
	  flex-direction: column;
	}
	
	div.job > dl > div dt:nth-child(1) {
	  width: 100%;
	  margin-bottom: 2px;
	}
	
	div.job > dl > div dd:nth-child(2) {
	  width: 100%;
	}
	.Recruitment_area > div:nth-child(1) {
	
	  width: 100%;
	  padding: 0 2%;
	}
	#recruit-area div > h2 > img{
	  width: 54%;
	}
	.Recruitment_area .tab_class p {
		  position: relative;
	  display: block;
	  padding-right: 20px;
		margin-top: 1rem;
		font-weight:  normal;
		text-align: left;
		line-height: 1.5;
	
	}
		div.job:nth-child(6) > p:nth-child(2) {
	  width: 100%;
	}
	div.job:nth-child(6) > img:nth-child(3) {
	  width: 100%;
	  margin: 2rem;
	}
	.recruit01 {
	
	  margin-bottom: 2rem;
	   width: 100%;
	}
	
	.OUR-VALUEarea > div:nth-child(1) > figure:nth-child(2) {
	  margin: 3rem 0 0 0;
	  width: 100%;
	  overflow-x: scroll;
	}
	
	.OUR-VALUEarea > div:nth-child(1) > figure:nth-child(2) > img:nth-child(1) {
	  margin-top: 0rem!important; 
	  width: 100%;
	  overflow: scroll;
	  min-width: 700px;
	}
	
	/*-----------------------------
	
	about
		
	------------------------------*/
		
	
	.about-boxs img {
	  width: 50%;
	}
	
	.about-boxs > p:nth-child(2) {
	  font-size: 1.8rem!important;
	}
	
	div.about-link_area div {
	  width: 100%;
	}
	
		.about-explanation_area > img:nth-child(1) {
	
	  width: 100%;
	}
	.about-explanation_area > p:nth-child(2) {
	  width: 95%;
	}
	.news_area div, .GLOBAL-WEBSITES_area {
	  padding: 0 2%;
		width: 100%;
	}
	.GLOBAL-WEBSITES_area > div:nth-child(2) > a {
	  width: 21%;
	}
	.GLOBAL-WEBSITES_area > h2:nth-child(1) > img:nth-child(1) {
	  width: 75%;
	}
	.news_area h2:nth-child(1) img {
	
	  width: 28%;
	}
.news_area > div > ul > li > a > p:nth-child(1) {
  width: 25%;
}
.news_area > div > ul > li > a > p:nth-child(2) {
  width: 74%;
}

	
	/*-----------------------------
	
	press
	
	------------------------------*/
		
		
	li.top-info__item> a:nth-child(1) {
	  display: flex;
	}
	
	
	li.top-info__item > a:nth-child(1) > div:nth-child(1) {
	  width: 40%;
		}
	
	.top-info__item {
	  width: 100%;
		height: auto;
	}
	
		.top-info__link > div:nth-child(1) > img:nth-child(1){
	height: 140px; 
	}
	.news_cont {
	  width: 60%;
	}
	.top-info__link .time {
	  font-size: 2rem;
	}
	.top-info__txt {
	  font-size: 1.6rem;
	
	
	
	}
	
	/*-----------------------------
	
	office
	
	------------------------------*/
		
		
	
	
	.brand-bg .main-name {
	
	  width: 53%;
	}
	
	
	
	.history_main-visual > img:nth-child(2) {
	  width: 83%;
	}
	.history_block {
	  background-image: url("../images/page/brand/kechup_sp.png");
	  background-repeat: no-repeat;
		padding: 2rem 2%;
		}
		.history_block > div img{
			width: 80%;
	margin: 0 0 0 auto;
		}
	/*-----------------------------
	
	history
	
	------------------------------*/
		
	/* style2.css | http://piece011.xsrv.jp/hzwp/wp-content/themes/heinz/css/style2.css?ts=1661241356 */
	
	.tab-group {
	position: unset;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: unset;
		padding: 2rem;}
	
	li.tab:nth-child(1) {
	
	  margin-bottom: 1rem;
	  width: 100%;
	}
	
	.tab {
	left: unset;
	  width: 30%;
	}
	
		.tab.is-active::before {
	
	  left: 9%;
	}
	
	#history-area {
	  background:none; 
	}
	
	.text_area {
	  width: 100%;
	  margin-top: 3rem;
	}
	
	div.panel h2:nth-child(1) > img {
	
	  width: 78%;
	}
	
	.panel .img_block  img {
	  width: 100%!important;
	  margin-top: 5rem!important;
	}
	
	.Column-2{
	flex-direction: column-reverse
		}
		
	
	.Column-2 > div {
	
	  width: 100%;
	}
	.Column-2 > div img{
	
	display: block;
		margin: auto;}
	
	.Column-2 > p {
	  width: 100%;
	}
	
	/*-----------------------------
	
	office
	
	------------------------------*/
	.kechup02 {
	  position: absolute;
	  top: 85%;
	  transform: translateX(-50%)translateY(-50%);
	  left: 16%;
	  width: 25%;
	  z-index: 2;
	  opacity: .5;
	}
	/*-----------------------------
	
	office
	
	------------------------------*/
		.other #mian-visual.office-bg > img:nth-child(1) {
	 object-position: 21% 50%;
	}
	.other #mian-visual.office-bg .main-name {
	  width: 41%;
			}
	
	.tab-area table tr > th {
	  width: 100%;
	  padding: 4rem 1rem 1rem;
	  border-bottom: solid 2px #fff;
		border-right: none;
	  display: block;
	}
	
	.tab-area table tr > td {
	  width: 100%;
	  padding: 1rem 1rem 5rem 1rem;
	  display: block;
	}
	
	/*-----------------------------
	
	common
	
	------------------------------*/
	.inner {
		width: 100%;
		box-sizing: border-box;
	    max-width: 100%;
	    margin: 0 auto;
	    padding: 0 2%;
	}	
	
	header {padding: 2em 3em;}
	header h1 {
	    width: 30%;
	}
	header .hd-info {display: none;}
	
	
	/*-----------------------------
	
	footer
	
	------------------------------*/
	
	footer {
		padding: 5em 3em;
		color: #fff;
		background-color: #95162a;
	}
	
	footer a {color: #fff;}
	footer .footer-nav {padding-bottom: 5em;}
	
	footer .f-nav {width: 50%; margin-bottom: 3em;}
	footer .f-nav li h2 {
		width: 50%;
		margin-bottom: 1em;
	}
	
	footer .f-nav li h2.nf {width: 64%;}
	footer .f-nav li ul.child li {
		font-size: 1.3rem;
	}
	
	footer .f-nav li ul.child li + li {margin-top: .5em;}
	footer .f-nav li ul.child li a:hover {border-bottom: solid 1px #fff;}
	
	p.copyright {
		font-size: 1.2rem;
		text-align: center;
	}

	
	/*-----------------------------
	
	top
	
	------------------------------*/
	#mian-visual {
		margin: 0 0 5em;
		position: relative;
	}
	
	#mian-slider {
		display: none;
		height: 500px !important;
	}
	
	ul#mian-slider li img {
		height: 300px !important;
		object-fit: cover;
	}
.about-area > div:nth-child(1) {
  /* margin-top: 3rem; */
  flex-direction: column-reverse;
  margin-top: 4rem;
}
.about-info h2 {
  margin: 3em 0 1em;
}

	.cook-area {
		padding: 0em;
		margin-bottom: 10em;
	}
	
	.cook-img {width: 90%; margin: 0 auto 3em;}
	.cook-img img {width: 100%;
	height: 200px;}
	
	.cook-info {
		width: 90%;  margin: 0 auto;
	} 
	
	.cook-info h2 {
		width: 60%;
		margin: 0 0 1em;
	}
		
	.cook-info p {
		font-size: 1.6rem;
		line-height: 2;
		margin-bottom: 2em;
	}
	
	.product-area {
		margin-bottom: 0em;
		padding: 8em 2em;
		text-align: center;
	}
	
	.product-area h2 {
		width: 60%;
		margin: 0 auto 1em;
	}
	
	.product-area ul li {
		width: 50%;
		padding: 1.6em;
	}
	
	.product-area ul li div span {
		font-size: 2rem;
		position: absolute;
		top: -10%;
		left: -10%;
		color: #951729;
	}

		
	.product-area ul li div {
		font-size: 1.2rem;
		padding-top: .5em;
		font-weight: bold;
	}
	
	.about-area {padding: 0 2em;}
	.about-info {
		width: 100%;
		padding-left: 0em;
		margin-bottom: 2em;
	} 
	
	.about-info p {
	    font-size: 1.6rem;
	    line-height: 2;
	    margin-bottom: 2em;
	}
	
	.about-img {
	    width: 100%;
	}	
	#sb_instagram {
		padding:0 !important;
	}
	.instagram-area p {
	    font-size: 1.5rem;
	    line-height: 2;
	}	
	
	.brand-area {
	    padding: 8em 2em;
	    text-align: center;
	}
	
	.brand-area p {
		font-size: 1.3rem;
		line-height: 2;
		margin-bottom: 3em;
	}
	.brand-area ul {align-items: center;}
	.brand-area ul li {
		width: 50%;
		padding: 1em;
	}
	.instagram-area {
		padding: 10em 2em;
	}
	/*-----------------------------
	
	page-ttl
	
	------------------------------*/
	#page-ttl {padding: 10em 3em;}
	.products-bg {
	    background: url("../images/page/products/top/sp_main-bg.png") no-repeat;
	    background-size: cover;
	    background-position: right 50% bottom;
	}

	#page-ttl h2 {
		width: 40%;
		margin-bottom: 1em;
	}
	
	#page-ttl p {
		font-size: 1.4rem;
		line-height: 2
		font-weight: bold;
	}
	
	#main-contents {
	    padding-top: 5em;
	    margin-bottom: 10em;
	}


	/*-----------------------------
	
	products-inner
	
	------------------------------*/
	
	.products-inner {
	    width: 90%;
	    margin: 0 auto;
	}

	.new-items {
	    width: 40%;
	    margin: 0 auto 3em;
	    text-align: center;
	}
	
	ul.new-items-list {
	    margin-bottom: 5em;
	}

	ul.new-items-list li {
		width: 48%;
		text-align: center;
		margin-bottom: 1em;
	}
	
	ul.new-items-list li h3 {
		font-size: 1.3rem;
		line-height: 2;
	}
	
	ul.products-list li {
	    width: 49%;
	    margin-bottom: 2em;
	}

	/*-----------------------------
	
	 products cat
	
	------------------------------*/
	#products-cat {
		display : block ;
		text-decoration : none ;
		border-top: 3px solid #FFFFFF;
		outline : 3px solid #FFFFFF;
		outline-offset : -20px;
		padding: 5em 2em;
		margin-bottom: 1em;
		color: #fff;
		text-align: center;
	}

	#products-cat h2 {
		font-size: 2rem;
		font-weight: bold;
		margin-bottom: 1em;
	}
	
	#products-cat h2 span {
		font-size: 1.4rem;
		font-weight: normal;
		display: block;
	}

	#products-cat ul li {
		width: 33.333%;
		padding: 1em;
	}
	
	h2.products-ttl {
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 2em;
	}
	
	h2.products-ttl span {
		color: #95162a;
		padding-right: 1em;
	}
	
	
	ul.products-cat-list02 {
		margin-bottom: 5em;
	}
	
	ul.products-cat-list02 li {
		width: 48%;
		text-align: center;
		margin-bottom: 3em;
	}
	
	ul.products-cat-list02 li h3 {
		line-height: 1.6;
		font-size: 1.3rem;
	}
	
	ul.products-list02 {
		border-top: 1px solid #ccc;
		padding-top: 5em;
	}
	
	ul.products-list02 li{
		width: 48%;
		margin-bottom: 2em;
	}

	/*-----------------------------
	
	 products single
	
	------------------------------*/
	
	.products-single {
		margin-bottom: 10em;
	}
	
	.products-single-img {
		width: 100%;
		margin-bottom: 3em;
	}
	.products-single-img img {
		width: 100%;
		height: 320px;
		object-fit: contain;
	}
	
	.products-single-info {
		width: 100%;
		margin-bottom: 3em;
	}
	
	
	.products-single-info h2 {
		font-size: 2rem;
		line-height: 2;
		font-weight: bold;
		margin-bottom: 1em;
	}
	
	.products-single-info p {
		font-size: 1.5rem;
		line-height: 2;
		margin-bottom: 2em;
	}
	.products-single-info ul {justify-content: space-between;}
	.products-single-info ul li {
		width: 48%;
		margin-right: 0;
	}
	
	ul.products-btn-link {
		width: 100%;
		padding: 0 5em;
		display: flex;
		justify-content: space-between;
	}
	
	ul.products-btn-link li {width: 50%;}
	ul.products-btn-link li + li {
	    margin-top: 0em;
	}

	.products-single-is dl {
		width: 50% !important;
		border-bottom: 1px solid #ccc;
		padding-bottom: 1em;
		margin-bottom: 1em;
	}
	
	.products-others .swiper-slide {
		text-align: center !important;
	}

	.products-others .swiper-slide a {
		width: 100% !important;
		margin: 0em !important;
		padding: 0 1em !important;
	}

	.swiper-slide a {
		width: 100% !important;
		margin: 0em !important;
	}


	/*-----------------------------
	
	 recipe
	
	------------------------------*/
	
	.recipe-bg {
  background: url("../images/page/recipe/search/sp-main-bg.png") no-repeat;
    background-size: auto;
  background-size: cover;
		padding: 20rem 0 !important;
	}
	.recipe-inner {
	    width: 90%;
	    margin: 0 auto;
    }
	.recipe-single-is p {
	    font-size: 1.4rem;
	    line-height: 2;
	}
	
	.recipe-list {
	    width: 100%;
	    padding: 0;
	    border-left: none;
		margin-top: 4rem;
		}
	
	

.recipe-list > ul > div {

  width: 100%;
}

.recipe-list > ul > div > img {

  margin: 0 auto 1rem;
}

	
	.recipe-list-img {
	  width: 100%;
	  margin-right: 0rem;
	  display: block;
	}
	
	.recipe-list ul li h3 {
		width: 100%;
		display: block;
	    font-size: 1.6rem;
	    line-height: 2;
	    margin-bottom: 2em;
	    padding: 0.5em 0;
	    font-weight: bold;
	}
	
	.recipe-list .r-left {
		width: 60%;
	}
	
	.recipe-list .r-left dl {align-items: center;}
	.recipe-list .r-left dl + dl {margin-top: 1em;}
	.recipe-list .r-left dl dt {
	}
	
	
	.recipe-container {width: 100%;}	
	
	ul.recipe-campaign li {
	    width: 100%;
	    border-left: 1px solid #fff;
    }
    ul.recipe-campaign li + li {margin-top: 1em;}
    
	ul.r-img {display: none;}
	
	.tab-wrap ul {flex-wrap: wrap;}
	.tab-wrap ul li {width: 50%;}
	.tab-btn {
	}	
	
	.r-list div a {
	    width: 100%;
	    padding: 1em;
	    display: block;
	    margin: 0 1em;
	    background-color: #fff;
	}	
	
	.sauce-list a {
	    height: 400px;
	    display: block;
	    margin: 0 1em;
	    background-color: #fff;
	}	
	
	.recipe-feature02 ul li {width: 47%; margin-bottom: .5em;}
	
	h2.rs-ttl {
	    clear: both;
	    font-size: 1.6rem;
	    font-weight: bold;
	    line-height: 2;
	    text-align: center;
	    margin-bottom: 0.5em;
	}

	.recipe-cat {
	    width: 100%;
	    padding: 5em 0;
	    order: 2;
	}
	
	.recipe-sarea-img {width: 100%;}
	.recipe-sarea-img p {
		padding: 1em 0 0;
		font-size: 1.4rem;
	}
	
	.recipe-sarea-info {width: 100%;} 	
	
	.recipe-sarea-info dl {
	    margin-top: 2em;
	    align-items: center;
	}	
	
	ul.recipe-menu-list {padding-top: 5em;} 
	ul.recipe-menu-list li {
		width: 33.333%;
		text-align: center;
		margin-right: 0;
	} 
	
	ul.recipe-menu-list li img {width: 50%;}
	ul.info-recipe li {
	    width: 100%;
	    border: 2px solid #951729;
	    text-align: center;
	    padding: 5em 0 0;
	    margin-right: 0;
	    margin-bottom: 3%;
	}
	
	
	/*-----------------------------
	
	 hamburge
	
	------------------------------*/
	
	
	h2.hamburger-ttl {
		width: 80%;
		margin: 0 auto 3em;
		text-align: center;
	}
	
	h2.hamburger-ttl span {
		display: block;
		font-size: 1.5rem;
		padding-top: 1em;
	}
	
	p.txt {
	    text-align: center;
	    font-size: 1.4rem;
	    line-height: 2;
	    padding: 0 2em;
	}	
	
	.hamburger-txt {
	    font-size: 1.5rem;
	    line-height: 2;
	    margin-bottom: 5em;
	}
	
	.hamburger-txt br {display: none;}
		
	.recipe-main-left,
	.recipe-main-right{
		width: 100%;
		margin-bottom: 2em;
	}	
	
	.recipe-main-right .s-img {
		width: 100%;
		text-align: center;
		margin-bottom: 3em;
	}
	.recipe-main-right .s-info {
		width: 100%;
	}
		
	.video-area iframe {
		width: 100%;
		height: 180px;
		margin: 0 auto;
	}	
	
	.hamburger-flow-inner .hamburger-flow-img {
	    width: 100%;
	    text-align: center;
	}	
	
	.hamburger-flow-point {
	    width: 100%;
	    padding: 2em;
	    margin: 0 auto 5em;
	    text-align: center;
	    background-color: #efeff0;
	    border: 4px solid #cbcbca;
	}	
		
	.hamburger-flow-point h3 {
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: .5em;
	}
	
	.hamburger-flow-point p {
		font-size: 1.3rem;
		line-height: 2;
		text-align: left;
	}		
	

	.recipe-single-is dl {
		text-align: left;
		border-bottom: 1px solid #ccc;
		padding-bottom: 1em;
		margin-bottom: 1em;
	}
	
	.recipe-single-is dl dt {
		width: 100%;
		font-size: 1.4rem;
		line-height: 2;
		text-align: left;
		border-right: none;
	}
	
	.recipe-single-is dl dd{
		font-size: 1.4rem;
		line-height: 2;
		padding-left: 0em;
		
	}	
	
	.hamburger-flow h3 {
	    font-size: 1.6rem;
	    line-height: 2;
	    margin-bottom: 1em;
	    letter-spacing: .05em;
	}	
	
	h2.recipe-single-ttl {
	    padding-left: 0em;
	    text-align: center;
	}
	
	.cheese-sp li {width: 25% !important; padding: 1em 0 !important;}
	
	
	

.recruit2023 .OUR-VISION_area > p:nth-child(2) {
	font-size: 1.6rem;
  }
    .recruit2023 .OUR-VISION_area > p:nth-child(3) {
	font-size: 3rem;
  }
  .recruit2023 .OUR-VALUEarea2 h3 {
	text-align: center;
	display: block;
  }
  div.OUR-VALUE-block p {
	width: 100%;
  }
  div.OUR-VALUE-block img {
	width: 55%;
	display: block;
	margin-left: auto;
	position: unset;
	margin-top: 6rem;
  }
  div.OUR-VALUE-block:nth-child(2) > img:nth-child(2) {
	width: 80%;
  }
  
  .OUR-VALUE-block {
	padding: 10rem 0 0 !important;
  }
  @media screen and (max-width: 736px) {
	.OUR-VALUE-block .inner {
	  max-width: 100% !important;
	  padding: 0 2% !important;
	}
  }
  

		
	
}