@charset "utf-8";

/* Campusの文具（study-recipes/items/）。css/style.css・css/study-recipes.css（Campusの帯）の上に重ねる。
   数値はカンプ（PC・SP）の座標から。
   PC は ページ = SVG − 555.16 / − 266.21、SP は ページ = SVG − 87.6 / − 56.8 */

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

/*=============================== Campusの帯 =====*/
/* 部品はまなびレシピTOPのもの。このカンプはロゴと線が 2.3px 左（ロゴ 左34.6、線 265.2〜右42.4） */
.items-page section.brand::before { left: 265.2px; right: 42.4px; }
.items-page section.brand .logo { left: 34.6px; }

/*=============================== ヒーロー =====*/
/* 写真は画面幅に比例して拡大する（まなびレシピTOPと同じ。1280px のとき 1280×630.5）。
   見出し・リード文も同じ比率で大きくするので、中の数値は --k（1280px のときの 1px）の倍数で持つ */
.items-page section.hero {
	aspect-ratio: 1280 / 630.5;
	background: #c7e8fb url(../images/study-recipes/items/hero.webp) no-repeat center top / 100% auto;
	container-type: inline-size;
}
.items-page section.hero .inner {
	--k: calc(100cqw / 1280);
	width: auto;
	padding: calc(var(--k) * 238.9) 0 0 calc(var(--k) * 38.94);
}
/* 見出しは「Campus」が欧文書体なので、カンプの文字の形をそのまま SVG にした画像 */
.items-page section.hero .ttl { width: calc(var(--k) * 304.77); }
.items-page section.hero .ttl img { width: 100%; }
/* リード文は HTML の文字（まなびレシピTOPは写真に焼き込みで、study-recipes.css で見えなくしているので戻す） */
.items-page section.hero .lead {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	margin-top: calc(var(--k) * var(--lead-y, 190));
	color: #143872;
	font-size: calc(var(--k) * var(--lead-fs, 19));
	font-weight: var(--lead-fw, 600);
	line-height: calc(var(--k) * 40);
	letter-spacing: var(--lead-ls, .13em);
}
.items-page section.hero .lead-en { display: none; }
/* 英語ページ（URLに /en/。js/study-recipes.js が html に .en-page を付け、見出しを ttl_en.svg に替える）。
   写真は日本語版と同じ。見出し「STUDY BOOSTER」とリード文（画像）をカンプの位置に */
.en-page .items-page section.hero .inner { padding: calc(var(--k) * 240.14) 0 0 calc(var(--k) * 39.96); }
.en-page .items-page section.hero .ttl { width: calc(var(--k) * 410.5); }
.en-page .items-page section.hero .lead { display: none; }
.en-page .items-page section.hero .lead-en { display: block; width: calc(var(--k) * 617.36); margin: calc(var(--k) * 303.79) 0 0 calc(var(--k) * -0.17); }
.items-page section.hero .lead-en img { width: 100%; }

/*=============================== 商品 =====*/
/* 地の色はカンプの #a1cce1（不透明度50%）を白の上で。
   白の横罫は画面の端から左38.8・右41.1 空けて、画面が広くても左右いっぱいに伸ばす（帯の線と同じ考え方） */
section.items {
	background: #d0e6f0 repeating-linear-gradient(to bottom, #fff 0 2.5px, transparent 2.5px 39.7481px) 38.8px 40.54px / calc(100% - 79.9px) 3142.6px no-repeat;
}
.items-page section.items .inner { padding: 40px 0 69.5px; }

/* パネル。x・上の間隔・見出しの横線の長さ・クリップ（中心・角度・色）はパネルごとの変数 */
.item {
	position: relative;
	width: 500px;
	height: 740px;
	margin-left: var(--x);
	background: #fff;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
}
.item + .item { margin-top: 52.6px; }
/* クリップ。4つとも同じ形の回転違いなので、1つの形を mask にして色と角度を変える */
.item::after {
	content: "";
	position: absolute;
	left: calc(var(--clip-x) - 26.1px);
	top: calc(var(--clip-y) - 42.275px);
	width: 52.2px;
	height: 84.55px;
	background: var(--clip);
	transform: rotate(var(--clip-rot));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.2 84.55'%3E%3Cpath d='M13.01 36.92l16.58,38.77c2.27,5.32,8.43,7.79,13.75,5.51,5.32-2.27,7.79-8.43,5.51-13.75l-24.87-58.16c-2.43-5.68-9.01-8.32-14.69-5.89-5.68,2.43-8.32,9.01-5.89,14.69l1.95,4.56' fill='none' stroke='%23000' stroke-width='5' stroke-miterlimit='10'/%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 52.2 84.55'%3E%3Cpath d='M13.01 36.92l16.58,38.77c2.27,5.32,8.43,7.79,13.75,5.51,5.32-2.27,7.79-8.43,5.51-13.75l-24.87-58.16c-2.43-5.68-9.01-8.32-14.69-5.89-5.68,2.43-8.32,9.01-5.89,14.69l1.95,4.56' fill='none' stroke='%23000' stroke-width='5' stroke-miterlimit='10'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* 見出し。左右の青い線はパネルの端から20px、長さはカンプのとおり（パネルごとに違う）。文字は線の間の中央 */
.item .ttl2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 20px 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: .07em;
	color: #000;
}
.item .ttl2::before,
.item .ttl2::after {
	content: "";
	width: var(--line);
	height: 3px;
	margin-top: 6px;   /* 線の中心が文字の行の中心より3px下（カンプ） */
	background: #1ba2de;
}

/* 商品は2列。1マス 227×304.5（罫線どうしを1px重ねる）。罫線は角で途切れる（まなびレシピTOPの商品パネルと同じ形） */
.item .list {
	display: flex;
	flex-wrap: wrap;
	width: 455px;
	margin: 33.6px 0 0 23.1px;
}
.item .list li { width: 228px; height: 305.5px; margin: 0 -1px -1px 0; position: relative; }
.item .list li:hover { z-index: 1; }
.item .list a {
	--line: #bebebe;
	position: relative;
	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;
}
/* マウスオーバーで文字色と罫線が Campusブルーに（カンプの注記） */
.item .list a:hover { --line: #1ba2de; color: #1ba2de; }
.item .list .img-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 190px;
	background: #f0f7fc;
}
/* 商品写真は 151px 四方に収める。白地の写真があるので乗算で四角の地の色になじませる */
.item .list .img-box img {
	width: 151px;
	height: 151px;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.item .list .text {
	display: block;
	margin-top: 9.1px;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: .03em;
}
/* 「New」の手書き。写真の四角の左上に重ねる（縦長の商品写真は右斜め45度に置かれるので、右上だと商品に被る）。
   四角の端からの空きは横 11px・上 6.3px。マスの左上から */
.item .list .new {
	position: absolute;
	left: 28.5px;
	top: 23.8px;
	width: 91px;
}

/*=============================== パネルごとの数値 =====*/
/* x はページの左端から。クリップは中心の位置（パネルの左上から）と、キャンパスノートの形からの回転 */
.item.note   { --x: 427.1px; --line: 122.9px; --clip: #e87a90; --clip-x: 457.25px; --clip-y: 19.96px; --clip-rot: 0deg; }
.item.pen    { --x: 312.7px; --line: 173.5px; --clip: #0cb4ad; --clip-x: 59.12px;  --clip-y: 28.28px; --clip-rot: 36.99deg; }
.item.eraser { --x: 498.2px; --line: 106.1px; --clip: #9c90c4; --clip-x: 437.27px; --clip-y: 28.73px; --clip-rot: 43.15deg; }
.item.case   { --x: 346.4px; --line: 161.8px; --clip: #3078b4; --clip-x: 483.8px;  --clip-y: 48.05px; --clip-rot: 82.21deg; }

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

	/* Campusの帯はまなびレシピTOPの SP と同じ位置 */
	.items-page section.brand::before { left: calc(var(--u) * 206.9); right: calc(var(--u) * 20.1); }
	.items-page section.brand .logo { left: calc(var(--u) * 19.3); }

	/* ヒーロー。写真（129〜838.9）の下の無地の部分に見出しとリード文が重なる */
	.items-page section.hero {
		aspect-ratio: auto;
		height: calc(var(--u) * 709.9);
		background-image: url(../images/study-recipes/items/hero_sp.webp);
		container-type: normal;
	}
	.items-page section.hero .inner { padding: calc(var(--u) * 462.45) 0 0 calc(var(--u) * 17.82); }
	.items-page section.hero .ttl { width: calc(var(--u) * 229.36); }
	.items-page section.hero .lead {
		margin-top: calc(var(--u) * var(--lead-y-sp, 65.3));
		font-size: calc(var(--u) * var(--lead-fs-sp, 15));
		line-height: calc(var(--u) * 30.2);
		letter-spacing: var(--lead-ls-sp, .12em);
	}
	/* 英語ページ。写真の位置が日本語版より27.5px下なので写真も替える。見出しは PC の画像を縮小 */
	.en-page .items-page section.hero { background-image: url(../images/study-recipes/items/hero_sp_en.webp); }
	.en-page .items-page section.hero .inner { padding: calc(var(--u) * 511.66) 0 0 calc(var(--u) * 18.39); }
	.en-page .items-page section.hero .ttl { width: calc(var(--u) * 308.76); }
	.en-page .items-page section.hero .lead-en { width: calc(var(--u) * 251.73); margin: calc(var(--u) * 92.01) 0 0 calc(var(--u) * -0.18); }

	/* 商品。地はカンプの #acd7ec（不透明度50%）を白の上で（PC と色が違う）。白の横罫は左右20pxの内側 */
	section.items { background: #d6ebf6; }
	.items-page section.items .inner {
		padding: calc(var(--u) * 120) 0 calc(var(--u) * 125.9);
		background: repeating-linear-gradient(to bottom, #fff 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 40.045)) calc(var(--u) * 20) calc(var(--u) * 38.75) / calc(var(--u) * 349.9) calc(var(--u) * 2405.2) no-repeat;
	}
	.item {
		width: calc(var(--u) * 350);
		height: calc(var(--u) * 515);
		margin-left: calc(var(--u) * 19.9);
		box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, .3);
	}
	.item + .item { margin-top: var(--gap-sp); }
	/* クリップは PC の 0.7 倍・線の太さ 3px */
	.item::after {
		left: calc(var(--clip-x-sp) - var(--u) * 18.27);
		top: calc(var(--clip-y-sp) - var(--u) * 29.5925);
		width: calc(var(--u) * 36.54);
		height: calc(var(--u) * 59.185);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.2 84.55'%3E%3Cpath d='M13.01 36.92l16.58,38.77c2.27,5.32,8.43,7.79,13.75,5.51,5.32-2.27,7.79-8.43,5.51-13.75l-24.87-58.16c-2.43-5.68-9.01-8.32-14.69-5.89-5.68,2.43-8.32,9.01-5.89,14.69l1.95,4.56' fill='none' stroke='%23000' stroke-width='4.2857' stroke-miterlimit='10'/%3E%3C/svg%3E");
		        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.2 84.55'%3E%3Cpath d='M13.01 36.92l16.58,38.77c2.27,5.32,8.43,7.79,13.75,5.51,5.32-2.27,7.79-8.43,5.51-13.75l-24.87-58.16c-2.43-5.68-9.01-8.32-14.69-5.89-5.68,2.43-8.32,9.01-5.89,14.69l1.95,4.56' fill='none' stroke='%23000' stroke-width='4.2857' stroke-miterlimit='10'/%3E%3C/svg%3E");
	}
	.item .ttl2 {
		padding: calc(var(--u) * 19.2) calc(var(--u) * 13.7) 0;
		font-size: calc(var(--u) * 17);
		line-height: calc(var(--u) * 25);
	}
	.item .ttl2::before,
	.item .ttl2::after { width: var(--line-sp); margin-top: calc(var(--u) * 4.4); }

	/* 1マス 158.8×213.1 */
	.item .list { width: calc(var(--u) * 317.6 + 1px); margin: calc(var(--u) * 23.3) 0 0 calc(var(--u) * 16.2); }
	.item .list li { width: calc(var(--u) * 158.8 + 1px); height: calc(var(--u) * 213.1 + 1px); }
	.item .list a {
		padding: calc(var(--u) * 12.2);
		background-position: calc(var(--u) * 2) 0, calc(var(--u) * 2) 100%, 0 calc(var(--u) * 3.5), 100% calc(var(--u) * 3.5);
		background-size: calc(var(--u) * 154.8) 1px, calc(var(--u) * 154.8) 1px, 1px calc(var(--u) * 206.3), 1px calc(var(--u) * 206.3);
	}
	.item .list .img-box { width: calc(var(--u) * 133); height: calc(var(--u) * 133); }
	.item .list .img-box img { width: calc(var(--u) * 105.7); height: calc(var(--u) * 105.7); }
	.item .list .text {
		margin-top: calc(var(--u) * 5.5);
		font-size: calc(var(--u) * 12);
		line-height: calc(var(--u) * 19);
	}
	.item .list .new { left: calc(var(--u) * 22.8); top: calc(var(--u) * 21.3); width: calc(var(--u) * 71); }   /* 写真の四角の左上。四角の端から 10.6u */

	.item.note   { --gap-sp: 0px;                    --line-sp: calc(var(--u) * 86.2);  --clip-x-sp: calc(var(--u) * 320.06); --clip-y-sp: calc(var(--u) * 13.1); }
	.item.pen    { --gap-sp: calc(var(--u) * 60.2);  --line-sp: calc(var(--u) * 121.6); --clip-x-sp: calc(var(--u) * 41.37);  --clip-y-sp: calc(var(--u) * 19.05); }
	.item.eraser { --gap-sp: calc(var(--u) * 60.1);  --line-sp: calc(var(--u) * 74.4);  --clip-x-sp: calc(var(--u) * 306.1);  --clip-y-sp: calc(var(--u) * 19.2); }
	.item.case   { --gap-sp: calc(var(--u) * 56.5);  --line-sp: calc(var(--u) * 113.5); --clip-x-sp: calc(var(--u) * 338.67); --clip-y-sp: calc(var(--u) * 32.09); }

	/* ページトップ（画面に固定せず、カンプの位置。右20.1、円の下端からセクションの終わりまで41） */
	.items-page .pagetop { --pt-r: calc(var(--u) * 20.1); --pt-b: calc(var(--u) * 41); }
}