@charset "utf-8";

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

	Style - コロモ替え総選挙（秋のキャンペーンLP）

	common.css の変数体系（--px / --m / .wrap / .button / .section-header）
	をそのまま踏襲し、季節カラーだけ「秋」に差し替えたもの。

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


/* ====================================================================
	Default - 秋のカラートークン
==================================================================== */
:root {
	/* 色は common.css の秋トークンを参照する（autumn.css の方針に合わせ、
	   このファイルでは HEX を直接書かない）。
	   --autumn / --autumn-bg / --autumn-accent / --autumn-strong /
	   --autumn-strong-hover / --autumn-number / --autumn-pale /
	   --autumn-line / --autumn-marker / --autumn-marker-sub */

	/* common.css の意味づけ変数を秋に向ける */
	--action: var(--autumn-strong);
	/* 吹き出しの地色。ボタン色と被らないようご指定の値を使う（パレット外） */
	--subline-bg: #662300;
	--action-hover: var(--autumn-strong-hover);

	/* 派生色（小さい文字のコントラスト確保用。トークンから算出し HEX は持たない） */
	--ink-orange: color-mix(in srgb, var(--autumn-strong), var(--black) 38%);/* 白地 5.9:1 */
	--ink-soft:   color-mix(in srgb, var(--black), var(--autumn-bg) 35%);/* 地色上 5.8:1 */
	--edge:       color-mix(in srgb, var(--autumn-line), var(--white) 62%);/* 入力欄などの罫 */
	--edge-soft:  color-mix(in srgb, var(--autumn-line), var(--white) 80%);

	--huge-size: 2.5rem;      /* 45px → 40px。和文の見出しが長いため少し詰める */
}

@media screen and (max-width: 767px) {
	:root {
		--huge-size: calc(26 * var(--px));
	}
}

/* TB（768〜1199）。SP側（767で26px）と PC側（1200で40px）を直線でつなぐ。
   common.css の同じ趣旨の指定は、この :root に上書きされるのでここにも置く */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	:root {
		--huge-size: calc(30px + 10 * (100vw - 768px) / 432);
	}
}

body {
	background: var(--autumn-bg);
	color: var(--text);
	line-break: strict;
}


/** アクセシビリティ（既存ページと同じパターンを踏襲）
-------------------------------------------------------------------- */
.skip-link {
	display: none;
	position: absolute;
	left: var(--m2);
	top: 0;
	translate: 0 -200%;
	z-index: 100;
	padding: 0.5lh 1ic;
	background: var(--black);
	color: white;
	font-weight: 700;
	border-radius: 0 0 8px 8px;
}
.skip-link:focus {
	translate: 0 0;
}
:is(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	:root {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/** アーチ
	common.css の .arc-convex / .arc-concave は弧の向きが逆だったため、
	ここで定義を入れ替える（common.css 自体はサイト側と同一のまま保つ）。
-------------------------------------------------------------------- */
section.arc-convex::before {
	background: radial-gradient(
		ellipse 100% 30vw at 50% calc(100% - 30vw),
		transparent 0%,
		transparent 99.5%,
		var(--bg) 100%
	);
}
section.arc-concave::before {
	background: radial-gradient(
		ellipse 100% 30vw at 50% calc(0% + 30vw),
		var(--bg) 0%,
		var(--bg) 99.5%,
		transparent 100%
	);
}


/** ボタン（common.css の .button を秋色で上書き）
-------------------------------------------------------------------- */
.button {
	--button-bg: var(--action);
	--button-hover-bg: var(--action-hover);
	--button-hover-color: var(--black);
}
.button.large {
	padding-block: calc(0.55lh + 3px) 0.55lh;
	padding-inline: 2ic;
	font-size: calc(var(--medium-size) * 1.1);
	box-shadow: 0 var(--ms) 0 0 rgb(0 0 0 / 0.12);
}
.button.outline {
	--button-bg: white;
	--button-color: var(--ink-orange);
	--button-hover-bg: var(--action);
	--button-hover-color: white;
	box-shadow: inset 0 0 0 2px var(--action);
}
.button.outline::after {
	display: none;
}
.button.ghost {
	--button-bg: var(--black);
	--button-hover-bg: color-mix(in srgb, var(--black), var(--white) 12%);
	--button-hover-color: white;
}


/** セクション共通
-------------------------------------------------------------------- */
section:not(.hero) {
	padding-block: var(--m8);
}
.section-header {
	margin-bottom: var(--m6);
}
/* 本サイトの subline 画像（斜めの吹き出し）と同じあしらいをCSSで再現 */
.section-header .subline {
	display: block;
	width: fit-content;
	margin-inline: auto;
	margin-bottom: var(--m2);
	padding-block: 0.2lh;
	padding-inline: 1.4ic;
	border-radius: 6px;
	background: var(--subline-bg);
	color: white;
	font-size: var(--medium-size);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	rotate: -1.6deg;
	position: relative;
}
.section-header .subline::after {
	display: block;
	width: calc(20 * var(--px));
	min-width: 14px;
	aspect-ratio: 20 / 16;
	background: var(--subline-bg);
	clip-path: polygon(0 0, 100% 0, 22% 100%);
	position: absolute;
	left: 54%;
	top: calc(100% - 1px);
}
.section-header .headline {
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	font-size: var(--huge-size);
	line-height: 1.4;
	color: var(--black);
}
.section-header .lead {
	margin-top: var(--m2);
}
.note-tentative {
	margin-top: var(--m3);
	font-size: var(--small-size);
	color: var(--ink-soft);
	text-align: center;
}


/* ====================================================================
	ヒーロー（FV）
==================================================================== */
/* 背景（hero-image）の上に、コピー（hero-copy）を h1 として重ねる。
   どちらも <picture> で PC（背景3000×1880 ／ コピー1510×991）と SP（750×1500 ／ 750×940）を出し分ける。
   9/24ご支給の ver10 から、PCの背景は写真ではなく本サイトと同じ水彩のイラストになった */
section.hero {
	background-color: var(--autumn-bg);
}
/* TB（768〜1199）だけ --px の下限をゆるめている（common.css 参照）が、FVは
   背景・コピー・パネルが画面幅なりに縮む組み方なので、上に重なるスライダーだけが
   大きいまま残って、コピーの応募期間の帯にぶつかっていた。
   FVの中では PC と同じ「画面幅 / 1500」に戻す */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	section.hero {
		--px: calc(100vw / 1500);
		--m: calc(15 * var(--px));
		--ms: calc(var(--m) / 3 * 2);
	}
}
/* 写真は幅いっぱいに置き、その高さがそのままセクションの高さになる（PCは 3:2、SPは 1:2） */
.hero-image {
	display: block;
	margin-top: 0;
}
.hero-image img {
	display: block;
	width: 100%;
	height: auto;
	/* FVの高さ。素材（3000 / 1880）の下を 80px ぶん切って詰めている。
	   広い画面で高くなりすぎないよう 900px で頭打ちにする（超えたぶんは下が切れる） */
	aspect-ratio: 1500 / 900;
	max-height: 900px;
	object-fit: cover;
	object-position: center top;
}
/* コピーと景品パネルを入れる枠。絶対配置の基準になるので .wrap を positioned にし、
   中身は写真の上に重ねるので高さは持たせない。
   基準になるのはパディングボックス（= min(1500px, 画面幅)）なので、
   **1500px 以下では画面幅と同じ＝デザイン基準（1500px幅）の見え方そのまま**、
   それより広い画面では 1500px で頭打ちになり、コピーとパネルがそれ以上大きくならない */
section.hero > .wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 1500px;
	height: 0;
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
}
/* コピーと景品パネルの位置は、背景の 3000px に対する比率で持っている。
   ご支給の サンプルFV_ver6.webp 上の実測が出発点で、素材が差し替わるたびに
   「前の版の絵柄と重ねて一致する位置」を画像照合で出し直している（見た目の位置が動かないように）。
   9/24の ver9（コピー）／ ver8（パネル）は、前の版に対して
   倍率 1.006 ／ 1.047・ずれ (94,176) ／ (69,13) で一致した。
   top を margin-top で持つのは、margin の % が高さではなく幅を基準にするため
   （どの画面幅でも位置の比率が崩れない）。 */
.hero-title {
	position: absolute;
	/* hero-copy_ver9（1510×991）。透明な余白がほぼ無い詰めた版なので、
	   前版（ver8）と同じ見え方になる位置まで下げている */
	left: 1.367%;         /*   41 / 3000 */
	top: 0;
	margin-top: 7.400%;   /*  222 / 3000 */
	width: 50.633%;       /* 1519 / 3000 */
	z-index: 2;
	pointer-events: none;
}
.hero-title img {
	display: block;
	width: 100%;
	height: auto;
}
/* 日清オイリオのロゴ。削除したヘッダーの代わりに、本サイトのヘッダーと同じ位置＝FVの左上へ置く。
   10/2 から公式サイトと同じ3色のロゴ（logo-color.png 188×156・余白なし。比率は旧 SVG と同じなので指定はそのまま）。
   以前は 9/24ご支給の logo.svg（濃茶）を使用。背景がイラストになって左上がほぼ白地になり、
   本サイト同梱の白版（logo.webp）では 1.01:1 で見えなかったため（濃茶なら 15.0:1）。
   SVG は余白のない絵柄だけなので、本サイトのロゴ（260×250 の webp を 120px 幅で置き、
   絵柄は 86.3×71.3px・左から32px・上から22.6px）と同じ位置・同じ大きさに見えるよう、
   絵柄の実寸のほうで指定している。コピー画像の「＼＼」とは重ならない。
   フッターは濃色の地なので、あちらは白版（logo.webp）のまま */
.hero-logo {
	position: absolute;
	top: 0;
	/* 本サイトの a.header-logo と同じく --px 連動にして、1500px を超えても大きくしない
	   （% だと画面幅なりに伸び続ける）。1500px 以下の見え方は % のときと同値 */
	left: calc(32 * var(--px));
	margin-top: calc(22.6 * var(--px));
	width: calc(86.3 * var(--px));
	z-index: 3;
}
.hero-logo a {
	display: block;
}
.hero-logo img {
	display: block;
	width: 100%;
	height: auto;
}
/* 景品パネル。背景の右上に重ねる（PC hero-prize_ver8 1266×984 ／ SP hero-prize@sp_ver2 750×580）。
   SP用の素材が来たので <picture> にして出し分けている */
.hero-prize {
	display: block;
	position: absolute;
	left: 53.567%;        /* 1607 / 3000 */
	top: 0;
	margin-top: 5.533%;   /*  166 / 3000 */
	width: 44.200%;       /* 1326 / 3000 */
	z-index: 1;
	pointer-events: none;
}
.hero-prize img {
	display: block;
	width: 100%;
	height: auto;
}

/** FVの応募ボタン
	サンプルFV_ver4 に描かれていたボタンを HTML/CSS で組んだもの。
	実測：left 1715px ／ top 1167px ／ 1142×169（3000×2000 基準）。
	※サンプルFV_ver6 にはボタンが無く、この位置だと景品パネルに重なるため、いったん非表示。
	  出すときは display を外し、位置（margin-top / left）を決め直すこと。
	  パネルの下端（FVの高さの63%）とスライダーの上（同73%）のあいだは84pxしかないので、
	  そこに置くならボタンも一回り小さくする必要がある
-------------------------------------------------------------------- */
.hero-cta {
	display: none;
	position: absolute;
	left: 59.069%;        /* 右端をサンプルと同じ 95.233% にそろえた値 */
	top: 0;
	margin-top: 36.955%;  /* サンプルの 1167px（38.9%）× 0.95 */
	width: 36.164%;       /* サンプルの 1142px（38.067%）× 0.95 */
	z-index: 2;
	font-size: calc(100vw * 34.6 / 1500);
	/* 写真の上に落ちる薄い影 */
	filter: drop-shadow(0 0.18em 0.28em rgb(60 20 0 / 0.3));
}
.hero-cta .button {
	--button-bg: linear-gradient(#f43d06, #eb2302);
	--button-hover-bg: linear-gradient(#ff5a26, #f23c0e);
	--button-hover-color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	width: 100%;
	aspect-ratio: 1142 / 169;
	padding: 0;
	border: 0.082em solid #e62005;   /* 外周の濃い赤（実測6px＝1500wで3px） */
	border-radius: 0.66em;           /* 実測48px＝1500wで24px */
	font-size: 1em;
	/* サンプルはかなを詰めた組み（プロポーショナル） */
	font-feature-settings: "palt";
	letter-spacing: -0.057em;
	line-height: 1;
}
/* 内側の白い二重線（各1.5px、間に2px） */
.hero-cta .button::before,
.hero-cta .button::after {
	display: block;
	width: auto;
	height: auto;
	border: max(1px, 0.045em) solid var(--white);
	border-radius: calc(0.66em - 0.082em);
	box-shadow: none;
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.hero-cta .button::after {
	inset: 0.098em;
	border-radius: calc(0.66em - 0.082em - 0.098em);
}
/* 矢印はサンプルに合わせて太く大きく */
.hero-cta .icon-arrow {
	width: 0.795em;
	height: 0.795em;
	vertical-align: middle;
}
.hero-cta .icon-arrow::before {
	width: 0.577em;
	height: 0.795em;
	clip-path: polygon(0 0, 0.161em 0, 100% 50%, 0.161em 100%, 0 100%, calc(100% - 0.161em) 50%);
}
@media screen and (max-width: 767px) {
	/* SPのビジュアルにボタンは無く、画面下に追従CTAがあるので出さない */
	.hero-cta {
		display: none;
	}
}


/** FV下部のレシピスライダー
	画像の上レイヤーに置き、左右中央寄せ。
	写真のある14品を2周ぶん並べて -50% まで動かし、継ぎ目なくループさせる
	（秋の4品は写真待ちのためスライダーには入れていない）
-------------------------------------------------------------------- */
.hero-slider {
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: calc(30 * var(--px));
	translate: -50% 0;
	z-index: 2;
}
.hero-slider-title {
	margin-bottom: var(--m);
	font-size: calc(26 * var(--px));
	font-weight: 700;
	line-height: 1.4;
	/* PCの背景は淡い水彩イラスト（ver10）。白文字だと 1.08:1 で読めないので濃色にする。
	   #240c00 なら同じ範囲で 11.2〜17.3:1。影も要らない（SPは写真のままなので下で白に戻す） */
	color: var(--black);
	text-align: center;
}
.hero-slider-viewport {
	/* 画面いっぱいに流す。左右は切り落として「続きがある」ことを示す */
	margin-inline: auto;
	overflow: hidden;
}
.hero-slider-track {
	--card-gap: var(--m);
	display: flex;
	gap: var(--card-gap);
	width: max-content;
	animation: hero-slide 42s linear infinite;
}
@keyframes hero-slide {
	from { translate: 0 0; }
	to   { translate: calc(-50% - var(--card-gap) / 2) 0; }
}
.hero-slider-track > li {
	/* 1500px 幅で 168×135（高さは元の9割）。カードの寸法を --px に連動させ、
	   表示枚数は画面幅なりに増減させる（1500wで約8.3枚） */
	width: calc(168 * var(--px));
	height: calc(135 * var(--px));
	margin-top: 0;
	flex: none;
	display: flex;
	flex-direction: column;
	border-radius: var(--m);
	background: var(--white);
	box-shadow: 0 var(--ms) var(--m) 0 rgb(120 60 0 / 0.18);
	overflow: hidden;
}
/* 写真はレシピ名を置いた残りを埋める（画角はトリミングで吸収） */
.hero-slider-track img {
	display: block;
	width: 100%;
	flex: 1;
	min-height: 0;
	object-fit: cover;
}
@media screen and (max-width: 767px) {
	/* SPも 9/24 に3点ともイラスト版へ差し替え（背景 750×1500 ／ コピー 750×500 ／
	   パネル 750×580）。3点とも幅いっぱいの素材で、コピーとパネルは canvas を隙間なく
	   縦に積む作り（コピー 60〜560／パネル 560〜1140）。パネルの絵柄は 1083 で終わり、
	   スライダーの上端（1088）にちょうど収まる。値は 750px 基準の比率 */
	.hero-image img {
		aspect-ratio: 750 / 1500;   /* 素材そのままの比率（切り落とさない） */
	}
	/* 位置はご支給の サンプルFV@sp.jpg（375×750）上の実測。
	   3点とも倍率 0.5（＝750の素材を375幅で等倍）で誤差 0.01 と一致 */
	.hero-title {
		left: 0;
		margin-top: 13.600%;  /* 51 / 375（750基準で102） */
		width: 100%;
	}
	.hero-prize {
		left: 0;
		margin-top: 84.267%;  /* 316 / 375（750基準で632） */
		width: 100%;
	}
	/* ロゴもサンプルの実測どおり（インクの外接矩形 x15–59 / y9–45 ＝ 45×37）。
	   SVGは余白のない絵柄だけのデータなので、その実寸をそのまま指定できる */
	.hero-logo {
		left: 4.000%;         /* 15 / 375 */
		margin-top: 2.400%;   /*  9 / 375 */
		width: 12.000%;       /* 45 / 375 */
	}
	/* スライダーは3枚半が見える大きさに（375幅 ÷ 3.5 = 107 ＝ カード101＋余白6）。
	   高さは PC と同じ比率（135/168）を保つ */
	.hero-slider-track > li {
		width: calc(101 * var(--px));
		height: calc(81 * var(--px));
	}
	/* スライダーもPCと同じく写真の範囲内に重ねる。
	   下のアーチは端で約4vw 掛かるので（PCの 60 * --px と同じ考え方）、そのぶんだけ上げる */
	.hero-slider {
		bottom: 4vw;
	}
	/* SPもイラスト背景になったので、見出しはPCと同じ濃色のまま（白だと 1.55:1、
	   濃色なら 12.0:1）。大きさだけ調整する */
	.hero-slider-title {
		/* 2行目「季節に合わせて色んなコロモを楽しもう！」は 20px だと 379px 必要で
		   375w に収まらず3行に割れていた。18px（341px）で2行に収める */
		font-size: calc(18 * var(--px));
		/* 濃色の文字なので、影は白で。水彩の模様の上でも文字の輪郭が切れないようにする */
		text-shadow:
			0 0 calc(3 * var(--px)) rgb(255 255 255 / 0.9),
			0 0 calc(8 * var(--px)) rgb(255 255 255 / 0.75);
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-slider-track {
		animation: none;
	}
}
/* 読み上げ専用のユーティリティ */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* ====================================================================
	賞品（FV直下）
==================================================================== */
/* FVの写真と濃いオレンジの概要にはさまれる「読ませる面」 */
section.prize {
	--bg: var(--autumn-pale);
	/* 直下の概要の弧（上にせり出す）がカードに掛からないよう、下の余白に弧の高さを足す */
	padding-bottom: calc(var(--m6) + 100 * var(--px));
	overflow-x: clip;                     /* 縦は切らない。上に出る弧を消さないため */
}
@media screen and (max-width: 767px) {
	section.prize {
		padding-bottom: calc(var(--m6) + 60 * var(--px));
	}
}
section.prize .section-header .subline,
section.prize .section-header .subline::after {
	background: var(--autumn-strong);
}

/* 賞品は1点（日清ヘルシークリア1本＋波佐見焼プレート2枚の抱き合わせ）。
   写真と説明を左右に組み、1段目にオイル（主）、2段目にプレート（副）を続ける（SPは縦積み） */
.prize-card {
	/* シールが上辺の中央にまたがるので、見出しに掛からないよう半径ぶん空ける */
	margin-top: calc(84 * var(--px) + var(--m2));
	padding: var(--m5);
	border-radius: var(--m4);   /* 本サイトの .recipe-card と同じ角丸 */
	background: var(--autumn-bg);
	/* 濃い地の上なので影を一段深く */
	box-shadow: var(--m) var(--m) 6px 0 rgb(120 70 0 / 0.18);
	position: relative;
}
.prize-item {
	display: grid;
	/* 左＝写真／右＝賞品名と説明。オイル名が1行に収まるよう文字の列を広く取り、
	   写真の列は2段とも同じ幅にして、賞品名の左端をそろえる */
	grid-template-columns: calc(380 * var(--px)) 1fr;
	gap: var(--m5);
	align-items: center;   /* 説明が短いので、写真の高さの中央に置く */
	margin-top: 0;
}
/* 2段目（プレート）は副賞。名前と説明をひとまわり小さくする */
.prize-item.is-sub h3 {
	font-size: calc(var(--medium-size) * 1.2);
}
.prize-item.is-sub .body {
	font-size: calc(var(--medium-size) * 0.86);
}
/* 注記は .text の最下部。.text を写真の高さまで伸ばし、注記を写真の下端にそろえる */
.prize-item.is-sub .text {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}
/* 2段をつなぐ「さらに！」。左右に罫線を引く */
.prize-plus {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding-block: var(--m2) var(--m4);
	font-size: calc(30 * var(--px));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--ink-orange);   /* 文字として読ませるので --action（2.9:1）ではなく濃い色 */
}
.prize-plus::before,
.prize-plus::after {
	display: block;
	flex: 1;
	height: 2px;
	background: color-mix(in srgb, var(--action), var(--white) 50%);
}
@media screen and (max-width: 767px) {
	.prize-card {
		margin-top: calc(66 * var(--px) + var(--m2));
		/* シールは直径132pxで、その半分がカードの上辺より上に出る。
		   上の padding をその半分ぶん取らないと、ヘルシークリアの写真に掛かる */
		padding: calc(66 * var(--px) + var(--m2)) var(--m3) var(--m3);
	}
	/* SPは縦積みにして中央にそろえる */
	.prize-item {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: var(--m3);
		text-align: center;
	}
	.prize-item :is(.body, .caption) {
		text-align: center;   /* common.css の SP 用 justify を打ち消す */
	}
	.prize-item.is-sub {
		gap: var(--m2);
	}
	.prize-item.is-sub .image {
		width: 78%;
	}
	.prize-plus {
		padding-block: var(--m6) var(--m8);
		font-size: calc(24 * var(--px));
	}
	/* 説明文は2段とも body から継いだ大きさにする（PCのように差をつけない） */
	.prize-card .body,
	.prize-item.is-sub .body {
		font-size: inherit;
	}
}
/* 当選人数のゴールドシール。写真の左上角にステッカーのように重ねる */
.prize-card .rank {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(168 * var(--px));
	min-width: 96px;
	aspect-ratio: 1;
	/* 参考カラーの黄〜橙からゴールドの階調をつくる */
	background: linear-gradient(150deg,
		color-mix(in srgb, var(--autumn-number), var(--white) 45%) 0%,
		var(--autumn-number) 26%,
		var(--autumn-line) 52%,
		color-mix(in srgb, var(--autumn-line), var(--autumn-strong) 45%) 78%,
		color-mix(in srgb, var(--autumn-number), var(--white) 25%) 100%);
	/* 30山のギザギザシール（谷を浅く） */
	clip-path: polygon(50.00% 0.00%, 55.00% 2.46%, 60.40% 1.09%, 64.77% 4.54%, 70.34% 4.32%, 73.90% 8.60%, 79.39% 9.55%, 81.98% 14.48%, 87.16% 16.54%, 88.67% 21.90%, 93.30% 25.00%, 93.67% 30.56%, 97.55% 34.55%, 96.76% 40.06%, 99.73% 44.77%, 97.80% 50.00%, 99.73% 55.23%, 96.76% 59.94%, 97.55% 65.45%, 93.67% 69.44%, 93.30% 75.00%, 88.67% 78.10%, 87.16% 83.46%, 81.98% 85.52%, 79.39% 90.45%, 73.90% 91.40%, 70.34% 95.68%, 64.77% 95.46%, 60.40% 98.91%, 55.00% 97.54%, 50.00% 100.00%, 45.00% 97.54%, 39.60% 98.91%, 35.23% 95.46%, 29.66% 95.68%, 26.10% 91.40%, 20.61% 90.45%, 18.02% 85.52%, 12.84% 83.46%, 11.33% 78.10%, 6.70% 75.00%, 6.33% 69.44%, 2.45% 65.45%, 3.24% 59.94%, 0.27% 55.23%, 2.20% 50.00%, 0.27% 44.77%, 3.24% 40.06%, 2.45% 34.55%, 6.33% 30.56%, 6.70% 25.00%, 11.33% 21.90%, 12.84% 16.54%, 18.02% 14.48%, 20.61% 9.55%, 26.10% 8.60%, 29.66% 4.32%, 35.23% 4.54%, 39.60% 1.09%, 45.00% 2.46%);
	color: var(--white);
	line-height: 1;
	position: absolute;
	left: 50%;                  /* カード上辺の中央にまたがせる */
	top: 0;
	translate: -50% -50%;
	z-index: 2;
}
@media screen and (max-width: 767px) {
	.prize-card .rank {
		width: calc(132 * var(--px));
	}
}
/* ギザギザから 6px 内側に、白の丸い縁を 4px */
.prize-card .rank::before {
	display: block;
	position: absolute;
	inset: calc(2.2% + 6px);   /* 谷（幅の2.2%）から 6px 内側 */
	border: 4px solid var(--white);
	border-radius: 50%;
	pointer-events: none;
}
.prize-card .rank .pre {
	font-size: calc(var(--small-size) * 1.5);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.15em;
	color: var(--black);
}
.prize-card .rank .letter {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-size: calc(46 * var(--px));   /* 3桁が白縁に収まるサイズ */
	letter-spacing: -0.03em;
	color: var(--black);
}
.prize-card .rank .unit {
	font-size: calc(var(--small-size) * 1.15);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-top: 0.25em;
	color: var(--black);
}
/* 写真の枠は、ご支給の景品写真（1254×784）と同じ比率 */
.prize-card .image {
	aspect-ratio: 1254 / 784;
	border-radius: var(--m2);
	background: var(--autumn-pale);
	overflow: hidden;
}
.prize-card .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 切り抜きのボトルは枠（白地・角丸）を付けず、列の中央にそのまま立てる */
.prize-card .image.is-package {
	display: flex;
	justify-content: center;
	aspect-ratio: auto;
	border-radius: 0;
	background: none;
	overflow: visible;
}
.prize-card .image.is-package img {
	width: auto;
	height: calc(360 * var(--px));
}
@media screen and (max-width: 767px) {
	.prize-card .image.is-package img {
		height: calc(240 * var(--px));
	}
}
.prize-card h3 {
	font-size: calc(var(--medium-size) * 1.55);
	line-height: 1.4;
	color: var(--black);
}
/* 商品名の下の仕様（色釉 しのぎ 大皿…）。商品名から一段下げる */
.prize-card h3 .small {
	display: block;
	margin-top: 0.4lh;
	font-size: var(--regular-size);
	font-weight: 400;
	line-height: 1.6;
	word-break: keep-all;   /* SPで「キャメル1／枚」と語の途中で折れないよう、空白と読点で折る */
	text-wrap: balance;
}
.prize-card .body {
	margin-top: var(--m2);
	font-size: calc(var(--medium-size) * 1.05);
	font-weight: 700;
	line-height: 1.7;
	color: var(--ink-orange);
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	/* 文字が入る幅が 246px しかなく、オイル名（1行に約350px必要）が
	   語の途中で折り返していた。写真の列と間隔を詰めて 325px 確保する */
	.prize-item {
		grid-template-columns: calc(300 * var(--px)) 1fr;
		gap: var(--m3);
	}
	.prize-card h3 {
		font-size: calc(32 * var(--px));
	}
	/* プレート名は TB だと語の途中で折れるので、SP用の改行をここでも使う */
	.prize-item.is-sub h3 br[sp] {
		display: revert;
	}
}
.prize-card .caption {
	margin-top: auto;
	padding-top: var(--m2);
	font-size: var(--small-size);
}


/* ====================================================================
	コロモ替えとは
==================================================================== */
/* ノミネートレシピと応募フォームのあいだに置く。直前の冬ブロック（--winter-bg＋模様）とも、
   直後の応募フォーム（--autumn-pale）とも地色が分かれるよう、当選率アップと同じ黄の無地にする */
section.about {
	--bg: var(--autumn);
	color: var(--black);
	/* 直下の応募フォームの弧（上にせり出す）が本文に掛からないよう、下の余白に弧の高さを足す */
	padding-block: var(--m8) calc(180 * var(--px));
}
@media screen and (max-width: 767px) {
	section.about {
		padding-block: var(--m8) calc(120 * var(--px));
	}
}
/* オレンジ地の上に白カードを置く（本サイトの .recipe-card と同じ角丸・同じ影） */
/* カードスタイルは廃止。地の上に直接置いて読ませる */
.about-body {
	display: flex;
	align-items: center;
	gap: var(--m5);
	max-width: 960px;
	margin-inline: auto;
}
/* 本サイトトップの 16:9 キャプチャ（ブラウザウィンドウ風の枠に入れる） */
:is(.about-body, .thanks-lp) .capture {
	flex-shrink: 0;
	display: block;
	width: calc(420 * var(--px));
	min-width: 240px;
	max-width: 100%;
	border-radius: var(--m);
	background: color-mix(in srgb, var(--white), var(--black) 28%);
	box-shadow: 0 var(--ms) var(--m2) 0 rgb(120 70 0 / 0.18);
	overflow: hidden;
}
:is(.about-body, .thanks-lp) .capture .bar {
	display: flex;
	align-items: center;
	gap: 5px;
	height: calc(22 * var(--px));
	min-height: 16px;
	padding-inline: calc(10 * var(--px));
}
:is(.about-body, .thanks-lp) .capture .bar i {
	display: block;
	width: calc(7 * var(--px));
	min-width: 5px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.85);
}
:is(.about-body, .thanks-lp) .capture img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
@media (any-hover: hover) {
	:is(.about-body, .thanks-lp) .capture {
		transition: var(--transition);
	}
	:is(.about-body, .thanks-lp) .capture:hover {
		translate: 0 -3px;
		box-shadow: 0 var(--m) var(--m3) 0 rgb(120 70 0 / 0.25);
	}
}
.about-body .text {
	flex: 1;
}
.about-body h2 {
	margin-bottom: 0.4lh;
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	font-size: var(--huge-size);
	color: var(--black);
}
.about-body .nav-lp {
	margin-top: var(--m3);
}
@media screen and (max-width: 767px) {
	.about-body {
		flex-direction: column;
		gap: var(--m3);
		text-align: center;
	}
	.about-body .capture {
		width: 100%;
	}
	.about-body .nav-lp {
		margin-inline: auto;
	}
}


/* ====================================================================
	キャンペーン概要（STEP／当選率アップ）
==================================================================== */
/* 「どうやったら応募できるのか」を一瞬で伝えるパート。
   ページ唯一のビビッドな地色・最大の文字・最大の余白・上端の弧の4つを
   このセクションに独占させて、FVに次ぐ見せ場にする。
   参考にしたLPで共通していた手法：
     ・地色の反転（カルビー「大収穫祭」＝前段まで淡→ここで一気に濃く）
     ・ステップ数をページ最大の文字にする（ロート製薬 SKIN AQUA の「２STEP」）
     ・濃地では番号バッジと矢印を地色から離す（亀田製菓・グリコ）
   #ff6600 × #240c00 は 6.3:1。白ヌキ（2.9:1）は使わない。
   模様背景はここから外し、当選率アップチャンスへ移している */
section.outline {
	--bg: var(--autumn-strong);
	padding-block: var(--m3) var(--m9);
	/* オレンジ帯の下に body のクリームが覗くと地色が3段変わって見えるため 0 に */
	margin-bottom: 0;
	/* 直前の賞品セクションは common.css の section.hero + section で z-index:1 になっていて、
	   上にせり出す弧（::before）がその下に隠れていた。弧が見えるよう一段上に置く */
	z-index: 2;
}
section.outline > .wrap {
	z-index: 1;
}
/* ページ最大の見出し。他セクションは40px、投票が46px、ここが54px */
section.outline .section-header .headline {
	font-size: calc(var(--huge-size) * 1.35);
	color: var(--white);
}
section.outline .section-header .headline strong {
	font-size: 1.5em;
	font-weight: inherit;
	line-height: 1;
	vertical-align: -0.06em;
}
section.outline .section-header .lead {
	font-size: calc(var(--regular-size) * 1.15);
	font-weight: 700;
	color: var(--white);
}
/* STEPカード。濃地の上なので影を深め、番号と矢印は地色から離す */
section.outline .step-list > li {
	padding-top: var(--m6);
	box-shadow: var(--m) var(--m) 6px 0 rgb(120 70 0 / 0.22);
}
section.outline .step-list .num {
	background: var(--subline-bg);
	border: 3px solid var(--white);   /* .vote-card .no と同じ語彙 */
	box-shadow: 0 3px 10px rgb(120 70 0 / 0.28);
}
/* 現行は --action（#ff6600）で、地色と同色になり三角が消えてしまう */
section.outline .step-list > li:not(:last-child)::after {
	width: 24px;
	height: 30px;
	left: calc(100% + var(--m5) / 2);
	background: var(--white);
}
@media screen and (max-width: 767px) {
	section.outline {
		padding-block: var(--m2) var(--m8);
	}
	section.outline .step-list > li {
		padding-top: var(--m7);
	}
}

/** 応募情報の帯（概要として自己完結させる）
-------------------------------------------------------------------- */
.outline-fact {
	width: fit-content;
	margin-top: var(--m6);
	margin-inline: auto;
	padding: var(--m3) var(--m4);
	border-radius: var(--m2);   /* STEPカード（var(--m4)）と同じ丸みの家族に */
	background: var(--white);
	box-shadow: var(--m) var(--m) 6px 0 rgb(120 70 0 / 0.22);
	font-size: calc(18 * var(--px));
	line-height: 1.7;
}
.outline-fact > div {
	display: flex;
	align-items: baseline;
	gap: var(--m3);
}
.outline-fact > div + div {
	margin-top: 0.5lh;
	padding-top: 0.5lh;
	border-top: 1px solid var(--edge-soft);
}
/* ピル型のラベル。固定幅で縦に揃える */
.outline-fact dt {
	flex: none;
	width: 7ic;
	padding: 0.2lh 1ic;
	border-radius: 999px;
	background: var(--subline-bg);
	color: var(--white);
	font-size: calc(16 * var(--px));
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-align: center;
	box-sizing: content-box;
}
.outline-fact dd .num {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-size: calc(34 * var(--px));
	line-height: 1;
	letter-spacing: -0.02em;
	margin-inline: 0.06em;
	vertical-align: -0.06em;
	color: var(--ink-orange);   /* --action は白地 2.9:1 で不可 */
}
.outline-fact dd {
	flex: 1;
	min-width: 0;
	font-weight: 700;
}
/* 賞品の仕様（色釉 しのぎ…）。語の途中で折らず、行間は小さい字に合わせて詰める */
.outline-fact dd .small {
	display: inline-block;
	line-height: 1.6;
	word-break: keep-all;
	text-wrap: balance;
}
.outline-cta {
	margin-top: var(--m5);
	text-align: center;
}
/* 同系色の地なので白地に反転させる（既存 .button.outline と同じ考え方） */
/* 下のノミネートレシピへ送るので、矢印は下向きに倒す */
/* 下（ページ内の先）へ送るボタンの矢印は倒して下向きにする */
.icon-arrow.down {
	rotate: 90deg;
}
.outline-cta .button {
	--button-bg: var(--white);
	--button-color: var(--ink-orange);
	--button-hover-bg: var(--autumn);
	--button-hover-color: var(--subline-bg);
	min-width: min(calc(560 * var(--px)), 100%);
	margin-inline: auto;
	box-shadow:
		inset 0 0 0 2px var(--subline-bg),
		0 var(--ms) 0 0 color-mix(in srgb, var(--subline-bg), transparent 45%);
}
/* 白地のボタンでは .button の白い内側リング（::after）が意味を持たない */
.outline-cta .button::after {
	display: none;
}
@media (any-hover: hover) {
	.outline-cta .button:hover {
		translate: 0 var(--ms);
		box-shadow: inset 0 0 0 2px var(--subline-bg);
	}
}
@media screen and (max-width: 767px) {
	section.outline .section-header .headline {
		font-size: calc(var(--huge-size) * 1.2);
	}
	.outline-fact {
		padding: var(--m4) var(--m3);
		font-size: var(--regular-size);
	}
	/* 応募期間と賞品は改行が入るので中央寄せ（当選発表は文章なのでそのまま） */
	.outline-fact > div:nth-child(-n+2) dd {
		text-align: center;
	}
	.outline-fact > div {
		display: block;
	}
	.outline-fact dt {
		width: fit-content;
		margin-inline: auto;   /* ピルを左右中央に */
		margin-bottom: 0.2lh;
	}
	.outline-cta .button {
		padding-inline: 1em;
	}
	.outline-fact dd .num {
		font-size: calc(22 * var(--px));
	}
}

/** STEP
-------------------------------------------------------------------- */
.step-list {
	display: flex;
	align-items: stretch;
	gap: var(--m5);
}
.step-list > li {
	flex: 1;
	margin-top: 0;
	padding: var(--m5) var(--m2) var(--m3);
	border-radius: var(--m4);
	background: white;
	box-shadow: var(--m) var(--m) 6px 0 rgb(120 70 0 / 0.1);
	text-align: center;
	position: relative;
}
/* 右向きの三角でステップを繋ぐ */
.step-list > li:not(:last-child)::after {
	display: block;
	width: var(--m2);
	height: var(--m3);
	background: var(--action);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	position: absolute;
	left: calc(100% + var(--m) + var(--mh));
	top: 50%;
	translate: -50% -50%;
}

/* ラベルは真円。カード上端にまたがせる */
.step-list .num,
.chance-list .num {
	display: grid;
	place-content: center;
	width: calc(96 * var(--px));
	min-width: 64px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--action);
	box-shadow: 0 3px 10px rgb(120 70 0 / 0.22);
	color: white;
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-size: calc(40 * var(--px));
	line-height: 1;
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% -50%;
	z-index: 1;
}
.step-list .num span,
.chance-list .num span {
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 32%;
	letter-spacing: 0.12em;
	margin-bottom: 0.15em;
}

.step-list .figure {
	width: 100%;
	margin-bottom: var(--m2);
	border-radius: var(--m2);
	overflow: hidden;
}
.step-list .figure img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* アイコンは丸囲みをやめ、見出しの上に単体で置く */
.step-list h3 {
	/* STEP2の見出しが長くなったので、3つとも同じだけ小さくする（30→24px） */
	font-size: calc(24 * var(--px));
	line-height: 1.4;
	color: var(--black);
}
.step-list p {
	margin-top: 0.3lh;
	font-size: var(--regular-size);
	text-align: center;
}
/* TB（768〜1199）。3枚並びのままだとカード内の文字幅が 148px しか取れず、
   PC用の <br> で入れた改行がさらに折り返して「の」「を」だけの行ができていた。
   カードの間隔と内側の余白を詰めて幅を稼ぎ、本文は少し小さくして、
   PC用の改行は外して自然に折り返させる */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.step-list {
		gap: var(--m3);
	}
	.step-list > li {
		padding-inline: var(--m);
	}
	/* 三角は詰めた間隔の中央に置き直す */
	section.outline .step-list > li:not(:last-child)::after {
		left: calc(100% + var(--m3) / 2);
	}
	.step-list h3 {
		font-size: var(--regular-size);
	}
	.step-list p {
		font-size: calc(var(--regular-size) * 0.9);
	}
	.step-list p br {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.step-list {
		flex-direction: column;
		gap: var(--m8);
	}
	.step-list > li {
		padding-top: var(--m6);
	}
	/* section.outline 付きの指定（詳細度が上）を上書きしないと、
	   縦積みにしたカードの右外に三角が残ってしまう */
	section.outline .step-list > li:not(:last-child)::after {
		left: 50%;
		top: calc(100% + var(--m4));
		rotate: 90deg;
	}
	/* 円は .vote-card .no と同じく80%に詰める。中のラベル（span）は % 指定なので連動する */
	.step-list .num,
	.chance-list .num {
		width: calc(96 * 0.8 * var(--px));
		min-width: 51px;
		font-size: calc(34 * 0.8 * var(--px));
	}
	/* STEPの番号は、縦積みにしたカードの間に立つ三角（left:50%）と重なるので左上へ逃がす */
	section.outline .step-list .num {
		left: var(--m3);
		translate: 0 -50%;
	}
}

/** 当選率アップチャンス
-------------------------------------------------------------------- */
/* もとは概要セクション内のカードだったものを独立セクションへ。
   模様背景（3枚重ね＋スクロール連動）は section.outline から移設した */
section.chance {
	/* 白ベタ枠を載せるため、地を一段濃く。白い紙が1枚だけ置かれた状態にする */
	--bg: var(--autumn);
	padding-block: var(--m9) calc(180 * var(--px));
	background-image:
		url('../imgs/autumn/background.webp'),
		url('../imgs/autumn/background-flow.webp'),
		url('../imgs/autumn/background-bubble.webp');
	background-repeat: repeat-y;
	background-size: 100%;

	transform-origin: top;
	animation: background-progress linear;
	animation-timeline: scroll();
}
@keyframes background-progress {
	from { background-position: center 0%, center 0%, center -5%; }
	to   { background-position: center 65%, center -35%, center 55%; }
}
@media screen and (max-width: 767px) {
	section.chance {
		background-image:
			url('../imgs/autumn/background@sp.webp'),
			url('../imgs/autumn/background-flow@sp.webp'),
			url('../imgs/autumn/background-bubble@sp.webp');
		animation: none;
		animation-timeline: unset;
	}
}

/* コロモ替えとはの .about-body と同じ作法で、中身をまるごと白ベタの枠に入れる。
   白 × #ffe685 は 1.24:1 しかないので、面を分けているのは影だけ。消さないこと。
   枠線や額縁リングは足さない（既存サイトは「ふんわりした影」で面を分ける語彙） */
.chance-body {
	position: relative;
	padding: var(--m6) var(--m5) var(--m5);   /* 上だけ増やして吹き出しの居場所を作る */
	border-radius: var(--m4);
	background: var(--white);
	box-shadow: var(--m2) var(--m2) 6px 0 rgb(120 70 0 / 0.16);
}
/* 見出しの吹き出しを枠の上辺にまたがせて「タブ」にする。
   キユーピー・グリコが「見出し＝色ベタ帯、本文＝白面」で章を作っていたのと同じ役割を、
   既存の斜め吹き出し（三角しっぽ付き）を動かすだけで作る */
section.chance .section-header .headline .accent {
	color: var(--autumn-strong);
}
section.chance .section-header .subline,
section.chance .section-header .subline::after {
	/* 黄色の地に載るので、吹き出しは赤（--red）で抜く */
	background: var(--red);
}
section.chance .section-header .subline {
	font-size: calc(30 * var(--px));
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% -55%;
	margin: 0;
	z-index: 2;
}
section.chance .section-header {
	margin-bottom: var(--m5);
}
@media screen and (max-width: 767px) {
	.chance-body {
		padding: var(--m4) var(--m3) var(--m3);
		border-radius: var(--m3);
		box-shadow: var(--m) var(--m) 6px 0 rgb(120 70 0 / 0.16);
	}
	section.chance {
		padding-block: var(--m8);
	}
	section.chance .section-header .subline {
		position: static;
		translate: none;
		margin: 0 auto var(--m4);
		font-size: calc(18 * var(--px));
	}
	/* 見出しは1行目「Instagramでのアクションで」だけで 341px 必要だったので、
	   2行で収まる大きさまで落とす（22px で 289px） */
	section.chance .section-header .headline {
		font-size: calc(22 * var(--px));
	}
	/* 主役の「当選確率が上がります。」だけ大きく見せる */
	section.chance .section-header .headline .accent {
		font-size: calc(var(--huge-size) * 1.2);
	}
}

.chance-list {
	display: flex;
	align-items: stretch;
	gap: var(--m5);
}
.chance-list > li {
	flex: 1;
	min-width: 0;          /* flex アイテムが内容幅で膨らむのを防ぐ */
	margin-top: 0;
	padding: var(--m4) var(--m3);
	border-radius: var(--m2);
	/* 白ベタ枠の中なので、カード自体は淡い地で面を分ける */
	background: var(--autumn-bg);
	box-shadow: none;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
}
/* 番号。section#outline の .num と同じ意匠で、地だけ --red にする。
   ラベルは「アクション」（5字）なので、STEP より小さく詰めて円に収める */
.chance-list .num {
	background: var(--red);
}
.chance-list .num span {
	font-size: 28%;
	letter-spacing: 0.02em;
}
/* STEP1 と STEP2 のあいだに「OR」を置く（どちらか一方で口数が加算される） */
.chance-list > li:not(:last-child)::after {
	content: "OR";
	/* いったん非表示。戻すときは display を block に */
	display: none;
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-size: max(20px, calc(32 * var(--px)));
	line-height: 1;
	color: var(--ink-orange);
	position: absolute;
	left: calc(100% + var(--m2) + var(--mh));
	top: 50%;
	translate: -50% -50%;
}
.chance-list .count {
	display: block;
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-size: calc(88 * var(--px));   /* 主役はここ。口数を大きく見せる */
	line-height: 1;
	color: var(--action);
	letter-spacing: -0.02em;
}
.chance-list .count .unit {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 42%;
	margin-left: 0.1em;
}
.chance-list .count .plus {
	font-size: 62%;
}
.chance-list h3 {
	margin-top: 0.3lh;
	margin-bottom: var(--m3);
	/* STEP2 はアクションを2つまとめた長い見出しになったので、2枚とも小さくする（1500wで18px）。
	   改行位置は HTML の <br> で揃える */
	font-size: calc(var(--medium-size) * 0.86);
	line-height: 1.4;
	color: var(--black);
}

/* ---- Instagram のUIを模した図解 ---- */
.chance-list .mock {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--m3) var(--m) var(--m);
	border-radius: var(--m);
	background: var(--white);
	position: relative;
}
.chance-list .mock .glyph {
	width: calc(46 * var(--px));
	min-width: 32px;
	height: auto;
	border-radius: calc(11 * var(--px));
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% -50%;
}

/* ① フォロー：プロフィール行 */
.mock-follow .profile {
	width: calc(300 * var(--px));
	max-width: 100%;
	min-height: calc(240 * var(--px));
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;     /* アイコン＋アカウント名を横方向の中央に */
	align-content: center;       /* 折り返した2行ぶんを縦方向の中央に */
	gap: var(--ms);
	padding: var(--m);
	border-radius: var(--ms);
	background: white;
	box-shadow: 0 1px 4px rgb(120 70 0 / 0.12);
	text-align: center;
}
/* 以降の #fa7e1e/#d62976/#962fbf/#0095f6/#0064a8 は Instagram のブランド色。
   サイトのパレット外なのでトークン化せず、そのまま使う */
.mock-follow .avatar {
	flex-shrink: 0;
	width: calc(56 * var(--px));
	min-width: 44px;
	height: auto;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(45deg, #fa7e1e, #d62976 55%, #962fbf);
}
.mock-follow .account {
	min-width: 0;
	overflow: hidden;
	line-height: 1.35;
	text-align: left;   /* 名前と肩書きは左端を揃える */
}
.mock-follow .account b {
	display: block;
	font-size: var(--regular-size);
	color: var(--black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mock-follow .account span {
	display: block;
	font-size: var(--small-size);
	color: var(--ink-soft);
	white-space: nowrap;
}
.mock-follow .follow-btn {
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	padding-block: 0.35lh;
	padding-inline: 0.7ic;
	border-radius: 8px;
	background: #0095f6;
	color: white;
	font-size: var(--regular-size);
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
@media (any-hover: hover) {
	.mock-follow .follow-btn:hover {
		background: #0077c8;
	}
}
.mock-follow .follow-btn svg.icon {
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	fill: white;
}

/* ② レシピ投稿：投稿カード＋ハッシュタグ */
.mock-post .post {
	border-radius: var(--ms);
	background: white;
	box-shadow: 0 1px 4px rgb(120 70 0 / 0.12);
	overflow: hidden;
}
.mock-post .photo {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.mock-post .caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	padding: var(--ms) var(--m);
	font-size: var(--regular-size);
	line-height: 1.4;
}
.mock-post .caption b {
	color: #0064a8;
}


@media screen and (max-width: 767px) {
	.chance-list {
		flex-direction: column;
		/* STEP番号の円（直径96・半分がカードの上にはみ出す）と「OR」のぶん、間を広く取る。
		   カード間 = 余白12 ＋ OR 32 ＋ 余白12 ＋ 円の半分48 */
		gap: calc(104 * var(--px));
		/* 見出しの下余白と相殺されるので、円の半分＋12 をここで持つ */
		margin-top: calc(60 * var(--px));
	}
	.chance-list > li {
		padding-top: calc(60 * var(--px));   /* 円の半分48＋12 */
	}
	.chance-list .num span {
		font-size: 32%;   /* 数字が小さくなるぶん、ラベルの比率を戻す */
	}
	/* common.css の SP 用 justify が効いて左寄せになるので、中央に戻す */
	.chance-list .num,
	.chance-list .count {
		text-align: center;
	}
	/* 見出しの下に、次の .mock からはみ出すグリフ（直径46・半分が上に出る）ぶんの
	   余白を取る。--m3（18px）では 5px 重なっていた */
	.chance-list h3 {
		margin-bottom: var(--m6);
	}
	.chance-list > li:not(:last-child)::after {
		left: 50%;
		top: calc(100% + 28 * var(--px));    /* 余白12＋ORの半分16 */
	}
	.mock-follow .profile {
		gap: var(--m);
		padding: var(--m);
	}
	/* SP は横幅が足りないので、フォローボタンを次の行に送る */
	.mock-follow .account b {
		font-size: var(--regular-size);
	}
	.mock-follow .account span {
		font-size: var(--small-size);
	}
	.mock-follow .follow-btn {
		font-size: var(--regular-size);
	}
}

/** 計算式の小見出し
-------------------------------------------------------------------- */
.chance-formula-title {
	margin-top: var(--m5);
	font-size: calc(var(--medium-size) * 1.2);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--ink-orange);
}
.chance-formula-title b {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-size: 1.5em;
	line-height: 1;
	letter-spacing: -0.02em;
	vertical-align: -0.08em;
	margin-inline: 0.08em;
	color: var(--action);
}
.chance-formula-title + .chance-formula {
	margin-top: var(--m2);
}


/** 補足の計算式
	「最大4口」は主役ではなく、2つのアクションの結果としてここで示す
-------------------------------------------------------------------- */
.chance-formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4ic 0.8ic;
	margin-top: var(--m5);
	padding: var(--m2) var(--m3);
	border-radius: var(--m);
	background: var(--autumn-bg);
	font-size: var(--medium-size);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.chance-formula b {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-size: 1.7em;
	line-height: 1;
	letter-spacing: -0.02em;
	vertical-align: -0.08em;
	margin-inline: 0.08em;
	color: var(--action);
}
.chance-formula i {
	font-style: normal;
	color: var(--ink-soft);
}
.chance-formula strong {
	padding: 0.25lh 1ic;
	border-radius: var(--mh);
	background: var(--action);
	color: var(--white);
	font-weight: 700;
}
.chance-formula strong b {
	color: var(--white);
}
/* ひとまとまりのアクション。strong と同じ形の枠で、地は薄い墨 */
.chance-formula .set {
	display: inline-block;
	padding: 0.25lh 1ic;
	border-radius: var(--mh);
	background: rgb(0 0 0 / 0.05);
}
@media screen and (max-width: 767px) {
	.chance-formula {
		font-size: var(--small-size);
	}
}

/** カード内の補助テキスト
-------------------------------------------------------------------- */
.chance-cta {
	margin-top: var(--m3);
}
.chance-cta .button {
	margin-inline: auto;
}
@media screen and (max-width: 767px) {
	/* 「@nisshin_oillio をフォロー」はアイコンを含めて 18px で 294px 必要。
	   ボタンの文字が入る幅は 230px しかないので、収まる大きさまで落とす */
	.chance-cta .button {
		font-size: calc(var(--regular-size) * 0.9);
	}
}
.chance-cta .icon {
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.4em;
	fill: currentColor;
	vertical-align: -0.2em;
}
.chance-note {
	margin-top: var(--m3);
	font-size: var(--regular-size);
	line-height: 1.7;
}
.chance-note b {
	color: var(--ink-orange);
}
.chance-sub {
	margin-top: var(--m);
	font-size: var(--small-size);
	color: var(--ink-soft);
}

.chance details {
	margin-top: var(--m3);
	border-radius: var(--m);
	background: white;
}
.chance summary {
	padding: 0.6lh 1ic;
	font-weight: 700;
	color: var(--black);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5ic;
	display: none;
}
.chance summary::-webkit-details-marker {
	display: none;
}
.chance summary::after {
	display: block;
	width: 0.5em;
	height: 0.5em;
	margin-left: auto;
	border-right: 2px solid var(--ink-orange);
	border-bottom: 2px solid var(--ink-orange);
	rotate: 45deg;
	transition: var(--transition);
}
.chance details[open] summary::after {
	rotate: -135deg;
}
.chance details .body {
	padding: 0 1ic 0.8lh;
	font-size: var(--small-size);
}
.chance details ol {
	list-style: decimal;
	padding-left: 1.5ic;
}


/* ====================================================================
	レシピ投票
==================================================================== */
section.vote {
	--bg: var(--spring-bg);
	color: var(--black);
	/* 下の余白は各季節ブロックが持つ。
	   ここに padding を残すとオレンジの帯が最後の季節ブロックの下に出る */
	padding-block: var(--m) 0;
}
section.vote .wrap {
	z-index: 2;
}
/* 吹き出しは赤地＋白文字。三角（::after）も同色に揃える */
section.vote .section-header .subline {
	background: var(--subline-bg);
	color: var(--white);
}
section.vote .section-header .subline::after {
	background: var(--subline-bg);
}
section.vote .section-header {
	margin-bottom: var(--m4);
}
section.vote .section-header .headline {
	font-size: calc(var(--huge-size) * 1.15);
	color: var(--black);
}
@media screen and (max-width: 767px) {
	/* 1.15倍（29.9px）だと「コロモ替えレシピに投票！」に 359px 必要で、
	   枠（339px）に収まらず「票！」だけが次行に落ちていた */
	section.vote .section-header .headline {
		font-size: calc(var(--huge-size) * 1.05);
	}
	section.vote {
		margin-top: var(--m8);
	}
}
section.vote .section-header .lead {
	font-weight: 700;
	color: var(--black);
}

.vote-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--m3) var(--m);
}
/* TB（768〜1199）。4列のままだとカードが 162px しかなく、レシピ名が1行6文字で
   「チーズインス／ナップえん／どうの…」と5行に割れていた。
   幅なりに列数が決まるようにして、PC（1行11文字前後）と同じ読み心地にそろえる
   （768で2列／1024で3列／1199で4列） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.vote-list {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
}
@media screen and (max-width: 767px) {
	.vote-list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--m2);
	}
	.vote-card .nav-vote {
		padding-inline: 0.3ic;
		font-size: var(--small-size);
		/* 内側のリングをやめるので、そのぶんの上の3pxの寄せも戻す */
		padding-block: 0.3lh;
	}
	.vote-card .nav-vote::after {
		display: none;
	}
}

.vote-list > li {
	display: flex;
	margin-top: 0;
}
.vote-card {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-radius: var(--m);
	background: white;
	box-shadow: 0 var(--ms) var(--m) 0 rgb(120 60 0 / 0.18);
	position: relative;          /* 番号バッジの基準。はみ出させるので overflow は切らない */
}
.vote-card .image {
	aspect-ratio: 780 / 560;
	border-radius: var(--m) var(--m) 0 0;
	overflow: hidden;
}
/* 品数が決まっていない冬の枠。画角だけ確定させたグレーの仮置き */
.vote-card .image.is-placeholder {
	background: var(--gray);
}
@media screen and (max-width: 767px) {
	/* SP は @sp（縦位置）画像をスクエアで見せる。
	   基本指定より後ろに置かないと打ち消されてしまう */
	.vote-card .image {
		aspect-ratio: 1 / 1;
	}
}
.vote-card .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 番号は季節色の丸。カード上端の中央で、上半分がはみ出す */
.vote-card .no {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(92 * var(--px));
	min-width: 64px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid var(--white);
	background: var(--season-strong, var(--red));
	box-shadow: 0 3px 8px rgb(120 60 0 / 0.22);
	color: var(--white);
	font-size: var(--small-size);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% -50%;
	z-index: 2;
}
.vote-card .no .num {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-size: 2.55em;
	line-height: 1;
	letter-spacing: -0.02em;
}
@media screen and (max-width: 767px) {
	/* SPは丸を80%に詰める。文字も同じ割合で落として、
	   丸の枠と文字のあいだの余白の見え方を PC と同じに保つ
	   （数字は em 指定なので、親の font-size に連動して一緒に縮む） */
	.vote-card .no {
		width: calc(92 * 0.8 * var(--px));
		min-width: 51px;
		font-size: calc(var(--small-size) * 0.8);
	}
}
.vote-card .text {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--m2);
}
.vote-list > li {
	padding-top: calc(36 * var(--px));   /* はみ出すバッジのぶん */
}
/* 写真もレシピページへのリンク。読み上げと Tab は名前のリンク1本に任せる */
.vote-card .image-link {
	display: block;
}
.vote-card h3 {
	font-size: var(--regular-size);
	line-height: 1.6;
	color: var(--black);
}
.vote-card h3 a {
	font-size: calc(var(--regular-size) * 1.25);
	color: inherit;
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
/* レシピ名の語末に右向きの矢印。本サイトのレシピページへ飛ぶことを示す。
   丸は枠線なしで、地は季節色を薄くしたもの（本サイトの --{季節}-pale）。
   inline-block なのでリンクの下線は掛からない */
.vote-card h3 .icon-arrow {
	width: 1.3em;
	height: 1.3em;
	margin-left: 0.25em;
	border-radius: 50%;
	background: var(--season-pale, var(--autumn-pale));
	vertical-align: -0.3em;
}
@media (any-hover: hover) {
	.vote-card h3 a:hover {
		color: var(--ink-orange);
		text-decoration-color: currentColor;
	}
}
.vote-card .tags {
	margin-top: 0.5lh;
	margin-bottom: var(--m2);
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
}
/* 本サイトのレシピページと同じ「囲み」のタグ。地色はボタンより薄く */
.vote-card .tags span {
	padding-block: 0.1lh;
	padding-inline: 0.7ic;
	border-radius: 3px;
	background: color-mix(in srgb, var(--autumn-pale), var(--white) 45%);
	color: var(--ink-orange);   /* color-mix(in srgb, var(--autumn-pale), var(--white) 45%) 上で 4.7:1（AA） */
	font-size: var(--small-size);
	font-weight: 700;
	line-height: 1.5;
}
.vote-card .nav-vote {
	--button-bg:       var(--season-strong, var(--action));
	--button-hover-bg: var(--season-strong-hover, var(--action-hover));
	width: 100%;
	margin-top: auto;
	font-size: var(--regular-size);
	border-radius: 8px;
}
.vote-card .nav-vote::after {
	border-radius: 8px;
}
.vote-card .nav-recipe {
	margin-top: 0.5lh;
	font-size: var(--small-size);
	color: var(--ink-orange);
	text-align: center;
	text-decoration: underline;
}
@media (any-hover: hover) {
	.vote-card .nav-recipe:hover {
		text-decoration: none;
	}
}

/* 下向きの矢印を丸で囲む */
.icon-chevron {
	display: inline-grid;
	place-items: center;
	width: 1lh;
	height: 1lh;
	margin-left: 0.5ic;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.18);
	box-shadow: inset 0 0 0 1.5px currentColor;
	vertical-align: middle;
}
.icon-chevron::before {
	display: block;
	width: 0.42em;
	height: 0.42em;
	margin-top: -0.16em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	rotate: 45deg;
}

/* ====================================================================
	季節ブロック（春／夏／秋）

	本サイトトップ htdocs/css/top.css の .season-block と同じ作法。
	トップは top.css を読み込むが、このLPは読み込まないため同名クラスで
	再実装している。カードのデザインは統一のまま、
	下地・見出し・漢字の透かしだけで季節のエリアを区切る。
==================================================================== */
.season-block {
	padding-block: var(--m6);
	background-color: var(--bg);
	background-repeat: repeat-y;
	background-size: 100%;
	position: relative;
	/* トップと同じ下端のビネット */
	box-shadow: inset 0 calc(-1 * var(--m6)) 60px 0 rgb(0 0 0 / 0.05);

	/* トップと同じ移動量・移動比（1 : -0.54）。
	   overflow は指定しない ―― clip を付けると scroll() が自分自身を
	   スクロールコンテナとみなしてタイムラインが無効になる */
	--bg-travel: calc(480 * var(--px));
	transform-origin: top;
	animation: season-background-progress linear;
	animation-timeline: scroll();
}
@keyframes season-background-progress {
	from {
		background-position:
			center 0,
			center 0;
	}
	to {
		background-position:
			center var(--bg-travel),
			center calc(var(--bg-travel) * -0.54);
	}
}
.season-block .wrap {
	z-index: 1;   /* 漢字の透かし（z-index:0）より手前 */
}

.season-block.spring {
	padding-top: 0;
	--bg:            var(--spring-bg);
	--heading-color: var(--spring-strong);
	/* 本サイト top.css と同じ考え方で、カードのボタン・番号も季節の色にする */
	--season-strong:       var(--spring-strong);
	--season-strong-hover: var(--spring-strong-hover);
	--season-pale:         var(--spring-pale);
	background-image:
		url('../imgs/spring/background.webp'),
		url('../imgs/spring/background-flow.webp');
}
.season-block.summer {
	--bg:            var(--summer-bg);
	--heading-color: var(--summer-strong);
	/* 本サイト top.css と同じ考え方で、カードのボタン・番号も季節の色にする */
	--season-strong:       var(--summer-strong);
	--season-strong-hover: var(--summer-strong-hover);
	--season-pale:         var(--summer-pale);
	background-image:
		url('../imgs/summer/background.webp'),
		url('../imgs/summer/background-flow.webp');
}
.season-block.autumn {
	--bg:            var(--autumn-bg);
	--heading-color: var(--autumn-strong);
	/* 本サイト top.css と同じ考え方で、カードのボタン・番号も季節の色にする */
	--season-strong:       var(--autumn-strong);
	--season-strong-hover: var(--autumn-strong-hover);
	--season-pale:         var(--autumn-pale);
	background-image:
		url('../imgs/autumn/background.webp'),
		url('../imgs/autumn/background-flow.webp');
}
.season-block.winter {
	--bg:            var(--winter-bg);
	--heading-color: var(--winter-strong);
	/* 本サイト top.css と同じ考え方で、カードのボタン・番号も季節の色にする */
	--season-strong:       var(--winter-strong);
	--season-strong-hover: var(--winter-strong-hover);
	--season-pale:         var(--winter-pale);
	background-image:
		url('../imgs/winter/background.webp'),
		url('../imgs/winter/background-flow.webp');
}

/** 見出し */
.season-header {
	margin-bottom: var(--m3);
	text-align: center;
}
.season-heading {
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	font-size: var(--huge-size);
	line-height: 1.4;
}
.season-heading strong {
	color: var(--heading-color, var(--black));
	font-weight: 400;
}

/** 季節の漢字（透かし） */
.season-block .type-season {
	max-width: none;
	width: calc(230 * var(--px));
	height: auto;
	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 {
		padding-block: var(--m5);
		/* 本サイトと同様、SPではスクロール連動を止める */
		animation: none;
		animation-timeline: unset;
	}
	.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');
	}
	.season-block.winter {
		background-image:
			url('../imgs/winter/background@sp.webp'),
			url('../imgs/winter/background-flow@sp.webp');
	}
	.season-heading {
		font-size: calc(26 * var(--px));
	}
	.season-block .type-season {
		width: calc(120 * var(--px));
		left: calc(-14 * var(--px));
		top: calc(30 * var(--px));
	}
}


/* ====================================================================
	応募フォーム
==================================================================== */
/* 直前の秋ブロックが --autumn-bg ＋ 秋模様なので、
   同じ地色・同じ模様だと境目が消える。ここは模様を使わず一段濃い無地にする */
section.entry {
	--bg: var(--autumn-pale);
	/* 上端は弧（.arc-concave の ::before）で受けるので、上の余白は 0 */
	padding-block: 0 var(--m8);
}
.entry-form {
	max-width: calc(900 * var(--px));
	margin-inline: auto;
	padding: var(--m5) var(--m5) var(--m4);
	border-radius: var(--m4);
	background: white;
	box-shadow: var(--m) var(--m) 6px 0 rgb(120 70 0 / 0.1);
}
@media screen and (max-width: 767px) {
	.entry-form {
		padding: var(--m4) var(--m3);
	}
}

.entry-form dl {
	display: flex;
	align-items: flex-start;
	gap: var(--m3);
	padding-block: var(--m2);
	border-bottom: 1px solid var(--edge-soft);
}
.entry-form dl:first-of-type {
	border-top: 1px solid var(--edge-soft);
}
.entry-form dt {
	flex-shrink: 0;
	width: calc(230 * var(--px));
	padding-top: 0.35lh;
	font-weight: 700;
	color: var(--black);
	line-height: 1.6;
}
.entry-form dd {
	flex: 1;
	min-width: 0;
}
@media screen and (max-width: 767px) {
	.entry-form dl {
		flex-direction: column;
		align-items: stretch;   /* 縦積み時は入力欄を横いっぱいに */
		gap: var(--m);
	}
	.entry-form dt {
		width: 100%;
		padding-top: 0;
	}
}

.entry-form .badge {
	display: inline-block;
	margin-left: 0.5ic;
	padding-inline: 0.6ic;
	border-radius: 4px;
	font-size: var(--small-size);
	font-weight: 700;
	line-height: 1.7;
	vertical-align: 0.1em;
}
.entry-form .badge.required {
	background: var(--action);
	color: white;
}
.entry-form .badge.optional {
	background: color-mix(in srgb, var(--autumn-pale), var(--white) 55%);
	color: var(--ink-soft);
}

/* :where() で詳細度を上げず、下の select 個別指定を効かせる */
.entry-form :where(input[type="text"], input[type="email"], input[type="tel"], select) {
	width: 100%;
	padding: 0.5lh 0.8ic;
	border: 1px solid var(--edge);
	border-radius: 8px;
	background: var(--autumn-bg);
	font-size: var(--regular-size);
	font-family: inherit;
	line-height: 1.6;
	color: var(--text);
}
.entry-form input::placeholder {
	color: var(--ink-soft);
}
.entry-form dd select {
	appearance: none;
	padding-right: 2.2ic;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink-orange) 50%), linear-gradient(135deg, var(--ink-orange) 50%, transparent 50%);
	background-position: right 1.1ic top 52%, right 0.75ic top 52%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}
.entry-form .hint {
	margin-top: 0.3lh;
	font-size: var(--small-size);
	color: var(--ink-soft);
}
.entry-form .row {
	display: flex;
	gap: var(--m2);
	flex-wrap: wrap;
}
.entry-form .row .zip {
	width: calc(200 * var(--px));
	min-width: 140px;
}

/* 投票レシピのプルダウンは最重要項目なので強調 */
.entry-form dl.is-primary {
	background: color-mix(in srgb, var(--autumn-pale), var(--white) 55%);
	border-radius: var(--m);
	border-bottom-color: transparent;
	padding-inline: var(--m2);
	margin-bottom: var(--m);
}
.entry-form dl.is-primary select {
	border-color: var(--action);
	border-width: 2px;
	background-color: white;
	font-weight: 700;
}
.entry-form select.is-just-set {
	animation: recipe-set 1.6s ease-out;
}
@keyframes recipe-set {
	0%, 60% { box-shadow: 0 0 0 4px rgb(255 102 0 / 0.35); }
	100%    { box-shadow: 0 0 0 4px rgb(255 102 0 / 0); }
}

/* メールシステムからエラーで戻ったときの通知（フォームの先頭） */
.entry-form .form-error {
	margin-bottom: var(--m3);
	padding: 0.6lh 1ic;
	border: 2px solid var(--action);
	border-radius: 8px;
	background: color-mix(in srgb, var(--action), var(--white) 90%);
	font-weight: 700;
	color: var(--black);
}

/* 応募規約。枠の高さを抑えて一部だけ見せ、残りは枠の中をスクロールして読む */
.entry-form .terms {
	margin-top: var(--m4);
}
.entry-form .terms-title {
	margin-bottom: var(--m);
	font-size: var(--medium-size);
	font-weight: 700;
	text-align: center;
	color: var(--black);
}
.entry-form .terms-body {
	height: calc(240 * var(--px));
	min-height: 180px;
	overflow-y: auto;
	padding: var(--m2) var(--m3);
	border: 2px solid var(--edge);
	border-radius: var(--m);
	background: var(--white);
	font-size: calc(var(--regular-size) * 0.875);
	line-height: 1.8;
}
.entry-form .terms-body:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}
.entry-form .terms-body h4 {
	margin-top: 1lh;
	font-weight: 700;
	color: var(--ink-orange);
}
.entry-form .terms-body h4:first-child {
	margin-top: 0;
}
/* 規約の段落は1行ずつ短いので、common.css の段落間 1lh を詰める */
.entry-form .terms-body :is(p, ul, ol) + :is(p, ul, ol),
.entry-form .terms-body li + li {
	margin-top: 0.2lh;
}
.entry-form .terms-body h4 + :is(p, ul, ol) {
	margin-top: 0.2lh;
}
/* 「・」「※」「(1)」は1字ぶん下げて、2行目以降の頭を揃える */
.entry-form .terms-body ul > li,
.entry-form .terms-body .note {
	padding-left: 1em;
	text-indent: -1em;
}
.entry-form .terms-body ul > li::before {
	content: "・";
}
.entry-form .terms-body ol > li {
	padding-left: 2.2em;
	text-indent: -2.2em;
}
.entry-form .terms-body a {
	color: var(--ink-orange);
	text-decoration: underline;
	word-break: break-all;
}
/* スクロールバーを常に見せ、続きがあることを伝える（Firefox は下の @supports） */
.entry-form .terms-body::-webkit-scrollbar {
	width: 8px;
}
.entry-form .terms-body::-webkit-scrollbar-track {
	margin-block: var(--m);
	border-radius: 4px;
	background: var(--autumn-pale);
}
.entry-form .terms-body::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--action);
}
@supports not selector(::-webkit-scrollbar) {
	.entry-form .terms-body {
		scrollbar-width: thin;
		scrollbar-color: var(--action) var(--autumn-pale);
	}
}

.entry-form .agreement {
	margin-top: var(--m4);
	text-align: center;
}
.entry-form .agreement label {
	display: inline-flex;
	align-items: center;
	gap: 0.5ic;
	font-weight: 700;
	color: var(--black);
	cursor: pointer;
}
.entry-form .agreement input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.4em;
	height: 1.4em;
	border: 2px solid var(--action);
	border-radius: 5px;
	background: white;
	position: relative;
	cursor: pointer;
}
.entry-form .agreement input[type="checkbox"]:checked {
	background: var(--action);
}
.entry-form .agreement input[type="checkbox"]:checked::before {
	display: block;
	width: 30%;
	height: 58%;
	border-right: 2.5px solid white;
	border-bottom: 2.5px solid white;
	rotate: 45deg;
	position: absolute;
	left: 50%;
	top: 44%;
	translate: -60% -50%;
}
.entry-form .agreement a {
	color: var(--ink-orange);
	text-decoration: underline;
}

.entry-form .submit {
	margin-top: var(--m3);
	margin-inline: auto;
	border: none;
	font-family: inherit;
}

/* reCAPTCHA の右下のマークは隠し、代わりに送信ボタンの下に表記を置く
   （先方の希望・2026/10/6。Google の FAQ で認められた方法なので、表記の .recaptcha-note は消さないこと） */
.grecaptcha-badge {
	visibility: hidden;
}
.entry-form .recaptcha-note {
	margin-top: var(--m2);
	font-size: var(--small-size);
	color: var(--ink-soft);
	text-align: center;
	text-wrap: balance;
}
.entry-form .recaptcha-note a {
	color: inherit;
	text-decoration: underline;
}


/* ====================================================================
	お問い合わせ
==================================================================== */
section.contact {
	--bg: var(--autumn);
	padding-block: var(--m8);
}
.contact-card {
	max-width: 760px;
	margin-inline: auto;
	padding: var(--m4) var(--m5);
	border-radius: var(--m3);
	background: var(--white);
	box-shadow: var(--m) var(--m) 6px 0 rgb(120 70 0 / 0.12);
}
.contact-office {
	font-size: var(--medium-size);
	font-weight: 700;
	text-align: center;
	color: var(--black);
}
.contact-info {
	margin-top: var(--m3);
}
.contact-info > div {
	display: flex;
	gap: var(--m3);
	padding-block: 0.5lh;
	border-top: 1px solid var(--edge-soft);
}
.contact-info > div:last-child {
	border-bottom: 1px solid var(--edge-soft);
}
.contact-info dt {
	flex: none;
	width: 6ic;
	font-weight: 700;
	color: var(--ink-orange);
}
.contact-info dd {
	flex: 1;
	min-width: 0;
	word-break: break-all;
}
.contact-info a {
	color: var(--ink-orange);
	text-decoration: underline;
}
.contact-notes {
	margin-top: var(--m3);
}
.contact-notes h3 {
	font-weight: 700;
	color: var(--black);
}
.contact-notes p {
	margin-top: 0.3lh;
	font-size: calc(var(--regular-size) * 0.875);
	color: var(--ink-soft);
}
@media screen and (max-width: 767px) {
	.contact-card {
		padding: var(--m3);
	}
	.contact-info > div {
		display: block;
	}
	.contact-info dt {
		width: auto;
	}
}


/* ====================================================================
	応募完了（thanks.html）
==================================================================== */
section.thanks {
	--bg: var(--autumn-pale);
}
.thanks-card {
	max-width: 760px;
	margin-inline: auto;
	padding: var(--m5);
	border-radius: var(--m4);
	background: var(--white);
	box-shadow: var(--m) var(--m) 6px 0 rgb(120 70 0 / 0.12);
	text-align: center;
}
.thanks-card .subline {
	margin-inline: auto;
}
.thanks-card h1 {
	margin-top: var(--m2);
	font-size: var(--huge-size);
	line-height: 1.4;
	color: var(--black);
}
.thanks-card .text {
	margin-top: var(--m3);
	line-height: 1.9;
}
.thanks-card .text p + p {
	margin-top: 0.5lh;
}
.thanks-card .note {
	margin-top: var(--m3);
	padding: var(--m2) var(--m3);
	border-radius: var(--m2);
	background: var(--autumn-bg);
	font-size: var(--small-size);
	text-align: left;
}
.thanks-card .note a {
	color: var(--ink-orange);
	text-decoration: underline;
}
.thanks-back {
	margin-top: var(--m4);
}
.thanks-back .button {
	margin-inline: auto;
}
/* 本サイトへの導線（「コロモ替えとは」と同じキャプチャとボタンを縦に並べる） */
.thanks-lp {
	margin-top: var(--m5);
}
.thanks-lp .capture {
	margin-inline: auto;
}
.thanks-lp .nav-lp {
	margin: var(--m3) auto 0;
}
@media screen and (max-width: 767px) {
	.thanks-card {
		padding: var(--m4) var(--m3);
	}
	.thanks-card h1 {
		font-size: calc(26 * var(--px));
	}
	.thanks-card .text {
		text-align: left;
	}
}


/* ====================================================================
	フッター
==================================================================== */
footer {
	background: var(--footer-bg);
}
.footer-logo .nav-corporate {
	width: calc(150 * var(--px));
	min-width: 104px;
}
.footer-copyright::before {
	margin-block: var(--m3);
}


/* ====================================================================
	追従CTA（画面下に固定。PC・SP共通）
	ヘッダー（ロゴ＋応募ボタン）は 2026/9/17 先方指示で削除し、応募ボタンをここへ移した。
	ロゴは FV に入れる予定
==================================================================== */
:root {
	/* バーの高さ。ページ末尾がバーに隠れないよう、body の下余白にも使う */
	--cta-bar-height: max(64px, calc(84 * var(--px)));
}
.sticky-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--cta-bar-height) + env(safe-area-inset-bottom));
	padding: 0 var(--m3) env(safe-area-inset-bottom);
	background: var(--footer-bg);   /* 削除したヘッダーと同じ濃色 */
	box-shadow: 0 calc(-1 * var(--ms)) var(--m) 0 rgb(36 12 0 / 0.28);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
}
.sticky-cta .button {
	min-width: min(calc(480 * var(--px)), 100%);
	font-size: calc(var(--medium-size) * 1.125);
	white-space: nowrap;
}
body:has(> .sticky-cta) {
	padding-bottom: calc(var(--cta-bar-height) + env(safe-area-inset-bottom));
}
/* reCAPTCHA のバッジ（Googleが body に差し込む固定要素）。
   既定の bottom:14px だと追従CTAのバーの中に入り、バー（z-index:30）に隠れてしまう。
   バーの高さぶん持ち上げて、重ね順も一段上にする。
   bottom はGoogleがインラインstyleで書くので !important が要る */
.grecaptcha-badge {
	bottom: calc(var(--cta-bar-height) + env(safe-area-inset-bottom) + var(--m)) !important;
	z-index: 31;
}
/* バッジは body 直下ではなく、Googleが「この内容で応募する」ボタンの隣（＝フォームの中）に
   差し込む。その祖先の .wrap が z-index: 0 で重ね合わせコンテキストを作るため、
   バッジの z-index がその中に閉じ込められ、賞品（z:1）・キャンペーン概要（z:2）・
   お問い合わせ（DOM順で後）のセクションに隠れていた。
   応募フォームの .wrap だけコンテキストを作らないようにして、バッジをページ全体の
   重ね順で評価させる。position: relative は残すので、弧（::before）との前後関係は変わらない */
section.entry > .wrap {
	z-index: auto;
}
/* キーボード操作でフォーカスした要素が、バーの下に隠れないようにする */
:root:has(.sticky-cta) {
	scroll-padding-bottom: calc(var(--cta-bar-height) + env(safe-area-inset-bottom));
}
@media screen and (max-width: 767px) {
	:root {
		--cta-bar-height: calc(70 * var(--px));
	}
	.sticky-cta .button {
		width: 100%;
		/* 1行に収める（320px 幅でも折り返さない大きさ） */
		font-size: min(var(--regular-size), calc(16 * var(--px)));
	}
}