@charset "utf-8";

/*=============================== 共通 =====*/
/* KOKUYO共通テンプレート（GST）のコンテンツエリアに入れる前提。
   ヘッダー・フッターを崩さないよう、要素への指定はすべて .campus の中に閉じる。
   :where() は詳細度を足さないので、各セクションの指定がこれまでどおり勝つ */
:where(.campus), :where(.campus) *, :where(.campus) *::before, :where(.campus) *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* KOKUYO共通ヘッダーの上のパンくず（ページのタイトル）は出さない（.campus の外への唯一の指定）。
   KOKUYO の JS（Headbreadcrumb.js）は、パンくずの最後（今いるページ）を消し、項目が残らなければパンくずごと消す。
   テンプレートのままなら1項目なので消えるが、CMS では親ページ（まなびレシピTOP など）が残り、Campus の帯の上に親のタイトルが出る。Campus の全ページで消す */
#headBreadcrumb { display: none; }

/* KOKUYO側は html / body の文字サイズが 1px（28rem = 28px の設計）。
   継承される値はここで指定し直す。書き漏らすと KOKUYO の値を拾う */
.campus {
	align-self: stretch;   /* KOKUYOの main は子要素を中央寄せで縮めるため。width:100% だと1280px未満で左が切れる */
	min-width: 1280px;
	/* 画面が1280pxより狭い PC 幅（751〜1279px）では、ページ全体を画面幅に合わせて縮小する（1280pxのままだと横にはみ出す）。
	   縮小率はスクロールバーを除いた表示幅 ÷ 1280 を JS が --pc-zoom に入れる（js/script.js・js/study-recipes.js の先頭）。1280px以上と SP は 1 */
	zoom: var(--pc-zoom, 1);
	background: #fff;
	color: #231815;
	font-family: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	/* ↓ KOKUYOの body（._wf）が継承させる文字組みを既定に戻す。
	   特に font-size-adjust が効くと字面の大きさが変わり、縦書きのキャッチが1文字ぶん詰まる */
	font-size-adjust: none;
	font-kerning: auto;
	text-rendering: auto;
	-moz-osx-font-smoothing: auto;
}

:where(.campus) img { display: block; max-width: 100%; height: auto; }
:where(.campus) picture { display: block; }
:where(.campus) ul { margin: 0; padding: 0; list-style: none; }
:where(.campus) p, :where(.campus) h2 { margin: 0; }
:where(.campus) a { color: inherit; text-decoration: none; }
:where(.campus) button { padding: 0; border: none; background: none; cursor: pointer; font: inherit; }

/* 横のはみ出しを隠す。hidden だと中の position: sticky（MV の4枚）が効かないので clip（clip が無いブラウザは hidden のまま） */
.main { overflow: hidden; overflow: clip; }

/* SPだけで出す文字（MVのキャッチの全角スペースなど） */
.sp { display: none; }

.section-inline-wrapper {
	width: 90%;
	max-width: 1040px;
	margin: 0 auto;
}

/*=============================== 固定表示（ブランドコンセプト以降） =====*/
/* MVの上では出さず、ブランドコンセプトのエリアに入ってから表示する。
   ページトップも同じ（MVの上では押す意味がなく、4枚目のキャッチと重なる） */
.side-nav,
.menu-btn,
.pagetop {
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s;
}
.scrolled .side-nav,
.scrolled .menu-btn,
.scrolled .pagetop {
	opacity: 1;
	visibility: visible;
}
/* KOKUYO共通フッターの領域に入ったら隠す。左ナビがフッターに覆いかぶさるのと、
   ページトップがフッター側のものと二重になるのを避ける（切り替えは js/script.js） */
.foot .side-nav,
.foot .menu-btn,
.foot .pagetop {
	opacity: 0;
	visibility: hidden;
}

/*=============================== ハンバーガー（右上固定） =====*/
/* ハンバーガーの位置：画面の右端からと KOKUYO のヘッダーの下からを、いつも同じ空き（--menu-gap）にする。
   ヘッダーは画面幅に比例して高くなる（1280px で 44px、上限 73px）ので、その高さは js（fitPc）が測って --head-h に入れる。
   空きは画面幅によらず 41px（幅に比例して広げると、1920px でボタンの上端が 126px まで下がる）。
   1280px より狭い PC 幅は .campus の zoom で全体と一緒に縮む。単体版はヘッダーが無いので既定値（上の余白 43px） */
.campus { --menu-gap: 41px; }
.menu-btn {
	position: fixed;
	top: calc(var(--head-h, 43px) + var(--menu-gap));
	right: var(--menu-gap);
	z-index: 30;
	width: calc(40px / var(--pc-zoom, 1));    /* 画面上で常に 40×40（線の太さと同じく縮小率で割る） */
	height: calc(40px / var(--pc-zoom, 1));
}
/* 線の太さ 4px・間隔 13px は「画面上の px」で一定にする（端末の幅で太さが変わると、3本の太さがそろわない）。
   1280px より狭い PC は .campus の zoom で縮むので、縮小率で割って画面上で 4px にする。3本の線の送り（4＋13）が画面上で整数 px なら、3本とも同じ太さに描かれる */
.menu-btn span {
	display: block;
	height: calc(4px / var(--pc-zoom, 1));
	background: #1ba2de;
	transition: transform .3s, opacity .3s;
}
.menu-btn span + span { margin-top: calc(13px / var(--pc-zoom, 1)); }

/*=============================== ハンバーガーメニュー =====*/
/* カンプ（開いた状態）：パネル 220×280、画面の上から140.7px・右から41px、
   行ピッチ70px、区切り線 5px #1ba2de（左右8px内側）、文字19px SemiBold */
.menu {
	position: fixed;
	top: calc(var(--head-h, 43px) + var(--menu-gap) + 71.7px);   /* ボタン（40px）の下端から 31.7px（カンプの空き）。ボタンと一緒に動く */
	right: var(--menu-gap);
	z-index: 25;
	width: 220px;
	background: #f0f7fc;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s;
}
.scrolled.open-menu .menu { opacity: 1; visibility: visible; }
.menu ul { padding: 0 8px; }
.menu li {
	display: flex;
	align-items: center;
	height: 70px;
}
.menu li + li { border-top: 5px solid #1ba2de; }
.menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 19px;
	font-weight: 600;
	color: #231815;
	letter-spacing: .02em;
	padding-bottom: 6.4px;   /* カンプの文字は行の中央より3.2px上 */
}
/* 子メニューあり。右端に下向きの山（カンプの線をそのままSVGにしている） */
.menu .parent > a::after {
	content: "";
	width: 19.8px;
	height: 9.9px;
	margin-right: 3.4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.8 9.9'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='2.5' points='1.2 1.2 9.9 8.7 18.6 1.2'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* 子メニュー（まなびレシピ）。PCのカンプには無いので、SPカンプの比率をPCの文字サイズに合わせて組んだ */
.menu .parent { display: block; height: auto; padding-bottom: 15px; }
.menu .parent > a { height: 70px; }
.menu .parent li { height: 40px; }
.menu .parent li + li { border-top: none; }
.menu .parent ul a { padding-left: 26px; font-size: 17px; }
.menu .parent .current a { color: #e87a90; }   /* 現在地は桃色 */
.menu .parent ul a { transition: color .3s; }
.menu .parent ul a:hover { color: #bebebe; }   /* 子メニューはマウスオーバーでグレー（まなびレシピ詳細のカンプの注記） */

/* 開いている間はハンバーガーを × にする。上下の線を真ん中の線の位置（線の太さ4＋間隔13＝17px）へ寄せて回す。
   線の長さはボタンの幅の 1.2857倍（カンプの × は 55px のボタンに 50×50。40px のボタンでは同じ比率で 36.4×36.4） */
.open-menu .menu-btn span:nth-child(1) { transform: translateY(calc(17px / var(--pc-zoom, 1))) rotate(45deg) scaleX(1.2857); }
.open-menu .menu-btn span:nth-child(2) { opacity: 0; }
.open-menu .menu-btn span:nth-child(3) { transform: translateY(calc(-17px / var(--pc-zoom, 1))) rotate(-45deg) scaleX(1.2857); }

/*=============================== サイドナビ（左固定） =====*/
/* 5段とも同じ高さ（カンプは 768px を5等分）。段の間は白の1px */
.side-nav {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 20;
	height: calc(100vh / var(--pc-zoom, 1));   /* 画面の高さいっぱい。1280px より狭い PC 幅ではページ全体を縮小（.campus の zoom）するので、縮小率で割り戻す */
	background: rgba(255, 255, 255, .8);   /* お知らせの方眼・関連リンクの点線が左端近くまで来るので、ラベルが読めるよう下地を敷く。少し透かす */
}
.side-nav ul {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.side-nav li { display: flex; flex: 1 0 0; }
.side-nav li + li { border-top: 1px solid #fff; }

.side-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 83px;
	border-left: 40px solid #bebebe;
	writing-mode: vertical-rl;
	text-orientation: mixed;   /* 英字は横倒し */
	font-size: 16px;
	font-weight: 600;
	color: #bebebe;
	line-height: 1;
	transition: opacity .3s;
}
.side-nav a:hover { opacity: .5; }   /* カンプの注記「マウスオーバーすると色が50%薄くなる」 */

.side-nav .current a {
	border-left-color: #1ba2de;
	color: #1ba2de;
}

/* SPの下部ナビの開閉つまみ。PCでは出さない */
.nav-btn { display: none; }

/*=============================== メインビジュアル =====*/
/* PCのキャッチは、文字なしの写真（mainV0N_bg.jpg）の上に文字だけの SVG（mv0N_txt.svg）を重ねる。
   高さはコクヨ企業サイトと同じ「画面いっぱい」：1枚目は「画面の高さ − KOKUYO のヘッダー」、2〜4枚目はヘッダーが流れていった後の
   画面いっぱい（1枚目 ＋ ヘッダー）。768px が下限（1枚目を 768px 固定にするなら --mv-h1 を 768px にする）。
   1280px より狭い PC 幅ではページ全体を縮小する（.campus の zoom）ので、100vh は縮小率で割り戻す。写真は cover で切れ、文字 SVG は 768px の枠のまま（下の .txt）。
   （aspect-ratio と max-height で書くと、max-height が幅の上限にも移って MV が 1280px 幅に縮むので使わない） */
section.mv {
	position: relative;
	--mv-head: var(--head-h, 43px);   /* KOKUYO のヘッダーの高さ（js/script.js の fitPc が測る。単体版は既定値） */
	--mv-h1: max(768px, calc(100vh / var(--pc-zoom, 1) - var(--mv-head)));
	--mv-h: calc(var(--mv-h1) + var(--mv-head));
}
/* 切り替え（コクヨ企業サイト https://www.kokuyo.com/ のトップと同じ仕組み）。
   4枚を縦に並べ、それぞれ画面の上端に貼り付く（position: sticky）。スクロールすると次の1枚が下から上がってきて前の1枚に被さる。
   ページの高さに4枚ぶんが入るので、スクロールバーでもホイールでもスワイプでもキーでも同じ動き。
   1枚ずつ止まるのは scroll-snap（html の .mv-snap。MV の中にいる間だけ js/script.js が付ける。4枚目を過ぎたら外して本文をふつうにスクロール）。
   止まる位置の目印は下の疑似要素4つ（1枚目はページの先頭） */
section.mv .con01 {
	position: sticky;
	top: 0;
	height: var(--mv-h);
}
section.mv .con01:first-child { height: var(--mv-h1); }
:root.mv-snap { scroll-snap-type: y mandatory; }
/* 止まる位置（snap の目印）。sticky の4枚自身を目印にすると Chrome が「貼り付いた後の位置」で計算して上へ戻れなくなるので、
   動かない空の箱（疑似要素4つ）を4枚それぞれの自然な位置に置く（コクヨ企業サイトが snap 用のクローンを別に持つのと同じ理由）。
   scroll-snap-stop: always は付けない（コクヨ企業サイトも実質なし） */
section.mv::before, section.mv::after,
section.mv .list::before, section.mv .list::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--mv-h);
	scroll-snap-align: start;
	pointer-events: none;
}
/* 1枚目：ページの先頭（0）で止める。箱をページの上端より上まで伸ばしておくと、止まる位置はページの先頭に丸められる。
   ヘッダーの高さを測って scroll-margin-top に入れる方法は、読み込みの途中でヘッダーが伸び縮みする（1920px で 49→64px）と古い位置に止まり、zoom の中では 2px ずれた */
section.mv::before { top: -9999px; height: calc(9999px + var(--mv-h1)); }
section.mv .list { position: relative; }
section.mv .list::before { top: var(--mv-h1); }                                 /* 2枚目 */
section.mv .list::after { top: calc(var(--mv-h1) + var(--mv-h)); }              /* 3枚目 */
section.mv::after { top: calc(var(--mv-h1) + var(--mv-h) * 2); }                /* 4枚目 */
/* 写真は cover のまま動かさない（拡大・移動するとトリミングが極端に変わるため） */
section.mv .img-box { overflow: hidden; }
/* SCROLL ボタン（PSD どおり）。
   押すと4枚の MV を飛ばして「キャンパスとは」（#concept）へ（なめらかスクロール。snap の外し方は js/script.js のページ内リンクと同じ）。
   高さ0の箱を MV の最後に置き、sticky で画面の下端に貼り付ける。4枚目を過ぎると MV の終わりと一緒に上へ流れていく。
   PC：左下に縦書きの「SCROLL」と下向きの矢印。左端から 30px、矢印の下端が画面の下端から 30px。文字は Noto Sans の Medium 14.37px・字間 30（.03em）・色 #fef4e5、矢印は白
   （PSD の値。矢印は PSD に埋め込まれた Illustrator の線（33×18 の枠・線幅3・角と端が丸）を 0.458 倍＝15.1px 幅。影は PSD に無いので付けない）。
   キャッチが黒の KV（2枚目）がボタンの下にあるときは、文字・矢印とも黒（キャッチと同じ #211815。js/script.js が section.mv に .black を付ける） */
section.mv .scroll {
	position: sticky;
	bottom: 0;
	z-index: 5;
	height: 0;
}
section.mv .scroll a {
	position: absolute;
	left: 30px;
	bottom: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 15.1px;
	text-decoration: none;
}
section.mv .scroll .label {
	writing-mode: vertical-rl;
	font-size: 14.37px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .03em;
	color: #fef4e5;
	transition: color .3s;
}
section.mv .scroll .arrow {
	display: block;
	width: 15.1px;
	height: auto;
	margin-top: 15px;
	overflow: visible;
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .3s;
}
section.mv.black .scroll .label { color: #211815; }
section.mv.black .scroll .arrow { stroke: #211815; }
section.mv .img-box,
section.mv .img-box picture,
section.mv .img-box img { width: 100%; height: 100%; }
section.mv .img-box img {
	object-fit: cover;
	object-position: center;   /* 縦は中央 */
}
/* キャッチの文字だけの SVG。写真の上に重ねる（picture.txt。PC は mv0N_txt.svg、SP は mv0N_txt_sp.svg）。
   SVG の中に MV の枠（1280×768）での位置と寄せ方（preserveAspectRatio）を持っているので、cover にしない（すると文字が拡大されて切れる）。
   PC では MV が 768px より高くなっても文字は大きくしない：枠を 768px の高さのまま、寄せた側（1〜3枚目は上、4枚目と英語は下）の端に付ける。
   SP は枠いっぱいのまま（文字 SVG が slice なので高さに関係なく同じ大きさ。縦が短い画面で縮める仕組みは SP の欄） */
section.mv .img-box .txt {
	position: absolute;
	inset: 0;
}
@media screen and (min-width: 751px) {
	section.mv .img-box .txt { bottom: auto; height: 768px; }
	section.mv .con01:nth-child(4) .img-box .txt,
	.en-page section.mv .img-box .txt { top: auto; bottom: 0; }
}
section.mv .img-box .txt img { object-fit: fill; }
/* 3・4枚目のキャッチに薄いドロップシャドウ（写真の明るい部分と重なると読みづらいため）。
   デザインデータの値：黒・乗算・不透明度 30%・ずらしなし・ぼかし約 5pt（文字 14.85pt の原稿）。
   Web の文字 25px に換算して、ぼかし 8px（CSS の drop-shadow は半径の半分が標準偏差。原稿で影が文字の外へ広がる幅 8.6pt ≒ 14px と、3σ=12px でほぼ同じ）。
   1・2枚目は付けない（1枚目は空の上の白文字、2枚目は黒文字） */
section.mv .con01:nth-child(3) .img-box .txt img,
section.mv .con01:nth-child(4) .img-box .txt img { filter: drop-shadow(0 0 8px rgba(0, 0, 0, .3)); }
/* 文字は SVG で見せるので、HTMLの文字は画面に出さない（読み上げ・検索用に残す。PC・SP とも） */
section.mv .catch {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*=============================== テープのボタン（共通） =====*/
/* 箱は「テープ実寸 + 余白32px」（32px はシールで貼っていたころの余白。位置合わせに組み込まれているので残している）。
   マウスオーバーの色違い（.on）は同じ位置に重ねてフェードさせる */
.btn button,
.btn a {
	position: relative;
	display: flow-root;   /* 画像の余白16pxが a と相殺されないように */
	transform-origin: 16px 16px;
}
/* 画像の余白16pxは、シールで貼っていたころのめくれ用。コマ撮り（PaperMotion）にした今は透明な余白だが、
   箱の幅やマージンの値に組み込まれているので残している */
.btn img,
.fusen img { width: calc(100% - 32px); margin: 16px; }
.btn img.on {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
/* マウスで乗せられる端末だけ（iPhone で「もっと見る」をタップすると、閉じるが最初から乗せた色のままになるため。
   タッチ端末はタップした所に :hover が残る）。付箋とボタンを組で動かす js も同じ条件（js/script.js・js/study-recipes.js） */
@media (hover: hover) {
	.btn button:hover .on,
	.btn a:hover .on { opacity: 1; }
}
/* マウスに反応するのはテープの画像だけ（閉じるの上の、付箋にもかかっていない所でボタンの影が消えないように）。
   箱（p・button・a）は傾ける前の四角で、テープのまわりの透明な余白も含むので反応させない。
   画像に乗ると祖先の箱にも mouseenter・:hover が届くので、ボタンのホバー（js）・色違い（.on）・クリック・キーボード操作はそのまま効く */
.btn,
.btn button,
.btn a { pointer-events: none; }
.btn img:not(.on) { pointer-events: auto; }
/* 付箋に乗せてもボタンは色違いにしない（付箋を押してもボタンと同じ動きにはならないため） */
/* ホバーで押されたように傾ける。
   テープの画像を、左端を軸に少し回してゆがませる。付箋に乗せたときも同じにするため、:hover ではなく
   js/script.js・js/study-recipes.js が組（付箋とボタン）のホバーで .btn に付ける .press で動かす。
   --press-rot は回す角度、--press-skew はゆがみ、--press-origin は軸、--press-dur は時間。
   詳細ページの「他のまなびレシピ」・「Campusの文具」「取り扱い店舗一覧」のボタンも同じ値を使う（css/recipe-detail.css）ので、.campus に置いている */
.campus { --press-rot: 1deg; --press-skew: 1deg; --press-origin: 0 50%; --press-dur: .3s; }
.btn img { transform-origin: var(--press-origin); transition: transform var(--press-dur); }
.btn img.on { transition: opacity .3s, transform var(--press-dur); }
.btn.press img { transform: rotate(var(--press-rot)) skewX(var(--press-skew)); }

/*=============================== キャンパスとは =====*/
section.concept {
	padding: 85px 0 67px;
	background-color: #fff;
	background-image: repeating-linear-gradient(to bottom, #f0f0f0 0 2.5px, transparent 2.5px 40px);
	background-repeat: no-repeat;
	/* 罫線は画面の端から左104.64px・右40.93px空ける（カンプ：x=104.64〜1239.07。幅は画面に追従） */
	background-position: 104.64px 40px;
	background-size: calc(100% - 145.57px) calc(100% - 85.5px); /* 開閉で高さが変わるので相対指定 */
}
section.concept .ttl img { transform-origin: 0 0; }
section.concept .ttl .ttl01 { width: 482.6px; margin-left: 200.5px; transform: rotate(-3deg); }
section.concept .ttl .ttl02 { width: 494.4px; margin: -14.8px 0 0 335.5px; transform: rotate(-3.32deg); }

section.concept .btn.more { position: relative; z-index: 2; margin: 1.2px 0 0 347.2px; }
section.concept .btn.more button { width: 252.3px; transform: rotate(-4.38deg); }

section.concept .img01 {
	width: 625px;
	margin: -51px 0 0 224.2px;   /* もっと見るがシール化して箱が32px高くなったぶんを詰める */
	border: 8px solid #fff;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
	/* 傾き2度。付箋と同じコマ撮りで置く（js/script.js）ので、プラグインの transform とぶつからないよう transform でなく rotate で持つ。
	   プラグインの回転の中心（箱の中央）に合わせて中央で回し、左上で回していたころとの差を translate で戻す（見た目の位置は同じ） */
	rotate: 2deg;
	translate: -7.66px 10.78px;
}
section.concept .img01 img { width: 609px; height: 412px; object-fit: cover; object-position: center bottom; }

/*=============================== メッセージ =====*/
section.statement {
	padding: 72.5px 0 88.7px;
	background-image: url(../images/statement_bg01.webp);
	background-repeat: no-repeat;
	background-position: calc(50% - 52px) -609px;
	/* 左に52pxずらしているぶん、2141 - 52*2 = 2037px を超えると右端が足りなくなる */
	background-size: max(2141.6px, calc(100% + 104px)) auto;
}
/* 背景を止めて見せる環境（下のPC指定が効かないとき）は、展開で背が伸びるぶん写真を下げる */
section.statement.open { background-position: calc(50% - 52px) -404px; }

/* PCは背景を画面に固定し、セクションを窓のように前景だけが通り過ぎる。
   50% - 191px は、セクション（閉じた状態 768px）が画面の中央に来たときカンプと同じ見え方になる位置 */
@media screen and (min-width: 751px) and (prefers-reduced-motion: no-preference) {
	section.statement,
	section.statement.open {
		background-position: calc(50% - 52px) calc(50% - 191px);
		background-attachment: fixed;
	}
}
section.statement .ttl img {
	width: 651.3px;
	margin-left: 201.3px;
	transform-origin: 0 0;
	transform: rotate(2.21deg);
}

section.statement .btn.more { position: relative; z-index: 2; margin: -114px 0 0 210.9px; }
section.statement .btn.more button { width: 252.3px; transform: rotate(6.69deg); }

/*=============================== 付箋（キャンパスとは／メッセージ） =====*/
/* 位置・傾きの調整はこの変数ブロックだけを触れば足りる。
   付箋・閉じるの位置は「ひとつ前の要素の下端」からの相対値なので、
   前の要素を動かすと下もまとめて動く（ブロックごと動かしたいときはこれが早い）。
   幅は「付箋の実寸 + 32px」。32px は付箋をシールで貼っていたころの余白（画像の margin 16px）。位置合わせに組み込まれているので残している
   --f*-tx / --f*-ty は付箋の箱の左上から本文の1行目の上端まで。
   キャンパスとは：付箋01（青）・付箋02（桃）・閉じる はすべて展開の中。
   メッセージ　　：付箋01（ミント）は閉じていても見えている。付箋02（黄）・閉じる が展開の中 */
section.concept {
	--f1-x: 212.2px;  --f1-y: -18.6px;  --f1-w: 517.4px;  --f1-rot: -5.21deg;
	--f1-tx: 85px;    --f1-ty: 34.1px;
	--f2-x: 398.8px;  --f2-y: -209.2px; --f2-w: 504.3px;  --f2-rot:  4.11deg;
	--f2-tx: 54.5px;  --f2-ty: 87px;
	--close-x: 197px; --close-y: -161.6px; --close-rot: -4.38deg;
}
section.statement {
	--f1-x: 360.2px;  --f1-y:  27.6px;  --f1-w: 506px;    --f1-rot: -2.34deg;
	--f1-tx: 71.8px;  --f1-ty: 73.6px;
	--f2-x: 162.2px;  --f2-y: -115.5px; --f2-w: 514.2px;  --f2-rot:  2.21deg;
	--f2-tx: 65.5px;  --f2-ty: 95.9px;
	--close-x: 536.3px; --close-y: -141.8px; --close-rot: 11.9deg;
}

/* 展開前は高さ 0 で伏せておく。display:none にしないのは、
   シールアニメーションが幅を実測できるようにしておくためだった（シールをやめた今は理由なし。変えるなら開閉を確かめ直す） */
.detail { height: 0; overflow: hidden; }
.open .detail { height: auto; overflow: visible; }
.open .btn.more { display: none; }

.fusen01,
.fusen02 { position: relative; }
.fusen01 .fusen,
.fusen02 .fusen { transform-origin: 16px 16px; display: flow-root; }   /* 画像の余白16pxが親と相殺されないように */
.fusen01 .text-box,
.fusen02 .text-box {
	position: absolute;
	color: #3078b4;
	font-size: 19px;
	font-weight: 600;
	line-height: 42px;
	letter-spacing: .13em;
	white-space: nowrap;
}

.fusen01 { width: var(--f1-w); margin: var(--f1-y) 0 0 var(--f1-x); }
.fusen01 .fusen { transform: rotate(var(--f1-rot)); }
.fusen01 .text-box { left: var(--f1-tx); top: var(--f1-ty); }

.fusen02 { width: var(--f2-w); margin: var(--f2-y) 0 0 var(--f2-x); }
.fusen02 .fusen { transform: rotate(var(--f2-rot)); }
.fusen02 .text-box { left: var(--f2-tx); top: var(--f2-ty); }

/* 閉じるも付箋と同じくコマ撮りで置く。「閉じる」は常に最前面 */
.detail .btn.close { position: relative; z-index: 3; width: 252.3px; margin: var(--close-y) 0 0 var(--close-x); }
.detail .btn.close button { transform: rotate(var(--close-rot)); }

/* 展開で「もっと見る」が消えるぶん、上の要素を詰め直す */
section.concept.open { padding-bottom: 134.4px; }
section.concept.open .img01 { margin-top: -2.5px; }
section.statement.open { padding-bottom: 114.4px; }

/*=============================== 新シンボルマーク =====*/
section.symbol {
	padding: 91.2px 0 77.1px;
	background: url(../images/symbol_bg.jpg) no-repeat center top / cover;
	text-align: center;
}
section.symbol .ttl img {
	width: 596.8px;
	margin-left: 223.1px;
	transform-origin: 0 0;
	transform: rotate(-1.97deg);
}
section.symbol .lead {
	margin-top: 10.5px;
	color: #fff;
	font-size: 19px;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: .16em;
}
/* 動画。箱いっぱいに置く（白枠は付けない）。
   （719×408 は 16:9 よりわずかに縦長なので、左右が約3px ずつ切れる。SP の 331.5×189.5u も同じく左右が約2u ずつ） */
section.symbol .movie-box {
	position: relative;
	width: 719px;
	height: 408px;
	margin: 49.7px 0 0 159px;
	background: #b5b5b5;
}
section.symbol .movie-box video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 動画の操作ボタン。まなびレシピの詳細の動画と同じ：音なしで自動再生し、右下に「再生／一時停止」「音あり／ミュート」。
   ボタンの画像（images/study-recipes/icon_*.svg）・大きさ 32px・間隔 8px・端から 16px も同じ（PC・SP 共通）。
   ボタンの絵は「押すとどうなるか」を出す。.playing／.sound は js/script.js が .movie-box に付ける（css/recipe-detail.css の .recipe-detail .movie .ctrl と同じ作り） */
section.symbol .ctrl {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
}
section.symbol .ctrl button { width: 32px; transition: opacity .4s; }
@media (hover: hover) {
	section.symbol .ctrl button:hover { opacity: .7; }
}
section.symbol .ctrl img { display: none; width: 100%; height: auto; object-fit: fill; }
section.symbol .movie-box.playing .ctrl .pause,
section.symbol .movie-box:not(.playing) .ctrl .start,
section.symbol .movie-box:not(.sound) .ctrl .on,
section.symbol .movie-box.sound .ctrl .off { display: block; }

/*=============================== お知らせ =====*/
section.topics {
	padding: 38.2px 0 20.8px;
	background-color: #fff;
	background-image:
		repeating-linear-gradient(to bottom, #f0f0f0 0 2.5px, transparent 2.5px 39.93px),
		repeating-linear-gradient(to right, #f0f0f0 0 2.5px, transparent 2.5px 40.71px);
	background-repeat: no-repeat, no-repeat;
	/* 方眼も画面の端から空ける（カンプ：横線 x=39.27〜1239.80、縦線 x=69.77〜1209.76） */
	background-position: 39.27px 65.42px, 68.52px 35.8px;
	background-size: calc(100% - 79.47px) 641.13px, calc(100% - 137.51px) 700.62px;
}
section.topics .ttl img { width: 198.7px; margin-left: 419.3px; }
/* 英語ページの見出し。画像は _en 版に差し替わる（js/en-image-swap.js）。
   英語の手書きは日本語と大きさ・行数が違うので置き直す。h2 の高さは日本語と同じに固定して（下の中身の位置を変えない。メッセージだけカンプのとおり31.1px高く）、
   見出しは top でずらす（余白で動かすと、後ろの要素のマイナスの余白と相殺されて効かないことがある）。
   横はカンプの位置。縦は「見出しの上端から、その下の付箋・動画枠・カードまで」がカンプと同じになる値。
   > * は見出しアニメ（js/heading-anim.js）が画像を包む span（無いときは img / picture） */
.en-page section.concept .ttl { height: 127.17px; }
.en-page section.concept .ttl .ttl01,
.en-page section.concept .ttl > :first-child { display: none; }   /* 日本語の1行目。見出しアニメの span ごと隠す（残すと1行分の高さが残る） */
.en-page section.concept .ttl .ttl02 { width: 587.55px; margin: 0 0 0 231.85px; transform: none; }
.en-page section.concept .ttl > * { position: relative; top: 1.03px; }
.en-page section.statement .ttl { height: 108.57px; }
.en-page section.statement .ttl img { width: 548.8px; margin: 0 0 0 245.25px; transform: none; }
.en-page section.statement .ttl > * { position: relative; top: -28.5px; }
.en-page section.symbol .ttl { height: 51.47px; }
.en-page section.symbol .ttl img { width: 572.16px; margin: 0 0 0 220.85px; transform: none; }
.en-page section.symbol .ttl > * { position: relative; top: -17.55px; }
.en-page section.topics .ttl { height: 65.55px; }
.en-page section.topics .ttl img { width: 147.54px; margin: 0 0 0 450.85px; }
.en-page section.topics .ttl > * { position: relative; top: 6.13px; }

/* 上はクリップのはみ出し、左右と下はカードの白地（枠の外に9.5px）のぶん広げてある。
   Swiper は padding を除いた幅でスライドを並べる */
section.topics .list {
	width: 1053.2px;
	margin: 2.8px 0 0 -8px;
	padding: 20px 10px 10px;
}
section.topics .swiper-wrapper { align-items: stretch; }
section.topics .con01 { height: auto; }
/* 枠の線は角で途切れる（線の端が角から7.2px内側で止まる） */
section.topics .con01 a {
	--line: #1ba2de;
	position: relative;
	display: block;
	height: 100%;
	padding: 22.1px 22px 21.2px;
	background-color: #fff;
	background-image:
		linear-gradient(var(--line), var(--line)),
		linear-gradient(var(--line), var(--line)),
		linear-gradient(var(--line), var(--line)),
		linear-gradient(var(--line), var(--line));
	background-repeat: no-repeat;
	background-size: 3px calc(100% - 14.4px), 3px calc(100% - 14.4px), calc(100% - 14.4px) 3px, calc(100% - 14.4px) 3px;
	background-position: left 7.2px, right 7.2px, 7.2px top, 7.2px bottom;
	box-shadow: 0 0 0 9.5px #fff;
}
/* マウスオーバー：文字はグレー、罫線は薄く（カンプの3枚目の色） */
section.topics .con01 a:hover { --line: #aad1ef; color: #9fa0a0; }

/* クリップ。Swiper のループは DOM の並びを入れ替えるので、nth-child ではなく元の番号で色を決める */
section.topics .con01 a::before {
	content: "";
	position: absolute;
	left: var(--clip-x);
	top: var(--clip-y);
	width: var(--clip-w);
	height: var(--clip-h);
	background: no-repeat center / contain;
}
section.topics .con01[data-swiper-slide-index="0"] a::before,
section.topics .con01[data-swiper-slide-index="3"] a::before { --clip-x: 256.3px; --clip-y: -14.4px; --clip-w: 40.6px; --clip-h: 87.8px; background-image: url(../images/clip01.svg); }
section.topics .con01[data-swiper-slide-index="1"] a::before,
section.topics .con01[data-swiper-slide-index="4"] a::before { --clip-x: 262.9px; --clip-y: -18.4px; --clip-w: 26.8px; --clip-h: 89.3px; background-image: url(../images/clip02.svg); }
section.topics .con01[data-swiper-slide-index="2"] a::before,
section.topics .con01[data-swiper-slide-index="5"] a::before { --clip-x: 253.2px; --clip-y: -19.8px; --clip-w: 51.6px; --clip-h: 84px; background-image: url(../images/clip03.svg); }

section.topics .img-box { display: block; width: 270px; margin: 0 auto; }
/* 写真の枠は 270×250（カンプ）。本番の画像は正方形のもの（270×270）もあるので、枠に合わせて上下を切る（PC・SP 共通） */
section.topics .img-box img { width: 100%; aspect-ratio: 270 / 250; object-fit: cover; }

section.topics .lead {
	display: block;
	margin-top: 19.7px;
	padding-bottom: 7.8px;
	border-bottom: 3px solid var(--line);
	font-size: 22px;
	font-weight: 500;
	line-height: 38.5px;
	letter-spacing: .02em;
}
section.topics .date {
	display: block;
	margin-top: 16.6px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .12em;   /* 本文と同じ字間 */
}
section.topics .text {
	display: block;
	margin-top: 14.6px;
	margin-right: -.12em;   /* 行末の字間で折り返しが早まらないように */
	word-break: keep-all;   /* 改行は HTML の <wbr>（文節の切れ目。素材の Word のゼロ幅スペースの位置）と空白でだけ */
	overflow-wrap: anywhere;   /* 切れ目の間が枠より長いときだけ、どこででも折り返す */
	color: #505050;
	font-size: 15px;
	line-height: 26.25px;
	letter-spacing: .12em;   /* カンプより広げると改行位置が変わる（Webフォントはカナの詰まりが弱い） */
}
section.topics .lead,
section.topics .date,
section.topics .text { transition: color .3s; }
section.topics .con01 a:hover .text { color: inherit; }

/* 前後の矢印。マウスオーバーで色が反転する */
section.topics .arrow { margin: 11.9px 4.6px 0 0; text-align: right; }
section.topics .arrow button {
	width: 68px;
	height: 68px;
	border: 3px solid #1ba2de;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Cpolyline fill='none' stroke='%231ba2de' stroke-width='3' stroke-miterlimit='10' points='37.1 45.8 22.3 31 37.1 16.2'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	vertical-align: top;
	transition: background-color .3s;
}
section.topics .arrow .next { margin-left: 14.1px; transform: scaleX(-1); }
section.topics .arrow button:hover {
	background-color: #1ba2de;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='3' stroke-miterlimit='10' points='37.1 45.8 22.3 31 37.1 16.2'/%3E%3C/svg%3E");
}

/*=============================== Campusの勉強法（「まなびかた」のアイデア） =====*/
section.idea {
	--idea-parallax-y: 0px;
	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	padding: 60.2px 0 108.8px;   /* レシピ一覧がシール化して箱の下端が16px下がったぶん */
}
section.idea::before {
	content: "";
	position: absolute;
	inset: -100px 0;
	z-index: -1;
	pointer-events: none;
	background-image: url(../images/idea_bg01.webp);
	background-repeat: no-repeat;
	/* 上に100px広げたぶんを足し、静止時はカンプの -406px と同じ見え方にする */
	background-position: calc(50% - 220px) -306px;
	/* 左に220pxずらしているぶん、画面が 2429 - 220*2 = 1989px を超えると右端が足りなくなる。
	   そこから先だけ、隙間が出ない大きさまで引き伸ばす（それ以下ではカンプどおりの2429px） */
	background-size: max(2429px, calc(100% + 440px)) auto;
	transform: translate3d(0, var(--idea-parallax-y), 0);
	will-change: transform;
}
/* PCは背景を画面に固定し、セクションを窓のように通過させる */
@media screen and (min-width: 751px) and (prefers-reduced-motion: no-preference) {
	section.idea::before {
		inset: 0;
		background-position: calc(50% - 220px) center;
		background-attachment: fixed;
		transform: none;
		will-change: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	section.idea::before { transform: none; will-change: auto; }
}
/* 見出し。
   デザインデータ（PDF）は 1280 幅でサイトと同じ座標（写真の枠の上端 218・左端 279.7 が一致）なので、
   PDF を2倍で描いて1行ずつ切り出した画像を、PDF の位置にそのまま置く：1行目 左 513.5・上 71、2行目 左 447・上 125.5（傾きも画像に入っているので回さない）。
   下の写真の位置はセクションの上端から 217.9。2行目の下の余白は写真の上の余白（26.2px）と相殺されて大きい方だけ効くので、
   写真までの距離そのもの（31.4px）を入れている。1行目の上の余白も h2 の外へ抜けるが、見出しの位置は PDF どおりになる */
section.idea .ttl .ttl01 { width: 304px; margin: 11px 0 0 393.5px; }
section.idea .ttl .ttl02 { width: 410px; margin: .5px 0 31.4px 327px; }
/* アイデアの見出し（英語）。英語版カンプには置かれていないので、手書きの素材（TIF）から作った 2行の画像 idea_ttl01_en.png を、
   日本語の2行の見出しの場所に置く。大きさはほかの英語見出しと同じ比率（TIF 1px = 0.2443px）。文字の範囲の中心を日本語の見出しの文字の中心にそろえ、下の写真は日本語と同じ位置 */
.en-page section.idea .ttl { height: 131.66px; }
.en-page section.idea .ttl .ttl02,
.en-page section.idea .ttl > :nth-child(2) { display: none; }   /* 日本語の2行目。見出しアニメの span ごと隠す */
.en-page section.idea .ttl .ttl01 { width: 696px; margin: 0 0 0 171.5px; }
.en-page section.idea .ttl > * { position: relative; top: -25.19px; }

section.idea .img01 {
	width: 738px;
	height: 508px;
	margin: 26.2px 0 0 159.7px;
	border: 8px solid #fff;
}
/* 写真もまなびレシピTOP へのリンク（ボタン「レシピ一覧を見る」と同じリンク先） */
section.idea .img01 a { display: block; height: 100%; }
section.idea .img01 picture { height: 100%; }
section.idea .img01 img { width: 100%; height: 100%; object-fit: cover; }

section.idea .text-box {
	position: relative;
	z-index: 0;
	width: 528.4px;
	height: 542.4px;
	margin: -53.4px 0 0 275px;
	padding: 62.6px 0 0 41.5px;
	color: #3078b4;
	font-size: 19px;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: .18em;
}
section.idea .text-box .fusen {
	position: absolute;
	left: -16px;
	top: -16px;
	z-index: -1;
	width: 560.4px;   /* 付箋実寸528.4px + 余白32px（シールだったころの名残。位置合わせに組み込み済み） */
	transform-origin: 16px 16px;
	transform: rotate(3.78deg);
}
section.idea .text-box p + p { margin-top: 40px; }

section.idea .btn { margin: -133.1px 0 0 662px; }
section.idea .btn a {
	width: 331.7px;   /* テープ実寸299.7px + めくり用の余白32px */
	transform: rotate(9.54deg);
}

/*=============================== 関連リンク =====*/
section.link {
	position: relative;
	padding: 68.3px 0 85.7px;
}
/* 点線と罫線。点は35.32px間隔・直径5.93px、線は40.36px間隔・太さ1.78px（同じ高さに重ねてある） */
section.link::before {
	content: "";
	position: absolute;
	/* 点線・罫線とも画面の端から空ける（カンプ：x=39.07〜1240.00。点の半径ぶん外側から） */
	left: 36.1px;
	right: 37px;
	top: 40.2px;
	height: 1095.7px;
	background-image:
		radial-gradient(circle at 2.97px 2.97px, #f0f0f0 0 2.97px, transparent 3.2px),
		linear-gradient(to bottom, transparent 2.08px, #f0f0f0 2.08px 3.86px, transparent 3.86px);
	background-position: 0 0, 2.97px 0;
	background-size: 35.32px 40.36px, calc(100% - 5.94px) 40.36px;
	background-repeat: repeat, repeat-y;
}

section.link .box {
	position: relative;
	width: 500px;
	margin: 0 auto;
	padding: 35.3px 0 39px;
	background: #f8f8f8;
}
section.link .box + .box { margin-top: 44.1px; padding-bottom: 28.7px; }
section.link .ttl {
	font-size: 24px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: .04em;
	text-align: center;
	color: #000;
}
section.link .list { margin-top: 39.4px; }
section.link li + li { margin-top: 40px; }
section.link .img-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 420px;
	height: 125px;
	margin: 0 auto;
}
section.link .img-box.line { border: 1px solid #b5b5b5; background: #fff; }
/* まなびかた診断・Carry Campus のバナーは PC と SP で画像が違うので picture */
section.link .text {
	display: block;
	margin: 5.6px 0 0 36.8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: .1em;
	color: #000;
}

/*=============================== ページトップ =====*/
/* 位置はカンプの座標を使わない。マウスオーバーで色が反転する */
.pagetop {
	position: fixed;
	right: 42px;
	bottom: 40px;
	z-index: 20;
}
.pagetop a {
	display: block;
	width: 68px;
	height: 68px;
	border: 3px solid #1ba2de;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Cg fill='none' stroke='%231ba2de' stroke-width='3' stroke-miterlimit='10'%3E%3Cline x1='31' y1='16.4' x2='31' y2='47.3'/%3E%3Cpolyline points='16.2 31.2 31 16.4 45.8 31.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 100% 100%;
	transition: background-color .3s;
}
.pagetop a:hover {
	background-color: #1ba2de;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3' stroke-miterlimit='10'%3E%3Cline x1='31' y1='16.4' x2='31' y2='47.3'/%3E%3Cpolyline points='16.2 31.2 31 16.4 45.8 31.2'/%3E%3C/g%3E%3C/svg%3E");
}

/*=============================== SP（750px以下） =====*/
/* SPカンプ（幅390px）の数値。--u はカンプの1px。画面幅に合わせて伸縮する。
   calc(var(--u) * N) の N はカンプ上の px。旧シールの余白（16px）だけは固定px */
@media screen and (max-width: 750px) {

	.campus { --u: calc(100vw / 390); min-width: 0; }
	.sp { display: inline; }

	/* サイドナビはSPでは画面下部のバーになる。
	   閉じているときは現在地の1行だけ、つまみ（.nav-btn）をタップすると5行に開く */
	/* ハンバーガーメニュー。
	   パネルは幅350・高さ600、左右20pxの内側、ハンバーガーの下53.8px。
	   区切り線は5px #1ba2de（左右20px内側）、文字22px、子メニューは20px */
	.menu {
		top: calc(var(--head-h, 51px) + var(--u) * 68.9);   /* ボタンの下端から 18.8u */
		left: calc(var(--u) * 20);
		right: calc(var(--u) * 20);
		width: auto;
	}
	.menu ul { padding: 0; }
	.menu li { display: block; height: auto; }
	.menu li + li { border-top: none; }
	.menu a {
		justify-content: flex-start;
		padding-left: calc(var(--u) * 18.9);
		font-size: calc(var(--u) * 22);
	}
	/* 行の高さ。区切り線（5px）を含めてカンプの位置に合わせてある */
	.menu > ul > li > a { height: calc(var(--u) * 93); padding-bottom: calc(var(--u) * 4); }
	.menu > ul > li + li { border-top: calc(var(--u) * 5) solid #1ba2de; }
	.menu > ul > li:nth-child(3) > a { height: calc(var(--u) * 93.4); padding-bottom: calc(var(--u) * 7); }
	.menu > ul > li:nth-child(4) > a { height: calc(var(--u) * 96.5); padding-bottom: calc(var(--u) * 8.7); }

	/* まなびレシピ。子メニューを開いた状態で出す */
	.menu .parent > a { height: calc(var(--u) * 75); padding: calc(var(--u) * 12) 0 0 calc(var(--u) * 18.9); }
	.menu .parent > a::after { width: calc(var(--u) * 19.8); height: calc(var(--u) * 9.9); margin: 0 calc(var(--u) * 22.2) 0 auto; }   /* 右端に寄せる */
	.menu .parent { padding-bottom: calc(var(--u) * 17.6); }
	.menu .parent ul { display: block; }
	.menu .parent li a {
		height: calc(var(--u) * 52.5);
		padding: 0 0 0 calc(var(--u) * 48.5);
		font-size: calc(var(--u) * 20);
	}
	.menu .parent .current a { color: #e87a90; }

	.side-nav {
		left: calc(var(--u) * 20);
		top: auto;
		bottom: calc(var(--u) * 20);
		width: calc(var(--u) * 350);
		height: auto;
		background: none;
	}
	.side-nav ul { display: block; height: auto; }
	.side-nav li { flex: none; background: #fff; }   /* 行の下地。マウスオーバーで a が50%になっても後ろが透けないように */
	.side-nav li:not(.current) { display: none; }   /* 閉じているときは現在地だけ */
	.open-nav .side-nav li { display: flex; }
	.side-nav li + li { border-top: none; }   /* PCの区切りは打ち消す（行の高さを45pxちょうどにする） */
	.side-nav li + li a { border-top: 1px solid #fff; }   /* 左の色ブロックの区切り */
	.side-nav a {
		width: 100%;
		height: calc(var(--u) * 45);
		justify-content: flex-start;
		padding-left: calc(var(--u) * 17.4);
		border-left-width: calc(var(--u) * 20);
		background: #fff;
		writing-mode: horizontal-tb;
		font-size: calc(var(--u) * 15);
	}
	/* つまみ。バーの右上に出る白いタブ（上の角だけ丸い） */
	.nav-btn {
		position: absolute;
		right: 0;
		top: calc(var(--u) * -20);
		display: block;
		width: calc(var(--u) * 80);
		height: calc(var(--u) * 20);
		border-radius: calc(var(--u) * 5) calc(var(--u) * 5) 0 0;
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpolyline fill='none' stroke='%231ba2de' stroke-width='2.5' points='29.75 14 40 8 50.25 14'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	}
	.open-nav .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='%231ba2de' stroke-width='2.5' points='29.75 8 40 14 50.25 8'/%3E%3C/svg%3E");
	}

	/* ハンバーガーは KOKUYO のヘッダーに隠れないよう、ヘッダーの下端から 20.1u（右端からの空きと同じ）に置き、
	   30 四方にする。線の間隔は3本が30に収まる 9 */
	/* ヘッダーの高さは固定の 51px ではなく、実際の高さ（--head-h。KOKUYO の SP ヘッダーも画面幅に比例する）の下から 20.1u */
	/* 線の太さ 4・間隔 9・ボタン 30 四方は u ではなく px 固定（u だと 430px の端末で 4.4px のような端数になり、3本の太さがそろわない）。
	   位置（上 20.1u・右 20.1u）は u のまま */
	.menu-btn { top: calc(var(--head-h, 51px) + var(--u) * 20.1); right: calc(var(--u) * 20.1); width: 30px; height: 30px; }
	.menu-btn span { height: 4px; }
	.menu-btn span + span { margin-top: 9px; }
	/* × はカンプだと 32×32 の斜め線。35pxの線を45.25px（32×√2）まで伸ばす */
	.open-menu .menu-btn span:nth-child(1) { transform: translateY(13px) rotate(45deg) scaleX(1.2929); }   /* 線4＋間隔9 */
	.open-menu .menu-btn span:nth-child(3) { transform: translateY(-13px) rotate(-45deg) scaleX(1.2929); }

	.section-inline-wrapper { width: auto; max-width: none; }

	/* メインビジュアル。カンプは 390×844 の画面にヘッダー込みで描いてあるので、ヘッダーを除いた 793。
	   高さは「アドレスバーが隠れたときの画面の高さ（100lvh）− KOKUYO のヘッダー（--mv-head）」。2〜4枚目は 1枚目 ＋ ヘッダー ＝ 100lvh（PC の --mv-h と同じ式）。
	   最初に見える高さ（100svh）にすると、スクロールでアドレスバーが隠れたときに、画面が伸びた分だけ次の1枚の頭が下に見える。
	   アドレスバーが出ている間は写真の下端がバーの裏に隠れるので、文字の枠（.txt）だけは実際に見えている高さ（100dvh）にして、下寄せの文字（3・4枚目・英語）を隠さない。
	   スライド自体の高さはアドレスバーの出し入れで変わらないので、止まる位置もずれない。
	   上限は付けず画面いっぱい（PC と同じくコクヨ企業サイトに合わせる）。100lvh が使えないブラウザは 793 のまま。
	   文字 SVG は slice なので、MV の高さが変わっても文字の大きさは変わらない（縦が短い画面では下の --need で縮める） */
	section.mv {
		--mv-head: var(--head-h, 51px);
		--mv-h1: calc(var(--u) * 793);
	}
	@supports (height: 100lvh) {
		section.mv { --mv-h1: calc(100lvh - var(--mv-head)); }
		section.mv .img-box .txt { bottom: auto; height: 100dvh; }
		section.mv .con01:first-child .img-box .txt { height: calc(100dvh - var(--mv-head)); }
	}
	/* 縦が短い画面（iPhone 8 など。Chrome で MV が約500px まで縮む）では、縦書きのキャッチが MV の下で切れる。
	   文字 SVG は slice（幅に合わせた大きさ）で縮まないので、そのときだけ文字が MV の高さに収まるよう縮める。
	   文字の画像の枠を「MV の高さ × 390 ÷ --need」の幅（上限は画面幅）にして右に寄せると、slice の倍率が高さ基準になり、文字がちょうど収まる。
	   一般的なスマホは上限（画面幅）のままなので見た目は変わらない。--need は文字に要る高さ（viewBox の単位。寄せた側の端から文字の反対の端まで ＋ 余白20）。
	   英語ページは文字の組み方が違う（下の中央に横書き）ので対象外。aspect-ratio が使えないブラウザでは縮めない */
	section.mv .con01:nth-child(1) { --need: 583.3; }   /* 上寄せ。文字の下端 614.3 − 枠の上端 51 ＋ 20 */
	section.mv .con01:nth-child(2) { --need: 510.8; }   /* 上寄せ。490.8 − 0（2枚目だけ枠が上端から）＋ 20 */
	section.mv .con01:nth-child(3) { --need: 511.9; }   /* 下寄せ。枠の下端 844 − 文字の上端 352.1 ＋ 20 */
	section.mv .con01:nth-child(4) { --need: 306.7; }   /* 下寄せ。844 − 557.3 ＋ 20 */
	@supports (aspect-ratio: 1) {
		:root:not(.en-page) section.mv .img-box .txt img {
			display: block;
			width: auto;
			max-width: 100%;
			margin-left: auto;
			aspect-ratio: 390 / var(--need);
		}
	}

	/* SCROLL ボタン（PSD どおり）：文字は無く、矢印だけを下の中央に。矢印は 26px 幅（PC の矢印の線の 0.788 倍。線幅 2.4px）、下端が画面の下端から 25 */
	section.mv .scroll a {
		left: 50%;
		bottom: calc(var(--u) * 25);
		width: calc(var(--u) * 26);
		transform: translateX(-50%);
	}
	section.mv .scroll .label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	section.mv .scroll .arrow { width: calc(var(--u) * 26); margin-top: 0; }
	/* 英語ページのキャッチ（4枚とも下の中央の横書き）は、SCROLL の矢印と重ならないよう 23u 上げる。
	   文字の下端は SVG の中で 799〜803（画面 844 の座標）、矢印の上端は 805 なので、いちばん下の文字と矢印の間を、矢印から画面の下端までと同じ 25u にした */
	.en-page section.mv .img-box .txt img { transform: translateY(calc(var(--u) * -23)); }

	/* キャンパスとは */
	section.concept {
		padding: calc(var(--u) * 93.6) 0 calc(var(--u) * 92.8);
		/* 罫線は左右20pxの内側だけ（SPカンプ：x=20.03〜369.98、38.69px間隔） */
		background-image: repeating-linear-gradient(to bottom, #f0f0f0 0 2.5px, transparent 2.5px calc(var(--u) * 38.69));
		background-position: calc(var(--u) * 20.03) calc(var(--u) * 38.49);
		background-size: calc(var(--u) * 349.95) calc(100% - var(--u) * 75.48);
	}
	section.concept .ttl .ttl01 { width: calc(var(--u) * 319.6); margin-left: calc(var(--u) * 36.5); }
	section.concept .ttl .ttl02 { width: calc(var(--u) * 327.1); margin: calc(var(--u) * -3.4) 0 0 calc(var(--u) * 31); transform: rotate(-4.05deg); }
	section.concept .btn.more { margin: calc(var(--u) * 18.3 - 16px) 0 0 calc(var(--u) * 73.1 - 16px); }
	section.concept .btn.more button { width: calc(var(--u) * 154.3 + 32px); }
	section.concept .img01 {
		width: calc(var(--u) * 364.5);
		margin: calc(var(--u) * -20.8 - 16px) 0 0 calc(var(--u) * 18.4);
		border-width: calc(var(--u) * 4.5);
		translate: calc(var(--u) * -4.5) calc(var(--u) * 6.28);   /* 中央で回したときの差を戻す（PC と同じ考え方。箱の大きさが違うので値も違う） */
	}
	section.concept .img01 img { width: calc(var(--u) * 355.5); height: calc(var(--u) * 242.5); }

	/* メッセージ */
	section.statement {
		padding: calc(var(--u) * 43.1) 0 calc(var(--u) * 71.1 - 16px);
		background-size: calc(var(--u) * 1210.5) auto;
	}
	section.statement { background-position: calc(var(--u) * -355.9) calc(var(--u) * -189.6); }
	/* 展開すると背が伸び（583 → 900u）、写真（幅 1210.5u・高さ 907.2u）の下が足りなくなる。
	   写真の下端をセクションの下端にそろえて全体を覆う（拡大はしない。写真はそのぶん下がる。PC の背景を止めて見せない環境と同じ考え方）。
	   文言などでさらに背が伸びても切れないよう、高さはセクションの高さ以上にする（そのときは少し拡大される） */
	section.statement.open {
		background-position: calc(var(--u) * -355.9) 100%;
		background-size: auto max(calc(var(--u) * 907.2), 100%);
	}
	section.statement .ttl img { width: calc(var(--u) * 292); margin-left: calc(var(--u) * 50); transform: none; }
	section.statement .btn.more { margin: calc(var(--u) * -32.1 - 32px) 0 0 calc(var(--u) * 62.4 - 16px); }
	section.statement .btn.more button { width: calc(var(--u) * 154.3 + 32px); transform: rotate(13.16deg); }

	/* 付箋。PCと同じ変数で受ける */
	.fusen01 .text-box,
	.fusen02 .text-box {
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 29);
	}
	section.concept {
		--f1-x: calc(var(--u) * 14.5 - 16px);  --f1-y: calc(var(--u) * 6 - 16px);     --f1-w: calc(var(--u) * 335.5 + 32px);
		--f1-tx: calc(var(--u) * 58.5 + 16px); --f1-ty: calc(var(--u) * 29.8 + 16px);
		--f2-x: calc(var(--u) * 72.4 - 16px);  --f2-y: calc(var(--u) * -55.5 - 32px); --f2-w: calc(var(--u) * 326.5 + 32px);
		--f2-tx: calc(var(--u) * 16.6 + 16px); --f2-ty: calc(var(--u) * 46.4 + 16px);
		--close-x: calc(var(--u) * 108.7 - 16px); --close-y: calc(var(--u) * -2.2 - 32px);
	}
	section.statement {
		--f1-x: calc(var(--u) * 28.6 - 16px);  --f1-y: calc(var(--u) * 28.8 - 16px);  --f1-w: calc(var(--u) * 337.7 + 32px);
		--f1-tx: calc(var(--u) * 39.5 + 16px); --f1-ty: calc(var(--u) * 31.3 + 16px);
		--f2-x: calc(var(--u) * 17.5 - 16px);  --f2-y: calc(var(--u) * -24.9 - 32px); --f2-w: calc(var(--u) * 331.9 + 32px);
		--f2-tx: calc(var(--u) * 23.4 + 16px); --f2-ty: calc(var(--u) * 51.4 + 16px);
		--close-x: calc(var(--u) * 151.8 - 16px); --close-y: calc(var(--u) * -37 - 32px); --close-rot: 14.82deg;
	}
	.detail .btn.close { width: calc(var(--u) * 154.3 + 32px); }

	section.concept.open {
		padding-bottom: calc(var(--u) * 44.3 - 16px);
		/* 開いた状態の罫線は39.5px間隔（英語版SPカンプ。閉じた状態と間隔が違う） */
		background-image: repeating-linear-gradient(to bottom, #f0f0f0 0 2.5px, transparent 2.5px calc(var(--u) * 39.5));
		background-position: calc(var(--u) * 20.03) calc(var(--u) * 38.27);
		background-size: calc(var(--u) * 349.95) calc(100% - var(--u) * 78.6);
	}
	section.concept.open .img01 { margin-top: calc(var(--u) * -1.8); }
	section.statement.open { padding-bottom: calc(var(--u) * 76.8 - 16px); }

	/* 新シンボルマーク。背景はPC用の写真（空）を縦いっぱいに敷く */
	section.symbol {
		padding: calc(var(--u) * 96.1) 0 calc(var(--u) * 113.5);
		background-size: auto 100%;
		background-position: center;
	}
	section.symbol .ttl img { width: calc(var(--u) * 270); margin-left: calc(var(--u) * 60); transform: none; }
	section.symbol .lead {
		margin-top: calc(var(--u) * 18.6);   /* 見出しとの空き。カンプは 2.6（空き約27px）だが、詰まって見えるので 16 広げた */
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 29);
		letter-spacing: .06em;
	}
	section.symbol .movie-box {
		width: calc(var(--u) * 331.5);
		height: calc(var(--u) * 189.5);
		margin: calc(var(--u) * 33) 0 0 calc(var(--u) * 29.3);
		background-color: #c3c3c3;
	}

	/* お知らせ。カードの枠を中央に置き、前後のカードの端を覗かせる */
	section.topics {
		padding: calc(var(--u) * 78.8) 0 calc(var(--u) * 73.2);
		background-image:
			repeating-linear-gradient(to bottom, #f0f0f0 0 2.5px, transparent 2.5px calc(var(--u) * 40.02)),
			repeating-linear-gradient(to right, #f0f0f0 0 2.5px, transparent 2.5px calc(var(--u) * 42.43));
		/* 方眼は左右20pxの内側だけ（SPカンプ：横線 x=20.03〜369.98、縦線 x=46.57〜343.58） */
		background-position: calc(var(--u) * 20.03) calc(var(--u) * 60.01), calc(var(--u) * 45.32) calc(var(--u) * 32.64);
		background-size: calc(var(--u) * 349.95) calc(var(--u) * 722.83), calc(var(--u) * 299.51) calc(var(--u) * 778.12);
	}
	section.topics .ttl img { width: calc(var(--u) * 155.4); margin-left: calc(var(--u) * 119.6); }
	/* 英語ページの見出し（PC の欄の説明と同じ考え方）。
	   画像は PC の英語版と同じもの（カンプでも同じ画像の縮小）。下の中身（付箋・動画枠・カード）は日本語と同じ位置 */
	.en-page section.concept .ttl { height: calc(var(--u) * 90.58); }
	.en-page section.concept .ttl .ttl02 { width: calc(var(--u) * 367.1); margin: 0 0 0 calc(var(--u) * 10.9); }
	.en-page section.concept .ttl > * { top: calc(var(--u) * .62); }
	.en-page section.statement .ttl { height: calc(var(--u) * 80); }
	.en-page section.statement .ttl img { width: calc(var(--u) * 343.1); margin: 0 0 0 calc(var(--u) * 27.1); }
	.en-page section.statement .ttl > * { top: calc(var(--u) * -3.7); }
	.en-page section.symbol .ttl { height: calc(var(--u) * 86); }
	.en-page section.symbol .ttl img { width: calc(var(--u) * 357.5); margin: 0 0 0 calc(var(--u) * 19.8); }
	.en-page section.symbol .ttl > * { top: calc(var(--u) * 4.29); }
	.en-page section.topics .ttl { height: calc(var(--u) * 51.27); }
	.en-page section.topics .ttl img { width: calc(var(--u) * 92.2); margin: 0 0 0 calc(var(--u) * 151); }
	.en-page section.topics .ttl > * { top: calc(var(--u) * 4.5); }
	section.topics .list {
		width: auto;
		margin: calc(var(--u) * 33.4) 0 0;
		padding: calc(var(--u) * 18) 0 calc(var(--u) * 10);
	}
	section.topics .con01 { width: calc(var(--u) * 288.4); }
	section.topics .con01 a {
		padding: calc(var(--u) * 20.1) calc(var(--u) * 19.8) calc(var(--u) * 18.5);
		background-size: 3px calc(100% - var(--u) * 13.2), 3px calc(100% - var(--u) * 13.2), calc(100% - var(--u) * 13.2) 3px, calc(100% - var(--u) * 13.2) 3px;
		background-position: left calc(var(--u) * 6.6), right calc(var(--u) * 6.6), calc(var(--u) * 6.6) top, calc(var(--u) * 6.6) bottom;
		box-shadow: 0 0 0 calc(var(--u) * 8.6) #fff;
	}
	section.topics .con01 a::before {
		left: calc(var(--clip-x) - var(--u) * 11);   /* 枠の右端からの距離がPCより約11px近い（カンプの紫のクリップで確認） */
	}
	section.topics .img-box { width: calc(var(--u) * 243); }
	section.topics .lead {
		margin-top: calc(var(--u) * 21.4);
		padding-bottom: calc(var(--u) * 10.9);
		font-size: calc(var(--u) * 18);
		line-height: calc(var(--u) * 31.5);
	}
	section.topics .date { margin-top: calc(var(--u) * 11.4); font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 20); letter-spacing: .08em; }   /* SP の本文と同じ字間 */
	section.topics .text {
		margin-top: calc(var(--u) * 12.6);
		font-size: calc(var(--u) * 13);
		line-height: calc(var(--u) * 24);
		letter-spacing: .08em;
		margin-right: -.08em;
	}
	section.topics .arrow { margin: calc(var(--u) * 39.4) 0 0; padding-left: calc(var(--u) * 4.9); text-align: center; }   /* カンプは中央より2.5px右 */
	section.topics .arrow button { width: calc(var(--u) * 58); height: calc(var(--u) * 58); }
	section.topics .arrow .next { margin-left: calc(var(--u) * 13.3); }

	/* Campusの勉強法（アイデア） */
	section.idea { padding: calc(var(--u) * 40.7) 0 calc(var(--u) * 73.3 - 16px); }
	section.idea::before {
		inset: -180px 0;
		background-position: calc(var(--u) * -398.8) calc(var(--u) * -65.8 + 180px);
		background-size: calc(var(--u) * 1317.1) auto;
	}
	/* 見出し。SP のカンプは無いので PC の 0.7 倍。写真の位置はセクションの上端から 158.8u。
	   2行目の下の余白は PC と同じく、写真の上の余白（20.5u）と相殺されるので写真までの距離そのもの */
	section.idea .ttl .ttl01 { width: calc(var(--u) * 212.8); margin: calc(var(--u) * 7.7) 0 0 calc(var(--u) * 96.45); }
	section.idea .ttl .ttl02 { width: calc(var(--u) * 287); margin: calc(var(--u) * .35) 0 calc(var(--u) * 29.57) calc(var(--u) * 51); }
	/* アイデアの見出し（英語）。PC と同じ比率だと幅435pxで画面からはみ出すので、幅350pxに縮めて中央に */
	.en-page section.idea .ttl { height: calc(var(--u) * 97.59); }
	.en-page section.idea .ttl .ttl01 { width: calc(var(--u) * 350); margin: 0 0 0 calc(var(--u) * 20); }
	.en-page section.idea .ttl > * { top: calc(var(--u) * 4.1); }
	section.idea .img01 {
		width: calc(var(--u) * 354.5);
		height: calc(var(--u) * 244.5);
		margin: calc(var(--u) * 20.5) 0 0 calc(var(--u) * 17.8);
		border-width: calc(var(--u) * 4.5);
	}
	section.idea .text-box {
		width: calc(var(--u) * 357.1);
		height: calc(var(--u) * 366.9);
		margin: calc(var(--u) * -39.3) 0 0 calc(var(--u) * 32.8);
		padding: calc(var(--u) * 43.7) 0 0 calc(var(--u) * 11.7);
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 28);
	}
	section.idea .text-box .fusen { width: calc(100% + 32px); }
	section.idea .text-box p + p { margin-top: calc(var(--u) * 22.3); }
	section.idea .btn { margin: calc(var(--u) * -18.8 - 16px) 0 0 calc(var(--u) * 115.4 - 16px); }
	section.idea .btn a { width: calc(var(--u) * 209.8 + 32px); }

	/* 関連リンク */
	section.link { padding: calc(var(--u) * 55.4) 0 calc(var(--u) * 117.7); }
	section.link::before {
		/* 左右20pxの内側だけ（SPカンプ：罫線 x=19.93〜369.88、点は両端を含めて34.99px間隔の11個）。点の半径ぶん外側から始める */
		left: calc(var(--u) * 16.93);
		right: auto;
		top: calc(var(--u) * 36.07);
		width: calc(var(--u) * 355.95);
		height: calc(var(--u) * 848.31);
		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.1), #f0f0f0 calc(var(--u) * 2.1) calc(var(--u) * 3.9), transparent calc(var(--u) * 3.9));
		background-position: 0 0, calc(var(--u) * 3) 0;
		background-size: calc(var(--u) * 34.99) calc(var(--u) * 40.11), calc(var(--u) * 349.95) calc(var(--u) * 40.11);
		background-repeat: repeat, repeat-y;
	}
	section.link .box {
		width: calc(var(--u) * 325);
		padding: calc(var(--u) * 17.9) 0 calc(var(--u) * 25.9);
		background: #f0f0f0;
	}
	section.link .box + .box { margin-top: calc(var(--u) * 44.9); padding-bottom: calc(var(--u) * 25.5); }
	section.link .ttl { font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 25); }
	section.link .list { margin-top: calc(var(--u) * 19.9); }
	section.link li + li { margin-top: calc(var(--u) * 25); }
	section.link .img-box { width: calc(var(--u) * 300); height: calc(var(--u) * 90); }
	section.link .img-box.line { border-color: #c3c3c3; }
	section.link .img-box picture,
	section.link .img-box img { width: 100%; }
	section.link .text {
		margin: calc(var(--u) * 3) 0 0 calc(var(--u) * 13.5);
		font-size: calc(var(--u) * 13);
		line-height: calc(var(--u) * 19);
		letter-spacing: .02em;
	}

	/* ページトップ。SPは画面に固定せず、カンプの位置（最後のセクションの下の余白、右寄せ）に置く（全ページ）。
	   ページの末尾に置いて負のマージンで最後のセクションに重ねるので、ページの高さは変わらない。
	   --pt-r は右端から、--pt-b は円の下端からセクションの終わりまで。ページごとの値は各ページのCSS */
	.pagetop {
		--pt-r: calc(var(--u) * 45.1);   /* トップページ（カンプ：関連リンクの箱の下） */
		--pt-b: calc(var(--u) * 22.5);
		position: relative;
		right: auto;
		bottom: auto;
		width: calc(var(--u) * 58);
		margin: calc(-1 * (var(--pt-b) + var(--u) * 58)) var(--pt-r) 0 auto;
		padding-bottom: var(--pt-b);   /* 下はマージンにすると .campus の外へ相殺で抜けるので padding で持つ */
	}
	/* 常に見せる（PCの「MVを過ぎてから出す」「フッターで隠す」を打ち消す） */
	.pagetop,
	.foot .pagetop { opacity: 1; visibility: visible; }
	.pagetop a { width: 100%; height: calc(var(--u) * 58); border-width: calc(var(--u) * 3); }
}