@charset "utf-8";

/* まなびレシピ詳細ページ（メモ勉・ちょこ勉・とじ勉・モチ勉）。
   css/style.css（.campus の土台・メニュー・ページトップ）と css/study-recipes.css（Campusの帯・商品パネル）の上に重ねる。
   数値はカンプ（PC・SP）の座標から。
   写真や付箋を重ねて置くコラージュなので、各セクションの中身は .inner（幅1280）を基準に position で置いている。
   x はページの左端から、y はセクションの上端から */

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

/* レシピごとの色（外側の .campus に付けたクラスで切り替える） */
.recipe-detail.memo {
	--bg: #fcebee;          /* 地 */
	--cat: #e87a90;         /* カテゴリーカラー（帯の線・パネルの「＼ ／」・マウスオーバー・再生ボタン） */
	--brand-line: #e87a90;
	--note: #3078b4;        /* 付箋の文字（カンプのとおり青） */
	--howto: #007aae;       /* 「How to use」 */
}
.recipe-detail.choko {
	--bg: #dbf4f3;
	--cat: #0cb4ad;
	--brand-line: #0cb4ad;
	--note: #3078b4;
	--howto: #007aae;
}
.recipe-detail.toji {
	--bg: #e0ebf4;          /* まなびレシピTOP のとじ勉と同じ */
	--cat: #3078b4;
	--brand-line: #3078b4;
	--note: #3078b4;
	--howto: #007aae;
}
.recipe-detail.mochi {
	--bg: #f0eef6;          /* まなびレシピTOP のモチ勉と同じ */
	--cat: #9c90c4;
	--brand-line: #9c90c4;
	--note: #3078b4;
	--howto: #007aae;
}

/* メニューの子項目の現在地はカテゴリーカラー（style.css はメモ勉の桃色） */
.recipe-detail .menu .parent .current a { color: var(--cat); }

/*=============================== ヒーロー =====*/
/* まなびレシピTOPと同じく、写真は画面幅に比例して拡大し、タイトルとロゴも比率で置く（1280px のときの値から） */
.recipe-detail section.hero { aspect-ratio: 1280 / 630; }
.memo section.hero { background-image: url(../images/study-recipes/content-1/hero.webp); }
.recipe-detail section.hero .ttl {
	position: absolute;
	left: 2.7344%;
	top: 0;
	width: 14.531%;
	margin: 11.570% 0 0;   /* 絶対配置の margin の % は幅が基準なので、上からの位置も画面幅に比例する */
}
.recipe-detail section.hero .logo { left: 2.8906%; width: 16.094%; margin-top: 32.242%; }
.recipe-detail section.hero img { width: 100%; }
/* 英語ページ（URLに /en/。js/study-recipes.js が html に .en-page を付け、画像を ttl_en・logo_en に替える）。
   英語版カンプから切り出した範囲に置く。SPは SP の欄 */
@media screen and (min-width: 751px) {
	.en-page .memo section.hero .ttl { left: 3.125%; width: 30.938%; margin-top: 11.875%; }
	.en-page .memo section.hero .logo { left: 3.0469%; width: 16.094%; margin-top: 32.969%; }
}

/*=============================== レシピ =====*/
/* 地と白の横罫（2.5px・40.025px間隔）。罫線は画面の端から約40px空ける */
.recipe-detail section.recipe {
	--h: 2959.2px;
	--panel-x: 472.1px;
	--panel-y: 1722.8px;
	background-image: repeating-linear-gradient(to bottom, #fff 0 2.5px, transparent 2.5px 40.025px);
	background-position: 39.9px 39.25px;
	background-size: calc(100% - 83.1px) 2884.3px;
}
.recipe-detail section.recipe .inner > * { position: absolute; }
/* ちょこ勉のようにレシピが複数あるページは、1レシピぶんを .con に入れて切り替える（中身の位置は .inner と同じ基準） */
.recipe-detail .con { left: 0; top: 0; }
.recipe-detail .con > * { position: absolute; }

/* 動画。白枠8px（外寸 308×542）。再生ボタンは動画全体を覆い、マークだけ中央に出す */
.recipe-detail .movie {
	left: 486px;
	top: 66.4px;
	width: 308px;
	height: 542px;
	border: 8px solid #fff;
	background: #b5b5b5;
}
.recipe-detail .movie video,
.recipe-detail .movie img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* img は動画の無いレシピの写真 */
/* 写真は円が左右の端いっぱいまであり、枠より少し横長なので、cover だと左右が切れる。全体を収める。
   上下にできる余白は枠の地の色（ちょこ勉の「ソフトリング・ポケットの写真の枠」で写真の円と同じ色にしてある） */
.recipe-detail .movie img { object-fit: contain; }
/* 動画の操作ボタン（キャンパスサイトのまなびレシピ https://www.kokuyo.com/stationery/lp/campus/recipes/bite-sized-study/ と同じ）。
   動画は音なしで自動再生し、右下に「再生／一時停止」「音あり／ミュート」。ボタンの画像（icon_*.svg）・大きさ 32px・間隔 8px・端から 16px は参考サイトのまま（PC・SP 共通）。
   ボタンの絵は「押すとどうなるか」を出す：再生中は一時停止の絵、止まっているときは再生の絵。音なしのときは音ありの絵、音ありのときはミュートの絵（参考サイトと同じ）。
   .playing／.sound は js/study-recipes.js が .movie に付ける */
.recipe-detail .movie .ctrl {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
}
.recipe-detail .movie .ctrl button { width: 32px; transition: opacity .4s; }
@media (hover: hover) {
	.recipe-detail .movie .ctrl button:hover { opacity: .7; }
}
.recipe-detail .movie .ctrl img { display: none; width: 100%; height: auto; object-fit: fill; }
.recipe-detail .movie.playing .ctrl .pause,
.recipe-detail .movie:not(.playing) .ctrl .start,
.recipe-detail .movie:not(.sound) .ctrl .on,
.recipe-detail .movie.sound .ctrl .off { display: block; }

/* 付箋（材料・How to use）。付箋・手描きの線は画像、文字はHTML */
.recipe-detail .material,
.recipe-detail .howto { left: 0; top: 0; }
.recipe-detail .material > *,
.recipe-detail .howto > * { position: absolute; margin: 0; max-width: none; }   /* 親の幅が0なので、共通の img { max-width: 100% } を外す */
.recipe-detail .note { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .3)); }
.recipe-detail .material .note { left: 231.3px; top: 554.7px; width: 528.8px; }
.recipe-detail .material .line { left: 206.5px; top: 529px; width: 252.4px; }
.recipe-detail .howto .note { left: 565.3px; top: 908.1px; width: 490.3px; }
.recipe-detail .howto .arrow { left: 751.8px; top: 812.2px; width: 249.3px; }
/* メモ勉（とじ勉・モチ勉も同じ配置）。付箋はちょこ勉と同じコマ撮りで置く（js/study-recipes.js）ので、ちょこ勉と同じく
   入れ物（.material / .howto）を付箋の画像と同じ位置・大きさの箱にして、中身はその箱から置く（見た目の位置は上の値のまま）。
   中身の座標 = 上のページ上の座標 − 箱の位置 */
.recipe-detail:is(.memo, .toji, .mochi) .material { left: 231.3px; top: 554.7px; width: 528.8px; height: 540.28px; }
.recipe-detail:is(.memo, .toji, .mochi) .howto { left: 565.3px; top: 908.1px; width: 490.3px; height: 483.3px; }
.recipe-detail:is(.memo, .toji, .mochi) .material .note,
.recipe-detail:is(.memo, .toji, .mochi) .howto .note { left: 0; top: 0; width: 100%; }
.recipe-detail:is(.memo, .toji, .mochi) .material .line { left: -24.8px; top: -25.7px; }
.recipe-detail:is(.memo, .toji, .mochi) .howto .arrow { left: 186.5px; top: -95.9px; }
.recipe-detail:is(.memo, .toji, .mochi) .material .ttl3 { left: 82.7px; top: 79.5px; }
.recipe-detail:is(.memo, .toji, .mochi) .howto .ttl3 { left: 74.5px; top: 63.6px; }
.recipe-detail:is(.memo, .toji, .mochi) .list2 { left: 82.7px; top: 126.1px; }
.recipe-detail:is(.memo, .toji, .mochi) .step { left: 71.2px; top: 125.9px; }
.recipe-detail:is(.memo, .toji, .mochi) .list3 { left: 78.6px; top: 155.1px; }

/* 見出し（材料／How to use）。下線3px */
.recipe-detail .ttl3 {
	width: 350.2px;
	padding-bottom: 3.2px;
	border-bottom: 3px solid var(--note);
	color: var(--note);
	font-size: 19px;
	font-weight: 600;
	line-height: 27px;
	letter-spacing: .15em;
}
.recipe-detail .material .ttl3 { left: 314px; top: 634.2px; }
.recipe-detail .howto .ttl3 { left: 639.8px; top: 971.7px; color: var(--howto); letter-spacing: .04em; }

/* 材料の一覧。2列（分量は左から240.8px） */
.recipe-detail .list2 {
	left: 314px;
	top: 680.8px;
	color: var(--note);
	font-size: 19px;
	font-weight: 600;
	line-height: 42px;
	letter-spacing: .14em;
	white-space: nowrap;
}
.recipe-detail .list2 div { display: flex; }
.recipe-detail .list2 dt { width: 240.8px; }
.recipe-detail .list2 dd { margin: 0; }

/* 手順。番号は CSS の連番 */
.recipe-detail .step {
	left: 636.5px;
	top: 1034px;
	color: var(--note);
	font-size: 16.45px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: .04em;
}
.recipe-detail .list3 {
	left: 643.9px;
	top: 1063.2px;
	padding: 0;
	list-style: none;
	counter-reset: step;
	color: var(--note);
	font-size: 19px;
	font-weight: 600;
	line-height: 36px;
	letter-spacing: .14em;
	white-space: nowrap;
}
.recipe-detail .list3 li { position: relative; padding-left: 36.3px; counter-increment: step; }
.recipe-detail .list3 li + li { margin-top: 32.5px; }
.recipe-detail .list3 li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: -3.45px;   /* 番号のベースラインは1行目より8.4px下 */
	font-size: 40.76px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

/* イラスト */
.recipe-detail .illust { left: 350px; top: 1368.1px; width: 320px; }
/* メモ勉・とじ勉は男子（モチ勉は女子＝上の値）。男子は幅 332.7px で、
   女子のときと下端（商品パネルとの空き 22.8px）と左右の中心をそろえる */
.recipe-detail:is(.memo, .toji) .illust { left: 343.65px; top: 1392.9px; width: 332.7px; }

/* 商品パネル（study-recipes.css の部品）。一覧の罫線がTOPより2.3px上 */
.recipe-detail section.recipe .list { top: 97.2px; }

/* 他のまなびレシピ。--dy は商品の数でパネルの高さが変わるぶんのずらし（ちょこ勉） */
.recipe-detail .other { left: 0; top: var(--dy, 0px); }
.recipe-detail .other > * { position: absolute; margin: 0; max-width: none; }
.recipe-detail .other .arrow01 { left: 285px; top: 2461.1px; width: 198.7px; }
.recipe-detail .other .arrow02 { left: 826px; top: 2482.6px; width: 213.4px; }
.recipe-detail .ttl4 {
	left: 498px;
	top: 2541.1px;
	width: 315px;
	height: 73px;
	padding-top: 11.4px;
	border: 3px solid #002366;
	border-radius: 36.5px;
	background: #fff;
	color: #002366;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.448;
	letter-spacing: .08em;
	text-align: center;
}
/* レシピのボタン。左端に折り返しの影（乗算）、右に「＞」。マウスオーバーは下の「押されたように」 */
.recipe-detail .list4 { left: 0; top: 2640px; }
.recipe-detail .list4 li + li { margin-top: 20.85px; }
.recipe-detail .list4 a {
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.1 27.3'%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='3' stroke-miterlimit='10' points='1.5 1.5 13.6 13.65 1.5 25.8'/%3E%3C/svg%3E");
	position: relative;
	display: block;
	width: var(--w);
	height: 70px;
	margin-left: var(--x);
	padding-left: 23.3px;
	background: linear-gradient(to right, rgba(0, 35, 102, .15), rgba(255, 255, 255, .15)) 0 0 / 37.3px 100% no-repeat var(--c);
	background-blend-mode: multiply;
	--btn-shadow: rgba(0, 0, 0, .3);   /* 影の色。マウスオーバーで透明に（下の「押されたように」） */
	box-shadow: 2.08px 2.08px 4.16px var(--btn-shadow);
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 66.2px;
	letter-spacing: .12em;
	white-space: nowrap;
	transform-origin: var(--press-origin);
	transition: transform var(--press-dur), box-shadow .38s;
}
.recipe-detail .list4 a::after {
	content: "";
	position: absolute;
	right: 21.5px;
	top: 21.3px;
	width: 15.1px;
	height: 27.3px;
	background: var(--chevron) no-repeat center / 100% 100%;
}
.recipe-detail .list4 .memo  { --c: #e87a90; --x: 482px;   --w: 304px; }
.recipe-detail .list4 .choko { --c: #0cb4ad; --x: 483.1px; --w: 304px; }
.recipe-detail .list4 .toji  { --c: #3078b4; --x: 526.1px; --w: 367px; }
.recipe-detail .list4 .mochi { --c: #9c90c4; --x: 460.7px; --w: 323px; }

/*=============================== 文具・店舗・バナー =====*/
section.more {
	position: relative;
	height: 949.8px;
	background: #fff;
}
/* 点線と罫線。点は29.84px間隔・直径5px、線は39.277px間隔・太さ1.5px（同じ高さに重ねてある）。
   カンプ：x=43.1〜1236.8。点の半径ぶん外側から始める */
section.more::before {
	content: "";
	position: absolute;
	left: 40.6px;
	right: 40.7px;
	top: 39.3px;
	height: 869.1px;
	background-image:
		radial-gradient(circle at 2.5px 2.5px, #f0f0f0 0 2.5px, transparent 2.7px),
		linear-gradient(to bottom, transparent 1.75px, #f0f0f0 1.75px 3.25px, transparent 3.25px);
	background-position: 0 0, 2.5px 0;
	background-size: 29.84px 39.277px, calc(100% - 5px) 39.277px;
	background-repeat: repeat, repeat-y;
}
section.more .inner > * { position: absolute; }

/* Campusの文具／取り扱い店舗一覧。マウスオーバーは下の「押されたように」 */
section.more .btn2 { left: 455.5px; top: 80.7px; }
section.more .btn2 li + li { margin-top: 30px; }
section.more .btn2 a {
	position: relative;
	display: block;
	width: 400px;
	height: 80px;
	background: #1ba2de;
	--btn-shadow: rgba(0, 0, 0, .3);
	box-shadow: 2.1px 2.1px 4.2px var(--btn-shadow);
	color: #fff;
	font-size: 28px;
	font-weight: 600;
	line-height: 75.4px;
	letter-spacing: .07em;
	text-align: center;
	transform-origin: var(--press-origin);
	transition: transform var(--press-dur), box-shadow .38s;
}
section.more .btn2 a::after {
	content: "";
	position: absolute;
	right: 23.5px;
	top: 26.3px;
	width: 15.1px;
	height: 27.3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.1 27.3'%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='3' stroke-miterlimit='10' points='1.5 1.5 13.6 13.65 1.5 25.8'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* マウスオーバーで押されたように（TOP のボタンと同じ）：2px 沈み、影が消え、左端を軸に少し回ってゆがむ。
   「他のまなびレシピ」のボタンも同じ。傾きの値は TOP のテープのボタンと共通（css/style.css の --press-*）。沈む量と影の時間は TOP と同じ（2px・0.38秒） */
.recipe-detail .list4 a:hover,
section.more .btn2 a:hover {
	--btn-shadow: rgba(0, 0, 0, 0);
	transform: translateY(2px) rotate(var(--press-rot)) skewX(var(--press-skew));
}

/* まなびかたをもっと明るく */
section.more .box {
	left: 390px;
	top: 342px;
	width: 500px;
	height: 534px;
	background: #f0f0f0;
}
section.more .ttl5 {
	padding: 33.2px 0 0 104.35px;   /* カンプの見出しは中央より11.6px右。“ ” で長くなった 30.1px の半分だけ左へ寄せ、中央の位置をカンプと同じにする */
	color: #000;
	font-size: 24px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: .08em;
}
section.more .bnr { margin-top: 38px; }
section.more .bnr li + li { margin-top: 30.3px; }
section.more .bnr img { width: 440px; margin-left: 30.6px; }
section.more .bnr .text {
	display: block;
	margin: 4.9px 0 0 29.7px;
	color: #000;
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: .08em;
}

/*=============================== ちょこ勉 =====*/
/* ちょこ勉。座標の取り方はメモ勉と同じ（ページ = SVG − 555.2 / − 266.2）。
   4つのレシピ（基本・ペンケース・ソフトリングノート・ポケットノート）を同じページの中で切り替える。
   選んでいるレシピの名前が section.recipe のクラスに付く（js/study-recipes.js） */

/* ヒーロー（高さ 630.5） */
.choko section.hero { aspect-ratio: 1280 / 630.5; background-image: url(../images/study-recipes/content-2/hero.webp); }
.choko section.hero .ttl { left: 2.9688%; width: 14.219%; }
.choko section.hero .logo { left: 2.8281%; }
/* 英語ページ（URLに /en/。js/study-recipes.js が html に .en-page を付け、画像を ttl_en・logo_en に替える）。
   英語版カンプから切り出した範囲に置く。SPは SP の欄 */
@media screen and (min-width: 751px) {
	.en-page .choko section.hero .ttl { left: 3.0469%; width: 32.578%; margin-top: 11.875%; }
	.en-page .choko section.hero .logo { left: 3.0469%; width: 16.094%; margin-top: 32.969%; }
}

/* レシピの切り替え（カルーセル）。中央が選んでいるレシピ、左右に前後のレシピ。高さ470、左右の端 149.7px を白くぼかす */
section.switch {
	position: relative;
	height: 470px;
	overflow: hidden;
	background: var(--bg);
}
section.switch::before,
section.switch::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 149.7px;
	pointer-events: none;
}
section.switch::before { left: 0; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
section.switch::after { right: 0; background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0)); }
section.switch .inner { height: 100%; }
/* 並び（.list5）は .inner の外に出してセクションの全幅に広げ、1枚ずつ中心を基準に置く。
   --pos（-1 左・0 中央・1 右・±2 見えない位置）で位置が決まる。中央は画面の中央、左右は画面の端から --edge の位置
   （白いグラデーションの下に来るように。カンプ1280px では左の中心が端から128、右が139。その平均）。
   画面が広くなっても左右のアイテムは端に付いていく */
section.switch .list5 {
	--edge: 133.5px;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
section.switch .list5 li {
	position: absolute;
	left: calc(50% + var(--pos, 2) * (50% - var(--edge)));
	top: 0;
	opacity: 0;
	visibility: hidden;
	transition: left .5s, opacity .5s, visibility .5s;
}
section.switch .list5 .current,
section.switch .list5 .side { opacity: 1; visibility: visible; }
/* 画像は上下の中心を y=239.7 にそろえる。幅はカンプの大きさ（--w） */
section.switch .img-box {
	position: absolute;
	left: -200px;
	top: 89.7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 400px;
	height: 300px;
}
section.switch .img-box img { width: calc(var(--w) * 1px); max-width: none; }
section.switch .basic { --w: 283.1; }
section.switch .pencase { --w: 255.4; }
section.switch .softring,
section.switch .pocket { --w: 237.3; }   /* ポケットノートはカンプに無い。ソフトリングノートと同じ大きさにした */
/* レシピ名。選んでいるものは黒・上下に線（3px・幅200）、ほかは灰色 */
section.switch .ttl6 {
	position: absolute;
	left: 0;
	top: 354px;
	min-width: 200px;
	padding: 5.6px 20px 7.7px;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	color: #505050;
	font-size: 24px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: .05em;
	text-align: center;
	white-space: nowrap;
	transform: translateX(-50%);
	transition: color .5s, border-color .5s;
}
section.switch .current .ttl6 { border-color: var(--cat); color: #000; }
/* 前後の矢印（外径68・線3px。トップのページトップと同じ作り）。くの字はカテゴリーカラー */
section.switch .prev,
section.switch .next {
	position: absolute;
	top: 201px;
	z-index: 2;
	width: 68px;
	height: 68px;
	border: 3px solid var(--cat);
	border-radius: 50%;
	background: #fff;
}
section.switch .prev { left: 356px; }
section.switch .next { left: 853.9px; }
section.switch .prev::before,
section.switch .next::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cat);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='3' points='37.1 45.8 22.3 31 37.1 16.2'/%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 62 62'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='3' points='37.1 45.8 22.3 31 37.1 16.2'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
section.switch .next::before { transform: scaleX(-1); }

/* 左の縦タブ（トップページのサイドナビと同じ部品。4段×192px）。文字18px、現在地はカテゴリーカラー、ほかは #b4b4b4。
   カンプではレシピ（方眼）の上端から始まるので、section.recipe の先頭に置いて sticky で画面の上端に止める
   （margin-bottom で高さを打ち消し、下の .inner と重ねる）。ヒーローを過ぎてから出すトップの仕組みは使わない。
   文字の側に下地は敷かない（カンプは地の色と方眼が透けている） */
.choko .main { overflow: clip; }   /* style.css の hidden だと sticky が効かない。はみ出しを隠すのは同じ */
body:not(.foot) .choko .side-nav { opacity: 1; visibility: visible; }
.choko .side-nav {
	position: sticky;
	width: 83px;   /* 固定配置と違い幅が広がるので、帯と文字の幅にする（広がると下のコンテンツを押せなくなる） */
	height: calc(100vh / var(--pc-zoom, 1));   /* 縮小（.campus の zoom）の割り戻し。style.css のサイドナビと同じ */
	margin-bottom: calc(-100vh / var(--pc-zoom, 1));
	background: none;
}
/* 段の区切りの白線は帯（40px）の上だけ */
.choko .side-nav li + li { position: relative; border-top: none; }
.choko .side-nav li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 1px;
	background: #fff;
}
.choko .side-nav a {
	border-left-color: #b4b4b4;
	color: #b4b4b4;
	font-size: 18px;
	line-height: 25px;
}
.choko .side-nav .current a { border-left-color: var(--cat); color: var(--cat); }
/* 「ソフトリング／ノートレシピ」は2列。カンプは右の列が帯の右 84.7px、左の列がほかの段と同じ位置 */
.choko .side-nav .wrap a { padding-left: 21.4px; }

/* レシピ。地に白の方眼（横 40.217px・縦 40.369px 間隔、2.5px）。下端まで引く。
   高さ（--h）と、商品パネルの高さ（--panel-h）・その下のずらし（--dy）はレシピごと。商品が1行増えるごとに302px。
   材料が多いレシピ（ペンケース）は How to use 以下を --dy1 だけ下げる（材料が How to use の付箋に隠れないように。1行42px） */
.choko section.recipe {
	--panel-x: 313.5px;
	--panel-y: 1749.4px;
	--panel-h: 740px;
	background-image:
		repeating-linear-gradient(to bottom, #fff 0 2.5px, transparent 2.5px 40.217px),
		repeating-linear-gradient(to right, #fff 0 2.5px, transparent 2.5px 40.369px);
	background-position: 110.2px 78px, 148.3px 40px;
	background-size: calc(100% - 154.5px) calc(100% - 78px), calc(100% - 227.9px) calc(100% - 40px);
}
.choko section.recipe.basic { --h: 2972.8px; }
/* ペンケースの --dy2 は How to use の付箋を大きくしたぶん（.howto の下の欄）。イラストから下を 36px 下げる（--h・--dy・--panel-y にも 36 を足してある） */
.choko section.recipe.pencase { --h: 3394.8px; --dy: 422px; --dy1: 84px; --dy2: 36px; --panel-y: 1869.4px; --panel-h: 1042px; }
.choko section.recipe.softring,
.choko section.recipe.pocket { --h: 2670.8px; --dy: -302px; --panel-h: 438px; }
.choko section.recipe .list { top: 97.7px; }
.choko section.recipe .list .img-box { background: #e6f7f7; }   /* カンプの商品の地は地の色より薄い */

.choko .movie { left: 484.8px; top: 65.9px; }
/* ソフトリング・ポケットは動画でなく写真（lv_image_01/02。円の外は透明）。枠の地の灰色が透けて不自然なので、写真の円と同じ色にする */
.choko #softring .movie,
.choko #pocket .movie { background: #d1eeef; }
/* 付箋（材料・How to use）。トップページと同じコマ撮りで置く（js/study-recipes.js）ので、
   入れ物（.material / .howto）を付箋の画像と同じ位置・大きさの箱にして、中身はその箱から置く（回転の中心・発火の判定が付箋になる）。
   箱の位置はカンプの付箋の外接矩形。中身の座標 = カンプのページ上の座標 − 箱の位置 */
.choko .material { left: 530.8px; top: 554.2px; width: 528.8px; height: 540.8px; }
.choko .howto { left: 294.5px; top: calc(912.1px + var(--dy1, 0px)); width: 481.7px; height: 474.7px; }
/* ペンケースは手順の文が長く、最後の行の下の余白が 43px しかないので、付箋を縦横比のまま 1.0758倍にして基本レシピと同じ約79px の余白にする（SP も同じ考え方で SP の欄） */
.choko section.recipe.pencase .howto { width: 518.23px; height: 510.7px; }
.choko .material .note,
.choko .howto .note { position: absolute; max-width: none; left: 0; top: 0; width: 100%; }
.choko .material .line { left: -41px; top: -11.6px; }
.choko .howto picture { display: contents; }   /* SPで画像を替えるための picture。中の img を .howto 基準で置く */
.choko .howto .arrow { position: absolute; max-width: none; left: -46.1px; top: -159.3px; width: 248.2px; }
.choko .material .ttl3 { left: 88.6px; top: 79.5px; }
.choko .howto .ttl3 { left: 78px; top: 59.1px; letter-spacing: .05em; }
.choko .list2 { left: 88.6px; top: 126.1px; }
.choko .step { left: 74.6px; top: 121.3px; }
.choko .list3 { left: 82.1px; top: 150.6px; }
/* 女子（幅 320px）。商品パネルとの空きは 21px */
.choko .illust { left: 591.05px; top: calc(1396.4px + var(--dy1, 0px) + var(--dy2, 0px)); width: 320px; }

.choko .other .arrow01 { left: 283.9px; top: 2468.6px; }
.choko .other .arrow02 { left: 824.8px; top: 2490.1px; }
.choko .ttl4 { left: 496.9px; top: 2548.2px; }
.choko .list4 { top: 2647px; }
.choko .list4 .toji  { --x: 525px; }
.choko .list4 .mochi { --x: 459.5px; }

/* 文具・店舗・バナー。ボタンはメモ勉と違い中央 */
.choko section.more { height: 950.8px; }
.choko section.more::before {
	top: 37.75px;
	height: 875.65px;
	background-size: 29.84px 39.577px, calc(100% - 5px) 39.577px;
}
.choko section.more .btn2 { left: 438.8px; top: 80px; }
.choko section.more .box { left: 388.8px; top: 343.7px; }

/*=============================== とじ勉 =====*/
/* 本文のカンプは無い（MV だけ）ので、メモ勉と同じ構成。
   付箋・文字・動画・イラストの位置はメモ勉のまま（付箋の箱は上の「メモ勉」の欄を共用）。付箋の画像はメモ勉の付箋を
   まなびレシピTOP のとじ勉の付箋の色に塗り替えたもの。
   商品が2つで1行なので、パネルを1行ぶん（302px）低くし、その下を上げる（ちょこ勉のソフトリングと同じ） */

/* ヒーロー。タイトル・ロゴの位置はカンプから切り出した範囲 */
.toji section.hero { background-image: url(../images/study-recipes/content-3/hero.webp); }
.toji section.hero .ttl { left: 2.7344%; width: 17.344%; margin-top: 11.295%; }
.toji section.hero .logo { left: 2.8125%; margin-top: 32.193%; }
@media screen and (min-width: 751px) {
	.en-page .toji section.hero .ttl { left: 2.7344%; width: 24.531%; margin-top: 11.842%; }   /* 英語版カンプ */
	.en-page .toji section.hero .logo { left: 3.0469%; width: 16.094%; margin-top: 32.974%; }
}

/* レシピ。横罫の終わりはメモ勉と同じく下端から 74.9px 手前まで */
.toji section.recipe { --h: 2657.2px; --dy: -302px; --panel-h: 438px; background-size: calc(100% - 83.1px) 2582.3px; }

/*=============================== モチ勉 =====*/
/* とじ勉と同じく、本文のカンプは無い（MV だけ）のでメモ勉と同じ構成。
   付箋の画像はメモ勉の付箋をまなびレシピTOP のモチ勉の付箋の色に塗り替えたもの。商品は5つ（3行。下の「商品は5つ」） */
.mochi section.hero { background-image: url(../images/study-recipes/content-4/hero.webp); }
.mochi section.hero .ttl { left: 2.7344%; width: 14.844%; margin-top: 11.295%; }
.mochi section.hero .logo { left: 2.8125%; margin-top: 32.193%; }
@media screen and (min-width: 751px) {
	.en-page .mochi section.hero .ttl { left: 2.7344%; width: 33.828%; margin-top: 11.451%; }   /* 英語版カンプ */
	.en-page .mochi section.hero .logo { left: 3.0469%; width: 16.094%; margin-top: 32.974%; }
}

/* 手順が6行（メモ勉は5行）なので、手順のあいだを1行ぶん（36px）詰めて、最後の行から付箋の下端までをメモ勉と同じにする */
.mochi .list3 li + li { margin-top: 14.5px; }

/* 商品は5つ（3行。Campusの文具の筆記具4点は NEW 付き）。メモ勉より1行多い。
   1行多いぶん 302px：セクションの高さ（--h）・パネルの高さ（--panel-h）・その下のずらし（--dy）・横罫の長さ（background-size）。ちょこ勉のペンケース（3行）と同じ考え方 */
.mochi section.recipe { --h: 3261.2px; --dy: 302px; --panel-h: 1042px; background-size: calc(100% - 83.1px) 3186.3px; }

/* 商品の「NEW」と Campusの文具の写真（白地の JPG）の指定は、まなびレシピTOP のモチ勉と共通なので css/study-recipes.css にある */

/*=============================== SP =====*/
/* SPカンプ（幅390）の数値。--u はカンプの1px（style.css で 100vw / 390）。
   calc(var(--u) * N) の N はカンプ上の px */
@media screen and (max-width: 750px) {
	.recipe-detail .inner { width: auto; }

	/* ヒーロー。写真・タイトル・ロゴ（横並び）はSP専用の画像 */
	.recipe-detail section.hero { aspect-ratio: 390 / 709.9; }
	.memo section.hero { background-image: url(../images/study-recipes/content-1/hero_sp.webp); }
	.recipe-detail section.hero .ttl { left: calc(var(--u) * 100); width: calc(var(--u) * 183); margin: calc(var(--u) * 445) 0 0; }
	.recipe-detail section.hero .logo { left: calc(var(--u) * 39.1); top: 0; width: calc(var(--u) * 306.6); margin: calc(var(--u) * 593.4) 0 0; }
	.en-page .memo section.hero .ttl { left: calc(var(--u) * 31); width: calc(var(--u) * 342); margin: calc(var(--u) * 447) 0 0; }   /* 英語ページ（メモ勉MV英語_sp.svg から切り出した範囲） */
	.en-page .memo section.hero .logo { left: calc(var(--u) * 39); width: calc(var(--u) * 307); margin: calc(var(--u) * 597) 0 0; }

	/* レシピ。白の横罫（2.5px・40.083px間隔）は左右20pxの内側 */
	.recipe-detail section.recipe {
		--h: calc(var(--u) * 2201.3);
		--panel-x: calc(var(--u) * 20.1);
		--panel-y: calc(var(--u) * 1320.5);
		--panel-h: calc(var(--u) * 520);
		--list-y: 66.7;
		background-image: repeating-linear-gradient(to bottom, #fff 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 40.083));
		background-position: calc(var(--u) * 20) calc(var(--u) * 38.75);
		background-size: calc(var(--u) * 349.9) calc(var(--u) * 2126.9);
	}
	.recipe-detail section.recipe .list { top: calc(var(--u) * var(--list-y)); }

	.recipe-detail .movie {
		left: calc(var(--u) * 76.35);
		top: calc(var(--u) * 37.35);
		width: calc(var(--u) * 229.5);
		height: calc(var(--u) * 409.5);
		border-width: calc(var(--u) * 4.5);
	}

	/* 付箋・手描きの線は PC の画像を 0.7 倍にして使う */
	.recipe-detail .material .note { left: calc(var(--u) * -21.6); top: calc(var(--u) * 478.5); width: calc(var(--u) * 370.2); }
	.recipe-detail .material .line { left: calc(var(--u) * -39); top: calc(var(--u) * 460.5); width: calc(var(--u) * 176.7); }
	.recipe-detail .howto .note { left: calc(var(--u) * 61.2); top: calc(var(--u) * 737.3); width: calc(var(--u) * 343.2); }
	.recipe-detail .howto .arrow { left: calc(var(--u) * 211.8); top: calc(var(--u) * 670.2); width: calc(var(--u) * 174.5); }
	/* メモ勉の付箋の箱（PC と同じ考え方。中身は箱からの位置。見た目の位置は上の値と下の見出し・一覧・手順の値のまま） */
	.recipe-detail:is(.memo, .toji, .mochi) .material { left: calc(var(--u) * -21.6); top: calc(var(--u) * 478.5); width: calc(var(--u) * 370.2); height: calc(var(--u) * 378.23); }
	.recipe-detail:is(.memo, .toji, .mochi) .howto { left: calc(var(--u) * 61.2); top: calc(var(--u) * 737.3); width: calc(var(--u) * 343.2); height: calc(var(--u) * 338.28); }
	.recipe-detail:is(.memo, .toji, .mochi) .material .line { left: calc(var(--u) * -17.4); top: calc(var(--u) * -18); }
	.recipe-detail:is(.memo, .toji, .mochi) .howto .arrow { left: calc(var(--u) * 150.6); top: calc(var(--u) * -67.1); }
	.recipe-detail:is(.memo, .toji, .mochi) .material .ttl3 { left: calc(var(--u) * 57.9); top: calc(var(--u) * 53.9); }
	.recipe-detail:is(.memo, .toji, .mochi) .howto .ttl3 { left: calc(var(--u) * 38.8); top: calc(var(--u) * 42.8); }
	.recipe-detail:is(.memo, .toji, .mochi) .list2 { left: calc(var(--u) * 57.9); top: calc(var(--u) * 88.7); }
	.recipe-detail:is(.memo, .toji, .mochi) .step { left: calc(var(--u) * 36.4); top: calc(var(--u) * 88.1); }
	.recipe-detail:is(.memo, .toji, .mochi) .list3 { left: calc(var(--u) * 41.7); top: calc(var(--u) * 108); }

	.recipe-detail .ttl3 {
		width: calc(var(--u) * 245.1);
		padding-bottom: calc(var(--u) * 1.4);
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 21);
	}
	.recipe-detail .material .ttl3 { left: calc(var(--u) * 36.3); top: calc(var(--u) * 532.4); }
	.recipe-detail .howto .ttl3 { left: calc(var(--u) * 100); top: calc(var(--u) * 780.1); text-transform: uppercase; }   /* SPカンプは大文字 */

	.recipe-detail .list2 {
		left: calc(var(--u) * 36.3);
		top: calc(var(--u) * 567.2);
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 30);
	}
	.recipe-detail .list2 dt { width: calc(var(--u) * 168.6); }

	.recipe-detail .step {
		left: calc(var(--u) * 97.6);
		top: calc(var(--u) * 825.4);
		font-size: calc(var(--u) * 11.52);
		line-height: calc(var(--u) * 17);
	}
	.recipe-detail .list3 {
		left: calc(var(--u) * 102.9);
		top: calc(var(--u) * 845.3);
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 25);
	}
	.recipe-detail .list3 li { padding-left: calc(var(--u) * 25.4); }
	.recipe-detail .list3 li + li { margin-top: calc(var(--u) * 23.2); }
	.recipe-detail .list3 li::before { top: calc(var(--u) * -1.76); font-size: calc(var(--u) * 28.53); }

	/* 人物のイラストは縦長なので、商品パネルとの空きが詰まらないよう 10u 上げている */
	.recipe-detail .illust { left: calc(var(--u) * 41.45); top: calc(var(--u) * 1079.5); width: calc(var(--u) * 219); }
	.recipe-detail:is(.memo, .toji) .illust { left: calc(var(--u) * 31.65); top: calc(var(--u) * 1086.5); width: calc(var(--u) * 238.6); }   /* 男子。PC と同じく下端・中心をそろえる */

	.recipe-detail .other .arrow01 { left: calc(var(--u) * -65); top: calc(var(--u) * 1842.4); width: calc(var(--u) * 139.1); }
	.recipe-detail .other .arrow02 { left: calc(var(--u) * 313.3); top: calc(var(--u) * 1859.5); width: calc(var(--u) * 158.5); }
	.recipe-detail .ttl4 {
		left: calc(var(--u) * 80.9);
		top: calc(var(--u) * 1898);
		width: calc(var(--u) * 228);
		height: calc(var(--u) * 53);
		padding-top: calc(var(--u) * 7.2);
		border-width: calc(var(--u) * 3);
		border-radius: calc(var(--u) * 26.5);
		font-size: calc(var(--u) * 20);
	}
	.recipe-detail .list4 { top: calc(var(--u) * 1971.3); }
	.recipe-detail .list4 li + li { margin-top: calc(var(--u) * 11.35); }
	.recipe-detail .list4 a {
		height: calc(var(--u) * 52);
		padding-left: calc(var(--u) * 17.8);
		background-size: calc(var(--u) * 27.7) 100%;
		box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 4) var(--btn-shadow);
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 49.12);
	}
	.recipe-detail .list4 a::after { right: calc(var(--u) * 16.4); top: calc(var(--u) * 15.9); width: calc(var(--u) * 11.2); height: calc(var(--u) * 20.2); }
	.recipe-detail .list4 .choko { --x: calc(var(--u) * 80.1); --w: calc(var(--u) * 227); }
	.recipe-detail .list4 .toji  { --x: calc(var(--u) * 57.1); --w: calc(var(--u) * 273); }
	.recipe-detail .list4 .mochi { --x: calc(var(--u) * 73.6); --w: calc(var(--u) * 240); }

	/* 文具・店舗・バナー。点線・罫線は左右20pxの内側（点は34.99px間隔の11個。まなびレシピTOPのSPと同じ） */
	section.more { height: calc(var(--u) * 693.9); }
	section.more::before {
		left: calc(var(--u) * 16.93);
		right: auto;
		top: calc(var(--u) * 32.9);
		width: calc(var(--u) * 355.95);
		height: calc(var(--u) * 630.5);
		background-image:
			radial-gradient(circle at calc(var(--u) * 3) calc(var(--u) * 3), #f0f0f0 0 calc(var(--u) * 3), transparent calc(var(--u) * 3.2)),
			linear-gradient(to bottom, transparent calc(var(--u) * 2.25), #f0f0f0 calc(var(--u) * 2.25) calc(var(--u) * 3.75), transparent calc(var(--u) * 3.75));
		background-position: 0 0, calc(var(--u) * 3) 0;
		background-size: calc(var(--u) * 34.99) calc(var(--u) * 39.029), calc(var(--u) * 349.95) calc(var(--u) * 39.029);
	}
	section.more .btn2 { left: calc(var(--u) * 64.9); top: calc(var(--u) * 52.8); }
	section.more .btn2 li + li { margin-top: calc(var(--u) * 15.1); }
	section.more .btn2 a {
		width: calc(var(--u) * 260);
		height: calc(var(--u) * 62);
		box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 4) var(--btn-shadow);
		font-size: calc(var(--u) * 20);
		line-height: calc(var(--u) * 59.96);
	}
	section.more .btn2 a::after { right: calc(var(--u) * 18.9); top: calc(var(--u) * 20.9); width: calc(var(--u) * 11.2); height: calc(var(--u) * 20.2); }
	section.more .box {
		left: calc(var(--u) * 30.4);
		top: calc(var(--u) * 254.4);
		width: calc(var(--u) * 325);
		height: calc(var(--u) * 345);
	}
	section.more .ttl5 { padding: calc(var(--u) * 13.7) 0 0 calc(var(--u) * 51.9); font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 25); }   /* “ ” の 21.4u の半分だけ左へ（中央の位置をカンプと同じに） */
	section.more .bnr { margin-top: calc(var(--u) * 19.5); }
	section.more .bnr li + li { margin-top: calc(var(--u) * 19.8); }
	section.more .bnr img { width: calc(var(--u) * 302.7); margin-left: calc(var(--u) * 11.2); }
	section.more .bnr .text { margin: 0 0 0 calc(var(--u) * 10.6); font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 19); }

	/*=============================== ちょこ勉（SP） =====*/
	/* ちょこ勉。座標の取り方はメモ勉と同じ（ページ = SVG − 87.6 / − 56.8） */
	.choko section.hero { background-image: url(../images/study-recipes/content-2/hero_sp.webp); }
	.choko section.hero .ttl { left: calc(var(--u) * 106); width: calc(var(--u) * 182); margin: calc(var(--u) * 412) 0 0; }
	.choko section.hero .logo { left: calc(var(--u) * 38.9); width: calc(var(--u) * 307); margin: calc(var(--u) * 548.8) 0 0; }
	.en-page .choko section.hero .ttl { left: calc(var(--u) * 25); width: calc(var(--u) * 353); margin: calc(var(--u) * 415) 0 0; }   /* 英語ページ（ちょこ勉MV英語_sp.svg から切り出した範囲） */
	.en-page .choko section.hero .logo { left: calc(var(--u) * 39); width: calc(var(--u) * 307); margin: calc(var(--u) * 553) 0 0; }

	/* カルーセル。中央の幅281.6だけ地の色で、前後のレシピは見せない（はみ出しを隠して横に送る） */
	section.switch {
		height: calc(var(--u) * 353);
		background: linear-gradient(var(--bg), var(--bg)) center / calc(var(--u) * 281.6) 100% no-repeat #fff;
	}
	section.switch::before,
	section.switch::after { content: none; }
	/* 並びは中央の幅281.6の枠にし、1枚ぶん（枠の幅）ずつ横に送る（--edge を −50% にすると間隔が枠の幅になる） */
	section.switch .list5 {
		--edge: -50%;
		left: calc(var(--u) * 54.3);
		width: calc(var(--u) * 281.6);
		overflow: hidden;
	}
	section.switch .img-box { left: calc(var(--u) * -140.8); top: calc(var(--u) * 47.6); width: calc(var(--u) * 281.6); height: calc(var(--u) * 200); }
	section.switch .img-box img { width: calc(var(--u) * var(--w) * .7312); }   /* PC の 0.7312 倍（カンプの基本レシピの画像の比） */
	section.switch .ttl6 {
		top: calc(var(--u) * 254);
		min-width: calc(var(--u) * 184.1);
		padding: calc(var(--u) * 8.1) calc(var(--u) * 8) calc(var(--u) * 9.8);
		border-top-width: calc(var(--u) * 3);
		border-bottom-width: calc(var(--u) * 3);
		font-size: calc(var(--u) * 21);
		line-height: calc(var(--u) * 30.4);
	}
	section.switch .prev,
	section.switch .next { top: calc(var(--u) * 118.16); width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-width: calc(var(--u) * 3); }
	section.switch .prev { left: calc(var(--u) * 17.45); }
	section.switch .next { left: calc(var(--u) * 314.83); }

	/* 下部のバー（トップページのSPのサイドナビと同じ形）。カンプでは最初の画面から出ている。フッターでは隠す。
	   PC の sticky と区切り線を戻す */
	.choko .side-nav { position: fixed; top: auto; width: calc(var(--u) * 350); height: auto; margin-bottom: 0; }
	.choko .side-nav li + li::before { content: none; }
	.choko .side-nav a { font-size: calc(var(--u) * 15); line-height: 1; }
	.choko .side-nav .wrap a { padding-left: calc(var(--u) * 17.4); }
	.choko .side-nav br { display: none; }
	.choko .nav-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpolyline fill='none' stroke='%230cb4ad' stroke-width='2.5' points='29.75 14 40 8 50.25 14'/%3E%3C/svg%3E"); }
	.open-nav .choko .nav-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpolyline fill='none' stroke='%230cb4ad' stroke-width='2.5' points='29.75 8 40 14 50.25 8'/%3E%3C/svg%3E"); }

	/* レシピ。白の方眼（横 40.2255px・縦 42.4286px 間隔）。下端の手前（横 59.7・縦 36.8）で止める。商品が1行増えるごとに213 */
	.choko section.recipe {
		--panel-x: calc(var(--u) * 20.1);
		--panel-y: calc(var(--u) * 1318.4);
		--panel-h: calc(var(--u) * 520);
		--list-y: 68.7;
		background-image:
			repeating-linear-gradient(to bottom, #fff 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 40.2255)),
			repeating-linear-gradient(to right, #fff 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 42.4286));
		background-position: calc(var(--u) * 20) calc(var(--u) * 73.9), calc(var(--u) * 46.5) calc(var(--u) * 40.3);
		background-size: calc(var(--u) * 349.9) calc(100% - var(--u) * 133.6), calc(var(--u) * 299.5) calc(100% - var(--u) * 77.1);
	}
	.choko section.recipe.basic { --h: calc(var(--u) * 2187.6); }
	/* --dy1 は材料2行ぶん（30×2）。--dy2 は How to use の付箋を大きくしたぶん（下記）で、イラストから下を 50u 下げる（--h・--dy・--panel-y にも 50 を足してある） */
	.choko section.recipe.pencase { --h: calc(var(--u) * 2510.6); --dy: calc(var(--u) * 323); --dy1: calc(var(--u) * 60); --dy2: calc(var(--u) * 50); --panel-y: calc(var(--u) * 1428.4); --panel-h: calc(var(--u) * 733); }
	.choko section.recipe.softring,
	.choko section.recipe.pocket { --h: calc(var(--u) * 1974.6); --dy: calc(var(--u) * -213); --panel-h: calc(var(--u) * 307); }

	.choko .movie { top: calc(var(--u) * 37.75); }
	/* 付箋の箱（PC と同じ考え方。中身は箱からの位置） */
	.choko .material { left: calc(var(--u) * 44.4); top: calc(var(--u) * 478.8); width: calc(var(--u) * 370.2); height: calc(var(--u) * 378.6); }
	.choko .howto { left: calc(var(--u) * -15.5); top: calc(var(--u) * 737.7 + var(--dy1, 0px)); width: calc(var(--u) * 343.2); height: calc(var(--u) * 339.2); }   /* 付箋は SP専用の画像（PCと角度が違う） */
	/* ペンケースは手順の文が長く、最後の行が付箋の下端に接するので、付箋を縦横比のまま 1.148倍にして下に 50u の余白を足す（基本レシピと同じ約59u の余白）。
	   中の見出し・手順・矢印は箱の左上からの位置なので動かない。付箋は下と右に広がる（右端は画面の 378u） */
	.choko section.recipe.pencase .howto { width: calc(var(--u) * 393.87); height: calc(var(--u) * 389.28); }
	.choko .material .note,
	.choko .howto .note { left: 0; top: 0; width: 100%; }
	.choko .material .line { left: calc(var(--u) * -18.4); top: calc(var(--u) * -18); }
	.choko .howto .arrow { left: calc(var(--u) * -51.6); top: calc(var(--u) * -90.9); width: calc(var(--u) * 174.5); }   /* 同上 */
	.choko .material .ttl3 { left: calc(var(--u) * 56.9); top: calc(var(--u) * 53.9); }
	.choko .howto .ttl3 { left: calc(var(--u) * 56.7); top: calc(var(--u) * 42.8); }
	.choko .list2 { left: calc(var(--u) * 56.9); top: calc(var(--u) * 88.8); }
	.choko .step { left: calc(var(--u) * 54.3); top: calc(var(--u) * 88); }
	.choko .list3 { left: calc(var(--u) * 59.6); top: calc(var(--u) * 107.9); }
	.choko .illust { left: calc(var(--u) * 143.2); top: calc(var(--u) * 1078.3 + var(--dy1, 0px) + var(--dy2, 0px)); width: calc(var(--u) * 219); }   /* 女子 */

	.choko .other .arrow01 { left: calc(var(--u) * -65); top: calc(var(--u) * 1842.7); }
	.choko .other .arrow02 { left: calc(var(--u) * 313.3); top: calc(var(--u) * 1859.8); }
	.choko .ttl4 { left: calc(var(--u) * 80.9); top: calc(var(--u) * 1898.3); }
	.choko .list4 { top: calc(var(--u) * 1971.6); }
	.recipe-detail .list4 .memo { --x: calc(var(--u) * 80.6); --w: calc(var(--u) * 226); }
	.recipe-detail .list4 .memo a { padding-left: calc(var(--u) * 21.5); }   /* カンプはメモ勉のボタンだけ文字が帯の左から21.5 */
	.choko .list4 .toji  { --x: calc(var(--u) * 57); }
	.choko .list4 .mochi { --x: calc(var(--u) * 73.5); }

	/* 文具・店舗・バナー。点線は17行（カンプは間隔が不ぞろいなので平均の41.47px） */
	.choko section.more { height: calc(var(--u) * 708); }
	.choko section.more::before {
		top: calc(var(--u) * 33.65);
		height: calc(var(--u) * 669.5);
		background-size: calc(var(--u) * 34.99) calc(var(--u) * 41.47), calc(var(--u) * 349.95) calc(var(--u) * 41.47);
	}
	.choko section.more .btn2 { left: calc(var(--u) * 63.5); top: calc(var(--u) * 59.3); }
	.choko section.more .box { left: calc(var(--u) * 29.5); top: calc(var(--u) * 268.5); }

	/*=============================== とじ勉（SP） =====*/
	.toji section.hero { background-image: url(../images/study-recipes/content-3/hero_sp.webp); }
	.toji section.hero .ttl { left: calc(var(--u) * 99); width: calc(var(--u) * 189); margin: calc(var(--u) * 445) 0 0; }
	.toji section.hero .logo { margin-top: calc(var(--u) * 593.3); }
	.en-page .toji section.hero .ttl { left: calc(var(--u) * 63); width: calc(var(--u) * 277); margin: calc(var(--u) * 447) 0 0; }   /* 英語ページ（とじ勉_mv_sp_英語.svg から切り出した範囲） */
	.en-page .toji section.hero .logo { left: calc(var(--u) * 39.1); width: calc(var(--u) * 306.6); margin: calc(var(--u) * 596.9) 0 0; }
	.toji section.recipe { --h: calc(var(--u) * 1988.3); --dy: calc(var(--u) * -213); --panel-h: calc(var(--u) * 307); background-size: calc(var(--u) * 349.9) calc(var(--u) * 1913.9); }

	/*=============================== モチ勉（SP） =====*/
	.mochi section.hero { background-image: url(../images/study-recipes/content-4/hero_sp.webp); }
	.mochi section.hero .ttl { left: calc(var(--u) * 108); width: calc(var(--u) * 175); margin: calc(var(--u) * 444.8) 0 0; }
	.mochi section.hero .logo { margin-top: calc(var(--u) * 593.3); }
	.en-page .mochi section.hero .ttl { left: calc(var(--u) * 24); width: calc(var(--u) * 348); margin: calc(var(--u) * 447) 0 0; }   /* 英語ページ（モチ勉_mv_sp_英語.svg から切り出した範囲） */
	.en-page .mochi section.hero .logo { left: calc(var(--u) * 39.1); width: calc(var(--u) * 306.6); margin: calc(var(--u) * 597.6) 0 0; }
	.mochi .list3 li + li { margin-top: calc(var(--u) * 10.7); }   /* 手順のあいだを1行ぶん（25）詰める（PC と同じ） */
	/* 商品5つ（3行）。1行多いぶん 213u（PC と同じ考え方。ちょこ勉のペンケースと同じ値） */
	.mochi section.recipe { --h: calc(var(--u) * 2414.3); --dy: calc(var(--u) * 213); --panel-h: calc(var(--u) * 733); background-size: calc(var(--u) * 349.9) calc(var(--u) * 2339.9); }
	/* NEW と Campusの文具の写真の大きさ（SP）は css/study-recipes.css */
}