@charset "UTF-8";

/* ===============================
	変数定義
=============================== */
:root {
	--base-color: #FFF8DC;
	--brown-color: rgba(242, 135, 5, .3);
	--border-color: #F28705;
	--margin-large: 6rem;
	--margin-medium: 4rem;
	--margin-small: 2rem;

	/* フォント */
	--zen-maru: "Zen Maru Gothic", sans-serif;

	/* 色 */
	--box-color-orange: rgba(242, 135, 5, 0.30);
}

/* ===============================
	共通スタイル
=============================== */
article {
	background-color: var(--base-color);
}

.chevron-down {
	inline-size: 1em;
	block-size: 1em;
}

.intro-recipe-link:focus {
	outline: auto;
	outline-color: rgba(var(--bs-link-color-rgb)); 
}

/* マージン */
.mts {
	margin-top: var(--margin-small);
}

.mtm {
	margin-top: var(--margin-medium)
}

.mtl {
	margin-top: var(--margin-large);
}

.mt1em {
	margin-top: 1em;
}

/* フレックスコンテナ */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-item {
	inline-size: 100%;
}

/* 汎用パーツ */
.chevron-right {
	inline-size: .6em;
	block-size: 1em;
}

.marker {
	background: linear-gradient(transparent 60%, var(--brown-color) 50%);
}

.box-shadow {
	box-shadow: 10px 10px 0px 0px var(--brown-color);
}

.fw-b {
	font-weight: bold;
}

.campaign-title {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	inline-size: max(17%, 21rem);
	max-inline-size: 28rem;
}

.sub-title-block {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 4rem;
}

.sub-title-block img {
	inline-size: 3rem;
}

.sub-title-block span {
	font-size: 2.4rem;
	font-weight: bold;
}

.sns-icon {
	inline-size: 6rem;
}

/* ボタン関連 */

.common-btn a {
	display: grid;
	grid-template-columns: 1fr auto;
	place-content: center;
	align-items: center;
	grid-column-gap: .8em;
	inline-size: 100%;
	block-size: fit-content;
	font-weight: bold;
	border-radius: 40px;
	box-shadow: 5px 5px 0px 0px var(--brown-color);
	border: 2px solid var(--border-color);
	transition: .3s;
}

.column-btn {
	display: inline-block;
	inline-size: fit-content;
	margin-top: 3rem;
}

.column-btn a {
	padding-block: 1rem;
	padding-inline: 3rem;
	font-size: 1.6rem;
	color: #222;
	background-color: #fff;
}


.product-btn {
	display: inline-block;
	inline-size: fit-content;
	margin-top: 3rem;
}

.product-btn a {
	padding-block: 1rem;
	padding-inline: 2.5rem;
	font-size: 1.6rem;
	color: #222;
	background-color: #fff;
}



/* メインビジュアル */
.main-visual {
	background-color: #fff;
	background-image: url(images/bg.png);
	background-size: 20px;
}

.main-visual-container {
	padding-block: 2rem;
	display: flex;
	justify-content: center;
}

.main-visual-right,
.main-visual-left {
	inline-size: 50%;
}

.mv-swiper-style {
	/* padding-inline: 2rem; */
}

.mv-swiper-style .swiper-slide {
	/* width: 100%; */
}

/* メインビジュアルのスライド */

.mv-pagination-wrap {
	display: grid;
	justify-items: center;
	grid-template-columns: 1fr 25px;
	column-gap: 10px;
	block-size: 35px;
	padding-inline: 25px;
	border-radius: var(--border-radius-large);
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: inherit;
}

.main-visual .mv-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-visual .mv-pagination .mv-bullet {
	inline-size: 30px;
	block-size: 30px;
	position: relative;
}

.main-visual .mv-pagination .mv-bullet::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	content: '';
	display: block;
	inline-size: 15px;
	block-size: 15px;
	background: #F28705;
	border-radius: 50%;
}

.main-visual .mv-pagination .mv-bullet-active::before {
	background-color: #DA5323;
}

.btn-swiper-control img:not(.is-active) {
	display: none;
}

.btn-swiper-control img.is-active {
	display: block;
	inline-size: 23px;
}

.btn-swiper-control img.icon-swiper-pause {
	inline-size: 23px;
}

/* インフォ */

.info {
	padding-block: 7rem 10rem;
}

.info-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3%;
}

.info-text-area {
	inline-size: 47%;
}

.info-text {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 2;
}

.info-img-area {
	inline-size: 47%;
	display: flex;
	align-items: flex-end;
	gap: 1rem;
}

.info-shiori {
	max-inline-size: 29rem;
}

.shiori-text {
	font-weight: 500;
	font-size: 1.2rem;
}

.shiori-text em {
	font-size: 1.4rem;
	font-weight: bold;
}

.ai-btn {
	display: inline-block;
	inline-size: fit-content;
	margin-top: 1rem;
}

.ai-btn button {
	display: grid;
	grid-template-columns: 1fr auto;
	place-content: center;
	align-items: center;
	grid-column-gap: .8em;
	inline-size: 100%;
	block-size: fit-content;
	padding-block: 1rem;
	padding-inline: 3rem;
	font-size: 1.6rem;
	font-weight: bold;
	color: #222;
	text-align: center;
	border-radius: 40px;
	background-color: #fff;
	box-shadow: 5px 5px 0px 0px var(--brown-color);
	border: 2px solid var(--border-color);
	transition: .3s;
}


/* イントロ：レシピ */
.intro-recipe-title {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 5rem;
}

.intro-recipe-title img {
	display: block;
	inline-size: 3.5rem;
}

.intro-recipe-title h3 {
	font-size: 3.2rem;
	font-weight: bold;
	color: #DA5323;
}

.intro-recipe-list {
	margin-top: 4rem;
	/* margin-bottom: 10rem; */
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2.5rem;
}

.intro-recipe-items {
	inline-size: 22rem;
}

.intro-recipe-items span {
	display: block;
}

.intro-recipe-img img {
	border-radius: 25px;
	transition: .3s;
}

.intro-recipe-text {
	padding-block: 2rem;
	text-align: center;
	font-weight: bold;
}

.intro-recipe-btn {
	inline-size: 100%;
	display: flex;
	justify-content: center;
	font-size: 1.8rem;
}

.intro-recipe-btn a {
	display: grid;
	grid-template-columns: 1fr auto;
	place-content: center;
	align-items: center;
	grid-column-gap: .8em;
	inline-size: fit-content;
	block-size: fit-content;
	padding-block: 1rem;
	padding-inline: 3rem;
	font-weight: 500;
	color: #fff;
	border-radius: 40px;
	background-color: #DA5323;
	border: 2px solid #DA5323;
	transition: background-color .3s;
}

/* 本編：レシピ */

.recipe-contents {
	padding-top: 20rem;
	margin-bottom: 10rem;
}

.recipe-visual-area {
	position: relative;
}

.recipe-catch {
	position: absolute;
	transform: translate(0%, -50%);
	display: inline-block;
	/* inline-size: 57rem; */
	inline-size: 570px;
	background-color: #fff;
	text-align: center;
	font-size: 3.2rem;
	padding-block: .5em;
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.25);
	font-family: var(--zen-maru);
	font-weight: bold;
}

.recipe-visual-img {
	inline-size: 79%;
	margin-inline: auto;
	box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.25);
}

.recipe-info-area {
	margin-top: 3rem;
	font-family: var(--zen-maru);
	text-align: center;
}

.recipe-title {
	font-size: 2.6rem;
	font-weight: bold;
}

.recipe-chef {
	margin-top: 1rem;
	font-size: 1.8rem;
	font-weight: bold;
}

/* レシピのポップアップ */

.recipe-video-popup {
	display: flex;
	inline-size: 100%;
	max-inline-size: 700px;
	min-block-size: 128px;
	margin: 3rem auto 0;
	background-color: #fff;
	transition: opacity .3s ease;
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.25);
}

.recipe-popup-thumb {
	inline-size: 40%;
	max-inline-size: 230px;
	position: relative;
}

.recipe-popup-thumb::before {
	content: '';
	display: block;
	inline-size: 60px;
	block-size: 60px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: url(images/movie-icon.svg) no-repeat center center / contain;
}

.popup-text-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	font-size: 2.6rem;
	font-weight: bold;
	font-family: var(--zen-maru);
}

.recipe-pop01 {
	background: url(images/movie_thumb01.jpg) no-repeat center center / cover;
}

.recipe-pop02 {
	background: url(images/movie_thumb02.jpg) no-repeat center center / cover;
}

.recipe-pop03 {
	background: url(images/movie_thumb03.jpg) no-repeat center center / cover;
}

.recipe-pop04 {
	background: url(images/movie_thumb04.jpg) no-repeat center center / cover;
}

.recipe-pop05 {
	background: url(images/movie_thumb05.jpg) no-repeat center center / cover;
}

/* シェフのインタビュー */
.chef-interview {
	margin-top: 6rem;
}

.interview-contents {
	display: flex;
	justify-content: space-between;
	padding: 3rem 6rem;
	border-bottom: 3px solid #F28705;
}

.chef-interview-title {
	padding-block: 2.5rem;
	font-size: 2rem;
	font-family: var(--zen-maru);
	font-weight: bold;
	text-align: center;
	border-top: 3px solid #F28705;
	border-bottom: 3px solid #F28705;
}

.chef-point,
.chef-healsio {
	inline-size: 47%;
}

.chef-point-title,
.chef-healsio-title {
	padding-left: 1rem;
	font-size: 1.8rem;
	font-weight: bold;
	border-left: 10px solid #F28705;
}

.chef-point-text,
.chef-healsio-text {
	margin-top: 3rem;
	font-weight: 400;
	line-height: 1.6;
}

/* 詳しいレシピはこちら */

.recipe-detail-area {
	position: relative;
	padding-top: 10rem;
}

.recipe-detail-btn {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	inline-size: fit-content;
	padding: .8em 8rem .8em 3rem;
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
	background-color: #DA5323;
	border: 2px solid #DA5323;
	border-radius: 40px;
	transition: background-color .3s;
	box-shadow: 5px 5px 0px 0px var(--brown-color);
}

.recipe-detail-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	display: block;
	inline-size: 2.5rem;
	block-size: .4rem;
	background-color: #fff;
	transition: .3s;
}

.recipe-detail-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	display: block;
	inline-size: 2.5rem;
	block-size: .4rem;
	background-color: #fff;
	transform: rotate(-90deg);
	transition: .3s;
}


.recipe-detail-btn.active::after {
	transform: rotate(0deg);
}

.recipe-detail-contents {
	display: none;
	padding: 10rem 6rem 4rem;
	background-color: #fff;
	box-shadow: 10px 10px 0px 0px var(--box-color-orange);
}

.recipe-detail-img-container {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 2rem;
}

.recipe-detail-img-text {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 2rem;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 1em;
}

.recipe-detail-img-text img {
	inline-size: 2rem;
}

.recipe-detail-img {
	inline-size: 34%;
}

.detail-arrow {
	inline-size: 4rem;
}

/* 詳しいレシピ：作り方 */


.recipe-detail-info {
	margin-top: 8rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 0rem 7rem;
}

.recipe-detail-material {
	grid-column: 2;
	grid-row: 1 / -1;
}

.how-to-make,
.material {
	padding-left: 1rem;
	font-size: 2rem;
	font-weight: bold;
	border-left: 10px solid #F28705;
	margin-bottom: 3rem;
}

.material {
	inline-size: 90%;
	display: flex;
	justify-content: space-between;
}

.how-to-text {
	font-weight: 400;
	line-height: 1.6;
}

.how-to-number {
	font-weight: bold;
	color: #DA5323;
}

.how-to-caption {
	font-size: 1.2rem;
	grid-column: 2;
}

.how-to-caption>span {
	margin-right: .5em;
	color: var(--cyan);
}

.how-to-text li {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	grid-template-rows: auto auto;
}

.how-to-text li:not(:first-of-type) {
	margin-top: 1em;
}

.material-list {
	inline-size: 90%;
	display: grid;
	grid-template-columns: 65% 1fr;
	align-items: center;
	padding-bottom: 1rem;
	border-bottom: 1px dashed #222;
	font-weight: 400;
}

.material-list-title {
	grid-column: 1/-1;
	font-weight: bold;
	color: #DA5323;
}

.material-list:nth-of-type(n+2) {
	margin-top: 1rem;
}

.material-list span:last-of-type {
	text-align: center;
}

.material-list-caption {
	font-size: 1.2rem;
}

/* 詳しいレシピ：閉じるボタン */

.recipe-close-btn {
	inline-size: fit-content;
	display: flex;
	align-items: center;
	column-gap: 1rem;
	margin-top: 5rem;
	margin-left: auto;
	padding: 1rem 2rem;
	border: 3px solid #F28705;
	border-radius: 40px;
	font-weight: bold;
	transition: .3s;
}

.close-icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

/* 詳しいレシピ：アドバイス */

.recipe-advice-container {
	display: flex;
	align-items: center;
	flex-direction: column;
	row-gap: 1rem;
	margin-top: 3rem;
}


.shiori-advice-wrap {
	position: relative;
	grid-column: 1;
	grid-row: 2;
	padding: 2rem 5%;
	border: 3px solid #F28705;
	border-radius: 25px;
}

.shiori-advice-wrap::before {
	position: absolute;
	bottom: 5px;
	right: 29%;
	transform: translate(105%, 50%);
	z-index: 2;
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	border-width: 35px 0px 35px 45px;
	clip-path: polygon(0 50%, 0 100%, 100% 50%);
}

.shiori-advice-wrap::after {
	position: absolute;
	bottom: 0;
	right: 29%;
	transform: translate(100%, 50%);
	z-index: 1;
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent #F28705;
	border-width: 35px 0px 35px 45px;
	clip-path: polygon(0 50%, 0 100%, 100% 50%);
}


.shiori-advice {
	display: block;
	text-align: center;
	color: #DA5323;
	font-weight: bold;
	line-height: 1.8;
}

.shiori-advice-text {
	margin-top: 1rem;
	font-weight: 400;
	line-height: 1.6;
}

.advice-img {
	display: block;
	margin: 1rem auto 0;
	inline-size: 70%;
}

.advice-shiori-img {
	/* inline-size: 16%; */
	inline-size: 40%;
}



/* コラム */

.column {
	margin-block: 12rem 10rem;
}

.column-container {
	display: flex;
	justify-content: space-between;
	column-gap: 5rem;
	/* inline-size: max(72%, 71rem); */
	inline-size: 75%;
	padding: 3rem 3%;
	margin-inline: auto;
	background-color: #fff;
	border-radius: 20px;
}

.column-img {
	position: relative;
	inline-size: 28rem;
}

.column-text-area {
	inline-size: 63%;
}

.column-title {
	font-size: 2rem;
	font-weight: bold;
}

.column-text {
	margin-top: 2rem;
}

.copy-img {
	position: absolute;
	bottom: -1rem;
	right: -2rem;
	inline-size: 12rem;
}


/* まかせて調理　ヒストリー */
.history {
	position: relative;
	padding-top: 10rem;
	padding-bottom: 10rem;
	background-color: #fff;
	background-image: url(images/bg.png);
	background-size: 20px;
}

.history-text {
	margin-top: 6rem;
	font-weight: 400;
	font-size: 2rem;
	text-align: center;
}

/* スワイパー */
.history-swiper-outer {
	position: relative;
	max-inline-size: 120rem;
	padding-inline: 5%;
	margin-top: 5rem;
}

.history-swiper-outer .swiper {
	max-inline-size: 105rem;
}

.history-swiper-outer .swiper-slide {
	inline-size: 32.5%;
	padding: 1rem;
	height: auto;
}

.history-card {
	height: 100%;
	padding: 2rem 1.5rem 4rem;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 5px 5px 0px 0px var(--brown-color);
}

.history-year {
	display: block;
	padding-bottom: 2rem;
	text-align: center;
	font-size: 2.4rem;
	font-weight: bold;
	color: #F28705;
	background-image: repeating-linear-gradient(90deg, #f28705, #f28705 4px, transparent 4px, transparent 12px);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 100% 3px;
}

.history-img h5 {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

.history-img {
	margin-top: 2rem;
}

.history-img img {
	display: block;
	max-inline-size: 20rem;
	margin-inline: auto;
	margin-top: 2rem;
}

.history-img-text {
	font-weight: 400;
	margin-top: 2rem;
}

/* 最後スライド（ヘルシオ2025年） */

.swiper-slide.healsio {
	inline-size: 100%;
}

.healsio-img-container {
	display: flex;
	justify-content: center;
	gap: 4rem;
}

.swiper-slide.healsio .history-img {
	text-align: center;
}

.swiper-slide.healsio .history-card-text {
	text-align: center;
	margin-top: 2rem;
	font-weight: 400;
}

/* スワイパーのボタン */
.slider-next,
.slider-prev {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: block;
	inline-size: 6rem;
	block-size: 6rem;
	background-color: #F28705;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 5px 5px 0px 0px var(--brown-color);
	transition: .3s;
}

.slider-next {
	right: 10px;
}

.slider-prev {
	left: 10px;
}

.slider-next::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 45%;
	transform: translate(-50%, -50%) rotate(-45deg);
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
}

.slider-prev::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 53%;
	transform: translate(-50%, -50%) rotate(45deg);
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-left: 3px solid #fff;
	border-bottom: 3px solid #fff;
}

.slider-next.swiper-button-disabled {
	display: none;
}

.slider-prev.swiper-button-disabled {
	display: none;
}


/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	/* 汎用パーツ */

	.box-shadow {
		box-shadow: 5px 5px 0px 0px var(--brown-color);
	}

	.sub-title-block span {
		font-size: 1.6rem;
	}

	.application {
		inline-size: 100%;
		max-inline-size: 30rem;
	}

	.application a {
		padding-block: 1.5rem;
		padding-inline: 3rem;
		font-size: 2rem;
	}

	/* メインビジュアル */

	.main-visual-container {
		flex-direction: column;
		align-items: center;
		row-gap: 1rem;
	}

	.main-visual-right,
	.main-visual-left {
		inline-size: 100%;
	}

	.mv-pagination-wrap {
		bottom: -.5rem;
	}

	.mv-swiper-style .swiper-wrapper {
		padding-bottom: 2rem;
	}

	/* インフォ */
	.info {
		padding-block: 5rem 4rem;
	}

	.info-container {
		flex-direction: column;
		row-gap: 2rem;
	}

	.info-text-area {
		inline-size: 100%;
	}

	.info-img-area {
		inline-size: 100%;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}


	.info-shiori {
		max-inline-size: 20rem;
	}

	.info-text {
		font-size: 1.6rem;
	}

	/* イントロ */
	.intro-recipe-title h3 {
		font-size: 2rem;
		text-align: center;
	}

	.intro-recipe-items {
		inline-size: 16rem;
	}

	/* イントロ：レシピ */

	.intro-recipe-list {
		margin-top: 3rem;
		/* margin-bottom: 2rem; */
		gap: 3rem 1.5rem;
	}

	.intro-recipe-title {
		column-gap: 3rem;
	}

	.intro-recipe-text {
		padding-block: 1rem;
		font-size: 1.4rem;
	}



	.intro-recipe-btn {
		font-size: 1.4rem;
	}

	.intro-recipe-btn a {
		padding-inline: 2rem;
		padding-block: .5rem;
	}

	/* 本編；レシピ */

	.recipe-contents {
		padding-top: 10rem;
		margin-bottom: 5rem;
	}

	/* .recipe-contents:last-of-type {
	padding-top: 10rem;
} */


	.recipe-info-area {
		margin-top: 2rem;
	}


	.recipe-catch {
		/* inline-size: 25rem; */
		inline-size: 250px;
		font-size: 1.6rem;
		padding-block: .5em;
	}

	.recipe-visual-img {
		inline-size: 90%;
	}

	.recipe-title {
		font-size: 1.6rem;
	}

	.recipe-chef {
		font-size: 1.2rem;
	}


	/* シェフのインタビュー */
	.chef-interview {
		margin-top: 4rem;
	}

	.interview-contents {
		flex-direction: column;
		row-gap: 4rem;
		padding: 2rem 1rem;
	}

	.chef-point,
	.chef-healsio {
		inline-size: 100%;
	}

	.chef-point-text,
	.chef-healsio-text {
		margin-top: 2rem;
	}

	.chef-interview-title {
		padding-block: 2rem;
		font-size: 1.4rem;
	}

	/* レシピのポップアップ */

	.recipe-video-popup {
		min-block-size: 90px;
		margin: 2rem auto 0;
		background-color: #fff;
		transition: opacity .3s ease;
		box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.25);
	}

	.recipe-popup-thumb::before {
		inline-size: 30px;
		block-size: 30px;
	}

	.popup-text-wrap {
		font-size: 1.6rem;
	}

	.recipe-popup-thumb {
	inline-size: 160px;
	max-inline-size: 100%;
}

.popup-label {
	font-size: 1.4rem;
}



	/* 詳しいレシピはこちら */

	.recipe-detail-contents {
		padding: 6rem 5% 4rem;
	}

	.recipe-detail-area {
		padding-top: 7rem;
	}


	.recipe-detail-info {
		margin-top: 5rem;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		row-gap: 4rem;
	}

	.recipe-detail-material {
		grid-column: 1;
		grid-row: 2;
	}


	.recipe-detail-img-container {
		column-gap: 1rem;
	}

	.recipe-detail-img {
		inline-size: 43%;
	}

	.detail-arrow {
		margin-top: 4rem;
		inline-size: 2rem;
	}

	.recipe-detail-img-text {
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 1rem;
		font-size: 1.6rem;
		font-weight: bold;
		margin-bottom: 1em;
	}

	.recipe-detail-btn::before {
		inline-size: 2rem;
	}

	.recipe-detail-btn::after {
		inline-size: 2rem;
	}

	/* 詳しいレシピ：作り方 */

	.recipe-detail-btn {
		inline-size: 90%;
		padding: 1em 8rem 1em 3rem;
		font-size: 1.6rem;
	}

	.how-to-text {
		font-size: 1.4rem;
	}

	.how-to-make,
	.material {
		margin-bottom: 2rem;
		font-size: 1.6rem;
	}

	.recipe-detail-make,
	.recipe-detail-material {
		inline-size: 100%;
	}

	.material-list {
		grid-template-columns: 59% 1fr;
		inline-size: 100%;
		font-size: 1.4rem;
	}

	.material-list span:last-of-type {
		text-align: center;
	}

	.material-list span.material-list-title {
		text-align: center;
	}

	/* 詳しいレシピ：アドバイス */

	.recipe-advice-container {
		flex-direction: column;
		align-items: center;
		row-gap: 2rem;
	}

	.shiori-advice-wrap {
		inline-size: 100%;
		padding: 2rem;
	}

	.shiori-advice-wrap::before {
		position: absolute;
		top: auto;
		bottom: 5px;
		right: 29%;
		transform: translate(105%, 50%);
		z-index: 2;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
		border-width: 35px 0px 35px 45px;
		clip-path: polygon(0 50%, 0 100%, 100% 50%);
	}

	.shiori-advice-wrap::after {
		position: absolute;
		top: auto;
		bottom: 0;
		right: 29%;
		transform: translate(100%, 50%);
		z-index: 1;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent transparent transparent #F28705;
		border-width: 35px 0px 35px 45px;
		clip-path: polygon(0 50%, 0 100%, 100% 50%);
	}

	.shiori-advice-text {
		font-size: 1.4rem;
	}

	.advice-img {
		inline-size: 84%;
	}


	.advice-shiori-img {
		inline-size: 60%;
	}


	/* コラム */

	.column {
		margin-block: 10rem;
	}

	.column-container {
		inline-size: 100%;
		flex-direction: column;
		align-items: center;
		row-gap: 2rem;
		border-radius: 10px;
	}

	.column-img {
		inline-size: 80%;
	}

	.column-text-area {
		inline-size: 100%;
		text-align: center;
	}

	.column-text {
		font-size: 1.4rem;
		text-align: left;
	}


	.recipe-close-btn {
		margin-top: 2rem;
	}

	/* まかせて調理　ヒストリー */

	.history {
		padding-top: 4rem;
	}

	.history .campaign-title {
		inline-size: 15rem;
	}

	.history-text {
		margin-top: 2rem;
		font-size: 2rem;
		text-align: left;
	}

	.history-year {
		font-size: 1.8rem;
	}

	.history-img h5 {
		font-size: 1.4rem;
	}

	/* スワイパー */

	.history-swiper-outer {
		padding-inline: 5%;
		margin-top: 2rem;
	}

	.history-swiper-outer .swiper-slide {
		inline-size: 100%;
	}

	.history-img-text {
		margin-top: 1.4rem;
		font-size: 1.4rem;
	}

	.history-img img {
		max-inline-size: 15rem;
	}

	.slider-next,
	.slider-prev {
		width: 4rem;
		height: 4rem;
	}

	.slider-next::after {
		inline-size: 1rem;
		block-size: 1rem;
	}

	.slider-prev::after {
		inline-size: 1rem;
		block-size: 1rem;
	}

	/* 最後スライド（ヘルシオ2025年） */

	.swiper-slide.healsio {
		inline-size: 70rem;
	}

	.swiper-slide.healsio .history-card-text {
		font-size: 1.4rem;
	}

	.product-btn {
		margin-top: 2rem;
	}

	.product-btn a {
		padding-block: .5rem;
		font-size: 1.4rem;
	}

}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {
	:root {
		--margin-large: 8rem;
		--margin-medium: 6rem;
		--margin-small: 4rem;
	}
}

/* ====================================
	タブレット専用スタイル（768px～1079px）
===================================== */
@media screen and (768px <=width < 1080px) {

	/* インフォ */
	.info-container {
		flex-direction: column;
	}

	.info-text-area {
		inline-size: 85%;
	}

	.info-img-area {
		margin-top: 2rem;
		inline-size: 100%;
		justify-content: center;
	}

	.mv-pagination-wrap {
		bottom: 0;
	}

	/* コラム */
	.copy-img {
		bottom: 5rem;
		right: -2rem;
		inline-size: 10rem;
	}

	/* まかせて調理　ヒストリー */

	.history-swiper-outer .swiper {
		max-inline-size: 90rem;
		padding-inline: 2%;
	}

	.swiper-slide {
		inline-size: 50%;
	}

	/* 詳しいレシピはこちら */
	.how-to-make,
	.material {
		font-size: 1.6rem;
	}

}

/* ====================================
	PC専用スタイル（1080px～）
===================================== */
@media print,
screen and (1080px <=width) {}



/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {
	a:hover {
		text-decoration: none;
	}

	.recipe-video-popup:hover {
		opacity: .6;
	}

	.recipe-close-btn:hover svg {
		fill: #fff;
	}


	.ai-btn button:hover,
	.product-btn a:hover,
	.column-btn a:hover,
	.about-shiori-btn a:hover,
	.recipe-close-btn:hover {
		background-color: #DA5323;
		color: #fff;
	}

	.slider-next:hover,
	.slider-prev:hover {
		background-color: #DA5323;
	}

	.application a:hover,
	.intro-recipe-btn a:hover,
	.recipe-detail-btn:hover {
		background-color: #fff;
		color: #222;
	}

	.intro-recipe-link:hover .intro-recipe-btn span {
		background-color: #fff;
		color: #222;
	}


	.recipe-detail-btn:hover::before,
	.recipe-detail-btn:hover::after {
		background-color: #222;
	}

}