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

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #AE1A2B;
}

.introductionArea {
	position: relative;
	padding: 0 clamp(40px, 12vw, 218px) 153px;
	background-color: #ffe7ca;
}

.introductionArea::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/products/special/stewmix/happy_eiyo/images/bg-introduction-top.png);
	background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
	content: "";
}

.introductionArea::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 158px;
	background-image: url(/products/special/stewmix/happy_eiyo/images/bg-introduction-bottom.png);
	background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
	content: "";
}

@media screen and (max-width: 768px) {
	.introductionArea {
		padding: 0 20px 60px;
	}
}

.introductionBg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.introduction__innner {
	max-width: 1004px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.introduction__innner {
		max-width: 340px;
	}
}

.introductionBg__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

.introduction__ttl {
	display: block;
	padding-top: 82px;
	margin: 0 auto;
	max-width: clamp(180px, 22vw, 328px);
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.introduction__ttl {
		padding-top: 45px;
		max-width: clamp(120px, 41vw, 152px);
	}
}

.introduction__logo {
	position: relative;
	display: block;
	margin: -7px auto 0;
	max-width: 1004px;
	height: auto;
}

@media screen and (max-width: 768px) {
	.introduction__logo {
		margin-top: 7px;
		width: clamp(200px, 90.4vw, 339px);
	}
}

.introduction__logo::before {
	position: absolute;
	top: -83%;
	left: -5%;
	display: block;
	max-width: clamp(180px, 25vw, 356px);
	width: 100%;
	height: 100%;
	background: url(/products/special/stewmix/happy_eiyo/images/img_burukkori01.png) no-repeat center / contain;
	aspect-ratio: 356 / 376;
	content: "";
}

@media screen and (max-width: 768px) {
	.introduction__logo::before {
		top: -110%;
		left: -2%;
		max-width: clamp(50px, 29vw, 107px);
	}
}

.introduction__logo::after {
	position: absolute;
	top: -54%;
	right: -1.5%;
	display: block;
	max-width: clamp(150px, 20vw, 304px);
	width: 100%;
	height: 100%;
	background: url(/products/special/stewmix/happy_eiyo/images/img_ninjin01.png) no-repeat center / contain;
	aspect-ratio: 304 / 338;
	content: "";
}

@media screen and (max-width: 768px) {
	.introduction__logo::after {
		top: -107%;
		max-width: clamp(50px, 25vw, 92px);
	}
}

.introduction__text {
	position: relative;
	display: block;
	margin: 37px auto 0;
	max-width: clamp(300px, 45vw, 643px);
}

@media screen and (max-width: 768px) {
	.introduction__text {
		margin-top: 29px;
	}
}

.introduction__text::before {
	position: absolute;
	top: -13%;
	left: -38%;
	display: block;
	max-width: clamp(150px, 20vw, 300px);
	height: 100%;
	background: url(/products/special/stewmix/happy_eiyo/images/img_tamanegi01.png) no-repeat center / contain;
	aspect-ratio: 300 / 350;
	content: "";
}

@media screen and (max-width: 768px) {
	.introduction__text::before {
		top: -148%;
		left: -3%;
		max-width: clamp(50px, 24vw, 90px);
	}
}

.introduction__text::after {
	position: absolute;
	top: -17%;
	right: -48%;
	display: block;
	max-width: clamp(150px, 20vw, 304px);
	height: 100%;
	background: url(/products/special/stewmix/happy_eiyo/images/img_horenso01.png) no-repeat center / contain;
	aspect-ratio: 300 / 350;
	content: "";
}

@media screen and (max-width: 768px) {
	.introduction__text::after {
		top: -147%;
		right: -9%;
		max-width: clamp(50px, 25vw, 92px);
	}
}

.introduction__text--block {
	display: inline-block;
	line-height: 1.6;
}

.tvCmArea {
	position: relative;
	padding-top: clamp(50px, 16vw, 75px);
}

@media screen and (max-width: 768px) {
	.tvCmArea {
		padding-bottom: 13px;
	}
}

.tvCmArea::before {
	position: absolute;
	top: -14%;
	left: 0;
	max-width: clamp(150px, 33.7vw, 327px);
	width: 100%;
	aspect-ratio: 327/335;
	background: url(/products/special/stewmix/happy_eiyo/images/img_tvCm-block04.png) no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.tvCmArea::before {
		top: -9%;
		max-width: clamp(90px, 33.7vw, 123px);
	}
}

.tvCmArea::after {
	position: absolute;
	top: -5%;
	right: 2.5%;
	max-width: clamp(120px, 17.2vw, 247px);
	width: 100%;
	aspect-ratio: 247 / 178;
	background: url(/products/special/stewmix/happy_eiyo/images/img_tvCm-block05.png) no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.tvCmArea::after {
		top: 7%;
		right: 5.5%;
		max-width: clamp(50px, 22.2vw, 80px);
	}
}

.txCm__inner {
	max-width: 1381px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.txCm__inner {
		max-width: 375px;
	}
}

.tvCm__ttl {
	display: block;
	margin: 100px 0 0 150px;
	max-width: clamp(200px, 36vw, 519px);
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.tvCm__ttl {
		margin: 50px 0 0 22px;
		max-width: clamp(150px, 54vw, 202px);
	}
}

.tvCm__textBox {
	position: relative;
	margin: 40px auto 0;
	max-width: clamp(200px, 43vw, 617px);
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.tvCm__textBox {
		margin-top: 19px;
		max-width: clamp(200px, 83vw, 309px);
	}
}

.tvCm__textBox::after {
	position: absolute;
	bottom: 60px;
	right: -115px;
	display: block;
	max-width: 133px;
	width: 100%;
	aspect-ratio: 133 / 111;
	background: url(/products/special/stewmix/happy_eiyo/images/img_tvCm-block03.png) no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.tvCm__textBox::after {
		bottom: 96px;
		right: 7px;
		max-width: 34px;
	}
}

.tvCm__text {
	width: 100%;
	height: 100%;
}

.tvCm_movieBox {
	position: relative;
	display: block;
	margin-top: clamp(-105px, -7vw, -60px);
	margin-right: 0;
	margin-bottom: 0;
	margin-left: clamp(30px, 4.2vw, 60px);
	max-width: clamp(800px, 96vw, 1382px);
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.tvCm_movieBox {
		margin-top: -24px;
		margin-left: 0;
		max-width: 383px;
		width: clamp(200px, 110vw, 383px);
	}
}

.tvCm_movieBox::before {
	position: absolute;
	bottom: 170px;
	left: 0;
	transform: translateX(-60%);
	z-index: -1;
	display: block;
	background: url(/products/special/stewmix/happy_eiyo/images/img_tvCm-block02.png) no-repeat center / contain;
	max-width: 325px;
	width: 100%;
	aspect-ratio: 325 / 246;
	content: "";
}

@media screen and (max-width: 768px) {
	.tvCm_movieBox::before {
	bottom: -38px;
	transform: translateX(50%);
	max-width: 49px;
	background: url(/products/special/stewmix/happy_eiyo/images/img_tvCm-block06.png) no-repeat center / contain;
	}
}

.tvCm_movieBox::after {
	position: absolute;
	bottom: 43px;
	left: 50%;
	transform: translateX(-67%);
	z-index: -1;
	display: block;
	background: url(/products/special/stewmix/happy_eiyo/images/img_tvCm-block.png) no-repeat center / contain;
	max-width: 406px;
	width: 100%;
	aspect-ratio: 406 / 283;
	content: "";
}

@media screen and (max-width: 768px) {
	.tvCm_movieBox::after {
		bottom: 0;
		left: 38%;
		transform: translateX(-67%) rotate(37deg);
		max-width: 125px;
	}
}

.tvCm_movieBox--img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right;
}

.tvcm_iframeBox {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-60%);
	width: clamp(320px, 44vw, 640px);
	border-radius: 20px;
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.tvcm_iframeBox {
		width: clamp(150px, 75vw, 226px);
		transform: translate(-45%,-55%);
	}
}

.tvCmArea .tvcm_iframe {
	width: 100%;
	height: auto;
}

.characterArea {
	position: relative;
	padding-top: 6vw;
	padding-bottom: 15vw;
	margin-right: -3vw;
	background-image: url(/products/special/stewmix/happy_eiyo/images/bg_character-middle.png);
	background-repeat: no-repeat;
    background-position: top center;
	background-size: cover;
}

.characterBg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.character__inner {
	max-width: 1376px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.character__inner {
		max-width: 375px;
	}
}

.character__mainTTl {
	position: absolute;
	top: 6vw;
	left: 50%;
	transform: translateX(-59%);
	max-width: 740px;
}

@media screen and (max-width: 768px) {
	.character__mainTTl {
		top: 5%;
		transform: translateX(-52%);
		width: 100%;
		max-width: 289px;
	}
}

.character__ttl {
	display: block;
	margin: 45px 13px 0 -41px;
	max-width: clamp(300px, 95vw, 1376px);
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.character__ttl {
		position: relative;
		margin: 48px 0 0 -37px;
		max-width: 375px;
	}
}

@media screen and (max-width: 768px) {
	.character__ttl::after {
		position: absolute;
		top: 32%;
		right: -13%;
		max-width: 95px;
		width: 100%;
		background: url(/products/special/stewmix/happy_eiyo/images/sp/img_character-title-horen.png);
		aspect-ratio: 95 / 96;
		content: "";
	}
}

.character__ttl--img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.character__textBox {
	display: block;
	margin: -10px auto 0;
	max-width: clamp(300px, 48vw, 703px);
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.character__textBox {
		margin-top: -24px;
		max-width: clamp(150px, 64vw, 240px);
	}
}

.characterArea .characterList {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(20px, 4vw, 65px);
	margin: clamp(32px, 4.5vw, 64px) auto 0;
}

@media screen and (max-width: 768px) {
	.characterArea .characterList {
		margin-top: 180px;
		padding: 0 15px;
		gap: 60px 0;
	}
}

.characterList__item {
	max-width: clamp(200px, 40vw, 511px);
	width: calc((100% - 72px) / 2);
}

@media screen and (max-width: 768px) {
	.characterList__item {
		max-width: 180px;
	}
}

@media screen and (max-width: 768px) {
	.characterList__item:nth-child(2) {
		position: relative;
		z-index: 1;
		margin-top: -120px;
}
}

@media screen and (max-width: 768px) {
	.characterList__item:nth-child(3) {
		margin-right: 110px;
}
}

@media screen and (max-width: 768px) {
	.characterList__item:nth-child(4) {
		margin-top: -25px;
		margin-left: 80px;
}
}

@media screen and (max-width: 768px) {
	.characterList__item:nth-child(1),
	.characterList__item:nth-child(2) {
  flex: 1 1 auto; 
}
}

@media screen and (max-width: 768px) {
.characterList__item:nth-child(3),
.characterList__item:nth-child(4) {
  display: flex;
  flex-direction: column; 
  width: 100%;
}
}


.characterList__imgBox {
	position: relative;
	display: inline-block;
}

.characterList__imgBox--img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.4s ease;
}

.characterList__imgBox.jinjin::before {
	position: absolute;
	bottom: 12%;
	left: 2%;
	max-width: clamp(60px, 8vw, 113px);
	width: 100%;
	aspect-ratio: 113 / 117;
	background: url(/products/special/stewmix/happy_eiyo/images/img_character-star01.png)no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.characterList__imgBox.jinjin::before {
		max-width: 29px;
		left: -5%;
	}
}

.characterList__imgBox.horen::before {
	position: absolute;
	bottom: 23%;
	right: -12%;
	max-width: clamp(60px, 8vw, 115px);
	width: 100%;
	aspect-ratio: 115 / 116;
	background: url(/products/special/stewmix/happy_eiyo/images/img_character-star02.png)no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.characterList__imgBox.horen::before {
		display: none;
	}
}

.characterList__imgBox::after {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background-image 0.7s ease;
	content: "";
}


.sprite-wrapper {
    display: inline-block;
    margin: 10px;
    overflow: hidden;
    border-radius: 4px;
    position: absolute; /* ホバー領域の配置用 */
	bottom: 48%;
	left: 50%;
	transform: translateX(-57%);
	width: 24vw;
    height: calc(24vw * 1.57); 
	max-width: 345px;
    max-height: 543px;
    transition: border-color 0.3s ease;
}

@media screen and (max-width: 768px) {
	.sprite-wrapper {
		top: clamp(-360px, calc(-320px - (100vw - 375px) * 0.1), -150px);
		width: clamp(200px, 30vw, 280px);
		height: calc(clamp(200px, 30vw, 280px) * 1.57);
		max-width: clamp(180px, 40vw, 380px);
	}
}

.characterList__imgBox.oni .sprite-wrapper {
	bottom: 46%;
}

@media screen and (max-width: 768px) {
	.characterList__imgBox.oni .sprite-wrapper {
		top: clamp(-39%, -27vw, -45%);
	}
}

.characterList__imgBox.jinjin .sprite-wrapper {
	bottom: 45%;
	transform: translateX(-69%);
}

@media screen and (max-width: 768px) {
	.characterList__imgBox.jinjin .sprite-wrapper {
		top: clamp(-120%, -51vw, -15%);
		transform: translateX(19%);
	}
}

.characterList__imgBox.horen .sprite-wrapper {
	bottom: 43%;
	transform: translateX(-38%);
}

@media screen and (max-width: 768px) {
	.characterList__imgBox.horen .sprite-wrapper {
		top: clamp(-134.1%, -47vw, -15%);
		transform: translateX(-136.1%);
	}
}


.sprite-animation {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;    
	background-size: 6698px 307px;
    background-position: 0px 0px;
    display: block;
    transition: none; 
}

.sprite-animation[data-sprite="burokkori"] {
    background-image: url(/products/special/stewmix/happy_eiyo/images/burokkori_sprite.png);
}

.sprite-animation[data-sprite="tamagegi"] {
    background-image: url(/products/special/stewmix/happy_eiyo/images/tamagegi_sprite.png);
}

.sprite-animation[data-sprite="ninjin"] {
    background-image: url(/products/special/stewmix/happy_eiyo/images/ninjin_sprite.png);
}

.sprite-animation[data-sprite="hourensou"] {
    background-image: url(/products/special/stewmix/happy_eiyo/images/hourensou_sprite.png);
}


.recipeArea {
	position: relative;
	padding-top: 5vw;
}

/* .recipeArea::before {
	position: absolute;
    top: -14vw;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 19.7847969455vw;
    background-image: url(/products/special/stewmix/happy_eiyo/images/bg_character-bottom.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    content: "";
} */

.recipe__inner {
	margin: 0 auto;
	padding: 0 clamp(30px, 10vw, 150px);
}

@media screen and (max-width: 768px) {
	.recipe__inner {
		position: relative;
		padding: 0 20px;
		max-width: 375px;
	}
}

@media screen and (max-width: 768px) {
	.recipe__inner::before {
		position: absolute;
		bottom: 4%;
		left: -13%;
		max-width: 134px;
		width: 100%;
		aspect-ratio: 268 / 388;
		background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-block03.png) no-repeat center / contain;
		content: "";
	}
}

.recipe__title {
	position: relative;
	display: block;
	margin: clamp(60px, 9vw, 130px) auto 0;
	transform: translateX(170px);
	max-width: clamp(300px, 48vw, 690px);
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.recipe__title {
		margin: 75px auto 0;
		transform: translateX(27px);
		max-width: clamp(150px, 72vw, 270px);
	}
}

.recipe__title::before {
	position: absolute;
	bottom: clamp(5%, 14vw, 14%);
	left: clamp(-35vw, -29.5vw, -28vw);
	max-width: clamp(200px, 25vw, 356px);
	width: 100%;
	aspect-ratio: 356 / 286;
	background: url(/products/special/stewmix/happy_eiyo/images/img_recipe_oni.png)no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.recipe__title::before {
		bottom: clamp(-25%, -1vw, 4%);
		left: clamp(-35vw, -21.5vw, -20vw);
		max-width: clamp(80px, 31vw, 116px);
	}
}

.recipe__title::after {
	position: absolute;
	bottom: clamp(5%, 14vw, 14%);
	right: clamp(-250px, -15vw, -206px);
	max-width: clamp(100px, 25vw, 191px);
	width: 100%;
	aspect-ratio: 191 / 235;
	background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-block01.png)no-repeat center / contain;
	content: "";
}

.recipe__textBox {
	position: relative;
	margin: clamp(-103px, -7vw, -30px) auto 0;
	max-width: clamp(200px, 50vw, 712px);
	transform: translateX(-5px);
}

@media screen and (max-width: 768px) {
	.recipe__textBox {
		margin-top: -25px;
		max-width: clamp(200px, 59vw, 221px);
	}
}

@media screen and (max-width: 768px) {
	.recipe__textBox::before {
		position: absolute;
		right: -82px;
		bottom: -25px;
		max-width: 50px;
		width: 100%;
		aspect-ratio: 101 / 116;
		background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-block05.png)no-repeat center / contain;
		content: "";
	}
}

.recipeArea .recipeList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	max-width: clamp(500px, 80vw, 1141px);
	margin: clamp(30px, 5vw, 82px) auto 0;
}

@media screen and (max-width: 768px) {
	.recipeArea .recipeList {
		gap: 29px 20px;
		margin-top: 35px;
	}
}

.recipeList__item {
	position: relative;
	width: 100%;
}

.recipeList__item:first-child::before {
	position: absolute;
	bottom: 0;
	left: clamp(-159px, -11vw, -50px);
	z-index: 1;
	max-width: clamp(150px, 20vw, 259px);
	width: 100%;
	aspect-ratio: 259 / 483;
	background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-horen.png) no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.recipeList__item:first-child::before {
		top: -41px;
		left: clamp(-159px, -6vw, -42px);
		bottom: auto;
		max-width: clamp(50px, 24vw, 89px);
	}
}

.recipeList__item:first-child::after {
	position: absolute;
	bottom: clamp(-350px, -20vw, -295px);
	left: clamp(-217px, -15vw, -50px);
	z-index: -1;
	max-width: clamp(300px, 30vw, 417px);
	width: 100%;
	aspect-ratio: 259 / 483;
	background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-block02.png) no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.recipeList__item:first-child::after {
		bottom: clamp(-150px, 10vw, 39px);
		left: clamp(-159px, -6vw, 41px);
		max-width: 134px;
	}
}

.recipeList__item:nth-of-type(2)::before {
	position: absolute;
	bottom: clamp(-40px, 7.14vw, -43px);
    left: clamp(-303px, -30.35vw, -60px);
	z-index: -1;
	max-width: 500px;
	width: 100%;
	aspect-ratio: 398 / 577;
	background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-block03.png) no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.recipeList__item:nth-of-type(2)::before {	
		bottom: clamp(20px, 63.14vw, 160px);
		background: url(/products/special/stewmix/happy_eiyo/images/img_tvCm-block.png) no-repeat center / contain;
		max-width: 200px;
	}
}

@media screen and (max-width: 768px) {
	.recipeList__item:nth-of-type(2)::after {
		position: absolute;
		top: -16%;
		right: -6%;
		max-width: 103px;
		width: 100%;
		aspect-ratio: 206 / 331;
		background: url(/products/special/stewmix/happy_eiyo/images/sp/img_recipe-kori-sp.png) no-repeat center / contain;
		content: "";
	}
}

.recipeList__item:nth-of-type(3)::before {
	position: absolute;
	top: clamp(-210px, -14.5vw, -108px);
	right: clamp(-149px, -10.35vw, -40px);
	z-index: -1;
	max-width: clamp(100px, 12.36vw, 178px);
	width: 100%;
	aspect-ratio: 178 / 647;
	background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-kori.png) no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.recipeList__item:nth-of-type(3)::before {
		top: -19%;
		right: 4%;
		z-index: 1;
		max-width: 52px;
		background: url(/products/special/stewmix/happy_eiyo/images/sp/img_recipe-fork.png) no-repeat center / contain;
	}
}

.recipeList__item:nth-of-type(3)::after {
	position: absolute;
	bottom: clamp(-460px, -31.9vw, -120px);
	right: clamp(-207px, -15.4vw, -60px);
	z-index: -1;
	max-width: clamp(180px, 27.2vw, 392px);
	width: 100%;
	aspect-ratio: 178 / 647;
	background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-block04.png) no-repeat center / contain;
	content: "";
}

@media screen and (max-width: 768px) {
	.recipeList__item:nth-of-type(3)::after {
		bottom: 12%;
	}
}

.recipeList__item.half {
	width: calc((100% - 20px) / 2);
}

@media screen and (max-width: 768px) {
	.recipeList__item.half {
		width: 100%;
	}
}

.recipeList__box {
	position: relative;
	width: 100%;
}


.recipeList__item.half .recipeList__box {
	display: flex;
	flex-direction: column;
	height: auto;
}

@media screen and (max-width: 768px) {
	.recipeList__item.half .recipeList__box:first-child::before  {
		position: absolute;
		top: 75%;
		right: -31%;
		z-index: -1;
		max-width: 115px;
		width: 100%;
		aspect-ratio: 230 / 268;
		background: url(/products/special/stewmix/happy_eiyo/images/img_recipe-block02.png) no-repeat center / contain;
		content: "";
	}
}

@media screen and (max-width: 768px) {
	.recipeList__item:nth-of-type(2) .recipeList__box::after {
		position: absolute;
		top: -11%;
		left: 50%;
		transform: translateX(-130%);
		max-width: 145px;
		width: 100%;
		aspect-ratio: 292 / 197;
		background: url(/products/special/stewmix/happy_eiyo/images/sp/img_recipe-spoon.png) no-repeat center / contain;
		content: "";
	}
}

.recipeArea .recipeList__img--frame {
	position: relative;
	z-index: 0;
	display: block;
	max-width: clamp(600px, 80vw, 1141px);
	width: 100%;
	height: auto;
  }

  .recipeList__imgBox,
  .recipeList__textBox {
	position: absolute;
	top: 0;
	bottom: 0;
  }

  .recipeList__imgBox {
	top: 17%;
	left: 4.2%;
	display: flex;
	align-items: center;
  }

@media screen and (max-width: 768px) {
	.recipeList__imgBox {
		top: -34%;
		left: 50%;
		transform: translateX(-50%);
	}
}

  .recipeList__item.half .recipeList__imgBox {
	top: -35%;
	left: 9%;
	max-width: clamp(260px, 32vw, 469px);
	height: auto;
  }

@media screen and (max-width: 768px) {
	.recipeList__item.half .recipeList__imgBox {
		left: 50%;
	}
}
  
  .recipeArea .recipeList__img--meal {
	position: relative;
	z-index: 1;
	max-width: clamp(300px, 45vw, 645px);
	height: auto;
  }

  @media screen and (max-width: 768px) {
	.recipeArea .recipeList__img--meal {
		max-width: 250px;
		width: clamp(250px, 66vw, 500px);
	}
}
  
  .recipeList__textBox {
	top: 21%;
	right: 4.5%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 45px 0;
  }

@media screen and (max-width: 768px) {
	.recipeList__textBox {
		top: 47.5%;
		left: 50%;
		right: 0;
		transform: translateX(-50%);
		gap: 25px 0;
		width: 100%;
	}
}
  
  .recipeList__item.half .recipeList__textBox {
	top: clamp(16%, 39vw, 44%);
	right: clamp(5%, 10vw, 13%);
	gap: clamp(15px, 3vw, 33px) 0;
  }


@media screen and (max-width: 768px) {
	.recipeList__item.half .recipeList__textBox {
		top: 47.5%;
		right: 0;
		margin-top: -25px;
	}
}

@media screen and (max-width: 768px) {
	.recipeList__item.half .recipeList__textBox.third {
		top: 50.5%;
		right: 0;
		gap: 24px;
		margin-top: -25px;
	}
}

  .recipeArea .recipeList__textBox--text {
	max-width: clamp(200px, 25vw, 374px);
	width: 100%;
	height: auto;
  }

@media screen and (max-width: 768px) {
	.recipeArea .recipeList__textBox--text {
		max-width: clamp(150px, 68.5vw, 257px);
	}
}

  .recipeList__item.half .recipeList__textBox--text {
	max-width: clamp(200px, 28vw, 392px);
  }

@media screen and (max-width: 768px) {
	.recipeList__item.half .recipeList__textBox--text {
		max-width: clamp(150px, 72.5vw, 270px);
	}
}

@media screen and (max-width: 768px) {
	.recipeList__item.half .recipeList__textBox.third .recipeList__textBox--text {
		max-width: clamp(150px, 72.5vw, 260px);
	}
}

  .recipeArea .recipeList__textBox--chart {
	max-width: clamp(180px, 25vw, 340px);
	width: 100%;
	height: auto;
  }

@media screen and (max-width: 768px) {
	.recipeArea .recipeList__textBox--chart {
		max-width: clamp(150px, 50vw, 185px);
	}
}

  .recipeList__item.half .recipeList__textBox--chart {
	max-width: clamp(200px, 30vw, 409px);
  }

@media screen and (max-width: 768px) {
	.recipeList__item.half .recipeList__textBox--chart {
		max-width: clamp(150px, 60vw, 223px);
	}
}

@media screen and (max-width: 768px) {
	.recipeList__item.half .recipeList__textBox.third .recipeList__textBox--chart {
		max-width: clamp(150px, 60vw, 175px);
	}
}
  .recipe_noteBox {
	margin: 21px auto 0;
	max-width: 1121px;
  }

@media screen and (max-width: 768px) {
	.recipe_noteBox {
		max-width: clamp(150px, 90vw, 334px);
	}
}

  .bottomArea {
	margin-bottom: -40px;
  }

  .mainContentsIn .breadcrumbs .text-white {
	color: #fff;
  }

  .text-white {
	color: #fff
  }