@charset "utf-8";

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

	Style - サイトトップ（四季統合）

	サイトトップ（/index.html）が読み込む。
	destyle.min.css / common.css / home.css より後に読み込むこと。

	トップは特定の季節に属さないため spring.css / summer.css は読み込まず、
	季節ごとのカスタムプロパティを .season-block にスコープして持たせる。

	home.css からの流用：
		.tagline / .billboard          … ヒーロー
		.recipe-card                   … カードの下地（白・角丸・影）
		.recipe-card .number           … 番号（Roboto 900・::first-letter・上の帯）
		.recipe-card .headline span    … レシピ名のマーカー効果（2色オフセット）
		.recipe-card .image img        … 写真の aspect-ratio / object-fit
	いずれもクラスをそのまま使い、このファイルでは寸法と配置だけを上書きする。

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


/* ====================================================================
	ヒーロー
==================================================================== */
.page-top section.hero {
	height: calc(620 * var(--px));
	background: linear-gradient(to right, var(--spring), var(--spring) 25%, var(--summer) 25%, var(--summer) 50%, var(--autumn) 50%, var(--autumn) 75%, var(--winter) 75%, var(--winter) 100%);
}
@media screen and (max-width: 767px) {
	.page-top section.hero {
		height: calc(320 * var(--px));
	}
}


/* ====================================================================
	季節ナビゲーション
	ヒーロー直下に置く四季への内部リンク。
	.arc-concave はここが受け持つ（春セクションからは外している）
==================================================================== */
#navigation {
	/* 指定色のクリーム */
	--bg: var(--cream);
	padding-block: var(--m4);
	/* .season-block の下端ビネット（inset 0 -var(--m6) 60px）はここでは使わない。
	   あれは高さ700〜900pxのセクション用で、150px程度のこのナビに掛けると
	   影が高さの75%を覆って --cream がくすんで見える。
	   春セクションとは下地色が違うので、境目は色の切り替わりとして成立する */
}
/** ヒーローから移設した見出し画像＋リード文 */
#navigation .section-header {
	margin-bottom: var(--m3);
}
#navigation .section-header .headline {
	width: calc(630 * var(--px));
}
@media screen and (max-width: 767px) {
	#navigation .section-header {
		margin-bottom: var(--m3);
	}
	#navigation .section-header .headline {
		width: 100%;
	}
}

.season-nav {
	display: flex;
	flex-wrap: wrap;/* PC下限（768px前後）では4つ並びきらないため行で折り返す */
	justify-content: center;
	align-items: center;
	gap: var(--m);
}
.season-nav .season-heading {
	font-size: calc(var(--medium-size) * 1.142);
	font-size: 400;
	padding-right: var(--m3);
}
/** common.css の .button をそのまま使い、季節ごとの色だけ差し替える */
.season-nav .button {
	flex: 0 0 auto;
	width: fit-content;
}
/** 末尾のアローは共通の .icon-arrow を90度回して下向きにする
	（ページ内の下方向へ移動するリンクのため） */
.season-nav .icon-arrow {
	rotate: 90deg;
}

/** 季節ごとの色（common.css のパレットを参照） */
.season-nav .button {
	--button-color: var(--white);
	--button-hover-color: var(--white);
}
.season-nav .spring.button { --button-bg: var(--spring-strong); --button-hover-bg: var(--spring-strong-hover); }
.season-nav .summer.button { --button-bg: var(--summer-strong); --button-hover-bg: var(--summer-strong-hover); }
.season-nav .autumn.button { --button-bg: var(--autumn-strong); --button-hover-bg: var(--autumn-strong-hover); }
.season-nav .winter.button { --button-bg: var(--winter-strong); --button-hover-bg: var(--winter-strong-hover); }

/* 見出しとボタン4つが1行に収まらない幅では、見出しを上の行に分け、ボタンを横1列に並べる */
@media screen and (max-width: 1100px) {
	.season-nav {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--m2);
		width: 100%;
		justify-items: center;
	}
	/* 見出しは1行を使い切り、ボタンだけを横1列に並べる。
	   これが無いと見出しもグリッドの1セルを占め、
	   ボタンが［見出し］［春］［夏］［秋］／［冬］と崩れる */
	.season-nav .season-heading {
		grid-column: 1 / -1;
		padding-right: 0;/* PCの横並び用の右余白は不要 */
	}
}

@media screen and (max-width: 767px) {
	#navigation {
		padding-block: var(--m6);
	}
	.season-nav .button {
		/* 指で押しやすいよう高さ44px前後を確保する */
		padding-block: calc(0.3lh + 3px) 0.3lh;
		padding-inline: 0.5ic;
		font-size: var(--medium-size);
		width: 100%;
	}
}


/** キャンペーンバナー（季節ナビの下・掲載期間中のみ）
	home.css の .backnumber-card を下地に、前後の余白だけ調整する
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.campaign-banner {
	margin-top: var(--m6);
	border-radius: 0;/* バナーは角丸なし */
}
.campaign-banner[hidden] {
	display: none;/* .backnumber-card の display: block に hidden が負けないように */
}
@media screen and (max-width: 767px) {
	.campaign-banner {
		margin-top: var(--m6);
		margin-inline: 0;
	}
}


/* ====================================================================
	季節セクション
==================================================================== */
.season-block {
	padding-bottom: var(--m6);
	background-repeat: repeat-y;
	background-size: 100%;
	/* overflow-x は指定しない。
	   ここに overflow-x: clip を付けると scroll() が「自分自身を最も近い
	   スクロールコンテナ」とみなしてタイムラインが無効になり、
	   模様背景のスクロール連動が止まる。はみ出しは common.css の
	   body { overflow-x: clip } 側で処理される */

	margin-top: 0;

	transform-origin: top;
	animation: season-background-progress linear;
	animation-timeline: scroll();
}
/* 後ろのセクションほど手前に重ねる（アーチの影を前セクションに落とすため） */
.season-block.spring { z-index: 2; }
.season-block.summer { z-index: 3; }
.season-block.autumn { z-index: 4; }
.season-block.winter { z-index: 5; }

.season-block .wrap {
	z-index: 1;/* 漢字の透かし（z-index:0）より手前 */
}
.season-block .section-header {
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.season-block {
		padding-bottom: var(--m6);
		/* 現行 section.recipe と同様、SPではスクロール連動を止める */
		animation: none;
		animation-timeline: unset;
	}
}


/** 模様背景のスクロール連動
	現行 home.css の background-progress を踏襲しつつ、移動量を % から px に変更している。
	% 指定は「セクション高さ − 画像高さ」に対する割合のため、
	トップのように背景画像より背が低いセクションだと移動量が跳ね上がり、
	現行より大幅に速く見えてしまう。px 指定にすることでセクション高さから切り離し、
	現行と同程度（1画面あたりの移動量）に揃えている。
	速度を変えたいときは --bg-travel だけを調整すればよい。
	3層の移動比（1 : -0.54 : 0.85）は現行の 65% : -35% : 55% を踏襲。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.season-block {
	/* 現行 /summer/ は「1pxスクロールあたり背景0.229px」。
	   ここは0.19px前後になり、現行を踏襲しつつわずかに遅い。
	   なお同じ%指定のままだと0.47px（現行の約2倍）まで速くなる */
	--bg-travel: calc(480 * var(--px));
	box-shadow: inset 0 calc(-1 * var(--m6)) 60px 0 rgb(0 0 0 / 0.05);
}
@keyframes season-background-progress {
	from {
		background-position:
			center 0,
			center 0,
			center calc(var(--bg-travel) * -0.08);
	}
	to {
		background-position:
			center var(--bg-travel),
			center calc(var(--bg-travel) * -0.54),
			center calc(var(--bg-travel) * 0.85);
	}
}


/** セクション境界
	.arc-concave（common.css）はそのまま使い、
	前セクションへ影を落とすための drop-shadow だけを足す。
	アーチは radial-gradient のくり抜きなので、drop-shadow は
	曲線のふちだけをなぞる（帯の上辺は透明なため直線の影は出ない）。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.page-top section.arc-concave::before {
	height: calc(120 * var(--px));
}
@media screen and (max-width: 767px) {
	.page-top section.arc-concave::before {
		height: calc(70 * var(--px));
	}
}


/** 見出し
	＊現行の季節ページは画像（recommend-headline.webp 等）。
	  トップ用の見出し画像ができたら差し替える想定で、いまは文字組み
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.season-heading {
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	font-size: var(--huge-size);
	line-height: 1.4;
	
	text-align: center;
}
.season-heading strong {
	color: var(--heading-color, var(--black));
	font-weight: 400;
}

/** 見出し下のリード文（季節インデックスのヒーローと同じ文面） */
.season-block .section-header .lead {
	margin-top: var(--m2);
	line-height: 1.9;
}
@media screen and (max-width: 767px) {
	.season-heading {
		font-size: calc(26 * var(--px));
	}
	.season-block .section-header .lead {
		margin-top: var(--m3);
		text-align: center;/* common.css の SP 用 justify を打ち消す */
	}
}


/** 季節の漢字（透かし）
	春・夏は既存の type.webp を流用。
	秋・冬は type.webp が未入稿のため Webフォントで仮組みしている
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.season-block .type-season {
	max-width: none;
	width: calc(230 * var(--px));
	position: absolute;
	left: 0;
	top: calc(60 * var(--px));
	z-index: 0;
	pointer-events: none;
	user-select: none;
}
@media screen and (max-width: 767px) {
	.season-block .type-season {
		width: calc(120 * var(--px));
		left: calc(-14 * var(--px));
		top: calc(30 * var(--px));
	}
}


/* ====================================================================
	季節ごとの配色
	spring.css / summer.css の値をそのまま持ち込み、
	トップでは季節ごとにスコープして併存させる
==================================================================== */
.season-block.spring {
	--bg:            var(--spring-bg);
	--tag-bg:        var(--spring-accent);
	--heading-color: var(--spring-strong);
	--muted-text:    var(--spring-strong);
	--nav-season-bg:       var(--spring-strong);
	--nav-season-hover-bg: var(--spring-strong-hover);
	--recipe-card-number-color:               var(--spring-number);
	--recipe-card-headline-effect-main-color: var(--spring-marker);
	--recipe-card-headline-effect-sub-color:  var(--spring-marker-sub);
	background-image:
		url('../imgs/spring/background.webp'),
		url('../imgs/spring/background-flow.webp');
}
.season-block.summer {
	--bg:            var(--summer-bg);
	--tag-bg:        var(--summer-accent);
	--heading-color: var(--summer-strong);
	--muted-text:    var(--summer-strong);
	--nav-season-bg:       var(--summer-strong);
	--nav-season-hover-bg: var(--summer-strong-hover);
	--recipe-card-number-color:               var(--summer-number);
	--recipe-card-headline-effect-main-color: var(--summer-marker);
	--recipe-card-headline-effect-sub-color:  var(--summer-marker-sub);
	background-image:
		url('../imgs/summer/background.webp'),
		url('../imgs/summer/background-flow.webp');
}
.season-block.autumn {
	--bg:            var(--autumn-bg);
	--tag-bg:        var(--autumn-accent);
	--heading-color: var(--autumn-strong);
	--muted-text:    var(--autumn-strong);
	--nav-season-bg:       var(--autumn-strong);
	--nav-season-hover-bg: var(--autumn-strong-hover);
	--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);
	background-image:
		url('../imgs/autumn/background.webp'),
		url('../imgs/autumn/background-flow.webp');
}
.season-block.winter {
	--bg:            var(--winter-bg);
	--tag-bg:        var(--winter-accent);
	--heading-color: var(--winter-strong);
	--muted-text:    var(--winter-strong);
	--nav-season-bg:       var(--winter-strong);
	--nav-season-hover-bg: var(--winter-strong-hover);
	--recipe-card-number-color:               var(--winter-number);
	--recipe-card-headline-effect-main-color: var(--winter-marker);
	--recipe-card-headline-effect-sub-color:  var(--winter-marker-sub);
	background-image:
		url('../imgs/winter/background.webp'),
		url('../imgs/winter/background-flow.webp');
}
.season-block.winter::after {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: rgb(255 255 255 / 0.6);
	z-index: 10;
}
@media screen and (max-width: 767px) {
	.season-block.spring {
		background-image:
			url('../imgs/spring/background@sp.webp'),
			url('../imgs/spring/background-flow@sp.webp');
	}
	.season-block.summer {
		background-image:
			url('../imgs/summer/background@sp.webp'),
			url('../imgs/summer/background-flow@sp.webp');
	}
	.season-block.autumn {
		background-image:
			url('../imgs/autumn/background@sp.webp'),
			url('../imgs/autumn/background-flow@sp.webp');
	}
	/* 冬は公開前のため、上の PC 用指定をそのまま使う。
	   （@sp 素材は imgs/winter/ に入稿済み。公開時にここへ追記する） */
}


/* ====================================================================
	レシピカード一覧
	4枚を 1140px（= 300px × 4 − 20px × 3）ぴったりに収める
==================================================================== */
.recipe-list {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	margin-top: var(--m4);
	display: flex;
	justify-content: center;
}
.recipe-list > li {
	width: 25%;
	flex: 0 0 auto;
	position: relative;
	list-style: none;

	/* --y = 通常位置 / --y-lift = ホバー時の位置。
	   ホバーでは --y を書き換えず translate を直接差し替える。
	   こうすると通常位置が残るので、下のセーフエリアで
	   「持ち上がる距離 = --y-lift − --y」を計算できる */
	--y-lift: calc(-42 * var(--px));

	rotate: var(--r, 0deg);
	translate: 0 var(--y, 0px);
	transition: var(--transition);
}
.recipe-list > li + li {
	margin-left: calc(-20 * var(--px));
}
.recipe-list > li:nth-child(1) { --r: -4deg; --y: calc(14 * var(--px)); }
.recipe-list > li:nth-child(2) { --r: 3deg;  --y: calc(-12 * var(--px)); }
.recipe-list > li:nth-child(3) { --r: -3deg; --y: calc(10 * var(--px)); }
.recipe-list > li:nth-child(4) { --r: 4deg;  --y: calc(-14 * var(--px)); }

/** ホバー／フォーカスで他の3枚より上に出す */
.recipe-list > li:hover,
.recipe-list > li:focus-within {
	translate: 0 var(--y-lift);
	z-index: 5;
}

/** ホバー中のヒットエリア確保（セーフエリア）
	カードが上へ動くとポインターがカードの下端から外れてしまい、
	「浮く → 外れて戻る → また浮く」のちらつきが起きる。
	持ち上がる距離ぶんだけ下方向へ透明なヒットエリアを伸ばし、
	動いたあともポインターが内側に留まるようにする。
	参考: https://ics.media/entry/260803/（セーフ・トライアングル）

	ホバー操作のある環境だけで有効にする。タッチでは不要なため。 */
@media (hover: hover) and (pointer: fine) {
	.recipe-list > li:hover::before {
		content: "";
		display: block;/* common.css の *::before { display:none } を打ち消す */
		position: absolute;
		left: 0;
		right: 0;
		/* カードの下端から、持ち上がる距離（--y-lift − --y）ぶんだけ下へ伸ばす。
		   カード本体には重ねないので、隣のカードやリンクを塞がない */
		top: 100%;
		bottom: calc(var(--y-lift) - var(--y, 0px));
		z-index: -1;
	}
}

@media screen and (max-width: 767px) {
	/* SPは散らし・傾きを解除し、2列×2行に整列 */
	.recipe-list {
		width: auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--m2);
		margin-top: var(--m8);
	}
	.recipe-list > li {
		width: auto;
		--r: 0deg;
		--y: 0px;
	}
	.recipe-list > li + li {
		margin-left: 0;
	}
	.recipe-list > li:hover,
	.recipe-list > li:focus-within {
		--y-lift: calc(-8 * var(--px));
	}
}


/** カード本体
	home.css の .recipe-card を下地に使い、寸法だけ上書きする
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.season-card {
	display: block;
	padding-block: var(--m2) var(--m3);
	padding-inline: var(--m);
	border-radius: var(--m2);
	box-shadow: 0 6px 16px 0 rgb(0 0 0 / 0.16);
}
.recipe-list > li:hover .season-card,
.recipe-list > li:focus-within .season-card {
	box-shadow: 0 18px 28px 0 rgb(0 0 0 / 0.22);
}

.season-card .image {
	width: 100%;
	overflow: hidden;
	display: block;
}
.season-card .image img {
	width: 100%;
	height: auto;
	display: block;
}

/** 番号
	home.css の .recipe-card .number をそのまま使い、サイズと位置だけ調整。
	::before の帯は px 固定だと数字の大きさに追従しないため、em に置き換えている
	（現行値 54px / 14px / left 8px ÷ font-size 180px ＝ 0.3em / 0.078em / 0.045em）
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.season-card .number {
	font-size: calc(70 * var(--px));
	margin-bottom: 0;
	left: var(--m2);
	translate: 0 32%;
}
.season-card .number::before {
	width: 0.3em;
	height: 0.078em;
	left: 0.045em;
	top: 20%;
}
@media screen and (max-width: 767px) {
	.season-card .number {
		font-size: calc(44 * var(--px));
		left: var(--m);
	}
}

/** レシピ名
	home.css の .recipe-card p.headline（＋ span のマーカー効果）を流用し、
	写真の左下に重なるよう配置と文字サイズだけ差し替える
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.season-card .headline {
	font-size: var(--medium-size);
	line-height: 1.5;
	text-align: center;
	right: auto;
	top: auto;
	left: 50%;
	bottom: calc(14 * var(--px));
	translate: -50% 0;
	z-index: 1;
}
.season-card .headline span::before {
	translate: 4px -4px;
}
.season-card .headline span::after {
	translate: -5px 4px;
}
@media screen and (max-width: 767px) {
	.season-card .headline {
		/* home.css は SP で .recipe-card .headline を position: static /
		   display: inline に戻すため、写真に重ねる配置を指定し直す */
		position: absolute;
		display: block;
		margin-top: 0;
		font-size: calc(14 * var(--px));
		bottom: calc(10 * var(--px));
	}
	/* 角丸は .image 側でクリップしているので画像自身の角丸は不要 */
	.season-card .image img {
		border-radius: 0;
	}
}

/** 使用食材タグ
	recipe.css の .recipe-header .tag と同じ見た目。
	トップは recipe.css を読み込まないため、ここで定義しつつ
	home.css の .recipe-card .tag（写真に重ねる白抜き文字）を打ち消している
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.season-card .tags {
	margin-top: var(--m);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(5 * var(--px));
}
.season-card .tags .tag {
	position: static;
	padding-block: 0.15lh;
	padding-inline: 0.7ic;
	border-radius: 3px;
	background: var(--tag-bg);
	font-family: inherit;
	font-size: var(--small-size);
	font-weight: 700;
	color: white;
	line-height: 1.4;
	text-shadow: none;
}
@media screen and (max-width: 767px) {
	.season-card .tags .tag {
		font-size: calc(10 * var(--px));
		padding-inline: 0.5ic;
	}
}


/* ====================================================================
	季節インデックスへのリンク
==================================================================== */
.season-cta {
	margin-top: var(--m6);
	display: flex;
	justify-content: center;
}
.nav-season {
	--button-bg: var(--nav-season-bg);
	--button-hover-bg: var(--nav-season-hover-bg);
}
@media screen and (max-width: 767px) {
	.season-cta {
		margin-top: var(--m6);
	}
}


/* ====================================================================
	準備中（冬）
==================================================================== */
/* 中身が少ないぶん上下に余白を足し、レシピのある季節とリズムを揃える */
.season-block:has(.season-empty) {
	padding-block: var(--m8);
}
.season-empty {
	width: calc(380 * var(--px));
	max-width: 100%;
	margin-top: var(--m6);
	margin-inline: auto;
	padding-block: var(--m4);
	border-radius: var(--m2);
	background: white;
	box-shadow: 0 6px 16px 0 rgb(0 0 0 / 0.12);
	font-size: var(--medium-size);
	font-weight: 700;
	color: var(--black);
	text-align: center;
}


/* ====================================================================
	モーション低減 (WCAG 2.2.2)
==================================================================== */
@media (prefers-reduced-motion: reduce) {
	.season-block {
		animation: none !important;
		animation-timeline: unset !important;
	}
	.recipe-list > li {
		transition: none !important;
	}
	.recipe-list > li:hover,
	.recipe-list > li:focus-within {
		translate: 0 var(--y, 0px);/* 持ち上げない（通常位置のまま） */
	}
}