@charset "utf-8";

/* ============================================================
   Haptics Lab. — design system  "Signal Sheet"
   京都工芸繊維大学 ハプティクス研究室

   ダークを既定とし、閲覧者の OS 設定と手動トグルの双方に追従する。
   トークンは必ず素の :root に全部そろえること（片方のブロックに
   しか無い色があると、未指定状態で片テーマの文字色が
   もう片方の地に乗って読めなくなる）。
   ============================================================ */

/* ---------- tokens : dark（既定） ---------- */
:root {
	--void:      #070b1e;
	--sheet:     #0d1430;
	--sheet-2:   #141d42;
	--line:      #23305f;
	--line-soft: #182347;
	--ink:       #e6eaf7;
	--ink-dim:   #8891b4;
	--blue:      #5b73d8;
	--amber:     #e9b138;
	--amber-ink: #e9b138;

	--dot-rest:  91, 115, 216;   /* 格子の静止色 (rgb) */
	--dot-move:  233, 177, 56;   /* 格子の変位色 (rgb) */
	--glow:      rgba(233, 177, 56, .13);
	--shadow:    0 20px 50px -28px rgba(0, 0, 0, .85);

	--jp: 'Zen Maru Gothic', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
	--dp: 'IBM Plex Sans Condensed', 'Zen Maru Gothic', sans-serif;
	--mo: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

	--wrap: 1180px;
	--pad: 28px;

	color-scheme: dark;
}

/* ---------- tokens : light ---------- */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--void:      #f2f4f9;
		--sheet:     #ffffff;
		--sheet-2:   #e8ecf6;
		--line:      #ccd4e6;
		--line-soft: #dfe5f0;
		--ink:       #131a3a;
		--ink-dim:   #5a6486;
		--blue:      #2c3877;
		--amber:     #e9b138;
		--amber-ink: #8f6209;

		--dot-rest:  44, 56, 119;
		--dot-move:  176, 121, 15;
		--glow:      rgba(233, 177, 56, .22);
		--shadow:    0 20px 44px -30px rgba(19, 26, 58, .5);

		color-scheme: light;
	}
}
:root[data-theme="light"] {
	--void:      #f2f4f9;
	--sheet:     #ffffff;
	--sheet-2:   #e8ecf6;
	--line:      #ccd4e6;
	--line-soft: #dfe5f0;
	--ink:       #131a3a;
	--ink-dim:   #5a6486;
	--blue:      #2c3877;
	--amber:     #e9b138;
	--amber-ink: #8f6209;

	--dot-rest:  44, 56, 119;
	--dot-move:  176, 121, 15;
	--glow:      rgba(233, 177, 56, .22);
	--shadow:    0 20px 44px -30px rgba(19, 26, 58, .5);

	color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--void);
	color: var(--ink);
	font-family: var(--jp);
	font-size: 15px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 本文が長いページは読み幅を絞る */
.prose { max-width: 46em; }

/* ---------- type ---------- */
h1, h2, h3, h4 { text-wrap: balance; }

.eyebrow {
	font-family: var(--mo);
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--amber-ink);
	margin: 0 0 18px;
}

.mono { font-family: var(--mo); font-variant-numeric: tabular-nums; }

/* ---------- nav ---------- */
.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--void) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line-soft);
}
.nav-in {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 16px var(--pad);
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
/* ロゴ。地の明暗で白版と紺版を差し替える。
   JS ではなく CSS で切り替えるので、読み込み直後にちらつかない。 */
.brand {
	display: block;
	text-decoration: none;
	flex: 0 0 auto;
}
.brand img { height: 34px; width: auto; display: block; }
.brand .lg-posi, .foot-brand .lg-posi { display: none; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .brand .lg-nega,
	:root:not([data-theme="dark"]) .foot-brand .lg-nega { display: none; }
	:root:not([data-theme="dark"]) .brand .lg-posi,
	:root:not([data-theme="dark"]) .foot-brand .lg-posi { display: block; }
}
:root[data-theme="light"] .brand .lg-nega,
:root[data-theme="light"] .foot-brand .lg-nega { display: none; }
:root[data-theme="light"] .brand .lg-posi,
:root[data-theme="light"] .foot-brand .lg-posi { display: block; }

/* ロゴの英語表記だけでは所属が伝わりにくいので、日本語ページでは大学名を添える */
.brand-wrap {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-right: auto;
	min-width: 0;
}
.nav-links { display: flex; gap: 26px; flex-wrap: wrap; }
.nav-links a {
	font-family: var(--mo);
	font-size: 11.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ink-dim);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color .18s, border-color .18s;
	white-space: nowrap;
}
.nav-links a:hover { color: var(--amber-ink); border-bottom-color: var(--amber); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--amber); }

.nav-tools { display: flex; align-items: center; gap: 8px; }
.tool-btn {
	font-family: var(--mo);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--ink-dim);
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 12px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.6;
	transition: color .18s, border-color .18s, background .18s;
}
.tool-btn:hover { color: var(--amber-ink); border-color: var(--amber); }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- バナーの境目 ---------- */
/* パスは hx-core.js が頁ごとの乱数で描く。まっすぐ切らず不揃いな岸で終わる */
.hx-wave { display: block; width: 100%; pointer-events: none; }
.hx-wave path { fill: currentColor; }
.wave-hero {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	z-index: 1;
	height: 54px;
	color: var(--void);
}

.hero-in {
	position: relative;
	z-index: 2;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 78px var(--pad) 96px;
	pointer-events: none;
}
.hero-in a, .hero-in button { pointer-events: auto; }

.hero h1 {
	font-family: var(--dp);
	font-weight: 700;
	font-size: clamp(46px, 8.4vw, 104px);
	line-height: .96;
	letter-spacing: -.015em;
	margin: 0 0 26px;
}
.hero h1 em { font-style: normal; color: var(--amber-ink); }

.lede {
	max-width: 32em;
	color: var(--ink-dim);
	font-size: 15.5px;
	margin: 0 0 30px;
}

/* ページ見出し（下層ページ用の軽いヒーロー） */
.page-head { position: relative; }
.page-head .hero-in { padding: 54px var(--pad) 78px; }
.page-head h1 {
	font-family: var(--dp);
	font-weight: 700;
	font-size: clamp(34px, 5.4vw, 62px);
	line-height: 1.02;
	margin: 0 0 14px;
}

/* ---------- section ---------- */
section { position: relative; z-index: 2; }
.sec-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid var(--line);
	padding-top: 16px;
	margin-bottom: 30px;
}
.sec-no { font-family: var(--mo); font-size: 11.5px; color: var(--amber-ink); letter-spacing: .1em; }
.sec-head h2 {
	font-family: var(--dp);
	font-weight: 600;
	font-size: 26px;
	letter-spacing: .01em;
	margin: 0;
}
.sec-head .note { margin: 0 0 0 auto; font-size: 13px; color: var(--ink-dim); }

.sec { padding: 62px 0 10px; }

/* ---------- rows（研究一覧・出版一覧の共通行） ---------- */
.group + .group { margin-top: 40px; }
.group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 2px; }
.group-head h3 {
	font-family: var(--dp);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0;
	color: var(--blue);
}
.group-head span { font-family: var(--mo); font-size: 11px; color: var(--ink-dim); letter-spacing: .08em; }

.rows { border-bottom: 1px solid var(--line); }
.row {
	display: grid;
	grid-template-columns: 62px 1fr 22px;
	align-items: center;
	gap: 18px;
	border-top: 1px solid var(--line);
	color: inherit;
	text-decoration: none;
	padding: 18px 14px 18px 6px;
	position: relative;
	isolation: isolate;
	width: 100%;
	text-align: left;
	background: none;
	font: inherit;
	cursor: pointer;
}
/* 接触点：カーソル位置に沿って面が明るくなる */
.row::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(200px 70px at var(--mx, 50%) 50%, var(--glow), transparent 72%);
	opacity: 0;
	transition: opacity .25s;
}
.row::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: var(--amber);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.row:hover, .row:focus-visible { background: var(--sheet); }
.row:hover::after { opacity: 1; }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row:focus-visible .r-title { color: var(--amber-ink); }
.r-id { font-family: var(--mo); font-size: 11.5px; color: var(--ink-dim); }
.r-title { font-size: 15px; font-weight: 500; line-height: 1.55; transition: color .2s; }
.row:hover .r-title { color: var(--amber-ink); }
.r-title small { display: block; color: var(--ink-dim); font-weight: 400; font-size: 12.5px; }
.r-arrow {
	font-family: var(--mo);
	color: var(--line);
	text-align: right;
	transition: color .2s, transform .26s cubic-bezier(.2, .8, .2, 1);
}
.row:hover .r-arrow { color: var(--amber-ink); transform: translateX(4px); }

/* ---------- 研究サムネイル（接触反応つき） ---------- */
.topic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
	gap: 24px;
}
.topic {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}
.topic-fig {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--sheet);
	border: 1px solid var(--line);
	overflow: hidden;
}
/* 画像は静止時わずかに沈み、接触すると立ち上がる */
.topic-fig img {
	width: 100%; height: 100%;
	/* サムネイルは 4:3 の合成済み画像なので、余白を作らず枠いっぱいに置く */
	object-fit: cover;
	padding: 0;
	opacity: .9;
	filter: saturate(.9);
	transition: opacity .35s, filter .35s, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.topic-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.topic:hover .topic-fig img,
.topic:focus-visible .topic-fig img { opacity: 1; filter: saturate(1); transform: scale(1.03); }
.topic:hover .topic-fig, .topic:focus-visible .topic-fig { border-color: var(--amber); }
.topic-id { font-family: var(--mo); font-size: 11px; color: var(--amber-ink); letter-spacing: .12em; }
.topic h3 { font-size: 15.5px; font-weight: 500; margin: 0; line-height: 1.6; }
.topic p { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.8; }
.topic .t-body { color: var(--ink); font-size: 13.5px; }
.topic .t-related { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.topic .t-related ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.topic .t-related a {
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--ink-dim);
	text-decoration: none;
	border-bottom: 1px dotted var(--line);
	display: inline-block;
}
.topic .t-related a:hover { color: var(--amber-ink); border-bottom-color: var(--amber); }

/* ラベル（研究の関連発表・入試カード等で共用） */
.a-k {
	font-family: var(--mo);
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--amber-ink);
	display: block;
}

/* ---------- ヒーローの 2 段組 ---------- */
/* 左に見出し、右に研究室の説明。見出しは大きいので上端をそろえる。 */
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 40px;
	align-items: start;
}
.hero-copy { padding-top: 10px; }
.hero-copy .lede { max-width: none; margin-bottom: 22px; }

.hero-points {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.hero-points li {
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ink-dim);
	padding-left: 15px;
	position: relative;
}
.hero-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--amber);
}
.hero-points b {
	display: block;
	font-weight: 500;
	color: var(--ink);
	font-size: 14.5px;
}
.hero-note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--ink-dim);
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
}

/* ---------- 横に流れる映像帯 ---------- */
/* 素材の解像度が低いので、1 枚を大きく引き伸ばさず、
   小さいまま数を見せる。全幅に敷いて横長に見せる。 */
/* 読み幅の枠の外（main の外）に置いてあるので、そのままで画面いっぱいになる。
   100vw を使うとスクロールバーの幅だけ横にはみ出すので使わない。 */
.strip {
	position: relative;
	overflow: hidden;
	margin: 54px 0 0;
	padding: 0;
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	background: var(--sheet);
	--strip-h: 190px;
}
.strip-track {
	display: flex;
	width: max-content;
	will-change: transform;
}
.strip-track.running { animation: strip-run linear infinite; }
@keyframes strip-run { to { transform: translateX(-50%); } }
.strip:hover .strip-track.running { animation-play-state: paused; }

.strip-item {
	flex: 0 0 auto;
	height: var(--strip-h);
	border-right: 1px solid var(--line-soft);
	background: #000;
	overflow: hidden;
}
.strip-item video, .strip-item img {
	display: block;
	height: 100%;
	width: auto;
	opacity: .62;
	filter: saturate(.6);
	transition: opacity .35s, filter .35s;
}
.strip-item:hover video, .strip-item:hover img { opacity: 1; filter: none; }

@media (max-width: 720px) { .strip { --strip-h: 132px; } }
@media (prefers-reduced-motion: reduce) {
	.strip-track { animation: none; }
	.hero-art .ha-pulse, .hero-art .ha-cube { animation: none; }
}

/* ---------- news ---------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.n-card {
	background: var(--void);
	padding: 26px 24px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: background .22s;
}
.n-card:hover { background: var(--sheet); }
.n-date { font-family: var(--mo); font-size: 11.5px; letter-spacing: .1em; color: var(--amber-ink); }
.n-card p { margin: 0; font-size: 14px; line-height: 1.8; }
.n-card a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.n-card a:hover { text-decoration-color: var(--amber); }
.n-card .n-figs { display: flex; gap: 8px; flex-wrap: wrap; }
.n-card .n-figs img { max-height: 92px; width: auto; border: 1px solid var(--line-soft); }

/* News ページ：全件の縦並び */
.news-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.news-item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto;
	gap: 26px;
	align-items: start;
	border-top: 1px solid var(--line);
	padding: 22px 6px;
}
.news-item .news-date { font-family: var(--mo); font-size: 12px; color: var(--amber-ink); font-variant-numeric: tabular-nums; padding-top: 2px; }
.news-item p { margin: 0; font-size: 14.5px; }
.news-item .news-image { display: flex; gap: 8px; flex-wrap: wrap; max-width: 300px; }
.news-item .news-image img { max-height: 88px; width: auto; border: 1px solid var(--line-soft); }

/* ---------- 入試カウントダウン ---------- */
.admission {
	border: 1px solid var(--amber);
	background: var(--sheet);
	padding: 24px 26px;
	display: grid;
	gap: 6px 26px;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	box-shadow: var(--shadow);
}
.admission .a-k {
	font-family: var(--mo);
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--amber-ink);
}
.admission h3 { font-family: var(--dp); font-weight: 600; font-size: 22px; margin: 0; }
.admission dl {
	grid-column: 1 / 2;
	margin: 8px 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 16px;
	font-size: 14px;
}
.admission dt { font-family: var(--mo); font-size: 11.5px; color: var(--ink-dim); letter-spacing: .08em; padding-top: 4px; }
.admission dd { margin: 0; font-variant-numeric: tabular-nums; }
.admission .count {
	grid-row: 1 / 3;
	grid-column: 2 / 3;
	text-align: right;
	font-family: var(--mo);
	line-height: 1.2;
}
.admission .count b {
	display: block;
	font-size: 46px;
	font-weight: 500;
	color: var(--amber-ink);
	font-variant-numeric: tabular-nums;
}
.admission .count span { font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); text-transform: uppercase; }
.admission .cta { grid-column: 1 / -1; margin-top: 14px; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mo);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--void);
	background: var(--amber);
	border: 1px solid var(--amber);
	padding: 10px 20px;
	transition: filter .18s;
}
.btn:hover { filter: brightness(1.12); }
.btn.ghost { background: none; color: var(--amber-ink); }
.btn.ghost:hover { background: var(--glow); }

/* ---------- publications ---------- */
.filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 0 22px;
}
/* キーワードで絞り込む帯 */
.kw-bar { padding: 0 0 18px; }
.kw-bar .a-k { margin-bottom: 10px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.kw { display: inline-flex; align-items: baseline; gap: 7px; text-transform: none; letter-spacing: .02em; font-size: 12px; }
.chip.kw .n {
	font-size: 10px;
	color: var(--ink-dim);
	font-variant-numeric: tabular-nums;
}
.chip.kw[aria-pressed="true"] .n { color: var(--void); }
.kw-clear { border-style: dashed; }

.filters select {
	font: inherit;
	font-size: 13px;
	color: var(--ink);
	background: var(--sheet);
	border: 1px solid var(--line);
	padding: 8px 12px;
	min-width: 150px;
}
.chip {
	font-family: var(--mo);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-dim);
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	transition: color .18s, border-color .18s, background .18s;
}
.chip[aria-pressed="true"] { color: var(--void); background: var(--amber); border-color: var(--amber); }
.filter-count { font-family: var(--mo); font-size: 11.5px; color: var(--ink-dim); margin-left: auto; }

/* 種別ごとの節。学術論文 → 国際会議 → 国内会議 → 受賞 の順に積む */
.pub-sec + .pub-sec { margin-top: 46px; }
.pub-sec-head {
	font-family: var(--dp);
	font-weight: 600;
	font-size: 19px;
	letter-spacing: .02em;
	color: var(--blue);
	margin: 0 0 4px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.pub-sec-head .n {
	font-family: var(--mo);
	font-size: 11.5px;
	font-weight: 400;
	color: var(--ink-dim);
	font-variant-numeric: tabular-nums;
}

.pub-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); counter-reset: pub; }
.pub {
	border-top: 1px solid var(--line);
	padding: 20px 6px;
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 18px;
}
.pub .p-year {
	font-family: var(--mo);
	font-size: 11.5px;
	color: var(--amber-ink);
	font-variant-numeric: tabular-nums;
	padding-top: 3px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
/* 種別が 4 つになったので、年の下に小さく種別を出す */
.pub .p-type {
	font-style: normal;
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-dim);
}
/* 受賞は賞の名前が主役 */
.pub.is-award .p-award {
	display: block;
	font-family: var(--dp);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--amber-ink);
	margin-bottom: 4px;
}
.pub.is-award b { font-weight: 400; color: var(--ink); }
.pub b { font-size: 15px; font-weight: 500; line-height: 1.6; display: block; margin-bottom: 4px; }
.pub .p-au { font-size: 13.5px; color: var(--ink); margin: 0 0 2px; }
.pub .p-meta { font-size: 12.5px; color: var(--ink-dim); margin: 0 0 10px; font-family: var(--mo); }
.pub .p-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pub .p-acts a, .pub .p-acts button {
	font-family: var(--mo);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-dim);
	background: none;
	border: 1px solid var(--line);
	padding: 4px 11px;
	text-decoration: none;
	cursor: pointer;
	transition: color .18s, border-color .18s;
}
.pub .p-acts a:hover, .pub .p-acts button:hover { color: var(--amber-ink); border-color: var(--amber); }
.pub .p-acts .done { color: var(--amber-ink); border-color: var(--amber); }
.pub .p-topics { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pub .p-topics a {
	font-size: 11.5px;
	color: var(--ink-dim);
	text-decoration: none;
	border-bottom: 1px dotted var(--line);
}
.pub .p-topics a:hover { color: var(--amber-ink); border-bottom-color: var(--amber); }

.empty { padding: 40px 6px; color: var(--ink-dim); font-size: 14px; }

/* ---------- member ---------- */
.member-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr));
	gap: 26px;
}
.person { display: flex; flex-direction: column; gap: 10px; }
.face {
	aspect-ratio: 1;
	border-radius: 50%;   /* hx-core.js が一人ずつ違う不定形で上書きする */
	overflow: hidden;
	background: var(--sheet);
	border: 1px solid var(--line);
	max-width: 148px;
}
.face img { width: 100%; height: 100%; object-fit: cover; }
.person .grade { font-family: var(--mo); font-size: 11px; letter-spacing: .12em; color: var(--amber-ink); }
.person h3 { font-size: 15.5px; font-weight: 500; margin: 0; line-height: 1.5; }
.person h3 small { display: block; font-size: 12px; color: var(--ink-dim); font-weight: 400; }
.person p { margin: 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.75; }

.staff { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 28px; align-items: start; }
.staff + .staff { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }
.staff .face { max-width: none; }
.staff h3 { font-size: 20px; }
.staff details { margin-top: 12px; }
.staff summary {
	font-family: var(--mo);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-dim);
	cursor: pointer;
	padding: 6px 0;
}
.staff summary:hover { color: var(--amber-ink); }
.staff details ul { margin: 6px 0 0; padding-left: 1.2em; font-size: 13px; color: var(--ink-dim); }
.staff .pub-link { list-style: none; padding-left: 0; }
.staff .pub-link a { color: var(--amber-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.staff .pub-link a:hover { border-bottom-color: var(--amber); }

/* 本文が続くページ（Join など） */
.prose p { margin: 0 0 18px; }
.prose ol { margin: 0 0 18px; padding-left: 1.4em; }
.prose ol li { margin-bottom: 6px; }
.prose h2 {
	font-family: var(--dp);
	font-weight: 600;
	font-size: 20px;
	margin: 34px 0 12px;
	color: var(--blue);
}
.prose .mail { font-family: var(--mo); font-size: 14px; }
.prose .mail span { color: var(--ink-dim); font-size: 12.5px; }

.alumni-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.alumni-list li {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: baseline;
	border-top: 1px solid var(--line);
	padding: 14px 6px;
	font-size: 14px;
}
.alumni-list .a-year { font-family: var(--mo); font-size: 11.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.alumni-list .a-next { font-size: 12.5px; color: var(--ink-dim); }

/* ---------- footer ---------- */
.foot {
	border-top: 1px solid var(--line);
	margin-top: 70px;
}
.foot-in {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 34px var(--pad) 54px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 22px;
	align-items: start;
}
.foot-brand { grid-column: 1 / -1; }
.foot-brand img { height: 40px; width: auto; display: block; opacity: .85; }
.foot address { font-style: normal; font-size: 13.5px; color: var(--ink-dim); line-height: 1.9; }
.foot .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot .foot-links a {
	font-family: var(--mo);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-dim);
	text-decoration: none;
}
.foot .foot-links a:hover { color: var(--amber-ink); }
.foot .copy {
	grid-column: 1 / -1;
	font-family: var(--mo);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--ink-dim);
	border-top: 1px solid var(--line-soft);
	padding-top: 16px;
}

/* ---------- 遷移の波 ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
	animation: hx-wave .58s cubic-bezier(.22, .9, .3, 1) forwards;
}
@keyframes hx-wave {
	from { clip-path: circle(0% at var(--wave-x, 50%) var(--wave-y, 50%)); }
	to   { clip-path: circle(145% at var(--wave-x, 50%) var(--wave-y, 50%)); }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; gap: 10px; }
	.news-grid { grid-template-columns: 1fr; }
	.staff { grid-template-columns: 1fr; }
	.staff .face { max-width: 168px; }
	.foot-in { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	:root { --pad: 20px; }
	.row { grid-template-columns: 46px 1fr; }
	.r-arrow { display: none; }
	.news-item { grid-template-columns: 1fr; gap: 10px; }
	.news-item .news-image { max-width: none; }
	.admission { grid-template-columns: 1fr; }
	.admission .count { grid-row: auto; grid-column: 1; text-align: left; }
	.pub { grid-template-columns: 1fr; gap: 6px; }
	.alumni-list li { grid-template-columns: 1fr; gap: 2px; }
	.nav-in { gap: 14px; }
	.nav-links { gap: 16px; order: 3; width: 100%; }
}

/* ---------- モーション低減 ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.pulse { animation: none; opacity: .8; }
	*, *::before, *::after { transition-duration: .01ms !important; }
	::view-transition-new(root) { animation: none; }
}

/* ---------- Join：研究の進め方・支援・1年・受賞 ---------- */
.join-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.join-cards > div { background: var(--sheet); padding: 26px 26px 24px; }
.join-cards h3 {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 10px;
	padding-left: 12px;
	border-left: 2px solid var(--amber);
	line-height: 1.5;
}
.join-cards p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--ink); }
.join-cards .tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.join-cards .tags li {
	font-family: var(--mo);
	font-size: 11.5px;
	letter-spacing: .02em;
	color: var(--ink-dim);
	border: 1px solid var(--line);
	padding: 3px 9px;
}

.year { margin: 0; border-bottom: 1px solid var(--line); }
.year > div {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}
.year dt { font-family: var(--mo); font-size: 13px; color: var(--amber-ink); letter-spacing: .04em; }
.year dd { margin: 0; font-size: 14px; line-height: 1.7; }
.year dd span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-dim); }
.year dd span::before { content: "入試　"; color: var(--ink-dim); }
:lang(en) .year dd span::before { content: none; }
.sec .note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-dim); }

.award-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); max-width: 46em; }
.award-list li {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 18px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
}
.award-list li.empty { display: block; color: var(--ink-dim); font-size: 13.5px; }
.award-list p { margin: 0; }
.award-list .a-year { font-size: 12px; color: var(--ink-dim); padding-top: 2px; }
.award-list .a-name { font-size: 14.5px; font-weight: 500; line-height: 1.6; }
.award-list .a-name a { color: inherit; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.award-list .a-title { font-size: 13px; line-height: 1.7; margin-top: 4px; }
.award-list .a-authors { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }

@media (max-width: 720px) {
	.join-cards { grid-template-columns: 1fr; }
	.year > div { grid-template-columns: 64px 1fr; gap: 12px; }
	.join-cards > div { padding: 22px 20px; }
}

/* 受付中の入試が無いときの案内 */
.admission.open-door .a-sub { margin: 8px 0 0; color: var(--ink-dim); font-size: 13.5px; line-height: 1.8; max-width: 44em; }
.admission.open-door dl { margin-top: 14px; }
.admission.open-door .a-usual { grid-column: 1 / -1; color: var(--amber-ink); letter-spacing: .14em; }
.admission.open-door .a-usual + dd { display: none; }
.admission.open-door .cta { display: flex; flex-wrap: wrap; gap: 10px; }
.join-cards p.card-cta { margin-top: 16px; }

/* トップの見出しは少し控えめに（下層ページの見出しは変えない） */
.hero-left h1 { font-size: clamp(38px, 6.4vw, 80px); margin-bottom: 0; }

/* ---------- ヒーローの浮遊キーワード ---------- */
/* hero-float.js が漂わせ、ポインタに反応させる飾りの語。
   JS が無い（または動き控えめの）ときは、そのまま折り返して並ぶ。
   --p は 0〜1 で、ポインタに近いほど 1。色・点・下線をそれで変える。 */
.hero-float {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	max-width: 30em;
}
.hero-float.is-live {
	display: block;
	max-width: none;
	height: clamp(280px, 31vw, 330px);
}
:lang(en) .hero-float.is-live { height: clamp(300px, 34vw, 350px); }
.hero-float-fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.hero-float li { margin: 0; padding: 0; }
.hero-float.is-live li { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.hero-float li span {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .62em;
	padding: .75em .4em;
	font-family: var(--jp);
	font-size: calc(var(--s, 14px) * 1.1);
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
	color: color-mix(in srgb, var(--amber-ink) calc(var(--p, 0) * 100%), var(--ink-dim));
}
.hero-float li.hot span {
	color: color-mix(in srgb, var(--amber-ink) calc(var(--p, 0) * 100%), var(--ink));
}
:lang(en) .hero-float li span { font-family: var(--dp); letter-spacing: .02em; font-size: calc(var(--s, 14px) * 1.18); }
/* 語の頭の点。近づくほど大きく、はっきりする */
.hero-float li span::before {
	content: "";
	flex: none;
	width: .4em;
	height: .4em;
	border-radius: 50%;
	background: var(--amber);
	opacity: calc(.45 + var(--p, 0) * .55);
	transform: scale(calc(1 + var(--p, 0) * .9));
}
/* 近づくと左から下線が伸びる */
.hero-float li span::after {
	content: "";
	position: absolute;
	left: .4em;
	right: .4em;
	bottom: .45em;
	height: 1px;
	background: var(--amber);
	transform: scaleX(clamp(0, calc((var(--p, 0) - .25) * 2), 1));
	transform-origin: left;
}
@media (max-width: 900px) {
	.hero-float { margin-top: 12px; max-width: none; }
	.hero-float.is-live { height: 360px; }
}
@media (max-width: 480px) {
	.hero-float.is-live { height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-float.is-live li { opacity: .9; }
}

/* ---------- サムネイルの切り替え（more: がある研究テーマ） ---------- */
.topic-media { position: relative; touch-action: pan-y; }
.topic-media .topic-fig img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease, filter .35s, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.topic-media .topic-fig img.is-on { opacity: .9; }
.topic:hover .topic-media .topic-fig img.is-on,
.topic:focus-visible .topic-media .topic-fig img.is-on { opacity: 1; }
.topic .topic-fig img:not(.is-on) { opacity: 0; }

.t-arrow {
	position: absolute;
	top: 50%;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	padding: 0 0 3px;
	display: grid;
	place-items: center;
	font-size: 22px;
	line-height: 1;
	color: #fff;
	background: rgba(7, 11, 30, .5);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s, background .2s, color .2s;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.t-prev { left: 10px; }
.t-next { right: 10px; }
.topic-media:hover .t-arrow,
.t-arrow:focus-visible { opacity: 1; }
.t-arrow:hover { background: var(--amber); border-color: var(--amber); color: #0b1027; }
@media (hover: none) { .t-arrow { opacity: .85; } }

.t-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 8px;
	pointer-events: none;
}
.t-dot {
	position: relative;
	pointer-events: auto;
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 1px rgba(7, 11, 30, .35);
	cursor: pointer;
	transition: transform .2s, background .2s;
}
.t-dot::after { content: ""; position: absolute; inset: -9px; }
.t-dot.is-on { background: var(--amber); transform: scale(1.4); }
@media (prefers-reduced-motion: reduce) {
	.topic-media .topic-fig img { transition: none; }
}
.topic-media > .topic-fig { display: block; }