@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@media print, screen and (min-width: 769px) {
	.sp { display: none; }
	.c-mainvisual-recipe-feature-inner { height: 500px !important;width: auto; }
  .c-mainvisual-recipe-feature .r-img img {
    max-height: 500px !important;
  }
  /*.c-mainvisual-recipe-feature .r-img {
    position: relative;
  }
  .c-mainvisual-recipe-feature .r-img img {
    max-width: 100% !important;
  }*/
	.breadcrumbs {
		width: 1040px;
		margin: 0 auto;
		padding: 40px 0;
	}
	.breadcrumbs a {
		font-size: 14px;
		color: #969696;
		text-decoration: none;
		font-family: "Zen Kaku Gothic New", serif;
		font-weight: 500;
		font-style: normal;
	}
	.breadcrumbs a::before {
		content: "";
		width: 15px;
		height: 14px;
		background: url("/recipes/cat_assets/src/844_mayokitchen/img/common/breadcrumbs.svg") no-repeat center / 100%;
		margin-right: 8px;
		display: inline-block;
		position: relative;
		top: 2px;
	}
	.recipe_contents {
		width: 1040px;
		margin: 60px auto 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.recipe_contents .material { width: 280px; }
	.recipe_contents .material ul,
	.recipe_contents .make ol {
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: listnum;
	}
	.recipe_contents .material li { padding: 0 0 8px 16px; }
	.recipe_contents .material li.a::before {
		content: "A";
		width: 16px;
		margin-left: -16px;
		display: inline-block;
	}
	.recipe_contents .material li.b::before {
		content: "B";
		width: 16px;
		margin-left: -16px;
		display: inline-block;
	}
  .recipe_contents .material li.koromo {
    position: relative;
  }
	.recipe_contents .material li.koromo-first span {
		position: absolute;
    display: block;
    left:-20px;
    top: 0;
	}
  .recipe_contents .material li.koromo-first::before {
    content: "";
    width: 0.5rem;
    height: 1px;
    background: #333;
    display: block;
    position: absolute;
    left: 0.5rem;
    top: -4px;
  }
  .recipe_contents .material li.koromo-end::before {
    content: "";
    width: 0.5rem;
    height: 1px;
    background: #333;
    display: block;
    position: absolute;
    left: 0.5rem;
    bottom: 2px;
  }
	.recipe_contents .material li.koromo::after {
		content: "";
		width: 1px;
    height: 2.7rem;
    background: #333;
    position: absolute;
    left: 0.5rem;
    top: -4px;
	}
	.recipe_contents .make_photo_point { width: 740px; }
	.recipe_contents .make_photo_point::after { content: ""; display: block; clear: both; }
	.recipe_contents .make {
		width: 420px;
		float: left;
	}
	.recipe_contents .make li { padding: 0 0 0 24px; margin-bottom: 16px; line-height: 1.6; }
	.recipe_contents .make li::before {
		counter-increment: listnum;
		content: counter(listnum);
		width: 24px;
		margin-left: -24px;
		font-size: 22px;
		color: #000;
		display: inline-block;
		position: relative;
		top: 2px;
	}
	.recipe_contents .photo {
		width: 270px;
		float: right;
    margin-top: 78px;
	}
	.recipe_contents .photo .img {
		width: 270px;
		height: 200px;
		border-radius: 10px;
		overflow: hidden;
	}
	.recipe_contents .photo .img + .img { margin-top: 10px; }
	.recipe_contents .photo .img img { width: 100%; }
	.recipe_contents .point {
		width: 420px;
		float: left;
		border: 2px solid #E4002B;
		border-radius: 10px;
		padding: 16px 24px;
		margin-top: 24px;
	}
	.recipe_contents .point p { margin: 0; }
	.recipe_contents h2 {
		font-size: 22px;
		color: #000;
		font-family: "Zen Maru Gothic", serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 0 24px;
		padding: 0 0 2px;
		display: inline-block;
		border-bottom: 3px solid #000;
	}
	.recipe_contents .point h2 { margin-bottom: 16px; color: #E4002B !important; border-color: #E4002B !important;}
	.recipe_contents h2 span {
		font-size: 18px;
		font-weight: 500;
		position: relative;
		top: -2px;
	}
	.secret {
		width: 1040px;
		background: #FFF0B9;
		border-radius: 20px;
		padding: 32px 56px;
		margin: 120px auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
	}
	.secret h2 {
		font-size: 36px;
		color: #E4002B;
		font-family: "Zen Kaku Gothic New", serif;
		font-weight: 700;
		font-style: normal;
		margin: 0;
		padding: 0 0 2px;
		display: inline-block;
		border-bottom: 3px solid #E4002B;
		position: absolute;
		top: -40px;
		left: 56px;
	}
	.secret .text { width: 480px; }
	.secret .text h3 {
		font-size: 28px;
		color: #000;
		font-family: "Zen Maru Gothic", serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 0 32px;
	}
	.secret .text p {
		font-size: 17px;
		line-height: 1.8;
		margin: 0;
	}
	.secret .imgs { width: 400px; }
	.secret .imgs img { width: 100%;border-radius: 10px; }
	.back_to_page {
		width: 1040px;
		margin: 120px auto 0;
		text-align: center;
	}
	.back_to_page p {
		background: url("/recipes/cat_assets/src/844_mayokitchen/img/common/back_to_page.svg") no-repeat center bottom / 220px;
		margin: 0 0 32px;
		padding: 0 0 24px;
		font-size: 18px;
		letter-spacing: 1px;
		font-family: "Zen Kaku Gothic New", serif;
		font-weight: 700;
		font-style: normal;
	}
	.back_to_page a {
		width: 1040px;
		height: 260px;
		background: url("/recipes/cat_assets/src/844_mayokitchen/img/common/mayo_kithen_pc.png") no-repeat center / 100%;
		border-radius: 20px;
		overflow: hidden;
		display: block;
	}
	.back_to_page a img { width: 100%; }
  .u-txt__small { font-size: 13px !important; }
}
@media screen and (max-width: 768px) {
	.pc { display: none; }
	body { font-size: 3.73333vw; }
	.breadcrumbs {
		width: 86vw;
		margin: 0 auto;
		padding: 7.2vw 0;
		font-size: 3.4vw;
	}
	.breadcrumbs a {
		font-size: 3.4vw;
		color: #969696;
		text-decoration: none;
		font-family: "Zen Kaku Gothic New", serif;
		font-weight: 500;
		font-style: normal;
	}
	.breadcrumbs a::before {
		content: "";
		width: 2.6vw;
		height: 2.5vw;
		background: url("/recipes/cat_assets/src/844_mayokitchen/img/common/breadcrumbs.svg") no-repeat center / 100%;
		margin-right: 2vw;
		display: inline-block;
	}
	.recipe_contents {
		width: 86vw;
		margin: 9.866666667vw auto 0;
	}
	.recipe_contents .material { width: 100%; }
	.recipe_contents .material ul,
	.recipe_contents .make ol {
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: listnum;
	}
	.recipe_contents .material li { padding: 0 0 2.4vw 4vw; }
	.recipe_contents .material li.a::before {
		content: "A";
		width: 4vw;
		margin-left: -4vw;
		display: inline-block;
	}
	.recipe_contents .material li.b::before {
		content: "B";
		width: 4vw;
		margin-left: -4vw;
		display: inline-block;
	}
  .recipe_contents .material li.koromo {
    position: relative;
  }
	.recipe_contents .material li.koromo-first span {
		content: "";
		position: absolute;
    display: block;
    left:-3.5vw;
    top: 0;
	}
  .recipe_contents .material li.koromo-first::before {
    content: "";
    width: 0.5rem;
    height: 1px;
    background: #333;
    display: block;
    position: absolute;
    left: 0.5rem;
    top: -1vw;
  }
  .recipe_contents .material li.koromo-end::before {
    content: "";
    width: 0.5rem;
    height: 1px;
    background: #333;
    display: block;
    position: absolute;
    left: 0.5rem;
    bottom: 0.2rem;
  }
	.recipe_contents .material li.koromo::after {
		content: "";
		width: 1px;
    height: 2.7rem;
    background: #333;
    position: absolute;
    left: 0.5rem;
    top: -1vw;
	}
	.recipe_contents .make_photo_point {
		width: 100%;
		padding: 8vw 0;
	}
	.recipe_contents .make { width: 100%; }
	.recipe_contents .make li { padding: 0 0 0 8vw;line-height: 1.7;margin-bottom: 4vw; }
	.recipe_contents .make li::before {
		counter-increment: listnum;
		content: counter(listnum);
		width: 8vw;
		margin-left: -8vw;
		font-size: 5.2vw;
		color: #000;
		display: inline-block;
		position: relative;
		top: 1vw;
	}
	.recipe_contents .photo {
		width: 56vw;
		margin: 10vw auto 0;
	}
	.recipe_contents .photo .img {
		width: 56vw;
		height: 41vw;
		border-radius: 1.3vw;
		overflow: hidden;
	}
	.recipe_contents .photo .img + .img { margin-top: 1.3vw; }
	.recipe_contents .photo .img img { width: 100%; }
	.recipe_contents .point {
		width: 100%;
		border: 0.4vw solid #E4002B;
		border-radius: 1.3vw;
		padding: 3.2vw 4.8vw;
		margin-top: 9.6vw;
	}
	.recipe_contents .point p { margin: 0; }
	.recipe_contents h2 {
		font-size: 3.7vw;
		color: #000;
		font-family: "Zen Maru Gothic", serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 0 4.26vw;
		padding: 0 0 0.5vw;
		display: inline-block;
		border-bottom: 0.4vw solid #000;
	}
	.recipe_contents .point h2 { margin-bottom: 3.2vw;color: #E4002B;border-color: #E4002B; }
	.recipe_contents h2 span {
    color: #000;
    border-color: #E4002B;
		font-size: 3.2vw;
		font-weight: 500;
	}
	.secret {
		width: 86vw;
		background: #FFF0B9;
		border-radius: 2.6vw;
		padding: 5vw;
		margin: 16vw auto 0;
		position: relative;
	}
	.secret h2 {
		font-size: 6.4vw;
		color: #E4002B;
		font-family: "Zen Kaku Gothic New", serif;
		font-weight: 700;
		font-style: normal;
		margin: 0;
		padding: 0 0 1vw;
		display: inline-block;
		border-bottom: 0.4vw solid #E4002B;
		position: absolute;
		top: -6.4vw;
		left: 5vw;
	}
	.secret .text {
		width: 100%;
		margin: 0 0 8vw;
	}
	.secret .text h3 {
		font-size: 5vw;
		color: #000;
		font-family: "Zen Maru Gothic", serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 0 4vw;
	}
	.secret .text p {
		font-size: 3.6vw;
		line-height: 1.8;
		margin: 0;
	}
	.secret .imgs { width: 100%; }
	.secret .imgs img { width: 100%;border-radius: 2vw; }
	.back_to_page {
		width: 86vw;
		margin: 12vw auto 0;
		text-align: center;
	}
	.back_to_page p {
		background: url("/recipes/cat_assets/src/844_mayokitchen/img/common/back_to_page.svg") no-repeat center bottom / 40vw;
		margin: 0 0 4vw;
		padding: 0 0 4vw;
		font-size: 3.2vw;
		letter-spacing: 0.2vw;
		font-family: "Zen Kaku Gothic New", serif;
		font-weight: 700;
		font-style: normal;
	}
	.back_to_page a {
		width: 86vw;
		height: 34.4vw;
		background: url("/recipes/cat_assets/src/844_mayokitchen/img/common/mayo_kithen_sp.png") no-repeat center / 100%;
		border-radius: 2.6vw;
		overflow: hidden;
		display: block;
	}
	.back_to_page a img { width: 100%; }
  .u-txt__small { font-size: 3vw !important; }
}
.red { color: #E4002B; }



.p-mayolitchen-urawaza-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 0;
}
.p-mayolitchen-urawaza-nav-list-itm {
  width: calc((100% - 60px) / 4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-mayolitchen-urawaza-nav-list-itm-link {
  display: block;
  width: 100%;
  transition: opacity 0.3s;
}
@media print, screen and (min-width: 769px) {
  .p-mayolitchen-urawaza-nav-list-itm-link:hover {
    opacity: 0.7;
  }
}
.p-mayolitchen-urawaza-nav-list-itm-img {
  width: 100%;
  height: auto;
}
.p-mayolitchen-urawaza-nav-list-itm-ttl {
  align-self: flex-end;
}
@media screen and (max-width: 768px) {
  .p-mayolitchen-urawaza-nav-list {
    flex-direction: column;
    gap: 2.666666667vw;
    width: 90vw;
    margin-left: 6.666666667vw;
  }
  .p-mayolitchen-urawaza-nav-list-itm {
    width: 100%;
  }
}