@charset "utf-8";

/* まなびレシピTOP。css/style.css（.campus の土台・メニュー・ページトップ）の上に重ねる。
   数値はカンプの座標から。
   写真やラベルを重ねて置くコラージュなので、各セクションの中身は .inner（幅1280）を基準に position で置いている */

/*=============================== 共通 =====*/
.recipe-top .inner {
	position: relative;
	width: 1280px;
	margin: 0 auto;
}

/*=============================== Campusの帯 =====*/
section.brand {
	position: relative;
	height: 97.9px;
}
/* ロゴと青い線3本は、画面の端から 1280px のときと同じだけ空ける（中央寄せにしない） */
section.brand .inner { position: static; width: auto; }
section.brand::before {
	content: "";
	position: absolute;
	left: 267.5px;
	right: 40.1px;
	top: 24.5px;
	height: 47.5px;
	background:
		linear-gradient(var(--brand-line, #1ba2de), var(--brand-line, #1ba2de)) 0 0 / 100% 2.7px no-repeat,
		linear-gradient(var(--brand-line, #1ba2de), var(--brand-line, #1ba2de)) 0 22.4px / 100% 2.7px no-repeat,
		linear-gradient(var(--brand-line, #1ba2de), var(--brand-line, #1ba2de)) 0 44.8px / 100% 2.7px no-repeat;   /* 線の色はレシピ詳細ページでカテゴリーカラーに変える */
}
section.brand .logo { position: absolute; left: 36.9px; top: 24.5px; width: 206.9px; }

/*=============================== ヒーロー =====*/
/* 写真（リード文入り）は画面幅に比例して拡大する。高さも同じ比率で伸ばし、ロゴも比率で置く。
   比率は 1280px のときの値から（高さ 630.5 / ロゴ 左38.7・上413.2・幅205） */
section.hero {
	position: relative;
	aspect-ratio: 1280 / 630.5;
	background: url(../images/study-recipes/hero.webp) no-repeat center top / 100% auto;
}
section.hero .inner { position: static; }
/* リード文は背景の写真に焼き込んである（写真が画面幅で拡大されても位置がずれないように）。
   文字は読み上げ・検索用に残し、画面には出さない */
section.hero .lead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
section.hero .logo {
	position: absolute;
	left: 3.0234%;
	top: 0;
	width: 16.016%;
	margin: 32.281% 0 0;   /* 絶対配置の margin の % は幅が基準なので、上からの位置も画面幅に比例する */
}
section.hero .logo img { width: 100%; }
/* 英語ページ（URLに /en/。js/study-recipes.js が html に .en-page を付け、ロゴを logo_en に替える）。
   写真は英語のリード文を焼き込んだ hero_en.webp。英語版カンプから切り出した範囲に置く。SPは SP の欄 */
@media screen and (min-width: 751px) {
	.en-page section.hero { background-image: url(../images/study-recipes/hero_en.webp); }
	.en-page section.hero .logo { left: 3.0078%; width: 16.094%; margin-top: 32.539%; }
}

/*=============================== レシピ（4セクション共通） =====*/
/* 位置・角度・色はセクションごとの変数ブロック（下）だけを触れば足りる */
section.recipe {
	background-color: var(--bg);
	background-repeat: no-repeat;
}
section.recipe .inner { height: var(--h); }

/* 写真。白枠8pxと影 */
section.recipe .photo {
	position: absolute;
	left: 326px;
	top: var(--photo-y);
	border: 8px solid #fff;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
}
section.recipe .photo img { width: 612px; height: 402px; }

/* ラベル（テープ状の帯）。左端に折り返しの影 */
section.recipe .label {
	position: absolute;
	left: var(--label-x);
	top: var(--label-y);
	display: flex;
	align-items: flex-start;   /* カンプの文字は帯の上から13.4px（4つとも同じ。中央より少し上） */
	padding-top: 13.4px;
	justify-content: center;
	width: var(--label-w, 258.9px);
	height: 67.3px;
	background: linear-gradient(to right, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 41.7px), var(--label);
	color: #fff;
	font-size: 24px;
	font-weight: 500;
	line-height: 35px;
	letter-spacing: var(--label-ls, .09em);
	transform-origin: 0 0;
	transform: rotate(var(--label-rot));
}

/* 手書きタイトル */
section.recipe .ttl { position: absolute; left: var(--ttl-x); top: var(--ttl-y); width: var(--ttl-w); margin: 0; }

/* 付箋と説明文。付箋は画像、説明文は文字。
   付箋はトップページと同じコマ撮りで置く（js/study-recipes.js）。回転の中心と発火の判定を付箋にするため、
   .note を付箋の画像と同じ位置・大きさの箱にし、説明文はその箱からの位置にしている（見た目の位置は変えていない）。
   箱にはCSSで transform を付けないこと（プラグインの transform とぶつかる）。レシピ詳細ページの .note（画像）には当てない */
.recipe-top section.recipe .note { position: absolute; left: var(--note-x); top: var(--note-y); width: var(--note-w); }   /* 付箋を押してもボタンと同じ動きにはしない（ボタンはボタンだけ） */
.recipe-top section.recipe .note img { width: 100%; }
.recipe-top section.recipe .note p {
	position: absolute;
	left: calc(var(--text-x) - var(--note-x));
	top: calc(var(--text-y) - var(--note-y) - 7.25px);   /* カンプは文字の上端。行送り42pxの半分の余白を引く */
	color: var(--text);
	font-size: 19px;
	font-weight: 600;
	line-height: 42px;
	letter-spacing: var(--text-ls, .16em);
	white-space: nowrap;
}

/* 詳しくレシピを見る。マウスオーバーで黄色のテープを重ねる（カンプの注記） */
section.recipe .btn { position: absolute; left: var(--btn-x); top: var(--btn-y); margin: 0; }
section.recipe .btn a {
	position: relative;
	display: block;
	width: 320.4px;
	transform-origin: 0 0;
	transform: rotate(var(--btn-rot));
}
section.recipe .btn img { width: 100%; margin: 0; }   /* style.css の .btn img（シール用の余白）を打ち消す */
section.recipe .btn img.on { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s, transform var(--press-dur); }   /* transform は押されたときの傾き（style.css の .press） */
@media (hover: hover) { section.recipe .btn a:hover img.on { opacity: 1; } }   /* マウスで乗せられる端末だけ（タッチ端末はタップした所に :hover が残る。style.css の .btn と同じ） */

/* このレシピで使った商品。白いパネルの右下がめくれている（角は画像） */
section.recipe .item {
	position: absolute;
	left: var(--panel-x, 390px);
	top: var(--panel-y);
	z-index: 0;
	width: 500px;
	height: var(--panel-h, 740px);
}
section.recipe .item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(#fff, #fff) 0 0 / 100% calc(100% - 116px) no-repeat,   /* 角の画像と2px重ねる（継ぎ目が細い線に見えないように） */
		linear-gradient(#fff, #fff) 0 100% / calc(100% - 112px) 118px no-repeat,
		url(../images/study-recipes/corner.png) 100% 100% / 114px 118px no-repeat;
	filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .3));
}
/* めくれ（角の画像の、色の付いた部分だけ。corner_flap.png）を罫線より手前に重ね、右下のマスの罫線の端をめくれの下に隠す。
   罫線の長さだけでめくれの辺に合わせると、パネルの高さ（1行ごとに302px）と商品のマス（304.5px）がずれるので、
   行数・ページによって罫線が数px足りなかったり、めくれに入り込んだりする */
section.recipe .item::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;   /* マウスオーバーで手前に出るマス（z-index: 1）より手前 */
	width: 114px;
	height: 118px;
	background: url(../images/study-recipes/corner_flap.png) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}
section.recipe .ttl2 {
	margin: 0;
	padding-top: 31.1px;
	font-size: 24px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: .07em;
	text-align: center;
	color: #000;
}
/* 見出しの左右の「＼ ／」。色はカテゴリーカラー */
section.recipe .ttl2::before,
section.recipe .ttl2::after {
	content: "";
	position: absolute;
	top: 39.7px;
	width: 12.8px;
	height: 22.5px;
	background: var(--cat);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.8 22.5'%3E%3Cline x1='11.3' y1='21' x2='1.5' y2='1.5' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.8 22.5'%3E%3Cline x1='11.3' y1='21' x2='1.5' y2='1.5' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
section.recipe .ttl2::before { left: 94px; }
section.recipe .ttl2::after { left: 393.6px; transform: scaleX(-1); }

/* 商品は2列。1マス 227×304.5（罫線どうしを1px重ねる）。罫線は角で途切れる */
section.recipe .list {
	position: absolute;
	left: 23px;
	top: 99.5px;
	display: flex;
	flex-wrap: wrap;
	width: 455px;
}
section.recipe .list li { width: 228px; height: 305.5px; margin: 0 -1px -1px 0; position: relative; }
/* 隣のマスと罫線を重ねているので、マウスオーバーしたマスを手前に出す（出さないと右・下の罫線が隣のマスの灰色に隠れる） */
section.recipe .list li:hover { z-index: 1; }
section.recipe .list a {
	--line: #bebebe;
	display: block;
	height: 100%;
	padding: 17.5px;
	color: #505050;
	background:
		linear-gradient(var(--line), var(--line)) 2.9px 0 / 221.1px 1px no-repeat,
		linear-gradient(var(--line), var(--line)) 2.9px 100% / 221.1px 1px no-repeat,
		linear-gradient(var(--line), var(--line)) 0 4.9px / 1px 294.7px no-repeat,
		linear-gradient(var(--line), var(--line)) 100% 4.9px / 1px 294.7px no-repeat;
	transition: color .3s;
}
/* マウスオーバーで文字色と罫線がカテゴリーカラーに（カンプの注記） */
section.recipe .list a:hover { --line: var(--cat); color: var(--cat); }
/* パネルの右下はめくれている（角の画像）。右下に来るマス（商品が偶数のときの最後のマス）は、右の線と下の線をめくれの外まで伸ばさない。
   背景の順は 上・下・左・右。
   線の端はめくれの色の部分の中ほど（下の線はパネルの右端から 59px・右の線はパネルの下端から 77px）にして、上の ::after のめくれで隠す。
   めくれの色の部分は、下の線の通る所で幅約25px、右の線の通る所で高さ約19px あるので、行数やページで数px ずれても端は見えない */
section.recipe .list li:last-child:nth-child(even) a { background-size: 221.1px 1px, 188.1px 1px, 1px 294.7px, 1px 256.4px; }
section.recipe .list .img-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 190px;
	background: var(--bg);
}
section.recipe .list .text {
	display: block;
	margin-top: 9.1px;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: .03em;
}
/* 商品の「NEW」の手書き（Campusの文具と同じ画像・同じ位置。写真の四角の左上。css/items.css の .item .list .new と同じ値）。
   モチ勉（TOP・詳細）で使う */
section.recipe .list .new { position: absolute; left: 28.5px; top: 23.8px; width: 91px; }
/* Campusの文具の写真（白地の JPG）を使っているマスは、乗算で四角の地の色になじませる（Campusの文具と同じ。ほかの商品の写真は透過の PNG・WebP なので当てない） */
section.recipe .list .img-box img[src$=".jpg"] { mix-blend-mode: multiply; }

/*=============================== レシピごとの数値 =====*/
/* x はページの左端から、y はセクションの上端から。背景の罫線は画面の端から約40px空ける */
section.memo {
	--h: 1600.4px; --bg: #fcebee; --cat: #e87a90; --label: #c14566; --text: #842c3e;
	--photo-y: 71.4px;
	--label-x: 300px;   --label-y: 123.6px; --label-rot: -5.10deg;
	--ttl-x: 863.5px;   --ttl-y: 58.2px;    --ttl-w: 314px;
	--note-x: 572px;    --note-y: 435.1px;  --note-w: 362px;
	--text-x: 628.4px;  --text-y: 502.5px;
	--btn-x: 352.5px;   --btn-y: 629.9px;   --btn-rot: 7.63deg;
	--panel-y: 775.4px;
	background-image: repeating-linear-gradient(to bottom, #fff 0 2.5px, transparent 2.5px 39.813px);
	background-position: 39.9px 40.55px;
	background-size: calc(100% - 80px) 1515.4px;
}
section.choko {
	--h: 1673px; --bg: #dbf4f3; --cat: #0cb4ad; --label: #007a63; --text: #0d5e54;
	--photo-y: 118.1px;
	--label-x: 292px;   --label-y: 140.7px; --label-rot: 4.86deg; --label-ls: .08em;
	--ttl-x: 93.9px;    --ttl-y: 219.7px;   --ttl-w: 344px;
	--note-x: 368.8px;  --note-y: 494.8px;  --note-w: 363.1px;
	--text-x: 430.5px;  --text-y: 543px;
	--btn-x: 656.1px;   --btn-y: 678.6px;   --btn-rot: -8.34deg;
	--panel-y: 830.6px;
	/* 方眼 */
	background-image:
		repeating-linear-gradient(to bottom, #fff 0 2.5px, transparent 2.5px 40.489px),
		repeating-linear-gradient(to right, #fff 0 2.5px, transparent 2.5px 40.614px);
	background-position: 39.7px 65.95px, 70.35px 33.5px;
	background-size: calc(100% - 79.5px) 1541.1px, calc(100% - 140.3px) 1606.1px;
}
section.toji {
	--h: 1294.7px; --bg: #e0ebf4; --cat: #3078b4; --label: #004e66; --text: #143872;
	--photo-y: 71.4px;
	--label-x: 286.5px; --label-y: 119.9px; --label-rot: -5.08deg; --label-w: 279.4px; --label-ls: .05em;
	--ttl-x: 894.1px;   --ttl-y: 78.1px;    --ttl-w: 279.4px;
	--note-x: 569px;    --note-y: 431.2px;  --note-w: 367.6px;
	--text-x: 638.8px;  --text-y: 480px;
	--btn-x: 314.2px;   --btn-y: 619.3px;   --btn-rot: 7.54deg;
	--panel-y: 776.8px; --panel-h: 438px;
	background-image: repeating-linear-gradient(to bottom, #fff 0 2.5px, transparent 2.5px 40.243px);
	background-position: 39.9px 40.55px;
	background-size: calc(100% - 80px) 1209.8px;
}
section.mochi {
	--h: 1595.4px; --bg: #f0eef6; --cat: #9c90c4; --label: #4d4d91; --text: #3b306d;
	--photo-y: 71.3px;
	--label-x: 280.6px; --label-y: 140.2px; --label-rot: -10.38deg; --label-ls: .11em; --text-ls: .18em;
	--ttl-x: 101.3px;   --ttl-y: 201.2px;   --ttl-w: 313.2px;
	--note-x: 353.5px;  --note-y: 428.6px;  --note-w: 394.2px;
	--text-x: 396.3px;  --text-y: 490px;
	--btn-x: 688.5px;   --btn-y: 561.6px;   --btn-rot: 4.34deg;
	--panel-y: 773.9px;
	position: relative;
}
/* 罫線（1.5px）と点（直径5px・30px間隔）。点は上下の範囲を背景だけでは区切れないので擬似要素に描く */
section.mochi::before {
	content: "";
	position: absolute;
	left: 37.4px;
	right: 37.6px;
	top: 39.3px;
	height: 1517.7px;
	background:
		radial-gradient(circle at 2.5px 2.5px, #fff 0 2.5px, transparent 2.7px) 0 0 / 30px 39.808px,
		repeating-linear-gradient(to bottom, #fff 0 1.5px, transparent 1.5px 39.808px) 2.5px 1.75px / calc(100% - 5px) 1514.2px no-repeat;
}

/*=============================== SP =====*/
/* SPカンプ（幅390）の数値。--u はカンプの1px（style.css で 100vw / 390）。
   calc(var(--u) * N) の N はカンプ上の px。x はページの左端から、y はセクションの上端から */
@media screen and (max-width: 750px) {
	.recipe-top .inner { width: auto; }

	/* Campusの帯。ロゴ（PC と同じ画像を縮小）と青い線3本 */
	section.brand { height: calc(var(--u) * 78); }
	section.brand::before {
		left: calc(var(--u) * 206.9);
		right: calc(var(--u) * 20.1);
		top: calc(var(--u) * 18.6);
		height: calc(var(--u) * 38.6);
		background-position: 0 0, 0 calc(var(--u) * 18.2), 0 calc(var(--u) * 36.4);
		background-size: 100% calc(var(--u) * 2.2);
	}
	section.brand .logo { left: calc(var(--u) * 19.3); top: calc(var(--u) * 18.6); width: calc(var(--u) * 168.3); }

	/* ヒーロー。写真（リード文入り）とロゴはSP専用の画像（ロゴは横並び） */
	section.hero {
		aspect-ratio: 390 / 709.9;
		background-image: url(../images/study-recipes/hero_sp.webp);
	}
	/* ロゴ画像（logo_sp.png）は、下端が切れないよう上下左右に 1 ずつ余白を足して書き出している。
	   そのぶん位置を 1 ずつ戻し、幅を 2 足している（ロゴ自体の位置・大きさはカンプどおり） */
	section.hero .logo { left: calc(var(--u) * 38.6); top: calc(var(--u) * 592.9); width: calc(var(--u) * 307.6); margin: 0; }
	/* 英語ページ */
	.en-page section.hero { background-image: url(../images/study-recipes/hero_sp_en.webp); }
	.en-page section.hero .logo { left: calc(var(--u) * 39.5); top: calc(var(--u) * 597.5); width: calc(var(--u) * 306); }

	/* レシピ（4セクション共通） */
	section.recipe .photo {
		left: var(--photo-x, calc(var(--u) * 22.15));
		border-width: calc(var(--u) * 4.5);
		box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, .3);
	}
	section.recipe .photo img { width: calc(var(--u) * 335.5); height: calc(var(--u) * 220.5); }

	section.recipe .label {
		padding-top: calc(var(--u) * 10.4);   /* 文字のベースラインが帯の上から31.2px */
		width: var(--label-w, calc(var(--u) * 197.5));
		height: calc(var(--u) * 51.3);
		background: linear-gradient(to right, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) calc(var(--u) * 27.3)), var(--label);
		font-size: calc(var(--u) * 18);
		line-height: calc(var(--u) * 26);
	}

	.recipe-top section.recipe .note p {
		top: calc(var(--text-y) - var(--note-y) - var(--u) * 3.64);   /* 行送り29pxの半分の余白を引く（PC と同じ考え方） */
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 29);
	}

	section.recipe .btn a { width: calc(var(--u) * 258.9); }

	/* ページトップ。SPは固定せずカンプの位置に置く（仕組みは style.css）。
	   まなびレシピTOP：最後のレシピの商品パネルの下。レシピ詳細：「まなびかたをもっと明るく」の箱の下 */
	.recipe-top .pagetop { --pt-r: calc(var(--u) * 19.7); --pt-b: calc(var(--u) * 51.1); }
	.recipe-detail .pagetop { --pt-r: calc(var(--u) * 45.1); --pt-b: calc(var(--u) * 9.9); }

	/* 商品パネル。PC の 0.7 倍の形（角の画像も同じものを縮小） */
	section.recipe .item {
		left: var(--panel-x, calc(var(--u) * 19.4));
		width: calc(var(--u) * 350);
		height: var(--panel-h, calc(var(--u) * 522));
	}
	section.recipe .item::before {
		background-size: 100% calc(100% - var(--u) * 81.2), calc(100% - var(--u) * 78.4) calc(var(--u) * 82.6), calc(var(--u) * 79.8) calc(var(--u) * 82.6);
		filter: drop-shadow(calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, .3));
	}
	section.recipe .item::after { width: calc(var(--u) * 79.8); height: calc(var(--u) * 82.6); }   /* めくれ（PC の 0.7 倍。上の角の画像と同じ大きさ） */
	section.recipe .ttl2 {
		padding-top: calc(var(--u) * 20.2);
		font-size: calc(var(--u) * 17);
		line-height: calc(var(--u) * 25);
	}
	section.recipe .ttl2::before,
	section.recipe .ttl2::after {
		top: calc(var(--u) * 26.1);
		width: calc(var(--u) * 9.8);
		height: calc(var(--u) * 16.7);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.8 16.7'%3E%3Cline x1='8.3' y1='15.2' x2='1.5' y2='1.5' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
		        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.8 16.7'%3E%3Cline x1='8.3' y1='15.2' x2='1.5' y2='1.5' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
	}
	section.recipe .ttl2::before { left: calc(var(--u) * 65.3); }
	section.recipe .ttl2::after { left: calc(var(--u) * 275); }

	/* 1マス 158.9×214（メモ勉だけ216。カンプのとおり）。罫線どうしを1px重ねる */
	section.recipe .list { left: calc(var(--u) * 15.6); top: calc(var(--u) * var(--list-y, 67.9)); width: calc(var(--u) * 317.8 + 1px); }
	section.recipe .list li { width: calc(var(--u) * 158.9 + 1px); height: calc(var(--u) * var(--cell-h, 214) + 1px); }
	section.recipe .list a {
		padding: calc(var(--u) * 12.7) calc(var(--u) * 12.8);
		background-position: calc(var(--u) * 2.5) 0, calc(var(--u) * 2.5) 100%, 0 calc(var(--u) * 3.9), 100% calc(var(--u) * 3.9);
		background-size: calc(var(--u) * 154.9) 1px, calc(var(--u) * 154.9) 1px, 1px calc(var(--u) * (var(--cell-h, 214) - 6.8)), 1px calc(var(--u) * (var(--cell-h, 214) - 6.8));
	}
	/* 右下のマスは、線の端をめくれの色の部分の中ほどにしてめくれで隠す（PC と同じ。めくれの画像も PC の0.7倍） */
	section.recipe .list li:last-child:nth-child(even) a { background-size: calc(var(--u) * 154.9) 1px, calc(var(--u) * 131.7) 1px, 1px calc(var(--u) * (var(--cell-h, 214) - 6.8)), 1px calc(var(--u) * 180.1); }
	section.recipe .list .img-box { width: calc(var(--u) * 133); height: calc(var(--u) * 133); }
	/* 商品写真は PC の 0.7 倍（PC の大きさは HTML の width） */
	section.recipe .list img[width="157"] { width: calc(var(--u) * 109.9); }
	section.recipe .list img[width="153"] { width: calc(var(--u) * 107.1); }
	section.recipe .list img[width="151"] { width: calc(var(--u) * 105.7); }
	section.recipe .list img[width="139"] { width: calc(var(--u) * 97.3); }
	/* NEW（写真の四角の端からの空きを Campusの文具の SP と同じ 横10.6u・上9.1u に。マスの内側の余白が 12.8u・12.7u で Campusの文具の 12.2u と違うので、値はそのぶん違う）と、
	   Campusの文具の写真の大きさ（PC の 0.7 倍。PC は HTML の width） */
	section.recipe .list .new { left: calc(var(--u) * 23.4); top: calc(var(--u) * 21.8); width: calc(var(--u) * 71); }
	section.recipe .list img[width="114"] { width: calc(var(--u) * 79.8); }
	section.recipe .list img[width="119"] { width: calc(var(--u) * 83.3); }
	section.recipe .list .text {
		margin-top: calc(var(--u) * 5.55);
		font-size: calc(var(--u) * 12);
		line-height: calc(var(--u) * 19);
	}

	/* レシピごとの数値。罫線は左右20pxの内側だけ */
	section.memo {
		--h: calc(var(--u) * 1222.2); --label: #cb4566; --text: #8e2c3e;
		--photo-y: calc(var(--u) * 149.55);
		--label-x: calc(var(--u) * 129.3);  --label-y: calc(var(--u) * 116.4);  --label-rot: -5.10deg;
		--ttl-x: calc(var(--u) * 62.4);     --ttl-y: calc(var(--u) * 38.1);     --ttl-w: calc(var(--u) * 147.5);
		--note-x: calc(var(--u) * 93);      --note-y: calc(var(--u) * 344.7);   --note-w: calc(var(--u) * 276.7);
		--text-x: calc(var(--u) * 134.5);   --text-y: calc(var(--u) * 393);
		--btn-x: calc(var(--u) * 41.8);     --btn-y: calc(var(--u) * 506.3);    --btn-rot: 7.63deg;
		--panel-y: calc(var(--u) * 631.8); --cell-h: 216;
		--label-ls: .085em; --text-ls: .165em;
		background-image: repeating-linear-gradient(to bottom, #fff 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 39.386));
		background-position: calc(var(--u) * 20) calc(var(--u) * 38.75);
		background-size: calc(var(--u) * 349.9) calc(var(--u) * 1144.7);
	}
	section.choko {
		--h: calc(var(--u) * 1288.8);
		--photo-x: calc(var(--u) * 22.45); --photo-y: calc(var(--u) * 167.25);
		--label-x: calc(var(--u) * 38.2);   --label-y: calc(var(--u) * 125.3);  --label-rot: 4.86deg;
		--ttl-x: calc(var(--u) * 180.3);    --ttl-y: calc(var(--u) * 49.7);     --ttl-w: calc(var(--u) * 158.3);
		--note-x: calc(var(--u) * 19.1);    --note-y: calc(var(--u) * 372.2);   --note-w: calc(var(--u) * 279.5);
		--text-x: calc(var(--u) * 66.65);   --text-y: calc(var(--u) * 414.45);
		--btn-x: calc(var(--u) * 102.1);    --btn-y: calc(var(--u) * 591.8);    --btn-rot: -7.95deg;
		--panel-x: calc(var(--u) * 20.1);   --panel-y: calc(var(--u) * 685.4);
		--label-ls: .075em; --text-ls: .17em;
		/* 方眼（横 40.407px・縦 42.429px 間隔） */
		background-image:
			repeating-linear-gradient(to bottom, #fff 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 40.407)),
			repeating-linear-gradient(to right, #fff 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 42.429));
		background-position: calc(var(--u) * 20) calc(var(--u) * 51.85), calc(var(--u) * 45.25) calc(var(--u) * 24.5);
		background-size: calc(var(--u) * 349.9) calc(var(--u) * 1174.3), calc(var(--u) * 299.5) calc(var(--u) * 1229.5);
	}
	section.toji {
		--h: calc(var(--u) * 1051); --label-w: calc(var(--u) * 223.6);
		--photo-y: calc(var(--u) * 171.85);
		--label-x: calc(var(--u) * 132.2);  --label-y: calc(var(--u) * 130.4);  --label-rot: -5.10deg;
		--ttl-x: calc(var(--u) * 63.7);     --ttl-y: calc(var(--u) * 52.3);     --ttl-w: calc(var(--u) * 149.1);
		--note-x: calc(var(--u) * 79.1);    --note-y: calc(var(--u) * 365.4);   --note-w: calc(var(--u) * 283.9);
		--text-x: calc(var(--u) * 133.05);  --text-y: calc(var(--u) * 408.35);
		--btn-x: calc(var(--u) * 27.2);     --btn-y: calc(var(--u) * 543);      --btn-rot: 7.78deg;
		--panel-y: calc(var(--u) * 673);    --panel-h: calc(var(--u) * 307);
		--label-ls: .1em; --text-ls: .18em;
		background-image: repeating-linear-gradient(to bottom, #fff 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 40.458));
		background-position: calc(var(--u) * 20) calc(var(--u) * 38.75);
		background-size: calc(var(--u) * 349.9) calc(var(--u) * 973.5);
	}
	section.mochi {
		--h: calc(var(--u) * 1346.8); --label: #4d4d9b; --label-w: calc(var(--u) * 223.6);
		--photo-y: calc(var(--u) * 148.85);
		--label-x: calc(var(--u) * 35.9);   --label-y: calc(var(--u) * 126.8);  --label-rot: -5.10deg;
		--ttl-x: calc(var(--u) * 193.4);    --ttl-y: calc(var(--u) * 34.9);     --ttl-w: calc(var(--u) * 138.9);
		--note-x: calc(var(--u) * 25.5);    --note-y: calc(var(--u) * 354.4);   --note-w: calc(var(--u) * 319.2);
		--text-x: calc(var(--u) * 60.9);    --text-y: calc(var(--u) * 410.15);
		--btn-x: calc(var(--u) * 100.9);    --btn-y: calc(var(--u) * 575.3);    --btn-rot: 5.68deg;
		--panel-y: calc(var(--u) * 686.5); --list-y: 69.6;
		--label-ls: .09em; --text-ls: .18em;
	}
	/* 罫線（1.5px・39.78px間隔）と点（直径6px・34.99px間隔で1行に11個） */
	section.mochi::before {
		left: calc(var(--u) * 16.85);
		right: calc(var(--u) * 17.25);
		top: calc(var(--u) * 31.9);
		height: calc(var(--u) * 1279);
		background:
			radial-gradient(circle at calc(var(--u) * 3) calc(var(--u) * 3), #fff 0 calc(var(--u) * 3), transparent calc(var(--u) * 3.2)) 0 0 / calc(var(--u) * 34.99) calc(var(--u) * 39.78),
			repeating-linear-gradient(to bottom, #fff 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.5) calc(var(--u) * 39.78)) calc(var(--u) * 3) calc(var(--u) * 2.25) / calc(100% - var(--u) * 6) calc(var(--u) * 1274.5) no-repeat;
	}
}