@charset "utf-8";

/* ====================================================================

	Style - 秋シーズン

	秋のインデックス（/recipe/autumn/）と
	秋のレシピ解説ページ（/recipe/autumn01〜04/）が読み込む。
	common.css / home.css / recipe.css より後に読み込むこと。

	色は common.css のパレット（claude/colors.png 由来）を参照する。
	このファイルで HEX 値を直接書かないこと。

==================================================================== */


/** 季節色のマッピング
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
:root,
body.autumn {
	--season:        var(--autumn-accent);/* タグ・下地 */
	--season-text:   var(--autumn-text);/* 小見出しの文字・再生ボタン */
	--season-strong: var(--autumn-strong);/* ボタンの下地 */
	--season-light:  var(--autumn-strong-hover);
	--season-pale:   var(--autumn-pale);
	--season-line:   var(--autumn-line);
	--season-gray:   var(--divider);

	--recipe-bg: var(--autumn-bg);

	--recipe-card-number-color:               var(--autumn-number);
	--recipe-card-headline-effect-main-color: var(--autumn-marker);
	--recipe-card-headline-effect-sub-color:  var(--autumn-marker-sub);
	--recipe-card-nav-detail-bg:              var(--autumn-strong);
	--recipe-card-nav-detail-hover-bg:        var(--autumn-strong-hover);
}


/** 背景
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
section.recipe {
	--bg: var(--autumn-bg);
	background-image:
	url('../imgs/autumn/background.webp'),
	url('../imgs/autumn/background-flow.webp'),
	url('../imgs/autumn/background-bubble.webp');
}
@media screen and (max-width: 767px) {
	section.recipe {
		background-image:
		url('../imgs/autumn/background@sp.webp'),
		url('../imgs/autumn/background-flow@sp.webp'),
		url('../imgs/autumn/background-bubble@sp.webp');
	}
}


/** オススメのオイル
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
section.recommend {
	background-color: var(--autumn-accent);
}
section.recommend::before {
	background: radial-gradient(
		ellipse 100% 30vw at 50% calc(0% + 30vw),
		var(--autumn-accent) 0%,
		var(--autumn-accent) 99.5%,
		transparent 100%
	);
}
section.recommend::after {
	background: radial-gradient(
		ellipse 135% 40vw at 50% calc(0% + 40vw),
		transparent 0%,
		transparent 60%,
		var(--autumn-number) 99.5%,
		transparent 100%
	);
	opacity: 1;
}
@media screen and (max-width: 767px) {
	section.arc-convex::before {
		height: calc(60 * var(--px));
	}
	section.recommend::after {
		display: none;
	}
}

.recommend-card h3 {
	color: var(--autumn-text);
}